feat(theme): 专业主题系统重构 — Warp/Linear 设计参考,深色/浅色完整适配
参考设计系统: - Warp: 温暖暗色调、自然层次、克制配色 - Linear: 亮度阶梯层次、半透明边框、精确排版 核心改进: - app-theme.ts: 完整重写深色/浅色调色板 (+surface-hover/active, border-subtle/focus, feedback-bg, placeholder) - useTheme.ts: 修复硬编码 return 'dark',支持 dark/light/system 完整切换 - index.css: 消除硬编码颜色,全部使用 CSS 变量 - tailwind.config.js: 新增 txt/content/surface/border/ph/feedback 语义 token - 44 文件批量迁移: 292 处 text-gray/bg-gray/text-white/placeholder-gray → 主题感知语义 token | 44 files +611/-482 | tsc零错误 | 96/96 tests passing
This commit is contained in:
1 parent
07c4a5b14f
commit
e9a0d21758
44 files changed
+593
-464
No files matched your search
@@ -45,9 +45,9 @@ interface CommandPaletteProps {
|
||||
// ─── 类型 badge 颜色映射 ──────────────────────────────────────────────
|
||||
|
||||
const TYPE_BADGE: Record<CommandPaletteItemType, { label: string; className: string }> = {
|
||||
command: { label: '命令', className: 'bg-accent-blue/20 text-accent-blue' },
|
||||
session: { label: '会话', className: 'bg-accent-green/20 text-accent-green' },
|
||||
snippet: { label: '片段', className: 'bg-accent-purple/20 text-accent-purple' },
|
||||
command: { label: '命令', className: 'bg-surface-baseccent-blue/20 text-accent-blue' },
|
||||
session: { label: '会话', className: 'bg-surface-baseccent-green/20 text-accent-green' },
|
||||
snippet: { label: '片段', className: 'bg-surface-baseccent-purple/20 text-accent-purple' },
|
||||
}
|
||||
|
||||
// ─── 组件 ──────────────────────────────────────────────────────────────
|
||||
@@ -305,7 +305,7 @@ export function CommandPalette({
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
{/* Backdrop */}
|
||||
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in" />
|
||||
<div className="absolute inset-0 bg-surface-baselack/60 backdrop-blur-sm animate-fade-in" />
|
||||
|
||||
{/* Palette container */}
|
||||
<div
|
||||
@@ -316,18 +316,18 @@ export function CommandPalette({
|
||||
>
|
||||
{/* Search input */}
|
||||
<div className="flex items-center gap-3 px-4 py-3 border-b border-dark-700">
|
||||
<Search size={18} className="text-gray-400 flex-shrink-0" />
|
||||
<Search size={18} className="text-txt-muted flex-shrink-0" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="搜索命令、会话或片段..."
|
||||
className="flex-1 bg-transparent text-gray-200 placeholder-gray-500 outline-none text-sm"
|
||||
className="flex-1 bg-transparent text-content-primary placeholder-ph outline-none text-sm"
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
/>
|
||||
<kbd className="hidden sm:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] text-gray-500 bg-dark-700 rounded border border-dark-600">
|
||||
<kbd className="hidden sm:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] text-txt-muted bg-dark-700 rounded border border-dark-600">
|
||||
ESC
|
||||
</kbd>
|
||||
</div>
|
||||
@@ -335,10 +335,10 @@ export function CommandPalette({
|
||||
{/* Results list */}
|
||||
<div ref={listRef} className="flex-1 overflow-y-auto py-1">
|
||||
{filteredItems.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-gray-500">
|
||||
<div className="flex flex-col items-center justify-center py-12 text-txt-muted">
|
||||
<Search size={32} className="mb-2 opacity-30" />
|
||||
<p className="text-sm">没有找到匹配的结果</p>
|
||||
<p className="text-xs text-gray-600 mt-1">试试其他关键词</p>
|
||||
<p className="text-xs text-txt-faint mt-1">试试其他关键词</p>
|
||||
</div>
|
||||
) : (
|
||||
groupedItems.map((group) => {
|
||||
@@ -348,14 +348,14 @@ export function CommandPalette({
|
||||
return (
|
||||
<div key={group.type}>
|
||||
{/* Group header */}
|
||||
<div className="flex items-center gap-2 px-4 py-1.5 text-[11px] font-medium text-gray-500 uppercase tracking-wider">
|
||||
<div className="flex items-center gap-2 px-4 py-1.5 text-[11px] font-medium text-txt-muted uppercase tracking-wider">
|
||||
<span
|
||||
className={`inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold ${TYPE_BADGE[group.type].className}`}
|
||||
>
|
||||
{TYPE_BADGE[group.type].label}
|
||||
</span>
|
||||
<span className="flex-1 h-px bg-dark-700" />
|
||||
<span className="text-gray-600">{group.items.length}</span>
|
||||
<span className="text-txt-faint">{group.items.length}</span>
|
||||
</div>
|
||||
|
||||
{/* Group items */}
|
||||
@@ -369,8 +369,8 @@ export function CommandPalette({
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-2 cursor-pointer transition-colors duration-75
|
||||
${isSelected
|
||||
? 'bg-accent-blue/15 text-gray-100'
|
||||
: 'text-gray-300 hover:bg-dark-700'
|
||||
? 'bg-surface-baseccent-blue/15 text-content-primary'
|
||||
: 'text-content-secondary hover:bg-dark-700'
|
||||
}
|
||||
`}
|
||||
onClick={() => {
|
||||
@@ -382,7 +382,7 @@ export function CommandPalette({
|
||||
{/* Icon */}
|
||||
<span
|
||||
className={`flex-shrink-0 w-5 h-5 flex items-center justify-center ${
|
||||
isSelected ? 'text-accent-blue' : 'text-gray-500'
|
||||
isSelected ? 'text-accent-blue' : 'text-txt-muted'
|
||||
}`}
|
||||
>
|
||||
{item.icon}
|
||||
@@ -392,7 +392,7 @@ export function CommandPalette({
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm truncate">{item.label}</div>
|
||||
{item.description && (
|
||||
<div className="text-[11px] text-gray-500 truncate">
|
||||
<div className="text-[11px] text-txt-muted truncate">
|
||||
{item.description}
|
||||
</div>
|
||||
)}
|
||||
@@ -400,7 +400,7 @@ export function CommandPalette({
|
||||
|
||||
{/* Shortcut */}
|
||||
{item.shortcut && (
|
||||
<kbd className="flex-shrink-0 text-[11px] text-gray-500 bg-dark-700 px-1.5 py-0.5 rounded border border-dark-600">
|
||||
<kbd className="flex-shrink-0 text-[11px] text-txt-muted bg-dark-700 px-1.5 py-0.5 rounded border border-dark-600">
|
||||
{item.shortcut}
|
||||
</kbd>
|
||||
)}
|
||||
@@ -421,7 +421,7 @@ export function CommandPalette({
|
||||
</div>
|
||||
|
||||
{/* Footer hint */}
|
||||
<div className="flex items-center justify-between px-4 py-2 border-t border-dark-700 text-[11px] text-gray-600">
|
||||
<div className="flex items-center justify-between px-4 py-2 border-t border-dark-700 text-[11px] text-txt-faint">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex items-center gap-1">
|
||||
<kbd className="px-1 py-0.5 bg-dark-700 rounded border border-dark-600">↑↓</kbd>
|
||||
|
||||
Reference in new issue
Block a user