@gx-design-vue/create-gx-cli 0.0.4 → 0.0.5

package/template-design-pro/src/components/GDesign/ProLayout/style.less

@@ -0,0 +1,272 @@
+@import './default.less';
+
+@import './BasicLayout.less';
+@import './components/GlobalHeader/Header.less';
+@import './components/GlobalHeader/style.less';
+@import './components/RightContent/style.less';
+@import './components/SiderMenu/style.less';
+@import './components/PageContainer/style.less';
+@import './components/MultiTab/style.less';
+
+.@{gx-prefix-pro} {
+  &-watermark-wrapper {
+    position: relative;
+  }
+
+  &-basic-layout {
+    .@{gx-prefix-pro} {
+      &-header-search {
+        display: inline-flex;
+        align-items: center;
+
+        &-input {
+          width: 0;
+          min-width: 0;
+          overflow: hidden;
+          background: transparent;
+          border-radius: 0;
+          transition: width 0.3s, margin-left 0.3s;
+
+          :global(.ant-select-selection) {
+            background: transparent;
+          }
+
+          input {
+            box-shadow: none !important;
+          }
+        }
+
+        &-show {
+          width: 210px;
+          margin-left: 8px;
+        }
+      }
+
+      &-right-content-action {
+        &.gx-pro-header-search {
+          padding: 0 12px;
+        }
+      }
+    }
+  }
+
+  &-global-footer {
+    padding: 0 16px;
+    margin: 48px 0 24px;
+    text-align: center;
+  }
+
+  &-global-footer-links {
+    margin-bottom: 8px;
+
+    a {
+      color: rgba(0, 0, 0, 0.45);
+      transition: all 0.3s;
+
+      &:not(:last-child) {
+        margin-right: 40px;
+      }
+    }
+  }
+
+  &-global-footer-copyright {
+    font-size: 14px;
+    color: @text-color-secondary;
+
+    a {
+      color: @text-color-secondary;
+
+      &:hover {
+        color: @text-color-secondary;
+      }
+    }
+  }
+
+  &-setting-drawer {
+    &-handle {
+      position: absolute;
+      top: 240px;
+      right: 300px;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      font-size: 16px;
+      text-align: center;
+      pointer-events: auto;
+      cursor: pointer;
+      background: var(--ant-primary-color);
+      border-radius: 4px 0 0 4px;
+    }
+
+    &-content {
+      position: relative;
+      min-height: 100%;
+      padding: 24px;
+    }
+
+    &-title {
+      margin-bottom: 12px;
+      font-size: 14px;
+      line-height: 22px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+
+    &-block-checbox {
+      display: flex;
+
+      &-item {
+        position: relative;
+        width: 44px;
+        height: 36px;
+        margin-right: 16px;
+        overflow: hidden;
+        cursor: pointer;
+        background-color: #f0f2f5;
+        border-radius: 4px;
+        box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
+
+        &::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 33%;
+          height: 100%;
+          content: '';
+          background-color: @white;
+        }
+
+        &::after {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 25%;
+          content: '';
+          background-color: @white;
+        }
+
+        &-light {
+          &::before {
+            content: '';
+            background-color: @white;
+          }
+
+          &::after {
+            background-color: @white;
+          }
+        }
+
+        &-dark {
+          &::before {
+            content: '';
+            background-color: #001529;
+          }
+
+          &::after {
+            background-color: #001529;
+          }
+        }
+
+        &-side {
+          &::before {
+            z-index: 1;
+            content: '';
+            background-color: #001529;
+          }
+
+          &::after {
+            background-color: @white;
+          }
+        }
+
+        &-mix {
+          &::before {
+            content: '';
+            background-color: @white;
+          }
+
+          &::after {
+            background-color: #001529;
+          }
+        }
+
+        &-simple {
+          &::before {
+            content: '';
+            background-color: @white;
+          }
+
+          &::after {
+            display: none;
+          }
+        }
+      }
+
+      &-selectIcon {
+        position: absolute;
+        right: 6px;
+        bottom: 4px;
+        font-size: 14px;
+        font-weight: 700;
+        color: var(--ant-primary-color);
+        pointer-events: none;
+      }
+    }
+
+    &-theme-color {
+      &-content {
+        margin-top: 16px;
+        overflow: hidden;
+      }
+
+      .gx-pro-setting-drawer-theme-color-block {
+        float: left;
+        width: 20px;
+        height: 20px;
+        margin-top: 8px;
+        margin-right: 8px;
+        font-weight: 700;
+        color: @white;
+        text-align: center;
+        cursor: pointer;
+        border-radius: 2px;
+      }
+    }
+  }
+
+  &-dropdown-container {
+    & > * {
+      background-color: #fff;
+      border-radius: 4px;
+      box-shadow: 0 6px 16px -8px rgb(0 0 0 / 8%), 0 9px 28px 0 rgb(0 0 0 / 5%),
+        0 12px 48px 16px rgb(0 0 0 / 3%);
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  html {
+    body {
+      .gx-pro-dropdown-container {
+        width: 100% !important;
+      }
+
+      .gx-pro-dropdown-container > * {
+        border-radius: 0 !important;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: @screen-md) {
+  html {
+    body {
+      .gx-pro-header-search {
+        display: none;
+      }
+    }
+  }
+}

package/template-design-pro/src/components/GDesign/ProLayout/typings.ts

@@ -0,0 +1 @@
+export type ProProps = Record<never, never>

package/template-design-pro/src/components/GDesign/ProLayout/utils/getMenuData.ts

@@ -0,0 +1,31 @@
+export { clearMenuItem, flatMap, getMenuFirstChildren } from './index'
+
+export type MenuData = {
+  menuData: AppRouteModule[];
+  breadcrumb: RecordType;
+};
+
+const formatRelativePath = (
+  routes: AppRouteModule[],
+  breadcrumb: RecordType
+): AppRouteModule[] => {
+  // 计算路由绝对路径
+  return routes.map(route => {
+    route.path = route.path.replace('//', '/')
+    // format children routes
+    if (route.children && route.children.length > 0) {
+      route.children = formatRelativePath(route.children, breadcrumb)
+    }
+    breadcrumb[`${route.path}`] = route
+    return route
+  })
+}
+
+export const getMenuData = (routes: AppRouteModule[]): MenuData => {
+  const childrenRoute = routes.find(route => route.path === '/')
+  const breadcrumb: RecordType = {}
+  return {
+    menuData: formatRelativePath(childrenRoute?.children || ([] as AppRouteModule[]), breadcrumb),
+    breadcrumb
+  }
+}

package/template-design-pro/src/components/GDesign/ProLayout/utils/index.ts

@@ -0,0 +1,94 @@
+export { default as isUrl } from './isUrl'
+export { default as isImg } from './isImg'
+
+export function clearMenuItem(menusData: AppRouteModule[]): AppRouteModule[] {
+  return menusData
+    .map((item: AppRouteModule) => {
+      const finalItem = { ...item }
+      if (!finalItem.name || finalItem.meta?.hideInMenu) {
+        return null
+      }
+
+      if (finalItem && finalItem?.children) {
+        if (
+          finalItem.children.some(
+            (child: AppRouteModule) => child && child.name && !child.meta?.hideInMenu
+          )
+        ) {
+          return {
+            ...item,
+            children: clearMenuItem(finalItem.children)
+          }
+        }
+        delete finalItem.children
+      }
+      return finalItem
+    })
+    .filter(item => item) as AppRouteModule[]
+}
+
+export function flatMap(menusData: AppRouteModule[]): AppRouteModule[] {
+  return menusData
+    .map(item => {
+      const finalItem = { ...item } as AppRouteModule
+      if (!finalItem.name || finalItem.meta?.hideInMenu) {
+        return null
+      }
+      finalItem.linkPath = getMenuFirstLastChildPath(finalItem.children || [])
+
+      if (finalItem.children) {
+        delete finalItem.children
+      }
+      return finalItem
+    })
+    .filter(item => item) as any[]
+}
+
+export function getMenuFirstChildren(menus: AppRouteModule[], key?: string) {
+  const menuKey = (key || '').split('/').length === 2
+    ? (key || '')
+    : `/${(key || '').split('/')[1]}`
+  return key === undefined
+    ? []
+    : (menus[menus.findIndex(menu => menu.path === menuKey)] || {}).children || []
+}
+
+export function getMenuFirstLastChildPath(data: AppRouteModule[]): string {
+  let newPath = ''
+  const getRoutePath = function (newdata) {
+    let firstPath = ''
+    if (newdata.children && newdata.children.length > 0) {
+      firstPath = getRoutePath(newdata.children[0])
+    } else {
+      firstPath = `${newdata.path}`
+    }
+    return firstPath
+  }
+  if (data.length > 0 && data[0].children && data[0].children.length > 0) {
+    newPath = getRoutePath(data[0].children[0])
+  } else {
+    newPath = data.length > 0 ? data[0].path : ''
+  }
+  return newPath
+}
+
+export interface Attrs {
+  [key: string]: string;
+}
+
+export type StringKeyOf<T> = Extract<keyof T, string>;
+
+export type EventHandlers<E> = {
+  [K in StringKeyOf<E>]?: E[K] extends Function ? E[K] : (payload: E[K]) => void;
+};
+
+/**
+ * Creates an object composed of the picked object properties.
+ * @param obj The source object
+ * @param paths The property paths to pick
+ */
+export function pick<T, K extends keyof T>(obj: T, paths: K[]): Pick<T, K> {
+  return {
+    ...paths.reduce((mem, key) => ({ ...mem, [key]: obj[key] }), {}),
+  } as Pick<T, K>
+}

package/template-design-pro/src/components/GDesign/ProLayout/utils/isImg/index.ts

@@ -0,0 +1,6 @@
+/** 判断是否是图片链接 */
+function isImg(path: string): boolean {
+  return /\w.(png|jpg|jpeg|svg|webp|gif|bmp)$/i.test(path)
+}
+
+export default isImg

package/template-design-pro/src/components/GDesign/ProLayout/utils/isUrl/index.ts

@@ -0,0 +1,5 @@
+const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/
+
+const isUrl = (path: string): boolean => reg.test(path)
+
+export default isUrl

package/template-design-pro/src/components/GDesign/Result/index.tsx

@@ -0,0 +1,142 @@
+import { defineComponent, onMounted, reactive, watch, onBeforeUnmount, computed } from 'vue'
+import { Row, Col } from 'ant-design-vue'
+import { useStore } from '@gx-vuex'
+import { useRouter } from 'vue-router'
+import Result403 from '@/assets/error_images/403.png'
+import Result404 from '@/assets/error_images/404.png'
+import ResultCloud from '@/assets/error_images/cloud.png'
+import './style.less'
+
+export interface subInfo {
+  headline: string
+  info: string
+  exceptionImage: string
+}
+
+interface resultSubInfo {
+  404: subInfo
+  403: subInfo
+}
+
+interface resultState {
+  jumpTime: number
+  oops: string
+  headline: string
+  info: string
+  btn: string
+  timer: number | any
+  exceptionImage: any
+}
+
+const resultSubInfo: resultSubInfo = {
+  '404': {
+    headline: '当前页面不存在...',
+    info: '请检查您输入的网址是否正确，或点击下面的按钮返回首页。',
+    exceptionImage: Result404
+  },
+  '403': {
+    headline: '您没有操作角色...',
+    info: '当前帐号没有操作角色,请联系管理员。',
+    exceptionImage: Result403
+  }
+}
+
+export default defineComponent({
+  props: {
+    status: {
+      type: String,
+      required: true,
+      default: '404'
+    }
+  },
+  setup(props) {
+    const store = useStore()
+    const router = useRouter()
+
+    const routers = computed(() => store.routes.routes)
+
+    const backRouter = computed(() => (routers.value?.length ? '/' : '/user/login'))
+
+    const state = reactive<resultState>({
+      jumpTime: 5,
+      oops: '抱歉!',
+      headline: '您没有操作角色...',
+      info: '当前帐号没有操作角色,请联系管理员。',
+      btn: `${routers.value?.length ? '返回首页' : '返回登录页'}`,
+      timer: 0,
+      exceptionImage: Result404
+    })
+
+    onMounted(() => {
+      timeChange()
+    })
+
+    onBeforeUnmount(() => {
+      clearInterval(state.timer)
+    })
+
+    watch(
+      () => props.status,
+      (val: string) => {
+        Object.keys(resultSubInfo).map((item: string) => {
+          if (item === val) {
+            Object.keys(resultSubInfo[item]).map((el: any) => {
+              state[el] = resultSubInfo[item][el]
+              return el
+            })
+          }
+          return item
+        })
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    )
+
+    const timeChange = () => {
+      state.timer = setInterval(() => {
+        if (state.jumpTime) {
+          state.jumpTime--
+        } else {
+          handleBackRouter()
+        }
+      }, 1000)
+    }
+
+    const handleBackRouter = () => {
+      router.push({ path: backRouter.value })
+      if (routers.value?.length) {
+        store.tabsRouter.delOthersVisitedRoutes({ path: '/' })
+      } else {
+        store.user.resetPermissions()
+      }
+      clearInterval(state.timer)
+    }
+
+    return () => (
+      <div class="error-container">
+        <div class="error-content">
+          <Row gutter={20}>
+            <Col lg={12} md={12} sm={24} xl={12} xs={24}>
+              <div class="pic-error">
+                <img class="pic-error-parent" src={state.exceptionImage} />
+                <img class={['pic-error-child', 'left']} src={ResultCloud} />
+              </div>
+            </Col>
+            <Col lg={12} md={12} sm={24} xl={12} xs={24}>
+              <div class="bullshit">
+                <div class="bullshit-oops">{state.oops}</div>
+                <div class="bullshit-headline">{state.headline}</div>
+                <div class="bullshit-info">{state.info}</div>
+                <a class="bullshit-return-home" onClick={() => handleBackRouter()}>
+                  {state.jumpTime}s&nbsp;{state.btn}
+                </a>
+              </div>
+            </Col>
+          </Row>
+        </div>
+      </div>
+    )
+  }
+})

package/template-design-pro/src/components/GDesign/Result/style.less

@@ -0,0 +1,140 @@
+.error-container {
+  position: relative;
+  height: 100vh;
+
+  .error-content {
+    position: absolute;
+    top: 55%;
+    left: 50%;
+    width: 40vw;
+    height: 400px;
+    transform: translate(-50%, -50%);
+
+    .pic-error {
+      position: relative;
+      float: left;
+      width: 100%;
+      overflow: hidden;
+
+      .pic-error-parent {
+        width: 100%;
+      }
+
+      .pic-error-child {
+        position: absolute;
+
+        &.left {
+          top: 17px;
+          left: 220px;
+          width: 80px;
+          opacity: 0;
+          animation-name: cloudLeft;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-delay: 1s;
+          animation-fill-mode: forwards;
+        }
+
+        @keyframes cloudLeft {
+          0% {
+            top: 17px;
+            left: 220px;
+            opacity: 0;
+          }
+
+          20% {
+            top: 33px;
+            left: 188px;
+            opacity: 1;
+          }
+
+          80% {
+            top: 81px;
+            left: 92px;
+            opacity: 1;
+          }
+
+          100% {
+            top: 97px;
+            left: 60px;
+            opacity: 0;
+          }
+        }
+      }
+    }
+
+    .bullshit {
+      position: relative;
+      float: left;
+      width: 300px;
+      padding: 30px 0;
+      overflow: hidden;
+
+      .bullshit-oops {
+        margin-bottom: 20px;
+        font-size: 32px;
+        font-weight: bold;
+        line-height: 40px;
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-fill-mode: forwards;
+      }
+
+      .bullshit-headline {
+        margin-bottom: 10px;
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 24px;
+        color: #222;
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.1s;
+        animation-fill-mode: forwards;
+      }
+
+      .bullshit-info {
+        margin-bottom: 30px;
+        font-size: 13px;
+        line-height: 21px;
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.2s;
+        animation-fill-mode: forwards;
+      }
+
+      .bullshit-return-home {
+        display: block;
+        float: left;
+        width: 110px;
+        height: 36px;
+        font-size: 14px;
+        line-height: 36px;
+        color: #fff;
+        text-align: center;
+        cursor: pointer;
+        background: var(--ant-primary-color);
+        border-radius: 100px;
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.3s;
+        animation-fill-mode: forwards;
+      }
+    }
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(60px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}