@gx-design-vue/create-gx-cli 0.1.3 → 0.1.4

package/template-mobile-vant-cli/build/plugin/viteMock/index.ts

@@ -0,0 +1,69 @@
+(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, ResolvedConfig } from 'vite'
+import { normalizePath } from 'vite'
+import path from 'node:path'
+import type { ViteMockOptions } from './types'
+import { fileExists } from './utils'
+import { createMockServer, requestMiddleware } from './createMockServer'
+
+function getDefaultPath(supportTs = true) {
+  return path.resolve(process.cwd(), `src/main.${supportTs ? 'ts' : 'js'}`)
+}
+
+export function viteMockServe(opt: ViteMockOptions = {}): Plugin {
+  let isDev = false
+  let needSourcemap = false
+  let config: ResolvedConfig
+  let defaultPath = getDefaultPath()
+  if (!fileExists(defaultPath)) {
+    defaultPath = getDefaultPath(false)
+    if (!fileExists(defaultPath)) {
+      defaultPath = ''
+    }
+  }
+
+  const defaultEnter = normalizePath(defaultPath)
+
+  const { injectFile = defaultEnter } = opt
+
+  return {
+    name: 'vite:mock',
+    enforce: 'pre' as const,
+    configResolved(resolvedConfig) {
+      config = resolvedConfig
+      isDev = config.command === 'serve'
+      needSourcemap = !!resolvedConfig.build.sourcemap
+      isDev && createMockServer(opt, config)
+    },
+
+    configureServer: async ({ middlewares }) => {
+      const { enable = isDev } = opt
+      if (!enable) {
+        return
+      }
+      const middleware = await requestMiddleware(opt)
+      middlewares.use(middleware)
+    },
+    transform: (code, id) => {
+      if (isDev || !injectFile || !id.endsWith(injectFile)) {
+        return null
+      }
+
+      const { injectCode = '' } = opt
+
+      return {
+        map: needSourcemap ? this.getCombinedSourcemap() : null,
+        code: `${code}\n${injectCode}`
+      }
+    }
+  }
+}
+
+export * from './types'

package/template-mobile-vant-cli/build/plugin/viteMock/types.ts

@@ -0,0 +1,48 @@
+import { IncomingMessage, ServerResponse } from 'http'
+
+export interface ViteMockOptions {
+  mockPath?: string;
+  configPath?: string;
+  injectFile?: string;
+  injectCode?: string;
+  ignore?: RegExp | ((fileName: string) => boolean);
+  watchFiles?: boolean;
+  enable?: boolean;
+  cors?: boolean;
+  /**
+   * 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 MethodType = 'get' | 'post' | 'put' | 'delete' | 'patch'
+
+export type Recordable<T = any> = Record<string, T>
+
+export declare interface MockMethod {
+  url: string
+  method?: MethodType
+  timeout?: number
+  statusCode?: number
+  response?:
+    | ((
+    this: RespThisType,
+    opt: { url: Recordable; body: Recordable; query: Recordable; headers: Recordable },
+  ) => any)
+    | any
+  rawResponse?: (this: RespThisType, req: IncomingMessage, res: ServerResponse) => void
+}
+
+export interface MockConfig {
+  env: Record<string, any>
+  mode: string
+  command: 'build' | 'serve'
+}

package/template-mobile-vant-cli/build/plugin/viteMock/utils.ts

@@ -0,0 +1,48 @@
+import fs from 'node:fs'
+
+const toString = Object.prototype.toString
+
+export function is(val: unknown, type: string) {
+  return toString.call(val) === `[object ${type}]`
+}
+
+export function fileExists(f: string) {
+  try {
+    fs.accessSync(f, fs.constants.W_OK);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+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 isAbsPath(path: string | undefined) {
+  if (!path) {
+    return false
+  }
+  // Windows 路径格式：C:\ 或 \\ 开头，或已含盘符（D:\path\to\file）
+  if (/^([a-zA-Z]:\\|\\\\|(?:\/|\uFF0F){2,})/.test(path)) {
+    return true
+  }
+  // Unix/Linux 路径格式：/ 开头
+  return /^\/[^/]/.test(path)
+}
+
+export function sleep(time: number) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('')
+    }, time)
+  })
+}

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

@@ -0,0 +1,14 @@
+// #!/usr/bin/env node
+import chalk from 'chalk'
+
+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-vant-cli/eslint.config.js

@@ -0,0 +1,49 @@
+import antFuEslint from '@antfu/eslint-config'
+
+export default antFuEslint({
+  vue: true,
+  vueJsx: false,
+  typescript: true,
+  gitignore: true,
+  markdown: true,
+  ignores: [
+    'src/assets/**/*.js',
+    'build/plugin/viteMock',
+    'public',
+    'tsconfig.*.json',
+    'tsconfig.json'
+  ]
+}, {
+  rules: {
+    'curly': 0,
+    'no-console': 0,
+    'import/order': 0,
+    'style/quote-props': 0,
+    'style/brace-style': 0,
+    'style/comma-dangle': 0,
+    'style/multiline-ternary': 0,
+    'prefer-regex-literals': 0,
+    'antfu/top-level-function': 0,
+    'vue/array-bracket-spacing': 0,
+    'style/array-bracket-spacing': 0,
+    'node/prefer-global/process': 0,
+    'style/indent': 0,
+    'prefer-template': 0,
+    'dot-notation': 0,
+    'no-cond-assign': 0,
+    'no-useless-computed-key': 0,
+    'node/no-deprecated-api': 0,
+    'antfu/consistent-list-newline': 0,
+    'import/no-mutable-exports': 0,
+    'style/member-delimiter-style': 0,
+    'unused-imports/no-unused-imports': 0,
+    'eslint-comments/no-unlimited-disable': 0,
+    'no-async-promise-executor': 0,
+    'unicorn/escape-case': 0,
+    'ts/method-signature-style': 0,
+    'style/no-trailing-spaces': 0,
+    'ts/consistent-type-imports': 0,
+    'style/type-generic-spacing': 0,
+    'prefer-promise-reject-errors': 0
+  }
+})

package/template-mobile-vant-cli/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+    <meta
+      name="viewport"
+      content="width=device-width,viewport-fit=cover,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
+    />
+    <title>vue-vant-mobile</title>
+    <% for (var i in injectLink) { %>
+    <link rel="stylesheet" type="text/css" href="<%= injectLink[i] %>" />
+    <% } %>
+  </head>
+  <body>
+    <div id="app"></div>
+    <% for (var i in injectScript) { %>
+    <script type="text/javascript" src="<%= injectScript[i] %>"></script>
+    <% } %>
+    <script type="module" src="/src/main.ts"></script>
+    <%- injectVlogScript %>
+    <script src="/js/flexible.js"></script>
+  </body>
+</html>

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

@@ -0,0 +1,19 @@
+import { createProdMockServer } from '../build/plugin/viteMock/client'
+
+const modules = import.meta.glob('./datasSource/**/*.ts', { eager: true })
+
+const mockModules: any[] = []
+Object.keys(modules).forEach((key) => {
+  if (key.includes('/_')) {
+    return
+  }
+  if (modules[key] && modules[key]['default'])
+    mockModules.push(...modules[key]['default'])
+})
+
+/**
+ * Used in a production environment. Need to manually import all modules
+ */
+export function setupProdMockServer() {
+  createProdMockServer(mockModules)
+}

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

@@ -0,0 +1,9 @@
+export const builder = (config?: Partial<ResponseResult>) => {
+  const code = config?.code || 200
+  const result: ResponseResult = {
+    ...config,
+    code,
+    msg: config?.msg || code ? 'success' : 'Request failed'
+  }
+  return result
+}

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

@@ -0,0 +1,57 @@
+{
+  "name": "gx-mobile-cli",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "start:pro": "cross-env VITE_APP_ENV=pro vite",
+    "build": "vite build",
+    "build:pro": "vite build --mode pro",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@gx-design-vue/pro-hooks": "^0.2.0-beta.19",
+    "@gx-design-vue/pro-utils": "^0.2.0-beta.26",
+    "@vueuse/core": "^10.7.2",
+    "@vueuse/shared": "^10.7.2",
+    "axios": "^1.6.7",
+    "crypto-js": "^4.1.1",
+    "dayjs": "^1.11.6",
+    "lodash-es": "^4.17.21",
+    "pinia": "2.1.7",
+    "qs": "^6.11.0",
+    "vant": "^4.8.8",
+    "vue": "^3.3.7",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^2.9.0",
+    "@types/lodash-es": "^4.17.4",
+    "@types/node": "^20.11.19",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "autoprefixer": "^10.4.13",
+    "unocss": "^0.58.5",
+    "mockjs": "^1.1.0",
+    "cross-env": "^7.0.3",
+    "connect": "^3.7.0",
+    "path-to-regexp": "^6.2.1",
+    "bundle-require": "^4.0.1",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "postcss": "^8.4.18",
+    "postcss-html": "^1.5.0",
+    "postcss-less": "^6.0.0",
+    "postcss-pxtorem": "^6.0.0",
+    "prettier": "^2.7.1",
+    "typescript": "^5.3.3",
+    "unplugin-auto-import": "^0.11.4",
+    "unplugin-vue-components": "^0.22.9",
+    "vite": "^5.1.4",
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue-tsc": "^1.8.27"
+  }
+}

package/template-mobile-vant-cli/postcss.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    'postcss-pxtorem': {
+      rootValue: 37.5,
+      propList: ['*'],
+    },
+  },
+};

package/template-mobile-vant-cli/prettier.config.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  printWidth: 100,
+  useTabs: false,
+  semi: false,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  bracketSpacing: true,
+  trailingComma: 'none',
+  jsxBracketSameLine: false,
+  jsxSingleQuote: false,
+  arrowParens: 'always',
+  insertPragma: false,
+  requirePragma: false,
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'auto',
+  rangeStart: 0,
+};

package/template-mobile-vant-cli/public/js/flexible.js

@@ -0,0 +1,44 @@
+(function flexible (window, document) {
+  var docEl = document.documentElement
+  var dpr = window.devicePixelRatio || 1
+
+  // adjust body font size
+  function setBodyFontSize () {
+    if (document.body) {
+      document.body.style.fontSize = (12 * dpr) + 'px'
+    }
+    else {
+      document.addEventListener('DOMContentLoaded', setBodyFontSize)
+    }
+  }
+  setBodyFontSize();
+
+  // set 1rem = viewWidth / 10
+  function setRemUnit () {
+    var rem = (docEl.clientWidth < 600 ? docEl.clientWidth : 600) / 10
+    docEl.style.fontSize = rem + 'px'
+  }
+
+  setRemUnit()
+
+  // reset rem unit on page resize
+  window.addEventListener('resize', setRemUnit)
+  window.addEventListener('pageshow', function (e) {
+    if (e.persisted) {
+      setRemUnit()
+    }
+  })
+
+  // detect 0.5px supports
+  if (dpr >= 2) {
+    var fakeBody = document.createElement('body')
+    var testElement = document.createElement('div')
+    testElement.style.border = '.5px solid transparent'
+    fakeBody.appendChild(testElement)
+    docEl.appendChild(fakeBody)
+    if (testElement.offsetHeight === 1) {
+      docEl.classList.add('hairlines')
+    }
+    docEl.removeChild(fakeBody)
+  }
+}(window, document))

package/template-mobile-vant-cli/src/App.vue

@@ -0,0 +1,5 @@
+<template>
+  <div id="gx-pro-mobile">
+    <router-view />
+  </div>
+</template>

package/template-mobile-vant-cli/src/components/PageContainer/ProSkeleton.tsx

@@ -0,0 +1,29 @@
+import type { FunctionalComponent } from 'vue'
+import { Skeleton } from 'vant'
+import styles from './style.module.less'
+
+import 'vant/es/skeleton/style'
+
+const Proskeleton: FunctionalComponent<{ line: number; loading: boolean }> = (props, { slots }) => {
+  const renderMapItem = () => {
+    const show = []
+    for (let i = 0; i < props.line; i += 1) {
+      show.push(
+        <div class={styles.skeletonItem}>
+          <Skeleton row={3} loading />
+        </div>
+      )
+    }
+    return show
+  }
+
+  return (
+    <>
+      {
+        props.loading ? renderMapItem() : <>{ slots.default?.() }</>
+      }
+    </>
+  )
+}
+
+export default Proskeleton

package/template-mobile-vant-cli/src/components/PageContainer/index.tsx

@@ -0,0 +1,115 @@
+import { defineComponent, toRefs, watch } from 'vue'
+import { usePageLoading } from '@gx-mobile/hooks/web'
+import ProSkeleton from './ProSkeleton'
+import styles from './style.module.less'
+import type { SetLoadingParams } from '@gx-mobile/hooks/web/usePageLoading'
+
+export type PageLoadingTpe = 'toast' | 'skeleton'
+
+type ChangeLoadingParams<T> = Omit<SetLoadingParams<T>, 'type'> & {
+  hiddenSlot?: boolean;
+}
+
+const PageContainer = defineComponent({
+  name: 'GProPageContainer',
+  inheritAttrs: false,
+  props: {
+    loading: Boolean as VuePropType<boolean>,
+    hiddenSlot: {
+      type: Boolean as VuePropType<boolean>,
+      default: true
+    },
+    loadingMsg: {
+      type: String as VuePropType<string>,
+      default: '加载中'
+    },
+    loadingType: {
+      type: String as VuePropType<PageLoadingTpe>,
+      default: 'toast'
+    },
+    bgcolor: {
+      type: String as VuePropType<string>,
+      default: '#fafafa'
+    }
+  },
+  emits: [ 'update:loading' ],
+  setup(props, { slots, expose, emit }) {
+    const { loading: loadingRef, loadingType, loadingMsg, hiddenSlot } = toRefs(props)
+
+    const initStatus = ref(true)
+
+    const hiddenSlotRef = ref(props.hiddenSlot)
+
+    const [ loading, setLoading ] = usePageLoading({
+      defaultType: loadingType.value,
+      defaultMessage: loadingMsg.value,
+      defaultLoading: loadingRef.value
+    })
+
+    watch(() => loading.value, (val) => {
+      if (initStatus.value && val)
+        initStatus.value = false
+      emit('update:loading', val)
+    }, {
+      deep: true,
+      immediate: true
+    })
+
+    watch(() => loadingRef.value, (val) => {
+      if (loadingType.value === 'toast') {
+        setLoading({
+          value: val,
+          type: loadingType.value,
+          message: loadingMsg.value
+        })
+      } else if (initStatus.value || !val) {
+        setLoading({
+          value: val,
+          type: loadingType.value,
+          message: loadingMsg.value
+        })
+      }
+    })
+
+    watch(() => hiddenSlot.value, (val) => {
+      hiddenSlotRef.value = val
+    }, {
+      immediate: true
+    })
+
+    const changeLoading = ({
+      value,
+      message,
+      hiddenSlot
+    }: ChangeLoadingParams<boolean>) => {
+      if (loadingType.value === 'toast') {
+        hiddenSlotRef.value = hiddenSlot
+        setLoading({ value, message, type: loadingType.value })
+      }
+    }
+
+    expose({
+      toggleLoading: changeLoading
+    })
+
+    return () => {
+      return (
+        <div class={styles.pageContainer} style={{ backgroundColor: props.bgcolor }}>
+          <div class={styles.pageContainerWrapper}>
+            {
+              loadingType.value === 'skeleton'
+                ? (
+                  <ProSkeleton line={3} loading={loading.value}>
+                    {slots.default?.()}
+                  </ProSkeleton>
+                )
+                : ((!loading.value || !hiddenSlotRef.value) && <>{slots.default?.()}</>)
+            }
+          </div>
+        </div>
+      )
+    }
+  }
+})
+
+export default PageContainer

package/template-mobile-vant-cli/src/components/PageContainer/style.module.less

@@ -0,0 +1,14 @@
+.pageContainer {
+  width: 100%;
+  min-height: 100vh;
+  padding: 15px;
+  background: var(--van-background-3);
+  
+  .pageContainerWrapper {
+    position: relative;
+  }
+  
+  .skeletonItem + .skeletonItem {
+    margin-top: 50px;
+  }
+}

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

@@ -0,0 +1,7 @@
+import PageContainer from '@/components/PageContainer'
+
+const vantDesign = (app) => {
+  app.component('g-pro-page-container', PageContainer)
+}
+
+export default vantDesign

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

@@ -0,0 +1,12 @@
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+
+dayjs.locale('zh-cn')
+
+import vantDesign from './vant-design'
+import gxDesign from './gx-design'
+
+export function setupGlobCommon(app) {
+  gxDesign(app)
+  vantDesign(app)
+}

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

@@ -0,0 +1,4 @@
+const vantDesign = (_app) => {
+}
+
+export default vantDesign

package/template-mobile-vant-cli/src/design/index.less

@@ -0,0 +1,3 @@
+@import './root';
+@import './reset';
+@import './vant';