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

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>

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/index.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { isBoolean } from '@gx-design-vue/pro-utils'
+
+const loading = ref(false)
+const pageContainer = ref()
+const loadingMsg = ref('加载中')
+const hiddenSlot = ref(true)
+
+const init = (val?: boolean) => {
+  loadingMsg.value = '加载中'
+  loading.value = true
+  
+  if (isBoolean(val))
+    hiddenSlot.value = val
+  
+  setTimeout(() => {
+    loading.value = false
+  }, 200)
+}
+
+onMounted(() => {
+  init()
+})
+
+const changeLoading = (message: string) => {
+  loadingMsg.value = message
+  loading.value = true
+  hiddenSlot.value = false
+  
+  setTimeout(() => {
+    loading.value = false
+  }, 1000)
+}
+
+const toggleLoading = (hiddenSlot: boolean, message?: string) => {
+  pageContainer.value?.toggleLoading({
+    value: true,
+    hiddenSlot,
+    message
+  })
+  
+  setTimeout(() => {
+    pageContainer.value?.toggleLoading({
+      value: false,
+      hiddenSlot
+    })
+  }, 1000)
+}
+</script>
+
+<template>
+  <g-page-container
+    ref="pageContainer"
+    v-model:loading="loading"
+    :loadingMsg="loadingMsg"
+    :hiddenSlot="hiddenSlot"
+  >
+    <div style="display: flex;flex-direction: column;gap: 20px;">
+      <p>以下刷新只针对toast</p>
+      <van-button @click="init(true)">刷新（隐藏子组件）</van-button>
+      <van-button @click="init(false)">刷新（不隐藏子组件）</van-button>
+      <van-button @click="changeLoading('切换中')">切换loading提示语</van-button>
+      <van-button @click="toggleLoading(true)">刷新-调用方法-隐藏</van-button>
+      <van-button @click="toggleLoading(false)">刷新-调用方法-不隐藏</van-button>
+      <van-button @click="toggleLoading(false, '切换中')">刷新-调用方法-不隐藏-切换提示语</van-button>
+    </div>
+  </g-page-container>
+</template>
+
+<style lang="less" scoped>
+</style>

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

@@ -0,0 +1,76 @@
+<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 pt-150 px-30">
+    <div class="flex items-end justify-center gap-20">
+      <img class="h-38" src="@/assets/logo.png" alt="logo">
+      <div class="bg-gradient-[to_bottom,#AE3FF5,#6EC0F9] bg-gradient-linear bg-clip-text text-28 text-transparent font-bold">
+        Gx Vant Mobile
+      </div>
+    </div>
+    <div class="mt-40">
+      <van-form validate-trigger="onSubmit">
+        <van-cell-group inset class="!mx-0">
+          <van-field
+            v-model="userForm.userName"
+            :rules="userRules.userName"
+            name="userName"
+            placeholder="用户名: admin"
+          />
+          <van-field
+            v-model="userForm.password"
+            type="password"
+            :rules="userRules.password"
+            name="password"
+            placeholder="密码: gx.design"
+          />
+        </van-cell-group>
+        
+        <div class="mt-24">
+          <van-button
+            :loading="loading"
+            type="primary"
+            native-type="submit"
+            block
+            size="small"
+            @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()
+  })
+}

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

@@ -0,0 +1,10 @@
+import type { Router } from 'vue-router'
+
+export function createStateGuard(router: Router) {
+  router.afterEach((to) => {
+    const user = useStoreUser()
+    if (to.path === '/user/login') {
+      user.resetPermissions()
+    }
+  })
+}

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

@@ -0,0 +1,31 @@
+import type { App } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import { defaultSettings } from '@gx-config'
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import { routerList } from './routes'
+
+const { routerMode } = defaultSettings.system
+
+function handleRouterMode() {
+  switch (routerMode) {
+    case 'hash':
+      return createWebHashHistory()
+      break
+    case 'browser':
+      return createWebHistory()
+      break
+    default:
+      return createWebHashHistory()
+      break
+  }
+}
+
+export const router = createRouter({
+  history: handleRouterMode(),
+  routes: routerList as unknown as RouteRecordRaw[]
+})
+
+// 配置路由器
+export function setupRouter(app: App<Element>) {
+  app.use(router)
+}