feat: full-field display for message/staff/accounts (raw_json + drawers)

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>

yunkes/src/views/AccountList.vue

@@ -0,0 +1,367 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getAccounts } from '@/api'
+import type { Account, Channel } from '@/api/types'
+import { useChannelStore } from '@/stores/channel'
+import { channelLabel, formatTime } from '@/utils/format'
+import { buildAccountSections, readField } from '@/utils/accountFields'
+
+/**
+ * 账号 list — unified WeChat + WhatsApp staff messaging accounts. Mirrors the
+ * 云客 微信号管理 / WhatsApp views: 渠道 / 账号ID / 昵称 / 微信号 / 归属员工 /
+ * 好友数 / 群数 / 收发 / 在职 / 最后更新. Clicking a row opens the all-fields
+ * drawer (every raw_json key, grouped + 中文-labeled).
+ */
+const channelStore = useChannelStore()
+
+const accounts = ref<Account[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+const loading = ref(false)
+const errorMsg = ref<string | null>(null)
+
+// All-fields drawer state.
+const drawerOpen = ref(false)
+const drawerAccount = ref<Account | null>(null)
+
+const channelOptions = [
+  { value: 'all' as const, label: '全部渠道' },
+  { value: 'wechat' as const, label: '微信' },
+  { value: 'whatsapp' as const, label: 'WhatsApp' },
+]
+
+const channelLabelCurrent = computed(() =>
+  channelLabel(channelStore.channel === 'all' ? null : channelStore.channel),
+)
+
+function channelTagType(c: string): 'success' | 'warning' {
+  return c === 'wechat' ? 'success' : 'warning'
+}
+
+function onChannelChange(value: string | number | boolean | undefined): void {
+  channelStore.setChannel(value as Channel | 'all')
+}
+
+/** Read a raw_json camelCase key off an account, preferring the structured
+ * snake_case column when it is populated. */
+function cell(row: Account, camelKey: string): unknown {
+  return readField(row, camelKey)
+}
+
+function cellText(row: Account, camelKey: string): string {
+  const v = cell(row, camelKey)
+  return v === null || v === undefined || v === '' ? '--' : String(v)
+}
+
+function timeCell(row: Account, camelKey: string): number | undefined {
+  const v = cell(row, camelKey)
+  return typeof v === 'number' ? v : undefined
+}
+
+function onJobTagType(onJob?: boolean | null): 'success' | 'info' | '' {
+  if (onJob === true) return 'success'
+  if (onJob === false) return 'info'
+  return ''
+}
+
+function onJobLabel(onJob?: boolean | null): string {
+  if (onJob === true) return '在职'
+  if (onJob === false) return '离职'
+  return '--'
+}
+
+async function load(): Promise<void> {
+  loading.value = true
+  errorMsg.value = null
+  try {
+    const res = await getAccounts({
+      channel: channelStore.channel,
+      page: page.value,
+      page_size: pageSize.value,
+    })
+    accounts.value = res.items
+    total.value = res.total
+  } catch (e) {
+    errorMsg.value = (e as Error).message
+    ElMessage.error(`账号列表加载失败：${(e as Error).message}`)
+  } finally {
+    loading.value = false
+  }
+}
+
+function handlePageChange(p: number): void {
+  page.value = p
+  load()
+}
+
+function handlePageSizeChange(s: number): void {
+  pageSize.value = s
+  page.value = 1
+  load()
+}
+
+// React to the top-bar channel selector.
+watch(
+  () => channelStore.channel,
+  () => {
+    page.value = 1
+    load()
+  },
+)
+
+function openDrawer(row: Account): void {
+  drawerAccount.value = row
+  drawerOpen.value = true
+}
+
+const drawerSections = computed(() =>
+  drawerAccount.value ? buildAccountSections(drawerAccount.value) : [],
+)
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="yk-accounts">
+    <div class="yk-accounts__header">
+      <div>
+        <h2 style="margin: 0 0 4px; font-size: 16px">账号列表</h2>
+        <span class="yk-accounts__sub">
+          共 {{ total }} 条 · 渠道：{{ channelLabelCurrent }}
+        </span>
+      </div>
+      <div class="yk-accounts__filters">
+        <el-radio-group
+          :model-value="channelStore.channel"
+          size="small"
+          @change="onChannelChange"
+        >
+          <el-radio-button
+            v-for="opt in channelOptions"
+            :key="opt.value"
+            :value="opt.value"
+          >
+            {{ opt.label }}
+          </el-radio-button>
+        </el-radio-group>
+      </div>
+    </div>
+
+    <el-alert
+      v-if="errorMsg"
+      :title="errorMsg"
+      type="error"
+      show-icon
+      :closable="false"
+      style="margin-bottom: 12px"
+    />
+
+    <el-table
+      v-loading="loading"
+      :data="accounts"
+      stripe
+      border
+      row-key="account_id"
+      style="width: 100%"
+      :row-class-name="() => 'yk-clickable-row'"
+      empty-text="暂无账号数据"
+      @row-click="openDrawer"
+    >
+      <el-table-column label="渠道" width="100">
+        <template #default="{ row }">
+          <el-tag :type="channelTagType(row.channel)" size="small" effect="plain">
+            {{ channelLabel(row.channel) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="账号ID" min-width="160">
+        <template #default="{ row }">{{ row.account_id }}</template>
+      </el-table-column>
+      <el-table-column label="昵称" min-width="120">
+        <template #default="{ row }">
+          <span v-if="row.nickname">{{ row.nickname }}</span>
+          <span v-else style="color: #c0c4cc">--</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="微信号" min-width="120">
+        <template #default="{ row }">{{ cellText(row, 'alias') }}</template>
+      </el-table-column>
+      <el-table-column label="归属员工" min-width="120">
+        <template #default="{ row }">
+          <span v-if="cell(row, 'userName') || row.user_name">
+            {{ cellText(row, 'userName') }}
+          </span>
+          <span v-else style="color: #c0c4cc">--</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="好友数" prop="contacts_num" width="90" align="right">
+        <template #default="{ row }">
+          {{ row.contacts_num ?? 0 }}
+        </template>
+      </el-table-column>
+      <el-table-column label="群数" prop="group_num" width="80" align="right">
+        <template #default="{ row }">
+          {{ row.group_num ?? 0 }}
+        </template>
+      </el-table-column>
+      <el-table-column label="发消息数" width="100" align="right">
+        <template #default="{ row }">{{ cellText(row, 'sendNum') }}</template>
+      </el-table-column>
+      <el-table-column label="收消息数" width="100" align="right">
+        <template #default="{ row }">{{ cellText(row, 'receiveNum') }}</template>
+      </el-table-column>
+      <el-table-column label="在职" width="90" align="center">
+        <template #default="{ row }">
+          <el-tag
+            :type="onJobTagType(row.is_on_job)"
+            size="small"
+            effect="plain"
+          >
+            {{ onJobLabel(row.is_on_job) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="最后更新" width="160">
+        <template #default="{ row }">
+          {{ formatTime(timeCell(row, 'lastUpdate')) }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="yk-accounts__pager">
+      <el-pagination
+        :current-page="page"
+        :page-size="pageSize"
+        :page-sizes="[20, 50, 100]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="handlePageChange"
+        @size-change="handlePageSizeChange"
+      />
+    </div>
+    <p class="yk-accounts__hint">点击任意一行查看账号全部字段。</p>
+
+    <!-- All-fields drawer -->
+    <el-drawer
+      v-model="drawerOpen"
+      :title="drawerAccount ? `账号详情 · ${drawerAccount.nickname ?? drawerAccount.account_id}` : '账号详情'"
+      direction="rtl"
+      size="560px"
+    >
+      <template v-if="drawerAccount">
+        <div class="yk-drawer__topmeta">
+          <el-tag :type="channelTagType(drawerAccount.channel)" size="small" effect="plain">
+            {{ channelLabel(drawerAccount.channel) }}
+          </el-tag>
+          <el-tag
+            :type="onJobTagType(drawerAccount.is_on_job)"
+            size="small"
+            effect="plain"
+          >
+            {{ onJobLabel(drawerAccount.is_on_job) }}
+          </el-tag>
+        </div>
+
+        <div v-for="section in drawerSections" :key="section.title" class="yk-drawer__section">
+          <el-divider content-position="left">{{ section.title }}</el-divider>
+          <dl class="yk-drawer__kv">
+            <div v-for="f in section.fields" :key="f.key" class="yk-drawer__kv-item">
+              <dt>{{ f.label }}</dt>
+              <dd v-if="f.render === 'image'" class="yk-drawer__img">
+                <el-image
+                  :src="String(f.value)"
+                  :preview-src-list="[String(f.value)]"
+                  fit="cover"
+                  hide-on-click-modal
+                />
+              </dd>
+              <dd v-else-if="f.render === 'empty'" class="yk-drawer__empty">—</dd>
+              <dd v-else>{{ f.text }}</dd>
+            </div>
+          </dl>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<style scoped>
+.yk-accounts__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.yk-accounts__sub {
+  color: #909399;
+  font-size: 13px;
+}
+
+.yk-accounts__filters {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.yk-accounts__pager {
+  margin-top: 12px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.yk-accounts__hint {
+  margin: 8px 2px 0;
+  font-size: 12px;
+  color: #c0c4cc;
+}
+
+.yk-drawer__topmeta {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.yk-drawer__kv {
+  margin: 0 0 8px;
+}
+
+.yk-drawer__kv-item {
+  display: grid;
+  grid-template-columns: 110px 1fr;
+  gap: 8px 12px;
+  padding: 3px 0;
+}
+
+.yk-drawer__kv dt {
+  color: #909399;
+  font-size: 13px;
+  word-break: break-all;
+}
+
+.yk-drawer__kv dd {
+  margin: 0;
+  font-size: 13px;
+  color: #303133;
+  word-break: break-all;
+  min-width: 0;
+}
+
+.yk-drawer__img :deep(.el-image) {
+  width: 64px;
+  height: 64px;
+  border-radius: 4px;
+  border: 1px solid var(--el-border-color-light, #e4e7ed);
+}
+
+.yk-drawer__empty {
+  color: #c0c4cc;
+}
+</style>

yunkes/src/views/ChatTimeline.vue

@@ -6,7 +6,8 @@ import { ArrowLeft } from '@element-plus/icons-vue'
 import { getMessages } from '@/api'
 import type { Channel, Message } from '@/api/types'
 import MessageBubble from '@/components/MessageBubble.vue'
-import { channelLabel } from '@/utils/format'
+import { channelLabel, formatTime } from '@/utils/format'
+import { buildMessageSections } from '@/utils/messageFields'
 
 /**
  * Chat timeline. Reused for two conversation shapes:
@@ -141,6 +142,26 @@ function goBack(): void {
   }
 }
 
+// All-fields drawer state for the message detail view.
+const drawerOpen = ref(false)
+const drawerMessage = ref<Message | null>(null)
+
+function openDetail(m: Message): void {
+  drawerMessage.value = m
+  drawerOpen.value = true
+}
+
+const drawerSections = computed(() =>
+  drawerMessage.value ? buildMessageSections(drawerMessage.value) : [],
+)
+
+const drawerTitle = computed(() => {
+  const m = drawerMessage.value
+  if (!m) return '消息详情'
+  const when = m.timestamp ? formatTime(m.timestamp) : ''
+  return `消息详情${when ? ` · ${when}` : ''}`
+})
+
 // Reload when the route params change (navigating between conversations).
 watch(
   () => [props.channel, props.ownerId, props.talkerId, props.roomId] as const,
@@ -200,8 +221,74 @@ onMounted(loadInitial)
         v-for="m in messages"
         :key="m.msg_id"
         :message="m"
+        @open-detail="openDetail"
       />
     </div>
+
+    <!-- All-fields drawer for the clicked message -->
+    <el-drawer
+      v-model="drawerOpen"
+      :title="drawerTitle"
+      direction="rtl"
+      size="560px"
+    >
+      <template v-if="drawerMessage">
+        <div class="yk-drawer__topmeta">
+          <el-tag size="small" effect="plain">
+            {{ channelLabel(channelTyped) }}
+          </el-tag>
+          <el-tag
+            v-if="drawerMessage.type"
+            size="small"
+            type="info"
+            effect="plain"
+          >
+            {{ drawerMessage.type }}
+            <template v-if="drawerMessage.type_raw != null">
+              ({{ drawerMessage.type_raw }})
+            </template>
+          </el-tag>
+          <el-tag
+            v-if="drawerMessage.is_send != null"
+            size="small"
+            :type="drawerMessage.is_send ? 'success' : 'warning'"
+            effect="plain"
+          >
+            {{ drawerMessage.is_send ? '发出' : '接收' }}
+          </el-tag>
+        </div>
+
+        <div
+          v-for="section in drawerSections"
+          :key="section.title"
+          class="yk-drawer__section"
+        >
+          <el-divider content-position="left">{{ section.title }}</el-divider>
+          <dl class="yk-drawer__kv">
+            <div
+              v-for="f in section.fields"
+              :key="f.key"
+              class="yk-drawer__kv-item"
+            >
+              <dt>{{ f.label }}</dt>
+              <dd v-if="f.render === 'image'" class="yk-drawer__img">
+                <el-image
+                  :src="String(f.value)"
+                  :preview-src-list="[String(f.value)]"
+                  fit="cover"
+                  hide-on-click-modal
+                />
+              </dd>
+              <dd v-else-if="f.render === 'empty'" class="yk-drawer__empty">—</dd>
+              <dd v-else-if="f.render === 'object'" class="yk-drawer__pre">
+                <pre>{{ f.text }}</pre>
+              </dd>
+              <dd v-else>{{ f.text }}</dd>
+            </div>
+          </dl>
+        </div>
+      </template>
+    </el-drawer>
   </div>
 </template>
 
@@ -213,4 +300,65 @@ onMounted(loadInitial)
   max-height: calc(100vh - var(--yk-header-height) - 140px);
   overflow-y: auto;
 }
+
+.yk-drawer__topmeta {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.yk-drawer__kv {
+  margin: 0 0 8px;
+}
+
+.yk-drawer__kv-item {
+  display: grid;
+  grid-template-columns: 110px 1fr;
+  gap: 8px 12px;
+  padding: 3px 0;
+}
+
+.yk-drawer__kv dt {
+  color: #909399;
+  font-size: 13px;
+  word-break: break-all;
+}
+
+.yk-drawer__kv dd {
+  margin: 0;
+  font-size: 13px;
+  color: #303133;
+  word-break: break-all;
+  min-width: 0;
+}
+
+.yk-drawer__img :deep(.el-image) {
+  width: 64px;
+  height: 64px;
+  border-radius: 4px;
+  border: 1px solid var(--el-border-color-light, #e4e7ed);
+}
+
+.yk-drawer__empty {
+  color: #c0c4cc;
+}
+
+.yk-drawer__pre {
+  margin: 0;
+  min-width: 0;
+}
+
+.yk-drawer__pre pre {
+  margin: 0;
+  padding: 8px;
+  background: var(--el-fill-color-light, #f5f7fa);
+  border-radius: 4px;
+  font-size: 12px;
+  color: #303133;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 240px;
+  overflow: auto;
+}
 </style>

yunkes/src/views/StaffList.vue

@@ -5,10 +5,15 @@ import { ElMessage } from 'element-plus'
 import { getStaff } from '@/api'
 import type { Staff } from '@/api/types'
 import { useOrgStore } from '@/stores/org'
+import { buildStaffSections, readField } from '@/utils/staffFields'
 
 const route = useRoute()
 const org = useOrgStore()
 
+// All-fields drawer state.
+const drawerOpen = ref(false)
+const drawerStaff = ref<Staff | null>(null)
+
 const staff = ref<Staff[]>([])
 const total = ref(0)
 const page = ref(1)
@@ -98,6 +103,26 @@ onMounted(async () => {
   }
   await load()
 })
+
+/** Read a raw_json camelCase key off a staff row, preferring the structured
+ * snake_case column when it is populated. */
+function cell(row: Staff, camelKey: string): unknown {
+  return readField(row, camelKey)
+}
+
+function cellText(row: Staff, camelKey: string): string {
+  const v = cell(row, camelKey)
+  return v === null || v === undefined || v === '' ? '--' : String(v)
+}
+
+function openDrawer(row: Staff): void {
+  drawerStaff.value = row
+  drawerOpen.value = true
+}
+
+const drawerSections = computed(() =>
+  drawerStaff.value ? buildStaffSections(drawerStaff.value) : [],
+)
 </script>
 
 <template>
@@ -136,8 +161,13 @@ onMounted(async () => {
       border
       row-key="user_id"
       style="width: 100%"
+      :row-class-name="() => 'yk-clickable-row'"
       empty-text="暂无员工数据"
+      @row-click="openDrawer"
     >
+      <el-table-column label="员工ID" min-width="120">
+        <template #default="{ row }">{{ row.user_id }}</template>
+      </el-table-column>
       <el-table-column label="姓名" min-width="120">
         <template #default="{ row }">
           <span v-if="row.name">{{ row.name }}</span>
@@ -145,10 +175,10 @@ onMounted(async () => {
         </template>
       </el-table-column>
       <el-table-column label="手机" min-width="130">
-        <template #default="{ row }">{{ row.phone || '--' }}</template>
+        <template #default="{ row }">{{ cellText(row, 'phone') }}</template>
       </el-table-column>
-      <el-table-column label="sale_phone" min-width="130">
-        <template #default="{ row }">{{ row.sale_phone || '--' }}</template>
+      <el-table-column label="销售手机" min-width="130">
+        <template #default="{ row }">{{ cellText(row, 'sale_phone') }}</template>
       </el-table-column>
       <el-table-column label="部门" min-width="140">
         <template #default="{ row }">
@@ -181,6 +211,28 @@ onMounted(async () => {
         @size-change="handlePageSizeChange"
       />
     </div>
+    <p class="yk-staff__hint">点击任意一行查看员工全部字段。</p>
+
+    <!-- All-fields drawer -->
+    <el-drawer
+      v-model="drawerOpen"
+      :title="drawerStaff ? `员工详情 · ${drawerStaff.name ?? drawerStaff.user_id}` : '员工详情'"
+      direction="rtl"
+      size="520px"
+    >
+      <template v-if="drawerStaff">
+        <div v-for="section in drawerSections" :key="section.title" class="yk-drawer__section">
+          <el-divider content-position="left">{{ section.title }}</el-divider>
+          <dl class="yk-drawer__kv">
+            <div v-for="f in section.fields" :key="f.key" class="yk-drawer__kv-item">
+              <dt>{{ f.label }}</dt>
+              <dd v-if="f.render === 'empty'" class="yk-drawer__empty">—</dd>
+              <dd v-else>{{ f.text }}</dd>
+            </div>
+          </dl>
+        </div>
+      </template>
+    </el-drawer>
   </div>
 </template>
 
@@ -211,4 +263,39 @@ onMounted(async () => {
   display: flex;
   justify-content: flex-end;
 }
+
+.yk-staff__hint {
+  margin: 8px 2px 0;
+  font-size: 12px;
+  color: #c0c4cc;
+}
+
+.yk-drawer__kv {
+  margin: 0 0 8px;
+}
+
+.yk-drawer__kv-item {
+  display: grid;
+  grid-template-columns: 110px 1fr;
+  gap: 8px 12px;
+  padding: 3px 0;
+}
+
+.yk-drawer__kv dt {
+  color: #909399;
+  font-size: 13px;
+  word-break: break-all;
+}
+
+.yk-drawer__kv dd {
+  margin: 0;
+  font-size: 13px;
+  color: #303133;
+  word-break: break-all;
+  min-width: 0;
+}
+
+.yk-drawer__empty {
+  color: #c0c4cc;
+}
 </style>