diff --git a/frontend/src/api/conversation.ts b/frontend/src/api/conversation.ts
index e31cf77..6815826 100644
--- a/frontend/src/api/conversation.ts
+++ b/frontend/src/api/conversation.ts
@@ -1,5 +1,12 @@
 import api from './index'
 
+export interface MessageAttachment {
+  id: string
+  name: string
+  type: string
+  size: number
+}
+
 export interface Message {
   id: string
   role: 'user' | 'assistant'
@@ -7,6 +14,7 @@ export interface Message {
   model?: string
   tokens_used?: number
   created_at: string
+  attachments?: MessageAttachment[]
 }
 
 export interface Conversation {
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 0518102..1dbe877 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -1,27 +1,81 @@
 import axios from 'axios'
 
 const api = axios.create({
-  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:8000',
+  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:9527',
   timeout: 30000,
 })
 
+function createRequestId() {
+  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+    return crypto.randomUUID()
+  }
+  return `req-${Date.now()}-${Math.random().toString(16).slice(2)}`
+}
+
+function isDev() {
+  return Boolean(import.meta.env.DEV)
+}
+
+function debugLog(stage: string, payload: Record<string, unknown>) {
+  if (!isDev()) return
+  console.debug(`[api:${stage}]`, payload)
+}
+
 // 请求拦截器：添加 Token
 api.interceptors.request.use((config) => {
   const token = localStorage.getItem('access_token')
+  const requestId = createRequestId()
+  config.headers = config.headers || {}
+  config.headers['X-Request-ID'] = requestId
   if (token) {
     config.headers.Authorization = `Bearer ${token}`
   }
+  ;(config as typeof config & { metadata?: { startedAt: number; requestId: string } }).metadata = {
+    startedAt: Date.now(),
+    requestId,
+  }
+  debugLog('request', {
+    requestId,
+    method: config.method,
+    url: config.url,
+    params: config.params,
+    data: config.data,
+  })
   return config
 })
 
 // 响应拦截器：处理错误
 api.interceptors.response.use(
-  (response) => response,
+  (response) => {
+    const metadata = (response.config as typeof response.config & { metadata?: { startedAt: number; requestId: string } }).metadata
+    debugLog('response', {
+      requestId: response.headers['x-request-id'] || metadata?.requestId,
+      method: response.config.method,
+      url: response.config.url,
+      status: response.status,
+      durationMs: metadata ? Date.now() - metadata.startedAt : undefined,
+      data: response.data,
+    })
+    return response
+  },
   async (error) => {
+    const metadata = (error.config as typeof error.config & { metadata?: { startedAt: number; requestId: string } })?.metadata
+    const requestId = error.response?.headers?.['x-request-id'] || metadata?.requestId
     if (error.response?.status === 401) {
       localStorage.removeItem('access_token')
       window.location.href = '/login'
     }
+    debugLog('error', {
+      requestId,
+      method: error.config?.method,
+      url: error.config?.url,
+      status: error.response?.status,
+      durationMs: metadata ? Date.now() - metadata.startedAt : undefined,
+      detail: error.response?.data,
+    })
+    if (requestId) {
+      error.requestId = requestId
+    }
     return Promise.reject(error)
   }
 )
diff --git a/frontend/src/app/navigation/nav.ts b/frontend/src/app/navigation/nav.ts
new file mode 100644
index 0000000..fe08c01
--- /dev/null
+++ b/frontend/src/app/navigation/nav.ts
@@ -0,0 +1,34 @@
+import {
+  Activity,
+  BookOpen,
+  Bot,
+  CheckSquare,
+  LayoutGrid,
+  MessageCircle,
+  MessageSquare,
+  Network,
+  Settings,
+  Star,
+  Terminal,
+  type LucideIcon,
+} from 'lucide-vue-next'
+
+export interface NavItem {
+  name: string
+  path: string
+  icon: LucideIcon
+}
+
+export const navItems: NavItem[] = [
+  { name: '沟通系统', path: '/chat', icon: MessageCircle },
+  { name: '智能链路', path: '/agents', icon: Bot },
+  { name: '技能中心', path: '/skills', icon: Star },
+  { name: '资料中枢', path: '/knowledge', icon: BookOpen },
+  { name: '知识大脑', path: '/graph', icon: Network },
+  { name: '任务矩阵', path: '/kanban', icon: LayoutGrid },
+  { name: '任务调度', path: '/todo', icon: CheckSquare },
+  { name: '信息交易所', path: '/forum', icon: MessageSquare },
+  { name: '运行状态', path: '/stats', icon: Activity },
+  { name: '运行日志', path: '/logs', icon: Terminal },
+  { name: '系统设置', path: '/settings', icon: Settings },
+]
diff --git a/frontend/src/app/router/index.ts b/frontend/src/app/router/index.ts
new file mode 100644
index 0000000..c996369
--- /dev/null
+++ b/frontend/src/app/router/index.ts
@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { routes } from './routes'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+router.beforeEach((to, _from, next) => {
+  const auth = useAuthStore()
+  if (to.meta.requiresAuth && !auth.isAuthenticated) {
+    next('/login')
+  } else if (to.meta.guest && auth.isAuthenticated) {
+    next('/chat')
+  } else {
+    next()
+  }
+})
+
+export default router
diff --git a/frontend/src/app/router/routes.ts b/frontend/src/app/router/routes.ts
new file mode 100644
index 0000000..8fb4bbd
--- /dev/null
+++ b/frontend/src/app/router/routes.ts
@@ -0,0 +1,80 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+const appChildren: RouteRecordRaw[] = [
+  {
+    path: '',
+    redirect: '/chat',
+  },
+  {
+    path: 'chat',
+    name: 'chat',
+    component: () => import('@/pages/chat/index.vue'),
+  },
+  {
+    path: 'knowledge',
+    name: 'knowledge',
+    component: () => import('@/pages/knowledge/index.vue'),
+  },
+  {
+    path: 'graph',
+    name: 'graph',
+    component: () => import('@/pages/graph/index.vue'),
+  },
+  {
+    path: 'kanban',
+    name: 'kanban',
+    component: () => import('@/pages/kanban/index.vue'),
+  },
+  {
+    path: 'forum',
+    name: 'forum',
+    component: () => import('@/pages/forum/index.vue'),
+  },
+  {
+    path: 'agents',
+    name: 'agents',
+    component: () => import('@/pages/agents/index.vue'),
+  },
+  {
+    path: 'stats',
+    name: 'stats',
+    component: () => import('@/pages/stats/index.vue'),
+  },
+  {
+    path: 'skills',
+    name: 'skills',
+    component: () => import('@/pages/skills/index.vue'),
+  },
+  {
+    path: 'todo',
+    name: 'todo',
+    component: () => import('@/pages/todo/index.vue'),
+  },
+  {
+    path: 'settings',
+    name: 'settings',
+    component: () => import('@/pages/settings/index.vue'),
+  },
+  {
+    path: 'logs',
+    name: 'logs',
+    component: () => import('@/pages/logs/index.vue'),
+  },
+]
+
+export const routes: RouteRecordRaw[] = [
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('@/pages/login/index.vue'),
+    meta: { guest: true },
+  },
+  {
+    path: '/',
+    component: () => import('@/pages/app/layout.vue'),
+    meta: { requiresAuth: true },
+    children: appChildren,
+  },
+]
+
+export { appChildren }
diff --git a/frontend/src/components/SidebarNav.vue b/frontend/src/components/SidebarNav.vue
index 036f3dc..ea1854a 100644
--- a/frontend/src/components/SidebarNav.vue
+++ b/frontend/src/components/SidebarNav.vue
@@ -1,26 +1,13 @@
 <script setup lang="ts">
 import { useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
-import { MessageCircle, BookOpen, Network, LayoutGrid, MessageSquare, LogOut, Cpu, Bot, Activity, CheckSquare, Settings, Star, Terminal } from 'lucide-vue-next'
+import { LogOut, Cpu } from 'lucide-vue-next'
+import { navItems } from '@/app/navigation/nav'
 
 const router = useRouter()
 const route = useRoute()
 const auth = useAuthStore()
 
-const navItems = [
-  { name: '沟通系统', path: '/chat', icon: MessageCircle },
-  { name: '智能链路', path: '/agents', icon: Bot },
-  { name: '技能中心', path: '/skills', icon: Star },
-  { name: '资料中枢', path: '/knowledge', icon: BookOpen },
-  { name: '知识大脑', path: '/graph', icon: Network },
-  { name: '任务矩阵', path: '/kanban', icon: LayoutGrid },
-  { name: '任务调度', path: '/todo', icon: CheckSquare },
-  { name: '信息交易所', path: '/forum', icon: MessageSquare },
-  { name: '运行状态', path: '/stats', icon: Activity },
-  { name: '运行日志', path: '/logs', icon: Terminal },
-  { name: '系统设置', path: '/settings', icon: Settings },
-]
-
 function isActive(path: string) {
   return route.path === path
 }
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index e0f37e1..452dcef 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-import router from './router'
+import router from './app/router'
 import App from './App.vue'
 import './style.css'
 
diff --git a/frontend/src/views/AgentView.vue b/frontend/src/pages/agents/index.vue
similarity index 89%
rename from frontend/src/views/AgentView.vue
rename to frontend/src/pages/agents/index.vue
index abb3773..bc8d088 100644
--- a/frontend/src/views/AgentView.vue
+++ b/frontend/src/pages/agents/index.vue
@@ -95,7 +95,7 @@
         :key="sub.id"
         :ref="el => setSubRef(sub.id, el as HTMLElement)"
         class="node-card node-sub"
-        :class="{ selected: selectedAgentId === sub.id, disabled: !sub.enabled }"
+        :class="{ selected: selectedAgentId === sub.id, disabled: !localAgents[sub.id]?.enabled }"
         :style="getSubNodeStyle(sub)"
         @click="selectAgent(sub.id)"
       >
@@ -217,7 +217,6 @@
 
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
-import { animate, type AnimationControls } from 'motion'
 import { RefreshCw, X, Plus } from 'lucide-vue-next'
 import { DEFAULT_AGENTS, RELATION_LABELS } from '@/data/agents'
 import type { Agent } from '@/data/agents'
@@ -232,22 +231,31 @@ const SUB_TOP = 350         // px from top
 const SUB_XS = [12.5, 37.5, 62.5, 87.5]
 
 // ── Sub-agent static data ────────────────────────────────────────
-const subAgents = [
-  { id: 'planner',   name: 'PLANNER',   role: '规划者', description: '制定任务计划，拆解复杂目标为可执行步骤', relLabel: RELATION_LABELS['master-planner'] },
-  { id: 'executor',  name: 'EXECUTOR',  role: '执行者', description: '调用工具执行具体操作，创建/更新/删除系统资源', relLabel: RELATION_LABELS['master-executor'] },
+interface SubAgentCard {
+  id: string
+  name: string
+  role: string
+  description: string
+  relLabel: string
+}
+
+const subAgents: SubAgentCard[] = [
+  { id: 'planner', name: 'PLANNER', role: '规划者', description: '制定任务计划，拆解复杂目标为可执行步骤', relLabel: RELATION_LABELS['master-planner'] },
+  { id: 'executor', name: 'EXECUTOR', role: '执行者', description: '调用工具执行具体操作，创建/更新/删除系统资源', relLabel: RELATION_LABELS['master-executor'] },
   { id: 'librarian', name: 'LIBRARIAN', role: '知识官', description: '管理知识库和知识图谱，检索相关信息，更新记忆', relLabel: RELATION_LABELS['master-librarian'] },
-  { id: 'analyst',   name: 'ANALYST',   role: '分析师', description: '分析工作数据，生成统计报告，提供洞察建议', relLabel: RELATION_LABELS['master-analyst'] },
+  { id: 'analyst', name: 'ANALYST', role: '分析师', description: '分析工作数据，生成统计报告，提供洞察建议', relLabel: RELATION_LABELS['master-analyst'] },
 ]
 
+type PlaybackHandle = ReturnType<typeof window.setTimeout>
+
 
 // ── Refs ────────────────────────────────────────────────────────
-const canvasRef = ref<HTMLElement>()
-const svgRef = ref<SVGElement>()
-const masterCardRef = ref<HTMLElement>()
+const canvasRef = ref<HTMLElement | null>(null)
+const svgRef = ref<SVGElement | null>(null)
+const masterCardRef = ref<HTMLElement | null>(null)
 const subRefs: Record<string, HTMLElement> = {}
-const masterAnim = ref<AnimationControls | null>(null)
-const subAnims: Record<string, AnimationControls> = {}
-const hoverAnims: Record<string, AnimationControls | null> = {}
+const cleanupFns: Array<() => void> = []
+const hoverResetTimers: Record<string, PlaybackHandle | null> = {}
 // Background particles
 const bgParticles = Array.from({ length: 60 }, (_, i) => {
   const d = 3 + Math.random() * 5
@@ -311,7 +319,7 @@ const masterNodeStyle = computed(() => {
   }
 })
 
-function getSubNodeStyle(sub: (typeof subAgents)[0]) {
+function getSubNodeStyle(sub: SubAgentCard) {
   const idx = subAgents.findIndex(s => s.id === sub.id)
   const pct = SUB_XS[idx] ?? 50
   const { x } = pxToSvg(pct, SUB_TOP)
@@ -419,30 +427,109 @@ async function refreshStats() {
 
 function onPulseEnd() { firingLine.value = null; activeLine.value = null }
 
+function stopTimer(timer: PlaybackHandle | null) {
+  if (timer) window.clearTimeout(timer)
+}
+
+function runTransition(
+  el: Element,
+  keyframes: Keyframe[],
+  options: KeyframeAnimationOptions,
+  done?: () => void,
+) {
+  const animation = (el as HTMLElement).animate(keyframes, {
+    fill: 'forwards',
+    ...options,
+  })
+
+  const finish = () => done?.()
+  animation.addEventListener('finish', finish, { once: true })
+  cleanupFns.push(() => animation.cancel())
+  return animation
+}
+
 // ── Motion helpers ───────────────────────────────────────────────
-function animateIn(el: Element) { animate(el, { opacity: [0, 1], x: [80, 0] }, { duration: 0.35, easing: [0.4, 0, 0.2, 1] }).play() }
-function animateOut(el: Element) { animate(el, { opacity: [1, 0], x: [0, 80] }, { duration: 0.25, easing: [0.4, 0, 1, 1] }).play() }
-function fadeIn(el: Element) { animate(el, { opacity: [0, 1] }, { duration: 0.25 }).play() }
-function fadeOut(el: Element) { animate(el, { opacity: [1, 0] }, { duration: 0.2 }).play() }
+function animateIn(el: Element, done: () => void) {
+  runTransition(
+    el,
+    [
+      { opacity: 0, transform: 'translateX(80px)' },
+      { opacity: 1, transform: 'translateX(0)' },
+    ],
+    { duration: 350, easing: 'cubic-bezier(0.4, 0, 0.2, 1)' },
+    done,
+  )
+}
+
+function animateOut(el: Element, done: () => void) {
+  runTransition(
+    el,
+    [
+      { opacity: 1, transform: 'translateX(0)' },
+      { opacity: 0, transform: 'translateX(80px)' },
+    ],
+    { duration: 250, easing: 'cubic-bezier(0.4, 0, 1, 1)' },
+    done,
+  )
+}
+
+function fadeIn(el: Element, done: () => void) {
+  runTransition(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 }, done)
+}
+
+function fadeOut(el: Element, done: () => void) {
+  runTransition(el, [{ opacity: 1 }, { opacity: 0 }], { duration: 200 }, done)
+}
 
 function playEntranceAnimations() {
   if (masterCardRef.value) {
-    masterAnim.value = animate(masterCardRef.value, { opacity: [0, 1], y: [20, 0] }, { duration: 0.6, easing: [0.16, 1, 0.3, 1] })
+    runTransition(
+      masterCardRef.value,
+      [
+        { opacity: 0, transform: 'translateY(20px)' },
+        { opacity: 1, transform: 'translateY(0)' },
+      ],
+      { duration: 600, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' },
+    )
   }
+
   subAgents.forEach((sub, idx) => {
     const el = subRefs[sub.id]
     if (!el) return
-    const anim = animate(el, { opacity: [0, 1], y: [20, 0] }, { duration: 0.5, delay: 0.15 + idx * 0.1, easing: [0.16, 1, 0.3, 1] })
-    subAnims[sub.id] = anim
-    const hoverAnim = animate(el, { y: [0, -4] }, { duration: 0.2, easing: [0.34, 1.56, 0.64, 1] })
-    hoverAnim.pause()
-    hoverAnims[sub.id] = hoverAnim
-    el.addEventListener('mouseenter', () => {
+
+    runTransition(
+      el,
+      [
+        { opacity: 0, transform: 'translateY(20px)' },
+        { opacity: 1, transform: 'translateY(0)' },
+      ],
+      {
+        duration: 500,
+        delay: 150 + idx * 100,
+        easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+      },
+    )
+
+    const handleMouseEnter = () => {
       if (!localAgents[sub.id]?.enabled) return
-      hoverAnim.direction = 'forward'; hoverAnim.play()
-    })
-    el.addEventListener('mouseleave', () => {
-      hoverAnim.direction = 'reverse'; hoverAnim.play()
+      stopTimer(hoverResetTimers[sub.id] ?? null)
+      el.style.transform = 'translateY(-4px)'
+    }
+
+    const handleMouseLeave = () => {
+      stopTimer(hoverResetTimers[sub.id] ?? null)
+      hoverResetTimers[sub.id] = window.setTimeout(() => {
+        el.style.transform = ''
+        hoverResetTimers[sub.id] = null
+      }, 200)
+    }
+
+    el.addEventListener('mouseenter', handleMouseEnter)
+    el.addEventListener('mouseleave', handleMouseLeave)
+    cleanupFns.push(() => {
+      stopTimer(hoverResetTimers[sub.id] ?? null)
+      el.removeEventListener('mouseenter', handleMouseEnter)
+      el.removeEventListener('mouseleave', handleMouseLeave)
     })
   })
 }
@@ -466,9 +553,7 @@ onMounted(async () => {
 onUnmounted(() => {
   if (pollInterval) clearInterval(pollInterval)
   resizeObserver?.disconnect()
-  masterAnim.value?.stop()
-  Object.values(subAnims).forEach(a => a.stop())
-  Object.values(hoverAnims).forEach(a => a?.stop())
+  cleanupFns.forEach(cleanup => cleanup())
 })
 </script>
 
diff --git a/frontend/src/views/LayoutView.vue b/frontend/src/pages/app/layout.vue
similarity index 100%
rename from frontend/src/views/LayoutView.vue
rename to frontend/src/pages/app/layout.vue
diff --git a/frontend/src/pages/chat/composables/useChatView.ts b/frontend/src/pages/chat/composables/useChatView.ts
new file mode 100644
index 0000000..e4a12e9
--- /dev/null
+++ b/frontend/src/pages/chat/composables/useChatView.ts
@@ -0,0 +1,210 @@
+import { nextTick, onMounted, ref } from 'vue'
+import { useConversationStore } from '@/stores/conversation'
+import { conversationApi, type Message } from '@/api/conversation'
+import { documentApi } from '@/api/document'
+
+export interface SelectedFile {
+  id: string
+  name: string
+  type: string
+  size: number
+}
+
+interface MessageWithAttachments extends Message {
+  attachments?: SelectedFile[]
+}
+
+export function useChatView() {
+  const store = useConversationStore()
+  const inputMessage = ref('')
+  const isSending = ref(false)
+  const chatContainer = ref<HTMLElement>()
+  const inputRef = ref<HTMLTextAreaElement>()
+  const isTyping = ref(false)
+  const fileInputRef = ref<HTMLInputElement>()
+  const showEmojiPicker = ref(false)
+  const selectedFiles = ref<SelectedFile[]>([])
+
+  async function sendMessage() {
+    if (!inputMessage.value.trim() || isSending.value) return
+
+    isSending.value = true
+    isTyping.value = true
+    const text = inputMessage.value.trim()
+    const attachments = [...selectedFiles.value]
+    inputMessage.value = ''
+
+    store.addMessage({
+      id: `temp-${Date.now()}`,
+      role: 'user',
+      content: text,
+      created_at: new Date().toISOString(),
+      attachments,
+    } as MessageWithAttachments)
+
+    await nextTick()
+    scrollToBottom()
+
+    try {
+      const response = await conversationApi.chat(text, store.currentConversationId || undefined, attachments.map((file) => file.id))
+      selectedFiles.value = []
+      isTyping.value = false
+      store.addMessage({
+        id: response.data.message_id,
+        role: 'assistant',
+        content: response.data.content,
+        model: response.data.agent_name,
+        created_at: new Date().toISOString(),
+      })
+      if (!store.currentConversationId) {
+        store.setCurrentConversation(response.data.conversation_id)
+        await loadConversations()
+      }
+    } catch (error) {
+      isTyping.value = false
+      console.error('发送失败:', error)
+      store.addMessage({
+        id: `err-${Date.now()}`,
+        role: 'assistant',
+        content: '抱歉，连接失败。请检查服务状态。',
+        created_at: new Date().toISOString(),
+      })
+    }
+
+    isSending.value = false
+    await nextTick()
+    scrollToBottom()
+  }
+
+  async function loadConversations() {
+    try {
+      const response = await conversationApi.list()
+      store.setConversations(response.data)
+    } catch (error) {
+      console.error('加载对话列表失败:', error)
+    }
+  }
+
+  async function selectConversation(id: string) {
+    store.setCurrentConversation(id)
+    store.setMessages([])
+    try {
+      const response = await conversationApi.getMessages(id)
+      store.setMessages(response.data)
+      await nextTick()
+      scrollToBottom()
+    } catch (error) {
+      console.error('加载消息失败:', error)
+    }
+  }
+
+  function newConversation() {
+    store.setCurrentConversation('')
+    store.setMessages([])
+    inputRef.value?.focus()
+  }
+
+  async function deleteConversation(id: string, event: Event) {
+    event.stopPropagation()
+    try {
+      await conversationApi.delete(id)
+      store.removeConversation(id)
+      if (store.currentConversationId === id) {
+        store.setCurrentConversation('')
+        store.setMessages([])
+      }
+    } catch (error) {
+      console.error('删除失败:', error)
+    }
+  }
+
+  function scrollToBottom() {
+    if (chatContainer.value) {
+      chatContainer.value.scrollTop = chatContainer.value.scrollHeight
+    }
+  }
+
+  function formatTime(dateStr: string) {
+    const date = new Date(dateStr)
+    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+  }
+
+  function formatConvDate(dateStr: string) {
+    const date = new Date(dateStr)
+    const now = new Date()
+    const diff = now.getTime() - date.getTime()
+    if (diff < 60000) return '刚刚'
+    if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
+    if (diff < 86400000) return '今天'
+    return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
+  }
+
+  function autoResize(event: Event) {
+    const element = event.target as HTMLTextAreaElement
+    element.style.height = 'auto'
+    element.style.height = `${Math.min(element.scrollHeight, 120)}px`
+  }
+
+  async function handleFileSelect(event: Event) {
+    const input = event.target as HTMLInputElement
+    if (!input.files?.length) return
+
+    for (const file of input.files) {
+      if (file.size > 10 * 1024 * 1024) {
+        alert(`文件 ${file.name} 超过10MB限制`)
+        continue
+      }
+      try {
+        const response = await documentApi.upload(file)
+        selectedFiles.value.push({
+          id: response.data.id,
+          name: file.name,
+          type: file.type,
+          size: file.size,
+        })
+      } catch (error) {
+        console.error('上传失败:', error)
+        alert(`文件 ${file.name} 上传失败`)
+      }
+    }
+    if (fileInputRef.value) {
+      fileInputRef.value.value = ''
+    }
+  }
+
+  function insertEmoji(emoji: string) {
+    inputMessage.value += emoji
+    showEmojiPicker.value = false
+  }
+
+  function openFilePicker() {
+    fileInputRef.value?.click()
+  }
+
+  onMounted(() => {
+    loadConversations()
+    inputRef.value?.focus()
+  })
+
+  return {
+    store,
+    inputMessage,
+    isSending,
+    chatContainer,
+    inputRef,
+    isTyping,
+    fileInputRef,
+    showEmojiPicker,
+    selectedFiles,
+    sendMessage,
+    selectConversation,
+    newConversation,
+    deleteConversation,
+    formatTime,
+    formatConvDate,
+    autoResize,
+    handleFileSelect,
+    insertEmoji,
+    openFilePicker,
+  }
+}
diff --git a/frontend/src/views/ChatView.vue b/frontend/src/pages/chat/index.vue
similarity index 79%
rename from frontend/src/views/ChatView.vue
rename to frontend/src/pages/chat/index.vue
index 67e18a3..dc8d002 100644
--- a/frontend/src/views/ChatView.vue
+++ b/frontend/src/pages/chat/index.vue
@@ -1,180 +1,29 @@
 <script setup lang="ts">
-import { ref, onMounted, nextTick, watch } from 'vue'
-import { useConversationStore } from '@/stores/conversation'
-import { conversationApi } from '@/api/conversation'
-import { documentApi } from '@/api/document'
 import { MessageCircle, Trash2, Send, Sparkles, CornerDownLeft, Paperclip, Smile } from 'lucide-vue-next'
 import EmojiPicker from '@/components/chat/EmojiPicker.vue'
 import FileMessage from '@/components/chat/FileMessage.vue'
+import { useChatView } from '@/pages/chat/composables/useChatView'
 
-const store = useConversationStore()
-const inputMessage = ref('')
-const isSending = ref(false)
-const chatContainer = ref<HTMLElement>()
-const inputRef = ref<HTMLTextAreaElement>()
-const isTyping = ref(false)
-const fileInputRef = ref<HTMLInputElement>()
-const showEmojiPicker = ref(false)
-const selectedFiles = ref<{ id: string; name: string; type: string; size: number }[]>([])
-
-async function sendMessage() {
-  if (!inputMessage.value.trim() || isSending.value) return
-
-  isSending.value = true
-  isTyping.value = true
-  const text = inputMessage.value.trim()
-  inputMessage.value = ''
-
-  store.addMessage({
-    id: `temp-${Date.now()}`,
-    role: 'user',
-    content: text,
-    created_at: new Date().toISOString(),
-  })
-
-  await nextTick()
-  scrollToBottom()
-
-  try {
-    const response = await conversationApi.chat(text, store.currentConversationId || undefined, selectedFiles.value.map(f => f.id))
-    selectedFiles.value = []
-    isTyping.value = false
-    store.addMessage({
-      id: response.data.message_id,
-      role: 'assistant',
-      content: response.data.content,
-      model: response.data.agent_name,
-      created_at: new Date().toISOString(),
-    })
-    if (!store.currentConversationId) {
-      store.setCurrentConversation(response.data.conversation_id)
-      await loadConversations()
-    }
-  } catch (e) {
-    isTyping.value = false
-    console.error('发送失败:', e)
-    store.addMessage({
-      id: `err-${Date.now()}`,
-      role: 'assistant',
-      content: '抱歉，连接失败。请检查服务状态。',
-      created_at: new Date().toISOString(),
-    })
-  }
-
-  isSending.value = false
-  await nextTick()
-  scrollToBottom()
-}
-
-async function loadConversations() {
-  try {
-    const response = await conversationApi.list()
-    store.setConversations(response.data)
-  } catch (e) {
-    console.error('加载对话列表失败:', e)
-  }
-}
-
-async function selectConversation(id: string) {
-  store.setCurrentConversation(id)
-  store.setMessages([])
-  try {
-    const response = await conversationApi.getMessages(id)
-    store.setMessages(response.data)
-    await nextTick()
-    scrollToBottom()
-  } catch (e) {
-    console.error('加载消息失败:', e)
-  }
-}
-
-async function newConversation() {
-  store.setCurrentConversation('')
-  store.setMessages([])
-  inputRef.value?.focus()
-}
-
-async function deleteConversation(id: string, e: Event) {
-  e.stopPropagation()
-  try {
-    await conversationApi.delete(id)
-    store.removeConversation(id)
-    if (store.currentConversationId === id) {
-      store.setCurrentConversation('')
-      store.setMessages([])
-    }
-  } catch (e) {
-    console.error('删除失败:', e)
-  }
-}
-
-function scrollToBottom() {
-  if (chatContainer.value) {
-    chatContainer.value.scrollTop = chatContainer.value.scrollHeight
-  }
-}
-
-function formatTime(dateStr: string) {
-  const d = new Date(dateStr)
-  return d.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
-}
-
-function formatConvDate(dateStr: string) {
-  const d = new Date(dateStr)
-  const now = new Date()
-  const diff = now.getTime() - d.getTime()
-  if (diff < 60000) return '刚刚'
-  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
-  if (diff < 86400000) return '今天'
-  return d.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
-}
-
-function autoResize(e: Event) {
-  const el = e.target as HTMLTextAreaElement
-  el.style.height = 'auto'
-  el.style.height = Math.min(el.scrollHeight, 120) + 'px'
-}
-
-async function handleFileSelect(e: Event) {
-  const input = e.target as HTMLInputElement
-  if (!input.files?.length) return
-
-  for (const file of input.files) {
-    if (file.size > 10 * 1024 * 1024) {
-      alert(`文件 ${file.name} 超过10MB限制`)
-      continue
-    }
-    try {
-      const response = await documentApi.upload(file)
-      selectedFiles.value.push({
-        id: response.data.id,
-        name: file.name,
-        type: file.type,
-        size: file.size,
-      })
-    } catch (e) {
-      console.error('上传失败:', e)
-      alert(`文件 ${file.name} 上传失败`)
-    }
-  }
-  if (fileInputRef.value) {
-    fileInputRef.value.value = ''
-  }
-}
-
-function insertEmoji(emoji: string) {
-  inputMessage.value += emoji
-  showEmojiPicker.value = false
-}
-
-function openFilePicker() {
-  fileInputRef.value?.click()
-}
-
-onMounted(() => {
-  loadConversations()
-  inputRef.value?.focus()
-})
+const {
+  store,
+  inputMessage,
+  isSending,
+  chatContainer,
+  inputRef,
+  isTyping,
+  fileInputRef,
+  showEmojiPicker,
+  sendMessage,
+  selectConversation,
+  newConversation,
+  deleteConversation,
+  formatTime,
+  formatConvDate,
+  autoResize,
+  handleFileSelect,
+  insertEmoji,
+  openFilePicker,
+} = useChatView()
 </script>
 
 <template>
@@ -272,7 +121,9 @@ onMounted(() => {
               <FileMessage
                 v-for="att in msg.attachments"
                 :key="att.id"
-                :file="att"
+                :filename="att.name"
+                :file-type="att.type"
+                :file-size="att.size"
               />
             </div>
           </div>
@@ -818,7 +669,9 @@ onMounted(() => {
   line-height: 1.6;
   resize: none;
   max-height: 120px;
-  padding: 0;
+  padding: 8px 0;
+  vertical-align: middle;
+  overflow: hidden;
 }
 
 .input-frame textarea::placeholder { color: var(--text-dim); }
diff --git a/frontend/src/views/ForumView.vue b/frontend/src/pages/forum/index.vue
similarity index 99%
rename from frontend/src/views/ForumView.vue
rename to frontend/src/pages/forum/index.vue
index 069dba9..e575816 100644
--- a/frontend/src/views/ForumView.vue
+++ b/frontend/src/pages/forum/index.vue
@@ -39,13 +39,13 @@ function formatDate(dateStr: string) {
   return d.toLocaleString('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
 }
 
-function getCategoryLabel(cat: string) {
+function getCategoryLabel(cat?: string) {
   const map: Record<string, { label: string; color: string }> = {
     discussion: { label: 'DISCUSSION', color: 'var(--accent-cyan)' },
     instruction: { label: 'INSTRUCTION', color: 'var(--accent-amber)' },
     question: { label: 'QUESTION', color: 'var(--accent-green)' },
   }
-  return map[cat] || map.discussion
+  return map[cat ?? 'discussion'] || map.discussion
 }
 
 onMounted(() => { loadPosts() })
diff --git a/frontend/src/views/GraphView.vue b/frontend/src/pages/graph/index.vue
similarity index 99%
rename from frontend/src/views/GraphView.vue
rename to frontend/src/pages/graph/index.vue
index c166ad3..c44403c 100644
--- a/frontend/src/views/GraphView.vue
+++ b/frontend/src/pages/graph/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, nextTick } from 'vue'
 import { graphApi } from '@/api/graph'
-import { Network, RefreshCw, Info, Maximize2, Hexagon } from 'lucide-vue-next'
+import { Network, RefreshCw, Info, Hexagon } from 'lucide-vue-next'
 import type { KGNode, KGEdge } from '@/api/graph'
 
 const nodes = ref<KGNode[]>([])
diff --git a/frontend/src/views/KanbanView.vue b/frontend/src/pages/kanban/index.vue
similarity index 100%
rename from frontend/src/views/KanbanView.vue
rename to frontend/src/pages/kanban/index.vue
diff --git a/frontend/src/pages/knowledge/composables/useKnowledgeView.ts b/frontend/src/pages/knowledge/composables/useKnowledgeView.ts
new file mode 100644
index 0000000..b3330ea
--- /dev/null
+++ b/frontend/src/pages/knowledge/composables/useKnowledgeView.ts
@@ -0,0 +1,344 @@
+import { computed, onMounted, ref } from 'vue'
+import { documentApi, type Document } from '@/api/document'
+import { folderApi, type FolderTree } from '@/api/folder'
+
+export function useKnowledgeView() {
+  const folders = ref<FolderTree[]>([])
+  const documents = ref<Document[]>([])
+  const currentFolderId = ref<string | null>(null)
+  const isUploading = ref(false)
+  const isLoadingDocuments = ref(false)
+  const uploadError = ref('')
+  const uploadInput = ref<HTMLInputElement | null>(null)
+
+  const showNewFolderDialog = ref(false)
+  const newFolderName = ref('')
+  const newFolderParentId = ref<string | null>(null)
+
+  const showRenameDialog = ref(false)
+  const renameFolderName = ref('')
+  const renamingFolder = ref<FolderTree | null>(null)
+
+  const showDeleteDialog = ref(false)
+  const deletingFolder = ref<FolderTree | null>(null)
+
+  const showDocumentDialog = ref(false)
+  const activeDocument = ref<Document | null>(null)
+  const activeDocumentContent = ref('')
+  const isLoadingDocumentContent = ref(false)
+
+  const folderMap = computed(() => {
+    const map = new Map<string, FolderTree>()
+
+    function walk(nodes: FolderTree[]) {
+      for (const node of nodes) {
+        map.set(node.id, node)
+        if (node.children?.length) {
+          walk(node.children)
+        }
+      }
+    }
+
+    walk(folders.value)
+    return map
+  })
+
+  const currentFolder = computed(() => {
+    if (!currentFolderId.value) return null
+    return folderMap.value.get(currentFolderId.value) ?? null
+  })
+
+  const isRoot = computed(() => currentFolderId.value === null)
+
+  const visibleFolders = computed(() => {
+    if (isRoot.value) return folders.value
+    return currentFolder.value?.children ?? []
+  })
+
+  const breadcrumbs = computed(() => {
+    const items: Array<{ id: string | null; name: string }> = [{ id: null, name: '根目录' }]
+
+    if (!currentFolder.value) {
+      return items
+    }
+
+    const chain: FolderTree[] = []
+    let cursor: FolderTree | null = currentFolder.value
+
+    while (cursor) {
+      chain.unshift(cursor)
+      cursor = cursor.parent_id ? folderMap.value.get(cursor.parent_id) ?? null : null
+    }
+
+    for (const folder of chain) {
+      items.push({ id: folder.id, name: folder.name })
+    }
+
+    return items
+  })
+
+  const explorerTitle = computed(() => {
+    if (isRoot.value) {
+      return `${visibleFolders.value.length} 个文件夹`
+    }
+
+    return `${visibleFolders.value.length} 个文件夹 · ${documents.value.length} 个文件`
+  })
+
+  async function loadFolders() {
+    try {
+      const response = await folderApi.getTree()
+      folders.value = response.data
+    } catch (error) {
+      console.error('加载文件夹失败:', error)
+    }
+  }
+
+  async function loadDocumentsByFolder(folderId: string | null) {
+    if (!folderId) {
+      documents.value = []
+      return
+    }
+
+    isLoadingDocuments.value = true
+    try {
+      const response = await documentApi.list(folderId)
+      documents.value = response.data
+    } catch (error) {
+      console.error('加载文档失败:', error)
+    } finally {
+      isLoadingDocuments.value = false
+    }
+  }
+
+  async function enterFolder(folder: FolderTree) {
+    currentFolderId.value = folder.id
+    await loadDocumentsByFolder(folder.id)
+  }
+
+  async function goToFolder(folderId: string | null) {
+    currentFolderId.value = folderId
+    await loadDocumentsByFolder(folderId)
+  }
+
+  async function goBack() {
+    if (!currentFolder.value) return
+    await goToFolder(currentFolder.value.parent_id)
+  }
+
+  function triggerUpload() {
+    if (isRoot.value) return
+    uploadInput.value?.click()
+  }
+
+  async function handleUpload(event: Event) {
+    const target = event.target as HTMLInputElement
+    const file = target.files?.[0]
+    if (!file) return
+
+    if (!currentFolderId.value) {
+      uploadError.value = '请先进入目标文件夹后再上传文件'
+      window.setTimeout(() => {
+        uploadError.value = ''
+      }, 3000)
+      target.value = ''
+      return
+    }
+
+    isUploading.value = true
+    try {
+      await documentApi.upload(file, currentFolderId.value)
+      await loadDocumentsByFolder(currentFolderId.value)
+    } catch (error) {
+      console.error('上传失败:', error)
+    } finally {
+      isUploading.value = false
+      target.value = ''
+    }
+  }
+
+  async function handleDeleteDocument(id: string) {
+    try {
+      await documentApi.delete(id)
+      documents.value = documents.value.filter((doc) => doc.id !== id)
+
+      if (activeDocument.value?.id === id) {
+        closeDocumentDialog()
+      }
+    } catch (error) {
+      console.error('删除失败:', error)
+    }
+  }
+
+  function openNewFolderDialog(parentId: string | null = null) {
+    newFolderParentId.value = parentId
+    newFolderName.value = ''
+    showNewFolderDialog.value = true
+  }
+
+  async function createFolder() {
+    if (!newFolderName.value.trim()) return
+
+    try {
+      await folderApi.create({
+        name: newFolderName.value.trim(),
+        parent_id: newFolderParentId.value,
+      })
+      await loadFolders()
+      showNewFolderDialog.value = false
+    } catch (error) {
+      console.error('创建文件夹失败:', error)
+    }
+  }
+
+  function openRenameDialog(folder: FolderTree) {
+    renamingFolder.value = folder
+    renameFolderName.value = folder.name
+    showRenameDialog.value = true
+  }
+
+  async function renameFolder() {
+    if (!renamingFolder.value || !renameFolderName.value.trim()) return
+
+    try {
+      await folderApi.rename(renamingFolder.value.id, { name: renameFolderName.value.trim() })
+      await loadFolders()
+      showRenameDialog.value = false
+      renamingFolder.value = null
+    } catch (error) {
+      console.error('重命名文件夹失败:', error)
+    }
+  }
+
+  function openDeleteDialog(folder: FolderTree) {
+    deletingFolder.value = folder
+    showDeleteDialog.value = true
+  }
+
+  function isFolderInTree(nodes: FolderTree[], targetId: string) {
+    for (const node of nodes) {
+      if (node.id === targetId) return true
+      if (node.children?.length && isFolderInTree(node.children, targetId)) return true
+    }
+    return false
+  }
+
+  async function deleteFolder() {
+    if (!deletingFolder.value) return
+
+    const deletingId = deletingFolder.value.id
+    const fallbackParentId = deletingFolder.value.parent_id
+
+    try {
+      await folderApi.delete(deletingId)
+      await loadFolders()
+
+      if (currentFolderId.value && !isFolderInTree(folders.value, currentFolderId.value)) {
+        currentFolderId.value = fallbackParentId
+      }
+
+      await loadDocumentsByFolder(currentFolderId.value)
+      showDeleteDialog.value = false
+      deletingFolder.value = null
+    } catch (error) {
+      console.error('删除文件夹失败:', error)
+    }
+  }
+
+  async function openDocument(doc: Document) {
+    activeDocument.value = doc
+    activeDocumentContent.value = ''
+    showDocumentDialog.value = true
+    isLoadingDocumentContent.value = true
+
+    try {
+      const response = await documentApi.getContent(doc.id)
+      const content = response.data as string | { content?: string }
+      activeDocumentContent.value = typeof content === 'string' ? content : content.content ?? ''
+    } catch (error) {
+      console.error('加载文档内容失败:', error)
+      activeDocumentContent.value = '暂时无法加载文档内容。'
+    } finally {
+      isLoadingDocumentContent.value = false
+    }
+  }
+
+  function closeDocumentDialog() {
+    showDocumentDialog.value = false
+    activeDocument.value = null
+    activeDocumentContent.value = ''
+  }
+
+  function getFileTypeColor(type: string) {
+    const colors: Record<string, string> = {
+      pdf: '#f87171',
+      md: '#60a5fa',
+      txt: '#34d399',
+      docx: '#a78bfa',
+    }
+    return colors[type] || '#9ca3af'
+  }
+
+  function formatFileSize(fileSize: number) {
+    if (fileSize < 1024) return `${fileSize} B`
+    if (fileSize < 1024 * 1024) return `${(fileSize / 1024).toFixed(1)} KB`
+    return `${(fileSize / (1024 * 1024)).toFixed(1)} MB`
+  }
+
+  function formatDate(date: string) {
+    return new Date(date).toLocaleDateString('zh-CN', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    })
+  }
+
+  onMounted(async () => {
+    await loadFolders()
+    await loadDocumentsByFolder(null)
+  })
+
+  return {
+    folders,
+    documents,
+    currentFolderId,
+    isUploading,
+    isLoadingDocuments,
+    uploadError,
+    uploadInput,
+    showNewFolderDialog,
+    newFolderName,
+    newFolderParentId,
+    showRenameDialog,
+    renameFolderName,
+    renamingFolder,
+    showDeleteDialog,
+    deletingFolder,
+    showDocumentDialog,
+    activeDocument,
+    activeDocumentContent,
+    isLoadingDocumentContent,
+    currentFolder,
+    isRoot,
+    visibleFolders,
+    breadcrumbs,
+    explorerTitle,
+    enterFolder,
+    goToFolder,
+    goBack,
+    triggerUpload,
+    handleUpload,
+    handleDeleteDocument,
+    openNewFolderDialog,
+    createFolder,
+    openRenameDialog,
+    renameFolder,
+    openDeleteDialog,
+    deleteFolder,
+    openDocument,
+    closeDocumentDialog,
+    getFileTypeColor,
+    formatFileSize,
+    formatDate,
+  }
+}
diff --git a/frontend/src/pages/knowledge/index.vue b/frontend/src/pages/knowledge/index.vue
new file mode 100644
index 0000000..ef7fe67
--- /dev/null
+++ b/frontend/src/pages/knowledge/index.vue
@@ -0,0 +1,1336 @@
+<script setup lang="ts">
+import {
+  ArrowLeft,
+  Database,
+  FileText,
+  Folder,
+  FolderPlus,
+  Loader,
+  Trash2,
+  Upload,
+  X,
+} from 'lucide-vue-next'
+import { useKnowledgeView } from '@/pages/knowledge/composables/useKnowledgeView'
+
+const {
+  documents,
+  currentFolderId,
+  isLoadingDocuments,
+  uploadError,
+  uploadInput,
+  showNewFolderDialog,
+  newFolderName,
+  newFolderParentId,
+  showRenameDialog,
+  renameFolderName,
+  showDeleteDialog,
+  deletingFolder,
+  showDocumentDialog,
+  activeDocument,
+  activeDocumentContent,
+  isLoadingDocumentContent,
+  isRoot,
+  visibleFolders,
+  breadcrumbs,
+  explorerTitle,
+  enterFolder,
+  goToFolder,
+  goBack,
+  triggerUpload,
+  handleUpload,
+  handleDeleteDocument,
+  openNewFolderDialog,
+  createFolder,
+  openRenameDialog,
+  renameFolder,
+  openDeleteDialog,
+  deleteFolder,
+  openDocument,
+  closeDocumentDialog,
+  getFileTypeColor,
+  formatFileSize,
+  formatDate,
+} = useKnowledgeView()
+</script>
+
+<template>
+  <div class="knowledge-view grid-bg scanlines">
+    <div class="page-header">
+      <div class="header-left">
+        <div class="header-icon"><Database :size="20" /></div>
+        <div class="header-text">
+          <h1>KNOWLEDGE BASE</h1>
+          <span class="header-sub">{{ explorerTitle }}</span>
+        </div>
+      </div>
+      <div class="header-actions">
+        <button class="btn" @click="openNewFolderDialog(currentFolderId)">
+          <FolderPlus :size="14" />
+          {{ isRoot ? '新建文件夹' : '新建子文件夹' }}
+        </button>
+        <button v-if="!isRoot" class="btn primary" @click="triggerUpload">
+          <Upload :size="14" /> 上传文件
+        </button>
+      </div>
+    </div>
+
+    <input
+      ref="uploadInput"
+      type="file"
+      class="hidden-upload"
+      accept=".pdf,.md,.txt,.docx"
+      @change="handleUpload"
+    />
+
+    <div class="explorer-shell holo-card">
+      <div class="toolbar">
+        <div class="toolbar-left">
+          <button class="nav-btn" :disabled="isRoot" @click="goBack">
+            <ArrowLeft :size="14" />
+          </button>
+          <div class="breadcrumbs">
+            <button
+              v-for="(crumb, index) in breadcrumbs"
+              :key="`${crumb.id ?? 'root'}-${index}`"
+              class="breadcrumb-item"
+              :class="{ active: crumb.id === currentFolderId || (crumb.id === null && isRoot) }"
+              @click="goToFolder(crumb.id)"
+            >
+              {{ crumb.name }}
+            </button>
+          </div>
+        </div>
+        <div class="toolbar-right">
+          <span class="location-tag">{{ isRoot ? 'ROOT' : 'FOLDER' }}</span>
+        </div>
+      </div>
+
+      <div v-if="uploadError" class="upload-error">
+        {{ uploadError }}
+      </div>
+
+      <div v-if="isLoadingDocuments" class="loading-strip">
+        <Loader :size="14" class="spin" />
+        <span>正在同步当前目录...</span>
+      </div>
+
+      <div class="explorer-grid">
+        <template v-if="visibleFolders.length || documents.length">
+          <button
+            v-for="folder in visibleFolders"
+            :key="folder.id"
+            class="explorer-tile folder-tile"
+            @click="enterFolder(folder)"
+          >
+            <div class="folder-activate-flash"></div>
+            <div class="tile-frame"></div>
+            <div class="folder-tech-corners">
+              <span class="corner corner-tl"></span>
+              <span class="corner corner-tr"></span>
+              <span class="corner corner-bl"></span>
+              <span class="corner corner-br"></span>
+            </div>
+            <div class="folder-scan"></div>
+            <div class="folder-grid-lines"></div>
+            <div class="tile-actions" @click.stop>
+              <button class="icon-btn" title="重命名文件夹" @click="openRenameDialog(folder)">
+                <FileText :size="12" />
+              </button>
+              <button class="icon-btn danger" title="删除文件夹" @click="openDeleteDialog(folder)">
+                <Trash2 :size="12" />
+              </button>
+            </div>
+            <div class="folder-glyph">
+              <div class="folder-pulse-ring"></div>
+              <div class="folder-core">
+                <Folder :size="42" />
+              </div>
+              <span class="folder-beam beam-a"></span>
+              <span class="folder-beam beam-b"></span>
+            </div>
+            <div class="folder-label-bar">
+              <div class="tile-name folder-title-name">{{ folder.name }}</div>
+            </div>
+            <div class="tile-meta folder-meta">{{ folder.children?.length ?? 0 }} 个子文件夹</div>
+          </button>
+
+          <button
+            v-for="doc in documents"
+            :key="doc.id"
+            class="explorer-tile file-tile"
+            @click="openDocument(doc)"
+          >
+            <div class="tile-frame"></div>
+            <div class="tile-actions" @click.stop>
+              <button class="icon-btn danger" title="删除文件" @click="handleDeleteDocument(doc.id)">
+                <Trash2 :size="12" />
+              </button>
+            </div>
+            <div class="file-badge" :style="{ color: getFileTypeColor(doc.file_type), borderColor: `${getFileTypeColor(doc.file_type)}55` }">
+              {{ doc.file_type.toUpperCase() }}
+            </div>
+            <div class="file-icon" :style="{ color: getFileTypeColor(doc.file_type) }">
+              <FileText :size="38" />
+            </div>
+            <div class="tile-name">{{ doc.title }}</div>
+            <div class="tile-meta">{{ formatFileSize(doc.file_size) }} · {{ formatDate(doc.created_at) }}</div>
+            <div class="tile-status" :class="doc.is_indexed ? 'indexed' : 'pending'">
+              {{ doc.is_indexed ? 'INDEXED' : 'INDEXING...' }}
+            </div>
+          </button>
+        </template>
+
+        <div v-else class="empty-state">
+          <div class="empty-core-shell">
+            <div class="empty-orbit orbit-outer"></div>
+            <div class="empty-orbit orbit-inner"></div>
+            <div class="empty-scanline"></div>
+            <div class="empty-core-glow"></div>
+            <div class="empty-folder-chamber">
+              <div class="empty-folder-plate"></div>
+              <div class="empty-folder-pulse"></div>
+              <div class="empty-folder-icon-wrap">
+                <Folder :size="54" />
+              </div>
+              <span class="empty-beam beam-left"></span>
+              <span class="empty-beam beam-right"></span>
+            </div>
+          </div>
+
+          <div class="empty-copy">
+            <span class="empty-kicker">{{ isRoot ? 'ARCHIVE CORE ONLINE' : 'FOLDER CHAMBER STANDBY' }}</span>
+            <span class="empty-title">{{ isRoot ? 'ROOT DIRECTORY EMPTY' : 'FOLDER IS READY FOR DEPLOYMENT' }}</span>
+            <span class="empty-sub">
+              {{ isRoot ? '当前知识库尚未初始化目录结构，请先创建第一个文件夹。' : '当前目录为空，可在此新建子文件夹或上传文件。' }}
+            </span>
+          </div>
+
+          <div class="empty-actions">
+            <button class="btn primary empty-cta" @click="openNewFolderDialog(currentFolderId)">
+              <FolderPlus :size="14" />
+              {{ isRoot ? '初始化知识仓库' : '新建子文件夹' }}
+            </button>
+            <button v-if="!isRoot" class="btn" @click="triggerUpload">
+              <Upload :size="14" /> 上传文件
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="showNewFolderDialog" class="dialog-overlay" @click.self="showNewFolderDialog = false">
+      <div class="dialog">
+        <div class="dialog-header">
+          <h3>{{ isRoot && newFolderParentId === null ? '新建文件夹' : '新建子文件夹' }}</h3>
+          <button class="close-btn" @click="showNewFolderDialog = false">
+            <X :size="16" />
+          </button>
+        </div>
+        <input
+          v-model="newFolderName"
+          class="dialog-input"
+          placeholder="文件夹名称"
+          @keyup.enter="createFolder"
+          autofocus
+        />
+        <div class="dialog-actions">
+          <button class="btn" @click="showNewFolderDialog = false">取消</button>
+          <button class="btn primary" @click="createFolder">创建</button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="showRenameDialog" class="dialog-overlay" @click.self="showRenameDialog = false">
+      <div class="dialog">
+        <div class="dialog-header">
+          <h3>重命名文件夹</h3>
+          <button class="close-btn" @click="showRenameDialog = false">
+            <X :size="16" />
+          </button>
+        </div>
+        <input
+          v-model="renameFolderName"
+          class="dialog-input"
+          placeholder="文件夹名称"
+          @keyup.enter="renameFolder"
+          autofocus
+        />
+        <div class="dialog-actions">
+          <button class="btn" @click="showRenameDialog = false">取消</button>
+          <button class="btn primary" @click="renameFolder">重命名</button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="showDeleteDialog" class="dialog-overlay" @click.self="showDeleteDialog = false">
+      <div class="dialog">
+        <div class="dialog-header">
+          <h3>删除文件夹</h3>
+          <button class="close-btn" @click="showDeleteDialog = false">
+            <X :size="16" />
+          </button>
+        </div>
+        <p class="dialog-body">
+          确定要删除文件夹「{{ deletingFolder?.name }}」吗？该操作不可恢复。
+        </p>
+        <div class="dialog-actions">
+          <button class="btn" @click="showDeleteDialog = false">取消</button>
+          <button class="btn danger" @click="deleteFolder">删除</button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="showDocumentDialog && activeDocument" class="dialog-overlay" @click.self="closeDocumentDialog()">
+      <div class="dialog document-dialog">
+        <div class="dialog-header">
+          <h3>{{ activeDocument.title }}</h3>
+          <button class="close-btn" @click="closeDocumentDialog()">
+            <X :size="16" />
+          </button>
+        </div>
+
+        <div class="document-info-row">
+          <span class="file-badge" :style="{ color: getFileTypeColor(activeDocument.file_type), borderColor: `${getFileTypeColor(activeDocument.file_type)}55` }">
+            {{ activeDocument.file_type.toUpperCase() }}
+          </span>
+          <span>{{ formatFileSize(activeDocument.file_size) }}</span>
+          <span>{{ activeDocument.chunk_count }} chunks</span>
+        </div>
+
+        <div class="document-preview">
+          <div v-if="isLoadingDocumentContent" class="preview-loading">
+            <Loader :size="16" class="spin" />
+            <span>加载文档内容中...</span>
+          </div>
+          <pre v-else>{{ activeDocumentContent || '暂无可预览内容。' }}</pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.knowledge-view {
+  height: 100%;
+  overflow-y: auto;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.header-icon {
+  color: var(--accent-cyan);
+  filter: drop-shadow(0 0 8px var(--accent-cyan));
+}
+
+h1 {
+  font-family: var(--font-display);
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: 0.15em;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.header-sub {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-dim);
+  letter-spacing: 0.1em;
+}
+
+.header-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.hidden-upload {
+  display: none;
+}
+
+.explorer-shell {
+  min-height: 620px;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 16px;
+  background: linear-gradient(180deg, rgba(0, 245, 212, 0.06), rgba(0, 245, 212, 0.02));
+  border: 1px solid var(--border-dim);
+  border-radius: var(--radius-lg);
+}
+
+.toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  flex: 1;
+}
+
+.nav-btn {
+  width: 34px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 245, 212, 0.08);
+  border: 1px solid var(--border-mid);
+  border-radius: var(--radius-md);
+  color: var(--accent-cyan);
+}
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.breadcrumb-item {
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.breadcrumb-item:hover,
+.breadcrumb-item.active {
+  color: var(--accent-cyan);
+  border-color: var(--border-mid);
+  background: rgba(0, 245, 212, 0.08);
+}
+
+.location-tag {
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border-mid);
+  color: var(--accent-cyan);
+  background: rgba(0, 245, 212, 0.08);
+  font-family: var(--font-display);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+}
+
+.upload-error,
+.loading-strip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: var(--radius-md);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.upload-error {
+  color: var(--accent-red);
+  background: rgba(255, 71, 87, 0.08);
+  border: 1px solid rgba(255, 71, 87, 0.2);
+}
+
+.loading-strip {
+  color: var(--accent-cyan);
+  background: rgba(0, 245, 212, 0.06);
+  border: 1px solid var(--border-dim);
+}
+
+.explorer-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
+  gap: 18px;
+  align-content: start;
+}
+
+.explorer-tile {
+  position: relative;
+  min-height: 220px;
+  padding: 18px 16px 16px;
+  border-radius: 20px;
+  border: 1px solid var(--border-dim);
+  background:
+    radial-gradient(circle at top, rgba(0, 245, 212, 0.08), transparent 45%),
+    linear-gradient(180deg, rgba(10, 15, 26, 0.92), rgba(13, 21, 37, 0.98));
+  color: var(--text-primary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  overflow: hidden;
+}
+
+.explorer-tile:hover {
+  border-color: var(--border-bright);
+  box-shadow: var(--glow-cyan);
+  transform: translateY(-2px);
+}
+
+.tile-frame {
+  position: absolute;
+  inset: 10px;
+  border: 1px solid rgba(0, 245, 212, 0.08);
+  border-radius: 16px;
+  pointer-events: none;
+}
+
+.tile-actions {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  gap: 6px;
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+
+.explorer-tile:hover .tile-actions {
+  opacity: 1;
+}
+
+.icon-btn {
+  width: 26px;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: rgba(0, 9, 19, 0.78);
+  border: 1px solid var(--border-dim);
+  color: var(--text-secondary);
+}
+
+.icon-btn:hover {
+  color: var(--accent-cyan);
+  border-color: var(--border-mid);
+  background: rgba(0, 245, 212, 0.1);
+}
+
+.icon-btn.danger:hover {
+  color: var(--accent-red);
+  border-color: rgba(255, 71, 87, 0.3);
+  background: rgba(255, 71, 87, 0.12);
+}
+
+.folder-tile {
+  text-align: center;
+}
+
+.folder-activate-flash,
+.folder-tech-corners,
+.folder-scan,
+.folder-grid-lines {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.folder-activate-flash {
+  opacity: 0;
+  background: radial-gradient(circle at center, rgba(124, 230, 255, 0.34), rgba(0, 245, 212, 0.14) 35%, transparent 68%);
+}
+
+.folder-tech-corners {
+  z-index: 1;
+}
+
+.folder-tech-corners .corner {
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  border-color: rgba(0, 245, 212, 0.22);
+  border-style: solid;
+  opacity: 0.75;
+  transition: all var(--transition-mid);
+}
+
+.folder-tech-corners .corner-tl {
+  top: 9px;
+  left: 9px;
+  border-width: 2px 0 0 2px;
+  border-top-left-radius: 10px;
+}
+
+.folder-tech-corners .corner-tr {
+  top: 9px;
+  right: 9px;
+  border-width: 2px 2px 0 0;
+  border-top-right-radius: 10px;
+}
+
+.folder-tech-corners .corner-bl {
+  bottom: 9px;
+  left: 9px;
+  border-width: 0 0 2px 2px;
+  border-bottom-left-radius: 10px;
+}
+
+.folder-tech-corners .corner-br {
+  bottom: 9px;
+  right: 9px;
+  border-width: 0 2px 2px 0;
+  border-bottom-right-radius: 10px;
+}
+
+.folder-scan,
+.folder-grid-lines {
+  opacity: 0;
+  transition: opacity var(--transition-mid);
+}
+
+.folder-scan {
+  background: linear-gradient(
+    115deg,
+    transparent 24%,
+    rgba(0, 245, 212, 0.04) 40%,
+    rgba(124, 230, 255, 0.18) 50%,
+    rgba(0, 245, 212, 0.04) 60%,
+    transparent 76%
+  );
+  transform: translateX(-130%);
+}
+
+.folder-grid-lines {
+  background:
+    linear-gradient(rgba(0, 245, 212, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 245, 212, 0.05) 1px, transparent 1px);
+  background-size: 18px 18px;
+  mix-blend-mode: screen;
+}
+
+.folder-tile:hover .folder-scan,
+.folder-tile:hover .folder-grid-lines {
+  opacity: 1;
+}
+
+.folder-tile:hover .folder-tech-corners .corner {
+  border-color: rgba(124, 230, 255, 0.7);
+  box-shadow: 0 0 10px rgba(0, 245, 212, 0.18);
+}
+
+.folder-tile:hover .corner-tl,
+.folder-tile:hover .corner-br {
+  transform: translate(1px, 1px);
+}
+
+.folder-tile:hover .corner-tr,
+.folder-tile:hover .corner-bl {
+  transform: translate(-1px, -1px);
+}
+
+.folder-tile:active .folder-activate-flash {
+  animation: activate-flash 320ms ease-out;
+}
+
+.folder-tile:hover .folder-scan {
+  animation: hologram-scan 1.4s ease-out forwards;
+}
+
+.folder-glyph {
+  position: relative;
+  margin-top: 22px;
+  width: 100px;
+  height: 94px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: folder-float 4.8s ease-in-out infinite;
+}
+
+.folder-pulse-ring {
+  position: absolute;
+  width: 108px;
+  height: 108px;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 245, 212, 0.16);
+  box-shadow: 0 0 18px rgba(0, 245, 212, 0.08);
+  animation: pulse-ring 3.2s ease-in-out infinite;
+}
+
+.folder-core {
+  width: 92px;
+  height: 78px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 22px;
+  color: #79d4ff;
+  background: linear-gradient(180deg, rgba(0, 245, 212, 0.16), rgba(123, 44, 191, 0.12));
+  border: 1px solid rgba(0, 245, 212, 0.22);
+  box-shadow:
+    inset 0 0 18px rgba(0, 245, 212, 0.08),
+    0 0 18px rgba(0, 245, 212, 0.12);
+  animation: core-breathe 3.4s ease-in-out infinite;
+}
+
+.folder-core svg {
+  filter: drop-shadow(0 0 6px rgba(124, 230, 255, 0.35));
+}
+
+.folder-beam {
+  position: absolute;
+  display: block;
+  width: 70px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(0, 245, 212, 0.85), transparent);
+  animation: beam-flicker 2.6s ease-in-out infinite;
+}
+
+.beam-a {
+  top: 18px;
+  left: -8px;
+}
+
+.beam-b {
+  right: -8px;
+  bottom: 20px;
+}
+
+.file-tile {
+  text-align: center;
+}
+
+.folder-label-bar {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  min-height: 34px;
+  padding: 8px 2px 0;
+  border-top: 1px solid rgba(0, 245, 212, 0.1);
+  position: relative;
+}
+
+.folder-label-bar::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: 2px;
+  width: 42px;
+  height: 1px;
+  background: linear-gradient(90deg, rgba(0, 245, 212, 0.85), transparent);
+}
+
+.folder-title-name {
+  text-align: left;
+}
+
+.folder-meta {
+  color: #84c7d6;
+}
+
+.folder-tile:hover .folder-label-bar {
+  border-top-color: rgba(124, 230, 255, 0.24);
+}
+
+.folder-tile:hover .folder-label-bar::before {
+  width: 64px;
+  background: linear-gradient(90deg, rgba(124, 230, 255, 0.95), transparent);
+}
+
+.folder-tile:hover .folder-title-name {
+  color: #f2fbff;
+}
+
+.file-badge {
+  margin-top: 8px;
+  padding: 3px 8px;
+  border: 1px solid;
+  border-radius: 999px;
+  font-family: var(--font-display);
+  font-size: 9px;
+  letter-spacing: 0.12em;
+}
+
+.file-icon {
+  margin-top: 22px;
+  min-height: 88px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  filter: drop-shadow(0 0 10px currentColor);
+}
+
+.tile-name {
+  width: 100%;
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--text-primary);
+  word-break: break-word;
+}
+
+.tile-meta {
+  width: 100%;
+  min-height: 30px;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  line-height: 1.5;
+}
+
+.tile-status {
+  margin-top: auto;
+  font-family: var(--font-display);
+  font-size: 9px;
+  letter-spacing: 0.12em;
+}
+
+.indexed {
+  color: var(--accent-green);
+}
+
+.pending {
+  color: var(--accent-amber);
+}
+
+.empty-state {
+  grid-column: 1 / -1;
+  min-height: 440px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  padding: 40px 24px;
+  border: 1px solid rgba(0, 245, 212, 0.12);
+  border-radius: 24px;
+  background:
+    radial-gradient(circle at center, rgba(0, 245, 212, 0.08), transparent 42%),
+    linear-gradient(180deg, rgba(8, 13, 24, 0.96), rgba(4, 8, 16, 0.98));
+  position: relative;
+  overflow: hidden;
+}
+
+.empty-state::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, transparent, rgba(0, 245, 212, 0.05), transparent),
+    radial-gradient(circle at top, rgba(123, 44, 191, 0.14), transparent 32%);
+  pointer-events: none;
+}
+
+.empty-core-shell {
+  position: relative;
+  width: 250px;
+  height: 250px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-orbit {
+  position: absolute;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 245, 212, 0.12);
+  box-shadow: inset 0 0 18px rgba(0, 245, 212, 0.04);
+}
+
+.orbit-outer {
+  width: 250px;
+  height: 250px;
+}
+
+.orbit-inner {
+  width: 184px;
+  height: 184px;
+  border-color: rgba(0, 245, 212, 0.18);
+}
+
+.empty-scanline {
+  position: absolute;
+  width: 180px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(0, 245, 212, 0.9), transparent);
+  box-shadow: 0 0 12px rgba(0, 245, 212, 0.5);
+  animation: float 3s ease-in-out infinite;
+}
+
+.empty-core-glow {
+  position: absolute;
+  width: 126px;
+  height: 126px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(0, 245, 212, 0.16), rgba(123, 44, 191, 0.08), transparent 70%);
+  filter: blur(6px);
+}
+
+.empty-folder-chamber {
+  position: relative;
+  width: 124px;
+  height: 124px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: folder-float 5.4s ease-in-out infinite;
+}
+
+.empty-folder-plate {
+  position: absolute;
+  inset: 14px;
+  border-radius: 28px;
+  border: 1px solid rgba(0, 245, 212, 0.22);
+  background: linear-gradient(180deg, rgba(0, 245, 212, 0.14), rgba(123, 44, 191, 0.14));
+  box-shadow:
+    inset 0 0 24px rgba(0, 245, 212, 0.08),
+    0 0 32px rgba(0, 245, 212, 0.12);
+}
+
+.empty-folder-pulse {
+  position: absolute;
+  width: 138px;
+  height: 138px;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 245, 212, 0.14);
+  box-shadow: 0 0 22px rgba(0, 245, 212, 0.08);
+  animation: pulse-ring 3.6s ease-in-out infinite;
+}
+
+.empty-folder-icon-wrap {
+  position: relative;
+  z-index: 1;
+  width: 92px;
+  height: 92px;
+  border-radius: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #7ce6ff;
+  background: rgba(3, 10, 18, 0.72);
+  border: 1px solid rgba(0, 245, 212, 0.16);
+  box-shadow: 0 0 24px rgba(0, 245, 212, 0.16);
+  animation: core-breathe 3.8s ease-in-out infinite;
+}
+
+.empty-folder-icon-wrap svg {
+  filter: drop-shadow(0 0 8px rgba(124, 230, 255, 0.45));
+}
+
+.empty-beam {
+  position: absolute;
+  width: 78px;
+  height: 1px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: linear-gradient(90deg, transparent, rgba(0, 245, 212, 0.95), transparent);
+  animation: beam-flicker 2.4s ease-in-out infinite;
+}
+
+.beam-left {
+  left: -34px;
+}
+
+.beam-right {
+  right: -34px;
+}
+
+.empty-copy {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  max-width: 560px;
+}
+
+.empty-kicker {
+  color: var(--accent-cyan);
+  font-family: var(--font-display);
+  font-size: 10px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+}
+
+.empty-title {
+  color: var(--text-primary);
+  font-family: var(--font-display);
+  font-size: 22px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.empty-sub {
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.8;
+}
+
+.empty-actions {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.empty-cta {
+  min-width: 188px;
+  justify-content: center;
+}
+
+@keyframes folder-float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-5px); }
+}
+
+@keyframes core-breathe {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.92;
+  }
+  50% {
+    transform: scale(1.04);
+    opacity: 1;
+  }
+}
+
+@keyframes pulse-ring {
+  0%, 100% {
+    transform: scale(0.92);
+    opacity: 0.35;
+  }
+  50% {
+    transform: scale(1.06);
+    opacity: 0.78;
+  }
+}
+
+@keyframes beam-flicker {
+  0%, 100% {
+    opacity: 0.35;
+    transform: translateY(-50%) scaleX(0.92);
+  }
+  50% {
+    opacity: 1;
+    transform: translateY(-50%) scaleX(1.06);
+  }
+}
+
+@keyframes hologram-scan {
+  0% {
+    transform: translateX(-130%);
+    opacity: 0;
+  }
+  20% {
+    opacity: 0.55;
+  }
+  100% {
+    transform: translateX(130%);
+    opacity: 0;
+  }
+}
+
+@keyframes activate-flash {
+  0% {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+  35% {
+    opacity: 0.95;
+    transform: scale(1.03);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.08);
+  }
+}
+
+.folder-tile:hover .folder-glyph,
+.folder-tile:hover .empty-folder-chamber {
+  animation-duration: 2.3s;
+}
+
+.folder-tile:hover .folder-core,
+.folder-tile:hover .folder-pulse-ring,
+.folder-tile:hover .empty-folder-icon-wrap,
+.folder-tile:hover .empty-folder-pulse {
+  animation-duration: 2s;
+}
+
+.folder-tile:hover .folder-beam,
+.folder-tile:hover .empty-beam {
+  animation-duration: 1.2s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .folder-glyph,
+  .folder-pulse-ring,
+  .folder-core,
+  .folder-beam,
+  .folder-scan,
+  .folder-tech-corners .corner,
+  .empty-folder-chamber,
+  .empty-folder-pulse,
+  .empty-folder-icon-wrap,
+  .empty-beam {
+    animation: none !important;
+  }
+}
+
+@media (max-width: 700px) {
+  .explorer-grid {
+    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+    gap: 14px;
+  }
+
+  .explorer-tile {
+    min-height: 204px;
+    padding: 16px 14px 14px;
+  }
+
+  .folder-glyph {
+    width: 90px;
+    height: 84px;
+    margin-top: 18px;
+  }
+
+  .folder-pulse-ring {
+    width: 96px;
+    height: 96px;
+  }
+
+  .folder-core {
+    width: 84px;
+    height: 72px;
+  }
+
+  .empty-core-shell {
+    width: 210px;
+    height: 210px;
+  }
+
+  .orbit-outer {
+    width: 210px;
+    height: 210px;
+  }
+
+  .orbit-inner {
+    width: 156px;
+    height: 156px;
+  }
+
+  .empty-title {
+    font-size: 18px;
+    letter-spacing: 0.12em;
+  }
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+.dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.dialog {
+  background: var(--bg-card);
+  border: 1px solid var(--border-mid);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  width: 400px;
+  max-width: 90vw;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.document-dialog {
+  width: min(860px, 92vw);
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  gap: 12px;
+}
+
+.dialog-header h3 {
+  font-family: var(--font-display);
+  font-size: 14px;
+  letter-spacing: 0.1em;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  transition: all var(--transition-fast);
+}
+
+.close-btn:hover {
+  color: var(--text-primary);
+  background: var(--bg-panel);
+}
+
+.dialog-input {
+  width: 100%;
+  padding: 10px 14px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border-dim);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 13px;
+  margin-bottom: 16px;
+  box-sizing: border-box;
+}
+
+.dialog-input:focus {
+  border-color: var(--accent-cyan);
+  outline: none;
+}
+
+.dialog-body {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0 0 16px 0;
+  line-height: 1.5;
+}
+
+.dialog-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.document-info-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  margin-bottom: 14px;
+}
+
+.document-preview {
+  min-height: 360px;
+  max-height: 62vh;
+  overflow: auto;
+  background: rgba(3, 5, 10, 0.7);
+  border: 1px solid var(--border-dim);
+  border-radius: 14px;
+  padding: 16px;
+}
+
+.document-preview pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+.preview-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--accent-cyan);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border-mid);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  font-family: var(--font-display);
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.btn:hover {
+  border-color: var(--border-mid);
+  background: var(--bg-card-hover);
+}
+
+.btn.primary {
+  background: var(--accent-cyan-dim);
+  border-color: rgba(0, 245, 212, 0.3);
+  color: var(--accent-cyan);
+}
+
+.btn.primary:hover {
+  background: rgba(0, 245, 212, 0.2);
+  box-shadow: var(--glow-cyan);
+}
+
+.btn.danger {
+  background: rgba(255, 71, 87, 0.1);
+  border-color: rgba(255, 71, 87, 0.3);
+  color: var(--accent-red);
+}
+
+.btn.danger:hover {
+  background: rgba(255, 71, 87, 0.2);
+  box-shadow: 0 0 12px rgba(255, 71, 87, 0.2);
+}
+
+@media (max-width: 900px) {
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .toolbar-left,
+  .toolbar-right {
+    width: 100%;
+  }
+
+  .toolbar-right {
+    display: flex;
+    justify-content: flex-start;
+  }
+}
+</style>
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/pages/login/index.vue
similarity index 100%
rename from frontend/src/views/LoginView.vue
rename to frontend/src/pages/login/index.vue
diff --git a/frontend/src/pages/settings/composables/useSettingsView.ts b/frontend/src/pages/settings/composables/useSettingsView.ts
new file mode 100644
index 0000000..30b1e2e
--- /dev/null
+++ b/frontend/src/pages/settings/composables/useSettingsView.ts
@@ -0,0 +1,314 @@
+import { computed, onMounted, ref } from 'vue'
+import { settingsApi, type LLMConfig, type LLMModelConfig, type LLMType, type SchedulerConfig } from '@/api/settings'
+
+type ToastState = {
+  show: boolean
+  message: string
+  type: 'success' | 'error'
+}
+
+type EditingSnapshot = {
+  type: string
+  index: number
+  data: LLMModelConfig
+}
+
+type ProfileState = {
+  email: string
+  full_name: string
+  created_at: string
+}
+
+function cloneLLMConfig(config: LLMConfig): LLMConfig {
+  return JSON.parse(JSON.stringify(config)) as LLMConfig
+}
+
+function cloneSchedulerConfig(config: SchedulerConfig): SchedulerConfig {
+  return JSON.parse(JSON.stringify(config)) as SchedulerConfig
+}
+
+function getErrorMessage(error: unknown, fallback: string) {
+  return (error as { response?: { data?: { detail?: string } } })?.response?.data?.detail || fallback
+}
+
+export function useSettingsView() {
+  const loading = ref(false)
+  const saving = ref(false)
+  const savingModel = ref<string | null>(null)
+  const toast = ref<ToastState>({
+    show: false,
+    message: '',
+    type: 'success',
+  })
+
+  const expandedRow = ref<string | null>(null)
+  const editingSnapshot = ref<EditingSnapshot | null>(null)
+
+  const profile = ref<ProfileState>({
+    email: '',
+    full_name: '',
+    created_at: '',
+  })
+  const originalProfile = ref({ email: '', full_name: '' })
+  const newPassword = ref('')
+
+  const llmConfig = ref<LLMConfig>({
+    chat: [],
+    vlm: [],
+    embedding: [],
+    rerank: [],
+  })
+  const originalLlmConfig = ref<LLMConfig>({
+    chat: [],
+    vlm: [],
+    embedding: [],
+    rerank: [],
+  })
+
+  const schedulerConfig = ref<SchedulerConfig>({
+    daily_plan_time: '08:00',
+    forum_scan_interval_minutes: 30,
+    todo_ai_generate_time: '08:00',
+    enabled: true,
+  })
+  const originalSchedulerConfig = ref<SchedulerConfig>({})
+
+  const showRequiredWarning = computed(() => {
+    return (llmConfig.value.chat?.length || 0) === 0 ||
+      (llmConfig.value.embedding?.length || 0) === 0 ||
+      (llmConfig.value.rerank?.length || 0) === 0
+  })
+
+  const isProfileDirty = computed(() => {
+    return profile.value.full_name !== originalProfile.value.full_name || newPassword.value !== ''
+  })
+
+  const isSchedulerDirty = computed(() => {
+    return JSON.stringify(schedulerConfig.value) !== JSON.stringify(originalSchedulerConfig.value)
+  })
+
+  function showToast(message: string, type: 'success' | 'error' = 'success') {
+    toast.value = { show: true, message, type }
+    window.setTimeout(() => {
+      toast.value.show = false
+    }, 3000)
+  }
+
+  function createEmptyModel(type: string): LLMModelConfig {
+    return {
+      name: `${type.toUpperCase()}-${Date.now()}`,
+      provider: 'openai',
+      model: type === 'chat'
+        ? 'gpt-4o'
+        : type === 'vlm'
+          ? 'gpt-4o'
+          : type === 'embedding'
+            ? 'text-embedding-3-small'
+            : 'bge-reranker-v2',
+      base_url: '',
+      api_key: '',
+      enabled: true,
+    }
+  }
+
+  function getRowKey(type: string, index: number): string {
+    return `${type}-${index}`
+  }
+
+  function addModel(type: string) {
+    if (!llmConfig.value[type as keyof LLMConfig]) {
+      llmConfig.value[type as keyof LLMConfig] = []
+    }
+
+    if ((type === 'embedding' || type === 'rerank') &&
+      llmConfig.value[type as keyof LLMConfig]!.length >= 1) {
+      showToast(`${type === 'embedding' ? 'Embedding' : 'Rerank'} 最多配置 1 个`, 'error')
+      return
+    }
+
+    const newModel = createEmptyModel(type)
+    llmConfig.value[type as keyof LLMConfig]!.push(newModel)
+    const newIndex = llmConfig.value[type as keyof LLMConfig]!.length - 1
+    expandedRow.value = getRowKey(type, newIndex)
+    editingSnapshot.value = { type, index: newIndex, data: JSON.parse(JSON.stringify(newModel)) as LLMModelConfig }
+  }
+
+  async function removeModel(type: string, index: number) {
+    if ((type === 'embedding' || type === 'rerank') &&
+      llmConfig.value[type as keyof LLMConfig]!.length <= 1) {
+      showToast(`${type === 'embedding' ? 'Embedding' : 'Rerank'} 为知识库必填，至少保留 1 个`, 'error')
+      return
+    }
+
+    llmConfig.value[type as keyof LLMConfig]!.splice(index, 1)
+    expandedRow.value = null
+    editingSnapshot.value = null
+
+    try {
+      await settingsApi.updateLLM(llmConfig.value)
+      originalLlmConfig.value = cloneLLMConfig(llmConfig.value)
+      showToast('删除成功')
+    } catch (error: unknown) {
+      showToast(getErrorMessage(error, '删除失败'), 'error')
+    }
+  }
+
+  function toggleRow(type: string, index: number, model: LLMModelConfig) {
+    const key = getRowKey(type, index)
+    if (expandedRow.value === key) {
+      expandedRow.value = null
+      editingSnapshot.value = null
+    } else {
+      editingSnapshot.value = { type, index, data: JSON.parse(JSON.stringify(model)) as LLMModelConfig }
+      expandedRow.value = key
+    }
+  }
+
+  function updateModel(type: string, index: number, model: LLMModelConfig) {
+    llmConfig.value[type as keyof LLMConfig]![index] = model
+  }
+
+  async function loadSettings() {
+    loading.value = true
+    try {
+      const response = await settingsApi.get()
+      profile.value = {
+        email: response.data.profile.email,
+        full_name: response.data.profile.full_name || '',
+        created_at: response.data.profile.created_at,
+      }
+      originalProfile.value = { email: profile.value.email, full_name: profile.value.full_name }
+
+      if (response.data.llm_config) {
+        llmConfig.value = {
+          chat: response.data.llm_config.chat || [],
+          vlm: response.data.llm_config.vlm || [],
+          embedding: response.data.llm_config.embedding || [],
+          rerank: response.data.llm_config.rerank || [],
+        }
+      } else {
+        llmConfig.value = { chat: [], vlm: [], embedding: [], rerank: [] }
+      }
+      originalLlmConfig.value = cloneLLMConfig(llmConfig.value)
+
+      if (response.data.scheduler_config && Object.keys(response.data.scheduler_config).length > 0) {
+        schedulerConfig.value = response.data.scheduler_config as SchedulerConfig
+      }
+      originalSchedulerConfig.value = cloneSchedulerConfig(schedulerConfig.value)
+    } catch (error) {
+      console.error('加载设置失败', error)
+      showToast('加载设置失败', 'error')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function saveProfile() {
+    saving.value = true
+    try {
+      await settingsApi.updateProfile({
+        full_name: profile.value.full_name,
+        password: newPassword.value || undefined,
+      })
+      originalProfile.value = { email: profile.value.email, full_name: profile.value.full_name }
+      newPassword.value = ''
+      showToast('资料保存成功')
+    } catch (error: unknown) {
+      showToast(getErrorMessage(error, '保存失败'), 'error')
+    } finally {
+      saving.value = false
+    }
+  }
+
+  async function saveModel(type: string, index: number, model: LLMModelConfig) {
+    const key = getRowKey(type, index)
+    llmConfig.value[type as keyof LLMConfig]![index] = JSON.parse(JSON.stringify(model)) as LLMModelConfig
+    savingModel.value = key
+
+    try {
+      await settingsApi.updateLLM(llmConfig.value)
+      originalLlmConfig.value = cloneLLMConfig(llmConfig.value)
+      expandedRow.value = null
+      editingSnapshot.value = null
+      showToast('保存成功')
+    } catch (error: unknown) {
+      showToast(getErrorMessage(error, '保存失败'), 'error')
+    } finally {
+      savingModel.value = null
+    }
+  }
+
+  async function testModel(type: string, index: number, model: LLMModelConfig) {
+    try {
+      const response = await settingsApi.testLLM({
+        type: type as LLMType,
+        provider: model.provider,
+        model: model.model,
+        base_url: model.base_url,
+        api_key: model.api_key,
+      })
+
+      if (response.data.success) {
+        llmConfig.value[type as keyof LLMConfig]![index].enabled = true
+        showToast('连接成功')
+      } else {
+        llmConfig.value[type as keyof LLMConfig]![index].enabled = false
+        showToast(`连接失败: ${response.data.error}`, 'error')
+      }
+    } catch (error) {
+      llmConfig.value[type as keyof LLMConfig]![index].enabled = false
+      showToast('测试连接失败', 'error')
+    }
+  }
+
+  async function saveScheduler() {
+    saving.value = true
+    try {
+      await settingsApi.updateScheduler(schedulerConfig.value)
+      originalSchedulerConfig.value = cloneSchedulerConfig(schedulerConfig.value)
+      showToast('定时任务配置保存成功')
+    } catch (error: unknown) {
+      showToast(getErrorMessage(error, '保存失败'), 'error')
+    } finally {
+      saving.value = false
+    }
+  }
+
+  function resetProfile() {
+    profile.value.full_name = originalProfile.value.full_name
+    newPassword.value = ''
+  }
+
+  function resetScheduler() {
+    schedulerConfig.value = cloneSchedulerConfig(originalSchedulerConfig.value)
+  }
+
+  onMounted(loadSettings)
+
+  return {
+    loading,
+    saving,
+    savingModel,
+    toast,
+    expandedRow,
+    editingSnapshot,
+    showRequiredWarning,
+    profile,
+    newPassword,
+    llmConfig,
+    schedulerConfig,
+    isProfileDirty,
+    isSchedulerDirty,
+    addModel,
+    removeModel,
+    getRowKey,
+    toggleRow,
+    updateModel,
+    saveProfile,
+    saveModel,
+    testModel,
+    saveScheduler,
+    resetProfile,
+    resetScheduler,
+  }
+}
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/pages/settings/index.vue
similarity index 60%
rename from frontend/src/views/SettingsView.vue
rename to frontend/src/pages/settings/index.vue
index a6cc0a4..b2597eb 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/pages/settings/index.vue
@@ -1,321 +1,32 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
-import { settingsApi, type LLMConfig, type SchedulerConfig, type LLMModelConfig, type LLMProvider } from '@/api/settings'
 import LLMTableRow from '@/components/settings/LLMTableRow.vue'
 import { Save, RotateCcw, Plus } from 'lucide-vue-next'
+import { useSettingsView } from '@/pages/settings/composables/useSettingsView'
 
-// 状态
-const loading = ref(false)
-const saving = ref(false)
-const savingModel = ref<string | null>(null) // 当前正在保存的模型 key
-const toast = ref<{ show: boolean; message: string; type: 'success' | 'error' }>({
-  show: false,
-  message: '',
-  type: 'success'
-})
-
-// 展开的行
-const expandedRow = ref<string | null>(null) // 'chat-0', 'vlm-0' 等
-
-// 当前正在编辑的模型快照（用于取消时恢复）
-const editingSnapshot = ref<{ type: string; index: number; data: LLMModelConfig } | null>(null)
-
-// 必填警告
-const showRequiredWarning = computed(() => {
-  return llmConfig.value.chat.length === 0 ||
-         llmConfig.value.embedding.length === 0 ||
-         llmConfig.value.rerank.length === 0
-})
-
-// 用户资料
-const profile = ref({
-  email: '',
-  full_name: '',
-  created_at: ''
-})
-const originalProfile = ref({ email: '', full_name: '' })
-const newPassword = ref('')
-
-// LLM 配置 - 每种类型支持多个模型
-const llmConfig = ref<LLMConfig>({
-  chat: [],
-  vlm: [],
-  embedding: [],
-  rerank: []
-})
-const originalLlmConfig = ref<LLMConfig>({
-  chat: [],
-  vlm: [],
-  embedding: [],
-  rerank: []
-})
-
-// 定时任务配置
-const schedulerConfig = ref<SchedulerConfig>({
-  daily_plan_time: '08:00',
-  forum_scan_interval_minutes: 30,
-  todo_ai_generate_time: '08:00',
-  enabled: true
-})
-const originalSchedulerConfig = ref<SchedulerConfig>({})
-
-// 是否有修改
-const isProfileDirty = computed(() => {
-  return profile.value.full_name !== originalProfile.value.full_name || newPassword.value !== ''
-})
-
-const isLlmDirty = computed(() => {
-  return JSON.stringify(llmConfig.value) !== JSON.stringify(originalLlmConfig.value)
-})
-
-const isSchedulerDirty = computed(() => {
-  return JSON.stringify(schedulerConfig.value) !== JSON.stringify(originalSchedulerConfig.value)
-})
-
-// 检查单个模型是否有未保存的更改
-function isModelDirty(type: string, index: number): boolean {
-  const original = originalLlmConfig.value[type as keyof LLMConfig]?.[index]
-  const current = llmConfig.value[type as keyof LLMConfig]?.[index]
-  if (!original || !current) return false
-  return JSON.stringify(original) !== JSON.stringify(current)
-}
-
-// 创建空的模型配置
-function createEmptyModel(type: string): LLMModelConfig {
-  return {
-    name: `${type.toUpperCase()}-${Date.now()}`,
-    provider: 'openai',
-    model: type === 'chat' ? 'gpt-4o' : type === 'vlm' ? 'gpt-4o' : type === 'embedding' ? 'text-embedding-3-small' : 'bge-reranker-v2',
-    base_url: '',
-    api_key: '',
-    enabled: true
-  }
-}
-
-// 添加模型
-function addModel(type: string) {
-  if (!llmConfig.value[type as keyof LLMConfig]) {
-    llmConfig.value[type as keyof LLMConfig] = []
-  }
-  // embedding/rerank 最多 1 个
-  if ((type === 'embedding' || type === 'rerank') &&
-      llmConfig.value[type as keyof LLMConfig]!.length >= 1) {
-    showToast(`${type === 'embedding' ? 'Embedding' : 'Rerank'} 最多配置 1 个`, 'error')
-    return
-  }
-  const newModel = createEmptyModel(type)
-  llmConfig.value[type as keyof LLMConfig]!.push(newModel)
-  // 自动展开新添加的行
-  const newIndex = llmConfig.value[type as keyof LLMConfig]!.length - 1
-  expandedRow.value = getRowKey(type, newIndex)
-  editingSnapshot.value = { type, index: newIndex, data: JSON.parse(JSON.stringify(newModel)) }
-}
-
-// 删除模型
-async function removeModel(type: string, index: number) {
-  // embedding/rerank 为知识库必填，至少保留 1 个
-  if ((type === 'embedding' || type === 'rerank') &&
-      llmConfig.value[type as keyof LLMConfig]!.length <= 1) {
-    showToast(`${type === 'embedding' ? 'Embedding' : 'Rerank'} 为知识库必填，至少保留 1 个`, 'error')
-    return
-  }
-  llmConfig.value[type as keyof LLMConfig]!.splice(index, 1)
-  expandedRow.value = null
-  editingSnapshot.value = null
-  // 自动保存到后端
-  try {
-    await settingsApi.updateLLM(llmConfig.value)
-    originalLlmConfig.value = JSON.parse(JSON.stringify(llmConfig.value))
-    showToast('删除成功')
-  } catch (e: unknown) {
-    const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '删除失败'
-    showToast(msg, 'error')
-  }
-}
-
-// 行标识
-function getRowKey(type: string, index: number): string {
-  return `${type}-${index}`
-}
-
-// 切换行展开
-function toggleRow(type: string, index: number, model: LLMModelConfig) {
-  const key = getRowKey(type, index)
-  if (expandedRow.value === key) {
-    expandedRow.value = null
-    editingSnapshot.value = null
-  } else {
-    // 保存快照用于取消
-    editingSnapshot.value = { type, index, data: JSON.parse(JSON.stringify(model)) }
-    expandedRow.value = key
-  }
-}
-
-// 取消编辑
-function cancelEdit(type: string, index: number) {
-  if (editingSnapshot.value && editingSnapshot.value.type === type && editingSnapshot.value.index === index) {
-    // 恢复原始数据
-    llmConfig.value[type as keyof LLMConfig]![index] = editingSnapshot.value.data
-  }
-  expandedRow.value = null
-  editingSnapshot.value = null
-}
-
-// 更新模型
-function updateModel(type: string, index: number, model: LLMModelConfig) {
-  llmConfig.value[type as keyof LLMConfig]![index] = model
-}
-
-// 加载设置
-async function loadSettings() {
-  loading.value = true
-  try {
-    const res = await settingsApi.get()
-    profile.value = {
-      email: res.data.profile.email,
-      full_name: res.data.profile.full_name || '',
-      created_at: res.data.profile.created_at
-    }
-    originalProfile.value = { ...profile.value }
-
-    // 加载 LLM 配置
-    if (res.data.llm_config) {
-      llmConfig.value = {
-        chat: res.data.llm_config.chat || [],
-        vlm: res.data.llm_config.vlm || [],
-        embedding: res.data.llm_config.embedding || [],
-        rerank: res.data.llm_config.rerank || []
-      }
-    } else {
-      llmConfig.value = { chat: [], vlm: [], embedding: [], rerank: [] }
-    }
-    originalLlmConfig.value = JSON.parse(JSON.stringify(llmConfig.value))
-
-    if (res.data.scheduler_config && Object.keys(res.data.scheduler_config).length > 0) {
-      schedulerConfig.value = res.data.scheduler_config as SchedulerConfig
-    }
-    originalSchedulerConfig.value = JSON.parse(JSON.stringify(schedulerConfig.value))
-  } catch (e) {
-    console.error('加载设置失败', e)
-    showToast('加载设置失败', 'error')
-  } finally {
-    loading.value = false
-  }
-}
-
-// 保存资料
-async function saveProfile() {
-  saving.value = true
-  try {
-    await settingsApi.updateProfile({
-      full_name: profile.value.full_name,
-      password: newPassword.value || undefined
-    })
-    originalProfile.value = { email: profile.value.email, full_name: profile.value.full_name }
-    newPassword.value = ''
-    showToast('资料保存成功')
-  } catch (e: unknown) {
-    const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '保存失败'
-    showToast(msg, 'error')
-  } finally {
-    saving.value = false
-  }
-}
-
-// 保存 LLM 配置
-async function saveLLM() {
-  saving.value = true
-  try {
-    await settingsApi.updateLLM(llmConfig.value)
-    originalLlmConfig.value = JSON.parse(JSON.stringify(llmConfig.value))
-    showToast('LLM 配置保存成功')
-  } catch (e: unknown) {
-    const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '保存失败'
-    showToast(msg, 'error')
-  } finally {
-    saving.value = false
-  }
-}
-
-// 保存单个模型
-async function saveModel(type: string, index: number) {
-  const key = getRowKey(type, index)
-  savingModel.value = key
-  try {
-    // 发送完整的配置（包含该类型的所有模型）
-    await settingsApi.updateLLM(llmConfig.value)
-
-    // 更新原始配置（深拷贝当前完整配置）
-    originalLlmConfig.value = JSON.parse(JSON.stringify(llmConfig.value))
-
-    // 关闭展开的行
-    expandedRow.value = null
-    editingSnapshot.value = null
-    showToast('保存成功')
-  } catch (e: unknown) {
-    const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '保存失败'
-    showToast(msg, 'error')
-  } finally {
-    savingModel.value = null
-  }
-}
-
-// 测试 LLM 连接
-async function testModel(type: string, index: number, model: LLMModelConfig) {
-  try {
-    const res = await settingsApi.testLLM({ type: type as any, ...model })
-    if (res.data.success) {
-      // 测试通过，标记为可用
-      llmConfig.value[type as keyof LLMConfig]![index].enabled = true
-      showToast('连接成功')
-    } else {
-      llmConfig.value[type as keyof LLMConfig]![index].enabled = false
-      showToast(`连接失败: ${res.data.error}`, 'error')
-    }
-  } catch (e) {
-    llmConfig.value[type as keyof LLMConfig]![index].enabled = false
-    showToast('测试连接失败', 'error')
-  }
-}
-
-// 保存定时任务配置
-async function saveScheduler() {
-  saving.value = true
-  try {
-    await settingsApi.updateScheduler(schedulerConfig.value)
-    originalSchedulerConfig.value = JSON.parse(JSON.stringify(schedulerConfig.value))
-    showToast('定时任务配置保存成功')
-  } catch (e: unknown) {
-    const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '保存失败'
-    showToast(msg, 'error')
-  } finally {
-    saving.value = false
-  }
-}
-
-// 重置表单
-function resetProfile() {
-  profile.value.full_name = originalProfile.value.full_name
-  newPassword.value = ''
-}
-
-function resetLLM() {
-  llmConfig.value = JSON.parse(JSON.stringify(originalLlmConfig.value))
-}
-
-function resetScheduler() {
-  schedulerConfig.value = JSON.parse(JSON.stringify(originalSchedulerConfig.value))
-}
-
-// Toast 提示
-function showToast(message: string, type: 'success' | 'error' = 'success') {
-  toast.value = { show: true, message, type }
-  setTimeout(() => {
-    toast.value.show = false
-  }, 3000)
-}
-
-onMounted(loadSettings)
+const {
+  loading,
+  saving,
+  toast,
+  expandedRow,
+  showRequiredWarning,
+  profile,
+  newPassword,
+  llmConfig,
+  schedulerConfig,
+  isProfileDirty,
+  isSchedulerDirty,
+  addModel,
+  removeModel,
+  getRowKey,
+  toggleRow,
+  updateModel,
+  saveProfile,
+  saveModel,
+  testModel,
+  saveScheduler,
+  resetProfile,
+  resetScheduler,
+} = useSettingsView()
 </script>
 
 <template>
@@ -403,7 +114,7 @@ onMounted(loadSettings)
                 @update="(m) => updateModel('chat', index, m)"
                 @delete="removeModel('chat', index)"
                 @test="(m) => testModel('chat', index, m)"
-                @save="(m) => saveModel('chat', index)"
+                @save="(m) => saveModel('chat', index, m)"
               />
             </div>
           </div>
@@ -427,7 +138,7 @@ onMounted(loadSettings)
                 @update="(m) => updateModel('vlm', index, m)"
                 @delete="removeModel('vlm', index)"
                 @test="(m) => testModel('vlm', index, m)"
-                @save="(m) => saveModel('vlm', index)"
+                @save="(m) => saveModel('vlm', index, m)"
               />
             </div>
           </div>
@@ -451,7 +162,7 @@ onMounted(loadSettings)
                 @update="(m) => updateModel('embedding', index, m)"
                 @delete="removeModel('embedding', index)"
                 @test="(m) => testModel('embedding', index, m)"
-                @save="(m) => saveModel('embedding', index)"
+                @save="(m) => saveModel('embedding', index, m)"
               />
             </div>
           </div>
@@ -475,7 +186,7 @@ onMounted(loadSettings)
                 @update="(m) => updateModel('rerank', index, m)"
                 @delete="removeModel('rerank', index)"
                 @test="(m) => testModel('rerank', index, m)"
-                @save="(m) => saveModel('rerank', index)"
+                @save="(m) => saveModel('rerank', index, m)"
               />
             </div>
           </div>
diff --git a/frontend/src/views/SkillView.vue b/frontend/src/pages/skills/index.vue
similarity index 97%
rename from frontend/src/views/SkillView.vue
rename to frontend/src/pages/skills/index.vue
index 8428d7d..a350a2e 100644
--- a/frontend/src/views/SkillView.vue
+++ b/frontend/src/pages/skills/index.vue
@@ -1,5 +1,27 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+
+function animateIn(el: Element, done: () => void) {
+  const target = el as HTMLElement
+  target.animate(
+    [
+      { opacity: '0', transform: 'translateY(12px)' },
+      { opacity: '1', transform: 'translateY(0)' },
+    ],
+    { duration: 220, easing: 'ease-out', fill: 'forwards' },
+  ).finished.finally(done)
+}
+
+function animateOut(el: Element, done: () => void) {
+  const target = el as HTMLElement
+  target.animate(
+    [
+      { opacity: '1', transform: 'translateY(0)' },
+      { opacity: '0', transform: 'translateY(12px)' },
+    ],
+    { duration: 180, easing: 'ease-in', fill: 'forwards' },
+  ).finished.finally(done)
+}
 import { skillApi, type Skill, type SkillCreate } from '@/api/skill'
 import { Bot, Plus, Edit2, Trash2, Eye, EyeOff, Copy, X } from 'lucide-vue-next'
 
diff --git a/frontend/src/views/StatsView.vue b/frontend/src/pages/stats/index.vue
similarity index 91%
rename from frontend/src/views/StatsView.vue
rename to frontend/src/pages/stats/index.vue
index 2960b38..eaf40d6 100644
--- a/frontend/src/views/StatsView.vue
+++ b/frontend/src/pages/stats/index.vue
@@ -2,12 +2,16 @@
 import { ref, onMounted, computed } from 'vue'
 import * as statsApi from '@/api/stats'
 import { Cpu, HardDrive, MemoryStick, Clock, TrendingUp, Tag } from 'lucide-vue-next'
+
+const reloadPage = () => globalThis.location.reload()
 import SectionHeader from '@/components/stats/SectionHeader.vue'
 import MetricCard from '@/components/stats/MetricCard.vue'
-import SummaryRow from '@/components/stats/SummaryRow.vue'
 import MiniLineChart from '@/components/stats/MiniLineChart.vue'
 import MiniBarChart from '@/components/stats/MiniBarChart.vue'
 
+type DailyPoint = { date: string; count: number }
+type HourlyPoint = { hour: number; count: number }
+
 const isLoading = ref(true)
 const hasError = ref(false)
 
@@ -63,27 +67,31 @@ onMounted(async () => {
 
 // 图表数据转换
 const convChartData = computed(() =>
-  conversationStats.value?.daily_conversations?.map((d: any) => ({ date: d.date, value: d.count })) || []
+  conversationStats.value?.daily_conversations?.map((d: DailyPoint) => ({ date: d.date, value: d.count })) || []
 )
 
 const knowChartData = computed(() =>
-  knowledgeStats.value?.daily_new_tags?.map((d: any) => ({ date: d.date, value: d.count })) || []
+  knowledgeStats.value?.daily_new_tags?.map((d: DailyPoint) => ({ date: d.date, value: d.count })) || []
 )
 
 const kanbanNewData = computed(() =>
-  kanbanStats.value?.daily_new_tasks?.map((d: any) => d.count) || []
+  kanbanStats.value?.daily_new_tasks?.map((d: DailyPoint) => d.count) || []
 )
 const kanbanDoneData = computed(() =>
-  kanbanStats.value?.daily_completed_tasks?.map((d: any) => d.count) || []
+  kanbanStats.value?.daily_completed_tasks?.map((d: DailyPoint) => d.count) || []
 )
 
 const communityChartData = computed(() =>
-  communityStats.value?.daily_posts?.map((d: any) => ({ date: d.date, value: d.count })) || []
+  communityStats.value?.daily_posts?.map((d: DailyPoint) => ({ date: d.date, value: d.count })) || []
 )
 
 const hourlyActivityData = computed(() =>
-  personalInsights.value?.hourly_activity?.map((h: any) => h.count) || []
+  personalInsights.value?.hourly_activity?.map((h: HourlyPoint) => h.count) || []
 )
+
+const convBarValues = computed(() => convChartData.value.map((d: { date: string; value: number }) => d.value))
+const knowBarValues = computed(() => knowChartData.value.map((d: { date: string; value: number }) => d.value))
+const communityBarValues = computed(() => communityChartData.value.map((d: { date: string; value: number }) => d.value))
 </script>
 
 <template>
@@ -99,7 +107,7 @@ const hourlyActivityData = computed(() =>
 
     <div v-else-if="hasError" class="error-state">
       <span>Failed to load stats</span>
-      <button @click="() => window.location.reload()">Refresh</button>
+      <button @click="reloadPage">Refresh</button>
     </div>
 
     <div v-else class="stats-content">
@@ -142,14 +150,14 @@ const hourlyActivityData = computed(() =>
             <div class="stat-bar-label">对话数</div>
             <div class="stat-bar-value">{{ formatNumber(conversationStats?.totals?.conversations || 0) }}</div>
             <div class="stat-bar-chart">
-              <MiniBarChart v-if="convChartData.length > 0" :data="convChartData.map(d => d.value)" color="var(--accent-cyan)" :height="30" />
+              <MiniBarChart v-if="convChartData.length > 0" :data="convBarValues" color="var(--accent-cyan)" :height="30" />
             </div>
           </div>
           <div class="stat-bar-item">
             <div class="stat-bar-label">消息数</div>
             <div class="stat-bar-value">{{ formatNumber(conversationStats?.totals?.messages || 0) }}</div>
             <div class="stat-bar-chart">
-              <MiniBarChart v-if="convChartData.length > 0" :data="convChartData.map(d => d.value)" color="var(--accent-purple)" :height="30" />
+              <MiniBarChart v-if="convChartData.length > 0" :data="convBarValues" color="var(--accent-purple)" :height="30" />
             </div>
           </div>
           <div class="stat-bar-item">
@@ -177,14 +185,14 @@ const hourlyActivityData = computed(() =>
             <div class="stat-bar-label">新标签</div>
             <div class="stat-bar-value">{{ formatNumber(knowledgeStats?.totals?.new_tags || 0) }}</div>
             <div class="stat-bar-chart">
-              <MiniBarChart v-if="knowChartData.length > 0" :data="knowChartData.map(d => d.value)" color="var(--accent-purple)" :height="30" />
+              <MiniBarChart v-if="knowChartData.length > 0" :data="knowBarValues" color="var(--accent-purple)" :height="30" />
             </div>
           </div>
           <div class="stat-bar-item">
             <div class="stat-bar-label">文档数</div>
             <div class="stat-bar-value">{{ formatNumber(knowledgeStats?.totals?.documents || 0) }}</div>
             <div class="stat-bar-chart">
-              <MiniBarChart v-if="knowChartData.length > 0" :data="knowChartData.map(d => d.value)" color="var(--accent-cyan)" :height="30" />
+              <MiniBarChart v-if="knowChartData.length > 0" :data="knowBarValues" color="var(--accent-cyan)" :height="30" />
             </div>
           </div>
           <div class="stat-bar-item">
@@ -233,14 +241,14 @@ const hourlyActivityData = computed(() =>
             <div class="stat-bar-label">帖子数</div>
             <div class="stat-bar-value">{{ formatNumber(communityStats?.totals?.posts || 0) }}</div>
             <div class="stat-bar-chart">
-              <MiniBarChart v-if="communityChartData.length > 0" :data="communityChartData.map(d => d.value)" color="var(--accent-amber)" :height="30" />
+              <MiniBarChart v-if="communityChartData.length > 0" :data="communityBarValues" color="var(--accent-amber)" :height="30" />
             </div>
           </div>
           <div class="stat-bar-item">
             <div class="stat-bar-label">回复数</div>
             <div class="stat-bar-value">{{ formatNumber(communityStats?.totals?.replies || 0) }}</div>
             <div class="stat-bar-chart">
-              <MiniBarChart v-if="communityChartData.length > 0" :data="communityChartData.map(d => d.value)" color="var(--accent-purple)" :height="30" />
+              <MiniBarChart v-if="communityChartData.length > 0" :data="communityBarValues" color="var(--accent-purple)" :height="30" />
             </div>
           </div>
           <div class="stat-bar-item">
diff --git a/frontend/src/views/TodoView.vue b/frontend/src/pages/todo/index.vue
similarity index 100%
rename from frontend/src/views/TodoView.vue
rename to frontend/src/pages/todo/index.vue
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 3dae3ea..69dda4d 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,83 +1,10 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
-import { Terminal } from 'lucide-vue-next'
+import { routes } from '@/app/router/routes'
 
 const router = createRouter({
   history: createWebHistory(),
-  routes: [
-    {
-      path: '/login',
-      name: 'login',
-      component: () => import('@/views/LoginView.vue'),
-      meta: { guest: true },
-    },
-    {
-      path: '/',
-      component: () => import('@/views/LayoutView.vue'),
-      meta: { requiresAuth: true },
-      children: [
-        {
-          path: '',
-          redirect: '/chat',
-        },
-        {
-          path: 'chat',
-          name: 'chat',
-          component: () => import('@/views/ChatView.vue'),
-        },
-        {
-          path: 'knowledge',
-          name: 'knowledge',
-          component: () => import('@/views/KnowledgeView.vue'),
-        },
-        {
-          path: 'graph',
-          name: 'graph',
-          component: () => import('@/views/GraphView.vue'),
-        },
-        {
-          path: 'kanban',
-          name: 'kanban',
-          component: () => import('@/views/KanbanView.vue'),
-        },
-        {
-          path: 'forum',
-          name: 'forum',
-          component: () => import('@/views/ForumView.vue'),
-        },
-        {
-          path: 'agents',
-          name: 'agents',
-          component: () => import('@/views/AgentView.vue'),
-        },
-        {
-          path: 'stats',
-          name: 'stats',
-          component: () => import('@/views/StatsView.vue'),
-        },
-        {
-          path: 'skills',
-          name: 'skills',
-          component: () => import('@/views/SkillView.vue'),
-        },
-        {
-          path: 'todo',
-          name: 'todo',
-          component: () => import('@/views/TodoView.vue'),
-        },
-        {
-          path: 'settings',
-          name: 'settings',
-          component: () => import('@/views/SettingsView.vue'),
-        },
-        {
-          path: 'logs',
-          name: 'logs',
-          component: () => import('@/views/LogView.vue'),
-        },
-      ],
-    },
-  ],
+  routes,
 })
 
 router.beforeEach((to, _from, next) => {
diff --git a/frontend/src/views/KnowledgeView.vue b/frontend/src/views/KnowledgeView.vue
deleted file mode 100644
index baf4491..0000000
--- a/frontend/src/views/KnowledgeView.vue
+++ /dev/null
@@ -1,1022 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { documentApi } from '@/api/document'
-import { folderApi, type FolderTree } from '@/api/folder'
-import FolderTreeComponent from '@/components/FolderTree.vue'
-import {
-  Upload, Search, FileText, Trash2, Loader, Database, Layers, Zap,
-  Folder, FolderPlus, Edit2, Trash2 as Trash2Icon, Plus, X
-} from 'lucide-vue-next'
-import type { Document, SearchResult } from '@/api/document'
-
-// Documents
-const documents = ref<Document[]>([])
-const searchQuery = ref('')
-const searchMode = ref('hybrid')
-const searchResults = ref<SearchResult[]>([])
-const isUploading = ref(false)
-const isSearching = ref(false)
-
-// Folders
-const folders = ref<FolderTree[]>([])
-const selectedFolderId = ref<string | null>(null)
-
-// New folder dialog
-const showNewFolderDialog = ref(false)
-const newFolderName = ref('')
-const newFolderParentId = ref<string | null>(null)
-
-// Rename dialog
-const showRenameDialog = ref(false)
-const renameFolderName = ref('')
-const renamingFolder = ref<FolderTree | null>(null)
-
-// Delete dialog
-const showDeleteDialog = ref(false)
-const deletingFolder = ref<FolderTree | null>(null)
-
-// Upload validation
-const uploadError = ref('')
-
-// Load folder tree
-async function loadFolders() {
-  try {
-    const res = await folderApi.getTree()
-    folders.value = res.data
-  } catch (e) {
-    console.error('加载文件夹失败:', e)
-  }
-}
-
-// Select a folder and load its documents
-function onSelectFolder(folder: FolderTree) {
-  selectedFolderId.value = folder.id
-  loadDocumentsByFolder(folder.id)
-}
-
-// Load all documents (no folder selected)
-async function loadAllDocuments() {
-  selectedFolderId.value = null
-  await loadDocuments()
-}
-
-// Load documents in a specific folder
-async function loadDocumentsByFolder(folderId: string) {
-  try {
-    const response = await documentApi.list(folderId)
-    documents.value = response.data
-  } catch (e) {
-    console.error('加载文档失败:', e)
-  }
-}
-
-// Load all documents
-async function loadDocuments() {
-  try {
-    const response = await documentApi.list()
-    documents.value = response.data
-  } catch (e) {
-    console.error('加载文档失败:', e)
-  }
-}
-
-// Handle upload - requires folder selection
-async function handleUpload(event: Event) {
-  const target = event.target as HTMLInputElement
-  const file = target.files?.[0]
-  if (!file) return
-
-  if (!selectedFolderId.value) {
-    uploadError.value = '请先在左侧选择目标文件夹'
-    setTimeout(() => { uploadError.value = '' }, 3000)
-    return
-  }
-
-  isUploading.value = true
-  try {
-    await documentApi.upload(file, selectedFolderId.value)
-    await loadDocumentsByFolder(selectedFolderId.value)
-  } catch (e) {
-    console.error('上传失败:', e)
-  }
-  isUploading.value = false
-}
-
-async function handleDelete(id: string) {
-  try {
-    await documentApi.delete(id)
-    if (selectedFolderId.value) {
-      documents.value = documents.value.filter((d) => d.id !== id)
-    } else {
-      documents.value = documents.value.filter((d) => d.id !== id)
-    }
-  } catch (e) {
-    console.error('删除失败:', e)
-  }
-}
-
-async function handleSearch() {
-  if (!searchQuery.value.trim()) return
-  isSearching.value = true
-  try {
-    const response = await documentApi.search(searchQuery.value, 5, searchMode.value)
-    searchResults.value = response.data
-  } catch (e) {
-    console.error('搜索失败:', e)
-  }
-  isSearching.value = false
-}
-
-function getFileTypeColor(type: string) {
-  const colors: Record<string, string> = {
-    pdf: '#f87171', md: '#60a5fa', txt: '#34d399', docx: '#a78bfa'
-  }
-  return colors[type] || '#9ca3af'
-}
-
-// New folder dialog
-function openNewFolderDialog(parentId: string | null = null) {
-  newFolderParentId.value = parentId
-  newFolderName.value = ''
-  showNewFolderDialog.value = true
-}
-
-async function createFolder() {
-  if (!newFolderName.value.trim()) return
-  try {
-    await folderApi.create({
-      name: newFolderName.value.trim(),
-      parent_id: newFolderParentId.value
-    })
-    await loadFolders()
-    showNewFolderDialog.value = false
-  } catch (e) {
-    console.error('创建文件夹失败:', e)
-  }
-}
-
-// Rename folder dialog
-function openRenameDialog(folder: FolderTree) {
-  renamingFolder.value = folder
-  renameFolderName.value = folder.name
-  showRenameDialog.value = true
-}
-
-async function renameFolder() {
-  if (!renamingFolder.value || !renameFolderName.value.trim()) return
-  try {
-    await folderApi.rename(renamingFolder.value.id, { name: renameFolderName.value.trim() })
-    await loadFolders()
-    showRenameDialog.value = false
-    renamingFolder.value = null
-  } catch (e) {
-    console.error('重命名文件夹失败:', e)
-  }
-}
-
-// Delete folder dialog
-function openDeleteDialog(folder: FolderTree) {
-  deletingFolder.value = folder
-  showDeleteDialog.value = true
-}
-
-async function deleteFolder() {
-  if (!deletingFolder.value) return
-  try {
-    await folderApi.delete(deletingFolder.value.id)
-    if (selectedFolderId.value === deletingFolder.value.id) {
-      selectedFolderId.value = null
-      await loadDocuments()
-    }
-    await loadFolders()
-    showDeleteDialog.value = false
-    deletingFolder.value = null
-  } catch (e) {
-    console.error('删除文件夹失败:', e)
-  }
-}
-
-onMounted(() => {
-  loadFolders()
-  loadDocuments()
-})
-</script>
-
-<template>
-  <div class="knowledge-view">
-    <!-- Header -->
-    <div class="page-header">
-      <div class="header-left">
-        <div class="header-icon"><Database :size="20" /></div>
-        <div class="header-text">
-          <h1>KNOWLEDGE BASE</h1>
-          <span class="header-sub">{{ documents.length }} documents</span>
-        </div>
-      </div>
-      <div class="header-actions">
-        <button class="btn" @click="openNewFolderDialog(null)">
-          <FolderPlus :size="14" /> 新建文件夹
-        </button>
-        <button class="btn primary" @click="(document.querySelector('.upload-area input') as HTMLInputElement)?.click()">
-          <Upload :size="14" /> 上传文档
-        </button>
-      </div>
-    </div>
-
-    <!-- Main layout: sidebar + content -->
-    <div class="main-layout">
-      <!-- Left sidebar: folder tree -->
-      <aside class="folder-sidebar">
-        <div class="sidebar-header">
-          <Folder :size="14" />
-          <span>文件夹</span>
-          <button class="add-btn" @click="openNewFolderDialog(null)" title="新建文件夹">
-            <Plus :size="12" />
-          </button>
-        </div>
-        <div class="folder-list">
-          <!-- All documents option -->
-          <div
-            class="folder-row all-docs"
-            :class="{ selected: selectedFolderId === null }"
-            @click="loadAllDocuments"
-          >
-            <Folder :size="14" class="folder-icon" />
-            <span class="folder-name">全部文档</span>
-          </div>
-          <FolderTreeComponent
-            :folders="folders"
-            :selected-id="selectedFolderId"
-            :on-select="onSelectFolder"
-            :on-create="openNewFolderDialog"
-            :on-rename="openRenameDialog"
-            :on-delete="openDeleteDialog"
-          />
-        </div>
-      </aside>
-
-      <!-- Right content area -->
-      <main class="content-area">
-        <!-- Upload zone -->
-        <div class="upload-zone">
-          <div class="upload-inner">
-            <label class="upload-area">
-              <input type="file" @change="handleUpload" accept=".pdf,.md,.txt,.docx" />
-              <div class="upload-content">
-                <div class="upload-icon-wrap">
-                  <Upload :size="22" />
-                  <Loader v-if="isUploading" :size="22" class="spin" />
-                </div>
-                <div class="upload-text">
-                  <span class="upload-main">DROP FILE OR CLICK TO UPLOAD</span>
-                  <span class="upload-hint">PDF · Markdown · TXT · DOCX</span>
-                </div>
-              </div>
-            </label>
-          </div>
-          <div v-if="uploadError" class="upload-error">
-            {{ uploadError }}
-          </div>
-          <div v-if="selectedFolderId" class="upload-folder-hint">
-            将上传到选中的文件夹
-          </div>
-          <div v-else class="upload-folder-hint upload-folder-warning">
-            请先在左侧选择文件夹后再上传
-          </div>
-        </div>
-
-        <!-- Search -->
-        <div class="search-panel">
-          <div class="search-header">
-            <Zap :size="14" />
-            <span>SEMANTIC SEARCH</span>
-          </div>
-          <div class="search-bar">
-            <Search :size="16" class="search-icon" />
-            <input
-              v-model="searchQuery"
-              placeholder="Query the knowledge base..."
-              @keyup.enter="handleSearch"
-            />
-            <select v-model="searchMode" class="mode-select">
-              <option value="hybrid">HYBRID</option>
-              <option value="semantic">SEMANTIC</option>
-              <option value="keyword">KEYWORD</option>
-            </select>
-            <button class="search-btn" @click="handleSearch" :disabled="isSearching">
-              <Loader v-if="isSearching" :size="14" class="spin" />
-              <Search v-else :size="14" />
-              SEARCH
-            </button>
-          </div>
-        </div>
-
-        <!-- Search results -->
-        <div v-if="searchResults.length" class="results-section">
-          <div class="section-header">
-            <Layers :size="14" />
-            <span>SEARCH RESULTS ({{ searchResults.length }})</span>
-          </div>
-          <div class="results-grid">
-            <div v-for="result in searchResults" :key="result.chunk_id" class="result-card">
-              <div class="result-score-bar">
-                <div class="score-fill" :style="{ width: (result.score * 100) + '%' }"></div>
-              </div>
-              <div class="result-doc-title">{{ result.document_title }}</div>
-              <div class="result-content">{{ result.content }}</div>
-              <div class="result-score">
-                <span class="score-label">RELEVANCE</span>
-                <span class="score-value">{{ (result.score * 100).toFixed(1) }}%</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Document list -->
-        <div class="docs-section">
-          <div class="section-header">
-            <FileText :size="14" />
-            <span>INDEXED DOCUMENTS ({{ documents.length }})</span>
-          </div>
-          <div class="docs-grid">
-            <div v-if="documents.length === 0" class="empty-state">
-              <FileText :size="32" />
-              <span>No documents indexed</span>
-              <span class="empty-sub">Upload files to begin indexing</span>
-            </div>
-            <div v-for="doc in documents" :key="doc.id" class="doc-card">
-              <div class="doc-type-badge" :style="{ color: getFileTypeColor(doc.file_type), borderColor: getFileTypeColor(doc.file_type) + '40' }">
-                {{ doc.file_type.toUpperCase() }}
-              </div>
-              <div class="doc-icon" :style="{ color: getFileTypeColor(doc.file_type) }">
-                <FileText :size="22" />
-              </div>
-              <div class="doc-info">
-                <div class="doc-title">{{ doc.title }}</div>
-                <div class="doc-meta">
-                  <span>{{ (doc.file_size / 1024).toFixed(1) }} KB</span>
-                  <span class="sep">·</span>
-                  <span>{{ doc.chunk_count }} chunks</span>
-                  <span class="sep">·</span>
-                  <span :class="doc.is_indexed ? 'indexed' : 'pending'">
-                    {{ doc.is_indexed ? 'INDEXED' : 'INDEXING...' }}
-                  </span>
-                </div>
-              </div>
-              <button class="delete-btn" @click="handleDelete(doc.id)">
-                <Trash2 :size="14" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-
-    <!-- New folder dialog -->
-    <div v-if="showNewFolderDialog" class="dialog-overlay" @click.self="showNewFolderDialog = false">
-      <div class="dialog">
-        <div class="dialog-header">
-          <h3>新建文件夹</h3>
-          <button class="close-btn" @click="showNewFolderDialog = false">
-            <X :size="16" />
-          </button>
-        </div>
-        <input
-          v-model="newFolderName"
-          class="dialog-input"
-          placeholder="文件夹名称"
-          @keyup.enter="createFolder"
-          autofocus
-        />
-        <div class="dialog-actions">
-          <button class="btn" @click="showNewFolderDialog = false">取消</button>
-          <button class="btn primary" @click="createFolder">创建</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Rename folder dialog -->
-    <div v-if="showRenameDialog" class="dialog-overlay" @click.self="showRenameDialog = false">
-      <div class="dialog">
-        <div class="dialog-header">
-          <h3>重命名文件夹</h3>
-          <button class="close-btn" @click="showRenameDialog = false">
-            <X :size="16" />
-          </button>
-        </div>
-        <input
-          v-model="renameFolderName"
-          class="dialog-input"
-          placeholder="文件夹名称"
-          @keyup.enter="renameFolder"
-          autofocus
-        />
-        <div class="dialog-actions">
-          <button class="btn" @click="showRenameDialog = false">取消</button>
-          <button class="btn primary" @click="renameFolder">重命名</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Delete folder dialog -->
-    <div v-if="showDeleteDialog" class="dialog-overlay" @click.self="showDeleteDialog = false">
-      <div class="dialog">
-        <div class="dialog-header">
-          <h3>删除文件夹</h3>
-          <button class="close-btn" @click="showDeleteDialog = false">
-            <X :size="16" />
-          </button>
-        </div>
-        <p class="dialog-body">
-          确定要删除文件夹「{{ deletingFolder?.name }}」吗？该操作不可恢复。
-        </p>
-        <div class="dialog-actions">
-          <button class="btn" @click="showDeleteDialog = false">取消</button>
-          <button class="btn danger" @click="deleteFolder">删除</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.knowledge-view {
-  height: 100%;
-  overflow-y: auto;
-  padding: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-/* Header */
-.page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-}
-
-.header-icon {
-  color: var(--accent-cyan);
-  filter: drop-shadow(0 0 8px var(--accent-cyan));
-}
-
-h1 {
-  font-family: var(--font-display);
-  font-size: 20px;
-  font-weight: 700;
-  letter-spacing: 0.15em;
-  color: var(--text-primary);
-  margin: 0;
-}
-
-.header-sub {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-dim);
-  letter-spacing: 0.1em;
-}
-
-.header-actions {
-  display: flex;
-  gap: 10px;
-}
-
-/* Main layout */
-.main-layout {
-  display: flex;
-  gap: 20px;
-  flex: 1;
-  min-height: 0;
-}
-
-/* Folder sidebar */
-.folder-sidebar {
-  width: 220px;
-  flex-shrink: 0;
-  background: var(--bg-card);
-  border: 1px solid var(--border-dim);
-  border-radius: var(--radius-lg);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.sidebar-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 14px;
-  background: rgba(0, 245, 212, 0.04);
-  border-bottom: 1px solid var(--border-dim);
-  font-family: var(--font-display);
-  font-size: 9px;
-  letter-spacing: 0.15em;
-  color: var(--text-dim);
-}
-
-.sidebar-header .add-btn {
-  margin-left: auto;
-  background: none;
-  border: none;
-  color: var(--text-dim);
-  cursor: pointer;
-  padding: 2px;
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  transition: all var(--transition-fast);
-}
-
-.sidebar-header .add-btn:hover {
-  color: var(--accent-cyan);
-  background: rgba(0, 245, 212, 0.1);
-}
-
-.folder-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px;
-}
-
-.all-docs {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 8px;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  color: var(--text-primary);
-  margin-bottom: 4px;
-}
-
-.all-docs:hover {
-  background: rgba(0, 245, 212, 0.04);
-}
-
-.all-docs.selected {
-  background: var(--accent-cyan-dim);
-  border: 1px solid rgba(0, 245, 212, 0.2);
-}
-
-/* Content area */
-.content-area {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-/* Upload */
-.upload-zone { }
-.upload-inner { }
-
-.upload-area {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 28px;
-  background: var(--bg-card);
-  border: 1px dashed var(--border-mid);
-  border-radius: var(--radius-lg);
-  cursor: pointer;
-  transition: all var(--transition-mid);
-}
-
-.upload-area:hover {
-  border-color: var(--accent-cyan);
-  background: var(--accent-cyan-dim);
-  box-shadow: var(--glow-cyan);
-}
-
-.upload-area input { display: none; }
-
-.upload-content {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.upload-icon-wrap {
-  color: var(--accent-cyan);
-  filter: drop-shadow(0 0 6px var(--accent-cyan));
-}
-
-.spin { animation: spin 1s linear infinite; }
-
-.upload-text {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.upload-main {
-  font-family: var(--font-display);
-  font-size: 11px;
-  letter-spacing: 0.15em;
-  color: var(--accent-cyan);
-}
-
-.upload-hint {
-  font-size: 10px;
-  color: var(--text-dim);
-  letter-spacing: 0.1em;
-}
-
-.upload-error {
-  text-align: center;
-  color: var(--accent-red);
-  font-size: 12px;
-  padding: 6px 0;
-}
-
-.upload-folder-hint {
-  text-align: center;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-dim);
-  padding: 4px 0;
-  letter-spacing: 0.08em;
-}
-
-.upload-folder-warning {
-  color: var(--accent-amber);
-}
-
-/* Search panel */
-.search-panel {
-  background: var(--bg-card);
-  border: 1px solid var(--border-dim);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-}
-
-.search-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  background: rgba(0, 245, 212, 0.04);
-  border-bottom: 1px solid var(--border-dim);
-  font-family: var(--font-display);
-  font-size: 9px;
-  letter-spacing: 0.15em;
-  color: var(--accent-cyan);
-}
-
-.search-bar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-}
-
-.search-icon { color: var(--text-dim); flex-shrink: 0; }
-
-.search-bar input {
-  flex: 1;
-  font-size: 13px;
-}
-
-.mode-select {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  letter-spacing: 0.1em;
-  padding: 6px 10px;
-  background: var(--bg-panel);
-  border: 1px solid var(--border-dim);
-  border-radius: var(--radius-md);
-  color: var(--text-secondary);
-  cursor: pointer;
-}
-
-.mode-select:focus { border-color: var(--accent-cyan); outline: none; }
-
-.search-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  background: var(--accent-cyan-dim);
-  border: 1px solid var(--border-mid);
-  border-radius: var(--radius-md);
-  color: var(--accent-cyan);
-  font-family: var(--font-display);
-  font-size: 10px;
-  letter-spacing: 0.12em;
-  transition: all var(--transition-fast);
-}
-
-.search-btn:hover:not(:disabled) {
-  background: rgba(0, 245, 212, 0.2);
-  box-shadow: var(--glow-cyan);
-}
-
-/* Section header */
-.section-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-family: var(--font-display);
-  font-size: 9px;
-  letter-spacing: 0.15em;
-  color: var(--text-dim);
-  margin-bottom: 14px;
-}
-
-/* Results */
-.results-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 12px;
-}
-
-.result-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border-dim);
-  border-radius: var(--radius-md);
-  padding: 16px;
-  position: relative;
-  overflow: hidden;
-  transition: all var(--transition-mid);
-}
-
-.result-card:hover {
-  border-color: var(--border-mid);
-  box-shadow: 0 0 16px rgba(0, 245, 212, 0.06);
-}
-
-.result-score-bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: var(--bg-panel);
-}
-
-.score-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-amber));
-  transition: width 0.5s ease;
-}
-
-.result-doc-title {
-  font-family: var(--font-display);
-  font-size: 11px;
-  letter-spacing: 0.08em;
-  color: var(--accent-cyan);
-  margin-bottom: 8px;
-}
-
-.result-content {
-  font-size: 12px;
-  color: var(--text-secondary);
-  line-height: 1.6;
-  margin-bottom: 12px;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.result-score {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.score-label {
-  font-family: var(--font-mono);
-  font-size: 9px;
-  letter-spacing: 0.12em;
-  color: var(--text-dim);
-}
-
-.score-value {
-  font-family: var(--font-display);
-  font-size: 11px;
-  color: var(--accent-amber);
-}
-
-/* Documents */
-.docs-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 12px;
-}
-
-.empty-state {
-  grid-column: 1 / -1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 48px;
-  gap: 8px;
-  color: var(--text-dim);
-  font-size: 13px;
-}
-
-.empty-sub { font-size: 11px; color: var(--text-muted); }
-
-.doc-card {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-dim);
-  border-radius: var(--radius-md);
-  padding: 14px 16px;
-  transition: all var(--transition-fast);
-}
-
-.doc-card:hover {
-  border-color: var(--border-mid);
-  background: var(--bg-card-hover);
-}
-
-.doc-type-badge {
-  font-family: var(--font-display);
-  font-size: 8px;
-  letter-spacing: 0.1em;
-  padding: 2px 6px;
-  border: 1px solid;
-  border-radius: 3px;
-  flex-shrink: 0;
-}
-
-.doc-info { flex: 1; min-width: 0; }
-
-.doc-title {
-  font-size: 13px;
-  color: var(--text-primary);
-  margin-bottom: 4px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.doc-meta {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-dim);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.sep { opacity: 0.4; }
-
-.indexed { color: var(--accent-green); }
-.pending { color: var(--accent-amber); }
-
-.delete-btn {
-  background: none;
-  border: none;
-  color: var(--text-dim);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 3px;
-  transition: all var(--transition-fast);
-  opacity: 0;
-}
-
-.doc-card:hover .delete-btn { opacity: 1; }
-.delete-btn:hover { color: var(--accent-red); background: rgba(255,71,87,0.1); }
-
-/* Dialogs */
-.dialog-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.dialog {
-  background: var(--bg-card);
-  border: 1px solid var(--border-mid);
-  border-radius: var(--radius-lg);
-  padding: 24px;
-  width: 400px;
-  max-width: 90vw;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-}
-
-.dialog-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-
-.dialog-header h3 {
-  font-family: var(--font-display);
-  font-size: 14px;
-  letter-spacing: 0.1em;
-  color: var(--text-primary);
-  margin: 0;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  color: var(--text-dim);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  transition: all var(--transition-fast);
-}
-
-.close-btn:hover {
-  color: var(--text-primary);
-  background: var(--bg-panel);
-}
-
-.dialog-input {
-  width: 100%;
-  padding: 10px 14px;
-  background: var(--bg-panel);
-  border: 1px solid var(--border-dim);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  font-size: 13px;
-  margin-bottom: 16px;
-  box-sizing: border-box;
-}
-
-.dialog-input:focus {
-  border-color: var(--accent-cyan);
-  outline: none;
-}
-
-.dialog-body {
-  font-size: 13px;
-  color: var(--text-secondary);
-  margin: 0 0 16px 0;
-  line-height: 1.5;
-}
-
-.dialog-actions {
-  display: flex;
-  gap: 10px;
-  justify-content: flex-end;
-}
-
-/* Buttons */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  background: var(--bg-panel);
-  border: 1px solid var(--border-mid);
-  border-radius: var(--radius-md);
-  color: var(--text-secondary);
-  font-family: var(--font-display);
-  font-size: 10px;
-  letter-spacing: 0.1em;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.btn:hover {
-  border-color: var(--border-mid);
-  background: var(--bg-card-hover);
-}
-
-.btn.primary {
-  background: var(--accent-cyan-dim);
-  border-color: rgba(0, 245, 212, 0.3);
-  color: var(--accent-cyan);
-}
-
-.btn.primary:hover {
-  background: rgba(0, 245, 212, 0.2);
-  box-shadow: var(--glow-cyan);
-}
-
-.btn.danger {
-  background: rgba(255, 71, 87, 0.1);
-  border-color: rgba(255, 71, 87, 0.3);
-  color: var(--accent-red);
-}
-
-.btn.danger:hover {
-  background: rgba(255, 71, 87, 0.2);
-  box-shadow: 0 0 12px rgba(255, 71, 87, 0.2);
-}
-</style>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 16b3902..7185f53 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -12,7 +12,7 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        target: 'http://localhost:8000',
+        target: 'http://localhost:9527',
         changeOrigin: true,
       },
     },