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

src/components/PortForwardView.tsx

@@ -168,11 +168,11 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
       {needsReconnect && currentTab?.sessionId && (
         <div className="absolute inset-0 bg-dark-900/90 flex items-center justify-center z-50">
           <div className="text-center">
-            <div className="w-16 h-16 bg-accent-blue/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <div className="w-16 h-16 bg-surface-baseccent-blue/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
               <ArrowRightLeft className="w-8 h-8 text-accent-blue" />
             </div>
-            <div className="text-gray-200 mb-2 text-lg">会话已恢复</div>
-            <div className="text-gray-400 text-sm mb-6">
+            <div className="text-content-primary mb-2 text-lg">会话已恢复</div>
+            <div className="text-txt-muted text-sm mb-6">
               上次关闭时的端口转发标签已恢复<br />
               需要重新建立 SSH 连接才能使用
             </div>
@@ -181,7 +181,7 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
                 updateTab(tabId, { needsReconnect: false })
                 // 刷新页面或触发连接逻辑
               }}
-              className="px-6 py-2.5 bg-accent-blue hover:bg-blue-500 text-white rounded-lg transition-colors"
+              className="px-6 py-2.5 bg-surface-baseccent-blue hover:bg-surface-baselue-500 text-content-primary rounded-lg transition-colors"
             >
               重新连接
             </button>
@@ -194,8 +194,8 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
         <div className="flex items-center gap-3">
           <ArrowRightLeft className="w-6 h-6 text-accent-blue" />
           <div>
-            <h2 className="text-lg font-semibold text-white">端口转发</h2>
-            <p className="text-sm text-gray-500">
+            <h2 className="text-lg font-semibold text-content-primary">端口转发</h2>
+            <p className="text-sm text-txt-muted">
               {connection 
                 ? `已连接: ${connection.config.username}@${connection.config.host}` 
                 : '未连接 - 请先建立 SSH 连接'}
@@ -205,7 +205,7 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
         <button
           onClick={() => setShowAddModal(true)}
           disabled={!connection}
-          className="flex items-center gap-2 px-4 py-2 bg-accent-blue hover:bg-blue-600 disabled:bg-dark-700 disabled:text-gray-500 rounded-lg text-sm font-medium transition-colors"
+          className="flex items-center gap-2 px-4 py-2 bg-surface-baseccent-blue hover:bg-surface-baselue-600 disabled:bg-dark-700 disabled:text-txt-muted rounded-lg text-sm font-medium transition-colors"
         >
           <Plus className="w-4 h-4" />
           添加规则
@@ -215,7 +215,7 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
       {/* Rules List */}
       <div className="flex-1 overflow-y-auto p-6">
         {rules.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-full text-gray-500">
+          <div className="flex flex-col items-center justify-center h-full text-txt-muted">
             <Globe className="w-16 h-16 mb-4 opacity-50" />
             <p className="text-lg">暂无端口转发规则</p>
             <p className="text-sm mt-1">点击右上角添加规则</p>
@@ -235,7 +235,7 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
                   <div className="flex items-center gap-4">
                     {/* Type Icon */}
                     <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
-                      rule.type === 'local' ? 'bg-blue-500/20 text-blue-400' :
+                      rule.type === 'local' ? 'bg-surface-baselue-500/20 text-blue-400' :
                       rule.type === 'remote' ? 'bg-purple-500/20 text-purple-400' :
                       'bg-orange-500/20 text-orange-400'
                     }`}>
@@ -247,9 +247,9 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
                     {/* Rule Info */}
                     <div>
                       <div className="flex items-center gap-2">
-                        <span className="font-medium text-white">{rule.name}</span>
+                        <span className="font-medium text-content-primary">{rule.name}</span>
                         <span className={`text-xs px-2 py-0.5 rounded ${
-                          rule.type === 'local' ? 'bg-blue-500/20 text-blue-400' :
+                          rule.type === 'local' ? 'bg-surface-baselue-500/20 text-blue-400' :
                           rule.type === 'remote' ? 'bg-purple-500/20 text-purple-400' :
                           'bg-orange-500/20 text-orange-400'
                         }`}>
@@ -262,7 +262,7 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
                           </span>
                         )}
                       </div>
-                      <div className="text-sm text-gray-400 mt-1">
+                      <div className="text-sm text-txt-muted mt-1">
                         {rule.type === 'dynamic' ? (
                           <span>SOCKS5 代理: 127.0.0.1:{rule.localPort}</span>
                         ) : rule.type === 'local' ? (
@@ -320,7 +320,7 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
       {showAddModal && (
         <div className="absolute inset-0 bg-dark-900/90 flex items-center justify-center z-50">
           <div className="bg-dark-800 rounded-xl border border-dark-700 shadow-2xl w-full max-w-md p-6">
-            <h3 className="text-lg font-semibold text-white mb-4">添加端口转发规则</h3>
+            <h3 className="text-lg font-semibold text-content-primary mb-4">添加端口转发规则</h3>
             
             {/* Type Selection */}
             <div className="grid grid-cols-3 gap-2 mb-4">
@@ -334,8 +334,8 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
                   onClick={() => setNewRule({ ...newRule, type: t.type as 'local' | 'remote' | 'dynamic' })}
                   className={`p-3 rounded-lg border text-left transition-colors ${
                     newRule.type === t.type
-                      ? 'bg-accent-blue/20 border-accent-blue text-white'
-                      : 'bg-dark-700 border-dark-600 text-gray-400 hover:bg-dark-600'
+                      ? 'bg-surface-baseccent-blue/20 border-accent-blue text-content-primary'
+                      : 'bg-dark-700 border-dark-600 text-txt-muted hover:bg-dark-600'
                   }`}
                 >
                   <div className="text-sm font-medium">{t.label}</div>
@@ -347,19 +347,19 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
             {/* Form Fields */}
             <div className="space-y-4">
               <div>
-                <label className="block text-sm text-gray-400 mb-1">规则名称</label>
+                <label className="block text-sm text-txt-muted mb-1">规则名称</label>
                 <input
                   type="text"
                   value={newRule.name}
                   onChange={(e) => setNewRule({ ...newRule, name: e.target.value })}
                   placeholder="例如: MySQL 转发"
-                  className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue"
+                  className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
                 />
               </div>
 
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-sm text-gray-400 mb-1">
+                  <label className="block text-sm text-txt-muted mb-1">
                     {newRule.type === 'remote' ? '远程端口' : '本地端口'}
                   </label>
                   <input
@@ -367,19 +367,19 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
                     value={newRule.localPort || ''}
                     onChange={(e) => setNewRule({ ...newRule, localPort: parseInt(e.target.value) })}
                     placeholder="例如: 3306"
-                    className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue"
+                    className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
                   />
                 </div>
 
                 {newRule.type !== 'dynamic' && (
                   <div>
-                    <label className="block text-sm text-gray-400 mb-1">远程端口</label>
+                    <label className="block text-sm text-txt-muted mb-1">远程端口</label>
                     <input
                       type="number"
                       value={newRule.remotePort || ''}
                       onChange={(e) => setNewRule({ ...newRule, remotePort: parseInt(e.target.value) })}
                       placeholder="例如: 3306"
-                      className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue"
+                      className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
                     />
                   </div>
                 )}
@@ -387,13 +387,13 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
 
               {newRule.type === 'local' && (
                 <div>
-                  <label className="block text-sm text-gray-400 mb-1">远程主机</label>
+                  <label className="block text-sm text-txt-muted mb-1">远程主机</label>
                   <input
                     type="text"
                     value={newRule.remoteHost}
                     onChange={(e) => setNewRule({ ...newRule, remoteHost: e.target.value })}
                     placeholder="例如: localhost 或 192.168.1.100"
-                    className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue"
+                    className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
                   />
                 </div>
               )}
@@ -409,7 +409,7 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
               </button>
               <button
                 onClick={handleAddRule}
-                className="flex-1 px-4 py-2 bg-accent-blue hover:bg-blue-600 rounded-lg text-sm font-medium transition-colors"
+                className="flex-1 px-4 py-2 bg-surface-baseccent-blue hover:bg-surface-baselue-600 rounded-lg text-sm font-medium transition-colors"
               >
                 添加
               </button>