refactor: 使用独立about文件夹

src/pages/about/about.vue

@@ -0,0 +1,36 @@
+<route lang="json5">
+{
+  style: {
+    navigationBarTitleText: '关于',
+  },
+}
+</route>
+
+<template>
+  <view
+    class="bg-white overflow-hidden pt-2 px-4"
+    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
+  >
+    <view class="text-center text-3xl mt-8">
+      鸽友们好，我是
+      <text class="text-red-500">菲鸽</text>
+    </view>
+    <RequestComp />
+    <UploadComp />
+  </view>
+</template>
+
+<script lang="ts" setup>
+import RequestComp from './components/request.vue'
+import UploadComp from './components/upload.vue'
+
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
+</script>
+
+<style lang="scss" scoped>
+.test-css {
+  // mt-4=>1rem=>16px;
+  margin-top: 16px;
+}
+</style>

src/pages/about/components/request.vue

@@ -0,0 +1,43 @@
+<route lang="json5">
+{
+  layout: 'demo',
+  style: {
+    navigationBarTitleText: '请求',
+  },
+}
+</route>
+
+<template>
+  <view class="p-6 text-center">
+    <view class="my-2">使用的是 laf 云后台</view>
+    <view class="text-green-400">我的推荐码，可以获得佣金</view>
+
+    <!-- #ifdef H5 -->
+    <view class="my-2">
+      <a class="my-2" :href="recommendUrl" target="_blank">{{ recommendUrl }}</a>
+    </view>
+    <!-- #endif -->
+
+    <!-- #ifndef H5 -->
+    <view class="my-2 text-left text-sm">{{ recommendUrl }}</view>
+    <!-- #endif -->
+
+    <!-- http://localhost:9000/#/pages/index/request -->
+    <button @click="run" class="my-6">发送请求</button>
+    <view class="text-xl">请求数据如下</view>
+    <view class="text-green h-6">{{ JSON.stringify(data) }}</view>
+    <button type="warn" @click="reset" class="my-6">清除数据</button>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { getFooAPI, postFooAPI, IFooItem } from '@/service/index/foo'
+
+const recommendUrl = ref('http://laf.run/signup?code=ohaOgIX')
+
+// 适合少部分全局性的接口————多个页面都需要的请求接口，额外编写一个 Service 层
+const { loading, error, data, run } = useRequest<IFooItem>(() => getFooAPI('菲鸽'))
+const reset = () => {
+  data.value = undefined
+}
+</script>

src/pages/about/components/upload.vue

@@ -0,0 +1,30 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: '上传-状态一体化',
+  },
+}
+</route>
+
+<template>
+  <view class="p-4 text-center">
+    <wd-button @click="run">选择图片并上传</wd-button>
+    <view v-if="loading" class="text-blue h-10">上传...</view>
+    <template v-else>
+      <view class="m-2">上传后返回的接口数据：</view>
+      <view class="m-2">{{ JSON.stringify(data) }}</view>
+      <view class="h-80 w-full">
+        <image v-if="data" :src="data.url" mode="scaleToFill" />
+      </view>
+    </template>
+  </view>
+</template>
+
+<script lang="ts" setup>
+const { loading, data, run } = useUpload<any>({ user: '菲鸽' })
+</script>
+
+<style lang="scss" scoped>
+//
+</style>