From 1876f71537adea9b65790c05ecefdf14ef12cdfd Mon Sep 17 00:00:00 2001
From: cfdaily <cfdaily@gitee.com>
Date: Sun, 17 May 2026 06:16:07 +0800
Subject: [PATCH] auto-sync: 2026-05-17 06:16:06

---
 src/frontend/src/pages/Config.tsx | 113 ++++++++++++++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 src/frontend/src/pages/Config.tsx

diff --git a/src/frontend/src/pages/Config.tsx b/src/frontend/src/pages/Config.tsx
new file mode 100644
index 0000000..a7d78f7
--- /dev/null
+++ b/src/frontend/src/pages/Config.tsx
@@ -0,0 +1,113 @@
+// 系统配置页面
+
+import React, { useState } from 'react';
+import { useProjects } from '../hooks/useApi';
+import * as api from '../api';
+
+export function Config() {
+  const { projects, loading, refresh } = useProjects();
+  const [newName, setNewName] = useState('');
+  const [newDesc, setNewDesc] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleCreate = async () => {
+    if (!newName.trim()) return;
+    try {
+      setCreating(true);
+      setError(null);
+      await api.createProject({ name: newName, description: newDesc || null });
+      setNewName('');
+      setNewDesc('');
+      refresh();
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  return (
+    <div>
+      <h2 className="page-title">系统配置</h2>
+
+      {/* 创建项目 */}
+      <div className="card" style={{ marginBottom: 20 }}>
+        <div className="card-title">创建项目</div>
+        <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
+          <input
+            type="text"
+            placeholder="项目名称"
+            value={newName}
+            onChange={e => setNewName(e.target.value)}
+            style={{
+              flex: 1,
+              padding: '6px 10px',
+              borderRadius: 'var(--radius)',
+              border: '1px solid var(--line)',
+              background: 'var(--bg)',
+              color: 'var(--fg)',
+            }}
+          />
+          <input
+            type="text"
+            placeholder="描述（可选）"
+            value={newDesc}
+            onChange={e => setNewDesc(e.target.value)}
+            style={{
+              flex: 2,
+              padding: '6px 10px',
+              borderRadius: 'var(--radius)',
+              border: '1px solid var(--line)',
+              background: 'var(--bg)',
+              color: 'var(--fg)',
+            }}
+          />
+          <button
+            className="btn btn-primary"
+            onClick={handleCreate}
+            disabled={creating || !newName.trim()}
+          >
+            {creating ? '创建中...' : '创建'}
+          </button>
+        </div>
+        {error && <p className="error" style={{ marginTop: 8 }}>{error}</p>}
+      </div>
+
+      {/* 项目列表 */}
+      <div className="card">
+        <div className="card-title">已有项目</div>
+        {loading ? (
+          <div className="loading">加载中...</div>
+        ) : (
+          <div className="table-wrapper">
+            <table>
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>名称</th>
+                  <th>描述</th>
+                  <th>状态</th>
+                </tr>
+              </thead>
+              <tbody>
+                {projects.map(p => (
+                  <tr key={p.id}>
+                    <td style={{ fontFamily: 'monospace' }}>{p.id.substring(0, 8)}</td>
+                    <td>{p.name}</td>
+                    <td style={{ color: 'var(--muted)' }}>{p.description || '-'}</td>
+                    <td>
+                      <span className={`badge badge-${p.status === 'active' ? 'done' : 'blocked'}`}>
+                        {p.status}
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}