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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gx-design-vue/create-gx-cli",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "license": "MIT",
   "description": "a cli to bootstrap gx project",
   "main": "src/index.js",

package/src/cli.js

@@ -1,24 +1,28 @@
+import fs from 'fs'
+import path from 'path'
 import minimist from 'minimist'
 import prompts from 'prompts'
-import { blue, reset, yellow } from 'kolorist'
+import { yellow, reset } from 'kolorist'
 import { createProject } from './main'
 
 const defaultTargetDir = 'gx-cli-project'
 
-const FRAMEWORKS = [
-  {
-    name: 'vue',
-    color: yellow
-  },
-  {
-    name: 'mobile',
-    color: blue
-  }
-]
+function getTemplate() {
+  const templateList = []
+  const files = fs.readdirSync(path.join(process.cwd(), '../'))
 
-const TEMPLATES = FRAMEWORKS.map(
-  (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name]
-).reduce((a, b) => a.concat(b), [])
+  for (const file of files) {
+    if (file.indexOf('template') >= 0) {
+      templateList.push(file)
+    }
+  }
+  return templateList.map((el) => {
+    return {
+      name: el.split('-')[1],
+      color: yellow
+    }
+  })
+}
 
 function formatTargetDir(targetDir) {
   return targetDir ? targetDir.trim().replace(/\/+$/g, '') : ''
@@ -35,6 +39,11 @@ function parseArgumentsIntoOptions() {
 }
 
 async function promptForMissingOptions(options) {
+  const FRAMEWORKS = getTemplate()
+
+  const TEMPLATES = FRAMEWORKS.map(
+    (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name]
+  ).reduce((a, b) => a.concat(b), [])
   const answers = await prompts([
     {
       type: options.projectName ? null : 'text',

package/template-mobile-ts/README.md

@@ -1,16 +1 @@
-# Vue 3 + TypeScript + Vite
-
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-## Recommended IDE Setup
-
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
-
-## Type Support For `.vue` Imports in TS
-
-Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
-
-1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
-2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
-
-You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
+# Vue 3 + TypeScript + Vite + Vant

package/template-mobile-ts/build/plugin/index.ts

@@ -4,13 +4,16 @@ import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 
 import vueSetupExtend from 'vite-plugin-vue-setup-extend'
+
+import { presetAttributify, presetUno, transformerDirectives } from 'unocss'
+import Unocss from 'unocss/vite'
+
 import { configHtmlPlugin } from './html'
 import { configMockPlugin } from './mock'
 import { createAutoImport } from './autoImport'
 
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   const {
-    VITE_USE_V_CONSOLE,
     VITE_USE_MOCK
   } = viteEnv
 
@@ -21,6 +24,15 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     vueJsx()
   ]
 
+  // unocss
+  vitePlugins.push(Unocss({
+    presets: [
+      presetAttributify(),
+      presetUno()
+    ],
+    transformers: [ transformerDirectives() ]
+  }))
+
   // vite-plugin-vue-setup-extend
   vitePlugins.push(vueSetupExtend())
 

package/template-mobile-ts/build/script/postBuild.ts

@@ -0,0 +1,15 @@
+// #!/usr/bin/env node
+import chalk from 'chalk'
+import { wrapperEnv, getEnvConfig } from '../utils'
+
+import pkg from '../../package.json'
+
+export const runBuild = async () => {
+  try {
+    console.log(`✨ ${chalk.cyan(`[${pkg.name}]`)}` + ' - build successfully!')
+  } catch (error) {
+    console.log(chalk.red('vite build error:\n' + error))
+    process.exit(1)
+  }
+}
+runBuild()

package/template-mobile-ts/package.json

@@ -1,6 +1,5 @@
 {
-  "name": "vue-vant-mobile",
-  "private": true,
+  "name": "gx-mobile-cli",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
@@ -9,17 +8,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@gx-design-vue/pro-hooks": "^0.0.8",
+    "@gx-design-vue/pro-utils": "^0.0.33",
+    "@vueuse/core": "^9.10.0",
+    "@vueuse/shared": "^9.10.0",
     "axios": "^1.1.3",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.6",
+    "lodash-es": "^4.17.21",
+    "lodash-unified": "^1.0.3",
     "mockjs": "^1.1.0",
     "pinia": "^2.0.23",
     "qs": "^6.11.0",
-    "vant": "^3.6.4",
+    "unocss": "^0.48.2",
+    "vant": "^4.0.8",
     "vue": "^3.2.41",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
+    "@types/lodash-es": "^4.17.4",
     "@types/node": "^17.0.42",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
@@ -47,9 +54,9 @@
     "typescript": "^4.6.4",
     "unplugin-auto-import": "^0.11.4",
     "unplugin-vue-components": "^0.22.9",
-    "vite": "^4.0.4",
-    "vite-plugin-mock": "^2.9.6",
+    "vite": "^4.0.0",
     "vite-plugin-html": "^3.2.0",
+    "vite-plugin-mock": "^2.9.6",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-eslint-parser": "^9.1.0",
     "vue-tsc": "^1.0.9"

package/template-mobile-ts/postcss.config.js

@@ -1,11 +1,8 @@
 module.exports = {
   plugins: {
-    autoprefixer: {},
     'postcss-pxtorem': {
-      rootValue({ file }) {
-        return file.indexOf('vant') !== -1 ? 37.5 : 75
-      },
-      propList: [ '*' ]
-    }
-  }
-}
+      rootValue: 37.5,
+      propList: ['*'],
+    },
+  },
+};

package/template-mobile-ts/src/components/PageContainer/index.tsx

@@ -12,6 +12,7 @@ type ChangeLoadingParams<T> = Omit<SetLoadingParams<T>, 'type'> & {
 
 const PageContainer = defineComponent({
   name: 'GProPageContainer',
+  inheritAttrs: false,
   props: {
     loading: Boolean as PropType<boolean>,
     hiddenSlot: {

package/template-mobile-ts/src/core/vant-design/index.ts

@@ -1,9 +1,4 @@
-import {
-  Button
-} from 'vant'
-
 const vantDesign = (app) => {
-  app.use(Button)
 }
 
 export default vantDesign

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

@@ -1,7 +1,6 @@
 import type { Ref } from 'vue'
 import { ref, watch } from 'vue'
-import { Toast } from 'vant'
-import { ToastWrapperInstance } from 'vant/lib/toast/types'
+import { closeToast, showLoadingToast } from 'vant'
 import type { PageLoadingTpe } from '@/components/PageContainer'
 
 export type SetLoadingParams<T> = { value: T; type?: PageLoadingTpe; message?: string }
@@ -11,7 +10,7 @@ type ChangeLoadingFn<T> = ({ value, type, message }: SetLoadingParams<T>) => voi
 export default function usePageLoading<T, R = Ref<T>>({
   defaultType,
   defaultMessage,
-  defaultLoading,
+  defaultLoading
 }: {
   defaultType?: PageLoadingTpe;
   defaultMessage?: string;
@@ -27,21 +26,19 @@ export default function usePageLoading<T, R = Ref<T>>({
 
   const loadingType = ref(defaultType)
 
-  const pageLoadingRef = ref<ToastWrapperInstance>()
-
   watch(() => pageLoading.value, (val) => {
     if (val) {
       if (loadingType.value === 'toast') {
-        pageLoadingRef.value = Toast.loading({
+        showLoadingToast({
           duration: 0,
           forbidClick: true,
           message: loadingMessage.value || '加载中'
         })
       } else {
-        pageLoadingRef.value?.clear()
+        closeToast()
       }
     } else {
-      pageLoadingRef.value?.clear()
+      closeToast()
     }
   }, {
     deep: true,

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

@@ -4,7 +4,9 @@ import { setupStore } from './store'
 import { setupGlobCommon } from './core'
 import App from './App.vue'
 
-import 'vant/es/toast/style';
+import 'uno.css'
+
+import 'vant/es/toast/style'
 
 import './global.less'
 

package/template-mobile-ts/src/{views → pages}/home.vue

@@ -5,10 +5,6 @@
     :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>
@@ -22,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { isBoolean } from '@/utils/validate'
+import { isBoolean } from '@gx-design-vue/pro-utils'
 
 const loading = ref(false)
 const pageContainer = ref()
@@ -72,11 +68,4 @@ const toggleLoading = (hiddenSlot: boolean, message?: string) => {
 </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>

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

@@ -1,19 +1,18 @@
 import type { App } from 'vue'
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
-import { useStoreGlobal } from '@/store'
+import settings from '@/settings'
 import getPageTitle from '@/utils/pageTitle'
 import { constantRoutes } from './routes'
 
-const router = createRouter({
+export const router = createRouter({
   history: createWebHashHistory(),
   routes: constantRoutes as unknown as RouteRecordRaw[]
 })
 
 const doRouterPermission = () => {
   router.afterEach((to) => {
-    const global = useStoreGlobal()
     const { meta }: any = to
-    document.title = getPageTitle(global.title, meta.title || '')
+    document.title = getPageTitle(settings.title, meta.title || '')
   })
 }
 

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

@@ -13,7 +13,7 @@ export const constantRoutes: AppRouteModule[] = [
         meta: {
           title: '首页'
         },
-        component: () => import('@/views/home.vue')
+        component: () => import('@/pages/home.vue')
       }
     ]
   }

package/template-mobile-ts/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-ts/src/store/modules/global.ts

@@ -9,8 +9,6 @@ import { deepCopy } from '@/utils/util'
  * @description store-global 全局属性
  */
 export interface GlobalState {
-  title: string; // app 应用名
-  tokenName?: string; // 请求header token key值
   token?: string; // app token
 }
 
@@ -18,8 +16,7 @@ type GlobalStateKey = keyof GlobalState
 
 export const useStoreGlobal = defineStore('global', () => {
   const state = reactive<GlobalState>({
-    title: 'gx-design-mobile',
-    tokenName: 'token'
+    token: ''
   })
 
   const setGlobalData: (params: Partial<Record<GlobalStateKey, GlobalState[GlobalStateKey]>>) => void = (params) => {

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

@@ -1,25 +1,39 @@
-import CryptoJS from 'crypto-js'
+import 'crypto-js/enc-utf8'
+import 'crypto-js/tripledes'
+import 'crypto-js/sha1'
+import * as CryptoJS from 'crypto-js/core'
+import { isJSONStr } from '@/utils/validate'
+import { isObject, isArray } from '@gx-design-vue/pro-utils'
 
-// 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,
+const key = '1234123412ABCDEF'  //十六位十六进制数作为密钥
+
+//加密方法
+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 cipherText.toString()
+  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
 }
 
-// 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,
+//解密方法
+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
   })
-  return decryptedData.toString(CryptoJS.enc.Utf8)
+  const decryptedStr = decrypted.toString(CryptoJS.enc.Utf8)
+  return isJSONStr(decryptedStr.toString()) ? JSON.parse(decryptedStr.toString()) : decryptedStr.toString()
 }

package/template-mobile-ts/src/utils/{index.ts → env.ts}

@@ -43,7 +43,7 @@ export function isBuild(): boolean {
 export function typeViteEnv(key: ViteEnvKey) {
   let value = import.meta.env[key]
   if (value) {
-    value = value.replace(/\\n/g, '\n')
+    value = (value as string).replace(/\\n/g, '\n')
 
     value = value === 'true' ? true : value === 'false' ? false : value
   }

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

@@ -0,0 +1,131 @@
+import type { AxiosResponse, AxiosError } from 'axios'
+import axios from 'axios'
+import { deepCopy } from '@/utils/util'
+import qs from 'qs'
+import { isFunction } from '@gx-design-vue/pro-utils'
+import type { GAxiosInstance, GAxiosOptions } from './typings'
+import { ContentTypeEnum, RequestEnum } from './typings'
+import { AxiosCanceler } from './axiosCancel'
+
+/**
+ * @Author      gx12358
+ * @DateTime    2023/1/6
+ * @lastTime    2023/1/6
+ * @description 重新定义axios
+ */
+export class GAxios {
+  private axiosInstance: GAxiosInstance
+  private readonly options: GAxiosOptions
+
+  constructor(options: GAxiosOptions) {
+    this.options = options
+    this.axiosInstance = axios.create(options)
+    this.setupInterceptors()
+  }
+
+  /**
+   * @description: Interceptor configuration 拦截器配置
+   */
+  private setupInterceptors() {
+    const {
+      requestInterceptors,
+      requestInterceptorsCatch,
+      responseInterceptors,
+      responseInterceptorsCatch
+    } = this.options
+
+    const axiosCanceler = new AxiosCanceler()
+
+    this.axiosInstance.interceptors.request.use((config: GAxiosOptions) => {
+      const { ignoreCancelToken } = config
+      const ignoreCancel =
+        ignoreCancelToken !== undefined
+          ? ignoreCancelToken
+          : this.options?.ignoreCancelToken
+
+      !ignoreCancel && axiosCanceler.addPending(config)
+      if (requestInterceptors && isFunction(requestInterceptors)) {
+        config = requestInterceptors(config)
+      }
+      return config
+    }, undefined)
+
+    // Request interceptor error capture
+    requestInterceptorsCatch &&
+    isFunction(requestInterceptorsCatch) &&
+    this.axiosInstance.interceptors.request.use(undefined, requestInterceptorsCatch)
+
+    // Response result interceptor processing
+    this.axiosInstance.interceptors.response.use((res: AxiosResponse) => {
+      res && axiosCanceler.removePending(res.config)
+      if (responseInterceptors && isFunction(responseInterceptors)) {
+        return responseInterceptors(res)
+      }
+      return res
+    }, undefined)
+
+    // Response result interceptor error capture
+    responseInterceptorsCatch &&
+    isFunction(responseInterceptorsCatch) &&
+    this.axiosInstance.interceptors.response.use(undefined, (error) => {
+      return responseInterceptorsCatch(this.axiosInstance, error)
+    })
+  }
+
+  // support form-data
+  supportFormData(config: GAxiosOptions) {
+    const headers = config.headers || this.options.headers
+    const contentType = headers?.['Content-Type'] || headers?.['content-type']
+
+    if (
+      contentType !== ContentTypeEnum.FORM_URLENCODED ||
+      !Reflect.has(config, 'data') ||
+      config.method?.toUpperCase() === RequestEnum.GET
+    ) {
+      return config
+    }
+
+    return {
+      ...config,
+      data: qs.stringify(config.data, { arrayFormat: 'brackets' })
+    }
+  }
+
+  request<T = ResponseResult | boolean>(config: GAxiosOptions): Promise<T> {
+    let conf: GAxiosOptions = deepCopy(config)
+
+    const opt: GAxiosOptions = Object.assign({}, this.options, conf)
+
+    const { beforeRequestHook, requestCatchHook, transformResponseHook } = opt
+    if (beforeRequestHook && isFunction(beforeRequestHook)) {
+      conf = beforeRequestHook(opt)
+    }
+
+    conf = this.supportFormData(opt)
+
+    return new Promise((resolve) => {
+      this.axiosInstance
+        .request<any, AxiosResponse>(conf)
+        .then((res: AxiosResponse) => {
+          if (transformResponseHook && isFunction(transformResponseHook)) {
+            try {
+              const ret = transformResponseHook(res, config)
+              resolve(ret)
+            } catch (err) {
+              resolve(false as any)
+              return
+            }
+            return
+          }
+          resolve(res as unknown as Promise<T>)
+        })
+        .catch((e: Error | AxiosError) => {
+          if (requestCatchHook && isFunction(requestCatchHook)) {
+            resolve(requestCatchHook(e) as any)
+            return
+          }
+          resolve(false as any)
+        })
+    })
+  }
+}

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

@@ -0,0 +1,60 @@
+import type { AxiosRequestConfig, Canceler } from 'axios'
+import axios from 'axios'
+import { isFunction } from '@gx-design-vue/pro-utils'
+
+// Used to store the identification and cancellation function of each request
+let pendingMap = new Map<string, Canceler>()
+
+export const getPendingUrl = (config: AxiosRequestConfig) => [ config.method, config.url ].join('&')
+
+export class AxiosCanceler {
+  /**
+   * Add request
+   * @param {Object} config
+   */
+  addPending(config: AxiosRequestConfig) {
+    this.removePending(config)
+    const url = getPendingUrl(config)
+    config.cancelToken =
+      config.cancelToken ||
+      new axios.CancelToken((cancel) => {
+        if (!pendingMap.has(url)) {
+          // If there is no current request in pending, add it
+          pendingMap.set(url, cancel)
+        }
+      })
+  }
+
+  /**
+   * @description: Clear all pending
+   */
+  removeAllPending() {
+    pendingMap.forEach((cancel) => {
+      cancel && isFunction(cancel) && cancel()
+    })
+    pendingMap.clear()
+  }
+
+  /**
+   * Removal request
+   * @param {Object} config
+   */
+  removePending(config: AxiosRequestConfig) {
+    const url = getPendingUrl(config)
+
+    if (pendingMap.has(url)) {
+      // If there is a current request identifier in pending,
+      // the current request needs to be cancelled and removed
+      const cancel = pendingMap.get(url)
+      cancel && cancel(url)
+      pendingMap.delete(url)
+    }
+  }
+
+  /**
+   * @description: reset
+   */
+  reset(): void {
+    pendingMap = new Map<string, Canceler>()
+  }
+}

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

@@ -0,0 +1,11 @@
+import { showFailToast } from 'vant'
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 处理code异常
+ * @param {*} code
+ * @param {*} msg
+ */
+export const handleCode = (code: number, msg: string) => {
+  // 这里处理不同状态
+}