node-resource-utils 0.0.0-stage → 1.1.8

package/resources/src/app/forgot/page.tsx

@@ -0,0 +1,392 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import {
+  Alert,
+  App,
+  Button,
+  Card,
+  Form,
+  Input,
+  Segmented,
+  Space,
+  Typography,
+  Upload,
+} from 'antd';
+import type { UploadFile } from 'antd';
+import {
+  ArrowLeftOutlined,
+  IdcardOutlined,
+  LockOutlined,
+  SafetyCertificateOutlined,
+  UploadOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
+import { APP_NAME, SHOW_DEMO_ACCOUNT_HINT } from '@/lib/appInfo';
+import { DEMO_SECURITY_ANSWER, DEMO_SECURITY_QUESTION } from '@/lib/security-questions';
+import { fs, MILITARY } from '@/lib/theme';
+import { formRules } from '@/lib/formRules';
+import { validateField } from '@/lib/validation';
+
+const { Title, Text, Paragraph } = Typography;
+
+type Mode = 'question' | 'appeal';
+
+type ApiResp<T> = { code: number; data?: T; message?: string };
+
+/**
+ * 忘记密码（未登录可访问）。
+ *
+ * 两条路：
+ *  1. 密保问题：用户名 → 取问题 → 答案校验通过后由用户自己设新密码
+ *  2. 人工申诉：密保也忘了，就提交账号信息 + 证明材料，超管核实后在反馈页重置
+ *
+ * 页面刻意与登录页同一套军绿视觉，避免"跳出系统"的割裂感。
+ */
+export default function ForgotPage() {
+  const router = useRouter();
+  const { message } = App.useApp();
+
+  const [mode, setMode] = useState<Mode>('question');
+
+  // ---- 密保问题找回 ----
+  const [username, setUsername] = useState('');
+  const [question, setQuestion] = useState<string | null>(null);
+  const [looking, setLooking] = useState(false);
+  const [resetting, setResetting] = useState(false);
+  const [resetForm] = Form.useForm<{ answer: string; newPassword: string; confirm: string }>();
+
+  const lookup = async () => {
+    const checked = validateField('username', username, { label: '用户名', required: true });
+    if (!checked.ok) {
+      message.warning(checked.message);
+      return;
+    }
+    const name = checked.value;
+    setLooking(true);
+    setQuestion(null);
+    try {
+      const r = await fetch(`/api/auth/forgot?username=${encodeURIComponent(name)}`);
+      const j = (await r.json()) as ApiResp<{ username: string; question: string | null }>;
+      if (j.code !== 0 || !j.data) {
+        message.error(j.message || '查询失败');
+        return;
+      }
+      setUsername(j.data.username);
+      setQuestion(j.data.question);
+      if (!j.data.question) {
+        message.warning('该账号未设置密保问题，请改用「人工申诉」');
+      }
+    } catch (e) {
+      message.error(`查询失败：${String(e)}`);
+    } finally {
+      setLooking(false);
+    }
+  };
+
+  const submitReset = async (values: { answer: string; newPassword: string; confirm: string }) => {
+    setResetting(true);
+    try {
+      const r = await fetch('/api/auth/forgot', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          username,
+          answer: values.answer,
+          newPassword: values.newPassword,
+        }),
+      });
+      const j = (await r.json()) as ApiResp<null>;
+      if (j.code !== 0) {
+        message.error(j.message || '重置失败');
+        return;
+      }
+      message.success('密码已重置，请使用新密码登录');
+      router.push('/login');
+    } catch (e) {
+      message.error(`重置失败：${String(e)}`);
+    } finally {
+      setResetting(false);
+    }
+  };
+
+  // ---- 人工申诉 ----
+  const [appealForm] = Form.useForm<{
+    username: string;
+    realName: string;
+    contact: string;
+    detail: string;
+  }>();
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
+  const [appealing, setAppealing] = useState(false);
+  const [appealDone, setAppealDone] = useState(false);
+
+  const submitAppeal = async (values: {
+    username: string;
+    realName: string;
+    contact: string;
+    detail: string;
+  }) => {
+    const fd = new FormData();
+    fd.append('username', values.username.trim());
+    fd.append('realName', values.realName.trim());
+    fd.append('contact', values.contact.trim());
+    fd.append('detail', values.detail.trim());
+    for (const f of fileList) {
+      if (f.originFileObj) fd.append('files', f.originFileObj);
+    }
+
+    setAppealing(true);
+    try {
+      const r = await fetch('/api/account-recovery', { method: 'POST', body: fd });
+      const j = (await r.json()) as ApiResp<{ id: string }>;
+      if (j.code !== 0) {
+        message.error(j.message || '提交失败');
+        return;
+      }
+      setAppealDone(true);
+      setFileList([]);
+      appealForm.resetFields();
+    } catch (e) {
+      message.error(`提交失败：${String(e)}`);
+    } finally {
+      setAppealing(false);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+        backgroundImage:
+          'var(--wb-brand-bg)',
+      }}
+    >
+      <Card
+        style={{
+          width: '100%',
+          maxWidth: 560,
+          borderRadius: 14,
+          boxShadow: 'var(--wb-brand-shadow)',
+        }}
+      >
+        <div style={{ textAlign: 'center', marginBottom: 20 }}>
+          <div
+            style={{
+              width: 44,
+              height: 44,
+              borderRadius: 12,
+              margin: '0 auto 12px',
+              display: 'grid',
+              placeItems: 'center',
+              background: MILITARY.soft,
+              border: `1px solid ${MILITARY.softStrong}`,
+              color: MILITARY.primary,
+            }}
+          >
+            <SafetyCertificateOutlined style={{ fontSize: fs(22) }} />
+          </div>
+          <Title level={3} style={{ marginBottom: 4 }}>
+            找回密码
+          </Title>
+          <Text type="secondary">{APP_NAME} · 通过密保问题或人工申诉找回账号</Text>
+        </div>
+
+        <Segmented
+          block
+          value={mode}
+          onChange={(v) => setMode(v as Mode)}
+          options={[
+            { label: '密保问题找回', value: 'question' },
+            { label: '人工申诉', value: 'appeal' },
+          ]}
+          style={{ marginBottom: 20 }}
+        />
+
+        {mode === 'question' ? (
+          <>
+            <Space.Compact style={{ width: '100%', marginBottom: 16 }}>
+              <Input
+                size="large"
+                prefix={<UserOutlined />}
+                placeholder="请输入用户名"
+                value={username}
+                onChange={(e) => {
+                  setUsername(e.target.value);
+                  setQuestion(null);
+                }}
+                onPressEnter={lookup}
+                autoComplete="username"
+              />
+              <Button size="large" loading={looking} onClick={lookup}>
+                查询密保
+              </Button>
+            </Space.Compact>
+
+            {question ? (
+              <Form form={resetForm} layout="vertical" onFinish={submitReset} requiredMark={false}>
+                <Alert
+                  type="info"
+                  showIcon
+                  style={{ marginBottom: 16 }}
+                  title={`密保问题：${question}`}
+                />
+                <Form.Item
+                  name="answer"
+                  label="密保答案"
+                  rules={[{ required: true, message: '请输入密保答案' }]}
+                >
+                  <Input prefix={<IdcardOutlined />} placeholder="请输入注册时设置的答案" />
+                </Form.Item>
+                <Form.Item
+                  name="newPassword"
+                  label="新密码"
+                  rules={formRules('password', { label: '新密码', required: true })}
+                >
+                  <Input.Password
+                    prefix={<LockOutlined />}
+                    maxLength={64}
+                    placeholder="6-64 位，不能含空格"
+                    autoComplete="new-password"
+                  />
+                </Form.Item>
+                <Form.Item
+                  name="confirm"
+                  label="确认新密码"
+                  dependencies={['newPassword']}
+                  rules={[
+                    { required: true, message: '请再次输入新密码' },
+                    ({ getFieldValue }) => ({
+                      validator: (_r, value) =>
+                        !value || getFieldValue('newPassword') === value
+                          ? Promise.resolve()
+                          : Promise.reject(new Error('两次输入的密码不一致')),
+                    }),
+                  ]}
+                >
+                  <Input.Password
+                    prefix={<LockOutlined />}
+                    placeholder="再次输入"
+                    autoComplete="new-password"
+                  />
+                </Form.Item>
+                <Button type="primary" htmlType="submit" block size="large" loading={resetting}>
+                  重置密码
+                </Button>
+              </Form>
+            ) : (
+              <Alert
+                type="warning"
+                showIcon
+                title="还不知道密保问题？"
+                description="先输入用户名并点击「查询密保」；如果该账号未设置密保或答案也忘了，请切换到「人工申诉」提交证明材料。"
+                style={{ marginBottom: 8 }}
+              />
+            )}
+          </>
+        ) : appealDone ? (
+          <Alert
+            type="success"
+            showIcon
+            title="申诉已提交"
+            description="超级管理员会核实你提交的证明材料，处理结果可在问题反馈中查看。通过后密码将重置为 123456，首次登录需要修改密码。"
+          />
+        ) : (
+          <>
+            <Alert
+              type="info"
+              showIcon
+              style={{ marginBottom: 16 }}
+              title="申诉通过后，密码将重置为 123456"
+              description="请如实填写账号信息，并尽量上传工牌、身份证、入职通知等能证明账号归属的材料。首次使用 123456 登录后，系统会要求你立即修改密码。"
+            />
+            <Form
+              form={appealForm}
+              layout="vertical"
+              onFinish={submitAppeal}
+              requiredMark={false}
+            >
+              <Form.Item
+                name="username"
+                label="要找回的用户名"
+                rules={formRules('username', { label: '用户名', required: true })}
+              >
+                <Input
+                  prefix={<UserOutlined />}
+                  maxLength={32}
+                  placeholder="登录账号"
+                  autoComplete="username"
+                />
+              </Form.Item>
+              <Form.Item
+                name="realName"
+                label="真实姓名"
+                rules={formRules('name', { label: '真实姓名', required: true })}
+              >
+                <Input maxLength={32} placeholder="用于管理员核对身份" />
+              </Form.Item>
+              <Form.Item
+                name="contact"
+                label="联系方式"
+                rules={formRules('contact', { label: '联系方式', required: true })}
+              >
+                <Input maxLength={254} placeholder="手机号或邮箱，方便管理员回访确认" />
+              </Form.Item>
+              <Form.Item
+                name="detail"
+                label="情况说明"
+                rules={[
+                  { required: true, message: '请说明忘记密码的情况' },
+                  { min: 10, message: '至少 10 个字' },
+                ]}
+              >
+                <Input.TextArea
+                  rows={4}
+                  maxLength={500}
+                  showCount
+                  placeholder="例如：我是技术部张三，手机号换了收不到验证码，密保问题也记不清了"
+                />
+              </Form.Item>
+              <Form.Item
+                label="证明材料"
+                extra="支持图片 / PDF / Word / TXT，最多 3 个，每个不超过 10MB"
+              >
+                <Upload
+                  multiple
+                  maxCount={3}
+                  accept=".png,.jpg,.jpeg,.webp,.gif,.pdf,.doc,.docx,.txt"
+                  beforeUpload={() => false}
+                  fileList={fileList}
+                  onChange={({ fileList: next }) => setFileList(next)}
+                >
+                  <Button icon={<UploadOutlined />}>选择文件</Button>
+                </Upload>
+              </Form.Item>
+              <Button type="primary" htmlType="submit" block size="large" loading={appealing}>
+                提交申诉
+              </Button>
+            </Form>
+          </>
+        )}
+
+        {SHOW_DEMO_ACCOUNT_HINT && mode === 'question' && (
+          <Paragraph type="secondary" style={{ fontSize: fs(12), marginTop: 14, marginBottom: 0 }}>
+            演示账号密保：问题「{DEMO_SECURITY_QUESTION}」答案「{DEMO_SECURITY_ANSWER}」
+          </Paragraph>
+        )}
+
+        <div style={{ textAlign: 'center', marginTop: 18 }}>
+          <Link href="/login">
+            <ArrowLeftOutlined /> 返回登录
+          </Link>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/resources/src/app/global-error.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+/**
+ * 最外层错误兜底：连根布局（Providers / antd / 主题）都挂了的时候才会到这里。
+ *
+ * 所以这里刻意**不用 antd、不用任何项目组件、不依赖 globals.css**，
+ * 全部内联样式 —— 能保证在任何情况下都渲染得出来。
+ * 样式仍然沿用军绿，不至于突然变成一张默认白页。
+ */
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html lang="zh-CN">
+      <body
+        style={{
+          margin: 0,
+          minHeight: '100vh',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: '#F2F3EA',
+          color: '#202619',
+          fontFamily:
+            "system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif",
+          padding: 24,
+        }}
+      >
+        <div style={{ maxWidth: 460, textAlign: 'center' }}>
+          <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 10 }}>
+            系统没能启动这一屏
+          </div>
+          <div style={{ fontSize: 13.5, lineHeight: 1.75, color: '#5B6252', marginBottom: 16 }}>
+            页面加载过程中断了。点下面的按钮重新加载；如果反复出现，
+            请确认后端服务（端口 3000）是否还在运行。
+          </div>
+          <div
+            style={{
+              fontSize: 11.5,
+              color: '#8B9181',
+              fontFamily: 'ui-monospace, Consolas, monospace',
+              wordBreak: 'break-all',
+              background: '#F8F9F3',
+              border: '1px solid #EEF0E5',
+              borderRadius: 8,
+              padding: '6px 10px',
+              marginBottom: 18,
+            }}
+          >
+            {error.digest ? `错误编号 ${error.digest}` : error.message || '未知错误'}
+          </div>
+          <button
+            type="button"
+            onClick={reset}
+            style={{
+              padding: '8px 20px',
+              fontSize: 14,
+              color: '#fff',
+              background: '#4E5F3C',
+              border: 'none',
+              borderRadius: 8,
+              cursor: 'pointer',
+            }}
+          >
+            重新加载
+          </button>
+        </div>
+      </body>
+    </html>
+  );
+}

package/resources/src/app/globals.css

@@ -0,0 +1,235 @@
+@import 'tailwindcss';
+/* 操作反馈层（wb-pressable / wb-flash）的视觉定义，
+   跟着 components/feedback 走，不在这里重复写。 */
+@import '../components/feedback/motion.css';
+
+:root {
+  /* 画布与文字跟着皮肤走：--wb-* 由 lib/appearance.ts 生成（见 app/layout.tsx） */
+  --background: var(--wb-bg);
+  --foreground: var(--wb-text);
+  color-scheme: light;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+}
+
+body {
+  background: var(--wb-bg);
+  color: var(--wb-text);
+  /* 基准字号也要吃 --wb-fs：没显式写 font-size 的文字（正文、说明）才跟着放大 */
+  font-size: calc(14px * var(--wb-fs));
+  font-family: system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* 侧边菜单选中项：左侧一条定位条（纯 CSS，兼容性无风险）。
+   深色侧栏用点缀色（卡其/荧光绿），浅色侧栏用主色 —— 否则浅底上白条看不见。 */
+.ant-menu-dark .ant-menu-item-selected,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title {
+  box-shadow: inset 3px 0 0 var(--wb-sider-mark);
+}
+/* 含选中项的分组（一级）标题：文字色必须单独拉回侧栏强色。
+   根因：antd 深色 Menu 把「选中项文字色」和「分组标题文字色」绑在同一个 token 上
+   （node_modules/antd/es/menu/style/index.js：subMenuItemSelectedColor = darkItemSelectedColor），
+   而分组标题并没有选中项那块高亮底 —— 炫酷皮肤的选中项是「亮绿底 + 近黑字」，
+   标题沿用同一文字色就变成「近黑字压近黑舱壁」，点开二级菜单后一级标题像消失
+   了一样（2026-10-23 实测）。选中项自己的文字色不动（亮底深字对比度足够），
+   这里只修标题。用 .ant-menu-root 把特异性抬到 (0,4,0)，压过 antd 运行时注入的
+   (0,3,0) 规则，不依赖两张样式表的先后顺序。 */
+.ant-menu-dark.ant-menu-root .ant-menu-submenu-selected > .ant-menu-submenu-title {
+  color: var(--wb-sider-text-strong);
+}
+.ant-menu-light .ant-menu-item-selected {
+  box-shadow: inset 3px 0 0 var(--wb-primary);
+}
+
+/* ---------------------------------------------------------------
+   侧栏品牌标题（系统名 / 副标题）
+   222px 的侧栏里，扣掉左右各 16px 内边距、26px 标识块和 10px 间距，
+   留给系统名的只有 **154px** —— 15px/字距 1.2 的中文一行只放得下约 9 个字。
+   以前标题既不约束宽度也不限制行数、品牌行又是固定 height:56px，于是：
+     · 系统名一超过 9 个字就自己折行，12 个字就折成 2 行；
+     · 折行后整块内容 52px 塞进 56px 固定高，副标题被顶到标题脚下，
+       12~18 个字时品牌区明显挤成一团（2026-10-23 实测）。
+   现在：标题最多 2 行（第 3 行起省略号，完整名字由 title 属性兜），
+   行高 1.35 给足呼吸；品牌行改成 min-height + 内边距，行数变多时**自己长高**。
+   text-wrap: balance 让 12 个字折成 6+6，而不是 9+3 留一个孤零零的「系统」。
+   --------------------------------------------------------------- */
+.wb-brand-title {
+  font-weight: 600;
+  letter-spacing: 1.2px;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  text-wrap: balance;
+}
+
+/* 副标题永远单行：它是"一句话定位"，多行会把品牌区撑得比正文还重 */
+.wb-brand-sub {
+  margin-top: 2px;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* AI 思考中的三点指示：纯 keyframes，不依赖任何新特性 */
+@keyframes ai-dot-bounce {
+  0%,
+  80%,
+  100% {
+    opacity: 0.25;
+    transform: translateY(0);
+  }
+  40% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
+
+.ai-typing-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--wb-primary);
+  display: inline-block;
+  animation: ai-dot-bounce 1.2s infinite ease-in-out;
+}
+.ai-typing-dot:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.ai-typing-dot:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+/* ---------------------------------------------------------------
+   等待反馈体系（components/feedback）的动画底座。
+   全部是 keyframes + 背景位移，没有任何 filter / backdrop-filter，
+   老内核和离线浏览器都不会掉帧。
+   --------------------------------------------------------------- */
+
+/* 骨架屏流光：用背景位移做，比 opacity 闪烁稳定（不会和 antd 的 loading 抢合成层） */
+@keyframes wb-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.wb-skeleton {
+  background-image: linear-gradient(
+    90deg,
+    var(--wb-skeleton-a) 25%,
+    var(--wb-skeleton-b) 40%,
+    var(--wb-skeleton-a) 55%
+  );
+  background-size: 400% 100%;
+  animation: wb-shimmer 1.5s ease-in-out infinite;
+  border-radius: 6px;
+}
+
+/* 全局等待浮层：从右下淡入并轻轻上移，出现得"有礼貌"，不打断视线 */
+@keyframes wb-hint-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.wb-hint-enter {
+  animation: wb-hint-in 0.22s ease-out both;
+}
+
+/* 不确定进度条：一段高光在轨道里循环滑过，表示"在动但不知道多久" */
+@keyframes wb-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(260%);
+  }
+}
+
+.wb-indeterminate-bar {
+  animation: wb-indeterminate 1.4s ease-in-out infinite;
+}
+
+/* 顶部路由进度条：完成时向右淡出 */
+@keyframes wb-route-done {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* 通用旋转：全局浮层的小圈、以及任何需要"在转"的地方 */
+@keyframes wb-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 选中文字用主色系，和当前皮肤呼应 */
+::selection {
+  background: var(--wb-selection);
+  color: var(--wb-selection-text);
+}
+
+/* 顶栏在窄屏下的收缩策略：优先保住业务内容（搜索、统计、头像），
+   把「用户姓名 / 搜索框提示语 / 统计项文字」这些可悬停补全的部分收起来。
+   否则新增的统计条会把头像挤出可视区。 */
+@media (max-width: 1180px) {
+  .header-search-trigger {
+    min-width: 0 !important;
+    padding: 0 8px !important;
+  }
+  .header-search-label,
+  .header-search-kbd,
+  .header-user-name {
+    display: none;
+  }
+}
+
+@media (max-width: 900px) {
+  .visit-stats {
+    gap: 8px !important;
+    padding: 0 8px !important;
+  }
+  .visit-stat-label {
+    display: none;
+  }
+}
+
+/* 滚动条也收敛到当前色系，避免出现系统默认的亮蓝细条 */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--wb-scrollbar);
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--wb-scrollbar-hover);
+  background-clip: padding-box;
+}