chore: Extract lint config
This commit is contained in:
vben
parent
84a5fc1256
commit
ba2415c3b4
74
.eslintrc.js
74
.eslintrc.js
|
|
@ -1,76 +1,4 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
root: true,
|
root: true,
|
||||||
env: {
|
extends: ['@vben'],
|
||||||
browser: true,
|
|
||||||
node: true,
|
|
||||||
es6: true,
|
|
||||||
},
|
|
||||||
parser: 'vue-eslint-parser',
|
|
||||||
parserOptions: {
|
|
||||||
parser: '@typescript-eslint/parser',
|
|
||||||
ecmaVersion: 2020,
|
|
||||||
sourceType: 'module',
|
|
||||||
jsxPragma: 'React',
|
|
||||||
ecmaFeatures: {
|
|
||||||
jsx: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
extends: [
|
|
||||||
'plugin:vue/vue3-recommended',
|
|
||||||
'plugin:@typescript-eslint/recommended',
|
|
||||||
'plugin:prettier/recommended',
|
|
||||||
],
|
|
||||||
rules: {
|
|
||||||
'vue/script-setup-uses-vars': 'error',
|
|
||||||
'@typescript-eslint/ban-ts-ignore': 'off',
|
|
||||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
|
||||||
'@typescript-eslint/no-explicit-any': 'off',
|
|
||||||
'@typescript-eslint/no-var-requires': 'off',
|
|
||||||
'@typescript-eslint/no-empty-function': 'off',
|
|
||||||
'vue/custom-event-name-casing': 'off',
|
|
||||||
'no-use-before-define': 'off',
|
|
||||||
'@typescript-eslint/no-use-before-define': 'off',
|
|
||||||
'@typescript-eslint/ban-ts-comment': 'off',
|
|
||||||
'@typescript-eslint/ban-types': 'off',
|
|
||||||
'@typescript-eslint/no-non-null-assertion': 'off',
|
|
||||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
|
||||||
'@typescript-eslint/no-unused-vars': [
|
|
||||||
'error',
|
|
||||||
{
|
|
||||||
argsIgnorePattern: '^_',
|
|
||||||
varsIgnorePattern: '^_',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
'no-unused-vars': [
|
|
||||||
'error',
|
|
||||||
{
|
|
||||||
argsIgnorePattern: '^_',
|
|
||||||
varsIgnorePattern: '^_',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
'space-before-function-paren': 'off',
|
|
||||||
|
|
||||||
'vue/attributes-order': 'off',
|
|
||||||
'vue/one-component-per-file': 'off',
|
|
||||||
'vue/html-closing-bracket-newline': 'off',
|
|
||||||
'vue/max-attributes-per-line': 'off',
|
|
||||||
'vue/multiline-html-element-content-newline': 'off',
|
|
||||||
'vue/singleline-html-element-content-newline': 'off',
|
|
||||||
'vue/attribute-hyphenation': 'off',
|
|
||||||
'vue/require-default-prop': 'off',
|
|
||||||
'vue/require-explicit-emits': 'off',
|
|
||||||
'vue/html-self-closing': [
|
|
||||||
'error',
|
|
||||||
{
|
|
||||||
html: {
|
|
||||||
void: 'always',
|
|
||||||
normal: 'never',
|
|
||||||
component: 'always',
|
|
||||||
},
|
|
||||||
svg: 'always',
|
|
||||||
math: 'always',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
'vue/multi-word-component-names': 'off',
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -98,7 +98,7 @@ jobs:
|
||||||
|
|
||||||
- name: Build
|
- name: Build
|
||||||
env:
|
env:
|
||||||
NODE_OPTIONS: "--max_old_space_size=4096"
|
NODE_OPTIONS: '--max_old_space_size=4096'
|
||||||
run: |
|
run: |
|
||||||
yarn install
|
yarn install
|
||||||
yarn run build
|
yarn run build
|
||||||
|
|
@ -116,8 +116,3 @@ jobs:
|
||||||
PUBLISH_BRANCH: gh-pages
|
PUBLISH_BRANCH: gh-pages
|
||||||
PUBLISH_DIR: ./dist
|
PUBLISH_DIR: ./dist
|
||||||
CNAME: vben.vvbin.cn
|
CNAME: vben.vvbin.cn
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
node_modules
|
node_modules
|
||||||
.DS_Store
|
.DS_Store
|
||||||
dist
|
dist
|
||||||
.npmrc
|
|
||||||
.cache
|
.cache
|
||||||
|
.turbo
|
||||||
|
|
||||||
tests/server/static
|
tests/server/static
|
||||||
tests/server/static/upload
|
tests/server/static/upload
|
||||||
|
|
|
||||||
|
|
@ -7,4 +7,4 @@
|
||||||
PATH="/usr/local/bin:$PATH"
|
PATH="/usr/local/bin:$PATH"
|
||||||
|
|
||||||
# Format and submit code according to lintstagedrc.js configuration
|
# Format and submit code according to lintstagedrc.js configuration
|
||||||
npm run lint:lint-staged
|
pnpm exec lint-staged
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
public-hoist-pattern[]=husky
|
||||||
|
public-hoist-pattern[]=*eslint*
|
||||||
|
public-hoist-pattern[]=*prettier*
|
||||||
|
public-hoist-pattern[]=lint-staged
|
||||||
|
public-hoist-pattern[]=*stylelint*
|
||||||
|
public-hoist-pattern[]=@commitlint/cli
|
||||||
|
public-hoist-pattern[]=@vben/eslint-config
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
/dist/*
|
dist
|
||||||
.local
|
.local
|
||||||
.output.js
|
.output.js
|
||||||
/node_modules/**
|
node_modules
|
||||||
|
|
||||||
**/*.svg
|
**/*.svg
|
||||||
**/*.sh
|
**/*.sh
|
||||||
|
|
||||||
/public/*
|
public
|
||||||
|
.npmrc
|
||||||
|
|
|
||||||
|
|
@ -7,4 +7,5 @@ module.exports = {
|
||||||
proseWrap: 'never',
|
proseWrap: 'never',
|
||||||
htmlWhitespaceSensitivity: 'strict',
|
htmlWhitespaceSensitivity: 'strict',
|
||||||
endOfLine: 'auto',
|
endOfLine: 'auto',
|
||||||
|
plugins: ['prettier-plugin-packagejson'],
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,2 @@
|
||||||
/dist/*
|
dist
|
||||||
/public/*
|
public
|
||||||
public/*
|
|
||||||
|
|
|
||||||
|
|
@ -1,100 +1,4 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
root: true,
|
root: true,
|
||||||
plugins: ['stylelint-order'],
|
extends: ['@vben/stylelint-config'],
|
||||||
extends: ['stylelint-config-standard'],
|
|
||||||
customSyntax: 'postcss-html',
|
|
||||||
rules: {
|
|
||||||
'function-no-unknown': null,
|
|
||||||
'selector-class-pattern': null,
|
|
||||||
'selector-pseudo-class-no-unknown': [
|
|
||||||
true,
|
|
||||||
{
|
|
||||||
ignorePseudoClasses: ['global', 'deep'],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
'selector-pseudo-element-no-unknown': [
|
|
||||||
true,
|
|
||||||
{
|
|
||||||
ignorePseudoElements: ['v-deep'],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
'at-rule-no-unknown': [
|
|
||||||
true,
|
|
||||||
{
|
|
||||||
ignoreAtRules: [
|
|
||||||
'tailwind',
|
|
||||||
'apply',
|
|
||||||
'variants',
|
|
||||||
'responsive',
|
|
||||||
'screen',
|
|
||||||
'function',
|
|
||||||
'if',
|
|
||||||
'each',
|
|
||||||
'include',
|
|
||||||
'mixin',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
'no-empty-source': null,
|
|
||||||
'string-quotes': null,
|
|
||||||
'named-grid-areas-no-invalid': null,
|
|
||||||
'unicode-bom': 'never',
|
|
||||||
'no-descending-specificity': null,
|
|
||||||
'font-family-no-missing-generic-family-keyword': null,
|
|
||||||
'declaration-colon-space-after': 'always-single-line',
|
|
||||||
'declaration-colon-space-before': 'never',
|
|
||||||
// 'declaration-block-trailing-semicolon': 'always',
|
|
||||||
'rule-empty-line-before': [
|
|
||||||
'always',
|
|
||||||
{
|
|
||||||
ignore: ['after-comment', 'first-nested'],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
|
|
||||||
'order/order': [
|
|
||||||
[
|
|
||||||
'dollar-variables',
|
|
||||||
'custom-properties',
|
|
||||||
'at-rules',
|
|
||||||
'declarations',
|
|
||||||
{
|
|
||||||
type: 'at-rule',
|
|
||||||
name: 'supports',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'at-rule',
|
|
||||||
name: 'media',
|
|
||||||
},
|
|
||||||
'rules',
|
|
||||||
],
|
|
||||||
{ severity: 'warning' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
|
|
||||||
overrides: [
|
|
||||||
{
|
|
||||||
files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
|
|
||||||
extends: ['stylelint-config-recommended'],
|
|
||||||
rules: {
|
|
||||||
'keyframes-name-pattern': null,
|
|
||||||
'selector-pseudo-class-no-unknown': [
|
|
||||||
true,
|
|
||||||
{
|
|
||||||
ignorePseudoClasses: ['deep', 'global'],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
'selector-pseudo-element-no-unknown': [
|
|
||||||
true,
|
|
||||||
{
|
|
||||||
ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
files: ['*.less', '**/*.less'],
|
|
||||||
customSyntax: 'postcss-less',
|
|
||||||
extends: ['stylelint-config-standard', 'stylelint-config-recommended-vue'],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -84,7 +84,8 @@
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||||
},
|
},
|
||||||
"editor.codeActionsOnSave": {
|
"editor.codeActionsOnSave": {
|
||||||
"source.fixAll.eslint": true
|
"source.fixAll.eslint": true,
|
||||||
|
"source.fixAll.stylelint": true
|
||||||
},
|
},
|
||||||
"[vue]": {
|
"[vue]": {
|
||||||
"editor.codeActionsOnSave": {
|
"editor.codeActionsOnSave": {
|
||||||
|
|
@ -165,7 +166,7 @@
|
||||||
"*.tsx": "$(capture).test.ts, $(capture).test.tsx",
|
"*.tsx": "$(capture).test.ts, $(capture).test.tsx",
|
||||||
"*.env": "$(capture).env.*",
|
"*.env": "$(capture).env.*",
|
||||||
"CHANGELOG.md": "CHANGELOG*",
|
"CHANGELOG.md": "CHANGELOG*",
|
||||||
"package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,LICENSE,.gitattributes,.gitignore,.gitpod.yml,CNAME,README*",
|
"package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,LICENSE,.gitattributes,.gitignore,.gitpod.yml,CNAME,README*,.npmrc",
|
||||||
".eslintrc.js": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.js,.prettierrc.js,.stylelintrc.js"
|
".eslintrc.js": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.js,.prettierrc.js,.stylelintrc.js"
|
||||||
},
|
},
|
||||||
"terminal.integrated.scrollback": 10000
|
"terminal.integrated.scrollback": 10000
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ import { viteMockServe } from 'vite-plugin-mock';
|
||||||
|
|
||||||
export function configMockPlugin(isBuild: boolean) {
|
export function configMockPlugin(isBuild: boolean) {
|
||||||
return viteMockServe({
|
return viteMockServe({
|
||||||
ignore: /^\_/,
|
ignore: /^_/,
|
||||||
mockPath: 'mock',
|
mockPath: 'mock',
|
||||||
localEnabled: !isBuild,
|
localEnabled: !isBuild,
|
||||||
prodEnabled: isBuild,
|
prodEnabled: isBuild,
|
||||||
|
|
|
||||||
60
index.html
60
index.html
|
|
@ -34,39 +34,39 @@
|
||||||
|
|
||||||
.app-loading {
|
.app-loading {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: #f4f7f9;
|
background-color: #f4f7f9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-loading .app-loading-wrap {
|
.app-loading .app-loading-wrap {
|
||||||
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
display: flex;
|
|
||||||
transform: translate3d(-50%, -50%, 0);
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transform: translate3d(-50%, -50%, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-loading .dots {
|
.app-loading .dots {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 98px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 98px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-loading .app-loading-title {
|
.app-loading .app-loading-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 30px;
|
|
||||||
font-size: 30px;
|
|
||||||
color: rgb(0 0 0 / 85%);
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 30px;
|
||||||
|
color: rgb(0 0 0 / 85%);
|
||||||
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-loading .app-loading-logo {
|
.app-loading .app-loading-logo {
|
||||||
|
|
@ -77,28 +77,28 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot {
|
.dot {
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
font-size: 32px;
|
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
box-sizing: border-box;
|
animation: ant-rotate 1.2s infinite linear;
|
||||||
animation: antRotate 1.2s infinite linear;
|
font-size: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot i {
|
.dot i {
|
||||||
position: absolute;
|
|
||||||
display: block;
|
display: block;
|
||||||
|
position: absolute;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background-color: #0065cc;
|
|
||||||
border-radius: 100%;
|
|
||||||
opacity: 30%;
|
|
||||||
transform: scale(0.75);
|
transform: scale(0.75);
|
||||||
animation: antSpinMove 1s infinite linear alternate;
|
|
||||||
transform-origin: 50% 50%;
|
transform-origin: 50% 50%;
|
||||||
|
animation: ant-spin-move 1s infinite linear alternate;
|
||||||
|
border-radius: 100%;
|
||||||
|
opacity: 0.3;
|
||||||
|
background-color: #0065cc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot i:nth-child(1) {
|
.dot i:nth-child(1) {
|
||||||
|
|
@ -123,24 +123,28 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
animation-delay: 1.2s;
|
animation-delay: 1.2s;
|
||||||
}
|
}
|
||||||
@keyframes antRotate {
|
|
||||||
|
@keyframes ant-rotate {
|
||||||
to {
|
to {
|
||||||
transform: rotate(405deg);
|
transform: rotate(405deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes antRotate {
|
|
||||||
|
@keyframes ant-rotate {
|
||||||
to {
|
to {
|
||||||
transform: rotate(405deg);
|
transform: rotate(405deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes antSpinMove {
|
|
||||||
|
@keyframes ant-spin-move {
|
||||||
to {
|
to {
|
||||||
opacity: 100%;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes antSpinMove {
|
|
||||||
|
@keyframes ant-spin-move {
|
||||||
to {
|
to {
|
||||||
opacity: 100%;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { defineBuildConfig } from 'unbuild';
|
||||||
|
|
||||||
|
export default defineBuildConfig({
|
||||||
|
clean: true,
|
||||||
|
entries: ['src/index'],
|
||||||
|
declaration: true,
|
||||||
|
rollup: {
|
||||||
|
emitCJS: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
{
|
||||||
|
"name": "@vben/eslint-config",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"types": "./dist/index.d.ts",
|
||||||
|
"import": "./dist/index.mjs",
|
||||||
|
"require": "./dist/index.cjs"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"main": "./dist/index.cjs",
|
||||||
|
"module": "./dist/index.mjs",
|
||||||
|
"types": "./dist/index.d.ts",
|
||||||
|
"files": [
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"scripts": {
|
||||||
|
"clean": "pnpm rimraf .turbo node_modules dist",
|
||||||
|
"stub": "pnpm unbuild --stub"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.57.0",
|
||||||
|
"@typescript-eslint/parser": "^5.57.0",
|
||||||
|
"eslint": "^8.37.0",
|
||||||
|
"eslint-config-prettier": "^8.8.0",
|
||||||
|
"eslint-plugin-prettier": "^4.2.1",
|
||||||
|
"eslint-plugin-vue": "^9.10.0",
|
||||||
|
"vue-eslint-parser": "^9.1.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
export default {
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
node: true,
|
||||||
|
es6: true,
|
||||||
|
},
|
||||||
|
parser: 'vue-eslint-parser',
|
||||||
|
parserOptions: {
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
sourceType: 'module',
|
||||||
|
jsxPragma: 'React',
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true,
|
||||||
|
},
|
||||||
|
project: './tsconfig.*?.json',
|
||||||
|
createDefaultProgram: false,
|
||||||
|
extraFileExtensions: ['.vue'],
|
||||||
|
},
|
||||||
|
plugins: ['vue', '@typescript-eslint'],
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:vue/vue3-recommended',
|
||||||
|
'plugin:@typescript-eslint/recommended',
|
||||||
|
'plugin:prettier/recommended',
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
'no-case-declarations': 'off',
|
||||||
|
'vue/script-setup-uses-vars': 'error',
|
||||||
|
'vue/no-reserved-component-names': 'off',
|
||||||
|
'@typescript-eslint/ban-ts-ignore': 'off',
|
||||||
|
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||||
|
'@typescript-eslint/no-explicit-any': 'off',
|
||||||
|
'@typescript-eslint/no-var-requires': 'off',
|
||||||
|
'@typescript-eslint/no-empty-function': 'off',
|
||||||
|
'vue/custom-event-name-casing': 'off',
|
||||||
|
'no-use-before-define': 'off',
|
||||||
|
'@typescript-eslint/no-use-before-define': 'off',
|
||||||
|
'@typescript-eslint/ban-ts-comment': 'off',
|
||||||
|
'@typescript-eslint/ban-types': 'off',
|
||||||
|
'@typescript-eslint/no-non-null-assertion': 'off',
|
||||||
|
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||||
|
'@typescript-eslint/no-unused-vars': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
argsIgnorePattern: '^_',
|
||||||
|
varsIgnorePattern: '^_',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'no-unused-vars': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
argsIgnorePattern: '^_',
|
||||||
|
varsIgnorePattern: '^_',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'space-before-function-paren': 'off',
|
||||||
|
|
||||||
|
'vue/attributes-order': 'off',
|
||||||
|
'vue/one-component-per-file': 'off',
|
||||||
|
'vue/html-closing-bracket-newline': 'off',
|
||||||
|
'vue/max-attributes-per-line': 'off',
|
||||||
|
'vue/multiline-html-element-content-newline': 'off',
|
||||||
|
'vue/singleline-html-element-content-newline': 'off',
|
||||||
|
'vue/attribute-hyphenation': 'off',
|
||||||
|
'vue/require-default-prop': 'off',
|
||||||
|
'vue/require-explicit-emits': 'off',
|
||||||
|
'vue/html-self-closing': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
html: {
|
||||||
|
void: 'always',
|
||||||
|
normal: 'never',
|
||||||
|
component: 'always',
|
||||||
|
},
|
||||||
|
svg: 'always',
|
||||||
|
math: 'always',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'vue/multi-word-component-names': 'off',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { defineBuildConfig } from 'unbuild';
|
||||||
|
|
||||||
|
export default defineBuildConfig({
|
||||||
|
clean: true,
|
||||||
|
entries: ['src/index'],
|
||||||
|
declaration: true,
|
||||||
|
rollup: {
|
||||||
|
emitCJS: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
{
|
||||||
|
"name": "@vben/stylelint-config",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"types": "./dist/index.d.ts",
|
||||||
|
"import": "./dist/index.mjs",
|
||||||
|
"require": "./dist/index.cjs"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"main": "./dist/index.cjs",
|
||||||
|
"module": "./dist/index.mjs",
|
||||||
|
"types": "./dist/index.d.ts",
|
||||||
|
"files": [
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"scripts": {
|
||||||
|
"clean": "pnpm rimraf .turbo node_modules dist",
|
||||||
|
"stub": "pnpm unbuild --stub"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"postcss": "^8.4.21",
|
||||||
|
"postcss-html": "^1.5.0",
|
||||||
|
"postcss-less": "^6.0.0",
|
||||||
|
"postcss-scss": "^4.0.6",
|
||||||
|
"prettier": "^2.8.7",
|
||||||
|
"stylelint": "^15.4.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-vue": "^1.4.0",
|
||||||
|
"stylelint-config-standard": "^32.0.0",
|
||||||
|
"stylelint-config-standard-scss": "^7.0.1",
|
||||||
|
"stylelint-order": "^6.0.3",
|
||||||
|
"stylelint-prettier": "^3.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
export default {
|
||||||
|
extends: ['stylelint-config-standard', 'stylelint-config-property-sort-order-smacss'],
|
||||||
|
plugins: ['stylelint-order', 'stylelint-prettier'],
|
||||||
|
// customSyntax: 'postcss-html',
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ['**/*.(css|html|vue)'],
|
||||||
|
customSyntax: 'postcss-html',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ['*.less', '**/*.less'],
|
||||||
|
customSyntax: 'postcss-less',
|
||||||
|
extends: ['stylelint-config-standard', 'stylelint-config-recommended-vue'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ['*.scss', '**/*.scss'],
|
||||||
|
customSyntax: 'postcss-scss',
|
||||||
|
extends: ['stylelint-config-standard-scss', 'stylelint-config-recommended-vue/scss'],
|
||||||
|
rule: {
|
||||||
|
'scss/percent-placeholder-pattern': null,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
'function-no-unknown': null,
|
||||||
|
'selector-class-pattern': null,
|
||||||
|
'selector-pseudo-class-no-unknown': [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
ignorePseudoClasses: ['global', 'deep'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'selector-pseudo-element-no-unknown': [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
ignorePseudoElements: ['v-deep'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'at-rule-no-unknown': [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
ignoreAtRules: [
|
||||||
|
'tailwind',
|
||||||
|
'apply',
|
||||||
|
'variants',
|
||||||
|
'responsive',
|
||||||
|
'screen',
|
||||||
|
'function',
|
||||||
|
'if',
|
||||||
|
'each',
|
||||||
|
'include',
|
||||||
|
'mixin',
|
||||||
|
'extend',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'no-empty-source': null,
|
||||||
|
'string-quotes': null,
|
||||||
|
'named-grid-areas-no-invalid': null,
|
||||||
|
'no-descending-specificity': null,
|
||||||
|
'font-family-no-missing-generic-family-keyword': null,
|
||||||
|
'rule-empty-line-before': [
|
||||||
|
'always',
|
||||||
|
{
|
||||||
|
ignore: ['after-comment', 'first-nested'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
|
||||||
|
'order/order': [
|
||||||
|
[
|
||||||
|
'dollar-variables',
|
||||||
|
'custom-properties',
|
||||||
|
'at-rules',
|
||||||
|
'declarations',
|
||||||
|
{
|
||||||
|
type: 'at-rule',
|
||||||
|
name: 'supports',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'at-rule',
|
||||||
|
name: 'media',
|
||||||
|
},
|
||||||
|
'rules',
|
||||||
|
],
|
||||||
|
{ severity: 'error' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"name": "@vben/ts-config",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {}
|
||||||
|
}
|
||||||
62
package.json
62
package.json
|
|
@ -16,36 +16,36 @@
|
||||||
"url": "https://github.com/anncwb"
|
"url": "https://github.com/anncwb"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"commit": "czg",
|
|
||||||
"bootstrap": "pnpm install",
|
"bootstrap": "pnpm install",
|
||||||
"serve": "npm run dev",
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "cross-env NODE_ENV=production vite build && esno ./build/script/postBuild.ts",
|
"build": "cross-env NODE_ENV=production vite build && esno ./build/script/postBuild.ts",
|
||||||
"build:test": "cross-env vite build --mode test && esno ./build/script/postBuild.ts",
|
|
||||||
"build:no-cache": "pnpm clean:cache && npm run build",
|
"build:no-cache": "pnpm clean:cache && npm run build",
|
||||||
"report": "cross-env REPORT=true npm run build",
|
"build:test": "cross-env vite build --mode test && esno ./build/script/postBuild.ts",
|
||||||
"type:check": "vue-tsc --noEmit --skipLibCheck",
|
|
||||||
"preview": "npm run build && vite preview",
|
|
||||||
"preview:dist": "vite preview",
|
|
||||||
"log": "conventional-changelog -p angular -i CHANGELOG.md -s",
|
|
||||||
"clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
|
"clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
|
||||||
"clean:lib": "rimraf node_modules",
|
"clean:lib": "rimraf node_modules",
|
||||||
|
"commit": "czg",
|
||||||
|
"dev": "vite",
|
||||||
|
"gen:icon": "esno ./build/generate/icon/index.ts",
|
||||||
|
"preinstall": "npx only-allow pnpm",
|
||||||
|
"postinstall": "turbo run stub",
|
||||||
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
|
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
|
||||||
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
|
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
|
||||||
"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
|
"lint:stylelint": "stylelint \"**/*.{vue,css,less.scss}\" --fix --cache --cache-location node_modules/.cache/stylelint/",
|
||||||
"lint:lint-staged": "lint-staged",
|
"log": "conventional-changelog -p angular -i CHANGELOG.md -s",
|
||||||
"test:unit": "jest",
|
|
||||||
"test:gzip": "npx http-server dist --cors --gzip -c-1",
|
|
||||||
"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",
|
|
||||||
"preinstall": "npx only-allow pnpm",
|
|
||||||
"prepare": "husky install",
|
"prepare": "husky install",
|
||||||
"gen:icon": "esno ./build/generate/icon/index.ts"
|
"preview": "npm run build && vite preview",
|
||||||
|
"preview:dist": "vite preview",
|
||||||
|
"reinstall": "rimraf pnpm-lock.yaml && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
|
||||||
|
"report": "cross-env REPORT=true npm run build",
|
||||||
|
"serve": "npm run dev",
|
||||||
|
"test:br": "npx http-server dist --cors --brotli -c-1",
|
||||||
|
"test:gzip": "npx http-server dist --cors --gzip -c-1",
|
||||||
|
"test:unit": "jest",
|
||||||
|
"type:check": "vue-tsc --noEmit --skipLibCheck"
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"*.{js,jsx,ts,tsx}": [
|
"*.{js,jsx,ts,tsx}": [
|
||||||
"eslint --fix",
|
"prettier --write",
|
||||||
"prettier --write"
|
"eslint --fix"
|
||||||
],
|
],
|
||||||
"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
|
"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
|
||||||
"prettier --write--parser json"
|
"prettier --write--parser json"
|
||||||
|
|
@ -54,13 +54,13 @@
|
||||||
"prettier --write"
|
"prettier --write"
|
||||||
],
|
],
|
||||||
"*.vue": [
|
"*.vue": [
|
||||||
"eslint --fix",
|
|
||||||
"prettier --write",
|
"prettier --write",
|
||||||
|
"eslint --fix",
|
||||||
"stylelint --fix"
|
"stylelint --fix"
|
||||||
],
|
],
|
||||||
"*.{scss,less,styl,html}": [
|
"*.{scss,less,styl,html}": [
|
||||||
"stylelint --fix",
|
"prettier --write",
|
||||||
"prettier --write"
|
"stylelint --fix"
|
||||||
],
|
],
|
||||||
"*.md": [
|
"*.md": [
|
||||||
"prettier --write"
|
"prettier --write"
|
||||||
|
|
@ -133,8 +133,8 @@
|
||||||
"@types/qs": "^6.9.7",
|
"@types/qs": "^6.9.7",
|
||||||
"@types/showdown": "^2.0.0",
|
"@types/showdown": "^2.0.0",
|
||||||
"@types/sortablejs": "^1.15.1",
|
"@types/sortablejs": "^1.15.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.57.0",
|
"@vben/eslint-config": "workspace:*",
|
||||||
"@typescript-eslint/parser": "^5.57.0",
|
"@vben/stylelint-config": "workspace:*",
|
||||||
"@vitejs/plugin-vue": "^4.1.0",
|
"@vitejs/plugin-vue": "^4.1.0",
|
||||||
"@vitejs/plugin-vue-jsx": "^3.0.1",
|
"@vitejs/plugin-vue-jsx": "^3.0.1",
|
||||||
"@vue/compiler-sfc": "^3.2.47",
|
"@vue/compiler-sfc": "^3.2.47",
|
||||||
|
|
@ -145,31 +145,24 @@
|
||||||
"cz-git": "^1.6.1",
|
"cz-git": "^1.6.1",
|
||||||
"czg": "^1.6.1",
|
"czg": "^1.6.1",
|
||||||
"dotenv": "^16.0.3",
|
"dotenv": "^16.0.3",
|
||||||
"eslint": "^8.37.0",
|
|
||||||
"eslint-config-prettier": "^8.8.0",
|
|
||||||
"eslint-plugin-prettier": "^4.2.1",
|
|
||||||
"eslint-plugin-vue": "^9.10.0",
|
|
||||||
"esno": "^0.16.3",
|
"esno": "^0.16.3",
|
||||||
"fs-extra": "^11.1.1",
|
"fs-extra": "^11.1.1",
|
||||||
"husky": "^8.0.3",
|
"husky": "^8.0.3",
|
||||||
"inquirer": "^9.1.5",
|
"inquirer": "^9.1.5",
|
||||||
"less": "^4.1.3",
|
"less": "^4.1.3",
|
||||||
"lint-staged": "13.2.0",
|
"lint-staged": "13.2.0",
|
||||||
"npm-run-all": "^4.1.5",
|
|
||||||
"picocolors": "^1.0.0",
|
"picocolors": "^1.0.0",
|
||||||
"postcss": "^8.4.21",
|
"postcss": "^8.4.21",
|
||||||
"postcss-html": "^1.5.0",
|
"postcss-html": "^1.5.0",
|
||||||
"postcss-less": "^6.0.0",
|
"postcss-less": "^6.0.0",
|
||||||
"prettier": "^2.8.7",
|
"prettier": "^2.8.7",
|
||||||
|
"prettier-plugin-packagejson": "^2.4.3",
|
||||||
"rimraf": "^4.4.1",
|
"rimraf": "^4.4.1",
|
||||||
"rollup-plugin-visualizer": "^5.9.0",
|
"rollup-plugin-visualizer": "^5.9.0",
|
||||||
"sass": "^1.60.0",
|
"sass": "^1.60.0",
|
||||||
"stylelint": "^15.4.0",
|
"turbo": "^1.8.8",
|
||||||
"stylelint-config-recommended": "^11.0.0",
|
|
||||||
"stylelint-config-recommended-vue": "^1.4.0",
|
|
||||||
"stylelint-config-standard": "^32.0.0",
|
|
||||||
"stylelint-order": "^6.0.3",
|
|
||||||
"typescript": "^5.0.3",
|
"typescript": "^5.0.3",
|
||||||
|
"unbuild": "^1.2.0",
|
||||||
"vite": "^4.3.0-beta.1",
|
"vite": "^4.3.0-beta.1",
|
||||||
"vite-plugin-compression": "^0.5.1",
|
"vite-plugin-compression": "^0.5.1",
|
||||||
"vite-plugin-html": "^3.2.0",
|
"vite-plugin-html": "^3.2.0",
|
||||||
|
|
@ -177,7 +170,6 @@
|
||||||
"vite-plugin-purge-icons": "^0.9.2",
|
"vite-plugin-purge-icons": "^0.9.2",
|
||||||
"vite-plugin-svg-icons": "^2.0.1",
|
"vite-plugin-svg-icons": "^2.0.1",
|
||||||
"vite-plugin-windicss": "^1.8.10",
|
"vite-plugin-windicss": "^1.8.10",
|
||||||
"vue-eslint-parser": "^9.1.1",
|
|
||||||
"vue-tsc": "^1.2.0"
|
"vue-tsc": "^1.2.0"
|
||||||
},
|
},
|
||||||
"packageManager": "pnpm@8.1.0",
|
"packageManager": "pnpm@8.1.0",
|
||||||
|
|
|
||||||
7682
pnpm-lock.yaml
7682
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -1,2 +1,3 @@
|
||||||
packages:
|
packages:
|
||||||
- '_internal/*'
|
- 'internal/*'
|
||||||
|
- 'packages/*'
|
||||||
|
|
|
||||||
|
|
@ -44,26 +44,26 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
padding: 0 6px;
|
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
cursor: pointer;
|
padding: 0 6px;
|
||||||
background-color: #151515;
|
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
justify-content: space-between;
|
background-color: #151515;
|
||||||
align-items: center;
|
cursor: pointer;
|
||||||
|
|
||||||
&-inner {
|
&-inner {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: transform 0.5s, background-color 0.5s;
|
transition: transform 0.5s, background-color 0.5s;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #fff;
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -64,8 +64,8 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 7px;
|
padding-left: 7px;
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
&.light {
|
&.light {
|
||||||
border-bottom: 1px solid @border-color-base;
|
border-bottom: 1px solid @border-color-base;
|
||||||
|
|
@ -84,9 +84,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
|
transition: all 0.5s;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
transition: all 0.5s;
|
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,30 +21,30 @@
|
||||||
@prefix-cls: ~'@{namespace}-app-search-footer';
|
@prefix-cls: ~'@{namespace}-app-search-footer';
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-items: center;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
font-size: 12px;
|
|
||||||
color: #666;
|
|
||||||
background-color: @component-background;
|
|
||||||
border-top: 1px solid @border-color-base;
|
border-top: 1px solid @border-color-base;
|
||||||
border-radius: 0 0 16px 16px;
|
border-radius: 0 0 16px 16px;
|
||||||
align-items: center;
|
background-color: @component-background;
|
||||||
flex-shrink: 0;
|
color: #666;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
&-item {
|
&-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 20px;
|
|
||||||
height: 18px;
|
|
||||||
padding-bottom: 2px;
|
|
||||||
margin-right: 0.4em;
|
|
||||||
background-color: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
|
|
||||||
border-radius: 2px;
|
|
||||||
box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
|
|
||||||
0 1px 2px 1px rgb(30 35 90 / 40%);
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
width: 20px;
|
||||||
|
height: 18px;
|
||||||
|
margin-right: 0.4em;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
|
||||||
|
box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
|
||||||
|
0 1px 2px 1px rgb(30 35 90 / 40%);
|
||||||
|
|
||||||
&:nth-child(2),
|
&:nth-child(2),
|
||||||
&:nth-child(3),
|
&:nth-child(3),
|
||||||
|
|
|
||||||
|
|
@ -77,7 +77,7 @@
|
||||||
const emit = defineEmits(['close']);
|
const emit = defineEmits(['close']);
|
||||||
|
|
||||||
const scrollWrap = ref(null);
|
const scrollWrap = ref(null);
|
||||||
const inputRef = ref<Nullable<HTMLElement>>(null);
|
const inputRef = ref<HTMLElement | null>(null);
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { prefixCls } = useDesign('app-search-modal');
|
const { prefixCls } = useDesign('app-search-modal');
|
||||||
|
|
@ -117,16 +117,16 @@
|
||||||
@prefix-cls: ~'@{namespace}-app-search-modal';
|
@prefix-cls: ~'@{namespace}-app-search-modal';
|
||||||
@footer-prefix-cls: ~'@{namespace}-app-search-footer';
|
@footer-prefix-cls: ~'@{namespace}-app-search-footer';
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
|
display: flex;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
z-index: 800;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 800;
|
justify-content: center;
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-top: 50px;
|
padding-top: 50px;
|
||||||
background-color: rgb(0 0 0 / 25%);
|
background-color: rgb(0 0 0 / 25%);
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
&--mobile {
|
&--mobile {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -159,7 +159,7 @@
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
&-enter {
|
&-enter {
|
||||||
opacity: 0% !important;
|
opacity: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -167,27 +167,27 @@
|
||||||
|
|
||||||
&-content {
|
&-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
flex-direction: column;
|
||||||
width: 632px;
|
width: 632px;
|
||||||
margin: 0 auto auto;
|
margin: 0 auto auto;
|
||||||
background-color: @component-background;
|
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
|
background-color: @component-background;
|
||||||
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
|
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-input__wrapper {
|
&-input__wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 14px 14px 0;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 14px 14px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-input {
|
&-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
font-size: 1.5em;
|
|
||||||
color: #1c1e21;
|
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
color: #1c1e21;
|
||||||
|
font-size: 1.5em;
|
||||||
|
|
||||||
span[role='img'] {
|
span[role='img'] {
|
||||||
color: #999;
|
color: #999;
|
||||||
|
|
@ -196,43 +196,43 @@
|
||||||
|
|
||||||
&-cancel {
|
&-cancel {
|
||||||
display: none;
|
display: none;
|
||||||
font-size: 1em;
|
|
||||||
color: #666;
|
color: #666;
|
||||||
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-not-data {
|
&-not-data {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
|
||||||
height: 100px;
|
|
||||||
font-size: 0.9;
|
|
||||||
color: rgb(150 159 175);
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
color: rgb(150 159 175);
|
||||||
|
font-size: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-list {
|
&-list {
|
||||||
max-height: 472px;
|
max-height: 472px;
|
||||||
padding: 0 14px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 14px;
|
margin-top: 14px;
|
||||||
|
padding: 0 14px;
|
||||||
|
padding-bottom: 20px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
|
margin-top: 8px;
|
||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
padding-left: 14px;
|
padding-left: 14px;
|
||||||
margin-top: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: @text-color-base;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: @component-background;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
background-color: @component-background;
|
||||||
box-shadow: 0 1px 3px 0 #d4d9e1;
|
box-shadow: 0 1px 3px 0 #d4d9e1;
|
||||||
align-items: center;
|
color: @text-color-base;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
> div:first-child,
|
> div:first-child,
|
||||||
> div:last-child {
|
> div:last-child {
|
||||||
|
|
@ -241,11 +241,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&--active {
|
&--active {
|
||||||
color: #fff;
|
|
||||||
background-color: @primary-color;
|
background-color: @primary-color;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
.@{prefix-cls}-list__item-enter {
|
.@{prefix-cls}-list__item-enter {
|
||||||
opacity: 100%;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -259,7 +259,7 @@
|
||||||
|
|
||||||
&-enter {
|
&-enter {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
opacity: 0%;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -52,10 +52,10 @@
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
transition: all 0.3s ease 0.1s;
|
|
||||||
transform-origin: center center;
|
transform-origin: center center;
|
||||||
|
transition: all 0.3s ease 0.1s;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
&--active {
|
&--active {
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
|
|
|
||||||
|
|
@ -97,8 +97,8 @@
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
font-size: 14px;
|
|
||||||
color: @text-color-help-dark;
|
color: @text-color-help-dark;
|
||||||
|
font-size: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
||||||
|
|
@ -43,13 +43,13 @@
|
||||||
@prefix-cls: ~'@{namespace}-basic-title';
|
@prefix-cls: ~'@{namespace}-basic-title';
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: relative;
|
||||||
padding-left: 7px;
|
padding-left: 7px;
|
||||||
|
color: @text-color-base;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
color: @text-color-base;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
|
|
@ -59,6 +59,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-show-span::before {
|
&-show-span::before {
|
||||||
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -66,7 +67,6 @@
|
||||||
height: 16px;
|
height: 16px;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
background-color: @primary-color;
|
background-color: @primary-color;
|
||||||
content: '';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-help {
|
&-help {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
const validColors = ['primary', 'error', 'warning', 'success', ''] as const;
|
const validColors = ['primary', 'error', 'warning', 'success', ''] as const;
|
||||||
type ButtonColorType = typeof validColors[number];
|
type ButtonColorType = (typeof validColors)[number];
|
||||||
|
|
||||||
export const buttonProps = {
|
export const buttonProps = {
|
||||||
color: {
|
color: {
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,9 @@
|
||||||
{props.loading ? (
|
{props.loading ? (
|
||||||
<Skeleton active={props.loading} />
|
<Skeleton active={props.loading} />
|
||||||
) : (
|
) : (
|
||||||
<div class={`${prefixCls}__body`} v-show={show.value}>{slots.default?.()}</div>
|
<div class={`${prefixCls}__body`} v-show={show.value}>
|
||||||
|
{slots.default?.()}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</CollapseTransition>
|
</CollapseTransition>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -89,15 +91,15 @@
|
||||||
@prefix-cls: ~'@{namespace}-collapse-container';
|
@prefix-cls: ~'@{namespace}-collapse-container';
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
background-color: @component-background;
|
|
||||||
border-radius: 2px;
|
|
||||||
transition: all 0.3s ease-in-out;
|
transition: all 0.3s ease-in-out;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: @component-background;
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 32px;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 32px;
|
||||||
border-bottom: 1px solid @border-color-light;
|
border-bottom: 1px solid @border-color-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -107,10 +109,10 @@
|
||||||
|
|
||||||
&__action {
|
&__action {
|
||||||
display: flex;
|
display: flex;
|
||||||
text-align: right;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="tsx">
|
<script lang="tsx">
|
||||||
import { defineComponent, computed, unref, type ExtractPropTypes } from 'vue';
|
import { defineComponent, computed, unref, type ExtractPropTypes, PropType } from 'vue';
|
||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
import { BasicArrow, BasicTitle } from '/@/components/Basic';
|
import { BasicArrow, BasicTitle } from '/@/components/Basic';
|
||||||
|
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
</BasicTitle>
|
</BasicTitle>
|
||||||
|
|
||||||
<div class={`${unref(_prefixCls)}__action`}>
|
<div class={`${unref(_prefixCls)}__action`}>
|
||||||
{slots.action
|
{slots.action
|
||||||
? slots.action({ expand: props.show, onClick: () => emit('expand') })
|
? slots.action({ expand: props.show, onClick: () => emit('expand') })
|
||||||
: props.canExpan && (
|
: props.canExpan && (
|
||||||
<BasicArrow up expand={props.show} onClick={() => emit('expand')} />
|
<BasicArrow up expand={props.show} onClick={() => emit('expand')} />
|
||||||
|
|
|
||||||
|
|
@ -161,27 +161,27 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.ant-menu-item-disabled):hover {
|
&:not(.ant-menu-item-disabled):hover {
|
||||||
color: @text-color-base;
|
|
||||||
background-color: @item-hover-bg;
|
background-color: @item-hover-bg;
|
||||||
|
color: @text-color-base;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.context-menu {
|
.context-menu {
|
||||||
|
display: block;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
z-index: 200;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 200;
|
|
||||||
display: block;
|
|
||||||
width: 156px;
|
width: 156px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
list-style: none;
|
|
||||||
background-color: @component-background;
|
|
||||||
border: 1px solid rgb(0 0 0 / 8%);
|
border: 1px solid rgb(0 0 0 / 8%);
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
|
background-clip: padding-box;
|
||||||
|
background-color: @component-background;
|
||||||
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 10%),
|
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 10%),
|
||||||
0 1px 5px 0 rgb(0 0 0 / 6%);
|
0 1px 5px 0 rgb(0 0 0 / 6%);
|
||||||
background-clip: padding-box;
|
list-style: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,9 @@ export const createContextMenu = function (options: CreateContextOptions) {
|
||||||
menuManager.domList.forEach((dom: Element) => {
|
menuManager.domList.forEach((dom: Element) => {
|
||||||
try {
|
try {
|
||||||
dom && body.removeChild(dom);
|
dom && body.removeChild(dom);
|
||||||
} catch (error) {}
|
} catch (error) {
|
||||||
|
//
|
||||||
|
}
|
||||||
});
|
});
|
||||||
body.removeEventListener('click', handleClick);
|
body.removeEventListener('click', handleClick);
|
||||||
body.removeEventListener('scroll', handleClick);
|
body.removeEventListener('scroll', handleClick);
|
||||||
|
|
|
||||||
|
|
@ -43,8 +43,8 @@
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
.ant-input-group-addon {
|
.ant-input-group-addon {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
|
||||||
|
|
@ -113,7 +113,7 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { CropendResult, Cropper } from './typing';
|
import type { CropendResult, Cropper } from './typing';
|
||||||
|
|
||||||
import { defineComponent, ref } from 'vue';
|
import { defineComponent, ref, PropType } from 'vue';
|
||||||
import CropperImage from './Cropper.vue';
|
import CropperImage from './Cropper.vue';
|
||||||
import { Space, Upload, Avatar, Tooltip } from 'ant-design-vue';
|
import { Space, Upload, Avatar, Tooltip } from 'ant-design-vue';
|
||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
|
|
@ -253,8 +253,8 @@
|
||||||
|
|
||||||
&-toolbar {
|
&-toolbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -274,11 +274,11 @@
|
||||||
|
|
||||||
&-group {
|
&-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding-top: 8px;
|
|
||||||
margin-top: 8px;
|
|
||||||
border-top: 1px solid @border-color-base;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-top: 8px;
|
||||||
|
padding-top: 8px;
|
||||||
|
border-top: 1px solid @border-color-base;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -124,10 +124,10 @@
|
||||||
|
|
||||||
&-image-wrapper {
|
&-image-wrapper {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
|
||||||
background: @component-background;
|
|
||||||
border: 1px solid @border-color-base;
|
border: 1px solid @border-color-base;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
background: @component-background;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -135,15 +135,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-image-mask {
|
&-image-mask {
|
||||||
opacity: 0%;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
border-radius: inherit;
|
transition: opacity 0.4s;
|
||||||
border: inherit;
|
border: inherit;
|
||||||
|
border-radius: inherit;
|
||||||
|
opacity: 0;
|
||||||
background: rgb(0 0 0 / 40%);
|
background: rgb(0 0 0 / 40%);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: opacity 0.4s;
|
|
||||||
|
|
||||||
::v-deep(svg) {
|
::v-deep(svg) {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
@ -151,7 +151,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-image-mask:hover {
|
&-image-mask:hover {
|
||||||
opacity: 4000%;
|
opacity: 40;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-upload-btn {
|
&-upload-btn {
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,7 @@
|
||||||
setup(props, { emit }) {
|
setup(props, { emit }) {
|
||||||
const visibleRef = ref(false);
|
const visibleRef = ref(false);
|
||||||
const attrs = useAttrs();
|
const attrs = useAttrs();
|
||||||
const propsRef = ref<Partial<Nullable<DrawerProps>>>(null);
|
const propsRef = ref<Partial<DrawerProps | null>>(null);
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { prefixVar, prefixCls } = useDesign('basic-drawer');
|
const { prefixVar, prefixCls } = useDesign('basic-drawer');
|
||||||
|
|
@ -77,7 +77,7 @@
|
||||||
instance && emit('register', drawerInstance, instance.uid);
|
instance && emit('register', drawerInstance, instance.uid);
|
||||||
|
|
||||||
const getMergeProps = computed((): DrawerProps => {
|
const getMergeProps = computed((): DrawerProps => {
|
||||||
return deepMerge(toRaw(props), unref(propsRef));
|
return deepMerge(toRaw(props), unref(propsRef)) as any;
|
||||||
});
|
});
|
||||||
|
|
||||||
const getProps = computed((): DrawerProps => {
|
const getProps = computed((): DrawerProps => {
|
||||||
|
|
@ -153,7 +153,7 @@
|
||||||
);
|
);
|
||||||
|
|
||||||
// Cancel event
|
// Cancel event
|
||||||
async function onClose(e: Recordable) {
|
async function onClose(e) {
|
||||||
const { closeFunc } = unref(getProps);
|
const { closeFunc } = unref(getProps);
|
||||||
emit('close', e);
|
emit('close', e);
|
||||||
if (closeFunc && isFunction(closeFunc)) {
|
if (closeFunc && isFunction(closeFunc)) {
|
||||||
|
|
@ -215,8 +215,8 @@
|
||||||
background-color: @component-background;
|
background-color: @component-background;
|
||||||
|
|
||||||
.scrollbar__wrap {
|
.scrollbar__wrap {
|
||||||
padding: 16px !important;
|
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
|
padding: 16px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .scrollbar > .scrollbar__bar.is-horizontal {
|
> .scrollbar > .scrollbar__bar.is-horizontal {
|
||||||
|
|
@ -229,11 +229,11 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
.ant-drawer-header {
|
.ant-drawer-header {
|
||||||
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: @detail-header-height;
|
height: @detail-header-height;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-top: 1px solid @border-color-base;
|
border-top: 1px solid @border-color-base;
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-drawer-title {
|
.ant-drawer-title {
|
||||||
|
|
|
||||||
|
|
@ -71,9 +71,9 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 12px 0 20px;
|
padding: 0 12px 0 20px;
|
||||||
text-align: right;
|
|
||||||
background-color: @component-background;
|
|
||||||
border-top: 1px solid @border-color-base;
|
border-top: 1px solid @border-color-base;
|
||||||
|
background-color: @component-background;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
|
|
|
||||||
|
|
@ -51,8 +51,8 @@
|
||||||
@footer-height: 60px;
|
@footer-height: 60px;
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
&__back {
|
&__back {
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
|
|
|
||||||
|
|
@ -196,7 +196,7 @@
|
||||||
/**
|
/**
|
||||||
* @description 文件选择器关闭后,判断取消状态
|
* @description 文件选择器关闭后,判断取消状态
|
||||||
*/
|
*/
|
||||||
function handleFocusChange() {
|
function handleFocusChange() {
|
||||||
const timeId = setInterval(() => {
|
const timeId = setInterval(() => {
|
||||||
if (cancelRef.value === true) {
|
if (cancelRef.value === true) {
|
||||||
emit('cancel');
|
emit('cancel');
|
||||||
|
|
|
||||||
|
|
@ -142,8 +142,8 @@
|
||||||
}
|
}
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
height: 36px;
|
height: 36px;
|
||||||
background-color: @app-content-background;
|
|
||||||
border-bottom: 1px solid @border-color-base;
|
border-bottom: 1px solid @border-color-base;
|
||||||
|
background-color: @app-content-background;
|
||||||
|
|
||||||
.disabeld {
|
.disabeld {
|
||||||
color: @disabled-color;
|
color: @disabled-color;
|
||||||
|
|
@ -151,8 +151,8 @@
|
||||||
|
|
||||||
&__icon {
|
&__icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 2px 4px;
|
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
padding: 2px 4px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @primary-color;
|
color: @primary-color;
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,7 @@
|
||||||
props: basicProps,
|
props: basicProps,
|
||||||
emits: ['advanced-change', 'reset', 'submit', 'register', 'field-value-change'],
|
emits: ['advanced-change', 'reset', 'submit', 'register', 'field-value-change'],
|
||||||
setup(props, { emit, attrs }) {
|
setup(props, { emit, attrs }) {
|
||||||
const formModel = reactive<Recordable>({});
|
const formModel = reactive({});
|
||||||
const modalFn = useModalContext();
|
const modalFn = useModalContext();
|
||||||
|
|
||||||
const advanceState = reactive<AdvanceState>({
|
const advanceState = reactive<AdvanceState>({
|
||||||
|
|
@ -81,17 +81,17 @@
|
||||||
actionSpan: 6,
|
actionSpan: 6,
|
||||||
});
|
});
|
||||||
|
|
||||||
const defaultValueRef = ref<Recordable>({});
|
const defaultValueRef = ref({});
|
||||||
const isInitedDefaultRef = ref(false);
|
const isInitedDefaultRef = ref(false);
|
||||||
const propsRef = ref<Partial<FormProps>>({});
|
const propsRef = ref<Partial<FormProps>>({});
|
||||||
const schemaRef = ref<Nullable<FormSchema[]>>(null);
|
const schemaRef = ref<FormSchema[] | null>(null);
|
||||||
const formElRef = ref<Nullable<FormActionType>>(null);
|
const formElRef = ref<FormActionType | null>(null);
|
||||||
|
|
||||||
const { prefixCls } = useDesign('basic-form');
|
const { prefixCls } = useDesign('basic-form');
|
||||||
|
|
||||||
// Get the basic configuration of the form
|
// Get the basic configuration of the form
|
||||||
const getProps = computed((): FormProps => {
|
const getProps = computed((): FormProps => {
|
||||||
return { ...props, ...unref(propsRef) } as FormProps;
|
return { ...props, ...unref(propsRef) };
|
||||||
});
|
});
|
||||||
|
|
||||||
const getFormClass = computed(() => {
|
const getFormClass = computed(() => {
|
||||||
|
|
@ -104,7 +104,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// Get uniform row style and Row configuration for the entire form
|
// Get uniform row style and Row configuration for the entire form
|
||||||
const getRow = computed((): Recordable => {
|
const getRow = computed(() => {
|
||||||
const { baseRowStyle = {}, rowProps } = unref(getProps);
|
const { baseRowStyle = {}, rowProps } = unref(getProps);
|
||||||
return {
|
return {
|
||||||
style: baseRowStyle,
|
style: baseRowStyle,
|
||||||
|
|
@ -112,9 +112,7 @@
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
const getBindValue = computed(
|
const getBindValue = computed(() => ({ ...attrs, ...props, ...unref(getProps) }));
|
||||||
() => ({ ...attrs, ...props, ...unref(getProps) } as Recordable),
|
|
||||||
);
|
|
||||||
|
|
||||||
const getSchema = computed((): FormSchema[] => {
|
const getSchema = computed((): FormSchema[] => {
|
||||||
const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
|
const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
|
||||||
|
|
@ -297,9 +295,7 @@
|
||||||
formActionType: formActionType as any,
|
formActionType: formActionType as any,
|
||||||
setFormModel,
|
setFormModel,
|
||||||
getFormClass,
|
getFormClass,
|
||||||
getFormActionBindProps: computed(
|
getFormActionBindProps: computed(() => ({ ...getProps.value, ...advanceState })),
|
||||||
(): Recordable => ({ ...getProps.value, ...advanceState }),
|
|
||||||
),
|
|
||||||
fieldsIsAdvancedMap,
|
fieldsIsAdvancedMap,
|
||||||
...formActionType,
|
...formActionType,
|
||||||
};
|
};
|
||||||
|
|
@ -334,10 +330,10 @@
|
||||||
|
|
||||||
.suffix {
|
.suffix {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
padding-left: 6px;
|
|
||||||
margin-top: 1px;
|
|
||||||
line-height: 1;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-top: 1px;
|
||||||
|
padding-left: 6px;
|
||||||
|
line-height: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { computed, defineComponent, watch, ref, unref, watchEffect } from 'vue';
|
import { computed, defineComponent, watch, ref, unref, watchEffect, PropType } from 'vue';
|
||||||
import { Transfer } from 'ant-design-vue';
|
import { Transfer } from 'ant-design-vue';
|
||||||
import { isFunction } from '/@/utils/is';
|
import { isFunction } from '/@/utils/is';
|
||||||
import { get, omit } from 'lodash-es';
|
import { get, omit } from 'lodash-es';
|
||||||
|
|
@ -25,14 +25,14 @@
|
||||||
props: {
|
props: {
|
||||||
value: { type: Array as PropType<Array<string>> },
|
value: { type: Array as PropType<Array<string>> },
|
||||||
api: {
|
api: {
|
||||||
type: Function as PropType<(arg?: Recordable) => Promise<TransferItem[]>>,
|
type: Function as PropType<(arg) => Promise<TransferItem[]>>,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
params: { type: Object },
|
params: { type: Object },
|
||||||
dataSource: { type: Array as PropType<Array<TransferItem>> },
|
dataSource: { type: Array as PropType<Array<TransferItem>> },
|
||||||
immediate: propTypes.bool.def(true),
|
immediate: propTypes.bool.def(true),
|
||||||
alwaysLoad: propTypes.bool.def(false),
|
alwaysLoad: propTypes.bool.def(false),
|
||||||
afterFetch: { type: Function as PropType<Fn> },
|
afterFetch: { type: Function },
|
||||||
resultField: propTypes.string.def(''),
|
resultField: propTypes.string.def(''),
|
||||||
labelField: propTypes.string.def('title'),
|
labelField: propTypes.string.def('title'),
|
||||||
valueField: propTypes.string.def('key'),
|
valueField: propTypes.string.def('key'),
|
||||||
|
|
@ -60,7 +60,7 @@
|
||||||
const getdataSource = computed(() => {
|
const getdataSource = computed(() => {
|
||||||
const { labelField, valueField } = props;
|
const { labelField, valueField } = props;
|
||||||
|
|
||||||
return unref(_dataSource).reduce((prev, next: Recordable) => {
|
return unref(_dataSource).reduce((prev, next) => {
|
||||||
if (next) {
|
if (next) {
|
||||||
prev.push({
|
prev.push({
|
||||||
...omit(next, [labelField, valueField]),
|
...omit(next, [labelField, valueField]),
|
||||||
|
|
@ -78,7 +78,7 @@
|
||||||
if (Array.isArray(props.value)) {
|
if (Array.isArray(props.value)) {
|
||||||
return props.value;
|
return props.value;
|
||||||
}
|
}
|
||||||
if (Array.isArray(props.targetKeys)){
|
if (Array.isArray(props.targetKeys)) {
|
||||||
return props.targetKeys;
|
return props.targetKeys;
|
||||||
}
|
}
|
||||||
return [];
|
return [];
|
||||||
|
|
@ -125,7 +125,6 @@
|
||||||
emitChange();
|
emitChange();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.warn(error);
|
console.warn(error);
|
||||||
} finally {
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function emitChange() {
|
function emitChange() {
|
||||||
|
|
|
||||||
|
|
@ -77,9 +77,9 @@ export function useFormValues({
|
||||||
// Remove spaces
|
// Remove spaces
|
||||||
if (isString(value)) {
|
if (isString(value)) {
|
||||||
// remove params from URL
|
// remove params from URL
|
||||||
if(value === '') {
|
if (value === '') {
|
||||||
value = undefined;
|
value = undefined;
|
||||||
}else {
|
} else {
|
||||||
value = value.trim();
|
value = value.trim();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
prefix: propTypes.string.def(''),
|
prefix: propTypes.string.def(''),
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const elRef = ref<ElRef>(null);
|
const elRef = ref(null);
|
||||||
|
|
||||||
const isSvgIcon = computed(() => props.icon?.endsWith(SVG_END_WITH_FLAG));
|
const isSvgIcon = computed(() => props.icon?.endsWith(SVG_END_WITH_FLAG));
|
||||||
const getSvgIcon = computed(() => props.icon.replace(SVG_END_WITH_FLAG, ''));
|
const getSvgIcon = computed(() => props.icon.replace(SVG_END_WITH_FLAG, ''));
|
||||||
|
|
@ -115,7 +115,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
min-width: 1em;
|
min-width: 1em;
|
||||||
min-height: 1em;
|
min-height: 1em;
|
||||||
background-color: @iconify-bg-color;
|
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
|
background-color: @iconify-bg-color;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -55,8 +55,8 @@
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
fill: currentcolor;
|
||||||
vertical-align: -0.15em;
|
vertical-align: -0.15em;
|
||||||
fill: currentColor;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.svg-icon-spin {
|
.svg-icon-spin {
|
||||||
|
|
|
||||||
|
|
@ -48,22 +48,22 @@
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.full-loading {
|
.full-loading {
|
||||||
|
display: flex;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
z-index: 200;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 200;
|
align-items: center;
|
||||||
display: flex;
|
justify-content: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgb(240 242 245 / 40%);
|
background-color: rgb(240 242 245 / 40%);
|
||||||
|
|
||||||
&.absolute {
|
&.absolute {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
z-index: 300;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 300;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -160,5 +160,5 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import './index.less';
|
@import url('./index.less');
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -66,8 +66,8 @@
|
||||||
@prefix-cls: ~'@{namespace}-basic-modal-close';
|
@prefix-cls: ~'@{namespace}-basic-modal-close';
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 95%;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
height: 95%;
|
||||||
|
|
||||||
> span {
|
> span {
|
||||||
margin-left: 48px;
|
margin-left: 48px;
|
||||||
|
|
|
||||||
|
|
@ -28,20 +28,20 @@
|
||||||
@prefix-cls: ~'@{namespace}-page-footer';
|
@prefix-cls: ~'@{namespace}-page-footer';
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
|
display: flex;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
z-index: @page-footer-z-index;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: @page-footer-z-index;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
line-height: 44px;
|
transition: width 0.2s;
|
||||||
background-color: @component-background;
|
|
||||||
border-top: 1px solid @border-color-base;
|
border-top: 1px solid @border-color-base;
|
||||||
|
background-color: @component-background;
|
||||||
box-shadow: 0 -6px 16px -8px rgb(0 0 0 / 8%), 0 -9px 28px 0 rgb(0 0 0 / 5%),
|
box-shadow: 0 -6px 16px -8px rgb(0 0 0 / 8%), 0 -9px 28px 0 rgb(0 0 0 / 5%),
|
||||||
0 -12px 48px 16px rgb(0 0 0 / 3%);
|
0 -12px 48px 16px rgb(0 0 0 / 3%);
|
||||||
transition: width 0.2s;
|
line-height: 44px;
|
||||||
|
|
||||||
&__left {
|
&__left {
|
||||||
flex: 1 1;
|
flex: 1 1;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="tsx">
|
<script lang="tsx">
|
||||||
import { defineComponent, ref, unref, computed, reactive, watchEffect } from 'vue';
|
import { defineComponent, ref, unref, computed, reactive, watchEffect, PropType } from 'vue';
|
||||||
import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
|
import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
|
||||||
import resumeSvg from '/@/assets/svg/preview/resume.svg';
|
import resumeSvg from '/@/assets/svg/preview/resume.svg';
|
||||||
import rotateSvg from '/@/assets/svg/preview/p-rotate.svg';
|
import rotateSvg from '/@/assets/svg/preview/p-rotate.svg';
|
||||||
|
|
@ -435,26 +435,23 @@
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.img-preview {
|
.img-preview {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: @preview-comp-z-index;
|
z-index: @preview-comp-z-index;
|
||||||
|
inset: 0;
|
||||||
background: rgb(0 0 0 / 50%);
|
background: rgb(0 0 0 / 50%);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
&-content {
|
&-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
color: @white;
|
color: @white;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-image {
|
&-image {
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.3s;
|
transition: transform 0.3s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__close {
|
&__close {
|
||||||
|
|
@ -464,11 +461,11 @@
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
transition: all 0.2s;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: rgb(0 0 0 / 50%);
|
||||||
color: @white;
|
color: @white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: rgb(0 0 0 / 50%);
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&-icon {
|
&-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -487,32 +484,32 @@
|
||||||
bottom: 5%;
|
bottom: 5%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
padding: 0 22px;
|
padding: 0 22px;
|
||||||
font-size: 16px;
|
|
||||||
background: rgb(109 109 109 / 60%);
|
|
||||||
border-radius: 15px;
|
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
border-radius: 15px;
|
||||||
|
background: rgb(109 109 109 / 60%);
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__controller {
|
&__controller {
|
||||||
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10%;
|
bottom: 10%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
display: flex;
|
justify-content: center;
|
||||||
width: 260px;
|
width: 260px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
padding: 0 22px;
|
|
||||||
margin-left: -139px;
|
margin-left: -139px;
|
||||||
background: rgb(109 109 109 / 60%);
|
padding: 0 22px;
|
||||||
border-radius: 22px;
|
border-radius: 22px;
|
||||||
justify-content: center;
|
background: rgb(109 109 109 / 60%);
|
||||||
|
|
||||||
&-item {
|
&-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 9px;
|
padding: 0 9px;
|
||||||
|
transition: all 0.2s;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
|
|
@ -525,18 +522,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&__arrow {
|
&__arrow {
|
||||||
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: rgb(0 0 0 / 50%);
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: rgb(0 0 0 / 50%);
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgb(0 0 0 / 80%);
|
background-color: rgb(0 0 0 / 80%);
|
||||||
|
|
|
||||||
|
|
@ -148,20 +148,20 @@
|
||||||
display: none;
|
display: none;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
opacity: 0%;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__thumb {
|
&__thumb {
|
||||||
position: relative;
|
|
||||||
display: block;
|
display: block;
|
||||||
|
position: relative;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
cursor: pointer;
|
|
||||||
background-color: rgb(144 147 153 / 30%);
|
|
||||||
border-radius: inherit;
|
|
||||||
transition: 0.3s background-color;
|
transition: 0.3s background-color;
|
||||||
|
border-radius: inherit;
|
||||||
|
background-color: rgb(144 147 153 / 30%);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgb(144 147 153 / 50%);
|
background-color: rgb(144 147 153 / 50%);
|
||||||
|
|
@ -170,12 +170,12 @@
|
||||||
|
|
||||||
&__bar {
|
&__bar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
right: 2px;
|
right: 2px;
|
||||||
bottom: 2px;
|
bottom: 2px;
|
||||||
z-index: 1;
|
|
||||||
border-radius: 4px;
|
|
||||||
opacity: 0%;
|
|
||||||
transition: opacity 80ms ease;
|
transition: opacity 80ms ease;
|
||||||
|
border-radius: 4px;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
&.is-vertical {
|
&.is-vertical {
|
||||||
top: 2px;
|
top: 2px;
|
||||||
|
|
@ -200,7 +200,7 @@
|
||||||
.scrollbar:active > .scrollbar__bar,
|
.scrollbar:active > .scrollbar__bar,
|
||||||
.scrollbar:focus > .scrollbar__bar,
|
.scrollbar:focus > .scrollbar__bar,
|
||||||
.scrollbar:hover > .scrollbar__bar {
|
.scrollbar:hover > .scrollbar__bar {
|
||||||
opacity: 100%;
|
|
||||||
transition: opacity 340ms ease-out;
|
transition: opacity 340ms ease-out;
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
import type { MenuState } from './types';
|
import type { MenuState } from './types';
|
||||||
import type { Menu as MenuType } from '/@/router/types';
|
import type { Menu as MenuType } from '/@/router/types';
|
||||||
import type { RouteLocationNormalizedLoaded } from 'vue-router';
|
import type { RouteLocationNormalizedLoaded } from 'vue-router';
|
||||||
import { defineComponent, computed, ref, unref, reactive, toRefs, watch } from 'vue';
|
import { defineComponent, computed, ref, unref, reactive, toRefs, watch, PropType } from 'vue';
|
||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
import Menu from './components/Menu.vue';
|
import Menu from './components/Menu.vue';
|
||||||
import SimpleSubMenu from './SimpleSubMenu.vue';
|
import SimpleSubMenu from './SimpleSubMenu.vue';
|
||||||
|
|
@ -74,8 +74,8 @@
|
||||||
menuState,
|
menuState,
|
||||||
items,
|
items,
|
||||||
accordion,
|
accordion,
|
||||||
mixSider,
|
mixSider as any,
|
||||||
collapse,
|
collapse as any,
|
||||||
);
|
);
|
||||||
|
|
||||||
const getBindValues = computed(() => ({ ...attrs, ...props }));
|
const getBindValues = computed(() => ({ ...attrs, ...props }));
|
||||||
|
|
@ -156,5 +156,5 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import './index.less';
|
@import url('./index.less');
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -154,5 +154,5 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import './menu.less';
|
@import url('./menu.less');
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
return score;
|
return score;
|
||||||
});
|
});
|
||||||
|
|
||||||
function handleChange(e: ChangeEvent) {
|
function handleChange(e) {
|
||||||
innerValueRef.value = e.target.value;
|
innerValueRef.value = e.target.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -79,21 +79,21 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
margin: 10px auto 6px;
|
margin: 10px auto 6px;
|
||||||
background-color: @disabled-color;
|
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
background-color: @disabled-color;
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
display: block;
|
|
||||||
width: 20%;
|
width: 20%;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
background-color: transparent;
|
|
||||||
border-color: @white;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0 5px;
|
border-width: 0 5px;
|
||||||
content: '';
|
border-style: solid;
|
||||||
|
border-color: @white;
|
||||||
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
|
|
@ -108,9 +108,9 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
background-color: transparent;
|
|
||||||
border-radius: inherit;
|
|
||||||
transition: width 0.5s ease-in-out, background 0.25s;
|
transition: width 0.5s ease-in-out, background 0.25s;
|
||||||
|
border-radius: inherit;
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
&[data-score='0'] {
|
&[data-score='0'] {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
|
|
|
||||||
|
|
@ -102,7 +102,7 @@
|
||||||
],
|
],
|
||||||
setup(props, { attrs, emit, slots, expose }) {
|
setup(props, { attrs, emit, slots, expose }) {
|
||||||
const tableElRef = ref(null);
|
const tableElRef = ref(null);
|
||||||
const tableData = ref<Recordable[]>([]);
|
const tableData = ref([]);
|
||||||
|
|
||||||
const wrapRef = ref(null);
|
const wrapRef = ref(null);
|
||||||
const formRef = ref(null);
|
const formRef = ref(null);
|
||||||
|
|
@ -239,7 +239,7 @@
|
||||||
|
|
||||||
const getBindValues = computed(() => {
|
const getBindValues = computed(() => {
|
||||||
const dataSource = unref(getDataSourceRef);
|
const dataSource = unref(getDataSourceRef);
|
||||||
let propsData: Recordable = {
|
let propsData: any = {
|
||||||
...attrs,
|
...attrs,
|
||||||
customRow,
|
customRow,
|
||||||
...unref(getProps),
|
...unref(getProps),
|
||||||
|
|
@ -379,10 +379,10 @@
|
||||||
|
|
||||||
.ant-form {
|
.ant-form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px 10px 6px;
|
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
background-color: @component-background;
|
padding: 12px 10px 6px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
background-color: @component-background;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -394,8 +394,8 @@
|
||||||
|
|
||||||
.ant-table-wrapper {
|
.ant-table-wrapper {
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
background-color: @component-background;
|
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
background-color: @component-background;
|
||||||
|
|
||||||
.ant-table-title {
|
.ant-table-title {
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
|
|
@ -413,10 +413,10 @@
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
padding: 8px 6px;
|
padding: 8px 6px;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//.ant-table-tbody > tr.ant-table-row-selected td {
|
//.ant-table-tbody > tr.ant-table-row-selected td {
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
type: [Function, String] as PropType<string | ((data: Recordable) => string)>,
|
type: [Function, String] as PropType<string | ((data) => string)>,
|
||||||
},
|
},
|
||||||
tableSetting: {
|
tableSetting: {
|
||||||
type: Object as PropType<TableSetting>,
|
type: Object as PropType<TableSetting>,
|
||||||
|
|
@ -68,8 +68,8 @@
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
&__toolbar {
|
&__toolbar {
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,10 +14,10 @@
|
||||||
components: { BasicTitle },
|
components: { BasicTitle },
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
type: [Function, String] as PropType<string | ((data: Recordable) => string)>,
|
type: [Function, String] as PropType<string | ((data) => string)>,
|
||||||
},
|
},
|
||||||
getSelectRows: {
|
getSelectRows: {
|
||||||
type: Function as PropType<() => Recordable[]>,
|
type: Function as PropType<() => any[]>,
|
||||||
},
|
},
|
||||||
helpMessage: {
|
helpMessage: {
|
||||||
type: [String, Array] as PropType<string | string[]>,
|
type: [String, Array] as PropType<string | string[]>,
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
import type { CSSProperties, PropType } from 'vue';
|
import type { CSSProperties, PropType } from 'vue';
|
||||||
import { computed, defineComponent, nextTick, ref, toRaw, unref, watchEffect } from 'vue';
|
import { computed, defineComponent, nextTick, ref, toRaw, unref, watchEffect } from 'vue';
|
||||||
import type { BasicColumn } from '../../types/table';
|
import type { BasicColumn } from '../../types/table';
|
||||||
import type { EditRecordRow } from './index';
|
|
||||||
import { CheckOutlined, CloseOutlined, FormOutlined } from '@ant-design/icons-vue';
|
import { CheckOutlined, CloseOutlined, FormOutlined } from '@ant-design/icons-vue';
|
||||||
import { CellComponent } from './CellComponent';
|
import { CellComponent } from './CellComponent';
|
||||||
|
|
||||||
|
|
@ -26,11 +25,13 @@
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: [String, Number, Boolean, Object] as PropType<string | number | boolean | Recordable>,
|
type: [String, Number, Boolean, Object] as PropType<
|
||||||
|
string | number | boolean | Record<string, any>
|
||||||
|
>,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
record: {
|
record: {
|
||||||
type: Object as PropType<EditRecordRow>,
|
type: Object as any,
|
||||||
},
|
},
|
||||||
column: {
|
column: {
|
||||||
type: Object as PropType<BasicColumn>,
|
type: Object as PropType<BasicColumn>,
|
||||||
|
|
@ -44,7 +45,7 @@
|
||||||
const elRef = ref();
|
const elRef = ref();
|
||||||
const ruleVisible = ref(false);
|
const ruleVisible = ref(false);
|
||||||
const ruleMessage = ref('');
|
const ruleMessage = ref('');
|
||||||
const optionsRef = ref<LabelValueOptions>([]);
|
const optionsRef = ref([]);
|
||||||
const currentValueRef = ref<any>(props.value);
|
const currentValueRef = ref<any>(props.value);
|
||||||
const defaultValueRef = ref<any>(props.value);
|
const defaultValueRef = ref<any>(props.value);
|
||||||
const spinning = ref<boolean>(false);
|
const spinning = ref<boolean>(false);
|
||||||
|
|
@ -71,7 +72,7 @@
|
||||||
|
|
||||||
const value = isCheckValue ? (isNumber(val) && isBoolean(val) ? val : !!val) : val;
|
const value = isCheckValue ? (isNumber(val) && isBoolean(val) ? val : !!val) : val;
|
||||||
|
|
||||||
let compProps = props.column?.editComponentProps ?? {};
|
let compProps = props.column?.editComponentProps ?? ({} as any);
|
||||||
const { record, column, index } = props;
|
const { record, column, index } = props;
|
||||||
|
|
||||||
if (isFunction(compProps)) {
|
if (isFunction(compProps)) {
|
||||||
|
|
@ -83,7 +84,7 @@
|
||||||
delete compProps.onChange;
|
delete compProps.onChange;
|
||||||
|
|
||||||
const component = unref(getComponent);
|
const component = unref(getComponent);
|
||||||
const apiSelectProps: Recordable = {};
|
const apiSelectProps: Record<string, any> = {};
|
||||||
if (component === 'ApiSelect') {
|
if (component === 'ApiSelect') {
|
||||||
apiSelectProps.cache = true;
|
apiSelectProps.cache = true;
|
||||||
}
|
}
|
||||||
|
|
@ -131,8 +132,7 @@
|
||||||
return value;
|
return value;
|
||||||
}
|
}
|
||||||
|
|
||||||
const options: LabelValueOptions =
|
const options = unref(getComponentProps)?.options ?? (unref(optionsRef) || []);
|
||||||
unref(getComponentProps)?.options ?? (unref(optionsRef) || []);
|
|
||||||
const option = options.find((item) => `${item.value}` === `${value}`);
|
const option = options.find((item) => `${item.value}` === `${value}`);
|
||||||
|
|
||||||
return option?.label ?? value;
|
return option?.label ?? value;
|
||||||
|
|
@ -184,11 +184,11 @@
|
||||||
if (!e) {
|
if (!e) {
|
||||||
currentValueRef.value = e;
|
currentValueRef.value = e;
|
||||||
} else if (component === 'Checkbox') {
|
} else if (component === 'Checkbox') {
|
||||||
currentValueRef.value = (e as ChangeEvent).target.checked;
|
currentValueRef.value = e.target.checked;
|
||||||
} else if (component === 'Switch') {
|
} else if (component === 'Switch') {
|
||||||
currentValueRef.value = e;
|
currentValueRef.value = e;
|
||||||
} else if (e?.target && Reflect.has(e.target, 'value')) {
|
} else if (e?.target && Reflect.has(e.target, 'value')) {
|
||||||
currentValueRef.value = (e as ChangeEvent).target.value;
|
currentValueRef.value = e.target.value;
|
||||||
} else if (isString(e) || isBoolean(e) || isNumber(e) || isArray(e)) {
|
} else if (isString(e) || isBoolean(e) || isNumber(e) || isArray(e)) {
|
||||||
currentValueRef.value = e;
|
currentValueRef.value = e;
|
||||||
}
|
}
|
||||||
|
|
@ -216,8 +216,8 @@
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
if (isFunction(editRule)) {
|
if (isFunction(editRule)) {
|
||||||
const res = await editRule(currentValue, record as Recordable);
|
const res = await editRule(currentValue, record);
|
||||||
if (!!res) {
|
if (res) {
|
||||||
ruleMessage.value = res;
|
ruleMessage.value = res;
|
||||||
ruleVisible.value = true;
|
ruleVisible.value = true;
|
||||||
return false;
|
return false;
|
||||||
|
|
@ -316,25 +316,25 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// only ApiSelect or TreeSelect
|
// only ApiSelect or TreeSelect
|
||||||
function handleOptionsChange(options: LabelValueOptions) {
|
function handleOptionsChange(options) {
|
||||||
const { replaceFields } = unref(getComponentProps);
|
const { replaceFields } = unref(getComponentProps);
|
||||||
const component = unref(getComponent);
|
const component = unref(getComponent);
|
||||||
if (component === 'ApiTreeSelect') {
|
if (component === 'ApiTreeSelect') {
|
||||||
const { title = 'title', value = 'value', children = 'children' } = replaceFields || {};
|
const { title = 'title', value = 'value', children = 'children' } = replaceFields || {};
|
||||||
let listOptions: Recordable[] = treeToList(options, { children });
|
let listOptions = treeToList(options, { children });
|
||||||
listOptions = listOptions.map((item) => {
|
listOptions = listOptions.map((item) => {
|
||||||
return {
|
return {
|
||||||
label: item[title],
|
label: item[title],
|
||||||
value: item[value],
|
value: item[value],
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
optionsRef.value = listOptions as LabelValueOptions;
|
optionsRef.value = listOptions;
|
||||||
} else {
|
} else {
|
||||||
optionsRef.value = options;
|
optionsRef.value = options;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function initCbs(cbs: 'submitCbs' | 'validCbs' | 'cancelCbs', handle: Fn) {
|
function initCbs(cbs: 'submitCbs' | 'validCbs' | 'cancelCbs', handle) {
|
||||||
if (props.record) {
|
if (props.record) {
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
isArray(props.record[cbs])
|
isArray(props.record[cbs])
|
||||||
|
|
@ -476,9 +476,9 @@
|
||||||
.edit-cell-rule-popover {
|
.edit-cell-rule-popover {
|
||||||
.ant-popover-inner-content {
|
.ant-popover-inner-content {
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
color: @error-color;
|
|
||||||
// border: 1px solid @error-color;
|
// border: 1px solid @error-color;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
color: @error-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
|
|
@ -506,20 +506,20 @@
|
||||||
|
|
||||||
.ellipsis-cell {
|
.ellipsis-cell {
|
||||||
.cell-content {
|
.cell-content {
|
||||||
overflow-wrap: break-word;
|
|
||||||
word-break: break-word;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-word;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow-wrap: break-word;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__normal {
|
&__normal {
|
||||||
&-icon {
|
&-icon {
|
||||||
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
right: 0;
|
right: 0;
|
||||||
display: none;
|
|
||||||
width: 20px;
|
width: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -165,7 +165,7 @@
|
||||||
|
|
||||||
const plainSortOptions = ref<Options[]>([]);
|
const plainSortOptions = ref<Options[]>([]);
|
||||||
|
|
||||||
const columnListRef = ref<ComponentRef>(null);
|
const columnListRef = ref(null);
|
||||||
|
|
||||||
const state = reactive<State>({
|
const state = reactive<State>({
|
||||||
checkAll: true,
|
checkAll: true,
|
||||||
|
|
@ -291,7 +291,7 @@
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
const columnListEl = unref(columnListRef);
|
const columnListEl = unref(columnListRef);
|
||||||
if (!columnListEl) return;
|
if (!columnListEl) return;
|
||||||
const el = columnListEl.$el as any;
|
const el = (columnListEl as any).$el;
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
// Drag and drop sort
|
// Drag and drop sort
|
||||||
sortable = Sortablejs.create(unref(el), {
|
sortable = Sortablejs.create(unref(el), {
|
||||||
|
|
@ -416,8 +416,8 @@
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
&__popover-title {
|
&__popover-title {
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: relative;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ export function useTableForm(
|
||||||
|
|
||||||
function replaceFormSlotKey(key: string) {
|
function replaceFormSlotKey(key: string) {
|
||||||
if (!key) return '';
|
if (!key) return '';
|
||||||
return key?.replace?.(/form\-/, '') ?? '';
|
return key?.replace?.(/form-/, '') ?? '';
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSearchInfoChange(info: Recordable) {
|
function handleSearchInfoChange(info: Recordable) {
|
||||||
|
|
|
||||||
|
|
@ -312,7 +312,6 @@ export interface BasicTableProps<T = any> {
|
||||||
*/
|
*/
|
||||||
scroll?: { x?: number | string | true; y?: number | string };
|
scroll?: { x?: number | string | true; y?: number | string };
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Whether to show table header
|
* Whether to show table header
|
||||||
* @default true
|
* @default true
|
||||||
|
|
|
||||||
|
|
@ -62,6 +62,7 @@
|
||||||
watch,
|
watch,
|
||||||
onDeactivated,
|
onDeactivated,
|
||||||
onBeforeUnmount,
|
onBeforeUnmount,
|
||||||
|
PropType,
|
||||||
} from 'vue';
|
} from 'vue';
|
||||||
import ImgUpload from './ImgUpload.vue';
|
import ImgUpload from './ImgUpload.vue';
|
||||||
import { toolbar, plugins } from './tinymce';
|
import { toolbar, plugins } from './tinymce';
|
||||||
|
|
@ -116,10 +117,10 @@
|
||||||
props: tinymceProps,
|
props: tinymceProps,
|
||||||
emits: ['change', 'update:modelValue', 'inited', 'init-error'],
|
emits: ['change', 'update:modelValue', 'inited', 'init-error'],
|
||||||
setup(props, { emit, attrs }) {
|
setup(props, { emit, attrs }) {
|
||||||
const editorRef = ref<Nullable<Editor>>(null);
|
const editorRef = ref<Editor | null>(null);
|
||||||
const fullscreen = ref(false);
|
const fullscreen = ref(false);
|
||||||
const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
|
const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
|
||||||
const elRef = ref<Nullable<HTMLElement>>(null);
|
const elRef = ref<HTMLElement | null>(null);
|
||||||
|
|
||||||
const { prefixCls } = useDesign('tinymce-container');
|
const { prefixCls } = useDesign('tinymce-container');
|
||||||
|
|
||||||
|
|
@ -245,7 +246,7 @@
|
||||||
bindHandlers(e, attrs, unref(editorRef));
|
bindHandlers(e, attrs, unref(editorRef));
|
||||||
}
|
}
|
||||||
|
|
||||||
function setValue(editor: Recordable, val: string, prevVal?: string) {
|
function setValue(editor: Record<string, any>, val: string, prevVal?: string) {
|
||||||
if (
|
if (
|
||||||
editor &&
|
editor &&
|
||||||
typeof val === 'string' &&
|
typeof val === 'string' &&
|
||||||
|
|
@ -339,8 +340,8 @@
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
z-index: -1;
|
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
z-index: -1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
function handleChange(info: Recordable) {
|
function handleChange(info: Record<string, any>) {
|
||||||
const file = info.file;
|
const file = info.file;
|
||||||
const status = file?.status;
|
const status = file?.status;
|
||||||
const url = file?.response?.url;
|
const url = file?.response?.url;
|
||||||
|
|
@ -84,9 +84,9 @@
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
z-index: 20;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
z-index: 20;
|
|
||||||
|
|
||||||
&.fullscreen {
|
&.fullscreen {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import type { VNode, FunctionalComponent } from 'vue';
|
import type { VNode, FunctionalComponent } from 'vue';
|
||||||
|
|
||||||
import { h } from 'vue';
|
import { h } from 'vue';
|
||||||
import { isString } from '@vue/shared';
|
import { isString } from 'lodash-es';
|
||||||
import { Icon } from '/@/components/Icon';
|
import { Icon } from '/@/components/Icon';
|
||||||
|
|
||||||
export const TreeIcon: FunctionalComponent = ({ icon }: { icon: VNode | string }) => {
|
export const TreeIcon: FunctionalComponent = ({ icon }: { icon: VNode | string }) => {
|
||||||
|
|
|
||||||
|
|
@ -19,10 +19,10 @@
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.thumb {
|
.thumb {
|
||||||
img {
|
img {
|
||||||
position: static;
|
|
||||||
display: block;
|
display: block;
|
||||||
cursor: zoom-in;
|
position: static;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
cursor: zoom-in;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -180,7 +180,7 @@
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
item.status = UploadResultStatus.UPLOADING;
|
item.status = UploadResultStatus.UPLOADING;
|
||||||
const { data } = await props.api?.(
|
const ret = await props.api?.(
|
||||||
{
|
{
|
||||||
data: {
|
data: {
|
||||||
...(props.uploadParams || {}),
|
...(props.uploadParams || {}),
|
||||||
|
|
@ -194,6 +194,7 @@
|
||||||
item.percent = complete;
|
item.percent = complete;
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
const { data } = ret;
|
||||||
item.status = UploadResultStatus.SUCCESS;
|
item.status = UploadResultStatus.SUCCESS;
|
||||||
item.responseData = data;
|
item.responseData = data;
|
||||||
return {
|
return {
|
||||||
|
|
@ -313,9 +314,9 @@
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
|
|
||||||
&__btn {
|
&__btn {
|
||||||
|
flex: 1;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
flex: 1;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -291,17 +291,17 @@
|
||||||
.darg-verify {
|
.darg-verify {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-align: center;
|
|
||||||
background-color: rgb(238 238 238);
|
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: @radius;
|
border-radius: @radius;
|
||||||
|
background-color: rgb(238 238 238);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
&-bar {
|
&-bar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
background-color: @success-color;
|
|
||||||
border-radius: @radius;
|
border-radius: @radius;
|
||||||
|
background-color: @success-color;
|
||||||
|
|
||||||
&.to-left {
|
&.to-left {
|
||||||
width: 0 !important;
|
width: 0 !important;
|
||||||
|
|
@ -312,8 +312,8 @@
|
||||||
&-content {
|
&-content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
font-size: 12px;
|
animation: slidetounlock 3s infinite;
|
||||||
text-size-adjust: none;
|
background-clip: text;
|
||||||
background-color: -webkit-gradient(
|
background-color: -webkit-gradient(
|
||||||
linear,
|
linear,
|
||||||
left top,
|
left top,
|
||||||
|
|
@ -324,9 +324,9 @@
|
||||||
color-stop(0.6, #333),
|
color-stop(0.6, #333),
|
||||||
color-stop(1, #333)
|
color-stop(1, #333)
|
||||||
);
|
);
|
||||||
animation: slidetounlock 3s infinite;
|
font-size: 12px;
|
||||||
background-clip: text;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
text-size-adjust: none;
|
||||||
|
|
||||||
&.success {
|
&.success {
|
||||||
-webkit-text-fill-color: @white;
|
-webkit-text-fill-color: @white;
|
||||||
|
|
@ -338,15 +338,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-action {
|
&-action {
|
||||||
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
display: flex;
|
|
||||||
cursor: move;
|
|
||||||
background-color: @white;
|
|
||||||
border-radius: @radius;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: @radius;
|
||||||
|
background-color: @white;
|
||||||
|
cursor: move;
|
||||||
|
|
||||||
&__icon {
|
&__icon {
|
||||||
cursor: inherit;
|
cursor: inherit;
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
props: rotateProps,
|
props: rotateProps,
|
||||||
emits: ['success', 'change', 'update:value'],
|
emits: ['success', 'change', 'update:value'],
|
||||||
setup(props, { emit, attrs, expose }) {
|
setup(props, { emit, attrs, expose }) {
|
||||||
const basicRef = ref<Nullable<DragVerifyActionType>>(null);
|
const basicRef = ref<DragVerifyActionType | null>(null);
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
showTip: false,
|
showTip: false,
|
||||||
isPassing: false,
|
isPassing: false,
|
||||||
|
|
@ -167,8 +167,8 @@
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.ir-dv {
|
.ir-dv {
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: relative;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
|
@ -188,16 +188,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-img__tip {
|
&-img__tip {
|
||||||
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
color: @white;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
color: @white;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
&.success {
|
&.success {
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
watch,
|
watch,
|
||||||
nextTick,
|
nextTick,
|
||||||
CSSProperties,
|
CSSProperties,
|
||||||
|
PropType,
|
||||||
} from 'vue';
|
} from 'vue';
|
||||||
import { useEventListener } from '/@/hooks/event/useEventListener';
|
import { useEventListener } from '/@/hooks/event/useEventListener';
|
||||||
import { getSlot } from '/@/utils/helper/tsxHelper';
|
import { getSlot } from '/@/utils/helper/tsxHelper';
|
||||||
|
|
@ -31,7 +32,7 @@
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
items: {
|
items: {
|
||||||
type: Array as PropType<any[]>,
|
type: Array,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
@ -82,7 +83,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
const getWrapStyleRef = computed((): CSSProperties => {
|
const getWrapStyleRef = computed((): CSSProperties => {
|
||||||
const styles: Recordable<string> = {};
|
const styles: Record<string, any> = {};
|
||||||
const height = convertToUnit(props.height);
|
const height = convertToUnit(props.height);
|
||||||
const minHeight = convertToUnit(props.minHeight);
|
const minHeight = convertToUnit(props.minHeight);
|
||||||
const minWidth = convertToUnit(props.minWidth);
|
const minWidth = convertToUnit(props.minWidth);
|
||||||
|
|
@ -170,12 +171,12 @@
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.virtual-scroll {
|
.virtual-scroll {
|
||||||
position: relative;
|
|
||||||
display: block;
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
flex: 1 1 auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
flex: 1 1 auto;
|
|
||||||
|
|
||||||
&__container {
|
&__container {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
|
||||||
VITE_GLOB_UPLOAD_URL,
|
VITE_GLOB_UPLOAD_URL,
|
||||||
} = getAppEnvConfig();
|
} = getAppEnvConfig();
|
||||||
|
|
||||||
if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
|
if (!/[a-zA-Z_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
|
||||||
warn(
|
warn(
|
||||||
`VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`,
|
`VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`,
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -46,8 +46,8 @@
|
||||||
|
|
||||||
&-loading {
|
&-loading {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 200px;
|
|
||||||
z-index: @page-loading-z-index;
|
z-index: @page-loading-z-index;
|
||||||
|
top: 200px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -62,18 +62,18 @@
|
||||||
@prefix-cls: ~'@{namespace}-setting-drawer-feature';
|
@prefix-cls: ~'@{namespace}-setting-drawer-feature';
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
top: 45%;
|
top: 45%;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 10;
|
align-items: center;
|
||||||
display: flex;
|
justify-content: center;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
border-radius: 6px 0 0 6px;
|
||||||
|
background-color: @primary-color;
|
||||||
color: @white;
|
color: @white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: @primary-color;
|
|
||||||
border-radius: 6px 0 0 6px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
|
|
|
||||||
|
|
@ -109,8 +109,8 @@
|
||||||
@prefix-cls: ~'@{namespace}-layout-multiple-header';
|
@prefix-cls: ~'@{namespace}-layout-multiple-header';
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
transition: width 0.2s;
|
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
transition: width 0.2s;
|
||||||
|
|
||||||
&--dark {
|
&--dark {
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
|
|
@ -118,8 +118,8 @@
|
||||||
|
|
||||||
&--fixed {
|
&--fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
|
||||||
z-index: @multiple-tab-fixed-z-index;
|
z-index: @multiple-tab-fixed-z-index;
|
||||||
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -154,8 +154,8 @@
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0 8px;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
padding: 0 8px;
|
||||||
|
|
||||||
.ant-breadcrumb-link {
|
.ant-breadcrumb-link {
|
||||||
.anticon {
|
.anticon {
|
||||||
|
|
|
||||||
|
|
@ -151,17 +151,17 @@
|
||||||
&-item {
|
&-item {
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|
||||||
.extra {
|
.extra {
|
||||||
float: right;
|
|
||||||
margin-top: -1.5px;
|
margin-top: -1.5px;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
float: right;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
|
|
|
||||||
|
|
@ -126,13 +126,13 @@
|
||||||
@prefix-cls: ~'@{namespace}-header-user-dropdown';
|
@prefix-cls: ~'@{namespace}-header-user-dropdown';
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
|
align-items: center;
|
||||||
height: @header-height;
|
height: @header-height;
|
||||||
padding: 0 0 0 10px;
|
padding: 0 0 0 10px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
|
|
|
||||||
|
|
@ -197,5 +197,5 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import './index.less';
|
@import url('./index.less');
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -75,10 +75,10 @@
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
background-color: @content-bg;
|
background-color: @content-bg;
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
> .ant-layout {
|
> .ant-layout {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
isHorizontal: propTypes.bool,
|
isHorizontal: propTypes.bool,
|
||||||
// menu Mode
|
// menu Mode
|
||||||
menuMode: {
|
menuMode: {
|
||||||
type: [String] as PropType<Nullable<MenuModeEnum>>,
|
type: [String] as PropType<MenuModeEnum | null>,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -189,7 +189,7 @@
|
||||||
&--mobile {
|
&--mobile {
|
||||||
.@{logo-prefix-cls} {
|
.@{logo-prefix-cls} {
|
||||||
&__title {
|
&__title {
|
||||||
opacity: 100%;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -100,7 +100,7 @@ export default defineComponent({
|
||||||
<>
|
<>
|
||||||
<TypePicker
|
<TypePicker
|
||||||
menuTypeList={menuTypeList}
|
menuTypeList={menuTypeList}
|
||||||
handler={(item: typeof menuTypeList[0]) => {
|
handler={(item: (typeof menuTypeList)[0]) => {
|
||||||
baseHandler(HandlerEnum.CHANGE_LAYOUT, {
|
baseHandler(HandlerEnum.CHANGE_LAYOUT, {
|
||||||
mode: item.mode,
|
mode: item.mode,
|
||||||
type: item.type,
|
type: item.type,
|
||||||
|
|
|
||||||
|
|
@ -59,15 +59,15 @@
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin: 16px 0;
|
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
margin: 16px 0;
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -79,8 +79,8 @@
|
||||||
svg {
|
svg {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 0 3px 3px;
|
margin: 0 0 3px 3px;
|
||||||
font-size: 12px;
|
|
||||||
fill: @white !important;
|
fill: @white !important;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
default: () => [],
|
default: () => [],
|
||||||
},
|
},
|
||||||
handler: {
|
handler: {
|
||||||
type: Function as PropType<Fn>,
|
type: Function,
|
||||||
default: () => ({}),
|
default: () => ({}),
|
||||||
},
|
},
|
||||||
def: {
|
def: {
|
||||||
|
|
@ -63,27 +63,27 @@
|
||||||
height: 48px;
|
height: 48px;
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
|
||||||
background-color: #f0f2f5;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
background-color: #f0f2f5;
|
||||||
box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
|
box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
position: absolute;
|
|
||||||
content: '';
|
content: '';
|
||||||
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--sidebar,
|
&--sidebar,
|
||||||
&--light {
|
&--light {
|
||||||
&::before {
|
&::before {
|
||||||
|
z-index: 1;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1;
|
|
||||||
width: 33%;
|
width: 33%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #273352;
|
|
||||||
border-radius: 4px 0 0 4px;
|
border-radius: 4px 0 0 4px;
|
||||||
|
background-color: #273352;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
|
@ -101,14 +101,14 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 33%;
|
width: 33%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 4px 0 0 4px;
|
border-radius: 4px 0 0 4px;
|
||||||
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
z-index: 1;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 25%;
|
height: 25%;
|
||||||
background-color: #273352;
|
background-color: #273352;
|
||||||
|
|
@ -131,13 +131,13 @@
|
||||||
|
|
||||||
&--mix-sidebar {
|
&--mix-sidebar {
|
||||||
&::before {
|
&::before {
|
||||||
|
z-index: 1;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1;
|
|
||||||
width: 25%;
|
width: 25%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #273352;
|
|
||||||
border-radius: 4px 0 0 4px;
|
border-radius: 4px 0 0 4px;
|
||||||
|
background-color: #273352;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
|
|
||||||
|
|
@ -45,14 +45,14 @@
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
z-index: @side-drag-z-index;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: -2px;
|
right: -2px;
|
||||||
z-index: @side-drag-z-index;
|
|
||||||
width: 2px;
|
width: 2px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
cursor: col-resize;
|
|
||||||
border-top: none;
|
border-top: none;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
cursor: col-resize;
|
||||||
|
|
||||||
&--hide {
|
&--hide {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
||||||
|
|
@ -44,8 +44,8 @@
|
||||||
name: 'LayoutSideBar',
|
name: 'LayoutSideBar',
|
||||||
components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
|
components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
|
||||||
setup() {
|
setup() {
|
||||||
const dragBarRef = ref<ElRef>(null);
|
const dragBarRef = ref(null);
|
||||||
const sideRef = ref<ElRef>(null);
|
const sideRef = ref(null);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
getCollapsed,
|
getCollapsed,
|
||||||
|
|
@ -153,12 +153,12 @@
|
||||||
background-color: @sider-dark-bg-color;
|
background-color: @sider-dark-bg-color;
|
||||||
|
|
||||||
.ant-layout-sider-trigger {
|
.ant-layout-sider-trigger {
|
||||||
color: darken(@white, 25%);
|
|
||||||
background-color: @trigger-dark-bg-color;
|
background-color: @trigger-dark-bg-color;
|
||||||
|
color: darken(@white, 25%);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @white;
|
|
||||||
background-color: @trigger-dark-hover-bg-color;
|
background-color: @trigger-dark-hover-bg-color;
|
||||||
|
color: @white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -167,14 +167,14 @@
|
||||||
// box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
|
// box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
|
||||||
|
|
||||||
.ant-layout-sider-trigger {
|
.ant-layout-sider-trigger {
|
||||||
color: @text-color-base;
|
|
||||||
border-top: 1px solid @border-color-light;
|
border-top: 1px solid @border-color-light;
|
||||||
|
color: @text-color-base;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-layout-sider-zero-width-trigger {
|
.ant-layout-sider-zero-width-trigger {
|
||||||
top: 40%;
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
top: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .ant-layout-sider-trigger {
|
& .ant-layout-sider-trigger {
|
||||||
|
|
|
||||||
|
|
@ -117,9 +117,9 @@
|
||||||
const activePath = ref('');
|
const activePath = ref('');
|
||||||
const childrenMenus = ref<Menu[]>([]);
|
const childrenMenus = ref<Menu[]>([]);
|
||||||
const openMenu = ref(false);
|
const openMenu = ref(false);
|
||||||
const dragBarRef = ref<ElRef>(null);
|
const dragBarRef = ref(null);
|
||||||
const sideRef = ref<ElRef>(null);
|
const sideRef = ref(null);
|
||||||
const currentRoute = ref<Nullable<RouteLocationNormalized>>(null);
|
const currentRoute = ref<RouteLocationNormalized | null>(null);
|
||||||
|
|
||||||
const { prefixCls } = useDesign('layout-mix-sider');
|
const { prefixCls } = useDesign('layout-mix-sider');
|
||||||
const go = useGo();
|
const go = useGo();
|
||||||
|
|
@ -347,13 +347,13 @@
|
||||||
@width: 80px;
|
@width: 80px;
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
z-index: @layout-mix-sider-fixed-z-index;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: @layout-mix-sider-fixed-z-index;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: @sider-dark-bg-color;
|
|
||||||
transition: all 0.2s ease 0s;
|
transition: all 0.2s ease 0s;
|
||||||
|
background-color: @sider-dark-bg-color;
|
||||||
|
|
||||||
&-dom {
|
&-dom {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -363,9 +363,9 @@
|
||||||
|
|
||||||
&-logo {
|
&-logo {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
height: @header-height;
|
height: @header-height;
|
||||||
padding-left: 0 !important;
|
padding-left: 0 !important;
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: @logo-width;
|
width: @logo-width;
|
||||||
|
|
@ -386,12 +386,12 @@
|
||||||
|
|
||||||
.@{prefix-cls}-module {
|
.@{prefix-cls}-module {
|
||||||
&__item {
|
&__item {
|
||||||
font-weight: normal;
|
|
||||||
color: rgb(0 0 0 / 65%);
|
color: rgb(0 0 0 / 65%);
|
||||||
|
font-weight: normal;
|
||||||
|
|
||||||
&--active {
|
&--active {
|
||||||
color: @primary-color;
|
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
|
color: @primary-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -427,9 +427,9 @@
|
||||||
background-color: @sider-dark-bg-color;
|
background-color: @sider-dark-bg-color;
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
color: @white;
|
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-bottom: 1px solid @border-color;
|
border-bottom: 1px solid @border-color;
|
||||||
|
color: @white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -455,42 +455,42 @@
|
||||||
&__item {
|
&__item {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 12px 0;
|
padding: 12px 0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
color: rgb(255 255 255 / 65%);
|
color: rgb(255 255 255 / 65%);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @white;
|
color: @white;
|
||||||
}
|
}
|
||||||
// &:hover,
|
// &:hover,
|
||||||
&--active {
|
&--active {
|
||||||
font-weight: 700;
|
|
||||||
color: @white;
|
|
||||||
background-color: @sider-dark-darken-bg-color;
|
background-color: @sider-dark-darken-bg-color;
|
||||||
|
color: @white;
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 3px;
|
width: 3px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: @primary-color;
|
background-color: @primary-color;
|
||||||
content: '';
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__icon {
|
&__icon {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-size: 24px;
|
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__name {
|
&__name {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
font-size: 12px;
|
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -499,19 +499,19 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 14px;
|
height: 36px;
|
||||||
|
background-color: @trigger-dark-bg-color;
|
||||||
color: rgb(255 255 255 / 65%);
|
color: rgb(255 255 255 / 65%);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 36px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: @trigger-dark-bg-color;
|
|
||||||
height: 36px;
|
|
||||||
line-height: 36px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.light &-trigger {
|
&.light &-trigger {
|
||||||
color: rgb(0 0 0 / 65%);
|
|
||||||
background-color: #fff;
|
|
||||||
border-top: 1px solid #eee;
|
border-top: 1px solid #eee;
|
||||||
|
background-color: #fff;
|
||||||
|
color: rgb(0 0 0 / 65%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-menu-list {
|
&-menu-list {
|
||||||
|
|
@ -519,25 +519,25 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: calc(100%);
|
height: calc(100%);
|
||||||
background-color: #fff;
|
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: @header-height;
|
|
||||||
// margin-left: -6px;
|
|
||||||
font-size: 18px;
|
|
||||||
color: @primary-color;
|
|
||||||
border-bottom: 1px solid rgb(238 238 238);
|
|
||||||
opacity: 0%;
|
|
||||||
transition: unset;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
height: @header-height;
|
||||||
|
transition: unset;
|
||||||
|
border-bottom: 1px solid rgb(238 238 238);
|
||||||
|
opacity: 0;
|
||||||
|
color: @primary-color;
|
||||||
|
// margin-left: -6px;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
&.show {
|
&.show {
|
||||||
min-width: 130px;
|
min-width: 130px;
|
||||||
opacity: 100%;
|
|
||||||
transition: all 0.5s ease;
|
transition: all 0.5s ease;
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pushpin {
|
.pushpin {
|
||||||
|
|
@ -581,11 +581,11 @@
|
||||||
right: -1px;
|
right: -1px;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: calc(100% - 50px);
|
height: calc(100% - 50px);
|
||||||
cursor: ew-resize;
|
|
||||||
background-color: #f8f8f9;
|
|
||||||
border-top: none;
|
border-top: none;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
background-color: #f8f8f9;
|
||||||
box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
|
box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
|
||||||
|
cursor: ew-resize;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -140,5 +140,5 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import './index.less';
|
@import url('./index.less');
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,9 @@ export function createPermissionGuard(router: Router) {
|
||||||
next((to.query?.redirect as string) || '/');
|
next((to.query?.redirect as string) || '/');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
} catch {}
|
} catch {
|
||||||
|
//
|
||||||
|
}
|
||||||
}
|
}
|
||||||
next();
|
next();
|
||||||
return;
|
return;
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ export function getAppEnvConfig() {
|
||||||
VITE_GLOB_UPLOAD_URL,
|
VITE_GLOB_UPLOAD_URL,
|
||||||
} = ENV;
|
} = ENV;
|
||||||
|
|
||||||
if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
|
if (!/^[a-zA-Z_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
|
||||||
warn(
|
warn(
|
||||||
`VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`,
|
`VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`,
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -194,8 +194,8 @@ export class VAxios {
|
||||||
request<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
|
request<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
|
||||||
let conf: CreateAxiosOptions = cloneDeep(config);
|
let conf: CreateAxiosOptions = cloneDeep(config);
|
||||||
// cancelToken 如果被深拷贝，会导致最外层无法使用cancel方法来取消请求
|
// cancelToken 如果被深拷贝，会导致最外层无法使用cancel方法来取消请求
|
||||||
if(config.cancelToken){
|
if (config.cancelToken) {
|
||||||
conf.cancelToken = config.cancelToken
|
conf.cancelToken = config.cancelToken;
|
||||||
}
|
}
|
||||||
|
|
||||||
const transform = this.getTransform();
|
const transform = this.getTransform();
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ export class AxiosRetry {
|
||||||
retry(axiosInstance: AxiosInstance, error: AxiosError) {
|
retry(axiosInstance: AxiosInstance, error: AxiosError) {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const { config } = error.response;
|
const { config } = error.response;
|
||||||
const { waitTime, count } = config?.requestOptions?.retryRequest;
|
const { waitTime, count } = config?.requestOptions?.retryRequest ?? {};
|
||||||
config.__retryCount = config.__retryCount || 0;
|
config.__retryCount = config.__retryCount || 0;
|
||||||
if (config.__retryCount >= count) {
|
if (config.__retryCount >= count) {
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
|
|
|
||||||
|
|
@ -93,6 +93,6 @@ export const isServer = typeof window === 'undefined';
|
||||||
export const isClient = !isServer;
|
export const isClient = !isServer;
|
||||||
|
|
||||||
export function isUrl(path: string): boolean {
|
export function isUrl(path: string): boolean {
|
||||||
const reg = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
|
const reg = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/;
|
||||||
return reg.test(path);
|
return reg.test(path);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,8 @@
|
||||||
// copy from element-plus
|
// copy from element-plus
|
||||||
|
|
||||||
import { warn } from 'vue';
|
import { warn } from 'vue';
|
||||||
import { isObject } from '@vue/shared';
|
import { fromPairs, isObject } from 'lodash-es';
|
||||||
import { fromPairs } from 'lodash-es';
|
import type { ExtractPropTypes, PropType } from 'vue';
|
||||||
import type { ExtractPropTypes, PropType } from '@vue/runtime-core';
|
|
||||||
import type { Mutable } from './types';
|
import type { Mutable } from './types';
|
||||||
|
|
||||||
const wrapperKey = Symbol();
|
const wrapperKey = Symbol();
|
||||||
|
|
|
||||||
|
|
@ -82,8 +82,8 @@
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100vw;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cropper-container {
|
.cropper-container {
|
||||||
|
|
|
||||||
|
|
@ -25,14 +25,14 @@
|
||||||
.lazy-base-demo {
|
.lazy-base-demo {
|
||||||
&-wrap {
|
&-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 2000px;
|
height: 2000px;
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
text-align: center;
|
|
||||||
background-color: @component-background;
|
background-color: @component-background;
|
||||||
justify-content: center;
|
text-align: center;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-box {
|
&-box {
|
||||||
|
|
@ -47,12 +47,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-enter {
|
.custom-enter {
|
||||||
opacity: 0%;
|
|
||||||
transform: scale(0.4) translate(100%);
|
transform: scale(0.4) translate(100%);
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-enter-to {
|
.custom-enter-to {
|
||||||
opacity: 100%;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-enter-active {
|
.custom-enter-active {
|
||||||
|
|
@ -63,12 +63,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-leave {
|
.custom-leave {
|
||||||
opacity: 100%;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-leave-to {
|
.custom-leave-to {
|
||||||
opacity: 0%;
|
|
||||||
transform: scale(0.4) translate(-100%);
|
transform: scale(0.4) translate(-100%);
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-leave-active {
|
.custom-leave-active {
|
||||||
|
|
|
||||||
|
|
@ -29,14 +29,14 @@
|
||||||
.lazy-base-demo {
|
.lazy-base-demo {
|
||||||
&-wrap {
|
&-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 2000px;
|
height: 2000px;
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
text-align: center;
|
|
||||||
background-color: @component-background;
|
background-color: @component-background;
|
||||||
justify-content: center;
|
text-align: center;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-box {
|
&-box {
|
||||||
|
|
|
||||||
|
|
@ -29,8 +29,8 @@
|
||||||
|
|
||||||
import { Divider } from 'ant-design-vue';
|
import { Divider } from 'ant-design-vue';
|
||||||
import { PageWrapper } from '/@/components/Page';
|
import { PageWrapper } from '/@/components/Page';
|
||||||
const data: Recordable[] = (() => {
|
const data = (() => {
|
||||||
const arr: Recordable[] = [];
|
const arr: any[] = [];
|
||||||
for (let index = 1; index < 20000; index++) {
|
for (let index = 1; index < 20000; index++) {
|
||||||
arr.push({
|
arr.push({
|
||||||
title: '列表项' + index,
|
title: '列表项' + index,
|
||||||
|
|
@ -49,16 +49,16 @@
|
||||||
.virtual-scroll-demo {
|
.virtual-scroll-demo {
|
||||||
&-wrap {
|
&-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
margin: 0 30%;
|
margin: 0 30%;
|
||||||
background-color: @component-background;
|
background-color: @component-background;
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
line-height: 40px;
|
|
||||||
border-bottom: 1px solid @border-color-base;
|
border-bottom: 1px solid @border-color-base;
|
||||||
|
line-height: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.demo-wrap {
|
.demo-wrap {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
background-color: @component-background;
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
background-color: @component-background;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue