style: 优化操作按钮样式

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!)}>
+            <ButtonIcon
-              详情
+              type="primary"
-            </NButton>
+              text
+              icon="material-symbols:visibility-outline"
+              tooltipContent="详情"
+              onClick={() => view(row.infoId!)}
+            />
           );
         };
         return <div class="flex-center gap-8px">{viewBtn()}</div>;

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!)}>
+            <ButtonIcon
-              详情
+              type="primary"
-            </NButton>
+              text
+              icon="material-symbols:visibility-outline"
+              tooltipContent="详情"
+              onClick={() => view(row.operId!)}
+            />
           );
         };
         return <div class="flex-center gap-8px">{viewBtn()}</div>;

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!)}>
+            <ButtonIcon
-              {$t('common.edit')}
+              text
-            </NButton>
+              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="取消">
+            <ButtonIcon
-              {{
+              text
-                default: () => $t('common.confirmDelete'),
+              type="error"
-                trigger: () => (
+              icon="material-symbols:delete-outline"
-                  <NButton disabled={row.id === 1} type="error" ghost size="small">
+              tooltipContent={$t('common.delete')}
-                    {$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
-                  </NButton>
+              onPositiveClick={() => handleDelete(row.id!)}
-                )
+              disabled={row.id === 1}
-              }}
+            />
-            </NPopconfirm>
           );
         };
 
         return (
           <div class="flex-center gap-8px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );

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!)}>
+            <ButtonIcon
-              {$t('common.edit')}
+              text
-            </NButton>
+              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!)}>
+            <ButtonIcon
-              {{
+              text
-                default: () => $t('common.confirmDelete'),
+              type="error"
-                trigger: () => (
+              icon="material-symbols:delete-outline"
-                  <NButton type="error" ghost size="small">
+              tooltipContent={$t('common.delete')}
-                    {$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
-                  </NButton>
+              onPositiveClick={() => handleDelete(row.configId!)}
-                )
+            />
-              }}
-            </NPopconfirm>
           );
         };
 
         return (
           <div class="flex-center gap-8px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );

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)}>
+            <ButtonIcon
-              {$t('common.add')}
+              text
-            </NButton>
+              type="primary"
-          );
+              icon="material-symbols:add-2-rounded"
-        };
+              tooltipContent={$t('common.add')}
-        const deleteBtn = () => {
+              onClick={() => addInRow(row)}
-          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>
           );
         };
 
+        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()}
+            {buttons.map((btn, index) => (
-            {addBtn()}
+              <>
-            {deleteBtn()}
+                {index !== 0 && <NDivider vertical />}
+                {btn}
+              </>
+            ))}
           </div>
         );
       }

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!)}>
+            <ButtonIcon
-              {$t('common.edit')}
+              text
-            </NButton>
+              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!)}>
+            <ButtonIcon
-              {{
+              text
-                default: () => $t('common.confirmDelete'),
+              type="error"
-                trigger: () => (
+              icon="material-symbols:delete-outline"
-                  <NButton type="error" ghost size="small">
+              tooltipContent={$t('common.delete')}
-                    {$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
-                  </NButton>
+              onPositiveClick={() => handleDelete(row.dictCode!)}
-                )
+            />
-              }}
-            </NPopconfirm>
           );
         };
 
         return (
           <div class="flex-center gap-8px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );

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!)}>
+            <ButtonIcon
-              {$t('common.edit')}
+              text
-            </NButton>
+              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!)}>
+            <ButtonIcon
-              {{
+              text
-                default: () => $t('common.confirmDelete'),
+              type="error"
-                trigger: () => (
+              icon="material-symbols:delete-outline"
-                  <NButton type="error" ghost size="small">
+              tooltipContent={$t('common.delete')}
-                    {$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
-                  </NButton>
+              onPositiveClick={() => handleDelete(row.dictId!)}
-                )
+            />
-              }}
-            </NPopconfirm>
           );
         };
 
         return (
           <div class="flex-center gap-8px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );

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,12 +100,11 @@ function renderPrefix({ option }: { option: TreeOption }) {
 }
 
 function renderSuffix({ option }: { option: TreeOption }) {
-  if (!['M'].includes(String(option.menuType))) {
+  if (!['M'].includes(String(option.menuType)) || !hasAuth('system:menu:add')) {
-    return <></>;
+    return null;
   }
 
   return (
-    <>
     <div class="flex-center gap-8px">
       <ButtonIcon
         text
@@ -115,7 +117,6 @@ function renderSuffix({ option }: { option: TreeOption }) {
         }}
       />
     </div>
-    </>
   );
 }
 
@@ -224,39 +225,50 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
     width: 80,
     align: 'center',
     render(row) {
+      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"
+            type="primary"
-            tooltipContent="修改"
+            icon="material-symbols:drive-file-rename-outline-outline"
+            tooltipContent={$t('common.edit')}
             onClick={() => handleUpdateBtnMenu(row)}
           />
-          <NTooltip placement="bottom">
+        );
-            {{
+      };
-              trigger: () => (
+
-                <NPopconfirm onPositiveClick={() => handleDeleteBtnMenu(row.menuId!)}>
+      const deleteBtn = () => {
-                  {{
+        if (!hasAuth('system:menu:remove')) {
-                    default: () => $t('common.confirmDelete'),
+          return null;
-                    trigger: () => (
+        }
-                      <NButton class="ml-16px h-36px text-icon" type="error" text>
+        return (
-                        {{
+          <ButtonIcon
-                          default: () => (
+            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">
-                              <SvgIcon icon="ep:delete" />
+          {editBtn()}
+          {divider()}
+          {deleteBtn()}
         </div>
-                          )
-                        }}
-                      </NButton>
-                    )
-                  }}
-                </NPopconfirm>
-              ),
-              default: () => <>{$t('common.delete')}</>
-            }}
-          </NTooltip>
-        </>
       );
     }
   }
@@ -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>

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!)}>
+            <ButtonIcon
-              {$t('common.edit')}
+              text
-            </NButton>
+              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!)}>
+            <ButtonIcon
-              {{
+              text
-                default: () => $t('common.confirmDelete'),
+              type="error"
-                trigger: () => (
+              icon="material-symbols:delete-outline"
-                  <NButton type="error" ghost size="small">
+              tooltipContent={$t('common.delete')}
-                    {$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
-                  </NButton>
+              onPositiveClick={() => handleDelete(row.noticeId!)}
-                )
+            />
-              }}
-            </NPopconfirm>
           );
         };
 
         return (
           <div class="flex-center gap-8px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );

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!)}>
+            <ButtonIcon
-              {$t('common.edit')}
+              text
-            </NButton>
+              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!)}>
+            <ButtonIcon
-              {{
+              text
-                default: () => $t('common.confirmDelete'),
+              type="error"
-                trigger: () => (
+              icon="material-symbols:delete-outline"
-                  <NButton type="error" ghost size="small">
+              tooltipContent={$t('common.delete')}
-                    {$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
-                  </NButton>
+              onPositiveClick={() => handleDelete(row.ossConfigId!)}
-                )
+            />
-              }}
-            </NPopconfirm>
           );
         };
 
         return (
           <div class="flex-center gap-8px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );

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>
         );

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!)}>
+            <ButtonIcon
-              {$t('common.edit')}
+              type="primary"
-            </NButton>
+              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!)}>
+            <ButtonIcon
-              {{
+              text
-                default: () => $t('common.confirmDelete'),
+              type="error"
-                trigger: () => (
+              icon="material-symbols:delete-outline"
-                  <NButton type="error" ghost size="small">
+              tooltipContent={$t('common.delete')}
-                    {$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
-                  </NButton>
+              onPositiveClick={() => handleDelete(row.postId!)}
-                )
+            />
-              }}
-            </NPopconfirm>
           );
         };
 
         return (
           <div class="flex-center gap-8px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );

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!)}>
+            <ButtonIcon
-              {$t('common.edit')}
+              type="primary"
-            </NButton>
+              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!)}>
+            <ButtonIcon
-              {{
+              text
-                default: () => `确认同步[${row.companyName}]的套餐吗?`,
+              type="primary"
-                trigger: () => (
+              icon="material-symbols:sync-outline"
-                  <NButton type="success" ghost size="small">
+              tooltipContent="同步套餐"
-                    同步
+              popconfirmContent={`确认同步[${row.companyName}]的套餐吗?`}
-                  </NButton>
+              onPositiveClick={() => handleSyncTenantDict()}
-                )
+            />
-              }}
-            </NPopconfirm>
           );
         };
+
         const deleteBtn = () => {
-          if (!hasAuth('system:tenant:delete')) {
-            return null;
-          }
           return (
-            <NPopconfirm onPositiveClick={() => handleDelete(row.id!)}>
+            <ButtonIcon
-              {{
+              text
-                default: () => $t('common.confirmDelete'),
+              type="error"
-                trigger: () => (
+              icon="material-symbols:delete-outline"
-                  <NButton type="error" ghost size="small">
+              tooltipContent={$t('common.delete')}
-                    {$t('common.delete')}
+              popconfirmContent={$t('common.confirmDelete')}
-                  </NButton>
+              onPositiveClick={() => handleDelete(row.id!)}
-                )
+            />
-              }}
-            </NPopconfirm>
           );
         };
+
+        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()}
+            {buttons.map((btn, index) => (
-            {syncBtn()}
+              <>
-            {deleteBtn()}
+                {index !== 0 && <NDivider vertical />}
+                {btn}
+              </>
+            ))}
           </div>
         );
       }

src/views/system/user/index.vue

@@ -1,6 +1,6 @@
 <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 { useAppStore } from '@/store/modules/app';
@@ -111,6 +111,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 +127,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 +142,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 +150,9 @@ const {
         };
 
         return (
-          <div class="flex-center gap-16px">
+          <div class="flex-center gap-6px">
             {editBtn()}
+            {divider()}
             {deleteBtn()}
           </div>
         );

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,
+      width: 300,
-      render: row => (
+      render: row => {
-        <div class="flex-center gap-16px">
+        const previewBtn = () => {
+          return (
             <ButtonIcon
               type="primary"
               text
-            icon="ep:view"
+              icon="material-symbols:visibility-outline"
               tooltipContent="预览"
               onClick={() => handlePreview(row.tableId!)}
             />
+          );
+        };
+
+        const editBtn = () => {
+          return (
             <ButtonIcon
               type="primary"
               text
-            icon="ep:edit"
+              icon="material-symbols:drive-file-rename-outline-outline"
               tooltipContent={$t('common.edit')}
               onClick={() => edit(row.tableId!)}
             />
+          );
+        };
+
+        const refreshBtn = () => {
+          return (
             <ButtonIcon
               type="primary"
               text
-            icon="ep:refresh"
+              icon="material-symbols:sync-outline"
               tooltipContent="同步"
               onClick={() => refresh(row.tableId!)}
             />
+          );
+        };
+
+        const genCodeBtn = () => {
+          return (
             <ButtonIcon
               type="primary"
               text
-            icon="ep:download"
+              icon="material-symbols:download-rounded"
               tooltipContent="生成代码"
               onClick={() => handleGenCode(row)}
             />
-          <NTooltip placement="bottom">
+          );
-            {{
+        };
-              trigger: () => (
+
-                <NPopconfirm onPositiveClick={() => handleDelete(row.tableId!)}>
+        const deleteBtn = () => {
-                  {{
+          return (
-                    default: () => $t('common.confirmDelete'),
+            <ButtonIcon
-                    trigger: () => (
+              type="error"
-                      <NButton class="h-36px text-icon" type="error" text>
+              text
-                        {{
+              icon="material-symbols:delete-outline"
-                          default: () => (
+              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">
-                              <SvgIcon icon="ep:delete" />
+            {buttons.map((btn, index) => (
+              <>
+                {index !== 0 && <NDivider vertical />}
+                {btn}
+              </>
+            ))}
           </div>
-                          )
+        );
-                        }}
+      }
-                      </NButton>
-                    )
-                  }}
-                </NPopconfirm>
-              ),
-              default: () => <>{$t('common.delete')}</>
-            }}
-          </NTooltip>
-        </div>
-      )
     }
   ]
 });