feat: 优化页面设置

ballcat-projects · Aug 2, 2022 · b622a9b · b622a9b
1 parent 410712d
commit b622a9b
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 21 deletions.
diff --git a/src/components/Header/Right.tsx b/src/components/Header/Right.tsx
@@ -58,7 +58,13 @@ export default () => {
         <MoreOutlined style={{ fontSize: '16px', fontWeight: 'bolder' }} />
       </span>
 
-      <SettingDrawer hideHintAlert collapse={showSetting} onCollapseChange={setShowSetting} />
+      <SettingDrawer
+        hideHintAlert
+        hideColors
+        hideCopyButton
+        collapse={showSetting}
+        onCollapseChange={setShowSetting}
+      />
     </Space>
   );
 };
diff --git a/src/components/SettingDrawer/BlockCheckbox.tsx b/src/components/SettingDrawer/BlockCheckbox.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Tooltip } from 'antd';
 import { CheckOutlined } from '@ant-design/icons';
 import classNames from 'classnames';

diff --git a/src/components/SettingDrawer/LayoutChange.tsx b/src/components/SettingDrawer/LayoutChange.tsx
@@ -39,7 +39,7 @@ const LayoutSetting: React.FC<{
               value={contentWidth || 'Fixed'}
               size="small"
               className="content-width"
-              onSelect={(value) => {
+              onSelect={(value: any) => {
                 changeSetting('contentWidth', value);
               }}
               style={{ width: 80 }}
@@ -131,7 +131,7 @@ const LayoutSetting: React.FC<{
               value={multiTabStyle || 'default'}
               size="small"
               className="multi-tab-style"
-              onSelect={(value) => {
+              onSelect={(value: any) => {
                 changeSetting('multiTabStyle', value);
               }}
               style={{ width: 80 }}

diff --git a/src/components/SettingDrawer/RegionalChange.tsx b/src/components/SettingDrawer/RegionalChange.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Switch, List } from 'antd';
+import { List, Switch } from 'antd';
 import type { ProSettings } from '@ant-design/pro-layout';
 import { getFormatMessage } from './index';
 import { renderLayoutSettingItem } from './LayoutChange';
@@ -13,6 +13,8 @@ const RegionalSetting: React.FC<{
 
   // 默认自己绑定在顶栏, 关闭了自己就没了
   regionalSetting.splice(regionalSetting.indexOf('header'), 1);
+  // 页脚不允许配置
+  regionalSetting.splice(regionalSetting.indexOf('footer'), 1);
 
   return (
     <List

diff --git a/src/components/SettingDrawer/ThemeColor.less b/src/components/SettingDrawer/ThemeColor.less
@@ -1,13 +1,16 @@
 @import './index.less';
+
 .@{ant-pro-setting-drawer}-content {
   .theme-color {
     margin-top: 16px;
     overflow: hidden;
+
     .theme-color-title {
       margin-bottom: 12px;
       font-size: 14px;
       line-height: 22px;
     }
+
     .theme-color-block {
       float: left;
       width: 20px;

diff --git a/src/components/SettingDrawer/index.less b/src/components/SettingDrawer/index.less
@@ -5,7 +5,12 @@
 .@{ant-pro-setting-drawer} {
   &-content {
     position: relative;
-    min-height: 100%;
+    //min-height: 100%;
+
+    .ant-pro-setting-drawer-content {
+      height: 100% !important;
+    }
+
     .@{ant-prefix}-list-item {
       span {
         flex: 1;
@@ -15,6 +20,7 @@
 
   &-block-checkbox {
     display: flex;
+
     &-item {
       position: relative;
       width: 44px;
@@ -35,6 +41,7 @@
         background-color: #fff;
         content: '';
       }
+
       &::after {
         position: absolute;
         top: 0;
@@ -47,10 +54,12 @@
 
       &-realDark {
         background-color: fade(@menu-dark-bg, 85%);
+
         &::before {
           background-color: fade(@menu-dark-bg, 65%);
           content: '';
         }
+
         &::after {
           background-color: fade(@menu-dark-bg, 85%);
         }
@@ -62,6 +71,7 @@
           background-color: @white;
           content: '';
         }
+
         &::after {
           background-color: @white;
         }
@@ -75,6 +85,7 @@
           background-color: @menu-dark-bg;
           content: '';
         }
+
         &::after {
           background-color: @white;
         }
@@ -86,6 +97,7 @@
           background-color: transparent;
           content: '';
         }
+
         &::after {
           background-color: @menu-dark-bg;
         }
@@ -97,11 +109,13 @@
           background-color: @white;
           content: '';
         }
+
         &::after {
           background-color: @menu-dark-bg;
         }
       }
     }
+
     &-selectIcon {
       position: absolute;
       right: 6px;
@@ -110,6 +124,7 @@
       font-weight: bold;
       font-size: 14px;
       pointer-events: none;
+
       .action {
         color: @primary-color;
       }

diff --git a/src/components/SettingDrawer/index.tsx b/src/components/SettingDrawer/index.tsx
@@ -5,18 +5,16 @@ import { Alert, Button, Divider, Drawer, List, message, Switch } from 'antd';
 import React, { useEffect, useState } from 'react';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import omit from 'omit.js';
-import type { ProSettings } from '@ant-design/pro-layout';
+import type { ProSettings, Settings as LayoutSettings } from '@ant-design/pro-layout';
 import BlockCheckbox from './BlockCheckbox';
 import ThemeColor from './ThemeColor';
 import getLocales, { getLanguage } from './locales';
 import { genStringToTheme } from './utils';
 import LayoutSetting, { renderLayoutSettingItem } from './LayoutChange';
-import RegionalSetting from './RegionalChange';
 import { useModel } from 'umi';
 import ConfigUtils from '@/utils/ConfigUtils';
 import type { BodyProps, MergerSettingsType, SettingDrawerProps } from './typings';
 import { LayoutSetting as LayoutSettingUtils } from '@/utils/Ballcat';
-import type { Settings as LayoutSettings } from '@ant-design/pro-layout';
 
 export const getFormatMessage = (): ((data: { id: string; defaultMessage?: string }) => string) => {
   const formatMessage = ({ id }: { id: string; defaultMessage?: string }): string => {
@@ -182,6 +180,9 @@ const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
       style={{
         zIndex: 999,
       }}
+      bodyStyle={{ paddingBottom: '0' }}
+      drawerStyle={{ height: '100%' }}
+      contentWrapperStyle={{ height: 'auto' }}
     >
       <div className={`${baseClassName}-drawer-content`}>
         <Body titleKey="pagestyle" prefixCls={baseClassName}>
@@ -194,14 +195,17 @@ const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
             onChange={(value) => changeSetting('navTheme', value)}
           />
         </Body>
-        <Body titleKey="themecolor" prefixCls={baseClassName}>
-          <ThemeColor
-            value={primaryColor!}
-            colors={hideColors ? [] : colorList}
-            formatMessage={formatMessage}
-            onChange={(color) => changeSetting('primaryColor', color)}
-          />
-        </Body>
+
+        {!hideColors && (
+          <Body titleKey="themecolor" prefixCls={baseClassName}>
+            <ThemeColor
+              value={primaryColor!}
+              colors={colorList}
+              formatMessage={formatMessage}
+              onChange={(color) => changeSetting('primaryColor', color)}
+            />
+          </Body>
+        )}
 
         <Divider />
 
@@ -231,11 +235,11 @@ const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
         <LayoutSetting settings={layoutSetting} changeSetting={changeSetting} />
         <Divider />
 
-        <Body titleKey="regionalsettings" prefixCls={baseClassName}>
-          <RegionalSetting settings={layoutSetting} changeSetting={changeSetting} />
-        </Body>
+        {/*<Body titleKey="regionalsettings" prefixCls={baseClassName}>*/}
+        {/*  <RegionalSetting settings={layoutSetting} changeSetting={changeSetting}/>*/}
+        {/*</Body>*/}
 
-        <Divider />
+        {/*<Divider/>*/}
 
         <Body titleKey="othersettings" prefixCls={baseClassName}>
           <List