node-resource-utils 0.0.0-stage → 1.1.8

package/resources/src/components/admin/VisitStats.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useCallback, useEffect, useState, type ReactNode } from 'react';
+import { Tooltip } from 'antd';
+import { EyeOutlined, RiseOutlined } from '@ant-design/icons';
+import {
+  ONLINE_WINDOW_MS,
+  VISIT_REFRESH_MS,
+  VISIT_STATS_EVENT,
+  formatVisitCount,
+  type VisitStats as VisitStatsData,
+} from '@/lib/visits';
+import { fs, MILITARY } from '@/lib/theme';
+
+/**
+ * 顶栏访问统计：在线人数 / 今日访问 / 总访问量。
+ *
+ * 做成独立组件而不是塞进 AdminShell：
+ *   以后要看板、大屏、登录页复用同一组数字，直接 <VisitStats /> 即可，
+ *   取数口径和刷新策略（30 秒轮询 + 回到前台刷新 + 埋点成功后立即刷新）都在这里，
+ *   各页面不需要各写一遍，也不会出现"首页和顶栏数字对不上"。
+ *
+ * 统计是旁路信息：拉取失败保持上一次的值，绝不弹错、绝不阻塞页面。
+ */
+export default function VisitStats() {
+  const [stats, setStats] = useState<VisitStatsData | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      const res = await fetch('/api/visits', { cache: 'no-store' });
+      const json = (await res.json()) as { code: number; data?: VisitStatsData };
+      if (json?.code === 0 && json.data) setStats(json.data);
+    } catch {
+      /* 静默：统计不是业务数据，拉不到就继续显示上一次的值 */
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+
+    const refresh = () => {
+      if (document.visibilityState === 'visible') void load();
+    };
+    const timer = window.setInterval(refresh, VISIT_REFRESH_MS);
+    // 埋点写入成功 → 立即刷新，自己的访问不用等下一轮轮询才出现
+    window.addEventListener(VISIT_STATS_EVENT, refresh);
+    document.addEventListener('visibilitychange', refresh);
+    window.addEventListener('focus', refresh);
+    return () => {
+      window.clearInterval(timer);
+      window.removeEventListener(VISIT_STATS_EVENT, refresh);
+      document.removeEventListener('visibilitychange', refresh);
+      window.removeEventListener('focus', refresh);
+    };
+  }, [load]);
+
+  return (
+    <div
+      data-testid="visit-stats"
+      className="visit-stats"
+      aria-label="访问统计"
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        height: 32,
+        padding: '0 12px',
+        borderRadius: 9,
+        background: MILITARY.paper,
+        border: `1px solid ${MILITARY.borderSoft}`,
+        whiteSpace: 'nowrap',
+      }}
+    >
+      <Metric
+        label="在线"
+        value={stats?.online}
+        tip={`最近 ${Math.round(ONLINE_WINDOW_MS / 60_000)} 分钟内有活动的人数（同一浏览器多标签只算 1 人）`}
+        marker={
+          <span
+            style={{
+              width: 6,
+              height: 6,
+              borderRadius: '50%',
+              background: MILITARY.success,
+              boxShadow: `0 0 0 3px ${MILITARY.success}22`,
+            }}
+          />
+        }
+      />
+      <Separator />
+      <Metric
+        label="今日"
+        value={stats?.today}
+        tip="今天 00:00 起的页面浏览量（PV）"
+        marker={<RiseOutlined style={{ fontSize: fs(11), color: MILITARY.warning }} />}
+      />
+      <Separator />
+      <Metric
+        label="总访问"
+        value={stats?.total}
+        tip="上线以来的累计页面浏览量（PV）"
+        marker={<EyeOutlined style={{ fontSize: fs(12), color: MILITARY.primary }} />}
+      />
+    </div>
+  );
+}
+
+function Separator() {
+  return <span style={{ width: 1, height: 14, background: MILITARY.border, flex: '0 0 auto' }} />;
+}
+
+function Metric({
+  label,
+  value,
+  tip,
+  marker,
+}: {
+  label: string;
+  value: number | null | undefined;
+  tip: string;
+  marker: ReactNode;
+}) {
+  return (
+    <Tooltip title={tip}>
+      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, cursor: 'default' }}>
+        <span style={{ display: 'inline-flex', alignItems: 'center', flex: '0 0 auto' }}>{marker}</span>
+        <span style={{ fontSize: fs(12), color: MILITARY.textMuted }} className="visit-stat-label">
+          {label}
+        </span>
+        <span
+          style={{
+            minWidth: 16,
+            fontSize: fs(13),
+            fontWeight: 600,
+            color: MILITARY.text,
+            fontVariantNumeric: 'tabular-nums',
+            letterSpacing: 0,
+          }}
+        >
+          {formatVisitCount(value)}
+        </span>
+      </span>
+    </Tooltip>
+  );
+}

package/resources/src/components/admin/menu-icons.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import {
+  ApartmentOutlined,
+  AppstoreOutlined,
+  AuditOutlined,
+  BellOutlined,
+  ClockCircleOutlined,
+  DashboardOutlined,
+  FileTextOutlined,
+  FileWordOutlined,
+  IdcardOutlined,
+  LineChartOutlined,
+  MenuOutlined,
+  MessageOutlined,
+  QuestionCircleOutlined,
+  RobotOutlined,
+  SafetyCertificateOutlined,
+  SettingOutlined,
+  TeamOutlined,
+  ThunderboltOutlined,
+} from '@ant-design/icons';
+
+/**
+ * 菜单 / 搜索共用的「字符串 → 图标」映射表。
+ *
+ * 为什么不用 `import * as Icons from '@ant-design/icons'`：
+ * 后者会把上千个图标全打进产物（几 MB），按需映射既小又可控。
+ *
+ * 新增菜单用到表外的图标时，在这里补一行即可 ——
+ * 侧边栏、面包屑、全局搜索三处都会自动跟上。
+ */
+const ICONS: Record<string, ReactNode> = {
+  DashboardOutlined: <DashboardOutlined />,
+  SettingOutlined: <SettingOutlined />,
+  TeamOutlined: <TeamOutlined />,
+  SafetyCertificateOutlined: <SafetyCertificateOutlined />,
+  MenuOutlined: <MenuOutlined />,
+  FileTextOutlined: <FileTextOutlined />,
+  FileWordOutlined: <FileWordOutlined />,
+  AppstoreOutlined: <AppstoreOutlined />,
+  IdcardOutlined: <IdcardOutlined />,
+  ApartmentOutlined: <ApartmentOutlined />,
+  ThunderboltOutlined: <ThunderboltOutlined />,
+  LineChartOutlined: <LineChartOutlined />,
+  AuditOutlined: <AuditOutlined />,
+  RobotOutlined: <RobotOutlined />,
+  MessageOutlined: <MessageOutlined />,
+  ClockCircleOutlined: <ClockCircleOutlined />,
+  QuestionCircleOutlined: <QuestionCircleOutlined />,
+  BellOutlined: <BellOutlined />,
+};
+
+export function iconOf(name?: string | null): ReactNode {
+  if (!name) return undefined;
+  return ICONS[name] ?? <AppstoreOutlined />;
+}

package/resources/src/components/ai/AiInputForm.tsx

@@ -0,0 +1,351 @@
+'use client';
+
+import { useCallback, useMemo, useState } from 'react';
+import { Button, DatePicker, Input, InputNumber, Select, Switch } from 'antd';
+import { CheckCircleOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+import { fs, MILITARY } from '@/lib/theme';
+import { displayValue, type FormCard, type FormFieldSpec } from '@/lib/aiFormTypes';
+import { inferValidationType, validateField } from '@/lib/validation';
+
+const { TextArea } = Input;
+
+/**
+ * AI 输入表单卡 —— 模型要信息时，用户在对话里直接填，不用手打格式。
+ *
+ * ★ 为什么不做成聊天框里的"请提供开始日期、结束日期、事由"：
+ *   - 字段一多就漏（用户只回答了两个，模型又得追问一轮）
+ *   - 日期写成"下周三"模型还要换算，换算就可能错
+ *   - 枚举值（请假类型、紧急程度）用户不知道合法取值，只能猜
+ *   控件把这些不确定都消掉了：日期只能是日期，枚举只能是选项里的一个。
+ *
+ * ★ 控件类型完全由服务端下发的 kind 决定，组件里没有一行业务判断。
+ *   换业务（请销假 / 派车 / 报销）时这个文件不需要改。
+ *
+ * ★ 状态放在卡片上而不是组件内：
+ *   用户提交后要等 SSE 回来（可能生成确认卡，也可能再补一张表单），
+ *   状态得跟着消息走，否则用户往上翻历史会看到"提交按钮又出现了"。
+ */
+export interface AiInputFormProps {
+  card: FormCard;
+  onSubmit: (values: Record<string, unknown>) => void;
+  onCancel: () => void;
+}
+
+function blank(v: unknown): boolean {
+  if (v === undefined || v === null) return true;
+  if (typeof v === 'string') return v.trim() === '';
+  return false;
+}
+
+function initialValues(card: FormCard): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const f of card.spec.fields) {
+    out[f.name] = f.value ?? undefined;
+  }
+  return out;
+}
+
+/** 服务端没给 validation 时，按字段名/标签兜底推断；数字、日期控件按控件类型兜底 */
+function validationTypeOf(field: FormFieldSpec): string {
+  // 枚举/外键/布尔的值是选项或 id，不是用户手输的文本，不能套手机号/邮箱规则
+  if (field.kind === 'enum' || field.kind === 'fk' || field.kind === 'boolean') return 'text';
+  if (field.validation) return field.validation;
+  const inferred = inferValidationType(field.name, field.label, field.hint);
+  if (inferred) return inferred;
+  if (field.kind === 'number') return 'number';
+  if (field.kind === 'date') return 'date';
+  return 'text';
+}
+
+export default function AiInputForm({ card, onSubmit, onCancel }: AiInputFormProps) {
+  const { spec, status } = card;
+  const [values, setValues] = useState<Record<string, unknown>>(() => initialValues(card));
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const editable = status === 'pending' || status === 'failed';
+
+  const setValue = useCallback((name: string, v: unknown) => {
+    setValues((prev) => ({ ...prev, [name]: v }));
+    setErrors((prev) => {
+      if (!prev[name]) return prev;
+      const next = { ...prev };
+      delete next[name];
+      return next;
+    });
+  }, []);
+
+  const submit = useCallback(() => {
+    const errs: Record<string, string> = {};
+    const clean: Record<string, unknown> = { ...values };
+    for (const f of spec.fields) {
+      const result = validateField(validationTypeOf(f), values[f.name], {
+        label: f.label,
+        required: f.required,
+      });
+      if (!result.ok) {
+        errs[f.name] = result.message;
+      } else if (!blank(values[f.name])) {
+        // 文本类用规整后的值（身份证 X 大写、手机号去掉 +86/空格等）；
+        // 数字/枚举/外键/布尔保持原类型，避免把 number 变成字符串传给工具
+        if (f.kind === 'number') {
+          clean[f.name] = Number(result.value);
+        } else if (f.kind === 'boolean' || f.kind === 'enum' || f.kind === 'fk') {
+          clean[f.name] = values[f.name];
+        } else {
+          clean[f.name] = result.value;
+        }
+      }
+    }
+    setErrors(errs);
+    if (Object.keys(errs).length) return;
+    onSubmit(clean);
+  }, [onSubmit, spec.fields, values]);
+
+  const filledCount = useMemo(
+    () => spec.fields.filter((f) => !blank(values[f.name])).length,
+    [spec.fields, values]
+  );
+
+  /* ---------------- 已提交：只读摘要 ---------------- */
+  if (status === 'done') {
+    return (
+      <div style={cardStyle(MILITARY.success)} data-testid="ai-input-form" data-form-state="done">
+        <Head icon={<CheckCircleOutlined />} color={MILITARY.success} title={`已提交：${spec.title}`} />
+        <div style={{ marginTop: 8, borderTop: `1px dashed ${MILITARY.border}`, paddingTop: 8 }}>
+          {spec.fields
+            .filter((f) => !blank(values[f.name]))
+            .map((f) => (
+              <div key={f.name} style={{ display: 'flex', gap: 8, fontSize: fs(12), lineHeight: '20px' }}>
+                <span style={{ flex: '0 0 76px', color: MILITARY.textMuted }}>{f.label}</span>
+                <span style={{ color: MILITARY.text, wordBreak: 'break-all' }}>
+                  {displayValue(f, values[f.name])}
+                </span>
+              </div>
+            ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (status === 'cancelled') {
+    return (
+      <div style={cardStyle(MILITARY.border)} data-testid="ai-input-form" data-form-state="cancelled">
+        <Head icon={<EditOutlined />} color={MILITARY.textMuted} title={spec.title} />
+        <div style={{ fontSize: fs(12), color: MILITARY.textMuted, marginTop: 6 }}>
+          已取消，没有提交任何内容
+        </div>
+      </div>
+    );
+  }
+
+  /* ---------------- 待填写 / 提交中 / 失败重试 ---------------- */
+  return (
+    <div
+      style={cardStyle(status === 'failed' ? MILITARY.error : MILITARY.accent)}
+      data-testid="ai-input-form"
+      data-form-state={status}
+      data-form-tool={spec.tool ?? ''}
+    >
+      <Head
+        icon={<EditOutlined />}
+        color={status === 'failed' ? MILITARY.error : MILITARY.accent}
+        title={spec.title}
+        extra={`${filledCount}/${spec.fields.length}`}
+      />
+
+      {spec.description && (
+        <div style={{ fontSize: fs(12), color: MILITARY.textSecondary, margin: '4px 0 10px', lineHeight: '18px' }}>
+          {spec.description}
+        </div>
+      )}
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
+        {spec.fields.map((f) => (
+          <Field
+            key={f.name}
+            field={f}
+            value={values[f.name] !== undefined ? values[f.name] : f.value}
+            error={errors[f.name]}
+            disabled={!editable}
+            onChange={(v) => setValue(f.name, v)}
+          />
+        ))}
+      </div>
+
+      {status === 'failed' && card.error && (
+        <div style={{ marginTop: 8, fontSize: fs(11.5), color: MILITARY.error, display: 'flex', gap: 4 }}>
+          <ExclamationCircleOutlined style={{ marginTop: 2 }} />
+          <span>{card.error}</span>
+        </div>
+      )}
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, flexWrap: 'wrap' }}>
+        <Button
+          size="small"
+          type="primary"
+          loading={status === 'submitting'}
+          disabled={!editable}
+          onClick={submit}
+          data-testid="ai-form-submit"
+        >
+          提交
+        </Button>
+        <Button
+          size="small"
+          disabled={status === 'submitting'}
+          onClick={onCancel}
+          data-testid="ai-form-cancel"
+        >
+          取消
+        </Button>
+        <span style={{ fontSize: fs(11), color: MILITARY.textMuted }}>
+          {spec.mode === 'fill' ? '提交后生成确认卡，确认才写库' : '提交后我会继续处理'}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------ 子组件 ------------------------------ */
+
+function cardStyle(accent: string): React.CSSProperties {
+  return {
+    marginTop: 8,
+    border: `1px solid ${MILITARY.softStrong}`,
+    borderLeft: `3px solid ${accent}`,
+    borderRadius: 8,
+    background: MILITARY.card,
+    padding: '10px 12px',
+  };
+}
+
+function Head({
+  icon,
+  color,
+  title,
+  extra,
+}: {
+  icon: React.ReactNode;
+  color: string;
+  title: string;
+  extra?: string;
+}) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+      <span style={{ color, fontSize: fs(13), display: 'inline-flex' }}>{icon}</span>
+      <span style={{ fontSize: fs(12.5), fontWeight: 500, color: MILITARY.text, minWidth: 0 }}>
+        {title}
+      </span>
+      <span style={{ flex: 1 }} />
+      {extra && <span style={{ fontSize: fs(11), color: MILITARY.textMuted }}>{extra}</span>}
+    </div>
+  );
+}
+
+function Field({
+  field,
+  value,
+  error,
+  disabled,
+  onChange,
+}: {
+  field: FormFieldSpec;
+  value: unknown;
+  error?: string;
+  disabled: boolean;
+  onChange: (v: unknown) => void;
+}) {
+  const common = {
+    size: 'small' as const,
+    disabled,
+    status: (error ? 'error' : undefined) as 'error' | undefined,
+    style: { width: '100%' },
+  };
+
+  let control: React.ReactNode;
+  switch (field.kind) {
+    case 'longtext':
+      control = (
+        <TextArea
+          {...common}
+          value={value === undefined || value === null ? '' : String(value)}
+          placeholder={field.placeholder}
+          autoSize={{ minRows: 2, maxRows: 4 }}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      );
+      break;
+    case 'number':
+      control = (
+        <InputNumber
+          {...common}
+          value={value === undefined || value === null || value === '' ? null : Number(value)}
+          placeholder={field.placeholder}
+          onChange={(v) => onChange(v ?? '')}
+        />
+      );
+      break;
+    case 'boolean':
+      control = (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, height: 24 }}>
+          <Switch size="small" checked={Boolean(value)} disabled={disabled} onChange={onChange} />
+          <span style={{ fontSize: fs(12), color: MILITARY.textSecondary }}>
+            {value ? '是' : '否'}
+          </span>
+        </div>
+      );
+      break;
+    case 'date':
+      control = (
+        <DatePicker
+          {...common}
+          value={value ? dayjs(String(value)) : null}
+          placeholder={field.placeholder}
+          format="YYYY-MM-DD"
+          onChange={(d) => onChange(d ? d.format('YYYY-MM-DD') : '')}
+        />
+      );
+      break;
+    case 'enum':
+    case 'fk':
+      control = (
+        <Select
+          {...common}
+          value={value === undefined || value === null || value === '' ? undefined : (value as string | number)}
+          placeholder={field.placeholder}
+          allowClear
+          showSearch={field.kind === 'fk'}
+          optionFilterProp="label"
+          options={(field.options ?? []).map((o) => ({ label: o.label, value: o.value }))}
+          onChange={(v) => onChange(v ?? '')}
+          notFoundContent={field.kind === 'fk' ? '没有可选数据' : '没有选项'}
+        />
+      );
+      break;
+    default:
+      control = (
+        <Input
+          {...common}
+          value={value === undefined || value === null ? '' : String(value)}
+          placeholder={field.placeholder}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      );
+  }
+
+  return (
+    <div data-testid={`ai-form-field-${field.name}`} data-field-kind={field.kind}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 3 }}>
+        <span style={{ fontSize: fs(11.5), color: MILITARY.textSecondary }}>{field.label}</span>
+        {field.required && <span style={{ color: MILITARY.error, fontSize: fs(11) }}>*</span>}
+      </div>
+      {control}
+      {error ? (
+        <div style={{ fontSize: fs(11), color: MILITARY.error, marginTop: 2 }}>{error}</div>
+      ) : field.hint ? (
+        <div style={{ fontSize: fs(11), color: MILITARY.textMuted, marginTop: 2 }}>{field.hint}</div>
+      ) : null}
+    </div>
+  );
+}