Merge branch 'master' of https://gitea.tatta.cn/Tatta/TaskPulse

feat: agent avatars, task tags, search, edit/delete agents, cron readability, timezone fix
- Agent avatars: first-letter + deterministic color avatar in all views - Agent management: edit (name/description) and delete with confirmation - Execution API: validates agent existence, returns 410 if deleted - Task tags: JSON array field, editable with tag pills UI - Task search: by name (?q=) and by tags (?tags=) and by status - Task edit: simplified to name/tags/description only (not agent params) - Cron display: human-readable Chinese (e.g. '每5分钟', '每天 09:00') - Timezone fix: UTC→local via dayjs.utc().local() across all pages - Content area: full width (removed max-width:1200px constraints) - Login page: standalone layout without sidebar
2026-06-15 23:35:52 +08:00 · 2026-06-15 23:33:28 +08:00
18 changed files with 683 additions and 246 deletions
--- a/backend/alembic/versions/0001_initial.py
+++ b/backend/alembic/versions/0001_initial.py
@ -48,6 +48,7 @@ def upgrade() -> None:
        sa.Column("cron_expression", sa.String(64), nullable=False),
        sa.Column("grace_period", sa.Integer, default=300),
        sa.Column("status", sa.String(32), default="active"),
+        sa.Column("tags", sa.Text, nullable=True),
        sa.Column("last_run_at", sa.DateTime, nullable=True),
        sa.Column("last_run_result", sa.String(32), nullable=True),
        sa.Column("next_run_at", sa.DateTime, nullable=True),
--- a/backend/app/api/agents.py
+++ b/backend/app/api/agents.py
@ -59,6 +59,17 @@ async def heartbeat(agent_id: int, db: AsyncSession = Depends(get_db)):
    return AgentOut(**{**agent.__dict__, "task_count": cnt})


+@router.delete("/{agent_id}", status_code=204)
+async def delete_agent(agent_id: int, db: AsyncSession = Depends(get_db)):
+    svc = AgentService(db)
+    agent = await svc.get(agent_id)
+    if not agent:
+        raise HTTPException(404, "Agent not found")
+    # Delete all tasks first, then the agent (cascade)
+    await svc.delete(agent_id)
+    await db.commit()
+
+
 # ── Batch registration: AI agent self-registers with all its tasks ─────

@router.post("/register-with-tasks", response_model=AgentBatchRegisterResult, status_code=201)
--- a/backend/app/api/executions.py
+++ b/backend/app/api/executions.py
@ -20,6 +20,14 @@ async def report_execution(task_id: int, body: ExecutionReport,
    if not task:
        raise HTTPException(404, "Task not found")

+    # Verify agent exists and is active
+    agent_svc = AgentService(db)
+    agent = await agent_svc.get(task.agent_id)
+    if not agent:
+        raise HTTPException(410, "Agent已被删除，请重新注册")
+    if agent.status != "active":
+        raise HTTPException(403, "Agent已停用，无法汇报")
+
    exec_svc = ExecutionService(db)
    record = await exec_svc.report_result(
        task_id=task_id,
--- a/backend/app/api/tasks.py
+++ b/backend/app/api/tasks.py
@ -1,13 +1,28 @@
 """API router — Task management."""

-from fastapi import APIRouter, Depends, HTTPException
+import json
+
+from fastapi import APIRouter, Depends, HTTPException, Query
+from sqlalchemy import select, or_
 from sqlalchemy.ext.asyncio import AsyncSession

 from app.database import get_db
 from app.schemas import TaskCreate, TaskOut, TaskUpdate
 from app.services import TaskService, AgentService
+from app.models import ScheduledTask

-router = APIRouter(prefix="/api/tasks", tags=["tasks"])
+router = APIRouter(prefix="/api/tasks", tags=["tags"])
+
+
+def _task_to_out(task, agent_name: str = "") -> dict:
+    """Convert task model to TaskOut dict, handling tags JSON deserialization."""
+    data = {**task.__dict__}
+    try:
+        data["tags"] = json.loads(data.get("tags", "[]"))
+    except (json.JSONDecodeError, TypeError):
+        data["tags"] = []
+    data["agent_name"] = agent_name
+    return data


@router.post("", response_model=TaskOut, status_code=201)
@ -25,23 +40,48 @@ async def create_task(body: TaskCreate, agent_id: int, db: AsyncSession = Depend
        description=body.description,
        grace_period=body.grace_period,
    )
-    return TaskOut(**{**task.__dict__, "agent_name": agent.name})
+    # Store tags
+    if body.tags:
+        task.tags = json.dumps(body.tags, ensure_ascii=False)
+        await db.flush()
+        await db.refresh(task)
+    return TaskOut(**_task_to_out(task, agent.name))


@router.get("", response_model=list[TaskOut])
-async def list_tasks(agent_id: int | None = None, db: AsyncSession = Depends(get_db)):
-    """List all tasks, optionally filtered by agent_id."""
+async def list_tasks(
+    agent_id: int | None = Query(None),
+    q: str | None = Query(None, description="关键词搜索（任务名称）"),
+    tags: str | None = Query(None, description="标签筛选，逗号分隔"),
+    status: str | None = Query(None),
+    db: AsyncSession = Depends(get_db),
+):
+    """List all tasks, with optional search and filters."""
    svc = TaskService(db)
    agent_svc = AgentService(db)
+
+    # Build query
+    stmt = select(ScheduledTask)
    if agent_id:
-        tasks = await svc.list_by_agent(agent_id)
-    else:
-        tasks = await svc.list_all()
-    result = []
+        stmt = stmt.where(ScheduledTask.agent_id == agent_id)
+    if status:
+        stmt = stmt.where(ScheduledTask.status == status)
+    if q:
+        stmt = stmt.where(ScheduledTask.name.like(f"%{q}%"))
+    if tags:
+        tag_list = [t.strip() for t in tags.split(",") if t.strip()]
+        for tag in tag_list:
+            stmt = stmt.where(ScheduledTask.tags.like(f'%"{tag}"%'))
+
+    stmt = stmt.order_by(ScheduledTask.id)
+    result = await db.execute(stmt)
+    tasks = list(result.scalars().all())
+
+    output = []
    for t in tasks:
        agent = await agent_svc.get(t.agent_id)
-        result.append(TaskOut(**{**t.__dict__, "agent_name": agent.name if agent else ""}))
-    return result
+        output.append(TaskOut(**_task_to_out(t, agent.name if agent else "")))
+    return output


@router.get("/{task_id}", response_model=TaskOut)
@ -52,18 +92,29 @@ async def get_task(task_id: int, db: AsyncSession = Depends(get_db)):
    if not task:
        raise HTTPException(404, "Task not found")
    agent = await agent_svc.get(task.agent_id)
-    return TaskOut(**{**task.__dict__, "agent_name": agent.name if agent else ""})
+    return TaskOut(**_task_to_out(task, agent.name if agent else ""))


@router.put("/{task_id}", response_model=TaskOut)
 async def update_task(task_id: int, body: TaskUpdate, db: AsyncSession = Depends(get_db)):
    svc = TaskService(db)
    agent_svc = AgentService(db)
-    task = await svc.update(task_id, **body.model_dump(exclude_none=True))
+
+    # Handle tags separately (JSON serialization)
+    update_data = body.model_dump(exclude_none=True)
+    tags_list = update_data.pop("tags", None)
+
+    task = await svc.update(task_id, **update_data)
    if not task:
        raise HTTPException(404, "Task not found")
+
+    if tags_list is not None:
+        task.tags = json.dumps(tags_list, ensure_ascii=False)
+        await db.flush()
+        await db.refresh(task)
+
    agent = await agent_svc.get(task.agent_id)
-    return TaskOut(**{**task.__dict__, "agent_name": agent.name if agent else ""})
+    return TaskOut(**_task_to_out(task, agent.name if agent else ""))


@router.delete("/{task_id}", status_code=204)
--- a/backend/app/models/task.py
+++ b/backend/app/models/task.py
@ -18,6 +18,7 @@ class ScheduledTask(Base):
    cron_expression: Mapped[str] = mapped_column(String(64), nullable=False, comment="Cron 表达式, e.g. */5 * * * *")
    grace_period: Mapped[int] = mapped_column(Integer, default=300, comment="容忍秒数, 超时未执行则告警")
    status: Mapped[str] = mapped_column(String(32), default="active", comment="active / paused / stopped")
+    tags: Mapped[str | None] = mapped_column(Text, nullable=True, comment="标签 JSON 数组, e.g. [\"数据同步\",\"重要\"]")

    # 冗余字段方便查询
    last_run_at: Mapped[datetime | None] = mapped_column(DateTime, nullable=True, comment="最近一次执行时间")
--- a/backend/app/schemas/task.py
+++ b/backend/app/schemas/task.py
@ -10,6 +10,7 @@ class TaskCreate(BaseModel):
    description: str = Field(default="")
    cron_expression: str = Field(..., max_length=64)
    grace_period: int = Field(default=300, ge=0)
+    tags: list[str] = Field(default_factory=list)


 class TaskUpdate(BaseModel):
@ -18,6 +19,7 @@ class TaskUpdate(BaseModel):
    cron_expression: str | None = None
    grace_period: int | None = None
    status: str | None = None  # active / paused / stopped
+    tags: list[str] | None = None


 class TaskOut(BaseModel):
@ -29,6 +31,7 @@ class TaskOut(BaseModel):
    cron_expression: str
    grace_period: int
    status: str
+    tags: list[str] = Field(default_factory=list)
    last_run_at: datetime | None = None
    last_run_result: str | None = None
    next_run_at: datetime | None = None
--- a/backend/app/services/agent.py
+++ b/backend/app/services/agent.py
@ -54,3 +54,11 @@ class AgentService:
        stmt = select(func.count(ScheduledTask.id)).where(ScheduledTask.agent_id == agent_id)
        result = await self.db.execute(stmt)
        return result.scalar() or 0
+
+    async def delete(self, agent_id: int) -> bool:
+        agent = await self.get(agent_id)
+        if agent is None:
+            return False
+        await self.db.delete(agent)
+        await self.db.flush()
+        return True
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -10,6 +10,7 @@
      "dependencies": {
        "@element-plus/icons-vue": "^2.3.1",
        "axios": "^1.7.0",
+        "cronstrue": "^3.14.0",
        "dayjs": "^1.11.0",
        "echarts": "^5.5.0",
        "element-plus": "^2.7.0",
@ -1079,6 +1080,15 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/cronstrue": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/cronstrue/-/cronstrue-3.14.0.tgz",
+      "integrity": "sha512-XnW4vuK/jPJjmTyDWiej1Zq36Od7ITwxaV2O1pzHZuyMVvdy7NAvyvIBzybt+idqSpfqYuoDG7uf/ocGtJVWxA==",
+      "license": "MIT",
+      "bin": {
+        "cronstrue": "bin/cli.js"
+      }
+    },
    "node_modules/csstype": {
      "version": "3.2.3",
      "license": "MIT"
--- a/frontend/package.json
+++ b/frontend/package.json
@ -9,14 +9,15 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "vue": "^3.4.0",
-    "vue-router": "^4.3.0",
-    "element-plus": "^2.7.0",
    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^1.7.0",
+    "cronstrue": "^3.14.0",
    "dayjs": "^1.11.0",
    "echarts": "^5.5.0",
-    "vue-echarts": "^6.7.0"
+    "element-plus": "^2.7.0",
+    "vue": "^3.4.0",
+    "vue-echarts": "^6.7.0",
+    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.0",
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@ -42,9 +42,10 @@ export const listAgents = () => api.get('/agents')
 export const getAgent = (id) => api.get(`/agents/${id}`)
 export const createAgent = (data) => api.post('/agents', data)
 export const updateAgent = (id, data) => api.put(`/agents/${id}`, data)
+export const deleteAgent = (id) => api.delete(`/agents/${id}`)

 // Tasks
-export const listTasks = (agentId) => api.get('/tasks', { params: { agent_id: agentId } })
+export const listTasks = (params) => api.get('/tasks', { params })
 export const getTask = (id) => api.get(`/tasks/${id}`)
 export const createTask = (agentId, data) => api.post('/tasks', data, { params: { agent_id: agentId } })
 export const updateTask = (id, data) => api.put(`/tasks/${id}`, data)
--- a/frontend/src/assets/style.css
+++ b/frontend/src/assets/style.css
@ -230,3 +230,33 @@ html, body, #app {
  border: 1px solid var(--border-color) !important;
  backdrop-filter: blur(12px) !important;
 }
+
+/* Agent Avatar */
+.agent-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  flex-shrink: 0;
+  vertical-align: middle;
+  margin-right: 6px;
+}
+.agent-avatar-sm {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  flex-shrink: 0;
+  vertical-align: middle;
+  margin-right: 4px;
+}
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@ -3,10 +3,15 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
 import App from './App.vue'
 import router from './router'
 import './assets/style.css'

+// Extend dayjs with UTC plugin for timezone conversion
+dayjs.extend(utc)
+
 const app = createApp(App)

 // Register all Element Plus icons
@ -14,6 +19,118 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
 }

+// Global helper: cron expression to readable Chinese
+app.config.globalProperties.$cron = (expr) => {
+  if (!expr) return ''
+  try {
+    const parts = expr.trim().split(/\s+/)
+    if (parts.length !== 5) return expr
+    const [min, hour, dom, month, dow] = parts
+
+    // Helper: describe a cron field
+    const descField = (val, unit) => {
+      if (val === '*') return `每${unit}`
+      if (val.startsWith('*/')) return `每${val.slice(2)}${unit}`
+      if (val.includes(',')) {
+        const items = val.split(',').map(v => v.padStart(2, '0')).join('分、')
+        return `第 ${items}分`
+      }
+      if (val.includes('-')) {
+        const [from, to] = val.split('-')
+        return `${from.padStart(2,'0')}分到${to.padStart(2,'0')}分`
+      }
+      return `${val.padStart(2,'0')}${unit}`
+    }
+
+    const allStar = (...args) => args.every(v => v === '*')
+
+    // Every minute
+    if (min === '*' && hour === '*' && allStar(dom, month, dow)) return '每分钟'
+
+    // Every N minutes (always)
+    if (min.startsWith('*/') && hour === '*' && allStar(dom, month, dow)) {
+      return `每${min.slice(2)}分钟`
+    }
+
+    // Every N hours (at min 0)
+    if (min === '0' && hour.startsWith('*/') && allStar(dom, month, dow)) {
+      return `每${hour.slice(2)}小时`
+    }
+
+    // Specific minutes every hour
+    if (min !== '*' && !min.startsWith('*/') && hour === '*' && allStar(dom, month, dow)) {
+      if (min.includes(',')) {
+        const items = min.split(',').map(v => v.padStart(2, '0'))
+        return `每小时 ${items.join('、')}分`
+      }
+      return `每小时 第${min.padStart(2,'0')}分钟`
+    }
+
+    // Daily at specific time(s)
+    if (allStar(dom, month, dow)) {
+      if (min.startsWith('*/')) {
+        const interval = min.slice(2)
+        if (hour.includes('-')) {
+          const [hFrom, hTo] = hour.split('-').map(h => h.padStart(2,'0'))
+          return `每${interval}分钟（${hFrom}:00-${hTo}:00）`
+        }
+        if (hour !== '*') return `每${interval}分钟（${hour.padStart(2,'0')}点）`
+        return `每${interval}分钟`
+      }
+      if (hour.includes(',')) {
+        const times = hour.split(',').map(h => `${h.padStart(2,'0')}:${min.padStart(2,'0')}`)
+        return `每天 ${times.join('、')}`
+      }
+      if (hour.includes('-')) {
+        return `每天 ${hour.split('-')[0].padStart(2,'0')}:${min.padStart(2,'0')} 到 ${hour.split('-')[1].padStart(2,'0')}:${min.padStart(2,'0')}`
+      }
+      return `每天 ${hour.padStart(2,'0')}:${min.padStart(2,'0')}`
+    }
+
+    // Weekly
+    const dowNames = ['日', '一', '二', '三', '四', '五', '六', '日']
+    if (allStar(dom, month) && dow !== '*') {
+      if (dow.includes(',')) {
+        const days = dow.split(',').map(d => `周${dowNames[parseInt(d)]}`)
+        return `每${days.join('、')} ${hour.padStart(2,'0')}:${min.padStart(2,'0')}`
+      }
+      if (dow.includes('-')) {
+        const [from, to] = dow.split('-')
+        return `每周${dowNames[parseInt(from)]}到${dowNames[parseInt(to)]} ${hour.padStart(2,'0')}:${min.padStart(2,'0')}`
+      }
+      return `每周${dowNames[parseInt(dow)]} ${hour.padStart(2,'0')}:${min.padStart(2,'0')}`
+    }
+
+    // Every N minutes within specific hours (e.g., */15 9-18 * * *)
+    if (min.startsWith('*/') && !allStar(dom, month, dow)) {
+      const interval = min.slice(2)
+      let hourDesc = ''
+      if (hour !== '*') hourDesc = descField(hour, '点')
+      return `每${interval}分钟${hourDesc ? ` (${hourDesc})` : ''}`
+    }
+
+    return expr
+  } catch {
+    return expr
+  }
+}
+
+// Global helper: agent name → avatar { letter, bg color }
+const AVATAR_COLORS = [
+  '#667eea', '#22c55e', '#f59e0b', '#ef4444', '#ec4899',
+  '#8b5cf6', '#06b6d4', '#f97316', '#14b8a6', '#a855f7',
+  '#6366f1', '#84cc16', '#e11d48', '#0ea5e9',
+]
+app.config.globalProperties.$avatar = (name) => {
+  if (!name) return { letter: '?', bg: AVATAR_COLORS[0] }
+  const letter = name.trim()[0]
+  // Deterministic color from name
+  let hash = 0
+  for (let i = 0; i < name.length; i++) hash = ((hash << 5) - hash) + name.charCodeAt(i)
+  const idx = Math.abs(hash) % AVATAR_COLORS.length
+  return { letter, bg: AVATAR_COLORS[idx] }
+}
+
 app.use(ElementPlus, { locale: zhCn })
 app.use(router)
 app.mount('#app')
--- a/frontend/src/views/Agents.vue
+++ b/frontend/src/views/Agents.vue
@ -43,7 +43,10 @@
          <tbody>
            <tr v-for="a in agents" :key="a.id">
              <td class="cell-mono">#{{ a.id }}</td>
-              <td class="cell-name">{{ a.name }}</td>
+              <td>
+                <span class="agent-avatar" :style="{background: $avatar(a.name).bg}">{{ $avatar(a.name).letter }}</span>
+                <span class="cell-name">{{ a.name }}</span>
+              </td>
              <td class="cell-muted">{{ a.description || '—' }}</td>
              <td>
                <span class="tag" :class="a.status === 'active' ? 'tag-green' : 'tag-gray'">
@ -51,7 +54,7 @@
                </span>
              </td>
              <td class="cell-mono">{{ a.task_count }}</td>
-              <td class="cell-mono">{{ a.last_heartbeat_at ? beijing(a.last_heartbeat_at) : '—' }}</td>
+              <td class="cell-mono">{{ a.last_heartbeat_at ? dayjs.utc(a.last_heartbeat_at).local().format('MM-DD HH:mm') : '—' }}</td>
              <td>
                <code class="cell-key">{{ a.api_key.substring(0, 16) }}...</code>
                <button class="btn-icon" @click="copyKey(a.api_key)" title="复制 API Key">
@ -60,6 +63,8 @@
              </td>
              <td>
                <router-link to="/tasks" class="cell-link">任务</router-link>
+                <button class="cell-link-btn" style="color:var(--accent-1)" @click="showEdit(a)">编辑</button>
+                <button class="cell-link-btn" style="color:var(--danger)" @click="confirmDelete(a)">删除</button>
              </td>
            </tr>
            <tr v-if="agents.length === 0">
@ -70,12 +75,65 @@
      </div>
    </div>
  </div>
+
+  <!-- Edit Agent Modal -->
+  <div v-if="editAgent" class="modal-overlay" @click.self="editAgent = null">
+    <div class="modal">
+      <div class="modal-header">
+        <h4>编辑 Agent</h4>
+        <button class="modal-close" @click="editAgent = null">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="field">
+          <label>Agent 名称</label>
+          <div class="field-avatar-row">
+            <span class="agent-avatar-lg" :style="{background: $avatar(editForm.name).bg}">{{ $avatar(editForm.name).letter }}</span>
+            <input v-model="editForm.name" class="input" placeholder="Agent 名称" />
+          </div>
+        </div>
+        <div class="field">
+          <label>描述</label>
+          <input v-model="editForm.description" class="input" placeholder="描述" />
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-secondary" @click="editAgent = null">取消</button>
+        <button class="btn-primary" @click="handleEdit">保存</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Delete Confirm Modal -->
+  <div v-if="deleteTarget" class="modal-overlay" @click.self="deleteTarget = null">
+    <div class="modal" style="width:400px">
+      <div class="modal-header">
+        <h4>删除 Agent</h4>
+        <button class="modal-close" @click="deleteTarget = null">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p style="color:var(--text-secondary);font-size:14px;line-height:1.6">
+          确定要删除 Agent <strong style="color:var(--text-primary)">{{ deleteTarget.name }}</strong> 吗？
+        </p>
+        <p style="color:var(--text-muted);font-size:12px;margin-top:8px">
+          其关联的定时任务也将一并删除。Agent 后续仍可重新注册。
+        </p>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-secondary" @click="deleteTarget = null">取消</button>
+        <button class="btn-danger" @click="handleDelete">确认删除</button>
+      </div>
+    </div>
+  </div>
 </template>

 <script setup>
 import { ref, onMounted, computed } from 'vue'
-import { beijing } from '../utils/time.js'
-import { listAgents, getSystemConfig } from '../api/index.js'
+import dayjs from 'dayjs'
+import { listAgents, updateAgent, deleteAgent, getSystemConfig } from '../api/index.js'

 const agents = ref([])
 const tab = ref('curl')
@ -90,6 +148,40 @@ const loadData = async () => {
  baseUrl.value = cfgRes.data.base_url
 }

+// Edit
+const editAgent = ref(null)
+const editForm = ref({ name: '', description: '' })
+const showEdit = (agent) => {
+  editForm.value = { name: agent.name, description: agent.description }
+  editAgent.value = agent
+}
+const handleEdit = async () => {
+  try {
+    await updateAgent(editAgent.value.id, editForm.value)
+    editAgent.value = null
+    await loadData()
+    const { ElMessage } = await import('element-plus')
+    ElMessage.success('已更新')
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+// Delete
+const deleteTarget = ref(null)
+const confirmDelete = (agent) => { deleteTarget.value = agent }
+const handleDelete = async () => {
+  try {
+    await deleteAgent(deleteTarget.value.id)
+    deleteTarget.value = null
+    await loadData()
+    const { ElMessage } = await import('element-plus')
+    ElMessage.success('已删除')
+  } catch (e) {
+    console.error(e)
+  }
+}
+
 const copyKey = async (key) => {
  try {
    await navigator.clipboard.writeText(key)
@ -122,7 +214,7 @@ onMounted(loadData)
 </script>

 <style scoped>
-.agents-page { max-width: 1200px; }
+.agents-page {}
 .mb-24 { margin-bottom: 24px; }

 .section {
@ -234,4 +326,91 @@ onMounted(loadData)
  vertical-align: middle;
 }
 .btn-icon:hover { color: var(--accent-1); }
+
+/* Modal */
+.modal-overlay {
+  position: fixed; inset: 0; z-index: 1000;
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(4px);
+  display: flex; align-items: center; justify-content: center;
+}
+.modal {
+  width: 480px; max-width: 90vw;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
+  overflow: hidden;
+}
+.modal-header {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 16px 20px; border-bottom: 1px solid var(--border-color);
+}
+.modal-header h4 { font-size: 15px; font-weight: 600; color: #e0e0f0; margin: 0; }
+.modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; }
+.modal-close:hover { color: #fff; }
+.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
+.modal-footer {
+  display: flex; justify-content: flex-end; gap: 8px;
+  padding: 16px 20px; border-top: 1px solid var(--border-color);
+}
+
+.field { display: flex; flex-direction: column; gap: 6px; }
+.field label { font-size: 12px; color: var(--text-secondary); }
+.field-avatar-row { display: flex; align-items: center; gap: 12px; }
+.input {
+  flex: 1;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  background: rgba(255,255,255,0.04);
+  color: var(--text-primary);
+  font-size: 13px;
+  outline: none;
+}
+.input:focus { border-color: var(--accent-1); }
+
+.agent-avatar-lg {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.btn-primary {
+  padding: 7px 16px; border-radius: 8px;
+  border: none;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: #fff; font-size: 13px; font-weight: 500;
+  cursor: pointer;
+}
+.btn-primary:hover { opacity: 0.9; }
+.btn-secondary {
+  padding: 7px 16px; border-radius: 8px;
+  border: 1px solid var(--border-color);
+  background: transparent;
+  color: var(--text-secondary); font-size: 13px;
+  cursor: pointer;
+}
+.btn-secondary:hover { color: #fff; border-color: rgba(255,255,255,0.15); }
+.btn-danger {
+  padding: 7px 16px; border-radius: 8px;
+  border: none;
+  background: rgba(239,68,68,0.8);
+  color: #fff; font-size: 13px; font-weight: 500;
+  cursor: pointer;
+}
+.btn-danger:hover { background: #ef4444; }
+
+.cell-link-btn {
+  background: none; border: none;
+  font-size: 13px; cursor: pointer;
+  margin-left: 8px;
+}
+.cell-link-btn:hover { text-decoration: underline; }
 </style>
--- a/frontend/src/views/Alerts.vue
+++ b/frontend/src/views/Alerts.vue
@ -20,7 +20,7 @@
                {{ a.alert_type === 'missed_run' ? '未按时执行' : '执行失败' }}
              </span>
              <span class="alert-task">{{ a.task_name || '未知任务' }}</span>
-              <span class="alert-time">{{ beijing(a.created_at) }}</span>
+              <span class="alert-time">{{ dayjs.utc(a.created_at).local().format('MM-DD HH:mm') }}</span>
            </div>
            <div class="alert-msg">{{ a.message }}</div>
            <div class="alert-bottom">
@ -68,7 +68,7 @@ onMounted(loadData)
 </script>

 <style scoped>
-.alerts-page { max-width: 1200px; }
+.alerts-page {}

 .section {
  background: var(--bg-card);
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@ -117,15 +117,18 @@
          </thead>
          <tbody>
            <tr v-for="t in tasks" :key="t.id">
-              <td><span class="cell-badge">{{ t.agent_name }}</span></td>
+              <td>
+                <span class="agent-avatar" :style="{background: $avatar(t.agent_name).bg}">{{ $avatar(t.agent_name).letter }}</span>
+                <span class="cell-badge">{{ t.agent_name }}</span>
+              </td>
              <td class="cell-name">{{ t.name }}</td>
-              <td><code class="cell-code">{{ t.cron_expression }}</code></td>
+              <td><code class="cell-code" :title="t.cron_expression">{{ $cron(t.cron_expression) }}</code></td>
              <td>
                <span class="tag" :class="t.status === 'active' ? 'tag-green' : 'tag-gray'">
                  {{ t.status === 'active' ? '运行中' : t.status === 'paused' ? '已暂停' : '已停止' }}
                </span>
              </td>
-              <td class="cell-mono">{{ t.last_run_at ? beijing(t.last_run_at) : '—' }}</td>
+              <td class="cell-mono">{{ t.last_run_at ? dayjs.utc(t.last_run_at).local().format('MM-DD HH:mm') : '—' }}</td>
              <td>
                <span v-if="t.last_run_result" class="tag" :class="t.last_run_result === 'success' ? 'tag-green' : 'tag-red'">
                  {{ t.last_run_result === 'success' ? '成功' : '失败' }}
@ -343,7 +346,6 @@ const copyScript = async () => {

 <style scoped>
 .dashboard {
-  max-width: 1200px;
 }

 /* ── Onboarding Panel ─────────────────────────── */
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@ -246,7 +246,7 @@ onMounted(loadData)
 </script>

 <style scoped>
-.settings-page { max-width: 1200px; }
+.settings-page {}
 .mb-24 { margin-bottom: 24px; }

 .section {
--- a/frontend/src/views/TaskDetail.vue
+++ b/frontend/src/views/TaskDetail.vue
@ -13,10 +13,16 @@
        </span>
      </div>
      <div class="detail-grid">
-        <div class="detail-item"><span class="detail-label">Agent</span><span class="detail-value">{{ task.agent_name }}</span></div>
-        <div class="detail-item"><span class="detail-label">Cron</span><code class="detail-code">{{ task.cron_expression }}</code></div>
+        <div class="detail-item">
+  <span class="detail-label">Agent</span>
+  <span class="detail-value">
+    <span class="agent-avatar-sm" :style="{background: $avatar(task.agent_name).bg}">{{ $avatar(task.agent_name).letter }}</span>
+    {{ task.agent_name }}
+  </span>
+</div>
+        <div class="detail-item"><span class="detail-label">Cron</span><code class="detail-code" :title="task.cron_expression">{{ $cron(task.cron_expression) }}</code></div>
        <div class="detail-item"><span class="detail-label">容忍窗口</span><span class="detail-value">{{ task.grace_period }}s</span></div>
-        <div class="detail-item"><span class="detail-label">最近运行</span><span class="detail-value mono">{{ task.last_run_at ? beijing(task.last_run_at, 'YYYY-MM-DD HH:mm:ss') : '—' }}</span></div>
+        <div class="detail-item"><span class="detail-label">最近运行</span><span class="detail-value mono">{{ task.last_run_at ? dayjs.utc(task.last_run_at).local().format('YYYY-MM-DD HH:mm:ss') : '—' }}</span></div>
        <div class="detail-item">
          <span class="detail-label">最近结果</span>
          <span v-if="task.last_run_result" class="tag" :class="task.last_run_result === 'success' ? 'tag-green' : 'tag-red'">
@ -25,7 +31,7 @@
          <span v-else class="detail-value">—</span>
        </div>
        <div class="detail-item"><span class="detail-label">执行次数</span><span class="detail-value mono">{{ task.total_run_count }}</span></div>
-        <div class="detail-item"><span class="detail-label">预计下次</span><span class="detail-value mono">{{ task.next_run_at ? beijing(task.next_run_at, 'YYYY-MM-DD HH:mm:ss') : '待计算' }}</span></div>
+        <div class="detail-item"><span class="detail-label">预计下次</span><span class="detail-value mono">{{ task.next_run_at ? dayjs.utc(task.next_run_at).local().format('YYYY-MM-DD HH:mm:ss') : '待计算' }}</span></div>
        <div class="detail-item"><span class="detail-label">描述</span><span class="detail-value">{{ task.description || '无' }}</span></div>
      </div>
    </div>
@ -55,7 +61,7 @@
                  {{ e.status === 'success' ? '成功' : e.status === 'failed' ? '失败' : '运行中' }}
                </span>
              </td>
-              <td class="cell-mono">{{ beijing(e.started_at, 'MM-DD HH:mm:ss') }}</td>
+              <td class="cell-mono">{{ dayjs.utc(e.started_at).local().format('MM-DD HH:mm:ss') }}</td>
              <td class="cell-mono">{{ e.duration_ms ?? '—' }}</td>
              <td class="cell-muted cell-ellipsis">{{ e.result || '—' }}</td>
              <td><button class="cell-link-btn" @click="showLog(e)">日志</button></td>
@ -118,8 +124,6 @@ const showLog = (row) => {
 </script>

 <style scoped>
-.task-detail { max-width: 1200px; }
-
 .back-btn {
  display: inline-flex;
  align-items: center;
--- a/frontend/src/views/Tasks.vue
+++ b/frontend/src/views/Tasks.vue
@ -1,36 +1,29 @@
 <template>
  <div class="tasks-page">
+    <!-- Search & Filter Bar -->
    <div class="section mb-24">
-      <div class="section-header collapsible" @click="showGuide = !showGuide">
-        <h3>定时任务 — 由 AI Agent 自动管理</h3>
-        <div class="section-toggle">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-               :style="{ transform: showGuide ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }">
-            <polyline points="6 9 12 15 18 9"/>
-          </svg>
-          <span class="toggle-label">{{ showGuide ? '收起指令' : '展开指令' }}</span>
-        </div>
+      <div class="section-header">
+        <h3>所有任务</h3>
      </div>
-      <div v-if="showGuide" class="onboard-body">
-        <p>将下方指令发送给您的 AI Agent，它会自动汇报执行结果并管理定时任务。</p>
-        <div class="code-block">
-          <div class="code-tabs">
-            <button :class="{ active: tab === 'report' }" @click="tab = 'report'">汇报执行</button>
-            <button :class="{ active: tab === 'register' }" @click="tab = 'register'">注册任务</button>
-            <button :class="{ active: tab === 'batch' }" @click="tab = 'batch'">批量注册</button>
-          </div>
-          <div class="code-body">
-            <pre>{{ codes[tab] }}</pre>
-          </div>
-          <button class="btn-copy" @click="copyCode">复制</button>
+      <div class="search-bar">
+        <div class="search-input-wrap">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+          <input v-model="searchQ" class="search-input" placeholder="搜索任务名称..." @input="loadData" />
        </div>
+        <input v-model="searchTags" class="search-input" style="width:200px" placeholder="标签筛选（逗号分隔）" @input="loadData" />
+        <select v-model="searchStatus" class="search-input" style="width:130px" @change="loadData">
+          <option value="">全部状态</option>
+          <option value="active">运行中</option>
+          <option value="paused">已暂停</option>
+          <option value="stopped">已停止</option>
+        </select>
      </div>
    </div>

    <!-- Task list -->
    <div class="section">
      <div class="section-header">
-        <h3>所有任务</h3>
+        <h3>任务列表（{{ tasks.length }}）</h3>
      </div>
      <div class="table-wrap">
        <table class="data-table">
@ -40,6 +33,7 @@
              <th>Agent</th>
              <th>任务名称</th>
              <th>Cron</th>
+              <th>标签</th>
              <th>状态</th>
              <th>最近运行</th>
              <th>结果</th>
@ -50,15 +44,22 @@
          <tbody>
            <tr v-for="t in tasks" :key="t.id">
              <td class="cell-mono">#{{ t.id }}</td>
-              <td><span class="cell-badge">{{ t.agent_name }}</span></td>
+              <td>
+                <span class="agent-avatar" :style="{background: $avatar(t.agent_name).bg}">{{ $avatar(t.agent_name).letter }}</span>
+                <span class="cell-badge">{{ t.agent_name }}</span>
+              </td>
              <td class="cell-name">{{ t.name }}</td>
-              <td><code class="cell-code">{{ t.cron_expression }}</code></td>
+              <td><code class="cell-code" :title="t.cron_expression">{{ $cron(t.cron_expression) }}</code></td>
+              <td>
+                <span v-for="tag in (t.tags || [])" :key="tag" class="tag-pill">{{ tag }}</span>
+                <span v-if="!t.tags || t.tags.length === 0" class="cell-muted">—</span>
+              </td>
              <td>
                <span class="tag" :class="t.status === 'active' ? 'tag-green' : 'tag-gray'">
                  {{ t.status === 'active' ? '运行中' : t.status === 'paused' ? '已暂停' : '已停止' }}
                </span>
              </td>
-              <td class="cell-mono">{{ t.last_run_at ? beijing(t.last_run_at) : '—' }}</td>
+              <td class="cell-mono">{{ t.last_run_at ? dayjs.utc(t.last_run_at).local().format('MM-DD HH:mm') : '—' }}</td>
              <td>
                <span v-if="t.last_run_result" class="tag" :class="t.last_run_result === 'success' ? 'tag-green' : 'tag-red'">
                  {{ t.last_run_result === 'success' ? '成功' : '失败' }}
@ -68,182 +69,121 @@
              <td class="cell-mono">{{ t.total_run_count }}</td>
              <td>
                <router-link :to="`/tasks/${t.id}`" class="cell-link">详情</router-link>
-                <button class="btn-icon" @click="handleDelete(t)" title="删除">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
-                </button>
+                <button class="cell-link-btn" style="color:var(--accent-1);margin-left:6px" @click="showEdit(t)">编辑</button>
+                <button class="cell-link-btn" style="color:var(--danger);margin-left:4px" @click="handleDelete(t)">删除</button>
              </td>
            </tr>
            <tr v-if="tasks.length === 0">
-              <td colspan="9" class="cell-empty">暂无任务 — Agent 注册后会自动出现在这里</td>
+              <td colspan="10" class="cell-empty">暂无任务 — Agent 注册后会自动出现在这里</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
+
+    <!-- Edit Task Modal -->
+    <div v-if="editTask" class="modal-overlay" @click.self="editTask = null">
+      <div class="modal modal-wide">
+        <div class="modal-header">
+          <h4>编辑任务</h4>
+          <button class="modal-close" @click="editTask = null">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <div class="form-fields">
+            <div class="field">
+              <label>任务名称</label>
+              <input v-model="editForm.name" class="input" />
+            </div>
+            <div class="field">
+              <label>标签（回车添加）</label>
+              <div class="tags-edit">
+                <span v-for="(tag, i) in editForm.tags" :key="i" class="tag-pill">
+                  {{ tag }}
+                  <button class="tag-remove" @click="editForm.tags.splice(i, 1)">
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                  </button>
+                </span>
+                <input v-model="tagInput" class="tag-input" placeholder="输入标签后回车" @keydown.enter.prevent="addTag" @keydown.,.prevent="addTag" />
+              </div>
+            </div>
+            <div class="field">
+              <label>描述</label>
+              <input v-model="editForm.description" class="input" placeholder="任务描述（选填）" />
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn-secondary" @click="editTask = null">取消</button>
+          <button class="btn-primary" @click="handleEdit">保存</button>
+        </div>
+      </div>
+    </div>
  </div>
 </template>

 <script setup>
-import { ref, onMounted, computed } from 'vue'
-import { beijing } from '../utils/time.js'
-import { listTasks, deleteTask, getSystemConfig } from '../api/index.js'
+import { ref, onMounted } from 'vue'
+import dayjs from 'dayjs'
+import { listTasks, deleteTask, updateTask } from '../api/index.js'

 const tasks = ref([])
-const tab = ref('report')
-const showGuide = ref(false)
-const baseUrl = ref(window.location.origin)
+const searchQ = ref('')
+const searchTags = ref('')
+const searchStatus = ref('')

 const loadData = async () => {
-  const [taskRes, cfgRes] = await Promise.all([
-    listTasks(),
-    getSystemConfig(),
-  ])
-  tasks.value = taskRes.data
-  baseUrl.value = cfgRes.data.base_url
+  const params = {}
+  if (searchQ.value) params.q = searchQ.value
+  if (searchTags.value) params.tags = searchTags.value
+  if (searchStatus.value) params.status = searchStatus.value
+  const res = await listTasks(params)
+  tasks.value = res.data
+}
+
+// Edit
+const editTask = ref(null)
+const editForm = ref({ name: '', description: '', tags: [] })
+const tagInput = ref('')
+
+const addTag = () => {
+  const val = tagInput.value.replace(/,/g, '').trim()
+  if (val && !editForm.value.tags.includes(val)) editForm.value.tags.push(val)
+  tagInput.value = ''
+}
+
+const showEdit = (t) => {
+  editForm.value = {
+    name: t.name,
+    description: t.description || '',
+    tags: [...(t.tags || [])],
+  }
+  editTask.value = t
+}
+
+const handleEdit = async () => {
+  try {
+    await updateTask(editTask.value.id, editForm.value)
+    editTask.value = null
+    await loadData()
+    const { ElMessage } = await import('element-plus')
+    ElMessage.success('已保存')
+  } catch (e) { console.error(e) }
 }

 const handleDelete = async (row) => {
  try {
    await deleteTask(row.id)
    await loadData()
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-const codes = computed(() => {
-  const b = baseUrl.value
-  return {
-    report: `# TaskPulse — 汇报执行结果
-
-你已注册到 TaskPulse。每次任务运行后（无论成功失败），主动汇报执行结果。
-
-## 汇报成功
-
-curl -X POST ${b}/api/tasks/<TASK_ID>/executions \\
-  -H "Content-Type: application/json" \\
-  -H "Authorization: Bearer <API_KEY>" \\
-  -d '{"status":"success","duration_ms":2500,"log":"[INFO] 任务执行完成，同步了100条记录"}'
-
-## 汇报失败
-
-curl -X POST ${b}/api/tasks/<TASK_ID>/executions \\
-  -H "Content-Type: application/json" \\
-  -H "Authorization: Bearer <API_KEY>" \\
-  -d '{"status":"failed","duration_ms":1200,"log":"[ERROR] 连接超时","error_message":"TimeoutError: connection to DB timed out"}'
-
-## 修改你的代码自动汇报
-
-在你的每个定时任务函数末尾，加上汇报逻辑。参考以下实现：
-
-import time
-import requests
-
-def run_task(task_func, task_id, api_key):
-    """包裹你的任务函数，自动汇报执行结果"""
-    start = time.time()
-    try:
-        result = task_func()
-        elapsed = int((time.time() - start) * 1000)
-        requests.post(f"${b}/api/tasks/{task_id}/executions",
-            headers={"Authorization": f"Bearer {api_key}"},
-            json={"status": "success", "duration_ms": elapsed, "log": str(result)})
-    except Exception as e:
-        elapsed = int((time.time() - start) * 1000)
-        requests.post(f"${b}/api/tasks/{task_id}/executions",
-            headers={"Authorization": f"Bearer {api_key}"},
-            json={"status": "failed", "duration_ms": elapsed, "error_message": str(e)})
-
-# 在你的循环/调度中这样使用：
-run_task(my_task_func, TASK_ID, API_KEY)`,
-    register: `# TaskPulse — 注册新任务
-
-你需要注册自己管理的每一个定时任务，系统才知道你的执行计划。
-
-## 单个注册
-
-curl -X POST "${b}/api/tasks?agent_id=<AGENT_ID>" \\
-  -H "Content-Type: application/json" \\
-  -H "Authorization: Bearer <API_KEY>" \\
-  -d '{"name":"数据同步","cron_expression":"*/5 * * * *","description":"每5分钟同步一次数据","grace_period":300}'
-
-参数说明：
- name: 任务名称（必填）
- cron_expression: Cron 表达式，格式：分 时 日 月 周（必填）
- description: 任务描述（可选）
- grace_period: 容忍窗口（秒），任务超时N秒未执行则告警（默认300）
-
-## 查看已注册的任务
-
-curl -X GET "${b}/api/tasks" \\
-  -H "Authorization: Bearer <API_KEY>"
-
-## 更新现有任务（修改 cron 等）
-
-curl -X PUT "${b}/api/tasks/<TASK_ID>" \\
-  -H "Content-Type: application/json" \\
-  -H "Authorization: Bearer <API_KEY>" \\
-  -d '{"cron_expression":"0 * * * *","status":"active"}'
-
-## 删除任务
-
-curl -X DELETE "${b}/api/tasks/<TASK_ID>" \\
-  -H "Authorization: Bearer <API_KEY>"`,
-    batch: `# TaskPulse — 批量注册（推荐）
-
-如果你有多个定时任务，推荐使用批量注册接口，一次完成 Agent 注册 + 所有任务登记。
-
-## 批量注册 Agent + 全部任务
-
-curl -X POST ${b}/api/agents/register-with-tasks \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "name": "<你的Agent名称>",
-    "description": "<你的职责描述>",
-    "tasks": [
-      {"name": "数据同步", "cron_expression": "*/5 * * * *", "description": "定时同步数据", "grace_period": 300},
-      {"name": "日报通知", "cron_expression": "0 9 * * *", "description": "每天早上9点生成报告", "grace_period": 600},
-      {"name": "周报汇总", "cron_expression": "0 10 * * 1", "description": "每周一早10点汇总", "grace_period": 900}
-    ]
-  }'
-
-响应中包含 agent 信息和任务创建数量。返回的 api_key 请保存好。
-
-## Python 示例
-
-import requests
-
-resp = requests.post(f"${b}/api/agents/register-with-tasks", json={
-    "name": "data-agent",
-    "description": "数据相关的全部定时任务",
-    "tasks": [
-        {"name": "sync-data", "cron_expression": "*/5 * * * *"},
-        {"name": "daily-report", "cron_expression": "0 9 * * *"}
-    ]
-})
-result = resp.json()
-print(f"Agent ID: {result['agent']['id']}, 任务数: {result['tasks_created']}")
-API_KEY = result["agent"]["api_key"]
-
---
-
-注册完成后，回到仪表盘页面，将「汇报执行结果」的指令一并发送给 AI Agent，它就知道如何自动向你汇报运行状态。`,
-  }
-})
-
-const copyCode = async () => {
-  try {
-    await navigator.clipboard.writeText(codes.value[tab.value])
-    const { ElMessage } = await import('element-plus')
-    ElMessage.success('已复制')
-  } catch {}
+  } catch (e) { console.error(e) }
 }

 onMounted(loadData)
 </script>

 <style scoped>
-.tasks-page { max-width: 1200px; }
+.tasks-page {}
 .mb-24 { margin-bottom: 24px; }

 .section {
@ -265,37 +205,32 @@ onMounted(loadData)
 }
 .section-toggle:hover { color: var(--text-secondary); }

-.onboard-body { padding: 20px; }
-.onboard-body > p { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
-
-.code-block {
-  position: relative;
-  background: rgba(0,0,0,0.3);
-  border-radius: 10px;
-  overflow: hidden;
-}
-.code-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.06); }
-.code-tabs button {
-  padding: 8px 16px; background: none; border: none;
-  color: rgba(255,255,255,0.4); font-size: 12px; cursor: pointer;
-  border-bottom: 2px solid transparent;
-}
-.code-tabs button.active { color: #a8b4ff; border-bottom-color: #667eea; }
-.code-body { padding: 16px; overflow-x: auto; }
-.code-body pre {
-  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 12px; line-height: 1.7; color: rgba(255,255,255,0.75);
-  white-space: pre; margin: 0;
-}
-.btn-copy {
-  position: absolute; top: 44px; right: 12px;
-  padding: 4px 12px; border-radius: 6px;
-  border: 1px solid rgba(255,255,255,0.1);
-  background: rgba(255,255,255,0.06);
-  color: rgba(255,255,255,0.5); font-size: 11px; cursor: pointer;
-}
-.btn-copy:hover { background: rgba(255,255,255,0.1); color: #fff; }
+/* Search */
+.search-bar {
+  display: flex; gap: 10px; padding: 12px 20px;
+  align-items: center;
+}
+.search-input-wrap {
+  display: flex; align-items: center; gap: 8px; flex: 1;
+  padding: 0 12px;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  background: rgba(255,255,255,0.04);
+  color: var(--text-muted);
+}
+.search-input-wrap svg { flex-shrink: 0; }
+.search-input {
+  flex: 1;
+  padding: 8px 0;
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--text-primary);
+  font-size: 13px;
+}
+.search-input::placeholder { color: var(--text-muted); }

+/* Table */
 .table-wrap { overflow-x: auto; }
 .data-table { width: 100%; border-collapse: collapse; }
 .data-table th {
@ -322,17 +257,92 @@ onMounted(loadData)
 .cell-mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-secondary); }
 .cell-muted { color: var(--text-muted); }
 .cell-empty { text-align: center; color: var(--text-muted); padding: 40px 16px !important; }
-.cell-link { color: var(--accent-1); text-decoration: none; font-size: 13px; margin-right: 8px; }
+.cell-link { color: var(--accent-1); text-decoration: none; font-size: 13px; }
 .cell-link:hover { text-decoration: underline; }
+.cell-link-btn { background: none; border: none; font-size: 12px; cursor: pointer; }
+.cell-link-btn:hover { text-decoration: underline; }

 .tag { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
 .tag-green { background: rgba(34,197,94,0.12); color: #4ade80; }
 .tag-red { background: rgba(239,68,68,0.12); color: #f87171; }
 .tag-gray { background: rgba(255,255,255,0.05); color: var(--text-secondary); }

-.btn-icon {
-  background: none; border: none; color: var(--text-muted);
-  cursor: pointer; padding: 4px; vertical-align: middle;
+/* Tag Pills */
+.tag-pill {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  background: rgba(102,126,234,0.12);
+  color: #a8b4ff;
+  margin-right: 4px;
+  margin-bottom: 2px;
+  white-space: nowrap;
 }
-.btn-icon:hover { color: var(--danger); }
+
+/* Modal */
+.modal-overlay {
+  position: fixed; inset: 0; z-index: 1000;
+  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
+  display: flex; align-items: center; justify-content: center;
+}
+.modal {
+  width: 480px; max-width: 90vw;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
+  overflow: hidden;
+}
+.modal-wide { width: 560px; }
+.modal-header {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 16px 20px; border-bottom: 1px solid var(--border-color);
+}
+.modal-header h4 { font-size: 15px; font-weight: 600; color: #e0e0f0; margin: 0; }
+.modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; }
+.modal-close:hover { color: #fff; }
+.modal-body { padding: 20px; }
+.modal-footer {
+  display: flex; justify-content: flex-end; gap: 8px;
+  padding: 16px 20px; border-top: 1px solid var(--border-color);
+}
+
+.form-fields { display: flex; flex-direction: column; gap: 16px; }
+.field { display: flex; flex-direction: column; gap: 6px; }
+.field label { font-size: 12px; color: var(--text-secondary); }
+.input {
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  background: rgba(255,255,255,0.04);
+  color: var(--text-primary);
+  font-size: 13px;
+  outline: none;
+}
+.input:focus { border-color: var(--accent-1); }
+select.input { cursor: pointer; }
+
+.tags-edit {
+  display: flex; flex-wrap: wrap; gap: 4px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  background: rgba(255,255,255,0.04);
+  min-height: 36px;
+  align-items: center;
+}
+.tag-remove { background: none; border: none; color: inherit; cursor: pointer; padding: 0; margin-left: 2px; opacity: 0.6; }
+.tag-remove:hover { opacity: 1; }
+.tag-input {
+  flex: 1; min-width: 100px;
+  background: none; border: none; outline: none;
+  color: var(--text-primary);
+  font-size: 12px;
+}
+.tag-input::placeholder { color: var(--text-muted); }
+
+.btn-primary { padding: 7px 16px; border-radius: 8px; border: none; background: linear-gradient(135deg,#667eea,#764ba2); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; }
+.btn-primary:hover { opacity: 0.9; }
+.btn-secondary { padding: 7px 16px; border-radius: 8px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); font-size: 13px; cursor: pointer; }
+.btn-secondary:hover { color: #fff; border-color: rgba(255,255,255,0.15); }
 </style>