create-weapp-vite 2.3.15 → 2.3.16

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

@@ -1,440 +0,0 @@
-<script setup lang="ts">
-import { computed, reactive, ref, watch } from 'wevu'
-
-import SectionTitle from '@/components/SectionTitle/index.vue'
-import { resolveBooleanChangeValue } from '@/utils/changeEvent'
-
-definePageJson({
-  navigationBarTitleText: 'Class 绑定',
-  backgroundColor: '#f6f7fb',
-})
-
-const isActive = ref(true)
-const hasError = ref(false)
-const isRound = ref(false)
-const isGhost = ref(false)
-
-function onActiveChange(event: unknown) {
-  isActive.value = resolveBooleanChangeValue(event, !isActive.value)
-}
-
-function onErrorChange(event: unknown) {
-  hasError.value = resolveBooleanChangeValue(event, !hasError.value)
-}
-
-function onRoundChange(event: unknown) {
-  isRound.value = resolveBooleanChangeValue(event, !isRound.value)
-}
-
-function onGhostChange(event: unknown) {
-  isGhost.value = resolveBooleanChangeValue(event, !isGhost.value)
-}
-
-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 }))
-
-const styleObject = computed(() => ({
-  background: hasError.value
-    ? '#fff1f2'
-    : isActive.value
-      ? 'linear-gradient(135deg,#2563eb,#6366f1)'
-      : '#ffffff',
-  borderColor: hasError.value ? '#ef4444' : isActive.value ? '#1e40af' : '#d7d9f2',
-  borderStyle: isGhost.value ? 'dashed' : 'solid',
-  borderRadius: isRound.value ? '999rpx' : '18rpx',
-  color: hasError.value ? '#b91c1c' : isActive.value ? '#ffffff' : '#1f1a3f',
-}))
-
-const styleArray = computed(() => ([
-  { transition: 'all 0.2s ease' },
-  isActive.value ? { transform: 'translateY(-4rpx)' } : { transform: 'translateY(0rpx)' },
-  hasError.value
-    ? { boxShadow: '0 18rpx 32rpx rgba(239,68,68,0.2)' }
-    : { boxShadow: '0 10rpx 20rpx rgba(37,99,235,0.28)' },
-  isRound.value ? { borderRadius: '999rpx' } : { borderRadius: '18rpx' },
-  isGhost.value ? { opacity: '0.78' } : { opacity: '1' },
-]))
-
-const styleString = computed(() => {
-  const fontSize = isActive.value ? 26 : 24
-  const color = hasError.value ? '#b91c1c' : '#1f1a3f'
-  const spacing = isGhost.value ? 1.2 : 0.5
-  return `font-size:${fontSize}rpx;color:${color};letter-spacing:${spacing}rpx;`
-})
-
-const styleWithVar = computed(() => {
-  const accent = hasError.value ? '#ef4444' : '#2563eb'
-  return {
-    '--lab-accent': accent,
-    'borderColor': 'var(--lab-accent)',
-    'color': 'var(--lab-accent)',
-  }
-})
-
-function applyScenarioBase() {
-  isActive.value = false
-  hasError.value = false
-  isRound.value = false
-  isGhost.value = false
-}
-
-function applyScenarioAllOn() {
-  isActive.value = true
-  hasError.value = true
-  isRound.value = true
-  isGhost.value = true
-}
-
-function applyScenarioMixed() {
-  isActive.value = true
-  hasError.value = false
-  isRound.value = true
-  isGhost.value = false
-}
-
-function applyScenarioErrorGhost() {
-  isActive.value = false
-  hasError.value = true
-  isRound.value = false
-  isGhost.value = true
-}
-
-function runE2EState() {
-  return {
-    isActive: isActive.value,
-    hasError: hasError.value,
-    isRound: isRound.value,
-    isGhost: isGhost.value,
-    classObject: { ...classObject },
-    activeClassIf: activeClassIf.value,
-    errorClassIf: errorClassIf.value,
-    roundClassIf: roundClassIf.value,
-    ghostClassIf: ghostClassIf.value,
-    styleString: styleString.value,
-  }
-}
-</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-[#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="onActiveChange" />
-          </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="onErrorChange" />
-          </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="onRoundChange" />
-          </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="onGhostChange" />
-          </view>
-        </view>
-      </view>
-      <view class="mt-[12rpx] flex flex-wrap gap-[12rpx]">
-        <t-button size="small" variant="outline" @tap="applyScenarioBase">
-          Base
-        </t-button>
-        <t-button size="small" variant="outline" @tap="applyScenarioAllOn">
-          All On
-        </t-button>
-        <t-button size="small" variant="outline" @tap="applyScenarioMixed">
-          Mixed
-        </t-button>
-        <t-button size="small" variant="outline" @tap="applyScenarioErrorGhost">
-          Error+Ghost
-        </t-button>
-      </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" data-e2e="class-object" :class="{ 'demo-active': isActive }">
-          <view>
-            <text class="block text-[24rpx] font-semibold">
-              Object Syntax
-            </text>
-            <text class="mt-[6rpx] block text-[20rpx] demo-subtext">
-              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"
-          data-e2e="class-static-object"
-          :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] demo-subtext">
-              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" data-e2e="class-reactive" :class="classObject">
-          <view>
-            <text class="block text-[24rpx] font-semibold">
-              Reactive Object
-            </text>
-            <text class="mt-[6rpx] block text-[20rpx] demo-subtext">
-              多状态合并控制
-            </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" data-e2e="class-array" :class="[activeClassIf, errorClassIf, roundClassIf]">
-          <view>
-            <text class="block text-[24rpx] font-semibold">
-              Array Syntax
-            </text>
-            <text class="mt-[6rpx] block text-[20rpx] demo-subtext">
-              组合多个 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" data-e2e="class-cond-array" :class="[isActive ? activeClass : '', errorClassIf]">
-          <view>
-            <text class="block text-[24rpx] font-semibold">
-              Conditional Array
-            </text>
-            <text class="mt-[6rpx] block text-[20rpx] demo-subtext">
-              条件表达式返回 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" data-e2e="class-array-key" :class="[dynamicKeyClass, errorClassIf, ghostClassIf]">
-          <view>
-            <text class="block text-[24rpx] font-semibold">
-              Array + Key
-            </text>
-            <text class="mt-[6rpx] block text-[20rpx] demo-subtext">
-              支持计算属性 key
-            </text>
-          </view>
-          <view class="demo-chip">
-            Key
-          </view>
-        </view>
-      </view>
-
-      <view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
-        <SectionTitle title="Style 对象语法" subtitle="对象绑定动态 style" />
-        <view class="mt-[12rpx] demo-block demo-style-anchor" data-e2e="style-object" :style="styleObject">
-          <view>
-            <text class="block text-[24rpx] font-semibold">
-              Style Object
-            </text>
-            <text class="mt-[6rpx] block text-[20rpx] demo-subtext">
-              多属性对象绑定
-            </text>
-          </view>
-          <view class="demo-chip">
-            StyObj
-          </view>
-        </view>
-      </view>
-
-      <view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
-        <SectionTitle title="Style 数组语法" subtitle="按状态合并样式片段" />
-        <view class="mt-[12rpx] demo-block demo-style-anchor" data-e2e="style-array" :style="styleArray">
-          <view>
-            <text class="block text-[24rpx] font-semibold">
-              Style Array
-            </text>
-            <text class="mt-[6rpx] block text-[20rpx] demo-subtext">
-              条件 style 片段
-            </text>
-          </view>
-          <view class="demo-chip">
-            StyArr
-          </view>
-        </view>
-      </view>
-
-      <view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
-        <SectionTitle title="Style 字符串语法" subtitle="拼接结果直出字符串" />
-        <view class="mt-[12rpx] demo-block demo-style-anchor" data-e2e="style-string" :style="styleString">
-          <view>
-            <text class="block text-[24rpx] font-semibold">
-              Style String
-            </text>
-            <text class="mt-[6rpx] block text-[20rpx] demo-subtext">
-              string 绑定与条件拼接
-            </text>
-          </view>
-          <view class="demo-chip">
-            StyStr
-          </view>
-        </view>
-      </view>
-
-      <view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
-        <SectionTitle title="Style 变量语法" subtitle="CSS 变量与对象混合" />
-        <view class="mt-[12rpx] demo-block demo-style-anchor" data-e2e="style-var" :style="styleWithVar">
-          <view>
-            <text class="block text-[24rpx] font-semibold">
-              Style Variable
-            </text>
-            <text class="mt-[6rpx] block text-[20rpx] demo-subtext">
-              变量透传与消费
-            </text>
-          </view>
-          <view class="demo-chip">
-            StyVar
-          </view>
-        </view>
-      </view>
-
-      <view class="rounded-[24rpx] bg-[#111827] p-[18rpx] text-white">
-        <text class="text-[20rpx] text-slate-300">
-          E2E 状态快照
-        </text>
-        <text class="mt-[8rpx] block text-[20rpx]" data-e2e="state-line">
-          {{ runE2EState() }}
-        </text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style scoped>
-.demo-block {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20rpx;
-  color: #1f1a3f;
-  background: #fff;
-  border: 2rpx solid #d7d9f2;
-  border-radius: 18rpx;
-  transition: all 0.2s ease;
-}
-
-.demo-chip {
-  padding: 6rpx 16rpx;
-  font-size: 18rpx;
-  letter-spacing: 0.5rpx;
-  border: 2rpx solid currentcolor;
-  border-radius: 999rpx;
-}
-
-.demo-subtext {
-  color: currentcolor;
-  opacity: 0.82;
-}
-
-.demo-ghost {
-  background: #f8fafc;
-  border-style: dashed;
-}
-
-.demo-round {
-  border-radius: 999rpx;
-}
-
-.demo-active {
-  color: #fff;
-  background: linear-gradient(135deg, #2563eb, #6366f1);
-  border-color: #1e40af;
-  box-shadow: 0 18rpx 32rpx rgb(37 99 235 / 35%);
-  transform: translateY(-4rpx);
-}
-
-.text-danger {
-  color: #b91c1c;
-  background: #fff1f2;
-  border-color: #ef4444;
-  box-shadow: 0 18rpx 32rpx rgb(239 68 68 / 20%);
-}
-
-.demo-style-anchor {
-  border-color: #d7d9f2;
-  border-style: solid;
-  border-width: 2rpx;
-}
-</style>

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>