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

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

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

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

@@ -1,12 +1,5 @@
-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/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

@@ -1,3 +1,3 @@
 @import './root';
 @import './reset';
-@import './vant';
+@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

@@ -1,134 +1,28 @@
-/****reset****/
-body,
-div,
-table,
-tr,
-td,
-th,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-form,
-input,
-button,
-label,
-select,
-textarea,
-p,
-u,
-i,
-em,
-ul,
-ol,
-li,
-dl,
-dd,
-dt,
-img,
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-menu,
-nav,
-section,
-pre {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  font-size: 100%;
-  vertical-align: baseline;
-  border: 0;
-  outline: 0;
 }
 
-li {
-  list-style: none;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: 100%;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  width: 100%;
-}
-
-a,
-input,
-select,
-textarea,
-area,
-button {
-  outline: none;
-  font-family: inherit;
-  font-size: inherit;
-  border: none;
-  background: none;
-  color: inherit;
-}
-
-a {
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: none;
-}
-
-textarea {
-  overflow: auto;
-  resize: none;
+html {
+  font-size: var(--van-font-size-lg);
+  color-scheme: light;
 }
 
-input[type='button'],
-input[type='submit'],
-input[type='reset'] {
-  cursor: pointer;
-  -webkit-appearance: none;
+html.dark {
+  background: #222;
+  color-scheme: dark;
 }
 
-html,
-body {
-  overflow-x: hidden;
-  width: 100%;
+#app {
   height: 100%;
-  background: #ffffff;
-}
-
-* {
-  -webkit-overflow-scrolling: touch;
-}
-
-html {
-  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  overflow-x: hidden;
 }
 
-body {
-  text-align: left;
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
-
-  #app {
-    height: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    overflow-x: hidden;
-    box-sizing: border-box;
-  }
+::-webkit-scrollbar {
+  width: 0;
+  background: transparent;
 }
 
 .fl {
@@ -141,15 +35,5 @@ body {
 
 .clearfix {
   zoom: 1;
-  &::before,
-  &::after {
-    display: table;
-    content: ' ';
-  }
-  &::after {
-    clear: both;
-    height: 0;
-    font-size: 0;
-    visibility: hidden;
-  }
+  .clearfix()
 }

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

@@ -1,7 +1,7 @@
+import type { PageLoadingTpe } from '@/components/PageContainer'
 import type { Ref } from 'vue'
+import { showLoadingToast } from 'vant'
 import { ref, watch } from 'vue'
-import { closeToast, showLoadingToast } from 'vant'
-import type { PageLoadingTpe } from '@/components/PageContainer'
 
 export interface SetLoadingParams<T> {
   value: T;
@@ -22,26 +22,24 @@ export default function usePageLoading<T, R = Ref<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') {
-        showLoadingToast({
+        loadingToast.value = showLoadingToast({
           duration: 0,
           forbidClick: true,
           message: loadingMessage.value || '加载中'
         })
-      } else {
-        closeToast()
+        return
       }
-    } else {
-      closeToast()
     }
+
+    loadingToast.value?.close()
   }, {
     deep: true,
     immediate: true

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import TabsMenu from '@/components/TabsMenu/index.vue'
 </script>
 
 <template>
@@ -8,9 +9,10 @@
         <component :is="Component" />
       </template>
     </RouterView>
+    <TabsMenu />
   </div>
 </template>
 
 <style lang="less" module>
-@import './basicLayout';
+@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.layouBg" />
+</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;
+}
+
+.layouBg {
+  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

@@ -1,25 +1,32 @@
 import { createApp } from 'vue'
-import { setupRouter } from '@/router'
-import { setupStore } from './store'
-import { setupGlobCommon } from './core'
-import App from './App.vue'
 
-import 'uno.css'
+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'
 
-import './global.less'
+// plugins
+import './plugins'
 
 function startApp() {
   const app = createApp(App)
 
-  // 配置store
+  // store
   setupStore(app)
 
-  // 配置路由
+  // global
+  setupGlobCommon(app)
+
+  // route
   setupRouter(app)
 
-  setupGlobCommon(app)
+  // guardRoute
+  setupRouterGuard(router)
 
   app.mount('#app')
 }

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>

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

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import multiavatar from '@multiavatar/multiavatar/esm'
+
+const { user } = useStore()
+const router = useRouter()
+
+const svgCode = multiavatar(user.userInfo.userId)
+
+function toDetails() {
+  router.push('/account/detail')
+}
+</script>
+
+<template>
+  <g-page-container wrapperClass="h-full" bg-color="transparent" style="height: calc(100vh - var(--van-tabbar-height));">
+    <div class="bg" />
+    <div class="flex-center pt-15 pb-30">
+      <img src="@/assets/logo.png" class="w-60" alt="">
+    </div>
+    <div class="card flex gap-20 p-20">
+      <div class="w-60 h-60 rd-50% overflow-hidden flex-shrink" v-html="svgCode" @click="toDetails" />
+      <div class="flex-main flex-col flex justify-between">
+        <div class="text-14 font-bold flex items-center gap-10">
+          <span @click="toDetails">{{ user.userInfo.nickName }}</span>
+          <van-tag color="#7232dd" class="!px-8 !text-10">会员</van-tag>
+        </div>
+        <div class="flex flex-col gap-2 text-12 text-hex-999">
+          <div class="text-hidden-1" @click="toDetails">{{ user.userInfo.remark }}</div>
+          <div flex gap-10 items-center>
+            <van-progress class="flex-main relative top-1.5" :percentage="50" stroke-width="4" :show-pivot="false" />
+            <span>5/10</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card px-20 py-15">
+      <div class="card-item">
+        <span class="font-bold text-13">我的订单</span>
+        <van-icon class="text-hex-999 text-13" name="arrow" />
+      </div>
+      <div class="card-item">
+        <span class="font-bold text-13">我的地址</span>
+        <van-icon class="text-hex-999 text-13" name="arrow" />
+      </div>
+    </div>
+  </g-page-container>
+</template>
+
+<style scoped lang="less">
+.card {
+  --at-apply: bg-hex-fff rd-6 overflow-hidden;
+  
+  & +.card {
+    --at-apply: mt-20;
+  }
+  
+  .card-item {
+    --at-apply: flex items-center justify-between bd-b-main pb-15;
+    
+    & + .card-item {
+      --at-apply: pt-15;
+    }
+    
+    &:last-child {
+      --at-apply: pb-0;
+      border-bottom: 0;
+    }
+  }
+}
+.bg {
+  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%;
+  }
+}
+</style>

package/template-mobile-vant-cli/src/pages/{home.vue → Home/index.vue}

@@ -15,7 +15,7 @@ const init = (val?: boolean) => {
   
   setTimeout(() => {
     loading.value = false
-  }, 1000)
+  }, 200)
 }
 
 onMounted(() => {
@@ -26,7 +26,7 @@ const changeLoading = (message: string) => {
   loadingMsg.value = message
   loading.value = true
   hiddenSlot.value = false
-
+  
   setTimeout(() => {
     loading.value = false
   }, 1000)
@@ -38,7 +38,7 @@ const toggleLoading = (hiddenSlot: boolean, message?: string) => {
     hiddenSlot,
     message
   })
-
+  
   setTimeout(() => {
     pageContainer.value?.toggleLoading({
       value: false,
@@ -49,7 +49,7 @@ const toggleLoading = (hiddenSlot: boolean, message?: string) => {
 </script>
 
 <template>
-  <g-pro-page-container
+  <g-page-container
     ref="pageContainer"
     v-model:loading="loading"
     :loadingMsg="loadingMsg"
@@ -64,7 +64,7 @@ const toggleLoading = (hiddenSlot: boolean, message?: string) => {
       <van-button @click="toggleLoading(false)">刷新-调用方法-不隐藏</van-button>
       <van-button @click="toggleLoading(false, '切换中')">刷新-调用方法-不隐藏-切换提示语</van-button>
     </div>
-  </g-pro-page-container>
+  </g-page-container>
 </template>
 
 <style lang="less" scoped>