diff --git a/README.md b/README.md index c1d4e24..97bf2f0 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ pnpm dev - 以文件夹为路由，读取该文件夹下 index.vue 的信息作为路由信息，其他文件会跳过，可以包含子文件夹作为嵌套路由 - 在 src/pages 的文件夹层级，作为菜单层级，路由层级最终只有 2 层(配合 keep-alive 缓存) -- 在 src/pages 目录下，以 _ 开头的文件夹作为 1 级路由，其他作为 2 级路由，也就是应用路由 +- 在 src/pages 目录下，以 \_ 开头的文件夹作为 1 级路由，其他作为 2 级路由，也就是应用路由 - 子文件夹下，只有 index.vue 文件有效，其他文件会忽略，这些文件可以作为子组件使用 - components 目录会被忽视。 - xxx.xx.xx 文件会被忽视，例如 index.my.vue 文件。 @@ -76,7 +76,7 @@ pnpm dev 目前支持的参数，如下： -```ts +````ts interface RouteMeta { /** * 页面标题 @@ -140,7 +140,7 @@ interface RouteMeta { */ link?: string; } -``` +```` ### 嵌套布局 @@ -174,8 +174,6 @@ interface RouteMeta { 用户登陆后获取的权限，应存储在 userStore.auth 字段中，在路由的 beforeEach 守卫中，会比较两个是否匹配，匹配上则继续，否则会显示如下 403 页面： -![Alt text](image.png) - ### 动态路由 相比于比较流行的加法挂载，我更倾向于减法挂载。即默认加载完所有路由，在 beforeEach 钩子根据权限移除不必要的路由。 @@ -190,20 +188,11 @@ interface RouteMeta { ```html - -{ - "meta": { - // 组件名字 - "name": "MyPage", - // 开启缓存 - "cache": true - } -} - + { "meta": { // 组件名字 "name": "MyPage", // 开启缓存 "cache": true } } ``` ### 条件加载 @@ -218,7 +207,7 @@ VITE_EXTENSION = my ### 图标样式 -基于 [UnoCSS]() 插件，可使用类似 TailwindCSS 的原子样式快速开发，同时默认安装icon-park-outline 图标库，只需引用类名即可得到 SVG 图标。这在路由菜单等需要动态渲染时非常有用，同时所有样式类和图标类都是按需打包的，示例： +基于 [UnoCSS]() 插件，可使用类似 TailwindCSS 的原子样式快速开发，同时默认安装 icon-park-outline 图标库，只需引用类名即可得到 SVG 图标。这在路由菜单等需要动态渲染时非常有用，同时所有样式类和图标类都是按需打包的，示例： ```html @@ -262,13 +251,13 @@ enum MediaEnum { const media = defineConstants([ { value: MediaEnum.VIDEO, - label: "视频", - color: "red", + label: '视频', + color: 'red', }, { value: MediaEnum.IMAGE, - label: "图片", - color: "blue", + label: '图片', + color: 'blue', }, ]); @@ -288,7 +277,7 @@ media.val(); // [1, 2] ``` + 提示：以上每个参数都有类型提示，原组件每个参数都可透传，封装遵循扩展而非限制原则。 ### 自动导入 diff --git a/image.png b/image.png deleted file mode 100644 index f5970a8..0000000 Binary files a/image.png and /dev/null differ diff --git a/scripts/vite/plugin-info.ts b/scripts/vite/plugin-info.ts index 6aeaa69..eb4a0ef 100644 --- a/scripts/vite/plugin-info.ts +++ b/scripts/vite/plugin-info.ts @@ -46,10 +46,10 @@ const getBuildInfo = async () => { const version = commits ? `${latestTag}.${commits}` : `v${pkg.version}`; const content = `欢迎访问！版本: ${version} 标识: ${hash} 构建: ${time}`; const style = `"color: #09f; font-weight: 900;", "font-size: 12px; color: #09f; font-family: ''"`; - const vString = `var __APP_VERSION__ = '${version}';\n`; - const hString = `var __APP_HASH__ = '${hash}';\n`; - const dString = `var __APP_DATE__ = '${time}';\n`; - const lString = `console.log(\`%c${LOGO} \n%c${content}\n\`, ${style});\n`; + const vString = `\n var __APP_VERSION__ = '${version}';\n`; + const hString = ` var __APP_HASH__ = '${hash}';\n`; + const dString = ` var __APP_DATE__ = '${time}';\n`; + const lString = ` console.log(\`%c${LOGO} \n%c${content}\n\`, ${style});\n`; return vString + hString + dString + lString; }; diff --git a/src/components/AnTable.1/index.ts b/src/components/AnTable.1/index.ts index ef10c2e..70f9359 100644 --- a/src/components/AnTable.1/index.ts +++ b/src/components/AnTable.1/index.ts @@ -1,5 +1,3 @@ export * from './Table'; export * from './useTable'; -export * from './useTableColumns'; -export * from './useSearchForm'; -export * from './useModiyForm'; \ No newline at end of file + diff --git a/src/components/AnTable.1/useModiyForm.tsx b/src/components/AnTable.1/useModiyForm.tsx index 0303225..077aecd 100644 --- a/src/components/AnTable.1/useModiyForm.tsx +++ b/src/components/AnTable.1/useModiyForm.tsx @@ -1,8 +1,8 @@ -import { FormItem, FormModalUseOptions, useFormModalProps, AnFormModalProps } from '@/components/AnForm'; -import { cloneDeep, merge } from 'lodash-es'; +import { AnFormModalProps, FormItem, FormModalUseOptions, useFormModalProps } from '@/components/AnForm'; +import { cloneDeep, defaults, merge } from 'lodash-es'; +import { AnTableInstance } from './Table'; import { ExtendFormItem } from './useSearchForm'; import { TableUseOptions } from './useTable'; -import { AnTableInstance } from './Table'; export type ModifyForm = Omit & { /** @@ -31,17 +31,24 @@ export function useModifyForm(options: TableUseOptions, createModel: Recordable, return undefined; } - for(const column of columns ?? []) { - if(column.type === 'button') { - const btn = column.buttons.find(i => i.type === 'modify') - if(!btn) { + for (const column of columns ?? []) { + if (column.type === 'button') { + const btn = column.buttons.find(i => i.type === 'modify'); + if (!btn) { column.buttons.unshift({ text: '修改', type: 'modify', onClick({ record }) { tableRef.value?.modifyRef?.open(record); - } - }) + }, + }); + } else { + const onClick = btn.onClick; + defaults(btn, { text: '修改' }); + btn.onClick = props => { + const data = onClick?.(props) ?? props.record; + tableRef.value?.modifyRef?.open(data); + }; } break; } diff --git a/src/components/AnTable.1/useTableColumns.tsx b/src/components/AnTable.1/useTableColumns.tsx index 5687b9b..7304272 100644 --- a/src/components/AnTable.1/useTableColumns.tsx +++ b/src/components/AnTable.1/useTableColumns.tsx @@ -182,7 +182,7 @@ function useTableIndexColumn() {} function useTableButtonColumn(column: TableButtonColumn & TableColumnData, tableRef: Ref) { const items: TableColumnButton[] = []; - defaultsDeep(column, { align: 'right' }); + defaultsDeep(column, { align: 'right', title: '操作' }); for (let button of column.buttons) { if (button.type === 'delete') { diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index 7e35cd3..c555ca3 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -71,8 +71,8 @@