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

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

@@ -0,0 +1,90 @@
+@import '../../default.less';
+@import './headerSearch.less';
+
+@pro-layout-header-right-prefix-cls: ~'@{gx-prefix-pro}-header-right';
+
+@pro-header-hover-bg: rgba(0, 0, 0, 0.025);
+
+.@{pro-layout-header-right-prefix-cls} {
+  &.ant-space {
+    display: flex;
+    float: right;
+    height: 48px;
+    margin-left: auto;
+    overflow: hidden;
+  }
+
+  .@{pro-layout-header-right-prefix-cls}-action {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    padding-left: 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    > span {
+      vertical-align: middle;
+    }
+
+    &:hover {
+      background: @pro-header-hover-bg;
+    }
+
+    &:global(.opened) {
+      background: @pro-header-hover-bg;
+    }
+  }
+
+  .@{pro-layout-header-right-prefix-cls}-account {
+    .@{pro-layout-header-right-prefix-cls}-avatar {
+      margin-right: 8px;
+      color: var(--ant-primary-color);
+      vertical-align: top;
+      background: rgba(255, 255, 255, 0.85);
+    }
+  }
+
+  .@{pro-layout-header-right-prefix-cls}-search {
+    padding: 0 12px;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  &-menu {
+    .anticon {
+      margin-right: 8px;
+    }
+  }
+}
+
+.dark {
+  .@{pro-layout-header-right-prefix-cls}-action {
+    &:hover {
+      background: #252a3d;
+    }
+  }
+}
+
+@media only screen and (max-width: @screen-md) {
+  .ant-divider-vertical {
+    vertical-align: unset;
+  }
+
+  .@{pro-layout-header-right-prefix-cls}-name {
+    display: none;
+  }
+
+  .@{pro-layout-header-right-prefix-cls} {
+    position: absolute;
+    top: 0;
+    right: 12px;
+
+    .@{pro-layout-header-right-prefix-cls}-account {
+      .@{pro-layout-header-right-prefix-cls}-avatar {
+        margin-right: 0;
+      }
+    }
+  }
+}

package/template-design-pro/src/components/GDesign/ProLayout/components/SettingDrawer/BlockCheckbox.tsx

@@ -0,0 +1,70 @@
+import { computed, defineComponent } from 'vue'
+import { Tooltip } from 'ant-design-vue'
+import { CheckOutlined } from '@ant-design/icons-vue'
+import { PropTypes } from '@/utils'
+
+const BlockCheckboxProps = {
+  value: PropTypes.string,
+  list: PropTypes.array,
+  className: PropTypes.string
+}
+
+const BlockCheckbox = defineComponent({
+  props: BlockCheckboxProps,
+  emits: ['change'],
+  setup(props, { emit }) {
+    const baseClassName = computed(() => `${props.className}-block-checbox`)
+
+    const items = computed(
+      () =>
+        props.list || [
+          {
+            key: 'side',
+            title: '侧边菜单布局'
+          },
+          {
+            key: 'mix',
+            title: '混合菜单布局'
+          },
+          {
+            key: 'simple',
+            title: '简单菜单布局'
+          }
+        ]
+    )
+
+    const disableStyle = {
+      cursor: 'not-allowed'
+    }
+
+    const handleChange = (key: string) => {
+      emit('change', key)
+    }
+
+    return () => {
+      const { value } = props
+      return (
+        <div class={baseClassName.value} key={value} style={{ minHeight: '42px' }}>
+          {items.value.map((item: any) => (
+            <Tooltip title={item.title} key={item.title}>
+              <div
+                class={[`${baseClassName.value}-item`, `${baseClassName.value}-item-${item.key}`]}
+                style={item.disable && disableStyle}
+                onClick={() => !item.disabled && handleChange(item.key)}
+              >
+                <CheckOutlined
+                  class={`${baseClassName.value}-selectIcon`}
+                  style={{
+                    display: value === item.key ? 'block' : 'none'
+                  }}
+                />
+              </div>
+            </Tooltip>
+          ))}
+        </div>
+      )
+    }
+  }
+})
+
+export default BlockCheckbox

package/template-design-pro/src/components/GDesign/ProLayout/components/SettingDrawer/LayoutSetting.tsx

@@ -0,0 +1,107 @@
+import { computed, defineComponent } from 'vue'
+import { Switch, List, Tooltip, Select } from 'ant-design-vue'
+import { PropTypes } from '@/utils'
+
+const LayoutSettingProps = {
+  splitMenus: PropTypes.looseBool,
+  fixedHeader: PropTypes.looseBool,
+  fixSiderbar: PropTypes.looseBool,
+  layout: PropTypes.oneOf(['side', 'mix', 'simple']),
+  className: PropTypes.string
+}
+
+export const renderLayoutSettingItem = (item: any) => {
+  const action = { ...item.action }
+  return (
+    <Tooltip title={item.disabled ? item.disabledReason : ''} placement="left">
+      <List.Item actions={[action]}>
+        <span style={{ opacity: item.disabled ? 0.5 : 1 }}>{item.title}</span>
+      </List.Item>
+    </Tooltip>
+  )
+}
+
+const LayoutSetting = defineComponent({
+  props: LayoutSettingProps,
+  emits: ['change'],
+  setup(props, { emit }) {
+    const layoutList = computed(() => [
+      {
+        title: '内容区域宽度',
+        disabled: false,
+        action: (
+          <Select
+            value={props.layout === 'wide' ? 'wide' : 'mix'}
+            options={[
+              {
+                label: '定宽',
+                value: 'wide'
+              },
+              {
+                label: '流式',
+                value: 'mix'
+              }
+            ]}
+            onChange={(value: any) => handleChange('layout', value)}
+          />
+        )
+      },
+      {
+        title: '固定 Header',
+        disabled: props.layout === 'mix',
+        action: (
+          <Switch
+            size="small"
+            disabled={
+              props.layout === 'mix' || props.layout === 'simple' || props.layout === 'wide'
+            }
+            checked={!!props.fixedHeader}
+            onChange={(checked) => handleChange('fixedHeader', checked)}
+          />
+        )
+      },
+      {
+        title: '固定侧边菜单',
+        disabled: props.layout === 'mix',
+        action: (
+          <Switch
+            size="small"
+            disabled={props.layout === 'mix' || props.layout === 'wide'}
+            checked={!!props.fixSiderbar}
+            onChange={(checked) => handleChange('fixSiderbar', checked)}
+          />
+        )
+      },
+      {
+        title: '自动分割菜单',
+        disabled: props.layout === 'side',
+        action: (
+          <Switch
+            size="small"
+            disabled={
+              props.layout === 'side' || props.layout === 'simple' || props.layout === 'wide'
+            }
+            checked={!!props.splitMenus}
+            onChange={(checked) => handleChange('splitMenus', checked)}
+          />
+        )
+      }
+    ])
+
+    const handleChange = (type: string, value: boolean | string | number) => {
+      emit('change', { type, value })
+    }
+
+    return () => {
+      return (
+        <List
+          split={false}
+          dataSource={layoutList.value}
+          renderItem={({ item }) => renderLayoutSettingItem(item)}
+        />
+      )
+    }
+  }
+})
+
+export default LayoutSetting

package/template-design-pro/src/components/GDesign/ProLayout/components/SettingDrawer/ThemeColor.tsx

@@ -0,0 +1,68 @@
+import type { FunctionalComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
+import { Tooltip, ConfigProvider } from 'ant-design-vue'
+import { CheckOutlined } from '@ant-design/icons-vue'
+import { PropTypes } from '@/utils'
+
+const ThemeColorProps = {
+  title: PropTypes.string,
+  value: PropTypes.string,
+  colors: PropTypes.array,
+  className: PropTypes.string
+}
+
+const Tag: FunctionalComponent<{ color: string; check: boolean; className: string }> = ({
+  color,
+  check,
+  className
+}) => {
+  return (
+    <div class={`${className}-block`} style={{ backgroundColor: color }}>
+      {check ? <CheckOutlined /> : null}
+    </div>
+  )
+}
+
+const ThemeColor = defineComponent({
+  props: ThemeColorProps,
+  emits: ['change'],
+  setup(props, { emit }) {
+    const baseClassName = computed(() => `${props.className}-theme-color`)
+
+    const handleChange = (key: string) => {
+      emit('change', key)
+      ConfigProvider.config({
+        theme: {
+          primaryColor: key
+        }
+      })
+    }
+
+    return () => {
+      const { value, title, colors = [], className } = props
+      return (
+        <div class={baseClassName.value} style={{ marginBottom: '24px' }}>
+          <h3 class={`${className}-title`}>{title}</h3>
+          <div class={`${baseClassName.value}-content`}>
+            {colors.map((item: any) => {
+              const check = value === item.color
+              return (
+                <Tooltip key={item.color} title={item.fileName}>
+                  <Tag
+                    className={className}
+                    class={`${baseClassName.value}-block`}
+                    color={item.color}
+                    check={check}
+                    onClick={() => handleChange(item.color)}
+                  />
+                </Tooltip>
+              )
+            })}
+          </div>
+        </div>
+      )
+    }
+  }
+})
+
+export default ThemeColor

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

@@ -0,0 +1,346 @@
+import type { FunctionalComponent, Ref } from 'vue'
+import { defineComponent, reactive, ref, watch } from 'vue'
+import { message, Drawer, List, Switch, Select, Button, Alert, Divider } from 'ant-design-vue'
+import {
+  CloseOutlined,
+  SettingOutlined,
+  NotificationOutlined,
+  CopyOutlined
+} from '@ant-design/icons-vue'
+import config from '/config/config'
+import { themeConfig } from '/config/default/themeColor'
+import { PropTypes } from '@/utils'
+import { useClipboard } from '@gx-admin/hooks/event'
+import { getPrefixCls } from '@gx-design-vue/pro-utils'
+import BlockCheckbox from './BlockCheckbox'
+import ThemeColor from './ThemeColor'
+import LayoutSetting, { renderLayoutSettingItem } from './LayoutSetting'
+import { ProSettingsProps } from '../../defaultSettings'
+
+const { defaultSettings, animate } = config
+
+const { preset } = animate
+
+export const settingDrawerProps = {
+  hideLoading: PropTypes.bool,
+  root: PropTypes.string.def(defaultSettings.viewScrollRoot),
+  settings: Object as PropType<ProSettingsProps>
+}
+
+const Body: FunctionalComponent<{ title: string; className: string }> = (
+  { title = '', className = '' },
+  { slots }
+) => {
+  return (
+    <div style={{ marginBottom: '24px' }}>
+      <h3 class={`${className}-title`}>{title}</h3>
+      {slots.default?.()}
+    </div>
+  )
+}
+
+const updateTheme = (_: boolean, color?: string, hideMessageLoading?: boolean) => {
+  let hide: any = () => null
+  if (!hideMessageLoading) {
+    hide = message.loading('正在加载主题颜色')
+  }
+
+  document.documentElement.className = color
+
+  // 模拟加载主题
+  setTimeout(() => hide(), 500)
+
+  // localStorage.setItem('gx-theme', dark ? 'dark' : 'light')
+}
+
+const SettingDrawer = defineComponent({
+  props: settingDrawerProps,
+  emits: ['change'],
+  setup(props, { emit, slots }) {
+    const baseClassName = getPrefixCls({
+      suffixCls: 'setting-drawer',
+      isPor: true
+    })
+
+    const show: Ref<boolean> = ref(false)
+
+    const innerHeight: Ref<number> = ref(window.innerHeight)
+
+    watch(innerHeight, (value: number) => {
+      innerHeight.value = value
+    })
+
+    const iconStyle = reactive({
+      color: '#fff',
+      fontSize: 20
+    })
+
+    const genCopySettingJson = (settings) => JSON.stringify(settings)
+
+    const getThemeList = () => {
+      const themeList = [
+        {
+          key: 'light',
+          title: '亮色菜单风格'
+        },
+        {
+          key: 'dark',
+          title: '暗色菜单风格'
+        }
+      ]
+
+      return {
+        themeList
+      }
+    }
+
+    const setShow = (flag: boolean) => {
+      show.value = flag
+    }
+
+    const changeSetting = (type: string, value: any, hideMessageLoading?: boolean) => {
+      if (type === 'primaryColor') {
+        updateTheme(value === 'realDark', value as string, !!hideMessageLoading)
+      }
+
+      emit('change', { type, value })
+    }
+
+    const { copy } = useClipboard('拷贝成功，请到 config/default/theme.js 中替换默认配置')
+
+    return () => {
+      const { root, settings, hideLoading } = props
+
+      const {
+        theme,
+        primaryColor,
+        layout,
+        splitMenus,
+        fixedHeader,
+        fixSiderbar,
+        showTabsBar,
+        fixedMultiTab,
+        showProgressBar,
+        animate
+      } = settings as ProSettingsProps
+
+      return (
+        <Drawer
+          visible={show.value}
+          width={300}
+          bodyStyle={{ padding: 0 }}
+          onClose={() => setShow(false)}
+          placement="right"
+          getContainer={document.querySelector(root) as HTMLInputElement}
+          style={{
+            zIndex: 1001
+          }}
+          handle={
+            <div class={`${baseClassName}-handle`} onClick={() => setShow(!show.value)}>
+              {show.value ? (
+                <CloseOutlined style={iconStyle} />
+              ) : (
+                <SettingOutlined style={iconStyle} />
+              )}
+            </div>
+          }
+        >
+          <div style={{ height: `${innerHeight.value - 34 * 2}px` }}>
+            <g-bars>
+              <div class={`${baseClassName}-content`}>
+                <Body title="整体风格设置" className={baseClassName}>
+                  <BlockCheckbox
+                    className={baseClassName}
+                    list={getThemeList().themeList}
+                    value={theme}
+                    onChange={(val) => {
+                      changeSetting('theme', val, hideLoading)
+                    }}
+                  />
+                </Body>
+
+                <ThemeColor
+                  title="主题色"
+                  className={baseClassName}
+                  value={primaryColor}
+                  colors={themeConfig}
+                  onChange={(color) => {
+                    changeSetting('primaryColor', color, hideLoading)
+                  }}
+                />
+
+                <Divider />
+
+                <Body title="导航模式" className={baseClassName}>
+                  <BlockCheckbox
+                    className={baseClassName}
+                    value={layout}
+                    onChange={(val) => {
+                      changeSetting('layout', val, hideLoading)
+                    }}
+                  />
+                </Body>
+
+                <LayoutSetting
+                  splitMenus={splitMenus}
+                  fixedHeader={fixedHeader}
+                  fixSiderbar={fixSiderbar}
+                  layout={layout}
+                  onChange={({ type, value }) => {
+                    changeSetting(type, value)
+                  }}
+                />
+
+                <Divider />
+
+                <Body title="其他设置" className={baseClassName}>
+                  <List
+                    split={false}
+                    renderItem={({ item }) => renderLayoutSettingItem(item)}
+                    dataSource={[
+                      {
+                        title: '多标签',
+                        action: (
+                          <Switch
+                            size="small"
+                            disabled={layout === 'simple'}
+                            checked={!!showTabsBar}
+                            onChange={(checked) => changeSetting('showTabsBar', checked)}
+                          />
+                        )
+                      },
+                      {
+                        title: '固定多标签',
+                        action: (
+                          <Switch
+                            size="small"
+                            disabled={layout === 'simple'}
+                            checked={!!fixedMultiTab}
+                            onChange={(checked) => changeSetting('fixedMultiTab', checked)}
+                          />
+                        )
+                      },
+                      {
+                        title: '顶部进度条',
+                        action: (
+                          <Switch
+                            size="small"
+                            checked={!!showProgressBar}
+                            onChange={(checked) => changeSetting('showProgressBar', checked)}
+                          />
+                        )
+                      }
+                    ]}
+                  />
+                </Body>
+
+                <Divider />
+
+                <Body title="页面切换动画" className={baseClassName}>
+                  <List
+                    split={false}
+                    renderItem={({ item }) => renderLayoutSettingItem(item)}
+                    dataSource={[
+                      {
+                        title: '禁用动画',
+                        action: (
+                          <Switch
+                            size="small"
+                            checked={!animate?.disabled}
+                            onChange={(checked) => changeSetting('showAnimate', checked)}
+                          />
+                        )
+                      },
+                      {
+                        title: '动画效果',
+                        disabled: animate?.disabled,
+                        action: (
+                          <Select
+                            value={animate?.name}
+                            size="small"
+                            disabled={animate?.disabled}
+                            getPopupContainer={(trigger) => {
+                              if (trigger && trigger.parentNode) {
+                                return trigger.parentNode
+                              }
+                              return trigger
+                            }}
+                            onSelect={(value) => changeSetting('changeAnimateMode', value)}
+                            style={{ width: '120px' }}
+                          >
+                            {preset.map((item: any) => (
+                              <Select.Option value={item.name}>{item.alias}</Select.Option>
+                            ))}
+                          </Select>
+                        )
+                      },
+                      {
+                        title: '动画方向',
+                        disabled: animate?.disabled,
+                        action: (
+                          <Select
+                            value={animate?.direction}
+                            size="small"
+                            disabled={animate?.disabled}
+                            getPopupContainer={(trigger) => {
+                              if (trigger && trigger.parentNode) {
+                                return trigger.parentNode
+                              }
+                              return trigger
+                            }}
+                            onSelect={(value) => changeSetting('changeAnimateDirections', value)}
+                            style={{ width: '120px' }}
+                          >
+                            {preset
+                              .find((el: any) => el.name === animate?.name)
+                              ?.directions.map((item: any) => (
+                                <Select.Option value={item}>{item}</Select.Option>
+                              ))}
+                          </Select>
+                        )
+                      }
+                    ]}
+                  />
+                </Body>
+
+                <Divider />
+
+                <Alert
+                  type="warning"
+                  message={'配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改配置文件'}
+                  icon={<NotificationOutlined />}
+                  showIcon
+                  style={{ marginBottom: '16px' }}
+                />
+
+                <Button
+                  block
+                  onClick={() => {
+                    copy(genCopySettingJson({
+                      primaryColor,
+                      layout,
+                      splitMenus,
+                      fixedHeader,
+                      fixSiderbar,
+                      showTabsBar,
+                      fixedMultiTab,
+                      showProgressBar,
+                      animate
+                    }))
+                  }}
+                >
+                  <CopyOutlined />
+                  拷贝设置
+                </Button>
+
+                <div class={`${baseClassName}-content-footer`}>{slots.default?.()}</div>
+              </div>
+            </g-bars>
+          </div>
+        </Drawer>
+      )
+    }
+  }
+})
+
+export default SettingDrawer