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

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>

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

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+interface UserState {
+  userName: string
+  password: string
+}
+
+const { user } = useStore()
+const router = useRouter()
+
+const loading = ref(false)
+
+const userForm = reactive<UserState>({
+  userName: 'admin',
+  password: 'gx.design'
+})
+
+const userRules = reactive({
+  userName: [ { required: true, message: '用户名是必填项！' } ],
+  password: [ { required: true, message: '密码是必填项！' } ]
+})
+
+const handleSubmit = async () => {
+  const response = await user.userLogin(toRaw(userForm))
+  if (response) {
+    router.push({ path: '/' })
+  }
+}
+</script>
+
+<template>
+  <div class="h-100vh w-full flex flex-col items-center pt-150">
+    <img class="h-40" src="@/assets/logo.png" alt="logo">
+    <div class="mt-50 w-75%">
+      <van-form validate-trigger="onSubmit">
+        <div class="overflow-hidden rounded-3xl">
+          <van-field
+            v-model="userForm.userName"
+            :rules="userRules.userName"
+            name="userName"
+            placeholder="用户名: admin"
+          />
+        </div>
+        
+        <div class="mt-24 overflow-hidden rounded-3xl">
+          <van-field
+            v-model="userForm.password"
+            type="password"
+            :rules="userRules.password"
+            name="password"
+            placeholder="密码: gx.design"
+          />
+        </div>
+        
+        <div class="mt-24">
+          <van-button
+            :loading="loading"
+            type="primary"
+            native-type="submit"
+            round
+            block
+            @click="handleSubmit"
+          >
+            登录
+          </van-button>
+        </div>
+      </van-form>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+</style>

package/template-mobile-vant-cli/src/plugins/dayjs/index.ts

@@ -0,0 +1,3 @@
+import dayjs from 'dayjs'
+
+dayjs.locale('zh-cn')

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

@@ -0,0 +1,2 @@
+// 加载插件
+import.meta.glob('./**/*.ts', { eager: true })

package/template-mobile-vant-cli/src/router/guard/index.ts

@@ -0,0 +1,18 @@
+import type { MenuDataItem } from '@gx-design-vue/pro-layout'
+import type { Router } from 'vue-router'
+import getPageTitle from '@/utils/pageTitle'
+import { createPermissionGuard } from './permissions'
+import { createStateGuard } from './stateGuard'
+
+export function setupRouterGuard(router: Router) {
+  createPageGuard(router)
+  createPermissionGuard(router)
+  createStateGuard(router)
+}
+
+export function createPageGuard(router: Router) {
+  router.afterEach((to) => {
+    const { meta } = to as MenuDataItem
+    document.title = getPageTitle(meta?.title || '')
+  })
+}

package/template-mobile-vant-cli/src/router/guard/permissions.ts

@@ -0,0 +1,41 @@
+import type { Router } from 'vue-router'
+import { defaultSettings } from '@gx-config'
+
+const { loginInterception, routesWhiteList } = defaultSettings.system
+
+export function createPermissionGuard(router: Router) {
+  const userStore = useStoreUser()
+
+  router.beforeEach(async (to, _, next) => {
+    if (loginInterception) {
+      const token = userStore.accessToken
+      if (routesWhiteList.includes(to.path)) {
+        if (token) {
+          next({ path: '/', replace: true })
+        }
+        next()
+        return
+      }
+      if (!token) {
+        userStore.resetPermissions()
+        next({ path: '/user/login', replace: true })
+        return
+      }
+
+      const hasUserId = userStore.userInfo.userId
+
+      if (hasUserId) {
+        next()
+        return
+      }
+
+      const status = await userStore.checkUserPremission()
+      if (status !== 1) {
+        userStore.resetPermissions()
+        next({ path: '/user/login', replace: true })
+        return
+      }
+    }
+    next()
+  })
+}