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

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

@@ -0,0 +1,262 @@
+@import '../../default.less';
+
+@pro-layout-sider-menu-prefix-cls: ~'@{gx-prefix-pro}-sider';
+
+@nav-header-height: @pro-layout-header-height;
+
+.@{pro-layout-sider-menu-prefix-cls} {
+  position: relative;
+  z-index: 10;
+  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+
+  &.wide {
+    position: sticky;
+    z-index: 100;
+    overflow: auto;
+    overflow-x: hidden;
+    border-radius: 8px;
+    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+  }
+
+  &-menu {
+    position: relative;
+    z-index: 10;
+    min-height: 100%;
+    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+  }
+
+  .@{ant-prefix}-layout-sider-children {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    ::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.15);
+      border-radius: 3px;
+      box-shadow: inset 0 0 5px rgba(37, 37, 37, 0.05);
+    }
+
+    /* 滚动条滑块 */
+
+    ::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 3px;
+      box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05);
+    }
+  }
+
+  &.@{ant-prefix}-layout-sider-collapsed {
+    .@{ant-prefix}-menu-inline-collapsed {
+      width: 48px;
+    }
+
+    .@{pro-layout-sider-menu-prefix-cls} {
+      &-logo {
+        padding: 16px 8px;
+      }
+    }
+  }
+
+  &.@{ant-prefix}-layout-sider.@{pro-layout-sider-menu-prefix-cls}-fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    height: 100%;
+    overflow: auto;
+    overflow-x: hidden;
+    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+
+    > .@{ant-prefix}-menu-root {
+      :not(.@{pro-layout-sider-menu-prefix-cls}-link-menu) {
+        height: ~'calc(100vh - @{nav-header-height})';
+        overflow-y: auto;
+      }
+    }
+  }
+
+  &.light {
+    background-color: @component-background;
+    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+
+    .@{ant-prefix}-layout-sider-children {
+      ::-webkit-scrollbar-track {
+        background: rgba(0, 0, 0, 0.06);
+        border-radius: 3px;
+        box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
+      }
+
+      /* 滚动条滑块 */
+
+      ::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.12);
+        border-radius: 3px;
+        box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
+      }
+    }
+
+    .@{pro-layout-sider-menu-prefix-cls}-logo {
+      h1 {
+        color: var(--ant-primary-color);
+      }
+    }
+
+    .@{ant-prefix}-menu-light {
+      border-right-color: transparent;
+    }
+
+    .@{pro-layout-sider-menu-prefix-cls}-collapsed-button {
+      //border-top: @border-width-base @border-style-base rgba(0, 0, 0, 0.06);
+    }
+  }
+
+  &-icon {
+    width: 14px;
+    vertical-align: baseline;
+  }
+
+  &-links {
+    width: 100%;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+
+    ul.@{ant-prefix}-menu-root {
+      height: auto;
+    }
+  }
+
+  &-collapsed-button {
+    //border-top: @border-width-base @border-style-base rgba(0, 0, 0, 0.25);
+    .anticon {
+      font-size: 16px !important;
+    }
+  }
+
+  &-logo {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 16px;
+    line-height: 32px;
+    cursor: pointer;
+
+    &.@{pro-layout-sider-menu-prefix-cls}-logo-horizontal {
+      h1 {
+        margin: 0 0 0 12px;
+      }
+    }
+
+    &.@{pro-layout-sider-menu-prefix-cls}-logo-vertical {
+      a {
+        flex-direction: column;
+      }
+
+      h1 {
+        margin: 12px 0 0 0;
+      }
+    }
+
+    a {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      min-height: 32px;
+    }
+
+    h1,
+    img {
+      display: inline-block;
+      height: 32px;
+      vertical-align: middle;
+    }
+
+    img {
+      transition: height 0.2s;
+    }
+
+    h1 {
+      display: inline-block;
+      height: 32px;
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 32px;
+      color: #fff;
+      vertical-align: middle;
+      animation: pro-layout-title-hide 0.3s;
+    }
+  }
+
+  &-extra {
+    padding: 0 16px;
+    margin-bottom: 16px;
+
+    &-no-logo {
+      margin-top: 16px;
+    }
+  }
+
+  &.@{ant-prefix}-layout-sider-collapsed .gx-pro-sider-logo {
+    padding: 16px 8px;
+  }
+
+  .@{ant-prefix}-menu-inline-collapsed .@{ant-prefix}-menu-submenu-title {
+    width: 48px;
+    padding: 0 16px !important;
+  }
+
+  .@{ant-prefix}-layout-sider-children {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .@{pro-layout-sider-menu-prefix-cls}-loading {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 10;
+      background: rgba(255, 255, 255, 0.5);
+
+      .@{ant-prefix}-spin-spinning {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .@{ant-prefix}-menu-inline-collapsed {
+      width: 48px;
+    }
+  }
+
+  .@{ant-prefix}-menu-item .customicon,
+  .@{ant-prefix}-menu-submenu-title .customicon {
+    transition: none;
+  }
+}
+
+@keyframes pro-layout-title-hide {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+  80% {
+    display: none;
+    opacity: 0;
+  }
+
+  100% {
+    display: unset;
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,44 @@
+import type { VNodeChild, CSSProperties, HTMLAttributes } from 'vue'
+export type { MenuMode, MenuTheme } from 'ant-design-vue'
+
+export interface MenuInfo {
+  key: string | number;
+  keyPath: string[] | number[];
+  item: VNodeChild | any;
+  domEvent: MouseEvent;
+}
+
+export interface SelectInfo extends MenuInfo {
+  selectedKeys: string[];
+}
+
+export type OpenEventHandler = (
+  keys:
+    | string[]
+    | {
+    key: string;
+    item: VNodeChild;
+    trigger: string;
+    open: boolean;
+  }
+) => void;
+
+export type CollapseType = 'clickTrigger' | 'responsive';
+
+export type SiderTheme = 'light' | 'dark';
+
+export interface SiderProps extends HTMLAttributes {
+  prefixCls?: string;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  reverseArrow?: boolean;
+  onCollapse?: (collapsed: boolean, type: CollapseType) => void;
+  zeroWidthTriggerStyle?: CSSProperties;
+  trigger?: VNodeChild | JSX.Element;
+  width?: number | string;
+  collapsedWidth?: number | string;
+  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  theme?: SiderTheme;
+  onBreakpoint?: (broken: boolean) => void;
+}

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

@@ -0,0 +1,2 @@
+@basicLayout-prefix-cls: ~'@{gx-prefix-pro}-basic-layout';
+@pro-layout-header-height: 48px;

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

@@ -0,0 +1,121 @@
+import type { PropType, ExtractPropTypes } from 'vue'
+import config from '/config/config'
+import type { themeConfig } from '/types/config'
+
+const { title } = config.defaultSettings
+
+export interface RenderSetting {
+  headerRender?: false;
+  footerRender?: false;
+  menuRender?: false;
+  menuHeaderRender?: false
+}
+
+export type ProSettings = themeConfig & RenderSetting;
+
+export const defaultSettings: themeConfig = {
+  //布局种类 side/mix/simple/wide
+  layout: 'mix',
+  // 主题 light/dark
+  theme: 'light',
+  // 主题色
+  primaryColor: '#1677ff',
+  // logo标题
+  title: title || '互动直播',
+  // 头部菜单高度
+  headerHeight: 48,
+  // 定宽高度
+  wideWidth: 1300,
+  // 头部菜单是否固定
+  fixedHeader: false,
+  // 侧边栏菜单是否固定
+  fixSiderbar: false,
+  // 标签页栏是否固定
+  fixedMultiTab: false,
+  //是否显示顶部进度条
+  showProgressBar: true,
+  //菜单是否自动分割
+  splitMenus: true,
+  //是否显示多标签页
+  showTabsBar: true,
+  //是否显示全屏组件
+  showFullScreen: false,
+  //是否自动隐藏头部
+  autoHideHeader: false,
+  //菜单字体链接Url
+  iconfontUrl: '',
+  //页面动画配置
+  animate: {
+    name: 'fade',
+    direction: 'default'
+  }
+}
+
+export const defaultSettingProps = {
+  theme: {
+    type: String as PropType<themeConfig['theme']>,
+    default: defaultSettings.theme
+  },
+  primaryColor: {
+    type: String as PropType<themeConfig['primaryColor']>,
+    default: defaultSettings.primaryColor
+  },
+  layout: {
+    type: String as PropType<themeConfig['layout']>,
+    default: defaultSettings.layout
+  },
+  wideWidth: {
+    type: Number as PropType<themeConfig['wideWidth']>,
+    default: defaultSettings.wideWidth
+  },
+  splitMenus: {
+    type: Boolean as PropType<themeConfig['splitMenus']>,
+    default: defaultSettings.splitMenus
+  },
+  fixedMultiTab: {
+    type: Boolean as PropType<themeConfig['fixedMultiTab']>,
+    default: defaultSettings.fixedMultiTab
+  },
+  showProgressBar: {
+    type: Boolean as PropType<themeConfig['showProgressBar']>,
+    default: defaultSettings.showProgressBar
+  },
+  fixedHeader: {
+    type: Boolean as PropType<themeConfig['fixedHeader']>,
+    default: defaultSettings.fixedHeader
+  },
+  fixSiderbar: {
+    type: Boolean as PropType<themeConfig['fixSiderbar']>,
+    default: defaultSettings.fixSiderbar
+  },
+  showTabsBar: {
+    type: Boolean as PropType<themeConfig['showTabsBar']>,
+    default: defaultSettings.showTabsBar
+  },
+  showFullScreen: {
+    type: Boolean as PropType<themeConfig['showFullScreen']>,
+    default: defaultSettings.showFullScreen
+  },
+  autoHideHeader: {
+    type: Boolean as PropType<themeConfig['autoHideHeader']>,
+    default: defaultSettings.autoHideHeader
+  },
+  headerHeight: {
+    type: Number as PropType<themeConfig['headerHeight']>,
+    default: defaultSettings.headerHeight
+  },
+  title: {
+    type: String as PropType<themeConfig['title']>,
+    default: () => defaultSettings.title
+  },
+  iconfontUrl: {
+    type: String as PropType<themeConfig['iconfontUrl']>,
+    default: () => defaultSettings.iconfontUrl
+  },
+  animate: {
+    type: Object as PropType<themeConfig['animate']>,
+    default: defaultSettings.animate
+  }
+}
+
+export type ProSettingsProps = ExtractPropTypes<typeof defaultSettingProps>;

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

@@ -0,0 +1,45 @@
+import {
+  defineComponent,
+  InjectionKey,
+  provide,
+  inject,
+  readonly,
+  SetupContext,
+  VNode,
+  PropType,
+  DefineComponent
+} from 'vue'
+
+// @ts-ignore
+export type ContextType<T> = any;
+
+// @ts-ignore
+export type CreateContext<T> = DefineComponent<{}, () => VNode | VNode[] | undefined, any>;
+
+export const createContext = <T>(
+  contextInjectKey: InjectionKey<ContextType<T>> = Symbol(),
+  injectCompName = 'Context.Provider'
+): CreateContext<T> => {
+  const ContextProvider = defineComponent({
+    name: injectCompName,
+    props: {
+      value: {
+        type: Object as PropType<ContextType<T>>,
+        required: true
+      }
+    },
+    setup(props: { value: ContextType<T> }, { slots }: SetupContext) {
+      provide(contextInjectKey, readonly(props.value))
+      return () => slots.default?.()
+    }
+  })
+
+  return ContextProvider as any
+}
+
+export const useContext = <T>(
+  contextInjectKey: string | InjectionKey<ContextType<T>> = Symbol(),
+  defaultValue?: ContextType<T>
+): T => {
+  return inject(contextInjectKey, defaultValue || ({} as T))
+}

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

@@ -0,0 +1,43 @@
+import { default as PageLoading } from './PageLoading'
+import { default as BaseMenu } from './components/SiderMenu/BaseMenu'
+import { default as SiderMenuWrapper } from './components/SiderMenu'
+import type { PageContainerProps } from './components/PageContainer';
+import PageContainer, { ProBreadcrumb } from './components/PageContainer';
+
+export * from './RouteContext'
+export * from './typings'
+export * from './utils/getMenuData'
+export { createContext, useContext } from './hooks/context'
+export type { ContextType, CreateContext } from './hooks/context'
+
+
+export { baseMenuProps } from './components/SiderMenu/props'
+export type { BaseMenuProps } from './components/SiderMenu/BaseMenu'
+export type { SiderMenuWrapperProps } from './components/SiderMenu'
+export type { MenuMode, OpenEventHandler, SelectInfo } from './components/SiderMenu/typings'
+
+export { DefaultHeader } from './components/GlobalHeader/DefaultHeader'
+export { default as GlobalFooter } from './components/GlobalFooter'
+export { default as SettingDrawer } from './components/SettingDrawer'
+export { WrapContent } from './WrapContent'
+
+export type { DefaultHeaderProps } from './components/GlobalHeader/DefaultHeader'
+export type { GlobalFooterProps } from './components/GlobalFooter'
+
+export type { ProSettings } from './defaultSettings'
+
+export { default } from './BasicLayout'
+
+export type { BasicLayoutProps } from './BasicLayout'
+
+export {
+  BaseMenu,
+  PageLoading,
+  SiderMenuWrapper,
+  PageContainer,
+  ProBreadcrumb,
+}
+
+export type {
+  PageContainerProps
+}

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

@@ -0,0 +1,57 @@
+import type { CSSProperties } from 'vue'
+import { PropTypes } from '@/utils'
+import type { BreadcrumbProps } from './RouteContext'
+import type { FooterRender, CopyrightRender } from './RenderTypings'
+import type { Links } from './components/GlobalFooter'
+import { defaultSettingProps } from './defaultSettings'
+import { globalHeaderProps, headerViewProps } from './components/GlobalHeader/props'
+import { siderMenuProps } from './components/SiderMenu/props'
+import multiTabProps from './components/MultiTab/props'
+import { defaultLinks } from './components/GlobalFooter'
+
+export const basicLayoutProps = {
+  ...defaultSettingProps,
+  ...globalHeaderProps,
+  ...siderMenuProps,
+  ...headerViewProps,
+  ...multiTabProps,
+
+  pure: Boolean,
+  /**
+   * 是否禁用移动端模式，有的管理系统不需要移动端模式，此属性设置为true即可
+   */
+  disableMobile: {
+    type: Boolean,
+    required: false,
+  },
+  contentStyle: {
+    type: [String, Object] as PropType<CSSProperties>,
+    default: () => {
+      return null
+    },
+  },
+  breadcrumb: {
+    type: [Object, Function] as PropType<BreadcrumbProps>,
+    default: () => null,
+  },
+  disableContentMargin: PropTypes.looseBool,
+  isChildrenLayout: PropTypes.looseBool,
+  loading: PropTypes.looseBool,
+  footerLinks: {
+    type: [Array, Boolean] as PropType<Links>,
+    default: defaultLinks
+  },
+  copyrightRender: {
+    type: [Object, Function, Boolean, String] as PropType<CopyrightRender>,
+    default: () => undefined,
+  },
+  footerRender: {
+    type: [Object, Function, Boolean] as PropType<FooterRender>,
+    default: () => undefined,
+  },
+  menuData: {
+    type: Array as PropType<AppRouteModule[]>,
+    default: () => []
+  },
+  collapsed: PropTypes.looseBool
+}