create-weapp-vite 1.3.2 → 1.3.3

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineOptions({
+  options: {
+    multipleSlots: true,
+  },
+})
+
+withDefaults(
+  defineProps<{
+    title: string
+    subtitle?: string
+  }>(),
+  {
+    subtitle: '',
+  },
+)
+
+defineComponentJson({
+  styleIsolation: 'apply-shared',
+})
+</script>
+
+<template>
+  <view class="flex items-end justify-between">
+    <view>
+      <text class="text-[30rpx] font-semibold text-[#1f1a3f]">
+        {{ title }}
+      </text>
+      <text v-if="subtitle" class="mt-[6rpx] block text-[22rpx] text-[#6f6b8a]">
+        {{ subtitle }}
+      </text>
+    </view>
+  </view>
+</template>

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

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed } from 'wevu'
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    value: number
+    unit?: string
+    delta?: number
+    progress?: number
+  }>(),
+  {
+    unit: '',
+    delta: undefined,
+    progress: undefined,
+  },
+)
+
+defineComponentJson({
+  styleIsolation: 'apply-shared',
+})
+
+type TrendTone = 'positive' | 'negative' | 'neutral'
+
+const tone = computed<TrendTone>(() => {
+  if (props.delta === undefined || Number.isNaN(props.delta)) {
+    return 'neutral'
+  }
+  if (props.delta > 0) {
+    return 'positive'
+  }
+  if (props.delta < 0) {
+    return 'negative'
+  }
+  return 'neutral'
+})
+
+const hasProgress = computed(() => {
+  if (props.progress === undefined || props.progress === null) {
+    return false
+  }
+  return Number.isFinite(Number(props.progress))
+})
+
+const progressValue = computed(() => {
+  if (!hasProgress.value) {
+    return 0
+  }
+  const raw = Number(props.progress)
+  return Math.min(Math.max(raw, 0), 100)
+})
+
+function toneText(toneValue: TrendTone) {
+  if (toneValue === 'positive') {
+    return '↑'
+  }
+  if (toneValue === 'negative') {
+    return '↓'
+  }
+  return '→'
+}
+
+function toneClass(toneValue: TrendTone) {
+  if (toneValue === 'positive') {
+    return 'text-[#1b7a3a]'
+  }
+  if (toneValue === 'negative') {
+    return 'text-[#b42318]'
+  }
+  return 'text-[#64748b]'
+}
+</script>
+
+<template>
+  <view class="rounded-[20rpx] bg-white p-[18rpx] shadow-[0_12rpx_28rpx_rgba(17,24,39,0.08)]">
+    <view class="flex items-center justify-between">
+      <text class="text-[24rpx] text-[#5b5876]">
+        {{ title }}
+      </text>
+      <text class="text-[20rpx]" :class="toneClass(tone)">
+        {{ toneText(tone) }}
+        {{ delta === undefined ? '--' : delta }}
+      </text>
+    </view>
+    <view class="mt-[12rpx] flex items-baseline gap-[6rpx]">
+      <text class="text-[36rpx] font-bold text-[#1f1a3f]">
+        {{ value }}
+      </text>
+      <text v-if="unit" class="text-[20rpx] text-[#7a7aa0]">
+        {{ unit }}
+      </text>
+    </view>
+    <t-progress
+      v-if="hasProgress"
+      class="mt-[12rpx]"
+      :percentage="progressValue"
+      status="active"
+      stroke-width="6"
+    />
+  </view>
+</template>

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

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import Dialog from 'tdesign-miniprogram/dialog/index'
+import Toast from 'tdesign-miniprogram/toast/index'
+
+import { getCurrentInstance, ref } from 'wevu'
+
+import SectionTitle from '@/components/SectionTitle/index.vue'
+
+definePageJson({
+  navigationBarTitleText: '能力',
+  backgroundColor: '#f6f7fb',
+})
+
+const mpContext = getCurrentInstance()
+
+const capabilityCards = ref([
+  {
+    key: 'scan',
+    title: '扫一扫',
+    desc: '识别条码或二维码',
+  },
+  {
+    key: 'location',
+    title: '定位',
+    desc: '获取当前坐标',
+  },
+  {
+    key: 'clipboard',
+    title: '剪贴板',
+    desc: '写入演示文本',
+  },
+  {
+    key: 'share',
+    title: '分享',
+    desc: '唤起分享菜单',
+  },
+  {
+    key: 'image',
+    title: '选择图片',
+    desc: '上传素材预览',
+  },
+])
+
+const subscribeTemplateId = ''
+
+function showToast(message: string, theme: 'success' | 'warning' = 'success') {
+  if (!mpContext) {
+    return
+  }
+  Toast({
+    selector: '#t-toast',
+    context: mpContext as any,
+    message,
+    theme,
+    duration: 1200,
+  })
+}
+
+function handleCapability(key: string) {
+  switch (key) {
+    case 'scan':
+      wx.scanCode({
+        success: (result) => {
+          showToast(`识别结果：${result.result || '已完成'}`)
+        },
+        fail: () => {
+          showToast('扫码失败，请重试', 'warning')
+        },
+      })
+      break
+    case 'location':
+      wx.getLocation({
+        type: 'wgs84',
+        success: (result) => {
+          showToast(`定位成功：${result.latitude.toFixed(2)}, ${result.longitude.toFixed(2)}`)
+        },
+        fail: () => {
+          showToast('未获取定位权限', 'warning')
+        },
+      })
+      break
+    case 'clipboard':
+      wx.setClipboardData({
+        data: 'weapp-vite + wevu + TDesign',
+        success: () => showToast('已写入剪贴板'),
+      })
+      break
+    case 'share':
+      wx.showShareMenu({
+        withShareTicket: true,
+        success: () => showToast('已开启分享菜单'),
+        fail: () => showToast('分享菜单开启失败', 'warning'),
+      })
+      break
+    case 'image':
+      wx.chooseImage({
+        count: 3,
+        success: (result) => {
+          showToast(`已选择 ${result.tempFilePaths.length} 张图片`)
+        },
+        fail: () => showToast('未选择图片', 'warning'),
+      })
+      break
+    default:
+      break
+  }
+}
+
+function requestSubscribe() {
+  if (!subscribeTemplateId) {
+    Dialog.alert({
+      selector: '#t-dialog',
+      title: '订阅消息',
+      message: '请在 ability 页面配置订阅模板 ID 后再试。',
+      context: mpContext as any,
+      confirmBtn: '知道了',
+    })
+    return
+  }
+  wx.requestSubscribeMessage({
+    tmplIds: [subscribeTemplateId],
+    success: () => showToast('订阅成功'),
+    fail: () => showToast('订阅失败', 'warning'),
+  })
+}
+
+function navigateTo(url: string) {
+  wx.navigateTo({
+    url,
+  })
+}
+</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-[#ecfeff] via-[#ffffff] to-[#e0f2fe] 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="点击体验微信原生 API" />
+      <view class="mt-[12rpx] grid grid-cols-2 gap-[12rpx]">
+        <view
+          v-for="item in capabilityCards"
+          :key="item.key"
+          class="rounded-[18rpx] bg-[#f0f9ff] p-[16rpx]"
+          @tap="handleCapability(item.key)"
+        >
+          <text class="text-[24rpx] font-semibold text-[#1f1a3f]">
+            {{ item.title }}
+          </text>
+          <text class="mt-[6rpx] block text-[20rpx] text-[#6f6b8a]">
+            {{ item.desc }}
+          </text>
+        </view>
+      </view>
+      <view class="mt-[16rpx]">
+        <t-button block theme="primary" variant="outline" @tap="requestSubscribe">
+          订阅消息提醒
+        </t-button>
+      </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]">
+        <t-cell-group>
+          <t-cell title="组件实验室" note="subpackages/lab" arrow @tap="navigateTo('/subpackages/lab/index')" />
+          <t-cell title="API 场景页" note="subpackages/ability" arrow @tap="navigateTo('/subpackages/ability/index')" />
+        </t-cell-group>
+      </view>
+    </view>
+
+    <t-toast id="t-toast" />
+    <t-dialog id="t-dialog" />
+  </view>
+</template>

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

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'wevu'
+
+import KpiBoard from '@/components/KpiBoard/index.vue'
+import SectionTitle from '@/components/SectionTitle/index.vue'
+import TrendCard from '@/components/TrendCard/index.vue'
+
+definePageJson({
+  navigationBarTitleText: '数据',
+  backgroundColor: '#f6f7fb',
+})
+
+const ranges = [
+  { value: 'today', label: '今日' },
+  { value: 'week', label: '本周' },
+  { value: 'month', label: '本月' },
+]
+
+const activeRange = ref('week')
+const refreshTick = ref(0)
+
+const kpiItems = computed(() => {
+  const scale = activeRange.value === 'today' ? 1 : activeRange.value === 'month' ? 4 : 2
+  const drift = refreshTick.value
+  return [
+    {
+      key: 'orders',
+      label: '订单量',
+      value: 268 * scale + drift,
+      unit: '单',
+      delta: 12 + drift,
+      footnote: '核心目标',
+    },
+    {
+      key: 'gmv',
+      label: '成交额',
+      value: 42 * scale + drift,
+      unit: '万',
+      delta: 3 + drift,
+      footnote: 'GMV',
+    },
+    {
+      key: 'retention',
+      label: '留存',
+      value: 62 + drift,
+      unit: '%',
+      delta: 4,
+      footnote: '用户粘性',
+    },
+    {
+      key: 'nps',
+      label: 'NPS',
+      value: 48 + drift,
+      unit: '分',
+      delta: 2,
+      footnote: '满意度',
+    },
+  ]
+})
+
+const trends = computed(() => [
+  {
+    key: 'active',
+    title: '活跃用户',
+    value: activeRange.value === 'today' ? 980 : activeRange.value === 'month' ? 8820 : 3560,
+    unit: '人',
+    delta: 12 + refreshTick.value,
+    progress: 78,
+  },
+  {
+    key: 'conversion',
+    title: '转化漏斗',
+    value: activeRange.value === 'today' ? 21 : activeRange.value === 'month' ? 25 : 23,
+    unit: '%',
+    delta: 1,
+    progress: 56,
+  },
+  {
+    key: 'response',
+    title: '响应时长',
+    value: activeRange.value === 'today' ? 1.6 : 1.8,
+    unit: 's',
+    delta: -0.2,
+    progress: 68,
+  },
+])
+
+const reportLines = computed(() => [
+  `分组：${ranges.find(range => range.value === activeRange.value)?.label ?? '本周'}`,
+  '渠道贡献 Top3：直播、社群、搜索',
+  '重点事项：提升转化 > 优化留存',
+])
+
+function onRangeChange(e: WechatMiniprogram.CustomEvent<{ value: string }>) {
+  activeRange.value = e.detail.value
+}
+
+watch(activeRange, () => {
+  refreshTick.value = Math.floor(Math.random() * 6)
+})
+</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-[#f1f5ff] via-[#eef2ff] to-[#ffffff] p-[20rpx]">
+      <SectionTitle title="经营仪表盘" subtitle="聚焦关键指标与趋势" />
+      <view class="mt-[12rpx]">
+        <t-tabs :value="activeRange" @change="onRangeChange">
+          <t-tab-panel v-for="range in ranges" :key="range.value" :value="range.value" :label="range.label" />
+        </t-tabs>
+      </view>
+    </view>
+
+    <view class="mt-[18rpx]">
+      <KpiBoard title="核心 KPI" subtitle="趋势随区间自动刷新" :items="kpiItems">
+        <template #action />
+        <template #items="{ items }">
+          <view v-for="card in items" :key="card.key">
+            <view class="rounded-[18rpx] bg-[#f7f7fb] p-[16rpx]">
+              <view class="flex items-center justify-between">
+                <view class="flex items-center gap-[8rpx]">
+                  <view class="h-[8rpx] w-[8rpx] rounded-full" :class="card.tone === 'positive' ? 'bg-[#22c55e]' : card.tone === 'negative' ? 'bg-[#ef4444]' : 'bg-[#94a3b8]'" />
+                  <text class="text-[22rpx] text-[#61618a]">
+                    {{ card.item.label }}
+                  </text>
+                </view>
+                <view v-if="card.isLeading" class="rounded-full bg-[#fff3c2] px-[10rpx] py-[4rpx]">
+                  <text class="text-[18rpx] font-semibold text-[#8a5200]">
+                    HOT
+                  </text>
+                </view>
+              </view>
+              <view class="mt-[10rpx] flex items-end justify-between">
+                <view class="flex items-baseline gap-[6rpx]">
+                  <text class="text-[32rpx] font-bold text-[#1c1c3c]">
+                    {{ card.item.value }}
+                  </text>
+                  <text v-if="card.item.unit" class="text-[20rpx] text-[#7a7aa0]">
+                    {{ card.item.unit }}
+                  </text>
+                </view>
+                <view
+                  class="rounded-full px-[10rpx] py-[4rpx]"
+                  :class="card.tone === 'positive' ? 'bg-[#e7f7ee] text-[#1b7a3a]' : card.tone === 'negative' ? 'bg-[#ffe9e9] text-[#b42318]' : 'bg-[#edf1f7] text-[#64748b]'"
+                >
+                  <text class="text-[20rpx] font-semibold">
+                    {{ card.tone === 'positive' ? '↑' : card.tone === 'negative' ? '↓' : '→' }}
+                    {{ card.item.delta == null ? '--' : card.item.delta + (card.item.unit ? card.item.unit : '') }}
+                  </text>
+                </view>
+              </view>
+              <text v-if="card.item.footnote" class="mt-[6rpx] block text-[20rpx] text-[#8a8aa5]">
+                {{ card.item.footnote }}
+              </text>
+            </view>
+          </view>
+        </template>
+      </KpiBoard>
+    </view>
+
+    <view class="mt-[18rpx]">
+      <SectionTitle title="趋势追踪" subtitle="转化与体验指标" />
+      <view class="mt-[12rpx] grid gap-[12rpx]">
+        <TrendCard
+          v-for="card in trends"
+          :key="card.key"
+          :title="card.title"
+          :value="card.value"
+          :unit="card.unit"
+          :delta="card.delta"
+          :progress="card.progress"
+        />
+      </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="line in reportLines" :key="line" class="flex items-center gap-[8rpx]">
+          <view class="h-[8rpx] w-[8rpx] rounded-full bg-[#5a48c5]" />
+          <text class="text-[22rpx] text-[#4c4b68]">
+            {{ line }}
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>