create-weapp-vite 2.0.58 → 2.0.60

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>
 
@@ -313,6 +375,5 @@ function onQuickAction(action: QuickActionItem) {
         </t-cell-group>
       </view>
     </view>
-    <t-toast id="t-toast" />
   </view>
 </template>

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,6 +102,18 @@ function clearLayout() {
         </t-button>
       </view>
     </view>
-    <t-toast id="t-toast" />
+
+    <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/pages/list/index.vue

@@ -142,6 +142,5 @@ reload()
     <view v-if="hasEmpty" class="mt-[20rpx]">
       <EmptyState title="暂无匹配任务" description="调整筛选条件或刷新数据" action-text="重新加载" @action="reload" />
     </view>
-    <t-toast id="t-toast" />
   </view>
 </template>