feat(components): 新增表格属性配置

src/components/common/data-table.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue';
+import type { DataTableProps } from 'naive-ui';
+import type { CreateRowKey } from 'naive-ui/es/data-table/src/interface';
+import { useThemeStore } from '@/store/modules/theme';
+
+defineOptions({
+  name: 'DataTable',
+  inheritAttrs: false
+});
+
+interface Props {
+  rowKey?: CreateRowKey<any>;
+}
+
+defineProps<Props>();
+
+const { table } = useThemeStore();
+const attrs: DataTableProps = useAttrs();
+</script>
+
+<template>
+  <NDataTable
+    :bordered="table.bordered"
+    :bottom-bordered="table.bottomBordered"
+    :single-column="table.singleColumn"
+    :single-line="table.singleLine"
+    :size="table.size"
+    :striped="table.striped"
+    :row-key="rowKey"
+    v-bind="attrs"
+  />
+</template>
+
+<style scoped></style>

src/constants/app.ts

@@ -63,3 +63,11 @@ export const resetCacheStrategyRecord: Record<UnionKey.ResetCacheStrategy, App.I
 export const resetCacheStrategyOptions = transformRecordToOption(resetCacheStrategyRecord);
 
 export const DARK_CLASS = 'dark';
+
+export const themeTableSizeRecord: Record<UnionKey.ThemeTableSize, App.I18n.I18nKey> = {
+  small: 'theme.table.size.small',
+  medium: 'theme.table.size.medium',
+  large: 'theme.table.size.large'
+};
+
+export const themeTableSizeOptions = transformRecordToOption(themeTableSizeRecord);

src/layouts/modules/theme-drawer/index.vue

@@ -6,6 +6,7 @@ import LayoutMode from './modules/layout-mode.vue';
 import ThemeColor from './modules/theme-color.vue';
 import PageFun from './modules/page-fun.vue';
 import ConfigOperation from './modules/config-operation.vue';
+import TableProps from './modules/table-props.vue';
 
 defineOptions({
   name: 'ThemeDrawer'
@@ -21,6 +22,7 @@ const appStore = useAppStore();
       <LayoutMode />
       <ThemeColor />
       <PageFun />
+      <TableProps />
       <template #footer>
         <ConfigOperation />
       </template>

src/layouts/modules/theme-drawer/modules/table-props.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { themeTableSizeOptions } from '@/constants/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { translateOptions } from '@/utils/common';
+import { $t } from '@/locales';
+import SettingItem from '../components/setting-item.vue';
+
+defineOptions({
+  name: 'TableProps'
+});
+
+const themeStore = useThemeStore();
+</script>
+
+<template>
+  <NDivider>{{ $t('theme.tablePropsTitle') }}</NDivider>
+  <TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
+    <SettingItem key="0" :label="$t('theme.table.size.title')">
+      <NSelect
+        v-model:value="themeStore.table.size"
+        :options="translateOptions(themeTableSizeOptions)"
+        size="small"
+        class="w-120px"
+      />
+    </SettingItem>
+    <SettingItem key="1" :label="$t('theme.table.bordered')">
+      <NSwitch v-model:value="themeStore.table.bordered" />
+    </SettingItem>
+    <SettingItem key="2" :label="$t('theme.table.bottomBordered')">
+      <NSwitch v-model:value="themeStore.table.bottomBordered" />
+    </SettingItem>
+    <SettingItem key="3" :label="$t('theme.table.singleColumn')">
+      <NSwitch v-model:value="themeStore.table.singleColumn" :checked-value="false" :unchecked-value="true" />
+    </SettingItem>
+    <SettingItem key="4" :label="$t('theme.table.singleLine')">
+      <NSwitch v-model:value="themeStore.table.singleLine" :checked-value="false" :unchecked-value="true" />
+    </SettingItem>
+    <SettingItem key="5" :label="$t('theme.table.striped')">
+      <NSwitch v-model:value="themeStore.table.striped" />
+    </SettingItem>
+  </TransitionGroup>
+</template>
+
+<style scoped></style>

src/locales/langs/en-us.ts

@@ -165,6 +165,20 @@ const local: App.I18n.Schema = {
       visible: 'Watermark Full Screen Visible',
       text: 'Watermark Text'
     },
+    tablePropsTitle: 'Table Props',
+    table: {
+      size: {
+        title: 'Table Size',
+        small: 'Small',
+        medium: 'Medium',
+        large: 'Large'
+      },
+      bordered: 'Bordered',
+      bottomBordered: 'Bottom Bordered',
+      singleColumn: 'Single Column',
+      singleLine: 'Single Line',
+      striped: 'Striped'
+    },
     themeDrawerTitle: 'Theme Configuration',
     pageFunTitle: 'Page Function',
     resetCacheStrategy: {

src/locales/langs/zh-cn.ts

@@ -165,6 +165,20 @@ const local: App.I18n.Schema = {
       visible: '显示全屏水印',
       text: '水印文本'
     },
+    tablePropsTitle: '表格配置',
+    table: {
+      size: {
+        title: '表格大小',
+        small: '小',
+        medium: '中',
+        large: '大'
+      },
+      bordered: '边框',
+      bottomBordered: '底部边框',
+      singleColumn: '设定行的分割线',
+      singleLine: '设定列的分割线',
+      striped: '斑马线条纹'
+    },
     themeDrawerTitle: '主题配置',
     pageFunTitle: '页面功能',
     resetCacheStrategy: {

src/theme/settings.ts

@@ -57,6 +57,14 @@ export const themeSettings: App.Theme.ThemeSetting = {
     visible: import.meta.env.VITE_WATERMARK === 'Y',
     text: 'RuoYi-Vue-Plus'
   },
+  table: {
+    bordered: true,
+    bottomBordered: true,
+    singleColumn: false,
+    singleLine: true,
+    size: 'small',
+    striped: false
+  },
   tokens: {
     light: {
       colors: {

src/typings/app.d.ts

@@ -109,6 +109,20 @@ declare namespace App {
         /** Watermark text */
         text: string;
       };
+      table: {
+        /** Whether to show the table border */
+        bordered: boolean;
+        /** Whether to show the table bottom border */
+        bottomBordered: boolean;
+        /** Whether to show the table single column */
+        singleColumn: boolean;
+        /** Whether to show the table single line */
+        singleLine: boolean;
+        /** Whether to show the table size */
+        size: UnionKey.ThemeTableSize;
+        /** Whether to show the table striped */
+        striped: boolean;
+      };
       /** define some theme settings tokens, will transform to css variables */
       tokens: {
         light: ThemeSettingToken;
@@ -426,6 +440,15 @@ declare namespace App {
           visible: string;
           text: string;
         };
+        tablePropsTitle: string;
+        table: {
+          size: { title: string } & Record<UnionKey.ThemeTableSize, string>;
+          bordered: string;
+          bottomBordered: string;
+          singleColumn: string;
+          singleLine: string;
+          striped: string;
+        };
         themeDrawerTitle: string;
         pageFunTitle: string;
         resetCacheStrategy: { title: string } & Record<UnionKey.ResetCacheStrategy, string>;

src/typings/components.d.ts

@@ -14,6 +14,7 @@ declare module 'vue' {
     ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
     CountTo: typeof import('./../components/custom/count-to.vue')['default']
     DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
+    DataTable: typeof import('./../components/common/data-table.vue')['default']
     DeptTree: typeof import('./../components/custom/dept-tree.vue')['default']
     DeptTreeSelect: typeof import('./../components/custom/dept-tree-select.vue')['default']
     DictRadio: typeof import('./../components/custom/dict-radio.vue')['default']

src/typings/union-key.d.ts

@@ -51,6 +51,15 @@ declare namespace UnionKey {
    */
   type ThemeTabMode = import('@sa/materials').PageTabMode;
 
+  /**
+   * The table size
+   *
+   * - small: small size
+   * - medium: medium size
+   * - large: large size
+   */
+  type ThemeTableSize = 'small' | 'medium' | 'large';
+
   /** Unocss animate key */
   type UnoCssAnimateKey =
     | 'pulse'

src/views/demo/demo/index.vue

@@ -184,11 +184,10 @@ async function handleExport() {
           @refresh="getData"
         />
       </template>
-      <NDataTable
+      <DataTable
         v-model:checked-row-keys="checkedRowKeys"
         :columns="columns"
         :data="data"
-        size="small"
         :flex-height="!appStore.isMobile"
         :scroll-x="962"
         :loading="loading"

src/views/demo/tree/index.vue

@@ -209,12 +209,11 @@ function handleExport() {
           </template>
         </TableHeaderOperation>
       </template>
-      <NDataTable
+      <DataTable
         v-model:checked-row-keys="checkedRowKeys"
         v-model:expanded-row-keys="expandedRowKeys"
         :columns="columns"
         :data="data"
-        size="small"
         :flex-height="!appStore.isMobile"
         :scroll-x="962"
         :loading="loading"