cc工作前备份

desktop/src/components/Settings/Skills.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+
+export function Skills() {
+  const [extraDir, setExtraDir] = useState('~/.opencode/skills');
+  const [activeTab, setActiveTab] = useState<'all' | 'available' | 'installed'>('all');
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-2">
+        <h1 className="text-2xl font-bold text-gray-900">技能</h1>
+        <button className="text-sm text-gray-400">加载中...</button>
+      </div>
+      <p className="text-sm text-gray-500 mb-6">
+        技能为 Agent 扩展专业知识和工作流程。它们是从本地包、技能目录和你配置的额外目录中发现的 SKILL.md 文件。满足所有依赖条件的技能会自动处于可用状态。
+      </p>
+
+      <div className="bg-gray-50 rounded-xl p-5 mb-6">
+        <h2 className="text-sm font-bold text-gray-900 mb-1">额外技能目录</h2>
+        <p className="text-xs text-gray-500 mb-3">包含 SKILL.md 文件的额外目录。保存到 Gateway 配置的 skills.load.extraDirs 中。</p>
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={extraDir}
+            onChange={(e) => setExtraDir(e.target.value)}
+            className="flex-1 bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500"
+          />
+          <button className="bg-orange-500 text-white text-sm rounded-lg px-4 py-2 hover:bg-orange-600">添加</button>
+        </div>
+      </div>
+
+      <div className="flex gap-2 mb-4">
+        {(['all', 'available', 'installed'] as const).map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`text-xs px-3 py-1 rounded-full ${
+              activeTab === tab ? 'bg-orange-500 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+            }`}
+          >
+            {tab === 'all' ? '全部 (0)' : tab === 'available' ? '可用 (0)' : '已安装 (0)'}
+          </button>
+        ))}
+      </div>
+
+      <div className="bg-gray-50 rounded-xl p-8 text-center">
+        <p className="text-sm text-gray-400">暂无技能</p>
+        <p className="text-xs text-gray-300 mt-1">连接 Gateway 后将自动加载技能列表</p>
+      </div>
+    </div>
+  );
+}