feat: User模块UI界面搭建完成

src/api/user/userDept.ts

@@ -0,0 +1,8 @@
+import request from "../../utils/request";
+
+export const getDeptTree = () => {
+  return request({
+    url: "/admin/dept",
+    method: "get",
+  });
+};

src/utils/request.ts

@@ -1,75 +1,86 @@
 import { IResponse, IToken } from "@/type";
-import axios, { InternalAxiosRequestConfig, AxiosInstance, AxiosRequestConfig } from "axios";
+import axios, {
-import Cookie from 'js-cookie'
+  InternalAxiosRequestConfig,
+  AxiosInstance,
+  AxiosRequestConfig,
+} from "axios";
+import Cookie from "js-cookie";
 import { getToken, removeToken } from "./auth";
 import { message } from "antd";
 
 const service: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_BASEURL,
   headers: {
-    'Content-Type': 'application/json'
+    "Content-Type": "application/json",
   },
-  timeout: 6000
+  timeout: 6000,
-})
+});
 
 // 请求前拦截
 service.interceptors.request.use((config: InternalAxiosRequestConfig) => {
-  const Authorization: IToken = getToken() || ''
+  const Authorization: IToken = getToken() || "";
   if (config && config.headers && Authorization) {
-    config.headers.Authorization = Authorization
+    config.headers.Authorization = Authorization;
   }
-  return config
+  return config;
-})
+});
 
-const request = async <T = any>(config: AxiosRequestConfig): Promise<IResponse<T>> => {
+const request = async <T = any>(
+  config: AxiosRequestConfig
+): Promise<IResponse<T>> => {
   try {
-    const response = await service.request<IResponse<T>>(config)
+    const response = await service.request<IResponse<T>>(config);
-    const { code, msg } = response.data
+    const { code, msg } = response.data;
     if (code !== 1000) {
       switch (code) {
-        case 401: redirectLogin()
+        case 401:
-          break
+          redirectLogin();
-        case 402: message.error(msg)
+          break;
-          break
+        case 402:
-        case 403: message.error(msg)
+          message.error(msg);
-          break
+          break;
-        case 405: message.error(msg)
+        case 403:
-          break
+          message.error(msg);
-        default: message.error('系统未知错误')
+          break;
+        case 405:
+          message.error(msg);
+          break;
+        default:
+          message.error("系统未知错误");
       }
       return {
         code: -1,
-        msg: 'error',
+        msg: "error",
-        data: null as any
+        data: null as any,
-      }
+      };
     }
-    return response.data
+    return response.data;
   } catch (err: any) {
     switch (err) {
     }
-    if(!window.navigator.onLine) {
+    if (!window.navigator.onLine) {
-      errorInfoRet('请检查网络连接')
+      errorInfoRet("请检查网络连接");
     }
     return {
       code: -1,
-      msg: 'error',
+      msg: "error",
-      data: null as any
+      data: null as any,
-    }
+    };
   }
-}
+};
 
 const redirectLogin = () => {
-  message.warning('用户登录已过期, 即将跳转到登录页面重新登录')
+  message.warning("用户登录已过期, 即将跳转到登录页面重新登录");
-  removeToken()
+  removeToken();
-  window.location.href = '/login'
+  window.location.href = "/login";
-}
+};
 
 const errorInfoRet = (msg: string) => {
-  message.error(msg)
+  message.error(msg);
   return {
     code: -1,
     msg,
-    data: null as any
+    data: null as any,
-  }
+  };
-}
+};
-export default request
+export default request;

src/view/system/user/comps/my-dept-tree/index.scss

@@ -0,0 +1,5 @@
+.dept-content {
+  flex: 20%;
+  padding: 35px 12px 0 0;
+  height: calc(100vh - 85px);
+}

src/view/system/user/comps/my-dept-tree/index.tsx

@@ -0,0 +1,88 @@
+import React, { useMemo, useState, useEffect } from "react";
+import { Input, Tree } from "antd";
+import { SearchOutlined } from "@ant-design/icons";
+import "./index.scss";
+
+interface treeDataType {
+  myTreeData: any[];
+}
+
+const MyDeptTree: React.FC<treeDataType> = (props) => {
+  console.log("props:", props.myTreeData[0]);
+
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+  const [searchValue, setSearchValue] = useState("");
+  const [autoExpandParent, setAutoExpandParent] = useState(true);
+
+  const onExpand = (newExpandedKeys: React.Key[]) => {
+    setExpandedKeys(newExpandedKeys);
+    setAutoExpandParent(false);
+  };
+
+  // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  //   const { value } = e.target;
+  //   const newExpandedKeys = dataList
+  //     .map((item) => {
+  //       if (item.title.indexOf(value) > -1) {
+  //         return getParentKey(item.key, defaultData);
+  //       }
+  //       return null;
+  //     })
+  //     .filter(
+  //       (item, i, self): item is React.Key =>
+  //         !!(item && self.indexOf(item) === i)
+  //     );
+  //   setExpandedKeys(newExpandedKeys);
+  //   setSearchValue(value);
+  //   setAutoExpandParent(true);
+  // };
+
+  const treeData = useMemo(() => {
+    const loop = (data: any[]): any[] =>
+      data.map((item) => {
+        const strTitle = item.deptName as string;
+        const index = strTitle.indexOf(searchValue);
+        const beforeStr = strTitle.substring(0, index);
+        const afterStr = strTitle.slice(index + searchValue.length);
+        const title =
+          index > -1 ? (
+            <span>
+              {beforeStr}
+              <span className="site-tree-search-value">{searchValue}</span>
+              {afterStr}
+            </span>
+          ) : (
+            <span>{strTitle}</span>
+          );
+        if (item.children) {
+          return { title, key: item.deptId, children: loop(item.children) };
+        }
+
+        return {
+          title,
+          key: item.key,
+        };
+      });
+
+    return loop(props.myTreeData);
+  }, [searchValue]);
+
+  return (
+    <div className="dept-content">
+      <Input
+        style={{ marginBottom: 8 }}
+        prefix={<SearchOutlined />}
+        placeholder="请输入部门名称"
+        // onChange={onChange}
+      />
+      <Tree
+        onExpand={onExpand}
+        expandedKeys={expandedKeys}
+        autoExpandParent={autoExpandParent}
+        treeData={treeData}
+      />
+    </div>
+  );
+};
+
+export default MyDeptTree;

src/view/system/user/comps/user-bottom-list/index.tsx

@@ -0,0 +1,168 @@
+import React, { useState } from "react";
+import { Table, Space } from "antd";
+import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
+const UserBottomList: React.FC = () => {
+  const [data, setData] = useState([
+    {
+      key: 1,
+      projectId: "1",
+      projectName: "http接口管理平台",
+      create_time: "2023/7/22",
+      description: "一个用于统一管理",
+      interface_nums: 8,
+      member: [
+        {
+          id: 1,
+          name: "Jim",
+          role: "阅读",
+        },
+        {
+          id: 2,
+          name: "Jack",
+          role: "编辑",
+        },
+        {
+          id: 3,
+          name: "Aurora",
+          role: "阅读",
+        },
+        {
+          id: 4,
+          name: "Tom",
+          role: "编辑",
+        },
+      ],
+    },
+    {
+      key: 2,
+      projectId: "2",
+      projectName: "低代码平台",
+      create_time: "2021/3/2",
+      description: "更高效的开发",
+      interface_nums: 12,
+      member: [
+        {
+          id: 1,
+          name: "qqq",
+          role: "阅读",
+        },
+        {
+          id: 2,
+          name: "bbb",
+          role: "编辑",
+        },
+      ],
+    },
+    {
+      key: 3,
+      projectId: "3",
+      projectName: "ui组件库",
+      create_time: "2021/1/1",
+      description: "漂亮,简洁的ui组件",
+      interface_nums: 5,
+      member: [
+        {
+          id: 1,
+          name: "111",
+          role: "阅读",
+        },
+        {
+          id: 2,
+          name: "2222",
+          role: "编辑",
+        },
+        {
+          id: 3,
+          name: "3333",
+          role: "阅读",
+        },
+      ],
+    },
+  ]);
+  const columns = [
+    {
+      title: "序号",
+      dataIndex: "Id",
+      key: "Id",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "用户名称",
+      dataIndex: "userName",
+      key: "userName",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "用户昵称",
+      dataIndex: "name",
+      key: "name",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "部门",
+      key: "dept",
+      dataIndex: "dept",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "手机号码",
+      key: "phoneNumber",
+      dataIndex: "phoneNumber",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "状态",
+      key: "state",
+      dataIndex: "state",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "创建时间",
+      key: "createTime",
+      dataIndex: "createTime",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "操作",
+      key: "operate",
+      dataIndex: "operate",
+      render: () => (
+        <>
+          <Space>
+            <EditOutlined />
+            <a href="#">编辑</a>
+            <DeleteOutlined />
+            <a href="#">删除</a>
+          </Space>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <Table
+        columns={columns}
+        dataSource={data}
+        className="article-table"
+        // pagination={{
+        //   position: ["none"],
+        // }}
+        // onRow={(record, index) => ({
+        //   onClick: () => {
+        //     // 在这里编写处理点击事件的代码
+        //     serActiveRowIndex(record.key);
+        //     eventBus.emit("tableRowClick", record);
+        //   },
+        //   // 根据条件动态设置行样式
+        //   style:
+        //     activeRowIndex === record.key
+        //       ? { backgroundColor: "#e1eaff" }
+        //       : null,
+        // })}
+      />
+    </div>
+  );
+};
+
+export default UserBottomList;

src/view/system/user/comps/user-mid-add-button/index.scss

@@ -0,0 +1,9 @@
+.add-content {
+  display: flex;
+  margin-left: 12px;
+  margin-top: 20px;
+  button:focus,
+  button:focus-visible {
+    outline: none;
+  }
+}

src/view/system/user/comps/user-mid-add-button/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Button } from "antd";
+import { PlusOutlined } from "@ant-design/icons";
+import "./index.scss";
+
+const UserMidAddButton: React.FC = () => {
+  return (
+    <div className="add-content">
+      <Button type="primary">
+        <PlusOutlined />
+        新增
+      </Button>
+    </div>
+  );
+};
+
+export default UserMidAddButton;

src/view/system/user/comps/user-top-search/index.scss

@@ -0,0 +1,50 @@
+.search-content {
+  display: flex;
+  flex-direction: column;
+  padding: 35px 12px 0 0;
+  .content-top {
+    display: flex;
+    .input-item {
+      display: flex;
+      align-items: center;
+      margin-right: 20px;
+      width: 270px;
+      div {
+        width: 120px;
+        font-weight: bold;
+      }
+    }
+    :nth-child(3) {
+      div {
+        margin-right: -30px;
+      }
+    }
+  }
+  .content-bottom {
+    display: flex;
+    margin-left: -20px;
+    margin-top: 20px;
+    div {
+      margin-right: 10px;
+    }
+    .time-selector {
+      display: flex;
+      align-items: center;
+
+      div {
+        width: 120px;
+        font-weight: bold;
+      }
+      .time-picker {
+        width: 400px;
+        text-align: center;
+        margin-left: -30px;
+        margin-right: 25px;
+      }
+    }
+    button:focus,
+    button:focus-visible {
+      outline: none;
+    }
+  }
+}

src/view/system/user/comps/user-top-search/index.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import "./index.scss";
+
+import { Input, Select, TimePicker, Button } from "antd";
+import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
+
+const UserTopSearch: React.FC = () => {
+  return (
+    <div className="search-content">
+      <div className="content-top">
+        <div className="input-item">
+          <div>用户名称</div>
+          <Input placeholder="请输入用户名称" />
+        </div>
+        <div className="input-item">
+          <div>手机号码</div>
+          <Input placeholder="请输入手机号码" />
+        </div>
+        <div className="input-item">
+          <div>状态</div>
+          <Select
+            style={{ width: 120 }}
+            placeholder="用户状态"
+            allowClear
+            options={[
+              { value: "正常1", label: "正常" },
+              { value: "停用1", label: "停用" },
+            ]}
+          />
+        </div>
+      </div>
+      <div className="content-bottom">
+        <div className="time-selector">
+          <div>创建时间</div>
+          <TimePicker.RangePicker
+            className="time-picker"
+            placeholder={["开始时间", "结束时间"]}
+          />
+        </div>
+        <div className="search-button">
+          <Button type="primary">
+            <SearchOutlined />
+            搜索
+          </Button>
+        </div>
+        <div className="reset-button">
+          <Button>
+            <RedoOutlined />
+            重置
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserTopSearch;

src/view/system/user/index.scss

@@ -0,0 +1,28 @@
+#content {
+  display: flex;
+  border-top: 1px solid black;
+  .left-dept {
+    flex: 20%;
+    padding: 35px 12px 0 0;
+    height: calc(100vh - 85px);
+    border: 1px solid red;
+    border-top: 1px solid black;
+  }
+  .right-user {
+    flex: 80%;
+    height: 190px;
+    display: flex;
+    flex-direction: column;
+    .user-top-search {
+    }
+    .user-mid-button {
+      display: flex;
+      margin-left: 12px;
+      margin-top: 20px;
+      button:focus,
+      button:focus-visible {
+        outline: none;
+      }
+    }
+  }
+}

src/view/system/user/index.tsx

@@ -1,7 +1,32 @@
-import React from 'react'
+import React, { useEffect, useState } from "react";
+
+import "./index.scss";
+import { getDeptTree } from "../../../api/user/userDept";
+import MyDeptTree from "./comps/my-dept-tree";
+import UserTopSearch from "./comps/user-top-search";
+import UserMidAddButton from "./comps/user-mid-add-button";
+import UserBottomList from "./comps/user-bottom-list";
 
 export default function User() {
-  return(
+  const [treeData, setTreeData] = useState<any[]>([]);
-    <div>user</div>
+  const getDeptTreeData = async () => {
-  )
+    const data = await getDeptTree();
-}
+    setTreeData(data.data);
+    console.log("father:", data);
+  };
+
+  useEffect(() => {
+    getDeptTreeData();
+  }, []);
+
+  return (
+    <div id="content">
+      <MyDeptTree myTreeData={treeData} />
+      <div className="right-user">
+        <UserTopSearch></UserTopSearch>
+        <UserMidAddButton></UserMidAddButton>
+        <UserBottomList></UserBottomList>
+      </div>
+    </div>
+  );
+}