mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-02-02 18:28:40 +08:00
wip: Upgrade ant-design-vue 3.0
This commit is contained in:
vben
parent
3b3f6c903a
commit
3fcfac1f37
8
.vscode/settings.json
vendored
8
.vscode/settings.json
vendored
@ -1,16 +1,10 @@
|
||||
{
|
||||
"typescript.tsdk": "./node_modules/typescript/lib",
|
||||
"typescript.enablePromptUseWorkspaceTsdk": true,
|
||||
"volar.tsPlugin": true,
|
||||
"volar.tsPluginStatus": false,
|
||||
//===========================================
|
||||
//============= Editor ======================
|
||||
//===========================================
|
||||
"npm.packageManager": "pnpm",
|
||||
"editor.tabSize": 2,
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
//===========================================
|
||||
//============= files =======================
|
||||
//===========================================
|
||||
"files.eol": "\n",
|
||||
"search.exclude": {
|
||||
"**/node_modules": true,
|
||||
|
||||
79
package.json
79
package.json
@ -30,118 +30,119 @@
|
||||
"test:br": "npx http-server dist --cors --brotli -c-1",
|
||||
"reinstall": "rimraf pnpm-lock.yaml && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
|
||||
"prepare": "husky install",
|
||||
"gen:icon": "esno ./build/generate/icon/index.ts"
|
||||
"gen:icon": "esno ./build/generate/icon/index.ts",
|
||||
"preinstall": "npx only-allow pnpm -y"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/colors": "^6.0.0",
|
||||
"@ant-design/icons-vue": "^6.0.1",
|
||||
"@iconify/iconify": "^2.0.4",
|
||||
"@logicflow/core": "^0.7.5",
|
||||
"@logicflow/extension": "^0.7.5",
|
||||
"@vueuse/core": "^6.8.0",
|
||||
"@vueuse/shared": "^6.8.0",
|
||||
"@iconify/iconify": "^2.1.0",
|
||||
"@logicflow/core": "^0.7.9",
|
||||
"@logicflow/extension": "^0.7.9",
|
||||
"@vueuse/core": "^7.0.3",
|
||||
"@vueuse/shared": "^7.0.3",
|
||||
"@zxcvbn-ts/core": "^1.0.0",
|
||||
"ant-design-vue": "2.2.8",
|
||||
"ant-design-vue": "3.0.0-alpha.12",
|
||||
"axios": "^0.24.0",
|
||||
"codemirror": "^5.63.3",
|
||||
"codemirror": "^5.64.0",
|
||||
"cropperjs": "^1.5.12",
|
||||
"crypto-js": "^4.1.1",
|
||||
"dayjs": "^1.10.7",
|
||||
"echarts": "^5.2.2",
|
||||
"intro.js": "^4.3.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mockjs": "^1.1.0",
|
||||
"moment": "^2.29.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"path-to-regexp": "^6.2.0",
|
||||
"pinia": "2.0.2",
|
||||
"pinia": "2.0.4",
|
||||
"print-js": "^1.6.0",
|
||||
"qrcode": "^1.4.4",
|
||||
"qrcode": "^1.5.0",
|
||||
"qs": "^6.10.1",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"showdown": "^1.9.1",
|
||||
"sortablejs": "^1.14.0",
|
||||
"tinymce": "^5.10.1",
|
||||
"tinymce": "^5.10.2",
|
||||
"vditor": "^3.8.7",
|
||||
"vue": "^3.2.21",
|
||||
"vue": "^3.2.22",
|
||||
"vue-i18n": "^9.1.9",
|
||||
"vue-json-pretty": "^2.0.5",
|
||||
"vue-json-pretty": "^2.0.6",
|
||||
"vue-router": "^4.0.12",
|
||||
"vue-types": "^4.1.1",
|
||||
"xlsx": "^0.17.3"
|
||||
"xlsx": "^0.17.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^14.1.0",
|
||||
"@commitlint/config-conventional": "^14.1.0",
|
||||
"@iconify/json": "^1.1.426",
|
||||
"@commitlint/cli": "^15.0.0",
|
||||
"@commitlint/config-conventional": "^15.0.0",
|
||||
"@iconify/json": "^2.0.0",
|
||||
"@purge-icons/generated": "^0.7.0",
|
||||
"@types/codemirror": "^5.60.5",
|
||||
"@types/crypto-js": "^4.0.2",
|
||||
"@types/fs-extra": "^9.0.13",
|
||||
"@types/inquirer": "^8.1.3",
|
||||
"@types/intro.js": "^3.0.2",
|
||||
"@types/jest": "^27.0.2",
|
||||
"@types/jest": "^27.0.3",
|
||||
"@types/lodash-es": "^4.17.5",
|
||||
"@types/mockjs": "^1.0.4",
|
||||
"@types/node": "^16.11.7",
|
||||
"@types/node": "^16.11.10",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/qrcode": "^1.4.1",
|
||||
"@types/qs": "^6.9.7",
|
||||
"@types/showdown": "^1.9.4",
|
||||
"@types/sortablejs": "^1.10.7",
|
||||
"@typescript-eslint/eslint-plugin": "^5.3.1",
|
||||
"@typescript-eslint/parser": "^5.3.1",
|
||||
"@vitejs/plugin-legacy": "^1.6.2",
|
||||
"@vitejs/plugin-vue": "^1.9.4",
|
||||
"@vitejs/plugin-vue-jsx": "^1.2.0",
|
||||
"@vue/compiler-sfc": "3.2.21",
|
||||
"@vue/test-utils": "^2.0.0-rc.16",
|
||||
"@typescript-eslint/eslint-plugin": "^5.4.0",
|
||||
"@typescript-eslint/parser": "^5.4.0",
|
||||
"@vitejs/plugin-legacy": "^1.6.3",
|
||||
"@vitejs/plugin-vue": "^1.10.0",
|
||||
"@vitejs/plugin-vue-jsx": "^1.3.0",
|
||||
"@vue/compiler-sfc": "3.2.22",
|
||||
"@vue/test-utils": "^2.0.0-rc.17",
|
||||
"autoprefixer": "^10.4.0",
|
||||
"commitizen": "^4.2.4",
|
||||
"conventional-changelog-cli": "^2.1.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"dotenv": "^10.0.0",
|
||||
"eslint": "^8.2.0",
|
||||
"eslint": "^8.3.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-define-config": "^1.1.3",
|
||||
"eslint-plugin-jest": "^25.2.4",
|
||||
"eslint-define-config": "^1.1.4",
|
||||
"eslint-plugin-jest": "^25.3.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"esno": "^0.12.0",
|
||||
"eslint-plugin-vue": "^8.1.1",
|
||||
"esno": "^0.12.1",
|
||||
"fs-extra": "^10.0.0",
|
||||
"husky": "^7.0.4",
|
||||
"inquirer": "^8.2.0",
|
||||
"jest": "^27.3.1",
|
||||
"less": "^4.1.2",
|
||||
"lint-staged": "11.2.6",
|
||||
"lint-staged": "12.1.2",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.3.11",
|
||||
"postcss": "^8.4.0",
|
||||
"postcss-html": "^1.2.0",
|
||||
"postcss-less": "^5.0.0",
|
||||
"prettier": "^2.4.1",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup-plugin-visualizer": "^5.5.2",
|
||||
"stylelint": "^14.0.1",
|
||||
"stylelint": "^14.1.0",
|
||||
"stylelint-config-html": "^1.0.0",
|
||||
"stylelint-config-prettier": "^9.0.3",
|
||||
"stylelint-config-standard": "^23.0.0",
|
||||
"stylelint-config-standard": "^24.0.0",
|
||||
"stylelint-order": "^5.0.0",
|
||||
"ts-jest": "^27.0.7",
|
||||
"ts-node": "^10.4.0",
|
||||
"typescript": "^4.4.4",
|
||||
"typescript": "^4.5.2",
|
||||
"vite": "^2.6.14",
|
||||
"vite-plugin-compression": "^0.3.5",
|
||||
"vite-plugin-html": "^2.1.1",
|
||||
"vite-plugin-imagemin": "^0.4.6",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"vite-plugin-purge-icons": "^0.7.0",
|
||||
"vite-plugin-pwa": "^0.11.3",
|
||||
"vite-plugin-pwa": "^0.11.7",
|
||||
"vite-plugin-style-import": "^1.3.0",
|
||||
"vite-plugin-svg-icons": "^1.0.5",
|
||||
"vite-plugin-theme": "^0.8.1",
|
||||
"vite-plugin-vue-setup-extend": "^0.1.0",
|
||||
"vite-plugin-windicss": "^1.5.1",
|
||||
"vue-eslint-parser": "^8.0.1",
|
||||
"vue-tsc": "^0.29.3"
|
||||
"vue-tsc": "^0.29.6"
|
||||
},
|
||||
"resolutions": {
|
||||
"//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
|
||||
|
||||
1648
pnpm-lock.yaml
generated
1648
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -53,7 +53,7 @@
|
||||
color: var(--comment);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
opacity: 60%;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.CodeMirror-guttermarker {
|
||||
@ -90,7 +90,7 @@
|
||||
display: inline-block;
|
||||
font-size: 0.8em;
|
||||
content: '>';
|
||||
opacity: 80%;
|
||||
opacity: 0.8;
|
||||
transform: rotate(90deg);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
@ -94,7 +94,7 @@
|
||||
opt.width = '100%';
|
||||
}
|
||||
const detailCls = `${prefixCls}__detail`;
|
||||
opt.wrapClassName = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
|
||||
opt.class = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
|
||||
|
||||
if (!getContainer) {
|
||||
// TODO type error?
|
||||
|
||||
@ -128,13 +128,12 @@ export interface DrawerProps extends DrawerFooterProps {
|
||||
* @type any (string | slot)
|
||||
*/
|
||||
title?: VNodeChild | JSX.Element;
|
||||
|
||||
/**
|
||||
* The class name of the container of the Drawer dialog.
|
||||
* @type string
|
||||
*/
|
||||
wrapClassName?: string;
|
||||
|
||||
class?: string;
|
||||
/**
|
||||
* Style of wrapper element which **contains mask** compare to `drawerStyle`
|
||||
* @type object
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
if (!Array.isArray(defaultValue)) {
|
||||
schema.defaultValue = dateUtil(defaultValue);
|
||||
} else {
|
||||
const def: moment.Moment[] = [];
|
||||
const def: any[] = [];
|
||||
defaultValue.forEach((item) => {
|
||||
def.push(dateUtil(item));
|
||||
});
|
||||
|
||||
@ -33,7 +33,8 @@ export function useFormValues({
|
||||
if (isObject(value)) {
|
||||
value = transformDateFunc?.(value);
|
||||
}
|
||||
if (isArray(value) && value[0]?._isAMomentObject && value[1]?._isAMomentObject) {
|
||||
|
||||
if (isArray(value) && value[0]?.format && value[1]?.format) {
|
||||
value = value.map((item) => transformDateFunc?.(item));
|
||||
}
|
||||
// Remove spaces
|
||||
|
||||
@ -53,7 +53,7 @@ export const basicProps = {
|
||||
transformDateFunc: {
|
||||
type: Function as PropType<Fn>,
|
||||
default: (date: any) => {
|
||||
return date._isAMomentObject ? date?.format('YYYY-MM-DD HH:mm:ss') : date;
|
||||
return date?.format?.('YYYY-MM-DD HH:mm:ss') ?? date;
|
||||
},
|
||||
},
|
||||
rulesMessageJoinLabel: propTypes.bool.def(true),
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script lang="tsx">
|
||||
import type { ReplaceFields, Keys, CheckKeys, TreeActionType, TreeItem } from './typing';
|
||||
import type { CheckEvent } from './typing';
|
||||
|
||||
import {
|
||||
defineComponent,
|
||||
@ -15,22 +16,17 @@
|
||||
} from 'vue';
|
||||
import { Tree, Empty } from 'ant-design-vue';
|
||||
import { TreeIcon } from './TreeIcon';
|
||||
import TreeHeader from './TreeHeader.vue';
|
||||
import { ScrollContainer } from '/@/components/Container';
|
||||
|
||||
import { omit, get, difference } from 'lodash-es';
|
||||
import { isArray, isBoolean, isEmpty, isFunction } from '/@/utils/is';
|
||||
import { extendSlots, getSlot } from '/@/utils/helper/tsxHelper';
|
||||
import { filter, treeToList } from '/@/utils/helper/treeHelper';
|
||||
|
||||
import { useTree } from './useTree';
|
||||
import { useContextMenu } from '/@/hooks/web/useContextMenu';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
|
||||
import { basicProps } from './props';
|
||||
import { CreateContextOptions } from '/@/components/ContextMenu';
|
||||
|
||||
import { CheckEvent } from './typing';
|
||||
import TreeHeader from './TreeHeader.vue';
|
||||
|
||||
interface State {
|
||||
expandedKeys: Keys;
|
||||
|
||||
@ -168,9 +168,6 @@
|
||||
}
|
||||
},
|
||||
);
|
||||
// function handleSearch(e: ChangeEvent): void {
|
||||
// debounceEmitChange(e.target.value);
|
||||
// }
|
||||
|
||||
return { t, toolbarList, handleMenuClick, searchValue, getInputSearchCls };
|
||||
},
|
||||
|
||||
@ -8,7 +8,7 @@ import type {
|
||||
TreeItem,
|
||||
} from './typing';
|
||||
import type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
|
||||
import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
|
||||
import type { TreeDataItem } from 'ant-design-vue/es/tree';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
|
||||
export const basicProps = {
|
||||
|
||||
0
src/components/Tree/src/tree.ts
Normal file
0
src/components/Tree/src/tree.ts
Normal file
@ -1,5 +1,7 @@
|
||||
import type { TreeDataItem, CheckEvent as CheckEventOrigin } from 'ant-design-vue/es/tree/Tree';
|
||||
|
||||
import { ContextMenuItem } from '/@/hooks/web/useContextMenu';
|
||||
|
||||
export interface ActionItem {
|
||||
render: (record: Recordable) => any;
|
||||
show?: boolean | ((record: Recordable) => boolean);
|
||||
|
||||
@ -26,6 +26,7 @@ export function useTree(
|
||||
}
|
||||
return keys as Keys;
|
||||
}
|
||||
|
||||
// get keys that can be checked and selected
|
||||
function getEnabledKeys(list?: TreeDataItem[]) {
|
||||
const keys: string[] = [];
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-button-group>
|
||||
<Space>
|
||||
<a-button type="primary" @click="openUploadModal" preIcon="carbon:cloud-upload">
|
||||
{{ t('component.upload.upload') }}
|
||||
</a-button>
|
||||
@ -18,8 +18,7 @@
|
||||
</template>
|
||||
</a-button>
|
||||
</Tooltip>
|
||||
</a-button-group>
|
||||
|
||||
</Space>
|
||||
<UploadModal
|
||||
v-bind="bindValue"
|
||||
:previewFileList="fileList"
|
||||
@ -38,19 +37,19 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, watch, unref, computed } from 'vue';
|
||||
import UploadModal from './UploadModal.vue';
|
||||
import UploadPreviewModal from './UploadPreviewModal.vue';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import { Tooltip, Space } from 'ant-design-vue';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { uploadContainerProps } from './props';
|
||||
import { omit } from 'lodash-es';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { isArray } from '/@/utils/is';
|
||||
import UploadModal from './UploadModal.vue';
|
||||
import UploadPreviewModal from './UploadPreviewModal.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BasicUpload',
|
||||
components: { UploadModal, UploadPreviewModal, Icon, Tooltip },
|
||||
components: { UploadModal, Space, UploadPreviewModal, Icon, Tooltip },
|
||||
props: uploadContainerProps,
|
||||
emits: ['change', 'delete', 'preview-delete', 'update:value'],
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
:closeFunc="handleCloseFunc"
|
||||
:maskClosable="false"
|
||||
:keyboard="false"
|
||||
wrapClassName="upload-modal"
|
||||
class="upload-modal"
|
||||
:okButtonProps="getOkButtonProps"
|
||||
:cancelButtonProps="{ disabled: isUploadingRef }"
|
||||
>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<BasicModal
|
||||
width="800px"
|
||||
:title="t('component.upload.preview')"
|
||||
wrapClassName="upload-preview-modal"
|
||||
class="upload-preview-modal"
|
||||
v-bind="$attrs"
|
||||
@register="register"
|
||||
:showOkBtn="false"
|
||||
|
||||
@ -1,18 +1,7 @@
|
||||
import type { App } from 'vue';
|
||||
import { Button } from './Button';
|
||||
import {
|
||||
// Need
|
||||
Button as AntButton,
|
||||
Input,
|
||||
Layout,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
const compList = [AntButton.Group];
|
||||
import { Input, Layout } from 'ant-design-vue';
|
||||
|
||||
export function registerGlobComp(app: App) {
|
||||
compList.forEach((comp) => {
|
||||
app.component(comp.name || comp.displayName, comp);
|
||||
});
|
||||
|
||||
app.use(Input).use(Button).use(Layout);
|
||||
}
|
||||
|
||||
@ -46,6 +46,6 @@
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: @primary-color;
|
||||
opacity: 75%;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* fade-slide */
|
||||
@ -15,12 +15,12 @@
|
||||
}
|
||||
|
||||
.fade-slide-enter-from {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
.fade-slide-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
@ -35,12 +35,12 @@
|
||||
}
|
||||
|
||||
.fade-bottom-enter-from {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: translateY(-10%);
|
||||
}
|
||||
|
||||
.fade-bottom-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: translateY(10%);
|
||||
}
|
||||
|
||||
@ -51,12 +51,12 @@
|
||||
}
|
||||
|
||||
.fade-scale-enter-from {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.fade-scale-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
@ -71,11 +71,11 @@
|
||||
}
|
||||
|
||||
.fade-top-enter-from {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: translateY(8%);
|
||||
}
|
||||
|
||||
.fade-top-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: translateY(-8%);
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
&-enter-from,
|
||||
&-leave,
|
||||
&-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
@ -15,7 +15,7 @@
|
||||
&-enter-from,
|
||||
&-leave,
|
||||
&-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: scale(0) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-from {
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-from {
|
||||
@ -37,7 +37,7 @@
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-from {
|
||||
@ -54,7 +54,7 @@
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-from {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
}
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
}
|
||||
@ -33,7 +33,7 @@
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: translateX(15px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
.zoom-out-enter-from,
|
||||
.zoom-out-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
@ -17,11 +17,11 @@
|
||||
}
|
||||
|
||||
.zoom-fade-enter-from {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.zoom-fade-leave-to {
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
@ -401,7 +401,7 @@ export default defineComponent({
|
||||
{...attrs}
|
||||
title={t('layout.setting.drawerTitle')}
|
||||
width={330}
|
||||
wrapClassName="setting-drawer"
|
||||
class="setting-drawer"
|
||||
>
|
||||
{unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.darkMode')}</Divider>}
|
||||
{unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />}
|
||||
|
||||
@ -28,7 +28,8 @@ html[data-theme='light'] {
|
||||
}
|
||||
|
||||
.ant-tabs.ant-tabs-card {
|
||||
.ant-tabs-card-bar {
|
||||
.ant-tabs-nav {
|
||||
padding-top: 2px;
|
||||
height: @multiple-height;
|
||||
margin: 0;
|
||||
background-color: @component-background;
|
||||
@ -49,18 +50,20 @@ html[data-theme='light'] {
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
.ant-tabs-close-x {
|
||||
opacity: 100%;
|
||||
.ant-tabs-tab-remove {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-close-x {
|
||||
.ant-tabs-tab-remove {
|
||||
width: 8px;
|
||||
height: 12px;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
color: inherit;
|
||||
opacity: 0%;
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
margin-left: 2px;
|
||||
margin-right: -4px;
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
@ -69,11 +72,11 @@ html[data-theme='light'] {
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
// > div {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// }
|
||||
|
||||
svg {
|
||||
fill: @text-color-base;
|
||||
@ -89,13 +92,16 @@ html[data-theme='light'] {
|
||||
.ant-tabs-tab-active {
|
||||
position: relative;
|
||||
padding-left: 18px;
|
||||
color: @white !important;
|
||||
background: @primary-color;
|
||||
border: 0;
|
||||
transition: none;
|
||||
|
||||
.ant-tabs-close-x {
|
||||
opacity: 100%;
|
||||
span {
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
.ant-tabs-tab-remove {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
svg {
|
||||
@ -124,18 +130,13 @@ html[data-theme='light'] {
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-extra-content {
|
||||
margin-top: 2px;
|
||||
line-height: @multiple-height !important;
|
||||
}
|
||||
|
||||
.ant-dropdown-trigger {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
&--hide-close {
|
||||
.ant-tabs-close-x {
|
||||
opacity: 0% !important;
|
||||
.ant-tabs-tab-remove {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
</TabPane>
|
||||
</template>
|
||||
|
||||
<template #tabBarExtraContent v-if="getShowRedo || getShowQuick">
|
||||
<template #rightExtra v-if="getShowRedo || getShowQuick">
|
||||
<TabRedo v-if="getShowRedo" />
|
||||
<TabContent isExtra :tabItem="$route" v-if="getShowQuick" />
|
||||
<FoldButton v-if="getShowFold" />
|
||||
@ -127,8 +127,6 @@
|
||||
tabStore.closeTabByKey(targetKey, router);
|
||||
}
|
||||
return {
|
||||
prefixCls,
|
||||
unClose,
|
||||
getWrapClass,
|
||||
handleEdit,
|
||||
handleChange,
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { genMessage } from '../helper';
|
||||
import antdLocale from 'ant-design-vue/es/locale/en_US';
|
||||
// import momentLocale from 'moment/dist/locale/en-us';
|
||||
|
||||
const modules = import.meta.globEager('./en/**/*.ts');
|
||||
export default {
|
||||
@ -8,6 +7,6 @@ export default {
|
||||
...genMessage(modules, 'en'),
|
||||
antdLocale,
|
||||
},
|
||||
momentLocale: null,
|
||||
momentLocaleName: 'en',
|
||||
dateLocale: null,
|
||||
dateLocaleName: 'en',
|
||||
};
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { genMessage } from '../helper';
|
||||
import antdLocale from 'ant-design-vue/es/locale/zh_CN';
|
||||
import momentLocale from 'moment/dist/locale/zh-cn';
|
||||
|
||||
const modules = import.meta.globEager('./zh-CN/**/*.ts');
|
||||
export default {
|
||||
@ -8,6 +7,4 @@ export default {
|
||||
...genMessage(modules, 'zh-CN'),
|
||||
antdLocale,
|
||||
},
|
||||
momentLocale,
|
||||
momentLocaleName: 'zh-cn',
|
||||
};
|
||||
|
||||
@ -3,8 +3,6 @@
|
||||
*/
|
||||
import type { LocaleType } from '/#/config';
|
||||
|
||||
import moment from 'moment';
|
||||
|
||||
import { i18n } from './setupI18n';
|
||||
import { useLocaleStoreWithOut } from '/@/store/modules/locale';
|
||||
import { unref, computed } from 'vue';
|
||||
@ -12,8 +10,8 @@ import { loadLocalePool, setHtmlPageLang } from './helper';
|
||||
|
||||
interface LangModule {
|
||||
message: Recordable;
|
||||
momentLocale: Recordable;
|
||||
momentLocaleName: string;
|
||||
dateLocale: Recordable;
|
||||
dateLocaleName: string;
|
||||
}
|
||||
|
||||
function setI18nLanguage(locale: LocaleType) {
|
||||
@ -53,10 +51,9 @@ export function useLocale() {
|
||||
const langModule = ((await import(`./lang/${locale}.ts`)) as any).default as LangModule;
|
||||
if (!langModule) return;
|
||||
|
||||
const { message, momentLocale, momentLocaleName } = langModule;
|
||||
const { message } = langModule;
|
||||
|
||||
globalI18n.setLocaleMessage(locale, message);
|
||||
moment.updateLocale(momentLocaleName, momentLocale);
|
||||
loadLocalePool.push(locale);
|
||||
|
||||
setI18nLanguage(locale);
|
||||
|
||||
@ -1,20 +1,23 @@
|
||||
/**
|
||||
* Independent time operation tool to facilitate subsequent switch to dayjs
|
||||
*/
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
|
||||
const DATE_FORMAT = 'YYYY-MM-DD';
|
||||
|
||||
export function formatToDateTime(
|
||||
date: moment.MomentInput = undefined,
|
||||
date: dayjs.Dayjs | undefined = undefined,
|
||||
format = DATE_TIME_FORMAT,
|
||||
): string {
|
||||
return moment(date).format(format);
|
||||
return dayjs(date).format(format);
|
||||
}
|
||||
|
||||
export function formatToDate(date: moment.MomentInput = undefined, format = DATE_FORMAT): string {
|
||||
return moment(date).format(format);
|
||||
export function formatToDate(
|
||||
date: dayjs.Dayjs | undefined = undefined,
|
||||
format = DATE_FORMAT,
|
||||
): string {
|
||||
return dayjs(date).format(format);
|
||||
}
|
||||
|
||||
export const dateUtil = moment;
|
||||
export const dateUtil = dayjs;
|
||||
|
||||
@ -27,7 +27,8 @@ export function formatRequestDate(params: Recordable) {
|
||||
}
|
||||
|
||||
for (const key in params) {
|
||||
if (params[key] && params[key]._isAMomentObject) {
|
||||
const format = params[key]?.format ?? null;
|
||||
if (format && typeof format === 'function') {
|
||||
params[key] = params[key].format(DATE_TIME_FORMAT);
|
||||
}
|
||||
if (isString(key)) {
|
||||
|
||||
@ -11,29 +11,30 @@
|
||||
|
||||
<div class="mt-4">
|
||||
权限切换(请先切换权限模式为后台权限模式):
|
||||
<a-button-group>
|
||||
<Space>
|
||||
<a-button @click="switchToken(1)" :disabled="!isBackPremissionMode">
|
||||
获取用户id为1的菜单
|
||||
</a-button>
|
||||
<a-button @click="switchToken(2)" :disabled="!isBackPremissionMode">
|
||||
获取用户id为2的菜单
|
||||
</a-button>
|
||||
</a-button-group>
|
||||
</Space>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from 'vue';
|
||||
import CurrentPermissionMode from '../CurrentPermissionMode.vue';
|
||||
import { RoleEnum } from '/@/enums/roleEnum';
|
||||
import { usePermission } from '/@/hooks/web/usePermission';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { PermissionModeEnum } from '/@/enums/appEnum';
|
||||
import { useAppStore } from '/@/store/modules/app';
|
||||
import { Alert } from 'ant-design-vue';
|
||||
import { Alert, Space } from 'ant-design-vue';
|
||||
import CurrentPermissionMode from '../CurrentPermissionMode.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { Alert, CurrentPermissionMode, PageWrapper },
|
||||
components: { Space, Alert, CurrentPermissionMode, PageWrapper },
|
||||
setup() {
|
||||
const { refreshMenu } = usePermission();
|
||||
const userStore = useUserStore();
|
||||
|
||||
@ -14,14 +14,14 @@
|
||||
|
||||
<div class="mt-4">
|
||||
权限切换(请先切换权限模式为前端角色权限模式):
|
||||
<a-button-group>
|
||||
<Space>
|
||||
<a-button @click="changeRole(RoleEnum.SUPER)" :type="isSuper ? 'primary' : 'default'">
|
||||
{{ RoleEnum.SUPER }}
|
||||
</a-button>
|
||||
<a-button @click="changeRole(RoleEnum.TEST)" :type="isTest ? 'primary' : 'default'">
|
||||
{{ RoleEnum.TEST }}
|
||||
</a-button>
|
||||
</a-button-group>
|
||||
</Space>
|
||||
</div>
|
||||
<Divider>组件方式判断权限(有需要可以自行全局注册)</Divider>
|
||||
<Authority :value="RoleEnum.SUPER">
|
||||
@ -61,7 +61,7 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { Alert, Divider } from 'ant-design-vue';
|
||||
import { Alert, Divider, Space } from 'ant-design-vue';
|
||||
import CurrentPermissionMode from '../CurrentPermissionMode.vue';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import { RoleEnum } from '/@/enums/roleEnum';
|
||||
@ -70,7 +70,7 @@
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
|
||||
export default defineComponent({
|
||||
components: { Alert, PageWrapper, CurrentPermissionMode, Divider, Authority },
|
||||
components: { Alert, PageWrapper, Space, CurrentPermissionMode, Divider, Authority },
|
||||
setup() {
|
||||
const { changeRole, hasPermission } = usePermission();
|
||||
const userStore = useUserStore();
|
||||
|
||||
@ -14,28 +14,28 @@
|
||||
|
||||
<div class="mt-4">
|
||||
权限切换(请先切换权限模式为前端角色权限模式):
|
||||
<a-button-group>
|
||||
<Space>
|
||||
<a-button @click="changeRole(RoleEnum.SUPER)" :type="isSuper ? 'primary' : 'default'">
|
||||
{{ RoleEnum.SUPER }}
|
||||
</a-button>
|
||||
<a-button @click="changeRole(RoleEnum.TEST)" :type="isTest ? 'primary' : 'default'">
|
||||
{{ RoleEnum.TEST }}
|
||||
</a-button>
|
||||
</a-button-group>
|
||||
</Space>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { Alert } from 'ant-design-vue';
|
||||
import CurrentPermissionMode from '../CurrentPermissionMode.vue';
|
||||
import { Alert, Space } from 'ant-design-vue';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import { RoleEnum } from '/@/enums/roleEnum';
|
||||
import { usePermission } from '/@/hooks/web/usePermission';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import CurrentPermissionMode from '../CurrentPermissionMode.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { Alert, CurrentPermissionMode, PageWrapper },
|
||||
components: { Space, Alert, CurrentPermissionMode, PageWrapper },
|
||||
setup() {
|
||||
const { changeRole } = usePermission();
|
||||
const userStore = useUserStore();
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
import { dateUtil } from '/@/utils/dateUtil';
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { useLocaleStore } from '/@/store/modules/locale';
|
||||
import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
|
||||
|
||||
export function useNow(immediate = true) {
|
||||
const localeStore = useLocaleStore();
|
||||
const localData = dateUtil.localeData(localeStore.getLocale);
|
||||
let timer: IntervalHandle;
|
||||
|
||||
const state = reactive({
|
||||
@ -28,13 +25,13 @@ export function useNow(immediate = true) {
|
||||
|
||||
state.year = now.get('y');
|
||||
state.month = now.get('M') + 1;
|
||||
state.week = localData.weekdays()[now.day()];
|
||||
state.day = now.get('D');
|
||||
state.week = '星期' + ['一', '二', '三', '四', '五', '六', '日'][now.day() - 1];
|
||||
state.day = now.get('d');
|
||||
state.hour = h;
|
||||
state.minute = m;
|
||||
state.second = s;
|
||||
|
||||
state.meridiem = localData.meridiem(Number(h), Number(h), true);
|
||||
state.meridiem = now.format('A');
|
||||
};
|
||||
|
||||
function start() {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
plugins: ['stylelint-order'],
|
||||
customSyntax: 'postcss-less',
|
||||
customSyntax: 'postcss-html',
|
||||
extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
|
||||
rules: {
|
||||
'selector-class-pattern': null,
|
||||
|
||||
@ -24,13 +24,13 @@
|
||||
"@types/koa": "^2.13.4",
|
||||
"@types/koa-bodyparser": "^5.0.2",
|
||||
"@types/koa-router": "^7.4.4",
|
||||
"@types/node": "^16.11.7",
|
||||
"@types/node": "^16.11.10",
|
||||
"nodemon": "^2.0.15",
|
||||
"pm2": "^5.1.2",
|
||||
"rimraf": "^3.0.2",
|
||||
"ts-node": "^10.4.0",
|
||||
"tsconfig-paths": "^3.11.0",
|
||||
"tsup": "^5.6.0",
|
||||
"typescript": "^4.4.4"
|
||||
"tsconfig-paths": "^3.12.0",
|
||||
"tsup": "^5.9.1",
|
||||
"typescript": "^4.5.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"strict": true,
|
||||
"noLib": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strictFunctionTypes": false,
|
||||
@ -17,10 +18,9 @@
|
||||
"noUnusedParameters": true,
|
||||
"experimentalDecorators": true,
|
||||
"lib": ["dom", "esnext"],
|
||||
"types": ["vite/client", "jest"],
|
||||
"typeRoots": ["./node_modules/@types/", "./types"],
|
||||
"noImplicitAny": false,
|
||||
"skipLibCheck": true,
|
||||
"removeComments": true,
|
||||
"paths": {
|
||||
"/@/*": ["src/*"],
|
||||
"/#/*": ["types/*"]
|
||||
|
||||
6
types/module.d.ts
vendored
6
types/module.d.ts
vendored
@ -10,12 +10,6 @@ declare module 'ant-design-vue/es/locale/*' {
|
||||
export default locale as Locale & ReadonlyRecordable;
|
||||
}
|
||||
|
||||
declare module 'moment/dist/locale/*' {
|
||||
import { LocaleSpecification } from 'moment';
|
||||
const locale: LocaleSpecification & ReadonlyRecordable;
|
||||
export default locale;
|
||||
}
|
||||
|
||||
declare module 'virtual:*' {
|
||||
const result: any;
|
||||
export default result;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { UserConfig, ConfigEnv } from 'vite';
|
||||
import pkg from './package.json';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import { loadEnv } from 'vite';
|
||||
import { resolve } from 'path';
|
||||
import { generateModifyVars } from './build/generate/generateModifyVars';
|
||||
@ -16,7 +16,7 @@ function pathResolve(dir: string) {
|
||||
const { dependencies, devDependencies, name, version } = pkg;
|
||||
const __APP_INFO__ = {
|
||||
pkg: { dependencies, devDependencies, name, version },
|
||||
lastBuildTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
|
||||
export default ({ command, mode }: ConfigEnv): UserConfig => {
|
||||
@ -97,9 +97,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
|
||||
include: [
|
||||
'@iconify/iconify',
|
||||
'ant-design-vue/es/locale/zh_CN',
|
||||
'moment/dist/locale/zh-cn',
|
||||
'ant-design-vue/es/locale/en_US',
|
||||
'moment/dist/locale/eu',
|
||||
],
|
||||
exclude: ['vue-demi'],
|
||||
},
|
||||
|
||||
@ -24,8 +24,8 @@ export default defineConfig({
|
||||
});
|
||||
|
||||
/**
|
||||
* Used for animation when the element is displayed
|
||||
* @param maxOutput The larger the maxOutput output, the larger the generated css volume
|
||||
* Used for animation when the element is displayed.
|
||||
* @param maxOutput The larger the maxOutput output, the larger the generated css volume.
|
||||
*/
|
||||
function createEnterPlugin(maxOutput = 6) {
|
||||
const createCss = (index: number, d = 'x') => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user