perf: GroupPanelSelector 兼容暗黑模式与placeholder

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",

shared/i18n/langs/zh-CN/translation.json

@@ -37,6 +37,7 @@
   "k35abe359": "大厅",
   "k35f486ba": "用户昵称",
   "k35f990b0": "查看详情",
+  "k3662c0d4": "请选择面板",
   "k393892b6": "上传原图",
   "k3ac17670": "出现异常, Store 创建失败",
   "k3b4b656d": "关于",

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}

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;
+    }
+  }
 }

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;
+    }
+  }
 }