feat(layout): 菜单图标兜底 icon-list(平台未配置时恒有图标保缩进一致)+ 面包屑首页图标回归行内基线流(-0.125em 光学居中,修 inline-flex 首项无字图标基线把整盒顶高 4px 的错位)+ 通道版本戳跟版
This commit is contained in:
+11
-12
@@ -161,11 +161,9 @@ const childChange = (index: number) => {
|
|||||||
|
|
||||||
/** 菜单图标:读取用户中心模块管理配置的 YschIcons 图标名(GetUserMod 的 icon 字段,如 list → icon-list)。
|
/** 菜单图标:读取用户中心模块管理配置的 YschIcons 图标名(GetUserMod 的 icon 字段,如 list → icon-list)。
|
||||||
* icons.css(ysch-icons 掩码版,基类 iconfont,类名 icon-<名称>)现由中央静态通道下发;
|
* icons.css(ysch-icons 掩码版,基类 iconfont,类名 icon-<名称>)现由中央静态通道下发;
|
||||||
* 平台约定留空不下发图标,此时返回空串由模板 v-if 不渲染 */
|
* 平台未配置图标时统一兜底 icon-list(2026-10-09 定稿:菜单项恒有图标,保整列缩进/行高一致) */
|
||||||
const getMenuIcon = (item?: any): string => {
|
const getMenuIcon = (item?: any): string =>
|
||||||
const icon = String(item?.icon || "").trim();
|
`icon-${String(item?.icon || "").trim() || "list"}`;
|
||||||
return icon ? `icon-${icon}` : "";
|
|
||||||
};
|
|
||||||
|
|
||||||
function linkHomePage() {
|
function linkHomePage() {
|
||||||
if (baseHost.value) {
|
if (baseHost.value) {
|
||||||
@@ -206,7 +204,7 @@ function linkHomePage() {
|
|||||||
<li>
|
<li>
|
||||||
<a href="javascript:;" @click="childChange(index)">
|
<a href="javascript:;" @click="childChange(index)">
|
||||||
<i :class="item.childState ? 'arrow-down' : 'arrow-up'"></i>
|
<i :class="item.childState ? 'arrow-down' : 'arrow-up'"></i>
|
||||||
<i v-if="getMenuIcon(item)" :class="['iconfont', getMenuIcon(item)]"></i>
|
<i :class="['iconfont', getMenuIcon(item)]"></i>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@@ -226,7 +224,7 @@ function linkHomePage() {
|
|||||||
</template>
|
</template>
|
||||||
<li v-else :class="pageOf(item) == currPath ? 'active' : ''">
|
<li v-else :class="pageOf(item) == currPath ? 'active' : ''">
|
||||||
<a href="javascript:;" @click="linkMenu(item)">
|
<a href="javascript:;" @click="linkMenu(item)">
|
||||||
<i v-if="getMenuIcon(item)" :class="['iconfont', getMenuIcon(item)]"></i>
|
<i :class="['iconfont', getMenuIcon(item)]"></i>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@@ -293,13 +291,14 @@ function linkHomePage() {
|
|||||||
/* 面包屑「首页」垂直居中:骨架遗留的 .path-nav .icon-category{position:relative;top:1px}
|
/* 面包屑「首页」垂直居中:骨架遗留的 .path-nav .icon-category{position:relative;top:1px}
|
||||||
是给老 iconfont 字体字形做的基线补偿,换成 ysch mask 的 1em 方块后反而把图标顶偏;
|
是给老 iconfont 字体字形做的基线补偿,换成 ysch mask 的 1em 方块后反而把图标顶偏;
|
||||||
这里用 inline-flex 真居中并关掉该补偿(不动通道产物,覆盖收在本组件内) */
|
这里用 inline-flex 真居中并关掉该补偿(不动通道产物,覆盖收在本组件内) */
|
||||||
.crumb-home {
|
/* 面包屑「首页」与后续级目的文字对齐(2026-10-09 定稿):此前 .crumb-home 用 inline-flex,
|
||||||
display: inline-flex;
|
行内级盒的基线取首项——16px 无字图标(其基线=方块底缘),整盒被顶高约 4px,首页文字
|
||||||
align-items: center;
|
比相邻级目高。改回普通行内流:图标(.iconfont 基类 inline-block,基线=底缘)以 -0.125em
|
||||||
gap: 4px;
|
基线偏移做光学居中,文字与相邻级目共用同一行盒基线,天然对齐 */
|
||||||
}
|
|
||||||
.crumb-home .iconfont {
|
.crumb-home .iconfont {
|
||||||
position: static;
|
position: static;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
margin-right: 4px;
|
||||||
|
vertical-align: -0.125em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
+1
-1
@@ -1,5 +1,5 @@
|
|||||||
/**
|
/**
|
||||||
* 本文件由 YschTheme scripts/gen-theme.mjs 从 assets-src/pc/theme-core.js 生成(版本 20261009-1038-1688389),勿手改。
|
* 本文件由 YschTheme scripts/gen-theme.mjs 从 assets-src/pc/theme-core.js 生成(版本 20261009-1655-488a3c3),勿手改。
|
||||||
* 分发方式:YschTheme `npm run sync` 拷进各端 src/utils/theme.ts(与 ThemeSwitcher.vue 配套,MD5 对齐报告)。
|
* 分发方式:YschTheme `npm run sync` 拷进各端 src/utils/theme.ts(与 ThemeSwitcher.vue 配套,MD5 对齐报告)。
|
||||||
* 运行时档位类名由 /static/js/yh-theme-init.js 在 <head> 内先行挂好,本模块只负责读写与切换。
|
* 运行时档位类名由 /static/js/yh-theme-init.js 在 <head> 内先行挂好,本模块只负责读写与切换。
|
||||||
*/
|
*/
|
||||||
|
|||||||
Reference in New Issue
Block a user