MessageBubble.vue was keys off the (incomplete) type code, so many messages
with real OSS media URLs (https://wx.oss.yunkecn.com/.../*.webp|*.mp4) showed
as '[未知消息]'. Rendering is now URL-driven: pick the best http URL from
file_url > file_hd_url > file_th_url, then render by extension
(image/video/audio/file). Type code is only used as a last-resort label.
- MessageBubble.vue: URL-driven cascade (URL by ext → duration →
transcription → text → structured-type placeholder → localized tag).
Image/video/audio/file children @click.stop so the all-fields drawer
still opens on bubble click but not on media interactions.
- format.ts: wechatTypeLabel(type_raw) maps known codes (3→图片, 34→语音,
43→图片/表情, 49→文件/名片, 42→名片, 9→表情, 20→红包/转账).
- ChatTimeline.vue drawer type tag uses wechatTypeLabel for WeChat msgs.
- style.css: compact .yk-msg__audio player for voice-with-URL messages.
Verified against smoke.db: 25 type-3 images + 3 type-43 videos that
previously showed '[未知消息]' now render as images/video. Build clean.
Co-Authored-By: Claude <noreply@anthropic.com>
Replicates the Customer all-fields pattern across the remaining three
entities. Backend now exposes `raw_json` on MessageOut / StaffOut /
AccountOut so the frontend can render every 云客 source field without a
second endpoint. Each entity gains a Chinese-label field utility + an
el-drawer surfacing all fields (structured-first, raw_json fallback,
unknown keys under 其他).
Backend:
- schemas.py: add `raw_json: dict | None` to MessageOut / StaffOut /
AccountOut. MessageOut/StaffOut pick the column up via from_attributes;
AccountOut is built explicitly in the router, which now threads
`raw_json` through from both WechatAccount and WhatsappAccount rows.
- tests: new raw_json serialization tests for messages, staff, accounts
(assert populated dict round-trips verbatim + NULL serializes as null).
Frontend (yunkes/):
- New utils: messageFields.ts, staffFields.ts, accountFields.ts — each
with a 中文 label map, ordered groups, structured-column preference,
and an 其他 fallback for unknown raw_json keys.
- Message: clicking a chat bubble opens an all-fields drawer (referMsg
renders as pretty-printed JSON). Image preview + file download links
stopPropagation so their own interactions still work.
- Staff: row click → drawer; columns relabeled (员工ID, 销售手机).
- Accounts: new AccountList.vue at /accounts with a 账号 nav item,
unified WeChat/WhatsApp table (渠道/账号ID/昵称/微信号/归属员工/好友数/
群数/收发/在职/最后更新), channel filter, pagination, row-click drawer.
- api: add Account type + getAccounts(); add raw_json to Message/Staff.
Co-Authored-By: Claude <noreply@anthropic.com>
Backend (Part A):
- MessageOut: add file_th_url, file_hd_url, duration, transcription_text, md5
(room_id + sender_head_url already existed) so the chat timeline can render
image thumbnails, voice duration/transcription, and avatars from a single
response.
- PhoneCallOut: add record_file so the Calls view can offer recording playback.
- SmsOut: add content (full body) so the SMS detail dialog shows the whole text.
- Tests: red->green for each new field (media fields default None + populated,
record_file round-trip, content round-trip). Suite 267 -> 271.
Frontend (Part B):
- api/index.ts: wrappers getGroups/getGroupMembers/getCalls/getSms/getSyncStatus
+ Group/GroupMember/PhoneCall/Sms/SyncState/SyncRun/SyncStatus types in
types.ts (mirror the *Out pydantic schemas).
- views/GroupList.vue (/groups): table + channel filter + pagination; row click
opens the group timeline.
- views/CallList.vue (/calls): table + call-type filter (phone_call/voice_call/
all); "播放录音" action opens an el-dialog with <audio controls>.
- views/SmsList.vue (/sms): table; row click opens a detail dialog with the full
content.
- views/SyncStatus.vue (/sync): two tables (states + recent_runs) with a manual
refresh; run status color-coded.
- ChatTimeline.vue: reused for both 1:1 DM (talkerId) and group (roomId) by
branching the query; group title + per-member sender already handled by
MessageBubble.
- router: add /groups /calls /sms /sync + /group/:channel/:ownerId/:roomId.
- layouts/MainLayout.vue: replace the single 客户列表 button with an el-menu
(客户 / 群 / 通话 / 短信 / 同步); org tree kept on the left.
Co-Authored-By: Claude <noreply@anthropic.com>
M5b viewing frontend for the yunke data-mirror, under yunkes/.
- Scaffold: Vite + Vue 3 + TS, with element-plus, @element-plus/icons-vue,
pinia, vue-router@4, axios. Dev server on :5173 with /api and /api/media
proxied to the FastAPI backend on :8000.
- API client (src/api/): axios instance (baseURL '/api') whose response
interceptor unwraps the axios envelope; typed wrappers (getCustomers,
getMessages, getDepartments, getStaff) returning Page<T> / arrays; types
mirroring the backend *Out schemas (Message typed as a permissive superset
so file_th_url/duration/transcription_text degrade gracefully today and
light up once MessageOut exposes them).
- Layout: el-header top bar (title + channel switch) + el-aside department
tree (built from the flat parent_id list via useOrgStore, with search
filter) + el-main router-view.
- CustomerList (/customers): el-table with channel filter, department filter
driven by the tree selection (route query), pagination, and row-click into
the chat timeline (channel + owner_account_id + talker_id).
- ChatTimeline (/chat/:channel/:ownerId/:talkerId): asc-ordered message
bubbles keyed by is_send (direction) and type (text/image/video/voice/file/
divider/system/unknown); lands on the most-recent page and prepends older
pages via load-more with scroll anchoring.
- Home '/' redirects to '/customers'.
npm run build (vue-tsc -b + vite build) is clean.
Co-Authored-By: Claude <noreply@anthropic.com>
浅念
