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>