From 259d3518bb59a667292b2c6bd14560f6ce883ec0 Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Wed, 16 Oct 2024 17:25:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0button=20label=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../draw-app/properties/ButtonProperty.vue    | 26 ++++++++++++++++++-
 src/graphics/button/Button.ts                 |  8 +++---
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/draw-app/properties/ButtonProperty.vue b/src/components/draw-app/properties/ButtonProperty.vue
index 29c5f7e..26effbf 100644
--- a/src/components/draw-app/properties/ButtonProperty.vue
+++ b/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) || '线色不能为空']"
     >
diff --git a/src/graphics/button/Button.ts b/src/graphics/button/Button.ts
index 5139b37..5d18d87 100644
--- a/src/graphics/button/Button.ts
+++ b/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;
   }