@gx-design-vue/create-gx-cli 0.1.3 → 0.1.4

package/template-mobile-vant-cli/src/design/reset.less

@@ -0,0 +1,155 @@
+/****reset****/
+body,
+div,
+table,
+tr,
+td,
+th,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+form,
+input,
+button,
+label,
+select,
+textarea,
+p,
+u,
+i,
+em,
+ul,
+ol,
+li,
+dl,
+dd,
+dt,
+img,
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+menu,
+nav,
+section,
+pre {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  border: 0;
+  outline: 0;
+}
+
+li {
+  list-style: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}
+
+a,
+input,
+select,
+textarea,
+area,
+button {
+  outline: none;
+  font-family: inherit;
+  font-size: inherit;
+  border: none;
+  background: none;
+  color: inherit;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+textarea {
+  overflow: auto;
+  resize: none;
+}
+
+input[type='button'],
+input[type='submit'],
+input[type='reset'] {
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+
+html,
+body {
+  overflow-x: hidden;
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+}
+
+* {
+  -webkit-overflow-scrolling: touch;
+}
+
+html {
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  text-align: left;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+
+  #app {
+    height: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overflow-x: hidden;
+    box-sizing: border-box;
+  }
+}
+
+.fl {
+  float: left;
+}
+
+.fr {
+  float: right;
+}
+
+.clearfix {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: ' ';
+  }
+  &::after {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    visibility: hidden;
+  }
+}

package/template-mobile-vant-cli/src/design/root.less

@@ -0,0 +1,3 @@
+:root {
+  --gx-mobile-layout-bg: #ffffff;
+}

package/template-mobile-vant-cli/src/design/vant.less

@@ -0,0 +1,2 @@
+:root {
+}

package/template-mobile-vant-cli/src/global.less

@@ -0,0 +1 @@
+@import './design/index';

package/template-mobile-vant-cli/src/hooks/web/index.ts

@@ -0,0 +1,5 @@
+import usePageLoading from './usePageLoading'
+
+export {
+  usePageLoading
+}

package/template-mobile-vant-cli/src/hooks/web/usePageLoading.ts

@@ -0,0 +1,58 @@
+import type { Ref } from 'vue'
+import { ref, watch } from 'vue'
+import { closeToast, showLoadingToast } from 'vant'
+import type { PageLoadingTpe } from '@/components/PageContainer'
+
+export interface SetLoadingParams<T> {
+  value: T;
+  type?: PageLoadingTpe;
+  message?: string
+}
+
+type ChangeLoadingFn<T> = ({ value, type, message }: SetLoadingParams<T>) => void
+
+export default function usePageLoading<T, R = Ref<T>>({
+  defaultType,
+  defaultMessage,
+  defaultLoading
+}: {
+  defaultType?: PageLoadingTpe;
+  defaultMessage?: string;
+  defaultLoading?: T | (() => T);
+}): [ R, ChangeLoadingFn<T> ] {
+  const initValue: T = typeof defaultLoading === 'function' ? (defaultLoading as any)() : defaultLoading
+
+  const pageLoading = ref(initValue) as Ref<T>
+
+  const loadingMessage = ref(defaultMessage)
+
+  const loadingType = ref(defaultType)
+
+  watch(() => pageLoading.value, (val) => {
+    if (val) {
+      if (loadingType.value === 'toast') {
+        showLoadingToast({
+          duration: 0,
+          forbidClick: true,
+          message: loadingMessage.value || '加载中'
+        })
+      } else {
+        closeToast()
+      }
+    } else {
+      closeToast()
+    }
+  }, {
+    deep: true,
+    immediate: true
+  })
+
+  const changeLoading = ({ value, type, message }: SetLoadingParams<T>) => {
+    pageLoading.value = value
+    loadingMessage.value = message
+    if (type)
+      loadingType.value = type
+  }
+
+  return [ pageLoading as unknown as R, changeLoading ]
+}

package/template-mobile-vant-cli/src/layout/BasicLayout.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div :class="$style['basic-layout']">
+    <RouterView>
+      <template #default="{ Component }">
+        <component :is="Component" />
+      </template>
+    </RouterView>
+  </div>
+</template>
+
+<style lang="less" module>
+@import './basicLayout';
+</style>

package/template-mobile-vant-cli/src/layout/basicLayout.less

@@ -0,0 +1,11 @@
+.basic-layout {
+  height: 100%;
+}
+
+@media screen and (min-width: 800px) {
+  .basic-layout {
+    width: 10rem;
+    max-width: 10rem;
+    margin: 0 auto;
+  }
+}

package/template-mobile-vant-cli/src/main.ts

@@ -0,0 +1,27 @@
+import { createApp } from 'vue'
+import { setupRouter } from '@/router'
+import { setupStore } from './store'
+import { setupGlobCommon } from './core'
+import App from './App.vue'
+
+import 'uno.css'
+
+import 'vant/es/toast/style'
+
+import './global.less'
+
+function startApp() {
+  const app = createApp(App)
+
+  // 配置store
+  setupStore(app)
+
+  // 配置路由
+  setupRouter(app)
+
+  setupGlobCommon(app)
+
+  app.mount('#app')
+}
+
+startApp()

package/template-mobile-vant-cli/src/pages/home.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { isBoolean } from '@gx-design-vue/pro-utils'
+
+const loading = ref(false)
+const pageContainer = ref()
+const loadingMsg = ref('加载中')
+const hiddenSlot = ref(true)
+
+const init = (val?: boolean) => {
+  loadingMsg.value = '加载中'
+  loading.value = true
+  
+  if (isBoolean(val))
+    hiddenSlot.value = val
+  
+  setTimeout(() => {
+    loading.value = false
+  }, 1000)
+}
+
+onMounted(() => {
+  init()
+})
+
+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>
+
+<template>
+  <g-pro-page-container
+    ref="pageContainer"
+    v-model:loading="loading"
+    :loadingMsg="loadingMsg"
+    :hiddenSlot="hiddenSlot"
+  >
+    <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>
+
+<style lang="less" scoped>
+</style>

package/template-mobile-vant-cli/src/router/index.ts

@@ -0,0 +1,25 @@
+import type { App } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import settings from '@/settings'
+import getPageTitle from '@/utils/pageTitle'
+import { constantRoutes } from './routes'
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes: constantRoutes as unknown as RouteRecordRaw[]
+})
+
+const doRouterPermission = () => {
+  router.afterEach((to) => {
+    const { meta }: any = to
+    document.title = getPageTitle(settings.title, meta.title || '')
+  })
+}
+
+// 配置路由器
+export function setupRouter(app: App<Element>) {
+  app.use(router)
+
+  doRouterPermission()
+}

package/template-mobile-vant-cli/src/router/routes.ts

@@ -0,0 +1,20 @@
+import type { AppRouteModule } from './typings'
+import BasicLayout from '@/layout/BasicLayout.vue'
+
+export const constantRoutes: AppRouteModule[] = [
+  {
+    path: '/',
+    component: BasicLayout,
+    redirect: '/home',
+    children: [
+      {
+        path: '/home',
+        name: 'Home',
+        meta: {
+          title: '首页'
+        },
+        component: () => import('@/pages/home.vue')
+      }
+    ]
+  }
+]

package/template-mobile-vant-cli/src/router/typings.ts

@@ -0,0 +1,8 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+interface AppRouteRecordRaw {
+  hidden?: boolean;
+  homePage?: number;
+}
+
+export type AppRouteModule = AppRouteRecordRaw & RouteRecordRaw

package/template-mobile-vant-cli/src/services/index.ts

@@ -0,0 +1,31 @@
+import request from '@/utils/request'
+
+// get 请求
+export function getMock(params) {
+  return request({
+    url: '/get/mock',
+    method: 'get',
+    isMock: true,
+    params
+  })
+}
+
+// post 请求
+export function postMock(data) {
+  return request({
+    url: '/post/mock',
+    method: 'post',
+    isMock: true,
+    data
+  })
+}
+
+// formData 请求
+export function formDataMock(data) {
+  return request({
+    url: '/formData/mock',
+    method: 'post',
+    isMock: true,
+    data
+  })
+}

package/template-mobile-vant-cli/src/settings/index.ts

@@ -0,0 +1,10 @@
+export default {
+  title: 'gx-design-mobile',
+  tokenName: 'token',
+  contentType: 'application/json;charset=UTF-8',
+  requestPrefix: '',
+  // 最长请求时间
+  requestTimeout: 10000,
+  // 操作正常code，支持String、Array、int多种类型
+  successCode: [ 200, 0 ]
+}

package/template-mobile-vant-cli/src/store/index.ts

@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+import { createPinia } from 'pinia'
+import { useStoreGlobal } from './modules/global'
+
+export {
+  useStoreGlobal
+}
+
+export function useStore() {
+  return {
+    global: useStoreGlobal()
+  }
+}
+
+export function setupStore(app: App<Element>) {
+  app.use(createPinia())
+}

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

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

package/template-mobile-vant-cli/src/utils/crypto/base64.ts

@@ -0,0 +1,101 @@
+export default class Base64 {
+  _keyStr: string
+
+  constructor() {
+    this._keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
+  }
+
+  _utf8_encode(string: string) {
+    string = string.replace(/\r\n/g, '\n')
+    let utftext = ''
+    for (let n = 0; n < string.length; n++) {
+      const c = string.charCodeAt(n)
+      if (c < 128) {
+        utftext += String.fromCharCode(c)
+      } else if ((c > 127) && (c < 2048)) {
+        utftext += String.fromCharCode((c >> 6) | 192)
+        utftext += String.fromCharCode((c & 63) | 128)
+      } else {
+        utftext += String.fromCharCode((c >> 12) | 224)
+        utftext += String.fromCharCode(((c >> 6) & 63) | 128)
+        utftext += String.fromCharCode((c & 63) | 128)
+      }
+    }
+    return utftext
+  }
+
+  _utf8_decode(utftext: string) {
+    let string = ''
+    let i = 0
+    let c = 0
+    let c1 = 0
+    let c2 = 0
+    while (i < utftext.length) {
+      c = utftext.charCodeAt(i)
+      if (c < 128) {
+        string += String.fromCharCode(c)
+        i++
+      } else if ((c > 191) && (c < 224)) {
+        c1 = utftext.charCodeAt(i + 1)
+        string += String.fromCharCode(((c & 31) << 6) | (c1 & 63))
+        i += 2
+      } else {
+        c1 = utftext.charCodeAt(i + 1)
+        c2 = utftext.charCodeAt(i + 2)
+        string += String.fromCharCode(((c & 15) << 12) | ((c1 & 63) << 6) | (c2 & 63))
+        i += 3
+      }
+    }
+    return string
+  }
+
+  encode(input: string) {
+    let output = ''
+    let chr1, chr2, chr3, enc1, enc2, enc3, enc4
+    let i = 0
+    input = this._utf8_encode(input)
+    while (i < input.length) {
+      chr1 = input.charCodeAt(i++)
+      chr2 = input.charCodeAt(i++)
+      chr3 = input.charCodeAt(i++)
+      enc1 = chr1 >> 2
+      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4)
+      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6)
+      enc4 = chr3 & 63
+      if (Number.isNaN(chr2)) {
+        enc3 = enc4 = 64
+      } else if (Number.isNaN(chr3)) {
+        enc4 = 64
+      }
+      output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(
+        enc3) + this._keyStr.charAt(enc4)
+    }
+    return output
+  }
+
+  decode(input: string) {
+    let output = ''
+    let chr1, chr2, chr3
+    let enc1, enc2, enc3, enc4
+    let i = 0
+    input = input.replace(/[^A-Za-z0-9+/=]/g, '')
+    while (i < input.length) {
+      enc1 = this._keyStr.indexOf(input.charAt(i++))
+      enc2 = this._keyStr.indexOf(input.charAt(i++))
+      enc3 = this._keyStr.indexOf(input.charAt(i++))
+      enc4 = this._keyStr.indexOf(input.charAt(i++))
+      chr1 = (enc1 << 2) | (enc2 >> 4)
+      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2)
+      chr3 = ((enc3 & 3) << 6) | enc4
+      output = output + String.fromCharCode(chr1)
+      if (enc3 !== 64) {
+        output = output + String.fromCharCode(chr2)
+      }
+      if (enc4 !== 64) {
+        output = output + String.fromCharCode(chr3)
+      }
+    }
+    output = this._utf8_decode(output)
+    return output
+  }
+}

package/template-mobile-vant-cli/src/utils/crypto/index.ts

@@ -0,0 +1,57 @@
+import 'crypto-js/enc-utf8'
+import 'crypto-js/tripledes'
+import 'crypto-js/sha1'
+import * as CryptoJS from 'crypto-js/core'
+import CryptoProJS from 'crypto-js'
+import { isJSONStr } from '@/utils/validate'
+import { isArray, isObject } from '@gx-design-vue/pro-utils'
+
+const key = '1234123412ABCDEF' // 十六位十六进制数作为密钥
+
+/**
+ * 登录密码加密
+ * @param password
+ * @returns {string}
+ */
+export const encodePassword = (password: string) => {
+  const key = CryptoProJS.enc.Utf8.parse('8QONwyJtHesysWpM')
+  const passwordENC = CryptoProJS.AES.encrypt(password, key, {
+    mode: CryptoProJS.mode.ECB,
+    padding: CryptoProJS.pad.Pkcs7
+  })
+  const encodePW = passwordENC.ciphertext.toString()
+  return encodePW
+}
+
+// 加密方法
+export function Encrypt(word) {
+  let str: string | object = word
+  if (isObject(word) || isArray(word)) {
+    str = JSON.stringify(word)
+  }
+  const keyHex = CryptoJS.enc.Utf8.parse(key)
+  const ivHex = CryptoJS.enc.Utf8.parse(key)
+  const encrypted = CryptoJS.DES.encrypt(str, keyHex, {
+    iv: ivHex,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7
+  })
+  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
+}
+
+// 解密方法
+export function Decrypt(word) {
+  const keyHex = CryptoJS.enc.Utf8.parse(key)
+  const ivHex = CryptoJS.enc.Utf8.parse(key)
+  const decrypted = CryptoJS.DES.decrypt({
+    ciphertext: CryptoJS.enc.Base64.parse(word)
+  }, keyHex, {
+    iv: ivHex,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7
+  })
+  const decryptedStr = decrypted.toString(CryptoJS.enc.Utf8)
+  return isJSONStr(decryptedStr.toString())
+    ? JSON.parse(decryptedStr.toString())
+    : decryptedStr.toString()
+}