From 4ef373072be59c8b7f1609e760515629f07abc0c Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Thu, 28 Aug 2025 17:08:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9OAnchor=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=EF=BC=8C=E5=A2=9E=E5=8A=A0=E6=96=87=E6=9C=AC=E7=BC=A9?=
 =?UTF-8?q?=E8=BF=9B=E5=93=8D=E5=BA=94=EF=BC=8C=E4=BC=98=E5=8C=96=E9=94=9A?=
 =?UTF-8?q?=E7=82=B9=E5=86=85=E8=BE=B9=E8=B7=9D=E8=AE=A1=E7=AE=97=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/anchor/OAnchorItem.vue     | 19 ++++++++-----------
 .../opendesign/src/anchor/style/index.scss    |  2 +-
 .../opendesign/src/anchor/style/media.scss    |  3 ++-
 .../opendesign/src/anchor/style/style.scss    |  6 +++++-
 packages/opendesign/src/anchor/style/var.scss |  4 +++-
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/opendesign/src/anchor/OAnchorItem.vue b/packages/opendesign/src/anchor/OAnchorItem.vue
index 2e91f791..4d153688 100644
--- a/packages/opendesign/src/anchor/OAnchorItem.vue
+++ b/packages/opendesign/src/anchor/OAnchorItem.vue
@@ -41,16 +41,6 @@ watch(
 
 const depth = anchorItemInjection ? anchorItemInjection.depth + 1 : 1;
 
-const style = computed(() => {
-  if (depth === 1) {
-    return {};
-  } else {
-    return {
-      paddingLeft: `${12 * (depth - 1) + 8}px`,
-    };
-  }
-});
-
 provide(anchorItemInjectKey, { depth });
 
 onMounted(() => {
@@ -64,7 +54,14 @@ onUnmounted(() => {
 
 <template>
   <div class="o-anchor-item">
-    <a :href="props.href" :target="props.target" class="o-anchor-item-link" :class="{ 'is-active': isActive }" :style="style" @click="onClick">
+    <a
+      :href="props.href"
+      :target="props.target"
+      class="o-anchor-item-link"
+      :class="{ 'is-active': isActive }"
+      :style="{ '--anchor-item-depth': depth - 1 }"
+      @click="onClick"
+    >
       <slot name="title">{{ props.title }}</slot>
     </a>
     <slot></slot>
diff --git a/packages/opendesign/src/anchor/style/index.scss b/packages/opendesign/src/anchor/style/index.scss
index e6b6f59b..8bb47c58 100644
--- a/packages/opendesign/src/anchor/style/index.scss
+++ b/packages/opendesign/src/anchor/style/index.scss
@@ -1,3 +1,3 @@
 @use './style.scss' as *;
-@use './media.scss' as *;
 @use './var.scss' as *;
+@use './media.scss' as *;
diff --git a/packages/opendesign/src/anchor/style/media.scss b/packages/opendesign/src/anchor/style/media.scss
index f415089a..1f1e6278 100644
--- a/packages/opendesign/src/anchor/style/media.scss
+++ b/packages/opendesign/src/anchor/style/media.scss
@@ -1,8 +1,9 @@
 @use '../../_styles/mixin.scss' as *;
 
-@include respond-to('<=laptop') {
+@include respond-to('<=pc_s') {
   .o-anchor-item {
     --anchor-item-link-text-size: var(--o-font_size-tip1);
     --anchor-item-link-text-height: var(--o-line_height-tip1);
+    --anchor-item-text-indent: 8px;
   }
 }
diff --git a/packages/opendesign/src/anchor/style/style.scss b/packages/opendesign/src/anchor/style/style.scss
index d90501d7..5a864bfd 100644
--- a/packages/opendesign/src/anchor/style/style.scss
+++ b/packages/opendesign/src/anchor/style/style.scss
@@ -47,7 +47,11 @@
   font-size: var(--anchor-item-link-text-size);
   line-height: var(--anchor-item-link-text-height);
   background-color: var(--anchor-item-link-bg-color);
-  padding: var(--anchor-item-link-padding);
+  padding: 
+    var(--anchor-item-link-padding-v)
+    var(--anchor-item-link-padding-h)
+    var(--anchor-item-link-padding-v)
+    calc(var(--anchor-item-text-indent) * var(--anchor-item-depth) + var(--anchor-item-link-padding-h));
   border-radius: var(--anchor-item-link-radius);
   transition: background-color var(--o-duration-s) var(--o-easing-standard);
 
diff --git a/packages/opendesign/src/anchor/style/var.scss b/packages/opendesign/src/anchor/style/var.scss
index 8d13c1f8..4c9268cd 100644
--- a/packages/opendesign/src/anchor/style/var.scss
+++ b/packages/opendesign/src/anchor/style/var.scss
@@ -20,8 +20,10 @@
   --anchor-item-link-bg-color-hover: var(--o-color-control2-light);
   --anchor-item-link-bg-color-active: var(--o-color-control3-light);
 
-  --anchor-item-link-padding: 7px 8px;
+  --anchor-item-link-padding-h: 8px;
+  --anchor-item-link-padding-v: 7px;
   --anchor-item-link-radius: var(--o-radius_control-s);
 
   --anchor-item-link-gap: 2px;
+  --anchor-item-text-indent: 12px;
 }
-- 
Gitee