@gx-design-vue/create-gx-cli 0.0.4 → 0.0.5

package/template-design-pro/build/vite/plugin/vite-plugin-mock/createMockServer.ts

@@ -0,0 +1,303 @@
+import type { MockMethod } from '/types/mock'
+import type {
+  Recordable,
+  ViteMockOptions,
+  NodeModuleWithCompile,
+  RespThisType,
+} from './types'
+
+import path from 'path'
+import fs from 'fs'
+import chokidar from 'chokidar'
+import chalk from 'chalk'
+import url from 'url'
+import fg from 'fast-glob'
+import Mock from 'mockjs'
+import { build } from 'esbuild'
+import { pathToRegexp, match } from 'path-to-regexp'
+import { isArray, isFunction, sleep, isRegExp } from './utils'
+// @ts-ignore
+import { IncomingMessage, NextHandleFunction } from 'connect'
+import module from 'module'
+
+export let mockData: MockMethod[] = []
+
+export async function createMockServer(
+  opt: ViteMockOptions = { mockPath: 'mock', configPath: 'vite.mock.config' },
+) {
+  opt = {
+    mockPath: 'mock',
+    watchFiles: true,
+    supportTs: true,
+    configPath: 'vite.mock.config.ts',
+    logger: true,
+    ...opt,
+  }
+
+  if (mockData.length > 0) return
+  mockData = await getMockConfig(opt)
+  await createWatch(opt)
+}
+
+// request match
+export async function requestMiddleware(opt: ViteMockOptions) {
+  const { logger = true } = opt
+  const middleware: NextHandleFunction = async (req, res, next) => {
+    let queryParams: {
+      query?: {
+        [key: string]: any
+      }
+      pathname?: string | null
+    } = {}
+
+    if (req.url) {
+      queryParams = url.parse(req.url, true)
+    }
+
+    const reqUrl = queryParams.pathname
+
+    const matchRequest = mockData.find((item) => {
+      if (!reqUrl || !item || !item.url) {
+        return false
+      }
+      if (item.method && item.method.toUpperCase() !== req.method) {
+        return false
+      }
+      return pathToRegexp(item.url).test(reqUrl)
+    })
+
+    if (matchRequest) {
+      const isGet = req.method && req.method.toUpperCase() === 'GET'
+      const { response, rawResponse, timeout, statusCode, url } = matchRequest
+
+      if (timeout) {
+        await sleep(timeout)
+      }
+
+      const urlMatch = match(url, { decode: decodeURIComponent })
+
+      let query = queryParams.query
+      if (reqUrl) {
+        if ((isGet && JSON.stringify(query) === '{}') || !isGet) {
+          const params = (urlMatch(reqUrl) as any).params
+          if (JSON.stringify(params) !== '{}') {
+            query = (urlMatch(reqUrl) as any).params || {}
+          } else {
+            query = queryParams.query || {}
+          }
+        }
+      }
+
+      const self: RespThisType = { req, res, parseJson: parseJson.bind(null, req) }
+      if (isFunction(rawResponse)) {
+        await rawResponse.bind(self)(req, res)
+      } else {
+        const body = await parseJson(req)
+        res.setHeader('Content-Type', 'application/json')
+        res.statusCode = statusCode || 200
+        const mockResponse = isFunction(response)
+          ? response.bind(self)({ url: req.url, body, query, headers: req.headers })
+          : response
+        res.end(JSON.stringify(Mock.mock(mockResponse)))
+      }
+
+      logger && loggerOutput('request invoke', req.url!)
+      return
+    }
+    next()
+  }
+  return middleware
+}
+
+// create watch mock
+function createWatch(opt: ViteMockOptions) {
+  const { configPath, logger, watchFiles } = opt
+
+  if (!watchFiles) {
+    return
+  }
+
+  const { absConfigPath, absMockPath } = getPath(opt)
+
+  if (process.env.VITE_DISABLED_WATCH_MOCK === 'true') {
+    return
+  }
+
+  const watchDir = []
+  const exitsConfigPath = fs.existsSync(absConfigPath)
+
+  exitsConfigPath && configPath ? watchDir.push(absConfigPath) : watchDir.push(absMockPath)
+
+  const watcher = chokidar.watch(watchDir, {
+    ignoreInitial: true,
+  })
+
+  watcher.on('all', async (event, file) => {
+    logger && loggerOutput(`mock file ${event}`, file)
+    mockData = await getMockConfig(opt)
+  })
+}
+
+// clear cache
+function cleanRequireCache(opt: ViteMockOptions) {
+  if (!require.cache) {
+    return
+  }
+  const { absConfigPath, absMockPath } = getPath(opt)
+  Object.keys(require.cache).forEach((file) => {
+    if (file === absConfigPath || file.indexOf(absMockPath) > -1) {
+      delete require.cache[file]
+    }
+  })
+}
+
+function parseJson(req: IncomingMessage): Promise<Recordable> {
+  return new Promise((resolve) => {
+    let body = ''
+    let jsonStr = ''
+    req.on('data', function (chunk) {
+      body += chunk
+    })
+    req.on('end', function () {
+      try {
+        jsonStr = JSON.parse(body)
+      } catch (err) {
+        jsonStr = ''
+      }
+      resolve(jsonStr as any)
+      return
+    })
+  })
+}
+
+// load mock .ts files and watch
+async function getMockConfig(opt: ViteMockOptions) {
+  cleanRequireCache(opt)
+  const { absConfigPath, absMockPath } = getPath(opt)
+  const { ignore, configPath, logger } = opt
+
+  let ret: MockMethod[] = []
+
+  if (configPath && fs.existsSync(absConfigPath)) {
+    logger && loggerOutput(`load mock data from`, absConfigPath)
+    ret = await resolveModule(absConfigPath)
+    return ret
+  }
+
+  const mockFiles = fg
+    .sync(`**/*.{ts,js}`, {
+      cwd: absMockPath,
+    })
+    .filter((item) => {
+      if (!ignore) {
+        return true
+      }
+      if (isFunction(ignore)) {
+        return ignore(item)
+      }
+      if (isRegExp(ignore)) {
+        return !ignore.test(path.basename(item))
+      }
+      return true
+    })
+  try {
+    ret = []
+    const resolveModulePromiseList = []
+
+    for (let index = 0; index < mockFiles.length; index++) {
+      const mockFile = mockFiles[index]
+      resolveModulePromiseList.push(resolveModule(path.join(absMockPath, mockFile)))
+    }
+
+    const loadAllResult = await Promise.all(resolveModulePromiseList)
+    for (const resultModule of loadAllResult) {
+      let mod = resultModule
+      if (!isArray(mod)) {
+        mod = [mod]
+      }
+      ret = [...ret, ...mod]
+    }
+  } catch (error) {
+    loggerOutput(`mock reload error`, error)
+    ret = []
+  }
+  return ret
+}
+
+// Inspired by vite
+// support mock .ts files
+async function resolveModule(p: string): Promise<any> {
+  const result = await build({
+    entryPoints: [p],
+    outfile: 'out.js',
+    write: false,
+    platform: 'node',
+    bundle: true,
+    format: 'cjs',
+    metafile: true,
+    target: 'es2015',
+  })
+  const { text } = result.outputFiles[0]
+
+  return await loadConfigFromBundledFile(p, text)
+}
+
+// get custom config file path and mock dir path
+function getPath(opt: ViteMockOptions) {
+  const { mockPath, configPath } = opt
+  const cwd = process.cwd()
+  const absMockPath = path.join(cwd, mockPath || '')
+  const absConfigPath = path.join(cwd, configPath || '')
+  return {
+    absMockPath,
+    absConfigPath,
+  }
+}
+
+function loggerOutput(title: string, msg: string, type: 'info' | 'error' = 'info') {
+  const tag =
+    type === 'info' ? chalk.cyan.bold(`[vite:mock]`) : chalk.red.bold(`[vite:mock-server]`)
+  return console.log(
+    `${chalk.dim(new Date().toLocaleTimeString())} ${tag} ${chalk.green(title)} ${chalk.dim(msg)}`,
+  )
+}
+
+// Parse file content
+export async function loadConfigFromBundledFile(fileName: string, bundledCode: string) {
+  const extension = path.extname(fileName)
+
+  // @ts-expect-error
+  const extensions = module.Module._extensions
+  let defaultLoader: any
+  const isJs = extension === '.js'
+  if (isJs) {
+    defaultLoader = extensions[extension]!
+  }
+
+  extensions[extension] = (module: NodeModule, filename: string) => {
+    if (filename === fileName) {
+      (module as NodeModuleWithCompile)._compile(bundledCode, filename)
+    } else {
+      if (!isJs) {
+        extensions[extension]!(module, filename)
+      } else {
+        defaultLoader(module, filename)
+      }
+    }
+  }
+  let config
+  try {
+    if (isJs && require && require.cache) {
+      delete require.cache[fileName]
+    }
+    const raw = require(fileName)
+    config = raw.__esModule ? raw.default : raw
+    if (defaultLoader && isJs) {
+      extensions[extension] = defaultLoader
+    }
+  } catch (error) {
+    console.error(error)
+  }
+
+  return config
+}

package/template-design-pro/build/vite/plugin/vite-plugin-mock/createProdMockServer.ts

@@ -0,0 +1,93 @@
+/* eslint-disable */
+import mockJs from 'mockjs'
+import { pathToRegexp } from 'path-to-regexp'
+
+const Mock = mockJs as any
+export function createProdMockServer(mockList: any[]) {
+  Mock.XHR.prototype.__send = Mock.XHR.prototype.send
+  Mock.XHR.prototype.send = function () {
+    if (this.custom.xhr) {
+      this.custom.xhr.withCredentials = this.withCredentials || false
+
+      if (this.responseType) {
+        this.custom.xhr.responseType = this.responseType
+      }
+    }
+    if (this.custom.requestHeaders) {
+      const headers: any = {}
+      for (let k in this.custom.requestHeaders) {
+        headers[k.toString().toLowerCase()] = this.custom.requestHeaders[k]
+      }
+      this.custom.options = Object.assign({}, this.custom.options, { headers })
+    }
+    this.__send.apply(this, arguments)
+  }
+
+  Mock.XHR.prototype.proxy_open = Mock.XHR.prototype.open
+
+  Mock.XHR.prototype.open = function () {
+    let responseType = this.responseType
+    this.proxy_open(...arguments)
+    if (this.custom.xhr) {
+      if (responseType) {
+        this.custom.xhr.responseType = responseType
+      }
+    }
+  }
+
+  for (const { url, method, response, timeout } of mockList) {
+    __setupMock__(timeout)
+    Mock.mock(
+      pathToRegexp(url, undefined, { end: false }),
+      method || 'get',
+      __XHR2ExpressReqWrapper__(response),
+    )
+  }
+}
+
+function __param2Obj__(url: string) {
+  const search = url.split('?')[1]
+  if (!search) {
+    return {}
+  }
+  return JSON.parse(
+    '{"' +
+    decodeURIComponent(search)
+      .replace(/"/g, '\\"')
+      .replace(/&/g, '","')
+      .replace(/=/g, '":"')
+      .replace(/\+/g, ' ') +
+    '"}',
+  )
+}
+
+function __XHR2ExpressReqWrapper__(handle: (d: any) => any) {
+  return function (options: any) {
+    let result = null
+    if (typeof handle === 'function') {
+      const { body, type, url, headers } = options
+
+      let b = body
+      try {
+        b = JSON.parse(body)
+      } catch {}
+      result = handle({
+        method: type,
+        body: b,
+        query: __param2Obj__(url),
+        headers,
+      })
+    } else {
+      result = handle
+    }
+
+    return Mock.mock(result)
+  }
+}
+
+function __setupMock__(timeout = 0) {
+  timeout &&
+  Mock.setup({
+    timeout,
+  })
+}

package/template-design-pro/build/vite/plugin/vite-plugin-mock/index.ts

@@ -0,0 +1,68 @@
+(async () => {
+  try {
+    await import('mockjs')
+  } catch (e) {
+    throw new Error('vite-plugin-vue-mock requires mockjs to be present in the dependency tree.')
+  }
+})()
+
+import type { Plugin } from 'vite'
+import { ResolvedConfig, normalizePath } from 'vite'
+import type { ViteMockOptions } from './types'
+import { createMockServer, requestMiddleware } from './createMockServer'
+import { getDefaultPath, fileExists } from '../../../utils'
+
+export function viteMockServe(opt: ViteMockOptions = {}): Plugin {
+  let defaultPath = getDefaultPath()
+  if (!fileExists(defaultPath)) {
+    defaultPath = getDefaultPath(false)
+    if (!fileExists(defaultPath)) {
+      defaultPath = ''
+    }
+  }
+
+  const defaultEnter = normalizePath(defaultPath)
+  const { injectFile = defaultEnter } = opt
+
+  let isDev = false
+  let config: ResolvedConfig
+  let needSourcemap = false
+
+  return {
+    name: 'vite:mock',
+    enforce: 'pre',
+    configResolved(resolvedConfig) {
+      config = resolvedConfig
+      isDev = config.command === 'serve'
+      needSourcemap = !!resolvedConfig.build.sourcemap
+      isDev && createMockServer(opt)
+    },
+
+    configureServer: async ({ middlewares }) => {
+      const { localEnabled = isDev } = opt
+      if (!localEnabled) {
+        return
+      }
+      const middleware = await requestMiddleware(opt)
+      middlewares.use(middleware)
+    },
+
+    async transform(code: string, id: string) {
+      if (isDev || !injectFile || !id.endsWith(injectFile)) {
+        return null
+      }
+
+      const { prodEnabled = true, injectCode = '' } = opt
+      if (!prodEnabled) {
+        return null
+      }
+
+      return {
+        map: needSourcemap ? this.getCombinedSourcemap() : null,
+        code: `${code}\n${injectCode}`
+      }
+    }
+  }
+}
+
+export * from './types'

package/template-design-pro/build/vite/plugin/vite-plugin-mock/types.ts

@@ -0,0 +1,30 @@
+import type { IncomingMessage, ServerResponse } from 'http'
+
+export interface ViteMockOptions {
+  mockPath?: string
+  configPath?: string
+  ignore?: RegExp | ((fileName: string) => boolean)
+  watchFiles?: boolean
+  localEnabled?: boolean
+  prodEnabled?: boolean
+  injectFile?: string
+  injectCode?: string
+  /**
+   * Automatic recognition, no need to configure again
+   * @deprecated Deprecated after 2.8.0
+   */
+  supportTs?: boolean
+  logger?: boolean
+}
+
+export interface RespThisType {
+  req: IncomingMessage
+  res: ServerResponse
+  parseJson: () => any
+}
+
+export type Recordable<T = any> = Record<string, T>
+
+export interface NodeModuleWithCompile extends NodeModule {
+  _compile(code: string, filename: string): any
+}

package/template-design-pro/build/vite/plugin/vite-plugin-mock/utils.ts

@@ -0,0 +1,26 @@
+const toString = Object.prototype.toString
+
+export function is(val: unknown, type: string) {
+  return toString.call(val) === `[object ${type}]`
+}
+
+// eslint-disable-next-line
+export function isFunction<T = Function>(val: unknown): val is T {
+  return is(val, 'Function') || is(val, 'AsyncFunction')
+}
+
+export function isArray(val: any): val is Array<any> {
+  return val && Array.isArray(val)
+}
+
+export function isRegExp(val: unknown): val is RegExp {
+  return is(val, 'RegExp')
+}
+
+export function sleep(time: number) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('')
+    }, time)
+  })
+}

package/template-design-pro/commitlint.config.js

@@ -0,0 +1,32 @@
+module.exports = {
+  ignores: [(commit) => commit.includes('init')],
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'body-leading-blank': [2, 'always'],
+    'footer-leading-blank': [1, 'always'],
+    'header-max-length': [2, 'always', 108],
+    'subject-empty': [2, 'never'],
+    'type-empty': [2, 'never'],
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'perf',
+        'style',
+        'docs',
+        'test',
+        'refactor',
+        'build',
+        'ci',
+        'chore',
+        'revert',
+        'wip',
+        'workflow',
+        'types',
+        'release',
+      ],
+    ],
+  },
+};

package/template-design-pro/config/config.ts

@@ -0,0 +1,14 @@
+import type { configSeting } from '/types/config'
+import theme from './default/theme'
+import network from './default/network'
+import animate from './default/animate'
+import defaultSettings from './default/defaultSettings'
+
+export * from './default/proxy'
+
+export default {
+  theme,
+  network,
+  animate,
+  defaultSettings
+} as configSeting

package/template-design-pro/config/default/animate.ts

@@ -0,0 +1,30 @@
+import type { animateConfig } from '/types/config'
+
+const direct_s = [ 'left', 'right' ]
+const direct_1 = [ 'left', 'right', 'down', 'up' ]
+const direct_1_b = [ 'downBig', 'upBig', 'leftBig', 'rightBig' ]
+const direct_2 = [ 'topLeft', 'bottomRight', 'topRight', 'bottomLeft' ]
+const direct_3 = [ 'downLeft', 'upRight', 'downRight', 'upLeft' ]
+// animate.css 配置
+const animateSeting: animateConfig = {
+  preset: [
+    //预设动画配置
+    { name: 'back', alias: '渐近', directions: direct_1 },
+    { name: 'bounce', alias: '弹跳', directions: direct_1.concat('default') },
+    {
+      name: 'fade',
+      alias: '淡化',
+      directions: direct_1
+        .concat(direct_1_b)
+        .concat(direct_2)
+        .concat('default')
+    },
+    { name: 'flip', alias: '翻转', directions: [ 'x', 'y' ] },
+    { name: 'lightSpeed', alias: '光速', directions: direct_s },
+    { name: 'rotate', alias: '旋转', directions: direct_3.concat('default') },
+    { name: 'roll', alias: '翻滚', directions: [ 'default' ] },
+    { name: 'zoom', alias: '缩放', directions: direct_1.concat('default') },
+    { name: 'slide', alias: '滑动', directions: direct_1 }
+  ]
+}
+export default animateSeting

package/template-design-pro/config/default/defaultSettings.ts

@@ -0,0 +1,75 @@
+/**
+ * @description 导出默认通用配置
+ */
+import type { settingConfig } from '/types/config'
+
+const defaultSettings: settingConfig = {
+  //开发以及部署时的URL，hash模式时在不确定二级目录名称的情况下建议使用""代表相对路径或者"/二级目录/"，history模式默认使用"/"或者"/二级目录/"
+  publicPath: './',
+  //生产环境构建文件的目录名
+  outputDir: 'dist',
+  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
+  assetsDir: 'assets',
+  //标题 （包括初次加载雪花屏的标题 页面的标题 浏览器的标题）
+  title: 'GX Pro Admin',
+  //短标题
+  shortName: 'gx_pro_admin',
+  //标题分隔符
+  titleSeparator: ' - ',
+  //标题是否反转 如果为false:"page - title"，如果为ture:"title - page"
+  titleReverse: false,
+  //是否开启水印
+  waterMark: true,
+  //水印字符
+  waterMarkTitle: 'GX Pro Admin',
+  //滚动区域选择器
+  viewScrollRoot: '#gx-pro-admin>.gx-scrollbar>.gx-scrollbar-wrap',
+  //开启cdn
+  useCdn: true,
+  //开启proxy
+  useProxy: true,
+  // proxy target
+  proxyTarget: 'http://127.0.0.1:3000',
+  // 接口前缀
+  requestPrefix: '/api',
+  //开发环境端口号
+  devPort: 8080,
+  //pro版本copyright可随意修改
+  copyright: 'gx12358 2539306317@qq.com',
+  //缓存路由的最大数量
+  keepAliveMaxNum: 99,
+  //初次页面加载时间
+  routerLoadTime: 200,
+  //路由模式，可选值为 browser 或 hash
+  routerMode: 'hash',
+  //不经过token校验的路由
+  routesWhiteList: [ '/user/login', '/user/register', '/exception/404', '/exception/403' ],
+  //加载时显示文字
+  loadingText: '正在加载中...',
+  //token名称
+  tokenName: 'Authorization',
+  //token在localStorage、sessionStorage、cookie存储的key的名称
+  tokenTableName: 'GxAccessToken',
+  //token存储位置localStorage sessionStorage cookie
+  storage: 'localStorage',
+  //token失效回退到登录页时是否记录本次的路由
+  recordRoute: false,
+  //是否显示logo，不显示时设置false，显示时请填写remixIcon图标名称，暂时只支持设置remixIcon
+  logo: 'vuejs-fill',
+  //是否开启登录拦截
+  loginInterception: true,
+  //是否开启登录RSA加密
+  loginRSA: false,
+  //authentication（前端导出路由）和all（后端导出路由）两种方式
+  authentication: 'all',
+  //是否开启roles字段进行角色权限控制（如果是all模式后端完全处理角色并进行json组装，可设置false不处理路由中的roles字段）
+  rolesControl: true,
+  //vertical gallery comprehensive common布局时是否只保持一个子菜单的展开
+  uniqueOpened: false,
+  //vertical布局时默认展开的菜单path，使用逗号隔开建议只展开一个
+  defaultOpeneds: [ '' ],
+  //需要加loading层的请求，防止重复提交
+  debounce: [ 'doEdit' ]
+}
+
+export default defaultSettings

package/template-design-pro/config/default/network.ts

@@ -0,0 +1,16 @@
+/**
+ * @description 导出默认网路配置
+ **/
+import type { networkConfig } from '/types/config'
+
+const networkSetting: networkConfig = {
+  //配后端数据的接收方式application/json;charset=UTF-8 或 application/x-www-form-urlencoded;charset=UTF-8
+  contentType: 'application/json;charset=UTF-8',
+  //消息框消失时间
+  messageDuration: 3000,
+  //最长请求时间
+  requestTimeout: 10000,
+  //操作正常code，支持String、Array、int多种类型
+  successCode: [ 200, 0 ]
+}
+export default networkSetting