Bunny-Cli/bunny-admin-element-thin
Bunny-Cli
/
bunny-admin-element-thin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 🚀 添加新的表格封装

This commit is contained in:
bunny 2024-09-04 14:59:06 +08:00
parent b2fed0a09b
commit 71ba1bb264
35 changed files with 1937 additions and 2389 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
.prettierrc.js
View File

@ -1,9 +1,39 @@
// @ts-check // @see: https://www.prettier.cn
/** @type {import("prettier").Config} */
export default { export default {
// 超过最大值换行
printWidth: 200,
// 缩进字节数
tabWidth: 1,
// 使用制表符而不是空格缩进行
useTabs: true,
// 结尾不用分号(true有，false没有)
semi: true,
// 使用单引号(true单引号，false双引号)
singleQuote: true,
// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
quoteProps: 'as-needed',
// 在对象，数组括号与文字之间加空格 "{ foo: bar }"
bracketSpacing: true, bracketSpacing: true,
singleQuote: false, // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
arrowParens: "avoid", trailingComma: 'all',
trailingComma: "none" // 在JSX中使用单引号而不是双引号
jsxSingleQuote: true,
// (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 ,always：不省略括号
arrowParens: 'avoid',
// 如果文件顶部已经有一个 doclock，这个选项将新建一行注释，并打上@format标记。
insertPragma: false,
// 指定要使用的解析器，不需要写文件开头的 @prettier
requirePragma: false,
// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
proseWrap: 'preserve',
// 在html中空格是否是敏感的 "css" - 遵守CSS显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
endOfLine: 'auto',
// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
rangeStart: 0,
rangeEnd: Infinity,
vueIndentScriptAndStyle: false, // Vue文件脚本和样式标签缩进
}; };

20
Dockerfile
View File

@ -1,20 +0,0 @@
FROM node:20-alpine as build-stage
WORKDIR /app
RUN corepack enable
RUN corepack prepare pnpm@latest --activate
RUN npm config set registry https://registry.npmmirror.com
COPY .npmrc package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile
COPY . .
RUN pnpm build
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

63
build/cdn.ts
View File

@ -1,4 +1,4 @@
import { Plugin as importToCDN } from "vite-plugin-cdn-import"; import { Plugin as importToCDN } from 'vite-plugin-cdn-import';
/** /**
* @description 打包时采用`cdn`模式，仅限外网使用（默认不采用，如果需要采用cdn模式，请在 .env.production 文件，将 VITE_CDN 设置成true） * @description 打包时采用`cdn`模式，仅限外网使用（默认不采用，如果需要采用cdn模式，请在 .env.production 文件，将 VITE_CDN 设置成true）
@ -7,54 +7,49 @@ import { Plugin as importToCDN } from "vite-plugin-cdn-import";
*/ */
export const cdn = importToCDN({ export const cdn = importToCDN({
//（prodUrl解释： name: 对应下面modules的name，version: 自动读取本地package.json中dependencies依赖中对应包的版本号，path: 对应下面modules的path，当然也可写完整路径，会替换prodUrl） //（prodUrl解释： name: 对应下面modules的name，version: 自动读取本地package.json中dependencies依赖中对应包的版本号，path: 对应下面modules的path，当然也可写完整路径，会替换prodUrl）
prodUrl: "https://cdn.bootcdn.net/ajax/libs/{name}/{version}/{path}", prodUrl: 'https://cdn.bootcdn.net/ajax/libs/{name}/{version}/{path}',
modules: [ modules: [
{ {
name: "vue", name: 'vue',
var: "Vue", var: 'Vue',
path: "vue.global.prod.min.js" path: 'vue.global.prod.min.js',
}, },
{ {
name: "vue-router", name: 'vue-router',
var: "VueRouter", var: 'VueRouter',
path: "vue-router.global.min.js" path: 'vue-router.global.min.js',
},
{
name: "vue-i18n",
var: "VueI18n",
path: "vue-i18n.runtime.global.prod.min.js"
}, },
// 项目中没有直接安装vue-demi，但是pinia用到了，所以需要在引入pinia前引入vue-demi（https://github.com/vuejs/pinia/blob/v2/packages/pinia/package.json#L77） // 项目中没有直接安装vue-demi，但是pinia用到了，所以需要在引入pinia前引入vue-demi（https://github.com/vuejs/pinia/blob/v2/packages/pinia/package.json#L77）
{ {
name: "vue-demi", name: 'vue-demi',
var: "VueDemi", var: 'VueDemi',
path: "index.iife.min.js" path: 'index.iife.min.js',
}, },
{ {
name: "pinia", name: 'pinia',
var: "Pinia", var: 'Pinia',
path: "pinia.iife.min.js" path: 'pinia.iife.min.js',
}, },
{ {
name: "element-plus", name: 'element-plus',
var: "ElementPlus", var: 'ElementPlus',
path: "index.full.min.js", path: 'index.full.min.js',
css: "index.min.css" css: 'index.min.css',
}, },
{ {
name: "axios", name: 'axios',
var: "axios", var: 'axios',
path: "axios.min.js" path: 'axios.min.js',
}, },
{ {
name: "dayjs", name: 'dayjs',
var: "dayjs", var: 'dayjs',
path: "dayjs.min.js" path: 'dayjs.min.js',
}, },
{ {
name: "echarts", name: 'echarts',
var: "echarts", var: 'echarts',
path: "echarts.min.js" path: 'echarts.min.js',
} },
] ],
}); });

23
build/optimize.ts
View File

@ -4,31 +4,12 @@
* 尤其当您禁用浏览器缓存时（这种情况只应该发生在调试阶段）必须将对应模块加入到 include里，否则会遇到开发环境切换页面卡顿的问题（vite 会认为它是一个新的依赖包会重新加载并强制刷新页面），因为它既无法使用浏览器缓存，又没有在本地 node_modules/.vite 里缓存 * 尤其当您禁用浏览器缓存时（这种情况只应该发生在调试阶段）必须将对应模块加入到 include里，否则会遇到开发环境切换页面卡顿的问题（vite 会认为它是一个新的依赖包会重新加载并强制刷新页面），因为它既无法使用浏览器缓存，又没有在本地 node_modules/.vite 里缓存
* 温馨提示：如果您使用的第三方库是全局引入，也就是引入到 src/main.ts 文件里，就不需要再添加到 include 里了，因为 vite 会自动将它们缓存到 node_modules/.vite * 温馨提示：如果您使用的第三方库是全局引入，也就是引入到 src/main.ts 文件里，就不需要再添加到 include 里了，因为 vite 会自动将它们缓存到 node_modules/.vite
*/ */
const include = [ const include = ['qs', 'mitt', 'dayjs', 'axios', 'pinia', 'vue-types', 'js-cookie', 'vue-tippy', 'pinyin-pro', 'sortablejs', '@vueuse/core', '@pureadmin/utils', 'responsive-storage'];
"qs",
"mitt",
"dayjs",
"axios",
"pinia",
"vue-i18n",
"vue-types",
"js-cookie",
"vue-tippy",
"pinyin-pro",
"sortablejs",
"@vueuse/core",
"@pureadmin/utils",
"responsive-storage"
];
/** /**
* 在预构建中强制排除的依赖项 * 在预构建中强制排除的依赖项
* 温馨提示：所有以 `@iconify-icons/` 开头引入的的本地图标模块，都应该加入到下面的 `exclude` 里，因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好 * 温馨提示：所有以 `@iconify-icons/` 开头引入的的本地图标模块，都应该加入到下面的 `exclude` 里，因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好
*/ */
const exclude = [ const exclude = ['@iconify-icons/ep', '@iconify-icons/ri', '@pureadmin/theme/dist/browser-utils'];
"@iconify-icons/ep",
"@iconify-icons/ri",
"@pureadmin/theme/dist/browser-utils"
];
export { include, exclude }; export { include, exclude };

54
build/plugins.ts
View File

@ -1,34 +1,24 @@
import { cdn } from "./cdn"; import { cdn } from './cdn';
import vue from "@vitejs/plugin-vue"; import vue from '@vitejs/plugin-vue';
import { pathResolve } from "./utils"; import { viteBuildInfo } from './info';
import { viteBuildInfo } from "./info"; import svgLoader from 'vite-svg-loader';
import svgLoader from "vite-svg-loader"; import type { PluginOption } from 'vite';
import type { PluginOption } from "vite"; import vueJsx from '@vitejs/plugin-vue-jsx';
import vueJsx from "@vitejs/plugin-vue-jsx"; import Inspector from 'vite-plugin-vue-inspector';
import Inspector from "vite-plugin-vue-inspector"; import { configCompressPlugin } from './compress';
import { configCompressPlugin } from "./compress"; import removeNoMatch from 'vite-plugin-router-warn';
import removeNoMatch from "vite-plugin-router-warn"; import { visualizer } from 'rollup-plugin-visualizer';
import { visualizer } from "rollup-plugin-visualizer"; import removeConsole from 'vite-plugin-remove-console';
import removeConsole from "vite-plugin-remove-console"; import { themePreprocessorPlugin } from '@pureadmin/theme';
import { themePreprocessorPlugin } from "@pureadmin/theme"; import { genScssMultipleScopeVars } from '../src/layout/theme';
import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite"; import { vitePluginFakeServer } from 'vite-plugin-fake-server';
import { genScssMultipleScopeVars } from "../src/layout/theme";
import { vitePluginFakeServer } from "vite-plugin-fake-server";
export function getPluginsList( export function getPluginsList(VITE_CDN: boolean, VITE_COMPRESSION: ViteCompression, VITE_PORT: number): PluginOption[] {
VITE_CDN: boolean,
VITE_COMPRESSION: ViteCompression,
VITE_PORT: number
): PluginOption[] {
const lifecycle = process.env.npm_lifecycle_event; const lifecycle = process.env.npm_lifecycle_event;
return [ return [
vue(), vue(),
// jsx、tsx语法支持 // jsx、tsx语法支持
vueJsx(), vueJsx(),
VueI18nPlugin({
jitCompilation: false,
include: [pathResolve("../locales/**")]
}),
// 按下Command(⌘)+Shift(⇧)，然后点击页面元素会自动打开本地IDE并跳转到对应的代码位置 // 按下Command(⌘)+Shift(⇧)，然后点击页面元素会自动打开本地IDE并跳转到对应的代码位置
Inspector(), Inspector(),
viteBuildInfo(VITE_PORT), viteBuildInfo(VITE_PORT),
@ -41,26 +31,24 @@ export function getPluginsList(
// mock支持 // mock支持
vitePluginFakeServer({ vitePluginFakeServer({
logger: false, logger: false,
include: "mock", include: 'mock',
infixName: false, infixName: false,
enableProd: true enableProd: true,
}), }),
// 自定义主题 // 自定义主题
themePreprocessorPlugin({ themePreprocessorPlugin({
scss: { scss: {
multipleScopeVars: genScssMultipleScopeVars(), multipleScopeVars: genScssMultipleScopeVars(),
extract: true extract: true,
} },
}), }),
// svg组件化支持 // svg组件化支持
svgLoader(), svgLoader(),
VITE_CDN ? cdn : null, VITE_CDN ? cdn : null,
configCompressPlugin(VITE_COMPRESSION), configCompressPlugin(VITE_COMPRESSION),
// 线上环境删除console // 线上环境删除console
removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }), removeConsole({ external: ['src/assets/iconfont/iconfont.js'] }),
// 打包分析 // 打包分析
lifecycle === "report" lifecycle === 'report' ? visualizer({ open: true, brotliSize: true, filename: 'report.html' }) : (null as any),
? visualizer({ open: true, brotliSize: true, filename: "report.html" })
: (null as any)
]; ];
} }

253
eslint.config.js
View File

@ -1,181 +1,176 @@
import js from "@eslint/js"; import js from '@eslint/js';
import pluginVue from "eslint-plugin-vue"; import pluginTypeScript from '@typescript-eslint/eslint-plugin';
import * as parserVue from "vue-eslint-parser"; import * as parserTypeScript from '@typescript-eslint/parser';
import configPrettier from "eslint-config-prettier"; import configPrettier from 'eslint-config-prettier';
import pluginPrettier from "eslint-plugin-prettier"; import { defineFlatConfig } from 'eslint-define-config';
import { defineFlatConfig } from "eslint-define-config"; import pluginPrettier from 'eslint-plugin-prettier';
import * as parserTypeScript from "@typescript-eslint/parser"; import pluginVue from 'eslint-plugin-vue';
import pluginTypeScript from "@typescript-eslint/eslint-plugin"; import * as parserVue from 'vue-eslint-parser';
export default defineFlatConfig([ export default defineFlatConfig([
{ {
...js.configs.recommended, ...js.configs.recommended,
ignores: [ ignores: ['**/.*', 'dist/*', '*.d.ts', 'public/*', 'src/assets/**', 'src/**/iconfont/**'],
"**/.*",
"dist/*",
"*.d.ts",
"public/*",
"src/assets/**",
"src/**/iconfont/**"
],
languageOptions: { languageOptions: {
globals: { globals: {
// index.d.ts // index.d.ts
RefType: "readonly", RefType: 'readonly',
EmitType: "readonly", EmitType: 'readonly',
TargetContext: "readonly", TargetContext: 'readonly',
ComponentRef: "readonly", ComponentRef: 'readonly',
ElRef: "readonly", ElRef: 'readonly',
ForDataType: "readonly", ForDataType: 'readonly',
AnyFunction: "readonly", AnyFunction: 'readonly',
PropType: "readonly", PropType: 'readonly',
Writable: "readonly", Writable: 'readonly',
Nullable: "readonly", Nullable: 'readonly',
NonNullable: "readonly", NonNullable: 'readonly',
Recordable: "readonly", Recordable: 'readonly',
ReadonlyRecordable: "readonly", ReadonlyRecordable: 'readonly',
Indexable: "readonly", Indexable: 'readonly',
DeepPartial: "readonly", DeepPartial: 'readonly',
Without: "readonly", Without: 'readonly',
Exclusive: "readonly", Exclusive: 'readonly',
TimeoutHandle: "readonly", TimeoutHandle: 'readonly',
IntervalHandle: "readonly", IntervalHandle: 'readonly',
Effect: "readonly", Effect: 'readonly',
ChangeEvent: "readonly", ChangeEvent: 'readonly',
WheelEvent: "readonly", WheelEvent: 'readonly',
ImportMetaEnv: "readonly", ImportMetaEnv: 'readonly',
Fn: "readonly", Fn: 'readonly',
PromiseFn: "readonly", PromiseFn: 'readonly',
ComponentElRef: "readonly", ComponentElRef: 'readonly',
parseInt: "readonly", parseInt: 'readonly',
parseFloat: "readonly" parseFloat: 'readonly',
} },
}, },
plugins: { plugins: {
prettier: pluginPrettier prettier: pluginPrettier,
}, },
rules: { rules: {
...configPrettier.rules, ...configPrettier.rules,
...pluginPrettier.configs.recommended.rules, ...pluginPrettier.configs.recommended.rules,
"no-debugger": "off", 'no-debugger': 'off',
"no-unused-vars": [
"error", 'no-unused-vars': [
'error',
{ {
argsIgnorePattern: "^_", argsIgnorePattern: '^_',
varsIgnorePattern: "^_" varsIgnorePattern: '^_',
} },
], ],
"prettier/prettier": [ 'prettier/prettier': [
"error", 'error',
{ {
endOfLine: "auto" endOfLine: 'auto',
} },
] ],
} },
}, },
{ {
files: ["**/*.?([cm])ts", "**/*.?([cm])tsx"], files: ['**/*.?([cm])ts', '**/*.?([cm])tsx'],
languageOptions: { languageOptions: {
parser: parserTypeScript, parser: parserTypeScript,
parserOptions: { parserOptions: {
sourceType: "module" sourceType: 'module',
} },
}, },
plugins: { plugins: {
"@typescript-eslint": pluginTypeScript '@typescript-eslint': pluginTypeScript,
}, },
rules: { rules: {
...pluginTypeScript.configs.strict.rules, ...pluginTypeScript.configs.strict.rules,
"@typescript-eslint/ban-types": "off", '@typescript-eslint/ban-types': 'off',
"@typescript-eslint/no-redeclare": "error", '@typescript-eslint/no-redeclare': 'error',
"@typescript-eslint/ban-ts-comment": "off", '@typescript-eslint/ban-ts-comment': 'off',
"@typescript-eslint/no-explicit-any": "off", '@typescript-eslint/no-explicit-any': 'off',
"@typescript-eslint/prefer-as-const": "warn", '@typescript-eslint/prefer-as-const': 'warn',
"@typescript-eslint/no-empty-function": "off", '@typescript-eslint/no-empty-function': 'off',
"@typescript-eslint/no-non-null-assertion": "off", '@typescript-eslint/no-non-null-assertion': 'off',
"@typescript-eslint/no-import-type-side-effects": "error", '@typescript-eslint/no-import-type-side-effects': 'error',
"@typescript-eslint/explicit-module-boundary-types": "off", '@typescript-eslint/explicit-module-boundary-types': 'off',
"@typescript-eslint/consistent-type-imports": [ '@typescript-eslint/consistent-type-imports': [
"error", 'error',
{ disallowTypeAnnotations: false, fixStyle: "inline-type-imports" } {
disallowTypeAnnotations: false,
fixStyle: 'inline-type-imports',
},
], ],
"@typescript-eslint/prefer-literal-enum-member": [ '@typescript-eslint/prefer-literal-enum-member': ['error', { allowBitwiseExpressions: true }],
"error", '@typescript-eslint/no-unused-vars': [
{ allowBitwiseExpressions: true } 'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
},
], ],
"@typescript-eslint/no-unused-vars": [ },
"error",
{
argsIgnorePattern: "^_",
varsIgnorePattern: "^_"
}
]
}
}, },
{ {
files: ["**/*.d.ts"], files: ['**/*.d.ts'],
rules: { rules: {
"eslint-comments/no-unlimited-disable": "off", 'eslint-comments/no-unlimited-disable': 'off',
"import/no-duplicates": "off", 'import/no-duplicates': 'off',
"unused-imports/no-unused-vars": "off" 'unused-imports/no-unused-vars': 'off',
} },
}, },
{ {
files: ["**/*.?([cm])js"], files: ['**/*.?([cm])js'],
rules: { rules: {
"@typescript-eslint/no-require-imports": "off", '@typescript-eslint/no-require-imports': 'off',
"@typescript-eslint/no-var-requires": "off" '@typescript-eslint/no-var-requires': 'off',
} },
}, },
{ {
files: ["**/*.vue"], files: ['**/*.vue'],
languageOptions: { languageOptions: {
globals: { globals: {
$: "readonly", $: 'readonly',
$$: "readonly", $$: 'readonly',
$computed: "readonly", $computed: 'readonly',
$customRef: "readonly", $customRef: 'readonly',
$ref: "readonly", $ref: 'readonly',
$shallowRef: "readonly", $shallowRef: 'readonly',
$toRef: "readonly" $toRef: 'readonly',
}, },
parser: parserVue, parser: parserVue,
parserOptions: { parserOptions: {
ecmaFeatures: { ecmaFeatures: {
jsx: true jsx: true,
},
extraFileExtensions: ['.vue'],
parser: '@typescript-eslint/parser',
sourceType: 'module',
}, },
extraFileExtensions: [".vue"],
parser: "@typescript-eslint/parser",
sourceType: "module"
}
}, },
plugins: { plugins: {
vue: pluginVue vue: pluginVue,
}, },
processor: pluginVue.processors[".vue"], processor: pluginVue.processors['.vue'],
rules: { rules: {
...pluginVue.configs.base.rules, ...pluginVue.configs.base.rules,
...pluginVue.configs["vue3-essential"].rules, ...pluginVue.configs['vue3-essential'].rules,
...pluginVue.configs["vue3-recommended"].rules, ...pluginVue.configs['vue3-recommended'].rules,
"no-undef": "off", 'no-undef': 'off',
"no-unused-vars": "off", 'no-unused-vars': 'off',
"vue/no-v-html": "off", 'vue/no-v-html': 'off',
"vue/require-default-prop": "off", 'vue/require-default-prop': 'off',
"vue/require-explicit-emits": "off", 'vue/require-explicit-emits': 'off',
"vue/multi-word-component-names": "off", 'vue/no-useless-template-attributes': 'off',
"vue/no-setup-props-reactivity-loss": "off", 'vue/multi-word-component-names': 'off',
"vue/html-self-closing": [ 'vue/no-setup-props-reactivity-loss': 'off',
"error", 'vue/html-self-closing': [
'error',
{ {
html: { html: {
void: "always", void: 'always',
normal: "always", normal: 'always',
component: "always" component: 'always',
},
svg: 'always',
math: 'always',
},
],
},
}, },
svg: "always",
math: "always"
}
]
}
}
]); ]);

15
lint-staged.config.js
View File

@ -1,10 +1,9 @@
// @ts-check
export default { export default {
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"], '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [ '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
"prettier --write--parser json" 'package.json': ['prettier --write'],
], '*.vue': ['eslint --fix', 'prettier --write', 'stylelint --fix'],
"package.json": ["prettier --write"], '*.{scss,less,styl,html}': ['stylelint --fix', 'prettier --write'],
"*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"], '*.md': ['prettier --write'],
"*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
"*.md": ["prettier --write"]
}; };

6
package.json
View File

@ -67,6 +67,7 @@
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^1.6.8", "axios": "^1.6.8",
"china-area-data": "^5.0.1", "china-area-data": "^5.0.1",
"commitlint": "^19.4.1",
"cropperjs": "^1.6.2", "cropperjs": "^1.6.2",
"dayjs": "^1.11.11", "dayjs": "^1.11.11",
"echarts": "^5.5.0", "echarts": "^5.5.0",
@ -97,7 +98,6 @@
"version-rocket": "^1.7.1", "version-rocket": "^1.7.1",
"vite-plugin-vue-inspector": "^5.1.3", "vite-plugin-vue-inspector": "^5.1.3",
"vue": "^3.4.27", "vue": "^3.4.27",
"vue-i18n": "^9.13.1",
"vue-json-pretty": "^2.4.0", "vue-json-pretty": "^2.4.0",
"vue-pdf-embed": "^2.0.3", "vue-pdf-embed": "^2.0.3",
"vue-router": "^4.3.2", "vue-router": "^4.3.2",
@ -108,7 +108,7 @@
"vue3-danmaku": "^1.6.0", "vue3-danmaku": "^1.6.0",
"vue3-puzzle-vcode": "^1.1.7", "vue3-puzzle-vcode": "^1.1.7",
"vuedraggable": "^4.1.0", "vuedraggable": "^4.1.0",
"vxe-table": "^4.6.9", "vxe-table": "^4.6.18",
"wavesurfer.js": "^7.7.13", "wavesurfer.js": "^7.7.13",
"xgplayer": "^3.0.17", "xgplayer": "^3.0.17",
"xlsx": "^0.18.5" "xlsx": "^0.18.5"
@ -122,7 +122,6 @@
"@iconify-icons/ep": "^1.2.12", "@iconify-icons/ep": "^1.2.12",
"@iconify-icons/ri": "^1.2.10", "@iconify-icons/ri": "^1.2.10",
"@iconify/vue": "^4.1.2", "@iconify/vue": "^4.1.2",
"@intlify/unplugin-vue-i18n": "^4.0.0",
"@pureadmin/theme": "^3.2.0", "@pureadmin/theme": "^3.2.0",
"@types/dagre": "^0.7.52", "@types/dagre": "^0.7.52",
"@types/gradient-string": "^1.1.6", "@types/gradient-string": "^1.1.6",
@ -140,7 +139,6 @@
"autoprefixer": "^10.4.19", "autoprefixer": "^10.4.19",
"boxen": "^7.1.1", "boxen": "^7.1.1",
"commitizen": "^4.2.4", "commitizen": "^4.2.4",
"commitlint": "^17.0.1",
"cssnano": "^7.0.1", "cssnano": "^7.0.1",
"cz-git": "^1.3.2", "cz-git": "^1.3.2",
"dagre": "^0.8.5", "dagre": "^0.8.5",

820
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

10
postcss.config.js
View File

@ -1,12 +1,12 @@
// @ts-check // @ts-check
/** @type {import('postcss-load-config').Config} */ /** @type {import("postcss-load-config").Config} */
export default { export default {
plugins: { plugins: {
"postcss-import": {}, 'postcss-import': {},
"tailwindcss/nesting": {}, 'tailwindcss/nesting': {},
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}) ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
} },
}; };

48
src/components/TableBar/src/TablePlus.vue
View File

@ -1,48 +0,0 @@
<template>
<div class="main">
<pure-table
ref="tableRef"
:adaptiveConfig="{ offsetBottom: 108 }"
:columns="column"
:data="dataList"
:header-cell-style="cellHeaderStyle"
:loading="loading"
:size="size"
adaptive
align-whole="center"
border
row-key="id"
table-layout="auto"
/>
</div>
</template>
<script lang="ts" setup>
import { cellHeaderStyle } from "@/components/TableBar/utils/tableStyle";
import PureTable from "@pureadmin/table";
import type { PropType } from "vue";
// * 传入数据
defineProps({
// 表格数据
dataList: {
type: Array<any>,
default: []
},
// 表格列字段
column: {
type: Array<any>,
default: []
},
loading: {
type: Boolean,
default: false
},
size: {
type: String as PropType<any>,
default: "default"
}
});
</script>
<style lang="scss" scoped></style>

259
src/components/TableBar/src/TablePlusBar.vue
View File

@ -1,34 +1,19 @@
<script lang="ts" setup> <script lang="ts" setup>
import { import { getCurrentInstance, nextTick, onMounted, PropType, ref, unref, watch } from 'vue';
getCurrentInstance, import { rendTipProps } from '@/components/TableBar/utils/tableConfig';
nextTick, import { cellHeaderStyle, getDropdownItemStyle, iconClass, topClass } from '@/components/TableBar/utils/tableStyle';
onMounted, import PureTable from '@pureadmin/table';
PropType, import { useRoute } from 'vue-router';
ref, import RefreshIcon from '@/assets/table-bar/refresh.svg?component';
unref, import CollapseIcon from '@/assets/table-bar/collapse.svg?component';
watch import SettingIcon from '@/assets/table-bar/settings.svg?component';
} from "vue"; import { cloneDeep, getKeyList, isBoolean, isFunction } from '@pureadmin/utils';
import { rendTipProps } from "@/components/TableBar/utils/tableConfig"; import DragIcon from '@/assets/table-bar/drag.svg?component';
import { import Sortable from 'sortablejs';
cellHeaderStyle, import { DeleteFilled, EditPen } from '@element-plus/icons-vue';
getDropdownItemStyle, import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
iconClass, import Refresh from '@iconify-icons/ep/refresh';
topClass import { FormInstance } from 'element-plus';
} from "@/components/TableBar/utils/tableStyle";
import PureTable from "@pureadmin/table";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
import CollapseIcon from "@/assets/table-bar/collapse.svg?component";
import SettingIcon from "@/assets/table-bar/settings.svg?component";
import { cloneDeep, getKeyList, isBoolean, isFunction } from "@pureadmin/utils";
import DragIcon from "@/assets/table-bar/drag.svg?component";
import Sortable from "sortablejs";
import { $t } from "@/plugins/i18n";
import { DeleteFilled, EditPen } from "@element-plus/icons-vue";
import { useRenderIcon } from "@/components/CommonIcon/src/hooks";
import Refresh from "@iconify-icons/ep/refresh";
import { FormInstance } from "element-plus";
// * 传入数据 // * 传入数据
const props = defineProps({ const props = defineProps({
@ -41,56 +26,55 @@ const props = defineProps({
// 表格头部查询 // 表格头部查询
tableQueryFormVisible: { type: Boolean, default: true }, tableQueryFormVisible: { type: Boolean, default: true },
// 页面字体大小，small | default | large // 页面字体大小，small | default | large
size: { type: String as PropType<any>, default: "default" }, size: { type: String as PropType<any>, default: 'default' },
// 分页器参数 // 分页器参数
pagination: { type: Object, default: Object }, pagination: { type: Object, default: Object },
// 选择行发生变化 // 选择行发生变化
handleSelectionChange: { handleSelectionChange: {
type: Function as PropType<Function>, type: Function as PropType<Function>,
default: () => {} default: () => {},
}, },
// 分页大小变化 // 分页大小变化
handleSizeChange: { onPageSizeChange: {
type: Function as PropType<Function>, type: Function as PropType<Function>,
default: () => {} default: () => {},
}, },
// 当前页变化 // 当前页变化
handleCurrentChange: { onPageCurrentChange: {
type: Function as PropType<Function>, type: Function as PropType<Function>,
default: () => {} default: () => {},
}, },
// 表单参数 // 表单参数
form: { form: {
type: Object as PropType<any>, type: Object as PropType<any>,
default: Object default: Object,
}, },
// 表格的key值 // 表格的key值
tableKey: { tableKey: {
type: [String, Number] as PropType<string | number>, type: [String, Number] as PropType<string | number>,
default: "0" default: '0',
}, },
// 表格标题 // 表格标题
tableTitle: { type: String, default: "" }, tableTitle: { type: String, default: '' },
// 表格修改 // 表格修改
tableEdit: { tableEdit: {
type: Function as PropType<Function>, type: Function as PropType<Function>,
default: () => {} default: () => {},
}, // 表格删除 }, // 表格删除
tableDelete: { tableDelete: {
type: Function as PropType<Function>, type: Function as PropType<Function>,
default: () => {} default: () => {},
}, },
// 刷新时 // 刷新时
onReFresh: { onReFresh: {
type: Function as PropType<Function>, type: Function as PropType<Function>,
default: () => {} default: () => {},
}, },
onSearch: { type: Function as PropType<any> }, onSearch: { type: Function as PropType<any> },
model: { type: Object as PropType<any> } model: { type: Object as PropType<any> },
}); });
const emit = defineEmits(["changeColumn"]); const emit = defineEmits(['changeColumn']);
const { t, locale } = useI18n();
const route = useRoute(); const route = useRoute();
// 是否全选 // 是否全选
const checkAll = ref(true); const checkAll = ref(true);
@ -100,16 +84,10 @@ const isIndeterminate = ref(false);
// 动态行 // 动态行
const dynamicColumns = ref(props.column); const dynamicColumns = ref(props.column);
// 过滤是否选中的列 // 过滤是否选中的列
const filterColumns = cloneDeep(props.column).filter(column => const filterColumns = cloneDeep(props.column).filter(column => (isBoolean(column?.hide) ? !column.hide : !(isFunction(column?.hide) && column?.hide())));
isBoolean(column?.hide)
? !column.hide
: !(isFunction(column?.hide) && column?.hide())
);
// 选择当前列 // 选择当前列
const checkedColumns = ref(getKeyList(cloneDeep(filterColumns), "label")); const checkedColumns = ref(getKeyList(cloneDeep(filterColumns), 'label'));
const checkColumnList = ref( const checkColumnList = ref(getKeyList(cloneDeep(dynamicColumns.value), 'label'));
getKeyList(cloneDeep(dynamicColumns.value), "label")
);
const instance = getCurrentInstance()!; const instance = getCurrentInstance()!;
const ruleFormRef = ref<FormInstance>(); const ruleFormRef = ref<FormInstance>();
@ -128,9 +106,7 @@ const handleTableSizeClick = (value: string) => {
const handleCheckAllChange = (val: boolean) => { const handleCheckAllChange = (val: boolean) => {
checkedColumns.value = val ? checkColumnList.value : []; checkedColumns.value = val ? checkColumnList.value : [];
isIndeterminate.value = false; isIndeterminate.value = false;
dynamicColumns.value.map(column => dynamicColumns.value.map(column => (val ? (column.hide = false) : (column.hide = true)));
val ? (column.hide = false) : (column.hide = true)
);
}; };
/** /**
@ -141,8 +117,7 @@ const handleCheckedColumnsChange = (value: string[]) => {
checkedColumns.value = value; checkedColumns.value = value;
const checkedCount = value.length; const checkedCount = value.length;
checkAll.value = checkedCount === checkColumnList.value.length; checkAll.value = checkedCount === checkColumnList.value.length;
isIndeterminate.value = isIndeterminate.value = checkedCount > 0 && checkedCount < checkColumnList.value.length;
checkedCount > 0 && checkedCount < checkColumnList.value.length;
}; };
/** /**
@ -150,9 +125,7 @@ const handleCheckedColumnsChange = (value: string[]) => {
* @param label * @param label
*/ */
const handleCheckColumnListChange = (label: string) => { const handleCheckColumnListChange = (label: string) => {
dynamicColumns.value.filter(item => item.label === label)[0].hide = !( dynamicColumns.value.filter(item => item.label === label)[0].hide = !(event.target as any).checked;
event.target as any
).checked;
}; };
/** /**
@ -173,12 +146,12 @@ const onReset = async () => {
checkAll.value = true; checkAll.value = true;
isIndeterminate.value = false; isIndeterminate.value = false;
// 当前选中的列 // 当前选中的列
checkedColumns.value = getKeyList(cloneDeep(filterColumns), "label"); checkedColumns.value = getKeyList(cloneDeep(filterColumns), 'label');
// ? 重新赋值，拖拽排序不会改变原有值，响应式数据的特性 直接对 ref 或 reactive 创建的变量进行赋值可能不会触发视图的更新 // ? 重新赋值，拖拽排序不会改变原有值，响应式数据的特性 直接对 ref 或 reactive 创建的变量进行赋值可能不会触发视图的更新
// ? Proxy 来追踪属性的访问和修改，使用异步方式确保正确更新视图 // ? Proxy 来追踪属性的访问和修改，使用异步方式确保正确更新视图
checkColumnList.value = []; checkColumnList.value = [];
await nextTick(() => { await nextTick(() => {
checkColumnList.value = getKeyList(filterColumns, "label"); checkColumnList.value = getKeyList(filterColumns, 'label');
}); });
// checkedColumns 是原有顺序，根据这个顺序重新得到list // checkedColumns 是原有顺序，根据这个顺序重新得到list
@ -190,18 +163,16 @@ const onReset = async () => {
}); });
}); });
emit("changeColumn", list); emit('changeColumn', list);
}; };
/** 列展示拖拽排序 */ /** 列展示拖拽排序 */
const rowDrop = (event: any) => { const rowDrop = (event: any) => {
nextTick(() => { nextTick(() => {
const wrapper: HTMLElement = ( const wrapper: HTMLElement = (instance?.proxy?.$refs[`GroupRef${unref(props.tableKey)}`] as any).$el.firstElementChild;
instance?.proxy?.$refs[`GroupRef${unref(props.tableKey)}`] as any
).$el.firstElementChild;
Sortable.create(wrapper, { Sortable.create(wrapper, {
animation: 300, animation: 300,
handle: ".drag-btn", handle: '.drag-btn',
onEnd: ({ newIndex, oldIndex, item }) => { onEnd: ({ newIndex, oldIndex, item }) => {
const targetThElem = item; const targetThElem = item;
const wrapperElem = targetThElem.parentNode as HTMLElement; const wrapperElem = targetThElem.parentNode as HTMLElement;
@ -213,17 +184,14 @@ const rowDrop = (event: any) => {
if (newIndex > oldIndex) { if (newIndex > oldIndex) {
wrapperElem.insertBefore(targetThElem, oldThElem); wrapperElem.insertBefore(targetThElem, oldThElem);
} else { } else {
wrapperElem.insertBefore( wrapperElem.insertBefore(targetThElem, oldThElem ? oldThElem.nextElementSibling : oldThElem);
targetThElem,
oldThElem ? oldThElem.nextElementSibling : oldThElem
);
} }
return; return;
} }
const currentRow = dynamicColumns.value.splice(oldIndex, 1)[0]; const currentRow = dynamicColumns.value.splice(oldIndex, 1)[0];
dynamicColumns.value.splice(newIndex, 0, currentRow); dynamicColumns.value.splice(newIndex, 0, currentRow);
emit("changeColumn", dynamicColumns.value); emit('changeColumn', dynamicColumns.value);
} },
}); });
}).then(); }).then();
}; };
@ -248,30 +216,11 @@ onMounted(() => {
<template> <template>
<div class="main"> <div class="main">
<!-- 表单设置，外加插槽 --> <!-- 表单设置，外加插槽 -->
<el-form <el-form v-show="tableQueryFormVisible" ref="ruleFormRef" :inline="true" :model="model" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto" @submit="onSearch">
v-show="tableQueryFormVisible"
ref="ruleFormRef"
:inline="true"
:model="model"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
@submit="onSearch"
>
<slot name="tableForm" /> <slot name="tableForm" />
<el-form-item> <el-form-item>
<el-button <el-button :icon="useRenderIcon('ri:search-line')" :loading="loading" type="primary" @click="onSearch"> 搜索 </el-button>
:icon="useRenderIcon('ri:search-line')" <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(ruleFormRef)"> 重置</el-button>
:loading="loading"
type="primary"
@click="onSearch"
>
{{ $t("buttons.search") }}
</el-button>
<el-button
:icon="useRenderIcon(Refresh)"
@click="resetForm(ruleFormRef)"
>
{{ $t("buttons.rest") }}</el-button
>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -281,7 +230,7 @@ onMounted(() => {
<!-- 自定义左边头部内容 --> <!-- 自定义左边头部内容 -->
<slot name="tableTitle"> <slot name="tableTitle">
<p class="font-bold truncate"> <p class="font-bold truncate">
{{ tableTitle ? tableTitle : t(route.meta.title) }} {{ tableTitle ? tableTitle : route.meta.title }}
</p> </p>
</slot> </slot>
@ -294,11 +243,7 @@ onMounted(() => {
</div> </div>
<!-- 表格刷新按钮 --> <!-- 表格刷新按钮 -->
<RefreshIcon <RefreshIcon v-tippy="rendTipProps('刷新')" :class="`w-[16px] ${iconClass()}} ${loading ? 'animate-spin' : ''}`" @click="onReFresh" />
v-tippy="rendTipProps('刷新')"
:class="`w-[16px] ${iconClass()}} ${loading ? 'animate-spin' : ''}`"
@click="onReFresh"
/>
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<!-- 选择表格大小 --> <!-- 选择表格大小 -->
@ -306,87 +251,33 @@ onMounted(() => {
<CollapseIcon :class="`w-[16px] ${iconClass()}`" /> <CollapseIcon :class="`w-[16px] ${iconClass()}`" />
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="translation"> <el-dropdown-menu class="translation">
<el-dropdown-item <el-dropdown-item :style="getDropdownItemStyle(size, 'large')" @click="handleTableSizeClick('large')"> 大 </el-dropdown-item>
:style="getDropdownItemStyle(size, 'large')" <el-dropdown-item :style="getDropdownItemStyle(size, 'default')" @click="handleTableSizeClick('default')"> 默认 </el-dropdown-item>
@click="handleTableSizeClick('large')" <el-dropdown-item :style="getDropdownItemStyle(size, 'small')" @click="handleTableSizeClick('small')"> 小 </el-dropdown-item>
>
{{ $t("style.larger") }}
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(size, 'default')"
@click="handleTableSizeClick('default')"
>
{{ t("style.default") }}
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(size, 'small')"
@click="handleTableSizeClick('small')"
>
{{ t("style.small") }}
</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<!-- 表格列设置 --> <!-- 表格列设置 -->
<el-popover <el-popover :popper-style="{ padding: 0 }" placement="bottom-start" trigger="click" width="200">
:popper-style="{ padding: 0 }"
placement="bottom-start"
trigger="click"
width="200"
>
<template #reference> <template #reference>
<SettingIcon <SettingIcon v-tippy="rendTipProps('列设置')" :class="`w-[16px] ${iconClass()}`" />
v-tippy="rendTipProps('列设置')"
:class="`w-[16px] ${iconClass()}`"
/>
</template> </template>
<div :class="topClass()"> <div :class="topClass()">
<el-checkbox <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="!-mr-1" label="列展示" @change="handleCheckAllChange" />
v-model="checkAll" <el-button link type="primary" @click="onReset"> 重置</el-button>
:indeterminate="isIndeterminate"
class="!-mr-1"
label="列展示"
@change="handleCheckAllChange"
/>
<el-button link type="primary" @click="onReset">
{{ t("buttons.rest") }}</el-button
>
</div> </div>
<div class="pt-[6px] pl-[11px]"> <div class="pt-[6px] pl-[11px]">
<el-scrollbar max-height="36vh"> <el-scrollbar max-height="36vh">
<el-checkbox-group <el-checkbox-group :ref="`GroupRef${unref(props.tableKey)}`" :modelValue="checkedColumns" @change="handleCheckedColumnsChange">
:ref="`GroupRef${unref(props.tableKey)}`" <el-space :alignment="'flex-start'" :size="0" direction="vertical">
:modelValue="checkedColumns" <div v-for="(item, index) in checkColumnList" :key="index" class="flex items-center">
@change="handleCheckedColumnsChange" <DragIcon :class="`drag-btn w-[16px] mr-2 ${isFixedColumn(item) ? '!cursor-no-drop' : '!cursor-grab'}`" @mouseenter.prevent="rowDrop" />
> <el-checkbox :key="index" :label="item" :value="item" @change="handleCheckColumnListChange(item)">
<el-space <span :title="item" class="inline-block w-[120px] truncate hover:text-text_color_primary">
:alignment="'flex-start'"
:size="0"
direction="vertical"
>
<div
v-for="(item, index) in checkColumnList"
:key="index"
class="flex items-center"
>
<DragIcon
:class="`drag-btn w-[16px] mr-2 ${isFixedColumn(item) ? '!cursor-no-drop' : '!cursor-grab'}`"
@mouseenter.prevent="rowDrop"
/>
<el-checkbox
:key="index"
:label="item"
:value="item"
@change="handleCheckColumnListChange(item)"
>
<span
:title="item"
class="inline-block w-[120px] truncate hover:text-text_color_primary"
>
{{ item }} {{ item }}
</span> </span>
</el-checkbox> </el-checkbox>
@ -407,6 +298,8 @@ onMounted(() => {
:data="dataList" :data="dataList"
:header-cell-style="cellHeaderStyle" :header-cell-style="cellHeaderStyle"
:loading="loading" :loading="loading"
:on-page-current-change="onPageCurrentChange"
:on-page-size-change="onPageSizeChange"
:pagination="pagination" :pagination="pagination"
:paginationSmall="size === 'small'" :paginationSmall="size === 'small'"
:size="size" :size="size"
@ -417,33 +310,15 @@ onMounted(() => {
stripe stripe
table-layout="fixed" table-layout="fixed"
v-bind="$attrs" v-bind="$attrs"
@page-size-change="handleSizeChange"
@page-current-change="handleCurrentChange"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<template <template v-for="item in column" :key="item.prop" v-slot:[item.slot]="scope" v-bind="item">
v-for="item in column"
:key="item.prop"
v-slot:[item.slot]="scope"
v-bind="item"
>
<slot :name="item.slot" v-bind="scope" /> <slot :name="item.slot" v-bind="scope" />
<slot v-if="item.slot === 'operation'" name="operation"> <slot v-if="item.slot === 'operation'" name="operation">
<el-button <el-button :icon="EditPen" link type="warning" @click="tableEdit(scope)">修改</el-button>
:icon="EditPen" <el-popconfirm title="是否确认删除" @confirm="tableDelete(scope)">
link
type="warning"
@click="tableEdit(scope)"
>修改</el-button
>
<el-popconfirm
:title="t('table.popConfirmTitle')"
@confirm="tableDelete(scope)"
>
<template #reference> <template #reference>
<el-button :icon="DeleteFilled" link type="danger" <el-button :icon="DeleteFilled" link type="danger">删除</el-button>
>删除</el-button
>
</template> </template>
</el-popconfirm> </el-popconfirm>
</slot> </slot>

75
src/components/TableBar/src/TablePlusPage.vue
View File

@ -1,75 +0,0 @@
<template>
<div class="main mt-2 p-2 bg-bg_color">
<pure-table
ref="tableRef"
:adaptiveConfig="{ offsetBottom: 108 }"
:columns="column"
:data="dataList"
:header-cell-style="cellHeaderStyle"
:loading="loading"
:pagination="pagination"
:paginationSmall="size === 'small'"
:size="size"
adaptive
align-whole="center"
border
row-key="id"
table-layout="auto"
@selection-change="handleSelectionChange"
@page-size-change="handleSizeChange"
@page-current-change="handleCurrentChange"
/>
</div>
</template>
<script lang="ts" setup>
import { cellHeaderStyle } from "@/components/TableBar/utils/tableStyle";
import PureTable from "@pureadmin/table";
import type { PropType } from "vue";
// * 传入数据
defineProps({
// 表格数据
dataList: {
type: Array<any>,
default: []
},
// 表格列字段
column: {
type: Array<any>,
default: []
},
// 是否加载
loading: {
type: Boolean,
default: false
},
// 页面字体大小，small | default | large
size: {
type: String as PropType<any>,
default: "default"
},
// 分页器参数
pagination: {
type: Object,
default: Object
},
// 一页大小变化
handleSelectionChange: {
type: Function as PropType<Function>,
default: () => {}
},
// 分页大小变化
handleSizeChange: {
type: Function as PropType<Function>,
default: () => {}
},
// 当前页变化
handleCurrentChange: {
type: Function as PropType<Function>,
default: () => {}
}
});
</script>
<style lang="scss" scoped></style>

105
src/components/TableBar/src/TablePlusQuery.vue
View File

@ -1,105 +0,0 @@
<template>
<div class="main">
<el-form
ref="formRef"
:inline="true"
:model="form"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
>
<slot name="tableForm" />
</el-form>
<div class="mt-2 p-2 bg-bg_color">
<pure-table
ref="tableRef"
:adaptiveConfig="{ offsetBottom: 108 }"
:columns="column"
:data="dataList"
:header-cell-style="cellHeaderStyle"
:loading="loading"
:pagination="pagination"
:paginationSmall="size === 'small'"
:size="size"
adaptive
align-whole="center"
border
row-key="id"
table-layout="auto"
@selection-change="handleSelectionChange"
@page-size-change="handleSizeChange"
@page-current-change="handleCurrentChange"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from "vue";
import { cellHeaderStyle } from "@/components/TableBar/utils/tableStyle";
import PureTable from "@pureadmin/table";
// * 传入数据
defineProps({
// 表格数据
dataList: {
type: Array<any>,
default: []
},
// 表格列字段
column: {
type: Array<any>,
default: []
},
// 是否加载
loading: {
type: Boolean,
default: false
},
// 页面字体大小，small | default | large
size: {
type: String as PropType<any>,
default: "default"
},
// 分页器参数
pagination: {
type: Object,
default: Object
},
// 一页大小变化
handleSelectionChange: {
type: Function as PropType<Function>,
default: () => {}
},
// 分页大小变化
handleSizeChange: {
type: Function as PropType<Function>,
default: () => {}
},
// 当前页变化
handleCurrentChange: {
type: Function as PropType<Function>,
default: () => {}
},
// 表单参数
form: {
type: Object as PropType<any>,
default: Object
}
});
</script>
<style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) {
margin: 0;
}
.main-content {
margin: 24px 24px 0 !important;
}
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
}
}
</style>

204
src/components/TableBar/src/TablePlusVxeBar.vue Normal file
View File

@ -0,0 +1,204 @@
<script lang="ts" setup>
import { onMounted, PropType, ref } from 'vue';
import { rendTipProps } from '@/components/TableBar/utils/tableConfig';
import { getDropdownItemStyle, iconClass } from '@/components/TableBar/utils/tableStyle';
import { useRoute } from 'vue-router';
import RefreshIcon from '@/assets/table-bar/refresh.svg?component';
import CollapseIcon from '@/assets/table-bar/collapse.svg?component';
import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
import Refresh from '@iconify-icons/ep/refresh';
import { FormInstance } from 'element-plus';
import { Pagination } from '../../../../types/pagination/pagination';
import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table';
import { pageSizes } from '@/enum/baseConstant';
// * 传入数据
const props = defineProps({
// 表格数据
dataList: { type: Array<any>, default: [] },
// 表格列字段
column: { type: Array as PropType<any>, default: () => [] },
// 是否加载
loading: { type: Boolean, default: false },
// 表格头部查询
tableQueryFormVisible: { type: Boolean, default: true },
// 页面字体大小，medium | small | mini
size: { type: String as PropType<any>, default: 'medium' },
// 分页器参数
pagination: { type: Object as PropType<Pagination>, default: Object },
// 当前页变化
onPageChange: {
type: Function as PropType<any>,
},
// 表单参数
form: {
type: Object as PropType<any>,
default: Object,
},
// 表格标题
tableTitle: { type: String, default: '' },
// 表格修改
onTableEdit: {
type: Function as PropType<Function>,
default: () => {},
}, // 表格删除
onTableDelete: {
type: Function as PropType<Function>,
default: () => {},
},
// 刷新时
onReFresh: {
type: Function as PropType<any>,
},
onSearch: { type: Function as PropType<any> },
});
const route = useRoute();
// 表格样式大小
const size = ref(props.size);
const toolbarRef = ref<VxeToolbarInstance>();
const tableRef = ref<VxeTableInstance>();
const ruleFormRef = ref<FormInstance>();
/**
* * 修改表格样式大小
* @param value 修改样式大小 medium | small | mini
*/
const handleTableSizeClick = (value: string) => {
size.value = value;
};
/**
* 重置表单
* @param formEl
*/
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
props.onSearch();
};
onMounted(() => {
const $table = tableRef.value;
const $toolbarRef = toolbarRef.value;
if ($table && $toolbarRef) {
$table.connect($toolbarRef);
}
});
</script>
<template>
<div class="main">
<!-- 表单设置，外加插槽 -->
<el-form v-show="tableQueryFormVisible" ref="ruleFormRef" :inline="true" :model="form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto" @submit="onSearch">
<slot name="tableForm" />
<el-form-item>
<el-button :icon="useRenderIcon('ri:search-line')" :loading="loading" type="primary" @click="onSearch"> 搜索 </el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(ruleFormRef)"> 重置</el-button>
</el-form-item>
</el-form>
<!-- 表格头部设置 -->
<div class="w-[99/100] mt-2 px-2 pb-2 bg-bg_color">
<div class="flex justify-between w-full h-[60px] p-4">
<!-- 自定义左边头部内容 -->
<slot name="tableTitle">
<p class="font-bold truncate">
{{ tableTitle ? tableTitle : route.meta.title }}
</p>
</slot>
<!-- 自定义表格操作内容 -->
<slot name="tableOperation">
<div class="flex items-center justify-around">
<!-- 插槽内容 -->
<div class="mr-4">
<slot name="tableButtons" />
</div>
<!-- 表格刷新按钮 -->
<RefreshIcon v-tippy="rendTipProps('刷新')" :class="`w-[16px] ${iconClass()}} ${loading ? 'animate-spin' : ''}`" @click="onReFresh" />
<el-divider direction="vertical" />
<!-- 选择表格大小 -->
<el-dropdown trigger="click">
<CollapseIcon :class="`w-[16px] ${iconClass()}`" />
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item :style="getDropdownItemStyle(size, 'medium')" @click="handleTableSizeClick('medium')"> 大 </el-dropdown-item>
<el-dropdown-item :style="getDropdownItemStyle(size, 'small')" @click="handleTableSizeClick('small')"> 默认 </el-dropdown-item>
<el-dropdown-item :style="getDropdownItemStyle(size, 'mini')" @click="handleTableSizeClick('mini')"> 小 </el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-divider direction="vertical" />
<vxe-toolbar ref="toolbarRef" custom export print />
<el-divider direction="vertical" />
</div>
</slot>
</div>
<slot name="tableSelect" />
<!-- 表格 -->
<vxe-table
ref="tableRef"
:column-config="{ resizable: true }"
:custom-config="{}"
:data="dataList"
:export-config="{}"
:loading="loading"
:print-config="{}"
:row-config="{ isHover: true }"
:size="size"
:tooltip-config="{ enterable: true, showAll: true }"
:tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
align="center"
border
header-align="center"
round
show-overflow
stripe
>
<slot name="tableType">
<vxe-column title="序号" type="seq" width="70" />
</slot>
<vxe-column v-for="item in column" :key="item.prop" :field="item.prop" :title="item.label">
<template v-if="$slots[item.prop]" #default="scope">
<slot :name="item.prop" v-bind="scope" />
</template>
</vxe-column>
<template #empty>
<div>
<img alt="" src="https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif" />
<p>不用再看了，没有更多数据了！</p>
</div>
</template>
</vxe-table>
<vxe-pager
v-show="onPageChange !== undefined"
:background="true"
:current-page="pagination.currentPage"
:layouts="['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
:loading="loading"
:on-page-change="onPageChange"
:page-size="pagination.pageSize"
:page-sizes="pageSizes"
:pager-count="5"
:size="size"
:total="pagination.total"
border
/>
</div>
</div>
</template>
<style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) {
margin: 0;
}
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
}
}
</style>

18
src/components/TableBar/utils/tableStyle.ts
View File

@ -1,21 +1,19 @@
import { computed } from "vue"; import { computed } from 'vue';
import { useEpThemeStoreHook } from "@/store/epTheme"; import { useEpThemeStoreHook } from '@/store/modules/epTheme';
/** /**
* * 表格头部样式 * * 表格头部样式
*/ */
export const cellHeaderStyle = () => ({ export const cellHeaderStyle = () => ({
background: "var(--el-fill-color-light)", background: 'var(--el-fill-color-light)',
color: "var(--el-text-color-primary)" color: 'var(--el-text-color-primary)',
}); });
// * icon 样式 // * icon 样式
export const iconClass = () => export const iconClass = () => 'text-black dark:text-white duration-100 hover:!text-primary cursor-pointer outline-none ';
"text-black dark:text-white duration-100 hover:!text-primary cursor-pointer outline-none ";
// * 顶部样式 // * 顶部样式
export const topClass = () => export const topClass = () => 'flex justify-between pt-[3px] px-[11px] border-b-[1px] border-solid border-[#dcdfe6] dark:border-[#303030]';
"flex justify-between pt-[3px] px-[11px] border-b-[1px] border-solid border-[#dcdfe6] dark:border-[#303030]";
/** /**
* * 拖拽列样式 * * 拖拽列样式
@ -23,8 +21,8 @@ export const topClass = () =>
export const getDropdownItemStyle = computed(() => { export const getDropdownItemStyle = computed(() => {
return (size: string, s: string) => { return (size: string, s: string) => {
return { return {
background: s === size ? useEpThemeStoreHook().epThemeColor : "", background: s === size ? useEpThemeStoreHook().epThemeColor : '',
color: s === size ? "#fff" : "var(--el-text-color-primary)" color: s === size ? '#fff' : 'var(--el-text-color-primary)',
}; };
}; };
}); });

18
src/config/index.ts
View File

@ -1,5 +1,5 @@
import axios from "axios"; import axios from 'axios';
import type { App } from "vue"; import type { App } from 'vue';
let config: object = {}; let config: object = {};
const { VITE_PUBLIC_PATH } = import.meta.env; const { VITE_PUBLIC_PATH } = import.meta.env;
@ -9,12 +9,12 @@ const setConfig = (cfg?: unknown) => {
}; };
const getConfig = (key?: string): PlatformConfigs => { const getConfig = (key?: string): PlatformConfigs => {
if (typeof key === "string") { if (typeof key === 'string') {
const arr = key.split("."); const arr = key.split('.');
if (arr && arr.length) { if (arr && arr.length) {
let data = config; let data = config;
arr.forEach(v => { arr.forEach(v => {
if (data && typeof data[v] !== "undefined") { if (data && typeof data[v] !== 'undefined') {
data = data[v]; data = data[v];
} else { } else {
data = null; data = null;
@ -30,13 +30,13 @@ const getConfig = (key?: string): PlatformConfigs => {
export const getPlatformConfig = async (app: App): Promise<undefined> => { export const getPlatformConfig = async (app: App): Promise<undefined> => {
app.config.globalProperties.$config = getConfig(); app.config.globalProperties.$config = getConfig();
return axios({ return axios({
method: "get", method: 'get',
url: `${VITE_PUBLIC_PATH}platform-config.json` url: `${VITE_PUBLIC_PATH}platform-config.json`,
}) })
.then(({ data: config }) => { .then(({ data: config }) => {
let $config = app.config.globalProperties.$config; let $config = app.config.globalProperties.$config;
// 自动注入系统配置 // 自动注入系统配置
if (app && $config && typeof config === "object") { if (app && $config && typeof config === 'object') {
$config = Object.assign($config, config); $config = Object.assign($config, config);
app.config.globalProperties.$config = $config; app.config.globalProperties.$config = $config;
// 设置全局配置 // 设置全局配置
@ -45,7 +45,7 @@ export const getPlatformConfig = async (app: App): Promise<undefined> => {
return $config; return $config;
}) })
.catch(() => { .catch(() => {
throw "请在public文件夹下添加platform-config.json配置文件"; throw '请在public文件夹下添加platform-config.json配置文件';
}); });
}; };

30
src/enum/baseConstant.ts Normal file
View File

@ -0,0 +1,30 @@
import type { Option } from '../../types/enum/options';
/**
* * 是否默认
*/
export const isDefaultOptions: Option[] = [
{ value: true, label: '是' },
{ value: false, label: '否' },
];
/**
* * 是否显示
*/
export const isDefaultVisibleOptions: Option[] = [
{ value: true, label: '显示' },
{ value: false, label: '不显示' },
];
/**
* * 性别
*/
export const sexConstant: Option[] = [
{ value: 1, label: '男' },
{ value: 0, label: '女' },
];
/**
* * 分页默认数组个数
*/
export const pageSizes: number[] = [10, 30, 50, 100, 150, 200, 300];

29
src/enum/statusConstant.ts Normal file
View File

@ -0,0 +1,29 @@
// ? 表单选项
import type { Option } from '../../types/enum/options';
/**
* * 默认状态
*/
export const defaultStatus: Option[] = [
{ value: '', label: '' },
{ value: 1, label: '启用' },
{ value: 0, label: '禁用' },
];
/**
* * 是否错误
*/
export const isErrorStatus: Option[] = [
{ value: '', label: '' },
{ value: false, label: '未出错' },
{ value: true, label: '错误' },
];
/**
* * 默认状态
*/
export const statusConstant: Option[] = [
{ value: '', label: '' },
{ value: 1, label: '是' },
{ value: 0, label: '否' },
];

10
src/enum/views/faviconConstant.ts Normal file
View File

@ -0,0 +1,10 @@
import type { Option } from '../../../types/enum/options';
/**
* 图标选项
*/
export const faviconCategory: Option[] = [
{ value: '', label: '' },
{ value: 'web', label: 'web 前台' },
{ value: 'admin', label: 'admin 后台' },
];

21
src/enum/views/feedbackConstant.ts Normal file
View File

@ -0,0 +1,21 @@
import type { Option } from '../../../types/enum/options';
/**
* * 用户反馈
*/
export const feedback: Option[] = [
{ value: '', label: '' },
{ value: 1, label: '已处理' },
{ value: 0, label: '未处理' },
{ value: -1, label: '其它问题' },
];
/**
* * 反馈类型选择
*/
export const feedbackTypeOptions: Option[] = [
{ label: '优化建议', value: '优化建议' },
{ label: 'bug反馈', value: 'bug反馈' },
{ label: '新增功能建议', value: '新增功能建议' },
{ label: '其它', value: '其它' },
];

25
src/enum/views/userConstant.ts Normal file
View File

@ -0,0 +1,25 @@
import type { Option } from '../../../types/enum/options';
/**
* * 布局方式
*/
export const layoutConstant: Option[] = [
{ value: 'ltr', label: '从左到右' },
{ value: 'rtl', label: '从右到左' },
];
/**
* * 文章显示模式
*/
export const articleModeConstant: Option[] = [
{ value: 'album', label: '相册模式' },
{ value: 'list', label: '列表模式' },
];
/**
* * 默认状态
*/
export const userStatus: Option[] = [
{ value: 0, label: '启用' },
{ value: 1, label: '禁用' },
];

66
src/main.ts
View File

@ -1,41 +1,40 @@
import App from "./App.vue"; import App from './App.vue';
import router from "./router"; import router from './router';
import { setupStore } from "@/store"; import { setupStore } from '@/store';
import { getPlatformConfig } from "./config"; import { getPlatformConfig } from './config';
import { MotionPlugin } from "@vueuse/motion"; import { MotionPlugin } from '@vueuse/motion';
// import { useEcharts } from "@/plugins/echarts"; // import { useEcharts } from "@/plugins/echarts";
import { createApp, type Directive } from "vue"; import { createApp, type Directive } from 'vue';
import { useElementPlus } from "@/plugins/elementPlus"; import { useElementPlus } from '@/plugins/elementPlus';
import { injectResponsiveStorage } from "@/utils/responsive"; import { injectResponsiveStorage } from '@/utils/responsive';
import Table from "@pureadmin/table"; import Table from '@pureadmin/table';
// import PureDescriptions from "@pureadmin/descriptions"; // import PureDescriptions from "@pureadmin/descriptions";
// 引入重置样式 // 引入重置样式
import "./style/reset.scss"; import './style/reset.scss';
// 导入公共样式 // 导入公共样式
import "./style/index.scss"; import './style/index.scss';
// 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题 // 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题
import "./style/tailwind.css"; import './style/tailwind.css';
import "element-plus/dist/index.css"; import 'element-plus/dist/index.css';
// 导入字体图标 // 导入字体图标
import "./assets/iconfont/iconfont.js"; import './assets/iconfont/iconfont.js';
import "./assets/iconfont/iconfont.css"; import './assets/iconfont/iconfont.css';
// 自定义指令 // 自定义指令
import * as directives from "@/directives"; import * as directives from '@/directives';
// 全局注册@iconify/vue图标库 // 全局注册@iconify/vue图标库
import { import { FontIcon, IconifyIconOffline, IconifyIconOnline } from './components/CommonIcon';
FontIcon,
IconifyIconOffline,
IconifyIconOnline
} from "./components/CommonIcon";
// 全局注册按钮级别权限组件 // 全局注册按钮级别权限组件
import { Auth } from "@/components/Auth"; import { Auth } from '@/components/Auth';
import { Perms } from "@/components/Perms"; import { Perms } from '@/components/Perms';
// 全局注册vue-tippy // 全局注册vue-tippy
import "tippy.js/dist/tippy.css"; import 'tippy.js/dist/tippy.css';
import "tippy.js/themes/light.css"; import 'tippy.js/themes/light.css';
import VueTippy from "vue-tippy"; import VueTippy from 'vue-tippy';
import { useEcharts } from "@/plugins/echarts"; import { useEcharts } from '@/plugins/echarts';
// 完整导入 表格库
import VxeUITable from 'vxe-table';
import 'vxe-table/lib/style.css';
const app = createApp(App); const app = createApp(App);
@ -43,12 +42,12 @@ Object.keys(directives).forEach(key => {
app.directive(key, (directives as { [key: string]: Directive })[key]); app.directive(key, (directives as { [key: string]: Directive })[key]);
}); });
app.component("IconifyIconOffline", IconifyIconOffline); app.component('IconifyIconOffline', IconifyIconOffline);
app.component("IconifyIconOnline", IconifyIconOnline); app.component('IconifyIconOnline', IconifyIconOnline);
app.component("FontIcon", FontIcon); app.component('FontIcon', FontIcon);
app.component("Auth", Auth); app.component('Auth', Auth);
app.component("Perms", Perms); app.component('Perms', Perms);
app.use(VueTippy); app.use(VueTippy);
@ -61,7 +60,8 @@ getPlatformConfig(app).then(async config => {
.use(MotionPlugin) .use(MotionPlugin)
.use(useElementPlus) .use(useElementPlus)
.use(Table) .use(Table)
.use(VxeUITable)
// .use(PureDescriptions) // .use(PureDescriptions)
.use(useEcharts); .use(useEcharts);
app.mount("#app"); app.mount('#app');
}); });

9
src/views/permission/page/columns.ts Normal file
View File

@ -0,0 +1,9 @@
export const columns = [
{ prop: 'id', label: 'id' },
{ prop: 'name', label: 'name' },
{ prop: 'nickname', label: 'nickname' },
{ prop: 'role', label: 'role' },
{ prop: 'sex', label: 'sex' },
{ prop: 'age', label: 'age' },
{ prop: 'address', label: 'address' },
];

250
src/views/permission/page/index.vue
View File

@ -1,18 +1,20 @@
<script setup lang="ts"> <script lang="ts" setup>
import { initRouter } from "@/router/utils"; import { initRouter } from '@/router/utils';
import { storageLocal } from "@pureadmin/utils"; import { storageLocal } from '@pureadmin/utils';
import { type CSSProperties, ref, computed } from "vue"; import { computed, type CSSProperties, ref } from 'vue';
import { useUserStoreHook } from "@/store/modules/user"; import { useUserStoreHook } from '@/store/modules/user';
import { usePermissionStoreHook } from "@/store/modules/permission"; import { usePermissionStoreHook } from '@/store/modules/permission';
import TablePlusVxeBar from '@/components/TableBar/src/TablePlusVxeBar.vue';
import { columns } from '@/views/permission/page/columns';
defineOptions({ defineOptions({
name: "PermissionPage" name: 'PermissionPage',
}); });
const elStyle = computed((): CSSProperties => { const elStyle = computed((): CSSProperties => {
return { return {
width: "85vw", width: '85vw',
justifyContent: "start" justifyContent: 'start',
}; };
}); });
@ -20,47 +22,243 @@ const username = ref(useUserStoreHook()?.username);
const options = [ const options = [
{ {
value: "admin", value: 'admin',
label: "管理员角色" label: '管理员角色',
}, },
{ {
value: "common", value: 'common',
label: "普通角色" label: '普通角色',
} },
]; ];
function onChange() { function onChange() {
useUserStoreHook() useUserStoreHook()
.loginByUsername({ username: username.value, password: "admin123" }) .loginByUsername({ username: username.value, password: 'admin123' })
.then(res => { .then(res => {
if (res.success) { if (res.success) {
storageLocal().removeItem("async-routes"); storageLocal().removeItem('async-routes');
usePermissionStoreHook().clearAllCachePage(); usePermissionStoreHook().clearAllCachePage();
initRouter(); initRouter();
} }
}); });
} }
const dataList = [
{
id: 10001,
name: 'Test1',
nickname: 'T1',
role: 'Develop',
sex: 'Man',
age: 28,
address: 'Shenzhen',
},
{
id: 10002,
name: 'Test2',
nickname: 'T2',
role: 'Test',
sex: 'Women',
age: 22,
address: 'Guangzhou',
},
{
id: 10003,
name: 'Test3',
nickname: 'T3',
role: 'PM',
sex: 'Man',
age: 32,
address: 'Shanghai',
},
{
id: 10004,
name: 'Test4',
nickname: 'T4',
role: 'Designer',
sex: 'Women',
age: 23,
address: 'test abc',
},
{
id: 10005,
name: 'Test5',
nickname: 'T5',
role: 'Develop',
sex: 'Women',
age: 30,
address: 'Shanghai',
},
{
id: 10006,
name: 'Test6',
nickname: 'T6',
role: 'Designer',
sex: 'Women',
age: 21,
address: 'Shenzhen',
},
{
id: 10007,
name: 'Test7',
nickname: 'T7',
role: 'Test',
sex: 'Man',
age: 29,
address: 'Shenzhen',
},
{
id: 10008,
name: 'Test8',
nickname: 'T8',
role: 'Develop',
sex: 'Man',
age: 35,
address: 'test abc',
},
{
id: 10009,
name: 'Test9',
nickname: 'T9',
role: 'Develop',
sex: 'Man',
age: 35,
address: 'Shenzhen',
},
{
id: 100010,
name: 'Test10',
nickname: 'T10',
role: 'Develop',
sex: 'Man',
age: 35,
address: 'Guangzhou',
},
{
id: 100011,
name: 'Test11',
nickname: 'T11',
role: 'Develop',
sex: 'Man',
age: 49,
address: 'Guangzhou',
},
{
id: 100012,
name: 'Test12',
nickname: 'T12',
role: 'Develop',
sex: 'Women',
age: 45,
address: 'Shanghai',
},
{
id: 100013,
name: 'Test13',
nickname: 'T13',
role: 'Test',
sex: 'Women',
age: 35,
address: 'Guangzhou',
},
{
id: 100014,
name: 'Test14',
nickname: 'T14',
role: 'Test',
sex: 'Man',
age: 29,
address: 'Shanghai',
},
{
id: 100015,
name: 'Test15',
nickname: 'T15',
role: 'Develop',
sex: 'Man',
age: 39,
address: 'Guangzhou',
},
{
id: 100016,
name: 'Test16',
nickname: 'T16',
role: 'Test',
sex: 'Women',
age: 35,
address: 'Guangzhou',
},
{
id: 100017,
name: 'Test17',
nickname: 'T17',
role: 'Test',
sex: 'Man',
age: 39,
address: 'Shanghai',
},
{
id: 100018,
name: 'Test18',
nickname: 'T18',
role: 'Develop',
sex: 'Man',
age: 44,
address: 'Guangzhou',
},
{
id: 100019,
name: 'Test19',
nickname: 'T19',
role: 'Develop',
sex: 'Man',
age: 39,
address: 'Guangzhou',
},
{
id: 100020,
name: 'Test20',
nickname: 'T20',
role: 'Test',
sex: 'Women',
age: 35,
address: 'Guangzhou',
},
{
id: 100021,
name: 'Test21',
nickname: 'T21',
role: 'Test',
sex: 'Man',
age: 39,
address: 'Shanghai',
},
{
id: 100022,
name: 'Test22',
nickname: 'T22',
role: 'Develop',
sex: 'Man',
age: 44,
address: 'Guangzhou',
},
];
</script> </script>
<template> <template>
<div> <div>
<p class="mb-2"> <p class="mb-2">模拟后台根据不同角色返回对应路由，观察左侧菜单变化（管理员角色可查看系统管理菜单、普通角色不可查看系统管理菜单）</p>
模拟后台根据不同角色返回对应路由，观察左侧菜单变化（管理员角色可查看系统管理菜单、普通角色不可查看系统管理菜单） <el-card :style="elStyle" shadow="never">
</p>
<el-card shadow="never" :style="elStyle">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>当前角色：{{ username }}</span> <span>当前角色：{{ username }}</span>
</div> </div>
</template> </template>
<el-select v-model="username" class="!w-[160px]" @change="onChange"> <el-select v-model="username" class="!w-[160px]" @change="onChange">
<el-option <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</el-card> </el-card>
<TablePlusVxeBar :column="columns" :data-list="dataList" :loading="false" />
</div> </div>
</template> </template>

6
types/directives.d.ts vendored
View File

@ -1,7 +1,7 @@
import type { Directive } from "vue"; import type { Directive } from 'vue';
import type { CopyEl, OptimizeOptions, RippleOptions } from "@/directives"; import type { CopyEl, OptimizeOptions, RippleOptions } from '@/directives';
declare module "vue" { declare module 'vue' {
export interface ComponentCustomProperties { export interface ComponentCustomProperties {
/** `Loading` 动画加载指令，具体看：https://element-plus.org/zh-CN/component/loading.html#%E6%8C%87%E4%BB%A4 */ /** `Loading` 动画加载指令，具体看：https://element-plus.org/zh-CN/component/loading.html#%E6%8C%87%E4%BB%A4 */
vLoading: Directive<Element, boolean>; vLoading: Directive<Element, boolean>;

12
types/enum/options.d.ts vendored Normal file
View File

@ -0,0 +1,12 @@
// 默认option选项
export interface Option {
value: string | number | boolean | undefined;
label: string | undefined;
}
// 属性结构
export interface TreeData {
value: string;
label: string;
children?: TreeData[];
}

13
types/global.d.ts vendored
View File

@ -1,5 +1,5 @@
import type { ECharts } from "echarts"; import type { ECharts } from 'echarts';
import type { TableColumns } from "@pureadmin/table"; import type { TableColumns } from '@pureadmin/table';
/** /**
* 全局类型声明，无需引入直接在 `.vue` 、`.ts` 、`.tsx` 文件使用即可获得类型提示 * 全局类型声明，无需引入直接在 `.vue` 、`.ts` 、`.tsx` 文件使用即可获得类型提示
@ -50,14 +50,7 @@ declare global {
/** /**
* 打包压缩格式的类型声明 * 打包压缩格式的类型声明
*/ */
type ViteCompression = type ViteCompression = 'none' | 'gzip' | 'brotli' | 'both' | 'gzip-clear' | 'brotli-clear' | 'both-clear';
| "none"
| "gzip"
| "brotli"
| "both"
| "gzip-clear"
| "brotli-clear"
| "both-clear";
/** /**
* 全局自定义环境变量的类型声明 * 全局自定义环境变量的类型声明

7
types/index.d.ts vendored
View File

@ -4,10 +4,9 @@ type RefType<T> = T | null;
type EmitType = (event: string, ...args: any[]) => void; type EmitType = (event: string, ...args: any[]) => void;
type TargetContext = "_self" | "_blank"; type TargetContext = '_self' | '_blank';
type ComponentRef<T extends HTMLElement = HTMLDivElement> = type ComponentRef<T extends HTMLElement = HTMLDivElement> = ComponentElRef<T> | null;
ComponentElRef<T> | null;
type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>; type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
@ -49,7 +48,7 @@ type TimeoutHandle = ReturnType<typeof setTimeout>;
type IntervalHandle = ReturnType<typeof setInterval>; type IntervalHandle = ReturnType<typeof setInterval>;
type Effect = "light" | "dark"; type Effect = 'light' | 'dark';
interface ChangeEvent extends Event { interface ChangeEvent extends Event {
target: HTMLInputElement; target: HTMLInputElement;

7
types/pagination/pagination.d.ts vendored Normal file
View File

@ -0,0 +1,7 @@
// 分页参数接口
export interface Pagination {
currentPage: number;
pageSize: number;
total: number;
pageSizes: number[];
}

6
types/router.d.ts vendored
View File

@ -1,7 +1,7 @@
// 全局路由类型声明 // 全局路由类型声明
import type { RouteComponent, RouteLocationNormalized } from "vue-router"; import type { RouteComponent, RouteLocationNormalized } from 'vue-router';
import type { FunctionalComponent } from "vue"; import type { FunctionalComponent } from 'vue';
declare global { declare global {
interface ToRouteType extends RouteLocationNormalized { interface ToRouteType extends RouteLocationNormalized {
@ -103,6 +103,6 @@ declare global {
} }
// https://router.vuejs.org/zh/guide/advanced/meta.html#typescript // https://router.vuejs.org/zh/guide/advanced/meta.html#typescript
declare module "vue-router" { declare module 'vue-router' {
interface RouteMeta extends CustomizeRouteMeta {} interface RouteMeta extends CustomizeRouteMeta {}
} }

11
types/shims-tsx.d.ts vendored
View File

@ -1,21 +1,24 @@
import type { VNode } from "vue"; import type Vue, { VNode } from 'vue';
import type Vue from "vue";
declare module "*.tsx" { declare module '*.tsx' {
import Vue from "compatible-vue"; import Vue from 'compatible-vue';
export default Vue; export default Vue;
} }
declare global { declare global {
namespace JSX { namespace JSX {
interface Element extends VNode {} interface Element extends VNode {}
interface ElementClass extends Vue {} interface ElementClass extends Vue {}
interface ElementAttributesProperty { interface ElementAttributesProperty {
$props: any; $props: any;
} }
interface IntrinsicElements { interface IntrinsicElements {
[elem: string]: any; [elem: string]: any;
} }
interface IntrinsicAttributes { interface IntrinsicAttributes {
[elem: string]: any; [elem: string]: any;
} }

6
types/shims-vue.d.ts vendored
View File

@ -1,10 +1,10 @@
declare module "*.vue" { declare module '*.vue' {
import type { DefineComponent } from "vue"; import type { DefineComponent } from 'vue';
const component: DefineComponent<{}, {}, any>; const component: DefineComponent<{}, {}, any>;
export default component; export default component;
} }
declare module "*.scss" { declare module '*.scss' {
const scss: Record<string, string>; const scss: Record<string, string>;
export default scss; export default scss;
} }

6
types/store/baseStoreState.ts Normal file
View File

@ -0,0 +1,6 @@
// 返回响应内容
export interface Result<T> {
code: number;
data: T;
message: string;
}

27
vite.config.ts
View File

@ -1,13 +1,12 @@
import { getPluginsList } from "./build/plugins"; import { getPluginsList } from './build/plugins';
import { exclude, include } from "./build/optimize"; import { exclude, include } from './build/optimize';
import { type ConfigEnv, loadEnv, type UserConfigExport } from "vite"; import { type ConfigEnv, loadEnv, type UserConfigExport } from 'vite';
import { __APP_INFO__, alias, root, wrapperEnv } from "./build/utils"; import { __APP_INFO__, alias, root, wrapperEnv } from './build/utils';
import { serverOptions } from "./build/server"; import { serverOptions } from './build/server';
import { buildEnvironment } from "./build/buildEnv"; import { buildEnvironment } from './build/buildEnv';
export default ({ mode }: ConfigEnv): UserConfigExport => { export default ({ mode }: ConfigEnv): UserConfigExport => {
const { VITE_CDN, VITE_PORT, VITE_COMPRESSION, VITE_PUBLIC_PATH } = const { VITE_CDN, VITE_PORT, VITE_COMPRESSION, VITE_PUBLIC_PATH } = wrapperEnv(loadEnv(mode, root));
wrapperEnv(loadEnv(mode, root));
return { return {
base: VITE_PUBLIC_PATH, base: VITE_PUBLIC_PATH,
root, root,
@ -18,15 +17,15 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
// https://cn.vitejs.dev/config/dep-optimization-options.html#dep-optimization-options // https://cn.vitejs.dev/config/dep-optimization-options.html#dep-optimization-options
optimizeDeps: { include, exclude }, optimizeDeps: { include, exclude },
esbuild: { esbuild: {
pure: ["console.log", "debugger"], pure: ['console.log', 'debugger'],
jsxFactory: "h", jsxFactory: 'h',
jsxFragment: "Fragment", jsxFragment: 'Fragment',
jsxInject: "import { h } from 'vue';" jsxInject: "import { h } from 'vue';",
}, },
build: buildEnvironment(), build: buildEnvironment(),
define: { define: {
__INTLIFY_PROD_DEVTOOLS__: false, __INTLIFY_PROD_DEVTOOLS__: false,
__APP_INFO__: JSON.stringify(__APP_INFO__) __APP_INFO__: JSON.stringify(__APP_INFO__),
} },
}; };
}; };