feat: optimize component styles

antvis · Jan 5, 2024 · b16a4e4 · b16a4e4
1 parent 5f50ad7
commit b16a4e4
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 19 deletions.
diff --git a/packages/gi-assets-basic/src/components/RichContainer/Component.tsx b/packages/gi-assets-basic/src/components/RichContainer/Component.tsx
@@ -9,7 +9,8 @@ import Toolbar from './Toolbar';
 import './index.less';
 
 const URL_SEARCH_KEY = 'ActiveAssetID';
-const MIN_WIDTH = 336;
+const MIN_WIDTH = 350;
+const MAX_WIDTH = 720;
 const visibleStyle: React.CSSProperties = {
   visibility: 'visible',
   width: '100%',
@@ -27,7 +28,7 @@ export interface RichContainerState {
   viewMode: string;
 }
 const getDefaultSideWidth = () => {
-  const defaultWidth = localStorage.getItem('GI_RICH_CONTAINER_SIDE_WIDTH') || '330';
+  const defaultWidth = localStorage.getItem('GI_RICH_CONTAINER_SIDE_WIDTH') || '350';
   return Number(defaultWidth);
 };
 const RichContainer = props => {
@@ -36,7 +37,7 @@ const RichContainer = props => {
   const { HAS_GRAPH, GISDK_ID } = context;
   const Containers = useContainer(context);
   const [state, setState] = React.useState<RichContainerState>({
-    activeKey: localStorage.getItem(URL_SEARCH_KEY) || 'LanguageQuery',
+    activeKey: localStorage.getItem(URL_SEARCH_KEY) || 'ConfigQuery',
     viewMode: 'GISDK_CANVAS',
   });
   const { activeKey, viewMode } = state;
@@ -58,7 +59,14 @@ const RichContainer = props => {
   useEffect(() => {
     if (isExpanded) {
       const defaultWidth = getDefaultSideWidth();
-      setWidth(defaultWidth >= MIN_WIDTH ? defaultWidth : MIN_WIDTH);
+      const checkAreaWidth = defaultWidth <= MAX_WIDTH && defaultWidth >= MIN_WIDTH;
+      if (checkAreaWidth) {
+        setWidth(defaultWidth);
+      } else if (defaultWidth >= MAX_WIDTH) {
+        setWidth(MAX_WIDTH);
+      } else if (defaultWidth <= MIN_WIDTH) {
+        setWidth(MIN_WIDTH);
+      }
     } else setWidth(0);
   }, [isExpanded]);
 
@@ -131,7 +139,14 @@ const RichContainer = props => {
   const onResizeStop = (e, direction, ref, d) => {
     setWidth(prev => {
       const currentWidth = prev + d.width;
-      const realWidth = currentWidth >= MIN_WIDTH ? currentWidth : MIN_WIDTH;
+      let realWidth = currentWidth;
+      if (currentWidth >= MAX_WIDTH) {
+        realWidth = MAX_WIDTH;
+      } else if (currentWidth <= MIN_WIDTH) {
+        realWidth = MIN_WIDTH;
+      } else if (currentWidth <= MAX_WIDTH && currentWidth >= MIN_WIDTH) {
+        realWidth = currentWidth;
+      }
       localStorage.setItem('GI_RICH_CONTAINER_SIDE_WIDTH', realWidth);
       return realWidth;
     });
@@ -143,8 +158,10 @@ const RichContainer = props => {
       value: 'GISDK_CANVAS',
       label: (
         <Space>
-          <Icon type={ViewArea.icon}></Icon>
-          {$i18n.get({ id: 'basic.components.RichContainer.Component.GraphView', dm: '图谱视图' })}
+          <Icon type={ViewArea.icon} style={{ fontSize: '18px' }}></Icon>
+          <span style={{ fontSize: '14px' }}>
+            {$i18n.get({ id: 'basic.components.RichContainer.Component.GraphView', dm: '图谱视图' })}
+          </span>
         </Space>
       ),
     },
@@ -177,7 +194,7 @@ const RichContainer = props => {
           <Select
             bordered={false}
             defaultValue="GISDK_CANVAS"
-            style={{ width: 120 }}
+            style={{ width: 'auto' }}
             onChange={handleChangeViewMode}
             options={ViewModeOptions}
             suffixIcon={<Icon type="icon-shituxiala" />}
@@ -191,22 +208,23 @@ const RichContainer = props => {
             <Divider type="vertical" />
             <span
               style={{
-                marginLeft: 6,
+                margin: '0 4px',
                 color: '#98989D',
-                marginRight: 8,
+                fontSize: '14px',
+                paddingRight: '6px',
               }}
             >
               查询过滤
             </span>
             <Button
               type={HAS_QUERY_VIEW ? 'primary' : 'text'}
-              icon={<Icon type={DataArea.icon} />}
+              icon={<Icon type={DataArea.icon} style={{ fontSize: '14px' }} />}
               className="gi-richcontainer-query-button"
               style={{
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                fontSize: 12,
+                fontSize: 14,
                 ...(HAS_QUERY_VIEW ? ActiveButtonStyle : {}),
               }}
               onClick={() => {
@@ -226,13 +244,13 @@ const RichContainer = props => {
           <div className="toolbar-item">
             <Button
               type={HAS_FILTER_VIEW ? 'primary' : 'text'}
-              icon={<Icon type={FilterArea.icon} />}
+              icon={<Icon type={FilterArea.icon} style={{ fontSize: '14px' }} />}
               className="gi-richcontainer-filter-button"
               style={{
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                fontSize: 12,
+                fontSize: 14,
                 ...(HAS_FILTER_VIEW ? ActiveButtonStyle : {}),
               }}
               onClick={e => {

diff --git a/packages/gi-assets-basic/src/components/RichContainer/Toolbar.tsx b/packages/gi-assets-basic/src/components/RichContainer/Toolbar.tsx
@@ -25,7 +25,8 @@ const Toolbar = (props: ToolbarProps) => {
   return (
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <Divider type="vertical" />
-      <span style={{ padding: '0px 8px 0px 6px', color: '#98989D' }}>{title}</span>
+      <span style={{ fontSize: '14px', paddingRight: '8px', color: '#98989D' }}>{title}</span>
+
       {options.map(item => {
         const isActive = value === item.id;
         const { id, props: itemProps, component: ItemComponent, info } = item;
@@ -46,22 +47,23 @@ const Toolbar = (props: ToolbarProps) => {
           <Tooltip title={title} color={tooltipColor}>
             <Button
               type={buttonType}
-              icon={<Icon type={icon} />}
+              icon={<Icon type={icon} style={{ fontSize: '18px' }} />}
               key={id}
               className={info.className}
               style={{
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                width: 32,
-                marginRight: 4,
+                width: 'auto',
+                margin: '0 4px',
+                padding: '0 8px',
                 ...(isActive ? ActiveButtonStyle : {}),
               }}
               onClick={() => {
                 onChange(id);
               }}
             >
-              {displayText ? title : null}
+              {displayText ? <span style={{ fontSize: '14px' }}>{title}</span> : null}
             </Button>
           </Tooltip>
         );