diff --git a/docs/java/SysMenuServiceImpl.java b/docs/java/SysMenuServiceImpl.java
deleted file mode 100644
index 4c63a211..00000000
--- a/docs/java/SysMenuServiceImpl.java
+++ /dev/null
@@ -1,34 +0,0 @@
-    /**
-     * 查询系统菜单列表
-     *
-     * @param menu 菜单信息
-     * @return 菜单列表
-     */
-    @Override
-    public List<SysMenuVo> selectMenuList(SysMenuBo menu, Long userId) {
-        List<SysMenuVo> menuList;
-        // 管理员显示所有菜单信息
-        if (LoginHelper.isSuperAdmin(userId)) {
-            menuList = baseMapper.selectVoList(new LambdaQueryWrapper<SysMenu>()
-                .like(StringUtils.isNotBlank(menu.getMenuName()), SysMenu::getMenuName, menu.getMenuName())
-                .eq(StringUtils.isNotBlank(menu.getVisible()), SysMenu::getVisible, menu.getVisible())
-                .eq(StringUtils.isNotBlank(menu.getStatus()), SysMenu::getStatus, menu.getStatus())
-                .eq(StringUtils.isNotBlank(menu.getMenuType()), SysMenu::getMenuType, menu.getMenuType())
-                .eq(ObjectUtil.isNotNull(menu.getParentId()), SysMenu::getParentId, menu.getParentId())
-                .orderByAsc(SysMenu::getParentId)
-                .orderByAsc(SysMenu::getOrderNum));
-        } else {
-            QueryWrapper<SysMenu> wrapper = Wrappers.query();
-            wrapper.inSql("r.role_id", "select role_id from sys_user_role where user_id = " + userId)
-                .like(StringUtils.isNotBlank(menu.getMenuName()), "m.menu_name", menu.getMenuName())
-                .eq(StringUtils.isNotBlank(menu.getVisible()), "m.visible", menu.getVisible())
-                .eq(StringUtils.isNotBlank(menu.getStatus()), "m.status", menu.getStatus())
-                .eq(StringUtils.isNotBlank(menu.getMenuType()), "m.menu_type", menu.getMenuType())
-                .eq(ObjectUtil.isNotNull(menu.getParentId()), "m.parent_id", menu.getParentId())
-                .orderByAsc("m.parent_id")
-                .orderByAsc("m.order_num");
-            List<SysMenu> list = baseMapper.selectMenuListByUserId(wrapper);
-            menuList = MapstructUtils.convert(list, SysMenuVo.class);
-        }
-        return menuList;
-    }
diff --git a/docs/java/VelocityUtils.java b/docs/java/VelocityUtils.java
index 2f020a30..a6f5ce9b 100644
--- a/docs/java/VelocityUtils.java
+++ b/docs/java/VelocityUtils.java
@@ -62,7 +62,7 @@ public class VelocityUtils {
         velocityContext.put("BusinessName", StringUtils.capitalize(genTable.getBusinessName()));
         velocityContext.put("businessName", genTable.getBusinessName());
         velocityContext.put("business_name", StrUtil.toUnderlineCase(genTable.getBusinessName()));
-        velocityContext.put("business-name", StrUtil.toSymbolCase(genTable.getBusinessName(),'-'));
+        velocityContext.put("business__name", StrUtil.toSymbolCase(genTable.getBusinessName(), '-'));
         velocityContext.put("businessname", StrUtil.toSymbolCase(genTable.getBusinessName(), ' '));
         velocityContext.put("basePackage", getPackagePrefix(packageName));
         velocityContext.put("packageName", packageName);
@@ -180,7 +180,7 @@ public class VelocityUtils {
         } else if (template.contains("soy.api.d.ts.vm")) {
             fileName = StringUtils.format("soybean/typings/api/{}.api.d.ts", moduleName);
         } else if (template.contains("soy.api.ts.vm")) {
-            fileName = StringUtils.format("soybean/api/{}/{}.ts", moduleName,  StrUtil.toSymbolCase(businessName, '-'));
+            fileName = StringUtils.format("soybean/api/{}/{}.ts", moduleName, StrUtil.toSymbolCase(businessName, '-'));
         } else if (template.contains("soy.search.vue.vm")) {
             fileName = StringUtils.format("soybean/views/{}/{}/modules/{}-search.vue", moduleName, businessName, StrUtil.toSymbolCase(businessName, '-'));
         } else if (template.contains("soy.operate-drawer.vue.vm")) {
diff --git a/docs/template/modules/soy.operate-drawer.vue.vm b/docs/template/modules/soy.operate-drawer.vue.vm
index 8f6c869b..ca9c071b 100644
--- a/docs/template/modules/soy.operate-drawer.vue.vm
+++ b/docs/template/modules/soy.operate-drawer.vue.vm
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, reactive, watch } from 'vue';
+import { fetchCreate${BusinessName}, fetchUpdate${BusinessName} } from '@/service/api/${moduleName}/${business__name}';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
-import { $t } from '@/locales';
-import { fetchCreate${BusinessName}, fetchUpdate${BusinessName} } from '@/service/api/${moduleName}/${business-name}';
 #if($dictList && $dictList.size() > 0)import { useDict } from '@/hooks/business/dict';#end
+import { $t } from '@/locales';
 
 defineOptions({
   name: '${BusinessName}OperateDrawer'
@@ -177,7 +177,7 @@ watch(visible, () => {
             value-format="yyyy-MM-dd HH:mm:ss"
             clearable
           />
-#else              <NInput v-model:value="model.$column.javaField" placeholder="请输入$column.columnComment" />
+#else          <NInput v-model:value="model.$column.javaField" placeholder="请输入$column.columnComment" />
     #end
         </NFormItem>
 #end
diff --git a/docs/template/modules/soy.search.vue.vm b/docs/template/modules/soy.search.vue.vm
index 3b8d1c82..9f347973 100644
--- a/docs/template/modules/soy.search.vue.vm
+++ b/docs/template/modules/soy.search.vue.vm
@@ -1,7 +1,8 @@
 #set($ModuleName=$moduleName.substring(0, 1).toUpperCase() + $moduleName.substring(1))
 <script setup lang="ts">
-import { $t } from '@/locales';
+import { ref } from 'vue';
 import { useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
 #if($dictList && $dictList.size() > 0)import { useDict } from '@/hooks/business/dict';#end
 
 defineOptions({
@@ -20,7 +21,7 @@ const { formRef, validate, restoreValidation } = useNaiveForm();
 #foreach ($column in $columns)
     #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
         #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-const dateRange${AttrName} = ref<[string, string]>();
+const dateRange${AttrName} = ref<[string, string] | null>(null);
 #end#end
 
 const model = defineModel<Api.$ModuleName.${BusinessName}SearchParams>('model', { required: true });
@@ -34,9 +35,10 @@ async function reset() {
 #foreach ($column in $columns)
     #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
         #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-  dateRange${AttrName}.value = undefined;
+  dateRange${AttrName}.value = null;
     #end
 #end
+  Object.assign(model.value.params!, {});
   await restoreValidation();
   emit('reset');
 }
diff --git a/docs/template/soy.index.vue.vm b/docs/template/soy.index.vue.vm
index 0d7fd4f9..f6258704 100644
--- a/docs/template/soy.index.vue.vm
+++ b/docs/template/soy.index.vue.vm
@@ -1,13 +1,14 @@
 <script setup lang="tsx">
-import { NButton, NPopconfirm } from 'naive-ui';
+import { NDivider } from 'naive-ui';
 import { fetchBatchDelete${BusinessName}, fetchGet${BusinessName}List } from '@/service/api/${moduleName}/${businessName}';
-import { $t } from '@/locales';
-import { useAuth } from '@/hooks/business/auth';
 import { useAppStore } from '@/store/modules/app';
+import { useAuth } from '@/hooks/business/auth';
 import { useDownload } from '@/hooks/business/download';
 import { useTable, useTableOperate } from '@/hooks/common/table';
-import ${BusinessName}OperateDrawer from './modules/${business-name}-operate-drawer.vue';
-import ${BusinessName}Search from './modules/${business-name}-search.vue';
+import { $t } from '@/locales';
+import ButtonIcon from '@/components/custom/button-icon.vue';
+import ${BusinessName}OperateDrawer from './modules/${business__name}-operate-drawer.vue';
+import ${BusinessName}Search from './modules/${business__name}-search.vue';
 
 defineOptions({
   name: '${BusinessName}List'
@@ -39,6 +40,7 @@ const {
     $column.javaField: null#if($foreach.hasNext),#end
   #end
 #end
+    params: {}
   },
   columns: () => [
     {
@@ -68,67 +70,69 @@ const {
       align: 'center',
       width: 130,
       render: row => {
+        const divider = () => {
+          if (!hasAuth('${moduleName}:${businessName}:edit') || !hasAuth('${moduleName}:${businessName}:remove')) {
+            return null;
+          }
+          return <NDivider vertical />;
+        };
+
         const editBtn = () => {
-            if (!hasAuth('${moduleName}:${businessName}:edit')) {
-                return null;
-            }
-            return (
-                <NButton type="primary" ghost size="small" onClick={() => edit(row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end!)}>
-                    {$t('common.edit')}
-                </NButton>
-            );
+          if (!hasAuth('${moduleName}:${businessName}:edit')) {
+            return null;
+          }
+          return (
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:drive-file-rename-outline-outline"
+              tooltipContent={$t('common.edit')}
+              onClick={() => edit(row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end!)}
+            />
+          );
         };
 
         const deleteBtn = () => {
-            if (!hasAuth('${moduleName}:${businessName}:remove')) {
-                return null;
-            }
-            return (
-                <NPopconfirm onPositiveClick={() => handleDelete(row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end!)}>
-                    {{
-                        default: () => $t('common.confirmDelete'),
-                        trigger: () => (
-                            <NButton type="error" ghost size="small">
-                                {$t('common.delete')}
-                            </NButton>
-                        )
-                    }}
-                </NPopconfirm>
-            );
+          if (!hasAuth('${moduleName}:${businessName}:remove')) {
+            return null;
+          }
+          return (
+            <ButtonIcon
+              text
+              type="error"
+              icon="material-symbols:delete-outline"
+              tooltipContent={$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
+              onPositiveClick={() => handleDelete(row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end!)}
+            />
+          );
         };
 
         return (
-            <div class="flex-center gap-8px">
-                {editBtn()}
-                {deleteBtn()}
-            </div>
+          <div class="flex-center gap-8px">
+            {editBtn()}
+            {divider()}
+            {deleteBtn()}
+          </div>
         );
       }
     }
   ]
 });
 
-const {
-  drawerVisible,
-  operateType,
-  editingData,
-  handleAdd,
-  handleEdit,
-  checkedRowKeys,
-  onBatchDeleted,
-  onDeleted
-} = useTableOperate(data, getData);
+const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
+  useTableOperate(data, getData);
 
 async function handleBatchDelete() {
   // request
-  const { error } = await fetchBatchDelete${BusinessName}(checkedRowKeys.value)
+  const { error } = await fetchBatchDelete${BusinessName}(checkedRowKeys.value);
   if (error) return;
   onBatchDeleted();
 }
 
 async function handleDelete(#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end: CommonType.IdType) {
   // request
-  const { error } = await fetchBatchDelete${BusinessName}([#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end])
+  const { error } = await fetchBatchDelete${BusinessName}([#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end]);
   if (error) return;
   onDeleted();
 }
@@ -138,7 +142,7 @@ async function edit(#foreach($column in $columns)#if($column.isPk == '1')$column
 }
 
 async function handleExport() {
-    download('/${moduleName}/${businessName}/export', searchParams, `${functionName}_#[[${new Date().getTime()}]]#.xlsx`);
+  download('/${moduleName}/${businessName}/export', searchParams, `${functionName}_#[[${new Date().getTime()}]]#.xlsx`);
 }
 </script>
 
@@ -169,7 +173,7 @@ async function handleExport() {
         :scroll-x="962"
         :loading="loading"
         remote
-        :row-key="row => row.id"
+        :row-key="row => row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end"
         :pagination="mobilePagination"
         class="sm:h-full"
       />
diff --git a/src/components/custom/dept-tree.vue b/src/components/custom/dept-tree.vue
new file mode 100644
index 00000000..8d208430
--- /dev/null
+++ b/src/components/custom/dept-tree.vue
@@ -0,0 +1,144 @@
+<script setup lang="tsx">
+import { onMounted, ref, useAttrs } from 'vue';
+import type { TreeSelectInst, TreeSelectProps } from 'naive-ui';
+import { useBoolean } from '@sa/hooks';
+import { fetchGetDeptTree } from '@/service/api/system/user';
+
+defineOptions({ name: 'DeptTree' });
+
+interface Props {
+  immediate?: boolean;
+  [key: string]: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  immediate: true
+});
+
+const { bool: expandAll } = useBoolean();
+const { bool: checkAll } = useBoolean();
+const expandedKeys = ref<CommonType.IdType[]>([100]);
+
+const deptTreeRef = ref<TreeSelectInst | null>(null);
+const value = defineModel<CommonType.IdType[]>('value', { required: false, default: [] });
+const options = defineModel<any[]>('options', { required: false, default: [] });
+const cascade = defineModel<boolean>('cascade', { required: false, default: true });
+const loading = defineModel<boolean>('loading', { required: false, default: false });
+
+const attrs: TreeSelectProps = useAttrs();
+
+async function getDeptList() {
+  loading.value = true;
+  const { error, data } = await fetchGetDeptTree();
+  if (error) return;
+
+  // 确保 options.value 是数组
+  if (data) {
+    options.value = Array.isArray(data) ? data : [data];
+  } else {
+    options.value = [];
+  }
+
+  loading.value = false;
+}
+
+onMounted(() => {
+  if (props.immediate) {
+    getDeptList();
+  }
+});
+
+function getAllDeptIds(depts: any[]) {
+  const deptIds: CommonType.IdType[] = [];
+  depts.forEach(item => {
+    if (item.id) {
+      deptIds.push(item.id);
+    }
+    if (item.children && Array.isArray(item.children)) {
+      deptIds.push(...getAllDeptIds(item.children));
+    }
+  });
+  return deptIds;
+}
+
+function handleCheckedTreeNodeAll(checked: boolean) {
+  if (checked) {
+    value.value = getAllDeptIds(options.value);
+    return;
+  }
+  value.value = [];
+}
+
+function handleSubmit() {
+  const deptIds = [...value.value];
+  const indeterminateData = deptTreeRef.value?.getIndeterminateData();
+  if (cascade.value) {
+    const parentIds: string[] = indeterminateData?.keys.filter(item => !deptIds?.includes(String(item))) as string[];
+    deptIds?.push(...parentIds);
+  }
+  return deptIds;
+}
+
+defineExpose({
+  submit: handleSubmit,
+  refresh: getDeptList
+});
+</script>
+
+<template>
+  <div class="w-full flex-col gap-12px">
+    <div class="w-full flex-center">
+      <NCheckbox v-model:checked="expandAll" :checked-value="true" :unchecked-value="false">展开/折叠</NCheckbox>
+      <NCheckbox
+        v-model:checked="checkAll"
+        :checked-value="true"
+        :unchecked-value="false"
+        @update:checked="handleCheckedTreeNodeAll"
+      >
+        全选/反选
+      </NCheckbox>
+      <NCheckbox v-model:checked="cascade" :checked-value="true" :unchecked-value="false">父子联动</NCheckbox>
+    </div>
+    <NSpin class="resource h-full w-full py-6px pl-3px" content-class="h-full" :show="loading">
+      <NTree
+        ref="deptTreeRef"
+        v-model:checked-keys="value"
+        v-model:expanded-keys="expandedKeys"
+        multiple
+        checkable
+        key-field="id"
+        label-field="label"
+        :data="options"
+        :cascade="cascade"
+        :loading="loading"
+        virtual-scroll
+        :check-strategy="cascade ? 'child' : 'all'"
+        :default-expand-all="expandAll"
+        v-bind="attrs"
+      />
+    </NSpin>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.resource {
+  border-radius: 6px;
+  border: 1px solid rgb(224, 224, 230);
+
+  .n-tree {
+    min-height: 200px;
+    max-height: 300px;
+    width: 100%;
+    height: 100%;
+
+    :deep(.n-tree__empty) {
+      min-height: 200px;
+      justify-content: center;
+    }
+  }
+
+  .n-empty {
+    justify-content: center;
+  }
+}
+</style>
diff --git a/src/components/custom/form-tip.vue b/src/components/custom/form-tip.vue
index a94ea2be..41040d00 100644
--- a/src/components/custom/form-tip.vue
+++ b/src/components/custom/form-tip.vue
@@ -19,7 +19,7 @@ defineProps<Props>();
     </template>
     <template #trigger>
       <div class="cursor-pointer pr-3px">
-        <SvgIcon class="text-15px" icon="ep:warning" />
+        <SvgIcon class="text-15px" icon="ph:warning-circle-bold" />
       </div>
     </template>
   </NTooltip>
diff --git a/src/components/custom/menu-tree-select.vue b/src/components/custom/menu-tree-select.vue
index 296d5713..99e72676 100644
--- a/src/components/custom/menu-tree-select.vue
+++ b/src/components/custom/menu-tree-select.vue
@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { ref, useAttrs } from 'vue';
+import { useAttrs } from 'vue';
 import type { TreeOption, TreeSelectProps } from 'naive-ui';
 import { useLoading } from '@sa/hooks';
 import { fetchGetMenuList } from '@/service/api/system';
@@ -15,9 +15,9 @@ interface Props {
 defineProps<Props>();
 
 const value = defineModel<CommonType.IdType | null>('value', { required: false });
+const options = defineModel<Api.System.MenuList>('options', { required: false, default: [] });
 
 const attrs: TreeSelectProps = useAttrs();
-const options = ref<Api.System.MenuList>([]);
 const { loading, startLoading, endLoading } = useLoading();
 
 async function getMenuList() {
@@ -31,7 +31,7 @@ async function getMenuList() {
       icon: 'material-symbols:home-outline-rounded',
       children: handleTree(data, { idField: 'menuId', filterFn: item => item.menuType !== 'F' })
     }
-  ] as Api.System.Menu[];
+  ] as Api.System.MenuList;
   endLoading();
 }
 
diff --git a/src/components/custom/menu-tree.vue b/src/components/custom/menu-tree.vue
new file mode 100644
index 00000000..7368cad3
--- /dev/null
+++ b/src/components/custom/menu-tree.vue
@@ -0,0 +1,155 @@
+<script setup lang="tsx">
+import { onMounted, ref, useAttrs } from 'vue';
+import type { TreeOption, TreeSelectInst, TreeSelectProps } from 'naive-ui';
+import { useBoolean } from '@sa/hooks';
+import { fetchGetMenuTreeSelect } from '@/service/api/system';
+import SvgIcon from '@/components/custom/svg-icon.vue';
+
+defineOptions({ name: 'MenuTree' });
+
+interface Props {
+  immediate?: boolean;
+  [key: string]: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  immediate: true
+});
+
+const { bool: expandAll } = useBoolean();
+const { bool: checkAll } = useBoolean();
+const expandedKeys = ref<CommonType.IdType[]>([0]);
+
+const menuTreeRef = ref<TreeSelectInst | null>(null);
+const value = defineModel<CommonType.IdType[]>('value', { required: false, default: [] });
+const options = defineModel<Api.System.MenuList>('options', { required: false, default: [] });
+const cascade = defineModel<boolean>('cascade', { required: false, default: true });
+const loading = defineModel<boolean>('loading', { required: false, default: false });
+
+const attrs: TreeSelectProps = useAttrs();
+
+async function getMenuList() {
+  loading.value = true;
+  const { error, data } = await fetchGetMenuTreeSelect();
+  if (error) return;
+  options.value = [
+    {
+      id: 0,
+      label: '根目录',
+      icon: 'material-symbols:home-outline-rounded',
+      children: data
+    }
+  ] as Api.System.MenuList;
+  loading.value = false;
+}
+
+onMounted(() => {
+  if (props.immediate) {
+    getMenuList();
+  }
+});
+
+function renderPrefix({ option }: { option: TreeOption }) {
+  const renderLocalIcon = String(option.icon).startsWith('icon-');
+  let icon = renderLocalIcon ? undefined : String(option.icon ?? 'material-symbols:buttons-alt-outline-rounded');
+  const localIcon = renderLocalIcon ? String(option.icon).replace('icon-', 'menu-') : undefined;
+  if (icon === '#') {
+    icon = 'material-symbols:buttons-alt-outline-rounded';
+  }
+  return <SvgIcon icon={icon} localIcon={localIcon} />;
+}
+
+function getAllMenuIds(menu: Api.System.MenuList) {
+  const menuIds: CommonType.IdType[] = [];
+  menu.forEach(item => {
+    menuIds.push(item.menuId);
+    if (item.children) {
+      menuIds.push(...getAllMenuIds(item.children));
+    }
+  });
+  return menuIds;
+}
+
+function handleCheckedTreeNodeAll(checked: boolean) {
+  if (checked) {
+    value.value = getAllMenuIds(options.value);
+    return;
+  }
+  value.value = [];
+}
+
+function handleSubmit() {
+  const menuIds = [...value.value];
+  const indeterminateData = menuTreeRef.value?.getIndeterminateData();
+  if (cascade.value) {
+    const parentIds: string[] = indeterminateData?.keys.filter(item => !menuIds?.includes(String(item))) as string[];
+    menuIds?.push(...parentIds);
+  }
+  return menuIds;
+}
+
+defineExpose({
+  submit: handleSubmit,
+  refresh: getMenuList
+});
+</script>
+
+<template>
+  <div class="w-full flex-col gap-12px">
+    <div class="w-full flex-center">
+      <NCheckbox v-model:checked="expandAll" :checked-value="true" :unchecked-value="false">展开/折叠</NCheckbox>
+      <NCheckbox
+        v-model:checked="checkAll"
+        :checked-value="true"
+        :unchecked-value="false"
+        @update:checked="handleCheckedTreeNodeAll"
+      >
+        全选/反选
+      </NCheckbox>
+      <NCheckbox v-model:checked="cascade" :checked-value="true" :unchecked-value="false">父子联动</NCheckbox>
+    </div>
+    <NSpin class="resource h-full w-full py-6px pl-3px" content-class="h-full" :show="loading">
+      <NTree
+        ref="menuTreeRef"
+        v-model:checked-keys="value"
+        v-model:expanded-keys="expandedKeys"
+        multiple
+        checkable
+        :selectable="false"
+        key-field="id"
+        label-field="label"
+        :data="options"
+        :cascade="cascade"
+        :loading="loading"
+        virtual-scroll
+        check-strategy="all"
+        :default-expand-all="expandAll"
+        :render-prefix="renderPrefix"
+        v-bind="attrs"
+      />
+    </NSpin>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.resource {
+  border-radius: 6px;
+  border: 1px solid rgb(224, 224, 230);
+
+  .n-tree {
+    min-height: 200px;
+    max-height: 300px;
+    width: 100%;
+    height: 100%;
+
+    :deep(.n-tree__empty) {
+      min-height: 200px;
+      justify-content: center;
+    }
+  }
+
+  .n-empty {
+    justify-content: center;
+  }
+}
+</style>
diff --git a/src/constants/business.ts b/src/constants/business.ts
index 2e4b8e4f..a9718f3a 100644
--- a/src/constants/business.ts
+++ b/src/constants/business.ts
@@ -116,3 +116,15 @@ export const ossAccessPolicyRecord: Record<Api.System.OssAccessPolicy, string> =
 };
 
 export const ossAccessPolicyOptions = transformRecordToOption(ossAccessPolicyRecord);
+
+/** data scope */
+export const dataScopeRecord: Record<Api.System.DataScope, string> = {
+  '1': '全部数据权限',
+  '2': '自定数据权限',
+  '3': '本部门数据权限',
+  '4': '本部门及以下数据权限',
+  '5': '仅本人数据权限',
+  '6': '部门及以下或本人数据权限'
+};
+
+export const dataScopeOptions = transformRecordToOption(dataScopeRecord);
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index a689590c..413dccf4 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -188,7 +188,8 @@ const local: App.I18n.Schema = {
     'system_oss-config': 'OSS Config',
     monitor_cache: 'Cache Monitor',
     monitor_online: 'Online User',
-    'user-center': 'User Center'
+    'user-center': 'User Center',
+    system_role: 'Role Management'
   },
   page: {
     login: {
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 1e7e0f13..19643cf2 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -188,7 +188,8 @@ const local: App.I18n.Schema = {
     'system_oss-config': 'OSS配置',
     monitor_cache: '缓存监控',
     monitor_online: '在线用户',
-    'user-center': '个人中心'
+    'user-center': '个人中心',
+    system_role: '角色管理'
   },
   page: {
     login: {
diff --git a/src/router/elegant/imports.ts b/src/router/elegant/imports.ts
index 15319570..763722ac 100644
--- a/src/router/elegant/imports.ts
+++ b/src/router/elegant/imports.ts
@@ -38,6 +38,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   "system_oss-config": () => import("@/views/system/oss-config/index.vue"),
   system_oss: () => import("@/views/system/oss/index.vue"),
   system_post: () => import("@/views/system/post/index.vue"),
+  system_role: () => import("@/views/system/role/index.vue"),
   system_tenant: () => import("@/views/system/tenant/index.vue"),
   system_user: () => import("@/views/system/user/index.vue"),
   tool_gen: () => import("@/views/tool/gen/index.vue"),
diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts
index aae7747f..0009b4a3 100644
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@@ -250,6 +250,15 @@ export const generatedRoutes: GeneratedRoute[] = [
           i18nKey: 'route.system_post'
         }
       },
+      {
+        name: 'system_role',
+        path: '/system/role',
+        component: 'view.system_role',
+        meta: {
+          title: 'system_role',
+          i18nKey: 'route.system_role'
+        }
+      },
       {
         name: 'system_tenant',
         path: '/system/tenant',
diff --git a/src/router/elegant/transform.ts b/src/router/elegant/transform.ts
index 73dc4976..9427af4d 100644
--- a/src/router/elegant/transform.ts
+++ b/src/router/elegant/transform.ts
@@ -187,6 +187,7 @@ const routeMap: RouteMap = {
   "system_oss": "/system/oss",
   "system_oss-config": "/system/oss-config",
   "system_post": "/system/post",
+  "system_role": "/system/role",
   "system_tenant": "/system/tenant",
   "system_user": "/system/user",
   "tool": "/tool",
diff --git a/src/service/api/system/menu.ts b/src/service/api/system/menu.ts
index 045b0f39..847f0725 100644
--- a/src/service/api/system/menu.ts
+++ b/src/service/api/system/menu.ts
@@ -34,3 +34,19 @@ export function fetchDeleteMenu(menuId: CommonType.IdType) {
     method: 'delete'
   });
 }
+
+/** 获取菜单树 */
+export function fetchGetMenuTreeSelect() {
+  return request<Api.System.MenuList>({
+    url: 'system/menu/treeselect',
+    method: 'get'
+  });
+}
+
+/** 获取角色菜单权限 */
+export function fetchGetRoleMenuTreeSelect(roleId: CommonType.IdType) {
+  return request<Api.System.RoleMenuTreeSelect>({
+    url: `/system/menu/roleMenuTreeselect/${roleId}`,
+    method: 'get'
+  });
+}
diff --git a/src/service/api/system/role.ts b/src/service/api/system/role.ts
index ddd4350b..f1da7745 100644
--- a/src/service/api/system/role.ts
+++ b/src/service/api/system/role.ts
@@ -27,8 +27,17 @@ export function fetchUpdateRole(data: Api.System.RoleOperateParams) {
   });
 }
 
+/** 修改角色状态 */
+export function fetchUpdateRoleStatus(data: Api.System.RoleOperateParams) {
+  return request<boolean>({
+    url: '/system/role/changeStatus',
+    method: 'put',
+    data
+  });
+}
+
 /** 批量删除角色信息 */
-export function fetchDeleteRole(roleIds: CommonType.IdType[]) {
+export function fetchBatchDeleteRole(roleIds: CommonType.IdType[]) {
   return request<boolean>({
     url: `/system/role/${roleIds.join(',')}`,
     method: 'delete'
@@ -43,3 +52,20 @@ export function fetchGetRoleSelect(roleIds?: CommonType.IdType[]) {
     params: { roleIds }
   });
 }
+
+/** 获取对应角色部门树列表 */
+export function fetchGetRoleDeptTreeSelect(roleId: CommonType.IdType) {
+  return request<Api.System.RoleDeptTreeSelect>({
+    url: `/system/role/deptTree/${roleId}`,
+    method: 'get'
+  });
+}
+
+/** 获取对应角色用户列表 */
+export function fetchGetRoleUserList(params: Api.System.UserSearchParams) {
+  return request<Api.System.UserList>({
+    url: `/system/role/authUser/allocatedList`,
+    method: 'get',
+    params
+  });
+}
diff --git a/src/service/api/system/user.ts b/src/service/api/system/user.ts
index d174aea1..f705dcd6 100644
--- a/src/service/api/system/user.ts
+++ b/src/service/api/system/user.ts
@@ -34,6 +34,15 @@ export function fetchUpdateUser(data: Api.System.UserOperateParams) {
   });
 }
 
+/** 修改用户状态 */
+export function fetchUpdateUserStatus(data: Api.System.UserOperateParams) {
+  return request<boolean>({
+    url: '/system/user/changeStatus',
+    method: 'put',
+    data
+  });
+}
+
 /** 批量删除用户信息 */
 export function fetchBatchDeleteUser(userIds: CommonType.IdType[]) {
   return request<boolean>({
diff --git a/src/typings/api/system.api.d.ts b/src/typings/api/system.api.d.ts
index f578179c..e61667b8 100644
--- a/src/typings/api/system.api.d.ts
+++ b/src/typings/api/system.api.d.ts
@@ -10,10 +10,13 @@ declare namespace Api {
    * backend api module: "system"
    */
   namespace System {
+    /** data scope */
+    type DataScope = '1' | '2' | '3' | '4' | '5' | '6';
+
     /** role */
     type Role = Common.CommonRecord<{
       /** 数据范围（1：全部数据权限 2：自定数据权限 3：本部门数据权限 4：本部门及以下数据权限） */
-      dataScope: string;
+      dataScope: DataScope;
       /** 部门树选择项是否关联显示 */
       deptCheckStrictly: boolean;
       /** 用户是否存在此角色标识 默认不存在 */
@@ -49,17 +52,29 @@ declare namespace Api {
         | 'roleName'
         | 'roleKey'
         | 'roleSort'
-        | 'dataScope'
         | 'menuCheckStrictly'
         | 'deptCheckStrictly'
+        | 'dataScope'
         | 'status'
         | 'remark'
-      >
+      > & { menuIds: CommonType.IdType[]; deptIds: CommonType.IdType[] }
     >;
 
     /** role list */
     type RoleList = Common.PaginatingQueryRecord<Role>;
 
+    /** role menu tree select */
+    type RoleMenuTreeSelect = Common.CommonRecord<{
+      checkedKeys: CommonType.IdType[];
+      menus: MenuList;
+    }>;
+
+    /** role dept tree select */
+    type RoleDeptTreeSelect = Common.CommonRecord<{
+      checkedKeys: CommonType.IdType[];
+      depts: Dept[];
+    }>;
+
     /** all role */
     type AllRole = Pick<Role, 'roleId' | 'roleName' | 'roleKey'>;
 
@@ -107,7 +122,9 @@ declare namespace Api {
 
     /** user search params */
     type UserSearchParams = CommonType.RecordNullable<
-      Pick<User, 'deptId' | 'userName' | 'nickName' | 'phonenumber' | 'status'> & Common.CommonSearchParams
+      Pick<User, 'deptId' | 'userName' | 'nickName' | 'phonenumber' | 'status'> & {
+        roleId: CommonType.IdType;
+      } & Common.CommonSearchParams
     >;
 
     /** user operate params */
@@ -261,6 +278,8 @@ declare namespace Api {
       parentName: string;
       /** 子菜单 */
       children: MenuList;
+      id?: CommonType.IdType;
+      label?: string;
     }>;
 
     /** menu list */
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index 551e563e..17c56901 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -12,8 +12,10 @@ declare module 'vue' {
     BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
     BooleanTag: typeof import('./../components/custom/boolean-tag.vue')['default']
     ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
+    copy: typeof import('./../components/custom/menu-tree-select copy.vue')['default']
     CountTo: typeof import('./../components/custom/count-to.vue')['default']
     DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
+    DeptTree: typeof import('./../components/custom/dept-tree.vue')['default']
     DictRadio: typeof import('./../components/custom/dict-radio.vue')['default']
     DictSelect: typeof import('./../components/custom/dict-select.vue')['default']
     DictTag: typeof import('./../components/custom/dict-tag.vue')['default']
@@ -39,6 +41,7 @@ declare module 'vue' {
     IconIcRoundUpload: typeof import('~icons/ic/round-upload')['default']
     IconLocalBanner: typeof import('~icons/local/banner')['default']
     'IconMaterialSymbols:download2Rounded': typeof import('~icons/material-symbols/download2-rounded')['default']
+    'IconMaterialSymbols:syncOutline': typeof import('~icons/material-symbols/sync-outline')['default']
     'IconMaterialSymbols:upload2Rounded': typeof import('~icons/material-symbols/upload2-rounded')['default']
     IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
     IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
@@ -51,6 +54,7 @@ declare module 'vue' {
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
     LookForward: typeof import('./../components/custom/look-forward.vue')['default']
     MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']
+    MenuTree: typeof import('./../components/custom/menu-tree.vue')['default']
     MenuTreeSelect: typeof import('./../components/custom/menu-tree-select.vue')['default']
     MonacoEditor: typeof import('./../components/common/monaco-editor.vue')['default']
     NAlert: typeof import('naive-ui')['NAlert']
diff --git a/src/typings/elegant-router.d.ts b/src/typings/elegant-router.d.ts
index 86a089db..d74f1839 100644
--- a/src/typings/elegant-router.d.ts
+++ b/src/typings/elegant-router.d.ts
@@ -41,6 +41,7 @@ declare module "@elegant-router/types" {
     "system_oss": "/system/oss";
     "system_oss-config": "/system/oss-config";
     "system_post": "/system/post";
+    "system_role": "/system/role";
     "system_tenant": "/system/tenant";
     "system_user": "/system/user";
     "tool": "/tool";
@@ -127,6 +128,7 @@ declare module "@elegant-router/types" {
     | "system_oss-config"
     | "system_oss"
     | "system_post"
+    | "system_role"
     | "system_tenant"
     | "system_user"
     | "tool_gen"
diff --git a/src/views/_builtin/user-center/modules/user-avatar.vue b/src/views/_builtin/user-center/modules/user-avatar.vue
index a51cadb4..45d03571 100644
--- a/src/views/_builtin/user-center/modules/user-avatar.vue
+++ b/src/views/_builtin/user-center/modules/user-avatar.vue
@@ -44,6 +44,7 @@ const options = reactive<CropperOptions>({
 
 /** 编辑头像 */
 function handleEdit() {
+  options.img = imageUrl.value;
   showDrawer();
 }
 
@@ -86,6 +87,7 @@ async function handleCrop() {
       if (!error) {
         window.$message?.success('头像更新成功！');
         imageUrl.value = URL.createObjectURL(blob);
+        authStore.userInfo.user!.avatar = imageUrl.value;
         hideDrawer();
       }
     }, 'image/png');
@@ -114,7 +116,7 @@ function handleClose() {
 
     <NModal v-model:show="showModal" preset="card" title="修改头像" class="w-400px" @close="handleClose">
       <div class="flex-col-center gap-20px py-20px">
-        <div v-if="options.img !== imageUrl" class="h-300px w-full">
+        <div class="h-300px w-full">
           <Cropper
             ref="cropperRef"
             class="h-full bg-gray-100"
@@ -122,25 +124,11 @@ function handleClose() {
             :stencil-props="options.stencilProps"
           />
         </div>
-        <img
-          v-else
-          :src="imageUrl"
-          alt="user-avatar"
-          class="h-200px w-200px border border-gray-200 rounded-full object-cover"
-        />
         <div class="flex gap-12px">
           <NUpload accept=".jpg,.jpeg,.png,.gif" :max="1" :show-file-list="false" @before-upload="handleFileSelect">
             <NButton class="min-w-100px">选择图片</NButton>
           </NUpload>
-          <NButton
-            v-if="options.img !== imageUrl"
-            type="primary"
-            class="min-w-100px"
-            :loading="loading"
-            @click="handleCrop"
-          >
-            确认裁剪
-          </NButton>
+          <NButton type="primary" class="min-w-100px" :loading="loading" @click="handleCrop">确认裁剪</NButton>
         </div>
       </div>
     </NModal>
diff --git a/src/views/monitor/login-infor/index.vue b/src/views/monitor/login-infor/index.vue
index 677a4251..e9954aa0 100644
--- a/src/views/monitor/login-infor/index.vue
+++ b/src/views/monitor/login-infor/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="tsx">
-import { NButton } from 'naive-ui';
 import { fetchBatchDeleteLoginInfor, fetchGetLoginInforList } from '@/service/api/monitor/login-infor';
 import { useAppStore } from '@/store/modules/app';
 import { useAuth } from '@/hooks/business/auth';
@@ -10,6 +9,7 @@ import { getBrowserIcon, getOsIcon } from '@/utils/format';
 import DictTag from '@/components/custom/dict-tag.vue';
 import SvgIcon from '@/components/custom/svg-icon.vue';
 import { $t } from '@/locales';
+import ButtonIcon from '@/components/custom/button-icon.vue';
 import LoginInforSearch from './modules/login-infor-search.vue';
 import LoginInforViewDrawer from './modules/login-infor-view-drawer.vue';
 
@@ -142,9 +142,13 @@ const {
       render: row => {
         const viewBtn = () => {
           return (
-            <NButton type="primary" ghost size="small" onClick={() => view(row.infoId!)}>
-              详情
-            </NButton>
+            <ButtonIcon
+              type="primary"
+              text
+              icon="material-symbols:visibility-outline"
+              tooltipContent="详情"
+              onClick={() => view(row.infoId!)}
+            />
           );
         };
         return <div class="flex-center gap-8px">{viewBtn()}</div>;
diff --git a/src/views/monitor/oper-log/index.vue b/src/views/monitor/oper-log/index.vue
index 4268effc..4d49603b 100644
--- a/src/views/monitor/oper-log/index.vue
+++ b/src/views/monitor/oper-log/index.vue
@@ -8,6 +8,7 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
 import { useDict } from '@/hooks/business/dict';
 import DictTag from '@/components/custom/dict-tag.vue';
 import { $t } from '@/locales';
+import ButtonIcon from '@/components/custom/button-icon.vue';
 import OperLogViewDrawer from './modules/oper-log-view-drawer.vue';
 import OperLogSearch from './modules/oper-log-search.vue';
 
@@ -123,9 +124,13 @@ const {
       render: row => {
         const viewBtn = () => {
           return (
-            <NButton type="primary" ghost size="small" onClick={() => view(row.operId!)}>
-              详情
-            </NButton>
+            <ButtonIcon
+              type="primary"
+              text
+              icon="material-symbols:visibility-outline"
+              tooltipContent="详情"
+              onClick={() => view(row.operId!)}
+            />
           );
         };
         return <div class="flex-center gap-8px">{viewBtn()}</div>;
diff --git a/src/views/system/client/index.vue b/src/views/system/client/index.vue
index adabbd53..2ab0fd8c 100644
--- a/src/views/system/client/index.vue
+++ b/src/views/system/client/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { NButton, NPopconfirm } from 'naive-ui';
+import { NDivider } from 'naive-ui';
 import { fetchBatchDeleteClient, fetchGetClientList } from '@/service/api/system/client';
 import { useAppStore } from '@/store/modules/app';
 import { useAuth } from '@/hooks/business/auth';
@@ -8,8 +8,10 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
 import { useDict } from '@/hooks/business/dict';
 import { $t } from '@/locales';
 import DictTag from '@/components/custom/dict-tag.vue';
+import ButtonIcon from '@/components/custom/button-icon.vue';
 import ClientOperateDrawer from './modules/client-operate-drawer.vue';
 import ClientSearch from './modules/client-search.vue';
+
 defineOptions({
   name: 'ClientList'
 });
@@ -123,14 +125,25 @@ const {
       align: 'center',
       width: 130,
       render: row => {
+        const divider = () => {
+          if (!hasAuth('system:client:edit') || !hasAuth('system:client:remove')) {
+            return null;
+          }
+          return <NDivider vertical />;
+        };
+
         const editBtn = () => {
           if (!hasAuth('system:client:edit')) {
             return null;
           }
           return (
-            <NButton type="primary" ghost size="small" onClick={() => edit(row.id!)}>
-              {$t('common.edit')}
-            </NButton>
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:drive-file-rename-outline-outline"
+              tooltipContent={$t('common.edit')}
+              onClick={() => edit(row.id!)}
+            />
           );
         };
 
@@ -139,22 +152,22 @@ const {
             return null;
           }
           return (
-            <NPopconfirm onPositiveClick={() => handleDelete(row.id!)} positive-text="确定" negative-text="取消">
-              {{
-                default: () => $t('common.confirmDelete'),
-                trigger: () => (
-                  <NButton disabled={row.id === 1} type="error" ghost size="small">
-                    {$t('common.delete')}
-                  </NButton>
-                )
-              }}
-            </NPopconfirm>
+            <ButtonIcon
+              text
+              type="error"
+              icon="material-symbols:delete-outline"
+              tooltipContent={$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
+              onPositiveClick={() => handleDelete(row.id!)}
+              disabled={row.id === 1}
+            />
           );
         };
 
         return (
           <div class="flex-center gap-8px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
index fabd489f..59e34adc 100644
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { NButton, NPopconfirm } from 'naive-ui';
+import { NDivider } from 'naive-ui';
 import { fetchBatchDeleteConfig, fetchGetConfigList, fetchRefreshCache } from '@/service/api/system/config';
 import { useAppStore } from '@/store/modules/app';
 import { useAuth } from '@/hooks/business/auth';
@@ -8,8 +8,10 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
 import { useDict } from '@/hooks/business/dict';
 import { $t } from '@/locales';
 import DictTag from '@/components/custom/dict-tag.vue';
+import ButtonIcon from '@/components/custom/button-icon.vue';
 import ConfigOperateDrawer from './modules/config-operate-drawer.vue';
 import ConfigSearch from './modules/config-search.vue';
+
 defineOptions({
   name: 'ConfigList'
 });
@@ -105,14 +107,25 @@ const {
       align: 'center',
       width: 130,
       render: row => {
+        const divider = () => {
+          if (!hasAuth('system:config:edit') || !hasAuth('system:config:remove')) {
+            return null;
+          }
+          return <NDivider vertical />;
+        };
+
         const editBtn = () => {
           if (!hasAuth('system:config:edit')) {
             return null;
           }
           return (
-            <NButton type="primary" ghost size="small" onClick={() => edit(row.configId!)}>
-              {$t('common.edit')}
-            </NButton>
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:drive-file-rename-outline-outline"
+              tooltipContent={$t('common.edit')}
+              onClick={() => edit(row.configId!)}
+            />
           );
         };
 
@@ -121,22 +134,21 @@ const {
             return null;
           }
           return (
-            <NPopconfirm onPositiveClick={() => handleDelete(row.configId!)}>
-              {{
-                default: () => $t('common.confirmDelete'),
-                trigger: () => (
-                  <NButton type="error" ghost size="small">
-                    {$t('common.delete')}
-                  </NButton>
-                )
-              }}
-            </NPopconfirm>
+            <ButtonIcon
+              text
+              type="error"
+              icon="material-symbols:delete-outline"
+              tooltipContent={$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
+              onPositiveClick={() => handleDelete(row.configId!)}
+            />
           );
         };
 
         return (
           <div class="flex-center gap-8px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 79a5ed96..a63be45d 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { NButton, NPopconfirm } from 'naive-ui';
+import { NButton, NDivider } from 'naive-ui';
 import { jsonClone } from '@sa/utils';
 import type { TableDataWithIndex } from '@sa/hooks';
 import { fetchBatchDeleteDept, fetchGetDeptList } from '@/service/api/system/dept';
@@ -9,6 +9,7 @@ import { useTreeTable, useTreeTableOperate } from '@/hooks/common/tree-table';
 import { useDict } from '@/hooks/business/dict';
 import DictTag from '@/components/custom/dict-tag.vue';
 import { $t } from '@/locales';
+import ButtonIcon from '@/components/custom/button-icon.vue';
 import DeptOperateDrawer from './modules/dept-operate-drawer.vue';
 import DeptSearch from './modules/dept-search.vue';
 
@@ -77,51 +78,58 @@ const {
       key: 'operate',
       title: $t('common.operate'),
       align: 'center',
-      width: 180,
+      width: 150,
       render: row => {
-        const editBtn = () => {
-          if (!hasAuth('system:dept:edit')) {
-            return null;
-          }
-          return (
-            <NButton type="primary" ghost size="small" onClick={() => edit(row)}>
-              {$t('common.edit')}
-            </NButton>
-          );
-        };
         const addBtn = () => {
-          if (!hasAuth('system:dept:add')) {
-            return null;
-          }
           return (
-            <NButton type="success" ghost size="small" onClick={() => addInRow(row)}>
-              {$t('common.add')}
-            </NButton>
-          );
-        };
-        const deleteBtn = () => {
-          if (!hasAuth('system:dept:remove')) {
-            return null;
-          }
-          return (
-            <NPopconfirm onPositiveClick={() => handleDelete(row.deptId!)}>
-              {{
-                default: () => $t('common.confirmDelete'),
-                trigger: () => (
-                  <NButton type="error" ghost size="small">
-                    {$t('common.delete')}
-                  </NButton>
-                )
-              }}
-            </NPopconfirm>
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:add-2-rounded"
+              tooltipContent={$t('common.add')}
+              onClick={() => addInRow(row)}
+            />
           );
         };
 
+        const editBtn = () => {
+          return (
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:drive-file-rename-outline-outline"
+              tooltipContent={$t('common.edit')}
+              onClick={() => edit(row)}
+            />
+          );
+        };
+
+        const deleteBtn = () => {
+          return (
+            <ButtonIcon
+              text
+              type="error"
+              icon="material-symbols:delete-outline"
+              tooltipContent={$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
+              onPositiveClick={() => handleDelete(row.deptId!)}
+            />
+          );
+        };
+
+        const buttons = [];
+        if (hasAuth('system:dept:add')) buttons.push(addBtn());
+        if (hasAuth('system:dept:edit')) buttons.push(editBtn());
+        if (hasAuth('system:dept:remove')) buttons.push(deleteBtn());
+
         return (
           <div class="flex-center gap-8px">
-            {editBtn()}
-            {addBtn()}
-            {deleteBtn()}
+            {buttons.map((btn, index) => (
+              <>
+                {index !== 0 && <NDivider vertical />}
+                {btn}
+              </>
+            ))}
           </div>
         );
       }
diff --git a/src/views/system/dict/data/index.vue b/src/views/system/dict/data/index.vue
index 9432477c..af1dc5cd 100644
--- a/src/views/system/dict/data/index.vue
+++ b/src/views/system/dict/data/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { NButton, NPopconfirm } from 'naive-ui';
+import { NDivider } from 'naive-ui';
 import { fetchBatchDeleteDictData, fetchGetDictDataList } from '@/service/api/system/dict-data';
 import { useAppStore } from '@/store/modules/app';
 import { useAuth } from '@/hooks/business/auth';
@@ -7,9 +7,11 @@ import { useDownload } from '@/hooks/business/download';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { $t } from '@/locales';
 import DictTag from '@/components/custom/dict-tag.vue';
+import ButtonIcon from '@/components/custom/button-icon.vue';
 import { emitter } from '../mitt';
 import DictDataOperateDrawer from './modules/dict-data-operate-drawer.vue';
 import DictDataSearch from './modules/dict-data-search.vue';
+
 defineOptions({
   name: 'DictDataList'
 });
@@ -103,14 +105,25 @@ const {
       align: 'center',
       width: 160,
       render: row => {
+        const divider = () => {
+          if (!hasAuth('system:dict:edit') || !hasAuth('system:dict:remove')) {
+            return null;
+          }
+          return <NDivider vertical />;
+        };
+
         const editBtn = () => {
           if (!hasAuth('system:dict:edit')) {
             return null;
           }
           return (
-            <NButton type="primary" ghost size="small" onClick={() => edit(row.dictCode!)}>
-              {$t('common.edit')}
-            </NButton>
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:drive-file-rename-outline-outline"
+              tooltipContent={$t('common.edit')}
+              onClick={() => edit(row.dictCode!)}
+            />
           );
         };
 
@@ -119,22 +132,21 @@ const {
             return null;
           }
           return (
-            <NPopconfirm onPositiveClick={() => handleDelete(row.dictCode!)}>
-              {{
-                default: () => $t('common.confirmDelete'),
-                trigger: () => (
-                  <NButton type="error" ghost size="small">
-                    {$t('common.delete')}
-                  </NButton>
-                )
-              }}
-            </NPopconfirm>
+            <ButtonIcon
+              text
+              type="error"
+              icon="material-symbols:delete-outline"
+              tooltipContent={$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
+              onPositiveClick={() => handleDelete(row.dictCode!)}
+            />
           );
         };
 
         return (
           <div class="flex-center gap-8px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );
diff --git a/src/views/system/dict/type/index.vue b/src/views/system/dict/type/index.vue
index e62a41d3..9a16e347 100644
--- a/src/views/system/dict/type/index.vue
+++ b/src/views/system/dict/type/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="tsx">
 import { ref } from 'vue';
-import { NButton, NPopconfirm } from 'naive-ui';
+import { NDivider } from 'naive-ui';
 import type { TableDataWithIndex } from '@sa/hooks';
 import { fetchBatchDeleteDictType, fetchGetDictTypeList, fetchRefreshCache } from '@/service/api/system/dict';
 import { useAppStore } from '@/store/modules/app';
@@ -8,6 +8,7 @@ import { useAuth } from '@/hooks/business/auth';
 import { useDownload } from '@/hooks/business/download';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { $t } from '@/locales';
+import ButtonIcon from '@/components/custom/button-icon.vue';
 import { emitter } from '../mitt';
 import DictTypeOperateDrawer from './modules/dict-type-operate-drawer.vue';
 import DictTypeSearch from './modules/dict-type-search.vue';
@@ -92,14 +93,25 @@ const {
       align: 'center',
       width: 160,
       render: row => {
+        const divider = () => {
+          if (!hasAuth('system:dict:edit') || !hasAuth('system:dict:remove')) {
+            return null;
+          }
+          return <NDivider vertical />;
+        };
+
         const editBtn = () => {
           if (!hasAuth('system:dict:edit')) {
             return null;
           }
           return (
-            <NButton type="primary" ghost size="small" onClick={() => edit(row.dictId!)}>
-              {$t('common.edit')}
-            </NButton>
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:drive-file-rename-outline-outline"
+              tooltipContent={$t('common.edit')}
+              onClick={() => edit(row.dictId!)}
+            />
           );
         };
 
@@ -108,22 +120,21 @@ const {
             return null;
           }
           return (
-            <NPopconfirm onPositiveClick={() => handleDelete(row.dictId!)}>
-              {{
-                default: () => $t('common.confirmDelete'),
-                trigger: () => (
-                  <NButton type="error" ghost size="small">
-                    {$t('common.delete')}
-                  </NButton>
-                )
-              }}
-            </NPopconfirm>
+            <ButtonIcon
+              text
+              type="error"
+              icon="material-symbols:delete-outline"
+              tooltipContent={$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
+              onPositiveClick={() => handleDelete(row.dictId!)}
+            />
           );
         };
 
         return (
           <div class="flex-center gap-8px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 5238269f..136927e6 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,21 +1,24 @@
 <script setup lang="tsx">
 import { ref } from 'vue';
 import type { DataTableColumns, TreeInst, TreeOption } from 'naive-ui';
-import { NButton, NIcon, NInput, NPopconfirm, NTooltip } from 'naive-ui';
+import { NButton, NDivider, NIcon, NInput, NPopconfirm } from 'naive-ui';
 import { useBoolean, useLoading } from '@sa/hooks';
 import { menuIsFrameRecord, menuTypeRecord } from '@/constants/business';
 import { fetchDeleteMenu, fetchGetMenuList } from '@/service/api/system';
 import { useAppStore } from '@/store/modules/app';
 import { useDict } from '@/hooks/business/dict';
+import { useAuth } from '@/hooks/business/auth';
 import { handleTree } from '@/utils/common';
 import { $t } from '@/locales';
 import SvgIcon from '@/components/custom/svg-icon.vue';
 import DictTag from '@/components/custom/dict-tag.vue';
 import ButtonIcon from '@/components/custom/button-icon.vue';
 import MenuOperateDrawer from './modules/menu-operate-drawer.vue';
+
 useDict('sys_show_hide');
 useDict('sys_normal_disable');
 
+const { hasAuth } = useAuth();
 const appStore = useAppStore();
 const editingData = ref<Api.System.Menu>();
 const operateType = ref<NaiveUI.TableOperateType>('add');
@@ -97,25 +100,23 @@ function renderPrefix({ option }: { option: TreeOption }) {
 }
 
 function renderSuffix({ option }: { option: TreeOption }) {
-  if (!['M'].includes(String(option.menuType))) {
-    return <></>;
+  if (!['M'].includes(String(option.menuType)) || !hasAuth('system:menu:add')) {
+    return null;
   }
 
   return (
-    <>
-      <div class="flex-center gap-8px">
-        <ButtonIcon
-          text
-          class="h-18px"
-          icon="ic-round-plus"
-          tooltip-content="新增子菜单"
-          onClick={(event: Event) => {
-            event.stopPropagation();
-            handleAddMenu(option.menuId as CommonType.IdType);
-          }}
-        />
-      </div>
-    </>
+    <div class="flex-center gap-8px">
+      <ButtonIcon
+        text
+        class="h-18px"
+        icon="ic-round-plus"
+        tooltip-content="新增子菜单"
+        onClick={(event: Event) => {
+          event.stopPropagation();
+          handleAddMenu(option.menuId as CommonType.IdType);
+        }}
+      />
+    </div>
   );
 }
 
@@ -224,39 +225,50 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
     width: 80,
     align: 'center',
     render(row) {
-      return (
-        <>
+      const divider = () => {
+        if (!hasAuth('system:menu:edit') || !hasAuth('system:menu:remove')) {
+          return null;
+        }
+        return <NDivider vertical />;
+      };
+
+      const editBtn = () => {
+        if (!hasAuth('system:menu:edit')) {
+          return null;
+        }
+        return (
           <ButtonIcon
-            type="primary"
             text
-            icon="ep:edit"
-            tooltipContent="修改"
+            type="primary"
+            icon="material-symbols:drive-file-rename-outline-outline"
+            tooltipContent={$t('common.edit')}
             onClick={() => handleUpdateBtnMenu(row)}
           />
-          <NTooltip placement="bottom">
-            {{
-              trigger: () => (
-                <NPopconfirm onPositiveClick={() => handleDeleteBtnMenu(row.menuId!)}>
-                  {{
-                    default: () => $t('common.confirmDelete'),
-                    trigger: () => (
-                      <NButton class="ml-16px h-36px text-icon" type="error" text>
-                        {{
-                          default: () => (
-                            <div class="flex-center gap-8px">
-                              <SvgIcon icon="ep:delete" />
-                            </div>
-                          )
-                        }}
-                      </NButton>
-                    )
-                  }}
-                </NPopconfirm>
-              ),
-              default: () => <>{$t('common.delete')}</>
-            }}
-          </NTooltip>
-        </>
+        );
+      };
+
+      const deleteBtn = () => {
+        if (!hasAuth('system:menu:remove')) {
+          return null;
+        }
+        return (
+          <ButtonIcon
+            text
+            type="error"
+            icon="material-symbols:delete-outline"
+            tooltipContent={$t('common.delete')}
+            popconfirmContent={$t('common.confirmDelete')}
+            onPositiveClick={() => handleDeleteBtnMenu(row.menuId!)}
+          />
+        );
+      };
+
+      return (
+        <div class="flex-center gap-8px">
+          {editBtn()}
+          {divider()}
+          {deleteBtn()}
+        </div>
       );
     }
   }
@@ -268,6 +280,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
     <template #header>菜单列表</template>
     <template #header-extra>
       <ButtonIcon
+        v-if="hasAuth('system:menu:add')"
         size="small"
         icon="ic-round-plus"
         class="h-28px text-icon"
@@ -325,7 +338,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
           <template #header-extra>
             <NSpace>
               <NButton
-                v-if="currentMenu.menuType === 'M'"
+                v-if="currentMenu.menuType === 'M' && hasAuth('system:menu:add')"
                 size="small"
                 ghost
                 type="primary"
@@ -336,7 +349,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
                 </template>
                 新增子菜单
               </NButton>
-              <NButton size="small" ghost type="primary" @click="handleUpdateMenu">
+              <NButton v-if="hasAuth('system:menu:edit')" size="small" ghost type="primary" @click="handleUpdateMenu">
                 <template #icon>
                   <icon-ic-round-edit />
                 </template>
@@ -344,7 +357,13 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
               </NButton>
               <NPopconfirm @positive-click="() => handleDeleteMenu()">
                 <template #trigger>
-                  <NButton size="small" ghost type="error" :disabled="btnData.length > 0 || btnLoading">
+                  <NButton
+                    v-if="hasAuth('system:menu:remove')"
+                    size="small"
+                    ghost
+                    type="error"
+                    :disabled="btnData.length > 0 || btnLoading"
+                  >
                     <template #icon>
                       <icon-ic-round-delete />
                     </template>
diff --git a/src/views/system/menu/modules/menu-operate-drawer.vue b/src/views/system/menu/modules/menu-operate-drawer.vue
index a089ac43..5ae6443f 100644
--- a/src/views/system/menu/modules/menu-operate-drawer.vue
+++ b/src/views/system/menu/modules/menu-operate-drawer.vue
@@ -153,7 +153,7 @@ async function handleSubmit() {
   } else if (model.menuType === 'C') {
     component = humpToLine(model.component?.replaceAll('/', '_') || '');
   } else if (model.menuType === 'M') {
-    component = model.parentId === 0 ? 'layout.base' : undefined;
+    component = 'layout.base';
   }
 
   // request
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index fca88188..89ace102 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { NButton, NPopconfirm } from 'naive-ui';
+import { NDivider } from 'naive-ui';
 import { fetchBatchDeleteNotice, fetchGetNoticeList } from '@/service/api/system/notice';
 import { useAppStore } from '@/store/modules/app';
 import { useAuth } from '@/hooks/business/auth';
@@ -8,8 +8,10 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
 import { useDict } from '@/hooks/business/dict';
 import { $t } from '@/locales';
 import DictTag from '@/components/custom/dict-tag.vue';
+import ButtonIcon from '@/components/custom/button-icon.vue';
 import NoticeOperateDrawer from './modules/notice-operate-drawer.vue';
 import NoticeSearch from './modules/notice-search.vue';
+
 defineOptions({
   name: 'NoticeList'
 });
@@ -88,14 +90,25 @@ const {
       align: 'center',
       width: 130,
       render: row => {
+        const divider = () => {
+          if (!hasAuth('system:notice:edit') || !hasAuth('system:notice:remove')) {
+            return null;
+          }
+          return <NDivider vertical />;
+        };
+
         const editBtn = () => {
           if (!hasAuth('system:notice:edit')) {
             return null;
           }
           return (
-            <NButton type="primary" ghost size="small" onClick={() => edit(row.noticeId!)}>
-              {$t('common.edit')}
-            </NButton>
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:drive-file-rename-outline-outline"
+              tooltipContent={$t('common.edit')}
+              onClick={() => edit(row.noticeId!)}
+            />
           );
         };
 
@@ -104,22 +117,21 @@ const {
             return null;
           }
           return (
-            <NPopconfirm onPositiveClick={() => handleDelete(row.noticeId!)}>
-              {{
-                default: () => $t('common.confirmDelete'),
-                trigger: () => (
-                  <NButton type="error" ghost size="small">
-                    {$t('common.delete')}
-                  </NButton>
-                )
-              }}
-            </NPopconfirm>
+            <ButtonIcon
+              text
+              type="error"
+              icon="material-symbols:delete-outline"
+              tooltipContent={$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
+              onPositiveClick={() => handleDelete(row.noticeId!)}
+            />
           );
         };
 
         return (
           <div class="flex-center gap-8px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );
diff --git a/src/views/system/oss-config/index.vue b/src/views/system/oss-config/index.vue
index 0679f65e..6778fa48 100644
--- a/src/views/system/oss-config/index.vue
+++ b/src/views/system/oss-config/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import { NDivider, NTag } from 'naive-ui';
 import {
   fetchBatchDeleteOssConfig,
   fetchGetOssConfigList,
@@ -11,6 +11,7 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
 import { useDict } from '@/hooks/business/dict';
 import StatusSwitch from '@/components/custom/status-switch.vue';
 import { $t } from '@/locales';
+import ButtonIcon from '@/components/custom/button-icon.vue';
 import OssConfigOperateDrawer from './modules/oss-config-operate-drawer.vue';
 import OssConfigSearch from './modules/oss-config-search.vue';
 
@@ -125,14 +126,25 @@ const {
       align: 'center',
       width: 130,
       render: row => {
+        const divider = () => {
+          if (!hasAuth('system:ossConfig:edit') || !hasAuth('system:ossConfig:remove')) {
+            return null;
+          }
+          return <NDivider vertical />;
+        };
+
         const editBtn = () => {
           if (!hasAuth('system:ossConfig:edit')) {
             return null;
           }
           return (
-            <NButton type="primary" ghost size="small" onClick={() => edit(row.ossConfigId!)}>
-              {$t('common.edit')}
-            </NButton>
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:drive-file-rename-outline-outline"
+              tooltipContent={$t('common.edit')}
+              onClick={() => edit(row.ossConfigId!)}
+            />
           );
         };
 
@@ -141,22 +153,21 @@ const {
             return null;
           }
           return (
-            <NPopconfirm onPositiveClick={() => handleDelete(row.ossConfigId!)}>
-              {{
-                default: () => $t('common.confirmDelete'),
-                trigger: () => (
-                  <NButton type="error" ghost size="small">
-                    {$t('common.delete')}
-                  </NButton>
-                )
-              }}
-            </NPopconfirm>
+            <ButtonIcon
+              text
+              type="error"
+              icon="material-symbols:delete-outline"
+              tooltipContent={$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
+              onPositiveClick={() => handleDelete(row.ossConfigId!)}
+            />
           );
         };
 
         return (
           <div class="flex-center gap-8px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );
diff --git a/src/views/system/oss/index.vue b/src/views/system/oss/index.vue
index 3eacb7f2..121f6541 100644
--- a/src/views/system/oss/index.vue
+++ b/src/views/system/oss/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="tsx">
 import { onMounted, ref } from 'vue';
-import { NButton, NEllipsis, NImage, NTag, NTooltip } from 'naive-ui';
+import { NButton, NDivider, NEllipsis, NImage, NTag, NTooltip } from 'naive-ui';
 import { useBoolean, useLoading } from '@sa/hooks';
 import { fetchBatchDeleteOss, fetchGetOssList } from '@/service/api/system/oss';
 import { fetchGetConfigByKey, fetchUpdateConfigByKey } from '@/service/api/system/config';
@@ -146,6 +146,13 @@ const {
       align: 'center',
       width: 130,
       render: row => {
+        const divider = () => {
+          if (!hasAuth('system:oss:download') || !hasAuth('system:oss:delete')) {
+            return null;
+          }
+          return <NDivider vertical />;
+        };
+
         const downloadBtn = () => {
           if (!hasAuth('system:oss:download')) {
             return null;
@@ -180,8 +187,9 @@ const {
         };
 
         return (
-          <div class="flex-center gap-16px">
+          <div class="flex-center gap-8px">
             {downloadBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index bc1edf39..c065d996 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="tsx">
 import { ref } from 'vue';
-import { NButton, NPopconfirm } from 'naive-ui';
+import { NButton, NDivider } from 'naive-ui';
 import { useLoading } from '@sa/hooks';
 import { fetchBatchDeletePost, fetchGetPostList } from '@/service/api/system/post';
 import { fetchGetDeptTree } from '@/service/api/system';
@@ -11,6 +11,7 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
 import { useDict } from '@/hooks/business/dict';
 import DictTag from '@/components/custom/dict-tag.vue';
 import { $t } from '@/locales';
+import ButtonIcon from '@/components/custom/button-icon.vue';
 import PostOperateDrawer from './modules/post-operate-drawer.vue';
 import PostSearch from './modules/post-search.vue';
 
@@ -104,14 +105,25 @@ const {
       align: 'center',
       width: 130,
       render: row => {
+        const divider = () => {
+          if (!hasAuth('system:post:edit') || !hasAuth('system:post:remove')) {
+            return null;
+          }
+          return <NDivider vertical />;
+        };
+
         const editBtn = () => {
           if (!hasAuth('system:post:edit')) {
             return null;
           }
           return (
-            <NButton type="primary" ghost size="small" onClick={() => edit(row.postId!)}>
-              {$t('common.edit')}
-            </NButton>
+            <ButtonIcon
+              type="primary"
+              text
+              icon="material-symbols:drive-file-rename-outline-outline"
+              tooltipContent={$t('common.edit')}
+              onClick={() => edit(row.postId!)}
+            />
           );
         };
 
@@ -120,22 +132,21 @@ const {
             return null;
           }
           return (
-            <NPopconfirm onPositiveClick={() => handleDelete(row.postId!)}>
-              {{
-                default: () => $t('common.confirmDelete'),
-                trigger: () => (
-                  <NButton type="error" ghost size="small">
-                    {$t('common.delete')}
-                  </NButton>
-                )
-              }}
-            </NPopconfirm>
+            <ButtonIcon
+              text
+              type="error"
+              icon="material-symbols:delete-outline"
+              tooltipContent={$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
+              onPositiveClick={() => handleDelete(row.postId!)}
+            />
           );
         };
 
         return (
           <div class="flex-center gap-8px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
new file mode 100644
index 00000000..9d887eb4
--- /dev/null
+++ b/src/views/system/role/index.vue
@@ -0,0 +1,296 @@
+<script setup lang="tsx">
+import { NDivider, NTag } from 'naive-ui';
+import { jsonClone } from '@sa/utils';
+import { useBoolean } from '@sa/hooks';
+import { dataScopeRecord } from '@/constants/business';
+import { fetchBatchDeleteRole, fetchGetRoleList, fetchUpdateRoleStatus } from '@/service/api/system/role';
+import { useAppStore } from '@/store/modules/app';
+import { useAuth } from '@/hooks/business/auth';
+import { useDownload } from '@/hooks/business/download';
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import { $t } from '@/locales';
+import ButtonIcon from '@/components/custom/button-icon.vue';
+import StatusSwitch from '@/components/custom/status-switch.vue';
+import RoleOperateDrawer from './modules/role-operate-drawer.vue';
+import RoleSearch from './modules/role-search.vue';
+import RoleDataScopeDrawer from './modules/role-data-scope-drawer.vue';
+import RoleAuthUserDrawer from './modules/role-auth-user-drawer.vue';
+
+defineOptions({
+  name: 'RoleList'
+});
+
+const appStore = useAppStore();
+const { download } = useDownload();
+const { hasAuth } = useAuth();
+
+const { bool: dataScopeDrawerVisible, setTrue: openDataScopeDrawer } = useBoolean(false);
+const { bool: authUserDrawerVisible, setTrue: openAuthUserDrawer } = useBoolean(false);
+const {
+  columns,
+  columnChecks,
+  data,
+  getData,
+  getDataByPage,
+  loading,
+  mobilePagination,
+  searchParams,
+  resetSearchParams
+} = useTable({
+  apiFn: fetchGetRoleList,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10,
+    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
+    // the value can not be undefined, otherwise the property in Form will not be reactive
+    roleName: null,
+    roleKey: null,
+    status: null,
+    params: {}
+  },
+  columns: () => [
+    {
+      type: 'selection',
+      align: 'center',
+      width: 48
+    },
+    {
+      key: 'index',
+      title: $t('common.index'),
+      align: 'center',
+      width: 64
+    },
+    {
+      key: 'roleName',
+      title: '角色名称',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'roleKey',
+      title: '角色权限字符串',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'roleSort',
+      title: '显示顺序',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'dataScope',
+      title: '数据范围',
+      align: 'center',
+      minWidth: 120,
+      render: row => {
+        return <NTag type="info">{dataScopeRecord[row.dataScope]}</NTag>;
+      }
+    },
+    {
+      key: 'status',
+      title: '角色状态',
+      align: 'center',
+      minWidth: 120,
+      render(row) {
+        return (
+          <StatusSwitch
+            v-model:value={row.status}
+            disabled={row.roleId === 1}
+            info={row.roleKey}
+            onSubmitted={(value, callback) => handleStatusChange(row, value, callback)}
+          />
+        );
+      }
+    },
+    {
+      key: 'createTime',
+      title: '创建时间',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'operate',
+      title: $t('common.operate'),
+      align: 'center',
+      width: 220,
+      render: row => {
+        if (row.roleId === 1) return null;
+
+        const editBtn = () => {
+          return (
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:drive-file-rename-outline-outline"
+              tooltipContent={$t('common.edit')}
+              onClick={() => edit(row.roleId!)}
+            />
+          );
+        };
+
+        const dataScopeBtn = () => {
+          return (
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:database"
+              tooltipContent="数据范权限"
+              onClick={() => handleDataScope(row)}
+            />
+          );
+        };
+
+        const authUserBtn = () => {
+          return (
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:assignment-ind-outline"
+              tooltipContent="分配用户"
+              onClick={() => handleAuthUser(row)}
+            />
+          );
+        };
+
+        const deleteBtn = () => {
+          return (
+            <ButtonIcon
+              text
+              type="error"
+              icon="material-symbols:delete-outline"
+              tooltipContent={$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
+              onPositiveClick={() => handleDelete(row.roleId!)}
+            />
+          );
+        };
+
+        const buttons = [];
+        if (hasAuth('system:role:edit')) {
+          buttons.push(editBtn());
+          buttons.push(dataScopeBtn());
+          buttons.push(authUserBtn());
+        }
+        if (hasAuth('system:role:remove')) buttons.push(deleteBtn());
+
+        return (
+          <div class="flex-center gap-8px">
+            {buttons.map((btn, index) => (
+              <>
+                {index !== 0 && <NDivider vertical />}
+                {btn}
+              </>
+            ))}
+          </div>
+        );
+      }
+    }
+  ]
+});
+
+const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
+  useTableOperate(data, getData);
+
+async function handleBatchDelete() {
+  // request
+  const { error } = await fetchBatchDeleteRole(checkedRowKeys.value);
+  if (error) return;
+  onBatchDeleted();
+}
+
+async function handleDelete(roleId: CommonType.IdType) {
+  // request
+  const { error } = await fetchBatchDeleteRole([roleId]);
+  if (error) return;
+  onDeleted();
+}
+
+async function edit(roleId: CommonType.IdType) {
+  handleEdit('roleId', roleId);
+}
+
+async function handleExport() {
+  download('/system/role/export', searchParams, `角色_${new Date().getTime()}.xlsx`);
+}
+
+/** 处理状态切换 */
+async function handleStatusChange(
+  row: Api.System.Role,
+  value: Api.Common.EnableStatus,
+  callback: (flag: boolean) => void
+) {
+  const { error } = await fetchUpdateRoleStatus({
+    roleId: row.roleId,
+    status: value
+  });
+
+  callback(!error);
+
+  if (!error) {
+    window.$message?.success('状态修改成功');
+    getData();
+  }
+}
+
+function handleDataScope(row: Api.System.Role) {
+  const findItem = data.value.find(item => item.roleId === row.roleId) || null;
+  editingData.value = jsonClone(findItem);
+  openDataScopeDrawer();
+}
+
+function handleAuthUser(row: Api.System.Role) {
+  const findItem = data.value.find(item => item.roleId === row.roleId) || null;
+  editingData.value = jsonClone(findItem);
+  openAuthUserDrawer();
+}
+</script>
+
+<template>
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+    <RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
+    <NCard title="角色列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+      <template #header-extra>
+        <TableHeaderOperation
+          v-model:columns="columnChecks"
+          :disabled-delete="checkedRowKeys.length === 0"
+          :loading="loading"
+          :show-add="hasAuth('system:role:add')"
+          :show-delete="hasAuth('system:role:remove')"
+          :show-export="hasAuth('system:role:export')"
+          @add="handleAdd"
+          @delete="handleBatchDelete"
+          @export="handleExport"
+          @refresh="getData"
+        />
+      </template>
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys"
+        :columns="columns"
+        :data="data"
+        size="small"
+        :flex-height="!appStore.isMobile"
+        :scroll-x="962"
+        :loading="loading"
+        remote
+        :row-key="row => row.roleId"
+        :pagination="mobilePagination"
+        class="sm:h-full"
+      />
+      <RoleOperateDrawer
+        v-model:visible="drawerVisible"
+        :operate-type="operateType"
+        :row-data="editingData"
+        @submitted="getDataByPage"
+      />
+      <RoleDataScopeDrawer
+        v-model:visible="dataScopeDrawerVisible"
+        :row-data="editingData"
+        @submitted="getDataByPage"
+      />
+      <RoleAuthUserDrawer v-model:visible="authUserDrawerVisible" :row-data="editingData" @submitted="getDataByPage" />
+    </NCard>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/system/role/modules/role-auth-user-drawer.vue b/src/views/system/role/modules/role-auth-user-drawer.vue
new file mode 100644
index 00000000..0bc27083
--- /dev/null
+++ b/src/views/system/role/modules/role-auth-user-drawer.vue
@@ -0,0 +1,206 @@
+<script setup lang="tsx">
+import { computed, watch } from 'vue';
+import { fetchGetRoleUserList, fetchGetUserList } from '@/service/api/system';
+import { useAppStore } from '@/store/modules/app';
+import { useDict } from '@/hooks/business/dict';
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import { $t } from '@/locales';
+import DictTag from '@/components/custom/dict-tag.vue';
+
+defineOptions({
+  name: 'RoleAuthUserDrawer'
+});
+
+interface Props {
+  /** the edit row data */
+  rowData?: Api.System.Role | null;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const appStore = useAppStore();
+
+const title = computed(() => '分配用户权限');
+
+useDict('sys_normal_disable');
+
+const { columns, data, getData, getDataByPage, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
+  immediate: false,
+  apiFn: fetchGetUserList,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 20,
+    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
+    // the value can not be undefined, otherwise the property in Form will not be reactive
+    deptId: null,
+    userName: null,
+    nickName: null,
+    phonenumber: null,
+    status: null,
+    params: {}
+  },
+  columns: () => [
+    {
+      type: 'selection',
+      align: 'center',
+      width: 48
+    },
+    {
+      key: 'index',
+      title: $t('common.index'),
+      align: 'center',
+      width: 64
+    },
+    {
+      key: 'userName',
+      title: '用户名称',
+      align: 'center',
+      minWidth: 120,
+      ellipsis: true
+    },
+    {
+      key: 'nickName',
+      title: '用户昵称',
+      align: 'center',
+      minWidth: 120,
+      ellipsis: true
+    },
+    {
+      key: 'deptName',
+      title: '部门',
+      align: 'center',
+      minWidth: 120,
+      ellipsis: true
+    },
+    {
+      key: 'phonenumber',
+      title: '手机号码',
+      align: 'center',
+      minWidth: 120,
+      ellipsis: true
+    },
+    {
+      key: 'status',
+      title: '状态',
+      align: 'center',
+      minWidth: 80,
+      render(row) {
+        return <DictTag size="small" value={row.status} dictCode="sys_normal_disable" />;
+      }
+    },
+    {
+      key: 'createTime',
+      title: '创建时间',
+      align: 'center',
+      minWidth: 120
+    }
+  ]
+});
+
+const { checkedRowKeys } = useTableOperate(data, getData);
+
+async function handleUpdateModelWhenEdit() {
+  checkedRowKeys.value = [];
+  getDataByPage();
+  const { data: roleUserList } = await fetchGetRoleUserList({
+    roleId: props.rowData?.roleId
+  });
+  checkedRowKeys.value = roleUserList?.rows.map(item => item.userId) || [];
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  window.$message?.success($t('common.updateSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModelWhenEdit();
+  }
+});
+</script>
+
+<template>
+  <NDrawer
+    v-model:show="visible"
+    :title="title"
+    display-directive="show"
+    :width="1300"
+    class="max-w-90%"
+    content-class="h-full"
+    wrapper-class="h-full"
+  >
+    <NDrawerContent :title="title" :native-scrollbar="false" closable body-class="h-full" body-content-class="h-full">
+      <div class="h-full flex-col-stretch gap-12px overflow-hidden lt-sm:overflow-auto">
+        <NForm :model="searchParams" label-placement="left" :label-width="80">
+          <NGrid responsive="screen" item-responsive>
+            <NFormItemGi span="24 s:12 m:8" label="用户名称" path="userName" class="pr-24px">
+              <NInput v-model:value="searchParams.userName" placeholder="请输入用户名称" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:8" label="用户昵称" path="nickName" class="pr-24px">
+              <NInput v-model:value="searchParams.nickName" placeholder="请输入用户昵称" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:8" label="手机号码" path="phonenumber" class="pr-24px">
+              <NInput v-model:value="searchParams.phonenumber" placeholder="请输入手机号码" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:24" class="pr-24px" :show-feedback="false">
+              <NSpace class="w-full" justify="end">
+                <NButton @click="resetSearchParams">
+                  <template #icon>
+                    <icon-ic-round-refresh class="text-icon" />
+                  </template>
+                  {{ $t('common.reset') }}
+                </NButton>
+                <NButton type="primary" ghost @click="() => getDataByPage()">
+                  <template #icon>
+                    <icon-ic-round-search class="text-icon" />
+                  </template>
+                  {{ $t('common.search') }}
+                </NButton>
+              </NSpace>
+            </NFormItemGi>
+          </NGrid>
+        </NForm>
+        <TableRowCheckAlert v-model:checked-row-keys="checkedRowKeys" />
+        <NCard :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+          <NDataTable
+            v-model:checked-row-keys="checkedRowKeys"
+            :columns="columns"
+            :data="data"
+            size="small"
+            :flex-height="!appStore.isMobile"
+            :scroll-x="962"
+            :loading="loading"
+            remote
+            :row-key="row => row.userId"
+            :pagination="mobilePagination"
+            class="h-full"
+          />
+        </NCard>
+      </div>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped></style>
diff --git a/src/views/system/role/modules/role-data-scope-drawer.vue b/src/views/system/role/modules/role-data-scope-drawer.vue
new file mode 100644
index 00000000..4037107f
--- /dev/null
+++ b/src/views/system/role/modules/role-data-scope-drawer.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+import { useLoading } from '@sa/hooks';
+import { dataScopeOptions } from '@/constants/business';
+import { fetchGetRoleDeptTreeSelect, fetchUpdateRole } from '@/service/api/system/role';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+import DeptTree from '@/components/custom/dept-tree.vue';
+
+defineOptions({
+  name: 'RoleDataScopeDrawer'
+});
+
+interface Props {
+  /** the edit row data */
+  rowData?: Api.System.Role | null;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const deptTreeRef = ref<InstanceType<typeof DeptTree> | null>(null);
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const deptOptions = ref<Api.System.Dept[]>([]);
+
+const { loading: deptLoading, startLoading: startDeptLoading, endLoading: endDeptLoading } = useLoading();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { createRequiredRule } = useFormRules();
+
+const title = computed(() => '分配数据权限');
+
+type Model = Api.System.RoleOperateParams;
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    roleId: props.rowData?.roleId,
+    roleName: props.rowData?.roleName,
+    roleKey: props.rowData?.roleKey,
+    roleSort: props.rowData?.roleSort,
+    deptIds: [],
+    menuIds: [],
+    deptCheckStrictly: true,
+    dataScope: '1'
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'dataScope'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  dataScope: createRequiredRule('数据权限范围不能为空')
+};
+
+async function handleUpdateModelWhenEdit() {
+  startDeptLoading();
+  deptOptions.value = [];
+  model.deptIds = [];
+
+  if (props.rowData) {
+    Object.assign(model, props.rowData);
+    const { error, data } = await fetchGetRoleDeptTreeSelect(props.rowData.roleId!);
+    if (error) return;
+    deptOptions.value = data.depts;
+    model.deptIds = data.checkedKeys;
+  }
+  endDeptLoading();
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+
+  const { roleId, roleName, roleKey, roleSort, dataScope, deptIds, menuIds } = model;
+
+  const { error } = await fetchUpdateRole({
+    roleId,
+    roleName,
+    roleKey,
+    roleSort,
+    dataScope,
+    deptIds: dataScope === '2' ? deptIds : [],
+    menuIds
+  });
+  if (error) return;
+
+  window.$message?.success($t('common.updateSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModelWhenEdit();
+    restoreValidation();
+  }
+});
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
+    <NDrawerContent :title="title" :native-scrollbar="false" closable>
+      <NForm ref="formRef" :model="model" :rules="rules">
+        <NFormItem label="角色名称" path="roleName">
+          <NInput v-model:value="model.roleName" disabled placeholder="请输入角色名称" />
+        </NFormItem>
+        <NFormItem path="roleKey">
+          <template #label>
+            <div class="flex-center">
+              <FormTip content="控制器中定义的权限字符，如：@SaCheckRole('admin')" />
+              <span class="pl-3px">权限字符</span>
+            </div>
+          </template>
+          <NInput v-model:value="model.roleKey" disabled placeholder="请输入权限字符" />
+        </NFormItem>
+        <NFormItem label="权限范围" path="dataScope">
+          <NSelect v-model:value="model.dataScope" :options="dataScopeOptions" />
+        </NFormItem>
+        <NFormItem v-if="model.dataScope === '2'" label="数据权限" path="deptIds" class="pr-24px">
+          <DeptTree
+            ref="deptTreeRef"
+            v-model:value="model.deptIds"
+            v-model:options="deptOptions"
+            v-model:loading="deptLoading"
+            v-model:cascade="model.deptCheckStrictly"
+            :immediate="false"
+          />
+        </NFormItem>
+      </NForm>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped></style>
diff --git a/src/views/system/role/modules/role-operate-drawer.vue b/src/views/system/role/modules/role-operate-drawer.vue
new file mode 100644
index 00000000..d0483af7
--- /dev/null
+++ b/src/views/system/role/modules/role-operate-drawer.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+import { useLoading } from '@sa/hooks';
+import { fetchCreateRole, fetchUpdateRole } from '@/service/api/system/role';
+import { fetchGetRoleMenuTreeSelect } from '@/service/api/system';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { useDict } from '@/hooks/business/dict';
+import { $t } from '@/locales';
+import MenuTree from '@/components/custom/menu-tree.vue';
+
+defineOptions({
+  name: 'RoleOperateDrawer'
+});
+
+interface Props {
+  /** the type of operation */
+  operateType: NaiveUI.TableOperateType;
+  /** the edit row data */
+  rowData?: Api.System.Role | null;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const menuTreeRef = ref<InstanceType<typeof MenuTree> | null>(null);
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { options: sysNormalDisableOptions } = useDict('sys_normal_disable');
+
+const menuOptions = ref<Api.System.MenuList>([]);
+
+const { loading: menuLoading, startLoading: startMenuLoading, endLoading: stopMenuLoading } = useLoading();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { createRequiredRule } = useFormRules();
+
+const title = computed(() => {
+  const titles: Record<NaiveUI.TableOperateType, string> = {
+    add: '新增角色',
+    edit: '编辑角色'
+  };
+  return titles[props.operateType];
+});
+
+type Model = Api.System.RoleOperateParams;
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    menuIds: [],
+    roleName: '',
+    roleKey: '',
+    roleSort: 1,
+    menuCheckStrictly: true,
+    status: '0',
+    remark: ''
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'roleId' | 'roleName' | 'roleKey' | 'status'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  roleId: createRequiredRule('角色ID不能为空'),
+  roleName: createRequiredRule('角色名称不能为空'),
+  roleKey: createRequiredRule('角色权限字符串不能为空'),
+  status: createRequiredRule('角色状态不能为空')
+};
+
+async function handleUpdateModelWhenEdit() {
+  menuOptions.value = [];
+  model.menuIds = [];
+
+  if (props.operateType === 'add') {
+    menuTreeRef.value?.refresh();
+    Object.assign(model, createDefaultModel());
+    return;
+  }
+
+  if (props.operateType === 'edit' && props.rowData) {
+    startMenuLoading();
+    Object.assign(model, props.rowData);
+    const { data, error } = await fetchGetRoleMenuTreeSelect(model.roleId!);
+    if (error) return;
+    model.menuIds = data.checkedKeys;
+    menuOptions.value = data.menus;
+    stopMenuLoading();
+  }
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+
+  const { roleId, roleName, roleKey, roleSort, menuCheckStrictly, status, remark, menuIds } = model;
+
+  // request
+  if (props.operateType === 'add') {
+    const { error } = await fetchCreateRole({
+      roleName,
+      roleKey,
+      roleSort,
+      menuCheckStrictly,
+      status,
+      remark,
+      menuIds
+    });
+    if (error) return;
+  }
+
+  if (props.operateType === 'edit') {
+    const { error } = await fetchUpdateRole({
+      roleId,
+      roleName,
+      roleKey,
+      roleSort,
+      menuCheckStrictly,
+      status,
+      remark,
+      menuIds
+    });
+    if (error) return;
+  }
+
+  window.$message?.success($t('common.updateSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModelWhenEdit();
+    restoreValidation();
+  }
+});
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
+    <NDrawerContent :title="title" :native-scrollbar="false" closable>
+      <NForm ref="formRef" :model="model" :rules="rules">
+        <NFormItem label="角色名称" path="roleName">
+          <NInput v-model:value="model.roleName" placeholder="请输入角色名称" />
+        </NFormItem>
+        <NFormItem path="roleKey">
+          <template #label>
+            <div class="flex-center">
+              <FormTip content="控制器中定义的权限字符，如：@SaCheckRole('admin')" />
+              <span class="pl-3px">权限字符</span>
+            </div>
+          </template>
+          <NInput v-model:value="model.roleKey" placeholder="请输入权限字符" />
+        </NFormItem>
+        <NFormItem label="显示顺序" path="roleSort">
+          <NInputNumber v-model:value="model.roleSort" placeholder="请输入显示顺序" />
+        </NFormItem>
+        <NFormItem label="角色状态" path="status">
+          <NRadioGroup v-model:value="model.status">
+            <NRadio v-for="item in sysNormalDisableOptions" :key="item.value" :value="item.value" :label="item.label" />
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem label="菜单权限" path="menuIds" class="pr-24px">
+          <MenuTree
+            ref="menuTreeRef"
+            v-model:value="model.menuIds"
+            v-model:options="menuOptions"
+            v-model:cascade="model.menuCheckStrictly"
+            v-model:loading="menuLoading"
+            :immediate="operateType === 'add'"
+          />
+        </NFormItem>
+        <NFormItem label="备注" path="remark">
+          <NInput v-model:value="model.remark" :rows="3" type="textarea" placeholder="请输入备注" />
+        </NFormItem>
+      </NForm>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped></style>
diff --git a/src/views/system/role/modules/role-search.vue b/src/views/system/role/modules/role-search.vue
new file mode 100644
index 00000000..7a51345b
--- /dev/null
+++ b/src/views/system/role/modules/role-search.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useNaiveForm } from '@/hooks/common/form';
+import { useDict } from '@/hooks/business/dict';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'RoleSearch'
+});
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+
+const dateRangeCreateTime = ref<[string, string] | null>(null);
+
+const model = defineModel<Api.System.RoleSearchParams>('model', { required: true });
+
+const { options: sysNormalDisableOptions } = useDict('sys_normal_disable');
+
+async function reset() {
+  dateRangeCreateTime.value = null;
+  Object.assign(model.value.params!, {});
+  await restoreValidation();
+  emit('reset');
+}
+
+async function search() {
+  await validate();
+  if (dateRangeCreateTime.value?.length) {
+    model.value.params!.beginTime = `${dateRangeCreateTime.value[0]} 00:00:00`;
+    model.value.params!.endTime = `${dateRangeCreateTime.value[1]} 23:59:59`;
+  }
+  emit('search');
+}
+</script>
+
+<template>
+  <NCard :bordered="false" size="small" class="card-wrapper">
+    <NCollapse>
+      <NCollapseItem :title="$t('common.search')" name="user-search">
+        <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
+          <NGrid responsive="screen" item-responsive>
+            <NFormItemGi span="24 s:12 m:6" label="角色名称" path="roleName" class="pr-24px">
+              <NInput v-model:value="model.roleName" placeholder="请输入角色名称" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="权限字符" path="roleKey" class="pr-24px">
+              <NInput v-model:value="model.roleKey" placeholder="请输入权限字符" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="角色状态" path="status" class="pr-24px">
+              <NSelect
+                v-model:value="model.status"
+                placeholder="请选择角色状态"
+                :options="sysNormalDisableOptions"
+                clearable
+              />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="创建时间" path="createTime" class="pr-24px">
+              <NDatePicker
+                v-model:formatted-value="dateRangeCreateTime"
+                update-value-on-close
+                class="w-full"
+                type="daterange"
+                value-format="yyyy-MM-dd"
+                clearable
+              />
+            </NFormItemGi>
+            <NFormItemGi span="24" class="pr-24px">
+              <NSpace class="w-full" justify="end">
+                <NButton @click="reset">
+                  <template #icon>
+                    <icon-ic-round-refresh class="text-icon" />
+                  </template>
+                  {{ $t('common.reset') }}
+                </NButton>
+                <NButton type="primary" ghost @click="search">
+                  <template #icon>
+                    <icon-ic-round-search class="text-icon" />
+                  </template>
+                  {{ $t('common.search') }}
+                </NButton>
+              </NSpace>
+            </NFormItemGi>
+          </NGrid>
+        </NForm>
+      </NCollapseItem>
+    </NCollapse>
+  </NCard>
+</template>
+
+<style scoped></style>
diff --git a/src/views/system/tenant/index.vue b/src/views/system/tenant/index.vue
index c191c951..e9a68e44 100644
--- a/src/views/system/tenant/index.vue
+++ b/src/views/system/tenant/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="tsx">
 import { computed } from 'vue';
-import { NButton, NPopconfirm } from 'naive-ui';
+import { NButton, NDivider } from 'naive-ui';
 import { fetchBatchDeleteTenant, fetchGetTenantList, fetchSyncTenantDict } from '@/service/api/system/tenant';
 import { useAppStore } from '@/store/modules/app';
 import { useAuthStore } from '@/store/modules/auth';
@@ -10,6 +10,7 @@ import { useDownload } from '@/hooks/business/download';
 import { useDict } from '@/hooks/business/dict';
 import DictTag from '@/components/custom/dict-tag.vue';
 import { $t } from '@/locales';
+import ButtonIcon from '@/components/custom/button-icon.vue';
 import TenantOperateDrawer from './modules/tenant-operate-drawer.vue';
 import TenantSearch from './modules/tenant-search.vue';
 
@@ -107,55 +108,59 @@ const {
       width: 180,
       render: row => {
         if (row.tenantId === '000000') return null;
+
         const editBtn = () => {
-          if (!hasAuth('system:tenant:edit')) {
-            return null;
-          }
           return (
-            <NButton type="primary" ghost size="small" onClick={() => edit(row.id!)}>
-              {$t('common.edit')}
-            </NButton>
+            <ButtonIcon
+              type="primary"
+              text
+              icon="material-symbols:drive-file-rename-outline-outline"
+              tooltipContent={$t('common.edit')}
+              onClick={() => edit(row.id!)}
+            />
           );
         };
+
         const syncBtn = () => {
-          if (!hasAuth('system:tenant:edit')) {
-            return null;
-          }
           return (
-            <NPopconfirm onPositiveClick={() => handleDelete(row.id!)}>
-              {{
-                default: () => `确认同步[${row.companyName}]的套餐吗?`,
-                trigger: () => (
-                  <NButton type="success" ghost size="small">
-                    同步
-                  </NButton>
-                )
-              }}
-            </NPopconfirm>
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:sync-outline"
+              tooltipContent="同步套餐"
+              popconfirmContent={`确认同步[${row.companyName}]的套餐吗?`}
+              onPositiveClick={() => handleSyncTenantDict()}
+            />
           );
         };
+
         const deleteBtn = () => {
-          if (!hasAuth('system:tenant:delete')) {
-            return null;
-          }
           return (
-            <NPopconfirm onPositiveClick={() => handleDelete(row.id!)}>
-              {{
-                default: () => $t('common.confirmDelete'),
-                trigger: () => (
-                  <NButton type="error" ghost size="small">
-                    {$t('common.delete')}
-                  </NButton>
-                )
-              }}
-            </NPopconfirm>
+            <ButtonIcon
+              text
+              type="error"
+              icon="material-symbols:delete-outline"
+              tooltipContent={$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
+              onPositiveClick={() => handleDelete(row.id!)}
+            />
           );
         };
+
+        const buttons = [];
+
+        if (hasAuth('system:tenant:edit')) buttons.push(editBtn());
+        if (hasAuth('system:tenant:edit')) buttons.push(syncBtn());
+        if (hasAuth('system:tenant:delete')) buttons.push(deleteBtn());
+
         return (
           <div class="flex-center gap-8px">
-            {editBtn()}
-            {syncBtn()}
-            {deleteBtn()}
+            {buttons.map((btn, index) => (
+              <>
+                {index !== 0 && <NDivider vertical />}
+                {btn}
+              </>
+            ))}
           </div>
         );
       }
@@ -215,6 +220,9 @@ async function handleExport() {
         >
           <template #prefix>
             <NButton v-if="isSuperAdmin" type="warning" ghost size="small" @click="handleSyncTenantDict">
+              <template #icon>
+                <icon-material-symbols:sync-outline />
+              </template>
               同步租户字典
             </NButton>
           </template>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 3a4b67e9..039603c1 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,15 +1,15 @@
 <script setup lang="tsx">
 import { ref } from 'vue';
-import { NButton } from 'naive-ui';
+import { NButton, NDivider } from 'naive-ui';
 import { useBoolean, useLoading } from '@sa/hooks';
-import { fetchBatchDeleteUser, fetchGetDeptTree, fetchGetUserList } from '@/service/api/system';
+import { fetchBatchDeleteUser, fetchGetDeptTree, fetchGetUserList, fetchUpdateUserStatus } from '@/service/api/system';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { useDict } from '@/hooks/business/dict';
 import { useAuth } from '@/hooks/business/auth';
 import ButtonIcon from '@/components/custom/button-icon.vue';
-import DictTag from '@/components/custom/dict-tag.vue';
 import { $t } from '@/locales';
+import StatusSwitch from '@/components/custom/status-switch.vue';
 import UserOperateDrawer from './modules/user-operate-drawer.vue';
 import UserImportModal from './modules/user-import-modal.vue';
 import UserSearch from './modules/user-search.vue';
@@ -19,7 +19,6 @@ defineOptions({
 });
 
 useDict('sys_user_sex');
-useDict('sys_normal_disable');
 
 const { hasAuth } = useAuth();
 const appStore = useAppStore();
@@ -96,7 +95,14 @@ const {
       align: 'center',
       minWidth: 80,
       render(row) {
-        return <DictTag size="small" value={row.status} dictCode="sys_normal_disable" />;
+        return (
+          <StatusSwitch
+            v-model:value={row.status}
+            disabled={row.userId === 1}
+            info={row.userName}
+            onSubmitted={(value, callback) => handleStatusChange(row, value, callback)}
+          />
+        );
       }
     },
     {
@@ -111,6 +117,13 @@ const {
       align: 'center',
       width: 130,
       render: row => {
+        const divider = () => {
+          if (!hasAuth('system:user:edit') || !hasAuth('system:user:remove')) {
+            return null;
+          }
+          return <NDivider vertical />;
+        };
+
         const editBtn = () => {
           if (!hasAuth('system:user:edit')) {
             return null;
@@ -120,7 +133,6 @@ const {
               text
               type="primary"
               icon="material-symbols:drive-file-rename-outline-outline"
-              class="text-18px"
               tooltipContent={$t('common.edit')}
               onClick={() => edit(row.userId!)}
             />
@@ -136,7 +148,6 @@ const {
               text
               type="error"
               icon="material-symbols:delete-outline"
-              class="text-18px"
               tooltipContent={$t('common.delete')}
               popconfirmContent={$t('common.confirmDelete')}
               onPositiveClick={() => handleDelete(row.userId!)}
@@ -145,8 +156,9 @@ const {
         };
 
         return (
-          <div class="flex-center gap-16px">
+          <div class="flex-center gap-6px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );
@@ -205,6 +217,25 @@ function handleResetTreeData() {
 function handleImport() {
   openImportModal();
 }
+
+/** 处理状态切换 */
+async function handleStatusChange(
+  row: Api.System.User,
+  value: Api.Common.EnableStatus,
+  callback: (flag: boolean) => void
+) {
+  const { error } = await fetchUpdateUserStatus({
+    userId: row.userId,
+    status: value
+  });
+
+  callback(!error);
+
+  if (!error) {
+    window.$message?.success('状态修改成功');
+    getData();
+  }
+}
 </script>
 
 <template>
diff --git a/src/views/tool/gen/index.vue b/src/views/tool/gen/index.vue
index 7be30e68..f066c462 100644
--- a/src/views/tool/gen/index.vue
+++ b/src/views/tool/gen/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="tsx">
 import { ref } from 'vue';
-import { NButton, NPopconfirm, NTooltip } from 'naive-ui';
+import { NButton, NDivider } from 'naive-ui';
 import { useBoolean } from '@sa/hooks';
 import { jsonClone } from '@sa/utils';
 import {
@@ -13,14 +13,15 @@ import {
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { useDownload } from '@/hooks/business/download';
+import { useAuth } from '@/hooks/business/auth';
 import { $t } from '@/locales';
 import ButtonIcon from '@/components/custom/button-icon.vue';
-import SvgIcon from '@/components/custom/svg-icon.vue';
 import GenTableSearch from './modules/gen-table-search.vue';
 import GenTableImportDrawer from './modules/gen-table-import-drawer.vue';
 import GenTableOperateDrawer from './modules/gen-table-operate-drawer.vue';
 import GenTablePreviewDrawer from './modules/gen-table-preview-drawer.vue';
 
+const { hasAuth } = useAuth();
 const appStore = useAppStore();
 const { zip } = useDownload();
 const { bool: importVisible, setTrue: openImportVisible } = useBoolean();
@@ -101,62 +102,87 @@ const {
       key: 'operate',
       title: $t('common.operate'),
       align: 'center',
-      width: 180,
-      render: row => (
-        <div class="flex-center gap-16px">
-          <ButtonIcon
-            type="primary"
-            text
-            icon="ep:view"
-            tooltipContent="预览"
-            onClick={() => handlePreview(row.tableId!)}
-          />
-          <ButtonIcon
-            type="primary"
-            text
-            icon="ep:edit"
-            tooltipContent={$t('common.edit')}
-            onClick={() => edit(row.tableId!)}
-          />
-          <ButtonIcon
-            type="primary"
-            text
-            icon="ep:refresh"
-            tooltipContent="同步"
-            onClick={() => refresh(row.tableId!)}
-          />
-          <ButtonIcon
-            type="primary"
-            text
-            icon="ep:download"
-            tooltipContent="生成代码"
-            onClick={() => handleGenCode(row)}
-          />
-          <NTooltip placement="bottom">
-            {{
-              trigger: () => (
-                <NPopconfirm onPositiveClick={() => handleDelete(row.tableId!)}>
-                  {{
-                    default: () => $t('common.confirmDelete'),
-                    trigger: () => (
-                      <NButton class="h-36px text-icon" type="error" text>
-                        {{
-                          default: () => (
-                            <div class="flex-center gap-8px">
-                              <SvgIcon icon="ep:delete" />
-                            </div>
-                          )
-                        }}
-                      </NButton>
-                    )
-                  }}
-                </NPopconfirm>
-              ),
-              default: () => <>{$t('common.delete')}</>
-            }}
-          </NTooltip>
-        </div>
-      )
+      width: 300,
+      render: row => {
+        const previewBtn = () => {
+          return (
+            <ButtonIcon
+              type="primary"
+              text
+              icon="material-symbols:visibility-outline"
+              tooltipContent="预览"
+              onClick={() => handlePreview(row.tableId!)}
+            />
+          );
+        };
+
+        const editBtn = () => {
+          return (
+            <ButtonIcon
+              type="primary"
+              text
+              icon="material-symbols:drive-file-rename-outline-outline"
+              tooltipContent={$t('common.edit')}
+              onClick={() => edit(row.tableId!)}
+            />
+          );
+        };
+
+        const refreshBtn = () => {
+          return (
+            <ButtonIcon
+              type="primary"
+              text
+              icon="material-symbols:sync-outline"
+              tooltipContent="同步"
+              onClick={() => refresh(row.tableId!)}
+            />
+          );
+        };
+
+        const genCodeBtn = () => {
+          return (
+            <ButtonIcon
+              type="primary"
+              text
+              icon="material-symbols:download-rounded"
+              tooltipContent="生成代码"
+              onClick={() => handleGenCode(row)}
+            />
+          );
+        };
+
+        const deleteBtn = () => {
+          return (
+            <ButtonIcon
+              type="error"
+              text
+              icon="material-symbols:delete-outline"
+              tooltipContent={$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
+              onPositiveClick={() => handleDelete(row.tableId!)}
+            />
+          );
+        };
+
+        const buttons = [];
+        if (hasAuth('tool:gen:preview')) buttons.push(previewBtn());
+        if (hasAuth('tool:gen:edit')) buttons.push(editBtn());
+        if (hasAuth('tool:gen:refresh')) buttons.push(refreshBtn());
+        if (hasAuth('tool:gen:genCode')) buttons.push(genCodeBtn());
+        if (hasAuth('tool:gen:delete')) buttons.push(deleteBtn());
+
+        return (
+          <div class="flex-center gap-8px">
+            {buttons.map((btn, index) => (
+              <>
+                {index !== 0 && <NDivider vertical />}
+                {btn}
+              </>
+            ))}
+          </div>
+        );
+      }
     }
   ]
 });