From 823e50e52f4fb3f647041a99ef101b84e50fb493 Mon Sep 17 00:00:00 2001
From: Codewoc <947380458@qq.com>
Date: Fri, 3 Apr 2026 14:22:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(review-tablet):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=B9=B3=E6=9D=BF=E7=AB=AF=E9=80=82=E9=85=8D=E4=B8=8E=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/review/tablet.ts          |   13 +-
 src/views/review/tablet/index.vue | 2243 ++++++++++++++++++++++-------
 vite.config.ts                    |    3 +-
 3 files changed, 1749 insertions(+), 510 deletions(-)

diff --git a/src/api/review/tablet.ts b/src/api/review/tablet.ts
index 918565286..451a9c0fd 100644
--- a/src/api/review/tablet.ts
+++ b/src/api/review/tablet.ts
@@ -1,5 +1,13 @@
 import request from '@/config/axios'
 
+export interface ReviewTabletExpertInfoVO {
+  name: string
+  organization: string
+  title: string
+  position: string
+  remark: string
+}
+
 export interface ReviewTabletCatalogVO {
   reviewMeetingId: number
   meetingName: string
@@ -12,6 +20,8 @@ export interface ReviewTabletCatalogVO {
   reporter: string
   reporterUnit: string
   fileCount: number
+  expertNames: string[]
+  expertInfos: ReviewTabletExpertInfoVO[]
 }
 
 export interface ReviewTabletOpenUrlVO {
@@ -22,8 +32,7 @@ export interface ReviewTabletOpenUrlVO {
   visitUrl: string
 }
 
-export const getTodayCatalog = () =>
-  request.get({ url: '/project/review-tablet/catalog/today' })
+export const getTodayCatalog = () => request.get({ url: '/project/review-tablet/catalog/today' })
 
 export const getProjectFiles = (reviewMeetingProjectId: number) =>
   request.get({
diff --git a/src/views/review/tablet/index.vue b/src/views/review/tablet/index.vue
index 9a09f5bea..b62737cae 100644
--- a/src/views/review/tablet/index.vue
+++ b/src/views/review/tablet/index.vue
@@ -1,102 +1,150 @@
 <template>
-  <div class="tablet-full-page" v-loading="pageLoading">
-    <!-- ── 顶部工具栏 ── -->
-    <header class="page-toolbar">
-      <div class="title-wrap">
-        <h2>专家评审资料</h2>
-        <span>当日项目编目 · {{ projectCount }} 项</span>
-      </div>
-      <div class="tool-wrap">
-        <el-input
-          v-model="keyword"
-          clearable
-          placeholder="搜索项目/资料"
-          class="search-input"
-        />
-        <el-button :icon="Refresh" @click="loadCatalog">刷新</el-button>
-      </div>
-    </header>
+  <div class="tablet-shell" :class="shellClasses" v-loading="pageLoading">
+    <div
+      class="tablet-layout"
+      :class="shellClasses"
+      :style="{ gridTemplateColumns: layoutColumns }"
+    >
+      <aside class="left-pane" :class="{ collapsed: leftCollapsed }">
+        <button class="pane-handle left-handle" @click="leftCollapsed = !leftCollapsed">
+          <el-icon><ArrowRightBold v-if="leftCollapsed" /><ArrowLeftBold v-else /></el-icon>
+        </button>
 
-    <!-- ── 主体三栏 ── -->
-    <div class="page-body" :class="{ 'ai-open': aiPanelOpen && !!activeProjectId }">
+        <template v-if="!leftCollapsed">
+          <div class="left-head">
+            <div class="left-title">专家评审资料</div>
+            <el-button text :icon="Refresh" @click="loadCatalog" />
+          </div>
+          <div class="left-sub">当日项目编目：{{ projectCount }}篇</div>
 
-      <!-- 左：项目目录 -->
-      <aside class="directory-panel">
-        <div class="panel-title">项目目录</div>
-        <el-empty v-if="treeData.length === 0" description="当前时段暂无可查看资料" />
-        <el-tree
-          v-else
-          ref="treeRef"
-          class="catalog-tree"
-          :data="treeData"
-          node-key="id"
-          highlight-current
-          :expand-on-click-node="false"
-          :default-expanded-keys="expandedKeys"
-          :props="treeProps"
-          :filter-node-method="filterNode"
-          @node-expand="handleNodeExpand"
-          @node-collapse="handleNodeCollapse"
-          @node-click="handleNodeClick"
-        >
-          <template #default="{ data }">
-            <div v-if="data.type === 'project'" class="tree-project">
-              <div class="node-left">
-                <el-icon class="node-icon folder-icon"><Folder /></el-icon>
-                <span class="node-name">{{ data.label }}</span>
-              </div>
-              <el-tag size="small" type="info">{{ data.fileCount }} 份</el-tag>
-            </div>
-            <div v-else class="tree-file">
-              <div class="node-left">
-                <el-icon class="node-icon file-icon"><Document /></el-icon>
-                <span class="node-name">{{ data.label }}</span>
-              </div>
-              <span class="file-type">{{ data.fileType?.toUpperCase() }}</span>
-            </div>
-          </template>
-        </el-tree>
+          <el-input
+            v-model="keyword"
+            clearable
+            :prefix-icon="Search"
+            placeholder="搜索项目/资料"
+            class="left-search"
+          />
+
+          <div class="left-tree-wrap">
+            <el-empty v-if="treeData.length === 0" description="当前时段暂无可查看资料" />
+            <el-tree
+              v-else
+              ref="treeRef"
+              class="catalog-tree"
+              :data="treeData"
+              node-key="id"
+              highlight-current
+              :expand-on-click-node="false"
+              :default-expanded-keys="expandedKeys"
+              :props="treeProps"
+              :filter-node-method="filterNode"
+              @node-expand="handleNodeExpand"
+              @node-collapse="handleNodeCollapse"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ data }">
+                <div v-if="data.type === 'project'" class="tree-item tree-project">
+                  <div class="node-main">
+                    <el-icon class="node-icon folder-icon"><Folder /></el-icon>
+                    <el-tooltip :content="data.label" placement="top-start" :show-after="300">
+                      <span class="node-label">{{ data.label }}</span>
+                    </el-tooltip>
+                  </div>
+                  <span class="node-badge">{{ data.fileCount }}</span>
+                </div>
+                <div v-else class="tree-item tree-file">
+                  <div class="node-main">
+                    <el-icon class="node-icon file-icon"><Document /></el-icon>
+                    <el-tooltip :content="data.label" placement="top-start" :show-after="300">
+                      <span class="node-label">{{ data.label }}</span>
+                    </el-tooltip>
+                  </div>
+                  <span class="node-ext">{{ data.fileType?.toUpperCase() }}</span>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+        </template>
       </aside>
 
-      <!-- 中：资料预览 -->
-      <section class="preview-panel">
-        <div class="preview-header">
-          <div class="preview-meta">
-            <div class="preview-title">{{ activeFileName || '请选择左侧资料进行预览' }}</div>
-            <div class="preview-sub">{{ activeFileDesc }}</div>
-          </div>
-          <div class="preview-actions">
-            <el-button :disabled="!activeFileId" @click="refreshPreview">刷新预览</el-button>
-            <el-button
-              type="primary"
-              :icon="Link"
-              :disabled="!previewUrl"
-              @click="openInNewWindow"
+      <section class="center-pane">
+        <header class="center-header">
+          <div class="center-title">{{ activeFileName || '请选择左侧资料进行预览' }}</div>
+          <div class="center-sub">{{
+            activeFileDesc || '预览区支持 PDF/Office 等资料在线查看'
+          }}</div>
+          <div class="center-actions">
+            <el-button text :icon="Refresh" :disabled="!activeFileId" @click="refreshPreview"
+              >刷新预览</el-button
             >
-              新窗口打开
-            </el-button>
-            <!-- AI 助手开关 -->
-            <el-button
-              v-if="activeProjectId"
-              :type="aiPanelOpen ? 'primary' : 'default'"
-              @click="toggleAiPanel"
+            <el-button text :icon="Link" :disabled="!previewUrl" @click="openInNewWindow"
+              >新窗口打开</el-button
             >
-              🤖 AI 助手
-            </el-button>
+            <el-button v-if="rightCollapsed" text @click="openRightPanel('ai')">打开侧栏</el-button>
           </div>
-        </div>
+        </header>
 
-        <div class="preview-body" v-loading="previewLoading">
-          <div v-if="!activeFileId && !previewLoading" class="welcome-panel">
-            <div class="welcome-title">欢迎各位专家莅临指导工作</div>
-            <div class="welcome-sub">请从左侧目录中选择评审资料开始查阅</div>
+        <div class="center-body" v-loading="previewLoading">
+          <div v-if="showAgendaOverview" class="agenda-overview">
+            <div class="agenda-head">
+              <div class="agenda-title">今日议程</div>
+              <div class="agenda-sub">{{ agendaMeetingLabel }}</div>
+            </div>
+            <div class="agenda-content">
+              <div class="agenda-projects-panel">
+                <div class="agenda-panel-title">项目信息</div>
+                <div class="agenda-list">
+                  <div v-for="item in agendaOverviewList" :key="item.id" class="agenda-item">
+                    <div class="agenda-card">
+                      <div class="agenda-index">{{ item.seqNoText }}</div>
+                      <div class="agenda-main">
+                        <div class="agenda-name">{{ item.projectTitle }}</div>
+                        <div class="agenda-meta">
+                          <span>{{ item.agendaCategory || '未设置议程分类' }}</span>
+                          <span>{{ item.reporter || '未填写汇报人' }}</span>
+                          <span v-if="item.reporterUnit">{{ item.reporterUnit }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="agenda-experts-panel">
+                <div class="agenda-panel-title">专家信息</div>
+                <div v-if="agendaExpertInfos.length > 0" class="agenda-experts">
+                  <div v-for="expert in agendaExpertInfos" :key="expert.key" class="agenda-expert">
+                    <div class="agenda-expert-name">{{ expert.name }}</div>
+                    <div class="agenda-expert-meta">
+                      <span v-if="expert.organization">{{ expert.organization }}</span>
+                      <span v-if="expert.title">{{ expert.title }}</span>
+                      <span v-if="expert.position">{{ expert.position }}</span>
+                      <span v-if="expert.remark">{{ expert.remark }}</span>
+                    </div>
+                  </div>
+                </div>
+                <div v-else class="agenda-experts-empty">暂无专家信息</div>
+              </div>
+            </div>
           </div>
-          <el-result v-else-if="previewError" icon="error" title="预览加载失败" :sub-title="previewError">
+          <div v-else-if="!activeFileId && !previewLoading" class="welcome-panel">
+            <div class="welcome-title">欢迎查阅评审资料</div>
+            <div class="welcome-sub">请从左侧目录中选择文件开始浏览</div>
+          </div>
+
+          <el-result
+            v-else-if="previewError"
+            icon="error"
+            title="预览加载失败"
+            :sub-title="previewError"
+          >
             <template #extra>
-              <el-button type="primary" :disabled="!activeFileId" @click="refreshPreview">重试</el-button>
+              <el-button type="primary" :disabled="!activeFileId" @click="refreshPreview"
+                >重试</el-button
+              >
               <el-button :disabled="!previewUrl" @click="openInNewWindow">新窗口打开</el-button>
             </template>
           </el-result>
+
           <template v-else-if="previewUrl">
             <iframe
               :key="previewFrameKey"
@@ -115,169 +163,266 @@
         </div>
       </section>
 
-      <!-- 右：AI 助手面板 -->
-      <aside v-if="aiPanelOpen && activeProjectId" class="ai-panel">
-        <!-- 面板头部 -->
-        <div class="ai-header">
-          <div class="ai-header-left">
-            <span class="ai-title">🤖 AI 助手</span>
-            <span
-              class="ai-status-badge"
-              :class="`status-${aiSummary?.status ?? 0}`"
-            >{{ aiSummary?.statusName ?? '未生成' }}</span>
-          </div>
-          <div class="ai-header-right">
-            <el-tooltip content="清空当前项目问答记录" placement="top">
-              <el-button
-                size="small"
-                text
-                :disabled="!aiConversationId || aiChatLoading"
-                @click="handleClearMessages"
-              >清空对话</el-button>
-            </el-tooltip>
-            <el-button size="small" text @click="aiPanelOpen = false">✕</el-button>
-          </div>
-        </div>
+      <aside class="right-pane" :class="{ collapsed: rightCollapsed }">
+        <button class="pane-handle right-handle" @click="rightCollapsed = !rightCollapsed">
+          <el-icon><ArrowLeftBold v-if="rightCollapsed" /><ArrowRightBold v-else /></el-icon>
+        </button>
 
-        <!-- 摘要区 -->
-        <div class="ai-summary-wrap" v-loading="aiSummaryLoading">
-          <!-- 未生成 -->
-          <div v-if="!aiSummary || aiSummary.status === 0" class="ai-summary-empty">
-            <el-icon><InfoFilled /></el-icon>
-            <span>{{ aiSummary?.blockReason || '当前项目 AI 尚未就绪，请联系管理员先完成构建' }}</span>
-          </div>
-          <!-- 生成中 -->
-          <div v-else-if="aiSummary.status === 1" class="ai-summary-building">
-            <el-icon class="is-loading"><Loading /></el-icon>
-            <span>AI 摘要生成中，请稍候…</span>
-          </div>
-          <!-- 失败 -->
-          <div v-else-if="aiSummary.status === 3" class="ai-summary-failed">
-            <el-icon><WarningFilled /></el-icon>
-            <span>{{ aiSummary.blockReason || `摘要生成失败：${aiSummary.errorMessage || '未知错误'}` }}</span>
-          </div>
-          <!-- 已完成 -->
-          <div v-else-if="aiSummary.status === 2 && aiSummary.summary" class="ai-summary-card">
-            <div class="summary-updated">
-              最后更新：{{ aiSummary.updatedTime ? formatDate(new Date(aiSummary.updatedTime), 'YYYY-MM-DD HH:mm') : '-' }}
-            </div>
-            <div class="summary-field">
-              <span class="field-label">项目概述</span>
-              <span class="field-value">{{ aiSummary.summary.projectOverview }}</span>
-            </div>
-            <div class="summary-field">
-              <span class="field-label">建设目标</span>
-              <span class="field-value">{{ aiSummary.summary.businessGoal }}</span>
-            </div>
-            <div class="summary-field">
-              <span class="field-label">建设范围</span>
-              <span class="field-value">{{ aiSummary.summary.constructionScope }}</span>
-            </div>
-            <div class="summary-field">
-              <span class="field-label">实施计划</span>
-              <span class="field-value">{{ aiSummary.summary.implementationPlan }}</span>
-            </div>
-            <div class="summary-field">
-              <span class="field-label">预算信息</span>
-              <span class="field-value">{{ aiSummary.summary.budgetInfo }}</span>
-            </div>
-            <div v-if="aiSummary.summary.sourceFiles?.length" class="summary-field">
-              <span class="field-label">来源文件</span>
-              <span class="field-value">{{ aiSummary.summary.sourceFiles.join('；') }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 分隔线 -->
-        <div class="ai-divider" v-if="aiConversationId || aiSummary?.status === 2"></div>
-
-        <!-- 对话区（仅摘要 SUCCESS 后才能对话） -->
-        <template v-if="aiSummary?.status === 2">
-          <!-- 消息列表 -->
-          <div class="ai-messages" ref="aiMessagesRef">
-            <div v-if="aiChatLoading && aiMessages.length === 0" class="ai-messages-loading">
-              <el-icon class="is-loading"><Loading /></el-icon> 加载中…
-            </div>
-            <div
-              v-for="msg in aiMessages"
-              :key="msg.id"
-              class="chat-msg"
-              :class="msg.type === 'user' ? 'user-msg' : 'ai-msg'"
-            >
-              <div class="msg-bubble">
-                <span class="msg-role">{{ msg.type === 'user' ? '您' : 'AI' }}</span>
-                <div class="msg-content">
-                  <div
-                    class="md-content"
-                    v-html="msg.type === 'user' ? renderUserMsgContent(msg.content) : renderAiMsgContent(msg.content)"
-                  ></div>
-                </div>
-              </div>
-            </div>
-            <!-- 流式生成中的气泡 -->
-            <div v-if="streamingText || streamingLoading" class="chat-msg ai-msg">
-              <div class="msg-bubble">
-                <span class="msg-role">AI</span>
-                <div class="msg-content">
-                  <span v-if="streamingLoading && !streamingText" class="streaming-dot">思考中…</span>
-                  <div v-else class="md-content" v-html="renderAiMsgContent(streamingText)"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 快捷问题 -->
-          <div class="quick-questions">
+        <template v-if="!rightCollapsed">
+          <div class="side-tabbar">
             <button
-              v-for="q in QUICK_QUESTIONS"
-              :key="q"
-              class="quick-btn"
-              :disabled="streamingLoading"
-              @click="sendQuestion(q)"
-            >{{ q }}</button>
+              class="tab-btn"
+              :class="{ active: sideTab === 'ai' }"
+              @click="openRightPanel('ai')"
+              >AI助手</button
+            >
+            <button
+              class="tab-btn"
+              :class="{ active: sideTab === 'note' }"
+              @click="openRightPanel('note')"
+              >随手记</button
+            >
+            <el-button
+              v-if="sideTab === 'ai'"
+              class="ai-clear-toolbar-btn"
+              text
+              size="small"
+              :disabled="!aiConversationId || aiChatLoading"
+              @click="handleClearMessages"
+              >清空对话</el-button
+            >
+            <button class="tab-close" @click="rightCollapsed = true">
+              <el-icon><Close /></el-icon>
+            </button>
           </div>
 
-          <!-- 输入框 -->
-          <div class="ai-input-wrap">
-            <el-input
-              v-model="chatInput"
-              type="textarea"
-              :rows="2"
-              resize="none"
-              placeholder="输入问题，基于当前项目资料回答…"
-              :disabled="streamingLoading"
-              @keydown.enter.exact.prevent="handleSend"
-            />
-            <div class="ai-input-actions">
-              <el-button
-                v-if="streamingLoading"
-                type="danger"
-                size="small"
-                @click="stopStream"
-              >停止</el-button>
-              <el-button
-                v-else
-                type="primary"
-                size="small"
-                :disabled="!chatInput.trim()"
-                @click="handleSend"
-              >发送</el-button>
-            </div>
+          <div v-if="sideTab === 'ai'" class="side-body ai-body">
+            <div v-if="!activeProjectId" class="side-empty">请选择左侧项目后查看 AI 摘要与问答</div>
+
+            <template v-else>
+              <div class="ai-summary-wrap" v-loading="aiSummaryLoading">
+                <div v-if="!aiSummary || aiSummary.status === 0" class="ai-summary-empty">
+                  <el-icon><InfoFilled /></el-icon>
+                  <span>{{
+                    aiSummary?.blockReason || '当前项目 AI 尚未就绪，请联系管理员先完成构建'
+                  }}</span>
+                </div>
+                <div v-else-if="aiSummary.status === 1" class="ai-summary-building">
+                  <el-icon class="is-loading"><Loading /></el-icon>
+                  <span>AI 摘要生成中，请稍候…</span>
+                </div>
+                <div v-else-if="aiSummary.status === 3" class="ai-summary-failed">
+                  <el-icon><WarningFilled /></el-icon>
+                  <span>{{
+                    aiSummary.blockReason || `摘要生成失败：${aiSummary.errorMessage || '未知错误'}`
+                  }}</span>
+                </div>
+                <div
+                  v-else-if="aiSummary.status === 2 && aiSummary.summary"
+                  class="ai-summary-card"
+                >
+                  <div class="summary-updated">
+                    最后更新：{{
+                      aiSummary.updatedTime
+                        ? formatDate(new Date(aiSummary.updatedTime), 'YYYY-MM-DD HH:mm')
+                        : '-'
+                    }}
+                  </div>
+                  <div class="summary-field">
+                    <span class="field-label">项目概述</span>
+                    <span class="field-value">{{ aiSummary.summary.projectOverview }}</span>
+                  </div>
+                  <div class="summary-field">
+                    <span class="field-label">建设目标</span>
+                    <span class="field-value">{{ aiSummary.summary.businessGoal }}</span>
+                  </div>
+                  <div class="summary-field">
+                    <span class="field-label">建设范围</span>
+                    <span class="field-value">{{ aiSummary.summary.constructionScope }}</span>
+                  </div>
+                  <div class="summary-field">
+                    <span class="field-label">实施计划</span>
+                    <span class="field-value">{{ aiSummary.summary.implementationPlan }}</span>
+                  </div>
+                  <div class="summary-field">
+                    <span class="field-label">预算信息</span>
+                    <span class="field-value">{{ aiSummary.summary.budgetInfo }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <template v-if="aiSummary?.status === 2">
+                <div class="ai-messages" ref="aiMessagesRef">
+                  <div v-if="aiChatLoading && aiMessages.length === 0" class="ai-messages-loading">
+                    <el-icon class="is-loading"><Loading /></el-icon>
+                    <span>加载中…</span>
+                  </div>
+
+                  <div
+                    v-for="msg in aiMessages"
+                    :key="msg.id"
+                    class="chat-msg"
+                    :class="msg.type === 'user' ? 'user-msg' : 'ai-msg'"
+                  >
+                    <div class="msg-bubble">
+                      <span class="msg-role">{{ msg.type === 'user' ? '您' : 'AI' }}</span>
+                      <div class="msg-content">
+                        <div
+                          class="md-content"
+                          v-html="
+                            msg.type === 'user'
+                              ? renderUserMsgContent(msg.content)
+                              : renderAiMsgContent(msg.content)
+                          "
+                        ></div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div v-if="streamingText || streamingLoading" class="chat-msg ai-msg">
+                    <div class="msg-bubble">
+                      <span class="msg-role">AI</span>
+                      <div class="msg-content">
+                        <span v-if="streamingLoading && !streamingText" class="streaming-dot"
+                          >思考中…</span
+                        >
+                        <div
+                          v-else
+                          class="md-content"
+                          v-html="renderAiMsgContent(streamingText)"
+                        ></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="quick-questions">
+                  <button
+                    v-for="q in QUICK_QUESTIONS"
+                    :key="q"
+                    class="quick-btn"
+                    :disabled="streamingLoading"
+                    @click="sendQuestion(q)"
+                    >{{ q }}</button
+                  >
+                </div>
+
+                <div class="ai-input-wrap">
+                  <el-input
+                    v-model="chatInput"
+                    class="ai-input-field"
+                    type="textarea"
+                    :rows="1"
+                    resize="none"
+                    placeholder="输入问题，基于当前项目资料回答…"
+                    :disabled="streamingLoading"
+                    @keydown.enter.exact.prevent="handleSend"
+                  />
+                  <div class="ai-input-actions">
+                    <el-button
+                      v-if="streamingLoading"
+                      class="ai-ghost-btn danger ai-stop-btn"
+                      type="danger"
+                      circle
+                      @click="stopStream"
+                    >
+                      <el-icon><Close /></el-icon>
+                    </el-button>
+                    <el-button
+                      v-else
+                      class="ai-primary-btn ai-send-btn"
+                      type="primary"
+                      circle
+                      :disabled="!chatInput.trim()"
+                      @click="handleSend"
+                    >
+                      <el-icon><Promotion /></el-icon>
+                    </el-button>
+                  </div>
+                </div>
+              </template>
+
+              <div v-else-if="aiSummary && aiSummary.status !== 2" class="ai-chat-unavail">
+                {{ aiSummary.blockReason || 'AI 摘要就绪后才能开始对话' }}
+              </div>
+            </template>
+          </div>
+
+          <div v-else class="side-body note-body">
+            <div v-if="!activeProjectId" class="side-empty">请选择左侧项目后记录随手记</div>
+
+            <template v-else>
+              <div class="note-head">
+                <div class="note-title">{{ activeProjectTitle }}</div>
+                <div class="note-sub">随手记 · {{ projectNotes.length }} 条</div>
+              </div>
+
+              <div class="note-editor">
+                <el-input
+                  v-model="noteDraft"
+                  type="textarea"
+                  :rows="3"
+                  resize="none"
+                  maxlength="800"
+                  show-word-limit
+                  placeholder="输入你的会议关注点、疑问或待确认事项"
+                />
+                <div class="note-editor-actions">
+                  <el-button
+                    type="primary"
+                    size="small"
+                    :disabled="!noteDraft.trim()"
+                    @click="addNote"
+                    >新增记录</el-button
+                  >
+                  <el-button size="small" text @click="noteDraft = ''">清空输入</el-button>
+                </div>
+              </div>
+
+              <div class="note-list">
+                <div v-if="projectNotes.length === 0" class="note-empty"
+                  >暂无记录，先添加一条随手记。</div
+                >
+                <div v-for="note in projectNotes" :key="note.id" class="note-item">
+                  <el-input
+                    :model-value="note.content"
+                    type="textarea"
+                    :rows="3"
+                    resize="none"
+                    maxlength="800"
+                    show-word-limit
+                    @update:model-value="(val) => updateNote(note.id, String(val ?? ''))"
+                  />
+                  <div class="note-item-foot">
+                    <span>{{ formatDate(new Date(note.updatedAt), 'YYYY-MM-DD HH:mm') }}</span>
+                    <el-button size="small" text @click="removeNote(note.id)">删除</el-button>
+                  </div>
+                </div>
+              </div>
+            </template>
           </div>
         </template>
-
-        <!-- 摘要未就绪时提示 -->
-        <div v-else-if="aiSummary && aiSummary.status !== 2" class="ai-chat-unavail">
-          {{ aiSummary.blockReason || 'AI 摘要就绪后才能开始对话' }}
-        </div>
       </aside>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue'
-import { Document, Folder, InfoFilled, Link, Loading, Refresh, WarningFilled } from '@element-plus/icons-vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import {
+  ArrowLeftBold,
+  ArrowRightBold,
+  Close,
+  Document,
+  Folder,
+  InfoFilled,
+  Link,
+  Loading,
+  Promotion,
+  Refresh,
+  Search,
+  WarningFilled
+} from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import MarkdownIt from 'markdown-it'
 import { formatDate } from '@/utils/formatTime'
@@ -301,17 +446,14 @@ import { ChatMessageApi, type ChatMessageVO } from '@/api/ai/chat/message/index'
 
 defineOptions({ name: 'ReviewTablet' })
 
-// ── 快捷问题 ──────────────────────────────────────────────────
-const QUICK_QUESTIONS = [
-  '这个项目要解决什么问题？',
-  '建设范围包括哪些内容？',
-  '实施计划是怎样的？',
-  '预算或投入信息有哪些？'
-]
+const QUICK_QUESTIONS = ['建设范围包括哪些内容？', '预算或投入信息有哪些？']
+
+const NOTE_STORAGE_KEY = 'review-tablet-notes:v1'
 
-// ── 类型 ──────────────────────────────────────────────────────
 type TreeNode = ProjectTreeNode | FileTreeNode
 
+type SideTab = 'ai' | 'note'
+
 interface ProjectTreeNode {
   id: string
   type: 'project'
@@ -344,11 +486,23 @@ interface ProjectAiState {
   messages: ChatMessageVO[]
 }
 
-// ── 目录 & 预览 state ─────────────────────────────────────────
+interface ReviewTabletNote {
+  id: string
+  projectId: number
+  content: string
+  createdAt: string
+  updatedAt: string
+}
+
 const pageLoading = ref(false)
 const previewLoading = ref(false)
 const previewError = ref('')
 const keyword = ref('')
+const leftCollapsed = ref(false)
+const rightCollapsed = ref(false)
+const sideTab = ref<SideTab>('ai')
+const viewportWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1366)
+const coarsePointer = ref(false)
 
 const treeRef = ref<any>()
 const treeData = ref<ProjectTreeNode[]>([])
@@ -367,15 +521,81 @@ const previewRequestToken = ref(0)
 const treeProps = { label: 'label', children: 'children' }
 
 const projectCount = computed(() => treeData.value.length)
-const activeFileName = computed(() => activeFileNode.value?.label || previewPayload.value?.fileName || '')
+const showAgendaOverview = computed(
+  () =>
+    !previewLoading.value &&
+    !activeFileId.value &&
+    treeData.value.length > 0 &&
+    expandedKeys.value.length === 0
+)
+const agendaOverviewList = computed(() =>
+  treeData.value.map((item) => ({
+    id: item.id,
+    projectTitle: item.label,
+    agendaCategory: item.source.agendaCategory,
+    expertInfos: (item.source.expertInfos || []).map((expert, index) => ({
+      key: `${item.id}-${index}-${expert.name || 'expert'}`,
+      name: expert.name,
+      organization: expert.organization,
+      title: expert.title,
+      position: expert.position,
+      remark: expert.remark ? `备注：${expert.remark}` : ''
+    })),
+    reporter: item.source.reporter,
+    reporterUnit: item.source.reporterUnit,
+    seqNoText: item.seqNo ? String(item.seqNo).padStart(2, '0') : '--'
+  }))
+)
+const agendaExpertInfos = computed(() => {
+  const seen = new Set<string>()
+  return agendaOverviewList.value
+    .flatMap((item) => item.expertInfos)
+    .filter((expert) => {
+      const key = [
+        expert.name,
+        expert.organization,
+        expert.title,
+        expert.position,
+        expert.remark
+      ].join('|')
+      if (seen.has(key)) return false
+      seen.add(key)
+      return true
+    })
+})
+const agendaMeetingLabel = computed(() => {
+  const first = treeData.value[0]?.source
+  if (!first) return '当日评审项目总览'
+  const timeSegments = [first.meetingName]
+  if (first.meetingStartTime && first.meetingEndTime) {
+    timeSegments.push(
+      `${formatDate(new Date(first.meetingStartTime), 'HH:mm')} - ${formatDate(
+        new Date(first.meetingEndTime),
+        'HH:mm'
+      )}`
+    )
+  }
+  return timeSegments.filter(Boolean).join(' · ')
+})
+const activeFileName = computed(
+  () => activeFileNode.value?.label || previewPayload.value?.fileName || ''
+)
+const activeProjectTitle = computed(() => {
+  if (!activeProjectId.value) return ''
+  return (
+    treeData.value.find((item) => item.projectId === activeProjectId.value)?.label ||
+    `项目 ${activeProjectId.value}`
+  )
+})
 const activeFileDesc = computed(() => {
   if (!activeFileNode.value) return ''
   const segs: string[] = []
   if (activeFileNode.value.fileType) segs.push(activeFileNode.value.fileType.toUpperCase())
   if (activeFileNode.value.fileSize) segs.push(formatFileSize(activeFileNode.value.fileSize))
-  if (activeFileNode.value.createTime)
+  if (activeFileNode.value.createTime) {
     segs.push(`上传于 ${formatDate(new Date(activeFileNode.value.createTime), 'YYYY-MM-DD HH:mm')}`)
-  return segs.join(' · ')
+  }
+  return segs.join(' ')
 })
 const previewLoadingTitle = computed(() =>
   isOfficeFile(activeFileNode.value?.fileType) ? '正在转换文档预览' : '正在加载预览'
@@ -385,9 +605,32 @@ const previewLoadingSubtitle = computed(() =>
     ? 'Office 文件首次打开可能需要一些时间，请稍候'
     : '正在为您打开当前资料'
 )
+const isTouchTablet = computed(() => coarsePointer.value)
+const isCompactTablet = computed(() => coarsePointer.value && viewportWidth.value <= 1400)
+const isDenseTablet = computed(() => coarsePointer.value && viewportWidth.value <= 1180)
+const shellClasses = computed(() => ({
+  'is-touch-tablet': isTouchTablet.value,
+  'is-compact-tablet': isCompactTablet.value,
+  'is-dense-tablet': isDenseTablet.value
+}))
+const layoutColumns = computed(() => {
+  let leftExpanded = 'clamp(220px, 20vw, 280px)'
+  let rightExpanded = 'clamp(290px, 24vw, 340px)'
+
+  if (isCompactTablet.value) {
+    leftExpanded = 'clamp(196px, 19vw, 236px)'
+    rightExpanded = 'clamp(258px, 24vw, 300px)'
+  }
+  if (isDenseTablet.value) {
+    leftExpanded = 'clamp(182px, 18vw, 216px)'
+    rightExpanded = 'clamp(236px, 23vw, 278px)'
+  }
+
+  const left = leftCollapsed.value ? '22px' : leftExpanded
+  const right = rightCollapsed.value ? '22px' : rightExpanded
+  return `${left} minmax(0, 1fr) ${right}`
+})
 
-// ── AI 面板 state ─────────────────────────────────────────────
-const aiPanelOpen = ref(false)
 const aiSummaryLoading = ref(false)
 const aiSummary = ref<ReviewAiSummaryVO | null>(null)
 const aiConversationId = ref<number | null>(null)
@@ -404,20 +647,60 @@ let officeWarmupTimers: ReturnType<typeof setTimeout>[] = []
 let previewFrameTimeoutTimer: ReturnType<typeof setTimeout> | null = null
 const aiProjectCache = ref<Record<number, ProjectAiState>>({})
 
-// ── 搜索过滤 ──────────────────────────────────────────────────
+const allNotes = ref<ReviewTabletNote[]>([])
+const noteDraft = ref('')
+const projectNotes = computed(() => {
+  if (!activeProjectId.value) return []
+  return allNotes.value
+    .filter((item) => item.projectId === activeProjectId.value)
+    .sort((a, b) => +new Date(b.updatedAt) - +new Date(a.updatedAt))
+})
+
+const isAiTabActive = computed(() => !rightCollapsed.value && sideTab.value === 'ai')
+
 watch(keyword, (val) => treeRef.value?.filter(val.trim()))
+watch(
+  () => activeProjectId.value,
+  () => {
+    noteDraft.value = ''
+  }
+)
+watch([isAiTabActive, () => activeProjectId.value], ([active, projectId]) => {
+  if (active && projectId) restoreOrLoadProjectAi(projectId)
+})
+
+let coarsePointerQuery: MediaQueryList | null = null
+
+const syncViewportProfile = () => {
+  if (typeof window === 'undefined') return
+  viewportWidth.value = window.innerWidth
+  coarsePointer.value = window.matchMedia('(pointer: coarse)').matches
+}
+
+onMounted(() => {
+  syncViewportProfile()
+  if (typeof window === 'undefined') return
+  coarsePointerQuery = window.matchMedia('(pointer: coarse)')
+  window.addEventListener('resize', syncViewportProfile, { passive: true })
+  if (typeof coarsePointerQuery.addEventListener === 'function') {
+    coarsePointerQuery.addEventListener('change', syncViewportProfile)
+  } else {
+    coarsePointerQuery.addListener(syncViewportProfile)
+  }
+})
 
 const filterNode = (value: string, data: TreeNode): boolean => {
   if (!value) return true
   const kw = value.toLowerCase()
   if (data.type === 'project') {
-    return [data.label, data.meetingName].join('|').toLowerCase().includes(kw)
-      || data.children.some((f) => f.label.toLowerCase().includes(kw))
+    return (
+      [data.label, data.meetingName].join('|').toLowerCase().includes(kw) ||
+      data.children.some((f) => f.label.toLowerCase().includes(kw))
+    )
   }
   return [data.label, data.fileType].join('|').toLowerCase().includes(kw)
 }
 
-// ── 树节点构建 ────────────────────────────────────────────────
 const buildProjectNode = (item: ReviewTabletCatalogVO): ProjectTreeNode => ({
   id: `project-${item.reviewMeetingProjectId}`,
   type: 'project',
@@ -444,7 +727,6 @@ const toFileNode = (file: ReviewMeetingFileRespVO, projectId: number): FileTreeN
   source: file
 })
 
-// ── 文件加载 ──────────────────────────────────────────────────
 const loadProjectFiles = async (projectNode: ProjectTreeNode) => {
   if (projectNode.loaded || projectNode.loading) return
   const cached = fileCache.value[projectNode.projectId]
@@ -468,7 +750,6 @@ const loadProjectFiles = async (projectNode: ProjectTreeNode) => {
   }
 }
 
-// ── 预览 ──────────────────────────────────────────────────────
 const loadPreview = async (fileId: number) => {
   const requestToken = ++previewRequestToken.value
   clearPreviewFrameTimeout()
@@ -482,7 +763,12 @@ const loadPreview = async (fileId: number) => {
     const payload = await getFileOpenUrl(fileId)
     if (requestToken !== previewRequestToken.value) return
     previewPayload.value = payload
-    if (!payload?.openUrl) { previewUrl.value = ''; previewFrameLoading.value = false; previewError.value = '未获取到预览地址'; return }
+    if (!payload?.openUrl) {
+      previewUrl.value = ''
+      previewFrameLoading.value = false
+      previewError.value = '未获取到预览地址'
+      return
+    }
     previewUrl.value = payload.openUrl
     startPreviewFrameTimeout(requestToken)
   } catch {
@@ -506,11 +792,16 @@ const selectFileNode = async (fileNode: FileTreeNode) => {
 
 const openInNewWindow = () => {
   const url = previewPayload.value?.openUrl || previewUrl.value
-  if (!url) { ElMessage.warning('暂无可打开的预览地址'); return }
+  if (!url) {
+    ElMessage.warning('暂无可打开的预览地址')
+    return
+  }
   window.open(url, '_blank', 'noopener,noreferrer')
 }
 
-const refreshPreview = async () => { if (activeFileId.value) await loadPreview(activeFileId.value) }
+const refreshPreview = async () => {
+  if (activeFileId.value) await loadPreview(activeFileId.value)
+}
 
 const handlePreviewFrameLoad = () => {
   clearPreviewFrameTimeout()
@@ -523,16 +814,32 @@ const handlePreviewFrameError = () => {
   previewError.value = '预览内容加载失败，请稍后重试'
 }
 
-// ── 树事件 ────────────────────────────────────────────────────
 const handleNodeExpand = async (data: TreeNode) => {
   if (data.type !== 'project') return
   if (!expandedKeys.value.includes(data.id)) expandedKeys.value.push(data.id)
   await loadProjectFiles(data)
 }
 
+const resetPreviewSelection = async () => {
+  clearPreviewFrameTimeout()
+  previewRequestToken.value += 1
+  previewError.value = ''
+  previewUrl.value = ''
+  previewPayload.value = undefined
+  activeFileId.value = undefined
+  activeFileNode.value = undefined
+  previewFrameLoading.value = false
+  previewFrameKey.value += 1
+  await nextTick()
+  treeRef.value?.setCurrentKey(undefined)
+}
+
 const handleNodeCollapse = (data: TreeNode) => {
   if (data.type !== 'project') return
   expandedKeys.value = expandedKeys.value.filter((id) => id !== data.id)
+  if (expandedKeys.value.length === 0) {
+    resetPreviewSelection()
+  }
 }
 
 const handleNodeClick = async (data: TreeNode) => {
@@ -541,23 +848,20 @@ const handleNodeClick = async (data: TreeNode) => {
     const switched = activeProjectId.value !== data.projectId
     activeProjectId.value = data.projectId
     await loadProjectFiles(data)
-    if (switched && aiPanelOpen.value) {
-      restoreOrLoadProjectAi(data.projectId)
-    }
-    if (!switched && aiPanelOpen.value) {
+    if (isAiTabActive.value && (switched || !aiSummary.value)) {
       restoreOrLoadProjectAi(data.projectId)
     }
     return
   }
+
   persistCurrentProjectAiState()
   const switched = activeProjectId.value !== data.projectId
   await selectFileNode(data)
-  if (aiPanelOpen.value && (switched || !aiSummary.value)) {
+  if (isAiTabActive.value && (switched || !aiSummary.value)) {
     restoreOrLoadProjectAi(data.projectId)
   }
 }
 
-// ── 目录加载 ──────────────────────────────────────────────────
 const loadCatalog = async () => {
   pageLoading.value = true
   clearPreviewFrameTimeout()
@@ -569,8 +873,8 @@ const loadCatalog = async () => {
   activeFileId.value = undefined
   activeFileNode.value = undefined
   activeProjectId.value = undefined
+  aiProjectCache.value = {}
   resetProjectAiState()
-  aiPanelOpen.value = false
   try {
     const catalog = await getTodayCatalog()
     treeData.value = catalog
@@ -585,10 +889,10 @@ const loadCatalog = async () => {
   }
 }
 
-// ── AI 面板 ───────────────────────────────────────────────────
-const toggleAiPanel = async () => {
-  aiPanelOpen.value = !aiPanelOpen.value
-  if (aiPanelOpen.value && activeProjectId.value) {
+const openRightPanel = (tab: SideTab) => {
+  sideTab.value = tab
+  rightCollapsed.value = false
+  if (tab === 'ai' && activeProjectId.value) {
     restoreOrLoadProjectAi(activeProjectId.value)
   }
 }
@@ -644,16 +948,13 @@ const loadProjectAi = async (projectId: number) => {
     if (token !== aiLoadToken || activeProjectId.value !== projectId) return
     aiSummary.value = summary
     persistCurrentProjectAiState()
-    // 如果生成中，开启轮询
     if (aiSummary.value?.status === AI_SUMMARY_STATUS.BUILDING) {
       startSummaryPolling(projectId)
     }
-    // 已完成则加载会话
     if (aiSummary.value?.status === AI_SUMMARY_STATUS.SUCCESS) {
       await openAndLoadConversation(projectId)
     }
   } catch (e: any) {
-    // 如果是视图窗口未到，静默处理
     if (e?.code !== 1900009006) ElMessage.error('加载 AI 摘要失败')
   } finally {
     aiSummaryLoading.value = false
@@ -673,21 +974,22 @@ const openAndLoadConversation = async (projectId: number) => {
     persistCurrentProjectAiState()
     await scrollAiToBottom()
   } catch {
-    // 会话打开失败不影响主流程
+    // ignore
   } finally {
     aiChatLoading.value = false
   }
 }
 
-// 摘要生成中轮询
 const startSummaryPolling = (projectId: number) => {
   clearSummaryPolling()
   summaryPollingTimer = setTimeout(async () => {
-    if (activeProjectId.value !== projectId || !aiPanelOpen.value) return
+    if (activeProjectId.value !== projectId || !isAiTabActive.value) return
     try {
       aiSummary.value = await getProjectAiSummary(projectId)
       persistCurrentProjectAiState()
-    } catch { /* silent */ }
+    } catch {
+      // ignore
+    }
     if (aiSummary.value?.status === AI_SUMMARY_STATUS.BUILDING) {
       startSummaryPolling(projectId)
     } else if (aiSummary.value?.status === AI_SUMMARY_STATUS.SUCCESS) {
@@ -697,18 +999,23 @@ const startSummaryPolling = (projectId: number) => {
 }
 
 const clearSummaryPolling = () => {
-  if (summaryPollingTimer) { clearTimeout(summaryPollingTimer); summaryPollingTimer = null }
+  if (summaryPollingTimer) {
+    clearTimeout(summaryPollingTimer)
+    summaryPollingTimer = null
+  }
 }
 
-// ── AI 对话 ───────────────────────────────────────────────────
-const sendQuestion = (q: string) => { chatInput.value = q; handleSend() }
+const sendQuestion = (q: string) => {
+  chatInput.value = q
+  handleSend()
+}
 
 const handleSend = async () => {
   const content = chatInput.value.trim()
-  if (!content || streamingLoading.value || !aiConversationId.value || !activeProjectId.value) return
+  if (!content || streamingLoading.value || !aiConversationId.value || !activeProjectId.value)
+    return
   chatInput.value = ''
 
-  // 先插入用户消息
   aiMessages.value.push({ id: Date.now(), type: 'user', content, createTime: new Date() } as any)
   streamingLoading.value = true
   streamingText.value = ''
@@ -735,7 +1042,6 @@ const handleSend = async () => {
         if (data?.receive?.content === '' && !data?.receive?.reasoningContent) return
         if (isFirst) {
           isFirst = false
-          // 用真实 send 消息替换假消息
           aiMessages.value.pop()
           aiMessages.value.push(data.send)
           persistCurrentProjectAiState()
@@ -750,7 +1056,6 @@ const handleSend = async () => {
         throw _err
       },
       async () => {
-        // 流式结束，把完整回复追加为消息记录
         if (streamingText.value) {
           aiMessages.value.push({
             id: Date.now() + 1,
@@ -771,7 +1076,10 @@ const handleSend = async () => {
 }
 
 const stopStream = () => {
-  if (streamAbortCtrl) { streamAbortCtrl.abort(); streamAbortCtrl = null }
+  if (streamAbortCtrl) {
+    streamAbortCtrl.abort()
+    streamAbortCtrl = null
+  }
   if (streamingText.value) {
     aiMessages.value.push({
       id: Date.now() + 1,
@@ -786,7 +1094,13 @@ const stopStream = () => {
 }
 
 const handleClearMessages = async () => {
-  await ElMessageBox.confirm('确认清空当前项目的全部问答记录？摘要和知识库不受影响。', '提示', { type: 'warning' })
+  try {
+    await ElMessageBox.confirm('确认清空当前项目的全部问答记录？摘要和知识库不受影响。', '提示', {
+      type: 'warning'
+    })
+  } catch {
+    return
+  }
   if (!activeProjectId.value) return
   stopStream()
   await clearProjectAiMessages(activeProjectId.value)
@@ -800,7 +1114,66 @@ const scrollAiToBottom = async () => {
   if (aiMessagesRef.value) aiMessagesRef.value.scrollTop = aiMessagesRef.value.scrollHeight
 }
 
-// ── 工具 ──────────────────────────────────────────────────────
+const readNotes = (): ReviewTabletNote[] => {
+  try {
+    const raw = localStorage.getItem(NOTE_STORAGE_KEY)
+    if (!raw) return []
+    const parsed = JSON.parse(raw)
+    if (!Array.isArray(parsed)) return []
+    return parsed.filter(
+      (item) => item && typeof item.id === 'string' && typeof item.projectId === 'number'
+    )
+  } catch {
+    return []
+  }
+}
+
+const writeNotes = () => {
+  try {
+    localStorage.setItem(NOTE_STORAGE_KEY, JSON.stringify(allNotes.value))
+  } catch {
+    // ignore storage write errors
+  }
+}
+
+const addNote = () => {
+  if (!activeProjectId.value) {
+    ElMessage.warning('请先选择项目')
+    return
+  }
+  const content = noteDraft.value.trim()
+  if (!content) return
+  const now = new Date().toISOString()
+  const note: ReviewTabletNote = {
+    id: `${Date.now()}-${Math.random().toString(16).slice(2)}`,
+    projectId: activeProjectId.value,
+    content,
+    createdAt: now,
+    updatedAt: now
+  }
+  allNotes.value.unshift(note)
+  writeNotes()
+  noteDraft.value = ''
+}
+
+const updateNote = (id: string, content: string) => {
+  const target = allNotes.value.find((item) => item.id === id)
+  if (!target) return
+  target.content = content
+  target.updatedAt = new Date().toISOString()
+  writeNotes()
+}
+
+const removeNote = async (id: string) => {
+  try {
+    await ElMessageBox.confirm('确认删除这条随手记？', '提示', { type: 'warning' })
+  } catch {
+    return
+  }
+  allNotes.value = allNotes.value.filter((item) => item.id !== id)
+  writeNotes()
+}
+
 const formatFileSize = (bytes: number): string => {
   if (!bytes) return '-'
   if (bytes < 1024) return `${bytes} B`
@@ -808,7 +1181,8 @@ const formatFileSize = (bytes: number): string => {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }
 
-const isOfficeFile = (fileType?: string) => ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes((fileType || '').toLowerCase())
+const isOfficeFile = (fileType?: string) =>
+  ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes((fileType || '').toLowerCase())
 
 const clearOfficeWarmupTimers = () => {
   officeWarmupTimers.forEach((timer) => clearTimeout(timer))
@@ -852,231 +1226,682 @@ const markdown = new MarkdownIt({
 })
 
 const escapeHtml = (text: string) =>
-  text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
+  text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
 
-const renderUserMsgContent = (text: string) =>
-  escapeHtml(text || '').replace(/\n/g, '<br/>')
+const renderUserMsgContent = (text: string) => escapeHtml(text || '').replace(/\n/g, '<br/>')
 
-const renderAiMsgContent = (text: string) =>
-  markdown.render(text || '')
+const renderAiMsgContent = (text: string) => markdown.render(text || '')
 
+onBeforeUnmount(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('resize', syncViewportProfile)
+  }
+  if (coarsePointerQuery) {
+    if (typeof coarsePointerQuery.removeEventListener === 'function') {
+      coarsePointerQuery.removeEventListener('change', syncViewportProfile)
+    } else {
+      coarsePointerQuery.removeListener(syncViewportProfile)
+    }
+  }
+  stopStream()
+  clearSummaryPolling()
+  clearOfficeWarmupTimers()
+  clearPreviewFrameTimeout()
+})
+
+allNotes.value = readNotes()
 loadCatalog()
 </script>
 
 <style scoped>
-/* ── 整体布局 ── */
-.tablet-full-page {
+.tablet-shell {
+  --tablet-bg: #e7edf6;
+  --tablet-bg-deep: #dde6f2;
+  --tablet-panel: #edf2f9;
+  --tablet-panel-soft: #f3f6fb;
+  --tablet-surface: #f7f9fc;
+  --tablet-surface-strong: #e3ebf7;
+  --tablet-surface-muted: #e8eef7;
+  --tablet-surface-emphasis: #dde7f5;
+  --tablet-border: #cbd6e5;
+  --tablet-border-strong: #bcc8da;
+  --tablet-text: #263246;
+  --tablet-text-soft: #708096;
+  --tablet-accent: #3c63b6;
   height: 100vh;
+  height: 100dvh;
   min-height: 100vh;
-  padding: 12px;
+  min-height: 100dvh;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  background: #eef2f7;
+  padding: 8px;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at top left, rgba(255, 255, 255, 0.55), transparent 26%),
+    linear-gradient(180deg, var(--tablet-bg) 0%, var(--tablet-bg-deep) 100%);
+  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
 }
 
-.page-toolbar {
-  background: #fff;
-  border-radius: 12px;
-  padding: 12px 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  border: 1px solid #e5e7eb;
-}
-
-.title-wrap h2 { margin: 0; font-size: 22px; font-weight: 700; }
-.title-wrap span { display: block; margin-top: 4px; font-size: 13px; color: #6b7280; }
-.tool-wrap { display: flex; align-items: center; gap: 8px; }
-.search-input { width: 320px; }
-
-.page-body {
-  flex: 1;
+.tablet-layout {
+  height: 100%;
   min-height: 0;
   display: grid;
-  grid-template-columns: 360px minmax(0, 1fr);
-  gap: 12px;
+  gap: 8px;
   transition: grid-template-columns 0.25s ease;
 }
 
-.page-body.ai-open {
-  grid-template-columns: 280px minmax(0, 1fr) 360px;
+.left-pane,
+.center-pane,
+.right-pane {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  border-radius: 10px;
+  border: 1px solid var(--tablet-border);
+  overflow: hidden;
 }
 
-/* ── 目录面板 ── */
-.directory-panel,
-.preview-panel,
-.ai-panel {
-  border: 1px solid #e5e7eb;
+.left-pane {
+  background: var(--tablet-panel);
+  display: flex;
+  flex-direction: column;
+  padding: 12px 10px;
+  box-sizing: border-box;
+}
+
+.center-pane {
+  background: var(--tablet-surface);
+  display: flex;
+  flex-direction: column;
+}
+
+.right-pane {
+  background: var(--tablet-panel-soft);
+  display: flex;
+  flex-direction: column;
+}
+
+.left-pane.collapsed,
+.right-pane.collapsed {
+  border: none;
+  background: transparent;
+  overflow: visible;
+}
+
+.pane-handle {
+  position: absolute;
+  top: 50%;
+  width: 20px;
+  height: 54px;
+  margin-top: -27px;
+  border: 1px solid var(--tablet-border-strong);
+  background: var(--tablet-bg-deep);
+  color: #556987;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 5;
+}
+
+.left-handle {
+  right: -10px;
+  border-left: none;
+  border-radius: 0 12px 12px 0;
+}
+
+.right-handle {
+  left: -10px;
+  border-right: none;
+  border-radius: 12px 0 0 12px;
+}
+
+.left-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.left-title {
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--tablet-text);
+}
+
+.left-sub {
+  margin-top: 8px;
+  color: var(--tablet-text-soft);
+  font-size: 14px;
+}
+
+.left-search {
+  margin-top: 12px;
+}
+
+.left-tree-wrap {
+  margin-top: 10px;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.catalog-tree {
+  height: 100%;
+  overflow: auto;
+  padding-right: 2px;
+  background: transparent;
+}
+
+.tree-item {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 6px 0;
+}
+
+.tree-project {
+  position: relative;
+  padding: 8px 6px 10px 2px;
+  margin-bottom: 14px;
+}
+
+.tree-project::after {
+  content: '';
+  position: absolute;
+  left: 28px;
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  background: linear-gradient(90deg, rgba(188, 200, 218, 0.92), rgba(188, 200, 218, 0));
+}
+
+.tree-file {
+  padding: 8px 4px 8px 2px;
+}
+
+.node-main {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+}
+
+.node-label {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  white-space: normal;
+  line-height: 1.4;
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--tablet-text);
+  word-break: break-all;
+}
+
+.node-icon {
+  font-size: 18px;
+  margin-top: 1px;
+  flex-shrink: 0;
+}
+
+.folder-icon {
+  color: var(--tablet-accent);
+  font-size: 24px;
+}
+
+.file-icon {
+  color: #5d7395;
+}
+
+.node-badge {
+  min-width: 20px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-size: 13px;
+  line-height: 1.2;
+  text-align: center;
+  color: var(--tablet-accent);
+  background: #dbe6f6;
+  flex-shrink: 0;
+}
+
+.node-ext {
+  font-size: 12px;
+  line-height: 1.3;
+  color: var(--tablet-text-soft);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.center-header {
+  padding: 14px 16px 10px;
+  border-bottom: 1px solid var(--tablet-border);
+  background: var(--tablet-panel-soft);
+}
+
+.center-title {
+  font-size: 42px;
+  line-height: 1;
+  color: var(--tablet-text);
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.center-sub {
+  margin-top: 10px;
+  color: var(--tablet-text-soft);
+  font-size: 26px;
+}
+
+.center-actions {
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 2px;
+}
+
+.center-actions :deep(.el-button) {
+  font-size: 14px;
+}
+
+.center-body {
+  flex: 1;
+  min-height: 0;
+  background: var(--tablet-panel-soft);
+  position: relative;
+}
+
+.agenda-overview {
+  height: 100%;
+  box-sizing: border-box;
+  padding: 18px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+  background:
+    radial-gradient(circle at top right, rgba(196, 213, 239, 0.4), transparent 28%),
+    linear-gradient(180deg, var(--tablet-panel-soft) 0%, var(--tablet-panel) 100%);
+}
+
+.agenda-head {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.agenda-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--tablet-text);
+}
+
+.agenda-sub {
+  font-size: 13px;
+  color: var(--tablet-text-soft);
+}
+
+.agenda-list {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.agenda-content {
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
+  gap: 14px;
+  align-items: stretch;
+  min-height: 0;
+}
+
+.agenda-project {
+  min-width: 0;
+  background: var(--tablet-panel);
+  border-radius: 14px;
+}
+
+.agenda-projects-panel,
+.agenda-experts-panel {
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 10px 12px;
   border-radius: 12px;
+  border: 1px solid var(--tablet-border);
+  box-shadow: 0 8px 24px rgba(139, 158, 191, 0.06);
+}
+
+.agenda-projects-panel {
+  height: 100%;
+  background: var(--tablet-panel);
+}
+
+.agenda-experts-panel {
+  background: var(--tablet-panel);
+}
+
+.agenda-item {
+  min-width: 0;
+}
+
+.agenda-panel-title {
+  margin-bottom: 8px;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--tablet-accent);
+}
+
+.agenda-card {
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: 1px solid var(--tablet-border-strong);
+  background: var(--tablet-surface-strong);
+}
+
+.agenda-index {
+  height: 28px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #d5e3f8, #e5edf9);
+  color: var(--tablet-accent);
+  font-size: 14px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.agenda-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.agenda-name {
+  font-size: 15px;
+  line-height: 1.35;
+  color: var(--tablet-text);
+  font-weight: 600;
+  word-break: break-word;
+}
+
+.agenda-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  color: var(--tablet-text-soft);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.agenda-experts {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.agenda-expert {
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: #e3ebf7;
+  border: 1px solid var(--tablet-border-strong);
+}
+
+.agenda-expert-name {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--tablet-text);
+}
+
+.agenda-expert-meta {
+  margin-top: 3px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  color: var(--tablet-text-soft);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.agenda-experts-empty {
+  color: var(--tablet-text-soft);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.preview-iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
   background: #fff;
 }
 
-.directory-panel {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  padding: 10px;
-}
-
-.panel-title { padding: 6px 8px 10px; font-size: 15px; font-weight: 600; }
-
-.catalog-tree { flex: 1; min-height: 0; overflow: auto; }
-
-.tree-project, .tree-file {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-.node-left { display: inline-flex; align-items: center; min-width: 0; gap: 6px; }
-.node-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.node-icon { font-size: 16px; }
-.folder-icon { color: #2563eb; }
-.file-icon { color: #475569; }
-.file-type { font-size: 11px; color: #64748b; }
-
-/* ── 预览面板 ── */
-.preview-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
-
-.preview-header {
-  padding: 12px 14px;
-  border-bottom: 1px solid #e5e7eb;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-.preview-meta { min-width: 0; }
-.preview-title { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.preview-sub { margin-top: 4px; color: #64748b; font-size: 12px; }
-.preview-actions { display: flex; gap: 8px; flex-shrink: 0; }
-
-.preview-body { flex: 1; min-height: 0; background: #f8fafc; position: relative; }
 .welcome-panel {
   height: 100%;
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  color: #1f2937; text-align: center; padding: 24px;
-}
-.welcome-title { font-size: 30px; font-weight: 700; letter-spacing: 1px; }
-.welcome-sub { margin-top: 12px; font-size: 15px; color: #64748b; }
-.preview-iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
-.preview-loading-mask {
-  position: absolute;
-  inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
-  background: rgba(248, 250, 252, 0.92);
-  z-index: 2;
-  pointer-events: none;
+  color: #293142;
 }
 
-/* ── AI 面板 ── */
-.ai-panel {
+.welcome-title {
+  font-size: 28px;
+  font-weight: 700;
+}
+
+.welcome-sub {
+  margin-top: 10px;
+  font-size: 15px;
+  color: #6f7b8f;
+}
+
+.preview-loading-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
   display: flex;
   flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  background: rgba(243, 246, 251, 0.94);
 }
 
-/* AI 头部 */
-.ai-header {
+.side-tabbar {
+  padding: 10px;
+  border-bottom: 1px solid var(--tablet-border);
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 10px 12px;
-  border-bottom: 1px solid #e5e7eb;
-  flex-shrink: 0;
+  gap: 8px;
+}
+
+.tab-btn {
+  border: none;
+  height: 34px;
+  line-height: 34px;
+  padding: 0 14px;
+  border-radius: 10px;
+  background: #e5ebf4;
+  color: #44566f;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.tab-btn.active {
+  background: #d8e5fb;
+  color: var(--tablet-accent);
+  font-weight: 600;
+}
+
+.tab-close {
+  margin-left: auto;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: none;
+  background: var(--tablet-surface-muted);
+  color: #5d7089;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.ai-clear-toolbar-btn {
+  margin-left: auto;
+  padding: 0 6px;
+  color: var(--tablet-text-soft);
+  font-size: 12px;
+}
+
+.ai-clear-toolbar-btn + .tab-close {
+  margin-left: 0;
+}
+
+.side-body {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.side-empty {
+  margin: auto;
+  width: calc(100% - 24px);
+  padding: 18px;
+  border-radius: 10px;
+  background: var(--tablet-surface-muted);
+  color: var(--tablet-text-soft);
+  font-size: 14px;
+  text-align: center;
+}
+
+.ai-body {
+  min-height: 0;
+  min-width: 0;
 }
-.ai-header-left { display: flex; align-items: center; gap: 8px; }
-.ai-header-right { display: flex; align-items: center; gap: 4px; }
-.ai-title { font-size: 15px; font-weight: 600; }
-.ai-status-badge {
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-weight: 500;
-}
-.status-0 { background: #f3f4f6; color: #6b7280; }
-.status-1 { background: #fef3c7; color: #d97706; }
-.status-2 { background: #d1fae5; color: #059669; }
-.status-3 { background: #fee2e2; color: #dc2626; }
 
-/* 摘要区 */
 .ai-summary-wrap {
   flex-shrink: 0;
-  max-height: 280px;
+  max-height: 260px;
   overflow-y: auto;
+  background: var(--tablet-surface-muted);
+  margin: 10px;
+  border-radius: 10px;
+  border: 1px solid var(--tablet-border);
   padding: 10px 12px;
-  background: #f8fafc;
-  border-bottom: 1px solid #e5e7eb;
 }
 
 .ai-summary-empty,
 .ai-summary-building,
 .ai-summary-failed {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
+  color: var(--tablet-text-soft);
   font-size: 13px;
-  color: #6b7280;
-  padding: 8px 0;
 }
-.ai-summary-failed { color: #dc2626; }
 
-.ai-summary-card { display: flex; flex-direction: column; gap: 8px; }
-.summary-updated { font-size: 11px; color: #9ca3af; }
-.summary-field { display: flex; flex-direction: column; gap: 2px; }
-.field-label {
+.ai-summary-failed {
+  color: #cc3f4f;
+}
+
+.ai-summary-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.summary-updated {
+  color: var(--tablet-text-soft);
   font-size: 11px;
-  font-weight: 600;
-  color: #2563eb;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
 }
-.field-value { font-size: 13px; color: #374151; line-height: 1.5; }
 
-/* 分隔线 */
-.ai-divider { height: 1px; background: #e5e7eb; flex-shrink: 0; }
+.summary-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.field-label {
+  color: var(--tablet-accent);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.field-value {
+  color: var(--tablet-text);
+  font-size: 13px;
+  line-height: 1.5;
+}
 
-/* 消息列表 */
 .ai-messages {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 10px 12px;
+  padding: 0 10px 10px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
+
 .ai-messages-loading {
-  display: flex; align-items: center; gap: 6px;
-  font-size: 13px; color: #9ca3af; padding: 8px 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--tablet-text-soft);
+  font-size: 13px;
+  padding-top: 8px;
 }
 
-.chat-msg { display: flex; }
-.user-msg { justify-content: flex-end; }
-.ai-msg { justify-content: flex-start; }
+.chat-msg {
+  display: flex;
+}
+
+.user-msg {
+  justify-content: flex-end;
+}
+
+.ai-msg {
+  justify-content: flex-start;
+}
 
 .msg-bubble {
-  max-width: 85%;
+  max-width: 92%;
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
-.user-msg .msg-bubble { align-items: flex-end; }
-.ai-msg .msg-bubble { align-items: flex-start; }
 
-.msg-role { font-size: 11px; color: #9ca3af; }
+.user-msg .msg-bubble {
+  align-items: flex-end;
+}
+
+.ai-msg .msg-bubble {
+  align-items: flex-start;
+}
+
+.msg-role {
+  font-size: 11px;
+  color: var(--tablet-text-soft);
+}
 
 .msg-content {
   padding: 8px 12px;
@@ -1085,22 +1910,53 @@ loadCatalog()
   line-height: 1.55;
   word-break: break-word;
 }
-.user-msg .msg-content { background: #2563eb; color: #fff; border-bottom-right-radius: 3px; }
-.ai-msg .msg-content { background: #f3f4f6; color: #1f2937; border-bottom-left-radius: 3px; overflow-x: auto; }
-.streaming-dot { color: #9ca3af; }
 
-.msg-content :deep(.md-content > *:first-child) { margin-top: 0; }
-.msg-content :deep(.md-content > *:last-child) { margin-bottom: 0; }
-.msg-content :deep(p) { margin: 0 0 6px; }
+.user-msg .msg-content {
+  background: #3a66bd;
+  color: #fff;
+  border-bottom-right-radius: 4px;
+}
+
+.ai-msg .msg-content {
+  background: var(--tablet-surface-muted);
+  color: var(--tablet-text);
+  border-bottom-left-radius: 4px;
+  overflow-x: auto;
+}
+
+.streaming-dot {
+  color: var(--tablet-text-soft);
+}
+
+.msg-content :deep(.md-content > *:first-child) {
+  margin-top: 0;
+}
+
+.msg-content :deep(.md-content > *:last-child) {
+  margin-bottom: 0;
+}
+
+.msg-content :deep(p) {
+  margin: 0 0 6px;
+}
+
 .msg-content :deep(ul),
-.msg-content :deep(ol) { margin: 0 0 6px 18px; padding: 0; }
-.msg-content :deep(li) { margin: 0 0 4px; }
+.msg-content :deep(ol) {
+  margin: 0 0 6px 18px;
+  padding: 0;
+}
+
+.msg-content :deep(li) {
+  margin: 0 0 4px;
+}
+
 .msg-content :deep(code) {
   padding: 1px 4px;
   border-radius: 4px;
   font-size: 12px;
   background: rgba(15, 23, 42, 0.08);
 }
+
 .msg-content :deep(pre) {
   margin: 6px 0;
   padding: 8px;
@@ -1108,86 +1964,459 @@ loadCatalog()
   overflow-x: auto;
   background: rgba(15, 23, 42, 0.06);
 }
-.msg-content :deep(pre code) {
-  padding: 0;
-  border-radius: 0;
-  background: transparent;
-}
-.msg-content :deep(table) {
-  width: 100%;
-  min-width: 560px;
-  border-collapse: collapse;
-  margin: 6px 0;
-  background: #fff;
-}
-.msg-content :deep(th),
-.msg-content :deep(td) {
-  padding: 6px 8px;
-  text-align: left;
-  border: 1px solid #d1d5db;
-  vertical-align: top;
-}
-.msg-content :deep(th) { background: #f8fafc; font-weight: 600; }
-.user-msg .msg-content :deep(code) { background: rgba(255, 255, 255, 0.18); }
-.user-msg .msg-content :deep(a) { color: #dbeafe; }
-.ai-msg .msg-content :deep(a) { color: #1d4ed8; }
 
-/* 快捷问题 */
 .quick-questions {
   flex-shrink: 0;
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
-  padding: 8px 12px;
-  border-top: 1px solid #e5e7eb;
+  gap: 4px 6px;
+  padding: 4px 8px 6px;
+  border-top: 1px solid var(--tablet-border);
+  min-width: 0;
+}
+
+.quick-btn {
+  border: 1px solid var(--tablet-border-strong);
+  background: var(--tablet-surface-emphasis);
+  color: var(--tablet-accent);
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 11px;
+  line-height: 1.2;
+  cursor: pointer;
+  transition:
+    background-color 0.18s ease,
+    border-color 0.18s ease,
+    color 0.18s ease;
+}
+
+.quick-btn:hover:not(:disabled) {
+  background: var(--tablet-surface-strong);
+  border-color: var(--tablet-border);
+}
+
+.quick-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
-.quick-btn {
-  padding: 4px 10px;
-  font-size: 12px;
-  background: #eff6ff;
-  border: 1px solid #bfdbfe;
-  border-radius: 12px;
-  color: #1d4ed8;
-  cursor: pointer;
-  transition: all 0.15s;
-  white-space: nowrap;
-}
-.quick-btn:hover:not(:disabled) { background: #dbeafe; }
-.quick-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 
-/* 输入区 */
 .ai-input-wrap {
   flex-shrink: 0;
-  padding: 8px 12px;
-  border-top: 1px solid #e5e7eb;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+  min-width: 0;
+  padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
+  border-top: 1px solid var(--tablet-border);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  column-gap: 8px;
+  background: linear-gradient(180deg, rgba(243, 246, 251, 0.96) 0%, rgba(237, 242, 249, 0.98) 100%);
+  box-sizing: border-box;
+}
+
+.ai-input-actions {
+  display: flex;
+  align-items: flex-end;
+  flex-shrink: 0;
+}
+
+.ai-input-actions :deep(.el-button) {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  margin-left: 0 !important;
+  padding: 0;
+  border-radius: 999px;
+}
+
+.ai-input-field :deep(.el-textarea__inner) {
+  border-radius: 12px;
+  border: 1px solid var(--tablet-border);
+  background: var(--tablet-surface);
+  color: var(--tablet-text);
+  box-shadow: none;
+  padding: 10px 12px;
+  font-size: 14px;
+  line-height: 1.6;
+  min-height: 52px !important;
+  max-height: 104px;
+  box-sizing: border-box;
+}
+
+.ai-input-field :deep(.el-textarea__inner::placeholder) {
+  color: var(--tablet-text-soft);
+}
+
+.ai-input-field :deep(.el-textarea__inner:focus) {
+  border-color: var(--tablet-accent);
+  background: #f9fbfe;
+  box-shadow: 0 0 0 3px rgba(60, 99, 182, 0.08);
+}
+
+.ai-primary-btn {
+  border: 1px solid #b7c9e6;
+  background: linear-gradient(180deg, #dbe7f8 0%, #ccdbee 100%);
+  color: #2e4f8f;
+  box-shadow: none;
+}
+
+.ai-primary-btn:hover:not(:disabled),
+.ai-primary-btn:focus-visible {
+  border-color: #9fb6db;
+  background: linear-gradient(180deg, #d1e0f5 0%, #c2d4ea 100%);
+  color: #24447f;
+}
+
+.ai-primary-btn:disabled {
+  border-color: var(--tablet-border);
+  background: var(--tablet-surface-muted);
+  color: #8a9ab1;
+}
+
+.ai-ghost-btn {
+  border: 1px solid var(--tablet-border-strong);
+  background: var(--tablet-surface);
+  color: var(--tablet-accent);
+}
+
+.ai-ghost-btn:hover:not(:disabled),
+.ai-ghost-btn:focus-visible {
+  border-color: var(--tablet-border);
+  background: var(--tablet-surface-emphasis);
+  color: #274b92;
+}
+
+.ai-ghost-btn.danger {
+  color: #b24b57;
+  border-color: #dcb8be;
+  background: #f6ecee;
+}
+
+.ai-ghost-btn.danger:hover:not(:disabled),
+.ai-ghost-btn.danger:focus-visible {
+  color: #993846;
+  border-color: #d29fa8;
+  background: #f2e2e5;
 }
-.ai-input-actions { display: flex; justify-content: flex-end; }
 
-/* 不可用提示 */
 .ai-chat-unavail {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(--tablet-text-soft);
   font-size: 13px;
-  color: #9ca3af;
+  padding: 12px;
+  text-align: center;
 }
 
-/* ── 树样式 ── */
-:deep(.el-tree-node__content) { height: 42px; padding-right: 8px; }
-:deep(.el-tree-node__content:hover) { background: #eff6ff; }
+.note-body {
+  padding: 10px;
+  box-sizing: border-box;
+  gap: 10px;
+}
 
-/* ── 响应式 ── */
-@media (max-width: 1100px) {
-  .tablet-full-page { height: auto; min-height: 100vh; }
-  .page-toolbar { flex-direction: column; align-items: stretch; }
-  .search-input { width: 100%; }
-  .page-body { grid-template-columns: 1fr !important; }
-  .directory-panel { max-height: 42vh; }
-  .preview-panel { min-height: 56vh; }
-  .ai-panel { min-height: 50vh; }
+.note-head {
+  flex-shrink: 0;
+  border-radius: 10px;
+  border: 1px solid var(--tablet-border);
+  background: var(--tablet-surface-muted);
+  padding: 10px;
+}
+
+.note-title {
+  font-size: 16px;
+  color: var(--tablet-text);
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.note-sub {
+  margin-top: 4px;
+  color: var(--tablet-text-soft);
+  font-size: 12px;
+}
+
+.note-editor {
+  flex-shrink: 0;
+  border: 1px solid var(--tablet-border);
+  border-radius: 10px;
+  background: var(--tablet-surface);
+  padding: 10px;
+}
+
+.note-editor-actions {
+  margin-top: 8px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.note-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.note-empty {
+  color: var(--tablet-text-soft);
+  font-size: 13px;
+  text-align: center;
+  padding: 12px 0;
+}
+
+.note-item {
+  border: 1px solid var(--tablet-border);
+  border-radius: 10px;
+  background: var(--tablet-surface);
+  padding: 10px;
+}
+
+.note-item-foot {
+  margin-top: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--tablet-text-soft);
+  font-size: 12px;
+}
+
+:deep(.el-tree-node__content) {
+  min-height: 48px;
+  height: auto;
+  background: #eef3fb;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+:deep(.el-tree-node__content:hover) {
+  background: var(--tablet-surface-muted);
+}
+
+:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
+  background: var(--tablet-surface-emphasis);
+}
+
+@media (max-width: 1200px) {
+  .left-title {
+    font-size: 24px;
+  }
+
+  .center-title {
+    font-size: 28px;
+  }
+
+  .center-sub {
+    font-size: 20px;
+  }
+
+  .ai-summary-wrap {
+    max-height: 220px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .tablet-shell {
+    padding: 6px;
+  }
+
+  .tablet-layout {
+    gap: 6px;
+  }
+}
+
+@media (pointer: coarse) {
+  .pane-handle {
+    width: 24px;
+    height: 62px;
+  }
+
+  .side-tabbar {
+    padding: 8px 10px;
+  }
+
+  .tab-btn {
+    min-height: 42px;
+    padding: 0 14px;
+    font-size: 14px;
+  }
+
+  .ai-clear-toolbar-btn {
+    font-size: 13px;
+  }
+
+  .quick-btn {
+    min-height: 30px;
+    padding: 4px 10px;
+    font-size: 12px;
+  }
+
+  .ai-input-wrap {
+    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
+  }
+
+  .ai-input-actions :deep(.el-button) {
+    width: 42px;
+    height: 42px;
+    min-width: 42px;
+    min-height: 42px;
+  }
+
+  .ai-input-field :deep(.el-textarea__inner) {
+    min-height: 54px !important;
+    font-size: 15px;
+  }
+}
+
+.tablet-shell.is-touch-tablet {
+  padding: 6px;
+}
+
+.tablet-shell.is-touch-tablet .tablet-layout {
+  gap: 6px;
+}
+
+.tablet-shell.is-touch-tablet .left-pane,
+.tablet-shell.is-touch-tablet .center-pane,
+.tablet-shell.is-touch-tablet .right-pane {
+  border-radius: 12px;
+}
+
+.tablet-shell.is-touch-tablet .left-pane {
+  padding: 10px 8px;
+}
+
+.tablet-shell.is-touch-tablet .center-header {
+  padding: 12px 14px 10px;
+}
+
+.tablet-shell.is-touch-tablet .center-title {
+  font-size: clamp(22px, 2.8vw, 34px);
+}
+
+.tablet-shell.is-touch-tablet .center-sub {
+  margin-top: 8px;
+  font-size: clamp(14px, 1.8vw, 19px);
+}
+
+.tablet-shell.is-touch-tablet .center-actions {
+  justify-content: flex-start;
+  gap: 6px;
+}
+
+.tablet-shell.is-touch-tablet .agenda-overview {
+  padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px));
+}
+
+.tablet-shell.is-touch-tablet .agenda-content {
+  gap: 10px;
+}
+
+.tablet-shell.is-touch-tablet .agenda-card {
+  grid-template-columns: 42px minmax(0, 1fr);
+  gap: 8px;
+}
+
+.tablet-shell.is-touch-tablet .agenda-index {
+  height: 26px;
+  font-size: 13px;
+}
+
+.tablet-shell.is-touch-tablet .agenda-name {
+  font-size: 14px;
+}
+
+.tablet-shell.is-touch-tablet .agenda-meta {
+  font-size: 12px;
+}
+
+.tablet-shell.is-touch-tablet .side-tabbar {
+  padding: 8px;
+}
+
+.tablet-shell.is-touch-tablet .ai-summary-wrap {
+  margin: 8px;
+  padding: 9px 10px;
+  max-height: 208px;
+}
+
+.tablet-shell.is-touch-tablet .ai-messages {
+  padding: 0 8px 8px;
+  gap: 8px;
+}
+
+.tablet-shell.is-touch-tablet .msg-bubble {
+  max-width: 100%;
+}
+
+.tablet-shell.is-touch-tablet .msg-content {
+  padding: 9px 11px;
+  font-size: 14px;
+}
+
+.tablet-shell.is-touch-tablet .quick-questions {
+  padding: 4px 8px 6px;
+}
+
+.tablet-shell.is-touch-tablet .note-body {
+  padding: 8px;
+  gap: 8px;
+}
+
+.tablet-shell.is-compact-tablet .left-title {
+  font-size: 24px;
+}
+
+.tablet-shell.is-compact-tablet .node-label {
+  font-size: 14px;
+}
+
+.tablet-shell.is-compact-tablet .folder-icon {
+  font-size: 22px;
+}
+
+.tablet-shell.is-compact-tablet .tab-btn {
+  font-size: 16px;
+}
+
+.tablet-shell.is-compact-tablet .agenda-content {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.tablet-shell.is-compact-tablet .agenda-projects-panel,
+.tablet-shell.is-compact-tablet .agenda-experts-panel {
+  padding: 10px;
+}
+
+.tablet-shell.is-compact-tablet .ai-summary-wrap {
+  max-height: 188px;
+}
+
+.tablet-shell.is-dense-tablet .center-title {
+  font-size: clamp(20px, 2.4vw, 28px);
+}
+
+.tablet-shell.is-dense-tablet .center-sub {
+  font-size: 14px;
+}
+
+.tablet-shell.is-dense-tablet .center-actions :deep(.el-button) {
+  font-size: 13px;
+}
+
+.tablet-shell.is-dense-tablet .left-sub,
+.tablet-shell.is-dense-tablet .agenda-sub {
+  font-size: 12px;
+}
+
+.tablet-shell.is-dense-tablet .tree-project {
+  margin-bottom: 10px;
 }
 </style>
diff --git a/vite.config.ts b/vite.config.ts
index 791d1bfe2..4d840a47c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -20,6 +20,7 @@ export default ({command, mode}: ConfigEnv): UserConfig => {
     } else {
         env = loadEnv(mode, root)
     }
+    const apiProxyTarget = env.VITE_BASE_URL || 'http://127.0.0.1:48080'
     return {
         base: env.VITE_BASE_PATH,
         root: root,
@@ -31,7 +32,7 @@ export default ({command, mode}: ConfigEnv): UserConfig => {
             open: env.VITE_OPEN === 'true',
             proxy: {
                 ['/admin-api']: {
-                    target: env.VITE_BASE_URL,
+                    target: apiProxyTarget,
                     ws: false,
                     changeOrigin: true
                 },