@gx-design-vue/create-gx-cli 0.1.19 → 0.1.21

package/template-mobile-vant-cli/internal/vite-config/vite/plugin/visualizer.ts

@@ -0,0 +1,14 @@
+import { visualizer } from 'rollup-plugin-visualizer'
+import { isReportMode } from '../../util'
+
+export function configVisualizerConfig() {
+  if (isReportMode()) {
+    return visualizer({
+      filename: './node_modules/.cache/visualizer/stats.html',
+      open: true,
+      gzipSize: true,
+      brotliSize: true
+    }) as Plugin
+  }
+  return []
+}

package/template-mobile-vant-cli/internal/vite-config/vite/plugin/viteNotice.ts

@@ -0,0 +1,40 @@
+import type { Plugin } from 'vite'
+import chalk from 'chalk'
+import { readPackageJSON } from 'pkg-types'
+import { defaultSettings } from '../../../../config'
+import { getPackageSize, getRootPath, rootPath } from '../../util'
+
+const { build } = defaultSettings
+
+export default async function viteNotice(): Promise<Plugin> {
+  let config: { command: string }
+  const { name = '' } = await readPackageJSON(rootPath)
+
+  return {
+    name: 'vite:notice',
+    configResolved(resolvedConfig) {
+      config = resolvedConfig
+    },
+    buildStart() {
+      console.log(
+        chalk.bold(
+          chalk.green(
+            `👏Welcome to use ${chalk.blue(
+              '[gx-design-pro]'
+            )}, If you feel good, remember to click on the link below to give a star https://github.com/gx12358/vue3-antd-admin`
+          )
+        )
+      )
+    },
+    closeBundle() {
+      if (config.command === 'build') {
+        getPackageSize({
+          folder: getRootPath(build.outputDir),
+          callBack: (size: string) => {
+            console.log(chalk.bold(chalk.green(`✨ ${chalk.blue(`[${name}]`)} all build successfully, Total files ${size}`)))
+          }
+        })
+      }
+    }
+  }
+}

package/template-mobile-vant-cli/mock/config/permissions.ts

@@ -0,0 +1,15 @@
+export const permissions = {
+  '1': [ '*:*:*' ],
+  '2': [
+    'proTable:button:add',
+    'proTable:button:1',
+    'proTable:button:2',
+    'proTable:button:3'
+  ],
+  '3': [
+    'proTable:button:1',
+    'proTable:button:2',
+    'proTable:button:3'
+  ],
+  '4': [],
+}

package/template-mobile-vant-cli/mock/config/user/id.ts

@@ -0,0 +1,5 @@
+import { getArraryList } from '../../utils/util'
+
+export default getArraryList(4, index => ({
+  id: index + 1
+}))

package/template-mobile-vant-cli/mock/config/user/index.ts

@@ -0,0 +1,96 @@
+import Mockjs from 'mockjs'
+import { permissions } from '../permissions'
+import { handleRandomImage, getMobile } from '../../utils/util'
+import userIds from './id'
+
+const admin = [ 1, 2 ]
+
+export interface RolesInfo {
+  roleId: number;
+  roleKey: string;
+  roleName: string;
+  status: string;
+}
+
+export interface UserList {
+  id: number;
+  name: string;
+}
+
+export const accessTokens = {
+  gx12358: 'gx-accessToken',
+  admin: 'admin-accessToken',
+  editor: 'editor-accessToken',
+  no_editor: 'test-accessToken'
+}
+
+export const accounts = {
+  admin: 'gx.design',
+  gx12358: 'aa123456',
+  editor: 'gx.design',
+  no_editor: 'gx.design'
+}
+
+export const rolesInfo: RolesInfo[] = [
+  {
+    roleId: 1,
+    roleKey: 'gx-admin',
+    roleName: 'gx12358-超级管理员',
+    status: '0'
+  },
+  {
+    roleId: 2,
+    roleKey: 'admin',
+    roleName: '超级管理员',
+    status: '0'
+  },
+  {
+    roleId: 3,
+    roleKey: 'editor',
+    roleName: '编辑人员',
+    status: '0'
+  }
+]
+
+export const tokenAccount = {
+  '1': accessTokens.gx12358,
+  '2': accessTokens.admin,
+  '3': accessTokens.editor,
+  '4': accessTokens.no_editor
+}
+
+const rolesInfoAccount = {
+  '1': rolesInfo.filter(item => [ 1 ].includes(item.roleId)),
+  '2': rolesInfo.filter(item => [ 2 ].includes(item.roleId)),
+  '3': rolesInfo.filter(item => [ 3 ].includes(item.roleId)),
+  '4': rolesInfo.filter(item => [ 3 ].includes(item.roleId))
+}
+
+export const defaultUser = (id = 2) => ({
+  permissions: permissions[String(id)],
+  roles: rolesInfoAccount[String(id)].map(item => item.roleKey),
+  user: {
+    userId: Number(id),
+    admin: admin.includes(Number(id)),
+    roles: rolesInfoAccount[String(id)],
+    roleIds: rolesInfoAccount[String(id)].map(item => item.roleId),
+    nickName: Mockjs.Random.name(),
+    avatar: handleRandomImage(100, 100),
+    address: Mockjs.Random.city(),
+    email: 'gx12358@gmail.com',
+    phonenumber: getMobile(),
+    remark: Mockjs.Random.paragraph(1),
+    tags: Array.from({ length: Mockjs.Random.integer(4, 8) }).map(_ => Mockjs.Random.word(1)).join(),
+    userName: Object.keys(accessTokens).find(el => tokenAccount[String(id)] === accessTokens[el])
+  } as Partial<UserDetails>
+})
+
+export const otherAccountList: UserList[] = [ '付小小', '曲丽丽', '林东东', '周星星', '吴加好', '朱偏右', '鱼酱', '乐哥', '谭小仪', '仲尼' ]
+  .map((name, key) => {
+    return {
+      id: key + 1,
+      name
+    }
+  })
+
+export const userList: UserInfo[] = userIds.map(item => defaultUser(item.id)) as unknown as UserInfo[]

package/template-mobile-vant-cli/mock/index.ts

@@ -0,0 +1,55 @@
+import { defaultSettings } from '@gx-config'
+import { isArray, isBoolean, isFunction } from '@gx-design-vue/pro-utils'
+import { omit } from 'lodash-es'
+// @ts-ignore
+import { defineFakeRoute } from 'vite-plugin-fake-server/client'
+import { checkBackDataFun, getToken } from './utils/util'
+
+const { mock } = defaultSettings
+
+export interface MockResponse {
+  body: any;
+  query: any;
+  headers: RequestHeater
+}
+
+export type MockResponseCallback =
+  | ((response: MockResponse, token?: string) => any)
+  | string | number | Recordable | any[] | null
+
+export type MockConfig = FakeRouteConfig & {
+  merageRoot?: boolean;
+  carryToken?: boolean;
+  callback: MockResponseCallback;
+}
+
+function getRequestData(callback: MockResponseCallback, request: MockResponse, token?: string) {
+  if (isFunction(callback)) {
+    return callback?.(request, token)
+  }
+
+  return callback
+}
+
+function getMockRouteConfig(config: MockConfig) {
+  const carryToken = isBoolean(config.carryToken) ? config.carryToken : true
+  return {
+    ...omit(config, 'callback'),
+    url: `${mock.prefix}${config.url}`,
+    response: (request: MockResponse) => {
+      if (carryToken) {
+        const token = getToken(request.headers)
+        return checkBackDataFun(getRequestData(config.callback, request, token) || {}, token || '', config.merageRoot)
+      }
+      return getRequestData(config.callback, request)
+    }
+  }
+}
+
+export function createMockRoute(router: MockConfig | MockConfig[]) {
+  const fakeRoute = isArray(router)
+    ? router.map(item => getMockRouteConfig(item))
+    : getMockRouteConfig(router)
+
+  return defineFakeRoute(fakeRoute)
+}

package/template-mobile-vant-cli/mock/routers/table/index.fake.ts

@@ -0,0 +1,22 @@
+import type { ListSearchParams } from '../../utils/table'
+import Mockjs from 'mockjs'
+import { createMockRoute } from '../../../mock'
+import { handlePageList, initContent } from '../../utils/table'
+
+const dataSource = initContent<TableRecord<any>>(120, () => ({
+  title: Mockjs.Random.ctitle(),
+}))
+
+export default createMockRoute({
+  url: '/table/list',
+  method: 'post',
+  timeout: 200,
+  callback: ({ body }) => {
+    const { pageNum = 1, pageSize = 10 }: ListSearchParams = body
+
+    return {
+      list: handlePageList(dataSource, { pageNum, pageSize }),
+      totalCount: dataSource.length
+    }
+  }
+})

package/template-mobile-vant-cli/mock/routers/user/account.fake.ts

@@ -0,0 +1,52 @@
+import dayjs from 'dayjs'
+import { cloneDeep } from 'lodash-es'
+import { createMockRoute } from '../../../mock'
+import { otherAccountList, userList } from '../../config/user'
+import { tokenByUserInfo } from '../../utils/util'
+
+export default createMockRoute([
+  {
+    url: '/user/queryUserDetail',
+    method: 'get',
+    merageRoot: true,
+    callback: (_, token) => {
+      if (token) {
+        const tokenUserInfo = tokenByUserInfo(token)
+        if (tokenUserInfo && tokenUserInfo?.userId) {
+          const userInfo = userList.find(item => item.user.userId === tokenUserInfo?.userId)
+          if (userInfo) {
+            userInfo.user.loginDate = dayjs().format('YYYY-MM-DD HH:mm:ss')
+            return userInfo
+          }
+        }
+      }
+
+      return {
+        code: 500,
+        message: '用户信息获取失败'
+      }
+    }
+  },
+  {
+    url: '/user/account/update',
+    method: 'post',
+    timeout: 200,
+    callback: () => null
+  },
+  {
+    url: '/user/account/list',
+    method: 'get',
+    timeout: 200,
+    callback: () => cloneDeep(otherAccountList)
+  },
+  {
+    url: '/user/account/count',
+    method: 'get',
+    timeout: 200,
+    callback: () => ({
+      articles: 50,
+      applications: 40,
+      projects: 60
+    })
+  }
+])

package/template-mobile-vant-cli/mock/routers/user/index.fake.ts

@@ -0,0 +1,46 @@
+import { createMockRoute } from '../../../mock'
+import { accessTokens, accounts } from '../../config/user'
+import { createrToken } from '../../utils/util'
+
+export default createMockRoute([
+  {
+    url: '/user/login',
+    method: 'post',
+    carryToken: false,
+    callback: ({ body }) => {
+      const { userName, password } = body
+      const accessToken = accessTokens[userName]
+      if (accounts[userName] !== password || !accessToken) {
+        return {
+          code: 500,
+          msg: '帐户或密码不正确。'
+        }
+      }
+      return {
+        code: 200,
+        msg: 'success',
+        data: {
+          token: createrToken(accessToken),
+          expiresIn: 720
+        }
+      }
+    }
+  },
+  {
+    url: '/user/register',
+    method: 'post',
+    carryToken: false,
+    callback: () => {
+      return {
+        code: 200,
+        msg: '模拟注册成功'
+      }
+    }
+  },
+  {
+    url: '/user/logout',
+    method: 'get',
+    timeout: 200,
+    callback: null
+  }
+])

package/template-mobile-vant-cli/mock/utils/crypto.ts

@@ -0,0 +1,21 @@
+import { Base64, isArray, isJSONStr, isObject } from '@gx-design-vue/pro-utils'
+
+const cryptoBase64 = new Base64()
+
+// 加密方法
+export function Encrypt(word: string | object) {
+  let str: string
+  if (isObject(word) || isArray(word)) {
+    str = JSON.stringify(word)
+  } else {
+    str = word as string
+  }
+
+  return cryptoBase64.encode(str as string)
+}
+
+// 解密方法
+export function Decrypt(word: string) {
+  const decryptedStr = cryptoBase64.decode(word)
+  return isJSONStr(decryptedStr) ? JSON.parse(decryptedStr) : decryptedStr
+}

package/template-mobile-vant-cli/mock/utils/table.ts

@@ -0,0 +1,96 @@
+import { getRandomNumber } from '@gx-design-vue/pro-utils'
+import dayjs from 'dayjs'
+import { cloneDeep } from 'lodash-es'
+import Mockjs from 'mockjs'
+import { getArraryList } from './util'
+
+export interface ListItem {
+  createTime: string | null;
+  id: number;
+}
+
+export interface ListSearchParams {
+  pageNum?: number;
+  pageSize?: number;
+  sord?: 'asc' | 'desc';
+  sidx?: 'createTime';
+}
+
+export function initContent<T>(
+  max,
+  callbackParams?: (key: number) => Omit<T, 'id' | 'createTime'> & Partial<ListItem>
+): (Omit<T, 'id' | 'createTime'> & ListItem)[] {
+  const mockParams = (index: number) => ({
+    id: index + 1,
+    uuid: getRandomNumber().uuid(10),
+    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
+  }) as any
+  const list: (T & ListItem)[] = getArraryList(max, index => mockParams(index))
+
+  return list.map((item, index) => {
+    return {
+      ...item,
+      createTime: dayjs()
+        .subtract(Mockjs.Random.integer(3, 60), 'day')
+        .subtract(Mockjs.Random.integer(2, 6), 'hour')
+        .subtract(Mockjs.Random.integer(1, 59), 'minute')
+        .subtract(Mockjs.Random.integer(1, 59), 'second')
+        .format('YYYY-MM-DD HH:mm:ss'),
+      ...callbackParams?.(index)
+    }
+  })
+}
+
+export function handlePageList<T>(
+  dataSource: T[],
+  { pageNum, pageSize, callBack }: {
+    pageNum: number;
+    pageSize: number;
+    callBack?: (data: T[]) => T[]
+  }
+): T[] {
+  if (callBack)
+    dataSource = callBack?.(dataSource)
+  return cloneDeep(dataSource).filter(
+    (_, sort) => (sort < pageNum * pageSize) && (sort >= pageSize * (pageNum - 1))
+  )
+}
+
+export function compareToMaxTime(obj1, obj2, key, type: 0 | 1 = 0) {
+  const val1 = obj1[key]
+  const val2 = obj2[key]
+  let result = 0
+  if (dayjs(val1).isBefore(dayjs(val2))) {
+    result = type === 0 ? -1 : 0
+  } else if (dayjs(val1).isAfter(dayjs(val2))) {
+    result = type === 0 ? 0 : (-1)
+  }
+  return result
+}
+
+export function postDataSource<T>(
+  dataSource: (Omit<T, 'id' | 'createTime'> & ListItem)[],
+  type: 'delete' | 'add' | 'update' = 'update',
+  options?: { key?: string; params: Partial<(Omit<T, 'id' | 'createTime'> & ListItem)> }
+) {
+  if (type === 'update') {
+    dataSource = dataSource.map((item: any) => {
+      // @ts-ignore
+      if (options?.params?.[options.key] === item[options?.key])
+        return { ...item, ...options?.params }
+      return item
+    })
+  }
+  if (type === 'add') {
+    dataSource.unshift({
+      ...options?.params as (Omit<T, 'id' | 'createTime'> & ListItem),
+      id: dataSource.length + 1
+    })
+  }
+  if (type === 'delete') {
+    // @ts-ignore
+    dataSource = dataSource.filter(item => options?.params?.[options.key] !== item[options?.key])
+  }
+
+  return dataSource
+}

package/template-mobile-vant-cli/mock/utils/util.ts

@@ -0,0 +1,91 @@
+import Mockjs from 'mockjs'
+import { defaultSettings } from '@gx-config'
+import { deepMerge, isObject, getRandomNumber } from '@gx-design-vue/pro-utils'
+import { toLower } from 'lodash-es'
+import { tokenAccount, userList } from '../config/user'
+import userIds from '../config/user/id'
+import { Decrypt, Encrypt } from './crypto'
+
+const { mock, token } = defaultSettings
+
+export function handleRandomImage(width = 50, height = 50) {
+  return `https://picsum.photos/${width}/${height}?random=${getRandomNumber().uuid(10)}`
+}
+
+export function getMobile() {
+  const mobile_prefix = [ '134', '135', '136', '137', '138', '139', '150', '151',
+    '152', '157', '158', '159', '130', '131', '132', '155', '156', '133', '153' ]
+  return getMockRandowList(mobile_prefix) + Mockjs.mock(/\d{8}/)
+}
+
+export function getTokenBuUserId(token) {
+  return Number(Object.keys(tokenAccount).find(item => tokenAccount[item] === token))
+}
+
+export function getToken(headers: RequestHeater): string | undefined {
+  return headers?.[toLower(token.name)]
+}
+
+export function tokenByUserInfo(token): UserDetails {
+  return Decrypt(token)
+}
+
+export function createrToken(token) {
+  const userInfo = userList.find(item => item.user?.userId === getTokenBuUserId(token))
+  return Encrypt({ userId: userInfo?.user?.userId })
+}
+
+export function checkToken(token) {
+  if (mock.checkToken === -1) return true
+  if (token) {
+    if (mock.checkToken === 0) return true
+
+    const useInfo: UserDetails = tokenByUserInfo(token)
+    return useInfo ? useInfo?.userId && userIds.some(item => useInfo?.userId === item.id) : false
+  }
+  return false
+}
+
+export const checkBackDataFun = (
+  config: Partial<ResponseResult>,
+  token: string,
+  merageRoot?: boolean
+): ResponseResult => {
+  let result: Partial<ResponseResult> = {
+    code: 200,
+    data: null
+  }
+  if (isObject(config)) {
+    const { data } = config
+    if (merageRoot) {
+      result = deepMerge(result, config, {
+        omitEmpty: false,
+        omitNil: false
+      })
+    } else {
+      result.data = config
+    }
+    if (data) {
+      result.data = data
+    }
+  } else {
+    result.data = config as any
+  }
+
+  const invaiteToken = checkToken(token)
+
+  return deepMerge<ResponseResult>(result as unknown as ResponseResult, {
+    code: invaiteToken ? 200 : 401,
+    message: invaiteToken
+      ? (result.message || result.code) ? 'success' : 'Request failed'
+      : 'Invalid token!'
+  })
+}
+
+export function getArraryList<T>(length: number, callback: (key: number) => T) {
+  return Array.from({ length }).map((_, key) => callback(key))
+}
+
+export function getMockRandowList<T = any>(data: T[]) {
+  return data[Mockjs.Random.integer(0, data.length - 1)] as T
+}

package/template-mobile-vant-cli/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "gx-vant-mobile",
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "bootstrap": "pnpm i",
+    "dev": "pnpm run start:dev",
+    "start:dev": "cross-env VITE_APP_ENV=dev vite",
+    "start:pro": "cross-env VITE_APP_ENV=pro vite",
+    "build": "vite build",
+    "build:pro": "vite build --mode pro",
+    "report": "cross-env REPORT=true npm run build",
+    "preview": "vite preview",
+    "clean:lib": "rimraf pnpm-lock.yaml && rimraf node_modules",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@gx-design-vue/pro-hooks": "^0.2.0-beta.54",
+    "@gx-design-vue/pro-utils": "^0.2.0-beta.80",
+    "@multiavatar/multiavatar": "^1.0.7",
+    "@vueuse/core": "^13.1.0",
+    "@vueuse/shared": "^13.1.0",
+    "axios": "^1.6.7",
+    "crypto-js": "^4.1.1",
+    "dayjs": "^1.11.13",
+    "lodash-es": "^4.17.21",
+    "pinia": "^3.0.2",
+    "qs": "^6.11.0",
+    "unocss": "^66.1.0-beta.12",
+    "vant": "^4.9.15",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^4.4.0",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "@iconify-json/carbon": "^1.2.5",
+    "@types/lodash-es": "^4.17.10",
+    "@types/mockjs": "^1.0.10",
+    "@types/node": "^22.8.4",
+    "@types/qs": "^6.9.7",
+    "@unocss/preset-rem-to-px": "^0.65.3",
+    "@vant/auto-import-resolver": "^1.2.1",
+    "@vitejs/plugin-legacy": "^6.1.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "autoprefixer": "^10.4.5",
+    "bundle-require": "^5.0.0",
+    "cross-env": "^7.0.3",
+    "husky": "^9.1.6",
+    "less": "^4.1.3",
+    "mockjs": "^1.1.0",
+    "postcss": "^8.4.35",
+    "postcss-html": "^1.6.0",
+    "postcss-less": "^6.0.0",
+    "postcss-mobile-forever": "^4.3.1",
+    "postcss-pxtorem": "^6.0.0",
+    "prettier": "^3.3.3",
+    "rimraf": "^6.0.1",
+    "rollup-plugin-external-globals": "^0.13.0",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "typescript": "^5.3.3",
+    "unplugin-auto-import": "^0.19.0",
+    "unplugin-turbo-console": "^1.10.4",
+    "unplugin-vue-components": "^0.28.0",
+    "vite": "^6.2.6",
+    "vite-plugin-compression": "0.5.1",
+    "vite-plugin-fake-server": "^2.1.4",
+    "vite-plugin-html": "^3.2.2",
+    "vue-tsc": "^2.1.6"
+  }
+}

package/template-mobile-vant-cli/public/css/default.css

@@ -0,0 +1,54 @@
+:root {
+  --van-base-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
+}
+
+body {
+  font-family: var(--van-base-font);
+}
+
+.gx-toast-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  z-index: 9999999999;
+}
+.gx-toast-loading .gx-toast-loading-cont {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-sizing: content-box;
+  width: min(23.467vw, 140.8px);
+  min-height: min(23.467vw, 140.8px);
+  max-width: 70%;
+  padding: min(4.267vw, 25.6px);
+  border-radius: min(2.133vw, 12.8px);
+  background-clip: padding-box;
+  color: #fff;
+  background-color: rgba(58, 58, 58, 0.9);
+  font-size: min(3.733vw, 22.4px);
+  line-height: min(5.333vw, 32px);
+}
+.gx-toast-loading .gx-toast-loading-cont .gx-toast-svg {
+  margin: 0;
+  width: min(8vw, 48px);
+  height: min(8vw, 48px);
+  display: inline-block;
+  animation: spinner-anime 1s linear infinite;
+}
+.gx-toast-loading .gx-toast-loading-cont .gx-toast-svg-text {
+  display: inline-block;
+  margin-top: min(2.133vw, 12.8px);
+}
+
+@keyframes spinner-anime {
+  100% {
+    transform: rotate(360deg);
+  }
+}