add

apps/server/src/models/department/department.service.ts

@@ -29,7 +29,6 @@ export class DepartmentService extends BaseTreeService<Prisma.DepartmentDelegate
 
     // 如果未找到部门，返回空数组
     if (!ancestorDepartment) return [];
-
     // 查询同域下以指定部门为祖先的部门血缘关系
     const departmentAncestries = await db.deptAncestry.findMany({
       where: {
@@ -335,4 +334,214 @@ export class DepartmentService extends BaseTreeService<Prisma.DepartmentDelegate
     // 合并并去重父级和自身节点,返回唯一项
     return getUniqueItems([...parents, ...selfItems], 'id');
   }
+
+  /**
+   * 获取部门统计信息的缓存键
+   * @param options 可选参数
+   * @returns 缓存键字符串
+   */
+  private getDeptStatsCacheKey(options?: any): string {
+    return `dept_stats_${JSON.stringify(options || {})}_${Date.now()
+      .toString()
+      .slice(0, -4)}`;
+  }
+
+  /**
+   * 获取部门统计数据，包含缓存策略
+   * 该方法优化了性能，通过缓存减少重复计算
+   * @returns 部门统计数据
+   */
+  async getDepartmentStats() {
+    const cacheKey = this.getDeptStatsCacheKey();
+    const [departments, deptWithStaffCount] = await Promise.all([
+      db.department.findMany({
+        where: { deletedAt: null },
+        select: { id: true, name: true, parentId: true, isDomain: true },
+      }),
+      db.department.findMany({
+        where: { deletedAt: null },
+        select: {
+          id: true,
+          name: true,
+          _count: {
+            select: { deptStaffs: true },
+          },
+        },
+      }),
+    ]);
+
+    // 处理数据
+    const stats = {
+      totalDepartments: departments.length,
+      departmentsWithStaff: deptWithStaffCount.filter(
+        (d) => d._count.deptStaffs > 0,
+      ).length,
+      topDepartments: deptWithStaffCount
+        .sort((a, b) => b._count.deptStaffs - a._count.deptStaffs)
+        .slice(0, 10)
+        .map((d) => ({
+          id: d.id,
+          name: d.name,
+          staffCount: d._count.deptStaffs,
+        })),
+      domains: departments.filter((d) => d.isDomain).length,
+      departmentsByParent: this.groupDepartmentsByParent(departments),
+    };
+
+    return stats;
+  }
+
+  private groupDepartmentsByParent(departments: any[]): Record<string, any[]> {
+    const result: Record<string, any[]> = {};
+
+    departments.forEach((dept) => {
+      const parentId = dept.parentId || 'root';
+      if (!result[parentId]) {
+        result[parentId] = [];
+      }
+      result[parentId].push(dept);
+    });
+
+    return result;
+  }
+
+  /**
+   * 优化的部门查询方法，支持分页和缓存
+   * @param options 查询选项
+   * @returns 分页的部门数据
+   */
+  async findManyOptimized(options: {
+    page?: number;
+    pageSize?: number;
+    orderBy?: any;
+    filter?: any;
+  }) {
+    const {
+      page = 1,
+      pageSize = 20,
+      orderBy = { order: 'asc' },
+      filter = {},
+    } = options;
+
+    // 构建查询条件
+    const where = {
+      deletedAt: null,
+      ...filter,
+    };
+
+    // 并行执行总数查询和分页数据查询
+    const [total, items] = await Promise.all([
+      db.department.count({ where }),
+      db.department.findMany({
+        where,
+        orderBy,
+        skip: (page - 1) * pageSize,
+        take: pageSize,
+        select: {
+          id: true,
+          name: true,
+          parentId: true,
+          isDomain: true,
+          order: true,
+          domainId: true,
+          _count: {
+            select: { deptStaffs: true },
+          },
+        },
+      }),
+    ]);
+
+    // 格式化结果
+    const formattedItems = items.map((item) => ({
+      id: item.id,
+      name: item.name,
+      parentId: item.parentId,
+      isDomain: item.isDomain,
+      order: item.order,
+      domainId: item.domainId,
+      staffCount: item._count.deptStaffs,
+    }));
+
+    return {
+      items: formattedItems,
+      total,
+      page,
+      pageSize,
+      totalPages: Math.ceil(total / pageSize),
+    };
+  }
+
+  /**
+   * 获取部门树形结构，支持懒加载
+   * @param rootId 根节点ID
+   * @param lazy 是否懒加载
+   * @returns 树形结构数据
+   */
+  async getDepartmentTree(rootId: string | null = null, lazy: boolean = false) {
+    // 基础查询条件
+    const baseWhere: any = { deletedAt: null };
+
+    // 如果是懒加载模式，只查询根节点的直接子节点
+    if (lazy && rootId) {
+      baseWhere.parentId = rootId;
+    }
+    // 如果不是懒加载且指定了rootId，查询该节点及其所有子孙节点
+    else if (rootId) {
+      const descendantIds = await this.getDescendantIds([rootId], true);
+      baseWhere.id = { in: descendantIds };
+    }
+
+    // 查询部门数据
+    const departments = await db.department.findMany({
+      where: baseWhere,
+      select: {
+        id: true,
+        name: true,
+        parentId: true,
+        isDomain: true,
+        order: true,
+        _count: {
+          select: { children: true, deptStaffs: true },
+        },
+      },
+      orderBy: { order: 'asc' },
+    });
+
+    // 如果是懒加载模式，返回扁平结构
+    if (lazy) {
+      return departments.map((dept) => ({
+        id: dept.id,
+        name: dept.name,
+        parentId: dept.parentId,
+        isDomain: dept.isDomain,
+        hasChildren: dept._count.children > 0,
+        staffCount: dept._count.deptStaffs,
+        isLeaf: dept._count.children === 0,
+      }));
+    }
+
+    // 如果不是懒加载模式，构建完整树形结构
+    return this.buildDepartmentTree(departments);
+  }
+
+  /**
+   * 构建部门树形结构
+   * @param departments 部门列表
+   * @param parentId 父部门ID
+   * @returns 树形结构
+   */
+  private buildDepartmentTree(
+    departments: any[],
+    parentId: string | null = null,
+  ) {
+    return departments
+      .filter((dept) => dept.parentId === parentId)
+      .map((dept) => ({
+        id: dept.id,
+        name: dept.name,
+        isDomain: dept.isDomain,
+        staffCount: dept._count.deptStaffs,
+        children: this.buildDepartmentTree(departments, dept.id),
+      }));
+  }
 }

apps/web/src/app/main/admin/deptsettingpage/page.tsx

@@ -3,35 +3,43 @@ import { ShareCodeGenerator } from "../sharecode/sharecodegenerator";
 import { ShareCodeValidator } from "../sharecode/sharecodevalidator";
 import { useState, useRef, useCallback } from "react";
 import { message, Progress, Button, Tabs, DatePicker } from "antd";
-import { UploadOutlined, DeleteOutlined, InboxOutlined } from "@ant-design/icons";
+import {
-import { env } from '../../../../env'
+  UploadOutlined,
+  DeleteOutlined,
+  InboxOutlined,
+} from "@ant-design/icons";
+import { env } from "../../../../env";
+
 const { TabPane } = Tabs;
 
 export default function DeptSettingPage() {
-    const [uploadedFileId, setUploadedFileId] = useState<string>('');
+  const [uploadedFileId, setUploadedFileId] = useState<string>("");
-    const [uploadedFileName, setUploadedFileName] = useState<string>('');
+  const [uploadedFileName, setUploadedFileName] = useState<string>("");
   const [fileNameMap, setFileNameMap] = useState<Record<string, string>>({});
-    const [uploadedFiles, setUploadedFiles] = useState<{ id: string, name: string }[]>([]);
+  const [uploadedFiles, setUploadedFiles] = useState<
+    { id: string; name: string }[]
+  >([]);
   const [isDragging, setIsDragging] = useState(false);
   const [expireTime, setExpireTime] = useState<Date | null>(null);
   const dropRef = useRef<HTMLDivElement>(null);
 
   // 使用您的 useTusUpload hook
-    const { uploadProgress, isUploading, uploadError, handleFileUpload } = useTusUpload({
+  const { uploadProgress, isUploading, uploadError, handleFileUpload } =
+    useTusUpload({
       onSuccess: (result) => {
         setUploadedFileId(result.fileId);
         setUploadedFileName(result.fileName);
-            message.success('文件上传成功');
+        message.success("文件上传成功");
       },
       onError: (error: Error) => {
-            message.error('上传失败：' + error.message);
+        message.error("上传失败：" + error.message);
-        }
+      },
     });
 
   // 清除已上传文件
   const handleClearFile = () => {
-        setUploadedFileId('');
+    setUploadedFileId("");
-        setUploadedFileName('');
+    setUploadedFileName("");
     setUploadedFiles([]);
     setFileNameMap({});
   };
@@ -40,7 +48,7 @@ export default function DeptSettingPage() {
   const handleFileSelect = async (file: File) => {
     // 限制：如果已有上传文件，则提示用户
     if (uploadedFiles.length > 0) {
-            message.warning('只能上传一个文件，请先删除已上传的文件');
+      message.warning("只能上传一个文件，请先删除已上传的文件");
       return;
     }
 
@@ -57,42 +65,50 @@ export default function DeptSettingPage() {
 
         // 在前端保存文件名映射（用于当前会话）
         setFileNameMap({
-                    [result.fileId]: file.name
+          [result.fileId]: file.name,
         });
 
         // 上传成功后保存原始文件名到数据库
         try {
-                    console.log('正在保存文件名到数据库:', result.fileName, '对应文件ID:', result.fileId);
+          console.log(
+            "正在保存文件名到数据库:",
+            result.fileName,
+            "对应文件ID:",
+            result.fileId
+          );
 
-                    const response = await fetch(`http://${env.SERVER_IP}:${env.SERVER_PORT}/upload/filename`, {
+          const response = await fetch(
-                        method: 'POST',
+            `http://${env.SERVER_IP}:${env.SERVER_PORT}/upload/filename`,
+            {
+              method: "POST",
               headers: {
-                            'Content-Type': 'application/json',
+                "Content-Type": "application/json",
               },
               body: JSON.stringify({
                 fileId: result.fileId,
-                            fileName: file.name
+                fileName: file.name,
               }),
-                    });
+            }
+          );
 
           const responseText = await response.text();
-                    console.log('保存文件名响应:', response.status, responseText);
+          console.log("保存文件名响应:", response.status, responseText);
 
           if (!response.ok) {
-                        console.error('保存文件名失败:', responseText);
+            console.error("保存文件名失败:", responseText);
-                        message.warning('文件名保存失败，下载时可能无法显示原始文件名');
+            message.warning("文件名保存失败，下载时可能无法显示原始文件名");
           } else {
-                        console.log('文件名保存成功:', file.name);
+            console.log("文件名保存成功:", file.name);
           }
         } catch (error) {
-                    console.error('保存文件名请求失败:', error);
+          console.error("保存文件名请求失败:", error);
-                    message.warning('文件名保存失败，下载时可能无法显示原始文件名');
+          message.warning("文件名保存失败，下载时可能无法显示原始文件名");
         }
 
-                message.success('文件上传成功');
+        message.success("文件上传成功");
       },
       (error) => {
-                message.error('上传失败：' + error.message);
+        message.error("上传失败：" + error.message);
       },
       fileKey
     );
@@ -117,14 +133,14 @@ export default function DeptSettingPage() {
 
       // 无论服务器删除是否成功，前端都需要更新状态
       setUploadedFiles([]);
-            setUploadedFileId('');
+      setUploadedFileId("");
-            setUploadedFileName('');
+      setUploadedFileName("");
       setFileNameMap({});
 
-            message.success('文件已删除');
+      message.success("文件已删除");
     } catch (error) {
-            console.error('删除文件错误:', error);
+      console.error("删除文件错误:", error);
-            message.error('删除文件失败');
+      message.error("删除文件失败");
     }
   };
 
@@ -155,10 +171,9 @@ export default function DeptSettingPage() {
     handleFileSelect(e.dataTransfer.files[0]);
   }, []);
 
-
   // 处理分享码生成成功
   const handleShareSuccess = (code: string) => {
-        message.success('分享码生成成功：' + code);
+    message.success("分享码生成成功：" + code);
     // 可以在这里添加其他逻辑，比如保存到历史记录
   };
 
@@ -166,16 +181,18 @@ export default function DeptSettingPage() {
   const handleValidSuccess = async (fileId: string, fileName: string) => {
     try {
       // 构建下载URL（包含文件名参数）
-            const downloadUrl = `/upload/download/${fileId}?fileName=${encodeURIComponent(fileName)}`;
+      const downloadUrl = `/upload/download/${fileId}?fileName=${encodeURIComponent(
+        fileName
+      )}`;
       const response = await fetch(downloadUrl);
       if (!response.ok) {
-                throw new Error('文件下载失败');
+        throw new Error("文件下载失败");
       }
 
       // 创建下载链接
       const blob = await response.blob();
       const url = window.URL.createObjectURL(blob);
-            const link = document.createElement('a');
+      const link = document.createElement("a");
       link.href = url;
 
       // 直接使用传入的 fileName
@@ -187,22 +204,21 @@ export default function DeptSettingPage() {
       document.body.removeChild(link);
       window.URL.revokeObjectURL(url);
 
-            message.success('文件下载开始');
+      message.success("文件下载开始");
     } catch (error) {
-            console.error('下载失败:', error);
+      console.error("下载失败:", error);
-            message.error('文件下载失败');
+      message.error("文件下载失败");
     }
   };
 
-
   return (
-        <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
+    <div style={{ maxWidth: "800px", margin: "0 auto", padding: "20px" }}>
       <h2>文件分享中心</h2>
 
       <Tabs defaultActiveKey="upload">
         <TabPane tab="上传分享" key="upload">
           {/* 文件上传区域 */}
-                    <div style={{ marginBottom: '40px' }}>
+          <div style={{ marginBottom: "40px" }}>
             <h3>第一步：上传文件</h3>
 
             {/* 如果没有已上传文件，显示上传区域 */}
@@ -214,23 +230,32 @@ export default function DeptSettingPage() {
                 onDragLeave={handleDragLeave}
                 onDrop={handleDrop}
                 style={{
-                                    padding: '20px',
+                  padding: "20px",
-                                    border: `2px dashed ${isDragging ? '#1890ff' : '#d9d9d9'}`,
+                  border: `2px dashed ${isDragging ? "#1890ff" : "#d9d9d9"}`,
-                                    borderRadius: '8px',
+                  borderRadius: "8px",
-                                    textAlign: 'center',
+                  textAlign: "center",
-                                    backgroundColor: isDragging ? 'rgba(24, 144, 255, 0.05)' : 'transparent',
+                  backgroundColor: isDragging
-                                    transition: 'all 0.3s',
+                    ? "rgba(24, 144, 255, 0.05)"
-                                    marginBottom: '20px'
+                    : "transparent",
+                  transition: "all 0.3s",
+                  marginBottom: "20px",
                 }}
               >
-                                <InboxOutlined style={{ fontSize: '48px', color: isDragging ? '#1890ff' : '#d9d9d9' }} />
+                <InboxOutlined
+                  style={{
+                    fontSize: "48px",
+                    color: isDragging ? "#1890ff" : "#d9d9d9",
+                  }}
+                />
                 <p>点击或拖拽文件到此区域进行上传</p>
-                                <p style={{ fontSize: '12px', color: '#888' }}>只能上传单个文件</p>
+                <p style={{ fontSize: "12px", color: "#888" }}>
+                  只能上传单个文件
+                </p>
 
                 <input
                   type="file"
                   id="file-input"
-                                    style={{ display: 'none' }}
+                  style={{ display: "none" }}
                   onChange={(e) => {
                     const file = e.target.files?.[0];
                     if (file) {
@@ -242,28 +267,30 @@ export default function DeptSettingPage() {
                 <label
                   htmlFor="file-input"
                   style={{
-                                        display: 'inline-block',
+                    display: "inline-block",
-                                        padding: '8px 16px',
+                    padding: "8px 16px",
-                                        backgroundColor: '#1890ff',
+                    backgroundColor: "#1890ff",
-                                        color: 'white',
+                    color: "white",
-                                        borderRadius: '4px',
+                    borderRadius: "4px",
-                                        cursor: 'pointer',
+                    cursor: "pointer",
-                                        marginTop: '10px'
+                    marginTop: "10px",
                   }}
                 >
                   <UploadOutlined /> 选择文件
                 </label>
               </div>
             ) : (
-                            <div style={{ marginBottom: '20px' }}>
+              <div style={{ marginBottom: "20px" }}>
-                                <div style={{ 
+                <div
-                                    padding: '10px', 
+                  style={{
-                                    backgroundColor: '#f6ffed', 
+                    padding: "10px",
-                                    border: '1px solid #b7eb8f',
+                    backgroundColor: "#f6ffed",
-                                    borderRadius: '4px',
+                    border: "1px solid #b7eb8f",
-                                    marginBottom: '10px'
+                    borderRadius: "4px",
-                                }}>
+                    marginBottom: "10px",
-                                    <p style={{ color: '#52c41a', margin: 0 }}>
+                  }}
+                >
+                  <p style={{ color: "#52c41a", margin: 0 }}>
                     您已上传文件，请继续下一步生成分享码
                   </p>
                 </div>
@@ -272,40 +299,51 @@ export default function DeptSettingPage() {
 
             {/* 已上传文件列表 */}
             {uploadedFiles.length > 0 && (
-                            <div style={{
+              <div
-                                border: '1px solid #f0f0f0',
+                style={{
-                                borderRadius: '4px',
+                  border: "1px solid #f0f0f0",
-                                overflow: 'hidden'
+                  borderRadius: "4px",
-                            }}>
+                  overflow: "hidden",
+                }}
+              >
                 {uploadedFiles.map((file) => (
-                                    <div key={file.id} style={{
+                  <div
-                                        display: 'flex',
+                    key={file.id}
-                                        alignItems: 'center',
+                    style={{
-                                        padding: '10px 15px',
+                      display: "flex",
-                                        backgroundColor: '#fafafa'
+                      alignItems: "center",
-                                    }}>
+                      padding: "10px 15px",
-                                        <div style={{
+                      backgroundColor: "#fafafa",
-                                            display: 'flex',
+                    }}
-                                            alignItems: 'center',
+                  >
-                                            flex: 1
+                    <div
-                                        }}>
+                      style={{
-                                            <div style={{
+                        display: "flex",
-                                                width: '20px',
+                        alignItems: "center",
-                                                height: '20px',
+                        flex: 1,
-                                                borderRadius: '50%',
+                      }}
-                                                backgroundColor: '#52c41a',
+                    >
-                                                display: 'flex',
+                      <div
-                                                alignItems: 'center',
+                        style={{
-                                                justifyContent: 'center',
+                          width: "20px",
-                                                marginRight: '10px'
+                          height: "20px",
-                                            }}>
+                          borderRadius: "50%",
-                                                <span style={{ color: 'white', fontSize: '12px' }}>✓</span>
+                          backgroundColor: "#52c41a",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          marginRight: "10px",
+                        }}
+                      >
+                        <span style={{ color: "white", fontSize: "12px" }}>
+                          ✓
+                        </span>
                       </div>
                       <span>{file.name}</span>
                     </div>
                     <Button
                       type="text"
-                                            icon={<DeleteOutlined style={{ color: '#ff4d4f' }} />}
+                      icon={<DeleteOutlined style={{ color: "#ff4d4f" }} />}
                       onClick={() => handleDeleteFile(file.id)}
                       title="删除此文件"
                     />
@@ -315,7 +353,7 @@ export default function DeptSettingPage() {
             )}
 
             {isUploading && (
-                            <div style={{ marginTop: '20px' }}>
+              <div style={{ marginTop: "20px" }}>
                 <Progress
                   percent={Math.round(Object.values(uploadProgress)[0] || 0)}
                   status="active"
@@ -324,7 +362,7 @@ export default function DeptSettingPage() {
             )}
 
             {uploadError && (
-                            <div style={{ color: '#ff4d4f', marginTop: '10px' }}>
+              <div style={{ color: "#ff4d4f", marginTop: "10px" }}>
                 {uploadError}
               </div>
             )}
@@ -332,7 +370,7 @@ export default function DeptSettingPage() {
 
           {/* 生成分享码区域 */}
           {uploadedFileId && (
-                        <div style={{ marginBottom: '40px' }}>
+            <div style={{ marginBottom: "40px" }}>
               <h3>第二步：生成分享码</h3>
 
               <ShareCodeGenerator
@@ -347,9 +385,7 @@ export default function DeptSettingPage() {
         <TabPane tab="下载文件" key="download">
           <div>
             <h3>使用分享码下载文件</h3>
-                        <ShareCodeValidator
+            <ShareCodeValidator onValidSuccess={handleValidSuccess} />
-                            onValidSuccess={handleValidSuccess}
-                        />
           </div>
         </TabPane>
       </Tabs>

apps/web/src/app/main/home/ChartControls.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { Row, Col, Card, Radio, Button, Space, Typography } from "antd";
+import { ReloadOutlined } from "@ant-design/icons";
+
+const { Text } = Typography;
+
+interface DeptDistribution {
+  id: string;
+  name: string;
+  count: number;
+}
+
+interface ChartControlsProps {
+  chartView: string;
+  setChartView: (view: string) => void;
+  selectedDept: string | null;
+  resetFilter: () => void;
+  deptDistribution: DeptDistribution[];
+}
+
+export default function ChartControls({
+  chartView,
+  setChartView,
+  selectedDept,
+  resetFilter,
+  deptDistribution,
+}: ChartControlsProps): React.ReactElement {
+  return (
+    <Row className="mb-4">
+      <Col span={24}>
+        <Card className="shadow-sm">
+          <div className="flex justify-between items-center flex-wrap">
+            <Space>
+              <Text strong>图表控制: </Text>
+              <Radio.Group
+                value={chartView}
+                onChange={(e) => setChartView(e.target.value)}
+                optionType="button"
+                buttonStyle="solid"
+              >
+                <Radio.Button value="all">全部</Radio.Button>
+                <Radio.Button value="pie">饼图</Radio.Button>
+                <Radio.Button value="bar">条形图</Radio.Button>
+              </Radio.Group>
+            </Space>
+            <Space>
+              {selectedDept && (
+                <Button icon={<ReloadOutlined />} onClick={resetFilter}>
+                  重置筛选
+                </Button>
+              )}
+              <Text type="secondary">
+                {selectedDept
+                  ? `已筛选: ${
+                      deptDistribution.find((d) => d.id === selectedDept)
+                        ?.name || ""
+                    }`
+                  : "点击饼图可筛选部门"}
+              </Text>
+            </Space>
+          </div>
+        </Card>
+      </Col>
+    </Row>
+  );
+}

apps/web/src/app/main/home/DepartmentCharts.tsx

@@ -0,0 +1,139 @@
+import React, { lazy, Suspense, useRef, RefObject } from "react";
+import { Row, Col, Spin, Empty, Button } from "antd";
+import {
+  BarChartOutlined,
+  PieChartOutlined,
+  DownloadOutlined,
+} from "@ant-design/icons";
+import DashboardCard from "../../../components/presentation/dashboard-card";
+import { message } from "antd";
+import { EChartsOption } from "echarts-for-react";
+
+// 懒加载图表组件
+const ReactECharts = lazy(() => import("echarts-for-react"));
+
+interface DeptData {
+  id: string;
+  name: string;
+  count: number;
+}
+
+interface DepartmentChartsProps {
+  chartView: string;
+  filteredDeptData: DeptData[];
+  pieOptions: EChartsOption;
+  barOptions: EChartsOption;
+  handleDeptSelection: (params: any) => void;
+  handleExportChart: (chartType: string, chartRef: RefObject<any>) => void;
+}
+
+export default function DepartmentCharts({
+  chartView,
+  filteredDeptData,
+  pieOptions,
+  barOptions,
+  handleDeptSelection,
+  handleExportChart,
+}: DepartmentChartsProps): React.ReactElement {
+  const pieChartRef = useRef(null);
+  const barChartRef = useRef(null);
+
+  return (
+    <Row gutter={[16, 16]}>
+      {/* 条形图 */}
+      {(chartView === "all" || chartView === "bar") && (
+        <Col
+          xs={24}
+          sm={24}
+          md={chartView === "all" ? 12 : 24}
+          lg={chartView === "all" ? 12 : 24}
+          xl={chartView === "all" ? 12 : 24}
+        >
+          <DashboardCard
+            title={
+              <div className="flex items-center justify-between w-full">
+                <div>
+                  <BarChartOutlined className="mr-2" />
+                  <span>部门人员分布 - 条形图</span>
+                </div>
+                <Button
+                  type="text"
+                  icon={<DownloadOutlined />}
+                  onClick={() => handleExportChart("bar", barChartRef)}
+                  size="small"
+                >
+                  导出
+                </Button>
+              </div>
+            }
+            className="min-h-96"
+            contentClassName="flex items-center justify-center"
+          >
+            {filteredDeptData.length > 0 ? (
+              <Suspense fallback={<Spin />}>
+                <ReactECharts
+                  ref={barChartRef}
+                  option={barOptions}
+                  style={{ height: "360px", width: "100%" }}
+                  notMerge={true}
+                  lazyUpdate={true}
+                />
+              </Suspense>
+            ) : (
+              <Empty description="暂无部门数据" className="my-8" />
+            )}
+          </DashboardCard>
+        </Col>
+      )}
+
+      {/* 饼图 */}
+      {(chartView === "all" || chartView === "pie") && (
+        <Col
+          xs={24}
+          sm={24}
+          md={chartView === "all" ? 12 : 24}
+          lg={chartView === "all" ? 12 : 24}
+          xl={chartView === "all" ? 12 : 24}
+        >
+          <DashboardCard
+            title={
+              <div className="flex items-center justify-between w-full">
+                <div>
+                  <PieChartOutlined className="mr-2" />
+                  <span>部门人员分布 - 饼图</span>
+                </div>
+                <Button
+                  type="text"
+                  icon={<DownloadOutlined />}
+                  onClick={() => handleExportChart("pie", pieChartRef)}
+                  size="small"
+                >
+                  导出
+                </Button>
+              </div>
+            }
+            className="min-h-96"
+            contentClassName="flex items-center justify-center"
+          >
+            {filteredDeptData.length > 0 ? (
+              <Suspense fallback={<Spin />}>
+                <ReactECharts
+                  ref={pieChartRef}
+                  option={pieOptions}
+                  style={{ height: "360px", width: "100%" }}
+                  notMerge={true}
+                  lazyUpdate={true}
+                  onEvents={{
+                    click: handleDeptSelection,
+                  }}
+                />
+              </Suspense>
+            ) : (
+              <Empty description="暂无部门数据" className="my-8" />
+            )}
+          </DashboardCard>
+        </Col>
+      )}
+    </Row>
+  );
+}

apps/web/src/app/main/home/DepartmentTable.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Row, Col, Table, Badge, Empty, Tooltip } from "antd";
+import { TeamOutlined, InfoCircleOutlined } from "@ant-design/icons";
+import DashboardCard from "../../../components/presentation/dashboard-card";
+import { theme } from "antd";
+
+interface DeptData {
+  id: string;
+  name: string;
+  count: number;
+}
+
+interface DepartmentTableProps {
+  filteredDeptData: DeptData[];
+  staffs: any[] | undefined;
+}
+
+export default function DepartmentTable({ 
+  filteredDeptData, 
+  staffs 
+}: DepartmentTableProps): React.ReactElement {
+  const { token } = theme.useToken();
+
+  const deptColumns = [
+    {
+      title: "部门名称",
+      dataIndex: "name",
+      key: "name",
+    },
+    {
+      title: "人员数量",
+      dataIndex: "count",
+      key: "count",
+      render: (count: number) => (
+        <Badge
+          count={count}
+          overflowCount={999}
+          style={{ backgroundColor: token.colorPrimary }}
+        />
+      ),
+    },
+    {
+      title: "占比",
+      dataIndex: "count",
+      key: "percentage",
+      render: (count: number) => (
+        <span>
+          {staffs && staffs.length > 0
+            ? ((count / staffs.length) * 100).toFixed(1) + "%"
+            : "0%"}
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    <Row className="mt-4">
+      <Col span={24}>
+        <DashboardCard
+          title={
+            <div className="flex items-center justify-between w-full">
+              <div>
+                <TeamOutlined className="mr-2" />
+                <span>部门人员分布详情</span>
+              </div>
+              <Tooltip title="点击饼图可筛选特定部门数据">
+                <InfoCircleOutlined className="text-gray-400" />
+              </Tooltip>
+            </div>
+          }
+          className="min-h-80"
+        >
+          {filteredDeptData.length > 0 ? (
+            <Table
+              dataSource={filteredDeptData}
+              columns={deptColumns}
+              rowKey="id"
+              pagination={{
+                pageSize: 10,
+                showTotal: (total) => `共 ${total} 个部门`,
+              }}
+              size="small"
+              className="mt-2"
+            />
+          ) : (
+            <Empty description="暂无部门数据" className="my-8" />
+          )}
+        </DashboardCard>
+      </Col>
+    </Row>
+  );
+}

apps/web/src/app/main/home/StatisticCards.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Row, Col, Statistic, Tooltip } from "antd";
+import { UserOutlined, TeamOutlined, IdcardOutlined, InfoCircleOutlined } from "@ant-design/icons";
+import DashboardCard from "../../../components/presentation/dashboard-card";
+import { theme } from "antd";
+
+interface PositionStats {
+  total: number;
+  distribution: any[];
+  topPosition: {name: string; count: number} | null;
+  vacantPositions: number;
+}
+
+interface StatisticCardsProps {
+  staffs: any[] | undefined;
+  departments: any[] | undefined;
+  positionStats: PositionStats;
+}
+
+export default function StatisticCards({ 
+  staffs, 
+  departments, 
+  positionStats 
+}: StatisticCardsProps): React.ReactElement {
+  const { token } = theme.useToken();
+  
+  return (
+    <Row gutter={[16, 16]} className="mb-6">
+      <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+        <DashboardCard
+          title={
+            <div className="flex items-center">
+              <span>总人员数量</span>
+              <Tooltip title="系统中所有员工的总数">
+                <InfoCircleOutlined className="ml-2 text-gray-400" />
+              </Tooltip>
+            </div>
+          }
+          className="h-32"
+        >
+          <Statistic
+            value={staffs ? staffs.length : 0}
+            valueStyle={{ color: token.colorPrimary }}
+            prefix={<UserOutlined />}
+          />
+        </DashboardCard>
+      </Col>
+      <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+        <DashboardCard
+          title={
+            <div className="flex items-center">
+              <span>部门总数</span>
+              <Tooltip title="系统中所有部门的数量">
+                <InfoCircleOutlined className="ml-2 text-gray-400" />
+              </Tooltip>
+            </div>
+          }
+          className="h-32"
+        >
+          <Statistic
+            value={Array.isArray(departments) ? departments.length : 0}
+            valueStyle={{ color: token.colorSuccess }}
+            prefix={<TeamOutlined />}
+          />
+        </DashboardCard>
+      </Col>
+      <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+        <DashboardCard
+          title={
+            <div className="flex items-center">
+              <span>岗位分布</span>
+              <Tooltip title="员工岗位类型统计">
+                <InfoCircleOutlined className="ml-2 text-gray-400" />
+              </Tooltip>
+            </div>
+          }
+          className="h-32"
+        >
+          <div className="flex flex-col">
+            <Statistic
+              value={positionStats.total || 0}
+              valueStyle={{ color: "#722ed1" }}
+              prefix={<IdcardOutlined />}
+              suffix={`种岗位`}
+            />
+            {positionStats.topPosition && (
+              <div className="mt-2 text-sm text-gray-500">
+                最多人数岗位: {positionStats.topPosition.name} (
+                {positionStats.topPosition.count}人)
+              </div>
+            )}
+          </div>
+        </DashboardCard>
+      </Col>
+    </Row>
+  );
+}

apps/web/src/app/main/home/char-options.ts

@@ -0,0 +1,111 @@
+import { EChartsOption } from "echarts-for-react";
+
+interface DeptData {
+  name: string;
+  count: number;
+  id: string;
+}
+// 图表配置函数
+export const getPieChartOptions = (
+  deptData: DeptData[],
+  onEvents?: Record<string, (params: any) => void>
+): EChartsOption => {
+  const top10Depts = deptData.slice(0, 10);
+  return {
+    tooltip: {
+      trigger: "item",
+      formatter: "{a} <br/>{b}: {c}人 ({d}%)",
+    },
+    legend: {
+      orient: "vertical",
+      right: 10,
+      top: "center",
+      data: top10Depts.map((dept) => dept.name),
+    },
+    series: [
+      {
+        name: "部门人数",
+        type: "pie",
+        radius: ["50%", "70%"],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: "#fff",
+          borderWidth: 2,
+        },
+        label: {
+          show: true,
+          formatter: "{b}: {c}人 ({d}%)",
+          position: "outside",
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: "18",
+            fontWeight: "bold",
+          },
+        },
+        labelLine: {
+          show: true,
+        },
+        data: top10Depts.map((dept) => ({
+          value: dept.count,
+          name: dept.name,
+        })),
+      },
+    ],
+  };
+};
+
+export const getBarChartOptions = (deptData: DeptData[]): EChartsOption => {
+  const top10Depts = deptData.slice(0, 10);
+  return {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    grid: {
+      left: "3%",
+      right: "12%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "value",
+      boundaryGap: [0, 0.01],
+    },
+    yAxis: {
+      type: "category",
+      data: top10Depts.map((dept) => dept.name),
+      inverse: true,
+    },
+    series: [
+      {
+        name: "人员数量",
+        type: "bar",
+        data: top10Depts.map((dept) => dept.count),
+        itemStyle: {
+          color: function (params) {
+            const colorList = [
+              "#91cc75",
+              "#5470c6",
+              "#ee6666",
+              "#73c0de",
+              "#3ba272",
+              "#fc8452",
+              "#9a60b4",
+            ];
+            return colorList[params.dataIndex % colorList.length];
+          },
+        },
+        label: {
+          show: true,
+          position: "right",
+          formatter: "{c}人",
+        },
+      },
+    ],
+  };
+};

apps/web/src/app/main/home/page.tsx

@@ -1,9 +1,213 @@
-import React from "react"
+import React, { useEffect, useState, useMemo, RefObject } from "react";
+import { Spin, message } from "antd";
+import { api } from "@nice/client";
 
-export default function Dashboard() {
+import StatisticCards from "./StatisticCards";
-  return (
+import ChartControls from "./ChartControls";
-    <div >
+import DepartmentCharts from "./DepartmentCharts";
-      数据看板（待开发）
+import DepartmentTable from "./DepartmentTable";
-    </div>
+import { getPieChartOptions, getBarChartOptions } from "./char-options";
-  )
+interface DeptData {
+  id: string;
+  name: string;
+  count: number;
+}
+
+interface PositionData {
+  name: string;
+  count: number;
+}
+
+interface PositionStats {
+  total: number;
+  distribution: PositionData[];
+  topPosition: PositionData | null;
+  vacantPositions: number;
+}
+
+export default function Dashboard(): React.ReactElement {
+  // 获取员工数据
+  const { data: staffs, isLoading: staffLoading } = api.staff.findMany.useQuery(
+    {}
+  );
+  // 获取部门数据
+  const { data: departments, isLoading: deptLoading } =
+    api.department.findMany.useQuery({});
+
+  // 部门人员分布
+  const [deptDistribution, setDeptDistribution] = useState<DeptData[]>([]);
+  // 选中的部门筛选
+  const [selectedDept, setSelectedDept] = useState<string | null>(null);
+  // 图表视图类型
+  const [chartView, setChartView] = useState<string>("all");
+  // 岗位统计状态
+  const [positionStats, setPositionStats] = useState<PositionStats>({
+    total: 0,
+    distribution: [],
+    topPosition: null,
+    vacantPositions: 0,
+  });
+
+  // 处理原始数据，提取部门和岗位分布信息
+  useEffect(() => {
+    if (staffs && departments) {
+      // 计算部门分布
+      const deptMap = new Map<string, DeptData>();
+      if (Array.isArray(departments)) {
+        departments.forEach((dept) => {
+          deptMap.set(dept.id, { name: dept.name, count: 0, id: dept.id });
+        });
+      }
+
+      staffs.forEach((staff) => {
+        if (staff.deptId && deptMap.has(staff.deptId)) {
+          const deptData = deptMap.get(staff.deptId);
+          if (deptData) {
+            deptData.count += 1;
+            deptMap.set(staff.deptId, deptData);
+          }
+        }
+      });
+
+      // 部门数据排序
+      const deptArray = Array.from(deptMap.values())
+        .filter((dept) => dept.count > 0)
+        .sort((a, b) => b.count - a.count);
+      setDeptDistribution(deptArray);
+
+      // 岗位分布统计
+      const positionMap = new Map<string, PositionData>();
+      staffs.forEach((staff) => {
+        const position = staff.positionId || "未设置岗位";
+        if (!positionMap.has(position)) {
+          positionMap.set(position, { name: position, count: 0 });
+        }
+        const posData = positionMap.get(position);
+        if (posData) {
+          posData.count += 1;
+          positionMap.set(position, posData);
+        }
+      });
+      // 转换为数组并排序
+      const positionArray = Array.from(positionMap.values()).sort(
+        (a, b) => b.count - a.count
+      );
+      // 找出人数最多的岗位
+      const topPosition = positionArray.length > 0 ? positionArray[0] : null;
+      // 计算空缺岗位数(简化示例，实际可能需要根据业务逻辑调整)
+      const vacantPositions = positionArray.filter((p) => p.count === 0).length;
+      // 更新岗位统计状态
+      setPositionStats({
+        total: positionMap.size,
+        distribution: positionArray,
+        topPosition,
+        vacantPositions,
+      });
+    }
+  }, [staffs, departments]);
+
+  // 过滤部门数据
+  const filteredDeptData = useMemo(() => {
+    if (selectedDept) {
+      return deptDistribution.filter((dept) => dept.id === selectedDept);
+    }
+    return deptDistribution;
+  }, [deptDistribution, selectedDept]);
+
+  // 图表配置
+  const pieOptions = useMemo(() => {
+    return getPieChartOptions(filteredDeptData, {});
+  }, [filteredDeptData]);
+
+  const barOptions = useMemo(() => {
+    return getBarChartOptions(filteredDeptData);
+  }, [filteredDeptData]);
+
+  // 处理部门选择
+  const handleDeptSelection = (params: any) => {
+    const selectedDeptName = params.name;
+    const selectedDept = deptDistribution.find(
+      (dept) => dept.name === selectedDeptName
+    );
+    if (selectedDept) {
+      setSelectedDept(selectedDept.id);
+      message.info(`已选择部门: ${selectedDeptName}`);
+    }
+  };
+
+  // 导出图表为图片
+  const handleExportChart = (chartType: string, chartRef: RefObject<any>) => {
+    if (chartRef.current && chartRef.current.getEchartsInstance) {
+      const chart = chartRef.current.getEchartsInstance();
+      const dataURL = chart.getDataURL({
+        type: "png",
+        pixelRatio: 2,
+        backgroundColor: "#fff",
+      });
+
+      const link = document.createElement("a");
+      link.download = `部门人员分布-${
+        chartType === "pie" ? "饼图" : "条形图"
+      }.png`;
+      link.href = dataURL;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+
+      message.success(`${chartType === "pie" ? "饼图" : "条形图"}导出成功`);
+    }
+  };
+
+  // 重置筛选
+  const resetFilter = () => {
+    setSelectedDept(null);
+    message.success("已重置筛选");
+  };
+
+  const isLoading = staffLoading || deptLoading;
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-6">数据看板</h1>
+      {isLoading ? (
+        <div className="flex justify-center items-center h-64">
+          <Spin size="large" />
+        </div>
+      ) : (
+        <>
+          {/* 统计卡片 */}
+          <StatisticCards
+            staffs={staffs}
+            departments={departments}
+            positionStats={positionStats}
+          />
+
+          {/* 图表筛选和控制区 */}
+          <ChartControls
+            chartView={chartView}
+            setChartView={setChartView}
+            selectedDept={selectedDept}
+            resetFilter={resetFilter}
+            deptDistribution={deptDistribution}
+          />
+
+          {/* 部门分布数据可视化 */}
+          <DepartmentCharts
+            chartView={chartView}
+            filteredDeptData={filteredDeptData}
+            pieOptions={pieOptions}
+            barOptions={barOptions}
+            handleExportChart={handleExportChart}
+            handleDeptSelection={handleDeptSelection}
+          />
+
+          {/* 详细数据表格 */}
+          <DepartmentTable
+            staffs={staffs}
+            filteredDeptData={filteredDeptData}
+          />
+        </>
+      )}
+    </div>
+  );
 }

apps/web/src/app/main/layout/MainHeader.tsx

@@ -1,19 +1,18 @@
-import { Layout, Avatar, Dropdown, Menu } from 'antd';
+import { Layout, Avatar, Dropdown, Menu } from "antd";
-import { UserOutlined } from '@ant-design/icons';
+import { UserOutlined } from "@ant-design/icons";
-import { useNavigate, Outlet, useLocation } from 'react-router-dom';
+import { useNavigate, Outlet, useLocation } from "react-router-dom";
-import NavigationMenu from './NavigationMenu';
+import NavigationMenu from "./NavigationMenu";
-import { Header } from 'antd/es/layout/layout';
+import { Header } from "antd/es/layout/layout";
-import { useState } from 'react';
+import { useState } from "react";
 
 const { Sider, Content } = Layout;
 
 export default function MainHeader() {
-
   return (
     <Layout>
       {/* 顶部Header */}
       <Header className="flex justify-end items-center bg-white shadow-sm h-16 px-6">
-        <Avatar className='bg-black'></Avatar>
+        <Avatar className="bg-black"></Avatar>
       </Header>
 
       {/* 主体布局 */}
@@ -22,7 +21,6 @@ export default function MainHeader() {
         <Sider theme="light" width={240} className="shadow-sm">
           <NavigationMenu />
         </Sider>
-
         {/* 内容区域 */}
         <Content className="overflow-auto p-6 bg-gray-50">
           <Outlet />

apps/web/src/app/main/staffinfo_show/staffmessage_page.tsx

@@ -342,6 +342,12 @@ export default function StaffMessage() {
     }
   }, [fileName, defaultFileName, rowData, selectedRows, fields.data, gridApi]);
 
+  // 获取部门数据
+  const { data: departmentsData } = api.department.findMany.useQuery({
+    where: { deletedAt: null },
+    select: { id: true, name: true },
+  });
+
   // 处理导入数据
   const createMany = api.staff.create.useMutation({
     onSuccess: () => {
@@ -364,81 +370,78 @@ export default function StaffMessage() {
       }
 
       try {
-        // 将Excel数据转换为API需要的格式
+        // 确保字段数据有效，提取所有有效的字段ID
-        const staffData = excelData.map((row) => {
-          const staff: any = { fieldValues: [] };
-
-          // 处理基础字段
-          if (row["姓名"]) staff.showname = row["姓名"];
-
-          // 处理部门
-          if (row["所属部门"]) {
-            // 简单存储部门名称，后续可能需要查询匹配
-            staff.departmentName = row["所属部门"];
-          }
-
-          // 处理自定义字段
         const fieldsList = Array.isArray(fields?.data) ? fields.data : [];
-          fieldsList.forEach((field: any) => {
+        console.log(
-            let value = row[field.label || field.name];
+          "可用字段列表:",
+          fieldsList.map((f) => ({ id: f.id, name: f.name, label: f.label }))
+        );
 
-            // 跳过空值
+        // 将Excel数据转换为API需要的格式
-            if (value === undefined || value === "") return;
+        const staffImportData = excelData.map((row, rowIndex) => {
+          console.log(`正在处理第${rowIndex + 1}行数据:`, row);
 
-            // 根据字段类型处理输入值
+          const staff: any = {
-            switch (field.type) {
+            // 设置必要的字段
-              case "cascader":
+            showname: row["姓名"] ? String(row["姓名"]) : "未命名",
-                // 级联选择器可能需要将显示名称转回代码
+            // 避免使用自动生成的字段
-                // 这里简单保留原值，实际可能需要查询转换
+            fieldValues: [],
-                break;
+          };
 
-              case "date":
+          // 处理部门关联
-                // 尝试将日期字符串转换为ISO格式
+          if (row["所属部门"] && departmentsData) {
-                try {
+            const deptName = row["所属部门"];
-                  const dateObj = new Date(value);
+            const matchedDept = departmentsData.find(
-                  if (!isNaN(dateObj.getTime())) {
+              (dept) => dept.name === deptName
-                    value = dateObj.toISOString();
+            );
+
+            if (matchedDept) {
+              staff.department = {
+                connect: { id: matchedDept.id },
+              };
+            } else {
+              console.warn(`未找到匹配的部门: ${deptName}`);
             }
-                } catch (e) {
-                  console.error(`日期格式转换错误: ${value}`);
-                }
-                break;
-
-              case "textarea":
-                // 将换行符替换回逗号进行存储
-                if (typeof value === "string") {
-                  value = value.replace(/\n/g, ",");
-                }
-                break;
-
-              // 可以根据需要添加其他字段类型的处理
           }
 
-            // 添加到fieldValues数组
+          // 我们不在这里处理自定义字段，而是在员工创建后单独处理
-            staff.fieldValues.push({
+          console.log(`准备创建员工: ${staff.showname}`);
-              fieldId: field.id,
-              value: String(value),
-            });
-          });
 
           return staff;
         });
 
-        // 提交数据
+        // 逐条导入数据
-        createMany.mutate({
+        if (staffImportData.length > 0) {
-          data: staffData[0], // 由于类型限制，这里只能一条一条导入
+          staffImportData.forEach((staffData, index) => {
-        });
+            createMany.mutate(
-        // 如果有多条数据，需要循环处理
+              { data: staffData },
-        for (let i = 1; i < staffData.length; i++) {
+              {
-          createMany.mutate({ data: staffData[i] });
+                onSuccess: (data) => {
+                  console.log(`员工创建成功:`, data);
+                  message.success(`成功导入第${index + 1}条基础数据`);
+
+                  // 员工创建成功后，再单独处理自定义字段值
+                  // 由于外键约束问题，我们暂时跳过字段值的创建
+                  // 后续可以添加专门的字段值导入功能
+                },
+                onError: (error) => {
+                  message.error(
+                    `导入第${index + 1}条数据失败: ${error.message}`
+                  );
+                  console.error(`导入失败的详细数据:`, staffData);
+                },
+              }
+            );
+          });
+
+          message.info(`正在导入${staffImportData.length}条员工数据...`);
         }
-        message.info(`正在导入${staffData.length}条员工数据...`);
       } catch (error) {
         console.error("处理导入数据失败:", error);
         message.error("数据格式错误，导入失败");
       }
     },
-    [fields.data, createMany]
+    [fields.data, createMany, departmentsData]
   );
 
   return (
@@ -484,7 +487,7 @@ export default function StaffMessage() {
         </Button>
       </div>
 
-      <div className="bg-white rounded-lg shadow-md p-6 mb-4">
+      <div className="bg-white rstaffDataounded-lg shadow-md p-6 mb-4">
         <h1 className="text-2xl font-bold text-gray-800 mb-4">人员总览</h1>
 
         <div className="ag-theme-alpine w-full min-h-[480px] h-auto overflow-visible">

apps/web/src/components/layout/admin/AdminLayout.tsx

@@ -1,9 +1,6 @@
 import { Outlet } from "react-router-dom";
 import { Layout } from "antd";
 
-import { adminRoute } from "@web/src/routes/admin-route";
-import AdminSidebar from "./AdminSidebar";
-
 const { Content } = Layout;
 
 export default function AdminLayout() {

apps/web/src/routes/index.tsx

@@ -52,7 +52,7 @@ export const routes: CustomRouteObject[] = [
         children: [
           {
             index: true,
-						element:<Dashboard></Dashboard>,
+            element: <Dashboard></Dashboard>,
           },
           {
             path: "/staffinformation",
@@ -69,13 +69,10 @@ export const routes: CustomRouteObject[] = [
           {
             path: "/admin",
             element: <AdminLayout></AdminLayout>,
-						children:adminRoute.children
+            children: adminRoute.children,
           },
-					
-
         ],
       },
-			
     ],
   },
   {
@@ -86,9 +83,9 @@ export const routes: CustomRouteObject[] = [
   {
     index: true,
     path: "/",
-		element:<DeptSettingPage></DeptSettingPage>,
+    element: <DeptSettingPage></DeptSettingPage>,
     errorElement: <ErrorPage />,
-	}
+  },
 ];
 
 export const router = createBrowserRouter(routes);

config/nginx/conf.d/web.conf

@@ -100,7 +100,7 @@ server {
         # 仅供内部使用
         internal;
         # 代理到认证服务
-        proxy_pass http://192.168.252.77:3000/auth/file;
+        proxy_pass http://192.168.252.77:3001/auth/file;
         
         # 请求优化：不传递请求体
         proxy_pass_request_body off;

package-lock.json

@@ -0,0 +1,161 @@
+{
+  "name": "nice-stack",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "nice-stack",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "echarts": "^5.6.0",
+        "echarts-for-react": "^3.0.2"
+      }
+    },
+    "node_modules/echarts": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
+      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      }
+    },
+    "node_modules/echarts-for-react": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/echarts-for-react/-/echarts-for-react-3.0.2.tgz",
+      "integrity": "sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "size-sensor": "^1.0.1"
+      },
+      "peerDependencies": {
+        "echarts": "^3.0.0 || ^4.0.0 || ^5.0.0",
+        "react": "^15.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "license": "MIT"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.2.0",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/size-sensor": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/size-sensor/-/size-sensor-1.0.2.tgz",
+      "integrity": "sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw=="
+    },
+    "node_modules/zrender": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
+      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    }
+  },
+  "dependencies": {
+    "echarts": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
+      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
+    "echarts-for-react": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/echarts-for-react/-/echarts-for-react-3.0.2.tgz",
+      "integrity": "sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==",
+      "requires": {
+        "fast-deep-equal": "^3.1.3",
+        "size-sensor": "^1.0.1"
+      }
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3"
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "peer": true
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "peer": true,
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "react": {
+      "version": "18.2.0",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "size-sensor": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/size-sensor/-/size-sensor-1.0.2.tgz",
+      "integrity": "sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw=="
+    },
+    "zrender": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
+      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    }
+  }
+}

package.json

@@ -11,5 +11,9 @@
   },
   "keywords": [],
   "author": "insiinc",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "echarts": "^5.6.0",
+    "echarts-for-react": "^3.0.2"
+  }
 }

pnpm-lock.yaml

@@ -6,7 +6,14 @@ settings:
 
 importers:
 
-  .: {}
+  .:
+    dependencies:
+      echarts:
+        specifier: ^5.6.0
+        version: 5.6.0
+      echarts-for-react:
+        specifier: ^3.0.2
+        version: 3.0.2(echarts@5.6.0)(react@18.2.0)
 
   apps/server:
     dependencies:
@@ -7182,6 +7189,25 @@ packages:
       safe-buffer: 5.2.1
     dev: false
 
+  /echarts-for-react@3.0.2(echarts@5.6.0)(react@18.2.0):
+    resolution: {integrity: sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==}
+    peerDependencies:
+      echarts: ^3.0.0 || ^4.0.0 || ^5.0.0
+      react: ^15.0.0 || >=16.0.0
+    dependencies:
+      echarts: 5.6.0
+      fast-deep-equal: 3.1.3
+      react: 18.2.0
+      size-sensor: 1.0.2
+    dev: false
+
+  /echarts@5.6.0:
+    resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.6.1
+    dev: false
+
   /ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -7771,7 +7797,6 @@ packages:
 
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
-    dev: true
 
   /fast-diff@1.3.0:
     resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
@@ -11561,6 +11586,10 @@ packages:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
     dev: true
 
+  /size-sensor@1.0.2:
+    resolution: {integrity: sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw==}
+    dev: false
+
   /slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -12235,6 +12264,10 @@ packages:
       strip-bom: 3.0.0
     dev: true
 
+  /tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+    dev: false
+
   /tslib@2.5.3:
     resolution: {integrity: sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==}
 
@@ -12929,6 +12962,12 @@ packages:
     resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
     dev: false
 
+  /zrender@5.6.1:
+    resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
+    dependencies:
+      tslib: 2.3.0
+    dev: false
+
   /zustand@4.5.6(@types/react@18.2.38)(react@18.2.0):
     resolution: {integrity: sha512-ibr/n1hBzLLj5Y+yUcU7dYw8p6WnIVzdJbnX+1YpaScvZVF2ziugqHs+LAmHw4lWO9c/zRj+K1ncgWDQuthEdQ==}
     engines: {node: '>=12.7.0'}