优化访问路径,使用index.html作为默认页面

- 将 linear-workflow.html 重命名为 index.html
- 更新所有配置文件和文档中的引用
- 现在可以直接访问 http://127.0.0.1:5175/
- 添加端口占用检查和自动处理功能
- 简化用户访问体验
This commit is contained in:
KQL
2025-08-24 14:20:37 +08:00
parent e8fd104bf7
commit 6af4efbabc
7 changed files with 54 additions and 23 deletions

View File

@@ -10,7 +10,9 @@
"Bash(git commit:*)", "Bash(git commit:*)",
"Bash(git remote add:*)", "Bash(git remote add:*)",
"Bash(git push:*)", "Bash(git push:*)",
"Bash(chmod:*)" "Bash(chmod:*)",
"Bash(lsof:*)",
"Bash(kill:*)"
], ],
"deny": [], "deny": [],
"ask": [] "ask": []

View File

@@ -24,7 +24,7 @@ cd agent
quick-start.bat 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. 访问应用 ### 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 python -m SimpleHTTPServer 5175
``` ```
访问:`http://127.0.0.1:5175/linear-workflow.html` 访问:`http://127.0.0.1:5175/`
### 使用 Live Server (VS Code) ### 使用 Live Server (VS Code)
1. 在 VS Code 中安装 Live Server 扩展 1. 在 VS Code 中安装 Live Server 扩展
2. 右键点击 `linear-workflow.html` 2. 右键点击 `index.html`
3. 选择 "Open with Live Server" 3. 选择 "Open with Live Server"
4. 修改端口为 5175可选 4. 修改端口为 5175可选
@@ -132,7 +132,7 @@ docker run -p 5175:5175 ai-agent-workflow
```json ```json
{ {
"scripts": { "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" "serve": "npx http-server -p 你的端口 -a 127.0.0.1"
} }
} }
@@ -144,7 +144,7 @@ docker run -p 5175:5175 ai-agent-workflow
```json ```json
{ {
"scripts": { "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" "serve": "npx http-server -p 5175 -a 0.0.0.0"
} }
} }
@@ -218,7 +218,7 @@ server {
server_name 127.0.0.1; server_name 127.0.0.1;
root /path/to/agent; root /path/to/agent;
index linear-workflow.html; index index.html;
location / { location / {
try_files $uri $uri/ =404; try_files $uri $uri/ =404;

View File

@@ -33,9 +33,7 @@ npm install
npm run dev npm run dev
``` ```
项目将在 `http://127.0.0.1:5175` 启动,并自动打开浏览器展示 `linear-workflow.html` 页面 项目将在 `http://127.0.0.1:5175/` 启动,并自动打开浏览器展示页面
如果浏览器没有自动打开,请手动访问:`http://127.0.0.1:5175/linear-workflow.html`
## 部署方式 ## 部署方式
@@ -67,24 +65,24 @@ python3 -m http.server 5175 --bind 127.0.0.1
python -m SimpleHTTPServer 5175 python -m SimpleHTTPServer 5175
``` ```
然后在浏览器中访问:`http://127.0.0.1:5175/linear-workflow.html` 然后在浏览器中访问:`http://127.0.0.1:5175/`
### 方式三:直接打开 HTML 文件 ### 方式三:直接打开 HTML 文件
由于项目使用了本地资源文件,建议使用本地服务器运行。但如果只需要查看基本功能,也可以: 由于项目使用了本地资源文件,建议使用本地服务器运行。但如果只需要查看基本功能,也可以:
1. 直接在浏览器中打开 `linear-workflow.html` 文件 1. 直接在浏览器中打开 `index.html` 文件
2. 注意:部分图片资源可能无法正常加载 2. 注意:部分图片资源可能无法正常加载
## 项目结构 ## 项目结构
``` ```
agent/ agent/
├── linear-workflow.html # 主页面文件 ├── index.html # 主页面文件
├── package.json # 项目配置文件 ├── package.json # 项目配置文件
├── README.md # 说明文档 ├── README.md # 说明文档
├── .gitignore # Git忽略文件 ├── .gitignore # Git忽略文件
└── public/ # 公共资源目录 └── public/ # 公共资源目录
├── images/ # 图片资源 ├── images/ # 图片资源
│ ├── 1.杯子设计/ │ ├── 1.杯子设计/
│ ├── 2.空间设计/ │ ├── 2.空间设计/

View File

@@ -2,9 +2,9 @@
"name": "ai-agent-workflow", "name": "ai-agent-workflow",
"version": "1.0.0", "version": "1.0.0",
"description": "AI Agent 设计工作流 - 奶茶快闪店宝可梦主题设计", "description": "AI Agent 设计工作流 - 奶茶快闪店宝可梦主题设计",
"main": "linear-workflow.html", "main": "index.html",
"scripts": { "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" "serve": "npx http-server . -p 5175 -a 127.0.0.1"
}, },
"keywords": [ "keywords": [

View File

@@ -27,6 +27,20 @@ if %errorlevel% == 0 (
exit /b 1 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.
echo 正在安装依赖... echo 正在安装依赖...
call npm install call npm install
@@ -36,7 +50,7 @@ echo ======================================
echo 启动服务器... echo 启动服务器...
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 按 Ctrl+C 停止服务器
echo. echo.

View File

@@ -22,6 +22,23 @@ else
exit 1 exit 1
fi 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 ""
echo "正在安装依赖..." echo "正在安装依赖..."
npm install npm install
@@ -31,7 +48,7 @@ echo "======================================"
echo "🚀 启动服务器..." echo "🚀 启动服务器..."
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 "按 Ctrl+C 停止服务器"
echo "" echo ""