fix: 优化operation.html页面UI体验和可读性

主要修复:
- 删除多余的"立即体验 Duoduo Agent"按钮
- 优化Duoduo Agent设计流程图片展示
- 改善页面文字与背景对比度

详细更改:
1. 布局优化
   - 将设计流程从网格布局改为横向滚动
   - 图片尺寸从h-48增加到h-64
   - 每个卡片固定宽度300px

2. 对比度改善
   - text-gray-500 → text-gray-600
   - 背景色调整为纯白或浅灰
   - 添加font-medium增强可读性

3. 视觉效果
   - 移除过于鲜艳的渐变背景
   - 使用更专业的配色方案
   - 提升整体可读性

影响模块: 会展策划网站运营页面

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yep_Q
2025-09-08 15:25:52 +08:00
parent 08e6304134
commit 1361283492
3 changed files with 394 additions and 42 deletions

View File

@@ -21,3 +21,4 @@ Editor is now accessible via:
http://localhost:5678
(node:12101) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
Node does not have any credentials set

353
n8n-n8n-1.109.2/start.bat Normal file
View File

@@ -0,0 +1,353 @@
@echo off
REM n8n 中文版快速启动脚本 (Windows版)
REM 作者: 小齐
REM 最后更新: 2025-09-08
setlocal enabledelayedexpansion
REM 设置颜色
set "RED=[91m"
set "GREEN=[92m"
set "YELLOW=[93m"
set "BLUE=[94m"
set "NC=[0m"
REM 显示启动横幅
:show_banner
echo %BLUE%======================================%NC%
echo n8n 中文版快速启动脚本
echo 版本: n8n-1.109.2 with 中文翻译
echo 维护者: xiaoqi
echo %BLUE%======================================%NC%
echo.
REM 解析命令行参数
set "DEV_MODE="
set "FORCE_BUILD="
set "CHECK_ONLY="
:parse_args
if "%~1"=="" goto main_execution
if /I "%~1"=="-h" goto show_help
if /I "%~1"=="--help" goto show_help
if /I "%~1"=="-d" (
set "DEV_MODE=true"
shift
goto parse_args
)
if /I "%~1"=="--dev" (
set "DEV_MODE=true"
shift
goto parse_args
)
if /I "%~1"=="-b" (
set "FORCE_BUILD=true"
shift
goto parse_args
)
if /I "%~1"=="--build" (
set "FORCE_BUILD=true"
shift
goto parse_args
)
if /I "%~1"=="-c" (
set "CHECK_ONLY=true"
shift
goto parse_args
)
if /I "%~1"=="--check" (
set "CHECK_ONLY=true"
shift
goto parse_args
)
echo %RED%[错误]%NC% 未知选项: %~1
goto show_help
:main_execution
REM 检查并切换到正确目录
call :check_and_change_directory
if errorlevel 1 goto error_exit
REM 检查依赖
echo %BLUE%[信息]%NC% 正在检查系统依赖...
call :check_dependencies
if errorlevel 1 goto error_exit
REM 检查端口占用
call :check_port
if errorlevel 1 goto error_exit
REM 停止现有进程
call :stop_existing
REM 设置环境变量
call :setup_environment
REM 仅检查模式
if defined CHECK_ONLY (
echo %GREEN%[成功]%NC% 系统状态检查完成,一切正常
goto end
)
REM 强制构建或检查构建状态
if defined FORCE_BUILD (
echo %BLUE%[信息]%NC% 强制重新构建项目...
call pnpm build > build.log 2>&1
if errorlevel 1 (
echo %RED%[错误]%NC% 构建失败,请查看 build.log
type build.log | more
goto error_exit
)
echo %GREEN%[成功]%NC% 构建完成
) else (
call :check_build
if errorlevel 1 goto error_exit
)
REM 开发模式或正常启动
if defined DEV_MODE (
echo %BLUE%[信息]%NC% 正在以开发模式启动 n8n...
echo %YELLOW%[警告]%NC% 开发模式启动时间较长,请耐心等待...
call pnpm dev
) else (
call :start_n8n
)
goto end
REM ========== 函数定义 ==========
:check_and_change_directory
REM 检查当前目录是否为 n8n 项目目录
if exist "package.json" if exist "packages" (
echo %BLUE%[信息]%NC% 检测到当前已在 n8n 项目目录
exit /b 0
)
REM 获取脚本所在目录
set "SCRIPT_DIR=%~dp0"
set "SCRIPT_DIR=%SCRIPT_DIR:~0,-1%"
REM 如果脚本在 n8n-n8n-1.109.2 目录内
echo %SCRIPT_DIR% | findstr /C:"n8n-n8n-1.109.2" >nul
if not errorlevel 1 (
echo %BLUE%[信息]%NC% 切换到脚本所在的 n8n 项目目录: %SCRIPT_DIR%
cd /d "%SCRIPT_DIR%"
if errorlevel 1 (
echo %RED%[错误]%NC% 无法切换到目录: %SCRIPT_DIR%
exit /b 1
)
echo %GREEN%[成功]%NC% 已切换到正确的 n8n 项目目录
exit /b 0
)
REM 尝试找到 n8n-n8n-1.109.2 目录
if exist "n8n-n8n-1.109.2\" (
cd n8n-n8n-1.109.2
) else if exist "..\n8n-n8n-1.109.2\" (
cd ..\n8n-n8n-1.109.2
) else if exist "..\..\n8n-n8n-1.109.2\" (
cd ..\..\n8n-n8n-1.109.2
) else (
echo %RED%[错误]%NC% 未找到 n8n-n8n-1.109.2 目录
echo %BLUE%[信息]%NC% 请确保在正确的项目目录下运行此脚本
exit /b 1
)
REM 验证目录结构
if not exist "package.json" (
echo %RED%[错误]%NC% 目录结构不正确,缺少 package.json
exit /b 1
)
if not exist "packages" (
echo %RED%[错误]%NC% 目录结构不正确,缺少 packages 目录
exit /b 1
)
echo %GREEN%[成功]%NC% 已切换到正确的 n8n 项目目录
exit /b 0
:check_dependencies
REM 检查 Node.js
where node >nul 2>nul
if errorlevel 1 (
echo %RED%[错误]%NC% Node.js 未安装或未在 PATH 中
exit /b 1
)
REM 检查 pnpm
where pnpm >nul 2>nul
if errorlevel 1 (
echo %RED%[错误]%NC% pnpm 未安装或未在 PATH 中
echo %BLUE%[信息]%NC% 请先安装 pnpm: npm install -g pnpm
exit /b 1
)
echo %GREEN%[成功]%NC% 依赖检查通过
exit /b 0
:check_port
REM 检查端口 5678 是否被占用
netstat -ano | findstr :5678 >nul 2>nul
if not errorlevel 1 (
echo %YELLOW%[警告]%NC% 端口 5678 已被占用
echo %BLUE%[信息]%NC% 正在查看占用进程...
netstat -ano | findstr :5678
set /p "kill_process=是否杀死占用进程?(y/N): "
if /I "!kill_process!"=="y" (
echo %BLUE%[信息]%NC% 正在终止占用进程...
for /f "tokens=5" %%a in ('netstat -ano ^| findstr :5678') do (
taskkill /PID %%a /F >nul 2>nul
)
echo %GREEN%[成功]%NC% 进程已终止
) else (
echo %RED%[错误]%NC% 无法启动 n8n端口被占用
exit /b 1
)
)
exit /b 0
:stop_existing
echo %BLUE%[信息]%NC% 正在停止现有的 n8n 进程...
REM 停止可能存在的 n8n 相关进程
taskkill /F /IM node.exe /FI "WINDOWTITLE eq *n8n*" >nul 2>nul
taskkill /F /IM node.exe /FI "WINDOWTITLE eq *pnpm*" >nul 2>nul
REM 等待2秒
timeout /t 2 /nobreak >nul
echo %GREEN%[成功]%NC% 已停止现有进程
exit /b 0
:setup_environment
echo %BLUE%[信息]%NC% 正在设置环境变量...
set "N8N_DEFAULT_LOCALE=zh-CN"
set "N8N_SECURE_COOKIE=false"
set "DB_SQLITE_POOL_SIZE=5"
set "N8N_RUNNERS_ENABLED=true"
set "N8N_BLOCK_ENV_ACCESS_IN_NODE=false"
echo %GREEN%[成功]%NC% 环境变量已设置
echo - N8N_DEFAULT_LOCALE=zh-CN
echo - N8N_SECURE_COOKIE=false
echo - DB_SQLITE_POOL_SIZE=5
exit /b 0
:check_build
if not exist "packages\cli\dist\" (
goto need_build
)
if not exist "packages\core\dist\" (
goto need_build
)
exit /b 0
:need_build
echo %YELLOW%[警告]%NC% 检测到项目需要构建
set /p "build_project=是否现在构建项目?这可能需要几分钟时间 (y/N): "
if /I "!build_project!"=="y" (
echo %BLUE%[信息]%NC% 正在构建项目...
call pnpm build > build.log 2>&1
if errorlevel 1 (
echo %RED%[错误]%NC% 构建失败,请查看 build.log
type build.log | more
exit /b 1
)
echo %GREEN%[成功]%NC% 项目构建完成
)
exit /b 0
:start_n8n
echo %BLUE%[信息]%NC% 正在启动 n8n 中文版...
REM 创建日志文件名
for /f "tokens=2-4 delims=/ " %%a in ('date /t') do (
set "today=%%c%%a%%b"
)
for /f "tokens=1-2 delims=: " %%a in ('time /t') do (
set "now=%%a%%b"
)
set "LOG_FILE=n8n-%today%-%now%.log"
set "LOG_FILE=%LOG_FILE: =%"
echo %GREEN%正在启动 n8n 服务...%NC%
REM 启动 n8n 在新窗口
start "n8n Server" /B cmd /c "pnpm start > %LOG_FILE% 2>&1"
REM 等待启动
echo 等待 n8n 启动
set "count=0"
:wait_loop
set /a count+=1
if %count% gtr 30 goto start_failed
REM 检查端口是否开启
netstat -an | findstr :5678 | findstr LISTENING >nul 2>nul
if not errorlevel 1 goto start_success
REM 显示进度点
<nul set /p "=."
timeout /t 1 /nobreak >nul
goto wait_loop
:start_success
echo.
echo %GREEN%[成功]%NC% n8n 启动成功!
echo.
echo %GREEN%========== 启动信息 ==========%NC%
echo 📱 访问地址: %BLUE%http://localhost:5678%NC%
echo 🌏 界面语言: %GREEN%中文 (zh-CN)%NC%
echo 📝 日志文件: %YELLOW%%LOG_FILE%%NC%
echo %GREEN%=============================%NC%
echo.
echo %BLUE%[信息]%NC% 使用 Ctrl+C 停止服务
echo.
echo %YELLOW%[提示]%NC% 正在监控日志输出...
echo.
REM 持续显示日志
:tail_log
if exist "%LOG_FILE%" (
type "%LOG_FILE%"
timeout /t 2 /nobreak >nul
goto tail_log
)
exit /b 0
:start_failed
echo.
echo %RED%[错误]%NC% n8n 启动失败
echo %BLUE%[信息]%NC% 查看日志文件: %LOG_FILE%
if exist "%LOG_FILE%" (
type "%LOG_FILE%" | more
)
exit /b 1
:show_help
echo 用法: %~nx0 [选项]
echo.
echo 选项:
echo -h, --help 显示此帮助信息
echo -d, --dev 使用开发模式启动 (支持热重载)
echo -b, --build 强制重新构建项目
echo -c, --check 仅检查系统状态,不启动
echo.
echo 示例:
echo %~nx0 # 正常启动
echo %~nx0 -d # 开发模式启动
echo %~nx0 -b # 重新构建并启动
echo.
goto end
:error_exit
echo %RED%[错误]%NC% 脚本执行失败
pause
exit /b 1
:end
endlocal
pause
exit /b 0

View File

@@ -154,7 +154,7 @@
</div>
<div>
<h1 class="text-lg font-bold">NEVIT 2024</h1>
<p class="text-xs text-gray-500">新能源汽车产业博览会</p>
<p class="text-xs text-gray-600 font-medium">新能源汽车产业博览会</p>
</div>
</div>
<div class="hidden md:flex space-x-8">
@@ -239,7 +239,7 @@
<i class="fas fa-map-marked-alt text-teal-600 mr-3"></i>
智能展馆布局规划
</h2>
<p class="text-xl text-gray-600">基于人流动线设计的科学布局</p>
<p class="text-xl text-gray-700 font-medium">基于人流动线设计的科学布局</p>
</div>
<!-- 3D展馆可视化 -->
@@ -644,7 +644,7 @@
</section>
<!-- Duoduo Agent 可视化设计流程 -->
<section class="py-20 bg-gradient-to-br from-purple-50 via-indigo-50 to-blue-50 relative overflow-hidden">
<section class="py-20 bg-white relative overflow-hidden">
<!-- 背景装饰 -->
<div class="absolute inset-0 opacity-5">
<div class="absolute top-20 left-20 w-64 h-64 bg-purple-400 rounded-full filter blur-3xl"></div>
@@ -657,8 +657,8 @@
<i class="fas fa-robot text-purple-600 mr-3"></i>
Duoduo Agent 智能设计系统
</h2>
<p class="text-xl text-gray-600 mb-3">从想法到展位概念的完整可视化流程</p>
<p class="text-lg text-gray-500">让学生直接体验AI驱动的设计革新快速实现创意落地</p>
<p class="text-xl text-gray-700 font-medium mb-3">从想法到展位概念的完整可视化流程</p>
<p class="text-lg text-gray-600">让学生直接体验AI驱动的设计革新快速实现创意落地</p>
</div>
<!-- 流程展示 -->
@@ -688,10 +688,11 @@
</div>
</div>
<!-- 设计阶段展示 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
<!-- 设计阶段展示 - 横向滚动 -->
<div class="overflow-x-auto pb-6">
<div class="flex gap-6" style="min-width: 1600px;">
<!-- Stage 1: CAD设计图 -->
<div class="group relative transform hover:scale-105 transition-all duration-500">
<div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
<div class="bg-gradient-to-r from-purple-500 to-purple-600 text-white p-4">
<h3 class="text-lg font-bold flex items-center">
@@ -704,7 +705,7 @@
<div class="relative overflow-hidden rounded-lg">
<img src="../../data/会展策划/image/Whisk_dcc81c5212.jpg"
alt="CAD设计图"
class="w-full h-48 object-cover transform group-hover:scale-110 transition-transform duration-700">
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<div class="absolute bottom-3 left-3 text-white">
<p class="text-xs">AutoCAD 2024</p>
@@ -714,7 +715,7 @@
</div>
</div>
<div class="px-4 pb-4 pt-2">
<div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center justify-between text-xs text-gray-600">
<span><i class="fas fa-clock mr-1"></i>2小时</span>
<span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
</div>
@@ -723,7 +724,7 @@
</div>
<!-- Stage 2: 概念设计图 -->
<div class="group relative transform hover:scale-105 transition-all duration-500">
<div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
<div class="bg-gradient-to-r from-indigo-500 to-indigo-600 text-white p-4">
<h3 class="text-lg font-bold flex items-center">
@@ -736,7 +737,7 @@
<div class="relative overflow-hidden rounded-lg">
<img src="../../data/会展策划/image/Whisk_e8f83d1a37.jpg"
alt="概念设计图"
class="w-full h-48 object-cover transform group-hover:scale-110 transition-transform duration-700">
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<div class="absolute bottom-3 left-3 text-white">
<p class="text-xs">Adobe Illustrator</p>
@@ -746,7 +747,7 @@
</div>
</div>
<div class="px-4 pb-4 pt-2">
<div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center justify-between text-xs text-gray-600">
<span><i class="fas fa-clock mr-1"></i>3小时</span>
<span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
</div>
@@ -755,7 +756,7 @@
</div>
<!-- Stage 3: 三维建模白模 -->
<div class="group relative transform hover:scale-105 transition-all duration-500">
<div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
<div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-4">
<h3 class="text-lg font-bold flex items-center">
@@ -768,7 +769,7 @@
<div class="relative overflow-hidden rounded-lg">
<img src="../../data/会展策划/image/Whisk_be64a7b61f.jpg"
alt="三维建模白模"
class="w-full h-48 object-cover transform group-hover:scale-110 transition-transform duration-700">
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<div class="absolute bottom-3 left-3 text-white">
<p class="text-xs">SketchUp Pro</p>
@@ -778,7 +779,7 @@
</div>
</div>
<div class="px-4 pb-4 pt-2">
<div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center justify-between text-xs text-gray-600">
<span><i class="fas fa-clock mr-1"></i>4小时</span>
<span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
</div>
@@ -787,7 +788,7 @@
</div>
<!-- Stage 4: 三维渲染图 -->
<div class="group relative transform hover:scale-105 transition-all duration-500">
<div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
<div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white p-4">
<h3 class="text-lg font-bold flex items-center">
@@ -800,7 +801,7 @@
<div class="relative overflow-hidden rounded-lg">
<img src="../../data/会展策划/image/Whisk_192cdc54bc.jpg"
alt="三维渲染图"
class="w-full h-48 object-cover transform group-hover:scale-110 transition-transform duration-700">
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<div class="absolute bottom-3 left-3 text-white">
<p class="text-xs">V-Ray Next</p>
@@ -810,7 +811,7 @@
</div>
</div>
<div class="px-4 pb-4 pt-2">
<div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center justify-between text-xs text-gray-600">
<span><i class="fas fa-clock mr-1"></i>6小时</span>
<span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
</div>
@@ -819,7 +820,7 @@
</div>
<!-- Stage 5: 展位概念设计图 -->
<div class="group relative transform hover:scale-105 transition-all duration-500">
<div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl ring-4 ring-emerald-400 ring-opacity-50">
<div class="bg-gradient-to-r from-emerald-500 to-emerald-600 text-white p-4">
<h3 class="text-lg font-bold flex items-center">
@@ -832,7 +833,7 @@
<div class="relative overflow-hidden rounded-lg">
<img src="../../data/会展策划/image/Whisk_c478fe089d.jpg"
alt="展位概念设计图"
class="w-full h-48 object-cover transform group-hover:scale-110 transition-transform duration-700">
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<div class="absolute bottom-3 left-3 text-white">
<p class="text-xs">Final Design</p>
@@ -847,7 +848,7 @@
</div>
</div>
<div class="px-4 pb-4 pt-2">
<div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center justify-between text-xs text-gray-600">
<span><i class="fas fa-clock mr-1"></i>总计: 20小时</span>
<span><i class="fas fa-trophy text-yellow-500 mr-1"></i>已交付</span>
</div>
@@ -855,6 +856,7 @@
</div>
</div>
</div>
</div>
<!-- AI功能特点 -->
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
@@ -865,7 +867,7 @@
</div>
<div>
<h4 class="font-bold text-gray-800">AI智能生成</h4>
<p class="text-sm text-gray-500">基于需求自动设计</p>
<p class="text-sm text-gray-600">基于需求自动设计</p>
</div>
</div>
<ul class="space-y-2 text-sm text-gray-600">
@@ -882,7 +884,7 @@
</div>
<div>
<h4 class="font-bold text-gray-800">效率提升90%</h4>
<p class="text-sm text-gray-500">传统流程需要2周</p>
<p class="text-sm text-gray-600">传统流程需要2周</p>
</div>
</div>
<ul class="space-y-2 text-sm text-gray-600">
@@ -899,7 +901,7 @@
</div>
<div>
<h4 class="font-bold text-gray-800">学生即可上手</h4>
<p class="text-sm text-gray-500">零基础快速掌握</p>
<p class="text-sm text-gray-600">零基础快速掌握</p>
</div>
</div>
<ul class="space-y-2 text-sm text-gray-600">
@@ -910,14 +912,10 @@
</div>
</div>
<!-- CTA按钮 -->
<!-- 功能说明 -->
<div class="text-center mt-12">
<button class="bg-gradient-to-r from-purple-600 to-blue-600 text-white px-8 py-4 rounded-full text-lg font-bold shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300">
<i class="fas fa-play-circle mr-3"></i>
立即体验 Duoduo Agent
</button>
<p class="text-gray-500 text-sm mt-4">
<i class="fas fa-info-circle mr-1"></i>
<p class="text-gray-600 text-lg font-medium">
<i class="fas fa-info-circle mr-2 text-blue-500"></i>
支持团队协作 · 云端存储 · 版本管理
</p>
</div>
@@ -926,7 +924,7 @@
</section>
<!-- 数字化服务体系 -->
<section class="py-20 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 relative overflow-hidden">
<section class="py-20 bg-gray-50 relative overflow-hidden">
<div class="absolute inset-0">
<div class="absolute top-20 left-20 w-64 h-64 bg-blue-200/30 rounded-full filter blur-3xl"></div>
<div class="absolute bottom-20 right-20 w-80 h-80 bg-purple-200/30 rounded-full filter blur-3xl"></div>