feat(web): 独立任务看板页面，废弃 OKR 前端（P2）

新增 /:id/task-board 路由，复用 GoalTaskPane/goal-task-model 的既有逻辑铺满整页；废弃 /okr 路由与 OkrDashboard.vue，清掉 CompanyDashboard 里挂着"goals"名字、实际渲染旧 OKR 树的那个 tab；导航入口换成 "任务看板"。按 39 号设计文档 §二 P2 落地，后端 OKR 子系统本次不动。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BwG4b7Nq1NLR9eeE3M9Us9

feat(web): 独立任务看板页面，废弃 OKR 前端（P2）
新增 /:id/task-board 路由，复用 GoalTaskPane/goal-task-model 的既有逻辑铺满整页；废弃 /okr 路由与 OkrDashboard.vue，清掉 CompanyDashboard 里挂着"goals"名字、实际渲染旧 OKR 树的那个 tab；导航入口换成 "任务看板"。按 39 号设计文档 §二 P2 落地，后端 OKR 子系统本次不动。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BwG4b7Nq1NLR9eeE3M9Us9
yibo
1 parent a00590ad
Showing 5 changed files with 133 additions and 586 deletions
web/src/components/AppNav.vue
web/src/router/index.js
web/src/views/CompanyDashboard.vue
web/src/views/OkrDashboard.vue
web/src/views/TaskBoard.vue
@@ -61,8 +61,8 @@
         <a :href="`/${currentCompany.id}/pipelines`" target="_blank" class="nav-link" :class="{ active: $route.params.tab === 'pipelines' || $route.params.tab === 'sop' }">
           ⚙️ SOP
         </a>
-        <a :href="`/${currentCompany.id}/goals`" target="_blank" class="nav-link" :class="{ active: $route.params.tab === 'goals' || $route.params.tab === 'okr' }">
-          🎯 OKR
+        <a :href="`/${currentCompany.id}/task-board`" target="_blank" class="nav-link" :class="{ active: $route.path.endsWith('/task-board') }">
+          🗂️ 任务看板
         </a>
         <a :href="`/${currentCompany.id}/files`" target="_blank" class="nav-link" :class="{ active: $route.params.tab === 'files' }">
           📁 Files
@@ -36,7 +36,10 @@ const routes = [
     component: () => import('@/views/CompanyDashboard.vue'),
   },
   {
-    path: '/:id/:tab(overview|agents|pipelines|goals|sop|okr|team|files|messages|skills|jobs|workspace)',
+    // 39 号文档 §二 P2：'goals'/'okr' 两个 tab 值已摘掉 —— 前者是 OKR 树的历史命名残留
+    // （真正的 goal/task 看板走下面 'task-board' 独立路由，不挤在这条 :tab 正则里），
+    // 后者是随 /okr 一起废弃的孤儿页面。
+    path: '/:id/:tab(overview|agents|pipelines|sop|team|files|messages|skills|jobs|workspace)',
     name: 'CompanyDetail',
     component: () => import('@/views/CompanyDashboard.vue'),
     props: true
@@ -50,9 +53,11 @@ const routes = [
     props: true,
   },
   {
-    path: '/okr',
-    name: 'OkrDashboard',
-    component: () => import('@/views/OkrDashboard.vue'),
+    // 39 号文档 §二 P2：goal/task 两级看板独立页，同样不挤进 :tab 正则（信息密度高，值得一整页）。
+    path: '/:id/task-board',
+    name: 'TaskBoard',
+    component: () => import('@/views/TaskBoard.vue'),
+    props: true,
   },
   // 新增独立页面
   {
@@ -43,6 +43,11 @@
           <button class="btn-templates" @click="goToGraphConsole" style="border: none; background: transparent;">
             🕸️ 执行控制台
           </button>
+          <!-- 39 号文档 §二 P2：goal/task 看板独立页入口，同一处放法（不挤进 :tab 白名单，
+               按 goToGraphConsole 的先例给一个跳转按钮）。 -->
+          <button class="btn-templates" @click="goToTaskBoard" style="border: none; background: transparent;">
+            🗂️ 任务看板
+          </button>
           <button class="btn-templates" @click="showTemplates = !showTemplates" style="border: none; background: transparent;">
             📦 模板库 ({{ templates.length }})
           </button>
@@ -355,103 +360,6 @@
         </div>
       </div>
-      <!-- Tab: Goals (Full OKR Tree) -->
-      <div v-if="activeTab === 'goals'" class="tab-content">
-        <div class="okr-layout">
-          <!-- Left: Goal List -->
-          <div class="okr-sidebar">
-            <div class="okr-sidebar-header">
-              <span>🎯 OKR 目标</span>
-              <span class="okr-count" v-if="goals.length">{{ goals.length }}</span>
-            </div>
-            <div class="okr-goal-list">
-              <div
-                v-for="g in goals" :key="g.id"
-                class="okr-goal-card" :class="{ active: selectedGoalId === g.id }"
-                @click="selectGoalDetail(g.id)"
-              >
-                <div class="okr-goal-top">
-                  <span class="okr-gid">{{ g.id }}</span>
-                  <span class="okr-gstatus" :class="g.status">{{ okrStatusLabel(g.status) }}</span>
-                </div>
-                <div class="okr-gtitle">{{ g.title }}</div>
-                <div class="okr-gprogress">
-                  <div class="okr-pbar"><div class="okr-pfill" :style="{ width: (g.progress * 100) + '%' }"></div></div>
-                  <span class="okr-ppct">{{ Math.round(g.progress * 100) }}%</span>
-                </div>
-                <div class="okr-gmeta">
-                  <span>👤 {{ g.owner }}</span>
-                  <span>{{ g.doneCount || 0 }}/{{ g.totalCount || 0 }}</span>
-                </div>
-              </div>
-              <div v-if="goals.length === 0" class="empty-mini">暂无目标</div>
-            </div>
-          </div>
-
-          <!-- Right: Goal Detail + Node Tree -->
-          <div class="okr-detail" v-if="selectedGoalDetail">
-            <div class="okr-hero">
-              <div class="okr-hero-row">
-                <span class="okr-hero-id">{{ selectedGoalDetail.id }}</span>
-                <span class="okr-hero-status" :class="selectedGoalDetail.status">{{ okrStatusLabel(selectedGoalDetail.status) }}</span>
-                <span class="okr-hero-owner">👤 {{ selectedGoalDetail.owner }}</span>
-              </div>
-              <h2 class="okr-hero-title">{{ selectedGoalDetail.title }}</h2>
-              <p class="okr-hero-desc">{{ selectedGoalDetail.description || '暂无详细描述' }}</p>
-              <div class="okr-hero-progress" v-if="selectedGoalProgress">
-                <div class="okr-hp-top">
-                  <span>目标总体进度</span>
-                  <span class="okr-hp-pct">{{ Math.round(selectedGoalProgress.progress * 100) }}%</span>
-                </div>
-                <div class="okr-hp-bar"><div class="okr-hp-fill" :style="{ width: (selectedGoalProgress.progress * 100) + '%' }"></div></div>
-                <div class="okr-hp-stats">
-                  <span>总: {{ selectedGoalProgress.total }}</span>
-                  <span class="stat-d">✅ {{ selectedGoalProgress.done }}</span>
-                  <span class="stat-p">🔄 {{ selectedGoalProgress.inProgress }}</span>
-                  <span class="stat-w">⏳ {{ selectedGoalProgress.pending }}</span>
-                </div>
-              </div>
-            </div>
-            <div class="okr-tree-area">
-              <h3 class="okr-tree-title">OKR 拆解树</h3>
-              <div class="okr-tree">
-                <div
-                  v-for="node in okrSortedNodes" :key="node.id"
-                  class="okr-tnode"
-                >
-                  <div class="okr-tnode-line">
-                    <div class="okr-tnode-indent" :style="{ width: (node.level - 2) * 24 + 'px' }"></div>
-                    <div class="okr-tnode-card" :class="[node.status, 'okr-lv-' + node.level]">
-                      <div class="okr-tnode-hdr">
-                        <span class="okr-nid">{{ node.id }}</span>
-                        <span class="okr-ntype">{{ okrLevelName(node.level) }}</span>
-                        <span class="okr-nstatus" :class="node.status">{{ okrStatusLabel(node.status) }}</span>
-                      </div>
-                      <div class="okr-ntitle">{{ node.title }}</div>
-                      <div class="okr-nfooter">
-                        <span class="okr-nowner" v-if="node.owner">👤 {{ node.owner }}</span>
-                        <span class="okr-nprio" v-if="node.priority" :class="node.priority">{{ node.priority }}</span>
-                        <span class="okr-ntask" v-if="node.taskId">🔗 {{ node.taskId }}</span>
-                      </div>
-                      <div class="okr-nsummary" v-if="node.summary"><strong>摘要:</strong> {{ node.summary }}</div>
-                      <div class="okr-nsummary" v-if="node.output"><strong>产出:</strong> {{ node.output }}</div>
-                    </div>
-                  </div>
-                </div>
-                <div v-if="okrSortedNodes.length === 0" class="empty-mini">暂无 OKR 节点</div>
-              </div>
-            </div>
-          </div>
-          <div class="okr-detail okr-empty" v-else>
-            <div class="empty-state-large">
-              <div style="font-size:48px; margin-bottom:16px; opacity:0.8">🎯</div>
-              <h3>OKR 目标看板</h3>
-              <p>从左侧选择一个目标查看拆解树与进度</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
       <!-- Tab: Files -->
       <div v-if="activeTab === 'files'" class="tab-content">
         <div class="files-layout">
@@ -852,10 +760,6 @@ const companyAgents = ref([])
 const pipelines = ref([])
 const pipelineRuns = ref([])
 const selectedPipeline = ref(null)
-const goals = ref([])
-const selectedGoalId = ref(null)
-const selectedGoalDetail = ref(null)
-const selectedGoalProgress = ref(null)
 const templates = ref([])
 const activeTab = ref('overview')
 const showTemplates = ref(false)
@@ -1039,7 +943,6 @@ async function loadCompanyData(id, tab) {
     if (activeTab.value === 'overview') await loadCompanyStatus(id)
     if (activeTab.value === 'agents') { await loadCompanyAgents(id); await loadOrgGraph(id) }
     if (activeTab.value === 'pipelines') await loadPipelines(id)
-    if (activeTab.value === 'goals') await loadGoals(id)
     if (activeTab.value === 'files') await loadCompanyFiles(id)
     if (activeTab.value === 'messages') await loadMessages(id)
     if (activeTab.value === 'skills') await loadSkillsList(id)
@@ -1064,6 +967,11 @@ function goToGraphConsole() {
   router.push(`/${selectedCompany.value.id}/graph-console`)
 }
+function goToTaskBoard() {
+  if (!selectedCompany.value) return
+  router.push(`/${selectedCompany.value.id}/task-board`)
+}
+
 watch(() => route?.params, async (params) => {
   if (!params) return
   if (route.name === 'CompanyDetail' && params.id) {
@@ -1216,54 +1124,6 @@ async function retryPipelineRun(runId) {
   } catch (e) { alert(`❌ 重试失败: ${e.message}`) }
 }
-async function loadGoals(id) {
-  try {
-    const { data } = await axios.get(`/api/company/${id}/okr`)
-    goals.value = data
-    // Auto-select first goal
-    if (data.length > 0 && !selectedGoalId.value) {
-      selectGoalDetail(data[0].id)
-    }
-  } catch (e) { console.error(e) }
-}
-
-async function selectGoalDetail(goalId) {
-  if (!selectedCompany.value) return
-  selectedGoalId.value = goalId
-  try {
-    const [goalRes, progRes] = await Promise.all([
-      axios.get(`/api/company/${selectedCompany.value.id}/okr/${goalId}`),
-      axios.get(`/api/company/${selectedCompany.value.id}/okr/${goalId}/progress`)
-    ])
-    selectedGoalDetail.value = goalRes.data
-    selectedGoalProgress.value = progRes.data
-  } catch (e) { console.error(e) }
-}
-
-function okrStatusLabel(status) {
-  const map = { active: '运转中', in_progress: '进行中', pending: '待开始', done: '已完成', failed: '失败', blocked: '已阻塞' }
-  return map[status] || status
-}
-
-function okrLevelName(level) {
-  const names = ['Goal', 'Objective', 'Key Result', 'Sub-Task', 'Micro-Task']
-  return names[Math.min(level - 1, 4)]
-}
-
-const okrSortedNodes = computed(() => {
-  if (!selectedGoalDetail.value?.nodes) return []
-  const nodes = selectedGoalDetail.value.nodes
-  const keys = Object.keys(nodes).sort((a, b) => {
-    const partsA = a.replace('G-','').split('.').map(Number)
-    const partsB = b.replace('G-','').split('.').map(Number)
-    for (let i = 0; i < Math.max(partsA.length, partsB.length); i++) {
-      if ((partsA[i] || 0) !== (partsB[i] || 0)) return (partsA[i] || 0) - (partsB[i] || 0)
-    }
-    return 0
-  })
-  return keys.map(id => ({ id, ...nodes[id], level: id.split('.').length }))
-})
-
 async function loadCompanyStatus(id) {
   try {
     const { data } = await axios.get(`/api/company/${id}/status`)
@@ -1848,84 +1708,6 @@ function closeDropdown() {
 .run-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
 .run-actions { margin-top: 8px; }
-/* ═══ OKR Full Layout ═══ */
-.okr-layout { display: flex; height: calc(100vh - 140px); overflow: hidden; }
-.okr-sidebar { width: 280px; min-width: 260px; border-right: 1px solid var(--border-primary); background: var(--bg-overlay); display: flex; flex-direction: column; }
-.okr-sidebar-header { padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--text-secondary); border-bottom: 1px solid var(--border-primary); display: flex; align-items: center; justify-content: space-between; background: var(--bg-secondary); }
-.okr-count { background: var(--bg-surface-active); color: var(--accent); padding: 2px 8px; border-radius: 12px; font-size: 11px; }
-.okr-goal-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
-.okr-goal-card { padding: 12px 14px; border-radius: 10px; cursor: pointer; background: var(--bg-surface); border: 1px solid var(--border-primary); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
-.okr-goal-card:hover { transform: translateY(-2px); border-color: var(--accent-light); box-shadow: 0 4px 12px rgba(16,185,129,0.08); }
-.okr-goal-card.active { background: var(--accent-bg); border-color: var(--border-active); box-shadow: 0 0 0 1px var(--accent) inset; }
-.okr-goal-top { display: flex; justify-content: space-between; margin-bottom: 6px; }
-.okr-gid { font-size: 11px; font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text-tertiary); }
-.okr-gstatus { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
-.okr-gstatus.active { background: rgba(59,130,246,0.15); color: #60a5fa; }
-.okr-gstatus.done { background: rgba(16,185,129,0.15); color: #34d399; }
-.okr-gtitle { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--text-primary); line-height: 1.4; }
-.okr-gprogress { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
-.okr-pbar { flex: 1; height: 6px; background: var(--bg-input-focus); border-radius: 3px; overflow: hidden; }
-.okr-pfill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 3px; transition: width 0.5s ease; }
-.okr-ppct { font-size: 11px; font-weight: 600; color: var(--text-secondary); width: 32px; text-align: right; }
-.okr-gmeta { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-faint); }
-
-/* OKR Detail Panel */
-.okr-detail { flex: 1; overflow-y: auto; background: var(--bg-primary); display: flex; flex-direction: column; }
-.okr-detail.okr-empty { align-items: center; justify-content: center; background: var(--bg-overlay); }
-.okr-detail.okr-empty h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; color: var(--text-secondary); }
-.okr-detail.okr-empty p { color: var(--text-muted); font-size: 13px; }
-
-.okr-hero { padding: 30px 40px; border-bottom: 1px solid var(--border-primary); background: linear-gradient(180deg, var(--accent-bg) 0%, transparent 100%); }
-.okr-hero-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
-.okr-hero-id { font-size: 14px; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--accent-light); }
-.okr-hero-status { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
-.okr-hero-status.active { background: rgba(59,130,246,0.2); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
-.okr-hero-status.done { background: rgba(16,185,129,0.2); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
-.okr-hero-owner { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-left: auto; background: var(--bg-surface); padding: 4px 10px; border-radius: 12px; border: 1px solid var(--border-primary); }
-.okr-hero-title { font-size: 26px; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.5px; }
-.okr-hero-desc { font-size: 14px; color: var(--text-tertiary); line-height: 1.6; max-width: 800px; margin: 0; }
-
-.okr-hero-progress { margin-top: 24px; max-width: 600px; background: var(--bg-surface); padding: 16px 20px; border-radius: 12px; border: 1px solid var(--border-primary); }
-.okr-hp-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
-.okr-hp-pct { font-size: 24px; font-weight: 800; color: var(--accent-light); line-height: 1; }
-.okr-hp-bar { height: 8px; background: var(--bg-input-focus); border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
-.okr-hp-fill { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); border-radius: 4px; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
-.okr-hp-stats { display: flex; gap: 16px; font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
-.okr-hp-stats .stat-d { color: #34d399; }
-.okr-hp-stats .stat-p { color: #60a5fa; }
-.okr-hp-stats .stat-w { color: var(--text-muted); }
-
-/* OKR Tree */
-.okr-tree-area { padding: 30px 40px; max-width: 1000px; }
-.okr-tree-title { font-size: 18px; font-weight: 600; margin: 0 0 20px; color: var(--text-primary); }
-.okr-tree { display: flex; flex-direction: column; gap: 6px; }
-.okr-tnode-line { display: flex; width: 100%; }
-.okr-tnode-indent { position: relative; }
-.okr-tnode-indent::before { content: ''; position: absolute; top: -16px; bottom: 50%; left: -14px; width: 14px; border-left: 1.5px solid var(--border-active); border-bottom: 1.5px solid var(--border-active); border-bottom-left-radius: 6px; z-index: 1; opacity: 0.3; }
-.okr-tnode-card { flex: 1; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: 8px; padding: 12px 16px; transition: all 0.2s; }
-.okr-tnode-card:hover { border-color: rgba(255,255,255,0.1); background: var(--bg-surface-hover); }
-.okr-tnode-card.okr-lv-2 { background: rgba(59,130,246,0.03); border-color: rgba(59,130,246,0.1); }
-.okr-tnode-card.okr-lv-3 { background: rgba(16,185,129,0.03); border-color: rgba(16,185,129,0.1); }
-.okr-tnode-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
-.okr-nid { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--text-tertiary); }
-.okr-ntype { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 10px; background: rgba(255,255,255,0.05); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
-.okr-nstatus { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; border: 1px solid transparent; }
-.okr-nstatus.done { background: rgba(16,185,129,0.1); color: #34d399; border-color: rgba(16,185,129,0.2); }
-.okr-nstatus.in_progress { background: rgba(59,130,246,0.1); color: #60a5fa; border-color: rgba(59,130,246,0.2); animation: okr-pulse 2s infinite; }
-.okr-nstatus.pending { background: rgba(255,255,255,0.05); color: var(--text-muted); border-color: var(--border-primary); }
-@keyframes okr-pulse { 0% { box-shadow: 0 0 0 0 rgba(96,165,250,0.2); } 70% { box-shadow: 0 0 0 4px rgba(96,165,250,0); } 100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); } }
-.okr-ntitle { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; line-height: 1.4; }
-.okr-nfooter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 4px; }
-.okr-nowner { font-size: 11px; font-weight: 500; color: var(--accent-light); display: flex; align-items: center; gap: 4px; background: var(--accent-bg); padding: 2px 8px; border-radius: 10px; }
-.okr-nprio { font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
-.okr-nprio.P0 { color: #ef4444; }
-.okr-nprio.P1 { color: #f59e0b; }
-.okr-nprio.P2 { color: var(--text-muted); }
-.okr-ntask { font-size: 10px; font-family: 'JetBrains Mono', monospace; color: var(--blue-text); background: rgba(59,130,246,0.1); padding: 2px 6px; border-radius: 4px; }
-.okr-nsummary { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-primary); font-size: 11px; color: var(--text-tertiary); line-height: 1.5; }
-.okr-nsummary strong { color: var(--text-secondary); }
-
-.empty-state-large { text-align: center; color: var(--text-muted); }
 /* ═══ Modal ═══ */
 .modal-overlay {
-<template>
-  <div class="okr-dashboard-page">
-    <AppNav />
-    <div class="okr-layout">
-      <!-- 第1列: Goal 列表 -->
-      <aside class="goal-sidebar">
-        <div class="col-header">
-          <span>🎯 OKR 目标</span>
-          <span class="count-badge" v-if="goals.length">{{ goals.length }}</span>
-        </div>
-        <div class="goal-list">
-          <div
-            v-for="g in goals" :key="g.id"
-            class="goal-card" :class="{ active: selectedGoalId === g.id }"
-            @click="selectGoal(g.id)"
-          >
-            <div class="goal-card-header">
-              <span class="goal-id">{{ g.id }}</span>
-              <span class="goal-status" :class="g.status">{{ getDisplayStatus(g.status) }}</span>
-            </div>
-            <div class="goal-title" :title="g.title">{{ g.title }}</div>
-            <div class="goal-progress-wrap">
-              <div class="progress-bar"><div class="progress-fill" :style="{ width: (g.progress * 100) + '%' }"></div></div>
-              <span class="progress-text">{{ Math.round(g.progress * 100) }}%</span>
-            </div>
-            <div class="goal-meta">
-              <span class="goal-owner">👤 {{ g.owner }}</span>
-              <span class="goal-counts">节点: {{ g.doneCount || 0 }}/{{ g.totalCount || 0 }}</span>
-            </div>
-          </div>
-          <div v-if="goals.length === 0" class="empty-state">当前没有目标</div>
-        </div>
-      </aside>
-
-      <!-- 第2列: Goal 详情与节点树 -->
-      <section class="goal-detail-panel" v-if="selectedGoal">
-        <div class="goal-hero">
-          <div class="hero-top">
-            <span class="hero-id">{{ selectedGoal.id }}</span>
-            <span class="hero-status" :class="selectedGoal.status">{{ getDisplayStatus(selectedGoal.status) }}</span>
-            <span class="hero-owner">👤 负责人: {{ selectedGoal.owner }}</span>
-          </div>
-          <h1 class="hero-title">{{ selectedGoal.title }}</h1>
-          <p class="hero-desc">{{ selectedGoal.description || '暂无详细描述...' }}</p>
-          <div class="hero-progress-large" v-if="selectedGoalProgress">
-            <div class="large-progress-top">
-              <span class="large-progress-label">目标总体进度</span>
-              <span class="large-progress-value">{{ Math.round(selectedGoalProgress.progress * 100) }}%</span>
-            </div>
-            <div class="large-progress-bar">
-              <div class="large-progress-fill" :style="{ width: (selectedGoalProgress.progress * 100) + '%' }"></div>
-            </div>
-            <div class="large-progress-stats">
-              <span>总叶子节点: {{ selectedGoalProgress.total }}</span>
-              <span class="stat-done">已完成: {{ selectedGoalProgress.done }}</span>
-              <span class="stat-inprogress">进行中: {{ selectedGoalProgress.inProgress }}</span>
-              <span class="stat-pending">待开始: {{ selectedGoalProgress.pending }}</span>
-            </div>
-          </div>
-        </div>
-
-        <div class="nodes-area">
-          <div class="nodes-header">
-            <h3>OKR 拆解树配置</h3>
-          </div>
-          <div class="tree-container">
-            <div
-              v-for="node in sortedNodes" :key="node.id"
-              class="tree-node"
-              :class="'level-' + node.level"
-            >
-              <div class="node-line">
-                <div class="node-prefix" :style="{ width: (node.level - 2) * 24 + 'px' }"></div>
-                <div class="node-card" :class="[node.status, 'level-style-' + node.level]">
-                  <div class="node-header">
-                    <span class="node-id">{{ node.id }}</span>
-                    <span class="node-type-badge">{{ getLevelName(node.level) }}</span>
-                    <span class="node-status" :class="node.status">{{ getDisplayStatus(node.status) }}</span>
-                  </div>
-                  <div class="node-title">{{ node.title }}</div>
-                  <div class="node-footer">
-                    <span class="node-owner" v-if="node.owner">👤 {{ node.owner }}</span>
-                    <span class="node-priority" v-if="node.priority" :class="node.priority">{{ node.priority }}</span>
-                    <span class="node-task" v-if="node.taskId">🔗 {{ node.taskId }}</span>
-                  </div>
-                  <div class="node-summary" v-if="node.summary">
-                    <strong>摘要:</strong> {{ node.summary }}
-                  </div>
-                  <div class="node-summary" v-if="node.output">
-                    <strong>产出:</strong> {{ node.output }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      
-      <section class="goal-detail-panel empty-panel" v-else>
-        <div class="empty-state-large">
-          <div class="empty-icon">🎯</div>
-          <h2>OKR 目标看板</h2>
-          <p>请从左侧列表选择一个目标查看详细拆解树与进度</p>
-        </div>
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import AppNav from '@/components/AppNav.vue'
-
-const goals = ref([])
-const selectedGoalId = ref(null)
-const selectedGoal = ref(null)
-const selectedGoalProgress = ref(null)
-
-const statusMap = {
-  'active': '运转中',
-  'in_progress': '进行中',
-  'pending': '待开始',
-  'done': '已完成',
-  'failed': '失败',
-  'blocked': '已阻塞'
-}
-
-function getDisplayStatus(status) {
-  return statusMap[status] || status
-}
-
-function getLevelName(level) {
-  const names = ['Goal', 'Objective', 'Key Result', 'Sub-Task', 'Micro-Task'];
-  return names[Math.min(level - 1, 4)];
-}
-
-async function loadGoals() {
-  try {
-    const res = await fetch('/api/okr')
-    if (res.ok) {
-      goals.value = await res.json()
-      // 默认选中第一个
-      if (goals.value.length > 0 && !selectedGoalId.value) {
-        selectGoal(goals.value[0].id)
-      }
-    }
-  } catch (err) {
-    console.error('Failed to load goals:', err)
-  }
-}
-
-async function selectGoal(id) {
-  selectedGoalId.value = id
-  try {
-    const [goalRes, progRes] = await Promise.all([
-      fetch(`/api/okr/${id}`),
-      fetch(`/api/okr/${id}/progress`)
-    ])
-    if (goalRes.ok) selectedGoal.value = await goalRes.json()
-    if (progRes.ok) selectedGoalProgress.value = await progRes.json()
-  } catch (err) {
-    console.error('Failed to load goal detail:', err)
-  }
-}
-
-// 将扁平的nodes转为按树结构排序的列表，便于直接循环渲染并计算缩进
-const sortedNodes = computed(() => {
-  if (!selectedGoal.value || !selectedGoal.value.nodes) return []
-  const nodes = selectedGoal.value.nodes
-  
-  // 给定一个父节点，递归获取所有后代，按ID自然排序确保层级
-  const result = []
-  const keys = Object.keys(nodes).sort((a, b) => {
-    // 采用自然排序法，如 G-1.2 排在 G-1.10 前面
-    const partsA = a.replace('G-','').split('.').map(Number)
-    const partsB = b.replace('G-','').split('.').map(Number)
-    for (let i = 0; i < Math.max(partsA.length, partsB.length); i++) {
-      const numA = partsA[i] || 0
-      const numB = partsB[i] || 0
-      if (numA !== numB) return numA - numB
-    }
-    return 0
-  })
-
-  for (const id of keys) {
-    result.push({
-      id,
-      ...nodes[id],
-      level: id.split('.').length
-    })
-  }
-  return result
-})
-
-onMounted(() => {
-  loadGoals()
-  // 简单轮询刷新进度
-  setInterval(() => {
-    if (selectedGoalId.value) {
-      selectGoal(selectedGoalId.value)
-    } else {
-      loadGoals()
-    }
-  }, 10000)
-})
-</script>
-
-<style scoped>
-.okr-dashboard-page {
-  height: 100vh; display: flex; flex-direction: column;
-  background: var(--bg-primary);
-  color: var(--text-primary); font-family: 'Inter', -apple-system, sans-serif;
-}
-.okr-layout { flex: 1; display: flex; overflow: hidden; }
-
-.col-header {
-  padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--text-secondary);
-  border-bottom: 1px solid var(--border-primary);
-  display: flex; align-items: center; justify-content: space-between;
-  background: var(--bg-secondary);
-}
-.count-badge {
-  background: var(--bg-surface-active); color: var(--accent);
-  padding: 2px 8px; border-radius: 12px; font-size: 11px;
-}
-
-/* ═══ Left Sidebar: Goals ═══ */
-.goal-sidebar {
-  width: 280px; min-width: 260px; border-right: 1px solid var(--border-primary);
-  background: var(--bg-overlay); display: flex; flex-direction: column;
-}
-.goal-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
-.goal-card {
-  padding: 12px 14px; border-radius: 10px; cursor: pointer;
-  background: var(--bg-surface); border: 1px solid var(--border-primary);
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.goal-card:hover { transform: translateY(-2px); border-color: var(--accent-light); box-shadow: 0 4px 12px rgba(16,185,129,0.08); }
-.goal-card.active {
-  background: var(--accent-bg); border-color: var(--border-active);
-  box-shadow: 0 0 0 1px var(--accent) inset;
-}
-
-.goal-card-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
-.goal-id { font-size: 11px; font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text-tertiary); }
-.goal-status { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
-.goal-status.active { background: rgba(59,130,246,0.15); color: #60a5fa; }
-.goal-status.done { background: rgba(16,185,129,0.15); color: #34d399; }
-
-.goal-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--text-primary); line-height: 1.4; }
-
-.goal-progress-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
-.progress-bar { flex: 1; height: 6px; background: var(--bg-input-focus); border-radius: 3px; overflow: hidden; }
-.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 3px; transition: width 0.5s ease; }
-.progress-text { font-size: 11px; font-weight: 600; color: var(--text-secondary); width: 32px; text-align: right; }
-
-.goal-meta { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-faint); }
-
-.empty-state { text-align: center; padding: 40px 20px; color: var(--text-faint); font-size: 12px; }
-
-/* ═══ Right Panel: Details ═══ */
-.goal-detail-panel {
-  flex: 1; overflow-y: auto; background: var(--bg-primary);
-  display: flex; flex-direction: column;
-}
-.goal-detail-panel.empty-panel { align-items: center; justify-content: center; background: var(--bg-overlay); }
-
-.empty-state-large { text-align: center; color: var(--text-muted); }
-.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.8; }
-.empty-state-large h2 { font-size: 20px; font-weight: 600; margin-bottom: 8px; color: var(--text-secondary); }
-
-.goal-hero {
-  padding: 30px 40px; border-bottom: 1px solid var(--border-primary);
-  background: linear-gradient(180deg, var(--accent-bg) 0%, transparent 100%);
-}
-.hero-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
-.hero-id { font-size: 14px; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--accent-light); }
-.hero-status { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
-.hero-status.active { background: rgba(59,130,246,0.2); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
-.hero-status.done { background: rgba(16,185,129,0.2); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
-
-.hero-owner { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-left: auto; background: var(--bg-surface); padding: 4px 10px; border-radius: 12px; border: 1px solid var(--border-primary); }
-.hero-title { font-size: 28px; font-weight: 800; margin: 0 0 12px; letter-spacing: -0.5px; }
-.hero-desc { font-size: 14px; color: var(--text-tertiary); line-height: 1.6; max-width: 800px; margin: 0; }
-
-.hero-progress-large { margin-top: 24px; max-width: 600px; background: var(--bg-surface); padding: 16px 20px; border-radius: 12px; border: 1px solid var(--border-primary); }
-.large-progress-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; }
-.large-progress-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
-.large-progress-value { font-size: 24px; font-weight: 800; color: var(--accent-light); line-height: 1; }
-.large-progress-bar { height: 8px; background: var(--bg-input-focus); border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
-.large-progress-fill { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); border-radius: 4px; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
-.large-progress-stats { display: flex; gap: 16px; font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
-.stat-done { color: #34d399; }
-.stat-inprogress { color: #60a5fa; }
-.stat-pending { color: var(--text-muted); }
-
-/* ═══ Nodes Tree ═══ */
-.nodes-area { padding: 30px 40px; max-width: 1000px; }
-.nodes-header h3 { font-size: 18px; font-weight: 600; margin: 0 0 20px; color: var(--text-primary); }
-
-.tree-container { display: flex; flex-direction: column; gap: 6px; }
-.tree-node { display: flex; flex-direction: column; }
-.node-line { display: flex; width: 100%; }
-.node-prefix { position: relative; }
-/* 连线占位 */
-.node-prefix::before {
-  content: ''; position: absolute; top: -16px; bottom: 50%; left: -14px;
-  width: 14px; border-left: 1.5px solid var(--border-active); border-bottom: 1.5px solid var(--border-active);
-  border-bottom-left-radius: 6px; z-index: 1; opacity: 0.3;
-}
-
-.node-card {
-  flex: 1; background: var(--bg-surface); border: 1px solid var(--border-primary);
-  border-radius: 8px; padding: 12px 16px; position: relative;
-  transition: all 0.2s;
-}
-.node-card:hover { border-color: rgba(255,255,255,0.1); background: var(--bg-surface-hover); }
-
-/* Level Styles */
-.node-card.level-style-2 { background: rgba(59,130,246,0.03); border-color: rgba(59,130,246,0.1); }
-.node-card.level-style-3 { background: rgba(16,185,129,0.03); border-color: rgba(16,185,129,0.1); }
-.node-card.level-style-4 { background: var(--bg-surface); }
-
-.node-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
-.node-id { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--text-tertiary); }
-.node-type-badge { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 10px; background: rgba(255,255,255,0.05); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
-
-.node-status { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; border: 1px solid transparent; }
-.node-status.done { background: rgba(16,185,129,0.1); color: #34d399; border-color: rgba(16,185,129,0.2); }
-.node-status.in_progress { background: rgba(59,130,246,0.1); color: #60a5fa; border-color: rgba(59,130,246,0.2); animation: pulse-light 2s infinite; }
-.node-status.pending { background: rgba(255,255,255,0.05); color: var(--text-muted); border-color: var(--border-primary); }
-
-@keyframes pulse-light {
-  0% { box-shadow: 0 0 0 0 rgba(96,165,250,0.2); }
-  70% { box-shadow: 0 0 0 4px rgba(96,165,250,0); }
-  100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); }
-}
-
-.node-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; line-height: 1.4; }
-
-.node-footer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; }
-.node-owner { font-size: 11px; font-weight: 500; color: var(--accent-light); display: flex; align-items: center; gap: 4px; background: var(--accent-bg); padding: 2px 8px; border-radius: 10px; }
-.node-priority { font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
-.node-priority.P0 { color: #ef4444; }
-.node-priority.P1 { color: #f59e0b; }
-.node-priority.P2 { color: var(--text-muted); }
-.node-task { font-size: 10px; font-family: 'JetBrains Mono', monospace; color: var(--blue-text); background: rgba(59,130,246,0.1); padding: 2px 6px; border-radius: 4px; }
-
-.node-summary { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-primary); font-size: 11px; color: var(--text-tertiary); line-height: 1.5; }
-.node-summary strong { color: var(--text-secondary); }
-
-</style>
+<!--
+  任务看板 —— goal/task 两级模型的独立页面（39 号文档 §二 P2）。
+
+  在此之前 goal/task 只能在 GraphConsole 左栏的窄侧栏里看，这里把同一份组件
+  （GoalTaskPane + goal-task-model.js）铺满整页，数据层原样不动，不重写。
+
+  点一条 task 不在本页画执行图（那是 GraphConsole 的活），而是跳过去 ——
+  `/:id/graph-console?goal=...&task=...` 是 GraphConsole 已经支持的选中态复原路径
+  （见该文件 onMounted 里 `route.query.goal` / `route.query.task` 那两行），不新开一条协议。
+-->
+<template>
+  <div class="board">
+    <header class="top">
+      <div class="who">
+        <router-link :to="`/${companyId}/overview`" class="back">←</router-link>
+        <b>{{ company?.name || companyId }}</b>
+        <span class="sep">任务看板</span>
+      </div>
+      <router-link :to="`/${companyId}/graph-console`" class="to-console">🕸️ 执行控制台</router-link>
+    </header>
+
+    <div class="body">
+      <GoalTaskPane
+        :company-id="companyId"
+        :goals="goals"
+        :loading="goalsLoading"
+        :selected-task-id="selectedTaskId"
+        :selected-goal-id="selectedGoalId"
+        :slots="slots"
+        @select="goToDetail"
+        @refresh="loadGoals"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import GoalTaskPane from '@/components/graph-console/GoalTaskPane.vue';
+
+const route = useRoute();
+const router = useRouter();
+const props = defineProps({ id: { type: String, default: '' } });
+const companyId = computed(() => props.id || route.params.id);
+
+const company = ref(null);
+const goals = ref([]);
+const goalsLoading = ref(false);
+const slots = ref(null);
+const selectedGoalId = ref('');
+const selectedTaskId = ref('');
+
+let treePoll = null;
+
+onMounted(async () => {
+  selectedGoalId.value = String(route.query.goal || '');
+  selectedTaskId.value = String(route.query.task || '');
+  await Promise.all([loadCompany(), loadGoals()]);
+  // 与 GraphConsole 同款兜底：没有公司级 SSE 通道，靠轮询看到别处发生的状态变化
+  treePoll = setInterval(() => { loadGoals(); }, 20000);
+});
+onBeforeUnmount(() => clearInterval(treePoll));
+
+async function loadCompany() {
+  try {
+    const r = await fetch(`/api/company/${companyId.value}`);
+    if (r.ok) company.value = await r.json();
+  } catch { /* 页头名字掉了不影响功能 */ }
+}
+
+async function loadGoals() {
+  goalsLoading.value = true;
+  try {
+    const r = await fetch(`/api/company/${companyId.value}/goals?withTasks=1`);
+    if (!r.ok) return;
+    const j = await r.json();
+    goals.value = j.goals || [];
+    slots.value = j.slots || null;
+  } catch { /* 轮询失败保留上一份树 */ } finally {
+    goalsLoading.value = false;
+  }
+}
+
+/** 点一条 task：跳到执行控制台看它的图，选中态通过 query 带过去 */
+function goToDetail({ goalId, taskId }) {
+  selectedGoalId.value = goalId || '';
+  selectedTaskId.value = taskId || '';
+  if (!taskId) return;
+  router.push({ path: `/${companyId.value}/graph-console`, query: { goal: goalId || '', task: taskId } });
+}
+</script>
+
+<style scoped>
+.board { display: flex; flex-direction: column; height: 100vh; background: #fff; color: #1a1a1a; }
+
+.top {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 16px; border-bottom: 1px solid #eee; flex: 0 0 auto;
+}
+.who { display: flex; align-items: center; gap: 8px; font-size: 13px; }
+.back { text-decoration: none; color: #666; font-size: 16px; }
+.sep { color: #999; }
+.to-console { text-decoration: none; color: #2b6cb0; font-size: 12px; font-weight: 600; }
+.to-console:hover { text-decoration: underline; }
+
+.body { flex: 1 1 auto; overflow-y: auto; padding: 16px 24px; max-width: 900px; width: 100%; margin: 0 auto; box-sizing: border-box; }
+
+@media (max-width: 700px) {
+  .body { padding: 12px; }
+}
+</style>