lq/nl-im-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

一些方法

Browse Source
This commit is contained in:
年糕崽崽
2025-07-05 16:09:14 +08:00
parent 9c9245ce63
commit 95ceff344f
10 changed files with 876 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -19,6 +19,8 @@
"axios": "^1.6.2",
"lucide-vue-next": "^0.507.0",
"pinia": "^2.1.7",
"socket.io": "^4.8.1",
"socket.io-client": "^4.8.1",
"swiper": "^11.0.5",
"tailwindcss": "^4.1.4",
"vue": "^3.5.13",

230
pnpm-lock.yaml generated
View File

@@ -19,7 +19,7 @@ importers:
version: 6.7.2
'@tailwindcss/vite':
specifier: ^4.1.4
version: 4.1.4(vite@6.3.3(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0))
version: 4.1.4(vite@6.3.3(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0))
'@vueuse/core':
specifier: ^13.5.0
version: 13.5.0(vue@3.5.13)
@@ -38,6 +38,12 @@ importers:
pinia:
specifier: ^2.1.7
version: 2.3.1(vue@3.5.13)
socket.io:
specifier: ^4.8.1
version: 4.8.1
socket.io-client:
specifier: ^4.8.1
version: 4.8.1
swiper:
specifier: ^11.0.5
version: 11.2.6
@@ -56,13 +62,13 @@ importers:
devDependencies:
'@vitejs/plugin-vue':
specifier: ^5.2.2
version: 5.2.3(vite@6.3.3(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0))(vue@3.5.13)
version: 5.2.3(vite@6.3.3(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0))(vue@3.5.13)
sass:
specifier: ^1.71.0
version: 1.88.0
vite:
specifier: ^6.3.1
version: 6.3.3(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0)
version: 6.3.3(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0)
packages:
@@ -461,6 +467,9 @@ packages:
'@simonwep/pickr@1.8.2':
resolution: {integrity: sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==}
'@socket.io/component-emitter@3.1.2':
resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
'@tailwindcss/node@4.1.4':
resolution: {integrity: sha512-MT5118zaiO6x6hNA04OWInuAiP1YISXql8Z+/Y8iisV5nuhM8VXlyhRuqc2PEviPszcXI66W44bCIk500Oolhw==}
@@ -551,9 +560,15 @@ packages:
peerDependencies:
vite: ^5.2.0 || ^6
'@types/cors@2.8.19':
resolution: {integrity: sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==}
'@types/estree@1.0.7':
resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
'@types/node@24.0.10':
resolution: {integrity: sha512-ENHwaH+JIRTDIEEbDK6QSQntAYGtbvdDXnMXnZaZ6k13Du1dPMmprkEHIL7ok2Wl2aZevetwTAb5S+7yIF+enA==}
'@types/web-bluetooth@0.0.21':
resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
@@ -631,6 +646,10 @@ packages:
peerDependencies:
vue: ^3.5.0
accepts@1.3.8:
resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
engines: {node: '>= 0.6'}
ant-design-vue@4.2.6:
resolution: {integrity: sha512-t7eX13Yj3i9+i5g9lqFyYneoIb3OzTvQjq9Tts1i+eiOd3Eva/6GagxBSXM1fOCjqemIu0FYVE1ByZ/38epR3Q==}
engines: {node: '>=12.22.0'}
@@ -649,6 +668,10 @@ packages:
axios@1.9.0:
resolution: {integrity: sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==}
base64id@2.0.0:
resolution: {integrity: sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==}
engines: {node: ^4.5.0 || >= 5.9}
braces@3.0.3:
resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
engines: {node: '>=8'}
@@ -668,15 +691,32 @@ packages:
compute-scroll-into-view@1.0.20:
resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==}
cookie@0.7.2:
resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
engines: {node: '>= 0.6'}
core-js@3.42.0:
resolution: {integrity: sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==}
cors@2.8.5:
resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
engines: {node: '>= 0.10'}
csstype@3.1.3:
resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
dayjs@1.11.13:
resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
debug@4.3.7:
resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
engines: {node: '>=6.0'}
peerDependencies:
supports-color: '*'
peerDependenciesMeta:
supports-color:
optional: true
delayed-stream@1.0.0:
resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
engines: {node: '>=0.4.0'}
@@ -700,6 +740,17 @@ packages:
resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
engines: {node: '>= 0.4'}
engine.io-client@6.6.3:
resolution: {integrity: sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==}
engine.io-parser@5.2.3:
resolution: {integrity: sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==}
engines: {node: '>=10.0.0'}
engine.io@6.6.4:
resolution: {integrity: sha512-ZCkIjSYNDyGn0R6ewHDtXgns/Zre/NT6Agvq1/WobF7JXgFff4SeDroKiCO3fNJreU9YG429Sc81o4w5ok/W5g==}
engines: {node: '>=10.2.0'}
enhanced-resolve@5.18.1:
resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
engines: {node: '>=10.13.0'}
@@ -919,6 +970,9 @@ packages:
resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
engines: {node: '>= 0.6'}
ms@2.1.3:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
nanoid@3.3.11:
resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -927,9 +981,17 @@ packages:
nanopop@2.4.2:
resolution: {integrity: sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw==}
negotiator@0.6.3:
resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
engines: {node: '>= 0.6'}
node-addon-api@7.1.1:
resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
object-assign@4.1.1:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
engines: {node: '>=0.10.0'}
omit.js@2.0.2:
resolution: {integrity: sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg==}
@@ -986,6 +1048,21 @@ packages:
shallow-equal@1.2.1:
resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
socket.io-adapter@2.5.5:
resolution: {integrity: sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==}
socket.io-client@4.8.1:
resolution: {integrity: sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==}
engines: {node: '>=10.0.0'}
socket.io-parser@4.2.4:
resolution: {integrity: sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==}
engines: {node: '>=10.0.0'}
socket.io@4.8.1:
resolution: {integrity: sha512-oZ7iUCxph8WYRHHcjBEc9unw3adt5CmSNlppj/5Q4k2RIrhl8Z5yY2Xr4j9zj0+wzVZ0bxmYoGSzKJnRl6A4yg==}
engines: {node: '>=10.2.0'}
source-map-js@1.2.1:
resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
engines: {node: '>=0.10.0'}
@@ -1016,9 +1093,16 @@ packages:
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
engines: {node: '>=8.0'}
undici-types@7.8.0:
resolution: {integrity: sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==}
unhead@1.11.20:
resolution: {integrity: sha512-3AsNQC0pjwlLqEYHLjtichGWankK8yqmocReITecmpB1H0aOabeESueyy+8X1gyJx4ftZVwo9hqQ4O3fPWffCA==}
vary@1.1.2:
resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
engines: {node: '>= 0.8'}
vite@6.3.3:
resolution: {integrity: sha512-5nXH+QsELbFKhsEfWLkHrvgRpTdGJzqOZ+utSdmPTvwHmvU6ITTm3xx+mRusihkcI8GeC7lCDyn3kDtiki9scw==}
engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -1098,6 +1182,22 @@ packages:
warning@4.0.3:
resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
ws@8.17.1:
resolution: {integrity: sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==}
engines: {node: '>=10.0.0'}
peerDependencies:
bufferutil: ^4.0.1
utf-8-validate: '>=5.0.2'
peerDependenciesMeta:
bufferutil:
optional: true
utf-8-validate:
optional: true
xmlhttprequest-ssl@2.1.2:
resolution: {integrity: sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==}
engines: {node: '>=0.4.0'}
zhead@2.2.4:
resolution: {integrity: sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==}
@@ -1354,6 +1454,8 @@ snapshots:
core-js: 3.42.0
nanopop: 2.4.2
'@socket.io/component-emitter@3.1.2': {}
'@tailwindcss/node@4.1.4':
dependencies:
enhanced-resolve: 5.18.1
@@ -1412,15 +1514,23 @@ snapshots:
'@tailwindcss/oxide-win32-arm64-msvc': 4.1.4
'@tailwindcss/oxide-win32-x64-msvc': 4.1.4
'@tailwindcss/vite@4.1.4(vite@6.3.3(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0))':
'@tailwindcss/vite@4.1.4(vite@6.3.3(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0))':
dependencies:
'@tailwindcss/node': 4.1.4
'@tailwindcss/oxide': 4.1.4
tailwindcss: 4.1.4
vite: 6.3.3(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0)
vite: 6.3.3(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0)
'@types/cors@2.8.19':
dependencies:
'@types/node': 24.0.10
'@types/estree@1.0.7': {}
'@types/node@24.0.10':
dependencies:
undici-types: 7.8.0
'@types/web-bluetooth@0.0.21': {}
'@unhead/dom@1.11.20':
@@ -1451,9 +1561,9 @@ snapshots:
unhead: 1.11.20
vue: 3.5.13
'@vitejs/plugin-vue@5.2.3(vite@6.3.3(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0))(vue@3.5.13)':
'@vitejs/plugin-vue@5.2.3(vite@6.3.3(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0))(vue@3.5.13)':
dependencies:
vite: 6.3.3(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0)
vite: 6.3.3(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0)
vue: 3.5.13
'@vue/compiler-core@3.5.13':
@@ -1533,6 +1643,11 @@ snapshots:
dependencies:
vue: 3.5.13
accepts@1.3.8:
dependencies:
mime-types: 2.1.35
negotiator: 0.6.3
ant-design-vue@4.2.6(vue@3.5.13):
dependencies:
'@ant-design/colors': 6.0.0
@@ -1573,6 +1688,8 @@ snapshots:
transitivePeerDependencies:
- debug
base64id@2.0.0: {}
braces@3.0.3:
dependencies:
fill-range: 7.1.1
@@ -1593,12 +1710,23 @@ snapshots:
compute-scroll-into-view@1.0.20: {}
cookie@0.7.2: {}
core-js@3.42.0: {}
cors@2.8.5:
dependencies:
object-assign: 4.1.1
vary: 1.1.2
csstype@3.1.3: {}
dayjs@1.11.13: {}
debug@4.3.7:
dependencies:
ms: 2.1.3
delayed-stream@1.0.0: {}
detect-libc@1.0.3:
@@ -1616,6 +1744,36 @@ snapshots:
es-errors: 1.3.0
gopd: 1.2.0
engine.io-client@6.6.3:
dependencies:
'@socket.io/component-emitter': 3.1.2
debug: 4.3.7
engine.io-parser: 5.2.3
ws: 8.17.1
xmlhttprequest-ssl: 2.1.2
transitivePeerDependencies:
- bufferutil
- supports-color
- utf-8-validate
engine.io-parser@5.2.3: {}
engine.io@6.6.4:
dependencies:
'@types/cors': 2.8.19
'@types/node': 24.0.10
accepts: 1.3.8
base64id: 2.0.0
cookie: 0.7.2
cors: 2.8.5
debug: 4.3.7
engine.io-parser: 5.2.3
ws: 8.17.1
transitivePeerDependencies:
- bufferutil
- supports-color
- utf-8-validate
enhanced-resolve@5.18.1:
dependencies:
graceful-fs: 4.2.11
@@ -1819,13 +1977,19 @@ snapshots:
dependencies:
mime-db: 1.52.0
ms@2.1.3: {}
nanoid@3.3.11: {}
nanopop@2.4.2: {}
negotiator@0.6.3: {}
node-addon-api@7.1.1:
optional: true
object-assign@4.1.1: {}
omit.js@2.0.2: {}
packrup@0.1.2: {}
@@ -1897,6 +2061,47 @@ snapshots:
shallow-equal@1.2.1: {}
socket.io-adapter@2.5.5:
dependencies:
debug: 4.3.7
ws: 8.17.1
transitivePeerDependencies:
- bufferutil
- supports-color
- utf-8-validate
socket.io-client@4.8.1:
dependencies:
'@socket.io/component-emitter': 3.1.2
debug: 4.3.7
engine.io-client: 6.6.3
socket.io-parser: 4.2.4
transitivePeerDependencies:
- bufferutil
- supports-color
- utf-8-validate
socket.io-parser@4.2.4:
dependencies:
'@socket.io/component-emitter': 3.1.2
debug: 4.3.7
transitivePeerDependencies:
- supports-color
socket.io@4.8.1:
dependencies:
accepts: 1.3.8
base64id: 2.0.0
cors: 2.8.5
debug: 4.3.7
engine.io: 6.6.4
socket.io-adapter: 2.5.5
socket.io-parser: 4.2.4
transitivePeerDependencies:
- bufferutil
- supports-color
- utf-8-validate
source-map-js@1.2.1: {}
stylis@4.3.6: {}
@@ -1919,6 +2124,8 @@ snapshots:
is-number: 7.0.0
optional: true
undici-types@7.8.0: {}
unhead@1.11.20:
dependencies:
'@unhead/dom': 1.11.20
@@ -1926,7 +2133,9 @@ snapshots:
'@unhead/shared': 1.11.20
hookable: 5.5.3
vite@6.3.3(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0):
vary@1.1.2: {}
vite@6.3.3(@types/node@24.0.10)(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0):
dependencies:
esbuild: 0.25.3
fdir: 6.4.4(picomatch@4.0.2)
@@ -1935,6 +2144,7 @@ snapshots:
rollup: 4.40.0
tinyglobby: 0.2.13
optionalDependencies:
'@types/node': 24.0.10
fsevents: 2.3.3
jiti: 2.4.2
lightningcss: 1.29.2
@@ -1970,4 +2180,8 @@ snapshots:
dependencies:
loose-envify: 1.4.0
ws@8.17.1: {}
xmlhttprequest-ssl@2.1.2: {}
zhead@2.2.4: {}

161
src/components/AudioMessage.vue
View File

@@ -1,53 +1,66 @@
<template>
<div
class="rounded-full p-3 flex items-center gap-3 min-w-60"
class="rounded-xl p-4 flex items-center gap-4 min-w-72 max-w-md cursor-pointer transition-all duration-200 hover:opacity-90"
:class="audioContainerClasses"
@click="togglePlay"
>
<a-button
type="primary"
shape="circle"
size="large"
@click="togglePlay"
class="flex-shrink-0"
:class="{ 'bg-white text-blue-500 hover:bg-gray-100': isSent }"
>
<component :is="isPlaying ? PauseOutlined : CaretRightOutlined" />
</a-button>
<!-- 播放状态指示器 -->
<div class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full" :class="playIconBgClasses">
<component
:is="isPlaying ? PauseOutlined : CaretRightOutlined"
class="text-white"
style="font-size: 16px; transform: translateX(1px)"
/>
</div>
<div class="flex-1">
<!-- 微信风格音波动画 -->
<div class="flex items-center gap-1 h-8 mb-1">
<div class="flex-1 overflow-hidden">
<!-- 高级音波动画 -->
<div class="flex items-end gap-1 h-8 mb-2">
<div
v-for="i in 20"
:key="i"
class="rounded-full transition-all duration-150"
class="rounded-full transition-all duration-300 ease-out"
:class="waveBarClasses"
:style="{
width: '3px',
height: isPlaying ? `${getWaveHeight(i)}px` : '4px',
animationDelay: `${i * 50}ms`
}"
width: '3px',
height: isPlaying ? `${getWaveHeight(i)}px` : '4px',
animationDelay: `${i * 40}ms`
}"
></div>
</div>
<!-- 进度条 -->
<div class="w-full rounded-full h-1" :class="progressTrackClasses">
<div
class="h-1 rounded-full transition-all duration-100"
:class="progressBarClasses"
:style="{ width: `${progress}%` }"
></div>
<!-- 进度条和时间显示 -->
<div class="flex items-center gap-2 w-full">
<!-- 当前时间 -->
<div class="text-xs font-medium flex-shrink-0" :class="timeTextClasses">
{{ formatDuration(currentTime) }}
</div>
<!-- 进度条 -->
<div class="flex-1 rounded-full h-1.5 overflow-hidden" :class="progressTrackClasses">
<div
class="h-full rounded-full transition-all duration-300 ease-out"
:class="progressBarClasses"
:style="{ width: `${progress}%` }"
></div>
</div>
<!-- 剩余时间 -->
<div class="text-xs font-medium flex-shrink-0" :class="timeTextClasses">
-{{ formatDuration(remainingTime) }}
</div>
</div>
</div>
<div class="text-xs flex-shrink-0" :class="durationTextClasses">
{{ formatDuration(message.duration || 0) }}
<!-- 总时长显示 -->
<div class="text-sm font-medium flex-shrink-0 min-w-12 text-right" :class="durationTextClasses">
{{ formatDuration(audioDuration) }}
</div>
</div>
</template>
<script setup>
import { ref, onUnmounted, computed } from 'vue';
import { ref, onUnmounted, computed, watch } from 'vue';
import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
const props = defineProps({
@@ -64,19 +77,57 @@ const props = defineProps({
const isPlaying = ref(false);
const progress = ref(0);
const audio = ref(null);
const audioDuration = ref(0);
const currentTime = ref(0);
const remainingTime = computed(() => Math.max(0, audioDuration.value - currentTime.value));
// 直接获取音频时长
const getAudioDuration = () => {
// 如果消息对象中已经包含时长，直接使用
if (props.message.duration && props.message.duration > 0) {
audioDuration.value = props.message.duration;
return;
}
// 否则创建临时音频获取元数据
const tempAudio = new Audio(props.message.content);
tempAudio.addEventListener('loadedmetadata', () => {
if (tempAudio.duration && tempAudio.duration > 0) {
audioDuration.value = Math.round(tempAudio.duration);
}
});
// 设置超时以防无法获取元数据
setTimeout(() => {
if (audioDuration.value === 0 && tempAudio.duration > 0) {
audioDuration.value = Math.round(tempAudio.duration);
}
}, 500);
};
// 初始化时获取音频时长
getAudioDuration();
// 样式计算属性
const audioContainerClasses = computed(() => {
if (props.isSent) {
return 'bg-white/20 backdrop-blur-sm';
return 'bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-lg';
} else {
return 'bg-gray-100 dark:bg-gray-600';
return 'bg-gray-50 dark:bg-gray-700 border border-gray-100 dark:border-gray-600 shadow';
}
});
const playIconBgClasses = computed(() => {
if (props.isSent) {
return 'bg-white/20';
} else {
return 'bg-blue-500';
}
});
const waveBarClasses = computed(() => {
if (props.isSent) {
return ['bg-white', { 'animate-wave': isPlaying.value }];
return ['bg-white/80', { 'animate-wave': isPlaying.value }];
} else {
return ['bg-blue-500', { 'animate-wave': isPlaying.value }];
}
@@ -86,7 +137,7 @@ const progressTrackClasses = computed(() => {
if (props.isSent) {
return 'bg-white/30';
} else {
return 'bg-gray-300 dark:bg-gray-500';
return 'bg-gray-200 dark:bg-gray-600';
}
});
@@ -100,33 +151,54 @@ const progressBarClasses = computed(() => {
const durationTextClasses = computed(() => {
if (props.isSent) {
return 'text-white/80';
return 'text-white/90';
} else {
return 'text-gray-600 dark:text-gray-300';
return 'text-gray-700 dark:text-gray-300';
}
});
// 生成微信风格的波形高度
const timeTextClasses = computed(() => {
if (props.isSent) {
return 'text-white/80';
} else {
return 'text-gray-600 dark:text-gray-400';
}
});
// 生成高级波形高度
const getWaveHeight = (index) => {
const baseHeight = 4;
const maxHeight = 20;
const wavePattern = Math.sin((index * 0.5) + (Date.now() * 0.01)) * 0.5 + 0.5;
return baseHeight + (maxHeight - baseHeight) * wavePattern;
// 使用更平滑的正弦波叠加
const wavePattern =
Math.sin((index * 0.4) + (Date.now() * 0.008)) * 0.4 +
Math.cos((index * 0.7) + (Date.now() * 0.01)) * 0.3;
const normalized = Math.max(0, wavePattern * 0.5 + 0.5);
return baseHeight + (maxHeight - baseHeight) * normalized;
};
const togglePlay = () => {
if (!audio.value) {
audio.value = new Audio(props.message.content);
// 确保获取音频时长
audio.value.addEventListener('loadedmetadata', () => {
if (audio.value.duration && audio.value.duration > 0) {
audioDuration.value = Math.round(audio.value.duration);
}
});
audio.value.addEventListener('timeupdate', () => {
if (audio.value.duration) {
progress.value = (audio.value.currentTime / audio.value.duration) * 100;
currentTime.value = Math.round(audio.value.currentTime);
progress.value = (currentTime.value / audioDuration.value) * 100;
}
});
audio.value.addEventListener('ended', () => {
isPlaying.value = false;
progress.value = 0;
currentTime.value = 0;
});
}
@@ -155,11 +227,14 @@ onUnmounted(() => {
<style scoped>
@keyframes wave {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(1.5); }
0%, 100% { transform: scaleY(0.7); opacity: 0.7; }
25% { transform: scaleY(1.2); opacity: 1; }
50% { transform: scaleY(0.8); opacity: 0.8; }
75% { transform: scaleY(1.1); opacity: 0.9; }
}
.animate-wave {
animation: wave 1s ease-in-out infinite;
animation: wave 1.2s ease-in-out infinite;
transform-origin: center bottom;
}
</style>
</style>

79
src/components/ChatHeader.vue
View File

@@ -12,13 +12,13 @@
<div class="friend-details">
<h3 class="friend-name">{{ chatStore.currentFriend?.name }}</h3>
<p class="friend-status">
<span
class="status-dot"
:class="isFriendOnline ? 'online' : 'offline'"
></span>
<span
class="status-dot"
:class="isFriendOnline ? 'online' : 'offline'"
></span>
<span class="status-text">
{{ isFriendOnline ? '在线' : '离线' }}
</span>
{{ isFriendOnline ? '在线' : '离线' }}
</span>
</p>
</div>
</div>
@@ -68,16 +68,18 @@
<!-- 视频通话组件 -->
<VideoCallComponent
v-if="showVideoCall"
:caller-info="chatStore.currentFriend"
:caller-info="callerInfo"
:call-type="callType"
:is-incoming="false"
@end-call="endCall"
:is-incoming="isIncoming"
@accept-call="handleAcceptCall"
@reject-call="handleRejectCall"
@end-call="handleEndCall"
/>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { ref, computed, watch } from 'vue';
import { useChatStore } from '@/stores/chat';
import { useThemeStore } from '@/stores/theme';
import VideoCallComponent from './VideoCallComponent.vue';
@@ -89,6 +91,37 @@ const isFriendOnline = ref(true);
const showMoreActions = ref(false);
const showVideoCall = ref(false);
const callType = ref('video');
const isIncoming = ref(false);
const callerInfo = ref(null);
// 监听通话状态变化
watch(() => chatStore.callStatus, (status) => {
if (status === 'calling' || status === 'ringing' || status === 'ongoing') {
showVideoCall.value = true;
} else {
showVideoCall.value = false;
}
});
// 监听来电
watch(() => chatStore.incomingCall, (call) => {
if (call) {
isIncoming.value = true;
callerInfo.value = chatStore.friends.find(f => f.id === call.callerId);
callType.value = call.callType;
} else {
isIncoming.value = false;
}
});
// 监听当前通话
watch(() => chatStore.currentCall, (call) => {
if (call) {
callerInfo.value = chatStore.friends.find(f => f.id === call.peerId);
callType.value = call.callType;
isIncoming.value = false;
}
});
// 点击外部关闭菜单
const handleClickOutside = (e) => {
@@ -106,9 +139,7 @@ const startVoiceCall = () => {
return;
}
callType.value = 'audio';
showVideoCall.value = true;
console.log('开始语音通话:', chatStore.currentFriend.name);
chatStore.startCall(chatStore.currentFriend.id, 'audio');
};
// 开始视频通话
@@ -118,15 +149,22 @@ const startVideoCall = () => {
return;
}
callType.value = 'video';
showVideoCall.value = true;
console.log('开始视频通话:', chatStore.currentFriend.name);
chatStore.startCall(chatStore.currentFriend.id, 'video');
};
// 接听来电
const handleAcceptCall = () => {
chatStore.acceptCall();
};
// 拒绝来电
const handleRejectCall = () => {
chatStore.rejectCall();
};
// 结束通话
const endCall = () => {
showVideoCall.value = false;
console.log('通话结束');
const handleEndCall = () => {
chatStore.endCall();
};
// 清空聊天记录
@@ -146,6 +184,7 @@ const viewFriendProfile = () => {
</script>
<style scoped>
/* 保持原有样式不变 */
.chat-header {
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
@@ -389,4 +428,4 @@ const viewFriendProfile = () => {
gap: 8px;
}
}
</style>
</style>

261
src/components/VideoCallComponent.vue
View File

@@ -4,10 +4,10 @@
ref="container"
class="video-call-container"
:class="{
'minimized': isMinimized,
'dark': themeStore.isDarkMode,
'dragging': isDragging
}"
'minimized': isMinimized,
'dark': themeStore.isDarkMode,
'dragging': isDragging
}"
:style="containerStyle"
>
<!-- 拖拽头部 -->
@@ -55,6 +55,7 @@
<div class="remote-video-preview">
<video
v-if="callType === 'video' && hasRemoteVideo"
ref="remoteVideoPreview"
class="remote-video"
autoplay
playsinline
@@ -117,50 +118,66 @@
<!-- 控制栏 -->
<div v-if="!isMinimized" class="call-controls">
<button
class="control-btn"
:class="{ 'active': isMicOn, 'disabled': !isMicOn }"
@click="toggleMic"
:title="isMicOn ? '关闭麦克风' : '开启麦克风'"
>
<i class="fas" :class="isMicOn ? 'fa-microphone' : 'fa-microphone-slash'"></i>
</button>
<!-- 来电控制按钮 -->
<div v-if="isIncoming && !isOngoing" class="incoming-call-controls">
<button class="accept-btn" @click="acceptCall">
<i class="fas fa-phone"></i> 接听
</button>
<button class="reject-btn" @click="rejectCall">
<i class="fas fa-phone-slash"></i> 拒绝
</button>
</div>
<button
v-if="callType === 'video'"
class="control-btn"
:class="{ 'active': isCameraOn, 'disabled': !isCameraOn }"
@click="toggleCamera"
:title="isCameraOn ? '关闭摄像头' : '开启摄像头'"
>
<i class="fas" :class="isCameraOn ? 'fa-video' : 'fa-video-slash'"></i>
</button>
<template v-else>
<button
class="control-btn"
:class="{ 'active': isMicOn, 'disabled': !isMicOn }"
@click="toggleMic"
:title="isMicOn ? '关闭麦克风' : '开启麦克风'"
>
<i class="fas" :class="isMicOn ? 'fa-microphone' : 'fa-microphone-slash'"></i>
</button>
<button
class="control-btn speaker-btn"
:class="{ 'active': isSpeakerOn }"
@click="toggleSpeaker"
:title="isSpeakerOn ? '关闭扬声器' : '开启扬声器'"
>
<i class="fas" :class="isSpeakerOn ? 'fa-volume-up' : 'fa-volume-mute'"></i>
</button>
<button
v-if="callType === 'video'"
class="control-btn"
:class="{ 'active': isCameraOn, 'disabled': !isCameraOn }"
@click="toggleCamera"
:title="isCameraOn ? '关闭摄像头' : '开启摄像头'"
>
<i class="fas" :class="isCameraOn ? 'fa-video' : 'fa-video-slash'"></i>
</button>
<button
class="control-btn end-call-btn"
@click="endCall"
title="结束通话"
>
<i class="fas fa-phone-slash"></i>
</button>
<button
class="control-btn speaker-btn"
:class="{ 'active': isSpeakerOn }"
@click="toggleSpeaker"
:title="isSpeakerOn ? '关闭扬声器' : '开启扬声器'"
>
<i class="fas" :class="isSpeakerOn ? 'fa-volume-up' : 'fa-volume-mute'"></i>
</button>
<button
class="control-btn end-call-btn"
@click="endCall"
title="结束通话"
>
<i class="fas fa-phone-slash"></i>
</button>
</template>
</div>
</div>
</template>
<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue';
import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue';
import { useThemeStore } from '@/stores/theme';
import { useWebRTC } from '@/composables/useWebRTC';
import { useChatStore } from '@/stores/chat';
const themeStore = useThemeStore();
const chatStore = useChatStore();
const webrtc = useWebRTC();
const props = defineProps({
callerInfo: {
@@ -194,12 +211,18 @@ const callTimer = ref(null);
const isCameraWorking = ref(true);
const isMicWorking = ref(true);
const isDragging = ref(false);
const isOngoing = ref(false);
// 拖拽相关状态
const position = reactive({ x: 0, y: 0 });
const startPosition = reactive({ x: 0, y: 0 });
const container = ref(null);
// 元素引用
const localVideo = ref(null);
const remoteVideo = ref(null);
const remoteVideoPreview = ref(null);
// 通话计时器
const startCallTimer = () => {
if (callTimer.value) clearInterval(callTimer.value);
@@ -227,7 +250,7 @@ const containerStyle = computed(() => {
// 通话状态
const callStatus = computed(() => {
if (props.isIncoming) {
if (props.isIncoming && !isOngoing.value) {
return '来电中...';
}
return '通话中';
@@ -241,16 +264,11 @@ const initializeMedia = async () => {
video: props.callType === 'video'
};
// 模拟媒体访问
setTimeout(() => {
if (props.callType === 'video') {
hasLocalVideo.value = true;
hasRemoteVideo.value = true;
}
connectionText.value = '已连接';
startCallTimer();
}, 1500);
// 获取本地媒体流
await webrtc.getLocalMedia(constraints);
connectionText.value = '已连接';
startCallTimer();
} catch (error) {
console.error('无法访问媒体设备:', error);
isCameraOn.value = false;
@@ -263,18 +281,30 @@ const initializeMedia = async () => {
const toggleMic = () => {
isMicOn.value = !isMicOn.value;
isMicWorking.value = isMicOn.value;
if (webrtc.localStream.value) {
webrtc.localStream.value.getAudioTracks().forEach(track => {
track.enabled = isMicOn.value;
});
}
};
const toggleCamera = () => {
if (props.callType === 'video') {
isCameraOn.value = !isCameraOn.value;
hasLocalVideo.value = isCameraOn.value;
isCameraWorking.value = isCameraOn.value;
if (webrtc.localStream.value) {
webrtc.localStream.value.getVideoTracks().forEach(track => {
track.enabled = isCameraOn.value;
});
}
}
};
const toggleSpeaker = () => {
isSpeakerOn.value = !isSpeakerOn.value;
if (remoteVideo.value) {
remoteVideo.value.muted = !isSpeakerOn.value;
}
};
const toggleMinimize = () => {
@@ -293,11 +323,32 @@ const toggleMinimize = () => {
const endCall = () => {
if (callTimer.value) clearInterval(callTimer.value);
// 清除所有视频源
if (localVideo.value) localVideo.value.srcObject = null;
if (remoteVideo.value) remoteVideo.value.srcObject = null;
if (remoteVideoPreview.value) remoteVideoPreview.value.srcObject = null;
isVisible.value = false;
emit('end-call');
chatStore.endCall();
};
// 拖拽功能 - 完全重写以解决偏移问题
// 接听通话
const acceptCall = () => {
isOngoing.value = true;
initializeMedia();
emit('accept-call');
};
// 拒绝通话
const rejectCall = () => {
isVisible.value = false;
emit('reject-call');
chatStore.rejectCall();
};
// 拖拽功能
const startDrag = (event) => {
if (event.target.closest('.action-btn') || event.target.closest('.control-btn')) {
return;
@@ -351,14 +402,58 @@ const handleWindowResize = () => {
position.y = Math.max(0, Math.min(position.y, window.innerHeight - height));
};
onMounted(() => {
initializeMedia();
// 监听本地流变化
watch(() => webrtc.localStream.value, (newStream) => {
if (newStream && localVideo.value) {
localVideo.value.srcObject = newStream;
hasLocalVideo.value = true;
} else if (localVideo.value) {
localVideo.value.srcObject = null;
hasLocalVideo.value = false;
}
});
// 监听远程流变化
watch(() => webrtc.remoteStream.value, (newStream) => {
if (newStream) {
if (remoteVideo.value) {
remoteVideo.value.srcObject = newStream;
}
if (remoteVideoPreview.value) {
remoteVideoPreview.value.srcObject = newStream;
}
hasRemoteVideo.value = true;
} else {
if (remoteVideo.value) {
remoteVideo.value.srcObject = null;
}
if (remoteVideoPreview.value) {
remoteVideoPreview.value.srcObject = null;
}
hasRemoteVideo.value = false;
}
});
// 监听通话状态
watch(() => chatStore.callStatus, (status) => {
if (status === 'ongoing') {
isOngoing.value = true;
} else if (status === 'ended') {
endCall();
}
});
onMounted(() => {
// 设置初始居中位置
position.x = Math.max(0, (window.innerWidth - 500) / 2);
position.y = Math.max(0, (window.innerHeight - 380) / 2);
window.addEventListener('resize', handleWindowResize);
// 如果是呼出方或已接听，初始化媒体
if (!props.isIncoming || isOngoing.value) {
initializeMedia();
}
});
onUnmounted(() => {
@@ -366,10 +461,24 @@ onUnmounted(() => {
document.removeEventListener('mousemove', handleDrag);
document.removeEventListener('mouseup', stopDrag);
window.removeEventListener('resize', handleWindowResize);
// 清除所有视频源
if (localVideo.value) {
localVideo.value.srcObject = null;
}
if (remoteVideo.value) {
remoteVideo.value.srcObject = null;
}
if (remoteVideoPreview.value) {
remoteVideoPreview.value.srcObject = null;
}
webrtc.closeConnection();
});
</script>
<style scoped>
/* 保持原有样式不变 */
.video-call-container {
position: fixed;
z-index: 9999;
@@ -570,6 +679,12 @@ onUnmounted(() => {
position: relative;
}
.remote-video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-placeholder {
width: 100%;
height: 100%;
@@ -690,6 +805,50 @@ onUnmounted(() => {
background: #ff5252;
}
/* 新增来电控制按钮样式 */
.incoming-call-controls {
position: absolute;
bottom: 100px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 40px;
z-index: 100;
}
.accept-btn {
width: 80px;
height: 80px;
border-radius: 50%;
background: #4CAF50;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
border: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.reject-btn {
width: 80px;
height: 80px;
border-radius: 50%;
background: #F44336;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
border: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* 响应式设计 */
@media (max-width: 600px) {
.video-call-container:not(.minimized) {

1
src/composables/useRecording.js
View File

@@ -28,6 +28,7 @@ export function useRecording() {
const audioUrl = URL.createObjectURL(audioBlob)
const duration = Math.floor((Date.now() - recordingStartTime.value) / 1000)
console.log(' aaa', 'ssssssssssssssss')
// 触发音频消息发送事件
const event = new CustomEvent("audioRecorded", {
detail: {

52
src/composables/useWebRTC.js
View File

@@ -8,7 +8,10 @@ export function useWebRTC() {
const isConnecting = ref(false)
const configuration = {
iceServers: [{ urls: "stun:stun.l.google.com:19302" }, { urls: "stun:stun1.l.google.com:19302" }],
iceServers: [
{ urls: "stun:stun.l.google.com:19302" },
{ urls: "stun:stun1.l.google.com:19302" }
]
}
const createPeerConnection = () => {
@@ -16,14 +19,15 @@ export function useWebRTC() {
peerConnection.value.onicecandidate = (event) => {
if (event.candidate) {
// 发送ICE候选到对端
console.log("ICE候选:", event.candidate)
}
}
peerConnection.value.ontrack = (event) => {
remoteStream.value = event.streams[0]
console.log("接收到远程流:", event.streams[0])
if (event.streams && event.streams[0]) {
remoteStream.value = event.streams[0]
console.log("接收到远程流:", remoteStream.value)
}
}
peerConnection.value.onconnectionstatechange = () => {
@@ -64,7 +68,11 @@ export function useWebRTC() {
})
}
const offer = await peerConnection.value.createOffer()
const offer = await peerConnection.value.createOffer({
offerToReceiveAudio: true,
offerToReceiveVideo: true
})
await peerConnection.value.setLocalDescription(offer)
return offer
@@ -82,7 +90,7 @@ export function useWebRTC() {
})
}
await peerConnection.value.setRemoteDescription(offer)
await peerConnection.value.setRemoteDescription(new RTCSessionDescription(offer))
const answer = await peerConnection.value.createAnswer()
await peerConnection.value.setLocalDescription(answer)
@@ -90,29 +98,41 @@ export function useWebRTC() {
}
const setRemoteAnswer = async (answer) => {
await peerConnection.value.setRemoteDescription(answer)
await peerConnection.value.setRemoteDescription(new RTCSessionDescription(answer))
}
const addIceCandidate = async (candidate) => {
if (peerConnection.value && peerConnection.value.remoteDescription) {
await peerConnection.value.addIceCandidate(candidate)
try {
await peerConnection.value.addIceCandidate(new RTCIceCandidate(candidate))
} catch (error) {
console.error("添加ICE候选失败:", error)
}
}
}
const closeConnection = () => {
if (localStream.value) {
localStream.value.getTracks().forEach((track) => track.stop())
localStream.value = null
localStream.value.getTracks().forEach((track) => {
track.stop();
if (localStream.value) {
localStream.value.removeTrack(track);
}
});
localStream.value = null;
}
if (peerConnection.value) {
peerConnection.value.close()
peerConnection.value = null
peerConnection.value.onicecandidate = null;
peerConnection.value.ontrack = null;
peerConnection.value.onconnectionstatechange = null;
peerConnection.value.close();
peerConnection.value = null;
}
remoteStream.value = null
isConnected.value = false
isConnecting.value = false
remoteStream.value = null;
isConnected.value = false;
isConnecting.value = false;
}
return {
@@ -129,4 +149,4 @@ export function useWebRTC() {
addIceCandidate,
closeConnection,
}
}
}

102
src/composables/useWebSocket.js
View File

@@ -25,7 +25,7 @@ export function useWebSocket() {
socket.value.onopen = handleOpen
socket.value.onmessage = handleMessage
socket.value.onclose = disconnectWebSocket
socket.value.onclose = handleClose
socket.value.onerror = handleError
} catch (error) {
console.error("WebSocket连接失败:", error)
@@ -42,24 +42,17 @@ export function useWebSocket() {
reconnectDelay.value = 1000
chatStore.connectionStatus = "connected"
chatStore.socket = socket.value
// 绑定当前用户
if (userStore.currentUser?.id) {
bindUser(userStore.currentUser.id)
}
}
const handleMessage = (event) => {
try {
const data = JSON.parse(event.data)
console.log("收到消息:", data)
// 处理客户端ID
if (data?.clientId) {
// console.log("收到客户端ID:", data.clientId)
// userStore.setClientId(data.clientId)
//
// // 绑定用户
// if (userStore.currentUser?.id) {
bindUser(userStore.currentUser.id)
// }
return
}
console.log("收到WebSocket消息:", data)
// 处理通话信令
if (data.call_id && data.call_status) {
@@ -76,7 +69,7 @@ export function useWebSocket() {
}
}
const disconnectWebSocket = (event) => {
const handleClose = (event) => {
console.log("WebSocket连接已关闭:", event.code, event.reason)
isConnected.value = false
isConnecting.value = false
@@ -89,7 +82,7 @@ export function useWebSocket() {
reconnectAttempts.value++
reconnectDelay.value = Math.min(reconnectDelay.value * 2, 30000)
console.log(`尝试重连 (${reconnectAttempts.value}/${maxReconnectAttempts})`)
connect()
connectWebSocket()
}, reconnectDelay.value)
}
}
@@ -102,40 +95,15 @@ export function useWebSocket() {
const handleCallSignal = (data) => {
console.log("收到通话信令:", data)
// 根据通话状态处理
switch (data.call_status) {
case "invite":
// 显示来电通知
showIncomingCallDialog(data)
break
case "accepted":
// 通话被接受
handleCallAccepted(data)
break
case "rejected":
// 通话被拒绝
handleCallRejected(data)
break
case "ended":
// 通话结束
handleCallEnded(data)
break
case "candidate":
// ICE候选
handleIceCandidate(data)
break
}
chatStore.handleCallSignal(data)
}
const bindUser = (userId) => {
console.log(userId, 'ssssssssss')
if (!isConnected.value || !userId) return
const bindMessage = {
request_type: "bind",
sender_user_id: userId,
client_id: userStore.clientId,
}
send(bindMessage)
@@ -149,6 +117,7 @@ export function useWebSocket() {
try {
socket.value.send(JSON.stringify(message))
console.log("发送消息:", message)
return true
} catch (error) {
console.error("发送消息失败:", error)
@@ -169,7 +138,11 @@ export function useWebSocket() {
}
const sendCallSignal = (signal) => {
return send(signal)
return send({
request_type: "call_signal",
...signal,
sender_user_id: userStore.currentUser?.id
})
}
const disconnect = () => {
@@ -193,7 +166,7 @@ export function useWebSocket() {
})
onUnmounted(() => {
disconnectWebSocket()
disconnect()
})
return {
@@ -201,48 +174,11 @@ export function useWebSocket() {
isConnected,
isConnecting,
connectWebSocket,
disconnectWebSocket,
disconnect,
send,
sendMessage,
sendCallSignal,
bindUser,
generateCallId,
}
}
// 全局通话处理函数
const incomingCallDialog = null
const currentCall = null
function showIncomingCallDialog(callData) {
// 这里应该显示来电弹窗
console.log("显示来电弹窗:", callData)
// 创建来电通知
if ("Notification" in window && Notification.permission === "granted") {
new Notification(`${callData.sender_user_id} 邀请您进行${callData.message_type === 6 ? "视频" : "语音"}通话`, {
icon: "/favicon.ico",
tag: "incoming-call",
})
}
}
function handleCallAccepted(data) {
console.log("通话被接受:", data)
// 开始WebRTC连接
}
function handleCallRejected(data) {
console.log("通话被拒绝:", data)
// 显示拒绝消息
}
function handleCallEnded(data) {
console.log("通话结束:", data)
// 清理通话状态
}
function handleIceCandidate(data) {
console.log("收到ICE候选:", data)
// 处理ICE候选
}
}

235
src/stores/chat.js
View File

@@ -1,6 +1,9 @@
import { defineStore } from "pinia"
import { ref, computed } from "vue"
import { chatDB } from "@/utils/db"
import { useWebRTC } from "@/composables/useWebRTC"
import { useUserStore } from "@/stores/user"
import { sendMessage } from "@/utils/request.js"
export const useChatStore = defineStore("chat", () => {
const friends = ref([])
@@ -9,34 +12,20 @@ export const useChatStore = defineStore("chat", () => {
const connectionStatus = ref("disconnected")
const socket = ref(null)
// 通话相关状态
const currentCall = ref(null)
const incomingCall = ref(null)
const callStatus = ref("idle") // idle, calling, ringing, ongoing, ended
const webrtc = useWebRTC()
const userStore = useUserStore()
// 计算属性
const isConnected = computed(() => connectionStatus.value === "connected")
const connectionStatusText = computed(() => {
switch (connectionStatus.value) {
case "connected":
return "已连接"
case "connecting":
return "连接中..."
case "disconnected":
return "已断开"
default:
return "未知状态"
}
})
const connectionStatusIcon = computed(() => {
switch (connectionStatus.value) {
case "connected":
return "wifi"
case "connecting":
return "loading"
case "disconnected":
return "disconnect"
default:
return "question"
}
})
const isInCall = computed(() => callStatus.value !== "idle")
const isCalling = computed(() => callStatus.value === "calling")
const isRinging = computed(() => callStatus.value === "ringing")
const isOngoingCall = computed(() => callStatus.value === "ongoing")
// 初始化数据库
const initDB = async () => {
@@ -84,7 +73,7 @@ export const useChatStore = defineStore("chat", () => {
}
}
// 设置当前好友 - 新增方法
// 设置当前好友
const setCurrentFriend = (friend) => {
currentFriend.value = friend
// 清除未读消息计数
@@ -146,6 +135,12 @@ export const useChatStore = defineStore("chat", () => {
if (receiverId !== currentUserId) return
// 如果是通话信令，直接处理
if (messageData.call_id || messageData.call_status) {
handleCallSignal(messageData)
return
}
const newMessage = {
type: getMessageType(messageData.message_type),
content: messageData.content,
@@ -188,24 +183,202 @@ export const useChatStore = defineStore("chat", () => {
// 根据消息类型编号获取类型字符串
const getMessageType = (type) => {
const types = ["text", "image", "audio", "video", "prescription", "medical-record", "video-call"]
const types = ["text", "image", "audio", "video", "prescription", "medical-record", "video-call", "audio-call", "file"]
return types[type] || "text"
}
// 处理通话信令
const handleCallSignal = (data) => {
console.log("处理通话信令:", data)
// 根据通话状态处理
switch (data.call_status) {
case "invite":
handleIncomingCall(data)
break
case "accepted":
handleCallAccepted(data)
break
case "rejected":
handleCallRejected(data)
break
case "ended":
handleCallEnded(data)
break
case "candidate":
handleIceCandidate(data)
break
}
}
// 处理来电
const handleIncomingCall = (data) => {
incomingCall.value = {
callId: data.call_id,
callerId: data.sender_user_id,
callType: data.message_type === 6 ? "video" : "audio",
content: data.content
}
callStatus.value = "ringing"
console.log("收到来电:", incomingCall.value)
}
// 处理通话接受
const handleCallAccepted = (data) => {
if (currentCall.value && currentCall.value.callId === data.call_id) {
callStatus.value = "ongoing"
console.log("通话已被接受")
}
}
// 处理通话拒绝
const handleCallRejected = (data) => {
if (currentCall.value && currentCall.value.callId === data.call_id) {
callStatus.value = "ended"
currentCall.value = null
console.log("通话已被拒绝")
}
}
// 处理通话结束
const handleCallEnded = (data) => {
if ((currentCall.value && currentCall.value.callId === data.call_id) ||
(incomingCall.value && incomingCall.value.callId === data.call_id)) {
callStatus.value = "ended"
currentCall.value = null
incomingCall.value = null
console.log("通话已结束")
}
}
// 处理ICE候选
const handleIceCandidate = (data) => {
if (currentCall.value && currentCall.value.callId === data.call_id) {
console.log("收到ICE候选:", data.content)
// 这里可以添加WebRTC处理逻辑
}
}
// 发起通话
const startCall = (peerId, type) => {
if (isInCall.value) return
const callId = Date.now().toString() + Math.random().toString(36).substr(2, 9)
currentCall.value = {
callId: callId,
peerId: peerId,
callType: type
}
callStatus.value = "calling"
// 发送通话邀请
sendMessage({
sender_user_id: userStore.currentUser?.id,
receiver_user_id: peerId,
message_type: type === "video" ? 6 : 7, // 6=视频,7=语音
message_content: "", // 对于邀请，内容为空
call_id: callId,
call_status: "invite"
})
console.log("发起通话:", currentCall.value)
}
// 接听来电
const acceptCall = () => {
if (!incomingCall.value) return
// 发送接受响应
sendMessage({
sender_user_id: userStore.currentUser?.id,
receiver_user_id: incomingCall.value.callerId,
message_type: incomingCall.value.callType === "video" ? 6 : 7,
message_content: "", // 对于接受，内容为空
call_id: incomingCall.value.callId,
call_status: "accepted"
})
currentCall.value = {
callId: incomingCall.value.callId,
peerId: incomingCall.value.callerId,
callType: incomingCall.value.callType
}
callStatus.value = "ongoing"
incomingCall.value = null
console.log("接听通话")
}
// 拒绝来电
const rejectCall = () => {
if (!incomingCall.value) return
// 发送拒绝响应
sendMessage({
sender_user_id: userStore.currentUser?.id,
receiver_user_id: incomingCall.value.callerId,
message_type: incomingCall.value.callType === "video" ? 6 : 7,
message_content: "", // 对于拒绝，内容为空
call_id: incomingCall.value.callId,
call_status: "rejected"
})
callStatus.value = "idle"
incomingCall.value = null
console.log("拒绝通话")
}
// 结束通话
const endCall = () => {
const callId = currentCall.value?.callId || incomingCall.value?.callId
const peerId = currentCall.value?.peerId || incomingCall.value?.callerId
const callType = currentCall.value?.callType || incomingCall.value?.callType
if (!callId || !peerId) return
// 发送结束通知
sendMessage({
sender_user_id: userStore.currentUser?.id,
receiver_user_id: peerId,
message_type: callType === "video" ? 6 : 7,
message_content: "",
call_id: callId,
call_status: "ended"
})
callStatus.value = "idle"
currentCall.value = null
incomingCall.value = null
console.log("结束通话")
}
return {
friends,
currentFriend,
messages,
connectionStatus,
socket,
currentCall,
incomingCall,
callStatus,
isConnected,
connectionStatusText,
connectionStatusIcon,
isInCall,
isCalling,
isRinging,
isOngoingCall,
initDB,
loadFriends,
setCurrentFriend,
switchFriend,
addMessage,
handleIncomingMessage,
handleCallSignal,
startCall,
acceptCall,
rejectCall,
endCall
}
})
})

5
src/stores/user.js
View File

@@ -37,6 +37,10 @@ export const useUserStore = defineStore("user", () => {
}
}
const setClientId = (clientId) => {
currentUser.value.clientId = clientId
}
return {
currentUser,
isLoggedIn,
@@ -44,5 +48,6 @@ export const useUserStore = defineStore("user", () => {
login,
logout,
checkSession,
setClientId,
}
})