node-resource-utils 0.0.0-stage → 1.1.7

package/resources/src/app/(admin)/dashboard/page.tsx

@@ -0,0 +1,260 @@
+'use client';
+
+import { useEffect, useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { Alert, App, Card, Col, Row, Table, Tag, Typography } from 'antd';
+import { HOME_STATS, HOME_WELCOME, IS_CONFIGURED } from '@/lib/appInfo';
+import { iconOf } from '@/components/admin/menu-icons';
+import type { ColumnsType } from 'antd/es/table';
+import {
+  ApartmentOutlined,
+  FileTextOutlined,
+  IdcardOutlined,
+  SafetyCertificateOutlined,
+  TeamOutlined,
+} from '@ant-design/icons';
+import type { EChartsCoreOption } from 'echarts/core';
+import EChart from '@/components/EChart';
+import { StatCard } from '@/components/feedback';
+import { fmtDateTime } from '@/lib/format';
+import { fs, MILITARY } from '@/lib/theme';
+import { useChartPalette, useSkinInk } from '@/components/appearance/AppearanceProvider';
+
+type LogRow = {
+  id: string;
+  username: string | null;
+  module: string;
+  action: string;
+  path: string | null;
+  status: number;
+  createdAt: string;
+};
+
+type Stats = {
+  userCount: number;
+  roleCount: number;
+  empCount: number;
+  deptCount: number;
+  logCount: number;
+  empByDept: { name: string; value: number }[];
+  empTrend: { date: string; count: number }[];
+  genderRatio: { name: string; value: number }[];
+  recentLogs: LogRow[];
+};
+
+const logColumns: ColumnsType<LogRow> = [
+  { title: '时间', dataIndex: 'createdAt', width: 180, render: (v: string) => fmtDateTime(v) },
+  { title: '操作人', dataIndex: 'username', width: 120, render: (v: string | null) => v || '-' },
+  { title: '模块', dataIndex: 'module', width: 120 },
+  { title: '动作', dataIndex: 'action', width: 100 },
+  { title: '路径', dataIndex: 'path', ellipsis: true, render: (v: string | null) => v || '-' },
+  {
+    title: '结果',
+    dataIndex: 'status',
+    width: 90,
+    render: (v: number) => (v === 1 ? <Tag color="success">成功</Tag> : <Tag color="error">失败</Tag>),
+  },
+];
+
+export default function DashboardPage() {
+  const { message } = App.useApp();
+  /** 图表不认 CSS 变量：色板与关键色都取当前皮肤的字面色 */
+  const palette = useChartPalette();
+  const ink = useSkinInk();
+
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: ['stats'],
+    queryFn: async (): Promise<Stats> => {
+      const { data } = await axios.get('/api/stats');
+      if (!data || data.code !== 0) throw new Error(data?.message || '加载失败');
+      return data.data as Stats;
+    },
+  });
+
+  useEffect(() => {
+    if (isError) message.error(`看板数据加载失败：${(error as Error).message}`);
+  }, [isError, error, message]);
+
+  // echarts 的 option 每次都是新对象，useMemo 让图表只在数据变化时重新 setOption
+  const deptOption = useMemo<EChartsCoreOption>(
+    () => ({
+      tooltip: { trigger: 'axis' },
+      grid: { left: 48, right: 24, top: 32, bottom: 48 },
+      xAxis: {
+        type: 'category',
+        data: (data?.empByDept ?? []).map((d) => d.name),
+        axisLabel: { interval: 0 },
+      },
+      yAxis: { type: 'value', minInterval: 1 },
+      series: [
+        {
+          type: 'bar',
+          data: (data?.empByDept ?? []).map((d) => d.value),
+          barMaxWidth: 42,
+          itemStyle: { borderRadius: [4, 4, 0, 0], color: ink.primary },
+          label: { show: true, position: 'top' },
+        },
+      ],
+    }),
+    [data?.empByDept, ink]
+  );
+
+  const genderOption = useMemo<EChartsCoreOption>(
+    () => ({
+      tooltip: { trigger: 'item' },
+      color: palette,
+      legend: { bottom: 0 },
+      series: [
+        {
+          type: 'pie',
+          radius: ['45%', '70%'],
+          center: ['50%', '45%'],
+          data: data?.genderRatio ?? [],
+          label: { formatter: '{b}: {c} 人' },
+          emphasis: { itemStyle: { shadowBlur: 12, shadowColor: 'rgba(0,0,0,.25)' } },
+        },
+      ],
+    }),
+    [data?.genderRatio, palette]
+  );
+
+  const trendOption = useMemo<EChartsCoreOption>(
+    () => ({
+      tooltip: { trigger: 'axis' },
+      grid: { left: 48, right: 24, top: 32, bottom: 48 },
+      xAxis: { type: 'category', data: (data?.empTrend ?? []).map((d) => d.date) },
+      yAxis: { type: 'value', minInterval: 1 },
+      series: [
+        {
+          type: 'line',
+          smooth: true,
+          data: (data?.empTrend ?? []).map((d) => d.count),
+          areaStyle: { opacity: 0.12 },
+          itemStyle: { color: palette[1] },
+        },
+      ],
+    }),
+    [data?.empTrend, palette]
+  );
+
+  const cards = useMemo(() => {
+    // ★ 未配置（APP_NAME 还是默认值）时走脚手架自带的 5 张卡，保留下钻链接，
+    //   保证"刚解压就能演示"；一旦按题目配过，就完全由 appInfo.ts 的 HOME_STATS 决定。
+    //   以前这里写死卡片、HOME_STATS 只是摆设 —— 提示词让 AI 改 appInfo，
+    //   改完首页却一点没变，check:config 还照样通过，等于白改。
+    if (!IS_CONFIGURED) {
+      return [
+        { title: '用户总数', value: data?.userCount, icon: <TeamOutlined />, color: palette[0], href: '/system/users', suffix: undefined },
+        { title: '角色数量', value: data?.roleCount, icon: <SafetyCertificateOutlined />, color: palette[1], href: '/system/roles', suffix: undefined },
+        { title: '员工总数', value: data?.empCount, icon: <IdcardOutlined />, color: palette[2], href: '/demo/employees', suffix: undefined },
+        { title: '部门数量', value: data?.deptCount, icon: <ApartmentOutlined />, color: palette[3], href: '/system/depts', suffix: undefined },
+        { title: '操作日志', value: data?.logCount, icon: <FileTextOutlined />, color: palette[4], href: '/system/logs', suffix: undefined },
+      ];
+    }
+    // 业务指标：数字按 key 从 /api/stats 取，取不到就显示 0（不编造）
+    const raw = (data ?? {}) as unknown as Record<string, number | undefined>;
+    return HOME_STATS.map((s, i) => ({
+      title: s.label,
+      value: raw[s.key],
+      icon: iconOf(s.icon),
+      color: s.color ?? palette[i % palette.length],
+      href: s.href,
+      suffix: s.suffix,
+    }));
+  }, [data, palette]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* 页头：和 AI 中心保持同一套「小标题 + 主标题」节奏 */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'space-between',
+          gap: 12,
+          flexWrap: 'wrap',
+        }}
+      >
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <span style={{ width: 6, height: 6, background: MILITARY.accent, display: 'inline-block' }} />
+            <span style={{ fontSize: fs(10.5), letterSpacing: 3, color: MILITARY.textMuted, fontWeight: 600 }}>
+              OVERVIEW
+            </span>
+          </div>
+          <div style={{ fontSize: fs(20), fontWeight: 700, color: MILITARY.text, marginTop: 4 }}>工作台</div>
+          {/* 欢迎语是 appInfo 里的可配置项：填了就在标题下显示一行业务语境 */}
+          {HOME_WELCOME ? (
+            <div style={{ fontSize: fs(12), color: MILITARY.textMuted, marginTop: 4 }}>{HOME_WELCOME}</div>
+          ) : null}
+        </div>
+        <div style={{ fontSize: fs(12), color: MILITARY.textMuted }}>统计口径：当前数据库全量数据</div>
+      </div>
+        {/* ★ 未配置警告：APP_NAME 还是默认值，说明还没按题目配置。
+            目的是让"忘了改"不可能被忽略。改完 appInfo.ts 后自动消失。 */}
+        {!IS_CONFIGURED && (
+          <Alert
+            type="error"
+            showIcon
+            banner
+            title="首页还是脚手架默认内容，请先配置系统身份"
+            description={
+              <div>
+                修改 <Typography.Text code>src/lib/appInfo.ts</Typography.Text>：
+                把 <Typography.Text code>APP_NAME</Typography.Text> 改成题目里的系统名、
+                <Typography.Text code>HOME_STATS</Typography.Text> 换成业务指标、
+                把本页图表换成业务相关的内容、
+                把 <Typography.Text code>SHOW_DEMO_ACCOUNT_HINT</Typography.Text> 设为 false。
+                然后运行 <Typography.Text code>npm run check:config</Typography.Text> 校验。
+              </div>
+            }
+          />
+        )}
+      <Row gutter={[16, 16]}>
+        {cards.map((c) => (
+          <Col key={c.title} xs={12} sm={8} md={8} lg={Math.floor(24 / cards.length)} xl={Math.floor(24 / cards.length)}>
+            <StatCard
+              title={c.title}
+              value={c.value}
+              icon={c.icon}
+              color={c.color}
+              href={c.href}
+              suffix={c.suffix}
+              loading={isLoading}
+            />
+          </Col>
+        ))}
+      </Row>
+
+      <Row gutter={[16, 16]}>
+        <Col xs={24} lg={14}>
+          <Card title="各部门人数" style={{ boxShadow: MILITARY.shadowSm, border: `1px solid ${MILITARY.borderSoft}` }}>
+            <EChart option={deptOption} loading={isLoading} height={300} />
+          </Card>
+        </Col>
+        <Col xs={24} lg={10}>
+          <Card title="员工性别分布" style={{ boxShadow: MILITARY.shadowSm, border: `1px solid ${MILITARY.borderSoft}` }}>
+            <EChart option={genderOption} loading={isLoading} height={300} />
+          </Card>
+        </Col>
+      </Row>
+
+      <Card title="月度入职趋势" style={{ boxShadow: MILITARY.shadowSm, border: `1px solid ${MILITARY.borderSoft}` }}>
+        <EChart option={trendOption} loading={isLoading} height={260} />
+      </Card>
+
+      <Card title="最近操作" style={{ boxShadow: MILITARY.shadowSm, border: `1px solid ${MILITARY.borderSoft}` }}>
+        <Table<LogRow>
+          rowKey="id"
+          size="small"
+          columns={logColumns}
+          dataSource={data?.recentLogs ?? []}
+          loading={isLoading}
+          pagination={false}
+          locale={{ emptyText: '暂无操作记录' }}
+        />
+      </Card>
+    </div>
+  );
+}