create-weapp-vite 1.3.2 → 1.3.3

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

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import Toast from 'tdesign-miniprogram/toast/index'
+
+import { computed, getCurrentInstance, onPullDownRefresh, 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'
+
+definePageJson({
+  navigationBarTitleText: '清单',
+  backgroundColor: '#f6f7fb',
+  enablePullDownRefresh: true,
+})
+
+const mpContext = getCurrentInstance()
+
+const query = ref('')
+const activeStatus = ref('all')
+const loading = ref(true)
+
+const items = ref([
+  {
+    id: 1,
+    title: '门店会员激活方案',
+    owner: '王凯',
+    status: 'processing',
+    deadline: '今日 18:00',
+    priority: 'P0',
+  },
+  {
+    id: 2,
+    title: '社群内容排期',
+    owner: '林鹤',
+    status: 'pending',
+    deadline: '明日 12:00',
+    priority: 'P1',
+  },
+  {
+    id: 3,
+    title: '新客任务提醒',
+    owner: '陈一',
+    status: 'done',
+    deadline: '已完成',
+    priority: 'P2',
+  },
+  {
+    id: 4,
+    title: '客服脚本优化',
+    owner: '韩逸',
+    status: 'processing',
+    deadline: '周五 20:00',
+    priority: 'P1',
+  },
+])
+
+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 },
+  ]
+}
+
+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
+  }),
+)
+
+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(() => {
+    loading.value = false
+    showToast('列表已刷新')
+  }, 600)
+}
+
+function onAction(item: (typeof items.value)[number]) {
+  showToast(`打开「${item.title}」详情`)
+}
+
+onPullDownRefresh(() => {
+  reload()
+  wx.stopPullDownRefresh()
+})
+
+reload()
+</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-[#fdf2f8] via-[#fff7fb] to-[#ffffff] p-[20rpx]">
+      <SectionTitle title="任务清单" subtitle="筛选、搜索与分页反馈" />
+      <view class="mt-[12rpx]">
+        <FilterBar v-model:query="query" v-model:active="activeStatus" :filters="statusFilters" />
+      </view>
+    </view>
+
+    <view v-if="loading" class="mt-[20rpx] flex flex-col items-center gap-[12rpx] rounded-[24rpx] bg-white p-[24rpx]">
+      <t-loading theme="circular" size="40" />
+      <text class="text-[22rpx] text-[#6f6b8a]">
+        正在同步数据...
+      </text>
+    </view>
+
+    <view v-else class="mt-[20rpx] space-y-[14rpx]">
+      <view v-for="item in filteredItems" :key="item.id" class="rounded-[20rpx] bg-white p-[18rpx] shadow-[0_12rpx_28rpx_rgba(17,24,39,0.08)]">
+        <view class="flex items-start justify-between">
+          <view>
+            <text class="text-[26rpx] font-semibold text-[#1f1a3f]">
+              {{ item.title }}
+            </text>
+            <text class="mt-[6rpx] block text-[22rpx] text-[#6f6b8a]">
+              负责人：{{ item.owner }} · 截止 {{ item.deadline }}
+            </text>
+          </view>
+          <t-tag
+            size="small"
+            :theme="item.status === 'done' ? 'success' : item.status === 'processing' ? 'primary' : 'warning'"
+            variant="light"
+          >
+            {{ item.status === 'done' ? '已完成' : item.status === 'processing' ? '进行中' : '待启动' }}
+          </t-tag>
+        </view>
+        <view class="mt-[12rpx] flex items-center justify-between">
+          <view class="flex items-center gap-[8rpx]">
+            <t-tag size="small" theme="primary" variant="outline">
+              {{ item.priority }}
+            </t-tag>
+            <text class="text-[20rpx] text-[#7a7aa0]">
+              进度跟进
+            </text>
+          </view>
+          <t-button size="small" theme="primary" variant="outline" @tap="onAction(item)">
+            查看
+          </t-button>
+        </view>
+      </view>
+    </view>
+
+    <view v-if="hasEmpty" class="mt-[20rpx]">
+      <EmptyState title="暂无匹配任务" description="调整筛选条件或刷新数据" action-text="重新加载" @action="reload" />
+    </view>
+
+    <t-toast id="t-toast" />
+  </view>
+</template>

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

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, onShow, ref } from 'wevu'
+
+import SectionTitle from '@/components/SectionTitle/index.vue'
+
+definePageJson({
+  navigationBarTitleText: 'API 场景',
+  backgroundColor: '#f6f7fb',
+})
+
+const systemInfo = ref<WechatMiniprogram.GetSystemInfoSuccessCallbackResult | null>(null)
+
+const infoRows = computed(() => {
+  const info = systemInfo.value
+  return [
+    { label: '机型', value: info?.model ?? '--' },
+    { label: '系统', value: info ? `${info.system}` : '--' },
+    { label: '版本', value: info?.version ?? '--' },
+    { label: '基础库', value: info?.SDKVersion ?? '--' },
+  ]
+})
+
+const layoutRows = computed(() => {
+  const info = systemInfo.value
+  if (!info) {
+    return []
+  }
+  return [
+    { label: '屏幕宽度', value: `${info.windowWidth}px` },
+    { label: '屏幕高度', value: `${info.windowHeight}px` },
+    { label: '状态栏', value: `${info.statusBarHeight}px` },
+  ]
+})
+
+function loadSystemInfo() {
+  wx.getSystemInfo({
+    success: (result) => {
+      systemInfo.value = result
+    },
+  })
+}
+
+onShow(() => {
+  loadSystemInfo()
+})
+</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-[#ecfccb] via-[#ffffff] to-[#d9f99d] p-[20rpx]">
+      <SectionTitle title="系统信息" subtitle="使用原生 API 获取设备信息" />
+    </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] space-y-[10rpx]">
+        <view v-for="row in infoRows" :key="row.label" class="flex items-center justify-between">
+          <text class="text-[22rpx] text-[#6f6b8a]">
+            {{ row.label }}
+          </text>
+          <text class="text-[22rpx] font-semibold text-[#1f1a3f]">
+            {{ row.value }}
+          </text>
+        </view>
+      </view>
+    </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] space-y-[10rpx]">
+        <view v-for="row in layoutRows" :key="row.label" class="flex items-center justify-between">
+          <text class="text-[22rpx] text-[#6f6b8a]">
+            {{ row.label }}
+          </text>
+          <text class="text-[22rpx] font-semibold text-[#1f1a3f]">
+            {{ row.value }}
+          </text>
+        </view>
+      </view>
+    </view>
+
+    <view class="mt-[18rpx] rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+      <SectionTitle title="构建提示" subtitle="weapp-vite 特性" />
+      <view class="mt-[12rpx] space-y-[10rpx]">
+        <view class="flex items-center gap-[8rpx]">
+          <view class="h-[8rpx] w-[8rpx] rounded-full bg-[#2f2b5f]" />
+          <text class="text-[22rpx] text-[#4c4b68]">
+            子包页面按需加载，降低首包压力
+          </text>
+        </view>
+        <view class="flex items-center gap-[8rpx]">
+          <view class="h-[8rpx] w-[8rpx] rounded-full bg-[#2f2b5f]" />
+          <text class="text-[22rpx] text-[#4c4b68]">
+            组件与页面使用 alias 路径统一管理
+          </text>
+        </view>
+        <view class="flex items-center gap-[8rpx]">
+          <view class="h-[8rpx] w-[8rpx] rounded-full bg-[#2f2b5f]" />
+          <text class="text-[22rpx] text-[#4c4b68]">
+            全局样式隔离使用 apply-shared
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>

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

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed, ref } from 'wevu'
+
+import SectionTitle from '@/components/SectionTitle/index.vue'
+
+definePageJson({
+  navigationBarTitleText: '组件实验室',
+  backgroundColor: '#f6f7fb',
+})
+
+const activeTab = ref('base')
+const rating = ref(4)
+const progress = ref(68)
+const slider = ref(42)
+const toggle = ref(true)
+
+const progressValue = computed(() => (Number.isFinite(progress.value) ? progress.value : 0))
+
+const tabs = [
+  { value: 'base', label: '基础' },
+  { value: 'feedback', label: '反馈' },
+  { value: 'display', label: '展示' },
+]
+</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-[#f5f3ff] via-[#ffffff] to-[#eef2ff] p-[20rpx]">
+      <SectionTitle title="TDesign 组件实验室" subtitle="常用组件的组合应用" />
+      <view class="mt-[12rpx]">
+        <t-tabs :value="activeTab" @change="(e) => (activeTab = e.detail.value)">
+          <t-tab-panel v-for="tab in tabs" :key="tab.value" :value="tab.value" :label="tab.label" />
+        </t-tabs>
+      </view>
+    </view>
+
+    <view class="mt-[18rpx] rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
+      <view v-if="activeTab === 'base'" class="space-y-[14rpx]">
+        <SectionTitle title="基础组件" subtitle="标签、徽标、头像" />
+        <view class="flex flex-wrap gap-[10rpx]">
+          <t-tag theme="primary" variant="light">
+            新品
+          </t-tag>
+          <t-tag theme="warning" variant="light">
+            加急
+          </t-tag>
+          <t-tag theme="success" variant="light">
+            已完成
+          </t-tag>
+          <t-tag theme="default" variant="outline">
+            低风险
+          </t-tag>
+        </view>
+        <view class="flex items-center gap-[14rpx]">
+          <t-badge count="8">
+            <t-avatar size="small" shape="round">
+              A
+            </t-avatar>
+          </t-badge>
+          <t-badge count="new">
+            <t-avatar size="small" shape="round">
+              B
+            </t-avatar>
+          </t-badge>
+          <t-avatar-group max="3" size="small">
+            <t-avatar>U1</t-avatar>
+            <t-avatar>U2</t-avatar>
+            <t-avatar>U3</t-avatar>
+            <t-avatar>U4</t-avatar>
+          </t-avatar-group>
+        </view>
+      </view>
+
+      <view v-else-if="activeTab === 'feedback'" class="space-y-[14rpx]">
+        <SectionTitle title="反馈组件" subtitle="进度、评分、滑块" />
+        <t-progress :percentage="progressValue" status="active" stroke-width="8" />
+        <view class="flex items-center justify-between">
+          <text class="text-[22rpx] text-[#6f6b8a]">
+            满意度评分
+          </text>
+          <t-rate :value="rating" @change="(e) => (rating = e.detail.value)" />
+        </view>
+        <view class="flex items-center justify-between">
+          <text class="text-[22rpx] text-[#6f6b8a]">
+            阈值调整
+          </text>
+          <view class="flex items-center gap-[12rpx]">
+            <t-slider :value="slider" @change="(e) => (slider = e.detail.value)" />
+            <text class="text-[22rpx] text-[#6f6b8a]">
+              {{ slider }}%
+            </text>
+          </view>
+        </view>
+        <view class="flex items-center justify-between">
+          <text class="text-[22rpx] text-[#6f6b8a]">
+            自动提醒
+          </text>
+          <t-switch :value="toggle" @change="(e) => (toggle = e.detail.value)" />
+        </view>
+      </view>
+
+      <view v-else class="space-y-[14rpx]">
+        <SectionTitle title="展示组件" subtitle="提示、轮播、二维码" />
+        <t-notice-bar theme="info" content="TDesign 组件可用于丰富产品体验。" />
+        <t-swiper :autoplay="true" height="140">
+          <t-swiper-item>
+            <view class="h-full rounded-[20rpx] bg-gradient-to-br from-[#c7d2fe] to-[#f0abfc] p-[16rpx]">
+              <text class="text-[24rpx] font-semibold text-white">
+                品牌展示
+              </text>
+              <text class="mt-[6rpx] block text-[20rpx] text-white/80">
+                适合做活动横幅
+              </text>
+            </view>
+          </t-swiper-item>
+          <t-swiper-item>
+            <view class="h-full rounded-[20rpx] bg-gradient-to-br from-[#fde68a] to-[#fca5a5] p-[16rpx]">
+              <text class="text-[24rpx] font-semibold text-white">
+                营销推荐
+              </text>
+              <text class="mt-[6rpx] block text-[20rpx] text-white/80">
+                支持多色主题
+              </text>
+            </view>
+          </t-swiper-item>
+        </t-swiper>
+        <view class="flex items-center justify-between">
+          <text class="text-[22rpx] text-[#6f6b8a]">
+            扫码体验
+          </text>
+          <t-qrcode value="https://vite.icebreaker.top" size="90" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>

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

@@ -1 +1,5 @@
 /// <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,13 +16,18 @@
       "@/*": [
         "./src/*"
       ],
+      "tdesign-miniprogram/miniprogram_dist/*": [
+        "./node_modules/tdesign-miniprogram/miniprogram_dist/*"
+      ],
       "tdesign-miniprogram/*": [
         "./node_modules/tdesign-miniprogram/miniprogram_dist/*"
       ]
     },
     "resolveJsonModule": true,
     "types": [
-      "miniprogram-api-typings"
+      "miniprogram-api-typings",
+      "vue",
+      "@vue/runtime-core"
     ],
     "allowImportingTsExtensions": true,
     "allowJs": true,

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

@@ -10,6 +10,16 @@ export default defineConfig({
       typedComponents: true,
       vueComponents: true,
     },
+    wevu: {
+      defaults: {
+        component: {
+          options: {
+            virtualHost: true,
+            styleIsolation: 'apply-shared',
+          },
+        },
+      },
+    },
     // pnpm g 生成的格式
     // https://vite.icebreaker.top/guide/generate.html
     generate: {
@@ -21,7 +31,7 @@ export default defineConfig({
         component: 'src/components',
         page: 'src/pages',
       },
-      // 假如你想让默认生成的组件命名为 HelloWorld/index 而不是 HelloWorld/HelloWorld 可以下列选项
+      // 假如你想让默认生成的组件命名为 Foo/index 而不是 Foo/Foo 可以下列选项
       // filenames: {
       //   component: 'index',
       //   page: 'index',

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

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    title?: string
-    subtitle?: string
-  }>(),
-  {
-    title: 'Hello WeVU',
-    subtitle: '',
-  },
-)
-</script>
-
-<template>
-  <view class="rounded-[24rpx] bg-gradient-to-br from-[#4c6ef5] to-[#7048e8] p-[24rpx]">
-    <text class="block text-[40rpx] font-bold text-white">
-      {{ props.title }}
-    </text>
-    <text v-if="props.subtitle" class="mt-[8rpx] block text-[26rpx] text-white/85">
-      {{ props.subtitle }}
-    </text>
-  </view>
-</template>