create-weapp-vite 2.0.4 → 2.0.5

package/package.json

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

package/templates/wevu-tdesign/src/components/QuickActionGrid/index.vue

@@ -1,38 +1,28 @@
 <script setup lang="ts">
+import type { QuickActionItem } from '@/types/action'
+
 import { computed } from 'wevu'
 
 const props = withDefaults(defineProps<{
   title: string
   subtitle?: string
-  items?: ActionItem[]
+  items?: QuickActionItem[]
 }>(), {
   subtitle: '',
   items: () => [],
 })
 
 const emit = defineEmits<{
-  (e: 'select', item: ActionItem): void
+  (e: 'select', item: QuickActionItem): void
 }>()
 
 defineComponentJson({
   styleIsolation: 'apply-shared',
 })
 
-interface ActionItem {
-  key: string
-  title: string
-  description?: string
-  icon?: string
-  tag?: string
-  tone?: 'brand' | 'neutral'
-  disabled?: boolean
-  path?: string
-  type?: 'tab' | 'sub'
-}
-
 const cards = computed(() => (Array.isArray(props.items) ? props.items : []))
 
-function onSelect(item: ActionItem) {
+function onSelect(item: QuickActionItem) {
   if (item.disabled) {
     return
   }

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

@@ -0,0 +1,32 @@
+import Dialog from 'tdesign-miniprogram/dialog/index'
+import { getCurrentInstance } from 'wevu'
+
+export interface DialogOptions {
+  selector?: string
+}
+
+export interface AlertOptions {
+  title: string
+  content: string
+  confirmBtn?: string
+}
+
+export function useDialog(options: DialogOptions = {}) {
+  const mpContext = getCurrentInstance()
+  const selector = options.selector ?? '#t-dialog'
+
+  function alert(payload: AlertOptions) {
+    if (!mpContext) {
+      return
+    }
+    Dialog.alert({
+      selector,
+      context: mpContext as any,
+      ...payload,
+    })
+  }
+
+  return {
+    alert,
+  }
+}

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

@@ -0,0 +1,17 @@
+import type { ModelBindingOptions, ModelBindingPayload } from 'wevu'
+import { useBindModel } from 'wevu'
+
+export function useFormBinder() {
+  const bindModel = useBindModel()
+
+  function changeModel<T, ValueProp extends string = 'value', Formatted = T>(
+    path: string,
+    options?: ModelBindingOptions<T, 'change', ValueProp, Formatted>,
+  ): ModelBindingPayload<T, 'change', ValueProp, Formatted> {
+    return bindModel(path).model({ event: 'change', ...options })
+  }
+
+  return {
+    changeModel,
+  }
+}

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

@@ -0,0 +1,11 @@
+import { onPullDownRefresh } from 'wevu'
+
+export function usePullDownRefresh(refresh: () => void | Promise<void>) {
+  onPullDownRefresh(() => {
+    const result = refresh()
+    if (result && typeof (result as Promise<void>).catch === 'function') {
+      ;(result as Promise<void>).catch(() => {})
+    }
+    wx.stopPullDownRefresh()
+  })
+}

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

@@ -0,0 +1,34 @@
+import Toast from 'tdesign-miniprogram/toast/index'
+import { getCurrentInstance } from 'wevu'
+
+export type ToastTheme = 'success' | 'warning' | 'error' | 'default' | 'loading'
+
+export interface ToastOptions {
+  selector?: string
+  duration?: number
+  theme?: ToastTheme
+}
+
+export function useToast(options: ToastOptions = {}) {
+  const mpContext = 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,
+  }
+}

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

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import Dialog from 'tdesign-miniprogram/dialog/index'
-import Toast from 'tdesign-miniprogram/toast/index'
-
-import { getCurrentInstance, ref } from 'wevu'
+import { ref } from 'wevu'
 
 import SectionTitle from '@/components/SectionTitle/index.vue'
+import { useDialog } from '@/hooks/useDialog'
+import { useToast } from '@/hooks/useToast'
 
 definePageJson({
   navigationBarTitleText: '能力',
   backgroundColor: '#f6f7fb',
 })
 
-const mpContext = getCurrentInstance()
+const { alert } = useDialog()
+const { showToast } = useToast()
 
 const capabilityCards = ref([
   {
@@ -43,19 +43,6 @@ const capabilityCards = ref([
 
 const subscribeTemplateId = ''
 
-function showToast(message: string, theme: 'success' | 'warning' = 'success') {
-  if (!mpContext) {
-    return
-  }
-  Toast({
-    selector: '#t-toast',
-    context: mpContext as any,
-    message,
-    theme,
-    duration: 1200,
-  })
-}
-
 function handleCapability(key: string) {
   switch (key) {
     case 'scan':
@@ -108,11 +95,9 @@ function handleCapability(key: string) {
 
 function requestSubscribe() {
   if (!subscribeTemplateId) {
-    Dialog.alert({
-      selector: '#t-dialog',
+    alert({
       title: '订阅消息',
       content: '请在 ability 页面配置订阅模板 ID 后再试。',
-      context: mpContext as any,
       confirmBtn: '知道了',
     })
     return

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

@@ -1,26 +1,22 @@
 <script setup lang="ts">
 import type { UploadFile } from 'tdesign-miniprogram/upload/type'
-import type { ModelBindingOptions, ModelBindingPayload } from 'wevu'
-import Toast from 'tdesign-miniprogram/toast/index'
 
-import { computed, getCurrentInstance, reactive, ref, useBindModel, watch } from 'wevu'
+import { computed, reactive, ref, watch } from 'wevu'
 
 import FormRow from '@/components/FormRow/index.vue'
 import FormStep from '@/components/FormStep/index.vue'
 import ResultCard from '@/components/ResultCard/index.vue'
 import SectionTitle from '@/components/SectionTitle/index.vue'
+import { useFormBinder } from '@/hooks/useFormBinder'
+import { useToast } from '@/hooks/useToast'
 
 definePageJson({
   navigationBarTitleText: '表单',
   backgroundColor: '#f6f7fb',
 })
 
-const mpContext = getCurrentInstance()
-const bindModel = useBindModel()
-
-function changeModel<T, ValueProp extends string = 'value', Formatted = T>(path: string, options?: ModelBindingOptions<T, 'change', ValueProp, Formatted>): ModelBindingPayload<T, 'change', ValueProp, Formatted> {
-  return bindModel(path).model({ event: 'change', ...options })
-}
+const { changeModel } = useFormBinder()
+const { showToast } = useToast()
 
 const steps = [
   { key: 'basic', title: '基础信息', subtitle: '业务基本配置' },
@@ -104,19 +100,6 @@ const attachmentsModel = changeModel<UploadFile[], 'files'>('formState.attachmen
   parser: event => event?.detail?.files ?? [],
 })
 
-function showToast(message: string, theme: 'success' | 'warning' = 'success') {
-  if (!mpContext) {
-    return
-  }
-  Toast({
-    selector: '#t-toast',
-    context: mpContext as any,
-    message,
-    theme,
-    duration: 1200,
-  })
-}
-
 function goNext() {
   if (!canGoNext.value) {
     showToast('请先完善当前步骤信息', 'warning')

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

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import Toast from 'tdesign-miniprogram/toast/index'
-
-import { computed, getCurrentInstance, onPullDownRefresh, ref, watch } from 'wevu'
+import type { QuickActionItem } from '@/types/action'
 
+import { computed, ref, watch } from 'wevu'
 import KpiBoard from '@/components/KpiBoard/index.vue'
 import QuickActionGrid from '@/components/QuickActionGrid/index.vue'
+import { usePullDownRefresh } from '@/hooks/usePullDownRefresh'
+import { useToast } from '@/hooks/useToast'
 
 definePageJson({
   navigationBarTitleText: '首页',
@@ -12,7 +13,7 @@ definePageJson({
   backgroundColor: '#f6f7fb',
 })
 
-const mpContext = getCurrentInstance()
+const { showToast } = useToast()
 
 const noticeText = ref('欢迎体验 wevu + weapp-vite + TDesign 模板，已启用分包与多页面导航。')
 const lastUpdated = ref('刚刚')
@@ -56,7 +57,7 @@ const kpiItems = computed(() => {
   ]
 })
 
-const quickActions = ref([
+const quickActions = ref<QuickActionItem[]>([
   {
     key: 'data',
     title: '数据洞察',
@@ -140,30 +141,14 @@ watch(refreshSeed, () => {
   lastUpdated.value = `更新于 ${new Date().toLocaleTimeString()}`
 })
 
-onPullDownRefresh(() => {
-  refreshDashboard()
-  wx.stopPullDownRefresh()
-})
-
-function showToast(message: string) {
-  if (!mpContext) {
-    return
-  }
-  Toast({
-    selector: '#t-toast',
-    context: mpContext as any,
-    message,
-    theme: 'success',
-    duration: 1200,
-  })
-}
+usePullDownRefresh(refreshDashboard)
 
 function refreshDashboard() {
   refreshSeed.value = Math.max(1, Math.floor(Math.random() * 9))
   showToast('指标已刷新')
 }
 
-function onQuickAction(action: { path?: string, type?: 'tab' | 'sub', title: string }) {
+function onQuickAction(action: QuickActionItem) {
   if (!action.path) {
     showToast('该入口暂未配置')
     return

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

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import Toast from 'tdesign-miniprogram/toast/index'
-
-import { computed, getCurrentInstance, onPullDownRefresh, ref, watch } from 'wevu'
+import type { ListItem, StatusFilter, StatusFilterValue } from '@/types/list'
 
+import { computed, ref, watch } from 'wevu'
 import EmptyState from '@/components/EmptyState/index.vue'
 import FilterBar from '@/components/FilterBar/index.vue'
 import SectionTitle from '@/components/SectionTitle/index.vue'
+import { usePullDownRefresh } from '@/hooks/usePullDownRefresh'
+import { useToast } from '@/hooks/useToast'
+import { buildStatusFilters, filterListItems } from '@/utils/listFilters'
 
 definePageJson({
   navigationBarTitleText: '清单',
@@ -13,13 +15,13 @@ definePageJson({
   enablePullDownRefresh: true,
 })
 
-const mpContext = getCurrentInstance()
+const { showToast } = useToast({ duration: 1000 })
 
 const query = ref('')
-const activeStatus = ref('all')
+const activeStatus = ref<StatusFilterValue>('all')
 const loading = ref(true)
 
-const items = ref([
+const items = ref<ListItem[]>([
   {
     id: 1,
     title: '门店会员激活方案',
@@ -54,50 +56,21 @@ const items = ref([
   },
 ])
 
-interface StatusFilter { value: string, label: string, count?: number }
-
 const statusFilters = ref<StatusFilter[]>([])
 
 function rebuildStatusFilters() {
-  const source = Array.isArray(items.value) ? items.value : []
-  const summary = source.reduce<Record<string, number>>((acc, item) => {
-    acc[item.status] = (acc[item.status] ?? 0) + 1
-    return acc
-  }, {})
-  statusFilters.value = [
-    { value: 'all', label: '全部', count: source.length },
-    { value: 'processing', label: '进行中', count: summary.processing ?? 0 },
-    { value: 'pending', label: '待启动', count: summary.pending ?? 0 },
-    { value: 'done', label: '已完成', count: summary.done ?? 0 },
-  ]
+  statusFilters.value = buildStatusFilters(items.value)
 }
 
 rebuildStatusFilters()
 watch(items, rebuildStatusFilters, { deep: true })
 
 const filteredItems = computed(() =>
-  items.value.filter((item) => {
-    const matchStatus = activeStatus.value === 'all' || item.status === activeStatus.value
-    const matchQuery = !query.value || item.title.includes(query.value) || item.owner.includes(query.value)
-    return matchStatus && matchQuery
-  }),
+  filterListItems(items.value, query.value, activeStatus.value),
 )
 
 const hasEmpty = computed(() => !loading.value && filteredItems.value.length === 0)
 
-function showToast(message: string) {
-  if (!mpContext) {
-    return
-  }
-  Toast({
-    selector: '#t-toast',
-    context: mpContext as any,
-    message,
-    theme: 'success',
-    duration: 1000,
-  })
-}
-
 function reload() {
   loading.value = true
   setTimeout(() => {
@@ -110,10 +83,7 @@ function onAction(item: (typeof items.value)[number]) {
   showToast(`打开「${item.title}」详情`)
 }
 
-onPullDownRefresh(() => {
-  reload()
-  wx.stopPullDownRefresh()
-})
+usePullDownRefresh(reload)
 
 reload()
 </script>

package/templates/wevu-tdesign/src/types/action.ts

@@ -0,0 +1,14 @@
+export type ActionTone = 'brand' | 'neutral'
+export type ActionType = 'tab' | 'sub'
+
+export interface QuickActionItem {
+  key: string
+  title: string
+  description?: string
+  icon?: string
+  tag?: string
+  tone?: ActionTone
+  disabled?: boolean
+  path?: string
+  type?: ActionType
+}

package/templates/wevu-tdesign/src/types/list.ts

@@ -0,0 +1,17 @@
+export type ListStatus = 'processing' | 'pending' | 'done'
+export type StatusFilterValue = 'all' | ListStatus
+
+export interface ListItem {
+  id: number
+  title: string
+  owner: string
+  status: ListStatus
+  deadline: string
+  priority: string
+}
+
+export interface StatusFilter {
+  value: StatusFilterValue
+  label: string
+  count?: number
+}

package/templates/wevu-tdesign/src/utils/listFilters.ts

@@ -0,0 +1,34 @@
+import type { ListItem, ListStatus, StatusFilter, StatusFilterValue } from '@/types/list'
+
+export function buildStatusFilters(items: ListItem[]): StatusFilter[] {
+  const summary: Record<ListStatus, number> = {
+    processing: 0,
+    pending: 0,
+    done: 0,
+  }
+
+  for (const item of items) {
+    summary[item.status] += 1
+  }
+
+  return [
+    { value: 'all', label: '全部', count: items.length },
+    { value: 'processing', label: '进行中', count: summary.processing },
+    { value: 'pending', label: '待启动', count: summary.pending },
+    { value: 'done', label: '已完成', count: summary.done },
+  ]
+}
+
+export function filterListItems(
+  items: ListItem[],
+  query: string,
+  activeStatus: StatusFilterValue,
+) {
+  const keyword = query.trim()
+
+  return items.filter((item) => {
+    const matchStatus = activeStatus === 'all' || item.status === activeStatus
+    const matchQuery = !keyword || item.title.includes(keyword) || item.owner.includes(keyword)
+    return matchStatus && matchQuery
+  })
+}