增加button label颜色

src/components/draw-app/properties/ButtonProperty.vue

@@ -17,6 +17,30 @@
       lazy-rules
       :rules="[(val) => val >= 0 || '宽度必须大于等于0']"
     />
+    <q-input
+      outlined
+      v-model="buttonModel.codeColor"
+      @change="onUpdate"
+      label="字体颜色"
+      lazy-rules
+      :rules="[(val) => (val && val.length > 0) || '线色不能为空']"
+    >
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color
+              v-model="buttonModel.codeColor"
+              @change="
+                (val) => {
+                  buttonModel.codeColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
     <q-select
       outlined
       class="q-mt-sm"
@@ -31,7 +55,7 @@
       outlined
       v-model="buttonModel.fillColor"
       @change="onUpdate"
-      label="填充色"
+      label="button颜色"
       lazy-rules
       :rules="[(val) => (val && val.length > 0) || '线色不能为空']"
     >

src/graphics/button/Button.ts

@@ -31,6 +31,7 @@ export const buttonConsts = {
   radius: 2,
   fillColor: '0x1976D2',
   alpha: 1,
+  codeColor: '#000',
   codeFontSize: 16,
 };
 
@@ -125,10 +126,11 @@ export class Button extends JlGraphic {
     }
 
     if (this.datas.code) {
-      this.setTextGraphic(this.labelGraphic, 'label');
       this.labelGraphic.text = this.datas.code;
       this.datas.codeFontSize =
         this.datas.codeFontSize || buttonConsts.codeFontSize;
+      this.datas.codeColor = this.datas.codeColor || buttonConsts.codeColor;
+      this.setTextGraphic(this.labelGraphic, 'label');
       const labelPosition = this.datas.childTransforms?.find(
         (t) => t.name === this.labelGraphic.name
       )?.transform.position;
@@ -162,10 +164,10 @@ export class Button extends JlGraphic {
   }
 
   setTextGraphic(g: VectorText, name: string) {
-    const fontSize = this.datas.codeFontSize || buttonConsts.codeFontSize;
+    const fontSize = this.datas.codeFontSize;
     g.setVectorFontSize(fontSize);
     g.anchor.set(0.5);
-    g.style.fill = '#000';
+    g.style.fill = this.datas.codeColor;
     g.transformSave = true;
     g.name = name;
   }