@blueking/ai-ui-sdk 0.4.3-beta.25 → 0.4.3-beta.27

package/dist/css/bk-patch.css

@@ -0,0 +1,158 @@
+/*
+ * 说明：这里不使用 !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),
+.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-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);
+}
+
+/* 保留表单校验错误态红色边框（放最后，优先级最高） */
+.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,3 +1,7 @@
+.\!g-bg-\[var\(--aidev-main-background\)\] {
+  background-color: var(--aidev-main-background) !important;
+}
+
 .\!g-bg-dark-gray {
   background-color: #f5f7fa !important;
 }
@@ -6,10 +10,6 @@
   background-color: #f6ebda !important;
 }
 
-.\!g-bg-white {
-  background-color: #fff !important;
-}
-
 .\!g-block {
   display: block !important;
 }
@@ -203,16 +203,16 @@
   position: absolute;
 }
 
-.g-bg-f0f1f5 {
-  background-color: #f0f1f5;
+.g-bg-\[var\(--aidev-inner-background\)\] {
+  background-color: var(--aidev-inner-background);
 }
 
-.g-bg-fafbfd {
-  background-color: #fafbfd;
+.g-bg-\[var\(--aidev-main-background\)\] {
+  background-color: var(--aidev-main-background);
 }
 
-.g-bg-white {
-  background-color: #fff;
+.g-bg-fafbfd {
+  background-color: #fafbfd;
 }
 
 .g-border-b-\[\#EAEBF0\] {
@@ -352,8 +352,8 @@
   }
 }
 
-.g-fill-3a84ff {
-  fill: #3a84ff;
+.g-fill-\[var\(--aidev-clickable-color\)\] {
+  fill: var(--aidev-clickable-color);
 }
 
 .g-flex {
@@ -439,8 +439,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 {
@@ -549,6 +549,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;
 }
@@ -970,8 +986,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 {
@@ -1166,12 +1182,12 @@ padding: 0px !important;
   color: #979BA5;
 }
 
-.g-text-black {
-  color: #313238;
+.g-text-\[var\(--aidev-clickable-color\)\] {
+  color: var(--aidev-clickable-color);
 }
 
-.g-text-blue {
-  color: #3a84ff;
+.g-text-black {
+  color: #313238;
 }
 
 .g-text-center {
@@ -1278,12 +1294,12 @@ padding: 0px !important;
   border: 1px solid #3a84ff !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 {

package/dist/css/g-utilities.manifest.json

@@ -1,7 +1,7 @@
 [
+  "!g-bg-[var(--aidev-main-background)]",
   "!g-bg-dark-gray",
   "!g-bg-f6ebda",
-  "!g-bg-white",
   "!g-block",
   "!g-border-f59500",
   "!g-cursor-pointer",
@@ -43,9 +43,9 @@
   "!g-w-full",
   "!g-z-9999",
   "g-absolute",
-  "g-bg-f0f1f5",
+  "g-bg-[var(--aidev-inner-background)]",
+  "g-bg-[var(--aidev-main-background)]",
   "g-bg-fafbfd",
-  "g-bg-white",
   "g-border-b-[#EAEBF0]",
   "g-border-radio-100",
   "g-border-t-1",
@@ -59,7 +59,7 @@
   "g-disabled",
   "g-ellipsis",
   "g-exception",
-  "g-fill-3a84ff",
+  "g-fill-[var(--aidev-clickable-color)]",
   "g-flex",
   "g-flex-1",
   "g-flex-col",
@@ -77,7 +77,7 @@
   "g-gray-header-table",
   "g-group-hover/collection-icon:g-text-e38b02",
   "g-group-hover/collection-icon:g-text-f59500",
-  "g-group-hover/reference-icon:g-text-blue",
+  "g-group-hover/reference-icon:g-text-[var(--aidev-clickable-color)]",
   "g-group/collection-icon",
   "g-group/reference-icon",
   "g-h-16",
@@ -106,6 +106,7 @@
   "g-leading-28",
   "g-leading-32",
   "g-m-0",
+  "g-main-button",
   "g-max-h-260",
   "g-max-h-400",
   "g-max-h-80vh",
@@ -189,7 +190,7 @@
   "g-rotate--90",
   "g-rotate-45",
   "g-rotate-infinite",
-  "g-rounded-2",
+  "g-rounded-[var(--aidev-radius)]",
   "g-scrollbar",
   "g-scrollbar-page",
   "g-shadow-[0_3px_4px_0_#0000000a]",
@@ -209,8 +210,8 @@
   "g-text-40",
   "g-text-8",
   "g-text-979BA5",
+  "g-text-[var(--aidev-clickable-color)]",
   "g-text-black",
-  "g-text-blue",
   "g-text-center",
   "g-text-ea3636",
   "g-text-fc943b",
@@ -236,8 +237,8 @@
   "hover:!g-bg-[#dcdee5]",
   "hover:!g-bg-light-blue",
   "hover:!g-border-blue",
-  "hover:!g-rounded-4",
-  "hover:!g-text-blue",
+  "hover:!g-rounded-[var(--aidev-radius)]",
+  "hover:!g-text-[var(--aidev-clickable-color)]",
   "hover:g-bg-[#f5f7fa]",
   "hover:g-cursor-pointer",
   "hover:g-rounded-full",

package/dist/css/main.css

@@ -0,0 +1,10 @@
+body {
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: #f5f7fa;
+  color: var(--aidev-main-color);
+  font-size: 14px;
+  text-align: left;
+}

package/dist/css/variable/blue-theme.d.ts

@@ -0,0 +1,42 @@
+declare const _default: {
+    brand1: string;
+    brand2: string;
+    brand3: string;
+    brand4: string;
+    brand5: string;
+    brand6: string;
+    brand7: string;
+    neutral1: string;
+    neutral2: string;
+    neutral3: string;
+    neutral4: string;
+    neutral5: string;
+    neutral6: string;
+    neutral7: string;
+    neutral8: string;
+    neutral9: string;
+    neutral10: string;
+    success1: string;
+    success2: string;
+    success3: string;
+    success4: string;
+    success5: string;
+    success6: string;
+    success7: string;
+    warn1: string;
+    warn2: string;
+    warn3: string;
+    warn4: string;
+    warn5: string;
+    warn6: string;
+    warn7: string;
+    danger1: string;
+    danger2: string;
+    danger3: string;
+    danger4: string;
+    danger5: string;
+    danger6: string;
+    danger7: string;
+    radius: string;
+};
+export default _default;

package/dist/css/variable/blue-theme.ts.js

@@ -0,0 +1,41 @@
+export default {
+    brand1: '#274ECF',
+    brand2: '#3B6EF5',
+    brand3: '#6694FF',
+    brand4: '#8FB4FF',
+    brand5: '#B8D2FF',
+    brand6: '#E0EDFF',
+    brand7: '#F0F6FF',
+    neutral1: '#111214',
+    neutral2: '#4A5973',
+    neutral3: '#8F9FBD',
+    neutral4: '#C1CDE5',
+    neutral5: '#E4E9F2',
+    neutral6: '#E9EDF5',
+    neutral7: '#F0F4FA',
+    neutral8: '#F7F9FD',
+    neutral9: '#FBFCFE',
+    neutral10: '#FFFFFF',
+    success1: '#299E56',
+    success2: '#2CAF5E',
+    success3: '#65C389',
+    success4: '#A1E3BA',
+    success5: '#CBF0DA',
+    success6: '#DAF6E5',
+    success7: '#EBFAF0',
+    warn1: '#E38B02',
+    warn2: '#F59500',
+    warn3: '#F8B64F',
+    warn4: '#F9D090',
+    warn5: '#FCE5C0',
+    warn6: '#FDEED8',
+    warn7: '#FDF4E8',
+    danger1: '#E71818',
+    danger2: '#EA3636',
+    danger3: '#FF5656',
+    danger4: '#F8B4B4',
+    danger5: '#FFDDDD',
+    danger6: '#FFEBEB',
+    danger7: '#FFF0F0',
+    radius: '6px'
+};

package/dist/css/variable/token.d.ts

@@ -0,0 +1,36 @@
+declare const _default: {
+    '--aidev-radius': string;
+    '--aidev-form-color': string;
+    '--aidev-form-background': string;
+    '--aidev-form-border-color': string;
+    '--aidev-form-hover-border-color': string;
+    '--aidev-form-active-border-color': string;
+    '--aidev-table-line-color': string;
+    '--aidev-border-color': string;
+    '--aidev-background': string;
+    '--aidev-main-background': string;
+    '--aidev-main-color': string;
+    '--aidev-inner-background': string;
+    '--aidev-main-button-color': string;
+    '--aidev-main-button-background': string;
+    '--aidev-main-button-border-color': string;
+    '--aidev-main-button-hover-background': string;
+    '--aidev-main-button-active-background': string;
+    '--aidev-main-button-hover-border-color': string;
+    '--aidev-main-button-active-border-color': string;
+    '--aidev-clickable-color': string;
+    '--aidev-list-item-hover-background': string;
+    '--aidev-list-item-active-background': string;
+    '--aidev-list-item-active-count-background': string;
+    '--aidev-generate-public-color': string;
+    '--aidev-generate-public-background': string;
+    '--aidev-generate-public-hover-color': string;
+    '--aidev-generate-public-hover-background': string;
+    '--aidev-generate-space-color': string;
+    '--aidev-generate-space-background': string;
+    '--aidev-generate-space-hover-color': string;
+    '--aidev-generate-space-hover-background': string;
+    '--default-color': string;
+    '--primary-color': string;
+};
+export default _default;

package/dist/css/variable/token.ts.js

@@ -0,0 +1,49 @@
+export default {
+    // 圆角
+    '--aidev-radius': 'radius',
+    // 表单
+    '--aidev-form-color': 'neutral2',
+    '--aidev-form-background': 'neutral10',
+    '--aidev-form-border-color': 'neutral4',
+    '--aidev-form-hover-border-color': 'neutral3',
+    '--aidev-form-active-border-color': 'brand2',
+    // 表格内边框颜色
+    '--aidev-table-line-color': 'neutral6',
+    // 边框颜色
+    '--aidev-border-color': 'neutral5',
+    // 整个网站的背景色
+    '--aidev-background': 'neutral8',
+    // 主要区域背景色
+    '--aidev-main-background': 'neutral10',
+    // 真个网站文字颜色
+    '--aidev-main-color': 'neutral2',
+    // 在主要区域内的，部分区域的背景色
+    '--aidev-inner-background': 'neutral6',
+    // 主按钮相关颜色
+    '--aidev-main-button-color': 'neutral10',
+    '--aidev-main-button-background': 'brand2',
+    '--aidev-main-button-border-color': 'brand2',
+    '--aidev-main-button-hover-background': 'brand3',
+    '--aidev-main-button-active-background': 'brand1',
+    '--aidev-main-button-hover-border-color': 'brand3',
+    '--aidev-main-button-active-border-color': 'brand1',
+    // 可点击区域文字颜色
+    '--aidev-clickable-color': 'brand2',
+    // 列表项颜色
+    '--aidev-list-item-hover-background': 'neutral7',
+    '--aidev-list-item-active-background': 'brand6',
+    '--aidev-list-item-active-count-background': 'brand4',
+    // 资源使用范围相关颜色
+    '--aidev-generate-public-color': 'success2',
+    '--aidev-generate-public-background': 'success6',
+    '--aidev-generate-public-hover-color': 'success1',
+    '--aidev-generate-public-hover-background': 'success5',
+    '--aidev-generate-space-color': '#45A0A5',
+    '--aidev-generate-space-background': '#D8F4F5',
+    '--aidev-generate-space-hover-color': '#388A8E',
+    '--aidev-generate-space-hover-background': '#B6E7E9',
+    // bkui 字体颜色
+    '--default-color': 'neutral2',
+    // bkui 主颜色
+    '--primary-color': 'brand2'
+};

package/dist/hooks/use-style.d.ts

@@ -1,5 +1,9 @@
 import '../css/g-utilities.css';
-import '../css/style.css';
-import '../css/iconcool.js';
+import '../css/bk-icon/style.css';
+import '../css/bk-icon/iconcool.js';
+import '../css/bk-patch.css';
+import '../css/main.css';
 import 'tippy.js/dist/tippy.css';
-export declare const useStyle: () => void;
+export declare const useStyle: () => {
+    setTheme: (extraTokenMap?: Record<string, string>) => void;
+};

package/dist/hooks/use-style.ts.js

@@ -1,6 +1,48 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+import blueTheme from '../css/variable/blue-theme.ts.js';
+import tokenMap from '../css/variable/token.ts.js';
 import '../css/g-utilities.css';
-import '../css/style.css';
-import '../css/iconcool.js';
+import '../css/bk-icon/style.css';
+import '../css/bk-icon/iconcool.js';
+import '../css/bk-patch.css';
+import '../css/main.css';
 import 'tippy.js/dist/tippy.css';
 // use side effect to import css
-export const useStyle = ()=>{};
+export const useStyle = ()=>{
+    const styleSheet = document.createElement('style');
+    document.head.appendChild(styleSheet);
+    const setTheme = (extraTokenMap)=>{
+        const declarations = Object.entries(_object_spread({}, tokenMap, extraTokenMap)).map(([cssVar, token])=>`  ${cssVar}: ${blueTheme[token] || token};`).join('\n');
+        styleSheet.textContent = `:root {\n${declarations}\n}`;
+    };
+    return {
+        setTheme
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueking/ai-ui-sdk",
-  "version": "0.4.3-beta.25",
+  "version": "0.4.3-beta.27",
   "description": "蓝鲸AI UI SDK",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -98,7 +98,7 @@
     "vue-router": "^4.2.4"
   },
   "devDependencies": {
-    "@blueking/aidev-g-utilities": "0.1.0-beta.20",
+    "@blueking/aidev-g-utilities": "0.1.0-beta.23",
     "@blueking/babel-preset-bk": "2.1.0",
     "@blueking/cli-service": "0.1.0-beta.31",
     "@blueking/eslint-config-bk": "2.1.0",