create-weapp-vite 2.0.23 → 2.0.25

package/dist/{chunk-VQI7VSSU.js → chunk-HATWO324.js}

@@ -5,10 +5,10 @@ import fs2 from "fs-extra";
 import path2 from "pathe";
 
 // ../weapp-vite/package.json
-var version = "6.5.3";
+var version = "6.6.0";
 
 // ../wevu/package.json
-var version2 = "2.1.7";
+var version2 = "2.1.9";
 
 // src/enums.ts
 var TemplateName = /* @__PURE__ */ ((TemplateName2) => {

package/dist/cli.js

@@ -1,11 +1,12 @@
 import {
   createProject
-} from "./chunk-VQI7VSSU.js";
+} from "./chunk-HATWO324.js";
 
 // src/cli.ts
 import path from "path";
 import process from "process";
 import { confirm, input, select } from "@inquirer/prompts";
+import logger from "@weapp-core/logger";
 import fs from "fs-extra";
 var cwd = process.cwd();
 async function run() {
@@ -58,8 +59,12 @@ async function run() {
 }
 var runPromise = run().catch(
   (err) => {
-    console.error("\u2717 \u521B\u5EFA\u5931\u8D25:", err.message || err);
-    console.log("\u2717 \u53D6\u6D88\u521B\u5EFA");
+    const message = err instanceof Error ? err.message : String(err);
+    if (message.toLowerCase().includes("cancel")) {
+      logger.warn("\u2717 \u5DF2\u53D6\u6D88\u521B\u5EFA");
+      return;
+    }
+    logger.error("\u2717 \u521B\u5EFA\u5931\u8D25:", message);
   }
 );
 export {

package/dist/index.js

@@ -1,7 +1,7 @@
 import {
   TemplateName,
   createProject
-} from "./chunk-VQI7VSSU.js";
+} from "./chunk-HATWO324.js";
 export {
   TemplateName,
   createProject

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-weapp-vite",
   "type": "module",
-  "version": "2.0.23",
+  "version": "2.0.25",
   "description": "create-weapp-vite",
   "author": "ice breaker <1324318532@qq.com>",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "fs-extra": "^11.3.3",
     "pathe": "^2.0.3",
     "pkg-types": "^2.3.0",
-    "@weapp-core/logger": "^3.0.3"
+    "@weapp-core/logger": "^3.1.0"
   },
   "scripts": {
     "dev": "tsup --watch --sourcemap",

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

@@ -1,3 +1,4 @@
 {
-  "HelloWorld": "/components/HelloWorld/index"
+  "HelloWorld": "/components/HelloWorld/index",
+  "InfoBanner": "/components/InfoBanner/index"
 }

package/templates/wevu/components.d.ts

@@ -14,10 +14,12 @@ type __WeappComponentImport<TModule, Fallback = {}> = 0 extends 1 & TModule ? Fa
 declare module 'wevu' {
   export interface GlobalComponents {
     HelloWorld: typeof import("./src/components/HelloWorld/index.vue")['default'];
+    InfoBanner: typeof import("./src/components/InfoBanner/index.vue")['default'];
   }
 }
 
 // 用于 TSX 支持
 declare global {
   const HelloWorld: typeof import("./src/components/HelloWorld/index.vue")['default']
+  const InfoBanner: typeof import("./src/components/InfoBanner/index.vue")['default']
 }

package/templates/wevu/src/components/HelloWorld/index.vue

@@ -1,45 +1,473 @@
 <script setup lang="ts">
+import { computed, ref, watch } from 'wevu'
+
+type HighlightTone = 'up' | 'down' | 'flat'
+
+interface HighlightItem {
+  key: string
+  label: string
+  value: string | number
+  tone?: HighlightTone
+  note?: string
+}
+
+interface FeatureItem {
+  id: string
+  title: string
+  group: 'core' | 'template' | 'engineering'
+  done?: boolean
+  level?: 'base' | 'advanced'
+}
+
 const props = withDefaults(
   defineProps<{
     title?: string
     subtitle?: string
+    highlights?: HighlightItem[]
+    features?: FeatureItem[]
+    compact?: boolean
   }>(),
   {
     title: 'Hello WeVU',
     subtitle: '',
+    highlights: () => [],
+    features: () => [],
+    compact: false,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'action', payload: { type: 'toggle' | 'copy' | 'select' | 'stats', value?: string }): void
+}>()
+
+const expanded = ref(true)
+const keyword = ref('')
+const activeGroup = ref<'all' | FeatureItem['group']>('all')
+const selectedFeatureId = ref('')
+const searchHit = ref(0)
+const searchMiss = ref(0)
+
+watch(
+  () => props.features,
+  (nextFeatures) => {
+    if (!nextFeatures.length) {
+      selectedFeatureId.value = ''
+      return
+    }
+
+    const exists = nextFeatures.some(feature => feature.id === selectedFeatureId.value)
+    if (!selectedFeatureId.value || !exists) {
+      selectedFeatureId.value = nextFeatures[0]?.id ?? ''
+    }
+  },
+  { immediate: true },
+)
+
+const panelClass = computed(() => {
+  return props.compact ? 'hello-panel hello-panel-compact' : 'hello-panel'
+})
+
+const summaryText = computed(() => {
+  return `${props.highlights.length} 个指标 · ${props.features.length} 条能力`
+})
+
+const filteredFeatures = computed(() => {
+  const normalized = keyword.value.trim().toLowerCase()
+  return props.features.filter((feature) => {
+    const matchGroup = activeGroup.value === 'all' || feature.group === activeGroup.value
+    if (!matchGroup) {
+      return false
+    }
+    if (!normalized) {
+      return true
+    }
+    return feature.title.toLowerCase().includes(normalized)
+  })
+})
+
+const selectedFeature = computed(() => {
+  return props.features.find(feature => feature.id === selectedFeatureId.value)
+})
+
+const stats = computed(() => {
+  const total = props.features.length
+  const done = props.features.filter(feature => feature.done).length
+  const advanced = props.features.filter(feature => feature.level === 'advanced').length
+  const progress = total > 0 ? Math.round((done / total) * 100) : 0
+  return {
+    total,
+    done,
+    advanced,
+    progress,
+  }
+})
+
+const completionText = computed(() => {
+  return `${stats.value.done}/${stats.value.total} · ${stats.value.progress}%`
+})
+
+const groupTabs = computed(() => {
+  const base = [
+    { key: 'all', label: '全部' },
+    { key: 'core', label: '核心' },
+    { key: 'template', label: '模板' },
+    { key: 'engineering', label: '工程化' },
+  ] as const
+  return base
+})
+
+watch(
+  [keyword, filteredFeatures],
+  () => {
+    if (!keyword.value.trim()) {
+      return
+    }
+    if (filteredFeatures.value.length > 0) {
+      searchHit.value += 1
+      return
+    }
+    searchMiss.value += 1
+  },
+)
+
+watch(
+  () => stats.value.progress,
+  (progress) => {
+    emit('action', { type: 'stats', value: String(progress) })
   },
+  { immediate: true },
 )
+
+function toneClass(tone?: HighlightTone) {
+  if (tone === 'up') {
+    return 'metric-value metric-up'
+  }
+  if (tone === 'down') {
+    return 'metric-value metric-down'
+  }
+  return 'metric-value metric-flat'
+}
+
+function toggleExpand() {
+  expanded.value = !expanded.value
+  emit('action', { type: 'toggle', value: String(expanded.value) })
+}
+
+function selectGroup(group: 'all' | FeatureItem['group']) {
+  activeGroup.value = group
+}
+
+function selectFeature(feature: FeatureItem) {
+  selectedFeatureId.value = feature.id
+  emit('action', { type: 'select', value: feature.title })
+}
+
+function copySelected() {
+  if (!selectedFeature.value) {
+    return
+  }
+  emit('action', { type: 'copy', value: selectedFeature.value.title })
+}
 </script>
 
 <template>
-  <view class="header">
-    <text class="title">
-      {{ props.title }}
-    </text>
-    <text v-if="props.subtitle" class="subtitle">
-      {{ props.subtitle }}
-    </text>
+  <view :class="panelClass">
+    <view class="head-row">
+      <view class="head-main">
+        <text class="title">
+          {{ props.title }}
+        </text>
+        <text v-if="props.subtitle" class="subtitle">
+          {{ props.subtitle }}
+        </text>
+        <text class="summary">
+          {{ summaryText }}
+        </text>
+        <text class="summary">
+          完成度：{{ completionText }}
+        </text>
+      </view>
+      <button class="tiny-btn" @tap.stop="toggleExpand">
+        {{ expanded ? '收起' : '展开' }}
+      </button>
+    </view>
+
+    <view v-if="expanded" class="panel-body">
+      <view v-if="props.highlights.length" class="metrics">
+        <view v-for="item in props.highlights" :key="item.key" class="metric-item">
+          <text class="metric-label">
+            {{ item.label }}
+          </text>
+          <text :class="toneClass(item.tone)">
+            {{ item.value }}
+          </text>
+          <text v-if="item.note" class="metric-note">
+            {{ item.note }}
+          </text>
+        </view>
+      </view>
+
+      <view class="feature-toolbar">
+        <input v-model="keyword" class="search-input" placeholder="筛选能力关键词…">
+        <button class="tiny-btn tiny-btn-light" @tap.catch="copySelected">
+          复制当前
+        </button>
+      </view>
+
+      <view class="group-tabs">
+        <view
+          v-for="tab in groupTabs"
+          :key="tab.key"
+          class="group-tab"
+          :class="tab.key === activeGroup ? 'group-tab-active' : ''"
+          @tap="selectGroup(tab.key)"
+        >
+          {{ tab.label }}
+        </view>
+      </view>
+
+      <view class="chips">
+        <view
+          v-for="feature in filteredFeatures"
+          :key="feature.id"
+          class="chip"
+          :class="feature.id === selectedFeatureId ? 'chip-active' : ''"
+          @tap="selectFeature(feature)"
+        >
+          {{ feature.title }}
+        </view>
+      </view>
+
+      <view class="search-stat">
+        <text>
+          搜索命中：{{ searchHit }}
+        </text>
+        <text>
+          未命中：{{ searchMiss }}
+        </text>
+      </view>
+
+      <view v-if="selectedFeature" class="selected-card">
+        <text class="selected-label">
+          当前焦点
+        </text>
+        <text class="selected-value">
+          {{ selectedFeature.title }}
+        </text>
+        <text class="selected-meta">
+          分组：{{ selectedFeature.group }} ｜ 等级：{{ selectedFeature.level ?? 'base' }}
+        </text>
+      </view>
+
+      <slot name="footer" />
+    </view>
   </view>
 </template>
 
 <style>
-.header {
+.hello-panel {
   padding: 24rpx;
-  background: linear-gradient(135deg, #4c6ef5, #7048e8);
+  margin-top: 20rpx;
+  background: linear-gradient(180deg, #fff, #f8faff);
   border-radius: 24rpx;
+  box-shadow: 0 10rpx 28rpx rgb(76 110 245 / 12%);
+}
+
+.hello-panel-compact {
+  padding: 18rpx;
+}
+
+.head-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.head-main {
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
 }
 
 .title {
   display: block;
-  font-size: 40rpx;
+  font-size: 36rpx;
   font-weight: 700;
-  color: #fff;
+  color: #2d2f6b;
 }
 
 .subtitle {
   display: block;
-  margin-top: 8rpx;
-  font-size: 26rpx;
-  color: rgb(255 255 255 / 85%);
+  font-size: 24rpx;
+  color: #5b5f93;
+}
+
+.summary {
+  display: block;
+  font-size: 22rpx;
+  color: #7b80af;
+}
+
+.panel-body {
+  margin-top: 20rpx;
+}
+
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12rpx;
+}
+
+.metric-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+  padding: 14rpx;
+  background: #fff;
+  border: 2rpx solid #eef1ff;
+  border-radius: 16rpx;
+}
+
+.metric-label {
+  font-size: 22rpx;
+  color: #6870a2;
+}
+
+.metric-value {
+  font-size: 30rpx;
+  font-weight: 700;
+}
+
+.metric-up {
+  color: #1b7a3a;
+}
+
+.metric-down {
+  color: #c92a2a;
+}
+
+.metric-flat {
+  color: #3b3f73;
+}
+
+.metric-note {
+  font-size: 20rpx;
+  color: #8a90bd;
+}
+
+.feature-toolbar {
+  display: flex;
+  gap: 12rpx;
+  align-items: center;
+  margin-top: 16rpx;
+}
+
+.search-input {
+  box-sizing: border-box;
+  flex: 1;
+  height: 68rpx;
+  padding: 0 18rpx;
+  margin: 0;
+  font-size: 24rpx;
+  background: #fff;
+  border: 2rpx solid #e6e9f7;
+  border-radius: 12rpx;
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10rpx;
+  margin-top: 14rpx;
+}
+
+.group-tabs {
+  display: flex;
+  gap: 10rpx;
+  margin-top: 14rpx;
+}
+
+.group-tab {
+  padding: 8rpx 14rpx;
+  font-size: 22rpx;
+  color: #596090;
+  background: #f0f3ff;
+  border-radius: 999rpx;
+}
+
+.group-tab-active {
+  color: #fff;
+  background: #4f5ee3;
+}
+
+.chip {
+  padding: 10rpx 16rpx;
+  font-size: 22rpx;
+  color: #4f5685;
+  background: #edf1ff;
+  border-radius: 999rpx;
+}
+
+.chip-active {
+  color: #fff;
+  background: #5b5ce2;
+}
+
+.selected-card {
+  padding: 14rpx 16rpx;
+  margin-top: 14rpx;
+  background: #fff;
+  border: 2rpx dashed #ccd4ff;
+  border-radius: 14rpx;
+}
+
+.selected-label {
+  display: block;
+  font-size: 20rpx;
+  color: #7c84b0;
+}
+
+.selected-value {
+  display: block;
+  margin-top: 4rpx;
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #36407a;
+}
+
+.selected-meta {
+  display: block;
+  margin-top: 4rpx;
+  font-size: 20rpx;
+  color: #7b82b1;
+}
+
+.search-stat {
+  display: flex;
+  gap: 16rpx;
+  margin-top: 12rpx;
+  font-size: 20rpx;
+  color: #6d74a5;
+}
+
+.tiny-btn {
+  min-width: 108rpx;
+  height: 56rpx;
+  padding: 0 16rpx;
+  margin: 0;
+  font-size: 22rpx;
+  line-height: 56rpx;
+  color: #fff;
+  background: #5b5ce2;
+  border-radius: 12rpx;
+}
+
+.tiny-btn-light {
+  color: #4f5ee3;
+  background: #edf0ff;
+}
+
+.tiny-btn::after {
+  border: 0;
 }
 </style>

package/templates/wevu/src/components/InfoBanner/index.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    description?: string
+    badge?: string
+  }>(),
+  {
+    title: 'WeVU Starter',
+    description: '',
+    badge: 'Template',
+  },
+)
+</script>
+
+<template>
+  <view class="banner">
+    <view class="main">
+      <text class="title">
+        {{ props.title }}
+      </text>
+      <text v-if="props.description" class="description">
+        {{ props.description }}
+      </text>
+    </view>
+    <text class="badge">
+      {{ props.badge }}
+    </text>
+  </view>
+</template>
+
+<style>
+.banner {
+  display: flex;
+  gap: 20rpx;
+  align-items: center;
+  justify-content: space-between;
+  padding: 26rpx 28rpx;
+  margin: 16rpx 0 24rpx;
+  background: linear-gradient(120deg, #4c6ef5, #5f3dc4);
+  border-radius: 24rpx;
+}
+
+.main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8rpx;
+  min-width: 0;
+}
+
+.title {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #fff;
+  white-space: nowrap;
+}
+
+.description {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 24rpx;
+  color: rgb(255 255 255 / 86%);
+  white-space: nowrap;
+}
+
+.badge {
+  flex: none;
+  padding: 8rpx 16rpx;
+  font-size: 22rpx;
+  color: #4c2fa6;
+  background: #fff;
+  border-radius: 999rpx;
+}
+</style>

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

@@ -1,26 +1,201 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'wevu'
 
+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) => {
@@ -29,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 }}
@@ -43,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>
@@ -65,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>
@@ -75,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;
@@ -114,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;
 }
@@ -133,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/typed-components.d.ts

@@ -7,9 +7,17 @@
 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>;