Merge branch 'pure-admin:main' into main

locales/en.yaml

@@ -130,6 +130,7 @@ menus:
   hsdanmaku: Danmaku
   hsPureTableBase: Base Usage
   hsPureTableHigh: High Usage
+  hsPureTableEdit: Edit Usage
   hsboard: Paint Board
   hsMenuoverflow: Menu Overflow Show Tooltip Text
   hsChildMenuoverflow: Child Menu Overflow Show Tooltip Text

locales/zh-CN.yaml

@@ -129,8 +129,9 @@ menus:
   hsSensitive: 敏感词过滤
   hsPinyin: 汉语拼音
   hsdanmaku: 弹幕
-  hsPureTableBase: 基础用法（23个示例）
+  hsPureTableBase: 基础用法
-  hsPureTableHigh: 高级用法（11个示例）
+  hsPureTableHigh: 高级用法
+  hsPureTableEdit: 可编辑用法
   hsboard: 艺术画板
   hsMenuoverflow: 目录超出显示 Tooltip 文字提示
   hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示

mock/system.ts

@@ -140,6 +140,234 @@ export default defineFakeRoute([
       };
     }
   },
+  // 角色管理-权限-菜单权限
+  {
+    url: "/role-menu",
+    method: "post",
+    response: () => {
+      return {
+        success: true,
+        data: [
+          // 外部页面
+          {
+            parentId: 0,
+            id: 100,
+            menuType: 0, // 菜单类型（0代表菜单、1代表iframe、2代表外链、3代表按钮）
+            title: "menus.hsExternalPage"
+          },
+          {
+            parentId: 100,
+            id: 101,
+            menuType: 0,
+            title: "menus.hsExternalDoc"
+          },
+          {
+            parentId: 101,
+            id: 102,
+            menuType: 2,
+            title: "menus.externalLink"
+          },
+          {
+            parentId: 101,
+            id: 103,
+            menuType: 2,
+            title: "menus.pureutilsLink"
+          },
+          {
+            parentId: 100,
+            id: 104,
+            menuType: 1,
+            title: "menus.hsEmbeddedDoc"
+          },
+          {
+            parentId: 104,
+            id: 105,
+            menuType: 1,
+            title: "menus.hsEpDocument"
+          },
+          {
+            parentId: 104,
+            id: 106,
+            menuType: 1,
+            title: "menus.hsTailwindcssDocument"
+          },
+          {
+            parentId: 104,
+            id: 107,
+            menuType: 1,
+            title: "menus.hsVueDocument"
+          },
+          {
+            parentId: 104,
+            id: 108,
+            menuType: 1,
+            title: "menus.hsViteDocument"
+          },
+          {
+            parentId: 104,
+            id: 109,
+            menuType: 1,
+            title: "menus.hsPiniaDocument"
+          },
+          {
+            parentId: 104,
+            id: 110,
+            menuType: 1,
+            title: "menus.hsRouterDocument"
+          },
+          // 权限管理
+          {
+            parentId: 0,
+            id: 200,
+            menuType: 0,
+            title: "menus.permission"
+          },
+          {
+            parentId: 200,
+            id: 201,
+            menuType: 0,
+            title: "menus.permissionPage"
+          },
+          {
+            parentId: 200,
+            id: 202,
+            menuType: 0,
+            title: "menus.permissionButton"
+          },
+          {
+            parentId: 202,
+            id: 203,
+            menuType: 3,
+            title: "添加"
+          },
+          {
+            parentId: 202,
+            id: 204,
+            menuType: 3,
+            title: "修改"
+          },
+          {
+            parentId: 202,
+            id: 205,
+            menuType: 3,
+            title: "删除"
+          },
+          // 系统管理
+          {
+            parentId: 0,
+            id: 300,
+            menuType: 0,
+            title: "menus.hssysManagement"
+          },
+          {
+            parentId: 300,
+            id: 301,
+            menuType: 0,
+            title: "menus.hsUser"
+          },
+          {
+            parentId: 300,
+            id: 302,
+            menuType: 0,
+            title: "menus.hsRole"
+          },
+          {
+            parentId: 300,
+            id: 303,
+            menuType: 0,
+            title: "menus.hsSystemMenu"
+          },
+          {
+            parentId: 300,
+            id: 304,
+            menuType: 0,
+            title: "menus.hsDept"
+          },
+          // 系统监控
+          {
+            parentId: 0,
+            id: 400,
+            menuType: 0,
+            title: "menus.hssysMonitor"
+          },
+          {
+            parentId: 400,
+            id: 401,
+            menuType: 0,
+            title: "menus.hsOnlineUser"
+          },
+          {
+            parentId: 400,
+            id: 402,
+            menuType: 0,
+            title: "menus.hsLoginLog"
+          },
+          {
+            parentId: 400,
+            id: 403,
+            menuType: 0,
+            title: "menus.hsOperationLog"
+          },
+          {
+            parentId: 400,
+            id: 404,
+            menuType: 0,
+            title: "menus.hsSystemLog"
+          },
+          // 标签页操作
+          {
+            parentId: 0,
+            id: 500,
+            menuType: 0,
+            title: "menus.hstabs"
+          },
+          {
+            parentId: 500,
+            id: 501,
+            menuType: 0,
+            title: "menus.hstabs"
+          },
+          {
+            parentId: 500,
+            id: 502,
+            menuType: 0,
+            title: "query传参模式"
+          },
+          {
+            parentId: 500,
+            id: 503,
+            menuType: 0,
+            title: "params传参模式"
+          }
+        ]
+      };
+    }
+  },
+  // 角色管理-权限-菜单权限-根据角色 id 查对应菜单
+  {
+    url: "/role-menu-ids",
+    method: "post",
+    response: ({ body }) => {
+      if (body.id == 1) {
+        return {
+          success: true,
+          data: [
+            100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 200, 201,
+            202, 203, 204, 205, 300, 301, 302, 303, 304, 400, 401, 402, 403,
+            404, 500, 501, 502, 503
+          ]
+        };
+      } else if (body.id == 2) {
+        return {
+          success: true,
+          data: [
+            100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 404, 500,
+            501, 502, 503
+          ]
+        };
+      }
+    }
+  },
   // 菜单管理
   {
     url: "/menu",

package.json

@@ -54,7 +54,7 @@
     "@logicflow/extension": "^1.2.22",
     "@pureadmin/descriptions": "^1.2.1",
     "@pureadmin/table": "^3.1.2",
-    "@pureadmin/utils": "^2.4.6",
+    "@pureadmin/utils": "^2.4.7",
     "@vueuse/core": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
     "@wangeditor/editor": "^5.1.23",

pnpm-lock.yaml

@@ -24,8 +24,8 @@ dependencies:
     specifier: ^3.1.2
     version: 3.1.2(element-plus@2.6.1)(typescript@5.4.2)
   '@pureadmin/utils':
-    specifier: ^2.4.6
+    specifier: ^2.4.7
-    version: 2.4.6(echarts@5.5.0)(vue@3.4.21)
+    version: 2.4.7(echarts@5.5.0)(vue@3.4.21)
   '@vueuse/core':
     specifier: ^10.9.0
     version: 10.9.0(vue@3.4.21)
@@ -1758,7 +1758,7 @@ packages:
       element-plus: ^2.0.0
     dependencies:
       '@element-plus/icons-vue': 2.3.1(vue@3.4.21)
-      '@pureadmin/utils': 2.4.6(echarts@5.5.0)(vue@3.4.21)
+      '@pureadmin/utils': 2.4.7(echarts@5.5.0)(vue@3.4.21)
       element-plus: 2.6.1(vue@3.4.21)
       vue: 3.4.21(typescript@5.4.2)
     transitivePeerDependencies:
@@ -1785,8 +1785,8 @@ packages:
       string-hash: 1.1.3
     dev: true
 
-  /@pureadmin/utils@2.4.6(echarts@5.5.0)(vue@3.4.21):
+  /@pureadmin/utils@2.4.7(echarts@5.5.0)(vue@3.4.21):
-    resolution: {integrity: sha512-TBN9fJhqrsjATvSHR1tDC4ZCQTvC6zMl2xj76lEJW7/VAX3OtNlb5073BAQBBMg7fXsAUXkMyBTwagsOZM5grg==}
+    resolution: {integrity: sha512-fUHwZm9wEtcxUk//bs8xoDe0XYAeoU/FbvAF9CM4Y5xBmaaXvzN+sSFCUyUKC08q4tmCyaHBeLNolO3I4t3X6Q==}
     peerDependencies:
       echarts: '*'
       vue: '*'

src/api/system.ts

@@ -73,3 +73,13 @@ export const getSystemLogsList = (data?: object) => {
 export const getSystemLogsDetail = (data?: object) => {
   return http.request<Result>("post", "/system-logs-detail", { data });
 };
+
+/** 获取角色管理-权限-菜单权限 */
+export const getRoleMenu = (data?: object) => {
+  return http.request<Result>("post", "/role-menu", { data });
+};
+
+/** 获取角色管理-权限-菜单权限-根据角色 id 查对应菜单 */
+export const getRoleMenuIds = (data?: object) => {
+  return http.request<Result>("post", "/role-menu-ids", { data });
+};

src/components/ReDialog/index.vue

@@ -64,9 +64,10 @@ const fullscreenClass = computed(() => {
 function eventsCallBack(
   event: EventType,
   options: DialogOptions,
-  index: number
+  index: number,
+  isClickFullScreen = false
 ) {
-  fullscreen.value = options?.fullscreen ?? false;
+  if (!isClickFullScreen) fullscreen.value = options?.fullscreen ?? false;
   if (options?.[event] && isFunction(options?.[event])) {
     return options?.[event]({ options, index });
   }
@@ -108,7 +109,17 @@ function handleClose(
         <i
           v-if="!options?.fullscreen"
           :class="fullscreenClass"
-          @click="fullscreen = !fullscreen"
+          @click="
+            () => {
+              fullscreen = !fullscreen;
+              eventsCallBack(
+                'fullscreenCallBack',
+                { ...options, fullscreen },
+                index,
+                true
+              );
+            }
+          "
         >
           <IconifyIconOffline
             class="pure-dialog-svg"

src/components/ReDialog/type.ts

@@ -1,7 +1,12 @@
 import type { CSSProperties, VNode, Component } from "vue";
 
 type DoneFn = (cancel?: boolean) => void;
-type EventType = "open" | "close" | "openAutoFocus" | "closeAutoFocus";
+type EventType =
+  | "open"
+  | "close"
+  | "openAutoFocus"
+  | "closeAutoFocus"
+  | "fullscreenCallBack";
 type ArgsType = {
   /** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键 */
   command: "cancel" | "sure" | "close";
@@ -175,6 +180,14 @@ interface DialogOptions extends DialogProps {
     index: number;
     args: any;
   }) => void;
+  /** 点击全屏按钮时的回调 */
+  fullscreenCallBack?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => void;
   /** 输入焦点聚焦在 `Dialog` 内容时的回调 */
   openAutoFocus?: ({
     options,

src/router/modules/table.ts

@@ -25,6 +25,15 @@ export default {
       meta: {
         title: $t("menus.hsPureTableHigh")
       }
+    },
+    {
+      path: "/pure-table/edit",
+      name: "PureTableEdit",
+      component: () => import("@/views/pure-table/edit.vue"),
+      meta: {
+        title: $t("menus.hsPureTableEdit"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
     }
   ]
 } satisfies RouteConfigsTable;

src/views/components/dialog/index.vue

@@ -43,9 +43,11 @@ function onFullscreenClick() {
 
 function onFullscreenIconClick() {
   addDialog({
-    title: "全屏按钮",
+    title: "全屏按钮和全屏事件",
     fullscreenIcon: true,
-    contentRenderer: () => <p>弹框内容-全屏按钮</p>
+    fullscreenCallBack: ({ options, index }) =>
+      message(options.fullscreen ? "全屏" : "非全屏"),
+    contentRenderer: () => <p>弹框内容-全屏按钮和全屏事件</p>
   });
 }
 
@@ -468,7 +470,7 @@ function onBeforeSureClick() {
       <el-button @click="onBaseClick"> 基础用法 </el-button>
       <el-button @click="onDraggableClick"> 可拖拽 </el-button>
       <el-button @click="onFullscreenClick"> 全屏 </el-button>
-      <el-button @click="onFullscreenIconClick"> 全屏按钮 </el-button>
+      <el-button @click="onFullscreenIconClick"> 全屏按钮和全屏事件 </el-button>
       <el-button @click="onModalClick"> 无背景遮罩层 </el-button>
       <el-button @click="onStyleClick"> 自定义弹出位置 </el-button>
       <el-button @click="onoOpenDelayClick"> 延时2秒打开弹框 </el-button>

src/views/monitor/logs/login/index.vue

@@ -39,7 +39,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="用户名" prop="username">
         <el-input

src/views/monitor/logs/operation/index.vue

@@ -39,7 +39,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="所属模块" prop="module">
         <el-input

src/views/monitor/logs/system/index.vue

@@ -42,7 +42,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="所属模块" prop="module">
         <el-input

src/views/monitor/online/index.vue

@@ -33,7 +33,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="用户名" prop="username">
         <el-input

src/views/pure-table/edit.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { list } from "./edit/list";
+
+defineOptions({
+  name: "PureTableEdit"
+});
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          可编辑用法全部采用 tsx 语法，充分发挥
+          <el-link
+            href="https://github.com/pure-admin/pure-admin-table"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            @pureadmin/table
+          </el-link>
+          的灵活性，维护整体表格只需操作 columns 配置即可
+        </span>
+      </div>
+    </template>
+
+    <el-alert
+      title="可编辑用法中所有表格都设置了 row-key ，它是唯一值的字段，比如id。作用：1. 用来优化 Table
+      的渲染，尤其当字段在深层结构中；2. 防止拖拽后表格组件内部混乱（拖拽必须设置）"
+      type="info"
+      :closable="false"
+    />
+
+    <el-tabs @tab-click="tabClick">
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane :lazy="true">
+          <template #label>
+            <el-tooltip
+              :content="`（第 ${index + 1} 个示例）${item.content}`"
+              placement="top-end"
+            >
+              <span>{{ item.title }}</span>
+            </el-tooltip>
+          </template>
+          <component :is="item.component" v-if="selected == index" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__header) {
+  margin-top: 10px;
+}
+
+:deep(.el-alert__title) {
+  font-size: 16px;
+}
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
+</style>

src/views/pure-table/edit/data.ts

@@ -0,0 +1,74 @@
+const tableData = [
+  {
+    id: 1,
+    name: "Tom",
+    sex: 0, // 0代表男 1代表女
+    hobby: 2,
+    date: "2024-03-17"
+  },
+  {
+    id: 2,
+    name: "Jack",
+    sex: 0,
+    hobby: 1,
+    date: "2024-03-18"
+  },
+  {
+    id: 3,
+    name: "Lily",
+    sex: 1,
+    hobby: 1,
+    date: "2024-03-19"
+  },
+  {
+    id: 4,
+    name: "Mia",
+    sex: 1,
+    hobby: 3,
+    date: "2024-03-20"
+  }
+];
+
+const options = [
+  {
+    value: 0,
+    label: "上午写代码"
+  },
+  {
+    value: 1,
+    label: "下午写代码"
+  },
+  {
+    value: 2,
+    label: "晚上写代码"
+  },
+  {
+    value: 3,
+    label: "凌晨休息了"
+  }
+];
+
+const tableDataEdit = [
+  {
+    id: 1,
+    name: "Tom",
+    address: "home"
+  },
+  {
+    id: 2,
+    name: "Jack",
+    address: "office"
+  },
+  {
+    id: 3,
+    name: "Lily",
+    address: "library"
+  },
+  {
+    id: 4,
+    name: "Mia",
+    address: "playground"
+  }
+];
+
+export { tableData, tableDataEdit, options };

src/views/pure-table/edit/demo1/columns.tsx

@@ -0,0 +1,87 @@
+import { ref } from "vue";
+import { options } from "../data";
+
+export function useColumns() {
+  const dataList = ref([]);
+
+  const columns: TableColumnList = [
+    {
+      label: "姓名",
+      prop: "name",
+      cellRenderer: ({ row }) => <el-input v-model={row.name} />
+    },
+    {
+      label: "性别",
+      prop: "sex",
+      cellRenderer: ({ row }) => (
+        <el-switch
+          v-model={row.sex}
+          inline-prompt
+          active-value={0}
+          inactive-value={1}
+          active-text="男"
+          inactive-text="女"
+        />
+      )
+    },
+    {
+      label: "爱好",
+      prop: "hobby",
+      cellRenderer: ({ row }) => (
+        <el-select v-model={row.hobby} clearable placeholder="请选择爱好">
+          {options.map(item => {
+            return (
+              <el-option
+                key={item.value}
+                label={item.label}
+                value={item.value}
+              />
+            );
+          })}
+        </el-select>
+      )
+    },
+    {
+      label: "日期",
+      prop: "date",
+      cellRenderer: ({ row }) => (
+        <el-date-picker
+          v-model={row.date}
+          type="date"
+          format="YYYY/MM/DD"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择日期"
+        />
+      ),
+      minWidth: 110
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 90,
+      slot: "operation"
+    }
+  ];
+
+  function onAdd() {
+    dataList.value.push({
+      id: dataList.value.length + 1,
+      name: "",
+      sex: 0,
+      hobby: "",
+      date: ""
+    });
+  }
+
+  function onDel(row) {
+    const index = dataList.value.indexOf(row);
+    if (index !== -1) dataList.value.splice(index, 1);
+  }
+
+  return {
+    columns,
+    dataList,
+    onAdd,
+    onDel
+  };
+}

src/views/pure-table/edit/demo1/index.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+import Empty from "../empty.svg?component";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import AddFill from "@iconify-icons/ep/plus";
+import Delete from "@iconify-icons/ep/delete";
+
+const { columns, dataList, onAdd, onDel } = useColumns();
+</script>
+
+<template>
+  <div class="flex">
+    <el-scrollbar height="540px">
+      <code>
+        <pre class="w-[400px]"> {{ dataList }}</pre>
+      </code>
+    </el-scrollbar>
+    <pure-table
+      row-key="id"
+      align-whole="center"
+      :header-cell-style="{
+        background: 'var(--el-fill-color-light)',
+        color: 'var(--el-text-color-primary)'
+      }"
+      :data="dataList"
+      :columns="columns"
+    >
+      <template #empty>
+        <Empty fill="var(--el-svg-monochrome-grey)" class="m-auto" />
+      </template>
+      <template #append>
+        <el-button
+          plain
+          class="w-full my-2"
+          :icon="useRenderIcon(AddFill)"
+          @click="onAdd"
+        >
+          添加一行数据
+        </el-button>
+      </template>
+      <template #operation="{ row }">
+        <el-button
+          class="reset-margin"
+          link
+          type="primary"
+          :icon="useRenderIcon(Delete)"
+          @click="onDel(row)"
+        />
+      </template>
+    </pure-table>
+  </div>
+</template>
+
+<style scoped>
+:deep(.el-table__inner-wrapper::before) {
+  height: 0;
+}
+</style>

src/views/pure-table/edit/demo2/columns.tsx

@@ -0,0 +1,116 @@
+import { ref } from "vue";
+import { tableData, options } from "../data";
+import { clone, delObjectProperty } from "@pureadmin/utils";
+
+export function useColumns() {
+  const editMap = ref({});
+  const dataList = ref(clone(tableData, true));
+
+  const columns: TableColumnList = [
+    {
+      label: "姓名",
+      prop: "name",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-input v-model={row.name} />
+          ) : (
+            <p>{row.name}</p>
+          )}
+        </>
+      )
+    },
+    {
+      label: "性别",
+      prop: "sex",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-switch
+              v-model={row.sex}
+              inline-prompt
+              active-value={0}
+              inactive-value={1}
+              active-text="男"
+              inactive-text="女"
+            />
+          ) : (
+            <p>{row.sex === 0 ? "男" : "女"}</p>
+          )}
+        </>
+      )
+    },
+    {
+      label: "爱好",
+      prop: "hobby",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-select v-model={row.hobby} clearable placeholder="请选择爱好">
+              {options.map(item => {
+                return (
+                  <el-option
+                    key={item.value}
+                    label={item.label}
+                    value={item.value}
+                  />
+                );
+              })}
+            </el-select>
+          ) : (
+            <el-tag type="primary">
+              {options.filter(opt => opt.value == row.hobby)[0]?.label}
+            </el-tag>
+          )}
+        </>
+      )
+    },
+    {
+      label: "日期",
+      prop: "date",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-date-picker
+              v-model={row.date}
+              type="date"
+              format="YYYY/MM/DD"
+              value-format="YYYY-MM-DD"
+              placeholder="请选择日期"
+            />
+          ) : (
+            <p>{row.date}</p>
+          )}
+        </>
+      ),
+      minWidth: 110
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      slot: "operation"
+    }
+  ];
+
+  function onEdit(row, index) {
+    editMap.value[index] = Object.assign({ ...row, editable: true });
+  }
+
+  function onSave(index) {
+    editMap.value[index].editable = false;
+  }
+
+  function onCancel(index) {
+    editMap.value[index].editable = false;
+    dataList.value[index] = delObjectProperty(editMap.value[index], "editable");
+  }
+
+  return {
+    editMap,
+    columns,
+    dataList,
+    onEdit,
+    onSave,
+    onCancel
+  };
+}

src/views/pure-table/edit/demo2/index.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { editMap, columns, dataList, onEdit, onSave, onCancel } = useColumns();
+</script>
+
+<template>
+  <div class="flex">
+    <el-scrollbar>
+      <code>
+        <pre class="w-[400px]"> {{ dataList }}</pre>
+      </code>
+    </el-scrollbar>
+    <pure-table
+      row-key="id"
+      align-whole="center"
+      :header-cell-style="{
+        background: 'var(--el-fill-color-light)',
+        color: 'var(--el-text-color-primary)'
+      }"
+      :data="dataList"
+      :columns="columns"
+    >
+      <template #operation="{ row, index }">
+        <el-button
+          v-if="!editMap[index]?.editable"
+          class="reset-margin"
+          link
+          type="primary"
+          @click="onEdit(row, index)"
+        >
+          修改
+        </el-button>
+        <div v-else>
+          <el-button
+            class="reset-margin"
+            link
+            type="primary"
+            @click="onSave(index)"
+          >
+            保存
+          </el-button>
+          <el-button class="reset-margin" link @click="onCancel(index)">
+            取消
+          </el-button>
+        </div>
+      </template>
+    </pure-table>
+  </div>
+</template>

src/views/pure-table/edit/demo3/columns.tsx

@@ -0,0 +1,87 @@
+import { ref, computed } from "vue";
+import { tableDataEdit } from "../data";
+
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Check from "@iconify-icons/ep/check";
+
+export function useColumns() {
+  const editMap = ref({});
+  const activeIndex = ref(-1);
+  const dataList = ref(tableDataEdit);
+
+  const editing = computed(() => {
+    return index => {
+      return editMap.value[index]?.editing;
+    };
+  });
+
+  const iconClass = computed(() => {
+    return (index, other = false) => {
+      return [
+        "cursor-pointer",
+        "ml-2",
+        "transition",
+        "delay-100",
+        other
+          ? ["hover:scale-110", "hover:text-red-500"]
+          : editing.value(index) && ["scale-150", "text-red-500"]
+      ];
+    };
+  });
+
+  const columns: TableColumnList = [
+    {
+      label: "姓名（可修改）",
+      prop: "name",
+      cellRenderer: ({ row, index }) => (
+        <div
+          class="flex-bc w-full h-[32px]"
+          onMouseenter={() => (activeIndex.value = index)}
+          onMouseleave={() => onMouseleave(index)}
+        >
+          {!editing.value(index) ? (
+            <p>{row.name}</p>
+          ) : (
+            <>
+              <el-input v-model={row.name} />
+              <iconify-icon-offline
+                icon={Check}
+                class={iconClass.value(index)}
+                onClick={() => onSave(index)}
+              />
+            </>
+          )}
+          <iconify-icon-offline
+            v-show={activeIndex.value === index && !editing.value(index)}
+            icon={EditPen}
+            class={iconClass.value(index, true)}
+            onClick={() => onEdit(row, index)}
+          />
+        </div>
+      )
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  function onMouseleave(index) {
+    editing.value[index]
+      ? (activeIndex.value = index)
+      : (activeIndex.value = -1);
+  }
+
+  function onEdit(row, index) {
+    editMap.value[index] = Object.assign({ ...row, editing: true });
+  }
+
+  function onSave(index) {
+    editMap.value[index].editing = false;
+  }
+
+  return {
+    columns,
+    dataList
+  };
+}

src/views/pure-table/edit/demo3/index.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { columns, dataList } = useColumns();
+</script>
+
+<template>
+  <div class="flex">
+    <el-scrollbar>
+      <code>
+        <pre class="w-[400px]"> {{ dataList }}</pre>
+      </code>
+    </el-scrollbar>
+    <pure-table
+      class="!w-[30vw]"
+      row-key="id"
+      border
+      :data="dataList"
+      :columns="columns"
+    />
+  </div>
+</template>

src/views/pure-table/edit/empty.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="empty-icon" viewBox="0 0 1024 1024"><path d="M855.6 427.2H168.5c-12.7 0-24.4 6.9-30.6 18L4.4 684.7C1.5 689.9 0 695.8 0 701.8v287.1c0 19.4 15.7 35.1 35.1 35.1H989c19.4 0 35.1-15.7 35.1-35.1V701.8c0-6-1.5-11.8-4.4-17.1L886.2 445.2c-6.2-11.1-17.9-18-30.6-18M673.4 695.6c-16.5 0-30.8 11.5-34.3 27.7-12.7 58.5-64.8 102.3-127.2 102.3s-114.5-43.8-127.2-102.3c-3.5-16.1-17.8-27.7-34.3-27.7H119c-26.4 0-43.3-28-31.1-51.4l81.7-155.8c6.1-11.6 18-18.8 31.1-18.8h622.4c13 0 25 7.2 31.1 18.8l81.7 155.8c12.2 23.4-4.7 51.4-31.1 51.4zm146.5-486.1c-1-1.8-2.1-3.7-3.2-5.5-9.8-16.6-31.1-22.2-47.8-12.6L648.5 261c-17 9.8-22.7 31.6-12.6 48.4.9 1.4 1.7 2.9 2.5 4.4 9.5 17 31.2 22.8 48 13L807 257.3c16.7-9.7 22.4-31 12.9-47.8m-444.5 51.6L255 191.6c-16.7-9.6-38-4-47.8 12.6-1.1 1.8-2.1 3.6-3.2 5.5-9.5 16.8-3.8 38.1 12.9 47.8L337.3 327c16.9 9.7 38.6 4 48-13.1.8-1.5 1.7-2.9 2.5-4.4 10.2-16.8 4.5-38.6-12.4-48.4M512 239.3h2.5c19.5.3 35.5-15.5 35.5-35.1v-139c0-19.3-15.6-34.9-34.8-35.1h-6.4C489.6 30.3 474 46 474 65.2v139c0 19.5 15.9 35.4 35.5 35.1z"/></svg>

src/views/pure-table/edit/list.tsx

@@ -0,0 +1,27 @@
+import Demo1 from "./demo1/index.vue";
+import Demo2 from "./demo2/index.vue";
+import Demo3 from "./demo3/index.vue";
+
+const rendContent = (val: string) =>
+  `代码位置：src/views/pure-table/edit/${val}/index.vue`;
+
+export const list = [
+  {
+    key: "demo1",
+    content: rendContent("demo1"),
+    title: "整体编辑",
+    component: Demo1
+  },
+  {
+    key: "demo2",
+    content: rendContent("demo2"),
+    title: "单行编辑",
+    component: Demo2
+  },
+  {
+    key: "demo3",
+    content: rendContent("demo3"),
+    title: "单元格编辑",
+    component: Demo3
+  }
+];

src/views/pure-table/high/edit/columns.tsx

@@ -1,133 +0,0 @@
-import { tableDataEdit } from "../data";
-import { message } from "@/utils/message";
-import { ref, computed, Transition } from "vue";
-import { clone, delay } from "@pureadmin/utils";
-import EditPen from "@iconify-icons/ep/edit-pen";
-import Check from "@iconify-icons/ep/check";
-
-// 温馨提示：修改整行方法雷同，将cellRenderer后面渲染的组件抽出来做对应处理即可
-export function useColumns() {
-  // 修改值（可多个）
-  const inputValMap = ref({});
-  // 是否正处于修改状态（可多个）
-  const editStatus = ref({});
-  // 当前激活的单元格（唯一）
-  const activeIndex = ref(-1);
-  const dataList = ref(clone(tableDataEdit, true));
-
-  const comVal = computed(() => {
-    return index => {
-      return inputValMap.value[index]?.value;
-    };
-  });
-
-  const editing = computed(() => {
-    return index => {
-      return editStatus.value[index]?.editing;
-    };
-  });
-
-  const iconClass = computed(() => {
-    return (index, other = false) => {
-      return [
-        "cursor-pointer",
-        "ml-2",
-        "transition",
-        "delay-100",
-        other
-          ? ["hover:scale-110", "hover:text-red-500"]
-          : editing.value(index) && ["scale-150", "text-red-500"]
-      ];
-    };
-  });
-
-  const columns: TableColumnList = [
-    {
-      label: "ID（可修改）",
-      prop: "id",
-      // class="flex-bc" flex-bc 代表 flex justify-between items-center 具体看 src/style/tailwind.css 文件
-      cellRenderer: ({ row, index }) => (
-        <div
-          class="flex-bc w-full h-[32px]"
-          onMouseenter={() => (activeIndex.value = index)}
-          onMouseleave={() => onMouseleave(index)}
-        >
-          <p v-show={!editing.value(index)}>{row.id}</p>
-          <Transition enter-active-class="animate__animated animate__fadeInUp animate__faster">
-            <el-input
-              v-show={editing.value(index)}
-              modelValue={comVal.value(index)}
-              onInput={value => onChange(value, index)}
-            />
-          </Transition>
-          <iconify-icon-offline
-            v-show={editing.value(index)}
-            icon={Check}
-            class={iconClass.value(index)}
-            onClick={() => onSure(index)}
-          />
-          <iconify-icon-offline
-            v-show={activeIndex.value === index && !editing.value(index)}
-            icon={EditPen}
-            class={iconClass.value(index, true)}
-            onClick={() => onEdit(row, index)}
-          />
-        </div>
-      )
-    },
-    {
-      label: "日期",
-      prop: "date"
-    },
-    {
-      label: "姓名",
-      prop: "name"
-    },
-    {
-      label: "地址",
-      prop: "address"
-    }
-  ];
-
-  function onEdit({ id }, index) {
-    inputValMap.value[index] = Object.assign({}, inputValMap.value[index], {
-      value: id
-    });
-    // 处于修改状态
-    editStatus.value[index] = Object.assign({}, editStatus.value[index], {
-      editing: true
-    });
-  }
-
-  function onMouseleave(index) {
-    inputValMap.value[index]?.value
-      ? (activeIndex.value = index)
-      : (activeIndex.value = -1);
-  }
-
-  function onChange(value, index) {
-    inputValMap.value[index].value = value;
-  }
-
-  function onSure(index) {
-    dataList.value[index].id = inputValMap.value[index].value;
-    message(
-      `您修改了第 ${index + 1} 行，修改后数据为：${JSON.stringify(
-        dataList.value[index]
-      )}`,
-      {
-        type: "success"
-      }
-    );
-    // 修改状态关闭
-    editStatus.value[index] = Object.assign({}, editStatus.value[index], {
-      editing: false
-    });
-    delay().then(() => (inputValMap.value[index].value = null));
-  }
-
-  return {
-    columns,
-    dataList
-  };
-}

src/views/pure-table/high/edit/index.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { useColumns } from "./columns";
-
-const { columns, dataList } = useColumns();
-</script>
-
-<template>
-  <pure-table row-key="id" border :data="dataList" :columns="columns" />
-</template>

src/views/pure-table/high/list.tsx

@@ -4,7 +4,6 @@ import RowDrag from "./drag/row/index.vue";
 import ColumnDrag from "./drag/column/index.vue";
 import Contextmenu from "./contextmenu/index.vue";
 import Excel from "./excel/index.vue";
-import Edit from "./edit/index.vue";
 import Watermark from "./watermark/index.vue";
 import Print from "./prints/index.vue";
 import Echarts from "./echarts/index.vue";
@@ -50,12 +49,6 @@ export const list = [
     title: "右键菜单",
     component: Contextmenu
   },
-  {
-    key: "edit",
-    content: rendContent("edit"),
-    title: "单元格修改",
-    component: Edit
-  },
   {
     key: "excel",
     content: rendContent("excel"),

src/views/system/dept/index.vue

@@ -34,7 +34,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="部门名称：" prop="name">
         <el-input

src/views/system/dept/utils/hook.tsx

@@ -7,7 +7,7 @@ import { usePublicHooks } from "../../hooks";
 import { addDialog } from "@/components/ReDialog";
 import { reactive, ref, onMounted, h } from "vue";
 import type { FormItemProps } from "../utils/types";
-import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
+import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
 
 export function useDept() {
   const form = reactive({
@@ -120,6 +120,7 @@ export function useDept() {
       },
       width: "40%",
       draggable: true,
+      fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
       contentRenderer: () => h(editForm, { ref: formRef }),

src/views/system/menu/index.vue

@@ -35,7 +35,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="菜单名称：" prop="title">
         <el-input

src/views/system/menu/utils/hook.tsx

@@ -6,8 +6,8 @@ import { transformI18n } from "@/plugins/i18n";
 import { addDialog } from "@/components/ReDialog";
 import { reactive, ref, onMounted, h } from "vue";
 import type { FormItemProps } from "../utils/types";
-import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
 
 export function useMenu() {
   const form = reactive({
@@ -161,6 +161,7 @@ export function useMenu() {
       },
       width: "45%",
       draggable: true,
+      fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
       contentRenderer: () => h(editForm, { ref: formRef }),

src/views/system/role/index.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
-import { ref } from "vue";
 import { useRole } from "./utils/hook";
+import { ref, computed, nextTick, onMounted } from "vue";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import {
+  delay,
+  subBefore,
+  deviceDetection,
+  useResizeObserver
+} from "@pureadmin/utils";
 
 // import Database from "@iconify-icons/ri/database-2-line";
 // import More from "@iconify-icons/ep/more-filled";
@@ -11,29 +17,77 @@ import EditPen from "@iconify-icons/ep/edit-pen";
 import Refresh from "@iconify-icons/ep/refresh";
 import Menu from "@iconify-icons/ep/menu";
 import AddFill from "@iconify-icons/ri/add-circle-line";
+import Close from "@iconify-icons/ep/close";
+import Check from "@iconify-icons/ep/check";
 
 defineOptions({
   name: "SystemRole"
 });
 
+const iconClass = computed(() => {
+  return [
+    "w-[22px]",
+    "h-[22px]",
+    "flex",
+    "justify-center",
+    "items-center",
+    "outline-none",
+    "rounded-[4px]",
+    "cursor-pointer",
+    "transition-colors",
+    "hover:bg-[#0000000f]",
+    "dark:hover:bg-[#ffffff1f]",
+    "dark:hover:text-[#ffffffd9]"
+  ];
+});
+
+const treeRef = ref();
 const formRef = ref();
+const tableRef = ref();
+const contentRef = ref();
+const treeHeight = ref();
+
 const {
   form,
+  isShow,
+  curRow,
   loading,
   columns,
+  rowStyle,
   dataList,
+  treeData,
+  treeProps,
+  isLinkage,
   pagination,
+  isExpandAll,
+  isSelectAll,
+  treeSearchValue,
   // buttonClass,
   onSearch,
   resetForm,
   openDialog,
   handleMenu,
+  handleSave,
   handleDelete,
+  filterMethod,
+  transformI18n,
+  onQueryChanged,
   // handleDatabase,
   handleSizeChange,
   handleCurrentChange,
   handleSelectionChange
-} = useRole();
+} = useRole(treeRef);
+
+onMounted(() => {
+  useResizeObserver(contentRef, async () => {
+    await nextTick();
+    delay(60).then(() => {
+      treeHeight.value = parseFloat(
+        subBefore(tableRef.value.getTableDoms().tableWrapper.style.height, "px")
+      );
+    });
+  });
+});
 </script>
 
 <template>
@@ -42,7 +96,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="角色名称：" prop="name">
         <el-input
@@ -86,79 +140,87 @@ const {
       </el-form-item>
     </el-form>
 
-    <PureTableBar
+    <div
-      title="角色管理（仅演示，操作后不生效）"
+      ref="contentRef"
-      :columns="columns"
+      :class="['flex', deviceDetection() ? 'flex-wrap' : '']"
-      @refresh="onSearch"
     >
-      <template #buttons>
+      <PureTableBar
-        <el-button
+        :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
-          type="primary"
+        style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
-          :icon="useRenderIcon(AddFill)"
+        title="角色管理（仅演示，操作后不生效）"
-          @click="openDialog()"
+        :columns="columns"
-        >
+        @refresh="onSearch"
-          新增角色
+      >
-        </el-button>
+        <template #buttons>
-      </template>
+          <el-button
-      <template v-slot="{ size, dynamicColumns }">
+            type="primary"
-        <pure-table
+            :icon="useRenderIcon(AddFill)"
-          align-whole="center"
+            @click="openDialog()"
-          showOverflowTooltip
+          >
-          table-layout="auto"
+            新增角色
-          :loading="loading"
+          </el-button>
-          :size="size"
+        </template>
-          adaptive
+        <template v-slot="{ size, dynamicColumns }">
-          :adaptiveConfig="{ offsetBottom: 108 }"
+          <pure-table
-          :data="dataList"
+            ref="tableRef"
-          :columns="dynamicColumns"
+            align-whole="center"
-          :pagination="pagination"
+            showOverflowTooltip
-          :paginationSmall="size === 'small' ? true : false"
+            table-layout="auto"
-          :header-cell-style="{
+            :loading="loading"
-            background: 'var(--el-fill-color-light)',
+            :size="size"
-            color: 'var(--el-text-color-primary)'
+            adaptive
-          }"
+            :row-style="rowStyle"
-          @selection-change="handleSelectionChange"
+            :adaptiveConfig="{ offsetBottom: 108 }"
-          @page-size-change="handleSizeChange"
+            :data="dataList"
-          @page-current-change="handleCurrentChange"
+            :columns="dynamicColumns"
-        >
+            :pagination="pagination"
-          <template #operation="{ row }">
+            :paginationSmall="size === 'small' ? true : false"
-            <el-button
+            :header-cell-style="{
-              class="reset-margin"
+              background: 'var(--el-fill-color-light)',
-              link
+              color: 'var(--el-text-color-primary)'
-              type="primary"
+            }"
-              :size="size"
+            @selection-change="handleSelectionChange"
-              :icon="useRenderIcon(EditPen)"
+            @page-size-change="handleSizeChange"
-              @click="openDialog('修改', row)"
+            @page-current-change="handleCurrentChange"
-            >
+          >
-              修改
+            <template #operation="{ row }">
-            </el-button>
+              <el-button
-            <el-button
+                class="reset-margin"
-              class="reset-margin"
+                link
-              link
+                type="primary"
-              type="primary"
+                :size="size"
-              :size="size"
+                :icon="useRenderIcon(EditPen)"
-              :icon="useRenderIcon(Menu)"
+                @click="openDialog('修改', row)"
-              @click="handleMenu"
+              >
-            >
+                修改
-              菜单权限
+              </el-button>
-            </el-button>
+              <el-popconfirm
-            <el-popconfirm
+                :title="`是否确认删除角色名称为${row.name}的这条数据`"
-              :title="`是否确认删除角色名称为${row.name}的这条数据`"
+                @confirm="handleDelete(row)"
-              @confirm="handleDelete(row)"
+              >
-            >
+                <template #reference>
-              <template #reference>
+                  <el-button
-                <el-button
+                    class="reset-margin"
-                  class="reset-margin"
+                    link
-                  link
+                    type="primary"
-                  type="primary"
+                    :size="size"
-                  :size="size"
+                    :icon="useRenderIcon(Delete)"
-                  :icon="useRenderIcon(Delete)"
+                  >
-                >
+                    删除
-                  删除
+                  </el-button>
-                </el-button>
+                </template>
-              </template>
+              </el-popconfirm>
-            </el-popconfirm>
+              <el-button
-            <!-- <el-dropdown>
+                class="reset-margin"
+                link
+                type="primary"
+                :size="size"
+                :icon="useRenderIcon(Menu)"
+                @click="handleMenu(row)"
+              >
+                权限
+              </el-button>
+              <!-- <el-dropdown>
               <el-button
                 class="ml-3 mt-[2px]"
                 link
@@ -195,10 +257,74 @@ const {
                 </el-dropdown-menu>
               </template>
             </el-dropdown> -->
+            </template>
+          </pure-table>
+        </template>
+      </PureTableBar>
+
+      <div
+        v-if="isShow"
+        class="!min-w-[calc(100vw-60vw-268px)] mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto"
+      >
+        <div class="flex justify-between w-full px-3 pt-5 pb-4">
+          <div class="flex">
+            <span :class="iconClass">
+              <IconifyIconOffline
+                v-tippy="{
+                  content: '关闭'
+                }"
+                class="dark:text-white"
+                width="18px"
+                height="18px"
+                :icon="Close"
+                @click="handleMenu"
+              />
+            </span>
+            <span :class="[iconClass, 'ml-2']">
+              <IconifyIconOffline
+                v-tippy="{
+                  content: '保存菜单权限'
+                }"
+                class="dark:text-white"
+                width="18px"
+                height="18px"
+                :icon="Check"
+                @click="handleSave"
+              />
+            </span>
+          </div>
+          <p class="font-bold truncate">
+            菜单权限
+            {{ `${curRow?.name ? `（${curRow.name}）` : ""}` }}
+          </p>
+        </div>
+        <el-input
+          v-model="treeSearchValue"
+          placeholder="请输入菜单进行搜索"
+          class="mb-1"
+          clearable
+          @input="onQueryChanged"
+        />
+        <div class="flex flex-wrap">
+          <el-checkbox v-model="isExpandAll" label="展开/折叠" />
+          <el-checkbox v-model="isSelectAll" label="全选/全不选" />
+          <el-checkbox v-model="isLinkage" label="父子联动" />
+        </div>
+        <el-tree-v2
+          ref="treeRef"
+          show-checkbox
+          :data="treeData"
+          :props="treeProps"
+          :height="treeHeight"
+          :check-strictly="!isLinkage"
+          :filter-method="filterMethod"
+        >
+          <template #default="{ node }">
+            <span>{{ transformI18n(node.label) }}</span>
           </template>
-        </pure-table>
+        </el-tree-v2>
-      </template>
+      </div>
-    </PureTableBar>
+    </div>
   </div>
 </template>
 

src/views/system/role/utils/hook.tsx

@@ -1,25 +1,41 @@
 import dayjs from "dayjs";
 import editForm from "../form.vue";
+import { handleTree } from "@/utils/tree";
 import { message } from "@/utils/message";
-import { getRoleList } from "@/api/system";
 import { ElMessageBox } from "element-plus";
 import { usePublicHooks } from "../../hooks";
+import { transformI18n } from "@/plugins/i18n";
 import { addDialog } from "@/components/ReDialog";
 import type { FormItemProps } from "../utils/types";
 import type { PaginationProps } from "@pureadmin/table";
-import { reactive, ref, onMounted, h, toRaw } from "vue";
+import { getKeyList, deviceDetection } from "@pureadmin/utils";
+import { getRoleList, getRoleMenu, getRoleMenuIds } from "@/api/system";
+import { type Ref, reactive, ref, onMounted, h, toRaw, watch } from "vue";
 
-export function useRole() {
+export function useRole(treeRef: Ref) {
   const form = reactive({
     name: "",
     code: "",
     status: ""
   });
+  const curRow = ref();
   const formRef = ref();
   const dataList = ref([]);
+  const treeIds = ref([]);
+  const treeData = ref([]);
+  const isShow = ref(false);
   const loading = ref(true);
+  const isLinkage = ref(false);
+  const treeSearchValue = ref();
   const switchLoadMap = ref({});
+  const isExpandAll = ref(false);
+  const isSelectAll = ref(false);
   const { switchStyle } = usePublicHooks();
+  const treeProps = {
+    value: "id",
+    label: "title",
+    children: "children"
+  };
   const pagination = reactive<PaginationProps>({
     total: 0,
     pageSize: 10,
@@ -29,22 +45,18 @@ export function useRole() {
   const columns: TableColumnList = [
     {
       label: "角色编号",
-      prop: "id",
+      prop: "id"
-      minWidth: 100
     },
     {
       label: "角色名称",
-      prop: "name",
+      prop: "name"
-      minWidth: 120
     },
     {
       label: "角色标识",
-      prop: "code",
+      prop: "code"
-      minWidth: 150
     },
     {
       label: "状态",
-      minWidth: 130,
       cellRenderer: scope => (
         <el-switch
           size={scope.props.size === "small" ? "small" : "default"}
@@ -58,24 +70,25 @@ export function useRole() {
           style={switchStyle.value}
           onChange={() => onChange(scope as any)}
         />
-      )
+      ),
+      minWidth: 90
     },
     {
       label: "备注",
       prop: "remark",
-      minWidth: 150
+      minWidth: 160
     },
     {
       label: "创建时间",
-      minWidth: 180,
       prop: "createTime",
+      minWidth: 160,
       formatter: ({ createTime }) =>
         dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
     },
     {
       label: "操作",
       fixed: "right",
-      width: 240,
+      width: 210,
       slot: "operation"
     }
   ];
@@ -179,6 +192,7 @@ export function useRole() {
       },
       width: "40%",
       draggable: true,
+      fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
       contentRenderer: () => h(editForm, { ref: formRef }),
@@ -210,29 +224,92 @@ export function useRole() {
   }
 
   /** 菜单权限 */
-  function handleMenu() {
+  async function handleMenu(row?: any) {
-    message("等菜单管理页面开发后完善");
+    const { id } = row;
+    if (id) {
+      curRow.value = row;
+      isShow.value = true;
+      const { data } = await getRoleMenuIds({ id });
+      treeRef.value.setCheckedKeys(data);
+    } else {
+      curRow.value = null;
+      isShow.value = false;
+    }
+  }
+
+  /** 高亮当前权限选中行 */
+  function rowStyle({ row: { id } }) {
+    return {
+      cursor: "pointer",
+      background: id === curRow.value?.id ? "var(--el-fill-color-light)" : ""
+    };
+  }
+
+  /** 菜单权限-保存 */
+  function handleSave() {
+    const { id, name } = curRow.value;
+    // 根据用户 id 调用实际项目中菜单权限修改接口
+    console.log(id, treeRef.value.getCheckedKeys());
+    message(`角色名称为${name}的菜单权限修改成功`, {
+      type: "success"
+    });
   }
 
   /** 数据权限 可自行开发 */
   // function handleDatabase() {}
 
-  onMounted(() => {
+  const onQueryChanged = (query: string) => {
+    treeRef.value!.filter(query);
+  };
+
+  const filterMethod = (query: string, node) => {
+    return transformI18n(node.title)!.includes(query);
+  };
+
+  onMounted(async () => {
     onSearch();
+    const { data } = await getRoleMenu();
+    treeIds.value = getKeyList(data, "id");
+    treeData.value = handleTree(data);
+  });
+
+  watch(isExpandAll, val => {
+    val
+      ? treeRef.value.setExpandedKeys(treeIds.value)
+      : treeRef.value.setExpandedKeys([]);
+  });
+
+  watch(isSelectAll, val => {
+    val
+      ? treeRef.value.setCheckedKeys(treeIds.value)
+      : treeRef.value.setCheckedKeys([]);
   });
 
   return {
     form,
+    isShow,
+    curRow,
     loading,
     columns,
+    rowStyle,
     dataList,
+    treeData,
+    treeProps,
+    isLinkage,
     pagination,
+    isExpandAll,
+    isSelectAll,
+    treeSearchValue,
     // buttonClass,
     onSearch,
     resetForm,
     openDialog,
     handleMenu,
+    handleSave,
     handleDelete,
+    filterMethod,
+    transformI18n,
+    onQueryChanged,
     // handleDatabase,
     handleSizeChange,
     handleCurrentChange,

src/views/system/user/index.vue

@@ -32,6 +32,7 @@ const {
   selectedNum,
   pagination,
   buttonClass,
+  deviceDetection,
   onSearch,
   resetForm,
   onbatchDel,
@@ -50,20 +51,22 @@ const {
 </script>
 
 <template>
-  <div class="flex justify-between">
+  <div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
     <tree
       ref="treeRef"
-      class="min-w-[200px] mr-2"
+      :class="['mr-2', deviceDetection() ? 'w-full' : 'min-w-[200px]']"
       :treeData="treeData"
       :treeLoading="treeLoading"
       @tree-select="onTreeSelect"
     />
-    <div class="w-[calc(100%-200px)]">
+    <div
+      :class="[deviceDetection() ? ['w-full', 'mt-2'] : 'w-[calc(100%-200px)]']"
+    >
       <el-form
         ref="formRef"
         :inline="true"
         :model="form"
-        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
       >
         <el-form-item label="用户名称：" prop="username">
           <el-input

src/views/system/user/tree.vue

@@ -36,8 +36,9 @@ const defaultProps = {
 const buttonClass = computed(() => {
   return [
     "!h-[20px]",
+    "!text-sm",
     "reset-margin",
-    "!text-gray-500",
+    "!text-[var(--el-text-color-regular)]",
     "dark:!text-white",
     "dark:hover:!text-primary"
   ];
@@ -96,7 +97,7 @@ defineExpose({ onTreeReset });
   <div
     v-loading="props.treeLoading"
     class="h-full bg-bg_color overflow-auto"
-    :style="{ minHeight: `calc(100vh - 145px)` }"
+    :style="{ minHeight: `calc(100vh - 141px)` }"
   >
     <div class="flex items-center h-[34px]">
       <el-input

src/views/system/user/utils/hook.tsx

@@ -10,7 +10,12 @@ import { usePublicHooks } from "../../hooks";
 import { addDialog } from "@/components/ReDialog";
 import type { PaginationProps } from "@pureadmin/table";
 import type { FormItemProps, RoleFormItemProps } from "../utils/types";
-import { hideTextAtIndex, getKeyList, isAllEmpty } from "@pureadmin/utils";
+import {
+  getKeyList,
+  isAllEmpty,
+  hideTextAtIndex,
+  deviceDetection
+} from "@pureadmin/utils";
 import {
   getRoleIds,
   getDeptList,
@@ -322,6 +327,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       },
       width: "46%",
       draggable: true,
+      fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
       contentRenderer: () => h(editForm, { ref: formRef }),
@@ -360,6 +366,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       width: "40%",
       draggable: true,
       closeOnClickModal: false,
+      fullscreen: deviceDetection(),
       contentRenderer: () =>
         h(croppingUpload, {
           ref: cropRef,
@@ -389,6 +396,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       width: "30%",
       draggable: true,
       closeOnClickModal: false,
+      fullscreen: deviceDetection(),
       contentRenderer: () => (
         <>
           <ElForm ref={ruleFormRef} model={pwdForm}>
@@ -471,6 +479,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       },
       width: "400px",
       draggable: true,
+      fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
       contentRenderer: () => h(roleForm),
@@ -507,6 +516,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
     selectedNum,
     pagination,
     buttonClass,
+    deviceDetection,
     onSearch,
     resetForm,
     onbatchDel,