From c590aa21d0e051b24729021cab583cb784c23d19 Mon Sep 17 00:00:00 2001
From: "DESKTOP-72TV0V4\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Tue, 10 Mar 2026 17:38:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20Logs=E3=80=81Memor?=
 =?UTF-8?q?y=E3=80=81Plan=20=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 Logs.vue 日志页面
- 添加 Memory.vue 记忆页面
- 添加 Plan.vue 计划页面
- 更新路由和侧边栏导航

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/components/Sidebar.vue |   4 +-
 web/src/router/index.ts        |  18 ++
 web/src/views/Logs.vue         | 226 ++++++++++++++++++++++++
 web/src/views/Memory.vue       | 309 +++++++++++++++++++++++++++++++++
 web/src/views/Plan.vue         | 292 +++++++++++++++++++++++++++++++
 5 files changed, 848 insertions(+), 1 deletion(-)
 create mode 100644 web/src/views/Logs.vue
 create mode 100644 web/src/views/Memory.vue
 create mode 100644 web/src/views/Plan.vue

diff --git a/web/src/components/Sidebar.vue b/web/src/components/Sidebar.vue
index d1e8165..c18c2ba 100644
--- a/web/src/components/Sidebar.vue
+++ b/web/src/components/Sidebar.vue
@@ -51,11 +51,13 @@ const group2 = computed(() => [
   { name: 'Knowledge', icon: 'fa-brain', path: '/knowledge', badge: knowledgeCount.value },
 ])
 
-// 第3组: Skills, Tools, Script
+// 第3组: Skills, Tools, Script, Plan, Memory
 const group3 = computed(() => [
   { name: 'Skills', icon: 'fa-wand-magic-sparkles', badge: 21, path: '/mcp' },
   { name: 'Tools', icon: 'fa-tools', badge: 13, path: '/model-apis' },
   { name: 'Script', icon: 'fa-code', path: '/script' },
+  { name: 'Plan', icon: 'fa-clock', path: '/plan' },
+  { name: 'Memory', icon: 'fa-brain', path: '/memory' },
 ])
 
 // 第4组: Dashboard, Account, Settings
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 908ccb5..48d2720 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -8,9 +8,12 @@ import Skill from '@/views/Skill.vue'
 import ModelAPIs from '@/views/ModelAPIs.vue'
 import Database from '@/views/Database.vue'
 import Script from '@/views/Script.vue'
+import Plan from '@/views/Plan.vue'
+import Memory from '@/views/Memory.vue'
 import Knowledge from '@/views/Knowledge.vue'
 import Settings from '@/views/Settings.vue'
 import Account from '@/views/Account.vue'
+import Logs from '@/views/Logs.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -60,6 +63,16 @@ const router = createRouter({
       name: 'script',
       component: Script
     },
+    {
+      path: '/plan',
+      name: 'plan',
+      component: Plan
+    },
+    {
+      path: '/memory',
+      name: 'memory',
+      component: Memory
+    },
     {
       path: '/knowledge',
       name: 'knowledge',
@@ -74,6 +87,11 @@ const router = createRouter({
       path: '/account',
       name: 'account',
       component: Account
+    },
+    {
+      path: '/logs',
+      name: 'logs',
+      component: Logs
     }
   ]
 })
diff --git a/web/src/views/Logs.vue b/web/src/views/Logs.vue
new file mode 100644
index 0000000..f68ba25
--- /dev/null
+++ b/web/src/views/Logs.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import './database/database.css'
+
+// 日志数据
+interface Log {
+  id: number
+  level: 'info' | 'warning' | 'error' | 'debug'
+  source: string
+  message: string
+  timestamp: string
+  user?: string
+}
+
+const logs = ref<Log[]>([
+  { id: 1, level: 'info', source: 'System', message: 'User logged in successfully', timestamp: '2025-03-10 14:35:22', user: 'alex@example.com' },
+  { id: 2, level: 'warning', source: 'API', message: 'Rate limit approaching for API key', timestamp: '2025-03-10 14:32:15', user: 'john@example.com' },
+  { id: 3, level: 'error', source: 'Database', message: 'Connection timeout to primary database', timestamp: '2025-03-10 14:30:45' },
+  { id: 4, level: 'info', source: 'Skill', message: 'MCP Server started successfully', timestamp: '2025-03-10 14:28:10' },
+  { id: 5, level: 'debug', source: 'Auth', message: 'Token refresh initiated', timestamp: '2025-03-10 14:25:33', user: 'jane@example.com' },
+  { id: 6, level: 'error', source: 'Script', message: 'Failed to execute backup script', timestamp: '2025-03-10 14:20:18' },
+  { id: 7, level: 'info', source: 'Account', message: 'User role updated', timestamp: '2025-03-10 14:15:42', user: 'admin@example.com' },
+  { id: 8, level: 'warning', source: 'Memory', message: 'Memory usage exceeds 80% threshold', timestamp: '2025-03-10 14:10:55' },
+  { id: 9, level: 'info', source: 'Knowledge', message: 'Document indexed successfully', timestamp: '2025-03-10 14:05:30' },
+  { id: 10, level: 'error', source: 'API', message: 'Invalid API key provided', timestamp: '2025-03-10 14:00:12' },
+])
+
+// 搜索和筛选
+const searchQuery = ref('')
+const filterLevel = ref('')
+const filterSource = ref('')
+
+// 日志级别选项
+const levelOptions = [
+  { value: '', label: 'All Levels' },
+  { value: 'info', label: 'Info' },
+  { value: 'warning', label: 'Warning' },
+  { value: 'error', label: 'Error' },
+  { value: 'debug', label: 'Debug' },
+]
+
+// 来源选项
+const sourceOptions = computed(() => {
+  const sources = [...new Set(logs.value.map(l => l.source))]
+  return [{ value: '', label: 'All Sources' }, ...sources.map(s => ({ value: s, label: s }))]
+})
+
+// 过滤后的日志
+const filteredLogs = computed(() => {
+  return logs.value.filter(log => {
+    const matchSearch = searchQuery.value === '' ||
+      log.message.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      log.source.toLowerCase().includes(searchQuery.value.toLowerCase())
+    const matchLevel = filterLevel.value === '' || log.level === filterLevel.value
+    const matchSource = filterSource.value === '' || log.source === filterSource.value
+    return matchSearch && matchLevel && matchSource
+  })
+})
+
+// 日志级别样式
+const levelClass = (level: string) => {
+  switch (level) {
+    case 'info': return 'bg-blue-500/20 text-blue-400'
+    case 'warning': return 'bg-yellow-500/20 text-yellow-400'
+    case 'error': return 'bg-red-500/20 text-red-400'
+    case 'debug': return 'bg-gray-500/20 text-gray-400'
+    default: return 'bg-gray-500/20 text-gray-400'
+  }
+}
+
+// 日志详情
+const selectedLog = ref<Log | null>(null)
+const showLogDetail = ref(false)
+
+const viewDetail = (log: Log) => {
+  selectedLog.value = log
+  showLogDetail.value = true
+}
+
+const closeDetail = () => {
+  showLogDetail.value = false
+  selectedLog.value = null
+}
+
+// 清空日志
+const clearLogs = () => {
+  logs.value = []
+}
+</script>
+
+<template>
+  <div class="p-6 min-h-screen">
+    <!-- 顶部标题 -->
+    <div class="flex items-center justify-between mb-6">
+      <div class="flex items-center gap-2">
+        <i class="fa-solid fa-file-lines text-orange-500"></i>
+        <span class="font-medium">Logs</span>
+      </div>
+      <button @click="clearLogs" class="px-4 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-colors flex items-center gap-2">
+        <i class="fa-solid fa-trash"></i>
+        Clear Logs
+      </button>
+    </div>
+
+    <!-- 搜索和筛选 -->
+    <div class="flex gap-4 mb-6">
+      <div class="flex-1 relative">
+        <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Search logs..."
+          class="w-full bg-dark-600 border border-dark-500 rounded-lg py-2 pl-10 pr-4 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
+        >
+      </div>
+      <el-select v-model="filterLevel" placeholder="All Levels" class="w-40" size="large" popper-class="dark-select-dropdown">
+        <el-option v-for="opt in levelOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+      </el-select>
+      <el-select v-model="filterSource" placeholder="All Sources" class="w-40" size="large" popper-class="dark-select-dropdown">
+        <el-option v-for="opt in sourceOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+      </el-select>
+    </div>
+
+    <!-- 日志列表 -->
+    <div class="bg-dark-700 rounded-xl overflow-hidden">
+      <table class="w-full">
+        <thead class="bg-dark-600">
+          <tr>
+            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Level</th>
+            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Source</th>
+            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Message</th>
+            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">User</th>
+            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Timestamp</th>
+            <th class="text-right px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="log in filteredLogs" :key="log.id" class="border-t border-dark-600 hover:bg-dark-600/50">
+            <td class="px-5 py-4">
+              <span :class="['px-2 py-1 rounded text-xs font-medium', levelClass(log.level)]">
+                {{ log.level.toUpperCase() }}
+              </span>
+            </td>
+            <td class="px-5 py-4 text-gray-300">{{ log.source }}</td>
+            <td class="px-5 py-4 text-gray-300 max-w-md">
+              <div class="truncate">{{ log.message }}</div>
+            </td>
+            <td class="px-5 py-4 text-gray-400">{{ log.user || '-' }}</td>
+            <td class="px-5 py-4 text-gray-400 text-sm">{{ log.timestamp }}</td>
+            <td class="px-5 py-4">
+              <div class="flex items-center justify-end">
+                <button
+                  @click="viewDetail(log)"
+                  class="p-2 rounded-lg hover:bg-dark-500 transition-colors"
+                  title="View Details"
+                >
+                  <i class="fa-solid fa-eye text-gray-400 hover:text-white"></i>
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- 空状态 -->
+      <div v-if="filteredLogs.length === 0" class="py-12 text-center text-gray-500">
+        <i class="fa-solid fa-file-lines text-4xl mb-3"></i>
+        <p>No logs found</p>
+      </div>
+    </div>
+
+    <!-- 日志详情弹窗 -->
+    <Teleport to="body">
+      <div v-if="showLogDetail" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50" @click="closeDetail">
+        <div class="bg-dark-700 rounded-2xl w-full max-w-2xl border border-dark-500 shadow-2xl" @click.stop>
+          <div class="flex items-center justify-between p-5 border-b border-dark-500">
+            <h3 class="text-lg font-semibold">Log Details</h3>
+            <button @click="closeDetail" class="text-gray-400 hover:text-white transition-colors">
+              <i class="fa-solid fa-xmark text-xl"></i>
+            </button>
+          </div>
+
+          <div v-if="selectedLog" class="p-5 space-y-4">
+            <div class="flex items-center gap-4">
+              <span :class="['px-3 py-1 rounded text-sm font-medium', levelClass(selectedLog.level)]">
+                {{ selectedLog.level.toUpperCase() }}
+              </span>
+              <span class="text-gray-400">{{ selectedLog.timestamp }}</span>
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium text-gray-400 mb-2">Source</label>
+              <div class="text-white">{{ selectedLog.source }}</div>
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium text-gray-400 mb-2">User</label>
+              <div class="text-white">{{ selectedLog.user || 'System' }}</div>
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium text-gray-400 mb-2">Message</label>
+              <div class="bg-dark-800 rounded-lg p-4 text-gray-300 font-mono text-sm whitespace-pre-wrap">
+                {{ selectedLog.message }}
+              </div>
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium text-gray-400 mb-2">Log ID</label>
+              <div class="text-gray-500">#{{ selectedLog.id }}</div>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-500">
+            <button
+              @click="closeDetail"
+              class="px-4 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-colors"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
diff --git a/web/src/views/Memory.vue b/web/src/views/Memory.vue
new file mode 100644
index 0000000..17e8cdb
--- /dev/null
+++ b/web/src/views/Memory.vue
@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import './database/database.css'
+
+interface MemoryItem {
+  id: number
+  type: 'Experience' | 'Lessons'
+  content: string
+  subject: string
+  attribute: string
+  score: number
+  createdAt: string
+  selected: boolean
+}
+
+// 记忆数据
+const memories = ref<MemoryItem[]>([
+  {
+    id: 1,
+    type: 'Experience',
+    content: '当任务明确要求获取外部信息（搜索最新数据、新闻、财报、行业报告等）时，模型必须主动调用搜索工具而非仅依赖内部知识。应在系统提示中明确要求「必须使用搜索工具获取XX最新数据」，首次迭代即调用搜索工具，采用「搜索→分析→输出」的递进式流程，避免模型陷入纯文字生成的空转循环。',
+    subject: '外部信息获取规范',
+    attribute: '工具调用原则',
+    score: 0.95,
+    createdAt: '3/10 15:35',
+    selected: false
+  },
+  {
+    id: 2,
+    type: 'Experience',
+    content: '当任务明确要求获取外部信息（搜索最新数据、新闻、财报、行业报告等）时，模型必须调用搜索工具而非仅依赖内部知识。应在系统提示中明确要求「必须使用搜索工具获取XX最新数据」，并建立工具调用检测机制，确保任务执行路径正确。',
+    subject: '工具调用',
+    attribute: '错误教训',
+    score: 0.95,
+    createdAt: '3/10 12:34',
+    selected: false
+  },
+  {
+    id: 3,
+    type: 'Experience',
+    content: '任务执行应采用「一次性完整输出」策略，避免分批次小幅输出导致的迭代空转。对于代码生成、文件写入等任务，应要求模型一次性完成方案设计与工具执行的完整流程，将确认性回复并入上一次响应，将冗余迭代压缩合并，复杂任务控制在2-3次迭代内完成。',
+    subject: '任务执行效率优化',
+    attribute: '迭代策略原则',
+    score: 0.92,
+    createdAt: '3/10 15:35',
+    selected: false
+  },
+  {
+    id: 4,
+    type: 'Experience',
+    content: '任务执行过程中应建立工具调用检测机制，监控模型是否按要求调用了必要的工具。若迭代中工具调用数为0，说明执行路径不正确，应触发异常处理或提示，而非继续无效迭代。',
+    subject: '执行路径监控',
+    attribute: '质量控制机制',
+    score: 0.88,
+    createdAt: '3/10 15:35',
+    selected: false
+  },
+  {
+    id: 5,
+    type: 'Experience',
+    content: '任务执行应采用「搜索→分析→输出」的递进式流程，避免无效迭代和空转。纯文字生成的重复迭代应压缩或合并，确认性回复应并入上一次响应。简单任务应在1-2次迭代内完成，避免模型陷入重复思考或无意义的自我确认。',
+    subject: '迭代效率',
+    attribute: '错误教训',
+    score: 0.85,
+    createdAt: '3/10 12:34',
+    selected: false
+  },
+  {
+    id: 6,
+    type: 'Experience',
+    content: '对于代码生成或文件写入类任务，应要求模型一次性完整输出或按模块批量输出，避免分批次的小幅输出导致迭代次数过多、执行效率低下。',
+    subject: '代码生成策略',
+    attribute: '错误教训',
+    score: 0.80,
+    createdAt: '3/10 12:34',
+    selected: false
+  },
+])
+
+// 搜索和筛选
+const searchQuery = ref('')
+const filterType = ref('All Types')
+
+// 统计数据
+const stats = computed(() => ({
+  total: memories.value.length,
+  avgScore: (memories.value.reduce((sum, m) => sum + m.score, 0) / memories.value.length).toFixed(2),
+  experience: memories.value.filter(m => m.type === 'Experience').length,
+  lessons: memories.value.filter(m => m.type === 'Lessons').length,
+}))
+
+// 过滤后的记忆
+const filteredMemories = computed(() => {
+  return memories.value.filter(m => {
+    const matchSearch = searchQuery.value === '' ||
+      m.content.includes(searchQuery.value) ||
+      m.subject.includes(searchQuery.value) ||
+      m.attribute.includes(searchQuery.value)
+    const matchType = filterType.value === 'All Types' || m.type === filterType.value
+    return matchSearch && matchType
+  })
+})
+
+// 切换选中状态
+const toggleSelect = (id: number) => {
+  const memory = memories.value.find(m => m.id === id)
+  if (memory) {
+    memory.selected = !memory.selected
+  }
+}
+
+// 全选
+const selectAll = ref(false)
+const toggleSelectAll = () => {
+  selectAll.value = !selectAll.value
+  memories.value.forEach(m => m.selected = selectAll.value)
+}
+
+// 删除记忆
+const deleteMemory = (id: number) => {
+  memories.value = memories.value.filter(m => m.id !== id)
+}
+
+// 编辑记忆
+const editMemory = (id: number) => {
+  console.log('Edit memory:', id)
+}
+
+// 刷新
+const refresh = () => {
+  console.log('Refresh')
+}
+
+// LLM 智能审查
+const llmReview = () => {
+  console.log('LLM Review')
+}
+
+// 获取分数颜色
+const getScoreColor = (score: number) => {
+  if (score >= 0.9) return 'text-emerald-400'
+  if (score >= 0.7) return 'text-amber-400'
+  return 'text-red-400'
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-[#121212] text-gray-200 p-6">
+    <!-- 顶部标题 -->
+    <div class="flex items-center gap-2 mb-6">
+      <i class="fa-solid fa-brain text-orange-500"></i>
+      <span class="font-medium">Memory</span>
+    </div>
+
+    <!-- 统计卡片区域 -->
+    <div class="grid grid-cols-4 gap-4 mb-6">
+      <div class="bg-[#1e1e1e] rounded-xl p-5 text-center">
+        <div class="text-3xl font-bold text-white mb-1">{{ stats.total }}</div>
+        <div class="text-sm text-gray-400">Total Memories</div>
+      </div>
+      <div class="bg-[#1e1e1e] rounded-xl p-5 text-center">
+        <div class="text-3xl font-bold text-white mb-1">{{ stats.avgScore }}</div>
+        <div class="text-sm text-gray-400">Avg Score</div>
+      </div>
+      <div class="bg-[#1e1e1e] rounded-xl p-5 text-center">
+        <div class="text-3xl font-bold text-cyan-400 mb-1">{{ stats.experience }}</div>
+        <div class="text-sm text-gray-400">Experience</div>
+      </div>
+      <div class="bg-[#1e1e1e] rounded-xl p-5 text-center">
+        <div class="text-3xl font-bold text-red-400 mb-1">{{ stats.lessons }}</div>
+        <div class="text-sm text-gray-400">Lessons</div>
+      </div>
+    </div>
+
+    <!-- 搜索栏 -->
+    <div class="mb-4">
+      <div class="relative">
+        <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Search memories..."
+          class="w-full bg-dark-600 border border-dark-500 rounded-lg py-2 pl-10 pr-4 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
+        >
+      </div>
+    </div>
+
+    <!-- 筛选与操作栏 -->
+    <div class="flex items-center justify-between mb-6">
+      <div class="flex items-center space-x-3">
+        <el-select v-model="filterType" placeholder="Select" class="w-40" size="large" popper-class="dark-select-dropdown">
+          <el-option label="All Types" value="All Types" />
+          <el-option label="Experience" value="Experience" />
+          <el-option label="Lessons" value="Lessons" />
+        </el-select>
+        <button class="flex items-center space-x-2 bg-[#1e1e1e] border border-gray-700 rounded-lg py-2 px-4 text-gray-200 hover:bg-[#2a2a2a]">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+          </svg>
+          <span>Refresh</span>
+        </button>
+        <button class="flex items-center space-x-2 bg-orange-500 rounded-lg py-2 px-4 text-white hover:bg-orange-400">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
+          </svg>
+          <span>LLM Review</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- 表格区域 -->
+    <div class="bg-dark-700 rounded-xl overflow-hidden">
+      <table class="w-full">
+        <thead class="bg-dark-600">
+          <tr>
+            <th class="w-10 px-5 py-3 text-left text-sm font-medium text-gray-400">
+              <input
+                type="checkbox"
+                v-model="selectAll"
+                @change="toggleSelectAll"
+                class="rounded bg-dark-600 border-dark-500"
+              >
+            </th>
+            <th class="px-5 py-3 text-left text-sm font-medium text-gray-400">Type</th>
+            <th class="px-5 py-3 text-left text-sm font-medium text-gray-400">Content</th>
+            <th class="px-5 py-3 text-left text-sm font-medium text-gray-400">Score</th>
+            <th class="px-5 py-3 text-left text-sm font-medium text-gray-400">Created</th>
+            <th class="px-5 py-3 text-center text-sm font-medium text-gray-400">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="memory in filteredMemories"
+            :key="memory.id"
+            class="table-row"
+          >
+            <td class="px-5 py-4">
+              <input
+                type="checkbox"
+                :checked="memory.selected"
+                @change="toggleSelect(memory.id)"
+                class="rounded bg-dark-600 border-dark-500"
+              >
+            </td>
+            <td class="px-5 py-4">
+              <span class="px-2 py-1 bg-cyan-900/30 text-cyan-400 text-xs rounded-full">{{ memory.type }}</span>
+            </td>
+            <td class="px-5 py-4 text-sm text-gray-300 max-w-xl">
+              <div class="line-clamp-2">{{ memory.content }}</div>
+              <div class="text-xs text-gray-500 mt-1">Subject: {{ memory.subject }} · Attribute: {{ memory.attribute }}</div>
+            </td>
+            <td class="px-5 py-4">
+              <span :class="['font-medium', getScoreColor(memory.score)]">{{ memory.score }}</span>
+            </td>
+            <td class="px-5 py-4 text-sm text-gray-400">{{ memory.createdAt }}</td>
+            <td class="px-5 py-4">
+              <div class="flex items-center justify-center gap-2">
+                <button
+                  @click="editMemory(memory.id)"
+                  class="btn-icon"
+                >
+                  <i class="fa-solid fa-pen text-gray-400 hover:text-white"></i>
+                </button>
+                <button
+                  @click="deleteMemory(memory.id)"
+                  class="btn-icon"
+                >
+                  <i class="fa-solid fa-trash text-gray-400 hover:text-red-400"></i>
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- 空状态 -->
+      <div v-if="filteredMemories.length === 0" class="py-12 text-center text-gray-500">
+        <i class="fa-solid fa-brain text-3xl mb-2"></i>
+        <p>No memories found</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 自定义滚动条 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #1a1a1a;
+}
+::-webkit-scrollbar-thumb {
+  background: #333;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #444;
+}
+
+/* 行高限制 */
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>
diff --git a/web/src/views/Plan.vue b/web/src/views/Plan.vue
new file mode 100644
index 0000000..b5ee39b
--- /dev/null
+++ b/web/src/views/Plan.vue
@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// Mock scheduled tasks data
+const tasks = ref([
+  {
+    id: 1,
+    name: 'Human-like Heartbeat',
+    status: 'running',
+    triggerType: 'Interval 30 minutes',
+    nextRun: '2026/03/10 16:26',
+    lastRun: '2026/03/10 15:56',
+    notifyChannel: '-',
+    executionCount: 13,
+    description: 'Check if proactive messages need to be sent (greetings/reminders/follow-ups)',
+    tags: ['System Task', 'Agent Task', 'Interval']
+  },
+  {
+    id: 2,
+    name: 'Memory Organization',
+    status: 'running',
+    triggerType: 'Interval 3 hours',
+    nextRun: '2026/03/10 18:35',
+    lastRun: '2026/03/10 15:35',
+    notifyChannel: '-',
+    executionCount: 2,
+    description: 'Execute memory organization: organize chat history, extract key memories, refresh MEMORY.md',
+    tags: ['System Task', 'Agent Task', 'Interval']
+  },
+  {
+    id: 3,
+    name: 'System Self-Check',
+    status: 'running',
+    triggerType: 'Daily 04:00',
+    nextRun: '2026/03/11 04:00',
+    lastRun: 'Never',
+    notifyChannel: '-',
+    executionCount: 0,
+    description: 'Execute system self-check: analyze ERROR logs, try to fix tool issues, generate report',
+    tags: ['System Task', 'Agent Task', 'Daily']
+  },
+])
+
+const activeTab = ref('running') // running, completed, all
+const searchQuery = ref('')
+
+const filteredTasks = computed(() => {
+  let result = tasks.value
+  if (activeTab.value === 'running') {
+    result = result.filter(t => t.status === 'running')
+  } else if (activeTab.value === 'completed') {
+    result = result.filter(t => t.status === 'stopped')
+  }
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    result = result.filter(t =>
+      t.name.toLowerCase().includes(query) ||
+      t.description.toLowerCase().includes(query)
+    )
+  }
+  return result
+})
+
+const getTaskCount = (status: string) => {
+  if (status === 'running') return tasks.value.filter(t => t.status === 'running').length
+  if (status === 'completed') return tasks.value.filter(t => t.status === 'stopped').length
+  return tasks.value.length
+}
+
+const getStatusClass = (status: string) => {
+  switch (status) {
+    case 'running': return 'bg-green-500'
+    case 'stopped': return 'bg-gray-500'
+    default: return 'bg-gray-500'
+  }
+}
+</script>
+
+<template>
+  <div class="p-6 min-h-screen plan-page">
+    <!-- Header -->
+    <div class="flex justify-between items-center mb-6">
+      <div class="flex items-center gap-2">
+        <i class="fa-solid fa-clock text-orange-500"></i>
+        <span class="font-medium text-white">Scheduled Tasks</span>
+      </div>
+      <button class="btn-primary">
+        <i class="fa-solid fa-plus"></i>
+        New Task
+      </button>
+    </div>
+
+    <!-- Search -->
+    <div class="flex gap-4 mb-6">
+      <div class="flex-1 relative">
+        <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Search tasks..."
+          class="search-input w-full"
+        >
+      </div>
+    </div>
+
+    <!-- Tab Navigation -->
+    <div class="flex gap-6 mb-4">
+      <button
+        :class="['tab-item', { active: activeTab === 'running' }]"
+        @click="activeTab = 'running'"
+      >
+        Running {{ getTaskCount('running') }}
+      </button>
+      <button
+        :class="['tab-item', { active: activeTab === 'completed' }]"
+        @click="activeTab = 'completed'"
+      >
+        Completed {{ getTaskCount('completed') }}
+      </button>
+      <button
+        :class="['tab-item', { active: activeTab === 'all' }]"
+        @click="activeTab = 'all'"
+      >
+        All {{ getTaskCount('all') }}
+      </button>
+    </div>
+
+    <!-- Task List Table -->
+    <div class="bg-dark-700 rounded-xl overflow-hidden">
+      <div v-if="filteredTasks.length === 0" class="py-12 text-center text-gray-400">
+        <i class="fa-solid fa-clock text-2xl mb-2"></i>
+        <p>No tasks found</p>
+      </div>
+      <table v-else class="w-full">
+        <thead class="bg-dark-600">
+          <tr>
+            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Task Name</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Status</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Trigger</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Next Run</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Executions</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="task in filteredTasks" :key="task.id" class="table-row">
+            <td class="px-5 py-4">
+              <div class="flex items-center gap-2">
+                <span :class="['w-2 h-2 rounded-full', getStatusClass(task.status)]"></span>
+                <div>
+                  <div class="font-medium text-white">{{ task.name }}</div>
+                  <div class="text-sm text-gray-500">{{ task.description }}</div>
+                </div>
+              </div>
+              <div class="flex gap-2 mt-2">
+                <span v-for="tag in task.tags" :key="tag" class="task-tag">{{ tag }}</span>
+              </div>
+            </td>
+            <td class="px-5 py-4 text-center">
+              <span :class="['status-badge', getStatusClass(task.status)]">
+                {{ task.status === 'running' ? 'Running' : 'Stopped' }}
+              </span>
+            </td>
+            <td class="px-5 py-4 text-center text-gray-400 text-sm">
+              {{ task.triggerType }}
+            </td>
+            <td class="px-5 py-4 text-center text-gray-400 text-sm">
+              {{ task.nextRun }}
+            </td>
+            <td class="px-5 py-4 text-center">
+              <span class="text-primary-cyan">{{ task.executionCount }}</span>
+            </td>
+            <td class="px-5 py-4">
+              <div class="flex items-center justify-center gap-2">
+                <button class="btn-icon" title="Pause">
+                  <i class="fa-solid fa-pause text-gray-400 hover:text-white"></i>
+                </button>
+                <button class="btn-icon" title="Edit">
+                  <i class="fa-solid fa-pen text-gray-400 hover:text-white"></i>
+                </button>
+                <button class="btn-icon" title="Delete">
+                  <i class="fa-solid fa-trash text-gray-400 hover:text-red-500"></i>
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.plan-page {
+  background-color: #0f1419;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #f97316, #ef4444);
+  color: white;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+}
+
+.btn-primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
+}
+
+.search-input {
+  background-color: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 8px;
+  padding: 10px 12px 10px 36px;
+  color: white;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.search-input:focus {
+  border-color: #f97316;
+}
+
+.search-input::placeholder {
+  color: #6b7280;
+}
+
+.tab-item {
+  background: none;
+  border: none;
+  color: #9ca3af;
+  font-size: 14px;
+  padding: 8px 4px;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s;
+}
+
+.tab-item:hover {
+  color: white;
+}
+
+.tab-item.active {
+  color: #f97316;
+  border-bottom-color: #f97316;
+}
+
+.table-row {
+  border-top: 1px solid #2a2a3a;
+  transition: background-color 0.2s;
+}
+
+.table-row:hover {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+.task-tag {
+  background-color: #374151;
+  color: #d1d5db;
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.status-badge {
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: white;
+}
+
+.btn-icon {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.btn-icon:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+</style>