Add InputHidden Component

设置面板默认隐藏 Token

assets/global.less

@@ -53,3 +53,33 @@ form button {
 textarea {
   resize: vertical;
 }
+
+.input-group {
+  display: flex;
+
+  input {
+    flex: 1 1 auto;
+  }
+
+  input:not(:last-child) {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  button:not(:first-child) {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  button {
+    flex: 1;
+    padding: 0 .75em;
+
+    svg {
+      width: 1.5em;
+      height: 1.5em;
+    }
+  }
+}

assets/icons.tsx

@@ -33,3 +33,15 @@ export function IconSad() {
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 13.6169 21.6162 15.1442 20.9348 16.4958C20.8633 16.2175 20.7307 15.9523 20.5374 15.7206L20.4142 15.5858L19 14.1716L17.5858 15.5858L17.469 15.713C16.8069 16.4988 16.8458 17.6743 17.5858 18.4142C18.014 18.8424 18.588 19.0358 19.148 18.9946C17.3323 20.8487 14.8006 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 15C10.6199 15 9.37036 15.5592 8.46564 16.4633L8.30009 16.6368L9.24506 17.4961C10.035 17.1825 10.982 17 12 17C12.9049 17 13.7537 17.1442 14.4859 17.3965L14.7549 17.4961L15.6999 16.6368C14.7853 15.6312 13.4664 15 12 15ZM8.5 10C7.67157 10 7 10.6716 7 11.5C7 12.3284 7.67157 13 8.5 13C9.32843 13 10 12.3284 10 11.5C10 10.6716 9.32843 10 8.5 10ZM15.5 10C14.6716 10 14 10.6716 14 11.5C14 12.3284 14.6716 13 15.5 13C16.3284 13 17 12.3284 17 11.5C17 10.6716 16.3284 10 15.5 10Z"></path></svg>
   );
 }
+
+export function IconEye() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12ZM12.0003 17C14.7617 17 17.0003 14.7614 17.0003 12C17.0003 9.23858 14.7617 7 12.0003 7C9.23884 7 7.00026 9.23858 7.00026 12C7.00026 14.7614 9.23884 17 12.0003 17ZM12.0003 15C10.3434 15 9.00026 13.6569 9.00026 12C9.00026 10.3431 10.3434 9 12.0003 9C13.6571 9 15.0003 10.3431 15.0003 12C15.0003 13.6569 13.6571 15 12.0003 15Z"></path></svg>
+  );
+}
+
+export function IconEyeClose() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.1305 15.8421L9.34268 18.7821L7.41083 18.2645L8.1983 15.3256C7.00919 14.8876 5.91661 14.2501 4.96116 13.4536L2.80783 15.6069L1.39362 14.1927L3.54695 12.0394C2.35581 10.6105 1.52014 8.8749 1.17578 6.96843L2.07634 6.80469C4.86882 8.81573 8.29618 10.0003 12.0002 10.0003C15.7043 10.0003 19.1316 8.81573 21.9241 6.80469L22.8247 6.96843C22.4803 8.8749 21.6446 10.6105 20.4535 12.0394L22.6068 14.1927L21.1926 15.6069L19.0393 13.4536C18.0838 14.2501 16.9912 14.8876 15.8021 15.3256L16.5896 18.2645L14.6578 18.7821L13.87 15.8421C13.2623 15.9461 12.6376 16.0003 12.0002 16.0003C11.3629 16.0003 10.7381 15.9461 10.1305 15.8421Z"></path></svg>
+  );
+}

components/ui/inputHidden/index.tsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import type { InputHTMLAttributes, MouseEvent, ReactElement } from "react";
+import { IconEye, IconEyeClose } from "~assets/icons";
+
+type InputHiddenProps = Partial<InputHTMLAttributes<HTMLInputElement>> & {
+  suffix?: ReactElement
+}
+
+function InputHidden(props: InputHiddenProps) {
+  const [type, setType] = useState<"text" | "password">("password");
+
+  const onSwitchType = (ev: MouseEvent) => {
+    ev.preventDefault();
+
+    setType(type === "text" ? "password" : "text");
+  }
+
+  return (
+    <div className="input-group">
+      <input type={type} placeholder="隐藏信息" {...props} />
+      {props.suffix && props.suffix}
+      <button className="btn primary" onClick={onSwitchType} title={type === "text" ? "隐藏" : "显示"}>
+        {type === "text" ? <IconEyeClose /> : <IconEye />}
+      </button>
+    </div>
+  );
+}
+
+export default InputHidden;

options/index.tsx

@@ -3,7 +3,8 @@ import Form from "~components/ui/form";
 import { IconPaul } from "~assets/icons";
 import Message from "~components/ui/message";
 import { add } from "~components/ui/message/utils";
-import "~assets/global.css";
+import InputHidden from "~components/ui/inputHidden";
+import "~assets/global.less";
 import styles from "./options.module.less";
 
 function Options() {
@@ -51,7 +52,7 @@ function Options() {
         <Form className={styles.form}>
           <div>
             <label htmlFor="token">后端通信 Token</label>
-            <input id="token" name="token" value={state.token} onChange={onChange} />
+            <InputHidden id="token" name="token" value={state.token} onChange={onChange} />
           </div>
           <div>
             <label htmlFor="siteUrl">后端 API 地址</label>

popup/index.tsx

@@ -4,7 +4,7 @@ import Read from "./read";
 import Toy from "./bili";
 import Message from "~components/ui/message";
 import { clsn } from "~utils";
-import "assets/global.css";
+import "assets/global.less";
 import styles from "./popup.module.less";
 
 function IndexPopup() {