feat: 添加lvgl版本选项，添加颜色选择器

src/renderer/src/components/ColorPicker/index.vue

@@ -21,11 +21,12 @@
 
 <script setup lang="ts">
 import { computed, ref, useSlots, onMounted } from 'vue'
-import { ColorPicker, type ColorPickerProps } from 'vue3-colorpicker'
-import 'vue3-colorpicker/style.css'
+import { ColorPicker } from '@/lib/color-picker/index.es.js'
+// import { type ColorPickerProps } from '@/lib/color-picker/types/index'
+import '@/lib/color-picker/style.css'
 import { useAppStore } from '@/store/modules/app'
 
-const props = defineProps<ColorPickerProps>()
+const props = defineProps()
 
 const appStore = useAppStore()
 const config = computed(

src/renderer/src/lib/color-picker/README.ZH-cn.md

@@ -0,0 +1,73 @@
+# colorpicker
+
+非常漂亮的一款拾色器,支持多种颜色格式的输入输出,支持渐变色选择。
+
+注意：本文档适用于 v2 以上版本。如果您正在使用旧版本，请参阅 v1 分支。v2 版本为破坏性更新，不再支持 v1 中的某些功能,请谨慎使用。
+
+[在线 demo 演示](https://aesoper101.github.io/vue3-colorpicker/)
+
+[English](https://github.com/aesoper101/vue3-colorpicker/blob/main/README.md)
+
+## 安装
+
+```
+yarn add vue3-colorpicker
+```
+
+或者
+
+```
+npm install vue3-colorpicker
+```
+
+## 如何使用
+
+### 第一步全局注册
+
+```
+import Vue3ColorPicker from "vue3-colorpicker";
+import "vue3-colorpicker/style.css";
+
+createApp(App)
+  .use(router)
+  .use(Vue3ColorPicker)
+  .mount("#app");
+```
+
+或者局部注册
+
+```vue3
+import { ColorPicker } from "vue3-colorpicker";
+import "vue3-colorpicker/style.css";
+
+export default defineComponent({
+components: { ColorPicker },
+});
+```
+
+### 使用组件
+
+```vue3
+<template>
+  <div>
+     <color-picker v-model:pureColor="pureColor" v-model:gradientColor="gradientColor"/>
+  </div>
+</template>
+<script lang="ts">
+  import { ref } from "vue";
+  import { ColorInputWithoutInstance } from "tinycolor2";
+
+  export default defineComponent({
+     setup() {
+       const pureColor = ref<ColorInputWithoutInstance>("red");
+       const gradientColor = ref("linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)");
+
+       return { pureColor, gradientColor }
+     }
+  });
+</script>
+```
+
+具体文档请参考 [在线 demo 演示](https://aesoper101.github.io/vue3-colorpicker/)
+
+案例代码在 src/stories 目录下

src/renderer/src/lib/color-picker/README.md

@@ -0,0 +1,72 @@
+# colorpicker
+
+A very beautiful color picker, supports input and output of multiple color formats, and supports gradient color selection.
+
+Note: This document is for Vue3ColorPicker v2. If you are looking for an older versions, refer to the v1 branches.The v2 version is a destructive update, and some functions in v1 are no longer supported. Please use it with caution
+
+[Live Demo](https://aesoper101.github.io/vue3-colorpicker/)
+
+[中文文档](https://github.com/aesoper101/vue3-colorpicker/blob/main/README.ZH-cn.md)
+
+## Installation
+
+```
+yarn add vue3-colorpicker
+```
+
+OR
+
+```
+npm install vue3-colorpicker
+```
+
+## How to use
+
+### The first step is global registration
+
+```
+import Vue3ColorPicker from "vue3-colorpicker";
+import "vue3-colorpicker/style.css";
+
+createApp(App)
+  .use(router)
+  .use(Vue3ColorPicker)
+  .mount("#app");
+```
+
+OR
+
+```vue3
+import { ColorPicker } from "vue3-colorpicker";
+import "vue3-colorpicker/style.css";
+
+export default defineComponent({
+components: { ColorPicker },
+});
+```
+
+### Usage
+
+```vue3
+<template>
+  <div>
+     <color-picker v-model:pureColor="pureColor" v-model:gradientColor="gradientColor"/>
+  </div>
+</template>
+<script lang="ts">
+  import { ref } from "vue";
+  import { ColorInputWithoutInstance } from "tinycolor2";
+
+  export default defineComponent({
+     setup() {
+       const pureColor = ref<ColorInputWithoutInstance>("red");
+       const gradientColor = ref("linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)");
+
+       return { pureColor, gradientColor }
+     }
+  });
+</script>
+
+```
+
+[Live Demo](https://aesoper101.github.io/vue3-colorpicker/)

src/renderer/src/lib/color-picker/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "vue3-colorpicker",
+  "version": "2.3.0",
+  "main": "index.es.js",
+  "types": "types/index.d.ts",
+  "author": "aesoper",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/aesoper101/vue3-colorpicker/issues"
+  },
+  "homepage": "https://github.com/aesoper101/vue3-colorpicker#readme",
+  "dependencies": {
+    "@aesoper/normal-utils": "^0.1.5",
+    "@popperjs/core": "^2.11.8",
+    "@vueuse/core": "^10.1.2",
+    "gradient-parser": "^1.0.2",
+    "lodash-es": "^4.17.21",
+    "tinycolor2": "^1.4.2",
+    "vue-types": "^4.1.0"
+  },
+  "peerDependencies": {
+    "@aesoper/normal-utils": "^0.1.5",
+    "@popperjs/core": "^2.11.8",
+    "@vueuse/core": "^10.1.2",
+    "gradient-parser": "^1.0.2",
+    "lodash-es": "^4.17.21",
+    "tinycolor2": "^1.4.2",
+    "vue": "^3.2.6",
+    "vue-types": "^4.1.0"
+  }
+}

src/renderer/src/lib/color-picker/types/angle/Angle.d.ts

@@ -0,0 +1,48 @@
+declare const _default: import("vue").DefineComponent<{
+    angle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    borderWidth: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:angle")[], "change" | "update:angle", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    angle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    borderWidth: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:angle"?: ((...args: any[]) => any) | undefined;
+}, {
+    size: number;
+    angle: number;
+    borderWidth: number;
+    borderColor: string;
+}>;
+export default _default;

src/renderer/src/lib/color-picker/types/angle/utils.d.ts

@@ -0,0 +1,7 @@
+export declare const calcAngle: (element: HTMLElement, event: MouseEvent) => number;
+export interface DragEventOption {
+    drag?: (event: Event) => void;
+    start?: (event: Event) => void;
+    end?: (event: Event) => void;
+}
+export declare const triggerDragEvent: (element: HTMLElement, options: DragEventOption) => void;

src/renderer/src/lib/color-picker/types/chrome/ChromeColorPicker.vue.d.ts

@@ -0,0 +1,76 @@
+import { Color } from "../utils/color";
+declare const _default: import("vue").DefineComponent<{
+    color: import("vue-types").VueTypeDef<Color>;
+    disableHistory: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    roundHistory: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disableAlpha: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}, {
+    state: {
+        color: {
+            toString: (format?: import("../utils/color").ColorFormat | undefined) => string;
+            toHexString: () => string;
+            toCssRgbString: () => string;
+            toRgbString: () => string;
+            hex: string;
+            hue: number;
+            saturation: number;
+            brightness: number;
+            lightness: number;
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+            readonly RGB: number[];
+            readonly HSB: number[];
+            readonly HSL: number[];
+        };
+        hex: string;
+        rgb: string;
+    };
+    previewStyle: import("vue").ComputedRef<{
+        background: string;
+    }>;
+    historyColors: import("@vueuse/shared").RemovableRef<string[]>;
+    onAlphaChange: (alpha: number) => void;
+    onHueChange: (hue: number) => void;
+    onBoardChange: (saturation: number, brightness: number) => void;
+    onInputChange: (color: Color) => void;
+    onCompactChange: (color: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:color" | "change")[], "update:color" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    color: import("vue-types").VueTypeDef<Color>;
+    disableHistory: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    roundHistory: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disableAlpha: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:color"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    disableAlpha: boolean;
+    disableHistory: boolean;
+    roundHistory: boolean;
+}>;
+export default _default;

src/renderer/src/lib/color-picker/types/common/Board.vue.d.ts

@@ -0,0 +1,46 @@
+import { Color } from "../utils/color";
+declare const _default: import("vue").DefineComponent<{
+    color: import("vue-types").VueTypeDef<Color>;
+    round: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    hide: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}, {
+    state: {
+        hueColor: string;
+        saturation: number;
+        brightness: number;
+    };
+    cursorElement: import("vue").Ref<HTMLElement | null | undefined>;
+    getCursorStyle: import("vue").ComputedRef<{
+        top: string;
+        left: string;
+    }>;
+    onClickBoard: (event: MouseEvent) => void;
+    onDrag: (event: MouseEvent) => void;
+    onDragEnd: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    color: import("vue-types").VueTypeDef<Color>;
+    round: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    hide: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    round: boolean;
+    hide: boolean;
+}>;
+export default _default;

src/renderer/src/lib/color-picker/types/common/History.vue.d.ts

@@ -0,0 +1,27 @@
+declare const _default: import("vue").DefineComponent<{
+    colors: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
+    round: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}, {
+    onColorSelect: (v: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    colors: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
+    round: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    round: boolean;
+    colors: string[];
+}>;
+export default _default;

src/renderer/src/lib/color-picker/types/common/Palette.vue.d.ts

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    palettes: string[][];
+    computedBgStyle: (color: string) => "transparent" | {
+        background?: undefined;
+    } | {
+        background: string;
+    };
+    onColorChange: (color: string) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _default;

src/renderer/src/lib/color-picker/types/common/WrapContainer.vue.d.ts

@@ -0,0 +1,41 @@
+declare const _default: import("vue").DefineComponent<{
+    theme: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    showTab: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    activeKey: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+}, {
+    state: {
+        activeKey: string;
+    };
+    onActiveKeyChange: (key: string) => void;
+    lang: import("vue").ComputedRef<{
+        [key: string]: string;
+    }> | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:activeKey")[], "change" | "update:activeKey", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    theme: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    showTab: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    activeKey: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:activeKey"?: ((...args: any[]) => any) | undefined;
+}, {
+    activeKey: string;
+    theme: string;
+    showTab: boolean;
+}>;
+export default _default;

src/renderer/src/lib/color-picker/types/fk/FkColorPicker.vue.d.ts

@@ -0,0 +1,80 @@
+import { Color } from "../utils/color";
+declare const _default: import("vue").DefineComponent<{
+    color: import("vue-types").VueTypeDef<Color>;
+    disableHistory: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    roundHistory: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disableAlpha: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}, {
+    state: {
+        color: {
+            toString: (format?: import("../utils/color").ColorFormat | undefined) => string;
+            toHexString: () => string;
+            toCssRgbString: () => string;
+            toRgbString: () => string;
+            hex: string;
+            hue: number;
+            saturation: number;
+            brightness: number;
+            lightness: number;
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+            readonly RGB: number[];
+            readonly HSB: number[];
+            readonly HSL: number[];
+        };
+        hex: string;
+        rgb: string;
+    };
+    advancePanelShow: import("vue").Ref<boolean>;
+    onBack: () => void;
+    onCompactChange: (color: string) => void;
+    onAlphaChange: (alpha: number) => void;
+    onHueChange: (hue: number) => void;
+    onBoardChange: (saturation: number, brightness: number) => void;
+    onLightChange: (light: number) => void;
+    onInputChange: (event: FocusEvent) => void;
+    previewStyle: import("vue").ComputedRef<{
+        background: string;
+    }>;
+    historyColors: import("@vueuse/shared").RemovableRef<string[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:color" | "change" | "advanceChange")[], "update:color" | "change" | "advanceChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    color: import("vue-types").VueTypeDef<Color>;
+    disableHistory: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    roundHistory: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disableAlpha: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:color"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    onAdvanceChange?: ((...args: any[]) => any) | undefined;
+}, {
+    disableAlpha: boolean;
+    disableHistory: boolean;
+    roundHistory: boolean;
+}>;
+export default _default;

src/renderer/src/lib/color-picker/types/index.d.ts

@@ -0,0 +1,6 @@
+import { Plugin } from "vue";
+import ColorPicker from "./ColorPicker.vue";
+import type { ColorPickerProps } from "./ColorPicker.vue";
+declare const Vue3ColorPicker: Plugin;
+export { ColorPicker, type ColorPickerProps };
+export default Vue3ColorPicker;

src/renderer/src/lib/color-picker/types/lang/en-US.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    start: string;
+    end: string;
+    pure: string;
+    gradient: string;
+    linear: string;
+    radial: string;
+};
+export default _default;

src/renderer/src/lib/color-picker/types/lang/index.d.ts

@@ -0,0 +1,6 @@
+export declare type Lang = "ZH-cn" | "En";
+export declare const Local: {
+    [K in Lang]: {
+        [key: string]: string;
+    };
+};

src/renderer/src/lib/color-picker/types/lang/zh-CN.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    start: string;
+    end: string;
+    pure: string;
+    gradient: string;
+    linear: string;
+    radial: string;
+};
+export default _default;

src/renderer/src/lib/color-picker/types/utils/color.d.ts

@@ -0,0 +1,48 @@
+import { ColorInput } from "tinycolor2";
+export declare type ColorFormat = "rgb" | "prgb" | "hex" | "hex6" | "hex3" | "hex4" | "hex8" | "name" | "hsl" | "hsv";
+export declare class Color {
+    private instance;
+    private alphaValue;
+    private redValue;
+    private greenValue;
+    private blueValue;
+    private hueValue;
+    private saturationValue;
+    private brightnessValue;
+    private hslSaturationValue;
+    private lightnessValue;
+    constructor(input?: ColorInput);
+    private initAlpha;
+    private initLightness;
+    private initRgb;
+    private initHsb;
+    toString(format?: ColorFormat): string;
+    toHexString: () => string;
+    toCssRgbString: () => string;
+    toRgbString: () => string;
+    get hex(): string;
+    set hex(hexString: string);
+    set hue(value: number);
+    get hue(): number;
+    set saturation(value: number);
+    get saturation(): number;
+    set brightness(value: number);
+    get brightness(): number;
+    set lightness(value: number);
+    get lightness(): number;
+    set red(value: number);
+    get red(): number;
+    set green(value: number);
+    get green(): number;
+    set blue(value: number);
+    get blue(): number;
+    set alpha(value: number);
+    get alpha(): number;
+    get RGB(): number[];
+    get HSB(): number[];
+    get HSL(): number[];
+}
+export declare function rgbaColor(r: number, g: number, b: number, a: number): string;
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const HistoryColorKey = "color-history";
+export declare const MAX_STORAGE_LENGTH = 8;

src/renderer/src/lib/color-picker/types/utils/type.d.ts

@@ -0,0 +1,8 @@
+import { ComputedRef } from "vue";
+export declare type SupportLang = "ZH-cn" | "En";
+export interface ColorPickerProvider {
+    lang: ComputedRef<{
+        [key: string]: string;
+    }>;
+}
+export declare const ColorPickerProviderKey = "Vue3ColorPickerProvider";

src/renderer/src/types/appMeta.d.ts

@@ -80,4 +80,8 @@ export interface AppMeta {
   fontPackaging: 'c' | 'bin'
   // 矢量字库
   vectorFont: boolean
+  // 图形库
+  graphic: 'lvgl' | string
+  // 图形库版本
+  graphicVersion: string
 }

src/renderer/src/views/designer/modals/projectModal/index.vue

@@ -61,6 +61,24 @@
               ></el-option>
             </el-select>
           </el-form-item>
+          <el-row :gutter="12">
+            <el-col :span="8">
+              <el-form-item label="图形库">
+                <el-select v-model="formData.graphic" :disabled="mode === 'edit'">
+                  <el-option label="LVGL" value="lvgl"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="图形库版本">
+                <el-select
+                  v-model="formData.graphicVersion"
+                  :disabled="mode === 'edit'"
+                  :options="versionOptions"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
           <el-divider />
           <!-- 芯片配置 -->
           <template v-if="formData.type === 'chip'">
@@ -557,6 +575,11 @@ const projectStore = useProjectStore()
 const appStore = useAppStore()
 const recentProject = useRecentProject()
 
+const versionOptions = [
+  { label: 'v8.3.11', value: 'v8.3.11' },
+  { label: 'v9.5.0', value: 'v9.5.0' }
+]
+
 const formData = reactive<
   AppMeta & {
     path: string
@@ -568,6 +591,8 @@ const formData = reactive<
   path: projectPath.value || '',
   codePath: codePath.value || '',
   type: 'chip',
+  graphic: 'lvgl',
+  graphicVersion: 'v9.5.0',
   chip: {
     model: '',
     flash_size: {