修复部分问题

CHANGELOG.md

@@ -7,11 +7,16 @@
 - 修复移动端登陆页显示问题
 - 改进了一些方法逻辑的问题
 - 修改移动端自适应配置方案(现在使用 postcss-px-to-viewport)，默认不启用
+- 修复 RayTable 实例方法暴露错误
+- 修复 sideBarLogo.icon 为空时警告问题，现在未配置该属性则不会渲染图标
+- 修复 RayTable 演示页面 action 方法失效问题
 
 ### Feats
 
 - 新增加载动画
-- 新增配置入口(cfg.ts)，现在可以直接配置首屏加载动画一些信息
+- 现在可以直接配置首屏加载动画一些信息(cfg.ts)
+- 新增对于 ejs 支持
+- 补充一些细节注释
 
 ## 3.1.5
 

cfg.ts

@@ -1,3 +1,41 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-04-06
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 系统配置文件入口
+ *
+ * 配置范围:
+ *   - 构建: 开发构建、打包构建、预览构建、体积分析构建等
+ *   - 系统: 根路由、标题、浏览器标题、别名等
+ *   - 请求: 代理配置
+ *
+ * 如果需要新增相关内容, 需要在 src/types/cfg.ts 中进行类型配置
+ * ```
+ * interface Config // config 内容类型配置
+ *
+ * interface AppConfig // __APP_CFG__ 内容配置
+ * ```
+ *
+ * __APP_CFG__ 说明
+ * ```
+ * 该属性是用于全局注入的配置方法
+ *
+ * const { rootRoute } = __APP_CFG__
+ *
+ * 以上例子展示, 从 __APP_CFG__ 中解构取出 rootRoute 根路由配置信息
+ * __APP_CFG__ 会被挂载于全局变量 `window` 下(vite define 默认是挂载于 window 下)
+ * ```
+ */
+
 import path from 'node:path'
 
 import {

src/App.tsx

@@ -16,8 +16,7 @@ const App = defineComponent({
 
     /** 同步主题色变量至 body, 如果未获取到缓存值则已默认值填充 */
     const syncPrimaryColorToBody = () => {
-      /** 默认值 */
-      const { primaryColor } = __APP_CFG__
+      const { primaryColor } = __APP_CFG__ // 默认主题色
       const body = document.body
 
       const primaryColorOverride = getCache('piniaSettingStore', 'localStorage')
@@ -26,11 +25,13 @@ const App = defineComponent({
         'primaryColorOverride.common.primaryColor',
       )
 
+      /** 设置全局主题色 css 变量 */
       body.style.setProperty('--ray-theme-primary-color', _p || primaryColor)
     }
 
     /** 隐藏加载动画 */
     const hiddenLoadingAnimation = () => {
+      /** pre-loading-animation 是默认 id */
       const el = document.getElementById('pre-loading-animation')
 
       if (el) {
@@ -43,6 +44,7 @@ const App = defineComponent({
     syncPrimaryColorToBody()
     hiddenLoadingAnimation()
 
+    /** 切换主题时, 同步更新 body class 以便于进行自定义 css 配置 */
     watch(
       () => themeValue.value,
       (newData) => {

src/components/RayTable/index.ts

@@ -1,3 +1,4 @@
 import RayTable from './src/index'
 
 export default RayTable
+export type { RayTableInst } from './src/type'

src/components/RayTable/src/index.tsx

@@ -36,7 +36,7 @@
 
 import './index.scss'
 
-import { NDataTable, NCard, NDropdown, NDivider } from 'naive-ui'
+import { NDataTable, NCard, NDropdown } from 'naive-ui'
 import TableSetting from './components/TableSetting/index'
 import TableAction from './components/TableAction/index'
 import TableSize from './components/TableSize/index'
@@ -51,12 +51,15 @@ import type { ActionOptions } from './type'
 import type { WritableComputedRef } from 'vue'
 import type { DropdownOption } from 'naive-ui'
 import type { ExportExcelHeader } from '@use-utils/xlsx'
+import type { DataTableInst } from 'naive-ui'
 
 const RayTable = defineComponent({
   name: 'RayTable',
   props: props,
   emits: ['update:columns', 'menuSelect', 'exportSuccess', 'exportError'],
   setup(props, { emit }) {
+    const rayTableInstance = ref<DataTableInst>()
+
     const tableUUID = uuid() // 表格 id, 用于打印表格
     const rayTableUUID = uuid() // RayTable id, 用于全屏表格
     const modelRightClickMenu = computed(() => props.rightClickMenu)
@@ -205,6 +208,7 @@ const RayTable = defineComponent({
       cssVars,
       handleChangeTableSize,
       tableSize,
+      rayTableInstance,
     }
   },
   render() {
@@ -219,14 +223,14 @@ const RayTable = defineComponent({
           default: () => (
             <>
               <NDataTable
+                ref="rayTableInstance"
                 id={this.tableUUID}
                 {...this.$props}
                 rowProps={this.handleRowProps.bind(this)}
                 size={this.tableSize}
               >
                 {{
-                  empty: () => this.$slots?.empty?.(),
-                  loading: () => this.$slots?.loading?.(),
+                  ...this.$slots,
                 }}
               </NDataTable>
               {this.showMenu ? (

src/components/RayTable/src/type.ts

@@ -4,6 +4,7 @@ import type {
   DropdownDividerOption,
   DropdownRenderOption,
   DataTableBaseColumn,
+  DataTableInst,
 } from 'naive-ui'
 import type { ComputedRef, WritableComputedRef, VNode } from 'vue'
 
@@ -70,3 +71,7 @@ export declare type VNodeChild = VNodeChildAtom | VNodeArrayChildren
 export declare type TableColumnTitle =
   | string
   | ((column: DataTableBaseColumn) => VNodeChild)
+
+export declare interface RayTableInst {
+  rayTableInstance: DataTableInst
+}

src/language/index.ts

@@ -40,6 +40,7 @@ import type { App } from 'vue'
  *
  * @remark 自动归并 locales 下所有 json 语言包, 需要注意语言包名称问题(必须统一)
  * @remark 注意 key 的重复问题, 如果需要多模块区分语言包, 则需要保证 key 的唯一性, 否则会被覆盖
+ * @remark 使用该方法会导致子包中的路径不能使用 i18n ally 语法提示
  */
 export const getMatchLanguageModule = () => {
   const msg = {}

src/router/permission.ts

@@ -48,8 +48,15 @@ export const permissionRouter = (router: Router) => {
     const role = computed(() => signinCallback.value.role)
     const { meta } = to
 
+    /**
+     *
+     * 检查是否有权限, 如果权限不匹配则重定向至首页(默认为 dashboard)
+     * 权限匹配使用严格比对, 对大小写、空格等敏感
+     */
     const hasRole = () => {
+      /** 如果未设置权限则默认无需鉴权 */
       if (meta.role) {
+        /** 空权限列表默认无需鉴权 */
         if (meta.role.length === 0) {
           return true
         } else {

src/router/routes.ts

@@ -19,6 +19,7 @@ export const constantRoutes = [
     children: childrenRoutes,
   },
   {
+    /** 错误页面(404) */
     path: '/:catchAll(.*)',
     name: 'error-page',
     component: () => import('@/views/error/index'),

src/store/modules/menu/index.ts

@@ -244,11 +244,15 @@ export const useMenu = defineStore(
     /**
      *
      * @remark 置空 menuTagOptions
+     *
+     * Q: 为什么不直接使用 spliceMenTagOptions 方法置空菜单标签?
+     * A: 因为直接将 menuTagOptions 指向新的地址会快一点
      */
     const emptyMenuTagOptions = () => {
       menuState.menuTagOptions = []
     }
 
+    /** 监听路由变化并且更新路由菜单与菜单标签 */
     watch(
       () => route.fullPath,
       (newData) => {

src/store/modules/setting.ts

@@ -1,5 +1,6 @@
 import { getDefaultLocal } from '@/language/index'
 import { setCache } from '@use-utils/cache'
+import { set } from 'lodash-es'
 
 import type { ConditionalPick } from '@/types/type-utils'
 import type { GlobalThemeOverrides } from 'naive-ui'
@@ -19,6 +20,7 @@ export const useSetting = defineStore(
   'setting',
   () => {
     const { primaryColor } = __APP_CFG__
+    const { locale } = useI18n()
 
     const settingState = reactive<SettingState>({
       drawerPlacement: 'right' as NaiveDrawerPlacement,
@@ -35,7 +37,6 @@ export const useSetting = defineStore(
       breadcrumbSwitch: true, // 面包屑开关
       localeLanguage: getDefaultLocal(),
     })
-    const { locale } = useI18n()
 
     /** 修改当前语言 */
     const updateLocale = (key: string) => {
@@ -47,8 +48,11 @@ export const useSetting = defineStore(
 
     /** 切换主题色 */
     const changePrimaryColor = (value: string) => {
-      settingState.primaryColorOverride.common!.primaryColor = value
-      settingState.primaryColorOverride.common!.primaryColorHover = value
+      set(
+        settingState,
+        'settingState.primaryColorOverride.common.primaryColorHover',
+        value,
+      )
 
       const body = document.body
 
@@ -62,7 +66,6 @@ export const useSetting = defineStore(
      * @param key `settingState` 对应开关属性值
      *
      * @remark 仅适用于值为 `boolean` 的切换
-     * @remark 不知道如何写: 返回属性中所有指定类型值... 如果有知道的一定要私信告知一下
      */
     const changeSwitcher = (
       bool: boolean,

src/store/modules/signin.ts

@@ -15,6 +15,8 @@
  * 可以存储: 头像, 权限, 以及基于你项目实际情况的一些附带信息
  *
  * 使用 sessionStorage 缓存部分用户信息
+ *
+ * 默认仅缓存 signinCallback 属性
  */
 
 import { isEmpty } from 'lodash-es'

src/views/table/index.tsx

@@ -11,30 +11,23 @@
 
 import {
   NLayout,
-  NCard,
   NTag,
   NButton,
   NGridItem,
   NSelect,
   NInput,
   NDatePicker,
-  NInputNumber,
-  NSpace,
   NSwitch,
-  NDescriptions,
-  NDescriptionsItem,
   NP,
-  NH6,
   NH2,
-  NH3,
   NUl,
   NLi,
-  NOl,
 } from 'naive-ui'
 import RayTable from '@/components/RayTable/index'
 import RayCollapseGrid from '@/components/RayCollapseGrid/index'
 
 import type { DataTableColumns } from 'naive-ui'
+import type { RayTableInst } from '@/components/RayTable/index'
 
 type RowData = {
   key: number
@@ -47,6 +40,8 @@ type RowData = {
 const TableView = defineComponent({
   name: 'TableView',
   setup() {
+    const tableRef = ref<RayTableInst>()
+
     const baseColumns = [
       {
         title: 'Name',
@@ -83,6 +78,11 @@ const TableView = defineComponent({
           return tags
         },
       },
+      {
+        title: 'Remark',
+        key: 'remark',
+        width: 300,
+      },
       {
         title: 'Action',
         key: 'actions',
@@ -106,6 +106,7 @@ const TableView = defineComponent({
         age: 32,
         address: 'New York No. 1 Lake Park',
         tags: ['nice', 'developer'],
+        remark: '我是一条很长很长的备注',
       },
       {
         key: 1,
@@ -113,6 +114,7 @@ const TableView = defineComponent({
         age: 42,
         address: 'London No. 1 Lake Park',
         tags: ['wow'],
+        remark: '我是一条很长很长的备注',
       },
       {
         key: 2,
@@ -120,6 +122,7 @@ const TableView = defineComponent({
         age: 32,
         address: 'Sidney No. 1 Lake Park',
         tags: ['cool', 'teacher'],
+        remark: '我是一条很长很长的备注',
       },
     ])
     const tableMenuOptions = [
@@ -144,6 +147,10 @@ const TableView = defineComponent({
       }
     }
 
+    onMounted(() => {
+      console.log(tableRef.value?.rayTableInstance)
+    })
+
     return {
       ...toRefs(state),
       tableData,
@@ -151,6 +158,7 @@ const TableView = defineComponent({
       baseColumns,
       tableMenuOptions,
       handleMenuSelect,
+      tableRef,
     }
   },
   render() {
@@ -221,6 +229,8 @@ const TableView = defineComponent({
         </RayCollapseGrid>
         <RayTable
           style="margin-top: 18px"
+          ref="tableRef"
+          scrollX={2000}
           title={h(
             NSwitch,
             {
@@ -229,7 +239,7 @@ const TableView = defineComponent({
             {},
           )}
           data={this.tableData}
-          columns={this.baseColumns}
+          v-model:columns={this.actionColumns}
           pagination={{
             pageSize: 10,
           }}
@@ -238,7 +248,7 @@ const TableView = defineComponent({
           onMenuSelect={this.handleMenuSelect.bind(this)}
         >
           {{
-            tableFooter: () => '表格的底部内容区域，有时候你可能会用上',
+            tableFooter: () => '表格的底部内容区域插槽，有时候你可能会用上',
           }}
         </RayTable>
       </NLayout>