feat: 新增引导式新手指引 (OnboardingTour) 组件，全站页面接入

2026-06-08 21:30:48 +08:00
parent 1e756808c1
commit 6ed65ca3ee
24 changed files with 1414 additions and 164 deletions
@@ -18,7 +18,7 @@ import {
  ShareAltOutlined,
  UserOutlined,
 } from "@ant-design/icons";
-import { useEffect, useMemo, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent } from "react";
+import { useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent, type FormEvent, type KeyboardEvent } from "react";
 import { createPortal } from "react-dom";
 import "../../styles/pages/profile.css";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
@@ -228,6 +228,28 @@ function ProfilePage({
  const avatarLabel = displayName.trim().slice(0, 1).toUpperCase() || "访";
  const avatarInputRef = useRef<HTMLInputElement | null>(null);
  const bannerInputRef = useRef<HTMLInputElement | null>(null);
+  const [isBannerDragging, setIsBannerDragging] = useState(false);
+  const [isAvatarDragging, setIsAvatarDragging] = useState(false);
+
+  const handleBannerDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer.types.includes("Files")) setIsBannerDragging(true); };
+  const handleBannerDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsBannerDragging(false); };
+  const handleBannerDrop = (e: DragEvent) => {
+    e.preventDefault();
+    setIsBannerDragging(false);
+    if (e.dataTransfer.files.length) {
+      handleBannerUpload({ target: { files: e.dataTransfer.files } } as ChangeEvent<HTMLInputElement>);
+    }
+  };
+
+  const handleAvatarDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer.types.includes("Files")) setIsAvatarDragging(true); };
+  const handleAvatarDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsAvatarDragging(false); };
+  const handleAvatarDrop = (e: DragEvent) => {
+    e.preventDefault();
+    setIsAvatarDragging(false);
+    if (e.dataTransfer.files.length) {
+      handleAvatarUpload({ target: { files: e.dataTransfer.files } } as ChangeEvent<HTMLInputElement>);
+    }
+  };

  const [mode, setMode] = useState<WebAuthMode>("login");
  const [authTab, setAuthTab] = useState<AuthTab>("password");
@@ -1047,8 +1069,11 @@ function ProfilePage({
        <input ref={avatarInputRef} type="file" accept="image/*" hidden onChange={(event) => void handleAvatarUpload(event)} />
        <input ref={bannerInputRef} type="file" accept="image/*" hidden onChange={(event) => void handleBannerUpload(event)} />
        <header
-          className={`profile-page__banner${bannerUrl ? " has-image" : ""}`}
+          className={`profile-page__banner${bannerUrl ? " has-image" : ""}${isBannerDragging ? " is-dragging" : ""}`}
          style={bannerUrl ? { backgroundImage: `url(${bannerUrl})` } : undefined}
+          onDragOver={handleBannerDragOver}
+          onDragLeave={handleBannerDragLeave}
+          onDrop={handleBannerDrop}
        >
          <button type="button" className="profile-page__banner-btn" onClick={() => bannerInputRef.current?.click()} aria-label="更换背景">
            <CameraOutlined />
@@ -1060,13 +1085,21 @@ function ProfilePage({
        <div className="profile-page__body">
          <aside className="profile-page__sidebar">
            <div className="profile-page__sidebar-head">
-              <div className="profile-page__avatar-ring">
+              <div className={`profile-page__avatar-ring${isAvatarDragging ? " is-dragging" : ""}`}>
                {avatarUrl ? (
                  <img className="profile-page__avatar" src={avatarUrl} alt="" />
                ) : (
                  <span className="profile-page__avatar">{avatarLabel}</span>
                )}
-                <button type="button" className="profile-page__avatar-edit" onClick={() => avatarInputRef.current?.click()} aria-label="更换头像">
+                <button
+                  type="button"
+                  className="profile-page__avatar-edit"
+                  onClick={() => avatarInputRef.current?.click()}
+                  onDragOver={handleAvatarDragOver}
+                  onDragLeave={handleAvatarDragLeave}
+                  onDrop={handleAvatarDrop}
+                  aria-label="更换头像"
+                >
                  <CameraOutlined />
                </button>
                <span className="profile-page__avatar-badge">