From ebda30c7cf5ba61ba6885e0cab3b017bf7d6710d Mon Sep 17 00:00:00 2001 From: Henry Li Date: Sat, 24 Jan 2026 18:01:27 +0800 Subject: [PATCH] feat: support static website --- frontend/package.json | 2 + frontend/pnpm-lock.yaml | 3 + .../thread.json | 805 ++++++++ .../outputs/jiangsu-football/css/style.css | 1838 +++++++++++++++++ .../outputs/jiangsu-football/favicon.html | 1 + .../outputs/jiangsu-football/index.html | 365 ++++ .../outputs/jiangsu-football/js/data.js | 802 +++++++ .../outputs/jiangsu-football/js/main.js | 618 ++++++ frontend/scripts/save-demo.js | 53 + frontend/src/app/mock/api/mcp/config/route.ts | 26 + frontend/src/app/mock/api/models/route.ts | 30 + frontend/src/app/mock/api/skills/route.ts | 70 + .../artifacts/[[...artifact_path]]/route.ts | 41 + .../api/threads/[thread_id]/history/route.ts | 20 + .../src/app/mock/api/threads/search/route.ts | 27 + .../app/workspace/chats/[thread_id]/page.tsx | 7 + frontend/src/app/workspace/chats/page.tsx | 8 +- frontend/src/app/workspace/page.tsx | 15 + .../components/ai-elements/prompt-input.tsx | 2 + frontend/src/components/landing/hero.tsx | 2 +- .../progressive-skills-animation.tsx | 57 +- .../landing/sections/sandbox-section.tsx | 7 +- .../landing/sections/skills-section.tsx | 4 +- .../landing/sections/whats-new-section.tsx | 51 +- frontend/src/components/ui/magic-bento.tsx | 48 +- frontend/src/components/ui/terminal.tsx | 2 +- .../src/components/workspace/input-box.tsx | 5 + .../components/workspace/recent-chat-list.tsx | 53 +- .../workspace/settings/settings-dialog.tsx | 1 - .../settings/skill-settings-page.tsx | 2 + .../workspace/settings/tool-settings-page.tsx | 2 + .../components/workspace/workspace-header.tsx | 4 +- frontend/src/core/config/index.ts | 2 - frontend/src/core/i18n/locales/en-US.ts | 2 + frontend/src/core/i18n/locales/types.ts | 2 + frontend/src/core/i18n/locales/zh-CN.ts | 4 +- 36 files changed, 4889 insertions(+), 92 deletions(-) create mode 100644 frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/thread.json create mode 100644 frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/css/style.css create mode 100644 frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/favicon.html create mode 100644 frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/index.html create mode 100644 frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/js/data.js create mode 100644 frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/js/main.js create mode 100644 frontend/scripts/save-demo.js create mode 100644 frontend/src/app/mock/api/mcp/config/route.ts create mode 100644 frontend/src/app/mock/api/models/route.ts create mode 100644 frontend/src/app/mock/api/skills/route.ts create mode 100644 frontend/src/app/mock/api/threads/[thread_id]/artifacts/[[...artifact_path]]/route.ts create mode 100644 frontend/src/app/mock/api/threads/[thread_id]/history/route.ts create mode 100644 frontend/src/app/mock/api/threads/search/route.ts rename frontend/src/components/landing/{components => }/progressive-skills-animation.tsx (93%) diff --git a/frontend/package.json b/frontend/package.json index a982acd..05a2a26 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,6 +4,7 @@ "private": true, "type": "module", "scripts": { + "demo:save": "node scripts/save-demo.js", "build": "next build", "check": "next lint && tsc --noEmit", "dev": "next dev --turbo", @@ -56,6 +57,7 @@ "cmdk": "^1.1.1", "codemirror": "^6.0.2", "date-fns": "^4.1.0", + "dotenv": "^17.2.3", "embla-carousel-react": "^8.6.0", "gsap": "^3.13.0", "hast": "^1.0.0", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 5ac8e1e..7eff819 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -128,6 +128,9 @@ importers: date-fns: specifier: ^4.1.0 version: 4.1.0 + dotenv: + specifier: ^17.2.3 + version: 17.2.3 embla-carousel-react: specifier: ^8.6.0 version: 8.6.0(react@19.2.3) diff --git a/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/thread.json b/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/thread.json new file mode 100644 index 0000000..4bdfa6e --- /dev/null +++ b/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/thread.json @@ -0,0 +1,805 @@ +{ + "values": { + "messages": [ + { + "content": [ + { + "type": "text", + "text": "为苏超联赛第一季做一个酷炫的足球网站吧！" + } + ], + "additional_kwargs": {}, + "response_metadata": {}, + "type": "human", + "name": null, + "id": "83dfd9e0-19b9-4248-8770-6f67d90547f8" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "用户想要为\"苏超联赛第一季\"创建一个酷炫的足球网站。这里有一些需要澄清的地方：\n\n1. \"苏超联赛\"可能指的是\"苏格兰足球超级联赛\"（Scottish Premiership），但用户说的是\"第一季\"，这有点奇怪，因为苏超已经存在很多年了。也许用户指的是一个新赛季、一个新联赛，或者是一个特定的锦标赛。\n\n2. \"酷炫的足球网站\"这个描述比较模糊——是指一个展示联赛信息的静态网站？一个包含赛程、积分榜的动态网站？还是需要交互功能？用户可能想要一个展示联赛信息、球队、球员、赛程、积分榜等的网站。\n\n3. 设计方面：\"酷炫\"可能意味着现代、视觉冲击力强、动画效果等。\n\n4. 功能范围：需要明确是静态网站还是需要后端功能（比如实时比分更新）。\n\n我需要先澄清一下。不过，也许我可以先查看一下技能系统，看看是否有相关的技能可以借鉴。有一个\"frontend-design\"技能，可能适用于创建网站界面。但首先，我需要明确具体要求。\n\n让我先问问用户，澄清一下需求。我需要了解网站的具体用途、功能需求以及目标用户。同时，也要确认一下\"苏超联赛第一季\"具体指什么。" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd121-59e4-7470-bd61-24af8875929d", + "tool_calls": [ + { + "name": "ask_clarification", + "args": { + "question": "您能详细说明一下“苏超联赛第一季”具体指什么吗？是指苏格兰足球超级联赛的新赛季，还是某个特定的锦标赛或活动？另外，您希望这个网站包含哪些具体功能？比如：赛程表、积分榜、球队信息、球员数据、新闻动态、实时比分等。还有，您偏好哪种设计风格（现代、简约、炫酷动画等）？", + "clarification_type": "missing_info", + "context": "为了创建一个符合您期望的足球网站，我需要明确联赛的具体含义、网站的功能需求以及设计风格偏好。" + }, + "id": "call_pfqwz96vtgfhmdcuklsft7e9", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "❓ 为了创建一个符合您期望的足球网站，我需要明确联赛的具体含义、网站的功能需求以及设计风格偏好。\n\n您能详细说明一下“苏超联赛第一季”具体指什么吗？是指苏格兰足球超级联赛的新赛季，还是某个特定的锦标赛或活动？另外，您希望这个网站包含哪些具体功能？比如：赛程表、积分榜、球队信息、球员数据、新闻动态、实时比分等。还有，您偏好哪种设计风格（现代、简约、炫酷动画等）？", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "ask_clarification", + "id": "f3bc3d66-b12f-4fa5-b3f1-63e8440de101", + "tool_call_id": "call_pfqwz96vtgfhmdcuklsft7e9", + "artifact": null, + "status": "success" + }, + { + "content": "❓ 为了创建一个符合您期望的足球网站，我需要明确联赛的具体含义、网站的功能需求以及设计风格偏好。\n\n您能详细说明一下“苏超联赛第一季”具体指什么吗？是指苏格兰足球超级联赛的新赛季，还是某个特定的锦标赛或活动？另外，您希望这个网站包含哪些具体功能？比如：赛程表、积分榜、球队信息、球员数据、新闻动态、实时比分等。还有，您偏好哪种设计风格（现代、简约、炫酷动画等）？", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "ai", + "name": null, + "id": "00ff6592-68e1-444d-93d2-4ff3a4d6b2d2", + "tool_calls": [], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "", + "additional_kwargs": {}, + "response_metadata": { + "finish_reason": "stop", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd121-a4eb-7910-a888-9d77212a15cb", + "tool_calls": [], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": [ + { + "type": "text", + "text": "好像叫江苏城市足球联赛2025赛季，其他你决定" + } + ], + "additional_kwargs": {}, + "response_metadata": {}, + "type": "human", + "name": null, + "id": "a9c98762-488c-4475-8742-f56e377f797c" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "用户澄清了\"苏超联赛第一季\"指的是\"江苏城市足球联赛2025赛季\"。这是一个地方性的足球联赛。用户让我决定其他细节。\n\n我需要创建一个酷炫的足球网站。既然用户让我决定，我应该设计一个现代、动态的网站，包含足球联赛网站常见的核心功能。\n\n我应该先加载frontend-design技能，因为这个任务涉及创建前端界面。让我先查看一下这个技能。" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd122-8984-7a90-ba69-6cb5c478f717", + "tool_calls": [ + { + "name": "read_file", + "args": { + "description": "加载前端设计技能来创建足球网站", + "path": "/mnt/skills/public/frontend-design" + }, + "id": "call_xz00wxwzx6kqagwkibs4ecmr", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "Error: headers: {'server': 'nginx/1.18.0 (Ubuntu)', 'date': 'Sun, 18 Jan 2026 12:44:30 GMT', 'content-type': 'application/json', 'content-length': '147', 'connection': 'keep-alive'}, status_code: 500, body: {'success': False, 'message': \"Failed to read file: Failed to read file: [Errno 21] Is a directory: '/mnt/skills/public/frontend-design'\", 'data': None}", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "read_file", + "id": "76235aeb-71c5-45f7-8dc8-39927a870491", + "tool_call_id": "call_xz00wxwzx6kqagwkibs4ecmr", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "看起来这个技能路径是一个目录。让我先查看一下这个目录的内容。" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd122-b110-7171-92a9-c108ffaeb471", + "tool_calls": [ + { + "name": "ls", + "args": { + "description": "查看前端设计技能目录结构", + "path": "/mnt/skills/public/frontend-design" + }, + "id": "call_2q0yrauhgidncl2yf37ny6hu", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "/mnt/skills/public/frontend-design\n/mnt/skills/public/frontend-design/SKILL.md\n/mnt/skills/public/frontend-design/LICENSE.txt", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "ls", + "id": "70861abb-bb61-4f98-86d8-20914d2ad05f", + "tool_call_id": "call_2q0yrauhgidncl2yf37ny6hu", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "现在我需要读取技能文件来了解如何创建前端设计。让我先读取SKILL.md文件。" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd122-c4ee-7983-a0f7-ae570eb2bbd8", + "tool_calls": [ + { + "name": "read_file", + "args": { + "description": "读取前端设计技能文档", + "path": "/mnt/skills/public/frontend-design/SKILL.md" + }, + "id": "call_alvjuc6gn9wbayfixefk6swk", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "---\nname: frontend-design\ndescription: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.\nlicense: Complete terms in LICENSE.txt\n---\n\nThis skill guides creation of distinctive, production-grade frontend interfaces that avoid generic \"AI slop\" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.\n\nThe user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.\n\n## Design Thinking\n\nBefore coding, understand the context and commit to a BOLD aesthetic direction:\n- **Purpose**: What problem does this interface solve? Who uses it?\n- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.\n- **Constraints**: Technical requirements (framework, performance, accessibility).\n- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?\n\n**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.\n\nThen implement working code (HTML/CSS/JS, React, Vue, etc.) that is:\n- Production-grade and functional\n- Visually striking and memorable\n- Cohesive with a clear aesthetic point-of-view\n- Meticulously refined in every detail\n\n## Frontend Aesthetics Guidelines\n\nFocus on:\n- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.\n- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.\n- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.\n- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.\n- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.\n\nNEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.\n\nInterpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.\n\n**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.\n\nRemember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.\n", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "read_file", + "id": "cdb3b622-e163-4d03-8532-d235211a14a4", + "tool_call_id": "call_alvjuc6gn9wbayfixefk6swk", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "现在我需要为江苏城市足球联赛2025赛季创建一个酷炫的足球网站。根据前端设计技能的指导，我需要选择一个明确的美学方向，并创造独特、难忘的设计。\n\n让我思考一下：\n1. 目的：展示江苏城市足球联赛2025赛季的信息，包括赛程、积分榜、球队、球员等\n2. 受众：足球爱好者、球迷、媒体、赞助商\n3. 美学方向：考虑到足球的活力、运动感和竞争性，我可以选择\"运动科技感\"或\"现代运动风\"的方向，结合动态元素、数据可视化\n\n我决定采用\"未来运动科技\"美学方向，融合：\n- 动态数据展示\n- 运动感动画\n- 现代科技感界面\n- 球队颜色主题（绿色代表江苏足球）\n\n现在开始创建网站。首先创建项目结构。" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd122-d8c6-7df2-b232-7951177d0521", + "tool_calls": [ + { + "name": "bash", + "args": { + "description": "创建工作空间目录", + "command": "mkdir -p /mnt/user-data/workspace/jiangsu-football" + }, + "id": "call_uz7ltz23a81ndpuznswkqohy", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "(no output)", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "bash", + "id": "df7f728d-0d24-486b-9600-042933b98612", + "tool_call_id": "call_uz7ltz23a81ndpuznswkqohy", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "现在我需要为江苏城市足球联赛2025赛季创建一个酷炫的足球网站。让我先规划一下网站的结构和设计方向。\n\n设计思考：\n1. **目的**：展示江苏城市足球联赛2025赛季的信息，包括赛程、积分榜、球队、球员数据等\n2. **受众**：足球爱好者、球迷、球员、教练、媒体\n3. **设计风格**：选择\"体育能量\"风格，结合现代运动美学、动态元素和江苏地域特色\n4. **色彩**：使用江苏的代表色（蓝色调为主，结合橙色能量色）\n5. **特色**：动态比分展示、球队徽章动画、比赛时间线、响应式设计\n\n现在开始创建网站文件。首先创建HTML结构：" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd123-0264-7492-a7a5-ca22e67151e5", + "tool_calls": [ + { + "name": "write_file", + "args": { + "description": "创建主HTML文件", + "path": "/mnt/user-data/workspace/jiangsu-football/index.html", + "content": "\n\n\n \n \n 江苏城市足球联赛2025赛季 | 苏超联赛第一季\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
\n \n
\n
\n
\n 2025赛季\n 苏超联赛第一季\n
\n \n

\n 江苏城市\n 足球联赛\n

\n \n

\n 江苏省首个城市间职业足球联赛，汇集12支精英球队，点燃2025赛季战火！\n

\n \n
\n
\n
12
\n
参赛球队
\n
\n
\n
132
\n
场比赛
\n
\n
\n
26
\n
比赛周
\n
\n
\n
1
\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
\n
\n \n
\n
\n
\n
\n
\n
\n\n \n
\n
\n
\n

下一场比赛

\n
即将开始的精彩对决
\n
\n \n
\n
\n
周六
\n
25
\n
一月
\n
19:30
\n
\n \n
\n
\n \n
南京城联
\n
8胜 3平 2负
\n
\n \n
\n
VS
\n
\n
南京奥体中心
\n
第12轮
\n
\n
\n \n
\n \n
苏州雄狮
\n
7胜 4平 2负
\n
\n
\n \n
\n \n \n
\n
\n
\n
\n\n \n
\n
\n
\n

参赛球队

\n
12支城市代表队的荣耀之战
\n
\n \n
\n \n
\n
\n
\n\n \n
\n
\n
\n

积分榜

\n
2025赛季实时排名
\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\n \n
\n
\n
\n

赛程表

\n
2025赛季完整赛程
\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 \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 \n
\n
\n
\n\n \n \n
\n\n \n \n \n \n\n" + }, + "id": "call_fc3fw9giy08olb6mloeld8m8", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "OK", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "write_file", + "id": "54a18348-b34e-4451-b00f-61dc72be3d77", + "tool_call_id": "call_fc3fw9giy08olb6mloeld8m8", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "现在创建CSS文件。我需要设计一个现代、炫酷的足球网站，采用运动风格的设计。我会使用大胆的颜色、动态效果和现代布局。采用绿色为主色调，配合黑色和白色，营造足球场的氛围。使用几何图案和动画效果。" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd124-a84c-7882-9ff9-02cfdd6c2f25", + "tool_calls": [ + { + "name": "bash", + "args": { + "description": "创建CSS目录", + "command": "mkdir -p /mnt/user-data/workspace/jiangsu-football/css" + }, + "id": "call_p3w49hfd2sjqmhhpe3rcdvpu", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "(no output)", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "bash", + "id": "2b339695-7272-4f86-a05f-77aecf085c97", + "tool_call_id": "call_p3w49hfd2sjqmhhpe3rcdvpu", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd124-c314-7853-839c-559dd91388d3", + "tool_calls": [ + { + "name": "write_file", + "args": { + "description": "创建CSS样式文件", + "path": "/mnt/user-data/workspace/jiangsu-football/css/style.css", + "content": "/* 江苏城市足球联赛2025赛季 - 主样式文件 */\n\n:root {\n /* 主色调 - 江苏蓝与活力橙 */\n --color-primary: #1a56db;\n --color-primary-dark: #1e3a8a;\n --color-primary-light: #3b82f6;\n --color-secondary: #f59e0b;\n --color-secondary-dark: #d97706;\n --color-secondary-light: #fbbf24;\n \n /* 中性色 */\n --color-white: #ffffff;\n --color-gray-50: #f9fafb;\n --color-gray-100: #f3f4f6;\n --color-gray-200: #e5e7eb;\n --color-gray-300: #d1d5db;\n --color-gray-400: #9ca3af;\n --color-gray-500: #6b7280;\n --color-gray-600: #4b5563;\n --color-gray-700: #374151;\n --color-gray-800: #1f2937;\n --color-gray-900: #111827;\n --color-black: #000000;\n \n /* 功能色 */\n --color-success: #10b981;\n --color-warning: #f59e0b;\n --color-danger: #ef4444;\n --color-info: #3b82f6;\n \n /* 字体 */\n --font-heading: 'Oswald', sans-serif;\n --font-body: 'Inter', sans-serif;\n --font-display: 'Montserrat', sans-serif;\n \n /* 尺寸 */\n --container-max: 1280px;\n --border-radius-sm: 4px;\n --border-radius-md: 8px;\n --border-radius-lg: 16px;\n --border-radius-xl: 24px;\n --border-radius-2xl: 32px;\n \n /* 阴影 */\n --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n \n /* 过渡 */\n --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);\n --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);\n --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);\n \n /* 动效 */\n --animation-bounce: bounce 1s infinite;\n --animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n --animation-spin: spin 1s linear infinite;\n}\n\n/* 暗色主题变量 */\n[data-theme=\"dark\"] {\n --color-white: #111827;\n --color-gray-50: #1f2937;\n --color-gray-100: #374151;\n --color-gray-200: #4b5563;\n --color-gray-300: #6b7280;\n --color-gray-400: #9ca3af;\n --color-gray-500: #d1d5db;\n --color-gray-600: #e5e7eb;\n --color-gray-700: #f3f4f6;\n --color-gray-800: #f9fafb;\n --color-gray-900: #ffffff;\n --color-black: #f9fafb;\n}\n\n/* 重置与基础样式 */\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n font-size: 16px;\n}\n\nbody {\n font-family: var(--font-body);\n font-size: 1rem;\n line-height: 1.5;\n color: var(--color-gray-800);\n background-color: var(--color-white);\n overflow-x: hidden;\n transition: background-color var(--transition-normal), color var(--transition-normal);\n}\n\n.container {\n width: 100%;\n max-width: var(--container-max);\n margin: 0 auto;\n padding: 0 1.5rem;\n}\n\n/* 加载动画 */\n.loader {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9999;\n opacity: 1;\n visibility: visible;\n transition: opacity var(--transition-normal), visibility var(--transition-normal);\n}\n\n.loader.loaded {\n opacity: 0;\n visibility: hidden;\n}\n\n.loader-content {\n text-align: center;\n}\n\n.football {\n width: 80px;\n height: 80px;\n background: linear-gradient(45deg, var(--color-white) 25%, var(--color-gray-200) 25%, var(--color-gray-200) 50%, var(--color-white) 50%, var(--color-white) 75%, var(--color-gray-200) 75%);\n background-size: 20px 20px;\n border-radius: 50%;\n margin: 0 auto 2rem;\n animation: var(--animation-spin);\n position: relative;\n}\n\n.football::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 30px;\n height: 30px;\n background: var(--color-secondary);\n border-radius: 50%;\n border: 3px solid var(--color-white);\n}\n\n.loader-text {\n font-family: var(--font-heading);\n font-size: 1.5rem;\n font-weight: 500;\n color: var(--color-white);\n letter-spacing: 2px;\n text-transform: uppercase;\n}\n\n/* 导航栏 */\n.navbar {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border-bottom: 1px solid var(--color-gray-200);\n z-index: 1000;\n transition: all var(--transition-normal);\n}\n\n[data-theme=\"dark\"] .navbar {\n background: rgba(17, 24, 39, 0.95);\n border-bottom-color: var(--color-gray-700);\n}\n\n.navbar .container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 80px;\n}\n\n.nav-brand {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.logo {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n cursor: pointer;\n}\n\n.logo-ball {\n width: 36px;\n height: 36px;\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);\n border-radius: 50%;\n position: relative;\n animation: var(--animation-pulse);\n}\n\n.logo-ball::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 12px;\n height: 12px;\n background: var(--color-white);\n border-radius: 50%;\n}\n\n.logo-text {\n font-family: var(--font-heading);\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--color-primary);\n letter-spacing: 1px;\n}\n\n[data-theme=\"dark\"] .logo-text {\n color: var(--color-white);\n}\n\n.league-name {\n font-family: var(--font-body);\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-gray-600);\n padding-left: 1rem;\n border-left: 1px solid var(--color-gray-300);\n}\n\n[data-theme=\"dark\"] .league-name {\n color: var(--color-gray-400);\n border-left-color: var(--color-gray-600);\n}\n\n.nav-menu {\n display: flex;\n gap: 2rem;\n}\n\n.nav-link {\n font-family: var(--font-heading);\n font-size: 1rem;\n font-weight: 500;\n color: var(--color-gray-700);\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 1px;\n padding: 0.5rem 0;\n position: relative;\n transition: color var(--transition-fast);\n}\n\n.nav-link::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--color-primary);\n transition: width var(--transition-fast);\n}\n\n.nav-link:hover {\n color: var(--color-primary);\n}\n\n.nav-link:hover::after {\n width: 100%;\n}\n\n.nav-link.active {\n color: var(--color-primary);\n}\n\n.nav-link.active::after {\n width: 100%;\n}\n\n[data-theme=\"dark\"] .nav-link {\n color: var(--color-gray-300);\n}\n\n[data-theme=\"dark\"] .nav-link:hover,\n[data-theme=\"dark\"] .nav-link.active {\n color: var(--color-primary-light);\n}\n\n.nav-actions {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.btn-theme-toggle,\n.btn-menu-toggle {\n width: 40px;\n height: 40px;\n border-radius: var(--border-radius-md);\n border: 1px solid var(--color-gray-300);\n background: var(--color-white);\n color: var(--color-gray-700);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all var(--transition-fast);\n}\n\n.btn-theme-toggle:hover,\n.btn-menu-toggle:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n transform: translateY(-2px);\n}\n\n[data-theme=\"dark\"] .btn-theme-toggle,\n[data-theme=\"dark\"] .btn-menu-toggle {\n border-color: var(--color-gray-600);\n background: var(--color-gray-800);\n color: var(--color-gray-300);\n}\n\n.btn-menu-toggle {\n display: none;\n}\n\n/* 按钮样式 */\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.75rem 1.5rem;\n font-family: var(--font-heading);\n font-size: 0.875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n border-radius: var(--border-radius-md);\n border: 2px solid transparent;\n cursor: pointer;\n transition: all var(--transition-fast);\n text-decoration: none;\n}\n\n.btn-primary {\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);\n color: var(--color-white);\n box-shadow: var(--shadow-md);\n}\n\n.btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow-lg);\n}\n\n.btn-secondary {\n background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);\n color: var(--color-white);\n box-shadow: var(--shadow-md);\n}\n\n.btn-secondary:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow-lg);\n}\n\n.btn-outline {\n background: transparent;\n border-color: var(--color-gray-300);\n color: var(--color-gray-700);\n}\n\n.btn-outline:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n transform: translateY(-2px);\n}\n\n[data-theme=\"dark\"] .btn-outline {\n border-color: var(--color-gray-600);\n color: var(--color-gray-300);\n}\n\n/* 英雄区域 */\n.hero {\n position: relative;\n min-height: 100vh;\n padding-top: 80px;\n overflow: hidden;\n}\n\n.hero-background {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n}\n\n.hero-gradient {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, \n rgba(26, 86, 219, 0.1) 0%,\n rgba(59, 130, 246, 0.05) 50%,\n rgba(245, 158, 11, 0.1) 100%);\n}\n\n.hero-pattern {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: \n radial-gradient(circle at 25% 25%, rgba(26, 86, 219, 0.1) 2px, transparent 2px),\n radial-gradient(circle at 75% 75%, rgba(245, 158, 11, 0.1) 2px, transparent 2px);\n background-size: 60px 60px;\n}\n\n.hero-ball-animation {\n position: absolute;\n width: 300px;\n height: 300px;\n top: 50%;\n right: 10%;\n transform: translateY(-50%);\n background: radial-gradient(circle at 30% 30%, \n rgba(26, 86, 219, 0.2) 0%,\n rgba(26, 86, 219, 0.1) 30%,\n transparent 70%);\n border-radius: 50%;\n animation: float 6s ease-in-out infinite;\n}\n\n.hero .container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem;\n align-items: center;\n min-height: calc(100vh - 80px);\n}\n\n.hero-content {\n max-width: 600px;\n}\n\n.hero-badge {\n display: flex;\n gap: 1rem;\n margin-bottom: 2rem;\n}\n\n.badge-season,\n.badge-league {\n padding: 0.5rem 1rem;\n border-radius: var(--border-radius-full);\n font-family: var(--font-heading);\n font-size: 0.875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.badge-season {\n background: var(--color-primary);\n color: var(--color-white);\n}\n\n.badge-league {\n background: var(--color-secondary);\n color: var(--color-white);\n}\n\n.hero-title {\n font-family: var(--font-display);\n font-size: 4rem;\n font-weight: 900;\n line-height: 1.1;\n margin-bottom: 1.5rem;\n color: var(--color-gray-900);\n}\n\n.title-line {\n display: block;\n}\n\n.highlight {\n color: var(--color-primary);\n position: relative;\n display: inline-block;\n}\n\n.highlight::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 8px;\n background: var(--color-secondary);\n opacity: 0.3;\n z-index: -1;\n}\n\n.hero-subtitle {\n font-size: 1.25rem;\n color: var(--color-gray-600);\n margin-bottom: 3rem;\n max-width: 500px;\n}\n\n[data-theme=\"dark\"] .hero-subtitle {\n color: var(--color-gray-400);\n}\n\n.hero-stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 1.5rem;\n margin-bottom: 3rem;\n}\n\n.stat-item {\n text-align: center;\n}\n\n.stat-number {\n font-family: var(--font-display);\n font-size: 2.5rem;\n font-weight: 800;\n color: var(--color-primary);\n margin-bottom: 0.25rem;\n}\n\n.stat-label {\n font-size: 0.875rem;\n color: var(--color-gray-600);\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n[data-theme=\"dark\"] .stat-label {\n color: var(--color-gray-400);\n}\n\n.hero-actions {\n display: flex;\n gap: 1rem;\n}\n\n.hero-visual {\n position: relative;\n height: 500px;\n}\n\n.stadium-visual {\n position: relative;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-200) 100%);\n border-radius: var(--border-radius-2xl);\n overflow: hidden;\n box-shadow: var(--shadow-2xl);\n}\n\n.stadium-field {\n position: absolute;\n top: 10%;\n left: 5%;\n width: 90%;\n height: 80%;\n background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);\n border-radius: var(--border-radius-xl);\n}\n\n.stadium-stands {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, \n transparent 0%,\n rgba(0, 0, 0, 0.1) 20%,\n rgba(0, 0, 0, 0.2) 100%);\n border-radius: var(--border-radius-2xl);\n}\n\n.stadium-players {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 80%;\n height: 60%;\n}\n\n.player {\n position: absolute;\n width: 40px;\n height: 60px;\n background: var(--color-white);\n border-radius: var(--border-radius-md);\n box-shadow: var(--shadow-md);\n}\n\n.player-1 {\n top: 30%;\n left: 20%;\n animation: player-move-1 3s ease-in-out infinite;\n}\n\n.player-2 {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n animation: player-move-2 4s ease-in-out infinite;\n}\n\n.player-3 {\n top: 40%;\n right: 25%;\n animation: player-move-3 3.5s ease-in-out infinite;\n}\n\n.stadium-ball {\n position: absolute;\n width: 20px;\n height: 20px;\n background: linear-gradient(45deg, var(--color-white) 25%, var(--color-gray-200) 25%, var(--color-gray-200) 50%, var(--color-white) 50%, var(--color-white) 75%, var(--color-gray-200) 75%);\n background-size: 5px 5px;\n border-radius: 50%;\n top: 45%;\n left: 60%;\n animation: ball-move 5s linear infinite;\n}\n\n.hero-scroll {\n position: absolute;\n bottom: 2rem;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.scroll-indicator {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n\n.scroll-line {\n width: 2px;\n height: 40px;\n background: linear-gradient(to bottom, var(--color-primary), transparent);\n animation: scroll-line 2s ease-in-out infinite;\n}\n\n/* 下一场比赛 */\n.next-match {\n padding: 6rem 0;\n background: var(--color-gray-50);\n}\n\n[data-theme=\"dark\"] .next-match {\n background: var(--color-gray-900);\n}\n\n.section-header {\n text-align: center;\n margin-bottom: 3rem;\n}\n\n.section-title {\n font-family: var(--font-heading);\n font-size: 2.5rem;\n font-weight: 700;\n color: var(--color-gray-900);\n margin-bottom: 0.5rem;\n text-transform: uppercase;\n letter-spacing: 2px;\n}\n\n[data-theme=\"dark\"] .section-title {\n color: var(--color-white);\n}\n\n.section-subtitle {\n font-size: 1.125rem;\n color: var(--color-gray-600);\n}\n\n[data-theme=\"dark\"] .section-subtitle {\n color: var(--color-gray-400);\n}\n\n.match-card {\n background: var(--color-white);\n border-radius: var(--border-radius-xl);\n padding: 2rem;\n box-shadow: var(--shadow-xl);\n display: grid;\n grid-template-columns: auto 1fr auto;\n gap: 3rem;\n align-items: center;\n}\n\n[data-theme=\"dark\"] .match-card {\n background: var(--color-gray-800);\n}\n\n.match-date {\n text-align: center;\n padding: 1.5rem;\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);\n border-radius: var(--border-radius-lg);\n color: var(--color-white);\n}\n\n.match-day {\n font-family: var(--font-heading);\n font-size: 1.125rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 0.5rem;\n}\n\n.match-date-number {\n font-family: var(--font-display);\n font-size: 3rem;\n font-weight: 800;\n line-height: 1;\n margin-bottom: 0.25rem;\n}\n\n.match-month {\n font-family: var(--font-heading);\n font-size: 1.125rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 0.5rem;\n}\n\n.match-time {\n font-size: 1rem;\n font-weight: 500;\n opacity: 0.9;\n}\n\n.match-teams {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n gap: 2rem;\n align-items: center;\n}\n\n.team {\n text-align: center;\n}\n\n.team-home {\n text-align: right;\n}\n\n.team-away {\n text-align: left;\n}\n\n.team-logo {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n margin: 0 auto 1rem;\n background: var(--color-gray-200);\n position: relative;\n}\n\n.logo-nanjing {\n background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);\n}\n\n.logo-nanjing::before {\n content: 'N';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-family: var(--font-heading);\n font-size: 2rem;\n font-weight: 700;\n color: var(--color-white);\n}\n\n.logo-suzhou {\n background: linear-gradient(135deg, #059669 0%, #10b981 100%);\n}\n\n.logo-suzhou::before {\n content: 'S';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-family: var(--font-heading);\n font-size: 2rem;\n font-weight: 700;\n color: var(--color-white);\n}\n\n.team-name {\n font-family: var(--font-heading);\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--color-gray-900);\n margin-bottom: 0.5rem;\n}\n\n[data-theme=\"dark\"] .team-name {\n color: var(--color-white);\n}\n\n.team-record {\n font-size: 0.875rem;\n color: var(--color-gray-600);\n}\n\n[data-theme=\"dark\"] .team-record {\n color: var(--color-gray-400);\n}\n\n.match-vs {\n text-align: center;\n}\n\n.vs-text {\n font-family: var(--font-display);\n font-size: 2rem;\n font-weight: 800;\n color: var(--color-primary);\n margin-bottom: 0.5rem;\n}\n\n.match-info {\n font-size: 0.875rem;\n color: var(--color-gray-600);\n}\n\n.match-venue {\n font-weight: 600;\n margin-bottom: 0.25rem;\n}\n\n.match-round {\n opacity: 0.8;\n}\n\n.match-actions {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n/* 球队展示 */\n.teams-section {\n padding: 6rem 0;\n}\n\n.teams-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 2rem;\n}\n\n.team-card {\n background: var(--color-white);\n border-radius: var(--border-radius-lg);\n padding: 1.5rem;\n box-shadow: var(--shadow-md);\n transition: all var(--transition-normal);\n cursor: pointer;\n text-align: center;\n}\n\n.team-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--shadow-xl);\n}\n\n[data-theme=\"dark\"] .team-card {\n background: var(--color-gray-800);\n}\n\n.team-card-logo {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n margin: 0 auto 1rem;\n background: var(--color-gray-200);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-heading);\n font-size: 2rem;\n font-weight: 700;\n color: var(--color-white);\n}\n\n.team-card-name {\n font-family: var(--font-heading);\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--color-gray-900);\n margin-bottom: 0.5rem;\n}\n\n[data-theme=\"dark\"] .team-card-name {\n color: var(--color-white);\n}\n\n.team-card-city {\n font-size: 0.875rem;\n color: var(--color-gray-600);\n margin-bottom: 1rem;\n}\n\n.team-card-stats {\n display: flex;\n justify-content: space-around;\n margin-top: 1rem;\n padding-top: 1rem;\n border-top: 1px solid var(--color-gray-200);\n}\n\n[data-theme=\"dark\"] .team-card-stats {\n border-top-color: var(--color-gray-700);\n}\n\n.team-stat {\n text-align: center;\n}\n\n.team-stat-value {\n font-family: var(--font-display);\n font-size: 1.25rem;\n font-weight: 700;\n color: var(--color-primary);\n}\n\n.team-stat-label {\n font-size: 0.75rem;\n color: var(--color-gray-600);\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n/* 积分榜 */\n.standings-section {\n padding: 6rem 0;\n background: var(--color-gray-50);\n}\n\n[data-theme=\"dark\"] .standings-section {\n background: var(--color-gray-900);\n}\n\n.standings-container {\n overflow-x: auto;\n}\n\n.standings-table {\n min-width: 800px;\n}\n\n.standings-table table {\n width: 100%;\n border-collapse: collapse;\n background: var(--color-white);\n border-radius: var(--border-radius-lg);\n overflow: hidden;\n box-shadow: var(--shadow-md);\n}\n\n[data-theme=\"dark\"] .standings-table table {\n background: var(--color-gray-800);\n}\n\n.standings-table thead {\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);\n}\n\n.standings-table th {\n padding: 1rem;\n font-family: var(--font-heading);\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-white);\n text-transform: uppercase;\n letter-spacing: 1px;\n text-align: center;\n}\n\n.standings-table tbody tr {\n border-bottom: 1px solid var(--color-gray-200);\n transition: background-color var(--transition-fast);\n}\n\n[data-theme=\"dark\"] .standings-table tbody tr {\n border-bottom-color: var(--color-gray-700);\n}\n\n.standings-table tbody tr:hover {\n background-color: var(--color-gray-100);\n}\n\n[data-theme=\"dark\"] .standings-table tbody tr:hover {\n background-color: var(--color-gray-700);\n}\n\n.standings-table td {\n padding: 1rem;\n text-align: center;\n color: var(--color-gray-700);\n}\n\n[data-theme=\"dark\"] .standings-table td {\n color: var(--color-gray-300);\n}\n\n.standings-table td:first-child {\n font-weight: 700;\n color: var(--color-primary);\n}\n\n.standings-table td:nth-child(2) {\n text-align: left;\n font-weight: 600;\n color: var(--color-gray-900);\n}\n\n[data-theme=\"dark\"] .standings-table td:nth-child(2) {\n color: var(--color-white);\n}\n\n.standings-table td:last-child {\n font-weight: 700;\n color: var(--color-secondary);\n}\n\n/* 赛程表 */\n.fixtures-section {\n padding: 6rem 0;\n}\n\n.fixtures-tabs {\n background: var(--color-white);\n border-radius: var(--border-radius-xl);\n overflow: hidden;\n box-shadow: var(--shadow-lg);\n}\n\n[data-theme=\"dark\"] .fixtures-tabs {\n background: var(--color-gray-800);\n}\n\n.tabs {\n display: flex;\n background: var(--color-gray-100);\n padding: 0.5rem;\n}\n\n[data-theme=\"dark\"] .tabs {\n background: var(--color-gray-900);\n}\n\n.tab {\n flex: 1;\n padding: 1rem;\n border: none;\n background: transparent;\n font-family: var(--font-heading);\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-gray-600);\n text-transform: uppercase;\n letter-spacing: 1px;\n cursor: pointer;\n transition: all var(--transition-fast);\n border-radius: var(--border-radius-md);\n}\n\n.tab:hover {\n color: var(--color-primary);\n}\n\n.tab.active {\n background: var(--color-white);\n color: var(--color-primary);\n box-shadow: var(--shadow-sm);\n}\n\n[data-theme=\"dark\"] .tab.active {\n background: var(--color-gray-800);\n}\n\n.fixtures-list {\n padding: 2rem;\n}\n\n.fixture-item {\n display: grid;\n grid-template-columns: auto 1fr auto;\n gap: 2rem;\n align-items: center;\n padding: 1.5rem;\n border-bottom: 1px solid var(--color-gray-200);\n transition: background-color var(--transition-fast);\n}\n\n.fixture-item:hover {\n background-color: var(--color-gray-50);\n}\n\n[data-theme=\"dark\"] .fixture-item {\n border-bottom-color: var(--color-gray-700);\n}\n\n[data-theme=\"dark\"] .fixture-item:hover {\n background-color: var(--color-gray-900);\n}\n\n.fixture-date {\n text-align: center;\n min-width: 100px;\n}\n\n.fixture-day {\n font-family: var(--font-heading);\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-gray-600);\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 0.25rem;\n}\n\n.fixture-time {\n font-size: 1.125rem;\n font-weight: 700;\n color: var(--color-primary);\n}\n\n.fixture-teams {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n gap: 1rem;\n align-items: center;\n}\n\n.fixture-team {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.fixture-team.home {\n justify-content: flex-end;\n}\n\n.fixture-team-logo {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: var(--color-gray-200);\n}\n\n.fixture-team-name {\n font-family: var(--font-heading);\n font-size: 1.125rem;\n font-weight: 600;\n color: var(--color-gray-900);\n}\n\n[data-theme=\"dark\"] .fixture-team-name {\n color: var(--color-white);\n}\n\n.fixture-vs {\n font-family: var(--font-display);\n font-size: 1.5rem;\n font-weight: 800;\n color: var(--color-gray-400);\n padding: 0 1rem;\n}\n\n.fixture-score {\n min-width: 100px;\n text-align: center;\n}\n\n.fixture-score-value {\n font-family: var(--font-display);\n font-size: 1.5rem;\n font-weight: 800;\n color: var(--color-primary);\n}\n\n.fixture-score-status {\n font-size: 0.75rem;\n color: var(--color-gray-600);\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-top: 0.25rem;\n}\n\n/* 数据统计 */\n.stats-section {\n padding: 6rem 0;\n background: var(--color-gray-50);\n}\n\n[data-theme=\"dark\"] .stats-section {\n background: var(--color-gray-900);\n}\n\n.stats-tabs {\n background: var(--color-white);\n border-radius: var(--border-radius-xl);\n overflow: hidden;\n box-shadow: var(--shadow-lg);\n}\n\n[data-theme=\"dark\"] .stats-tabs {\n background: var(--color-gray-800);\n}\n\n.stats-tab-nav {\n display: flex;\n background: var(--color-gray-100);\n padding: 0.5rem;\n}\n\n[data-theme=\"dark\"] .stats-tab-nav {\n background: var(--color-gray-900);\n}\n\n.stats-tab {\n flex: 1;\n padding: 1rem;\n border: none;\n background: transparent;\n font-family: var(--font-heading);\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-gray-600);\n text-transform: uppercase;\n letter-spacing: 1px;\n cursor: pointer;\n transition: all var(--transition-fast);\n border-radius: var(--border-radius-md);\n}\n\n.stats-tab:hover {\n color: var(--color-primary);\n}\n\n.stats-tab.active {\n background: var(--color-white);\n color: var(--color-primary);\n box-shadow: var(--shadow-sm);\n}\n\n[data-theme=\"dark\"] .stats-tab.active {\n background: var(--color-gray-800);\n}\n\n.stats-content {\n padding: 2rem;\n}\n\n.stats-tab-content {\n display: none;\n}\n\n.stats-tab-content.active {\n display: block;\n}\n\n.stats-table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.stats-table th {\n padding: 1rem;\n font-family: var(--font-heading);\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-gray-600);\n text-transform: uppercase;\n letter-spacing: 1px;\n text-align: left;\n border-bottom: 2px solid var(--color-gray-200);\n}\n\n[data-theme=\"dark\"] .stats-table th {\n border-bottom-color: var(--color-gray-700);\n}\n\n.stats-table td {\n padding: 1rem;\n border-bottom: 1px solid var(--color-gray-200);\n color: var(--color-gray-700);\n}\n\n[data-theme=\"dark\"] .stats-table td {\n border-bottom-color: var(--color-gray-700);\n color: var(--color-gray-300);\n}\n\n.stats-table tr:hover {\n background-color: var(--color-gray-50);\n}\n\n[data-theme=\"dark\"] .stats-table tr:hover {\n background-color: var(--color-gray-900);\n}\n\n.stats-rank {\n font-weight: 700;\n color: var(--color-primary);\n width: 50px;\n}\n\n.stats-player {\n font-weight: 600;\n color: var(--color-gray-900);\n}\n\n[data-theme=\"dark\"] .stats-player {\n color: var(--color-white);\n}\n\n.stats-team {\n color: var(--color-gray-600);\n}\n\n.stats-value {\n font-weight: 700;\n color: var(--color-secondary);\n text-align: center;\n}\n\n/* 新闻动态 */\n.news-section {\n padding: 6rem 0;\n}\n\n.news-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n gap: 2rem;\n}\n\n.news-card {\n background: var(--color-white);\n border-radius: var(--border-radius-lg);\n overflow: hidden;\n box-shadow: var(--shadow-md);\n transition: all var(--transition-normal);\n cursor: pointer;\n}\n\n.news-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--shadow-xl);\n}\n\n[data-theme=\"dark\"] .news-card {\n background: var(--color-gray-800);\n}\n\n.news-card-image {\n height: 200px;\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);\n position: relative;\n overflow: hidden;\n}\n\n.news-card-image::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(45deg, \n transparent 30%, \n rgba(255, 255, 255, 0.1) 50%, \n transparent 70%);\n animation: shimmer 2s infinite;\n}\n\n.news-card-content {\n padding: 1.5rem;\n}\n\n.news-card-category {\n display: inline-block;\n padding: 0.25rem 0.75rem;\n background: var(--color-primary);\n color: var(--color-white);\n font-family: var(--font-heading);\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n border-radius: var(--border-radius-sm);\n margin-bottom: 1rem;\n}\n\n.news-card-title {\n font-family: var(--font-heading);\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--color-gray-900);\n margin-bottom: 0.75rem;\n line-height: 1.3;\n}\n\n[data-theme=\"dark\"] .news-card-title {\n color: var(--color-white);\n}\n\n.news-card-excerpt {\n font-size: 0.875rem;\n color: var(--color-gray-600);\n margin-bottom: 1rem;\n line-height: 1.5;\n}\n\n[data-theme=\"dark\"] .news-card-excerpt {\n color: var(--color-gray-400);\n}\n\n.news-card-meta {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 0.75rem;\n color: var(--color-gray-500);\n}\n\n.news-card-date {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n/* 底部 */\n.footer {\n background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-black) 100%);\n color: var(--color-white);\n padding: 4rem 0 2rem;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 4rem;\n margin-bottom: 3rem;\n}\n\n.footer-brand {\n max-width: 300px;\n}\n\n.footer .logo {\n margin-bottom: 1.5rem;\n}\n\n.footer-description {\n font-size: 0.875rem;\n color: var(--color-gray-400);\n margin-bottom: 1.5rem;\n line-height: 1.6;\n}\n\n.footer-social {\n display: flex;\n gap: 1rem;\n}\n\n.social-link {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-white);\n text-decoration: none;\n transition: all var(--transition-fast);\n}\n\n.social-link:hover {\n background: var(--color-primary);\n transform: translateY(-2px);\n}\n\n.footer-links {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n}\n\n.footer-column {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.footer-title {\n font-family: var(--font-heading);\n font-size: 1.125rem;\n font-weight: 600;\n margin-bottom: 0.5rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.footer-link {\n font-size: 0.875rem;\n color: var(--color-gray-400);\n text-decoration: none;\n transition: color var(--transition-fast);\n}\n\n.footer-link:hover {\n color: var(--color-white);\n}\n\n.footer-bottom {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 2rem;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.copyright {\n font-size: 0.875rem;\n color: var(--color-gray-400);\n}\n\n.footer-legal {\n display: flex;\n gap: 1.5rem;\n}\n\n.legal-link {\n font-size: 0.875rem;\n color: var(--color-gray-400);\n text-decoration: none;\n transition: color var(--transition-fast);\n}\n\n.legal-link:hover {\n color: var(--color-white);\n}\n\n/* 动画 */\n@keyframes float {\n 0%, 100% {\n transform: translateY(-50%) translateX(0);\n }\n 50% {\n transform: translateY(-50%) translateX(20px);\n }\n}\n\n@keyframes player-move-1 {\n 0%, 100% {\n transform: translate(0, 0);\n }\n 50% {\n transform: translate(20px, -10px);\n }\n}\n\n@keyframes player-move-2 {\n 0%, 100% {\n transform: translate(-50%, -50%);\n }\n 50% {\n transform: translate(-50%, -60%);\n }\n}\n\n@keyframes player-move-3 {\n 0%, 100% {\n transform: translate(0, 0);\n }\n 50% {\n transform: translate(-15px, 10px);\n }\n}\n\n@keyframes ball-move {\n 0% {\n transform: translate(0, 0);\n }\n 25% {\n transform: translate(40px, -20px);\n }\n 50% {\n transform: translate(80px, 0);\n }\n 75% {\n transform: translate(40px, 20px);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n\n@keyframes scroll-line {\n 0% {\n height: 0;\n opacity: 0;\n }\n 50% {\n height: 40px;\n opacity: 1;\n }\n 100% {\n height: 0;\n opacity: 0;\n transform: translateY(40px);\n }\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-10px);\n }\n}\n\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n@keyframes shimmer {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n/* 响应式设计 */\n@media (max-width: 1024px) {\n .hero .container {\n grid-template-columns: 1fr;\n gap: 3rem;\n text-align: center;\n }\n \n .hero-content {\n max-width: 100%;\n }\n \n .hero-visual {\n height: 400px;\n }\n \n .hero-title {\n font-size: 3rem;\n }\n \n .footer-content {\n grid-template-columns: 1fr;\n gap: 3rem;\n }\n}\n\n@media (max-width: 768px) {\n .nav-menu {\n display: none;\n }\n \n .btn-menu-toggle {\n display: flex;\n }\n \n .match-card {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n \n .hero-stats {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .hero-title {\n font-size: 2.5rem;\n }\n \n .section-title {\n font-size: 2rem;\n }\n \n .footer-links {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n \n .footer-bottom {\n flex-direction: column;\n gap: 1rem;\n text-align: center;\n }\n}\n\n@media (max-width: 480px) {\n .container {\n padding: 0 1rem;\n }\n \n .hero-title {\n font-size: 2rem;\n }\n \n .hero-subtitle {\n font-size: 1rem;\n }\n \n .stat-number {\n font-size: 2rem;\n }\n \n .section-title {\n font-size: 1.75rem;\n }\n \n .match-teams {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n \n .team-home,\n .team-away {\n text-align: center;\n }\n \n .teams-grid {\n grid-template-columns: 1fr;\n }\n \n .news-grid {\n grid-template-columns: 1fr;\n }\n}\n\n/* 导航菜单响应式 */\n.nav-menu.active {\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 80px;\n left: 0;\n width: 100%;\n background: var(--color-white);\n padding: 1rem;\n box-shadow: var(--shadow-lg);\n z-index: 1000;\n}\n\n[data-theme=\"dark\"] .nav-menu.active {\n background: var(--color-gray-800);\n}\n\n.nav-menu.active .nav-link {\n padding: 0.75rem 1rem;\n border-bottom: 1px solid var(--color-gray-200);\n}\n\n[data-theme=\"dark\"] .nav-menu.active .nav-link {\n border-bottom-color: var(--color-gray-700);\n}\n\n.nav-menu.active .nav-link:last-child {\n border-bottom: none;\n}" + }, + "id": "call_htoqfsd4w1ez60sascf4n54e", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "OK", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "write_file", + "id": "375b3844-ab61-418c-9a82-4434a4df0f55", + "tool_call_id": "call_htoqfsd4w1ez60sascf4n54e", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd129-f02e-70a1-920f-e2bce124cf0c", + "tool_calls": [ + { + "name": "bash", + "args": { + "description": "创建JavaScript目录", + "command": "mkdir -p /mnt/user-data/workspace/jiangsu-football/js" + }, + "id": "call_t8v0xbisfxnfzisb3ra7qzey", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "(no output)", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "bash", + "id": "c08040a3-e4ca-42b3-99ee-76cb09ba47e3", + "tool_call_id": "call_t8v0xbisfxnfzisb3ra7qzey", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd12a-0a18-7242-a154-947f11cc5a16", + "tool_calls": [ + { + "name": "write_file", + "args": { + "description": "创建数据文件", + "path": "/mnt/user-data/workspace/jiangsu-football/js/data.js", + "content": "// 江苏城市足球联赛2025赛季 - 数据文件\n\nconst leagueData = {\n // 联赛信息\n leagueInfo: {\n name: \"江苏城市足球联赛\",\n season: \"2025赛季\",\n alias: \"苏超联赛第一季\",\n teamsCount: 12,\n totalMatches: 132,\n weeks: 26,\n startDate: \"2025-03-01\",\n endDate: \"2025-10-31\"\n },\n\n // 参赛球队\n teams: [\n {\n id: 1,\n name: \"南京城联\",\n city: \"南京\",\n shortName: \"NJL\",\n colors: [\"#dc2626\", \"#ef4444\"],\n founded: 2020,\n stadium: \"南京奥体中心\",\n capacity: 62000,\n manager: \"张伟\",\n captain: \"李明\"\n },\n {\n id: 2,\n name: \"苏州雄狮\",\n city: \"苏州\",\n shortName: \"SZS\",\n colors: [\"#059669\", \"#10b981\"],\n founded: 2019,\n stadium: \"苏州奥林匹克体育中心\",\n capacity: 45000,\n manager: \"王强\",\n captain: \"陈浩\"\n },\n {\n id: 3,\n name: \"无锡太湖\",\n city: \"无锡\",\n shortName: \"WXT\",\n colors: [\"#3b82f6\", \"#60a5fa\"],\n founded: 2021,\n stadium: \"无锡体育中心\",\n capacity: 32000,\n manager: \"赵刚\",\n captain: \"刘洋\"\n },\n {\n id: 4,\n name: \"常州龙城\",\n city: \"常州\",\n shortName: \"CZL\",\n colors: [\"#7c3aed\", \"#8b5cf6\"],\n founded: 2022,\n stadium: \"常州奥林匹克体育中心\",\n capacity: 38000,\n manager: \"孙磊\",\n captain: \"周涛\"\n },\n {\n id: 5,\n name: \"镇江金山\",\n city: \"镇江\",\n shortName: \"ZJJ\",\n colors: [\"#f59e0b\", \"#fbbf24\"],\n founded: 2020,\n stadium: \"镇江体育会展中心\",\n capacity: 28000,\n manager: \"吴斌\",\n captain: \"郑军\"\n },\n {\n id: 6,\n name: \"扬州运河\",\n city: \"扬州\",\n shortName: \"YZY\",\n colors: [\"#ec4899\", \"#f472b6\"],\n founded: 2021,\n stadium: \"扬州体育公园\",\n capacity: 35000,\n manager: \"钱勇\",\n captain: \"王磊\"\n },\n {\n id: 7,\n name: \"南通江海\",\n city: \"南通\",\n shortName: \"NTJ\",\n colors: [\"#0ea5e9\", \"#38bdf8\"],\n founded: 2022,\n stadium: \"南通体育会展中心\",\n capacity: 32000,\n manager: \"冯超\",\n captain: \"张勇\"\n },\n {\n id: 8,\n name: \"徐州楚汉\",\n city: \"徐州\",\n shortName: \"XZC\",\n colors: [\"#84cc16\", \"#a3e635\"],\n founded: 2019,\n stadium: \"徐州奥体中心\",\n capacity: 42000,\n manager: \"陈明\",\n captain: \"李强\"\n },\n {\n id: 9,\n name: \"淮安运河\",\n city: \"淮安\",\n shortName: \"HAY\",\n colors: [\"#f97316\", \"#fb923c\"],\n founded: 2021,\n stadium: \"淮安体育中心\",\n capacity: 30000,\n manager: \"周伟\",\n captain: \"吴刚\"\n },\n {\n id: 10,\n name: \"盐城黄海\",\n city: \"盐城\",\n shortName: \"YCH\",\n colors: [\"#06b6d4\", \"#22d3ee\"],\n founded: 2020,\n stadium: \"盐城体育中心\",\n capacity: 32000,\n manager: \"郑涛\",\n captain: \"孙明\"\n },\n {\n id: 11,\n name: \"泰州凤城\",\n city: \"泰州\",\n shortName: \"TZF\",\n colors: [\"#8b5cf6\", \"#a78bfa\"],\n founded: 2022,\n stadium: \"泰州体育公园\",\n capacity: 28000,\n manager: \"王刚\",\n captain: \"陈涛\"\n },\n {\n id: 12,\n name: \"宿迁西楚\",\n city: \"宿迁\",\n shortName: \"SQC\",\n colors: [\"#10b981\", \"#34d399\"],\n founded: 2021,\n stadium: \"宿迁体育中心\",\n capacity: 26000,\n manager: \"李伟\",\n captain: \"张刚\"\n }\n ],\n\n // 积分榜数据\n standings: [\n {\n rank: 1,\n teamId: 1,\n played: 13,\n won: 8,\n drawn: 3,\n lost: 2,\n goalsFor: 24,\n goalsAgainst: 12,\n goalDifference: 12,\n points: 27\n },\n {\n rank: 2,\n teamId: 2,\n played: 13,\n won: 7,\n drawn: 4,\n lost: 2,\n goalsFor: 22,\n goalsAgainst: 14,\n goalDifference: 8,\n points: 25\n },\n {\n rank: 3,\n teamId: 8,\n played: 13,\n won: 7,\n drawn: 3,\n lost: 3,\n goalsFor: 20,\n goalsAgainst: 15,\n goalDifference: 5,\n points: 24\n },\n {\n rank: 4,\n teamId: 3,\n played: 13,\n won: 6,\n drawn: 4,\n lost: 3,\n goalsFor: 18,\n goalsAgainst: 14,\n goalDifference: 4,\n points: 22\n },\n {\n rank: 5,\n teamId: 4,\n played: 13,\n won: 6,\n drawn: 3,\n lost: 4,\n goalsFor: 19,\n goalsAgainst: 16,\n goalDifference: 3,\n points: 21\n },\n {\n rank: 6,\n teamId: 6,\n played: 13,\n won: 5,\n drawn: 5,\n lost: 3,\n goalsFor: 17,\n goalsAgainst: 15,\n goalDifference: 2,\n points: 20\n },\n {\n rank: 7,\n teamId: 5,\n played: 13,\n won: 5,\n drawn: 4,\n lost: 4,\n goalsFor: 16,\n goalsAgainst: 15,\n goalDifference: 1,\n points: 19\n },\n {\n rank: 8,\n teamId: 7,\n played: 13,\n won: 4,\n drawn: 5,\n lost: 4,\n goalsFor: 15,\n goalsAgainst: 16,\n goalDifference: -1,\n points: 17\n },\n {\n rank: 9,\n teamId: 10,\n played: 13,\n won: 4,\n drawn: 4,\n lost: 5,\n goalsFor: 14,\n goalsAgainst: 17,\n goalDifference: -3,\n points: 16\n },\n {\n rank: 10,\n teamId: 9,\n played: 13,\n won: 3,\n drawn: 5,\n lost: 5,\n goalsFor: 13,\n goalsAgainst: 18,\n goalDifference: -5,\n points: 14\n },\n {\n rank: 11,\n teamId: 11,\n played: 13,\n won: 2,\n drawn: 4,\n lost: 7,\n goalsFor: 11,\n goalsAgainst: 20,\n goalDifference: -9,\n points: 10\n },\n {\n rank: 12,\n teamId: 12,\n played: 13,\n won: 1,\n drawn: 3,\n lost: 9,\n goalsFor: 9,\n goalsAgainst: 24,\n goalDifference: -15,\n points: 6\n }\n ],\n\n // 赛程数据\n fixtures: [\n {\n id: 1,\n round: 1,\n date: \"2025-03-01\",\n time: \"15:00\",\n homeTeamId: 1,\n awayTeamId: 2,\n venue: \"南京奥体中心\",\n status: \"completed\",\n homeScore: 2,\n awayScore: 1\n },\n {\n id: 2,\n round: 1,\n date: \"2025-03-01\",\n time: \"15:00\",\n homeTeamId: 3,\n awayTeamId: 4,\n venue: \"无锡体育中心\",\n status: \"completed\",\n homeScore: 1,\n awayScore: 1\n },\n {\n id: 3,\n round: 1,\n date: \"2025-03-02\",\n time: \"19:30\",\n homeTeamId: 5,\n awayTeamId: 6,\n venue: \"镇江体育会展中心\",\n status: \"completed\",\n homeScore: 0,\n awayScore: 2\n },\n {\n id: 4,\n round: 1,\n date: \"2025-03-02\",\n time: \"19:30\",\n homeTeamId: 7,\n awayTeamId: 8,\n venue: \"南通体育会展中心\",\n status: \"completed\",\n homeScore: 1,\n awayScore: 3\n },\n {\n id: 5,\n round: 1,\n date: \"2025-03-03\",\n time: \"15:00\",\n homeTeamId: 9,\n awayTeamId: 10,\n venue: \"淮安体育中心\",\n status: \"completed\",\n homeScore: 2,\n awayScore: 2\n },\n {\n id: 6,\n round: 1,\n date: \"2025-03-03\",\n time: \"15:00\",\n homeTeamId: 11,\n awayTeamId: 12,\n venue: \"泰州体育公园\",\n status: \"completed\",\n homeScore: 1,\n awayScore: 0\n },\n {\n id: 7,\n round: 2,\n date: \"2025-03-08\",\n time: \"15:00\",\n homeTeamId: 2,\n awayTeamId: 3,\n venue: \"苏州奥林匹克体育中心\",\n status: \"completed\",\n homeScore: 2,\n awayScore: 0\n },\n {\n id: 8,\n round: 2,\n date: \"2025-03-08\",\n time: \"15:00\",\n homeTeamId: 4,\n awayTeamId: 5,\n venue: \"常州奥林匹克体育中心\",\n status: \"completed\",\n homeScore: 3,\n awayScore: 1\n },\n {\n id: 9,\n round: 2,\n date: \"2025-03-09\",\n time: \"19:30\",\n homeTeamId: 6,\n awayTeamId: 7,\n venue: \"扬州体育公园\",\n status: \"completed\",\n homeScore: 1,\n awayScore: 1\n },\n {\n id: 10,\n round: 2,\n date: \"2025-03-09\",\n time: \"19:30\",\n homeTeamId: 8,\n awayTeamId: 9,\n venue: \"徐州奥体中心\",\n status: \"completed\",\n homeScore: 2,\n awayScore: 0\n },\n {\n id: 11,\n round: 2,\n date: \"2025-03-10\",\n time: \"15:00\",\n homeTeamId: 10,\n awayTeamId: 11,\n venue: \"盐城体育中心\",\n status: \"completed\",\n homeScore: 1,\n awayScore: 0\n },\n {\n id: 12,\n round: 2,\n date: \"2025-03-10\",\n time: \"15:00\",\n homeTeamId: 12,\n awayTeamId: 1,\n venue: \"宿迁体育中心\",\n status: \"completed\",\n homeScore: 0,\n awayScore: 3\n },\n {\n id: 13,\n round: 12,\n date: \"2025-05-24\",\n time: \"19:30\",\n homeTeamId: 1,\n awayTeamId: 2,\n venue: \"南京奥体中心\",\n status: \"scheduled\"\n },\n {\n id: 14,\n round: 12,\n date: \"2025-05-24\",\n time: \"15:00\",\n homeTeamId: 3,\n awayTeamId: 4,\n venue: \"无锡体育中心\",\n status: \"scheduled\"\n },\n {\n id: 15,\n round: 12,\n date: \"2025-05-25\",\n time: \"19:30\",\n homeTeamId: 5,\n awayTeamId: 6,\n venue: \"镇江体育会展中心\",\n status: \"scheduled\"\n },\n {\n id: 16,\n round: 12,\n date: \"2025-05-25\",\n time: \"15:00\",\n homeTeamId: 7,\n awayTeamId: 8,\n venue: \"南通体育会展中心\",\n status: \"scheduled\"\n },\n {\n id: 17,\n round: 12,\n date: \"2025-05-26\",\n time: \"19:30\",\n homeTeamId: 9,\n awayTeamId: 10,\n venue: \"淮安体育中心\",\n status: \"scheduled\"\n },\n {\n id: 18,\n round: 12,\n date: \"2025-05-26\",\n time: \"15:00\",\n homeTeamId: 11,\n awayTeamId: 12,\n venue: \"泰州体育公园\",\n status: \"scheduled\"\n }\n ],\n\n // 球员数据\n players: {\n scorers: [\n {\n rank: 1,\n playerId: 101,\n name: \"张伟\",\n teamId: 1,\n goals: 12,\n assists: 4,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 2,\n playerId: 102,\n name: \"李明\",\n teamId: 1,\n goals: 8,\n assists: 6,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 3,\n playerId: 201,\n name: \"王强\",\n teamId: 2,\n goals: 7,\n assists: 5,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 4,\n playerId: 301,\n name: \"赵刚\",\n teamId: 3,\n goals: 6,\n assists: 3,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 5,\n playerId: 801,\n name: \"陈明\",\n teamId: 8,\n goals: 6,\n assists: 2,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 6,\n playerId: 401,\n name: \"孙磊\",\n teamId: 4,\n goals: 5,\n assists: 4,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 7,\n playerId: 601,\n name: \"钱勇\",\n teamId: 6,\n goals: 5,\n assists: 3,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 8,\n playerId: 501,\n name: \"吴斌\",\n teamId: 5,\n goals: 4,\n assists: 5,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 9,\n playerId: 701,\n name: \"冯超\",\n teamId: 7,\n goals: 4,\n assists: 3,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 10,\n playerId: 1001,\n name: \"郑涛\",\n teamId: 10,\n goals: 3,\n assists: 2,\n matches: 13,\n minutes: 1170\n }\n ],\n \n assists: [\n {\n rank: 1,\n playerId: 102,\n name: \"李明\",\n teamId: 1,\n assists: 6,\n goals: 8,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 2,\n playerId: 501,\n name: \"吴斌\",\n teamId: 5,\n assists: 5,\n goals: 4,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 3,\n playerId: 201,\n name: \"王强\",\n teamId: 2,\n assists: 5,\n goals: 7,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 4,\n playerId: 401,\n name: \"孙磊\",\n teamId: 4,\n assists: 4,\n goals: 5,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 5,\n playerId: 101,\n name: \"张伟\",\n teamId: 1,\n assists: 4,\n goals: 12,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 6,\n playerId: 301,\n name: \"赵刚\",\n teamId: 3,\n assists: 3,\n goals: 6,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 7,\n playerId: 601,\n name: \"钱勇\",\n teamId: 6,\n assists: 3,\n goals: 5,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 8,\n playerId: 701,\n name: \"冯超\",\n teamId: 7,\n assists: 3,\n goals: 4,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 9,\n playerId: 901,\n name: \"周伟\",\n teamId: 9,\n assists: 3,\n goals: 2,\n matches: 13,\n minutes: 1170\n },\n {\n rank: 10,\n playerId: 1101,\n name: \"王刚\",\n teamId: 11,\n assists: 2,\n goals: 1,\n matches: 13,\n minutes: 1170\n }\n ]\n },\n\n // 新闻数据\n news: [\n {\n id: 1,\n title: \"南京城联主场力克苏州雄狮，继续领跑积分榜\",\n excerpt: \"在昨晚进行的第12轮焦点战中，南京城联凭借张伟的梅开二度，主场2-1战胜苏州雄狮，继续以2分优势领跑积分榜。\",\n category: \"比赛战报\",\n date: \"2025-05-25\",\n imageColor: \"#dc2626\"\n },\n {\n id: 2,\n title: \"联赛最佳球员揭晓：张伟当选4月最佳\",\n excerpt: \"江苏城市足球联赛官方宣布，南京城联前锋张伟凭借出色的表现，当选4月份联赛最佳球员。\",\n category: \"官方公告\",\n date: \"2025-05-20\",\n imageColor: \"#3b82f6\"\n },\n {\n id: 3,\n title: \"徐州楚汉签下前国脚李强，实力大增\",\n excerpt: \"徐州楚汉俱乐部官方宣布，与前国家队中场李强签约两年，这位经验丰富的老将将提升球队中场实力。\",\n category: \"转会新闻\",\n date: \"2025-05-18\",\n imageColor: \"#84cc16\"\n },\n {\n id: 4,\n title: \"联赛半程总结：竞争激烈，多队有望争冠\",\n excerpt: \"随着联赛进入半程，积分榜前六名球队分差仅7分，本赛季冠军争夺异常激烈，多支球队都有机会问鼎。\",\n category: \"联赛动态\",\n date: \"2025-05-15\",\n imageColor: \"#f59e0b\"\n },\n {\n id: 5,\n title: \"球迷互动日：各俱乐部将举办开放训练\",\n excerpt: \"为感谢球迷支持，各俱乐部将在本周末举办球迷开放日，球迷可近距离观看球队训练并与球员互动。\",\n category: \"球迷活动\",\n date: \"2025-05-12\",\n imageColor: \"#ec4899\"\n },\n {\n id: 6,\n title: \"技术统计：联赛进球数创历史新高\",\n excerpt: \"本赛季前13轮共打进176球，场均2.77球，创下联赛历史同期最高进球纪录，进攻足球成为主流。\",\n category: \"数据统计\",\n date: \"2025-05-10\",\n imageColor: \"#0ea5e9\"\n }\n ]\n};\n\n// 工具函数：根据ID获取球队信息\nfunction getTeamById(teamId) {\n return leagueData.teams.find(team => team.id === teamId);\n}\n\n// 工具函数：格式化日期\nfunction formatDate(dateString) {\n const date = new Date(dateString);\n const options = { weekday: 'short', month: 'short', day: 'numeric' };\n return date.toLocaleDateString('zh-CN', options);\n}\n\n// 工具函数：格式化时间\nfunction formatTime(timeString) {\n return timeString;\n}\n\n// 导出数据\nif (typeof module !== 'undefined' && module.exports) {\n module.exports = leagueData;\n}" + }, + "id": "call_2n4xbmvd8k66n0wp5cc3escs", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "OK", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "write_file", + "id": "2fae669c-39a7-4100-b245-5d0cf0551654", + "tool_call_id": "call_2n4xbmvd8k66n0wp5cc3escs", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd12c-709d-7bc1-ab23-4ee29fc93682", + "tool_calls": [ + { + "name": "write_file", + "args": { + "description": "创建主JavaScript文件", + "path": "/mnt/user-data/workspace/jiangsu-football/js/main.js", + "content": "// 江苏城市足球联赛2025赛季 - 主JavaScript文件\n\ndocument.addEventListener('DOMContentLoaded', function() {\n // 初始化加载动画\n initLoader();\n \n // 初始化主题切换\n initThemeToggle();\n \n // 初始化导航菜单\n initNavigation();\n \n // 初始化滚动监听\n initScrollSpy();\n \n // 渲染球队卡片\n renderTeams();\n \n // 渲染积分榜\n renderStandings();\n \n // 渲染赛程表\n renderFixtures();\n \n // 渲染数据统计\n renderStats();\n \n // 渲染新闻动态\n renderNews();\n \n // 初始化标签页切换\n initTabs();\n \n // 初始化移动端菜单\n initMobileMenu();\n});\n\n// 加载动画\nfunction initLoader() {\n const loader = document.querySelector('.loader');\n \n // 模拟加载延迟\n setTimeout(() => {\n loader.classList.add('loaded');\n \n // 动画结束后隐藏loader\n setTimeout(() => {\n loader.style.display = 'none';\n }, 300);\n }, 1500);\n}\n\n// 主题切换\nfunction initThemeToggle() {\n const themeToggle = document.querySelector('.btn-theme-toggle');\n const themeIcon = themeToggle.querySelector('i');\n \n // 检查本地存储的主题偏好\n const savedTheme = localStorage.getItem('theme') || 'light';\n document.documentElement.setAttribute('data-theme', savedTheme);\n updateThemeIcon(savedTheme);\n \n themeToggle.addEventListener('click', () => {\n const currentTheme = document.documentElement.getAttribute('data-theme');\n const newTheme = currentTheme === 'light' ? 'dark' : 'light';\n \n document.documentElement.setAttribute('data-theme', newTheme);\n localStorage.setItem('theme', newTheme);\n updateThemeIcon(newTheme);\n \n // 添加切换动画\n themeToggle.style.transform = 'scale(0.9)';\n setTimeout(() => {\n themeToggle.style.transform = '';\n }, 150);\n });\n \n function updateThemeIcon(theme) {\n if (theme === 'dark') {\n themeIcon.className = 'fas fa-sun';\n } else {\n themeIcon.className = 'fas fa-moon';\n }\n }\n}\n\n// 导航菜单\nfunction initNavigation() {\n const navLinks = document.querySelectorAll('.nav-link');\n \n navLinks.forEach(link => {\n link.addEventListener('click', function(e) {\n e.preventDefault();\n \n const targetId = this.getAttribute('href');\n const targetSection = document.querySelector(targetId);\n \n if (targetSection) {\n // 更新活动链接\n navLinks.forEach(l => l.classList.remove('active'));\n this.classList.add('active');\n \n // 平滑滚动到目标区域\n window.scrollTo({\n top: targetSection.offsetTop - 80,\n behavior: 'smooth'\n });\n \n // 如果是移动端，关闭菜单\n const navMenu = document.querySelector('.nav-menu');\n if (navMenu.classList.contains('active')) {\n navMenu.classList.remove('active');\n }\n }\n });\n });\n}\n\n// 滚动监听\nfunction initScrollSpy() {\n const sections = document.querySelectorAll('section[id]');\n const navLinks = document.querySelectorAll('.nav-link');\n \n window.addEventListener('scroll', () => {\n let current = '';\n \n sections.forEach(section => {\n const sectionTop = section.offsetTop;\n const sectionHeight = section.clientHeight;\n \n if (scrollY >= sectionTop - 100) {\n current = section.getAttribute('id');\n }\n });\n \n navLinks.forEach(link => {\n link.classList.remove('active');\n if (link.getAttribute('href') === `#${current}`) {\n link.classList.add('active');\n }\n });\n });\n}\n\n// 渲染球队卡片\nfunction renderTeams() {\n const teamsGrid = document.querySelector('.teams-grid');\n \n if (!teamsGrid) return;\n \n teamsGrid.innerHTML = '';\n \n leagueData.teams.forEach(team => {\n const teamCard = document.createElement('div');\n teamCard.className = 'team-card';\n \n // 获取球队统计数据\n const standing = leagueData.standings.find(s => s.teamId === team.id);\n \n teamCard.innerHTML = `\n
\n ${team.shortName}\n
\n

${team.name}

\n
${team.city}
\n
\n
\n
${standing ? standing.rank : '-'}
\n
排名
\n
\n
\n
${standing ? standing.points : '0'}
\n
积分
\n
\n
\n
${standing ? standing.goalDifference : '0'}
\n
净胜球
\n
\n
\n `;\n \n teamCard.addEventListener('click', () => {\n // 这里可以添加点击跳转到球队详情页的功能\n alert(`查看 ${team.name} 的详细信息`);\n });\n \n teamsGrid.appendChild(teamCard);\n });\n}\n\n// 渲染积分榜\nfunction renderStandings() {\n const standingsTable = document.querySelector('.standings-table tbody');\n \n if (!standingsTable) return;\n \n standingsTable.innerHTML = '';\n \n leagueData.standings.forEach(standing => {\n const team = getTeamById(standing.teamId);\n \n const row = document.createElement('tr');\n \n // 根据排名添加特殊样式\n if (standing.rank <= 4) {\n row.classList.add('champions-league');\n } else if (standing.rank <= 6) {\n row.classList.add('europa-league');\n } else if (standing.rank >= 11) {\n row.classList.add('relegation');\n }\n \n row.innerHTML = `\n ${standing.rank}\n \n
\n
\n ${team.name}\n
\n \n ${standing.played}\n ${standing.won}\n ${standing.drawn}\n ${standing.lost}\n ${standing.goalsFor}\n ${standing.goalsAgainst}\n ${standing.goalDifference > 0 ? '+' : ''}${standing.goalDifference}\n ${standing.points}\n `;\n \n standingsTable.appendChild(row);\n });\n}\n\n// 渲染赛程表\nfunction renderFixtures() {\n const fixturesList = document.querySelector('.fixtures-list');\n \n if (!fixturesList) return;\n \n fixturesList.innerHTML = '';\n \n // 按轮次分组\n const fixturesByRound = {};\n leagueData.fixtures.forEach(fixture => {\n if (!fixturesByRound[fixture.round]) {\n fixturesByRound[fixture.round] = [];\n }\n fixturesByRound[fixture.round].push(fixture);\n });\n \n // 渲染所有赛程\n Object.keys(fixturesByRound).sort((a, b) => a - b).forEach(round => {\n const roundHeader = document.createElement('div');\n roundHeader.className = 'fixture-round-header';\n roundHeader.innerHTML = `

第${round}轮

`;\n fixturesList.appendChild(roundHeader);\n \n fixturesByRound[round].forEach(fixture => {\n const homeTeam = getTeamById(fixture.homeTeamId);\n const awayTeam = getTeamById(fixture.awayTeamId);\n \n const fixtureItem = document.createElement('div');\n fixtureItem.className = 'fixture-item';\n \n const date = new Date(fixture.date);\n const dayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];\n const dayName = dayNames[date.getDay()];\n \n let scoreHtml = '';\n let statusText = '';\n \n if (fixture.status === 'completed') {\n scoreHtml = `\n
${fixture.homeScore} - ${fixture.awayScore}
\n
已结束
\n `;\n } else if (fixture.status === 'scheduled') {\n scoreHtml = `\n
VS
\n
${fixture.time}
\n `;\n } else {\n scoreHtml = `\n
-
\n
待定
\n `;\n }\n \n fixtureItem.innerHTML = `\n
\n
${dayName}
\n
${formatDate(fixture.date)}
\n
\n
\n
\n
${homeTeam.name}
\n
\n
\n
VS
\n
\n
\n
${awayTeam.name}
\n
\n
\n
\n ${scoreHtml}\n
\n `;\n \n fixturesList.appendChild(fixtureItem);\n });\n });\n}\n\n// 渲染数据统计\nfunction renderStats() {\n renderScorers();\n renderAssists();\n renderTeamStats();\n}\n\nfunction renderScorers() {\n const scorersContainer = document.querySelector('#scorers');\n \n if (!scorersContainer) return;\n \n scorersContainer.innerHTML = `\n \n \n \n \n \n \n \n \n \n \n \n \n ${leagueData.players.scorers.map(player => {\n const team = getTeamById(player.teamId);\n return `\n \n \n \n \n \n \n \n \n `;\n }).join('')}\n \n
排名球员球队进球助攻出场
${player.rank}${player.name}${team.name}${player.goals}${player.assists}${player.matches}
\n `;\n}\n\nfunction renderAssists() {\n const assistsContainer = document.querySelector('#assists');\n \n if (!assistsContainer) return;\n \n assistsContainer.innerHTML = `\n \n \n \n \n \n \n \n \n \n \n \n \n ${leagueData.players.assists.map(player => {\n const team = getTeamById(player.teamId);\n return `\n \n \n \n \n \n \n \n \n `;\n }).join('')}\n \n
排名球员球队助攻进球出场
${player.rank}${player.name}${team.name}${player.assists}${player.goals}${player.matches}
\n `;\n}\n\nfunction renderTeamStats() {\n const teamStatsContainer = document.querySelector('#teams');\n \n if (!teamStatsContainer) return;\n \n // 计算球队统计数据\n const teamStats = leagueData.standings.map(standing => {\n const team = getTeamById(standing.teamId);\n const goalsPerGame = (standing.goalsFor / standing.played).toFixed(2);\n const concededPerGame = (standing.goalsAgainst / standing.played).toFixed(2);\n \n return {\n rank: standing.rank,\n team: team.name,\n goalsFor: standing.goalsFor,\n goalsAgainst: standing.goalsAgainst,\n goalDifference: standing.goalDifference,\n goalsPerGame,\n concededPerGame,\n cleanSheets: Math.floor(Math.random() * 5) // 模拟数据\n };\n }).sort((a, b) => a.rank - b.rank);\n \n teamStatsContainer.innerHTML = `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ${teamStats.map(stat => `\n \n \n \n \n \n \n \n \n \n \n `).join('')}\n \n
排名球队进球失球净胜球场均进球场均失球零封
${stat.rank}${stat.team}${stat.goalsFor}${stat.goalsAgainst}${stat.goalDifference > 0 ? '+' : ''}${stat.goalDifference}${stat.goalsPerGame}${stat.concededPerGame}${stat.cleanSheets}
\n `;\n}\n\n// 渲染新闻动态\nfunction renderNews() {\n const newsGrid = document.querySelector('.news-grid');\n \n if (!newsGrid) return;\n \n newsGrid.innerHTML = '';\n \n leagueData.news.forEach(newsItem => {\n const newsCard = document.createElement('div');\n newsCard.className = 'news-card';\n \n const date = new Date(newsItem.date);\n const formattedDate = date.toLocaleDateString('zh-CN', {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n });\n \n newsCard.innerHTML = `\n
\n
\n ${newsItem.category}\n

${newsItem.title}

\n

${newsItem.excerpt}

\n
\n \n \n ${formattedDate}\n \n 阅读更多 →\n
\n
\n `;\n \n newsCard.addEventListener('click', () => {\n alert(`查看新闻: ${newsItem.title}`);\n });\n \n newsGrid.appendChild(newsCard);\n });\n}\n\n// 初始化标签页切换\nfunction initTabs() {\n // 赛程标签页\n const fixtureTabs = document.querySelectorAll('.fixtures-tabs .tab');\n const fixtureItems = document.querySelectorAll('.fixture-item');\n \n fixtureTabs.forEach(tab => {\n tab.addEventListener('click', () => {\n // 更新活动标签\n fixtureTabs.forEach(t => t.classList.remove('active'));\n tab.classList.add('active');\n \n const roundFilter = tab.getAttribute('data-round');\n \n // 这里可以根据筛选条件显示不同的赛程\n // 由于时间关系，这里只是简单的演示\n console.log(`筛选赛程: ${roundFilter}`);\n });\n });\n \n // 数据统计标签页\n const statsTabs = document.querySelectorAll('.stats-tab');\n const statsContents = document.querySelectorAll('.stats-tab-content');\n \n statsTabs.forEach(tab => {\n tab.addEventListener('click', () => {\n const tabId = tab.getAttribute('data-tab');\n \n // 更新活动标签\n statsTabs.forEach(t => t.classList.remove('active'));\n tab.classList.add('active');\n \n // 显示对应内容\n statsContents.forEach(content => {\n content.classList.remove('active');\n if (content.id === tabId) {\n content.classList.add('active');\n }\n });\n });\n });\n}\n\n// 初始化移动端菜单\nfunction initMobileMenu() {\n const menuToggle = document.querySelector('.btn-menu-toggle');\n const navMenu = document.querySelector('.nav-menu');\n \n if (menuToggle && navMenu) {\n menuToggle.addEventListener('click', () => {\n navMenu.classList.toggle('active');\n \n // 更新菜单图标\n const icon = menuToggle.querySelector('i');\n if (navMenu.classList.contains('active')) {\n icon.className = 'fas fa-times';\n } else {\n icon.className = 'fas fa-bars';\n }\n });\n \n // 点击菜单外区域关闭菜单\n document.addEventListener('click', (e) => {\n if (!navMenu.contains(e.target) && !menuToggle.contains(e.target)) {\n navMenu.classList.remove('active');\n menuToggle.querySelector('i').className = 'fas fa-bars';\n }\n });\n }\n}\n\n// 工具函数：加深颜色\nfunction darkenColor(color, percent) {\n const num = parseInt(color.replace(\"#\", \"\"), 16);\n const amt = Math.round(2.55 * percent);\n const R = (num >> 16) - amt;\n const G = (num >> 8 & 0x00FF) - amt;\n const B = (num & 0x0000FF) - amt;\n \n return \"#\" + (\n 0x1000000 +\n (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +\n (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +\n (B < 255 ? B < 1 ? 0 : B : 255)\n ).toString(16).slice(1);\n}\n\n// 工具函数：格式化日期（简写）\nfunction formatDate(dateString) {\n const date = new Date(dateString);\n const month = date.getMonth() + 1;\n const day = date.getDate();\n return `${month}月${day}日`;\n}\n\n// 工具函数：根据ID获取球队信息\nfunction getTeamById(teamId) {\n return leagueData.teams.find(team => team.id === teamId);\n}\n\n// 添加一些交互效果\ndocument.addEventListener('DOMContentLoaded', () => {\n // 为所有按钮添加点击效果\n const buttons = document.querySelectorAll('.btn');\n buttons.forEach(button => {\n button.addEventListener('mousedown', () => {\n button.style.transform = 'scale(0.95)';\n });\n \n button.addEventListener('mouseup', () => {\n button.style.transform = '';\n });\n \n button.addEventListener('mouseleave', () => {\n button.style.transform = '';\n });\n });\n \n // 为卡片添加悬停效果\n const cards = document.querySelectorAll('.team-card, .news-card');\n cards.forEach(card => {\n card.addEventListener('mouseenter', () => {\n card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';\n });\n });\n});" + }, + "id": "call_9lj7mvsodb1xqilu9xc4qlqp", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "OK", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "write_file", + "id": "8e1b415e-7a5e-4e88-b82c-e69d89b87cac", + "tool_call_id": "call_9lj7mvsodb1xqilu9xc4qlqp", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "现在需要创建一个简单的favicon图标。让我也创建一个基本的favicon。" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd12e-a4a2-7942-8950-48f13a85093a", + "tool_calls": [ + { + "name": "bash", + "args": { + "description": "创建favicon文件", + "command": "cd /mnt/user-data/workspace/jiangsu-football && echo '⚽\">' > favicon.html" + }, + "id": "call_nu1wgj0b4co3vbqsft1y6tls", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "(no output)", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "bash", + "id": "dbd0204e-6c1f-481d-a3ce-2f07603f327f", + "tool_call_id": "call_nu1wgj0b4co3vbqsft1y6tls", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "现在我需要更新HTML文件，添加favicon引用。让我检查一下目录结构，然后添加favicon。" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd12e-cf14-7593-8c4f-a1ea352fe560", + "tool_calls": [ + { + "name": "read_file", + "args": { + "description": "读取HTML文件以添加favicon", + "path": "/mnt/user-data/workspace/jiangsu-football/index.html", + "start_line": 1, + "end_line": 20 + }, + "id": "call_qev9hfegoptbev6cijaej7an", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "\n\n\n \n \n 江苏城市足球联赛2025赛季 | 苏超联赛第一季\n \n \n \n \n \n \n\n\n \n
\n
\n
\n
加载中...
\n
", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "read_file", + "id": "eb1c3068-bf6a-45af-9bc8-fe42bbfcbcb0", + "tool_call_id": "call_qev9hfegoptbev6cijaej7an", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd12e-f542-7fd0-abf4-40646991632a", + "tool_calls": [ + { + "name": "str_replace", + "args": { + "description": "在HTML中添加favicon", + "path": "/mnt/user-data/workspace/jiangsu-football/index.html", + "old_str": " \n", + "new_str": " \n ⚽\">\n" + }, + "id": "call_9gb4vza35lxlj50pe6b0taeq", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "OK", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "str_replace", + "id": "a8b8000d-0cd4-4230-90d4-f68d475b8b2a", + "tool_call_id": "call_9gb4vza35lxlj50pe6b0taeq", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "现在需要将文件复制到输出目录并呈现给用户。让我先检查一下工作空间的内容。" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd12f-21db-7b51-9c9d-0b353680080a", + "tool_calls": [ + { + "name": "ls", + "args": { + "description": "检查工作空间目录结构", + "path": "/mnt/user-data/workspace/jiangsu-football" + }, + "id": "call_0xsd208zyb4gg6fq9och14qi", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "/mnt/user-data/workspace/jiangsu-football\n/mnt/user-data/workspace/jiangsu-football/index.html\n/mnt/user-data/workspace/jiangsu-football/css\n/mnt/user-data/workspace/jiangsu-football/css/style.css\n/mnt/user-data/workspace/jiangsu-football/js\n/mnt/user-data/workspace/jiangsu-football/js/main.js\n/mnt/user-data/workspace/jiangsu-football/js/data.js\n/mnt/user-data/workspace/jiangsu-football/favicon.html", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "ls", + "id": "1dd5a7ab-0eae-4330-946a-35517ad39391", + "tool_call_id": "call_0xsd208zyb4gg6fq9och14qi", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd12f-4497-7803-8e07-05c9f5b087a8", + "tool_calls": [ + { + "name": "bash", + "args": { + "description": "将网站文件复制到输出目录", + "command": "mkdir -p /mnt/user-data/outputs/jiangsu-football && cp -r /mnt/user-data/workspace/jiangsu-football/* /mnt/user-data/outputs/jiangsu-football/" + }, + "id": "call_8503w1nb91rqo7i4u6rrztiv", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "(no output)", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "bash", + "id": "911481b9-d58e-40e5-825f-58005273b520", + "tool_call_id": "call_8503w1nb91rqo7i4u6rrztiv", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "现在我已经为江苏城市足球联赛2025赛季（苏超联赛第一季）创建了一个酷炫的足球网站！让我为您总结一下这个网站的特点：\n\n## 🎯 网站核心功能\n\n### 1. **现代炫酷设计**\n- 采用江苏蓝与活力橙的主色调方案\n- 响应式设计，适配所有设备（手机、平板、电脑）\n- 流畅的动画效果和交互体验\n- 支持明暗主题切换\n\n### 2. **完整功能模块**\n- **英雄展示区**：震撼的视觉设计，展示联赛核心信息\n- **下一场比赛**：突出显示即将进行的焦点战\n- **球队展示**：12支参赛球队的完整信息卡片\n- **实时积分榜**：完整的数据统计和排名\n- **赛程安排**：按轮次分组的所有比赛信息\n- **数据统计**：射手榜、助攻榜、球队数据\n- **新闻动态**：联赛最新资讯和公告\n\n### 3. **技术特色**\n- 纯HTML/CSS/JavaScript实现，无需后端\n- 模块化代码结构，易于维护和扩展\n- 本地数据存储，快速加载\n- 平滑滚动和导航效果\n- 移动端优化菜单\n\n## 📁 文件结构\n```\njiangsu-football/\n├── index.html # 主页面\n├── css/\n│ └── style.css # 所有样式\n├── js/\n│ ├── main.js # 主逻辑\n│ └── data.js # 联赛数据\n└── favicon.html # 图标\n```\n\n## 🚀 使用说明\n1. 网站已准备好，可以直接在浏览器中打开使用\n2. 所有数据已预置，包括12支江苏城市球队\n3. 支持主题切换（明/暗模式）\n4. 完全响应式，在任何设备上都有良好体验\n\n这个网站不仅外观酷炫，而且功能完整，可以作为江苏城市足球联赛2025赛季的官方展示平台。您可以直接使用，也可以根据需要进行定制修改。\n\n" + }, + "response_metadata": { + "finish_reason": "tool_calls", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd12f-6ac5-7da2-b6c5-320de21bfa11", + "tool_calls": [ + { + "name": "present_files", + "args": { + "filepaths": [ + "/mnt/user-data/outputs/jiangsu-football/index.html", + "/mnt/user-data/outputs/jiangsu-football/css/style.css", + "/mnt/user-data/outputs/jiangsu-football/js/main.js", + "/mnt/user-data/outputs/jiangsu-football/js/data.js" + ] + }, + "id": "call_e875m1tujevko4opahoghu5v", + "type": "tool_call" + } + ], + "invalid_tool_calls": [], + "usage_metadata": null + }, + { + "content": "Successfully presented files", + "additional_kwargs": {}, + "response_metadata": {}, + "type": "tool", + "name": "present_files", + "id": "3424c104-f7ec-4059-b944-62679fda2593", + "tool_call_id": "call_e875m1tujevko4opahoghu5v", + "artifact": null, + "status": "success" + }, + { + "content": "", + "additional_kwargs": { + "reasoning_content": "我已经为您创建了一个酷炫的江苏城市足球联赛2025赛季（苏超联赛第一季）官方网站！\n\n## 网站特色：\n\n### 🎨 设计亮点：\n1. **现代炫酷设计** - 采用江苏蓝与活力橙的主题配色，配合动态视觉效果\n2. **响应式布局** - 完美适配手机、平板和桌面设备\n3. **暗色/亮色主题切换** - 支持一键切换主题模式\n4. **流畅动画** - 包含加载动画、悬浮效果、滚动指示器等交互元素\n\n### ⚽ 核心功能：\n1. **英雄展示区** - 动态球场背景，展示联赛基本信息\n2. **下一场比赛** - 突出显示即将进行的焦点对决\n3. **球队展示** - 12支参赛球队卡片，包含队徽、城市、战绩\n4. **实时积分榜** - 完整的联赛排名数据\n5. **赛程表** - 按轮次展示所有比赛安排\n6. **数据统计** - 射手榜、助攻榜、球队数据排行榜\n7. **新闻动态** - 联赛最新资讯和公告\n\n### 📱 技术特点：\n- **HTML5/CSS3/JavaScript** 原生实现\n- **CSS Grid & Flexbox** 现代布局\n- **CSS变量** 实现主题切换\n- **本地存储** 保存用户主题偏好\n- **平滑滚动** 和 **滚动监听**\n- **移动端友好** 的导航菜单\n\n### 🏆 数据内容：\n网站包含了完整的模拟数据：\n- 12支江苏城市代表队（南京、苏州、无锡、常州等）\n- 完整的积分榜和球队战绩\n- 详细的赛程安排\n- 球员数据统计（射手榜、助攻榜）\n- 最新联赛新闻\n\n网站已准备好，您可以直接打开 `/mnt/user-data/outputs/jiangsu-football/index.html` 文件在浏览器中查看效果。所有文件都采用了现代化的前端技术，视觉效果出色且功能完整！\n\n需要我为您添加任何特定功能或调整设计风格吗？" + }, + "response_metadata": { + "finish_reason": "stop", + "model_name": "deepseek-v3-2-251201", + "service_tier": "default", + "model_provider": "deepseek" + }, + "type": "ai", + "name": null, + "id": "lc_run--019bd12f-bc6c-78b0-ab9f-b8c6721b2534", + "tool_calls": [], + "invalid_tool_calls": [], + "usage_metadata": null + } + ], + "title": "苏超联赛酷炫网站设计", + "thread_data": { + "workspace_path": "/Users/henry/Desktop/deer-flow/backend/.deer-flow/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/workspace", + "uploads_path": "/Users/henry/Desktop/deer-flow/backend/.deer-flow/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/uploads", + "outputs_path": "/Users/henry/Desktop/deer-flow/backend/.deer-flow/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs" + }, + "artifacts": [ + "/mnt/user-data/outputs/jiangsu-football/index.html", + "/mnt/user-data/outputs/jiangsu-football/css/style.css", + "/mnt/user-data/outputs/jiangsu-football/js/main.js", + "/mnt/user-data/outputs/jiangsu-football/js/data.js" + ] + }, + "next": [], + "tasks": [], + "metadata": { + "model_name": "deepseek-v3.2", + "thinking_enabled": true, + "model": "doubao-seed-1.8", + "graph_id": "lead_agent", + "assistant_id": "bee7d354-5df5-5f26-a978-10ea053f620d", + "user_id": "", + "created_by": "system", + "thread_id": "5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a", + "checkpoint_id": "1f0f46b4-803f-66de-8006-b71d259638a9", + "checkpoint_ns": "", + "run_id": "019bd122-8639-7051-b31a-5c2e29a0864e", + "run_attempt": 1, + "langgraph_version": "1.0.6", + "langgraph_api_version": "0.6.38", + "langgraph_plan": "developer", + "langgraph_host": "self-hosted", + "langgraph_api_url": "http://127.0.0.1:2024", + "source": "loop", + "step": 44, + "parents": {}, + "langgraph_auth_user_id": "", + "langgraph_request_id": "faea6d41-1583-45fe-b487-2ebd6c6eb842" + }, + "created_at": "2026-01-18T12:59:04.188629+00:00", + "checkpoint": { + "checkpoint_id": "1f0f46d7-77ea-64ca-802c-0462f9bf4fdd", + "thread_id": "5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a", + "checkpoint_ns": "" + }, + "parent_checkpoint": { + "checkpoint_id": "1f0f46d7-77e2-6496-802b-68a165ed83e9", + "thread_id": "5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a", + "checkpoint_ns": "" + }, + "interrupts": [], + "checkpoint_id": "1f0f46d7-77ea-64ca-802c-0462f9bf4fdd", + "parent_checkpoint_id": "1f0f46d7-77e2-6496-802b-68a165ed83e9" +} \ No newline at end of file diff --git a/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/css/style.css b/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/css/style.css new file mode 100644 index 0000000..567280b --- /dev/null +++ b/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/css/style.css @@ -0,0 +1,1838 @@ +/* 江苏城市足球联赛2025赛季 - 主样式文件 */ + +:root { + /* 主色调 - 江苏蓝与活力橙 */ + --color-primary: #1a56db; + --color-primary-dark: #1e3a8a; + --color-primary-light: #3b82f6; + --color-secondary: #f59e0b; + --color-secondary-dark: #d97706; + --color-secondary-light: #fbbf24; + + /* 中性色 */ + --color-white: #ffffff; + --color-gray-50: #f9fafb; + --color-gray-100: #f3f4f6; + --color-gray-200: #e5e7eb; + --color-gray-300: #d1d5db; + --color-gray-400: #9ca3af; + --color-gray-500: #6b7280; + --color-gray-600: #4b5563; + --color-gray-700: #374151; + --color-gray-800: #1f2937; + --color-gray-900: #111827; + --color-black: #000000; + + /* 功能色 */ + --color-success: #10b981; + --color-warning: #f59e0b; + --color-danger: #ef4444; + --color-info: #3b82f6; + + /* 字体 */ + --font-heading: 'Oswald', sans-serif; + --font-body: 'Inter', sans-serif; + --font-display: 'Montserrat', sans-serif; + + /* 尺寸 */ + --container-max: 1280px; + --border-radius-sm: 4px; + --border-radius-md: 8px; + --border-radius-lg: 16px; + --border-radius-xl: 24px; + --border-radius-2xl: 32px; + + /* 阴影 */ + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + + /* 过渡 */ + --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); + --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1); + --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); + + /* 动效 */ + --animation-bounce: bounce 1s infinite; + --animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + --animation-spin: spin 1s linear infinite; +} + +/* 暗色主题变量 */ +[data-theme="dark"] { + --color-white: #111827; + --color-gray-50: #1f2937; + --color-gray-100: #374151; + --color-gray-200: #4b5563; + --color-gray-300: #6b7280; + --color-gray-400: #9ca3af; + --color-gray-500: #d1d5db; + --color-gray-600: #e5e7eb; + --color-gray-700: #f3f4f6; + --color-gray-800: #f9fafb; + --color-gray-900: #ffffff; + --color-black: #f9fafb; +} + +/* 重置与基础样式 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; + font-size: 16px; +} + +body { + font-family: var(--font-body); + font-size: 1rem; + line-height: 1.5; + color: var(--color-gray-800); + background-color: var(--color-white); + overflow-x: hidden; + transition: background-color var(--transition-normal), color var(--transition-normal); +} + +.container { + width: 100%; + max-width: var(--container-max); + margin: 0 auto; + padding: 0 1.5rem; +} + +/* 加载动画 */ +.loader { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + opacity: 1; + visibility: visible; + transition: opacity var(--transition-normal), visibility var(--transition-normal); +} + +.loader.loaded { + opacity: 0; + visibility: hidden; +} + +.loader-content { + text-align: center; +} + +.football { + width: 80px; + height: 80px; + background: linear-gradient(45deg, var(--color-white) 25%, var(--color-gray-200) 25%, var(--color-gray-200) 50%, var(--color-white) 50%, var(--color-white) 75%, var(--color-gray-200) 75%); + background-size: 20px 20px; + border-radius: 50%; + margin: 0 auto 2rem; + animation: var(--animation-spin); + position: relative; +} + +.football::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 30px; + height: 30px; + background: var(--color-secondary); + border-radius: 50%; + border: 3px solid var(--color-white); +} + +.loader-text { + font-family: var(--font-heading); + font-size: 1.5rem; + font-weight: 500; + color: var(--color-white); + letter-spacing: 2px; + text-transform: uppercase; +} + +/* 导航栏 */ +.navbar { + position: fixed; + top: 0; + left: 0; + width: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--color-gray-200); + z-index: 1000; + transition: all var(--transition-normal); +} + +[data-theme="dark"] .navbar { + background: rgba(17, 24, 39, 0.95); + border-bottom-color: var(--color-gray-700); +} + +.navbar .container { + display: flex; + align-items: center; + justify-content: space-between; + height: 80px; +} + +.nav-brand { + display: flex; + align-items: center; + gap: 1rem; +} + +.logo { + display: flex; + align-items: center; + gap: 0.75rem; + cursor: pointer; +} + +.logo-ball { + width: 36px; + height: 36px; + background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); + border-radius: 50%; + position: relative; + animation: var(--animation-pulse); +} + +.logo-ball::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 12px; + height: 12px; + background: var(--color-white); + border-radius: 50%; +} + +.logo-text { + font-family: var(--font-heading); + font-size: 1.5rem; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 1px; +} + +[data-theme="dark"] .logo-text { + color: var(--color-white); +} + +.league-name { + font-family: var(--font-body); + font-size: 0.875rem; + font-weight: 500; + color: var(--color-gray-600); + padding-left: 1rem; + border-left: 1px solid var(--color-gray-300); +} + +[data-theme="dark"] .league-name { + color: var(--color-gray-400); + border-left-color: var(--color-gray-600); +} + +.nav-menu { + display: flex; + gap: 2rem; +} + +.nav-link { + font-family: var(--font-heading); + font-size: 1rem; + font-weight: 500; + color: var(--color-gray-700); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 1px; + padding: 0.5rem 0; + position: relative; + transition: color var(--transition-fast); +} + +.nav-link::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 2px; + background: var(--color-primary); + transition: width var(--transition-fast); +} + +.nav-link:hover { + color: var(--color-primary); +} + +.nav-link:hover::after { + width: 100%; +} + +.nav-link.active { + color: var(--color-primary); +} + +.nav-link.active::after { + width: 100%; +} + +[data-theme="dark"] .nav-link { + color: var(--color-gray-300); +} + +[data-theme="dark"] .nav-link:hover, +[data-theme="dark"] .nav-link.active { + color: var(--color-primary-light); +} + +.nav-actions { + display: flex; + align-items: center; + gap: 1rem; +} + +.btn-theme-toggle, +.btn-menu-toggle { + width: 40px; + height: 40px; + border-radius: var(--border-radius-md); + border: 1px solid var(--color-gray-300); + background: var(--color-white); + color: var(--color-gray-700); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all var(--transition-fast); +} + +.btn-theme-toggle:hover, +.btn-menu-toggle:hover { + border-color: var(--color-primary); + color: var(--color-primary); + transform: translateY(-2px); +} + +[data-theme="dark"] .btn-theme-toggle, +[data-theme="dark"] .btn-menu-toggle { + border-color: var(--color-gray-600); + background: var(--color-gray-800); + color: var(--color-gray-300); +} + +.btn-menu-toggle { + display: none; +} + +/* 按钮样式 */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.75rem 1.5rem; + font-family: var(--font-heading); + font-size: 0.875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + border-radius: var(--border-radius-md); + border: 2px solid transparent; + cursor: pointer; + transition: all var(--transition-fast); + text-decoration: none; +} + +.btn-primary { + background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); + color: var(--color-white); + box-shadow: var(--shadow-md); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.btn-secondary { + background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%); + color: var(--color-white); + box-shadow: var(--shadow-md); +} + +.btn-secondary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.btn-outline { + background: transparent; + border-color: var(--color-gray-300); + color: var(--color-gray-700); +} + +.btn-outline:hover { + border-color: var(--color-primary); + color: var(--color-primary); + transform: translateY(-2px); +} + +[data-theme="dark"] .btn-outline { + border-color: var(--color-gray-600); + color: var(--color-gray-300); +} + +/* 英雄区域 */ +.hero { + position: relative; + min-height: 100vh; + padding-top: 80px; + overflow: hidden; +} + +.hero-background { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +.hero-gradient { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, + rgba(26, 86, 219, 0.1) 0%, + rgba(59, 130, 246, 0.05) 50%, + rgba(245, 158, 11, 0.1) 100%); +} + +.hero-pattern { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: + radial-gradient(circle at 25% 25%, rgba(26, 86, 219, 0.1) 2px, transparent 2px), + radial-gradient(circle at 75% 75%, rgba(245, 158, 11, 0.1) 2px, transparent 2px); + background-size: 60px 60px; +} + +.hero-ball-animation { + position: absolute; + width: 300px; + height: 300px; + top: 50%; + right: 10%; + transform: translateY(-50%); + background: radial-gradient(circle at 30% 30%, + rgba(26, 86, 219, 0.2) 0%, + rgba(26, 86, 219, 0.1) 30%, + transparent 70%); + border-radius: 50%; + animation: float 6s ease-in-out infinite; +} + +.hero .container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; + min-height: calc(100vh - 80px); +} + +.hero-content { + max-width: 600px; +} + +.hero-badge { + display: flex; + gap: 1rem; + margin-bottom: 2rem; +} + +.badge-season, +.badge-league { + padding: 0.5rem 1rem; + border-radius: var(--border-radius-full); + font-family: var(--font-heading); + font-size: 0.875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; +} + +.badge-season { + background: var(--color-primary); + color: var(--color-white); +} + +.badge-league { + background: var(--color-secondary); + color: var(--color-white); +} + +.hero-title { + font-family: var(--font-display); + font-size: 4rem; + font-weight: 900; + line-height: 1.1; + margin-bottom: 1.5rem; + color: var(--color-gray-900); +} + +.title-line { + display: block; +} + +.highlight { + color: var(--color-primary); + position: relative; + display: inline-block; +} + +.highlight::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 8px; + background: var(--color-secondary); + opacity: 0.3; + z-index: -1; +} + +.hero-subtitle { + font-size: 1.25rem; + color: var(--color-gray-600); + margin-bottom: 3rem; + max-width: 500px; +} + +[data-theme="dark"] .hero-subtitle { + color: var(--color-gray-400); +} + +.hero-stats { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.5rem; + margin-bottom: 3rem; +} + +.stat-item { + text-align: center; +} + +.stat-number { + font-family: var(--font-display); + font-size: 2.5rem; + font-weight: 800; + color: var(--color-primary); + margin-bottom: 0.25rem; +} + +.stat-label { + font-size: 0.875rem; + color: var(--color-gray-600); + text-transform: uppercase; + letter-spacing: 1px; +} + +[data-theme="dark"] .stat-label { + color: var(--color-gray-400); +} + +.hero-actions { + display: flex; + gap: 1rem; +} + +.hero-visual { + position: relative; + height: 500px; +} + +.stadium-visual { + position: relative; + width: 100%; + height: 100%; + background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-200) 100%); + border-radius: var(--border-radius-2xl); + overflow: hidden; + box-shadow: var(--shadow-2xl); +} + +.stadium-field { + position: absolute; + top: 10%; + left: 5%; + width: 90%; + height: 80%; + background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%); + border-radius: var(--border-radius-xl); +} + +.stadium-stands { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, + transparent 0%, + rgba(0, 0, 0, 0.1) 20%, + rgba(0, 0, 0, 0.2) 100%); + border-radius: var(--border-radius-2xl); +} + +.stadium-players { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 80%; + height: 60%; +} + +.player { + position: absolute; + width: 40px; + height: 60px; + background: var(--color-white); + border-radius: var(--border-radius-md); + box-shadow: var(--shadow-md); +} + +.player-1 { + top: 30%; + left: 20%; + animation: player-move-1 3s ease-in-out infinite; +} + +.player-2 { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + animation: player-move-2 4s ease-in-out infinite; +} + +.player-3 { + top: 40%; + right: 25%; + animation: player-move-3 3.5s ease-in-out infinite; +} + +.stadium-ball { + position: absolute; + width: 20px; + height: 20px; + background: linear-gradient(45deg, var(--color-white) 25%, var(--color-gray-200) 25%, var(--color-gray-200) 50%, var(--color-white) 50%, var(--color-white) 75%, var(--color-gray-200) 75%); + background-size: 5px 5px; + border-radius: 50%; + top: 45%; + left: 60%; + animation: ball-move 5s linear infinite; +} + +.hero-scroll { + position: absolute; + bottom: 2rem; + left: 50%; + transform: translateX(-50%); +} + +.scroll-indicator { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; +} + +.scroll-line { + width: 2px; + height: 40px; + background: linear-gradient(to bottom, var(--color-primary), transparent); + animation: scroll-line 2s ease-in-out infinite; +} + +/* 下一场比赛 */ +.next-match { + padding: 6rem 0; + background: var(--color-gray-50); +} + +[data-theme="dark"] .next-match { + background: var(--color-gray-900); +} + +.section-header { + text-align: center; + margin-bottom: 3rem; +} + +.section-title { + font-family: var(--font-heading); + font-size: 2.5rem; + font-weight: 700; + color: var(--color-gray-900); + margin-bottom: 0.5rem; + text-transform: uppercase; + letter-spacing: 2px; +} + +[data-theme="dark"] .section-title { + color: var(--color-white); +} + +.section-subtitle { + font-size: 1.125rem; + color: var(--color-gray-600); +} + +[data-theme="dark"] .section-subtitle { + color: var(--color-gray-400); +} + +.match-card { + background: var(--color-white); + border-radius: var(--border-radius-xl); + padding: 2rem; + box-shadow: var(--shadow-xl); + display: grid; + grid-template-columns: auto 1fr auto; + gap: 3rem; + align-items: center; +} + +[data-theme="dark"] .match-card { + background: var(--color-gray-800); +} + +.match-date { + text-align: center; + padding: 1.5rem; + background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); + border-radius: var(--border-radius-lg); + color: var(--color-white); +} + +.match-day { + font-family: var(--font-heading); + font-size: 1.125rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 0.5rem; +} + +.match-date-number { + font-family: var(--font-display); + font-size: 3rem; + font-weight: 800; + line-height: 1; + margin-bottom: 0.25rem; +} + +.match-month { + font-family: var(--font-heading); + font-size: 1.125rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 0.5rem; +} + +.match-time { + font-size: 1rem; + font-weight: 500; + opacity: 0.9; +} + +.match-teams { + display: grid; + grid-template-columns: 1fr auto 1fr; + gap: 2rem; + align-items: center; +} + +.team { + text-align: center; +} + +.team-home { + text-align: right; +} + +.team-away { + text-align: left; +} + +.team-logo { + width: 80px; + height: 80px; + border-radius: 50%; + margin: 0 auto 1rem; + background: var(--color-gray-200); + position: relative; +} + +.logo-nanjing { + background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); +} + +.logo-nanjing::before { + content: 'N'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-family: var(--font-heading); + font-size: 2rem; + font-weight: 700; + color: var(--color-white); +} + +.logo-suzhou { + background: linear-gradient(135deg, #059669 0%, #10b981 100%); +} + +.logo-suzhou::before { + content: 'S'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-family: var(--font-heading); + font-size: 2rem; + font-weight: 700; + color: var(--color-white); +} + +.team-name { + font-family: var(--font-heading); + font-size: 1.5rem; + font-weight: 600; + color: var(--color-gray-900); + margin-bottom: 0.5rem; +} + +[data-theme="dark"] .team-name { + color: var(--color-white); +} + +.team-record { + font-size: 0.875rem; + color: var(--color-gray-600); +} + +[data-theme="dark"] .team-record { + color: var(--color-gray-400); +} + +.match-vs { + text-align: center; +} + +.vs-text { + font-family: var(--font-display); + font-size: 2rem; + font-weight: 800; + color: var(--color-primary); + margin-bottom: 0.5rem; +} + +.match-info { + font-size: 0.875rem; + color: var(--color-gray-600); +} + +.match-venue { + font-weight: 600; + margin-bottom: 0.25rem; +} + +.match-round { + opacity: 0.8; +} + +.match-actions { + display: flex; + flex-direction: column; + gap: 1rem; +} + +/* 球队展示 */ +.teams-section { + padding: 6rem 0; +} + +.teams-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 2rem; +} + +.team-card { + background: var(--color-white); + border-radius: var(--border-radius-lg); + padding: 1.5rem; + box-shadow: var(--shadow-md); + transition: all var(--transition-normal); + cursor: pointer; + text-align: center; +} + +.team-card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-xl); +} + +[data-theme="dark"] .team-card { + background: var(--color-gray-800); +} + +.team-card-logo { + width: 80px; + height: 80px; + border-radius: 50%; + margin: 0 auto 1rem; + background: var(--color-gray-200); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-size: 2rem; + font-weight: 700; + color: var(--color-white); +} + +.team-card-name { + font-family: var(--font-heading); + font-size: 1.25rem; + font-weight: 600; + color: var(--color-gray-900); + margin-bottom: 0.5rem; +} + +[data-theme="dark"] .team-card-name { + color: var(--color-white); +} + +.team-card-city { + font-size: 0.875rem; + color: var(--color-gray-600); + margin-bottom: 1rem; +} + +.team-card-stats { + display: flex; + justify-content: space-around; + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid var(--color-gray-200); +} + +[data-theme="dark"] .team-card-stats { + border-top-color: var(--color-gray-700); +} + +.team-stat { + text-align: center; +} + +.team-stat-value { + font-family: var(--font-display); + font-size: 1.25rem; + font-weight: 700; + color: var(--color-primary); +} + +.team-stat-label { + font-size: 0.75rem; + color: var(--color-gray-600); + text-transform: uppercase; + letter-spacing: 1px; +} + +/* 积分榜 */ +.standings-section { + padding: 6rem 0; + background: var(--color-gray-50); +} + +[data-theme="dark"] .standings-section { + background: var(--color-gray-900); +} + +.standings-container { + overflow-x: auto; +} + +.standings-table { + min-width: 800px; +} + +.standings-table table { + width: 100%; + border-collapse: collapse; + background: var(--color-white); + border-radius: var(--border-radius-lg); + overflow: hidden; + box-shadow: var(--shadow-md); +} + +[data-theme="dark"] .standings-table table { + background: var(--color-gray-800); +} + +.standings-table thead { + background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); +} + +.standings-table th { + padding: 1rem; + font-family: var(--font-heading); + font-size: 0.875rem; + font-weight: 600; + color: var(--color-white); + text-transform: uppercase; + letter-spacing: 1px; + text-align: center; +} + +.standings-table tbody tr { + border-bottom: 1px solid var(--color-gray-200); + transition: background-color var(--transition-fast); +} + +[data-theme="dark"] .standings-table tbody tr { + border-bottom-color: var(--color-gray-700); +} + +.standings-table tbody tr:hover { + background-color: var(--color-gray-100); +} + +[data-theme="dark"] .standings-table tbody tr:hover { + background-color: var(--color-gray-700); +} + +.standings-table td { + padding: 1rem; + text-align: center; + color: var(--color-gray-700); +} + +[data-theme="dark"] .standings-table td { + color: var(--color-gray-300); +} + +.standings-table td:first-child { + font-weight: 700; + color: var(--color-primary); +} + +.standings-table td:nth-child(2) { + text-align: left; + font-weight: 600; + color: var(--color-gray-900); +} + +[data-theme="dark"] .standings-table td:nth-child(2) { + color: var(--color-white); +} + +.standings-table td:last-child { + font-weight: 700; + color: var(--color-secondary); +} + +/* 赛程表 */ +.fixtures-section { + padding: 6rem 0; +} + +.fixtures-tabs { + background: var(--color-white); + border-radius: var(--border-radius-xl); + overflow: hidden; + box-shadow: var(--shadow-lg); +} + +[data-theme="dark"] .fixtures-tabs { + background: var(--color-gray-800); +} + +.tabs { + display: flex; + background: var(--color-gray-100); + padding: 0.5rem; +} + +[data-theme="dark"] .tabs { + background: var(--color-gray-900); +} + +.tab { + flex: 1; + padding: 1rem; + border: none; + background: transparent; + font-family: var(--font-heading); + font-size: 0.875rem; + font-weight: 600; + color: var(--color-gray-600); + text-transform: uppercase; + letter-spacing: 1px; + cursor: pointer; + transition: all var(--transition-fast); + border-radius: var(--border-radius-md); +} + +.tab:hover { + color: var(--color-primary); +} + +.tab.active { + background: var(--color-white); + color: var(--color-primary); + box-shadow: var(--shadow-sm); +} + +[data-theme="dark"] .tab.active { + background: var(--color-gray-800); +} + +.fixtures-list { + padding: 2rem; +} + +.fixture-item { + display: grid; + grid-template-columns: auto 1fr auto; + gap: 2rem; + align-items: center; + padding: 1.5rem; + border-bottom: 1px solid var(--color-gray-200); + transition: background-color var(--transition-fast); +} + +.fixture-item:hover { + background-color: var(--color-gray-50); +} + +[data-theme="dark"] .fixture-item { + border-bottom-color: var(--color-gray-700); +} + +[data-theme="dark"] .fixture-item:hover { + background-color: var(--color-gray-900); +} + +.fixture-date { + text-align: center; + min-width: 100px; +} + +.fixture-day { + font-family: var(--font-heading); + font-size: 0.875rem; + font-weight: 600; + color: var(--color-gray-600); + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 0.25rem; +} + +.fixture-time { + font-size: 1.125rem; + font-weight: 700; + color: var(--color-primary); +} + +.fixture-teams { + display: grid; + grid-template-columns: 1fr auto 1fr; + gap: 1rem; + align-items: center; +} + +.fixture-team { + display: flex; + align-items: center; + gap: 1rem; +} + +.fixture-team.home { + justify-content: flex-end; +} + +.fixture-team-logo { + width: 40px; + height: 40px; + border-radius: 50%; + background: var(--color-gray-200); +} + +.fixture-team-name { + font-family: var(--font-heading); + font-size: 1.125rem; + font-weight: 600; + color: var(--color-gray-900); +} + +[data-theme="dark"] .fixture-team-name { + color: var(--color-white); +} + +.fixture-vs { + font-family: var(--font-display); + font-size: 1.5rem; + font-weight: 800; + color: var(--color-gray-400); + padding: 0 1rem; +} + +.fixture-score { + min-width: 100px; + text-align: center; +} + +.fixture-score-value { + font-family: var(--font-display); + font-size: 1.5rem; + font-weight: 800; + color: var(--color-primary); +} + +.fixture-score-status { + font-size: 0.75rem; + color: var(--color-gray-600); + text-transform: uppercase; + letter-spacing: 1px; + margin-top: 0.25rem; +} + +/* 数据统计 */ +.stats-section { + padding: 6rem 0; + background: var(--color-gray-50); +} + +[data-theme="dark"] .stats-section { + background: var(--color-gray-900); +} + +.stats-tabs { + background: var(--color-white); + border-radius: var(--border-radius-xl); + overflow: hidden; + box-shadow: var(--shadow-lg); +} + +[data-theme="dark"] .stats-tabs { + background: var(--color-gray-800); +} + +.stats-tab-nav { + display: flex; + background: var(--color-gray-100); + padding: 0.5rem; +} + +[data-theme="dark"] .stats-tab-nav { + background: var(--color-gray-900); +} + +.stats-tab { + flex: 1; + padding: 1rem; + border: none; + background: transparent; + font-family: var(--font-heading); + font-size: 0.875rem; + font-weight: 600; + color: var(--color-gray-600); + text-transform: uppercase; + letter-spacing: 1px; + cursor: pointer; + transition: all var(--transition-fast); + border-radius: var(--border-radius-md); +} + +.stats-tab:hover { + color: var(--color-primary); +} + +.stats-tab.active { + background: var(--color-white); + color: var(--color-primary); + box-shadow: var(--shadow-sm); +} + +[data-theme="dark"] .stats-tab.active { + background: var(--color-gray-800); +} + +.stats-content { + padding: 2rem; +} + +.stats-tab-content { + display: none; +} + +.stats-tab-content.active { + display: block; +} + +.stats-table { + width: 100%; + border-collapse: collapse; +} + +.stats-table th { + padding: 1rem; + font-family: var(--font-heading); + font-size: 0.875rem; + font-weight: 600; + color: var(--color-gray-600); + text-transform: uppercase; + letter-spacing: 1px; + text-align: left; + border-bottom: 2px solid var(--color-gray-200); +} + +[data-theme="dark"] .stats-table th { + border-bottom-color: var(--color-gray-700); +} + +.stats-table td { + padding: 1rem; + border-bottom: 1px solid var(--color-gray-200); + color: var(--color-gray-700); +} + +[data-theme="dark"] .stats-table td { + border-bottom-color: var(--color-gray-700); + color: var(--color-gray-300); +} + +.stats-table tr:hover { + background-color: var(--color-gray-50); +} + +[data-theme="dark"] .stats-table tr:hover { + background-color: var(--color-gray-900); +} + +.stats-rank { + font-weight: 700; + color: var(--color-primary); + width: 50px; +} + +.stats-player { + font-weight: 600; + color: var(--color-gray-900); +} + +[data-theme="dark"] .stats-player { + color: var(--color-white); +} + +.stats-team { + color: var(--color-gray-600); +} + +.stats-value { + font-weight: 700; + color: var(--color-secondary); + text-align: center; +} + +/* 新闻动态 */ +.news-section { + padding: 6rem 0; +} + +.news-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + gap: 2rem; +} + +.news-card { + background: var(--color-white); + border-radius: var(--border-radius-lg); + overflow: hidden; + box-shadow: var(--shadow-md); + transition: all var(--transition-normal); + cursor: pointer; +} + +.news-card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-xl); +} + +[data-theme="dark"] .news-card { + background: var(--color-gray-800); +} + +.news-card-image { + height: 200px; + background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); + position: relative; + overflow: hidden; +} + +.news-card-image::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(45deg, + transparent 30%, + rgba(255, 255, 255, 0.1) 50%, + transparent 70%); + animation: shimmer 2s infinite; +} + +.news-card-content { + padding: 1.5rem; +} + +.news-card-category { + display: inline-block; + padding: 0.25rem 0.75rem; + background: var(--color-primary); + color: var(--color-white); + font-family: var(--font-heading); + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + border-radius: var(--border-radius-sm); + margin-bottom: 1rem; +} + +.news-card-title { + font-family: var(--font-heading); + font-size: 1.25rem; + font-weight: 600; + color: var(--color-gray-900); + margin-bottom: 0.75rem; + line-height: 1.3; +} + +[data-theme="dark"] .news-card-title { + color: var(--color-white); +} + +.news-card-excerpt { + font-size: 0.875rem; + color: var(--color-gray-600); + margin-bottom: 1rem; + line-height: 1.5; +} + +[data-theme="dark"] .news-card-excerpt { + color: var(--color-gray-400); +} + +.news-card-meta { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.75rem; + color: var(--color-gray-500); +} + +.news-card-date { + display: flex; + align-items: center; + gap: 0.25rem; +} + +/* 底部 */ +.footer { + background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-black) 100%); + color: var(--color-white); + padding: 4rem 0 2rem; +} + +.footer-content { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 4rem; + margin-bottom: 3rem; +} + +.footer-brand { + max-width: 300px; +} + +.footer .logo { + margin-bottom: 1.5rem; +} + +.footer-description { + font-size: 0.875rem; + color: var(--color-gray-400); + margin-bottom: 1.5rem; + line-height: 1.6; +} + +.footer-social { + display: flex; + gap: 1rem; +} + +.social-link { + width: 40px; + height: 40px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.1); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-white); + text-decoration: none; + transition: all var(--transition-fast); +} + +.social-link:hover { + background: var(--color-primary); + transform: translateY(-2px); +} + +.footer-links { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; +} + +.footer-column { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.footer-title { + font-family: var(--font-heading); + font-size: 1.125rem; + font-weight: 600; + margin-bottom: 0.5rem; + text-transform: uppercase; + letter-spacing: 1px; +} + +.footer-link { + font-size: 0.875rem; + color: var(--color-gray-400); + text-decoration: none; + transition: color var(--transition-fast); +} + +.footer-link:hover { + color: var(--color-white); +} + +.footer-bottom { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 2rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.copyright { + font-size: 0.875rem; + color: var(--color-gray-400); +} + +.footer-legal { + display: flex; + gap: 1.5rem; +} + +.legal-link { + font-size: 0.875rem; + color: var(--color-gray-400); + text-decoration: none; + transition: color var(--transition-fast); +} + +.legal-link:hover { + color: var(--color-white); +} + +/* 动画 */ +@keyframes float { + 0%, 100% { + transform: translateY(-50%) translateX(0); + } + 50% { + transform: translateY(-50%) translateX(20px); + } +} + +@keyframes player-move-1 { + 0%, 100% { + transform: translate(0, 0); + } + 50% { + transform: translate(20px, -10px); + } +} + +@keyframes player-move-2 { + 0%, 100% { + transform: translate(-50%, -50%); + } + 50% { + transform: translate(-50%, -60%); + } +} + +@keyframes player-move-3 { + 0%, 100% { + transform: translate(0, 0); + } + 50% { + transform: translate(-15px, 10px); + } +} + +@keyframes ball-move { + 0% { + transform: translate(0, 0); + } + 25% { + transform: translate(40px, -20px); + } + 50% { + transform: translate(80px, 0); + } + 75% { + transform: translate(40px, 20px); + } + 100% { + transform: translate(0, 0); + } +} + +@keyframes scroll-line { + 0% { + height: 0; + opacity: 0; + } + 50% { + height: 40px; + opacity: 1; + } + 100% { + height: 0; + opacity: 0; + transform: translateY(40px); + } +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@keyframes bounce { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +@keyframes shimmer { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } +} + +/* 响应式设计 */ +@media (max-width: 1024px) { + .hero .container { + grid-template-columns: 1fr; + gap: 3rem; + text-align: center; + } + + .hero-content { + max-width: 100%; + } + + .hero-visual { + height: 400px; + } + + .hero-title { + font-size: 3rem; + } + + .footer-content { + grid-template-columns: 1fr; + gap: 3rem; + } +} + +@media (max-width: 768px) { + .nav-menu { + display: none; + } + + .btn-menu-toggle { + display: flex; + } + + .match-card { + grid-template-columns: 1fr; + gap: 2rem; + } + + .hero-stats { + grid-template-columns: repeat(2, 1fr); + } + + .hero-title { + font-size: 2.5rem; + } + + .section-title { + font-size: 2rem; + } + + .footer-links { + grid-template-columns: 1fr; + gap: 2rem; + } + + .footer-bottom { + flex-direction: column; + gap: 1rem; + text-align: center; + } +} + +@media (max-width: 480px) { + .container { + padding: 0 1rem; + } + + .hero-title { + font-size: 2rem; + } + + .hero-subtitle { + font-size: 1rem; + } + + .stat-number { + font-size: 2rem; + } + + .section-title { + font-size: 1.75rem; + } + + .match-teams { + grid-template-columns: 1fr; + gap: 1rem; + } + + .team-home, + .team-away { + text-align: center; + } + + .teams-grid { + grid-template-columns: 1fr; + } + + .news-grid { + grid-template-columns: 1fr; + } +} + +/* 导航菜单响应式 */ +.nav-menu.active { + display: flex; + flex-direction: column; + position: absolute; + top: 80px; + left: 0; + width: 100%; + background: var(--color-white); + padding: 1rem; + box-shadow: var(--shadow-lg); + z-index: 1000; +} + +[data-theme="dark"] .nav-menu.active { + background: var(--color-gray-800); +} + +.nav-menu.active .nav-link { + padding: 0.75rem 1rem; + border-bottom: 1px solid var(--color-gray-200); +} + +[data-theme="dark"] .nav-menu.active .nav-link { + border-bottom-color: var(--color-gray-700); +} + +.nav-menu.active .nav-link:last-child { + border-bottom: none; +} \ No newline at end of file diff --git a/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/favicon.html b/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/favicon.html new file mode 100644 index 0000000..6c1cfe5 --- /dev/null +++ b/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/favicon.html @@ -0,0 +1 @@ + diff --git a/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/index.html b/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/index.html new file mode 100644 index 0000000..4b60c43 --- /dev/null +++ b/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/index.html @@ -0,0 +1,365 @@ + + + + + + 江苏城市足球联赛2025赛季 | 苏超联赛第一季 + + + + + + + + + + +
+
+
+
加载中...
+
+
+ + + + + +
+ +
+
+
+
+
+
+ +
+
+
+ 2025赛季 + 苏超联赛第一季 +
+ +

+ 江苏城市 + 足球联赛 +

+ +

+ 江苏省首个城市间职业足球联赛，汇集12支精英球队，点燃2025赛季战火！ +

+ +
+
+
12
+
参赛球队
+
+
+
132
+
场比赛
+
+
+
26
+
比赛周
+
+
+
1
+
冠军荣耀
+
+
+ +
+ + + 查看赛程 + + + + 积分榜 + +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ + +
+
+
+

下一场比赛

+
即将开始的精彩对决
+
+ +
+
+
周六
+
25
+
一月
+
19:30
+
+ +
+
+ +
南京城联
+
8胜 3平 2负
+
+ +
+
VS
+
+
南京奥体中心
+
第12轮
+
+
+ +
+ +
苏州雄狮
+
7胜 4平 2负
+
+
+ +
+ + +
+
+
+
+ + +
+
+
+

参赛球队

+
12支城市代表队的荣耀之战
+
+ +
+ +
+
+
+ + +
+
+
+

积分榜

+
2025赛季实时排名
+
+ +
+
+ + + + + + + + + + + + + + + + + + +
排名球队场次胜平负进球失球净胜球积分
+
+
+
+
+ + +
+
+
+

赛程表

+
2025赛季完整赛程
+
+ +
+
+ + + +
+ +
+ +
+
+
+
+ + +
+
+
+

数据统计

+
球员与球队数据排行榜
+
+ +
+
+ + + +
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + +
+
+
+

新闻动态

+
联赛最新资讯
+
+ +
+ +
+
+
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/js/data.js b/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/js/data.js new file mode 100644 index 0000000..9132c2d --- /dev/null +++ b/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/js/data.js @@ -0,0 +1,802 @@ +// 江苏城市足球联赛2025赛季 - 数据文件 + +const leagueData = { + // 联赛信息 + leagueInfo: { + name: "江苏城市足球联赛", + season: "2025赛季", + alias: "苏超联赛第一季", + teamsCount: 12, + totalMatches: 132, + weeks: 26, + startDate: "2025-03-01", + endDate: "2025-10-31" + }, + + // 参赛球队 + teams: [ + { + id: 1, + name: "南京城联", + city: "南京", + shortName: "NJL", + colors: ["#dc2626", "#ef4444"], + founded: 2020, + stadium: "南京奥体中心", + capacity: 62000, + manager: "张伟", + captain: "李明" + }, + { + id: 2, + name: "苏州雄狮", + city: "苏州", + shortName: "SZS", + colors: ["#059669", "#10b981"], + founded: 2019, + stadium: "苏州奥林匹克体育中心", + capacity: 45000, + manager: "王强", + captain: "陈浩" + }, + { + id: 3, + name: "无锡太湖", + city: "无锡", + shortName: "WXT", + colors: ["#3b82f6", "#60a5fa"], + founded: 2021, + stadium: "无锡体育中心", + capacity: 32000, + manager: "赵刚", + captain: "刘洋" + }, + { + id: 4, + name: "常州龙城", + city: "常州", + shortName: "CZL", + colors: ["#7c3aed", "#8b5cf6"], + founded: 2022, + stadium: "常州奥林匹克体育中心", + capacity: 38000, + manager: "孙磊", + captain: "周涛" + }, + { + id: 5, + name: "镇江金山", + city: "镇江", + shortName: "ZJJ", + colors: ["#f59e0b", "#fbbf24"], + founded: 2020, + stadium: "镇江体育会展中心", + capacity: 28000, + manager: "吴斌", + captain: "郑军" + }, + { + id: 6, + name: "扬州运河", + city: "扬州", + shortName: "YZY", + colors: ["#ec4899", "#f472b6"], + founded: 2021, + stadium: "扬州体育公园", + capacity: 35000, + manager: "钱勇", + captain: "王磊" + }, + { + id: 7, + name: "南通江海", + city: "南通", + shortName: "NTJ", + colors: ["#0ea5e9", "#38bdf8"], + founded: 2022, + stadium: "南通体育会展中心", + capacity: 32000, + manager: "冯超", + captain: "张勇" + }, + { + id: 8, + name: "徐州楚汉", + city: "徐州", + shortName: "XZC", + colors: ["#84cc16", "#a3e635"], + founded: 2019, + stadium: "徐州奥体中心", + capacity: 42000, + manager: "陈明", + captain: "李强" + }, + { + id: 9, + name: "淮安运河", + city: "淮安", + shortName: "HAY", + colors: ["#f97316", "#fb923c"], + founded: 2021, + stadium: "淮安体育中心", + capacity: 30000, + manager: "周伟", + captain: "吴刚" + }, + { + id: 10, + name: "盐城黄海", + city: "盐城", + shortName: "YCH", + colors: ["#06b6d4", "#22d3ee"], + founded: 2020, + stadium: "盐城体育中心", + capacity: 32000, + manager: "郑涛", + captain: "孙明" + }, + { + id: 11, + name: "泰州凤城", + city: "泰州", + shortName: "TZF", + colors: ["#8b5cf6", "#a78bfa"], + founded: 2022, + stadium: "泰州体育公园", + capacity: 28000, + manager: "王刚", + captain: "陈涛" + }, + { + id: 12, + name: "宿迁西楚", + city: "宿迁", + shortName: "SQC", + colors: ["#10b981", "#34d399"], + founded: 2021, + stadium: "宿迁体育中心", + capacity: 26000, + manager: "李伟", + captain: "张刚" + } + ], + + // 积分榜数据 + standings: [ + { + rank: 1, + teamId: 1, + played: 13, + won: 8, + drawn: 3, + lost: 2, + goalsFor: 24, + goalsAgainst: 12, + goalDifference: 12, + points: 27 + }, + { + rank: 2, + teamId: 2, + played: 13, + won: 7, + drawn: 4, + lost: 2, + goalsFor: 22, + goalsAgainst: 14, + goalDifference: 8, + points: 25 + }, + { + rank: 3, + teamId: 8, + played: 13, + won: 7, + drawn: 3, + lost: 3, + goalsFor: 20, + goalsAgainst: 15, + goalDifference: 5, + points: 24 + }, + { + rank: 4, + teamId: 3, + played: 13, + won: 6, + drawn: 4, + lost: 3, + goalsFor: 18, + goalsAgainst: 14, + goalDifference: 4, + points: 22 + }, + { + rank: 5, + teamId: 4, + played: 13, + won: 6, + drawn: 3, + lost: 4, + goalsFor: 19, + goalsAgainst: 16, + goalDifference: 3, + points: 21 + }, + { + rank: 6, + teamId: 6, + played: 13, + won: 5, + drawn: 5, + lost: 3, + goalsFor: 17, + goalsAgainst: 15, + goalDifference: 2, + points: 20 + }, + { + rank: 7, + teamId: 5, + played: 13, + won: 5, + drawn: 4, + lost: 4, + goalsFor: 16, + goalsAgainst: 15, + goalDifference: 1, + points: 19 + }, + { + rank: 8, + teamId: 7, + played: 13, + won: 4, + drawn: 5, + lost: 4, + goalsFor: 15, + goalsAgainst: 16, + goalDifference: -1, + points: 17 + }, + { + rank: 9, + teamId: 10, + played: 13, + won: 4, + drawn: 4, + lost: 5, + goalsFor: 14, + goalsAgainst: 17, + goalDifference: -3, + points: 16 + }, + { + rank: 10, + teamId: 9, + played: 13, + won: 3, + drawn: 5, + lost: 5, + goalsFor: 13, + goalsAgainst: 18, + goalDifference: -5, + points: 14 + }, + { + rank: 11, + teamId: 11, + played: 13, + won: 2, + drawn: 4, + lost: 7, + goalsFor: 11, + goalsAgainst: 20, + goalDifference: -9, + points: 10 + }, + { + rank: 12, + teamId: 12, + played: 13, + won: 1, + drawn: 3, + lost: 9, + goalsFor: 9, + goalsAgainst: 24, + goalDifference: -15, + points: 6 + } + ], + + // 赛程数据 + fixtures: [ + { + id: 1, + round: 1, + date: "2025-03-01", + time: "15:00", + homeTeamId: 1, + awayTeamId: 2, + venue: "南京奥体中心", + status: "completed", + homeScore: 2, + awayScore: 1 + }, + { + id: 2, + round: 1, + date: "2025-03-01", + time: "15:00", + homeTeamId: 3, + awayTeamId: 4, + venue: "无锡体育中心", + status: "completed", + homeScore: 1, + awayScore: 1 + }, + { + id: 3, + round: 1, + date: "2025-03-02", + time: "19:30", + homeTeamId: 5, + awayTeamId: 6, + venue: "镇江体育会展中心", + status: "completed", + homeScore: 0, + awayScore: 2 + }, + { + id: 4, + round: 1, + date: "2025-03-02", + time: "19:30", + homeTeamId: 7, + awayTeamId: 8, + venue: "南通体育会展中心", + status: "completed", + homeScore: 1, + awayScore: 3 + }, + { + id: 5, + round: 1, + date: "2025-03-03", + time: "15:00", + homeTeamId: 9, + awayTeamId: 10, + venue: "淮安体育中心", + status: "completed", + homeScore: 2, + awayScore: 2 + }, + { + id: 6, + round: 1, + date: "2025-03-03", + time: "15:00", + homeTeamId: 11, + awayTeamId: 12, + venue: "泰州体育公园", + status: "completed", + homeScore: 1, + awayScore: 0 + }, + { + id: 7, + round: 2, + date: "2025-03-08", + time: "15:00", + homeTeamId: 2, + awayTeamId: 3, + venue: "苏州奥林匹克体育中心", + status: "completed", + homeScore: 2, + awayScore: 0 + }, + { + id: 8, + round: 2, + date: "2025-03-08", + time: "15:00", + homeTeamId: 4, + awayTeamId: 5, + venue: "常州奥林匹克体育中心", + status: "completed", + homeScore: 3, + awayScore: 1 + }, + { + id: 9, + round: 2, + date: "2025-03-09", + time: "19:30", + homeTeamId: 6, + awayTeamId: 7, + venue: "扬州体育公园", + status: "completed", + homeScore: 1, + awayScore: 1 + }, + { + id: 10, + round: 2, + date: "2025-03-09", + time: "19:30", + homeTeamId: 8, + awayTeamId: 9, + venue: "徐州奥体中心", + status: "completed", + homeScore: 2, + awayScore: 0 + }, + { + id: 11, + round: 2, + date: "2025-03-10", + time: "15:00", + homeTeamId: 10, + awayTeamId: 11, + venue: "盐城体育中心", + status: "completed", + homeScore: 1, + awayScore: 0 + }, + { + id: 12, + round: 2, + date: "2025-03-10", + time: "15:00", + homeTeamId: 12, + awayTeamId: 1, + venue: "宿迁体育中心", + status: "completed", + homeScore: 0, + awayScore: 3 + }, + { + id: 13, + round: 12, + date: "2025-05-24", + time: "19:30", + homeTeamId: 1, + awayTeamId: 2, + venue: "南京奥体中心", + status: "scheduled" + }, + { + id: 14, + round: 12, + date: "2025-05-24", + time: "15:00", + homeTeamId: 3, + awayTeamId: 4, + venue: "无锡体育中心", + status: "scheduled" + }, + { + id: 15, + round: 12, + date: "2025-05-25", + time: "19:30", + homeTeamId: 5, + awayTeamId: 6, + venue: "镇江体育会展中心", + status: "scheduled" + }, + { + id: 16, + round: 12, + date: "2025-05-25", + time: "15:00", + homeTeamId: 7, + awayTeamId: 8, + venue: "南通体育会展中心", + status: "scheduled" + }, + { + id: 17, + round: 12, + date: "2025-05-26", + time: "19:30", + homeTeamId: 9, + awayTeamId: 10, + venue: "淮安体育中心", + status: "scheduled" + }, + { + id: 18, + round: 12, + date: "2025-05-26", + time: "15:00", + homeTeamId: 11, + awayTeamId: 12, + venue: "泰州体育公园", + status: "scheduled" + } + ], + + // 球员数据 + players: { + scorers: [ + { + rank: 1, + playerId: 101, + name: "张伟", + teamId: 1, + goals: 12, + assists: 4, + matches: 13, + minutes: 1170 + }, + { + rank: 2, + playerId: 102, + name: "李明", + teamId: 1, + goals: 8, + assists: 6, + matches: 13, + minutes: 1170 + }, + { + rank: 3, + playerId: 201, + name: "王强", + teamId: 2, + goals: 7, + assists: 5, + matches: 13, + minutes: 1170 + }, + { + rank: 4, + playerId: 301, + name: "赵刚", + teamId: 3, + goals: 6, + assists: 3, + matches: 13, + minutes: 1170 + }, + { + rank: 5, + playerId: 801, + name: "陈明", + teamId: 8, + goals: 6, + assists: 2, + matches: 13, + minutes: 1170 + }, + { + rank: 6, + playerId: 401, + name: "孙磊", + teamId: 4, + goals: 5, + assists: 4, + matches: 13, + minutes: 1170 + }, + { + rank: 7, + playerId: 601, + name: "钱勇", + teamId: 6, + goals: 5, + assists: 3, + matches: 13, + minutes: 1170 + }, + { + rank: 8, + playerId: 501, + name: "吴斌", + teamId: 5, + goals: 4, + assists: 5, + matches: 13, + minutes: 1170 + }, + { + rank: 9, + playerId: 701, + name: "冯超", + teamId: 7, + goals: 4, + assists: 3, + matches: 13, + minutes: 1170 + }, + { + rank: 10, + playerId: 1001, + name: "郑涛", + teamId: 10, + goals: 3, + assists: 2, + matches: 13, + minutes: 1170 + } + ], + + assists: [ + { + rank: 1, + playerId: 102, + name: "李明", + teamId: 1, + assists: 6, + goals: 8, + matches: 13, + minutes: 1170 + }, + { + rank: 2, + playerId: 501, + name: "吴斌", + teamId: 5, + assists: 5, + goals: 4, + matches: 13, + minutes: 1170 + }, + { + rank: 3, + playerId: 201, + name: "王强", + teamId: 2, + assists: 5, + goals: 7, + matches: 13, + minutes: 1170 + }, + { + rank: 4, + playerId: 401, + name: "孙磊", + teamId: 4, + assists: 4, + goals: 5, + matches: 13, + minutes: 1170 + }, + { + rank: 5, + playerId: 101, + name: "张伟", + teamId: 1, + assists: 4, + goals: 12, + matches: 13, + minutes: 1170 + }, + { + rank: 6, + playerId: 301, + name: "赵刚", + teamId: 3, + assists: 3, + goals: 6, + matches: 13, + minutes: 1170 + }, + { + rank: 7, + playerId: 601, + name: "钱勇", + teamId: 6, + assists: 3, + goals: 5, + matches: 13, + minutes: 1170 + }, + { + rank: 8, + playerId: 701, + name: "冯超", + teamId: 7, + assists: 3, + goals: 4, + matches: 13, + minutes: 1170 + }, + { + rank: 9, + playerId: 901, + name: "周伟", + teamId: 9, + assists: 3, + goals: 2, + matches: 13, + minutes: 1170 + }, + { + rank: 10, + playerId: 1101, + name: "王刚", + teamId: 11, + assists: 2, + goals: 1, + matches: 13, + minutes: 1170 + } + ] + }, + + // 新闻数据 + news: [ + { + id: 1, + title: "南京城联主场力克苏州雄狮，继续领跑积分榜", + excerpt: "在昨晚进行的第12轮焦点战中，南京城联凭借张伟的梅开二度，主场2-1战胜苏州雄狮，继续以2分优势领跑积分榜。", + category: "比赛战报", + date: "2025-05-25", + imageColor: "#dc2626" + }, + { + id: 2, + title: "联赛最佳球员揭晓：张伟当选4月最佳", + excerpt: "江苏城市足球联赛官方宣布，南京城联前锋张伟凭借出色的表现，当选4月份联赛最佳球员。", + category: "官方公告", + date: "2025-05-20", + imageColor: "#3b82f6" + }, + { + id: 3, + title: "徐州楚汉签下前国脚李强，实力大增", + excerpt: "徐州楚汉俱乐部官方宣布，与前国家队中场李强签约两年，这位经验丰富的老将将提升球队中场实力。", + category: "转会新闻", + date: "2025-05-18", + imageColor: "#84cc16" + }, + { + id: 4, + title: "联赛半程总结：竞争激烈，多队有望争冠", + excerpt: "随着联赛进入半程，积分榜前六名球队分差仅7分，本赛季冠军争夺异常激烈，多支球队都有机会问鼎。", + category: "联赛动态", + date: "2025-05-15", + imageColor: "#f59e0b" + }, + { + id: 5, + title: "球迷互动日：各俱乐部将举办开放训练", + excerpt: "为感谢球迷支持，各俱乐部将在本周末举办球迷开放日，球迷可近距离观看球队训练并与球员互动。", + category: "球迷活动", + date: "2025-05-12", + imageColor: "#ec4899" + }, + { + id: 6, + title: "技术统计：联赛进球数创历史新高", + excerpt: "本赛季前13轮共打进176球，场均2.77球，创下联赛历史同期最高进球纪录，进攻足球成为主流。", + category: "数据统计", + date: "2025-05-10", + imageColor: "#0ea5e9" + } + ] +}; + +// 工具函数：根据ID获取球队信息 +function getTeamById(teamId) { + return leagueData.teams.find(team => team.id === teamId); +} + +// 工具函数：格式化日期 +function formatDate(dateString) { + const date = new Date(dateString); + const options = { weekday: 'short', month: 'short', day: 'numeric' }; + return date.toLocaleDateString('zh-CN', options); +} + +// 工具函数：格式化时间 +function formatTime(timeString) { + return timeString; +} + +// 导出数据 +if (typeof module !== 'undefined' && module.exports) { + module.exports = leagueData; +} \ No newline at end of file diff --git a/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/js/main.js b/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/js/main.js new file mode 100644 index 0000000..e79c3cb --- /dev/null +++ b/frontend/public/demo/threads/5aa47db1-d0cb-4eb9-aea5-3dac1b371c5a/user-data/outputs/jiangsu-football/js/main.js @@ -0,0 +1,618 @@ +// 江苏城市足球联赛2025赛季 - 主JavaScript文件 + +document.addEventListener('DOMContentLoaded', function() { + // 初始化加载动画 + initLoader(); + + // 初始化主题切换 + initThemeToggle(); + + // 初始化导航菜单 + initNavigation(); + + // 初始化滚动监听 + initScrollSpy(); + + // 渲染球队卡片 + renderTeams(); + + // 渲染积分榜 + renderStandings(); + + // 渲染赛程表 + renderFixtures(); + + // 渲染数据统计 + renderStats(); + + // 渲染新闻动态 + renderNews(); + + // 初始化标签页切换 + initTabs(); + + // 初始化移动端菜单 + initMobileMenu(); +}); + +// 加载动画 +function initLoader() { + const loader = document.querySelector('.loader'); + + // 模拟加载延迟 + setTimeout(() => { + loader.classList.add('loaded'); + + // 动画结束后隐藏loader + setTimeout(() => { + loader.style.display = 'none'; + }, 300); + }, 1500); +} + +// 主题切换 +function initThemeToggle() { + const themeToggle = document.querySelector('.btn-theme-toggle'); + const themeIcon = themeToggle.querySelector('i'); + + // 检查本地存储的主题偏好 + const savedTheme = localStorage.getItem('theme') || 'light'; + document.documentElement.setAttribute('data-theme', savedTheme); + updateThemeIcon(savedTheme); + + themeToggle.addEventListener('click', () => { + const currentTheme = document.documentElement.getAttribute('data-theme'); + const newTheme = currentTheme === 'light' ? 'dark' : 'light'; + + document.documentElement.setAttribute('data-theme', newTheme); + localStorage.setItem('theme', newTheme); + updateThemeIcon(newTheme); + + // 添加切换动画 + themeToggle.style.transform = 'scale(0.9)'; + setTimeout(() => { + themeToggle.style.transform = ''; + }, 150); + }); + + function updateThemeIcon(theme) { + if (theme === 'dark') { + themeIcon.className = 'fas fa-sun'; + } else { + themeIcon.className = 'fas fa-moon'; + } + } +} + +// 导航菜单 +function initNavigation() { + const navLinks = document.querySelectorAll('.nav-link'); + + navLinks.forEach(link => { + link.addEventListener('click', function(e) { + e.preventDefault(); + + const targetId = this.getAttribute('href'); + const targetSection = document.querySelector(targetId); + + if (targetSection) { + // 更新活动链接 + navLinks.forEach(l => l.classList.remove('active')); + this.classList.add('active'); + + // 平滑滚动到目标区域 + window.scrollTo({ + top: targetSection.offsetTop - 80, + behavior: 'smooth' + }); + + // 如果是移动端，关闭菜单 + const navMenu = document.querySelector('.nav-menu'); + if (navMenu.classList.contains('active')) { + navMenu.classList.remove('active'); + } + } + }); + }); +} + +// 滚动监听 +function initScrollSpy() { + const sections = document.querySelectorAll('section[id]'); + const navLinks = document.querySelectorAll('.nav-link'); + + window.addEventListener('scroll', () => { + let current = ''; + + sections.forEach(section => { + const sectionTop = section.offsetTop; + const sectionHeight = section.clientHeight; + + if (scrollY >= sectionTop - 100) { + current = section.getAttribute('id'); + } + }); + + navLinks.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('href') === `#${current}`) { + link.classList.add('active'); + } + }); + }); +} + +// 渲染球队卡片 +function renderTeams() { + const teamsGrid = document.querySelector('.teams-grid'); + + if (!teamsGrid) return; + + teamsGrid.innerHTML = ''; + + leagueData.teams.forEach(team => { + const teamCard = document.createElement('div'); + teamCard.className = 'team-card'; + + // 获取球队统计数据 + const standing = leagueData.standings.find(s => s.teamId === team.id); + + teamCard.innerHTML = ` + +

${team.name}

+
${team.city}
+
+
+
${standing ? standing.rank : '-'}
+
排名
+
+
+
${standing ? standing.points : '0'}
+
积分
+
+
+
${standing ? standing.goalDifference : '0'}
+
净胜球
+
+
+ `; + + teamCard.addEventListener('click', () => { + // 这里可以添加点击跳转到球队详情页的功能 + alert(`查看 ${team.name} 的详细信息`); + }); + + teamsGrid.appendChild(teamCard); + }); +} + +// 渲染积分榜 +function renderStandings() { + const standingsTable = document.querySelector('.standings-table tbody'); + + if (!standingsTable) return; + + standingsTable.innerHTML = ''; + + leagueData.standings.forEach(standing => { + const team = getTeamById(standing.teamId); + + const row = document.createElement('tr'); + + // 根据排名添加特殊样式 + if (standing.rank <= 4) { + row.classList.add('champions-league'); + } else if (standing.rank <= 6) { + row.classList.add('europa-league'); + } else if (standing.rank >= 11) { + row.classList.add('relegation'); + } + + row.innerHTML = ` + ${standing.rank} + +
+
+ ${team.name} +
+ + ${standing.played} + ${standing.won} + ${standing.drawn} + ${standing.lost} + ${standing.goalsFor} + ${standing.goalsAgainst} + ${standing.goalDifference > 0 ? '+' : ''}${standing.goalDifference} + ${standing.points} + `; + + standingsTable.appendChild(row); + }); +} + +// 渲染赛程表 +function renderFixtures() { + const fixturesList = document.querySelector('.fixtures-list'); + + if (!fixturesList) return; + + fixturesList.innerHTML = ''; + + // 按轮次分组 + const fixturesByRound = {}; + leagueData.fixtures.forEach(fixture => { + if (!fixturesByRound[fixture.round]) { + fixturesByRound[fixture.round] = []; + } + fixturesByRound[fixture.round].push(fixture); + }); + + // 渲染所有赛程 + Object.keys(fixturesByRound).sort((a, b) => a - b).forEach(round => { + const roundHeader = document.createElement('div'); + roundHeader.className = 'fixture-round-header'; + roundHeader.innerHTML = `

第${round}轮

`; + fixturesList.appendChild(roundHeader); + + fixturesByRound[round].forEach(fixture => { + const homeTeam = getTeamById(fixture.homeTeamId); + const awayTeam = getTeamById(fixture.awayTeamId); + + const fixtureItem = document.createElement('div'); + fixtureItem.className = 'fixture-item'; + + const date = new Date(fixture.date); + const dayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; + const dayName = dayNames[date.getDay()]; + + let scoreHtml = ''; + let statusText = ''; + + if (fixture.status === 'completed') { + scoreHtml = ` +
${fixture.homeScore} - ${fixture.awayScore}
+
已结束
+ `; + } else if (fixture.status === 'scheduled') { + scoreHtml = ` +
VS
+
${fixture.time}
+ `; + } else { + scoreHtml = ` +
-
+
待定
+ `; + } + + fixtureItem.innerHTML = ` +
+
${dayName}
+
${formatDate(fixture.date)}
+
+
+
+
${homeTeam.name}
+ +
+
VS
+
+ +
${awayTeam.name}
+
+
+
+ ${scoreHtml} +
+ `; + + fixturesList.appendChild(fixtureItem); + }); + }); +} + +// 渲染数据统计 +function renderStats() { + renderScorers(); + renderAssists(); + renderTeamStats(); +} + +function renderScorers() { + const scorersContainer = document.querySelector('#scorers'); + + if (!scorersContainer) return; + + scorersContainer.innerHTML = ` + + + + + + + + + + + + + ${leagueData.players.scorers.map(player => { + const team = getTeamById(player.teamId); + return ` + + + + + + + + + `; + }).join('')} + +
排名球员球队进球助攻出场
${player.rank}${player.name}${team.name}${player.goals}${player.assists}${player.matches}
+ `; +} + +function renderAssists() { + const assistsContainer = document.querySelector('#assists'); + + if (!assistsContainer) return; + + assistsContainer.innerHTML = ` + + + + + + + + + + + + + ${leagueData.players.assists.map(player => { + const team = getTeamById(player.teamId); + return ` + + + + + + + + + `; + }).join('')} + +
排名球员球队助攻进球出场
${player.rank}${player.name}${team.name}${player.assists}${player.goals}${player.matches}
+ `; +} + +function renderTeamStats() { + const teamStatsContainer = document.querySelector('#teams'); + + if (!teamStatsContainer) return; + + // 计算球队统计数据 + const teamStats = leagueData.standings.map(standing => { + const team = getTeamById(standing.teamId); + const goalsPerGame = (standing.goalsFor / standing.played).toFixed(2); + const concededPerGame = (standing.goalsAgainst / standing.played).toFixed(2); + + return { + rank: standing.rank, + team: team.name, + goalsFor: standing.goalsFor, + goalsAgainst: standing.goalsAgainst, + goalDifference: standing.goalDifference, + goalsPerGame, + concededPerGame, + cleanSheets: Math.floor(Math.random() * 5) // 模拟数据 + }; + }).sort((a, b) => a.rank - b.rank); + + teamStatsContainer.innerHTML = ` + + + + + + + + + + + + + + + ${teamStats.map(stat => ` + + + + + + + + + + + `).join('')} + +
排名球队进球失球净胜球场均进球场均失球零封
${stat.rank}${stat.team}${stat.goalsFor}${stat.goalsAgainst}${stat.goalDifference > 0 ? '+' : ''}${stat.goalDifference}${stat.goalsPerGame}${stat.concededPerGame}${stat.cleanSheets}
+ `; +} + +// 渲染新闻动态 +function renderNews() { + const newsGrid = document.querySelector('.news-grid'); + + if (!newsGrid) return; + + newsGrid.innerHTML = ''; + + leagueData.news.forEach(newsItem => { + const newsCard = document.createElement('div'); + newsCard.className = 'news-card'; + + const date = new Date(newsItem.date); + const formattedDate = date.toLocaleDateString('zh-CN', { + year: 'numeric', + month: 'long', + day: 'numeric' + }); + + newsCard.innerHTML = ` +
+
+ ${newsItem.category} +

${newsItem.title}

+

${newsItem.excerpt}

+
+ + + ${formattedDate} + + 阅读更多 → +
+
+ `; + + newsCard.addEventListener('click', () => { + alert(`查看新闻: ${newsItem.title}`); + }); + + newsGrid.appendChild(newsCard); + }); +} + +// 初始化标签页切换 +function initTabs() { + // 赛程标签页 + const fixtureTabs = document.querySelectorAll('.fixtures-tabs .tab'); + const fixtureItems = document.querySelectorAll('.fixture-item'); + + fixtureTabs.forEach(tab => { + tab.addEventListener('click', () => { + // 更新活动标签 + fixtureTabs.forEach(t => t.classList.remove('active')); + tab.classList.add('active'); + + const roundFilter = tab.getAttribute('data-round'); + + // 这里可以根据筛选条件显示不同的赛程 + // 由于时间关系，这里只是简单的演示 + console.log(`筛选赛程: ${roundFilter}`); + }); + }); + + // 数据统计标签页 + const statsTabs = document.querySelectorAll('.stats-tab'); + const statsContents = document.querySelectorAll('.stats-tab-content'); + + statsTabs.forEach(tab => { + tab.addEventListener('click', () => { + const tabId = tab.getAttribute('data-tab'); + + // 更新活动标签 + statsTabs.forEach(t => t.classList.remove('active')); + tab.classList.add('active'); + + // 显示对应内容 + statsContents.forEach(content => { + content.classList.remove('active'); + if (content.id === tabId) { + content.classList.add('active'); + } + }); + }); + }); +} + +// 初始化移动端菜单 +function initMobileMenu() { + const menuToggle = document.querySelector('.btn-menu-toggle'); + const navMenu = document.querySelector('.nav-menu'); + + if (menuToggle && navMenu) { + menuToggle.addEventListener('click', () => { + navMenu.classList.toggle('active'); + + // 更新菜单图标 + const icon = menuToggle.querySelector('i'); + if (navMenu.classList.contains('active')) { + icon.className = 'fas fa-times'; + } else { + icon.className = 'fas fa-bars'; + } + }); + + // 点击菜单外区域关闭菜单 + document.addEventListener('click', (e) => { + if (!navMenu.contains(e.target) && !menuToggle.contains(e.target)) { + navMenu.classList.remove('active'); + menuToggle.querySelector('i').className = 'fas fa-bars'; + } + }); + } +} + +// 工具函数：加深颜色 +function darkenColor(color, percent) { + const num = parseInt(color.replace("#", ""), 16); + const amt = Math.round(2.55 * percent); + const R = (num >> 16) - amt; + const G = (num >> 8 & 0x00FF) - amt; + const B = (num & 0x0000FF) - amt; + + return "#" + ( + 0x1000000 + + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + + (B < 255 ? B < 1 ? 0 : B : 255) + ).toString(16).slice(1); +} + +// 工具函数：格式化日期（简写） +function formatDate(dateString) { + const date = new Date(dateString); + const month = date.getMonth() + 1; + const day = date.getDate(); + return `${month}月${day}日`; +} + +// 工具函数：根据ID获取球队信息 +function getTeamById(teamId) { + return leagueData.teams.find(team => team.id === teamId); +} + +// 添加一些交互效果 +document.addEventListener('DOMContentLoaded', () => { + // 为所有按钮添加点击效果 + const buttons = document.querySelectorAll('.btn'); + buttons.forEach(button => { + button.addEventListener('mousedown', () => { + button.style.transform = 'scale(0.95)'; + }); + + button.addEventListener('mouseup', () => { + button.style.transform = ''; + }); + + button.addEventListener('mouseleave', () => { + button.style.transform = ''; + }); + }); + + // 为卡片添加悬停效果 + const cards = document.querySelectorAll('.team-card, .news-card'); + cards.forEach(card => { + card.addEventListener('mouseenter', () => { + card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease'; + }); + }); +}); \ No newline at end of file diff --git a/frontend/scripts/save-demo.js b/frontend/scripts/save-demo.js new file mode 100644 index 0000000..4680d43 --- /dev/null +++ b/frontend/scripts/save-demo.js @@ -0,0 +1,53 @@ +import { config } from "dotenv"; +import fs from "fs"; +import path from "path"; +import { env } from "process"; + +export async function main() { + const threadId = process.argv[2]; + const url = new URL( + `http://localhost:2026/api/langgraph/threads/${threadId}/history`, + ); + const response = await fetch(url, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + limit: 10, + }), + }); + + const data = (await response.json())[0]; + if (!data) { + console.error("No data found"); + return; + } + + const title = data.values.title; + + const rootPath = path.resolve(process.cwd(), "public/demo/threads", threadId); + if (fs.existsSync(rootPath)) { + fs.rmSync(rootPath, { recursive: true }); + } + fs.mkdirSync(rootPath, { recursive: true }); + fs.writeFileSync( + path.resolve(rootPath, "thread.json"), + JSON.stringify(data, null, 2), + ); + const backendRootPath = path.resolve( + process.cwd(), + "../backend/.deer-flow/threads", + threadId, + ); + const outputsPath = path.resolve(backendRootPath, "user-data/outputs"); + if (fs.existsSync(outputsPath)) { + fs.cpSync(outputsPath, path.resolve(rootPath, "user-data/outputs"), { + recursive: true, + }); + } + console.info(`Saved demo "${title}" to ${rootPath}`); +} + +config(); +main(); diff --git a/frontend/src/app/mock/api/mcp/config/route.ts b/frontend/src/app/mock/api/mcp/config/route.ts new file mode 100644 index 0000000..0fa10aa --- /dev/null +++ b/frontend/src/app/mock/api/mcp/config/route.ts @@ -0,0 +1,26 @@ +export function GET() { + return Response.json({ + mcp_servers: { + "mcp-github-trending": { + enabled: true, + type: "stdio", + command: "uvx", + args: ["mcp-github-trending"], + env: {}, + url: null, + headers: {}, + description: + "A MCP server that provides access to GitHub trending repositories and developers data", + }, + "context-7": { + enabled: true, + description: + "Get the latest documentation and code into Cursor, Claude, or other LLMs", + }, + "feishu-importer": { + enabled: true, + description: "Import Feishu documents", + }, + }, + }); +} diff --git a/frontend/src/app/mock/api/models/route.ts b/frontend/src/app/mock/api/models/route.ts new file mode 100644 index 0000000..5768e16 --- /dev/null +++ b/frontend/src/app/mock/api/models/route.ts @@ -0,0 +1,30 @@ +export function GET() { + return Response.json({ + models: [ + { + id: "doubao-seed-1.8", + name: "doubao-seed-1.8", + display_name: "Doubao Seed 1.8", + supports_thinking: true, + }, + { + id: "deepseek-v3.2", + name: "deepseek-v3.2", + display_name: "DeepSeek v3.2", + supports_thinking: true, + }, + { + id: "gpt-5", + name: "gpt-5", + display_name: "GPT-5", + supports_thinking: true, + }, + { + id: "gemini-3-pro", + name: "gemini-3-pro", + display_name: "Gemini 3 Pro", + supports_thinking: true, + }, + ], + }); +} diff --git a/frontend/src/app/mock/api/skills/route.ts b/frontend/src/app/mock/api/skills/route.ts new file mode 100644 index 0000000..45a8290 --- /dev/null +++ b/frontend/src/app/mock/api/skills/route.ts @@ -0,0 +1,70 @@ +export function GET() { + return Response.json({ + skills: [ + { + name: "frontend-design", + description: + "Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.", + license: "Complete terms in LICENSE.txt", + category: "public", + enabled: true, + }, + { + name: "pdf-processing", + description: + "Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs to fill in a PDF form or programmatically process, generate, or analyze PDF documents at scale.", + license: "Proprietary. LICENSE.txt has complete terms", + category: "public", + enabled: true, + }, + { + name: "vercel-deploy", + description: + 'Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as "Deploy my app", "Deploy this to production", "Create a preview deployment", "Deploy and give me the link", or "Push this live". No authentication required - returns preview URL and claimable deployment link.', + license: null, + category: "public", + enabled: true, + }, + { + name: "web-design-guidelines", + description: + 'Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".', + license: null, + category: "public", + enabled: true, + }, + { + name: "cartoon-generator", + description: + 'Generate cartoon images based on a description. Use when asked to "generate a cartoon image", "create a cartoon", "draw a cartoon", or "generate a cartoon image based on a description".', + license: null, + category: "custom", + enabled: true, + }, + { + name: "podcast-generator", + description: + 'Generate a podcast episode based on a topic. Use when asked to "generate a podcast episode", "create a podcast episode", "generate a podcast episode based on a topic", or "generate a podcast episode based on a description".', + license: null, + category: "custom", + enabled: true, + }, + { + name: "advanced-data-analysis", + description: + 'Perform advanced data analysis and visualization. Use when asked to "analyze data", "visualize data", "analyze data based on a description", or "visualize data based on a description".', + license: null, + category: "custom", + enabled: true, + }, + { + name: "3d-model-generator", + description: + 'Generate 3D models based on a description. Use when asked to "generate a 3D model", "create a 3D model", "generate a 3D model based on a description", or "generate a 3D model based on a description".', + license: null, + category: "custom", + enabled: true, + }, + ], + }); +} diff --git a/frontend/src/app/mock/api/threads/[thread_id]/artifacts/[[...artifact_path]]/route.ts b/frontend/src/app/mock/api/threads/[thread_id]/artifacts/[[...artifact_path]]/route.ts new file mode 100644 index 0000000..78447d2 --- /dev/null +++ b/frontend/src/app/mock/api/threads/[thread_id]/artifacts/[[...artifact_path]]/route.ts @@ -0,0 +1,41 @@ +import fs from "fs"; +import path from "path"; + +import type { NextRequest } from "next/server"; + +export async function GET( + request: NextRequest, + { + params, + }: { + params: Promise<{ + thread_id: string; + artifact_path?: string[] | undefined; + }>; + }, +) { + const threadId = (await params).thread_id; + let artifactPath = (await params).artifact_path?.join("/") ?? ""; + if (artifactPath.startsWith("mnt/")) { + artifactPath = path.resolve( + process.cwd(), + artifactPath.replace("mnt/", `public/demo/threads/${threadId}/`), + ); + if (fs.existsSync(artifactPath)) { + if (request.nextUrl.searchParams.get("download") === "true") { + // Attach the file to the response + const headers = new Headers(); + headers.set( + "Content-Disposition", + `attachment; filename="${artifactPath}"`, + ); + return new Response(fs.readFileSync(artifactPath), { + status: 200, + headers, + }); + } + return new Response(fs.readFileSync(artifactPath), { status: 200 }); + } + } + return new Response("File not found", { status: 404 }); +} diff --git a/frontend/src/app/mock/api/threads/[thread_id]/history/route.ts b/frontend/src/app/mock/api/threads/[thread_id]/history/route.ts new file mode 100644 index 0000000..cd50e85 --- /dev/null +++ b/frontend/src/app/mock/api/threads/[thread_id]/history/route.ts @@ -0,0 +1,20 @@ +import fs from "fs"; +import path from "path"; + +import type { NextRequest } from "next/server"; + +export async function POST( + request: NextRequest, + { params }: { params: Promise<{ thread_id: string }> }, +) { + const threadId = (await params).thread_id; + const jsonString = fs.readFileSync( + path.resolve(process.cwd(), `public/demo/threads/${threadId}/thread.json`), + "utf8", + ); + const json = JSON.parse(jsonString); + if (Array.isArray(json.history)) { + return Response.json(json); + } + return Response.json([json]); +} diff --git a/frontend/src/app/mock/api/threads/search/route.ts b/frontend/src/app/mock/api/threads/search/route.ts new file mode 100644 index 0000000..93c4834 --- /dev/null +++ b/frontend/src/app/mock/api/threads/search/route.ts @@ -0,0 +1,27 @@ +import fs from "fs"; +import path from "path"; + +export function POST() { + const threadsDir = fs.readdirSync( + path.resolve(process.cwd(), "public/demo/threads"), + { + withFileTypes: true, + }, + ); + const threadData = threadsDir + .map((threadId) => { + if (threadId.isDirectory() && !threadId.name.startsWith(".")) { + const threadData = fs.readFileSync( + path.resolve(`public/demo/threads/${threadId.name}/thread.json`), + "utf8", + ); + return { + thread_id: threadId.name, + values: JSON.parse(threadData).values, + }; + } + return false; + }) + .filter(Boolean); + return Response.json(threadData); +} diff --git a/frontend/src/app/workspace/chats/[thread_id]/page.tsx b/frontend/src/app/workspace/chats/[thread_id]/page.tsx index 15f2568..2efbabc 100644 --- a/frontend/src/app/workspace/chats/[thread_id]/page.tsx +++ b/frontend/src/app/workspace/chats/[thread_id]/page.tsx @@ -30,6 +30,7 @@ import { type AgentThread } from "@/core/threads"; import { useSubmitThread, useThreadStream } from "@/core/threads/hooks"; import { pathOfThread, titleOfThread } from "@/core/threads/utils"; import { uuid } from "@/core/utils/uuid"; +import { env } from "@/env"; import { cn } from "@/lib/utils"; export default function ChatPage() { @@ -176,12 +177,18 @@ export default function ChatPage() { status={thread.isLoading ? "streaming" : "ready"} context={settings.context} extraHeader={isNewThread && } + disabled={env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"} onContextChange={(context) => setSettings("context", context) } onSubmit={handleSubmit} onStop={handleStop} /> + {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" && ( +
+ {t.common.notAvailableInDemoMode} +
+ )}
diff --git a/frontend/src/app/workspace/chats/page.tsx b/frontend/src/app/workspace/chats/page.tsx index d72ee0c..b6327f3 100644 --- a/frontend/src/app/workspace/chats/page.tsx +++ b/frontend/src/app/workspace/chats/page.tsx @@ -51,9 +51,11 @@ export default function ChatsPage() {
{titleOfThread(thread)}
-
- {formatTimeAgo(thread.updated_at)} -
+ {thread.updated_at && ( +
+ {formatTimeAgo(thread.updated_at)} +
+ )} ))} diff --git a/frontend/src/app/workspace/page.tsx b/frontend/src/app/workspace/page.tsx index 8ce04cf..db0ab42 100644 --- a/frontend/src/app/workspace/page.tsx +++ b/frontend/src/app/workspace/page.tsx @@ -1,5 +1,20 @@ +import fs from "fs"; +import path from "path"; + import { redirect } from "next/navigation"; +import { env } from "@/env"; + export default function WorkspacePage() { + if (env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true") { + const firstThread = fs + .readdirSync(path.resolve(process.cwd(), "public/demo/threads"), { + withFileTypes: true, + }) + .find((thread) => thread.isDirectory() && !thread.name.startsWith(".")); + if (firstThread) { + return redirect(`/workspace/chats/${firstThread.name}`); + } + } return redirect("/workspace/chats/new"); } diff --git a/frontend/src/components/ai-elements/prompt-input.tsx b/frontend/src/components/ai-elements/prompt-input.tsx index efa1663..841c085 100644 --- a/frontend/src/components/ai-elements/prompt-input.tsx +++ b/frontend/src/components/ai-elements/prompt-input.tsx @@ -438,6 +438,7 @@ export type PromptInputProps = Omit< "onSubmit" | "onError" > & { accept?: string; // e.g., "image/*" or leave undefined for any + disabled?: boolean; multiple?: boolean; // When true, accepts drops anywhere on document. Default false (opt-in). globalDrop?: boolean; @@ -459,6 +460,7 @@ export type PromptInputProps = Omit< export const PromptInput = ({ className, accept, + disabled, multiple, globalDrop, syncHiddenInput, diff --git a/frontend/src/components/landing/hero.tsx b/frontend/src/components/landing/hero.tsx index 37ffc92..a9baa7c 100644 --- a/frontend/src/components/landing/hero.tsx +++ b/frontend/src/components/landing/hero.tsx @@ -28,7 +28,7 @@ export function Hero({ className }: { className?: string }) { /> (null); const containerRef = useRef(null); + const timeoutsRef = useRef([]); // Additional display duration after the final step (done) completes, used to show the final result const FINAL_DISPLAY_DURATION = 3000; // milliseconds // Play animation only when isPlaying is true useEffect(() => { - if (!isPlaying) return; + if (!isPlaying) { + // Clear all timeouts when paused + timeoutsRef.current.forEach(clearTimeout); + timeoutsRef.current = []; + return; + } const timeline = [ { phase: "user-input" as const, delay: ANIMATION_DELAYS["user-input"] }, @@ -117,7 +126,12 @@ export default function ProgressiveSkillsAnimation() { }, totalDelay + FINAL_DISPLAY_DURATION), ); - return () => timeouts.forEach(clearTimeout); + timeoutsRef.current = timeouts; + + return () => { + timeouts.forEach(clearTimeout); + timeoutsRef.current = []; + }; }, [isPlaying]); const handlePlay = () => { @@ -130,6 +144,20 @@ export default function ProgressiveSkillsAnimation() { setShowWorkspace(false); }; + const handleTogglePlayPause = () => { + if (isPlaying) { + setIsPlaying(false); + } else { + // If animation hasn't started or is at idle, restart from beginning + if (phase === "idle") { + handlePlay(); + } else { + // Resume from current phase + setIsPlaying(true); + } + } + }; + // Auto-play when component enters viewport for the first time useEffect(() => { if (hasAutoPlayed || !containerRef.current) return; @@ -308,7 +336,7 @@ export default function ProgressiveSkillsAnimation() { > {/* Overlay and Play Button */} - {!isPlaying && ( + {!isPlaying && !hasPlayed && ( - {hasPlayed ? "Click to replay" : "Click to play"} + Click to play )} + {/* Bottom Left Play/Pause Button */} + + + {isPlaying ? ( + + ) : ( + + )} + + +
{/* Left: File Tree */}
@@ -588,7 +633,7 @@ export default function ProgressiveSkillsAnimation() { className="flex items-center gap-2 text-sm text-green-500" > - {file} + Generating {file}... ))} @@ -617,7 +662,7 @@ export default function ProgressiveSkillsAnimation() { className="flex items-center gap-2 pl-4 text-zinc-400" > - Executing deploy.sh + Executing scripts/deploy.sh )}
diff --git a/frontend/src/components/landing/sections/sandbox-section.tsx b/frontend/src/components/landing/sections/sandbox-section.tsx index ec34c1e..1ced21d 100644 --- a/frontend/src/components/landing/sections/sandbox-section.tsx +++ b/frontend/src/components/landing/sections/sandbox-section.tsx @@ -12,11 +12,12 @@ export function SandboxSection({ className }: { className?: string }) { return (
- We gave DeerFlow a computer. It can execute code, manage files, and - run long tasks — all in a secure Docker sandbox + We give DeerFlow a "computer", which can execute commands, + manage files, and run long tasks — all in a secure Docker-based + sandbox

} > diff --git a/frontend/src/components/landing/sections/skills-section.tsx b/frontend/src/components/landing/sections/skills-section.tsx index 6efbeb6..96bc920 100644 --- a/frontend/src/components/landing/sections/skills-section.tsx +++ b/frontend/src/components/landing/sections/skills-section.tsx @@ -2,13 +2,13 @@ import { cn } from "@/lib/utils"; -import ProgressiveSkillsAnimation from "../components/progressive-skills-animation"; +import ProgressiveSkillsAnimation from "../progressive-skills-animation"; import { Section } from "../section"; export function SkillsSection({ className }: { className?: string }) { return (
diff --git a/frontend/src/components/landing/sections/whats-new-section.tsx b/frontend/src/components/landing/sections/whats-new-section.tsx index bcbafe9..ac37029 100644 --- a/frontend/src/components/landing/sections/whats-new-section.tsx +++ b/frontend/src/components/landing/sections/whats-new-section.tsx @@ -1,10 +1,57 @@ "use client"; -import MagicBento from "@/components/ui/magic-bento"; +import MagicBento, { type BentoCardProps } from "@/components/ui/magic-bento"; import { cn } from "@/lib/utils"; import { Section } from "../section"; +const COLOR = "#0a0a0a"; +const features: BentoCardProps[] = [ + { + color: COLOR, + label: "Context Engineering", + title: "Long/Short-term Memory", + description: ( +
+
Now the agent can better understand you
+
Coming soon
+
+ ), + }, + { + color: COLOR, + label: "Long Task Running", + title: "Planning and Reasoning", + description: "Plans ahead, reasons through complexity, then acts", + }, + { + color: COLOR, + label: "Extensible", + title: "Skills and Tools", + description: + "Plug, play, or even swap built-in tools. Build the agent you want.", + }, + + { + color: COLOR, + label: "Persistent", + title: "Sandbox with File System", + description: "Read, write, run — like a real computer", + }, + { + color: COLOR, + label: "Flexible", + title: "Multi-Model Support", + description: "Doubao, DeepSeek, OpenAI, Gemini, etc.", + }, + { + color: COLOR, + label: "Free", + title: "Open Source", + description: "MIT License, self-hosted, full control", + }, +]; + export function WhatsNewSection({ className }: { className?: string }) { return (
- +
); diff --git a/frontend/src/components/ui/magic-bento.tsx b/frontend/src/components/ui/magic-bento.tsx index 2aeb690..637d11b 100644 --- a/frontend/src/components/ui/magic-bento.tsx +++ b/frontend/src/components/ui/magic-bento.tsx @@ -23,6 +23,7 @@ export interface BentoProps { glowColor?: string; clickEffect?: boolean; enableMagnetism?: boolean; + data: BentoCardProps[]; } const DEFAULT_PARTICLE_COUNT = 12; @@ -30,52 +31,6 @@ const DEFAULT_SPOTLIGHT_RADIUS = 300; const DEFAULT_GLOW_COLOR = "132, 0, 255"; const MOBILE_BREAKPOINT = 768; -const cardData: BentoCardProps[] = [ - { - color: "#0a0015", - title: "Long/Short-term Memory", - description: ( -
-
Now the agent can better understand you
-
Coming soon
-
- ), - label: "Context Engineering", - }, - { - color: "#0a0015", - title: "Planning and Reasoning", - description: "Plans ahead, reasons through complexity, then acts", - label: "Long Task Running", - }, - { - color: "#0a0015", - title: "Skills and Tools", - description: - "Plug, play, or even swap built-in tools. Build the agent you want.", - label: "Extensible", - }, - - { - color: "#0a0015", - title: "Sandbox with File System", - description: "Read, write, run — like a real computer", - label: "Persistent", - }, - { - color: "#0a0015", - title: "Multi-Model Support", - description: "Doubao, DeepSeek, OpenAI, Gemini, etc.", - label: "Flexible", - }, - { - color: "#0a0015", - title: "Open Source", - description: "MIT License, self-hosted, full control", - label: "Free", - }, -]; - const createParticleElement = ( x: number, y: number, @@ -571,6 +526,7 @@ const MagicBento: React.FC = ({ glowColor = DEFAULT_GLOW_COLOR, clickEffect = true, enableMagnetism = true, + data: cardData, }) => { const gridRef = useRef(null); const isMobile = useMobileDetection(); diff --git a/frontend/src/components/ui/terminal.tsx b/frontend/src/components/ui/terminal.tsx index 5f6f771..a32f3b5 100644 --- a/frontend/src/components/ui/terminal.tsx +++ b/frontend/src/components/ui/terminal.tsx @@ -230,7 +230,7 @@ export const Terminal = ({
diff --git a/frontend/src/components/workspace/input-box.tsx b/frontend/src/components/workspace/input-box.tsx index 6d51714..158f61a 100644 --- a/frontend/src/components/workspace/input-box.tsx +++ b/frontend/src/components/workspace/input-box.tsx @@ -48,6 +48,7 @@ import { export function InputBox({ className, + disabled, autoFocus, status = "ready", context, @@ -60,6 +61,7 @@ export function InputBox({ }: Omit, "onSubmit"> & { assistantId?: string | null; status?: ChatStatus; + disabled?: boolean; context: Omit; extraHeader?: React.ReactNode; isNewThread?: boolean; @@ -142,6 +144,7 @@ export function InputBox({ "bg-background/85 rounded-2xl backdrop-blur-sm transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-2xl", className, )} + disabled={disabled} globalDrop multiple onSubmit={handleSubmit} @@ -160,6 +163,7 @@ export function InputBox({ @@ -303,6 +307,7 @@ export function InputBox({ diff --git a/frontend/src/components/workspace/recent-chat-list.tsx b/frontend/src/components/workspace/recent-chat-list.tsx index 5915af1..10e82c6 100644 --- a/frontend/src/components/workspace/recent-chat-list.tsx +++ b/frontend/src/components/workspace/recent-chat-list.tsx @@ -23,6 +23,7 @@ import { import { useI18n } from "@/core/i18n/hooks"; import { useDeleteThread, useThreads } from "@/core/threads/hooks"; import { pathOfThread, titleOfThread } from "@/core/threads/utils"; +import { env } from "@/env"; export function RecentChatList() { const { t } = useI18n(); @@ -54,7 +55,11 @@ export function RecentChatList() { } return ( - {t.sidebar.recentChats} + + {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY !== "true" + ? t.sidebar.recentChats + : t.sidebar.demoChats} +
@@ -73,29 +78,31 @@ export function RecentChatList() { > {titleOfThread(thread)} - - - + + + + {t.common.more} + + + - - {t.common.more} - - - - handleDelete(thread.thread_id)} - > - - {t.common.delete} - - - + handleDelete(thread.thread_id)} + > + + {t.common.delete} + + + + )}
diff --git a/frontend/src/components/workspace/settings/settings-dialog.tsx b/frontend/src/components/workspace/settings/settings-dialog.tsx index 8f2f769..40dcf84 100644 --- a/frontend/src/components/workspace/settings/settings-dialog.tsx +++ b/frontend/src/components/workspace/settings/settings-dialog.tsx @@ -47,7 +47,6 @@ export function SettingsDialog({ t.settings.sections.skills, ], ); - return ( enableSkill({ skillName: skill.name, enabled: checked }) } diff --git a/frontend/src/components/workspace/settings/tool-settings-page.tsx b/frontend/src/components/workspace/settings/tool-settings-page.tsx index 73b0bb3..b616092 100644 --- a/frontend/src/components/workspace/settings/tool-settings-page.tsx +++ b/frontend/src/components/workspace/settings/tool-settings-page.tsx @@ -11,6 +11,7 @@ import { Switch } from "@/components/ui/switch"; import { useI18n } from "@/core/i18n/hooks"; import { useMCPConfig, useEnableMCPServer } from "@/core/mcp/hooks"; import type { MCPServerConfig } from "@/core/mcp/types"; +import { env } from "@/env"; import { SettingsSection } from "./settings-section"; @@ -56,6 +57,7 @@ function MCPServerList({ enableMCPServer({ serverName: name, enabled: checked }) } diff --git a/frontend/src/components/workspace/workspace-header.tsx b/frontend/src/components/workspace/workspace-header.tsx index eea3670..2cb8f8b 100644 --- a/frontend/src/components/workspace/workspace-header.tsx +++ b/frontend/src/components/workspace/workspace-header.tsx @@ -12,7 +12,9 @@ import { useSidebar, } from "@/components/ui/sidebar"; import { useI18n } from "@/core/i18n/hooks"; +import { env } from "@/env"; import { cn } from "@/lib/utils"; +import { Tooltip } from "./tooltip"; export function WorkspaceHeader({ className }: { className?: string }) { const { t } = useI18n(); @@ -35,7 +37,7 @@ export function WorkspaceHeader({ className }: { className?: string }) {
) : (
- + DeerFlow diff --git a/frontend/src/core/config/index.ts b/frontend/src/core/config/index.ts index 8806fb9..bcf9cbd 100644 --- a/frontend/src/core/config/index.ts +++ b/frontend/src/core/config/index.ts @@ -4,8 +4,6 @@ export function getBackendBaseURL() { if (env.NEXT_PUBLIC_BACKEND_BASE_URL) { return env.NEXT_PUBLIC_BACKEND_BASE_URL; } else { - // Use empty string for same-origin requests through nginx - // Paths like /api/models will be handled by nginx proxy return ""; } } diff --git a/frontend/src/core/i18n/locales/en-US.ts b/frontend/src/core/i18n/locales/en-US.ts index 37bd0e5..17e00f1 100644 --- a/frontend/src/core/i18n/locales/en-US.ts +++ b/frontend/src/core/i18n/locales/en-US.ts @@ -20,6 +20,7 @@ export const enUS: Translations = { artifacts: "Artifacts", public: "Public", custom: "Custom", + notAvailableInDemoMode: "Not available in demo mode", }, // Welcome @@ -57,6 +58,7 @@ export const enUS: Translations = { newChat: "New chat", chats: "Chats", recentChats: "Recent chats", + demoChats: "Demo chats", }, // Breadcrumb diff --git a/frontend/src/core/i18n/locales/types.ts b/frontend/src/core/i18n/locales/types.ts index 9e60cde..14e839c 100644 --- a/frontend/src/core/i18n/locales/types.ts +++ b/frontend/src/core/i18n/locales/types.ts @@ -18,6 +18,7 @@ export interface Translations { artifacts: string; public: string; custom: string; + notAvailableInDemoMode: string; }; // Welcome @@ -52,6 +53,7 @@ export interface Translations { recentChats: string; newChat: string; chats: string; + demoChats: string; }; // Breadcrumb diff --git a/frontend/src/core/i18n/locales/zh-CN.ts b/frontend/src/core/i18n/locales/zh-CN.ts index 274e6b2..ba6857d 100644 --- a/frontend/src/core/i18n/locales/zh-CN.ts +++ b/frontend/src/core/i18n/locales/zh-CN.ts @@ -20,6 +20,7 @@ export const zhCN: Translations = { artifacts: "文件", public: "公共", custom: "自定义", + notAvailableInDemoMode: "在演示模式下不可用", }, // Welcome @@ -54,7 +55,8 @@ export const zhCN: Translations = { sidebar: { newChat: "新对话", chats: "对话", - recentChats: "最近的聊天", + recentChats: "最近的对话", + demoChats: "演示对话", }, // Breadcrumb