fix: 左侧菜单字体与图标间距对齐 React 标准

- brand-tokens.css: --ant-font-family 改为 theme.json 同款字体栈(Roboto/Oxygen/Ubuntu...)
- menu.less: 菜单项/子菜单标题 icon 与文字间距设为 8px(折叠态取消, popup 同步)

diff --git a/src-vue/components/menu.less b/src-vue/components/menu.less
index ef2305851b543edef7852e54839d908fb5ccedbf..f74b68a428e9249071e26536170483feed2e592b 100644 (file)
--- a/src-vue/components/menu.less
+++ b/src-vue/components/menu.less
@@ -16,6 +16,12 @@
   --el-menu-active-color: var(--ant-color-primary);
   border-right: 0;
 
+  // icon 与文字间距对齐 antd 菜单实测值（8px）
+  .el-menu-item > .sb-svg-icon,
+  .el-sub-menu__title > .sb-svg-icon {
+    margin-right: 8px;
+  }
+
   .el-menu-item {
     margin: 0;
     width: 100%;
@@ -81,6 +87,11 @@
   background: #E1E1E1;
   border-right: 1px solid #C8C8C8;
 
+  // 折叠态图标居中，取消间距
+  .sb-svg-icon {
+    margin-right: 0;
+  }
+
   .el-menu-item {
     margin-top: 4px;
 
@@ -125,6 +136,11 @@
     padding-left: 0;
     min-width: 0;
 
+    .el-menu-item > .sb-svg-icon,
+    .el-sub-menu__title > .sb-svg-icon {
+      margin-right: 8px;
+    }
+
     .el-menu-item {
       width: unset;
       margin-inline: 0;

diff --git a/src-vue/styles/brand-tokens.css b/src-vue/styles/brand-tokens.css
index 67684ae91bdd053cd93be3b59d2a8950aebe8c56..660a77d603b07b395292925e4d94f01a1ec725f9 100644 (file)
--- a/src-vue/styles/brand-tokens.css
+++ b/src-vue/styles/brand-tokens.css
@@ -64,7 +64,7 @@
   --ant-line-height: 1.5;
   --ant-line-height-sm: 1.4;
   --ant-line-height-heading-4: 1.4;
-  --ant-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
+  --ant-font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   --ant-font-weight-strong: 600;
   --ant-table-border-color: #f0f0f0;
   --ant-table-header-color: #323233;