@axewo/fin-micro 0.0.0-stage → 2.0.0

package/scaffold/host/src/types/platform.ts

@@ -0,0 +1,12 @@
+import type { MicroApp } from '@axewo/fin-micro'
+
+/**
+ * 完成身份及菜单加载后的平台会话，仅包含可公开字段。
+ * apps 的 entry 来自本地可信注册表，menus 来自已解码的后台授权菜单；不保存 Token。
+ * 此对象只能用于前端编排，不能替代服务端对每个业务请求的认证和权限校验。
+ */
+export interface PlatformSession {
+  user: { id: string; name: string }
+  permissions: string[]
+  apps: MicroApp[]
+}

package/scaffold/host/src/utils/request.ts

@@ -0,0 +1,42 @@
+import { AxiosHttpClient } from '@axewo/fin-core/http/axios'
+import { appConfig } from './appConfig'
+import { toSafeError, reportError } from './errorUtils'
+
+/**
+ * 基座平台接口专属 Axios 请求实例；不与子应用公共 requestUtils.ts 共享可变配置或凭据。
+ * Token 由 platform.ts 针对可信平台接口显式传入，不隐式读取子应用 bridge。
+ * 默认访问应用部署源的 /api/，开发代理及生产网关由项目部署配置决定。
+ * Cookie 仅同源携带；跨域请求须显式配置可信 baseURL、withCredentials 与服务端 CORS。
+ * 登录到菜单加载期间使用该次局部 Token，避免认证完成前将候选凭据提交到全局。
+ * 业务 code/data 解包、401 后的会话协调由业务适配层负责，本实例不弹窗或跳转。
+ */
+export const http = new AxiosHttpClient({
+  baseURL: appConfig.apiBase,
+  timeout: appConfig.timeout,
+  withCredentials: appConfig.withCredentials,
+})
+
+/**
+ * 为本轮平台会话安装 401 协调；请求发送时捕获宿主私有版本，旧请求不得退出新身份。
+ * @param capture 未登录/认证初始化返回 undefined，避免将登录拒绝误判成工作会话失效。
+ * @param invalidate 同步复核版本并撤销身份，不等待离页守卫或远程退出。
+ * @returns 幂等清理函数，卸载后旧响应不再触发副作用；失败始终保持原始拒绝。
+ */
+export function installPlatformExpiry(capture: () => number | undefined, invalidate: (revision: number) => void): () => void {
+  let active = true
+  const revisions = new WeakMap<object, number>()
+  const request = http.interceptors.request.use(config => {
+    const revision = capture()
+    if (revision !== undefined) revisions.set(config, revision)
+    return config
+  })
+  const response = http.interceptors.response.use(value => value, error => {
+    const config = error?.config ?? error?.response?.config
+    const revision = config && typeof config === 'object' ? revisions.get(config) : undefined
+    if (active && revision !== undefined && toSafeError(error).kind === 'unauthenticated') {
+      try { invalidate(revision) } catch (cause) { reportError(cause) }
+    }
+    return Promise.reject(error)
+  })
+  return () => { active = false; http.interceptors.request.eject(request); http.interceptors.response.eject(response) }
+}

package/scaffold/host/src/views/HomeView.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+/** 主页只展示当前身份与真实可用入口，不依赖外部子应用，也不编造业务统计。 */
+defineProps<{ userName: string; demo: boolean; pending: boolean }>()
+const emit = defineEmits<{ profile: [] }>()
+</script>
+
+<template>
+  <div class="home-view" :inert="pending || undefined">
+    <section class="welcome-panel"><div><p class="eyebrow">FIN WORKSPACE</p><h1>{{ userName }}，欢迎来到 __PROJECT_NAME__</h1><p>这里是宿主本地主页，无需启动子应用即可使用。</p></div></section>
+    <el-alert v-if="demo" title="开发演示模式：固定演示身份，无真实认证与业务数据" type="warning" :closable="false" />
+    <section class="home-panel">
+      <div class="panel-heading"><h2>开始使用工作台</h2><span>本地入口已就绪</span></div>
+      <p>通过左侧菜单或顶部搜索打开主页、个人中心；使用页签切换、刷新、关闭当前页或批量关闭。</p>
+      <p>业务应用是可选远端入口，需要另行启动可信子应用；连接失败不会影响本地主页与个人中心。</p>
+      <el-button type="primary" @click="emit('profile')">查看个人信息</el-button>
+    </section>
+    <section class="home-panel"><h2>会话与安全边界</h2><p>{{ demo ? '刷新会恢复当前标签页的演示会话及已授权页签；退出登录会清除演示恢复标记和页签。' : '当前身份来自平台接口。刷新会重新验证身份与授权菜单，失败不会切换为演示模式。' }}</p><p>本地页面不签发 Token，真实业务权限与数据访问仍由服务端校验。</p></section>
+  </div>
+</template>

package/scaffold/host/src/views/LoginRoute.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import LoginView from './LoginView.vue'
+import { usePlatformSession } from '../hooks/usePlatformSession'
+import { authorizedRedirect } from '../router/targets'
+import { reportError } from '../utils/errorUtils'
+const controller = usePlatformSession()
+const { session, loading, error, signIn, restore } = controller
+const router = useRouter()
+const route = useRoute()
+watch(session, value => {
+  if (value) void router.replace(authorizedRedirect(router, value, route.query.redirect)).catch(reportError)
+})
+</script>
+<template><LoginView :loading="loading" :error="error" :sign-in="signIn" @restore="restore" /></template>

package/scaffold/host/src/views/LoginView.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { demoMode } from '../platform'
+
+// 表单只保留本地输入；会话恢复、取消与错误状态统一由上层会话组合函数管理。
+const props = defineProps<{
+  loading: boolean
+  error: string
+  signIn: (username: string, password: string) => Promise<void>
+}>()
+const emit = defineEmits<{ restore: [] }>()
+const username = ref('')
+const password = ref('')
+async function submit(): Promise<void> {
+  if (props.loading) return
+  if (demoMode) {
+    // 演示不展示或采集账号密码；固定身份只用于本地工作台体验。
+    await props.signIn('', '')
+    return
+  }
+  if (!username.value.trim() || !password.value) return
+  const credential = password.value
+  // 提交即清空密码输入，不在会话或全局状态中保存凭据。
+  password.value = ''
+  await props.signIn(username.value.trim(), credential)
+}
+</script>
+
+<template>
+  <main class="login-page">
+    <!-- 仅迁移品牌与表单外观，身份恢复与登录结果仍由上层会话控制器决定。 -->
+    <section class="login-brand" aria-label="平台介绍">
+      <div class="login-logo"><span class="login-logo-mark" aria-hidden="true">F</span> FIN WORKSPACE</div>
+      <div class="login-story"><p class="login-eyebrow">连接业务 · 协同向前</p><h1>一个工作空间，<br />让业务高效运转。</h1><p class="login-description">统一入口、按需协同，为团队打造清晰、可靠的企业工作台。</p>
+        <div class="login-features"><div><span aria-hidden="true">01</span><strong>统一业务入口</strong><p>集中访问业务应用，减少重复切换。</p></div><div><span aria-hidden="true">02</span><strong>连续工作体验</strong><p>多页签承载工作上下文，专注当前任务。</p></div></div>
+      </div><p class="login-brand-footer">FIN MICRO · 企业应用基座模板</p>
+    </section>
+    <section class="login-panel" aria-labelledby="login-title"><div class="login-card" :aria-busy="loading">
+    <p class="login-eyebrow">欢迎回来</p><h2 id="login-title">登录工作台</h2><p class="login-subtitle">{{ demoMode ? '以固定演示用户体验本地主页，无需账号或密码。' : '使用你的工作账号，继续 __PROJECT_NAME__ 的工作。' }}</p>
+    <el-alert v-if="demoMode" title="仅演示登录，不提供生产身份认证" type="warning" :closable="false" />
+    <p>{{ demoMode ? '仅开发演示，不连接认证接口、不收集真实密码；刷新仅恢复当前标签页的演示会话。' : '请接入 src/platform.ts 的真实平台接口；认证失败不会降级为演示身份。' }}</p>
+    <el-form class="login-form" label-position="top" size="large" @submit.prevent="submit">
+      <el-form-item v-if="!demoMode" label="用户名"><el-input v-model="username" autocomplete="username" placeholder="请输入你的工作账号" :disabled="loading" /></el-form-item>
+      <el-form-item v-if="!demoMode" label="密码"><el-input v-model="password" type="password" autocomplete="current-password" placeholder="请输入登录密码" show-password :disabled="loading" /></el-form-item>
+      <p v-if="error" class="login-error" role="alert">{{ error }}</p>
+      <div class="actions">
+        <el-button class="login-submit" type="primary" native-type="submit" :loading="loading" :disabled="loading">{{ demoMode ? '演示登录，进入主页' : '登录工作台' }}</el-button>
+        <el-button :disabled="loading" @click="emit('restore')">重试恢复会话</el-button>
+      </div>
+    </el-form>
+    <p class="login-help">{{ demoMode ? '生产构建始终使用真实认证，演示标记不具有任何认证效力。' : '如需开通账号或重置密码，请联系企业管理员。' }}</p>
+    </div><footer class="login-footer">统一工作空间 · 专注每一步</footer></section>
+  </main>
+</template>
+
+<style scoped>
+/* 双栏品牌区沿用示例外观；不依赖示例认证或表单实现。 */
+.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(400px, 1fr); background: #fff; color: #1d2b43; }
+.login-brand { display: flex; flex-direction: column; padding: 42px 64px 28px; background: #f5f7fa; border-right: 1px solid #e6edf6; }
+.login-logo { display: inline-flex; align-items: center; gap: 12px; color: #243d66; font-size: 15px; font-weight: 750; letter-spacing: 1.6px; }
+.login-logo-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #2b62d9; color: #fff; font-size: 24px; }
+.login-story { margin: auto 0; padding: 65px 0; max-width: 480px; }
+.login-eyebrow { color: #526b96; font-size: 13px; font-weight: 600; letter-spacing: 2px; margin: 0 0 16px; }
+.login-story h1 { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.5; letter-spacing: -1px; margin: 0 0 22px; }
+.login-description { font-size: 15px; color: #65758d; line-height: 1.9; max-width: 390px; }
+.login-features { margin-top: 45px; display: grid; gap: 24px; }
+.login-features > div { position: relative; padding-left: 46px; }
+.login-features span { position: absolute; left: 0; top: 0; font-size: 13px; color: #5479bd; background: #e3ecfb; border: 1px solid #d6e3fa; border-radius: 8px; padding: 7px; }
+.login-features strong { font-size: 14px; }
+.login-features p { font-size: 13px; color: #72809a; margin: 7px 0 0; line-height: 1.6; }
+.login-brand-footer { font-size: 11px; color: #8191aa; letter-spacing: 1px; }
+.login-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 64px 48px 76px; }
+.login-card { width: 100%; max-width: 390px; }
+.login-card h2 { font-size: 30px; margin: 0 0 12px; font-weight: 650; }
+.login-subtitle { color: #7a879b; font-size: 14px; margin: 0 0 30px; line-height: 1.8; }
+.login-card > p:not([class]) { font-size: 12px; color: #72809a; line-height: 1.8; }
+.login-error { padding: 12px 14px; margin-bottom: 18px; border: 1px solid #f4c6c6; border-radius: 8px; background: #fff3f3; color: #b43b3b; font-size: 13px; overflow-wrap: anywhere; }
+.login-form :deep(.el-form-item__label) { font-weight: 500; color: #394a64; }
+.login-form :deep(.el-form-item) { margin-bottom: 24px; }
+.login-form .actions { flex-direction: column; align-items: stretch; }
+.login-form .actions :deep(.el-button + .el-button) { margin-left: 0; }
+.login-submit { width: 100%; --el-button-bg-color: #2b62d9; --el-button-border-color: #2b62d9; border-radius: 7px; letter-spacing: 1px; }
+.login-help { text-align: center; color: #8792a4; font-size: 12px; line-height: 1.8; margin-top: 24px; }
+.login-footer { position: absolute; bottom: 26px; color: #a0a9b8; font-size: 11px; letter-spacing: 1px; }
+@media (max-width: 960px) { .login-brand { padding: 36px; } .login-panel { padding: 48px 32px 70px; } }
+@media (max-width: 720px) { .login-page { grid-template-columns: minmax(0, 1fr); } .login-brand { display: none; } .login-panel { padding: 38px 24px 72px; } .login-card h2 { font-size: 26px; } }
+@media (prefers-reduced-motion: reduce) { .login-page :deep(*) { transition: none !important; } }
+</style>

package/scaffold/host/src/views/NotFoundView.vue

@@ -0,0 +1 @@
+<template><main><h1>404：页面不存在</h1><p>请检查地址，或返回工作台。</p><RouterLink to="/home">返回主页</RouterLink><RouterLink to="/login">登录页</RouterLink></main></template>

package/scaffold/host/src/views/ProfileView.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PlatformSession } from '../types/platform'
+/** 仅展示平台公开会话字段，不读取、显示或持久化私有凭据。操作交回宿主统一导航与退出守卫。 */
+defineProps<{ session: PlatformSession; demo: boolean; pending: boolean }>()
+const emit = defineEmits<{ home: []; logout: [] }>()
+</script>
+
+<template>
+  <div class="home-view" :inert="pending || undefined">
+    <section class="home-panel">
+      <div class="panel-heading"><h1>个人中心</h1><span>{{ demo ? '开发演示身份' : '平台认证身份' }}</span></div>
+      <el-alert v-if="demo" title="以下为固定演示资料，不代表真实账号或平台权限" type="warning" :closable="false" />
+      <el-descriptions title="公开会话信息" :column="1" border>
+        <el-descriptions-item label="显示名称">{{ session.user.name }}</el-descriptions-item>
+        <el-descriptions-item label="用户标识">{{ session.user.id }}</el-descriptions-item>
+        <el-descriptions-item label="权限标识">{{ session.permissions.join('、') || '未分配业务权限' }}</el-descriptions-item>
+        <el-descriptions-item label="会话方式">{{ demo ? '当前标签页演示标记（非 Token）' : '平台真实认证' }}</el-descriptions-item>
+      </el-descriptions>
+      <p>这里只展示公开身份，不提供未接入的资料编辑、修改密码或其他虚假操作。</p>
+      <el-button type="primary" :disabled="pending" @click="emit('home')">回到主页</el-button>
+      <el-button :disabled="pending" @click="emit('logout')">退出登录</el-button>
+    </section>
+  </div>
+</template>

package/scaffold/host/src/views/WorkspaceRoute.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useRouter } from 'vue-router'
+import HostLayout from '../layout/HostLayout.vue'
+import { usePlatformSession } from '../hooks/usePlatformSession'
+import { reportError } from '../utils/errorUtils'
+const { session, signOut, expire } = usePlatformSession()
+const router = useRouter()
+watch(session, value => { if (!value) void router.replace('/login').catch(reportError) }, { flush: 'sync' })
+</script>
+<template><HostLayout v-if="session" :key="session.user.id" :session="session" @logout="signOut" @expired="expire" /></template>

package/scaffold/vue/src/App.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import AppProviders from './components/AppProviders.vue'
+import { RouterView } from 'vue-router'
+import { MicroTabCache, MicroRouteView, useMicroHost } from '@axewo/fin-micro'
+import { sessionKey, type BridgeSession } from './bridge/session'
+const props = defineProps<{ session: BridgeSession }>()
+provide(sessionKey, props.session)
+const { bridge, status, identity } = props.session
+const state = bridge ? useMicroHost(bridge) : undefined
+const tabs = computed(() => state?.value.tabs.filter(tab => tab.appId === bridge?.appId) ?? [])
+const activeKey = computed(() => state?.value.tabs.find(tab => tab.tabId === state.value.activeTabId)?.key)
+</script>
+<template>
+  <AppProviders>
+    <main class="page">
+      <small role="status">{{ status }} · {{ identity?.user?.name ?? '未连接公开身份' }}</small>
+      <!-- 缓存以核心 tab.key 为身份；关闭、刷新和淘汰销毁实例，切换只停用。
+           LRU 不是持久化，重要草稿需要业务另行保存，不能依赖守卫阻止浏览器刷新。 -->
+      <MicroTabCache v-if="bridge && state" :tabs="tabs" :active-key="activeKey" :max="20"><MicroRouteView /></MicroTabCache>
+      <RouterView v-else />
+    </main>
+  </AppProviders>
+</template>

package/scaffold/vue/src/bootstrap.ts

@@ -0,0 +1,67 @@
+import { createApp } from 'vue'
+import { disposePinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import { connectMicroRouter } from '@axewo/fin-micro'
+import { installBridgeAuth } from './bridge/auth'
+import { reportError, toSafeError, cleanupAll } from './utils/errorUtils'
+import App from './App.vue'
+import { installAppLocale } from './locales'
+import { createBridgeSession } from './bridge/session'
+import { createMicroRouter } from './router'
+import { createAppPinia } from './stores'
+let cleanup: (() => void) | undefined
+
+/** 幂等卸载，停止路由握手和会话订阅；晚到的初始化不得再挂载旧实例。 */
+export function unmount(): void { cleanup?.(); cleanup = undefined }
+
+/** Wujie 与独立运行共用入口；每次创建全新 router/session，失败清理并展示可重试边界。 */
+export async function mount(): Promise<void> {
+  unmount()
+  const session = createBridgeSession()
+  const { bridge } = session
+  const router = createMicroRouter(Boolean(bridge))
+  const app = createApp(App, { session })
+  const pinia = createAppPinia()
+  let stopped = false
+  let mounted = false
+  let offRouter: (() => void) | undefined
+  let offSession: (() => void) | undefined
+  let offToken: (() => void) | undefined
+  cleanup = () => {
+    stopped = true
+    // 先取消挂起的 Token 读取并还原 provider，避免旧 bridge 被后续请求复用。
+    cleanupAll([
+      () => offToken?.(), () => offRouter?.(), () => offSession?.(),
+      () => { if (mounted) app.unmount() },
+      () => router.options.history.destroy(), () => disposePinia(pinia),
+    ])
+  }
+  try {
+    // 每轮挂载安装独立 i18n，重试/重挂载不复用上一轮语言实例。
+    app.config.errorHandler = reportError
+    installAppLocale(app)
+    app.use(ElementPlus)
+    // 每轮挂载安装独立 Pinia，不与基座或其他子应用共享状态。
+    app.use(pinia)
+    app.use(router)
+    await router.isReady()
+    if (stopped) return
+    if (bridge) {
+      if (bridge.appId !== '__APP_ID__') throw new Error('宿主 appId 与子应用 __APP_ID__ 配置不一致')
+      if (!bridge.negotiate({ version: '1.0', capabilities: ['getToken', 'beginAuthRequest', 'reportAuthFailure'] }).compatible) throw new Error('宿主协议不兼容')
+      // 只在已验证的嵌入生命周期安装；独立模式与基座请求不会隐式探测 window bridge。
+      offToken = installBridgeAuth(bridge)
+      offSession = bridge.subscribeSession(value => { if (!stopped) session.identity.value = value })
+      // MicroRouteView 按固定页签快照解析真实路由，不全局 router.replace 污染其他缓存页面。
+      offRouter = connectMicroRouter(bridge, { async replace() { if (!stopped) session.status.value = '宿主已连接' } },
+        error => { if (!stopped) session.status.value = toSafeError(error).message })
+    } else session.status.value = '独立演示：宿主命令不可用，CRUD 数据仅保存在当前页面内存'
+    app.mount('#app')
+    mounted = true
+  } catch (error) {
+    if (stopped) return
+    unmount()
+    // 交由 main 的启动代次保护展示安全边界，不能在卸载后用旧按钮重新挂载。
+    throw error
+  }
+}

package/scaffold/vue/src/bridge/auth.ts

@@ -0,0 +1,23 @@
+import { getToken, TokenError, type AppBridge, type AuthCapabilities } from '@axewo/fin-micro/sdk'
+import { installRequestTokenProvider } from '../utils/requestUtils'
+import { appConfig } from '../utils/appConfig'
+
+/**
+ * 为本次嵌入生命周期安装正式认证能力；卸载调用返回函数，独立演示不安装。
+ * 请求票据先绑定宿主私有版本，再读取 Token，前后复查公开会话；版本变化直接拒绝发送。
+ * 401/Token 未登录上报原票据，宿主独立核验对象身份、来源及私有版本；不传任意 revision。
+ * 不自动刷新凭据、不重放写请求；可信应用白名单不是 XSS 隔离沙箱。
+ */
+export function installBridgeAuth(bridge: AppBridge<AuthCapabilities>): () => void {
+  return installRequestTokenProvider(async signal => {
+    const before = bridge.getSession()
+    const token = await getToken({ bridge, signal })
+    if (!before.authenticated || bridge.getSession().revision !== before.revision) throw new TokenError('SESSION_CHANGED')
+    return token
+  }, appConfig.trustedApiBase, async signal => {
+    const before = bridge.getSession()
+    const ticket = await bridge.callHostWithOptions('beginAuthRequest', { signal })
+    if (bridge.getSession().revision !== before.revision) throw new TokenError('SESSION_CHANGED')
+    return () => bridge.callHost('reportAuthFailure', ticket)
+  })
+}

package/scaffold/vue/src/bridge/session.ts

@@ -0,0 +1,16 @@
+import { inject, ref, shallowRef, type InjectionKey } from 'vue'
+import { getMicroBridge, type SessionSnapshot, type AuthCapabilities } from '@axewo/fin-micro'
+
+/** 每次挂载获取独立会话；仅保存公开身份，不读取宿主 Token，不构造虚假的平台能力。 */
+export function createBridgeSession() {
+  return { bridge: getMicroBridge<AuthCapabilities>(), identity: shallowRef<SessionSnapshot>(), status: ref('正在连接宿主') }
+}
+export type BridgeSession = ReturnType<typeof createBridgeSession>
+export const sessionKey: InjectionKey<BridgeSession> = Symbol('micro-session')
+
+/** 页面 setup 内调用，返回本次挂载的会话；独立预览 bridge 为 undefined。 */
+export function useBridgeSession(): BridgeSession {
+  const session = inject(sessionKey)
+  if (!session) throw new Error('页面缺少应用会话')
+  return session
+}

package/scaffold/vue/src/main.ts

@@ -0,0 +1,13 @@
+import 'element-plus/dist/index.css'
+import '@axewo/fin-ui/style.css'
+import './styles/index.css'
+import { setupWujieLifecycle } from '@axewo/fin-micro/runtime'
+import { createStartupLifecycle } from './utils/errorUtils'
+
+// 配置及 bootstrap 静态依赖加载失败也显示安全兜底；卸载取消尚未完成的导入。
+const { mount, unmount } = createStartupLifecycle(() => import('./bootstrap'))
+
+// 环境判断、Wujie 回调注册、独立启动和 pagehide 统一由库管理。
+// 业务替换点在 bootstrap：创建/销毁应用，并取消本轮尚未完成的异步初始化。
+const dispose = setupWujieLifecycle({ mount, unmount })
+if (import.meta.hot) import.meta.hot.dispose(dispose)

package/scaffold/vue/src/router/index.ts

@@ -0,0 +1,16 @@
+import { createMemoryHistory, createRouter, createWebHashHistory } from 'vue-router'
+import { demoRoutes } from './demo'
+
+/** 嵌入模式使用 memory history 不争用宿主 URL；独立模式使用 hash 路由便于静态部署。 */
+export function createMicroRouter(embedded: boolean) {
+  return createRouter({
+    history: embedded ? createMemoryHistory() : createWebHashHistory(),
+    routes: [
+      { path: '/', redirect: '/list' },
+      { path: '/list', component: () => import('../views/ListView.vue') },
+      { path: '/detail', component: () => import('../views/DetailView.vue') },
+      ...demoRoutes,
+      { path: '/:pathMatch(.*)*', component: () => import('../views/NotFoundView.vue') },
+    ],
+  })
+}

package/scaffold/vue/src/views/DetailView.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useMicroPage, useMicroTab, usePermission } from '@axewo/fin-micro'
+import { useBridgeSession } from '../bridge/session'
+import { toSafeError } from '../utils/errorUtils'
+const { bridge, identity } = useBridgeSession()
+const permission = usePermission(identity)
+const canRead = permission.can('demo:read')
+const tab = bridge ? useMicroTab() : undefined
+const sdk = bridge && tab ? useMicroPage(bridge, tab) : undefined
+const route = useRoute()
+const router = useRouter()
+const draft = ref('')
+const dirty = ref(false)
+const message = ref('')
+// 缓存停用不注销守卫；关闭非活动脏页也必须确认。浏览器退出与 LRU 淘汰仍需业务持久化保护。
+// useMicroPage 在真正卸载时统一 dispose，会释放本 SDK 注册的守卫，无需再登记重复清理钩子。
+sdk?.beforeLeave(() => !dirty.value || window.confirm('存在未保存的演示草稿，确认离开？'))
+
+/** 仅演示标记已保存，不宣称写入后台；真实业务必须 await 保存成功后才清除 dirty。 */
+function save(): void {
+  if (bridge && !canRead.value) { message.value = '403：无权执行此操作'; return }
+  dirty.value = false
+  message.value = '演示草稿已标记保存，未写入服务器'
+}
+
+/** SDK 固定绑定创建时的原页面，即使等待期间切换页签，也不关闭或刷新其他页面。 */
+async function action(type: 'close' | 'refresh' | 'back'): Promise<void> {
+  try {
+    if (!sdk) {
+      if (type === 'refresh') { draft.value = ''; dirty.value = false }
+      else if (!dirty.value || window.confirm('确认丢弃演示草稿？')) await router.push('/list')
+      return
+    }
+    if (type === 'close') await sdk.closeCurrent()
+    else if (type === 'refresh') await sdk.refreshCurrent()
+    else await sdk.back()
+  } catch (error) { message.value = toSafeError(error).message }
+}
+</script>
+<template>
+  <section v-if="bridge && !canRead" class="panel" role="alert"><h2>403</h2><p>没有详情访问权限，请联系管理员。</p></section>
+  <section v-else class="panel">
+    <p v-if="!bridge">独立演示不创建登录身份，仅允许本地草稿操作，不发送受保护请求。</p>
+    <h2>详情 {{ route.query.id }}</h2>
+    <p>切换宿主页签保留草稿；刷新/关闭只影响本页生命周期。</p>
+    <el-input v-model="draft" type="textarea" placeholder="编辑演示草稿" @input="dirty = true" />
+    <div class="actions">
+      <el-button type="primary" @click="save">标记保存（演示）</el-button>
+      <el-button @click="action('refresh')">刷新本页</el-button>
+      <el-button @click="action('close')">关闭本页</el-button>
+      <el-button @click="action('back')">返回来源</el-button>
+    </div>
+    <p role="status">{{ dirty ? '存在未保存草稿' : '无未保存草稿' }} · {{ message }}</p>
+  </section>
+</template>

package/scaffold/vue/src/views/ListView.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { FCrudTable, type TableConfig } from '@axewo/fin-ui'
+import { useMicroPage, useMicroTab, usePermission } from '@axewo/fin-micro'
+import { useBridgeSession } from '../bridge/session'
+import { toSafeError } from '../utils/errorUtils'
+const { bridge, identity } = useBridgeSession()
+const permission = usePermission(identity)
+const canRead = permission.can('demo:read')
+const router = useRouter()
+// SDK 在 setup 中绑定缓存边界的固定 tab.key；后续异步操作不会误操作另一个活动页。
+const tab = bridge ? useMicroTab() : undefined
+const sdk = bridge && tab ? useMicroPage(bridge, tab) : undefined
+const message = ref('')
+/** 组件异常只展示文本，兼容公开版本未提供强类型事件声明的情况。 */
+function reportError(error: unknown): void { message.value = toSafeError(error).message }
+interface RecordRow { id: number; name: string }
+// 最小内存适配器仅演示组件 API；每个页面独立数据，刷新会重置，生产请替换为真实业务请求。
+let rows: RecordRow[] = [{ id: 1, name: '示例记录' }]
+let nextId = 2
+const tableConfig: TableConfig = {
+  rowKey: 'id', title: '示例记录', pagination: false,
+  columns: [
+    { field: 'id', label: '编号', width: 100 },
+    { field: 'name', label: '名称', formItem: { component: 'FInput', required: true, componentProps: { maxlength: 80 } } },
+  ],
+  requestConfig: { api: async () => ({ list: rows.map(row => ({ ...row })), total: rows.length }) },
+  crudConfig: {
+    // 由 FCrudTable 统一生成新增/编辑弹框及删除确认，不另造重复表单。
+    createApi: async data => { rows.push({ id: nextId++, name: String(data.name) }) },
+    updateApi: async data => { rows = rows.map(row => row.id === data.id ? { ...row, name: String(data.name) } : row) },
+    deleteApi: async data => { rows = rows.filter(row => row.id !== data.id) },
+    onSuccess: () => { message.value = '演示内存数据已更新（刷新后重置）' },
+  },
+}
+
+/** 同应用详情用页面 SDK 打开宿主页签；独立模式才使用普通 router，错误留在原页面。 */
+async function openDetail(): Promise<void> {
+  try {
+    if (bridge && !canRead.value) { message.value = '403：无权访问详情'; return }
+    if (sdk && bridge) await sdk.openTab({ appId: bridge.appId, tabId: `${bridge.appId}:detail:1`, title: '示例详情 1', route: '/detail?id=1' })
+    else await router.push('/detail?id=1')
+  } catch (error) { message.value = toSafeError(error).message }
+}
+</script>
+<template>
+  <section class="panel">
+    <h1>__PROJECT_NAME__</h1>
+    <p>以下 CRUD 为内存示例，非生产业务接口；新增、编辑和删除均使用 fin-ui 内置流程。</p>
+    <div class="actions"><el-button :disabled="Boolean(bridge) && !canRead" @click="openDetail">打开详情页</el-button></div>
+    <p v-if="message" role="status">{{ message }}</p>
+    <FCrudTable :table-config="tableConfig" @error="reportError" />
+  </section>
+</template>

package/scaffold/vue/src/views/NotFoundView.vue

@@ -0,0 +1 @@
+<template><section class="panel"><h2>页面不存在</h2><p>请检查宿主菜单 route 与 src/router/index.ts 的页面注册配置。</p></section></template>