feat: colorPicker组件属性整理

src/services/defaults.ts

@@ -2992,3 +2992,63 @@ export const templates: any[] = [
   { name: '主题', list: [] },
   { name: '布局', list: [] },
 ];
+
+
+export const defaultPureColor: string[] = [
+  '#ff925c',
+  '#e6d950',
+  '#51e69b',
+  '#59c8ff',
+  '#FF7875',
+  '#FF9C6E',
+  '#FFC069',
+  '#FFD666',
+  '#FFF566',
+  '#D3F261',
+  '#95DE64',
+  '#5CDBD3',
+  '#69C0FF',
+  '#85A5FF',
+  '#B37FEB',
+  '#FF85C0',
+  '#000000',
+  '#FFFFFF',
+  '#FFFFFF00',
+]
+
+// export const defaultGradientColor: string[] = [
+//   'linear-gradient(90deg, #E52600 0%, #CC0000 12%, #FF925C 80%, #FF622E 100%)',
+//   'linear-gradient(90deg, #B36800 0%, #B36800 12%, #E6D950 80%, #CCB125 100%)',
+//   'linear-gradient(90deg, #00B35A 0%, #00735F 12%, #51E69B 80%, #24CC6B 100%)',
+//   'linear-gradient(90deg, #0073E6 0%, #1433CC 12%, #59C8FF 80%, #2EA5FF 100%)',
+//   'linear-gradient(90deg, #a3aab2 0%, #7b7f8c 12%, #e5ecf0 80%, #bac2c9 100%)',
+//
+//   'linear-gradient(90deg, #FF622E 0%, #FF622E 18%,#CC0000 20%,#FF622E 50%, #CC0000 80%,#FF622E 82%, #FF622E 100%)',
+//   'linear-gradient(90deg, #ccb125 0%, #ccb125 18%,#B36800 20%,#CCB125 50%, #B36800 80%,#CCB125 82%, #CCB125 100%)',
+//   'linear-gradient(90deg, #24CC6B 0%, #24CC6B 18%,#00735F 20%,#24CC6B 50%, #00735F 80%,#24CC6B 82%, #24CC6B 100%)',
+//   'linear-gradient(90deg, #2EA5FF 0%, #2EA5FF 18%,#1433CC 20%,#2EA5FF 50%, #1433CC 80%,#2EA5FF 82%, #2EA5FF 100%)',
+//   'linear-gradient(90deg, #bac2c9 0%, #bac2c9 18%,#7b7f8c 20%,#bac2c9 50%, #7b7f8c 80%,#bac2c9 82%, #bac2c9 100%)'
+// ]
+
+
+export const defaultGradientColor: string[] = [
+  '#ff925c',
+  '#e6d950',
+  '#51e69b',
+  '#59c8ff',
+  '#FF7875',
+  '#FF9C6E',
+  '#FFC069',
+  '#FFD666',
+  '#FFF566',
+  '#D3F261',
+  '#95DE64',
+  '#5CDBD3',
+  '#69C0FF',
+  '#85A5FF',
+  '#B37FEB',
+  '#FF85C0',
+  '#000000',
+  '#FFFFFF',
+  '#FFFFFF00',
+]

src/views/components/AnimateFrames.vue

@@ -89,6 +89,7 @@
                       v-model="item[prop]"
                       :placeholder="propDescriptions[prop].placeholder"
                       format="CSS"
+                      :recent-colors="null"
                       :enable-alpha="true"
                       :color-modes="
                         propDescriptions[prop].colorModes ||
@@ -96,6 +97,9 @@
                           item[propDescriptions[prop].colorModesBind]
                         )
                       "
+                      :swatch-colors = 'propDescriptions[prop].colorModes?.[0] === "monochrome"?defaultPureColor : (propDescriptions[prop].colorModesFn(
+                          item[propDescriptions[prop].colorModesBind]
+                        )[0] === "monochrome"?defaultPureColor: defaultGradientColor)'
                       :show-primary-color-preview="false"
                     />
                     <t-switch
@@ -161,6 +165,7 @@
 import { onMounted, reactive, ref } from 'vue';
 
 import { useSelection } from '@/services/selections';
+import {defaultGradientColor, defaultPureColor} from "@/services/defaults";
 
 const { animate } = defineProps<{
   animate: { name: string; frames: any[] };

src/views/components/FileProps.vue

@@ -54,7 +54,9 @@
             <t-color-picker
               class="w-full"
               format="CSS"
+              :recent-colors="null"
               :enable-alpha="true"
+              :swatch-colors="defaultPureColor"
               :color-modes="['monochrome']"
               :show-primary-color-preview="false"
               :value="data.meta2dData.background"
@@ -255,6 +257,7 @@ import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import { autoSave, inTreePanel, useAssets } from '@/services/common';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { loadCss } from '@meta2d/core';
+import { defaultPureColor} from "@/services/defaults";
 
 const headers = {
   Authorization: 'Bearer ' + (localStorage.token || getCookie('token') || ''),

src/views/components/PenAnimates.vue

@@ -73,6 +73,8 @@
                 class="w-full"
                 format="CSS"
                 :enable-alpha="true"
+                :recent-colors="null"
+                :swatch-colors="defaultPureColor"
                 :color-modes="['monochrome']"
                 :show-primary-color-preview="false"
                 :clearable="true"
@@ -221,6 +223,7 @@ import { getPenTree } from '@/services/common';
 import { deepClone } from '@meta2d/core';
 
 import AnimateFrames from './AnimateFrames.vue';
+import {defaultPureColor} from "@/services/defaults";
 
 const props = defineProps<{
   pen: any;

src/views/components/PenProps.vue

@@ -167,6 +167,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     :clearable="true"
@@ -179,6 +181,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.pen.hoverColor"
@@ -190,6 +194,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.pen.activeColor"
@@ -299,9 +305,10 @@
                         v-if="data.pen.strokeType"
                         class="simple mr-4"
                         format="CSS"
+                        :swatch-colors="defaultGradientColor"
                         :color-modes="['linear-gradient']"
                         :show-primary-color-preview="false"
-                        :clearable="true"
+                        :recent-colors="null"
                         :enableAlpha="true"
                         v-model="data.pen.lineGradientColors"
                         @change="changeValue('lineGradientColors')"
@@ -391,7 +398,9 @@
                       <t-color-picker
                         class="w-full"
                         format="CSS"
+                        :swatch-colors="defaultPureColor"
                         :color-modes="['monochrome']"
+                        :recent-colors="null"
                         :enable-alpha="true"
                         :show-primary-color-preview="false"
                         v-model="data.pen.background"
@@ -407,6 +416,8 @@
                         class="w-full"
                         format="CSS"
                         :enable-alpha="true"
+                        :recent-colors="null"
+                        :swatch-colors="defaultGradientColor"
                         :color-modes="['linear-gradient']"
                         :show-primary-color-preview="false"
                         v-model="data.pen.gradientColors"
@@ -421,6 +432,8 @@
                         class="simple"
                         format="CSS"
                         :enable-alpha="true"
+                        :recent-colors="null"
+                        :swatch-colors="defaultGradientColor"
                         :color-modes="['linear-gradient']"
                         :show-primary-color-preview="false"
                         v-model="data.pen.gradientColors"
@@ -454,6 +467,8 @@
                       class="simple"
                       format="CSS"
                       :enable-alpha="true"
+                      :recent-colors="null"
+                      :swatch-colors="defaultPureColor"
                       :color-modes="['monochrome']"
                       :show-primary-color-preview="false"
                       v-model="data.pen.shadowColor"
@@ -625,9 +640,10 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
-                    :clearable="true"
                     v-model="data.pen.textColor"
                     @change="changeValue('textColor')"
                   />
@@ -636,6 +652,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.pen.textBackground"
@@ -647,6 +665,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.pen.hoverTextColor"
@@ -658,6 +678,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.pen.activeTextColor"
@@ -900,7 +922,9 @@
                     class="w-full"
                     v-else-if="item.type === 'color'"
                     :enable-alpha="true"
+                    :recent-colors="null"
                     format="CSS"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.pen[item.key]"
@@ -1087,6 +1111,7 @@ import { autoSave, fonts, inTreePanel } from '@/services/common';
 import { updatePen } from './pen';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { useUser } from '@/services/user';
+import {defaultGradientColor, defaultPureColor} from "@/services/defaults";
 
 const { user } = useUser();
 const headers = {

src/views/components/PensProps.vue

@@ -117,6 +117,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     :clearable="true"
@@ -129,6 +131,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.hoverColor"
@@ -140,6 +144,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.activeColor"
@@ -253,6 +259,8 @@
                         :show-primary-color-preview="false"
                         :clearable="true"
                         :enableAlpha="true"
+                        :recent-colors="null"
+                        :swatch-colors="defaultGradientColor"
                         v-model="data.lineGradientColors"
                         @change="changeValue('lineGradientColors')"
                         placeholder="无"
@@ -342,6 +350,8 @@
                         class="w-full"
                         format="CSS"
                         :enable-alpha="true"
+                        :recent-colors="null"
+                        :swatch-colors="defaultPureColor"
                         :color-modes="['monochrome']"
                         :show-primary-color-preview="false"
                         v-model="data.background"
@@ -357,6 +367,8 @@
                         class="w-full"
                         format="CSS"
                         :enable-alpha="true"
+                        :recent-colors="null"
+                        :swatch-colors="defaultGradientColor"
                         :color-modes="['linear-gradient']"
                         :show-primary-color-preview="false"
                         v-model="data.gradientColors"
@@ -368,6 +380,8 @@
                         class="simple"
                         format="CSS"
                         :enable-alpha="true"
+                        :recent-colors="null"
+                        :swatch-colors="defaultGradientColor"
                         :color-modes="['linear-gradient']"
                         :show-primary-color-preview="false"
                         v-model="data.gradientColors"
@@ -401,6 +415,8 @@
                       class="simple"
                       format="CSS"
                       :enable-alpha="true"
+                      :recent-colors="null"
+                      :swatch-colors="defaultPureColor"
                       :color-modes="['monochrome']"
                       :show-primary-color-preview="false"
                       v-model="data.shadowColor"
@@ -568,9 +584,10 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recentColors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
-                    :clearable="true"
                     v-model="data.color"
                     @change="changeValue('color')"
                   />
@@ -578,7 +595,9 @@
                   <t-color-picker
                     class="simple mt-8 mr-4"
                     :enable-alpha="true"
+                    :recent-colors="null"
                     format="CSS"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.background"
@@ -589,7 +608,9 @@
                   <t-color-picker
                     class="simple mt-8 mr-4"
                     :enable-alpha="true"
+                    :recent-colors="null"
                     format="CSS"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.hoverColor"
@@ -601,6 +622,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.activeColor"
@@ -763,6 +786,7 @@ import { updatePen } from './pen';
 
 import { useSelection } from '@/services/selections';
 import { fonts, setChildrenVisible } from '@/services/common';
+import {defaultGradientColor, defaultPureColor} from "@/services/defaults";
 
 const { selections } = useSelection();