From e85c39e570f03c710901beef2aa6e70a7c6c208a Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 9 Sep 2023 00:21:47 +0800
Subject: [PATCH] feat: add component CollapseView

---
 client/web/src/components/CollapseView.tsx | 17 ++++++
 client/web/src/styles/antd/dark.less       | 63 ++++++++++++++++------
 2 files changed, 63 insertions(+), 17 deletions(-)
 create mode 100644 client/web/src/components/CollapseView.tsx

diff --git a/client/web/src/components/CollapseView.tsx b/client/web/src/components/CollapseView.tsx
new file mode 100644
index 00000000..5f33e85e
--- /dev/null
+++ b/client/web/src/components/CollapseView.tsx
@@ -0,0 +1,17 @@
+import { Collapse } from 'antd';
+import React from 'react';
+
+interface CollapseViewProps extends React.PropsWithChildren {
+  title: string;
+  className?: string;
+}
+export const CollapseView: React.FC<CollapseViewProps> = React.memo((props) => {
+  return (
+    <Collapse className={props.className}>
+      <Collapse.Panel header={props.title} key="main">
+        {props.children}
+      </Collapse.Panel>
+    </Collapse>
+  );
+});
+CollapseView.displayName = 'CollapseView';
diff --git a/client/web/src/styles/antd/dark.less b/client/web/src/styles/antd/dark.less
index 45b4bee1..4eff02e3 100644
--- a/client/web/src/styles/antd/dark.less
+++ b/client/web/src/styles/antd/dark.less
@@ -11,7 +11,6 @@
     border-color: #434343;
     background: transparent;
 
-
     &:hover,
     &:focus {
       color: var(--antd-primary-border);
@@ -52,7 +51,10 @@
       border-color: transparent;
 
       &[disabled] {
-        &,&:hover, &:focus, &:active {
+        &,
+        &:hover,
+        &:focus,
+        &:active {
           color: rgba(255, 255, 255, 0.25);
           border-color: transparent;
           background-color: transparent;
@@ -60,7 +62,7 @@
       }
     }
 
-    &.ant-btn-text{
+    &.ant-btn-text {
       border-color: transparent;
     }
   }
@@ -94,7 +96,12 @@
       }
     }
 
-    .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper, .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:hover {
+    .ant-input-affix-wrapper-status-error:not(
+        .ant-input-affix-wrapper-disabled
+      ):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper,
+    .ant-input-affix-wrapper-status-error:not(
+        .ant-input-affix-wrapper-disabled
+      ):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:hover {
       background: transparent;
       border-color: var(--antd-primary-dangerous-color);
     }
@@ -102,16 +109,16 @@
 
   // 图标
   .anticon {
-    color: rgba(255, 255, 255, 0.45)
+    color: rgba(255, 255, 255, 0.45);
   }
 
-
   // 分割线
   .ant-divider {
     border-top-color: rgba(255, 255, 255, 0.12);
     color: rgba(255, 255, 255, 0.85);
   }
-  .ant-dropdown-menu-item-divider, .ant-dropdown-menu-submenu-title-divider {
+  .ant-dropdown-menu-item-divider,
+  .ant-dropdown-menu-submenu-title-divider {
     background-color: rgba(255, 255, 255, 0.12);
   }
 
@@ -150,7 +157,7 @@
   }
 
   // 文本框
-  .ant-input-textarea{
+  .ant-input-textarea {
     &.ant-input-textarea-show-count:after {
       color: rgba(255, 255, 255, 0.45);
     }
@@ -167,7 +174,8 @@
   }
 
   // 下拉菜单
-  .ant-dropdown, .ant-dropdown-menu-submenu {
+  .ant-dropdown,
+  .ant-dropdown-menu-submenu {
     color: rgba(255, 255, 255, 0.65);
 
     .ant-dropdown-menu {
@@ -201,7 +209,8 @@
         }
       }
 
-      .ant-dropdown-menu-item-disabled, .ant-dropdown-menu-submenu-title-disabled {
+      .ant-dropdown-menu-item-disabled,
+      .ant-dropdown-menu-submenu-title-disabled {
         color: rgba(255, 255, 255, 0.25);
 
         &:hover {
@@ -327,7 +336,7 @@
       }
 
       & > tr.ant-table-placeholder:hover > td {
-        background-color: rgba(255,255,255,0.2);
+        background-color: rgba(255, 255, 255, 0.2);
       }
 
       tr.ant-table-row:hover > td,
@@ -345,7 +354,7 @@
     }
 
     .ant-select-arrow {
-      color: rgba(0, 0, 0, 0.3)
+      color: rgba(0, 0, 0, 0.3);
     }
   }
 
@@ -353,16 +362,16 @@
     background-color: #1f1f1f;
 
     .ant-select-item {
-      color: rgba(255,255,255,.85);
+      color: rgba(255, 255, 255, 0.85);
       background-color: transparent;
 
       &:hover {
-        background-color: rgba(255,255,255,.2);
+        background-color: rgba(255, 255, 255, 0.2);
       }
     }
 
     .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
-      color: rgba(255,255,255,.85);
+      color: rgba(255, 255, 255, 0.85);
       font-weight: 600;
       background-color: #111b26;
     }
@@ -372,7 +381,8 @@
   .ant-pagination {
     color: rgba(255, 255, 255, 0.85);
 
-    .ant-pagination-prev,.ant-pagination-next {
+    .ant-pagination-prev,
+    .ant-pagination-next {
       .ant-pagination-item-link {
         background-color: transparent;
         border: 1px solid rgba(255, 255, 255, 0.2);
@@ -385,7 +395,6 @@
       }
     }
 
-
     .ant-pagination-disabled {
       .ant-pagination-item-link {
         border: 1px solid rgba(255, 255, 255, 0.2);
@@ -442,4 +451,24 @@
       border-color: #153450;
     }
   }
+
+  .ant-collapse {
+    background-color: transparent;
+    color: rgba(255, 255, 255, 0.85);
+    border-color: rgba(255, 255, 255, 0.2);
+
+    > .ant-collapse-item {
+      border-color: rgba(255, 255, 255, 0.2);
+
+      .ant-collapse-header {
+        color: rgba(255, 255, 255, 0.65);
+      }
+
+      .ant-collapse-content {
+        color: rgba(255, 255, 255, 0.65);
+        background-color: transparent;
+        border-color: rgba(255, 255, 255, 0.2);
+      }
+    }
+  }
 }