From 96e3d3a22c57fd061cad68d374d97c5f1ec51e2f Mon Sep 17 00:00:00 2001
From: PaRaD1SE98 <parad1se@prds98.com>
Date: Wed, 10 May 2023 07:14:49 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E7=BB=99=E6=89=80=E6=9C=89select=E5=85=83?=
 =?UTF-8?q?=E7=B4=A0=E6=B7=BB=E5=8A=A0=E4=B8=80=E4=B8=AA=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/mask.tsx           | 10 +++++-----
 app/components/model-config.tsx   |  6 +++---
 app/components/settings.tsx       | 22 +++++++++++++++-------
 app/components/ui-lib.module.scss | 25 +++++++++++++++++++++++++
 app/components/ui-lib.tsx         | 21 +++++++++++++++++++++
 app/icons/down.svg                |  1 +
 6 files changed, 70 insertions(+), 15 deletions(-)
 create mode 100644 app/icons/down.svg

diff --git a/app/components/mask.tsx b/app/components/mask.tsx
index a37cfba7..13ffb9ef 100644
--- a/app/components/mask.tsx
+++ b/app/components/mask.tsx
@@ -14,7 +14,7 @@ import CopyIcon from "../icons/copy.svg";
 
 import { DEFAULT_MASK_AVATAR, Mask, useMaskStore } from "../store/mask";
 import { Message, ModelConfig, ROLES, useChatStore } from "../store";
-import { Input, List, ListItem, Modal, Popover } from "./ui-lib";
+import { Input, List, ListItem, Modal, Popover, Select } from "./ui-lib";
 import { Avatar, AvatarPicker } from "./emoji";
 import Locale, { AllLangs, Lang } from "../locales";
 import { useNavigate } from "react-router-dom";
@@ -116,7 +116,7 @@ function ContextPromptItem(props: {
   return (
     <div className={chatStyle["context-prompt-row"]}>
       {!focusingInput && (
-        <select
+        <Select
           value={props.prompt.role}
           className={chatStyle["context-role"]}
           onChange={(e) =>
@@ -131,7 +131,7 @@ function ContextPromptItem(props: {
               {r}
             </option>
           ))}
-        </select>
+        </Select>
       )}
       <Input
         value={props.prompt.content}
@@ -307,7 +307,7 @@ export function MaskPage() {
               autoFocus
               onInput={(e) => onSearch(e.currentTarget.value)}
             />
-            <select
+            <Select
               className={styles["mask-filter-lang"]}
               value={filterLang ?? Locale.Settings.Lang.All}
               onChange={(e) => {
@@ -327,7 +327,7 @@ export function MaskPage() {
                   {Locale.Settings.Lang.Options[lang]}
                 </option>
               ))}
-            </select>
+            </Select>
 
             <IconButton
               className={styles["mask-create"]}
diff --git a/app/components/model-config.tsx b/app/components/model-config.tsx
index fe9319e0..fbc96d4d 100644
--- a/app/components/model-config.tsx
+++ b/app/components/model-config.tsx
@@ -2,7 +2,7 @@ import { ALL_MODELS, ModalConfigValidator, ModelConfig } from "../store";
 
 import Locale from "../locales";
 import { InputRange } from "./input-range";
-import { List, ListItem } from "./ui-lib";
+import { List, ListItem, Select } from "./ui-lib";
 
 export function ModelConfigList(props: {
   modelConfig: ModelConfig;
@@ -11,7 +11,7 @@ export function ModelConfigList(props: {
   return (
     <>
       <ListItem title={Locale.Settings.Model}>
-        <select
+        <Select
           value={props.modelConfig.model}
           onChange={(e) => {
             props.updateConfig(
@@ -27,7 +27,7 @@ export function ModelConfigList(props: {
               {v.name}
             </option>
           ))}
-        </select>
+        </Select>
       </ListItem>
       <ListItem
         title={Locale.Settings.Temperature.Title}
diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index 29f5ee9c..2e08c251 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -10,7 +10,15 @@ import ClearIcon from "../icons/clear.svg";
 import LoadingIcon from "../icons/three-dots.svg";
 import EditIcon from "../icons/edit.svg";
 import EyeIcon from "../icons/eye.svg";
-import { Input, List, ListItem, Modal, PasswordInput, Popover } from "./ui-lib";
+import {
+  Input,
+  List,
+  ListItem,
+  Modal,
+  PasswordInput,
+  Popover,
+  Select,
+} from "./ui-lib";
 import { ModelConfigList } from "./model-config";
 
 import { IconButton } from "./button";
@@ -368,7 +376,7 @@ export function Settings() {
           </ListItem>
 
           <ListItem title={Locale.Settings.SendKey}>
-            <select
+            <Select
               value={config.submitKey}
               onChange={(e) => {
                 updateConfig(
@@ -382,11 +390,11 @@ export function Settings() {
                   {v}
                 </option>
               ))}
-            </select>
+            </Select>
           </ListItem>
 
           <ListItem title={Locale.Settings.Theme}>
-            <select
+            <Select
               value={config.theme}
               onChange={(e) => {
                 updateConfig(
@@ -399,11 +407,11 @@ export function Settings() {
                   {v}
                 </option>
               ))}
-            </select>
+            </Select>
           </ListItem>
 
           <ListItem title={Locale.Settings.Lang.Name}>
-            <select
+            <Select
               value={getLang()}
               onChange={(e) => {
                 changeLang(e.target.value as any);
@@ -414,7 +422,7 @@ export function Settings() {
                   {Locale.Settings.Lang.Options[lang]}
                 </option>
               ))}
-            </select>
+            </Select>
           </ListItem>
 
           <ListItem
diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
index ce512dab..6296c908 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -203,3 +203,28 @@
   resize: none;
   min-width: 50px;
 }
+
+.select-with-icon {
+  position: relative;
+  max-width: fit-content;
+  
+  .select-with-icon-select {
+    border: var(--border-in-light);
+    padding: 10px 25px 10px 10px;
+    border-radius: 10px;
+    appearance: none;
+    cursor: pointer;
+    background-color: var(--white);
+    color: var(--black);
+    text-align: center;
+    position: relative;
+  }
+
+  .select-with-icon-icon {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+}
\ No newline at end of file
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index c16f94a4..935f0f93 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -3,6 +3,7 @@ import LoadingIcon from "../icons/three-dots.svg";
 import CloseIcon from "../icons/close.svg";
 import EyeIcon from "../icons/eye.svg";
 import EyeOffIcon from "../icons/eye-off.svg";
+import DownIcon from "../icons/down.svg";
 
 import { createRoot } from "react-dom/client";
 import React, { HTMLProps, useEffect, useState } from "react";
@@ -244,3 +245,23 @@ export function PasswordInput(props: HTMLProps<HTMLInputElement>) {
     </div>
   );
 }
+
+export function Select(
+  props: React.DetailedHTMLProps<
+    React.SelectHTMLAttributes<HTMLSelectElement>,
+    HTMLSelectElement
+  >,
+) {
+  const { className, children, ...otherProps } = props;
+  return (
+    <div className={styles["select-with-icon"]}>
+      <select
+        className={`${styles["select-with-icon-select"]} ${className}`}
+        {...otherProps}
+      >
+        {children}
+      </select>
+      <DownIcon className={styles["select-with-icon-icon"]} />
+    </div>
+  );
+}
diff --git a/app/icons/down.svg b/app/icons/down.svg
new file mode 100644
index 00000000..cca830b8
--- /dev/null
+++ b/app/icons/down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><defs><rect id="path_0" x="0" y="0" width="16" height="16" /></defs><g opacity="1" transform="translate(0 0)  rotate(-90 8 8)"><mask id="bg-mask-0" fill="white"><use xlink:href="#path_0"></use></mask><g mask="url(#bg-mask-0)" ><path  id="路径 1" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(6.333333333333333 4)  rotate(0 2 4)" d="M4,8L0,4L4,0 " /></g></g></svg>

From 960aa90c32fa9c1355ab0543f100e81bf508d54e Mon Sep 17 00:00:00 2001
From: PaRaD1SE98 <parad1se@prds98.com>
Date: Wed, 10 May 2023 14:09:30 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BC=98=E5=8C=96Select=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/ui-lib.module.scss | 2 +-
 app/components/ui-lib.tsx         | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
index 6296c908..e0806d22 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -209,6 +209,7 @@
   max-width: fit-content;
   
   .select-with-icon-select {
+    height: 100%;
     border: var(--border-in-light);
     padding: 10px 25px 10px 10px;
     border-radius: 10px;
@@ -217,7 +218,6 @@
     background-color: var(--white);
     color: var(--black);
     text-align: center;
-    position: relative;
   }
 
   .select-with-icon-icon {
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index 935f0f93..5687b1c5 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -254,11 +254,8 @@ export function Select(
 ) {
   const { className, children, ...otherProps } = props;
   return (
-    <div className={styles["select-with-icon"]}>
-      <select
-        className={`${styles["select-with-icon-select"]} ${className}`}
-        {...otherProps}
-      >
+    <div className={`${styles["select-with-icon"]} ${className}`}>
+      <select className={styles["select-with-icon-select"]} {...otherProps}>
         {children}
       </select>
       <DownIcon className={styles["select-with-icon-icon"]} />