create-weapp-vite 2.0.22 → 2.0.24

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

@@ -1,28 +1,201 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'wevu'
 
-import HelloWorld from '@/components/HelloWorld/index.vue'
+interface HelloActionPayload {
+  type: 'toggle' | 'copy' | 'select' | 'stats'
+  value?: string
+}
+
+type HighlightTone = 'up' | 'down' | 'flat'
+
+interface HighlightItem {
+  key: string
+  label: string
+  value: string | number
+  tone?: HighlightTone
+  note?: string
+}
 
 definePageJson({
-  navigationBarTitleText: '首页',
+  navigationBarTitleText: '首页示例',
 })
 
 const count = ref(0)
 const message = ref('Hello WeVU!')
+const activeGroup = ref('概览')
+
 const todos = ref([
-  '用 Vue SFC 写页面/组件',
-  '用 wevu API（ref/computed/watch）写逻辑',
-  '用 v-for / v-if / @tap / v-model 写模板',
+  {
+    id: 'sfc',
+    title: '自动编译 SFC 到小程序四件套',
+    group: 'template' as const,
+    done: true,
+    level: 'advanced' as const,
+  },
+  {
+    id: 'components',
+    title: '自动注入 usingComponents 与组件类型提示',
+    group: 'template' as const,
+    done: true,
+    level: 'base' as const,
+  },
+  {
+    id: 'pipeline',
+    title: 'WXML/WXSS/WXS 全链路处理与平台适配',
+    group: 'engineering' as const,
+    done: true,
+    level: 'advanced' as const,
+  },
+  {
+    id: 'events',
+    title: '支持 @tap.catch / @tap.stop 等事件语义',
+    group: 'core' as const,
+    done: true,
+    level: 'base' as const,
+  },
+  {
+    id: 'reactivity',
+    title: '通过 wevu 使用 ref/computed/watch 写业务逻辑',
+    group: 'core' as const,
+    done: true,
+    level: 'advanced' as const,
+  },
 ])
 
 const doubled = computed(() => count.value * 2)
 
+const pageClass = computed(() => {
+  return {
+    'page-empty': count.value === 0,
+    'page-energetic': count.value > 0,
+  }
+})
+
+const pageStyle = computed(() => {
+  return [
+    {
+      background: count.value > 0 ? '#eaf0ff' : '#f6f7ff',
+    },
+    {
+      borderTop: count.value > 0 ? '4rpx solid #4c6ef5' : '4rpx solid transparent',
+    },
+  ]
+})
+
+const cardClass = computed(() => {
+  return [
+    {
+      'card-active': count.value > 0,
+    },
+    count.value >= 3 ? 'card-boost' : '',
+  ]
+})
+
+const cardStyle = computed(() => {
+  return [
+    {
+      borderColor: count.value > 0 ? '#4c6ef5' : 'transparent',
+    },
+    {
+      borderWidth: count.value > 0 ? '2rpx' : '1rpx',
+    },
+  ]
+})
+
+const primaryBtnClass = computed(() => {
+  return [
+    {
+      'btn-boost': count.value > 0,
+    },
+    count.value >= 3 ? 'btn-boost-strong' : '',
+  ]
+})
+
+const primaryBtnStyle = computed(() => {
+  return [
+    {
+      opacity: count.value > 0 ? 0.88 : 1,
+    },
+    count.value > 0
+      ? {
+          boxShadow: '0 8rpx 20rpx rgba(76, 110, 245, 0.28)',
+        }
+      : null,
+  ]
+})
+
+const helloHighlights = computed<HighlightItem[]>(() => {
+  return [
+    {
+      key: 'count',
+      label: '当前计数',
+      value: count.value,
+      tone: 'up' as const,
+      note: '来自 ref 状态',
+    },
+    {
+      key: 'double',
+      label: '双倍值',
+      value: doubled.value,
+      tone: 'flat' as const,
+      note: '来自 computed',
+    },
+    {
+      key: 'feature',
+      label: '能力条目',
+      value: todos.value.length,
+      tone: 'flat' as const,
+      note: '模板清单',
+    },
+    {
+      key: 'title',
+      label: '标题长度',
+      value: message.value.length,
+      tone: message.value.length > 10 ? 'up' : 'down',
+      note: '来自 v-model',
+    },
+  ]
+})
+
+function showToast(title: string) {
+  wx.showToast({
+    title,
+    icon: 'none',
+    duration: 1200,
+  })
+}
+
 function increment() {
   count.value += 1
 }
 
 function reset() {
   count.value = 0
+  showToast('计数已重置')
+}
+
+function handleHelloAction(payload: HelloActionPayload) {
+  if (payload.type === 'copy' && payload.value) {
+    wx.setClipboardData({
+      data: payload.value,
+    })
+    return
+  }
+
+  if (payload.type === 'toggle') {
+    showToast(`面板状态：${payload.value === 'true' ? '展开' : '收起'}`)
+    return
+  }
+
+  if (payload.type === 'select' && payload.value) {
+    activeGroup.value = payload.value
+    showToast(`当前焦点：${payload.value}`)
+    return
+  }
+
+  if (payload.type === 'stats' && payload.value) {
+    console.log(`[wevu] hello progress: ${payload.value}%`)
+  }
 }
 
 watch(count, (newValue, oldValue) => {
@@ -31,10 +204,30 @@ watch(count, (newValue, oldValue) => {
 </script>
 
 <template>
-  <view class="page">
-    <HelloWorld :title="message" :subtitle="`count=${count}, doubled=${doubled}`" />
+  <view class="page" :class="pageClass" :style="pageStyle">
+    <InfoBanner
+      :title="message"
+      :description="`group=${activeGroup}, count=${count}, doubled=${doubled}`"
+      badge="Demo"
+    />
+
+    <HelloWorld
+      :title="`欢迎，${message}`"
+      :subtitle="`HelloWorld 示例面板（当前分组：${activeGroup}）`"
+      :highlights="helloHighlights"
+      :features="todos"
+      @action="handleHelloAction"
+    >
+      <template #footer>
+        <view class="hello-footer">
+          <text class="hello-footer-text">
+            此区域来自父组件 slot，展示 wevu + weapp-vite 组合能力。
+          </text>
+        </view>
+      </template>
+    </HelloWorld>
 
-    <view class="card">
+    <view class="card" :class="cardClass" :style="cardStyle">
       <view class="row">
         <text class="label">
           当前计数：{{ count }}
@@ -45,10 +238,10 @@ watch(count, (newValue, oldValue) => {
       </view>
 
       <view class="row actions">
-        <button class="btn primary" @tap="increment">
+        <button class="btn primary" :class="primaryBtnClass" :style="primaryBtnStyle" @tap.catch="increment">
           +1
         </button>
-        <button class="btn danger" @tap="reset">
+        <button class="btn danger" @tap.stop="reset">
           重置
         </button>
       </view>
@@ -67,7 +260,7 @@ watch(count, (newValue, oldValue) => {
       </view>
       <view class="todo">
         <view v-for="(todo, index) in todos" :key="index" class="todo-item">
-          <text>• {{ todo }}</text>
+          <text>• {{ todo.title }}</text>
         </view>
       </view>
     </view>
@@ -77,17 +270,36 @@ watch(count, (newValue, oldValue) => {
 <style>
 .page {
   box-sizing: border-box;
-  padding: 48rpx 32rpx 64rpx;
+  min-height: 100vh;
+  padding: 0 32rpx 64rpx;
+  background: #f6f7ff;
+}
+
+.page-empty {
+  opacity: 0.98;
+}
+
+.page-energetic {
+  background: #f1f4ff;
 }
 
 .card {
   padding: 32rpx;
   margin-top: 24rpx;
   background: #fff;
+  border: 2rpx solid transparent;
   border-radius: 24rpx;
   box-shadow: 0 12rpx 32rpx rgb(44 44 84 / 10%);
 }
 
+.card-active {
+  box-shadow: 0 14rpx 36rpx rgb(76 110 245 / 14%);
+}
+
+.card-boost {
+  transform: translateY(-2rpx);
+}
+
 .row {
   display: flex;
   gap: 16rpx;
@@ -116,6 +328,14 @@ watch(count, (newValue, oldValue) => {
   background: #4c6ef5;
 }
 
+.btn-boost {
+  transform: scale(1.02);
+}
+
+.btn-boost-strong {
+  transform: scale(1.04);
+}
+
 .btn.danger {
   background: #f03e3e;
 }
@@ -135,4 +355,16 @@ watch(count, (newValue, oldValue) => {
   font-size: 26rpx;
   color: #4f4f7a;
 }
+
+.hello-footer {
+  padding: 12rpx 14rpx;
+  margin-top: 16rpx;
+  background: #eef2ff;
+  border-radius: 12rpx;
+}
+
+.hello-footer-text {
+  font-size: 22rpx;
+  color: #4f5ea0;
+}
 </style>

package/templates/wevu/tsconfig.app.json

@@ -15,6 +15,9 @@
     "paths": {
       "@/*": [
         "./src/*"
+      ],
+      "weapp-vite/typed-components": [
+        "./typed-components.d.ts"
       ]
     },
     "resolveJsonModule": true,
@@ -53,6 +56,8 @@
     "src/**/*.json",
     "src/**/*.d.ts",
     "types/**/*.d.ts",
-    "env.d.ts"
+    "env.d.ts",
+    "components.d.ts",
+    "typed-components.d.ts"
   ]
 }

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

@@ -0,0 +1,25 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// 由 weapp-vite 自动生成，请勿编辑。
+declare module 'weapp-vite/typed-components' {
+  export interface ComponentProps {
+    HelloWorld: {
+      readonly compact?: boolean;
+      readonly features?: any[];
+      readonly highlights?: any[];
+      readonly subtitle?: string;
+      readonly title?: string;
+    };
+    InfoBanner: {
+      readonly badge?: string;
+      readonly description?: string;
+      readonly title?: string;
+    };
+  }
+  export type ComponentPropName = keyof ComponentProps;
+  export type ComponentProp<Name extends string> = Name extends ComponentPropName ? ComponentProps[Name] : Record<string, any>;
+  export const componentProps: ComponentProps;
+}

package/templates/wevu/vite.config.ts

@@ -3,6 +3,12 @@ import { defineConfig } from 'weapp-vite/config'
 export default defineConfig(() => ({
   weapp: {
     srcRoot: 'src',
+    autoImportComponents: {
+      globs: ['components/**/*.vue', 'components/**/*.wxml'],
+      typedComponents: true,
+      vueComponents: true,
+      vueComponentsModule: 'wevu',
+    },
   },
   // weapp-vite 内置的 Vue 支持会自动处理 .vue 文件，不需要额外插件
 }))