feat(staffchat): 入口改造(StaffList/CustomerList微信行切新页)+useStaffProfile缓存+StatsPane固定列/金额格式+vitest依赖化

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
浅念
2026-08-25 19:56:22 +08:00
parent 4c3bc3ee93
commit 50635d0df8
9 changed files with 489 additions and 46 deletions
+376 -1
View File
@@ -21,6 +21,7 @@
"@vue/tsconfig": "^0.9.1",
"typescript": "~6.0.2",
"vite": "^8.2.0",
"vitest": "^4.1.11",
"vue-tsc": "^3.3.8"
}
},
@@ -434,6 +435,13 @@
"dev": true,
"license": "MIT"
},
"node_modules/@standard-schema/spec": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
"integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
"dev": true,
"license": "MIT"
},
"node_modules/@tybys/wasm-util": {
"version": "0.10.3",
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
@@ -445,6 +453,31 @@
"tslib": "^2.4.0"
}
},
"node_modules/@types/chai": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
"integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/deep-eql": "*",
"assertion-error": "^2.0.1"
}
},
"node_modules/@types/deep-eql": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
"integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/estree": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
"integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/lodash": {
"version": "4.17.25",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.25.tgz",
@@ -495,6 +528,129 @@
"vue": "^3.2.25"
}
},
"node_modules/@vitest/expect": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.11.tgz",
"integrity": "sha512-VX2x5vNJXET47KAFzwERI+KRMtTTCSWTfSMKsW7JsUsXV4psq++e3DvZpuTDOpHcxytiDs6p2nhVb2tVDiiUYw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@standard-schema/spec": "^1.1.0",
"@types/chai": "^5.2.2",
"@vitest/spy": "4.1.11",
"@vitest/utils": "4.1.11",
"chai": "^6.2.2",
"tinyrainbow": "^3.1.0"
},
"funding": {
"url": "https://opencollective.com/vitest"
}
},
"node_modules/@vitest/mocker": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.11.tgz",
"integrity": "sha512-2XJVD55d1o5AZous5CCGKS74g/riOj9odEt2bQpCVZeblHyHdnMeFl4jl0XjU21stf4mbjUkew2eXQZt65g5CQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vitest/spy": "4.1.11",
"estree-walker": "^3.0.3",
"magic-string": "^0.30.21"
},
"funding": {
"url": "https://opencollective.com/vitest"
},
"peerDependencies": {
"msw": "^2.4.9",
"vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
},
"peerDependenciesMeta": {
"msw": {
"optional": true
},
"vite": {
"optional": true
}
}
},
"node_modules/@vitest/mocker/node_modules/estree-walker": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/estree": "^1.0.0"
}
},
"node_modules/@vitest/pretty-format": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.11.tgz",
"integrity": "sha512-yiZzPbGTS9Sr/JpFl8zHrcIkAofNbFV6k21vIgQN/cY/oxZeXhJv5sc/MBJ5jFKWmWs+oJHw0UXLZjmf931+Vw==",
"dev": true,
"license": "MIT",
"dependencies": {
"tinyrainbow": "^3.1.0"
},
"funding": {
"url": "https://opencollective.com/vitest"
}
},
"node_modules/@vitest/runner": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.11.tgz",
"integrity": "sha512-LztvUgdwMNJMIkj3hQnnxiC2Xy1zNxq928W/xhjCLaNCzqTZOudjwbQf6v9IntZGPw132i2Lq2rgTRZHD3JHNw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vitest/utils": "4.1.11",
"pathe": "^2.0.3"
},
"funding": {
"url": "https://opencollective.com/vitest"
}
},
"node_modules/@vitest/snapshot": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.11.tgz",
"integrity": "sha512-pN7ikn1ON7h8ee4gIAp4AzyK+zBtJPzVbqOgu5LCEh4VaJVbPQcgYQYJIMGQPXVeJJq1fnfazis7a5pFNPahog==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vitest/pretty-format": "4.1.11",
"@vitest/utils": "4.1.11",
"magic-string": "^0.30.21",
"pathe": "^2.0.3"
},
"funding": {
"url": "https://opencollective.com/vitest"
}
},
"node_modules/@vitest/spy": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.11.tgz",
"integrity": "sha512-apNa/prQy2qCeywhnixOHPRCgGNhvg7T4Dapfl1GahLp/R+uhBm5cPyFoNVyqsNd2h1nJxL6BqqdIjiABL60YA==",
"dev": true,
"license": "MIT",
"funding": {
"url": "https://opencollective.com/vitest"
}
},
"node_modules/@vitest/utils": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.11.tgz",
"integrity": "sha512-zTCVGpyFsGWBhllOyKlTw/vnr6D9qxsfSDyfbyZmTyjHw5N/VuvzHpHoQjm2ZJzn4RJgx5w4r7V0er69CmLgPQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vitest/pretty-format": "4.1.11",
"convert-source-map": "^2.0.0",
"tinyrainbow": "^3.1.0"
},
"funding": {
"url": "https://opencollective.com/vitest"
}
},
"node_modules/@volar/language-core": {
"version": "2.4.28",
"resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.28.tgz",
@@ -742,6 +898,16 @@
"dev": true,
"license": "MIT"
},
"node_modules/assertion-error": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
"integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
}
},
"node_modules/async-validator": {
"version": "4.2.5",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
@@ -788,6 +954,16 @@
"node": ">= 0.4"
}
},
"node_modules/chai": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
"integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=18"
}
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -800,6 +976,13 @@
"node": ">= 0.8"
}
},
"node_modules/convert-source-map": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
"dev": true,
"license": "MIT"
},
"node_modules/csstype": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -918,6 +1101,13 @@
"node": ">= 0.4"
}
},
"node_modules/es-module-lexer": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.2.tgz",
"integrity": "sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==",
"dev": true,
"license": "MIT"
},
"node_modules/es-object-atoms": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
@@ -951,6 +1141,16 @@
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
"license": "MIT"
},
"node_modules/expect-type": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
"integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
"dev": true,
"license": "Apache-2.0",
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/fdir": {
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -1510,6 +1710,20 @@
"integrity": "sha512-FGqEfhQjrvo1lL8KFifdTQiNwwQHJxC1jtYE1Rc54qF/jxONUNL+kC9gS1krX8Q65PgrQ5fCqH/I4NhWBvdSqg==",
"license": "MIT"
},
"node_modules/obug": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/obug/-/obug-2.1.4.tgz",
"integrity": "sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==",
"dev": true,
"funding": [
"https://github.com/sponsors/sxzz",
"https://opencollective.com/debug"
],
"license": "MIT",
"engines": {
"node": ">=12.20.0"
}
},
"node_modules/path-browserify": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -1517,6 +1731,13 @@
"dev": true,
"license": "MIT"
},
"node_modules/pathe": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
"integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
"dev": true,
"license": "MIT"
},
"node_modules/perfect-debounce": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.1.0.tgz",
@@ -1535,7 +1756,6 @@
"integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
"dev": true,
"license": "MIT",
"peer": true,
"engines": {
"node": ">=12"
},
@@ -1639,6 +1859,13 @@
"@rolldown/binding-win32-x64-msvc": "1.2.1"
}
},
"node_modules/siginfo": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
"integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
"dev": true,
"license": "ISC"
},
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1648,6 +1875,37 @@
"node": ">=0.10.0"
}
},
"node_modules/stackback": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
"integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
"dev": true,
"license": "MIT"
},
"node_modules/std-env": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/std-env/-/std-env-4.2.0.tgz",
"integrity": "sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==",
"dev": true,
"license": "MIT"
},
"node_modules/tinybench": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
"integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
"dev": true,
"license": "MIT"
},
"node_modules/tinyexec": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.3.0.tgz",
"integrity": "sha512-QKAl9m8gWWGHV8jZcPeym6j+XULi6tOf1mT83WYJ4Lk2ytW/uwAWkrP0uFsdoYMdueVJ0qs26wZ+23xeB4ibNQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=18"
}
},
"node_modules/tinyglobby": {
"version": "0.2.17",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -1665,6 +1923,16 @@
"url": "https://github.com/sponsors/SuperchupuDev"
}
},
"node_modules/tinyrainbow": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.1.tgz",
"integrity": "sha512-yau8yJdTt989Mm0Bd/236QnzEiPf2xLLTqUZRUJOo/3CB078LSwzei343DgtJVmfJKJE3TMINY1u42SQsP6mXw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/tslib": {
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -1774,6 +2042,96 @@
}
}
},
"node_modules/vitest": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.11.tgz",
"integrity": "sha512-fhACrNXUidIbGSBr5FlbuBkO7VWC1ZyLl0DO4CU2DrQoAPxX84Ysxs+HeGQpii5lZWV1Q4gBZTTu49mF+A6Edw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vitest/expect": "4.1.11",
"@vitest/mocker": "4.1.11",
"@vitest/pretty-format": "4.1.11",
"@vitest/runner": "4.1.11",
"@vitest/snapshot": "4.1.11",
"@vitest/spy": "4.1.11",
"@vitest/utils": "4.1.11",
"es-module-lexer": "^2.0.0",
"expect-type": "^1.3.0",
"magic-string": "^0.30.21",
"obug": "^2.1.1",
"pathe": "^2.0.3",
"picomatch": "^4.0.3",
"std-env": "^4.0.0-rc.1",
"tinybench": "^2.9.0",
"tinyexec": "^1.0.2",
"tinyglobby": "^0.2.15",
"tinyrainbow": "^3.1.0",
"vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
"why-is-node-running": "^2.3.0"
},
"bin": {
"vitest": "vitest.mjs"
},
"engines": {
"node": "^20.0.0 || ^22.0.0 || >=24.0.0"
},
"funding": {
"url": "https://opencollective.com/vitest"
},
"peerDependencies": {
"@edge-runtime/vm": "*",
"@opentelemetry/api": "^1.9.0",
"@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
"@vitest/browser-playwright": "4.1.11",
"@vitest/browser-preview": "4.1.11",
"@vitest/browser-webdriverio": "4.1.11",
"@vitest/coverage-istanbul": "4.1.11",
"@vitest/coverage-v8": "4.1.11",
"@vitest/ui": "4.1.11",
"happy-dom": "*",
"jsdom": "*",
"vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
},
"peerDependenciesMeta": {
"@edge-runtime/vm": {
"optional": true
},
"@opentelemetry/api": {
"optional": true
},
"@types/node": {
"optional": true
},
"@vitest/browser-playwright": {
"optional": true
},
"@vitest/browser-preview": {
"optional": true
},
"@vitest/browser-webdriverio": {
"optional": true
},
"@vitest/coverage-istanbul": {
"optional": true
},
"@vitest/coverage-v8": {
"optional": true
},
"@vitest/ui": {
"optional": true
},
"happy-dom": {
"optional": true
},
"jsdom": {
"optional": true
},
"vite": {
"optional": false
}
}
},
"node_modules/vscode-uri": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
@@ -1846,6 +2204,23 @@
"peerDependencies": {
"typescript": ">=5.0.0"
}
},
"node_modules/why-is-node-running": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
"integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
"dev": true,
"license": "MIT",
"dependencies": {
"siginfo": "^2.0.0",
"stackback": "0.0.2"
},
"bin": {
"why-is-node-running": "cli.js"
},
"engines": {
"node": ">=8"
}
}
}
}
+3 -1
View File
@@ -6,7 +6,8 @@
"scripts": {
"dev": "vite",
"build": "vue-tsc -b && vite build",
"preview": "vite preview"
"preview": "vite preview",
"test": "vitest run"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.2",
@@ -22,6 +23,7 @@
"@vue/tsconfig": "^0.9.1",
"typescript": "~6.0.2",
"vite": "^8.2.0",
"vitest": "^4.1.11",
"vue-tsc": "^3.3.8"
}
}
+15 -18
View File
@@ -4,11 +4,12 @@
根元素必须保持单 div——父组件 StaffChat 靠 attrs fallthrough 挂
sc-root__pane 列宽。 -->
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { computed, ref, toRef, watch } from 'vue'
import { useRouter } from 'vue-router'
import { getAccounts, getStaffStatsCounts, getStaffStatsDetail } from '@/api'
import { getStaffStatsCounts, getStaffStatsDetail } from '@/api'
import type { StaffStatsKind } from '@/api'
import type { Account, StaffStatsCounts } from '@/api/types'
import type { StaffStatsCounts } from '@/api/types'
import { useStaffProfile } from '@/composables/useStaffProfile'
import {
callDirectionLabel,
formatCallDuration,
@@ -74,6 +75,8 @@ interface Col {
label: string
/** link=客户/群点击跳聊天;staff=员工微信(资料卡);缺省按 prop 特判文本。 */
kind?: 'link' | 'staff'
/** 操作列固定右侧(对齐云客,防横向滚动时被挤出视口)。 */
fixed?: 'right'
}
const KIND_COLS: Partial<Record<KindKey, Col[]>> = {
@@ -94,7 +97,7 @@ const KIND_COLS: Partial<Record<KindKey, Col[]>> = {
{ prop: 'staff', label: '员工微信', kind: 'staff' },
{ prop: 'amount', label: '金额' },
{ prop: 'time', label: '发生时间' },
{ prop: '_action', label: '操作' },
{ prop: '_action', label: '操作', fixed: 'right' },
],
del_customers: [
{ prop: 'nickname', label: '客户微信', kind: 'link' },
@@ -137,18 +140,10 @@ function windowParams(): { start?: number; end?: number } {
}
// ---- 员工微信列数据: 后端明细行无 staff 字段——数据本就是该员工的统计,
// 用资料卡信息渲染(nickname/avatar,与 StaffChat 同款 getAccounts 手法) ----
// 用资料卡信息渲染(nickname/avatar;useStaffProfile 与 StaffChat 资料卡
// 共享模块级缓存,全 app 一份请求) ----
const profile = ref<Account | null>(null)
async function loadProfile(): Promise<void> {
try {
const res = await getAccounts({ channel: 'wechat', page: 1, page_size: 100 })
profile.value = res.items.find(a => a.account_id === props.ownerId) ?? null
} catch {
profile.value = null // 后端未起: 员工列退化为 ownerId 兜底
}
}
const { profile } = useStaffProfile(toRef(props, 'ownerId'))
const staffName = computed(() => profile.value?.nickname || props.ownerId)
@@ -231,7 +226,6 @@ watch(
() => props.ownerId,
() => {
dateRange.value = defaultRange()
void loadProfile()
void loadCounts()
void loadDetail()
},
@@ -431,7 +425,8 @@ function playRecord(row: StatsRow): void {
v-for="col in activeCols"
:key="col.prop"
:label="col.label"
:min-width="col.kind === 'link' || col.kind === 'staff' ? 150 : col.prop === '_action' ? 110 : 110"
:fixed="col.fixed"
:min-width="col.kind === 'link' || col.kind === 'staff' ? 150 : 110"
>
<template #default="{ row }">
<!-- link 列: 客户/群 → 跳本员工聊天窗 -->
@@ -473,7 +468,9 @@ function playRecord(row: StatsRow): void {
<!-- 时间/金额/操作列特判,其余纯文本 -->
<template v-else-if="col.prop === 'time'">{{ formatTime(row.time) }}</template>
<template v-else-if="col.prop === 'amount'">{{ row.amount ?? '—' }}</template>
<template v-else-if="col.prop === 'amount'">{{
row.amount != null ? '¥' + row.amount.toFixed(2) : '—'
}}</template>
<template v-else-if="col.prop === '_action'">
<el-button link type="primary" size="small" @click="goChat(row, true)">
查看聊天记录
+58
View File
@@ -0,0 +1,58 @@
import { ref, watch, type Ref } from 'vue'
import { getAccounts } from '@/api'
import type { Account } from '@/api/types'
/**
* 员工资料(模块级缓存,全 app 一份请求)。avatar/nickname/phone 等。
*
* StaffChat(资料卡)与 StatsPane(员工微信列)原先各持一份相同的
* getAccounts(wechat, 100) + find 实现——提取为 composable 并加模块级缓存。
* 一次响应的 100 条整页入缓存,同页其它员工切换 owner 直接命中不再请求;
* 未命中/失败写 null(负缓存),避免重复打失败请求。
*/
const cache = new Map<string, Account | null>()
/** 命中缓存直接回调;否则请求一页 wechat 账号,整页回写缓存后回调。 */
async function fetchProfile(ownerId: string, apply: (a: Account | null) => void): Promise<void> {
if (cache.has(ownerId)) {
apply(cache.get(ownerId) ?? null)
return
}
try {
const res = await getAccounts({ channel: 'wechat', page: 1, page_size: 100 })
for (const a of res.items) cache.set(a.account_id, a)
// find 不到也写 null(负缓存)
const hit = cache.get(ownerId) ?? null
cache.set(ownerId, hit)
apply(hit)
} catch {
cache.set(ownerId, null)
apply(null)
}
}
/**
* @param ownerId 员工 account_id(wxid);响应式传入时自动随变更重载
* @returns profile 资料卡(null=未命中/失败,调用方自行兜底显示 ownerId);
* load 手动重载入口(watch immediate 已覆盖常规场景,一般无需调用)
*/
export function useStaffProfile(ownerId: string | Ref<string>): {
profile: Ref<Account | null>
load: () => void
} {
const idRef = typeof ownerId === 'string' ? ref(ownerId) : ownerId
const profile = ref<Account | null>(cache.get(idRef.value) ?? null)
// token 守卫: ownerId 快速切换时,旧 in-flight 响应不回写新 profile
let token = 0
function load(): void {
const my = ++token
const id = idRef.value
void fetchProfile(id, (a) => {
if (my === token) profile.value = a
})
}
watch(idRef, load, { immediate: true })
return { profile, load }
}
+3 -3
View File
@@ -1,6 +1,6 @@
// relativeChatTime 单测。注意: 项目尚未安装 vitest(devDependency 缺失),
// 本文件暂时不被 vue-tsc 检查(tsconfig.app.json exclude __tests__),装上
// vitest 后 `npx vitest run` 即可执行。
// relativeChatTime 单测(vitest)。本文件不进 app 构建/类型检查
// (tsconfig.app.json exclude __tests__,vitest 自行解析类型),
// `npm run test` 执行。
import { describe, expect, it } from 'vitest'
import { relativeChatTime } from '../format'
+15 -2
View File
@@ -21,7 +21,8 @@ import { buildCustomerSections, fromTypeLabel, readField } from '@/utils/custome
* WhatsApp客户 tab 对齐 云客 /cms/wechat/waBusiness/friendlist
* (7 列: 序号/员工信息/员工WhatsApp/客户WhatsApp/添加时间/最新消息时间/操作).
* 两 channel 列不同 → 各自独立列定义(同 StaffList 模式)。
* 操作列「查看聊天记录」→ ChatTimeline;row-click 开全字段 drawer。
* 操作列「查看聊天记录」→ 微信走新员工聊天窗口(staff-chat),WA 走 ChatTimeline;
* row-click 开全字段 drawer。
* 读字段用 readField(structured-first + raw_json fallback);时间用 cellTimeText
* (number→formatTime,字符串直显)。
*/
@@ -249,12 +250,24 @@ function onWhatsappPageSizeChange(s: number): void { handlePageSizeChange('whats
// 侧栏菜单在同一页面内切换 ?channel= 时组件复用(不重挂载);go() 同时 setChannel,
// 下方 channelStore watch 负责同步 activeTab + lazy-load。
// ---- 操作列:查看聊天记录 → ChatTimeline ----
// ---- 操作列:查看聊天记录。微信 → 新员工聊天窗口(single tab);
// WA 保持旧 ChatTimeline(新窗口仅微信)。 ----
function viewChat(row: Customer): void {
if (!row.owner_account_id) {
ElMessage.warning('该客户缺少归属账号,无法查看聊天记录')
return
}
if (row.channel === 'wechat') {
router.push({
name: 'staff-chat',
params: {
ownerId: row.owner_account_id,
tab: 'single',
talkerId: row.friend_id,
},
})
return
}
router.push({
name: 'chat',
params: {
+5 -14
View File
@@ -1,16 +1,15 @@
<!-- 员工聊天窗口骨架(对齐云客 wechat-window): 左栏资料卡+导航 / 中列会话 / 右列内容。
各 pane 由 Task 10-14 逐个替换占位实现。 -->
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { computed, ref, toRef } from 'vue'
import { useRouter } from 'vue-router'
import { getAccounts } from '@/api'
import type { Account } from '@/api/types'
import StaffChatSide, { TAB_KEYS, type TabKey } from '@/components/staffchat/StaffChatSide.vue'
import SessionPane from '@/components/staffchat/SessionPane.vue'
import ChatMain from '@/components/staffchat/ChatMain.vue'
import MomentsPane from '@/components/staffchat/MomentsPane.vue'
import ContactsPane from '@/components/staffchat/ContactsPane.vue'
import StatsPane from '@/components/staffchat/StatsPane.vue'
import { useStaffProfile } from '@/composables/useStaffProfile'
const props = defineProps<{ ownerId: string; tab?: string; talkerId?: string }>()
const router = useRouter()
@@ -23,18 +22,10 @@ function isTabKey(v: string | undefined): v is TabKey {
// 这里 computed 兜底 undefined/'' → single
const tab = computed<TabKey>(() => (isTabKey(props.tab) ? props.tab : 'single'))
const profile = ref<Account | null>(null)
// 员工资料卡: useStaffProfile 模块级缓存(与 StatsPane 共享,全 app 一份请求);
// 后端未起/未命中 → null,StaffChatSide 以 ownerId 兜底显示
const { profile } = useStaffProfile(toRef(props, 'ownerId'))
const collapsed = ref(false)
async function loadProfile() {
try {
const res = await getAccounts({ channel: 'wechat', page: 1, page_size: 100 })
profile.value = res.items.find(a => a.account_id === props.ownerId) ?? null
} catch {
// 后端未起/请求失败: 资料卡退化为 ownerId 兜底显示
profile.value = null
}
}
watch(() => props.ownerId, loadProfile, { immediate: true })
function onSelectTab(t: TabKey) {
router.push({ name: 'staff-chat', params: { ownerId: props.ownerId, tab: t } })
+10 -4
View File
@@ -264,7 +264,12 @@ function viewGroups(row: Account): void {
async function viewChat(row: Account) {
// 账号级聊天窗口(左侧会话列表 + 右消息流);对齐云客 badge→聊天窗口。
await router.push({ name: 'chat', params: { channel: row.channel, ownerId: row.account_id } })
// 微信 → 新员工聊天窗口(五视图);WA 保持旧 ChatTimeline(新窗口仅微信)。
if (row.channel === 'wechat') {
await router.push({ name: 'staff-chat', params: { ownerId: row.account_id, tab: 'single' } })
} else {
await router.push({ name: 'chat', params: { channel: row.channel, ownerId: row.account_id } })
}
}
// ---------------------------------------------------------------------------
@@ -369,12 +374,13 @@ function joinFields(...vals: (string | undefined | null)[]): string {
return parts.length ? parts.join(' ') : '--'
}
/** modal 客户微信 → 该员工×客户聊天(带 StaffList 当前日期窗)。缺失 owner/talker 静默 no-op。 */
/** modal 客户微信 → 该员工×客户聊天(带 StaffList 当前日期窗)。缺失 owner/talker 静默 no-op。
* 微信 → 新员工聊天窗口 single tab(modal 跳转不带 msgid 定位)。 */
function openCustomerChat(row: Account, customer: StaffChatCustomer): void {
if (!row.account_id || !customer.talker_id) return
router.push({
name: 'chat',
params: { channel: 'wechat', ownerId: row.account_id, talkerId: customer.talker_id },
name: 'staff-chat',
params: { ownerId: row.account_id, tab: 'single', talkerId: customer.talker_id },
query: { start: String(statsStart.value), end: String(statsEnd.value) },
})
}
+4 -3
View File
@@ -15,8 +15,9 @@
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
// vitest specs use `import from 'vitest'`, which isn't installed yet — keep
// them out of the app type-check (create-vue scaffold pattern; wire a
// tsconfig.vitest.json once vitest lands).
// vitest specs are run by vitest (own type resolution via `vitest` import),
// not part of the app build — keep them out of the app type-check
// (create-vue scaffold pattern; a dedicated tsconfig.vitest.json could
// type-check them separately if ever needed).
"exclude": ["src/**/__tests__/*"]
}