@uxda/appkit 1.0.0

package/src/shared/components/PageHeader.vue

@@ -0,0 +1,75 @@
+<template>
+  <view :class="[
+    'page-header',
+    `color-mode-${colorMode}`
+  ]">
+    <h1 class="page-title" v-if="title">{{ title }}</h1>
+    <view class="back-button" @click="onBackButtonClick"></view>
+    <slot></slot>
+  </view>
+</template>
+
+<script lang="ts" setup>
+
+export type PageHeaderColorMode = 'light' | 'dark'
+
+export interface PageHeaderProps {
+  title?: string,
+  colorMode?: PageHeaderColorMode
+}
+
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
+
+withDefaults(
+  defineProps<PageHeaderProps>(), {
+    title: '',
+    colorMode: 'light'
+  }
+)
+
+const onBackButtonClick = () => {
+  emit('close')
+}
+</script>
+
+<style lang="scss">
+.page-header {
+  flex-shrink: 0;
+  position: relative;
+  height: 172px;
+  padding: 1em;
+  box-sizing: border-box;
+  margin-left: -12px;
+  margin-right: -12px;
+  width: calc(100% + 24px);
+  .page-title {
+    position: absolute;
+    font-size: 18px;
+    width: 100%;
+    height: 44px;
+    top: 44px;
+    left: 0;
+    line-height: 44px;
+    text-align: center;
+  }
+  .back-button {
+    position: absolute;
+    top: 44px;
+    left: 10px;
+    width: 44px;
+    height: 44px;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA0MiA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjk5OTg3OCA0MUw0MC45OTk5IDQxTDQwLjk5OTkgMUwwLjk5OTg3OCAxTDAuOTk5ODc4IDQxWiIgZmlsbD0iI0Q4RDhEOCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMDEiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi45OTMzIDE4Ljk0NzdDMTEuODYzMyAyMC4wMTQ1IDExLjgxMiAyMS43OTU0IDEyLjg3ODggMjIuOTI1NUwyNy45MTA1IDM3LjEzNDVDMjguNjkyNSAzNy44NzM0IDI5LjkyNTUgMzcuODM4NCAzMC42NjQ0IDM3LjA1NjRDMzEuMzY4MSAzNi4zMTE2IDMxLjM2OTkgMzUuMTU3OSAzMC42OTI5IDM0LjQxMTRMMTYuNTAxMiAyMC45OTM5TDMwLjU4NTcgNy42OTc4NUMzMS4zMzA4IDYuOTk0NDkgMzEuMjk4MiA1LjcyNzk1IDMwLjY2NDkgNC45NDQwMkMyOS45NjE2IDQuMTk4OTUgMjguODA5OCA0LjEzMTI5IDI4LjAyNTkgNC43NjQ1MkwxMi45OTMzIDE4Ljk0NzdaIiBmaWxsPSJibGFjayIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMDEiLz4KPC9zdmc+Cg==");
+    background-size: 22px;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  &.color-mode-dark {
+    color: var(--text-color-dark-mode, '#fff');
+    .back-button {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA0MiA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjk5OTg0NyA0MUw0MC45OTk4IDQxTDQwLjk5OTggMUwwLjk5OTg0NyAxTDAuOTk5ODQ3IDQxWiIgZmlsbD0iI0Q4RDhEOCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMDEiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi45OTM0IDE4Ljk0NzVDMTEuODYzNCAyMC4wMTQzIDExLjgxMjEgMjEuNzk1MiAxMi44Nzg5IDIyLjkyNTJMMjcuOTEwNiAzNy4xMzQzQzI4LjY5MjcgMzcuODczMSAyOS45MjU2IDM3LjgzODIgMzAuNjY0NSAzNy4wNTYyQzMxLjM2ODIgMzYuMzExNCAzMS4zNyAzNS4xNTc2IDMwLjY5MyAzNC40MTExTDE2LjUwMTMgMjAuOTkzNkwzMC41ODU4IDcuNjk3NjFDMzEuMzMwOSA2Ljk5NDI0IDMxLjI5ODMgNS43Mjc3MSAzMC42NjUxIDQuOTQzNzdDMjkuOTYxNyA0LjE5ODcxIDI4LjgwOTkgNC4xMzEwNCAyOC4wMjYgNC43NjQyN0wxMi45OTM0IDE4Ljk0NzVaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMDEiLz4KPC9zdmc+Cg==");
+    }
+  }
+}
+</style>

package/src/shared/components/index.ts

@@ -0,0 +1,7 @@
+import AppDrawer from './AppDrawer.vue'
+import PageHeader from './PageHeader.vue'
+
+export {
+  AppDrawer,
+  PageHeader
+}

package/src/shared/http/Http.ts

@@ -0,0 +1,124 @@
+/**
+ * 
+ */
+
+
+/**
+ * Useage:
+ * const $http = useHttp()
+ * $http.get('/url').then(data => {
+ *  
+ * })
+ */
+
+import Taro from '@tarojs/taro'
+import { Http, HttpClientConfig, HttpMethod, HttpRequestConfig, RequestData, ResponseData, ResponseRaw } from './types'
+
+/**
+ * 场景配置
+ * 本地后台团队统一返回值外层
+ */
+const defaultClientConfig: HttpClientConfig = {
+  baseUrl: 'https://ytech.ddjf.com',
+  response: {
+    getCode: (data: ResponseRaw) => data.code,
+    getMessage: (data: ResponseRaw) => data.msg,
+    getData: (data: ResponseRaw) => data.result
+  }
+}
+
+let clientConfig = {
+  ...defaultClientConfig
+}
+
+/**
+ * 统一请求过程
+ * @param config 
+ * @returns 
+ */
+const request: Http['request'] = <T>(config: HttpRequestConfig) => {
+  return new Promise<T>((resolve, reject) => {
+    const data = config.data
+      && clientConfig.translates
+      && clientConfig.translates[config.url]
+        ? clientConfig.translates[config.url](config.data)
+        : config.data
+    Taro.request<ResponseData>({
+      url: `${clientConfig.baseUrl}${config.url}`,
+      data,
+      header: clientConfig.header,
+      method: config.method,
+      success (res: Taro.request.SuccessCallbackResult<ResponseRaw>) {
+        if (!isSuccess(res)) {
+          reject({})
+        }
+        const { data: raw } = res
+        if (clientConfig.interceptors?.auth(raw)) {
+          clientConfig.onAuthError?.()
+          reject('auth failed')
+        }
+        if (clientConfig.interceptors?.server(raw)) {
+          clientConfig.onServerError?.()
+          reject('server error')
+        }
+        const response = clientConfig.response?.getData(raw)
+        if (response) {
+          // 当用户配置含有 transforms 时, 使用用户提供的 transform
+          resolve(clientConfig.transforms
+            && clientConfig.transforms[config.url]
+              ? clientConfig.transforms[config.url](response) as T
+              : response as T)
+        } else {
+          reject({})
+        }
+      },
+      fail (res) {
+        console.log('HTTP failed', res)
+      }
+    })
+  })
+}
+
+const get: Http['get'] = <T>(url: string, data?: RequestData) => {
+  return request<T>({
+    url,
+    data,
+    method: HttpMethod.get
+  })
+}
+
+const post: Http['post'] = <T>(url: string, data: RequestData) => {
+  return request<T>({
+    url,
+    data,
+    method: HttpMethod.post
+  })
+}
+
+/**
+ * 写入配置并
+ * @param config 
+ * @returns 
+ */
+export function useHttp (config: HttpClientConfig): Http {
+
+  clientConfig = {
+    ...defaultClientConfig,
+    ...config
+  }
+
+  return {
+    request,
+    get,
+    post
+  }
+}
+
+const successResonseCodes = [
+  '200'
+]
+
+function isSuccess (res: Taro.request.SuccessCallbackResult<ResponseRaw>) {
+  return /^2/.test(res.statusCode.toString())
+    && successResonseCodes.includes(`${clientConfig.response?.getCode(res.data)}`)
+}

package/src/shared/http/index.ts

@@ -0,0 +1,2 @@
+export * from './Http'
+export type * from './types'

package/src/shared/http/types.ts

@@ -0,0 +1,100 @@
+
+export type RequestData = Record<string, any>
+
+/**
+ * 本地后端团队的接口数据格式
+ */
+export type ResponseRaw = Record<string, any>
+
+export type ResponseData = Record<string, any>
+
+export type HttpTranslates = Record<string, (data: RequestData) => RequestData>
+export type HttpTransforms = Record<string, (data: ResponseData) => ResponseData>
+
+/**
+ * 向 request header 加入参数
+ * 多数是 token
+ */
+export type HeaderParams = Record<string, string>
+
+/**
+ * 由使用场景提供的配置
+ */
+export type HttpClientConfig = {
+  baseUrl: string,
+  /**
+   * 向 HTTP header 加入的数据
+   * 通常含有 JWT token 以及其他参数
+   */
+  header?: HeaderParams
+  /**
+   * 定义返回数据的外层格式
+   */
+  response?: {
+    getCode (data: ResponseData): `${number}` | number,
+    getMessage (data: RequestData): string,
+    getData (data: ResponseData): ResponseData
+  },
+  onAuthError? (): void
+  onServerError? (): void
+  /**
+   * 错误码配置
+   * 依据后端给出的 code 定义错误类型及处理方法
+   */
+  interceptors?: {
+    auth (data: ResponseData): boolean
+    server (data: ResponseData): boolean
+  },
+  translates?: HttpTranslates
+  transforms?: HttpTransforms
+}
+
+export enum HttpMethod {
+  get = 'GET',
+  post = 'POST',
+  put = 'PUT',
+  delete = 'DELETE',
+}
+
+export enum HttpError {
+  auth = 'auth',
+  server = 'server'
+}
+
+export type Http = {
+  request<T = ResponseData>(config: HttpRequestConfig): Promise<T>
+  get<T = ResponseData>(url: string, data?: RequestData): Promise<T>,
+  post<T = ResponseData>(url: string, data?: RequestData): Promise<T>,
+}
+
+export type HttpRequestConfig = {
+  url: string,
+  data?: RequestData,
+  method?: HttpMethod
+}
+
+/**
+ * 接口参数转换器
+ */
+export type HttpTranslate = (data: RequestData) => RequestData
+
+/**
+ * 接口数据转换器
+ */
+export type HttpTransform = (data: ResponseData) => ResponseData
+
+/**
+ * 接口设置
+ */
+export type HttpEndpoint = {
+  path: string,
+  translate?: HttpTranslate,
+  transform?: HttpTransform,
+}
+
+/**
+ * 接口组
+ */
+export type HttpEndpoints = {
+  [name: string]: HttpEndpoint
+}

package/src/shared/index.ts

@@ -0,0 +1,3 @@
+export * from './weixin'
+export * from './components'
+export * from './http'

package/src/shared/weixin/index.ts

@@ -0,0 +1 @@
+export * from './payment'

package/src/shared/weixin/payment.ts

@@ -0,0 +1,37 @@
+export type PaymentOptions = {}
+
+/**
+ * 发起微信支付
+ * @param options 
+ */
+export function requestPayment(json: any): Promise<boolean> {
+  /** 时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间 */
+  // const timeStamp: string = '',
+  //   /** 随机字符串，长度为32个字符以下 */
+  //   nonceStr: string = '',
+  //   /** 统一下单接口返回的prepay_id参数值，提交格式如：prepay_id=* */
+  //   pack: string = '',
+  //   /** 签名算法，暂支持MD5 */
+  //   signType: string = 'MD5',
+  //   /** 签名,具体签名方案参见微信公众号支付帮助文档(https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3&t=1474537654457); */
+  //   paySign: string = ''
+  // /** 接口调用成功的回调函数 */
+  // const success = (res: {}) => {},
+  //   /**接口调用失败的回调函数*/
+  //   fail = () => {},
+  //   /**接口调用结束的回调函数（调用成功、失败都会执行）*/
+  //   complete = () => {}
+  return new Promise<boolean>((resolve, reject) => {
+    const success = (message: string) => {
+      resolve(true)
+    }
+    const fail = (message: string) => {
+      resolve(false)
+    }
+    wx.requestPayment({
+      ...json,
+      success,
+      fail
+    })
+  })
+}

package/src/styles/vars.scss

@@ -0,0 +1,4 @@
+page {
+  --text-color: #333;
+  --text-color-dark-mode: #eee;
+}

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "removeComments": false,
+    "preserveConstEnums": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "outDir": "dist",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strictNullChecks": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "rootDir": ".",
+    "jsx": "preserve",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ]
+  },
+  "include": [
+    "./src/",
+    "./types",
+  ],
+  "compileOnSave": false
+}

package/types/global.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="@tarojs/taro" />
+
+declare module '*.png';
+declare module '*.gif';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.svg';
+declare module '*.css';
+declare module '*.less';
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.styl';
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd'
+  }
+}
+
+declare module '@tarojs/components' {
+  export * from '@tarojs/components/types/index.vue3'
+}

package/types/vue.d.ts

@@ -0,0 +1,10 @@
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents extends JSX.IntrinsicElements {
+    /** Note: Vue 在 runtime 中将 JSX.IntrinsicElements 通过 index signature 重复声明标签
+     * 这会导致插件无法正常跳转类型，可以手动覆盖声明标签活得更好的体验，参考如下：
+     * 'scroll-view': JSX.IntrinsicElements['scroll-view']
+     */
+  }
+}