@gx-design-vue/create-gx-cli 0.0.1

package/template-mobile-ts/src/store/modules/global.ts

@@ -0,0 +1,33 @@
+import { reactive, toRefs } from 'vue'
+import { defineStore } from 'pinia'
+import { deepCopy } from '@/utils/util'
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/1/11
+ * @lastTime    2022/1/11
+ * @description store-global 全局属性
+ */
+export interface GlobalState {
+  title: string; // app 应用名
+  tokenName?: string; // 请求header token key值
+  token?: string; // app token
+}
+
+type GlobalStateKey = keyof GlobalState
+
+export const useStoreGlobal = defineStore('global', () => {
+  const state = reactive<GlobalState>({
+    title: 'gx-design-mobile',
+    tokenName: 'token'
+  })
+
+  const setGlobalData: (params: Partial<Record<GlobalStateKey, GlobalState[GlobalStateKey]>>) => void = (params) => {
+    Object.assign(state, deepCopy(params))
+  }
+
+  return {
+    ...toRefs(state),
+    setGlobalData
+  }
+})

package/template-mobile-ts/src/utils/cryptoJS.ts

@@ -0,0 +1,25 @@
+import CryptoJS from 'crypto-js'
+
+// AES加密
+export function encryptByAES(data) {
+  let AESKey = 'hj7x89H$yuBI0456'  // 此处为密钥
+  let key = CryptoJS.enc.Utf8.parse(AESKey)
+  let cipherText = CryptoJS.AES.encrypt(data, key, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7
+  })
+  return cipherText.toString()
+}
+
+// AES解密
+export function decryptedByAES(data) {
+  let AESKey = 'hj7x89H$yuBI0456'  // 此处为密钥
+  const key = CryptoJS.enc.Utf8.parse(AESKey) // 通过密钥获取128位的key
+  const encryptedHexStr = CryptoJS.enc.Base64.parse(data) // 解码base64编码结果
+  const encryptedBase64Str = CryptoJS.enc.Base64.stringify(encryptedHexStr)
+  const decryptedData = CryptoJS.AES.decrypt(encryptedBase64Str, key, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7
+  })
+  return decryptedData.toString(CryptoJS.enc.Utf8)
+}

package/template-mobile-ts/src/utils/index.ts

@@ -0,0 +1,52 @@
+/**
+ * @Author      gx12358
+ * @DateTime    2022/4/1
+ * @lastTime    2022/4/1
+ * @description 环境：开发
+ */
+export function isDev(): boolean {
+  const DEV = typeViteEnv('VITE_USE_MODE') === 'development'
+  return DEV
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/4/1
+ * @lastTime    2022/4/1
+ * @description 环境：测试
+ */
+export function isTest(): boolean {
+  const PRO = typeViteEnv('VITE_USE_MODE') === 'test'
+  return PRO
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/4/1
+ * @lastTime    2022/4/1
+ * @description 环境：正式
+ */
+export function isPro(): boolean {
+  return typeViteEnv('VITE_USE_MODE') === 'production'
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/4/1
+ * @lastTime    2022/4/1
+ * @description 环境：测试、正式
+ */
+export function isBuild(): boolean {
+  return typeViteEnv('VITE_USE_MODE') !== 'development'
+}
+
+export function typeViteEnv(key: ViteEnvKey) {
+  let value = import.meta.env[key]
+  if (value) {
+    value = value.replace(/\\n/g, '\n')
+
+    value = value === 'true' ? true : value === 'false' ? false : value
+  }
+
+  return value
+}

package/template-mobile-ts/src/utils/pageTitle.ts

@@ -0,0 +1,12 @@
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 设置标题
+ * @param pageTitle
+ * @returns {string}
+ */
+export default function getPageTitle(title: string, pageTitle: string) {
+  let newTitles: any = []
+  if (pageTitle) newTitles.push(pageTitle)
+  if (title) newTitles.push(title)
+  return newTitles.join('-')
+}

package/template-mobile-ts/src/utils/request.ts

@@ -0,0 +1,105 @@
+import type { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
+import axios, { Axios, AxiosPromise } from 'axios'
+import qs from 'qs'
+import { Toast } from 'vant'
+import { useStoreGlobal } from '@gx-vuex'
+import { tansParams } from '@/utils/util'
+import { checkURL } from '@/utils/validate'
+
+export interface CreateAxiosOptions extends AxiosRequestConfig {
+  headers?: any;
+  isMock?: boolean;
+  customize?: boolean;
+  carryToken?: boolean;
+  ignoreCancelToken?: boolean;
+}
+
+export interface GAxiosInstance extends Axios {
+  (config: CreateAxiosOptions): AxiosPromise<ResponseResult>;
+
+  (url: string, config?: CreateAxiosOptions): AxiosPromise<ResponseResult>;
+}
+
+let loadingInstance
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description axios初始化
+ */
+const instance: GAxiosInstance = axios.create({
+  timeout: 100000,
+  headers: {
+    'Content-Type': 'application/json;charset=UTF-8'
+  }
+})
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description axios请求拦截器
+ */
+instance.interceptors.request.use(
+  (config: CreateAxiosOptions) => {
+    const global = useStoreGlobal()
+
+    // get请求映射params参数
+    if (config.method === 'get' && config.params) {
+      let url = config.url + '?' + tansParams(config.params)
+      url = url.slice(0, -1)
+      config.params = {}
+      config.url = url
+    }
+
+    if (!checkURL(config.url)) {
+      if (config.isMock) {
+        config.url = `/mock-server${config.url}`
+      } else {
+        config.url = `${import.meta.env.VITE_BASE_URL}/${config.url}`
+      }
+    }
+
+    if (global.token && global.tokenName)
+      (config).headers[global.tokenName] = global.token
+
+    if (
+      config.data &&
+      config.headers['Content-Type'] ===
+      'application/x-www-form-urlencoded;charset=UTF-8'
+    )
+      config.data = qs.stringify(config.data)
+
+    return config
+  },
+  (error: Error | AxiosError) => {
+    return Promise.reject(error)
+  }
+)
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description axios响应拦截器
+ */
+instance.interceptors.response.use(
+  (response: AxiosResponse) => {
+    if (loadingInstance) loadingInstance.close()
+    const { data, config } = response
+    const { code} = data as ResponseResult
+    // 操作正常Code数组
+    const codeVerificationArray = [ 200, 0 ]
+    // 是否操作正常
+    if ((config as CreateAxiosOptions).customize)
+      return data
+    else if (codeVerificationArray.includes(code))
+      return data
+    else {
+      Toast.fail(`服务器出错！`)
+      return Promise.resolve(false)
+    }
+  },
+  (_: AxiosError): Promise<ResponseResult | boolean> => {
+    if (loadingInstance) loadingInstance.close()
+    Toast.fail(`服务器出错！`)
+    return Promise.resolve(false)
+  }
+)
+
+const request: (opt?: CreateAxiosOptions) => Promise<ResponseResult> = async (opt) => await instance.request(opt)
+
+export default request

package/template-mobile-ts/src/utils/util.ts

@@ -0,0 +1,32 @@
+export function deepCopy(data) {
+  return JSON.parse(JSON.stringify(data))
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2021/11/3
+ * @lastTime    2021/11/3
+ * @description get参数处理
+ */
+export function tansParams(params) {
+  let result = ''
+  for (const propName of Object.keys(params)) {
+    const value = params[propName]
+    const part = encodeURIComponent(propName) + '='
+    if (value !== null && typeof (value) !== 'undefined' && value !== '') {
+      if (typeof value === 'object') {
+        for (const key of Object.keys(value)) {
+          if (value[key] !== null && typeof (value[key]) !== 'undefined') {
+            const params = propName + '[' + key + ']'
+            const subPart = encodeURIComponent(params) + '='
+            result += subPart + encodeURIComponent(value[key]) + '&'
+          }
+        }
+      } else {
+        result += part + encodeURIComponent(value) + '&'
+      }
+    }
+  }
+  return result
+}
+

package/template-mobile-ts/src/utils/validate.ts

@@ -0,0 +1,292 @@
+const toString = Object.prototype.toString
+
+export function is(val: unknown, type: string) {
+  return toString.call(val) === `[object ${type}]`
+}
+
+export const isClient = typeof window !== 'undefined'
+
+export const noop = () => {}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判读是否为外链
+ * @param path
+ * @returns {boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 校验密码是否小于6位
+ * @param value
+ * @returns {boolean}
+ */
+export function isPassword(value) {
+  return value.length >= 6
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否为数字
+ * @param value
+ * @returns {boolean}
+ */
+export function isNumber(val: unknown) {
+  return typeof val === 'number'
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是名称
+ * @param value
+ * @returns {boolean}
+ */
+export function isName(value) {
+  const reg = /^[\u4e00-\u9fa5a-zA-Z0-9]+$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否为IP
+ * @param ip
+ * @returns {boolean}
+ */
+export function isIP(ip) {
+  const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
+  return reg.test(ip)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是传统网站
+ * @param url
+ * @returns {boolean}
+ */
+export function isUrl(url) {
+  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  return reg.test(url)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是小写字母
+ * @param value
+ * @returns {boolean}
+ */
+export function isLowerCase(value) {
+  const reg = /^[a-z]+$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是大写字母
+ * @param value
+ * @returns {boolean}
+ */
+export function isUpperCase(value) {
+  const reg = /^[A-Z]+$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是大写字母开头
+ * @param value
+ * @returns {boolean}
+ */
+export function isAlphabets(value) {
+  const reg = /^[A-Za-z]+$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是字符串
+ * @param value
+ * @returns {boolean}
+ */
+export function isString(value) {
+  return typeof value === 'string' || value instanceof String
+}
+
+export function isBoolean(val: unknown): val is boolean {
+  return is(val, 'Boolean')
+}
+
+export function isFunction(func: any) {
+  return (typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]')
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是数组
+ * @param arg
+ * @returns {arg is any[]|boolean}
+ */
+export function isArray(arg) {
+  if (typeof Array.isArray === 'undefined') {
+    return Object.prototype.toString.call(arg) === '[object Array]'
+  }
+  return Array.isArray(arg)
+}
+
+/**
+ * @Author      gaoxiang
+ * @DateTime    2019/11/29
+ * @lastTime    2019/11/29
+ * @description 是否是对象
+ */
+export function isObject(val: any): val is Record<any, any> {
+  return val !== null && is(val, 'Object')
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是端口号
+ * @param value
+ * @returns {boolean}
+ */
+export function isPort(value) {
+  const reg = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是手机号
+ * @param value
+ * @returns {boolean}
+ */
+export function isPhone(value) {
+  const reg = /^1\d{10}$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是身份证号(第二代)
+ * @param value
+ * @returns {boolean}
+ */
+export function isIdCard(value) {
+  const reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是邮箱
+ * @param value
+ * @returns {boolean}
+ */
+export function isEmail(value) {
+  const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否中文
+ * @param value
+ * @returns {boolean}
+ */
+export function isChina(value) {
+  const reg = /^[\u4E00-\u9FA5]{2,4}$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否为空
+ * @param value
+ * @returns {boolean}
+ */
+export function isBlank(value) {
+  return (
+    value == null ||
+    false ||
+    value === '' ||
+    value.trim() === '' ||
+    value.toLocaleLowerCase().trim() === 'null'
+  )
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否为固话
+ * @param value
+ * @returns {boolean}
+ */
+export function isTel(value) {
+  const reg = /^(400|800)([0-9\\-]{7,10})|(([0-9]{4}|[0-9]{3})([- ])?)?([0-9]{7,8})(([- 转])*([0-9]{1,4}))?$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断经度 -180.0～+180.0（整数部分为0～180，必须输入1到5位小数）
+ * @param value
+ * @returns {boolean}
+ */
+export function isLongitude(value) {
+  const reg = /^[-|+]?(0?\d{1,2}\.\d{1,5}|1[0-7]?\d{1}\.\d{1,5}|180\.0{1,5})$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断纬度 -90.0～+90.0（整数部分为0～90，必须输入1到5位小数）
+ * @param value
+ * @returns {boolean}
+ */
+export function isLatitude(value) {
+  const reg = /^[-|+]?([0-8]?\d{1}\.\d{1,5}|90\.0{1,5})$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description rtsp校验，只要有rtsp://
+ * @param value
+ * @returns {boolean}
+ */
+export function isRTSP(value) {
+  const reg = /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
+  const reg1 = /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]):[0-9]{1,5}/
+  const reg2 = /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\//
+  return reg.test(value) || reg1.test(value) || reg2.test(value)
+}
+
+/**
+ * @Author      gaoxiang
+ * @DateTime    2020/11/4
+ * @lastTime    2020/11/4
+ * @description 判断是否是JSON字符串
+ */
+export function isJSONStr(str: any) {
+  if (typeof str === 'string') {
+    try {
+      const obj = JSON.parse(str)
+      if (typeof obj === 'object' && obj) {
+        return true
+      } else {
+        return false
+      }
+    } catch (e) {
+      return false
+    }
+  }
+  return false
+}
+
+export function checkURL(URL) {
+  const str = URL,
+    Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/,
+    objExp = new RegExp(Expression)
+  return objExp.test(str)
+}

package/template-mobile-ts/src/views/home.vue

@@ -0,0 +1,82 @@
+<template>
+  <g-pro-page-container
+    ref="pageContainer"
+    v-model:loading="loading"
+    :loadingMsg="loadingMsg"
+    :hiddenSlot="hiddenSlot"
+  >
+    <van-swipe class="my-swipe">
+      <van-swipe-item>1</van-swipe-item>
+      <van-swipe-item>2</van-swipe-item>
+    </van-swipe>
+    <div style="display: flex;flex-direction: column;gap: 20px;">
+      <p>以下刷新只针对toast</p>
+      <van-button @click="init(true)">刷新（隐藏子组件）</van-button>
+      <van-button @click="init(false)">刷新（不隐藏子组件）</van-button>
+      <van-button @click="changeLoading('切换中')">切换loading提示语</van-button>
+      <van-button @click="toggleLoading(true)">刷新-调用方法-隐藏</van-button>
+      <van-button @click="toggleLoading(false)">刷新-调用方法-不隐藏</van-button>
+      <van-button @click="toggleLoading(false, '切换中')">刷新-调用方法-不隐藏-切换提示语</van-button>
+    </div>
+  </g-pro-page-container>
+</template>
+
+<script setup lang="ts">
+import { isBoolean } from '@/utils/validate'
+
+const loading = ref(false)
+const pageContainer = ref()
+const loadingMsg = ref('加载中')
+const hiddenSlot = ref(true)
+
+onMounted(() => {
+  init()
+})
+
+const init = (val?: boolean) => {
+  loadingMsg.value = '加载中'
+  loading.value = true
+
+  if (isBoolean(val)) hiddenSlot.value = val
+
+  setTimeout(() => {
+    loading.value = false
+  }, 1000)
+}
+
+const changeLoading = (message: string) => {
+  loadingMsg.value = message
+  loading.value = true
+  hiddenSlot.value = false
+
+  setTimeout(() => {
+    loading.value = false
+  }, 1000)
+}
+
+const toggleLoading = (hiddenSlot: boolean, message?: string) => {
+  pageContainer.value?.toggleLoading({
+    value: true,
+    hiddenSlot,
+    message
+  })
+
+  setTimeout(() => {
+    pageContainer.value?.toggleLoading({
+      value: false,
+      hiddenSlot
+    })
+  }, 1000)
+}
+
+</script>
+
+<style lang="less" scoped>
+.my-swipe .van-swipe-item {
+  color: #fff;
+  font-size: 20px;
+  line-height: 150px;
+  text-align: center;
+  background-color: #39a9ed;
+}
+</style>