feat:文字添加渐变

src/views/components/PenProps.vue

@@ -684,7 +684,7 @@
                   >
                 </div>
                 <div class="form-item">
-                  <t-color-picker
+                  <!-- <t-color-picker
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
@@ -695,7 +695,7 @@
                     v-model="data.pen.textColor"
                     @change="changeValue('textColor')"
                   />
-                  <label style="width: 44px">前景</label>
+                  <label style="width: 44px">前景</label> -->
                   <t-color-picker
                     class="simple mt-8 mr-4"
                     format="CSS"
@@ -707,7 +707,7 @@
                     v-model="data.pen.textBackground"
                     @change="changeValue('textBackground')"
                   />
-                  <label style="width: 44px">背景</label>
+                  <label style="width: 64px">背景</label>
 
                   <t-color-picker
                     class="simple mt-8 mr-4"
@@ -720,7 +720,7 @@
                     v-model="data.pen.hoverTextColor"
                     @change="changeValue('hoverTextColor')"
                   />
-                  <label style="width: 44px">悬停</label>
+                  <label style="width: 64px">悬停</label>
 
                   <t-color-picker
                     class="simple mt-8 mr-4"
@@ -733,7 +733,69 @@
                     v-model="data.pen.activeTextColor"
                     @change="changeValue('activeTextColor')"
                   />
-                  <label style="width: 44px">选中</label>
+                  <label style="width: 64px">选中</label>
+                </div>
+                <div class="form-item">
+                  <label style="width: 32px">前景</label>
+                  <div class="ml-8">
+                    <t-radio-group
+                      size="small"
+                      v-model="data.pen.textType"
+                      :default-value="0"
+                      @change="changeValue('textType')"
+                    >
+                      <t-radio-button :value="0"> 纯色 </t-radio-button>
+                      <t-radio-button :value="1"> 线性渐变 </t-radio-button>
+                      <t-radio-button :value="2"> 径向渐变 </t-radio-button>
+                    </t-radio-group>
+                    <div v-if="data.pen.textType === 0" class="mt-8 -ml-8">
+                      <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.textColor"
+                        @change="changeValue('textColor')"
+                      />
+                    </div>
+                    <div
+                      v-else-if="data.pen.textType === 1"
+                      class="mt-8 -ml-8"
+                      style="width: 200px"
+                    >
+                      <t-color-picker
+                        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.textGradientColors"
+                        @change="changeValue('textGradientColors')"
+                      />
+                    </div>
+                    <div
+                      v-else-if="data.pen.textType === 2"
+                      class="mt-8 -ml-8"
+                      style="width: 200px"
+                    >
+                      <t-color-picker
+                        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.textGradientColors"
+                        @change="changeValue('textGradientColors')"
+                      />
+                    </div>
+                  </div>
                 </div>
                 <div class="form-item">
                   <t-checkbox
@@ -1305,6 +1367,9 @@ function initPenData() {
   if (data.pen.bkType == undefined) {
     data.pen.bkType = 0;
   }
+  if (data.pen.textType == undefined) {
+    data.pen.textType = 0;
+  }
   if (!data.pen.animations) {
     data.pen.animations = [];
   }