From b9026ad89ab2ee72a3ebfc2c3a05b5da58b0d21e Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Thu, 7 Nov 2024 11:28:26 +0800
Subject: [PATCH] refactor: widget setting

---
 src/routes/setting/Widget.tsx               | 194 --------------------
 src/routes/setting/Widget/ConfigDetails.tsx | 133 ++++++++++++++
 src/routes/setting/Widget/index.tsx         |  76 ++++++++
 3 files changed, 209 insertions(+), 194 deletions(-)
 delete mode 100644 src/routes/setting/Widget.tsx
 create mode 100644 src/routes/setting/Widget/ConfigDetails.tsx
 create mode 100644 src/routes/setting/Widget/index.tsx

diff --git a/src/routes/setting/Widget.tsx b/src/routes/setting/Widget.tsx
deleted file mode 100644
index 6befae0d..00000000
--- a/src/routes/setting/Widget.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-// import { useState, MouseEvent } from "react";
-// import dayjs from "dayjs";
-import { useTranslation } from "react-i18next";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
-
-import IconQuestion from "@/assets/icons/question.svg";
-import { useAppSelector } from "../../app/store";
-import Button from "../../components/styled/Button";
-import Input from "../../components/styled/Input";
-import useCopy from "../../hooks/useCopy";
-import { shallowEqual } from "react-redux";
-import LinkifyText from "@/components/LinkifyText";
-
-const Row = ({
-  paramKey,
-  paramDefault,
-  remarks
-}: {
-  paramKey: string;
-  paramDefault: string | number;
-  remarks: string;
-}) => {
-  return (
-    <tr className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-50 border-b transition duration-300 ease-in-out md:hover:bg-gray-100 dark:md:hover:bg-gray-900">
-      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">{paramKey}</td>
-      <td className="text-sm font-light px-6 py-4 whitespace-nowrap">
-        {paramKey == "theme-color" ? (
-          <span style={{ color: paramDefault as string }}> {paramDefault}</span>
-        ) : (
-          paramDefault
-        )}
-      </td>
-      <td className="text-sm font-light px-6 py-4">
-        <LinkifyText linkPreview={false} text={remarks} mention={false} />
-      </td>
-    </tr>
-  );
-};
-export default function Widget() {
-  const loginUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
-  const widgetLink = `${location.origin}/widget.html?host=${loginUid}`;
-  const { t } = useTranslation("setting", { keyPrefix: "widget" });
-  const { t: wt } = useTranslation("widget");
-  const { t: ct } = useTranslation();
-  const { copied, copy } = useCopy({ enableToast: false });
-  const copyLink = () => {
-    copy(widgetLink);
-  };
-  // const disableBtn = !reachLimit;
-  return (
-    <div className="flex flex-col justify-start items-start">
-      <div className="font-semibold dark:text-white">{t("tip")}</div>
-      <label htmlFor="code" className="font-semibold dark:text-white">
-        {t("code")}:
-      </label>
-      <SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
-        {`<!-- ${t(
-          "code_comment"
-        )} -->\n<script \n  data-host-id="${loginUid}" \n  data-auto-reg="true" \n  data-login-token="" \n  data-title="" \n  data-logo="" \n  data-theme-color="#1fe1f9" \n  data-close-width="48" \n  data-close-height="48" \n  data-open-width="380" \n  data-open-height="680" \n  data-welcome="Your custom welcome text" \n  src="${
-          location.origin
-        }/widget.js" \n  async \n></script>`}
-      </SyntaxHighlighter>
-      <div className="text-sm dark:text-white">{t("custom_style_tip")}:</div>
-      <SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
-        {`<style>
-  #VOCECHAT_WIDGET {
-    left:10px  /* left position */
-    bottom: 5px /* bottom position */
-  }
-</style>`}
-      </SyntaxHighlighter>
-      <div className="font-semibold dark:text-white mt-5 mb-2">{t("config")}:</div>
-      <div className="w-full md:w-[700px] border border-solid border-gray-300 dark:border-gray-400 rounded overflow-auto md:overflow-hidden">
-        <table className="min-w-full table-auto">
-          <thead className="border-b bg-gray-50 dark:bg-gray-500">
-            <tr>
-              {[t("param_key"), t("default_value"), t("remark")].map((title) => (
-                <th
-                  key={title}
-                  scope="col"
-                  className="text-sm font-bold text-gray-900 dark:text-white px-6 py-4 text-left whitespace-nowrap"
-                >
-                  {title}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {[
-              {
-                paramKey: "id",
-                paramDefault: "-",
-                remarks: t("param_id")
-              },
-              {
-                paramKey: "host-id",
-                paramDefault: 1,
-                remarks: t("param_host")
-              },
-              {
-                paramKey: "auto-reg",
-                paramDefault: "true",
-                remarks: t("param_auto_reg")
-              },
-              {
-                paramKey: "login-token",
-                paramDefault: `-`,
-                remarks: t("param_login_token")
-              },
-              {
-                paramKey: "title",
-                paramDefault: `[VoceChat Name]`,
-                remarks: t("param_title")
-              },
-              {
-                paramKey: "logo",
-                paramDefault: `[VoceChat Logo]`,
-                remarks: t("param_logo")
-              },
-              {
-                paramKey: "theme-color",
-                paramDefault: "#1fe1f9",
-                remarks: t("param_theme_color")
-              },
-              {
-                paramKey: "close-width",
-                paramDefault: `48(px)`,
-                remarks: t("param_close_width")
-              },
-              {
-                paramKey: "close-height",
-                paramDefault: `48(px)`,
-                remarks: t("param_close_height")
-              },
-              {
-                paramKey: "open-width",
-                paramDefault: `380(px)`,
-                remarks: t("param_open_width")
-              },
-              {
-                paramKey: "open-height",
-                paramDefault: `680(px)`,
-                remarks: t("param_open_height")
-              },
-              {
-                paramKey: "position",
-                paramDefault: `right`,
-                remarks: t("param_position")
-              },
-              {
-                paramKey: "welcome",
-                paramDefault: wt("welcome"),
-                remarks: t("param_welcome")
-              }
-            ].map((row) => (
-              <Row key={row.paramKey} {...row} />
-            ))}
-          </tbody>
-          <tfoot className="border-t border-solid border-gray-200 dark:border-gray-50 dark:bg-gray-500">
-            <tr>
-              <td colSpan={3} className="text-gray-400 dark:text-white px-5 py-3 text-sm">
-                * All the parameters are optional, and prefixed by{" "}
-                <i className="bg-gray-700 text-white px-1">data-</i>
-              </td>
-            </tr>
-          </tfoot>
-        </table>
-      </div>
-      <div className="mt-8">
-        <p className="text-sm mb-2 text-gray-500 dark:text-gray-50 flex flex-col md:flex-row gap-4">
-          {t("share_link")}{" "}
-          <a
-            className="text-primary-500 flex gap-1 items-center"
-            href="https://doc.voce.chat/widget"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <IconQuestion /> {t("widget_faq")}
-          </a>
-        </p>
-        <div className="w-full md:w-96 mb-3 relative">
-          <Input readOnly className={"large !pr-16"} value={widgetLink} />
-          <Button
-            onClick={copyLink}
-            className="ghost small border_less absolute right-1 top-1/2 -translate-y-1/2 dark:!text-primary-400"
-          >
-            {copied ? "Copied" : ct("action.copy")}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/routes/setting/Widget/ConfigDetails.tsx b/src/routes/setting/Widget/ConfigDetails.tsx
new file mode 100644
index 00000000..17f402ea
--- /dev/null
+++ b/src/routes/setting/Widget/ConfigDetails.tsx
@@ -0,0 +1,133 @@
+import LinkifyText from "@/components/LinkifyText";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const Row = ({
+  paramKey,
+  paramDefault,
+  remarks
+}: {
+  paramKey: string;
+  paramDefault: string | number;
+  remarks: string;
+}) => {
+  return (
+    <tr className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-50 border-b transition duration-300 ease-in-out md:hover:bg-gray-100 dark:md:hover:bg-gray-900">
+      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">{paramKey}</td>
+      <td className="text-sm font-light px-6 py-4 whitespace-nowrap">
+        {paramKey == "theme-color" ? (
+          <span style={{ color: paramDefault as string }}> {paramDefault}</span>
+        ) : (
+          paramDefault
+        )}
+      </td>
+      <td className="text-sm font-light px-6 py-4">
+        <LinkifyText linkPreview={false} text={remarks} mention={false} />
+      </td>
+    </tr>
+  );
+};
+type Props = {};
+
+const ConfigDetails = ({}: Props) => {
+  const { t } = useTranslation("setting", { keyPrefix: "widget" });
+  const { t: wt } = useTranslation("widget");
+  return (
+    <table className="min-w-full table-auto">
+      <thead className="border-b bg-gray-50 dark:bg-gray-500">
+        <tr>
+          {[t("param_key"), t("default_value"), t("remark")].map((title) => (
+            <th
+              key={title}
+              scope="col"
+              className="text-sm font-bold text-gray-900 dark:text-white px-6 py-4 text-left whitespace-nowrap"
+            >
+              {title}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {[
+          {
+            paramKey: "id",
+            paramDefault: "-",
+            remarks: t("param_id")
+          },
+          {
+            paramKey: "host-id",
+            paramDefault: 1,
+            remarks: t("param_host")
+          },
+          {
+            paramKey: "auto-reg",
+            paramDefault: "true",
+            remarks: t("param_auto_reg")
+          },
+          {
+            paramKey: "login-token",
+            paramDefault: `-`,
+            remarks: t("param_login_token")
+          },
+          {
+            paramKey: "title",
+            paramDefault: `[VoceChat Name]`,
+            remarks: t("param_title")
+          },
+          {
+            paramKey: "logo",
+            paramDefault: `[VoceChat Logo]`,
+            remarks: t("param_logo")
+          },
+          {
+            paramKey: "theme-color",
+            paramDefault: "#1fe1f9",
+            remarks: t("param_theme_color")
+          },
+          {
+            paramKey: "close-width",
+            paramDefault: `48(px)`,
+            remarks: t("param_close_width")
+          },
+          {
+            paramKey: "close-height",
+            paramDefault: `48(px)`,
+            remarks: t("param_close_height")
+          },
+          {
+            paramKey: "open-width",
+            paramDefault: `380(px)`,
+            remarks: t("param_open_width")
+          },
+          {
+            paramKey: "open-height",
+            paramDefault: `680(px)`,
+            remarks: t("param_open_height")
+          },
+          {
+            paramKey: "position",
+            paramDefault: `right`,
+            remarks: t("param_position")
+          },
+          {
+            paramKey: "welcome",
+            paramDefault: wt("welcome"),
+            remarks: t("param_welcome")
+          }
+        ].map((row) => (
+          <Row key={row.paramKey} {...row} />
+        ))}
+      </tbody>
+      <tfoot className="border-t border-solid border-gray-200 dark:border-gray-50 dark:bg-gray-500">
+        <tr>
+          <td colSpan={3} className="text-gray-400 dark:text-white px-5 py-3 text-sm">
+            * All the parameters are optional, and prefixed by{" "}
+            <i className="bg-gray-700 text-white px-1">data-</i>
+          </td>
+        </tr>
+      </tfoot>
+    </table>
+  );
+};
+
+export default ConfigDetails;
diff --git a/src/routes/setting/Widget/index.tsx b/src/routes/setting/Widget/index.tsx
new file mode 100644
index 00000000..72151df4
--- /dev/null
+++ b/src/routes/setting/Widget/index.tsx
@@ -0,0 +1,76 @@
+// import { useState, MouseEvent } from "react";
+// import dayjs from "dayjs";
+import { useTranslation } from "react-i18next";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+import IconQuestion from "@/assets/icons/question.svg";
+import { useAppSelector } from "@/app/store";
+import Button from "@/components/styled/Button";
+import Input from "@/components/styled/Input";
+import useCopy from "@/hooks/useCopy";
+import { shallowEqual } from "react-redux";
+import ConfigDetails from "./ConfigDetails";
+
+export default function Widget() {
+  const loginUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
+  const widgetLink = `${location.origin}/widget.html?host=${loginUid}`;
+  const { t } = useTranslation("setting", { keyPrefix: "widget" });
+  const { t: ct } = useTranslation();
+  const { copied, copy } = useCopy({ enableToast: false });
+  const copyLink = () => {
+    copy(widgetLink);
+  };
+  // const disableBtn = !reachLimit;
+  return (
+    <div className="flex flex-col justify-start items-start">
+      <div className="font-semibold dark:text-white">{t("tip")}</div>
+      <label htmlFor="code" className="font-semibold dark:text-white">
+        {t("code")}:
+      </label>
+      <SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
+        {`<!-- ${t(
+          "code_comment"
+        )} -->\n<script \n  data-host-id="${loginUid}" \n  data-auto-reg="true" \n  data-login-token="" \n  data-title="" \n  data-logo="" \n  data-theme-color="#1fe1f9" \n  data-close-width="48" \n  data-close-height="48" \n  data-open-width="380" \n  data-open-height="680" \n  data-welcome="Your custom welcome text" \n  src="${
+          location.origin
+        }/widget.js" \n  async \n></script>`}
+      </SyntaxHighlighter>
+      <div className="text-sm dark:text-white">{t("custom_style_tip")}:</div>
+      <SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
+        {`<style>
+  #VOCECHAT_WIDGET {
+    left:10px  /* left position */
+    bottom: 5px /* bottom position */
+  }
+</style>`}
+      </SyntaxHighlighter>
+      <div className="font-semibold dark:text-white mt-5 mb-2">{t("config")}:</div>
+      <div className="w-full md:w-[700px] border border-solid border-gray-300 dark:border-gray-400 rounded overflow-auto md:overflow-hidden">
+        {/* 配置说明 */}
+        <ConfigDetails />
+      </div>
+      <div className="mt-8">
+        <p className="text-sm mb-2 text-gray-500 dark:text-gray-50 flex flex-col md:flex-row gap-4">
+          {t("share_link")}{" "}
+          <a
+            className="text-primary-500 flex gap-1 items-center"
+            href="https://doc.voce.chat/widget"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <IconQuestion /> {t("widget_faq")}
+          </a>
+        </p>
+        <div className="w-full md:w-96 mb-3 relative">
+          <Input readOnly className={"large !pr-16"} value={widgetLink} />
+          <Button
+            onClick={copyLink}
+            className="ghost small border_less absolute right-1 top-1/2 -translate-y-1/2 dark:!text-primary-400"
+          >
+            {copied ? "Copied" : ct("action.copy")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}