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

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

@@ -1,90 +0,0 @@
-@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

@@ -1,70 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,346 +0,0 @@
-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