create-weapp-vite 1.3.3 → 1.3.5

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

@@ -56,7 +56,7 @@ defineAppJson({
   subPackages: [
     {
       root: 'subpackages/lab',
-      pages: ['index'],
+      pages: ['index', 'class-binding/index'],
     },
     {
       root: 'subpackages/ability',

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

@@ -34,19 +34,6 @@ export interface KpiItem {
   footnote?: string
 }
 
-const cards = computed(() => {
-  const source = Array.isArray(props.items) ? props.items : []
-  return source.map((item, index) => ({
-    key: item.key ?? String(index),
-    item,
-    index,
-    tone: resolveTone(item.delta),
-    isLeading: index === 0,
-  }))
-})
-
-const gridClass = computed(() => (props.columns === 3 ? 'grid-cols-3' : 'grid-cols-2'))
-
 function resolveTone(delta?: number): KpiTone {
   if (delta === undefined || Number.isNaN(delta)) {
     return 'neutral'
@@ -60,6 +47,19 @@ function resolveTone(delta?: number): KpiTone {
   return 'neutral'
 }
 
+const cards = computed(() => {
+  const source = Array.isArray(props.items) ? props.items : []
+  return source.map((item, index) => ({
+    key: item.key ?? String(index),
+    item,
+    index,
+    tone: resolveTone(item.delta),
+    isLeading: index === 0,
+  }))
+})
+
+const gridClass = computed(() => (props.columns === 3 ? 'grid-cols-3' : 'grid-cols-2'))
+
 function formatDelta(delta?: number, unit = '') {
   if (delta === undefined || Number.isNaN(delta)) {
     return '--'

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

@@ -111,7 +111,7 @@ function requestSubscribe() {
     Dialog.alert({
       selector: '#t-dialog',
       title: '订阅消息',
-      message: '请在 ability 页面配置订阅模板 ID 后再试。',
+      content: '请在 ability 页面配置订阅模板 ID 后再试。',
       context: mpContext as any,
       confirmBtn: '知道了',
     })
@@ -166,6 +166,7 @@ function navigateTo(url: string) {
       <view class="mt-[12rpx]">
         <t-cell-group>
           <t-cell title="组件实验室" note="subpackages/lab" arrow @tap="navigateTo('/subpackages/lab/index')" />
+          <t-cell title="Class 绑定实验室" note="subpackages/lab/class-binding" arrow @tap="navigateTo('/subpackages/lab/class-binding/index')" />
           <t-cell title="API 场景页" note="subpackages/ability" arrow @tap="navigateTo('/subpackages/ability/index')" />
         </t-cell-group>
       </view>

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

@@ -1,7 +1,9 @@
 <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, watch } from 'wevu'
+import { computed, getCurrentInstance, reactive, ref, useBindModel, watch } from 'wevu'
 
 import FormRow from '@/components/FormRow/index.vue'
 import FormStep from '@/components/FormStep/index.vue'
@@ -14,6 +16,11 @@ definePageJson({
 })
 
 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 steps = [
   { key: 'basic', title: '基础信息', subtitle: '业务基本配置' },
@@ -32,7 +39,7 @@ const formState = reactive({
   budget: 30,
   pace: 'balanced',
   description: '',
-  attachments: [] as Array<{ url: string, name: string }>,
+  attachments: [] as UploadFile[],
 })
 
 const categories = [
@@ -85,6 +92,18 @@ watch(
   },
 )
 
+const nameModel = changeModel<string>('formState.name')
+const ownerModel = changeModel<string>('formState.owner')
+const categoryModel = changeModel<string>('formState.category')
+const urgentModel = changeModel<boolean>('formState.urgent')
+const budgetModel = changeModel<number>('formState.budget')
+const paceModel = changeModel<string>('formState.pace')
+const descriptionModel = changeModel<string>('formState.description')
+const attachmentsModel = changeModel<UploadFile[], 'files'>('formState.attachments', {
+  valueProp: 'files',
+  parser: event => event?.detail?.files ?? [],
+})
+
 function showToast(message: string, theme: 'success' | 'warning' = 'success') {
   if (!mpContext) {
     return
@@ -118,10 +137,6 @@ function submit() {
   submitted.value = true
   showToast('提交成功')
 }
-
-function onUploadChange(e: WechatMiniprogram.CustomEvent<{ files: Array<{ url: string, name: string }> }>) {
-  formState.attachments = e.detail.files
-}
 </script>
 
 <template>
@@ -147,24 +162,24 @@ function onUploadChange(e: WechatMiniprogram.CustomEvent<{ files: Array<{ url: s
           <FormRow label="项目名称">
             <t-input
               placeholder="例如：新客增长计划"
-              :value="formState.name"
-              @change="(e) => (formState.name = e.detail.value)"
+              :value="nameModel.value"
+              @change="nameModel.onChange"
             />
           </FormRow>
           <FormRow label="负责人">
             <t-input
               placeholder="例如：王凯"
-              :value="formState.owner"
-              @change="(e) => (formState.owner = e.detail.value)"
+              :value="ownerModel.value"
+              @change="ownerModel.onChange"
             />
           </FormRow>
           <FormRow label="类型">
-            <t-radio-group :value="formState.category" @change="(e) => (formState.category = e.detail.value)">
+            <t-radio-group :value="categoryModel.value" @change="categoryModel.onChange">
               <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)" />
+            <t-switch :value="urgentModel.value" @change="urgentModel.onChange" />
           </FormRow>
         </view>
       </FormStep>
@@ -180,10 +195,10 @@ function onUploadChange(e: WechatMiniprogram.CustomEvent<{ files: Array<{ url: s
           <FormRow label="预算规模" description="10-100 万">
             <view class="flex items-center gap-[12rpx]">
               <t-slider
-                :value="formState.budget"
+                :value="budgetModel.value"
                 :min="10"
                 :max="100"
-                @change="(e) => (formState.budget = e.detail.value)"
+                @change="budgetModel.onChange"
               />
               <text class="text-[22rpx] text-[#5c5b7a]">
                 {{ formState.budget }} 万
@@ -191,23 +206,23 @@ function onUploadChange(e: WechatMiniprogram.CustomEvent<{ files: Array<{ url: s
             </view>
           </FormRow>
           <FormRow label="推进节奏">
-            <t-radio-group :value="formState.pace" @change="(e) => (formState.pace = e.detail.value)">
+            <t-radio-group :value="paceModel.value" @change="paceModel.onChange">
               <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"
+              :value="descriptionModel.value"
               :maxlength="140"
-              @change="(e) => (formState.description = e.detail.value)"
+              @change="descriptionModel.onChange"
             />
           </FormRow>
           <FormRow label="附件">
             <t-upload
-              :files="formState.attachments"
+              :files="attachmentsModel.files"
               :max="3"
-              @change="onUploadChange"
+              @change="attachmentsModel.onChange"
             />
           </FormRow>
         </view>

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

@@ -107,6 +107,16 @@ const quickActions = ref([
     path: '/subpackages/lab/index',
     type: 'sub',
   },
+  {
+    key: 'class-binding',
+    title: 'Class 绑定',
+    description: '对象/数组语法',
+    icon: 'grid-view',
+    tag: 'Vue',
+    tone: 'brand',
+    path: '/subpackages/lab/class-binding/index',
+    type: 'sub',
+  },
   {
     key: 'ability-lab',
     title: 'API 场景',
@@ -249,6 +259,47 @@ function onQuickAction(action: { path?: string, type?: 'tab' | 'sub', title: str
       />
     </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]">
+          Class 绑定示例
+        </text>
+        <t-tag size="small" theme="primary" variant="light">
+          模板
+        </t-tag>
+      </view>
+      <view class="mt-[12rpx] flex flex-col gap-[12rpx]">
+        <view
+          class="rounded-[16rpx] px-[16rpx] py-[12rpx] text-[20rpx]"
+          :class="{
+            'bg-[#eef2ff]': refreshSeed % 2 === 0,
+            'text-[#1f1a3f]': refreshSeed % 2 === 0,
+            'bg-[#fff7ed]': refreshSeed % 2 !== 0,
+            'text-[#92400e]': refreshSeed % 2 !== 0,
+            'ring-2 ring-[#6366f1]': refreshSeed % 3 === 0,
+          }"
+        >
+          对象语法：根据刷新次数切换配色与高亮
+        </view>
+        <view
+          class="rounded-[16rpx] px-[16rpx] py-[12rpx] text-[20rpx]" :class="[
+            refreshSeed % 2 === 0 ? 'bg-[#ecfeff] text-[#0f766e]' : 'bg-[#fef2f2] text-[#991b1b]',
+            refreshSeed % 4 === 0
+              ? 'shadow-[0_10rpx_18rpx_rgba(15,118,110,0.18)]'
+              : 'shadow-[0_10rpx_18rpx_rgba(153,27,27,0.18)]',
+          ]"
+        >
+          数组语法：组合静态与条件 class
+        </view>
+        <view
+          class="rounded-[16rpx] border border-[#e2e8f0] px-[16rpx] py-[12rpx] text-[20rpx]"
+          :class="refreshSeed % 2 === 0 ? 'bg-[#f8fafc] text-[#334155]' : 'bg-[#111827] text-white'"
+        >
+          class + :class 合并：静态边框叠加动态背景
+        </view>
+      </view>
+    </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]">

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

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'wevu'
+
+import SectionTitle from '@/components/SectionTitle/index.vue'
+
+definePageJson({
+  navigationBarTitleText: 'Class 绑定',
+  backgroundColor: '#f6f7fb',
+})
+
+const isActive = ref(true)
+const hasError = ref(false)
+const isRound = ref(false)
+const isGhost = ref(false)
+
+const classObject = reactive({
+  'demo-active': true,
+  'text-danger': false,
+  'demo-round': false,
+  'demo-ghost': false,
+})
+
+watch([isActive, hasError, isRound, isGhost], ([active, error, round, ghost]) => {
+  classObject['demo-active'] = active
+  classObject['text-danger'] = error
+  classObject['demo-round'] = round
+  classObject['demo-ghost'] = ghost
+}, { immediate: true })
+
+const activeClass = ref('demo-active')
+const errorClass = ref('text-danger')
+const roundClass = ref('demo-round')
+const ghostClass = ref('demo-ghost')
+
+const activeClassIf = computed(() => (isActive.value ? activeClass.value : ''))
+const errorClassIf = computed(() => (hasError.value ? errorClass.value : ''))
+const roundClassIf = computed(() => (isRound.value ? roundClass.value : ''))
+const ghostClassIf = computed(() => (isGhost.value ? ghostClass.value : ''))
+const dynamicKeyClass = computed(() => ({ [activeClass.value]: isActive.value }))
+</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-[#e0f2fe] p-[20rpx]">
+      <SectionTitle title="Class 绑定实验室" subtitle="切换状态观察 Vue 3 class 绑定效果" />
+    </view>
+
+    <view class="mt-[18rpx] rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+      <SectionTitle title="状态控制" subtitle="开关影响所有示例" />
+      <view class="mt-[12rpx] grid grid-cols-2 gap-[12rpx]">
+        <view class="rounded-[16rpx] bg-[#f8fafc] p-[12rpx]">
+          <view class="flex items-center justify-between">
+            <text class="text-[22rpx] text-[#5c5b7a]">
+              Active
+            </text>
+            <t-switch :value="isActive" @change="(e) => (isActive = e.detail.value)" />
+          </view>
+        </view>
+        <view class="rounded-[16rpx] bg-[#f8fafc] p-[12rpx]">
+          <view class="flex items-center justify-between">
+            <text class="text-[22rpx] text-[#5c5b7a]">
+              Error
+            </text>
+            <t-switch :value="hasError" @change="(e) => (hasError = e.detail.value)" />
+          </view>
+        </view>
+        <view class="rounded-[16rpx] bg-[#f8fafc] p-[12rpx]">
+          <view class="flex items-center justify-between">
+            <text class="text-[22rpx] text-[#5c5b7a]">
+              Round
+            </text>
+            <t-switch :value="isRound" @change="(e) => (isRound = e.detail.value)" />
+          </view>
+        </view>
+        <view class="rounded-[16rpx] bg-[#f8fafc] p-[12rpx]">
+          <view class="flex items-center justify-between">
+            <text class="text-[22rpx] text-[#5c5b7a]">
+              Ghost
+            </text>
+            <t-switch :value="isGhost" @change="(e) => (isGhost = e.detail.value)" />
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="mt-[18rpx] space-y-[14rpx]">
+      <view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+        <SectionTitle title="对象语法" subtitle="状态驱动 class" />
+        <view class="mt-[12rpx] demo-block" :class="{ 'demo-active': isActive }">
+          <view>
+            <text class="block text-[24rpx] font-semibold">
+              Object Syntax
+            </text>
+            <text class="mt-[6rpx] block text-[20rpx] text-[#6f6b8a]">
+              active 触发高亮
+            </text>
+          </view>
+          <view class="demo-chip">
+            Obj
+          </view>
+        </view>
+      </view>
+
+      <view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+        <SectionTitle title="静态 + 对象" subtitle="静态 class + 动态对象" />
+        <view class="mt-[12rpx] demo-block demo-ghost" :class="{ 'demo-active': isActive, 'text-danger': hasError }">
+          <view>
+            <text class="block text-[24rpx] font-semibold">
+              Static + Object
+            </text>
+            <text class="mt-[6rpx] block text-[20rpx] text-[#6f6b8a]">
+              error 显示警示色
+            </text>
+          </view>
+          <view class="demo-chip">
+            Mix
+          </view>
+        </view>
+      </view>
+
+      <view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+        <SectionTitle title="响应式对象" subtitle="reactive classObject" />
+        <view class="mt-[12rpx] demo-block" :class="classObject">
+          <view>
+            <text class="block text-[24rpx] font-semibold">
+              Reactive Object
+            </text>
+            <text class="mt-[6rpx] block text-[20rpx] text-[#6f6b8a]">
+              多状态合并控制
+            </text>
+          </view>
+          <view class="demo-chip">
+            Obj+
+          </view>
+        </view>
+      </view>
+
+      <view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+        <SectionTitle title="数组语法" subtitle="数组传入多个 class" />
+        <view class="mt-[12rpx] demo-block" :class="[activeClassIf, errorClassIf, roundClassIf]">
+          <view>
+            <text class="block text-[24rpx] font-semibold">
+              Array Syntax
+            </text>
+            <text class="mt-[6rpx] block text-[20rpx] text-[#6f6b8a]">
+              组合多个 class
+            </text>
+          </view>
+          <view class="demo-chip">
+            Arr
+          </view>
+        </view>
+      </view>
+
+      <view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+        <SectionTitle title="数组条件" subtitle="条件判断决定 class" />
+        <view class="mt-[12rpx] demo-block" :class="[isActive ? activeClass : '', errorClassIf]">
+          <view>
+            <text class="block text-[24rpx] font-semibold">
+              Conditional Array
+            </text>
+            <text class="mt-[6rpx] block text-[20rpx] text-[#6f6b8a]">
+              条件表达式返回 class
+            </text>
+          </view>
+          <view class="demo-chip">
+            Cond
+          </view>
+        </view>
+      </view>
+
+      <view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+        <SectionTitle title="数组 + 动态 key" subtitle="对象 + 字符串混合" />
+        <view class="mt-[12rpx] demo-block" :class="[dynamicKeyClass, errorClassIf, ghostClassIf]">
+          <view>
+            <text class="block text-[24rpx] font-semibold">
+              Array + Key
+            </text>
+            <text class="mt-[6rpx] block text-[20rpx] text-[#6f6b8a]">
+              支持计算属性 key
+            </text>
+          </view>
+          <view class="demo-chip">
+            Key
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.demo-block {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx;
+  border: 2rpx solid #d7d9f2;
+  background: #ffffff;
+  color: #1f1a3f;
+  border-radius: 18rpx;
+  transition: all 0.2s ease;
+}
+
+.demo-chip {
+  padding: 6rpx 16rpx;
+  border-radius: 999rpx;
+  font-size: 18rpx;
+  border: 2rpx solid currentColor;
+  letter-spacing: 0.5rpx;
+}
+
+.demo-ghost {
+  background: #f8fafc;
+  border-style: dashed;
+}
+
+.demo-round {
+  border-radius: 999rpx;
+}
+
+.demo-active {
+  background: linear-gradient(135deg, #2563eb, #6366f1);
+  border-color: #1e40af;
+  color: #ffffff;
+  box-shadow: 0 18rpx 32rpx rgba(37, 99, 235, 0.35);
+  transform: translateY(-4rpx);
+}
+
+.text-danger {
+  background: #fff1f2;
+  border-color: #ef4444;
+  color: #b91c1c;
+  box-shadow: 0 18rpx 32rpx rgba(239, 68, 68, 0.2);
+}
+</style>

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

@@ -21,6 +21,12 @@ const tabs = [
   { value: 'feedback', label: '反馈' },
   { value: 'display', label: '展示' },
 ]
+
+function navigateTo(url: string) {
+  wx.navigateTo({
+    url,
+  })
+}
 </script>
 
 <template>
@@ -69,6 +75,14 @@ const tabs = [
             <t-avatar>U4</t-avatar>
           </t-avatar-group>
         </view>
+        <view class="rounded-[18rpx] bg-[#f7f7fb] p-[16rpx]">
+          <SectionTitle title="Vue 模板语法" subtitle="class 绑定、对象/数组语法" />
+          <view class="mt-[8rpx]">
+            <t-cell-group>
+              <t-cell title="Class 绑定实验室" note="子包：/subpackages/lab/class-binding" arrow @tap="navigateTo('/subpackages/lab/class-binding/index')" />
+            </t-cell-group>
+          </view>
+        </view>
       </view>
 
       <view v-else-if="activeTab === 'feedback'" class="space-y-[14rpx]">

package/templates/wevu-tdesign/src/vite-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="weapp-vite/client" />
-/// <reference types="@vue/runtime-core" />
 /// <reference types="wevu" />
 /// <reference path="../components.d.ts" />
 /// <reference path="../typed-components.d.ts" />

package/templates/wevu-tdesign/tsconfig.app.json

@@ -16,6 +16,9 @@
       "@/*": [
         "./src/*"
       ],
+      "weapp-vite/typed-components": [
+        "./typed-components.d.ts"
+      ],
       "tdesign-miniprogram/miniprogram_dist/*": [
         "./node_modules/tdesign-miniprogram/miniprogram_dist/*"
       ],
@@ -25,9 +28,7 @@
     },
     "resolveJsonModule": true,
     "types": [
-      "miniprogram-api-typings",
-      "vue",
-      "@vue/runtime-core"
+      "miniprogram-api-typings"
     ],
     "allowImportingTsExtensions": true,
     "allowJs": true,
@@ -47,7 +48,8 @@
   "vueCompilerOptions": {
     "plugins": [
       "weapp-vite/volar"
-    ]
+    ],
+    "lib": "wevu"
   },
   "include": [
     "src/**/*.ts",

package/templates/wevu-tdesign/typed-components.d.ts

@@ -935,9 +935,8 @@ declare module 'weapp-vite/typed-components' {
       readonly y?: number;
       readonly zIndex?: number;
     };
-    [component: string]: Record<string, any>;
   }
   export type ComponentPropName = keyof ComponentProps;
-  export type ComponentProp<Name extends ComponentPropName> = ComponentProps[Name];
+  export type ComponentProp<Name extends string> = Name extends ComponentPropName ? ComponentProps[Name] : Record<string, any>;
   export const componentProps: ComponentProps;
 }

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

@@ -7,8 +7,10 @@ export default defineConfig({
     srcRoot: 'src',
     autoImportComponents: {
       resolvers: [TDesignResolver()],
+      htmlCustomData: true,
       typedComponents: true,
       vueComponents: true,
+      vueComponentsModule: 'wevu',
     },
     wevu: {
       defaults: {