@gx-design-vue/create-gx-cli 0.0.1

package/template-mobile-ts/postcss.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+    'postcss-pxtorem': {
+      rootValue({ file }) {
+        return file.indexOf('vant') !== -1 ? 37.5 : 75
+      },
+      propList: [ '*' ]
+    }
+  }
+}

package/template-mobile-ts/prettier.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  printWidth: 100,
+  useTabs: false,
+  semi: false,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  bracketSpacing: true,
+  trailingComma: 'none',
+  jsxBracketSameLine: false,
+  jsxSingleQuote: false,
+  arrowParens: 'always',
+  insertPragma: false,
+  requirePragma: false,
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'auto',
+  rangeStart: 0,
+};

package/template-mobile-ts/public/js/flexible.js

@@ -0,0 +1,44 @@
+(function flexible (window, document) {
+  var docEl = document.documentElement
+  var dpr = window.devicePixelRatio || 1
+
+  // adjust body font size
+  function setBodyFontSize () {
+    if (document.body) {
+      document.body.style.fontSize = (12 * dpr) + 'px'
+    }
+    else {
+      document.addEventListener('DOMContentLoaded', setBodyFontSize)
+    }
+  }
+  setBodyFontSize();
+
+  // set 1rem = viewWidth / 10
+  function setRemUnit () {
+    var rem = (docEl.clientWidth < 600 ? docEl.clientWidth : 600) / 10
+    docEl.style.fontSize = rem + 'px'
+  }
+
+  setRemUnit()
+
+  // reset rem unit on page resize
+  window.addEventListener('resize', setRemUnit)
+  window.addEventListener('pageshow', function (e) {
+    if (e.persisted) {
+      setRemUnit()
+    }
+  })
+
+  // detect 0.5px supports
+  if (dpr >= 2) {
+    var fakeBody = document.createElement('body')
+    var testElement = document.createElement('div')
+    testElement.style.border = '.5px solid transparent'
+    fakeBody.appendChild(testElement)
+    docEl.appendChild(fakeBody)
+    if (testElement.offsetHeight === 1) {
+      docEl.classList.add('hairlines')
+    }
+    docEl.removeChild(fakeBody)
+  }
+}(window, document))

package/template-mobile-ts/src/App.vue

@@ -0,0 +1,5 @@
+<template>
+  <div id="gx-pro-mobile">
+    <router-view />
+  </div>
+</template>

package/template-mobile-ts/src/components/PageContainer/ProSkeleton.tsx

@@ -0,0 +1,30 @@
+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 = []
+    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-ts/src/components/PageContainer/index.tsx

@@ -0,0 +1,113 @@
+import { defineComponent, toRefs, watch } from 'vue'
+import { usePageLoading } from '@gx-mobile/hooks/web'
+import ProSkeleton from './ProSkeleton'
+import styles from './style.module.less'
+import type { SetLoadingParams } from '@gx-mobile/hooks/web/usePageLoading'
+
+export type PageLoadingTpe = 'toast' | 'skeleton'
+
+type ChangeLoadingParams<T> = Omit<SetLoadingParams<T>, 'type'> & {
+  hiddenSlot?: boolean;
+}
+
+const PageContainer = defineComponent({
+  name: 'GProPageContainer',
+  props: {
+    loading: Boolean as PropType<boolean>,
+    hiddenSlot: {
+      type: Boolean as PropType<boolean>,
+      default: true
+    },
+    loadingMsg: {
+      type: String as PropType<string>,
+      default: '加载中'
+    },
+    loadingType: {
+      type: String as PropType<PageLoadingTpe>,
+      default: 'toast'
+    },
+    bgcolor: {
+      type: String as PropType<string>,
+      default: '#fafafa'
+    }
+  },
+  emits: [ 'update:loading' ],
+  setup(props, { slots, expose, emit }) {
+    const { loading: loadingRef, loadingType, loadingMsg, hiddenSlot } = toRefs(props)
+
+    const initStatus = ref(true)
+
+    const hiddenSlotRef = ref(props.hiddenSlot)
+
+    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
+    })
+
+    const changeLoading = ({
+      value,
+      message,
+      hiddenSlot
+    }: ChangeLoadingParams<boolean>) => {
+      if (loadingType.value === 'toast') {
+        hiddenSlotRef.value = hiddenSlot
+        setLoading({ value, message, type: loadingType.value })
+      }
+    }
+
+    expose({
+      toggleLoading: changeLoading
+    })
+
+    return () => {
+      return (
+        <div class={styles.pageContainer} style={{ backgroundColor: props.bgcolor }}>
+          <div class={styles.pageContainerWrapper}>
+            {
+              loadingType.value === 'skeleton'
+                ? (
+                  <ProSkeleton line={3} loading={loading.value}>
+                    {slots.default?.()}
+                  </ProSkeleton>
+                )
+                : ((!loading.value || !hiddenSlotRef.value) && <>{slots.default?.()}</>)
+            }
+          </div>
+        </div>
+      )
+    }
+  }
+})
+
+export default PageContainer

package/template-mobile-ts/src/components/PageContainer/style.module.less

@@ -0,0 +1,14 @@
+.pageContainer {
+  width: 100%;
+  min-height: 100vh;
+  padding: 15px;
+  background: var(--van-doc-background-3);
+  
+  .pageContainerWrapper {
+    position: relative;
+  }
+  
+  .skeletonItem + .skeletonItem {
+    margin-top: 50px;
+  }
+}

package/template-mobile-ts/src/core/gx-design/index.ts

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

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

@@ -0,0 +1,12 @@
+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-ts/src/core/vant-design/index.ts

@@ -0,0 +1,9 @@
+import {
+  Button
+} from 'vant'
+
+const vantDesign = (app) => {
+  app.use(Button)
+}
+
+export default vantDesign

package/template-mobile-ts/src/design/index.less

@@ -0,0 +1,3 @@
+@import './root';
+@import './reset';
+@import './vant';

package/template-mobile-ts/src/design/reset.less

@@ -0,0 +1,155 @@
+/****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 {
+  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;
+}
+
+input[type='button'],
+input[type='submit'],
+input[type='reset'] {
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+
+html,
+body {
+  overflow-x: hidden;
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+}
+
+* {
+  -webkit-overflow-scrolling: touch;
+}
+
+html {
+  -webkit-tap-highlight-color: transparent;
+}
+
+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;
+  }
+}
+
+.fl {
+  float: left;
+}
+
+.fr {
+  float: right;
+}
+
+.clearfix {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: ' ';
+  }
+  &::after {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    visibility: hidden;
+  }
+}

package/template-mobile-ts/src/design/root.less

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

package/template-mobile-ts/src/design/vant.less

@@ -0,0 +1,2 @@
+:root {
+}

package/template-mobile-ts/src/global.less

@@ -0,0 +1 @@
+@import './design/index';

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

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

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

@@ -0,0 +1,58 @@
+import type { Ref } from 'vue'
+import { ref, watch } from 'vue'
+import { Toast } from 'vant'
+import { ToastWrapperInstance } from 'vant/lib/toast/types'
+import type { PageLoadingTpe } from '@/components/PageContainer'
+
+export type 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 pageLoading = ref(initValue) as Ref<T>
+
+  const loadingMessage = ref(defaultMessage)
+
+  const loadingType = ref(defaultType)
+
+  const pageLoadingRef = ref<ToastWrapperInstance>()
+
+  watch(() => pageLoading.value, (val) => {
+    if (val) {
+      if (loadingType.value === 'toast') {
+        pageLoadingRef.value = Toast.loading({
+          duration: 0,
+          forbidClick: true,
+          message: loadingMessage.value || '加载中'
+        })
+      } else {
+        pageLoadingRef.value?.clear()
+      }
+    } else {
+      pageLoadingRef.value?.clear()
+    }
+  }, {
+    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-ts/src/layout/BasicLayout.vue

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

package/template-mobile-ts/src/layout/basicLayout.less

@@ -0,0 +1,11 @@
+.basic-layout {
+  height: 100%;
+}
+
+@media screen and (min-width: 800px) {
+  .basic-layout {
+    width: 10rem;
+    max-width: 10rem;
+    margin: 0 auto;
+  }
+}

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

@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+import { setupRouter } from '@/router'
+import { setupStore } from './store'
+import { setupGlobCommon } from './core'
+import App from './App.vue'
+
+import 'vant/es/toast/style';
+
+import './global.less'
+
+function startApp() {
+  const app = createApp(App)
+
+  // 配置store
+  setupStore(app)
+
+  // 配置路由
+  setupRouter(app)
+
+  setupGlobCommon(app)
+
+  app.mount('#app')
+}
+
+startApp()

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

@@ -0,0 +1,25 @@
+import type { App } from 'vue'
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+import { useStoreGlobal } from '@/store'
+import getPageTitle from '@/utils/pageTitle'
+import { constantRoutes } from './routes'
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: constantRoutes as unknown as RouteRecordRaw[]
+})
+
+const doRouterPermission = () => {
+  router.afterEach((to) => {
+    const global = useStoreGlobal()
+    const { meta }: any = to
+    document.title = getPageTitle(global.title, meta.title || '')
+  })
+}
+
+// 配置路由器
+export function setupRouter(app: App<Element>) {
+  app.use(router);
+
+  doRouterPermission()
+}

package/template-mobile-ts/src/router/routes.ts

@@ -0,0 +1,20 @@
+import type { AppRouteModule } from './typings'
+import BasicLayout from '@/layout/BasicLayout.vue'
+
+export const constantRoutes: AppRouteModule[] = [
+  {
+    path: '/',
+    component: BasicLayout,
+    redirect: '/home',
+    children: [
+      {
+        path: '/home',
+        name: 'Home',
+        meta: {
+          title: '首页'
+        },
+        component: () => import('@/views/home.vue')
+      }
+    ]
+  }
+]

package/template-mobile-ts/src/router/typings.ts

@@ -0,0 +1,8 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+interface AppRouteRecordRaw {
+  hidden?: boolean;
+  homePage?: number;
+}
+
+export type AppRouteModule = AppRouteRecordRaw & RouteRecordRaw;

package/template-mobile-ts/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-ts/src/store/index.ts

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