public/ruoyi-plus-vben5
1
0
Fork 0
mirror of https://gitee.com/dapppp/ruoyi-plus-vben5.git synced 2026-03-14 23:52:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(表单): 修复表单验证错误样式并统一规则

Browse Source 
修复表单验证错误状态下的样式问题，包括输入框、选择器、时间选择器等组件的边框和阴影颜色。使用 CSS 变量统一错误阴影样式，提高可维护性。同时为演示表单的所有字段统一添加必填规则，并移除数字字段的冗余后缀配置。
This commit is contained in:
dap
2026-02-10 21:09:59 +08:00
parent 05b32dd249
commit 27c78cb888
2 changed files with 48 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/styles/src/antd/index.css
View File

@@ -39,29 +39,63 @@
.form-valid-error {
/** select 选择器的样式 */
--vben-form-error-shadow: 0 0 0 2px rgba(255, 35, 5, 0.1);
.ant-select:not(.valid-success) .ant-select-selector:not(.valid-success) {
border-color: hsl(var(--destructive)) !important;
}
.ant-select-focused .ant-select-selector {
box-shadow: 0 0 0 2px rgb(255 38 5 / 6%) !important;
box-shadow: var(--vben-form-error-shadow) !important;
}
/** 数字输入框样式 */
.ant-input-number-focused {
box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
box-shadow: var(--vben-form-error-shadow);
}
.ant-input-number.ant-input-number-mode-input {
border-color: hsl(var(--destructive));
}
/** 密码输入框样式 */
.ant-input-affix-wrapper:hover {
border-color: hsl(var(--destructive));
box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
box-shadow: var(--vben-form-error-shadow);
}
.ant-input:not(.valid-success) {
border-color: hsl(var(--destructive)) !important;
}
/* select focus-within样式 */
.ant-picker-outlined:focus,
.ant-picker-outlined:focus-within {
border-color: hsl(var(--destructive));
}
/* focus样式 shadow */
.ant-select.ant-select-outlined:not(.ant-select-disabled).ant-select-focused {
/* --ant-select-active-outline-color: var(--vben-form-error-shadow); */
box-shadow: var(--vben-form-error-shadow);
}
/* InputNumber */
.ant-input-number-outlined:focus,
.ant-input-number-outlined:focus-within {
--ant-input-number-active-border-color: hsl(var(--destructive));
}
.ant-mentions-outlined:focus,
.ant-mentions-outlined:focus-within {
--ant-mentions-active-border-color: hsl(var(--destructive));
--ant-mentions-active-shadow: var(--vben-form-error-shadow);
}
.ant-input-outlined:focus,
.ant-input-outlined:focus-within {
--ant-input-active-border-color: hsl(var(--destructive));
--ant-input-active-shadow: var(--vben-form-error-shadow);
}
}
/** 区间选择器下面来回切换时的样式 */
@@ -71,7 +105,7 @@
/** 时间选择器的样式 */
.form-valid-error .ant-picker-focused {
box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
box-shadow: var(--vben-form-error-shadow);
}
/** 前后置小圆点样式 */