style: 优化表格工具栏样式

continew-org · Oct 12, 2024 · ff87940 · ff87940
1 parent d881b93
commit ff87940
Show file tree

Hide file tree

Showing 19 changed files with 92 additions and 43 deletions.
diff --git a/src/components/GiForm/src/GiForm.vue b/src/components/GiForm/src/GiForm.vue
@@ -197,7 +197,10 @@
               <template #icon><icon-search /></template>
               <template #default>{{ options.btns?.searchBtnText || '查询' }}</template>
             </a-button>
-            <a-button @click="emit('reset')">重置</a-button>
+            <a-button @click="emit('reset')">
+              <template #icon><icon-refresh /></template>
+              <template #default>重置</template>
+            </a-button>
             <a-button v-if="options.fold?.enable" type="text" size="mini" @click="collapsed = !collapsed">
               <template #icon>
                 <icon-up v-if="!collapsed" />

diff --git a/src/components/GiTable/index.vue b/src/components/GiTable/index.vue
@@ -14,13 +14,13 @@
       <a-space wrap class="gi-table__toolbar-right" :size="[8, 8]">
         <slot name="custom-right"></slot>
         <a-tooltip content="刷新">
-          <a-button v-if="showRefreshBtn" class="gi_hover_btn-border" @click="refresh">
+          <a-button v-if="showRefreshBtn" @click="refresh">
             <template #icon><icon-refresh /></template>
           </a-button>
         </a-tooltip>
         <a-dropdown v-if="showSizeBtn" @select="handleSelect">
           <a-tooltip content="尺寸">
-            <a-button class="gi_hover_btn-border">
+            <a-button>
               <template #icon><icon-table-size style="width: 14px; height: 14px" /></template>
             </a-button>
           </a-tooltip>
@@ -34,7 +34,7 @@
         <a-popover v-if="showSettingColumnBtn" trigger="click" position="br"
           :content-style="{ minWidth: '120px', padding: '6px 8px 10px' }">
           <a-tooltip content="列设置">
-            <a-button class="gi_hover_btn-border">
+            <a-button>
               <template #icon>
                 <icon-settings />
               </template>
@@ -59,7 +59,7 @@
           </template>
         </a-popover>
         <a-tooltip content="全屏">
-          <a-button v-if="showFullscreenBtn" class="gi_hover_btn-border" @click="isFullscreen = !isFullscreen">
+          <a-button v-if="showFullscreenBtn" @click="isFullscreen = !isFullscreen">
             <template #icon>
               <icon-fullscreen v-if="!isFullscreen" />
               <icon-fullscreen-exit v-else />
@@ -71,7 +71,7 @@
     <div class="gi-table__body" :class="`gi-table__body-pagination-${attrs['page-position']}`">
       <div class="gi-table__container">
         <a-table ref="tableRef" :stripe="stripe" :size="size" column-resizable :bordered="{ cell: isBordered }"
-          v-bind="{ ...attrs, columns: _columns }" :scrollbar="true" >
+          v-bind="{ ...attrs, columns: _columns }" :scrollbar="true">
           <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
             <slot :key="key" :name="key" v-bind="scoped"></slot>
           </template>

diff --git a/src/styles/arco-ui/a-button.less b/src/styles/arco-ui/a-button.less
@@ -0,0 +1,9 @@
+.arco-btn-secondary {
+  &:hover {
+    background: var(--color-secondary-hover) !important;
+  }
+
+  &:active {
+    background: var(--color-secondary-active) !important;
+  }
+}
diff --git a/src/styles/arco-ui/index.less b/src/styles/arco-ui/index.less
@@ -13,6 +13,7 @@
 @import './a-message.less';
 @import './a-menu.less';
 @import './a-typography.less';
+@import './a-button.less';
 
 @color-menu-dark-bg: var(--color-bg-1);
 @card-color-bg: var(--color-bg-1);

diff --git a/src/views/monitor/log/login/index.vue b/src/views/monitor/log/login/index.vue
@@ -18,16 +18,18 @@
         <template #prefix><icon-search /></template>
       </a-input>
       <DateRangePicker v-model="queryForm.createTime" @change="search" />
-      <a-button @click="reset">重置</a-button>
+      <a-button @click="reset">
+        <template #icon><icon-refresh /></template>
+        <template #default>重置</template>
+      </a-button>
     </template>
     <template #custom-right>
-      <a-tooltip content="导出">
-        <a-button v-permission="['monitor:log:export']" class="gi_hover_btn-border" @click="onExport">
-          <template #icon>
-            <icon-download />
-          </template>
-        </a-button>
-      </a-tooltip>
+      <a-button v-permission="['monitor:log:export']" @click="onExport">
+        <template #icon>
+          <icon-download />
+        </template>
+        <template #default>导出</template>
+      </a-button>
     </template>
     <template #status="{ record }">
       <a-tag v-if="record.status === 1" color="green">

diff --git a/src/views/monitor/log/operation/index.vue b/src/views/monitor/log/operation/index.vue
@@ -19,16 +19,18 @@
         <template #prefix><icon-search /></template>
       </a-input>
       <DateRangePicker v-model="queryForm.createTime" @change="search" />
-      <a-button @click="reset">重置</a-button>
+      <a-button @click="reset">
+        <template #icon><icon-refresh /></template>
+        <template #default>重置</template>
+      </a-button>
     </template>
     <template #custom-right>
-      <a-tooltip content="导出">
-        <a-button v-permission="['monitor:log:export']" class="gi_hover_btn-border" @click="onExport">
-          <template #icon>
-            <icon-download />
-          </template>
-        </a-button>
-      </a-tooltip>
+      <a-button v-permission="['monitor:log:export']" @click="onExport">
+        <template #icon>
+          <icon-download />
+        </template>
+        <template #default>导出</template>
+      </a-button>
     </template>
     <template #createTime="{ record }">
       <a-link @click="onDetail(record)">{{ record.createTime }}</a-link>

diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue
@@ -16,7 +16,10 @@
           <template #prefix><icon-search /></template>
         </a-input>
         <DateRangePicker v-model="queryForm.loginTime" @change="search" />
-        <a-button @click="reset">重置</a-button>
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
       </template>
       <template #nickname="{ record }">{{ record.nickname }}（{{ record.username }}）</template>
       <template #action="{ record }">

diff --git a/src/views/schedule/job/JobAddModal.vue b/src/views/schedule/job/JobAddModal.vue
@@ -76,7 +76,7 @@
                 >
                   <template #append>
                     <a-tooltip content="Cron表达式生成">
-                      <a-button class="gi_hover_btn-border" @click="openGeneratorCron(form.triggerInterval)">
+                      <a-button @click="openGeneratorCron(form.triggerInterval)">
                         <template #icon>
                           <icon-clock-circle />
                         </template>

diff --git a/src/views/schedule/job/index.vue b/src/views/schedule/job/index.vue
@@ -22,7 +22,10 @@
         />
         <a-input v-model="queryForm.jobName" placeholder="请输入任务名称" allow-clear @change="search" />
         <a-select v-model="queryForm.jobStatus" placeholder="请选择任务状态" :options="job_status_enum" allow-clear style="width: 150px" @change="search" />
-        <a-button @click="reset">重置</a-button>
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
       </template>
       <template #custom-right>
         <a-button v-permission="['schedule:job:add']" type="primary" @click="onAdd">

diff --git a/src/views/schedule/log/index.vue b/src/views/schedule/log/index.vue
@@ -29,7 +29,10 @@
           @change="search"
         />
         <DateRangePicker v-model="queryForm.datetimeRange" :allow-clear="false" @change="search" />
-        <a-button @click="reset">重置</a-button>
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
       </template>
       <template #taskBatchStatus="{ record }">
         <GiCellTag :value="record.taskBatchStatus" :dict="job_execute_status_enum" />

diff --git a/src/views/setting/message/index.vue b/src/views/setting/message/index.vue
@@ -30,7 +30,10 @@
           <a-option :value="false">未读</a-option>
           <a-option :value="true">已读</a-option>
         </a-select>
-        <a-button @click="reset">重置</a-button>
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
       </template>
       <template #custom-right>
         <a-button type="primary" status="danger" :disabled="!selectedKeys.length" @click="onDelete">

diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
@@ -21,20 +21,22 @@
         <a-input v-model="name" placeholder="请输入名称" allow-clear @change="search">
           <template #prefix><icon-search /></template>
         </a-input>
-        <a-button @click="reset">重置</a-button>
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
       </template>
       <template #custom-right>
         <a-button v-permission="['system:dept:add']" type="primary" @click="onAdd()">
           <template #icon><icon-plus /></template>
           <span>新增</span>
         </a-button>
-        <a-tooltip content="导出">
-          <a-button v-permission="['system:dept:export']" class="gi_hover_btn-border" @click="onExport">
-            <template #icon>
-              <icon-download />
-            </template>
-          </a-button>
-        </a-tooltip>
+        <a-button v-permission="['system:dept:export']" @click="onExport">
+          <template #icon>
+            <icon-download />
+          </template>
+          <template #default>导出</template>
+        </a-button>
       </template>
       <template #status="{ record }">
         <GiCellStatus :status="record.status" />

diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
@@ -27,7 +27,10 @@
             <a-input v-model="queryForm.description" placeholder="请输入标签/描述" allow-clear @change="search">
               <template #prefix><icon-search /></template>
             </a-input>
-            <a-button @click="reset">重置</a-button>
+            <a-button @click="reset">
+              <template #icon><icon-refresh /></template>
+              <template #default>重置</template>
+            </a-button>
           </template>
           <template #custom-right>
             <a-button v-permission="['system:dict:item:add']" type="primary" @click="onAdd">

diff --git a/src/views/system/file/main/FileMain/index.vue b/src/views/system/file/main/FileMain/index.vue
@@ -44,7 +44,7 @@
         </a-button>
         <a-button-group>
           <a-tooltip content="视图">
-            <a-button class="gi_hover_btn-border" @click="toggleMode">
+            <a-button @click="toggleMode">
               <template #icon>
                 <icon-list v-if="mode === 'grid'" />
                 <icon-apps v-else />

diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
@@ -20,15 +20,18 @@
         <a-input v-model="title" placeholder="请输入菜单标题" allow-clear @change="search">
           <template #prefix><icon-search /></template>
         </a-input>
-        <a-button @click="reset">重置</a-button>
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
       </template>
       <template #custom-right>
         <a-button v-permission="['system:menu:add']" type="primary" @click="onAdd()">
           <template #icon><icon-plus /></template>
           <span>新增</span>
         </a-button>
         <a-tooltip content="展开/折叠">
-          <a-button class="gi_hover_btn-border" @click="onExpanded">
+          <a-button @click="onExpanded">
             <template #icon>
               <icon-list v-if="!isExpanded" />
               <icon-mind-mapping v-else />

diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
@@ -24,7 +24,10 @@
           style="width: 150px"
           @change="search"
         />
-        <a-button @click="reset">重置</a-button>
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
       </template>
       <template #custom-right>
         <a-button v-permission="['system:notice:add']" type="primary" @click="onAdd">

diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
@@ -16,7 +16,10 @@
         <a-input v-model="queryForm.description" placeholder="请输入名称/编码/描述" allow-clear @change="search">
           <template #prefix><icon-search /></template>
         </a-input>
-        <a-button @click="reset">重置</a-button>
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
       </template>
       <template #custom-right>
         <a-button v-permission="['system:role:add']" type="primary" @click="onAdd">

diff --git a/src/views/system/storage/index.vue b/src/views/system/storage/index.vue
@@ -24,7 +24,10 @@
           style="width: 150px"
           @change="search"
         />
-        <a-button @click="reset">重置</a-button>
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
       </template>
       <template #custom-right>
         <a-button v-permission="['system:storage:add']" type="primary" @click="onAdd">

diff --git a/src/views/tool/generator/index.vue b/src/views/tool/generator/index.vue
@@ -16,7 +16,10 @@
         <a-input v-model="queryForm.tableName" placeholder="请输入表名称" allow-clear @change="search">
           <template #prefix><icon-search /></template>
         </a-input>
-        <a-button @click="reset">重置</a-button>
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
       </template>
       <template #action="{ record }">
         <a-space>