mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-25 08:06:30 +08:00
升级最新依赖 并修复eslint报错 (#2896)
* chore: update deps * fix: import.meta.globEager 已过期 * docs: fix doc bugs * fix: eslint * fix: lint:prettier * fix: stylelint * chore: update deps * fix: eslint * refactor: accountdetail setup * fix: 'Nullable' is not defined * feat: remove vite-plugin-vue-setup-extend * chore: remove unplugin-vue-define-options * fix(component): pageWrapper use setup closed #2898 * refactor: PageFooter use setup --------- Co-authored-by: jinmao88 <50581550+jinmao88@users.noreply.github.com>
This commit is contained in:
xingyu
@@ -8,3 +8,5 @@ node_modules
|
||||
|
||||
public
|
||||
.npmrc
|
||||
|
||||
*-lock.yaml
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
## Introduction
|
||||
|
||||
Vue Vben Admin is a free and open source middle and back-end template. Using the latest `vue3`, `vite2`, `TypeScript` and other mainstream technology development, the out-of-the-box middle and back-end front-end solutions can also be used for learning reference.
|
||||
Vue Vben Admin is a free and open source middle and back-end template. Using the latest `vue3`, `vite4`, `TypeScript` and other mainstream technology development, the out-of-the-box middle and back-end front-end solutions can also be used for learning reference.
|
||||
|
||||
## Feature
|
||||
|
||||
@@ -54,7 +54,7 @@ Open the project in Gitpod (free online dev environment for GitHub) and start co
|
||||
- [TypeScript](https://www.typescriptlang.org/) - Familiar with the basic syntax of `TypeScript`
|
||||
- [Es6+](http://es6.ruanyifeng.com/) - Familiar with es6 basic syntax
|
||||
- [Vue-Router-Next](https://next.router.vuejs.org/) - Familiar with the basic use of vue-router
|
||||
- [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/) - ui basic use
|
||||
- [Ant-Design-Vue](https://antdv.com/docs/vue/introduce-cn/) - ui basic use
|
||||
- [Mock.js](https://github.com/nuysoft/Mock) - mockjs basic syntax
|
||||
|
||||
## Install and use
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
## 简介
|
||||
|
||||
Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的`vue3`,`vite2`,`TypeScript`等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
|
||||
Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的`vue3`,`vite4`,`TypeScript`等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
|
||||
|
||||
## 特性
|
||||
|
||||
@@ -54,7 +54,7 @@ Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的`vue3
|
||||
- [TypeScript](https://www.typescriptlang.org/) - 熟悉`TypeScript`基本语法
|
||||
- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
|
||||
- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
|
||||
- [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/) - ui 基本使用
|
||||
- [Ant-Design-Vue](https://antdv.com/docs/vue/introduce-cn/) - ui 基本使用
|
||||
- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
|
||||
|
||||
## 安装使用
|
||||
|
||||
@@ -11,9 +11,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"fs-extra": "^11.1.1",
|
||||
"koa": "^2.14.1",
|
||||
"koa": "^2.14.2",
|
||||
"koa-body": "^6.0.1",
|
||||
"koa-bodyparser": "^4.4.0",
|
||||
"koa-bodyparser": "^4.4.1",
|
||||
"koa-route": "^3.2.0",
|
||||
"koa-router": "^12.0.0",
|
||||
"koa-static": "^5.0.0",
|
||||
@@ -24,13 +24,13 @@
|
||||
"@types/koa": "^2.13.6",
|
||||
"@types/koa-bodyparser": "^5.0.2",
|
||||
"@types/koa-router": "^7.4.4",
|
||||
"@types/node": "^18.15.11",
|
||||
"@types/node": "^20.3.3",
|
||||
"nodemon": "^2.0.22",
|
||||
"pm2": "^5.3.0",
|
||||
"rimraf": "^4.4.1",
|
||||
"rimraf": "^5.0.1",
|
||||
"ts-node": "^10.9.1",
|
||||
"tsconfig-paths": "^4.2.0",
|
||||
"tsup": "^6.7.0",
|
||||
"typescript": "^5.0.3"
|
||||
"tsup": "^7.1.0",
|
||||
"typescript": "^5.1.6"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,14 +36,14 @@
|
||||
"stub": "pnpm unbuild --stub"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^5.57.1",
|
||||
"@typescript-eslint/parser": "^5.57.1",
|
||||
"eslint": "^8.37.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.60.1",
|
||||
"@typescript-eslint/parser": "^5.60.1",
|
||||
"eslint": "^8.44.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-import": "^2.27.5",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-simple-import-sort": "^10.0.0",
|
||||
"eslint-plugin-vue": "^9.10.0",
|
||||
"vue-eslint-parser": "^9.1.1"
|
||||
"eslint-plugin-vue": "^9.15.1",
|
||||
"vue-eslint-parser": "^9.3.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,18 +31,18 @@
|
||||
"stub": "pnpm unbuild --stub"
|
||||
},
|
||||
"devDependencies": {
|
||||
"postcss": "^8.4.21",
|
||||
"postcss": "^8.4.24",
|
||||
"postcss-html": "^1.5.0",
|
||||
"postcss-less": "^6.0.0",
|
||||
"postcss-scss": "^4.0.6",
|
||||
"prettier": "^2.8.7",
|
||||
"stylelint": "^15.4.0",
|
||||
"prettier": "^2.8.8",
|
||||
"stylelint": "^15.9.0",
|
||||
"stylelint-config-property-sort-order-smacss": "^9.1.0",
|
||||
"stylelint-config-recommended": "^11.0.0",
|
||||
"stylelint-config-recommended-scss": "^9.0.1",
|
||||
"stylelint-config-recommended": "^12.0.0",
|
||||
"stylelint-config-recommended-scss": "^12.0.0",
|
||||
"stylelint-config-recommended-vue": "^1.4.0",
|
||||
"stylelint-config-standard": "^32.0.0",
|
||||
"stylelint-config-standard-scss": "^7.0.1",
|
||||
"stylelint-config-standard": "^33.0.0",
|
||||
"stylelint-config-standard-scss": "^10.0.0",
|
||||
"stylelint-order": "^6.0.3",
|
||||
"stylelint-prettier": "^3.0.0"
|
||||
}
|
||||
|
||||
@@ -19,8 +19,7 @@
|
||||
"node-server.json"
|
||||
],
|
||||
"dependencies": {
|
||||
"@types/node": "^18.15.11",
|
||||
"unplugin-vue-define-options": "^1.3.3",
|
||||
"vite": "^4.3.0-beta.2"
|
||||
"@types/node": "^20.3.3",
|
||||
"vite": "^4.3.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,5 @@
|
||||
"jsx": "preserve",
|
||||
"lib": ["ESNext", "DOM"],
|
||||
"noImplicitAny": false
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,25 +32,24 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/colors": "^7.0.0",
|
||||
"vite": "^4.3.0-beta.2"
|
||||
"vite": "^4.3.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/fs-extra": "^11.0.1",
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.1",
|
||||
"ant-design-vue": "^3.2.17",
|
||||
"dayjs": "^1.11.7",
|
||||
"dotenv": "^16.0.3",
|
||||
"ant-design-vue": "^3.2.20",
|
||||
"dayjs": "^1.11.9",
|
||||
"dotenv": "^16.3.1",
|
||||
"fs-extra": "^11.1.1",
|
||||
"less": "^4.1.3",
|
||||
"picocolors": "^1.0.0",
|
||||
"pkg-types": "^1.0.2",
|
||||
"rollup-plugin-visualizer": "^5.9.0",
|
||||
"sass": "^1.60.0",
|
||||
"unocss": "^0.50.6",
|
||||
"unplugin-vue-define-options": "^1.3.3",
|
||||
"pkg-types": "^1.0.3",
|
||||
"rollup-plugin-visualizer": "^5.9.2",
|
||||
"sass": "^1.63.6",
|
||||
"unocss": "^0.53.4",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-dts": "^2.2.0",
|
||||
"vite-plugin-dts": "^3.0.2",
|
||||
"vite-plugin-html": "^3.2.0",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"vite-plugin-purge-icons": "^0.9.2",
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx';
|
||||
// @ts-ignore: type unless
|
||||
import DefineOptions from 'unplugin-vue-define-options/vite';
|
||||
import { type PluginOption } from 'vite';
|
||||
import purgeIcons from 'vite-plugin-purge-icons';
|
||||
import vueSetupExtend from 'vite-plugin-vue-setup-extend';
|
||||
@@ -22,12 +20,7 @@ interface Options {
|
||||
}
|
||||
|
||||
async function createPlugins({ isBuild, root, enableMock, compress, enableAnalyze }: Options) {
|
||||
const vitePlugins: (PluginOption | PluginOption[])[] = [
|
||||
vue(),
|
||||
vueJsx(),
|
||||
vueSetupExtend(),
|
||||
DefineOptions(),
|
||||
];
|
||||
const vitePlugins: (PluginOption | PluginOption[])[] = [vue(), vueJsx()];
|
||||
|
||||
const appConfigPlugin = await createAppConfigPlugin({ root, isBuild });
|
||||
vitePlugins.push(appConfigPlugin);
|
||||
|
||||
@@ -16,14 +16,14 @@ import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
|
||||
// return pre;
|
||||
// }, [] as any[]);
|
||||
|
||||
const modules = import.meta.globEager('./**/*.ts');
|
||||
const modules = import.meta.glob('./**/*.ts', { eager: true });
|
||||
|
||||
const mockModules: any[] = [];
|
||||
Object.keys(modules).forEach((key) => {
|
||||
if (key.includes('/_')) {
|
||||
return;
|
||||
}
|
||||
mockModules.push(...modules[key].default);
|
||||
mockModules.push(...(modules as Recordable)[key].default);
|
||||
});
|
||||
|
||||
/**
|
||||
|
||||
72
package.json
72
package.json
@@ -68,20 +68,20 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons-vue": "^6.1.0",
|
||||
"@iconify/iconify": "^3.1.0",
|
||||
"@logicflow/core": "^1.2.1",
|
||||
"@logicflow/extension": "^1.2.1",
|
||||
"@iconify/iconify": "^3.1.1",
|
||||
"@logicflow/core": "^1.2.9",
|
||||
"@logicflow/extension": "^1.2.9",
|
||||
"@vben/hooks": "workspace:*",
|
||||
"@vue/shared": "^3.2.47",
|
||||
"@vueuse/core": "^9.13.0",
|
||||
"@vueuse/shared": "^9.13.0",
|
||||
"@zxcvbn-ts/core": "^2.2.1",
|
||||
"ant-design-vue": "^3.2.17",
|
||||
"axios": "^1.3.5",
|
||||
"@vue/shared": "^3.3.4",
|
||||
"@vueuse/core": "^10.2.1",
|
||||
"@vueuse/shared": "^10.2.1",
|
||||
"@zxcvbn-ts/core": "^3.0.2",
|
||||
"ant-design-vue": "^3.2.20",
|
||||
"axios": "^1.4.0",
|
||||
"codemirror": "^5.65.12",
|
||||
"cropperjs": "^1.5.13",
|
||||
"crypto-js": "^4.1.1",
|
||||
"dayjs": "^1.11.7",
|
||||
"dayjs": "^1.11.9",
|
||||
"echarts": "^5.4.2",
|
||||
"exceljs": "^4.3.0",
|
||||
"intro.js": "^7.0.1",
|
||||
@@ -89,64 +89,64 @@
|
||||
"mockjs": "^1.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"path-to-regexp": "^6.2.1",
|
||||
"pinia": "2.0.33",
|
||||
"pinia": "2.1.4",
|
||||
"print-js": "^1.6.0",
|
||||
"qrcode": "^1.5.1",
|
||||
"qs": "^6.11.1",
|
||||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.11.2",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"showdown": "^2.1.0",
|
||||
"sortablejs": "^1.15.0",
|
||||
"tinymce": "^5.10.7",
|
||||
"vditor": "^3.9.1",
|
||||
"vue": "^3.2.47",
|
||||
"vditor": "^3.9.4",
|
||||
"vue": "^3.3.4",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-json-pretty": "^2.2.4",
|
||||
"vue-router": "^4.1.6",
|
||||
"vue-types": "^5.0.2",
|
||||
"vue-router": "^4.2.2",
|
||||
"vue-types": "^5.1.0",
|
||||
"vuedraggable": "^4.1.0",
|
||||
|
||||
"vxe-table": "^4.4.5",
|
||||
|
||||
"vxe-table-plugin-export-xlsx": "^3.0.4",
|
||||
"xe-utils": "^3.5.7",
|
||||
"xe-utils": "^3.5.11",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^17.5.1",
|
||||
"@commitlint/config-conventional": "^17.4.4",
|
||||
"@iconify/json": "^2.2.46",
|
||||
"@commitlint/cli": "^17.6.6",
|
||||
"@commitlint/config-conventional": "^17.6.6",
|
||||
"@iconify/json": "^2.2.85",
|
||||
"@purge-icons/generated": "^0.9.0",
|
||||
"@types/codemirror": "^5.60.7",
|
||||
"@types/codemirror": "^5.60.8",
|
||||
"@types/crypto-js": "^4.1.1",
|
||||
"@types/intro.js": "^5.1.1",
|
||||
"@types/lodash-es": "^4.17.7",
|
||||
"@types/mockjs": "^1.0.7",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/qrcode": "^1.5.0",
|
||||
"@types/qrcode": "^1.5.1",
|
||||
"@types/qs": "^6.9.7",
|
||||
"@types/showdown": "^2.0.0",
|
||||
"@types/showdown": "^2.0.1",
|
||||
"@types/sortablejs": "^1.15.1",
|
||||
"@vben/eslint-config": "workspace:*",
|
||||
"@vben/stylelint-config": "workspace:*",
|
||||
"@vben/ts-config": "workspace:*",
|
||||
"@vben/types": "workspace:*",
|
||||
"@vben/vite-config": "workspace:*",
|
||||
"@vue/compiler-sfc": "^3.2.47",
|
||||
"@vue/test-utils": "^2.3.2",
|
||||
"@vue/compiler-sfc": "^3.3.4",
|
||||
"@vue/test-utils": "^2.4.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"cz-git": "^1.6.1",
|
||||
"czg": "^1.6.1",
|
||||
"husky": "^8.0.3",
|
||||
"lint-staged": "13.2.0",
|
||||
"prettier": "^2.8.7",
|
||||
"lint-staged": "13.2.3",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-packagejson": "^2.4.3",
|
||||
"rimraf": "^4.4.1",
|
||||
"turbo": "^1.8.8",
|
||||
"typescript": "^5.0.3",
|
||||
"unbuild": "^1.2.0",
|
||||
"unplugin-vue-define-options": "^1.3.3",
|
||||
"vite": "^4.3.0-beta.2",
|
||||
"rimraf": "^5.0.1",
|
||||
"turbo": "^1.10.7",
|
||||
"typescript": "^5.1.6",
|
||||
"unbuild": "^1.2.1",
|
||||
"vite": "^4.3.9",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"vite-plugin-vue-setup-extend": "^0.4.0",
|
||||
"vue-tsc": "^1.2.0"
|
||||
"vue-tsc": "^1.8.3"
|
||||
},
|
||||
"packageManager": "pnpm@8.1.0",
|
||||
"engines": {
|
||||
|
||||
@@ -29,8 +29,8 @@
|
||||
"lint": "pnpm eslint ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueuse/core": "^9.13.0",
|
||||
"vue": "^3.2.47"
|
||||
"@vueuse/core": "^10.2.1",
|
||||
"vue": "^3.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vben/types": "workspace:*"
|
||||
|
||||
4259
pnpm-lock.yaml
generated
4259
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -9,20 +9,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'PageFooter',
|
||||
inheritAttrs: false,
|
||||
setup() {
|
||||
const { prefixCls } = useDesign('page-footer');
|
||||
const { getCalcContentWidth } = useMenuSetting();
|
||||
return { prefixCls, getCalcContentWidth };
|
||||
},
|
||||
});
|
||||
|
||||
const { prefixCls } = useDesign('page-footer');
|
||||
const { getCalcContentWidth } = useMenuSetting();
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-page-footer';
|
||||
|
||||
@@ -32,16 +32,17 @@
|
||||
</PageFooter>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
CSSProperties,
|
||||
PropType,
|
||||
provide,
|
||||
defineComponent,
|
||||
computed,
|
||||
watch,
|
||||
ref,
|
||||
unref,
|
||||
useAttrs,
|
||||
useSlots,
|
||||
} from 'vue';
|
||||
|
||||
import PageFooter from './PageFooter.vue';
|
||||
@@ -53,122 +54,109 @@
|
||||
import { useContentHeight } from '/@/hooks/web/useContentHeight';
|
||||
import { PageWrapperFixedHeightKey } from '/@/enums/pageEnum';
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'PageWrapper',
|
||||
components: { PageFooter, PageHeader },
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
title: propTypes.string,
|
||||
dense: propTypes.bool,
|
||||
ghost: propTypes.bool,
|
||||
content: propTypes.string,
|
||||
contentStyle: {
|
||||
type: Object as PropType<CSSProperties>,
|
||||
},
|
||||
contentBackground: propTypes.bool,
|
||||
contentFullHeight: propTypes.bool,
|
||||
contentClass: propTypes.string,
|
||||
fixedHeight: propTypes.bool,
|
||||
upwardSpace: propTypes.oneOfType([propTypes.number, propTypes.string]).def(0),
|
||||
},
|
||||
setup(props, { slots, attrs }) {
|
||||
const wrapperRef = ref(null);
|
||||
const headerRef = ref(null);
|
||||
const contentRef = ref(null);
|
||||
const footerRef = ref(null);
|
||||
const { prefixCls } = useDesign('page-wrapper');
|
||||
|
||||
provide(
|
||||
PageWrapperFixedHeightKey,
|
||||
computed(() => props.fixedHeight),
|
||||
);
|
||||
|
||||
const getIsContentFullHeight = computed(() => {
|
||||
return props.contentFullHeight;
|
||||
});
|
||||
|
||||
const getUpwardSpace = computed(() => props.upwardSpace);
|
||||
const { redoHeight, setCompensation, contentHeight } = useContentHeight(
|
||||
getIsContentFullHeight,
|
||||
wrapperRef,
|
||||
[headerRef, footerRef],
|
||||
[contentRef],
|
||||
getUpwardSpace,
|
||||
);
|
||||
setCompensation({ useLayoutFooter: true, elements: [footerRef] });
|
||||
|
||||
const getClass = computed(() => {
|
||||
return [
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}--dense`]: props.dense,
|
||||
},
|
||||
attrs.class ?? {},
|
||||
];
|
||||
});
|
||||
|
||||
const getShowHeader = computed(
|
||||
() => props.content || slots?.headerContent || props.title || getHeaderSlots.value.length,
|
||||
);
|
||||
|
||||
const getShowFooter = computed(() => slots?.leftFooter || slots?.rightFooter);
|
||||
|
||||
const getHeaderSlots = computed(() => {
|
||||
return Object.keys(omit(slots, 'default', 'leftFooter', 'rightFooter', 'headerContent'));
|
||||
});
|
||||
|
||||
const getContentStyle = computed((): CSSProperties => {
|
||||
const { contentFullHeight, contentStyle, fixedHeight } = props;
|
||||
if (!contentFullHeight) {
|
||||
return { ...contentStyle };
|
||||
}
|
||||
|
||||
const height = `${unref(contentHeight)}px`;
|
||||
return {
|
||||
...contentStyle,
|
||||
minHeight: height,
|
||||
...(fixedHeight ? { height } : {}),
|
||||
};
|
||||
});
|
||||
|
||||
const getContentClass = computed(() => {
|
||||
const { contentBackground, contentClass } = props;
|
||||
return [
|
||||
`${prefixCls}-content`,
|
||||
contentClass,
|
||||
{
|
||||
[`${prefixCls}-content-bg`]: contentBackground,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
watch(
|
||||
() => [getShowFooter.value],
|
||||
() => {
|
||||
redoHeight();
|
||||
},
|
||||
{
|
||||
flush: 'post',
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
getContentStyle,
|
||||
wrapperRef,
|
||||
headerRef,
|
||||
contentRef,
|
||||
footerRef,
|
||||
getClass,
|
||||
getHeaderSlots,
|
||||
prefixCls,
|
||||
getShowHeader,
|
||||
getShowFooter,
|
||||
omit,
|
||||
getContentClass,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
title: propTypes.string,
|
||||
dense: propTypes.bool,
|
||||
ghost: propTypes.bool,
|
||||
content: propTypes.string,
|
||||
contentStyle: {
|
||||
type: Object as PropType<CSSProperties>,
|
||||
},
|
||||
contentBackground: propTypes.bool,
|
||||
contentFullHeight: propTypes.bool.def(false),
|
||||
contentClass: propTypes.string,
|
||||
fixedHeight: propTypes.bool,
|
||||
upwardSpace: propTypes.oneOfType([propTypes.number, propTypes.string]).def(0),
|
||||
});
|
||||
|
||||
const attrs = useAttrs();
|
||||
const slots = useSlots();
|
||||
|
||||
const wrapperRef = ref(null);
|
||||
const headerRef = ref(null);
|
||||
const contentRef = ref(null);
|
||||
const footerRef = ref(null);
|
||||
const { prefixCls } = useDesign('page-wrapper');
|
||||
|
||||
provide(
|
||||
PageWrapperFixedHeightKey,
|
||||
computed(() => props.fixedHeight),
|
||||
);
|
||||
|
||||
const getIsContentFullHeight = computed(() => {
|
||||
return props.contentFullHeight;
|
||||
});
|
||||
|
||||
const getUpwardSpace = computed(() => props.upwardSpace);
|
||||
const { redoHeight, setCompensation, contentHeight } = useContentHeight(
|
||||
getIsContentFullHeight,
|
||||
wrapperRef,
|
||||
[headerRef, footerRef],
|
||||
[contentRef],
|
||||
getUpwardSpace,
|
||||
);
|
||||
setCompensation({ useLayoutFooter: true, elements: [footerRef] });
|
||||
|
||||
const getClass = computed(() => {
|
||||
return [
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}--dense`]: props.dense,
|
||||
},
|
||||
attrs.class ?? {},
|
||||
];
|
||||
});
|
||||
|
||||
const getShowHeader = computed(
|
||||
() => props.content || slots?.headerContent || props.title || getHeaderSlots.value.length,
|
||||
);
|
||||
|
||||
const getShowFooter = computed(() => slots?.leftFooter || slots?.rightFooter);
|
||||
|
||||
const getHeaderSlots = computed(() => {
|
||||
return Object.keys(omit(slots, 'default', 'leftFooter', 'rightFooter', 'headerContent'));
|
||||
});
|
||||
|
||||
const getContentStyle = computed((): CSSProperties => {
|
||||
const { contentFullHeight, contentStyle, fixedHeight } = props;
|
||||
if (!contentFullHeight) {
|
||||
return { ...contentStyle };
|
||||
}
|
||||
|
||||
const height = `${unref(contentHeight)}px`;
|
||||
return {
|
||||
...contentStyle,
|
||||
minHeight: height,
|
||||
...(fixedHeight ? { height } : {}),
|
||||
};
|
||||
});
|
||||
|
||||
const getContentClass = computed(() => {
|
||||
const { contentBackground, contentClass } = props;
|
||||
return [
|
||||
`${prefixCls}-content`,
|
||||
contentClass,
|
||||
{
|
||||
[`${prefixCls}-content-bg`]: contentBackground,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
watch(
|
||||
() => [getShowFooter.value],
|
||||
() => {
|
||||
redoHeight();
|
||||
},
|
||||
{
|
||||
flush: 'post',
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-page-wrapper';
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
.ant-input {
|
||||
&-number,
|
||||
&-number-group-wrapper {
|
||||
min-width: 110px;
|
||||
width: 100% !important;
|
||||
min-width: 110px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,9 +16,9 @@ html[data-theme='dark'] {
|
||||
}
|
||||
|
||||
.ant-pagination-item-active {
|
||||
background-color: @primary-color !important;
|
||||
border: none;
|
||||
border-radius: none !important;
|
||||
background-color: @primary-color !important;
|
||||
|
||||
a {
|
||||
color: @white !important;
|
||||
@@ -32,9 +32,9 @@ html[data-theme='dark'] {
|
||||
&.mini {
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next {
|
||||
font-size: 12px;
|
||||
color: @text-color-base;
|
||||
border: 1px solid;
|
||||
color: @text-color-base;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ant-pagination-prev:hover,
|
||||
@@ -50,9 +50,9 @@ html[data-theme='dark'] {
|
||||
.ant-pagination-next,
|
||||
.ant-pagination-item {
|
||||
margin: 0 4px !important;
|
||||
background-color: #f4f4f5 !important;
|
||||
border: none;
|
||||
border-radius: none !important;
|
||||
background-color: #f4f4f5 !important;
|
||||
|
||||
a {
|
||||
margin-top: 1px;
|
||||
@@ -65,9 +65,9 @@ html[data-theme='dark'] {
|
||||
}
|
||||
|
||||
.ant-pagination-item-active {
|
||||
background-color: @primary-color !important;
|
||||
border: none;
|
||||
border-radius: none !important;
|
||||
background-color: @primary-color !important;
|
||||
|
||||
a {
|
||||
color: @white !important;
|
||||
|
||||
@@ -46,7 +46,7 @@ span {
|
||||
|
||||
// 保持 和 windi 一样的全局样式，减少升级带来的影响
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@@ -21,10 +21,10 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
// background: rgba(0, 0, 0, 0.6);
|
||||
background-color: rgb(144 147 153 / 30%);
|
||||
// background-color: rgba(144, 147, 153, 0.3);
|
||||
border-radius: 2px;
|
||||
// background: rgba(0, 0, 0, 0.6);
|
||||
background-color: rgb(144 147 153 / 30%);
|
||||
box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
@@ -40,12 +40,12 @@
|
||||
|
||||
.bar {
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99999;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: @primary-color;
|
||||
opacity: 0.75;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,18 +8,18 @@ html[data-theme='light'] {
|
||||
}
|
||||
|
||||
.ant-alert-success {
|
||||
background-color: #f6ffed;
|
||||
border: 1px solid #b7eb8f;
|
||||
background-color: #f6ffed;
|
||||
}
|
||||
|
||||
.ant-alert-error {
|
||||
background-color: #fff2f0;
|
||||
border: 1px solid #ffccc7;
|
||||
background-color: #fff2f0;
|
||||
}
|
||||
|
||||
.ant-alert-warning {
|
||||
background-color: #fffbe6;
|
||||
border: 1px solid #ffe58f;
|
||||
background-color: #fffbe6;
|
||||
}
|
||||
|
||||
:not(:root):fullscreen::backdrop {
|
||||
|
||||
@@ -27,13 +27,13 @@
|
||||
}
|
||||
|
||||
.fade-slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// ///////////////////////////////////////////////
|
||||
@@ -47,13 +47,13 @@
|
||||
}
|
||||
|
||||
.fade-bottom-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-bottom-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(10%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// fade-scale
|
||||
@@ -63,13 +63,13 @@
|
||||
}
|
||||
|
||||
.fade-scale-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-scale-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// ///////////////////////////////////////////////
|
||||
@@ -83,11 +83,11 @@
|
||||
}
|
||||
|
||||
.fade-top-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(8%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-top-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
&-enter-from,
|
||||
&-leave,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
&-enter-from,
|
||||
&-leave,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0) rotate(-45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-15px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,8 +23,8 @@
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(15px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
|
||||
.zoom-out-enter-from,
|
||||
.zoom-out-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// zoom-fade
|
||||
@@ -17,11 +17,11 @@
|
||||
}
|
||||
|
||||
.zoom-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(0.92);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.zoom-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(1.06);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
|
||||
|
||||
import SessionTimeoutLogin from '/@/views/sys/login/SessionTimeoutLogin.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LayoutFeatures',
|
||||
components: {
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
import { useFullscreen } from '@vueuse/core';
|
||||
|
||||
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FullScreen',
|
||||
components: { FullscreenExitOutlined, FullscreenOutlined, Tooltip },
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import { useLockStore } from '/@/store/modules/lock';
|
||||
import headerImg from '/@/assets/images/header.jpg';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LockModal',
|
||||
components: { BasicModal, BasicForm },
|
||||
|
||||
@@ -59,6 +59,7 @@
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { List, Avatar, Tag, Typography } from 'ant-design-vue';
|
||||
import { isNumber } from '/@/utils/is';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
[Avatar.name]: Avatar,
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
|
||||
import { menuTypeList } from '../enum';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MenuTypePicker',
|
||||
components: { Tooltip },
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
import { useAppInject } from '/@/hooks/web/useAppInject';
|
||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SiderWrapper',
|
||||
components: { Sider, Drawer, MixSider },
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { genMessage } from '../helper';
|
||||
import antdLocale from 'ant-design-vue/es/locale/en_US';
|
||||
|
||||
const modules = import.meta.globEager('./en/**/*.ts');
|
||||
const modules = import.meta.glob('./en/**/*.ts', { eager: true });
|
||||
export default {
|
||||
message: {
|
||||
...genMessage(modules, 'en'),
|
||||
...genMessage(modules as Recordable<Recordable>, 'en'),
|
||||
antdLocale,
|
||||
},
|
||||
dateLocale: null,
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { genMessage } from '../helper';
|
||||
import antdLocale from 'ant-design-vue/es/locale/zh_CN';
|
||||
|
||||
const modules = import.meta.globEager('./zh-CN/**/*.ts');
|
||||
const modules = import.meta.glob('./zh-CN/**/*.ts', { eager: true });
|
||||
export default {
|
||||
message: {
|
||||
...genMessage(modules, 'zh-CN'),
|
||||
...genMessage(modules as Recordable<Recordable>, 'zh-CN'),
|
||||
antdLocale,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -10,12 +10,12 @@ import { router } from '/@/router';
|
||||
import { PermissionModeEnum } from '/@/enums/appEnum';
|
||||
import { pathToRegexp } from 'path-to-regexp';
|
||||
|
||||
const modules = import.meta.globEager('./modules/**/*.ts');
|
||||
const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
|
||||
|
||||
const menuModules: MenuModule[] = [];
|
||||
|
||||
Object.keys(modules).forEach((key) => {
|
||||
const mod = modules[key].default || {};
|
||||
const mod = (modules as Recordable)[key].default || {};
|
||||
const modList = Array.isArray(mod) ? [...mod] : [mod];
|
||||
menuModules.push(...modList);
|
||||
});
|
||||
|
||||
@@ -6,13 +6,13 @@ import { mainOutRoutes } from './mainOut';
|
||||
import { PageEnum } from '/@/enums/pageEnum';
|
||||
import { t } from '/@/hooks/web/useI18n';
|
||||
|
||||
// import.meta.globEager() 直接引入所有的模块 Vite 独有的功能
|
||||
const modules = import.meta.globEager('./modules/**/*.ts');
|
||||
// import.meta.glob() 直接引入所有的模块 Vite 独有的功能
|
||||
const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
|
||||
const routeModuleList: AppRouteModule[] = [];
|
||||
|
||||
// 加入到路由集合中
|
||||
Object.keys(modules).forEach((key) => {
|
||||
const mod = modules[key].default || {};
|
||||
const mod = (modules as Recordable)[key].default || {};
|
||||
const modList = Array.isArray(mod) ? [...mod] : [mod];
|
||||
routeModuleList.push(...modList);
|
||||
});
|
||||
|
||||
@@ -320,7 +320,7 @@ export const useMultipleTabStore = defineStore({
|
||||
}
|
||||
this.bulkCloseTabs(pathList);
|
||||
this.updateCacheTab();
|
||||
Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList, true)
|
||||
Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList, true);
|
||||
handleGotoPage(router);
|
||||
},
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
import { Ref, ref, watch } from 'vue';
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
width: {
|
||||
|
||||
@@ -106,6 +106,7 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { Card, Row, Col } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { PageWrapper, ACard: Card, ARow: Row, ACol: Col },
|
||||
});
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { demoListApi } from '/@/api/demo/table';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
|
||||
const { notification } = useMessage();
|
||||
// 请求api时附带参数
|
||||
const params = {};
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { BasicDrawer } from '/@/components/Drawer';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicDrawer },
|
||||
setup() {
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicDrawer },
|
||||
setup() {
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { BasicDrawer } from '/@/components/Drawer';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicDrawer },
|
||||
setup() {
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
|
||||
|
||||
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
|
||||
|
||||
const schemas: FormSchema[] = [
|
||||
{
|
||||
field: 'field1',
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { BasicDrawer } from '/@/components/Drawer';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicDrawer },
|
||||
});
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
|
||||
import demoData from './dataTurbo.json';
|
||||
|
||||
export default {
|
||||
components: { FlowChart, PageWrapper },
|
||||
setup() {
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, watch } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicModal },
|
||||
setup() {
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicModal },
|
||||
setup() {
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { BasicModal } from '/@/components/Modal';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicModal },
|
||||
setup() {
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
import { defineComponent, ref, nextTick } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
|
||||
|
||||
const schemas: FormSchema[] = [
|
||||
{
|
||||
field: 'field1',
|
||||
|
||||
@@ -42,6 +42,7 @@
|
||||
import Modal3 from './Modal3.vue';
|
||||
import Modal4 from './Modal4.vue';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { type Nullable } from '@vben/types';
|
||||
|
||||
export default defineComponent({
|
||||
components: { Alert, Modal1, Modal2, Modal3, Modal4, PageWrapper, ASpace: Space },
|
||||
|
||||
@@ -80,6 +80,7 @@
|
||||
import LogoImg from '/@/assets/images/logo.png';
|
||||
import { CollapseContainer } from '/@/components/Container/index';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { type Nullable } from '@vben/types';
|
||||
|
||||
const qrCodeUrl = 'https://www.vvbin.cn';
|
||||
export default defineComponent({
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
import { defineComponent, ref, unref } from 'vue';
|
||||
import { ScrollContainer, ScrollActionType } from '/@/components/Container/index';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { type Nullable } from '@vben/types';
|
||||
|
||||
export default defineComponent({
|
||||
components: { ScrollContainer, PageWrapper },
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
|
||||
import { Divider } from 'ant-design-vue';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
|
||||
const data = (() => {
|
||||
const arr: any[] = [];
|
||||
for (let index = 1; index < 20000; index++) {
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { BugOutlined, RightOutlined } from '@ant-design/icons-vue';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { type Nullable } from '@vben/types';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicDragVerify, BugOutlined, RightOutlined, PageWrapper },
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
import { MarkDown, MarkDownActionType, MarkdownViewer } from '/@/components/Markdown';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { type Nullable } from '@vben/types';
|
||||
|
||||
export default defineComponent({
|
||||
components: { MarkDown, PageWrapper, MarkdownViewer, ACard: Card },
|
||||
|
||||
@@ -6,5 +6,6 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
|
||||
export default defineComponent({ components: { PageWrapper } });
|
||||
</script>
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
import { useFullscreen } from '@vueuse/core';
|
||||
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { type Nullable } from '@vben/types';
|
||||
|
||||
export default defineComponent({
|
||||
components: { CollapseContainer, PageWrapper },
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
import { CollapseContainer } from '/@/components/Container/index';
|
||||
import { useWatermark } from '/@/hooks/web/useWatermark';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { type Nullable } from '@vben/types';
|
||||
|
||||
export default defineComponent({
|
||||
components: { CollapseContainer, PageWrapper },
|
||||
|
||||
@@ -70,6 +70,7 @@
|
||||
import { CollapseContainer } from '/@/components/Container/index';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { type Nullable } from '@vben/types';
|
||||
|
||||
const schemas: FormSchema[] = [
|
||||
{
|
||||
|
||||
@@ -8,5 +8,6 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { Input } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({ name: 'Menu111Demo', components: { Input } });
|
||||
</script>
|
||||
|
||||
@@ -8,5 +8,6 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { Input } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({ name: 'Menu12Demo', components: { Input } });
|
||||
</script>
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { Input } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Menu2Demo',
|
||||
components: { Input },
|
||||
|
||||
@@ -41,6 +41,7 @@
|
||||
refundTableData,
|
||||
refundTimeTableData,
|
||||
} from './data';
|
||||
|
||||
export default defineComponent({
|
||||
components: { Description, BasicTable, PageWrapper, [Divider.name]: Divider },
|
||||
setup() {
|
||||
|
||||
@@ -99,6 +99,7 @@
|
||||
import { Divider, Card, Empty, Descriptions, Steps, Tabs } from 'ant-design-vue';
|
||||
|
||||
import { refundTimeTableSchema, refundTimeTableData } from './data';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
BasicTable,
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
import { step1Schemas } from './data';
|
||||
|
||||
import { Select, Input, Divider } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
BasicForm,
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { Result, Descriptions } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
[Result.name]: Result,
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { Result } from 'ant-design-vue';
|
||||
import { CloseCircleOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Result,
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { Result, Steps, Descriptions } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Result,
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
import { PermissionModeEnum } from '/@/enums/appEnum';
|
||||
import { Divider } from 'ant-design-vue';
|
||||
import { usePermission } from '/@/hooks/web/usePermission';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CurrentPermissionMode',
|
||||
components: { Divider },
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
@@ -26,37 +26,36 @@
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { useGo } from '/@/hooks/web/usePage';
|
||||
import { useTabs } from '/@/hooks/web/useTabs';
|
||||
import { Tabs } from 'ant-design-vue';
|
||||
export default defineComponent({
|
||||
name: 'AccountDetail',
|
||||
components: { PageWrapper, ATabs: Tabs, ATabPane: Tabs.TabPane },
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const go = useGo();
|
||||
// 此处可以得到用户ID
|
||||
const userId = ref(route.params?.id);
|
||||
const currentKey = ref('detail');
|
||||
const { setTitle } = useTabs();
|
||||
// TODO
|
||||
// 本页代码仅作演示，实际应当通过userId从接口获得用户的相关资料
|
||||
|
||||
// 设置Tab的标题（不会影响页面标题）
|
||||
setTitle('详情：用户' + userId.value);
|
||||
defineOptions({ name: 'AccountDetail' });
|
||||
|
||||
// 页面左侧点击返回链接时的操作
|
||||
function goBack() {
|
||||
// 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
|
||||
go('/system/account');
|
||||
}
|
||||
return { userId, currentKey, goBack };
|
||||
},
|
||||
});
|
||||
const ATabs = Tabs;
|
||||
const ATabPane = Tabs.TabPane;
|
||||
|
||||
const route = useRoute();
|
||||
const go = useGo();
|
||||
// 此处可以得到用户ID
|
||||
const userId = ref(route.params?.id);
|
||||
const currentKey = ref('detail');
|
||||
const { setTitle } = useTabs();
|
||||
// TODO
|
||||
// 本页代码仅作演示，实际应当通过userId从接口获得用户的相关资料
|
||||
|
||||
// 设置Tab的标题（不会影响页面标题）
|
||||
setTitle('详情：用户' + userId.value);
|
||||
|
||||
// 页面左侧点击返回链接时的操作
|
||||
function goBack() {
|
||||
// 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
|
||||
go('/system/account');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
import { formSchema } from './dept.data';
|
||||
|
||||
import { getDeptList } from '/@/api/demo/system';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DeptModal',
|
||||
components: { BasicModal, BasicForm },
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
import { BasicForm, useForm } from '/@/components/Form';
|
||||
|
||||
import { formSchema } from './pwd.data';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ChangePassword',
|
||||
components: { BasicForm, PageWrapper },
|
||||
|
||||
@@ -61,6 +61,7 @@
|
||||
import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
|
||||
|
||||
import { demoListApi } from '/@/api/demo/table';
|
||||
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '编号',
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
import { BasicTable, useTable, BasicColumn, TableImg } from '/@/components/Table';
|
||||
import { Tag, Avatar } from 'ant-design-vue';
|
||||
import { demoListApi } from '/@/api/demo/table';
|
||||
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: 'ID',
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
import { treeOptionsListApi } from '/@/api/demo/tree';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { Progress } from 'ant-design-vue';
|
||||
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '输入框',
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
|
||||
import { demoListApi } from '/@/api/demo/table';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicTable, PageWrapper },
|
||||
setup() {
|
||||
|
||||
@@ -31,6 +31,7 @@
|
||||
import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
|
||||
|
||||
import { demoListApi } from '/@/api/demo/table';
|
||||
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: 'ID',
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
import { getMultipleHeaderColumns } from './tableData';
|
||||
|
||||
import { demoListApi } from '/@/api/demo/table';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicTable },
|
||||
setup() {
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
import { getBasicColumns, getBasicShortColumns } from './tableData';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { demoListApi } from '/@/api/demo/table';
|
||||
import { type Nullable } from '@vben/types';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicTable },
|
||||
|
||||
@@ -33,6 +33,7 @@
|
||||
import { treeData } from './data';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { type Nullable } from '@vben/types';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicTree, PageWrapper },
|
||||
|
||||
@@ -53,96 +53,79 @@
|
||||
</Row>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, nextTick, ref, unref } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, ref, unref } from 'vue';
|
||||
import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree/index';
|
||||
import { treeData } from './data';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { Card, Row, Col, Spin } from 'ant-design-vue';
|
||||
import { cloneDeep, uniq } from 'lodash-es';
|
||||
import { isArray } from '/@/utils/is';
|
||||
import { type Nullable } from '@vben/types';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicTree, PageWrapper, Card, Row, Col, Spin },
|
||||
setup() {
|
||||
const asyncTreeRef = ref<Nullable<TreeActionType>>(null);
|
||||
const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
|
||||
const loadTreeRef = ref<Nullable<TreeActionType>>(null);
|
||||
const tree2 = ref<TreeItem[]>([]);
|
||||
const treeLoading = ref(false);
|
||||
const asyncTreeRef = ref<Nullable<TreeActionType>>(null);
|
||||
const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
|
||||
const loadTreeRef = ref<Nullable<TreeActionType>>(null);
|
||||
const tree2 = ref<TreeItem[]>([]);
|
||||
const treeLoading = ref(false);
|
||||
|
||||
function handleCheck(checkedKeys, e) {
|
||||
console.log('onChecked', checkedKeys, e);
|
||||
}
|
||||
function handleCheck(checkedKeys, e) {
|
||||
console.log('onChecked', checkedKeys, e);
|
||||
}
|
||||
|
||||
function loadTreeData() {
|
||||
treeLoading.value = true;
|
||||
// 以下是模拟异步获取数据
|
||||
setTimeout(() => {
|
||||
// 设置数据源
|
||||
tree2.value = cloneDeep(treeData);
|
||||
treeLoading.value = false;
|
||||
// 展开全部
|
||||
nextTick(() => {
|
||||
console.log(unref(asyncExpandTreeRef));
|
||||
unref(asyncExpandTreeRef)?.expandAll(true);
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
function loadTreeData2() {
|
||||
treeLoading.value = true;
|
||||
// 以下是模拟异步获取数据
|
||||
setTimeout(() => {
|
||||
// 设置数据源
|
||||
tree2.value = cloneDeep(treeData);
|
||||
treeLoading.value = false;
|
||||
}, 2000);
|
||||
}
|
||||
function loadTreeData() {
|
||||
treeLoading.value = true;
|
||||
// 以下是模拟异步获取数据
|
||||
setTimeout(() => {
|
||||
// 设置数据源
|
||||
tree2.value = cloneDeep(treeData);
|
||||
treeLoading.value = false;
|
||||
// 展开全部
|
||||
nextTick(() => {
|
||||
console.log(unref(asyncExpandTreeRef));
|
||||
unref(asyncExpandTreeRef)?.expandAll(true);
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
function loadTreeData2() {
|
||||
treeLoading.value = true;
|
||||
// 以下是模拟异步获取数据
|
||||
setTimeout(() => {
|
||||
// 设置数据源
|
||||
tree2.value = cloneDeep(treeData);
|
||||
treeLoading.value = false;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
const tree = ref([
|
||||
{
|
||||
title: 'parent ',
|
||||
key: '0-0',
|
||||
},
|
||||
]);
|
||||
|
||||
function onLoadData(treeNode) {
|
||||
return new Promise((resolve: (value?: unknown) => void) => {
|
||||
if (isArray(treeNode.children) && treeNode.children.length > 0) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
const asyncTreeAction: TreeActionType | null = unref(asyncTreeRef);
|
||||
if (asyncTreeAction) {
|
||||
const nodeChildren = [
|
||||
{ title: `Child Node ${treeNode.eventKey}-0`, key: `${treeNode.eventKey}-0` },
|
||||
{ title: `Child Node ${treeNode.eventKey}-1`, key: `${treeNode.eventKey}-1` },
|
||||
];
|
||||
asyncTreeAction.updateNodeByKey(treeNode.eventKey, { children: nodeChildren });
|
||||
asyncTreeAction.setExpandedKeys(
|
||||
uniq([treeNode.eventKey, ...asyncTreeAction.getExpandedKeys()]),
|
||||
);
|
||||
}
|
||||
|
||||
resolve();
|
||||
return;
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
return {
|
||||
treeData,
|
||||
handleCheck,
|
||||
tree,
|
||||
onLoadData,
|
||||
asyncTreeRef,
|
||||
asyncExpandTreeRef,
|
||||
loadTreeRef,
|
||||
tree2,
|
||||
loadTreeData,
|
||||
treeLoading,
|
||||
loadTreeData2,
|
||||
};
|
||||
const tree = ref([
|
||||
{
|
||||
title: 'parent ',
|
||||
key: '0-0',
|
||||
},
|
||||
});
|
||||
]);
|
||||
|
||||
function onLoadData(treeNode) {
|
||||
return new Promise((resolve: (value?: unknown) => void) => {
|
||||
if (isArray(treeNode.children) && treeNode.children.length > 0) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
const asyncTreeAction: TreeActionType | null = unref(asyncTreeRef);
|
||||
if (asyncTreeAction) {
|
||||
const nodeChildren = [
|
||||
{ title: `Child Node ${treeNode.eventKey}-0`, key: `${treeNode.eventKey}-0` },
|
||||
{ title: `Child Node ${treeNode.eventKey}-1`, key: `${treeNode.eventKey}-1` },
|
||||
];
|
||||
asyncTreeAction.updateNodeByKey(treeNode.eventKey, { children: nodeChildren });
|
||||
asyncTreeAction.setExpandedKeys(
|
||||
uniq([treeNode.eventKey, ...asyncTreeAction.getExpandedKeys()]),
|
||||
);
|
||||
}
|
||||
|
||||
resolve();
|
||||
return;
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -85,9 +85,10 @@
|
||||
Select,
|
||||
InputNumber,
|
||||
RadioGroup,
|
||||
Col,
|
||||
Row,
|
||||
} from 'ant-design-vue';
|
||||
import RadioButtonGroup from '/@/components/Form/src/components/RadioButtonGroup.vue';
|
||||
import { Col, Row } from 'ant-design-vue';
|
||||
import { computed, defineComponent, ref, watch } from 'vue';
|
||||
import { useFormDesignState } from '../../../hooks/useFormDesignState';
|
||||
import {
|
||||
|
||||
@@ -78,9 +78,17 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { useFormDesignState } from '../../../hooks/useFormDesignState';
|
||||
import { InputNumber, Slider, Checkbox, Col, RadioChangeEvent } from 'ant-design-vue';
|
||||
// import RadioButtonGroup from '/@/components/RadioButtonGroup.vue';
|
||||
import { Form, FormItem, Radio } from 'ant-design-vue';
|
||||
import {
|
||||
InputNumber,
|
||||
Slider,
|
||||
Checkbox,
|
||||
Col,
|
||||
RadioChangeEvent,
|
||||
Form,
|
||||
FormItem,
|
||||
Radio,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FormProps',
|
||||
components: {
|
||||
|
||||
@@ -65,6 +65,7 @@
|
||||
import { useFormDesignState } from '../../../hooks/useFormDesignState';
|
||||
import { IVFormComponent } from '../../../typings/v-form-component';
|
||||
import { Row, Col } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LayoutItem',
|
||||
components: {
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
|
||||
import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PreviewCode',
|
||||
components: {
|
||||
|
||||
@@ -105,6 +105,7 @@
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
|
||||
import { CollapseContainer } from '/@/components/Container/index';
|
||||
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
import { useFormDesignState } from '../../../hooks/useFormDesignState';
|
||||
import { customComponents } from '../../../core/formItemConfig';
|
||||
import { TabPane, Tabs } from 'ant-design-vue';
|
||||
|
||||
type ChangeTabKey = 1 | 2;
|
||||
export interface IPropsPanel {
|
||||
changeTab: (key: ChangeTabKey) => void;
|
||||
|
||||
@@ -36,6 +36,7 @@
|
||||
import JsonModal from '../VFormDesign/components/JsonModal.vue';
|
||||
import { IToolbarMethods } from '../../typings/form-type';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'VFormPreview',
|
||||
components: {
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
name: 'FrameBlank',
|
||||
});
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'FrameBlank' });
|
||||
</script>
|
||||
|
||||
@@ -49,8 +49,7 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { AppLogo } from '/@/components/Application';
|
||||
import { AppLocalePicker } from '/@/components/Application';
|
||||
import { AppLogo, AppLocalePicker } from '/@/components/Application';
|
||||
import LoginForm from './LoginForm.vue';
|
||||
import ForgetPasswordForm from './ForgetPasswordForm.vue';
|
||||
import RegisterForm from './RegisterForm.vue';
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
import { usePermissionStore } from '/@/store/modules/permission';
|
||||
import { useAppStore } from '/@/store/modules/app';
|
||||
import { PermissionModeEnum } from '/@/enums/appEnum';
|
||||
import { type Nullable } from '@vben/types';
|
||||
|
||||
const { prefixCls } = useDesign('st-login');
|
||||
const userStore = useUserStore();
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
"extends": "@vben/ts-config/vue-app.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"types": ["vite/client", "unplugin-vue-define-options/macros-global"],
|
||||
"types": ["vite/client"],
|
||||
"paths": {
|
||||
"/@/*": ["src/*"],
|
||||
"/#/*": ["types/*"],
|
||||
|
||||
Reference in New Issue
Block a user