feat: 增加 share link

zhzLuke96 · zhzLuke96 · commit b684d20eca67 · 2025-05-29T00:38:54.000+08:00
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "cc-editor",
   "private": true,
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/StartPanel/StartPanel.tsx b/src/components/StartPanel/StartPanel.tsx
@@ -1,14 +1,22 @@
 import {
   Button,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  DialogTrigger,
   Field,
   Input,
   Spinner,
   Text,
+  Textarea,
   tokens,
 } from "@fluentui/react-components";
 import { useStyles } from "../useStyles";
 import { useI18n } from "../../tools/i18n";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useGlobalDrop } from "../useGlobalDrop";
 import { CharacterCard } from "@lenml/char-card-reader";
 import { useGlobalPaste } from "../useGlobalPaste";
@@ -55,6 +63,8 @@ export const StartPanel = ({
   const [dragHighlight, setDragHighlight] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [loadFromUrl, setLoadFromUrl] = useState("");
+  const loadFromUrlRef = useRef(loadFromUrl);
+  loadFromUrlRef.current = loadFromUrl;
 
   const handleFileCard = useCallback(
     async (getCard: () => Promise<CharacterCard>) => {
@@ -160,11 +170,34 @@ export const StartPanel = ({
   const handleLoadFromUrl = useCallback(async () => {
     // 下载文件
     await handleFileCard(async () => {
-      const response = await fetch(getRawImageUrl(loadFromUrl));
+      const response = await fetch(getRawImageUrl(loadFromUrlRef.current));
       const arrayBuffer = await response.arrayBuffer();
       return CharacterCard.from_file(arrayBuffer);
     });
-  }, [loadFromUrl]);
+  }, []);
+
+  useEffect(() => {
+    // 从 ?load_url=xxx 读取
+    const urlParams = new URLSearchParams(window.location.search);
+    const loadFromUrl = urlParams.get("load_url");
+    if (loadFromUrl) {
+      setLoadFromUrl(decodeURIComponent(loadFromUrl));
+      loadFromUrlRef.current = decodeURIComponent(loadFromUrl);
+      handleLoadFromUrl();
+      // 删除路径中的 url
+      urlParams.delete("load_url");
+      history.replaceState(
+        null,
+        "",
+        `${window.location.pathname}?${urlParams.toString()}`
+      );
+    }
+  }, [handleLoadFromUrl]);
+
+  const [shareModal, updateShareModal] = useState({
+    open: false,
+    url: "",
+  });
 
   return (
     <div
@@ -252,22 +285,87 @@ export const StartPanel = ({
       <div style={{ width: "40vw" }}>
         <Field label={"3. " + t("Load image from url")}>
           <Input
+            type="url"
             placeholder="https://example.com/avatar.png"
             onChange={(e) => {
               const avatarUrl = e.target.value;
               setLoadFromUrl(avatarUrl);
             }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                handleLoadFromUrl();
+              }
+            }}
             contentAfter={
-              <Button
-                appearance="transparent"
-                size="small"
-                onClick={handleLoadFromUrl}
+              <span
+                style={{
+                  display: loadFromUrl ? "inline-block" : "none",
+                }}
               >
-                {t("Load")}
-              </Button>
+                <Button
+                  style={{ minWidth: 0, padding: 0, paddingLeft: "0.5rem" }}
+                  appearance="transparent"
+                  size="small"
+                  onClick={() => {
+                    const urlObj = new URL(window.location.href);
+                    urlObj.searchParams.set("load_url", loadFromUrl);
+                    updateShareModal({
+                      open: true,
+                      url: urlObj.href,
+                    });
+                  }}
+                >
+                  {t("Share")}
+                </Button>
+                <Button
+                  style={{ minWidth: 0, padding: 0, paddingLeft: "0.5rem" }}
+                  appearance="transparent"
+                  size="small"
+                  onClick={handleLoadFromUrl}
+                >
+                  {t("Load")}
+                </Button>
+              </span>
             }
           />
         </Field>
+
+        <Dialog
+          open={shareModal.open}
+          onOpenChange={(_: any, data: { open: any }) =>
+            updateShareModal((prev) => ({ ...prev, open: data.open }))
+          }
+        >
+          <DialogSurface>
+            <DialogBody>
+              <DialogTitle>{t("Share Link")}</DialogTitle>
+              <DialogContent>
+                <p className="mb-3">
+                  {t(
+                    // 你可以使用下面的链接分享你的卡片，你的朋友点击之后就可以到达此工具的编辑页面
+                    "You can share the link to edit this card, your friend can click it to reach this tool's edit page"
+                  )}
+                </p>
+                <Textarea
+                  className="w-full"
+                  readOnly
+                  rows={10}
+                  value={shareModal.url}
+                />
+              </DialogContent>
+              <DialogActions>
+                <DialogTrigger disableButtonEnhancement>
+                  <Button
+                    appearance="primary"
+                    onClick={() => updateShareModal({ open: false, url: "" })}
+                  >
+                    {t("Ok")}
+                  </Button>
+                </DialogTrigger>
+              </DialogActions>
+            </DialogBody>
+          </DialogSurface>
+        </Dialog>
       </div>
 
       {/* Option 3: 复制粘贴文件 */}
diff --git a/src/locals/en.json b/src/locals/en.json
@@ -56,7 +56,7 @@
   "word_count": "{{chars}} Chars | {{tokens}} Token",
   "OR": "OR",
   "Tool": "Tool",
-  "Apply Template": "Apply Template",
+  "Test Template": "Test Template",
   "User Name": "User Name",
   "Assistant Name": "Assistant Name",
   "Generate": "Generate",
@@ -181,5 +181,9 @@
   "Load image from url": "Load image from url",
   "Load": "Load",
   "Copy/Paste character card current page will auto detect": "Copy/Paste character card current page will auto detect",
-  "Are you sure you want to delete this entry?": "Are you sure you want to delete this entry?"
+  "Are you sure you want to delete this entry?": "Are you sure you want to delete this entry?",
+  "Share": "Share",
+  "Share Link": "Share Link",
+  "You can share the link to edit this card, your friend can click it to reach this tool's edit page": "You can share the link to edit this card, your friend can click it to reach this tool's edit page",
+  "Ok": "Ok"
 }
diff --git a/src/locals/ja.json b/src/locals/ja.json
@@ -68,7 +68,7 @@
   "word_count": "{{chars}} 文字 | {{tokens}} Token",
   "OR": "または",
   "Tool": "ツール",
-  "Apply Template": "テンプレートを適用",
+  "Test Template": "テストテンプレート",
   "User Name": "ユーザー名",
   "Assistant Name": "アシスタント名",
   "Generate": "生成",
@@ -193,5 +193,9 @@
   "Load image from url": "Load image from url",
   "Load": "Load",
   "Copy/Paste character card current page will auto detect": "Copy/Paste character card current page will auto detect",
-  "Are you sure you want to delete this entry?": "Are you sure you want to delete this entry?"
+  "Are you sure you want to delete this entry?": "Are you sure you want to delete this entry?",
+  "Share": "Share",
+  "Share Link": "Share Link",
+  "You can share the link to edit this card, your friend can click it to reach this tool's edit page": "You can share the link to edit this card, your friend can click it to reach this tool's edit page",
+  "Ok": "Ok"
 }
diff --git a/src/locals/ko.json b/src/locals/ko.json
@@ -68,7 +68,7 @@
   "word_count": "{{chars}} 문자 | {{tokens}} Token",
   "OR": "또는",
   "Tool": "도구",
-  "Apply Template": "템플릿 적용",
+  "Test Template": "테스트 템플릿",
   "User Name": "사용자 이름",
   "Assistant Name": "어시스턴트 이름",
   "Generate": "생성",
@@ -193,5 +193,9 @@
   "Load image from url": "Load image from url",
   "Load": "Load",
   "Copy/Paste character card current page will auto detect": "Copy/Paste character card current page will auto detect",
-  "Are you sure you want to delete this entry?": "Are you sure you want to delete this entry?"
+  "Are you sure you want to delete this entry?": "Are you sure you want to delete this entry?",
+  "Share": "Share",
+  "Share Link": "Share Link",
+  "You can share the link to edit this card, your friend can click it to reach this tool's edit page": "You can share the link to edit this card, your friend can click it to reach this tool's edit page",
+  "Ok": "Ok"
 }
diff --git a/src/locals/zh.json b/src/locals/zh.json
@@ -70,7 +70,7 @@
   "Input or select tags": "输入或者选择Tag",
   "Expand": "展开",
   "Collapse": "收起",
-  "Apply Template": "应用模板",
+  "Test Template": "测试模板",
   "Generate": "生成",
   "Output Result": "输出结果",
   "Tool": "工具",
@@ -193,5 +193,9 @@
   "Load image from url": "从url加载图片",
   "Load": "加载",
   "Copy/Paste character card current page will auto detect": "复制/粘贴角色卡当前页面将自动检测",
-  "Are you sure you want to delete this entry?": "您确定要删除此条目吗?"
+  "Are you sure you want to delete this entry?": "您确定要删除此条目吗?",
+  "Share": "分享",
+  "Share Link": "分享链接",
+  "You can share the link to edit this card, your friend can click it to reach this tool's edit page": "您可以分享编辑此卡的链接，您的朋友可以点击它到达此工具的编辑页面",
+  "Ok": "好的"
 }

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "cc-editor",`
`3`	`3`	`"private": true,`
`4`		`- "version": "1.0.5",`
	`4`	`+ "version": "1.0.6",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"scripts": {`
`7`	`7`	`"dev": "vite",`