@gx-design-vue/create-gx-cli 0.1.20 → 0.1.22

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

@@ -0,0 +1,74 @@
+{
+  "name": "gx-vant-mobile",
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "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",
+    "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.54",
+    "@gx-design-vue/pro-utils": "^0.2.0-beta.80",
+    "@multiavatar/multiavatar": "^1.0.7",
+    "@vueuse/core": "^13.1.0",
+    "@vueuse/shared": "^13.1.0",
+    "axios": "^1.6.7",
+    "crypto-js": "^4.1.1",
+    "dayjs": "^1.11.13",
+    "lodash-es": "^4.17.21",
+    "pinia": "^3.0.2",
+    "qs": "^6.11.0",
+    "unocss": "^66.1.0-beta.12",
+    "vant": "^4.9.15",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^4.4.0",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "@iconify-json/carbon": "^1.2.5",
+    "@types/lodash-es": "^4.17.10",
+    "@types/mockjs": "^1.0.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.1.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "autoprefixer": "^10.4.5",
+    "bundle-require": "^5.0.0",
+    "cross-env": "^7.0.3",
+    "husky": "^9.1.6",
+    "less": "^4.1.3",
+    "mockjs": "^1.1.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": "^3.3.3",
+    "rimraf": "^6.0.1",
+    "rollup-plugin-external-globals": "^0.13.0",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "typescript": "^5.3.3",
+    "unplugin-auto-import": "^0.19.0",
+    "unplugin-turbo-console": "^1.10.4",
+    "unplugin-vue-components": "^0.28.0",
+    "vite": "^6.2.6",
+    "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

@@ -0,0 +1,8 @@
+<template>
+  <van-config-provider>
+    <router-view />
+  </van-config-provider>
+</template>
+
+<style lang="less">
+</style>

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: any[] = []
+    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,207 @@
+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 'vant/es/nav-bar/style'
+
+export type PageLoadingTpe = 'toast' | 'skeleton'
+
+type ChangeLoadingParams<T> = Omit<SetLoadingParams<T>, 'type'> & {
+  hiddenSlot?: boolean;
+}
+
+const PageContainer = defineComponent({
+  name: 'GPageContainer',
+  inheritAttrs: false,
+  props: {
+    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
+    },
+    loadingMsg: {
+      type: String as VuePropType<string>,
+      default: '加载中'
+    },
+    loadingType: {
+      type: String as VuePropType<PageLoadingTpe>,
+      default: 'toast'
+    },
+    bgColor: {
+      type: String as VuePropType<string>,
+      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>
+  },
+  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,
+      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
+    })
+
+    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
+        setLoading({ value, message, type: loadingType.value })
+      }
+    }
+
+    function navClickLeft() {
+      if (props.onNavClickLeft) {
+        props.onNavClickLeft()
+      } else {
+        router.back()
+      }
+    }
+
+    expose({
+      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, ...(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'
+                ? (
+                  <ProSkeleton line={3} loading={loading.value}>
+                    {slots.default?.()}
+                  </ProSkeleton>
+                )
+                : ((!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>
+      )
+    }
+  }
+})
+
+export default PageContainer

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

@@ -0,0 +1,17 @@
+.pageContainer {
+  width: 100%;
+  min-height: calc(100vh - var(--van-tabbar-height));
+  padding: 15px;
+  
+  .pageContainerWrapper {
+    position: relative;
+  }
+  
+  .skeletonItem + .skeletonItem {
+    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;
+}

package/template-mobile-vant-cli/src/components/TabsMenu/index.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { cloneDeep } from 'lodash-es'
+
+const route = useRoute() as unknown as AppRouteModule
+const router = useRouter()
+
+function getMenuState() {
+  const menuState = {
+    data: [] as AppRouteModule[],
+    map: new Map<string, AppRouteModule>()
+  }
+  router.getRoutes().forEach((item: AppRouteModule) => {
+    if (item.meta?.isMenu) {
+      menuState.data.push(item)
+      menuState.map.set(item.name as string, item)
+    }
+  })
+  return cloneDeep(menuState)
+}
+
+const menuState = reactive(getMenuState())
+
+const selectKey = computed<string>(() => route.meta?.menuSelectKey ?? route.name as string)
+
+const handleSelect = path => router.push(path)
+</script>
+
+<template>
+  <van-tabbar :model-value="selectKey" placeholder>
+    <van-tabbar-item
+      v-for="item in menuState.data"
+      :key="item.name"
+      replace
+      :name="item.name as string"
+      :icon="item.meta?.icon"
+      @click="handleSelect(item.path)"
+    >
+      {{ item.meta?.name ?? item.meta?.title }}
+    </van-tabbar-item>
+  </van-tabbar>
+</template>
+
+<style scoped lang="less">
+
+</style>

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-page-container', PageContainer)
+}
+
+export default vantDesign

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

@@ -0,0 +1,5 @@
+import gxDesign from './gx-design'
+
+export function setupGlobCommon(app) {
+  gxDesign(app)
+}

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

@@ -0,0 +1 @@
+/* 文字颜色相关 */

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

@@ -0,0 +1,5 @@
+@import (reference) 'color.less';
+@import (reference) 'mixin.less';
+
+@gx-prefix: gx;
+@gx-prefix-pro: ~'@{gx-prefix}-pro';

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

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