create-weapp-vite 2.3.4 → 2.3.5

package/templates/plugin/plugin/components/hello-component/index.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import type { PluginFeatureCard } from '../../utils/showcase'
+import { computed } from 'wevu'
+
+const props = defineProps<{
+  entries?: PluginFeatureCard[]
+  note?: string
+  title?: string
+}>()
+
+defineComponentJson({
+  component: true,
+  styleIsolation: 'apply-shared',
+})
+
+const safeEntries = computed(() => props.entries ?? [])
+</script>
+
+<template>
+  <view class="showcase-card">
+    <view class="showcase-card__head">
+      <view>
+        <text class="showcase-card__eyebrow">
+          plugin public component
+        </text>
+        <text class="showcase-card__title">
+          {{ props.title || '插件公开 Vue SFC 组件' }}
+        </text>
+      </view>
+      <text class="showcase-card__count">
+        {{ safeEntries.length }} items
+      </text>
+    </view>
+
+    <text v-if="props.note" class="showcase-card__note">
+      {{ props.note }}
+    </text>
+
+    <view class="showcase-card__list">
+      <view
+        v-for="entry in safeEntries"
+        :key="entry.id"
+        class="showcase-card__item"
+      >
+        <view class="showcase-card__item-head">
+          <text class="showcase-card__item-title">
+            {{ entry.title }}
+          </text>
+          <text class="showcase-card__badge">
+            {{ entry.kindLabel }}
+          </text>
+        </view>
+        <text class="showcase-card__item-summary">
+          {{ entry.summary }}
+        </text>
+        <view class="showcase-card__score-row">
+          <text class="showcase-card__score-label">
+            完成度
+          </text>
+          <text class="showcase-card__score-value">
+            {{ entry.score }}%
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+.showcase-card {
+  padding: 28rpx;
+  margin-top: 24rpx;
+  background: linear-gradient(180deg, #fff 0%, #f6f8fc 100%);
+  border-radius: 28rpx;
+  box-shadow: 0 14rpx 30rpx rgb(63 78 107 / 10%);
+
+  &__head {
+    display: flex;
+    gap: 20rpx;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  &__eyebrow,
+  &__count,
+  &__score-label {
+    font-size: 22rpx;
+    color: #6b778d;
+  }
+
+  &__eyebrow,
+  &__title,
+  &__note,
+  &__item-summary,
+  &__item-title,
+  &__score-row {
+    display: block;
+  }
+
+  &__eyebrow {
+    text-transform: uppercase;
+    letter-spacing: 2rpx;
+  }
+
+  &__title {
+    margin-top: 10rpx;
+    font-size: 32rpx;
+    font-weight: 700;
+    line-height: 1.35;
+    color: #1c2e4b;
+  }
+
+  &__note {
+    margin-top: 16rpx;
+    font-size: 24rpx;
+    line-height: 1.7;
+    color: #52627f;
+  }
+
+  &__list {
+    display: grid;
+    gap: 16rpx;
+    margin-top: 20rpx;
+  }
+
+  &__item {
+    padding: 22rpx;
+    background: rgb(255 255 255 / 92%);
+    border: 2rpx solid #e7edf8;
+    border-radius: 22rpx;
+  }
+
+  &__item-head,
+  &__score-row {
+    display: flex;
+    gap: 16rpx;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__item-title {
+    flex: 1;
+    font-size: 28rpx;
+    font-weight: 600;
+    line-height: 1.45;
+    color: #20324d;
+  }
+
+  &__badge {
+    padding: 8rpx 16rpx;
+    font-size: 22rpx;
+    color: #fff;
+    background: #203d70;
+    border-radius: 999rpx;
+  }
+
+  &__item-summary {
+    margin-top: 12rpx;
+    font-size: 24rpx;
+    line-height: 1.65;
+    color: #5c6d89;
+  }
+
+  &__score-row {
+    margin-top: 14rpx;
+  }
+
+  &__score-value {
+    font-size: 24rpx;
+    font-weight: 700;
+    color: #1e4f8d;
+  }
+}
+</style>

package/templates/plugin/plugin/components/native-meter/index.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://vite.icebreaker.top/component.json",
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {}
+}

package/templates/plugin/plugin/components/native-meter/index.scss

@@ -0,0 +1,51 @@
+.native-meter {
+  padding: 20rpx;
+  margin-top: 12rpx;
+  background: linear-gradient(180deg, #fcfdff 0%, #f1f6ff 100%);
+  border: 2rpx solid #dfebff;
+  border-radius: 22rpx;
+
+  &__head {
+    display: flex;
+    gap: 12rpx;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__label {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: #233a5e;
+  }
+
+  &__value {
+    font-size: 23rpx;
+    color: #5f6a80;
+  }
+
+  &__track {
+    height: 16rpx;
+    margin-top: 14rpx;
+    overflow: hidden;
+    background: #deebff;
+    border-radius: 999rpx;
+  }
+
+  &__bar {
+    height: 100%;
+    border-radius: 999rpx;
+    transition: width 0.25s ease;
+  }
+
+  &__bar--neutral {
+    background: linear-gradient(90deg, #5f7cff, #4d63dd);
+  }
+
+  &__bar--success {
+    background: linear-gradient(90deg, #0d9488, #22c55e);
+  }
+
+  &__bar--danger {
+    background: linear-gradient(90deg, #dc2626, #f97316);
+  }
+}

package/templates/plugin/plugin/components/native-meter/index.ts

@@ -0,0 +1,28 @@
+import type { InferNativeProps, NativeComponent, NativePropType } from 'wevu'
+
+type NativeMeterTone = 'neutral' | 'success' | 'danger'
+
+const nativeMeterProperties = {
+  label: {
+    type: String,
+    value: '',
+  },
+  value: {
+    type: Number,
+    value: 0,
+  },
+  tone: {
+    type: String as NativePropType<NativeMeterTone>,
+    value: 'neutral',
+  },
+}
+
+type NativeMeterProps = InferNativeProps<typeof nativeMeterProperties>
+
+Component({
+  properties: nativeMeterProperties,
+})
+
+const nativeMeter = {} as NativeComponent<NativeMeterProps>
+
+export default nativeMeter

package/templates/plugin/plugin/components/native-meter/index.wxml

@@ -0,0 +1,12 @@
+<view class="native-meter">
+  <view class="native-meter__head">
+    <text class="native-meter__label">{{label || '插件原生 TS + SCSS 组件'}}</text>
+    <text class="native-meter__value">{{value}}%</text>
+  </view>
+  <view class="native-meter__track">
+    <view
+      class="native-meter__bar native-meter__bar--{{tone}}"
+      style="width: {{value > 100 ? 100 : value < 0 ? 0 : value}}%;"
+    />
+  </view>
+</view>

package/templates/plugin/plugin/index.ts

@@ -0,0 +1,16 @@
+import { getSharedLoadMessage, SHARED_ANSWER } from '@/shared/shared-data'
+import { getPluginShowcaseSummary, getFeatureCards as getShowcaseCards } from './utils/showcase'
+
+export function sayHello() {
+  return getSharedLoadMessage('plugin')
+}
+
+export const answer = SHARED_ANSWER
+
+export function getShowcaseSummary() {
+  return getPluginShowcaseSummary()
+}
+
+export function getFeatureCards() {
+  return getShowcaseCards()
+}

package/templates/plugin/plugin/pages/hello-page/index.vue

@@ -0,0 +1,332 @@
+<script setup lang="ts">
+import { ref } from 'wevu'
+import { getFeatureCardsByKind, getFeatureKindLabel, getPluginShowcaseSummary, getScoreTone } from '../../utils/showcase'
+
+type KindFilter = 'all' | 'vue-sfc' | 'native-ts' | 'scss'
+
+const currentKind = ref<KindFilter>('all')
+const score = ref(94)
+const cards = ref(getFeatureCardsByKind('all'))
+const summary = getPluginShowcaseSummary()
+const meterTone = ref(getScoreTone(score.value))
+
+definePageJson({
+  navigationBarTitleText: '插件 Vue SFC 能力页',
+})
+
+const filterOptions = [
+  { id: 'all' as KindFilter, label: '全部' },
+  { id: 'vue-sfc' as KindFilter, label: getFeatureKindLabel('vue-sfc') },
+  { id: 'native-ts' as KindFilter, label: getFeatureKindLabel('native-ts') },
+  { id: 'scss' as KindFilter, label: getFeatureKindLabel('scss') },
+]
+
+function selectKind(kind: KindFilter) {
+  currentKind.value = kind
+  cards.value = getFeatureCardsByKind(kind)
+}
+
+function pulseScore() {
+  score.value = score.value >= 96 ? 78 : score.value + 6
+  meterTone.value = getScoreTone(score.value)
+}
+</script>
+
+<template>
+  <view class="page">
+    <view class="hero">
+      <text class="hero__eyebrow">
+        plugin vue sfc
+      </text>
+      <text class="hero__title">
+        插件页直接使用 Vue SFC
+      </text>
+      <text class="hero__desc">
+        当前页面由 `.vue` 入口产出，同时组合插件内的原生 TS 组件与公开 Vue SFC 组件。
+      </text>
+    </view>
+
+    <view class="toolbar">
+      <view
+        v-for="option in filterOptions"
+        :key="option.id"
+        class="toolbar__chip"
+        :class="currentKind === option.id ? 'toolbar__chip--active' : ''"
+        @tap="selectKind(option.id)"
+      >
+        <text>{{ option.label }}</text>
+      </view>
+    </view>
+
+    <view class="overview">
+      <text class="overview__title">
+        插件 Vue 页内的数据渲染
+      </text>
+      <text class="overview__summary">
+        {{ summary }}
+      </text>
+
+      <view
+        v-for="card in cards"
+        :key="card.id"
+        class="overview__item"
+      >
+        <view class="overview__item-head">
+          <text class="overview__item-title">
+            {{ card.title }}
+          </text>
+          <text class="overview__badge">
+            {{ card.kindLabel }}
+          </text>
+        </view>
+        <text class="overview__item-summary">
+          {{ card.summary }}
+        </text>
+        <text class="overview__item-score">
+          完成度 {{ card.score }}%
+        </text>
+      </view>
+    </view>
+
+    <view class="panel">
+      <text class="panel__title">
+        当前页内的响应式评分条
+      </text>
+      <view class="meter">
+        <view class="meter__head">
+          <text class="meter__label">
+            Vue SFC Page Score
+          </text>
+          <text class="meter__value">
+            {{ score }}%
+          </text>
+        </view>
+        <view class="meter__track">
+          <view
+            class="meter__bar"
+            :class="`meter__bar--${meterTone}`"
+            :style="`width: ${score}%`"
+          />
+        </view>
+      </view>
+      <button class="panel__button" @tap="pulseScore">
+        切换页面内评分
+      </button>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+page {
+  min-height: 100%;
+  background:
+    radial-gradient(circle at top left, rgb(82 188 255 / 20%), transparent 28%),
+    linear-gradient(180deg, #eff5ff 0%, #f7fbff 100%);
+}
+
+.page {
+  padding: 28rpx 24rpx 40rpx;
+}
+
+.hero,
+.panel {
+  border-radius: 28rpx;
+}
+
+.hero {
+  padding: 34rpx 32rpx;
+  color: #fff;
+  background: linear-gradient(135deg, #16315c 0%, #25549c 54%, #34a0a4 100%);
+  box-shadow: 0 18rpx 42rpx rgb(31 71 130 / 18%);
+
+  &__eyebrow,
+  &__title,
+  &__desc {
+    display: block;
+  }
+
+  &__eyebrow {
+    font-size: 22rpx;
+    text-transform: uppercase;
+    letter-spacing: 4rpx;
+    opacity: 0.74;
+  }
+
+  &__title {
+    margin-top: 12rpx;
+    font-size: 40rpx;
+    font-weight: 700;
+  }
+
+  &__desc {
+    margin-top: 16rpx;
+    font-size: 25rpx;
+    line-height: 1.75;
+    opacity: 0.92;
+  }
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14rpx;
+  margin-top: 22rpx;
+
+  &__chip {
+    padding: 14rpx 20rpx;
+    font-size: 24rpx;
+    color: #35527f;
+    background: rgb(255 255 255 / 85%);
+    border-radius: 999rpx;
+    box-shadow: 0 8rpx 18rpx rgb(70 103 157 / 8%);
+  }
+
+  &__chip--active {
+    color: #fff;
+    background: #214781;
+  }
+}
+
+.panel {
+  padding: 28rpx;
+  margin-top: 24rpx;
+  background: rgb(255 255 255 / 88%);
+  box-shadow: 0 14rpx 28rpx rgb(74 103 146 / 10%);
+
+  &__title {
+    display: block;
+    margin-bottom: 12rpx;
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #17335a;
+  }
+
+  &__button {
+    margin-top: 18rpx;
+    font-size: 26rpx;
+    color: #fff;
+    background: #1d4f91;
+    border-radius: 999rpx;
+  }
+}
+
+.overview {
+  padding: 28rpx;
+  margin-top: 24rpx;
+  background: rgb(255 255 255 / 92%);
+  border-radius: 28rpx;
+  box-shadow: 0 12rpx 28rpx rgb(69 96 137 / 10%);
+
+  &__title,
+  &__summary,
+  &__item-title,
+  &__item-summary,
+  &__item-score {
+    display: block;
+  }
+
+  &__title {
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #18355f;
+  }
+
+  &__summary {
+    margin-top: 12rpx;
+    font-size: 24rpx;
+    line-height: 1.7;
+    color: #566883;
+  }
+
+  &__item {
+    padding: 22rpx;
+    margin-top: 18rpx;
+    background: #fff;
+    border: 2rpx solid #e6edf9;
+    border-radius: 22rpx;
+  }
+
+  &__item-head {
+    display: flex;
+    gap: 16rpx;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__item-title {
+    flex: 1;
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #1f314c;
+  }
+
+  &__badge {
+    padding: 8rpx 16rpx;
+    font-size: 22rpx;
+    color: #fff;
+    background: #244b87;
+    border-radius: 999rpx;
+  }
+
+  &__item-summary {
+    margin-top: 12rpx;
+    font-size: 24rpx;
+    line-height: 1.65;
+    color: #5c6d89;
+  }
+
+  &__item-score {
+    margin-top: 12rpx;
+    font-size: 23rpx;
+    font-weight: 600;
+    color: #23508d;
+  }
+}
+
+.meter {
+  margin-top: 10rpx;
+
+  &__head {
+    display: flex;
+    gap: 16rpx;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__label,
+  &__value {
+    font-size: 24rpx;
+    color: #21416e;
+  }
+
+  &__value {
+    font-weight: 700;
+  }
+
+  &__track {
+    height: 16rpx;
+    margin-top: 16rpx;
+    overflow: hidden;
+    background: #dce8fb;
+    border-radius: 999rpx;
+  }
+
+  &__bar {
+    height: 100%;
+    border-radius: 999rpx;
+    transition: width 0.25s ease;
+  }
+
+  &__bar--neutral {
+    background: linear-gradient(90deg, #5f7cff, #4d63dd);
+  }
+
+  &__bar--success {
+    background: linear-gradient(90deg, #0d9488, #22c55e);
+  }
+
+  &__bar--danger {
+    background: linear-gradient(90deg, #dc2626, #f97316);
+  }
+}
+</style>

package/templates/plugin/plugin/pages/native-playground/index.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "插件原生 TS 页",
+  "usingComponents": {
+    "hello-showcase": "../../components/hello-component/index",
+    "native-meter": "../../components/native-meter/index"
+  }
+}

package/templates/plugin/plugin/pages/native-playground/index.scss

@@ -0,0 +1,81 @@
+page {
+  min-height: 100%;
+  background:
+    radial-gradient(circle at top right, rgb(255 189 89 / 18%), transparent 26%),
+    linear-gradient(180deg, #fff8ec 0%, #fffdf7 100%);
+}
+
+.page {
+  padding: 28rpx 24rpx 40rpx;
+}
+
+.hero,
+.panel {
+  border-radius: 28rpx;
+}
+
+.hero {
+  padding: 34rpx 32rpx;
+  color: #fff;
+  background: linear-gradient(135deg, #54401f 0%, #8b5a24 55%, #d18c2e 100%);
+
+  &__eyebrow,
+  &__title,
+  &__desc {
+    display: block;
+  }
+
+  &__eyebrow {
+    font-size: 22rpx;
+    text-transform: uppercase;
+    letter-spacing: 4rpx;
+    opacity: 0.74;
+  }
+
+  &__title {
+    margin-top: 12rpx;
+    font-size: 40rpx;
+    font-weight: 700;
+  }
+
+  &__desc {
+    margin-top: 16rpx;
+    font-size: 25rpx;
+    line-height: 1.7;
+    opacity: 0.9;
+  }
+}
+
+.panel {
+  padding: 28rpx;
+  margin-top: 24rpx;
+  background: rgb(255 255 255 / 92%);
+  box-shadow: 0 14rpx 30rpx rgb(123 93 38 / 10%);
+
+  &__title,
+  &__line {
+    display: block;
+  }
+
+  &__title {
+    margin-bottom: 12rpx;
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #61401c;
+  }
+
+  &__line {
+    margin-top: 8rpx;
+    font-size: 25rpx;
+    line-height: 1.7;
+    color: #6f5537;
+  }
+
+  &__button {
+    margin-top: 18rpx;
+    font-size: 26rpx;
+    color: #fff;
+    background: #8a5721;
+    border-radius: 999rpx;
+  }
+}