style: 优化按钮样式

src/components/advanced/table-header-operation.vue

@@ -58,7 +58,7 @@ function handleExport() {
     <slot name="default">
       <NButton v-if="showAdd" :disabled="disableAdd" size="small" ghost type="primary" @click="add">
         <template #icon>
-          <icon-ic-round-plus class="text-icon" />
+          <icon-material-symbols:add class="text-icon" />
         </template>
         {{ $t('common.add') }}
       </NButton>
@@ -66,7 +66,7 @@ function handleExport() {
         <template #trigger>
           <NButton size="small" ghost type="error" :disabled="disabledDelete">
             <template #icon>
-              <icon-ic-round-delete class="text-icon" />
+              <icon-material-symbols:delete-outline class="text-icon" />
             </template>
             {{ $t('common.batchDelete') }}
           </NButton>
@@ -75,7 +75,7 @@ function handleExport() {
       </NPopconfirm>
       <NButton v-if="showExport" size="small" ghost @click="handleExport">
         <template #icon>
-          <icon-material-symbols:download-2-rounded class="text-icon" />
+          <icon-material-symbols:download-rounded class="text-icon" />
         </template>
         导出
       </NButton>
@@ -83,7 +83,7 @@ function handleExport() {
     <slot name="after"></slot>
     <NButton size="small" @click="refresh">
       <template #icon>
-        <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
+        <icon-material-symbols:refresh-rounded class="text-icon" :class="{ 'animate-spin': loading }" />
       </template>
       {{ $t('common.refresh') }}
     </NButton>

src/components/custom/dept-tree.vue

@@ -106,6 +106,7 @@ defineExpose({
         v-model:expanded-keys="expandedKeys"
         multiple
         checkable
+        :selectable="false"
         key-field="id"
         label-field="label"
         :data="options"

src/hooks/common/tree-table.ts

@@ -23,7 +23,7 @@ export function useTreeTable<A extends NaiveUI.TreeTableApiFn>(
     idField,
     parentIdField = 'parentId',
     childrenField = 'children',
-    defaultExpandAll = true
+    defaultExpandAll = false
   } = config;
 
   const SELECTION_KEY = '__selection__';
@@ -56,10 +56,8 @@ export function useTreeTable<A extends NaiveUI.TreeTableApiFn>(
         childrenField
       });
 
-      // 如果设置了默认展开所有，则收集所有节点的key
+      // if defaultExpandAll is true, expand all nodes
-      if (defaultExpandAll) {
+      expandedRowKeys.value = defaultExpandAll ? records.map(item => item[idField]) : [records[0][idField]];
-        expandedRowKeys.value = records.map(item => item[idField]);
-      }
 
       return { data: treeData };
     },
@@ -129,14 +127,18 @@ export function useTreeTable<A extends NaiveUI.TreeTableApiFn>(
     return keys;
   }
 
-  /** 展开所有节点 */
+  const { bool: isCollapse, toggle: toggleCollapse } = useBoolean(defaultExpandAll);
+
+  /** expand all nodes */
   function expandAll() {
+    toggleCollapse();
     expandedRowKeys.value = collectAllNodeKeys(data.value);
   }
 
-  /** 收起所有节点 */
+  /** collapse all nodes */
   function collapseAll() {
-    expandedRowKeys.value = [];
+    toggleCollapse();
+    expandedRowKeys.value = data.value.length ? [data.value[0][idField]] : [];
   }
 
   scope.run(() => {
@@ -164,6 +166,7 @@ export function useTreeTable<A extends NaiveUI.TreeTableApiFn>(
     updateSearchParams,
     resetSearchParams,
     expandedRowKeys,
+    isCollapse,
     expandAll,
     collapseAll
   };

src/typings/common.d.ts

@@ -32,15 +32,15 @@ declare namespace CommonType {
   /** The res error code */
   type ErrorCode = '401' | '403' | '404' | 'default';
 
-  /** 构造树型结构数据的配置选项 */
+  /** The configuration options for constructing tree structure data */
   type TreeConfig = {
-    /** id字段名 */
+    /** id field name */
     idField: string;
-    /** 父节点字段名 */
+    /** parent id field name */
     parentIdField?: string;
-    /** 子节点字段名 */
+    /** children field name */
     childrenField?: string;
-    /** 过滤函数 */
+    /** filter function */
     filterFn?: (node: any) => boolean;
   };
 }

src/typings/components.d.ts

@@ -40,15 +40,27 @@ declare module 'vue' {
     IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
     IconIcRoundUpload: typeof import('~icons/ic/round-upload')['default']
     IconLocalBanner: typeof import('~icons/local/banner')['default']
+    'IconMaterialSymbols:add': typeof import('~icons/material-symbols/add')['default']
+    'IconMaterialSymbols:collapseAllRounded': typeof import('~icons/material-symbols/collapse-all-rounded')['default']
+    'IconMaterialSymbols:deleteOutline': typeof import('~icons/material-symbols/delete-outline')['default']
     'IconMaterialSymbols:download2Rounded': typeof import('~icons/material-symbols/download2-rounded')['default']
+    'IconMaterialSymbols:downloadRounded': typeof import('~icons/material-symbols/download-rounded')['default']
+    'IconMaterialSymbols:expandAllRounded': typeof import('~icons/material-symbols/expand-all-rounded')['default']
+    'IconMaterialSymbols:imageOutline': typeof import('~icons/material-symbols/image-outline')['default']
+    'IconMaterialSymbols:refreshRounded': typeof import('~icons/material-symbols/refresh-rounded')['default']
+    'IconMaterialSymbols:settingsOutlineRounded': typeof import('~icons/material-symbols/settings-outline-rounded')['default']
     'IconMaterialSymbols:syncOutline': typeof import('~icons/material-symbols/sync-outline')['default']
     'IconMaterialSymbols:upload2Rounded': typeof import('~icons/material-symbols/upload2-rounded')['default']
+    'IconMaterialSymbols:uploadRounded': typeof import('~icons/material-symbols/upload-rounded')['default']
+    'IconMaterialSymbols:warningOutlineRounded': typeof import('~icons/material-symbols/warning-outline-rounded')['default']
     IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
     IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
     IconMdiDrag: typeof import('~icons/mdi/drag')['default']
     IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
     IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
     IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
+    'IconQuill:collapse': typeof import('~icons/quill/collapse')['default']
+    'IconQuill:expand': typeof import('~icons/quill/expand')['default']
     IconUilSearch: typeof import('~icons/uil/search')['default']
     JsonPreview: typeof import('./../components/custom/json-preview.vue')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']

src/views/monitor/oper-log/index.vue

@@ -156,11 +156,19 @@ async function handleExport() {
 }
 
 async function handleCleanOperLog() {
+  window.$dialog?.error({
+    title: '提示',
+    content: '是否确认清空所有操作日志数据项?',
+    positiveText: '确认清空',
+    negativeText: '取消',
+    onPositiveClick: async () => {
       const { error } = await fetchCleanOperLog();
       if (error) return;
-  window.$message?.success('清理成功');
+      window.$message?.success('清空成功');
       await getData();
     }
+  });
+}
 </script>
 
 <template>
@@ -182,11 +190,14 @@ async function handleCleanOperLog() {
           <template #prefix>
             <NButton
               v-if="hasAuth('monitor:operlog:remove')"
-              type="warning"
+              type="error"
               ghost
               size="small"
               @click="handleCleanOperLog"
             >
+              <template #icon>
+                <icon-material-symbols:warning-outline-rounded />
+              </template>
               清空
             </NButton>
           </template>

src/views/system/config/index.vue

@@ -215,6 +215,9 @@ async function handleRefreshCache() {
               size="small"
               @click="handleRefreshCache"
             >
+              <template #icon>
+                <icon-material-symbols:sync-outline />
+              </template>
               刷新缓存
             </NButton>
           </template>

src/views/system/dept/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import { NButton, NDivider } from 'naive-ui';
 import { jsonClone } from '@sa/utils';
-import type { TableDataWithIndex } from '@sa/hooks';
+import { type TableDataWithIndex } from '@sa/hooks';
 import { fetchBatchDeleteDept, fetchGetDeptList } from '@/service/api/system/dept';
 import { useAppStore } from '@/store/modules/app';
 import { useAuth } from '@/hooks/business/auth';
@@ -31,6 +31,7 @@ const {
   searchParams,
   resetSearchParams,
   expandedRowKeys,
+  isCollapse,
   expandAll,
   collapseAll
 } = useTreeTable({
@@ -173,8 +174,18 @@ async function addInRow(row: TableDataWithIndex<Api.System.Dept>) {
           @refresh="getData"
         >
           <template #prefix>
-            <NButton size="small" @click="expandAll">展开</NButton>
+            <NButton v-if="!isCollapse" :disabled="!expandedRowKeys.length" size="small" @click="expandAll">
-            <NButton size="small" @click="collapseAll">收起</NButton>
+              <template #icon>
+                <icon-quill:expand />
+              </template>
+              全部展开
+            </NButton>
+            <NButton v-if="isCollapse" :disabled="!expandedRowKeys.length" size="small" @click="collapseAll">
+              <template #icon>
+                <icon-quill:collapse />
+              </template>
+              全部收起
+            </NButton>
           </template>
         </TableHeaderOperation>
       </template>

src/views/system/menu/index.vue

@@ -305,13 +305,13 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
           v-model:checked-keys="checkedKeys"
           v-model:expanded-keys="expandedKeys"
           :cancelable="false"
+          block-node
           show-line
           :data="treeData as []"
           :default-expanded-keys="[0]"
           :show-irrelevant-nodes="false"
           :pattern="name"
-          block-line
+          class="menu-tree h-full min-h-200px py-3"
-          class="h-full min-h-200px py-3"
           key-field="menuId"
           label-field="menuName"
           virtual-scroll
@@ -482,11 +482,11 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
 
 .menu-tree {
   :deep(.n-tree-node) {
-    height: 33px;
+    height: 25px;
   }
 
   :deep(.n-tree-node-switcher) {
-    height: 33px;
+    height: 25px;
   }
 
   :deep(.n-tree-node-switcher__icon) {

src/views/system/oss/index.vue

@@ -161,7 +161,7 @@ const {
             <ButtonIcon
               text
               type="primary"
-              icon="material-symbols:download"
+              icon="material-symbols:download-rounded"
               class="text-20px"
               tooltipContent={$t('common.download')}
               onClick={() => download(row.ossId!)}
@@ -298,15 +298,15 @@ function handleToOssConfig() {
               </template>
             </NSwitch>
 
-            <NButton type="primary" size="small" ghost @click="handleUpload('file')">
+            <NButton size="small" ghost @click="handleUpload('file')">
               <template #icon>
-                <icon-ic-round-file-upload />
+                <icon-material-symbols:upload-rounded />
               </template>
               上传文件
             </NButton>
-            <NButton type="primary" size="small" ghost @click="handleUpload('image')">
+            <NButton size="small" ghost @click="handleUpload('image')">
               <template #icon>
-                <icon-ic-round-image />
+                <icon-material-symbols:image-outline />
               </template>
               上传图片
             </NButton>

src/views/system/user/index.vue

@@ -257,7 +257,6 @@ async function handleStatusChange(
           :default-expanded-keys="deptData?.length ? [deptData[0].id!] : []"
           :show-irrelevant-nodes="false"
           :pattern="deptPattern"
-          block-line
           class="infinite-scroll h-full min-h-200px py-3"
           key-field="id"
           label-field="label"
@@ -289,7 +288,7 @@ async function handleStatusChange(
             <template #after>
               <NButton v-if="hasAuth('system:user:import')" size="small" ghost @click="handleImport">
                 <template #icon>
-                  <icon-material-symbols:upload-2-rounded class="text-icon" />
+                  <icon-material-symbols:upload-rounded class="text-icon" />
                 </template>
                 导入
               </NButton>
@@ -351,11 +350,11 @@ async function handleStatusChange(
   }
 
   :deep(.n-tree-node) {
-    height: 33px;
+    height: 25px;
   }
 
   :deep(.n-tree-node-switcher) {
-    height: 33px;
+    height: 25px;
   }
 
   :deep(.n-tree-node-switcher__icon) {

src/views/tool/gen/index.vue

@@ -287,13 +287,13 @@ getDataNames();
               @click="() => handleGenCode()"
             >
               <template #icon>
-                <icon-ic-round-download class="text-icon" />
+                <icon-material-symbols:download-rounded class="text-icon" />
               </template>
               生成代码
             </NButton>
             <NButton size="small" ghost type="primary" @click="handleImport">
               <template #icon>
-                <icon-ic-round-upload class="text-icon" />
+                <icon-material-symbols:upload-rounded class="text-icon" />
               </template>
               导入
             </NButton>