feat(分包): 添加分包页面示例及请求组件

在分包页面中添加请求组件示例，并调整相关页面样式和导航

src/pages-sub/demo/components/request.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import type { IFooItem } from '@/api/foo'
+import { getFooAPI } from '@/api/foo'
+
+const recommendUrl = ref('http://laf.run/signup?code=ohaOgIX')
+
+// const initialData = {
+//   name: 'initialData',
+//   id: '1234',
+// }
+const initialData = undefined
+const { loading, error, data, run } = useRequest<IFooItem>(() => getFooAPI('菲鸽'), {
+  immediate: true,
+  initialData,
+})
+
+function reset() {
+  data.value = initialData
+}
+</script>
+
+<template>
+  <view class="p-6 text-center">
+    <view class="my-2 text-center">
+      <button type="primary" size="mini" class="w-160px" @click="run">
+        发送请求
+      </button>
+    </view>
+    <view class="h-16">
+      <view v-if="loading">
+        loading...
+      </view>
+      <block v-else>
+        <view class="text-xl">
+          请求数据如下
+        </view>
+        <view class="text-green leading-8">
+          {{ JSON.stringify(data) }}
+        </view>
+      </block>
+    </view>
+    <view class="my-6 text-center">
+      <button type="warn" size="mini" class="w-160px" :disabled="!data" @click="reset">
+        重置数据
+      </button>
+    </view>
+  </view>
+</template>

src/pages-sub/demo/index.vue

@@ -9,6 +9,7 @@
 
 <script lang="ts" setup>
 // code here
+import RequestComp from './components/request.vue'
 </script>
 
 <template>
@@ -16,9 +17,15 @@
     <view class="m-8">
       http://localhost:9000/#/pages-sub/demo/index
     </view>
-    <view class="text-green-500">
+    <view class="my-4 text-green-500">
       分包页面demo
     </view>
+    <view class="text-blue-500">
+      分包页面里面的components示例
+    </view>
+    <view>
+      <RequestComp />
+    </view>
   </view>
 </template>
 

src/pages/about/about.vue

@@ -27,6 +27,11 @@ function gotoVueQuery() {
     url: '/pages/about/vue-query',
   })
 }
+function gotoSubPage() {
+  uni.navigateTo({
+    url: '/pages-sub/demo/index',
+  })
+}
 </script>
 
 <template>
@@ -46,6 +51,11 @@ function gotoVueQuery() {
         vue-query 示例页面
       </button>
     </view>
+    <view class="text-center">
+      <button type="primary" size="mini" class="w-160px" @click="gotoSubPage">
+        前往分包页面
+      </button>
+    </view>
     <view class="mt-6 text-center text-sm">
       <view class="inline-block w-80% text-gray-400">
         为了方便脚手架动态生成不同UI模板，本页的按钮统一使用UI库无关的原生button

src/pages/about/components/request.vue

@@ -28,7 +28,7 @@ function reset() {
       但是 pages/components 里面的 vue 不会。
     </view>
 
-    <view class="my-6 text-center">
+    <view class="my-4 text-center">
       <button type="primary" size="mini" class="w-160px" @click="run">
         发送请求
       </button>
@@ -46,7 +46,7 @@ function reset() {
         </view>
       </block>
     </view>
-    <view class="my-6 text-center">
+    <view class="my-4 text-center">
       <button type="warn" size="mini" class="w-160px" :disabled="!data" @click="reset">
         重置数据
       </button>