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

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)
+}

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

@@ -0,0 +1,46 @@
+import BasicLayout from '@/layout/BasicLayout/index.vue'
+import UserLayout from '@/layout/UserLayout/index.vue'
+
+// import.meta.globEager() 直接引入所有的模块 Vite 独有的功能
+const modules = import.meta.glob('./modules/**/*.ts', { eager: true })
+const routeModuleList: AppRouteModule[] = []
+
+// 加入到路由集合中
+Object.keys(modules).forEach((key) => {
+  const mod = (modules[key] as any).default || {}
+  const modList = Array.isArray(mod) ? [ ...mod ] : [ mod ]
+  routeModuleList.push(...modList)
+})
+
+export const notFoundRoute: AppRouteModule = {
+  path: '/:path(.*)*',
+  name: 'NotFound',
+  redirect: '/'
+}
+
+// 自定义路由
+export const routerList: AppRouteModule[] = [
+  {
+    path: '/user',
+    component: UserLayout,
+    name: 'UserLayout',
+    redirect: '/user/login',
+    children: [
+      {
+        path: '/user/login',
+        name: 'Login',
+        meta: {
+          title: '登录'
+        },
+        component: () => import('@/pages/user/login/index.vue')
+      }
+    ]
+  },
+  {
+    path: '/',
+    name: '首页',
+    component: BasicLayout,
+    children: routeModuleList
+  },
+  notFoundRoute
+]

package/template-mobile-vant-cli/src/router/routes/modules/dataSource.ts

@@ -0,0 +1,32 @@
+export default [
+  {
+    path: '/',
+    name: 'Home',
+    meta: {
+      name: '首页',
+      icon: 'wap-home-o',
+      isMenu: true
+    },
+    component: () => import('@/pages/Home/index.vue')
+  },
+  {
+    path: '/account',
+    name: 'Account',
+    meta: {
+      name: '我的',
+      title: '个人中心',
+      icon: 'user-o',
+      isMenu: true
+    },
+    component: () => import('@/pages/Account/index.vue')
+  },
+  {
+    path: '/account/detail',
+    name: 'AccountDetails',
+    meta: {
+      title: '账号详情',
+      menuSelectKey: 'Account'
+    },
+    component: () => import('@/pages/Account/details.vue')
+  }
+] as AppRouteModule[]

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

@@ -0,0 +1,31 @@
+import request from '@/utils/request'
+
+// get 请求
+export function getMock(params) {
+  return request({
+    url: '/get/mock',
+    method: 'get',
+    isMock: true,
+    params
+  })
+}
+
+// post 请求
+export function postMock(data) {
+  return request({
+    url: '/post/mock',
+    method: 'post',
+    isMock: true,
+    data
+  })
+}
+
+// formData 请求
+export function formDataMock(data) {
+  return request({
+    url: '/formData/mock',
+    method: 'post',
+    isMock: true,
+    data
+  })
+}

package/template-mobile-vant-cli/src/services/userCenter/account.ts

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+export function getUserInfo<T, D = undefined>() {
+  return request<T, D>({
+    url: '/user/queryUserDetail',
+    method: 'get',
+    isMock: true
+  })
+}
+
+export function getUserList() {
+  return request({
+    url: '/user/account/list',
+    method: 'get',
+    isMock: true
+  })
+}
+
+export function getAccountGroupList() {
+  return request({
+    url: '/user/account/group',
+    method: 'get',
+    isMock: true
+  })
+}
+
+export function getAccountCount() {
+  return request({
+    url: '/user/account/count',
+    method: 'get',
+    isMock: true
+  })
+}
+
+export function updateUserDetails(data) {
+  return request({
+    url: '/user/account/update',
+    method: 'post',
+    data,
+    isMock: true
+  })
+}

package/template-mobile-vant-cli/src/services/userCenter/index.ts

@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+export * from './account'
+
+export function login<T, D>(data) {
+  return request<T, D>({
+    url: '/user/login',
+    method: 'post',
+    data,
+    isMock: true
+  })
+}
+
+export function logout() {
+  return request({
+    url: '/user/logout',
+    method: 'get',
+    isMock: true
+  })
+}
+
+export function register() {
+  return request({
+    url: '/user/register',
+    method: 'post',
+    isMock: true
+  })
+}

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

@@ -0,0 +1,20 @@
+import type { App } from 'vue'
+import { createPinia } from 'pinia'
+import { useStoreGlobal } from './modules/global'
+import { useStoreUser } from './modules/user'
+
+export {
+  useStoreGlobal,
+  useStoreUser,
+}
+
+export function useStore() {
+  return {
+    user: useStoreUser(),
+    global: useStoreGlobal()
+  }
+}
+
+export function setupStore(app: App<Element>) {
+  app.use(createPinia())
+}

package/template-mobile-vant-cli/src/store/modules/global.ts

@@ -0,0 +1,23 @@
+import { useReactiveState } from '@gx-design-vue/pro-hooks'
+import { defineStore } from 'pinia'
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/1/11
+ * @lastTime    2022/1/11
+ * @description store-global 全局属性
+ */
+export interface GlobalState {
+  disabledScrollTop: boolean;
+}
+
+export const useStoreGlobal = defineStore('global', () => {
+  const [ state, setValue ] = useReactiveState<GlobalState>({
+    disabledScrollTop: false
+  })
+
+  return {
+    ...state,
+    setValue
+  }
+})