refactor: system pages (#399)

* refactor: system pages

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

build/optimize.ts

@@ -52,7 +52,6 @@ const include = [
 const exclude = [
   "@iconify-icons/ep",
   "@iconify-icons/ri",
-  "@iconify-icons/mdi",
   "@pureadmin/theme/dist/browser-utils"
 ];
 

package.json

@@ -71,7 +71,7 @@
     "vue-pdf-embed": "^1.1.5",
     "vue-router": "^4.1.6",
     "vue-types": "^4.2.1",
-    "vue-virtual-scroller": "^2.0.0-alpha.1",
+    "vue-virtual-scroller": "2.0.0-beta.7",
     "vue3-danmaku": "^1.2.0",
     "vuedraggable": "^4.1.0",
     "xgplayer": "^2.32.1",
@@ -81,7 +81,6 @@
     "@commitlint/cli": "13.1.0",
     "@commitlint/config-conventional": "13.1.0",
     "@iconify-icons/ep": "^1.2.7",
-    "@iconify-icons/mdi": "^1.2.8",
     "@iconify-icons/ri": "^1.2.3",
     "@iconify/vue": "^4.0.0",
     "@intlify/vite-plugin-vue-i18n": "^6.0.3",

pnpm-lock.yaml

@@ -6,7 +6,6 @@ specifiers:
   "@commitlint/config-conventional": 13.1.0
   "@howdyjs/mouse-menu": ^2.0.5
   "@iconify-icons/ep": ^1.2.7
-  "@iconify-icons/mdi": ^1.2.8
   "@iconify-icons/ri": ^1.2.3
   "@iconify/vue": ^4.0.0
   "@intlify/vite-plugin-vue-i18n": ^6.0.3
@@ -104,7 +103,7 @@ specifiers:
   vue-router: ^4.1.6
   vue-tsc: ^1.0.9
   vue-types: ^4.2.1
-  vue-virtual-scroller: ^2.0.0-alpha.1
+  vue-virtual-scroller: 2.0.0-beta.7
   vue3-danmaku: ^1.2.0
   vuedraggable: ^4.1.0
   xgplayer: ^2.32.1
@@ -163,7 +162,6 @@ devDependencies:
   "@commitlint/cli": 13.1.0
   "@commitlint/config-conventional": 13.1.0
   "@iconify-icons/ep": 1.2.10
-  "@iconify-icons/mdi": 1.2.35
   "@iconify-icons/ri": 1.2.4
   "@iconify/vue": 4.0.2_vue@3.2.45
   "@intlify/vite-plugin-vue-i18n": 6.0.3_vite@3.1.8+vue-i18n@9.2.2
@@ -971,15 +969,6 @@ packages:
       "@iconify/types": 2.0.0
     dev: true
 
-  /@iconify-icons/mdi/1.2.35:
-    resolution:
-      {
-        integrity: sha512-cOxQdQqMcV/CA3d2CkTFVRyvYRDE5SpX0Wekjl5lbEQ5IkAPy0hJrOebSH1Jo+IB8Nm3DbAT7xkj3TjgJ7VmEA==
-      }
-    dependencies:
-      "@iconify/types": 2.0.0
-    dev: true
-
   /@iconify-icons/ri/1.2.4:
     resolution:
       {

src/api/system.ts

@@ -10,6 +10,11 @@ type Result = {
   };
 };
 
+type ResultDept = {
+  success: boolean;
+  data?: Array<any>;
+};
+
 /** 获取用户管理列表 */
 export const getUserList = (data?: object) => {
   return http.request<Result>("post", "/user", { data });
@@ -22,5 +27,5 @@ export const getRoleList = (data?: object) => {
 
 /** 获取部门管理列表 */
 export const getDeptList = (data?: object) => {
-  return http.request<Result>("post", "/dept", { data });
+  return http.request<ResultDept>("post", "/dept", { data });
 };

src/components/ReIcon/src/offlineIcon.ts

@@ -43,7 +43,3 @@ addIcon("setting", Setting);
 addIcon("dept", Dept);
 addIcon("lollipop", Lollipop);
 addIcon("monitor", Monitor);
-
-// 非菜单图标
-import RefreshRight from "@iconify-icons/ep/refresh-right";
-addIcon("refreshRight", RefreshRight);

src/components/RePureTableBar/index.ts

@@ -0,0 +1,5 @@
+import pureTableBar from "./src/bar";
+import { withInstall } from "@pureadmin/utils";
+
+/** 配合 `@pureadmin/table` 实现快速便捷的表格操作 https://github.com/xiaoxian521/pure-admin-table */
+export const PureTableBar = withInstall(pureTableBar);

src/components/ReTable/src/bar.tsx → src/components/RePureTableBar/src/bar.tsx

@@ -1,54 +1,25 @@
-import { defineComponent, ref, computed, PropType } from "vue";
+import { delay } from "@pureadmin/utils";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
-
-import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
-import { IconifyIconOffline } from "../../ReIcon";
-import Expand from "@iconify-icons/mdi/arrow-expand-down";
-import ArrowCollapse from "@iconify-icons/mdi/arrow-collapse-vertical";
-import Setting from "@iconify-icons/ri/settings-3-line";
-
-export const loadingSvg = `
-  <path class="path" d="
-    M 30 15
-    L 28 17
-    M 25.61 25.61
-    A 15 15, 0, 0, 1, 15 30
-    A 15 15, 0, 1, 1, 27.99 7.5
-    L 15 15
-  "
-    style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
-  />
-`;
+import { defineComponent, ref, computed, type PropType } from "vue";
+import ExpandIcon from "./svg/expand.svg?component";
+import RefreshIcon from "./svg/refresh.svg?component";
+import SettingIcon from "./svg/settings.svg?component";
+import CollapseIcon from "./svg/collapse.svg?component";
 
 const props = {
-  // 头部最左边的标题
+  /** 头部最左边的标题 */
   title: {
     type: String,
     default: "列表"
   },
-  // 表格数据
-  dataList: {
-    type: Array,
-    default: () => {
-      return [];
-    }
-  },
-  // 对于树形表格，如果想启用展开和折叠功能，传入当前表格的ref即可
+  /** 对于树形表格，如果想启用展开和折叠功能，传入当前表格的ref即可 */
   tableRef: {
-    type: Object as PropType<any>,
-    default() {
-      return {};
-    }
-  },
-  // 是否显示加载动画，默认false 不加载
-  loading: {
-    type: Boolean,
-    default: false
+    type: Object as PropType<any>
   }
 };
 
 export default defineComponent({
-  name: "TableProBar",
+  name: "PureTableBar",
   props,
   emits: ["refresh"],
   setup(props, { emit, slots, attrs }) {
@@ -56,6 +27,7 @@ export default defineComponent({
     const checkList = ref([]);
     const size = ref("default");
     const isExpandAll = ref(true);
+    const loading = ref(false);
 
     const getDropdownItemStyle = computed(() => {
       return s => {
@@ -67,9 +39,26 @@ export default defineComponent({
       };
     });
 
+    const iconClass = computed(() => {
+      return [
+        "text-black",
+        "dark:text-white",
+        "duration-100",
+        "hover:!text-primary",
+        "cursor-pointer",
+        "outline-none"
+      ];
+    });
+
+    function onReFresh() {
+      loading.value = true;
+      emit("refresh");
+      delay(500).then(() => (loading.value = false));
+    }
+
     function onExpand() {
       isExpandAll.value = !isExpandAll.value;
-      toggleRowExpansionAll(props.dataList, isExpandAll.value);
+      toggleRowExpansionAll(props.tableRef.data, isExpandAll.value);
     }
 
     function toggleRowExpansionAll(data, isExpansion) {
@@ -88,7 +77,7 @@ export default defineComponent({
             style={getDropdownItemStyle.value("large")}
             onClick={() => (size.value = "large")}
           >
-            松散
+            宽松
           </el-dropdown-item>
           <el-dropdown-item
             style={getDropdownItemStyle.value("default")}
@@ -108,11 +97,8 @@ export default defineComponent({
 
     const reference = {
       reference: () => (
-        <IconifyIconOffline
-          class="cursor-pointer"
-          icon={Setting}
-          width="16"
-          color="text_color_regular"
+        <SettingIcon
+          class={["w-[16px]", iconClass.value]}
           onMouseover={e => (buttonRef.value = e.currentTarget)}
         />
       )
@@ -120,13 +106,7 @@ export default defineComponent({
 
     return () => (
       <>
-        <div
-          {...attrs}
-          class="w-[99/100] mt-6 p-2 bg-bg_color"
-          v-loading={props.loading}
-          element-loading-svg={loadingSvg}
-          element-loading-svg-view-box="-10, -10, 50, 50"
-        >
+        <div {...attrs} class="w-[99/100] mt-6 p-2 bg-bg_color">
           <div class="flex justify-between w-full h-[60px] p-4">
             <p class="font-bold truncate">{props.title}</p>
             <div class="flex items-center justify-around">
@@ -138,36 +118,32 @@ export default defineComponent({
                     content={isExpandAll.value ? "折叠" : "展开"}
                     placement="top"
                   >
-                    <IconifyIconOffline
-                      class="cursor-pointer"
-                      icon={isExpandAll.value ? UnExpand : Expand}
-                      width="16"
-                      color="text_color_regular"
+                    <ExpandIcon
+                      class={["w-[16px]", iconClass.value]}
+                      style={{
+                        transform: isExpandAll.value ? "none" : "rotate(-90deg)"
+                      }}
                       onClick={() => onExpand()}
                     />
                   </el-tooltip>
                   <el-divider direction="vertical" />
                 </>
-              ) : undefined}
+              ) : null}
               <el-tooltip effect="dark" content="刷新" placement="top">
-                <IconifyIconOffline
-                  class="cursor-pointer"
-                  icon="refreshRight"
-                  width="16"
-                  color="text_color_regular"
-                  onClick={() => emit("refresh")}
+                <RefreshIcon
+                  class={[
+                    "w-[16px]",
+                    iconClass.value,
+                    loading.value ? "animate-spin" : ""
+                  ]}
+                  onClick={() => onReFresh()}
                 />
               </el-tooltip>
               <el-divider direction="vertical" />
 
               <el-tooltip effect="dark" content="密度" placement="top">
                 <el-dropdown v-slots={dropdown} trigger="click">
-                  <IconifyIconOffline
-                    class="cursor-pointer"
-                    icon={ArrowCollapse}
-                    width="16"
-                    color="text_color_regular"
-                  />
+                  <CollapseIcon class={["w-[16px]", iconClass.value]} />
                 </el-dropdown>
               </el-tooltip>
               <el-divider direction="vertical" />
@@ -199,11 +175,7 @@ export default defineComponent({
               content="列设置"
             />
           </div>
-          {props.dataList.length > 0 ? (
-            slots.default({ size: size.value, checkList: checkList.value })
-          ) : (
-            <el-empty description="暂无数据" />
-          )}
+          {slots.default({ size: size.value, checkList: checkList.value })}
         </div>
       </>
     );

src/components/RePureTableBar/src/svg/collapse.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M13.79 10.21a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42l-2.5-2.5a1 1 0 0 0-.33-.21 1 1 0 0 0-.76 0 1 1 0 0 0-.33.21l-2.5 2.5a1 1 0 0 0 1.42 1.42l.79-.8v5.18l-.79-.8a1 1 0 0 0-1.42 1.42l2.5 2.5a1 1 0 0 0 .33.21.94.94 0 0 0 .76 0 1 1 0 0 0 .33-.21l2.5-2.5a1 1 0 0 0-1.42-1.42l-.79.8V9.41ZM7 4h10a1 1 0 0 0 0-2H7a1 1 0 0 0 0 2Zm10 16H7a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2Z"/></svg>

src/components/RePureTableBar/src/svg/expand.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4h9Z"/></svg>

src/components/RePureTableBar/src/svg/refresh.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"/></svg>

src/components/RePureTableBar/src/svg/settings.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M3.34 17a10.018 10.018 0 0 1-.978-2.326 3 3 0 0 0 .002-5.347A9.99 9.99 0 0 1 4.865 4.99a3 3 0 0 0 4.631-2.674 9.99 9.99 0 0 1 5.007.002 3 3 0 0 0 4.632 2.672A9.99 9.99 0 0 1 20.66 7c.433.749.757 1.53.978 2.326a3 3 0 0 0-.002 5.347 9.99 9.99 0 0 1-2.501 4.337 3 3 0 0 0-4.631 2.674 9.99 9.99 0 0 1-5.007-.002 3 3 0 0 0-4.632-2.672A10.018 10.018 0 0 1 3.34 17zm5.66.196a4.993 4.993 0 0 1 2.25 2.77c.499.047 1 .048 1.499.001A4.993 4.993 0 0 1 15 17.197a4.993 4.993 0 0 1 3.525-.565c.29-.408.54-.843.748-1.298A4.993 4.993 0 0 1 18 12c0-1.26.47-2.437 1.273-3.334a8.126 8.126 0 0 0-.75-1.298A4.993 4.993 0 0 1 15 6.804a4.993 4.993 0 0 1-2.25-2.77c-.499-.047-1-.048-1.499-.001A4.993 4.993 0 0 1 9 6.803a4.993 4.993 0 0 1-3.525.565 7.99 7.99 0 0 0-.748 1.298A4.993 4.993 0 0 1 6 12a4.99 4.99 0 0 1-1.273 3.334 8.126 8.126 0 0 0 .75 1.298A4.993 4.993 0 0 1 9 17.196zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>

src/components/ReQrcode/src/index.tsx

@@ -9,9 +9,9 @@ import {
 } from "vue";
 import "./index.scss";
 import { propTypes } from "@/utils/propTypes";
-import { IconifyIconOffline } from "../../ReIcon";
 import { isString, cloneDeep } from "@pureadmin/utils";
 import QRCode, { QRCodeRenderersOptions } from "qrcode";
+import RefreshRight from "@iconify-icons/ep/refresh-right";
 
 interface QrcodeLogo {
   src?: string;
@@ -244,9 +244,9 @@ export default defineComponent({
               onClick={disabledClick}
             >
               <div class="absolute top-[50%] left-[50%] font-bold">
-                <IconifyIconOffline
+                <iconify-icon-offline
                   class="cursor-pointer"
-                  icon="refreshRight"
+                  icon={RefreshRight}
                   width="30"
                   color="var(--el-color-primary)"
                 />

src/components/ReTable/index.ts

@@ -1,5 +0,0 @@
-import tableProBar from "./src/bar";
-import { withInstall } from "@pureadmin/utils";
-
-/** table-crud组件 */
-export const TableProBar = withInstall(tableProBar);

src/views/result/columns.tsx

@@ -1,4 +1,3 @@
-import { IconifyIconOffline } from "@/components/ReIcon";
 import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
 import CloseCircleLine from "@iconify-icons/ri/close-circle-line";
 
@@ -8,7 +7,7 @@ export function useColumns() {
       cellRenderer: () => {
         return (
           <span class="flex items-center -mt-6">
-            <IconifyIconOffline
+            <iconify-icon-offline
               icon={CloseCircleLine}
               color="#F56C6C"
               width="18px"
@@ -21,7 +20,7 @@ export function useColumns() {
               style="color: var(--el-color-primary)"
             >
               立即解冻
-              <IconifyIconOffline
+              <iconify-icon-offline
                 icon={ArrowRightSLine}
                 color="var(--el-color-primary)"
                 width="18px"
@@ -36,7 +35,7 @@ export function useColumns() {
       cellRenderer: () => {
         return (
           <span class="flex items-center -mt-8">
-            <IconifyIconOffline
+            <iconify-icon-offline
               icon={CloseCircleLine}
               color="#F56C6C"
               width="18px"
@@ -49,7 +48,7 @@ export function useColumns() {
               style="color: var(--el-color-primary)"
             >
               立即升级
-              <IconifyIconOffline
+              <iconify-icon-offline
                 icon={ArrowRightSLine}
                 color="var(--el-color-primary)"
                 width="18px"

src/views/system/dept/columns.tsx

@@ -1,64 +0,0 @@
-import dayjs from "dayjs";
-
-export function useColumns() {
-  const columns: TableColumnList = [
-    {
-      type: "selection",
-      width: 55,
-      align: "left",
-      hide: ({ checkList }) => !checkList.includes("勾选列")
-    },
-    {
-      label: "序号",
-      type: "index",
-      width: 60,
-      hide: ({ checkList }) => !checkList.includes("序号列")
-    },
-    {
-      label: "部门名称",
-      prop: "name",
-      width: 180,
-      align: "left"
-    },
-    {
-      label: "排序",
-      prop: "sort",
-      width: 60
-    },
-    {
-      label: "状态",
-      prop: "status",
-      width: 80,
-      cellRenderer: ({ row, props }) => (
-        <el-tag
-          size={props.size}
-          type={row.status === 1 ? "danger" : "success"}
-          effect="plain"
-        >
-          {row.status === 0 ? "关闭" : "开启"}
-        </el-tag>
-      )
-    },
-    {
-      label: "创建时间",
-      width: 180,
-      prop: "createTime",
-      formatter: ({ createTime }) =>
-        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
-    },
-    {
-      label: "备注",
-      prop: "remark"
-    },
-    {
-      label: "操作",
-      fixed: "right",
-      width: 140,
-      slot: "operation"
-    }
-  ];
-
-  return {
-    columns
-  };
-}

src/views/system/dept/hook.tsx

@@ -0,0 +1,114 @@
+import dayjs from "dayjs";
+import { handleTree } from "@/utils/tree";
+import { getDeptList } from "@/api/system";
+import { reactive, ref, onMounted } from "vue";
+
+export function useDept() {
+  const form = reactive({
+    user: "",
+    status: ""
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
+
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      width: 55,
+      align: "left",
+      hide: ({ checkList }) => !checkList.includes("勾选列")
+    },
+    {
+      label: "序号",
+      type: "index",
+      minWidth: 70,
+      hide: ({ checkList }) => !checkList.includes("序号列")
+    },
+    {
+      label: "部门名称",
+      prop: "name",
+      width: 180,
+      align: "left"
+    },
+    {
+      label: "排序",
+      prop: "sort",
+      minWidth: 70
+    },
+    {
+      label: "状态",
+      prop: "status",
+      minWidth: 100,
+      cellRenderer: ({ row, props }) => (
+        <el-tag
+          size={props.size}
+          type={row.status === 1 ? "danger" : "success"}
+          effect="plain"
+        >
+          {row.status === 0 ? "关闭" : "开启"}
+        </el-tag>
+      )
+    },
+    {
+      label: "创建时间",
+      minWidth: 200,
+      prop: "createTime",
+      formatter: ({ createTime }) =>
+        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "备注",
+      prop: "remark",
+      minWidth: 200
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 160,
+      slot: "operation"
+    }
+  ];
+
+  function handleUpdate(row) {
+    console.log(row);
+  }
+
+  function handleDelete(row) {
+    console.log(row);
+  }
+
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+  }
+
+  function resetForm(formEl) {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getDeptList();
+    dataList.value = handleTree(data);
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  onMounted(() => {
+    onSearch();
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    onSearch,
+    resetForm,
+    handleUpdate,
+    handleDelete,
+    handleSelectionChange
+  };
+}

src/views/system/dept/index.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { useColumns } from "./columns";
-import { handleTree } from "@/utils/tree";
-import { getDeptList } from "@/api/system";
-import { FormInstance } from "element-plus";
-import { reactive, ref, onMounted } from "vue";
-import { TableProBar } from "@/components/ReTable";
+import { ref } from "vue";
+import { useDept } from "./hook";
+import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
 import Delete from "@iconify-icons/ep/delete";
 import EditPen from "@iconify-icons/ep/edit-pen";
 import Search from "@iconify-icons/ep/search";
@@ -16,47 +14,19 @@ defineOptions({
   name: "Dept"
 });
 
-const form = reactive({
-  user: "",
-  status: ""
-});
-const dataList = ref([]);
-const loading = ref(true);
-const { columns } = useColumns();
-
-const formRef = ref<FormInstance>();
+const formRef = ref();
 const tableRef = ref();
-
-function handleUpdate(row) {
-  console.log(row);
-}
-
-function handleDelete(row) {
-  console.log(row);
-}
-
-function handleSelectionChange(val) {
-  console.log("handleSelectionChange", val);
-}
-
-async function onSearch() {
-  loading.value = true;
-  const { data } = await getDeptList();
-  dataList.value = handleTree(data as any);
-  setTimeout(() => {
-    loading.value = false;
-  }, 500);
-}
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-  onSearch();
-};
-
-onMounted(() => {
-  onSearch();
-});
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  onSearch,
+  resetForm,
+  handleUpdate,
+  handleDelete,
+  handleSelectionChange
+} = useDept();
 </script>
 
 <template>
@@ -68,10 +38,20 @@ onMounted(() => {
       class="bg-bg_color w-[99/100] pl-8 pt-4"
     >
       <el-form-item label="部门名称：" prop="user">
-        <el-input v-model="form.user" placeholder="请输入部门名称" clearable />
+        <el-input
+          v-model="form.user"
+          placeholder="请输入部门名称"
+          clearable
+          class="!w-[200px]"
+        />
       </el-form-item>
       <el-form-item label="状态：" prop="status">
-        <el-select v-model="form.status" placeholder="请选择状态" clearable>
+        <el-select
+          v-model="form.status"
+          placeholder="请选择状态"
+          clearable
+          class="!w-[180px]"
+        >
           <el-option label="开启" value="1" />
           <el-option label="关闭" value="0" />
         </el-select>
@@ -91,11 +71,9 @@ onMounted(() => {
       </el-form-item>
     </el-form>
 
-    <TableProBar
+    <PureTableBar
       title="部门列表"
-      :loading="loading"
       :tableRef="tableRef?.getTableRef()"
-      :dataList="dataList"
       @refresh="onSearch"
     >
       <template #buttons>
@@ -112,6 +90,7 @@ onMounted(() => {
           showOverflowTooltip
           table-layout="auto"
           default-expand-all
+          :loading="loading"
           :size="size"
           :data="dataList"
           :columns="columns"
@@ -150,6 +129,6 @@ onMounted(() => {
           </template>
         </pure-table>
       </template>
-    </TableProBar>
+    </PureTableBar>
   </div>
 </template>

src/views/system/role/columns.tsx → src/views/system/role/hook.tsx

@@ -1,11 +1,25 @@
-import { ref } from "vue";
 import dayjs from "dayjs";
 import { message } from "@/utils/message";
+import { getRoleList } from "@/api/system";
 import { ElMessageBox } from "element-plus";
+import { type PaginationProps } from "@pureadmin/table";
+import { reactive, ref, computed, onMounted } from "vue";
 
-export function useColumns() {
+export function useRole() {
+  const form = reactive({
+    name: "",
+    code: "",
+    status: ""
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
   const switchLoadMap = ref({});
-
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
   const columns: TableColumnList = [
     {
       type: "selection",
@@ -21,19 +35,23 @@ export function useColumns() {
     },
     {
       label: "角色编号",
-      prop: "id"
+      prop: "id",
+      minWidth: 100
     },
     {
       label: "角色名称",
-      prop: "name"
+      prop: "name",
+      minWidth: 120
     },
     {
       label: "角色标识",
-      prop: "code"
+      prop: "code",
+      minWidth: 150
     },
     {
       label: "角色类型",
       prop: "type",
+      minWidth: 150,
       cellRenderer: ({ row, props }) => (
         <el-tag
           size={props.size}
@@ -46,12 +64,12 @@ export function useColumns() {
     },
     {
       label: "显示顺序",
-      prop: "sort"
+      prop: "sort",
+      minWidth: 100
     },
     {
       label: "状态",
-      prop: "status",
-      width: 130,
+      minWidth: 130,
       cellRenderer: scope => (
         <el-switch
           size={scope.props.size === "small" ? "small" : "default"}
@@ -68,7 +86,7 @@ export function useColumns() {
     },
     {
       label: "创建时间",
-      width: 180,
+      minWidth: 180,
       prop: "createTime",
       formatter: ({ createTime }) =>
         dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
@@ -80,6 +98,15 @@ export function useColumns() {
       slot: "operation"
     }
   ];
+  const buttonClass = computed(() => {
+    return [
+      "!h-[20px]",
+      "reset-margin",
+      "!text-gray-500",
+      "dark:!text-white",
+      "dark:hover:!text-primary"
+    ];
+  });
 
   function onChange({ row, index }) {
     ElMessageBox.confirm(
@@ -123,7 +150,59 @@ export function useColumns() {
       });
   }
 
+  function handleUpdate(row) {
+    console.log(row);
+  }
+
+  function handleDelete(row) {
+    console.log(row);
+  }
+
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+  }
+
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+  }
+
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getRoleList();
+    dataList.value = data.list;
+    pagination.total = data.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  };
+
+  onMounted(() => {
+    onSearch();
+  });
+
   return {
-    columns
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    buttonClass,
+    onSearch,
+    resetForm,
+    handleUpdate,
+    handleDelete,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange
   };
 }

src/views/system/role/index.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { useColumns } from "./columns";
-import { getRoleList } from "@/api/system";
-import { reactive, ref, onMounted } from "vue";
-import { type FormInstance } from "element-plus";
-import { TableProBar } from "@/components/ReTable";
-import { type PaginationProps } from "@pureadmin/table";
+import { ref } from "vue";
+import { useRole } from "./hook";
+import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
 import Database from "@iconify-icons/ri/database-2-line";
 import More from "@iconify-icons/ep/more-filled";
 import Delete from "@iconify-icons/ep/delete";
@@ -19,64 +17,22 @@ defineOptions({
   name: "Role"
 });
 
-const form = reactive({
-  name: "",
-  code: "",
-  status: ""
-});
-
-const dataList = ref([]);
-const loading = ref(true);
-const { columns } = useColumns();
-
-const formRef = ref<FormInstance>();
-
-const pagination = reactive<PaginationProps>({
-  total: 0,
-  pageSize: 10,
-  currentPage: 1,
-  background: true
-});
-
-function handleUpdate(row) {
-  console.log(row);
-}
-
-function handleDelete(row) {
-  console.log(row);
-}
-
-function handleCurrentChange(val: number) {
-  console.log(`current page: ${val}`);
-}
-
-function handleSizeChange(val: number) {
-  console.log(`${val} items per page`);
-}
-
-function handleSelectionChange(val) {
-  console.log("handleSelectionChange", val);
-}
-
-async function onSearch() {
-  loading.value = true;
-  const { data } = await getRoleList();
-  dataList.value = data.list;
-  pagination.total = data.total;
-  setTimeout(() => {
-    loading.value = false;
-  }, 500);
-}
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-  onSearch();
-};
-
-onMounted(() => {
-  onSearch();
-});
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  buttonClass,
+  onSearch,
+  resetForm,
+  handleUpdate,
+  handleDelete,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange
+} = useRole();
 </script>
 
 <template>
@@ -88,13 +44,28 @@ onMounted(() => {
       class="bg-bg_color w-[99/100] pl-8 pt-4"
     >
       <el-form-item label="角色名称：" prop="name">
-        <el-input v-model="form.name" placeholder="请输入角色名称" clearable />
+        <el-input
+          v-model="form.name"
+          placeholder="请输入角色名称"
+          clearable
+          class="!w-[200px]"
+        />
       </el-form-item>
       <el-form-item label="角色标识：" prop="code">
-        <el-input v-model="form.code" placeholder="请输入角色标识" clearable />
+        <el-input
+          v-model="form.code"
+          placeholder="请输入角色标识"
+          clearable
+          class="!w-[180px]"
+        />
       </el-form-item>
       <el-form-item label="状态：" prop="status">
-        <el-select v-model="form.status" placeholder="请选择状态" clearable>
+        <el-select
+          v-model="form.status"
+          placeholder="请选择状态"
+          clearable
+          class="!w-[180px]"
+        >
           <el-option label="已开启" value="1" />
           <el-option label="已关闭" value="0" />
         </el-select>
@@ -114,12 +85,7 @@ onMounted(() => {
       </el-form-item>
     </el-form>
 
-    <TableProBar
-      title="角色列表"
-      :loading="loading"
-      :dataList="dataList"
-      @refresh="onSearch"
-    >
+    <PureTableBar title="角色列表" @refresh="onSearch">
       <template #buttons>
         <el-button type="primary" :icon="useRenderIcon(AddFill)">
           新增角色
@@ -131,6 +97,7 @@ onMounted(() => {
           align-whole="center"
           showOverflowTooltip
           table-layout="auto"
+          :loading="loading"
           :size="size"
           :data="dataList"
           :columns="columns"
@@ -151,8 +118,8 @@ onMounted(() => {
               link
               type="primary"
               :size="size"
-              @click="handleUpdate(row)"
               :icon="useRenderIcon(EditPen)"
+              @click="handleUpdate(row)"
             >
               修改
             </el-button>
@@ -172,18 +139,18 @@ onMounted(() => {
             </el-popconfirm>
             <el-dropdown>
               <el-button
-                class="ml-3"
+                class="ml-3 mt-[2px]"
                 link
                 type="primary"
                 :size="size"
-                @click="handleUpdate(row)"
                 :icon="useRenderIcon(More)"
+                @click="handleUpdate(row)"
               />
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item>
                     <el-button
-                      class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                      :class="buttonClass"
                       link
                       type="primary"
                       :size="size"
@@ -194,7 +161,7 @@ onMounted(() => {
                   </el-dropdown-item>
                   <el-dropdown-item>
                     <el-button
-                      class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                      :class="buttonClass"
                       link
                       type="primary"
                       :size="size"
@@ -209,7 +176,7 @@ onMounted(() => {
           </template>
         </pure-table>
       </template>
-    </TableProBar>
+    </PureTableBar>
   </div>
 </template>
 

src/views/system/user/columns.tsx → src/views/system/user/hook.tsx

@@ -1,11 +1,25 @@
-import { ref } from "vue";
 import dayjs from "dayjs";
 import { message } from "@/utils/message";
+import { getUserList } from "@/api/system";
 import { ElMessageBox } from "element-plus";
+import { type PaginationProps } from "@pureadmin/table";
+import { reactive, ref, computed, onMounted } from "vue";
 
-export function useColumns() {
+export function useUser() {
+  const form = reactive({
+    username: "",
+    mobile: "",
+    status: ""
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
   const switchLoadMap = ref({});
-
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
   const columns: TableColumnList = [
     {
       type: "selection",
@@ -21,19 +35,23 @@ export function useColumns() {
     },
     {
       label: "用户编号",
-      prop: "id"
+      prop: "id",
+      minWidth: 130
     },
     {
       label: "用户名称",
-      prop: "username"
+      prop: "username",
+      minWidth: 130
     },
     {
       label: "用户昵称",
-      prop: "nickname"
+      prop: "nickname",
+      minWidth: 130
     },
     {
       label: "性别",
       prop: "sex",
+      minWidth: 90,
       cellRenderer: ({ row, props }) => (
         <el-tag
           size={props.size}
@@ -47,16 +65,18 @@ export function useColumns() {
     {
       label: "部门",
       prop: "dept",
+      minWidth: 90,
       formatter: ({ dept }) => dept.name
     },
     {
       label: "手机号码",
-      prop: "mobile"
+      prop: "mobile",
+      minWidth: 90
     },
     {
       label: "状态",
       prop: "status",
-      width: 130,
+      minWidth: 90,
       cellRenderer: scope => (
         <el-switch
           size={scope.props.size === "small" ? "small" : "default"}
@@ -73,7 +93,7 @@ export function useColumns() {
     },
     {
       label: "创建时间",
-      width: 180,
+      minWidth: 90,
       prop: "createTime",
       formatter: ({ createTime }) =>
         dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
@@ -85,6 +105,15 @@ export function useColumns() {
       slot: "operation"
     }
   ];
+  const buttonClass = computed(() => {
+    return [
+      "!h-[20px]",
+      "reset-margin",
+      "!text-gray-500",
+      "dark:!text-white",
+      "dark:hover:!text-primary"
+    ];
+  });
 
   function onChange({ row, index }) {
     ElMessageBox.confirm(
@@ -128,7 +157,59 @@ export function useColumns() {
       });
   }
 
+  function handleUpdate(row) {
+    console.log(row);
+  }
+
+  function handleDelete(row) {
+    console.log(row);
+  }
+
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+  }
+
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+  }
+
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getUserList();
+    dataList.value = data.list;
+    pagination.total = data.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  };
+
+  onMounted(() => {
+    onSearch();
+  });
+
   return {
-    columns
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    buttonClass,
+    onSearch,
+    resetForm,
+    handleUpdate,
+    handleDelete,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange
   };
 }

src/views/system/user/index.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import tree from "./tree.vue";
-import { useColumns } from "./columns";
-import { getUserList } from "@/api/system";
-import { reactive, ref, onMounted } from "vue";
-import { type FormInstance } from "element-plus";
-import { TableProBar } from "@/components/ReTable";
-import { type PaginationProps } from "@pureadmin/table";
+import { useUser } from "./hook";
+import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
 import Role from "@iconify-icons/ri/admin-line";
@@ -21,69 +18,28 @@ defineOptions({
   name: "User"
 });
 
-const form = reactive({
-  username: "",
-  mobile: "",
-  status: ""
-});
-const dataList = ref([]);
-const loading = ref(true);
-const { columns } = useColumns();
-
-const formRef = ref<FormInstance>();
-
-const pagination = reactive<PaginationProps>({
-  total: 0,
-  pageSize: 10,
-  currentPage: 1,
-  background: true
-});
-
-function handleUpdate(row) {
-  console.log(row);
-}
-
-function handleDelete(row) {
-  console.log(row);
-}
-
-function handleCurrentChange(val: number) {
-  console.log(`current page: ${val}`);
-}
-
-function handleSizeChange(val: number) {
-  console.log(`${val} items per page`);
-}
-
-function handleSelectionChange(val) {
-  console.log("handleSelectionChange", val);
-}
-
-async function onSearch() {
-  loading.value = true;
-  const { data } = await getUserList();
-  dataList.value = data.list;
-  pagination.total = data.total;
-  setTimeout(() => {
-    loading.value = false;
-  }, 500);
-}
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-  onSearch();
-};
-
-onMounted(() => {
-  onSearch();
-});
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  buttonClass,
+  onSearch,
+  resetForm,
+  handleUpdate,
+  handleDelete,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange
+} = useUser();
 </script>
 
 <template>
-  <div class="main flex">
-    <tree />
-    <div class="flex-1 ml-4">
+  <div class="main">
+    <tree class="w-[17%] float-left" />
+    <div class="float-right w-[81%]">
       <el-form
         ref="formRef"
         :inline="true"
@@ -95,6 +51,7 @@ onMounted(() => {
             v-model="form.username"
             placeholder="请输入用户名称"
             clearable
+            class="!w-[160px]"
           />
         </el-form-item>
         <el-form-item label="手机号码：" prop="mobile">
@@ -102,10 +59,16 @@ onMounted(() => {
             v-model="form.mobile"
             placeholder="请输入手机号码"
             clearable
+            class="!w-[160px]"
           />
         </el-form-item>
         <el-form-item label="状态：" prop="status">
-          <el-select v-model="form.status" placeholder="请选择" clearable>
+          <el-select
+            v-model="form.status"
+            placeholder="请选择"
+            clearable
+            class="!w-[160px]"
+          >
             <el-option label="已开启" value="1" />
             <el-option label="已关闭" value="0" />
           </el-select>
@@ -125,12 +88,7 @@ onMounted(() => {
         </el-form-item>
       </el-form>
 
-      <TableProBar
-        title="用户管理"
-        :loading="loading"
-        :dataList="dataList"
-        @refresh="onSearch"
-      >
+      <PureTableBar title="用户管理" @refresh="onSearch">
         <template #buttons>
           <el-button type="primary" :icon="useRenderIcon(AddFill)">
             新增用户
@@ -141,6 +99,7 @@ onMounted(() => {
             border
             align-whole="center"
             table-layout="auto"
+            :loading="loading"
             :size="size"
             :data="dataList"
             :columns="columns"
@@ -182,7 +141,7 @@ onMounted(() => {
               </el-popconfirm>
               <el-dropdown>
                 <el-button
-                  class="ml-3"
+                  class="ml-3 mt-[2px]"
                   link
                   type="primary"
                   :size="size"
@@ -193,7 +152,7 @@ onMounted(() => {
                   <el-dropdown-menu>
                     <el-dropdown-item>
                       <el-button
-                        class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                        :class="buttonClass"
                         link
                         type="primary"
                         :size="size"
@@ -204,7 +163,7 @@ onMounted(() => {
                     </el-dropdown-item>
                     <el-dropdown-item>
                       <el-button
-                        class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                        :class="buttonClass"
                         link
                         type="primary"
                         :size="size"
@@ -219,7 +178,7 @@ onMounted(() => {
             </template>
           </pure-table>
         </template>
-      </TableProBar>
+      </PureTableBar>
     </div>
   </div>
 </template>

src/views/system/user/svg/expand.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4h9Z"/></svg>

src/views/system/user/svg/unexpand.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M4 2H2v20h2v-9h14.17l-5.5 5.5l1.41 1.42L22 12l-7.92-7.92l-1.41 1.42l5.5 5.5H4V2Z"/></svg>

src/views/system/user/tree.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import { handleTree } from "@/utils/tree";
-import type { ElTree } from "element-plus";
 import { getDeptList } from "@/api/system";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { ref, watch, onMounted, getCurrentInstance } from "vue";
+import { ref, computed, watch, onMounted, getCurrentInstance } from "vue";
 
-import LocationCompany from "@iconify-icons/ep/add-location";
-import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
-import Expand from "@iconify-icons/mdi/arrow-expand-down";
-import More2Fill from "@iconify-icons/ri/more-2-fill";
-import Reset from "@iconify-icons/ri/restart-line";
 import Dept from "@iconify-icons/ri/git-branch-line";
-import OfficeBuilding from "@iconify-icons/ep/office-building";
+import Reset from "@iconify-icons/ri/restart-line";
 import Search from "@iconify-icons/ep/search";
+import More2Fill from "@iconify-icons/ri/more-2-fill";
+import OfficeBuilding from "@iconify-icons/ep/office-building";
+import LocationCompany from "@iconify-icons/ep/add-location";
+import ExpandIcon from "./svg/expand.svg?component";
+import UnExpandIcon from "./svg/unexpand.svg?component";
 
 interface Tree {
   id: number;
@@ -20,17 +19,26 @@ interface Tree {
   highlight?: boolean;
   children?: Tree[];
 }
-const defaultProps = {
-  children: "children",
-  label: "name"
-};
 
+const treeRef = ref();
 const treeData = ref([]);
+const isExpand = ref(true);
 const searchValue = ref("");
-const { proxy } = getCurrentInstance();
-const treeRef = ref<InstanceType<typeof ElTree>>();
-
 const highlightMap = ref({});
+const { proxy } = getCurrentInstance();
+const defaultProps = {
+  children: "children",
+  label: "name"
+};
+const buttonClass = computed(() => {
+  return [
+    "!h-[20px]",
+    "reset-margin",
+    "!text-gray-500",
+    "dark:!text-white",
+    "dark:hover:!text-primary"
+  ];
+});
 
 const filterNode = (value: string, data: Tree) => {
   if (!value) return true;
@@ -54,13 +62,14 @@ function nodeClick(value) {
 }
 
 function toggleRowExpansionAll(status) {
+  isExpand.value = status;
   const nodes = (proxy.$refs["treeRef"] as any).store._getAllNodes();
   for (let i = 0; i < nodes.length; i++) {
     nodes[i].expanded = status;
   }
 }
 
-// 重置状态（选中状态、搜索框值、树初始化）
+/** 重置状态（选中状态、搜索框值、树初始化） */
 function onReset() {
   highlightMap.value = {};
   searchValue.value = "";
@@ -73,12 +82,12 @@ watch(searchValue, val => {
 
 onMounted(async () => {
   const { data } = await getDeptList();
-  treeData.value = handleTree(data as any);
+  treeData.value = handleTree(data);
 });
 </script>
 
 <template>
-  <div class="max-w-[260px] h-full min-h-[780px] bg-bg_color">
+  <div class="h-full min-h-[780px] bg-bg_color overflow-auto">
     <div class="flex items-center h-[34px]">
       <p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
         部门列表
@@ -99,7 +108,7 @@ onMounted(async () => {
           </el-icon>
         </template>
       </el-input>
-      <el-dropdown>
+      <el-dropdown :hide-on-click="false">
         <IconifyIconOffline
           class="w-[28px] cursor-pointer"
           width="18px"
@@ -109,29 +118,18 @@ onMounted(async () => {
           <el-dropdown-menu>
             <el-dropdown-item>
               <el-button
-                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
-                link
-                type="primary"
-                :icon="useRenderIcon(Expand)"
-                @click="toggleRowExpansionAll(true)"
-              >
-                展开全部
-              </el-button>
-            </el-dropdown-item>
-            <el-dropdown-item>
-              <el-button
-                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                :class="buttonClass"
                 link
                 type="primary"
-                :icon="useRenderIcon(UnExpand)"
-                @click="toggleRowExpansionAll(false)"
+                :icon="useRenderIcon(isExpand ? ExpandIcon : UnExpandIcon)"
+                @click="toggleRowExpansionAll(isExpand ? false : true)"
               >
-                折叠全部
+                {{ isExpand ? "折叠全部" : "展开全部" }}
               </el-button>
             </el-dropdown-item>
             <el-dropdown-item>
               <el-button
-                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                :class="buttonClass"
                 link
                 type="primary"
                 :icon="useRenderIcon(Reset)"

src/views/welcome/components/columns.tsx

@@ -1,4 +1,3 @@
-import { IconifyIconOffline } from "@/components/ReIcon";
 import TypeIt from "@/components/ReTypeit";
 import OfficeBuilding from "@iconify-icons/ep/office-building";
 import Tickets from "@iconify-icons/ep/tickets";
@@ -21,7 +20,7 @@ export function useColumns() {
       labelRenderer: () => (
         <div class="flex items-center">
           <el-icon>
-            <IconifyIconOffline icon={User} />
+            <iconify-icon-offline icon={User} />
           </el-icon>
           用户名
         </div>
@@ -32,7 +31,7 @@ export function useColumns() {
       labelRenderer: () => (
         <div class="flex items-center">
           <el-icon>
-            <IconifyIconOffline icon={Iphone} />
+            <iconify-icon-offline icon={Iphone} />
           </el-icon>
           手机号
         </div>
@@ -43,7 +42,7 @@ export function useColumns() {
       labelRenderer: () => (
         <div class="flex items-center">
           <el-icon>
-            <IconifyIconOffline icon={Location} />
+            <iconify-icon-offline icon={Location} />
           </el-icon>
           居住地
         </div>
@@ -57,7 +56,7 @@ export function useColumns() {
       labelRenderer: () => (
         <div class="flex items-center">
           <el-icon>
-            <IconifyIconOffline icon={Tickets} />
+            <iconify-icon-offline icon={Tickets} />
           </el-icon>
           标签
         </div>
@@ -76,7 +75,7 @@ export function useColumns() {
       labelRenderer: () => (
         <div class="flex items-center">
           <el-icon>
-            <IconifyIconOffline icon={OfficeBuilding} />
+            <iconify-icon-offline icon={OfficeBuilding} />
           </el-icon>
           联系地址
         </div>
@@ -90,7 +89,7 @@ export function useColumns() {
       labelRenderer: () => (
         <div class="flex items-center">
           <el-icon>
-            <IconifyIconOffline icon={Notebook} />
+            <iconify-icon-offline icon={Notebook} />
           </el-icon>
           好好学习，天天向上
         </div>