Files
svc-hall-front/src/App.vue
T
chenxing 24c980d1dc
build / build (push) Successful in 2m50s
refactor(spec): 按《云海子应用前端接入规范》v1.10 全量对齐(回收旧皮肤+高度实测模型+工具条/操作列收口)
回收(§2.2):删本地旧皮肤 layout.css/icons.css/icons.css.bak 及 main.ts 两处 import——消除「接了通道却被本地旧皮肤同优先级盖住」的根因;layout.vue 同批三改:删顶栏房子图标钮、面包屑改 -0.125em 基线流 + icon-category→icon-shouye、getMenuIcon 改读 item.icon 兜底 icon-list。

表格高度(§4.3/§4.4):引入 useElementHeight.ts(与 UserBase 逐字节一致);TablePageAlovaNew 换三端同构版(.table-region + 实测高);4 个列表页清 useTableHeight/ResizeObserver(document.body)/:tableHeight,根节点补 yh-fill;无分页两页不套组件,各包 .table-region + 独立实测。

工具条/tab/操作列(§4.1/§4.2/§5/§8.1):去 size="large"×5;ServiceFormManage 工具条右端说明文案改表格上方常驻 Alert(type=info/show-icon/无 closable);ServiceItemList「同步部门名」归左;ServiceDictManage 去 Tabs type="card" 改 tabs-wrapper yh-fill > main-container yh-tabs-card > Tabs.tabs-panel + 双 tab-body;引入 tableActions.ts,4 页迁 actionColumn({mode:"icon"}),发布/下架等互斥动作改 disabledWhen 置灰保位;h("Tag") 改真组件 ×5。

收尾(P2):view-ui-plus ^1.3.24(lock/node_modules 同版);删死代码 TablePage.vue/TablePageAlova.vue/TreeNode/index copy.vue;main.scss 去 bscroll import 并删文件。未动 service/**、public/libs/**(ztree 仍在用)与规范文档。
2026-10-13 11:37:35 +08:00

111 lines
3.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import layout from "./components/layout.vue";
import { useRouter } from "vue-router";
import config from "@/assets/config/host.config";
import { baseApi } from "@/api/module/base";
import { resolveMenuPage } from "@/utils/menuRoute";
import { Message } from "view-ui-plus";
const router = useRouter();
const isLogin = ref(false);
const layoutData = reactive({
appName: "办事大厅",
baseHost: config.baseHost,
ssoHost: config.ssoHost,
appList: [] as any[],
userInfo: null as any,
modList: [] as any[],
isAlone: false,
});
onMounted(async () => {
try {
// 1. 获取当前用户信息
const user: any = await baseApi.getUserInfo().send();
const { id, name, profilePicture } = user || {};
// 2. 获取当前用户已授权的模块列表
const modList: any[] = await baseApi.getUserMod().send();
layoutData.userInfo = { id, name: name || "管理员", avatar: profilePicture || "" };
layoutData.modList = modList || [];
// 开发环境打印平台原始模块配置,便于排查菜单路径解析问题
if (import.meta.env.DEV) {
console.table(
(modList || []).map((m: any) => ({
name: m.name,
id: m.id,
modId: m.modId,
path: m.page,
}))
);
}
// 有子菜单时不算「单模块独占」模式
const hasChildren = (modList || []).some((m: any) => m.children && m.children.length > 0);
layoutData.isAlone = (modList || []).length <= 1 && !hasChildren;
isLogin.value = true;
// 登录后跳转第一个可用模块("/" 本身即已收到页,无需跳转)
if (router.currentRoute.value.path === "/") {
const firstModule = (modList || [])[0];
const firstRaw = firstModule?.children?.length
? firstModule.children[0]
: firstModule;
const first = resolveMenuPage(firstRaw?.page, firstRaw?.modId ?? firstRaw?.id, firstRaw?.name);
if (!first.external && first.path && first.path !== "/") {
router.replace(first.path);
}
}
} catch (error: any) {
console.error("加载用户信息失败", error);
if (error?.message !== "redirect") {
Message.error("载入用户信息失败,请检查后端服务是否正常!");
}
// 降级:使用默认值("/" 即已收到页,无需跳转)
layoutData.userInfo = { name: "管理员", avatar: "" };
layoutData.modList = [];
layoutData.isAlone = true;
isLogin.value = true;
}
});
</script>
<template>
<layout v-if="isLogin" :layoutData="layoutData" />
<div v-if="isLogin" class="base-wrap-main" :class="{ 'alone-page': layoutData.isAlone }">
<div class="main-wrapper">
<!-- key=fullPath:详情页仅 query 变化(id/serid)时强制重渲染,避免显示上一条数据 -->
<router-view :key="$route.fullPath" />
</div>
</div>
</template>
<style lang="scss">
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#app {
height: 100%;
}
/* 页面级滚动容器:main-wrapper 只有 min-height 时内容超一屏会被 body 的
overflow:hidden 直接裁掉(如发通知页),无任何滚动条。定高 + 纵向滚动,
列表页表格高度由 useElementHeight 实测 .table-region 得出,不依赖此处滚动 */
.base-wrap-main .main-wrapper {
height: 100%;
overflow-y: auto;
}
/* 表格操作列(operatingHandle 渲染的 Tooltip 包裹层)横排且随单元格居中 */
.ivu-table-cell > .ivu-tooltip {
display: inline-block;
vertical-align: middle;
margin: 0 2px;
}
</style>