部门管理页面显示,其他功能暂未打通

frontend/src/models/admin.js

@@ -246,6 +246,30 @@ const Admin = {
         return false;
       });
   },
+  depts: async () => {
+    return await fetch(`${API_BASE}/dept/list`, {
+      method: "GET",
+      headers: baseHeaders(),
+    })
+      .then((res) => res.json())
+      .then((res) => res?.depts || [])
+      .catch((e) => {
+        console.error(e);
+        return [];
+      });
+  },
+  addDepts: async (data) => {
+    return await fetch(`${API_BASE}/dept/add`, {
+      method: "POST",
+      headers: baseHeaders(),
+      body: JSON.stringify(data),
+    })
+      .then((res) => res.json())
+      .catch((e) => {
+        console.error(e);
+        return { depts: null, error: e.message };
+      });
+  },
 };
 
 export default Admin;

frontend/src/pages/Admin/Section/index.jsx

@@ -1,18 +1,18 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import Sidebar from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
-import { UserPlus } from "@phosphor-icons/react";
+import { Folder, FolderOpen, Pencil, Trash } from "@phosphor-icons/react";
 import Admin from "@/models/admin";
-import UserRow from "../Users/UserRow";
 import useUser from "@/hooks/useUser";
-import NewUserModal from "../Users/NewUserModal";
 import { useModal } from "@/hooks/useModal";
 import ModalWrapper from "@/components/ModalWrapper";
 import CTAButton from "@/components/lib/CTAButton";
+import { TreeSelect } from "antd"; // 使用 antd 的 TreeSelect 组件
+import "antd/dist/reset.css"; // 引入 antd 样式
 
-export default function AdminUsers() {
+export default function AdminDepartments() {
   const { isOpen, openModal, closeModal } = useModal();
 
   return (
@@ -26,11 +26,11 @@ export default function AdminUsers() {
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2">
             <div className="items-center flex gap-x-4">
               <p className="text-lg leading-6 font-bold text-theme-text-primary">
-                  部门
+                部门管理
               </p>
             </div>
             <p className="text-xs leading-[18px] font-base text-theme-text-secondary">
-                 部门树状结构
+              管理所有部门及其层级结构。删除部门将同时删除其子部门。
             </p>
           </div>
           <div className="w-full justify-end flex">
@@ -38,33 +38,33 @@ export default function AdminUsers() {
               onClick={openModal}
               className="mt-3 mr-0 mb-4 md:-mb-6 z-10"
             >
-              <UserPlus className="h-4 w-4" weight="bold" /> Add user
+              <FolderOpen className="h-4 w-4" weight="bold" /> 添加部门
             </CTAButton>
           </div>
           <div className="overflow-x-auto">
-            <UsersContainer />
+            <DepartmentsContainer />
           </div>
         </div>
         <ModalWrapper isOpen={isOpen}>
-          <NewUserModal closeModal={closeModal} />
+          <NewDepartmentModal closeModal={closeModal} />
         </ModalWrapper>
       </div>
     </div>
   );
 }
 
-function UsersContainer() {
+function DepartmentsContainer() {
   const { user: currUser } = useUser();
   const [loading, setLoading] = useState(true);
-  const [users, setUsers] = useState([]);
+  const [departments, setDepartments] = useState([]);
 
   useEffect(() => {
-    async function fetchUsers() {
-      const _users = await Admin.users();
-      setUsers(_users);
+    async function fetchDepartments() {
+      const _departments = await Admin.depts();
+      setDepartments(buildTree(_departments)); // 将部门列表转换为树状结构
       setLoading(false);
     }
-    fetchUsers();
+    fetchDepartments();
   }, []);
 
   if (loading) {
@@ -86,112 +86,200 @@ function UsersContainer() {
       <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
       <tr>
         <th scope="col" className="px-6 py-3 rounded-tl-lg">
-            Username
+          部门名称
         </th>
         <th scope="col" className="px-6 py-3">
-            Role
+          排序
         </th>
         <th scope="col" className="px-6 py-3">
-            Date Added
+          状态
+        </th>
+        <th scope="col" className="px-6 py-3">
+          创建时间
         </th>
         <th scope="col" className="px-6 py-3 rounded-tr-lg">
-            {" "}
+          操作
         </th>
       </tr>
       </thead>
       <tbody>
-        {users.map((user) => (
-          <UserRow key={user.id} currUser={currUser} user={user} />
+      {departments.map((dept) => (
+        <DepartmentRow key={dept.deptId} dept={dept} />
       ))}
       </tbody>
     </table>
   );
 }
 
-const ROLE_HINT = {
-  default: [
-    "Can only send chats with workspaces they are added to by admin or managers.",
-    "Cannot modify any settings at all.",
-  ],
-  manager: [
-    "Can view, create, and delete any workspaces and modify workspace-specific settings.",
-    "Can create, update and invite new users to the instance.",
-    "Cannot modify LLM, vectorDB, embedding, or other connections.",
-  ],
-  admin: [
-    "Highest user level privilege.",
-    "Can see and do everything across the system.",
-  ],
-};
-
-export function RoleHintDisplay({ role }) {
-  return (
-    <div className="flex flex-col gap-y-1 py-1 pb-4">
-      <p className="text-sm font-medium text-theme-text-primary">Permissions</p>
-      <ul className="flex flex-col gap-y-1 list-disc px-4">
-        {ROLE_HINT[role ?? "default"].map((hints, i) => {
+function DepartmentRow({ dept }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const toggleExpand = () => {
+    setExpanded(!expanded);
+  };
+
   return (
-            <li key={i} className="text-xs text-theme-text-secondary">
-              {hints}
-            </li>
-          );
-        })}
-      </ul>
+    <>
+      <tr className="border-b border-white/10">
+        <td className="px-6 py-4">
+          <div className="flex items-center gap-x-2">
+            {dept.children && dept.children.length > 0 ? (
+              <button onClick={toggleExpand} className="focus:outline-none">
+                {expanded ? (
+                  <FolderOpen className="h-4 w-4 text-theme-text-secondary" />
+                ) : (
+                  <Folder className="h-4 w-4 text-theme-text-secondary" />
+                )}
+              </button>
+            ) : (
+              <span className="w-4"></span>
+            )}
+            <span className="text-theme-text-primary">{dept.deptName}</span>
+          </div>
+        </td>
+        <td className="px-6 py-4 text-theme-text-secondary">{dept.orderNum}</td>
+        <td className="px-6 py-4">
+          <span
+            className={`px-2 py-1 rounded-full text-xs font-medium ${
+              dept.status === 0
+                ? "bg-green-100 text-green-800"
+                : "bg-red-100 text-red-800"
+            }`}
+          >
+            {dept.status === 0 ? "启用" : "停用"}
+          </span>
+        </td>
+        <td className="px-6 py-4 text-theme-text-secondary">
+          {new Date(dept.createdAt).toLocaleDateString()}
+        </td>
+        <td className="px-6 py-4">
+          <div className="flex items-center gap-x-2">
+            <button className="text-theme-text-secondary hover:text-theme-text-primary">
+              <Pencil className="h-4 w-4" />
+            </button>
+            <button className="text-theme-text-secondary hover:text-theme-text-primary">
+              <Trash className="h-4 w-4" />
+            </button>
           </div>
+        </td>
+      </tr>
+      {expanded &&
+        dept.children &&
+        dept.children.map((child) => (
+          <DepartmentRow key={child.deptId} dept={child} />
+        ))}
+    </>
   );
 }
 
-export function MessageLimitInput({ enabled, limit, updateState, role }) {
-  if (role === "admin") return null;
+function NewDepartmentModal({ closeModal }) {
+  const [formData, setFormData] = useState({
+    deptName: "",
+    parentId: null, // 上级部门 ID
+    orderNum: 0,
+    status: 0,
+  });
+
+  const [departments, setDepartments] = useState([]); // 部门数据
+  const [treeData, setTreeData] = useState([]); // 树状结构数据
+
+  // 获取部门数据并转换为树状结构
+  useEffect(() => {
+    async function fetchDepartments() {
+      const _departments = await Admin.depts();
+      setDepartments(_departments);
+      setTreeData(buildTree(_departments)); // 将部门数据转换为树状结构
+    }
+    fetchDepartments();
+  }, []);
+
+  // 将部门数据转换为树状结构
+  function buildTree(depts, parentId = 0) {
+    return depts
+      .filter((dept) => dept.parentId === parentId)
+      .map((dept) => ({
+        title: dept.deptName, // 显示部门名称
+        value: dept.deptId, // 部门 ID
+        children: buildTree(depts, dept.deptId), // 递归查找子部门
+      }));
+  }
+
+  // 处理表单提交
+  const handleSubmit = async () => {
+    await Admin.addDepts(formData);
+    closeModal();
+  };
+
   return (
-    <div className="mt-4 mb-8">
-      <div className="flex flex-col gap-y-1">
-        <div className="flex items-center gap-x-2">
-          <h2 className="text-base leading-6 font-bold text-white">
-            Limit messages per day
+    <div className="p-6">
+      <h2 className="text-lg font-bold text-theme-text-primary mb-4">
+        添加部门
       </h2>
-          <label className="relative inline-flex cursor-pointer items-center">
-            <input
-              type="checkbox"
-              checked={enabled}
-              onChange={(e) => {
-                updateState((prev) => ({
-                  ...prev,
-                  enabled: e.target.checked,
-                }));
-              }}
-              className="peer sr-only"
-            />
-            <div className="pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
+      <div className="flex flex-col gap-y-4">
+        {/* 上级部门选择器 */}
+        <div>
+          <label className="text-sm font-medium text-theme-text-secondary block mb-2">
+            上级部门
           </label>
+          <TreeSelect
+            treeData={treeData} // 树状数据
+            value={formData.parentId} // 选中的部门 ID
+            onChange={(value) =>
+              setFormData({ ...formData, parentId: value })
+            }
+            placeholder="请选择上级部门"
+            className="w-full"
+            dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
+          />
         </div>
-        <p className="text-xs leading-[18px] font-base text-white/60">
-          Restrict this user to a number of successful queries or chats within a
-          24 hour window.
-        </p>
-      </div>
-      {enabled && (
-        <div className="mt-4">
-          <label className="text-white text-sm font-semibold block mb-4">
-            Message limit per day
-          </label>
-          <div className="relative mt-2">
+
+        {/* 部门名称输入框 */}
+        <input
+          type="text"
+          placeholder="部门名称"
+          value={formData.deptName}
+          onChange={(e) =>
+            setFormData({ ...formData, deptName: e.target.value })
+          }
+          className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+        />
+
+        {/* 排序输入框 */}
         <input
           type="number"
-              onScroll={(e) => e.target.blur()}
-              onChange={(e) => {
-                updateState({
-                  enabled: true,
-                  limit: Number(e?.target?.value || 0),
-                });
-              }}
-              value={limit}
-              min={1}
+          placeholder="排序"
+          value={formData.orderNum}
+          onChange={(e) =>
+            setFormData({ ...formData, orderNum: Number(e.target.value) })
+          }
           className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
         />
+
+        {/* 状态选择器 */}
+        <select
+          value={formData.status}
+          onChange={(e) =>
+            setFormData({ ...formData, status: Number(e.target.value) })
+          }
+          className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+        >
+          <option value={0}>启用</option>
+          <option value={1}>停用</option>
+        </select>
+
+        {/* 保存按钮 */}
+        <CTAButton onClick={handleSubmit}>保存</CTAButton>
       </div>
     </div>
-      )}
-    </div>
   );
 }
+
+// 将部门列表转换为树状结构
+function buildTree(departments, parentId = 0) {
+  return departments
+    .filter((dept) => dept.parentId === parentId)
+    .map((dept) => ({
+      ...dept,
+      children: buildTree(departments, dept.deptId),
+    }));
+}

package-lock.json

@@ -272,7 +272,7 @@
     },
     "node_modules/antd": {
       "version": "5.24.2",
-      "resolved": "https://registry.npmjs.org/antd/-/antd-5.24.2.tgz",
+      "resolved": "https://registry.npmmirror.com/antd/-/antd-5.24.2.tgz",
       "integrity": "sha512-7Z9HsE3ZIK3sE/WuUqii3w7Gl1IJuRL21sDUTtkN95JS5KhRYP8ISv7m/HxsJ3Mn/yxgojBCgLPJ212+Dn+aPw==",
       "dependencies": {
         "@ant-design/colors": "^7.2.0",
@@ -413,7 +413,7 @@
     },
     "node_modules/moment": {
       "version": "2.30.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
       "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
       "engines": {
         "node": "*"

server/endpoints/admin.js

@@ -34,6 +34,7 @@ function adminEndpoints(app) {
     [validatedRequest, strictMultiUserRoleValid([ROLES.admin, ROLES.manager])],
     async (_request, response) => {
       try {
+        console.log("调用了调用了admin/users");
         const users = await User.where();
         response.status(200).json({ users });
       } catch (e) {