docs(uiux): UIUX 设计方案大改 + 5 份作业指导书对齐 + 开发任务文档

- UIUX 文档：填充 19 个缺口（多主体画像/健康度/AI+看板/增长域/洞察域/创始人端/OODA/助推/商密） - UIUX 文档：插入 6 个新章节（十四~十九），旧章节重编号为二十~三十一，更新目录和交叉引用 - 作业指导书 x5：导航改为 6 域分组，新增 Context Bar/工作模式/Insight Rail/决策线程/多工作区等 UI 概念 - 新建 docs/2-task-uiux.md：50 个代码落地开发任务，按 P0-P6 分优先级 + 8 Sprint 规划 - 后端/前端：大量新增模型、路由、组件（来自之前 Phase 开发）
2026-07-19 11:53:38 +08:00
parent 734a16a7f3
commit fad458b2a7
243 changed files with 19898 additions and 658 deletions
@@ -0,0 +1,147 @@
+"use client";
+
+import { useState } from "react";
+import { Shield, Key, Lock, Bell } from "lucide-react";
+
+/** 投资人设置页 — 修改密码/2FA/API Key 管理。 */
+export default function SettingsPage() {
+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [twoFactorEnabled, setTwoFactorEnabled] = useState(false);
+  const [message, setMessage] = useState("");
+
+  async function handleChangePassword() {
+    if (newPassword !== confirmPassword) {
+      setMessage("两次输入的新密码不一致");
+      return;
+    }
+    if (newPassword.length < 8) {
+      setMessage("新密码至少 8 位");
+      return;
+    }
+    setMessage("密码修改功能待后端接口接入");
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold">设置</h1>
+        <p className="mt-1 text-sm text-muted-foreground">账户安全 · 双因素认证 · API Key 管理</p>
+      </div>
+
+      {/* 修改密码 */}
+      <div className="rounded-lg border border-[var(--border)] bg-white p-5">
+        <div className="flex items-center gap-2">
+          <Lock size={18} className="text-[var(--investor-primary)]" />
+          <h2 className="text-sm font-medium">修改密码</h2>
+        </div>
+        <div className="mt-3 space-y-3">
+          <div>
+            <label className="text-xs text-muted-foreground">当前密码</label>
+            <input
+              type="password"
+              className="mt-1 w-full rounded-md border border-[var(--border)] px-3 py-2 text-sm"
+              value={oldPassword}
+              onChange={(e) => setOldPassword(e.target.value)}
+            />
+          </div>
+          <div>
+            <label className="text-xs text-muted-foreground">新密码</label>
+            <input
+              type="password"
+              className="mt-1 w-full rounded-md border border-[var(--border)] px-3 py-2 text-sm"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+            />
+          </div>
+          <div>
+            <label className="text-xs text-muted-foreground">确认新密码</label>
+            <input
+              type="password"
+              className="mt-1 w-full rounded-md border border-[var(--border)] px-3 py-2 text-sm"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+            />
+          </div>
+          {message && <p className="text-xs text-amber-600">{message}</p>}
+          <button
+            onClick={handleChangePassword}
+            className="rounded-md bg-[var(--investor-primary)] px-4 py-2 text-sm text-white"
+          >
+            修改密码
+          </button>
+        </div>
+      </div>
+
+      {/* 双因素认证 */}
+      <div className="rounded-lg border border-[var(--border)] bg-white p-5">
+        <div className="flex items-center gap-2">
+          <Shield size={18} className="text-emerald-600" />
+          <h2 className="text-sm font-medium">双因素认证 (2FA)</h2>
+        </div>
+        <div className="mt-3 flex items-center justify-between">
+          <p className="text-sm text-muted-foreground">使用 TOTP 应用（如 Google Authenticator）增强账户安全</p>
+          <button
+            onClick={() => setTwoFactorEnabled(!twoFactorEnabled)}
+            className={`relative h-6 w-11 rounded-full transition-colors ${twoFactorEnabled ? "bg-emerald-500" : "bg-muted"}`}
+            role="switch"
+            aria-checked={twoFactorEnabled}
+            aria-label="双因素认证开关"
+          >
+            <span
+              className={`absolute top-0.5 h-5 w-5 rounded-full bg-white transition-transform ${twoFactorEnabled ? "translate-x-5" : "translate-x-0.5"}`}
+            />
+          </button>
+        </div>
+        {twoFactorEnabled && (
+          <div className="mt-3 rounded-md border border-amber-200 bg-amber-50 p-3 text-xs text-amber-700">
+            2FA 功能即将上线，敬请期待
+          </div>
+        )}
+      </div>
+
+      {/* API Key 管理 */}
+      <div className="rounded-lg border border-[var(--border)] bg-white p-5">
+        <div className="flex items-center gap-2">
+          <Key size={18} className="text-amber-600" />
+          <h2 className="text-sm font-medium">API Key 管理</h2>
+        </div>
+        <p className="mt-2 text-sm text-muted-foreground">
+          用于外部系统集成的 API Key 管理。所有 Key 加密存储。
+        </p>
+        <div className="mt-3 rounded-md border border-[var(--border)] p-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-mono">sk-****...****</span>
+            <span className="rounded bg-muted px-2 py-0.5 text-xs">未配置</span>
+          </div>
+        </div>
+        <button className="mt-2 rounded-md border border-[var(--border)] px-4 py-2 text-sm hover:bg-muted">
+          生成新 Key
+        </button>
+      </div>
+
+      {/* 通知设置 */}
+      <div className="rounded-lg border border-[var(--border)] bg-white p-5">
+        <div className="flex items-center gap-2">
+          <Bell size={18} className="text-blue-600" />
+          <h2 className="text-sm font-medium">通知设置</h2>
+        </div>
+        <div className="mt-3 space-y-2 text-sm">
+          <label className="flex items-center gap-2">
+            <input type="checkbox" defaultChecked className="rounded" />
+            <span>月报提交提醒</span>
+          </label>
+          <label className="flex items-center gap-2">
+            <input type="checkbox" defaultChecked className="rounded" />
+            <span>风险预警通知</span>
+          </label>
+          <label className="flex items-center gap-2">
+            <input type="checkbox" className="rounded" />
+            <span>健康度下降提醒</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+}