feat: 新增引导式新手指引 (OnboardingTour) 组件,全站页面接入
This commit is contained in:
@@ -10,7 +10,7 @@ import {
|
||||
SearchOutlined,
|
||||
UserOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, type JSX } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent, type JSX } from "react";
|
||||
import "../../styles/pages/assets.css";
|
||||
import { assetClient, type ServerAssetItem } from "../../api/assetClient";
|
||||
import { aiGenerationClient } from "../../api/aiGenerationClient";
|
||||
@@ -95,6 +95,17 @@ function AssetsPage({ isAuthenticated, onOpenLogin }: AssetsPageProps) {
|
||||
const [contextMenu, setContextMenu] = useState<{ x: number; y: number; asset: LibraryAssetItem } | null>(null);
|
||||
const contextMenuRef = useRef<HTMLDivElement>(null);
|
||||
const uploadInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isUploadDragging, setIsUploadDragging] = useState(false);
|
||||
|
||||
const handleUploadDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer.types.includes("Files")) setIsUploadDragging(true); };
|
||||
const handleUploadDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsUploadDragging(false); };
|
||||
const handleUploadDrop = (e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsUploadDragging(false);
|
||||
if (e.dataTransfer.files.length) {
|
||||
void handleUploadFiles(e.dataTransfer.files);
|
||||
}
|
||||
};
|
||||
|
||||
const handleContextMenu = useCallback((e: React.MouseEvent, asset: LibraryAssetItem) => {
|
||||
e.preventDefault();
|
||||
@@ -270,7 +281,15 @@ function AssetsPage({ isAuthenticated, onOpenLogin }: AssetsPageProps) {
|
||||
placeholder="搜索资产..."
|
||||
/>
|
||||
</label>
|
||||
<button type="button" className="studio-generate-btn studio-generate-btn--compact" onClick={() => uploadInputRef.current?.click()} disabled={isUploading}>
|
||||
<button
|
||||
type="button"
|
||||
className={`studio-generate-btn studio-generate-btn--compact${isUploadDragging ? " is-dragging" : ""}`}
|
||||
onClick={() => uploadInputRef.current?.click()}
|
||||
onDragOver={handleUploadDragOver}
|
||||
onDragLeave={handleUploadDragLeave}
|
||||
onDrop={handleUploadDrop}
|
||||
disabled={isUploading}
|
||||
>
|
||||
{isUploading ? <LoadingOutlined /> : <PlusOutlined />}
|
||||
{isUploading ? "上传中..." : "添加"}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user