From c85abef80dd8f5b76215bc0135eb0faeae15724b Mon Sep 17 00:00:00 2001 From: lijianxiong <1518062161@qq.com> Date: Wed, 21 May 2025 20:38:57 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat=EF=BC=9A=E7=B3=BB=E7=BB=9F=E7=95=8C?= =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F=E8=A1=A8=E8=AE=BE=E8=AE=A1=E6=8F=92?= =?UTF-8?q?=E4=BB=B6=E6=96=B0=E5=A2=9E=E6=A0=B7=E5=BC=8F=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E8=87=AA=E5=8A=A8=E8=A1=A5=E5=85=A8=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sys-css-design/css-variable.ts | 148 ++++++++++++++++++ .../sys-css-design/sys-css-design.tsx | 67 +++++++- .../design-code-editor/design-code-editor.tsx | 38 +++++ 3 files changed, 251 insertions(+), 2 deletions(-) create mode 100644 packages/layout-design/src/panel-items/sys-css-design/css-variable.ts diff --git a/packages/layout-design/src/panel-items/sys-css-design/css-variable.ts b/packages/layout-design/src/panel-items/sys-css-design/css-variable.ts new file mode 100644 index 00000000..dd4ec240 --- /dev/null +++ b/packages/layout-design/src/panel-items/sys-css-design/css-variable.ts @@ -0,0 +1,148 @@ +/** + * 样式变量代码，默认使用light主题变量 + */ +export const cssVariableCode = ` +:root.light { + --ibiz-color-white: rgba(var(--ibiz-white), 1); + --ibiz-color-black: rgba(var(--ibiz-black), 1); + --ibiz-color-primary: rgba(var(--ibiz-blue-cyan-4), 1); + --ibiz-color-primary-text: rgba(var(--ibiz-white), 1); + --ibiz-color-primary-hover: rgba(var(--ibiz-blue-cyan-3), 1); + --ibiz-color-primary-hover-text: rgba(var(--ibiz-white), 1); + --ibiz-color-primary-active: rgba(var(--ibiz-blue-cyan-5), 1); + --ibiz-color-primary-active-text: rgba(var(--ibiz-white), 1); + --ibiz-color-primary-disabled: rgba(var(--ibiz-blue-cyan-2), 1); + --ibiz-color-primary-disabled-text: rgba(var(--ibiz-white), 1); + --ibiz-color-primary-light-default: rgba(var(--ibiz-blue-cyan-0), 1); + --ibiz-color-primary-light-hover: rgba(var(--ibiz-blue-cyan-1), 1); + --ibiz-color-primary-light-active: rgba(var(--ibiz-blue-cyan-2), 1); + --ibiz-color-secondary: rgba(var(--ibiz-light-blue-5), 1); + --ibiz-color-secondary-text: rgba(var(--ibiz-white), 1); + --ibiz-color-secondary-hover: rgba(var(--ibiz-light-blue-6), 1); + --ibiz-color-secondary-hover-text: rgba(var(--ibiz-white), 1); + --ibiz-color-secondary-active: rgba(var(--ibiz-light-blue-7), 1); + --ibiz-color-secondary-active-text: rgba(var(--ibiz-white), 1); + --ibiz-color-secondary-disabled: rgba(var(--ibiz-light-blue-2), 1); + --ibiz-color-secondary-disabled-text: rgba(var(--ibiz-white), 1); + --ibiz-color-secondary-light-default: rgba(var(--ibiz-light-blue-0), 1); + --ibiz-color-secondary-light-hover: rgba(var(--ibiz-light-blue-1), 1); + --ibiz-color-secondary-light-active: rgba(var(--ibiz-light-blue-2), 1); + --ibiz-color-tertiary: rgba(var(--ibiz-grey-5), 1); + --ibiz-color-tertiary-text: rgba(var(--ibiz-white), 1); + --ibiz-color-tertiary-hover: rgba(var(--ibiz-grey-4), 1); + --ibiz-color-tertiary-hover-text: rgba(var(--ibiz-white), 1); + --ibiz-color-tertiary-active: rgba(var(--ibiz-grey-6), 1); + --ibiz-color-tertiary-active-text: rgba(var(--ibiz-white), 1); + --ibiz-color-tertiary-light-default: rgba(var(--ibiz-grey-0), 1); + --ibiz-color-tertiary-light-hover: rgba(var(--ibiz-grey-1), 1); + --ibiz-color-tertiary-light-active: rgba(var(--ibiz-grey-2), 1); + --ibiz-color-info: rgba(var(--ibiz-blue-cyan-4), 1); + --ibiz-color-info-text: rgba(var(--ibiz-white), 1); + --ibiz-color-info-hover: rgba(var(--ibiz-blue-cyan-3), 1); + --ibiz-color-info-hover-text: rgba(var(--ibiz-white), 1); + --ibiz-color-info-active: rgba(var(--ibiz-blue-cyan-5), 1); + --ibiz-color-info-active-text: rgba(var(--ibiz-white), 1); + --ibiz-color-info-disabled: rgba(var(--ibiz-blue-cyan-2), 1); + --ibiz-color-info-disabled-text: rgba(var(--ibiz-white), 1); + --ibiz-color-info-light-default: rgba(var(--ibiz-blue-cyan-0), 1); + --ibiz-color-info-light-hover: rgba(var(--ibiz-blue-cyan-1), 1); + --ibiz-color-info-light-active: rgba(var(--ibiz-blue-cyan-2), 1); + --ibiz-color-success: rgba(var(--ibiz-green-5), 1); + --ibiz-color-success-text: rgba(var(--ibiz-white), 1); + --ibiz-color-success-hover: rgba(var(--ibiz-green-4), 1); + --ibiz-color-success-hover-text: rgba(var(--ibiz-white), 1); + --ibiz-color-success-active: rgba(var(--ibiz-green-6), 1); + --ibiz-color-success-active-text: rgba(var(--ibiz-white), 1); + --ibiz-color-success-disabled: rgba(var(--ibiz-green-2), 1); + --ibiz-color-success-disabled-text: rgba(var(--ibiz-white), 1); + --ibiz-color-success-light-default: rgba(var(--ibiz-green-0), 1); + --ibiz-color-success-light-hover: rgba(var(--ibiz-green-1), 1); + --ibiz-color-success-light-active: rgba(var(--ibiz-green-2), 1); + --ibiz-color-warning: rgba(var(--ibiz-orange-5), 1); + --ibiz-color-warning-text: rgba(var(--ibiz-white), 1); + --ibiz-color-warning-hover: rgba(var(--ibiz-orange-4), 1); + --ibiz-color-warning-hover-text: rgba(var(--ibiz-white), 1); + --ibiz-color-warning-active: rgba(var(--ibiz-orange-6), 1); + --ibiz-color-warning-active-text: rgba(var(--ibiz-white), 1); + --ibiz-color-warning-light-default: rgba(var(--ibiz-orange-0), 1); + --ibiz-color-warning-light-hover: rgba(var(--ibiz-orange-1), 1); + --ibiz-color-warning-light-active: rgba(var(--ibiz-orange-2), 1); + --ibiz-color-danger: rgba(var(--ibiz-red-5), 1); + --ibiz-color-danger-text: rgba(var(--ibiz-white), 1); + --ibiz-color-danger-hover: rgba(var(--ibiz-red-4), 1); + --ibiz-color-danger-hover-text: rgba(var(--ibiz-white), 1); + --ibiz-color-danger-active: rgba(var(--ibiz-red-6), 1); + --ibiz-color-danger-active-text: rgba(var(--ibiz-white), 1); + --ibiz-color-danger-light-default: rgba(var(--ibiz-red-0), 1); + --ibiz-color-danger-light-hover: rgba(var(--ibiz-red-1), 1); + --ibiz-color-danger-light-active: rgba(var(--ibiz-red-2), 1); + --ibiz-color-text-0: rgba(var(--ibiz-grey-9), 1); + --ibiz-color-text-1: rgba(var(--ibiz-grey-7), 1); + --ibiz-color-text-2: rgba(var(--ibiz-grey-6), 1); + --ibiz-color-text-3: rgba(var(--ibiz-grey-4), 1); + --ibiz-color-text-5: #dbe4ec; + --ibiz-color-text-menu: #dbe4ec; + --ibiz-color-icon-0: #65b3fc; + --ibiz-color-icon-1: #cbe7fe; + --ibiz-color-link: rgba(var(--ibiz-blue-cyan-5), 1); + --ibiz-color-link-hover: rgba(var(--ibiz-blue-cyan-4), 1); + --ibiz-color-link-active: rgba(var(--ibiz-blue-cyan-6), 1); + --ibiz-color-link-visited: rgba(var(--ibiz-blue-cyan-5), 1); + --ibiz-color-bg-0: rgba(var(--ibiz-grey-0), 1); + --ibiz-color-bg-1: rgba(var(--ibiz-white), 1); + --ibiz-color-bg-2: rgba(var(--ibiz-white), 1); + --ibiz-color-bg-3: rgba(var(--ibiz-white), 1); + --ibiz-color-bg-4: rgba(var(--ibiz-white), 1); + --ibiz-color-bg-5: rgba(var(--ibiz-blue-cyan-3), 0.6); + --ibiz-color-bg-overlay: rgba(var(--ibiz-black), 0.5); + --ibiz-color-fill-0: rgba(var(--ibiz-grey-8), 0.05); + --ibiz-color-fill-1: rgba(var(--ibiz-grey-8), 0.1); + --ibiz-color-fill-2: rgba(var(--ibiz-grey-8), 0.13); + --ibiz-color-scroll-menu: rgba(132,165,198,.4); + --ibiz-color-border: rgba(var(--ibiz-grey-9), 0.1); + --ibiz-color-disabled-text: rgba(var(--ibiz-grey-9), 0.35); + --ibiz-color-disabled-border: rgba(var(--ibiz-grey-1), 1); + --ibiz-color-disabled-bg: rgba(var(--ibiz-grey-1), 1); + --ibiz-color-disabled-fill: rgba(var(--ibiz-grey-8), 0.04); + --ibiz-color-shadow: rgba(var(--ibiz-black), 0.04); + --ibiz-shadow-elevated: 0 0 1px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.1); + --ibiz-font-size-small: 12px; + --ibiz-font-size-regular: 14px; + --ibiz-font-size-header-6: 16px; + --ibiz-font-size-header-5: 18px; + --ibiz-font-size-header-4: 20px; + --ibiz-font-size-header-3: 24px; + --ibiz-font-size-header-2: 28px; + --ibiz-font-size-header-1: 32px; + --ibiz-font-weight-light: 200; + --ibiz-font-weight-regular: 400; + --ibiz-font-weight-bold: 800; + --ibiz-border-radius-extra-small: 2px; + --ibiz-border-radius-small: 4px; + --ibiz-border-radius-medium: 8px; + --ibiz-border-radius-large: 12px; + --ibiz-border-radius-circle: 50%; + --ibiz-border-radius-full: 9999px; + --ibiz-height-control-small: 24px; + --ibiz-height-control-default: 32px; + --ibiz-height-control-large: 40px; + --ibiz-border-thickness: 0; + --ibiz-border-thickness-control: 1px; + --ibiz-border-thickness-control-focus: 1px; + --ibiz-width-icon-extra-small: 8px; + --ibiz-width-icon-small: 12px; + --ibiz-width-icon-medium: 16px; + --ibiz-width-icon-large: 20px; + --ibiz-width-icon-extra-large: 24px; + --ibiz-spacing-none: 0; + --ibiz-spacing-super-tight: 2px; + --ibiz-spacing-extra-tight: 4px; + --ibiz-spacing-tight: 8px; + --ibiz-spacing-base-tight: 12px; + --ibiz-spacing-base: 16px; + --ibiz-spacing-base-loose: 20px; + --ibiz-spacing-loose: 24px; + --ibiz-spacing-extra-loose: 32px; + --ibiz-spacing-super-loose: 40px +} +`; diff --git a/packages/layout-design/src/panel-items/sys-css-design/sys-css-design.tsx b/packages/layout-design/src/panel-items/sys-css-design/sys-css-design.tsx index 34da3818..80ce5468 100644 --- a/packages/layout-design/src/panel-items/sys-css-design/sys-css-design.tsx +++ b/packages/layout-design/src/panel-items/sys-css-design/sys-css-design.tsx @@ -19,6 +19,7 @@ import { SysUIActionTag, UIActionUtil } from '@ibiz-template/runtime'; import { createUUID } from 'qx-util'; import { SysCssDesignPanelItemController } from './sys-css-design.controller'; import './sys-css-design.scss'; +import { cssVariableCode } from './css-variable'; export default defineComponent({ name: 'IBizSysCssDesignPanelItem', @@ -52,7 +53,6 @@ export default defineComponent({ * * @export * @param {IAppDEACMode} deACMode - * @param {IAiUIActionParams} args * @return {*} {{ * contentToolbarItems: IData[]; * footerToolbarItems: IData[]; @@ -388,7 +388,68 @@ export default defineComponent({ return chatInstance; }; - return { ns, openAIChat }; + // --------智能补全 START------------- + const cssVariables: IData[] = []; + + /** + * 初始化css变量，用于智能补全 + */ + const initCssVariables = async () => { + try { + if (cssVariableCode) { + const variablePattern = /--([\w-]+):\s*([^;]+);/g; + const _tempVar = new Map(); + cssVariableCode.matchAll(variablePattern).forEach(_match => { + const cssVar = `--${_match[1]}`; + _tempVar.set(cssVar, { + label: cssVar, + detail: _match[2].trim(), + }); + }); + cssVariables.push(..._tempVar.values()); + } + } catch (error) { + ibiz.log.error(error); + } + }; + initCssVariables(); + + /** + * 判断是否在var()中输入 + * + * @param {IParams} model + * @param {IParams} position + * @return {*} + */ + const isInVarFunction = (model: IParams, position: IParams) => { + const lineContent = model.getLineContent(position.lineNumber); + const beforeCursor = lineContent.substring(0, position.column - 1); + const varStart = beforeCursor.lastIndexOf('var('); + const closeParen = beforeCursor.indexOf(')', varStart); + return ( + varStart !== -1 && (closeParen === -1 || closeParen > position.column) + ); + }; + + /** + * 智能补全 + * + * @param {IParams} model + * @param {IParams} position + */ + const provideCompletionItems = (model: IParams, position: IParams) => { + const insideVar = isInVarFunction(model, position); + const suggestions = cssVariables.map(v => ({ + label: v.label, + kind: 4, + detail: v.detail, + insertText: insideVar ? v.label : `var(${v.label})`, + })); + return { suggestions }; + }; + // --------智能补全 END------------- + + return { ns, openAIChat, provideCompletionItems }; }, render() { const { formValue, customValue, cssName, sysCssName } = @@ -421,6 +482,8 @@ export default defineComponent({ deACMode={this.controller.deACMode} openAIChat={this.openAIChat} isEnableLoad={!isLoading} + enableCompletion={true} + provideCompletionItems={this.provideCompletionItems} onUpdate:modelValue={(value: string) => { this.controller.updateCustomValue(value); }} diff --git a/packages/model-design/src/components/design-code-editor/design-code-editor.tsx b/packages/model-design/src/components/design-code-editor/design-code-editor.tsx index f764afe9..2e815cee 100644 --- a/packages/model-design/src/components/design-code-editor/design-code-editor.tsx +++ b/packages/model-design/src/components/design-code-editor/design-code-editor.tsx @@ -51,6 +51,25 @@ export default defineComponent({ openAIChat: { type: Function as PropType<() => Promise>, }, + enableCompletion: { + type: Boolean, + default: false, + }, + provideCompletionItems: { + type: Function as PropType< + ( + model: IParams, + position: IParams, + ) => { + suggestions: { + label: string; + kind: number; + detail: number; + insertText: string; + }; + } + >, + }, }, emits: { 'update:modelValue': (_value: string) => true, @@ -70,6 +89,7 @@ export default defineComponent({ let editor: monaco.editor.IStandaloneCodeEditor | undefined; let codeLensProviderDisposable: monaco.IDisposable | null; let monacoEditor: typeof monaco.editor; + let codeCompletion: monaco.IDisposable | null; // 语言 const languages = ref([ @@ -221,6 +241,23 @@ export default defineComponent({ }, ); } + + if (props.enableCompletion) { + codeCompletion = + loaderMonaco.languages.registerCompletionItemProvider( + currentLanguage.value, + { + triggerCharacters: ['-', '--'], // 输入.或者空格触发 + provideCompletionItems: (model, position): any => { + if (!validate(model) || !props.provideCompletionItems) + return { suggestions: [] }; + + if (props.provideCompletionItems) + return props.provideCompletionItems(model, position); + }, + }, + ); + } // 监听值的变化 editor.onDidChangeModelContent(() => { if (editor) { @@ -307,6 +344,7 @@ export default defineComponent({ ); resizeObserver?.disconnect(); codeLensProviderDisposable?.dispose(); + codeCompletion?.dispose(); }); return { -- Gitee From 24b9a0137b6c936f3e2ad918a8cba3842d7679b5 Mon Sep 17 00:00:00 2001 From: lijianxiong <1518062161@qq.com> Date: Wed, 21 May 2025 20:41:10 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat=EF=BC=9AAI=E4=BB=A3=E7=A0=81=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8=E6=96=B0=E5=A2=9E=E6=A0=B7=E5=BC=8F=E5=8F=98?= =?UTF-8?q?=E9=87=8F=E8=87=AA=E5=8A=A8=E8=A1=A5=E5=85=A8=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../module/completion-item/completion-item.ts | 101 +++++++++++- .../module/completion-item/variable/css.ts | 148 ++++++++++++++++++ .../module/completion-item/variable/index.ts | 1 + 3 files changed, 249 insertions(+), 1 deletion(-) create mode 100644 packages/ai-code/src/module/completion-item/variable/css.ts diff --git a/packages/ai-code/src/module/completion-item/completion-item.ts b/packages/ai-code/src/module/completion-item/completion-item.ts index f4b6fb18..98e5d911 100644 --- a/packages/ai-code/src/module/completion-item/completion-item.ts +++ b/packages/ai-code/src/module/completion-item/completion-item.ts @@ -1,7 +1,8 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import * as IMonaco from 'monaco-editor'; +import { createUUID } from 'qx-util'; import { IConfig, Monaco } from '../interface'; -import { TypeScriptVariable } from './variable'; +import { cssVariableCode, TypeScriptVariable } from './variable'; import { resource } from '../../util'; /** * 完成项补全 @@ -10,6 +11,15 @@ import { resource } from '../../util'; * @class CompletionItem */ export class CompletionItem { + /** + * 唯一标识 + * + * @private + * @type {string} + * @memberof CompletionItem + */ + private UUID: string = createUUID(); + /** * Creates an instance of CompletionItem. * @param {Monaco} monaco @@ -37,11 +47,79 @@ export class CompletionItem { case 'typescript': this.registerTypeScript(); break; + case 'css': + this.registerCss(); + break; default: break; } } + /** + * 注册Css完成项补全提示 + * - 通过额外库添加 + * @private + * @return {*} {void} + * @memberof CompletionItem + */ + private registerCss(): void { + (this.editor as IData).__inlineCompletionsId = this.UUID; + /** 初始化css变量，用于智能补全 */ + const cssVariables: IData[] = []; + const initCssVariables = () => { + try { + if (cssVariableCode) { + const variablePattern = /--([\w-]+):\s*([^;]+);/g; + const _tempVar = new Map(); + cssVariableCode.matchAll(variablePattern).forEach(_match => { + const cssVar = `--${_match[1]}`; + _tempVar.set(cssVar, { + label: cssVar, + detail: _match[2].trim(), + }); + }); + cssVariables.push(..._tempVar.values()); + } + } catch (error) { + ibiz.log.error(error); + } + }; + initCssVariables(); + + /** 判断是否在var()中输入 */ + const isInVarFunction = (model: IParams, position: IParams) => { + const lineContent = model.getLineContent(position.lineNumber); + const beforeCursor = lineContent.substring(0, position.column - 1); + const varStart = beforeCursor.lastIndexOf('var('); + const closeParen = beforeCursor.indexOf(')', varStart); + return ( + varStart !== -1 && (closeParen === -1 || closeParen > position.column) + ); + }; + const disposable = this.monaco.languages.registerCompletionItemProvider( + 'css', + { + triggerCharacters: ['-', '--'], + provideCompletionItems: (model, position): any => { + if (!this.validate(model)) return { suggestions: [] }; + const insideVar = isInVarFunction(model, position); + const suggestions = cssVariables.map(v => ({ + label: v.label, + kind: 4, + detail: v.detail, + insertText: insideVar ? v.label : `var(${v.label})`, + })); + return { suggestions }; + }, + }, + ); + + // 编辑器销毁时清理资源 + this.editor.onDidDispose(() => { + disposable?.dispose(); + }); + } + /** * 注册TypeScript完成项补全提示 * - 通过额外库添加 @@ -220,4 +298,25 @@ export class CompletionItem { .join('')}}`; return `${interfaceText}\n${variableText}`; } + + /** + * 检查模型是否属于当前编辑器实例 + * + * @private + * @param {IMonaco.editor.ITextModel} model + * @return {*} {boolean} + * @memberof CompletionItem + */ + private validate(model: IMonaco.editor.ITextModel): boolean { + const currentEditor = this.monaco.editor + .getEditors() + .find(e => e.getModel() === model); + + if ( + !currentEditor || + (currentEditor as IData).__inlineCompletionsId !== this.UUID + ) + return false; + return true; + } } diff --git a/packages/ai-code/src/module/completion-item/variable/css.ts b/packages/ai-code/src/module/completion-item/variable/css.ts new file mode 100644 index 00000000..dd4ec240 --- /dev/null +++ b/packages/ai-code/src/module/completion-item/variable/css.ts @@ -0,0 +1,148 @@ +/** + * 样式变量代码，默认使用light主题变量 + */ +export const cssVariableCode = ` +:root.light { + --ibiz-color-white: rgba(var(--ibiz-white), 1); + --ibiz-color-black: rgba(var(--ibiz-black), 1); + --ibiz-color-primary: rgba(var(--ibiz-blue-cyan-4), 1); + --ibiz-color-primary-text: rgba(var(--ibiz-white), 1); + --ibiz-color-primary-hover: rgba(var(--ibiz-blue-cyan-3), 1); + --ibiz-color-primary-hover-text: rgba(var(--ibiz-white), 1); + --ibiz-color-primary-active: rgba(var(--ibiz-blue-cyan-5), 1); + --ibiz-color-primary-active-text: rgba(var(--ibiz-white), 1); + --ibiz-color-primary-disabled: rgba(var(--ibiz-blue-cyan-2), 1); + --ibiz-color-primary-disabled-text: rgba(var(--ibiz-white), 1); + --ibiz-color-primary-light-default: rgba(var(--ibiz-blue-cyan-0), 1); + --ibiz-color-primary-light-hover: rgba(var(--ibiz-blue-cyan-1), 1); + --ibiz-color-primary-light-active: rgba(var(--ibiz-blue-cyan-2), 1); + --ibiz-color-secondary: rgba(var(--ibiz-light-blue-5), 1); + --ibiz-color-secondary-text: rgba(var(--ibiz-white), 1); + --ibiz-color-secondary-hover: rgba(var(--ibiz-light-blue-6), 1); + --ibiz-color-secondary-hover-text: rgba(var(--ibiz-white), 1); + --ibiz-color-secondary-active: rgba(var(--ibiz-light-blue-7), 1); + --ibiz-color-secondary-active-text: rgba(var(--ibiz-white), 1); + --ibiz-color-secondary-disabled: rgba(var(--ibiz-light-blue-2), 1); + --ibiz-color-secondary-disabled-text: rgba(var(--ibiz-white), 1); + --ibiz-color-secondary-light-default: rgba(var(--ibiz-light-blue-0), 1); + --ibiz-color-secondary-light-hover: rgba(var(--ibiz-light-blue-1), 1); + --ibiz-color-secondary-light-active: rgba(var(--ibiz-light-blue-2), 1); + --ibiz-color-tertiary: rgba(var(--ibiz-grey-5), 1); + --ibiz-color-tertiary-text: rgba(var(--ibiz-white), 1); + --ibiz-color-tertiary-hover: rgba(var(--ibiz-grey-4), 1); + --ibiz-color-tertiary-hover-text: rgba(var(--ibiz-white), 1); + --ibiz-color-tertiary-active: rgba(var(--ibiz-grey-6), 1); + --ibiz-color-tertiary-active-text: rgba(var(--ibiz-white), 1); + --ibiz-color-tertiary-light-default: rgba(var(--ibiz-grey-0), 1); + --ibiz-color-tertiary-light-hover: rgba(var(--ibiz-grey-1), 1); + --ibiz-color-tertiary-light-active: rgba(var(--ibiz-grey-2), 1); + --ibiz-color-info: rgba(var(--ibiz-blue-cyan-4), 1); + --ibiz-color-info-text: rgba(var(--ibiz-white), 1); + --ibiz-color-info-hover: rgba(var(--ibiz-blue-cyan-3), 1); + --ibiz-color-info-hover-text: rgba(var(--ibiz-white), 1); + --ibiz-color-info-active: rgba(var(--ibiz-blue-cyan-5), 1); + --ibiz-color-info-active-text: rgba(var(--ibiz-white), 1); + --ibiz-color-info-disabled: rgba(var(--ibiz-blue-cyan-2), 1); + --ibiz-color-info-disabled-text: rgba(var(--ibiz-white), 1); + --ibiz-color-info-light-default: rgba(var(--ibiz-blue-cyan-0), 1); + --ibiz-color-info-light-hover: rgba(var(--ibiz-blue-cyan-1), 1); + --ibiz-color-info-light-active: rgba(var(--ibiz-blue-cyan-2), 1); + --ibiz-color-success: rgba(var(--ibiz-green-5), 1); + --ibiz-color-success-text: rgba(var(--ibiz-white), 1); + --ibiz-color-success-hover: rgba(var(--ibiz-green-4), 1); + --ibiz-color-success-hover-text: rgba(var(--ibiz-white), 1); + --ibiz-color-success-active: rgba(var(--ibiz-green-6), 1); + --ibiz-color-success-active-text: rgba(var(--ibiz-white), 1); + --ibiz-color-success-disabled: rgba(var(--ibiz-green-2), 1); + --ibiz-color-success-disabled-text: rgba(var(--ibiz-white), 1); + --ibiz-color-success-light-default: rgba(var(--ibiz-green-0), 1); + --ibiz-color-success-light-hover: rgba(var(--ibiz-green-1), 1); + --ibiz-color-success-light-active: rgba(var(--ibiz-green-2), 1); + --ibiz-color-warning: rgba(var(--ibiz-orange-5), 1); + --ibiz-color-warning-text: rgba(var(--ibiz-white), 1); + --ibiz-color-warning-hover: rgba(var(--ibiz-orange-4), 1); + --ibiz-color-warning-hover-text: rgba(var(--ibiz-white), 1); + --ibiz-color-warning-active: rgba(var(--ibiz-orange-6), 1); + --ibiz-color-warning-active-text: rgba(var(--ibiz-white), 1); + --ibiz-color-warning-light-default: rgba(var(--ibiz-orange-0), 1); + --ibiz-color-warning-light-hover: rgba(var(--ibiz-orange-1), 1); + --ibiz-color-warning-light-active: rgba(var(--ibiz-orange-2), 1); + --ibiz-color-danger: rgba(var(--ibiz-red-5), 1); + --ibiz-color-danger-text: rgba(var(--ibiz-white), 1); + --ibiz-color-danger-hover: rgba(var(--ibiz-red-4), 1); + --ibiz-color-danger-hover-text: rgba(var(--ibiz-white), 1); + --ibiz-color-danger-active: rgba(var(--ibiz-red-6), 1); + --ibiz-color-danger-active-text: rgba(var(--ibiz-white), 1); + --ibiz-color-danger-light-default: rgba(var(--ibiz-red-0), 1); + --ibiz-color-danger-light-hover: rgba(var(--ibiz-red-1), 1); + --ibiz-color-danger-light-active: rgba(var(--ibiz-red-2), 1); + --ibiz-color-text-0: rgba(var(--ibiz-grey-9), 1); + --ibiz-color-text-1: rgba(var(--ibiz-grey-7), 1); + --ibiz-color-text-2: rgba(var(--ibiz-grey-6), 1); + --ibiz-color-text-3: rgba(var(--ibiz-grey-4), 1); + --ibiz-color-text-5: #dbe4ec; + --ibiz-color-text-menu: #dbe4ec; + --ibiz-color-icon-0: #65b3fc; + --ibiz-color-icon-1: #cbe7fe; + --ibiz-color-link: rgba(var(--ibiz-blue-cyan-5), 1); + --ibiz-color-link-hover: rgba(var(--ibiz-blue-cyan-4), 1); + --ibiz-color-link-active: rgba(var(--ibiz-blue-cyan-6), 1); + --ibiz-color-link-visited: rgba(var(--ibiz-blue-cyan-5), 1); + --ibiz-color-bg-0: rgba(var(--ibiz-grey-0), 1); + --ibiz-color-bg-1: rgba(var(--ibiz-white), 1); + --ibiz-color-bg-2: rgba(var(--ibiz-white), 1); + --ibiz-color-bg-3: rgba(var(--ibiz-white), 1); + --ibiz-color-bg-4: rgba(var(--ibiz-white), 1); + --ibiz-color-bg-5: rgba(var(--ibiz-blue-cyan-3), 0.6); + --ibiz-color-bg-overlay: rgba(var(--ibiz-black), 0.5); + --ibiz-color-fill-0: rgba(var(--ibiz-grey-8), 0.05); + --ibiz-color-fill-1: rgba(var(--ibiz-grey-8), 0.1); + --ibiz-color-fill-2: rgba(var(--ibiz-grey-8), 0.13); + --ibiz-color-scroll-menu: rgba(132,165,198,.4); + --ibiz-color-border: rgba(var(--ibiz-grey-9), 0.1); + --ibiz-color-disabled-text: rgba(var(--ibiz-grey-9), 0.35); + --ibiz-color-disabled-border: rgba(var(--ibiz-grey-1), 1); + --ibiz-color-disabled-bg: rgba(var(--ibiz-grey-1), 1); + --ibiz-color-disabled-fill: rgba(var(--ibiz-grey-8), 0.04); + --ibiz-color-shadow: rgba(var(--ibiz-black), 0.04); + --ibiz-shadow-elevated: 0 0 1px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.1); + --ibiz-font-size-small: 12px; + --ibiz-font-size-regular: 14px; + --ibiz-font-size-header-6: 16px; + --ibiz-font-size-header-5: 18px; + --ibiz-font-size-header-4: 20px; + --ibiz-font-size-header-3: 24px; + --ibiz-font-size-header-2: 28px; + --ibiz-font-size-header-1: 32px; + --ibiz-font-weight-light: 200; + --ibiz-font-weight-regular: 400; + --ibiz-font-weight-bold: 800; + --ibiz-border-radius-extra-small: 2px; + --ibiz-border-radius-small: 4px; + --ibiz-border-radius-medium: 8px; + --ibiz-border-radius-large: 12px; + --ibiz-border-radius-circle: 50%; + --ibiz-border-radius-full: 9999px; + --ibiz-height-control-small: 24px; + --ibiz-height-control-default: 32px; + --ibiz-height-control-large: 40px; + --ibiz-border-thickness: 0; + --ibiz-border-thickness-control: 1px; + --ibiz-border-thickness-control-focus: 1px; + --ibiz-width-icon-extra-small: 8px; + --ibiz-width-icon-small: 12px; + --ibiz-width-icon-medium: 16px; + --ibiz-width-icon-large: 20px; + --ibiz-width-icon-extra-large: 24px; + --ibiz-spacing-none: 0; + --ibiz-spacing-super-tight: 2px; + --ibiz-spacing-extra-tight: 4px; + --ibiz-spacing-tight: 8px; + --ibiz-spacing-base-tight: 12px; + --ibiz-spacing-base: 16px; + --ibiz-spacing-base-loose: 20px; + --ibiz-spacing-loose: 24px; + --ibiz-spacing-extra-loose: 32px; + --ibiz-spacing-super-loose: 40px +} +`; diff --git a/packages/ai-code/src/module/completion-item/variable/index.ts b/packages/ai-code/src/module/completion-item/variable/index.ts index 6a901dcc..686775ef 100644 --- a/packages/ai-code/src/module/completion-item/variable/index.ts +++ b/packages/ai-code/src/module/completion-item/variable/index.ts @@ -1 +1,2 @@ export { TypeScriptVariable } from './type-script'; +export { cssVariableCode } from './css'; -- Gitee