create-weapp-vite 2.0.53 → 2.0.57

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

@@ -2,31 +2,73 @@ import Dialog from 'tdesign-miniprogram/dialog/index'
 import { getCurrentInstance } from 'wevu'
 
 export interface DialogOptions {
+  context?: any
   selector?: string
 }
 
 export interface AlertOptions {
-  title: string
+  confirmBtn?: string
   content: string
+  context?: any
+  selector?: string
+  title: string
+}
+
+export interface ConfirmOptions {
+  cancelBtn?: string
   confirmBtn?: string
+  content: string
+  context?: any
+  selector?: string
+  title: string
 }
 
-export function useDialog(options: DialogOptions = {}) {
-  const mpContext = getCurrentInstance()
-  const selector = options.selector ?? '#t-dialog'
+function resolveDialogContext(context?: any) {
+  return context ?? getCurrentInstance()
+}
+
+export function alertDialog(payload: AlertOptions) {
+  const context = resolveDialogContext(payload.context)
+  if (!context) {
+    return
+  }
+  const { selector = '#t-dialog', ...rest } = payload
+  return Dialog.alert({
+    selector,
+    context: context as any,
+    ...rest,
+  })
+}
 
-  function alert(payload: AlertOptions) {
-    if (!mpContext) {
-      return
-    }
-    Dialog.alert({
-      selector,
-      context: mpContext as any,
-      ...payload,
-    })
+export function confirmDialog(payload: ConfirmOptions) {
+  const context = resolveDialogContext(payload.context)
+  if (!context) {
+    return
   }
+  const { selector = '#t-dialog', ...rest } = payload
+  return Dialog.confirm({
+    selector,
+    context: context as any,
+    ...rest,
+  })
+}
 
+export function useDialog(options: DialogOptions = {}) {
+  const context = options.context ?? getCurrentInstance()
   return {
-    alert,
+    alert(payload: AlertOptions) {
+      return alertDialog({
+        ...payload,
+        context: payload.context ?? context,
+        selector: payload.selector ?? options.selector,
+      })
+    },
+    confirm(payload: ConfirmOptions) {
+      return confirmDialog({
+        ...payload,
+        context: payload.context ?? context,
+        selector: payload.selector ?? options.selector,
+      })
+    },
   }
 }

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

@@ -3,32 +3,59 @@ import { getCurrentInstance } from 'wevu'
 
 export type ToastTheme = 'success' | 'warning' | 'error' | 'default' | 'loading'
 
+export interface ShowToastPayload {
+  context?: any
+  duration?: number
+  icon?: string
+  message?: string
+  placement?: string
+  selector?: string
+  theme?: ToastTheme
+  title?: string
+}
+
 export interface ToastOptions {
   selector?: string
   duration?: number
   theme?: ToastTheme
 }
 
-export function useToast(options: ToastOptions = {}) {
+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
+  if (!context) {
+    return
+  }
+
+  const { selector = '#t-toast', theme: nextTheme, title, message, ...rest } = normalized
+  Toast({
+    selector,
+    context: context as any,
+    message: message ?? title ?? '',
+    ...rest,
+    ...(nextTheme && nextTheme !== 'default' ? { theme: nextTheme } : {}),
+  } as any)
+}
+
+export function useToast(options: ToastOptions = {}) {
+  const context = getCurrentInstance()
   const selector = options.selector ?? '#t-toast'
   const duration = options.duration ?? 1200
   const defaultTheme = options.theme ?? 'success'
 
-  function showToast(message: string, theme: ToastTheme = defaultTheme) {
-    if (!mpContext) {
-      return
-    }
-    Toast({
-      selector,
-      context: mpContext as any,
-      message,
-      theme,
-      duration,
-    })
-  }
-
   return {
-    showToast,
+    showToast(message: string, theme: ToastTheme = defaultTheme) {
+      return showToast({
+        context,
+        selector,
+        message,
+        duration,
+        ...(theme === 'default' ? {} : { theme }),
+      })
+    },
   }
 }

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps<{
+  subtitle?: string
+  title?: string
+}>()
+
+defineComponentJson({
+  component: true,
+  usingComponents: {
+    't-dialog': 'tdesign-miniprogram/dialog/dialog',
+    't-toast': 'tdesign-miniprogram/toast/toast',
+  },
+})
+</script>
+
+<template>
+  <view class="layout-admin min-h-full bg-[linear-gradient(180deg,#f8f7ff_0%,#f1efff_100%)]">
+    <view class="rounded-b-[32rpx] bg-[linear-gradient(145deg,#2f2b5f_0%,#4b3fb8_64%,#8b7bff_100%)] px-[32rpx] pb-[32rpx] pt-[36rpx] text-white shadow-[0_18rpx_42rpx_rgba(75,63,184,0.18)]">
+      <text class="inline-flex rounded-full bg-white/15 px-[16rpx] py-[8rpx] text-[22rpx]">
+        layouts/admin.vue
+      </text>
+      <text class="mt-[18rpx] block text-[46rpx] font-semibold">
+        {{ props.title || 'Admin Layout' }}
+      </text>
+      <text class="mt-[12rpx] block text-[24rpx] leading-[1.7] text-white/90">
+        {{ props.subtitle || '页面内容通过默认 slot 注入到布局中。' }}
+      </text>
+    </view>
+    <view class="pb-[32rpx]">
+      <slot />
+    </view>
+    <t-toast id="t-toast" />
+    <t-dialog id="t-dialog" />
+  </view>
+</template>
+
+<style>
+.layout-admin {
+  min-height: 100%;
+}
+</style>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineComponentJson({
+  component: true,
+  usingComponents: {
+    't-dialog': 'tdesign-miniprogram/dialog/dialog',
+    't-toast': 'tdesign-miniprogram/toast/toast',
+  },
+})
+</script>
+
+<template>
+  <view class="layout-default">
+    <slot />
+    <t-toast id="t-toast" />
+    <t-dialog id="t-dialog" />
+  </view>
+</template>
+
+<style>
+.layout-default {
+  min-height: 100%;
+}
+</style>

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

@@ -43,8 +43,7 @@ const capabilityCards = ref([
 
 const subscribeTemplateId = ''
 
-function handleCapability(key: string, what: any) {
-  console.log('handleCapability', key, what)
+function handleCapability(key: string) {
   switch (key) {
     case 'scan':
       wx.scanCode({
@@ -130,7 +129,7 @@ function navigateTo(url: string) {
           v-for="item in capabilityCards"
           :key="item.key"
           class="rounded-[18rpx] bg-[#f0f9ff] p-[16rpx]"
-          @tap="handleCapability(item.key, 'test')"
+          @tap="handleCapability(item.key)"
         >
           <text class="text-[24rpx] font-semibold text-[#1f1a3f]">
             {{ item.title }}
@@ -157,8 +156,5 @@ function navigateTo(url: string) {
         </t-cell-group>
       </view>
     </view>
-
-    <t-toast id="t-toast" />
-    <t-dialog id="t-dialog" />
   </view>
 </template>

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

@@ -241,7 +241,5 @@ function submit() {
         {{ currentStep === steps.length - 1 ? (submitted ? '已提交' : '提交') : '下一步' }}
       </t-button>
     </view>
-
-    <t-toast id="t-toast" />
   </view>
 </template>

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

@@ -98,6 +98,16 @@ const quickActions = ref<QuickActionItem[]>([
     path: '/pages/ability/index',
     type: 'tab',
   },
+  {
+    key: 'layouts',
+    title: '布局能力',
+    description: 'default / admin / false',
+    icon: 'layers',
+    tag: 'Layout',
+    tone: 'brand',
+    path: '/pages/layouts/index',
+    type: 'sub',
+  },
   {
     key: 'lab',
     title: '组件实验室',
@@ -141,13 +151,13 @@ watch(refreshSeed, () => {
   lastUpdated.value = `更新于 ${new Date().toLocaleTimeString()}`
 })
 
-usePullDownRefresh(refreshDashboard)
-
 function refreshDashboard() {
   refreshSeed.value = Math.max(1, Math.floor(Math.random() * 9))
   showToast('指标已刷新')
 }
 
+usePullDownRefresh(refreshDashboard)
+
 function onQuickAction(action: QuickActionItem) {
   if (!action.path) {
     showToast('该入口暂未配置')
@@ -303,7 +313,5 @@ function onQuickAction(action: QuickActionItem) {
         </t-cell-group>
       </view>
     </view>
-
-    <t-toast id="t-toast" />
   </view>
 </template>

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

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref, setPageLayout } from 'wevu'
+
+import SectionTitle from '@/components/SectionTitle/index.vue'
+import { useToast } from '@/hooks/useToast'
+
+definePageJson({
+  navigationBarTitleText: '布局',
+  backgroundColor: '#f6f7fb',
+})
+
+const { showToast } = useToast()
+const currentLayout = ref<'default' | 'admin' | 'none'>('default')
+
+const cards = [
+  {
+    key: 'default',
+    title: 'default 布局',
+    desc: '页面未声明 layout 时，会自动命中 src/layouts/default.vue。',
+  },
+  {
+    key: 'admin',
+    title: 'admin 布局',
+    desc: '通过 setPageLayout(\'admin\') 切换到命名布局，并把 title/subtitle 作为 props 传给布局组件。',
+  },
+  {
+    key: 'none',
+    title: '关闭布局',
+    desc: '通过 setPageLayout(false) 临时移除页面壳，用于沉浸式页或特殊根结构。',
+  },
+]
+
+function applyDefaultLayout() {
+  currentLayout.value = 'default'
+  setPageLayout('default')
+  showToast('已切回 default 布局')
+}
+
+function applyAdminLayout() {
+  currentLayout.value = 'admin'
+  setPageLayout('admin', {
+    title: 'Studio Admin',
+    subtitle: '这个标题来自 setPageLayout() 运行时传入的 props。',
+  })
+  showToast('已切换到 admin 布局')
+}
+
+function clearLayout() {
+  currentLayout.value = 'none'
+  setPageLayout(false)
+  showToast('已关闭布局')
+}
+</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="页面布局能力" subtitle="基础模板已接入 src/layouts 目录约定" />
+      <text class="mt-[12rpx] block text-[22rpx] leading-[1.7] text-[#5b5b7b]">
+        当前状态：{{ currentLayout }}。可在 default、admin 与 false 三种模式之间切换，用来承接后台页、运营页或沉浸式页面。
+      </text>
+    </view>
+
+    <view class="mt-[18rpx] flex flex-col gap-[14rpx]">
+      <view
+        v-for="item in cards"
+        :key="item.key"
+        class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]"
+      >
+        <text class="text-[28rpx] font-semibold text-[#1f1a3f]">
+          {{ item.title }}
+        </text>
+        <text class="mt-[10rpx] block text-[22rpx] leading-[1.7] text-[#6f6b8a]">
+          {{ item.desc }}
+        </text>
+      </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="运行时调用 setPageLayout()" />
+      <view class="mt-[14rpx] flex flex-col gap-[12rpx]">
+        <t-button block theme="primary" @tap="applyDefaultLayout">
+          使用 default 布局
+        </t-button>
+        <t-button block theme="primary" variant="outline" @tap="applyAdminLayout">
+          切到 admin 布局
+        </t-button>
+        <t-button block theme="danger" variant="outline" @tap="clearLayout">
+          关闭布局
+        </t-button>
+      </view>
+    </view>
+  </view>
+</template>

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

@@ -142,7 +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>

package/templates/wevu-tdesign/src/subpackages/lab/index.vue

@@ -22,6 +22,22 @@ const tabs = [
   { value: 'display', label: '展示' },
 ]
 
+function handleTabChange(e: any) {
+  activeTab.value = String(e.detail.value)
+}
+
+function handleRateChange(e: any) {
+  rating.value = Number(e.detail.value)
+}
+
+function handleSliderChange(e: any) {
+  slider.value = Number(e.detail.value)
+}
+
+function handleToggleChange(e: any) {
+  toggle.value = Boolean(e.detail.value)
+}
+
 function navigateTo(url: string) {
   wx.navigateTo({
     url,
@@ -34,7 +50,7 @@ function navigateTo(url: string) {
     <view class="rounded-[28rpx] bg-gradient-to-br from-[#f5f3ff] via-[#ffffff] to-[#eef2ff] p-[20rpx]">
       <SectionTitle title="TDesign 组件实验室" subtitle="常用组件的组合应用" />
       <view class="mt-[12rpx]">
-        <t-tabs :value="activeTab" @change="(e) => (activeTab = e.detail.value)">
+        <t-tabs :value="activeTab" @change="handleTabChange">
           <t-tab-panel v-for="tab in tabs" :key="tab.value" :value="tab.value" :label="tab.label" />
         </t-tabs>
       </view>
@@ -68,7 +84,7 @@ function navigateTo(url: string) {
               B
             </t-avatar>
           </t-badge>
-          <t-avatar-group max="3" size="small">
+          <t-avatar-group :max="3" size="small">
             <t-avatar>U1</t-avatar>
             <t-avatar>U2</t-avatar>
             <t-avatar>U3</t-avatar>
@@ -92,14 +108,14 @@ function navigateTo(url: string) {
           <text class="text-[22rpx] text-[#6f6b8a]">
             满意度评分
           </text>
-          <t-rate :value="rating" @change="(e) => (rating = e.detail.value)" />
+          <t-rate :value="rating" @change="handleRateChange" />
         </view>
         <view class="flex items-center justify-between">
           <text class="text-[22rpx] text-[#6f6b8a]">
             阈值调整
           </text>
           <view class="flex items-center gap-[12rpx]">
-            <t-slider :value="slider" @change="(e) => (slider = e.detail.value)" />
+            <t-slider :value="slider" @change="handleSliderChange" />
             <text class="text-[22rpx] text-[#6f6b8a]">
               {{ slider }}%
             </text>
@@ -109,7 +125,7 @@ function navigateTo(url: string) {
           <text class="text-[22rpx] text-[#6f6b8a]">
             自动提醒
           </text>
-          <t-switch :value="toggle" @change="(e) => (toggle = e.detail.value)" />
+          <t-switch :value="toggle" @change="handleToggleChange" />
         </view>
       </view>
 
@@ -142,7 +158,7 @@ function navigateTo(url: string) {
           <text class="text-[22rpx] text-[#6f6b8a]">
             扫码体验
           </text>
-          <t-qrcode value="https://vite.icebreaker.top" size="90" />
+          <t-qrcode value="https://vite.icebreaker.top" :size="90" />
         </view>
       </view>
     </view>

package/templates/wevu-tdesign/tsconfig.json

@@ -1,10 +1,16 @@
 {
   "references": [
     {
-      "path": "./tsconfig.app.json"
+      "path": "./.weapp-vite/tsconfig.app.json"
     },
     {
-      "path": "./tsconfig.node.json"
+      "path": "./.weapp-vite/tsconfig.server.json"
+    },
+    {
+      "path": "./.weapp-vite/tsconfig.node.json"
+    },
+    {
+      "path": "./.weapp-vite/tsconfig.shared.json"
     }
   ],
   "files": []

package/templates/wevu-tdesign/vite.config.ts

@@ -11,6 +11,15 @@ export default defineConfig({
   },
   weapp: {
     srcRoot: 'src',
+    typescript: {
+      app: {
+        compilerOptions: {
+          paths: {
+            'tdesign-miniprogram/*': ['./node_modules/tdesign-miniprogram/miniprogram_dist/*'],
+          },
+        },
+      },
+    },
     autoRoutes: true,
     autoImportComponents: {
       resolvers: [TDesignResolver()],

package/templates/default/auto-import-components.json

@@ -1,3 +0,0 @@
-{
-  "HelloWorld": "/components/HelloWorld/HelloWorld"
-}

package/templates/default/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="weapp-vite/client" />

package/templates/default/tsconfig.app.json

@@ -1,49 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2023",
-    "jsx": "preserve",
-    "lib": [
-      "ES2023",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "moduleDetection": "force",
-    "baseUrl": ".",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    },
-    "resolveJsonModule": true,
-    "types": [
-      "miniprogram-api-typings"
-    ],
-    "allowImportingTsExtensions": true,
-    "allowJs": true,
-    "strict": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noEmit": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "isolatedModules": true,
-    "verbatimModuleSyntax": true,
-    "noUncheckedSideEffectImports": true,
-    "erasableSyntaxOnly": true,
-    "skipLibCheck": true
-  },
-  "vueCompilerOptions": {
-    "plugins": [
-      "weapp-vite/volar"
-    ]
-  },
-  "include": [
-    "src/**/*",
-    "types/**/*.d.ts",
-    "env.d.ts"
-  ]
-}

package/templates/default/tsconfig.node.json

@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": [
-      "ES2023"
-    ],
-    "moduleDetection": "force",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "types": [
-      "node"
-    ],
-    "allowImportingTsExtensions": true,
-    "strict": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noEmit": true,
-    "verbatimModuleSyntax": true,
-    "noUncheckedSideEffectImports": true,
-    "erasableSyntaxOnly": true,
-    "skipLibCheck": true
-  },
-  "include": [
-    "vite.config.ts",
-    "vite.config.*.ts",
-    "*.config.ts",
-    "config/**/*.ts",
-    "scripts/**/*.ts"
-  ]
-}

package/templates/lib/auto-import-components.json

@@ -1,3 +0,0 @@
-{
-  "HelloWorld": "/components/HelloWorld/HelloWorld"
-}

package/templates/lib/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="weapp-vite/client" />

package/templates/lib/tsconfig.app.json

@@ -1,49 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2023",
-    "jsx": "preserve",
-    "lib": [
-      "ES2023",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "moduleDetection": "force",
-    "baseUrl": ".",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    },
-    "resolveJsonModule": true,
-    "types": [
-      "miniprogram-api-typings"
-    ],
-    "allowImportingTsExtensions": true,
-    "allowJs": true,
-    "strict": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noEmit": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "isolatedModules": true,
-    "verbatimModuleSyntax": true,
-    "noUncheckedSideEffectImports": true,
-    "erasableSyntaxOnly": true,
-    "skipLibCheck": true
-  },
-  "vueCompilerOptions": {
-    "plugins": [
-      "weapp-vite/volar"
-    ]
-  },
-  "include": [
-    "src/**/*",
-    "types/**/*.d.ts",
-    "env.d.ts"
-  ]
-}