feat: 首页、demo页面优化

codercup · Feb 1, 2024 · 920e76c · 920e76c
1 parent 0f02273
commit 920e76c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 32 deletions.
diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue
@@ -1,25 +1,13 @@
 <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="bg-slate-100 p-4">
+    <view class="bg-slate-100 w-full" v-for="item in listData" :key="item.id">
+      <view class="font-800">{{ item.title }}</view>
+      <view v-for="itemDetail in item.list" :key="itemDetail.path" class="mt-3">
         <view
           class="flex bg-white items-center justify-between p-3 mb-2"
-          @click="goDetailPage(item.path)"
+          @click="goDetailPage(itemDetail.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="flex-1 text-4 text-dark">{{ itemDetail.title }}</text>
           <text class="i-carbon-chevron-right"></text>
         </view>
       </view>
@@ -30,14 +18,14 @@
 <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'))
@@ -46,6 +34,19 @@ const pageDemos = pagesJson.pages
     path: e.path,
   }))
 
+const listData = reactive([
+  {
+    id: 1,
+    title: '基础功能',
+    list: baseDemos,
+  },
+  {
+    id: 2,
+    title: '页面功能',
+    list: pageDemos,
+  },
+])
+
 const goDetailPage = (path: string) => {
   const url = `/${path}`
   uni.navigateTo({

diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
@@ -12,18 +12,15 @@
     class="bg-white h-full overflow-hidden pt-2 px-4"
     :style="{ marginTop: safeAreaInsets?.top + 'px' }"
   >
-    <view class="mt-20">
-      <image src="/static/logo.svg" alt="" class="w-40 h-40 block mx-auto" />
-    </view>
-    <view class="text-center text-4xl main-title-color mt-8">unibest</view>
-    <view class="text-center text-2xl mt-2 mb-8">最好用的 uniapp 开发框架</view>
-    <view class="text-justify">
-      unibest 是由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI 驱动的跨端快速启动模板，使用 VS Code
-      开发，具有代码提示、自动格式化、统一配置、代码片段等功能，同时内置了大量平时开发常用的基本组件，开箱即用，让你编写
-      uniapp 拥有 best 体验。</view
-    >
-    <view class="text-blue mt-12 text-center"> 详细示例 参考 hello-unibest </view>
-    <view class="my-2 text-center">https://github.com/codercup/hello-unibest</view>
+    <view class="mt-12"
+      ><image src="/static/logo.svg" alt="" class="w-26 h-26 block mx-auto"
+    /></view>
+    <view class="text-center text-4xl main-title-color mt-3">unibest</view>
+    <view class="text-center text-2xl mb-3">最好用的 uniapp 开发框架</view>
+    <view class="text-justify max-w-100 m-auto text-4 indent mb-2">{{ description }}</view>
+    <view class="text-blue mt-8 text-left text-4"> 详细示例 参考 hello-unibest </view>
+    <view class="my-2 text-left text-4">{{ quoteUrl }}</view>
+
     <!-- #ifndef MP-WEIXIN -->
     <!-- 微信使用复制按钮需要申请权限，先去掉 -->
     <button @click="onCopy">复制 hello-unibest github地址</button>
@@ -32,12 +29,19 @@
 </template>
 
 <script lang="ts" setup>
+const quoteUrl = ref('https://github.com/codercup/hello-unibest')
+const description = ref(
+  'unibest 是由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI 驱动的跨端快速启动模板，使用 VS Code 开发，具有代码提示、自动格式化、统一配置、代码片段等功能，同时内置了大量平时开发常用的基本组件，开箱即用，让你编写 uniapp 拥有 best 体验。',
+)
+
 // 获取屏幕边界到安全区域距离
 const { safeAreaInsets } = uni.getSystemInfoSync()
+
+// 复制
 // #ifndef MP-WEIXIN
 const onCopy = () => {
   uni.setClipboardData({
-    data: 'https://github.com/codercup/hello-unibest',
+    data: quoteUrl.value,
     fail: (fail) => {
       console.error('fail', fail)
     },