rlwj-lab/opsxshell
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): 专业主题系统重构 — Warp/Linear 设计参考，深色/浅色完整适配

Browse Source 
参考设计系统:
- 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:
OpsXShell Dev committed 2026-04-25 19:31:51 +08:00
1 parent 07c4a5b14f
commit e9a0d21758
44 files changed
+593 -464
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/WelcomeView.tsx
+18 -18
View File
@@ -27,7 +27,7 @@ export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeVie
<div className="h-full flex flex-col items-center justify-start bg-dark-900 p-8 overflow-y-auto">
<div className="text-center mb-12 pt-8">
<div className="w-20 h-20 bg-dark-700 rounded-2xl flex items-center justify-center mx-auto shadow-lg">
<Terminal className="w-10 h-10 text-white" />
<Terminal className="w-10 h-10 text-content-primary" />
</div>
</div>
@@ -36,12 +36,12 @@ export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeVie
onClick={onQuickConnect}
className="flex items-center gap-4 p-6 bg-dark-800 hover:bg-dark-700 rounded-xl border border-dark-700/30 hover:border-accent-blue transition-all group"
>
<div className="w-12 h-12 bg-accent-blue/20 rounded-lg flex items-center justify-center group-hover:bg-accent-blue/30 transition-colors">
<div className="w-12 h-12 bg-surface-baseccent-blue/20 rounded-lg flex items-center justify-center group-hover:bg-surface-baseccent-blue/30 transition-colors">
<Zap className="w-6 h-6 text-accent-blue" />
</div>
<div className="text-left">
<div className="font-semibold text-gray-200">快速连接</div>
<div className="text-sm text-gray-500">输入地址快速建立连接</div>
<div className="font-semibold text-content-primary">快速连接</div>
<div className="text-sm text-txt-muted">输入地址快速建立连接</div>
</div>
</button>
@@ -49,12 +49,12 @@ export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeVie
onClick={onNewSession}
className="flex items-center gap-4 p-6 bg-dark-800 hover:bg-dark-700 rounded-xl border border-dark-700/30 hover:border-accent-green transition-all group"
>
<div className="w-12 h-12 bg-accent-green/20 rounded-lg flex items-center justify-center group-hover:bg-accent-green/30 transition-colors">
<Plus className="w-6 h-6 text-white" />
<div className="w-12 h-12 bg-surface-baseccent-green/20 rounded-lg flex items-center justify-center group-hover:bg-surface-baseccent-green/30 transition-colors">
<Plus className="w-6 h-6 text-content-primary" />
</div>
<div className="text-left">
<div className="font-semibold text-gray-200">新建会话</div>
<div className="text-sm text-gray-500">创建并保存新的会话</div>
<div className="font-semibold text-content-primary">新建会话</div>
<div className="text-sm text-txt-muted">创建并保存新的会话</div>
</div>
</button>
@@ -62,12 +62,12 @@ export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeVie
onClick={() => addTab({ title: 'SFTP', type: 'sftp' })}
className="flex items-center gap-4 p-6 bg-dark-800 hover:bg-dark-700 rounded-xl border border-dark-700/30 hover:border-accent-purple transition-all group"
>
<div className="w-12 h-12 bg-accent-purple/20 rounded-lg flex items-center justify-center group-hover:bg-accent-purple/30 transition-colors">
<div className="w-12 h-12 bg-surface-baseccent-purple/20 rounded-lg flex items-center justify-center group-hover:bg-surface-baseccent-purple/30 transition-colors">
<FolderSync className="w-6 h-6 text-accent-purple" />
</div>
<div className="text-left">
<div className="font-semibold text-gray-200">SFTP 传输</div>
<div className="text-sm text-gray-500">可视化文件管理</div>
<div className="font-semibold text-content-primary">SFTP 传输</div>
<div className="text-sm text-txt-muted">可视化文件管理</div>
</div>
</button>
@@ -79,15 +79,15 @@ export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeVie
<ArrowRightLeft className="w-6 h-6 text-orange-400" />
</div>
<div className="text-left">
<div className="font-semibold text-gray-200">端口转发</div>
<div className="text-sm text-gray-500">本地/远程/SOCKS5 代理</div>
<div className="font-semibold text-content-primary">端口转发</div>
<div className="text-sm text-txt-muted">本地/远程/SOCKS5 代理</div>
</div>
</button>
</div>
{/* Recent connections */}
<div className="w-full max-w-2xl">
<h3 className="text-sm font-medium text-gray-400 mb-4">最近连接</h3>
<h3 className="text-sm font-medium text-txt-muted mb-4">最近连接</h3>
{recentSessions.length === 0 ? (
<EmptyState
icon={Clock}
@@ -105,13 +105,13 @@ export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeVie
<div className="flex items-center gap-3">
<Globe className="w-5 h-5 text-accent-blue" />
<div className="text-left">
<div className="font-medium text-gray-200">{session.name}</div>
<div className="text-sm text-gray-500">
<div className="font-medium text-content-primary">{session.name}</div>
<div className="text-sm text-txt-muted">
{session.username}@{session.host}{session.port !== 22 ? `:${session.port}` : ''}
</div>
</div>
</div>
<span className="text-xs text-gray-500">--</span>
<span className="text-xs text-txt-muted">--</span>
</button>
))}
</div>
@@ -119,7 +119,7 @@ export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeVie
</div>
{/* Shortcuts hint */}
<div className="mt-12 flex items-center gap-6 text-sm text-gray-500">
<div className="mt-12 flex items-center gap-6 text-sm text-txt-muted">
<span>快捷键:</span>
<span><kbd className="px-2 py-1 bg-dark-800 rounded">Ctrl+N</kbd> 新建会话</span>
<span><kbd className="px-2 py-1 bg-dark-800 rounded">Ctrl+K</kbd> 快速连接</span>