@blueking/ai-ui-sdk 0.5.1-beta.2 → 0.5.1-beta.5

package/dist/css/bk-patch.css

@@ -0,0 +1,166 @@
+/*
+ * 说明：这里不使用 !important，改为把选择器首个类名重复一次来提高特异性，
+ * 使补丁能稳定覆盖 bkui-vue 默认样式（与样式加载顺序无关），
+ * 同时业务侧只需用更高特异性（如父级作用域 / 多一个类）即可覆盖本文件样式。
+ */
+.bk-input.bk-input,
+.bk-textarea.bk-textarea,
+.bk-select.bk-select .bk-select-trigger .bk-select-tag,
+.bk-search-select.bk-search-select .bk-search-select-container,
+.bk-tag-input.bk-tag-input .bk-tag-input-trigger,
+.bk-cascader.bk-cascader,
+.bk-date-picker-editor.bk-date-picker-editor,
+.bk-button.bk-button,
+.bk-popover.bk-pop2-content.bk-select-popover.bk-select-popover,
+.bk-cascader-popover.bk-cascader-popover,
+.bk-dropdown-popover.bk-dropdown-popover .bk-dropdown-menu {
+  border-radius: var(--aidev-radius);
+}
+
+/* 外层圆角裁剪内层白底直角，避免四角露白 */
+.bk-input.bk-input {
+  overflow: hidden;
+}
+
+.bk-input.bk-input:not(.is-disabled) {
+  background-color: var(--aidev-form-background);
+  border-color: var(--aidev-form-border-color);
+}
+
+.bk-input.bk-input:not(.is-disabled) .bk-input--text {
+  color: var(--aidev-form-color);
+  background-color: var(--aidev-form-background);
+}
+
+.bk-input.bk-input:not(.is-disabled):hover {
+  border-color: var(--aidev-form-hover-border-color);
+}
+
+.bk-input.bk-input:not(.is-disabled).is-focused,
+.bk-select.bk-select:not(.is-disabled).is-focus .bk-input {
+  border-color: var(--aidev-form-active-border-color);
+}
+
+.bk-textarea.bk-textarea:not(.is-disabled) {
+  color: var(--aidev-form-color);
+  background-color: var(--aidev-form-background);
+  border-color: var(--aidev-form-border-color);
+}
+
+.bk-textarea.bk-textarea:not(.is-disabled):hover {
+  border-color: var(--aidev-form-hover-border-color);
+}
+
+.bk-textarea.bk-textarea:not(.is-disabled).is-focused {
+  border-color: var(--aidev-form-active-border-color);
+}
+
+.bk-select.bk-select .bk-select-trigger .bk-select-tag:not(.is-disabled) {
+  color: var(--aidev-form-color);
+  background-color: var(--aidev-form-background);
+  border-color: var(--aidev-form-border-color);
+}
+
+.bk-select.bk-select .bk-select-trigger .bk-select-tag:not(.is-disabled):hover {
+  border-color: var(--aidev-form-hover-border-color);
+}
+
+.bk-select.bk-select:not(.is-disabled).is-focus .bk-select-trigger .bk-select-tag {
+  border-color: var(--aidev-form-active-border-color);
+}
+
+.bk-search-select.bk-search-select .bk-search-select-container {
+  color: var(--aidev-form-color);
+  background-color: var(--aidev-form-background);
+  border-color: var(--aidev-form-border-color);
+}
+
+.bk-search-select.bk-search-select .bk-search-select-container:hover {
+  border-color: var(--aidev-form-hover-border-color);
+}
+
+.bk-search-select.bk-search-select .bk-search-select-container.is-focus {
+  border-color: var(--aidev-form-active-border-color);
+}
+
+.bk-tag-input.bk-tag-input .bk-tag-input-trigger:not(.disabled) {
+  color: var(--aidev-form-color);
+  background-color: var(--aidev-form-background);
+  border-color: var(--aidev-form-border-color);
+}
+
+.bk-tag-input.bk-tag-input .bk-tag-input-trigger:not(.disabled):hover {
+  border-color: var(--aidev-form-hover-border-color);
+}
+
+.bk-tag-input.bk-tag-input .bk-tag-input-trigger:not(.disabled).active {
+  border-color: var(--aidev-form-active-border-color);
+}
+
+.bk-cascader.bk-cascader:not(.is-disabled) {
+  color: var(--aidev-form-color);
+  background-color: var(--aidev-form-background);
+  border-color: var(--aidev-form-border-color);
+}
+
+.bk-cascader.bk-cascader:not(.is-disabled).is-hover {
+  border-color: var(--aidev-form-hover-border-color);
+}
+
+.bk-cascader.bk-cascader:not(.is-disabled).is-focus {
+  border-color: var(--aidev-form-active-border-color);
+}
+
+.bk-date-picker-editor.bk-date-picker-editor:not([disabled]) {
+  color: var(--aidev-form-color);
+  background-color: var(--aidev-form-background);
+  border-color: var(--aidev-form-border-color);
+}
+
+.bk-date-picker-editor.bk-date-picker-editor:not([disabled]):hover {
+  border-color: var(--aidev-form-hover-border-color);
+}
+
+.bk-date-picker-editor.bk-date-picker-editor:not([disabled]):focus {
+  border-color: var(--aidev-form-active-border-color);
+}
+
+.bk-button.bk-button:not(.is-disabled) {
+  border-color: var(--aidev-form-border-color);
+}
+
+.bk-button.bk-button:not(.is-disabled):hover {
+  border-color: var(--aidev-form-hover-border-color);
+}
+
+.bk-button.bk-button:not(.is-disabled):active {
+  border-color: var(--aidev-form-active-border-color);
+}
+
+/* text 文字按钮（theme=primary）：使用可点击色，覆盖上方通用按钮的灰色文字 */
+.bk-button-primary.bk-button-primary.is-text:not(.is-disabled) {
+  color: var(--aidev-clickable-color);
+}
+
+.bk-button-primary.bk-button-primary.is-text:not(.is-disabled):hover,
+.bk-button-primary.bk-button-primary.is-text:not(.is-disabled):active {
+  color: var(--aidev-clickable-hover-color);
+}
+
+/* select 下拉框底部扩展区，保持与外层圆角一致 */
+.bk-select-popover.bk-select-popover .bk-select-content-wrapper .bk-select-extension {
+  border-radius: 0 0 var(--aidev-radius) var(--aidev-radius);
+}
+
+/* resize-layout 侧栏分隔线，使用统一的边框色变量 */
+.bk-resize-layout-aside.bk-resize-layout-aside {
+  border-color: var(--aidev-border-color) !important;
+}
+
+/* 保留表单校验错误态红色边框（放最后，优先级最高） */
+.bk-form-item.bk-form-item.is-error .bk-input,
+.bk-form-item.bk-form-item.is-error .bk-textarea,
+.bk-form-item.bk-form-item.is-error .bk-cascader,
+.bk-form-item.bk-form-item.is-error .bk-date-picker-editor {
+  border-color: #ea3636;
+}

package/dist/css/g-utilities.css

@@ -1,13 +1,13 @@
-.\!g-bg-dark-gray {
-  background-color: #f5f7fa !important;
+.\!g-bg-\[var\(--aidev-inner-background\)\] {
+  background-color: var(--aidev-inner-background) !important;
 }
 
-.\!g-bg-f6ebda {
-  background-color: #f6ebda !important;
+.\!g-bg-\[var\(--aidev-main-background\)\] {
+  background-color: var(--aidev-main-background) !important;
 }
 
-.\!g-bg-white {
-  background-color: #fff !important;
+.\!g-bg-f6ebda {
+  background-color: #f6ebda !important;
 }
 
 .\!g-block {
@@ -24,7 +24,7 @@
 
 .\!g-disabled {
   cursor: not-allowed !important;
-  color: #c4c6cc !important;
+  color: var(--aidev-disabled-color) !important;
 
   &.bk-button-primary:not(.is-text) {
     background-color: #c4c6cc !important;
@@ -39,11 +39,11 @@
   }
 
   .bkaidev-icon {
-    color: #c4c6cc !important;
+    color: var(--aidev-disabled-color) !important;
   }
 
   .g-disabled-text {
-    color: #c4c6cc !important;
+    color: var(--aidev-disabled-color) !important;
   }
 }
 
@@ -162,6 +162,10 @@
   color: #2CAF5E !important;
 }
 
+.\!g-text-\[var\(--aidev-main-background\)\] {
+  color: var(--aidev-main-background) !important;
+}
+
 .\!g-text-b17432 {
   color: #b17432 !important;
 }
@@ -170,10 +174,6 @@
   color: #ea3636 !important;
 }
 
-.\!g-text-white {
-  color: #fff !important;
-}
-
 .\!g-top-index {
   z-index: 9999 !important;
 
@@ -203,20 +203,20 @@
   position: absolute;
 }
 
-.g-bg-f0f1f5 {
-  background-color: #f0f1f5;
+.g-bg-\[var\(--aidev-background\)\] {
+  background-color: var(--aidev-background);
 }
 
-.g-bg-fafbfd {
-  background-color: #fafbfd;
+.g-bg-\[var\(--aidev-inner-background\)\] {
+  background-color: var(--aidev-inner-background);
 }
 
-.g-bg-white {
-  background-color: #fff;
+.g-bg-\[var\(--aidev-main-background\)\] {
+  background-color: var(--aidev-main-background);
 }
 
-.g-border-b-\[\#EAEBF0\] {
-  border-bottom: 1px solid #EAEBF0;
+.g-border-b-\[var\(--aidev-border-color\)\] {
+  border-bottom: 1px solid var(--aidev-border-color);
 }
 
 .g-border-radio-100 {
@@ -236,11 +236,11 @@
     padding-bottom: 6px;
     line-height: 24px;
     font-size: 16px;
-    color: #313238;
+    color: var(--aidev-title-color);
   }
 
   .bk-pop-confirm-content {
-    color: #4d4f56;
+    color: var(--aidev-main-color);
     line-height: 20px;
     padding-bottom: 8px;
   }
@@ -291,7 +291,7 @@
 
 .g-disabled {
   cursor: not-allowed !important;
-  color: #c4c6cc !important;
+  color: var(--aidev-disabled-color) !important;
 
   &.bk-button-primary:not(.is-text) {
     background-color: #c4c6cc;
@@ -306,11 +306,11 @@
   }
 
   .bkaidev-icon {
-    color: #c4c6cc;
+    color: var(--aidev-disabled-color);
   }
 
   .g-disabled-text {
-    color: #c4c6cc;
+    color: var(--aidev-disabled-color);
   }
 }
 
@@ -352,8 +352,8 @@
   }
 }
 
-.g-fill-3a84ff {
-  fill: #3a84ff;
+.g-fill-\[var\(--aidev-clickable-color\)\] {
+  fill: var(--aidev-clickable-color);
 }
 
 .g-flex {
@@ -422,15 +422,6 @@
   row-gap: 4px;
 }
 
-.g-gray-header-table {
-  .bk-table-head {
-    th {
-      background-color: #f0f1f5;
-      border-color: #f0f1f5;
-    }
-  }
-}
-
 .g-group\/collection-icon:hover .g-group-hover\/collection-icon\:g-text-e38b02 {
   color: #e38b02;
 }
@@ -439,8 +430,8 @@
   color: #f59500;
 }
 
-.g-group\/reference-icon:hover .g-group-hover\/reference-icon\:g-text-blue {
-  color: #3a84ff;
+.g-group\/reference-icon:hover .g-group-hover\/reference-icon\:g-text-\[var\(--aidev-clickable-color\)\] {
+  color: var(--aidev-clickable-color);
 }
 
 .g-h-16 {
@@ -467,16 +458,16 @@
   height: 56px;
 }
 
-.g-h-60 {
-  height: 60px;
-}
-
 .g-h-70 {
   height: 70px;
 }
 
-.g-h-78 {
-  height: 78px;
+.g-h-\[calc\(100\%_-_48px\)\] {
+  height: calc(100% - 48px);
+}
+
+.g-h-\[calc\(100vh_-_140px\)\] {
+  height: calc(100vh - 140px);
 }
 
 .g-h-full {
@@ -549,6 +540,22 @@
   margin: 0px;
 }
 
+.g-main-button {
+  color: var(--aidev-main-button-color) !important;
+  background-color: var(--aidev-main-button-background) !important;
+  border-color: var(--aidev-main-button-border-color) !important;
+
+  &:hover {
+    background-color: var(--aidev-main-button-hover-background) !important;
+    border-color: var(--aidev-main-button-hover-border-color) !important;
+  }
+
+  &:active {
+    background-color: var(--aidev-main-button-active-background) !important;
+    border-color: var(--aidev-main-button-active-border-color) !important;
+  }
+}
+
 .g-max-h-260 {
   max-height: 260px;
 }
@@ -656,11 +663,11 @@
   padding: 4px 0;
   border: 1px solid #dcdee5;
   box-shadow: 0 2px 6px 0 #0000001a;
-  border-radius: 2px;
+  border-radius: var(--aidev-radius);
 
   li {
     font-size: 12px;
-    color: #4d4f56;
+    color: var(--aidev-main-color);
     line-height: 32px;
     cursor: pointer;
     padding: 0 12px;
@@ -924,7 +931,7 @@ padding: 0px !important;
     .bkaidev-icon {
       font-size: 14px;
       margin-right: 2px;
-      color: #979ba5;
+      color: var(--aidev-assist-color);
     }
 
     .g-radio-tips {
@@ -970,8 +977,8 @@ padding: 0px !important;
   animation: rotate 2s linear infinite;
 }
 
-.g-rounded-2 {
-  border-radius: 2px;
+.g-rounded-\[var\(--aidev-radius\)\] {
+  border-radius: var(--aidev-radius);
 }
 
 .g-scrollbar {
@@ -1099,33 +1106,6 @@ padding: 0px !important;
   }
 }
 
-.g-t-table-filter {
-  .t-radio.t-is-checked .t-radio__input::after {
-    background-color: #3a84ff;
-  }
-  .t-radio__label {
-    font-size: 12px;
-    color: #63656e;
-    font-size: 12px;;
-  }
-  .t-table__filter--bottom-buttons {
-    .t-button--theme-primary {
-      background-color: #3a84ff;
-      color: #fff;
-      border-color: #3a84ff;
-      border-radius: 2px;
-      padding: 0 12px;
-    }
-    .t-button--theme-default {
-      background-color: #fff;
-      border: 1px solid #c4c6cc;
-      border-radius: 2px;
-      color: #63656e;
-      padding: 0 12px;
-    }
-  }
-}
-
 .g-text-10 {
   font-size: 10px;
 }
@@ -1162,56 +1142,48 @@ padding: 0px !important;
   font-size: 8px;
 }
 
-.g-text-979BA5 {
-  color: #979BA5;
+.g-text-\[\#2caf5e\] {
+  color: #2caf5e;
 }
 
-.g-text-black {
-  color: #313238;
+.g-text-\[\#ea3636\] {
+  color: #ea3636;
 }
 
-.g-text-blue {
-  color: #3a84ff;
+.g-text-\[var\(--aidev-assist-color\)\] {
+  color: var(--aidev-assist-color);
 }
 
-.g-text-center {
-  text-align: center;
+.g-text-\[var\(--aidev-clickable-color\)\] {
+  color: var(--aidev-clickable-color);
 }
 
-.g-text-ea3636 {
-  color: #ea3636;
+.g-text-\[var\(--aidev-disabled-color\)\] {
+  color: var(--aidev-disabled-color);
 }
 
-.g-text-fc943b {
-  color: #fc943b;
+.g-text-\[var\(--aidev-main-color\)\] {
+  color: var(--aidev-main-color);
 }
 
-.g-text-gray {
-  color: #979ba5;
+.g-text-\[var\(--aidev-title-color\)\] {
+  color: var(--aidev-title-color);
 }
 
-.g-text-green {
-  color: #2caf5e;
-}
-
-.g-text-left {
-  text-align: left;
-}
-
-.g-text-light {
-  color: #9b9da1;
+.g-text-center {
+  text-align: center;
 }
 
-.g-text-light-gray {
-  color: #c4c6cc;
+.g-text-ea3636 {
+  color: #ea3636;
 }
 
-.g-text-normal {
-  color: #4d4f56;
+.g-text-fc943b {
+  color: #fc943b;
 }
 
-.g-text-red {
-  color: #ea3636;
+.g-text-left {
+  text-align: left;
 }
 
 .g-top-0 {
@@ -1256,12 +1228,6 @@ padding: 0px !important;
   width: 100%;
 }
 
-.g-white-footer-table {
-  .bk-table-footer {
-    background-color: #fff;
-  }
-}
-
 .g-whitespace-pre-line {
   white-space: pre-line;
 }
@@ -1270,24 +1236,24 @@ padding: 0px !important;
   background-color: #dcdee5 !important;
 }
 
-.hover\:\!g-bg-light-blue:hover {
-  background-color: #f0f5ff !important;
+.hover\:\!g-bg-\[var\(--aidev-item-hover-background\)\]:hover {
+  background-color: var(--aidev-item-hover-background) !important;
 }
 
-.hover\:\!g-border-blue:hover {
-  border: 1px solid #3a84ff !important;
+.hover\:\!g-border-\[var\(--aidev-clickable-color\)\]:hover {
+  border: 1px solid var(--aidev-clickable-color) !important;
 }
 
-.hover\:\!g-rounded-4:hover {
-  border-radius: 4px !important;
+.hover\:\!g-rounded-\[var\(--aidev-radius\)\]:hover {
+  border-radius: var(--aidev-radius) !important;
 }
 
-.hover\:\!g-text-blue:hover {
-  color: #3a84ff !important;
+.hover\:\!g-text-\[var\(--aidev-clickable-color\)\]:hover {
+  color: var(--aidev-clickable-color) !important;
 }
 
-.hover\:g-bg-\[\#f5f7fa\]:hover {
-  background-color: #f5f7fa;
+.hover\:g-bg-\[var\(--aidev-inner-background\)\]:hover {
+  background-color: var(--aidev-inner-background);
 }
 
 .hover\:g-cursor-pointer:hover {
@@ -1298,10 +1264,14 @@ padding: 0px !important;
   border-radius: 9999px;
 }
 
-.hover\:g-text-e38b02:hover {
-  color: #e38b02;
+.hover\:g-text-\[var\(--aidev-clickable-hover-color\)\]:hover {
+  color: var(--aidev-clickable-hover-color);
 }
 
-.hover\:g-text-normal:hover {
-  color: #4d4f56;
+.hover\:g-text-\[var\(--aidev-main-color\)\]:hover {
+  color: var(--aidev-main-color);
+}
+
+.hover\:g-text-e38b02:hover {
+  color: #e38b02;
 }