From 758d1001cea4a45b82695daea129e39d209bf7b0 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 15 Apr 2022 21:38:27 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20GroupPanelSelector=20=E5=85=BC=E5=AE=B9?=
 =?UTF-8?q?=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8F=E4=B8=8Eplaceholder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/i18n/langs/en-US/translation.json  |  1 +
 shared/i18n/langs/zh-CN/translation.json  |  1 +
 web/src/components/GroupPanelSelector.tsx |  8 ++++--
 web/src/styles/antd/dark.less             | 31 +++++++++++++++++++++++
 web/src/styles/antd/overwrite.less        |  9 +++++--
 5 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/shared/i18n/langs/en-US/translation.json b/shared/i18n/langs/en-US/translation.json
index 0b9c190c..72ccdf9c 100644
--- a/shared/i18n/langs/en-US/translation.json
+++ b/shared/i18n/langs/en-US/translation.json
@@ -37,6 +37,7 @@
   "k35abe359": "Lobby",
   "k35f486ba": "Nickname",
   "k35f990b0": "View Detail",
+  "k3662c0d4": "Please select a panel",
   "k393892b6": "Upload original image",
   "k3ac17670": "An exception occurred, store create failed",
   "k3b4b656d": "About",
diff --git a/shared/i18n/langs/zh-CN/translation.json b/shared/i18n/langs/zh-CN/translation.json
index ba46502b..53cd4a06 100644
--- a/shared/i18n/langs/zh-CN/translation.json
+++ b/shared/i18n/langs/zh-CN/translation.json
@@ -37,6 +37,7 @@
   "k35abe359": "大厅",
   "k35f486ba": "用户昵称",
   "k35f990b0": "查看详情",
+  "k3662c0d4": "请选择面板",
   "k393892b6": "上传原图",
   "k3ac17670": "出现异常, Store 创建失败",
   "k3b4b656d": "关于",
diff --git a/web/src/components/GroupPanelSelector.tsx b/web/src/components/GroupPanelSelector.tsx
index 9e5a8ba4..bd32c3a3 100644
--- a/web/src/components/GroupPanelSelector.tsx
+++ b/web/src/components/GroupPanelSelector.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Select } from 'antd';
-import { GroupPanelType, useGroupPanels } from 'tailchat-shared';
+import { GroupPanelType, t, useGroupPanels } from 'tailchat-shared';
 import { useGroupIdContext } from '@/context/GroupIdContext';
 
 const { Option } = Select;
@@ -28,7 +28,11 @@ export const GroupPanelSelector: React.FC<GroupPanelSelectorProps> = React.memo(
     );
 
     return (
-      <Select value={props.value} onChange={props.onChange}>
+      <Select
+        placeholder={t('请选择面板')}
+        value={props.value}
+        onChange={props.onChange}
+      >
         {filteredPanels.map((p) => (
           <Option key={p.id} value={p.id}>
             {p.name}
diff --git a/web/src/styles/antd/dark.less b/web/src/styles/antd/dark.less
index 9fae5aae..2675c4cb 100644
--- a/web/src/styles/antd/dark.less
+++ b/web/src/styles/antd/dark.less
@@ -270,4 +270,35 @@
       }
     }
   }
+
+  .ant-select {
+    .ant-select-selector {
+      background-color: transparent;
+      color: rgba(255, 255, 255, 0.85);
+      border-color: rgba(255, 255, 255, 0.12);
+    }
+
+    .ant-select-arrow {
+      color: rgba(0, 0, 0, 0.3)
+    }
+  }
+
+  .ant-select-dropdown {
+    background-color: #1f1f1f;
+
+    .ant-select-item {
+      color: rgba(255,255,255,.85);
+      background-color: transparent;
+
+      &:hover {
+        background-color: rgba(255,255,255,.2);
+      }
+    }
+
+    .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+      color: rgba(255,255,255,.85);
+      font-weight: 600;
+      background-color: #111b26;
+    }
+  }
 }
diff --git a/web/src/styles/antd/overwrite.less b/web/src/styles/antd/overwrite.less
index f0bce0b0..fc64b8d9 100644
--- a/web/src/styles/antd/overwrite.less
+++ b/web/src/styles/antd/overwrite.less
@@ -43,6 +43,11 @@
   }
 }
 
-.ant-table-tbody {
-  @apply select-text;
+.ant-table{
+  .ant-table-content {
+    @apply overflow-auto;
+    .ant-table-tbody {
+      @apply select-text;
+    }
+  }
 }