create-weapp-vite 2.3.14 → 2.3.16

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

@@ -1,169 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'wevu'
-import { wpi } from 'wevu/api'
-
-import SectionTitle from '@/components/SectionTitle/index.vue'
-import { resolveBooleanChangeValue, resolveNumberChangeValue, resolveStringChangeValue } from '@/utils/changeEvent'
-
-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: '展示' },
-]
-
-function handleTabChange(event: unknown) {
-  activeTab.value = resolveStringChangeValue(event, activeTab.value)
-}
-
-function handleRateChange(event: unknown) {
-  rating.value = resolveNumberChangeValue(event, rating.value)
-}
-
-function handleSliderChange(event: unknown) {
-  slider.value = resolveNumberChangeValue(event, slider.value)
-}
-
-function handleToggleChange(event: unknown) {
-  toggle.value = resolveBooleanChangeValue(event, !toggle.value)
-}
-
-async function navigateTo(url: string) {
-  await wpi.navigateTo({
-    url,
-  })
-}
-</script>
-
-<template>
-  <view class="min-h-screen bg-[#f6f7fb] px-[28rpx] pb-[88rpx] pt-[24rpx] text-[#1c1c3c]">
-    <view class="rounded-[28rpx] bg-linear-to-br from-[#f5f3ff] via-[#ffffff] to-[#eef2ff] p-[20rpx]">
-      <SectionTitle title="TDesign 组件实验室" subtitle="常用组件的组合应用" />
-      <view class="mt-[12rpx]">
-        <t-tabs :value="activeTab" @change="handleTabChange">
-          <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 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 title="virtualHost class 透传实验" note="子包：/subpackages/lab/virtual-host-class" arrow @tap="navigateTo('/subpackages/lab/virtual-host-class/index')" />
-            </t-cell-group>
-          </view>
-        </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="handleRateChange" />
-        </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="handleSliderChange" />
-            <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="handleToggleChange" />
-        </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-linear-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-linear-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/subpackages/lab/virtual-host-class/index.vue

@@ -1,94 +0,0 @@
-<script setup lang="ts">
-import BrokenCard from '@/components/VirtualHostClassDemo/BrokenCard.vue'
-import FixedExternalClassCard from '@/components/VirtualHostClassDemo/FixedExternalClassCard.vue'
-import RecommendedCard from '@/components/VirtualHostClassDemo/RecommendedCard.vue'
-
-definePageJson({
-  navigationBarTitleText: 'virtualHost class demo',
-  backgroundColor: '#f6f7fb',
-})
-
-const classCase = 'rounded-[20rpx] border border-red-500 bg-red-50 px-[20rpx] py-[16rpx] text-red-500'
-const inlineStyleCase = 'color:#2563eb;background:#dbeafe;padding:16rpx;border-radius:20rpx;border:2rpx solid #60a5fa;'
-</script>
-
-<template>
-  <view class="min-h-screen bg-[#f6f7fb] px-[28rpx] pb-[88rpx] pt-[24rpx] text-[#1c1c3c]">
-    <view class="rounded-[28rpx] bg-linear-to-br from-[#f5f3ff] via-[#ffffff] to-[#eef2ff] p-[20rpx]">
-      <text class="text-[32rpx] font-semibold text-[#1f1a3f]">
-        virtualHost + class/style 透传实验
-      </text>
-      <text class="mt-[10rpx] block text-[22rpx] leading-[1.7] text-[#5b5b7b]">
-        当前模板已全局开启组件 `virtualHost: true` 和 `styleIsolation: 'apply-shared'`。本页用最小组件对比 4 种写法的实际效果。
-      </text>
-    </view>
-
-    <view class="mt-[18rpx] rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
-      <text class="text-[28rpx] font-semibold text-[#1f1a3f]">
-        1. 仅 `apply-shared`，不做 class 透传
-      </text>
-      <text class="mt-[8rpx] block text-[22rpx] leading-[1.7] text-[#6f6b8a]">
-        组件标签上写 `class` / `style`，但组件内部根节点没有接收这些 attrs。
-      </text>
-      <view class="mt-[14rpx] flex flex-col gap-[14rpx]">
-        <BrokenCard
-          :class="classCase"
-          title="BrokenCard"
-          subtitle="预期应变红并出现红色边框，但实际不会。"
-        />
-        <BrokenCard
-          :style="inlineStyleCase"
-          title="BrokenCard style"
-          subtitle="预期应变蓝并出现蓝色背景/边框，但实际不会。"
-        />
-      </view>
-    </view>
-
-    <view class="mt-[18rpx] rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
-      <text class="text-[28rpx] font-semibold text-[#1f1a3f]">
-        2. `defineOptions({ externalClasses: ['class'] })`
-      </text>
-      <text class="mt-[8rpx] block text-[22rpx] leading-[1.7] text-[#6f6b8a]">
-        这是你问的那种“继续用组件标签上的 `class`”方案。组件内部根节点必须显式写上 `class` 占位。
-      </text>
-      <view class="mt-[14rpx]">
-        <FixedExternalClassCard
-          :class="classCase"
-          title="FixedExternalClassCard"
-          subtitle="这一块应该会变红，并出现红色边框和浅红背景。"
-        />
-      </view>
-    </view>
-
-    <view class="mt-[18rpx] rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
-      <text class="text-[28rpx] font-semibold text-[#1f1a3f]">
-        3. 推荐方案：`custom-class` + `rootStyle`
-      </text>
-      <text class="mt-[8rpx] block text-[22rpx] leading-[1.7] text-[#6f6b8a]">
-        `class` 和 `style` 分开设计，避免把组件标签 attrs 是否透传这件事变成隐式行为。
-      </text>
-      <view class="mt-[14rpx] flex flex-col gap-[14rpx]">
-        <RecommendedCard
-          custom-class="rounded-[20rpx] border border-emerald-500 bg-emerald-50 px-[20rpx] py-[16rpx] text-emerald-600"
-          title="RecommendedCard custom-class"
-          subtitle="通过 externalClasses 显式接收类名。"
-        />
-        <RecommendedCard
-          :root-style="inlineStyleCase"
-          title="RecommendedCard rootStyle"
-          subtitle="通过显式 prop 接收内联样式。"
-        />
-      </view>
-    </view>
-
-    <view class="mt-[18rpx] rounded-[24rpx] bg-[#1f1a3f] p-[20rpx] text-white">
-      <text class="text-[26rpx] font-semibold">
-        结论
-      </text>
-      <text class="mt-[10rpx] block text-[22rpx] leading-[1.8] text-white/80">
-        `virtualHost: true` 和 `styleIsolation: 'apply-shared'` 不会自动提供 Vue 式根节点 `class/style` fallthrough。
-        要么显式声明 `externalClasses` 并在根节点接入，要么把 `style` 做成显式 prop。
-      </text>
-    </view>
-  </view>
-</template>

package/templates/wevu-tdesign/src/types/action.ts

@@ -1,14 +0,0 @@
-export type ActionTone = 'brand' | 'neutral'
-export type ActionType = 'tab' | 'sub'
-
-export interface QuickActionItem {
-  key: string
-  title: string
-  description?: string
-  icon?: string
-  tag?: string
-  tone?: ActionTone
-  disabled?: boolean
-  path?: string
-  type?: ActionType
-}

package/templates/wevu-tdesign/src/types/list.ts

@@ -1,17 +0,0 @@
-export type ListStatus = 'processing' | 'pending' | 'done'
-export type StatusFilterValue = 'all' | ListStatus
-
-export interface ListItem {
-  id: number
-  title: string
-  owner: string
-  status: ListStatus
-  deadline: string
-  priority: string
-}
-
-export interface StatusFilter {
-  value: StatusFilterValue
-  label: string
-  count?: number
-}

package/templates/wevu-tdesign/src/utils/changeEvent.ts

@@ -1,53 +0,0 @@
-type PrimitiveValue = string | number | boolean
-
-function hasSameType<T extends PrimitiveValue>(value: unknown, fallback: T): value is T {
-  return typeof value === typeof fallback
-}
-
-/**
- * @description 从小程序组件变更事件中提取值，兼容值直传、detail 直传和 detail.value 结构。
- */
-export function resolveChangeValue<T extends PrimitiveValue>(event: unknown, fallback: T): T {
-  if (hasSameType(event, fallback)) {
-    return event
-  }
-
-  if (event && typeof event === 'object') {
-    const payload = event as Record<string, any>
-    if (hasSameType(payload.value, fallback)) {
-      return payload.value
-    }
-
-    const detail = payload.detail
-    if (hasSameType(detail, fallback)) {
-      return detail
-    }
-
-    if (detail && typeof detail === 'object' && hasSameType(detail.value, fallback)) {
-      return detail.value
-    }
-  }
-
-  return fallback
-}
-
-/**
- * @description 从小程序组件变更事件中提取字符串值。
- */
-export function resolveStringChangeValue(event: unknown, fallback = '') {
-  return resolveChangeValue(event, fallback)
-}
-
-/**
- * @description 从小程序组件变更事件中提取数字值。
- */
-export function resolveNumberChangeValue(event: unknown, fallback = 0) {
-  return Number(resolveChangeValue(event, fallback))
-}
-
-/**
- * @description 从小程序组件变更事件中提取布尔值。
- */
-export function resolveBooleanChangeValue(event: unknown, fallback = false) {
-  return Boolean(resolveChangeValue(event, fallback))
-}

package/templates/wevu-tdesign/src/utils/listFilters.ts

@@ -1,34 +0,0 @@
-import type { ListItem, ListStatus, StatusFilter, StatusFilterValue } from '@/types/list'
-
-export function buildStatusFilters(items: ListItem[]): StatusFilter[] {
-  const summary: Record<ListStatus, number> = {
-    processing: 0,
-    pending: 0,
-    done: 0,
-  }
-
-  for (const item of items) {
-    summary[item.status] += 1
-  }
-
-  return [
-    { value: 'all', label: '全部', count: items.length },
-    { value: 'processing', label: '进行中', count: summary.processing },
-    { value: 'pending', label: '待启动', count: summary.pending },
-    { value: 'done', label: '已完成', count: summary.done },
-  ]
-}
-
-export function filterListItems(
-  items: ListItem[],
-  query: string,
-  activeStatus: StatusFilterValue,
-) {
-  const keyword = query.trim()
-
-  return items.filter((item) => {
-    const matchStatus = activeStatus === 'all' || item.status === activeStatus
-    const matchQuery = !keyword || item.title.includes(keyword) || item.owner.includes(keyword)
-    return matchStatus && matchQuery
-  })
-}