{
{work.视频链接 && work.视频链接.length > 0 && (
- 作品视频
+ 🎬 作品视频
{work.视频链接.map((videoUrl, index) => (
-
+ handleVideoClick(videoUrl, index)}
+ style={{ cursor: 'pointer' }}
+ >
您的浏览器不支持视频播放
@@ -579,28 +780,9 @@ const WorkDetail = () => {
)}
- {work.图片链接 && work.图片链接.length > 0 && (
-
- 作品截图
-
- {work.图片链接.map((imageUrl, index) => (
- handleImageClick(imageUrl)}
- onError={(e) => {
- e.target.style.display = 'none';
- }}
- />
- ))}
-
-
- )}
-
{work.下载链接 && Object.keys(work.下载链接).length > 0 && (
- 下载作品
+ 📦 下载作品
{Object.entries(work.下载链接).map(([platform, links]) => (
@@ -611,7 +793,7 @@ const WorkDetail = () => {
href={`${getApiBaseUrl()}${link}`}
download
>
- 下载 {platform} 版本
+ 📥 下载 {platform} 版本
))}
@@ -619,6 +801,53 @@ const WorkDetail = () => {
)}
+
+ {work.图片链接 && work.图片链接.length > 0 && (
+
+ 🖼️ 作品截图
+
+ {work.图片链接.map((imageUrl, index) => (
+ handleImageClick(imageUrl, index)}
+ onError={(e) => {
+ e.target.style.display = 'none';
+ }}
+ />
+ ))}
+
+
+ )}
+
+ {/* 模态框 */}
+ {modalOpen && (
+
+
+ ×
+ {modalType === 'image' ? (
+ {
+ console.error('图片加载失败:', modalSrc);
+ }}
+ />
+ ) : modalType === 'video' ? (
+ {
+ console.error('视频加载失败:', modalSrc);
+ }}
+ />
+ ) : null}
+ {modalTitle}
+
+
+ )}
);
};
diff --git a/frontend/src/components/WorkEditor.js b/SmyWorkCollect-Frontend/src/components/WorkEditor.js
similarity index 100%
rename from frontend/src/components/WorkEditor.js
rename to SmyWorkCollect-Frontend/src/components/WorkEditor.js
diff --git a/frontend/src/index.js b/SmyWorkCollect-Frontend/src/index.js
similarity index 100%
rename from frontend/src/index.js
rename to SmyWorkCollect-Frontend/src/index.js
diff --git a/frontend/src/services/adminApi.js b/SmyWorkCollect-Frontend/src/services/adminApi.js
similarity index 100%
rename from frontend/src/services/adminApi.js
rename to SmyWorkCollect-Frontend/src/services/adminApi.js
diff --git a/frontend/src/services/api.js b/SmyWorkCollect-Frontend/src/services/api.js
similarity index 100%
rename from frontend/src/services/api.js
rename to SmyWorkCollect-Frontend/src/services/api.js
diff --git a/SmyWorkCollect-Frontend/start_frontend.bat b/SmyWorkCollect-Frontend/start_frontend.bat
new file mode 100644
index 0000000..cf8b2d9
--- /dev/null
+++ b/SmyWorkCollect-Frontend/start_frontend.bat
@@ -0,0 +1,5 @@
+@echo off
+echo 正在启动树萌芽の作品集前端...
+npm start
+pause
+npm install
diff --git a/SmyWorkCollect-Frontend/test/background.css b/SmyWorkCollect-Frontend/test/background.css
new file mode 100644
index 0000000..04fcd85
--- /dev/null
+++ b/SmyWorkCollect-Frontend/test/background.css
@@ -0,0 +1,192 @@
+/* 彩虹渐变背景样式 */
+
+/* 主背景渐变 */
+body {
+ background: linear-gradient(
+ 135deg,
+ rgba(255, 107, 107, 0.3) 0%,
+ rgba(255, 165, 0, 0.3) 14.28%,
+ rgba(255, 255, 0, 0.25) 28.56%,
+ rgba(50, 205, 50, 0.3) 42.84%,
+ rgba(0, 191, 255, 0.3) 57.12%,
+ rgba(65, 105, 225, 0.3) 71.4%,
+ rgba(147, 112, 219, 0.3) 85.68%,
+ rgba(255, 105, 180, 0.3) 100%
+ );
+ background-size: 400% 400%;
+ animation: rainbowShift 20s ease infinite;
+ min-height: 100vh;
+}
+
+/* 彩虹渐变动画 */
+@keyframes rainbowShift {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+ 100% {
+ background-position: 0% 50%;
+ }
+}
+
+/* 半透明覆盖层，增强可读性 */
+body::before {
+ content: '';
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(255, 255, 255, 0.4);
+ backdrop-filter: blur(2px);
+ z-index: -1;
+ pointer-events: none;
+}
+
+/* 搜索按钮彩虹渐变 */
+.search-btn {
+ background: linear-gradient(
+ 45deg,
+ rgba(255, 107, 107, 0.8),
+ rgba(255, 165, 0, 0.8),
+ rgba(255, 255, 0, 0.7),
+ rgba(50, 205, 50, 0.8),
+ rgba(0, 191, 255, 0.8),
+ rgba(65, 105, 225, 0.8),
+ rgba(147, 112, 219, 0.8)
+ );
+ background-size: 300% 300%;
+ animation: buttonRainbow 12s ease infinite;
+}
+
+@keyframes buttonRainbow {
+ 0%, 100% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+}
+
+/* 结果卡片边框彩虹渐变 */
+.result-card {
+ position: relative;
+ overflow: hidden;
+}
+
+.result-card::before {
+ content: '';
+ position: absolute;
+ top: -2px;
+ left: -2px;
+ right: -2px;
+ bottom: -2px;
+ background: linear-gradient(
+ 45deg,
+ rgba(255, 107, 107, 0.4),
+ rgba(255, 165, 0, 0.4),
+ rgba(255, 255, 0, 0.3),
+ rgba(50, 205, 50, 0.4),
+ rgba(0, 191, 255, 0.4),
+ rgba(65, 105, 225, 0.4),
+ rgba(147, 112, 219, 0.4),
+ rgba(255, 107, 107, 0.4)
+ );
+ background-size: 400% 400%;
+ animation: borderRainbow 15s linear infinite;
+ border-radius: inherit;
+ z-index: -1;
+}
+
+@keyframes borderRainbow {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 100% {
+ background-position: 400% 50%;
+ }
+}
+
+/* 加载动画彩虹效果 */
+.loading-spinner {
+ border: 4px solid rgba(255, 255, 255, 0.3);
+ border-top: 4px solid transparent;
+ border-image: linear-gradient(
+ 45deg,
+ #ff6b6b,
+ #ffa500,
+ #ffff00,
+ #32cd32,
+ #00bfff,
+ #4169e1,
+ #9370db
+ ) 1;
+ animation: spin 1s linear infinite, colorShift 3s ease infinite;
+}
+
+@keyframes colorShift {
+ 0%, 100% {
+ filter: hue-rotate(0deg);
+ }
+ 50% {
+ filter: hue-rotate(180deg);
+ }
+}
+
+/* 链接悬停彩虹效果 */
+.result-link:hover {
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 107, 107, 0.7),
+ rgba(255, 165, 0, 0.7),
+ rgba(255, 255, 0, 0.6),
+ rgba(50, 205, 50, 0.7),
+ rgba(0, 191, 255, 0.7),
+ rgba(65, 105, 225, 0.7),
+ rgba(147, 112, 219, 0.7)
+ );
+ background-size: 200% 200%;
+ animation: linkRainbow 3s ease infinite;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+@keyframes linkRainbow {
+ 0%, 100% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+}
+
+/* 标题彩虹文字效果 */
+.title {
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 107, 107, 0.8),
+ rgba(255, 165, 0, 0.8),
+ rgba(255, 255, 0, 0.7),
+ rgba(50, 205, 50, 0.8),
+ rgba(0, 191, 255, 0.8),
+ rgba(65, 105, 225, 0.8),
+ rgba(147, 112, 219, 0.8)
+ );
+ background-size: 200% 200%;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ animation: titleRainbow 8s ease infinite;
+}
+
+@keyframes titleRainbow {
+ 0%, 100% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+}
\ No newline at end of file
diff --git a/config/settings.json b/config/settings.json
deleted file mode 100644
index 25a1339..0000000
--- a/config/settings.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "网站名字": "树萌芽の作品集",
- "网站描述": "展示个人制作的一些小创意和小项目，欢迎交流讨论",
- "站长": "by-树萌芽",
- "联系邮箱": "3205788256@qq.com",
- "主题颜色": "#81c784",
- "每页作品数量": 9,
- "启用搜索": true,
- "启用分类": true,
- "备案号": "蜀ICP备2025151694号",
- "网站页尾": "树萌芽の作品集 | Copyright © 2025-2025 smy",
- "网站logo": "assets/logo.png"
-}
\ No newline at end of file
diff --git a/frontend/.env.local b/frontend/.env.local
deleted file mode 100644
index a76018d..0000000
--- a/frontend/.env.local
+++ /dev/null
@@ -1 +0,0 @@
-REACT_APP_API_URL=http://127.0.0.1:5000/api
\ No newline at end of file
diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js
deleted file mode 100644
index 9e18060..0000000
--- a/frontend/src/components/Footer.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const FooterContainer = styled.footer`
- background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
- color: white;
- padding: 30px 0 20px;
- margin-top: 40px;
-
- @media (max-width: 768px) {
- padding: 20px 0 15px;
- margin-top: 30px;
- }
-`;
-
-const FooterContent = styled.div`
- max-width: 1200px;
- margin: 0 auto;
- padding: 0 20px;
- text-align: center;
-
- @media (max-width: 768px) {
- padding: 0 10px;
- }
-`;
-
-const FooterText = styled.p`
- font-size: 0.9rem;
- opacity: 0.9;
- margin-bottom: 10px;
-
- @media (max-width: 768px) {
- font-size: 0.8rem;
- margin-bottom: 8px;
- }
-`;
-
-const ContactInfo = styled.div`
- margin-bottom: 15px;
-
- @media (max-width: 768px) {
- margin-bottom: 12px;
- }
-`;
-
-const ContactLink = styled.a`
- color: white;
- text-decoration: none;
- opacity: 0.9;
- transition: opacity 0.3s ease;
-
- &:hover {
- opacity: 1;
- text-decoration: underline;
- }
-`;
-
-const RecordNumber = styled.p`
- font-size: 0.8rem;
- opacity: 0.7;
- margin-bottom: 5px;
-
- @media (max-width: 768px) {
- font-size: 0.75rem;
- }
-`;
-
-const Copyright = styled.p`
- font-size: 0.8rem;
- opacity: 0.7;
-
- @media (max-width: 768px) {
- font-size: 0.75rem;
- }
-`;
-
-const Footer = ({ settings }) => {
- return (
-
-
-
-
- 联系邮箱:
- {settings.联系邮箱}
-
-
-
-
- {settings.备案号 && (
- {settings.备案号}
- )}
-
-
- {settings.网站页尾 || '树萌芽の作品集 | Copyright © 2025 smy'}
-
-
-
- );
-};
-
-export default Footer;
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
deleted file mode 100644
index 8a9f569..0000000
--- a/frontend/src/components/Header.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const HeaderContainer = styled.header`
- background: linear-gradient(135deg, #81c784 0%, #a5d6a7 100%);
- color: white;
- padding: 20px 0;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-`;
-
-const HeaderContent = styled.div`
- max-width: 1200px;
- margin: 0 auto;
- padding: 0 20px;
- text-align: center;
- display: flex;
- flex-direction: column;
- align-items: center;
-
- @media (max-width: 768px) {
- padding: 0 10px;
- }
-`;
-
-const LogoContainer = styled.div`
- margin-bottom: 15px;
-
- @media (max-width: 768px) {
- margin-bottom: 10px;
- }
-`;
-
-const Logo = styled.img`
- height: 60px;
- width: auto;
- border-radius: 8px;
-
- @media (max-width: 768px) {
- height: 50px;
- }
-`;
-
-const Title = styled.h1`
- font-size: 2.5rem;
- margin-bottom: 10px;
- font-weight: 700;
- text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-
- @media (max-width: 768px) {
- font-size: 2rem;
- }
-`;
-
-const Description = styled.p`
- font-size: 1.1rem;
- opacity: 0.9;
- margin-bottom: 5px;
-
- @media (max-width: 768px) {
- font-size: 1rem;
- }
-`;
-
-const Author = styled.p`
- font-size: 0.9rem;
- opacity: 0.8;
-`;
-
-const Header = ({ settings }) => {
- // 动态设置favicon
- React.useEffect(() => {
- if (settings.网站logo) {
- const favicon = document.querySelector('link[rel="icon"]');
- if (favicon) {
- favicon.href = settings.网站logo;
- } else {
- // 如果没有favicon链接，创建一个
- const newFavicon = document.createElement('link');
- newFavicon.rel = 'icon';
- newFavicon.href = settings.网站logo;
- document.head.appendChild(newFavicon);
- }
- }
- }, [settings.网站logo]);
-
- return (
-
-
- {settings.网站logo && (
-
- {
- e.target.style.display = 'none';
- }}
- />
-
- )}
- {settings.网站名字 || '树萌芽の作品集'}
- {settings.网站描述 || '展示我的创意作品和项目'}
- {settings.站长 || '树萌芽'}
-
-
- );
-};
-
-export default Header;
diff --git a/start_frontend.bat b/start_frontend.bat
deleted file mode 100644
index c7b13d5..0000000
--- a/start_frontend.bat
+++ /dev/null
@@ -1,6 +0,0 @@
-@echo off
-echo 启动树萌芽の作品集前端服务...
-cd frontend
-npm start
-pause
-npm install
diff --git a/vercel.json b/vercel.json
deleted file mode 100644
index 1323cda..0000000
--- a/vercel.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "rewrites": [
- {
- "source": "/(.*)",
- "destination": "/index.html"
- }
- ]
-}
diff --git a/初始要求.md b/初始要求.md
deleted file mode 100644
index 284ab29..0000000
--- a/初始要求.md
+++ /dev/null
@@ -1,41 +0,0 @@
-开发一个名为 树萌芽の作品集 网站，具体要求如下：
-
-1. 前端架构：
-- 采用模块化架构避免单个文件过大，使用React最新版开发 放在frontend目录
-- 确保代码结构清晰，便于后期扩展维护
-- 先保证简单展示就可以了
-
-2. 响应式设计：
-- 分别编写手机端和电脑端的专用代码
-- 优先保证手机端用户体验
-
-3. 后端开发：
-- 使用Python 3.13.2开发
-- 后端代码集中存放在独立文件夹backend目录
-- 先保证能正确读取解析已有的作品，完成最核心的作品下载功能
-
-4. 后台管理系统：
-- 开发简洁但功能完整的作品管理界面
-- 功能包括：
- * 上传多平台作品文件(Windows/Android/Linux)
- * 设置作品元数据：名称、版本号、唯一ID
- * 上传作品图片(可选)并设置首页展示图
- * 上传作品视频(可选)
- * 编辑作品信息：作者、标签、分类、介绍
-
-5. 数据存储：
-- 创建setting.json存储网站基础配置
-- 使用work_config.json单独存储每个作品的信息
-
-6. 前端设计：
-- 采用淡绿色清新可爱的配色方案
-- 首页展示作品卡片包含：
- * 作品名称(标题)
- * 简短介绍
- * 标签分类
- * 上传/更新时间
- * 支持平台
- * 版本信息
- * 作者信息
- * 作品截图
-- 实现作品搜索功能@config/ @settings.json @works/ @aicodevartool/ @Windows/ @style.css @主题配色参考/
\ No newline at end of file