chore: sync

2026-03-18 22:09:43 +08:00
parent 19d647c9e1
commit 091d1953e8
29 changed files with 564 additions and 1188 deletions
--- a/SproutWorkCollect-Frontend/package.json
+++ b/SproutWorkCollect-Frontend/package.json
@@ -15,6 +15,7 @@
    "web-vitals": "^2.1.4"
  },
  "scripts": {
+    "dev": "react-scripts start",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
--- a/SproutWorkCollect-Frontend/public/assets/icon.png
+++ b/SproutWorkCollect-Frontend/public/assets/icon.png
--- a/SproutWorkCollect-Frontend/src/App.js
+++ b/SproutWorkCollect-Frontend/src/App.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { HashRouter as Router, Routes, Route } from 'react-router-dom';
 import styled from 'styled-components';
 import Header from './components/Header';
@@ -10,7 +10,7 @@ import CategoryFilter from './components/CategoryFilter';
 import LoadingSpinner from './components/LoadingSpinner';
 import Footer from './components/Footer';
 import Pagination from './components/Pagination';
-import { getWorks, getSettings, getCategories, searchWorks } from './services/api';
+import { getWorks, getSettings, getCategories, searchWorks, getWorkDetail } from './services/api';
 import { BACKGROUND_CONFIG, pickBackgroundImage } from './config/background';

 const AppContainer = styled.div`
@@ -107,12 +107,13 @@ const NoResults = styled.div`
 // 首页组件
 const HomePage = ({ settings }) => {
  const [works, setWorks] = useState([]);
-  const [allWorks, setAllWorks] = useState([]); // 存储所有作品数据
+  const [totalWorks, setTotalWorks] = useState(0);
  const [categories, setCategories] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('');
  const [currentPage, setCurrentPage] = useState(1);
+  const pageSizeInitRef = useRef(false);
  
  // 从设置中获取每页作品数量，默认12（三行四列）
  const itemsPerPage = settings['每页作品数量'] || 12;
@@ -121,17 +122,44 @@ const HomePage = ({ settings }) => {
    loadInitialData();
  }, []);

+  useEffect(() => {
+    if (!pageSizeInitRef.current) {
+      pageSizeInitRef.current = true;
+      return;
+    }
+    setCurrentPage(1);
+    performSearch(searchQuery, selectedCategory, 1);
+  }, [itemsPerPage]);
+
+  const fetchWorksByIds = async (ids) => {
+    if (!Array.isArray(ids) || ids.length === 0) return [];
+    const results = await Promise.all(
+      ids.map(async (id) => {
+        try {
+          const detail = await getWorkDetail(id);
+          return detail?.data || null;
+        } catch (error) {
+          console.error('加载作品详情失败:', id, error);
+          return null;
+        }
+      })
+    );
+    return results.filter(Boolean);
+  };
+
  const loadInitialData = async () => {
    try {
      setLoading(true);
      const [worksData, categoriesData] = await Promise.all([
-        getWorks(),
+        getWorks(1, itemsPerPage),
        getCategories()
      ]);
-      
-      const allWorksData = worksData.data || [];
-      setAllWorks(allWorksData);
-      setWorks(allWorksData);
+      const rawData = worksData.data || [];
+      const resolvedWorks = Array.isArray(rawData) && typeof rawData[0] === 'string'
+        ? await fetchWorksByIds(rawData)
+        : rawData;
+      setWorks(resolvedWorks);
+      setTotalWorks(worksData.total || 0);
      setCategories(categoriesData.data || []);
      setCurrentPage(1); // 重置到第一页
    } catch (error) {
@@ -143,27 +171,36 @@ const HomePage = ({ settings }) => {

  const handleSearch = async (query) => {
    setSearchQuery(query);
-    await performSearch(query, selectedCategory);
+    setCurrentPage(1);
+    await performSearch(query, selectedCategory, 1);
  };

  const handleCategoryChange = async (category) => {
    setSelectedCategory(category);
-    await performSearch(searchQuery, category);
+    setCurrentPage(1);
+    await performSearch(searchQuery, category, 1);
  };

-  const performSearch = async (query, category) => {
+  const performSearch = async (query, category, page) => {
    try {
      setLoading(true);
      if (query || category) {
-        const searchData = await searchWorks(query, category);
-        setAllWorks(searchData.data || []);
-        setWorks(searchData.data || []);
+        const searchData = await searchWorks(query, category, page, itemsPerPage);
+        const rawData = searchData.data || [];
+        const resolvedWorks = Array.isArray(rawData) && typeof rawData[0] === 'string'
+          ? await fetchWorksByIds(rawData)
+          : rawData;
+        setWorks(resolvedWorks);
+        setTotalWorks(searchData.total || 0);
      } else {
-        const worksData = await getWorks();
-        setAllWorks(worksData.data || []);
-        setWorks(worksData.data || []);
+        const worksData = await getWorks(page, itemsPerPage);
+        const rawData = worksData.data || [];
+        const resolvedWorks = Array.isArray(rawData) && typeof rawData[0] === 'string'
+          ? await fetchWorksByIds(rawData)
+          : rawData;
+        setWorks(resolvedWorks);
+        setTotalWorks(worksData.total || 0);
      }
-      setCurrentPage(1); // 搜索后重置到第一页
    } catch (error) {
      console.error('搜索失败:', error);
    } finally {
@@ -172,14 +209,13 @@ const HomePage = ({ settings }) => {
  };

  // 分页相关的计算
-  const totalPages = Math.ceil(works.length / itemsPerPage);
-  const startIndex = (currentPage - 1) * itemsPerPage;
-  const endIndex = startIndex + itemsPerPage;
-  const currentWorks = works.slice(startIndex, endIndex);
+  const totalPages = Math.ceil(totalWorks / itemsPerPage);
+  const currentWorks = works;

  // 处理页面变化
  const handlePageChange = (page) => {
    setCurrentPage(page);
+    performSearch(searchQuery, selectedCategory, page);
    // 滚动到顶部
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
@@ -207,7 +243,7 @@ const HomePage = ({ settings }) => {
          <Pagination
            currentPage={currentPage}
            totalPages={totalPages}
-            totalItems={works.length}
+            totalItems={totalWorks}
            itemsPerPage={itemsPerPage}
            onPageChange={handlePageChange}
          />
--- a/SproutWorkCollect-Frontend/src/components/AdminPanel.js
+++ b/SproutWorkCollect-Frontend/src/components/AdminPanel.js
@@ -272,7 +272,7 @@ const AdminPanel = () => {
            + 添加新作品
          </Button>
          <Button variant="secondary" onClick={handleBackToHome}>
-            返回首页
+            返回
          </Button>
        </ButtonGroup>
      </AdminHeader>
--- a/SproutWorkCollect-Frontend/src/components/Pagination.js
+++ b/SproutWorkCollect-Frontend/src/components/Pagination.js
@@ -124,7 +124,7 @@ const Pagination = ({
        onClick={() => handlePageClick(currentPage - 1)}
        disabled={currentPage === 1}
      >
-        ← 上一页
+        上一页
      </PaginationButton>

      {/* 页码按钮 */}
@@ -147,7 +147,7 @@ const Pagination = ({
        onClick={() => handlePageClick(currentPage + 1)}
        disabled={currentPage === totalPages}
      >
-        下一页 →
+        下一页
      </PaginationButton>

      {/* 页面信息 */}
--- a/SproutWorkCollect-Frontend/src/components/WorkCard.js
+++ b/SproutWorkCollect-Frontend/src/components/WorkCard.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
-import { getApiOrigin } from '../config/apiBase';
+import { getApiOrigin, resolveMediaUrl, isAbsoluteUrl } from '../config/apiBase';
 import { getGlassOpacity } from '../config/background';

 const glassOpacity = getGlassOpacity();
@@ -160,16 +160,23 @@ const WorkCard = ({ work }) => {
  };
  
  const getCoverImage = () => {
+    if (work.作品封面 && isAbsoluteUrl(work.作品封面)) {
+      return work.作品封面;
+    }
    if (work.作品封面 && work.图片链接) {
      const coverIndex = work.作品截图?.indexOf(work.作品封面);
      if (coverIndex >= 0 && work.图片链接[coverIndex]) {
-        return `${getApiOrigin()}${work.图片链接[coverIndex]}`;
+        return resolveMediaUrl(work.图片链接[coverIndex]);
      }
    }
    return null;
  };

  const handleCardClick = () => {
+    if (!work?.作品ID) {
+      console.warn('作品ID缺失，无法进入详情页', work);
+      return;
+    }
    navigate(`/work/${work.作品ID}`);
  };

@@ -244,7 +251,7 @@ const WorkCard = ({ work }) => {
        </StatsContainer>
        
        <ViewDetailText>
-          🌟 点击查看详情 →
+          点击查看详情
        </ViewDetailText>
      </CardContent>
    </Card>
--- a/SproutWorkCollect-Frontend/src/components/WorkDetail.js
+++ b/SproutWorkCollect-Frontend/src/components/WorkDetail.js
@@ -3,13 +3,17 @@ import { useParams, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import LoadingSpinner from './LoadingSpinner';
 import { getWorkDetail, likeWork } from '../services/api';
-import { getApiOrigin } from '../config/apiBase';
+import { getApiOrigin, resolveMediaUrl } from '../config/apiBase';

 const DetailContainer = styled.div`
-  max-width: 1000px;
+  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
+
+  @media (min-width: 1400px) {
+    max-width: 1320px;
+  }
  
  @media (max-width: 768px) {
    padding: 10px;
@@ -104,6 +108,18 @@ const WorkDescription = styled.p`
  }
 `;

+const UpdateNotice = styled.div`
+  background: #f7f7f7;
+  border: 1px solid #eee;
+  border-radius: 10px;
+  padding: 12px 14px;
+  color: #333;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  margin: -8px 0 20px 0;
+  white-space: pre-line;
+`;
+
 const TagsContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
@@ -312,6 +328,7 @@ const StatCard = styled.div`
 const StatIcon = styled.div`
  font-size: 1.5rem;
  margin-bottom: 8px;
+  color: #111;
  
  @media (max-width: 768px) {
    font-size: 1.2rem;
@@ -319,6 +336,66 @@ const StatIcon = styled.div`
  }
 `;

+const StatSvg = styled.svg`
+  width: 22px;
+  height: 22px;
+  display: block;
+  margin: 0 auto;
+`;
+
+const IconEye = () => (
+  <StatSvg viewBox="0 0 24 24" aria-hidden="true" role="img">
+    <path
+      d="M2 12s4-6 10-6 10 6 10 6-4 6-10 6S2 12 2 12z"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" strokeWidth="2" />
+  </StatSvg>
+);
+
+const IconDownload = () => (
+  <StatSvg viewBox="0 0 24 24" aria-hidden="true" role="img">
+    <path
+      d="M12 3v11m0 0l4-4m-4 4l-4-4M5 21h14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </StatSvg>
+);
+
+const IconHeart = () => (
+  <StatSvg viewBox="0 0 24 24" aria-hidden="true" role="img">
+    <path
+      d="M20.8 8.5c0 5.1-8.8 10.5-8.8 10.5S3.2 13.6 3.2 8.5c0-2.5 2-4.5 4.5-4.5 1.7 0 3.2.9 3.9 2.3.7-1.4 2.2-2.3 3.9-2.3 2.5 0 4.5 2 4.5 4.5z"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </StatSvg>
+);
+
+const IconRefresh = () => (
+  <StatSvg viewBox="0 0 24 24" aria-hidden="true" role="img">
+    <path
+      d="M21 12a9 9 0 1 1-3-6.7M21 4v6h-6"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </StatSvg>
+);
+
 const StatValue = styled.div`
  font-size: 1.4rem;
  font-weight: 700;
@@ -514,6 +591,11 @@ const WorkDetail = () => {
  const [modalTitle, setModalTitle] = useState('');

  useEffect(() => {
+    if (!workId || workId === 'undefined') {
+      setLoading(false);
+      setError('作品ID无效');
+      return;
+    }
    loadWorkDetail();
  }, [workId]);

@@ -547,7 +629,7 @@ const WorkDetail = () => {
  // 打开图片模态框
  const handleImageClick = (imageUrl, index) => {
    setModalType('image');
-    setModalSrc(`${getApiOrigin()}${imageUrl}`);
+    setModalSrc(resolveMediaUrl(imageUrl));
    setModalTitle(`${work.作品作品} - 截图 ${index + 1}`);
    setModalOpen(true);
  };
@@ -555,7 +637,7 @@ const WorkDetail = () => {
  // 打开视频模态框
  const handleVideoClick = (videoUrl, index) => {
    setModalType('video');
-    setModalSrc(`${getApiOrigin()}${videoUrl}`);
+    setModalSrc(resolveMediaUrl(videoUrl));
    setModalTitle(`${work.作品作品} - 视频 ${index + 1}`);
    setModalOpen(true);
  };
@@ -634,7 +716,7 @@ const WorkDetail = () => {
    return (
      <DetailContainer>
        <BackButton onClick={() => navigate('/')}>
-          返回首页
+          返回
        </BackButton>
        <ErrorMessage>{error}</ErrorMessage>
      </DetailContainer>
@@ -645,7 +727,7 @@ const WorkDetail = () => {
    return (
      <DetailContainer>
        <BackButton onClick={() => navigate('/')}>
-          返回首页
+          返回
        </BackButton>
        <ErrorMessage>作品不存在</ErrorMessage>
      </DetailContainer>
@@ -655,7 +737,7 @@ const WorkDetail = () => {
  return (
    <DetailContainer>
      <BackButton onClick={() => navigate('/')}>
-        ← 返回首页
+        返回
      </BackButton>
      
      <WorkHeader>
@@ -680,6 +762,9 @@ const WorkDetail = () => {
        </WorkMeta>
        
        <WorkDescription>{work.作品描述}</WorkDescription>
+        {work.更新公告 && work.更新公告.trim() && (
+          <UpdateNotice>{work.更新公告}</UpdateNotice>
+        )}
        
        {work.作品标签 && work.作品标签.length > 0 && (
          <TagsContainer>
@@ -700,22 +785,22 @@ const WorkDetail = () => {
        {/* 统计数据 */}
        <StatsSection>
          <StatCard>
-            <StatIcon>👁️‍🗨️</StatIcon>
+            <StatIcon><IconEye /></StatIcon>
            <StatValue>{work.作品浏览量 || 0}</StatValue>
            <StatLabel>浏览量</StatLabel>
          </StatCard>
          <StatCard>
-            <StatIcon>📥</StatIcon>
+            <StatIcon><IconDownload /></StatIcon>
            <StatValue>{work.作品下载量 || 0}</StatValue>
            <StatLabel>下载量</StatLabel>
          </StatCard>
          <StatCard>
-            <StatIcon>💖</StatIcon>
+            <StatIcon><IconHeart /></StatIcon>
            <StatValue>{work.作品点赞量 || 0}</StatValue>
            <StatLabel>点赞量</StatLabel>
          </StatCard>
          <StatCard>
-            <StatIcon>🔄</StatIcon>
+            <StatIcon><IconRefresh /></StatIcon>
            <StatValue>{work.作品更新次数 || 0}</StatValue>
            <StatLabel>更新次数</StatLabel>
          </StatCard>
@@ -732,7 +817,7 @@ const WorkDetail = () => {
          }}
        >
          <span>💖</span>
-          {liking ? '💫 点赞中...' : '点赞作品'}
+          {liking ? '💫 点赞中...' : '点赞'}
          {likeMessage && (
            <div style={{
              position: 'absolute',
@@ -762,7 +847,7 @@ const WorkDetail = () => {
                onClick={() => handleVideoClick(videoUrl, index)}
                style={{ cursor: 'pointer' }}
              >
-                <source src={`${getApiOrigin()}${videoUrl}`} type="video/mp4" />
+                <source src={resolveMediaUrl(videoUrl)} type="video/mp4" />
                您的浏览器不支持视频播放
              </VideoPlayer>
            </VideoContainer>
@@ -826,7 +911,7 @@ const WorkDetail = () => {
            {work.图片链接.map((imageUrl, index) => (
              <WorkImage
                key={index}
-                src={`${getApiOrigin()}${imageUrl}`}
+                src={resolveMediaUrl(imageUrl)}
                alt={`${work.作品作品} 截图 ${index + 1}`}
                onClick={() => handleImageClick(imageUrl, index)}
                onError={(e) => {
--- a/SproutWorkCollect-Frontend/src/components/WorkEditor.js
+++ b/SproutWorkCollect-Frontend/src/components/WorkEditor.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { adminCreateWork, adminUpdateWork, adminUploadFile, adminDeleteFile } from '../services/adminApi';
 import UploadProgressModal from './UploadProgressModal';
-import { getApiOrigin } from '../config/apiBase';
+import { getApiOrigin, isAbsoluteUrl } from '../config/apiBase';

 const EditorContainer = styled.div`
  max-width: 1000px;
@@ -449,6 +449,7 @@ const WorkEditor = ({ work, onClose }) => {
    作品ID: '',
    作品作品: '',
    作品描述: '',
+    更新公告: '',
    作者: '树萌芽',
    作品版本号: '1.0.0',
    作品分类: '其他',
@@ -469,6 +470,8 @@ const WorkEditor = ({ work, onClose }) => {
  const [uploading, setUploading] = useState(false);
  const [showUploadModal, setShowUploadModal] = useState(false);
  const [newExternalLinks, setNewExternalLinks] = useState({});
+  const [newImageUrl, setNewImageUrl] = useState('');
+  const [newVideoUrl, setNewVideoUrl] = useState('');

  const platforms = ['Windows', 'Android', 'Linux', 'iOS', 'macOS'];
  const categories = ['游戏', '工具', '应用', '网站', '其他'];
@@ -477,6 +480,7 @@ const WorkEditor = ({ work, onClose }) => {
    if (work) {
      setFormData({
        ...work,
+        更新公告: work.更新公告 || '',
        作品标签: work.作品标签 || [],
        支持平台: work.支持平台 || [],
        作品截图: work.作品截图 || [],
@@ -558,6 +562,48 @@ const WorkEditor = ({ work, onClose }) => {
    setSuccess(`已添加 ${platform} 外部下载链接`);
  };

+  const handleAddExternalImage = () => {
+    const url = newImageUrl.trim();
+    if (!url) {
+      setError('图片链接不能为空');
+      return;
+    }
+    if (!isAbsoluteUrl(url)) {
+      setError('图片链接需要以 http 或 https 开头');
+      return;
+    }
+    if (formData.作品截图.includes(url)) {
+      setError('该图片链接已存在');
+      return;
+    }
+    const next = [...formData.作品截图, url];
+    handleInputChange('作品截图', next);
+    if (!formData.作品封面) {
+      handleInputChange('作品封面', url);
+    }
+    setNewImageUrl('');
+    setSuccess('外链图片已添加');
+  };
+
+  const handleAddExternalVideo = () => {
+    const url = newVideoUrl.trim();
+    if (!url) {
+      setError('视频链接不能为空');
+      return;
+    }
+    if (!isAbsoluteUrl(url)) {
+      setError('视频链接需要以 http 或 https 开头');
+      return;
+    }
+    if (formData.作品视频.includes(url)) {
+      setError('该视频链接已存在');
+      return;
+    }
+    handleInputChange('作品视频', [...formData.作品视频, url]);
+    setNewVideoUrl('');
+    setSuccess('外链视频已添加');
+  };
+
  const handleDeleteExternalLink = (platform, index) => {
    const list = Array.isArray(formData.外部下载?.[platform]) ? formData.外部下载[platform] : [];
    const next = { ...(formData.外部下载 || {}) };
@@ -702,6 +748,20 @@ const WorkEditor = ({ work, onClose }) => {
      return;
    }

+    if ((fileType === 'image' || fileType === 'video') && isAbsoluteUrl(filename)) {
+      if (fileType === 'image') {
+        const newImages = formData.作品截图.filter(img => img !== filename);
+        handleInputChange('作品截图', newImages);
+        if (formData.作品封面 === filename) {
+          handleInputChange('作品封面', newImages[0] || '');
+        }
+      } else {
+        handleInputChange('作品视频', formData.作品视频.filter(video => video !== filename));
+      }
+      setSuccess(`外链已移除: ${filename}`);
+      return;
+    }
+
    setLoading(true);
    try {
      const response = await adminDeleteFile(formData.作品ID, fileType, filename, platform);
@@ -769,12 +829,6 @@ const WorkEditor = ({ work, onClose }) => {

      if (response.success) {
        setSuccess(work ? '作品更新成功' : '作品创建成功');
-        // 如果是创建新作品，不要自动关闭，让用户可以继续上传文件
-        if (work) {
-          setTimeout(() => {
-            onClose();
-          }, 1500);
-        }
      } else {
        setError(response.message);
      }
@@ -879,6 +933,17 @@ const WorkEditor = ({ work, onClose }) => {
          />
        </FormGroup>

+        <FormGroup style={{ marginTop: '20px' }}>
+          <Label htmlFor="updateNotice">更新公告</Label>
+          <TextArea
+            id="updateNotice"
+            value={formData.更新公告}
+            onChange={(e) => handleInputChange('更新公告', e.target.value)}
+            placeholder="可选：展示在详情页简介下方的更新说明"
+            rows={3}
+          />
+        </FormGroup>
+
        <FormGroup style={{ marginTop: '20px' }}>
          <Label>作品标签</Label>
          <TagsInput>
@@ -946,6 +1011,26 @@ const WorkEditor = ({ work, onClose }) => {
                {uploading ? '上传中...' : '选择图片 (支持多选)'}
              </Button>
            </FileUploadSection>
+
+            <ExternalLinksContainer>
+              <h4 style={{ marginTop: '18px', marginBottom: '8px', color: '#2e7d32' }}>
+                外链图片（URL）
+              </h4>
+              <p style={{ fontSize: '0.85rem', color: '#666', marginBottom: '8px' }}>
+                支持 http/https 图片链接，可与本地上传混用。
+              </p>
+              <ExternalLinkRow>
+                <Input
+                  type="url"
+                  value={newImageUrl}
+                  onChange={(e) => setNewImageUrl(e.target.value)}
+                  placeholder="https://example.com/image.png"
+                />
+                <SmallButton type="button" onClick={handleAddExternalImage}>
+                  添加图片链接
+                </SmallButton>
+              </ExternalLinkRow>
+            </ExternalLinksContainer>
            
            {formData.作品截图.length > 0 && (
              <div>
@@ -967,7 +1052,7 @@ const WorkEditor = ({ work, onClose }) => {
                        ×
                      </FileDeleteButton>
                      <FilePreview
-                        src={`${getApiOrigin()}/api/image/${formData.作品ID}/${image}`}
+                        src={isAbsoluteUrl(image) ? image : `${getApiOrigin()}/api/image/${formData.作品ID}/${image}`}
                        alt={image}
                        onError={(e) => {
                          e.target.style.display = 'none';
@@ -1020,6 +1105,26 @@ const WorkEditor = ({ work, onClose }) => {
                {uploading ? '上传中...' : '选择视频'}
              </Button>
            </FileUploadSection>
+
+            <ExternalLinksContainer>
+              <h4 style={{ marginTop: '18px', marginBottom: '8px', color: '#2e7d32' }}>
+                外链视频（URL）
+              </h4>
+              <p style={{ fontSize: '0.85rem', color: '#666', marginBottom: '8px' }}>
+                支持 http/https 视频链接，可与本地上传混用。
+              </p>
+              <ExternalLinkRow>
+                <Input
+                  type="url"
+                  value={newVideoUrl}
+                  onChange={(e) => setNewVideoUrl(e.target.value)}
+                  placeholder="https://example.com/video.mp4"
+                />
+                <SmallButton type="button" onClick={handleAddExternalVideo}>
+                  添加视频链接
+                </SmallButton>
+              </ExternalLinkRow>
+            </ExternalLinksContainer>
            
            {formData.作品视频.length > 0 && (
              <FileList>
--- a/SproutWorkCollect-Frontend/src/config/apiBase.js
+++ b/SproutWorkCollect-Frontend/src/config/apiBase.js
@@ -36,3 +36,10 @@ export const getApiBaseUrl = () => {
 };

 export const getApiOrigin = () => stripApiSuffix(getApiBaseUrl());
+
+export const isAbsoluteUrl = (value) => hasHttpProtocol(String(value || ''));
+
+export const resolveMediaUrl = (value) => {
+  if (!value) return value;
+  return isAbsoluteUrl(value) ? value : `${getApiOrigin()}${value}`;
+};
--- a/SproutWorkCollect-Frontend/src/services/api.js
+++ b/SproutWorkCollect-Frontend/src/services/api.js
@@ -36,9 +36,18 @@ export const getSettings = async () => {
  return response.data;
 };

-// 获取所有作品
-export const getWorks = async () => {
-  const response = await api.get('/works');
+const buildPagingParams = (page, pageSize) => {
+  const params = {};
+  if (page) params.page = page;
+  if (pageSize) params.page_size = pageSize;
+  return params;
+};
+
+// 获取所有作品（支持分页）
+export const getWorks = async (page = null, pageSize = null) => {
+  const response = await api.get('/works', {
+    params: buildPagingParams(page, pageSize),
+  });
  return response.data;
 };

@@ -49,10 +58,12 @@ export const getWorkDetail = async (workId) => {
 };

 // 搜索作品
-export const searchWorks = async (query = '', category = '') => {
+export const searchWorks = async (query = '', category = '', page = null, pageSize = null) => {
  const params = new URLSearchParams();
  if (query) params.append('q', query);
  if (category) params.append('category', category);
+  if (page) params.append('page', page);
+  if (pageSize) params.append('page_size', pageSize);
  
  const response = await api.get(`/search?${params.toString()}`);
  return response.data;