feat: 新增表格全屏、尺寸工具

continew-org · Apr 28, 2024 · b8a84a3 · b8a84a3
1 parent 81dbea8
commit b8a84a3
Show file tree

Hide file tree

Showing 15 changed files with 65 additions and 18 deletions.
diff --git a/src/components/GiTable/index.vue b/src/components/GiTable/index.vue
@@ -7,18 +7,30 @@
       <a-space wrap class="gi-table__toolbar-right" :size="[8, 8]">
         <slot name="custom-right"></slot>
         <a-tooltip content="刷新">
-          <a-button v-if="showRefreshBtn" @click="refresh">
+          <a-button v-if="showRefreshBtn" class="gi_hover_btn-border" @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">
+              <template #icon><icon-table-size style="width: 14px; height: 14px" /></template>
+            </a-button>
+          </a-tooltip>
+          <template #content>
+            <a-doption v-for="item in sizeList" :key="item.value" :value="item.value" :active="item.value === size">{{
+              item.label
+            }}</a-doption>
+          </template>
+        </a-dropdown>
         <a-popover
           v-if="showSettingColumnBtn"
           trigger="click"
           position="br"
           :content-style="{ minWidth: '120px', padding: '6px 8px 10px' }"
         >
           <a-tooltip content="列设置">
-            <a-button>
+            <a-button class="gi_hover_btn-border">
               <template #icon>
                 <icon-settings />
               </template>
@@ -42,6 +54,14 @@
             </a-row>
           </template>
         </a-popover>
+        <a-tooltip content="全屏">
+          <a-button v-if="showFullscreenBtn" class="gi_hover_btn-border" @click="isFullscreen = !isFullscreen">
+            <template #icon>
+              <icon-fullscreen v-if="!isFullscreen" />
+              <icon-fullscreen-exit v-else />
+            </template>
+          </a-button>
+        </a-tooltip>
       </a-space>
     </a-row>
     <div class="gi-table__container">
@@ -60,7 +80,7 @@
 </template>
 
 <script setup lang="ts">
-import type { TableInstance, TableColumnData } from '@arco-design/web-vue'
+import type { TableInstance, TableColumnData, DropdownInstance } from '@arco-design/web-vue'
 import { VueDraggable } from 'vue-draggable-plus'
 
 defineOptions({ name: 'GiTable', inheritAttrs: false })
@@ -87,11 +107,23 @@ const size = ref<TableInstance['size']>('medium')
 const isBordered = ref(false)
 const isFullscreen = ref(false)
 
+type SizeItem = { label: string; value: TableInstance['size'] }
+const sizeList: SizeItem[] = [
+  { label: '紧凑', value: 'small' },
+  { label: '默认', value: 'medium' }
+]
+
+const handleSelect: DropdownInstance['onSelect'] = (value) => {
+  size.value = value as TableInstance['size']
+}
+
 const refresh = () => {
   emit('refresh')
 }
 
 const showRefreshBtn = computed(() => !props.disabledTools.includes('refresh'))
+const showSizeBtn = computed(() => !props.disabledTools.includes('size'))
+const showFullscreenBtn = computed(() => !props.disabledTools.includes('fullscreen'))
 const showSettingColumnBtn = computed(
   () => !props.disabledTools.includes('setting') && attrs?.columns && (attrs?.columns as TableColumnData[])?.length
 )
@@ -177,7 +209,6 @@ defineExpose({ tableRef })
         margin-right: 0;
       }
     }
-
     :deep(.arco-form-layout-inline .arco-form-item) {
       margin-bottom: 0;
     }

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -156,6 +156,16 @@
   }
 }
 
+.gi_hover_btn-border {
+  &:hover {
+    background: var(--color-secondary-hover) !important;
+  }
+
+  &:active {
+    background: var(--color-secondary-active) !important;
+  }
+}
+
 .gi_card {
   box-sizing: border-box;
   overflow: hidden;
@@ -317,7 +327,6 @@
           -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .15);
           box-shadow: 0 2px 3px rgba(0, 0, 0, .15);
           border-color: rgb(var(--primary-5));
-          color: var(--color-text-2);
         }
       }
     }

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
@@ -3,16 +3,16 @@
     <WorkCard />
 
     <a-alert>
-      全新版本 v3.0.0 发布预告，采用全新前端模板，提供更可靠、更舒适的前端开发体验，点击查看
-      <span class="link" @click="open('https://gitee.com/continew/continew-admin-ui/commits/dev')">项目进展</span>。
+      全新版本 v3.0.0 已发布，采用全新前端模板，提供更可靠、更舒适的前端开发体验，点击查看
+      <span class="link" @click="open('https://continew.top/admin/other/changelog.html')">更新日志</span>。
     </a-alert>
 
     <a-row class="home__content">
-      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="18" :xxl="20">
+      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="18" :xxl="18">
         <div class="home__item"><ProjectCard /></div>
         <div class="home__item"><AccessTrendCard /></div>
       </a-col>
-      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6" :xxl="4">
+      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6" :xxl="6">
         <div class="home__item"><FastCard /></div>
         <div class="home__item"><SponsorCard /></div>
         <div class="home__item"><NoticeCard /></div>

diff --git a/src/views/monitor/log/login/index.vue b/src/views/monitor/log/login/index.vue
@@ -6,7 +6,7 @@
     :loading="loading"
     :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
     :pagination="pagination"
-    :disabledTools="['setting']"
+    :disabledTools="['size', 'setting']"
     @filterChange="filterChange"
     @refresh="search"
   >
@@ -22,7 +22,7 @@
     </template>
     <template #custom-right>
       <a-tooltip content="导出">
-        <a-button v-permission="['monitor:log:export']" @click="onExport">
+        <a-button v-permission="['monitor:log:export']" class="gi_hover_btn-border" @click="onExport">
           <template #icon>
             <icon-download />
           </template>

diff --git a/src/views/monitor/log/operation/index.vue b/src/views/monitor/log/operation/index.vue
@@ -7,7 +7,7 @@
     :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
     :pagination="pagination"
     column-resizable
-    :disabledTools="['setting']"
+    :disabledTools="['size', 'setting']"
     @filterChange="filterChange"
     @refresh="search"
   >
@@ -23,7 +23,7 @@
     </template>
     <template #custom-right>
       <a-tooltip content="导出">
-        <a-button v-permission="['monitor:log:export']" @click="onExport">
+        <a-button v-permission="['monitor:log:export']" class="gi_hover_btn-border" @click="onExport">
           <template #icon>
             <icon-download />
           </template>

diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue
@@ -8,7 +8,7 @@
         :loading="loading"
         :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
         :pagination="pagination"
-        :disabledTools="['setting']"
+        :disabledTools="['size', 'setting']"
         @refresh="search"
       >
         <template #custom-left>

diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
@@ -9,6 +9,7 @@
         :loading="loading"
         :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
         :pagination="false"
+        :disabledTools="['size']"
         :disabledColumnKeys="['name']"
         @refresh="search"
       >
@@ -36,7 +37,7 @@
             <span>新增</span>
           </a-button>
           <a-tooltip content="导出">
-            <a-button v-permission="['system:dept:export']" @click="onExport">
+            <a-button v-permission="['system:dept:export']" class="gi_hover_btn-border" @click="onExport">
               <template #icon>
                 <icon-download />
               </template>

diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
@@ -8,6 +8,7 @@
         :loading="loading"
         :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
         :pagination="pagination"
+        :disabledTools="['size']"
         :disabledColumnKeys="['name']"
         @refresh="search"
       >

diff --git a/src/views/system/dict/item/index.vue b/src/views/system/dict/item/index.vue
@@ -18,6 +18,7 @@
       :loading="loading"
       :scroll="{ x: '100%', y: '100%', minWidth: 800 }"
       :pagination="pagination"
+      :disabledTools="['size']"
       :disabledColumnKeys="['label']"
       @refresh="search"
     >

diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
@@ -36,7 +36,7 @@
             <span>新增</span>
           </a-button>
           <a-tooltip content="展开/折叠">
-            <a-button @click="onExpanded">
+            <a-button class="gi_hover_btn-border" @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
@@ -9,6 +9,7 @@
           :loading="loading"
           :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
           :pagination="pagination"
+          :disabledTools="['size']"
           :disabledColumnKeys="['title']"
           @refresh="search"
         >

diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
@@ -8,6 +8,7 @@
         :loading="loading"
         :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
         :pagination="pagination"
+        :disabledTools="['size']"
         :disabledColumnKeys="['name']"
         @refresh="search"
       >

diff --git a/src/views/system/storage/index.vue b/src/views/system/storage/index.vue
@@ -8,6 +8,7 @@
         :loading="loading"
         :scroll="{ x: '100%', y: '100%', minWidth: 1300 }"
         :pagination="pagination"
+        :disabledTools="['size']"
         :disabledColumnKeys="['name']"
         @refresh="search"
       >

diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
@@ -18,6 +18,7 @@
             :loading="loading"
             :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
             :pagination="pagination"
+            :disabledTools="['size']"
             :disabledColumnKeys="['nickname']"
             @refresh="search"
           >
@@ -41,7 +42,7 @@
                 <span>新增</span>
               </a-button>
               <a-tooltip content="导出">
-                <a-button v-permission="['system:user:export']" @click="onExport">
+                <a-button v-permission="['system:user:export']" class="gi_hover_btn-border" @click="onExport">
                   <template #icon>
                     <icon-download />
                   </template>

diff --git a/src/views/tool/generator/index.vue b/src/views/tool/generator/index.vue
@@ -8,7 +8,7 @@
         :loading="loading"
         :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
         :pagination="pagination"
-        :disabledTools="['setting']"
+        :disabledTools="['size', 'setting']"
         :disabledColumnKeys="['tableName']"
         @refresh="search"
       >