From bfae9626dd4f8e244086e9d573b042c178bf1ba6 Mon Sep 17 00:00:00 2001 From: Vben Date: Sat, 14 Sep 2024 22:44:21 +0800 Subject: [PATCH] perf: display border status color when the form is verified incorrectly (#4407) * perf: display border status color when the form is verified incorrectly * chore: adjust the document preview file order --- .dockerignore | 2 ++ .vscode/settings.json | 1 - docs/.vitepress/config/plugins/demo-preview.ts | 7 ++++++- docs/src/guide/introduction/thin.md | 9 +++++++++ .../ui-kit/form-ui/src/form-render/form-field.vue | 10 +++++++++- packages/styles/src/antd/index.css | 4 ++++ Dockerfile => scripts/deploy/Dockerfile | 0 .../deploy/build-local-docker-image.sh | 0 nginx.conf => scripts/deploy/nginx.conf | 0 9 files changed, 30 insertions(+), 3 deletions(-) rename Dockerfile => scripts/deploy/Dockerfile (100%) rename build-local-docker-image.sh => scripts/deploy/build-local-docker-image.sh (100%) rename nginx.conf => scripts/deploy/nginx.conf (100%) diff --git a/.dockerignore b/.dockerignore index 4f75c9513..52b833a96 100644 --- a/.dockerignore +++ b/.dockerignore @@ -3,3 +3,5 @@ node_modules .gitignore *.md dist +.turbo +dist.zip diff --git a/.vscode/settings.json b/.vscode/settings.json index f1a0e9dbf..92b4f1d29 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -212,7 +212,6 @@ "*.env": "$(capture).env.*", "README.md": "README*,CHANGELOG*,LICENSE,CNAME", "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,.gitattributes,.gitignore,.gitpod.yml,.npmrc,.browserslistrc,.node-version,.git*,.tazerc.json", - "Dockerfile": "Dockerfile,.docker*,docker-entrypoint.sh,build-local-docker*,nginx.conf", "eslint.config.mjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,cspell.json", "tailwind.config.mjs": "postcss.*" }, diff --git a/docs/.vitepress/config/plugins/demo-preview.ts b/docs/.vitepress/config/plugins/demo-preview.ts index fba835cc7..03b1698ca 100644 --- a/docs/.vitepress/config/plugins/demo-preview.ts +++ b/docs/.vitepress/config/plugins/demo-preview.ts @@ -83,7 +83,12 @@ export const demoPreviewPlugin = (md: MarkdownRenderer) => { if (!state.tokens[index]) { return ''; } - + const firstString = 'index.vue'; + childFiles = childFiles.sort((a, b) => { + if (a === firstString) return -1; + if (b === firstString) return 1; + return a.localeCompare(b, 'en', { sensitivity: 'base' }); + }); state.tokens[index].content = `<${ComponentName}/> `; diff --git a/docs/src/guide/introduction/thin.md b/docs/src/guide/introduction/thin.md index 7df3c9f83..523c6f8de 100644 --- a/docs/src/guide/introduction/thin.md +++ b/docs/src/guide/introduction/thin.md @@ -65,3 +65,12 @@ pnpm install } } ``` + +## 其他 + +如果你想更进一步精简，你可以删除参考一下文件或者文件夹的作用，判断自己是否需要，不需要删除即可： + +- `.changeset` 文件夹用于管理版本变更 +- `.github` 文件夹用于存放 GitHub 的配置文件 +- `.vscode` 文件夹用于存放 VSCode 的配置文件，如果你使用其他编辑器，可以删除 +- `./scripts/deploy` 文件夹用于存放部署脚本，如果你不需要docker部署，可以删除 diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue index 3cb5f6a5f..6c0ecbdfe 100644 --- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue +++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue @@ -16,7 +16,7 @@ import { import { cn, isFunction, isObject, isString } from '@vben-core/shared/utils'; import { toTypedSchema } from '@vee-validate/zod'; -import { useFormValues } from 'vee-validate'; +import { useFieldError, useFormValues } from 'vee-validate'; import { injectRenderFormProps, useFormContext } from './context'; import useDependencies from './dependencies'; @@ -43,8 +43,11 @@ const { const { componentBindEventMap, componentMap, isVertical } = useFormContext(); const formRenderProps = injectRenderFormProps(); const values = useFormValues(); +const errors = useFieldError(fieldName); const formApi = formRenderProps.form; +const isInValid = computed(() => errors.value?.length > 0); + const fieldComponent = computed(() => { const finalComponent = isString(component) ? componentMap.value[component] @@ -217,6 +220,7 @@ function createComponentProps(slotProps: Record) { ) { ...slotProps, ...createComponentProps(slotProps), disabled: shouldDisabled, + isInValid, }" > diff --git a/packages/styles/src/antd/index.css b/packages/styles/src/antd/index.css index 77df64fdf..b6246ea42 100644 --- a/packages/styles/src/antd/index.css +++ b/packages/styles/src/antd/index.css @@ -11,3 +11,7 @@ .ant-notification-notice { @apply dark:border-border/60 dark:border; } + +.ant-app .form-valid-error .ant-select-selector { + border-color: hsl(var(--destructive)); +} diff --git a/Dockerfile b/scripts/deploy/Dockerfile similarity index 100% rename from Dockerfile rename to scripts/deploy/Dockerfile diff --git a/build-local-docker-image.sh b/scripts/deploy/build-local-docker-image.sh similarity index 100% rename from build-local-docker-image.sh rename to scripts/deploy/build-local-docker-image.sh diff --git a/nginx.conf b/scripts/deploy/nginx.conf similarity index 100% rename from nginx.conf rename to scripts/deploy/nginx.conf