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/stores/channel.ts

@@ -0,0 +1,36 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { Channel } from '@/api/types'
+
+/**
+ * Global channel filter for the top-bar radio group. Persisted to localStorage
+ * so a refresh keeps the user's last selection. `Channel | 'all'` — `all` means
+ * "no channel filter" (the wrapper drops the param).
+ */
+const STORAGE_KEY = 'yunkes.channel'
+const VALID: (Channel | 'all')[] = ['wechat', 'whatsapp', 'all']
+
+function readInitial(): Channel | 'all' {
+  try {
+    const v = localStorage.getItem(STORAGE_KEY)
+    if (v && (VALID as string[]).includes(v)) return v as Channel | 'all'
+  } catch {
+    /* ignore — private mode etc. */
+  }
+  return 'all'
+}
+
+export const useChannelStore = defineStore('channel', () => {
+  const channel = ref<Channel | 'all'>(readInitial())
+
+  function setChannel(value: Channel | 'all'): void {
+    channel.value = value
+    try {
+      localStorage.setItem(STORAGE_KEY, value)
+    } catch {
+      /* ignore */
+    }
+  }
+
+  return { channel, setChannel }
+})

yunkes/src/stores/org.ts

@@ -0,0 +1,49 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import { getDepartments } from '@/api'
+import type { Department } from '@/api/types'
+import { buildDeptTree, type DeptTreeNode } from '@/utils/tree'
+
+/**
+ * Loads the flat department list once and exposes both the raw list and the
+ * el-tree-ready forest. Views select a department by `dept_id`; the tree node
+ * for a given id is resolved via `findNode`.
+ */
+export const useOrgStore = defineStore('org', () => {
+  const departments = ref<Department[]>([])
+  const tree = computed<DeptTreeNode[]>(() => buildDeptTree(departments.value))
+  const loaded = ref(false)
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  async function ensureLoaded(force = false): Promise<void> {
+    if (loaded.value && !force) return
+    if (loading.value) return
+    loading.value = true
+    error.value = null
+    try {
+      departments.value = await getDepartments()
+      loaded.value = true
+    } catch (e) {
+      error.value = (e as Error).message
+      throw e
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function findNode(deptId?: string | null): DeptTreeNode | undefined {
+    if (!deptId) return undefined
+    const visit = (list: DeptTreeNode[]): DeptTreeNode | undefined => {
+      for (const n of list) {
+        if (n.dept_id === deptId) return n
+        const hit = visit(n.children)
+        if (hit) return hit
+      }
+      return undefined
+    }
+    return visit(tree.value)
+  }
+
+  return { departments, tree, loaded, loading, error, ensureLoaded, findNode }
+})