Build lightweight AI agent admin

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,146 @@
+.el-card {
+  --el-card-border-radius: var(--radius) !important;
+}
+
+.el-dialog {
+  --el-dialog-border-radius: var(--radius) !important;
+}
+
+.el-message-box {
+  --el-messagebox-border-radius: var(--radius) !important;
+}
+
+.el-popover {
+  --el-popover-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;
+}
+
+/* ========== Ant Design 风格 Loading ========== */
+
+/* 隐藏原有的 SVG 圆环 */
+.el-loading-spinner svg,
+.el-loading-spinner .circular,
+.el-loading-spinner svg.circular {
+  display: none !important;
+}
+
+/* Loading 容器 */
+.el-loading-spinner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Ant Design 四点旋转容器 */
+.el-loading-spinner::before {
+  position: relative;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  content: '';
+
+  /* 四个点使用 box-shadow 实现 */
+  background: transparent;
+  border-radius: 50%;
+  box-shadow:
+    0 -12px 0 0 hsl(var(--primary)),
+    12px 0 0 0 hsl(var(--primary) / 30%),
+    0 12px 0 0 hsl(var(--primary) / 30%),
+    -12px 0 0 0 hsl(var(--primary) / 30%);
+  transform: rotate(45deg);
+  animation:
+    antd-rotate 1.2s linear infinite,
+    antd-dot-opacity 1s ease-in-out infinite;
+}
+
+/* 旋转动画 */
+@keyframes antd-rotate {
+  to {
+    transform: rotate(405deg);
+  }
+}
+
+/* 点透明度动画 - 通过改变 box-shadow */
+@keyframes antd-dot-opacity {
+  0%,
+  100% {
+    box-shadow:
+      0 -12px 0 0 hsl(var(--primary)),
+      12px 0 0 0 hsl(var(--primary) / 30%),
+      0 12px 0 0 hsl(var(--primary) / 30%),
+      -12px 0 0 0 hsl(var(--primary) / 30%);
+  }
+
+  25% {
+    box-shadow:
+      0 -12px 0 0 hsl(var(--primary) / 30%),
+      12px 0 0 0 hsl(var(--primary)),
+      0 12px 0 0 hsl(var(--primary) / 30%),
+      -12px 0 0 0 hsl(var(--primary) / 30%);
+  }
+
+  50% {
+    box-shadow:
+      0 -12px 0 0 hsl(var(--primary) / 30%),
+      12px 0 0 0 hsl(var(--primary) / 30%),
+      0 12px 0 0 hsl(var(--primary)),
+      -12px 0 0 0 hsl(var(--primary) / 30%);
+  }
+
+  75% {
+    box-shadow:
+      0 -12px 0 0 hsl(var(--primary) / 30%),
+      12px 0 0 0 hsl(var(--primary) / 30%),
+      0 12px 0 0 hsl(var(--primary) / 30%),
+      -12px 0 0 0 hsl(var(--primary));
+  }
+}
+
+/* Loading 文字样式 */
+.el-loading-spinner .el-loading-text {
+  margin-top: 12px;
+  font-size: 14px;
+  color: hsl(var(--primary));
+}

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