perf: display border status color when the form is verified incorrect…

…ly (#4407)

* perf: display border status color when the form is verified incorrectly

* chore: adjust the document preview file order

.dockerignore

@@ -3,3 +3,5 @@ node_modules
 .gitignore
 *.md
 dist
+.turbo
+dist.zip

.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.*"
  },

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 =
  `<DemoPreview files="${encodeURIComponent(JSON.stringify(childFiles))}" ><${ComponentName}/>
  `;

docs/src/guide/introduction/thin.md

@@ -65,3 +65,12 @@ pnpm install
  }
 }
 ```
+
+## 其他
+
+如果你想更进一步精简，你可以删除参考一下文件或者文件夹的作用，判断自己是否需要，不需要删除即可：
+
+- `.changeset` 文件夹用于管理版本变更
+- `.github` 文件夹用于存放 GitHub 的配置文件
+- `.vscode` 文件夹用于存放 VSCode 的配置文件，如果你使用其他编辑器，可以删除
+- `./scripts/deploy` 文件夹用于存放部署脚本，如果你不需要docker部署，可以删除

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<string, any>) {
  <FormItem
  v-show="isShow"
  :class="{
+ 'form-valid-error': isInValid,
  'flex-col': isVertical,
  'flex-row items-center': !isVertical,
  }"
@@ -248,10 +252,14 @@ function createComponentProps(slotProps: Record<string, any>) {
  ...slotProps,
  ...createComponentProps(slotProps),
  disabled: shouldDisabled,
+ isInValid,
  }"
  >
  <component
  :is="fieldComponent"
+ :class="{
+ 'border-destructive focus:border-destructive': isInValid,
+ }"
  v-bind="createComponentProps(slotProps)"
  :disabled="shouldDisabled"
  >

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));
+}