feat:禁用颜色

src/views/components/PenProps.vue

@@ -1352,7 +1352,7 @@
             />
           </div>
           <t-divider style="margin: -8px 0" />
-          <div class="form-item px-16" style="margin-top: -12px;margin-bottom: 8px;">
+          <div class="form-item px-16" style="margin-top: -12px;margin-bottom: -8px;">
             <label class="form-title"   style="width: 90px">禁止 </label>
             <t-checkbox
               v-model="data.pen.disabled"
@@ -1362,25 +1362,67 @@
               禁用
             </t-checkbox>
           </div>
+          <div class="form-item px-16">
+            <t-color-picker
+              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.disabledBackground"
+              @change="changeValue('disabledBackground')"
+            />
+            <label style="width: 64px">禁用背景</label>
+            <t-color-picker
+              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.disabledColor"
+              :clearable="true"
+              @change="changeValue('disabledColor')"
+            />
+            <label style="width: 64px">禁用颜色</label>
+
+            <t-color-picker
+              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.disabledTextColor"
+              :clearable="true"
+              @change="changeValue('disabledTextColor')"
+            />
+            <label style="width: 164px">禁用文字颜色</label>
+          </div>
           <div class="form-item px-16" style="margin-top: -12px">
             <t-checkbox
               v-model="data.pen.disableRotate"
               @change="changeValue('disableRotate')"
-              style="width: 90px"
+              style="width: 84px"
             >
               禁止旋转
             </t-checkbox>
             <t-checkbox
               v-model="data.pen.disableSize"
               @change="changeValue('disableSize')"
-              style="width: 90px"
+              style="width: 84px"
             >
               禁止缩放
             </t-checkbox>
             <t-checkbox
               v-model="data.pen.disableAnchor"
               @change="changeValue('disableAnchor')"
-              style="width: 90px"
+              style="width: 84px"
             >
               禁用锚点
             </t-checkbox>