@axewo/fin-micro 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,14 @@
+import { createMemoryHistory, createRouter, createWebHashHistory } from 'vue-router'
+
+/** 嵌入模式使用 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') },
+      { path: '/:pathMatch(.*)*', component: () => import('../views/NotFoundView.vue') },
+    ],
+  })
+}

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useMicroPage, useMicroTab } from '@axewo/fin-micro'
+import { useBridgeSession } from '../bridge/session'
+const { bridge } = useBridgeSession()
+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 { 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 = String(error) }
+}
+</script>
+<template>
+  <section class="panel">
+    <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,51 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { FCrudTable, type TableConfig } from '@axewo/fin-ui'
+import { useMicroPage, useMicroTab } from '@axewo/fin-micro'
+import { useBridgeSession } from '../bridge/session'
+const { bridge } = useBridgeSession()
+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 = error instanceof Error ? error.message : String(error) }
+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 (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 = String(error) }
+}
+</script>
+<template>
+  <section class="panel">
+    <h1>__PROJECT_NAME__</h1>
+    <p>以下 CRUD 为内存示例，非生产业务接口；新增、编辑和删除均使用 fin-ui 内置流程。</p>
+    <div class="actions"><el-button @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>