@gx-design-vue/create-gx-cli 0.1.19 → 0.1.21

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';

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

@@ -0,0 +1,65 @@
+//一些less函数
+
+.scrollbar() {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(50, 50, 50, 30%);
+    border-radius: 1em;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: rgba(50, 50, 50, 10%);
+    border-radius: 1em;
+  }
+}
+
+.textOverflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+}
+
+.reset() {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  border: 0;
+  outline: 0;
+}
+
+.clearfix() {
+  &::before,
+  &::after {
+    display: table;
+    content: '';
+    height: 0;
+    clear: both;
+    font-size: 0;
+    visibility: hidden;
+  }
+}
+
+.centerContent() {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 999;
+  transform: translate(-50%, -50%);
+}
+
+.relative() {
+  position: relative;
+}
+
+.overHidden() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,39 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: var(--van-font-size-lg);
+  color-scheme: light;
+}
+
+html.dark {
+  background: #222;
+  color-scheme: dark;
+}
+
+#app {
+  height: 100%;
+  position: relative;
+  overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+  width: 0;
+  background: transparent;
+}
+
+.fl {
+  float: left;
+}
+
+.fr {
+  float: right;
+}
+
+.clearfix {
+  zoom: 1;
+  .clearfix()
+}

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

@@ -0,0 +1,3 @@
+:root {
+  --gx-mobile-layout-bg: #ffffff;
+}

package/template-mobile-vant-cli/src/hooks/web/index.ts

@@ -0,0 +1,5 @@
+import usePageLoading from './usePageLoading'
+
+export {
+  usePageLoading
+}

package/template-mobile-vant-cli/src/hooks/web/usePageLoading.ts

@@ -0,0 +1,56 @@
+import type { PageLoadingTpe } from '@/components/PageContainer'
+import type { Ref } from 'vue'
+import { showLoadingToast } from 'vant'
+import { ref, watch } from 'vue'
+
+export interface SetLoadingParams<T> {
+  value: T;
+  type?: PageLoadingTpe;
+  message?: string
+}
+
+type ChangeLoadingFn<T> = ({ value, type, message }: SetLoadingParams<T>) => void
+
+export default function usePageLoading<T, R = Ref<T>>({
+  defaultType,
+  defaultMessage,
+  defaultLoading
+}: {
+  defaultType?: PageLoadingTpe;
+  defaultMessage?: string;
+  defaultLoading?: T | (() => T);
+}): [ R, ChangeLoadingFn<T> ] {
+  const initValue: T = typeof defaultLoading === 'function' ? (defaultLoading as any)() : defaultLoading
+
+  const loadingToast = ref()
+  const pageLoading = ref(initValue) as Ref<T>
+  const loadingMessage = ref(defaultMessage)
+  const loadingType = ref(defaultType)
+
+  watch(() => pageLoading.value, (val) => {
+    if (val) {
+      if (loadingType.value === 'toast') {
+        loadingToast.value = showLoadingToast({
+          duration: 0,
+          forbidClick: true,
+          message: loadingMessage.value || '加载中'
+        })
+        return
+      }
+    }
+
+    loadingToast.value?.close()
+  }, {
+    deep: true,
+    immediate: true
+  })
+
+  const changeLoading = ({ value, type, message }: SetLoadingParams<T>) => {
+    pageLoading.value = value
+    loadingMessage.value = message
+    if (type)
+      loadingType.value = type
+  }
+
+  return [ pageLoading as unknown as R, changeLoading ]
+}

package/template-mobile-vant-cli/src/layout/BasicLayout/index.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import TabsMenu from '@/components/TabsMenu/index.vue'
+</script>
+
+<template>
+  <div :class="$style['basic-layout']">
+    <RouterView>
+      <template #default="{ Component }">
+        <component :is="Component" />
+      </template>
+    </RouterView>
+    <TabsMenu />
+  </div>
+</template>
+
+<style lang="less" module>
+@import './style';
+</style>

package/template-mobile-vant-cli/src/layout/BasicLayout/style.less

@@ -0,0 +1,3 @@
+.basic-layout {
+  height: 100%;
+}

package/template-mobile-vant-cli/src/layout/UserLayout/index.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div :class="$style.userLayout">
+    <RouterView>
+      <template #default="{ Component }">
+        <component :is="Component" />
+      </template>
+    </RouterView>
+  </div>
+  <div :class="$style.layoutBg" />
+</template>
+
+<style module lang="less">
+@import "./style.module";
+</style>

package/template-mobile-vant-cli/src/layout/UserLayout/style.module.less

@@ -0,0 +1,36 @@
+.userLayout {
+  --at-apply: relative;
+}
+
+.layoutBg {
+  z-index: -1;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+  opacity: 0.2;
+  filter: blur(69px);
+  will-change: transform;
+  animation-timeline: auto;
+  animation-range-start: normal;
+  animation-range-end: normal;
+  background: linear-gradient(135deg, rgb(114, 46, 209) 0%, rgb(22, 119, 255) 30%, rgb(245, 34, 45) 70%, rgb(19, 194, 194) 100%) 0% 0% / 200% 200%;
+  animation: 10s ease 0s infinite normal none running glow;
+}
+
+@keyframes glow {
+  0% {
+    background-position: 0px -100%;
+  }
+  
+  50% {
+    background-position: 200% 50%;
+  }
+  
+  100% {
+    background-position: 0px -100%;
+  }
+}

package/template-mobile-vant-cli/src/main.ts

@@ -0,0 +1,34 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import { setupGlobCommon } from './core'
+import { router, setupRouter } from './router'
+import { setupRouterGuard } from './router/guard'
+import { setupStore } from './store'
+
+import 'virtual:uno.css'
+import 'vant/es/toast/style'
+import './design/index.less'
+
+// plugins
+import './plugins'
+
+function startApp() {
+  const app = createApp(App)
+
+  // store
+  setupStore(app)
+
+  // global
+  setupGlobCommon(app)
+
+  // route
+  setupRouter(app)
+
+  // guardRoute
+  setupRouterGuard(router)
+
+  app.mount('#app')
+}
+
+startApp()

package/template-mobile-vant-cli/src/pages/Account/details.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <g-page-container nav>
+    这里是账号详情
+  </g-page-container>
+</template>
+
+<style scoped lang="less">
+
+</style>