XiaChangSong/BPOS-TMP-REPO
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

三面拆分②:三章标签与入口路由,/gov 深链整链改写

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
This commit is contained in:
ChaiHao
2026-07-27 20:53:43 +08:00
co-authored by Claude Fable 5
parent e578b5bc34
commit cbae9b1284
2 changed files with 62 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/tab-identity.ts
+35 -12
View File
@@ -1,9 +1,10 @@
/**
* 网页标签的名与章 —— 两台面各有一套,多标签并开时一眼可辨。
* 网页标签的名与章 —— 三面各有一套,多标签并开时一眼可辨「我在定义、在监控、还是在干活」。
*
* 章随台面的**皮肤基调**走,不另造视觉:
* 工作台 = 品牌蓝渐变圆角方 + 白色机器人(与左轨品牌章、登录页方章同源);
* 治理中心 = 深色底(治理台顶栏的那种深)+ 盾形勾(管的是规则与放行)。
* 工作台 = 品牌蓝渐变圆角方 + 白色机器人(与左轨品牌章、登录页方章同源);
* 设计中心 = 深靛底 + 路网(定义企业的流转 —— 与流程包区的靛色同源);
* 运营中心 = 深色底 + 仪表(看企业今天跑得怎样 —— 驾驶舱的那支指针)。
* SVG 以 data: URI 内联 —— 不添静态资产,构建零配置。
*/
@@ -24,17 +25,39 @@ const DESK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
</g>
</svg>`;
const GOV_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect width="32" height="32" rx="8" fill="#141b2e"/>
<g transform="translate(4,4)" fill="none" stroke="#8fb0ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>
<path d="m9 12 2 2 4-4" stroke="#fff"/>
/** 设计中心:深靛底 + 路网 —— 线接着点,正是「连线即映射」 */
const DESIGN_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect width="32" height="32" rx="8" fill="#232b6e"/>
<g transform="translate(4,4)" fill="none" stroke="#9db1ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" stroke="#fff"/>
<circle cx="6" cy="19" r="2.6" fill="#232b6e"/>
<circle cx="18" cy="5" r="2.6" fill="#232b6e"/>
</g>
</svg>`;
/** 进哪台就挂哪套 —— 登录页也按 URL 归台,标签在登录前就叫对名字 */
export function applyTabIdentity(isGovernance: boolean): void {
document.title = isGovernance ? 'JCAI 治理中心' : 'JCAI 工作台';
/** 运营中心:深色底 + 仪表 —— 指针指着「今天跑得怎样」 */
const OPS_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect width="32" height="32" rx="8" fill="#141b2e"/>
<g transform="translate(4,5)" fill="none" stroke="#5fdcb4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3.34 18a10 10 0 1 1 17.32 0"/>
<path d="m12 13 4.2-4.2" stroke="#fff"/>
<circle cx="12" cy="18" r="1.6" fill="#fff" stroke="none"/>
</g>
</svg>`;
/** 三面各一套章名 —— `desk` 是工作台,另两个是治理的两个台面 */
export type TabSurface = 'desk' | 'design' | 'ops';
const IDENTITY: Readonly<Record<TabSurface, { title: string; icon: string }>> = {
desk: { title: 'JCAI 工作台', icon: DESK_ICON },
design: { title: 'JCAI 设计中心', icon: DESIGN_ICON },
ops: { title: 'JCAI 运营中心', icon: OPS_ICON },
};
/** 进哪面就挂哪套 —— 登录页也按 URL 归面,标签在登录前就叫对名字 */
export function applyTabIdentity(surface: TabSurface): void {
const { title, icon } = IDENTITY[surface];
document.title = title;
let link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
if (link === null) {
@@ -43,5 +66,5 @@ export function applyTabIdentity(isGovernance: boolean): void {
document.head.appendChild(link);
}
link.type = 'image/svg+xml';
link.href = 'data:image/svg+xml;utf8,' + encodeURIComponent(isGovernance ? GOV_ICON : DESK_ICON);
link.href = 'data:image/svg+xml;utf8,' + encodeURIComponent(icon);
}