From 6af4efbabc0fc9d8ee2c0624f00a4b9cd03fd95c Mon Sep 17 00:00:00 2001 From: KQL Date: Sun, 24 Aug 2025 14:20:37 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=AE=BF=E9=97=AE=E8=B7=AF?= =?UTF-8?q?=E5=BE=84=EF=BC=8C=E4=BD=BF=E7=94=A8index.html=E4=BD=9C?= =?UTF-8?q?=E4=B8=BA=E9=BB=98=E8=AE=A4=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将 linear-workflow.html 重命名为 index.html - 更新所有配置文件和文档中的引用 - 现在可以直接访问 http://127.0.0.1:5175/ - 添加端口占用检查和自动处理功能 - 简化用户访问体验 --- .claude/settings.local.json | 4 +++- DEPLOYMENT.md | 16 ++++++++-------- README.md | 18 ++++++++---------- linear-workflow.html => index.html | 0 package.json | 4 ++-- quick-start.bat | 16 +++++++++++++++- quick-start.sh | 19 ++++++++++++++++++- 7 files changed, 54 insertions(+), 23 deletions(-) rename linear-workflow.html => index.html (100%) diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 495b4d6..79da42e 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -10,7 +10,9 @@ "Bash(git commit:*)", "Bash(git remote add:*)", "Bash(git push:*)", - "Bash(chmod:*)" + "Bash(chmod:*)", + "Bash(lsof:*)", + "Bash(kill:*)" ], "deny": [], "ask": [] diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md index 01e29be..c301412 100644 --- a/DEPLOYMENT.md +++ b/DEPLOYMENT.md @@ -24,7 +24,7 @@ cd agent quick-start.bat ``` -项目将自动在 `http://127.0.0.1:5175` 启动，并打开 `linear-workflow.html` 页面 +项目将自动在 `http://127.0.0.1:5175/` 启动 --- @@ -73,9 +73,9 @@ npm run serve ### 5. 访问应用 -在浏览器中访问：`http://127.0.0.1:5175/linear-workflow.html` +在浏览器中访问：`http://127.0.0.1:5175/` -或者如果使用 `npm run dev`，浏览器会自动打开 +使用 `npm run dev` 会自动打开浏览器 --- @@ -95,12 +95,12 @@ cd agent python -m SimpleHTTPServer 5175 ``` -访问：`http://127.0.0.1:5175/linear-workflow.html` +访问：`http://127.0.0.1:5175/` ### 使用 Live Server (VS Code) 1. 在 VS Code 中安装 Live Server 扩展 -2. 右键点击 `linear-workflow.html` +2. 右键点击 `index.html` 3. 选择 "Open with Live Server" 4. 修改端口为 5175（可选） @@ -132,7 +132,7 @@ docker run -p 5175:5175 ai-agent-workflow ```json { "scripts": { - "dev": "npx http-server -p 你的端口 -a 127.0.0.1 -o /linear-workflow.html", + "dev": "npx http-server -p 你的端口 -a 127.0.0.1 -o", "serve": "npx http-server -p 你的端口 -a 127.0.0.1" } } @@ -144,7 +144,7 @@ docker run -p 5175:5175 ai-agent-workflow ```json { "scripts": { - "dev": "npx http-server -p 5175 -a 0.0.0.0 -o /linear-workflow.html", + "dev": "npx http-server -p 5175 -a 0.0.0.0 -o", "serve": "npx http-server -p 5175 -a 0.0.0.0" } } @@ -218,7 +218,7 @@ server { server_name 127.0.0.1; root /path/to/agent; - index linear-workflow.html; + index index.html; location / { try_files $uri $uri/ =404; diff --git a/README.md b/README.md index 8c0456e..f847f42 100644 --- a/README.md +++ b/README.md @@ -33,9 +33,7 @@ npm install npm run dev ``` -项目将在 `http://127.0.0.1:5175` 启动，并自动打开浏览器展示 `linear-workflow.html` 页面。 - -如果浏览器没有自动打开，请手动访问：`http://127.0.0.1:5175/linear-workflow.html` +项目将在 `http://127.0.0.1:5175/` 启动，并自动打开浏览器展示页面 ## 部署方式 @@ -67,24 +65,24 @@ python3 -m http.server 5175 --bind 127.0.0.1 python -m SimpleHTTPServer 5175 ``` -然后在浏览器中访问：`http://127.0.0.1:5175/linear-workflow.html` +然后在浏览器中访问：`http://127.0.0.1:5175/` ### 方式三：直接打开 HTML 文件 由于项目使用了本地资源文件，建议使用本地服务器运行。但如果只需要查看基本功能，也可以： -1. 直接在浏览器中打开 `linear-workflow.html` 文件 +1. 直接在浏览器中打开 `index.html` 文件 2. 注意：部分图片资源可能无法正常加载 ## 项目结构 ``` agent/ -├── linear-workflow.html # 主页面文件 -├── package.json # 项目配置文件 -├── README.md # 说明文档 -├── .gitignore # Git忽略文件 -└── public/ # 公共资源目录 +├── index.html # 主页面文件 +├── package.json # 项目配置文件 +├── README.md # 说明文档 +├── .gitignore # Git忽略文件 +└── public/ # 公共资源目录 ├── images/ # 图片资源 │ ├── 1.杯子设计/ │ ├── 2.空间设计/ diff --git a/linear-workflow.html b/index.html similarity index 100% rename from linear-workflow.html rename to index.html diff --git a/package.json b/package.json index 21529c3..0b1eb19 100644 --- a/package.json +++ b/package.json @@ -2,9 +2,9 @@ "name": "ai-agent-workflow", "version": "1.0.0", "description": "AI Agent 设计工作流 - 奶茶快闪店宝可梦主题设计", - "main": "linear-workflow.html", + "main": "index.html", "scripts": { - "dev": "npx http-server . -p 5175 -a 127.0.0.1 -o linear-workflow.html", + "dev": "npx http-server . -p 5175 -a 127.0.0.1 -o", "serve": "npx http-server . -p 5175 -a 127.0.0.1" }, "keywords": [ diff --git a/quick-start.bat b/quick-start.bat index 1583ad9..f39cce5 100644 --- a/quick-start.bat +++ b/quick-start.bat @@ -27,6 +27,20 @@ if %errorlevel% == 0 ( exit /b 1 ) +REM 检查端口是否被占用 +set PORT=5175 +netstat -ano | findstr :%PORT% >nul 2>nul +if %errorlevel% == 0 ( + echo. + echo 警告: 端口 %PORT% 已被占用 + echo 请手动关闭占用该端口的程序，或修改 package.json 中的端口配置 + echo. + echo 提示：可以使用以下命令查看占用端口的进程： + echo netstat -ano ^| findstr :%PORT% + echo. + pause +) + echo. echo 正在安装依赖... call npm install @@ -36,7 +50,7 @@ echo ====================================== echo 启动服务器... echo ====================================== echo. -echo 服务器地址: http://127.0.0.1:5175/linear-workflow.html +echo 服务器地址: http://127.0.0.1:5175/ echo 按 Ctrl+C 停止服务器 echo. diff --git a/quick-start.sh b/quick-start.sh index 01a16e9..65e6453 100755 --- a/quick-start.sh +++ b/quick-start.sh @@ -22,6 +22,23 @@ else exit 1 fi +# 检查端口是否被占用 +PORT=5175 +if lsof -Pi :$PORT -sTCP:LISTEN -t >/dev/null 2>&1; then + echo "" + echo "⚠️ 端口 $PORT 已被占用" + echo "正在尝试关闭占用端口的进程..." + + # 获取占用端口的进程PID + PID=$(lsof -t -i:$PORT) + if [ ! -z "$PID" ]; then + echo "找到进程 PID: $PID" + kill -9 $PID 2>/dev/null + echo "✅ 已终止占用端口的进程" + sleep 1 + fi +fi + echo "" echo "正在安装依赖..." npm install @@ -31,7 +48,7 @@ echo "======================================" echo "🚀 启动服务器..." echo "======================================" echo "" -echo "服务器地址: http://127.0.0.1:5175/linear-workflow.html" +echo "服务器地址: http://127.0.0.1:5175/" echo "按 Ctrl+C 停止服务器" echo ""