create-weapp-vite 2.0.57 → 2.0.59

package/dist/cli.js

@@ -1,4 +1,4 @@
-import { n as TemplateName, t as createProject } from "./src-hBW5b5RM.js";
+import { n as TemplateName, t as createProject } from "./src-D1-gOdfL.js";
 import logger from "@weapp-core/logger";
 import fs from "fs-extra";
 import path from "node:path";

package/dist/index.js

@@ -1,2 +1,2 @@
-import { n as TemplateName, t as createProject } from "./src-hBW5b5RM.js";
+import { n as TemplateName, t as createProject } from "./src-D1-gOdfL.js";
 export { TemplateName, createProject };

package/dist/{src-hBW5b5RM.js → src-D1-gOdfL.js}

@@ -4,10 +4,10 @@ import fs from "fs-extra";
 import path from "pathe";
 import https from "node:https";
 //#region ../weapp-vite/package.json
-var version$1 = "6.11.3";
+var version$1 = "6.11.4";
 //#endregion
 //#region ../wevu/package.json
-var version = "6.11.3";
+var version = "6.11.4";
 //#endregion
 //#region src/enums.ts
 let TemplateName = /* @__PURE__ */ function(TemplateName) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-weapp-vite",
   "type": "module",
-  "version": "2.0.57",
+  "version": "2.0.59",
   "description": "create-weapp-vite",
   "author": "ice breaker <1324318532@qq.com>",
   "license": "MIT",

package/templates/lib/package.json

@@ -1,7 +1,7 @@
 {
   "name": "weapp-vite-lib-template",
   "type": "module",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "private": true,
   "description": "weapp-vite 组件库（lib 模式）模板",
   "author": "ice breaker <1324318532@qq.com>",

package/templates/wevu-tdesign/package.json

@@ -1,7 +1,7 @@
 {
   "name": "weapp-vite-wevu-tailwindcss-tdesign-template",
   "type": "module",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "private": true,
   "description": "weapp-vite + wevu (Vue SFC) 模板",
   "author": "ice breaker <1324318532@qq.com>",

package/templates/wevu-tdesign/project.private.config.json

@@ -13,6 +13,24 @@
           "query": "",
           "scene": null
         },
+        {
+          "name": "布局页",
+          "pathName": "pages/layouts/index",
+          "query": "",
+          "scene": null
+        },
+        {
+          "name": "Layout 通信演示",
+          "pathName": "pages/layout-feedback/index",
+          "query": "",
+          "scene": null
+        },
+        {
+          "name": "Store 调用 Layout",
+          "pathName": "pages/layout-store/index",
+          "query": "",
+          "scene": null
+        },
         {
           "name": "数据页",
           "pathName": "pages/data/index",

package/templates/wevu-tdesign/src/app.vue

@@ -5,6 +5,8 @@ defineAppJson({
   pages: [
     'pages/index/index',
     'pages/layouts/index',
+    'pages/layout-store/index',
+    'pages/layout-feedback/index',
     'pages/data/index',
     'pages/form/index',
     'pages/list/index',

package/templates/wevu-tdesign/src/hooks/useDialog.ts

@@ -1,12 +1,15 @@
 import Dialog from 'tdesign-miniprogram/dialog/index'
-import { getCurrentInstance } from 'wevu'
+import { getCurrentInstance, resolveLayoutBridge, resolveLayoutHost } from 'wevu'
+import { LAYOUT_DIALOG_BRIDGE_KEY } from '@/hooks/useLayoutFeedbackBridge'
 
 export interface DialogOptions {
+  bridgeKey?: string
   context?: any
   selector?: string
 }
 
-export interface AlertOptions {
+interface BaseDialogPayload {
+  bridgeKey?: string
   confirmBtn?: string
   content: string
   context?: any
@@ -14,61 +17,189 @@ export interface AlertOptions {
   title: string
 }
 
-export interface ConfirmOptions {
+export interface AlertOptions extends BaseDialogPayload {}
+
+export interface ConfirmOptions extends BaseDialogPayload {
   cancelBtn?: string
-  confirmBtn?: string
-  content: string
-  context?: any
-  selector?: string
-  title: string
 }
 
-function resolveDialogContext(context?: any) {
-  return context ?? getCurrentInstance()
+interface HostDialogInstance {
+  _onCancel?: (reason?: unknown) => void
+  _onConfirm?: (value?: unknown) => void
+  close?: () => void
+  setData?: (payload: Record<string, unknown>) => void
 }
 
-export function alertDialog(payload: AlertOptions) {
-  const context = resolveDialogContext(payload.context)
-  if (!context) {
+type DialogMode = 'alert' | 'confirm'
+
+type ResolvedDialogPayload<T extends BaseDialogPayload> = Omit<T, 'bridgeKey' | 'context' | 'selector'>
+
+function resolveDialogContext(options: DialogOptions) {
+  return options.bridgeKey
+    ? resolveLayoutBridge(options.bridgeKey, options.context ?? getCurrentInstance())
+    : options.context ?? getCurrentInstance()
+}
+
+function resolveDialogHost(options: DialogOptions) {
+  const bridgeKey = options.bridgeKey ?? LAYOUT_DIALOG_BRIDGE_KEY
+  const context = resolveDialogContext({
+    bridgeKey,
+    context: options.context,
+  })
+  const host = bridgeKey
+    ? resolveLayoutHost<HostDialogInstance>(bridgeKey, { context })
+    : options.selector
+      ? context?.selectComponent?.(options.selector) ?? null
+      : null
+
+  return {
+    context,
+    host,
+    selector: options.selector,
+  }
+}
+
+function closeDialogHost(host: HostDialogInstance) {
+  if (typeof host.close === 'function') {
+    host.close()
     return
   }
-  const { selector = '#t-dialog', ...rest } = payload
-  return Dialog.alert({
-    selector,
-    context: context as any,
-    ...rest,
+  if (typeof host.setData === 'function') {
+    host.setData({ visible: false })
+  }
+}
+
+function attachHostDialogHandlers(
+  host: HostDialogInstance,
+  handlers: {
+    onCancel?: (reason?: unknown) => void
+    onConfirm?: (value?: unknown) => void
+  },
+) {
+  const originalConfirm = typeof host._onConfirm === 'function' ? host._onConfirm : undefined
+  const originalCancel = typeof host._onCancel === 'function' ? host._onCancel : undefined
+
+  host._onConfirm = (value?: unknown) => {
+    host._onConfirm = originalConfirm
+    host._onCancel = originalCancel
+
+    if (originalConfirm) {
+      originalConfirm.call(host, value)
+    }
+    else {
+      closeDialogHost(host)
+    }
+
+    handlers.onConfirm?.(value)
+  }
+
+  host._onCancel = (reason?: unknown) => {
+    host._onConfirm = originalConfirm
+    host._onCancel = originalCancel
+
+    if (originalCancel) {
+      originalCancel.call(host, reason)
+    }
+    else {
+      closeDialogHost(host)
+    }
+
+    handlers.onCancel?.(reason)
+  }
+}
+
+function normalizeDialogPayload<T extends BaseDialogPayload>(
+  mode: DialogMode,
+  payload: T,
+): ResolvedDialogPayload<T> {
+  const { bridgeKey: _bridgeKey, context: _context, selector: _selector, ...rest } = payload
+
+  if (mode === 'alert') {
+    return {
+      ...rest,
+      cancelBtn: null,
+    } as ResolvedDialogPayload<T>
+  }
+
+  return rest as ResolvedDialogPayload<T>
+}
+
+function openDialogWithHost<T extends BaseDialogPayload>(
+  mode: DialogMode,
+  host: HostDialogInstance,
+  payload: ResolvedDialogPayload<T>,
+) {
+  return new Promise((resolve, reject) => {
+    host.setData?.({
+      ...payload,
+      visible: true,
+    })
+
+    attachHostDialogHandlers(host, {
+      onConfirm: resolve,
+      ...(mode === 'confirm' ? { onCancel: reject } : {}),
+    })
   })
 }
 
-export function confirmDialog(payload: ConfirmOptions) {
-  const context = resolveDialogContext(payload.context)
+function openDialog<T extends BaseDialogPayload>(mode: DialogMode, payload: T) {
+  const bridgeKey = payload.bridgeKey ?? LAYOUT_DIALOG_BRIDGE_KEY
+  const { context, host, selector } = resolveDialogHost({
+    bridgeKey,
+    context: payload.context,
+    selector: payload.selector,
+  })
+
   if (!context) {
-    return
+    return Promise.resolve()
   }
-  const { selector = '#t-dialog', ...rest } = payload
-  return Dialog.confirm({
+
+  const normalizedPayload = normalizeDialogPayload(mode, payload)
+
+  if (host && typeof host.setData === 'function') {
+    return openDialogWithHost(mode, host, normalizedPayload)
+  }
+
+  if (!selector) {
+    return Promise.resolve()
+  }
+
+  const open = mode === 'alert' ? Dialog.alert : Dialog.confirm
+
+  return open({
     selector,
     context: context as any,
-    ...rest,
+    ...normalizedPayload,
   })
 }
 
+export function alertDialog(payload: AlertOptions) {
+  return openDialog('alert', payload)
+}
+
+export function confirmDialog(payload: ConfirmOptions) {
+  return openDialog('confirm', payload)
+}
+
 export function useDialog(options: DialogOptions = {}) {
+  const bridgeKey = options.bridgeKey ?? LAYOUT_DIALOG_BRIDGE_KEY
   const context = options.context ?? getCurrentInstance()
+
+  function withDefaults<T extends BaseDialogPayload>(payload: T): T {
+    return {
+      ...payload,
+      bridgeKey,
+      context: payload.context ?? context,
+      selector: payload.selector ?? options.selector,
+    }
+  }
+
   return {
     alert(payload: AlertOptions) {
-      return alertDialog({
-        ...payload,
-        context: payload.context ?? context,
-        selector: payload.selector ?? options.selector,
-      })
+      return alertDialog(withDefaults(payload))
     },
     confirm(payload: ConfirmOptions) {
-      return confirmDialog({
-        ...payload,
-        context: payload.context ?? context,
-        selector: payload.selector ?? options.selector,
-      })
+      return confirmDialog(withDefaults(payload))
     },
   }
 }

package/templates/wevu-tdesign/src/hooks/useLayoutFeedbackBridge.ts

@@ -0,0 +1,17 @@
+export const LAYOUT_TOAST_BRIDGE_KEY = 'layout-toast'
+export const LAYOUT_DIALOG_BRIDGE_KEY = 'layout-dialog'
+
+export interface ToastHostInstance {
+  hide?: () => void
+  show: (options: Record<string, unknown>) => void
+}
+
+export interface DialogHostInstance {
+  _onCancel?: (reason?: unknown) => void
+  _onConfirm?: (value?: unknown) => void
+  close?: () => void
+  onCancel?: (reason?: unknown) => void
+  onConfirm?: (value?: unknown) => void
+  properties?: Record<string, unknown>
+  setData: (payload: Record<string, unknown>) => void
+}

package/templates/wevu-tdesign/src/hooks/useToast.ts

@@ -1,9 +1,11 @@
 import Toast from 'tdesign-miniprogram/toast/index'
-import { getCurrentInstance } from 'wevu'
+import { getCurrentInstance, resolveLayoutBridge, resolveLayoutHost } from 'wevu'
+import { LAYOUT_TOAST_BRIDGE_KEY } from '@/hooks/useLayoutFeedbackBridge'
 
 export type ToastTheme = 'success' | 'warning' | 'error' | 'default' | 'loading'
 
 export interface ShowToastPayload {
+  bridgeKey?: string
   context?: any
   duration?: number
   icon?: string
@@ -15,41 +17,78 @@ export interface ShowToastPayload {
 }
 
 export interface ToastOptions {
+  bridgeKey?: string
   selector?: string
   duration?: number
   theme?: ToastTheme
 }
 
+function resolveToastContext(options: { bridgeKey?: string, context?: any }) {
+  return options.bridgeKey
+    ? resolveLayoutBridge(options.bridgeKey, options.context ?? getCurrentInstance())
+    : options.context ?? getCurrentInstance()
+}
+
 export function showToast(payload: string | ShowToastPayload, theme?: ToastTheme) {
   const mpContext = getCurrentInstance()
   const normalized = typeof payload === 'string'
     ? { message: payload, theme }
     : payload
-
-  const context = normalized.context ?? mpContext
+  const bridgeKey = normalized.bridgeKey ?? LAYOUT_TOAST_BRIDGE_KEY
+  const selector = normalized.selector
+  const {
+    bridgeKey: _bridgeKey,
+    context: _context,
+    selector: _selector,
+    theme: nextTheme,
+    title,
+    message,
+    ...rest
+  } = normalized
+  const options = {
+    message: message ?? title ?? '',
+    ...rest,
+    ...(nextTheme && nextTheme !== 'default' ? { theme: nextTheme } : {}),
+  }
+  const context = resolveToastContext({
+    bridgeKey,
+    context: normalized.context ?? mpContext,
+  })
+  const host = bridgeKey
+    ? resolveLayoutHost<{
+        show?: (payload: typeof options) => void
+      }>(bridgeKey, { context })
+    : selector
+      ? context?.selectComponent?.(selector) ?? null
+      : null
   if (!context) {
     return
   }
-
-  const { selector = '#t-toast', theme: nextTheme, title, message, ...rest } = normalized
+  if (host && typeof host.show === 'function') {
+    host.show(options)
+    return
+  }
+  if (!selector) {
+    return
+  }
   Toast({
     selector,
     context: context as any,
-    message: message ?? title ?? '',
-    ...rest,
-    ...(nextTheme && nextTheme !== 'default' ? { theme: nextTheme } : {}),
+    ...options,
   } as any)
 }
 
 export function useToast(options: ToastOptions = {}) {
   const context = getCurrentInstance()
-  const selector = options.selector ?? '#t-toast'
+  const bridgeKey = options.bridgeKey ?? LAYOUT_TOAST_BRIDGE_KEY
+  const selector = options.selector
   const duration = options.duration ?? 1200
   const defaultTheme = options.theme ?? 'success'
 
   return {
     showToast(message: string, theme: ToastTheme = defaultTheme) {
       return showToast({
+        bridgeKey,
         context,
         selector,
         message,

package/templates/wevu-tdesign/src/layouts/admin.vue

@@ -29,8 +29,8 @@ defineComponentJson({
     <view class="pb-[32rpx]">
       <slot />
     </view>
-    <t-toast id="t-toast" />
-    <t-dialog id="t-dialog" />
+    <t-toast layout-host="layout-toast" />
+    <t-dialog layout-host="layout-dialog" />
   </view>
 </template>
 

package/templates/wevu-tdesign/src/layouts/default.vue

@@ -11,8 +11,8 @@ defineComponentJson({
 <template>
   <view class="layout-default">
     <slot />
-    <t-toast id="t-toast" />
-    <t-dialog id="t-dialog" />
+    <t-toast layout-host="layout-toast" />
+    <t-dialog layout-host="layout-dialog" />
   </view>
 </template>
 

package/templates/wevu-tdesign/src/pages/index/index.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { QuickActionItem } from '@/types/action'
 
-import { computed, ref, watch } from 'wevu'
+import { computed, getCurrentInstance, ref, resolveLayoutBridge, resolveLayoutHost, watch } from 'wevu'
 import KpiBoard from '@/components/KpiBoard/index.vue'
 import QuickActionGrid from '@/components/QuickActionGrid/index.vue'
+import { LAYOUT_TOAST_BRIDGE_KEY } from '@/hooks/useLayoutFeedbackBridge'
 import { usePullDownRefresh } from '@/hooks/usePullDownRefresh'
 import { useToast } from '@/hooks/useToast'
 
@@ -14,6 +15,7 @@ definePageJson({
 })
 
 const { showToast } = useToast()
+const pageInstance = getCurrentInstance<any>()
 
 const noticeText = ref('欢迎体验 wevu + weapp-vite + TDesign 模板，已启用分包与多页面导航。')
 const lastUpdated = ref('刚刚')
@@ -108,6 +110,26 @@ const quickActions = ref<QuickActionItem[]>([
     path: '/pages/layouts/index',
     type: 'sub',
   },
+  {
+    key: 'layout-feedback',
+    title: 'Layout 通信',
+    description: '页面/组件调用 layout',
+    icon: 'chat-bubble',
+    tag: 'Bridge',
+    tone: 'brand',
+    path: '/pages/layout-feedback/index',
+    type: 'sub',
+  },
+  {
+    key: 'layout-store',
+    title: 'Store 调用 Layout',
+    description: 'store 驱动 layout 宿主',
+    icon: 'layers',
+    tag: 'Store',
+    tone: 'brand',
+    path: '/pages/layout-store/index',
+    type: 'sub',
+  },
   {
     key: 'lab',
     title: '组件实验室',
@@ -151,11 +173,49 @@ watch(refreshSeed, () => {
   lastUpdated.value = `更新于 ${new Date().toLocaleTimeString()}`
 })
 
+function nextRefreshSeedValue() {
+  return refreshSeed.value >= 9 ? 1 : refreshSeed.value + 1
+}
+
 function refreshDashboard() {
-  refreshSeed.value = Math.max(1, Math.floor(Math.random() * 9))
+  refreshSeed.value = nextRefreshSeedValue()
   showToast('指标已刷新')
 }
 
+function inspectLayoutToastBridge() {
+  const bridge = resolveLayoutBridge(LAYOUT_TOAST_BRIDGE_KEY, pageInstance)
+  const layoutByPage = pageInstance?.selectComponent?.('weapp-layout-default')
+    ?? pageInstance?.selectComponent?.('.weapp-layout-default')
+    ?? null
+  const toastFromBridge = resolveLayoutHost(LAYOUT_TOAST_BRIDGE_KEY, { context: pageInstance })
+
+  return {
+    bridgeResolved: Boolean(bridge),
+    bridgeIsPage: bridge === pageInstance,
+    bridgeHasSelectComponent: typeof bridge?.selectComponent === 'function',
+    layoutFoundByPage: Boolean(layoutByPage),
+    toastFoundByBridge: Boolean(toastFromBridge),
+    bridgeKeys: bridge ? Object.keys(bridge).slice(0, 20) : [],
+    layoutKeys: layoutByPage ? Object.keys(layoutByPage).slice(0, 20) : [],
+  }
+}
+
+void inspectLayoutToastBridge
+
+function runLayoutToastE2E() {
+  refreshSeed.value = nextRefreshSeedValue()
+  const bridgeState = inspectLayoutToastBridge()
+  setTimeout(() => {
+    showToast('指标已刷新')
+  }, 0)
+  return {
+    ...bridgeState,
+    refreshSeed: refreshSeed.value,
+  }
+}
+
+void runLayoutToastE2E
+
 usePullDownRefresh(refreshDashboard)
 
 function onQuickAction(action: QuickActionItem) {
@@ -193,9 +253,11 @@ function onQuickAction(action: QuickActionItem) {
         <text class="text-[20rpx] text-white/70">
           {{ lastUpdated }}
         </text>
-        <t-button size="small" theme="default" variant="outline" @tap="refreshDashboard">
-          刷新指标
-        </t-button>
+        <view id="refresh-dashboard-trigger" @tap="refreshDashboard">
+          <t-button size="small" theme="default" variant="outline">
+            刷新指标
+          </t-button>
+        </view>
       </view>
     </view>
 

package/templates/wevu-tdesign/src/pages/layout-feedback/components/FeedbackCallerCard.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref } from 'wevu'
+import { useDialog } from '@/hooks/useDialog'
+import { useToast } from '@/hooks/useToast'
+
+const props = defineProps<{
+  onReport?: (payload: string) => void
+}>()
+
+const actionSeed = ref(0)
+const { showToast } = useToast({ duration: 1400 })
+const { alert, confirm } = useDialog()
+
+function nextLabel(prefix: string) {
+  actionSeed.value += 1
+  return `${prefix} #${actionSeed.value}`
+}
+
+function triggerChildToast() {
+  const label = nextLabel('子组件 Toast')
+  showToast(`${label} 已通过 layout 宿主触发`)
+  props.onReport?.(`${label} 已触发`)
+}
+
+function triggerChildAlert() {
+  const label = nextLabel('子组件 Alert')
+  void alert({
+    title: label,
+    content: '当前弹窗由子组件直接调用 useDialog()，但实际宿主仍在 layout 内。',
+    confirmBtn: '知道了',
+  }).then(() => {
+    props.onReport?.(`${label} 已确认`)
+  })
+}
+
+function triggerChildConfirm() {
+  const label = nextLabel('子组件 Confirm')
+  void confirm({
+    title: label,
+    content: '点击确认后会回传一条日志，证明子组件与页面都能经由同一 layout 宿主通信。',
+    confirmBtn: '确认',
+    cancelBtn: '取消',
+  }).then(() => {
+    props.onReport?.(`${label} 点击确认`)
+  }).catch(() => {
+    props.onReport?.(`${label} 点击取消`)
+  })
+}
+</script>
+
+<template>
+  <view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+    <view class="flex items-center justify-between">
+      <view>
+        <text class="text-[28rpx] font-semibold text-[#1f1a3f]">
+          子组件直连 layout 宿主
+        </text>
+        <text class="mt-[6rpx] block text-[22rpx] leading-[1.7] text-[#6f6b8a]">
+          这个组件不接收 toast/dialog 实例，也不手动 selectComponent，只直接调用 useToast() / useDialog()。
+        </text>
+      </view>
+      <t-tag size="small" theme="primary" variant="light">
+        Child
+      </t-tag>
+    </view>
+
+    <view class="mt-[18rpx] flex flex-col gap-[12rpx]">
+      <t-button block theme="primary" variant="outline" @tap="triggerChildToast">
+        子组件触发 Toast
+      </t-button>
+      <t-button block theme="primary" variant="outline" @tap="triggerChildAlert">
+        子组件触发 Alert
+      </t-button>
+      <t-button block theme="danger" variant="outline" @tap="triggerChildConfirm">
+        子组件触发 Confirm
+      </t-button>
+    </view>
+  </view>
+</template>

package/templates/wevu-tdesign/src/pages/layout-feedback/index.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance, ref, resolveLayoutHost } from 'wevu'
+import SectionTitle from '@/components/SectionTitle/index.vue'
+import { useDialog } from '@/hooks/useDialog'
+import { LAYOUT_DIALOG_BRIDGE_KEY, LAYOUT_TOAST_BRIDGE_KEY } from '@/hooks/useLayoutFeedbackBridge'
+import { useToast } from '@/hooks/useToast'
+import FeedbackCallerCard from './components/FeedbackCallerCard.vue'
+
+definePageJson({
+  navigationBarTitleText: 'Layout 通信演示',
+  backgroundColor: '#f6f7fb',
+})
+
+const pageInstance = getCurrentInstance<any>()
+const { showToast } = useToast({ duration: 1400 })
+const { alert, confirm } = useDialog()
+const actionSeed = ref(0)
+const actionLogs = ref<string[]>([
+  '页面与子组件都会直接调用 useToast() / useDialog()，由 layout 统一承载宿主。',
+])
+
+const bridgeStatus = computed(() => {
+  const toastHost = resolveLayoutHost(LAYOUT_TOAST_BRIDGE_KEY, { context: pageInstance })
+  const dialogHost = resolveLayoutHost(LAYOUT_DIALOG_BRIDGE_KEY, { context: pageInstance })
+
+  return [
+    {
+      key: 'toast',
+      title: 'Toast Host',
+      description: toastHost ? '已解析到 layout 内的 t-toast 实例。' : '尚未解析到 toast 宿主。',
+      ready: Boolean(toastHost),
+    },
+    {
+      key: 'dialog',
+      title: 'Dialog Host',
+      description: dialogHost ? '已解析到 layout 内的 t-dialog 实例。' : '尚未解析到 dialog 宿主。',
+      ready: Boolean(dialogHost),
+    },
+  ]
+})
+
+function pushLog(message: string) {
+  actionLogs.value = [`${new Date().toLocaleTimeString()} ${message}`, ...actionLogs.value].slice(0, 8)
+}
+
+function onChildReport(message: string) {
+  pushLog(message)
+}
+
+function nextLabel(prefix: string) {
+  actionSeed.value += 1
+  return `${prefix} #${actionSeed.value}`
+}
+
+function triggerPageToast() {
+  const label = nextLabel('页面 Toast')
+  showToast(`${label} 已通过 layout 宿主触发`)
+  pushLog(`${label} 已触发`)
+}
+
+function triggerPageAlert() {
+  const label = nextLabel('页面 Alert')
+  void alert({
+    title: label,
+    content: '这是页面直接调用 useDialog() 后，由 layout 内 t-dialog 承载的弹窗。',
+    confirmBtn: '知道了',
+  }).then(() => {
+    pushLog(`${label} 已确认`)
+  })
+}
+
+function triggerPageConfirm() {
+  const label = nextLabel('页面 Confirm')
+  void confirm({
+    title: label,
+    content: '确认后会写入日志，方便观察页面与 layout 宿主之间的通信。',
+    confirmBtn: '确认',
+    cancelBtn: '取消',
+  }).then(() => {
+    pushLog(`${label} 点击确认`)
+  }).catch(() => {
+    pushLog(`${label} 点击取消`)
+  })
+}
+
+function inspectDialogHostE2E() {
+  const dialogHost = resolveLayoutHost<any>(LAYOUT_DIALOG_BRIDGE_KEY, { context: pageInstance })
+  return {
+    hasHost: Boolean(dialogHost),
+    visible: dialogHost?.data?.visible ?? dialogHost?.properties?.visible ?? null,
+    hasOnConfirm: typeof dialogHost?._onConfirm === 'function',
+    hasOnCancel: typeof dialogHost?._onCancel === 'function',
+    hasNativeConfirm: typeof dialogHost?.onConfirm === 'function',
+    hasNativeCancel: typeof dialogHost?.onCancel === 'function',
+    title: dialogHost?.data?.title ?? dialogHost?.properties?.title ?? '',
+    confirmBtn: dialogHost?.data?._confirm?.content ?? dialogHost?.properties?.confirmBtn ?? '',
+    cancelBtn: dialogHost?.data?._cancel?.content ?? dialogHost?.properties?.cancelBtn ?? '',
+  }
+}
+
+async function runPageAlertCloseE2E() {
+  triggerPageAlert()
+  await new Promise(resolve => setTimeout(resolve, 120))
+  return inspectDialogHostE2E()
+}
+
+async function runPageConfirmOpenE2E() {
+  triggerPageConfirm()
+  await new Promise(resolve => setTimeout(resolve, 120))
+  return inspectDialogHostE2E()
+}
+
+function getLayoutFeedbackLogsE2E() {
+  return actionLogs.value.slice()
+}
+
+async function runDialogHostConfirmE2E() {
+  const dialogHost = resolveLayoutHost<any>(LAYOUT_DIALOG_BRIDGE_KEY, { context: pageInstance })
+  dialogHost?.onConfirm?.()
+  await new Promise(resolve => setTimeout(resolve, 60))
+  return inspectDialogHostE2E()
+}
+
+async function runDialogHostCancelE2E() {
+  const dialogHost = resolveLayoutHost<any>(LAYOUT_DIALOG_BRIDGE_KEY, { context: pageInstance })
+  dialogHost?.onCancel?.()
+  await new Promise(resolve => setTimeout(resolve, 60))
+  return inspectDialogHostE2E()
+}
+
+void inspectDialogHostE2E
+void runPageAlertCloseE2E
+void runPageConfirmOpenE2E
+void getLayoutFeedbackLogsE2E
+void runDialogHostConfirmE2E
+void runDialogHostCancelE2E
+</script>
+
+<template>
+  <view class="min-h-screen bg-[#f6f7fb] px-[28rpx] pb-[88rpx] pt-[24rpx] text-[#1c1c3c]">
+    <view class="rounded-[28rpx] bg-gradient-to-br from-[#eef2ff] via-[#ffffff] to-[#ede9fe] p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.06)]">
+      <SectionTitle title="Layout 反馈宿主通信" subtitle="页面与子组件都直接调用 hooks，由 layout 持有 toast / dialog 组件实例" />
+      <text class="mt-[12rpx] block text-[22rpx] leading-[1.7] text-[#5b5b7b]">
+        推荐用法是业务侧只关心 useToast() / useDialog()，layout 负责注册宿主；页面和组件都不需要关心 id、selector，也不需要直接拿 layout 实例。
+      </text>
+    </view>
+
+    <view class="mt-[18rpx] rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+      <SectionTitle title="Bridge 状态" subtitle="当前页面是否成功解析到 layout 宿主" />
+      <view class="mt-[16rpx] flex flex-col gap-[12rpx]">
+        <view
+          v-for="item in bridgeStatus"
+          :key="item.key"
+          class="rounded-[18rpx] bg-[#f7f7fb] p-[16rpx]"
+        >
+          <view class="flex items-center justify-between">
+            <text class="text-[24rpx] font-semibold text-[#1f1a3f]">
+              {{ item.title }}
+            </text>
+            <t-tag :theme="item.ready ? 'success' : 'warning'" size="small" variant="light">
+              {{ item.ready ? 'Ready' : 'Pending' }}
+            </t-tag>
+          </view>
+          <text class="mt-[8rpx] block text-[20rpx] leading-[1.7] text-[#6f6b8a]">
+            {{ item.description }}
+          </text>
+        </view>
+      </view>
+    </view>
+
+    <view class="mt-[18rpx] rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+      <SectionTitle title="页面直接调用" subtitle="页面本身直接触发 layout 内的 toast / dialog 方法" />
+      <view class="mt-[16rpx] flex flex-col gap-[12rpx]">
+        <view id="layout-feedback-page-toast-trigger">
+          <t-button block theme="primary" @tap="triggerPageToast">
+            页面触发 Toast
+          </t-button>
+        </view>
+        <view id="layout-feedback-page-alert-trigger">
+          <t-button block theme="primary" variant="outline" @tap="triggerPageAlert">
+            页面触发 Alert
+          </t-button>
+        </view>
+        <view id="layout-feedback-page-confirm-trigger">
+          <t-button block theme="danger" variant="outline" @tap="triggerPageConfirm">
+            页面触发 Confirm
+          </t-button>
+        </view>
+      </view>
+    </view>
+
+    <view class="mt-[18rpx]">
+      <FeedbackCallerCard :on-report="onChildReport" />
+    </view>
+
+    <view class="mt-[18rpx] rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+      <SectionTitle title="通信日志" subtitle="观察页面与子组件调用 layout 宿主后的反馈结果" />
+      <view class="mt-[16rpx] flex flex-col gap-[10rpx]">
+        <view
+          v-for="(item, index) in actionLogs"
+          :key="`${item}-${index}`"
+          class="rounded-[16rpx] bg-[#f7f7fb] px-[16rpx] py-[14rpx]"
+        >
+          <text class="block text-[20rpx] leading-[1.7] text-[#4c4b6c]">
+            {{ item }}
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>

package/templates/wevu-tdesign/src/pages/layout-store/index.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { onUnload, setPageLayout, storeToRefs, watch } from 'wevu'
+import SectionTitle from '@/components/SectionTitle/index.vue'
+import { useLayoutInteractionDemoStore } from '@/stores/layoutInteractionDemo'
+
+definePageJson({
+  navigationBarTitleText: 'Store 调用 Layout',
+  backgroundColor: '#f6f7fb',
+})
+
+const store = useLayoutInteractionDemoStore()
+const { activeLayout, adminLayoutProps, commandStatus, lastResult, logs } = storeToRefs(store)
+
+watch([activeLayout, adminLayoutProps], ([layout, props]) => {
+  if (layout === 'admin') {
+    setPageLayout('admin', props)
+    return
+  }
+  setPageLayout('default')
+}, { immediate: true })
+
+function useDefaultLayout() {
+  store.setLayout('default')
+}
+
+function useAdminLayout() {
+  store.setLayout('admin')
+}
+
+function openToastByStore() {
+  store.triggerToast()
+}
+
+function openAlertByStore() {
+  store.triggerAlert()
+}
+
+function openConfirmByStore() {
+  store.triggerConfirm()
+}
+
+function clearLogs() {
+  store.resetLogs()
+}
+
+onUnload(() => {
+  setPageLayout('default')
+})
+</script>
+
+<template>
+  <view class="min-h-screen bg-[#f6f7fb] px-[28rpx] pb-[88rpx] pt-[24rpx] text-[#1c1c3c]">
+    <view class="rounded-[28rpx] bg-gradient-to-br from-[#e8f1ff] via-[#ffffff] to-[#eef2ff] p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.06)]">
+      <SectionTitle title="Store 驱动 Layout 交互" subtitle="wevu/store 发起意图，页面上下文消费后命中 layout 内的 toast / dialog 宿主" />
+      <text class="mt-[12rpx] block text-[22rpx] leading-[1.7] text-[#5b5b7b]">
+        推荐边界是 store 只保存布局状态和交互意图，真正调用 useToast() / useDialog() / setPageLayout() 仍由页面执行，这样不会把 page runtime hook 直接塞进 store。
+      </text>
+    </view>
+
+    <view class="mt-[18rpx] rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+      <SectionTitle title="当前状态" subtitle="观察 store 对布局和宿主交互的描述" />
+      <view class="mt-[16rpx] flex flex-col gap-[12rpx]">
+        <view class="rounded-[18rpx] bg-[#f7f7fb] p-[16rpx]">
+          <text class="text-[24rpx] font-semibold text-[#1f1a3f]">
+            当前布局：{{ activeLayout }}
+          </text>
+          <text class="mt-[8rpx] block text-[20rpx] leading-[1.7] text-[#6f6b8a]">
+            command 状态：{{ commandStatus }}
+          </text>
+        </view>
+        <view class="rounded-[18rpx] bg-[#f7f7fb] p-[16rpx]">
+          <text class="text-[24rpx] font-semibold text-[#1f1a3f]">
+            最近结果
+          </text>
+          <text class="mt-[8rpx] block text-[20rpx] leading-[1.7] text-[#6f6b8a]">
+            {{ lastResult }}
+          </text>
+        </view>
+      </view>
+    </view>
+
+    <view class="mt-[18rpx] rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+      <SectionTitle title="切换 Layout" subtitle="store 修改布局状态，页面 watch 后调用 setPageLayout()" />
+      <view class="mt-[16rpx] flex flex-col gap-[12rpx]">
+        <t-button block theme="primary" @tap="useDefaultLayout">
+          Store 切到 default 布局
+        </t-button>
+        <t-button block theme="primary" variant="outline" @tap="useAdminLayout">
+          Store 切到 admin 布局
+        </t-button>
+      </view>
+    </view>
+
+    <view class="mt-[18rpx] rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+      <SectionTitle title="触发 Layout 宿主" subtitle="store 直接调用 toast / dialog，命中当前 layout 内的反馈宿主" />
+      <view class="mt-[16rpx] flex flex-col gap-[12rpx]">
+        <t-button block theme="primary" @tap="openToastByStore">
+          Store 触发 Toast
+        </t-button>
+        <t-button block theme="primary" variant="outline" @tap="openAlertByStore">
+          Store 触发 Alert
+        </t-button>
+        <t-button block theme="danger" variant="outline" @tap="openConfirmByStore">
+          Store 触发 Confirm
+        </t-button>
+      </view>
+    </view>
+
+    <view class="mt-[18rpx] rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+      <SectionTitle title="通信日志" subtitle="记录 store 发出的布局切换与交互命令" />
+      <t-button class="mt-[16rpx]" size="small" theme="default" variant="outline" @tap="clearLogs">
+        清空日志
+      </t-button>
+      <view class="mt-[16rpx] flex flex-col gap-[10rpx]">
+        <view
+          v-for="(item, index) in logs"
+          :key="`${item}-${index}`"
+          class="rounded-[16rpx] bg-[#f7f7fb] px-[16rpx] py-[14rpx]"
+        >
+          <text class="block text-[20rpx] leading-[1.7] text-[#4c4b6c]">
+            {{ item }}
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>

package/templates/wevu-tdesign/src/pages/layouts/index.vue

@@ -50,6 +50,18 @@ function clearLayout() {
   setPageLayout(false)
   showToast('已关闭布局')
 }
+
+function openLayoutFeedbackDemo() {
+  wx.navigateTo({
+    url: '/pages/layout-feedback/index',
+  })
+}
+
+function openLayoutStoreDemo() {
+  wx.navigateTo({
+    url: '/pages/layout-store/index',
+  })
+}
 </script>
 
 <template>
@@ -90,5 +102,18 @@ function clearLayout() {
         </t-button>
       </view>
     </view>
+
+    <view class="mt-[18rpx] rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+      <SectionTitle title="通信演示" subtitle="查看页面/组件如何直接使用 layout 里的反馈宿主" />
+      <text class="mt-[12rpx] block text-[22rpx] leading-[1.7] text-[#6f6b8a]">
+        演示页会同时展示页面调用和子组件调用，它们都只依赖 useToast() / useDialog()，不会直接操作 layout 实例。
+      </text>
+      <t-button class="mt-[16rpx]" block theme="primary" variant="outline" @tap="openLayoutFeedbackDemo">
+        打开 Layout 通信演示
+      </t-button>
+      <t-button class="mt-[12rpx]" block theme="primary" variant="outline" @tap="openLayoutStoreDemo">
+        打开 Store 驱动 Layout 演示
+      </t-button>
+    </view>
   </view>
 </template>

package/templates/wevu-tdesign/src/stores/layoutInteractionDemo.ts

@@ -0,0 +1,129 @@
+import { computed, defineStore, ref } from 'wevu'
+import { alertDialog, confirmDialog } from '@/hooks/useDialog'
+import { showToast } from '@/hooks/useToast'
+
+export type LayoutKind = 'default' | 'admin'
+export type LayoutCommandType = 'toast' | 'alert' | 'confirm'
+export type LayoutCommandStatus = 'idle' | 'running'
+
+export interface LayoutCommand {
+  id: number
+  title: string
+  content: string
+  type: LayoutCommandType
+}
+
+function createLog(message: string) {
+  return `${new Date().toLocaleTimeString()} ${message}`
+}
+
+export const useLayoutInteractionDemoStore = defineStore('layout-interaction-demo', () => {
+  const activeLayout = ref<LayoutKind>('default')
+  const commandSeed = ref(0)
+  const commandStatus = ref<LayoutCommandStatus>('idle')
+  const lastResult = ref('尚未触发交互')
+  const logs = ref<string[]>([
+    createLog('Store 已就绪，当前由 store 直接调用 layout 宿主。'),
+  ])
+
+  const adminLayoutProps = computed(() => ({
+    title: 'Store Admin Layout',
+    subtitle: `当前通过 wevu/store 驱动，最近动作：${lastResult.value}`,
+  }))
+
+  function appendLog(message: string) {
+    logs.value = [createLog(message), ...logs.value].slice(0, 8)
+  }
+
+  function setLayout(layout: LayoutKind) {
+    activeLayout.value = layout
+    appendLog(`切换到 ${layout} 布局`)
+  }
+
+  function createCommand(type: LayoutCommandType, title: string, content: string): LayoutCommand {
+    commandSeed.value += 1
+    return {
+      id: commandSeed.value,
+      type,
+      title,
+      content,
+    }
+  }
+
+  async function runCommand(command: LayoutCommand) {
+    commandStatus.value = 'running'
+    appendLog(`Store 请求 ${command.title}`)
+
+    if (command.type === 'toast') {
+      showToast(command.content)
+      finishCommand(`${command.title} 已由 ${activeLayout.value} layout 宿主展示`)
+      return
+    }
+
+    if (command.type === 'alert') {
+      await alertDialog({
+        title: command.title,
+        content: command.content,
+        confirmBtn: '知道了',
+      })
+      finishCommand(`${command.title} 已确认`)
+      return
+    }
+
+    try {
+      await confirmDialog({
+        title: command.title,
+        content: command.content,
+        confirmBtn: '确认',
+        cancelBtn: '取消',
+      })
+      finishCommand(`${command.title} 点击确认`)
+    }
+    catch {
+      finishCommand(`${command.title} 点击取消`)
+    }
+  }
+
+  function triggerToast() {
+    return runCommand(
+      createCommand('toast', `Store Toast #${commandSeed.value + 1}`, `当前由 ${activeLayout.value} layout 宿主展示 toast。`),
+    )
+  }
+
+  function triggerAlert() {
+    return runCommand(
+      createCommand('alert', `Store Alert #${commandSeed.value + 1}`, `当前由 ${activeLayout.value} layout 宿主展示 alert。`),
+    )
+  }
+
+  function triggerConfirm() {
+    return runCommand(
+      createCommand('confirm', `Store Confirm #${commandSeed.value + 1}`, `请确认由 ${activeLayout.value} layout 宿主承载的确认弹窗。`),
+    )
+  }
+
+  function finishCommand(message: string) {
+    lastResult.value = message
+    commandStatus.value = 'idle'
+    appendLog(message)
+  }
+
+  function resetLogs() {
+    logs.value = [createLog('已清空日志，继续观察 store 与 layout 的通信。')]
+    lastResult.value = '日志已清空'
+  }
+
+  return {
+    activeLayout,
+    adminLayoutProps,
+    commandStatus,
+    lastResult,
+    logs,
+    finishCommand,
+    resetLogs,
+    setLayout,
+    triggerAlert,
+    triggerConfirm,
+    triggerToast,
+  }
+})