refactor: widget setting
This commit is contained in:
Tristan Yang
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user