@gx-design-vue/create-gx-cli 0.1.10 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gx-design-vue/create-gx-cli",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "license": "MIT",
   "description": "a cli to bootstrap gx project",
   "main": "src/index.js",
@@ -30,6 +30,7 @@
   "files": [
     "bin/",
     "src/",
+    "template-gx-design-thin/*",
     "template-mobile-vant-html/*",
     "template-mobile-vant-cli/*"
   ]

package/template-gx-design-thin/.editorconfig

@@ -0,0 +1,19 @@
+root = true
+
+[*]
+charset=utf-8
+end_of_line=lf
+insert_final_newline=true
+indent_style=space
+indent_size=2
+max_line_length = 100
+
+[*.{yml,yaml,json}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

package/template-gx-design-thin/.env

@@ -0,0 +1,4 @@
+VITE_HOME_PAGE=https://gx12358.cn
+VITE_HOME_PAGE_DOC=https://gx12358.cn/doc
+VITE_GITHUB_PAGE=https://github.com/gx12358/vue3-antd-admin
+VITE_GITEE_PAGE=https://gitee.com/gx12358/vue3-antd-admin

package/template-gx-design-thin/.env.development

@@ -0,0 +1,15 @@
+# 实际执行环境 development
+VITE_NODE_ENV= development
+
+# environment 代码环境
+VITE_USE_MODE = development
+
+# 是否开启mock
+VITE_USE_MOCK = true
+
+# 是否删除console
+VITE_DROP_CONSOLE = false
+
+# api前缀
+VITE_BASE_URL=/api
+

package/template-gx-design-thin/.env.production

@@ -0,0 +1,28 @@
+# 项目启动执行环境
+VITE_NODE_ENV= production
+
+# 代码运行环境
+VITE_USE_MODE = production
+
+# 是否开启mock
+VITE_USE_MOCK = true
+
+# 是否删除console
+VITE_DROP_CONSOLE = false
+
+# Whether to enable gzip or brotli compression
+# Optional: gzip | brotli | none
+# If you need multiple forms, you can use `,` to separate
+VITE_BUILD_COMPRESS = 'none'
+
+# 使用压缩时是否删除源文件，默认为false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# 是否使用pwa
+VITE_USE_PWA = false
+
+# 是否为打包后的文件提供传统浏览器兼容性支持
+VITE_LEGACY = false
+
+# api前缀
+VITE_BASE_URL=/mock-server

package/template-gx-design-thin/.eslintignore

@@ -0,0 +1,16 @@
+
+*.sh
+node_modules
+*.md
+*.woff
+*.ttf
+.vscode
+.idea
+dist
+/public
+/docs
+.husky
+.local
+.history
+/bin
+Dockerfile

package/template-gx-design-thin/.prettierignore

@@ -0,0 +1,9 @@
+/dist/*
+.local
+.output.js
+/node_modules/**
+
+**/*.svg
+**/*.sh
+
+/public/*

package/template-gx-design-thin/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 gx12358
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/template-gx-design-thin/README.md

@@ -0,0 +1,112 @@
+<div align="center"> <a href="https://github.com/gx12358/vue3-antd-admin"> <img alt="VbenAdmin Logo" width="200" src="https://gx12358.cn/resource/img/favicon.ico"> </a> <br> <br>
+
+<h1>GX Pro Admin（Ant Design Vue）</h1>
+</div>
+
+## 简介
+
+GX Pro Admin 是一个免费开源的中后台模版。使用了最新的`vue3.0+`,`vite5`,`TypeScript`, `Ant Design Vue4.0+`， `Unocss`等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
+如果大家喜欢的话，给个start！
+
+## 特性
+
+- **最新技术栈**：使用 Vue3、vite5、ant-design-vue4、unocss 等前端前沿技术开发
+- **TypeScript**: 应用程序级 JavaScript 的语言
+- **主题**：可配置定制化的主题
+- **Mock 数据** 内置 Mock 数据方案
+- **权限** 内置完善的动态路由权限生成方案
+- **组件** 二次封装了多个pro企业级的组件
+
+## 预览
+
+- [🚀 pro 版演示地址](https://gx12358.cn/)
+测试账号: admin/gx.design
+
+- [🚀 系统文档地址](https://gx12358.cn/doc/)
+- [🚀 pro 组件文档地址](https://gx12358.cn/procomponents/)
+
+
+## 准备
+
+- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境
+- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
+- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
+- [TypeScript](https://www.typescriptlang.org/) - 熟悉`TypeScript`基本语法
+- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
+- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
+- [Ant-Design-Vue](https://next.antdv.com/components/overview-cn/) - ui 基本使用
+- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
+
+## 安装使用
+
+- 获取项目代码
+
+```bash
+git clone https://gitee.com/gx12358/vite-admin-pro
+```
+
+- 安装依赖
+
+```bash
+cd gx-admin-pro
+
+pnpm install
+
+```
+
+- 运行
+
+```bash
+pnpm run serve
+```
+
+- 打包
+
+```bash
+pnpm run build
+```
+
+## Git 贡献提交规范
+
+- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 
+  - `feat` 增加新功能
+  - `fix` 修复问题/BUG
+  - `style` 代码风格相关无影响运行结果的
+  - `perf` 优化/性能提升
+  - `refactor` 重构
+  - `revert` 撤销修改
+  - `test` 测试相关
+  - `docs` 文档/注释
+  - `chore` 依赖更新/脚手架配置修改等
+  - `workflow` 工作流改进
+  - `ci` 持续集成
+  - `types` 类型定义文件更改
+  - `wip` 开发中
+
+## 浏览器支持
+
+本地开发推荐使用`Chrome 80+` 浏览器
+
+支持现代浏览器, 不支持 IE
+
+## 相关仓库
+
+如果这些插件对你有帮助，可以给一个 star 支持下
+
+- [vite-plugin-html](https://github.com/anncwb/vite-plugin-html) - 用于 html 模版转换及压缩
+- [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression) - 用于打包输出.gz|.brotil 文件
+- [vite-plugin-svg-icons](https://github.com/anncwb/vite-plugin-svg-icons) - 用于快速生成 svg 雪碧图
+
+## 维护者
+
+[@gx12358](https://github.com/gx12358/vue3-antd-admin)
+
+## 交流
+
+`Vue3-Antd-Admin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供 QQ 交流群使用问题欢迎在群内提问。
+
+- QQ 群 `871430530`
+
+## License
+
+[MIT © gx12358-2021](./LICENSE)

package/template-gx-design-thin/build/constant.ts

@@ -0,0 +1 @@
+export const GLOB_CONFIG_FILE_NAME = '_app.config.js'

package/template-gx-design-thin/build/generate/generateModifyVars.ts

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path'
+import { theme } from 'ant-design-vue'
+
+export function generateModifyVars() {
+  const { defaultAlgorithm, defaultSeed } = theme
+
+  const mapToken = defaultAlgorithm(defaultSeed)
+  const modifyVarsParams = {
+    ...mapToken,
+    hack: `true;  @import (reference) "${resolve('src/design/config.less')}";`
+  }
+
+  return modifyVarsParams
+}

package/template-gx-design-thin/build/rollupOptions/index.ts

@@ -0,0 +1,22 @@
+import type { RollupOptions } from 'rollup'
+import externalGlobals from 'rollup-plugin-external-globals'
+import { pathResolve } from '../util'
+import { configManualChunk } from '../vite/optimizer'
+import { getExternalMap } from '../vite/cdn'
+
+export default function (useCdn: boolean) {
+  return {
+    input: {
+      index: pathResolve('index.html')
+    },
+    // 静态资源分类打包
+    output: {
+      manualChunks: configManualChunk,
+      chunkFileNames: 'static/js/[name]-[hash].js',
+      entryFileNames: 'static/js/[name]-[hash].js',
+      assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
+    },
+    external: useCdn ? Object.keys(getExternalMap()) : [],
+    plugins: useCdn ? [ externalGlobals(getExternalMap()) ] : []
+  } as RollupOptions
+}

package/template-gx-design-thin/build/util/hash.ts

@@ -0,0 +1,17 @@
+import { createHash } from 'node:crypto'
+
+function createContentHash(content: string, hashLSize = 12) {
+  const hash = createHash('sha256').update(content)
+  return hash.digest('hex').slice(0, hashLSize)
+}
+
+function strToHex(str: string) {
+  const result: string[] = []
+  for (let i = 0; i < str.length; ++i) {
+    const hex = str.charCodeAt(i).toString(16)
+    result.push((`000${hex}`).slice(-4))
+  }
+  return result.join('').toUpperCase()
+}
+
+export { createContentHash, strToHex }

package/template-gx-design-thin/build/util/index.ts

@@ -0,0 +1,131 @@
+import fs from 'node:fs'
+import path, { resolve } from 'node:path'
+import dotenv from 'dotenv'
+
+export const rootPath = process.cwd()
+
+export function pathResolve(dir: string) {
+  return resolve(process.cwd(), '.', dir)
+}
+
+/**
+ * Whether to generate package preview
+ */
+export function isReportMode(): boolean {
+  return process.env.REPORT === 'true'
+}
+
+// Read all environment variable configuration files to process.env
+export function wrapperEnv(envConf: Recordable): ViteEnv {
+  const ret: any = {}
+
+  for (const envName of Object.keys(envConf)) {
+    let realName = envConf[envName].replace(/\\n/g, '\n')
+    realName = realName === 'true' ? true : realName === 'false' ? false : realName
+
+    ret[envName] = realName
+    process.env[envName] = realName
+  }
+  return ret
+}
+
+/**
+ * 获取当前环境下生效的配置文件名
+ */
+function getConfFiles() {
+  const script = process.env.npm_lifecycle_script
+  const reg = new RegExp('--mode ([a-z]+)')
+  const result = reg.exec(script as string) as any
+  if (result) {
+    const mode = result[1] as string
+    return [ '.env', `.env.${mode}` ]
+  }
+  return [ '.env', '.env.production' ]
+}
+
+/**
+ * Get the environment variables starting with the specified prefix
+ * @param match prefix
+ * @param confFiles ext
+ */
+export function getEnvConfig(confFiles = getConfFiles()): Partial<ViteEnv> {
+  let envConfig: Partial<ViteEnv> = {}
+  confFiles.forEach((item) => {
+    try {
+      const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item)))
+      envConfig = { ...envConfig, ...env }
+    } catch (e) {
+      console.error(`Error in parsing ${item}`, e)
+    }
+  })
+  return envConfig
+}
+
+/**
+ * Get user root directory
+ * @param dir file path
+ */
+export function getRootPath(...dir: string[]) {
+  return path.resolve(process.cwd(), ...dir)
+}
+
+export function getDefaultPath(supportTs = true) {
+  return path.resolve(process.cwd(), `src/main.${supportTs ? 'ts' : 'js'}`)
+}
+
+export function fileExists(f: string) {
+  try {
+    fs.accessSync(f, fs.constants.W_OK)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+function q(t) {
+  return t.reduce((n, e) => n + e)
+}
+
+function Gt(t, n?: number) {
+  if (t === 0)
+    return '0 Bytes'
+  const e = 1024
+  const r = n || 2
+  const o = [ 'Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB' ]
+  const s = Math.floor(Math.log(t) / Math.log(e))
+  return `${Number.parseFloat((t / e ** s).toFixed(r))} ${o[s]}`
+}
+
+const ot = []
+
+export function getPackageSize({ folder, callBack, format = !0 }) {
+  fs.readdir(folder, (err, files) => {
+    if (err)
+      throw err
+
+    let index = 0
+    const callBacks = () => {
+      if (++index === files.length) {
+        callBack(format ? Gt(q(ot)) : q(ot))
+      }
+    }
+
+    files.forEach((p) => {
+      fs.stat(`${folder}/${p}`, (err, stat) => {
+        if (err)
+          throw err
+        if (stat.isFile()) {
+          ot.push(stat.size)
+          callBacks()
+        } else {
+          getPackageSize({
+            folder: `${folder}/${p}`,
+            callBack: callBacks
+          })
+        }
+      })
+    })
+
+    files.length === 0 && callBack(0)
+  })
+}

package/template-gx-design-thin/build/vite/cdn.ts

@@ -0,0 +1,63 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { defaultSettings } from '../../config'
+
+const { cdnUrl, cdnModules } = defaultSettings
+
+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 cdnUrl.replace(/\{name\}/g, data.name)
+    .replace(/\{version\}/g, data.version)
+    .replace(/\{path\}/g, path)
+}
+
+function getCdnModuleFiles() {
+  return cdnModules.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 || []
+    if (!Array.isArray(css) && css) {
+      css = [ css ]
+    }
+
+    return {
+      js: renderUrl({
+        ...m,
+        version
+      }),
+      css
+    }
+  })
+}
+
+export function getExternalMap() {
+  const externalMap = {}
+  cdnModules.forEach((v) => {
+    externalMap[v.name] = v.globalName
+  })
+  return externalMap
+}
+
+export default getCdnModuleFiles()

package/template-gx-design-thin/build/vite/optimizer.ts

@@ -0,0 +1,26 @@
+import type { GetManualChunk } from 'rollup'
+
+const vendorLibs: { match: string[]; output: string }[] = [
+  {
+    match: ['ant-design-vue'],
+    output: 'ant-design-vue',
+  },
+  {
+    match: ['@gx-design-vue/pro-field'],
+    output: 'pro-field',
+  },
+  {
+    match: ['@gx-design-vue/pro-form'],
+    output: 'pro-form',
+  },
+]
+
+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')
+      return reg.test(id)
+    })
+    return matchItem ? matchItem.output : null
+  }
+}

package/template-gx-design-thin/build/vite/plugin/appConfig.ts

@@ -0,0 +1,91 @@
+import colors from 'picocolors'
+import type { PluginOption } from 'vite'
+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-gx-design-thin/build/vite/plugin/autoImport.ts

@@ -0,0 +1,26 @@
+import autoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
+import { defaultSettings } from '../../../config'
+
+const importsModules = [ 'vue', 'vue-router' ] as any
+
+export function createAutoImport() {
+  const useCdnModules = defaultSettings.useCdn && defaultSettings.cdnModules.some(el => importsModules.includes(el.name))
+  return [
+    autoImport({
+      include: [
+        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+        /\.vue$/, /\.vue\?vue/, // .vue
+        /\.md$/ // .md
+      ],
+      imports: useCdnModules ? [] : importsModules,
+      dts: 'types/auto-imports.d.ts',
+      dirs: [ 'src/store' ]
+    }),
+    Components({
+      resolvers: [ AntDesignVueResolver({ importStyle: false, resolveIcons: true }) ],
+      dts: 'types/ant-design-import.d.ts'
+    })
+  ]
+}

package/template-gx-design-thin/build/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
+}