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

2025-10-31 10:57:10 +08:00 · 2024-04-28 21:08:56 +08:00
parent 81dbea8793
commit b8a84a3a08
15 changed files with 65 additions and 18 deletions
--- a/src/components/GiTable/index.vue
+++ b/src/components/GiTable/index.vue
@@ -7,10 +7,22 @@
      <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"
@@ -18,7 +30,7 @@
          :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;
    }
--- 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);
        }
      }
    }
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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"
      >
--- 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"
    >
--- 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 />
--- 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"
        >
--- 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"
      >
--- 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"
      >
--- 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>
--- 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"
      >