fix: change panel style

xsky-fe · May 24, 2023 · 56e56a2 · 56e56a2
1 parent e04cd48
commit 56e56a2
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 16 deletions.
diff --git a/src/components/Panel/index.scss b/src/components/Panel/index.scss
@@ -29,11 +29,60 @@
   cursor: pointer;
 }
 
+.panel-embedded {
+  box-shadow: none;
+  border: 1px solid $border-2;
+}
+
+.panel-default {
+  .panel-heading {
+    font-size: $font-size-16;
+    color: $text-1;
+    line-height: 24px;
+    padding: 16px 24px;
+  }
+
+  .panel-body {
+    padding: 0 24px 24px;
+  }
+}
+
+.panel-sm {
+  .panel-heading {
+    color: $text-1;
+    font-size: $font-size-14;
+    line-height: 22px;
+    font-weight: $font-weight-medium;
+    padding: 8px 16px;
+  }
+
+  .panel-body {
+    padding: 0 16px 16px;
+  }
+}
+
+.panel-xs {
+  .panel-heading {
+    color: $text-1;
+    font-size: $font-size-14;
+    line-height: 22px;
+    padding: 8px 8px;
+  }
+
+  .panel-body {
+    padding: 0 8px 8px;
+  }
+}
+
+.accordion-span {
+  cursor: pointer;
+}
+
 .card-group {
   flex-direction: column;
 
   .accordion {
-    + .accordion{
+    +.accordion {
       margin-top: 5px;
     }
   }
@@ -42,26 +91,27 @@
     border-left: 1px solid $card-border-color !important;
     border-radius: $radius-4-card !important;
 
-    .card-header{
+    .card-header {
       border-bottom: none;
     }
 
-    + .card {
+    +.card {
       margin-top: 5px;
     }
   }
 }
 
-.accordion{
+.accordion {
   box-shadow: $card-box-shadow;
   border-radius: $radius-middle;
-  .accordion-button{
-    &:not(.collapsed){
+
+  .accordion-button {
+    &:not(.collapsed) {
       box-shadow: none;
     }
   }
 
-  .accordion-header{
+  .accordion-header {
     line-height: inherit;
     border-bottom: 1px solid $border-2;
   }

diff --git a/src/components/Panel/index.tsx b/src/components/Panel/index.tsx
@@ -15,13 +15,25 @@ const Panel: React.FC<PanelProps> = props => {
     collapsible,
     header,
     expanded,
+    embedded = false,
+    innerPaddingSize = 'default',
     ...restProps
   } = props;
   const bgClass = bg ? `panel-${bg}-bg` : '';
   const textClass = text ? `text-${text}` : 'text-dark';
+  const embeddedClass = embedded && 'panel-embedded';
+  const cardClassName = classNames(
+    'panel',
+    `panel-${innerPaddingSize}`,
+    bgClass,
+    textClass,
+    className,
+    embeddedClass,
+  );
   const [open, setOpen] = useState(expanded);
+
   return collapsible ? (
-    <Card className="panel">
+    <Card className={cardClassName}>
       <Card.Header
         className="panel-heading"
         onClick={() => setOpen(!open)}
@@ -36,9 +48,9 @@ const Panel: React.FC<PanelProps> = props => {
       </Collapse>
     </Card>
   ) : (
-    <Card {...restProps} className={classNames('panel', bgClass, textClass, className)}>
+    <Card {...restProps} className={cardClassName}>
       {header && <Card.Header className="panel-heading">{header}</Card.Header>}
-      <Card.Body className="panel-body">{children}</Card.Body>
+      {children && <Card.Body className="panel-body">{children}</Card.Body>}
     </Card>
   );
 };
@@ -56,6 +68,14 @@ Panel.propTypes = {
    * 面板文字颜色；
    **/
   text: PropTypes.string,
+  /**
+   * 是否是内嵌面板
+   **/
+  embedded: PropTypes.bool,
+  /**
+   * 卡片内边距的大小
+   **/
+  innerPaddingSize: PropTypes.oneOf(['default', 'sm', 'xs']),
 };
 
 export default Panel;
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
@@ -93,8 +93,8 @@ const Tabs: React.FC<TabsProps> = props => {
                 eventKey={eventKeyName ? tab[eventKeyName] : idx}
               >
                 {tab.children && (
-                  <Card body className="Tabs__Body">
-                    {tab.children}
+                  <Card className="Tabs__Body panel">
+                    <Card.Body className="panel-body"> {tab.children}</Card.Body>
                   </Card>
                 )}
               </Tab.Pane>

diff --git a/src/components/UsageBar/index.tsx b/src/components/UsageBar/index.tsx
@@ -85,7 +85,11 @@ const UsageBar: React.FC<UsageBarProps> = props => {
       const now = hasNow ? props.now : props.percent && max && props.percent * max;
       // 当展示右侧 max 为 0+单位时(showZeroMax为true), 如果 now 大于 max 时，percent 应为 100%
       const defaultPercent = showZeroMax && Number(now) > Number(max) ? 1 : 0;
-      const percent = hasPercent ? props.percent : max ? props.now && props.now / max : defaultPercent;
+      const percent = hasPercent
+        ? props.percent
+        : max
+        ? props.now && props.now / max
+        : defaultPercent;
       const errorPercent = unavailableData && max && unavailableData / max;
       let nowValue: number | string | undefined = now;
       let maxValue: number | string | undefined = max;
@@ -207,7 +211,7 @@ const UsageBar: React.FC<UsageBarProps> = props => {
       {hasSeries && withLenged && (
         <Row className="UsageBar__legend">
           {lodash.map(finalSeries, ({ name, legend, bsStyle, value }, index) => (
-            <Col xs={12} className={`Legend ${bsStyle} ${value ? '' : 'noVal'}`} key={index}>
+            <Col xs={6} className={`Legend ${bsStyle} ${value ? '' : 'noVal'}`} key={index}>
               <span title={typeof name === 'string' ? name : undefined}>{name}</span>
               <span title={legend}>{legend}</span>
             </Col>

diff --git a/src/interface.tsx b/src/interface.tsx
@@ -178,7 +178,7 @@ export interface TimePickerProps {
 }
 
 export interface TreeData {
-  title: string;
+  title?: string;
   disabled?: boolean;
   key: string;
   children?: TreeData[];
@@ -291,7 +291,9 @@ export interface PanelProps {
   className?: string;
   header?: React.ReactNode;
   collapsible?: boolean;
-  expanded?: boolean
+  expanded?: boolean;
+  embedded?: boolean;
+  innerPaddingSize?: string;
 }
 
 export interface DropdownDefaultProps {