feat(projects): 添加表格页面示例

src/AppProvider.vue

@@ -18,9 +18,16 @@
 import { NConfigProvider, NElement, zhCN, dateZhCN } from 'naive-ui';
 import { NaiveProvider } from '@/components';
 import { useThemeStore } from '@/store';
-import { useDarkMode } from '@/composables';
+import { useDarkMode, useGlobalEvent } from '@/composables';
 
 const theme = useThemeStore();
 const { naiveTheme } = useDarkMode();
+const { initGlobalEventListener } = useGlobalEvent();
+
+function init() {
+  initGlobalEventListener();
+}
+
+init();
 </script>
 <style></style>

src/components/common/LoadingEmptyWrapper/index.vue

@@ -6,19 +6,19 @@
         <n-spin :show="true" :size="loadingSize" />
       </div>
       <div v-show="isEmpty" class="absolute-center">
-        <div class="relative text-primary" :class="emptyNetworkClass">
-          <svg-empty-data />
-          <p class="absolute left-0 bottom-[20%] w-full text-center">{{ emptyDesc }}</p>
+        <div class="relative" :class="emptyNetworkClass">
+          <svg-empty-data class="text-primary" />
+          <p class="absolute-lb w-full text-center">{{ emptyDesc }}</p>
         </div>
       </div>
       <div v-show="!network" class="absolute-center">
         <div
-          class="relative text-primary"
+          class="relative"
           :class="[{ 'cursor-pointer': showNetworkReload }, emptyNetworkClass]"
           @click="handleReload"
         >
-          <svg-network-error />
-          <p class="absolute-lb bottom-[20%] w-full text-center">{{ networkErrorDesc }}</p>
+          <svg-network-error class="text-primary" />
+          <p class="absolute-lb w-full text-center">{{ networkErrorDesc }}</p>
         </div>
       </div>
     </div>

src/composables/events/global.ts

@@ -2,11 +2,11 @@ import { useAuthChangeEvent } from './auth';
 
 export function useGlobalEvent() {
   /** 初始化全局监听事件 */
-  function initGlobalListener() {
+  function initGlobalEventListener() {
     useAuthChangeEvent();
   }
 
   return {
-    initGlobalListener
+    initGlobalEventListener
   };
 }

src/interface/common/route.ts

@@ -31,6 +31,7 @@ export type RouteKey =
   | 'component'
   | 'component_button'
   | 'component_card'
+  | 'component_table'
   | 'multi-menu'
   | 'multi-menu_first'
   | 'multi-menu_first_second'

src/router/constant/index.ts

@@ -211,6 +211,14 @@ const routeConstMap = new Map<RouteKey, RouteConst>([
       title: '卡片'
     }
   ],
+  [
+    'component_table',
+    {
+      name: 'component_table',
+      path: '/component/table',
+      title: '表格'
+    }
+  ],
   [
     'multi-menu',
     {

src/router/modules/component.ts

@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';
 import { BasicLayout } from '@/layouts';
-import { ComponentButton, ComponentCard } from '@/views';
+import { ComponentButton, ComponentCard, ComponentTable } from '@/views';
 import { routeName, routePath, routeTitle } from '../constant';
 
 const component: RouteRecordRaw = {
@@ -33,6 +33,16 @@ const component: RouteRecordRaw = {
         requiresAuth: true,
         keepAlive: true
       }
+    },
+    {
+      name: routeName('component_table'),
+      path: routePath('component_table'),
+      component: ComponentTable,
+      meta: {
+        title: routeTitle('component_table'),
+        requiresAuth: true,
+        keepAlive: true
+      }
     }
   ]
 };

src/views/component/index.ts

@@ -1,4 +1,5 @@
 import ComponentButton from './button/index.vue';
 import ComponentCard from './card/index.vue';
+import ComponentTable from './table/index.vue';
 
-export { ComponentButton, ComponentCard };
+export { ComponentButton, ComponentCard, ComponentTable };

src/views/component/table/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <n-card title="表格" class="h-full shadow-sm rounded-16px">
+      <n-space :vertical="true">
+        <n-space>
+          <n-button @click="getDataSource">有数据</n-button>
+          <n-button @click="getEmptyDataSource">空数据</n-button>
+        </n-space>
+        <loading-empty-wrapper class="h-480px" :loading="loading" :empty="empty">
+          <n-data-table :columns="columns" :data="dataSource" :flex-height="true" class="h-480px" />
+        </loading-empty-wrapper>
+      </n-space>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { NCard, NSpace, NButton, NDataTable } from 'naive-ui';
+import type { DataTableColumn } from 'naive-ui';
+import { LoadingEmptyWrapper } from '@/components';
+import { useLoadingEmpty } from '@/hooks';
+import { getRandomInterger } from '@/utils';
+
+interface DataSource {
+  name: string;
+  age: number;
+  address: string;
+}
+
+const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty();
+
+const columns: DataTableColumn[] = [
+  {
+    title: 'Name',
+    key: 'name',
+    align: 'center'
+  },
+  {
+    title: 'Age',
+    key: 'age'
+  },
+  {
+    title: 'Address',
+    key: 'address'
+  }
+];
+
+const dataSource = ref<DataSource[]>([]);
+
+function createDataSource(): DataSource[] {
+  return Array(100)
+    .fill(1)
+    .map((item, index) => {
+      return {
+        name: `Name${index}`,
+        age: getRandomInterger(30, 20),
+        address: '中国'
+      };
+    });
+}
+
+function getDataSource() {
+  startLoading();
+  setTimeout(() => {
+    dataSource.value = createDataSource();
+    endLoading();
+    setEmpty(!dataSource.value.length);
+  }, 1000);
+}
+
+function getEmptyDataSource() {
+  startLoading();
+  setTimeout(() => {
+    dataSource.value = [];
+    endLoading();
+    setEmpty(!dataSource.value.length);
+  }, 1000);
+}
+
+onMounted(() => {
+  getDataSource();
+});
+</script>
+<style scoped></style>