v1.1.8 (#31)

* fix(ProxyCard): only badge can be used to collapse * fix(App): invalid styles * fix(App): invalid values
igoogolx · Dec 29, 2024 · 4c9e2ca · 4c9e2ca
1 parent 28abf19
commit 4c9e2ca
Show file tree

Hide file tree

Showing 15 changed files with 81 additions and 59 deletions.
diff --git a/src/components/pages/About/index.module.css b/src/components/pages/About/index.module.css
@@ -1,5 +1,5 @@
 .container {
-  @apply flex h-full flex-col py-8 w-full;
+  @apply flex h-full flex-col py-8 w-full pr-4;
 
   & .appHeader {
     @apply flex justify-between flex-row items-center;

diff --git a/src/components/pages/Data/Connections/index.module.css b/src/components/pages/Data/Connections/index.module.css
@@ -1,5 +1,5 @@
 .wrapper {
-  @apply flex h-full flex-1 flex-col items-center overflow-auto  py-4 text-sm;
+  @apply flex h-full flex-1 flex-col items-center overflow-auto  py-4 text-sm pr-4;
   & .toolbar {
     @apply mb-2 flex w-full justify-between;
 

diff --git a/src/components/pages/Data/Dashboard/index.module.css b/src/components/pages/Data/Dashboard/index.module.css
@@ -1,3 +1,3 @@
 .wrapper {
-  @apply flex h-full w-full flex-col overflow-auto px-1;
+  @apply flex h-full w-full flex-col overflow-auto px-1 pr-4;
 }
diff --git a/src/components/pages/Home/Content/ProxyCard/index.module.css b/src/components/pages/Home/Content/ProxyCard/index.module.css
@@ -10,6 +10,6 @@
   @apply mx-2 my-2 flex-shrink-0;
 
   & .header {
-    @apply flex items-center justify-between;
+    @apply flex items-center justify-between flex-1;
   }
 }
diff --git a/src/components/pages/Home/Content/ProxyCard/index.tsx b/src/components/pages/Home/Content/ProxyCard/index.tsx
@@ -12,7 +12,6 @@ import {
   Badge,
   Button,
   Card,
-  CardHeader,
   type DataGridProps,
   mergeClasses,
   type TableColumnDefinition,
@@ -24,7 +23,7 @@ import {
   DeleteRegular,
 } from "@fluentui/react-icons";
 import { addProxiesFromSubscriptionUrl, deleteProxies } from "lux-js-sdk";
-import React, { useState } from "react";
+import React, { MouseEventHandler, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import styles from "./index.module.css";
@@ -41,7 +40,7 @@ export interface ProxyCardProps<T> {
 export const LOCAL_SERVERS = "local_servers";
 
 export default function ProxyCard<T extends { id: string }>(
-  props: ProxyCardProps<T>,
+  props: Readonly<ProxyCardProps<T>>,
 ): React.ReactNode {
   const {
     url,
@@ -61,8 +60,9 @@ export default function ProxyCard<T extends { id: string }>(
     useState(false);
 
   const dispatch = useDispatch();
-  const handleUpdateSubscriptionProxies = async () => {
+  const handleUpdateSubscriptionProxies: MouseEventHandler = async (e) => {
     try {
+      e.stopPropagation();
       dispatch(generalSlice.actions.setLoading({ loading: true }));
       const decodedProxies = await decodeFromUrl(url);
       const res = await addProxiesFromSubscriptionUrl({
@@ -89,7 +89,8 @@ export default function ProxyCard<T extends { id: string }>(
     }
   };
 
-  const handleCopyUrl = async () => {
+  const handleCopyUrl: MouseEventHandler = async (e) => {
+    e.stopPropagation();
     await navigator.clipboard.writeText(url);
     notifier.success(t(TRANSLATION_KEY.COPIED));
   };
@@ -100,7 +101,8 @@ export default function ProxyCard<T extends { id: string }>(
     setIsDeleteAllProxiesModalOpen(false);
   };
 
-  const openDeleteAllProxiesModal = () => {
+  const openDeleteAllProxiesModal: MouseEventHandler = (e) => {
+    e.stopPropagation();
     setIsDeleteAllProxiesModalOpen(true);
   };
 
@@ -120,22 +122,18 @@ export default function ProxyCard<T extends { id: string }>(
       )}
       <Accordion collapsible defaultOpenItems={["1"]}>
         <AccordionItem value="1">
-          <CardHeader
-            header={
-              <AccordionHeader>
-                <Badge appearance="outline" size="large">
-                  {title}
-                </Badge>
-              </AccordionHeader>
-            }
-            className={styles.header}
-            action={
+          <AccordionHeader>
+            <div className={styles.header}>
+              <Badge appearance="outline" size="large">
+                {title}
+              </Badge>
               <div className={styles.action}>
                 <Tooltip
                   content={t(TRANSLATION_KEY.COMMON_DELETE)}
                   relationship="description"
                 >
                   <Button
+                    as={"a"}
                     onClick={openDeleteAllProxiesModal}
                     icon={<DeleteRegular />}
                     className={mergeClasses(
@@ -151,6 +149,7 @@ export default function ProxyCard<T extends { id: string }>(
                     relationship="description"
                   >
                     <Button
+                      as={"a"}
                       onClick={handleCopyUrl}
                       icon={<ClipboardRegular />}
                       className={styles.btn}
@@ -163,15 +162,16 @@ export default function ProxyCard<T extends { id: string }>(
                     relationship="description"
                   >
                     <Button
+                      as={"a"}
                       onClick={handleUpdateSubscriptionProxies}
                       icon={<ArrowSyncRegular />}
                       className={styles.btn}
                     />
                   </Tooltip>
                 )}
               </div>
-            }
-          />
+            </div>
+          </AccordionHeader>
           <AccordionPanel>
             <Table
               columns={columns}

diff --git a/src/components/pages/Home/Header/index.module.css b/src/components/pages/Home/Header/index.module.css
@@ -1,5 +1,5 @@
 .wrapper {
-  @apply flex h-full w-full items-center justify-between pb-4;
+  @apply flex h-full w-full items-center justify-between pb-4 pr-4 pl-2;
 
   & .actions {
     @apply flex h-full items-center justify-end;

diff --git a/src/components/pages/Logger/index.module.css b/src/components/pages/Logger/index.module.css
@@ -1,5 +1,5 @@
 .wrapper {
-  @apply flex h-full w-full flex-col items-center justify-items-center overflow-auto py-4 text-sm;
+  @apply flex h-full w-full flex-col items-center justify-items-center overflow-auto py-4 text-sm pr-4;
   & .toolbar {
     @apply mb-2 flex w-full;
     & .logBtn {

diff --git a/src/components/pages/Rules/RuleTable/index.module.css b/src/components/pages/Rules/RuleTable/index.module.css
@@ -1,5 +1,5 @@
 .wrapper {
-  @apply flex h-full flex-1 flex-col items-center overflow-auto  py-4 text-sm;
+  @apply flex h-full flex-1 flex-col items-center overflow-auto  py-4 text-sm pr-4;
 
   & .toolbar {
     @apply mb-2 flex w-full justify-between;

diff --git a/src/components/pages/Setting/Language/index.tsx b/src/components/pages/Setting/Language/index.tsx
@@ -16,13 +16,13 @@ export default function Language() {
   const setting = useSelector<RootState, SettingRes>((state) => state.setting);
 
   const LANGUAGE_OPTIONS = [
-    { content: t(TRANSLATION_KEY.SYSTEM), id: LANGUAGE_ENUM.SYSTEM },
+    { content: t(TRANSLATION_KEY.SYSTEM_SETTING), id: LANGUAGE_ENUM.SYSTEM },
     { content: t(TRANSLATION_KEY.EN_US), id: LANGUAGE_ENUM.EN_US },
     { content: t(TRANSLATION_KEY.ZH_CN), id: LANGUAGE_ENUM.ZH_CN },
   ];
 
   const TRANSLATION_MAP = {
-    [LANGUAGE_ENUM.SYSTEM]: t(TRANSLATION_KEY.SYSTEM),
+    [LANGUAGE_ENUM.SYSTEM]: t(TRANSLATION_KEY.SYSTEM_SETTING),
     [LANGUAGE_ENUM.EN_US]: t(TRANSLATION_KEY.EN_US),
     [LANGUAGE_ENUM.ZH_CN]: t(TRANSLATION_KEY.ZH_CN),
   };
@@ -44,7 +44,6 @@ export default function Language() {
         <div>
           <Dropdown
             value={TRANSLATION_MAP[setting.language as LANGUAGE_ENUM]}
-            selectedOptions={[setting.language]}
             onOptionSelect={(e, data) => {
               onChange(data.optionValue as string);
               i18n.changeLanguage(getLang(data.optionValue));

diff --git a/src/components/pages/Setting/Mode/index.tsx b/src/components/pages/Setting/Mode/index.tsx
@@ -14,17 +14,6 @@ import { useDispatch, useSelector } from "react-redux";
 import { notifier } from "../../../Core";
 import styles from "../index.module.css";
 
-const OPTIONS = [
-  {
-    id: "tun",
-    content: "tun",
-  },
-  {
-    id: "system",
-    content: "system",
-  },
-];
-
 export default function Mode() {
   const { t } = useTranslation();
   const dispatch = useDispatch();
@@ -42,6 +31,22 @@ export default function Mode() {
     notifier.success(t(TRANSLATION_KEY.SAVE_SUCCESS));
   };
 
+  const translationMap = {
+    tun: t(TRANSLATION_KEY.TUN),
+    system: t(TRANSLATION_KEY.SYSTEM),
+  };
+
+  const options = [
+    {
+      id: "tun",
+      content: translationMap.tun,
+    },
+    {
+      id: "system",
+      content: translationMap.system,
+    },
+  ];
+
   return (
     <Card className={styles.card}>
       <div className={styles.cardItem}>
@@ -53,13 +58,15 @@ export default function Mode() {
         <Dropdown
           className={styles.selector}
           disabled={isStarted}
-          value={setting.mode}
+          value={translationMap[setting.mode as keyof typeof translationMap]}
           onOptionSelect={(e, data) => {
             onSubmit(data.optionValue as SettingRes["mode"]);
           }}
         >
-          {OPTIONS.map((option) => (
-            <Option key={option.id}>{option.content}</Option>
+          {options.map((option) => (
+            <Option key={option.id} value={option.id}>
+              {option.content}
+            </Option>
           ))}
         </Dropdown>
       </div>

diff --git a/src/components/pages/Setting/Stack/index.tsx b/src/components/pages/Setting/Stack/index.tsx
@@ -14,17 +14,6 @@ import { useDispatch, useSelector } from "react-redux";
 import { notifier } from "../../../Core";
 import styles from "../index.module.css";
 
-const OPTIONS = [
-  {
-    id: "system",
-    content: "system",
-  },
-  {
-    id: "gvisor",
-    content: "gvisor",
-  },
-];
-
 export default function Stack() {
   const { t } = useTranslation();
   const dispatch = useDispatch();
@@ -42,6 +31,22 @@ export default function Stack() {
     notifier.success(t(TRANSLATION_KEY.SAVE_SUCCESS));
   };
 
+  const translationMap = {
+    system: t(TRANSLATION_KEY.SYSTEM),
+    gvisor: t(TRANSLATION_KEY.GVISOR),
+  };
+
+  const options = [
+    {
+      id: "system",
+      content: translationMap.system,
+    },
+    {
+      id: "gvisor",
+      content: translationMap.gvisor,
+    },
+  ];
+
   return (
     <Card className={styles.card}>
       <div className={styles.cardItem}>
@@ -53,13 +58,15 @@ export default function Stack() {
         <Dropdown
           className={styles.selector}
           disabled={isStarted}
-          value={setting.stack}
+          value={translationMap[setting.stack as keyof typeof translationMap]}
           onOptionSelect={(e, data) => {
             onSubmit(data.optionValue as SettingRes["stack"]);
           }}
         >
-          {OPTIONS.map((option) => (
-            <Option key={option.id}>{option.content}</Option>
+          {options.map((option) => (
+            <Option key={option.id} value={option.id}>
+              {option.content}
+            </Option>
           ))}
         </Dropdown>
       </div>

diff --git a/src/components/pages/Setting/index.module.css b/src/components/pages/Setting/index.module.css
@@ -1,5 +1,5 @@
 .wrapper {
-  @apply w-full py-2;
+  @apply w-full py-2 pr-4;
 
   & .card {
     @apply mb-6;

diff --git a/src/i18n/locales/en_us.ts b/src/i18n/locales/en_us.ts
@@ -196,4 +196,7 @@ export default {
   [TRANSLATION_KEY.NEW_CUSTOMIZED_DNS_OPTION]: "Create Customized Dns Option",
   [TRANSLATION_KEY.NEW_IMPORT_SUBSCRIPTION_URL]: "Import Subscription Url",
   [TRANSLATION_KEY.TOKEN]: "Token",
+  [TRANSLATION_KEY.TUN]: "Tun",
+  [TRANSLATION_KEY.GVISOR]: "Gvisor",
+  [TRANSLATION_KEY.SYSTEM_SETTING]: "System Setting",
 };
diff --git a/src/i18n/locales/key.ts b/src/i18n/locales/key.ts
@@ -165,11 +165,14 @@ export const TRANSLATION_KEY = {
   CHECK_UPDATE_ERROR: "notification.check_update_error",
   NO_NEW_VERSION: "notification.no_new_version",
   DNS_SERVER_NUM_MSG: "dns_server_num_msg",
-  NEW_CUSTOMIZED_RULE: "dns_server_num_msg",
+  NEW_CUSTOMIZED_RULE: "new_customized_rule",
   NEW_SHADOWSOCKS: "new_shadowsocks",
   NEW_HTTP: "new_http",
   NEW_SOCKS5: "new_socks5",
   NEW_CUSTOMIZED_DNS_OPTION: "new_customized_dns_option",
-  NEW_IMPORT_SUBSCRIPTION_URL: "new_customized_dns_option",
+  NEW_IMPORT_SUBSCRIPTION_URL: "new_import_subscription_url",
   TOKEN: "token",
+  TUN: "tun",
+  GVISOR: "gvisor",
+  SYSTEM_SETTING: "system_setting",
 };
diff --git a/src/i18n/locales/zh_cn.ts b/src/i18n/locales/zh_cn.ts
@@ -188,4 +188,7 @@ export default {
   [TRANSLATION_KEY.NEW_CUSTOMIZED_DNS_OPTION]: "新建自定义 Dns 选项",
   [TRANSLATION_KEY.NEW_IMPORT_SUBSCRIPTION_URL]: "导入订阅链接",
   [TRANSLATION_KEY.TOKEN]: "Token",
+  [TRANSLATION_KEY.TUN]: "Tun",
+  [TRANSLATION_KEY.GVISOR]: "Gvisor",
+  [TRANSLATION_KEY.SYSTEM_SETTING]: "系统配置",
 };