重构: AiChat 样式同步到子组件 scoped + 复用抽取(God 拆分遗漏修复)

根因:AiChat God 拆分(抽 ConversationSidebar/ChatInput/MessageList)时样式没移子组件,
留 AiChat <style scoped>。Vue scoped 不匹配子组件内部元素(子元素无父 data-v)→
对话列表/输入框样式丢失 → 布局塌陷(主导航被覆盖点击无反应 + 样式乱)。

修复(纯样式移动,不改选择器/属性/值):
- AiChat <style scoped> 886→151 行(瘦身 83%)
- 侧栏 .ai-conv-* 47 选择器 → ConversationSidebar <style scoped>(新建)
- 输入框 .ai-input-*/.ai-skill-*/.ai-mention-*/.ai-send-btn 40 → ChatInput <style scoped>(新建)
- 复用 .ai-btn-icon* 6 处 → components.css(全局,TopBar+ConversationSidebar 共用)
- 容器 .ai-panel/.ai-chat-area/.ai-queue-*/.ai-toast* 32 → AiChat 保留 scoped
- 清理 TopBar 重复块(AiChat 漏删死代码,零视觉变更)+ 删 TEMP DEBUG 参考线

自验: vite build ✓ + vue-tsc EXIT 0 + AiChat scoped CLEAN(0 子组件类)
This commit is contained in:
2026-06-20 00:28:14 +08:00
parent 5c395f4825
commit 4f8f1cf794
4 changed files with 596 additions and 742 deletions

View File

@@ -77,3 +77,50 @@
color: var(--df-text-secondary);
border: 0.5px solid var(--df-border);
}
/* — AiChat 图标按钮(共享工具类):TopBar header-actions + ConversationSidebar 新建按钮 —
原 AiChat.vue <style scoped> L1039-1072 抽取(非 scoped 全局,供两个 ai/ 子组件共享)。
复用原因:跨 TopBar + ConversationSidebar,无法归属单一 scoped;
原 AiChat scoped(拆分前)不渗透子组件根,ConversationSidebar 拿不到 → 抽全局。
TopBar.vue 内仍有 scoped 副本(第三批抽离时复制),与本全局块逐字一致,无视觉冲突。 */
.ai-btn-icon {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: none;
border-radius: var(--df-radius-sm);
background: transparent;
color: var(--df-text-dim);
cursor: pointer;
transition: all 0.15s;
}
.ai-btn-icon:hover {
background: var(--df-bg-card);
color: var(--df-text-secondary);
}
.ai-btn-icon--active {
background: var(--df-accent-bg);
color: var(--df-accent);
}
/* ── F-15 阶段2: 按钮禁用态(清空/压缩上下文,空会话/全归档/生成中)──
复用现有 .ai-btn-icon:hover 风格,禁用时降透明度 + not-allowed,不发 hover 高亮。 */
.ai-btn-icon:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.ai-btn-icon:disabled:hover {
background: transparent;
color: var(--df-text-dim);
}
/* 压缩中 spinner 图标旋转动画(原 AiChat.vue <style scoped> 抽取;
TopBar.vue .ai-btn-spinner 按名引用,Vue 不对 @keyframes scoped 故全局可见) */
.ai-btn-spinner {
animation: ai-btn-spin 0.9s linear infinite;
}
@keyframes ai-btn-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}