\n {isApiDocs ? (\n setMoveModalVisible(false)}\n onOk={confirmBatchMove}\n confirmLoading={moving}\n okText=\"确认移动\"\n cancelText=\"取消\"\n destroyOnClose\n >\n
\n \n );\n}\n\nexport default App;\n"
},
{
"path": "client/src/components/AlbumManager.js",
"content": "import React, { useState, useEffect } from \"react\";\nimport {\n Modal,\n Typography,\n Dropdown,\n Button,\n Space,\n Input,\n message,\n Select,\n Switch,\n Empty,\n Spin,\n theme,\n} from \"antd\";\nimport {\n MoreOutlined,\n DeleteOutlined,\n EditOutlined,\n ShareAltOutlined,\n FolderOpenOutlined,\n CopyOutlined,\n FireOutlined,\n StopOutlined,\n PlusOutlined,\n LockOutlined,\n UnlockOutlined\n} from \"@ant-design/icons\";\nimport dayjs from \"dayjs\";\n\nconst { Text } = Typography;\nconst { Option } = Select;\n\nconst CountdownTimer = ({ expireSeconds, createdAt }) => {\n const [timeLeft, setTimeLeft] = useState(\"\");\n\n useEffect(() => {\n if (!expireSeconds) return;\n\n const calculateTimeLeft = () => {\n const expireTime = dayjs(createdAt).add(expireSeconds, 'second');\n const now = dayjs();\n const diff = expireTime.diff(now, 'second');\n\n if (diff <= 0) {\n return \"已过期\";\n }\n\n const days = Math.floor(diff / (3600 * 24));\n const hours = Math.floor((diff % (3600 * 24)) / 3600);\n const minutes = Math.floor((diff % 3600) / 60);\n\n let str = \"\";\n if (days > 0) str += `${days}天 `;\n if (hours > 0) str += `${hours}小时 `;\n if (minutes > 0 || (days === 0 && hours === 0)) str += `${minutes}分`;\n\n return str;\n };\n\n setTimeLeft(calculateTimeLeft());\n\n const timer = setInterval(() => {\n const str = calculateTimeLeft();\n setTimeLeft(str);\n if (str === \"已过期\") clearInterval(timer);\n }, 60000); // Update every minute\n\n return () => clearInterval(timer);\n }, [expireSeconds, createdAt]);\n\n if (!expireSeconds) return \"永久有效\";\n return `剩余: ${timeLeft}`;\n};\n\nconst AlbumManager = ({ visible, onClose, api, onSelectAlbum }) => {\n const [albums, setAlbums] = useState([]);\n const [loading, setLoading] = useState(true);\n const [shareModalVisible, setShareModalVisible] = useState(false);\n const [currentAlbum, setCurrentAlbum] = useState(null);\n\n\n // ... (rest of state)\n const [shareExpiry, setShareExpiry] = useState(3600 * 24); // 1 day\n const [shareBurn, setShareBurn] = useState(false);\n const [shareLink, setShareLink] = useState(\"\");\n const [generatingLink, setGeneratingLink] = useState(false);\n const [shareList, setShareList] = useState([]);\n const [loadingShares, setLoadingShares] = useState(false);\n\n // Rename State\n const [renameModalVisible, setRenameModalVisible] = useState(false);\n const [renameValue, setRenameValue] = useState(\"\");\n\n // Create State\n const [createModalVisible, setCreateModalVisible] = useState(false);\n const [createValue, setCreateValue] = useState(\"\");\n\n // Password State\n const [passwordModalVisible, setPasswordModalVisible] = useState(false);\n const [passwordValue, setPasswordValue] = useState(\"\");\n const [isRemovingPassword, setIsRemovingPassword] = useState(false);\n\n const { token } = theme.useToken();\n\n const fetchAlbums = React.useCallback(async (abortSignal) => {\n setLoading(true);\n try {\n const [dirRes, imgRes] = await Promise.all([\n api.get(\"/directories\", { signal: abortSignal }),\n api.get(\"/images?pageSize=3\", { signal: abortSignal }) // Fetch latest 3 images globally\n ]);\n\n if (dirRes.data.success) {\n const allAlbums = dirRes.data.data || [];\n\n // Use the actual global latest images for the \"All Images\" cover\n // Fallback to empty if image fetch failed (though Promise.all would fail commonly, but we can handle it)\n const globalPreviews = imgRes.data?.success\n ? imgRes.data.data.map(img => img.url)\n : [];\n\n const allImagesAlbum = {\n name: \"全部图片\",\n path: \"\",\n previews: globalPreviews,\n mtime: new Date().toISOString(),\n isSystem: true\n };\n\n // Order: [All Images, ...Real Albums]\n // The \"New Album\" is rendered separately in the grid as the first item visually if we want,\n // or we just prepend it here?\n // In the render method: {albums.map...} matches `albums`.\n // The render method ALSO renders a static \"New Album\" div BEFORE mapping albums.\n // So `albums` should start with \"All Images\".\n setAlbums([allImagesAlbum, ...allAlbums]);\n }\n } catch (e) {\n // Ignore aborted requests\n if (e.name === 'AbortError' || e.name === 'CanceledError') {\n return;\n }\n console.error(e);\n message.error(\"获取相册列表失败\");\n } finally {\n setLoading(false);\n }\n }, [api]);\n\n useEffect(() => {\n if (visible && api) {\n\n const abortController = new AbortController();\n fetchAlbums(abortController.signal);\n\n return () => {\n abortController.abort();\n };\n }\n }, [visible, api, fetchAlbums]);\n\n const fetchShareList = async (path) => {\n setLoadingShares(true);\n try {\n const url = `/share/list?path=${encodeURIComponent(path)}`;\n const res = await api.get(url);\n if (res.data.success) {\n // Sort: Active first, then by createdAt desc\n const list = res.data.data || [];\n list.sort((a, b) => {\n const aActive = a.status === 'active';\n const bActive = b.status === 'active';\n if (aActive && !bActive) return -1;\n if (!aActive && bActive) return 1;\n return b.createdAt - a.createdAt;\n });\n setShareList(list);\n }\n } catch (e) {\n message.error(\"获取分享列表失败\");\n } finally {\n setLoadingShares(false);\n }\n };\n\n const handleShare = async () => {\n if (!currentAlbum) return;\n setGeneratingLink(true);\n try {\n const res = await api.post(\"/share/generate\", {\n path: currentAlbum.path,\n expireSeconds: shareExpiry,\n burnAfterReading: shareBurn,\n });\n if (res.data.success) {\n const url = `${window.location.origin}/share?token=${encodeURIComponent(res.data.token)}`;\n setShareLink(url);\n // Refresh list\n await fetchShareList(currentAlbum.path);\n }\n } catch (e) {\n message.error(\"生成分享链接失败\");\n } finally {\n setGeneratingLink(false);\n }\n };\n\n const handleRevoke = async (signature) => {\n try {\n const res = await api.post(\"/share/revoke\", {\n path: currentAlbum.path,\n signature\n });\n if (res.data.success) {\n message.success(\"链接已作废\");\n fetchShareList(currentAlbum.path);\n }\n } catch (e) {\n message.error(\"作废失败\");\n }\n };\n\n const handleDeleteShare = async (signature) => {\n try {\n const res = await api.delete(\"/share/delete\", {\n data: {\n path: currentAlbum.path,\n signature\n }\n });\n if (res.data.success) {\n message.success(\"删除成功\");\n fetchShareList(currentAlbum.path);\n }\n } catch (e) {\n message.error(\"删除失败\");\n }\n };\n\n const handleCreate = async () => {\n if (!createValue.trim()) return;\n try {\n // Use API to create directory\n // Backend needs to support mkdir. \n // Currently we don't have explicit mkdir API, but upload supports creating dir.\n // Let's add a mkdir API or use a hack? \n // Wait, server code `fs.ensureDirSync(dest)` in upload logic creates it.\n // But we need a dedicated API.\n // Let's check server/index.js if there is one.\n // There isn't. I'll add one.\n\n const res = await api.post(\"/directories\", {\n name: createValue.trim()\n });\n\n if (res.data.success) {\n message.success(\"相册创建成功\");\n setCreateModalVisible(false);\n setCreateValue(\"\");\n fetchAlbums();\n }\n } catch (e) {\n message.error(e.response?.data?.error || \"创建失败\");\n }\n };\n\n const handleRename = async () => {\n if (!currentAlbum || !renameValue.trim()) return;\n try {\n // Assuming PUT /api/images works for renaming directories if supported by backend,\n // actually backend usually supports renaming files. \n // Checking server code: `PUT /api/images/*` supports `fs.rename`.\n // It works for directories too if `oldFilePath` points to a directory.\n // `safeJoin` works for dirs. `fs.pathExists` works. `fs.rename` works.\n // So yes, we can rename directories!\n\n const res = await api.put(`/images/${encodeURIComponent(currentAlbum.path)}`, {\n newName: renameValue.trim(),\n newDir: currentAlbum.path.split(\"/\").slice(0, -1).join(\"/\") // Keep parent dir\n });\n\n if (res.data.success) {\n message.success(\"重命名成功\");\n setRenameModalVisible(false);\n fetchAlbums();\n }\n } catch (e) {\n message.error(\"重命名失败\");\n }\n };\n\n const handleSavePassword = async () => {\n if (!currentAlbum) return;\n try {\n const res = await api.post(\"/album/password\", {\n dir: currentAlbum.path,\n password: passwordValue\n });\n if (res.data.success) {\n message.success(passwordValue ? \"密码设置成功\" : \"密码已移除\");\n setPasswordModalVisible(false);\n setPasswordValue(\"\");\n fetchAlbums(); // Refresh to update lock status\n }\n } catch (e) {\n message.error(\"操作失败\");\n }\n };\n\n const handleDelete = async (album) => {\n Modal.confirm({\n title: \"删除相册\",\n content: `确定要删除相册 \"${album.name}\" 及其所有内容吗？此操作不可恢复。`,\n okText: \"删除\",\n okType: \"danger\",\n cancelText: \"取消\",\n onOk: async () => {\n try {\n // DELETE /api/images/* works for directories too (fs.remove)\n await api.delete(`/images/${encodeURIComponent(album.path)}`);\n message.success(\"相册已删除\");\n fetchAlbums();\n } catch (e) {\n message.error(\"删除失败\");\n }\n }\n });\n };\n\n const copyToClipboard = (text) => {\n navigator.clipboard.writeText(text).then(() => {\n message.success(\"已复制到剪贴板\");\n });\n };\n\n return (\n \n
\n ) : (\n <>\n {/* Waterfall Gallery */}\n {/* Only render gallery if authenticated or if no password required, \n OR render it but it might be empty if API blocks it. \n We'll render it but PasswordOverlay will cover it. */}\n \n
\n \n \n )}\n 将选中的 {selectedItems.size} 张图片移动到：
\n相册管理
}\n width={1000}\n footer={null}\n styles={{ body: { padding: 0, minHeight: 400, background: token.colorBgLayout } }}\n >\n \n
\n ) : albums.length === 0 ? (\n 新建相册
\n \n\n {albums.map((album) => (\n \n {isRemovingPassword ? \"此相册已设置密码。输入新密码以修改，或留空以移除密码。\" : \"设置密码后，访问该相册将需要输入密码。\"}\n
\n 分享相册 - {currentAlbum?.name}
}\n footer={null}\n width={600}\n centered\n >\n \n \n\n \n
\n \n\n {/* Rename Modal */}\n \n
\n\n {/* Show newly generated link specifically if needed, but list updates automatically */}\n {shareLink && (\n 生成新链接
\n\n \n
\n \n 有效期 \n \n \n \n \n \n \n \n
\n\n \n \n \n
\n\n }>\n 生成并复制链接\n \n \n
\n )}\n\n {/* Active Shares List */}\n \n
\n\n 分享列表
\n {loadingShares ? (\n \n 暂无分享记录\n
\n ) : (\n \n {shareList.map((share, idx) => (\n
\n )}\n \n \n {share.status === 'active' && (\n \n
\n ))}\n \n
\n \n {share.status === \"revoked\" ? (\n
\n 已作废
\n ) : share.status === \"expired\" ? (\n 已过期
\n ) : share.status === \"burned\" ? (\n 已焚毁
\n ) : share.burnAfterReading ? (\n 阅后即焚
\n ) : (\n \n
\n )}\n \n {dayjs(share.createdAt).format(\"MM-DD HH:mm\")}\n
\n \n
\n \n
\n )}\n\n {/* Stacked Images */}\n \n {album.locked ? (\n
\n\n {/* Info Area */}\n \n
\n ) : displayPreviews.length > 0 ? (\n displayPreviews.map((src, index) => {\n // index 0 is bottom, index 2 is top\n // We want top one to be index 0 in map if we reversed? \n // Actually, let's just absolute position them.\n\n // We need stable keys.\n const offset = index * 4;\n // 默认展开一定角度 (例如：5度，10px位移)，悬浮时进一步展开\n const rotate = hover ? (index - 1) * 15 : (index - 1) * 5;\n const translateY = hover ? -20 : -5;\n const translateX = hover ? (index - 1) * 30 : (index - 1) * 10;\n const scale = 1 - index * 0.05;\n const zIndex = 10 - index;\n\n return (\n 私密相册
\n \n
\n )}\n \n
\n \n );\n});\n\nconst CheckCircleIcon = () => (\n ✓\n);\n\nexport default AlbumManager;\n"
},
{
"path": "client/src/components/ApiDocs.js",
"content": "import React from 'react';\nimport { Typography, Card, Collapse, Tag, Divider, theme, Button, message, Tooltip } from 'antd';\nimport {\n FileImageOutlined,\n FolderOutlined,\n InfoCircleOutlined,\n CopyOutlined,\n CodeOutlined,\n FileTextOutlined,\n LockOutlined\n} from '@ant-design/icons';\nimport { getPassword } from \"../utils/secureStorage\";\n\nconst { Title, Text, Paragraph } = Typography;\nconst { Panel } = Collapse;\n\nconst ApiDocs = () => {\n const { token } = theme.useToken();\n const origin = typeof window !== \"undefined\" ? window.location.origin : \"\";\n const savedPassword = typeof window !== \"undefined\" ? (getPassword() || \"\") : \"\";\n\n const containerStyle = {\n maxWidth: 900,\n margin: '0 auto',\n padding: '40px 20px',\n };\n\n const endpointStyle = {\n display: 'flex',\n alignItems: 'center',\n gap: 12,\n marginBottom: 8,\n flexWrap: 'wrap'\n };\n\n const methodTagStyle = (method) => {\n return { minWidth: 60, textAlign: 'center', fontWeight: 'bold' };\n };\n\n const copyText = (text) => {\n if (navigator.clipboard && window.isSecureContext) {\n navigator.clipboard.writeText(text)\n .then(() => message.success(\"已复制 CURL 命令\"))\n .catch(() => message.error(\"复制失败\"));\n return;\n }\n // Fallback\n const input = document.createElement(\"input\");\n input.style.position = \"fixed\";\n input.style.top = \"-10000px\";\n document.body.appendChild(input);\n input.value = text;\n input.focus();\n input.select();\n try {\n document.execCommand(\"copy\");\n message.success(\"已复制 CURL 命令\");\n } catch (e) {\n message.error(\"复制失败\");\n } finally {\n document.body.removeChild(input);\n }\n };\n\n const buildCurl = (endpoint, method = 'GET', options = {}) => {\n const fullUrl = `${origin}${endpoint}`;\n const pwdHeader = savedPassword ? ` -H \"X-Access-Password: ${savedPassword}\"` : \"\";\n const albumPwdHeader = options.albumPassword ? ` -H \"X-Album-Password: ${options.albumPassword}\"` : \"\";\n let cmd = `curl -X ${method} \"${fullUrl}\"${pwdHeader}${albumPwdHeader}`;\n\n if (method === 'POST') {\n if (options.isMultipart) {\n cmd += ` \\\\\\n -F \"${options.fileParam || 'image'}=@/path/to/file\"`;\n if (options.extraParams) {\n options.extraParams.forEach(p => {\n cmd += ` \\\\\\n -F \"${p.key}=${p.value}\"`;\n });\n }\n } else if (options.isJson) {\n cmd += ` \\\\\\n -H \"Content-Type: application/json\" \\\\\\n -d '${JSON.stringify(options.body)}'`;\n }\n }\n\n return cmd;\n };\n\n const CurlButton = ({ endpoint, method, options }) => (\n \n
\n\n \n {album.name}\n
\n \n {dayjs(album.mtime).format(\"YYYY-MM-DD\")}\n
\n \n \n 认证管理 (Authentication)
}\n key=\"0\"\n extra={\n \n <img\n src=\"/favicon.svg\"\n alt=\"Logo\"\n style={{\n width: 48,\n height: 48,\n objectFit: 'contain',\n filter: theme.useToken().token.colorBgContainer === '#141414' ? 'brightness(1.2)' : 'none'\n }}\n />\n 云图 - 开放接口文档\n \n \n 云图提供了一系列 RESTful API，方便您进行图片的上传、管理与检索。\n \n {savedPassword && (\n
\n\n \n GET \n /api/auth/status \n
\n \n POST \n /api/auth/login \n
\n - \n
password : 访问密码 \n
\n GET \n /api/images \n
\n - \n
page : 页码 (默认 1) \n pageSize : 每页数量 (默认 50) \n dir : 目录路径 (可选) \n search : 搜索关键词 (可选) \n
- \n
X-Album-Password : 相册访问密码 (如果访问的目录已加密) \n
\n POST \n /api/upload \n
\n - \n
image : 图片文件 (支持多文件) \n dir : 目标目录 (可选，默认为根目录) \n
\n GET \n /api/random \n
\n - \n
dir : 目录路径 (可选) \n format : 返回格式，json 返回元数据（包含fullUrl ），否则直接返回图片流 \n w : 目标宽度 (可选) \n h : 目标高度 (可选) \n q : 图片质量，1-100 (可选) \n fmt : 目标格式，支持webp ,avif ,jpg ,png (可选) \n
\n POST \n /api/upload-base64 \n
\n - \n
base64Image : Base64 图片字符串 (包含 data URI scheme) \n dir : 目标目录 (可选) \n originalName : 原始文件名 (可选，用于保留扩展名) \n
\n PUT \n /api/images/:path \n
\n - \n
newName : 新文件名 (可选) \n newDir : 新目录路径 (可选) \n
\n DELETE \n /api/images/:path \n
\n \n POST \n /api/upload-file \n
\n - \n
file : 文件对象 \n dir : 目标目录 \n filename : 自定义文件名 (可选) \n
\n GET \n /api/dirs \n
\n \n POST \n /api/album/password \n
\n - \n
dir : 目录路径 \n password : 新密码 (留空则移除密码) \n
\n POST \n /api/album/verify \n
\n - \n
dir : 目录路径 \n password : 待验证的密码 \n
\n GET \n /api/stats \n
\n \n POST \n /api/process-image \n
\n - \n
image : 图片文件 \n width : 目标宽度 \n height : 目标高度 \n dir : 存储目录 (可选) \n
\n POST \n /api/svg2png \n ...\" }\n }}\n />\n
\n - \n
svgCode : SVG 源代码字符串 \n
\n © 2025 Cloud Gallery API. All rights reserved. \n
\n \n );\n};\n\nexport default ApiDocs;\n"
},
{
"path": "client/src/components/DirectorySelector.js",
"content": "import React, { useState, useEffect, useRef, useCallback } from \"react\";\nimport { Select, Input, Space, Typography, Divider, message } from \"antd\";\nimport { FolderOutlined, PlusOutlined, RightOutlined, DownOutlined } from \"@ant-design/icons\";\n\nconst { Option } = Select;\nconst { Text } = Typography;\n\nconst DirectorySelector = ({\n value,\n onChange,\n placeholder = \"选择或输入相册\",\n style = {},\n allowClear = true,\n showSearch = true,\n size = \"middle\",\n allowInput = true,\n api,\n refreshKey = 0,\n}) => {\n const [directories, setDirectories] = useState([]);\n const [loading, setLoading] = useState(false);\n const [createName, setCreateName] = useState(\"\");\n const [expandedPaths, setExpandedPaths] = useState([]);\n const [isSearching, setIsSearching] = useState(false);\n const inputRef = useRef(null);\n\n // 获取相册列表\n const fetchDirectories = useCallback(async () => {\n setLoading(true);\n try {\n const response = await api.get(\"/directories?recursive=true\");\n if (response.data.success) {\n setDirectories(response.data.data || []);\n }\n } catch (error) {\n console.error(\"获取相册列表失败:\", error);\n } finally {\n setLoading(false);\n }\n }, [api]);\n\n useEffect(() => {\n fetchDirectories();\n }, [refreshKey, fetchDirectories]);\n\n // Auto expand parents of the current value\n useEffect(() => {\n if (value && directories.length > 0) {\n const parts = value.split(\"/\");\n if (parts.length > 1) {\n const pathsToExpand = [];\n let currentPath = \"\";\n for (let i = 0; i < parts.length - 1; i++) {\n currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i];\n pathsToExpand.push(currentPath);\n }\n setExpandedPaths(prev => Array.from(new Set([...prev, ...pathsToExpand])));\n }\n }\n }, [value, directories]);\n\n const handleSelectChange = (selectedValue) => {\n if (onChange) {\n onChange(selectedValue);\n }\n };\n\n const handleInputChange = (e) => {\n setCreateName(e.target.value);\n };\n\n const handleInputKeyPress = (e) => {\n if (e.key === \"Enter\") {\n addNewDirectory();\n }\n };\n\n const handleSearch = (searchValue) => {\n setIsSearching(!!searchValue);\n };\n\n const toggleExpand = (e, path) => {\n e.stopPropagation(); // Prevent selection\n setExpandedPaths(prev =>\n prev.includes(path)\n ? prev.filter(p => p !== path)\n : [...prev, path]\n );\n };\n\n const addNewDirectory = async (e) => {\n if (e) e.preventDefault?.();\n const val = (createName || \"\").trim();\n if (!val) return;\n\n try {\n const res = await api.post(\"/directories\", { name: val });\n if (res.data.success) {\n message.success(\"相册创建成功\");\n await fetchDirectories();\n if (onChange) {\n // Use returned path if available, or input value\n const newPath = res.data.data?.path || val;\n onChange(newPath);\n }\n setCreateName(\"\");\n }\n } catch (e) {\n message.error(e.response?.data?.error || \"创建失败\");\n }\n\n setTimeout(() => {\n inputRef.current?.focus();\n }, 0);\n };\n\n return (\n \n {menu}\n {allowInput && (\n <>\n
\n )}\n >\n \n {directories.map((dir) => {\n const parts = (dir.path || \"\").split(\"/\").filter(Boolean);\n const depth = parts.length - 1;\n const isExpanded = expandedPaths.includes(dir.path);\n const hasChildren = directories.some(d => d.path !== dir.path && d.path.startsWith(dir.path + '/'));\n\n // Visibility check\n let isVisible = true;\n if (parts.length > 1 && !isSearching) {\n let currentPath = \"\";\n for (let i = 0; i < parts.length - 1; i++) {\n currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i];\n if (!expandedPaths.includes(currentPath)) {\n isVisible = false;\n break;\n }\n }\n }\n\n if (!isVisible && !isSearching) return null;\n\n return (\n \n );\n })}\n \n\n \n e.stopPropagation()}\n onKeyPress={handleInputKeyPress}\n size={size}\n suffix={\n
\n \n )}\n \n {modal}\n
\n )}\n styles={{\n content: {\n background: 'transparent',\n boxShadow: 'none',\n padding: 0,\n },\n body: {\n padding: 0,\n }\n }}\n destroyOnClose\n closeIcon={null}\n >\n \n {/* Custom close button since we removed the default one */}\n \n
\n \n \n );\n};\n\nexport default FloatingToolbar;\n"
},
{
"path": "client/src/components/ImageCompressor.js",
"content": "import React, { useState, useRef, useEffect } from \"react\";\nimport {\n Card,\n Typography,\n Space,\n Button,\n Input,\n message,\n Row,\n Col,\n Slider,\n Upload,\n theme,\n} from \"antd\";\nimport {\n FileZipOutlined,\n UploadOutlined,\n DownloadOutlined,\n CopyOutlined,\n PictureOutlined,\n} from \"@ant-design/icons\";\n// import axios from \"axios\";\n\nconst { Title, Text } = Typography;\nconst { Dragger } = Upload;\n\nconst ImageCompressor = ({ onUploadSuccess, api }) => {\n const {\n token: { colorBorder, colorFillTertiary },\n } = theme.useToken();\n\n const [originalImage, setOriginalImage] = useState(null);\n const [compressedImage, setCompressedImage] = useState(null);\n const [isCompressing, setIsCompressing] = useState(false);\n const [isUploading, setIsUploading] = useState(false);\n const [uploadedUrl, setUploadedUrl] = useState(\"\");\n const [fileName, setFileName] = useState(\"\");\n const [originalSize, setOriginalSize] = useState(0);\n const [compressedSize, setCompressedSize] = useState(0);\n const [originalAspectRatio, setOriginalAspectRatio] = useState(1);\n\n // 压缩参数\n const [width, setWidth] = useState(800);\n const [height, setHeight] = useState(600);\n const [quality, setQuality] = useState(100);\n const [maintainAspectRatio, setMaintainAspectRatio] = useState(true);\n\n const canvasRef = useRef(null);\n\n // 处理粘贴事件\n const handlePaste = async (event) => {\n const items = event.clipboardData?.items;\n if (!items) return;\n\n for (let i = 0; i < items.length; i++) {\n const item = items[i];\n if (item.type.startsWith(\"image/\")) {\n event.preventDefault();\n const file = item.getAsFile();\n if (file) {\n await handlePastedImage(file);\n }\n break;\n }\n }\n };\n\n // 处理粘贴的图片\n const handlePastedImage = async (file) => {\n const isImage = file.type.startsWith(\"image/\");\n if (!isImage) {\n message.error(\"只能上传图片文件！\");\n return;\n }\n\n const reader = new FileReader();\n reader.onload = (e) => {\n const img = new Image();\n img.onload = () => {\n // 设置原始图片信息\n setOriginalImage(e.target.result);\n setOriginalSize(file.size);\n setFileName(`pasted-image-${Date.now()}`); // 生成文件名\n\n // 设置默认尺寸为原始图片尺寸\n setWidth(img.width);\n setHeight(img.height);\n setMaintainAspectRatio(true);\n setOriginalAspectRatio(img.width / img.height);\n\n message.success(\"图片粘贴成功！\");\n };\n img.src = e.target.result;\n };\n reader.readAsDataURL(file);\n };\n\n // 添加全局粘贴事件监听\n useEffect(() => {\n const handleGlobalPaste = (event) => {\n // 检查是否在输入框中，如果是则不处理粘贴\n const target = event.target;\n if (\n target.tagName === \"INPUT\" ||\n target.tagName === \"TEXTAREA\" ||\n target.contentEditable === \"true\"\n ) {\n return;\n }\n\n handlePaste(event);\n };\n\n document.addEventListener(\"paste\", handleGlobalPaste);\n\n return () => {\n document.removeEventListener(\"paste\", handleGlobalPaste);\n };\n }, []);\n\n // 处理图片上传\n const handleImageUpload = (file) => {\n const isImage = file.type.startsWith(\"image/\");\n if (!isImage) {\n message.error(\"只能上传图片文件！\");\n return false;\n }\n\n const reader = new FileReader();\n reader.onload = (e) => {\n const img = new Image();\n img.onload = () => {\n // 设置原始图片信息\n setOriginalImage(e.target.result);\n setOriginalSize(file.size);\n setFileName(file.name.replace(/\\.[^/.]+$/, \"\")); // 移除扩展名\n\n // 设置默认尺寸为原始图片尺寸\n setWidth(img.width);\n setHeight(img.height);\n setMaintainAspectRatio(true);\n setOriginalAspectRatio(img.width / img.height);\n\n // 保存原始图片引用\n // originalImageRef.current = img; // This line is removed\n\n message.success(\"图片上传成功！\");\n };\n img.src = e.target.result;\n };\n reader.readAsDataURL(file);\n\n return false; // 阻止默认上传行为\n };\n\n // 压缩图片\n const compressImage = () => {\n if (!originalImage || !canvasRef.current) {\n message.error(\"请先上传图片\");\n return;\n }\n\n setIsCompressing(true);\n try {\n const canvas = canvasRef.current;\n const ctx = canvas.getContext(\"2d\");\n const img = new Image();\n img.onload = () => {\n // 设置画布尺寸\n canvas.width = width;\n canvas.height = height;\n\n // 清空画布（透明填充）\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n // 提升缩放质量\n ctx.imageSmoothingEnabled = true;\n ctx.imageSmoothingQuality = \"high\";\n\n // 计算缩放比例和居中坐标\n const scale = Math.min(width / img.width, height / img.height);\n // 如果目标尺寸比原图大，保持原图大小不放大\n const drawWidth = scale > 1 ? img.width : img.width * scale;\n const drawHeight = scale > 1 ? img.height : img.height * scale;\n const offsetX = (width - drawWidth) / 2;\n const offsetY = (height - drawHeight) / 2;\n\n // 居中绘制图片，保持原图清晰度\n ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);\n\n // 转换为压缩后的图片（PNG，保留透明像素）\n const compressedDataUrl = canvas.toDataURL(\"image/png\");\n setCompressedImage(compressedDataUrl);\n\n // 计算压缩后的大小\n const base64Length =\n compressedDataUrl.length - \"data:image/png;base64,\".length;\n const compressedBytes = Math.ceil(base64Length * 0.75);\n setCompressedSize(compressedBytes);\n\n message.success(\"图片压缩成功！\");\n };\n img.src = originalImage;\n } catch (error) {\n console.error(\"压缩错误:\", error);\n message.error(\"压缩失败，请重试\");\n } finally {\n setIsCompressing(false);\n }\n };\n\n // 处理宽度变化\n const handleWidthChange = (value) => {\n setWidth(value);\n if (maintainAspectRatio) {\n setHeight(Math.round(value / originalAspectRatio));\n }\n };\n\n // 处理高度变化\n const handleHeightChange = (value) => {\n setHeight(value);\n if (maintainAspectRatio) {\n setWidth(Math.round(value * originalAspectRatio));\n }\n };\n\n // 切换宽高比锁定\n const toggleAspectRatio = () => {\n setMaintainAspectRatio(!maintainAspectRatio);\n };\n\n // 下载压缩后的图片\n const downloadCompressedImage = () => {\n if (!compressedImage) {\n message.error(\"请先压缩图片\");\n return;\n }\n\n const link = document.createElement(\"a\");\n link.download = `${fileName}-compressed.png`;\n link.href = compressedImage;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n message.success(\"压缩图片下载成功！\");\n };\n\n // 上传压缩后的图片\n const uploadCompressedImage = async () => {\n if (!compressedImage) {\n message.error(\"请先压缩图片\");\n return;\n }\n\n setIsUploading(true);\n try {\n // 将Data URL转换为Blob\n const response = await fetch(compressedImage);\n const blob = await response.blob();\n\n // 创建FormData\n const formData = new FormData();\n formData.append(\"image\", blob, `${fileName}-compressed.png`);\n\n // 上传到服务器\n const uploadResponse = await api.post(\"/upload\", formData, {\n headers: {\n \"Content-Type\": \"multipart/form-data\",\n },\n });\n\n if (uploadResponse.data.success) {\n const imageUrl = `${window.location.origin}${uploadResponse.data.data.url}`;\n setUploadedUrl(imageUrl);\n message.success(\"压缩图片上传成功！\");\n\n if (onUploadSuccess) {\n onUploadSuccess();\n }\n } else {\n message.error(uploadResponse.data.error || \"上传失败\");\n }\n } catch (error) {\n console.error(\"上传错误:\", error);\n message.error(\"上传失败，请重试\");\n } finally {\n setIsUploading(false);\n }\n };\n\n // 复制上传的URL\n const copyUploadedUrl = () => {\n if (!uploadedUrl) {\n message.error(\"没有可复制的URL\");\n return;\n }\n\n navigator.clipboard.writeText(uploadedUrl).then(() => {\n message.success(\"URL已复制到剪贴板\");\n });\n };\n\n // 格式化文件大小\n const formatFileSize = (bytes) => {\n if (bytes === 0) return \"0 Bytes\";\n const k = 1024;\n const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\"];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + \" \" + sizes[i];\n };\n\n // 计算压缩率\n const compressionRatio =\n originalSize > 0\n ? (((originalSize - compressedSize) / originalSize) * 100).toFixed(1)\n : 0;\n\n return (\n \n \n <FileZipOutlined /> 图片压缩工具\n \n\n \n {/* 左侧：图片上传和参数设置 */}\n \n \n {originalImage ? (\n \n\n {originalImage && (\n \n \n {/* 文件名 */}\n \n )}\n \n\n {/* 右侧：压缩结果预览 */}\n \n \n {compressedImage ? (\n <>\n \n
\n\n \n
\n ) : (\n \n \n 原始大小: {formatFileSize(originalSize)}\n \n
\n \n \n 支持 Ctrl+V 粘贴图片\n \n
\n )}\n \n 点击或拖拽图片到此区域上传
\n\n 文件名： \n setFileName(e.target.value)}\n placeholder=\"输入文件名（不含扩展名）\"\n style={{ marginTop: 8 }}\n addonAfter=\".png\"\n />\n
\n\n {/* 尺寸设置 */}\n \n 尺寸设置： \n
\n\n {/* 质量设置 */}\n \n \n \n handleWidthChange(parseInt(e.target.value) || 0)\n }\n addonAfter=\"px\"\n />\n \n \n ×\n \n \n handleHeightChange(parseInt(e.target.value) || 0)\n }\n addonAfter=\"px\"\n />\n \n
\n \n {maintainAspectRatio ? \"锁定宽高比\" : \"解锁宽高比\"}\n \n
\n \n 压缩质量：{quality}% \n
\n\n {/* 压缩按钮 */}\n \n
\n\n {/* 压缩信息 */}\n \n 压缩信息： \n
\n \n \n 原始大小： \n
\n{formatFileSize(originalSize)} \n \n 压缩后大小： \n
\n{formatFileSize(compressedSize)} \n \n
\n
\n \n
\n
\n 压缩率： \n \n {compressionRatio}%\n \n
\n 压缩后的图片将在这里显示
\n \n )}\n \n \n \n \n\n {/* 上传结果 */}\n {uploadedUrl && (\n \n 图片URL： \n \n {uploadedUrl}\n \n
\n \n
\n ) : (\n \n \n 支持 Ctrl+V 粘贴图片\n \n
\n )}\n \n 点击或拖拽图片到此区域上传
\n\n \n {\n // 组件准备就绪时，确保裁剪框设置正确\n const cropper = cropperRef.current?.cropper;\n if (cropper) {\n setTimeout(() => {\n try {\n const canvasData = cropper.getCanvasData();\n if (canvasData) {\n cropper.setCropBoxData({\n left: canvasData.left,\n top: canvasData.top,\n width: canvasData.width,\n height: canvasData.height,\n });\n }\n } catch (error) {\n console.warn(\"初始化裁剪框失败:\", error);\n }\n }, 100);\n }\n }}\n />\n
\n {cropBoxData && imgData && (\n \n 裁剪后预览\n
\n {croppedImageUrl ? (\n \n
\n )}\n \n \n \n {/* Header Section */}\n \n \n {dirValue || \"根目录\"}\n \n setIsEditingDir(!isEditingDir)}\n style={{\n padding: 0,\n height: \"auto\",\n color: isLight ? colorPrimary : \"rgba(255,255,255,0.8)\",\n }}\n >\n 修改\n \n
\n {isEditingDir && (\n \n \n \n {file.filename}\n \n
\n\n {isEditingName && (\n \n setRenameValue(e.target.value)}\n onPressEnter={handleRename}\n style={{\n background: inputBg,\n color: textColor,\n border: \"none\",\n }}\n />\n \n 保存\n \n
\n )}\n\n \n \n 保存\n \n
\n )}\n \n\n {/* Actions Row */}\n \n
\n \n onDelete && onDelete(file.relPath)}\n okText=\"是\"\n cancelText=\"否\"\n >\n } variant=\"outlined\" color=\"danger\">\n 删除\n \n \n
\n\n {/* Info Sections */}\n \n \n 基本信息\n
\n \n \n 文件大小\n
\n \n {formatFileSize(file.size || 0)}\n
\n \n \n \n 格式\n
\n \n {file.filename.split(\".\").pop().toUpperCase()}\n
\n \n {imageMeta && (\n <>\n \n \n 分辨率\n
\n \n {imageMeta.width} × {imageMeta.height}\n
\n \n \n \n 色彩空间\n
\n \n {imageMeta.space || \"-\"}\n
\n \n \n )}\n \n \n 上传时间\n
\n \n {dayjs(file.uploadTime).format(\"YYYY-MM-DD\")}\n
\n \n {previewLocation && (\n \n \n 拍摄地点\n
\n\n \n
\n )}\n \n )}\n \n \n\n {/* EXIF Data */}\n {imageMeta?.exif && (\n \n © OSM\n
\n \n \n 拍摄参数\n
\n \n
\n \n {imageMeta.exif.dateTimeOriginal && (\n \n {[imageMeta.exif.make, imageMeta.exif.model]\n .filter(Boolean)\n .join(\" \")}\n
\n \n 相机\n
\n \n
\n \n )}\n {imageMeta.exif.lensModel && (\n \n {dayjs(imageMeta.exif.dateTimeOriginal).format(\n \"YYYY-MM-DD HH:mm:ss\"\n )}\n
\n \n 拍摄时间\n
\n \n \n 镜头\n
\n \n \n )}\n \n {imageMeta.exif.lensModel}\n
\n \n {imageMeta.exif.fNumber && (\n \n 光圈\n
\n \n )}\n {imageMeta.exif.exposureTime && (\n \n \n f/{formatFNumber(imageMeta.exif.fNumber)}\n
\n \n \n {formatExposureTime(imageMeta.exif.exposureTime)}\n
\n \n \n {imageMeta.exif.iso}\n
\n \n \n \n 覆盖保存\n \n \n
\n \n
\n {isSelected && (\n \n )}\n \n )}\n\n \n {isSelected &&
\n \n {\n e.stopPropagation();\n handleDelete(image.relPath);\n }}\n onCancel={(e) => {\n e?.stopPropagation();\n }}\n okText=\"是\"\n cancelText=\"否\"\n >\n
\n \n \n )}\n \n );\n};\n\n\nconst MagicIcon = ({ active }) => (\n \n \n \n \n \n \n\n {/* Main Star (Center-Left) */}\n
\n);\n\nconst ImageGallery = ({ onDelete, onRefresh, api, isAuthenticated, refreshTrigger, isBatchMode = false, selectedItems = new Set(), onSelectionChange = () => { } }) => {\n const {\n token: { colorBgContainer, colorPrimary, colorTextSecondary, colorText },\n } = theme.useToken();\n const { useBreakpoint } = Grid;\n const screens = useBreakpoint();\n const isMobile = !screens.md;\n const isDark = theme.useToken().theme?.id === 1 || colorBgContainer === \"#141414\";\n const isDarkMode = colorBgContainer === \"#141414\" || colorBgContainer === \"#000000\" || colorBgContainer === \"#1f1f1f\";\n\n // Helper to determine if a color is light or dark (returns true if light)\n const isLightColor = (r, g, b) => {\n // Calculate relative luminance using standard formula\n // Y = 0.2126R + 0.7152G + 0.0722B\n const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;\n return luminance > 0.6; // Threshold for considering it \"light\"\n };\n\n // Define capsule styles based on theme\n const capsuleStyle = {\n background: isDarkMode ? \"rgba(0, 0, 0, 0.65)\" : \"rgba(255, 255, 255, 0.65)\",\n border: `1px solid ${isDarkMode ? \"rgba(255, 255, 255, 0.15)\" : \"rgba(255, 255, 255, 0.4)\"}`,\n boxShadow: isDarkMode ? \"0 8px 32px rgba(0, 0, 0, 0.4)\" : \"0 8px 32px rgba(0, 0, 0, 0.08)\",\n dividerColor: isDarkMode ? \"rgba(255, 255, 255, 0.15)\" : \"rgba(0,0,0,0.1)\",\n iconColor: isDarkMode ? \"rgba(255, 255, 255, 0.45)\" : \"rgba(0,0,0,0.4)\",\n };\n\n const [searchText, setSearchText] = useState(\"\");\n const [previewVisible, setPreviewVisible] = useState(false);\n const [previewImage, setPreviewImage] = useState(\"\");\n const [previewTitle, setPreviewTitle] = useState(\"\");\n const [previewFile, setPreviewFile] = useState(null);\n const [dir, setDir] = useState(\"\");\n const [images, setImages] = useState([]);\n const [loading, setLoading] = useState(false);\n const [hoverKey, setHoverKey] = useState(null);\n const [hoverLocation, setHoverLocation] = useState(\"\");\n const [svgToolVisible, setSvgToolVisible] = useState(false);\n const [albumManagerVisible, setAlbumManagerVisible] = useState(false);\n const [directoryRefreshKey, setDirectoryRefreshKey] = useState(0);\n const [copyModalVisible, setCopyModalVisible] = useState(false);\n const [copyTargetImage, setCopyTargetImage] = useState(null);\n\n // Album Password Logic\n const [albumPasswords, setAlbumPasswords] = useState({}); // { \"dir\": \"password\" }\n const [passwordPromptVisible, setPasswordPromptVisible] = useState(false);\n const [passwordInput, setPasswordInput] = useState(\"\");\n const [pendingDir, setPendingDir] = useState(null); // The directory that required password\n\n // Thumbnail width from config (0 = use original)\n // Thumbnail width from config (0 = use original)\n const [thumbnailWidth, setThumbnailWidth] = useState(0);\n\n // Magic Search\n const [magicSearch, setMagicSearch] = useState(false);\n const [magicSearchAvailable, setMagicSearchAvailable] = useState(false);\n\n // Fetch config to get thumbnailWidth\n useEffect(() => {\n const fetchConfig = async () => {\n try {\n const response = await api.get(\"/config\");\n if (response.data.success) {\n if (response.data.data?.upload?.thumbnailWidth) {\n setThumbnailWidth(response.data.data.upload.thumbnailWidth);\n }\n if (response.data.data?.magicSearch?.enabled) {\n setMagicSearchAvailable(true);\n setMagicSearch(true); // Default to enabled\n }\n }\n } catch (error) {\n console.warn(\"获取配置失败:\", error);\n }\n };\n fetchConfig();\n }, [api]);\n\n useEffect(() => {\n if (!hoverKey) {\n setHoverLocation(\"\");\n return;\n }\n\n // Find image\n const img = images.find(i => (i.relPath || i.url || i.filename) === hoverKey);\n if (!img) return;\n\n // Debounce slightly or just fetch\n let active = true;\n\n const fetchLoc = async () => {\n try {\n // 1. Get Meta\n const res = await api.get(`/images/meta/${encodePath(img.relPath)}`);\n if (!active) return;\n\n if (res.data?.success && res.data.data?.exif?.latitude) {\n const { latitude, longitude } = res.data.data.exif;\n\n // 2. Reverse Geocode\n // Use a public API (Nominatim)\n // Note: In production, consider caching this or moving to backend\n const geoRes = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}&zoom=10&accept-language=zh-CN`);\n const geoData = await geoRes.json();\n\n if (active && geoData) {\n // Extract city/district\n const addr = geoData.address;\n // Try to find the most relevant \"city\" level name\n const city = addr.city || addr.town || addr.county || addr.district || addr.state;\n setHoverLocation(city ? `${city}` : (geoData.display_name ? geoData.display_name.split(',')[0] : \"未知位置\"));\n }\n }\n } catch (e) {\n // console.error(e); // Silent fail for location fetch\n }\n };\n\n // Delay to avoid spamming on fast scroll\n const timer = setTimeout(fetchLoc, 300);\n\n return () => {\n active = false;\n clearTimeout(timer);\n };\n }, [hoverKey, images, api]);\n\n const handleCopyClick = useCallback((image) => {\n setCopyTargetImage(image);\n setCopyModalVisible(true);\n }, []);\n\n const generateImageLinks = (image, type) => {\n if (!image) return \"\";\n const fullUrl = `${window.location.origin}${image.url}`;\n switch (type) {\n case \"markdown\":\n return ``;\n case \"html\":\n return `\n
\n );\n };\n\n // Handle file uploads (Drag & Drop + Paste)\n const handleUploadFiles = async (files) => {\n if (!isAuthenticated) {\n message.warning(\"请先登录\");\n return;\n }\n if (!files || files.length === 0) return;\n\n // Filter images and videos\n const imageFiles = Array.from(files).filter(file =>\n file.type.startsWith(\"image/\") || file.type.startsWith(\"video/\")\n );\n\n if (imageFiles.length === 0) {\n message.warning(\"请选择图片或视频文件\");\n return;\n }\n\n // Add to queue\n const newQueueItems = imageFiles.map(file => ({\n uid: `upload-${Date.now()}-${Math.random()}`,\n file: file,\n name: file.name,\n progress: 0,\n status: 'pending'\n }));\n\n setUploadQueue(newQueueItems);\n setIsDragOver(false);\n\n // Process queue\n // We use a simple loop here, but could be concurrent if needed\n // Using for...of loop to process sequentially or Promise.all for parallel?\n // Parallel is better for user experience, maybe limit concurrency?\n // Let's do simple Promise.all for now, browser limits connections anyway.\n\n // Actually, let's process them one by one to ensure we don't overwhelm server if many files\n // But Promise.all is faster. Let's do parallel.\n\n // We need to define the upload function inside or outside\n const uploadSingleFile = async (item) => {\n const formData = new FormData();\n if (dir) {\n formData.append(\"dir\", dir);\n }\n formData.append(\"image\", item.file, item.file.name);\n\n try {\n // Update status to uploading\n setUploadQueue(prev => prev.map(i => i.uid === item.uid ? { ...i, status: 'uploading' } : i));\n\n const res = await api.post(\"/upload\", formData, {\n headers: {\n \"Content-Type\": \"multipart/form-data\",\n },\n onUploadProgress: (progressEvent) => {\n const percentCompleted = Math.round(\n (progressEvent.loaded * 100) / progressEvent.total\n );\n setUploadQueue(prev => prev.map(i => i.uid === item.uid ? { ...i, progress: percentCompleted } : i));\n },\n });\n\n if (res.data && res.data.success) {\n setUploadQueue(prev => prev.map(i => i.uid === item.uid ? { ...i, status: 'success', progress: 100 } : i));\n setSessionUploadedFiles(prev => [...prev, res.data.data]);\n return true;\n } else {\n throw new Error(res.data?.error || \"上传失败\");\n }\n } catch (error) {\n console.error(\"Upload error:\", error);\n setUploadQueue(prev => prev.map(i => i.uid === item.uid ? { ...i, status: 'error', errorMsg: error.message || \"上传出错\" } : i));\n return false;\n }\n };\n\n // Execute uploads\n const results = await Promise.all(newQueueItems.map(item => uploadSingleFile(item)));\n\n // Check if any success to refresh\n if (results.some(r => r === true)) {\n message.success(`上传完成`);\n setCurrentPage(1);\n fetchImages(dir, 1, pageSize, searchText, false);\n }\n };\n\n // Handle URL upload (e.g., from clipboard image URL)\n const handleUploadFilesFromUrl = async (url) => {\n if (!isAuthenticated) {\n message.warning(\"请先登录\");\n return;\n }\n if (!url) return;\n\n // Add to queue for UI feedback\n const uid = `url-upload-${Date.now()}`;\n const newQueueItem = {\n uid,\n name: url.split('/').pop() || 'url-image',\n progress: 0,\n status: 'uploading'\n };\n setUploadQueue(prev => [...prev, newQueueItem]);\n\n try {\n const response = await api.post('/upload-url', { url, dir });\n if (response.data?.success) {\n setUploadQueue(prev => prev.map(i => i.uid === uid ? { ...i, status: 'success', progress: 100 } : i));\n setSessionUploadedFiles(prev => [...prev, response.data.data]);\n message.success(`上传完成`);\n setCurrentPage(1);\n fetchImages(dir, 1, pageSize, searchText, false);\n } else {\n throw new Error(response.data?.error || '上传失败');\n }\n } catch (error) {\n console.error('URL upload error:', error);\n setUploadQueue(prev => prev.map(i => i.uid === uid ? { ...i, status: 'error', errorMsg: error.message || '上传出错' } : i));\n message.error(error?.response?.data?.error || error.message || 'URL 上传失败');\n }\n };\n\n // Global Paste Event Listener\n useEffect(() => {\n const handlePaste = async (e) => {\n // Ignore paste if inside input/textarea\n if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {\n return;\n }\n\n const items = e.clipboardData?.items;\n if (!items) return;\n\n const files = [];\n let imageUrl = null;\n\n for (let i = 0; i < items.length; i++) {\n if (items[i].type.indexOf('image') !== -1) {\n const file = items[i].getAsFile();\n if (file) files.push(file);\n }\n }\n\n // Check for image URL in text clipboard\n if (files.length === 0) {\n // Try getData first (more reliable for plain text URLs)\n const plainText = e.clipboardData?.getData('text/plain');\n const uriList = e.clipboardData?.getData('text/uri-list');\n\n const textToCheck = uriList || plainText;\n\n if (textToCheck) {\n const imageExtPattern = /\\.(jpg|jpeg|png|gif|webp|bmp|svg)(\\?.*)?$/i;\n const urlCandidates = textToCheck.split(/\\r?\\n/).filter(line => line.trim());\n for (const text of urlCandidates) {\n const trimmed = text.trim();\n if (imageExtPattern.test(trimmed) && trimmed.match(/^https?:\\/\\//)) {\n imageUrl = trimmed;\n break;\n }\n }\n }\n\n // Fallback: iterate clipboard items\n if (!imageUrl) {\n const textItems = e.clipboardData?.items;\n if (textItems) {\n for (let i = 0; i < textItems.length; i++) {\n if (textItems[i].type === 'text/plain' || textItems[i].type === 'text/uri-list') {\n const text = await new Promise((resolve) => {\n textItems[i].getAsString((str) => resolve(str));\n });\n if (text) {\n const imageExtPattern = /\\.(jpg|jpeg|png|gif|webp|bmp|svg)(\\?.*)?$/i;\n const urlCandidates = text.split(/\\r?\\n/).filter(line => line.trim());\n for (const line of urlCandidates) {\n const trimmed = line.trim();\n if (imageExtPattern.test(trimmed) && trimmed.match(/^https?:\\/\\//)) {\n imageUrl = trimmed;\n break;\n }\n }\n if (imageUrl) break;\n }\n }\n }\n }\n }\n }\n\n if (files.length > 0) {\n e.preventDefault();\n handleUploadFiles(files);\n } else if (imageUrl) {\n e.preventDefault();\n // Upload from URL\n handleUploadFilesFromUrl(imageUrl);\n }\n };\n\n window.addEventListener('paste', handlePaste);\n return () => window.removeEventListener('paste', handlePaste);\n }, [dir, isAuthenticated]); // Re-bind if dir changes so upload goes to correct dir\n\n // Global Drag & Drop Listeners\n useEffect(() => {\n let dragCounter = 0;\n\n const handleDragEnter = (e) => {\n e.preventDefault();\n e.stopPropagation();\n dragCounter++;\n if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {\n setIsDragOver(true);\n }\n };\n\n const handleDragLeave = (e) => {\n e.preventDefault();\n e.stopPropagation();\n dragCounter--;\n if (dragCounter === 0) {\n setIsDragOver(false);\n }\n };\n\n const handleDragOver = (e) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const handleDrop = (e) => {\n e.preventDefault();\n e.stopPropagation();\n setIsDragOver(false);\n dragCounter = 0;\n\n if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n handleUploadFiles(e.dataTransfer.files);\n }\n };\n\n window.addEventListener('dragenter', handleDragEnter);\n window.addEventListener('dragleave', handleDragLeave);\n window.addEventListener('dragover', handleDragOver);\n window.addEventListener('drop', handleDrop);\n\n return () => {\n window.removeEventListener('dragenter', handleDragEnter);\n window.removeEventListener('dragleave', handleDragLeave);\n window.removeEventListener('dragover', handleDragOver);\n window.removeEventListener('drop', handleDrop);\n };\n }, [dir, isAuthenticated]);\n\n const handleDelete = async (relPath) => {\n try {\n await api.delete(`/images/${encodePath(relPath)}`);\n message.success(\"删除成功\");\n setImages((prev) => prev.filter((img) => img.relPath !== relPath));\n const ps = pagination.pageSize || pageSize;\n const newTotal = Math.max(0, (pagination.total || images.length) - 1);\n const newTotalPages = Math.max(1, Math.ceil(newTotal / ps));\n const newCurrent = Math.min(pagination.current || 1, newTotalPages);\n setPagination({\n ...pagination,\n total: newTotal,\n totalPages: newTotalPages,\n current: newCurrent,\n });\n setHasMore(newCurrent < newTotalPages);\n if (onDelete) {\n onDelete(relPath);\n }\n return true; // Indicate success for callers\n } catch (error) {\n message.error(\"删除失败\");\n return false;\n }\n };\n\n const formatFileSize = (bytes) => {\n if (bytes === 0) return \"0 Bytes\";\n const k = 1024;\n const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\"];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + \" \" + sizes[i];\n };\n\n const [previewIndex, setPreviewIndex] = useState(-1);\n const pendingNavigateRef = useRef(null); // 'next' | null - Used to auto-navigate after loading more in preview mode\n\n // ... (keep existing helper functions)\n\n const handleUpdate = (updatedFile) => {\n setImages(prev => prev.map(img => img.relPath === previewFile.relPath ? { ...img, ...updatedFile } : img));\n setPreviewFile(updatedFile);\n setPreviewTitle(updatedFile.filename);\n setPreviewImage(getCacheBustedUrl(updatedFile));\n };\n\n const handlePreview = (file) => {\n // Find index in current images list\n const index = images.findIndex(img => img.relPath === file.relPath);\n setPreviewIndex(index);\n setPreviewImage(getCacheBustedUrl(file));\n setPreviewVisible(true);\n setPreviewTitle(file.filename);\n setPreviewFile(file);\n\n // Reset edit states\n const ext = file.filename.includes(\".\")\n ? file.filename.substring(file.filename.lastIndexOf(\".\"))\n : \"\";\n const base = ext ? file.filename.slice(0, -ext.length) : file.filename;\n setRenameValue(base);\n setIsEditingName(false);\n setImageMeta(null);\n setMetaLoading(true);\n\n const currentDir =\n file.relPath && file.relPath.includes(\"/\")\n ? file.relPath.substring(0, file.relPath.lastIndexOf(\"/\"))\n : \"\";\n setDirValue(currentDir);\n setIsEditingDir(false);\n\n // Fetch meta\n api\n .get(`/images/meta/${encodePath(file.relPath)}`)\n .then((res) => {\n if (res.data && res.data.success) {\n setImageMeta(res.data.data);\n }\n })\n .catch(() => { })\n .finally(() => setMetaLoading(false));\n };\n\n const showNext = () => {\n if (previewIndex < images.length - 1) {\n handlePreview(images[previewIndex + 1]);\n } else if (hasMore && !loadingMore) {\n // Reached the end of loaded images but more are available, trigger load more\n setCurrentPage((p) => p + 1);\n pendingNavigateRef.current = 'next';\n }\n };\n\n const showPrev = () => {\n if (previewIndex > 0) {\n handlePreview(images[previewIndex - 1]);\n }\n };\n\n // Handle auto-navigation to next image after loading more in preview mode\n useEffect(() => {\n if (pendingNavigateRef.current === 'next' && previewVisible && !loadingMore) {\n // Images list has been updated and loading is complete, navigate to next\n if (previewIndex < images.length - 1) {\n handlePreview(images[previewIndex + 1]);\n }\n pendingNavigateRef.current = null;\n }\n }, [images.length, loadingMore]);\n\n // Keyboard navigation\n useEffect(() => {\n const handleKeyDown = (e) => {\n if (!previewVisible) return;\n if (e.key === 'ArrowRight') showNext();\n if (e.key === 'ArrowLeft') showPrev();\n };\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [previewVisible, previewIndex, images]);\n\n const handleDownload = (file) => {\n const link = document.createElement(\"a\");\n link.href = getCacheBustedUrl(file);\n link.download = file.filename;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n message.success(\"开始下载\");\n };\n\n const copyToClipboard = (text) => {\n if (navigator.clipboard && window.isSecureContext) {\n navigator.clipboard\n .writeText(text)\n .then(() => message.success(\"链接已复制到剪贴板\"))\n .catch(() => message.error(\"复制失败\"));\n return;\n }\n const input = document.createElement(\"input\");\n input.style.position = \"fixed\";\n input.style.top = \"-10000px\";\n input.style.zIndex = \"-999\";\n document.body.appendChild(input);\n input.value = text;\n input.focus();\n input.select();\n try {\n const ok = document.execCommand(\"copy\");\n document.body.removeChild(input);\n if (!ok) {\n message.error(\"复制失败\");\n } else {\n message.success(\"链接已复制到剪贴板\");\n }\n } catch (e) {\n document.body.removeChild(input);\n message.error(\"当前浏览器不支持复制功能\");\n }\n };\n\n // Helper to distribute items into columns\n const getColumns = (items) => {\n const columnsCount = isMobile ? 2 : screens.xl ? 5 : screens.lg ? 4 : screens.md ? 3 : 2;\n const columns = Array.from({ length: columnsCount }, () => []);\n items.forEach((item, index) => {\n columns[index % columnsCount].push(item);\n });\n return columns;\n };\n\n const handlePasswordSubmit = () => {\n if (!pendingDir) return;\n\n // Store password in a temporary session-like way? \n // User requested \"每次都需要让输入子密码\" (Every time need to enter password).\n // So we should NOT store it in state persistently for auto-retry on subsequent navigations?\n // Wait, if we don't store it, scrolling/pagination will fail because loadMore calls fetchImages which needs password.\n // So we MUST store it at least for the current session while viewing this album.\n // But if user navigates away and comes back, they should enter it again.\n // Currently `albumPasswords` is state, so it persists as long as ImageGallery is mounted.\n // If user switches dir via top menu, `dir` changes.\n // If they switch back to locked dir, we check `albumPasswords[dir]`.\n // To satisfy \"Every time need to enter password\", we should CLEAR the password when directory changes.\n\n // We will implement clearing logic in the `dir` change effect.\n\n // Store password\n setAlbumPasswords(prev => ({\n ...prev,\n [pendingDir]: passwordInput\n }));\n\n // Close modal\n setPasswordPromptVisible(false);\n\n setLoading(true);\n const params = {\n page: 1,\n pageSize: pageSize,\n dir: pendingDir,\n search: searchText\n };\n const headers = { \"x-album-password\": passwordInput };\n\n api.get(\"/images\", { params, headers })\n .then(res => {\n if (res.data.success) {\n setImages(res.data.data);\n setPagination(res.data.pagination);\n setHasMore(res.data.pagination.current < res.data.pagination.totalPages);\n }\n })\n .catch(e => {\n message.error(\"密码错误或访问失败\");\n // Clear invalid password\n setAlbumPasswords(prev => {\n const next = { ...prev };\n delete next[pendingDir];\n return next;\n });\n setPasswordPromptVisible(true);\n })\n .finally(() => setLoading(false));\n };\n\n return (\n \n
\n \n 释放以上传图片 \n 支持多图上传 \n
\n \n )}\n\n {/* Upload Queue Overlay */}\n {uploadQueue.length > 0 && (\n \n
\n )}\n\n {/* Floating Capsule Header */}\n \n
\n \n \n 正在上传 ({uploadQueue.filter(i => i.status === 'success').length}/{uploadQueue.length})\n \n
\n \n {uploadQueue.map(item => (\n
\n {!uploading && (\n <>\n {sessionUploadedFiles.length > 0 && \n {item.errorMsg} }\n
\n ))}\n \n {item.name} \n \n {item.status === 'error' ? '失败' : item.status === 'success' ? '完成' : `${item.progress}%`}\n \n
\n {/* antd Progress component is imported but we need to ensure correct props */}\n \n \n
\n {item.errorMsg && \n \n
\n \n )}\n \n
\n \n {\n setMagicSearch(!magicSearch);\n // If clearing, maybe trigger refresh?\n // Let existing effects handle it (searchText dependency)\n }}\n style={{ cursor: 'pointer', marginRight: 4, display: 'flex' }}\n title=\"Magic Search\"\n >\n
\n ) : (\n \n
\n ) : images.length === 0 ? (\n \n \n {group.date}\n
\n\n {/* Masonry Layout - with batch selection support */}\n \n
\n )}\n \n )}\n\n 该相册受密码保护，请输入密码以访问。
\n \n \n \n
\n `,\n iconSize: [48, 56], // Slightly larger for better touch targets\n iconAnchor: [24, 56],\n popupAnchor: [0, -56],\n });\n};\n\n// Custom Cluster Icon\nconst createClusterCustomIcon = function (cluster) {\n const count = cluster.getChildCount();\n let size = 'small';\n if (count > 10) size = 'medium';\n if (count > 50) size = 'large';\n\n // Get first child's image to use as background (optional, but cool)\n // const children = cluster.getAllChildMarkers();\n // const firstChildHtml = children[0].options.icon.options.html;\n // const bgMatch = firstChildHtml.match(/url\\('([^']+)'\\)/);\n // const bgUrl = bgMatch ? bgMatch[1] : '';\n\n return L.divIcon({\n html: `\n \n ${count}\n
\n `,\n className: 'custom-cluster-icon',\n iconSize: L.point(40, 40, true),\n });\n};\n\nconst getDisplayCoordinates = (lat, lng) => {\n // Always convert WGS-84 to GCJ-02 for AutoNavi\n const [lngGcj, latGcj] = coordtransform.wgs84togcj02(lng, lat);\n return [latGcj, lngGcj];\n};\n\nconst MarkerCluster = ({ markers, onMarkerClick }) => {\n const map = useMap();\n\n useEffect(() => {\n if (!map || !markers) return;\n\n const markerClusterGroup = L.markerClusterGroup({\n chunkedLoading: true,\n iconCreateFunction: createClusterCustomIcon,\n maxClusterRadius: 60,\n spiderfyOnMaxZoom: true,\n showCoverageOnHover: false\n });\n\n const leafletMarkers = markers.map((marker, idx) => {\n if (!marker.lat || !marker.lng) return null;\n\n const latLng = getDisplayCoordinates(marker.lat, marker.lng);\n const leafletMarker = L.marker(latLng, {\n icon: createPhotoIcon(marker.thumbUrl)\n });\n\n leafletMarker.on('click', () => {\n onMarkerClick(idx);\n });\n\n return leafletMarker;\n }).filter(Boolean);\n\n markerClusterGroup.addLayers(leafletMarkers);\n map.addLayer(markerClusterGroup);\n\n return () => {\n map.removeLayer(markerClusterGroup);\n };\n }, [map, markers, onMarkerClick]);\n\n return null;\n};\n\nfunction MapPage() {\n const [state, setState] = useState({\n loading: true,\n markers: [],\n error: null\n });\n\n const [modalVisible, setModalVisible] = useState(false);\n const [selectedIndex, setSelectedIndex] = useState(-1);\n\n useEffect(() => {\n const fetchMapData = async () => {\n try {\n const res = await api.get('/map-data');\n if (res.data.success) {\n // Filter out invalid coordinates just in case\n const markersData = Array.isArray(res.data.data) ? res.data.data : [];\n const validMarkers = markersData.filter(m => m.lat && m.lng);\n setState({\n loading: false,\n markers: validMarkers,\n error: null\n });\n } else {\n throw new Error(res.data.error);\n }\n } catch (err) {\n setState(prev => ({ ...prev, loading: false, error: err.message || \"加载失败\" }));\n message.error('加载地图数据失败: ' + (err.message || \"未知错误\"));\n }\n };\n\n fetchMapData();\n }, []);\n\n const handleBack = () => {\n window.location.href = '/';\n };\n\n const handleMarkerClick = useCallback((index) => {\n setSelectedIndex(index);\n setModalVisible(true);\n }, []);\n\n const handleNext = () => {\n if (selectedIndex < state.markers.length - 1) {\n setSelectedIndex(prev => prev + 1);\n }\n };\n\n const handlePrev = () => {\n if (selectedIndex > 0) {\n setSelectedIndex(prev => prev - 1);\n }\n };\n\n const handleDelete = async (relPath) => {\n try {\n await api.delete(`/images/${encodeURIComponent(relPath)}`);\n message.success(\"删除成功\");\n setState(prev => ({\n ...prev,\n markers: prev.markers.filter(m => m.relPath !== relPath)\n }));\n setModalVisible(false); // Close modal after delete\n } catch (e) {\n message.error(\"删除失败\");\n }\n };\n\n const handleUpdate = (updatedFile) => {\n setState(prev => ({\n ...prev,\n markers: prev.markers.map(m =>\n m.relPath === updatedFile.relPath || m.relPath === updatedFile.oldRelPath\n ? { ...m, ...updatedFile, date: updatedFile.uploadTime, thumbUrl: updatedFile.url + '?w=200' } // Ensure essential props\n : m\n )\n }));\n };\n\n const marker = selectedIndex >= 0 ? state.markers[selectedIndex] : null;\n\n const currentFile = marker ? {\n ...marker,\n // Use existing URL if it's absolute (Mock mode), otherwise construct API URL\n url: marker.url && (marker.url.startsWith('http') || marker.url.startsWith('blob'))\n ? marker.url\n : `/api/images/${marker.relPath.split('/').map(encodeURIComponent).join('/')}`,\n uploadTime: marker.date || marker.uploadTime,\n size: marker.size || 0\n } : null;\n\n // CSS Styles for Glassmorphism\n const styles = `\n .glass-marker {\n width: 48px;\n height: 48px;\n background: rgba(255, 255, 255, 0.6);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 8px;\n padding: 3px;\n box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);\n position: relative;\n transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n .custom-photo-marker-container:hover .glass-marker {\n transform: scale(1.15) translateY(-4px);\n z-index: 1000;\n box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);\n border-color: rgba(0, 0, 0, 0.15);\n background: rgba(255, 255, 255, 0.85);\n }\n\n .marker-image {\n width: 100%;\n height: 100%;\n border-radius: 5px;\n background-size: cover;\n background-position: center;\n background-color: #f0f0f0;\n box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);\n }\n\n .marker-arrow {\n position: absolute;\n bottom: -6px;\n left: 50%;\n transform: translateX(-50%);\n width: 0; \n height: 0; \n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-top: 6px solid rgba(255, 255, 255, 0.6);\n filter: drop-shadow(0 2px 2px rgba(0,0,0,0.05));\n }\n\n /* Cluster Styles */\n .glass-cluster {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: rgba(20, 20, 20, 0.75);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.15);\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n color: #fff;\n box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);\n animation: pulse-light 3s infinite;\n }\n \n .glass-cluster span {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial;\n font-size: 14px;\n }\n\n @keyframes pulse-light {\n 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); }\n 70% { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }\n }\n \n /* Controls Styling */\n .map-control-btn {\n background: rgba(20, 20, 20, 0.75) !important;\n backdrop-filter: blur(8px) !important;\n border: 1px solid rgba(255, 255, 255, 0.15) !important;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;\n color: #fff !important;\n }\n .map-control-btn:hover {\n background: rgba(40, 40, 40, 0.85) !important;\n border-color: rgba(255, 255, 255, 0.3) !important;\n }\n .leaflet-control-zoom a {\n background: rgba(20, 20, 20, 0.75) !important;\n backdrop-filter: blur(4px) !important;\n color: #fff !important;\n border-color: rgba(255, 255, 255, 0.15) !important;\n }\n `;\n\n if (state.loading) {\n return \n
\n );\n }\n\n const tileLayerProps = {\n url: \"https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}\",\n attribution: '© 高德地图',\n subdomains: ['1', '2', '3', '4'],\n minZoom: 3,\n maxZoom: 18\n };\n\n return (\n Error: {state.error}
\n \n\n \n\n {/* Top Left Controls */}\n \n setModalVisible(false)}\n file={currentFile}\n api={api}\n onNext={handleNext}\n onPrev={handlePrev}\n hasNext={selectedIndex < state.markers.length - 1}\n hasPrev={selectedIndex > 0}\n onDelete={handleDelete}\n onUpdate={handleUpdate}\n />\n
\n );\n}\n\nexport default MapPage;\n"
},
{
"path": "client/src/components/PasswordOverlay.js",
"content": "import React, { useState } from \"react\";\nimport { Form, Input, Button, message, Typography } from \"antd\";\nimport { LockOutlined, ArrowRightOutlined } from \"@ant-design/icons\";\nimport { setPassword, clearPassword } from \"../utils/secureStorage\";\nimport ScrollingBackground from \"./ScrollingBackground\";\nimport api from \"../utils/api\";\n\nconst { Text, Title } = Typography;\n\nconst PasswordOverlay = ({ onLoginSuccess, isMobile }) => {\n const [loading, setLoading] = useState(false);\n\n const onFinish = async (values) => {\n setLoading(true);\n try {\n setPassword(values.password);\n await api.post(\"/auth/login\", { password: values.password });\n onLoginSuccess();\n } catch (error) {\n console.error(\"验证失败:\", error);\n const errorMsg = error.response?.data?.error || \"验证失败\";\n message.error(errorMsg);\n clearPassword();\n } finally {\n setLoading(false);\n }\n };\n\n return (\n \n \n \n
\n\n \n
\n \n {image.thumbhash && (\n setLoaded(true)}\n />\n );\n }\n return (\n setLoaded(true)}\n style={{\n width: \"100%\", display: \"block\",\n transition: \"transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease-in\",\n transform: hoverKey === (image.relPath || image.url || image.filename) ? \"scale(1.05)\" : \"scale(1)\",\n opacity: loaded ? 1 : 0, position: \"relative\", zIndex: 2,\n }}\n />\n );\n })()}\n
\n\n {!isMobile && (\n \n
\n \n )}\n \n );\n};\n\nconst ModalVideoPlayer = ({ url, visible }) => {\n const videoRef = useRef(null);\n\n useEffect(() => {\n if (videoRef.current) {\n if (visible) {\n videoRef.current.currentTime = 0;\n videoRef.current.play().catch(() => { });\n } else {\n videoRef.current.pause();\n videoRef.current.currentTime = 0;\n }\n }\n }, [visible]);\n\n return (\n \n {image.filename.replace(/\\.[^/.]+$/, \"\")}\n
\n \n {dayjs(image.uploadTime).format(\"YYYY-MM-DD\")}\n ·\n {formatFileSize(image.size)}\n
\n \n } onClick={(e) => { e.stopPropagation(); handleDownload(image); }} style={{ color: \"#fff\", background: \"rgba(255,255,255,0.2)\", backdropFilter: \"blur(4px)\", border: \"1px solid rgba(255,255,255,0.1)\", borderRadius: \"4px\", fontSize: \"12px\" }}>下载\n
\n \n
\n );\n }\n\n if (error) {\n return (\n \n
\n );\n }\n\n return (\n \n {/* Header Banner */}\n
\n\n {/* Full Screen Modal */}\n \n {/* Theme Toggle Button */}\n
\n\n \n
\n\n \n {dirName || \"分享的相册\"} \n
\n \n 共 {images.length} 张图片 \n
\n \n {groups.map((group) => (\n ({\n key: imgItem.relPath || `item-${group.date}-${index}`,\n data: imgItem,\n }))}\n itemRender={({ data: imgItem }) => (\n
\n ))}\n\n \n {loadingMore && (\n \n \n {group.date}\n
\n\n \n
\n )}\n \n {/* Close & Copy Buttons */}\n
\n )\n }\n \n \n );\n};\n\nexport default ShareView;\n"
},
{
"path": "client/src/components/SvgToPngTool.js",
"content": "import React, { useState, useRef, useEffect } from \"react\";\nimport {\n Card,\n Typography,\n Space,\n Button,\n Input,\n message,\n Row,\n Col,\n theme,\n Upload,\n} from \"antd\";\nimport {\n CodeOutlined,\n PictureOutlined,\n DownloadOutlined,\n UploadOutlined,\n CopyOutlined,\n ClearOutlined,\n InboxOutlined,\n} from \"@ant-design/icons\";\n\nconst { TextArea } = Input;\nconst { Title, Text } = Typography;\nconst { Dragger } = Upload;\n\nconst SvgToPngTool = ({ onUploadSuccess, api }) => {\n const {\n token: { colorBorder, colorFillTertiary, colorBgContainer, colorText },\n } = theme.useToken();\n\n const [svgCode, setSvgCode] = useState(\"\");\n const [pngDataUrl, setPngDataUrl] = useState(\"\");\n const [isConverting, setIsConverting] = useState(false);\n const [isUploading, setIsUploading] = useState(false);\n const [uploadedUrl, setUploadedUrl] = useState(\"\");\n const [fileName, setFileName] = useState(\"converted-image\");\n const canvasRef = useRef(null);\n\n // 处理粘贴事件\n const handlePaste = async (event) => {\n const items = event.clipboardData?.items;\n if (!items) return;\n\n for (let i = 0; i < items.length; i++) {\n const item = items[i];\n\n // 处理图片粘贴\n if (item.type.startsWith(\"image/\")) {\n event.preventDefault();\n const file = item.getAsFile();\n if (file) {\n await handlePastedImage(file);\n }\n break;\n }\n\n // 处理文本粘贴（可能是SVG代码）\n if (item.type === \"text/plain\") {\n item.getAsString((text) => {\n // 检查是否是SVG代码\n if (\n text.trim().startsWith(\"\n ×}\n onClick={() => setPreviewVisible(false)}\n style={{ background: \"rgba(0,0,0,0.5)\", border: \"1px solid rgba(255,255,255,0.2)\", color: \"#fff\", width: 40, height: 40 }}\n />\n
\n\n {/* Left: Image Viewer */}\n \n {!isMobile && previewIndex > 0 && (\n
\n\n {/* Right: Info Sidebar */}\n {(() => {\n const thumbUrl = getThumbHashUrl(previewFile.thumbhash);\n const hasThumb = !!thumbUrl;\n\n const textColor = hasThumb ? \"#fff\" : colorText;\n const secondaryTextColor = hasThumb ? \"rgba(255,255,255,0.75)\" : colorTextSecondary;\n const tertiaryTextColor = hasThumb ? \"rgba(255,255,255,0.5)\" : (isDarkMode ? \"rgba(255,255,255,0.45)\" : \"rgba(0,0,0,0.45)\");\n\n return (\n \n \n {/\\.(mp4|webm)$/i.test(previewFile.filename) ? (\n setImgLoaded(true)}\n style={{\n maxWidth: \"100%\", maxHeight: \"100%\", width: \"auto\", height: \"auto\", objectFit: \"contain\",\n boxShadow: \"0 20px 50px rgba(0,0,0,0.5)\", zIndex: 2,\n opacity: imgLoaded ? 1 : 0, transition: \"opacity 0.3s ease\"\n }}\n src={getCacheBustedUrl(previewFile)}\n />\n \n )}\n
\n \n
\n )}\n \n
\n );\n })()}\n \n \n \n
\n \n {previewFile.filename} \n
\n\n \n } onClick={() => handleDownload(previewFile)} style={{ color: textColor, borderColor: secondaryTextColor }}>下载\n
\n\n \n
\n\n {previewFile.exif && (\n 基本信息
\n \n \n \n \n {previewLocation && (\n
\n 文件大小
{formatFileSize(previewFile.size)}
格式
{previewFile.filename.split('.').pop().toUpperCase()}
上传时间
{dayjs(previewFile.uploadTime).format(\"YYYY-MM-DD\")}
\n
\n )}\n 拍摄地点
\n \n
\n )}\n \n © OSM\n
\n \n \n \n
\n )}\n 拍摄参数
\n \n
\n {[previewFile.exif.make, previewFile.exif.model].filter(Boolean).join(\" \")}
相机
\n {previewFile.exif.fNumber && }\n {previewFile.exif.exposureTime && }\n {previewFile.exif.iso && }\n
\n f/{previewFile.exif.fNumber}
光圈
{previewFile.exif.exposureTime}s
快门
{previewFile.exif.iso}
ISO
\n \n <CodeOutlined /> SVG转PNG工具\n \n\n \n {/* 左侧：SVG输入 */}\n \n \n {/* 添加紧凑的文件上传区域 */}\n \n \n\n setSvgCode(e.target.value)}\n style={{ fontFamily: \"monospace\" }}\n />\n \n 支持 Ctrl+V 粘贴SVG代码或SVG图片\n
\n\n \n
\n 点击或拖拽SVG文件到此处\n
\n\n 支持 .svg 格式文件\n
\n\n
\n\n \n
\n\n \n 文件名： \n
\n\n \n setFileName(e.target.value)}\n placeholder=\"输入文件名（不含扩展名）\"\n addonAfter=\".png\"\n style={{ flex: 1 }}\n />\n \n 自动生成\n \n
\n 转换后的PNG图片将在这里显示
\n \n )}\n \n 图片URL： \n \n {uploadedUrl}\n \n
\n \n {modal}\n
\n )}\n styles={{\n content: { background: 'transparent', padding: 0, boxShadow: 'none' },\n body: { padding: 0 },\n container: { padding: 0 }\n }}\n >\n \n {/* Header */}\n
\n \n );\n};\n\nexport default SvgToolModal;\n"
},
{
"path": "client/src/components/ThemeSwitcher.js",
"content": "import React, { useState, useEffect } from \"react\";\nimport { Button, Dropdown } from \"antd\";\nimport { SunOutlined, MoonOutlined, SyncOutlined } from \"@ant-design/icons\";\n\nconst THEME_KEY = \"theme\";\nconst AUTO_KEY = \"themeAutoMode\";\n\nconst ThemeSwitcher = ({ theme, onThemeChange }) => {\n const [autoMode, setAutoMode] = useState(false);\n\n // 加载自动模式\n useEffect(() => {\n const savedAutoMode = localStorage.getItem(AUTO_KEY);\n if (savedAutoMode !== null) {\n setAutoMode(JSON.parse(savedAutoMode));\n }\n }, []);\n\n // 自动模式定时器\n useEffect(() => {\n if (!autoMode) return;\n const checkTimeAndUpdateTheme = () => {\n const hour = new Date().getHours();\n const shouldBeDark = hour < 6 || hour >= 18;\n const newTheme = shouldBeDark ? \"dark\" : \"light\";\n if (theme !== newTheme) {\n onThemeChange(newTheme);\n localStorage.setItem(THEME_KEY, newTheme);\n }\n };\n checkTimeAndUpdateTheme();\n const interval = setInterval(checkTimeAndUpdateTheme, 60000);\n return () => clearInterval(interval);\n }, [autoMode, theme, onThemeChange]);\n\n // 菜单点击\n const handleMenuClick = ({ key }) => {\n if (key === \"auto\") {\n setAutoMode(true);\n localStorage.setItem(AUTO_KEY, \"true\");\n // 立即切换一次\n const hour = new Date().getHours();\n const shouldBeDark = hour < 6 || hour >= 18;\n const newTheme = shouldBeDark ? \"dark\" : \"light\";\n onThemeChange(newTheme);\n localStorage.setItem(THEME_KEY, newTheme);\n } else {\n setAutoMode(false);\n localStorage.setItem(AUTO_KEY, \"false\");\n onThemeChange(key);\n localStorage.setItem(THEME_KEY, key);\n }\n };\n\n // 当前高亮\n const selectedKey = autoMode ? \"auto\" : theme;\n\n const items = [\n {\n key: \"light\",\n icon: (\n \n
\n\n {/* Content Body */}\n \n
\n \n {/* Left: Input */}\n
\n\n {/* Hidden Canvas */}\n \n \n
\n\n {/* Right: Preview */}\n \n setSvgCode(e.target.value)}\n placeholder=\"在此处粘贴 SVG 代码...\"\n style={{\n height: '100%',\n resize: 'none',\n background: 'transparent',\n border: 'none',\n color: textColor,\n padding: '20px',\n fontFamily: 'Menlo, Monaco, \"Courier New\", monospace',\n fontSize: '13px',\n lineHeight: '1.5'\n }}\n />\n {!svgCode && (\n
\n {/* Toolbar for Input */}\n \n \n \n
\n )}\n \n
\n \n
点击或拖拽 SVG 文件
\n支持 .svg 文件或直接粘贴代码
\n\n \n {svgCode ? `${svgCode.length} 字符` : \"等待输入...\"}\n \n \n \n }>导入文件\n \n {svgCode && (\n \n )}\n \n
\n \n
\n \n {/* Checkerboard background */}\n \n\n {isConverting ? (\n
\n\n {/* Actions */}\n \n
\n ) : pngDataUrl ? (\n \n \n \n \n \n \n \n
\n 正在转换...
\n \n
\n )}\n 预览区域
\n \n {uploadedUrl ? (\n \n
\n )}\n
\n \n \n } size=\"small\" onClick={() => {\n navigator.clipboard.writeText(uploadedUrl);\n message.success(\"已复制\");\n }} />\n \n
\n ) : (\n \n {uploadedUrl}\n
\n \n
\n );\n }\n return \n \n \n {trafficData.length > 0 ? (\n \n \n\n
\n
\n );\n};\n\nexport default TrafficDashboard;\n"
},
{
"path": "client/src/components/UploadComponent.js",
"content": "import React, { useState, useEffect } from \"react\";\nimport {\n Upload,\n Button,\n message,\n Card,\n Typography,\n Space,\n Tag,\n Progress,\n Row,\n Col,\n theme,\n Grid,\n Tabs,\n Input,\n} from \"antd\";\nimport { InboxOutlined, CheckCircleOutlined, CloseOutlined, CopyOutlined, LinkOutlined } from \"@ant-design/icons\";\nimport DirectorySelector from \"./DirectorySelector\";\n\nconst { Dragger } = Upload;\nconst { Title, Text } = Typography;\n\nfunction sanitizeDir(input) {\n let dir = (input || \"\").trim().replace(/\\\\+/g, \"/\").replace(/\\/+/g, \"/\");\n dir = dir.replace(/\\/+$/, \"\"); // 去除末尾斜杠\n dir = dir.replace(/^\\/+/, \"\"); // 去除开头斜杠\n dir = dir.replace(/\\/+/, \"/\"); // 合并多余斜杠\n return dir;\n}\n\n// 并发请求限制器\nclass ConcurrencyLimiter {\n constructor(limit) {\n this.limit = limit;\n this.active = 0;\n this.queue = [];\n }\n\n add(task) {\n return new Promise((resolve, reject) => {\n this.queue.push(() => task().then(resolve).catch(reject));\n this.next();\n });\n }\n\n next() {\n if (this.active < this.limit && this.queue.length > 0) {\n const task = this.queue.shift();\n this.active++;\n task().finally(() => {\n this.active--;\n this.next();\n });\n }\n }\n}\nconst uploadLimiter = new ConcurrencyLimiter(5); // 限制并发数为5\n\nconst UploadComponent = ({ onUploadSuccess, api, isModal }) => {\n const {\n token: { colorBgContainer },\n } = theme.useToken();\n const { useBreakpoint } = Grid;\n const screens = useBreakpoint();\n const isMobile = !screens.md;\n const isDarkMode = theme.useToken().theme?.id === 1 || colorBgContainer === \"#141414\" || colorBgContainer === \"#000000\" || colorBgContainer === \"#1f1f1f\";\n\n const [uploadQueue, setUploadQueue] = useState([]);\n const [uploadedFiles, setUploadedFiles] = useState([]);\n // Separate list for currently completed session uploads to show in overlay\n const [sessionUploadedFiles, setSessionUploadedFiles] = useState([]);\n const [dir, setDir] = useState(\"\");\n const [urlInput, setUrlInput] = useState(\"\");\n const [config, setConfig] = useState({\n allowedExtensions: [\n \".jpg\",\n \".jpeg\",\n \".png\",\n \".gif\",\n \".webp\",\n \".bmp\",\n \".svg\",\n ],\n maxFileSize: 10 * 1024 * 1024,\n maxFileSizeMB: 10,\n allowedFormats: \"JPG, JPEG, PNG, GIF, WEBP, BMP, SVG\",\n });\n\n const uploading = uploadQueue.some(item => item.status === 'pending' || item.status === 'uploading');\n\n // 获取配置\n useEffect(() => {\n const fetchConfig = async () => {\n try {\n const response = await api.get(\"/config\");\n if (response.data.success) {\n setConfig(response.data.data.upload);\n }\n } catch (error) {\n console.warn(\"获取配置失败，使用默认配置:\", error);\n }\n };\n fetchConfig();\n }, [api]);\n\n const updateQueueItem = (uid, updates) => {\n setUploadQueue((prev) =>\n prev.map((item) => (item.uid === uid ? { ...item, ...updates } : item))\n );\n };\n\n // 上传文件的通用方法\n const uploadFile = React.useCallback(async (file, onProgress) => {\n let safeDir = sanitizeDir(dir);\n if (safeDir.includes(\"..\")) {\n throw new Error(\"目录不能包含 .. 等非法字符\");\n }\n\n const formData = new FormData();\n\n // 确保文件名编码正确，特别是中文文件名\n const fileName = file.name;\n formData.append(\"image\", file, fileName);\n\n const url = safeDir\n ? `/upload?dir=${encodeURIComponent(safeDir)}`\n : \"/upload\";\n\n try {\n const response = await api.post(url, formData, {\n timeout: 0, // 取消单次上传超时限制，防止大文件长连接断开\n headers: {\n \"Content-Type\": \"multipart/form-data\",\n },\n onUploadProgress: (progressEvent) => {\n const percentCompleted = Math.round(\n (progressEvent.loaded * 100) / progressEvent.total\n );\n if (onProgress) onProgress(percentCompleted);\n },\n });\n\n if (response.data.success) {\n const fileData = response.data.data;\n setUploadedFiles((prev) => [...prev, fileData]);\n // Add to session uploaded files for the result view\n setSessionUploadedFiles(prev => [...prev, fileData]);\n message.success(`${fileName} 上传成功！`);\n if (onUploadSuccess) {\n onUploadSuccess();\n }\n } else {\n throw new Error(response.data.error || \"上传失败\");\n }\n } catch (error) {\n const msg = error?.response?.data?.error || error.message || \"上传失败\";\n message.error(msg);\n throw new Error(msg);\n }\n }, [dir, api, onUploadSuccess]);\n\n // 处理粘贴的图片/视频\n const handlePastedImage = React.useCallback(async (file) => {\n // 验证文件类型\n const isAllowedType = file.type.startsWith(\"image/\") || file.type.startsWith(\"video/\");\n if (!isAllowedType) {\n const allowedExts = config.allowedExtensions.join(\", \");\n message.error(`不支持的文件类型！仅支持: ${allowedExts}`);\n return;\n }\n\n // 验证文件大小\n const isLtMax = file.size <= config.maxFileSize;\n if (!isLtMax) {\n message.error(`文件大小不能超过${config.maxFileSizeMB}MB！`);\n return;\n }\n\n // 生成文件名\n const timestamp = new Date().getTime();\n const extension = file.type.split(\"/\")[1] || \"unknown\";\n const fileName = `pasted-file-${timestamp}.${extension}`;\n\n // 创建新的File对象，设置文件名\n const renamedFile = new File([file], fileName, { type: file.type });\n // 添加uid\n renamedFile.uid = `pasted-${timestamp}`;\n\n // 添加到队列\n setUploadQueue(prev => [...prev, { uid: renamedFile.uid, name: fileName, progress: 0, status: 'pending' }]);\n\n // 上传文件\n try {\n await uploadLimiter.add(async () => {\n updateQueueItem(renamedFile.uid, { status: 'uploading' });\n await uploadFile(renamedFile, (progress) => {\n updateQueueItem(renamedFile.uid, { progress, status: 'uploading' });\n });\n });\n updateQueueItem(renamedFile.uid, { progress: 100, status: 'success' });\n } catch (error) {\n updateQueueItem(renamedFile.uid, { status: 'error', errorMsg: error.message });\n }\n }, [config, uploadFile]);\n\n // 处理粘贴事件\n const handlePaste = React.useCallback(async (event) => {\n const items = event.clipboardData?.items;\n if (!items) return;\n\n for (let i = 0; i < items.length; i++) {\n const item = items[i];\n if (item.type.startsWith(\"image/\") || item.type.startsWith(\"video/\")) {\n // Clear previous queue for new paste action\n setUploadQueue([]);\n setSessionUploadedFiles([]);\n\n event.preventDefault();\n const file = item.getAsFile();\n if (file) {\n await handlePastedImage(file);\n }\n break;\n }\n }\n }, [handlePastedImage]);\n\n // Handle URL upload\n const handleUrlUpload = React.useCallback(async () => {\n const url = urlInput.trim();\n if (!url) {\n message.warning(\"请输入图片 URL\");\n return;\n }\n\n const imageExtPattern = /\\.(jpg|jpeg|png|gif|webp|bmp|svg)(\\?.*)?$/i;\n if (!imageExtPattern.test(url)) {\n message.warning(\"URL 必须指向图片文件\");\n return;\n }\n\n if (!url.match(/^https?:\\/\\//)) {\n message.warning(\"请输入有效的 HTTP/HTTPS URL\");\n return;\n }\n\n // Clear previous queue\n setUploadQueue([]);\n setSessionUploadedFiles([]);\n\n // Add to queue for UI feedback\n const uid = `url-upload-${Date.now()}`;\n const filename = url.split('/').pop() || 'url-image';\n setUploadQueue([{ uid, name: filename, progress: 0, status: 'uploading' }]);\n\n try {\n const response = await api.post('/upload-url', { url, dir });\n if (response.data?.success) {\n setUploadQueue([{ uid, name: filename, progress: 100, status: 'success' }]);\n setSessionUploadedFiles([response.data.data]);\n message.success(\"上传成功\");\n if (onUploadSuccess) {\n onUploadSuccess();\n }\n } else {\n throw new Error(response.data?.error || '上传失败');\n }\n } catch (error) {\n console.error('URL upload error:', error);\n setUploadQueue([{ uid, name: filename, status: 'error', errorMsg: error.message || '上传出错' }]);\n message.error(error?.response?.data?.error || error.message || 'URL 上传失败');\n }\n\n setUrlInput(\"\");\n }, [urlInput, dir, api, onUploadSuccess]);\n\n // 添加全局粘贴事件监听\n useEffect(() => {\n const handleGlobalPaste = (event) => {\n // 检查是否在输入框中，如果是则不处理粘贴\n const target = event.target;\n if (\n target.tagName === \"INPUT\" ||\n target.tagName === \"TEXTAREA\" ||\n target.contentEditable === \"true\"\n ) {\n return;\n }\n\n handlePaste(event);\n };\n\n document.addEventListener(\"paste\", handleGlobalPaste);\n\n return () => {\n document.removeEventListener(\"paste\", handleGlobalPaste);\n };\n }, [handlePaste]);\n\n const uploadProps = {\n name: \"image\",\n multiple: true,\n accept: config.allowedExtensions\n .map((ext) => {\n const extName = ext.replace(\".\", \"\");\n if (['mp4', 'webm', 'ogg'].includes(extName)) {\n return `video/${extName}`;\n }\n return `image/${extName}`;\n })\n .join(\",\"),\n beforeUpload: (file) => {\n const isAllowed = file.type.startsWith(\"image/\") || file.type.startsWith(\"video/\");\n if (!isAllowed) {\n message.error(\"不支持的文件类型！\");\n return false;\n }\n const isLtMax = file.size <= config.maxFileSize;\n if (!isLtMax) {\n message.error(`文件大小不能超过${config.maxFileSizeMB}MB！`);\n return false;\n }\n return true;\n },\n customRequest: async ({ file, onSuccess, onError }) => {\n const uid = file.uid;\n setUploadQueue(prev => [...prev, { uid, name: file.name, progress: 0, status: 'pending' }]);\n\n try {\n await uploadLimiter.add(async () => {\n updateQueueItem(uid, { status: 'uploading' });\n await uploadFile(file, (progress) => {\n updateQueueItem(uid, { progress, status: 'uploading' });\n });\n });\n updateQueueItem(uid, { progress: 100, status: 'success' });\n onSuccess();\n } catch (error) {\n updateQueueItem(uid, { status: 'error', errorMsg: error.message });\n onError(error);\n }\n },\n };\n\n const copyToClipboard = (text) => {\n if (navigator.clipboard && window.isSecureContext) {\n navigator.clipboard\n .writeText(text)\n .then(() => message.success(\"链接已复制到剪贴板\"))\n .catch(() => message.error(\"复制失败\"));\n return;\n }\n const input = document.createElement(\"input\");\n input.style.position = \"fixed\";\n input.style.top = \"-10000px\";\n input.style.zIndex = \"-999\";\n document.body.appendChild(input);\n input.value = text;\n input.focus();\n input.select();\n try {\n const ok = document.execCommand(\"copy\");\n document.body.removeChild(input);\n if (!ok) {\n message.error(\"复制失败\");\n } else {\n message.success(\"链接已复制到剪贴板\");\n }\n } catch (e) {\n document.body.removeChild(input);\n message.error(\"当前浏览器不支持复制功能\");\n }\n };\n\n const generateLinks = (type) => {\n return sessionUploadedFiles.map(file => {\n const fullUrl = `${window.location.origin}${file.url}`;\n switch (type) {\n case 'markdown':\n return ``;\n case 'html':\n return `\n <AreaChartOutlined /> 流量看板 \n
\n\n \n
\n );\n };\n\n const formatFileSize = (bytes) => {\n if (bytes === 0) return \"0 Bytes\";\n const k = 1024;\n const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\"];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + \" \" + sizes[i];\n };\n\n return (\n \n
\n \n \n 上传图片\n \n\n \n \n \n \n 上传\n \n \n \n\n \n \n \n 支持 {config.allowedFormats} 格式，最大 {config.maxFileSizeMB}MB\n \n \n \n\n {/* Full Page Upload Overlay */}\n {uploadQueue.length > 0 && (\n \n \n {uploadedFiles\n .slice(-6)\n .reverse()\n .map((file, index) => (\n \n {file.originalName}\n \n }\n description={\n \n \n {formatFileSize(file.size)}\n \n \n {file.mimetype}\n \n \n }\n />\n
\n \n ))}\n \n \n )}\n
\n );\n};\n\nexport default UploadComponent;"
},
{
"path": "client/src/index.js",
"content": "import React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App\";\nimport { ConfigProvider } from \"antd\";\nimport zhCN from \"antd/locale/zh_CN\";\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\"));\nroot.render(\n \n
\n 点击或拖拽图片到此区域\n
\n\n
\n )}\n\n {uploadedFiles.length > 0 && (\n \n
\n \n \n 正在上传 ({uploadQueue.filter(i => i.status === 'success').length}/{uploadQueue.length})\n \n
\n \n {uploadQueue.map(item => (\n
\n {!uploading && (\n <>\n {sessionUploadedFiles.length > 0 && \n {item.errorMsg} }\n
\n ))}\n \n {item.name} \n \n {item.status === 'error' ? '失败' : item.status === 'success' ? '完成' : item.status === 'pending' ? '排队中...' : `${item.progress}%`}\n \n
\n \n \n
\n \n )}\n