feat: vue3 frontend scaffold + org tree + customer list + chat timeline

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>

yunkes/src/layouts/MainLayout.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { ChatLineSquare, Refresh, Search } from '@element-plus/icons-vue'
+import { useOrgStore } from '@/stores/org'
+import { useChannelStore } from '@/stores/channel'
+import type { DeptTreeNode } from '@/utils/tree'
+import type { Channel } from '@/api/types'
+
+const route = useRoute()
+const router = useRouter()
+const org = useOrgStore()
+const channelStore = useChannelStore()
+
+const filterText = ref('')
+const treeRef = ref()
+
+// Currently selected dept id drives the customer list via route query.
+const selectedDeptId = computed<string | null>(
+  () => (route.query.department_id as string | undefined) ?? null,
+)
+
+const treeProps = { label: 'label', children: 'children' }
+
+// el-tree's `filter-node-method` is called for every node on each keystroke.
+function filterNode(value: string, data: DeptTreeNode): boolean {
+  if (!value) return true
+  return data.label.toLowerCase().includes(value.toLowerCase())
+}
+
+watch(filterText, (val) => {
+  treeRef.value?.filter(val)
+})
+
+function handleNodeClick(node: DeptTreeNode): void {
+  // Toggling a dept navigates to the list with the dept filter applied. The
+  // ChatTimeline view ignores this query — only CustomerList reads it.
+  if (route.name !== 'customers') {
+    router.push({ name: 'customers', query: { department_id: node.dept_id } })
+  } else {
+    router.replace({ name: 'customers', query: { department_id: node.dept_id } })
+  }
+}
+
+const channelOptions: { value: Channel | 'all'; label: string }[] = [
+  { value: 'all', label: '全部渠道' },
+  { value: 'wechat', label: '微信' },
+  { value: 'whatsapp', label: 'WhatsApp' },
+]
+
+function onChannelChange(value: string | number | boolean | undefined): void {
+  channelStore.setChannel(value as Channel | 'all')
+}
+
+function goCustomers(): void {
+  router.push({ name: 'customers' })
+}
+
+async function reloadTree(): Promise<void> {
+  try {
+    await org.ensureLoaded(true)
+    ElMessage.success('部门已刷新')
+  } catch (e) {
+    ElMessage.error((e as Error).message)
+  }
+}
+
+// The tree's `current-key` highlights the active department. We re-apply it
+// whenever the underlying dept id changes (e.g. browser back/forward).
+watch(selectedDeptId, (id) => {
+  treeRef.value?.setCurrentKey(id ?? undefined)
+})
+
+onMounted(async () => {
+  try {
+    await org.ensureLoaded()
+  } catch {
+    /* error surfaced in the aside placeholder */
+  }
+  treeRef.value?.setCurrentKey(selectedDeptId.value ?? undefined)
+})
+</script>
+
+<template>
+  <el-container class="yk-app">
+    <el-header class="yk-header">
+      <h1 class="yk-header__title">云客数据镜像</h1>
+      <el-radio-group
+        :model-value="channelStore.channel"
+        size="default"
+        @change="onChannelChange"
+      >
+        <el-radio-button
+          v-for="opt in channelOptions"
+          :key="opt.value"
+          :value="opt.value"
+        >
+          {{ opt.label }}
+        </el-radio-button>
+      </el-radio-group>
+      <span class="yk-header__spacer" />
+      <el-button text @click="goCustomers">
+        <el-icon><ChatLineSquare /></el-icon>
+        <span style="margin-left: 4px">客户列表</span>
+      </el-button>
+    </el-header>
+
+    <el-container>
+      <el-aside class="yk-aside" :width="'var(--yk-aside-width)'">
+        <div class="yk-aside__search">
+          <el-input
+            v-model="filterText"
+            size="small"
+            clearable
+            placeholder="搜索部门"
+            :prefix-icon="Search"
+          />
+          <div
+            style="
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-top: 6px;
+            "
+          >
+            <span style="color: #909399; font-size: 12px">部门</span>
+            <el-button
+              text
+              size="small"
+              :loading="org.loading"
+              title="刷新"
+              @click="reloadTree"
+            >
+              <el-icon><Refresh /></el-icon>
+            </el-button>
+          </div>
+        </div>
+
+        <div class="yk-aside__tree">
+          <el-tree
+            ref="treeRef"
+            :data="org.tree"
+            :props="treeProps"
+            node-key="dept_id"
+            :current-node-key="selectedDeptId ?? undefined"
+            :filter-node-method="filterNode"
+            :expand-on-click-node="false"
+            :default-expand-all="false"
+            highlight-current
+            empty-text="暂无部门"
+            @node-click="handleNodeClick"
+          >
+            <template #default="{ data }">
+              <span class="yk-tree-node">
+                {{ data.label }}
+                <el-tag
+                  v-if="data.dept_id === selectedDeptId"
+                  size="small"
+                  type="primary"
+                  effect="plain"
+                  style="margin-left: 4px"
+                >
+                  筛选中
+                </el-tag>
+              </span>
+            </template>
+          </el-tree>
+
+          <div
+            v-if="org.error"
+            class="yk-empty"
+            style="font-size: 12px; padding: 12px"
+          >
+            加载失败：{{ org.error }}
+          </div>
+        </div>
+      </el-aside>
+
+      <el-main class="yk-main">
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<style scoped>
+.yk-tree-node {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+}
+</style>