@gx-design-vue/create-gx-cli 0.1.10 → 0.1.11

package/template-gx-design-thin/src/utils/util.ts

@@ -0,0 +1,198 @@
+import { h } from 'vue'
+import { defaultSettings } from '@gx-config'
+import { isFunction, isNumber, isObject, scrollTo } from '@gx-design-vue/pro-utils'
+
+export interface NumberToShow {
+  numberValue: string;
+  countStr: string;
+  joinStr: string;
+}
+
+const { viewScrollRoot } = defaultSettings
+
+export const TransformVNode = (props: { node: any; class?: string }) => {
+  return h(isFunction(props.node) ? props.node?.(props.class) : props.node)
+}
+
+export function timeFix() {
+  const time = new Date()
+  const hour = time.getHours()
+  return hour < 9 ? '早上好' : hour <= 11 ? '上午好' : hour <= 13 ? '中午好' : hour < 20
+    ? '下午好'
+    : '晚上好'
+}
+
+/**
+ * @Author      gaoxiang
+ * @DateTime    2020/7/23
+ * @lastTime    2020/7/23
+ * @description 去除空格
+ */
+export function trim(str: string, isGlobal?: boolean) {
+  if (typeof str === 'undefined' || str.length === 0)
+    return ''
+  let result
+  result = str.replace(/(^\s+)|(\s+$)/g, '')
+  if (isGlobal) {
+    result = result.replace(/\s/g, '')
+  }
+  return result
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2021/11/3
+ * @lastTime    2021/11/3
+ * @description get参数处理
+ */
+export function tansParams(params) {
+  let result = ''
+  for (const propName of Object.keys(params)) {
+    const value = params[propName]
+    const part = encodeURIComponent(propName) + '='
+    if (value !== null && typeof (value) !== 'undefined' && value !== '') {
+      if (typeof value === 'object') {
+        for (const key of Object.keys(value)) {
+          if (value[key] !== null && typeof (value[key]) !== 'undefined') {
+            const params = propName + '[' + key + ']'
+            const subPart = encodeURIComponent(params) + '='
+            result += subPart + encodeURIComponent(value[key]) + '&'
+          }
+        }
+      } else {
+        result += part + encodeURIComponent(value) + '&'
+      }
+    }
+  }
+  return result
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/10/11
+ * @lastTime    2022/10/11
+ * @description 判断元素到上一个元素的距离
+ */
+export function handleOffsetTop(targetNode: HTMLInputElement) {
+  let totalLeft = 0
+  let totalTop = 0
+  if (!targetNode)
+    return { left: totalLeft, top: totalTop }
+  let parentNode = <HTMLElement>targetNode.offsetParent
+  // 首先把自己本身的相加
+  totalLeft += targetNode.offsetLeft
+  totalTop += targetNode.offsetTop
+  // 现在开始一级一级往上查找，只要没有遇到body，我们就把父级参照物的边框和偏移相加
+  while (parentNode) {
+    if (navigator.userAgent.includes('MSIE 8.0')) {
+      // 不是IE8我们才进行累加父级参照物的边框
+      totalTop += parentNode.clientTop
+      totalLeft += parentNode.clientLeft
+    }
+    // 把父级参照物的偏移相加
+    totalTop += parentNode.offsetTop
+    totalLeft += parentNode.offsetLeft
+    parentNode = <HTMLElement>parentNode.offsetParent
+  }
+  return { left: totalLeft, top: totalTop }
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/10/11
+ * @lastTime    2022/10/11
+ * @description 滚动到固定位置
+ */
+export function scrollToContainer(options: { count: number; root?: string; duration?: number }) {
+  if (!isObject(options))
+    return
+  scrollTo(options.count || 0, {
+    getContainer: () => document.querySelector(options?.root || viewScrollRoot) as HTMLInputElement,
+    duration: options?.duration || 200
+  })
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/6/20
+ * @lastTime    2022/6/20
+ * @description 转换数字
+ */
+export function toConvertNumberShow(
+  number: number,
+  options?: { toChinese?: boolean; fixed?: number; showStr?: boolean; unit?: string; }
+): NumberToShow {
+  const fixedNum = options?.fixed || 2
+  const countStr = options?.unit || (
+    options?.showStr === undefined || options?.showStr
+      ? options?.toChinese === undefined || options?.toChinese
+        ? number < 100000000 ? '万' : '亿'
+        : number < 100000000 ? 'w' : 'e'
+      : ''
+  )
+  if (!isNumber(number) || options?.unit)
+    return {
+      numberValue: `${number}`,
+      countStr,
+      joinStr: `${number}${countStr}`
+    }
+  if (number < 10000)
+    return {
+      numberValue: `${number}`,
+      countStr,
+      joinStr: `${number}${countStr}`
+    }
+
+  if (options?.fixed) {
+    const numStr = (number / (number < 100000000 ? 10000 : 100000000)).toFixed(1).split('.')[0]
+    const numFixed = (number / (number < 100000000 ? 10000 : 100000000)).toFixed(1).split('.')[1]
+
+    if (numFixed === '0')
+      return {
+        numberValue: `${numStr}`,
+        countStr,
+        joinStr: `${numStr}${countStr}`
+      }
+  }
+  const match = fixedNum === 1 ? /^\d+(?:\.\d{0,1})?/ : /^\d+(?:\.\d{0,2})?/
+  const numberValue = number < 100000000 ? number / 10000 : number / 100000000
+
+  return {
+    numberValue: `${(numberValue).toString().match(match)}`,
+    countStr,
+    joinStr: `${(numberValue).toString().match(match)}${countStr}`
+  }
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/8/4
+ * @lastTime    2022/8/4
+ * @description 数字转中文
+ */
+export function toChinesNum(num: number) {
+  num = num || 0
+  const changeNum = [ '零', '一', '二', '三', '四', '五', '六', '七', '八', '九' ]
+  const unit = [ '', '十', '百', '千', '万' ]
+  num = Number.parseInt(`${num}`)
+  const getWan = (temp) => {
+    const strArr = temp.toString().split('').reverse()
+    let newNum = ''
+    for (let i = 0; i < strArr.length; i++) {
+      newNum = (i === 0 && strArr[i] === '0'
+        ? ''
+        : i > 0 && strArr[i] === '0' && strArr[i - 1] === '0'
+          ? ''
+          : (num < 20 && i > 0 ? '' : changeNum[strArr[i]]) + (strArr[i] === '0'
+          ? unit[0]
+          : unit[i])) + newNum
+    }
+    return newNum
+  }
+  const overWan = Math.floor(num / 10000)
+  let noWan: any = num % 10000
+  if (noWan.toString().length < 4) {
+    noWan = '0' + noWan
+  }
+  return overWan ? getWan(overWan) + '万' + getWan(noWan) : getWan(num)
+}

package/template-gx-design-thin/src/utils/validate.ts

@@ -0,0 +1,216 @@
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判读是否为外链
+ * @param path
+ * @returns {boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是名称
+ * @param value
+ * @returns {boolean}
+ */
+export function isName(value) {
+  const reg = /^[\u4e00-\u9fa5a-zA-Z0-9]+$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否为IP
+ * @param ip
+ * @returns {boolean}
+ */
+export function isIP(ip) {
+  const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
+  return reg.test(ip)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是传统网站
+ * @param url
+ * @returns {boolean}
+ */
+export function isUrl(url) {
+  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  return reg.test(url)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是小写字母
+ * @param value
+ * @returns {boolean}
+ */
+export function isLowerCase(value) {
+  const reg = /^[a-z]+$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是大写字母
+ * @param value
+ * @returns {boolean}
+ */
+export function isUpperCase(value) {
+  const reg = /^[A-Z]+$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是大写字母开头
+ * @param value
+ * @returns {boolean}
+ */
+export function isAlphabets(value) {
+  const reg = /^[A-Za-z]+$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是端口号
+ * @param value
+ * @returns {boolean}
+ */
+export function isPort(value) {
+  const reg = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是手机号
+ * @param value
+ * @returns {boolean}
+ */
+export function isPhone(value = '', backReg?: boolean) {
+  const reg = /^1\d{10}$/
+  return backReg ? reg : reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是身份证号(第二代)
+ * @param value
+ * @returns {boolean}
+ */
+export function isIdCard(value) {
+  const reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否是邮箱
+ * @param value
+ * @returns {boolean}
+ */
+export function isEmail(value = '', backReg?: boolean) {
+  const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
+  return backReg ? reg : reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否中文
+ * @param value
+ * @returns {boolean}
+ */
+export function isChina(value) {
+  const reg = /^[\u4E00-\u9FA5]{2,4}$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否为空
+ * @param value
+ * @returns {boolean}
+ */
+export function isBlank(value) {
+  return (value == null || false || value === '' || value.trim() === '' || value.toLocaleLowerCase()
+    .trim() === 'null')
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断是否为固话
+ * @param value
+ * @returns {boolean}
+ */
+export function isTel(value) {
+  const reg = /^(400|800)([0-9\\-]{7,10})|(([0-9]{4}|[0-9]{3})([- ])?)?([0-9]{7,8})(([- 转])*([0-9]{1,4}))?$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断经度 -180.0～+180.0（整数部分为0～180，必须输入1到5位小数）
+ * @param value
+ * @returns {boolean}
+ */
+export function isLongitude(value) {
+  const reg = /^[-|+]?(0?\d{1,2}\.\d{1,5}|1[0-7]?\d{1}\.\d{1,5}|180\.0{1,5})$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 判断纬度 -90.0～+90.0（整数部分为0～90，必须输入1到5位小数）
+ * @param value
+ * @returns {boolean}
+ */
+export function isLatitude(value) {
+  const reg = /^[-|+]?([0-8]?\d{1}\.\d{1,5}|90\.0{1,5})$/
+  return reg.test(value)
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description rtsp校验，只要有rtsp://
+ * @param value
+ * @returns {boolean}
+ */
+export function isRTSP(value) {
+  const reg = /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
+  const reg1 = /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]):[0-9]{1,5}/
+  const reg2 = /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\//
+  return reg.test(value) || reg1.test(value) || reg2.test(value)
+}
+
+/**
+ * @Author      gaoxiang
+ * @DateTime    2020/11/4
+ * @lastTime    2020/11/4
+ * @description 判断是否是JSON字符串
+ */
+export function isJSONStr(str: any) {
+  if (typeof str === 'string') {
+    try {
+      const obj = JSON.parse(str)
+      if (typeof obj === 'object' && obj) {
+        return true
+      } else {
+        return false
+      }
+    } catch (e) {
+      return false
+    }
+  }
+  return false
+}
+
+export function checkURL(URL) {
+  const str = URL
+  const Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/
+  const objExp = new RegExp(Expression)
+  return objExp.test(str)
+}

package/template-gx-design-thin/src/views/Iframe/index.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import { ref, watch } from 'vue'
+import { getPrefixCls } from '@gx-design-vue/pro-utils'
+import { useProConfigContext } from '@gx-design-vue/pro-provider'
+
+const props = withDefaults(defineProps<{
+  frameSrc: string;
+}>(), {
+  frameSrc: ''
+})
+
+const { global } = useStore()
+const { token } = useProConfigContext()
+
+const prefixCls = getPrefixCls({
+  suffixCls: 'iframe-page',
+  isPor: true
+})
+
+const frameRef = ref<HTMLIFrameElement>()
+const loading = ref(true)
+
+const publicHeight = computed(
+  () =>
+    token.value.layout?.header.heightLayoutHeader + 24 * 2 + (
+      global.globalLayout.showTabsBar ? global.globalLayout.fixedMultiTab ? 62 : 46 : 0
+    )
+)
+
+const frameStyle = reactive({
+  height: `${window.innerHeight - publicHeight.value}px`,
+  borderRadius: '8px'
+} as CSSProperties)
+
+watch(
+  () => props.frameSrc,
+  (_) => {
+    loading.value = true
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const calcHeight = () => (frameStyle.height = `${window.innerHeight - publicHeight.value}px`)
+
+onMounted(() => {
+  window.addEventListener('resize', calcHeight)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', calcHeight)
+})
+
+const hideLoading = () => {
+  loading.value = false
+}
+</script>
+
+<template>
+  <g-pro-page-container :use-page-card="false">
+    <div :class="prefixCls" :style="frameStyle">
+      <a-spin :spinning="loading" size="large" :style="frameStyle">
+        <iframe
+          :src="frameSrc"
+          :class="[`${prefixCls}-main`]"
+          :style="frameStyle"
+          ref="frameRef"
+          @load="hideLoading"
+        />
+      </a-spin>
+    </div>
+  </g-pro-page-container>
+</template>

package/template-gx-design-thin/src/views/Page/one.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <g-pro-page-container>
+    页面一
+  </g-pro-page-container>
+</template>
+
+<style scoped lang="less">
+
+</style>

package/template-gx-design-thin/src/views/Page/two.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <g-pro-page-container>
+    页面二
+  </g-pro-page-container>
+</template>
+
+<style scoped lang="less">
+
+</style>

package/template-gx-design-thin/src/views/exception/403/index.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import GResult from '@gx-design/Result'
+</script>
+
+<template>
+  <GResult status="403" />
+</template>

package/template-gx-design-thin/src/views/exception/404/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import GResult from '@gx-design/Result'
+</script>
+
+<template>
+  <GResult status="404" />
+</template>
+
+<style lang="less" scoped></style>

package/template-gx-design-thin/src/views/user/login/index.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { h, reactive } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { LockOutlined, UserOutlined } from '@ant-design/icons-vue'
+import { GProFormCheckbox, GProFormLogin, GProFormPassword, GProFormText } from '@gx-design-vue/pro-form'
+import { GlobalFooter } from '@gx-design-vue/pro-layout'
+import Logo from '@/assets/logo.png'
+
+interface UserState {
+  userName: string
+  password: string
+}
+
+interface loginState {
+  redirect: string
+  dependencies: Record<string, any>
+  devDependencies: Record<string, any>
+}
+
+const { pkg } = __APP_INFO__
+
+const userOutlined = h(UserOutlined)
+const lockOutlined = h(LockOutlined)
+
+const store = useStore()
+const route = useRoute()
+const router = useRouter()
+
+const userForm = reactive({
+  userName: 'admin',
+  password: 'gx.design',
+  autoLogin: true
+} as UserState)
+
+const userRules = reactive({
+  userName: [{ required: true, message: '用户名是必填项！' }],
+  password: [{ required: true, message: '密码是必填项！' }]
+})
+
+const state: loginState = reactive({
+  redirect: '/',
+  dependencies: pkg.dependencies,
+  devDependencies: pkg.devDependencies
+})
+
+watch(
+  () => route.fullPath,
+  () => {
+    state.redirect = (route.query?.redirect as string) || '/'
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+const handleRoute = () => {
+  return state.redirect === '/exception/404' || state.redirect === '/exception/403'
+    ? '/'
+    : state.redirect
+}
+
+const handleSubmit = async (value) => {
+  const response: any = await store.user.userLogin({ ...value })
+  if (response) {
+    router.push({ path: handleRoute() })
+  }
+}
+</script>
+
+<template>
+  <div :class="$style['login-container']">
+    <div :class="$style.content">
+      <GProFormLogin
+        style="margin-top: 40px"
+        :model="userForm"
+        :rules="userRules"
+        :logo="Logo"
+        title="GX Pro Admin"
+        @submit="handleSubmit"
+      >
+        <template #subTitle>
+          <p>GX Pro Admin 是一套基于</p>
+          vue（{{ state.dependencies.vue }}） + ant-design-vue（{{
+            state.dependencies['ant-design-vue']
+          }}） 开发的一套后台系统1111
+        </template>
+        <GProFormText
+          name="userName"
+          :fieldProps="{ size: 'large', prefix: userOutlined }"
+          placeholder="用户名: admin"
+        />
+        <GProFormPassword
+          name="password"
+          :fieldProps="{ size: 'large', prefix: lockOutlined }"
+          placeholder="密码: gx.design"
+        />
+        <div class="mb-[24px]">
+          <GProFormCheckbox noStyle name="autoLogin">自动登录</GProFormCheckbox>
+          <a class="float-right">忘记密码</a>
+        </div>
+      </GProFormLogin>
+    </div>
+    <GlobalFooter />
+  </div>
+</template>
+
+<style lang="less" module>
+@import './style';
+</style>

package/template-gx-design-thin/src/views/user/login/style.less

@@ -0,0 +1,38 @@
+.login-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: auto;
+  background: #f0f2f5;
+}
+
+.content {
+  flex: 1;
+  padding: 32px 0;
+}
+
+.icon {
+  margin-left: 8px;
+  font-size: 24px;
+  color: rgba(0, 0, 0, 0.2);
+  vertical-align: middle;
+  cursor: pointer;
+  transition: color 0.3s;
+
+  &:hover {
+    color: #1677ff;
+  }
+}
+
+@media (min-width: 768px) {
+  .login-container {
+    background-image: url(/src/assets/login_images/login_background.svg);
+    background-repeat: no-repeat;
+    background-position: center 110px;
+    background-size: 100%;
+  }
+
+  .content {
+    padding: 32px 0 24px;
+  }
+}