refactor: 分为 unibest 和 hello-unibest 2个仓库，这个仓库去掉demo

pages.config.ts

@@ -15,36 +15,6 @@ export default defineUniPages({
       '^uni-(.*)': '@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue',
     },
   },
-  tabBar: {
-    color: '#999999',
-    selectedColor: '#018d71',
-    backgroundColor: '#F8F8F8',
-    borderStyle: 'black',
-    height: '50px',
-    fontSize: '10px',
-    iconWidth: '24px',
-    spacing: '3px',
-    list: [
-      {
-        iconPath: 'static/tabbar/home.png',
-        selectedIconPath: 'static/tabbar/homeHL.png',
-        pagePath: 'pages/index/index',
-        text: '首页',
-      },
-      {
-        iconPath: 'static/tabbar/example.png',
-        selectedIconPath: 'static/tabbar/exampleHL.png',
-        pagePath: 'pages/demo/index',
-        text: '示例',
-      },
-      {
-        iconPath: 'static/tabbar/personal.png',
-        selectedIconPath: 'static/tabbar/personalHL.png',
-        pagePath: 'pages/my/index',
-        text: '我的',
-      },
-    ],
-  },
   // 你也可以定义 pages 字段，它具有最高的优先级。
   pages: [],
   /**

src/pages/demo/base/copy.vue

@@ -1,29 +0,0 @@
-<route lang="json5" type="page">
-{
-  style: { navigationBarTitleText: '复制' },
-}
-</route>
-
-<template>
-  <view class="">
-    <button @click="onCopy">复制</button>
-  </view>
-</template>
-
-<script lang="ts" setup>
-const onCopy = () => {
-  uni.setClipboardData({
-    data: '菲鸽，你最棒',
-    fail: (fail) => {
-      console.error('fail', fail)
-    },
-    success: (success) => {
-      console.log('success', success)
-    },
-  })
-}
-</script>
-
-<style lang="scss" scoped>
-//
-</style>

src/pages/demo/base/mp-weixin-share.vue

@@ -1,42 +0,0 @@
-<route lang="json5">
-{
-  layout: 'demo',
-  style: { navigationBarTitleText: '微信分享' },
-}
-</route>
-
-<template>
-  <view class="text-green">微信分享页</view>
-  <view class="text-green-500">请在微信小程序中体验，或者开发者工具</view>
-  <view>1) 默认是不激活”发送给朋友“和”分享到朋友圈“的，如下图</view>
-  <image
-    src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/wx-share/wx-share-before.png"
-    mode="widthFix"
-  />
-  <view>2) 增加了onShareAppMessage和onShareTimeline后，就可以微信分享了，如下图</view>
-  <image
-    src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/wx-share/wx-share-after.png"
-    mode="widthFix"
-  />
-</template>
-
-<script lang="ts" setup>
-import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
-/** 激活“分享给好友” */
-onShareAppMessage((options: Page.ShareAppMessageOption): Page.CustomShareContent => {
-  console.log('options:', options)
-  return {
-    title: '自定义分享标题',
-    path: '/pages/index/index?id=xxx',
-    imageUrl:
-      'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/pretty-girl.png',
-  }
-})
-/** 激活“分享到朋友圈”， 注意：需要先激活“分享给好友” */
-onShareTimeline((): Page.ShareTimelineContent => {
-  return {
-    title: '自定义分享标题',
-    query: 'a=1&b=2',
-  }
-})
-</script>

src/pages/demo/base/navbar.vue

@@ -1,19 +0,0 @@
-<route lang="json5">
-{
-  style: { navigationBarTitleText: '自定义导航栏', navigationStyle: 'custom' },
-}
-</route>
-
-<template>
-  <fly-navbar />
-  <view class="bg-green-300 min-h-20" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
-    <view class="p-4"> 自定义导航栏，设置"navigationStyle":"custom" </view>
-    <view class="p-4"> 通常页面顶部有一个图片或背景色 </view>
-  </view>
-  <fly-content :line="20" />
-</template>
-
-<script lang="ts" setup>
-// 获取屏幕边界到安全区域距离
-const { safeAreaInsets } = uni.getSystemInfoSync()
-</script>

src/pages/demo/base/pinia.vue

@@ -1,36 +0,0 @@
-<route lang="json5">
-{
-  layout: 'demo',
-  style: { navigationBarTitleText: 'pinia+持久化' },
-}
-</route>
-
-<template>
-  <view class="flex justify-center items-center text-blue-500 mt-4 mb-4">
-    <view class="w-20">Count: {{ countStore.count }}</view>
-    <button class="ml-2 mr-2" @click="countStore.decrement">-1</button>
-    <button class="ml-2 mr-2" @click="countStore.increment">+1</button>
-    <button class="ml-2 mr-2" @click="countStore.reset">重置</button>
-  </view>
-  <view class="m-8 text-4 leading-8">
-    <view class="text-center">{{ userStore.userInfo }}</view>
-    <view class="text-center">请观察小程序的store，可以看到是可以正常设置的</view>
-    <button @click="setUserInfo">设置UserInfo</button>
-    <button @click="clearUserInfo" class="mt-4">清除UserInfo</button>
-  </view>
-</template>
-
-<script lang="ts" setup>
-import { useCountStore, useUserStore } from '@/store'
-
-const countStore = useCountStore()
-
-const userStore = useUserStore()
-
-const setUserInfo = () => {
-  userStore.setUserInfo({ nickname: 'fly', avatar: '', token: 'abcdef' })
-}
-const clearUserInfo = () => {
-  userStore.clearUserInfo()
-}
-</script>

src/pages/demo/base/request.vue

@@ -1,26 +0,0 @@
-<route lang="json5">
-{
-  layout: 'demo',
-  style: { navigationBarTitleText: 'request请求+请求拦截' },
-}
-</route>
-
-<template>
-  <view>
-    <button @click="handleRequest" type="primary" class="w-20">请求</button>
-    <view class="mt-4">{{ result }}</view>
-  </view>
-</template>
-<script lang="ts" setup>
-import { http } from '@/utils/http'
-
-const result = ref()
-const handleRequest = async () => {
-  const res = await http<string>({
-    url: '/foo',
-    method: 'GET',
-  })
-  console.log(res)
-  result.value = res
-}
-</script>

src/pages/demo/base/throughout.vue

@@ -1,145 +0,0 @@
-<route lang="json5">
-{
-  style: {
-    navigationBarTitleText: '通屏+下拉刷新+自定义导航栏',
-    enablePullDownRefresh: false,
-    backgroundColor: '#23c09c', // 这个背景色要与页面的.top-section的背景图差不多，这样下拉刷新看起来才比较协调
-    'app-plus': {
-      titleNView: {
-        type: 'transparent',
-      },
-    },
-    'mp-weixin': {
-      navigationStyle: 'custom',
-    },
-  },
-}
-</route>
-
-<template>
-  <!-- #ifdef MP-WEIXIN -->
-  <view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
-    <!-- 1/3，多于1个页面，用返回图标 -->
-    <navigator v-if="pages.length > 1" open-type="navigateBack" class="left-icon">
-      <view class="i-carbon-chevron-left text-current"></view>
-    </navigator>
-    <!-- 2/3，只有1个页面，如果不是tabbar，需要首页图标 -->
-    <!-- 这种情况一般出现在用户直接打开分享出去的详情页面，或者使用redirectTo等API -->
-    <navigator
-      v-else-if="!isTabbar"
-      open-type="switchTab"
-      url="/pages/index/index"
-      class="left-icon"
-    >
-      <view class="i-carbon-home text-current"></view>
-    </navigator>
-    <!-- 3/3，如果当前页就是tabbar页，不用去首页，也就是什么图标都不需要 -->
-    <view class="title">{{ '我是标题' }}</view>
-  </view>
-  <!-- #endif -->
-
-  <scroll-view
-    enable-back-to-top
-    scroll-y
-    class="scroll-view-bg flex-1 h-full"
-    id="scroller"
-    refresher-enabled
-    @scrolltolower="onScrollToLower"
-    @refresherrefresh="onRefresherRefresh"
-    :refresher-triggered="isTriggered"
-  >
-    <view class="top-section" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
-      <view class="pt-1">顶部区域</view>
-      <view>可以是标题，也可以是个人中心头像等</view>
-      <view>建议本区域高度不低于200rpx</view>
-    </view>
-    <view class="p-2 leading-6 bg-white">
-      注意，上面的导航栏渐变效果仅微信端支持，且上面的导航栏无法抽为组件引入使用，否则滚动效果没有了。如果不只是微信小程序使用，可以
-      onPageScroll 实现全端效果一样，另外如果是app端，还可以配置 titleNView。参考
-      https://uniapp.dcloud.net.cn/tutorial/page.html#onpagescroll 。
-    </view>
-    <view class="bg-white">
-      <fly-content :line="30" />
-    </view>
-  </scroll-view>
-</template>
-
-<script lang="ts" setup>
-import useNavbarWeixin from '@/hooks/useNavbarWeixin'
-import { onPullDownRefresh } from '@dcloudio/uni-app'
-
-const { pages, isTabbar, onScrollToLower, safeAreaInsets } = useNavbarWeixin()
-
-// 发现原生下拉刷新效果并不好，在微信里面只有顶部导航栏下拉才生效，页面区域下拉不生效，体验不好，结合自定义下拉刷新效果很好
-onPullDownRefresh(() => {
-  setTimeout(function fn() {
-    console.log('refresh - onPullDownRefresh')
-    // 关闭动画
-    uni.stopPullDownRefresh()
-  }, 1000)
-})
-
-// 当前下拉刷新状态
-const isTriggered = ref(false)
-// 自定义下拉刷新被触发
-const onRefresherRefresh = async () => {
-  // 开始动画
-  isTriggered.value = true
-  setTimeout(function fn() {
-    console.log('refresh - onRefresherRefresh')
-    // 关闭动画
-    isTriggered.value = false
-  }, 1000)
-}
-</script>
-
-<style lang="scss">
-.scroll-view-bg {
-  // 这个背景色要与.top-section的背景图差不多，这样下拉刷新看起来才比较协调
-  background-color: #23c09c;
-}
-
-// 这个区域最好要大于200rpx，效果会更好
-.top-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-height: 200rpx;
-  padding: 40rpx 0;
-  line-height: 2;
-  color: #fff;
-  background-image: url('https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/top-bg.png');
-  background-size: cover;
-}
-
-.fly-navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9;
-  width: 750rpx;
-  color: #000;
-  background-color: transparent;
-
-  .left-icon {
-    position: absolute;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 44px;
-    height: 44px;
-    font-size: 44rpx;
-    color: #000;
-  }
-
-  .title {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 44px;
-    font-size: 32rpx;
-    color: transparent;
-  }
-}
-</style>

src/pages/demo/base/uni-ui-icons.vue

@@ -1,16 +0,0 @@
-<route lang="json5">
-{
-  layout: 'demo',
-  style: { navigationBarTitleText: 'UniUI Icons 使用' },
-}
-</route>
-
-<template>
-  <view class="m-4">
-    <uni-icons type="contact" size="30"></uni-icons>
-    <uni-icons type="contact" size="30" color="red"></uni-icons>
-    <view class="text-blue-300"
-      >注意在微信小程序中，不支持改颜色，即设置了颜色也会变成默认的#333, BUG</view
-    >
-  </view>
-</template>

src/pages/demo/base/uni-ui.vue

@@ -1,14 +0,0 @@
-<route lang="json5">
-{
-  layout: 'demo',
-  style: { navigationBarTitleText: 'UniUI 使用' },
-}
-</route>
-
-<template>
-  <uni-card>
-    <text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
-  </uni-card>
-  <view>微信里面下面的 uni-badge 显示不出来，BUG</view>
-  <uni-badge text="99"></uni-badge>
-</template>

src/pages/demo/base/unocss-icons.vue

@@ -1,20 +0,0 @@
-<route lang="json5">
-{
-  layout: 'demo',
-  style: { navigationBarTitleText: 'UnoCss Icons 使用' },
-}
-</route>
-
-<template>
-  <view class="m-4">
-    <view class="mb-2">
-      这里只装了carbon的图表库，网址：
-      <a href="https://icones.js.org/collection/carbon" target="_blank"
-        >https://icones.js.org/collection/carbon </a
-      >(非H5环境，请使用浏览器打开)
-    </view>
-    <view class="i-carbon-car" />
-    <view class="i-carbon-car text-red" />
-    <button class="i-carbon-sun dark:i-carbon-moon" />
-  </view>
-</template>

src/pages/demo/base/unocss.vue

@@ -1,15 +0,0 @@
-<route lang="json5">
-{
-  layout: 'demo',
-  style: { navigationBarTitleText: 'UnoCss 使用' },
-}
-</route>
-
-<template>
-  <view class="flex flex-col justify-center items-center text-5 h-8 leading-8 mt-20">
-    <view class="text-green-500">文字颜色 text-light-50</view>
-    <view class="text-red-500">文字颜色 text-red-500</view>
-    <view class="bg-green-500">背景色 bg-light-50</view>
-    <view class="bg-red-500">背景色 bg-red-500</view>
-  </view>
-</template>

src/pages/demo/base/vconsole.vue

@@ -1,22 +0,0 @@
-<route lang="json5">
-{
-  layout: 'demo',
-  style: { navigationBarTitleText: '开启 vConsole' },
-}
-</route>
-
-<template>
-  <view class="text-5 h-8 leading-8">
-    <view class="text-red-500">在非正式版小程序里面已经集成了VConsole</view>
-    <view class="text-blue-500 mb-2">开启方式如下面</view>
-    <image
-      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/vconsole/1.png"
-      mode="widthFix"
-    />
-    <view class="text-blue-500 m-2">然后页面上会出现一个 `vConsole` 的调试按钮，如下图</view>
-    <image
-      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/vconsole/2.png"
-      mode="widthFix"
-    />
-  </view>
-</template>

src/pages/demo/index.vue

@@ -1,80 +0,0 @@
-<template>
-  <view class="bg-slate-100">
-    <view class="bg-slate-100 w-full">
-      <view class="font-800 mt-4">基本功能</view>
-      <view v-for="item in baseDemos" :key="item.path" class="mt-3">
-        <view
-          class="flex bg-white items-center justify-between p-3 mb-2"
-          @click="goDetailPage(item.path)"
-        >
-          <text class="flex-1 text-4 text-dark">{{ item.title }}</text>
-          <text class="i-carbon-chevron-right"></text>
-        </view>
-      </view>
-    </view>
-    <view class="bg-slate-100 w-full">
-      <view class="font-800 mt-4">页面功能</view>
-      <view v-for="item in pageDemos" :key="item.path" class="mt-3">
-        <view
-          class="flex bg-white items-center justify-between p-3 mb-2"
-          @click="goDetailPage(item.path)"
-        >
-          <text class="flex-1 text-4 text-dark">{{ item.title }}</text>
-          <text class="i-carbon-chevron-right"></text>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts" name="TestIndex">
-import pagesJson from '@/pages.json'
-
-console.log(pagesJson)
-/** 基本功能 */
-const baseDemos = pagesJson.pages
-  .filter((e) => e.path.startsWith('pages/demo/base'))
-  .map((e) => ({
-    title: e.style?.navigationBarTitleText || '默认页面标题',
-    path: e.path,
-  }))
-/** 页面功能 */
-const pageDemos = pagesJson.pages
-  .filter((e) => e.path.startsWith('pages/demo/page'))
-  .map((e) => ({
-    title: e.style?.navigationBarTitleText || '默认页面标题',
-    path: e.path,
-  }))
-
-const goDetailPage = (path: string) => {
-  const url = `/${path}`
-  uni.navigateTo({
-    url,
-  })
-}
-</script>
-
-<style>
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.logo {
-  width: 200rpx;
-  height: 200rpx;
-  margin: 200rpx auto 50rpx;
-}
-
-.text-area {
-  display: flex;
-  justify-content: center;
-}
-
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
-}
-</style>

src/pages/demo/page/clock.vue

@@ -1,129 +0,0 @@
-<route lang="json5">
-{
-  layout: 'demo',
-  style: { navigationBarTitleText: '动态时钟' },
-}
-</route>
-
-<template>
-  <view class="mt-4 h-10 text-center">动态时钟</view>
-  <view class="clock-box">
-    <view class="clock" :style="{ '--ds': ds, '--dm': dm, '--dh': dh }">
-      <view class="clock-pane">
-        <text class="clock-num" :style="{ '--i': n }" v-for="n in 12" :key="n">{{ n }}</text>
-      </view>
-      <view class="clock-hour"></view>
-      <view class="clock-min"></view>
-      <view class="clock-sec"></view>
-    </view>
-  </view>
-</template>
-
-<script lang="ts" setup>
-const d = new Date()
-const h = d.getHours()
-const m = d.getMinutes()
-const s = d.getSeconds()
-const ds = ref(s)
-const dm = ref(m + s / 60)
-const dh = ref(h + m / 60 + s / 3600)
-</script>
-
-<style lang="scss">
-.clock-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.clock {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 350px;
-  height: 350px;
-  font-size: 24px;
-  border-radius: 20px;
-  box-shadow: 2px 2px 20px #0000001a;
-  --step: 60s;
-}
-
-.clock::before {
-  position: absolute;
-  width: 300px;
-  height: 300px;
-  content: '';
-  background: repeating-conic-gradient(from -0.5deg, #333 0 1deg, transparent 0deg 30deg),
-    repeating-conic-gradient(from -0.5deg, #ccc 0 1deg, transparent 0deg 6deg);
-  border-radius: 50%;
-  mask: radial-gradient(transparent 145px, red 0);
-}
-
-.clock-pane {
-  position: absolute;
-  width: 250px;
-  height: 250px;
-}
-
-.clock-num {
-  position: absolute;
-  offset-path: path(
-    'M250 125c0 69.036-55.964 125-125 125S0 194.036 0 125 55.964 0 125 0s125 55.964 125 125z'
-  );
-  offset-distance: calc(var(--i) * 10% / 1.2 - 25%);
-  offset-rotate: 0deg;
-}
-
-.clock-hour {
-  position: absolute;
-  width: 4px;
-  height: 60px;
-  background: #333;
-  transform: translateY(-50%) rotate(0);
-  transform-origin: center bottom;
-  animation: clock calc(var(--step) * 60 * 12) infinite linear;
-  animation-delay: calc(-1 * var(--step) * var(--dh) * 60);
-}
-
-.clock-min {
-  position: absolute;
-  width: 4px;
-  height: 90px;
-  background: #333;
-  transform: translateY(-50%) rotate(0);
-  transform-origin: center bottom;
-  animation: clock calc(var(--step) * 60) infinite linear;
-  animation-delay: calc(-1 * var(--step) * var(--dm));
-}
-
-.clock-sec {
-  position: absolute;
-  width: 2px;
-  height: 120px;
-  background: red;
-  transform: translateY(-50%) rotate(0);
-  transform-origin: center bottom;
-  animation: clock var(--step) infinite steps(60);
-  animation-delay: calc(-1 * var(--step) * var(--ds) / 60);
-}
-
-.clock-sec::after {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  width: 10px;
-  height: 10px;
-  content: '';
-  background: #fff;
-  border: 4px solid #333;
-  border-radius: 50%;
-  transform: translate(-50%, 50%);
-}
-
-@keyframes clock {
-  to {
-    transform: translateY(-50%) rotate(360deg);
-  }
-}
-</style>

src/pages/demo/page/floating-bubble.vue

@@ -1,89 +0,0 @@
-<route lang="json5">
-{
-  layout: 'default',
-  style: { navigationBarTitleText: '页面悬浮球' },
-}
-</route>
-
-<template>
-  <view>
-    <movable-area class="movable-area">
-      <movable-view
-        :style="`--size:${ballSize}px`"
-        class="movable-view"
-        direction="all"
-        :x="x"
-        :y="y"
-        @change="onChange"
-        @touchend.prevent="onTouchEnd"
-      >
-        <view class="w-full h-full rounded-full bg-green-400"></view>
-      </movable-view>
-    </movable-area>
-    <view>页面其他元素</view>
-    <view>可以正常触发点击事件吗？答案是可以的</view>
-    <button @click="onClick">按钮</button>
-    <view>{{ x }}</view>
-    <view>{{ y }}</view>
-    <view @click="onSet">点击设置</view>
-  </view>
-</template>
-
-<script lang="ts" setup name="FloatingBubble">
-const { windowHeight, windowWidth } = uni.getSystemInfoSync()
-console.log(uni.getSystemInfoSync())
-
-const ballSize = 60
-const x = ref(windowWidth - ballSize) // 靠右侧
-const y = ref(windowHeight - ballSize - 20) // 距离底部20px
-
-const middleX = (windowWidth - ballSize) / 2
-const onChange: UniHelper.MovableViewOnChange = (e) => {
-  // console.log(e.detail)
-  const { x: _x, y: _y } = e.detail
-  x.value = _x
-  y.value = _y
-}
-// TODO: 期望最终落点不靠左右两边时，会自动回到两边，有一定的动画效果
-const onTouchEnd = (e) => {
-  console.log(e)
-  console.log('onTouchEnd')
-  // TODO：为啥这里设置的不生效了，原生不会移动到设置的地方，onSet里面可以。这里直接执行onSet也不行
-  nextTick(() => {
-    console.log(x.value, middleX)
-    if (x.value < middleX) {
-      x.value = 0
-    } else {
-      x.value = windowWidth - ballSize
-    }
-  })
-}
-
-const onClick = () => {
-  uni.showToast({
-    title: 'yes',
-    icon: 'none',
-  })
-}
-const onSet = () => {
-  x.value = 100
-  y.value = 100
-}
-</script>
-
-<style lang="scss">
-.movable-area {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 100;
-  width: 100%;
-  height: 100%;
-  pointer-events: none; // 设置area元素不可点击，则事件便会下移至页面下层元素
-  .movable-view {
-    width: var(--size);
-    height: var(--size);
-    pointer-events: auto; // 必须设置，否则无法点击
-  }
-}
-</style>

src/pages/demo/page/img-min/index.vue

@@ -1,29 +0,0 @@
-<route lang="json5">
-{
-  layout: 'demo',
-  style: { navigationBarTitleText: '图片压缩' },
-}
-</route>
-
-<template lang="">
-  <view class="m-4 text-center">
-    <view class="mb-2 text-orange-500">
-      原始图片是一个很大的，2.5M，build之后生成的图片只有1.1M，体积下降 56%
-    </view>
-    <image
-      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/img-min/bg-1.png"
-      mode="scaleToFill"
-    />
-    <view class="mb-4">对比图如下2图，如果看不清请看代码原图</view>
-    <image
-      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/img-min/before.png"
-      mode="widthFix"
-      class="w-full"
-    />
-    <image
-      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/img-min/after.png"
-      mode="widthFix"
-      class="w-full"
-    />
-  </view>
-</template>

src/pages/demo/page/lottery.vue

@@ -1,127 +0,0 @@
-<route lang="json5">
-{
-  layout: 'demo',
-  style: { navigationBarTitleText: '九宫格抽奖' },
-}
-</route>
-
-<template>
-  <view class="mt-4 h-10 text-center">九宫格抽奖</view>
-  <view class="lottery-box">
-    <view class="lottery-list">
-      <view
-        class="lottery-item"
-        :class="{
-          active: n === activeIndex,
-          btn: n === btnIndex, // 最中间那个是展示按钮
-        }"
-        v-for="n in numList"
-        :key="n"
-        @click="handleClick(n)"
-      >
-        <view v-if="n === btnIndex">点击抽奖</view>
-        <view v-else> {{ n }}</view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script lang="ts" setup>
-import { reactive, computed } from 'vue'
-
-const giftLen = 8 // 九宫格有8个礼物
-const loop = 4 // 设置转多少圈，在最后一圈会慢下来
-const totalStep = giftLen * loop // 总的步数 32
-const lastLoopStep = totalStep - giftLen // 最后一圈，24
-const numList = [1, 2, 3, 8, -1, 4, 7, 6, 5]
-const btnIndex = numList[4] // 最中间那个是展示按钮
-
-const state = reactive({
-  lottery: 0, // 奖品
-  step: -1, // 目前转动的步数
-  stopStep: totalStep, // 停下来的时需要走的步数
-  speed: 2, // 转动速度，我们是通过定时器去实现转动效果的，所以这也就是定时器的执行频率
-  timer: null, // 定时器ID
-  loading: false,
-})
-// 通过目前转动的步数来对8取模得到当前转到的格子索引
-const activeIndex = computed(() => {
-  return (state.step % 8) + 1
-})
-
-function run() {
-  // 当前步数大于等于目标步数
-  if (state.step >= state.stopStep) {
-    // 清空定时器，停止转动
-    clearTimeout(state.timer)
-    // 将初始化步数为最终奖品的步数，转动速度也置为初始速度，下次才能正确转动
-    state.step = state.lottery
-    state.speed = 2
-    state.loading = false
-    console.log(`恭喜获得${activeIndex.value}号奖品`)
-    uni.showModal({
-      title: `恭喜获得${activeIndex.value}号奖品`,
-    })
-    return
-  }
-  // 转动到最后一圈时，增加speed，也就是定时器执行间隔时间变长，转动速度变慢
-  if (state.step > lastLoopStep + state.lottery) {
-    state.speed++
-  }
-  // 抽奖函数每执行一次，当前步数加一
-  state.step++
-  // 重新开启定时器执行抽奖函数
-  state.timer = setTimeout(run, state.speed * 30)
-}
-// 点击抽奖之后调用的函数
-function handleClick(n) {
-  if (n !== btnIndex) {
-    return
-  }
-  if (state.loading) return
-  state.loading = true
-  // 最终获得的奖品，实际业务中是通过接口获取的，这里使用随机数来模拟下
-  state.lottery = Math.ceil(Math.random() * giftLen)
-  console.log(state.lottery)
-  // 计算总共要转动的步数，转4圈后再转到奖品处
-  state.stopStep = state.lottery + totalStep
-  // 执行抽奖函数
-  run()
-}
-</script>
-
-<style lang="css">
-.lottery-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.lottery-list {
-  --size: 100px;
-
-  display: flex;
-  flex-wrap: wrap;
-  width: calc(3 * var(--size) + 3px);
-  border-right: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
-}
-
-.lottery-item {
-  width: var(--size);
-  height: var(--size);
-  line-height: var(--size);
-  text-align: center;
-  border-top: 1px solid #ccc;
-  border-left: 1px solid #ccc;
-}
-
-.lottery-item.active {
-  color: #fff;
-  background-color: red;
-}
-
-.lottery-item.btn {
-  cursor: pointer;
-}
-</style>

src/pages/demo/page/lottery/big-wheel.vue

@@ -1,216 +0,0 @@
-<route lang="json5">
-{
-  layout: 'demo',
-  style: { navigationBarTitleText: '大转盘抽奖' },
-}
-</route>
-
-<template>
-  <view class="text-center">
-    <view class="container">
-      <view class="prize-list" :style="styleObj">
-        <view
-          class="prize-item"
-          v-for="(item, index) in prizeList"
-          :key="item.id"
-          :style="prizeStyle(index)"
-        >
-          <image :src="item.pic" class="gift-img" />
-          <text class="gift-name">{{ item.name }}</text>
-        </view>
-      </view>
-      <view class="lottery-btn" @click="start"> </view>
-    </view>
-    <view class="text-blue-600 my-2">目标是实现如下的效果，但是我感觉只用css还是太难了</view>
-    <image
-      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery/target.png"
-      mode="widthFix"
-      width="552px"
-    />
-    <!-- <image :src="targetImg" mode="widthFix" width="552px" /> -->
-  </view>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from 'vue'
-// TODO: fix 微信小程序里面会报错
-// import targetImg from 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery/target.png'
-
-// 后台配置的奖品数据
-const prizeList = [
-  {
-    id: 0,
-    name: '双肩包',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/backpack.jpg',
-  },
-  {
-    id: 1,
-    name: '积木',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/jimu.jpg',
-  },
-  {
-    id: 2,
-    name: '红包',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/red-envelope.jpg',
-  },
-  {
-    id: 3,
-    name: '茶具',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/tea-set.jpg',
-  },
-  {
-    id: 4,
-    name: '可爱脸',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/tushetou.jpg',
-  },
-  {
-    id: 5,
-    name: '挖掘机',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/wajueji.jpg',
-  },
-  {
-    id: 6,
-    name: '无辜脸',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/xiaolian.jpg',
-  },
-  {
-    id: 7,
-    name: '烟灰缸',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/yanhuigang.jpg',
-  },
-]
-let isRunning = false // 是否正在抽奖
-const baseRunAngle = 360 * 5 // 总共转动角度 至少5圈
-let prizeId = 0 // 中奖id
-
-// 平均每个奖品角度
-const rotateAngle = computed(() => {
-  const _degree = 360 / prizeList.length
-  return _degree
-})
-// 要执行总角度数
-const totalRunAngle = ref(baseRunAngle - (prizeId + 0.5) * rotateAngle.value)
-
-// 计算绘制转盘背景
-const bgColor = (() => {
-  const [c1, c2] = ['#5352b3', '#363589']
-  // repeating-conic-gradient(red 0 15deg, blue  15deg 30deg);
-  return `background: repeating-conic-gradient(${c1} 0 ${rotateAngle.value}deg,
-  ${c2} ${rotateAngle.value}deg ${2 * rotateAngle.value}deg);`
-})()
-
-const styleObj = ref(bgColor)
-// 每个奖品布局
-const prizeStyle = computed(() => {
-  const _degree = rotateAngle.value
-  return (i) => {
-    // 外框大小设置为90vw，里面是一半，45vw
-    return `
-              width: ${2 * 45 * Math.sin(((_degree / 2) * Math.PI) / 180)}vw;
-              height: 45vw;
-              transform: rotate(${_degree * i + _degree / 2}deg);
-              transform-origin: 50% 100%;
-            `
-  }
-})
-
-// 获取随机数
-const getRandomNum = () => {
-  const num = Math.floor(Math.random() * prizeList.length)
-  return num
-}
-
-const stopRun = () => {
-  isRunning = false
-  const prizeName = prizeList.find((e) => e.id === prizeId)!.name
-  uni.showModal({
-    title: `恭喜你中奖 ${prizeName}`,
-    success() {
-      styleObj.value = `${bgColor} transform: rotate(0deg);`
-    },
-  })
-}
-
-const startRun = () => {
-  console.log(isRunning, totalRunAngle.value)
-  // 设置动效
-  styleObj.value = `${bgColor} transform: rotate(${totalRunAngle.value}deg); transition: all 4s ease;`
-  setTimeout(stopRun, 4000)
-}
-const start = () => {
-  if (!isRunning) {
-    isRunning = true
-
-    console.log('开始抽奖，后台请求中奖奖品')
-    // 请求返回的奖品编号 这里使用随机数
-    prizeId = getRandomNum()
-    totalRunAngle.value = baseRunAngle - (prizeId + 0.5) * rotateAngle.value
-    console.log('中奖ID>>>', prizeId, prizeList[prizeId], totalRunAngle.value)
-    nextTick(() => {
-      startRun()
-    })
-  }
-}
-</script>
-
-<style lang="scss">
-.container {
-  position: relative;
-  width: 90vw;
-  height: 90vw;
-  margin: 20px auto;
-  border: 10px solid #98d3fc;
-  border-radius: 50%;
-}
-
-.prize-list {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: 50%;
-
-  // 使用outline代替border可以省很多定位的问题
-  // outline: 10px solid #98d3fc;
-}
-
-.prize-item {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  margin: auto;
-
-  // border: 2px solid red;
-}
-
-.prize-item .gift-img {
-  display: block;
-  width: 30%;
-  height: 20%;
-  margin: 20px auto 10px;
-  border-radius: 50%;
-}
-
-.prize-item .gift-name {
-  font-size: 12px;
-  line-height: 20px;
-  color: #fff;
-  text-align: center;
-}
-
-.lottery-btn {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 80px;
-  height: 96px;
-  margin: auto;
-  cursor: pointer;
-  background: url('https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/btn-enable.png')
-    no-repeat center / 100% 100%;
-  transform: translate(-50%, -50%);
-}
-</style>

src/pages/demo/page/lottery/nine-grid.vue

@@ -1,196 +0,0 @@
-<route lang="json5">
-{
-  layout: 'demo',
-  style: { navigationBarTitleText: '九宫格抽奖' },
-}
-</route>
-<template>
-  <view>
-    <view class="container">
-      <view
-        class="gift-item"
-        :class="{ active: currentIndex === index }"
-        v-for="(item, index) in prizeList"
-        :key="index"
-        @click="start(index)"
-      >
-        <image :src="item.pic" class="gift-img" />
-        <text v-if="index !== 4" class="gift-name">{{ item.name }}</text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from 'vue'
-
-const currentIndex = ref(0) // 当前位置
-// 后台配置的奖品数据
-const prizeList = [
-  {
-    id: 0,
-    name: '双肩包',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/backpack.jpg',
-  },
-  {
-    id: 1,
-    name: '积木',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/jimu.jpg',
-  },
-  {
-    id: 2,
-    name: '红包',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/red-envelope.jpg',
-  },
-  {
-    id: 3,
-    name: '茶具',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/tea-set.jpg',
-  },
-  {
-    id: 5,
-    name: '可爱脸',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/tushetou.jpg',
-  },
-  {
-    id: 6,
-    name: '挖掘机',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/wajueji.jpg',
-  },
-  {
-    id: 7,
-    name: '无辜脸',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/xiaolian.jpg',
-  },
-  {
-    id: 8,
-    name: '烟灰缸',
-    pic: 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery-prize/yanhuigang.jpg',
-  },
-]
-const startBtn = {
-  id: 4,
-  name: '开始按钮',
-  pic: 'https://img2.baidu.com/it/u=1497996119,382735686&fm=253',
-}
-// 九宫格中间位置插入开始按钮
-prizeList.splice(4, 0, startBtn)
-
-// 奖品高亮顺序
-const prizeSort = [0, 1, 2, 5, 8, 7, 6, 3]
-
-// 获取随机数
-const getRandomNum = () => prizeSort[Math.floor(Math.random() * prizeSort.length)]
-
-let isRunning = false // 是否正在抽奖
-let speed = 10 // 抽奖转动速度
-let timerIns = null // 定时器实例
-let currentRunCount = 0 // 已跑次数
-const totalRunCount = 32 // 总共跑动次数，8的倍数即可
-let prizeId = 0 // 中奖id(0-8，不能是4)
-
-// 要执行总步数
-const totalRunStep = computed(() => {
-  return totalRunCount + prizeSort.indexOf(prizeId)
-})
-
-const stopRun = () => {
-  // eslint-disable-next-line no-unused-expressions
-  timerIns && clearTimeout(timerIns)
-}
-const startRun = () => {
-  stopRun()
-  console.log(currentRunCount, totalRunStep.value)
-  // 要执行总步数
-  // 已走步数超过
-  if (currentRunCount > totalRunStep.value) {
-    isRunning = false
-    const prizeName = prizeList.find((e) => e.id === prizeId)!.name
-    uni.showModal({
-      title: `恭喜你中奖 ${prizeName}`,
-    })
-    return
-  }
-  currentIndex.value = prizeSort[currentRunCount % 8]
-  // 如果当前步数超过了2/3则速度慢下来
-  if (currentRunCount > Math.floor((totalRunCount * 2) / 3)) {
-    speed += Math.floor(currentRunCount / 3)
-    console.log('速度>>>>', speed)
-  }
-
-  timerIns = setTimeout(() => {
-    currentRunCount++
-    startRun()
-  }, speed)
-}
-
-const start = (i) => {
-  if (i === 4 && !isRunning) {
-    // 重置数据
-    currentRunCount = 0
-    speed = 100
-    isRunning = true
-
-    console.log('开始抽奖，后台请求中奖奖品')
-    // 请求返回的奖品编号 这里使用随机数 但不能为4
-    // const prizeId = getRandomNum()
-    // console.log('中奖ID>>>', prizeId, prizeList[prizeId])
-    // prizeId = prizeId
-    // 模拟接口延时返回 如果接口突然报错如何处理？直接调用stopRun()方法停止转动
-    setTimeout(() => {
-      prizeId = getRandomNum()
-      console.log('中奖ID>>>', prizeId, prizeList[prizeId])
-      // 拿到数据才可以跑
-    }, 2000)
-    startRun()
-  }
-}
-</script>
-<style lang="scss">
-.container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-around;
-  width: 90vw;
-  height: 90vw;
-  margin: 20px auto;
-  background: #98d3fc;
-  border: 1px solid #98d3fc;
-}
-
-.gift-item {
-  position: relative;
-  box-sizing: border-box;
-  width: 30vw;
-  height: 30vw;
-  border: 2px solid #fff;
-}
-
-.gift-item:nth-of-type(5) {
-  cursor: pointer;
-}
-
-.gift-item .gift-img {
-  width: 100%;
-  height: 100%;
-}
-
-.gift-item .gift-name {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 20px;
-  font-size: 12px;
-  line-height: 20px;
-  color: #fff;
-  text-align: center;
-  background: rgb(0 0 0 / 50%);
-}
-
-.active {
-  border: 2px solid red;
-  box-shadow: 2px 2px 30px #fff;
-}
-</style>

src/pages/demo/page/lottery2.vue

@@ -1,181 +0,0 @@
-<route lang="json5">
-{
-  layout: 'demo',
-  style: { navigationBarTitleText: '大转盘抽奖' },
-}
-</route>
-
-<template>
-  <view class="mt-4 h-10 text-center">大转盘抽奖</view>
-  <div class="lottery-box">
-    <div class="lottery-list">
-      <div class="lottery-item" v-for="(n, index) in giftLen" :key="n">
-        <div class="lottery-item-inner">
-          <div class="lottery-item-gift">奖品{{ index + 1 }}</div>
-        </div>
-      </div>
-      <div
-        class="pointer"
-        @click="handleClick"
-        :style="{ transform: `rotate(${state.stopDeg}deg)` }"
-      >
-        <div>开始</div>
-        <div>抽奖</div>
-      </div>
-    </div>
-  </div>
-  <view class="leading-8">
-    <view class="mt-8 text-center text-green-600">下面是调试过程图片</view>
-    <view class="mb-8 text-center text-green-600">欢迎感兴趣的玩家继续优化</view>
-    <view class="text-center text-blue-600">计算lottery-item-inner节点的padding-left值</view>
-    <image
-      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery/lottery2-1.png"
-      mode="widthFix"
-      class="w-full"
-    />
-    <view class="text-center text-blue-600">调整lottery-item-gift节点</view>
-    <image
-      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery/lottery2-2.png"
-      mode="widthFix"
-      class="w-full"
-    />
-  </view>
-</template>
-
-<script lang="ts" setup>
-const giftLen = 8
-const deg = 360 / giftLen // 每份的角度
-const loop = 4 // 转多少圈，4圈
-const state = reactive({
-  lottery: 0, // 本次抽奖的奖品索引
-  lastLottery: 0, // 上一次抽奖的奖品索引
-  stopDeg: 0, // 最终要旋转的角度
-  loading: false,
-})
-
-function handleClick() {
-  if (state.loading) return
-  state.loading = true
-  // 最终获得的奖品索引，实际业务中是通过接口获取的，这里使用随机数0~9来模拟下
-  state.lottery = Math.floor(Math.random() * giftLen)
-  console.log(state.lottery)
-  // 最终的旋转角度，指针指向本次奖品的旋转角度+指针从上一次的奖品指向回归0的旋转角度+ 默认转动三圈
-  state.stopDeg += (state.lottery + (giftLen - state.lastLottery)) * deg + loop * 360
-
-  // uni不支持addEventListener所以改用下面的
-  setTimeout(() => {
-    state.lastLottery = state.lottery
-    state.loading = false
-    // alert(`恭喜获得奖品${state.lottery + 1}`)
-    uni.showModal({
-      title: `恭喜获得奖品${state.lottery + 1}`,
-    })
-  }, 3000)
-}
-</script>
-
-<style lang="scss">
-.lottery-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.lottery-list {
-  --size: 600rpx;
-  --half: calc(var(--size) / 2);
-  --len: 8; // 与代码 giftLen 长度一致
-  --deg: calc(360 / var(--len) * 1deg);
-  --deg-num: calc(360 / var(--len));
-
-  position: relative;
-  width: var(--size);
-  height: var(--size);
-  border: 2px solid #f55;
-  border-radius: 50%;
-}
-
-.lottery-item {
-  position: absolute;
-  top: 0;
-  left: var(--half);
-  width: var(--half);
-  height: var(--size);
-  overflow: hidden; // 把这个注释掉可以看到最初的模样
-  // background-color: #ff5350a1; // 放开这个可以看到最初的模样
-  transform-origin: left center;
-}
-
-.lottery-item-inner {
-  position: absolute;
-  top: 0;
-  left: calc(-1 * var(--half));
-  box-sizing: border-box;
-  width: var(--half);
-  height: var(--size);
-  padding-left: calc(((1 - sin(var(--deg-num))) * var(--size)));
-  font-size: 12px;
-  border-radius: var(--half) 0 0 var(--half);
-  transform: rotate(var(--deg));
-  transform-origin: right center;
-}
-
-.lottery-item-inner .lottery-item-gift {
-  display: block;
-  text-align: center;
-  transform: rotate(calc(-0.5 * var(--deg))) translateY(16px)
-    translateX(calc(0.5 * var(--half) * (1 - 1 / cos(0.5 * var(--deg)))));
-  transform-origin: center;
-}
-
-.lottery-item:nth-child(2n + 1) .lottery-item-inner {
-  background: #fef6e0a1;
-}
-
-.lottery-item:nth-child(2n) .lottery-item-inner {
-  background: #ffffffa1;
-}
-
-// TIPS: 与上面的--len一致
-@for $i from 1 through 8 {
-  .lottery-item:nth-child(#{$i}) {
-    transform: rotate(calc(($i - 1 - 0.5) * var(--deg)));
-  }
-}
-
-.pointer {
-  --pointer-size: 40px;
-  --pointer-padding: calc(var(--pointer-size) / 5);
-
-  position: absolute;
-  top: calc(var(--half) - var(--pointer-size) / 2 - var(--pointer-padding));
-  left: calc(var(--half) - var(--pointer-size) / 2 - var(--pointer-padding));
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: var(--pointer-size);
-  height: var(--pointer-size);
-  padding: var(--pointer-padding);
-  font-size: 12px;
-  text-align: center;
-  background-color: #ffffffd1;
-  border: 1px solid #ff5350;
-  border-radius: 50%;
-  transition: transform 3s cubic-bezier(0.2, 0.93, 0.43, 1);
-}
-
-.pointer::after {
-  --caret-size: 8px;
-
-  position: absolute;
-  bottom: calc(var(--pointer-size) + var(--pointer-padding) * 2);
-  left: calc(var(--pointer-size) / 2 - var(-caret-size) / 2);
-  content: '';
-  border-color: transparent;
-  border-style: solid;
-  border-width: calc(var(--caret-size) * 2) var(--caret-size);
-  border-bottom-color: #ff5350;
-  transform-origin: center;
-}
-</style>

src/pages/index/index.vue

@@ -11,15 +11,30 @@
     </view>
     <view class="text-center text-4xl main-title-color mt-4">unibest</view>
     <view class="text-center text-2xl mt-4 mb-8">最好用的 uniapp 开发模板</view>
-    <view class="text-center text-xl"
-      >unibest 是由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI 驱动的跨端快速启动模板，使用 VS Code
+    <view class="text-center text-xl">
+      unibest 是由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI 驱动的跨端快速启动模板，使用 VS Code
       开发，具有代码提示、自动格式化、统一配置、代码片段等功能，同时内置了大量平时开发常用的基本组件，开箱即用，让你编写
       uniapp 拥有 best 体验。</view
     >
+    <view class="text-blue mt-8 text-center text-xl">详细示例参考 hello-unibest</view>
+    <view class="m-2"> https://github.com/codercup/hello-unibest </view>
+    <button @click="onCopy">复制hello-unibest github地址</button>
   </view>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+const onCopy = () => {
+  uni.setClipboardData({
+    data: 'https://github.com/codercup/hello-unibest',
+    fail: (fail) => {
+      console.error('fail', fail)
+    },
+    success: (success) => {
+      console.log('success', success)
+    },
+  })
+}
+</script>
 
 <style>
 .main-title-color {

src/pages/my/components/wx-login.vue

@@ -1,39 +0,0 @@
-<route lang="json5">
-{
-  style: { navigationBarTitleText: '登录' },
-}
-</route>
-
-<template>
-  <view class="p-4">
-    <view class="flex items-center leading-6" v-if="hasLogin">
-      <image class="w-8 h-8 rounded-full" :src="userStore.userInfo?.avatar"></image>
-      <view class="ml-2">{{ userStore.userInfo?.nickname }}</view>
-    </view>
-    <view class="flex items-center leading-6" v-else @click="show = true">
-      <view class="i-carbon-user-avatar"></view>
-      <view class="ml-2">点击显示微信头像</view>
-    </view>
-    <fly-login v-model="show" />
-    <fly-content :line="10" />
-    <button v-if="hasLogin" class="mt-2" @click="logout">退出登录</button>
-  </view>
-</template>
-
-<script lang="ts" setup name="WxLogin">
-import { useUserStore } from '@/store'
-
-const show = ref(false)
-const userStore = useUserStore()
-const hasLogin = computed(() => userStore.userInfo?.nickname)
-const logout = () => {
-  uni.showModal({
-    title: '确认退出当前账号？',
-    success: (res) => {
-      if (res.confirm) {
-        userStore.clearUserInfo()
-      }
-    },
-  })
-}
-</script>

src/pages/my/index.vue

@@ -1,35 +0,0 @@
-<route lang="json5">
-{
-  style: { navigationBarTitleText: '我的' },
-}
-</route>
-<template>
-  <view class="ml-4">wx的openid: </view>
-  <view class="ml-4">{{ openId }}</view>
-  <wx-login />
-</template>
-
-<script lang="ts" setup>
-import { useUserStore } from '@/store'
-import { http } from '@/utils/http'
-import WxLogin from './components/wx-login.vue'
-
-const userStore = useUserStore()
-const openId = ref('')
-
-// 用户登录，获取openId
-uni.login({
-  provider: 'weixin',
-  success: async ({ code }) => {
-    const res = await http<{ session_key: string; openid: string }>({
-      method: 'GET',
-      url: '/weixin/jscode2session',
-      data: {
-        code,
-      },
-    })
-    openId.value = res.result.openid
-    userStore.setUserInfo({ openid: res.result.openid })
-  },
-})
-</script>