feat(Tour): 同一设备不同帐号保存漫游使用记录

frontend/src/components/workspace/input-box.tsx

@@ -103,6 +103,42 @@ import { Tooltip } from "./tooltip";
 
 const MAX_REFERENCES_PER_MESSAGE = 10;
 const INPUT_TOOLS_TOUR_SEEN_KEY = "workspace.input_tools_tour_seen.v1";
+type InputToolsTourSeenState = {
+  seen: boolean;
+  threadIds?: string[];
+};
+
+function parseInputToolsTourSeenState(
+  value: string | null,
+): InputToolsTourSeenState | null {
+  if (!value) return null;
+  if (value === "1") {
+    return { seen: true };
+  }
+  try {
+    const parsed = JSON.parse(value) as InputToolsTourSeenState & {
+      threadId?: string;
+    };
+    if (typeof parsed?.seen !== "boolean") {
+      return null;
+    }
+    if (
+      parsed.threadIds != null &&
+      (!Array.isArray(parsed.threadIds) ||
+        parsed.threadIds.some((id) => typeof id !== "string"))
+    ) {
+      return null;
+    }
+    return {
+      seen: parsed.seen,
+      threadIds:
+        parsed.threadIds ??
+        (typeof parsed.threadId === "string" ? [parsed.threadId] : undefined),
+    };
+  } catch {
+    return null;
+  }
+}
 
 type WorkspaceToolButtonProps = ComponentProps<typeof PromptInputButton>;
 
@@ -296,17 +332,32 @@ export function InputBox({
       setIsInputToolsTourOpen(false);
       return;
     }
-    const hasSeenTour = window.localStorage.getItem(INPUT_TOOLS_TOUR_SEEN_KEY);
-    if (!hasSeenTour) {
+    const seenState = parseInputToolsTourSeenState(
+      window.localStorage.getItem(INPUT_TOOLS_TOUR_SEEN_KEY),
+    );
+    const hasSeenTourForCurrentThread =
+      seenState?.seen === true && Boolean(seenState.threadIds?.includes(threadId));
+    if (!hasSeenTourForCurrentThread) {
       setIsInputToolsTourOpen(true);
     }
-  }, [showWelcomeStyle, hasSubmitted, isInputToolsTourReady]);
+  }, [showWelcomeStyle, hasSubmitted, isInputToolsTourReady, threadId]);
 
   const finishInputToolsTour = useCallback(() => {
-    window.localStorage.setItem(INPUT_TOOLS_TOUR_SEEN_KEY, "1");
+    const seenState = parseInputToolsTourSeenState(
+      window.localStorage.getItem(INPUT_TOOLS_TOUR_SEEN_KEY),
+    );
+    const seenThreadIds = new Set(seenState?.threadIds ?? []);
+    seenThreadIds.add(threadId);
+    window.localStorage.setItem(
+      INPUT_TOOLS_TOUR_SEEN_KEY,
+      JSON.stringify({
+        seen: true,
+        threadIds: Array.from(seenThreadIds),
+      } satisfies InputToolsTourSeenState),
+    );
     setIsInputToolsTourOpen(false);
-  }, []);
-    const closeInputToolsTour = useCallback(() => {
+  }, [threadId]);
+  const closeInputToolsTour = useCallback(() => {
     setIsInputToolsTourOpen(false);
   }, []);
 
@@ -734,6 +785,7 @@ export function InputBox({
         open={isInputToolsTourOpen}
         onClose={closeInputToolsTour}
         onFinish={finishInputToolsTour}
+        rootClassName="workspace-input-tools-tour"
         gap={
           { offset: 3 , radius:10 }
         }
@@ -1162,7 +1214,7 @@ function SuggestionList({
   );
   return (
     <Suggestions
-      className="min-h-16 w-fit items-start"
+      className="w-fit items-start"
       data-testid="welcome-suggestions"
     >
       {promptSuggestions.map((suggestion) => (

frontend/src/styles/globals.css

@@ -141,6 +141,7 @@
   --animate-wave: wave 0.6s ease-in-out 2;
 
   @keyframes wave {
+
     0%,
     100% {
       transform: rotate(0deg);
@@ -368,19 +369,17 @@
     position: absolute;
     left: 0;
     top: 0;
-    background: linear-gradient(
-      45deg,
-      #fb0094,
-      #0000ff,
-      #00ff00,
-      #ffff00,
-      #ff0000,
-      #fb0094,
-      #0000ff,
-      #00ff00,
-      #ffff00,
-      #ff0000
-    );
+    background: linear-gradient(45deg,
+        #fb0094,
+        #0000ff,
+        #00ff00,
+        #ffff00,
+        #ff0000,
+        #fb0094,
+        #0000ff,
+        #00ff00,
+        #ffff00,
+        #ff0000);
     background-size: 400%;
     width: 100%;
     height: 100%;
@@ -534,15 +533,11 @@ code {
 }
 
 /* 表格四角圆角：由四个角单元格承担视觉圆角 */
-[data-streamdown="table-header"]
-  tr:first-child
-  > [data-streamdown="table-header-cell"]:first-child {
+[data-streamdown="table-header"] tr:first-child>[data-streamdown="table-header-cell"]:first-child {
   border-top-left-radius: 5px;
 }
 
-[data-streamdown="table-header"]
-  tr:first-child
-  > [data-streamdown="table-header-cell"]:last-child {
+[data-streamdown="table-header"] tr:first-child>[data-streamdown="table-header-cell"]:last-child {
   border-top-right-radius: 5px;
 }
 
@@ -556,15 +551,11 @@ code {
   border-bottom: 1px solid black;
 } */
 
-[data-streamdown="table-body"]
-  tr:last-child
-  > [data-streamdown="table-cell"]:first-child {
+[data-streamdown="table-body"] tr:last-child>[data-streamdown="table-cell"]:first-child {
   border-bottom-left-radius: 5px;
 }
 
-[data-streamdown="table-body"]
-  tr:last-child
-  > [data-streamdown="table-cell"]:last-child {
+[data-streamdown="table-body"] tr:last-child>[data-streamdown="table-cell"]:last-child {
   border-bottom-right-radius: 5px;
 }
 
@@ -573,7 +564,7 @@ code {
   padding-bottom: calc(20px * var(--zoom-scale));
 }
 
-[data-streamdown="table-row"] > [data-streamdown="table-cell"] {
+[data-streamdown="table-row"]>[data-streamdown="table-cell"] {
   line-height: calc(42px * var(--zoom-scale));
   vertical-align: top;
   text-align: center;
@@ -616,6 +607,69 @@ code {
   height: 100% !important;
 }
 
-.ticker-char{
+.ticker-char {
   overflow: hidden;
 }
+
+.ant-tour-panel {
+  border-radius: 10px;
+  border: 1px solid #000000;
+  font-family:
+    "Microsoft YaHei",
+    "PingFang SC",
+    "Hiragino Sans GB",
+    "Noto Sans CJK SC",
+    "Segoe UI",
+    sans-serif;
+}
+
+.ant-tour .ant-tour-arrow:before {
+  background: #000;
+}
+.workspace-input-tools-tour.ant-tour .ant-tour-section .ant-tour-close {
+  top: 20px;
+}
+
+.workspace-input-tools-tour .ant-tour-next-btn.ant-btn-primary,
+.workspace-input-tools-tour .ant-tour-next-btn.ant-btn-primary:hover,
+.workspace-input-tools-tour .ant-tour-next-btn.ant-btn-primary:focus,
+.workspace-input-tools-tour .ant-tour-next-btn.ant-btn-primary:active {
+  height: 28px;
+  width: 80px;
+  font-size: 12px;
+  background: #150055 !important;
+  border-color: #150055 !important;
+  color: #fff !important;
+}
+
+.workspace-input-tools-tour .ant-tour-prev-btn.ant-btn-default,
+.workspace-input-tools-tour .ant-tour-prev-btn.ant-btn-default:hover,
+.workspace-input-tools-tour .ant-tour-prev-btn.ant-btn-default:focus,
+.workspace-input-tools-tour .ant-tour-prev-btn.ant-btn-default:active {
+  /* background: #8d44ee !important; */
+  height: 28px;
+  width: 80px;
+  font-size: 12px;
+  border-color: #150055 !important;
+  color: #000 !important;
+}
+
+.workspace-input-tools-tour.ant-tour .ant-tour-section .ant-tour-header {
+  padding: 20px 20px 15px !important;
+
+}
+
+.workspace-input-tools-tour.ant-tour .ant-tour-section .ant-tour-description {
+  padding: 0 20px !important;
+  font-size: 13px;
+
+}
+
+.ant-tour-footer {
+  padding: 25px 20px 20px !important;
+  min-width: 300px;
+}
+
+.ant-tour .ant-tour-section .ant-tour-footer .ant-tour-indicators .ant-tour-indicator-active {
+  background: #150055 !important;
+}