Skip to content

F
fns_front_2
Commit 7cdcb1bc authored by chenqikuai's avatar chenqikuai
Browse files
Options

赶紧提交，生怕发生编译事故

parent ec4ca768
Hide whitespace changes
Inline Side-by-side
Showing with 244 additions and 119 deletions
package-lock.json
View file @ 7cdcb1bc
......@@ -5132,6 +5132,11 @@
"minimist": "^1.1.1"
}
},
"dexie": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/dexie/-/dexie-3.0.3.tgz",
"integrity": "sha512-BSFhGpngnCl1DOr+8YNwBDobRMH0ziJs2vts69VilwetHYOtEDcLqo7d/XiIphM0tJZ2rPPyAGd31lgH2Ln3nw=="
},
"didyoumean": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
......@@ -6148,6 +6153,122 @@
}
}
},
"fork-ts-checker-webpack-plugin-v5": {
"version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
"integrity": "sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==",
"dev": true,
"optional": true,
"requires": {
"@babel/code-frame": "^7.8.3",
"@types/json-schema": "^7.0.5",
"chalk": "^4.1.0",
"cosmiconfig": "^6.0.0",
"deepmerge": "^4.2.2",
"fs-extra": "^9.0.0",
"memfs": "^3.1.2",
"minimatch": "^3.0.4",
"schema-utils": "2.7.0",
"semver": "^7.3.2",
"tapable": "^1.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
"dev": true,
"optional": true,
"requires": {
"yallist": "^4.0.0"
}
},
"schema-utils": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
"integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
"dev": true,
"optional": true,
"requires": {
"@types/json-schema": "^7.0.4",
"ajv": "^6.12.2",
"ajv-keywords": "^3.4.1"
}
},
"semver": {
"version": "7.3.5",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
"integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
"dev": true,
"optional": true,
"requires": {
"lru-cache": "^6.0.0"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"dev": true,
"optional": true
}
}
},
"form-data": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
......
package.json
View file @ 7cdcb1bc
......@@ -14,6 +14,7 @@
"axios": "^0.21.1",
"bitcoinjs-lib": "^5.2.0",
"core-js": "^3.6.5",
"dexie": "^3.0.3",
"enc-utils": "^3.0.0",
"prepend-http": "^4.0.0",
"quasar": "^2.0.4",
......
src/App.vue
View file @ 7cdcb1bc
......@@ -4,6 +4,94 @@
</div>
</template>
<script lang="ts">
import { ref } from "@vue/reactivity";
import { connectionState } from "./store/connectionStore";
import FzmMessageProtocol from "@/utils/fzm-message-protocol";
import { generateToken } from "./utils/generateToken/generate-token";
import { from, privateKey, publicKey } from "./store/appCallerStore";
import { defineComponent, onBeforeUnmount, watch } from "vue";
import decodeChatMessage from "./utils/fzm-message-protocol-chat/decodeChatMessage";
import { messageStore } from "./store/messagesStore";
import { ChatMessageTypes } from "./types/chatMessageTypes";
export default defineComponent({
setup() {
const initError = ref(false);
const connect = () => {
connectionState.error = false;
initError.value = false;
const fmp = new FzmMessageProtocol("ws://172.16.101.107:8888/sub");
fmp
.authorize({
appId: "dtalk",
token: generateToken({
address: from,
privateKeyHex: privateKey,
publicKeyHex: publicKey,
}),
})
.then((conn) => {
connectionState.connection = conn;
})
.catch((reason) => {
initError.value = true;
console.error(reason);
});
};
connect();
watch(() => connectionState.error, () => {
if (connectionState.error) {
connect();
}
})
watch(() => connectionState.connection, () => {
if (!connectionState.connection) return;
// 连接后，指定每次收到消息要做的事
connectionState.connection.onReceiveMessage = (msgData) => {
const msg = decodeChatMessage(msgData);
console.log(msg, "show msg from server");
// 收到的非本笔订单的消息不处理
// if (msg.orderid !== orderid) return;
msg &&
messageStore.displayNewMessage({
content: msg.content,
from: msg.from,
uuid: msg.uuid,
state: null,
type: (msg.type || 0) as ChatMessageTypes,
datetime: msg.datetime,
logid: msg.logid,
});
};
// 连接后，指定每次断开连接要做的事
connectionState.connection.onLoseConnection = () => {
connectionState.connection = undefined;
connectionState.error = true;
};
})
onBeforeUnmount(() => {
connectionState.connection?.disconnect();
});
}
})
</script>
<style lang="less">
.fade-enter-active,
.fade-leave-active {
......
src/components/ChatList/ChatListItem.vue
View file @ 7cdcb1bc
......@@ -20,8 +20,9 @@
</div>
</div>
</template>
<script lang="ts" setup>
<script setup lang="ts">
import { timestampFormat } from "@/utils/time";
const props = defineProps({
avatar_url: { type: String, default: '--' },
id: { type: String, default: '--' },
......
src/components/ServiceRating/index.vue
View file @ 7cdcb1bc
......@@ -29,6 +29,7 @@
<script lang="ts" setup>
import Icon from "@/components/common/Icon.vue"
import { defineProps, PropType } from "vue"
const props = defineProps({
selected: String,
setSelectedRate: Function,
......
src/db/index.ts 0 → 100644
View file @ 7cdcb1bc
import Dexie from 'dexie'
import { DisplayMessage } from '@/store/messagesStore'
// Subclass it
class MyDatabase extends Dexie {
contacts: Dexie.Table<iMessage, number>
constructor() {
super('普惠金融')
this.version(1).stores({
contacts: '++id,first,last',
})
this.contacts = this.table('contacts') // Just informing Typescript what Dexie has already done...
}
}
interface iMessage extends DisplayMessage {
id?: number
}
// Instantiate it
var db = new MyDatabase()
// Open it
db.open().catch((err) => {
console.error(`Open failed: ${err.stack}`)
})
src/views/Chat/Chat.vue
View file @ 7cdcb1bc
<template>
<div class="flex flex-col flex-nowrap text-base bg-gray-50 h-screen">
<!-- 没连上时界面上只有一个返回按钮 -->
<!-- 👇是返回按钮 -->
<!-- <div
v-if="!connectionState.connection"
@click="close"
class="h-chat-header w-10 text-center flex justify-center items-center"
>
<i class="iconfont text-lg">&#xe606;</i>
</div>-->
<!-- <ChatHeaderVue v-else /> -->
<NavBar title="我的客服" />
<div
v-if="initError"
@click="connect"
class="flex flex-col justify-center items-center bg-gray-50 h-full w-full px-5"
>
<div>初始化聊天失败</div>
<div v-if="debug" class="w-full">
<div>from: {{ from }}</div>
<div>token: {{ token }}</div>
<div class="break-all">url: {{ url }}</div>
</div>
</div>
<div
v-if="connectionState.error"
@click="connect"
class="flex flex-row justify-center items-center bg-gray-50 h-full w-full"
>网络错误，点击屏幕尝试重连</div>
<div
v-else-if="!connectionState.connection"
v-if="!connectionState.connection"
class="flex flex-row justify-center items-center bg-gray-50 h-full w-full"
>
<q-spinner color="primary" size="3rem" :thickness="5" />
......@@ -56,18 +29,14 @@ import ChatContentVue from "./ChatContent.vue";
import ChatInputVue from "./ChatInput.vue";
import { connectionState } from "@/store/connectionStore";
import FzmMessageProtocol from "@/utils/fzm-message-protocol";
import { getOrderInfo, privateKey, publicKey } from "@/store/appCallerStore";
import { privateKey, publicKey } from "@/store/appCallerStore";
import { token, from, orderid } from "@/store/appCallerStore";
import computeExt from "@/utils/getFzmMesageProtocolExt";
import { watch } from "@vue/runtime-core";
import decodeChatMessage from "@/utils/fzm-message-protocol-chat/decodeChatMessage";
import { messageStore } from "@/store/messagesStore";
import { ChatMessageTypes } from "@/types/chatMessageTypes";
import { generateToken } from "@/utils/generateToken/generate-token";
import ChatOption from "@/components/ChatOptions/index.vue";
import ServiceRating from "@/components/ServiceRating/index.vue";
import CommonUseSentence from "@/components/CommonUseSentence/index.vue"
import { textInputStore } from "@/store/textInputStore";
export default defineComponent({
components: {
ChatContentVue,
......@@ -84,7 +53,6 @@ export default defineComponent({
const selected = ref("");
const selectedChatOption = ref("");
const showShortSentences = ref(true);
const debug = process.env.NODE_ENV === "development";
const setShowSentences = (show: boolean) =>
(showShortSentences.value = show);
......@@ -95,92 +63,9 @@ export default defineComponent({
textInputStore.inputText.value = data.content;
}
const connect = () => {
connectionState.error = false;
initError.value = false;
const fmp = new FzmMessageProtocol("ws://172.16.101.107:8888/sub");
fmp
.authorize({
appId: "dtalk",
token: generateToken({
address: from,
privateKeyHex: privateKey,
publicKeyHex: publicKey,
}),
})
.then((conn) => {
connectionState.connection = conn;
})
.catch((reason) => {
initError.value = true;
console.error(reason);
});
// getOrderInfo()
// .then((res) => {
// return fmp.authorize({
// appId: 'dtalk',
// token: 'MOCK',
// })
// })
// .then((conn) => {
// connectionState.connection = conn
// })
// .catch((reason) => {
// initError.value = true
// console.error(reason)
// })
};
connect();
// 监听连接状态
watch(
() => connectionState.connection,
() => {
if (!connectionState.connection) return;
// 连接后，指定每次收到消息要做的事
connectionState.connection.onReceiveMessage = (msgData) => {
const msg = decodeChatMessage(msgData);
// 收到的非本笔订单的消息不处理
// if (msg.orderid !== orderid) return;
msg &&
messageStore.displayNewMessage({
content: msg.content,
from: msg.from,
uuid: msg.uuid,
state: null,
type: (msg.type || 0) as ChatMessageTypes,
datetime: msg.datetime,
logid: msg.logid,
});
};
// 连接后，指定每次断开连接要做的事
connectionState.connection.onLoseConnection = () => {
connectionState.connection = undefined;
connectionState.error = true;
};
}
);
onBeforeUnmount(() => {
connectionState.connection?.disconnect();
});
return {
connectionState,
connect,
initError,
debug,
from,
token,
url: window.location.href,
selected,
handleSelect,
showServiceRating,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment