From f821ee2c9d6d26cbdd4a8e0d65ecb5f48c9eac30 Mon Sep 17 00:00:00 2001
From: Hermes CI Fix <hermes-ci@sxbh.ltd>
Date: Tue, 14 Jul 2026 16:17:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=86=E8=A7=92=E5=88=87=E6=8D=A2el-r?=
 =?UTF-8?q?adio-group=E6=8D=A2=E5=8E=9F=E7=94=9Fradio=EF=BC=88=E5=90=8C?=
 =?UTF-8?q?=E6=A0=B9=E5=9B=A0=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/MapCanvas.vue | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/MapCanvas.vue b/frontend/src/views/MapCanvas.vue
index 9827b9a7..7c768ea9 100644
--- a/frontend/src/views/MapCanvas.vue
+++ b/frontend/src/views/MapCanvas.vue
@@ -15,11 +15,15 @@
           <el-button size="small" @click="zoomReset">100%</el-button>
           <el-button size="small" @click="zoomFit">适合</el-button>
         </div>
-        <!-- 视角切换 -->
-        <el-radio-group v-model="viewDirection" size="small" style="margin-right:8px;">
-          <el-radio-button value="cascade">📐 级联</el-radio-button>
-          <el-radio-button value="causal">🔗 因果</el-radio-button>
-        </el-radio-group>
+        <!-- 视角切换（原生radio） -->
+        <span class="view-toggle">
+          <label class="vt-label" :class="{ active: viewDirection === 'cascade' }">
+            <input type="radio" v-model="viewDirection" value="cascade" /> 📐 级联
+          </label>
+          <label class="vt-label" :class="{ active: viewDirection === 'causal' }">
+            <input type="radio" v-model="viewDirection" value="causal" /> 🔗 因果
+          </label>
+        </span>
         <el-button type="primary" @click="saveCanvas">保存</el-button>
         <el-button type="success" @click="publishMap" v-if="currentMap?.status === 'draft'">发布</el-button>
         <el-button @click="showVersions = true; loadVersions()">版本历史</el-button>
@@ -1071,4 +1075,10 @@ onUnmounted(() => {
 .mc-icon-btn.active { border-color:#409eff; background:#ecf5ff; }
 .mc-radio-label { display:inline-flex; align-items:center; gap:4px; margin-right:16px; font-size:13px; color:#666; cursor:pointer; }
 .mc-radio-label input { margin:0; }
+.view-toggle { display:inline-flex; align-items:center; gap:0; margin-right:8px; border:1px solid #dcdfe6; border-radius:4px; overflow:hidden; }
+.vt-label { padding:5px 12px; font-size:12px; cursor:pointer; color:#606266; background:#fff; transition:all .15s; display:inline-flex; align-items:center; gap:4px; }
+.vt-label input { display:none; }
+.vt-label.active { background:#409eff; color:#fff; border-color:#409eff; }
+.vt-label:not(:last-child) { border-right:1px solid #dcdfe6; }
+.vt-label:hover:not(.active) { color:#409eff; }
 </style>