@uxda/appkit 1.0.66 → 1.0.72

package/src/balance/components/BalanceCard.vue

@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { endpoints, makeHttp } from '../api'
+import { endpoints, useHttp } from '../api'
 import { Balance } from '../types'
 import { useDidShow } from '@tarojs/taro'
 
@@ -50,8 +50,8 @@ const gotoRecharge = () => {
 }
 
 async function loadBalance () {
-  const $http = makeHttp()
-  $http.get<Balance>(endpoints.getBalance, {
+  const $http = useHttp()
+  $http.get<Balance>(endpoints.获取余额明细, {
   }).then(data => {
     balance.value = data
   })

package/src/balance/components/ConsumptionFilter.vue

@@ -9,11 +9,11 @@
         <div class="info">
           <div
             v-for="(it, i) in item.data"
-            @click="() => onFilterSectionClick(index, it)"
-            :class="getItemClass(index, it)"
+            @click="() => onFilterSectionClick(index, it.code)"
+            :class="getItemClass(index, it.code)"
             class="info-item"
             :key="i">
-            {{ it }}
+            {{ typeof it === 'string' ? it : it.name }}
           </div>
         </div>
       </template>
@@ -27,25 +27,32 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 import {
   type ConsumptionDirection, 
   type ConsumptionPosition, 
   type ConsumptionType,
   consumptionDirections,
   consumptionPositions,
-  consumptionTypes
+  consumptionTypes,
+  权益类目,
 } from '../types'
+import { endpoints, useHttp } from '../api'
+
+const $http = useHttp()
 
 type ConsumptionFilterModelValue = [
     ConsumptionPosition | '全部',
     ConsumptionDirection | '全部',
     ConsumptionType | '全部',
+    string | '',
+
   ]
 type MixteValues =
     ConsumptionPosition |
     ConsumptionDirection |
-    ConsumptionType | '全部'
+    ConsumptionType | 
+    string |''
 
 interface ConsumptionFilterProps {
   modelValue: ConsumptionFilterModelValue
@@ -53,27 +60,42 @@ interface ConsumptionFilterProps {
 
 const props = withDefaults(
   defineProps<ConsumptionFilterProps>(), {
-    modelValue: () => ['全部', '全部', '全部']
+    modelValue: () => ['全部', '全部', '全部', '']
   }
 )
 const emit = defineEmits(['complete'])
 
 const result = reactive<ConsumptionFilterModelValue>(props.modelValue)
 
-const filterSections = [
+type FilterSecion = {
+  title: string,
+  data: {
+    code: string,
+    name: string
+  }[]
+}
+
+/**
+ * 筛选项目里面所有按钮
+ */
+const filterSections = ref<FilterSecion[]>([
   {
     title: '类型',
-    data: consumptionPositions,
+    data: consumptionPositions.map(s => ({code: s, name: s})),
   },
   {
     title: '收入/支出',
-    data: consumptionDirections,
+    data: consumptionDirections.map(s => ({code: s, name: s})),
   },
   {
     title: '明细类型',
-    data: consumptionTypes,
+    data: consumptionTypes.map(s => ({code: s, name: s})),
+  },
+  {
+    title: '权益类目',
+    data: []
   }
-]
+])
 
 const getItemClass = (index: number, value) => result[index] === value ? ['current'] : ['']
 
@@ -85,13 +107,23 @@ const reset = () => {
   result[0] = '全部'
   result[1] = '全部'
   result[2] = '全部'
+  result[3] = ''
 }
 
-const onOkClick = () => {
-  emit('complete', result)
+const 请求权益类目 = () => {
+  $http.get<权益类目[]>(endpoints.获取权益类目).then(data => {
+    filterSections.value[3].data = [
+      { code: '', name: '全部' },
+      ...data
+    ]
+  })
 }
 
+请求权益类目()
 
+const onOkClick = () => {
+  emit('complete', result)
+}
 </script>
 <style lang="scss">
 .consumption-filter {
@@ -131,18 +163,9 @@ const onOkClick = () => {
         text-align: center;
       }
       .current {
-        border: 1px solid;
-        border-image-source: linear-gradient(
-          180deg,
-          rgba(239, 208, 130, 0.8) 0%,
-          rgba(255, 185, 120, 0.8) 100%
-        );
-        background: linear-gradient(
-            180deg,
-            rgba(239, 208, 130, 0.8) 0%,
-            rgba(255, 185, 120, 0.8) 100%
-          ),
-          linear-gradient(180deg, #fff7e3 0%, #fefde6 100%);
+        border-radius: 5px;
+        border: 1px solid #EFD082;
+        background: linear-gradient(180deg, #FFF7E3 0%, #FEFDE6 100%);
       }
     }
   }

package/src/balance/components/DateFilter.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue'
+import { reactive, ref, watch } from 'vue'
 
 type DateFilterProps = {
   from: string,
@@ -45,7 +45,15 @@ type DateFilterProps = {
 
 const props = defineProps<DateFilterProps>()
 
-const emit = defineEmits(['complete'])
+const emit = defineEmits(['complete', 'reset'])
+
+watch(
+  () => `${props.from}${props.to}`,
+  () => {
+    result.from = props.from
+    result.to = props.to
+  }
+)
 
 /**
  * 日期范围结果
@@ -66,8 +74,7 @@ const datePickerOpen = ref<boolean>(false)
  * 日期重置
  */
 function reset() {
-  result.from = props.from
-  result.to = props.to
+  emit('reset')
 }
 
 /**

package/src/balance/components/SecondBalance.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="second-balance">
+    <page-header title="小云豆余额" />
+    <div class="positions" v-if="data.length">
+      <div class="position"
+        v-for="(item, index) in data" 
+        :key="index">
+        <div class="icon"></div>
+        <label class="title">{{ item.title }}</label>
+        <label class="number amount">{{ item.count }}</label>
+      </div>
+    </div>
+    <empty-view v-else />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Privilege } from '../types'
+import EmptyView from '../../shared/components/EmptyView.vue'
+
+// 小云豆余额
+// 由账户页 AccountView 使用 AppDrawer 弹出
+type SecondBalanceProps = {
+  data: Privilege[]
+}
+
+withDefaults(
+  defineProps<SecondBalanceProps>(), {
+    data: () => []
+  }
+)
+</script>
+
+<style lang="scss">
+.second-balance {
+  width: 100vw;
+  .positions {
+    padding: 15px;
+    .position {
+      border-radius: 5px;
+      background: #F7F8FA;
+      height: 54px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      margin-bottom: 10px;
+      padding: 0 10px;
+      gap: 10px;
+      .icon {
+        width: 30px;
+        height: 30px;
+        background-image:
+          url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjIyODUgMzcuMjY0M0wxMy43OTk5IDQyLjc1QzEzLjYyODUgNDMuMDkyOSAxMy43OTk5IDQzLjUyMTQgMTQuMjI4NSA0My41MjE0TDE4Ljg1NzEgNDMuNzc4NkMxOS4wMjg1IDQzLjc3ODYgMTkuMTE0MiA0My44NjQzIDE5LjE5OTkgNDMuOTVMMjIuMDI4NSA0Ny43MjE0QzIyLjI4NTcgNDcuOTc4NiAyMi43MTQyIDQ3Ljk3ODYgMjIuODg1NyA0Ny43MjE0TDI2LjE0MjggNDIuMzIxNEMyNi4zMTQyIDQyLjA2NDMgMjYuMjI4NSA0MS44MDcxIDI1Ljk3MTQgNDEuNjM1N0wxNy45MTQyIDM3LjA5MjlDMTcuNjU3MSAzNy4wMDcxIDE3LjM5OTkgMzcuMDkyOSAxNy4yMjg1IDM3LjI2NDNaTTQyLjc3MTQgMzcuMTc4Nkw0Ni4xOTk5IDQyLjY2NDNDNDYuMzcxNCA0My4wMDcxIDQ2LjE5OTkgNDMuNDM1NyA0NS43NzE0IDQzLjQzNTdMNDEuMTQyOCA0My42OTI5QzQwLjk3MTQgNDMuNjkyOSA0MC44ODU3IDQzLjc3ODYgNDAuNzk5OSA0My44NjQzTDM3Ljk3MTQgNDcuNjM1N0MzNy43MTQyIDQ3Ljg5MjkgMzcuMjg1NyA0Ny44OTI5IDM3LjExNDIgNDcuNjM1N0wzMy44NTcxIDQyLjIzNTdDMzMuNjg1NyA0MS45Nzg2IDMzLjc3MTQgNDEuNzIxNCAzNC4wMjg1IDQxLjU1TDQyLjA4NTcgMzcuMDA3MUM0Mi4zNDI4IDM2LjgzNTcgNDIuNTk5OSAzNi45MjE0IDQyLjc3MTQgMzcuMTc4NlpNNDIuMDg1NyAxOC40OTI5TDMxLjE5OTkgMTIuMzIxNEMzMC40Mjg1IDExLjg5MjkgMjkuMzk5OSAxMS44OTI5IDI4LjYyODUgMTIuMzIxNEwxNy44Mjg1IDE4LjQwNzFDMTcuMDU3MSAxOC44MzU3IDE2LjU0MjggMTkuNjkyOSAxNi41NDI4IDIwLjU1VjMyLjgwNzFDMTYuNTQyOCAzMy42NjQzIDE3LjA1NzEgMzQuNTIxNCAxNy44Mjg1IDM0Ljk1TDI4LjcxNDIgNDEuMTIxNEMyOS40ODU3IDQxLjU1IDMwLjUxNDIgNDEuNTUgMzEuMjg1NyA0MS4xMjE0TDQyLjA4NTcgMzUuMTIxNEM0Mi44NTcxIDM0LjY5MjkgNDMuMzcxNCAzMy44MzU3IDQzLjM3MTQgMzIuOTc4NlYyMC43MjE0QzQzLjM3MTQgMTkuNzc4NiA0Mi44NTcxIDE4LjkyMTQgNDIuMDg1NyAxOC40OTI5Wk0zNi45NDI4IDIzLjcyMTRMMzAuNTk5OSAzMi44OTI5QzMwLjQyODUgMzMuMTUgMzAuMDg1NyAzMy4zMjE0IDI5Ljc0MjggMzMuMzIxNEMyOS4zOTk5IDMzLjMyMTQgMjkuMDU3MSAzMy4xNSAyOC44ODU3IDMyLjg5MjlMMjIuNzk5OSAyMy43MjE0QzIyLjQ1NzEgMjMuMjkyOSAyMi42Mjg1IDIyLjYwNzEgMjMuMDU3MSAyMi4zNUMyMy40ODU3IDIyLjA5MjkgMjQuMTcxNCAyMi4xNzg2IDI0LjQyODUgMjIuNjA3MUwyOS42NTcxIDMwLjQ5MjlMMzUuMTQyOCAyMi41MjE0QzM1LjQ4NTcgMjIuMDkyOSAzNi4wODU3IDIxLjkyMTQgMzYuNTE0MiAyMi4yNjQzQzM3LjE5OTkgMjIuNjkyOSAzNy4yODU3IDIzLjI5MjkgMzYuOTQyOCAyMy43MjE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="),
+          linear-gradient(100deg, #F4E2CE -67.2%, #DEBB9B 98.15%);
+        background-repeat: no-repeat;
+        border-radius: 15px;
+        background-size: 30px;
+        flex-basis: 30px;
+        flex-grow: 0;
+      }
+      .title {
+        flex-grow: 1;color: #353535;
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .amount {
+        flex-grow: 0;color: #9E7B5A;
+        font-size: 14px;
+        font-weight: 700;
+      }
+    }
+  }
+}
+</style>

package/src/balance/types.ts

@@ -31,7 +31,7 @@ export type ConsumptionDirection = typeof consumptionDirections[number]
 /**
  * 账户流水
  */
-export type Consumption = {
+export type 账户流水 = {
   /**
    * 数量
    */
@@ -51,42 +51,47 @@ export type Consumption = {
   /**
    * 交易类型类型
    */
-  type: ConsumptionType,
+  交易类型: ConsumptionType,
+  权益类目: string,
   /**
    * 账户类型
    */
-  position: ConsumptionPosition
+  账户类型: ConsumptionPosition
   /**
    * 收入/支出
    */
-  direction: ConsumptionDirection
+  收入还是支出: ConsumptionDirection
 }
 
 /**
  * 账户流水筛选项
  */
-export type ConsumptionFiltering = Pick<Consumption, 'type' | 'position' | 'direction'> & {
+export type 账户流水筛选项 = Pick<
+  账户流水,
+  '交易类型' | '账户类型' | '收入还是支出' | '权益类目'
+> & {
   dateFrom: string,
-  dateTo: string
+  dateTo: string,
+  page: number,
+  pageSize: 20,
 }
 
 export type ConsumptionGroup = {
   date: string,
-  consumptions: Consumption[]
-}
-
-export type ConsumptionGroups = {
-  list: ConsumptionGroup[]
-  from: string,
-  to: string,
+  consumptions: 账户流水[]
 }
 
 export type Privilege = {
   title: string,
-  amount: number
+  count: number
 }
 
 export type Balance = {
   total: number,
   privileges: Privilege[]
-}
+}
+
+export type 权益类目 = {
+  name: string,
+  code: string
+}

package/src/index.ts

@@ -8,9 +8,7 @@ import {
   Checkbox,
   Popup,
   OverLay,
-  Icon,
   DatePicker,
-  Picker,
 } from '@nutui/nutui-taro'
 import { type AppKitOptions, useAppKitOptions, DollarApp } from './Appkit'
 import { PaymentParams, RechargeParams } from './payment/types'
@@ -23,9 +21,7 @@ const nutComponents = [
   Checkbox,
   Popup,
   OverLay,
-  Icon,
   DatePicker,
-  Picker,
 ]
 
 const appComponents = {

package/src/payment/api/endpoints.ts

@@ -7,7 +7,7 @@ const endpointsList: HttpEndpoints = {
    * (查询某应用某场景可充值的金额列表)
    * http://ytech.dev.ddjf.info/payment/doc.html#/%E5%AE%A2%E6%88%B7%E5%9F%9FAPI/%E6%94%AF%E4%BB%98%E4%B8%AD%E5%BF%83-%E5%AF%B9%E5%A4%96%E6%8E%A5%E5%8F%A3/getRechargeListUsingGET
    */
-  getPackages: {
+  获取充值金额列表: {
     path: '/payment/outer/payment/getRechargeList',
     translate: (data: any) => ({
       appCode: data.app,
@@ -24,7 +24,7 @@ const endpointsList: HttpEndpoints = {
    * (获取拉起微信支付用的JSON串)
    * http://ytech.dev.ddjf.info/payment/doc.html#/%E5%AE%A2%E6%88%B7%E5%9F%9FAPI/%E6%94%AF%E4%BB%98%E4%B8%AD%E5%BF%83-%E5%AF%B9%E5%A4%96%E6%8E%A5%E5%8F%A3/rechargePayUsingPOST
    */
-  getPayParams: {
+  获取微信支付参数包: {
     // {
     //   "amount": 100,
     //   "appCode": "crm",
@@ -54,9 +54,13 @@ const endpointsList: HttpEndpoints = {
       }
     }
   }
-}
+} as const
 
-const endpoints = Object.fromEntries(
+const keys = Object.keys(endpointsList as any)
+
+type Keys = typeof keys[number]
+
+const endpoints: Record<Keys, string> = Object.fromEntries(
   Object.entries(endpointsList).map(([name, def]) => [name, def.path])
 )
 

package/src/payment/api/index.ts

@@ -1,24 +1,63 @@
-import { useHttp } from '../../shared'
+import Taro from '@tarojs/taro'
+import { HttpRequestConfig, ResponseRaw, createHttp } from '../../shared'
 import { translates, transforms } from './endpoints'
 import { useAppKitOptions } from '../../Appkit'
 
-const makeHttp = () => {
-  const appkitOptions = useAppKitOptions()
-  console.log('===makeHTTP===tempToken:', appkitOptions.tempToken())
 
-  const token = appkitOptions.tempToken() || appkitOptions.token()
-  const header = {
-    Token: token,
+/**
+ * 小程序端 Http
+ * 使用 Taro.request 实现
+ */
+const vendor = {
+  async request <T>(config: HttpRequestConfig) {
+    return new Promise<ResponseRaw<T>>((resolve, reject) => {
+      Taro.request({
+        url: config.url,
+        method: config.method,
+        header: config.headers,
+        data: config.data
+      }).then(({data}) => {
+        resolve({
+          status: data.code,
+          message: data.msg,
+          data: data.result as T
+        })
+      }).catch((e: any) => {
+        reject(e)
+      })
+    })
+  }
+}
+
+function useHttp () {
+  const appkitOptions = useAppKitOptions()
+  const headers = {
+    Token: appkitOptions.token(),
     Appcode: appkitOptions.app(),
     cookie: `tid=${appkitOptions.tenant()}`
   }
-
-  const $http = useHttp({
+  /**
+   * 传入配置获取 Http instanse
+   */
+  const $http = createHttp({
+    vendor,
     baseUrl: appkitOptions.baseUrl(),
-    header,
-    onAuthError: () => {
-      appkitOptions['401']()
-    },
+    headers,
+    interceptors: [
+      raw => {
+        if (raw.status == 401) {
+          appkitOptions[401]()
+          return true
+        }
+        return false
+      },
+      raw => {
+        if (raw.status > 500) {
+          return true
+        }
+        return false
+      }
+    ],
     translates,
     transforms,
   })
@@ -26,7 +65,7 @@ const makeHttp = () => {
 }
 
 export {
-  makeHttp
+  useHttp
 }
 
 export * from './endpoints'

package/src/payment/components/RechargeView.vue

@@ -28,7 +28,7 @@ import { onMounted, reactive, ref } from 'vue'
 import AmountPicker from './AmountPicker.vue'
 import UserAgreement from './UserAgreement.vue'
 import { AppDrawer } from '../../shared'
-import { makeHttp, endpoints } from '../api'
+import { useHttp, endpoints } from '../api'
 import { requestPayment } from '../services'
 import Taro from '@tarojs/taro'
 
@@ -75,8 +75,8 @@ const onAmountSelect = (selected: number) => {
 }
 
 onMounted(() => {
-  const $http = makeHttp()
-  $http.get<any[]>(endpoints.getPackages, {
+  const $http = useHttp()
+  $http.get<any[]>(endpoints.获取充值金额列表, {
     app: props.app,
     // stage: 'aiApproveRecharge', // 支付场景
     tenant: props.tenant

package/src/payment/services/request-payment.ts

@@ -1,12 +1,12 @@
 import { PaymentParams } from '../types'
 import { DollarApp } from '../../Appkit'
-import { makeHttp, endpoints } from '../../payment/api'
+import { useHttp, endpoints } from '../../payment/api'
 import { requestPayment as weappRequestPayment } from '../../shared'
 
 const requestPayment = (params: PaymentParams) => {
   return new Promise<boolean>((resolve, reject) => {
-    const $http = makeHttp()
-    $http.post(endpoints.getPayParams, {
+    const $http = useHttp()
+    $http.post(endpoints.获取微信支付参数包, {
       ...params,
       // amount: 0.01,
     }).then(response => {

package/src/shared/components/EmptyView.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="empty-view">
+    <img
+      class="empty-view-image"
+      src="https://cdn.ddjf.com/static/images/nutshell/empty-data.png" />
+    <div class="empty-view-text">暂无数据</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="scss">
+.empty-view {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 80px;
+  &-image {
+    display: block;
+    font-size: 0;
+    width: 144px;
+    height: 80px;
+    filter: grayscale(1);
+  }
+  &-text {
+    opacity: 0.4;
+    color: #353535;
+    font-size: 12px;
+    line-height: 28px;
+  }
+}
+</style>

package/src/shared/components/PageHeader.vue

@@ -1,15 +1,24 @@
 <template>
-  <view :class="[
+  <div :class="[
     'page-header',
     `color-mode-${colorMode}`
-  ]">
+  ]" :style="cssVars">
     <h1 class="page-title" v-if="title">{{ title }}</h1>
     <view class="back-button" @click="onBackButtonClick"></view>
     <slot></slot>
-  </view>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { useSafeArea } from '../composables'
+
+
+const safeArea = useSafeArea()
+
+const cssVars = {
+  '--top': `${safeArea.status}px`,
+  '--height': `${safeArea.nav}px`
+}
 
 export type PageHeaderColorMode = 'light' | 'dark'
 
@@ -36,29 +45,28 @@ const onBackButtonClick = () => {
 
 <style lang="scss">
 .page-header {
-  flex-shrink: 0;
+  display: flex;
   position: relative;
-  padding-top: 44px;
-  height: 88px;
-  box-sizing: border-box;
+  align-items: center;
+  padding-top: var(--top);
+  min-height: var(--height);
   .page-title {
     position: absolute;
     font-size: 18px;
+    height: var(--height);
+    line-height: var(--height);
+    top: var(--top);
     width: 100%;
-    height: 44px;
-    top: 44px;
-    left: 0;
-    line-height: 44px;
     text-align: center;
   }
   .back-button {
     position: absolute;
-    top: 44px;
+    top: var(--top);
     left: 10px;
-    width: 44px;
-    height: 44px;
+    width: var(--height);
+    height: var(--height);
     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA0MiA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjk5OTg3OCA0MUw0MC45OTk5IDQxTDQwLjk5OTkgMUwwLjk5OTg3OCAxTDAuOTk5ODc4IDQxWiIgZmlsbD0iI0Q4RDhEOCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMDEiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi45OTMzIDE4Ljk0NzdDMTEuODYzMyAyMC4wMTQ1IDExLjgxMiAyMS43OTU0IDEyLjg3ODggMjIuOTI1NUwyNy45MTA1IDM3LjEzNDVDMjguNjkyNSAzNy44NzM0IDI5LjkyNTUgMzcuODM4NCAzMC42NjQ0IDM3LjA1NjRDMzEuMzY4MSAzNi4zMTE2IDMxLjM2OTkgMzUuMTU3OSAzMC42OTI5IDM0LjQxMTRMMTYuNTAxMiAyMC45OTM5TDMwLjU4NTcgNy42OTc4NUMzMS4zMzA4IDYuOTk0NDkgMzEuMjk4MiA1LjcyNzk1IDMwLjY2NDkgNC45NDQwMkMyOS45NjE2IDQuMTk4OTUgMjguODA5OCA0LjEzMTI5IDI4LjAyNTkgNC43NjQ1MkwxMi45OTMzIDE4Ljk0NzdaIiBmaWxsPSJibGFjayIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMDEiLz4KPC9zdmc+Cg==");
-    background-size: 22px;
+    background-size: 50%;
     background-repeat: no-repeat;
     background-position: center center;
   }

package/src/shared/composables/index.ts

@@ -1,5 +1 @@
-export {
-  BusSymbol,
-  createBus,
-  useBus,
-} from './bus'
+export * from './useSafeArea'

package/src/shared/composables/useSafeArea.ts

@@ -0,0 +1,42 @@
+import Taro from '@tarojs/taro'
+/**
+ * 屏幕安全区域
+ */
+export type SafeArea = {
+  /**
+   * 状态条高度
+   */
+  status: number,
+  /**
+   * 导航条区域(胶囊)
+   */
+  nav: number,
+  /**
+   * 屏幕底部范围
+   */
+  bottom: number
+}
+
+/**
+ * 获取屏幕安全区域
+ * 从系统 API 获取
+ * @returns 
+ */
+export function useSafeArea (): SafeArea {
+  const systemInfo = Taro.getSystemInfoSync(),
+    capsule = Taro.getMenuButtonBoundingClientRect()
+  /**
+   * 状态条高度
+   */
+  const status = systemInfo.statusBarHeight || 0,
+    /**
+     * 据说是胶囊上下间距
+     */
+    gap = capsule.top - status,
+    nav = capsule.height + gap * 2
+  return {
+    status,
+    nav,
+    bottom: systemInfo.safeArea?.bottom || 0
+  }
+}