init

web/packages/styles/src/antd/index.css

@@ -0,0 +1,75 @@
+/* ant-design-vue 组件库的一些样式重置 */
+
+.ant-app {
+  width: 100%;
+  height: 100%;
+  overscroll-behavior: none;
+  color: inherit;
+}
+
+.ant-btn {
+  .anticon {
+    display: inline-flex;
+  }
+
+  /* * 修复按钮添加图标时的位置问题 */
+  > svg {
+    display: inline-block;
+  }
+
+  > svg + span {
+    margin-inline-start: 6px;
+  }
+}
+
+.ant-tag {
+  > svg {
+    display: inline-block;
+  }
+
+  > svg + span {
+    margin-inline-start: 4px;
+  }
+}
+
+.ant-message-notice-content,
+.ant-notification-notice {
+  @apply dark:border-border/60 dark:border;
+}
+
+.form-valid-error {
+  /** select 选择器的样式 */
+
+  .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;
+  }
+
+  /** 数字输入框样式 */
+  .ant-input-number-focused {
+    box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
+  }
+
+  /** 密码输入框样式 */
+  .ant-input-affix-wrapper:hover {
+    border-color: hsl(var(--destructive));
+    box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
+  }
+
+  .ant-input:not(.valid-success) {
+    border-color: hsl(var(--destructive)) !important;
+  }
+}
+
+/** 区间选择器下面来回切换时的样式 */
+.ant-app .form-valid-error .ant-picker-active-bar {
+  background-color: hsl(var(--destructive));
+}
+
+/** 时间选择器的样式 */
+.ant-app .form-valid-error .ant-picker-focused {
+  box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
+}

web/packages/styles/src/ele/index.css

@@ -0,0 +1,44 @@
+.el-card {
+  --el-card-border-radius: var(--radius) !important;
+}
+
+.form-valid-error {
+  /** select 选择器的样式 */
+  .el-select .el-select__wrapper {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  }
+
+  /** input 选择器的样式 */
+  .el-input .el-input__wrapper {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  }
+
+  /** radio和checkbox 选择器的样式 */
+  .el-radio .el-radio__inner,
+  .el-checkbox .el-checkbox__inner {
+    border: 1px solid var(--el-color-danger);
+  }
+
+  .el-checkbox-button .el-checkbox-button__inner,
+  .el-radio-button .el-radio-button__inner {
+    border: 1px solid var(--el-color-danger);
+  }
+
+  .el-checkbox-button:first-child .el-checkbox-button__inner,
+  .el-radio-button:first-child .el-radio-button__inner {
+    border-left: 1px solid var(--el-color-danger);
+  }
+
+  .el-checkbox-button:not(:first-child) .el-checkbox-button__inner,
+  .el-radio-button:not(:first-child) .el-radio-button__inner {
+    border-left: none;
+  }
+
+  .el-textarea .el-textarea__inner {
+    border: 1px solid var(--el-color-danger);
+  }
+}
+
+html .el-loading-mask {
+  z-index: 1000;
+}

web/packages/styles/src/global/index.scss

@@ -0,0 +1 @@
+@use '@vben-core/design/bem' as *;

web/packages/styles/src/index.ts

@@ -0,0 +1 @@
+import '@vben-core/design';

web/packages/styles/src/naive/index.css

@@ -0,0 +1,20 @@
+.form-valid-error {
+  .n-base-selection__state-border,
+  .n-input__state-border,
+  .n-radio-group__splitor {
+    border: var(--n-border-error);
+  }
+
+  .n-radio-group .n-radio-button,
+  .n-radio-group .n-radio-group__splitor {
+    --n-button-border-color: rgb(255 56 96);
+  }
+
+  .n-radio__dot {
+    --n-box-shadow: inset 0 0 0 1px rgb(255 56 96);
+  }
+
+  .n-checkbox-box__border {
+    --n-border: 1px solid rgb(255 56 96);
+  }
+}