做了一点大改动, RayTable表格暂未完成

locales/en-US.json

@@ -6,7 +6,8 @@
     "Error": "Error Page",
     "Echart": "Chart",
     "scrollReveal": "Scroll Reveal",
-    "Axios": "Axios Request"
+    "Axios": "Axios Request",
+    "Table": "Table"
   },
   "LayoutHeaderTooltipOptions": {
     "Reload": "Reload Current Page",

locales/zh-CN.json

@@ -6,7 +6,8 @@
     "Error": "错误页",
     "Echart": "可视化",
     "scrollReveal": "滚动动画",
-    "Axios": "请求"
+    "Axios": "请求",
+    "Table": "表格"
   },
   "LayoutHeaderTooltipOptions": {
     "Reload": "刷新当前页面",

package.json

@@ -24,7 +24,8 @@
     "screenfull": "^6.0.2",
     "vue": "^3.2.37",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.3"
+    "vue-router": "^4.1.3",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",

src/components/RayGlobalProvider/index.tsx

@@ -21,6 +21,7 @@ const GlobalProvider = defineComponent({
     const modelThemeValue = computed(() =>
       settingStore.themeValue ? darkTheme : null,
     )
+    const modelLocal = computed(() => settingStore.naiveLocal)
 
     const { message, notification, dialog, loadingBar } = createDiscreteApi(
       ['message', 'dialog', 'notification', 'loadingBar'],
@@ -39,6 +40,7 @@ const GlobalProvider = defineComponent({
     return {
       modelPrimaryColorOverride,
       modelThemeValue,
+      modelLocal,
     }
   },
   render() {
@@ -46,6 +48,8 @@ const GlobalProvider = defineComponent({
       <NConfigProvider
         themeOverrides={this.modelPrimaryColorOverride}
         theme={this.modelThemeValue}
+        locale={this.modelLocal.local}
+        dateLocal={this.modelLocal.dateLocal}
       >
         <NLoadingBarProvider>
           <NMessageProvider>

src/components/RayTable/index.ts

@@ -0,0 +1,4 @@
+import RayTable from './src/index'
+
+export * as Table from './src/type'
+export default RayTable

src/components/RayTable/src/components/TableSetting/index.tsx

@@ -0,0 +1,24 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2022-12-08
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import RayIcon from '@/components/RayIcon/index'
+
+const TableSetting = defineComponent({
+  name: 'TableSetting',
+  setup() {
+    return {}
+  },
+  render() {
+    return <></>
+  },
+})
+
+export default TableSetting

src/components/RayTable/src/index.scss

@@ -0,0 +1,5 @@
+.ray-table__setting {
+  cursor: pointer;
+  outline: none;
+  border: none;
+}

src/components/RayTable/src/index.tsx

@@ -0,0 +1,55 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2022-12-08
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+import { NDataTable, NCard } from 'naive-ui'
+import props from './props'
+import RayIcon from '@/components/RayIcon/index'
+
+const RayTable = defineComponent({
+  name: 'RayTable',
+  props: props,
+  setup(props) {
+    const modelRightClickMenu = computed(() => props.rightClickMenu)
+
+    provide('rayTableProvider', {
+      modelRightClickMenu,
+    })
+
+    return {}
+  },
+  render() {
+    return (
+      <NCard bordered={false}>
+        {{
+          default: () => (
+            <NDataTable {...this.$props}>
+              {{
+                empty: () => this.$slots?.empty,
+                loading: () => this.$slots?.loading,
+              }}
+            </NDataTable>
+          ),
+          header: () => this.title,
+          'header-extra': () => (
+            <RayIcon
+              customClassName="ray-table__setting"
+              name="setting"
+              size="18"
+            />
+          ),
+        }}
+      </NCard>
+    )
+  },
+})
+
+export default RayTable

src/components/RayTable/src/props.ts

@@ -0,0 +1,70 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2022-12-08
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { dataTableProps } from 'naive-ui'
+
+import type { PropType, VNode } from 'vue'
+import type { DropdownMixedOption } from './type'
+
+const rayTableProps = {
+  ...dataTableProps, // 继承 `data table props`
+  rightClickMenu: {
+    /**
+     *
+     * 表格右键菜单, 基于 `NDropdown` 实现
+     *
+     * 如果菜单内容长度为 `0` 则不会渲染
+     *
+     * 只需要传入对应的菜单配置项, 即可自动开启右键菜单功能
+     */
+    type: Array as PropType<DropdownMixedOption[]>,
+    default: () => [],
+  },
+  title: {
+    /**
+     *
+     * 表格标题
+     *
+     * 可以自定义渲染
+     */
+    type: String,
+    default: '',
+  },
+  action: {
+    /**
+     *
+     * 是否开启操作栏
+     *
+     * 默认开启
+     */
+    type: Boolean,
+    default: true,
+  },
+  actionExtra: {
+    /**
+     *
+     * 自定义拓展操作栏
+     *
+     * 暂时不开放
+     */
+    type: Object as PropType<VNode>,
+    default: () => ({}),
+  },
+} as const
+
+export default rayTableProps
+
+/**
+ *
+ * `Ray Table Props`
+ *
+ * 继承 `naive ui Data Table`
+ */

src/components/RayTable/src/type.ts

@@ -0,0 +1,15 @@
+import type {
+  DropdownOption,
+  DropdownGroupOption,
+  DropdownDividerOption,
+  DropdownRenderOption,
+  DataTableColumns,
+} from 'naive-ui'
+
+export interface ActionOptions extends DataTableColumns {}
+
+export type DropdownMixedOption =
+  | DropdownOption
+  | DropdownGroupOption
+  | DropdownDividerOption
+  | DropdownRenderOption

src/icons/table.svg

@@ -0,0 +1,8 @@
+<svg t="1670479387732" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4119" width="64" height="64">
+  <path fill="currentColor" d="M896.021502 255.956996 607.897867 255.956996c-17.717453 0-31.994625-14.277171-31.994625-31.994625 0-17.717453 14.277171-31.994625 31.994625-31.994625l287.951621 0c17.717453 0 31.994625 14.277171 31.994625 31.994625C928.016126 241.679825 913.738955 255.956996 896.021502 255.956996z" p-id="4120"></path>
+  <path fill="currentColor" d="M896.021502 415.930119 607.897867 415.930119c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l287.951621 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S913.738955 415.930119 896.021502 415.930119z" p-id="4121"></path>
+  <path fill="currentColor" d="M896.021502 672.05913 607.897867 672.05913c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l287.951621 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S913.738955 672.05913 896.021502 672.05913z" p-id="4122"></path>
+  <path fill="currentColor" d="M896.021502 832.032253 607.897867 832.032253c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l287.951621 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S913.738955 832.032253 896.021502 832.032253z" p-id="4123"></path>
+  <path fill="currentColor" d="M383.935495 479.919368 191.967747 479.919368c-52.980346 0-95.983874-43.003528-95.983874-95.983874L95.983874 191.967747c0-52.980346 43.003528-95.983874 95.983874-95.983874l191.967747 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 191.967747C479.919368 436.915841 436.915841 479.919368 383.935495 479.919368zM191.967747 159.973123c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 191.967747c0 17.545439 14.449185 31.994625 31.994625 31.994625l191.967747 0c17.545439 0 31.994625-14.449185 31.994625-31.994625L415.930119 191.967747c0-17.545439-14.449185-31.994625-31.994625-31.994625L191.967747 159.973123 191.967747 159.973123z" p-id="4124"></path>
+  <path fill="currentColor" d="M383.935495 928.016126 191.967747 928.016126c-52.980346 0-95.983874-43.003528-95.983874-95.983874L95.983874 639.892491c0-52.980346 43.003528-95.983874 95.983874-95.983874l191.967747 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 191.967747C479.919368 884.840585 436.915841 928.016126 383.935495 928.016126zM191.967747 607.897867c-17.545439 0-31.994625 14.277171-31.994625 31.994625l0 191.967747c0 17.717453 14.449185 31.994625 31.994625 31.994625l191.967747 0c17.545439 0 31.994625-14.277171 31.994625-31.994625L415.930119 639.892491c0-17.717453-14.449185-31.994625-31.994625-31.994625L191.967747 607.897867 191.967747 607.897867z" p-id="4125"></path>
+</svg>

src/language/index.ts

@@ -1,18 +1,43 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2022-12-08
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
 import { createI18n } from 'vue-i18n'
 import messages from '@intlify/unplugin-vue-i18n/messages' // 导入所有语言包
+import { zhCN, dateZhCN } from 'naive-ui' // 导入 `naive ui` 中文包
+import { enUS, dateEnUS } from 'naive-ui' // 导入 `naive ui` 英文包
 
 import { getCache } from '@use-utils/cache'
 
 import type { App } from 'vue'
 
-export const setupI18n = (app: App<Element>) => {
-  const _locales: string =
+/**
+ *
+ * @returns 获取当前环境默认语言
+ *
+ * @remak 未避免出现加载语言错误问题, 故而在 `main.ts` 注册时, 应优先加载 `i18n` 避免出现该问题
+ */
+export const useDefaultLocal = () => {
+  const locale: string =
     getCache('localeLanguage', 'localStorage') !== 'no'
       ? getCache('localeLanguage', 'localStorage')
       : 'zh-CN'
 
+  return locale
+}
+
+export const setupI18n = (app: App<Element>) => {
+  const locale = useDefaultLocal()
+
   const i18n = createI18n({
-    locale: _locales,
+    locale,
     allowComposition: true,
     messages,
   })
@@ -33,8 +58,54 @@ export const useLanguageOptions = () => [
 
 /**
  *
- * 注册 `vue-i18n`
- * 注意: 每次修改 `locales` 中的文件后, 需要重启项目
- * 预设 `localeLanguage` 作为缓存 `key`
- * 预设中文作为基础语言
+ * @param key 切换对应语言
+ * @returns 组件库对应语言包
+ *
+ * @remark 受打包体积影响. 如果有新的语言添加, 则需要手动引入对应语言包(https://www.naiveui.com/zh-CN/dark/docs/i18n)
+ */
+export const useNaiveLocal = (key: string) => {
+  switch (key) {
+    case 'zh-CN':
+      return {
+        local: zhCN,
+        dateLocal: dateZhCN,
+      }
+
+    case 'en-US':
+      return {
+        local: enUS,
+        dateLocal: dateEnUS,
+      }
+
+    default:
+      return {
+        local: zhCN,
+        dateLocal: dateZhCN,
+      }
+  }
+}
+
+/**
+ *
+ * @returns 当前环境语言组件库语言包
+ *
+ * @remark 获取默认语言包
+ */
+export const useDefaultNaiveLocal = () => {
+  const local = useDefaultLocal()
+
+  return useNaiveLocal(local)
+}
+
+/**
+ *
+ * 注册 `vue-i18n`
+ *
+ * 注意: 因使用 `i18n` 提供虚拟文件注入缘故, 每次修改 `locales` 中的文件后, 需要重启项目
+ *
+ * 预设 `localeLanguage` 作为缓存 `key`
+ *
+ * 预设中文作为基础语言
+ *
+ * `naive ui` 语言包切换
  */

src/layout/components/MenuTag/index.tsx

@@ -1,3 +1,14 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2022-12-08
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
 import './index.scss'
 import { NScrollbar, NTag, NSpace } from 'naive-ui'
 import { useMenu } from '@/store'
@@ -11,6 +22,12 @@ const MenuTag = defineComponent({
     const { menuTagOptions, menuKey } = storeToRefs(menuStore)
     const { menuModelValueChange, spliceMenTagOptions } = menuStore
 
+    /**
+     *
+     * @param idx 索引
+     *
+     * @remark 关闭 `tag` 菜单, 如果仅有一个则不能关闭
+     */
     const handleCloseTag = (idx: number) => {
       spliceMenTagOptions(idx)
 
@@ -24,6 +41,10 @@ const MenuTag = defineComponent({
       }
     }
 
+    /**
+     *
+     * @param item 当前菜单值
+     */
     const handleTagClick = (item: MenuOption) => {
       menuModelValueChange(item.key as string, item)
     }
@@ -46,8 +67,9 @@ const MenuTag = defineComponent({
                 curr.key !== '/dashboard' && this.menuTagOptions.length > 1
               }
               onClose={() => this.handleCloseTag(idx)}
-              type={curr.key === this.menuKey ? 'success' : 'default'}
+              type={curr.key === this.menuKey ? 'success' : 'info'}
               onClick={this.handleTagClick.bind(this, curr)}
+              bordered={false}
             >
               {typeof curr.label === 'function' ? curr.label() : curr.label}
             </NTag>

src/layout/components/SiderBar/Components/SettingDrawer/index.tsx

@@ -38,7 +38,7 @@ const SettingDrawer = defineComponent({
     const settingStore = useSetting()
 
     const { changePrimaryColor, changeSwitcher } = settingStore
-    const { themeValue, primaryColorOverride, menuTagLog } =
+    const { themeValue, primaryColorOverride, menuTagSwitch } =
       storeToRefs(settingStore)
 
     const modelShow = computed({
@@ -59,7 +59,7 @@ const SettingDrawer = defineComponent({
       changePrimaryColor,
       themeValue,
       primaryColorOverride,
-      menuTagLog,
+      menuTagSwitch,
       changeSwitcher,
     }
   },
@@ -129,9 +129,9 @@ const SettingDrawer = defineComponent({
             <NDescriptions labelPlacement="left" column={1}>
               <NDescriptionsItem label="显示多标签">
                 <NSwitch
-                  v-model:value={this.menuTagLog}
+                  v-model:value={this.menuTagSwitch}
                   onUpdateValue={(bool: boolean) =>
-                    this.changeSwitcher(bool, 'menuTagLog')
+                    this.changeSwitcher(bool, 'menuTagSwitch')
                   }
                 />
               </NDescriptionsItem>

src/layout/components/SiderBar/index.tsx

@@ -95,9 +95,9 @@ const SiderBar = defineComponent({
     ]
     const iconEventMap: IconEventMapOptions = {
       reload: () => {
-        changeSwitcher(false, 'reloadRouteLog')
+        changeSwitcher(false, 'reloadRouteSwitch')
 
-        setTimeout(() => changeSwitcher(true, 'reloadRouteLog'))
+        setTimeout(() => changeSwitcher(true, 'reloadRouteSwitch'))
       },
       setting: () => {
         showSettings.value = true

src/layout/index.tsx

@@ -12,12 +12,12 @@ const Layout = defineComponent({
   setup() {
     const menuStore = useSetting()
     const { height: windowHeight } = useWindowSize()
-    const modelReloadRoute = computed(() => menuStore.reloadRouteLog)
-    const modelMenuTagLog = computed(() => menuStore.menuTagLog)
+    const modelReloadRoute = computed(() => menuStore.reloadRouteSwitch)
+    const modelMenuTagSwitch = computed(() => menuStore.menuTagSwitch)
     const cssVarsRef = computed(() => {
       let cssVar = {}
 
-      if (menuStore.menuTagLog) {
+      if (menuStore.menuTagSwitch) {
         cssVar = {
           '--layout-content-height': 'calc(100% - 110px)',
         }
@@ -33,7 +33,7 @@ const Layout = defineComponent({
     return {
       windowHeight,
       modelReloadRoute,
-      modelMenuTagLog,
+      modelMenuTagSwitch,
       cssVarsRef,
     }
   },
@@ -47,7 +47,7 @@ const Layout = defineComponent({
           <LayoutMenu />
           <NLayout>
             <SiderBar />
-            {this.modelMenuTagLog ? <MenuTag /> : ''}
+            {this.modelMenuTagSwitch ? <MenuTag /> : ''}
             <NLayoutContent
               class="layout-content__router-view"
               nativeScrollbar={false}

src/main.ts

@@ -24,6 +24,8 @@ import { setupI18n } from './language/index'
 const setupTemplate = () => {
   const app = createApp(App)
 
+  setupI18n(app)
+
   setupStore(app)
 
   setupRouter(app)
@@ -32,8 +34,6 @@ const setupTemplate = () => {
 
   permissionRouter()
 
-  setupI18n(app)
-
   app.mount('#app')
 }
 
@@ -48,6 +48,8 @@ const setupWujieTemplate = () => {
   window.__WUJIE_MOUNT = () => {
     instance = createApp(App)
 
+    setupI18n(instance)
+
     setupStore(instance)
 
     setupRouter(instance)
@@ -56,8 +58,6 @@ const setupWujieTemplate = () => {
 
     permissionRouter()
 
-    setupI18n(instance)
-
     instance.mount('#app')
   }
 

src/router/modules/index.ts

@@ -4,8 +4,9 @@ import error from './error'
 import echart from './echart'
 import scrollReveal from './scroll-reveal'
 import axios from './axios'
+import table from './table'
 
-const routes = [dashboard, echart, axios, scrollReveal, error, reyl]
+const routes = [dashboard, echart, table, axios, scrollReveal, error, reyl]
 
 export default routes
 

src/router/modules/table.ts

@@ -0,0 +1,9 @@
+export default {
+  path: '/table',
+  name: 'table',
+  component: () => import('@/views/table/index'),
+  meta: {
+    i18nKey: 'Table',
+    icon: 'table',
+  },
+}

src/store/modules/setting.ts

@@ -1,3 +1,5 @@
+import { useNaiveLocal, useDefaultNaiveLocal } from '@/language/index'
+
 export const useSetting = defineStore(
   'setting',
   () => {
@@ -9,20 +11,29 @@ export const useSetting = defineStore(
         },
       },
       themeValue: false, // `true` 为黑夜主题, `false` 为白色主题
-      reloadRouteLog: true, // 刷新路由开关
-      menuTagLog: true, // 多标签页开关
+      reloadRouteSwitch: true, // 刷新路由开关
+      menuTagSwitch: true, // 多标签页开关
+      naiveLocal: useDefaultNaiveLocal(), // `naive ui` 语言包
     })
     const { locale } = useI18n()
 
     const updateLocale = (key: string) => {
       // TODO: 修改语言
       locale.value = key
+      settingState.naiveLocal = useNaiveLocal(key)
     }
 
     const changePrimaryColor = (value: string) => {
       settingState.primaryColorOverride.common.primaryColor = value
     }
 
+    /**
+     *
+     * @param bool 开关当前值
+     * @param key `settingState` 对应开关属性值
+     *
+     * @remark 仅适用于值为 `boolean` 的切换
+     */
     const changeSwitcher = (bool: boolean, key: keyof typeof settingState) => {
       ;(settingState[key] as unknown) = bool
     }

src/views/table/index.tsx

@@ -0,0 +1,38 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2022-12-08
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { NLayout, NCard } from 'naive-ui'
+import RayTable from '@/components/RayTable/index'
+
+const TableView = defineComponent({
+  name: 'TableView',
+  setup() {
+    return {}
+  },
+  render() {
+    return (
+      <NLayout>
+        <NCard title="RayTable">
+          该组件基于 Naive UI DataTable 组件封装. 实现右键菜单, 表格标题,
+          操作栏等功能
+        </NCard>
+        <NCard title="基础使用" style={['margin-top: 18px']}>
+          <RayTable title="基础表格" />
+        </NCard>
+        <NCard style={['margin-top: 18px']}>
+          <RayTable />
+        </NCard>
+      </NLayout>
+    )
+  },
+})
+
+export default TableView