From f42211b9c3a7f416acf379353b0751501e2faf0a Mon Sep 17 00:00:00 2001
From: stevelliu <stevelliu@tencent.com>
Date: Wed, 25 Mar 2026 15:17:21 +0800
Subject: [PATCH 1/9] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=20UI=20=E5=90=8C?=
 =?UTF-8?q?=E6=AD=A5=E4=B8=8E=E9=87=8D=E6=9E=84=E8=AE=A1=E5=88=92=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=A5=E6=A0=BC=E5=AF=B9=E9=BD=90=20design/ui=5Fdemo=20?=
 =?UTF-8?q?=E5=8E=9F=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 ui-sync-with-demo 计划文档，详细列出重构任务与目标。
- 重构 SessionToolbar、Sidebar、SessionCard、KnowledgeView 和 TopBar 组件，确保样式与功能符合设计稿。
- 优化按钮样式，调整布局，增强用户交互体验。
- 更新 AppLayout 和其他相关组件以支持新样式和功能。
---
 .../plans/ui-sync-with-demo_7774ca21.plan.md  |  59 ++
 apps/desktop/src/App.vue                      |  12 +
 apps/desktop/src/components/AppLayout.vue     |   2 +-
 apps/desktop/src/components/SessionCard.vue   | 458 ++++------
 .../desktop/src/components/SessionToolbar.vue | 185 +++--
 apps/desktop/src/components/Sidebar.vue       | 337 ++++----
 apps/desktop/src/components/TopBar.vue        |  92 ++-
 apps/desktop/src/views/KnowledgeView.vue      | 313 ++++---
 apps/desktop/src/views/SessionsView.vue       | 195 +++--
 design/ui_demo.html                           | 779 ++++++++++++++++++
 ...30\350\256\244\346\240\267\345\274\217.md" |  75 ++
 ...70\350\247\201\351\227\256\351\242\230.md" |   1 +
 12 files changed, 1728 insertions(+), 780 deletions(-)
 create mode 100644 .cursor/plans/ui-sync-with-demo_7774ca21.plan.md
 create mode 100644 design/ui_demo.html
 create mode 100644 "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\345\210\206\346\256\265\346\216\247\344\273\266-WebView\345\216\237\347\224\237button\351\273\230\350\256\244\346\240\267\345\274\217.md"

diff --git a/.cursor/plans/ui-sync-with-demo_7774ca21.plan.md b/.cursor/plans/ui-sync-with-demo_7774ca21.plan.md
new file mode 100644
index 0000000..10c5768
--- /dev/null
+++ b/.cursor/plans/ui-sync-with-demo_7774ca21.plan.md
@@ -0,0 +1,59 @@
+---
+name: ui-sync-with-demo
+overview: 完全按照 design/ui_demo.html 原型还原项目的顶部导航、左侧目录树、顶部搜索栏、会话列表以及知识库视图，消除现存的样式差异。
+todos:
+  - id: sync-session-toolbar
+    content: 重构 SessionToolbar.vue 搜索与分段过滤器的布局和胶囊样式
+    status: completed
+  - id: sync-sidebar-tree
+    content: 定制 Sidebar.vue 目录树源/主机/项目层级的视觉渲染样式，并在会话整理模式下处理多选框的交互样式
+    status: completed
+  - id: sync-session-card
+    content: 将 SessionCard.vue 会话卡片重写为原型的上下垂直布局结构
+    status: completed
+  - id: sync-knowledge-view
+    content: 还原 KnowledgeView.vue 的顶部操作栏布局和视图切换器样式
+    status: completed
+  - id: sync-topbar
+    content: 核对 TopBar.vue 中切换按钮的最终呈现细节
+    status: completed
+isProject: false
+---
+
+# UI 样式深度还原计划
+
+根据您提供的对比图与 `design/ui_demo.html` 原型，发现当前的实现与设计稿在组件布局和细节上有较大偏离。接下来的工作将严格对齐原型，执行以下重构：
+
+## 1. 顶部搜索栏与过滤区域 (`SessionToolbar.vue`)
+
+- **布局重构**：将搜索栏和过滤操作从现有的平铺结构改为上下两行布局。
+  - 第一行：宽大的搜索框 + 次级“刷新”按钮。
+  - 第二行：左侧为“分段选择器（Segmented Control）”样式（全部会话 / 待分析 / 已分析），包含带数字徽标的“待分析”状态；右侧为记录总数与 Tooltip 提示收纳。
+- **视觉风格**：去除当前原生的 `n-button` 过滤组，采用原型中胶囊背景槽加悬浮滑块的无边框设计。
+
+## 2. 侧边栏目录树 (`Sidebar.vue`)
+
+- **节点自定义渲染**：使用 `n-tree` 的自定义渲染（`renderLabel`, `renderPrefix`, `renderSuffix`）精确控制每级节点的 DOM。
+- **层级样式对齐**：
+  - 一级（来源）：使用特定的品牌色图标（如蓝色 Cursor、橙色 Claude Code 等）配合加粗标题。
+  - 二级（主机）：增加层级缩进，图标换为 `lucide-server`。
+  - 三级（项目）：带 `lucide-corner-down-right` 拐角指引和不同状态的文件夹图标，鼠标悬停时节点增加圆角高亮。
+  - 数量徽标：放置在最右侧，使用单色等宽字体对齐（`font-mono text-[10px]`）。
+- **会话整理模式处理**：特别处理点击「会话整理」进入多选状态（`checkable=true`）时的交互样式，确保左侧的复选框能优雅融入自定义渲染的节点，且选择高亮时背景和样式保持整洁，与设计稿多选风格对齐。
+
+## 3. 会话卡片列表 (`SessionCard.vue`)
+
+- **回归垂直排版**：抛弃目前采用的横向左右分列设计，严格按照原型的上下两层布局重构。
+  - **上层视线区**：先展示状态 Tag（如：待分析 / 高价值）与来源角标，下方为主标题和摘要文字；最右侧为 Hover 显现的操作按钮。
+  - **下层元数据区**：用顶部细线分割（`border-t`），采用横向平铺展示所属项目文件夹（带浅灰底色块）、时间、对话数与大小数据。
+
+## 4. 知识库 Tab 页 (`KnowledgeView.vue`)
+
+- **操作栏还原**：顶部操作栏左侧为标题与记录数，右侧为并排的操作按钮组。
+- **功能按钮整合**：将“全选当页”与“清除选择”逻辑整合为一个按钮，并在选中时变为文字按钮外观。
+- **视图切换组件**：深度覆写 `n-radio-group` 的样式，使用和对话页同源的“大胶囊底槽”设计，配合白底阴影块实现列表/卡片的平滑切换效果。
+
+## 5. 顶栏细节兜底 (`TopBar.vue`)
+
+- 确保中间的“对话记录 / 知识库”切换器彻底还原 `bg-slate-100/80` 胶囊包裹的方案，消除由于历史残留导致的 UI 割裂。
+
diff --git a/apps/desktop/src/App.vue b/apps/desktop/src/App.vue
index f52b6b5..5d14ed8 100644
--- a/apps/desktop/src/App.vue
+++ b/apps/desktop/src/App.vue
@@ -61,4 +61,16 @@ body {
 .dark ::-webkit-scrollbar-thumb {
   background-color: rgba(75, 85, 99, 0.35);
 }
+
+/**
+ * 分段条内的原生 <button>：Tauri/WebKit 会套用系统按钮外观（灰底、凸起），
+ * 未选中项看起来像「实心灰块」，浅色/深色下都会破坏与 ui_demo 一致的扁平分段样式。
+ * 仅对带 .segment-pill-btn 的按钮去外观，避免影响 Naive UI 的 n-button。
+ */
+button.segment-pill-btn {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+}
 </style>
diff --git a/apps/desktop/src/components/AppLayout.vue b/apps/desktop/src/components/AppLayout.vue
index 5bef03f..2a0395f 100644
--- a/apps/desktop/src/components/AppLayout.vue
+++ b/apps/desktop/src/components/AppLayout.vue
@@ -9,7 +9,7 @@ import AnalysisQueuePanel from './AnalysisQueuePanel.vue'
     <TopBar />
     <div class="flex flex-1 min-h-0">
       <Sidebar />
-      <main class="flex-1 min-w-0 min-h-0 overflow-hidden bg-neutral-50/50 dark:bg-neutral-950">
+      <main class="flex-1 min-w-0 min-h-0 overflow-hidden bg-[#fafafa] dark:bg-neutral-950">
         <router-view />
       </main>
     </div>
diff --git a/apps/desktop/src/components/SessionCard.vue b/apps/desktop/src/components/SessionCard.vue
index ffb2524..153f6c5 100644
--- a/apps/desktop/src/components/SessionCard.vue
+++ b/apps/desktop/src/components/SessionCard.vue
@@ -35,7 +35,7 @@ const isLowValue = computed(() => valueKey.value === 'low' || valueKey.value ===
 
 /** 价值标签样式映射 */
 const valueBadgeClass: Record<string, string> = {
-  high:   'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-400 border-emerald-200 dark:border-emerald-800/60',
+  high:   'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-600 dark:text-emerald-400 border-emerald-100 dark:border-emerald-800/60',
   medium: 'bg-amber-50  dark:bg-amber-950/40  text-amber-700  dark:text-amber-400  border-amber-200  dark:border-amber-800/60',
   low:    'bg-slate-50  dark:bg-slate-900/60  text-slate-500  dark:text-slate-400  border-slate-200  dark:border-slate-700/60',
   none:   'bg-slate-50  dark:bg-slate-900/60  text-slate-400  dark:text-slate-500  border-slate-200  dark:border-slate-700/60',
@@ -45,7 +45,6 @@ const valueBadgeText: Record<string, string> = {
 }
 
 // ── 已分析判断 ─────────────────────────────────────────────────────────────
-// 有卡片（medium/high）或状态已标记为 analyzed（low/none 无卡片但也已完成分析）
 const isAnalyzed = computed(
   () => !!props.session.cardId || props.session.status === 'analyzed',
 )
@@ -59,15 +58,6 @@ const tagList = computed(() => {
   return raw.split(',').filter(Boolean).slice(0, 3)
 })
 
-// ── 大小格式化 ─────────────────────────────────────────────────────────────
-
-function formatSize(bytes: number): string {
-  if (!bytes || bytes <= 0) return '—'
-  if (bytes < 1024) return '<1 KB'
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
-}
-
 // ── 交互 ──────────────────────────────────────────────────────────────────
 
 const isSelectDisabled = computed(
@@ -90,7 +80,6 @@ function openSession() {
 function onAction(e: MouseEvent) {
   e.stopPropagation()
   if (isAnalyzed.value) {
-    // 已分析：有卡片则带 cardId 打开笔记，低价值无卡片则只看对话
     void router.push({
       name: 'session-detail',
       params: { sessionId: props.session.id },
@@ -102,8 +91,8 @@ function onAction(e: MouseEvent) {
 }
 
 const sourceIcon = computed(() => {
-  if (props.session.sourceId === 'claude-code') return 'i-lucide-bot'
-  if (props.session.sourceId === 'cursor') return 'i-lucide-terminal-square'
+  if (props.session.sourceId === 'claude-code') return 'i-lucide-terminal'
+  if (props.session.sourceId === 'cursor') return 'i-lucide-mouse-pointer-click'
   return 'i-lucide-message-square'
 })
 
@@ -111,37 +100,8 @@ const actionLoading = computed(
   () => props.analyzing || props.session.status === 'analyzing',
 )
 
-// ── 列表主标题：首条 user 预览优先（与计划 4.1 一致）──────────────────────
-
-/** Tooltip 内文过长时截断，避免 DOM 过大 */
-const TOOLTIP_MAX = 500
+// ── 列表主标题 ──────────────────────────────────────────────
 
-function clipForTooltip(s: string, max = TOOLTIP_MAX): string {
-  if (s.length <= max) return s
-  return `${s.slice(0, max)}…`
-}
-
-/**
- * 路径展示：过长时只显示最后若干段，全文放 Tooltip
- *   foo/bar/baz.json → …/bar/baz.json（段数少时保持原样）
- */
-function pathTail(path: string | null | undefined, segments = 2): string {
-  if (!path) return ''
-  const norm = path.replace(/\\/g, '/')
-  const parts = norm.split('/').filter(Boolean)
-  if (parts.length <= segments) return norm
-  return `…/${parts.slice(-segments).join('/')}`
-}
-
-const sessionPathDisplay = computed(
-  () => props.session.rawPath ?? props.session.projectPath ?? null,
-)
-
-/**
- * 列表主标题：
- * - 未分析：优先 cardTitle（SQL 中 COALESCE(card.title, analysis_title)），避免 CodeBuddy 首条 user 为 Workspace 元数据占满标题
- * - 已分析：仍以首条 user 预览为主（与「笔记」副标题搭配）
- */
 const listPrimaryTitle = computed(() => {
   const preview = props.session.firstUserPreview?.trim()
   const title = props.session.cardTitle?.trim()
@@ -155,16 +115,6 @@ const listPrimaryTitle = computed(() => {
   )
 })
 
-const listPrimaryTooltip = computed(() =>
-  clipForTooltip(
-    props.session.firstUserPreview?.trim()
-    || props.session.cardTitle?.trim()
-    || props.session.projectName
-    || props.session.projectPath
-    || props.session.sessionId,
-  ),
-)
-
 const timeTooltip = computed(() => {
   const u = props.session.updatedAt
   if (!u) return '会话时间：—'
@@ -172,275 +122,186 @@ const timeTooltip = computed(() => {
   return `会话时间：${readable}（updatedAt）`
 })
 
+/** 相对时间简写 */
+function relativeTime(iso: string | null | undefined): string {
+  if (!iso) return '—'
+  const d = new Date(iso)
+  const now = Date.now()
+  const diff = now - d.getTime()
+  const mins = Math.floor(diff / 60000)
+  if (mins < 60) return `${mins} 分钟前`
+  const hours = Math.floor(mins / 60)
+  if (hours < 24) return `${hours} 小时前`
+  const days = Math.floor(hours / 24)
+  if (days < 30) return `${days} 天前`
+  return iso.replace('T', ' ').slice(0, 10)
+}
+
+// ── 大小格式化 ─────────────────────────────────────────────────────────────
+
+function formatSize(bytes: number): string {
+  if (!bytes || bytes <= 0) return '—'
+  if (bytes < 1024) return '<1 KB'
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
+}
+
 /**
- * 会话卡片视觉分层（与 KnowledgeView 条目对齐）：
- * - 默认：半透底 + 固定轻阴影；浅/深用同一套「阴影表层次」逻辑（暗色同样保留 shadow，不靠纯扁平）
- * - hover：仅描边变化，不抬升阴影（与知识库一致）
- * - 批量选中：ring + 加粗边框 + 渐变底 + 更强阴影，避免仅靠淡绿底不够醒目
+ * 卡片样式
  */
-const cardSurfaceClass = computed(() => {
-  const baseDisabled = isSelectDisabled.value
-    ? 'cursor-default opacity-60'
-    : 'cursor-pointer'
-
-  // 批量选中：强对比（与列表区渐变底区分仍清晰）
+const cardClass = computed(() => {
   if (props.selectable && props.selected) {
-    return [
-      baseDisabled,
-      'border-2 border-brand-500 dark:border-brand-400',
-      'bg-gradient-to-br from-brand-50/95 to-emerald-50/90 dark:from-brand-950/55 dark:to-emerald-950/40',
-      'shadow-[0_4px_24px_-4px_rgba(16,185,129,0.42)] dark:shadow-[0_4px_28px_-6px_rgba(16,185,129,0.36)]',
-      'ring-2 ring-brand-500/80 dark:ring-brand-400/70',
-    ]
+    return 'ring-2 ring-emerald-500 border-transparent bg-emerald-50/20 dark:bg-emerald-950/20'
   }
-
-  // 默认卡片面：与 KnowledgeView 列表项同源 class
-  const knowledgeLike = [
-    'border border-white/70 dark:border-emerald-900/50',
-    'bg-white/85 dark:bg-neutral-900/75',
-    'shadow-[0_2px_14px_-2px_rgba(16,185,129,0.18)] dark:shadow-[0_2px_16px_-4px_rgba(0,0,0,0.45)]',
-    'backdrop-blur-sm',
-    'transition-[border-color] duration-150',
-    baseDisabled,
-  ]
-
-  if (isAnalyzed.value) {
-    return [
-      ...knowledgeLike,
-      'hover:border-emerald-300/55 dark:hover:border-emerald-700/45',
-    ]
+  if (isLowValue.value && isAnalyzed.value) {
+    return 'opacity-85 bg-slate-50/80 dark:bg-neutral-900/60 border-slate-200/80 dark:border-neutral-700/60 hover:opacity-100 hover:border-slate-300 dark:hover:border-neutral-600'
   }
-
-  // 未分析：虚线边框，仍保持同一套阴影逻辑
-  return [
-    ...knowledgeLike,
-    'border-emerald-200/65 dark:border-emerald-800/50 border-dashed',
-    'hover:border-emerald-400/75 dark:hover:border-emerald-600/55',
-  ]
+  return 'bg-white dark:bg-neutral-900 border-slate-200/80 dark:border-neutral-700/60 hover:border-emerald-300 dark:hover:border-emerald-700'
 })
 </script>
 
 <template>
   <div
-    class="group relative rounded-xl"
-    :class="cardSurfaceClass"
+    class="group relative rounded-2xl border transition-all duration-300 cursor-pointer overflow-hidden flex"
+    :class="[cardClass, isSelectDisabled ? 'cursor-default opacity-60' : '']"
     @click="openSession"
   >
-    <!-- 左侧高/中价值色条（置于内容之上，避免与圆角/选中 ring 打架） -->
+    <!-- 左侧高/中价值色条 -->
     <div
       v-if="barColor"
-      class="absolute left-0 top-2 bottom-2 w-[3px] rounded-r-full z-[1] pointer-events-none"
+      class="absolute left-0 top-3 bottom-3 w-[4px] rounded-r-full z-10 pointer-events-none"
       :style="{ backgroundColor: barColor }"
     />
 
-    <div class="flex items-center gap-3 px-4 py-3">
-
-      <!-- 批量模式 checkbox -->
-      <div v-if="selectable" class="shrink-0" @click.stop>
-        <n-checkbox
-          :checked="selected"
-          :disabled="isSelectDisabled"
-          @update:checked="!isSelectDisabled && emit('update:selected', session.id, $event)"
-        />
-      </div>
+    <div class="flex-1 p-5" :class="barColor ? 'pl-6' : ''">
+      <!-- 头部：标签 + 操作按钮 -->
+      <div class="flex items-start justify-between gap-4">
+        <div class="space-y-2.5 flex-1 min-w-0">
+          <!-- 状态标签行 -->
+          <div class="flex items-center gap-2 flex-wrap">
+            <!-- 批量模式 checkbox -->
+            <div v-if="selectable" class="shrink-0" @click.stop>
+              <n-checkbox
+                :checked="selected"
+                :disabled="isSelectDisabled"
+                @update:checked="!isSelectDisabled && emit('update:selected', session.id, $event)"
+              />
+            </div>
 
-      <!-- ════════════════════════════════════
-           左列：项目名+时间同行 / 路径与会话 id / 消息+大小
-           ════════════════════════════════════ -->
-      <div class="w-48 shrink-0 min-w-0">
-        <!-- 项目名与时间同一行；时间 Tooltip 为「会话时间」 -->
-        <div class="flex items-center justify-between gap-2 min-w-0 text-[11px]">
-          <span class="truncate text-neutral-600 dark:text-neutral-300 font-medium">
-            {{ session.projectName || session.projectPath || '未命名项目' }}
-          </span>
-          <n-tooltip trigger="hover" :delay="300">
-            <template #trigger>
-              <span class="shrink-0 font-mono tabular-nums text-neutral-400 cursor-default">
-                {{ session.updatedAt?.replace('T', ' ').slice(0, 16) ?? '—' }}
+            <template v-if="isAnalyzed">
+              <!-- 价值标签 -->
+              <n-tag
+                v-if="session.value && (valueKey === 'high' || valueKey === 'medium')"
+                size="small"
+                :bordered="false"
+                class="font-medium rounded"
+                :class="valueBadgeClass[valueKey]"
+              >
+                {{ valueBadgeText[valueKey] }}
+              </n-tag>
+              <!-- 类型标签 -->
+              <n-tag
+                v-if="session.cardType"
+                size="small"
+                type="info"
+                :bordered="false"
+                class="rounded"
+              >
+                {{ getCardTypeLabel(session.cardType) }}
+              </n-tag>
+              <!-- 低/无价值标签 -->
+              <span
+                v-if="isLowValue && session.value"
+                class="inline-flex items-center text-[10px] font-medium px-1.5 py-px rounded border italic"
+                :class="valueBadgeClass[valueKey] ?? valueBadgeClass.none"
+              >
+                {{ valueBadgeText[valueKey] ?? session.value }}
               </span>
             </template>
-            {{ timeTooltip }}
-          </n-tooltip>
-        </div>
-
-        <!-- 路径（省略末段 + 全文 Tooltip）与会话 ID -->
-        <div class="mt-1 space-y-0.5 text-[10px] text-neutral-400 min-w-0">
-          <n-tooltip
-            v-if="sessionPathDisplay"
-            trigger="hover"
-            placement="top-start"
-            :delay="200"
-          >
-            <template #trigger>
-              <div class="flex items-center gap-1 min-w-0">
-                <span class="i-lucide-folder-open w-3 h-3 shrink-0 opacity-70" />
-                <span class="truncate font-mono">{{ pathTail(sessionPathDisplay) }}</span>
-              </div>
-            </template>
-            {{ sessionPathDisplay }}
-          </n-tooltip>
-          <n-tooltip trigger="hover" :delay="200">
-            <template #trigger>
-              <div class="flex items-center gap-1 min-w-0 font-mono opacity-90">
-                <span class="i-lucide-fingerprint w-3 h-3 shrink-0" />
-                <span class="truncate">{{ session.sessionId }}</span>
-              </div>
-            </template>
-            会话 ID：{{ session.sessionId }}
-          </n-tooltip>
-        </div>
-
-        <div class="text-[11px] text-neutral-400 mt-1 flex items-center gap-2">
-          <span :class="sourceIcon" class="w-3 h-3 opacity-70 shrink-0" />
-          <span class="flex items-center gap-0.5">
-            <span class="i-lucide-message-circle w-3 h-3" />
-            {{ session.messageCount }} 条
-          </span>
-          <span class="flex items-center gap-0.5">
-            <span class="i-lucide-hard-drive w-3 h-3" />
-            {{ formatSize(session.rawSizeBytes) }}
-          </span>
-        </div>
-      </div>
 
-      <!-- ════════════════════════════════════
-           右内容区：已分析 / 未分析 两态
-           ════════════════════════════════════ -->
-      <div class="flex-1 min-w-0">
-        <!-- 主标题：首条 user 预览 + Tooltip；已分析时可附「笔记」副标题 -->
-        <div class="mb-1.5 min-w-0">
-          <n-tooltip
-            trigger="hover"
-            placement="top-start"
-            :delay="250"
-          >
-            <template #trigger>
-              <p
-                class="text-sm font-semibold leading-snug text-neutral-900 dark:text-neutral-100 line-clamp-2"
+            <template v-else>
+              <!-- 未分析：待分析 / 来源标签 -->
+              <n-tag
+                size="small"
+                :bordered="false"
+                :type="session.status === 'analyzing' ? 'info'
+                     : session.status === 'error' ? 'error'
+                     : 'warning'"
+                class="rounded"
               >
-                {{ listPrimaryTitle }}
-              </p>
+                {{ session.status === 'pending'   ? '待分析'
+                 : session.status === 'analyzing' ? '分析中'
+                 : session.status === 'error'     ? '失败'
+                 : session.status }}
+              </n-tag>
+              <n-tag size="small" :bordered="false" class="rounded">
+                {{ session.sourceId }}
+              </n-tag>
             </template>
-            <div class="max-w-md whitespace-pre-wrap break-words text-xs">
-              {{ listPrimaryTooltip }}
-            </div>
-          </n-tooltip>
-          <p
-            v-if="isAnalyzed && session.cardTitle"
-            class="text-[11px] text-neutral-500 dark:text-neutral-400 mt-0.5 line-clamp-1"
-          >
-            笔记：{{ session.cardTitle }}
-          </p>
-        </div>
-
-        <!-- ── 已分析：三行布局 ── -->
-        <template v-if="isAnalyzed">
+          </div>
 
-          <!-- 第一行：类型 Badge + 价值 Badge -->
-          <div class="flex items-center gap-1.5 flex-wrap">
-            <n-tag
-              v-if="session.cardType"
-              size="tiny"
-              :bordered="false"
-              type="info"
+          <!-- 标题 -->
+          <div>
+            <h3
+              class="text-base font-semibold leading-relaxed pr-4"
+              :class="isLowValue && isAnalyzed
+                ? 'text-slate-500 dark:text-slate-400 italic'
+                : 'text-slate-800 dark:text-slate-100'"
             >
-              {{ getCardTypeLabel(session.cardType) }}
-            </n-tag>
-            <!-- 价值标签（始终展示，颜色随价值变化） -->
-            <span
-              v-if="session.value"
-              class="inline-flex items-center text-[10px] font-medium px-1.5 py-px rounded border"
-              :class="valueBadgeClass[valueKey] ?? valueBadgeClass.none"
+              {{ listPrimaryTitle }}
+            </h3>
+            <!-- 摘要 -->
+            <p
+              v-if="isAnalyzed && session.cardSummary"
+              class="text-[13px] line-clamp-1 mt-1.5"
+              :class="isLowValue
+                ? 'text-slate-400 dark:text-slate-500 italic'
+                : 'text-slate-500 dark:text-slate-400'"
             >
-              {{ valueBadgeText[valueKey] ?? session.value }}
-            </span>
+              {{ session.cardSummary }}
+            </p>
+            <p
+              v-else-if="!isAnalyzed"
+              class="text-[13px] text-slate-500 dark:text-slate-400 line-clamp-1 mt-1.5"
+            >
+              {{ session.status === 'error'
+                ? (session.errorMessage || '分析失败，点击查看详情或重试。')
+                : '原始对话，点击查看内容或进行知识提炼。' }}
+            </p>
           </div>
 
-          <!-- 第二行：摘要文字 -->
-          <p
-            v-if="session.cardSummary"
-            class="text-xs mt-1 line-clamp-1 leading-relaxed"
-            :class="isLowValue
-              ? 'text-neutral-400 dark:text-neutral-500 italic'
-              : 'text-neutral-600 dark:text-neutral-400'"
-          >
-            {{ session.cardSummary }}
-          </p>
-          <p v-else class="text-xs text-neutral-400 dark:text-neutral-600 mt-1 italic">暂无摘要</p>
-
-          <!-- 第三行：标签 chips（最多 3 个） -->
-          <div v-if="tagList.length" class="flex items-center gap-1 mt-1 flex-wrap">
+          <!-- 技术标签 -->
+          <div v-if="tagList.length" class="flex gap-2 pt-1">
             <span
               v-for="tag in tagList"
               :key="tag"
-              class="inline-block text-[10px] px-1.5 py-px rounded-full
-                     bg-neutral-100 dark:bg-neutral-800
-                     text-neutral-500 dark:text-neutral-400
-                     border border-neutral-200 dark:border-neutral-700"
+              class="text-[10px] px-2 py-0.5 rounded-full bg-slate-100 dark:bg-neutral-800 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-neutral-700"
             >{{ tag }}</span>
           </div>
-        </template>
-
-        <!-- ── 未分析 ── -->
-        <template v-else>
-          <div class="flex items-center gap-1.5 flex-wrap">
-            <n-tag size="tiny" :bordered="false">{{ session.sourceId }}</n-tag>
-            <n-tag
-              size="tiny"
-              :bordered="false"
-              :type="session.status === 'analyzing' ? 'info'
-                   : session.status === 'error' ? 'error'
-                   : 'default'"
-            >
-              {{ session.status === 'pending'   ? '待分析'
-               : session.status === 'analyzing' ? '分析中'
-               : session.status === 'error'     ? '失败'
-               : session.status }}
-            </n-tag>
-          </div>
-          <p
-            v-if="session.status === 'error'"
-            class="text-xs text-red-600 dark:text-red-400 line-clamp-3 mt-1.5 leading-relaxed"
-          >
-            {{ session.errorMessage || '分析失败，点击查看详情或重试。' }}
-          </p>
-          <p
-            v-else
-            class="text-xs text-neutral-500 dark:text-neutral-400 line-clamp-1 mt-1.5 leading-relaxed"
-          >
-            原始对话，点击查看内容或进行知识提炼。
-          </p>
-        </template>
-      </div>
+        </div>
 
-      <!-- ── 操作按钮 ──
-           无价值（none）：不显示任何按钮
-           低价值（low）且已分析：查看对话
-           有卡片（medium/high）：查看笔记
-           未分析：分析
-      -->
-      <!-- 已分析且无价值（none）时不显示任何按钮；其他情况（待分析、低价值、中/高价值）均显示 -->
-      <div
-        v-if="!selectable && !(isAnalyzed && valueKey === 'none')"
-        class="shrink-0"
-        @click.stop
-      >
-        <n-button
-          :type="isAnalyzed ? 'default' : 'primary'"
-          size="small"
-          :loading="actionLoading"
-          :disabled="actionLoading"
-          @click="onAction"
+        <!-- 悬浮操作按钮 -->
+        <div
+          v-if="!selectable && !(isAnalyzed && valueKey === 'none')"
+          class="opacity-0 group-hover:opacity-100 transition-opacity duration-200 shrink-0"
+          @click.stop
         >
-          <span class="inline-flex items-center gap-1.5">
-            <template v-if="!actionLoading">
+          <n-button
+            secondary
+            size="small"
+            class="rounded-lg"
+            :loading="actionLoading"
+            :disabled="actionLoading"
+            @click="onAction"
+          >
+            <template #icon>
               <span
                 :class="session.cardId
                   ? 'i-lucide-book-open'
                   : isAnalyzed
                     ? 'i-lucide-messages-square'
                     : 'i-lucide-sparkles'"
-                class="w-3.5 h-3.5"
+                class="w-4 h-4"
               />
             </template>
             {{
@@ -449,8 +310,37 @@ const cardSurfaceClass = computed(() => {
               : isAnalyzed   ? '查看对话'
               : '分析'
             }}
-          </span>
-        </n-button>
+          </n-button>
+        </div>
+      </div>
+
+      <!-- 底部元数据行 -->
+      <div class="flex flex-wrap items-center gap-x-5 gap-y-2 text-[12px] text-slate-500 dark:text-slate-400 pt-3.5 mt-3.5 border-t border-slate-100 dark:border-neutral-800">
+        <span class="flex items-center gap-1.5 font-medium text-slate-700 dark:text-slate-300 bg-slate-100/50 dark:bg-neutral-800/50 px-2 py-1 rounded-md">
+          <span class="i-lucide-folder w-3.5 h-3.5 text-slate-400 dark:text-slate-500" />
+          {{ session.projectName || session.projectPath || '未命名项目' }}
+        </span>
+        <n-tooltip trigger="hover" :delay="300">
+          <template #trigger>
+            <span class="flex items-center gap-1.5 cursor-default">
+              <span class="i-lucide-clock w-3.5 h-3.5 text-slate-400 dark:text-slate-500" />
+              {{ relativeTime(session.updatedAt) }}
+            </span>
+          </template>
+          {{ timeTooltip }}
+        </n-tooltip>
+        <span class="flex items-center gap-1.5">
+          <span class="i-lucide-message-circle w-3.5 h-3.5 text-slate-400 dark:text-slate-500" />
+          {{ session.messageCount }} 条对话
+        </span>
+        <span v-if="session.rawSizeBytes" class="flex items-center gap-1.5">
+          <span class="i-lucide-hard-drive w-3.5 h-3.5 text-slate-400 dark:text-slate-500" />
+          {{ formatSize(session.rawSizeBytes) }}
+        </span>
+        <span class="flex items-center gap-1.5 text-slate-400 dark:text-slate-500 font-mono bg-slate-50 dark:bg-neutral-800 px-1.5 py-0.5 rounded border border-slate-100 dark:border-neutral-700">
+          <span :class="sourceIcon" class="w-3 h-3" />
+          {{ session.sourceId }}
+        </span>
       </div>
     </div>
   </div>
diff --git a/apps/desktop/src/components/SessionToolbar.vue b/apps/desktop/src/components/SessionToolbar.vue
index 8193b27..72ffea5 100644
--- a/apps/desktop/src/components/SessionToolbar.vue
+++ b/apps/desktop/src/components/SessionToolbar.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import { NInput, NButton } from 'naive-ui'
+import { NInput, NButton, NTooltip } from 'naive-ui'
 import { useSessionsStore } from '../stores/sessions'
 import { useSearchStore } from '../stores/search'
 import { useFiltersStore } from '../stores/filters'
 
+defineProps<{
+  /** 待分析角标（预留，与列表统计联动时可展示） */
+  pendingCount?: number
+}>()
+
 const sessions = useSessionsStore()
 const search = useSearchStore()
 const filters = useFiltersStore()
@@ -14,118 +19,118 @@ async function refresh() {
 }
 
 /**
- * 切换已分析/全部过滤。
+ * 切换状态过滤。
  * 点击已选中的按钮 → 恢复全部；点击未选中的按钮 → 激活该过滤
  */
-function toggleStatus(val: 'analyzed' | 'pending') {
+function setStatusFilter(val: '' | 'analyzed' | 'pending') {
   filters.statusFilter = filters.statusFilter === val ? '' : val
   sessions.page = 1
   void sessions.loadPage()
 }
+
+/** 待分析数量（从当前结果页取得近似值） */
 </script>
 
 <template>
-  <div class="flex flex-col gap-3 mb-4 shrink-0">
-    <!-- 搜索行：FTS 搜的是知识库卡片，非会话标题（v0.1.1 文案明确语义） -->
-    <div class="flex flex-col gap-1">
-      <div class="flex items-center gap-2">
-        <n-input
-          v-model:value="search.query"
-          placeholder="搜索知识笔记（标题 / 摘要 / 正文全文）"
-          clearable
-          size="medium"
-          class="flex-1"
-          @clear="refresh"
-        >
+  <div class="flex flex-col gap-4 mb-8 shrink-0">
+    <!-- 搜索行 -->
+    <div class="flex items-center gap-3">
+      <n-input
+        v-model:value="search.query"
+        placeholder="搜索知识笔记（标题 / 摘要 / 正文全文）..."
+        clearable
+        size="large"
+        class="flex-1 rounded-lg"
+        @clear="refresh"
+      >
         <template #prefix>
-          <span class="i-lucide-search w-4 h-4 opacity-40" />
+          <span class="i-lucide-search w-4 h-4 text-slate-400 mr-1" />
         </template>
         <template #suffix>
-          <span v-if="search.searching" class="i-lucide-loader-2 w-3.5 h-3.5 animate-spin opacity-40" />
+          <span v-if="search.searching" class="i-lucide-loader-2 w-3.5 h-3.5 animate-spin text-slate-400" />
         </template>
       </n-input>
 
-      <!-- 刷新 -->
-      <n-button size="medium" @click="refresh">
-        <span class="inline-flex items-center gap-1.5">
-          <span class="i-lucide-rotate-ccw w-3.5 h-3.5" />
-          刷新
-        </span>
-      </n-button>
-
-      <!-- 已分析过滤按钮 -->
-      <n-button
-        size="medium"
-        :type="filters.statusFilter === 'analyzed' ? 'primary' : 'default'"
-        @click="toggleStatus('analyzed')"
-      >
-        <span class="inline-flex items-center gap-1.5">
-          <span
-            :class="filters.statusFilter === 'analyzed'
-              ? 'i-lucide-check-circle w-3.5 h-3.5'
-              : 'i-lucide-circle w-3.5 h-3.5 opacity-50'"
-          />
-          已分析
-        </span>
-      </n-button>
-
-      <!-- 待分析过滤按钮 -->
-      <n-button
-        size="medium"
-        :type="filters.statusFilter === 'pending' ? 'warning' : 'default'"
-        @click="toggleStatus('pending')"
-      >
-        <span class="inline-flex items-center gap-1.5">
-          <span
-            :class="filters.statusFilter === 'pending'
-              ? 'i-lucide-clock w-3.5 h-3.5'
-              : 'i-lucide-clock w-3.5 h-3.5 opacity-50'"
-          />
-          待分析
-        </span>
+      <n-button size="large" secondary class="rounded-lg px-4" @click="refresh">
+        <template #icon>
+          <span class="i-lucide-rotate-ccw w-4 h-4 text-slate-500" />
+        </template>
+        <span class="text-slate-600 dark:text-slate-300">刷新</span>
       </n-button>
-      </div>
-      <p class="text-[11px] text-neutral-400 dark:text-neutral-500 leading-snug pl-0.5">
-        搜索对象为<strong class="text-neutral-500 dark:text-neutral-400">已入库的知识卡片</strong>（FTS），不包含未提炼的会话标题。
-      </p>
     </div>
 
-    <!-- 状态行 -->
-    <div class="flex items-center justify-between text-xs text-neutral-500 dark:text-neutral-400">
-      <div class="flex items-center gap-2">
-        <span class="flex items-center gap-1.5">
-          <span class="i-lucide-list w-3.5 h-3.5" />
-          共 <strong class="text-neutral-700 dark:text-neutral-200 mx-0.5">{{ sessions.total }}</strong> 条
-          <template v-if="filters.statusFilter === 'analyzed'">
-            <span class="text-emerald-500 font-medium">已分析</span>
-          </template>
-          <template v-else-if="filters.statusFilter === 'pending'">
-            <span class="text-amber-500 font-medium">待分析</span>
-          </template>
-          <template v-else>
-            会话
-          </template>
-        </span>
-
-        <!-- 当前过滤激活时显示清除链接 -->
+    <!-- 过滤 & 信息行 -->
+    <div class="flex items-center justify-between">
+      <!-- 分段选择器：与顶栏 Tab 同一套扁平语义，segment-pill-btn 避免系统按钮灰底 -->
+      <div class="bg-slate-100/80 dark:bg-neutral-900/55 p-1 rounded-lg inline-flex">
         <button
-          v-if="filters.statusFilter"
-          class="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200 flex items-center gap-0.5 transition-colors"
-          @click="filters.statusFilter = ''; void sessions.loadPage()"
+          type="button"
+          class="segment-pill-btn"
+          :class="[
+            'px-5 py-1.5 rounded-md text-sm font-medium transition-colors cursor-pointer border-0 outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/35',
+            !filters.statusFilter
+              ? 'bg-white dark:bg-neutral-800 text-slate-800 dark:text-slate-100 ring-1 ring-slate-200/90 dark:ring-white/10'
+              : 'bg-transparent text-slate-500 hover:text-slate-800 dark:text-neutral-500 dark:hover:text-neutral-200',
+          ]"
+          @click="setStatusFilter('')"
         >
-          <span class="i-lucide-x w-3 h-3" />
-          清除过滤
+          全部会话
+        </button>
+        <button
+          type="button"
+          class="segment-pill-btn"
+          :class="[
+            'px-5 py-1.5 rounded-md text-sm font-medium transition-colors cursor-pointer border-0 outline-none focus-visible:ring-2 focus-visible:ring-amber-500/35 flex items-center gap-1.5',
+            filters.statusFilter === 'pending'
+              ? 'bg-white dark:bg-neutral-800 text-amber-600 dark:text-amber-400 ring-1 ring-slate-200/90 dark:ring-white/10'
+              : 'bg-transparent text-slate-500 hover:text-slate-800 dark:text-neutral-500 dark:hover:text-neutral-200',
+          ]"
+          @click="setStatusFilter('pending')"
+        >
+          待分析
+          <!-- <span
+            :class="[
+              'py-0.5 px-1.5 rounded-full text-[10px] leading-none',
+              filters.statusFilter === 'pending'
+                ? 'bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-400'
+                : 'bg-slate-200 dark:bg-neutral-600 text-slate-500 dark:text-slate-300'
+            ]"
+          >{{ props.pendingCount ?? '' }}</span> -->
+        </button>
+        <button
+          type="button"
+          class="segment-pill-btn"
+          :class="[
+            'px-5 py-1.5 rounded-md text-sm font-medium transition-colors cursor-pointer border-0 outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/35',
+            filters.statusFilter === 'analyzed'
+              ? 'bg-white dark:bg-neutral-800 text-emerald-600 dark:text-emerald-400 ring-1 ring-slate-200/90 dark:ring-white/10'
+              : 'bg-transparent text-slate-500 hover:text-slate-800 dark:text-neutral-500 dark:hover:text-neutral-200',
+          ]"
+          @click="setStatusFilter('analyzed')"
+        >
+          已分析
         </button>
       </div>
 
-      <span v-if="sessions.error" class="text-red-500 flex items-center gap-1">
-        <span class="i-lucide-alert-circle w-3 h-3" />
-        {{ sessions.error }}
-      </span>
-      <span v-if="search.searchError" class="text-red-500 flex items-center gap-1">
-        <span class="i-lucide-alert-circle w-3 h-3" />
-        {{ search.searchError }}
-      </span>
+      <!-- 右侧统计 + 信息提示 -->
+      <div class="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
+        <span>共 <strong class="text-slate-800 dark:text-slate-200 font-semibold mx-0.5">{{ sessions.total }}</strong> 条记录</span>
+        <n-tooltip trigger="hover" placement="top-end">
+          <template #trigger>
+            <span class="i-lucide-info w-4 h-4 text-slate-400 cursor-help hover:text-emerald-500 transition-colors" />
+          </template>
+          搜索对象为已入库的知识卡片（FTS），不包含未提炼的会话标题。
+        </n-tooltip>
+
+        <span v-if="sessions.error" class="text-red-500 flex items-center gap-1 ml-2">
+          <span class="i-lucide-alert-circle w-3 h-3" />
+          {{ sessions.error }}
+        </span>
+        <span v-if="search.searchError" class="text-red-500 flex items-center gap-1 ml-2">
+          <span class="i-lucide-alert-circle w-3 h-3" />
+          {{ search.searchError }}
+        </span>
+      </div>
     </div>
   </div>
 </template>
diff --git a/apps/desktop/src/components/Sidebar.vue b/apps/desktop/src/components/Sidebar.vue
index 6c1598d..2c033b2 100644
--- a/apps/desktop/src/components/Sidebar.vue
+++ b/apps/desktop/src/components/Sidebar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, h, onMounted, ref, watch } from 'vue'
-import { NTree, NTag, NEmpty, NSpin, NTooltip, NButton, useDialog, useMessage } from 'naive-ui'
+import { NTree, NEmpty, NSpin, NTooltip, NButton, useDialog, useMessage } from 'naive-ui'
 import type { TreeOption } from 'naive-ui'
 import { useUiStore } from '../stores/ui'
 import { useFiltersStore } from '../stores/filters'
@@ -69,6 +69,14 @@ function hostLabel(host: string) {
   return HOST_LABELS[host] ?? host
 }
 
+/**
+ * 树选中 / 展开：必须在 treeData 之前声明。
+ * treeData 依赖 selectedKeys，项目节点 prefix（拐角线 + 文件夹）才能随选中切换颜色，与 design/ui_demo 一致。
+ */
+const selectedKeys = ref<string[]>([])
+/** 默认展开由下方 watch(treeData) 在首屏填充 */
+const expandedKeys = ref<string[]>([])
+
 // ────────────────── NTree 数据构建 ──────────────────
 
 /**
@@ -79,6 +87,8 @@ function hostLabel(host: string) {
  *   "src:<sourceId>" / "host:<sourceId>/<host>" / "proj:<sourceId>/<host>/<project>"
  */
 const treeData = computed<TreeOption[]>(() => {
+  /** 当前选中节点集合，用于项目行文件夹 icon 高亮（emerald / slate） */
+  const selectedSet = new Set(selectedKeys.value)
   const groups = sidebar.sessionGroups
   const sourceMap = new Map<string, Map<string, { project: string | null; count: number }[]>>()
 
@@ -100,11 +110,25 @@ const treeData = computed<TreeOption[]>(() => {
       for (const item of items) {
         hostTotal += item.count
         const projName = item.project ?? '(未关联项目)'
+        const projKey = `proj:${sourceId}/${host}/${projName}`
+        const projSelected = selectedSet.has(projKey)
         projChildren.push({
-          key: `proj:${sourceId}/${host}/${projName}`,
+          key: projKey,
           label: projName,
           isLeaf: true,
-          suffix: () => h('span', { class: 'sidebar-count' }, String(item.count)),
+          // 与 ui_demo 一致：层级拐角线 + 文件夹；选中时文件夹用 emerald
+          prefix: () =>
+            h('span', { class: 'flex items-center gap-0.5 flex-shrink-0' }, [
+              h('span', {
+                class: 'i-lucide-corner-down-right w-3 h-3 text-slate-300 dark:text-neutral-600',
+              }),
+              h('span', {
+                class: projSelected
+                  ? 'i-lucide-folder w-4 h-4 text-emerald-500 dark:text-emerald-400'
+                  : 'i-lucide-folder w-4 h-4 text-slate-400 dark:text-neutral-500',
+              }),
+            ]),
+          suffix: () => h('span', { class: 'ml-auto text-[10px] text-slate-400 font-mono' }, String(item.count)),
         })
       }
       sourceTotal += hostTotal
@@ -113,7 +137,7 @@ const treeData = computed<TreeOption[]>(() => {
         label: hostLabel(host),
         children: projChildren,
         prefix: () => h('span', { class: 'i-lucide-server w-3.5 h-3.5 opacity-50' }),
-        suffix: () => h('span', { class: 'sidebar-count' }, String(hostTotal)),
+        suffix: () => h('span', { class: 'ml-auto text-[10px] text-slate-400 font-mono' }, String(hostTotal)),
       })
     }
 
@@ -122,7 +146,7 @@ const treeData = computed<TreeOption[]>(() => {
       label: getSourceMeta(sourceId).label,
       children: hostChildren,
       prefix: () => renderSourceIcon(sourceId),
-      suffix: () => h('span', { class: 'sidebar-count font-medium' }, String(sourceTotal)),
+      suffix: () => h('span', { class: 'ml-auto text-[10px] text-slate-400 font-mono' }, String(sourceTotal)),
     })
   }
   return result
@@ -132,33 +156,32 @@ const totalSessions = computed(() =>
   sidebar.sessionGroups.reduce((sum, g) => sum + g.count, 0),
 )
 
-/** 自定义树节点 label 渲染：超长截断 + tooltip */
+/** 自定义树节点 label 渲染：超长截断 + tooltip；项目行未选中/选中字重与 demo 对齐 */
 function renderLabel({ option }: { option: TreeOption }) {
   const label = String(option.label ?? '')
+  const key = String(option.key ?? '')
+  const isProj = key.startsWith('proj:')
+  const projSelected = isProj && selectedKeys.value.includes(key)
+  const labelClass =
+    'sidebar-label' +
+    (isProj
+      ? projSelected
+        ? ' font-medium text-slate-800 dark:text-slate-100'
+        : ' text-slate-600 dark:text-slate-300'
+      : '')
   return h(NTooltip, {
     trigger: 'hover',
     delay: 500,
     placement: 'right',
   }, {
     trigger: () => h('span', {
-      class: 'sidebar-label',
+      class: labelClass,
       style: 'display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;',
     }, label),
     default: () => label,
   })
 }
 
-// ────────────────── 树节点选中 ──────────────────
-
-/**
- * 用 ref 维护选中 key（而非 computed），避免 NTree 内部状态与外部冲突。
- * 当 filter 变更时手动同步。
- */
-const selectedKeys = ref<string[]>([])
-
-/** 默认展开所有数据源节点 */
-const expandedKeys = ref<string[]>([])
-
 watch(treeData, (data) => {
   if (expandedKeys.value.length === 0 && data.length > 0) {
     expandedKeys.value = data.map((n) => n.key as string)
@@ -378,55 +401,58 @@ watch(() => ui.activeTab, (tab) => {
 </script>
 
 <template>
-  <aside class="shrink-0 flex flex-col w-56 bg-neutral-50 dark:bg-neutral-950 border-r border-neutral-200 dark:border-neutral-800 select-none">
+  <aside class="shrink-0 flex flex-col w-[260px] bg-white dark:bg-neutral-950 border-r border-slate-200 dark:border-neutral-800 select-none">
     <div class="flex-1 overflow-y-auto">
 
       <!-- ============== 对话记录模式 ============== -->
       <template v-if="ui.activeTab === 'sessions'">
-        <!-- 全部对话按钮 -->
-        <div
-          class="flex items-center gap-2 mx-2 mt-2 mb-1 px-2 h-8 rounded-md transition-colors cursor-pointer"
-          :class="isAllMode
-            ? 'bg-brand-50 dark:bg-brand-950/30 text-brand-700 dark:text-brand-300'
-            : 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-900'"
-          @click="selectAll"
-        >
-          <span class="i-lucide-messages-square w-4 h-4 shrink-0" />
-          <span class="text-sm font-medium">全部对话</span>
-          <span class="ml-auto text-xs tabular-nums opacity-60">{{ totalSessions }}</span>
-        </div>
+        <!-- 顶部操作区 -->
+        <div class="p-3 pb-2 space-y-2 border-b border-slate-100 dark:border-neutral-800">
+          <!-- 全部对话按钮 -->
+          <div
+            class="flex items-center gap-2 px-2.5 py-1.5 rounded-md transition-colors cursor-pointer text-sm font-medium"
+            :class="isAllMode
+              ? 'bg-emerald-50 dark:bg-emerald-950/30 text-emerald-700 dark:text-emerald-300'
+              : 'text-slate-700 dark:text-neutral-300 hover:bg-slate-100 dark:hover:bg-neutral-900'"
+            @click="selectAll"
+          >
+            <span class="i-lucide-messages-square w-4 h-4 shrink-0" />
+            <span>全部对话</span>
+            <span class="ml-auto text-xs opacity-80 tabular-nums">{{ totalSessions }}</span>
+          </div>
 
-        <div class="mx-3 my-1 border-t border-neutral-200/70 dark:border-neutral-800" />
+          <!-- 会话整理按钮 -->
+          <n-tooltip
+            v-if="!sidebar.groupsLoading && treeData.length"
+            placement="bottom"
+            trigger="hover"
+          >
+            <template #trigger>
+              <n-button
+                size="small"
+                block
+                secondary
+                :type="sessionOrganizeMode ? 'primary' : 'default'"
+                @click="toggleSessionOrganizeMode"
+              >
+                <template #icon>
+                  <span class="i-lucide-list-checks w-4 h-4" />
+                </template>
+                {{ sessionOrganizeMode ? '退出整理' : '会话整理' }}
+              </n-button>
+            </template>
+            点「会话整理」后勾选目录中的分组，即可批量移除（仅删除应用内记录）。
+          </n-tooltip>
+        </div>
 
-        <!-- 会话整理：多选分组后批量删除（仅应用内数据） -->
+        <!-- 整理模式提示与移除按钮 -->
         <div
-          v-if="!sidebar.groupsLoading && treeData.length"
-          class="px-2 pb-2 space-y-1.5"
+          v-if="sessionOrganizeMode && !sidebar.groupsLoading && treeData.length"
+          class="px-3 py-2 space-y-1.5"
         >
-          <n-button
-            size="small"
-            block
-            secondary
-            :type="sessionOrganizeMode ? 'primary' : 'default'"
-            @click="toggleSessionOrganizeMode"
-          >
-            <template #icon>
-              <span class="i-lucide-list-checks w-4 h-4" />
-            </template>
-            {{ sessionOrganizeMode ? '退出整理' : '会话整理' }}
-          </n-button>
-          <p
-            v-if="sessionOrganizeMode"
-            class="text-[11px] text-neutral-500 dark:text-neutral-400 leading-snug px-0.5"
-          >
+          <p class="text-[11px] text-slate-500 dark:text-neutral-400 leading-snug px-0.5">
             勾选目录中的多个分组，再点「移除已选分组会话」。与顶部列表状态筛选组合时，每组都会带上当前状态条件。
           </p>
-          <p
-            v-else-if="isAllMode"
-            class="text-[11px] text-neutral-500 dark:text-neutral-400 leading-snug px-0.5"
-          >
-            点「会话整理」后勾选目录中的分组，即可批量移除（仅删除应用内记录）。
-          </p>
           <n-button
             v-if="showRemoveSessionsButton"
             secondary
@@ -444,6 +470,13 @@ watch(() => ui.activeTab, (tab) => {
           </n-button>
         </div>
 
+        <!-- 来源项目标题 -->
+        <div class="px-4 pt-3 pb-2">
+          <div class="text-[11px] font-semibold text-slate-400 dark:text-neutral-500 uppercase tracking-widest mb-2 flex items-center gap-1.5">
+            <span class="i-lucide-folders w-3.5 h-3.5" /> 来源项目
+          </div>
+        </div>
+
         <!-- 加载中 -->
         <div v-if="sidebar.groupsLoading" class="flex items-center justify-center py-8">
           <n-spin size="small" />
@@ -476,107 +509,103 @@ watch(() => ui.activeTab, (tab) => {
 
       <!-- ============== 知识库模式 ============== -->
       <template v-else>
-        <!-- 类型筛选 -->
-        <div class="px-3 pt-3.5 pb-2">
-          <div class="flex items-center gap-1.5 text-neutral-400 dark:text-neutral-500 mb-2.5">
-            <span class="i-lucide-layout-grid w-3.5 h-3.5" />
-            <span class="text-[11px] font-semibold uppercase tracking-widest">类型</span>
+        <div class="flex-1 overflow-y-auto p-4 space-y-6">
+          <!-- 类型筛选 -->
+          <div>
+            <div class="text-[11px] font-semibold text-slate-400 dark:text-neutral-500 uppercase tracking-widest mb-3 flex items-center gap-1.5">
+              <span class="i-lucide-layout-grid w-3.5 h-3.5" />
+              类型
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <span
+                :class="[
+                  'px-2.5 py-1 rounded-full text-xs font-medium cursor-pointer transition-colors',
+                  !filters.cardType
+                    ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800/60'
+                    : 'text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-neutral-700 hover:bg-slate-50 dark:hover:bg-neutral-800'
+                ]"
+                @click="filters.cardType = ''"
+              >
+                全部 <span class="opacity-60 ml-0.5 text-[10px]">{{ totalCards }}</span>
+              </span>
+              <span
+                v-for="t in sidebar.cardTypes"
+                :key="t.name"
+                :class="[
+                  'px-2.5 py-1 rounded-full text-xs cursor-pointer transition-colors',
+                  filters.cardType === t.name
+                    ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800/60 font-medium'
+                    : 'text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-neutral-700 hover:bg-slate-50 dark:hover:bg-neutral-800'
+                ]"
+                @click="selectCardType(t.name)"
+              >
+                {{ getCardTypeLabel(t.name) }} <span class="opacity-60 ml-0.5 text-[10px]">{{ t.count }}</span>
+              </span>
+            </div>
           </div>
-          <div class="flex flex-wrap gap-1.5">
-            <n-tag
-              :bordered="!!filters.cardType"
-              :type="!filters.cardType ? 'primary' : 'default'"
-              size="small"
-              round
-              :class="{ 'cursor-pointer': true }"
-              @click="filters.cardType = ''"
-            >
-              全部 {{ totalCards }}
-            </n-tag>
-            <n-tag
-              v-for="t in sidebar.cardTypes"
-              :key="t.name"
-              :bordered="filters.cardType !== t.name"
-              :type="filters.cardType === t.name ? 'primary' : 'default'"
-              size="small"
-              round
-              class="cursor-pointer"
-              @click="selectCardType(t.name)"
-            >
-              {{ getCardTypeLabel(t.name) }} {{ t.count }}
-            </n-tag>
-          </div>
-        </div>
 
-        <div class="mx-3 my-1.5 border-t border-neutral-200/70 dark:border-neutral-800" />
-
-        <!-- 标签筛选 -->
-        <div class="px-3 py-2">
-          <div class="flex items-center gap-1.5 text-neutral-400 dark:text-neutral-500 mb-2.5">
-            <span class="i-lucide-tags w-3.5 h-3.5" />
-            <span class="text-[11px] font-semibold uppercase tracking-widest">标签</span>
-          </div>
-          <div v-if="sidebar.tagsLoading" class="flex items-center justify-center py-4">
-            <n-spin size="small" />
-          </div>
-          <div
-            v-else-if="sidebar.tags.length"
-            class="flex flex-wrap gap-1.5 max-h-64 overflow-y-auto pr-0.5"
-          >
-            <n-tag
-              v-for="tag in sidebar.tags"
-              :key="tag.name"
-              :bordered="!filters.selectedTags.includes(tag.name)"
-              :type="filters.selectedTags.includes(tag.name) ? 'primary' : 'default'"
-              size="small"
-              round
-              class="cursor-pointer"
-              @click="toggleTag(tag.name)"
+          <div class="h-px bg-slate-100 dark:bg-neutral-800" />
+
+          <!-- 标签筛选 -->
+          <div>
+            <div class="text-[11px] font-semibold text-slate-400 dark:text-neutral-500 uppercase tracking-widest mb-3 flex items-center gap-1.5">
+              <span class="i-lucide-tags w-3.5 h-3.5" />
+              标签
+            </div>
+            <div v-if="sidebar.tagsLoading" class="flex items-center justify-center py-4">
+              <n-spin size="small" />
+            </div>
+            <div
+              v-else-if="sidebar.tags.length"
+              class="flex flex-wrap gap-1.5 max-h-64 overflow-y-auto pr-0.5"
             >
-              {{ tag.name }}
-              <template #avatar>
-                <span class="text-[10px] opacity-60 ml-0.5">{{ tag.count }}</span>
-              </template>
-            </n-tag>
+              <span
+                v-for="tag in sidebar.tags"
+                :key="tag.name"
+                :class="[
+                  'px-2.5 py-1 rounded-full text-xs cursor-pointer transition-colors',
+                  filters.selectedTags.includes(tag.name)
+                    ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800/60 font-medium'
+                    : 'text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-neutral-700 hover:bg-slate-50 dark:hover:bg-neutral-800'
+                ]"
+                @click="toggleTag(tag.name)"
+              >
+                {{ tag.name }} <span class="opacity-50 ml-0.5 text-[10px]">{{ tag.count }}</span>
+              </span>
+            </div>
+            <n-empty v-else size="small" description="暂无标签" class="py-2" />
           </div>
-          <n-empty v-else size="small" description="暂无标签" class="py-2" />
-        </div>
-
-        <div class="mx-3 my-1.5 border-t border-neutral-200/70 dark:border-neutral-800" />
 
-        <!-- 技术栈：由 cards.tech_stack 列聚合；单卡详情仍在笔记标题下 -->
-        <div class="px-3 py-2">
-          <div class="flex items-center gap-1.5 text-neutral-400 dark:text-neutral-500 mb-2.5">
-            <span class="i-lucide-layers w-3.5 h-3.5" />
-            <span class="text-[11px] font-semibold uppercase tracking-widest">技术栈</span>
-          </div>
-          <div v-if="sidebar.tagsLoading" class="flex items-center justify-center py-3">
-            <n-spin size="small" />
-          </div>
-          <div
-            v-else-if="sidebar.techStacks.length"
-            class="flex flex-wrap gap-1.5 max-h-52 overflow-y-auto pr-0.5"
-          >
-            <n-tag
-              v-for="row in sidebar.techStacks"
-              :key="row.name"
-              type="info"
-              size="small"
-              round
-              :bordered="false"
+          <div class="h-px bg-slate-100 dark:bg-neutral-800" />
+
+          <!-- 技术栈 -->
+          <div>
+            <div class="text-[11px] font-semibold text-slate-400 dark:text-neutral-500 uppercase tracking-widest mb-3 flex items-center gap-1.5">
+              <span class="i-lucide-layers w-3.5 h-3.5" />
+              技术栈
+            </div>
+            <div v-if="sidebar.tagsLoading" class="flex items-center justify-center py-3">
+              <n-spin size="small" />
+            </div>
+            <div
+              v-else-if="sidebar.techStacks.length"
+              class="flex flex-wrap gap-1.5 max-h-52 overflow-y-auto pr-0.5"
             >
-              {{ row.name }}
-              <template #avatar>
-                <span class="text-[10px] opacity-60 ml-0.5">{{ row.count }}</span>
-              </template>
-            </n-tag>
+              <span
+                v-for="row in sidebar.techStacks"
+                :key="row.name"
+                class="px-2.5 py-1 rounded-full text-xs font-medium text-blue-700 dark:text-blue-400 bg-blue-50 dark:bg-blue-950/40 cursor-pointer"
+              >
+                {{ row.name }} <span class="opacity-60 ml-0.5 text-[10px]">{{ row.count }}</span>
+              </span>
+            </div>
+            <p v-else class="text-[11px] text-slate-400 dark:text-neutral-500 py-2 leading-relaxed">
+              暂无。需会话经提炼写入 tech_stack；排查终端
+              <code class="text-[10px] opacity-90">normalize: tech_stack</code>
+              与
+              <code class="text-[10px] opacity-90">创建卡片: … tech_stack列</code>
+            </p>
           </div>
-          <p v-else class="text-[11px] text-neutral-400 dark:text-neutral-500 py-2 leading-relaxed">
-            暂无。需会话经提炼写入 tech_stack；排查终端
-            <code class="text-[10px] opacity-90">normalize: tech_stack</code>
-            与
-            <code class="text-[10px] opacity-90">创建卡片: … tech_stack列</code>
-          </p>
         </div>
       </template>
 
@@ -604,12 +633,6 @@ watch(() => ui.activeTab, (tab) => {
 .sidebar-tree :deep(.n-tree-node-content) {
   overflow: hidden;
 }
-.sidebar-count {
-  font-size: 11px;
-  font-variant-numeric: tabular-nums;
-  margin-right: 4px;
-  opacity: 0.5;
-}
 /* 品牌图标：圆角使外观更精致 */
 .brand-icon {
   width: 16px;
diff --git a/apps/desktop/src/components/TopBar.vue b/apps/desktop/src/components/TopBar.vue
index 6173e7b..c536f28 100644
--- a/apps/desktop/src/components/TopBar.vue
+++ b/apps/desktop/src/components/TopBar.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import {
-  NTabs,
-  NTabPane,
   NTooltip,
   NButton,
-  NDivider,
   NDropdown,
   useMessage,
   useDialog,
@@ -64,8 +61,8 @@ function onExportDropdownSelect(key: string | number) {
   })()
 }
 
-function onTabChange(tab: string) {
-  ui.activeTab = tab as 'sessions' | 'library'
+function onTabChange(tab: 'sessions' | 'library') {
+  ui.activeTab = tab
   if (tab === 'sessions') {
     void router.push({ name: 'sessions' })
   } else {
@@ -89,40 +86,65 @@ async function onSync() {
 </script>
 
 <template>
-  <header class="h-13 flex items-center justify-between px-4 border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950 shrink-0 z-50">
-    <!-- 左侧：Logo + Tab 导航 -->
-    <div class="flex items-center gap-4">
-      <div class="flex items-center gap-2">
-        <div class="w-6 h-6 rounded-md bg-brand-500/15 flex items-center justify-center">
-          <span class="i-lucide-compass w-3.5 h-3.5 text-brand-600 dark:text-brand-400" />
+  <header class="h-[60px] flex items-center justify-between px-4 border-b border-slate-200 dark:border-neutral-800 bg-white dark:bg-neutral-950 shrink-0 z-50">
+    <!-- 左侧：Logo + 分割线 + Tab 导航 -->
+    <div class="flex items-center gap-6">
+      <!-- Logo 区域 -->
+      <div class="flex items-center gap-3">
+        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-400 to-teal-600 flex items-center justify-center text-white">
+          <span class="i-lucide-footprints w-5 h-5" />
+        </div>
+        <div class="flex flex-col">
+          <h1 class="font-bold text-[15px] leading-tight tracking-wide text-slate-800 dark:text-slate-100 flex items-center gap-1.5">
+            寻迹
+            <span class="px-1 py-0.5 rounded text-[9px] bg-emerald-100 dark:bg-emerald-900/60 text-emerald-700 dark:text-emerald-400 font-bold tracking-wider">BETA</span>
+          </h1>
+          <span class="text-[10px] text-slate-500 dark:text-slate-400 font-medium leading-tight tracking-wide">AI 编程知识沉淀</span>
         </div>
-        <span class="font-semibold text-sm text-neutral-900 dark:text-neutral-100 tracking-tight">寻迹</span>
       </div>
 
-      <n-tabs type="segment" :value="ui.activeTab" size="small" :pane-style="{ display: 'none' }" @update:value="onTabChange">
-        <n-tab-pane name="sessions">
-          <template #tab>
-            <span class="inline-flex items-center gap-1.5">
-              <span class="i-lucide-messages-square w-3.5 h-3.5" />
-              对话记录
-            </span>
-          </template>
-        </n-tab-pane>
-        <n-tab-pane name="library">
-          <template #tab>
-            <span class="inline-flex items-center gap-1.5">
-              <span class="i-lucide-library w-3.5 h-3.5" />
-              知识库
-            </span>
-          </template>
-        </n-tab-pane>
-      </n-tabs>
+      <!-- 竖线分割 -->
+      <div class="w-px h-5 bg-slate-200 dark:bg-neutral-700 mx-1" />
+
+      <!-- Tab：design/ui_demo 扁平分段；segment-pill-btn 去掉 WebView 默认灰底 -->
+      <div class="flex items-center bg-slate-100/80 dark:bg-neutral-900/55 p-1 rounded-lg">
+        <button
+          type="button"
+          class="segment-pill-btn"
+          :class="[
+            'flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium transition-colors cursor-pointer border-0 outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/35',
+            ui.activeTab === 'sessions'
+              ? 'bg-white dark:bg-neutral-800 text-emerald-600 dark:text-emerald-400 ring-1 ring-slate-200/90 dark:ring-white/10'
+              : 'bg-transparent text-slate-500 hover:text-slate-800 dark:text-neutral-500 dark:hover:text-neutral-200',
+          ]"
+          @click="onTabChange('sessions')"
+        >
+          <span class="i-lucide-messages-square w-4 h-4" />
+          对话记录
+        </button>
+        <button
+          type="button"
+          class="segment-pill-btn"
+          :class="[
+            'flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium transition-colors cursor-pointer border-0 outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/35',
+            ui.activeTab === 'library'
+              ? 'bg-white dark:bg-neutral-800 text-emerald-600 dark:text-emerald-400 ring-1 ring-slate-200/90 dark:ring-white/10'
+              : 'bg-transparent text-slate-500 hover:text-slate-800 dark:text-neutral-500 dark:hover:text-neutral-200',
+          ]"
+          @click="onTabChange('library')"
+        >
+          <span class="i-lucide-library w-4 h-4" />
+          知识库
+        </button>
+      </div>
     </div>
 
     <!-- 右侧：同步 + 工具按钮 -->
-    <div class="flex items-center gap-1">
+    <div class="flex items-center gap-2">
       <n-button
         size="small"
+        secondary
+        class="rounded-md"
         :loading="sessions.syncing"
         :disabled="sessions.syncing"
         @click="onSync"
@@ -133,7 +155,7 @@ async function onSync() {
         </span>
       </n-button>
 
-      <n-divider vertical class="!mx-1.5" />
+      <div class="w-px h-4 bg-slate-200 dark:bg-neutral-700 mx-1" />
 
       <n-dropdown
         trigger="click"
@@ -143,7 +165,7 @@ async function onSync() {
         <n-tooltip trigger="hover" :delay="400">
           <template #trigger>
             <n-button quaternary circle size="small" aria-label="导出">
-              <span class="i-lucide-download w-4 h-4" />
+              <span class="i-lucide-download w-4 h-4 text-slate-500 dark:text-slate-400" />
             </n-button>
           </template>
           导出
@@ -153,7 +175,7 @@ async function onSync() {
       <n-tooltip trigger="hover" :delay="400">
         <template #trigger>
           <n-button quaternary circle size="small" @click="showSettings = true">
-            <span class="i-lucide-settings w-4 h-4" />
+            <span class="i-lucide-settings w-4 h-4 text-slate-500 dark:text-slate-400" />
           </n-button>
         </template>
         设置
@@ -162,7 +184,7 @@ async function onSync() {
       <n-tooltip trigger="hover" :delay="400">
         <template #trigger>
           <n-button quaternary circle size="small" @click="ui.toggleTheme()">
-            <span :class="ui.darkMode ? 'i-lucide-sun' : 'i-lucide-moon'" class="w-4 h-4" />
+            <span :class="ui.darkMode ? 'i-lucide-sun' : 'i-lucide-moon'" class="w-4 h-4 text-slate-500 dark:text-slate-400" />
           </n-button>
         </template>
         {{ ui.darkMode ? '浅色模式' : '深色模式' }}
diff --git a/apps/desktop/src/views/KnowledgeView.vue b/apps/desktop/src/views/KnowledgeView.vue
index 373dc90..47ee391 100644
--- a/apps/desktop/src/views/KnowledgeView.vue
+++ b/apps/desktop/src/views/KnowledgeView.vue
@@ -10,8 +10,6 @@ import {
   NSpin,
   NEmpty,
   NTag,
-  NRadioGroup,
-  NRadioButton,
   NCheckbox,
   NButton,
   useMessage,
@@ -40,7 +38,7 @@ const loading = ref(false)
 const selectedIds = ref(new Set<string>())
 const exportBusy = ref(false)
 
-const viewMode = ref<ViewMode>('list')
+const viewMode = ref<ViewMode>('card')
 
 const selectedCount = computed(() => selectedIds.value.size)
 
@@ -164,32 +162,29 @@ function onExportAll() {
 </script>
 
 <template>
-  <!--
-    布局：整列 flex + min-h-0，保证主内容区占满剩余高度且内部滚动；
-    分页 shrink-0 固定在可视区域底部（相对 main 视口）。
-  -->
   <div class="flex flex-col h-full min-h-0 max-w-5xl mx-auto w-full px-5 pt-5">
-    <!-- 顶栏：标题 + 视图切换 -->
-    <header class="shrink-0 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between mb-3">
+    <!-- 顶栏：标题 + 工具栏 -->
+    <header class="shrink-0 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4">
       <div>
-        <h1 class="text-base font-semibold text-neutral-900 dark:text-neutral-100 tracking-tight">
+        <h1 class="text-base font-semibold text-slate-800 dark:text-slate-100 tracking-tight">
           知识库
         </h1>
-        <p class="text-[11px] text-emerald-700/70 dark:text-emerald-400/80 mt-0.5">
-          共 {{ total }} 条 · 列表 / 卡片切换
+        <p class="text-[11px] text-slate-500 dark:text-slate-400 mt-0.5">
+          共 {{ total }} 条记录 · 当前{{ viewMode === 'card' ? '卡片' : '列表' }}视图
         </p>
       </div>
       <div class="flex flex-wrap items-center gap-2 justify-end">
         <div class="flex flex-wrap gap-1.5 items-center">
-          <span v-if="selectedCount" class="text-[11px] text-neutral-500">已选 {{ selectedCount }} 条</span>
-          <n-button size="tiny" secondary :disabled="!items.length" @click="selectAllOnPage">
+          <span v-if="selectedCount" class="text-[11px] text-slate-500 dark:text-slate-400">已选 {{ selectedCount }} 条</span>
+          <n-button size="small" secondary :disabled="!items.length" @click="selectAllOnPage">
             全选当页
           </n-button>
-          <n-button size="tiny" quaternary :disabled="!selectedCount" @click="clearSelection">
+          <n-button size="small" secondary :disabled="!selectedCount" @click="clearSelection">
             清除选择
           </n-button>
           <n-button
             size="small"
+            secondary
             :loading="exportBusy"
             :disabled="exportBusy || !selectedCount"
             @click="onExportSelected"
@@ -212,156 +207,206 @@ function onExportAll() {
             </span>
           </n-button>
         </div>
-        <n-radio-group v-model:value="viewMode" size="small" class="shrink-0">
-          <n-radio-button value="list">
-            <span class="inline-flex items-center gap-1.5">
-              <span class="i-lucide-list w-3.5 h-3.5" />
-              列表
-            </span>
-          </n-radio-button>
-          <n-radio-button value="card">
-            <span class="inline-flex items-center gap-1.5">
-              <span class="i-lucide-layout-grid w-3.5 h-3.5" />
-              卡片
-            </span>
-          </n-radio-button>
-        </n-radio-group>
+        <!-- 视图切换：与顶栏/会话分段条一致，segment-pill-btn 避免 WebView 默认灰底 -->
+        <div class="bg-slate-100/80 dark:bg-neutral-900/55 p-1 rounded-lg inline-flex shrink-0">
+          <button
+            type="button"
+            class="segment-pill-btn"
+            :class="[
+              'flex items-center gap-1.5 px-3 py-1 rounded-md text-sm font-medium transition-colors cursor-pointer border-0 outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/35',
+              viewMode === 'list'
+                ? 'bg-white dark:bg-neutral-800 text-slate-800 dark:text-slate-100 ring-1 ring-slate-200/90 dark:ring-white/10'
+                : 'bg-transparent text-slate-500 hover:text-slate-800 dark:text-neutral-500 dark:hover:text-neutral-200',
+            ]"
+            @click="viewMode = 'list'"
+          >
+            <span class="i-lucide-list w-3.5 h-3.5" />
+            列表
+          </button>
+          <button
+            type="button"
+            class="segment-pill-btn"
+            :class="[
+              'flex items-center gap-1.5 px-3 py-1 rounded-md text-sm font-medium transition-colors cursor-pointer border-0 outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/35',
+              viewMode === 'card'
+                ? 'bg-white dark:bg-neutral-800 text-slate-800 dark:text-slate-100 ring-1 ring-slate-200/90 dark:ring-white/10'
+                : 'bg-transparent text-slate-500 hover:text-slate-800 dark:text-neutral-500 dark:hover:text-neutral-200',
+            ]"
+            @click="viewMode = 'card'"
+          >
+            <span class="i-lucide-layout-grid w-3.5 h-3.5" />
+            卡片
+          </button>
+        </div>
       </div>
     </header>
 
-    <!-- 内容区：清新底色 + 内部条目统一悬浮阴影（无 hover 抬升） -->
-    <div
-      class="flex-1 min-h-0 flex flex-col overflow-hidden rounded-xl border border-emerald-200/40 dark:border-emerald-900/35 bg-gradient-to-br from-emerald-50/90 via-teal-50/50 to-cyan-50/40 dark:from-emerald-950/25 dark:via-neutral-950 dark:to-slate-950/90 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.6)] dark:shadow-none"
-    >
-      <div class="flex-1 min-h-0 overflow-y-auto p-3 sm:p-4">
-        <div v-if="loading" class="flex items-center justify-center py-24">
-          <n-spin size="medium" />
-        </div>
+    <!-- 内容区 -->
+    <div class="flex-1 min-h-0 overflow-y-auto pb-32">
+      <div v-if="loading" class="flex items-center justify-center py-24">
+        <n-spin size="medium" />
+      </div>
 
-        <n-empty v-else-if="!items.length" description="暂无知识卡片" class="py-16" />
+      <n-empty v-else-if="!items.length" description="暂无知识卡片" class="py-16" />
 
-        <!-- 列表视图：紧凑行高 + 统一悬浮块（静态阴影，hover 仅微调描边） -->
-        <div v-else-if="viewMode === 'list'" class="space-y-2">
-          <button
-            v-for="c in items"
-            :key="c.id"
-            type="button"
-            class="group w-full text-left flex gap-0 rounded-lg border border-white/70 dark:border-emerald-900/50 bg-white/85 dark:bg-neutral-900/75 shadow-[0_2px_14px_-2px_rgba(16,185,129,0.18)] dark:shadow-[0_2px_16px_-4px_rgba(0,0,0,0.45)] backdrop-blur-sm hover:border-emerald-300/55 dark:hover:border-emerald-700/45 transition-[border-color] duration-150 overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/40"
-            @click="open(c)"
-          >
-            <div
-              class="w-1 shrink-0 bg-gradient-to-b from-emerald-400 to-teal-500"
-              aria-hidden="true"
-            />
-            <div class="shrink-0 flex items-center pl-2 py-2" @click.stop>
-              <n-checkbox
-                :checked="selectedIds.has(c.id)"
-                @update:checked="(v: boolean) => toggleSelect(c.id, v)"
-              />
-            </div>
-            <div class="flex-1 min-w-0 py-2 pl-1 pr-3">
-              <div class="flex items-center justify-between gap-2">
-                <h2 class="text-[13px] font-semibold text-neutral-800 dark:text-neutral-100 line-clamp-1 leading-tight">
-                  {{ c.title }}
-                </h2>
-                <time
-                  class="text-[10px] text-emerald-700/65 dark:text-emerald-500/80 font-mono tabular-nums shrink-0"
-                  :datetime="c.updatedAt"
-                >
-                  {{ formatTime(c.updatedAt) }}
-                </time>
-              </div>
-              <div class="flex flex-wrap items-center gap-x-2 gap-y-0.5 mt-1">
-                <n-tag v-if="c.type" size="tiny" :bordered="false" type="success" class="!text-[10px] !px-1.5 !py-0">
+      <!-- 卡片视图 -->
+      <div
+        v-else-if="viewMode === 'card'"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5"
+      >
+        <div
+          v-for="c in items"
+          :key="c.id"
+          class="group relative rounded-2xl border bg-white dark:bg-neutral-900 transition-all duration-300 cursor-pointer overflow-hidden flex flex-col"
+          :class="[
+            selectedIds.has(c.id)
+              ? 'ring-2 ring-emerald-500 border-transparent bg-emerald-50/20 dark:bg-emerald-950/20'
+              : 'border-slate-200/80 dark:border-neutral-700/60 hover:border-emerald-300 dark:hover:border-emerald-700',
+          ]"
+          @click="open(c)"
+        >
+          <!-- 卡片主体 -->
+          <div class="p-5 flex-1 flex flex-col gap-3">
+            <div class="flex items-start justify-between">
+              <div class="flex items-center gap-2 flex-wrap">
+                <n-tag v-if="c.type" size="small" :bordered="false" type="success" class="font-medium rounded">
                   {{ getCardTypeLabel(c.type) }}
                 </n-tag>
                 <n-tag
                   v-if="c.value"
-                  size="tiny"
+                  size="small"
                   :bordered="false"
                   :type="c.value === 'high' ? 'success' : c.value === 'medium' ? 'warning' : 'default'"
-                  class="!text-[10px] !px-1.5 !py-0"
+                  class="rounded"
                 >
-                  {{ c.value }}
+                  {{ c.value === 'high' ? '高价值' : c.value === 'medium' ? '中价值' : c.value }}
                 </n-tag>
-                <span
-                  v-if="c.projectName"
-                  class="text-[10px] text-neutral-600 dark:text-neutral-400 truncate max-w-[10rem]"
-                >
-                  {{ c.projectName }}
-                </span>
-                <span v-if="c.sourceName" class="text-[10px] text-neutral-400 dark:text-neutral-500">
-                  · {{ c.sourceName }}
-                </span>
               </div>
-              <p class="text-[11px] text-neutral-600/90 dark:text-neutral-400/95 line-clamp-2 mt-1.5 leading-snug">
+              <div class="shrink-0" @click.stop>
+                <n-checkbox
+                  :checked="selectedIds.has(c.id)"
+                  size="small"
+                  @update:checked="(v: boolean) => toggleSelect(c.id, v)"
+                />
+              </div>
+            </div>
+
+            <div class="flex-1">
+              <h3 class="text-base font-semibold text-slate-800 dark:text-slate-100 leading-snug group-hover:text-emerald-700 dark:group-hover:text-emerald-400 transition-colors">
+                {{ c.title }}
+              </h3>
+              <p class="text-[13px] text-slate-500 dark:text-slate-400 line-clamp-3 mt-2 leading-relaxed">
                 {{ c.summary || '暂无摘要' }}
               </p>
             </div>
-          </button>
+          </div>
+
+          <!-- 卡片底部 -->
+          <div class="px-5 py-3.5 bg-slate-50/50 dark:bg-neutral-800/30 border-t border-slate-100 dark:border-neutral-800 flex flex-col gap-2.5">
+            <div class="flex items-center justify-between text-[12px]">
+              <span class="flex items-center gap-1.5 font-medium text-slate-700 dark:text-slate-300 bg-white dark:bg-neutral-800 px-2 py-0.5 rounded border border-slate-200 dark:border-neutral-700">
+                <span class="i-lucide-folder w-3.5 h-3.5 text-slate-400" />
+                {{ c.projectName || '—' }}
+              </span>
+              <span v-if="c.sourceName" class="flex items-center gap-1.5 text-slate-400 dark:text-slate-500 font-mono bg-white dark:bg-neutral-800 px-1.5 py-0.5 rounded border border-slate-200 dark:border-neutral-700">
+                <span class="i-lucide-terminal w-3 h-3" />
+                {{ c.sourceName }}
+              </span>
+            </div>
+            <div class="flex items-center justify-between text-[11px] text-slate-400 dark:text-slate-500 mt-1">
+              <span class="flex items-center gap-1.5">
+                <span class="i-lucide-clock w-3 h-3" />
+                {{ formatTime(c.updatedAt) }}
+              </span>
+              <span class="opacity-0 group-hover:opacity-100 transition-opacity font-medium text-emerald-600 dark:text-emerald-400 flex items-center gap-1">
+                阅读笔记 <span class="i-lucide-arrow-right w-3 h-3" />
+              </span>
+            </div>
+          </div>
         </div>
+      </div>
 
-        <!-- 卡片视图：更高密度网格，与列表同一套悬浮与配色 -->
+      <!-- 列表视图 -->
+      <div v-else class="space-y-4">
         <div
-          v-else
-          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2.5"
+          v-for="c in items"
+          :key="'list-'+c.id"
+          class="group relative rounded-xl border bg-white dark:bg-neutral-900 transition-all duration-300 cursor-pointer overflow-hidden flex items-center"
+          :class="[
+            selectedIds.has(c.id)
+              ? 'ring-2 ring-emerald-500 border-transparent bg-emerald-50/20 dark:bg-emerald-950/20'
+              : 'border-slate-200/80 dark:border-neutral-700/60 hover:border-emerald-300 dark:hover:border-emerald-700',
+          ]"
+          @click="open(c)"
         >
-          <button
-            v-for="c in items"
-            :key="c.id"
-            type="button"
-            class="group flex flex-col text-left rounded-xl border border-white/70 dark:border-emerald-900/50 bg-white/85 dark:bg-neutral-900/75 min-h-[132px] p-3 shadow-[0_2px_14px_-2px_rgba(16,185,129,0.18)] dark:shadow-[0_2px_16px_-4px_rgba(0,0,0,0.45)] backdrop-blur-sm hover:border-emerald-300/55 dark:hover:border-emerald-700/45 transition-[border-color] duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/40"
-            @click="open(c)"
-          >
-            <div class="flex items-start justify-between gap-2">
-              <div class="flex items-start gap-2 min-w-0 flex-1">
-                <div class="shrink-0 pt-0.5" @click.stop>
-                  <n-checkbox
-                    :checked="selectedIds.has(c.id)"
-                    @update:checked="(v: boolean) => toggleSelect(c.id, v)"
-                  />
-                </div>
-                <div class="flex flex-wrap gap-1 min-w-0">
-                  <n-tag v-if="c.type" size="tiny" :bordered="false" type="success" class="!text-[10px] !px-1.5 !py-0">
-                    {{ getCardTypeLabel(c.type) }}
-                  </n-tag>
-                  <n-tag
-                    v-if="c.value"
-                    size="tiny"
-                    :bordered="false"
-                    :type="c.value === 'high' ? 'success' : c.value === 'medium' ? 'warning' : 'default'"
-                    class="!text-[10px] !px-1.5 !py-0"
-                  >
-                    {{ c.value }}
-                  </n-tag>
-                </div>
+          <!-- Checkbox -->
+          <div class="pl-4 shrink-0" @click.stop>
+            <n-checkbox
+              :checked="selectedIds.has(c.id)"
+              size="small"
+              @update:checked="(v: boolean) => toggleSelect(c.id, v)"
+            />
+          </div>
+
+          <!-- 列表项内容 -->
+          <div class="flex-1 p-4 flex items-center gap-4">
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-2 mb-1">
+                <n-tag v-if="c.type" size="small" :bordered="false" type="success" class="font-medium rounded !text-[11px]">
+                  {{ getCardTypeLabel(c.type) }}
+                </n-tag>
+                <n-tag
+                  v-if="c.value"
+                  size="small"
+                  :bordered="false"
+                  :type="c.value === 'high' ? 'success' : c.value === 'medium' ? 'warning' : 'default'"
+                  class="rounded !text-[11px]"
+                >
+                  {{ c.value === 'high' ? '高价值' : c.value === 'medium' ? '中价值' : c.value }}
+                </n-tag>
+                <h3 class="text-[15px] font-semibold text-slate-800 dark:text-slate-100 truncate group-hover:text-emerald-700 dark:group-hover:text-emerald-400 transition-colors">
+                  {{ c.title }}
+                </h3>
               </div>
-              <time
-                class="text-[10px] text-emerald-700/65 dark:text-emerald-500/80 font-mono tabular-nums shrink-0"
-                :datetime="c.updatedAt"
-              >
+              <p class="text-[13px] text-slate-500 dark:text-slate-400 truncate">
+                {{ c.summary || '暂无摘要' }}
+              </p>
+            </div>
+
+            <!-- 元数据 -->
+            <div class="flex items-center gap-4 shrink-0 text-[12px] text-slate-400 dark:text-slate-500">
+              <span class="flex items-center gap-1.5 w-24">
+                <span class="i-lucide-folder w-3.5 h-3.5" />
+                <span class="truncate">{{ c.projectName || '—' }}</span>
+              </span>
+              <span v-if="c.sourceName" class="flex items-center gap-1.5 w-24">
+                <span class="i-lucide-terminal w-3 h-3" />
+                <span class="truncate">{{ c.sourceName }}</span>
+              </span>
+              <span class="flex items-center gap-1.5 w-32">
+                <span class="i-lucide-clock w-3.5 h-3.5" />
                 {{ formatTime(c.updatedAt) }}
-              </time>
+              </span>
             </div>
-            <h2 class="text-[13px] font-semibold text-neutral-800 dark:text-neutral-100 line-clamp-2 mt-1.5 leading-snug">
-              {{ c.title }}
-            </h2>
-            <p class="text-[11px] text-neutral-600/90 dark:text-neutral-400/95 line-clamp-2 mt-1 flex-1 leading-snug">
-              {{ c.summary || '暂无摘要' }}
-            </p>
-            <div class="mt-1.5 pt-1.5 border-t border-emerald-100/80 dark:border-emerald-900/40 flex items-center justify-between gap-2 text-[10px] text-neutral-500 dark:text-neutral-400">
-              <span class="truncate">{{ c.projectName || '—' }}</span>
-              <span class="i-lucide-chevron-right w-3 h-3 text-emerald-400/80 shrink-0" />
+
+            <!-- 操作按钮 -->
+            <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-200 shrink-0 w-24 flex justify-end">
+              <n-button secondary size="small" class="rounded-lg">
+                <template #icon>
+                  <span class="i-lucide-book-open w-4 h-4" />
+                </template>
+                阅读笔记
+              </n-button>
             </div>
-          </button>
+          </div>
         </div>
       </div>
     </div>
 
-    <!-- 分页：固定在内容区下方、不随列表滚动 -->
+    <!-- 分页 -->
     <footer
       v-if="total > 0"
-      class="shrink-0 py-2 mt-1.5 border-t border-emerald-100/70 dark:border-emerald-900/40 bg-emerald-50/40 dark:bg-neutral-950/90 backdrop-blur-sm"
+      class="shrink-0 py-3 border-t border-slate-200 dark:border-neutral-800"
     >
       <Pagination
         :page="page"
diff --git a/apps/desktop/src/views/SessionsView.vue b/apps/desktop/src/views/SessionsView.vue
index d500da4..fe0bf33 100644
--- a/apps/desktop/src/views/SessionsView.vue
+++ b/apps/desktop/src/views/SessionsView.vue
@@ -214,8 +214,8 @@ function openSearchHit(cardId: string, sessionId: string) {
 </script>
 
 <template>
-  <div class="flex flex-col h-full px-5 pt-5 max-w-5xl mx-auto w-full">
-    <SessionToolbar />
+  <div class="flex flex-col h-full px-5 pt-5 mx-auto w-full relative">
+    <SessionToolbar :pending-count="unanalyzedCount" />
 
     <!-- Toast -->
     <Transition
@@ -249,7 +249,7 @@ function openSearchHit(cardId: string, sessionId: string) {
 
     <!-- 搜索结果（FTS 知识卡片） -->
     <div v-if="search.query.trim()" class="flex-1 min-h-0 overflow-y-auto space-y-3 pb-4">
-      <div class="text-xs text-neutral-500 font-medium">搜索结果（{{ search.results.length }}）</div>
+      <div class="text-xs text-slate-500 dark:text-slate-400 font-medium">搜索结果（{{ search.results.length }}）</div>
       <div v-if="search.searching && !search.results.length" class="flex justify-center py-16">
         <n-spin size="medium" />
       </div>
@@ -260,15 +260,15 @@ function openSearchHit(cardId: string, sessionId: string) {
         <template #default>
           <div class="text-center space-y-1 px-4">
             <template v-if="libraryCardTotal === 0">
-              <p class="text-sm text-neutral-600 dark:text-neutral-300">知识库中暂无笔记</p>
-              <p class="text-xs text-neutral-400">请先同步对话并完成提炼，再使用全文搜索。</p>
+              <p class="text-sm text-slate-600 dark:text-slate-300">知识库中暂无笔记</p>
+              <p class="text-xs text-slate-400">请先同步对话并完成提炼，再使用全文搜索。</p>
             </template>
             <template v-else-if="libraryCardTotal != null && libraryCardTotal > 0">
-              <p class="text-sm text-neutral-600 dark:text-neutral-300">未找到包含该关键词的笔记</p>
-              <p class="text-xs text-neutral-400">试试更短的关键词、同义词，或检查拼写。</p>
+              <p class="text-sm text-slate-600 dark:text-slate-300">未找到包含该关键词的笔记</p>
+              <p class="text-xs text-slate-400">试试更短的关键词、同义词，或检查拼写。</p>
             </template>
             <template v-else>
-              <p class="text-sm text-neutral-600 dark:text-neutral-300">未找到匹配内容</p>
+              <p class="text-sm text-slate-600 dark:text-slate-300">未找到匹配内容</p>
             </template>
           </div>
         </template>
@@ -276,15 +276,15 @@ function openSearchHit(cardId: string, sessionId: string) {
       <div
         v-for="c in search.results"
         :key="c.id"
-        class="rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 cursor-pointer hover:border-brand-300 dark:hover:border-brand-800 transition-all group"
+        class="rounded-lg border border-slate-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 cursor-pointer hover:border-emerald-300 dark:hover:border-emerald-800 transition-all group"
         @click="openSearchHit(c.id, c.sessionId)"
       >
         <div class="flex items-center justify-between gap-3">
           <div class="min-w-0">
-            <div class="text-sm font-medium text-neutral-800 dark:text-neutral-200 group-hover:text-brand-600 dark:group-hover:text-brand-400 truncate">{{ c.title }}</div>
-            <div class="text-xs text-neutral-500 line-clamp-1 mt-0.5">{{ c.summary }}</div>
+            <div class="text-sm font-medium text-slate-800 dark:text-slate-200 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 truncate">{{ c.title }}</div>
+            <div class="text-xs text-slate-500 line-clamp-1 mt-0.5">{{ c.summary }}</div>
           </div>
-          <span class="i-lucide-arrow-right w-4 h-4 text-neutral-400 group-hover:text-brand-500 shrink-0" />
+          <span class="i-lucide-arrow-right w-4 h-4 text-slate-400 group-hover:text-emerald-500 shrink-0" />
         </div>
       </div>
     </div>
@@ -309,80 +309,41 @@ function openSearchHit(cardId: string, sessionId: string) {
       </div>
 
       <template v-else>
-        <!-- 批量操作工具栏 -->
-        <div class="flex items-center justify-between mb-2 min-h-8">
-          <div class="flex items-center gap-3">
-            <template v-if="batchMode">
-              <n-checkbox
-                :checked="allSelected"
-                :indeterminate="indeterminate"
-                @update:checked="toggleSelectAll"
-              >
-                <span class="text-xs text-neutral-600 dark:text-neutral-400">全选</span>
-              </n-checkbox>
-              <span v-if="selectedIds.size > 0" class="text-xs text-brand-600 dark:text-brand-400 font-medium">
-                已选 {{ selectedIds.size }} 条
-              </span>
-            </template>
-          </div>
-
-          <div class="flex items-center gap-2">
-            <template v-if="!batchMode">
-              <n-button
-                v-if="unanalyzedCount > 0"
-                size="tiny"
-                :disabled="batchRunning"
-                @click="toggleBatchMode"
-              >
-                <span class="inline-flex items-center gap-1">
-                  <span class="i-lucide-layers w-3 h-3" />
-                  批量分析（{{ unanalyzedCount }}）
-                </span>
-              </n-button>
-            </template>
-
-            <template v-else>
-              <n-button
-                size="tiny"
-                type="primary"
-                :loading="batchRunning"
-                :disabled="selectedIds.size === 0 || batchRunning"
-                @click="startBatchAnalyze"
-              >
-                <span class="inline-flex items-center gap-1">
-                  <span v-if="!batchRunning" class="i-lucide-sparkles w-3 h-3" />
-                  {{ batchRunning ? `队列处理中 ${batchFinished}/${batchExpected}…` : `开始分析（${selectedIds.size}）` }}
-                </span>
-              </n-button>
-              <n-button size="tiny" :disabled="batchRunning" @click="toggleBatchMode">
-                取消
-              </n-button>
-            </template>
-          </div>
+        <!-- 列表标题行 -->
+        <div class="flex items-center justify-between mb-3">
+          <h2 class="text-base font-semibold text-slate-800 dark:text-slate-100">会话列表</h2>
+          <n-button
+            v-if="unanalyzedCount > 0 && !batchMode"
+            size="small"
+            secondary
+            :disabled="batchRunning"
+            @click="toggleBatchMode"
+          >
+            <span class="inline-flex items-center gap-1.5">
+              <span class="i-lucide-layers w-3.5 h-3.5" />
+              批量操作
+            </span>
+          </n-button>
         </div>
 
-        <p v-if="batchRunning" class="text-xs text-neutral-500 mb-2">
+        <p v-if="batchRunning" class="text-xs text-slate-500 dark:text-slate-400 mb-2">
           已加入全局分析队列，进度见右下角面板；请勿关闭应用。
         </p>
 
-        <!-- 与会话列表区：整体悬浮块 + 渐变底，与 KnowledgeView 内容区同一套层次逻辑；暗色同样保留外阴影表深度 -->
-        <div
-          class="flex-1 min-h-0 flex flex-col overflow-hidden rounded-xl border border-emerald-200/40 dark:border-emerald-900/35 bg-gradient-to-br from-emerald-50/90 via-teal-50/50 to-cyan-50/40 dark:from-emerald-950/25 dark:via-neutral-950 dark:to-slate-950/90 shadow-[0_2px_14px_-2px_rgba(16,185,129,0.12)] dark:shadow-[0_2px_16px_-4px_rgba(0,0,0,0.4)]"
-        >
-          <div class="flex-1 min-h-0 overflow-y-auto p-3 sm:p-4 space-y-2.5 pb-3">
-            <SessionCard
-              v-for="s in sessions.items"
-              :key="s.id"
-              :session="s"
-              :selectable="batchMode"
-              :selected="selectedIds.has(s.id)"
-              @analyze="onAnalyze"
-              @update:selected="onSelectionChange"
-            />
-          </div>
+        <!-- 会话卡片列表 -->
+        <div class="flex-1 min-h-0 overflow-y-auto space-y-4 pb-32">
+          <SessionCard
+            v-for="s in sessions.items"
+            :key="s.id"
+            :session="s"
+            :selectable="batchMode"
+            :selected="selectedIds.has(s.id)"
+            @analyze="onAnalyze"
+            @update:selected="onSelectionChange"
+          />
         </div>
 
-        <div class="shrink-0 py-3 border-t border-neutral-200 dark:border-neutral-800">
+        <div class="shrink-0 py-3 border-t border-slate-200 dark:border-neutral-800">
           <Pagination
             :page="sessions.page"
             :page-size="sessions.pageSize"
@@ -391,7 +352,83 @@ function openSearchHit(cardId: string, sessionId: string) {
             @update:page-size="sessions.setPageSize"
           />
         </div>
+
+        <!-- 批量操作浮条 (Glass Bar) -->
+        <Transition
+          enter-active-class="transition ease-out duration-300 transform"
+          enter-from-class="translate-y-24 opacity-0"
+          enter-to-class="translate-y-0 opacity-100"
+          leave-active-class="transition ease-in duration-200 transform"
+          leave-from-class="translate-y-0 opacity-100"
+          leave-to-class="translate-y-24 opacity-0"
+        >
+          <div
+            v-show="batchMode"
+            class="absolute bottom-8 left-0 right-0 flex justify-center z-50 pointer-events-none"
+          >
+            <div class="glass-bar rounded-full p-2 pl-5 flex items-center gap-5 pointer-events-auto shadow-xl">
+              <!-- 选择状态 -->
+              <div class="flex items-center gap-3 border-r border-slate-200/80 dark:border-neutral-600/80 pr-4">
+                <n-checkbox
+                  :checked="allSelected"
+                  :indeterminate="indeterminate"
+                  @update:checked="toggleSelectAll"
+                />
+                <span class="text-sm font-semibold text-slate-700 dark:text-slate-200 w-[60px]">
+                  已选 <span class="text-emerald-600 dark:text-emerald-400">{{ selectedIds.size }}</span> 项
+                </span>
+              </div>
+              <!-- 操作按钮 -->
+              <div class="flex items-center gap-2">
+                <n-button
+                  type="primary"
+                  round
+                  size="large"
+                  class="px-6"
+                  :loading="batchRunning"
+                  :disabled="selectedIds.size === 0 || batchRunning"
+                  @click="startBatchAnalyze"
+                >
+                  <template #icon>
+                    <span v-if="!batchRunning" class="i-lucide-sparkles w-4 h-4" />
+                  </template>
+                  {{ batchRunning ? `处理中 ${batchFinished}/${batchExpected}…` : '开始分析' }}
+                </n-button>
+                <n-button
+                  round
+                  size="large"
+                  secondary
+                  class="px-6"
+                  :disabled="batchRunning"
+                  @click="toggleBatchMode"
+                >
+                  取消
+                </n-button>
+              </div>
+            </div>
+          </div>
+        </Transition>
       </template>
     </template>
   </div>
 </template>
+
+<style scoped>
+.glass-bar {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 20px 25px -5px rgba(5, 150, 105, 0.1),
+    0 10px 10px -5px rgba(5, 150, 105, 0.05),
+    inset 0 1px 2px 0 rgba(255, 255, 255, 0.1);
+}
+.dark .glass-bar {
+  background: rgba(23, 23, 23, 0.85);
+  border-color: rgba(64, 64, 64, 0.8);
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.3),
+    0 10px 10px -5px rgba(0, 0, 0, 0.2);
+}
+</style>
diff --git a/design/ui_demo.html b/design/ui_demo.html
new file mode 100644
index 0000000..93d7d2e
--- /dev/null
+++ b/design/ui_demo.html
@@ -0,0 +1,779 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>寻迹 UI 优化可视化 Demo</title>
+  
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            brand: {
+              50: '#ecfdf5',
+              100: '#d1fae5',
+              500: '#10b981',
+              600: '#059669',
+            }
+          }
+        }
+      }
+    }
+  </script>
+  
+  <!-- Vue 3 -->
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <!-- Naive UI -->
+  <script src="https://unpkg.com/naive-ui"></script>
+  <!-- Lucide Icons -->
+  <script src="https://unpkg.com/lucide@latest"></script>
+  
+  <style>
+    body { 
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
+      background-color: #f8fafc; 
+      margin: 0;
+      overflow: hidden;
+    }
+    
+    /* 毛玻璃悬浮条样式 */
+    .glass-bar {
+      background: rgba(255, 255, 255, 0.85);
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
+      border: 1px solid rgba(226, 232, 240, 0.8);
+      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    }
+
+    [v-cloak] {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <div id="app" v-cloak class="flex flex-col h-screen w-screen overflow-hidden bg-slate-50 text-slate-800">
+    
+    <!-- 顶部菜单栏 TopBar -->
+    <header class="h-[60px] flex items-center justify-between px-4 border-b border-slate-200 bg-white shrink-0 z-50">
+      
+      <!-- 左侧：Logo + Tab 导航 -->
+      <div class="flex items-center gap-6">
+        
+        <!-- 优化 1. 品牌 Logo 区域特色强化 -->
+        <div class="flex items-center gap-3">
+          <!-- 质感 Logo 图标 -->
+          <!-- Logo 仅渐变，不叠阴影，与桌面端 TopBar 对齐 -->
+          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-400 to-teal-600 flex items-center justify-center text-white">
+            <i data-lucide="footprints" class="w-5 h-5"></i>
+          </div>
+          <div class="flex flex-col">
+            <h1 class="font-bold text-[15px] leading-tight tracking-wide text-slate-800 flex items-center gap-1.5">
+              寻迹
+              <!-- 版本徽标 -->
+              <span class="px-1 py-0.5 rounded text-[9px] bg-emerald-100 text-emerald-700 font-bold tracking-wider">BETA</span>
+            </h1>
+            <!-- 专属 Slogan -->
+            <span class="text-[10px] text-slate-500 font-medium leading-tight tracking-wide">AI 编程知识沉淀</span>
+          </div>
+        </div>
+
+        <!-- 竖线分割 -->
+        <div class="w-px h-5 bg-slate-200 mx-1"></div>
+
+        <!-- Tab 导航 -->
+        <!-- Tab：选中态用 ring 代替 shadow-sm，与桌面端扁平风格一致 -->
+        <div class="flex items-center bg-slate-100/80 p-1 rounded-lg">
+          <button 
+            @click="activeTab = 'sessions'"
+            :class="['flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium transition-colors', activeTab === 'sessions' ? 'bg-white text-emerald-600 ring-1 ring-slate-200/90' : 'text-slate-500 hover:text-slate-800']">
+            <i data-lucide="messages-square" class="w-4 h-4"></i>
+            对话记录
+          </button>
+          <button 
+            @click="activeTab = 'library'"
+            :class="['flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium transition-colors', activeTab === 'library' ? 'bg-white text-emerald-600 ring-1 ring-slate-200/90' : 'text-slate-500 hover:text-slate-800']">
+            <i data-lucide="library" class="w-4 h-4"></i>
+            知识库
+          </button>
+        </div>
+      </div>
+
+      <!-- 右侧：同步与工具 -->
+      <div class="flex items-center gap-2">
+        <n-button size="small" secondary class="rounded-md">
+          <template #icon><i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i></template>
+          同步
+        </n-button>
+        <div class="w-px h-4 bg-slate-200 mx-1"></div>
+        <n-button quaternary circle size="small" aria-label="导出">
+          <i data-lucide="download" class="w-4 h-4 text-slate-500"></i>
+        </n-button>
+        <n-button quaternary circle size="small" aria-label="设置">
+          <i data-lucide="settings" class="w-4 h-4 text-slate-500"></i>
+        </n-button>
+        <n-button quaternary circle size="small" aria-label="主题切换">
+          <i data-lucide="sun" class="w-4 h-4 text-slate-500"></i>
+        </n-button>
+      </div>
+    </header>
+
+    <!-- 下方内容区 -->
+    <div class="flex flex-1 min-h-0 relative">
+      
+      <!-- ================= 左侧 Sidebar (对话记录模式) ================= -->
+      <aside v-if="activeTab === 'sessions'" class="w-[260px] bg-white border-r border-slate-200 flex flex-col shrink-0">
+        
+        <!-- 全部对话与整理按钮 -->
+        <div class="p-3 pb-2 space-y-2 border-b border-slate-100">
+          <div class="flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-emerald-50 text-emerald-700 cursor-pointer text-sm font-medium transition-colors">
+            <i data-lucide="messages-square" class="w-4 h-4 shrink-0"></i>
+            <span>全部对话</span>
+            <span class="ml-auto text-xs opacity-80">15</span>
+          </div>
+          <n-tooltip placement="bottom" trigger="hover">
+            <template #trigger>
+              <n-button size="small" block secondary>
+                <template #icon>
+                  <i data-lucide="list-checks" class="w-4 h-4"></i>
+                </template>
+                会话整理
+              </n-button>
+            </template>
+            点「会话整理」后勾选目录中的分组，即可批量移除（仅删除应用内记录）。
+          </n-tooltip>
+        </div>
+
+        <!-- 树状视图 (优化为三级：源 -> 主机 -> 项目) -->
+        <div class="flex-1 overflow-y-auto p-2">
+          <div class="px-2 pt-1 pb-2">
+            <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-widest mb-2 flex items-center gap-1.5">
+              <i data-lucide="folders" class="w-3.5 h-3.5"></i> 来源项目
+            </div>
+          </div>
+          <div class="space-y-1">
+            <!-- Source 1: Cursor -->
+            <div>
+              <div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-slate-50 cursor-pointer text-sm">
+                <i data-lucide="chevron-down" class="w-3.5 h-3.5 text-slate-400"></i>
+                <i data-lucide="mouse-pointer-click" class="w-4 h-4 text-blue-500 opacity-80"></i>
+                <span class="font-medium text-slate-700 truncate">Cursor</span>
+                <span class="ml-auto text-[10px] text-slate-400 font-mono">12</span>
+              </div>
+              
+              <!-- 主机: 本地 -->
+              <div class="pl-5 space-y-0.5 mt-0.5">
+                <div class="flex items-center gap-2 px-2 py-1 rounded hover:bg-slate-50 cursor-pointer text-[13px]">
+                  <i data-lucide="chevron-down" class="w-3.5 h-3.5 text-slate-400"></i>
+                  <i data-lucide="server" class="w-3.5 h-3.5 text-slate-400"></i>
+                  <span class="text-slate-600 truncate">本地</span>
+                  <span class="ml-auto text-[10px] text-slate-400 font-mono">12</span>
+                </div>
+                
+                <!-- 项目: 子节点 -->
+                <div class="pl-6 space-y-0.5 mt-0.5">
+                  <div class="flex items-center gap-2 px-2 py-1.5 rounded bg-slate-100 text-slate-800 cursor-pointer text-sm">
+                    <i data-lucide="corner-down-right" class="w-3 h-3 text-slate-300"></i>
+                    <i data-lucide="folder" class="w-4 h-4 text-emerald-500"></i>
+                    <span class="font-medium truncate">xunji-desktop</span>
+                    <span class="ml-auto text-[10px] text-slate-500 font-mono">5</span>
+                  </div>
+                  <div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-slate-50 cursor-pointer text-sm">
+                    <i data-lucide="corner-down-right" class="w-3 h-3 text-slate-300"></i>
+                    <i data-lucide="folder" class="w-4 h-4 text-slate-400"></i>
+                    <span class="text-slate-600 truncate">another-project</span>
+                    <span class="ml-auto text-[10px] text-slate-400 font-mono">7</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Source 2: Claude Code -->
+            <div class="mt-2">
+              <div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-slate-50 cursor-pointer text-sm">
+                <i data-lucide="chevron-right" class="w-3.5 h-3.5 text-slate-400"></i>
+                <i data-lucide="terminal" class="w-4 h-4 text-orange-500 opacity-80"></i>
+                <span class="font-medium text-slate-700 truncate">Claude Code</span>
+                <span class="ml-auto text-[10px] text-slate-400 font-mono">3</span>
+              </div>
+            </div>
+            
+            <!-- Source 3: CodeBuddy -->
+            <div class="mt-2">
+              <div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-slate-50 cursor-pointer text-sm">
+                <i data-lucide="chevron-right" class="w-3.5 h-3.5 text-slate-400"></i>
+                <i data-lucide="code" class="w-4 h-4 text-purple-500 opacity-80"></i>
+                <span class="font-medium text-slate-700 truncate">CodeBuddy</span>
+                <span class="ml-auto text-[10px] text-slate-400 font-mono">0</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      <!-- ================= 左侧 Sidebar (知识库模式) ================= -->
+      <aside v-if="activeTab === 'library'" class="w-[260px] bg-white border-r border-slate-200 flex flex-col shrink-0">
+        <div class="flex-1 overflow-y-auto p-4 space-y-6">
+          
+          <!-- 类型 -->
+          <div>
+            <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-widest mb-3 flex items-center gap-1.5">
+              <i data-lucide="layout-grid" class="w-3.5 h-3.5"></i> 类型
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <span class="px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-200 cursor-pointer transition-colors">全部 <span class="opacity-60 ml-0.5 text-[10px]">10</span></span>
+              <span class="px-2.5 py-1 rounded-full text-xs text-slate-600 border border-slate-200 hover:bg-slate-50 cursor-pointer transition-colors">实现 <span class="opacity-60 ml-0.5 text-[10px]">6</span></span>
+              <span class="px-2.5 py-1 rounded-full text-xs text-slate-600 border border-slate-200 hover:bg-slate-50 cursor-pointer transition-colors">调试 <span class="opacity-60 ml-0.5 text-[10px]">2</span></span>
+              <span class="px-2.5 py-1 rounded-full text-xs text-slate-600 border border-slate-200 hover:bg-slate-50 cursor-pointer transition-colors">调研 <span class="opacity-60 ml-0.5 text-[10px]">2</span></span>
+            </div>
+          </div>
+
+          <div class="h-px bg-slate-100"></div>
+
+          <!-- 标签 -->
+          <div>
+            <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-widest mb-3 flex items-center gap-1.5">
+              <i data-lucide="tags" class="w-3.5 h-3.5"></i> 标签
+            </div>
+            <div class="flex flex-wrap gap-1.5">
+              <span class="px-2.5 py-1 rounded-full text-xs text-slate-600 border border-slate-200 hover:bg-slate-50 cursor-pointer">Tauri <span class="opacity-50 ml-0.5 text-[10px]">6</span></span>
+              <span class="px-2.5 py-1 rounded-full text-xs text-slate-600 border border-slate-200 hover:bg-slate-50 cursor-pointer">Rust <span class="opacity-50 ml-0.5 text-[10px]">4</span></span>
+              <span class="px-2.5 py-1 rounded-full text-xs text-slate-600 border border-slate-200 hover:bg-slate-50 cursor-pointer">SQLite <span class="opacity-50 ml-0.5 text-[10px]">3</span></span>
+              <span class="px-2.5 py-1 rounded-full text-xs text-slate-600 border border-slate-200 hover:bg-slate-50 cursor-pointer">AI工具 <span class="opacity-50 ml-0.5 text-[10px]">2</span></span>
+              <span class="px-2.5 py-1 rounded-full text-xs text-slate-600 border border-slate-200 hover:bg-slate-50 cursor-pointer">CRUD <span class="opacity-50 ml-0.5 text-[10px]">2</span></span>
+              <span class="px-2.5 py-1 rounded-full text-xs text-slate-600 border border-slate-200 hover:bg-slate-50 cursor-pointer">Vue3 <span class="opacity-50 ml-0.5 text-[10px]">2</span></span>
+            </div>
+          </div>
+
+          <div class="h-px bg-slate-100"></div>
+
+          <!-- 技术栈 -->
+          <div>
+            <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-widest mb-3 flex items-center gap-1.5">
+              <i data-lucide="layers" class="w-3.5 h-3.5"></i> 技术栈
+            </div>
+            <div class="flex flex-wrap gap-1.5">
+              <span class="px-2.5 py-1 rounded-full text-xs font-medium text-blue-700 bg-blue-50 cursor-pointer">Tauri <span class="opacity-60 ml-0.5 text-[10px]">7</span></span>
+              <span class="px-2.5 py-1 rounded-full text-xs font-medium text-blue-700 bg-blue-50 cursor-pointer">Rust <span class="opacity-60 ml-0.5 text-[10px]">6</span></span>
+              <span class="px-2.5 py-1 rounded-full text-xs font-medium text-blue-700 bg-blue-50 cursor-pointer">SQLite <span class="opacity-60 ml-0.5 text-[10px]">5</span></span>
+              <span class="px-2.5 py-1 rounded-full text-xs font-medium text-blue-700 bg-blue-50 cursor-pointer">TypeScript <span class="opacity-60 ml-0.5 text-[10px]">3</span></span>
+            </div>
+          </div>
+
+        </div>
+      </aside>
+
+      <!-- ================= 右侧主体内容 (共用容器) ================= -->
+      <main class="flex-1 flex flex-col relative min-w-0 bg-[#fafafa]">
+        <div class="flex-1 overflow-y-auto p-6 lg:p-8 w-full relative">
+          
+          <!-- ========== 对话记录视图 ========== -->
+          <div v-if="activeTab === 'sessions'">
+            <!-- 顶部工具栏精简 -->
+            <div class="mb-8 flex flex-col gap-4">
+              <!-- 搜索行 -->
+              <div class="flex items-center gap-3">
+                <n-input
+                  v-model:value="searchQuery"
+                  placeholder="搜索知识笔记（标题 / 摘要 / 正文全文）..."
+                  clearable
+                  size="large"
+                  class="flex-1 rounded-lg"
+                  style="--n-box-shadow: none;"
+                >
+                  <template #prefix>
+                    <i data-lucide="search" class="w-4 h-4 text-slate-400 mr-1"></i>
+                  </template>
+                </n-input>
+                
+                <n-button size="large" secondary class="rounded-lg px-4 bg-white border border-slate-200">
+                  <template #icon>
+                    <i data-lucide="rotate-ccw" class="w-4 h-4 text-slate-500"></i>
+                  </template>
+                  <span class="text-slate-600">刷新</span>
+                </n-button>
+              </div>
+
+              <!-- 分段选择器和收纳提示文字 -->
+              <div class="flex items-center justify-between">
+                <!-- 紧凑的分段选择器 Segmented Control -->
+                <div class="bg-slate-200/70 p-1 rounded-lg inline-flex">
+                  <button 
+                    @click="filterStatus = 'all'"
+                    :class="['px-5 py-1.5 rounded-md text-sm font-medium transition-colors duration-200', filterStatus === 'all' ? 'bg-white text-slate-800 ring-1 ring-slate-200/90' : 'text-slate-500 hover:text-slate-800']"
+                  >全部会话</button>
+                  <button 
+                    @click="filterStatus = 'pending'"
+                    :class="['px-5 py-1.5 rounded-md text-sm font-medium transition-colors duration-200 flex items-center gap-1.5', filterStatus === 'pending' ? 'bg-white text-amber-600 ring-1 ring-slate-200/90' : 'text-slate-500 hover:text-slate-800']"
+                  >
+                    待分析 <span :class="['py-0.5 px-1.5 rounded-full text-[10px] leading-none', filterStatus === 'pending' ? 'bg-amber-100 text-amber-700' : 'bg-slate-300 text-slate-600']">1</span>
+                  </button>
+                  <button 
+                    @click="filterStatus = 'analyzed'"
+                    :class="['px-5 py-1.5 rounded-md text-sm font-medium transition-colors duration-200', filterStatus === 'analyzed' ? 'bg-white text-emerald-600 ring-1 ring-slate-200/90' : 'text-slate-500 hover:text-slate-800']"
+                  >已分析</button>
+                </div>
+
+                <!-- 冗余提示文字使用 Tooltip 收纳 -->
+                <div class="flex items-center gap-2 text-sm text-slate-500">
+                  <span>共 <strong class="text-slate-800 font-semibold mx-0.5">3</strong> 条记录</span>
+                  <n-tooltip trigger="hover" placement="top-end">
+                    <template #trigger>
+                      <i data-lucide="info" class="w-4 h-4 text-slate-400 cursor-help hover:text-emerald-500 transition-colors focus:outline-none"></i>
+                    </template>
+                    搜索对象为已入库的知识卡片（FTS），不包含未提炼的会话标题。
+                  </n-tooltip>
+                </div>
+              </div>
+            </div>
+
+            <!-- 批量操作入口 -->
+            <div class="flex items-center justify-between mb-4 mt-2">
+              <div class="text-[15px] font-semibold text-slate-800">会话列表</div>
+              <n-button 
+                v-if="!batchMode" 
+                size="small" 
+                secondary
+                class="rounded-md"
+                @click="batchMode = true"
+              >
+                <template #icon>
+                  <i data-lucide="list-checks" class="w-3.5 h-3.5"></i>
+                </template>
+                批量操作
+              </n-button>
+            </div>
+
+            <!-- 卡片列表 -->
+            <div class="space-y-4 pb-32">
+              
+              <!-- 卡片 1: 待分析 (可选) -->
+              <div 
+                class="group relative rounded-2xl border border-slate-200/80 bg-white transition-all duration-300 cursor-pointer overflow-hidden flex"
+                :class="[batchMode && selected.includes(1) ? 'ring-2 ring-emerald-500 border-transparent bg-emerald-50/40' : 'hover:border-emerald-300']"
+                @click="batchMode ? toggleSelect(1) : null"
+              >
+                <!-- 批量选择 Checkbox -->
+                <div v-if="batchMode" class="pl-5 pt-5 shrink-0" @click.stop>
+                  <n-checkbox :checked="selected.includes(1)" @update:checked="toggleSelect(1)" size="large"></n-checkbox>
+                </div>
+                
+                <div class="flex-1 p-5 flex flex-col gap-3.5">
+                  <!-- 上层：核心视线区 -->
+                  <div class="flex items-start justify-between gap-4">
+                    <div class="space-y-2 flex-1">
+                      <!-- 状态与来源 -->
+                      <div class="flex items-center gap-2">
+                        <n-tag size="small" type="warning" :bordered="false" class="font-medium rounded bg-amber-50 text-amber-600">待分析</n-tag>
+                        <span class="text-[11px] text-slate-400 flex items-center gap-1 font-mono bg-slate-50 px-1.5 py-0.5 rounded border border-slate-100">
+                          <i data-lucide="mouse-pointer-click" class="w-3 h-3"></i> cursor
+                        </span>
+                      </div>
+                      <!-- 标题 -->
+                      <h3 class="text-base font-semibold text-slate-800 leading-relaxed line-clamp-2 pr-4">
+                        帮我优化一下当前的首页 UI，主要问题是信息密度过高，层级不清晰，操作按钮视觉压迫感太强
+                      </h3>
+                    </div>
+                    
+                    <!-- 弱化的操作按钮 (Hover 出现) -->
+                    <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-200 shrink-0" v-if="!batchMode" @click.stop>
+                      <n-button secondary type="primary" size="small" class="rounded-lg">
+                        <template #icon><i data-lucide="sparkles" class="w-4 h-4"></i></template>
+                        开始分析
+                      </n-button>
+                    </div>
+                  </div>
+
+                  <!-- 下层：辅助元数据 -->
+                  <div class="flex flex-wrap items-center gap-x-5 gap-y-2 text-[12px] text-slate-500 pt-3.5 border-t border-slate-100">
+                    <span class="flex items-center gap-1.5 font-medium text-slate-700 bg-slate-100/50 px-2 py-1 rounded-md">
+                      <i data-lucide="folder" class="w-3.5 h-3.5 text-slate-400"></i> xunji-desktop
+                    </span>
+                    <span class="flex items-center gap-1.5">
+                      <i data-lucide="clock" class="w-3.5 h-3.5 text-slate-400"></i> 10 分钟前
+                    </span>
+                    <span class="flex items-center gap-1.5">
+                      <i data-lucide="message-circle" class="w-3.5 h-3.5 text-slate-400"></i> 12 条对话
+                    </span>
+                    <span class="flex items-center gap-1.5">
+                      <i data-lucide="hard-drive" class="w-3.5 h-3.5 text-slate-400"></i> 45.2 KB
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 卡片 2: 已分析 (高价值) -->
+              <div class="group relative rounded-2xl border border-slate-200/80 bg-white hover:border-emerald-300 transition-all duration-300 cursor-pointer overflow-hidden flex" :class="[batchMode ? 'opacity-50 cursor-not-allowed' : '']">
+                <div class="absolute left-0 top-3 bottom-3 w-[4px] rounded-r-full bg-emerald-500 z-10 pointer-events-none"></div>
+                <div class="flex-1 p-5 pl-6 flex flex-col gap-3.5">
+                  <div class="flex items-start justify-between gap-4">
+                    <div class="space-y-2.5 flex-1">
+                      <div class="flex items-center gap-2">
+                        <n-tag size="small" type="success" :bordered="false" class="font-medium rounded bg-emerald-50 text-emerald-600 border border-emerald-100">高价值</n-tag>
+                        <n-tag size="small" type="info" :bordered="false" class="rounded">架构设计</n-tag>
+                      </div>
+                      <div>
+                        <h3 class="text-base font-semibold text-slate-800 leading-relaxed pr-4">
+                          Tauri + Vue3 跨端桌面应用的数据持久化方案与最佳实践
+                        </h3>
+                        <p class="text-[13px] text-slate-500 line-clamp-1 mt-1.5">
+                          讨论了如何使用 SQLite 配合 Tauri API 实现本地无缝的数据存储，并解决了并发写入的锁冲突问题。
+                        </p>
+                      </div>
+                      <div class="flex gap-2 pt-1">
+                        <span class="text-[10px] px-2 py-0.5 rounded-full bg-slate-100 text-slate-500 border border-slate-200">sqlite</span>
+                        <span class="text-[10px] px-2 py-0.5 rounded-full bg-slate-100 text-slate-500 border border-slate-200">tauri</span>
+                        <span class="text-[10px] px-2 py-0.5 rounded-full bg-slate-100 text-slate-500 border border-slate-200">rust</span>
+                      </div>
+                    </div>
+                    <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-200 shrink-0" v-if="!batchMode" @click.stop>
+                      <n-button secondary size="small" class="rounded-lg">
+                        <template #icon><i data-lucide="book-open" class="w-4 h-4"></i></template>
+                        查看笔记
+                      </n-button>
+                    </div>
+                  </div>
+                  <div class="flex flex-wrap items-center gap-x-5 gap-y-2 text-[12px] text-slate-500 pt-3.5 border-t border-slate-100">
+                    <span class="flex items-center gap-1.5 font-medium text-slate-700 bg-slate-100/50 px-2 py-1 rounded-md">
+                      <i data-lucide="folder" class="w-3.5 h-3.5 text-slate-400"></i> xunji-desktop
+                    </span>
+                    <span class="flex items-center gap-1.5">
+                      <i data-lucide="clock" class="w-3.5 h-3.5 text-slate-400"></i> 2 小时前
+                    </span>
+                    <span class="flex items-center gap-1.5">
+                      <i data-lucide="message-circle" class="w-3.5 h-3.5 text-slate-400"></i> 34 条对话
+                    </span>
+                    <span class="flex items-center gap-1.5 text-slate-400 font-mono bg-slate-50 px-1.5 py-0.5 rounded border border-slate-100">
+                      <i data-lucide="terminal" class="w-3 h-3"></i> claude-code
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 卡片 3: 已分析 (无价值) -->
+              <div class="group relative rounded-2xl border border-slate-200/50 bg-slate-50/80 transition-all duration-300 overflow-hidden flex opacity-85 hover:opacity-100" :class="[batchMode ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer hover:border-slate-300']">
+                <div class="flex-1 p-5 flex flex-col gap-3">
+                  <div class="flex items-start justify-between gap-4">
+                    <div class="space-y-2 flex-1">
+                      <div class="flex items-center gap-2">
+                        <span class="text-[11px] font-medium px-2 py-0.5 rounded border border-slate-200 text-slate-400 bg-white">⚠ 无价值</span>
+                      </div>
+                      <div>
+                        <h3 class="text-[15px] font-medium text-slate-600 line-clamp-1 italic pr-4">
+                          npm install error: ERESOLVE unable to resolve dependency tree
+                        </h3>
+                        <p class="text-[12px] text-slate-400 line-clamp-1 italic mt-1">暂无摘要，纯报错排查</p>
+                      </div>
+                    </div>
+                    <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-200 shrink-0" v-if="!batchMode" @click.stop>
+                      <n-button text size="small" class="text-slate-500 hover:text-slate-700">
+                        <template #icon><i data-lucide="messages-square" class="w-4 h-4"></i></template>
+                        看对话
+                      </n-button>
+                    </div>
+                  </div>
+                  <div class="flex flex-wrap items-center gap-x-5 gap-y-2 text-[12px] text-slate-400 pt-3 border-t border-slate-200/60">
+                    <span class="flex items-center gap-1.5">
+                      <i data-lucide="folder" class="w-3.5 h-3.5"></i> xunji-desktop
+                    </span>
+                    <span class="flex items-center gap-1.5">
+                      <i data-lucide="clock" class="w-3.5 h-3.5"></i> 昨天 14:30
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+          <!-- ========== 知识库视图 (重新设计，与会话记录风格对齐) ========== -->
+          <div v-if="activeTab === 'library'">
+            
+            <!-- 顶部工具栏: 标题与操作并排 -->
+            <div class="flex items-center justify-between mb-6">
+              <div>
+                <h2 class="text-xl font-bold text-slate-800">知识库</h2>
+                <div class="text-xs text-slate-500 mt-1">共 <strong class="text-slate-700">10</strong> 条记录 · 当前{{ libraryView === 'list' ? '列表' : '卡片' }}视图</div>
+              </div>
+              
+              <div class="flex items-center gap-3">
+                <!-- 全选与清除选择整合为一个按钮 -->
+                <n-button 
+                  v-if="selected.length > 0"
+                  text 
+                  class="px-3 py-1.5 text-slate-500 hover:text-slate-700 text-sm transition-colors rounded hover:bg-slate-100" 
+                  @click="selected = []"
+                >
+                  清除选择 ({{ selected.length }})
+                </n-button>
+                <n-button 
+                  v-else
+                  text 
+                  class="px-3 py-1.5 text-slate-600 hover:text-slate-800 text-sm transition-colors rounded hover:bg-slate-100" 
+                  @click="toggleSelectAll(true)"
+                >
+                  全选当页
+                </n-button>
+                
+                <n-button secondary size="small" class="rounded-md" :disabled="selected.length === 0">
+                  <template #icon><i data-lucide="download" class="w-3.5 h-3.5"></i></template>
+                  导出所选
+                </n-button>
+                <n-button type="primary" size="small" class="rounded-md">
+                  <template #icon><i data-lucide="archive" class="w-3.5 h-3.5"></i></template>
+                  导出全部笔记
+                </n-button>
+
+                <div class="w-px h-4 bg-slate-200 mx-1"></div>
+
+                <!-- 视图切换 -->
+                <div class="bg-slate-200/70 p-1 rounded-lg inline-flex">
+                  <button @click="libraryView = 'list'" :class="['px-4 py-1.5 rounded-md text-sm font-medium transition-colors duration-200 flex items-center gap-1.5', libraryView === 'list' ? 'bg-white text-slate-800 ring-1 ring-slate-200/90' : 'text-slate-500 hover:text-slate-800']">
+                    <i data-lucide="list" class="w-3.5 h-3.5"></i> 列表
+                  </button>
+                  <button @click="libraryView = 'card'" :class="['px-4 py-1.5 rounded-md text-sm font-medium transition-colors duration-200 flex items-center gap-1.5', libraryView === 'card' ? 'bg-white text-slate-800 ring-1 ring-slate-200/90' : 'text-slate-500 hover:text-slate-800']">
+                    <i data-lucide="layout-grid" class="w-3.5 h-3.5"></i> 卡片
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <!-- 卡片列表 (卡片视图) -->
+            <div v-show="libraryView === 'card'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 pb-32">
+              <div v-for="item in knowledgeList" :key="item.id"
+                   class="group relative rounded-2xl border bg-white transition-all duration-300 cursor-pointer overflow-hidden flex flex-col"
+                   :class="[selected.includes(item.id) ? 'ring-2 ring-emerald-500 border-transparent bg-emerald-50/20' : 'border-slate-200/80 hover:border-emerald-300', item.isLowValue ? 'opacity-90 hover:opacity-100' : '']"
+                   @click="toggleSelect(item.id)">
+                <div class="p-5 flex-1 flex flex-col gap-3">
+                  <div class="flex items-start justify-between">
+                    <div class="flex items-center gap-2 flex-wrap">
+                      <n-tag v-for="tag in item.tags" :key="tag.label" size="small" :type="tag.type" :bordered="false" class="font-medium rounded" :class="tag.class">{{ tag.label }}</n-tag>
+                    </div>
+                    <div class="shrink-0" @click.stop>
+                      <n-checkbox :checked="selected.includes(item.id)" @update:checked="toggleSelect(item.id)" size="small"></n-checkbox>
+                    </div>
+                  </div>
+                  
+                  <div class="flex-1">
+                    <h3 class="text-base font-semibold text-slate-800 leading-snug group-hover:text-emerald-700 transition-colors">
+                      {{ item.title }}
+                    </h3>
+                    <p class="text-[13px] text-slate-500 line-clamp-3 mt-2 leading-relaxed" :class="{ 'italic': item.isLowValue }">
+                      {{ item.summary }}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="px-5 py-3.5 bg-slate-50/50 border-t border-slate-100 flex flex-col gap-2.5">
+                  <div class="flex items-center justify-between text-[12px]">
+                    <span class="flex items-center gap-1.5 font-medium text-slate-700 bg-white px-2 py-0.5 rounded border border-slate-200">
+                      <i data-lucide="folder" class="w-3.5 h-3.5 text-slate-400"></i> {{ item.project }}
+                    </span>
+                    <span class="flex items-center gap-1.5 text-slate-400 font-mono bg-white px-1.5 py-0.5 rounded border border-slate-200">
+                      <i :data-lucide="item.agentIcon" class="w-3 h-3"></i> {{ item.agent }}
+                    </span>
+                  </div>
+                  <div class="flex items-center justify-between text-[11px] text-slate-400 mt-1">
+                    <span class="flex items-center gap-1.5"><i data-lucide="clock" class="w-3 h-3"></i> {{ item.time }}</span>
+                    <span class="opacity-0 group-hover:opacity-100 transition-opacity font-medium text-emerald-600 flex items-center gap-1">
+                      阅读笔记 <i data-lucide="arrow-right" class="w-3 h-3"></i>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 卡片列表 (列表视图) -->
+            <div v-show="libraryView === 'list'" class="space-y-4 pb-32">
+              <div v-for="item in knowledgeList" :key="'list-'+item.id"
+                   class="group relative rounded-xl border bg-white shadow-sm hover:shadow-md transition-all duration-300 cursor-pointer overflow-hidden flex items-center"
+                   :class="[selected.includes(item.id) ? 'ring-2 ring-emerald-500 border-transparent bg-emerald-50/20' : 'border-slate-200/80 hover:border-emerald-300', item.isLowValue ? 'opacity-90 hover:opacity-100' : '']"
+                   @click="toggleSelect(item.id)">
+                <div class="pl-4 shrink-0" @click.stop>
+                  <n-checkbox :checked="selected.includes(item.id)" @update:checked="toggleSelect(item.id)" size="small"></n-checkbox>
+                </div>
+                  
+                <div class="flex-1 p-4 flex items-center gap-4">
+                  <div class="flex-1 min-w-0">
+                    <div class="flex items-center gap-2 mb-1">
+                      <n-tag v-for="tag in item.tags" :key="tag.label" size="small" :type="tag.type" :bordered="false" class="font-medium rounded" :class="tag.class">{{ tag.label }}</n-tag>
+                      <h3 class="text-[15px] font-semibold text-slate-800 truncate transition-colors" :class="item.isLowValue ? 'group-hover:text-slate-900 font-medium' : 'group-hover:text-emerald-700'">
+                        {{ item.title }}
+                      </h3>
+                    </div>
+                    <p class="text-[13px] text-slate-500 truncate" :class="{ 'italic': item.isLowValue }">
+                      {{ item.summary }}
+                    </p>
+                  </div>
+                  
+                  <div class="flex items-center gap-4 shrink-0 text-[12px] text-slate-400">
+                    <span class="flex items-center gap-1.5 w-24">
+                      <i data-lucide="folder" class="w-3.5 h-3.5"></i> {{ item.project }}
+                    </span>
+                    <span class="flex items-center gap-1.5 w-24">
+                      <i :data-lucide="item.agentIcon" class="w-3 h-3"></i> {{ item.agent }}
+                    </span>
+                    <span class="flex items-center gap-1.5 w-32">
+                      <i data-lucide="clock" class="w-3.5 h-3.5"></i> {{ item.time }}
+                    </span>
+                  </div>
+                  
+                  <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-200 shrink-0 w-24 flex justify-end">
+                    <n-button secondary size="small" class="rounded-lg shadow-sm">
+                      <template #icon><i data-lucide="book-open" class="w-4 h-4"></i></template>
+                      阅读笔记
+                    </n-button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+        <!-- 优化 4. 批量操作条现代化: 引入底部悬浮操作条 (FAB) - 会话列表独有 -->
+        <transition 
+          enter-active-class="transition ease-out duration-300 transform" 
+          enter-from-class="translate-y-24 opacity-0" 
+          enter-to-class="translate-y-0 opacity-100" 
+          leave-active-class="transition ease-in duration-200 transform" 
+          leave-from-class="translate-y-0 opacity-100" 
+          leave-to-class="translate-y-24 opacity-0"
+        >
+          <div v-show="activeTab === 'sessions' && batchMode" class="absolute bottom-8 left-0 right-0 flex justify-center z-50 pointer-events-none">
+            <div class="glass-bar rounded-full p-2 pl-5 flex items-center gap-5 pointer-events-auto transition-all shadow-xl shadow-emerald-900/5">
+              <!-- 已选状态区 -->
+              <div class="flex items-center gap-3 border-r border-slate-200/80 pr-4">
+                <n-checkbox :checked="isAllSelected" @update:checked="toggleSelectAll"></n-checkbox>
+                <span class="text-sm font-semibold text-slate-700 w-[60px]">已选 <span class="text-emerald-600">{{ selected.length }}</span> 项</span>
+              </div>
+              <!-- 操作按钮区 -->
+              <div class="flex items-center gap-2">
+                <n-button type="primary" round size="large" class="px-6 shadow-md shadow-emerald-500/20" :disabled="selected.length === 0">
+                  <template #icon><i data-lucide="sparkles" class="w-4 h-4"></i></template>
+                  开始分析
+                </n-button>
+                <n-button round size="large" secondary class="px-6" @click="batchMode = false; selected = []">
+                  取消
+                </n-button>
+              </div>
+            </div>
+          </div>
+        </transition>
+        
+      </main>
+    </div>
+  </div>
+
+  <script>
+    const { createApp, ref, onMounted, nextTick, watch } = Vue;
+
+    createApp({
+      setup() {
+        const activeTab = ref('library'); // 默认展示知识库看看效果
+        const libraryView = ref('card'); // 默认卡片视图
+        const searchQuery = ref('');
+        const filterStatus = ref('all');
+        const batchMode = ref(false);
+        const selected = ref([]);
+
+        const knowledgeList = ref([
+          {
+            id: 1,
+            title: 'Rust SQLite 数据模型设计',
+            summary: '实现 Rust 数据模型对应 SQLite schema，处理 serde 序列化与轻量级摘要结构',
+            tags: [
+              { label: '实现', type: 'info', class: 'bg-slate-100 text-slate-600' },
+              { label: '高价值', type: 'success', class: 'bg-emerald-50 text-emerald-600 border-emerald-100' }
+            ],
+            project: 'xunji',
+            agent: 'cursor',
+            agentIcon: 'mouse-pointer-click',
+            time: '2026-03-21 12:16',
+            isLowValue: false
+          },
+          {
+            id: 2,
+            title: 'Rust Tauri 数据库会话管理实现',
+            summary: '在 Tauri 桌面应用中实现会话和消息的完整 CRUD 操作及分页查询',
+            tags: [
+              { label: '实现', type: 'info', class: 'bg-slate-100 text-slate-600' },
+              { label: '高价值', type: 'success', class: 'bg-emerald-50 text-emerald-600 border-emerald-100' }
+            ],
+            project: 'xunji',
+            agent: 'cursor',
+            agentIcon: 'mouse-pointer-click',
+            time: '2026-03-21 12:15',
+            isLowValue: false
+          },
+          {
+            id: 3,
+            title: 'AMP 工具使用问题排查',
+            summary: '尝试使用 AMP 工具与 codex-internal 和 gemini-internal 打招呼时遇到的连接问题',
+            tags: [
+              { label: '调试', type: 'info', class: 'bg-slate-100 text-slate-600' },
+              { label: '低价值', type: 'warning', class: 'bg-amber-50 text-amber-600 border-amber-100' }
+            ],
+            project: 'multi-agent',
+            agent: 'claude-code',
+            agentIcon: 'terminal',
+            time: '2026-03-21 12:12',
+            isLowValue: true
+          }
+        ]);
+
+        const isAllSelected = Vue.computed(() => {
+          return selected.value.length > 0 && selected.value.length >= 3; // demo 假设当页有 3 条
+        });
+
+        const toggleSelect = (id) => {
+          if (selected.value.includes(id)) {
+            selected.value = selected.value.filter(i => i !== id);
+          } else {
+            selected.value.push(id);
+          }
+        };
+
+        const toggleSelectAll = (checked) => {
+          if (checked) {
+            selected.value = [1, 2, 3]; // demo 中知识库有3条卡片
+          } else {
+            selected.value = [];
+          }
+        };
+
+        // 刷新图标
+        const updateIcons = () => {
+          nextTick(() => {
+            lucide.createIcons();
+          });
+        };
+
+        onMounted(() => {
+          updateIcons();
+        });
+
+        watch([activeTab, libraryView, batchMode, selected], () => {
+          updateIcons();
+        });
+
+        return {
+          activeTab,
+          libraryView,
+          searchQuery,
+          filterStatus,
+          batchMode,
+          selected,
+          knowledgeList,
+          isAllSelected,
+          toggleSelect,
+          toggleSelectAll
+        }
+      }
+    }).use(naive).mount('#app');
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\345\210\206\346\256\265\346\216\247\344\273\266-WebView\345\216\237\347\224\237button\351\273\230\350\256\244\346\240\267\345\274\217.md" "b/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\345\210\206\346\256\265\346\216\247\344\273\266-WebView\345\216\237\347\224\237button\351\273\230\350\256\244\346\240\267\345\274\217.md"
new file mode 100644
index 0000000..85fe188
--- /dev/null
+++ "b/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\345\210\206\346\256\265\346\216\247\344\273\266-WebView\345\216\237\347\224\237button\351\273\230\350\256\244\346\240\267\345\274\217.md"
@@ -0,0 +1,75 @@
+# 踩坑：Tauri / WebView 下分段条用原生 `<button>` 未选中项像「实心灰块」
+
+## 问题 / 背景
+
+在桌面端用 **Tailwind / Uno 工具类** 做顶栏 Tab、会话列表状态筛选等 **分段控件**（segmented control）时，设计稿期望：**仅外层轨道有浅灰底，未选中项透明、仅文字偏灰；选中项白底 + 细 ring**。实际在 Tauri 窗口里未选中按钮却像 **单独一块灰/白实心 pill**，暗色模式下甚至出现 **未选中比选中更亮** 的颠倒层次。
+
+---
+
+## 现象
+
+- **浅色**：未选中的「对话记录 / 知识库」或「全部会话 / 待分析 / 已分析」呈 **明显实心中灰背景**，与 `design/ui_demo.html` 里扁平分段不一致。
+- **深色**：未选中项 **偏亮灰/白底**，选中项反而是深色块，视觉焦点反了。
+- **复现**：`apps/desktop` 内使用 **原生 `<button>`** + Uno 类名、**未** 引入完整 CSS reset/preflight 时，在 **Tauri + WebKit/WKWebView** 中易复现；普通浏览器中表现可能较轻。
+
+---
+
+## 根因
+
+1. **用户代理（UA）默认按钮外观**  
+   WebView 对未覆盖样式的 `<button>` 会套用 **系统按钮皮肤**（背景色、立体边框等），优先级与「你以为只有文字色」的意图冲突。
+
+2. **项目未使用会统一「抹平」按钮的全局 reset**  
+   入口仅 `import 'virtual:uno.css'`，**preset-uno 不等价于** Tailwind 的完整 **preflight**（不会默认给所有 `button` 设 `background-color: transparent` 等）。因此不能假设「没写背景就是透明」。
+
+3. **未显式声明未选中背景**  
+   若只写 `text-slate-500` 而不写 **`bg-transparent`**，在部分环境下仍可能看到 UA 提供的底色。
+
+4. **暗色 + 系统按钮**  
+   `color-scheme` / 系统主题下，UA 按钮可能呈现 **浅色块**，与自研 `dark:bg-neutral-*` 的选中 pill 叠加后层次错乱。
+
+```text
+  设计意图                    WebView 实际（未处理时）
+  ─────────                   ────────────────────────
+  [ 轨道灰 ][透明][透明]  →    [ 轨道灰 ][灰块][灰块]
+       ↑选中白+ring              ↑选中深 + 未选「亮块」
+```
+
+---
+
+## 解决方法（本项目已采用）
+
+1. **对分段条内按钮单独去外观**（避免影响 Naive UI 的 `n-button`）  
+   在 `App.vue` 全局样式中增加仅作用于 **带类名** 的按钮，例如：
+
+   - `button.segment-pill-btn { -webkit-appearance: none; appearance: none; margin: 0; font: inherit; }`
+
+2. **分段按钮类名约定**  
+   - 使用 `type="button"`，避免表单内被当成 submit。  
+   - 挂 `segment-pill-btn`，并加 **`bg-transparent`**（未选中）、**`border-0`** 等。  
+   - 选中态再用 `bg-white`、`ring-1 ring-slate-200/90`（与 `design/ui_demo.html` 一致时可去掉 `shadow-sm`）。
+
+3. **暗色模式单独调色**  
+   轨道与选中 pill 使用同一套语义（如轨道 `dark:bg-neutral-900/55`、选中 `dark:bg-neutral-800`），未选中 **保持透明 + 较低对比文字色**，避免「未选中更亮」。
+
+**相关代码位置：**
+
+- `apps/desktop/src/App.vue` — `button.segment-pill-btn`
+- `apps/desktop/src/components/TopBar.vue` — 顶栏 Tab
+- `apps/desktop/src/components/SessionToolbar.vue` — 会话状态分段筛选
+- `apps/desktop/src/views/KnowledgeView.vue` — 知识库「列表 / 卡片」视图切换
+
+---
+
+## 后续如何避免
+
+- **新增自定义分段条**：一律使用 **`segment-pill-btn` + 未选中 `bg-transparent`**，或改用 **Naive UI** 自带分段能力（如 `n-tabs` / `n-radio-group` 等），避免裸 `button` 依赖 UA。  
+- **可选**：在 `main.ts` 引入 `@unocss/reset/tailwind.css`（或等价 preflight）前，先在页面内 **检查 `n-button` 是否仍正常**，再决定是否全站启用。  
+- **暂无** 自动化测试；依赖 Code Review 与视觉验收。
+
+---
+
+## 相关文档
+
+- 同目录：[桌面应用-脚手架-UnoCSS-Tauri与存储层常见问题.md](./桌面应用-脚手架-UnoCSS-Tauri与存储层常见问题.md)（Uno/Tauri 脚手架与其它问题）
+- 设计对照：`design/ui_demo.html` 顶栏 Tab 分段注释（ring 代替 shadow-sm）
diff --git "a/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\350\204\232\346\211\213\346\236\266-UnoCSS-Tauri\344\270\216\345\255\230\345\202\250\345\261\202\345\270\270\350\247\201\351\227\256\351\242\230.md" "b/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\350\204\232\346\211\213\346\236\266-UnoCSS-Tauri\344\270\216\345\255\230\345\202\250\345\261\202\345\270\270\350\247\201\351\227\256\351\242\230.md"
index 18fb235..a0c2817 100644
--- "a/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\350\204\232\346\211\213\346\236\266-UnoCSS-Tauri\344\270\216\345\255\230\345\202\250\345\261\202\345\270\270\350\247\201\351\227\256\351\242\230.md"
+++ "b/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\350\204\232\346\211\213\346\236\266-UnoCSS-Tauri\344\270\216\345\255\230\345\202\250\345\261\202\345\270\270\350\247\201\351\227\256\351\242\230.md"
@@ -221,6 +221,7 @@ env_logger::Builder::from_env(
 
 ## 相关文档
 
+- [桌面应用-分段控件-WebView原生button默认样式.md](./桌面应用-分段控件-WebView原生button默认样式.md) — 分段条原生 `<button>` 在 WebView 下的灰底与暗色层次问题
 - [troubleshooting-unocss-icons-missing.md](./troubleshooting-unocss-icons-missing.md) — 构建后图标全丢、Node `styleText`、Bun `--bun`
 - [桌面应用-提炼-CLI-路径与环境变量.md](./桌面应用-提炼-CLI-路径与环境变量.md) — 桌面进程 PATH、CLI 绝对路径
 - [monorepo-混用包管理器.md](./monorepo-混用包管理器.md) — 锁文件与依赖一致性

From 7bc10135deebc34b8becb7e8668a7842350540c5 Mon Sep 17 00:00:00 2001
From: stevelliu <stevelliu@tencent.com>
Date: Wed, 25 Mar 2026 15:54:11 +0800
Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=8A=80?=
 =?UTF-8?q?=E6=9C=AF=E6=A0=88=E7=AD=9B=E9=80=89=E5=8A=9F=E8=83=BD=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=9F=A5=E8=AF=86=E5=BA=93=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 Sidebar 组件中新增技术栈切换功能，允许用户选择多个技术栈进行筛选。
- 更新 filters store，添加 selectedTechStacks 状态以管理选中的技术栈。
- 修改 API 调用，支持技术栈参数传递，确保与后端一致。
- 在 KnowledgeView 组件中实现技术栈的动态筛选与重置功能，提升用户交互体验。
- 优化知识库筛选面板，整合类型、标签和技术栈的显示与操作，增强可用性。
---
 apps/desktop/src-tauri/src/commands/cards.rs |   4 +
 apps/desktop/src-tauri/src/storage/cards.rs  |  26 +-
 apps/desktop/src-tauri/src/storage/models.rs |   2 +
 apps/desktop/src/components/Sidebar.vue      | 303 +++++++++++++------
 apps/desktop/src/lib/tauri.ts                |   2 +
 apps/desktop/src/stores/filters.ts           |   6 +-
 apps/desktop/src/types/index.ts              |   4 +
 apps/desktop/src/views/KnowledgeView.vue     |  70 ++++-
 8 files changed, 314 insertions(+), 103 deletions(-)

diff --git a/apps/desktop/src-tauri/src/commands/cards.rs b/apps/desktop/src-tauri/src/commands/cards.rs
index eeeeadc..1443630 100644
--- a/apps/desktop/src-tauri/src/commands/cards.rs
+++ b/apps/desktop/src-tauri/src/commands/cards.rs
@@ -15,6 +15,7 @@ pub async fn search_cards(
     query: String,
     tags: Option<Vec<String>>,
     card_type: Option<String>,
+    tech_stack: Option<Vec<String>>,
 ) -> Result<Vec<CardSummary>, String> {
     let db = state.db.clone();
     let filters = CardFilters {
@@ -22,6 +23,7 @@ pub async fn search_cards(
         card_type,
         value: None,
         search: None,
+        tech_stack,
     };
     tokio::task::spawn_blocking(move || db.search_cards(&query, &filters).map_err(|e| e.to_string()))
         .await
@@ -35,6 +37,7 @@ pub async fn list_cards(
     tags: Option<Vec<String>>,
     card_type: Option<String>,
     value: Option<String>,
+    tech_stack: Option<Vec<String>>,
     page: Option<u32>,
     page_size: Option<u32>,
 ) -> Result<PaginatedResult<CardSummary>, String> {
@@ -44,6 +47,7 @@ pub async fn list_cards(
         card_type,
         value,
         search: None,
+        tech_stack,
     };
     let page = page.unwrap_or(1).max(1);
     let page_size = page_size.unwrap_or(20).max(1).min(200);
diff --git a/apps/desktop/src-tauri/src/storage/cards.rs b/apps/desktop/src-tauri/src/storage/cards.rs
index 0f5f73b..019dc70 100644
--- a/apps/desktop/src-tauri/src/storage/cards.rs
+++ b/apps/desktop/src-tauri/src/storage/cards.rs
@@ -72,10 +72,9 @@ fn card_from_row(row: &Row<'_>) -> rusqlite::Result<Card> {
 //
 // 被 list_cards 和 search_cards 共用。
 //
-// 标签筛选使用 AND 语义（必须同时包含所有指定标签）：
-//   SELECT card_id FROM card_tags
-//   JOIN tags ... WHERE name IN (...)
-//   GROUP BY card_id HAVING COUNT(DISTINCT name) = N
+// 标签、技术栈筛选均为 AND 语义（须同时满足）：
+// - 标签：card_tags 子查询 HAVING COUNT(DISTINCT name) = N
+// - 技术栈：cards.tech_stack 为逗号串，对每项用 instr 边界匹配（大小写不敏感）
 
 /// 根据 CardFilters 构建 WHERE 子句和参数列表
 pub(super) fn build_card_where(filters: &CardFilters) -> (String, Vec<String>) {
@@ -110,6 +109,25 @@ pub(super) fn build_card_where(filters: &CardFilters) -> (String, Vec<String>) {
         }
     }
 
+    // 技术栈存为逗号分隔字符串；用边界匹配避免子串误命中（如 go / golang）
+    if let Some(ref stacks) = filters.tech_stack {
+        let unique: Vec<&String> = {
+            let mut seen = std::collections::HashSet::new();
+            stacks
+                .iter()
+                .filter(|s| !s.trim().is_empty())
+                .filter(|s| seen.insert(*s))
+                .collect()
+        };
+        for s in unique {
+            conds.push(
+                "instr(',' || lower(ifnull(c.tech_stack, '')) || ',', ',' || lower(?) || ',') > 0"
+                    .to_string(),
+            );
+            params.push(s.clone());
+        }
+    }
+
     let where_sql = if conds.is_empty() {
         String::new()
     } else {
diff --git a/apps/desktop/src-tauri/src/storage/models.rs b/apps/desktop/src-tauri/src/storage/models.rs
index df03efb..ee71c33 100644
--- a/apps/desktop/src-tauri/src/storage/models.rs
+++ b/apps/desktop/src-tauri/src/storage/models.rs
@@ -383,4 +383,6 @@ pub struct CardFilters {
     pub value: Option<String>,
     /// FTS5 全文搜索关键词
     pub search: Option<String>,
+    /// 按技术栈名称筛选（AND 语义；与 `cards.tech_stack` 逗号分隔字段逐 token 匹配，大小写不敏感）
+    pub tech_stack: Option<Vec<String>>,
 }
diff --git a/apps/desktop/src/components/Sidebar.vue b/apps/desktop/src/components/Sidebar.vue
index 2c033b2..093cfc9 100644
--- a/apps/desktop/src/components/Sidebar.vue
+++ b/apps/desktop/src/components/Sidebar.vue
@@ -1,6 +1,16 @@
 <script setup lang="ts">
 import { computed, h, onMounted, ref, watch } from 'vue'
-import { NTree, NEmpty, NSpin, NTooltip, NButton, useDialog, useMessage } from 'naive-ui'
+import {
+  NTree,
+  NEmpty,
+  NSpin,
+  NTooltip,
+  NButton,
+  NCollapse,
+  NCollapseItem,
+  useDialog,
+  useMessage,
+} from 'naive-ui'
 import type { TreeOption } from 'naive-ui'
 import { useUiStore } from '../stores/ui'
 import { useFiltersStore } from '../stores/filters'
@@ -380,6 +390,30 @@ function toggleTag(tagName: string) {
   }
 }
 
+/** 技术栈 chip 切换（与标签同为多选 AND，写入 filters.selectedTechStacks） */
+function toggleTechStack(name: string) {
+  const idx = filters.selectedTechStacks.indexOf(name)
+  if (idx >= 0) {
+    filters.selectedTechStacks.splice(idx, 1)
+  } else {
+    filters.selectedTechStacks.push(name)
+  }
+}
+
+/** 知识库：是否存在生效筛选，用于展示「重置筛选」 */
+const libraryFiltersActive = computed(
+  () =>
+    !!filters.cardType
+    || filters.selectedTags.length > 0
+    || filters.selectedTechStacks.length > 0,
+)
+
+/**
+ * 知识库筛选折叠面板：默认全展开；display-directive=if 折叠时卸载内容减轻 DOM。
+ * 不设置 max-height / overflow-y，仅由侧栏最外层滚动。
+ */
+const libraryCollapseExpanded = ref<string[]>(['cardType', 'tags', 'techStack'])
+
 // ────────────────── 初始化与 Tab 切换时刷新 ──────────────────
 
 onMounted(() => {
@@ -401,7 +435,8 @@ watch(() => ui.activeTab, (tab) => {
 </script>
 
 <template>
-  <aside class="shrink-0 flex flex-col w-[260px] bg-white dark:bg-neutral-950 border-r border-slate-200 dark:border-neutral-800 select-none">
+  <!-- min-h-0：参与 flex 布局时让内层 overflow-y-auto 能正确截断高度，单滚动条生效 -->
+  <aside class="shrink-0 flex flex-col min-h-0 w-[260px] bg-white dark:bg-neutral-950 border-r border-slate-200 dark:border-neutral-800 select-none">
     <div class="flex-1 overflow-y-auto">
 
       <!-- ============== 对话记录模式 ============== -->
@@ -509,103 +544,156 @@ watch(() => ui.activeTab, (tab) => {
 
       <!-- ============== 知识库模式 ============== -->
       <template v-else>
-        <div class="flex-1 overflow-y-auto p-4 space-y-6">
-          <!-- 类型筛选 -->
-          <div>
-            <div class="text-[11px] font-semibold text-slate-400 dark:text-neutral-500 uppercase tracking-widest mb-3 flex items-center gap-1.5">
-              <span class="i-lucide-layout-grid w-3.5 h-3.5" />
-              类型
-            </div>
-            <div class="flex flex-wrap gap-2">
-              <span
-                :class="[
-                  'px-2.5 py-1 rounded-full text-xs font-medium cursor-pointer transition-colors',
-                  !filters.cardType
-                    ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800/60'
-                    : 'text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-neutral-700 hover:bg-slate-50 dark:hover:bg-neutral-800'
-                ]"
-                @click="filters.cardType = ''"
-              >
-                全部 <span class="opacity-60 ml-0.5 text-[10px]">{{ totalCards }}</span>
-              </span>
-              <span
-                v-for="t in sidebar.cardTypes"
-                :key="t.name"
-                :class="[
-                  'px-2.5 py-1 rounded-full text-xs cursor-pointer transition-colors',
-                  filters.cardType === t.name
-                    ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800/60 font-medium'
-                    : 'text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-neutral-700 hover:bg-slate-50 dark:hover:bg-neutral-800'
-                ]"
-                @click="selectCardType(t.name)"
-              >
-                {{ getCardTypeLabel(t.name) }} <span class="opacity-60 ml-0.5 text-[10px]">{{ t.count }}</span>
-              </span>
-            </div>
-          </div>
-
-          <div class="h-px bg-slate-100 dark:bg-neutral-800" />
-
-          <!-- 标签筛选 -->
-          <div>
-            <div class="text-[11px] font-semibold text-slate-400 dark:text-neutral-500 uppercase tracking-widest mb-3 flex items-center gap-1.5">
-              <span class="i-lucide-tags w-3.5 h-3.5" />
-              标签
-            </div>
-            <div v-if="sidebar.tagsLoading" class="flex items-center justify-center py-4">
-              <n-spin size="small" />
-            </div>
-            <div
-              v-else-if="sidebar.tags.length"
-              class="flex flex-wrap gap-1.5 max-h-64 overflow-y-auto pr-0.5"
-            >
-              <span
-                v-for="tag in sidebar.tags"
-                :key="tag.name"
-                :class="[
-                  'px-2.5 py-1 rounded-full text-xs cursor-pointer transition-colors',
-                  filters.selectedTags.includes(tag.name)
-                    ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800/60 font-medium'
-                    : 'text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-neutral-700 hover:bg-slate-50 dark:hover:bg-neutral-800'
-                ]"
-                @click="toggleTag(tag.name)"
-              >
-                {{ tag.name }} <span class="opacity-50 ml-0.5 text-[10px]">{{ tag.count }}</span>
-              </span>
-            </div>
-            <n-empty v-else size="small" description="暂无标签" class="py-2" />
+        <!-- 不单独 overflow：与外层 aside 共用一个滚动条，避免类型/标签/技术栈多重竖条 -->
+        <div class="p-4 pb-6 space-y-6">
+          <!-- 有筛选时提供一键重置，避免类型/标签/技术栈分散清除 -->
+          <div
+            v-if="libraryFiltersActive"
+            class="flex items-center justify-between gap-2 rounded-lg border border-slate-200 dark:border-neutral-800 bg-slate-50/80 dark:bg-neutral-900/50 px-2.5 py-2"
+          >
+            <span class="text-[11px] text-slate-500 dark:text-neutral-400 leading-snug">已应用筛选</span>
+            <n-button size="tiny" secondary class="shrink-0" @click="filters.resetLibrary()">
+              重置
+            </n-button>
           </div>
 
-          <div class="h-px bg-slate-100 dark:bg-neutral-800" />
-
-          <!-- 技术栈 -->
-          <div>
-            <div class="text-[11px] font-semibold text-slate-400 dark:text-neutral-500 uppercase tracking-widest mb-3 flex items-center gap-1.5">
-              <span class="i-lucide-layers w-3.5 h-3.5" />
-              技术栈
-            </div>
-            <div v-if="sidebar.tagsLoading" class="flex items-center justify-center py-3">
-              <n-spin size="small" />
-            </div>
-            <div
-              v-else-if="sidebar.techStacks.length"
-              class="flex flex-wrap gap-1.5 max-h-52 overflow-y-auto pr-0.5"
-            >
-              <span
-                v-for="row in sidebar.techStacks"
-                :key="row.name"
-                class="px-2.5 py-1 rounded-full text-xs font-medium text-blue-700 dark:text-blue-400 bg-blue-50 dark:bg-blue-950/40 cursor-pointer"
-              >
-                {{ row.name }} <span class="opacity-60 ml-0.5 text-[10px]">{{ row.count }}</span>
-              </span>
-            </div>
-            <p v-else class="text-[11px] text-slate-400 dark:text-neutral-500 py-2 leading-relaxed">
-              暂无。需会话经提炼写入 tech_stack；排查终端
-              <code class="text-[10px] opacity-90">normalize: tech_stack</code>
-              与
-              <code class="text-[10px] opacity-90">创建卡片: … tech_stack列</code>
-            </p>
-          </div>
+          <!-- 类型 / 标签 / 技术栈：n-collapse 折叠；不设内层滚动，仅侧栏最外层 overflow-y-auto -->
+          <n-collapse
+            v-model:expanded-names="libraryCollapseExpanded"
+            display-directive="if"
+            :accordion="false"
+            size="small"
+            class="library-filters-collapse -mx-1"
+          >
+            <n-collapse-item name="cardType">
+              <template #header>
+                <div class="flex items-center gap-1.5 min-w-0 flex-1 pr-1">
+                  <span class="i-lucide-layout-grid w-3.5 h-3.5 shrink-0 opacity-70" />
+                  <span class="text-[11px] font-semibold text-slate-500 dark:text-neutral-400 uppercase tracking-widest">
+                    类型
+                  </span>
+                  <span
+                    v-if="filters.cardType"
+                    class="truncate text-[10px] font-medium text-emerald-600 dark:text-emerald-400 normal-case tracking-normal"
+                  >
+                    {{ getCardTypeLabel(filters.cardType) }}
+                  </span>
+                </div>
+              </template>
+              <p class="text-[10px] text-slate-400 dark:text-neutral-500 mb-2 leading-relaxed">
+                单选；点「全部」或已选类型可恢复不限类型。
+              </p>
+              <div class="flex flex-wrap gap-2">
+                <span
+                  :class="[
+                    'px-2.5 py-1 rounded-full text-xs font-medium cursor-pointer transition-colors',
+                    !filters.cardType
+                      ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800/60'
+                      : 'text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-neutral-700 hover:bg-slate-50 dark:hover:bg-neutral-800',
+                  ]"
+                  @click="filters.cardType = ''"
+                >
+                  全部 <span class="opacity-60 ml-0.5 text-[10px]">{{ totalCards }}</span>
+                </span>
+                <span
+                  v-for="t in sidebar.cardTypes"
+                  :key="t.name"
+                  :class="[
+                    'px-2.5 py-1 rounded-full text-xs cursor-pointer transition-colors',
+                    filters.cardType === t.name
+                      ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800/60 font-medium'
+                      : 'text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-neutral-700 hover:bg-slate-50 dark:hover:bg-neutral-800',
+                  ]"
+                  @click="selectCardType(t.name)"
+                >
+                  {{ getCardTypeLabel(t.name) }} <span class="opacity-60 ml-0.5 text-[10px]">{{ t.count }}</span>
+                </span>
+              </div>
+            </n-collapse-item>
+
+            <n-collapse-item name="tags">
+              <template #header>
+                <div class="flex items-center gap-1.5 min-w-0 flex-1 pr-1">
+                  <span class="i-lucide-tags w-3.5 h-3.5 shrink-0 opacity-70" />
+                  <span class="text-[11px] font-semibold text-slate-500 dark:text-neutral-400 uppercase tracking-widest">
+                    标签
+                  </span>
+                  <span
+                    v-if="filters.selectedTags.length"
+                    class="text-[10px] font-medium text-emerald-600 dark:text-emerald-400 normal-case tracking-normal tabular-nums"
+                  >
+                    {{ filters.selectedTags.length }} 项
+                  </span>
+                </div>
+              </template>
+              <p class="text-[10px] text-slate-400 dark:text-neutral-500 mb-2 leading-relaxed">
+                多选为「且」：笔记须同时包含所选标签。
+              </p>
+              <div v-if="sidebar.tagsLoading" class="flex items-center justify-center py-4">
+                <n-spin size="small" />
+              </div>
+              <div v-else-if="sidebar.tags.length" class="flex flex-wrap gap-1.5">
+                <span
+                  v-for="tag in sidebar.tags"
+                  :key="tag.name"
+                  :class="[
+                    'px-2.5 py-1 rounded-full text-xs cursor-pointer transition-colors',
+                    filters.selectedTags.includes(tag.name)
+                      ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800/60 font-medium'
+                      : 'text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-neutral-700 hover:bg-slate-50 dark:hover:bg-neutral-800',
+                  ]"
+                  @click="toggleTag(tag.name)"
+                >
+                  {{ tag.name }} <span class="opacity-50 ml-0.5 text-[10px]">{{ tag.count }}</span>
+                </span>
+              </div>
+              <n-empty v-else size="small" description="暂无标签" class="py-2" />
+            </n-collapse-item>
+
+            <n-collapse-item name="techStack">
+              <template #header>
+                <div class="flex items-center gap-1.5 min-w-0 flex-1 pr-1">
+                  <span class="i-lucide-layers w-3.5 h-3.5 shrink-0 opacity-70" />
+                  <span class="text-[11px] font-semibold text-slate-500 dark:text-neutral-400 uppercase tracking-widest">
+                    技术栈
+                  </span>
+                  <span
+                    v-if="filters.selectedTechStacks.length"
+                    class="text-[10px] font-medium text-sky-600 dark:text-sky-400 normal-case tracking-normal tabular-nums"
+                  >
+                    {{ filters.selectedTechStacks.length }} 项
+                  </span>
+                </div>
+              </template>
+              <p class="text-[10px] text-slate-400 dark:text-neutral-500 mb-2 leading-relaxed">
+                多选为「且」：笔记的 tech_stack 须同时包含所选项（大小写不敏感）。
+              </p>
+              <div v-if="sidebar.tagsLoading" class="flex items-center justify-center py-3">
+                <n-spin size="small" />
+              </div>
+              <div v-else-if="sidebar.techStacks.length" class="flex flex-wrap gap-1.5">
+                <span
+                  v-for="row in sidebar.techStacks"
+                  :key="row.name"
+                  :class="[
+                    'px-2.5 py-1 rounded-full text-xs cursor-pointer transition-colors',
+                    filters.selectedTechStacks.includes(row.name)
+                      ? 'bg-sky-50 dark:bg-sky-950/40 text-sky-700 dark:text-sky-300 border border-sky-200 dark:border-sky-800/60 font-medium'
+                      : 'text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-neutral-700 hover:bg-slate-50 dark:hover:bg-neutral-800',
+                  ]"
+                  @click="toggleTechStack(row.name)"
+                >
+                  {{ row.name }} <span class="opacity-50 ml-0.5 text-[10px]">{{ row.count }}</span>
+                </span>
+              </div>
+              <p v-else class="text-[11px] text-slate-400 dark:text-neutral-500 py-2 leading-relaxed">
+                暂无。需会话经提炼写入 tech_stack；排查终端
+                <code class="text-[10px] opacity-90">normalize: tech_stack</code>
+                与
+                <code class="text-[10px] opacity-90">创建卡片: … tech_stack列</code>
+              </p>
+            </n-collapse-item>
+          </n-collapse>
         </div>
       </template>
 
@@ -641,4 +729,25 @@ watch(() => ui.activeTab, (tab) => {
   display: inline-block;
   flex-shrink: 0;
 }
+
+/* 知识库折叠：面板内容随侧栏整体滚动，禁止 Naive 内部再出现滚动条 */
+.library-filters-collapse :deep(.n-collapse-item__content-wrapper) {
+  overflow: visible !important;
+}
+.library-filters-collapse :deep(.n-collapse-item__content-inner) {
+  overflow: visible !important;
+  max-height: none !important;
+  padding-top: 0;
+  padding-bottom: 10px;
+}
+.library-filters-collapse :deep(.n-collapse-item__header) {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+.library-filters-collapse :deep(.n-collapse-item:not(:first-child)) {
+  border-top: 1px solid rgb(241 245 249);
+}
+.dark .library-filters-collapse :deep(.n-collapse-item:not(:first-child)) {
+  border-top-color: rgb(38 38 38);
+}
 </style>
diff --git a/apps/desktop/src/lib/tauri.ts b/apps/desktop/src/lib/tauri.ts
index e7c8c24..f0ea912 100644
--- a/apps/desktop/src/lib/tauri.ts
+++ b/apps/desktop/src/lib/tauri.ts
@@ -85,6 +85,7 @@ export const api = {
       query: params.query,
       tags: params.tags ?? null,
       cardType: params.cardType ?? null,
+      techStack: params.techStack ?? null,
     }),
 
   /** 分页查询知识卡片列表 */
@@ -93,6 +94,7 @@ export const api = {
       tags: params.tags ?? null,
       cardType: params.cardType ?? null,
       value: params.value ?? null,
+      techStack: params.techStack ?? null,
       page: params.page ?? null,
       pageSize: params.pageSize ?? null,
     }),
diff --git a/apps/desktop/src/stores/filters.ts b/apps/desktop/src/stores/filters.ts
index 442d994..ded36ed 100644
--- a/apps/desktop/src/stores/filters.ts
+++ b/apps/desktop/src/stores/filters.ts
@@ -24,8 +24,10 @@ export const useFiltersStore = defineStore('filters', () => {
   // ── 知识库筛选 ──
   /** 知识类型筛选（存英文枚举键，与 `CARD_TYPE_LABELS` / getCardTypeLabel 一致） */
   const cardType = ref('')
-  /** 选中的标签列表 */
+  /** 选中的标签列表（list_cards 为 AND：笔记须同时带有所选标签） */
   const selectedTags = ref<string[]>([])
+  /** 选中的技术栈名称（与 list_tags 统计同源；AND 语义） */
+  const selectedTechStacks = ref<string[]>([])
 
   /** 重置对话记录筛选（点击"全部对话"时） */
   function resetSessions() {
@@ -39,6 +41,7 @@ export const useFiltersStore = defineStore('filters', () => {
   function resetLibrary() {
     cardType.value = ''
     selectedTags.value = []
+    selectedTechStacks.value = []
   }
 
   /** 全部重置 */
@@ -54,6 +57,7 @@ export const useFiltersStore = defineStore('filters', () => {
     statusFilter,
     cardType,
     selectedTags,
+    selectedTechStacks,
     resetSessions,
     resetLibrary,
     reset,
diff --git a/apps/desktop/src/types/index.ts b/apps/desktop/src/types/index.ts
index 81ff841..98dc975 100644
--- a/apps/desktop/src/types/index.ts
+++ b/apps/desktop/src/types/index.ts
@@ -182,12 +182,16 @@ export interface SearchCardsParams {
   query: string
   tags?: string[] | null
   cardType?: string | null
+  /** 技术栈名称列表，AND 语义，与 list_cards 一致 */
+  techStack?: string[] | null
 }
 
 export interface ListCardsParams {
   tags?: string[] | null
   cardType?: string | null
   value?: string | null
+  /** 技术栈名称列表，AND 语义（卡片 tech_stack 字段需同时包含所选项） */
+  techStack?: string[] | null
   page?: number
   pageSize?: number
 }
diff --git a/apps/desktop/src/views/KnowledgeView.vue b/apps/desktop/src/views/KnowledgeView.vue
index 47ee391..6de9206 100644
--- a/apps/desktop/src/views/KnowledgeView.vue
+++ b/apps/desktop/src/views/KnowledgeView.vue
@@ -52,6 +52,7 @@ async function load() {
     const r = await api.listCards({
       cardType: filters.cardType || undefined,
       tags: filters.selectedTags.length ? [...filters.selectedTags] : undefined,
+      techStack: filters.selectedTechStacks.length ? [...filters.selectedTechStacks] : undefined,
       page: page.value,
       pageSize: pageSize.value,
     })
@@ -69,13 +70,39 @@ onMounted(() => {
 })
 
 watch(
-  [() => filters.cardType, () => filters.selectedTags.length],
+  [
+    () => filters.cardType,
+    () => filters.selectedTags.length,
+    () => filters.selectedTechStacks.length,
+  ],
   () => {
     page.value = 1
     void load()
   },
 )
 
+/** 主区域展示用：是否与侧栏共同存在知识库筛选 */
+const hasLibraryFilters = computed(
+  () =>
+    !!filters.cardType
+    || filters.selectedTags.length > 0
+    || filters.selectedTechStacks.length > 0,
+)
+
+function removeTagFilter(name: string) {
+  const i = filters.selectedTags.indexOf(name)
+  if (i >= 0) {
+    filters.selectedTags.splice(i, 1)
+  }
+}
+
+function removeTechFilter(name: string) {
+  const i = filters.selectedTechStacks.indexOf(name)
+  if (i >= 0) {
+    filters.selectedTechStacks.splice(i, 1)
+  }
+}
+
 function open(c: CardSummary) {
   void router.push({
     name: 'session-detail',
@@ -241,6 +268,47 @@ function onExportAll() {
       </div>
     </header>
 
+    <!-- 与侧栏筛选联动：在主区域可摘除条件，无需回到侧栏 -->
+    <div
+      v-if="hasLibraryFilters"
+      class="shrink-0 flex flex-wrap items-center gap-2 mb-3 pb-3 border-b border-slate-100 dark:border-neutral-800"
+    >
+      <span class="text-[11px] text-slate-500 dark:text-neutral-400">当前筛选</span>
+      <n-tag
+        v-if="filters.cardType"
+        size="small"
+        closable
+        round
+        @close="filters.cardType = ''"
+      >
+        类型 · {{ getCardTypeLabel(filters.cardType) }}
+      </n-tag>
+      <n-tag
+        v-for="t in filters.selectedTags"
+        :key="'kf-tag-' + t"
+        size="small"
+        closable
+        round
+        @close="removeTagFilter(t)"
+      >
+        标签 · {{ t }}
+      </n-tag>
+      <n-tag
+        v-for="s in filters.selectedTechStacks"
+        :key="'kf-tech-' + s"
+        size="small"
+        closable
+        round
+        type="info"
+        @close="removeTechFilter(s)"
+      >
+        技术栈 · {{ s }}
+      </n-tag>
+      <n-button size="tiny" quaternary @click="filters.resetLibrary()">
+        全部清除
+      </n-button>
+    </div>
+
     <!-- 内容区 -->
     <div class="flex-1 min-h-0 overflow-y-auto pb-32">
       <div v-if="loading" class="flex items-center justify-center py-24">

From 71dd0bc286275fe273b1efde9c6a2fd50ea78c0c Mon Sep 17 00:00:00 2001
From: stevelliu <stevelliu@tencent.com>
Date: Wed, 25 Mar 2026 15:54:24 +0800
Subject: [PATCH 3/9] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=20SessionCard=20?=
 =?UTF-8?q?=E5=92=8C=20SessionToolbar=20=E7=BB=84=E4=BB=B6=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=B8=8E=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整 SessionCard 组件的选中状态样式，使用 ring-inset 以避免裁剪问题。
- 修改 SessionToolbar 组件的底部间距，提升整体布局一致性。
- 更新会话列表标题和卡片列表的间距，增强视觉效果和用户体验。
- 细化标签和摘要的样式，提升信息展示的清晰度。
---
 apps/desktop/src/components/SessionCard.vue   | 87 ++++++++++++-------
 .../desktop/src/components/SessionToolbar.vue |  2 +-
 apps/desktop/src/views/SessionsView.vue       |  4 +-
 3 files changed, 59 insertions(+), 34 deletions(-)

diff --git a/apps/desktop/src/components/SessionCard.vue b/apps/desktop/src/components/SessionCard.vue
index 153f6c5..493189d 100644
--- a/apps/desktop/src/components/SessionCard.vue
+++ b/apps/desktop/src/components/SessionCard.vue
@@ -150,8 +150,9 @@ function formatSize(bytes: number): string {
  * 卡片样式
  */
 const cardClass = computed(() => {
+  // 批量选中：须用 ring-inset。根节点有 overflow-hidden 时，默认 ring 画在盒外会被裁掉，看起来像「描边/底色拉不全」
   if (props.selectable && props.selected) {
-    return 'ring-2 ring-emerald-500 border-transparent bg-emerald-50/20 dark:bg-emerald-950/20'
+    return 'ring-2 ring-inset ring-emerald-500 border-transparent bg-emerald-50/30 dark:bg-emerald-950/30'
   }
   if (isLowValue.value && isAnalyzed.value) {
     return 'opacity-85 bg-slate-50/80 dark:bg-neutral-900/60 border-slate-200/80 dark:border-neutral-700/60 hover:opacity-100 hover:border-slate-300 dark:hover:border-neutral-600'
@@ -162,21 +163,32 @@ const cardClass = computed(() => {
 
 <template>
   <div
-    class="group relative rounded-2xl border transition-all duration-300 cursor-pointer overflow-hidden flex"
-    :class="[cardClass, isSelectDisabled ? 'cursor-default opacity-60' : '']"
+    class="group relative border transition-all duration-300 cursor-pointer overflow-hidden flex"
+    :class="[
+      isAnalyzed ? 'rounded-2xl' : 'rounded-xl',
+      cardClass,
+      isSelectDisabled ? 'cursor-default opacity-60' : '',
+    ]"
     @click="openSession"
   >
-    <!-- 左侧高/中价值色条 -->
+    <!-- 左侧高/中价值色条（仅已分析且高/中价值） -->
     <div
       v-if="barColor"
-      class="absolute left-0 top-3 bottom-3 w-[4px] rounded-r-full z-10 pointer-events-none"
+      class="absolute left-0 top-2.5 bottom-2.5 w-[3px] rounded-r-full z-10 pointer-events-none"
       :style="{ backgroundColor: barColor }"
     />
 
-    <div class="flex-1 p-5" :class="barColor ? 'pl-6' : ''">
+    <!-- 未分析：更小内边距与纵向间距；已分析：略收紧 -->
+    <div
+      class="flex-1 min-w-0"
+      :class="[
+        isAnalyzed ? 'p-4' : 'p-3',
+        barColor ? 'pl-[18px]' : '',
+      ]"
+    >
       <!-- 头部：标签 + 操作按钮 -->
-      <div class="flex items-start justify-between gap-4">
-        <div class="space-y-2.5 flex-1 min-w-0">
+      <div class="flex items-start justify-between" :class="isAnalyzed ? 'gap-3' : 'gap-2'">
+        <div class="flex-1 min-w-0" :class="isAnalyzed ? 'space-y-2' : 'space-y-1'">
           <!-- 状态标签行 -->
           <div class="flex items-center gap-2 flex-wrap">
             <!-- 批量模式 checkbox -->
@@ -220,30 +232,30 @@ const cardClass = computed(() => {
             </template>
 
             <template v-else>
-              <!-- 未分析：待分析 / 来源标签 -->
+              <!-- 未分析：仅状态 + 来源两行标签，无笔记类型/技术标签区 -->
               <n-tag
                 size="small"
                 :bordered="false"
                 :type="session.status === 'analyzing' ? 'info'
                      : session.status === 'error' ? 'error'
                      : 'warning'"
-                class="rounded"
+                class="rounded !text-[11px]"
               >
                 {{ session.status === 'pending'   ? '待分析'
                  : session.status === 'analyzing' ? '分析中'
                  : session.status === 'error'     ? '失败'
                  : session.status }}
               </n-tag>
-              <n-tag size="small" :bordered="false" class="rounded">
+              <n-tag size="small" :bordered="false" class="rounded !text-[11px]">
                 {{ session.sourceId }}
               </n-tag>
             </template>
           </div>
 
-          <!-- 标题 -->
+          <!-- 标题（略小字号 + 紧行高，与摘要间距收窄以提升列表密度） -->
           <div>
             <h3
-              class="text-base font-semibold leading-relaxed pr-4"
+              class="font-semibold leading-snug pr-4"
               :class="isLowValue && isAnalyzed
                 ? 'text-slate-500 dark:text-slate-400 italic'
                 : 'text-slate-800 dark:text-slate-100'"
@@ -253,7 +265,7 @@ const cardClass = computed(() => {
             <!-- 摘要 -->
             <p
               v-if="isAnalyzed && session.cardSummary"
-              class="text-[13px] line-clamp-1 mt-1.5"
+              class="text-[14px] leading-snug line-clamp-1 mt-0.5"
               :class="isLowValue
                 ? 'text-slate-400 dark:text-slate-500 italic'
                 : 'text-slate-500 dark:text-slate-400'"
@@ -262,16 +274,16 @@ const cardClass = computed(() => {
             </p>
             <p
               v-else-if="!isAnalyzed"
-              class="text-[13px] text-slate-500 dark:text-slate-400 line-clamp-1 mt-1.5"
+              class="text-[14px] leading-snug text-slate-500 dark:text-slate-400 line-clamp-1 mt-0"
             >
               {{ session.status === 'error'
                 ? (session.errorMessage || '分析失败，点击查看详情或重试。')
-                : '原始对话，点击查看内容或进行知识提炼。' }}
+                : '点击预览或提炼为笔记' }}
             </p>
           </div>
 
-          <!-- 技术标签 -->
-          <div v-if="tagList.length" class="flex gap-2 pt-1">
+          <!-- 技术标签（来自卡片提炼，仅已分析展示） -->
+          <div v-if="isAnalyzed && tagList.length" class="flex flex-wrap gap-1.5 pt-0.5">
             <span
               v-for="tag in tagList"
               :key="tag"
@@ -314,30 +326,43 @@ const cardClass = computed(() => {
         </div>
       </div>
 
-      <!-- 底部元数据行 -->
-      <div class="flex flex-wrap items-center gap-x-5 gap-y-2 text-[12px] text-slate-500 dark:text-slate-400 pt-3.5 mt-3.5 border-t border-slate-100 dark:border-neutral-800">
-        <span class="flex items-center gap-1.5 font-medium text-slate-700 dark:text-slate-300 bg-slate-100/50 dark:bg-neutral-800/50 px-2 py-1 rounded-md">
-          <span class="i-lucide-folder w-3.5 h-3.5 text-slate-400 dark:text-slate-500" />
-          {{ session.projectName || session.projectPath || '未命名项目' }}
+      <!-- 底部元数据：容器 m/p 为 0，仅靠 border-t 与主区隔开；项间距用 gap -->
+      <div
+        class="m-0 p-0 flex flex-wrap items-center border-t border-slate-100 dark:border-neutral-800 text-slate-500 dark:text-slate-400"
+        :class="
+          isAnalyzed
+            ? 'gap-x-4 gap-y-1.5 text-[12px]'
+            : 'gap-x-2.5 gap-y-1 text-[11px]'
+        "
+      >
+        <span
+          class="flex items-center gap-1 font-medium text-slate-700 dark:text-slate-300 bg-slate-100/50 dark:bg-neutral-800/50 rounded-md max-w-[min(100%,14rem)] min-w-0"
+          :class="isAnalyzed ? 'px-2 py-1' : 'px-1.5 py-0.5'"
+        >
+          <span class="i-lucide-folder shrink-0 text-slate-400 dark:text-slate-500" :class="isAnalyzed ? 'w-3.5 h-3.5' : 'w-3 h-3'" />
+          <span class="truncate">{{ session.projectName || session.projectPath || '未命名项目' }}</span>
         </span>
         <n-tooltip trigger="hover" :delay="300">
           <template #trigger>
-            <span class="flex items-center gap-1.5 cursor-default">
-              <span class="i-lucide-clock w-3.5 h-3.5 text-slate-400 dark:text-slate-500" />
+            <span class="flex items-center gap-1 cursor-default shrink-0">
+              <span class="i-lucide-clock text-slate-400 dark:text-slate-500" :class="isAnalyzed ? 'w-3.5 h-3.5' : 'w-3 h-3'" />
               {{ relativeTime(session.updatedAt) }}
             </span>
           </template>
           {{ timeTooltip }}
         </n-tooltip>
-        <span class="flex items-center gap-1.5">
-          <span class="i-lucide-message-circle w-3.5 h-3.5 text-slate-400 dark:text-slate-500" />
-          {{ session.messageCount }} 条对话
+        <span class="flex items-center gap-1 shrink-0">
+          <span class="i-lucide-message-circle text-slate-400 dark:text-slate-500" :class="isAnalyzed ? 'w-3.5 h-3.5' : 'w-3 h-3'" />
+          {{ session.messageCount }} 条
         </span>
-        <span v-if="session.rawSizeBytes" class="flex items-center gap-1.5">
-          <span class="i-lucide-hard-drive w-3.5 h-3.5 text-slate-400 dark:text-slate-500" />
+        <span v-if="session.rawSizeBytes" class="flex items-center gap-1 shrink-0">
+          <span class="i-lucide-hard-drive text-slate-400 dark:text-slate-500" :class="isAnalyzed ? 'w-3.5 h-3.5' : 'w-3 h-3'" />
           {{ formatSize(session.rawSizeBytes) }}
         </span>
-        <span class="flex items-center gap-1.5 text-slate-400 dark:text-slate-500 font-mono bg-slate-50 dark:bg-neutral-800 px-1.5 py-0.5 rounded border border-slate-100 dark:border-neutral-700">
+        <span
+          v-if="isAnalyzed"
+          class="flex items-center gap-1 text-slate-400 dark:text-slate-500 font-mono bg-slate-50 dark:bg-neutral-800 px-1.5 py-0.5 rounded border border-slate-100 dark:border-neutral-700"
+        >
           <span :class="sourceIcon" class="w-3 h-3" />
           {{ session.sourceId }}
         </span>
diff --git a/apps/desktop/src/components/SessionToolbar.vue b/apps/desktop/src/components/SessionToolbar.vue
index 72ffea5..959bc4b 100644
--- a/apps/desktop/src/components/SessionToolbar.vue
+++ b/apps/desktop/src/components/SessionToolbar.vue
@@ -32,7 +32,7 @@ function setStatusFilter(val: '' | 'analyzed' | 'pending') {
 </script>
 
 <template>
-  <div class="flex flex-col gap-4 mb-8 shrink-0">
+  <div class="flex flex-col gap-4 mb-1 shrink-0">
     <!-- 搜索行 -->
     <div class="flex items-center gap-3">
       <n-input
diff --git a/apps/desktop/src/views/SessionsView.vue b/apps/desktop/src/views/SessionsView.vue
index fe0bf33..0548567 100644
--- a/apps/desktop/src/views/SessionsView.vue
+++ b/apps/desktop/src/views/SessionsView.vue
@@ -310,7 +310,7 @@ function openSearchHit(cardId: string, sessionId: string) {
 
       <template v-else>
         <!-- 列表标题行 -->
-        <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center justify-between mb-0">
           <h2 class="text-base font-semibold text-slate-800 dark:text-slate-100">会话列表</h2>
           <n-button
             v-if="unanalyzedCount > 0 && !batchMode"
@@ -331,7 +331,7 @@ function openSearchHit(cardId: string, sessionId: string) {
         </p>
 
         <!-- 会话卡片列表 -->
-        <div class="flex-1 min-h-0 overflow-y-auto space-y-4 pb-32">
+        <div class="flex-1 min-h-0 overflow-y-auto space-y-3 pb-32">
           <SessionCard
             v-for="s in sessions.items"
             :key="s.id"

From 163701884bd493db977c9c711941a46d81093521 Mon Sep 17 00:00:00 2001
From: stevelliu <stevelliu@tencent.com>
Date: Wed, 25 Mar 2026 16:00:48 +0800
Subject: [PATCH 4/9] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E8=B8=A9?=
 =?UTF-8?q?=E5=9D=91=E6=96=87=E6=A1=A3=EF=BC=8C=E6=96=B0=E5=A2=9E=E5=A4=9A?=
 =?UTF-8?q?=E4=B8=AA=E9=97=AE=E9=A2=98=E8=AE=B0=E5=BD=95=E4=B8=8E=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E6=96=B9=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 `踩坑` 目录中新增多个文档，涵盖不同技术栈和工具的常见问题及解决方案，包括 CLI JSON 解析失败、Monorepo 混用包管理器、Naive UI 替换后白屏等。
- 更新 `README.md`，提供文档命名规范和条目索引，便于用户查找和理解问题记录。
- 细化文件命名建议，确保以中文为主，便于检索与对齐代码。
---
 .cursor/skills/pitfall-documentation/SKILL.md |  5 +-
 .../reference-template.md                     |  3 +-
 ...31\346\263\225\345\267\256\345\274\202.md" |  0
 ...43\346\236\220\345\244\261\350\264\245.md" |  0
 ...05\347\256\241\347\220\206\345\231\250.md" |  0
 ...36\344\276\213\347\231\275\345\261\217.md" |  0
 "docs/\350\270\251\345\235\221/README.md"     | 32 ++++++++++
 ...6\236\234-role\350\257\206\345\210\253.md" |  0
 ...71\351\205\215\345\244\261\350\264\245.md" |  0
 ...76\346\240\207\344\270\242\345\244\261.md" |  0
 ...06\345\217\267\347\274\226\347\240\201.md" |  0
 ...32\346\213\237\350\241\250\345\220\215.md" |  0
 ...verflow-hidden\350\243\201\345\210\207.md" | 64 +++++++++++++++++++
 ...33\226analysis\346\240\207\351\242\230.md" |  0
 ...57\345\242\203\345\217\230\351\207\217.md" |  0
 ...70\350\247\201\351\227\256\351\242\230.md" |  9 +--
 16 files changed, 106 insertions(+), 7 deletions(-)
 rename "docs/\350\270\251\345\235\221/bun-run-vs-bun-bun-run.md" => "docs/\350\270\251\345\235\221/Bun-bun-run\345\221\275\344\273\244\345\206\231\346\263\225\345\267\256\345\274\202.md" (100%)
 rename "docs/\350\270\251\345\235\221/cli-llm-json-\350\247\243\346\236\220\345\244\261\350\264\245.md" => "docs/\350\270\251\345\235\221/CLI-LLM-JSON\350\247\243\346\236\220\345\244\261\350\264\245.md" (100%)
 rename "docs/\350\270\251\345\235\221/monorepo-\346\267\267\347\224\250\345\214\205\347\256\241\347\220\206\345\231\250.md" => "docs/\350\270\251\345\235\221/Monorepo-\346\267\267\347\224\250\345\214\205\347\256\241\347\220\206\345\231\250.md" (100%)
 rename "docs/\350\270\251\345\235\221/Naive-UI-\346\233\277\346\215\242\347\231\275\345\261\217-Vue\345\256\236\344\276\213\351\207\215\345\244\215.md" => "docs/\350\270\251\345\235\221/Naive-UI-Vue\351\207\215\345\244\215\345\256\236\344\276\213\347\231\275\345\261\217.md" (100%)
 create mode 100644 "docs/\350\270\251\345\235\221/README.md"
 rename "docs/\350\270\251\345\235\221/tool-result-role-\350\257\206\345\210\253.md" => "docs/\350\270\251\345\235\221/\345\267\245\345\205\267\347\273\223\346\236\234-role\350\257\206\345\210\253.md" (100%)
 rename "docs/\350\270\251\345\235\221/tool-result-\346\255\243\345\210\231\345\214\271\351\205\215\345\244\261\350\264\245.md" => "docs/\350\270\251\345\235\221/\345\267\245\345\205\267\347\273\223\346\236\234-\346\255\243\345\210\231\345\214\271\351\205\215\345\244\261\350\264\245.md" (100%)
 rename "docs/\350\270\251\345\235\221/troubleshooting-unocss-icons-missing.md" => "docs/\350\270\251\345\235\221/\346\236\204\345\273\272-UnoCSS-\347\224\237\344\272\247\346\236\204\345\273\272\345\233\276\346\240\207\344\270\242\345\244\261.md" (100%)
 rename "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-Cursor-\351\207\207\351\233\206-workspace\350\267\257\345\276\204\347\231\276\345\210\206\345\217\267\347\274\226\347\240\201.md" => "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-Cursor-workspace\350\267\257\345\276\204\347\231\276\345\210\206\345\217\267\347\274\226\347\240\201.md" (100%)
 rename "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-FTS5-MATCH-\345\277\205\351\241\273\347\224\250\350\231\232\346\213\237\350\241\250\345\220\215.md" => "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-SQLite-FTS5-MATCH\350\231\232\346\213\237\350\241\250\345\220\215.md" (100%)
 create mode 100644 "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-Tailwind-ring\344\270\216overflow-hidden\350\243\201\345\210\207.md"
 rename "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-sessions-\351\207\215\345\220\214\346\255\245\350\246\206\347\233\226analysis_title.md" => "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\344\274\232\350\257\235\351\207\215\345\220\214\346\255\245\350\246\206\347\233\226analysis\346\240\207\351\242\230.md" (100%)
 rename "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\346\217\220\347\202\274-CLI-\350\267\257\345\276\204\344\270\216\347\216\257\345\242\203\345\217\230\351\207\217.md" => "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\346\217\220\347\202\274-CLI\350\267\257\345\276\204\344\270\216\347\216\257\345\242\203\345\217\230\351\207\217.md" (100%)

diff --git a/.cursor/skills/pitfall-documentation/SKILL.md b/.cursor/skills/pitfall-documentation/SKILL.md
index bbbfaf8..1858aaf 100644
--- a/.cursor/skills/pitfall-documentation/SKILL.md
+++ b/.cursor/skills/pitfall-documentation/SKILL.md
@@ -30,10 +30,11 @@ description: 将已解决的问题整理为仓库内「踩坑」文档（问题
 
 ## 放在哪、怎么命名
 
-- **目录**：优先 `docs/踩坑/`（与仓库现有文档一致）。
+- **目录**：优先 `docs/踩坑/`（与仓库现有文档一致）。索引与命名约定见同目录 [README.md](../../../docs/踩坑/README.md)。
 - **新文件 vs 合并**：
   - 与已有某篇 **同一主题线**（如同一模块、同一子系统）→ **打开该文件**，在文末或合适位置 **新增小节**，并必要时更新文件顶部摘要句。
-  - 新领域或主题正交 → **新建** `领域-简短主题.md`。
+  - 新领域或主题正交 → **新建** Markdown 文件。
+- **文件名**：**以中文为主**概括主题，用连字符 `-` 分段（例：`桌面应用-脚手架-UnoCSS-Tauri与存储层常见问题.md`、`工具结果-正则匹配失败.md`）。技术专名可保留英文：`UnoCSS`、`Tauri`、`CLI`、`JSON`、`WebView`、`Tailwind`、`FTS5`、`MATCH` 等。
 - **标题风格**：可参考现有踩坑文：先 `# 踩坑：…`，再分「现象 / 根因 / 解决方法」。
 
 ## Agent 执行要点
diff --git a/.cursor/skills/pitfall-documentation/reference-template.md b/.cursor/skills/pitfall-documentation/reference-template.md
index 8cb6d03..ab79780 100644
--- a/.cursor/skills/pitfall-documentation/reference-template.md
+++ b/.cursor/skills/pitfall-documentation/reference-template.md
@@ -28,5 +28,6 @@
 
 ## 文件命名建议
 
-- 形式：`领域或应用名-主题关键词.md`，例如：`桌面应用-会话提炼-JSON解析与标签技术栈.md`。
+- **以中文为主**、`-` 分段；技术专名可保留英文（`UnoCSS`、`CLI`、`JSON` 等）。示例：`桌面应用-会话提炼-JSON解析与标签技术栈.md`。
+- 完整约定与索引见仓库 [`docs/踩坑/README.md`](../../../docs/踩坑/README.md)。
 - 同一主题持续踩坑：优先 **合并进已有文件** 为新 `##` / `###` 小节，避免碎片化。
diff --git "a/docs/\350\270\251\345\235\221/bun-run-vs-bun-bun-run.md" "b/docs/\350\270\251\345\235\221/Bun-bun-run\345\221\275\344\273\244\345\206\231\346\263\225\345\267\256\345\274\202.md"
similarity index 100%
rename from "docs/\350\270\251\345\235\221/bun-run-vs-bun-bun-run.md"
rename to "docs/\350\270\251\345\235\221/Bun-bun-run\345\221\275\344\273\244\345\206\231\346\263\225\345\267\256\345\274\202.md"
diff --git "a/docs/\350\270\251\345\235\221/cli-llm-json-\350\247\243\346\236\220\345\244\261\350\264\245.md" "b/docs/\350\270\251\345\235\221/CLI-LLM-JSON\350\247\243\346\236\220\345\244\261\350\264\245.md"
similarity index 100%
rename from "docs/\350\270\251\345\235\221/cli-llm-json-\350\247\243\346\236\220\345\244\261\350\264\245.md"
rename to "docs/\350\270\251\345\235\221/CLI-LLM-JSON\350\247\243\346\236\220\345\244\261\350\264\245.md"
diff --git "a/docs/\350\270\251\345\235\221/monorepo-\346\267\267\347\224\250\345\214\205\347\256\241\347\220\206\345\231\250.md" "b/docs/\350\270\251\345\235\221/Monorepo-\346\267\267\347\224\250\345\214\205\347\256\241\347\220\206\345\231\250.md"
similarity index 100%
rename from "docs/\350\270\251\345\235\221/monorepo-\346\267\267\347\224\250\345\214\205\347\256\241\347\220\206\345\231\250.md"
rename to "docs/\350\270\251\345\235\221/Monorepo-\346\267\267\347\224\250\345\214\205\347\256\241\347\220\206\345\231\250.md"
diff --git "a/docs/\350\270\251\345\235\221/Naive-UI-\346\233\277\346\215\242\347\231\275\345\261\217-Vue\345\256\236\344\276\213\351\207\215\345\244\215.md" "b/docs/\350\270\251\345\235\221/Naive-UI-Vue\351\207\215\345\244\215\345\256\236\344\276\213\347\231\275\345\261\217.md"
similarity index 100%
rename from "docs/\350\270\251\345\235\221/Naive-UI-\346\233\277\346\215\242\347\231\275\345\261\217-Vue\345\256\236\344\276\213\351\207\215\345\244\215.md"
rename to "docs/\350\270\251\345\235\221/Naive-UI-Vue\351\207\215\345\244\215\345\256\236\344\276\213\347\231\275\345\261\217.md"
diff --git "a/docs/\350\270\251\345\235\221/README.md" "b/docs/\350\270\251\345\235\221/README.md"
new file mode 100644
index 0000000..53dc469
--- /dev/null
+++ "b/docs/\350\270\251\345\235\221/README.md"
@@ -0,0 +1,32 @@
+# 踩坑文档说明
+
+本目录存放**已定位根因**且**有可验证修复**的问题记录（现象、根因、解决、预防）。编写规范见项目技能 `pitfall-documentation`。
+
+## 文件命名
+
+- **以中文描述主题**，用 `**-`** 连接层次（领域 / 子主题 / 关键词）。
+- **技术专名**可保留英文，便于检索与对齐代码：`UnoCSS`、`Tauri`、`CLI`、`JSON`、`WebView`、`Tailwind`、`FTS5`、`MATCH`、`role` 等。
+- 避免整文件名纯英文蛇形（如 ~~`desktop-foo-bar.md`~~），除非尚无稳定中文概括。
+
+## 条目索引（按文件名）
+
+
+| 文件                                                                                   | 概要                          |
+| ------------------------------------------------------------------------------------ | --------------------------- |
+| [Bun-bun-run命令写法差异.md](./Bun-bun-run命令写法差异.md)                                       | `bun run` 与嵌套 `bun bun run` |
+| [CLI-LLM-JSON解析失败.md](./CLI-LLM-JSON解析失败.md)                                         | CLI 产出 JSON 解析              |
+| [Monorepo-混用包管理器.md](./Monorepo-混用包管理器.md)                                           | 锁文件与依赖一致性                   |
+| [Naive-UI-Vue重复实例白屏.md](./Naive-UI-Vue重复实例白屏.md)                                     | 多份 Vue 运行时                  |
+| [工具结果-role识别.md](./工具结果-role识别.md)                                                   | tool result 角色识别            |
+| [工具结果-正则匹配失败.md](./工具结果-正则匹配失败.md)                                                   | tool result 正则              |
+| [构建-UnoCSS-生产构建图标丢失.md](./构建-UnoCSS-生产构建图标丢失.md)                                     | 生产构建图标空、Node `styleText`    |
+| [桌面应用-Cursor-workspace路径百分号编码.md](./桌面应用-Cursor-workspace路径百分号编码.md)                 | 采集路径编码                      |
+| [桌面应用-SQLite-FTS5-MATCH虚拟表名.md](./桌面应用-SQLite-FTS5-MATCH虚拟表名.md)                     | FTS5 MATCH 虚拟表              |
+| [桌面应用-Tailwind-ring与overflow-hidden裁切.md](./桌面应用-Tailwind-ring与overflow-hidden裁切.md) | `ring` 与 `overflow-hidden`  |
+| [桌面应用-会话提炼-JSON解析与标签技术栈.md](./桌面应用-会话提炼-JSON解析与标签技术栈.md)                             | 提炼 JSON / 标签 / 技术栈          |
+| [桌面应用-会话重同步覆盖analysis标题.md](./桌面应用-会话重同步覆盖analysis标题.md)                             | 重同步与 analysis 标题            |
+| [桌面应用-分段控件-WebView原生button默认样式.md](./桌面应用-分段控件-WebView原生button默认样式.md)               | WebView 原生按钮外观              |
+| [桌面应用-提炼-CLI路径与环境变量.md](./桌面应用-提炼-CLI路径与环境变量.md)                                     | 提炼 CLI 路径 / PATH            |
+| [桌面应用-脚手架-UnoCSS-Tauri与存储层常见问题.md](./桌面应用-脚手架-UnoCSS-Tauri与存储层常见问题.md)               | 脚手架、UnoCSS、Tauri、存储         |
+
+
diff --git "a/docs/\350\270\251\345\235\221/tool-result-role-\350\257\206\345\210\253.md" "b/docs/\350\270\251\345\235\221/\345\267\245\345\205\267\347\273\223\346\236\234-role\350\257\206\345\210\253.md"
similarity index 100%
rename from "docs/\350\270\251\345\235\221/tool-result-role-\350\257\206\345\210\253.md"
rename to "docs/\350\270\251\345\235\221/\345\267\245\345\205\267\347\273\223\346\236\234-role\350\257\206\345\210\253.md"
diff --git "a/docs/\350\270\251\345\235\221/tool-result-\346\255\243\345\210\231\345\214\271\351\205\215\345\244\261\350\264\245.md" "b/docs/\350\270\251\345\235\221/\345\267\245\345\205\267\347\273\223\346\236\234-\346\255\243\345\210\231\345\214\271\351\205\215\345\244\261\350\264\245.md"
similarity index 100%
rename from "docs/\350\270\251\345\235\221/tool-result-\346\255\243\345\210\231\345\214\271\351\205\215\345\244\261\350\264\245.md"
rename to "docs/\350\270\251\345\235\221/\345\267\245\345\205\267\347\273\223\346\236\234-\346\255\243\345\210\231\345\214\271\351\205\215\345\244\261\350\264\245.md"
diff --git "a/docs/\350\270\251\345\235\221/troubleshooting-unocss-icons-missing.md" "b/docs/\350\270\251\345\235\221/\346\236\204\345\273\272-UnoCSS-\347\224\237\344\272\247\346\236\204\345\273\272\345\233\276\346\240\207\344\270\242\345\244\261.md"
similarity index 100%
rename from "docs/\350\270\251\345\235\221/troubleshooting-unocss-icons-missing.md"
rename to "docs/\350\270\251\345\235\221/\346\236\204\345\273\272-UnoCSS-\347\224\237\344\272\247\346\236\204\345\273\272\345\233\276\346\240\207\344\270\242\345\244\261.md"
diff --git "a/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-Cursor-\351\207\207\351\233\206-workspace\350\267\257\345\276\204\347\231\276\345\210\206\345\217\267\347\274\226\347\240\201.md" "b/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-Cursor-workspace\350\267\257\345\276\204\347\231\276\345\210\206\345\217\267\347\274\226\347\240\201.md"
similarity index 100%
rename from "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-Cursor-\351\207\207\351\233\206-workspace\350\267\257\345\276\204\347\231\276\345\210\206\345\217\267\347\274\226\347\240\201.md"
rename to "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-Cursor-workspace\350\267\257\345\276\204\347\231\276\345\210\206\345\217\267\347\274\226\347\240\201.md"
diff --git "a/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-FTS5-MATCH-\345\277\205\351\241\273\347\224\250\350\231\232\346\213\237\350\241\250\345\220\215.md" "b/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-SQLite-FTS5-MATCH\350\231\232\346\213\237\350\241\250\345\220\215.md"
similarity index 100%
rename from "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-FTS5-MATCH-\345\277\205\351\241\273\347\224\250\350\231\232\346\213\237\350\241\250\345\220\215.md"
rename to "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-SQLite-FTS5-MATCH\350\231\232\346\213\237\350\241\250\345\220\215.md"
diff --git "a/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-Tailwind-ring\344\270\216overflow-hidden\350\243\201\345\210\207.md" "b/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-Tailwind-ring\344\270\216overflow-hidden\350\243\201\345\210\207.md"
new file mode 100644
index 0000000..f7b43a7
--- /dev/null
+++ "b/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-Tailwind-ring\344\270\216overflow-hidden\350\243\201\345\210\207.md"
@@ -0,0 +1,64 @@
+# 踩坑：Tailwind / Uno `ring` 与 `overflow-hidden` 同用导致描边/选中态「缺一块」
+
+## 问题 / 背景
+
+在会话列表等卡片上，用 **`ring-2` + `ring-emerald-500`** 表示批量选中，同时根节点为圆角使用了 **`overflow-hidden`**。界面上表现为：**绿色描边不完整、选中底色像被前景挡掉**，尤其在卡片四角或边缘更明显。
+
+---
+
+## 现象
+
+- 选中态高亮框 **断线、缺角**，或只有部分边可见。
+- 误以为子组件（`n-tag`、按钮等）**z-index 盖住**了选中背景；子组件不透明背景确实会遮住 **半透明底色**，但与 **整圈描边被裁切** 是两类问题，需分开排查。
+
+---
+
+## 根因
+
+Tailwind / Uno 的 **`ring`** 通过 **`box-shadow`** 画在元素 **边框盒外侧**（默认向外扩展）。  
+
+同一元素若设置了 **`overflow: hidden`**（含 `overflow-hidden` 工具类），**超出 padding edge 的阴影会被裁掉**，因此 `ring` 在视觉上不完整。
+
+```text
+  [ overflow:hidden 的卡片 ]
+  ┌────────────────────┐
+  │  ring 画在盒外 →   │ ← 外侧阴影被裁掉
+  └────────────────────┘
+```
+
+---
+
+## 解决方法
+
+任选其一（本项目会话卡片采用 **A**）：
+
+**A. 使用内描边 `ring-inset`**（推荐，圆角卡片常保留 `overflow-hidden`）
+
+- 选中类改为：`ring-2 ring-inset ring-emerald-500`，必要时略加强 `bg-*` 透明度以便辨认。
+
+**B. 去掉根节点 `overflow-hidden`**
+
+- 把裁切挪到 **不需要外扩 ring** 的内层子节点；需确认无子内容溢出圆角。
+
+**C. 不用 `ring`，改用 `outline` 或实线 `border`**
+
+- 需自行处理暗色模式与圆角一致性；`outline` 在部分浏览器下与 `border-radius` 表现仍要目检。
+
+**相关代码位置：**
+
+- `apps/desktop/src/components/SessionCard.vue` — 批量选中 `cardClass` 使用 `ring-inset`
+
+---
+
+## 后续如何避免
+
+- 卡片根节点若 **固定带 `overflow-hidden`**，选中/聚焦态 **不要用默认外向 `ring`**，应 **`ring-inset`** 或 **边框方案**。
+- Code Review 时：**`overflow-hidden` + `ring`** 同框出现 → 优先怀疑裁切。
+- **暂无** 自动化检测；依赖规范与审查。
+
+---
+
+## 相关文档
+
+- [桌面应用-分段控件-WebView原生button默认样式.md](./桌面应用-分段控件-WebView原生button默认样式.md) — 另涉及 `ring` 的 UI 语义（分段条扁平描边）
+- [桌面应用-脚手架-UnoCSS-Tauri与存储层常见问题.md](./桌面应用-脚手架-UnoCSS-Tauri与存储层常见问题.md)
diff --git "a/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-sessions-\351\207\215\345\220\214\346\255\245\350\246\206\347\233\226analysis_title.md" "b/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\344\274\232\350\257\235\351\207\215\345\220\214\346\255\245\350\246\206\347\233\226analysis\346\240\207\351\242\230.md"
similarity index 100%
rename from "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-sessions-\351\207\215\345\220\214\346\255\245\350\246\206\347\233\226analysis_title.md"
rename to "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\344\274\232\350\257\235\351\207\215\345\220\214\346\255\245\350\246\206\347\233\226analysis\346\240\207\351\242\230.md"
diff --git "a/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\346\217\220\347\202\274-CLI-\350\267\257\345\276\204\344\270\216\347\216\257\345\242\203\345\217\230\351\207\217.md" "b/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\346\217\220\347\202\274-CLI\350\267\257\345\276\204\344\270\216\347\216\257\345\242\203\345\217\230\351\207\217.md"
similarity index 100%
rename from "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\346\217\220\347\202\274-CLI-\350\267\257\345\276\204\344\270\216\347\216\257\345\242\203\345\217\230\351\207\217.md"
rename to "docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\346\217\220\347\202\274-CLI\350\267\257\345\276\204\344\270\216\347\216\257\345\242\203\345\217\230\351\207\217.md"
diff --git "a/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\350\204\232\346\211\213\346\236\266-UnoCSS-Tauri\344\270\216\345\255\230\345\202\250\345\261\202\345\270\270\350\247\201\351\227\256\351\242\230.md" "b/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\350\204\232\346\211\213\346\236\266-UnoCSS-Tauri\344\270\216\345\255\230\345\202\250\345\261\202\345\270\270\350\247\201\351\227\256\351\242\230.md"
index a0c2817..626299c 100644
--- "a/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\350\204\232\346\211\213\346\236\266-UnoCSS-Tauri\344\270\216\345\255\230\345\202\250\345\261\202\345\270\270\350\247\201\351\227\256\351\242\230.md"
+++ "b/docs/\350\270\251\345\235\221/\346\241\214\351\235\242\345\272\224\347\224\250-\350\204\232\346\211\213\346\236\266-UnoCSS-Tauri\344\270\216\345\255\230\345\202\250\345\261\202\345\270\270\350\247\201\351\227\256\351\242\230.md"
@@ -1,6 +1,6 @@
 # 踩坑：脚手架阶段 — UnoCSS、Tauri 布局、存储层与 CSP
 
-本文汇总在 **寻迹 v0.1 脚手架与 Phase 1～2（存储层）** 开发中遇到的典型问题：**现象 → 原因 → 解决办法**。与「图标在构建后全部丢失」相关的 Node/Bun 版本与 `node:util.styleText` 问题，见同目录 [troubleshooting-unocss-icons-missing.md](./troubleshooting-unocss-icons-missing.md)。
+本文汇总在 **寻迹 v0.1 脚手架与 Phase 1～2（存储层）** 开发中遇到的典型问题：**现象 → 原因 → 解决办法**。与「图标在构建后全部丢失」相关的 Node/Bun 版本与 `node:util.styleText` 问题，见同目录 [构建-UnoCSS-生产构建图标丢失.md](./构建-UnoCSS-生产构建图标丢失.md)。
 
 ---
 
@@ -221,10 +221,11 @@ env_logger::Builder::from_env(
 
 ## 相关文档
 
+- [桌面应用-Tailwind-ring与overflow-hidden裁切.md](./桌面应用-Tailwind-ring与overflow-hidden裁切.md) — `ring` 画在盒外时被 `overflow-hidden` 裁掉，选中描边不完整
 - [桌面应用-分段控件-WebView原生button默认样式.md](./桌面应用-分段控件-WebView原生button默认样式.md) — 分段条原生 `<button>` 在 WebView 下的灰底与暗色层次问题
-- [troubleshooting-unocss-icons-missing.md](./troubleshooting-unocss-icons-missing.md) — 构建后图标全丢、Node `styleText`、Bun `--bun`
-- [桌面应用-提炼-CLI-路径与环境变量.md](./桌面应用-提炼-CLI-路径与环境变量.md) — 桌面进程 PATH、CLI 绝对路径
-- [monorepo-混用包管理器.md](./monorepo-混用包管理器.md) — 锁文件与依赖一致性
+- [构建-UnoCSS-生产构建图标丢失.md](./构建-UnoCSS-生产构建图标丢失.md) — 构建后图标全丢、Node `styleText`、Bun `--bun`
+- [桌面应用-提炼-CLI路径与环境变量.md](./桌面应用-提炼-CLI路径与环境变量.md) — 桌面进程 PATH、CLI 绝对路径
+- [Monorepo-混用包管理器.md](./Monorepo-混用包管理器.md) — 锁文件与依赖一致性
 
 ---
 

From 6f299f2278d5e68267266b27c2207f8d033f5168 Mon Sep 17 00:00:00 2001
From: stevelliu <stevelliu@tencent.com>
Date: Wed, 25 Mar 2026 16:05:37 +0800
Subject: [PATCH 5/9] =?UTF-8?q?chore(release):=20=E5=8F=91=E5=B8=83=20v0.1?=
 =?UTF-8?q?.3=20=E7=89=88=E6=9C=AC=E4=B8=8E=E6=9B=B4=E6=96=B0=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 同步 package.json / Cargo.toml / CHANGELOG / app-changelog

Made-with: Cursor
---
 CHANGELOG.md                           | 18 ++++++++++++++++++
 apps/desktop/package.json              |  2 +-
 apps/desktop/src-tauri/Cargo.toml      |  2 +-
 apps/desktop/src/data/app-changelog.md | 18 ++++++++++++++++++
 docs/CHANGELOG.md                      | 15 +++++++++++++++
 5 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76ca9dd..d3172f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,24 @@
 
 > 面向使用者的更新说明。实现细节见 `docs/CHANGELOG.md`。
 
+## 0.1.3（2026-03-25）
+
+### 新增
+
+- **知识库筛选**：侧栏支持按 **技术栈** 多选筛选（与标签同为「且」关系），并与列表、全文搜索参数对齐；主区域可展示并快速清除当前筛选条件。
+- **侧栏体验**：知识库「类型 / 标签 / 技术栈」支持 **折叠面板**（`n-collapse`），减少多重滚动条。
+
+### 体验改进
+
+- **界面**：顶栏 Tab、会话状态分段、知识库视图切换等与 `design/ui_demo` 对齐；修复 WebView 下原生 **分段按钮** 系统灰底问题（`segment-pill-btn`）。
+- **会话列表**：会话卡片 **信息密度** 提升（标题与摘要更紧凑、未分析卡片更省高、底栏间距收紧）；批量选中描边改用 **内环**（`ring-inset`），避免与 `overflow-hidden` 裁切冲突。
+
+### 其他
+
+- **文档**：`docs/踩坑` 条目补充与整理（含 `ring`/`overflow-hidden`、踩坑文件名中文规范及 `README` 索引）。
+
+---
+
 ## 0.1.2（2026-03-22 – 2026-03-23）
 
 ### 新增
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 77f0f44..ca06fa4 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@xunji/desktop",
   "private": true,
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/apps/desktop/src-tauri/Cargo.toml b/apps/desktop/src-tauri/Cargo.toml
index f0cf002..69ea5f6 100644
--- a/apps/desktop/src-tauri/Cargo.toml
+++ b/apps/desktop/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "xunji-desktop"
-version = "0.1.2"
+version = "0.1.3"
 description = "寻迹 - AI 编程知识管理平台"
 authors = ["XunJi"]
 edition = "2021"
diff --git a/apps/desktop/src/data/app-changelog.md b/apps/desktop/src/data/app-changelog.md
index 76ca9dd..d3172f4 100644
--- a/apps/desktop/src/data/app-changelog.md
+++ b/apps/desktop/src/data/app-changelog.md
@@ -2,6 +2,24 @@
 
 > 面向使用者的更新说明。实现细节见 `docs/CHANGELOG.md`。
 
+## 0.1.3（2026-03-25）
+
+### 新增
+
+- **知识库筛选**：侧栏支持按 **技术栈** 多选筛选（与标签同为「且」关系），并与列表、全文搜索参数对齐；主区域可展示并快速清除当前筛选条件。
+- **侧栏体验**：知识库「类型 / 标签 / 技术栈」支持 **折叠面板**（`n-collapse`），减少多重滚动条。
+
+### 体验改进
+
+- **界面**：顶栏 Tab、会话状态分段、知识库视图切换等与 `design/ui_demo` 对齐；修复 WebView 下原生 **分段按钮** 系统灰底问题（`segment-pill-btn`）。
+- **会话列表**：会话卡片 **信息密度** 提升（标题与摘要更紧凑、未分析卡片更省高、底栏间距收紧）；批量选中描边改用 **内环**（`ring-inset`），避免与 `overflow-hidden` 裁切冲突。
+
+### 其他
+
+- **文档**：`docs/踩坑` 条目补充与整理（含 `ring`/`overflow-hidden`、踩坑文件名中文规范及 `README` 索引）。
+
+---
+
 ## 0.1.2（2026-03-22 – 2026-03-23）
 
 ### 新增
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 1112e9d..9086c4d 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -5,6 +5,21 @@
 
 ---
 
+## 0.1.3（2026-03-25）
+
+### 新增与优化
+
+- **知识库**：`CardFilters` / `list_cards` / `search_cards` 增加 `tech_stack` 筛选（AND；`cards.tech_stack` 逗号字段，`instr` 边界匹配、大小写不敏感）；前端 `filters.selectedTechStacks`、侧栏技术栈 chip 可切换、KnowledgeView 拉列表时传参
+- **侧栏**：知识库筛选区使用 `NCollapse` + `display-directive="if"`；去除标签/技术栈独立 `max-height` 滚动，统一由侧栏外层滚动；`:deep` 避免折叠内容区内部滚动条
+
+### 体验与修复
+
+- **分段控件**：`App.vue` 中 `button.segment-pill-btn` 去除 WebView 默认按钮外观；`TopBar`、`SessionToolbar`、`KnowledgeView` 统一分段样式与暗色变体
+- **SessionCard**：紧凑布局；选中态 `ring-inset`；底部元数据容器 `m-0 p-0`
+- **踩坑文档**：重命名为中文主文件名；新增 `docs/踩坑/README.md`；`ring` + `overflow-hidden` 裁切说明
+
+---
+
 ## 0.1.2（2026-03-22 – 2026-03-23）
 
 ### 新增与优化

From e802288cc1f31669c2a607df81607f0bafd45ffd Mon Sep 17 00:00:00 2001
From: stevelliu <stevelliu@tencent.com>
Date: Wed, 25 Mar 2026 16:06:53 +0800
Subject: [PATCH 6/9] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=20CHANGELOG?=
 =?UTF-8?q?=EF=BC=8C=E7=A7=BB=E9=99=A4=E5=86=97=E4=BD=99=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E6=9D=A1=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 删除 CHANGELOG 和 app-changelog 中的“其他”部分，简化内容以提高可读性。
- 确保更新日志专注于主要功能和修复，提升用户查阅体验。
---
 CHANGELOG.md                           | 4 ----
 apps/desktop/src/data/app-changelog.md | 4 ----
 2 files changed, 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d3172f4..72022b7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,10 +14,6 @@
 - **界面**：顶栏 Tab、会话状态分段、知识库视图切换等与 `design/ui_demo` 对齐；修复 WebView 下原生 **分段按钮** 系统灰底问题（`segment-pill-btn`）。
 - **会话列表**：会话卡片 **信息密度** 提升（标题与摘要更紧凑、未分析卡片更省高、底栏间距收紧）；批量选中描边改用 **内环**（`ring-inset`），避免与 `overflow-hidden` 裁切冲突。
 
-### 其他
-
-- **文档**：`docs/踩坑` 条目补充与整理（含 `ring`/`overflow-hidden`、踩坑文件名中文规范及 `README` 索引）。
-
 ---
 
 ## 0.1.2（2026-03-22 – 2026-03-23）
diff --git a/apps/desktop/src/data/app-changelog.md b/apps/desktop/src/data/app-changelog.md
index d3172f4..72022b7 100644
--- a/apps/desktop/src/data/app-changelog.md
+++ b/apps/desktop/src/data/app-changelog.md
@@ -14,10 +14,6 @@
 - **界面**：顶栏 Tab、会话状态分段、知识库视图切换等与 `design/ui_demo` 对齐；修复 WebView 下原生 **分段按钮** 系统灰底问题（`segment-pill-btn`）。
 - **会话列表**：会话卡片 **信息密度** 提升（标题与摘要更紧凑、未分析卡片更省高、底栏间距收紧）；批量选中描边改用 **内环**（`ring-inset`），避免与 `overflow-hidden` 裁切冲突。
 
-### 其他
-
-- **文档**：`docs/踩坑` 条目补充与整理（含 `ring`/`overflow-hidden`、踩坑文件名中文规范及 `README` 索引）。
-
 ---
 
 ## 0.1.2（2026-03-22 – 2026-03-23）

From 424e8fdd8b02f1ef1a1579b93b376b76699ea0e2 Mon Sep 17 00:00:00 2001
From: stevelliu <stevelliu@tencent.com>
Date: Wed, 25 Mar 2026 16:10:50 +0800
Subject: [PATCH 7/9] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=20release-pr-ta?=
 =?UTF-8?q?g=20=E6=96=87=E6=A1=A3=EF=BC=8C=E6=B7=BB=E5=8A=A0=20tauri.conf.?=
 =?UTF-8?q?json=20=E7=89=88=E6=9C=AC=E6=A3=80=E6=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 release-pr-tag 文档中新增对 `apps/desktop/src-tauri/tauri.conf.json` 中版本一致性的确认步骤。
- 将版本号从 0.1.2 更新至 0.1.3，确保文档与实际版本保持一致。
---
 .cursor/commands/release-pr-tag.md     | 2 +-
 apps/desktop/src-tauri/tauri.conf.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.cursor/commands/release-pr-tag.md b/.cursor/commands/release-pr-tag.md
index 87bbc48..2436a31 100644
--- a/.cursor/commands/release-pr-tag.md
+++ b/.cursor/commands/release-pr-tag.md
@@ -10,7 +10,7 @@ description: 从 release 分支发起合并 master 的 PR、打 v 标签并依
 ## 1. 前置检查
 
 - `git fetch origin && git status`，当前应在目标 **release 分支**（如 `release/v0.1.2`），工作区干净。
-- 确认版本与文档一致：`apps/desktop/package.json`、`apps/desktop/src-tauri/Cargo.toml` 中 `version`，以及根目录 `CHANGELOG.md` / `docs/CHANGELOG.md`。
+- 确认版本与文档一致：`apps/desktop/package.json`、`apps/desktop/src-tauri/Cargo.toml` 中 `version`，以及根目录 `CHANGELOG.md` / `docs/CHANGELOG.md`和`apps/desktop/src-tauri/tauri.conf.json`。
 - 校验关于页数据源与根目录 CHANGELOG 一致：在仓库根执行 `bun run sync:changelog`，再 `git diff apps/desktop/src/data/app-changelog.md` 应为空；若有差异则提交后再继续。
 
 ## 2. 确认合并关系（可选但推荐）
diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json
index d001c85..d037754 100644
--- a/apps/desktop/src-tauri/tauri.conf.json
+++ b/apps/desktop/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/tauri-apps/tauri/dev/crates/tauri-cli/schema.json",
   "productName": "寻迹",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "identifier": "com.xunji.app",
   "build": {
     "frontendDist": "../dist",

From 36bb6a6c3da9b5f72cae9462c45e860726b2400a Mon Sep 17 00:00:00 2001
From: stevelliu <stevelliu@tencent.com>
Date: Wed, 25 Mar 2026 16:21:57 +0800
Subject: [PATCH 8/9] =?UTF-8?q?style:=20=E7=BB=9F=E4=B8=80=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F=E4=B8=8E?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 SettingsModal 组件中，为按钮添加统一的圆角矩形样式，提升视觉一致性。
- 更新 SourceInfo 组件，优化数据源与时间信息的排版，增强可读性。
- 调整 KnowledgeView 组件的卡片与列表视图样式，确保选中态一致，避免裁切问题。
---
 apps/desktop/src/components/SettingsModal.vue | 20 ++++++--
 apps/desktop/src/components/SourceInfo.vue    | 49 ++++++++++++++++---
 apps/desktop/src/views/KnowledgeView.vue      |  8 +--
 3 files changed, 62 insertions(+), 15 deletions(-)

diff --git a/apps/desktop/src/components/SettingsModal.vue b/apps/desktop/src/components/SettingsModal.vue
index 61bb23a..eef4a92 100644
--- a/apps/desktop/src/components/SettingsModal.vue
+++ b/apps/desktop/src/components/SettingsModal.vue
@@ -268,7 +268,8 @@ const extraArgsStr = computed({
       aria-modal="true"
     >
       <template #header-extra>
-        <n-button quaternary circle size="small" @click="onClose">
+        <!-- 圆角矩形，与页内其它操作按钮一致 -->
+        <n-button quaternary size="small" class="settings-btn-rounded" @click="onClose">
           <span class="i-lucide-x w-4 h-4" />
         </n-button>
       </template>
@@ -282,7 +283,7 @@ const extraArgsStr = computed({
       <div v-else-if="errorMsg && !workingConfig" class="flex flex-col items-center gap-3 py-10 px-6">
         <span class="i-lucide-alert-circle w-8 h-8 text-red-400" />
         <p class="text-sm text-red-500 dark:text-red-400 text-center">{{ errorMsg }}</p>
-        <n-button size="small" @click="loadConfig">重新加载</n-button>
+        <n-button size="small" class="settings-btn-rounded" @click="loadConfig">重新加载</n-button>
       </div>
 
       <!--
@@ -301,6 +302,7 @@ const extraArgsStr = computed({
                 <div class="flex gap-2">
                   <n-button
                     size="small"
+                    class="settings-btn-rounded"
                     :type="distillerMode === 'api' ? 'primary' : 'default'"
                     @click="distillerMode = 'api'"
                   >
@@ -311,6 +313,7 @@ const extraArgsStr = computed({
                   </n-button>
                   <n-button
                     size="small"
+                    class="settings-btn-rounded"
                     :type="distillerMode === 'cli' ? 'primary' : 'default'"
                     @click="distillerMode = 'cli'"
                   >
@@ -403,6 +406,7 @@ const extraArgsStr = computed({
                         <n-button
                           size="small"
                           secondary
+                          class="settings-btn-rounded"
                           :loading="cliProbing"
                           @click="onProbeCli"
                         >
@@ -568,10 +572,11 @@ const extraArgsStr = computed({
           {{ successMsg }}
         </n-alert>
         <div class="flex justify-end gap-2">
-          <n-button size="small" @click="onClose">取消</n-button>
+          <n-button size="small" class="settings-btn-rounded" @click="onClose">取消</n-button>
           <n-button
             type="primary"
             size="small"
+            class="settings-btn-rounded"
             :loading="saving"
             :disabled="!workingConfig || saving"
             @click="onSave"
@@ -585,6 +590,15 @@ const extraArgsStr = computed({
 </template>
 
 <style scoped>
+/* Naive 默认按钮偏 pill；设置页统一为明显圆角矩形（覆盖组件内部圆角变量） */
+.settings-btn-rounded :deep(.n-button__border),
+.settings-btn-rounded :deep(.n-button__state-border) {
+  border-radius: 10px;
+}
+.settings-btn-rounded {
+  border-radius: 10px;
+}
+
 /* 关于页内嵌 Markdown：压缩标题层级，避免与上方元信息抢视觉 */
 .changelog-panel :deep(.md-body) {
   font-size: 0.8125rem;
diff --git a/apps/desktop/src/components/SourceInfo.vue b/apps/desktop/src/components/SourceInfo.vue
index ff7e22d..edf74ab 100644
--- a/apps/desktop/src/components/SourceInfo.vue
+++ b/apps/desktop/src/components/SourceInfo.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+/**
+ * 底部来源元信息：与 SessionDetailView 头部次要信息保持同类排版（图标 + 标签/数值分层）。
+ */
 defineProps<{
   sourceName: string | null
   projectName: string | null
@@ -14,11 +17,32 @@ defineProps<{
 </script>
 
 <template>
-  <div class="text-xs text-neutral-500 space-y-1 border-t border-neutral-200 dark:border-neutral-800 pt-3 mt-3">
-    <div>
-      💬 来自 {{ sourceName ?? '—' }} / {{ projectName ?? '—' }} · 📅 {{ createdAt?.slice(0, 16) }}
-    </div>
+  <div class="text-xs text-neutral-500 space-y-2 border-t border-neutral-200 dark:border-neutral-800 pt-3 mt-3">
+    <!-- 来源与时间：可换行，长项目名 hover 可看全 -->
     <div
+      class="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-[11px] text-neutral-500 dark:text-neutral-400"
+    >
+      <span class="inline-flex items-center gap-1.5 min-w-0 max-w-full">
+        <span class="i-lucide-messages-square w-3.5 h-3.5 shrink-0 opacity-80" aria-hidden="true" />
+        <span class="text-neutral-400 dark:text-neutral-500 shrink-0">数据源</span>
+        <span class="font-medium text-neutral-700 dark:text-neutral-200 truncate">
+          {{ sourceName ?? '—' }}
+        </span>
+        <span class="text-neutral-300 dark:text-neutral-600 shrink-0" aria-hidden="true">/</span>
+        <span
+          class="text-neutral-600 dark:text-neutral-300 truncate min-w-0"
+          :title="projectName || undefined"
+        >
+          <!-- {{ projectName ?? '—' }} -->
+          <span class="i-lucide-footprints w-5 h-5" />
+        </span>
+      </span>
+      <span class="inline-flex items-center gap-1.5 shrink-0 tabular-nums">
+        <span class="i-lucide-calendar w-3.5 h-3.5 opacity-80" aria-hidden="true" />
+        {{ createdAt ? createdAt.replace('T', ' ').slice(0, 16) : '—' }}
+      </span>
+    </div>
+    <!-- <div
       v-if="sourceSessionPath || sourceSessionExternalId"
       class="text-[11px] text-neutral-400 dark:text-neutral-500 space-y-0.5 pl-0.5"
     >
@@ -30,10 +54,19 @@ defineProps<{
         <span class="text-neutral-400 font-sans">来源会话 ID</span>
         {{ sourceSessionExternalId }}
       </div>
-    </div>
-    <div>
-      提炼消耗：{{ promptTokens + completionTokens }} tokens
-      · ¥{{ costYuan.toFixed(4) }}
+    </div> -->
+    <div
+      class="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-neutral-500 dark:text-neutral-400"
+    >
+      <span class="inline-flex items-center gap-1.5">
+        <span class="i-lucide-coins w-3.5 h-3.5 opacity-80" aria-hidden="true" />
+        <span class="text-neutral-400 dark:text-neutral-500">提炼消耗</span>
+        <span class="tabular-nums text-neutral-700 dark:text-neutral-200">
+          {{ promptTokens + completionTokens }} tokens
+        </span>
+      </span>
+      <span class="text-neutral-300 dark:text-neutral-600" aria-hidden="true">·</span>
+      <span class="tabular-nums">¥{{ costYuan.toFixed(4) }}</span>
     </div>
   </div>
 </template>
diff --git a/apps/desktop/src/views/KnowledgeView.vue b/apps/desktop/src/views/KnowledgeView.vue
index 6de9206..1f32881 100644
--- a/apps/desktop/src/views/KnowledgeView.vue
+++ b/apps/desktop/src/views/KnowledgeView.vue
@@ -317,7 +317,7 @@ function onExportAll() {
 
       <n-empty v-else-if="!items.length" description="暂无知识卡片" class="py-16" />
 
-      <!-- 卡片视图 -->
+      <!-- 卡片视图；选中 ring-inset：根节点 overflow-hidden 会裁掉外向 ring，见 docs/踩坑/桌面应用-Tailwind-ring与overflow-hidden裁切.md -->
       <div
         v-else-if="viewMode === 'card'"
         class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5"
@@ -328,7 +328,7 @@ function onExportAll() {
           class="group relative rounded-2xl border bg-white dark:bg-neutral-900 transition-all duration-300 cursor-pointer overflow-hidden flex flex-col"
           :class="[
             selectedIds.has(c.id)
-              ? 'ring-2 ring-emerald-500 border-transparent bg-emerald-50/20 dark:bg-emerald-950/20'
+              ? 'ring-2 ring-inset ring-emerald-500 border-transparent bg-emerald-50/30 dark:bg-emerald-950/30'
               : 'border-slate-200/80 dark:border-neutral-700/60 hover:border-emerald-300 dark:hover:border-emerald-700',
           ]"
           @click="open(c)"
@@ -394,7 +394,7 @@ function onExportAll() {
         </div>
       </div>
 
-      <!-- 列表视图 -->
+      <!-- 列表视图；选中态同卡片：ring-inset 避免 overflow-hidden 裁切 -->
       <div v-else class="space-y-4">
         <div
           v-for="c in items"
@@ -402,7 +402,7 @@ function onExportAll() {
           class="group relative rounded-xl border bg-white dark:bg-neutral-900 transition-all duration-300 cursor-pointer overflow-hidden flex items-center"
           :class="[
             selectedIds.has(c.id)
-              ? 'ring-2 ring-emerald-500 border-transparent bg-emerald-50/20 dark:bg-emerald-950/20'
+              ? 'ring-2 ring-inset ring-emerald-500 border-transparent bg-emerald-50/30 dark:bg-emerald-950/30'
               : 'border-slate-200/80 dark:border-neutral-700/60 hover:border-emerald-300 dark:hover:border-emerald-700',
           ]"
           @click="open(c)"

From 865103dfb0dde95738f8ec8fb3d0a6fd297fa34d Mon Sep 17 00:00:00 2001
From: stevelliu <stevelliu@tencent.com>
Date: Wed, 25 Mar 2026 16:26:45 +0800
Subject: [PATCH 9/9] =?UTF-8?q?refactor:=20=E6=B8=85=E7=90=86=20SessionToo?=
 =?UTF-8?q?lbar=20=E5=92=8C=20Sidebar=20=E7=BB=84=E4=BB=B6=E7=9A=84?=
 =?UTF-8?q?=E7=AD=9B=E9=80=89=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 SessionToolbar 组件中的待分析数量相关代码，简化其结构。
- 在 Sidebar 组件中替换计算属性，使用 filters.store 中的 hasLibraryFilters 以统一筛选状态管理。
- 更新 KnowledgeView 组件以使用新的 hasLibraryFilters 逻辑，确保与 Sidebar 组件一致性。
- 优化 filters.store，新增 hasLibraryFilters 计算属性，提升筛选状态的可读性和维护性。
---
 apps/desktop/src/components/SessionToolbar.vue | 15 ---------------
 apps/desktop/src/components/Sidebar.vue        | 10 +---------
 apps/desktop/src/stores/filters.ts             | 14 +++++++++++++-
 apps/desktop/src/views/KnowledgeView.vue       | 10 +---------
 apps/desktop/src/views/SessionsView.vue        |  2 +-
 5 files changed, 16 insertions(+), 35 deletions(-)

diff --git a/apps/desktop/src/components/SessionToolbar.vue b/apps/desktop/src/components/SessionToolbar.vue
index 959bc4b..30459d3 100644
--- a/apps/desktop/src/components/SessionToolbar.vue
+++ b/apps/desktop/src/components/SessionToolbar.vue
@@ -4,11 +4,6 @@ import { useSessionsStore } from '../stores/sessions'
 import { useSearchStore } from '../stores/search'
 import { useFiltersStore } from '../stores/filters'
 
-defineProps<{
-  /** 待分析角标（预留，与列表统计联动时可展示） */
-  pendingCount?: number
-}>()
-
 const sessions = useSessionsStore()
 const search = useSearchStore()
 const filters = useFiltersStore()
@@ -27,8 +22,6 @@ function setStatusFilter(val: '' | 'analyzed' | 'pending') {
   sessions.page = 1
   void sessions.loadPage()
 }
-
-/** 待分析数量（从当前结果页取得近似值） */
 </script>
 
 <template>
@@ -88,14 +81,6 @@ function setStatusFilter(val: '' | 'analyzed' | 'pending') {
           @click="setStatusFilter('pending')"
         >
           待分析
-          <!-- <span
-            :class="[
-              'py-0.5 px-1.5 rounded-full text-[10px] leading-none',
-              filters.statusFilter === 'pending'
-                ? 'bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-400'
-                : 'bg-slate-200 dark:bg-neutral-600 text-slate-500 dark:text-slate-300'
-            ]"
-          >{{ props.pendingCount ?? '' }}</span> -->
         </button>
         <button
           type="button"
diff --git a/apps/desktop/src/components/Sidebar.vue b/apps/desktop/src/components/Sidebar.vue
index 093cfc9..dbe7349 100644
--- a/apps/desktop/src/components/Sidebar.vue
+++ b/apps/desktop/src/components/Sidebar.vue
@@ -400,14 +400,6 @@ function toggleTechStack(name: string) {
   }
 }
 
-/** 知识库：是否存在生效筛选，用于展示「重置筛选」 */
-const libraryFiltersActive = computed(
-  () =>
-    !!filters.cardType
-    || filters.selectedTags.length > 0
-    || filters.selectedTechStacks.length > 0,
-)
-
 /**
  * 知识库筛选折叠面板：默认全展开；display-directive=if 折叠时卸载内容减轻 DOM。
  * 不设置 max-height / overflow-y，仅由侧栏最外层滚动。
@@ -548,7 +540,7 @@ watch(() => ui.activeTab, (tab) => {
         <div class="p-4 pb-6 space-y-6">
           <!-- 有筛选时提供一键重置，避免类型/标签/技术栈分散清除 -->
           <div
-            v-if="libraryFiltersActive"
+            v-if="filters.hasLibraryFilters"
             class="flex items-center justify-between gap-2 rounded-lg border border-slate-200 dark:border-neutral-800 bg-slate-50/80 dark:bg-neutral-900/50 px-2.5 py-2"
           >
             <span class="text-[11px] text-slate-500 dark:text-neutral-400 leading-snug">已应用筛选</span>
diff --git a/apps/desktop/src/stores/filters.ts b/apps/desktop/src/stores/filters.ts
index ded36ed..457b9a5 100644
--- a/apps/desktop/src/stores/filters.ts
+++ b/apps/desktop/src/stores/filters.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 /**
  * 侧栏筛选条件
@@ -29,6 +29,17 @@ export const useFiltersStore = defineStore('filters', () => {
   /** 选中的技术栈名称（与 list_tags 统计同源；AND 语义） */
   const selectedTechStacks = ref<string[]>([])
 
+  /**
+   * 知识库侧栏 / 主区是否处于「有生效筛选」状态（重置按钮、筛选条展示等共用）。
+   * 新增知识库筛选维度时须同步：本 getter、`resetLibrary()`、`list_cards` 参数与列表页的 watch 依赖。
+   */
+  const hasLibraryFilters = computed(
+    () =>
+      !!cardType.value
+      || selectedTags.value.length > 0
+      || selectedTechStacks.value.length > 0,
+  )
+
   /** 重置对话记录筛选（点击"全部对话"时） */
   function resetSessions() {
     sourceId.value = ''
@@ -58,6 +69,7 @@ export const useFiltersStore = defineStore('filters', () => {
     cardType,
     selectedTags,
     selectedTechStacks,
+    hasLibraryFilters,
     resetSessions,
     resetLibrary,
     reset,
diff --git a/apps/desktop/src/views/KnowledgeView.vue b/apps/desktop/src/views/KnowledgeView.vue
index 1f32881..7746428 100644
--- a/apps/desktop/src/views/KnowledgeView.vue
+++ b/apps/desktop/src/views/KnowledgeView.vue
@@ -81,14 +81,6 @@ watch(
   },
 )
 
-/** 主区域展示用：是否与侧栏共同存在知识库筛选 */
-const hasLibraryFilters = computed(
-  () =>
-    !!filters.cardType
-    || filters.selectedTags.length > 0
-    || filters.selectedTechStacks.length > 0,
-)
-
 function removeTagFilter(name: string) {
   const i = filters.selectedTags.indexOf(name)
   if (i >= 0) {
@@ -270,7 +262,7 @@ function onExportAll() {
 
     <!-- 与侧栏筛选联动：在主区域可摘除条件，无需回到侧栏 -->
     <div
-      v-if="hasLibraryFilters"
+      v-if="filters.hasLibraryFilters"
       class="shrink-0 flex flex-wrap items-center gap-2 mb-3 pb-3 border-b border-slate-100 dark:border-neutral-800"
     >
       <span class="text-[11px] text-slate-500 dark:text-neutral-400">当前筛选</span>
diff --git a/apps/desktop/src/views/SessionsView.vue b/apps/desktop/src/views/SessionsView.vue
index 0548567..0ef8de7 100644
--- a/apps/desktop/src/views/SessionsView.vue
+++ b/apps/desktop/src/views/SessionsView.vue
@@ -215,7 +215,7 @@ function openSearchHit(cardId: string, sessionId: string) {
 
 <template>
   <div class="flex flex-col h-full px-5 pt-5 mx-auto w-full relative">
-    <SessionToolbar :pending-count="unanalyzedCount" />
+    <SessionToolbar />
 
     <!-- Toast -->
     <Transition