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

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

@@ -0,0 +1,144 @@
+@import '../../default.less';
+
+@pro-layout-header-prefix-cls: ~'@{gx-prefix-pro}-header';
+@pro-layout-global-header-prefix-cls: ~'@{gx-prefix-pro}-global-header';
+
+@pro-layout-header-bg: @component-background;
+@pro-layout-header-hover-bg: @component-background;
+@pro-layout-header-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+.@{pro-layout-header-prefix-cls} {
+  &.light {
+    background-color: @component-background;
+  }
+
+  &.dark {
+    background: #001529;
+  }
+}
+
+.@{pro-layout-global-header-prefix-cls} {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 16px;
+  background: @pro-layout-header-bg;
+  box-shadow: @pro-layout-header-box-shadow;
+
+  > * {
+    height: 100%;
+  }
+
+  .@{ant-prefix}-menu {
+    background: transparent;
+  }
+
+  &.light {
+    background-color: @component-background;
+
+    .@{pro-layout-global-header-prefix-cls}-logo {
+      h1 {
+        color: @heading-color;
+      }
+    }
+  }
+
+  &.dark {
+    height: @pro-layout-header-height;
+    background: #001529;
+
+    .anticon {
+      color: @btn-primary-color;
+    }
+  }
+
+  &.wide {
+    padding: 0;
+
+    .@{pro-layout-global-header-prefix-cls} {
+      &-main {
+        margin: auto;
+        padding: 0;
+        transition: all 0.3s;
+      }
+    }
+  }
+
+  &-main {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding: 0 16px;
+
+    &.wide {
+      padding: 0;
+    }
+
+    &-left {
+      display: flex;
+      min-width: 192px;
+    }
+  }
+
+  &-collapsed-button {
+    display: flex;
+    align-items: center;
+    margin-left: 16px;
+    font-size: 20px;
+    cursor: pointer;
+  }
+
+  &-logo {
+    position: relative;
+    min-width: 165px;
+    height: 100%;
+    overflow: hidden;
+
+    &.mobile {
+      min-width: unset;
+    }
+
+    a {
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      img,
+      svg {
+        display: inline-block;
+        height: 32px;
+        vertical-align: middle;
+      }
+
+      h1 {
+        display: inline-block;
+        margin: 0 0 0 12px;
+        font-size: 16px;
+        color: @btn-primary-color;
+        vertical-align: top;
+      }
+    }
+  }
+
+  &-menu {
+    flex: 1 1 0%;
+
+    .anticon {
+      margin-right: 8px;
+    }
+
+    .@{ant-prefix}-dropdown-menu-item {
+      min-width: 160px;
+    }
+  }
+
+  &-right {
+    display: flex;
+    float: right;
+    height: 48px;
+    margin-left: auto;
+    overflow: hidden;
+  }
+}

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

@@ -0,0 +1,81 @@
+import type { CSSProperties, ExtractPropTypes } from 'vue'
+import { computed, defineComponent } from 'vue'
+import Logo from '@/assets/logo.png'
+import logoContentProps from './props'
+import { useRouteContext } from '../../RouteContext'
+
+export type LogoContentProps = Partial<ExtractPropTypes<typeof logoContentProps>>
+
+export const defaultRenderLogo = (logo?: CustomRender, logoStyle?: CSSProperties): CustomRender => {
+  if (!logo) {
+    return null
+  }
+  if (typeof logo === 'string') {
+    return <img src={logo} alt="logo" style={logoStyle} />
+  }
+  if (typeof logo === 'function') {
+    return logo()
+  }
+  return logo
+}
+
+export const defaultRenderLogoAndTitle = (
+  props: LogoContentProps,
+  renderKey: string | undefined = 'menuHeaderRender'
+) => {
+  const { logo = Logo, logoStyle, title } = props
+  const renderFunction = (props as any)[renderKey || '']
+  if (renderFunction === false) {
+    return null
+  }
+
+  const logoDom = defaultRenderLogo(logo, logoStyle)
+  const titleDom = title && <h1>{title}</h1>
+
+  if (typeof renderFunction === 'function') {
+    return renderFunction(logoDom, props.collapsed ? null : titleDom, props)
+  }
+
+  return (
+    <>
+      {logoDom || null}
+      {props.collapsed ? null : titleDom}
+    </>
+  )
+}
+
+const LogoContent = defineComponent({
+  name: 'LogoContent',
+  props: logoContentProps,
+  setup(props) {
+    const context = useRouteContext()
+
+    const layoutSide = computed(() => props.layout === 'side' || props.layout === 'simple')
+
+    const baseClassName = computed(() =>
+      context.getPrefixCls({
+        suffixCls: layoutSide.value || props.drawer ? 'sider' : 'global-header',
+        isPor: true
+      })
+    )
+
+    const headerDom = computed(() => defaultRenderLogoAndTitle(props, props.renderKey))
+
+    return () => (
+      <div
+        id="logo"
+        class={{
+          [`${baseClassName.value}-logo`]: true,
+          [`${baseClassName.value}-logo-${props.logoDirection}`]: layoutSide.value
+        }}
+        onClick={props.onMenuHeaderClick}
+      >
+        <a>{headerDom.value || null}</a>
+      </div>
+    )
+  }
+})
+
+LogoContent.inheritAttrs = false
+
+export default LogoContent

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

@@ -0,0 +1,29 @@
+import type { CSSProperties } from 'vue'
+import { PropTypes } from '@/utils'
+import { defaultSettingProps } from '../../defaultSettings'
+import type { HeaderLogoRender } from '../../RenderTypings'
+
+export default {
+  renderKey: PropTypes.string.def('menuHeaderRender'),
+  title: defaultSettingProps.title,
+  layout: defaultSettingProps.layout,
+  logo: {
+    type: [ Object, String, Function ] as PropType<CustomRender>,
+    default: () => undefined
+  },
+  logoStyle: {
+    type: Object as PropType<CSSProperties>,
+    default: () => undefined
+  },
+  logoDirection: {
+    type: String as PropType<'horizontal' | 'vertical'>,
+    default: 'horizontal'
+  },
+  drawer: PropTypes.looseBool,
+  collapsed: PropTypes.looseBool,
+  menuHeaderRender: {
+    type: [ Object, Function ] as PropType<HeaderLogoRender>,
+    default: () => undefined
+  },
+  onMenuHeaderClick: PropTypes.func
+}

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

@@ -0,0 +1,384 @@
+import {
+  computed,
+  defineComponent,
+  reactive,
+  watch,
+  onMounted,
+  toRefs,
+  ExtractPropTypes
+} from 'vue'
+import { useStore } from '@gx-vuex'
+import { useRoute, useRouter } from 'vue-router'
+import { Tabs, Menu, Dropdown } from 'ant-design-vue'
+import { EllipsisOutlined, ReloadOutlined, CloseOutlined } from '@ant-design/icons-vue'
+import config from '/config/config'
+import multiTabProps from './props'
+
+const TabPane = Tabs.TabPane
+
+export type MultiTabProps = Partial<ExtractPropTypes<typeof multiTabProps>>
+
+export default defineComponent({
+  props: multiTabProps,
+  components: {
+    EllipsisOutlined,
+    ReloadOutlined,
+    CloseOutlined
+  },
+  setup(props) {
+    const { isMobile, loading, isFixedMultiTab, onReloadPage } = toRefs(props)
+    const $route = useRoute()
+    const router = useRouter()
+    const store = useStore()
+    const { routesWhiteList } = config.defaultSettings
+    const state = reactive({
+      affixTabs: [],
+      reloadSpin: false,
+      tabActive: '',
+      tabContextActive: ''
+    })
+    const routes = computed(() => store.routes.routes)
+    const visitedRoutes = computed(() => store.tabsRouter.visitedRoutes)
+    const needFixedMultiTab = computed(() => isFixedMultiTab.value)
+    const needSettingWidth = computed(() => needFixedMultiTab.value && !isMobile.value)
+    const width = computed(() => {
+      return needSettingWidth.value
+        ? `calc(100% - ${props.collapsed ? props.collapsedWidth : props.siderWidth}px)`
+        : '100%'
+    })
+    const right = computed(() => (needFixedMultiTab.value ? 0 : undefined))
+    /**
+     * @Author      gx12358
+     * @DateTime    2021/8/6
+     * @lastTime    2021/8/6
+     * @description 初始化添加固定标签
+     */
+    const initAffixTabs = (routes) => {
+      routes.forEach((route) => {
+        if (route.meta && route.meta.tagFixed) addTabs(route)
+        if (route.children) initAffixTabs(route.children)
+      })
+    }
+    /**
+     * @Author      gx12358
+     * @DateTime    2021/8/6
+     * @lastTime    2021/8/6
+     * @description 添加标签路由
+     */
+    const addTabs = async (tag) => {
+      if (
+        tag.name &&
+        tag.meta &&
+        tag.meta.tagHidden !== true &&
+        !routesWhiteList.includes(tag.path)
+      ) {
+        let matched = [tag.name]
+        if (tag.matched) matched = tag.matched.map((item) => item.name)
+        await store.tabsRouter.addVisitedRoute({
+          tagFixed: tag.meta && tag.meta.tagFixed,
+          path: tag.path,
+          fullPath: tag.fullPath || tag.path,
+          query: tag.query,
+          params: tag.params,
+          name: tag.name,
+          matched: matched,
+          meta: { ...tag.meta }
+        })
+        if (isActive(tag)) state.tabActive = tag.fullPath || tag.path
+      }
+    }
+    onMounted(() => {
+      initAffixTabs(routes.value)
+    })
+    watch(
+      () => $route,
+      (route) => {
+        addTabs(route)
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    )
+    /**
+     * @Author      gx12358
+     * @DateTime    2021/8/6
+     * @lastTime    2021/8/6
+     * @description 是否是当前页
+     */
+    const isActive = (route) => {
+      return route.path === $route.path
+    }
+    /**
+     * @Author      gx12358
+     * @DateTime    2021/8/6
+     * @lastTime    2021/8/6
+     * @description 当前页是否固定
+     */
+    const isFixed = (tag) => {
+      return tag.meta && tag.meta.tagFixed
+    }
+    /**
+     * @Author      gx12358
+     * @DateTime    2021/8/6
+     * @lastTime    2021/8/6
+     * @description 标签点击
+     */
+    const handleTabClick = (tab) => {
+      const route = visitedRoutes.value.filter((item) => item.path === tab)[0]
+      if ($route.fullPath !== route.fullPath) router.push(route.fullPath)
+    }
+    /**
+     * @Author      gx12358
+     * @DateTime    2021/8/6
+     * @lastTime    2021/8/6
+     * @description 标签删除
+     */
+    const handleTabRemove = async (e, fullPath) => {
+      e.stopPropagation()
+      const view = visitedRoutes.value.find((item) => {
+        return fullPath === item.fullPath
+      })
+      await store.tabsRouter.delVisitedRoute(view)
+      if (isActive(view)) toLastTag()
+    }
+    /**
+     * @Author      gx12358
+     * @DateTime    2021/8/6
+     * @lastTime    2021/8/6
+     * @description 标签副操作点击
+     */
+    const handleClick = ({ key }, stateType) => {
+      switch (key) {
+        case 'closeOthersTabs':
+          closeOthersTabs(stateType)
+          break
+        case 'closeLeftTabs':
+          closeLeftTabs(stateType)
+          break
+        case 'closeRightTabs':
+          closeRightTabs(stateType)
+          break
+        default:
+          break
+      }
+    }
+    const dropdownVisible = (path) => {
+      state.tabContextActive = path
+    }
+    const tabBarExtraState = (type, path: any) => {
+      const currentIndex = visitedRoutes.value.findIndex((item) => item.fullPath === path)
+      let status = false
+      switch (type) {
+        case 1:
+          status =
+            visitedRoutes.value.length === 1 ||
+            (visitedRoutes.value.findIndex((item) => item.meta.tagFixed) === 0 &&
+              visitedRoutes.value.length === 2)
+          break
+        case 2:
+          status =
+            currentIndex === 0 ||
+            (currentIndex === 1 &&
+              visitedRoutes.value.findIndex((item) => item.meta.tagFixed) === 0)
+          break
+        case 3:
+          status =
+            currentIndex === visitedRoutes.value.length - 1 || visitedRoutes.value.length === 1
+          break
+      }
+      return status
+    }
+    /**
+     * @Author      gx12358
+     * @DateTime    2021/8/6
+     * @lastTime    2021/8/6
+     * @description 刷新当前路由
+     */
+    const reloadPage = () => {
+      state.reloadSpin = true
+      onReloadPage.value && onReloadPage.value()
+      setTimeout(() => {
+        state.reloadSpin = false
+      }, 500)
+    }
+    /**
+     * @Author      gx12358
+     * @DateTime    2021/8/6
+     * @lastTime    2021/8/6
+     * @description 关闭其他页
+     */
+    const closeOthersTabs = async (stateType) => {
+      await store.tabsRouter.delOthersVisitedRoutes(toThisTag(stateType))
+      toContextTag(stateType)
+    }
+    /**
+     * @Author      gx12358
+     * @DateTime    2021/8/6
+     * @lastTime    2021/8/6
+     * @description 关闭左侧所有路由
+     */
+    const closeLeftTabs = async (stateType) => {
+      await store.tabsRouter.delLeftVisitedRoutes(toThisTag(stateType))
+      toContextTag(stateType)
+    }
+    /**
+     * @Author      gx12358
+     * @DateTime    2021/8/6
+     * @lastTime    2021/8/6
+     * @description 关闭右侧所有路由
+     */
+    const closeRightTabs = async (stateType) => {
+      await store.tabsRouter.delRightVisitedRoutes(toThisTag(stateType))
+      toContextTag(stateType)
+    }
+    /**
+     * @Author      gx12358
+     * @DateTime    2021/8/6
+     * @lastTime    2021/8/6
+     * @description 跳转上下路由
+     */
+    const toContextTag = (stateType) => {
+      const currentPath = stateType === 'tabActive' ? $route.fullPath : state[stateType]
+      if (stateType !== $route.fullPath) {
+        router.push(currentPath)
+      }
+    }
+    /**
+     * @Author      gx12358
+     * @DateTime    2021/8/6
+     * @lastTime    2021/8/6
+     * @description 跳转路由：/
+     */
+    const toLastTag = () => {
+      const latestView = visitedRoutes.value.slice(-1)[0]
+      if (latestView) router.push(latestView)
+      else router.push('/')
+    }
+    /**
+     * @Author      gx12358
+     * @DateTime    2021/8/6
+     * @lastTime    2021/8/6
+     * @description 跳转点击页
+     */
+    const toThisTag = (stateType) => {
+      const currentPath = stateType === 'tabActive' ? $route.fullPath : state[stateType]
+      const view = visitedRoutes.value.find((item) => item.fullPath === currentPath)
+      if (currentPath !== view?.path || '') router.push(view)
+      return view
+    }
+
+    const defaultRenderTabMenu = (record) => (
+      <Menu onClick={(e) => handleClick(e, 'tabContextActive')}>
+        <Menu.Item
+          disabled={tabBarExtraState(1, record.fullPath || record.path)}
+          key="closeOthersTabs"
+        >
+          关闭其他
+        </Menu.Item>
+        <Menu.Item
+          disabled={tabBarExtraState(2, record.fullPath || record.path)}
+          key="closeLeftTabs"
+        >
+          关闭左侧
+        </Menu.Item>
+        <Menu.Item
+          disabled={tabBarExtraState(3, record.fullPath || record.path)}
+          key="closeRightTabs"
+        >
+          关闭右侧
+        </Menu.Item>
+      </Menu>
+    )
+
+    const defaultRenderTab = (record) => (
+      <Dropdown
+        trigger="contextmenu"
+        overlay={defaultRenderTabMenu(record)}
+        onVisibleChange={(_) => dropdownVisible(record.fullPath)}
+      >
+        <div class="gx-pro-multi-tab-content">
+          {record.meta.title}
+          {state.tabActive === (record.fullPath || record.path) && (
+            <ReloadOutlined
+              class="gx-pro-multi-tab-reload-btn"
+              style={{ marginRight: 0 }}
+              spin={state.reloadSpin}
+              onClick={() => {
+                state.reloadSpin ? null : reloadPage()
+              }}
+            />
+          )}
+          {visitedRoutes.value.length > 1 && !isFixed(record) && (
+            <CloseOutlined
+              class="gx-pro-multi-tab-close-btn"
+              style={{ marginRight: 0 }}
+              onClick={(e) => handleTabRemove(e, record.fullPath)}
+            />
+          )}
+        </div>
+      </Dropdown>
+    )
+
+    const defaultExtraMenu = () => (
+      <Menu onClick={(e) => handleClick(e, 'tabActive')}>
+        <Menu.Item disabled={tabBarExtraState(1, state.tabActive)} key="closeOthersTabs">
+          关闭其他
+        </Menu.Item>
+        <Menu.Item disabled={tabBarExtraState(2, state.tabActive)} key="closeLeftTabs">
+          关闭左侧
+        </Menu.Item>
+        <Menu.Item disabled={tabBarExtraState(3, state.tabActive)} key="closeRightTabs">
+          关闭右侧
+        </Menu.Item>
+      </Menu>
+    )
+
+    const tabBarExtraContent = () => (
+      <Dropdown overlay={defaultExtraMenu()}>
+        <EllipsisOutlined class="gx-pro-multi-tab-dropdown-menu-btn" rotate={90} />
+      </Dropdown>
+    )
+
+    return () => (
+      <>
+        {props.isFixedMultiTab && (
+          <div
+            class={{
+              ['gx-pro-multi-tab-fixed']: true,
+              ['gx-pro-multi-tab-fixed-loading']: loading.value
+            }}
+          />
+        )}
+        <div
+          style={{
+            margin: 0,
+            width: width.value,
+            right: right.value,
+            zIndex: 99
+          }}
+          class={{
+            ['gx-pro-multi-tab']: true,
+            ['gx-pro-multi-tab-wrap']: props.isFixedMultiTab,
+            ['gx-pro-multi-tab-wrap-fixed']: props.isFixedMultiTab,
+            ['gx-pro-multi-tab-wrap-loading']: loading.value
+          }}
+        >
+          <Tabs
+            onTabClick={handleTabClick}
+            activeKey={state.tabActive}
+            hideAdd
+            type="editable-card"
+            v-slots={{
+              rightExtra: (_) => tabBarExtraContent()
+            }}
+          >
+            {visitedRoutes.value.map((item) => (
+              <TabPane key={item.fullPath} closable={false} tab={defaultRenderTab(item)} />
+            ))}
+          </Tabs>
+        </div>
+      </>
+    )
+  }
+})

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

@@ -0,0 +1,15 @@
+import { PropTypes } from '@/utils'
+import { defaultSettingProps } from '../../defaultSettings'
+import { baseMenuProps, siderMenuProps } from '../SiderMenu/props'
+
+export default {
+  loading: PropTypes.looseBool,
+  isMobile: siderMenuProps.isMobile,
+  collapsed: baseMenuProps.collapsed,
+  siderWidth: siderMenuProps.siderWidth,
+  collapsedWidth: siderMenuProps.collapsedWidth,
+  isFixedMultiTab: defaultSettingProps.fixedMultiTab,
+  onReloadPage: {
+    type: Function as PropType<() => void>
+  }
+}