From b35132e93eba6136990ba82912e53887c17c0cc1 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 15 Jun 2026 17:10:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E8=BE=B9=E6=A1=86=E6=96=B9?=
 =?UTF-8?q?=E5=90=91=E6=9C=89=E9=85=8D=E7=BD=AE=E6=97=B6=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=AB=98=E4=BA=AE=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fields/StyleSetter/components/Border.vue  | 21 +++++++++++++------
 .../editor/src/theme/style-setter/border.scss |  5 ++++-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/editor/src/fields/StyleSetter/components/Border.vue b/packages/editor/src/fields/StyleSetter/components/Border.vue
index 85842a9b..8be32df8 100644
--- a/packages/editor/src/fields/StyleSetter/components/Border.vue
+++ b/packages/editor/src/fields/StyleSetter/components/Border.vue
@@ -4,27 +4,31 @@
       <div class="border-icon-container-row">
         <div
           class="border-icon border-icon-top"
-          :class="{ active: direction === 'Top' }"
+          :class="{ active: direction === 'Top', configured: isConfigured('Top') }"
           @click="selectDirection('Top')"
         ></div>
       </div>
       <div class="border-icon-container-row">
         <div
           class="border-icon border-icon-left"
-          :class="{ active: direction === 'Left' }"
+          :class="{ active: direction === 'Left', configured: isConfigured('Left') }"
           @click="selectDirection('Left')"
         ></div>
-        <div class="border-icon" :class="{ active: direction === '' }" @click="selectDirection()"></div>
+        <div
+          class="border-icon"
+          :class="{ active: direction === '', configured: isConfigured('') }"
+          @click="selectDirection()"
+        ></div>
         <div
           class="border-icon border-icon-right"
-          :class="{ active: direction === 'Right' }"
+          :class="{ active: direction === 'Right', configured: isConfigured('Right') }"
           @click="selectDirection('Right')"
         ></div>
       </div>
       <div class="border-icon-container-row">
         <div
           class="border-icon border-icon-bottom"
-          :class="{ active: direction === 'Bottom' }"
+          :class="{ active: direction === 'Bottom', configured: isConfigured('Bottom') }"
           @click="selectDirection('Bottom')"
         ></div>
       </div>
@@ -98,7 +102,7 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     model: FormValue;
     lastValues?: FormValue;
@@ -109,6 +113,11 @@ withDefaults(
   {},
 );
 
+const hasValue = (value: unknown) => value !== undefined && value !== null && value !== '';
+
+const isConfigured = (d: string) =>
+  ['Width', 'Color', 'Style'].some((key) => hasValue(props.model?.[`border${d}${key}`]));
+
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   eventData.changeRecords?.forEach((record) => {
     emit('change', record.value, {
diff --git a/packages/editor/src/theme/style-setter/border.scss b/packages/editor/src/theme/style-setter/border.scss
index bf39f4e3..eb52c5c3 100644
--- a/packages/editor/src/theme/style-setter/border.scss
+++ b/packages/editor/src/theme/style-setter/border.scss
@@ -24,9 +24,12 @@
       & + .border-icon {
         margin-left: 8px;
       }
+      &.configured {
+        border-color: var(--el-color-success, var(--td-success-color, #2ba471));
+      }
       &.active {
         border-width: 1px;
-        border-color: var(--el-color-primary);
+        border-color: var(--el-color-primary, var(--td-brand-color, #0052d9));
       }
       &.border-icon-top {
         border-top-width: 2px;