@axewo/fin-micro 2.0.0 → 2.0.1

package/dist/types/layout/StandaloneShell.vue.d.ts

@@ -0,0 +1,40 @@
+import { ShellBrand, ShellMenuItem } from './types';
+/** 独立外壳仅展示路由适配结果；不创建 router、认证或 bridge，也不自行判断嵌入环境。 */
+type __VLS_Props = {
+    title: string;
+    menus: readonly ShellMenuItem[];
+    activeMenu: string;
+    brand?: ShellBrand;
+};
+/** 导航由项目处理并捕获失败；重置选中项，以真实路由而非点击结果为准。 */
+declare function navigate(path: string): Promise<void>;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        brand?(_: {
+            brand: ShellBrand;
+        }): any;
+        'header-actions'?(_: {}): any;
+        sidebar?(_: {
+            menus: readonly ShellMenuItem[];
+            navigate: typeof navigate;
+        }): any;
+        default?(_: {}): any;
+        'workspace-overlay'?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    navigate: (path: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onNavigate?: ((path: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/layout/index.d.ts

@@ -0,0 +1,5 @@
+export { default as HostShell } from './HostShell.vue';
+export { default as StandaloneShell } from './StandaloneShell.vue';
+export type { ShellBrand, ShellMenuItem, HostShellProps, HostShellActions, HostShellSlots } from './types';
+/** 公共外壳模板协议，用于发布前避免新模板与旧 dist 混装。 */
+export declare const layoutProtocol = 1;

package/dist/types/layout/types.d.ts

@@ -0,0 +1,65 @@
+import { Component, VNode } from 'vue';
+import { MicroApp, MicroMenu, MicroTab, NavigationOperation } from '../sdk';
+/** 公共外壳品牌配置；只改变展示，不注册应用、路由或认证能力。 */
+export interface ShellBrand {
+    /** 产品名称。 */
+    title?: string;
+    /** 左上角短标识；复杂 Logo 请使用 brand 插槽。 */
+    mark?: string;
+    /** 面包屑前缀。 */
+    workspaceTitle?: string;
+}
+/** 独立应用菜单；由项目本地 router meta 转换，不是宿主权限凭据。 */
+export interface ShellMenuItem {
+    /** 已解析的应用内完整路径，仅作为导航事件参数。 */
+    path: string;
+    title: string;
+    icon?: Component;
+    children: readonly ShellMenuItem[];
+}
+/** HostShell 输入全部来自项目唯一的核心状态；外壳不创建 host、router 或 session。 */
+export interface HostShellProps {
+    apps: readonly MicroApp[];
+    tabs: readonly MicroTab[];
+    activeKey?: string;
+    userName: string;
+    pending?: boolean;
+    notice?: string;
+    brand?: ShellBrand;
+    /** 可选受控折叠状态；未传入时仅在当前组件内维护展示状态。 */
+    collapsed?: boolean;
+    /** 项目固定页签规则；仅控制按钮，真正的操作约束仍必须由核心适配器实施。 */
+    isFixedTab?: (tab: MicroTab) => boolean;
+}
+/** 所有插槽动作只发出事件；调用方必须继续通过原有授权和异步离页事务处理。 */
+export interface HostShellActions {
+    open: (appId: string, menu: MicroMenu) => void;
+    operate: (operation: NavigationOperation) => void;
+    logout: () => void;
+    profile: () => void;
+    toggleCollapsed: () => void;
+}
+/** 替换整个区域表示自行维护该区域；未覆盖区域仍使用库内默认组件。 */
+export interface HostShellSlots {
+    default: (scope: {
+        active?: MicroTab;
+    }) => VNode[];
+    brand?: (scope: {
+        brand: ShellBrand;
+    }) => VNode[];
+    'header-actions'?: (scope: HostShellActions) => VNode[];
+    header?: (scope: HostShellActions & {
+        active?: MicroTab;
+        collapsed: boolean;
+        pending: boolean;
+    }) => VNode[];
+    sidebar?: (scope: HostShellActions & {
+        active?: MicroTab;
+        collapsed: boolean;
+        pending: boolean;
+    }) => VNode[];
+    tabs?: (scope: HostShellActions & {
+        active?: MicroTab;
+        pending: boolean;
+    }) => VNode[];
+}

package/dist/types/sdk/index.d.ts

@@ -5,6 +5,8 @@ export interface MicroMenu {
     menuId: string;
     /** 菜单展示名称，同时作为入口页签的默认标题。 */
     name: string;
+    /** 可选展示图标标识（如 HomeFilled、User、Folder、List）；仅布局层解析，不接收组件、HTML 或 URL。 */
+    icon?: string;
     /** 子菜单；分组不允许同时配置 target。 */
     children?: readonly MicroMenu[];
     /** 入口导航信息；tabId 仍须在整个宿主唯一。 */

package/dist/types/watermark/FinWatermark.vue.d.ts

@@ -0,0 +1,16 @@
+import { WatermarkConfig } from './config';
+/**
+ * 仅叠加水印，不包装业务 DOM。直接父容器必须是 position:relative 的稳定视口。
+ * 防篡改只提高常见删除/样式修改成本，不是安全边界；祖先隐藏或脚本被停用无法保证恢复。
+ */
+type __VLS_Props = {
+    config?: WatermarkConfig;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    error: (error: Error) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: ((error: Error) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    layer: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/types/watermark/config.d.ts

@@ -0,0 +1,36 @@
+/** 水印配置；接口接入方应只传业务文字，不传 Token 等敏感凭据。 */
+export interface WatermarkConfig {
+    /** 是否绘制；默认开启，禁用会清理观察器和检查定时器。 */
+    enabled?: boolean;
+    /** 自定义文字或多行文字；最多四行，每行最多 120 字。 */
+    text?: string | readonly string[];
+    /** Canvas 文字颜色；默认 #64748b。 */
+    color?: string;
+    /** 文字透明度，范围 0～1。 */
+    opacity?: number;
+    /** 顺时针旋转角度，范围 -180～180。 */
+    rotate?: number;
+    /** 字号，单位 px，范围 10～64。 */
+    fontSize?: number;
+    /** Canvas 字体族；不接受 CSS 声明串。 */
+    fontFamily?: string;
+    /** 水平、垂直文字间距，单位 px，范围 16～600；越小越密。 */
+    gap?: readonly [number, number];
+}
+/** 标准化后的不可变快照，不跨组件共享可变配置。 */
+export interface NormalizedWatermarkConfig {
+    enabled: boolean;
+    text: readonly string[];
+    color: string;
+    opacity: number;
+    rotate: number;
+    fontSize: number;
+    fontFamily: string;
+    gap: readonly [number, number];
+}
+/**
+ * 将前端或接口配置转换为有界快照；非法数字使用默认值，超范围数字截断。
+ * @param input 可选的水印配置；运行时 null/非法对象也安全降级。
+ * @returns 不可变配置，文字/间距复制后冻结；不操作 DOM，不抛校验异常。
+ */
+export declare function normalizeWatermarkConfig(input?: WatermarkConfig | null): NormalizedWatermarkConfig;

package/dist/types/watermark/index.d.ts

@@ -0,0 +1,4 @@
+/** 可选水印子路径；核心入口不加载 Canvas、Vue 展示组件或观察器。 */
+export { default as FinWatermark } from './FinWatermark.vue';
+export { normalizeWatermarkConfig } from './config';
+export type { WatermarkConfig, NormalizedWatermarkConfig } from './config';

package/dist/watermark.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("vue");function y(s,e,u,m){return typeof s=="number"&&Number.isFinite(s)?Math.min(m,Math.max(u,s)):e}function F(s){var r,i;const e=s&&typeof s=="object"?s:{},m=(typeof e.text=="string"?e.text.split(`
+`):Array.isArray(e.text)?e.text:["内部资料"]).filter(l=>typeof l=="string").slice(0,4).map(l=>l.slice(0,120)),c=typeof e.fontFamily=="string"&&e.fontFamily.length<=160&&!/[;{}\\\n\r]/.test(e.fontFamily)?e.fontFamily:"sans-serif";return Object.freeze({enabled:e.enabled!==!1,text:Object.freeze(m),color:typeof e.color=="string"&&e.color.length<=80?e.color:"#64748b",opacity:y(e.opacity,.12,0,1),rotate:y(e.rotate,-22,-180,180),fontSize:y(e.fontSize,16,10,64),fontFamily:c,gap:Object.freeze([y((r=e.gap)==null?void 0:r[0],100,16,600),y((i=e.gap)==null?void 0:i[1],80,16,600)])})}const D=f.defineComponent({__name:"FinWatermark",props:{config:{}},emits:["error"],setup(s,{emit:e}){const u=s,m=e,c=f.ref();let r=null,i,l,g="",d=!1,M=!1;function A(){i==null||i.disconnect(),i=void 0,l!==void 0&&clearInterval(l),l=void 0}function W(t){var O;const a=F(u.config),o=t.ownerDocument.createElement("canvas"),n=o.getContext("2d");if(!n)throw new Error("当前环境不支持 Canvas 2D，无法绘制水印。");const b=`${a.fontSize}px ${a.fontFamily}`;n.font=b;const p=Math.min(1e3,Math.max(1,...a.text.map(T=>n.measureText(T).width))),x=a.fontSize*1.5,w=Math.max(1,a.text.length)*x,h=a.rotate*Math.PI/180,z=Math.ceil(Math.abs(p*Math.cos(h))+Math.abs(w*Math.sin(h))+a.gap[0]),S=Math.ceil(Math.abs(p*Math.sin(h))+Math.abs(w*Math.cos(h))+a.gap[1]),v=Math.min(2,Math.max(1,((O=t.ownerDocument.defaultView)==null?void 0:O.devicePixelRatio)??1));o.width=Math.ceil(z*v),o.height=Math.ceil(S*v),n.scale(v,v),n.translate(z/2,S/2),n.rotate(h),n.font=b,n.fillStyle="#64748b",n.fillStyle=a.color,n.globalAlpha=a.opacity,n.textAlign="center",n.textBaseline="middle",a.text.forEach((T,j)=>n.fillText(T,0,(j-(a.text.length-1)/2)*x,1e3));const E=o.toDataURL("image/png");if(!E.startsWith("data:image/png"))throw new Error("Canvas 未生成有效水印图像。");return{url:E,width:z,height:S}}function _(t){i==null||i.observe(t,{attributes:!0}),r&&(i==null||i.observe(r,{childList:!0}))}function k(){var a;const t=c.value;if(!(!d||M||!t||!r)){M=!0,i==null||i.disconnect();try{t.parentNode!==r&&r.appendChild(t),t.style.cssText!==g&&(t.style.cssText=g),t.className&&t.removeAttribute("class"),t.hasAttribute("hidden")&&t.removeAttribute("hidden"),t.setAttribute("aria-hidden","true");const o=(a=t.ownerDocument.defaultView)==null?void 0:a.getComputedStyle(t);o&&(o.display==="none"||o.visibility!=="visible"||Number(o.opacity)===0)&&(t.style.cssText=g)}finally{M=!1,d&&_(t)}}}function C(){var o;A();const t=c.value;if(!t||!d)return;t.style.cssText="display:none !important;";const a=F(u.config);if(!(!a.enabled||!a.text.some(Boolean)))try{const n=W(t),b={position:"absolute",inset:"0",width:"100%",height:"100%",margin:"0",padding:"0",border:"0",display:"block",visibility:"visible",opacity:"1","pointer-events":"none","z-index":"2000",transform:"none",filter:"none","clip-path":"none","background-color":"transparent","background-image":`url("${n.url}")`,"background-size":`${n.width}px ${n.height}px`,"background-repeat":"repeat","background-position":"0 0","box-sizing":"border-box"};t.style.cssText="";for(const[x,w]of Object.entries(b))t.style.setProperty(x,w,"important");g=t.style.cssText;const p=(o=t.ownerDocument.defaultView)==null?void 0:o.MutationObserver;p&&(i=new p(k)),k(),l=setInterval(k,1e3)}catch(n){t.style.cssText="display:none !important;",m("error",n instanceof Error?n:new Error("水印绘制失败。")),console.warn("[fin-micro/watermark] 水印绘制失败，本次检查已停止。",n)}}return f.onMounted(()=>{var t;d=!0,r=((t=c.value)==null?void 0:t.parentElement)??null,C()}),f.watch(()=>u.config,C,{deep:!0}),f.onBeforeUnmount(()=>{var t;d=!1,A(),(t=c.value)==null||t.remove(),r=null}),(t,a)=>(f.openBlock(),f.createElementBlock("div",{ref_key:"layer",ref:c,"aria-hidden":"true","data-fin-watermark":""},null,512))}});exports.FinWatermark=D;exports.normalizeWatermarkConfig=F;

package/dist/watermark.mjs

@@ -0,0 +1,119 @@
+import { defineComponent as W, ref as j, onMounted as B, watch as $, onBeforeUnmount as N, openBlock as I, createElementBlock as P } from "vue";
+function h(s, e, f, m) {
+  return typeof s == "number" && Number.isFinite(s) ? Math.min(m, Math.max(f, s)) : e;
+}
+function C(s) {
+  var r, o;
+  const e = s && typeof s == "object" ? s : {}, m = (typeof e.text == "string" ? e.text.split(`
+`) : Array.isArray(e.text) ? e.text : ["内部资料"]).filter((l) => typeof l == "string").slice(0, 4).map((l) => l.slice(0, 120)), c = typeof e.fontFamily == "string" && e.fontFamily.length <= 160 && !/[;{}\\\n\r]/.test(e.fontFamily) ? e.fontFamily : "sans-serif";
+  return Object.freeze({
+    enabled: e.enabled !== !1,
+    text: Object.freeze(m),
+    color: typeof e.color == "string" && e.color.length <= 80 ? e.color : "#64748b",
+    opacity: h(e.opacity, 0.12, 0, 1),
+    rotate: h(e.rotate, -22, -180, 180),
+    fontSize: h(e.fontSize, 16, 10, 64),
+    fontFamily: c,
+    gap: Object.freeze([h((r = e.gap) == null ? void 0 : r[0], 100, 16, 600), h((o = e.gap) == null ? void 0 : o[1], 80, 16, 600)])
+  });
+}
+const H = /* @__PURE__ */ W({
+  __name: "FinWatermark",
+  props: {
+    config: {}
+  },
+  emits: ["error"],
+  setup(s, { emit: e }) {
+    const f = s, m = e, c = j();
+    let r = null, o, l, y = "", p = !1, v = !1;
+    function T() {
+      o == null || o.disconnect(), o = void 0, l !== void 0 && clearInterval(l), l = void 0;
+    }
+    function _(t) {
+      var S;
+      const a = C(f.config), i = t.ownerDocument.createElement("canvas"), n = i.getContext("2d");
+      if (!n) throw new Error("当前环境不支持 Canvas 2D，无法绘制水印。");
+      const g = `${a.fontSize}px ${a.fontFamily}`;
+      n.font = g;
+      const u = Math.min(1e3, Math.max(1, ...a.text.map((F) => n.measureText(F).width))), x = a.fontSize * 1.5, b = Math.max(1, a.text.length) * x, d = a.rotate * Math.PI / 180, k = Math.ceil(Math.abs(u * Math.cos(d)) + Math.abs(b * Math.sin(d)) + a.gap[0]), z = Math.ceil(Math.abs(u * Math.sin(d)) + Math.abs(b * Math.cos(d)) + a.gap[1]), w = Math.min(2, Math.max(1, ((S = t.ownerDocument.defaultView) == null ? void 0 : S.devicePixelRatio) ?? 1));
+      i.width = Math.ceil(k * w), i.height = Math.ceil(z * w), n.scale(w, w), n.translate(k / 2, z / 2), n.rotate(d), n.font = g, n.fillStyle = "#64748b", n.fillStyle = a.color, n.globalAlpha = a.opacity, n.textAlign = "center", n.textBaseline = "middle", a.text.forEach((F, O) => n.fillText(F, 0, (O - (a.text.length - 1) / 2) * x, 1e3));
+      const E = i.toDataURL("image/png");
+      if (!E.startsWith("data:image/png")) throw new Error("Canvas 未生成有效水印图像。");
+      return { url: E, width: k, height: z };
+    }
+    function D(t) {
+      o == null || o.observe(t, { attributes: !0 }), r && (o == null || o.observe(r, { childList: !0 }));
+    }
+    function M() {
+      var a;
+      const t = c.value;
+      if (!(!p || v || !t || !r)) {
+        v = !0, o == null || o.disconnect();
+        try {
+          t.parentNode !== r && r.appendChild(t), t.style.cssText !== y && (t.style.cssText = y), t.className && t.removeAttribute("class"), t.hasAttribute("hidden") && t.removeAttribute("hidden"), t.setAttribute("aria-hidden", "true");
+          const i = (a = t.ownerDocument.defaultView) == null ? void 0 : a.getComputedStyle(t);
+          i && (i.display === "none" || i.visibility !== "visible" || Number(i.opacity) === 0) && (t.style.cssText = y);
+        } finally {
+          v = !1, p && D(t);
+        }
+      }
+    }
+    function A() {
+      var i;
+      T();
+      const t = c.value;
+      if (!t || !p) return;
+      t.style.cssText = "display:none !important;";
+      const a = C(f.config);
+      if (!(!a.enabled || !a.text.some(Boolean)))
+        try {
+          const n = _(t), g = {
+            position: "absolute",
+            inset: "0",
+            width: "100%",
+            height: "100%",
+            margin: "0",
+            padding: "0",
+            border: "0",
+            display: "block",
+            visibility: "visible",
+            opacity: "1",
+            "pointer-events": "none",
+            "z-index": "2000",
+            transform: "none",
+            filter: "none",
+            "clip-path": "none",
+            "background-color": "transparent",
+            "background-image": `url("${n.url}")`,
+            "background-size": `${n.width}px ${n.height}px`,
+            "background-repeat": "repeat",
+            "background-position": "0 0",
+            "box-sizing": "border-box"
+          };
+          t.style.cssText = "";
+          for (const [x, b] of Object.entries(g)) t.style.setProperty(x, b, "important");
+          y = t.style.cssText;
+          const u = (i = t.ownerDocument.defaultView) == null ? void 0 : i.MutationObserver;
+          u && (o = new u(M)), M(), l = setInterval(M, 1e3);
+        } catch (n) {
+          t.style.cssText = "display:none !important;", m("error", n instanceof Error ? n : new Error("水印绘制失败。")), console.warn("[fin-micro/watermark] 水印绘制失败，本次检查已停止。", n);
+        }
+    }
+    return B(() => {
+      var t;
+      p = !0, r = ((t = c.value) == null ? void 0 : t.parentElement) ?? null, A();
+    }), $(() => f.config, A, { deep: !0 }), N(() => {
+      var t;
+      p = !1, T(), (t = c.value) == null || t.remove(), r = null;
+    }), (t, a) => (I(), P("div", {
+      ref_key: "layer",
+      ref: c,
+      "aria-hidden": "true",
+      "data-fin-watermark": ""
+    }, null, 512));
+  }
+});
+export {
+  H as FinWatermark,
+  C as normalizeWatermarkConfig
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axewo/fin-micro",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -36,6 +36,17 @@
       "import": "./dist/vue.mjs",
       "require": "./dist/vue.cjs"
     },
+    "./layout": {
+      "types": "./dist/types/layout/index.d.ts",
+      "import": "./dist/layout.mjs",
+      "require": "./dist/layout.cjs"
+    },
+    "./layout/style.css": "./dist/layout.css",
+    "./watermark": {
+      "types": "./dist/types/watermark/index.d.ts",
+      "import": "./dist/watermark.mjs",
+      "require": "./dist/watermark.cjs"
+    },
     "./runtime": {
       "types": "./dist/types/runtime/index.d.ts",
       "import": "./dist/runtime.mjs",
@@ -46,6 +57,7 @@
     "fin-micro": "./cli/index.mjs"
   },
   "files": [
+    "dist/**/*.css",
     "dist/**/*.mjs",
     "dist/**/*.cjs",
     "dist/**/*.d.ts",
@@ -58,12 +70,22 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "peerDependencies": {
+    "element-plus": "^2.9.0",
+    "@element-plus/icons-vue": "^2.3.0",
     "vue": "^3.4.0",
     "vue-router": "^4.5.0"
   },
   "peerDependenciesMeta": {
+    "element-plus": {
+      "optional": true
+    },
+    "@element-plus/icons-vue": {
+      "optional": true
+    },
     "vue": {
       "optional": true
     },
@@ -75,6 +97,9 @@
     "wujie": "2.1.0"
   },
   "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.0",
+    "element-plus": "^2.9.0",
+    "@element-plus/icons-vue": "^2.3.0",
     "vue-router": "^4.5.0",
     "vue": "^3.5.0",
     "vite": "^5.4.0",
@@ -88,7 +113,7 @@
     "build": "vite build",
     "test": "node ../../node_modules/vitest/vitest.mjs run",
     "typecheck": "vue-tsc --noEmit -p tsconfig.json",
-    "test:cli": "node --test cli/create.test.mjs cli/scaffold.test.mjs",
+    "test:cli": "node --test cli/create.test.mjs cli/scaffold.test.mjs cli/layout.test.mjs cli/startup.test.mjs",
     "check:package": "node scripts/check-package.mjs"
   }
 }

package/scaffold/base/index.html

@@ -6,7 +6,8 @@
     <title>__PROJECT_NAME__</title>
   </head>
   <body>
-    <div id="app"></div>
+    <!-- 启动前即显示；只占当前应用根区域，嵌入运行不会覆盖基座。Vue 挂载时替换。 -->
+    <div id="app"><div data-fin-startup="loading" role="status" aria-live="polite" style="min-height:240px;display:grid;place-content:center;gap:12px;text-align:center;color:#536079;background:#f4f6fa;font:14px/1.6 sans-serif"><strong>正在启动应用…</strong><span>正在加载配置与恢复会话，请稍候</span></div></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package/scaffold/base/pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+# pnpm >=10.26（包含12.3.4）使用allowBuilds；旧版pnpm请按其审批机制单独配置。
+# 仅授权当前模板依赖的固定版本，升级依赖后须重新检查安装脚本。
+# esbuild准备平台构建二进制；vue-demi适配当前Vue版本。禁止全量放开依赖脚本。
+allowBuilds:
+  'esbuild@0.21.5': true
+  'vue-demi@0.14.10': true

package/scaffold/base/src/router/demo.ts

@@ -2,5 +2,5 @@ import type { RouteRecordRaw } from 'vue-router'
 
 // 仅定义本地页面，不授予宿主菜单/页签权限；host 默认不自动安装。
 export const demoRoutes: RouteRecordRaw[] = [
-  { path: '/demo', name: 'demo', component: () => import('../views/DemoView.vue') },
+  { path: '/demo', name: 'demo', component: () => import('../views/demo/index.vue') },
 ]

package/scaffold/base/src/utils/errorUtils.ts

@@ -34,14 +34,30 @@ export function devDiagnostic(error: unknown, stage: 'load-bootstrap' | 'mount'
   return ` [阶段=${stage}; 错误=${kind}]${kind === 'SyntaxError' ? ' 请先执行 npm run check:runtime 检查模块导出及依赖能力' : ''}`
 }
 
+/**
+ * 在当前应用根节点显示启动占位；不使用全屏定位，不依赖 Vue 或 UI 插件。
+ * @returns 无返回值；无 DOM 或根节点时安全忽略，Vue 挂载后自然替换占位。
+ */
+export function showStartupLoading(): void {
+  if (typeof document === 'undefined') return
+  const container = document.getElementById('app')
+  if (!container) return
+  const text = document.createElement('p')
+  text.setAttribute('role', 'status')
+  text.setAttribute('aria-live', 'polite')
+  text.setAttribute('data-fin-startup', 'loading')
+  text.textContent = '正在启动应用，请稍候…'
+  container.replaceChildren(text)
+}
+
 /** 启动失败的纯文本可重试边界；不插入错误 HTML，不依赖尚未成功安装的 Vue/UI 插件。 */
 export function showStartupError(error: unknown, retry: () => Promise<void>, stage: 'load-bootstrap' | 'mount' = 'mount'): void {
-  if (toSafeError(error).kind === 'cancelled' || typeof document === 'undefined') return
+  if (typeof document === 'undefined') return
   const container = document.getElementById('app')
   if (!container) return
   const text = document.createElement('p')
   text.setAttribute('role', 'alert')
-  text.textContent = `应用启动失败：${toSafeError(error).message}${devDiagnostic(error, stage)}`
+  text.textContent = toSafeError(error).kind === 'cancelled' ? '应用启动已取消，可重试启动' : `应用启动失败：${toSafeError(error).message}${devDiagnostic(error, stage)}`
   const button = document.createElement('button')
   button.textContent = '重试启动'
   button.onclick = () => { void retry().catch(reportError) }
@@ -65,6 +81,7 @@ export function createStartupLifecycle(load: () => Promise<{ mount(): Promise<vo
   async function mount(): Promise<void> {
     unmount()
     const version = generation
+    showStartupLoading()
     let stage: 'load-bootstrap' | 'mount' = 'load-bootstrap'
     try {
       const bootstrap = await load()

package/scaffold/base/src/utils/watermarkConfig.ts

@@ -0,0 +1,18 @@
+import { reactive } from 'vue'
+import type { WatermarkConfig } from '@axewo/fin-micro/watermark'
+
+/**
+ * 当前使用前端配置；未来在应用配置加载完成后 Object.assign(watermarkConfig, result)。
+ * 这里不发请求、不假设接口协议；接口适配仍归项目 apis/，不得将 Token 写入水印。
+ * 嵌入式子应用不渲染独立布局，因此只由基座绘制；各应用实例互不共享此对象。
+ */
+export const watermarkConfig = reactive<WatermarkConfig>({
+  enabled: true,
+  text: ['内部资料', '__PROJECT_NAME__'],
+  color: '#64748b',
+  opacity: 0.12,
+  rotate: -22,
+  fontSize: 16,
+  fontFamily: 'sans-serif',
+  gap: [100, 80],
+})

package/scaffold/base/src/views/{DemoView.vue → demo/index.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
-import { useDemoStore } from '../stores/demo'
+import { useDemoStore } from '../../stores/demo'
 
 // 全局词条来自 installAppLocale，切换仅影响当前 Vue App 的 Provider。
 const { t, locale } = useI18n({ useScope: 'global' })

package/scaffold/host/src/layout/HostMenu.vue

@@ -1,15 +1,23 @@
 <script setup lang="ts">
+import { ElIcon } from 'element-plus'
+import { Document, Folder, HomeFilled, List, Menu, Setting, Tickets, User } from '@element-plus/icons-vue'
 import type { MicroMenu } from '@axewo/fin-micro'
 /** 薄递归只渲染后台授权菜单，展开与选中状态交给 Element Plus。 */
 defineProps<{ appId: string; menus: readonly MicroMenu[] }>()
 const emit = defineEmits<{ open: [appId: string, menu: MicroMenu] }>()
+// 后台仅提供图标标识，显式映射到本地白名单；不动态加载接口数据指定的组件。
+const icons = new Map(Object.entries({ Document, Folder, HomeFilled, List, Menu, Setting, Tickets, User }))
+/** 未配置或未知图标名时安全回退，不影响导航。 */
+const menuIcon = (menu: MicroMenu) => icons.get(menu.icon ?? '') ?? (menu.children?.length ? Folder : Document)
 </script>
 <template>
   <template v-for="menu in menus" :key="JSON.stringify([appId, menu.menuId])">
     <el-sub-menu v-if="menu.children?.length" :index="JSON.stringify([appId, menu.menuId])">
-      <template #title>{{ menu.name }}</template>
+      <template #title><ElIcon aria-hidden="true"><component :is="menuIcon(menu)" /></ElIcon><span>{{ menu.name }}</span></template>
       <HostMenu :app-id="appId" :menus="menu.children" @open="(id, item) => emit('open', id, item)" />
     </el-sub-menu>
-    <el-menu-item v-else-if="menu.target" :index="JSON.stringify([appId, menu.menuId])" @click="emit('open', appId, menu)">{{ menu.name }}</el-menu-item>
+    <el-menu-item v-else-if="menu.target" :index="JSON.stringify([appId, menu.menuId])" @click="emit('open', appId, menu)">
+      <ElIcon aria-hidden="true"><component :is="menuIcon(menu)" /></ElIcon><span>{{ menu.name }}</span>
+    </el-menu-item>
   </template>
 </template>

package/scaffold/host/src/layout/HostTabs.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
+import { nextTick, onMounted, onBeforeUnmount, ref, watch } from 'vue'
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
 import type { MicroTab, NavigationOperation } from '@axewo/fin-micro'
 import { isHome } from '../localPages'
 
@@ -21,22 +22,71 @@ function command(action: 'refresh' | 'close' | 'all' | 'others' | 'left' | 'righ
   const target = { tabId: tab.tabId, key: tab.key }
   emit('operate', action === 'refresh' || action === 'close' ? { type: action, target } : { type: 'closeMany', scope: action, anchor: target })
 }
-// 只滚动当前页签，不触碰业务容器及其缓存生命周期。
-watch(() => props.activeKey, () => {
-  void nextTick().then(() => strip.value?.querySelector<HTMLElement>('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' })).catch(error => emit('error', error))
+/** 仅调整页签条的水平位置，不滚动业务容器，也不触发页签激活事务。 */
+const overflowing = ref(false)
+const canScrollLeft = ref(false)
+const canScrollRight = ref(false)
+let observer: ResizeObserver | undefined
+let disposed = false
+function measure(): void {
+  const el = strip.value
+  if (!el || disposed) return
+  // 两枚箭头各占 32px；按不含箭头时的总宽度判定，避免临界尺寸反复闪现。
+  overflowing.value = el.scrollWidth > el.clientWidth + (overflowing.value ? 64 : 0) + 1
+  canScrollLeft.value = el.scrollLeft > 1
+  canScrollRight.value = el.scrollLeft + el.clientWidth < el.scrollWidth - 1
+}
+function revealActive(): void {
+  const el = strip.value
+  const tab = el?.querySelector<HTMLElement>('[aria-selected="true"]')?.parentElement
+  if (!el || !tab || disposed) return
+  const viewport = el.getBoundingClientRect()
+  const bounds = tab.getBoundingClientRect()
+  if (bounds.left < viewport.left) el.scrollLeft += bounds.left - viewport.left
+  else if (bounds.right > viewport.right) el.scrollLeft += Math.min(bounds.right - viewport.right, bounds.left - viewport.left)
+  measure()
+}
+/** 箭头每次移动约一屏，保留部分重叠便于定位；边界由滚动事件重新测量。 */
+function scrollTabs(direction: -1 | 1): void {
+  if (props.pending) return
+  strip.value?.scrollBy({ left: direction * Math.max(80, strip.value.clientWidth * 0.8), behavior: 'smooth' })
+}
+function updateViewport(): void {
+  void nextTick().then(() => {
+    if (disposed) return
+    measure()
+    // 箭头出现或消失后，可视宽度会再次变化，等布局提交后再定位活动项。
+    return nextTick().then(revealActive)
+  }).catch(error => emit('error', error))
+}
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined') {
+    observer = new ResizeObserver(updateViewport)
+    if (strip.value) observer.observe(strip.value)
+  }
+  if (typeof window !== 'undefined') window.addEventListener('resize', updateViewport)
+  updateViewport()
+})
+onBeforeUnmount(() => {
+  disposed = true
+  observer?.disconnect()
+  if (typeof window !== 'undefined') window.removeEventListener('resize', updateViewport)
 })
+watch(() => [props.activeKey, ...props.tabs.map(tab => `${tab.key}:${tab.title}`)], updateViewport)
 watch(() => props.pending, pending => { if (pending) closePopovers() })
 defineExpose({ closePopovers })
 </script>
 <template>
   <div class="shell-tabbar" :inert="pending || undefined" @keydown.esc="closePopovers">
     <button v-if="menu" class="popover-backdrop" aria-label="关闭页签菜单" tabindex="-1" @click="closePopovers" />
-    <div ref="strip" class="tab-strip" role="tablist" aria-label="已打开页面">
+    <button v-if="overflowing" class="tab-scroll" aria-label="向左查看页签" title="向左查看页签" :disabled="pending || !canScrollLeft" @click="scrollTabs(-1)"><ArrowLeft aria-hidden="true" /></button>
+    <div ref="strip" class="tab-strip" role="tablist" aria-label="已打开页面" @scroll="measure">
       <div v-for="tab in tabs" :key="tab.key" class="shell-tab" :class="{ active: tab.key === activeKey }" @contextmenu.prevent="showMenu(tab, $event)">
         <button role="tab" :aria-selected="tab.key === activeKey" :title="tab.title" @click="!pending && emit('operate', { type: 'activate', target: { tabId: tab.tabId, key: tab.key } })">{{ tab.title }}</button>
         <button v-if="!isHome(tab)" class="tab-close" :aria-label="`关闭 ${tab.title}`" @click="!pending && emit('operate', { type: 'close', target: { tabId: tab.tabId, key: tab.key } })">×</button>
       </div>
     </div>
+    <button v-if="overflowing" class="tab-scroll" aria-label="向右查看页签" title="向右查看页签" :disabled="pending || !canScrollRight" @click="scrollTabs(1)"><ArrowRight aria-hidden="true" /></button>
     <button class="tab-more" aria-label="更多页签操作" :aria-expanded="!!menu" :disabled="!tabs.length || pending" @click="tabs.find(tab => tab.key === activeKey) && showMenu(tabs.find(tab => tab.key === activeKey)!)">···</button>
     <div v-if="menu" class="shell-popover tab-actions" :class="{ 'context-actions': menu.x !== undefined }" :style="menu.x !== undefined ? { left: `${menu.x}px`, top: `${menu.y}px` } : undefined" role="menu" aria-label="页签操作菜单">
       <p class="popover-label">{{ menu.tab.title }}</p>

package/scaffold/host/src/layout/HostWorkspace.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { FinWatermark } from '@axewo/fin-micro/watermark'
+import { watermarkConfig } from '../utils/watermarkConfig'
 import { MicroAppContainer, type MicroApp, type MicroTab, type MicroRuntime } from '@axewo/fin-micro'
 import { demoMode } from '../platform'
 import { LOCAL_APP_ID } from '../localPages'
 import type { PlatformSession } from '../types/platform'
-import HomeView from '../views/HomeView.vue'
-import ProfileView from '../views/ProfileView.vue'
+import HomeView from '../views/home/index.vue'
+import ProfileView from '../views/profile/index.vue'
 const props = defineProps<{ apps: readonly MicroApp[]; tabs: readonly MicroTab[]; active?: MicroTab; runtime: MicroRuntime; epochs: Record<string, number>; pending: boolean; session: PlatformSession }>()
 const emit = defineEmits<{ home: []; profile: []; logout: [] }>()
 // 远端按 appId 唯一挂载；本地页面使用相同 core 页签及 key，但不创建沙箱或第二套页签状态。
@@ -13,6 +15,8 @@ const mounted = computed(() => props.apps.filter(app => app.kind !== 'local' &&
 const local = computed(() => props.active?.appId === LOCAL_APP_ID ? props.active : undefined)
 </script>
 <template>
+  <!-- 稳定视口与原滚动区分离；不改变 appId/key 或子应用缓存身份。 -->
+  <div class="workspace-viewport">
   <section class="shell-content">
     <!-- 仅清理或异常空快照时兜底；正常交互始终保留核心主页，不用此入口模拟固定页签。 -->
     <div v-if="!active && !pending" class="home-view"><section class="home-panel"><h1>工作区暂不可用</h1><p>可返回本地主页重新开始。</p><el-button type="primary" @click="emit('home')">打开主页</el-button></section></div>
@@ -23,4 +27,10 @@ const local = computed(() => props.active?.appId === LOCAL_APP_ID ? props.active
     <!-- 仅局部覆盖通用容器的最小高度；挂载身份与保活策略不变，低视口不会撑开整个基座。 -->
     <MicroAppContainer class="shell-app-container" v-for="app in mounted" v-show="active?.appId === app.appId" :key="`${app.appId}:${epochs[app.appId] ?? 0}`" :app-id="app.appId" :runtime="runtime" :retry-disabled="pending" />
   </section>
+  <FinWatermark :config="watermarkConfig" />
+  </div>
 </template>
+<style scoped>
+.workspace-viewport { position: relative; isolation: isolate; display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
+.workspace-viewport > .shell-content { min-width: 0; }
+</style>