@gx-design-vue/create-gx-cli 0.1.14 → 0.1.16

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

@@ -0,0 +1,65 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { defaultSettings } from '../../../config'
+
+const { cdn } = defaultSettings
+
+const { modules = [], url = '' } = cdn
+
+function getModuleVersion(name: string): string {
+  const pwd = process.cwd()
+  const pkgFile = path.join(pwd, 'node_modules', name, 'package.json')
+  if (fs.existsSync(pkgFile)) {
+    const pkgJson = JSON.parse(fs.readFileSync(pkgFile, 'utf8'))
+    return pkgJson.version
+  }
+
+  return ''
+}
+
+function isFullPath(path: string) {
+  return path.startsWith('http:') || path.startsWith('https:') || path.startsWith('//')
+}
+
+function renderUrl(data: CdnModuleList & {
+  version: string
+}) {
+  const { path } = data
+  if (isFullPath(path))
+    return path
+  return url.replace(/\{name\}/g, data.name)
+    .replace(/\{version\}/g, data.version)
+    .replace(/\{path\}/g, path)
+}
+
+function getCdnModuleFiles() {
+  return modules.map((m) => {
+    const version = getModuleVersion(m.name)
+    if (!version) {
+      throw new Error(`modules: ${m.name} package.json file does not exist`)
+    }
+
+    let css = m.css || [] as string[]
+    if (!Array.isArray(css) && css) {
+      css = [ css ]
+    }
+
+    return {
+      js: renderUrl({
+        ...m,
+        version
+      }),
+      css
+    }
+  })
+}
+
+export function getExternalMap() {
+  const externalMap = {}
+  modules.forEach((v) => {
+    externalMap[v.name] = v.globalName
+  })
+  return externalMap
+}
+
+export default getCdnModuleFiles()

package/template-mobile-vant-cli/{build → internal/vite-config/vite}/optimizer.ts

@@ -4,13 +4,21 @@ const vendorLibs: { match: string[]; output: string }[] = [
   {
     match: ['vant'],
     output: 'vant',
+  },
+  {
+    match: ['crypto-js'],
+    output: 'crypto-js',
+  },
+  {
+    match: ['lodash-es'],
+    output: 'lodash-es',
   }
 ]
 
 export const configManualChunk: GetManualChunk = (id: string) => {
   if (/[\\/]node_modules[\\/]/.test(id)) {
     const matchItem = vendorLibs.find((item) => {
-      const reg = new RegExp(`[\\/]node_modules[\\/]_?(${item.match.join('|')})(.*)`, 'ig')
+      const reg = new RegExp(`[\\/]node_modules[\\/]_?(${item.match.join('|')})(.*)`, 'gi')
       return reg.test(id)
     })
     return matchItem ? matchItem.output : null

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

@@ -0,0 +1,91 @@
+import type { PluginOption } from 'vite'
+import colors from 'picocolors'
+import { readPackageJSON } from 'pkg-types'
+
+import { getEnvConfig, rootPath } from '../../util'
+import { createContentHash, strToHex } from '../../util/hash'
+
+const GLOBAL_CONFIG_FILE_NAME = '_app.config.js'
+const PLUGIN_NAME = 'app-config'
+
+async function createAppConfigPlugin({
+  isBuild
+}: {
+  isBuild: boolean;
+}): Promise<PluginOption> {
+  let publicPath: string
+  let source: string
+  if (!isBuild) {
+    return {
+      name: PLUGIN_NAME
+    }
+  }
+  const { version = '' } = await readPackageJSON(rootPath)
+
+  return {
+    name: PLUGIN_NAME,
+    async configResolved(_config) {
+      const appTitle = _config?.env?.VITE_GLOB_APP_TITLE ?? ''
+      publicPath = _config.base
+      source = await getConfigSource(appTitle)
+    },
+    async transformIndexHtml(html) {
+      publicPath = publicPath.endsWith('/') ? publicPath : `${publicPath}/`
+
+      const appConfigSrc = `${
+        publicPath || '/'
+      }${GLOBAL_CONFIG_FILE_NAME}?v=${version}-${createContentHash(source)}`
+
+      return {
+        html,
+        tags: [
+          {
+            tag: 'script',
+            attrs: {
+              src: appConfigSrc
+            }
+          }
+        ]
+      }
+    },
+    async generateBundle() {
+      try {
+        this.emitFile({
+          type: 'asset',
+          fileName: GLOBAL_CONFIG_FILE_NAME,
+          source
+        })
+      } catch (error) {
+        console.log(
+          colors.red(`configuration file configuration file failed to package:\n${error}`)
+        )
+      }
+    }
+  }
+}
+
+/**
+ * Get the configuration file variable name
+ * @param env
+ */
+const getVariableName = (title: string) => {
+  return `__PRODUCTION__${strToHex(title) || '__APP'}__CONF__`.toUpperCase().replace(/\s/g, '')
+}
+
+async function getConfigSource(appTitle: string) {
+  const config = await getEnvConfig()
+  const variableName = getVariableName(appTitle)
+  const windowVariable = `window.${variableName}`
+  // Ensure that the variable will not be modified
+  let source = `${windowVariable}=${JSON.stringify(config)};`
+  source += `
+    Object.freeze(${windowVariable});
+    Object.defineProperty(window, "${variableName}", {
+      configurable: false,
+      writable: false,
+    });
+  `.replace(/\s/g, '')
+  return source
+}
+
+export { createAppConfigPlugin }

package/template-mobile-vant-cli/{build → internal/vite-config/vite}/plugin/autoImport.ts

@@ -1,10 +1,14 @@
+import { VantResolver } from '@vant/auto-import-resolver'
 import autoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
-import { VantResolver } from 'unplugin-vue-components/resolvers'
+import { defaultSettings } from '../../../../config'
 
 const importsModules = [ 'vue', 'vue-router' ] as any
 
+const { modules = [], use } = defaultSettings.cdn
+
 export function createAutoImport() {
+  const useCdnModules = use && modules.some(el => importsModules.includes(el.name))
   return [
     autoImport({
       include: [
@@ -12,13 +16,13 @@ export function createAutoImport() {
         /\.vue$/, /\.vue\?vue/, // .vue
         /\.md$/ // .md
       ],
-      imports: importsModules,
+      imports: useCdnModules ? [] : importsModules,
       dts: 'types/auto-imports.d.ts',
       dirs: [ 'src/store' ]
     }),
     Components({
       resolvers: [ VantResolver() ],
-      dts: 'types/plugins-auto-import.d.ts'
+      dts: 'types/vant-import.d.ts'
     })
   ]
 }

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

@@ -0,0 +1,31 @@
+import type { Plugin } from 'vite'
+
+import compressPlugin from 'vite-plugin-compression'
+
+export function configCompressPlugin(
+  compress: 'gzip' | 'brotli' | 'none',
+  deleteOriginFile = false
+): Plugin | Plugin[] {
+  const compressList = compress.split(',')
+
+  const plugins: Plugin[] = []
+
+  if (compressList.includes('gzip')) {
+    plugins.push(
+      compressPlugin({
+        ext: '.gz',
+        deleteOriginFile
+      })
+    )
+  }
+  if (compressList.includes('brotli')) {
+    plugins.push(
+      compressPlugin({
+        ext: '.br',
+        algorithm: 'brotliCompress',
+        deleteOriginFile
+      })
+    )
+  }
+  return plugins
+}

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

@@ -0,0 +1,32 @@
+import type { PluginOption } from 'vite'
+import { createHtmlPlugin } from 'vite-plugin-html'
+
+import { defaultSettings } from '../../../../config'
+import cdnModules from '../cdn'
+
+const { cdn, system } = defaultSettings
+
+const startLoadingCss = system.appInit.loading ? [ '/css/default.css' ] : []
+
+export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
+  const htmlPlugin: PluginOption[] = createHtmlPlugin({
+    minify: isBuild,
+    inject: {
+      // Inject data into ejs template
+      data: {
+        VUE_APP_TITLE: system.title,
+        injectVlogScript: env.VITE_USE_V_CONSOLE
+          ? `<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script><script>var vConsole = new window.VConsole();</script>`
+          : '',
+        injectAppContent: system.appInit.loading
+          ? `<div class="gx-toast-loading"><div class="gx-toast-loading-cont"><span class="gx-toast-svg"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="gx-toast-svg-text">${system.appInit.loading?.text}</span></div></div>`
+          : '',
+        injectScript: cdn.use && isBuild ? cdnModules.map(e => e.js).filter(el => el) : [],
+        injectLink: cdn.use && isBuild
+          ? cdnModules.map(e => e.css).filter(el => el).concat(startLoadingCss as string[])
+          : startLoadingCss
+      }
+    }
+  })
+  return htmlPlugin
+}

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

@@ -0,0 +1,74 @@
+import type { PluginOption } from 'vite'
+
+import legacy from '@vitejs/plugin-legacy'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import Unocss from 'unocss/vite'
+import TurboConsole from 'unplugin-turbo-console/vite'
+// @ts-ignore
+import { vitePluginFakeServer } from 'vite-plugin-fake-server'
+
+import { createAppConfigPlugin } from './appConfig'
+import { createAutoImport } from './autoImport'
+import { configCompressPlugin } from './compress'
+import { configHtmlPlugin } from './html'
+import { configVisualizerConfig } from './visualizer'
+import viteNotice from './viteNotice'
+
+export async function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
+  const {
+    VITE_APP_ENV,
+    VITE_USE_MOCK,
+    VITE_LEGACY,
+    VITE_BUILD_COMPRESS,
+    VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE
+  } = viteEnv
+
+  const isDev = VITE_APP_ENV === 'dev'
+
+  const vitePlugins: PluginOption[] = [
+    // have to
+    vue(),
+    // have to
+    vueJsx()
+  ]
+
+  // vite-plugin-app-info
+  vitePlugins.push(await createAppConfigPlugin({ isBuild }))
+  // vite-plugin-windicss
+  vitePlugins.push(Unocss())
+
+  // unplugin-turbo-console
+  isDev && vitePlugins.push(TurboConsole())
+  // @vitejs/plugin-legacy
+  VITE_LEGACY && isBuild && vitePlugins.push(legacy({
+    // 设置目标浏览器，browserslist 配置语法
+    targets: ['Android >= 7', 'chrome < 60', 'edge < 15'],
+  }))
+  // vite-plugin-html
+  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild))
+  // vite-plugin-build-info
+  vitePlugins.push(await viteNotice())
+  // vite-plugin-mock
+  const useMock = isDev || VITE_USE_MOCK
+  useMock && vitePlugins.push(vitePluginFakeServer({
+    include: 'mock/routers',
+    enableProd: VITE_USE_MOCK
+  }),)
+
+  // rollup-plugin-visualizer
+  vitePlugins.push(configVisualizerConfig())
+
+  // unplugin-auto-import/vite
+  vitePlugins.push(createAutoImport())
+
+  // The following plugins only work in the production environment
+  if (isBuild) {
+    // rollup-plugin-gzip
+    vitePlugins.push(
+      configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE)
+    )
+  }
+
+  return vitePlugins
+}

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
+    })
+  }
+])