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

package/template-design-pro/src/components/PageLoading/index.tsx

@@ -0,0 +1,44 @@
+import { defineComponent, reactive } from 'vue'
+
+export default defineComponent({
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    tip: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: 'large'
+    }
+  },
+  setup(props) {
+    const style: any = reactive({
+      textAlign: 'center',
+      position: 'fixed',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 0
+    })
+    const spinStyle = reactive({
+      position: 'absolute',
+      left: '50%',
+      top: '40%',
+      transform: 'translate(-50%, -50%)'
+    })
+    return () => (
+      <>
+        {props.loading ? (
+          <div style={style}>
+            <a-spin size={props.size} style={spinStyle} tip={props.tip} />
+          </div>
+        ) : null}
+      </>
+    )
+  }
+})

package/template-design-pro/src/components/PageTransition/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <transition
+    v-if="!disabled"
+    :enter-active-class="`animated ${enterAnimate} page-toggle-enter-active`"
+    :leave-active-class="`animated ${leaveAnimate} page-toggle-leave-active`"
+  >
+    <slot></slot>
+  </transition>
+  <div v-else>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import animates from '/config/default/animate'
+
+export default defineComponent({
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    animate: {
+      type: String,
+      default: 'bounce'
+    },
+    direction: {
+      type: String
+    },
+    reverse: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const enterAnimate = computed(() => {
+      return activeClass(false)
+    })
+    const leaveAnimate = computed(() => {
+      return activeClass(true)
+    })
+    const activeClass = (isLeave) => {
+      let animate = animates.preset.find((item) => props.animate == item.name)
+      if (animate == undefined) {
+        return ''
+      }
+      let direction = ''
+      if (props.direction == undefined) {
+        direction = animate.directions[0]
+      } else {
+        direction = animate.directions.find((item) => item == props.direction)
+      }
+      direction = direction == undefined || direction === 'default' ? '' : direction
+      if (direction != '') {
+        direction =
+          isLeave && props.reverse ? reversePosition(direction, animate.directions) : direction
+        direction = direction[0].toUpperCase() + direction.substring(1)
+      }
+      let t = isLeave ? 'Out' : 'In'
+      return animate.name + t + direction
+    }
+    const reversePosition = (direction, directions) => {
+      if (direction.length == 0 || direction == 'x' || direction == 'y') {
+        return direction
+      }
+      let index = directions.indexOf(direction)
+      index = index % 2 == 1 ? index - 1 : index + 1
+      return directions[index]
+    }
+    return {
+      enterAnimate,
+      leaveAnimate
+    }
+  }
+})
+</script>
+
+<style lang="less">
+.page-toggle-enter-active {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: transparent;
+  animation-duration: .3s !important;
+}
+
+.page-toggle-leave-active {
+  display: none;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: transparent;
+  animation-duration: .3s !important;
+}
+</style>

package/template-design-pro/src/components/index.ts

@@ -0,0 +1,6 @@
+// gx-admin-组件
+import PageLoading from './PageLoading'
+
+export {
+  PageLoading,
+}

package/template-design-pro/src/core/ant-design/index.ts

@@ -0,0 +1,14 @@
+import {
+  Button,
+  message
+} from 'ant-design-vue'
+
+const antDesign = (app) => {
+  app.use(Button)
+  message.config({
+    duration: 2,
+    maxCount: 1
+  })
+}
+
+export default antDesign

package/template-design-pro/src/core/gx-admin-design/index.ts

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

package/template-design-pro/src/core/gx-admin-directives/index.ts

@@ -0,0 +1,8 @@
+import type { App } from 'vue'
+import { setupPermissionDirective } from './permission'
+
+const directive = (app: App) => {
+  setupPermissionDirective(app)
+}
+
+export default directive

package/template-design-pro/src/core/gx-admin-directives/permission.ts

@@ -0,0 +1,28 @@
+import type { App, Directive, DirectiveBinding } from 'vue'
+
+import { usePermissions } from '@gx-admin/hooks/system'
+
+function isAuth(el: Element, binding: any) {
+  const { permission, hasPermission } = usePermissions()
+
+  const value = binding.value
+  if (value) {
+    hasPermission(value)
+    if (!permission.value) el.parentNode?.removeChild(el)
+  }
+  return
+}
+
+const mounted = (el: Element, binding: DirectiveBinding) => {
+  isAuth(el, binding)
+}
+
+const authDirective: Directive = {
+  mounted
+}
+
+export function setupPermissionDirective(app: App) {
+  app.directive('auth', authDirective)
+}
+
+export default authDirective

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

@@ -0,0 +1,7 @@
+import Scrollbars from '@gx-design/Scrollbars'
+
+const gxDesign = (app) => {
+  // scrollbars
+  app.component('g-bars', Scrollbars)
+}
+export default gxDesign

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

@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import ProLayout, { PageContainer } from '@gx-design/ProLayout'
+
+const gxProDesign = (app: App) => {
+  // pro-layout
+  app.component('g-pro-layout', ProLayout)
+  // pro-wrapper
+  app.component('g-pro-page-container', PageContainer)
+}
+export default gxProDesign

package/template-design-pro/src/core/index.ts

@@ -0,0 +1,27 @@
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import weekOfYear from 'dayjs/plugin/weekOfYear'
+import advancedFormat from 'dayjs/plugin/advancedFormat'
+import 'dayjs/locale/zh-cn'
+
+import antDesign from './ant-design'
+import gxDesign from './gx-design'
+import gxProDesign from './gx-pro-design'
+import gxAdminDesign from './gx-admin-design'
+
+import setupGlobDirectives from './gx-admin-directives'
+
+dayjs.locale('zh-cn')
+dayjs.extend(relativeTime)
+dayjs.extend(weekOfYear)
+dayjs.extend(advancedFormat)
+
+export function setupGlobCommon(app) {
+  // design
+  antDesign(app)
+  gxDesign(app)
+  gxProDesign(app)
+  gxAdminDesign(app)
+  // directives
+  setupGlobDirectives(app)
+}

package/template-design-pro/src/design/ant-design/index.less

@@ -0,0 +1,4 @@
+@import './layout';
+@import './menu';
+@import './table';
+@import './tooltip';

package/template-design-pro/src/design/ant-design/layout.less

@@ -0,0 +1,29 @@
+/**
+ * @Author      gx12358
+ * @DateTime    2021/7/30
+ * @lastTime    2021/7/30
+ * @description 修改左侧菜单栏滚动条样式
+ */
+
+html {
+  body {
+    .ant-layout-sider {
+      .ant-layout-sider-children {
+        &::-webkit-scrollbar {
+          width: 6px;
+          height: 6px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: rgba(0, 0, 0, 0.12);
+          border-radius: 3px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: hsla(0, 0%, 100%, 0.15);
+          border-radius: 3px;
+        }
+      }
+    }
+  }
+}

package/template-design-pro/src/design/ant-design/menu.less

@@ -0,0 +1,55 @@
+/**
+ * @Author      gx12358
+ * @DateTime    2021/7/30
+ * @lastTime    2021/7/30
+ * @description menu Icon图标
+ */
+html {
+  body {
+    .ant-menu-item .anticon,
+    .ant-menu-submenu-title .anticon {
+      margin-right: 10px !important;
+    }
+
+    .ant-menu-item .customicon,
+    .ant-menu-submenu-title .customicon {
+      min-width: 14px;
+      margin-right: 8px !important;
+      font-size: 14px;
+      vertical-align: bottom;
+      transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
+        margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    }
+
+    .ant-menu-item .customimg,
+    .ant-menu-submenu-title .customimg {
+      width: 14px;
+      min-width: 14px;
+      margin-right: 8px !important;
+      transition: margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    }
+
+    .ant-menu-submenu-title {
+      [class*='ri'] {
+        min-width: 16px;
+        margin-right: 8px !important;
+        font-size: 16px;
+        vertical-align: bottom;
+        transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
+          margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
+    }
+
+    .ant-menu-inline-collapsed {
+      .ant-menu-submenu-title {
+        [class*='ri'] {
+          margin-right: 16px !important;
+        }
+
+        [class*='iconfont'] {
+          margin-right: 18px !important;
+        }
+      }
+    }
+  }
+}

package/template-design-pro/src/design/ant-design/table.less

@@ -0,0 +1,67 @@
+/**
+ * @Author      gx12358
+ * @DateTime    2021/7/30
+ * @lastTime    2021/7/30
+ * @description ant-modal
+ */
+
+html {
+  body {
+    .ant-table-thead {
+      & > tr > th {
+        position: relative;
+        font-weight: 700;
+        color: #262626;
+        background: #fafafa;
+
+        .ant-table-header-column {
+          font-weight: 700;
+          background: #fafafa;
+        }
+      }
+    }
+
+    .ant-table-column-title {
+      position: relative;
+      z-index: 1;
+      flex: 1 1;
+    }
+
+    .ant-table-resize-handle {
+      position: absolute;
+      top: 0;
+      height: 100% !important;
+      bottom: 0;
+      left: auto !important;
+      right: -8px;
+      cursor: col-resize;
+      touch-action: none;
+      -webkit-user-select: auto;
+      -moz-user-select: auto;
+      user-select: auto;
+      width: 16px;
+      z-index: 1;
+    }
+
+    .ant-table-resize-handle:hover .ant-table-resize-handle-line,
+    .dragging .ant-table-resize-handle-line {
+      opacity: 1;
+    }
+
+    .ant-table-resize-handle-line {
+      display: block;
+      width: 1px;
+      margin-left: 7px;
+      height: 100% !important;
+      background-color: var(--ant-primary-color);
+      opacity: 0;
+    }
+
+    .ant-table-column-sorters {
+      display: flex;
+      flex: auto;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+}

package/template-design-pro/src/design/ant-design/tooltip.less

@@ -0,0 +1,13 @@
+/**
+ * @Author      gx12358
+ * @DateTime    2021/7/30
+ * @lastTime    2021/7/30
+ * @description tooltip 修改
+ */
+html {
+  body {
+    .ant-tooltip-inner a {
+      color: @white;
+    }
+  }
+}

package/template-design-pro/src/design/color.less

@@ -0,0 +1 @@
+/* 文字颜色相关 */

package/template-design-pro/src/design/config.less

@@ -0,0 +1,5 @@
+@import (reference) 'color.less';
+@import (reference) 'mixin.less';
+
+@gx-prefix: gx;
+@gx-prefix-pro: ~'@{gx-prefix}-pro';

package/template-design-pro/src/design/index.less

@@ -0,0 +1,41 @@
+@import './config';
+@import './normalize';
+@import './mixin';
+@import './color';
+@import './ant-design/index';
+
+html,
+body,
+#app {
+  height: 100%;
+  .reset();
+}
+
+html {
+  body {
+    /**
+     * @Author      gx12358
+     * @DateTime    2021/5/20
+     * @lastTime    2021/5/20
+     * @description 清楚浮动
+     */
+
+    .clearfix {
+      .clearfix();
+    }
+  }
+}
+
+@media (max-width: @screen-xs) {
+  .ant-table {
+    width: 100%;
+    overflow-x: auto;
+  }
+}
+
+// 兼容IE11
+@media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {
+  body .ant-design-pro > .ant-layout {
+    min-height: 100vh;
+  }
+}

package/template-design-pro/src/design/mixin.less

@@ -0,0 +1,66 @@
+/*一些less函数*/
+.scrollbar() {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(50, 50, 50, 0.3);
+    border-radius: 1em;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: rgba(50, 50, 50, 0.1);
+    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: '';
+  }
+  &::after {
+    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;
+}