create-weapp-vite 1.3.2 → 1.3.3

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

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import Toast from 'tdesign-miniprogram/toast/index'
+
+import { computed, getCurrentInstance, 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'
+
+definePageJson({
+  navigationBarTitleText: '表单',
+  backgroundColor: '#f6f7fb',
+})
+
+const mpContext = getCurrentInstance()
+
+const steps = [
+  { key: 'basic', title: '基础信息', subtitle: '业务基本配置' },
+  { key: 'strategy', title: '执行策略', subtitle: '预算与节奏' },
+  { key: 'confirm', title: '确认提交', subtitle: '核对并提交' },
+]
+
+const currentStep = ref(0)
+const submitted = ref(false)
+
+const formState = reactive({
+  name: '',
+  owner: '',
+  category: 'growth',
+  urgent: false,
+  budget: 30,
+  pace: 'balanced',
+  description: '',
+  attachments: [] as Array<{ url: string, name: string }>,
+})
+
+const categories = [
+  { value: 'growth', label: '增长' },
+  { value: 'retention', label: '留存' },
+  { value: 'brand', label: '品牌' },
+]
+
+const paceOptions = [
+  { value: 'fast', label: '快速推进' },
+  { value: 'balanced', label: '平衡' },
+  { value: 'steady', label: '稳健' },
+]
+
+const riskLevel = computed(() => {
+  if (formState.urgent && formState.budget > 60) {
+    return '高风险'
+  }
+  if (formState.budget > 40) {
+    return '中风险'
+  }
+  return '可控'
+})
+
+const canGoNext = computed(() => {
+  if (currentStep.value === 0) {
+    return !!formState.name && !!formState.owner
+  }
+  if (currentStep.value === 1) {
+    return !!formState.description
+  }
+  return true
+})
+
+const summaryRows = computed(() => [
+  { label: '项目名称', value: formState.name || '--' },
+  { label: '负责人', value: formState.owner || '--' },
+  { label: '类型', value: categories.find(item => item.value === formState.category)?.label ?? '--' },
+  { label: '预算', value: `${formState.budget} 万` },
+  { label: '节奏', value: paceOptions.find(item => item.value === formState.pace)?.label ?? '--' },
+  { label: '风险级别', value: riskLevel.value },
+])
+
+watch(
+  () => formState.urgent,
+  (value) => {
+    if (value) {
+      formState.pace = 'fast'
+    }
+  },
+)
+
+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')
+    return
+  }
+  if (currentStep.value < steps.length - 1) {
+    currentStep.value += 1
+  }
+}
+
+function goPrev() {
+  if (currentStep.value > 0) {
+    currentStep.value -= 1
+  }
+}
+
+function submit() {
+  submitted.value = true
+  showToast('提交成功')
+}
+
+function onUploadChange(e: WechatMiniprogram.CustomEvent<{ files: Array<{ url: string, name: string }> }>) {
+  formState.attachments = e.detail.files
+}
+</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-[#fff7ed] via-[#ffffff] to-[#fef3c7] p-[20rpx]">
+      <SectionTitle title="项目提报" subtitle="示例多步表单与联动校验" />
+      <view class="mt-[12rpx]">
+        <t-steps :current="currentStep" layout="horizontal">
+          <t-step-item v-for="item in steps" :key="item.key" :title="item.title" />
+        </t-steps>
+      </view>
+    </view>
+
+    <view class="mt-[18rpx] space-y-[14rpx]">
+      <FormStep
+        v-if="currentStep === 0"
+        :step="1"
+        title="基础信息"
+        subtitle="填写核心字段"
+        :active="currentStep === 0"
+      >
+        <view class="flex flex-col gap-[14rpx]">
+          <FormRow label="项目名称">
+            <t-input
+              placeholder="例如：新客增长计划"
+              :value="formState.name"
+              @change="(e) => (formState.name = e.detail.value)"
+            />
+          </FormRow>
+          <FormRow label="负责人">
+            <t-input
+              placeholder="例如：王凯"
+              :value="formState.owner"
+              @change="(e) => (formState.owner = e.detail.value)"
+            />
+          </FormRow>
+          <FormRow label="类型">
+            <t-radio-group :value="formState.category" @change="(e) => (formState.category = e.detail.value)">
+              <t-radio v-for="item in categories" :key="item.value" :value="item.value" :label="item.label" />
+            </t-radio-group>
+          </FormRow>
+          <FormRow label="加急">
+            <t-switch :value="formState.urgent" @change="(e) => (formState.urgent = e.detail.value)" />
+          </FormRow>
+        </view>
+      </FormStep>
+
+      <FormStep
+        v-if="currentStep === 1"
+        :step="2"
+        title="执行策略"
+        subtitle="预算与节奏"
+        :active="currentStep === 1"
+      >
+        <view class="flex flex-col gap-[14rpx]">
+          <FormRow label="预算规模" description="10-100 万">
+            <view class="flex items-center gap-[12rpx]">
+              <t-slider
+                :value="formState.budget"
+                :min="10"
+                :max="100"
+                @change="(e) => (formState.budget = e.detail.value)"
+              />
+              <text class="text-[22rpx] text-[#5c5b7a]">
+                {{ formState.budget }} 万
+              </text>
+            </view>
+          </FormRow>
+          <FormRow label="推进节奏">
+            <t-radio-group :value="formState.pace" @change="(e) => (formState.pace = e.detail.value)">
+              <t-radio v-for="item in paceOptions" :key="item.value" :value="item.value" :label="item.label" />
+            </t-radio-group>
+          </FormRow>
+          <FormRow label="补充说明">
+            <t-textarea
+              placeholder="描述目标与资源安排"
+              :value="formState.description"
+              :maxlength="140"
+              @change="(e) => (formState.description = e.detail.value)"
+            />
+          </FormRow>
+          <FormRow label="附件">
+            <t-upload
+              :files="formState.attachments"
+              :max="3"
+              @change="onUploadChange"
+            />
+          </FormRow>
+        </view>
+      </FormStep>
+
+      <FormStep
+        v-if="currentStep === 2"
+        :step="3"
+        title="确认提交"
+        subtitle="预览关键信息"
+        :active="currentStep === 2"
+      >
+        <ResultCard title="提交摘要" :items="summaryRows">
+          <template #action>
+            <t-tag size="small" theme="primary" variant="light">
+              {{ riskLevel }}
+            </t-tag>
+          </template>
+        </ResultCard>
+      </FormStep>
+    </view>
+
+    <view class="mt-[18rpx] flex gap-[12rpx]">
+      <t-button block variant="outline" theme="default" :disabled="currentStep === 0" @tap="goPrev">
+        上一步
+      </t-button>
+      <t-button
+        block
+        theme="primary"
+        :disabled="currentStep === steps.length - 1 && submitted"
+        @tap="currentStep === steps.length - 1 ? submit() : goNext()"
+      >
+        {{ currentStep === steps.length - 1 ? (submitted ? '已提交' : '提交') : '下一步' }}
+      </t-button>
+    </view>
+
+    <t-toast id="t-toast" />
+  </view>
+</template>

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

@@ -1,171 +1,273 @@
 <script setup lang="ts">
-import Dialog from 'tdesign-miniprogram/dialog/index'
 import Toast from 'tdesign-miniprogram/toast/index'
 
-import { computed, getCurrentInstance, ref, watch } from 'wevu'
+import { computed, getCurrentInstance, onPullDownRefresh, ref, watch } from 'wevu'
 
-import HelloWorld from '@/components/HelloWorld/index.vue'
+import KpiBoard from '@/components/KpiBoard/index.vue'
+import QuickActionGrid from '@/components/QuickActionGrid/index.vue'
 
 definePageJson({
   navigationBarTitleText: '首页',
+  enablePullDownRefresh: true,
+  backgroundColor: '#f6f7fb',
 })
 
 const mpContext = getCurrentInstance()
 
-const count = ref(0)
-const message = ref('Hello WeVU!')
-const todos = ref([
-  '用 Vue SFC 写页面/组件',
-  '用 wevu API（ref/computed/watch）写逻辑',
-  '用 v-for / v-if / @tap / v-model 写模板',
+const noticeText = ref('欢迎体验 wevu + weapp-vite + TDesign 模板，已启用分包与多页面导航。')
+const lastUpdated = ref('刚刚')
+const refreshSeed = ref(1)
+
+const kpiItems = computed(() => {
+  const seed = refreshSeed.value
+  return [
+    {
+      key: 'visits',
+      label: '今日访问',
+      value: 1280 + seed * 3,
+      unit: '次',
+      delta: 6 + seed,
+      footnote: '较昨日',
+    },
+    {
+      key: 'conversion',
+      label: '转化率',
+      value: 24 + seed,
+      unit: '%',
+      delta: 2,
+      footnote: '近 7 日',
+    },
+    {
+      key: 'tickets',
+      label: '待处理',
+      value: 18 - seed,
+      unit: '单',
+      delta: -1,
+      footnote: '来自清单',
+    },
+    {
+      key: 'satisfaction',
+      label: '满意度',
+      value: 4.8,
+      unit: '分',
+      delta: 0.2,
+      footnote: '客服评分',
+    },
+  ]
+})
+
+const quickActions = ref([
+  {
+    key: 'data',
+    title: '数据洞察',
+    description: '仪表盘与趋势',
+    icon: 'chart-analytics',
+    tag: 'KPI',
+    tone: 'brand',
+    path: '/pages/data/index',
+    type: 'tab',
+  },
+  {
+    key: 'form',
+    title: '流程表单',
+    description: '多步录入',
+    icon: 'edit-1',
+    tag: 'Flow',
+    tone: 'neutral',
+    path: '/pages/form/index',
+    type: 'tab',
+  },
+  {
+    key: 'list',
+    title: '清单看板',
+    description: '筛选与列表',
+    icon: 'view-list',
+    tag: 'List',
+    tone: 'neutral',
+    path: '/pages/list/index',
+    type: 'tab',
+  },
+  {
+    key: 'ability',
+    title: '能力中心',
+    description: '小程序 API',
+    icon: 'app',
+    tag: 'API',
+    tone: 'brand',
+    path: '/pages/ability/index',
+    type: 'tab',
+  },
+  {
+    key: 'lab',
+    title: '组件实验室',
+    description: 'TDesign 组件',
+    icon: 'grid-view',
+    tag: 'Lab',
+    tone: 'neutral',
+    path: '/subpackages/lab/index',
+    type: 'sub',
+  },
+  {
+    key: 'ability-lab',
+    title: 'API 场景',
+    description: '系统信息',
+    icon: 'share',
+    tag: 'Sub',
+    tone: 'neutral',
+    path: '/subpackages/ability/index',
+    type: 'sub',
+  },
 ])
-const checkedTodos = ref<Array<string | number>>([])
-const newTodo = ref('')
-
-const doubled = computed(() => count.value * 2)
-const todoOptions = computed(() =>
-  todos.value.map((todo, index) => ({
-    label: todo,
-    value: index,
-  })),
-)
-const checkedCount = computed(() => checkedTodos.value.length)
-
-function showToast(options: Parameters<typeof Toast>[0]) {
+
+const featureTags = [
+  'Composition API',
+  'SubPackages',
+  'Auto Import',
+  'Tailwind',
+]
+
+watch(refreshSeed, () => {
+  lastUpdated.value = `更新于 ${new Date().toLocaleTimeString()}`
+})
+
+onPullDownRefresh(() => {
+  refreshDashboard()
+  wx.stopPullDownRefresh()
+})
+
+function showToast(message: string) {
   if (!mpContext) {
     return
   }
   Toast({
     selector: '#t-toast',
-    ...options,
     context: mpContext as any,
-  })
-}
-
-function increment() {
-  count.value += 1
-  showToast({
+    message,
     theme: 'success',
-    message: `+1，当前：${count.value}`,
     duration: 1200,
   })
 }
 
-async function reset() {
-  if (!mpContext) {
-    count.value = 0
+function refreshDashboard() {
+  refreshSeed.value = Math.max(1, Math.floor(Math.random() * 9))
+  showToast('指标已刷新')
+}
+
+function onQuickAction(action: { path?: string, type?: 'tab' | 'sub', title: string }) {
+  if (!action.path) {
+    showToast('该入口暂未配置')
     return
   }
-
-  try {
-    await Dialog.confirm({
-      context: mpContext as any,
-      selector: '#t-dialog',
-      title: '重置计数器',
-      content: `当前计数为 ${count.value}，确定要重置吗？`,
-      confirmBtn: '重置',
-      cancelBtn: '取消',
+  if (action.type === 'tab') {
+    wx.switchTab({
+      url: action.path,
     })
-    count.value = 0
-    showToast({ theme: 'success', message: '已重置', duration: 1200 })
-  }
-  catch {
-    showToast({ theme: 'warning', message: '已取消', duration: 1000 })
-  }
-}
-
-watch(count, (newValue, oldValue) => {
-  console.log(`[wevu] count changed: ${oldValue} -> ${newValue}`)
-})
-
-function onMessageChange(e: WechatMiniprogram.CustomEvent<{ value: string }>) {
-  message.value = e.detail.value
-}
-
-function onMessageClear() {
-  message.value = ''
-}
-
-function onNewTodoChange(e: WechatMiniprogram.CustomEvent<{ value: string }>) {
-  newTodo.value = e.detail.value
-}
-
-function onNewTodoClear() {
-  newTodo.value = ''
-}
-
-function addTodo() {
-  const value = newTodo.value.trim()
-  if (!value) {
-    showToast({ theme: 'warning', message: '请输入内容', duration: 1000 })
     return
   }
-  todos.value.push(value)
-  newTodo.value = ''
-  showToast({ theme: 'success', message: '已添加', duration: 1000 })
-}
-
-function onTodoChange(e: WechatMiniprogram.CustomEvent<{ value: Array<string | number> }>) {
-  checkedTodos.value = e.detail.value
+  wx.navigateTo({
+    url: action.path,
+  })
 }
 </script>
 
 <template>
-  <view class="box-border min-h-screen bg-[#f6f7fb] px-[32rpx] pb-[64rpx] pt-[48rpx] text-[#1c1c3c]">
-    <HelloWorld :title="message" :subtitle="`count=${count}, doubled=${doubled}`" />
-
-    <view
-      class="mt-[24rpx] rounded-[24rpx] bg-white p-[32rpx] shadow-[0_12rpx_32rpx_rgb(44_44_84_/_10%)]"
-    >
-      <t-cell-group title="计数器" theme="card">
-        <t-cell title="当前计数" :note="`${count}`" />
-        <t-cell title="双倍" :note="`${doubled}`" />
-      </t-cell-group>
-
-      <view class="mt-[24rpx] flex gap-[16rpx]">
-        <t-button block size="large" theme="primary" style="flex: 1" @tap="increment">
-          +1
-        </t-button>
-        <t-button block size="large" theme="danger" variant="outline" style="flex: 1" @tap="reset">
-          重置
+  <view class="min-h-screen bg-[#f6f7fb] px-[28rpx] pb-[88rpx] pt-[32rpx] text-[#1c1c3c]">
+    <view class="rounded-[28rpx] bg-gradient-to-br from-[#2f2b5f] via-[#3b3573] to-[#5a48c5] p-[24rpx] text-white shadow-[0_24rpx_48rpx_rgba(47,43,95,0.35)]">
+      <text class="text-[38rpx] font-semibold">
+        Weapp Studio
+      </text>
+      <text class="mt-[8rpx] block text-[22rpx] text-white/80">
+        以场景驱动的模板，展示 wevu、weapp-vite 与 TDesign。
+      </text>
+      <view class="mt-[12rpx] flex flex-wrap gap-[8rpx]">
+        <t-tag v-for="tag in featureTags" :key="tag" size="small" theme="primary" variant="dark">
+          {{ tag }}
+        </t-tag>
+      </view>
+      <view class="mt-[16rpx] flex items-center justify-between">
+        <text class="text-[20rpx] text-white/70">
+          {{ lastUpdated }}
+        </text>
+        <t-button size="small" theme="default" variant="outline" @tap="refreshDashboard">
+          刷新指标
         </t-button>
       </view>
+    </view>
 
-      <view class="mt-[24rpx]">
-        <t-input
-          label="标题"
-          placeholder="输入标题…"
-          clearable
-          :value="message"
-          @change="onMessageChange"
-          @clear="onMessageClear"
-        />
-      </view>
+    <view class="mt-[16rpx]">
+      <t-notice-bar theme="info" :content="noticeText" />
+    </view>
 
-      <view class="mt-[24rpx]">
-        <t-input
-          label="新增待办"
-          placeholder="输入一条待办…"
-          clearable
-          :value="newTodo"
-          @change="onNewTodoChange"
-          @clear="onNewTodoClear"
-        />
-        <view class="mt-[16rpx]">
-          <t-button block size="large" theme="primary" variant="dashed" @tap="addTodo">
-            添加
+    <view class="mt-[20rpx]">
+      <KpiBoard title="今日概览" subtitle="实时跟踪业务健康度" :items="kpiItems">
+        <template #action>
+          <t-button size="small" theme="primary" variant="outline" @tap="refreshDashboard">
+            重新计算
           </t-button>
-        </view>
-      </view>
+        </template>
+        <template #items="{ items }">
+          <view v-for="card in items" :key="card.key" class="rounded-[18rpx] bg-[#f4f6ff] p-[16rpx]">
+            <view class="flex items-center justify-between">
+              <text class="text-[22rpx] text-[#51517c]">
+                {{ card.item.label }}
+              </text>
+              <t-tag v-if="card.isLeading" size="small" theme="warning" variant="light">
+                热点
+              </t-tag>
+            </view>
+            <view class="mt-[12rpx] flex items-end justify-between">
+              <view class="flex items-baseline gap-[6rpx]">
+                <text class="text-[32rpx] font-semibold text-[#1f1a3f]">
+                  {{ card.item.value }}
+                </text>
+                <text v-if="card.item.unit" class="text-[20rpx] text-[#7a7aa0]">
+                  {{ card.item.unit }}
+                </text>
+              </view>
+              <text
+                class="text-[20rpx] font-semibold"
+                :class="card.tone === 'positive' ? 'text-[#1b7a3a]' : card.tone === 'negative' ? 'text-[#b42318]' : 'text-[#64748b]'"
+              >
+                {{ card.tone === 'positive' ? '↑' : card.tone === 'negative' ? '↓' : '→' }}
+                {{ card.item.delta ?? '--' }}
+              </text>
+            </view>
+            <text v-if="card.item.footnote" class="mt-[6rpx] block text-[20rpx] text-[#7a7aa0]">
+              {{ card.item.footnote }}
+            </text>
+          </view>
+        </template>
+      </KpiBoard>
+    </view>
 
-      <view class="mt-[24rpx]">
-        <t-cell-group :title="`Checklist（已完成 ${checkedCount}/${todos.length}）`" theme="card">
-          <t-checkbox-group :options="todoOptions" :value="checkedTodos" @change="onTodoChange" />
+    <view class="mt-[20rpx]">
+      <QuickActionGrid
+        title="快速入口"
+        subtitle="覆盖主包与分包页面"
+        :items="quickActions"
+        @select="onQuickAction"
+      />
+    </view>
+
+    <view class="mt-[20rpx] rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+      <view class="flex items-center justify-between">
+        <text class="text-[26rpx] font-semibold text-[#1f1a3f]">
+          体验清单
+        </text>
+        <t-tag size="small" theme="primary" variant="light">
+          指南
+        </t-tag>
+      </view>
+      <view class="mt-[12rpx]">
+        <t-cell-group>
+          <t-cell title="多页面 TabBar" note="首页/数据/表单/清单/能力" />
+          <t-cell title="分包加载" note="组件实验室与 API 场景" />
+          <t-cell title="Composition API" note="ref/computed/watch 驱动" />
+          <t-cell title="TDesign 组件" note="表单、列表、反馈" />
         </t-cell-group>
       </view>
     </view>
 
     <t-toast id="t-toast" />
-    <t-dialog id="t-dialog" />
   </view>
 </template>