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

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

@@ -1,57 +1,74 @@
 {
-  "name": "gx-mobile-cli",
+  "name": "gx-vant-mobile",
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "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",
-    "preview": "vite preview"
+    "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.20",
-    "@gx-design-vue/pro-utils": "^0.2.0-beta.28",
-    "@vueuse/core": "^10.7.2",
-    "@vueuse/shared": "^10.7.2",
+    "@gx-design-vue/pro-hooks": "^0.2.0-beta.43",
+    "@gx-design-vue/pro-utils": "^0.2.0-beta.61",
+    "@multiavatar/multiavatar": "^1.0.7",
+    "@vueuse/core": "^12.0.0",
+    "@vueuse/shared": "^12.0.0",
     "axios": "^1.6.7",
     "crypto-js": "^4.1.1",
-    "dayjs": "^1.11.6",
+    "dayjs": "^1.11.13",
     "lodash-es": "^4.17.21",
-    "pinia": "2.1.7",
+    "pinia": "^2.2.6",
     "qs": "^6.11.0",
-    "vant": "^4.8.8",
-    "unocss": "^0.58.5",
-    "vue": "^3.5.0",
-    "vue-router": "^4.1.6"
+    "unocss": "^0.65.1",
+    "vant": "^4.9.15",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   },
   "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",
+    "@antfu/eslint-config": "^3.11.2",
+    "@types/mockjs": "^1.0.10",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "@iconify-json/carbon": "^1.2.5",
+    "@types/lodash-es": "^4.17.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.0.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
     "mockjs": "^1.1.0",
+    "autoprefixer": "^10.4.5",
+    "bundle-require": "^5.0.0",
     "cross-env": "^7.0.3",
-    "connect": "^3.7.0",
-    "path-to-regexp": "^6.2.1",
-    "bundle-require": "^4.0.1",
+    "husky": "^9.1.6",
     "less": "^4.1.3",
-    "less-loader": "^11.1.0",
-    "postcss": "^8.4.18",
-    "postcss-html": "^1.5.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": "^2.7.1",
+    "prettier": "^3.3.3",
+    "rimraf": "^6.0.1",
+    "rollup-plugin-external-globals": "^0.13.0",
+    "rollup-plugin-visualizer": "^5.12.0",
     "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"
+    "unplugin-auto-import": "^0.19.0",
+    "unplugin-turbo-console": "^1.10.4",
+    "unplugin-vue-components": "^0.28.0",
+    "vite": "^6.0.3",
+    "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);
+  }
+}

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

@@ -1,5 +1,9 @@
 <template>
-  <div id="gx-pro-mobile">
+  <van-config-provider>
     <router-view />
-  </div>
+  </van-config-provider>
 </template>
+
+<style lang="less">
+</style>
+

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

@@ -6,7 +6,7 @@ import 'vant/es/skeleton/style'
 
 const Proskeleton: FunctionalComponent<{ line: number; loading: boolean }> = (props, { slots }) => {
   const renderMapItem = () => {
-    const show = []
+    const show: any[] = []
     for (let i = 0; i < props.line; i += 1) {
       show.push(
         <div class={styles.skeletonItem}>

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

@@ -1,8 +1,13 @@
-import { defineComponent, toRefs, watch } from 'vue'
+import type { SetLoadingParams } from '@gx-mobile/hooks/web/usePageLoading'
+import type { NavBarProps } from 'vant'
+import { classNames, getSlot, getSlotVNode, isFunction, VueNode, WithFalse } from '@gx-design-vue/pro-utils'
 import { usePageLoading } from '@gx-mobile/hooks/web'
+import { useScroll } from '@vueuse/core'
+import { Icon, NavBar } from 'vant'
+import { defineComponent, ref, type SlotsType, Teleport, toRefs, watch } from 'vue'
 import ProSkeleton from './ProSkeleton'
 import styles from './style.module.less'
-import type { SetLoadingParams } from '@gx-mobile/hooks/web/usePageLoading'
+import 'vant/es/nav-bar/style'
 
 export type PageLoadingTpe = 'toast' | 'skeleton'
 
@@ -11,10 +16,32 @@ type ChangeLoadingParams<T> = Omit<SetLoadingParams<T>, 'type'> & {
 }
 
 const PageContainer = defineComponent({
-  name: 'GProPageContainer',
+  name: 'GPageContainer',
   inheritAttrs: false,
   props: {
-    loading: Boolean as VuePropType<boolean>,
+    loading: {
+      type: Boolean as VuePropType<boolean>,
+      default: false
+    },
+    nav: {
+      type: [ Boolean, Function, Object, Array ] as VuePropType<WithFalse<VueNode>>,
+      default: false
+    },
+    navProps: Object as VuePropType<NavBarProps>,
+    backTop: {
+      type: [ Boolean, Function, Object, Array ] as VuePropType<WithFalse<VueNode>>,
+      default: false
+    },
+    wrapperClass: String as VuePropType<string>,
+    backTopProps: {
+      type: Object as VuePropType<{
+        style: CSSProperties;
+        count: number;
+      }>,
+      default: () => ({
+        count: 300
+      })
+    },
     hiddenSlot: {
       type: Boolean as VuePropType<boolean>,
       default: true
@@ -27,19 +54,37 @@ const PageContainer = defineComponent({
       type: String as VuePropType<PageLoadingTpe>,
       default: 'toast'
     },
-    bgcolor: {
+    bgColor: {
       type: String as VuePropType<string>,
-      default: '#fafafa'
-    }
+      default: 'var(--van-gray-1)'
+    },
+    onNavClickLeft: Function as VuePropType<() => void>,
+    'onUpdate:loading': Function as VuePropType<(val: boolean) => void>,
+    onScroll: Function as VuePropType<(value: number) => void>
   },
-  emits: [ 'update:loading' ],
-  setup(props, { slots, expose, emit }) {
+  slots: Object as SlotsType<{
+    default(): void
+    backTop(): void
+    nav(props: NavBarProps): void
+  }>,
+  emits: [ 'update:loading', 'scroll', 'navClickLeft' ],
+  setup(props, { attrs, slots, expose, emit }) {
+    const route = useRoute() as unknown as AppRouteModule
+    const router = useRouter()
     const { loading: loadingRef, loadingType, loadingMsg, hiddenSlot } = toRefs(props)
 
+    const backTopEl = ref()
+    const viewScrollRoot = ref()
     const initStatus = ref(true)
-
+    const showBackTop = ref(false)
     const hiddenSlotRef = ref(props.hiddenSlot)
 
+    const navTitle = computed(() => route.meta?.name ?? route.meta?.title as string)
+
+    const { y } = useScroll(viewScrollRoot, {
+      behavior: 'smooth'
+    })
+
     const [ loading, setLoading ] = usePageLoading({
       defaultType: loadingType.value,
       defaultMessage: loadingMsg.value,
@@ -47,8 +92,7 @@ const PageContainer = defineComponent({
     })
 
     watch(() => loading.value, (val) => {
-      if (initStatus.value && val)
-        initStatus.value = false
+      if (initStatus.value && val) initStatus.value = false
       emit('update:loading', val)
     }, {
       deep: true,
@@ -77,25 +121,62 @@ const PageContainer = defineComponent({
       immediate: true
     })
 
+    watch(() => y.value, (val) => {
+      showBackTop.value = val > props.backTopProps?.count
+      props.onScroll?.(val)
+    })
+
+    onMounted(() => {
+      viewScrollRoot.value = document.querySelector('#basic-layout-content')
+      backTopEl.value = document.querySelector('#basic-layout-back-top')
+    })
+
     const changeLoading = ({
       value,
       message,
       hiddenSlot
     }: ChangeLoadingParams<boolean>) => {
       if (loadingType.value === 'toast') {
-        hiddenSlotRef.value = hiddenSlot
+        hiddenSlotRef.value = !!hiddenSlot
         setLoading({ value, message, type: loadingType.value })
       }
     }
 
+    function navClickLeft() {
+      if (props.onNavClickLeft) {
+        props.onNavClickLeft()
+      } else {
+        router.back()
+      }
+    }
+
     expose({
-      toggleLoading: changeLoading
+      toggleLoading: changeLoading,
+      setScrollTop: (val: number) => y.value = val
     })
 
     return () => {
+      const navProps = {
+        fixed: true,
+        placeholder: true,
+        leftArrow: true,
+        title: navTitle.value,
+        ...(props.navProps || {})
+      } as NavBarProps
+      const navSlot = getSlot(slots, props, 'nav')
+      const backTopRender = getSlotVNode(slots, props, 'backTop')
       return (
-        <div class={styles.pageContainer} style={{ backgroundColor: props.bgcolor }}>
-          <div class={styles.pageContainerWrapper}>
+        <div class={styles.pageContainer} style={{ backgroundColor: props.bgColor, ...(attrs?.style as any || {}) }}>
+          {props.nav !== false && (
+            <>
+              {isFunction(navSlot)
+                ? navSlot?.({ ...navProps })
+                : (
+                  <NavBar{...navProps} onClickLeft={() => navClickLeft()} />
+                )}
+            </>
+          )}
+          <div class={classNames(styles.pageContainerWrapper, props.wrapperClass || '')}>
             {
               loadingType.value === 'skeleton'
                 ? (
@@ -106,6 +187,17 @@ const PageContainer = defineComponent({
                 : ((!loading.value || !hiddenSlotRef.value) && <>{slots.default?.()}</>)
             }
           </div>
+          {
+            !!backTopEl.value && showBackTop.value && props.backTop !== false && (
+              <Teleport to="#basic-layout-back-top">
+                {backTopRender || (
+                  <div class={styles.pageBackTop} onClick={() => y.value = 0} style={props.backTopProps?.style}>
+                    <Icon name="back-top" class="relative top-1.5px" />
+                  </div>
+                )}
+              </Teleport>
+            )
+          }
         </div>
       )
     }

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

@@ -1,8 +1,7 @@
 .pageContainer {
   width: 100%;
-  min-height: 100vh;
+  min-height: calc(100vh - var(--van-tabbar-height));
   padding: 15px;
-  background: var(--van-background-3);
   
   .pageContainerWrapper {
     position: relative;
@@ -12,3 +11,7 @@
     margin-top: 50px;
   }
 }
+
+.pageBackTop {
+  --at-apply: rd-50\% overflow-hidden flex-center bg-[#4187f2] text-20px text-[#fff] w-45px h-45px right-20px bottom-60px absolute z-100;
+}