commit a614102de339afa87c5d3b81329094129a403401
Author: Therainclouds <245141853@qq.com>
Date:   Fri Feb 13 12:33:43 2026 +0800

    first commit

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..9179de1
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,69 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Virtual environments
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+.env
+.venv
+
+# Testing
+.tox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+.pytest_cache/
+htmlcov/
+
+# IDEs
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Project specific
+uploads/*
+!uploads/.gitkeep
+*.log
+.git/
+README.md
+
+# Docker
+Dockerfile
+docker-compose.yml
+nginx.conf 
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5b80352
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,187 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+pip-wheel-metadata/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+.python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# macOS
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# Windows
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# Application specific
+uploads/
+logs/
+database/
+chat_history/
diff --git a/.trae/documents/增加内网资产应用及美化页面.md b/.trae/documents/增加内网资产应用及美化页面.md
new file mode 100644
index 0000000..6a4bccd
--- /dev/null
+++ b/.trae/documents/增加内网资产应用及美化页面.md
@@ -0,0 +1,45 @@
+# 增加内网资产应用跳转及样式美化计划
+
+我将在 `templates/index.html` 中添加一个新的“应用服务”板块，包含您指定的6个应用跳转项，并对弹出的内网资产页面（二级页面）进行样式美化。
+
+## 1. 新增应用服务板块
+
+在“台式机资源”下方新增一个 `<div class="asset-section">`，标题为“应用服务”，包含以下应用：
+
+* **it-tools**: 端口 40116 (图标: `fa-toolbox`)
+
+* **langflow**: 端口 7860 (图标: `fa-wind`)
+
+* **n8n**: 端口 5678 (图标: `fa-project-diagram`)
+
+* **certimate**: 端口 8090 (图标: `fa-certificate`)
+
+* **ntfy**: 端口 40265 (图标: `fa-comment-dots`)
+
+* **screego**: 端口 5050 (图标: `fa-desktop`)
+
+* QR-code生成
+
+地址统一为 `6.6.6.66`。
+
+## 2. 样式美化 (CSS)
+
+我将更新 JavaScript 中动态注入的 CSS 样式，以美化弹出的二级页面：
+
+* **整体容器**: 优化 `.internal-assets-container` 的滚动体验和间距。
+
+* **列表项**: 增强 `.asset-item` 的视觉效果，添加更明显的悬停 (Hover) 效果和阴影。
+
+* **凭证详情**: 美化 `.asset-credentials` 区域（虽然新应用暂无凭证，但优化现有凭证的展示）：
+
+  * 添加展开动画 (`slideDown`)。
+
+  * 优化账号/密码显示框的样式，使其看起来更像代码块或卡片。
+
+  * 调整复制按钮的样式。
+
+## 3. 实现步骤
+
+1. 编辑 `templates/index.html`，在 `modalBody.innerHTML` 的模板字符串中插入新的 HTML 结构。
+2. 在同一个文件的 `<style>` 标签内容中（JS 字符串内）添加和更新 CSS 规则。
+
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..7d02ccf
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "idf.pythonInstallPath": "/Applications/miniconda3/bin/python"
+}
\ No newline at end of file
diff --git a/DEPLOY_NOTES.md b/DEPLOY_NOTES.md
new file mode 100644
index 0000000..d901d68
--- /dev/null
+++ b/DEPLOY_NOTES.md
@@ -0,0 +1,118 @@
+# 部署脚本优化报告
+
+## 🚨 主要问题修复
+
+### 1. Python环境管理问题
+**问题**: Ubuntu 24.04 使用了 PEP 668 外部管理环境策略，禁止直接使用 pip 安装包到系统环境
+**解决方案**: 
+- 使用 Python 虚拟环境 (`python3 -m venv`) 
+- 所有依赖安装在隔离的虚拟环境中
+- 应用启动时自动激活虚拟环境
+
+### 2. 环境重复安装优化
+**改进**: 
+- 添加环境检测功能，避免重复安装已存在的组件
+- 智能判断：基础环境 / 虚拟环境 / 完全安装
+- 如果服务器已有环境，跳过系统依赖安装
+
+### 3. 文件上传修复
+**问题**: `database/*` 被排除，导致 `ip_list.json` 无法上传
+**解决方案**: 
+- 移除了 `database/*` 的排除规则
+- `ip_list.json` 现在会正确上传到服务器
+
+## 📁 文件结构改进
+
+```
+服务器部署结构:
+/home/ubuntu/
+├── host_message_venv/          # Python虚拟环境
+│   ├── bin/python              # 虚拟环境Python解释器
+│   ├── bin/pip                 # 虚拟环境pip
+│   └── lib/python3.12/         # 依赖包安装位置
+└── host_message/               # 应用代码
+    ├── main.py                 # 主应用文件
+    ├── database/
+    │   └── ip_list.json        # ✅ 现在会正确上传
+    ├── start_app.sh            # 启动脚本（使用虚拟环境）
+    ├── debug_app.sh            # 调试脚本
+    └── logs/
+        └── supervisor.log      # 应用日志
+```
+
+## 🔧 技术改进
+
+### 虚拟环境管理
+- 创建独立的Python虚拟环境 `/home/ubuntu/host_message_venv`
+- 所有依赖安装在虚拟环境中，避免系统污染
+- 启动脚本自动激活虚拟环境
+
+### 智能部署流程
+```bash
+1. 检查环境状态
+   ├── 完全已安装 → 跳过所有安装
+   ├── 部分安装 → 只创建虚拟环境  
+   └── 未安装 → 完整安装流程
+
+2. 虚拟环境管理
+   ├── 检测现有虚拟环境
+   ├── 重新创建（确保干净）
+   └── 安装所有Python依赖
+
+3. 应用部署
+   ├── 代码解压
+   ├── 启动脚本配置
+   └── Supervisor进程管理
+```
+
+### 错误诊断增强
+- 改进的调试脚本，支持虚拟环境
+- 详细的环境信息输出
+- 更好的错误日志收集
+
+## 🚀 使用指南
+
+### 1. 预检查（推荐）
+```bash
+./pre_deploy_check.sh
+```
+
+### 2. 执行部署
+```bash
+./deploy.sh
+```
+
+### 3. 应用管理
+```bash
+# 查看状态
+ssh ubuntu@6.6.6.86 'sudo supervisorctl status host_message'
+
+# 重启应用
+ssh ubuntu@6.6.6.86 'sudo supervisorctl restart host_message'
+
+# 查看日志
+ssh ubuntu@6.6.6.86 'tail -f /home/ubuntu/host_message/logs/supervisor.log'
+
+# 调试应用
+ssh ubuntu@6.6.6.86 'cd /home/ubuntu/host_message && ./debug_app.sh'
+```
+
+## ✅ 问题解决确认
+
+- ✅ **Python环境管理**: 使用虚拟环境避免 externally-managed-environment 错误
+- ✅ **依赖安装**: 所有包正确安装在虚拟环境中
+- ✅ **文件上传**: ip_list.json 正确上传到服务器
+- ✅ **环境检测**: 智能跳过已安装的组件
+- ✅ **进程管理**: 正确的启动和监控配置
+- ✅ **错误诊断**: 详细的调试信息和日志
+
+## 🎯 预期结果
+
+部署成功后，应用将：
+1. 在独立的Python虚拟环境中运行
+2. 自动启动并保持运行状态
+3. 监听 8888 端口提供服务
+4. 包含完整的 ip_list.json 配置
+5. 具备自动重启和日志管理功能
+
+访问地址: http://6.6.6.86:8888
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..826d878
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,42 @@
+FROM python:3.12-slim
+
+# 设置工作目录
+WORKDIR /app
+
+# 设置环境变量
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    PIP_NO_CACHE_DIR=1 \
+    PIP_DISABLE_PIP_VERSION_CHECK=1
+
+# 安装系统依赖
+RUN apt-get update && apt-get install -y \
+    --no-install-recommends \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# 复制并安装Python依赖
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# 复制应用代码
+COPY . .
+
+# 创建上传文件目录和设置权限
+RUN mkdir -p uploads && \
+    chmod 755 uploads
+
+# 创建非root用户（安全性改进）
+RUN useradd --create-home --shell /bin/bash app && \
+    chown -R app:app /app
+USER app
+
+# 暴露端口
+EXPOSE 8888
+
+# 健康检查
+HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost:8888/health || exit 1
+
+# 启动命令
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8888", "--proxy-headers", "--forwarded-allow-ips", "*"] 
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..8dd2208
--- /dev/null
+++ b/README.md
@@ -0,0 +1,177 @@
+# FastAPI 文件共享和聊天应用
+
+这是一个基于FastAPI的文件共享和实时聊天应用，支持Docker部署并解决了Docker环境下IP获取错误的问题。
+
+## ✨ 主要功能
+
+- 📁 文件上传和下载
+- 💬 实时聊天（WebSocket）
+- 👥 显示在线用户
+- 🔍 真实IP地址获取（支持Docker/代理环境）
+- ❤️ 健康检查
+- 🗑️ 文件删除功能
+
+## 🚀 快速开始
+
+### 方式1：Docker Compose（推荐）
+
+```bash
+# 使用nginx反向代理（推荐，支持真实IP）
+docker-compose up -d
+
+# 访问应用
+open http://localhost
+
+# 查看日志
+docker-compose logs -f
+```
+
+### 方式2：仅FastAPI服务
+
+```bash
+# 构建并运行
+docker-compose up -d web
+
+# 访问应用  
+open http://localhost:1000
+```
+
+### 方式3：本地开发
+
+```bash
+# 安装依赖
+pip install -r requirements.txt
+
+# 开发模式启动
+./start.sh dev
+
+# 或直接启动
+python main.py
+```
+
+## 🔧 IP获取优化
+
+### 问题说明
+在Docker环境中，传统的 `request.client.host` 会返回Docker内部网络IP（如172.x.x.x），而不是真实的客户端IP。
+
+### 解决方案
+本项目实现了智能IP获取机制：
+
+1. **优先级顺序**：
+   - `X-Forwarded-For` 头部
+   - `X-Real-IP` 头部  
+   - `client.host`（排除Docker内部IP）
+
+2. **支持的代理场景**：
+   - Nginx反向代理
+   - Docker网络
+   - Cloudflare等CDN
+   - 各种负载均衡器
+
+### 配置示例
+
+#### Nginx配置
+```nginx
+proxy_set_header X-Real-IP $remote_addr;
+proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+proxy_set_header X-Forwarded-Proto $scheme;
+```
+
+#### Docker启动参数
+```bash
+uvicorn main:app --proxy-headers --forwarded-allow-ips "*"
+```
+
+## 📁 项目结构
+
+```
+├── main.py                 # 主应用文件
+├── templates/              # HTML模板
+│   ├── index.html         # 文件上传页面
+│   └── chat.html          # 聊天页面
+├── uploads/               # 文件存储目录
+├── Dockerfile             # Docker构建文件
+├── docker-compose.yml     # Docker编排文件
+├── nginx.conf             # Nginx配置
+├── requirements.txt       # Python依赖
+├── start.sh              # 启动脚本
+└── README.md             # 说明文档
+```
+
+## 🔗 API端点
+
+| 端点 | 方法 | 描述 |
+|------|------|------|
+| `/` | GET | 主页（文件上传） |
+| `/chat` | GET | 聊天页面 |
+| `/upload` | POST | 上传文件 |
+| `/files` | GET | 获取文件列表 |
+| `/files/{filename}` | DELETE | 删除文件 |
+| `/get_ip` | GET | 获取客户端IP |
+| `/ws` | WebSocket | 聊天WebSocket |
+| `/health` | GET | 健康检查 |
+| `/online_users` | GET | 获取在线用户 |
+
+## 🐳 Docker部署细节
+
+### 环境变量
+```bash
+FORWARDED_ALLOW_IPS=*      # 允许所有IP转发
+PROXY_HEADERS=1            # 启用代理头部
+```
+
+### 端口映射
+- `1000` - FastAPI应用端口
+- `80` - Nginx反向代理端口（可选）
+
+### 数据持久化
+```yaml
+volumes:
+  - ./uploads:/app/uploads  # 文件存储持久化
+```
+
+## 🛠️ 开发说明
+
+### 本地开发
+```bash
+# 安装依赖
+pip install -r requirements.txt
+
+# 启动开发服务器
+./start.sh dev
+
+# 或者
+python main.py
+```
+
+### 调试IP获取
+```python
+# 查看请求头
+print(request.headers)
+
+# 测试IP获取函数
+ip = get_real_client_ip(request=request)
+print(f"Client IP: {ip}")
+```
+
+## 🚨 常见问题
+
+### Q: Docker中IP显示为172.x.x.x？
+A: 使用nginx反向代理或确保启动时包含 `--proxy-headers` 参数。
+
+### Q: WebSocket连接失败？  
+A: 检查防火墙设置和代理配置。
+
+### Q: 文件上传失败？
+A: 检查uploads目录权限和磁盘空间。
+
+### Q: 健康检查失败？
+A: 确保应用正常启动并且端口未被占用。
+
+## 📄 许可证
+
+MIT License
+
+## 🤝 贡献
+
+欢迎提交Issue和Pull Request！ 
\ No newline at end of file
diff --git a/deploy.sh b/deploy.sh
new file mode 100644
index 0000000..0a42fa1
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,648 @@
+#!/bin/bash
+
+# ==========================================================================
+# 自动部署脚本 - host_message 项目
+# 功能：将本地代码打包上传到远程服务器并自动部署
+# ==========================================================================
+
+# 配置信息
+REMOTE_HOST="6.6.6.86"
+REMOTE_USER="ubuntu"
+REMOTE_PASS="qweasdzxc1"
+REMOTE_DIR="/home/ubuntu/host_message"
+LOCAL_DIR="/Users/jeremygan/Desktop/TangledupAI/host_message-main"
+APP_PORT=8888
+ZIP_NAME="host_message_$(date +%Y%m%d_%H%M%S).zip"
+TEMP_ZIP="/tmp/$ZIP_NAME"
+
+# 颜色输出
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# 日志函数
+log_info() {
+    echo -e "${GREEN}[INFO]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
+}
+
+log_warn() {
+    echo -e "${YELLOW}[WARN]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
+}
+
+log_error() {
+    echo -e "${RED}[ERROR]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
+}
+
+log_step() {
+    echo -e "${BLUE}[STEP]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
+}
+
+# 检查依赖
+check_dependencies() {
+    log_step "检查系统依赖..."
+    
+    # 检查 sshpass
+    if ! command -v sshpass &> /dev/null; then
+        log_error "sshpass 未安装，正在安装..."
+        if [[ "$OSTYPE" == "darwin"* ]]; then
+            # macOS
+            if command -v brew &> /dev/null; then
+                brew install sshpass
+            else
+                log_error "请先安装 Homebrew，然后运行: brew install sshpass"
+                exit 1
+            fi
+        elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
+            # Linux
+            sudo apt-get update && sudo apt-get install -y sshpass
+        else
+            log_error "不支持的操作系统，请手动安装 sshpass"
+            exit 1
+        fi
+    fi
+    
+    # 检查 zip
+    if ! command -v zip &> /dev/null; then
+        log_error "zip 命令未找到，请安装 zip 工具"
+        exit 1
+    fi
+    
+    log_info "依赖检查完成"
+}
+
+# 创建代码包
+create_package() {
+    log_step "创建代码包..."
+    
+    # 切换到项目目录
+    cd "$LOCAL_DIR" || {
+        log_error "无法进入项目目录: $LOCAL_DIR"
+        exit 1
+    }
+    
+    # 删除旧的临时文件
+    rm -f "$TEMP_ZIP"
+    
+    # 创建排除文件列表
+    EXCLUDE_PATTERNS=(
+        "*.pyc"
+        "__pycache__/*"
+        ".git/*"
+        ".DS_Store"
+        "logs/*"
+        "*.log"
+        ".env"
+        "venv/*"
+        ".venv/*"
+        "node_modules/*"
+        "uploads/*"
+        "chat_history/*"
+    )
+    
+    # 构建排除参数
+    EXCLUDE_ARGS=""
+    for pattern in "${EXCLUDE_PATTERNS[@]}"; do
+        EXCLUDE_ARGS="$EXCLUDE_ARGS -x $pattern"
+    done
+    
+    # 创建zip包
+    log_info "正在打包文件..."
+    eval "zip -r \"$TEMP_ZIP\" . $EXCLUDE_ARGS"
+    
+    if [ $? -eq 0 ]; then
+        log_info "代码包创建成功: $TEMP_ZIP"
+        log_info "包大小: $(du -h "$TEMP_ZIP" | cut -f1)"
+    else
+        log_error "代码包创建失败"
+        exit 1
+    fi
+}
+
+# 测试SSH连接
+test_ssh_connection() {
+    log_step "测试SSH连接..."
+    
+    sshpass -p "$REMOTE_PASS" ssh -o StrictHostKeyChecking=no -o ConnectTimeout=10 "$REMOTE_USER@$REMOTE_HOST" "echo 'SSH连接测试成功'" 2>/dev/null
+    
+    if [ $? -eq 0 ]; then
+        log_info "SSH连接测试成功"
+    else
+        log_error "SSH连接失败，请检查服务器地址、用户名和密码"
+        exit 1
+    fi
+}
+
+# 上传代码包
+upload_package() {
+    log_step "上传代码包到服务器..."
+    
+    # 使用scp上传文件
+    sshpass -p "$REMOTE_PASS" scp -o StrictHostKeyChecking=no "$TEMP_ZIP" "$REMOTE_USER@$REMOTE_HOST:/tmp/"
+    
+    if [ $? -eq 0 ]; then
+        log_info "代码包上传成功"
+    else
+        log_error "代码包上传失败"
+        exit 1
+    fi
+}
+
+# 远程部署
+remote_deploy() {
+    log_step "在远程服务器上执行部署..."
+    
+    # 创建远程部署脚本
+    REMOTE_SCRIPT=$(cat <<EOF
+#!/bin/bash
+
+# 设置颜色输出
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m'
+
+log_info() {
+    echo -e "\${GREEN}[远程INFO]\${NC} \$(date '+%Y-%m-%d %H:%M:%S') - \$1"
+}
+
+log_error() {
+    echo -e "\${RED}[远程ERROR]\${NC} \$(date '+%Y-%m-%d %H:%M:%S') - \$1"
+}
+
+log_warn() {
+    echo -e "\${YELLOW}[远程WARN]\${NC} \$(date '+%Y-%m-%d %H:%M:%S') - \$1"
+}
+
+# 检查端口占用并杀死进程
+check_and_kill_port() {
+    log_info \"检查端口 $APP_PORT 是否被占用...\"
+    
+    # 查找占用端口的进程
+    PID=\$(lsof -ti:$APP_PORT 2>/dev/null)
+    
+    if [ ! -z \"\$PID\" ]; then
+        log_warn \"发现端口 $APP_PORT 被进程 \$PID 占用，正在终止...\"
+        kill -TERM \$PID
+        sleep 3
+        
+        # 检查进程是否还存在
+        if kill -0 \$PID 2>/dev/null; then
+            log_warn \"进程仍然存在，强制终止...\"
+            kill -KILL \$PID
+            sleep 2
+        fi
+        
+        # 再次检查
+        NEW_PID=\$(lsof -ti:$APP_PORT 2>/dev/null)
+        if [ ! -z \"\$NEW_PID\" ]; then
+            log_error \"无法终止占用端口 $APP_PORT 的进程\"
+            exit 1
+        else
+            log_info \"端口 $APP_PORT 已释放\"
+        fi
+    else
+        log_info \"端口 $APP_PORT 未被占用\"
+    fi
+}
+
+# 检查环境是否已安装
+check_environment() {
+    log_info \"检查服务器环境...\"
+    
+    # 检查Python3
+    if ! python3 --version &> /dev/null; then
+        log_info \"Python3 未安装，需要安装...\"
+        return 1
+    fi
+    
+    # 检查是否存在虚拟环境
+    if [ -d \"/home/ubuntu/host_message_venv\" ]; then
+        log_info \"发现已存在的虚拟环境\"
+        return 0
+    fi
+    
+    # 检查supervisor
+    if ! command -v supervisorctl &> /dev/null; then
+        log_info \"Supervisor 未安装，需要安装...\"
+        return 1
+    fi
+    
+    log_info \"基础环境检查通过，但需要创建虚拟环境\"
+    return 2
+}
+
+# 安装系统依赖
+install_dependencies() {
+    log_info \"安装系统依赖...\"
+    
+    # 更新包列表
+    sudo apt-get update -qq
+    
+    # 安装Python3、pip和相关开发工具
+    log_info \"安装 Python3 和相关工具...\"
+    sudo apt-get install -y python3 python3-pip python3-venv python3-dev build-essential python3-full
+    
+    # 安装supervisor用于进程保活
+    if ! command -v supervisorctl &> /dev/null; then
+        log_info \"安装 supervisor...\"
+        sudo apt-get install -y supervisor
+        sudo systemctl enable supervisor
+        sudo systemctl start supervisor
+    fi
+    
+    # 安装其他必要工具
+    sudo apt-get install -y curl wget unzip lsof net-tools
+    
+    log_info \"系统依赖安装完成\"
+}
+
+# 创建和管理虚拟环境
+setup_virtual_environment() {
+    local venv_path=\"/home/ubuntu/host_message_venv\"
+    
+    log_info \"设置Python虚拟环境...\"
+    
+    # 如果虚拟环境已存在，询问是否重新创建
+    if [ -d \"\$venv_path\" ]; then
+        log_info \"虚拟环境已存在，删除旧环境并重新创建...\"
+        rm -rf \"\$venv_path\"
+    fi
+    
+    # 创建虚拟环境
+    log_info \"创建新的虚拟环境...\"
+    python3 -m venv \"\$venv_path\"
+    
+    if [ \$? -eq 0 ]; then
+        log_info \"虚拟环境创建成功: \$venv_path\"
+    else
+        log_error \"虚拟环境创建失败\"
+        exit 1
+    fi
+    
+    # 激活虚拟环境并升级pip
+    log_info \"激活虚拟环境并升级pip...\"
+    source \"\$venv_path/bin/activate\"
+    pip install --upgrade pip setuptools wheel
+    
+    log_info \"虚拟环境设置完成\"
+}
+
+# 主要部署逻辑
+main_deploy() {
+    # 检查并终止端口进程
+    check_and_kill_port
+    
+    # 检查环境状态
+    check_environment
+    env_status=\$?
+    
+    case \$env_status in
+        0)
+            log_info "环境已完整安装，跳过依赖安装"
+            ;;
+        1)
+            log_info "需要安装基础环境"
+            install_dependencies
+            setup_virtual_environment
+            ;;
+        2)
+            log_info "基础环境已安装，只需创建虚拟环境"
+            setup_virtual_environment
+            ;;
+    esac
+    
+    # 备份旧代码（如果存在）
+    if [ -d \"$REMOTE_DIR\" ]; then
+        log_info \"备份现有代码...\"
+        sudo mv \"$REMOTE_DIR\" \"${REMOTE_DIR}_backup_\$(date +%Y%m%d_%H%M%S)\" 2>/dev/null || true
+    fi
+    
+    # 创建部署目录
+    log_info \"创建部署目录...\"
+    sudo mkdir -p \"$REMOTE_DIR\"
+    sudo chown \$USER:\$USER \"$REMOTE_DIR\"
+    
+    # 解压代码包
+    log_info \"解压代码包...\"
+    cd \"$REMOTE_DIR\"
+    unzip -q \"/tmp/$ZIP_NAME\"
+    
+    if [ \$? -eq 0 ]; then
+        log_info \"代码解压成功\"
+    else
+        log_error \"代码解压失败\"
+        exit 1
+    fi
+    
+    # 创建必要的目录
+    mkdir -p logs uploads chat_history database
+    
+    # 激活虚拟环境并安装Python依赖
+    log_info \"激活虚拟环境并安装Python依赖...\"
+    source \"/home/ubuntu/host_message_venv/bin/activate\"
+    
+    if [ -f \"requirements.txt\" ]; then
+        log_info \"发现 requirements.txt，安装依赖包...\"
+        pip install -r requirements.txt
+        if [ \$? -eq 0 ]; then
+            log_info \"Python依赖安装成功\"
+        else
+            log_error \"Python依赖安装失败\"
+            # 尝试单独安装每个包
+            log_info \"尝试单独安装依赖包...\"
+            while IFS= read -r package; do
+                if [[ ! \$package =~ ^[[:space:]]*# ]] && [[ ! -z \$package ]]; then
+                    log_info \"安装: \$package\"
+                    pip install \$package || log_warn \"安装 \$package 失败\"
+                fi
+            done < requirements.txt
+        fi
+    else
+        log_warn \"未找到 requirements.txt 文件\"
+    fi
+    
+    # 验证关键依赖
+    log_info \"验证Python依赖...\"
+    python -c \"import fastapi, uvicorn; print('关键依赖验证成功')\" || {
+        log_error \"关键依赖验证失败，手动安装...\"
+        pip install fastapi uvicorn
+    }
+    
+    # 检查main.py文件
+    if [ ! -f \"main.py\" ]; then
+        log_error \"main.py 文件不存在！\"
+        exit 1
+    fi
+    
+    # 测试Python应用是否可以启动
+    log_info \"测试Python应用...\"
+    source \"/home/ubuntu/host_message_venv/bin/activate\"
+    timeout 10 python -c \"
+import sys
+sys.path.insert(0, '.')
+try:
+    import main
+    print('应用模块导入成功')
+except Exception as e:
+    print(f'应用模块导入失败: {e}')
+    sys.exit(1)
+\" || log_warn \"应用模块测试失败，但继续部署...\""
+    
+    # 创建启动脚本
+    log_info \"创建应用启动脚本...\"
+    cat > start_app.sh <<SCRIPT_EOF
+#!/bin/bash
+set -e
+
+# 进入应用目录
+cd \"$REMOTE_DIR\"
+
+# 激活虚拟环境
+source \"/home/ubuntu/host_message_venv/bin/activate\"
+
+# 设置环境变量
+export PYTHONPATH=\"$REMOTE_DIR:\\\$PYTHONPATH\"
+
+# 记录启动信息
+echo \"[\$(date)] 应用启动开始...\"
+echo \"当前目录: \$(pwd)\"
+echo \"Python版本: \$(python --version)\"
+echo \"虚拟环境: \$VIRTUAL_ENV\"
+
+# 检查必要文件
+if [ ! -f \"main.py\" ]; then
+    echo \"错误: main.py 文件不存在\"
+    exit 1
+fi
+
+# 启动应用
+echo \"[\$(date)] 启动Python应用...\"
+python main.py
+SCRIPT_EOF
+    chmod +x start_app.sh
+    
+    # 创建调试脚本
+    log_info \"创建调试脚本...\"
+    cat > debug_app.sh <<DEBUG_EOF
+#!/bin/bash
+cd \"$REMOTE_DIR\"
+echo \"=== 调试信息 ===\"
+echo \"当前目录: \$(pwd)\"
+
+# 激活虚拟环境
+source \"/home/ubuntu/host_message_venv/bin/activate\" 2>/dev/null || echo \"虚拟环境激活失败\"
+
+echo \"Python版本: \$(python --version 2>/dev/null || python3 --version)\"
+echo \"pip版本: \$(pip --version 2>/dev/null || echo '无pip')\"
+echo \"虚拟环境: \$VIRTUAL_ENV\"
+echo \"文件列表:\"
+ls -la
+echo \"=== 尝试导入测试 ===\"
+python -c \"
+import sys
+print('Python路径:', sys.path)
+try:
+    import fastapi
+    print('fastapi版本:', fastapi.__version__)
+except ImportError as e:
+    print('fastapi导入失败:', e)
+try:
+    import uvicorn
+    print('uvicorn版本:', uvicorn.__version__)
+except ImportError as e:
+    print('uvicorn导入失败:', e)
+\" 2>/dev/null || python3 -c \"
+import sys
+print('Python路径:', sys.path)
+try:
+    import fastapi
+    print('fastapi版本:', fastapi.__version__)
+except ImportError as e:
+    print('fastapi导入失败:', e)
+try:
+    import uvicorn
+    print('uvicorn版本:', uvicorn.__version__)
+except ImportError as e:
+    print('uvicorn导入失败:', e)
+\"
+echo \"=== 检查端口占用 ===\"
+netstat -tlnp | grep 8888 || echo '端口8888未被占用'
+echo \"=== 尝试启动应用（5秒后停止） ===\"
+timeout 5 python main.py 2>/dev/null || timeout 5 python3 main.py || echo '应用启动测试完成'
+DEBUG_EOF
+    chmod +x debug_app.sh
+    
+    # 创建supervisor配置
+    log_info \"配置进程保活监控...\"
+    sudo tee /etc/supervisor/conf.d/host_message.conf > /dev/null <<EOF
+[program:host_message]
+command=$REMOTE_DIR/start_app.sh
+directory=$REMOTE_DIR
+user=ubuntu
+autostart=true
+autorestart=true
+redirect_stderr=true
+stdout_logfile=$REMOTE_DIR/logs/supervisor.log
+stdout_logfile_maxbytes=10MB
+stdout_logfile_backups=3
+environment=PATH=\"/home/ubuntu/host_message_venv/bin:/usr/local/bin:/usr/bin:/bin\",PYTHONPATH=\"$REMOTE_DIR\"
+startsecs=10
+startretries=3
+EOF
+    
+    # 停止可能存在的旧进程
+    sudo supervisorctl stop host_message 2>/dev/null || true
+    
+    # 重新加载supervisor配置
+    sudo supervisorctl reread
+    sudo supervisorctl update
+    
+    # 启动应用
+    log_info \"启动应用...\"
+    sudo supervisorctl start host_message
+    
+    # 等待应用启动并检查状态
+    log_info \"等待应用启动...\"
+    for i in {1..30}; do
+        sleep 2
+        STATUS=\$(sudo supervisorctl status host_message 2>/dev/null || echo "ERROR")
+        log_info \"第 \$i 次检查: \$STATUS\"
+        
+        if echo \"\$STATUS\" | grep -q \"RUNNING\"; then
+            log_info \"应用启动成功！\"
+            break
+        elif echo \"\$STATUS\" | grep -q \"FATAL\\|BACKOFF\"; then
+            log_error \"应用启动失败: \$STATUS\"
+            log_error \"查看详细日志:\"
+            tail -20 \"$REMOTE_DIR/logs/supervisor.log\" 2>/dev/null || echo \"无法读取日志文件\"
+            
+            # 运行调试脚本
+            log_info \"运行调试脚本获取详细信息:\"
+            cd \"$REMOTE_DIR\"
+            ./debug_app.sh 2>&1 || true
+            
+            # 检查supervisor错误日志
+            log_info \"检查supervisor错误日志:\"
+            sudo tail -20 /var/log/supervisor/supervisord.log 2>/dev/null || echo \"无法读取supervisor日志\"
+            
+            exit 1
+        fi
+        
+        if [ \$i -eq 30 ]; then
+            log_error \"应用启动超时\"
+            log_error \"最终状态: \$STATUS\"
+            exit 1
+        fi
+    done
+    
+    # 检查端口监听
+    log_info \"检查端口监听状态...\"
+    for i in {1..10}; do
+        if netstat -tlnp 2>/dev/null | grep -q \":$APP_PORT\" || ss -tlnp 2>/dev/null | grep -q \":$APP_PORT\"; then
+            log_info \"端口 $APP_PORT 监听正常\"
+            log_info \"部署完成！您可以通过 http://$REMOTE_HOST:$APP_PORT 访问应用\"
+            break
+        else
+            log_warn \"等待端口 $APP_PORT 开始监听... (\$i/10)\"
+            sleep 2
+        fi
+        
+        if [ \$i -eq 10 ]; then
+            log_warn \"端口 $APP_PORT 未在监听，请检查应用日志\"
+            log_info \"当前监听的端口:\"
+            netstat -tlnp 2>/dev/null | grep LISTEN || ss -tlnp 2>/dev/null | grep LISTEN || echo \"无法获取监听端口信息\"
+        fi
+    done
+    
+    # 清理临时文件
+    rm -f \"/tmp/$ZIP_NAME\"
+    
+    log_info \"部署脚本执行完成\"
+}
+
+# 执行主要部署逻辑
+main_deploy
+EOF
+)
+    
+    # 执行远程部署脚本
+    sshpass -p "$REMOTE_PASS" ssh -o StrictHostKeyChecking=no "$REMOTE_USER@$REMOTE_HOST" "$REMOTE_SCRIPT"
+    
+    if [ $? -eq 0 ]; then
+        log_info "远程部署完成"
+    else
+        log_error "远程部署失败"
+        exit 1
+    fi
+}
+
+# 清理本地临时文件
+cleanup() {
+    log_step "清理临时文件..."
+    rm -f "$TEMP_ZIP"
+    log_info "临时文件清理完成"
+}
+
+# 显示部署信息
+show_deploy_info() {
+    echo ""
+    echo "=========================================="
+    echo "           部署完成信息"
+    echo "=========================================="
+    echo "服务器地址: $REMOTE_HOST"
+    echo "部署目录: $REMOTE_DIR"
+    echo "应用端口: $APP_PORT"
+    echo "访问地址: http://$REMOTE_HOST:$APP_PORT"
+    echo "=========================================="
+    echo ""
+    echo "常用管理命令："
+echo "查看应用状态: ssh $REMOTE_USER@$REMOTE_HOST 'sudo supervisorctl status host_message'"
+echo "重启应用:     ssh $REMOTE_USER@$REMOTE_HOST 'sudo supervisorctl restart host_message'"
+echo "停止应用:     ssh $REMOTE_USER@$REMOTE_HOST 'sudo supervisorctl stop host_message'"
+echo "查看日志:     ssh $REMOTE_USER@$REMOTE_HOST 'tail -f $REMOTE_DIR/logs/supervisor.log'"
+echo "调试应用:     ssh $REMOTE_USER@$REMOTE_HOST 'cd $REMOTE_DIR && ./debug_app.sh'"
+echo "=========================================="
+
+# 最后验证部署
+log_info "正在验证部署结果..."
+sshpass -p "$REMOTE_PASS" ssh -o StrictHostKeyChecking=no "$REMOTE_USER@$REMOTE_HOST" "
+    echo '=== 最终验证 ==='
+    sudo supervisorctl status host_message
+    echo '=== 端口检查 ==='
+    netstat -tlnp | grep 8888 || ss -tlnp | grep 8888 || echo '端口8888未监听'
+    echo '=== 进程检查 ==='
+    ps aux | grep 'python3 main.py' | grep -v grep || echo '未找到Python进程'
+" || log_warn "最终验证失败，请手动检查"
+}
+
+# 主函数
+main() {
+    echo "=========================================="
+    echo "     host_message 项目自动部署脚本"
+    echo "=========================================="
+    echo "目标服务器: $REMOTE_HOST"
+    echo "部署目录: $REMOTE_DIR"
+    echo "开始时间: $(date '+%Y-%m-%d %H:%M:%S')"
+    echo "=========================================="
+    echo ""
+    
+    # 执行部署步骤
+    check_dependencies
+    create_package
+    test_ssh_connection
+    upload_package
+    remote_deploy
+    cleanup
+    show_deploy_info
+    
+    log_info "🎉 全部部署任务完成！"
+}
+
+# 错误处理
+set -e
+trap 'log_error "脚本执行过程中发生错误，退出码: $?"' ERR
+
+# 执行主函数
+main "$@"
diff --git a/deploy_fixed.sh b/deploy_fixed.sh
new file mode 100644
index 0000000..a05d4a8
--- /dev/null
+++ b/deploy_fixed.sh
@@ -0,0 +1,243 @@
+#!/bin/bash
+
+# ==========================================================================
+# 自动部署脚本 - host_message 项目
+# 功能：将本地代码打包上传到远程服务器并自动部署
+# ==========================================================================
+
+# 配置信息
+REMOTE_HOST="6.6.6.86"
+REMOTE_USER="ubuntu"
+REMOTE_PASS="qweasdzxc1"
+REMOTE_DIR="/home/ubuntu/host_message"
+LOCAL_DIR="/Users/jeremygan/Desktop/TangledupAI/host_message-main"
+APP_PORT=8888
+ZIP_NAME="host_message_$(date +%Y%m%d_%H%M%S).zip"
+TEMP_ZIP="/tmp/$ZIP_NAME"
+
+# 颜色输出
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# 日志函数
+log_info() {
+    echo -e "${GREEN}[INFO]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
+}
+
+log_warn() {
+    echo -e "${YELLOW}[WARN]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
+}
+
+log_error() {
+    echo -e "${RED}[ERROR]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
+}
+
+log_step() {
+    echo -e "${BLUE}[STEP]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
+}
+
+# 检查依赖
+check_dependencies() {
+    log_step "检查系统依赖..."
+    
+    # 检查 sshpass
+    if ! command -v sshpass &> /dev/null; then
+        log_error "sshpass 未安装，正在安装..."
+        if [[ "$OSTYPE" == "darwin"* ]]; then
+            # macOS
+            if command -v brew &> /dev/null; then
+                brew install sshpass
+            else
+                log_error "请先安装 Homebrew，然后运行: brew install sshpass"
+                exit 1
+            fi
+        elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
+            # Linux
+            sudo apt-get update && sudo apt-get install -y sshpass
+        else
+            log_error "不支持的操作系统，请手动安装 sshpass"
+            exit 1
+        fi
+    fi
+    
+    # 检查 zip
+    if ! command -v zip &> /dev/null; then
+        log_error "zip 命令未找到，请安装 zip 工具"
+        exit 1
+    fi
+    
+    log_info "依赖检查完成"
+}
+
+# 创建代码包
+create_package() {
+    log_step "创建代码包..."
+    
+    # 切换到项目目录
+    cd "$LOCAL_DIR" || {
+        log_error "无法进入项目目录: $LOCAL_DIR"
+        exit 1
+    }
+    
+    # 删除旧的临时文件
+    rm -f "$TEMP_ZIP"
+    
+    # 创建排除文件列表
+    EXCLUDE_PATTERNS=(
+        "*.pyc"
+        "__pycache__/*"
+        ".git/*"
+        ".DS_Store"
+        "logs/*"
+        "*.log"
+        ".env"
+        "venv/*"
+        ".venv/*"
+        "node_modules/*"
+        "uploads/*"
+        "chat_history/*"
+    )
+    
+    # 构建排除参数
+    EXCLUDE_ARGS=""
+    for pattern in "${EXCLUDE_PATTERNS[@]}"; do
+        EXCLUDE_ARGS="$EXCLUDE_ARGS -x $pattern"
+    done
+    
+    # 创建zip包
+    log_info "正在打包文件..."
+    eval "zip -r \"$TEMP_ZIP\" . $EXCLUDE_ARGS"
+    
+    if [ $? -eq 0 ]; then
+        log_info "代码包创建成功: $TEMP_ZIP"
+        log_info "包大小: $(du -h "$TEMP_ZIP" | cut -f1)"
+    else
+        log_error "代码包创建失败"
+        exit 1
+    fi
+}
+
+# 测试SSH连接
+test_ssh_connection() {
+    log_step "测试SSH连接..."
+    
+    sshpass -p "$REMOTE_PASS" ssh -o StrictHostKeyChecking=no -o ConnectTimeout=10 "$REMOTE_USER@$REMOTE_HOST" "echo 'SSH连接测试成功'" 2>/dev/null
+    
+    if [ $? -eq 0 ]; then
+        log_info "SSH连接测试成功"
+    else
+        log_error "SSH连接失败，请检查服务器地址、用户名和密码"
+        exit 1
+    fi
+}
+
+# 上传代码包
+upload_package() {
+    log_step "上传代码包到服务器..."
+    
+    # 使用scp上传文件
+    sshpass -p "$REMOTE_PASS" scp -o StrictHostKeyChecking=no "$TEMP_ZIP" "$REMOTE_USER@$REMOTE_HOST:/tmp/"
+    
+    if [ $? -eq 0 ]; then
+        log_info "代码包上传成功"
+    else
+        log_error "代码包上传失败"
+        exit 1
+    fi
+}
+
+# 远程部署
+remote_deploy() {
+    log_step "在远程服务器上执行部署..."
+    
+    # 上传远程部署脚本
+    sshpass -p "$REMOTE_PASS" scp -o StrictHostKeyChecking=no "remote_deploy_script.sh" "$REMOTE_USER@$REMOTE_HOST:/tmp/"
+    
+    # 执行远程部署脚本
+    sshpass -p "$REMOTE_PASS" ssh -o StrictHostKeyChecking=no "$REMOTE_USER@$REMOTE_HOST" "chmod +x /tmp/remote_deploy_script.sh && /tmp/remote_deploy_script.sh '$ZIP_NAME'"
+    
+    if [ $? -eq 0 ]; then
+        log_info "远程部署完成"
+    else
+        log_error "远程部署失败"
+        exit 1
+    fi
+}
+
+# 清理本地临时文件
+cleanup() {
+    log_step "清理临时文件..."
+    rm -f "$TEMP_ZIP"
+    log_info "临时文件清理完成"
+}
+
+# 显示部署信息
+show_deploy_info() {
+    echo ""
+    echo "=========================================="
+    echo "           部署完成信息"
+    echo "=========================================="
+    echo "服务器地址: $REMOTE_HOST"
+    echo "部署目录: $REMOTE_DIR"
+    echo "应用端口: $APP_PORT"
+    echo "访问地址: http://$REMOTE_HOST:$APP_PORT"
+    echo "=========================================="
+    echo ""
+    echo "常用管理命令："
+    echo "查看应用状态: ssh $REMOTE_USER@$REMOTE_HOST 'sudo supervisorctl status host_message'"
+    echo "重启应用:     ssh $REMOTE_USER@$REMOTE_HOST 'sudo supervisorctl restart host_message'"
+    echo "停止应用:     ssh $REMOTE_USER@$REMOTE_HOST 'sudo supervisorctl stop host_message'"
+    echo "查看日志:     ssh $REMOTE_USER@$REMOTE_HOST 'tail -f $REMOTE_DIR/logs/supervisor.log'"
+    echo "调试应用:     ssh $REMOTE_USER@$REMOTE_HOST 'cd $REMOTE_DIR && ./debug_app.sh'"
+    echo "=========================================="
+
+    # 最后验证部署
+    log_info "正在验证部署结果..."
+    sshpass -p "$REMOTE_PASS" ssh -o StrictHostKeyChecking=no "$REMOTE_USER@$REMOTE_HOST" "
+        echo '=== 最终验证 ==='
+        sudo supervisorctl status host_message
+        echo '=== 端口检查 ==='
+        netstat -tlnp | grep 8888 || ss -tlnp | grep 8888 || echo '端口8888未监听'
+        echo '=== 进程检查 ==='
+        ps aux | grep 'python3 main.py' | grep -v grep || echo '未找到Python进程'
+    " || log_warn "最终验证失败，请手动检查"
+}
+
+# 主函数
+main() {
+    echo "=========================================="
+    echo "     host_message 项目自动部署脚本"
+    echo "=========================================="
+    echo "目标服务器: $REMOTE_HOST"
+    echo "部署目录: $REMOTE_DIR"
+    echo "开始时间: $(date '+%Y-%m-%d %H:%M:%S')"
+    echo "=========================================="
+    echo ""
+    
+    # 执行部署步骤
+    check_dependencies
+    create_package
+    test_ssh_connection
+    upload_package
+    remote_deploy
+    cleanup
+    show_deploy_info
+    
+    log_info "🎉 全部部署任务完成！"
+}
+
+# 错误处理
+set -e
+trap 'log_error "脚本执行过程中发生错误，退出码: $?"' ERR
+
+# 执行主函数
+main "$@"
+
+
+
+
+
+
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..72f09e5
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,25 @@
+version: '3.8'
+
+services:
+  web:
+    build: .
+    ports:
+      - "8888:8888"
+    volumes:
+      - ./uploads:/app/uploads
+    environment:
+      - FORWARDED_ALLOW_IPS=*
+      - PROXY_HEADERS=1
+    restart: unless-stopped
+    
+  # 可选：添加nginx反向代理来更好地处理真实IP
+  nginx:
+    image: nginx:alpine
+    ports:
+      - "88:88"
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro
+      - /mnt/server/host_message_files:/mnt/server/host_message_files
+    depends_on:
+      - web
+    restart: unless-stopped 
\ No newline at end of file
diff --git a/image/avatar/ag.png b/image/avatar/ag.png
new file mode 100644
index 0000000..b369efa
Binary files /dev/null and b/image/avatar/ag.png differ
diff --git a/image/avatar/azhi.png b/image/avatar/azhi.png
new file mode 100644
index 0000000..238e5ea
Binary files /dev/null and b/image/avatar/azhi.png differ
diff --git a/image/avatar/changfeng.png b/image/avatar/changfeng.png
new file mode 100644
index 0000000..84db575
Binary files /dev/null and b/image/avatar/changfeng.png differ
diff --git a/image/avatar/hongzong.png b/image/avatar/hongzong.png
new file mode 100644
index 0000000..3611ab0
Binary files /dev/null and b/image/avatar/hongzong.png differ
diff --git a/image/avatar/liwei.png b/image/avatar/liwei.png
new file mode 100644
index 0000000..d6d5494
Binary files /dev/null and b/image/avatar/liwei.png differ
diff --git a/image/avatar/server.png b/image/avatar/server.png
new file mode 100644
index 0000000..4508147
Binary files /dev/null and b/image/avatar/server.png differ
diff --git a/image/avatar/xiaoji.png b/image/avatar/xiaoji.png
new file mode 100644
index 0000000..896c3c1
Binary files /dev/null and b/image/avatar/xiaoji.png differ
diff --git a/image/logo2.png b/image/logo2.png
new file mode 100644
index 0000000..5b39ab5
Binary files /dev/null and b/image/logo2.png differ
diff --git a/image/logo_w.ico b/image/logo_w.ico
new file mode 100644
index 0000000..982f514
Binary files /dev/null and b/image/logo_w.ico differ
diff --git a/main.py b/main.py
new file mode 100644
index 0000000..bb3f1f2
--- /dev/null
+++ b/main.py
@@ -0,0 +1,1771 @@
+from fastapi import FastAPI, UploadFile, File, WebSocket, Form, HTTPException, Depends
+from fastapi.responses import FileResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.security import HTTPBasic, HTTPBasicCredentials
+import uvicorn
+import os
+from datetime import datetime
+import socket
+from fastapi import Request
+import json
+from starlette.responses import StreamingResponse
+import asyncio
+import aiofiles
+from typing import Dict, List, Optional
+import uuid
+from dataclasses import dataclass, asdict
+from collections import defaultdict
+import secrets
+import base64
+
+# 配置FastAPI应用，优化大文件上传
+app = FastAPI(
+    title="局域网文件传输系统",
+    description="高效的局域网文件传输和聊天系统",
+    version="2.0.0"
+)
+
+# HTTP Basic 认证配置
+security = HTTPBasic()
+
+# 127.0.0.1 访问认证配置
+LOCALHOST_USERNAME = "tangledupai"
+LOCALHOST_PASSWORD = "123tangledup-ai"
+
+def verify_credentials(credentials: HTTPBasicCredentials = Depends(security)):
+    """验证用户名和密码"""
+    correct_username = secrets.compare_digest(credentials.username, LOCALHOST_USERNAME)
+    correct_password = secrets.compare_digest(credentials.password, LOCALHOST_PASSWORD)
+    if not (correct_username and correct_password):
+        raise HTTPException(
+            status_code=401,
+            detail="Invalid authentication credentials",
+            headers={"WWW-Authenticate": "Basic"},
+        )
+    return credentials.username
+
+def require_auth_for_localhost(request: Request):
+    """检查是否需要对127.0.0.1进行身份验证"""
+    client_ip = get_real_client_ip(request=request)
+    return client_ip == "127.0.0.1"
+
+def conditional_auth(request: Request):
+    """条件性身份验证：只对127.0.0.1要求认证"""
+    client_ip = get_real_client_ip(request=request)
+    if client_ip == "127.0.0.1":
+        # 获取Basic Auth header
+        authorization = request.headers.get("authorization")
+        if not authorization or not authorization.startswith("Basic "):
+            raise HTTPException(
+                status_code=401,
+                detail="Authentication required for localhost access",
+                headers={"WWW-Authenticate": "Basic"},
+            )
+        
+        # 解析认证信息
+        try:
+            encoded_credentials = authorization.split(" ")[1]
+            decoded_credentials = base64.b64decode(encoded_credentials).decode("utf-8")
+            username, password = decoded_credentials.split(":", 1)
+            
+            # 验证凭据
+            correct_username = secrets.compare_digest(username, LOCALHOST_USERNAME)
+            correct_password = secrets.compare_digest(password, LOCALHOST_PASSWORD)
+            if not (correct_username and correct_password):
+                raise HTTPException(
+                    status_code=401,
+                    detail="Invalid authentication credentials",
+                    headers={"WWW-Authenticate": "Basic"},
+                )
+        except (ValueError, UnicodeDecodeError):
+            raise HTTPException(
+                status_code=401,
+                detail="Invalid authentication format",
+                headers={"WWW-Authenticate": "Basic"},
+            )
+    
+    return True
+
+with open(os.path.join(os.path.dirname(__file__), "database", "ip_list.json"), "r") as f:
+    ip_list = json.load(f)
+
+admin_ip = ip_list["admin_ip"]
+ip_vs_name = ip_list["ip_vs_name"]
+ip_vs_avatar = ip_list["ip_vs_avatar"]
+
+print(f"管理员IP: {admin_ip}")
+
+
+
+
+
+
+
+# 允许跨域请求 - 优化大文件上传配置
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+    # 添加大文件上传相关配置
+    expose_headers=["Content-Length", "Content-Range"],
+    max_age=3600,  # 预检请求缓存时间
+)
+
+# 创建上传文件存储目录 //// /
+#UPLOAD_DIR = "/mnt/server/host_message_files"
+UPLOAD_DIR = "uploads"
+CHAT_HISTORY_DIR = "chat_history"
+if not os.path.exists(UPLOAD_DIR):
+    os.makedirs(UPLOAD_DIR)
+if not os.path.exists(CHAT_HISTORY_DIR):
+    os.makedirs(CHAT_HISTORY_DIR)
+
+# 文件夹管理函数
+def ensure_folder_exists(folder_path):
+    """确保文件夹存在，如果不存在则创建"""
+    full_path = os.path.join(UPLOAD_DIR, folder_path)
+    if not os.path.exists(full_path):
+        os.makedirs(full_path)
+    return full_path
+
+def get_file_info(file_path, relative_path=""):
+    """获取文件或文件夹信息"""
+    is_dir = os.path.isdir(file_path)
+    name = os.path.basename(file_path)
+    
+    if is_dir:
+        return {
+            "name": name,
+            "type": "folder",
+            "path": relative_path,
+            "size": 0,
+            "created": datetime.fromtimestamp(os.path.getctime(file_path)).strftime("%Y-%m-%d %H:%M:%S"),
+            "uploader_username": "系统",
+            "uploader_ip": "system",
+            "comment": ""
+        }
+    else:
+        # 读取文件元数据
+        metadata = {}
+        metadata_path = file_path + ".meta"
+        if os.path.exists(metadata_path):
+            try:
+                with open(metadata_path, "r", encoding="utf-8") as f:
+                    metadata = json.load(f)
+            except:
+                pass
+        
+        return {
+            "name": name,
+            "type": "file",
+            "path": relative_path,
+            "size": os.path.getsize(file_path),
+            "created": datetime.fromtimestamp(os.path.getctime(file_path)).strftime("%Y-%m-%d %H:%M:%S"),
+            "uploader_username": metadata.get("uploader_username", "未知用户"),
+            "uploader_ip": metadata.get("uploader_ip", "未知"),
+            "comment": metadata.get("comment", ""),
+            "original_name": metadata.get("original_name", name)
+        }
+
+# 挂载静态文件目录
+app.mount("/uploads", StaticFiles(directory=UPLOAD_DIR), name="uploads")
+app.mount("/image", StaticFiles(directory="image"), name="image")
+
+# 用户管理
+@dataclass
+class User:
+    username: str
+    session_id: str
+    ip: str
+    connected_at: datetime
+    last_seen: datetime
+
+@dataclass
+class ChatMessage:
+    id: str
+    username: str
+    message: str
+    message_type: str  # 'text', 'file'
+    timestamp: datetime
+    target_user: Optional[str] = None  # 私聊目标用户
+
+# 内存存储
+active_users: Dict[str, User] = {}  # session_id -> User
+user_sessions: Dict[str, str] = {}  # username -> session_id
+chat_history: List[ChatMessage] = []  # 全局聊天历史
+private_chat_history: Dict[str, List[ChatMessage]] = defaultdict(list)  # 私聊历史
+
+# 添加全局聊天历史存储
+global_chat_history: List[dict] = []
+private_chat_storage: Dict[str, List[dict]] = defaultdict(list)  # IP对话历史
+MAX_HISTORY_MESSAGES = 200  # 增加历史消息数量
+
+# 历史消息文件路径
+GROUP_HISTORY_FILE = os.path.join(CHAT_HISTORY_DIR, "group_history.json")
+PRIVATE_HISTORY_FILE = os.path.join(CHAT_HISTORY_DIR, "private_history.json")
+
+# 启动时加载历史消息
+async def load_chat_history():
+    """从文件加载聊天历史"""
+    global global_chat_history, private_chat_storage
+    
+    # 加载群聊历史
+    try:
+        if os.path.exists(GROUP_HISTORY_FILE):
+            async with aiofiles.open(GROUP_HISTORY_FILE, 'r', encoding='utf-8') as f:
+                content = await f.read()
+                if content.strip():
+                    global_chat_history = json.loads(content)
+                    print(f"加载群聊历史消息: {len(global_chat_history)} 条")
+    except Exception as e:
+        print(f"加载群聊历史失败: {e}")
+        global_chat_history = []
+    
+    # 加载私聊历史
+    try:
+        if os.path.exists(PRIVATE_HISTORY_FILE):
+            async with aiofiles.open(PRIVATE_HISTORY_FILE, 'r', encoding='utf-8') as f:
+                content = await f.read()
+                if content.strip():
+                    private_chat_storage = defaultdict(list, json.loads(content))
+                    print(f"加载私聊历史: {len(private_chat_storage)} 个对话")
+    except Exception as e:
+        print(f"加载私聊历史失败: {e}")
+        private_chat_storage = defaultdict(list)
+
+async def save_group_history():
+    """保存群聊历史到文件"""
+    try:
+        # 保留最新的消息
+        messages_to_save = global_chat_history[-MAX_HISTORY_MESSAGES:] if len(global_chat_history) > MAX_HISTORY_MESSAGES else global_chat_history
+        
+        async with aiofiles.open(GROUP_HISTORY_FILE, 'w', encoding='utf-8') as f:
+            await f.write(json.dumps(messages_to_save, ensure_ascii=False, indent=2))
+    except Exception as e:
+        print(f"保存群聊历史失败: {e}")
+
+async def save_private_history():
+    """保存私聊历史到文件"""
+    try:
+        # 清理过老的私聊记录，保留每个对话的最新消息
+        cleaned_storage = {}
+        for chat_key, messages in private_chat_storage.items():
+            cleaned_storage[chat_key] = messages[-MAX_HISTORY_MESSAGES:] if len(messages) > MAX_HISTORY_MESSAGES else messages
+        
+        async with aiofiles.open(PRIVATE_HISTORY_FILE, 'w', encoding='utf-8') as f:
+            await f.write(json.dumps(cleaned_storage, ensure_ascii=False, indent=2))
+    except Exception as e:
+        print(f"保存私聊历史失败: {e}")
+
+# 优化的IP获取函数 - 保持不变
+def get_real_client_ip(request: Request = None, websocket: WebSocket = None) -> str:
+    """
+    获取真实的客户端IP地址，支持Docker和代理环境
+    优先级：X-Forwarded-For > X-Real-IP > X-Forwarded-Proto > client.host
+    """
+    headers = {}
+    client_host = None
+    
+    if request:
+        headers = request.headers
+        client_host = request.client.host
+    elif websocket:
+        headers = websocket.headers
+        client_host = websocket.client.host
+    
+    # 尝试从各种代理头获取真实IP
+    forwarded_for = headers.get("x-forwarded-for")
+    if forwarded_for:
+        # X-Forwarded-For 可能包含多个IP，第一个是原始客户端IP
+        client_ip = forwarded_for.split(",")[0].strip()
+        if client_ip and client_ip != "unknown":
+            return client_ip
+    
+    # 尝试从X-Real-IP获取
+    real_ip = headers.get("x-real-ip")
+    if real_ip and real_ip != "unknown":
+        return real_ip
+    
+    # 尝试从X-Forwarded-Proto获取
+    forwarded_proto = headers.get("x-forwarded-proto")
+    if forwarded_proto:
+        # 这通常只是协议，但某些代理可能包含IP信息
+        pass
+    
+    # 如果都没有，使用客户端host，但检查是否为Docker内部IP
+    if client_host:
+        # Docker内部网络通常是172.x.x.x，如果检测到则尝试其他方法
+        if not client_host.startswith(("172.", "127.0.0.1", "::1")):
+            return client_host
+    
+    # 最后的备选方案
+    return client_host or "unknown"
+
+# 修改 WebSocket 连接管理，使用用户名
+class ConnectionManager:
+    def __init__(self):
+        self.active_connections: Dict[str, WebSocket] = {}  # session_id -> WebSocket
+
+    async def connect(self, websocket: WebSocket, session_id: str):
+        await websocket.accept()
+        self.active_connections[session_id] = websocket
+        print(f"User connected with session: {session_id}")
+
+    def disconnect(self, session_id: str):
+        if session_id in self.active_connections:
+            del self.active_connections[session_id]
+            print(f"User disconnected: {session_id}")
+
+    async def broadcast(self, message: dict, exclude_session: str = None):
+        disconnected_sessions = []
+        
+        for session_id, connection in self.active_connections.items():
+            if session_id != exclude_session:
+                try:
+                    await connection.send_json(message)
+                except Exception as e:
+                    print(f"Error sending message to {session_id}: {e}")
+                    disconnected_sessions.append(session_id)
+        
+        # 清理断开的连接
+        for session_id in disconnected_sessions:
+            self.disconnect(session_id)
+
+    async def send_private_message(self, message: dict, target_session: str, sender_session: str):
+        try:
+            # 发送给目标用户
+            if target_session in self.active_connections:
+                await self.active_connections[target_session].send_json(message)
+            
+            # 发送给发送者（如果不是同一个session）
+            if sender_session != target_session and sender_session in self.active_connections:
+                await self.active_connections[sender_session].send_json(message)
+        except Exception as e:
+            print(f"Error in send_private_message: {e}")
+
+manager = ConnectionManager()
+
+# 简单连接管理（用于无需登录的聊天）
+simple_connections: Dict[str, dict] = {}
+
+async def broadcast_simple_message(message: dict, exclude_id: str = None):
+    """广播消息给所有简单连接"""
+    disconnected_ids = []
+    
+    for connection_id, connection_info in simple_connections.items():
+        if connection_id != exclude_id:
+            try:
+                await connection_info['websocket'].send_json(message)
+            except Exception as e:
+                print(f"Error sending message to {connection_id}: {e}")
+                disconnected_ids.append(connection_id)
+    
+    # 清理断开的连接
+    for connection_id in disconnected_ids:
+        if connection_id in simple_connections:
+            del simple_connections[connection_id]
+
+async def send_chat_history(websocket: WebSocket, client_ip: str):
+    """发送所有相关聊天历史给新连接的用户"""
+    try:
+        total_messages_sent = 0
+        
+        # 发送群聊历史
+        if global_chat_history:
+            await websocket.send_json({
+                'type': 'history_start',
+                'message': '正在加载群聊历史...'
+            })
+            
+            # 按时间排序发送群聊历史
+            sorted_group_messages = sorted(global_chat_history, key=lambda x: x.get('timestamp', 0))
+            for message in sorted_group_messages:
+                # 确保消息格式正确
+                history_message = {
+                    'message': message.get('message', ''),
+                    'type': message.get('type', 'text'),
+                    'ip': message.get('ip', 'unknown'),
+                    'timestamp': message.get('timestamp', 0),
+                    'is_history': True
+                }
+                
+                await websocket.send_json(history_message)
+                total_messages_sent += 1
+                
+                # 添加小延迟避免消息过快
+                await asyncio.sleep(0.01)
+        
+        # 发送与该IP相关的所有私聊历史
+        private_messages_sent = 0
+        for chat_key, messages in private_chat_storage.items():
+            # 检查这个对话是否涉及当前用户
+            if client_ip in chat_key:
+                if private_messages_sent == 0:
+                    await websocket.send_json({
+                        'type': 'history_start',
+                        'message': '正在加载私聊历史...'
+                    })
+                
+                # 按时间排序发送私聊历史
+                sorted_private_messages = sorted(messages, key=lambda x: x.get('timestamp', 0))
+                for message in sorted_private_messages:
+                    # 确保消息格式正确
+                    history_message = {
+                        'message': message.get('message', ''),
+                        'type': message.get('type', 'text'),
+                        'ip': message.get('ip', 'unknown'),
+                        'timestamp': message.get('timestamp', 0),
+                        'targetIp': message.get('targetIp', ''),
+                        'is_history': True
+                    }
+                    
+                    await websocket.send_json(history_message)
+                    private_messages_sent += 1
+                    total_messages_sent += 1
+                    
+                    # 添加小延迟避免消息过快
+                    await asyncio.sleep(0.01)
+        
+        # 发送加载完成消息
+        if total_messages_sent > 0:
+            await websocket.send_json({
+                'type': 'history_end',
+                'message': f'历史消息加载完成 (群聊: {len(global_chat_history)} 条, 私聊: {private_messages_sent} 条)'
+            })
+            print(f"发送历史消息给 {client_ip}: 群聊 {len(global_chat_history)} 条, 私聊 {private_messages_sent} 条")
+        else:
+            print(f"没有历史消息发送给 {client_ip}")
+        
+    except Exception as e:
+        print(f"Error sending chat history: {e}")
+        # 发送错误消息
+        try:
+            await websocket.send_json({
+                'type': 'system',
+                'message': '历史消息加载失败',
+                'ip': 'system',
+                'timestamp': datetime.now().timestamp() * 1000
+            })
+        except:
+            pass
+
+def add_to_global_history(message: dict):
+    """添加消息到全局历史记录"""
+    global global_chat_history
+    
+    # 只保存群聊消息到全局历史
+    if not message.get('targetIp'):
+        # 确保时间戳存在
+        if 'timestamp' not in message:
+            message['timestamp'] = datetime.now().timestamp() * 1000
+            
+        global_chat_history.append(message)
+        
+        # 异步保存到文件
+        asyncio.create_task(save_group_history())
+
+def add_to_private_history(message: dict, ip1: str, ip2: str):
+    """添加消息到私聊历史记录"""
+    # 创建统一的聊天键（按字典序排序确保一致性）
+    chat_key = "_".join(sorted([ip1, ip2]))
+    
+    # 确保时间戳存在
+    if 'timestamp' not in message:
+        message['timestamp'] = datetime.now().timestamp() * 1000
+    
+    private_chat_storage[chat_key].append(message)
+    
+    # 异步保存到文件
+    asyncio.create_task(save_private_history())
+
+async def broadcast_private_message(message: dict, target_ip: str, sender_id: str):
+    """发送私聊消息给特定IP用户"""
+    disconnected_ids = []
+    message_sent = False
+    sender_ip = None
+    
+    # 获取发送者IP
+    if sender_id in simple_connections:
+        sender_ip = simple_connections[sender_id]['ip']
+    
+    for connection_id, connection_info in simple_connections.items():
+        # 发送给目标IP或发送者
+        if connection_info['ip'] == target_ip or connection_id == sender_id:
+            try:
+                await connection_info['websocket'].send_json(message)
+                message_sent = True
+            except Exception as e:
+                print(f"Error sending private message to {connection_id}: {e}")
+                disconnected_ids.append(connection_id)
+    
+    # 保存私聊消息到历史记录
+    if sender_ip and sender_ip != target_ip:
+        add_to_private_history(message, sender_ip, target_ip)
+    
+    # 清理断开的连接
+    for connection_id in disconnected_ids:
+        if connection_id in simple_connections:
+            del simple_connections[connection_id]
+    
+    if not message_sent and sender_id in simple_connections:
+        try:
+            await simple_connections[sender_id]['websocket'].send_json({
+                'type': 'system',
+                'message': f'用户 {target_ip} 不在线，消息已保存',
+                'ip': 'system',
+                'timestamp': datetime.now().timestamp() * 1000
+            })
+        except Exception as e:
+            print(f"Error sending offline message notification: {e}")
+
+# 用户认证相关端点
+@app.post("/login")
+async def login(username: str = Form(...), request: Request = None):
+    """用户登录"""
+    if not username or not username.strip():
+        raise HTTPException(status_code=400, detail="用户名不能为空")
+    
+    username = username.strip()
+    if len(username) > 20:
+        raise HTTPException(status_code=400, detail="用户名长度不能超过20个字符")
+    
+    # 检查用户名是否已被使用
+    if username in user_sessions:
+        raise HTTPException(status_code=400, detail="用户名已被使用，请选择其他用户名")
+    
+    # 创建新的session
+    session_id = str(uuid.uuid4())
+    client_ip = get_real_client_ip(request=request)
+    now = datetime.now()
+    
+    user = User(
+        username=username,
+        session_id=session_id,
+        ip=client_ip,
+        connected_at=now,
+        last_seen=now
+    )
+    
+    active_users[session_id] = user
+    user_sessions[username] = session_id
+    
+    return {
+        "session_id": session_id,
+        "username": username,
+        "message": "登录成功"
+    }
+
+@app.post("/logout")
+async def logout(session_id: str = Form(...)):
+    """用户登出"""
+    if session_id in active_users:
+        user = active_users[session_id]
+        username = user.username
+        
+        # 清理用户数据
+        del active_users[session_id]
+        if username in user_sessions:
+            del user_sessions[username]
+        
+        # 断开WebSocket连接
+        manager.disconnect(session_id)
+        
+        return {"message": "登出成功"}
+    
+    raise HTTPException(status_code=404, detail="会话不存在")
+
+@app.get("/check_session")
+async def check_session(session_id: str):
+    """检查会话是否有效"""
+    if session_id in active_users:
+        user = active_users[session_id]
+        return {
+            "valid": True,
+            "username": user.username,
+            "connected_at": user.connected_at.isoformat()
+        }
+    return {"valid": False}
+
+@app.get("/online_users")
+async def get_online_users():
+    """获取在线用户列表"""
+    users = []
+    for session_id, user in active_users.items():
+        users.append({
+            "username": user.username,
+            "connected_at": user.connected_at.isoformat(),
+            "last_seen": user.last_seen.isoformat()
+        })
+    return {"users": users}
+
+@app.get("/chat_history")
+async def get_chat_history(session_id: str, limit: int = 50):
+    """获取聊天历史"""
+    if session_id not in active_users:
+        raise HTTPException(status_code=401, detail="无效的会话")
+    
+    # 返回最近的聊天记录
+    recent_messages = chat_history[-limit:] if len(chat_history) > limit else chat_history
+    
+    return {
+        "messages": [
+            {
+                "id": msg.id,
+                "username": msg.username,
+                "message": msg.message,
+                "message_type": msg.message_type,
+                "timestamp": msg.timestamp.isoformat(),
+                "target_user": msg.target_user
+            }
+            for msg in recent_messages
+        ]
+    }
+
+@app.get("/private_chat_history")
+async def get_private_chat_history(session_id: str, target_username: str, limit: int = 50):
+    """获取私聊历史"""
+    if session_id not in active_users:
+        raise HTTPException(status_code=401, detail="无效的会话")
+    
+    current_user = active_users[session_id]
+    # 创建聊天对的唯一标识
+    chat_pair = tuple(sorted([current_user.username, target_username]))
+    chat_key = f"{chat_pair[0]}_{chat_pair[1]}"
+    
+    messages = private_chat_history.get(chat_key, [])
+    recent_messages = messages[-limit:] if len(messages) > limit else messages
+    
+    return {
+        "messages": [
+            {
+                "id": msg.id,
+                "username": msg.username,
+                "message": msg.message,
+                "message_type": msg.message_type,
+                "timestamp": msg.timestamp.isoformat(),
+                "target_user": msg.target_user
+            }
+            for msg in recent_messages
+        ]
+    }
+
+@app.get("/")
+async def read_root(request: Request, auth: bool = Depends(conditional_auth)):
+    """
+    主页面路由 - 对127.0.0.1访问需要身份验证
+    """
+    # 条件认证已经在依赖项中处理
+    with open("templates/index.html", "r", encoding="utf-8") as f:
+        html_content = f.read()
+    return HTMLResponse(content=html_content)
+
+@app.get("/login")
+async def login_page(request: Request, auth: bool = Depends(conditional_auth)):
+    """登录页面 - 对127.0.0.1访问需要身份验证"""
+    with open("templates/login.html", "r", encoding="utf-8") as f:
+        html_content = f.read()
+    return HTMLResponse(content=html_content)
+
+@app.post("/upload")
+async def upload_file(
+    file: UploadFile = File(...),
+    comment: str = Form(None),
+    session_id: str = Form(None),  # 改为可选参数
+    relative_path: str = Form(None),  # 文件夹相对路径
+    target_folder: str = Form(None),  # 目标文件夹
+    custom_filename: str = Form(None),  # 自定义文件名
+    request: Request = None
+):
+    try:
+        # 获取用户信息
+        if session_id and session_id in active_users:
+            # 使用登录用户信息
+            user = active_users[session_id]
+            uploader_username = user.username
+            uploader_ip = user.ip
+            print(f"使用登录用户信息: {uploader_username} ({uploader_ip})")
+        else:
+            # 使用简化模式，直接使用IP
+            uploader_ip = get_real_client_ip(request=request)
+            # 优化用户名显示：如果有映射名称就直接使用，否则显示"用户_IP"
+            mapped_name = ip_vs_name.get(str(uploader_ip))
+            if mapped_name:
+                uploader_username = mapped_name + "@" + uploader_ip
+                print(f"uploader_username: {uploader_username}({uploader_ip})")
+            else:
+                uploader_username = f"用户ip_{uploader_ip}"
+                print(f"使用IP模式: {uploader_username}")
+    except Exception as e:
+        print(f"获取用户信息时出错: {str(e)}")
+        import traceback
+        traceback.print_exc()
+        raise HTTPException(status_code=500, detail=f"获取用户信息失败: {str(e)}")
+    
+    try:
+        # 处理文件夹结构上传
+        if relative_path:
+            print(f"处理文件夹上传: {relative_path}, target_folder: {target_folder}")
+            # 文件夹上传，保持目录结构
+            file_dir = os.path.dirname(relative_path)
+            print(f"file_dir: {file_dir}")
+            
+            # 文件夹上传时，relative_path 已经包含完整的文件夹结构
+            # 检查是否是同名文件夹重复的情况
+            if target_folder and relative_path.startswith(target_folder + "/"):
+                # 用户在文件夹A内上传了同名文件夹A，这通常意味着要替换当前文件夹
+                # 将文件上传到根目录，避免路径重复
+                print(f"检测到同名文件夹上传，将上传到根目录")
+                full_dir = os.path.join(UPLOAD_DIR, file_dir) if file_dir else UPLOAD_DIR
+                relative_file_path = relative_path
+            elif target_folder:
+                # 正常的在文件夹内上传其他文件夹的情况
+                full_dir = os.path.join(UPLOAD_DIR, target_folder, file_dir) if file_dir else os.path.join(UPLOAD_DIR, target_folder)
+                relative_file_path = os.path.join(target_folder, relative_path)
+            else:
+                # 在根目录上传文件夹
+                full_dir = os.path.join(UPLOAD_DIR, file_dir) if file_dir else UPLOAD_DIR
+                relative_file_path = relative_path
+            
+            print(f"最终路径 - full_dir: {full_dir}, relative_file_path: {relative_file_path}")
+            
+            # 确保目录存在
+            if not os.path.exists(full_dir):
+                os.makedirs(full_dir, exist_ok=True)
+                print(f"创建目录: {full_dir}")
+            
+            # 使用原始文件名，不添加时间戳
+            # 对于文件夹上传，file.filename 可能包含完整路径，我们只需要文件名部分
+            if custom_filename:
+                filename = custom_filename
+            else:
+                filename = os.path.basename(relative_path)  # 从 relative_path 中提取文件名
+            print(f"file.filename: {file.filename}")
+            print(f"使用的filename: {filename}")
+            file_path = os.path.join(full_dir, filename)
+            print(f"计算出的 file_path: {file_path}")
+        else:
+            print(f"处理普通文件上传: {file.filename}")
+            # 普通文件上传
+            if custom_filename:
+                # 使用自定义文件名
+                filename = custom_filename
+            else:
+                # 使用时间戳前缀的原始文件名
+                timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+                filename = f"{timestamp}_{file.filename}"
+            
+            if target_folder:
+                full_dir = os.path.join(UPLOAD_DIR, target_folder)
+                if not os.path.exists(full_dir):
+                    os.makedirs(full_dir, exist_ok=True)
+                    print(f"创建目标目录: {full_dir}")
+                file_path = os.path.join(full_dir, filename)
+                relative_file_path = os.path.join(target_folder, filename)
+            else:
+                file_path = os.path.join(UPLOAD_DIR, filename)
+                relative_file_path = filename
+        
+        print(f"文件将保存到: {file_path}")
+    except Exception as e:
+        print(f"处理文件路径时出错: {str(e)}")
+        import traceback
+        traceback.print_exc()
+        raise HTTPException(status_code=500, detail=f"处理文件路径失败: {str(e)}")
+    
+    # 进一步优化大文件传输 - 局域网高速传输配置
+    # 将chunk_size增加到16MB，最大化局域网传输效率
+    chunk_size = 16 * 1024 * 1024  # 16MB chunks for maximum LAN performance
+    total_size = 0
+    
+    try:
+        print(f"开始写入文件到: {file_path}")
+        # 验证文件路径的父目录是否存在
+        file_parent_dir = os.path.dirname(file_path)
+        if not os.path.exists(file_parent_dir):
+            print(f"父目录不存在，创建: {file_parent_dir}")
+            os.makedirs(file_parent_dir, exist_ok=True)
+        
+        # 高性能异步文件写入，专为局域网大文件传输优化
+        async with aiofiles.open(file_path, "wb", buffering=chunk_size) as f:
+            # 移除所有延迟和控制权释放，让传输尽可能快
+            while chunk := await file.read(chunk_size):
+                await f.write(chunk)
+                total_size += len(chunk)
+                # 完全移除延迟 - 局域网环境下无需限速
+        print(f"文件写入成功: {file_path}, 大小: {total_size}")
+    except Exception as e:
+        print(f"文件写入失败: {str(e)}")
+        import traceback
+        traceback.print_exc()
+        # 清理失败的文件
+        if os.path.exists(file_path):
+            os.remove(file_path)
+        raise HTTPException(status_code=500, detail=f"文件写入失败: {str(e)}")
+    
+    # 异步写入元数据
+    metadata = {
+        "filename": filename,
+        "original_name": file.filename,
+        "uploader_username": uploader_username,
+        "uploader_ip": uploader_ip,
+        "comment": comment,
+        "upload_time": datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
+        "file_size": total_size
+    }
+    
+    metadata_path = file_path + ".meta"
+    async with aiofiles.open(metadata_path, "w", encoding="utf-8") as f:
+        await f.write(json.dumps(metadata, ensure_ascii=False))
+    
+    return {
+        "filename": filename,
+        "path": f"/uploads/{relative_file_path}",
+        "relative_path": relative_file_path,
+        "uploader_username": uploader_username,
+        "comment": comment,
+        "size": total_size,
+        "is_folder_upload": bool(relative_path)
+    }
+
+@app.get("/files")
+async def list_files(
+    folder: str = "",
+    sort_by: str = "name",  # name, time, uploader_ip, size
+    sort_order: str = "asc",  # asc, desc
+    search: str = ""
+):
+    """获取文件列表，支持文件夹浏览、排序和搜索"""
+    try:
+        # 确定当前目录
+        current_dir = os.path.join(UPLOAD_DIR, folder) if folder else UPLOAD_DIR
+        if not os.path.exists(current_dir):
+            raise HTTPException(status_code=404, detail="文件夹不存在")
+        
+        files = []
+        
+        # 遍历当前目录
+        for item_name in os.listdir(current_dir):
+            # 跳过元数据文件
+            if item_name.endswith('.meta') or item_name == '.folder_meta':
+                continue
+                
+            item_path = os.path.join(current_dir, item_name)
+            relative_path = os.path.join(folder, item_name) if folder else item_name
+            
+            # 获取文件信息
+            file_info = get_file_info(item_path, relative_path)
+            
+            # 搜索过滤
+            if search:
+                search_lower = search.lower()
+                # 在文件名、上传者和备注中搜索
+                comment = file_info.get("comment") or ""
+                if (search_lower not in file_info["name"].lower() and 
+                    search_lower not in file_info["uploader_username"].lower() and
+                    search_lower not in comment.lower()):
+                    continue
+            
+            files.append(file_info)
+        
+        # 排序
+        reverse = (sort_order == "desc")
+        if sort_by == "name":
+            # 文件夹排在前面，然后按名称排序
+            files.sort(key=lambda x: (x["type"] != "folder", x["name"]), reverse=reverse)
+        elif sort_by == "time":
+            files.sort(key=lambda x: x["created"], reverse=reverse)
+        elif sort_by == "uploader_ip":
+            files.sort(key=lambda x: x["uploader_ip"], reverse=reverse)
+        elif sort_by == "size":
+            files.sort(key=lambda x: x["size"], reverse=reverse)
+        
+        return {
+            "files": files,
+            "current_folder": folder,
+            "parent_folder": os.path.dirname(folder) if folder else None
+        }
+        
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"获取文件列表失败: {str(e)}")
+
+@app.post("/folders")
+async def create_folder(
+    folder_name: str = Form(...),
+    parent_folder: str = Form(""),
+    request: Request = None
+):
+    """创建新文件夹"""
+    try:
+        # 验证文件夹名称 - 宽松版本
+        if not folder_name or not folder_name.strip():
+            raise HTTPException(status_code=400, detail="文件夹名称不能为空")
+        
+        folder_name = folder_name.strip()
+        # 自动修复文件夹名称，只禁止路径分隔符
+        folder_name = folder_name.replace('/', '-').replace('\\', '-').replace('|', '_')
+        
+        # 只检查真正有害的字符
+        if any(char in folder_name for char in ['/']):
+            raise HTTPException(status_code=400, detail="文件夹名称包含不安全字符")
+        
+        # 构建完整路径
+        if parent_folder:
+            folder_path = os.path.join(parent_folder, folder_name)
+        else:
+            folder_path = folder_name
+            
+        full_path = os.path.join(UPLOAD_DIR, folder_path)
+        
+        # 检查是否已存在
+        if os.path.exists(full_path):
+            raise HTTPException(status_code=400, detail="文件夹已存在")
+        
+        # 创建文件夹
+        os.makedirs(full_path)
+        
+        # 获取创建者信息
+        client_ip = get_real_client_ip(request=request)
+        mapped_name = ip_vs_name.get(str(client_ip))
+        creator = mapped_name + "@" + client_ip if mapped_name else f"用户ip_{client_ip}"
+        
+        # 创建文件夹元数据
+        metadata = {
+            "folder_name": folder_name,
+            "creator": creator,
+            "creator_ip": client_ip,
+            "created_time": datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
+            "type": "folder"
+        }
+        
+        metadata_path = os.path.join(full_path, ".folder_meta")
+        with open(metadata_path, "w", encoding="utf-8") as f:
+            json.dump(metadata, f, ensure_ascii=False)
+        
+        return {
+            "message": "文件夹创建成功",
+            "folder_name": folder_name,
+            "folder_path": folder_path,
+            "creator": creator
+        }
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"创建文件夹失败: {str(e)}")
+
+@app.post("/move_file")
+async def move_file(
+    file_name: str = Form(...),
+    source_folder: str = Form(""),
+    target_folder: str = Form(""),
+    request: Request = None
+):
+    """移动文件到指定文件夹"""
+    try:
+        # 构建源文件路径
+        if source_folder:
+            source_path = os.path.join(UPLOAD_DIR, source_folder, file_name)
+            source_meta_path = os.path.join(UPLOAD_DIR, source_folder, f"{file_name}.meta")
+        else:
+            source_path = os.path.join(UPLOAD_DIR, file_name)
+            source_meta_path = os.path.join(UPLOAD_DIR, f"{file_name}.meta")
+        
+        if not os.path.exists(source_path):
+            raise HTTPException(status_code=404, detail="源文件不存在")
+        
+        # 构建目标文件路径
+        if target_folder:
+            # 确保目标文件夹存在
+            ensure_folder_exists(target_folder)
+            target_path = os.path.join(UPLOAD_DIR, target_folder, file_name)
+            target_meta_path = os.path.join(UPLOAD_DIR, target_folder, f"{file_name}.meta")
+        else:
+            target_path = os.path.join(UPLOAD_DIR, file_name)
+            target_meta_path = os.path.join(UPLOAD_DIR, f"{file_name}.meta")
+        
+        # 检查目标位置是否已有同名文件
+        if os.path.exists(target_path):
+            raise HTTPException(status_code=400, detail="目标位置已存在同名文件")
+        
+        # 移动文件和元数据
+        os.rename(source_path, target_path)
+        if os.path.exists(source_meta_path):
+            os.rename(source_meta_path, target_meta_path)
+        
+        return {
+            "message": "文件移动成功",
+            "file_name": file_name,
+            "source_folder": source_folder,
+            "target_folder": target_folder
+        }
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"移动文件失败: {str(e)}")
+
+@app.delete("/folders/{folder_path:path}")
+async def delete_folder(folder_path: str, request: Request = None, admin_session_id: str = None):
+    """删除文件夹（包括其中的所有文件和子文件夹）- 仅管理员可操作"""
+    try:
+        # 验证管理员权限 - 支持IP验证或admin session验证
+        client_ip = get_real_client_ip(request=request)
+        is_admin_by_ip = (client_ip == admin_ip)
+        
+        # 检查admin session
+        is_admin_by_session = False
+        if admin_session_id and admin_session_id in admin_sessions:
+            is_admin_by_session = True
+        
+        # 如果不是通过IP验证的管理员，尝试从请求头获取admin session
+        if not is_admin_by_ip and not is_admin_by_session:
+            auth_header = request.headers.get('Authorization')
+            if auth_header and auth_header.startswith('AdminSession '):
+                session_id = auth_header.replace('AdminSession ', '')
+                if session_id in admin_sessions:
+                    is_admin_by_session = True
+        
+        if not is_admin_by_ip and not is_admin_by_session:
+            raise HTTPException(status_code=403, detail="权限不足，只有管理员才能删除文件夹")
+        
+        full_path = os.path.join(UPLOAD_DIR, folder_path)
+        
+        if not os.path.exists(full_path):
+            raise HTTPException(status_code=404, detail="文件夹不存在")
+        
+        if not os.path.isdir(full_path):
+            raise HTTPException(status_code=400, detail="指定路径不是文件夹")
+        
+        # 删除文件夹及其所有内容
+        import shutil
+        shutil.rmtree(full_path)
+        
+        return {"message": "文件夹及其所有内容删除成功", "folder_path": folder_path}
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"删除文件夹失败: {str(e)}")
+
+@app.post("/rename_file")
+async def rename_file(
+    old_name: str = Form(...),
+    new_name: str = Form(...),
+    folder_path: str = Form(""),
+    request: Request = None
+):
+    """重命名文件"""
+    try:
+        # 验证新文件名 - 宽松版本
+        if not new_name or not new_name.strip():
+            raise HTTPException(status_code=400, detail="新文件名不能为空")
+        
+        new_name = new_name.strip()
+        # 自动修复文件名，替换有害字符
+        new_name = new_name.replace('/', '-').replace('\\', '-').replace('|', '_')
+        
+        # 只检查真正有害的字符
+        if '/' in new_name or '\\' in new_name:
+            raise HTTPException(status_code=400, detail="文件名包含不安全字符")
+        
+        # 构建文件路径
+        if folder_path:
+            old_file_path = os.path.join(UPLOAD_DIR, folder_path, old_name)
+            new_file_path = os.path.join(UPLOAD_DIR, folder_path, new_name)
+            old_meta_path = os.path.join(UPLOAD_DIR, folder_path, f"{old_name}.meta")
+            new_meta_path = os.path.join(UPLOAD_DIR, folder_path, f"{new_name}.meta")
+        else:
+            old_file_path = os.path.join(UPLOAD_DIR, old_name)
+            new_file_path = os.path.join(UPLOAD_DIR, new_name)
+            old_meta_path = os.path.join(UPLOAD_DIR, f"{old_name}.meta")
+            new_meta_path = os.path.join(UPLOAD_DIR, f"{new_name}.meta")
+        
+        # 检查原文件是否存在
+        if not os.path.exists(old_file_path):
+            raise HTTPException(status_code=404, detail="原文件不存在")
+        
+        # 检查新文件名是否已存在
+        if os.path.exists(new_file_path):
+            raise HTTPException(status_code=400, detail="新文件名已存在")
+        
+        # 重命名文件
+        os.rename(old_file_path, new_file_path)
+        
+        # 重命名元数据文件（如果存在）
+        if os.path.exists(old_meta_path):
+            os.rename(old_meta_path, new_meta_path)
+            
+            # 更新元数据中的原始文件名
+            try:
+                with open(new_meta_path, "r", encoding="utf-8") as f:
+                    metadata = json.load(f)
+                metadata["original_name"] = new_name
+                with open(new_meta_path, "w", encoding="utf-8") as f:
+                    json.dump(metadata, f, ensure_ascii=False)
+            except:
+                pass  # 如果更新元数据失败，文件重命名仍然成功
+        
+        return {
+            "message": "文件重命名成功",
+            "old_name": old_name,
+            "new_name": new_name,
+            "folder_path": folder_path
+        }
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"重命名文件失败: {str(e)}")
+
+@app.post("/rename_folder")
+async def rename_folder(
+    old_name: str = Form(...),
+    new_name: str = Form(...),
+    parent_folder: str = Form(""),
+    request: Request = None
+):
+    """重命名文件夹"""
+    try:
+        # 验证新文件夹名
+        if not new_name or not new_name.strip():
+            raise HTTPException(status_code=400, detail="新文件夹名不能为空")
+        
+        new_name = new_name.strip()
+        # 自动修复文件夹名称，替换有害字符
+        new_name = new_name.replace('/', '-').replace('\\', '-').replace('|', '_')
+        
+        # 只检查真正有害的字符
+        if '/' in new_name or '\\' in new_name:
+            raise HTTPException(status_code=400, detail="文件夹名包含不安全字符")
+        
+        # 构建文件夹路径
+        if parent_folder:
+            old_folder_path = os.path.join(UPLOAD_DIR, parent_folder, old_name)
+            new_folder_path = os.path.join(UPLOAD_DIR, parent_folder, new_name)
+        else:
+            old_folder_path = os.path.join(UPLOAD_DIR, old_name)
+            new_folder_path = os.path.join(UPLOAD_DIR, new_name)
+        
+        # 检查原文件夹是否存在
+        if not os.path.exists(old_folder_path):
+            raise HTTPException(status_code=404, detail="原文件夹不存在")
+        
+        if not os.path.isdir(old_folder_path):
+            raise HTTPException(status_code=400, detail="指定路径不是文件夹")
+        
+        # 检查新文件夹名是否已存在
+        if os.path.exists(new_folder_path):
+            raise HTTPException(status_code=400, detail="新文件夹名已存在")
+        
+        # 重命名文件夹
+        os.rename(old_folder_path, new_folder_path)
+        
+        # 更新文件夹元数据（如果存在）
+        meta_file = os.path.join(new_folder_path, ".folder_meta")
+        if os.path.exists(meta_file):
+            try:
+                with open(meta_file, "r", encoding="utf-8") as f:
+                    metadata = json.load(f)
+                metadata["folder_name"] = new_name
+                with open(meta_file, "w", encoding="utf-8") as f:
+                    json.dump(metadata, f, ensure_ascii=False)
+            except:
+                pass  # 如果更新元数据失败，文件夹重命名仍然成功
+        
+        return {
+            "message": "文件夹重命名成功",
+            "old_name": old_name,
+            "new_name": new_name,
+            "parent_folder": parent_folder
+        }
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"重命名文件夹失败: {str(e)}")
+
+# 修改 WebSocket 路由
+@app.websocket("/ws/{session_id}")
+async def websocket_endpoint(websocket: WebSocket, session_id: str):
+    # 验证session
+    if session_id not in active_users:
+        await websocket.close(code=1008, reason="Invalid session")
+        return
+    
+    user = active_users[session_id]
+    await manager.connect(websocket, session_id)
+    
+    # 更新用户最后在线时间
+    user.last_seen = datetime.now()
+    
+    print(f"User {user.username} connected via WebSocket")
+    
+    try:
+        while True:
+            data = await websocket.receive_json()
+            print(f"Message from {user.username}: {data}")
+            
+            # 创建消息对象
+            message_id = str(uuid.uuid4())
+            now = datetime.now()
+            
+            # 根据消息类型处理
+            if data.get("targetUsername"):
+                # 私聊消息
+                target_username = data["targetUsername"]
+                
+                # 检查目标用户是否在线
+                target_session = user_sessions.get(target_username)
+                if not target_session:
+                    await websocket.send_json({
+                        "type": "error",
+                        "message": f"用户 {target_username} 不在线"
+                    })
+                    continue
+                
+                # 创建私聊消息
+                chat_message = ChatMessage(
+                    id=message_id,
+                    username=user.username,
+                    message=data["message"],
+                    message_type=data.get("type", "text"),
+                    timestamp=now,
+                    target_user=target_username
+                )
+                
+                # 存储到私聊历史
+                chat_pair = tuple(sorted([user.username, target_username]))
+                chat_key = f"{chat_pair[0]}_{chat_pair[1]}"
+                private_chat_history[chat_key].append(chat_message)
+                
+                # 发送消息
+                message_data = {
+                    "id": message_id,
+                    "username": user.username,
+                    "message": data["message"],
+                    "type": data.get("type", "text"),
+                    "timestamp": now.isoformat(),
+                    "targetUsername": target_username,
+                    "isPrivate": True
+                }
+                
+                await manager.send_private_message(message_data, target_session, session_id)
+            else:
+                # 群聊消息
+                chat_message = ChatMessage(
+                    id=message_id,
+                    username=user.username,
+                    message=data["message"],
+                    message_type=data.get("type", "text"),
+                    timestamp=now
+                )
+                
+                # 存储到群聊历史
+                chat_history.append(chat_message)
+                
+                # 广播消息
+                message_data = {
+                    "id": message_id,
+                    "username": user.username,
+                    "message": data["message"],
+                    "type": data.get("type", "text"),
+                    "timestamp": now.isoformat(),
+                    "isPrivate": False
+                }
+                
+                await manager.broadcast(message_data, exclude_session=session_id)
+            
+            # 更新用户最后在线时间
+            user.last_seen = now
+            
+    except Exception as e:
+        print(f"WebSocket error for {user.username}: {e}")
+    finally:
+        manager.disconnect(session_id)
+        print(f"User {user.username} disconnected")
+
+@app.get("/chat")
+async def chat_page(request: Request, auth: bool = Depends(conditional_auth)):
+    """聊天页面 - 对127.0.0.1访问需要身份验证"""
+    with open("templates/chat.html", "r", encoding="utf-8") as f:
+        html_content = f.read()
+    return HTMLResponse(content=html_content)
+
+@app.get("/test")
+async def test_chat_page(request: Request, auth: bool = Depends(conditional_auth)):
+    """测试聊天页面 - 对127.0.0.1访问需要身份验证"""
+    with open("test_chat.html", "r", encoding="utf-8") as f:
+        html_content = f.read()
+    return HTMLResponse(content=html_content)
+
+@app.get("/download/{file_path:path}")
+async def download_file(file_path: str):
+    """强制下载文件，而不是在浏览器中显示，支持文件夹路径"""
+    try:
+        full_file_path = os.path.join(UPLOAD_DIR, file_path)
+        
+        if not os.path.exists(full_file_path):
+            raise HTTPException(status_code=404, detail="文件不存在")
+        
+        if os.path.isdir(full_file_path):
+            raise HTTPException(status_code=400, detail="无法下载文件夹")
+        
+        # 读取文件元数据获取原始文件名
+        metadata_path = full_file_path + ".meta"
+        original_name = os.path.basename(file_path)  # 默认使用当前文件名
+        
+        if os.path.exists(metadata_path):
+            try:
+                with open(metadata_path, "r", encoding="utf-8") as f:
+                    metadata = json.load(f)
+                    original_name = metadata.get("original_name", original_name)
+            except:
+                pass  # 如果读取元数据失败，使用默认文件名
+        
+        return FileResponse(
+            path=full_file_path,
+            filename=original_name,
+            media_type='application/octet-stream'  # 强制下载
+        )
+        
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"下载失败: {str(e)}")
+
+@app.delete("/files/{file_path:path}")
+async def delete_file(file_path: str, request: Request = None, admin_session_id: str = None):
+    """删除文件，支持文件夹路径 - 仅管理员可操作"""
+    try:
+        # 验证管理员权限 - 支持IP验证或admin session验证
+        client_ip = get_real_client_ip(request=request)
+        is_admin_by_ip = (client_ip == admin_ip)
+        
+        # 检查admin session
+        is_admin_by_session = False
+        if admin_session_id and admin_session_id in admin_sessions:
+            is_admin_by_session = True
+        
+        # 如果不是通过IP验证的管理员，尝试从请求头获取admin session
+        if not is_admin_by_ip and not is_admin_by_session:
+            auth_header = request.headers.get('Authorization')
+            if auth_header and auth_header.startswith('AdminSession '):
+                session_id = auth_header.replace('AdminSession ', '')
+                if session_id in admin_sessions:
+                    is_admin_by_session = True
+        
+        if not is_admin_by_ip and not is_admin_by_session:
+            raise HTTPException(status_code=403, detail="权限不足，只有管理员才能删除文件")
+        
+        full_file_path = os.path.join(UPLOAD_DIR, file_path)
+        metadata_path = full_file_path + ".meta"
+        
+        if not os.path.exists(full_file_path):
+            raise HTTPException(status_code=404, detail="文件不存在")
+        
+        if os.path.isdir(full_file_path):
+            raise HTTPException(status_code=400, detail="请使用文件夹删除接口")
+        
+        if os.path.exists(full_file_path):
+            os.remove(full_file_path)
+        if os.path.exists(metadata_path):
+            os.remove(metadata_path)
+        return {"message": "文件删除成功"}
+    except HTTPException:
+        raise
+    except Exception as e:
+        return {"message": f"删除失败: {str(e)}"}
+
+# 添加健康检查端点
+@app.get("/health")
+async def health_check():
+    return {"status": "healthy", "timestamp": datetime.now().isoformat()}
+
+# 添加获取IP的端点
+@app.get("/get_ip")
+async def get_client_ip(request: Request):
+    """获取客户端IP地址"""
+    client_ip = get_real_client_ip(request=request)
+    return {"ip": client_ip}
+
+# 添加获取管理员信息的端点
+@app.get("/admin/info")
+async def get_admin_info(request: Request):
+    """获取管理员信息"""
+    client_ip = get_real_client_ip(request=request)
+    return {
+        "admin_ip": admin_ip,
+        "is_admin": client_ip == admin_ip,
+        "client_ip": client_ip
+    }
+
+# 验证管理员权限的端点
+@app.get("/admin/verify")
+async def verify_admin(request: Request):
+    """验证当前用户是否为管理员"""
+    client_ip = get_real_client_ip(request=request)
+    if client_ip != admin_ip:
+        raise HTTPException(status_code=403, detail="权限不足，只有管理员才能执行此操作")
+    return {
+        "verified": True,
+        "admin_ip": admin_ip,
+        "message": "管理员权限验证成功"
+    }
+
+# 添加管理员清空历史记录的API端点
+@app.post("/admin/clear_history")
+async def admin_clear_history(request: Request):
+    """管理员清空所有聊天历史记录"""
+    client_ip = get_real_client_ip(request=request)
+    
+    # 验证管理员权限
+    if client_ip != admin_ip:
+        raise HTTPException(status_code=403, detail="权限不足，只有管理员才能执行此操作")
+    
+    try:
+        # 清空服务器端的所有历史记录
+        global global_chat_history, private_chat_storage
+        global_chat_history = []
+        private_chat_storage = defaultdict(list)
+        
+        # 删除历史文件
+        files_deleted = []
+        if os.path.exists(GROUP_HISTORY_FILE):
+            os.remove(GROUP_HISTORY_FILE)
+            files_deleted.append("群聊历史文件")
+            
+        if os.path.exists(PRIVATE_HISTORY_FILE):
+            os.remove(PRIVATE_HISTORY_FILE)
+            files_deleted.append("私聊历史文件")
+        
+        # 创建新的空历史文件
+        await save_group_history()
+        await save_private_history()
+        
+        print(f"管理员 {client_ip} 清空了所有聊天历史记录")
+        
+        # 广播管理员操作消息给所有连接的用户
+        admin_message = {
+            'type': 'admin_action',
+            'action': 'clear_all_history',
+            'admin_ip': client_ip,
+            'message': f'管理员 {client_ip} 已清空所有聊天记录',
+            'timestamp': datetime.now().timestamp() * 1000
+        }
+        
+        # 异步广播消息给所有WebSocket连接
+        asyncio.create_task(broadcast_simple_message(admin_message))
+        
+        return {
+            "success": True,
+            "message": "所有聊天历史记录已清空",
+            "admin_ip": client_ip,
+            "files_deleted": files_deleted,
+            "timestamp": datetime.now().isoformat()
+        }
+        
+    except Exception as e:
+        print(f"清空历史记录失败: {e}")
+        return {
+            "success": False,
+            "message": f"清空操作失败: {str(e)}",
+            "admin_ip": client_ip
+        }
+
+# 修改 WebSocket 路由，支持无session的简单聊天
+@app.websocket("/ws")
+async def websocket_endpoint_simple(websocket: WebSocket):
+    """简化的WebSocket端点，不需要session验证"""
+    await websocket.accept()
+    
+    # 获取客户端IP
+    client_ip = get_real_client_ip(websocket=websocket)
+    connection_id = str(uuid.uuid4())
+    
+    # 添加到连接管理器
+    simple_connections[connection_id] = {
+        'websocket': websocket,
+        'ip': client_ip,
+        'connected_at': datetime.now()
+    }
+    
+    print(f"Simple WebSocket connection from IP: {client_ip}")
+    
+    # 发送欢迎消息和聊天历史
+    try:
+        # 获取用户显示名称
+        user_display_name = ip_vs_name.get(client_ip, client_ip)
+        
+        # 发送欢迎消息给新用户
+        welcome_message = {
+            'type': 'system',
+            'message': f'欢迎 {user_display_name + "(" + client_ip + ")" if user_display_name != client_ip else client_ip} 加入聊天室！',
+            'ip': 'system',
+            'timestamp': datetime.now().timestamp() * 1000
+        }
+        await websocket.send_json(welcome_message)
+        
+        # 向其他用户广播新用户加入消息
+        join_message = {
+            'type': 'system',
+            'message': f'用户 {user_display_name + "(" + client_ip + ")" if user_display_name != client_ip else client_ip} 加入了聊天室',
+            'ip': 'system',
+            'timestamp': datetime.now().timestamp() * 1000
+        }
+        await broadcast_simple_message(join_message, exclude_id=connection_id)
+        
+        # 发送聊天历史给新用户（包括群聊和相关私聊）
+        await send_chat_history(websocket, client_ip)
+        
+    except Exception as e:
+        print(f"Error sending welcome message or history: {e}")
+    
+    try:
+        while True:
+            data = await websocket.receive_json()
+            print(f"Message from {client_ip}: {data}")
+            
+            # 处理管理员操作
+            if data.get('type') == 'admin_action' and data.get('action') == 'clear_all_history':
+                print(f"收到管理员清空历史记录操作，来自IP: {client_ip}")
+                
+                # 验证管理员权限
+                if client_ip != admin_ip:
+                    await websocket.send_json({
+                        'type': 'system',
+                        'message': '权限不足，只有管理员才能执行此操作',
+                        'ip': 'system',
+                        'timestamp': datetime.now().timestamp() * 1000
+                    })
+                    continue
+                
+                # 清空服务器端的所有历史记录
+                global global_chat_history, private_chat_storage
+                global_chat_history = []
+                private_chat_storage = defaultdict(list)
+                
+                # 删除历史文件
+                try:
+                    if os.path.exists(GROUP_HISTORY_FILE):
+                        os.remove(GROUP_HISTORY_FILE)
+                        print("群聊历史文件已删除")
+                    if os.path.exists(PRIVATE_HISTORY_FILE):
+                        os.remove(PRIVATE_HISTORY_FILE)
+                        print("私聊历史文件已删除")
+                except Exception as e:
+                    print(f"删除历史文件失败: {e}")
+                
+                # 广播管理员操作消息给所有用户
+                admin_message = {
+                    'type': 'admin_action',
+                    'action': 'clear_all_history',
+                    'admin_ip': client_ip,
+                    'message': f'管理员 {client_ip} 已清空所有聊天记录',
+                    'timestamp': datetime.now().timestamp() * 1000
+                }
+                
+                # 发送给所有连接的用户（包括发送者）
+                await broadcast_simple_message(admin_message)
+                continue
+            
+            # 创建消息数据，确保包含所有必要字段
+            message_data = {
+                'message': data.get('message', ''),
+                'type': data.get('type', 'text'),
+                'ip': client_ip,
+                'timestamp': data.get('timestamp', datetime.now().timestamp() * 1000)
+            }
+            
+            # 如果是文件消息，保留文件相关信息
+            if data.get('type') == 'file':
+                message_data['type'] = 'file'
+            
+            # 检查是否是私聊消息
+            if data.get('targetIp'):
+                message_data['targetIp'] = data['targetIp']
+                # 私聊消息 - 发送给目标IP和发送者，并保存到历史
+                await broadcast_private_message(message_data, data['targetIp'], connection_id)
+            else:
+                # 群聊消息 - 广播给所有连接并保存到历史记录
+                await broadcast_simple_message(message_data, exclude_id=connection_id)
+                
+                # 保存到全局历史记录（只有群聊消息）
+                add_to_global_history(message_data)
+            
+    except Exception as e:
+        print(f"WebSocket error for {client_ip}: {e}")
+    finally:
+        # 发送离开消息给其他用户
+        try:
+            leave_message = {
+                'type': 'system',
+                'message': f'用户 {user_display_name + "(" + client_ip + ")" if user_display_name != client_ip else client_ip} 离开了聊天室',
+                'ip': 'system',
+                'timestamp': datetime.now().timestamp() * 1000
+            }
+            await broadcast_simple_message(leave_message)
+        except Exception as e:
+            print(f"Error sending leave message: {e}")
+        
+        # 清理连接
+        if connection_id in simple_connections:
+            del simple_connections[connection_id]
+        print(f"Client {client_ip} disconnected")
+
+# 添加应用启动事件
+@app.on_event("startup")
+async def startup_event():
+    """应用启动时的初始化操作"""
+    print("正在启动聊天服务器...")
+    await load_chat_history()
+    print("聊天历史加载完成")
+
+# 添加应用关闭事件
+@app.on_event("shutdown")
+async def shutdown_event():
+    """应用关闭时保存数据"""
+    print("正在保存聊天历史...")
+    await save_group_history()
+    await save_private_history()
+    print("数据保存完成")
+
+# 添加获取IP名称映射的端点
+@app.get("/get_ip_names")
+async def get_ip_names():
+    """获取IP名称和头像映射"""
+    try:
+        return {
+            "ip_vs_name": ip_vs_name,
+            "ip_vs_avatar": ip_vs_avatar,
+            "status": "success"
+        }
+    except Exception as e:
+        return {
+            "ip_vs_name": {},
+            "ip_vs_avatar": {},
+            "status": "error",
+            "message": str(e)
+        }
+
+# Admin登录状态管理
+admin_sessions: Dict[str, dict] = {}
+
+@app.post("/admin/login")
+async def admin_login(
+    username: str = Form(...),
+    password: str = Form(...),
+    request: Request = None
+):
+    """Admin账号登录"""
+    try:
+        # 验证admin凭据（使用与localhost认证相同的账号密码）
+        correct_username = secrets.compare_digest(username, LOCALHOST_USERNAME)
+        correct_password = secrets.compare_digest(password, LOCALHOST_PASSWORD)
+        
+        if not (correct_username and correct_password):
+            raise HTTPException(
+                status_code=401,
+                detail="用户名或密码错误"
+            )
+        
+        # 获取客户端IP
+        client_ip = get_real_client_ip(request=request)
+        
+        # 生成admin session
+        admin_session_id = str(uuid.uuid4())
+        admin_sessions[admin_session_id] = {
+            'ip': client_ip,
+            'username': username,
+            'login_time': datetime.now(),
+            'last_activity': datetime.now()
+        }
+        
+        print(f"Admin用户 {username} 从IP {client_ip} 登录成功")
+        
+        return {
+            "success": True,
+            "admin_session_id": admin_session_id,
+            "message": "Admin登录成功",
+            "admin_info": {
+                "username": username,
+                "ip": client_ip,
+                "login_time": datetime.now().isoformat()
+            }
+        }
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        print(f"Admin登录失败: {e}")
+        raise HTTPException(status_code=500, detail=f"登录失败: {str(e)}")
+
+@app.post("/admin/logout")
+async def admin_logout(admin_session_id: str = Form(...)):
+    """Admin账号登出"""
+    try:
+        if admin_session_id in admin_sessions:
+            admin_info = admin_sessions[admin_session_id]
+            del admin_sessions[admin_session_id]
+            print(f"Admin用户 {admin_info['username']} 从IP {admin_info['ip']} 登出")
+            
+            return {
+                "success": True,
+                "message": "Admin登出成功"
+            }
+        else:
+            raise HTTPException(status_code=404, detail="Admin会话不存在")
+            
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"登出失败: {str(e)}")
+
+@app.get("/admin/check_session")
+async def check_admin_session(admin_session_id: str, request: Request = None):
+    """检查admin会话是否有效"""
+    try:
+        if admin_session_id not in admin_sessions:
+            return {"valid": False, "message": "会话不存在"}
+        
+        admin_info = admin_sessions[admin_session_id]
+        client_ip = get_real_client_ip(request=request)
+        
+        # 验证IP是否匹配（可选，增强安全性）
+        if admin_info['ip'] != client_ip:
+            print(f"Admin会话IP不匹配: 原IP {admin_info['ip']}, 当前IP {client_ip}")
+            # 可以选择是否严格检查IP，这里暂时允许IP变化
+        
+        # 更新最后活动时间
+        admin_sessions[admin_session_id]['last_activity'] = datetime.now()
+        
+        return {
+            "valid": True,
+            "admin_info": {
+                "username": admin_info['username'],
+                "ip": admin_info['ip'],
+                "login_time": admin_info['login_time'].isoformat(),
+                "last_activity": admin_info['last_activity'].isoformat()
+            }
+        }
+        
+    except Exception as e:
+        print(f"检查admin会话失败: {e}")
+        return {"valid": False, "message": "检查会话失败"}
+
+if __name__ == "__main__":
+    uvicorn.run(
+        "main:app", 
+        host="0.0.0.0",
+        port=8888, 
+        reload=True,
+        access_log=True,
+        # 优化大文件上传配置
+        limit_max_requests=1000,        # 增加最大请求数
+        limit_concurrency=100,          # 增加并发限制
+        timeout_keep_alive=120,         # 保持连接时间
+        timeout_graceful_shutdown=30,   # 优雅关闭超时
+        # 移除文件大小限制，让系统处理大文件
+        app_dir=".",
+        workers=1                       # 单进程处理，避免文件锁冲突
+    )
\ No newline at end of file
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..3971568
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,57 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    upstream fastapi_backend {
+        server web:8000;
+    }
+
+    server {
+        listen 80;
+        server_name localhost;
+
+        # 设置客户端最大体上传大小 (用于文件上传)
+        client_max_body_size 100M;
+
+        # 代理配置
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        # WebSocket 支持
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+
+        location / {
+            proxy_pass http://fastapi_backend;
+            
+            # 超时设置
+            proxy_connect_timeout       60s;
+            proxy_send_timeout          60s;
+            proxy_read_timeout          60s;
+        }
+
+        # WebSocket 特殊处理
+        location /ws {
+            proxy_pass http://fastapi_backend;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            
+            # WebSocket 超时设置
+            proxy_read_timeout 86400;
+        }
+
+        # 静态文件处理
+        location /uploads/ {
+            proxy_pass http://fastapi_backend;
+        }
+    }
+} 
\ No newline at end of file
diff --git a/pre_deploy_check.sh b/pre_deploy_check.sh
new file mode 100644
index 0000000..d96c907
--- /dev/null
+++ b/pre_deploy_check.sh
@@ -0,0 +1,74 @@
+#!/bin/bash
+
+# 部署前检查脚本
+echo "=========================================="
+echo "         部署前环境检查"
+echo "=========================================="
+
+# 检查本地环境
+echo "1. 检查本地环境..."
+echo "   - 当前目录: $(pwd)"
+echo "   - 主文件存在: $(test -f main.py && echo "✅ main.py存在" || echo "❌ main.py不存在")"
+echo "   - 依赖文件存在: $(test -f requirements.txt && echo "✅ requirements.txt存在" || echo "❌ requirements.txt不存在")"
+echo "   - zip命令: $(command -v zip >/dev/null && echo "✅ 已安装" || echo "❌ 未安装")"
+
+# 检查sshpass
+if command -v sshpass >/dev/null; then
+    echo "   - sshpass: ✅ 已安装"
+else
+    echo "   - sshpass: ❌ 未安装"
+    if [[ "$OSTYPE" == "darwin"* ]]; then
+        echo "     安装命令: brew install sshpass"
+    else
+        echo "     安装命令: sudo apt-get install sshpass"
+    fi
+fi
+
+echo ""
+echo "2. 检查目标服务器连接..."
+REMOTE_HOST="6.6.6.86"
+REMOTE_USER="ubuntu"
+REMOTE_PASS="qweasdzxc1"
+
+if command -v sshpass >/dev/null; then
+    echo "   - 测试SSH连接..."
+    if sshpass -p "$REMOTE_PASS" ssh -o StrictHostKeyChecking=no -o ConnectTimeout=5 "$REMOTE_USER@$REMOTE_HOST" "echo 'SSH连接正常'" 2>/dev/null; then
+        echo "   - SSH连接: ✅ 正常"
+        
+        # 检查服务器系统信息
+        echo "   - 服务器信息:"
+        sshpass -p "$REMOTE_PASS" ssh -o StrictHostKeyChecking=no "$REMOTE_USER@$REMOTE_HOST" "
+            echo '     操作系统: '$(lsb_release -d 2>/dev/null | cut -f2 || echo 'Unknown')
+            echo '     Python版本: '$(python3 --version 2>/dev/null || echo '未安装')
+            echo '     磁盘空间: '$(df -h / | tail -1 | awk '{print \$4}' || echo '未知') 可用
+        " 2>/dev/null
+    else
+        echo "   - SSH连接: ❌ 失败"
+        echo "     请检查服务器地址、用户名和密码"
+    fi
+else
+    echo "   - SSH连接: ⚠️ 跳过 (sshpass未安装)"
+fi
+
+echo ""
+echo "3. 检查项目文件..."
+echo "   - 项目大小: $(du -sh . 2>/dev/null | cut -f1 || echo "未知")"
+echo "   - 关键文件检查:"
+echo "     * main.py: $(test -f main.py && echo "✅ 存在" || echo "❌ 缺失")"
+echo "     * requirements.txt: $(test -f requirements.txt && echo "✅ 存在" || echo "❌ 缺失")"
+echo "     * database/ip_list.json: $(test -f database/ip_list.json && echo "✅ 存在" || echo "❌ 缺失")"
+
+if [ -f "requirements.txt" ]; then
+    echo "   - Python依赖包:"
+    while IFS= read -r line; do
+        if [[ ! $line =~ ^[[:space:]]*# ]] && [[ ! -z $line ]]; then
+            echo "     * $line"
+        fi
+    done < requirements.txt
+fi
+
+echo ""
+echo "=========================================="
+echo "检查完成！如果所有项目都显示 ✅，您可以运行:"
+echo "./deploy.sh"
+echo "=========================================="
diff --git a/remote_deploy_script.sh b/remote_deploy_script.sh
new file mode 100644
index 0000000..23e4d14
--- /dev/null
+++ b/remote_deploy_script.sh
@@ -0,0 +1,415 @@
+#!/bin/bash
+
+# 设置颜色输出
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m'
+
+log_info() {
+    echo -e "${GREEN}[远程INFO]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
+}
+
+log_error() {
+    echo -e "${RED}[远程ERROR]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
+}
+
+log_warn() {
+    echo -e "${YELLOW}[远程WARN]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
+}
+
+# 检查端口占用并杀死进程
+check_and_kill_port() {
+    log_info "检查端口 8888 是否被占用..."
+    
+    # 查找占用端口的进程
+    PID=$(lsof -ti:8888 2>/dev/null)
+    
+    if [ ! -z "$PID" ]; then
+        log_warn "发现端口 8888 被进程 $PID 占用，正在终止..."
+        kill -TERM $PID
+        sleep 3
+        
+        # 检查进程是否还存在
+        if kill -0 $PID 2>/dev/null; then
+            log_warn "进程仍然存在，强制终止..."
+            kill -KILL $PID
+            sleep 2
+        fi
+        
+        # 再次检查
+        NEW_PID=$(lsof -ti:8888 2>/dev/null)
+        if [ ! -z "$NEW_PID" ]; then
+            log_error "无法终止占用端口 8888 的进程"
+            exit 1
+        else
+            log_info "端口 8888 已释放"
+        fi
+    else
+        log_info "端口 8888 未被占用"
+    fi
+}
+
+# 检查环境是否已安装
+check_environment() {
+    log_info "检查服务器环境..."
+    
+    # 检查Python3
+    if ! python3 --version &> /dev/null; then
+        log_info "Python3 未安装，需要安装..."
+        return 1
+    fi
+    
+    # 检查是否存在虚拟环境
+    if [ -d "/home/ubuntu/host_message_venv" ]; then
+        log_info "发现已存在的虚拟环境"
+        return 0
+    fi
+    
+    # 检查supervisor
+    if ! command -v supervisorctl &> /dev/null; then
+        log_info "Supervisor 未安装，需要安装..."
+        return 1
+    fi
+    
+    log_info "基础环境检查通过，但需要创建虚拟环境"
+    return 2
+}
+
+# 安装系统依赖
+install_dependencies() {
+    log_info "安装系统依赖..."
+    
+    # 更新包列表
+    sudo apt-get update -qq
+    
+    # 安装Python3、pip和相关开发工具
+    log_info "安装 Python3 和相关工具..."
+    sudo apt-get install -y python3 python3-pip python3-venv python3-dev build-essential python3-full
+    
+    # 安装supervisor用于进程保活
+    if ! command -v supervisorctl &> /dev/null; then
+        log_info "安装 supervisor..."
+        sudo apt-get install -y supervisor
+        sudo systemctl enable supervisor
+        sudo systemctl start supervisor
+    fi
+    
+    # 安装其他必要工具
+    sudo apt-get install -y curl wget unzip lsof net-tools
+    
+    log_info "系统依赖安装完成"
+}
+
+# 创建和管理虚拟环境
+setup_virtual_environment() {
+    local venv_path="/home/ubuntu/host_message_venv"
+    
+    log_info "设置Python虚拟环境..."
+    
+    # 如果虚拟环境已存在，询问是否重新创建
+    if [ -d "$venv_path" ]; then
+        log_info "虚拟环境已存在，删除旧环境并重新创建..."
+        rm -rf "$venv_path"
+    fi
+    
+    # 创建虚拟环境
+    log_info "创建新的虚拟环境..."
+    python3 -m venv "$venv_path"
+    
+    if [ $? -eq 0 ]; then
+        log_info "虚拟环境创建成功: $venv_path"
+    else
+        log_error "虚拟环境创建失败"
+        exit 1
+    fi
+    
+    # 激活虚拟环境并升级pip
+    log_info "激活虚拟环境并升级pip..."
+    source "$venv_path/bin/activate"
+    pip install --upgrade pip setuptools wheel
+    
+    log_info "虚拟环境设置完成"
+}
+
+# 主要部署逻辑
+main_deploy() {
+    # 检查并终止端口进程
+    check_and_kill_port
+    
+    # 检查环境状态
+    check_environment
+    env_status=$?
+    
+    case $env_status in
+        0)
+            log_info "环境已完整安装，跳过依赖安装"
+            ;;
+        1)
+            log_info "需要安装基础环境"
+            install_dependencies
+            setup_virtual_environment
+            ;;
+        2)
+            log_info "基础环境已安装，只需创建虚拟环境"
+            setup_virtual_environment
+            ;;
+    esac
+    
+    # 备份旧代码（如果存在）
+    if [ -d "/home/ubuntu/host_message" ]; then
+        log_info "备份现有代码..."
+        sudo mv "/home/ubuntu/host_message" "/home/ubuntu/host_message_backup_$(date +%Y%m%d_%H%M%S)" 2>/dev/null || true
+    fi
+    
+    # 创建部署目录
+    log_info "创建部署目录..."
+    sudo mkdir -p "/home/ubuntu/host_message"
+    sudo chown $USER:$USER "/home/ubuntu/host_message"
+    
+    # 解压代码包
+    log_info "解压代码包..."
+    cd "/home/ubuntu/host_message"
+    unzip -q "/tmp/$1"
+    
+    if [ $? -eq 0 ]; then
+        log_info "代码解压成功"
+    else
+        log_error "代码解压失败"
+        exit 1
+    fi
+    
+    # 创建必要的目录
+    mkdir -p logs uploads chat_history database
+    
+    # 激活虚拟环境并安装Python依赖
+    log_info "激活虚拟环境并安装Python依赖..."
+    source "/home/ubuntu/host_message_venv/bin/activate"
+    
+    if [ -f "requirements.txt" ]; then
+        log_info "发现 requirements.txt，安装依赖包..."
+        pip install -r requirements.txt
+        if [ $? -eq 0 ]; then
+            log_info "Python依赖安装成功"
+        else
+            log_error "Python依赖安装失败"
+            # 尝试单独安装每个包
+            log_info "尝试单独安装依赖包..."
+            while IFS= read -r package; do
+                if [[ ! $package =~ ^[[:space:]]*# ]] && [[ ! -z $package ]]; then
+                    log_info "安装: $package"
+                    pip install $package || log_warn "安装 $package 失败"
+                fi
+            done < requirements.txt
+        fi
+    else
+        log_warn "未找到 requirements.txt 文件"
+    fi
+    
+    # 验证关键依赖
+    log_info "验证Python依赖..."
+    python -c "import fastapi, uvicorn; print('关键依赖验证成功')" || {
+        log_error "关键依赖验证失败，手动安装..."
+        pip install fastapi uvicorn
+    }
+    
+    # 检查main.py文件
+    if [ ! -f "main.py" ]; then
+        log_error "main.py 文件不存在！"
+        exit 1
+    fi
+    
+    # 测试Python应用是否可以启动
+    log_info "测试Python应用..."
+    source "/home/ubuntu/host_message_venv/bin/activate"
+    timeout 10 python -c "
+import sys
+sys.path.insert(0, '.')
+try:
+    import main
+    print('应用模块导入成功')
+except Exception as e:
+    print(f'应用模块导入失败: {e}')
+    sys.exit(1)
+" || log_warn "应用模块测试失败，但继续部署..."
+    
+    # 创建启动脚本
+    log_info "创建应用启动脚本..."
+    cat > start_app.sh <<'SCRIPT_EOF'
+#!/bin/bash
+set -e
+
+# 进入应用目录
+cd "/home/ubuntu/host_message"
+
+# 激活虚拟环境
+source "/home/ubuntu/host_message_venv/bin/activate"
+
+# 设置环境变量
+export PYTHONPATH="/home/ubuntu/host_message:$PYTHONPATH"
+
+# 记录启动信息
+echo "[$(date)] 应用启动开始..."
+echo "当前目录: $(pwd)"
+echo "Python版本: $(python --version)"
+echo "虚拟环境: $VIRTUAL_ENV"
+
+# 检查必要文件
+if [ ! -f "main.py" ]; then
+    echo "错误: main.py 文件不存在"
+    exit 1
+fi
+
+# 启动应用
+echo "[$(date)] 启动Python应用..."
+python main.py
+SCRIPT_EOF
+    chmod +x start_app.sh
+    
+    # 创建调试脚本
+    log_info "创建调试脚本..."
+    cat > debug_app.sh <<'DEBUG_EOF'
+#!/bin/bash
+cd "/home/ubuntu/host_message"
+echo "=== 调试信息 ==="
+echo "当前目录: $(pwd)"
+
+# 激活虚拟环境
+source "/home/ubuntu/host_message_venv/bin/activate" 2>/dev/null || echo "虚拟环境激活失败"
+
+echo "Python版本: $(python --version 2>/dev/null || python3 --version)"
+echo "pip版本: $(pip --version 2>/dev/null || echo '无pip')"
+echo "虚拟环境: $VIRTUAL_ENV"
+echo "文件列表:"
+ls -la
+echo "=== 尝试导入测试 ==="
+python -c "
+import sys
+print('Python路径:', sys.path)
+try:
+    import fastapi
+    print('fastapi版本:', fastapi.__version__)
+except ImportError as e:
+    print('fastapi导入失败:', e)
+try:
+    import uvicorn
+    print('uvicorn版本:', uvicorn.__version__)
+except ImportError as e:
+    print('uvicorn导入失败:', e)
+" 2>/dev/null || python3 -c "
+import sys
+print('Python路径:', sys.path)
+try:
+    import fastapi
+    print('fastapi版本:', fastapi.__version__)
+except ImportError as e:
+    print('fastapi导入失败:', e)
+try:
+    import uvicorn
+    print('uvicorn版本:', uvicorn.__version__)
+except ImportError as e:
+    print('uvicorn导入失败:', e)
+"
+echo "=== 检查端口占用 ==="
+netstat -tlnp | grep 8888 || echo '端口8888未被占用'
+echo "=== 尝试启动应用（5秒后停止） ==="
+timeout 5 python main.py 2>/dev/null || timeout 5 python3 main.py || echo '应用启动测试完成'
+DEBUG_EOF
+    chmod +x debug_app.sh
+    
+    # 创建supervisor配置
+    log_info "配置进程保活监控..."
+    sudo tee /etc/supervisor/conf.d/host_message.conf > /dev/null <<SUPERVISOR_EOF
+[program:host_message]
+command=/home/ubuntu/host_message/start_app.sh
+directory=/home/ubuntu/host_message
+user=ubuntu
+autostart=true
+autorestart=true
+redirect_stderr=true
+stdout_logfile=/home/ubuntu/host_message/logs/supervisor.log
+stdout_logfile_maxbytes=10MB
+stdout_logfile_backups=3
+environment=PATH="/home/ubuntu/host_message_venv/bin:/usr/local/bin:/usr/bin:/bin",PYTHONPATH="/home/ubuntu/host_message"
+startsecs=10
+startretries=3
+SUPERVISOR_EOF
+    
+    # 停止可能存在的旧进程
+    sudo supervisorctl stop host_message 2>/dev/null || true
+    
+    # 重新加载supervisor配置
+    sudo supervisorctl reread
+    sudo supervisorctl update
+    
+    # 启动应用
+    log_info "启动应用..."
+    sudo supervisorctl start host_message
+    
+    # 等待应用启动并检查状态
+    log_info "等待应用启动..."
+    for i in {1..30}; do
+        sleep 2
+        STATUS=$(sudo supervisorctl status host_message 2>/dev/null || echo "ERROR")
+        log_info "第 $i 次检查: $STATUS"
+        
+        if echo "$STATUS" | grep -q "RUNNING"; then
+            log_info "应用启动成功！"
+            break
+        elif echo "$STATUS" | grep -q "FATAL\|BACKOFF"; then
+            log_error "应用启动失败: $STATUS"
+            log_error "查看详细日志:"
+            tail -20 "/home/ubuntu/host_message/logs/supervisor.log" 2>/dev/null || echo "无法读取日志文件"
+            
+            # 运行调试脚本
+            log_info "运行调试脚本获取详细信息:"
+            cd "/home/ubuntu/host_message"
+            ./debug_app.sh 2>&1 || true
+            
+            # 检查supervisor错误日志
+            log_info "检查supervisor错误日志:"
+            sudo tail -20 /var/log/supervisor/supervisord.log 2>/dev/null || echo "无法读取supervisor日志"
+            
+            exit 1
+        fi
+        
+        if [ $i -eq 30 ]; then
+            log_error "应用启动超时"
+            log_error "最终状态: $STATUS"
+            exit 1
+        fi
+    done
+    
+    # 检查端口监听
+    log_info "检查端口监听状态..."
+    for i in {1..10}; do
+        if netstat -tlnp 2>/dev/null | grep -q ":8888" || ss -tlnp 2>/dev/null | grep -q ":8888"; then
+            log_info "端口 8888 监听正常"
+            log_info "部署完成！您可以通过 http://6.6.6.86:8888 访问应用"
+            break
+        else
+            log_warn "等待端口 8888 开始监听... ($i/10)"
+            sleep 2
+        fi
+        
+        if [ $i -eq 10 ]; then
+            log_warn "端口 8888 未在监听，请检查应用日志"
+            log_info "当前监听的端口:"
+            netstat -tlnp 2>/dev/null | grep LISTEN || ss -tlnp 2>/dev/null | grep LISTEN || echo "无法获取监听端口信息"
+        fi
+    done
+    
+    # 清理临时文件
+    rm -f "/tmp/$1"
+    
+    log_info "部署脚本执行完成"
+}
+
+# 执行主要部署逻辑
+main_deploy "$1"
+
+
+
+
+
+
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..a99326a
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,7 @@
+fastapi==0.109.0
+uvicorn[standard]==0.27.0
+python-multipart==0.0.6
+websockets==12.0
+jinja2==3.1.2
+aiofiles==23.2.0
+python-json-logger==2.0.7
\ No newline at end of file
diff --git a/start.sh b/start.sh
new file mode 100644
index 0000000..086a06b
--- /dev/null
+++ b/start.sh
@@ -0,0 +1,172 @@
+#!/bin/bash
+
+# 定义常量
+PORT=8888
+LOG_FILE="logs/$(date +%Y%m%d_%H%M%S)_message.log"
+PID_FILE="logs/app.pid"
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+# 创建日志目录
+mkdir -p "$SCRIPT_DIR/logs"
+
+# 切换到脚本目录
+cd "$SCRIPT_DIR" || {
+    echo "[$(date +%Y-%m-%d\ %H:%M:%S)] 错误: 无法进入目录 $SCRIPT_DIR" | tee -a "$LOG_FILE"
+    exit 1
+}
+
+# 日志输出函数
+log_info() {
+    echo "[$(date +%Y-%m-%d\ %H:%M:%S)] [INFO] $1" | tee -a "$LOG_FILE"
+}
+
+log_error() {
+    echo "[$(date +%Y-%m-%d\ %H:%M:%S)] [ERROR] $1" | tee -a "$LOG_FILE"
+}
+
+log_warn() {
+    echo "[$(date +%Y-%m-%d\ %H:%M:%S)] [WARN] $1" | tee -a "$LOG_FILE"
+}
+
+# 检查端口是否被占用
+check_port() {
+    local port=$1
+    if command -v lsof >/dev/null 2>&1; then
+        lsof -i :$port >/dev/null 2>&1
+    elif command -v netstat >/dev/null 2>&1; then
+        netstat -tuln | grep ":$port " >/dev/null 2>&1
+    elif command -v ss >/dev/null 2>&1; then
+        ss -tuln | grep ":$port " >/dev/null 2>&1
+    else
+        log_error "无法找到检查端口的命令 (lsof, netstat, ss)"
+        return 1
+    fi
+}
+
+# 健康检查函数
+health_check() {
+    local url="http://localhost:$PORT"
+    local timeout=5
+    
+    if command -v curl >/dev/null 2>&1; then
+        curl -s --connect-timeout $timeout --max-time $timeout "$url" >/dev/null 2>&1
+    elif command -v wget >/dev/null 2>&1; then
+        wget -q --timeout=$timeout --tries=1 -O /dev/null "$url" >/dev/null 2>&1
+    else
+        log_warn "无法找到HTTP检查工具 (curl, wget)，跳过健康检查"
+        return 0
+    fi
+}
+
+# 停止现有进程
+stop_existing_process() {
+    log_info "停止现有进程..."
+    
+    # 从PID文件停止
+    if [ -f "$PID_FILE" ]; then
+        local pid=$(cat "$PID_FILE")
+        if kill -0 "$pid" 2>/dev/null; then
+            log_info "正在停止进程 PID: $pid"
+            kill "$pid"
+            sleep 2
+            if kill -0 "$pid" 2>/dev/null; then
+                log_warn "进程仍在运行，强制终止"
+                kill -9 "$pid"
+            fi
+            rm -f "$PID_FILE"
+        else
+            log_info "PID文件中的进程已不存在，清理PID文件"
+            rm -f "$PID_FILE"
+        fi
+    fi
+    
+    # 通过端口查找并停止进程
+    if check_port $PORT; then
+        log_info "发现端口 $PORT 仍被占用，查找并停止相关进程"
+        if command -v lsof >/dev/null 2>&1; then
+            local pids=$(lsof -ti :$PORT)
+            if [ -n "$pids" ]; then
+                echo "$pids" | xargs kill -15 2>/dev/null || true
+                sleep 2
+                # 如果进程仍在运行，强制杀死
+                local remaining_pids=$(lsof -ti :$PORT 2>/dev/null)
+                if [ -n "$remaining_pids" ]; then
+                    echo "$remaining_pids" | xargs kill -9 2>/dev/null || true
+                fi
+            fi
+        fi
+    fi
+}
+
+# 启动应用
+start_app() {
+    log_info "开始启动应用..."
+    
+    # 后台运行Python程序
+    nohup python main.py >> "$LOG_FILE" 2>&1 &
+    local app_pid=$!
+    
+    # 保存PID
+    echo $app_pid > "$PID_FILE"
+    log_info "应用已启动，PID: $app_pid"
+    
+    # 等待应用启动
+    local max_wait=30
+    local wait_time=0
+    
+    while [ $wait_time -lt $max_wait ]; do
+        if check_port $PORT; then
+            log_info "端口 $PORT 已开始监听"
+            break
+        fi
+        sleep 1
+        wait_time=$((wait_time + 1))
+    done
+    
+    if [ $wait_time -ge $max_wait ]; then
+        log_error "应用启动超时，端口 $PORT 未开始监听"
+        return 1
+    fi
+    
+    # 健康检查
+    sleep 2
+    if health_check; then
+        log_info "应用健康检查通过"
+        return 0
+    else
+        log_warn "应用健康检查失败，但端口已监听"
+        return 0
+    fi
+}
+
+# 主逻辑
+main() {
+    log_info "开始检查应用状态..."
+    
+    # 检查端口是否被占用
+    if check_port $PORT; then
+        log_info "检测到端口 $PORT 已被占用"
+        
+        # 进行健康检查
+        if health_check; then
+            log_info "应用正常运行，端口 $PORT 可正常访问，跳过重启"
+            exit 0
+        else
+            log_warn "端口 $PORT 被占用但健康检查失败，准备重启应用"
+            stop_existing_process
+        fi
+    else
+        log_info "端口 $PORT 未被占用，准备启动应用"
+    fi
+    
+    # 启动应用
+    if start_app; then
+        log_info "应用启动成功"
+    else
+        log_error "应用启动失败"
+        exit 1
+    fi
+}
+
+# 执行主函数
+main
diff --git a/templates/chat.html b/templates/chat.html
new file mode 100644
index 0000000..8ebded9
--- /dev/null
+++ b/templates/chat.html
@@ -0,0 +1,6058 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>叠加态 - 局域网聊天室</title>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
+    <link rel="icon" href="/image/logo_w.ico" type="image/x-icon">
+    <style>
+        :root {
+            --primary-color: #4a90e2;
+            --secondary-color: #357abd;
+            --background-color: #f5f7fa;
+            --message-sent: #dcf8c6;
+            --message-received: #fff;
+            --sidebar-width: 280px;
+            --header-height: 60px;
+            --border-radius: 12px;
+            --shadow-color: rgba(0, 0, 0, 0.1);
+            --transition-speed: 0.3s;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--background-color);
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        .app-container {
+            display: flex;
+            height: 100vh;
+            position: relative;
+        }
+
+        /* 侧边栏样式 */
+        .sidebar {
+            width: var(--sidebar-width);
+            background: white;
+            height: 100%;
+            position: fixed;
+            left: calc(-1 * var(--sidebar-width));
+            transition: transform var(--transition-speed);
+            z-index: 1000;
+            box-shadow: 2px 0 10px var(--shadow-color);
+            display: flex;
+            flex-direction: column;
+        }
+
+        .sidebar.visible {
+            transform: translateX(var(--sidebar-width));
+        }
+
+        .sidebar-header {
+            padding: 20px;
+            background: var(--primary-color);
+            color: white;
+            font-size: 1.2em;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .chat-modes {
+            padding: 15px;
+        }
+
+        .mode-item {
+            padding: 12px 15px;
+            margin-bottom: 8px;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            transition: all var(--transition-speed);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .mode-item:hover {
+            background: rgba(74, 144, 226, 0.1);
+        }
+
+        .mode-item.active {
+            background: var(--primary-color);
+            color: white;
+        }
+
+        .mode-item i {
+            font-size: 1.2em;
+        }
+
+        /* 主聊天区域 */
+        .chat-main {
+            flex: 1;
+            margin-left: 0;
+            transition: margin var(--transition-speed);
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            background: white;
+        }
+
+        .chat-header {
+            height: var(--header-height);
+            background: white;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            position: relative;
+        }
+
+        .menu-toggle {
+            background: none;
+            border: none;
+            font-size: 1.5em;
+            color: var(--primary-color);
+            cursor: pointer;
+            padding: 10px;
+            margin-right: 15px;
+            transition: transform var(--transition-speed);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+        }
+
+        .menu-toggle:hover {
+            transform: scale(1.1);
+        }
+
+        .chat-title {
+            font-size: 1.2em;
+            font-weight: 500;
+        }
+
+        .connection-status {
+            margin-left: auto;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .status-indicator {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #ccc;
+            transition: background var(--transition-speed);
+        }
+
+        .status-indicator.connected {
+            background: #4caf50;
+        }
+
+        /* 消息区域 */
+        .chat-messages {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+            background: #e5ddd5;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            position: relative;
+        }
+
+        .message {
+            position: relative;
+            padding: 12px 15px;
+            border-radius: 12px;
+            word-wrap: break-word;
+            margin: 0;
+            min-width: 120px;
+        }
+
+        .message.sent {
+            background: linear-gradient(135deg, var(--message-sent) 0%, #c5e1a5 100%);
+            margin-left: auto;
+            border-bottom-right-radius: 5px;
+        }
+
+        .message.received {
+            background: linear-gradient(135deg, var(--message-received) 0%, #f5f5f5 100%);
+            margin-right: auto;
+            border-bottom-left-radius: 5px;
+        }
+
+        .message-content {
+            padding-top: 8px;
+            font-size: 1em;
+            line-height: 1.4;
+        }
+
+        .message-info {
+            display: flex;
+            align-items: center;
+            font-size: 0.75em;
+            margin-top: 4px;
+            padding-top: 4px;
+            border-top: 1px solid rgba(0,0,0,0.05);
+            color: #666;
+        }
+
+        .info-item {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            padding: 2px 6px;
+            border-radius: 10px;
+            background: rgba(0,0,0,0.04);
+            margin-right: 6px;
+        }
+
+        .info-item:last-child {
+            margin-right: 0;
+        }
+
+        .info-item i {
+            font-size: 0.9em;
+        }
+
+        .message.sent .message-info {
+            color: #558b2f;
+        }
+
+        .message.received .message-info {
+            color: #666;
+        }
+
+        /* 消息时间悬浮效果 */
+        .message-time {
+            transition: all 0.3s ease;
+        }
+
+        .message:hover .message-time {
+            opacity: 1;
+        }
+
+        /* 消息气泡尾����� */
+        .message::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            width: 12px;
+            height: 12px;
+        }
+
+        .message.sent::after {
+            right: -6px;
+            background: linear-gradient(135deg, var(--message-sent) 0%, #c5e1a5 100%);
+            transform: skewX(45deg);
+            border-bottom-right-radius: 5px;
+        }
+
+        .message.received::after {
+            left: -6px;
+            background: linear-gradient(135deg, var(--message-received) 0%, #f5f5f5 100%);
+            transform: skewX(-45deg);
+            border-bottom-left-radius: 5px;
+        }
+
+        /* 优化聊天区域滚动条 */
+        .chat-messages::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .chat-messages::-webkit-scrollbar-track {
+            background: rgba(0,0,0,0.05);
+            border-radius: 3px;
+        }
+
+        .chat-messages::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.2);
+            border-radius: 3px;
+        }
+
+        .chat-messages::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.3);
+        }
+
+        /* 输入区域 */
+        .chat-input-container {
+            padding: 15px 20px;
+            background: white;
+            border-top: 1px solid #eee;
+            display: flex;
+            gap: 15px;
+            align-items: center;
+        }
+
+        .chat-input {
+            flex: 1;
+            padding: 12px 20px;
+            border: 1px solid #ddd;
+            border-radius: 24px;
+            outline: none;
+            font-size: 1em;
+            transition: border-color var(--transition-speed);
+        }
+
+        .chat-input:focus {
+            border-color: var(--primary-color);
+        }
+
+        .send-btn {
+            padding: 12px 24px;
+            background: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: 24px;
+            cursor: pointer;
+            transition: all var(--transition-speed);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .send-btn:hover {
+            background: var(--secondary-color);
+            transform: translateY(-1px);
+        }
+
+        .send-btn:active {
+            transform: translateY(1px);
+        }
+
+        /* 动画效果 */
+        @keyframes messageSlide {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* 私��输��框 */
+        .private-chat-input {
+            padding: 15px;
+            border-bottom: 1px solid #eee;
+            display: none;
+        }
+
+        .private-chat-input.active {
+            display: block;
+        }
+
+        .private-chat-input input {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: var(--border-radius);
+            outline: none;
+        }
+
+        /* 移动端适配 */
+        @media (max-width: 768px) {
+            .sidebar {
+                width: 100%;
+                max-width: 320px;
+            }
+
+            .chat-main {
+                width: 100%;
+            }
+
+            .message {
+                max-width: 85%;
+            }
+
+            .chat-input-container {
+                padding: 10px;
+            }
+
+            .send-btn {
+                padding: 12px 20px;
+            }
+        }
+
+        /* 触摸设备优化 */
+        @media (hover: none) {
+            .mode-item:active {
+                background: rgba(74, 144, 226, 0.1);
+            }
+
+            .send-btn:active {
+                background: var(--secondary-color);
+            }
+        }
+
+        /* 在原有样式的基础上添加 */
+        .icon-fallback {
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            line-height: 24px;
+            text-align: center;
+        }
+
+        /* 修改菜单图标样式 */
+        .menu-toggle {
+            /* 原有样式保持不变 */
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+        }
+
+        /* 添加汉堡菜单的回退样式 */
+        .menu-icon {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            width: 20px;
+            height: 16px;
+        }
+
+        .menu-icon span {
+            display: block;
+            width: 100%;
+            height: 2px;
+            background-color: var(--primary-color);
+            transition: all 0.3s;
+        }
+
+        /* 发送按钮图标样式优化 */
+        .send-btn i {
+            font-size: 1.2em;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        /* 在原有样式基础上添加 */
+        .message {
+            margin: 20px 0; /* 增加消息间距 */
+        }
+
+        /* IP 头像样式 */
+        .avatar {
+            width: 35px;
+            height: 35px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            color: white;
+            font-size: 1.2em;
+            margin-right: 10px;
+        }
+
+        /* 消息容器布局优化 */
+        .message-container {
+            position: relative;
+            display: flex;
+            align-items: flex-start;
+            margin: 12px 0;
+            max-width: 85%;
+        }
+
+        .message-container.sent {
+            flex-direction: row-reverse;
+            margin-left: auto;
+        }
+
+        .message-container.received {
+            margin-right: auto;
+        }
+
+        /* 优化头像样式 */
+        .avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            color: white;
+            font-size: 1.1em;
+            flex-shrink: 0;
+        }
+
+        .message-container.sent .avatar {
+            margin-left: 8px;
+        }
+
+        .message-container.received .avatar {
+            margin-right: 8px;
+        }
+
+        /* 优化消息内容包装器 */
+        .message-content-wrapper {
+            flex: 1;
+            min-width: 200px;
+            max-width: calc(100% - 40px);
+        }
+
+        /* 优化消息气泡样式 */
+        .message {
+            padding: 10px 12px;
+            border-radius: 12px;
+            position: relative;
+            word-wrap: break-word;
+            margin: 0;
+            min-width: 120px;
+        }
+
+        .message.sent {
+            background: linear-gradient(135deg, var(--message-sent) 0%, #c5e1a5 100%);
+            border-bottom-right-radius: 4px;
+        }
+
+        .message.received {
+            background: linear-gradient(135deg, var(--message-received) 0%, #f5f5f5 100%);
+            border-bottom-left-radius: 4px;
+        }
+
+        /* 优化用户标签样式 */
+        .user-tag {
+            font-size: 0.8em;
+            color: #666;
+            margin-bottom: 4px;
+            position: absolute;
+            top: -18px;
+        }
+
+        .message-container.sent .user-tag {
+            right: 45px; /* 调整"我"的位置，与头像对齐 */
+        }
+
+        .message-container.received .user-tag {
+            left: 45px;
+        }
+
+        /* 添加复制按钮样式 */
+        .message-actions {
+            position: absolute;
+            right: -30px;
+            top: 50%;
+            transform: translateY(-50%);
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        .message-container.received .message-actions {
+            left: -30px;
+            right: auto;
+        }
+
+        .message-container:hover .message-actions {
+            opacity: 1;
+        }
+
+        /* 优化消息容器样式 */
+        .message-container {
+            position: relative;
+            display: flex;
+            align-items: flex-start;
+            margin: 12px 0;
+            max-width: 85%;
+        }
+
+        /* 优化复制按钮样式 */
+        .copy-btn {
+            position: absolute;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: white;
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: all 0.3s ease;
+            z-index: 2;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        /* 发送消息的复制按钮位置 */
+        .message-container.sent .copy-btn {
+            left: -40px; /* 调整到消息外侧 */
+        }
+
+        /* 接收消息的复制按钮位置 */
+        .message-container.received .copy-btn {
+            right: -40px; /* 调整到�����������外�� */
+        }
+
+        .message-container:hover .copy-btn {
+            opacity: 1;
+        }
+
+        .copy-btn:hover {
+            background: white;
+            transform: translateY(-50%) scale(1.1);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+        }
+
+        .copy-btn i {
+            color: var(--primary-color);
+            font-size: 1.1em;
+        }
+
+        /* 复制成功提示优化 */
+        .copy-tooltip {
+            position: fixed;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 0.9em;
+            z-index: 1000;
+            pointer-events: none;
+            opacity: 0;
+            transition: all 0.3s ease;
+        }
+
+        .copy-tooltip.show {
+            opacity: 1;
+            transform: translate(-50%, -10px);
+        }
+
+        /* 响应式布局优化 */
+        @media (max-width: 768px) {
+            .message-container {
+                max-width: 95%;
+            }
+
+            .message-content-wrapper {
+                min-width: 160px;
+            }
+
+            .message {
+                min-width: 100px;
+            }
+
+            .info-item {
+                font-size: 0.8em;
+                padding: 1px 4px;
+            }
+        }
+
+        /* 超小屏幕优化 */
+        @media (max-width: 480px) {
+            .message-info {
+                flex-direction: column;
+                align-items: flex-end;
+                gap: 2px;
+            }
+
+            .info-item {
+                width: auto;
+            }
+
+            .message-content-wrapper {
+                min-width: 120px;
+            }
+        }
+
+        /* 添加消息内容最大宽度制 */
+        .message-content {
+            font-size: 1em;
+            line-height: 1.4;
+            margin-bottom: 4px;
+            word-break: break-word;
+        }
+
+        /* 在样式部分添加收回按钮的样式 */
+        .sidebar-toggle {
+            position: absolute;
+            right: -15px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 30px;
+            height: 60px;
+            background: var(--primary-color);
+            border: none;
+            border-radius: 0 30px 30px 0;
+            color: white;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+            z-index: 1001;
+        }
+
+        .sidebar-toggle:hover {
+            background: var(--secondary-color);
+            width: 35px;
+        }
+
+        .sidebar-toggle i {
+            transition: transform 0.3s ease;
+        }
+
+        .sidebar.visible .sidebar-toggle i {
+            transform: rotate(180deg);
+        }
+
+        /* 优化侧边栏样式 */
+        .sidebar {
+            width: var(--sidebar-width);
+            background: white;
+            height: 100%;
+            position: fixed;
+            left: calc(-1 * var(--sidebar-width));
+            transition: transform var(--transition-speed);
+            z-index: 1000;
+            box-shadow: 2px 0 10px var(--shadow-color);
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* 优化头部状态栏样式 */
+        .connection-status {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            background: rgba(0, 0, 0, 0.05);
+            padding: 6px 12px;
+            border-radius: 20px;
+        }
+
+        .ip-display {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            padding-left: 8px;
+            border-left: 1px solid rgba(0, 0, 0, 0.1);
+            color: var(--primary-color);
+        }
+
+        /* 修改消息中 IP 显示样式 */
+        .info-item.ip-info {
+            background: rgba(74, 144, 226, 0.1);
+            color: var(--primary-color);
+        }
+
+        .message.sent .info-item.ip-info {
+            background: rgba(85, 139, 47, 0.1);
+            color: #558b2f;
+        }
+
+        .sidebar-actions {
+            padding: 15px;
+            border-bottom: 1px solid #eee;
+        }
+
+        .action-btn {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 12px 15px;
+            background: var(--primary-color);
+            color: white;
+            text-decoration: none;
+            border-radius: var(--border-radius);
+            transition: all 0.3s ease;
+        }
+
+        .action-btn:hover {
+            background: var(--secondary-color);
+            transform: translateY(-2px);
+        }
+
+        .action-btn i {
+            font-size: 1.2em;
+        }
+
+        /* 聊天列表样式 */
+        .chat-list {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            border-top: 1px solid #eee;
+            overflow: hidden;
+        }
+
+        .chat-list-header {
+            padding: 15px;
+            font-weight: bold;
+            background: #f8f9fa;
+            border-bottom: 1px solid #eee;
+        }
+
+        .chat-list-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 10px;
+        }
+
+        .chat-item {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-bottom: 5px;
+            position: relative;
+        }
+
+        .chat-item:hover {
+            background: rgba(74, 144, 226, 0.1);
+        }
+
+        .chat-item.active {
+            background: var(--primary-color);
+            color: white;
+        }
+
+        .chat-item-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            margin-right: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 1.2em;
+        }
+
+        .chat-item-info {
+            flex: 1;
+        }
+
+        .chat-item-name {
+            font-weight: 500;
+            margin-bottom: 3px;
+        }
+
+        .chat-item-last-msg {
+            font-size: 0.8em;
+            color: #666;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .chat-item-badge {
+            position: absolute;
+            right: 10px;
+            top: 10px;
+            background: #f44336;
+            color: white;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.7em;
+            opacity: 0;
+            transform: scale(0);
+            transition: all 0.3s ease;
+        }
+
+        .chat-item-badge.show {
+            opacity: 1;
+            transform: scale(1);
+        }
+
+        /* 消息分组样式 */
+        .message-date-divider {
+            text-align: center;
+            margin: 20px 0;
+            position: relative;
+        }
+
+        .message-date-divider::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            width: 100%;
+            height: 1px;
+            background: rgba(0,0,0,0.1);
+        }
+
+        .message-date-divider span {
+            background: #e5ddd5;
+            padding: 0 10px;
+            color: #666;
+            font-size: 0.8em;
+            position: relative;
+            z-index: 1;
+        }
+
+        .chat-item-actions {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            display: none;
+            gap: 5px;
+        }
+
+        .chat-item:hover .chat-item-actions {
+            display: flex;
+        }
+
+        .chat-delete-btn {
+            background: #dc3545;
+            color: white;
+            border: none;
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            opacity: 0.8;
+        }
+
+        .chat-delete-btn:hover {
+            opacity: 1;
+            transform: scale(1.1);
+        }
+
+        /* 确聊天项有足够的右边距来容按钮 */
+        .chat-item {
+            padding-right: 45px;
+        }
+
+        /* Toast 提示样式 */
+        .toast {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 10px 20px;
+            border-radius: 20px;
+            font-size: 0.9em;
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .toast.show {
+            opacity: 1;
+        }
+
+        /* 添加确认对话框样式 */
+        .confirm-dialog {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+            z-index: 1001;
+            max-width: 300px;
+            width: 90%;
+        }
+
+        .confirm-dialog-buttons {
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+            margin-top: 20px;
+        }
+
+        .confirm-dialog-buttons button {
+            padding: 8px 15px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .confirm-dialog-buttons .confirm-btn {
+            background: #dc3545;
+            color: white;
+        }
+
+        .confirm-dialog-buttons .cancel-btn {
+            background: #6c757d;
+            color: white;
+        }
+
+        /* 修改导航栏和消息气泡的移动端样式 */
+        @media (max-width: 768px) {
+            /* 导航栏优化 */
+            .chat-header {
+                padding: 0 15px;
+                height: 50px;
+                justify-content: space-between;
+            }
+
+            /* 移动端 IP 显示优化 */
+            .connection-status {
+                font-size: 0.85em;
+                padding: 4px 10px;
+                background: rgba(74, 144, 226, 0.1);
+                border-radius: 15px;
+                display: flex;
+                align-items: center;
+                gap: 6px;
+            }
+
+            .ip-display {
+                display: flex !important; /* 强制显示 IP */
+                border: none;
+                padding: 0;
+                color: var(--primary-color);
+            }
+
+            /* 左侧栏按钮优化 */
+            .mode-item {
+                margin: 8px 12px;
+                padding: 12px 16px;
+                border-radius: 12px;
+                background: #f8f9fa;
+                transition: all 0.3s ease;
+            }
+
+            .mode-item.active {
+                background: var(--primary-color);
+                transform: scale(1.02);
+                box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
+            }
+
+            .mode-item i {
+                font-size: 1.3em;
+                width: 30px;
+                height: 30px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: rgba(255, 255, 255, 0.2);
+                border-radius: 50%;
+                margin-right: 12px;
+            }
+
+            /* 聊天列表项优化 */
+            .chat-item {
+                margin: 8px 12px;
+                padding: 12px;
+                border-radius: 12px;
+                background: #f8f9fa;
+                transition: all 0.3s ease;
+            }
+
+            .chat-item:active {
+                transform: scale(0.98);
+                background: rgba(74, 144, 226, 0.1);
+            }
+
+            /* 返回按钮优化 */
+            .action-btn {
+                margin: 12px 15px;
+                padding: 14px;
+                border-radius: 12px;
+                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+                box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
+                transition: all 0.3s ease;
+            }
+
+            .action-btn:active {
+                transform: scale(0.98);
+                box-shadow: 0 1px 4px rgba(74, 144, 226, 0.1);
+            }
+
+            /* 侧边栏头部优化 */
+            .sidebar-header {
+                padding: 20px 15px;
+                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                min-height: 70px;
+            }
+
+            .sidebar-header span {
+                font-size: 1.1em;
+                font-weight: 500;
+            }
+
+            /* 分类标题优化 */
+            .chat-list-header {
+                padding: 15px;
+                font-size: 0.9em;
+                color: #666;
+                background: transparent;
+                font-weight: 600;
+                letter-spacing: 0.5px;
+            }
+
+            /* 滚动条优化 */
+            .chat-list-content::-webkit-scrollbar {
+                width: 4px;
+            }
+
+            .chat-list-content::-webkit-scrollbar-thumb {
+                background: rgba(0, 0, 0, 0.1);
+                border-radius: 2px;
+            }
+
+            /* 添加分割线 */
+            .chat-modes {
+                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+                padding-bottom: 10px;
+            }
+
+            /* 优化动画效果 */
+            .sidebar {
+                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            }
+
+            .sidebar.visible {
+                transform: translateX(100%);
+            }
+
+            /* 未读消息提示优化 */
+            .chat-item-badge {
+                background: #ff4757;
+                font-weight: 600;
+                box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
+            }
+
+            /* IP地址显示优化 */
+            #currentIp {
+                font-size: 0.9em;
+                opacity: 0.9;
+                background: rgba(255, 255, 255, 0.2);
+                padding: 4px 10px;
+                border-radius: 10px;
+            }
+        }
+
+        /* 超小屏幕优化 */
+        @media (max-width: 360px) {
+            .mode-item {
+                margin: 6px 10px;
+                padding: 10px 14px;
+            }
+
+            .chat-item {
+                margin: 6px 10px;
+                padding: 10px;
+            }
+
+            .action-btn {
+                margin: 10px;
+                padding: 12px;
+            }
+
+            .chat-item-avatar {
+                width: 35px;
+                height: 35px;
+            }
+        }
+
+        /* 添加触摸反馈 */
+        @media (hover: none) {
+            .mode-item:active,
+            .chat-item:active,
+            .action-btn:active {
+                transform: scale(0.98);
+            }
+        }
+
+        /* 添加侧边栏遮罩 */
+        .sidebar-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 999;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .sidebar-overlay.visible {
+            display: block;
+            opacity: 1;
+        }
+
+        /* 优化消息时间显示 */
+        .message-time {
+            font-size: 0.9em;
+            color: rgba(0, 0, 0, 0.5);
+        }
+
+        .message.sent .message-time {
+            color: rgba(0, 0, 0, 0.4);
+        }
+
+        /* 移动端侧边栏优化 */
+        @media (max-width: 768px) {
+            /* 侧边栏基础样式 */
+            .sidebar {
+                width: 100%;
+                max-width: 100%;
+                height: 100vh;
+                position: fixed;
+                left: -100%;
+                top: 0;
+                background: white;
+                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                z-index: 1000;
+                display: flex;
+                flex-direction: column;
+                padding-top: env(safe-area-inset-top);
+                padding-bottom: env(safe-area-inset-bottom);
+            }
+
+            .sidebar.visible {
+                transform: translateX(100%);
+            }
+
+            /* 侧边栏头部 */
+            .sidebar-header {
+                padding: 16px;
+                background: var(--primary-color);
+                color: white;
+                font-size: 1.1em;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                min-height: 60px;
+            }
+
+            /* 聊天模式选择器 */
+            .chat-modes {
+                padding: 12px;
+            }
+
+            .mode-item {
+                padding: 15px;
+                margin-bottom: 6px;
+                border-radius: 12px;
+                font-size: 1em;
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                touch-action: manipulation;
+            }
+
+            .mode-item i {
+                font-size: 1.2em;
+                width: 24px;
+                text-align: center;
+            }
+
+            /* 聊天列表 */
+            .chat-list {
+                flex: 1;
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .chat-list-header {
+                padding: 12px 16px;
+                font-size: 0.95em;
+                font-weight: 500;
+                background: #f8f9fa;
+                border-bottom: 1px solid #eee;
+            }
+
+            .chat-list-content {
+                flex: 1;
+                overflow-y: auto;
+                -webkit-overflow-scrolling: touch;
+                padding: 8px;
+            }
+
+            /* 聊天项样式 */
+            .chat-item {
+                padding: 12px;
+                margin-bottom: 4px;
+                border-radius: 12px;
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                position: relative;
+                touch-action: manipulation;
+            }
+
+            .chat-item-avatar {
+                width: 45px;
+                height: 45px;
+                border-radius: 50%;
+                flex-shrink: 0;
+            }
+
+            .chat-item-info {
+                flex: 1;
+                min-width: 0;
+            }
+
+            .chat-item-name {
+                font-size: 0.95em;
+                margin-bottom: 4px;
+                font-weight: 500;
+            }
+
+            .chat-item-last-msg {
+                font-size: 0.85em;
+                color: #666;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            /* 返回按钮 */
+            .action-btn {
+                margin: 12px;
+                padding: 14px;
+                border-radius: 12px;
+                font-size: 0.95em;
+            }
+
+            /* 遮罩层优化 */
+            .sidebar-overlay {
+                background: rgba(0, 0, 0, 0.4);
+                backdrop-filter: blur(2px);
+            }
+
+            /* 未读消息提示 */
+            .chat-item-badge {
+                width: 20px;
+                height: 20px;
+                font-size: 0.8em;
+                right: 8px;
+                top: 50%;
+                transform: translateY(-50%) scale(0);
+            }
+
+            .chat-item-badge.show {
+                transform: translateY(-50%) scale(1);
+            }
+
+            /* 添加滑动手势支持 */
+            .sidebar {
+                touch-action: pan-y pinch-zoom;
+            }
+
+            /* 优化触摸反馈 */
+            .mode-item:active,
+            .chat-item:active {
+                background: rgba(74, 144, 226, 0.1);
+            }
+
+            /* 安全区域适配 */
+            @supports (padding: max(0px)) {
+                .sidebar {
+                    padding-top: max(16px, env(safe-area-inset-top));
+                    padding-bottom: max(16px, env(safe-area-inset-bottom));
+                    padding-left: max(16px, env(safe-area-inset-left));
+                    padding-right: max(16px, env(safe-area-inset-right));
+                }
+            }
+        }
+
+        /* 超小屏幕优化 */
+        @media (max-width: 360px) {
+            .mode-item {
+                padding: 12px;
+                font-size: 0.9em;
+            }
+
+            .chat-item-avatar {
+                width: 40px;
+                height: 40px;
+            }
+
+            .chat-item-name {
+                font-size: 0.9em;
+            }
+
+            .chat-item-last-msg {
+                font-size: 0.8em;
+            }
+        }
+
+        .file-message {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px;
+            background: rgba(74, 144, 226, 0.05);
+            border-radius: 12px;
+            margin: 8px 0;
+            border: 1px solid rgba(74, 144, 226, 0.1);
+            transition: all 0.3s ease;
+        }
+
+        .file-message:hover {
+            background: rgba(74, 144, 226, 0.08);
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .file-icon-wrapper {
+            width: 48px;
+            height: 48px;
+            border-radius: 8px;
+            background: var(--primary-color);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+
+        .file-icon-wrapper i {
+            font-size: 24px;
+            color: white;
+        }
+
+        .file-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .file-info .file-name {
+            font-weight: 500;
+            font-size: 0.95em;
+            margin-bottom: 4px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: #333;
+        }
+
+        .file-details {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+        }
+
+        .file-details .file-size {
+            font-size: 0.8em;
+            color: #666;
+        }
+
+        .file-details .file-type {
+            font-size: 0.75em;
+            background: var(--primary-color);
+            color: white;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-weight: 500;
+        }
+
+        .image-message {
+            position: relative;
+            max-width: 350px;
+            border-radius: 12px;
+            overflow: hidden;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .image-message:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+        }
+
+        .image-message img {
+            width: 100%;
+            height: auto;
+            display: block;
+            transition: transform 0.3s ease;
+        }
+
+        .image-message:hover img {
+            transform: scale(1.02);
+        }
+
+        /* 图片悬停下载按钮 */
+        .image-download-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.4);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            backdrop-filter: blur(2px);
+            pointer-events: none;
+        }
+
+        .image-message:hover .image-download-overlay {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        /* 移动端图片点击状态 */
+        .image-message.mobile-clicked .image-download-overlay {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        .image-download-btn {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.9);
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        }
+
+        .image-download-btn:hover {
+            background: white;
+            transform: scale(1.1);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+        }
+
+        .image-download-btn i {
+            font-size: 24px;
+            color: var(--primary-color);
+        }
+
+        /* 图片信息显示 */
+        .image-info-overlay {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+            color: white;
+            padding: 12px;
+            transform: translateY(100%);
+            transition: transform 0.3s ease;
+        }
+
+        .image-message:hover .image-info-overlay,
+        .image-message.mobile-clicked .image-info-overlay {
+            transform: translateY(0);
+        }
+
+        .image-info-overlay .file-name {
+            font-size: 0.9em;
+            margin-bottom: 2px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .image-info-overlay .file-size {
+            font-size: 0.8em;
+            opacity: 0.8;
+        }
+
+        .drag-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(255, 255, 255, 0.9);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            z-index: 1000;
+        }
+
+        .drag-overlay.active {
+            display: flex;
+        }
+
+        .drag-overlay i {
+            font-size: 48px;
+            color: var(--primary-color);
+            margin-bottom: 16px;
+        }
+
+        .drag-overlay h3 {
+            color: var(--primary-color);
+            font-size: 1.2em;
+        }
+
+        /* 优化复制按钮样式 */
+        .copy-btn {
+            position: absolute;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: white;
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: all 0.3s ease;
+            z-index: 2;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        /* 发送消息的复制按钮位置 */
+        .message-container.sent .copy-btn {
+            left: -40px; /* 调整到消息外侧 */
+        }
+
+        /* 接收消息的复制按钮位置 */
+        .message-container.received .copy-btn {
+            right: -40px; /* 调整到外 */
+        }
+
+        .message-container:hover .copy-btn {
+            opacity: 1;
+        }
+
+        .copy-btn:hover {
+            background: white;
+            transform: translateY(-50%) scale(1.1);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+        }
+
+        .copy-btn i {
+            color: var(--primary-color);
+            font-size: 1.1em;
+        }
+
+        /* 移动端适配 */
+        @media (max-width: 768px) {
+            .copy-btn {
+                opacity: 0.8; /* 移动端保持半透明可见 */
+                width: 28px;
+                height: 28px;
+            }
+
+            .message-container.sent .copy-btn {
+                left: -34px;
+            }
+
+            .message-container.received .copy-btn {
+                right: -34px;
+            }
+
+            /* 增加按钮点击区域 */
+            .copy-btn::before {
+                content: '';
+                position: absolute;
+                top: -8px;
+                right: -8px;
+                bottom: -8px;
+                left: -8px;
+            }
+        }
+
+        /* 优化复制成功提示 */
+        .copy-toast {
+            position: fixed;
+            bottom: 80px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 10px 20px;
+            border-radius: 20px;
+            font-size: 14px;
+            z-index: 1000;
+            opacity: 0;
+            transition: all 0.3s ease;
+            pointer-events: none;
+        }
+
+        .copy-toast.show {
+            opacity: 1;
+            transform: translate(-50%, -10px);
+        }
+
+        /* 在现有的 .copy-btn 样式基础上添加 */
+        .copy-btn.download-btn {
+            background: var(--primary-color);
+            color: white;
+        }
+
+        .copy-btn.download-btn:hover {
+            background: var(--secondary-color);
+            color: white;
+            transform: translateY(-50%) scale(1.1);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+        }
+
+        .copy-btn.download-btn i {
+            color: white;
+        }
+
+        /* 添加上传按钮样式 */
+        .upload-btn {
+            background: none;
+            border: none;
+            color: var(--primary-color);
+            cursor: pointer;
+            padding: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+
+        .upload-btn:hover {
+            transform: scale(1.1);
+        }
+
+        .upload-btn i {
+            font-size: 1.5em;
+        }
+
+        /* 隐藏文件输入框 */
+        .file-input {
+            display: none;
+        }
+
+        /* 添加系统消息样式 */
+        .system-message {
+            display: flex;
+            justify-content: center;
+            margin: 15px 0;
+        }
+
+        .system-content {
+            background: rgba(74, 144, 226, 0.1);
+            color: var(--primary-color);
+            padding: 8px 16px;
+            border-radius: 15px;
+            font-size: 0.9em;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .system-content i {
+            font-size: 1em;
+        }
+
+        /* 历史消息样式 */
+        .history-message {
+            opacity: 1;
+        }
+
+        /* 历史消息中的图片不变灰 */
+        .history-message .image-message,
+        .history-message .media-message {
+            opacity: 1;
+        }
+
+        .history-badge {
+            background: rgba(255, 152, 0, 0.2);
+            color: #ff9800;
+            padding: 2px 6px;
+            border-radius: 8px;
+            font-size: 0.7em;
+            margin-left: 6px;
+            font-weight: 500;
+        }
+
+        .history-message .message {
+            border-left: 3px solid rgba(255, 152, 0, 0.3);
+            padding-left: 15px;
+        }
+
+        /* 但是文本消息保持历史样式 */
+        .history-message .message-content {
+            opacity: 0.8;
+        }
+
+        /* 优化历史消息在移动端的显示 */
+        @media (max-width: 768px) {
+            .history-badge {
+                font-size: 0.65em;
+                padding: 1px 4px;
+            }
+            
+            .system-content {
+                font-size: 0.85em;
+                padding: 6px 12px;
+            }
+        }
+
+        /* 媒体消息通用样式 */
+        .media-message {
+            max-width: 400px;
+            border-radius: 12px;
+            overflow: hidden;
+            background: rgba(255, 255, 255, 0.95);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            margin: 8px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .media-message:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+        }
+
+        /* 音频消息特殊样式 - 更宽的容器 */
+        .audio-message {
+            max-width: 450px;
+            min-width: 350px;
+        }
+
+        .media-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px;
+            background: rgba(74, 144, 226, 0.05);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+            position: relative;
+        }
+
+        .media-header i {
+            font-size: 24px;
+            color: var(--primary-color);
+            width: 32px;
+            text-align: center;
+        }
+
+        .media-title {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .media-title .file-name {
+            font-weight: 500;
+            font-size: 0.95em;
+            margin-bottom: 2px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .media-title .file-size {
+            font-size: 0.8em;
+            color: #666;
+        }
+
+        /* 媒体播放器样式 */
+        .media-player {
+            width: 100%;
+            outline: none;
+            background: #000;
+        }
+
+        .audio-message .media-player {
+            height: 60px;
+            width: 100%;
+            background: #f8f9fa;
+        }
+
+        .video-message .media-player {
+            max-height: 300px;
+            background: #000;
+        }
+
+        /* 音频消息悬停下载按钮 */
+        .audio-download-overlay {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            width: 80px;
+            background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.1));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+
+        .audio-message:hover .audio-download-overlay {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        .audio-download-btn {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: var(--primary-color);
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
+        }
+
+        .audio-download-btn:hover {
+            background: var(--secondary-color);
+            transform: scale(1.1);
+            box-shadow: 0 4px 16px rgba(74, 144, 226, 0.4);
+        }
+
+        .audio-download-btn i {
+            font-size: 20px;
+            color: white;
+        }
+
+        /* 视频消息悬停下载按钮 */
+        .video-download-overlay {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            z-index: 10;
+        }
+
+        .video-message:hover .video-download-overlay {
+            opacity: 1;
+        }
+
+        .video-download-btn {
+            width: 44px;
+            height: 44px;
+            border-radius: 50%;
+            background: rgba(0, 0, 0, 0.7);
+            border: 2px solid white;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+
+        .video-download-btn:hover {
+            background: rgba(0, 0, 0, 0.9);
+            transform: scale(1.1);
+        }
+
+        .video-download-btn i {
+            font-size: 18px;
+            color: white;
+        }
+
+        /* 响应式设计 */
+        @media (max-width: 768px) {
+            .media-message {
+                max-width: 100%;
+            }
+
+            /* 移动端图片消息优化 */
+            .image-message {
+                max-width: 100%;
+                margin: 12px 0;
+                border-radius: 12px;
+                overflow: hidden;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            }
+
+            .image-message img {
+                width: 100%;
+                height: auto;
+                display: block;
+            }
+
+            /* 移动端默认隐藏下载按钮，点击后才显示 */
+            .image-download-overlay {
+                opacity: 0;
+                pointer-events: none;
+                background: rgba(0, 0, 0, 0.6);
+            }
+
+            /* 移动端点击状态显示下载按钮 */
+            .image-message.mobile-clicked .image-download-overlay {
+                opacity: 1;
+                pointer-events: auto;
+            }
+
+            .image-download-btn {
+                width: 50px;
+                height: 50px;
+                background: rgba(255, 255, 255, 0.95);
+            }
+
+            .image-download-btn i {
+                font-size: 20px;
+            }
+
+            /* 移动端音频消息优化 */
+            .audio-message {
+                max-width: 100%;
+                min-width: 300px;
+                margin: 12px 0;
+            }
+
+            /* 移动端音频下载按钮始终可见 */
+            .audio-download-overlay {
+                opacity: 1;
+                pointer-events: auto;
+                width: 70px;
+                background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.08));
+            }
+
+            .audio-download-btn {
+                width: 44px;
+                height: 44px;
+            }
+
+            .audio-download-btn i {
+                font-size: 18px;
+            }
+
+            /* 移动端音频播放器优化 */
+            .audio-message .media-player {
+                height: 70px;
+                padding: 8px;
+                background: #f8f9fa;
+                border-radius: 0 0 12px 12px;
+            }
+
+            /* 移动端媒体头部优化 */
+            .audio-message .media-header {
+                padding: 14px 16px;
+                background: rgba(74, 144, 226, 0.08);
+            }
+
+            .audio-message .media-header i {
+                font-size: 26px;
+                width: 36px;
+                color: var(--primary-color);
+            }
+
+            .audio-message .media-title .file-name {
+                font-size: 1em;
+                font-weight: 600;
+                margin-bottom: 4px;
+            }
+
+            .audio-message .media-title .file-size {
+                font-size: 0.85em;
+                color: #666;
+                font-weight: 500;
+            }
+
+            /* 移动端视频下载按钮 */
+            .video-download-overlay {
+                opacity: 1;
+                top: 12px;
+                right: 12px;
+            }
+
+            .video-download-btn {
+                width: 40px;
+                height: 40px;
+                background: rgba(0, 0, 0, 0.8);
+                border: 2px solid rgba(255, 255, 255, 0.9);
+            }
+
+            .video-download-btn i {
+                font-size: 16px;
+            }
+
+            .video-message .media-player {
+                max-height: 250px;
+            }
+
+            .media-header {
+                padding: 10px;
+            }
+
+            .file-message {
+                padding: 10px;
+            }
+
+            .file-icon-wrapper {
+                width: 40px;
+                height: 40px;
+            }
+
+            .file-icon-wrapper i {
+                font-size: 20px;
+            }
+
+            /* 移动端图片信息优化 */
+            .image-info-overlay {
+                transform: translateY(100%);
+                background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+                padding: 8px 12px;
+            }
+
+            .image-info-overlay .file-name {
+                font-size: 0.85em;
+            }
+
+            .image-info-overlay .file-size {
+                font-size: 0.75em;
+            }
+
+            /* 移动端图片点击提示 */
+            .image-click-hint {
+                position: absolute;
+                top: 8px;
+                left: 8px;
+                background: rgba(0, 0, 0, 0.7);
+                color: white;
+                padding: 4px 8px;
+                border-radius: 12px;
+                font-size: 0.75em;
+                opacity: 0.9;
+                transition: opacity 0.3s ease;
+                pointer-events: none;
+                font-weight: 500;
+                backdrop-filter: blur(4px);
+            }
+
+            .image-message.mobile-clicked .image-click-hint {
+                opacity: 0;
+                pointer-events: none;
+            }
+
+            /* 移动端触摸优化 */
+            .image-download-btn:active,
+            .audio-download-btn:active,
+            .video-download-btn:active {
+                transform: scale(0.95);
+            }
+
+            /* 移动端文件消息优化 */
+            .file-message {
+                padding: 10px;
+                margin: 8px 0;
+            }
+
+            .file-icon-wrapper {
+                width: 40px;
+                height: 40px;
+            }
+
+            .file-icon-wrapper i {
+                font-size: 20px;
+            }
+
+            .file-info .file-name {
+                font-size: 0.9em;
+            }
+
+            .file-details .file-size {
+                font-size: 0.75em;
+            }
+
+            .file-details .file-type {
+                font-size: 0.7em;
+                padding: 1px 4px;
+            }
+        }
+
+        /* 播放器控件优化 */
+        .media-player::-webkit-media-controls-panel {
+            background-color: rgba(255, 255, 255, 0.9);
+        }
+
+        .audio-message .media-player::-webkit-media-controls-panel {
+            background-color: #f8f9fa;
+        }
+
+        /* 音频播放器进度条优化 */
+        .audio-message .media-player::-webkit-media-controls-timeline {
+            background-color: rgba(74, 144, 226, 0.2);
+            border-radius: 2px;
+            margin: 0 8px;
+        }
+
+        .audio-message .media-player::-webkit-media-controls-current-time-display,
+        .audio-message .media-player::-webkit-media-controls-time-remaining-display {
+            color: var(--primary-color);
+            font-size: 12px;
+        }
+
+        /* 音频播放按钮优化 */
+        .audio-message .media-player::-webkit-media-controls-play-button {
+            background-color: var(--primary-color);
+            border-radius: 50%;
+        }
+
+        /* 音频消息容器优化 */
+        .audio-message {
+            transition: all 0.3s ease;
+        }
+
+        .audio-message:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        /* 加载状态 */
+        .media-loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            color: #666;
+        }
+
+        .media-loading i {
+            animation: spin 1s linear infinite;
+            margin-right: 8px;
+        }
+
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+
+        /* 超小屏幕优化 */
+        @media (max-width: 480px) {
+            .audio-message {
+                min-width: 100px;
+                margin: 6px 0;
+            }
+
+            .audio-message .media-header {
+                padding: 12px 14px;
+            }
+
+            .audio-message .media-header i {
+                font-size: 24px;
+                width: 32px;
+            }
+
+            .audio-message .media-title .file-name {
+                font-size: 0.95em;
+                margin-bottom: 3px;
+            }
+
+            .audio-message .media-title .file-size {
+                font-size: 0.8em;
+            }
+
+            .audio-download-overlay {
+                width: 60px;
+            }
+
+            .audio-download-btn {
+                width: 40px;
+                height: 40px;
+            }
+
+            .audio-download-btn i {
+                font-size: 16px;
+            }
+
+            .audio-message .media-player {
+                height: 65px;
+                padding: 6px;
+            }
+
+            .image-download-btn {
+                width: 44px;
+                height: 44px;
+            }
+
+            .image-download-btn i {
+                font-size: 18px;
+            }
+
+            .video-download-btn {
+                width: 36px;
+                height: 36px;
+            }
+
+            .video-download-btn i {
+                font-size: 14px;
+            }
+
+            /* 超小屏幕播放器控件 */
+            .audio-message .media-player::-webkit-media-controls-play-button {
+                width: 42px;
+                height: 42px;
+                margin: 0 8px 0 6px;
+            }
+
+            .audio-message .media-player::-webkit-media-controls-timeline {
+                min-width: 100px;
+                margin: 0 6px;
+            }
+
+            .audio-message .media-player::-webkit-media-controls-current-time-display,
+            .audio-message .media-player::-webkit-media-controls-time-remaining-display {
+                font-size: 13px;
+                margin: 0 3px;
+            }
+
+            .audio-message .media-player::-webkit-media-controls-volume-slider {
+                width: 50px;
+                margin: 0 6px;
+            }
+
+            .audio-message .media-player::-webkit-media-controls-mute-button {
+                width: 28px;
+                height: 28px;
+                margin: 0 3px;
+            }
+
+            /* 超小屏幕文件消息优化 */
+            .file-message {
+                padding: 8px;
+                gap: 8px;
+            }
+
+            .file-icon-wrapper {
+                width: 36px;
+                height: 36px;
+            }
+
+            .file-icon-wrapper i {
+                font-size: 18px;
+            }
+
+            .file-info .file-name {
+                font-size: 0.85em;
+            }
+
+            .file-details .file-size {
+                font-size: 0.7em;
+            }
+
+            .file-details .file-type {
+                font-size: 0.65em;
+                padding: 1px 3px;
+            }
+        }
+
+        /* 管理员设置样式 */
+        .admin-settings {
+            padding: 15px;
+            border-bottom: 1px solid #eee;
+            background: #f8f9fa;
+        }
+
+        .admin-settings-header {
+            font-size: 0.9em;
+            font-weight: 600;
+            color: #666;
+            margin-bottom: 10px;
+            letter-spacing: 0.5px;
+        }
+
+        .admin-input-container {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+
+        .admin-ip-input {
+            flex: 1;
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 0.9em;
+            outline: none;
+            transition: border-color 0.3s ease;
+        }
+
+        .admin-ip-input:focus {
+            border-color: var(--primary-color);
+        }
+
+        .admin-set-btn {
+            width: 36px;
+            height: 36px;
+            border: none;
+            border-radius: 6px;
+            background: var(--primary-color);
+            color: white;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+
+        .admin-set-btn:hover {
+            background: var(--secondary-color);
+            transform: scale(1.05);
+        }
+
+        .admin-set-btn i {
+            font-size: 1.1em;
+        }
+
+        .admin-status {
+            padding: 6px 10px;
+            border-radius: 15px;
+            background: rgba(0, 0, 0, 0.05);
+            text-align: center;
+        }
+
+        .admin-status-text {
+            font-size: 0.8em;
+            color: #666;
+            font-weight: 500;
+        }
+
+        .admin-status.admin-set .admin-status-text {
+            color: #28a745;
+        }
+
+        .admin-status.is-admin .admin-status-text {
+            color: #dc3545;
+            font-weight: 600;
+        }
+
+        /* 管理员功能样式 */
+        .admin-functions {
+            padding: 15px;
+            border-bottom: 1px solid #eee;
+            background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
+        }
+
+        .admin-functions-header {
+            font-size: 0.9em;
+            font-weight: 600;
+            color: #dc3545;
+            margin-bottom: 10px;
+            letter-spacing: 0.5px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .admin-functions-header::before {
+            content: "👑";
+            font-size: 1.2em;
+        }
+
+        .admin-function-btn {
+            width: 100%;
+            padding: 12px 15px;
+            border: none;
+            border-radius: 8px;
+            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+            color: white;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 0.9em;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            margin-bottom: 8px;
+        }
+
+        .admin-function-btn:hover {
+            background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
+        }
+
+        .admin-function-btn:active {
+            transform: translateY(0);
+        }
+
+        .admin-function-btn i {
+            font-size: 1.2em;
+        }
+
+        .clear-all-btn {
+            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+        }
+
+        .clear-all-btn:hover {
+            background: linear-gradient(135deg, #bd2130 0%, #a71e2a 100%);
+        }
+
+        /* 移动端管理员样式优化 */
+        @media (max-width: 768px) {
+            .admin-settings {
+                margin: 0 12px;
+                border-radius: 12px;
+                background: #f8f9fa;
+            }
+
+            .admin-input-container {
+                gap: 10px;
+            }
+
+            .admin-ip-input {
+                padding: 10px 14px;
+                font-size: 16px; /* 防止iOS缩放 */
+            }
+
+            .admin-set-btn {
+                width: 40px;
+                height: 40px;
+            }
+
+            .admin-functions {
+                margin: 0 12px;
+                border-radius: 12px;
+                background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
+            }
+
+            .admin-function-btn {
+                padding: 14px 16px;
+                font-size: 1em;
+                border-radius: 10px;
+            }
+
+            .admin-function-btn:active {
+                transform: scale(0.98);
+            }
+        }
+
+        /* 超小屏幕优化 */
+        @media (max-width: 360px) {
+            .mode-item {
+                padding: 12px;
+                font-size: 0.9em;
+            }
+
+            .chat-item-avatar {
+                width: 40px;
+                height: 40px;
+            }
+
+            .chat-item-name {
+                font-size: 0.9em;
+            }
+
+            .chat-item-last-msg {
+                font-size: 0.8em;
+            }
+        }
+
+        .file-message {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px;
+            background: rgba(74, 144, 226, 0.05);
+            border-radius: 12px;
+            margin: 8px 0;
+            border: 1px solid rgba(74, 144, 226, 0.1);
+            transition: all 0.3s ease;
+        }
+
+        .file-message:hover {
+            background: rgba(74, 144, 226, 0.08);
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .file-icon-wrapper {
+            width: 48px;
+            height: 48px;
+            border-radius: 8px;
+            background: var(--primary-color);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+
+        .file-icon-wrapper i {
+            font-size: 24px;
+            color: white;
+        }
+
+        .file-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .file-info .file-name {
+            font-weight: 500;
+            font-size: 0.95em;
+            margin-bottom: 4px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: #333;
+        }
+
+        .file-details {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+        }
+
+        .file-details .file-size {
+            font-size: 0.8em;
+            color: #666;
+        }
+
+        .file-details .file-type {
+            font-size: 0.75em;
+            background: var(--primary-color);
+            color: white;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-weight: 500;
+        }
+
+        .image-message {
+            position: relative;
+            max-width: 350px;
+            border-radius: 12px;
+            overflow: hidden;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .image-message:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+        }
+
+        .image-message img {
+            width: 100%;
+            height: auto;
+            display: block;
+            transition: transform 0.3s ease;
+        }
+
+        .image-message:hover img {
+            transform: scale(1.02);
+        }
+
+        /* 图片悬停下载按钮 */
+        .image-download-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.4);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            backdrop-filter: blur(2px);
+            pointer-events: none;
+        }
+
+        .image-message:hover .image-download-overlay {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        /* 移动端图片点击状态 */
+        .image-message.mobile-clicked .image-download-overlay {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        .image-download-btn {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.9);
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        }
+
+        .image-download-btn:hover {
+            background: white;
+            transform: scale(1.1);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+        }
+
+        .image-download-btn i {
+            font-size: 24px;
+            color: var(--primary-color);
+        }
+
+        /* 图片信息显示 */
+        .image-info-overlay {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+            color: white;
+            padding: 12px;
+            transform: translateY(100%);
+            transition: transform 0.3s ease;
+        }
+
+        .image-message:hover .image-info-overlay,
+        .image-message.mobile-clicked .image-info-overlay {
+            transform: translateY(0);
+        }
+
+        .image-info-overlay .file-name {
+            font-size: 0.9em;
+            margin-bottom: 2px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .image-info-overlay .file-size {
+            font-size: 0.8em;
+            opacity: 0.8;
+        }
+
+        .drag-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(255, 255, 255, 0.9);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            z-index: 1000;
+        }
+
+        .drag-overlay.active {
+            display: flex;
+        }
+
+        .drag-overlay i {
+            font-size: 48px;
+            color: var(--primary-color);
+            margin-bottom: 16px;
+        }
+
+        .drag-overlay h3 {
+            color: var(--primary-color);
+            font-size: 1.2em;
+        }
+
+        /* 优化复制按钮样式 */
+        .copy-btn {
+            position: absolute;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: white;
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: all 0.3s ease;
+            z-index: 2;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        /* 发送消息的复制按钮位置 */
+        .message-container.sent .copy-btn {
+            left: -40px; /* 调整到消息外侧 */
+        }
+
+        /* 接收消息的复制按钮位置 */
+        .message-container.received .copy-btn {
+            right: -40px; /* 调整到外 */
+        }
+
+        .message-container:hover .copy-btn {
+            opacity: 1;
+        }
+
+        .copy-btn:hover {
+            background: white;
+            transform: translateY(-50%) scale(1.1);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+        }
+
+        .copy-btn i {
+            color: var(--primary-color);
+            font-size: 1.1em;
+        }
+
+        /* 移动端适配 */
+        @media (max-width: 768px) {
+            .copy-btn {
+                opacity: 0.8; /* 移动端保持半透明可见 */
+                width: 28px;
+                height: 28px;
+            }
+
+            .message-container.sent .copy-btn {
+                left: -34px;
+            }
+
+            .message-container.received .copy-btn {
+                right: -34px;
+            }
+
+            /* 增加按钮点击区域 */
+            .copy-btn::before {
+                content: '';
+                position: absolute;
+                top: -8px;
+                right: -8px;
+                bottom: -8px;
+                left: -8px;
+            }
+        }
+
+        /* 优化复制成功提示 */
+        .copy-toast {
+            position: fixed;
+            bottom: 80px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 10px 20px;
+            border-radius: 20px;
+            font-size: 14px;
+            z-index: 1000;
+            opacity: 0;
+            transition: all 0.3s ease;
+            pointer-events: none;
+        }
+
+        .copy-toast.show {
+            opacity: 1;
+            transform: translate(-50%, -10px);
+        }
+
+        /* 在现有的 .copy-btn 样式基础上添加 */
+        .copy-btn.download-btn {
+            background: var(--primary-color);
+            color: white;
+        }
+
+        .copy-btn.download-btn:hover {
+            background: var(--secondary-color);
+            color: white;
+            transform: translateY(-50%) scale(1.1);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+        }
+
+        .copy-btn.download-btn i {
+            color: white;
+        }
+
+        /* 添加上传按钮样式 */
+        .upload-btn {
+            background: none;
+            border: none;
+            color: var(--primary-color);
+            cursor: pointer;
+            padding: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+
+        .upload-btn:hover {
+            transform: scale(1.1);
+        }
+
+        .upload-btn i {
+            font-size: 1.5em;
+        }
+
+        /* 隐藏文件输入框 */
+        .file-input {
+            display: none;
+        }
+
+        /* 添加系统消息样式 */
+        .system-message {
+            display: flex;
+            justify-content: center;
+            margin: 15px 0;
+        }
+
+        .system-content {
+            background: rgba(74, 144, 226, 0.1);
+            color: var(--primary-color);
+            padding: 8px 16px;
+            border-radius: 15px;
+            font-size: 0.9em;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .system-content i {
+            font-size: 1em;
+        }
+
+        /* 历史消息样式 */
+        .history-message {
+            opacity: 1;
+        }
+
+        /* 历史消息中的图片不变灰 */
+        .history-message .image-message,
+        .history-message .media-message {
+            opacity: 1;
+        }
+
+        .history-badge {
+            background: rgba(255, 152, 0, 0.2);
+            color: #ff9800;
+            padding: 2px 6px;
+            border-radius: 8px;
+            font-size: 0.7em;
+            margin-left: 6px;
+            font-weight: 500;
+        }
+
+        .history-message .message {
+            border-left: 3px solid rgba(255, 152, 0, 0.3);
+            padding-left: 15px;
+        }
+
+        /* 但是文本消息保持历史样式 */
+        .history-message .message-content {
+            opacity: 0.8;
+        }
+
+        /* 优化历史消息在移动端的显示 */
+        @media (max-width: 768px) {
+            .history-badge {
+                font-size: 0.65em;
+                padding: 1px 4px;
+            }
+            
+            .system-content {
+                font-size: 0.85em;
+                padding: 6px 12px;
+            }
+        }
+
+        /* 媒体消息通用样式 */
+        .media-message {
+            max-width: 400px;
+            border-radius: 12px;
+            overflow: hidden;
+            background: rgba(255, 255, 255, 0.95);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            margin: 8px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .media-message:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+        }
+
+        /* 音频消息特殊样式 - 更宽的容器 */
+        .audio-message {
+            max-width: 450px;
+            min-width: 350px;
+        }
+
+        .media-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px;
+            background: rgba(74, 144, 226, 0.05);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+            position: relative;
+        }
+
+        .media-header i {
+            font-size: 24px;
+            color: var(--primary-color);
+            width: 32px;
+            text-align: center;
+        }
+
+        .media-title {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .media-title .file-name {
+            font-weight: 500;
+            font-size: 0.95em;
+            margin-bottom: 2px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .media-title .file-size {
+            font-size: 0.8em;
+            color: #666;
+        }
+
+        /* 媒体播放器样式 */
+        .media-player {
+            width: 100%;
+            outline: none;
+            background: #000;
+        }
+
+        .audio-message .media-player {
+            height: 60px;
+            width: 100%;
+            background: #f8f9fa;
+        }
+
+        .video-message .media-player {
+            max-height: 300px;
+            background: #000;
+        }
+
+        /* 音频消息悬停下载按钮 */
+        .audio-download-overlay {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            width: 80px;
+            background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.1));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+
+        .audio-message:hover .audio-download-overlay {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        .audio-download-btn {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: var(--primary-color);
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
+        }
+
+        .audio-download-btn:hover {
+            background: var(--secondary-color);
+            transform: scale(1.1);
+            box-shadow: 0 4px 16px rgba(74, 144, 226, 0.4);
+        }
+
+        .audio-download-btn i {
+            font-size: 20px;
+            color: white;
+        }
+
+        /* 视频消息悬停下载按钮 */
+        .video-download-overlay {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            z-index: 10;
+        }
+
+        .video-message:hover .video-download-overlay {
+            opacity: 1;
+        }
+
+        .video-download-btn {
+            width: 44px;
+            height: 44px;
+            border-radius: 50%;
+            background: rgba(0, 0, 0, 0.7);
+            border: 2px solid white;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+
+        .video-download-btn:hover {
+            background: rgba(0, 0, 0, 0.9);
+            transform: scale(1.1);
+        }
+
+        .video-download-btn i {
+            font-size: 18px;
+            color: white;
+        }
+
+        /* 响应式设计 */
+        @media (max-width: 768px) {
+            .media-message {
+                max-width: 100%;
+            }
+
+            /* 移动端图片消息优化 */
+            .image-message {
+                max-width: 100%;
+                margin: 12px 0;
+                border-radius: 12px;
+                overflow: hidden;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            }
+
+            .image-message img {
+                width: 100%;
+                height: auto;
+                display: block;
+            }
+
+            /* 移动端默认隐藏下载按钮，点击后才显示 */
+            .image-download-overlay {
+                opacity: 0;
+                pointer-events: none;
+                background: rgba(0, 0, 0, 0.6);
+            }
+
+            /* 移动端点击状态显示下载按钮 */
+            .image-message.mobile-clicked .image-download-overlay {
+                opacity: 1;
+                pointer-events: auto;
+            }
+
+            .image-download-btn {
+                width: 50px;
+                height: 50px;
+                background: rgba(255, 255, 255, 0.95);
+            }
+
+            .image-download-btn i {
+                font-size: 20px;
+            }
+
+            /* 移动端音频消息优化 */
+            .audio-message {
+                max-width: 100%;
+                min-width: 300px;
+                margin: 12px 0;
+            }
+
+            /* 移动端音频下载按钮始终可见 */
+            .audio-download-overlay {
+                opacity: 1;
+                pointer-events: auto;
+                width: 70px;
+                background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.08));
+            }
+
+            .audio-download-btn {
+                width: 44px;
+                height: 44px;
+            }
+
+            .audio-download-btn i {
+                font-size: 18px;
+            }
+
+            /* 移动端音频播放器优化 */
+            .audio-message .media-player {
+                height: 70px;
+                padding: 8px;
+                background: #f8f9fa;
+                border-radius: 0 0 12px 12px;
+            }
+
+            /* 移动端媒体头部优化 */
+            .audio-message .media-header {
+                padding: 14px 16px;
+                background: rgba(74, 144, 226, 0.08);
+            }
+
+            .audio-message .media-header i {
+                font-size: 26px;
+                width: 36px;
+                color: var(--primary-color);
+            }
+
+            .audio-message .media-title .file-name {
+                font-size: 1em;
+                font-weight: 600;
+                margin-bottom: 4px;
+            }
+
+            .audio-message .media-title .file-size {
+                font-size: 0.85em;
+                color: #666;
+                font-weight: 500;
+            }
+
+            /* 移动端视频下载按钮 */
+            .video-download-overlay {
+                opacity: 1;
+                top: 12px;
+                right: 12px;
+            }
+
+            .video-download-btn {
+                width: 40px;
+                height: 40px;
+                background: rgba(0, 0, 0, 0.8);
+                border: 2px solid rgba(255, 255, 255, 0.9);
+            }
+
+            .video-download-btn i {
+                font-size: 16px;
+            }
+
+            .video-message .media-player {
+                max-height: 250px;
+            }
+
+            .media-header {
+                padding: 10px;
+            }
+
+            .file-message {
+                padding: 10px;
+            }
+
+            .file-icon-wrapper {
+                width: 40px;
+                height: 40px;
+            }
+
+            .file-icon-wrapper i {
+                font-size: 20px;
+            }
+
+            /* 移动端图片信息优化 */
+            .image-info-overlay {
+                transform: translateY(100%);
+                background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+                padding: 8px 12px;
+            }
+
+            .image-info-overlay .file-name {
+                font-size: 0.85em;
+            }
+
+            .image-info-overlay .file-size {
+                font-size: 0.75em;
+            }
+
+            /* 移动端图片点击提示 */
+            .image-click-hint {
+                position: absolute;
+                top: 8px;
+                left: 8px;
+                background: rgba(0, 0, 0, 0.7);
+                color: white;
+                padding: 4px 8px;
+                border-radius: 12px;
+                font-size: 0.75em;
+                opacity: 0.9;
+                transition: opacity 0.3s ease;
+                pointer-events: none;
+                font-weight: 500;
+                backdrop-filter: blur(4px);
+            }
+
+            .image-message.mobile-clicked .image-click-hint {
+                opacity: 0;
+                pointer-events: none;
+            }
+
+            /* 移动端触摸优化 */
+            .image-download-btn:active,
+            .audio-download-btn:active,
+            .video-download-btn:active {
+                transform: scale(0.95);
+            }
+
+            /* 移动端文件消息优化 */
+            .file-message {
+                padding: 10px;
+                margin: 8px 0;
+            }
+
+            .file-icon-wrapper {
+                width: 40px;
+                height: 40px;
+            }
+
+            .file-icon-wrapper i {
+                font-size: 20px;
+            }
+
+            .file-info .file-name {
+                font-size: 0.9em;
+            }
+
+            .file-details .file-size {
+                font-size: 0.75em;
+            }
+
+            .file-details .file-type {
+                font-size: 0.7em;
+                padding: 1px 4px;
+            }
+        }
+
+        /* 播放器控件优化 */
+        .media-player::-webkit-media-controls-panel {
+            background-color: rgba(255, 255, 255, 0.9);
+        }
+
+        .audio-message .media-player::-webkit-media-controls-panel {
+            background-color: #f8f9fa;
+        }
+
+        /* 音频播放器进度条优化 */
+        .audio-message .media-player::-webkit-media-controls-timeline {
+            background-color: rgba(74, 144, 226, 0.2);
+            border-radius: 2px;
+            margin: 0 8px;
+        }
+
+        .audio-message .media-player::-webkit-media-controls-current-time-display,
+        .audio-message .media-player::-webkit-media-controls-time-remaining-display {
+            color: var(--primary-color);
+            font-size: 12px;
+        }
+
+        /* 音频播放按钮优化 */
+        .audio-message .media-player::-webkit-media-controls-play-button {
+            background-color: var(--primary-color);
+            border-radius: 50%;
+        }
+
+        /* 音频消息容器优化 */
+        .audio-message {
+            transition: all 0.3s ease;
+        }
+
+        .audio-message:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        /* 加载状态 */
+        .media-loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            color: #666;
+        }
+
+        .media-loading i {
+            animation: spin 1s linear infinite;
+            margin-right: 8px;
+        }
+
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+
+        /* 超小屏幕优化 */
+        @media (max-width: 480px) {
+            .audio-message {
+                min-width: 100px;
+                margin: 6px 0;
+            }
+
+            .audio-message .media-header {
+                padding: 12px 14px;
+            }
+
+            .audio-message .media-header i {
+                font-size: 24px;
+                width: 32px;
+            }
+
+            .audio-message .media-title .file-name {
+                font-size: 0.95em;
+                margin-bottom: 3px;
+            }
+
+            .audio-message .media-title .file-size {
+                font-size: 0.8em;
+            }
+
+            .audio-download-overlay {
+                width: 60px;
+            }
+
+            .audio-download-btn {
+                width: 40px;
+                height: 40px;
+            }
+
+            .audio-download-btn i {
+                font-size: 16px;
+            }
+
+            .audio-message .media-player {
+                height: 65px;
+                padding: 6px;
+            }
+
+            .image-download-btn {
+                width: 44px;
+                height: 44px;
+            }
+
+            .image-download-btn i {
+                font-size: 18px;
+            }
+
+            .video-download-btn {
+                width: 36px;
+                height: 36px;
+            }
+
+            .video-download-btn i {
+                font-size: 14px;
+            }
+
+            /* 超小屏幕播放器控件 */
+            .audio-message .media-player::-webkit-media-controls-play-button {
+                width: 42px;
+                height: 42px;
+                margin: 0 8px 0 6px;
+            }
+
+            .audio-message .media-player::-webkit-media-controls-timeline {
+                min-width: 100px;
+                margin: 0 6px;
+            }
+
+            .audio-message .media-player::-webkit-media-controls-current-time-display,
+            .audio-message .media-player::-webkit-media-controls-time-remaining-display {
+                font-size: 13px;
+                margin: 0 3px;
+            }
+
+            .audio-message .media-player::-webkit-media-controls-volume-slider {
+                width: 50px;
+                margin: 0 6px;
+            }
+
+            .audio-message .media-player::-webkit-media-controls-mute-button {
+                width: 28px;
+                height: 28px;
+                margin: 0 3px;
+            }
+
+            /* 超小屏幕文件消息优化 */
+            .file-message {
+                padding: 8px;
+                gap: 8px;
+            }
+
+            .file-icon-wrapper {
+                width: 36px;
+                height: 36px;
+            }
+
+            .file-icon-wrapper i {
+                font-size: 18px;
+            }
+
+            .file-info .file-name {
+                font-size: 0.85em;
+            }
+
+            .file-details .file-size {
+                font-size: 0.7em;
+            }
+
+            .file-details .file-type {
+                font-size: 0.65em;
+                padding: 1px 3px;
+            }
+        }
+
+        /* 管理员设置样式 */
+        .admin-settings {
+            padding: 15px;
+            border-bottom: 1px solid #eee;
+            background: #f8f9fa;
+        }
+
+        .admin-settings-header {
+            font-size: 0.9em;
+            font-weight: 600;
+            color: #666;
+            margin-bottom: 10px;
+            letter-spacing: 0.5px;
+        }
+
+        .admin-input-container {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+
+        .admin-ip-input {
+            flex: 1;
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 0.9em;
+            outline: none;
+            transition: border-color 0.3s ease;
+        }
+
+        .admin-ip-input:focus {
+            border-color: var(--primary-color);
+        }
+
+        .admin-set-btn {
+            width: 36px;
+            height: 36px;
+            border: none;
+            border-radius: 6px;
+            background: var(--primary-color);
+            color: white;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+
+        .admin-set-btn:hover {
+            background: var(--secondary-color);
+            transform: scale(1.05);
+        }
+
+        .admin-set-btn i {
+            font-size: 1.1em;
+        }
+
+        .admin-status {
+            padding: 6px 10px;
+            border-radius: 15px;
+            background: rgba(0, 0, 0, 0.05);
+            text-align: center;
+        }
+
+        .admin-status-text {
+            font-size: 0.8em;
+            color: #666;
+            font-weight: 500;
+        }
+
+        .admin-status.admin-set .admin-status-text {
+            color: #28a745;
+        }
+
+        .admin-status.is-admin .admin-status-text {
+            color: #dc3545;
+            font-weight: 600;
+        }
+
+        /* 管理员功能样式 */
+        .admin-functions {
+            padding: 15px;
+            border-bottom: 1px solid #eee;
+            background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
+        }
+
+        .admin-functions-header {
+            font-size: 0.9em;
+            font-weight: 600;
+            color: #dc3545;
+            margin-bottom: 10px;
+            letter-spacing: 0.5px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .admin-functions-header::before {
+            content: "👑";
+            font-size: 1.2em;
+        }
+
+        .admin-function-btn {
+            width: 100%;
+            padding: 12px 15px;
+            border: none;
+            border-radius: 8px;
+            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+            color: white;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 0.9em;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            margin-bottom: 8px;
+        }
+
+        .admin-function-btn:hover {
+            background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
+        }
+
+        .admin-function-btn:active {
+            transform: translateY(0);
+        }
+
+        .admin-function-btn i {
+            font-size: 1.2em;
+        }
+
+        .clear-all-btn {
+            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+        }
+
+        .clear-all-btn:hover {
+            background: linear-gradient(135deg, #bd2130 0%, #a71e2a 100%);
+        }
+
+        /* 移动端管理员样式优化 */
+        @media (max-width: 768px) {
+            .admin-settings {
+                margin: 0 12px;
+                border-radius: 12px;
+                background: #f8f9fa;
+            }
+
+            .admin-input-container {
+                gap: 10px;
+            }
+
+            .admin-ip-input {
+                padding: 10px 14px;
+                font-size: 16px; /* 防止iOS缩放 */
+            }
+
+            .admin-set-btn {
+                width: 40px;
+                height: 40px;
+            }
+
+            .admin-functions {
+                margin: 0 12px;
+                border-radius: 12px;
+                background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
+            }
+
+            .admin-function-btn {
+                padding: 14px 16px;
+                font-size: 1em;
+                border-radius: 10px;
+            }
+
+            .admin-function-btn:active {
+                transform: scale(0.98);
+            }
+        }
+
+        /* 超小屏幕图片消息优化 */
+        .image-message {
+            margin: 8px 0;
+            border-radius: 10px;
+        }
+
+        .image-download-btn {
+            width: 44px;
+            height: 44px;
+        }
+
+        .image-download-btn i {
+            font-size: 18px;
+        }
+
+        .image-click-hint {
+            font-size: 0.7em;
+            padding: 3px 6px;
+            top: 6px;
+            left: 6px;
+        }
+
+        .image-info-overlay {
+            padding: 6px 10px;
+        }
+
+        .image-info-overlay .file-name {
+            font-size: 0.8em;
+        }
+
+        .image-info-overlay .file-size {
+            font-size: 0.7em;
+        }
+
+        /* 超小屏幕播放器控件 */
+        .audio-message .media-player::-webkit-media-controls-play-button {
+            width: 42px;
+            height: 42px;
+            margin: 0 8px 0 6px;
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <!-- 侧边栏 -->
+        <div class="sidebar" id="sidebar">
+            <button class="sidebar-toggle" onclick="toggleSidebar()">
+                <i class="bi bi-chevron-right"></i>
+            </button>
+            <div class="sidebar-header">
+                <span>聊天模式</span>
+                <span id="currentIp"></span>
+            </div>
+            <div class="sidebar-actions">
+                <a href="/" class="action-btn">
+                    <i class="bi bi-file-earmark-arrow-up"></i>
+                    <span>返回文件传输</span>
+                </a>
+            </div>
+            
+            <!-- 管理员设置区域 -->
+            <div class="admin-settings">
+                <div class="admin-settings-header">管理员信息</div>
+                <div class="admin-status" id="adminStatus">
+                    <span class="admin-status-text">正在检查管理员权限...</span>
+                </div>
+            </div>
+
+            <!-- 管理员功能区域（仅管理员可见） -->
+            <div class="admin-functions" id="adminFunctions" style="display: none;">
+                <div class="admin-functions-header">管理员功能</div>
+                <button class="admin-function-btn clear-all-btn" onclick="clearAllChatHistory()">
+                    <i class="bi bi-trash3"></i>
+                    <span>清空所有历史记录</span>
+                </button>
+            </div>
+
+            <div class="chat-modes">
+                <div class="mode-item active" data-mode="group">
+                    <i class="bi bi-people-fill"></i>
+                    <span>群聊</span>
+                </div>
+                <div class="mode-item" data-mode="private">
+                    <i class="bi bi-person-fill"></i>
+                    <span>私聊</span>
+                </div>
+            </div>
+            <div class="chat-list" id="chatList">
+                <div class="chat-list-header">聊天列表</div>
+                <div class="chat-list-content" id="chatListContent">
+                    <!-- 聊天列表将通过 JavaScript 动态添加 -->
+                </div>
+            </div>
+        </div>
+
+        <!-- 主聊天区域 -->
+        <div class="chat-main">
+            <div class="chat-header">
+                <button class="menu-toggle" onclick="toggleSidebar()">
+                    <div class="menu-icon">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                </button>
+                <div class="chat-title-container">
+                    <img src="/image/logo2.png" alt="Logo" style="height: 24px; width: auto; margin-right: 8px; vertical-align: middle;">
+                    <span class="chat-title" id="chatTitle">内网群聊</span>
+                </div>
+                <div class="connection-status">
+                    <span class="status-indicator" id="connectionIndicator"></span>
+                    <span>在线</span>
+                    <span class="ip-display">
+                        <i class="bi bi-pc-display"></i>
+                        <span id="headerIp"></span>
+                    </span>
+                </div>
+            </div>
+            <div class="chat-messages" id="messageContainer">
+                <div class="drag-overlay" id="dragOverlay">
+                    <i class="bi bi-cloud-upload"></i>
+                    <h3>释放发送文件</h3>
+                </div>
+                <!-- 现有的消息内容 -->
+            </div>
+            <div class="chat-input-container">
+                <input type="file" id="fileInput" class="file-input">
+                <button class="upload-btn" onclick="document.getElementById('fileInput').click()">
+                    <i class="bi bi-paperclip"></i>
+                </button>
+                <input type="text" class="chat-input" id="messageInput" placeholder="输入消息...">
+                <button class="send-btn" onclick="sendMessage()">
+                    <i class="bi bi-send-fill"></i>
+                    <span>发送</span>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 在 body 开始处添加遮罩层 -->
+    <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>
+
+    <script>
+        let ws = null;
+        let currentMode = 'group';
+        let targetIp = '';
+        let myIp = '';
+        let sidebarVisible = false;
+
+        // 添加聊天管理相关变量
+        let chatHistory = {
+            group: [],
+            private: {}
+        };
+        let unreadMessages = {};
+        let currentChatTarget = null;
+        let isLoadingHistory = false; // 添加历史加载状态标识
+
+        // 添加IP名称映射相关变量
+        let ipNameMapping = {};
+        let ipAvatarMapping = {};
+        let availableUsers = [];
+
+        // 管理员相关变量
+        let adminIp = null;
+        let isAdmin = false;
+
+        // 初始化 WebSocket 连接
+        async function initializeChat() {
+            try {
+                // 获取真实IP
+                const response = await fetch('/get_ip');
+                const data = await response.json();
+                myIp = data.ip;
+                console.log('My IP:', myIp);
+                
+                // 获取IP名称映射
+                await fetchIpNameMapping();
+                
+                // 更新显示（使用名称）
+                const myName = getDisplayName(myIp);
+                document.getElementById('currentIp').textContent = `本机: ${myName}${myName !== myIp ? ` (${myIp})` : ''}`;
+                document.getElementById('headerIp').textContent = myName;
+                
+                // 建立WebSocket连接
+                connectWebSocket();
+                initializeChatList();
+                
+                // 从本地存储恢复聊天历史
+                loadLocalChatHistory();
+                
+                // 初始化管理员功能
+                initializeAdminFeatures();
+            } catch (error) {
+                console.error('初始化失败:', error);
+            }
+        }
+
+        function connectWebSocket() {
+            ws = new WebSocket(`ws://${window.location.host}/ws`);
+            
+            ws.onopen = function() {
+                console.log('WebSocket连接已建立');
+                document.getElementById('connectionIndicator').classList.add('connected');
+            };
+            
+            ws.onmessage = function(event) {
+                console.log('收到消息:', event.data);
+                const data = JSON.parse(event.data);
+                
+                // 处理系统消息
+                if (data.type === 'system') {
+                    addSystemMessage(data.message);
+                    return;
+                }
+                
+                // 处理管理员操作消息
+                if (data.type === 'admin_action') {
+                    if (data.action === 'clear_all_history') {
+                        // 如果收到管理员清空历史的通知且不是自己发送的
+                        if (data.admin_ip !== myIp) {
+                            // 清空本地历史
+                            chatHistory.group = [];
+                            chatHistory.private = {};
+                            unreadMessages = {};
+                            
+                            // 清空显示
+                            const messageContainer = document.getElementById('messageContainer');
+                            messageContainer.innerHTML = '';
+                            
+                            // 重新初始化聊天列表
+                            initializeChatList();
+                            
+                            // 切换到群聊模式
+                            currentMode = 'group';
+                            currentChatTarget = null;
+                            document.getElementById('chatTitle').textContent = '内网群聊';
+                            updateModeButtons('group');
+                            
+                            addSystemMessage(`📢 ${data.message}`);
+                            showToast('管理员已清空所有聊天记录');
+                        }
+                    }
+                    return;
+                }
+                
+                // 处理历史消息开始和结束标识
+                if (data.type === 'history_start') {
+                    isLoadingHistory = true;
+                    console.log('开始加载历史消息');
+                    addSystemMessage(data.message);
+                    return;
+                }
+                
+                if (data.type === 'history_end') {
+                    isLoadingHistory = false;
+                    console.log('历史消息加载结束');
+                    addSystemMessage(data.message);
+                    // 保存到本地存储
+                    saveLocalChatHistory();
+                    // 滚动到最新消息
+                    setTimeout(() => {
+                        const messageContainer = document.getElementById('messageContainer');
+                        messageContainer.scrollTop = messageContainer.scrollHeight;
+                    }, 100);
+                    return;
+                }
+                
+                // 如果是自己发送的消息且已经显示过，并且不是历史消息，直接返回
+                if (data.ip === myIp && data.alreadyDisplayed && !data.is_history) {
+                    console.log('跳过已显示的消息');
+                    return;
+                }
+                
+                // 处理历史消息的存储
+                const isHistory = data.is_history || isLoadingHistory;
+                console.log('处理消息:', {
+                    message: data.message,
+                    ip: data.ip,
+                    isHistory: isHistory,
+                    currentMode: currentMode,
+                    isLoadingHistory: isLoadingHistory
+                });
+                
+                // 处理私聊消息
+                if (data.targetIp) {
+                    const chatPartner = data.ip === myIp ? data.targetIp : data.ip;
+                    
+                    // 存储到私聊历史
+                    if (!chatHistory.private[chatPartner]) {
+                        chatHistory.private[chatPartner] = [];
+                    }
+                    
+                    // 检查是否已存在相同消息（避免重复）
+                    const isDuplicate = chatHistory.private[chatPartner].some(msg => 
+                        msg.timestamp === data.timestamp && 
+                        msg.message === data.message && 
+                        msg.ip === data.ip
+                    );
+                    
+                    if (!isDuplicate) {
+                        chatHistory.private[chatPartner].push(data);
+                        
+                        // 按时间排序
+                        chatHistory.private[chatPartner].sort((a, b) => 
+                            (a.timestamp || 0) - (b.timestamp || 0)
+                        );
+                    }
+                    
+                    // 如果是当前聊天对象，显示消息
+                    if (currentMode === 'private' && currentChatTarget === chatPartner) {
+                        if (!isDuplicate) {
+                            addMessage(data, isHistory);
+                        }
+                    } else if (!isHistory) {
+                        // 如果不是历史消息且不是当前聊天，添加未读提醒
+                        updateChatList(chatPartner, data.message);
+                        addUnreadBadge(chatPartner);
+                    }
+                } else {
+                    // 处理群聊消息
+                    const isDuplicate = chatHistory.group.some(msg => 
+                        msg.timestamp === data.timestamp && 
+                        msg.message === data.message && 
+                        msg.ip === data.ip
+                    );
+                    
+                    if (!isDuplicate) {
+                        chatHistory.group.push(data);
+                        
+                        // 按时间排序
+                        chatHistory.group.sort((a, b) => 
+                            (a.timestamp || 0) - (b.timestamp || 0)
+                        );
+                        
+                        // 限制历史消息数量
+                        if (chatHistory.group.length > 200) {
+                            chatHistory.group = chatHistory.group.slice(-200);
+                        }
+                    }
+                    
+                    // 在群聊模式下始终显示消息（包括历史消息）
+                    if (currentMode === 'group') {
+                        if (!isDuplicate || isHistory) {
+                            console.log('显示群聊消息:', data, '是否历史:', isHistory);
+                            addMessage(data, isHistory);
+                        }
+                    }
+                }
+            };
+
+            ws.onclose = function() {
+                console.log('WebSocket连接已关闭');
+                document.getElementById('connectionIndicator').classList.remove('connected');
+                setTimeout(connectWebSocket, 3000);
+            };
+
+            ws.onerror = function(error) {
+                console.error('WebSocket错误:', error);
+            };
+        }
+
+        // 本地存储相关函数
+        function saveLocalChatHistory() {
+            try {
+                const historyData = {
+                    group: chatHistory.group,
+                    private: chatHistory.private,
+                    lastSaved: new Date().toISOString()
+                };
+                localStorage.setItem(`chatHistory_${myIp}`, JSON.stringify(historyData));
+                console.log('聊天历史已保存到本地存储');
+            } catch (error) {
+                console.error('保存本地聊天历史失败:', error);
+            }
+        }
+
+        function loadLocalChatHistory() {
+            try {
+                const savedHistory = localStorage.getItem(`chatHistory_${myIp}`);
+                if (savedHistory) {
+                    const historyData = JSON.parse(savedHistory);
+                    chatHistory.group = historyData.group || [];
+                    chatHistory.private = historyData.private || {};
+                    console.log('从本地存储加载聊天历史:', {
+                        群聊消息: chatHistory.group.length,
+                        私聊对话: Object.keys(chatHistory.private).length
+                    });
+                    
+                    // 更新聊天列表
+                    Object.keys(chatHistory.private).forEach(ip => {
+                        if (ip !== myIp && chatHistory.private[ip].length > 0) {
+                            const lastMessage = chatHistory.private[ip][chatHistory.private[ip].length - 1];
+                            updateChatList(ip, lastMessage.message || '文件消息');
+                        }
+                    });
+                }
+            } catch (error) {
+                console.error('加载本地聊天历史失败:', error);
+            }
+        }
+
+        // 清理本地存储的历史数据
+        function clearLocalChatHistory() {
+            try {
+                localStorage.removeItem(`chatHistory_${myIp}`);
+                chatHistory.group = [];
+                chatHistory.private = {};
+                console.log('本地聊天历史已清空');
+            } catch (error) {
+                console.error('清空本地历史失败:', error);
+            }
+        }
+
+        // 添加颜色生成函数
+        function generateColor(str) {
+            let hash = 0;
+            for (let i = 0; i < str.length; i++) {
+                hash = str.charCodeAt(i) + ((hash << 5) - hash);
+            }
+            const colors = [
+                '#4CAF50', '#2196F3', '#9C27B0', '#FF9800', 
+                '#E91E63', '#3F51B5', '#009688', '#795548'
+            ];
+            return colors[Math.abs(hash) % colors.length];
+        }
+
+        // 创建头像元素的统一函数
+        function createAvatarElement(ip, size = '32px', fontSize = '1.1em') {
+            const avatar = generateAvatar(ip);
+            
+            if (avatar.type === 'image') {
+                // 生成回退emoji
+                const emojis = ['🌟', '🎯', '🎨', '🎭', '🎪', '🎫', '🎮', '🎲', '🎸', '🎺', 
+                             '🎭', '🎪', '🎨', '🎯', '🌟', '🎲', '🎮', '🎫', '🎸', '🎺'];
+                const fallbackEmoji = emojis[ip.split('.')[3] % emojis.length];
+                
+                return `
+                    <div style="
+                        width: ${size}; 
+                        height: ${size}; 
+                        border-radius: 50%; 
+                        background-color: ${avatar.color}; 
+                        display: flex; 
+                        align-items: center; 
+                        justify-content: center; 
+                        color: white; 
+                        font-size: ${fontSize}; 
+                        position: relative;
+                        overflow: hidden;
+                    ">
+                        <img src="${avatar.src}" alt="头像" 
+                            style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;"
+                            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                        <span style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: center;">${fallbackEmoji}</span>
+                    </div>
+                `;
+            } else {
+                return `
+                    <div style="
+                        width: ${size}; 
+                        height: ${size}; 
+                        border-radius: 50%; 
+                        background-color: ${avatar.color}; 
+                        display: flex; 
+                        align-items: center; 
+                        justify-content: center; 
+                        color: white; 
+                        font-size: ${fontSize};
+                    ">
+                        ${avatar.icon}
+                    </div>
+                `;
+            }
+        }
+
+        //// / 生成用户头像
+        function generateAvatar(ip) {
+            // 如果有配置的头像，优先使用配置的头像
+            if (ipAvatarMapping[ip]) {
+                return {
+                    type: 'image',
+                    src: ipAvatarMapping[ip],
+                    color: generateColor(ip)
+                };
+            }
+            
+            // 使用固定的 emoji 数组作为头像
+            const emojis = ['🌟', '🎯', '🎨', '🎭', '🎪', '🎫', '🎮', '🎲', '🎸', '🎺', 
+                         '🎭', '🎪', '🎨', '🎯', '🌟', '🎲', '🎮', '🎫', '🎸', '🎺'];
+            const icon = emojis[ip.split('.')[3] % emojis.length];
+            return {
+                type: 'emoji',
+                icon: icon,
+                color: generateColor(ip)
+            };
+        }
+
+        // 修改消息显示函数
+        function addMessage(data, isHistory = false) {
+            const messageContainer = document.getElementById('messageContainer');
+            
+            // 检查是否已存在相同消息（避免重复显示）
+            const existingMessages = messageContainer.querySelectorAll('.message-container');
+            for (let existingMsg of existingMessages) {
+                const existingTimestamp = existingMsg.getAttribute('data-timestamp');
+                const existingIp = existingMsg.getAttribute('data-ip');
+                const existingContent = existingMsg.querySelector('.message-content');
+                
+                if (existingTimestamp == data.timestamp && 
+                    existingIp === data.ip && 
+                    existingContent && 
+                    existingContent.textContent.includes(data.message)) {
+                    console.log('跳过重复消息:', data);
+                    return;
+                }
+            }
+            
+            const messageWrapper = document.createElement('div');
+            const isCurrentUser = data.ip === myIp;
+            const avatar = generateAvatar(data.ip);
+            
+            messageWrapper.className = `message-container ${isCurrentUser ? 'sent' : 'received'}`;
+            messageWrapper.setAttribute('data-timestamp', data.timestamp);
+            messageWrapper.setAttribute('data-ip', data.ip);
+            
+            // 如果是历史消息，添加特殊样式
+            if (isHistory) {
+                messageWrapper.classList.add('history-message');
+            }
+            
+            let messageContent = '';
+            if (data.type === 'file') {
+                try {
+                    const fileData = JSON.parse(data.message);
+                    console.log('解析文件数据:', fileData); // 添加调试日志
+                    
+                    // 验证文件数据完整性
+                    if (!fileData.fileName || !fileData.filePath) {
+                        throw new Error('文件数据不完整');
+                    }
+                    
+                    const encodedFileData = encodeURIComponent(JSON.stringify(fileData));
+                    const fileExtension = fileData.fileName.toLowerCase().split('.').pop();
+                    const detectedFileType = getFileType(fileData.fileName, fileData.fileType || '');
+                    const fileIcon = getFileIcon(detectedFileType, fileExtension);
+                    
+                    // 根据文件类型显示不同的内容
+                    if (detectedFileType === 'image' || fileData.isImage) {
+                        messageContent = `
+                            <div class="media-message image-message" onclick="handleImageClick(this, event)">
+                                <img src="${fileData.filePath}" alt="${fileData.fileName}" 
+                                     onclick="event.stopPropagation(); window.open('${fileData.filePath}', '_blank')"
+                                     loading="lazy">
+                                <div class="image-click-hint">点击图片下载</div>
+                                <div class="image-download-overlay">
+                                    <button class="image-download-btn" onclick="event.stopPropagation(); handleFileAction('${encodedFileData}')">
+                                        <i class="bi bi-download"></i>
+                                    </button>
+                                </div>
+                                <div class="image-info-overlay">
+                                    <div class="file-name">${fileData.fileName}</div>
+                                    <div class="file-size">${formatFileSize(fileData.fileSize)}</div>
+                                </div>
+                            </div>
+                        `;
+                    } else if (detectedFileType === 'audio') {
+                        messageContent = `
+                            <div class="media-message audio-message">
+                                <div class="media-header">
+                                    <i class="${fileIcon}"></i>
+                                    <div class="media-title">
+                                        <div class="file-name">${fileData.fileName}</div>
+                                        <div class="file-size">${formatFileSize(fileData.fileSize)}</div>
+                                    </div>
+                                </div>
+                                <audio controls preload="metadata" class="media-player">
+                                    <source src="${fileData.filePath}" type="${fileData.fileType || 'audio/mpeg'}">
+                                    您的浏览器不支持音频播放。
+                                </audio>
+                                <div class="audio-download-overlay">
+                                    <button class="audio-download-btn" onclick="handleFileAction('${encodedFileData}')">
+                                        <i class="bi bi-download"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        `;
+                    } else if (detectedFileType === 'video') {
+                        messageContent = `
+                            <div class="media-message video-message">
+                                <div class="media-header">
+                                    <i class="${fileIcon}"></i>
+                                    <div class="media-title">
+                                        <div class="file-name">${fileData.fileName}</div>
+                                        <div class="file-size">${formatFileSize(fileData.fileSize)}</div>
+                                    </div>
+                                </div>
+                                <video controls preload="metadata" class="media-player">
+                                    <source src="${fileData.filePath}" type="${fileData.fileType || 'video/mp4'}">
+                                    您的浏览器不支持视频播放。
+                                </video>
+                                <div class="video-download-overlay">
+                                    <button class="video-download-btn" onclick="handleFileAction('${encodedFileData}')">
+                                        <i class="bi bi-download"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        `;
+                    } else {
+                        // 其他文件类型的通用显示
+                        messageContent = `
+                            <div class="file-message">
+                                <div class="file-icon-wrapper">
+                                    <i class="${fileIcon}"></i>
+                                </div>
+                                <div class="file-info">
+                                    <div class="file-name">${fileData.fileName}</div>
+                                    <div class="file-details">
+                                        <span class="file-size">${formatFileSize(fileData.fileSize)}</span>
+                                        <span class="file-type">${detectedFileType.toUpperCase()}</span>
+                                    </div>
+                                </div>
+                                <button class="copy-btn download-btn" onclick="handleFileAction('${encodedFileData}')">
+                                    <i class="bi bi-download"></i>
+                                </button>
+                            </div>
+                        `;
+                    }
+                } catch (error) {
+                    console.error('文件消息处理失败:', error);
+                    messageContent = `
+                        <div class="message-content error">
+                            <i class="bi bi-exclamation-triangle"></i>
+                            文件消息处理失败: ${error.message}
+                        </div>
+                    `;
+                }
+            } else {
+                messageContent = `
+                    <div class="message-content">
+                        ${data.message}
+                        <button class="copy-btn" onclick="copyMessage('${data.message.replace(/'/g, "\\'")}')">
+                            <i class="bi bi-clipboard"></i>
+                        </button>
+                    </div>
+                `;
+            }
+            
+            // 添加历史消息标识
+            const historyBadge = isHistory ? '<span class="history-badge">历史</span>' : '';
+            
+            // 获取用户显示名称
+            const senderName = getDisplayName(data.ip);
+            const userDisplayText = isCurrentUser ? '我' : senderName;
+            
+            messageWrapper.innerHTML = `
+                <div class="user-tag">${userDisplayText} ${historyBadge}</div>
+                <div class="avatar" style="background-color: transparent !important; padding: 0;">
+                    ${createAvatarElement(data.ip, '32px', '1.1em')}
+                </div>
+                <div class="message-content-wrapper">
+                    <div class="message ${isCurrentUser ? 'sent' : 'received'}">
+                        ${messageContent}
+                        <div class="message-info">
+                            <div class="info-item ip-info">
+                                <i class="bi bi-pc-display"></i>
+                                <span>${senderName}</span>
+                            </div>
+                            <div class="info-item">
+                                <i class="bi bi-clock"></i>
+                                <span class="message-time">${formatTime(data.timestamp)}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            
+            messageContainer.appendChild(messageWrapper);
+            
+            // 如果不是历史消息，滚动到底部
+            if (!isHistory && !isLoadingHistory) {
+                setTimeout(() => {
+                    messageContainer.scrollTop = messageContainer.scrollHeight;
+                }, 50);
+            }
+        }
+
+        // 添加系统消息显示函数
+        function addSystemMessage(message) {
+            const messageContainer = document.getElementById('messageContainer');
+            const systemMessage = document.createElement('div');
+            systemMessage.className = 'system-message';
+            systemMessage.innerHTML = `
+                <div class="system-content">
+                    <i class="bi bi-info-circle"></i>
+                    <span>${message}</span>
+                </div>
+            `;
+            messageContainer.appendChild(systemMessage);
+            messageContainer.scrollTop = messageContainer.scrollHeight;
+        }
+
+        // 添加时间格式化函数
+        function formatTime(timestamp) {
+            const date = new Date(timestamp);
+            const hours = date.getHours().toString().padStart(2, '0');
+            const minutes = date.getMinutes().toString().padStart(2, '0');
+            const seconds = date.getSeconds().toString().padStart(2, '0');
+            return `${hours}:${minutes}:${seconds}`;
+        }
+
+        // 发送消息时保存到历史
+        function sendMessage() {
+            const messageInput = document.getElementById('messageInput');
+            const message = messageInput.value.trim();
+            
+            if (!message || !ws || ws.readyState !== WebSocket.OPEN) {
+                return;
+            }
+
+            const messageData = {
+                message: message,
+                timestamp: new Date().getTime(),
+                alreadyDisplayed: true  // 标记消息已在发送者端显示
+            };
+
+            if (currentMode === 'private' && currentChatTarget) {
+                messageData.targetIp = currentChatTarget;
+            }
+
+            try {
+                // 发送消息
+                ws.send(JSON.stringify(messageData));
+                messageInput.value = '';
+                
+                // 添加到本地显示和历史记录
+                const localMessage = {
+                    ...messageData,
+                    ip: myIp
+                };
+                
+                // 存储消息到本地历史
+                if (currentMode === 'private' && currentChatTarget) {
+                    if (!chatHistory.private[currentChatTarget]) {
+                        chatHistory.private[currentChatTarget] = [];
+                    }
+                    chatHistory.private[currentChatTarget].push(localMessage);
+                    
+                    // 保持时间排序
+                    chatHistory.private[currentChatTarget].sort((a, b) => 
+                        (a.timestamp || 0) - (b.timestamp || 0)
+                    );
+                    
+                    // 更新聊天列表
+                    updateChatList(currentChatTarget, message);
+                } else {
+                    chatHistory.group.push(localMessage);
+                    
+                    // 保持时间排序
+                    chatHistory.group.sort((a, b) => 
+                        (a.timestamp || 0) - (b.timestamp || 0)
+                    );
+                    
+                    // 限制历史消息数量
+                    if (chatHistory.group.length > 200) {
+                        chatHistory.group = chatHistory.group.slice(-200);
+                    }
+                }
+                
+                // 显示消息
+                addMessage(localMessage);
+                
+                // 滚动到最新消息
+                const messageContainer = document.getElementById('messageContainer');
+                messageContainer.scrollTop = messageContainer.scrollHeight;
+                
+                // 保存到本地存储
+                saveLocalChatHistory();
+                
+            } catch (error) {
+                console.error('发送消息失败:', error);
+                showToast('发送消息失败');
+            }
+        }
+
+        function handleKeyPress(event) {
+            if (event.key === 'Enter') {
+                sendMessage();
+            }
+        }
+
+        function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            const overlay = document.getElementById('sidebarOverlay');
+            const toggleIcon = sidebar.querySelector('.sidebar-toggle i');
+            
+            sidebarVisible = !sidebarVisible;
+            
+            sidebar.classList.toggle('visible');
+            overlay.classList.toggle('visible');
+            
+            // 更新箭头方向
+            if (sidebarVisible) {
+                toggleIcon.classList.remove('bi-chevron-right');
+                toggleIcon.classList.add('bi-chevron-left');
+                document.body.style.overflow = 'hidden';  // 防止背景滚动
+            } else {
+                toggleIcon.classList.remove('bi-chevron-left');
+                toggleIcon.classList.add('bi-chevron-right');
+                document.body.style.overflow = '';
+            }
+        }
+        
+
+        function switchMode(mode) {
+            // 清空消息容器
+            const messageContainer = document.getElementById('messageContainer');
+            messageContainer.innerHTML = '';
+            
+            if (mode === 'private') {
+                // 私聊模式 - 显示用户选择界面
+                showPrivateChatSelector();
+                return; // 不立即切换模式，等用户选择后再切换
+            } else {
+                // 群聊模式
+                switchToGroupChat();
+            }
+            
+            // 保存状态到本地存储
+            saveLocalChatHistory();
+            
+            // 滚动到最新消息
+            setTimeout(() => {
+                messageContainer.scrollTop = messageContainer.scrollHeight;
+            }, 100);
+        }
+
+        // 添加更新模式按钮状态的函数
+        function updateModeButtons(activeMode) {
+            document.querySelectorAll('.mode-item').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            document.querySelector(`[data-mode="${activeMode}"]`).classList.add('active');
+        }
+
+        // 修改事件监听器绑定
+        document.addEventListener('DOMContentLoaded', function() {
+            // 为群聊和私聊按钮添加点击事件
+            document.querySelectorAll('.mode-item').forEach(item => {
+                item.addEventListener('click', function(e) {
+                    e.preventDefault();  // 防止事件冒泡
+                    const mode = this.getAttribute('data-mode');
+                    switchMode(mode);
+                });
+            });
+
+            // 点击主聊天区域时关闭侧边栏（移动端）
+            document.querySelector('.chat-main').addEventListener('click', function(e) {
+                if (sidebarVisible && window.innerWidth <= 768) {
+                    if (!e.target.closest('.menu-toggle')) {
+                        toggleSidebar();
+                    }
+                }
+            });
+
+            // 为输入框添加回车键事件监听
+            const messageInput = document.getElementById('messageInput');
+            messageInput.addEventListener('keypress', function(event) {
+                if (event.key === 'Enter') {
+                    sendMessage();
+                }
+            });
+        });
+
+        // 优化复制功能
+        async function copyMessage(text) {
+            try {
+                // 使用 Clipboard API
+                await navigator.clipboard.writeText(text);
+                showCopyToast('复制成功');
+            } catch (err) {
+                // 降级方案
+                const textarea = document.createElement('textarea');
+                textarea.value = text;
+                textarea.style.position = 'fixed';
+                textarea.style.left = '-9999px';
+                textarea.style.top = '0';
+                document.body.appendChild(textarea);
+
+                try {
+                    // 选择文本
+                    if (navigator.userAgent.match(/ipad|iphone/i)) {
+                        // iOS 设备特殊处理
+                        const range = document.createRange();
+                        range.selectNodeContents(textarea);
+                        const selection = window.getSelection();
+                        selection.removeAllRanges();
+                        selection.addRange(range);
+                        textarea.setSelectionRange(0, 999999);
+                    } else {
+                        textarea.select();
+                    }
+
+                    // 执行复制
+                    const successful = document.execCommand('copy');
+                    if (successful) {
+                        showCopyToast('复制成功');
+                    } else {
+                        showCopyToast('复制失败，请手动复制');
+                    }
+                } catch (err) {
+                    showCopyToast('复制失败，请手动复制');
+                } finally {
+                    document.body.removeChild(textarea);
+                }
+            }
+        }
+
+        // 优化提示显示
+        function showCopyToast(message) {
+            let toast = document.querySelector('.copy-toast');
+            if (!toast) {
+                toast = document.createElement('div');
+                toast.className = 'copy-toast';
+                document.body.appendChild(toast);
+            }
+
+            // 清除之前的定时器
+            if (toast.timeoutId) {
+                clearTimeout(toast.timeoutId);
+            }
+
+            toast.textContent = message;
+            toast.classList.add('show');
+
+            // 设置新的定时器
+            toast.timeoutId = setTimeout(() => {
+                toast.classList.remove('show');
+            }, 2000);
+        }
+
+        // 在添加消息时的HTML模板中修改复制按钮的位置
+        function createMessageHTML(message, isSent) {
+            return `
+                <div class="message-container ${isSent ? 'sent' : 'received'}">
+                    <button class="copy-btn" aria-label="复制消息" 
+                            onclick="event.stopPropagation(); copyMessage('${message.text.replace(/'/g, "\\'")}')">
+                        <i class="bi bi-clipboard"></i>
+                    </button>
+                    <div class="message ${isSent ? 'sent' : 'received'}">
+                        <!-- 其他消息内容 -->
+                    </div>
+                </div>
+            `;
+        }
+
+        // 在 body 标签末尾添加提示元素
+        document.body.insertAdjacentHTML('beforeend', '<div class="copy-tooltip"></div>');
+
+        // 初始化
+        initializeChat();
+        document.getElementById('messageInput').focus();
+
+        // 添加窗口大小变化监听
+        window.addEventListener('resize', function() {
+            const sidebar = document.getElementById('sidebar');
+            const toggleIcon = sidebar.querySelector('.sidebar-toggle i');
+            
+            if (window.innerWidth > 768) {
+                // 在桌面端保持侧边栏状态
+                if (!sidebarVisible) {
+                    toggleIcon.classList.remove('bi-chevron-left');
+                    toggleIcon.classList.add('bi-chevron-right');
+                }
+            } else {
+                // 在移动端自动隐藏边栏
+                sidebarVisible = false;
+                sidebar.classList.remove('visible');
+                toggleIcon.classList.remove('bi-chevron-left');
+                toggleIcon.classList.add('bi-chevron-right');
+            }
+        });
+
+        // 初始化聊天列表
+        function initializeChatList() {
+            const chatListContent = document.getElementById('chatListContent');
+            chatListContent.innerHTML = `
+                <div class="chat-item active" data-chat="group">
+                    <div class="chat-item-avatar" style="background: var(--primary-color)">
+                        <i class="bi bi-people-fill"></i>
+                    </div>
+                    <div class="chat-item-info">
+                        <div class="chat-item-name">群聊</div>
+                        <div class="chat-item-last-msg">所有人的聊天室</div>
+                    </div>
+                </div>
+            `;
+            
+            // 为群聊项添加点击事件监听器
+            const groupChatItem = chatListContent.querySelector('.chat-item[data-chat="group"]');
+            if (groupChatItem) {
+                groupChatItem.addEventListener('click', () => {
+                    switchToGroupChat();
+                });
+            }
+            
+            // 设置默认为群聊模式，并且不清空消息容器
+            currentMode = 'group';
+            currentChatTarget = null;
+            document.getElementById('chatTitle').textContent = '内网群聊';
+            updateModeButtons('group');
+        }
+
+        // 添加或更新聊天项
+        function updateChatList(ip, lastMessage) {
+            if (ip === myIp) return;
+            
+            const chatListContent = document.getElementById('chatListContent');
+            let chatItem = document.querySelector(`.chat-item[data-chat="${ip}"]`);
+            
+            if (!chatItem) {
+                const displayName = getDisplayName(ip);
+                
+                chatItem = document.createElement('div');
+                chatItem.className = 'chat-item';
+                chatItem.setAttribute('data-chat', ip);
+                chatItem.innerHTML = `
+                    <div class="chat-item-avatar" style="background-color: transparent !important; padding: 0;">
+                        ${createAvatarElement(ip, '40px', '1.2em')}
+                    </div>
+                    <div class="chat-item-info">
+                        <div class="chat-item-name">${displayName}</div>
+                        <div class="chat-item-last-msg"></div>
+                    </div>
+                    <div class="chat-item-badge">1</div>
+                    <div class="chat-item-actions">
+                        <button class="chat-delete-btn" onclick="deleteChatHistory('${ip}', event)">
+                            <i class="bi bi-trash"></i>
+                        </button>
+                    </div>
+                `;
+                chatItem.addEventListener('click', () => switchToPrivateChat(ip));
+                chatListContent.appendChild(chatItem);
+            }
+            
+            // 更新最后一条消息
+            chatItem.querySelector('.chat-item-last-msg').textContent = lastMessage;
+        }
+
+        // 切换到私聊
+        function switchToPrivateChat(targetIp) {
+            currentMode = 'private';
+            currentChatTarget = targetIp;
+            
+            // 更新UI
+            const targetName = getDisplayName(targetIp);
+            document.getElementById('chatTitle').textContent = `与 ${targetName} 的私聊`;
+            updateModeButtons('private');
+            
+            // 清除未读消息提醒
+            clearUnreadBadge(targetIp);
+            
+            // 清空并显示私聊消息
+            const messageContainer = document.getElementById('messageContainer');
+            messageContainer.innerHTML = '';
+            
+            // 显示私聊历史
+            if (chatHistory.private[targetIp] && chatHistory.private[targetIp].length > 0) {
+                const sortedMessages = [...chatHistory.private[targetIp]].sort((a, b) => 
+                    (a.timestamp || 0) - (b.timestamp || 0)
+                );
+                
+                sortedMessages.forEach(msg => {
+                    addMessage(msg, true); // 标记为历史消息
+                });
+                
+                // 添加分隔线
+                addSystemMessage('以上为历史消息');
+            }
+            
+            // 更新聊天列表状态
+            updateChatItemStatus(targetIp);
+            
+            // 滚动到最新消息
+            setTimeout(() => {
+                messageContainer.scrollTop = messageContainer.scrollHeight;
+            }, 100);
+            
+            // 自动关闭侧边栏（移动端）
+            if (window.innerWidth <= 768 && sidebarVisible) {
+                toggleSidebar();
+            }
+        }
+
+        // 切换到群聊
+        function switchToGroupChat() {
+            currentMode = 'group';
+            currentChatTarget = null;
+            
+            // 更新UI
+            document.getElementById('chatTitle').textContent = '内网群聊';
+            updateModeButtons('group');
+            
+            // 清空并显示群聊消息
+            const messageContainer = document.getElementById('messageContainer');
+            messageContainer.innerHTML = '';
+            
+            // 显示群聊历史
+            displayGroupHistory();
+            
+            // 更新聊天列表状态
+            updateChatItemStatus('group');
+            
+            // 自动关闭侧边栏（移动端）
+            if (window.innerWidth <= 768 && sidebarVisible) {
+                toggleSidebar();
+            }
+        }
+
+        // 显示聊天记录
+        function displayChatHistory(targetIp) {
+            const messageContainer = document.getElementById('messageContainer');
+            messageContainer.innerHTML = '';
+            
+            const messages = chatHistory.private[targetIp] || [];
+            messages.forEach(data => addMessage(data, false));
+        }
+
+        // 更新聊天项状态
+        function updateChatItemStatus(activeIp) {
+            document.querySelectorAll('.chat-item').forEach(item => {
+                item.classList.remove('active');
+                if (item.getAttribute('data-chat') === activeIp) {
+                    item.classList.add('active');
+                }
+            });
+        }
+
+        // 添加未读消息提醒
+        function addUnreadBadge(ip) {
+            if (currentChatTarget !== ip) {
+                unreadMessages[ip] = (unreadMessages[ip] || 0) + 1;
+                const badge = document.querySelector(`.chat-item[data-chat="${ip}"] .chat-item-badge`);
+                if (badge) {
+                    badge.textContent = unreadMessages[ip];
+                    badge.classList.add('show');
+                    // 添加闪烁动画
+                    badge.style.animation = 'none';
+                    badge.offsetHeight; // 触发重绘
+                    badge.style.animation = 'badgePulse 1s infinite';
+                }
+            }
+        }
+
+        // 清除未读消息提醒
+        function clearUnreadBadge(ip) {
+            unreadMessages[ip] = 0;
+            const badge = document.querySelector(`.chat-item[data-chat="${ip}"] .chat-item-badge`);
+            if (badge) {
+                badge.classList.remove('show');
+            }
+        }
+
+        // 添加提示音函数
+        function playNotificationSound() {
+            const audio = new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBkCY2e/GdSgFKHzK8N2NOwgXZLnv6KJQDgtMpOL0uWYeBj2V1/LJeCoFJHfH8uCRPwgUYbbx7KVTDghIoOD3vGkhBTqS1fPMeywFIHPE9OOVQwgRXrTz76hWDgZEnN75v20jBTeP0/XPfi4FHW/B9eaYRwgOWrH18qtZDgRBmd/8wm8lBTSM0fbSgjAFGWu+9+mcSwgLV6/39K5cDwM+lt//xXInBTGJz/fVhTIFGGi7+OyeTggJVK34961fDwE7k+D/yHUpBS2GzPjYiDQFF2W4+e+hUQgHUaz6+LBiEAE4j97/y3crBSqDyvrbiTYFFWK2+vGjUwgFTqr7+rNkEAA1jd3/znktBSeBx/vdizgFE1+z+/SmVggDTKj8/LVmEQAyi9v/0HsuBSR/xfzfjDoFEV2x/PanWAgBSab9/bhpEQAwh9n/03wtBSF8w/3ikz0FD1qu/fmqWwj/R6T+/7pqEgAuhdf/1X4vBR56wf7klD8FDVis/vutXQj9RaL//71sEwAshNb/14AxBRx3v//nlUEFDFaq//2vXwj8Q6D//79uFAAqgdT/2YIyBRp1vf/qlkMFC1Wo//+yYQj6QZ7//8FwFQAof9P/24QzBRhyuv/sl0UFCVOm//+0Ywj5P5z//8NyFgAmfdH/3YY1BRZwuP/umEYFCFGk//+2ZQj3PZr//8V0FwAkfM//34g2BRRutv/wmUgFBlCj//+4Zwj2O5j//8d1GQAie87/4Yo3BRJstP/ymUkFBU6h//+6aQj1OZb//8l3GgAgec3/44w5BRBqsv/0mkoFA0yf//+8awj0N5X//8t4GwAfeM3/5Y46BQ9osP/2m0wFAkqe//++bQjyNZP//817HQAdd8z/55A7BQ1mr//4nE0FAUid//7AcAjxM5H//899HgAcdcv/6ZE9BQtlrf/6nU8F/0ac//7BcgjwMY///9F/HwAadMv/65M+BQpjq//8nlAF/kSa//7DdAjuL47//9OAIQAZc8r/7JRABQhiqf/+n1IF/EKY//7FdgjuLYz//9WCIgAXcsn/7pZBBQdgp///oFMF+0CW//7HeAjtK4r//9eEIwAWcMj/8JdDBQVfpv//oVUF+T6U//7JegjsKYj//9mGJAAVb8f/8plEBQRdpP//o1cF+DyS//7LfAjrJ4b//9uIJQATbcb/9JpGBQJbo///pVgF9zqQ//7NfgjqJYX//92JJgASbMX/9pxHBQFZof//plkF9jiO//7PgAjpI4P//9+LJwARasT/+J1JBQBYn///qFsF9TaM//7RggjnIYH//+GNKQAPacP/+p9KBf9Wnf//qVwF9DSK//7ThAjmH3///+OPKgAOaML//KBMBf5UnP//q14F8zKI//7VhgjlHn3//+WQLAANZsH//qJNBfxSm///rWAF8jCG//7XiAjkHHv//+eSLQALZcD//6NOBftQmf//rmEF8S6E//7ZigjjGnn//+mULgAKY7///6VQBfpOl///sGMF8CyC//7bjAjiGHf//+uWMAAJYr7//6dRBflMlf//smQF7yqA//7djgihFnX//+2YMQAHYb3//6lTBfhKk///s2YF7iiA//7fkAigFHP//++aMgAGX7z//6tUBfdIkf//tWgF7SZ+//7hlAifEnH///GcNAAFXrr//61WBfZGj///tmkF7CR8//7jlgieDG///fOfNQAEXLn//69XBfVEjf//uGsF6yJ6//7lmAidCm3//fWhNwACW7j//7FZBfRCi///um0F6iB4//7nmgicCGv//fenOAACWbb//7NaBfNAif//vG8F6R52//7pnAibBmn//fmpOgAAWLX//7VcBfI+h///vnAF6Bx0//7rngiaBGf//fusPAAAVrP//7deBfE8hf//wHIF5xpy//7toQiZAmX//f2uPQAAVbL//7lgBfA6g///wnQF5hhw//7vpQiYAGP//f+xPwAAU7D//7phBe84gf//xHYF5RZu//7xpwiXAGH//f+zQQAA[base64 audio data]').play();
+        }
+
+        // 添加闪烁动画样式
+        const style = document.createElement('style');
+        style.textContent = `
+        @keyframes badgePulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.2); }
+            100% { transform: scale(1); }
+        }
+        `;
+        document.head.appendChild(style);
+
+        // 添加状态检查函数
+        function checkCurrentMode() {
+            console.log('Current Mode:', currentMode);
+            console.log('Current Target:', currentChatTarget);
+            console.log('Chat History:', chatHistory);
+        }
+
+        // 添加显示群聊历史的函数
+        function displayGroupHistory() {
+            const messageContainer = document.getElementById('messageContainer');
+            messageContainer.innerHTML = '';
+            
+            // 按时间顺序显示群聊消息
+            if (chatHistory.group && chatHistory.group.length > 0) {
+                // 对消息按时间戳排序
+                const sortedMessages = [...chatHistory.group].sort((a, b) => 
+                    (a.timestamp || 0) - (b.timestamp || 0)
+                );
+                
+                sortedMessages.forEach(msg => {
+                    addMessage(msg, true); // 标记为历史消息
+                });
+                
+                // 添加分隔线
+                addSystemMessage('以上为历史消息');
+            }
+            
+            // 滚动到最新消息
+            setTimeout(() => {
+                messageContainer.scrollTop = messageContainer.scrollHeight;
+            }, 100);
+        }
+
+        // 添加删除聊天历史的函数
+        function deleteChatHistory(ip, event) {
+            // 阻止事件冒泡，避免触发聊天项的点击事件
+            event.stopPropagation();
+            
+            if (!confirm(`确定要删除与 ${ip} 的聊天记录吗？删除后将无法恢复。`)) {
+                return;
+            }
+            
+            // 删除聊天历史
+            delete chatHistory.private[ip];
+            delete unreadMessages[ip];
+            
+            // 从聊天列表中移除
+            const chatItem = document.querySelector(`.chat-item[data-chat="${ip}"]`);
+            if (chatItem) {
+                chatItem.remove();
+            }
+            
+            // 如果当前正在查看这个聊天，切换到群聊
+            if (currentMode === 'private' && currentChatTarget === ip) {
+                switchMode('group');
+            }
+            
+            showToast('聊天记录已删除');
+        }
+
+        // 添加 Toast 提示函数
+        function showToast(message) {
+            let toast = document.querySelector('.toast');
+            if (!toast) {
+                toast = document.createElement('div');
+                toast.className = 'toast';
+                document.body.appendChild(toast);
+            }
+            
+            toast.textContent = message;
+            toast.classList.add('show');
+            
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, 3000);
+        }
+
+        // 添加屏幕旋转处理
+        window.addEventListener('orientationchange', function() {
+            // 关闭侧边栏
+            if (sidebarVisible) {
+                toggleSidebar();
+            }
+            
+            // 重新计算高度
+            setTimeout(() => {
+                const messages = document.querySelector('.chat-messages');
+                messages.scrollTop = messages.scrollHeight;
+            }, 100);
+        });
+
+        // 添加触摸手势支持
+        let touchStartX = 0;
+        let touchEndX = 0;
+
+        document.addEventListener('touchstart', e => {
+            touchStartX = e.touches[0].clientX;
+        });
+
+        document.addEventListener('touchend', e => {
+            touchEndX = e.changedTouches[0].clientX;
+            handleSwipe();
+        });
+
+        function handleSwipe() {
+            const swipeDistance = touchEndX - touchStartX;
+            const threshold = 100; // 滑动阈值
+
+            if (Math.abs(swipeDistance) > threshold) {
+                if (swipeDistance > 0 && !sidebarVisible) {
+                    // 向右滑动，打开侧边栏
+                    toggleSidebar();
+                } else if (swipeDistance < 0 && sidebarVisible) {
+                    // 向左滑动，关闭侧边栏
+                    toggleSidebar();
+                }
+            }
+        }
+    
+
+        // 修改拖拽相关事件处理
+        const messageContainer = document.getElementById('messageContainer');
+        const dragOverlay = document.getElementById('dragOverlay');
+
+        // 防止默认行为
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+
+        // 显示拖拽覆盖层
+        function highlight(e) {
+            preventDefaults(e);
+            dragOverlay.classList.add('active');
+        }
+
+        // 隐藏拖拽覆盖层
+        function unhighlight(e) {
+            preventDefaults(e);
+            dragOverlay.classList.remove('active');
+        }
+
+        // 添加文件验证函数
+        function validateFile(file) {
+            // 最大文件大小（例如 500MB，增加限制以支持更大的音视频文件）
+            const MAX_FILE_SIZE = 500 * 1024 * 1024;
+            
+            // 检查文件大小
+            if (file.size > MAX_FILE_SIZE) {
+                throw new Error(`文件大小超过限制 (最大 ${formatFileSize(MAX_FILE_SIZE)})`);
+            }
+            
+            // 移除文件类型限制，支持所有格式
+            // 所有文件类型都被允许
+            
+            return true;
+        }
+
+        // 添加文件类型检测函数
+        function getFileType(filename, mimeType) {
+            const ext = filename.toLowerCase().split('.').pop();
+            
+            // 音频文件类型
+            const audioExtensions = ['mp3', 'wav', 'ogg', 'aac', 'm4a', 'flac', 'wma'];
+            const audioMimeTypes = ['audio/'];
+            
+            // 视频文件类型
+            const videoExtensions = ['mp4', 'webm', 'ogg', 'avi', 'mov', 'wmv', 'flv', 'mkv', '3gp'];
+            const videoMimeTypes = ['video/'];
+            
+            // 图片文件类型
+            const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico'];
+            const imageMimeTypes = ['image/'];
+            
+            // 文档文件类型
+            const docExtensions = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'rtf'];
+            
+            // 代码文件类型
+            const codeExtensions = ['js', 'html', 'css', 'py', 'java', 'cpp', 'c', 'php', 'rb', 'go', 'rs', 'ts', 'jsx', 'tsx', 'vue', 'json', 'xml', 'sql'];
+            
+            // 压缩文件类型
+            const archiveExtensions = ['zip', 'rar', '7z', 'tar', 'gz', 'bz2'];
+            
+            if (audioExtensions.includes(ext) || audioMimeTypes.some(type => mimeType.startsWith(type))) {
+                return 'audio';
+            } else if (videoExtensions.includes(ext) || videoMimeTypes.some(type => mimeType.startsWith(type))) {
+                return 'video';
+            } else if (imageExtensions.includes(ext) || imageMimeTypes.some(type => mimeType.startsWith(type))) {
+                return 'image';
+            } else if (docExtensions.includes(ext)) {
+                return 'document';
+            } else if (codeExtensions.includes(ext)) {
+                return 'code';
+            } else if (archiveExtensions.includes(ext)) {
+                return 'archive';
+            } else {
+                return 'file';
+            }
+        }
+
+        // 获取文件图标
+        function getFileIcon(fileType, extension) {
+            const iconMap = {
+                'audio': 'bi-music-note-beamed',
+                'video': 'bi-play-circle',
+                'image': 'bi-image',
+                'document': 'bi-file-earmark-text',
+                'code': 'bi-file-earmark-code',
+                'archive': 'bi-file-earmark-zip',
+                'file': 'bi-file-earmark'
+            };
+            
+            // 特殊文件类型的图标
+            const extIconMap = {
+                'pdf': 'bi-file-earmark-pdf',
+                'doc': 'bi-file-earmark-word',
+                'docx': 'bi-file-earmark-word',
+                'xls': 'bi-file-earmark-excel',
+                'xlsx': 'bi-file-earmark-excel',
+                'ppt': 'bi-file-earmark-ppt',
+                'pptx': 'bi-file-earmark-ppt',
+                'txt': 'bi-file-earmark-text',
+                'py': 'bi-file-earmark-code',
+                'js': 'bi-file-earmark-code',
+                'html': 'bi-file-earmark-code',
+                'css': 'bi-file-earmark-code'
+            };
+            
+            return extIconMap[extension] || iconMap[fileType] || 'bi-file-earmark';
+        }
+
+        // 修改文件拖放处理
+        async function handleDrop(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            unhighlight(e);
+            
+            const files = e.dataTransfer.files;
+            if (!files || files.length === 0) return;
+            
+            const file = files[0];
+            
+            try {
+                // 验证文件
+                validateFile(file);
+                
+                if (isUploading) return;
+                isUploading = true;
+                
+                await handleFileUpload(file);
+            } catch (error) {
+                console.error('文件处理失败:', error);
+                showToast(error.message);
+            } finally {
+                isUploading = false;
+            }
+        }
+
+        // 修改事件监听器绑定方式
+        function initializeDropZone() {
+            const messageContainer = document.getElementById('messageContainer');
+            
+            // 移除现有的事件监听器（如果有）
+            messageContainer.removeEventListener('dragenter', handleDragEnter);
+            messageContainer.removeEventListener('dragover', handleDragOver);
+            messageContainer.removeEventListener('dragleave', handleDragLeave);
+            messageContainer.removeEventListener('drop', handleDrop);
+            
+            // 添加新的事件监听器
+            messageContainer.addEventListener('dragenter', handleDragEnter, false);
+            messageContainer.addEventListener('dragover', handleDragOver, false);
+            messageContainer.addEventListener('dragleave', handleDragLeave, false);
+            messageContainer.addEventListener('drop', handleDrop, false);
+        }
+
+        // 拖拽事件处理函数
+        function handleDragEnter(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            highlight(e);
+        }
+
+        function handleDragOver(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            highlight(e);
+        }
+
+        function handleDragLeave(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            // 检查是否真的离开了容器
+            const rect = e.target.getBoundingClientRect();
+            const x = e.clientX;
+            const y = e.clientY;
+            
+            if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
+                unhighlight(e);
+            }
+        }
+
+        // 添加上传状态标志
+        let isUploading = false;
+
+        // 在页面加载完成后初始化
+        document.addEventListener('DOMContentLoaded', initializeDropZone);
+
+        // 处理文件上传和发送
+        async function handleFileUpload(file) {
+            const formData = new FormData();
+            formData.append('file', file);
+            
+            try {
+                // 添加文件信息日志
+                console.log('准备上传文件:', {
+                    name: file.name,
+                    type: file.type,
+                    size: file.size
+                });
+                
+                const response = await fetch('/upload', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                // 添加响应状态日志
+                console.log('上传响应状态:', response.status);
+                
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    console.error('上传失败响应:', errorText);
+                    throw new Error(`上传失败: ${response.status} ${errorText}`);
+                }
+                
+                const result = await response.json();
+                console.log('上传成功结果:', result);
+                
+                // 检测文件类型
+                const detectedFileType = getFileType(file.name, file.type);
+                const fileExtension = file.name.toLowerCase().split('.').pop();
+                
+                // 构建增强的文件数据
+                const fileData = {
+                    fileName: file.name,
+                    fileSize: file.size,
+                    filePath: result.path,
+                    fileType: file.type,
+                    fileExtension: fileExtension,
+                    detectedType: detectedFileType,
+                    isImage: detectedFileType === 'image',
+                    isAudio: detectedFileType === 'audio',
+                    isVideo: detectedFileType === 'video',
+                    uploadTime: new Date().toISOString()
+                };
+                
+                const messageData = {
+                    type: 'file',
+                    message: JSON.stringify(fileData),
+                    timestamp: new Date().getTime(),
+                    alreadyDisplayed: true
+                };
+
+                if (currentMode === 'private') {
+                    messageData.targetIp = currentChatTarget;
+                }
+
+                // 发送WebSocket消息
+                ws.send(JSON.stringify(messageData));
+                
+                // 本地显示和保存
+                const localMessage = {
+                    ...messageData,
+                    ip: myIp
+                };
+                
+                // 保存到历史记录
+                if (currentMode === 'private' && currentChatTarget) {
+                    if (!chatHistory.private[currentChatTarget]) {
+                        chatHistory.private[currentChatTarget] = [];
+                    }
+                    chatHistory.private[currentChatTarget].push(localMessage);
+                    
+                    // 根据文件类型显示不同的最后消息提示
+                    let lastMsgHint = '文件消息';
+                    if (detectedFileType === 'image') lastMsgHint = '图片';
+                    else if (detectedFileType === 'audio') lastMsgHint = '音频';
+                    else if (detectedFileType === 'video') lastMsgHint = '视频';
+                    else if (detectedFileType === 'document') lastMsgHint = '文档';
+                    
+                    updateChatList(currentChatTarget, lastMsgHint);
+                } else {
+                    chatHistory.group.push(localMessage);
+                }
+                
+                addMessage(localMessage);
+                saveLocalChatHistory();
+                
+                // 滚动到最新消息
+                const messageContainer = document.getElementById('messageContainer');
+                messageContainer.scrollTop = messageContainer.scrollHeight;
+                
+            } catch (error) {
+                console.error('文件上传失败详细信息:', error);
+                showToast('文件上传失败：' + error.message);
+                throw error;
+            }
+        }
+
+        function formatFileSize(bytes) {
+            if (bytes < 1024) {
+                return bytes + ' B';
+            } else if (bytes < 1024 * 1024) {
+                return (bytes / 1024).toFixed(2) + ' KB';
+            } else if (bytes < 1024 * 1024 * 1024) {
+                return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
+            } else {
+                return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
+            }
+        }
+
+        // 添加文件信息复制功能
+        async function copyFileInfo(fileName, fileSize) {
+            const text = `文件名：${fileName}\n文件大小：${fileSize}`;
+            await copyMessage(text);
+        }
+
+        // 添加触摸反馈
+        document.addEventListener('DOMContentLoaded', function() {
+            // 为所有复制按钮添加触摸反馈
+            document.addEventListener('click', function(e) {
+                if (e.target.closest('.copy-btn')) {
+                    const btn = e.target.closest('.copy-btn');
+                    btn.style.transform = 'scale(0.95)';
+                    setTimeout(() => {
+                        btn.style.transform = '';
+                    }, 200);
+                }
+            });
+
+            // 防止触摸事件穿透
+            document.querySelectorAll('.copy-btn').forEach(btn => {
+                btn.addEventListener('touchstart', e => {
+                    e.preventDefault();
+                }, { passive: false });
+            });
+        });
+
+
+
+
+        // 添加文件操作处理函数
+        async function handleFileAction(messageData) {
+            try {
+                // 解码并解析文件数据
+                const decodedData = decodeURIComponent(messageData);
+                const fileData = JSON.parse(decodedData);
+                
+                console.log('Downloading file:', fileData); // 添加调试日志
+                
+                // 验证必要的文件信息是否存在
+                if (!fileData.filePath || !fileData.fileName) {
+                    throw new Error('文件信息不完整');
+                }
+                
+                // 创建下载链接
+                const link = document.createElement('a');
+                link.href = fileData.filePath;
+                link.download = fileData.fileName;
+                
+                // 触发下载
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                
+                showToast('开始下载文件');
+            } catch (error) {
+                console.error('文件下载失败:', error);
+                showToast('文件下载失败: ' + error.message);
+            }
+        }
+
+        // 初始化文件上传相关事件
+        function initializeFileUpload() {
+            const fileInput = document.getElementById('fileInput');
+            
+            fileInput.addEventListener('change', async (e) => {
+                const file = e.target.files[0];
+                if (!file) return;
+                
+                try {
+                    validateFile(file);
+                    
+                    if (isUploading) return;
+                    isUploading = true;
+                    
+                    await handleFileUpload(file);
+                } catch (error) {
+                    console.error('文件处理失败:', error);
+                    showToast(error.message);
+                } finally {
+                    isUploading = false;
+                    fileInput.value = ''; // 清空文件输入框,允许重复选择相同文件
+                }
+            });
+        }
+
+        // 在页面加载完成后初始化
+        document.addEventListener('DOMContentLoaded', () => {
+            initializeDropZone();
+            initializeFileUpload();
+        });
+
+        // 管理员功能实现
+        // 设置管理员IP
+        function setAdminIp() {
+            const adminIpInput = document.getElementById('adminIpInput');
+            const inputIp = adminIpInput.value.trim();
+            
+            if (!inputIp) {
+                // 清空管理员设置
+                adminIp = null;
+                localStorage.removeItem('adminIp');
+                updateAdminStatus();
+                showToast('已清空管理员设置');
+                return;
+            }
+            
+            // 验证IP格式
+            if (!isValidIp(inputIp)) {
+                showToast('请输入有效的IP地址');
+                return;
+            }
+            
+            adminIp = inputIp;
+            localStorage.setItem('adminIp', adminIp);
+            updateAdminStatus();
+            showToast(`管理员已设置为: ${adminIp}`);
+            
+            adminIpInput.value = '';
+        }
+
+        // 验证IP地址格式
+        function isValidIp(ip) {
+            const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
+            if (!ipRegex.test(ip)) return false;
+            
+            const parts = ip.split('.');
+            return parts.every(part => {
+                const num = parseInt(part, 10);
+                return num >= 0 && num <= 255;
+            });
+        }
+
+        // 更新管理员状态显示
+        function updateAdminStatus() {
+            const adminStatus = document.getElementById('adminStatus');
+            const adminFunctions = document.getElementById('adminFunctions');
+            const statusText = adminStatus.querySelector('.admin-status-text');
+            
+            // 重置样式
+            adminStatus.className = 'admin-status';
+            
+            if (!adminIp) {
+                statusText.textContent = '未设置管理员';
+                adminFunctions.style.display = 'none';
+                isAdmin = false;
+            } else if (myIp === adminIp) {
+                statusText.textContent = '您是管理员';
+                adminStatus.classList.add('is-admin');
+                adminFunctions.style.display = 'block';
+                isAdmin = true;
+            } else {
+                statusText.textContent = `管理员: ${adminIp}`;
+                adminStatus.classList.add('admin-set');
+                adminFunctions.style.display = 'none';
+                isAdmin = false;
+            }
+        }
+
+        // 加载管理员设置
+        function loadAdminSettings() {
+            const savedAdminIp = localStorage.getItem('adminIp');
+            if (savedAdminIp) {
+                adminIp = savedAdminIp;
+                updateAdminStatus();
+            }
+        }
+
+        // 清空所有聊天历史记录
+        async function clearAllChatHistory() {
+            // 先验证管理员权限
+            const hasPermission = await verifyAdminPermission();
+            if (!hasPermission) {
+                return;
+            }
+            
+            // 确认对话框
+            const confirmed = confirm(
+                '⚠️ 警告：此操作将永久删除所有聊天记录！\n' +
+                '包括：\n' +
+                '• 所有群聊消息\n' +
+                '• 所有私聊对话\n' +
+                '• 本地存储的历史记录\n' +
+                '• 服务器端的历史文件\n\n' +
+                '此操作无法撤销，确定要继续吗？'
+            );
+            
+            if (!confirmed) return;
+            
+            // 二次确认
+            const doubleConfirmed = confirm(
+                '🔴 最后确认：您确定要删除所有聊天记录吗？\n' +
+                '这将清空服务器上的所有历史数据。'
+            );
+            
+            if (!doubleConfirmed) return;
+            
+            try {
+                // 先清空本地数据
+                chatHistory.group = [];
+                chatHistory.private = {};
+                unreadMessages = {};
+                
+                // 清空本地存储
+                if (myIp) {
+                    localStorage.removeItem(`chatHistory_${myIp}`);
+                }
+                
+                // 清空所有用户的本地存储（清理可能存在的其他IP记录）
+                Object.keys(localStorage).forEach(key => {
+                    if (key.startsWith('chatHistory_')) {
+                        localStorage.removeItem(key);
+                    }
+                });
+                
+                // 清空当前显示的消息
+                const messageContainer = document.getElementById('messageContainer');
+                messageContainer.innerHTML = '';
+                
+                // 重新初始化聊天列表
+                initializeChatList();
+                
+                // 切换到群聊模式
+                currentMode = 'group';
+                currentChatTarget = null;
+                document.getElementById('chatTitle').textContent = '群聊';
+                updateModeButtons('group');
+                
+                // 发送WebSocket消息通知其他用户并清空服务器历史
+                if (ws && ws.readyState === WebSocket.OPEN) {
+                    const systemMessage = {
+                        type: 'admin_action',
+                        action: 'clear_all_history',
+                        admin_ip: myIp,
+                        message: `管理员 ${myIp} 已清空所有聊天记录`,
+                        timestamp: new Date().getTime()
+                    };
+                    
+                    try {
+                        ws.send(JSON.stringify(systemMessage));
+                    } catch (error) {
+                        console.warn('发送WebSocket通知失败:', error);
+                    }
+                }
+                
+                // 同时调用后端API确保服务器端历史也被清空
+                fetch('/admin/clear_history', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        console.log('服务器端历史记录已清空:', data);
+                        addSystemMessage('✅ 所有聊天记录已被管理员彻底清空（包括服务器历史）');
+                        showToast('✅ 所有聊天记录已成功清空（包括服务器端）');
+                    } else {
+                        console.error('服务器端清空失败:', data.message);
+                        addSystemMessage('⚠️ 本地记录已清空，但服务器端清空可能失败');
+                        showToast('⚠️ 本地清空成功，服务器端可能需要手动处理');
+                    }
+                })
+                .catch(error => {
+                    console.error('调用服务器清空API失败:', error);
+                    addSystemMessage('⚠️ 本地记录已清空，但服务器端清空失败');
+                    showToast('⚠️ 本地清空成功，但服务器端清空失败');
+                });
+                
+                addSystemMessage('🔄 正在清空服务器历史记录...');
+                
+                // 调用后端API清空服务器端历史（包含权限验证）
+                const response = await fetch('/admin/clear_history', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                });
+                
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data.success) {
+                        console.log('服务器端历史记录已清空:', data);
+                        addSystemMessage('✅ 所有聊天记录已被管理员彻底清空（包括服务器历史）');
+                        showToast('✅ 所有聊天记录已成功清空（包括服务器端）');
+                        
+                        // 发送WebSocket消息通知其他用户（服务器端已经广播了，这里不再重复发送）
+                        console.log('管理员操作：所有聊天记录已清空');
+                    } else {
+                        console.error('服务器端清空失败:', data.message);
+                        addSystemMessage('⚠️ 本地记录已清空，但服务器端清空失败');
+                        showToast('⚠️ 本地清空成功，服务器端清空失败');
+                    }
+                } else {
+                    const error = await response.json();
+                    console.error('服务器权限验证失败:', error);
+                    addSystemMessage('❌ 权限验证失败，操作被拒绝');
+                    showToast('❌ 权限不足：' + (error.detail || '操作被拒绝'));
+                }
+                
+            } catch (error) {
+                console.error('清空聊天记录失败:', error);
+                addSystemMessage('❌ 清空操作失败');
+                showToast('❌ 清空操作失败: ' + error.message);
+            }
+        }
+
+        // 管理员权限检查装饰器
+        function requireAdmin(fn) {
+            return function(...args) {
+                if (!isAdmin) {
+                    showToast('此功能仅限管理员使用');
+                    return;
+                }
+                return fn.apply(this, args);
+            };
+        }
+
+        // 初始化管理员相关功能
+        async function initializeAdminFeatures() {
+            // 从后端获取管理员信息
+            await fetchAdminInfo();
+        }
+
+        // 管理员功能实现
+        // 从后端获取管理员信息
+        async function fetchAdminInfo() {
+            try {
+                const response = await fetch('/admin/info');
+                const data = await response.json();
+                
+                adminIp = data.admin_ip;
+                isAdmin = data.is_admin;
+                
+                console.log('管理员信息:', {
+                    adminIp: adminIp,
+                    isAdmin: isAdmin,
+                    clientIp: data.client_ip
+                });
+                
+                updateAdminStatus();
+                return data;
+            } catch (error) {
+                console.error('获取管理员信息失败:', error);
+                showToast('获取管理员信息失败');
+                return null;
+            }
+        }
+
+        // 更新管理员状态显示
+        function updateAdminStatus() {
+            const adminStatus = document.getElementById('adminStatus');
+            const adminFunctions = document.getElementById('adminFunctions');
+            const statusText = adminStatus.querySelector('.admin-status-text');
+            
+            // 重置样式
+            adminStatus.className = 'admin-status';
+            
+            if (!adminIp) {
+                statusText.textContent = '未配置管理员';
+                adminFunctions.style.display = 'none';
+                isAdmin = false;
+            } else if (isAdmin) {
+                statusText.innerHTML = `
+                    <i class="bi bi-shield-check"></i>
+                    您是管理员 (${adminIp})
+                `;
+                adminStatus.classList.add('is-admin');
+                adminFunctions.style.display = 'block';
+            } else {
+                statusText.innerHTML = `
+                    <i class="bi bi-shield"></i>
+                    管理员: ${adminIp}
+                `;
+                adminStatus.classList.add('admin-set');
+                adminFunctions.style.display = 'none';
+            }
+        }
+
+        // 验证管理员权限
+        async function verifyAdminPermission() {
+            if (!isAdmin) {
+                showToast('只有管理员才能执行此操作');
+                return false;
+            }
+            
+            try {
+                const response = await fetch('/admin/verify');
+                if (response.ok) {
+                    const data = await response.json();
+                    return data.verified;
+                } else {
+                    const error = await response.json();
+                    showToast(error.detail || '权限验证失败');
+                    return false;
+                }
+            } catch (error) {
+                console.error('权限验证失败:', error);
+                showToast('权限验证失败');
+                return false;
+            }
+        }
+
+        // 获取IP名称映射
+        async function fetchIpNameMapping() {
+            try {
+                const response = await fetch('/get_ip_names');
+                const data = await response.json();
+                ipNameMapping = data.ip_vs_name || {};
+                ipAvatarMapping = data.ip_vs_avatar || {};
+                console.log('IP名称映射已加载:', ipNameMapping);
+                console.log('IP头像映射已加载:', ipAvatarMapping);
+                
+                // 更新可用用户列表
+                availableUsers = Object.keys(ipNameMapping).filter(ip => ip !== myIp);
+                
+                // 更新所有已显示的IP为名称
+                updateDisplayedNames();
+                
+                return data;
+            } catch (error) {
+                console.error('获取IP名称映射失败:', error);
+                return null;
+            }
+        }
+
+        // 获取显示名称（名称优先，如果没有映射则显示IP）
+        function getDisplayName(ip) {
+            const name = ipNameMapping[ip];
+            return name ? `${name} (${ip})` : ip;
+        }
+
+        // 获取简短显示名称（用于头像等小空间）
+        function getShortDisplayName(ip) {
+            const name = getDisplayName(ip);
+            if (name === ip) {
+                return ip;
+            }
+            // 如果是中文名称，返回前2个字符
+            if (/[\u4e00-\u9fa5]/.test(name)) {
+                return name.substring(0, 2);
+            }
+            // 如果是英文名称，返回前3个字符
+            return name.substring(0, 3);
+        }
+
+        // 更新已显示的所有IP为名称
+        function updateDisplayedNames() {
+            // 更新消息中的IP显示
+            document.querySelectorAll('.ip-info span').forEach(span => {
+                const ip = span.textContent;
+                if (ipNameMapping[ip]) {
+                    span.textContent = getDisplayName(ip);
+                }
+            });
+
+            // 更新用户标签
+            document.querySelectorAll('.user-tag').forEach(tag => {
+                const text = tag.textContent;
+                const ipMatch = text.match(/用户 ([\d.]+)/);
+                if (ipMatch) {
+                    const ip = ipMatch[1];
+                    const name = getDisplayName(ip);
+                    if (name !== ip) {
+                        tag.innerHTML = tag.innerHTML.replace(`用户 ${ip}`, name);
+                    }
+                }
+            });
+
+            // 更新聊天列表中的名称
+            document.querySelectorAll('.chat-item').forEach(item => {
+                const ip = item.getAttribute('data-chat');
+                if (ip !== 'group' && ipNameMapping[ip]) {
+                    const nameElement = item.querySelector('.chat-item-name');
+                    if (nameElement) {
+                        nameElement.textContent = getDisplayName(ip);
+                    }
+                }
+            });
+
+            // 更新当前聊天标题
+            if (currentMode === 'private' && currentChatTarget) {
+                const targetName = getDisplayName(currentChatTarget);
+                document.getElementById('chatTitle').textContent = `与 ${targetName} 的私聊`;
+            }
+
+            // 更新头部IP显示
+            const headerIp = document.getElementById('headerIp');
+            if (headerIp) {
+                headerIp.textContent = getDisplayName(myIp);
+            }
+
+            // 更新侧边栏当前IP显示
+            const currentIpElement = document.getElementById('currentIp');
+            if (currentIpElement) {
+                const myName = getDisplayName(myIp);
+                currentIpElement.textContent = `本机: ${myName}${myName !== myIp ? ` (${myIp})` : ''}`;
+            }
+        }
+
+        // 创建私聊用户选择对话框
+        function showPrivateChatSelector() {
+            // 如果没有可用用户，直接提示输入IP
+            if (availableUsers.length === 0) {
+                const targetIpInput = prompt('没有预设用户，请输入目标IP地址：');
+                if (targetIpInput && targetIpInput.trim()) {
+                    startPrivateChat(targetIpInput.trim());
+                }
+                return;
+            }
+
+            // 创建选择对话框
+            const overlay = document.createElement('div');
+            overlay.style.cssText = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.5);
+                z-index: 2000;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                backdrop-filter: blur(4px);
+            `;
+
+            const dialog = document.createElement('div');
+            dialog.style.cssText = `
+                background: white;
+                border-radius: 16px;
+                padding: 24px;
+                max-width: 400px;
+                width: 90%;
+                max-height: 80vh;
+                overflow-y: auto;
+                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+            `;
+
+            let dialogHTML = `
+                <div style="margin-bottom: 20px;">
+                    <h3 style="margin: 0 0 8px 0; color: var(--primary-color); font-size: 1.2em;">
+                        <i class="bi bi-person-plus" style="margin-right: 8px;"></i>
+                        选择聊天对象
+                    </h3>
+                    <p style="margin: 0; color: #666; font-size: 0.9em;">选择一个用户开始私聊</p>
+                </div>
+                <div style="margin-bottom: 20px;">
+            `;
+
+            // 添加预设用户列表
+            availableUsers.forEach(ip => {
+                const name = getDisplayName(ip);
+                
+                dialogHTML += `
+                    <div class="user-selector-item" onclick="selectPrivateChatUser('${ip}')" style="
+                        display: flex;
+                        align-items: center;
+                        padding: 12px;
+                        border-radius: 12px;
+                        cursor: pointer;
+                        transition: all 0.3s ease;
+                        margin-bottom: 8px;
+                        border: 1px solid #eee;
+                    " onmouseover="this.style.background='#f8f9fa'" onmouseout="this.style.background='transparent'">
+                        <div style="margin-right: 12px;">
+                            ${createAvatarElement(ip, '40px', '1.2em')}
+                        </div>
+                        <div style="flex: 1;">
+                            <div style="font-weight: 500; margin-bottom: 2px;">${name}</div>
+                            <div style="font-size: 0.8em; color: #666;">${ip}</div>
+                        </div>
+                        <i class="bi bi-chevron-right" style="color: #ccc;"></i>
+                    </div>
+                `;
+            });
+
+            dialogHTML += `
+                </div>
+                <div style="border-top: 1px solid #eee; padding-top: 16px;">
+                    <button onclick="showCustomIpInput()" style="
+                        width: 100%;
+                        padding: 12px;
+                        border: 1px solid var(--primary-color);
+                        background: transparent;
+                        color: var(--primary-color);
+                        border-radius: 8px;
+                        cursor: pointer;
+                        margin-bottom: 8px;
+                        transition: all 0.3s ease;
+                    " onmouseover="this.style.background='rgba(74, 144, 226, 0.1)'" onmouseout="this.style.background='transparent'">
+                        <i class="bi bi-plus-circle" style="margin-right: 8px;"></i>
+                        输入其他IP地址
+                    </button>
+                    <button onclick="closePrivateChatSelector()" style="
+                        width: 100%;
+                        padding: 12px;
+                        border: none;
+                        background: #f8f9fa;
+                        color: #666;
+                        border-radius: 8px;
+                        cursor: pointer;
+                        transition: all 0.3s ease;
+                    " onmouseover="this.style.background='#e9ecef'" onmouseout="this.style.background='#f8f9fa'">
+                        取消
+                    </button>
+                </div>
+            `;
+
+            dialog.innerHTML = dialogHTML;
+            overlay.appendChild(dialog);
+            document.body.appendChild(overlay);
+
+            // 保存引用用于关闭
+            window.privateChatSelectorOverlay = overlay;
+        }
+
+        // 选择私聊用户
+        function selectPrivateChatUser(ip) {
+            closePrivateChatSelector();
+            startPrivateChat(ip);
+        }
+
+        // 显示自定义IP输入
+        function showCustomIpInput() {
+            const targetIpInput = prompt('请输入目标IP地址：');
+            if (targetIpInput && targetIpInput.trim()) {
+                closePrivateChatSelector();
+                startPrivateChat(targetIpInput.trim());
+            }
+        }
+
+        // 关闭私聊选择器
+        function closePrivateChatSelector() {
+            if (window.privateChatSelectorOverlay) {
+                document.body.removeChild(window.privateChatSelectorOverlay);
+                window.privateChatSelectorOverlay = null;
+            }
+        }
+
+        // 开始私聊
+        function startPrivateChat(targetIp) {
+            if (targetIp === myIp) {
+                showToast('不能与自己私聊');
+                return;
+            }
+
+            currentMode = 'private';
+            currentChatTarget = targetIp;
+            
+            // 更新UI
+            const targetName = getDisplayName(targetIp);
+            document.getElementById('chatTitle').textContent = `与 ${targetName} 的私聊`;
+            updateModeButtons('private');
+            
+            // 添加或更新聊天列表
+            updateChatList(targetIp, '开始私聊');
+            
+            // 清空并显示私聊消息
+            const messageContainer = document.getElementById('messageContainer');
+            messageContainer.innerHTML = '';
+            
+            if (chatHistory.private[targetIp] && chatHistory.private[targetIp].length > 0) {
+                const sortedMessages = [...chatHistory.private[targetIp]].sort((a, b) => 
+                    (a.timestamp || 0) - (b.timestamp || 0)
+                );
+                
+                sortedMessages.forEach(msg => {
+                    addMessage(msg, true);
+                });
+                
+                addSystemMessage('以上为历史消息');
+            }
+            
+            // 更新聊天项状态
+            updateChatItemStatus(targetIp);
+            
+            // 自动关闭侧边栏（移动端）
+            if (window.innerWidth <= 768 && sidebarVisible) {
+                toggleSidebar();
+            }
+            
+            // 滚动到最新消息
+            setTimeout(() => {
+                messageContainer.scrollTop = messageContainer.scrollHeight;
+            }, 100);
+        }
+
+        // 检测是否为移动设备
+        function isMobileDevice() {
+            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
+                   window.innerWidth <= 768;
+        }
+
+        // 处理图片点击事件
+        function handleImageClick(imageElement, event) {
+            // 阻止事件冒泡
+            event.stopPropagation();
+            
+            // 只在移动端执行点击逻辑
+            if (!isMobileDevice()) {
+                return;
+            }
+            
+            // 切换点击状态
+            const isClicked = imageElement.classList.contains('mobile-clicked');
+            
+            // 先移除所有其他图片的点击状态
+            document.querySelectorAll('.image-message.mobile-clicked').forEach(img => {
+                if (img !== imageElement) {
+                    img.classList.remove('mobile-clicked');
+                }
+            });
+            
+            if (isClicked) {
+                // 如果已经点击过，再次点击则隐藏下载按钮
+                imageElement.classList.remove('mobile-clicked');
+            } else {
+                // 显示下载按钮和信息
+                imageElement.classList.add('mobile-clicked');
+                
+                // 3秒后自动隐藏
+                setTimeout(() => {
+                    imageElement.classList.remove('mobile-clicked');
+                }, 3000);
+            }
+        }
+
+        // 添加全局点击事件监听，点击其他地方时隐藏所有图片下载按钮
+        document.addEventListener('click', function(event) {
+            if (!isMobileDevice()) return;
+            
+            // 如果点击的不是图片消息相关元素，则隐藏所有下载按钮
+            if (!event.target.closest('.image-message')) {
+                document.querySelectorAll('.image-message.mobile-clicked').forEach(img => {
+                    img.classList.remove('mobile-clicked');
+                });
+            }
+        });
+    </script>
+</body>
+</html> 
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..4dab55b
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,6359 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>叠加态 - 局域网文件传输</title>
+    <link rel="icon" type="image/x-icon" href="/image/logo_w.ico">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #4a90e2;
+            --secondary-color: #357abd;
+            --background-color: #f5f7fa;
+            --card-bg: #ffffff;
+            --text-color: #333;
+            --border-radius: 12px;
+            --transition-speed: 0.3s;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            line-height: 1.6;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .nav-bar {
+            display: flex;
+            flex-direction: column;
+            padding: 24px 30px;
+            background: linear-gradient(135deg, var(--card-bg) 0%, rgba(245,247,250,0.8) 100%);
+            border-radius: var(--border-radius);
+            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+            margin-bottom: 30px;
+            border: 1px solid rgba(255,255,255,0.3);
+            backdrop-filter: blur(10px);
+            position: relative;
+            overflow: hidden;
+            gap: 18px;
+        }
+
+        .nav-top-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+        }
+
+        .nav-bottom-row {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            gap: 30px;
+            flex-wrap: wrap;
+            position: relative;
+            padding-top: 18px;
+        }
+
+        .nav-bottom-row::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 20%;
+            right: 20%;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.2), transparent);
+        }
+
+        @media (max-width: 1024px) {
+            .nav-bar {
+                padding: 16px 20px;
+                gap: 15px;
+            }
+            
+            .nav-controls {
+                gap: 18px;
+            }
+            
+            .mobile-switches {
+                gap: 12px;
+            }
+            
+            .quick-upload-switch {
+                padding: 8px 12px;
+            }
+            
+            .switch-label {
+                font-size: 0.8em;
+            }
+        }
+
+        .nav-bar::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), #00d2ff);
+            background-size: 200% 100%;
+            animation: gradientShift 3s ease-in-out infinite;
+        }
+
+        @keyframes gradientShift {
+            0%, 100% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+        }
+
+        /* 添加导航栏悬浮效果 */
+        .nav-bar:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.12);
+        }
+
+        .nav-bar:hover::before {
+            height: 4px;
+            animation-duration: 1.5s;
+        }
+
+        /* 导航栏分隔线 */
+        .nav-controls::before {
+            content: '';
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 1px;
+            height: 30px;
+            background: linear-gradient(to bottom, transparent, rgba(74, 144, 226, 0.3), transparent);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .nav-bar:hover .nav-controls::before {
+            opacity: 1;
+        }
+
+        .user-info {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            padding: 12px 20px;
+            background: rgba(74, 144, 226, 0.05);
+            border-radius: 22px;
+            border: 1px solid rgba(74, 144, 226, 0.1);
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+
+        .user-info:hover {
+            background: rgba(74, 144, 226, 0.1);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
+        }
+
+        .user-avatar {
+            width: 46px;
+            height: 46px;
+            border-radius: 50%;
+            border: 2px solid var(--primary-color);
+            object-fit: cover;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            line-height: 1;
+            background: transparent;
+        }
+
+        .user-avatar.emoji-avatar {
+            background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(74, 144, 226, 0.2));
+        }
+
+        .user-info:hover .user-avatar {
+            transform: scale(1.05);
+            border-color: var(--secondary-color);
+            box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
+        }
+
+        .user-avatar {
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .user-avatar:hover {
+            transform: scale(1.1);
+            border-color: var(--secondary-color);
+            box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
+        }
+
+        /* Admin登录弹窗样式 */
+        .admin-login-modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(5px);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 10000;
+        }
+
+        .admin-login-modal.active {
+            display: flex;
+        }
+
+        .admin-login-content {
+            background: var(--card-bg);
+            padding: 30px;
+            border-radius: var(--border-radius);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            width: 90%;
+            max-width: 400px;
+            position: relative;
+            animation: modalSlideIn 0.3s ease-out;
+        }
+
+        @keyframes modalSlideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-20px) scale(0.95);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0) scale(1);
+            }
+        }
+
+        .admin-login-header {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        .admin-login-header h3 {
+            color: var(--primary-color);
+            margin-bottom: 5px;
+            font-size: 1.5em;
+        }
+
+        .admin-login-header p {
+            color: #666;
+            font-size: 0.9em;
+        }
+
+        .admin-login-form {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+
+        .admin-form-group {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+
+        .admin-form-group label {
+            font-weight: 500;
+            color: var(--text-color);
+        }
+
+        .admin-form-group input {
+            padding: 12px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: border-color 0.3s ease;
+        }
+
+        .admin-form-group input:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
+        }
+
+        .admin-login-buttons {
+            display: flex;
+            gap: 10px;
+            justify-content: space-between;
+            margin-top: 20px;
+        }
+
+        .admin-btn {
+            padding: 12px 20px;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            flex: 1;
+        }
+
+        .admin-btn-primary {
+            background: var(--primary-color);
+            color: white;
+        }
+
+        .admin-btn-primary:hover {
+            background: var(--secondary-color);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
+        }
+
+        .admin-btn-secondary {
+            background: #f5f5f5;
+            color: var(--text-color);
+            border: 1px solid #ddd;
+        }
+
+        .admin-btn-secondary:hover {
+            background: #e8e8e8;
+        }
+
+        .admin-close-btn {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background: none;
+            border: none;
+            font-size: 20px;
+            color: #999;
+            cursor: pointer;
+            width: 30px;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            transition: all 0.3s ease;
+        }
+
+        .admin-close-btn:hover {
+            background: #f0f0f0;
+            color: #666;
+        }
+
+        .admin-login-error {
+            background: #fee;
+            color: #c33;
+            padding: 10px;
+            border-radius: 6px;
+            margin-bottom: 15px;
+            font-size: 14px;
+            border-left: 4px solid #c33;
+        }
+
+        .admin-login-success {
+            background: #efe;
+            color: #363;
+            padding: 10px;
+            border-radius: 6px;
+            margin-bottom: 15px;
+            font-size: 14px;
+            border-left: 4px solid #363;
+        }
+
+        .admin-login-info {
+            background: #e3f2fd;
+            color: #1976d2;
+            padding: 10px;
+            border-radius: 6px;
+            margin-bottom: 15px;
+            font-size: 14px;
+            border-left: 4px solid #1976d2;
+        }
+
+        /* Admin状态指示器 */
+        .admin-indicator {
+            position: absolute;
+            top: -3px;
+            right: -3px;
+            width: 16px;
+            height: 16px;
+            background: #4CAF50;
+            border: 2px solid white;
+            border-radius: 50%;
+            animation: adminPulse 2s infinite;
+        }
+
+        @keyframes adminPulse {
+            0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
+            70% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
+        }
+
+        .admin-badge {
+            background: linear-gradient(135deg, #4CAF50, #45a049);
+            color: white;
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 500;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
+        }
+
+        .user-details {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 2px;
+        }
+
+        .user-name {
+            font-size: 0.9em;
+            font-weight: 600;
+            color: var(--primary-color);
+            margin: 0;
+            line-height: 1.2;
+        }
+
+        .user-role {
+            font-size: 0.75em;
+            color: #666;
+            margin: 0;
+            line-height: 1.2;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .admin-badge {
+            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
+            color: white;
+            padding: 3px 8px;
+            border-radius: 12px;
+            font-size: 0.65em;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            box-shadow: 0 2px 4px rgba(238, 90, 36, 0.3);
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+
+        .nav-bar h1 {
+            color: var(--primary-color);
+            font-size: 1.8em;
+            margin: 0;
+            font-weight: 700;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            white-space: nowrap;
+            flex-shrink: 0;
+            min-width: 0;
+        }
+
+        .nav-bar h1 img {
+            height: 36px !important;
+            width: auto !important;
+            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
+            transition: transform 0.3s ease;
+        }
+
+        .nav-bar h1:hover img {
+            transform: scale(1.05) rotate(5deg);
+        }
+
+        .nav-controls {
+            display: flex;
+            align-items: center;
+            gap: 30px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .mobile-switches {
+            display: flex;
+            gap: 20px;
+            align-items: center;
+        }
+
+        .nav-links {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+
+        .nav-links a {
+            color: var(--primary-color);
+            text-decoration: none;
+            transition: all var(--transition-speed);
+            padding: 12px 20px;
+            border-radius: 25px;
+            background: rgba(74, 144, 226, 0.08);
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            font-weight: 500;
+            font-size: 0.95em;
+            border: 1px solid rgba(74, 144, 226, 0.15);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .nav-links a::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+            transition: left 0.5s;
+        }
+
+        .nav-links a:hover::before {
+            left: 100%;
+        }
+
+        .nav-links a:hover {
+            color: white;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
+            border-color: var(--primary-color);
+        }
+
+        .nav-links a i {
+            font-size: 1.1em;
+            transition: transform 0.3s ease;
+        }
+
+        .nav-links a:hover i {
+            transform: scale(1.1);
+        }
+
+        .upload-section {
+            background: var(--card-bg);
+            padding: 30px;
+            border-radius: var(--border-radius);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            margin-bottom: 30px;
+            text-align: center;
+        }
+
+        .upload-zone {
+            background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(245,247,250,1) 100%);
+            border: 2px dashed rgba(74, 144, 226, 0.3);
+            transition: all 0.3s ease;
+            padding: 40px;
+            margin: 20px 0;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .upload-buttons {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            margin-top: 20px;
+        }
+
+        .upload-btn-style {
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 0.9em;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
+        }
+
+        .upload-btn-style:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
+        }
+
+        .upload-btn-style:active {
+            transform: translateY(-1px);
+        }
+
+        .upload-btn-style:focus {
+            outline: 2px solid var(--primary-color);
+            outline-offset: 2px;
+        }
+
+        .upload-zone:hover {
+            background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(74, 144, 226, 0.1) 100%);
+            border-color: var(--primary-color);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(74, 144, 226, 0.1);
+        }
+
+        .upload-zone.drag-over {
+            border-color: var(--primary-color);
+            background-color: rgba(74, 144, 226, 0.1);
+            transform: scale(1.02);
+        }
+
+        .upload-icon {
+            background: rgba(74, 144, 226, 0.1);
+            width: 80px;
+            height: 80px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            margin: 0 auto 20px;
+            transition: all 0.3s ease;
+        }
+
+        .upload-zone:hover .upload-icon {
+            background: rgba(74, 144, 226, 0.2);
+            transform: scale(1.1);
+        }
+
+        .file-input {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            opacity: 0;
+            overflow: hidden;
+            pointer-events: none;
+        }
+
+        .files-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+            gap: 24px;
+            padding: 24px 0;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .file-card {
+            background: var(--card-bg);
+            border-radius: 16px;
+            padding: 24px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            border: 1px solid rgba(0,0,0,0.06);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .file-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .file-card:hover {
+            transform: translateY(-6px) scale(1.02);
+            box-shadow: 0 12px 32px rgba(0,0,0,0.15);
+            border-color: var(--primary-color);
+        }
+
+        .file-card:hover::before {
+            opacity: 1;
+        }
+
+        .file-icon {
+            background: linear-gradient(145deg, rgba(74, 144, 226, 0.1) 0%, rgba(74, 144, 226, 0.2) 100%);
+            border-radius: 12px;
+            transition: all 0.3s ease;
+            font-size: 24px;
+            color: var(--primary-color);
+            margin-bottom: 10px;
+        }
+
+        .file-card:hover .file-icon {
+            transform: scale(1.1) rotate(5deg);
+        }
+
+        .file-name {
+            font-weight: 700;
+            font-size: 1.1em;
+            margin-bottom: 8px;
+            word-break: break-word;
+            color: #2c3e50;
+            line-height: 1.3;
+        }
+
+        .file-info {
+            color: #666;
+            font-size: 0.9em;
+            line-height: 1.5;
+            margin-top: 16px;
+        }
+
+        .file-info div {
+            margin-bottom: 6px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .file-info i {
+            width: 16px;
+            text-align: center;
+            color: var(--primary-color);
+            opacity: 0.7;
+        }
+
+        .file-actions {
+            margin-top: 20px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+            justify-content: center;
+            padding: 0 10px;
+        }
+
+        .download-btn, .delete-btn, .move-btn, .rename-btn {
+            flex: 1;
+            min-width: 100px;
+            max-width: 140px;
+            padding: 12px 16px;
+            border: none;
+            border-radius: 12px;
+            font-weight: 600;
+            font-size: 0.9em;
+            letter-spacing: 0.3px;
+            text-decoration: none;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+        }
+
+        .download-btn {
+            background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
+            color: white;
+        }
+
+        .delete-btn {
+            background: linear-gradient(135deg, #ea4335 0%, #d33b2c 100%);
+            color: white;
+        }
+
+        .download-btn:hover, .delete-btn:hover, .move-btn:hover, .rename-btn:hover {
+            transform: translateY(-3px) scale(1.02);
+            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+        }
+
+        .download-btn:active, .delete-btn:active, .move-btn:active, .rename-btn:active {
+            transform: translateY(-1px) scale(0.98);
+            transition: all 0.1s ease;
+        }
+
+        /* 按钮图标优化 */
+        .file-actions button i,
+        .file-actions a i {
+            font-size: 1em;
+            margin-right: 6px;
+        }
+
+        .progress-bar {
+            height: 4px;
+            width: 100%;
+            background: #eee;
+            border-radius: 2px;
+            margin-top: 10px;
+            overflow: hidden;
+            display: none;
+        }
+
+        .progress {
+            height: 100%;
+            background: var(--primary-color);
+            width: 0%;
+            transition: width 0.3s ease;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .loading {
+            animation: spin 1s linear infinite;
+        }
+
+        .upload-text {
+            margin-top: 10px;
+            color: #666;
+        }
+
+        .toast {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            padding: 15px 25px;
+            background: #333;
+            color: white;
+            border-radius: var(--border-radius);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+            display: none;
+            animation: slideIn 0.3s ease-out;
+        }
+
+        @keyframes slideIn {
+            from {
+                transform: translateX(100%);
+            }
+            to {
+                transform: translateX(0);
+            }
+        }
+
+        .file-actions {
+            display: flex;
+            gap: 10px;
+            margin-top: 15px;
+        }
+
+        .file-card {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .file-card:hover .file-actions {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        /* 添加删除确认对话框样式 */
+        .dialog-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+        }
+
+        .dialog {
+            background: white;
+            padding: 20px;
+            border-radius: var(--border-radius);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            max-width: 400px;
+            width: 90%;
+        }
+
+        .dialog-buttons {
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+            margin-top: 20px;
+        }
+
+        /* 添加移动端适配样式 */
+        @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+
+            /* 导航栏优化 */
+            .nav-bar {
+                padding: 18px 15px;
+                gap: 16px;
+                margin-bottom: 20px;
+            }
+
+            .nav-top-row {
+                flex-direction: column;
+                gap: 12px;
+                text-align: center;
+            }
+
+            .nav-bar h1 {
+                font-size: 1.4em;
+                justify-content: center;
+            }
+
+            .nav-bar h1 img {
+                height: 28px !important;
+            }
+
+            .nav-bottom-row {
+                flex-direction: column;
+                gap: 16px;
+                padding-top: 12px;
+            }
+
+            .nav-bottom-row::before {
+                display: none;
+            }
+
+            /* 移动端开关组合 */
+            .mobile-switches {
+                gap: 10px;
+                justify-content: center;
+            }
+
+            .quick-upload-switch {
+                flex: 1;
+                max-width: 160px;
+                padding: 10px 14px;
+            }
+
+            .nav-links {
+                justify-content: center;
+                gap: 12px;
+            }
+
+            .nav-links a {
+                padding: 10px 16px;
+                font-size: 0.9em;
+            }
+
+            .nav-links {
+                display: flex;
+                justify-content: center;
+                flex-wrap: wrap;
+                gap: 10px;
+                width: 100%;
+            }
+
+            .nav-links a {
+                margin: 0;
+                font-size: 0.9em;
+                padding: 8px 12px;
+                flex: 1;
+                min-width: 100px;
+                text-align: center;
+                justify-content: center;
+            }
+
+            .user-info {
+                justify-content: center;
+                margin: 0;
+                padding: 10px;
+                background: rgba(74, 144, 226, 0.1);
+                border-radius: 12px;
+            }
+
+            .user-avatar {
+                width: 35px;
+                height: 35px;
+            }
+
+            .user-details {
+                align-items: center;
+                text-align: center;
+            }
+
+            /* 上传区域优化 */
+            .upload-section {
+                padding: 15px;
+                margin-bottom: 15px;
+            }
+
+            .upload-zone {
+                padding: 20px 15px;
+                margin: 10px 0;
+            }
+
+            .upload-icon {
+                font-size: 36px;
+                margin-bottom: 10px;
+            }
+
+            .upload-zone h2 {
+                font-size: 1.1em;
+                margin-bottom: 5px;
+            }
+
+            .upload-text {
+                font-size: 0.9em;
+            }
+
+            /* 文件列表优化 */
+            .files-grid {
+                gap: 15px;
+                padding: 10px;
+            }
+
+            .file-card {
+                margin: 0;
+                padding: 15px;
+            }
+
+            .file-name {
+                font-size: 0.95em;
+            }
+
+            .file-info {
+                font-size: 0.85em;
+            }
+
+            /* 文件操作按钮优化 */
+            .file-actions {
+                flex-direction: column;
+                gap: 10px;
+                margin-top: 16px;
+            }
+
+            .download-btn, .delete-btn, .move-btn, .rename-btn {
+                flex: none;
+                width: 100%;
+                max-width: none;
+                min-width: auto;
+                padding: 14px 16px;
+                font-size: 0.95em;
+            }
+
+            /* Toast 提示优化 */
+            .toast {
+                left: 50%;
+                right: auto;
+                transform: translateX(-50%);
+                width: 90%;
+                max-width: 300px;
+                text-align: center;
+                font-size: 0.9em;
+                padding: 12px 20px;
+            }
+        }
+
+        /* 超小屏幕优化 */
+        @media (max-width: 360px) {
+            .nav-bar h1 {
+                font-size: 1.2em;
+            }
+
+            .upload-zone {
+                padding: 15px 10px;
+            }
+
+            .file-card {
+                padding: 12px;
+            }
+        }
+
+        /* 添加安全区域适配 */
+        @supports (padding: max(0px)) {
+            body {
+                padding-top: max(20px, env(safe-area-inset-top));
+                padding-bottom: max(20px, env(safe-area-inset-bottom));
+                padding-left: max(20px, env(safe-area-inset-left));
+                padding-right: max(20px, env(safe-area-inset-right));
+            }
+        }
+
+        /* 添加触摸反馈 */
+        @media (hover: none) {
+            .file-card:active {
+                transform: scale(0.98);
+            }
+
+            .download-btn:active, .delete-btn:active {
+                transform: scale(0.95);
+            }
+
+            .upload-zone:active {
+                background-color: rgba(74, 144, 226, 0.1);
+            }
+        }
+
+        /* 优化拖放区域 */
+        .upload-zone {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 200px;
+        }
+
+        /* 添加文件上传进度显示 */
+        .upload-progress {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: var(--primary-color);
+            transform-origin: left;
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+            z-index: 1000;
+        }
+
+        /* 优化文件卡片布局 */
+        .file-card {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .file-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+
+        .file-content {
+            flex: 1;
+        }
+
+        /* 添加加载动画 */
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(255, 255, 255, 0.8);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            backdrop-filter: blur(5px);
+        }
+
+        .loading-spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid var(--primary-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        .file-uploader {
+            font-size: 0.9em;
+            color: #666;
+            margin: 5px 0;
+        }
+
+        .file-comment {
+            font-size: 0.9em;
+            color: #666;
+            margin: 5px 0;
+            padding: 5px 10px;
+            background: rgba(74, 144, 226, 0.1);
+            border-radius: 5px;
+            word-break: break-word;
+        }
+
+        .file-header {
+            display: flex;
+            align-items: flex-start;
+            gap: 18px;
+            margin-bottom: 20px;
+        }
+
+        .file-content {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .file-icon {
+            width: 48px;
+            height: 48px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(74, 144, 226, 0.2) 100%);
+            border-radius: 12px;
+            flex-shrink: 0;
+            font-size: 20px;
+            color: var(--primary-color);
+            box-shadow: 0 2px 8px rgba(74, 144, 226, 0.1);
+            position: relative;
+            overflow: hidden;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        /* 文件类型图标样式 */
+        .file-icon.image {
+            background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.2) 100%);
+            color: #4caf50;
+            box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1);
+        }
+
+        .file-icon.video {
+            background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.2) 100%);
+            color: #f44336;
+            box-shadow: 0 2px 8px rgba(244, 67, 54, 0.1);
+        }
+
+        .file-icon.audio {
+            background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.2) 100%);
+            color: #9c27b0;
+            box-shadow: 0 2px 8px rgba(156, 39, 176, 0.1);
+        }
+
+        .file-icon.pdf {
+            background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.2) 100%);
+            color: #f44336;
+            box-shadow: 0 2px 8px rgba(244, 67, 54, 0.1);
+        }
+
+        .file-icon.archive {
+            background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.2) 100%);
+            color: #ff9800;
+            box-shadow: 0 2px 8px rgba(255, 152, 0, 0.1);
+        }
+
+        .file-icon.code {
+            background: linear-gradient(135deg, rgba(96, 125, 139, 0.1) 0%, rgba(96, 125, 139, 0.2) 100%);
+            color: #607d8b;
+            box-shadow: 0 2px 8px rgba(96, 125, 139, 0.1);
+        }
+
+        .file-icon.document {
+            background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.2) 100%);
+            color: #2196f3;
+            box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
+        }
+
+        /* 文件预览缩略图 */
+        .file-thumbnail {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 12px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .file-thumbnail.loaded {
+            opacity: 1;
+        }
+
+        .file-icon:hover {
+            transform: scale(1.05);
+        }
+
+        .file-icon.has-preview:hover .file-thumbnail {
+            opacity: 0.8;
+        }
+
+        /* 播放按钮覆盖层 */
+        .play-overlay {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.6);
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 10px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            cursor: pointer;
+            z-index: 2;
+        }
+
+        .file-icon:hover .play-overlay {
+            opacity: 1;
+        }
+
+        /* 媒体预览模态框 */
+        .media-preview-modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.9);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 2000;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+        }
+
+        .media-preview-modal.active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .media-preview-content {
+            max-width: 90vw;
+            max-height: 90vh;
+            position: relative;
+            background: #fff;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        }
+
+        .media-preview-content img,
+        .media-preview-content video {
+            max-width: 100%;
+            max-height: 90vh;
+            display: block;
+        }
+
+        .media-preview-content audio {
+            width: 450px;
+            min-width: 350px;
+            height: auto;
+            background: #f8f9fa;
+            border-radius: 8px;
+            outline: none;
+        }
+
+        .audio-preview-container {
+            padding: 30px;
+            background: #fff;
+            border-radius: 8px;
+            text-align: center;
+            min-width: 400px;
+            max-width: 500px;
+        }
+
+        .audio-preview-icon {
+            font-size: 48px;
+            color: #9c27b0;
+            margin-bottom: 20px;
+            background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.2) 100%);
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 20px;
+        }
+
+        .audio-preview-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 8px;
+            word-break: break-word;
+        }
+
+        .audio-preview-details {
+            font-size: 14px;
+            color: #666;
+            margin-bottom: 20px;
+        }
+
+        .audio-preview-player {
+            width: 100%;
+            margin-top: 20px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            outline: none;
+            height: 54px;
+            display: block !important;
+        }
+
+        /* 自定义音频控件样式 */
+        .audio-preview-player::-webkit-media-controls-panel {
+            background-color: #f8f9fa;
+            border-radius: 8px;
+        }
+
+        .audio-preview-player::-webkit-media-controls-play-button {
+            background-color: #9c27b0;
+            border-radius: 50%;
+            margin: 0 8px;
+        }
+
+        .audio-preview-player::-webkit-media-controls-timeline {
+            background-color: rgba(156, 39, 176, 0.2);
+            border-radius: 2px;
+            margin: 0 8px;
+        }
+
+        .audio-preview-player::-webkit-media-controls-current-time-display,
+        .audio-preview-player::-webkit-media-controls-time-remaining-display {
+            color: #9c27b0;
+            font-size: 12px;
+        }
+
+        .audio-loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            color: #9c27b0;
+            font-size: 14px;
+        }
+
+        .audio-loading i {
+            animation: spin 1s linear infinite;
+            margin-right: 8px;
+            font-size: 16px;
+        }
+
+        .audio-error {
+            color: #f44336;
+            text-align: center;
+            padding: 20px;
+            font-size: 14px;
+        }
+
+        .audio-error i {
+            font-size: 24px;
+            margin-bottom: 10px;
+            display: block;
+        }
+
+        /* 自定义音频控制按钮 */
+        .audio-custom-controls {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 15px;
+            margin-top: 15px;
+            padding: 15px;
+            background: #f8f9fa;
+            border-radius: 8px;
+        }
+
+        .audio-play-btn {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
+            border: none;
+            color: white;
+            font-size: 20px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
+        }
+
+        .audio-play-btn:hover {
+            background: linear-gradient(135deg, #7b1fa2 0%, #4a148c 100%);
+            transform: scale(1.05);
+            box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4);
+        }
+
+        .audio-time-display {
+            font-family: monospace;
+            font-size: 14px;
+            color: #666;
+            min-width: 100px;
+            text-align: center;
+        }
+
+        .audio-volume-control {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .audio-volume-slider {
+            width: 80px;
+            height: 4px;
+            background: #ddd;
+            border-radius: 2px;
+            outline: none;
+            -webkit-appearance: none;
+            appearance: none;
+        }
+
+        .audio-volume-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: #9c27b0;
+            cursor: pointer;
+        }
+
+        .media-close-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            cursor: pointer;
+            font-size: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 2001;
+            transition: all 0.3s ease;
+        }
+
+        .media-close-btn:hover {
+            background: rgba(0, 0, 0, 0.9);
+        }
+
+        .media-info {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+            color: white;
+            padding: 20px;
+            font-size: 14px;
+        }
+
+        .media-info h3 {
+            margin: 0 0 5px 0;
+            font-size: 16px;
+        }
+
+        .media-info p {
+            margin: 0;
+            opacity: 0.8;
+        }
+
+        /* 移动端媒体预览优化 */
+        @media (max-width: 768px) {
+            .media-preview-content {
+                max-width: 95vw;
+                max-height: 95vh;
+                margin: 20px;
+            }
+
+            .media-preview-content audio {
+                width: 100%;
+                min-width: 280px;
+                padding: 15px;
+            }
+
+            .audio-preview-container {
+                padding: 20px;
+                min-width: 300px;
+                max-width: 90vw;
+                margin: 10px;
+            }
+
+            .audio-preview-icon {
+                width: 60px;
+                height: 60px;
+                font-size: 36px;
+                margin-bottom: 15px;
+            }
+
+            .audio-preview-title {
+                font-size: 14px;
+                margin-bottom: 6px;
+            }
+
+            .audio-preview-details {
+                font-size: 12px;
+                margin-bottom: 15px;
+            }
+
+            .audio-preview-player {
+                margin-top: 15px;
+            }
+
+            .audio-custom-controls {
+                gap: 10px;
+                padding: 12px;
+                flex-wrap: wrap;
+            }
+
+            .audio-play-btn {
+                width: 45px;
+                height: 45px;
+                font-size: 18px;
+            }
+
+            .audio-time-display {
+                font-size: 12px;
+                min-width: 80px;
+            }
+
+            .audio-volume-slider {
+                width: 60px;
+            }
+
+            .media-close-btn {
+                width: 44px;
+                height: 44px;
+                font-size: 18px;
+                top: 5px;
+                right: 5px;
+            }
+
+            .media-info {
+                padding: 15px;
+                font-size: 13px;
+            }
+
+            .media-info h3 {
+                font-size: 14px;
+            }
+
+            .file-icon {
+                width: 40px;
+                height: 40px;
+                font-size: 16px;
+            }
+
+            .play-overlay {
+                width: 20px;
+                height: 20px;
+                font-size: 8px;
+            }
+        }
+
+        /* 移动端优化 */
+        @media (max-width: 768px) {
+            .file-header {
+                gap: 10px;
+            }
+            
+            .file-icon {
+                width: 35px;
+                height: 35px;
+            }
+            
+            .file-uploader,
+            .file-comment {
+                font-size: 0.85em;
+            }
+        }
+
+        .upload-preview {
+            margin-top: 20px;
+            background: white;
+            border-radius: var(--border-radius);
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+
+        .preview-header {
+            padding: 15px 20px;
+            background: #f8f9fa;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid #eee;
+        }
+
+        .preview-header h3 {
+            margin: 0;
+            color: #333;
+            font-size: 1.1em;
+        }
+
+        .clear-btn {
+            background: none;
+            border: none;
+            color: #666;
+            cursor: pointer;
+            padding: 5px;
+            border-radius: 50%;
+            transition: all 0.3s;
+        }
+
+        .clear-btn:hover {
+            background: rgba(0,0,0,0.1);
+        }
+
+        .preview-files {
+            max-height: 300px;
+            overflow-y: auto;
+            padding: 10px;
+        }
+
+        .preview-file {
+            position: relative;
+            display: flex;
+            align-items: center;
+            padding: 15px;
+            border: 1px solid #eee;
+            border-radius: 8px;
+            margin-bottom: 10px;
+            background: #fff;
+            transition: all 0.3s ease;
+        }
+
+        .preview-file:hover {
+            border-color: var(--primary-color);
+            box-shadow: 0 2px 8px rgba(74, 144, 226, 0.1);
+        }
+
+        .remove-file-btn {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            color: #666;
+            cursor: pointer;
+            padding: 5px;
+            border-radius: 50%;
+            opacity: 0;
+            transition: all 0.3s ease;
+        }
+
+        .preview-file:hover .remove-file-btn {
+            opacity: 1;
+        }
+
+        .remove-file-btn:hover {
+            background: rgba(220, 53, 69, 0.1);
+            color: #dc3545;
+        }
+
+        .preview-file-icon {
+            width: 40px;
+            height: 40px;
+            background: rgba(74, 144, 226, 0.1);
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--primary-color);
+            margin-right: 15px;
+            flex-shrink: 0;
+            transition: all 0.3s ease;
+        }
+
+        /* 预览文件图标类型样式 */
+        .preview-file-icon.image {
+            background: rgba(76, 175, 80, 0.1);
+            color: #4caf50;
+        }
+
+        .preview-file-icon.video {
+            background: rgba(244, 67, 54, 0.1);
+            color: #f44336;
+        }
+
+        .preview-file-icon.audio {
+            background: rgba(156, 39, 176, 0.1);
+            color: #9c27b0;
+        }
+
+        .preview-file-icon.pdf {
+            background: rgba(244, 67, 54, 0.1);
+            color: #f44336;
+        }
+
+        .preview-file-icon.archive {
+            background: rgba(255, 152, 0, 0.1);
+            color: #ff9800;
+        }
+
+        .preview-file-icon.code {
+            background: rgba(96, 125, 139, 0.1);
+            color: #607d8b;
+        }
+
+        .preview-file-icon.document {
+            background: rgba(33, 150, 243, 0.1);
+            color: #2196f3;
+        }
+
+        .preview-file-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .preview-file-name {
+            font-weight: 500;
+            margin-bottom: 5px;
+            word-break: break-word;
+        }
+
+        .preview-file-size {
+            font-size: 0.85em;
+            color: #666;
+            margin-bottom: 8px;
+        }
+
+        .preview-file-type {
+            font-size: 0.8em;
+            color: var(--primary-color);
+            font-weight: 500;
+            margin-bottom: 8px;
+        }
+
+        .preview-file-name-container {
+            margin-bottom: 8px;
+        }
+
+        .preview-file-name-container label {
+            display: block;
+            font-size: 0.85em;
+            font-weight: 500;
+            color: #333;
+            margin-bottom: 4px;
+        }
+
+        .preview-file-name-input {
+            width: 100%;
+            padding: 8px 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 0.9em;
+            transition: all 0.3s ease;
+            background: #fff;
+        }
+
+        .preview-file-name-input:focus {
+            border-color: var(--primary-color);
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
+        }
+
+        .preview-file-name-input:invalid,
+        .preview-file-name-input.invalid {
+            border-color: #dc3545;
+            background-color: rgba(220, 53, 69, 0.05);
+        }
+
+        .filename-error {
+            font-size: 0.75em;
+            color: #dc3545;
+            margin-top: 4px;
+            display: block;
+            animation: slideDown 0.3s ease;
+        }
+
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                transform: translateY(-5px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .preview-file-path {
+            font-size: 0.8em;
+            color: #666;
+            margin-bottom: 6px;
+            padding: 4px 8px;
+            background: rgba(74, 144, 226, 0.05);
+            border-radius: 3px;
+            word-break: break-all;
+        }
+
+        .preview-file-comment {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 0.9em;
+            transition: all 0.3s ease;
+        }
+
+        .preview-file-comment:focus {
+            border-color: var(--primary-color);
+            outline: none;
+        }
+
+        .preview-actions {
+            padding: 15px;
+            text-align: right;
+            background: #f8f9fa;
+            border-top: 1px solid #eee;
+        }
+
+        .upload-all-btn {
+            background: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 24px;
+            cursor: pointer;
+            font-size: 0.95em;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.3s ease;
+        }
+
+        .upload-all-btn:hover {
+            background: var(--secondary-color);
+            transform: translateY(-1px);
+        }
+
+        /* 移动端优化 */
+        @media (max-width: 768px) {
+            .preview-file {
+                padding: 12px;
+            }
+
+            .preview-file-icon {
+                width: 35px;
+                height: 35px;
+            }
+
+            .preview-file-name {
+                font-size: 0.9em;
+            }
+
+            .preview-file-size {
+                font-size: 0.8em;
+            }
+
+            .preview-file-comment {
+                padding: 6px;
+                font-size: 0.85em;
+            }
+
+            .preview-file-name-input {
+                padding: 6px 8px;
+                font-size: 0.85em;
+            }
+
+            .preview-file-name-container label {
+                font-size: 0.8em;
+            }
+
+            .filename-error {
+                font-size: 0.7em;
+            }
+
+            .remove-file-btn {
+                opacity: 1;
+                padding: 8px;
+            }
+        }
+
+        .nav-controls {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+
+        .quick-upload-switch {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            cursor: pointer;
+            padding: 12px 18px;
+            border-radius: 18px;
+            background: rgba(74, 144, 226, 0.05);
+            border: 1px solid rgba(74, 144, 226, 0.1);
+            transition: all 0.3s ease;
+            position: relative;
+            white-space: nowrap;
+            flex-shrink: 0;
+        }
+
+        .quick-upload-switch:hover {
+            background: rgba(74, 144, 226, 0.08);
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(74, 144, 226, 0.1);
+        }
+
+        .switch-label {
+            font-size: 0.85em;
+            color: #555;
+            font-weight: 500;
+            line-height: 1.2;
+            user-select: none;
+        }
+
+        .switch-slider {
+            position: relative;
+            display: inline-block;
+            width: 44px;
+            height: 22px;
+            background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
+            border-radius: 22px;
+            transition: all 0.3s ease;
+            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
+        }
+
+        .switch-slider::after {
+            content: '';
+            position: absolute;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #fff, #f8f9fa);
+            top: 2px;
+            left: 2px;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 2px 6px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
+        }
+
+        .quick-upload-switch input {
+            display: none;
+        }
+
+        .quick-upload-switch input:checked + .switch-label + .switch-slider {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 10px rgba(74, 144, 226, 0.3);
+        }
+
+        .quick-upload-switch input:checked + .switch-label + .switch-slider::after {
+            transform: translateX(22px);
+            background: linear-gradient(135deg, #fff, #e3f2fd);
+            box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2), 0 1px 3px rgba(0,0,0,0.1);
+        }
+
+        .quick-upload-switch input:checked + .switch-label {
+            color: var(--primary-color);
+            font-weight: 600;
+        }
+
+        /* 移动端适配 */
+        @media (max-width: 768px) {
+            .nav-controls {
+                width: 100%;
+                flex-direction: column;
+                gap: 15px;
+            }
+
+            .quick-upload-switch {
+                width: 100%;
+                padding: 12px;
+                background: rgba(74, 144, 226, 0.05);
+                border-radius: var(--border-radius);
+                justify-content: space-between;
+            }
+
+            .switch-label {
+                font-size: 0.95em;
+                color: #333;
+                font-weight: 500;
+            }
+
+            .switch-slider {
+                width: 46px;
+                height: 24px;
+            }
+
+            .switch-slider::after {
+                width: 22px;
+                height: 22px;
+            }
+
+            .quick-upload-switch input:checked + .switch-label + .switch-slider::after {
+                transform: translateX(22px);
+            }
+
+            /* 添加开关说明文字 */
+            .quick-upload-hint {
+                font-size: 0.8em;
+                color: #666;
+                padding: 0 15px;
+                margin-top: 4px;
+                display: none;  /* 默认隐藏 */
+            }
+
+            .quick-upload-switch:active .quick-upload-hint {
+                display: block;  /* 长按显示提示 */
+            }
+
+            /* 优化导航栏布局 */
+            .nav-bar {
+                padding: 20px 15px;
+                gap: 15px;
+            }
+
+            .nav-top-row {
+                flex-direction: column;
+                gap: 10px;
+                text-align: center;
+            }
+
+            .nav-bar h1 {
+                font-size: 1.3em;
+                justify-content: center;
+            }
+
+            .nav-bottom-row {
+                gap: 20px;
+            }
+
+            .mobile-switches {
+                justify-content: center;
+                gap: 15px;
+            }
+
+            .quick-upload-switch {
+                padding: 10px 14px;
+            }
+
+            .nav-links {
+                gap: 14px;
+            }
+
+            .nav-links {
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                gap: 15px;
+                padding-top: 10px;
+                border-top: 1px solid rgba(0,0,0,0.05);
+            }
+
+            .nav-links a {
+                padding: 8px 15px;
+                background: rgba(74, 144, 226, 0.1);
+                border-radius: 20px;
+                font-size: 0.9em;
+            }
+
+            .user-info {
+                justify-content: center;
+                padding: 8px 12px;
+                background: rgba(74, 144, 226, 0.1);
+                border-radius: 12px;
+                margin: 0;
+            }
+
+            /* 添加快速上传状态提示 */
+            .upload-status {
+                position: fixed;
+                bottom: 20px;
+                left: 50%;
+                transform: translateX(-50%);
+                background: rgba(0, 0, 0, 0.8);
+                color: white;
+                padding: 10px 20px;
+                border-radius: 20px;
+                font-size: 0.9em;
+                z-index: 1000;
+                display: none;
+                animation: slideUp 0.3s ease;
+            }
+
+            @keyframes slideUp {
+                from {
+                    transform: translate(-50%, 100%);
+                    opacity: 0;
+                }
+                to {
+                    transform: translate(-50%, 0);
+                    opacity: 1;
+                }
+            }
+
+            /* 优化上传区域 */
+            .upload-zone {
+                padding: 25px 15px;
+                margin: 10px 0;
+            }
+
+            .upload-buttons {
+                flex-direction: column;
+                gap: 10px;
+                margin-top: 15px;
+            }
+
+            .upload-btn-style {
+                width: 100%;
+                justify-content: center;
+                padding: 14px 20px;
+                font-size: 1em;
+            }
+
+            .upload-icon {
+                font-size: 36px;
+            }
+
+            .upload-text {
+                font-size: 0.85em;
+                margin-top: 8px;
+                color: #666;
+            }
+
+            /* 快速上传模式下的样式 */
+            .quick-upload-mode .upload-zone {
+                background: rgba(74, 144, 226, 0.05);
+                border-style: solid;
+                border-color: var(--primary-color);
+            }
+
+            .quick-upload-mode .upload-icon {
+                color: var(--primary-color);
+                animation: pulse 1.5s infinite;
+            }
+
+            @keyframes pulse {
+                0% { transform: scale(1); }
+                50% { transform: scale(1.1); }
+                100% { transform: scale(1); }
+            }
+        }
+
+        /* 超小屏幕优化 */
+        @media (max-width: 360px) {
+            .nav-bar h1 {
+                font-size: 1.2em;
+            }
+
+            .quick-upload-switch {
+                padding: 8px 12px;
+            }
+
+            .switch-label {
+                font-size: 0.85em;
+            }
+
+            .nav-links a {
+                padding: 6px 12px;
+                font-size: 0.85em;
+            }
+
+            .user-info {
+                padding: 6px 10px;
+            }
+
+            .user-avatar {
+                width: 30px;
+                height: 30px;
+            }
+
+            .user-name, .user-role {
+                font-size: 0.8em;
+            }
+        }
+
+        /* 添加进度条相关样式 */
+        .upload-progress-container {
+            margin-top: 10px;
+            width: 100%;
+            display: none;
+        }
+
+        .file-progress {
+            background: #f8f9fa;
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 10px;
+            border: 1px solid #eee;
+        }
+
+        .progress-header {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 8px;
+        }
+
+        .progress-filename {
+            font-weight: 500;
+            color: #333;
+            flex: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-right: 10px;
+        }
+
+        .progress-stats {
+            font-size: 0.9em;
+            color: #666;
+            white-space: nowrap;
+        }
+
+        .progress-bar-outer {
+            width: 100%;
+            height: 6px;
+            background: #eee;
+            border-radius: 3px;
+            overflow: hidden;
+        }
+
+        .progress-bar-inner {
+            width: 0%;
+            height: 100%;
+            background: var(--primary-color);
+            border-radius: 3px;
+            transition: width 0.3s ease;
+        }
+
+        .upload-speed {
+            font-size: 0.85em;
+            color: #666;
+            margin-top: 4px;
+        }
+
+        /* 快速上传模式的进度条样式 */
+        .quick-upload .file-progress {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 90%;
+            max-width: 400px;
+            background: white;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            z-index: 1000;
+        }
+
+        .upload-progress-container {
+            margin-top: 15px;
+            padding: 10px;
+            background: #fff;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+
+        .file-progress {
+            margin-bottom: 15px;
+            animation: slideIn 0.3s ease;
+        }
+
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .cancel-upload-btn {
+            background: none;
+            border: none;
+            color: #666;
+            cursor: pointer;
+            padding: 4px;
+            margin-left: 8px;
+            border-radius: 50%;
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+
+        .cancel-upload-btn:hover {
+            background: rgba(220, 53, 69, 0.1);
+            color: #dc3545;
+        }
+
+        .upload-cancelled .progress-bar-inner {
+            background: #dc3545;
+        }
+
+        .upload-cancelled .progress-bar-outer {
+            opacity: 0.5;
+        }
+
+        .file-progress {
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .upload-cancelled {
+            opacity: 0.7;
+        }
+
+        .progress-stats {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .upload-cancelled {
+            opacity: 0.7;
+            transform: translateX(100%);
+            transition: all 0.3s ease;
+        }
+
+        .file-progress {
+            position: relative;
+            transition: all 0.3s ease;
+            overflow: hidden;
+        }
+
+        .upload-all-btn {
+            background: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 24px;
+            cursor: pointer;
+            font-size: 0.95em;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.3s ease;
+        }
+
+        .upload-all-btn:not(:disabled):hover {
+            background: var(--secondary-color);
+            transform: translateY(-1px);
+        }
+
+        .upload-all-btn:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .upload-all-btn i {
+            transition: transform 0.3s ease;
+        }
+
+        .upload-all-btn:not(:disabled):hover i {
+            transform: translateY(-2px);
+        }
+
+        .batch-rename-btn {
+            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 24px;
+            cursor: pointer;
+            font-size: 0.95em;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.3s ease;
+            margin-right: 10px;
+        }
+
+        .batch-rename-btn:hover {
+            background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
+            transform: translateY(-1px);
+        }
+
+        .rename-preview {
+            max-height: 200px;
+            overflow-y: auto;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 10px;
+            background: #f8f9fa;
+            font-family: monospace;
+            font-size: 0.9em;
+        }
+
+        .rename-preview-item {
+            padding: 2px 0;
+            border-bottom: 1px solid #eee;
+        }
+
+        .rename-preview-item:last-child {
+            border-bottom: none;
+        }
+
+        .rename-original {
+            color: #666;
+        }
+
+        .rename-arrow {
+            color: var(--primary-color);
+            margin: 0 8px;
+        }
+
+        .rename-new {
+            color: #28a745;
+            font-weight: 500;
+        }
+
+        /* 文件管理工具栏样式 */
+        .file-toolbar {
+            background: var(--card-bg);
+            padding: 20px;
+            border-radius: var(--border-radius);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 15px;
+        }
+
+        .toolbar-left {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            flex-wrap: wrap;
+        }
+
+        .toolbar-right {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            flex-wrap: wrap;
+        }
+
+        .breadcrumb {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            font-size: 0.9em;
+        }
+
+        .breadcrumb a {
+            color: var(--primary-color);
+            text-decoration: none;
+            padding: 5px 10px;
+            border-radius: 5px;
+            transition: all 0.3s;
+        }
+
+        .breadcrumb a:hover {
+            background: rgba(74, 144, 226, 0.1);
+        }
+
+        .breadcrumb .separator {
+            color: #666;
+            margin: 0 5px;
+        }
+
+        .search-box {
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+
+        .search-box input {
+            padding: 10px 40px 10px 15px;
+            border: 1px solid #ddd;
+            border-radius: 25px;
+            font-size: 0.9em;
+            width: 250px;
+            transition: all 0.3s;
+        }
+
+        .search-box input:focus {
+            border-color: var(--primary-color);
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
+        }
+
+        .search-box i {
+            position: absolute;
+            right: 15px;
+            color: #666;
+            pointer-events: none;
+        }
+
+        .sort-controls {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .sort-controls select {
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            background: white;
+            font-size: 0.9em;
+        }
+
+        .sort-order-btn, .layout-toggle-btn {
+            background: none;
+            border: 1px solid #ddd;
+            padding: 8px 12px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .sort-order-btn:hover, .layout-toggle-btn:hover {
+            background: rgba(74, 144, 226, 0.1);
+            border-color: var(--primary-color);
+        }
+
+        .layout-toggle-btn.active {
+            background: var(--primary-color);
+            color: white;
+            border-color: var(--primary-color);
+        }
+
+        .btn {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 0.9em;
+            transition: all 0.3s;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .btn-primary {
+            background: var(--primary-color);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: var(--secondary-color);
+        }
+
+        .btn-secondary {
+            background: #6c757d;
+            color: white;
+        }
+
+        .btn-secondary:hover {
+            background: #5a6268;
+        }
+
+        /* 模态框样式 */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            backdrop-filter: blur(5px);
+        }
+
+        .modal {
+            background: white;
+            border-radius: var(--border-radius);
+            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+            max-width: 500px;
+            width: 90%;
+            max-height: 80vh;
+            overflow-y: auto;
+        }
+
+        .modal-header {
+            padding: 20px;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .modal-header h3 {
+            margin: 0;
+            color: #333;
+        }
+
+        .close-btn {
+            background: none;
+            border: none;
+            font-size: 1.2em;
+            cursor: pointer;
+            color: #666;
+            padding: 5px;
+            border-radius: 50%;
+            transition: all 0.3s;
+        }
+
+        .close-btn:hover {
+            background: rgba(0,0,0,0.1);
+        }
+
+        .modal-body {
+            padding: 20px;
+        }
+
+        .modal-footer {
+            padding: 20px;
+            border-top: 1px solid #eee;
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+        }
+
+        .form-group {
+            margin-bottom: 15px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 500;
+            color: #333;
+        }
+
+        .form-group input,
+        .form-group select {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-size: 0.9em;
+            transition: all 0.3s;
+        }
+
+        .form-group input:focus,
+        .form-group select:focus {
+            border-color: var(--primary-color);
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
+        }
+
+        /* 文件卡片增强 */
+        .file-card {
+            position: relative;
+        }
+
+        .file-card.folder {
+            border-left: 4px solid #ffc107;
+            background: linear-gradient(135deg, rgba(255, 193, 7, 0.02) 0%, rgba(255, 193, 7, 0.05) 100%);
+        }
+
+        .file-card.folder .file-icon {
+            background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.25) 100%);
+            color: #ffc107;
+            box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
+        }
+
+        .file-card.folder:hover {
+            border-left-color: #e0a800;
+            background: linear-gradient(135deg, rgba(255, 193, 7, 0.05) 0%, rgba(255, 193, 7, 0.08) 100%);
+        }
+
+        .move-btn {
+            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
+            color: white;
+        }
+
+        .rename-btn {
+            background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
+            color: white;
+        }
+
+        /* 紧凑布局样式 */
+        .files-grid.compact {
+            grid-template-columns: 1fr;
+            gap: 8px;
+        }
+
+        .file-card.compact {
+            padding: 12px 16px;
+            border-radius: 8px;
+            flex-direction: row;
+            align-items: center;
+            gap: 12px;
+            min-height: 60px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            transition: all 0.2s ease;
+        }
+
+        .file-card.compact::before {
+            height: 2px;
+        }
+
+        .file-card.compact:hover {
+            transform: translateY(-1px) scale(1.005);
+            box-shadow: 0 3px 8px rgba(0,0,0,0.15);
+        }
+
+        .file-card.compact .file-header {
+            flex: 1;
+            margin-bottom: 0;
+            gap: 12px;
+            align-items: center;
+        }
+
+        .file-card.compact .file-icon {
+            width: 32px;
+            height: 32px;
+            font-size: 14px;
+            margin-bottom: 0;
+            flex-shrink: 0;
+        }
+
+        /* 紧凑模式下的文件类型样式 */
+        .file-card.compact .file-icon.image {
+            background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.2) 100%);
+            color: #4caf50;
+        }
+
+        .file-card.compact .file-icon.video {
+            background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.2) 100%);
+            color: #f44336;
+        }
+
+        .file-card.compact .file-icon.audio {
+            background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.2) 100%);
+            color: #9c27b0;
+        }
+
+        .file-card.compact .file-icon.pdf {
+            background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.2) 100%);
+            color: #f44336;
+        }
+
+        .file-card.compact .file-icon.archive {
+            background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.2) 100%);
+            color: #ff9800;
+        }
+
+        .file-card.compact .file-icon.code {
+            background: linear-gradient(135deg, rgba(96, 125, 139, 0.1) 0%, rgba(96, 125, 139, 0.2) 100%);
+            color: #607d8b;
+        }
+
+        .file-card.compact .file-icon.document {
+            background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.2) 100%);
+            color: #2196f3;
+        }
+
+        .file-card.compact .play-overlay {
+            width: 18px;
+            height: 18px;
+            font-size: 8px;
+        }
+
+        .file-card.compact .file-content {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .file-card.compact .file-name {
+            font-size: 0.95em;
+            margin-bottom: 2px;
+            line-height: 1.2;
+        }
+
+        .file-card.compact .file-uploader {
+            font-size: 0.8em;
+            margin: 0;
+            line-height: 1.2;
+        }
+
+        .file-card.compact .file-comment {
+            font-size: 0.8em;
+            margin: 2px 0 0 0;
+            padding: 2px 6px;
+            line-height: 1.2;
+        }
+
+        .file-card.compact .file-info {
+            display: flex;
+            gap: 15px;
+            margin: 0;
+            font-size: 0.8em;
+            color: #666;
+            flex-wrap: wrap;
+        }
+
+        .file-card.compact .file-info div {
+            margin: 0;
+            white-space: nowrap;
+        }
+
+        .file-card.compact .file-actions {
+            margin: 0;
+            flex-direction: row;
+            gap: 6px;
+            flex-shrink: 0;
+        }
+
+        .file-card.compact .download-btn, 
+        .file-card.compact .delete-btn, 
+        .file-card.compact .move-btn, 
+        .file-card.compact .rename-btn {
+            padding: 6px 10px;
+            font-size: 0.8em;
+            min-width: auto;
+            max-width: auto;
+            flex: none;
+        }
+
+        .file-card.compact .download-btn i,
+        .file-card.compact .delete-btn i,
+        .file-card.compact .move-btn i,
+        .file-card.compact .rename-btn i {
+            margin-right: 3px;
+            font-size: 0.9em;
+        }
+
+        /* 紧凑模式下的文件夹样式 */
+        .file-card.compact.folder {
+            border-left-width: 3px;
+        }
+
+        /* 移动端适配增强 */
+        @media (max-width: 768px) {
+            .file-toolbar {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .toolbar-left,
+            .toolbar-right {
+                width: 100%;
+                justify-content: space-between;
+            }
+
+            .search-box input {
+                width: 100%;
+                max-width: 200px;
+            }
+
+            .sort-controls {
+                flex-wrap: wrap;
+            }
+
+            .modal {
+                margin: 20px;
+                width: calc(100% - 40px);
+            }
+
+            /* 移动端紧凑布局优化 */
+            .file-card.compact {
+                padding: 10px 12px;
+                flex-direction: column;
+                align-items: stretch;
+                min-height: auto;
+            }
+
+            .file-card.compact .file-header {
+                margin-bottom: 8px;
+            }
+
+            .file-card.compact .file-info {
+                justify-content: flex-start;
+                gap: 10px;
+                margin-bottom: 8px;
+            }
+
+            .file-card.compact .file-actions {
+                flex-direction: row;
+                justify-content: center;
+                flex-wrap: wrap;
+                gap: 8px;
+            }
+
+            .file-card.compact .download-btn, 
+            .file-card.compact .delete-btn, 
+            .file-card.compact .move-btn, 
+            .file-card.compact .rename-btn {
+                flex: 1;
+                min-width: 80px;
+                max-width: 120px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="nav-bar">
+            <div class="nav-top-row">
+                <h1>
+                    <img src="/image/logo2.png" alt="Logo">
+                    内网文件传输
+                </h1>
+                <div class="user-info" id="userInfo" style="display: none;">
+                    <div class="user-avatar" id="userAvatar"></div>
+                    <div class="user-details">
+                        <p class="user-name" id="userName">用户</p>
+                        <p class="user-role" id="userRole">IP: <span id="userIP">-</span></p>
+                    </div>
+                </div>
+            </div>
+            <div class="nav-bottom-row">
+                <div class="mobile-switches">
+                    <label class="quick-upload-switch">
+                        <input type="checkbox" id="quickUploadToggle">
+                        <span class="switch-label">快速上传</span>
+                        <span class="switch-slider"></span>
+                    </label>
+                    <label class="quick-upload-switch">
+                        <input type="checkbox" id="skipValidationToggle">
+                        <span class="switch-label">跳过文件名检查</span>
+                        <span class="switch-slider"></span>
+                    </label>
+                </div>
+                <div class="nav-links">
+                    <a href="/"><i class="fas fa-home"></i> 首页</a>
+                    <a href="/chat"><i class="fas fa-comments"></i> 聊天室</a>
+                    <!-- //// / -->
+                    <a href="#" onclick="showInternalAssets()"><i class="fas fa-network-wired"></i> 内网资产</a>
+                    <a href="http://6.6.6.86:3321" target="_blank"><i class="fas fa-code-branch"></i> gitea代码仓库</a>
+                </div>
+            </div>
+        </div>
+
+        <!-- 文件管理工具栏 -->
+        <div class="file-toolbar">
+            <div class="toolbar-left">
+                <div class="breadcrumb" id="breadcrumb">
+                    <a href="#" onclick="navigateToFolder('')">
+                        <i class="fas fa-home"></i> 根目录
+                    </a>
+                </div>
+                <button class="btn btn-secondary" id="backBtn" onclick="goBack()" style="display: none;">
+                    <i class="fas fa-arrow-left"></i> 返回上级
+                </button>
+                <button class="btn btn-primary" onclick="showCreateFolderDialog()">
+                    <i class="fas fa-folder-plus"></i> 新建文件夹
+                </button>
+            </div>
+            <div class="toolbar-right">
+                <div class="search-box">
+                    <input type="text" id="searchInput" placeholder="搜索文件名或上传者..." onkeyup="handleSearch(event)">
+                    <i class="fas fa-search"></i>
+                </div>
+                <div class="sort-controls">
+                    <select id="sortBy" onchange="applySortAndSearch()">
+                        <option value="name">按名称排序</option>
+                        <option value="time">按时间排序</option>
+                        <option value="uploader_ip">按上传者排序</option>
+                        <option value="size">按大小排序</option>
+                    </select>
+                    <button class="sort-order-btn" id="sortOrderBtn" onclick="toggleSortOrder()">
+                        <i class="fas fa-sort-alpha-down"></i>
+                    </button>
+                    <button class="layout-toggle-btn" id="layoutToggleBtn" onclick="toggleLayout()" title="切换布局模式">
+                        <i class="fas fa-th-large"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div class="upload-section">
+            <div class="upload-zone" id="dropZone">
+                <i class="fas fa-cloud-upload-alt upload-icon"></i>
+                <h2>拖拽文件或文件夹到这里上传</h2>
+                <p class="upload-text">支持多文件和文件夹上传</p>
+                <div class="upload-buttons">
+                    <button type="button" class="upload-btn-style" onclick="selectFiles()">
+                        <i class="fas fa-file"></i> 选择文件
+                    </button>
+                    <button type="button" class="upload-btn-style" onclick="selectFolder()">
+                        <i class="fas fa-folder"></i> 选择文件夹
+                    </button>
+                </div>
+                <input type="file" id="fileInput" class="file-input" multiple>
+                <input type="file" id="folderInput" class="file-input" multiple webkitdirectory style="display: none;">
+            </div>
+            <div class="upload-preview" id="uploadPreview" style="display: none;">
+                <div class="preview-header">
+                    <h3>准备上传</h3>
+                    <button class="clear-btn" onclick="clearPreview()">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="preview-files" id="previewFiles"></div>
+                <div class="preview-actions">
+                    <button class="batch-rename-btn" onclick="showBatchRenameDialog()" title="批量重命名">
+                        <i class="fas fa-edit"></i> 批量重命名
+                    </button>
+                    <button class="upload-all-btn" onclick="uploadAllFiles()">
+                        <i class="fas fa-cloud-upload-alt"></i> 开始上传
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div class="files-grid" id="fileList">
+            <!-- 文件列表将通过 JavaScript 动态添加 -->
+        </div>
+    </div>
+
+    <div class="toast" id="toast"></div>
+
+    <!-- 媒体预览模态框 -->
+    <div class="media-preview-modal" id="mediaPreviewModal">
+        <div class="media-preview-content" id="mediaPreviewContent">
+            <button class="media-close-btn" onclick="closeMediaPreview()">
+                <i class="fas fa-times"></i>
+            </button>
+            <div id="mediaContainer"></div>
+            <div class="media-info" id="mediaInfo" style="display: none;">
+                <h3 id="mediaTitle"></h3>
+                <p id="mediaDetails"></p>
+            </div>
+        </div>
+    </div>
+
+    <!-- 创建文件夹对话框 -->
+    <div class="modal-overlay" id="createFolderModal" style="display: none;">
+        <div class="modal">
+            <div class="modal-header">
+                <h3>创建新文件夹</h3>
+                <button class="close-btn" onclick="hideCreateFolderDialog()">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label for="folderNameInput">文件夹名称：</label>
+                    <input type="text" id="folderNameInput" placeholder="请输入文件夹名称" maxlength="50">
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" onclick="hideCreateFolderDialog()">取消</button>
+                <button class="btn btn-primary" onclick="createFolder()">创建</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 移动文件对话框 -->
+    <div class="modal-overlay" id="moveFileModal" style="display: none;">
+        <div class="modal">
+            <div class="modal-header">
+                <h3>移动文件</h3>
+                <button class="close-btn" onclick="hideMoveFileDialog()">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>将文件 "<span id="moveFileName"></span>" 移动到：</p>
+                <div class="form-group">
+                    <label for="targetFolderSelect">目标文件夹：</label>
+                    <select id="targetFolderSelect">
+                        <option value="">根目录</option>
+                    </select>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" onclick="hideMoveFileDialog()">取消</button>
+                <button class="btn btn-primary" onclick="confirmMoveFile()">移动</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 重命名文件对话框 -->
+    <div class="modal-overlay" id="renameFileModal" style="display: none;">
+        <div class="modal">
+            <div class="modal-header">
+                <h3>重命名文件</h3>
+                <button class="close-btn" onclick="hideRenameFileDialog()">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>当前文件名：<span id="currentFileName"></span></p>
+                <div class="form-group">
+                    <label for="newFileNameInput">新文件名：</label>
+                    <input type="text" id="newFileNameInput" placeholder="请输入新文件名" maxlength="100">
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" onclick="hideRenameFileDialog()">取消</button>
+                <button class="btn btn-primary" onclick="confirmRenameFile()">重命名</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 重命名文件夹对话框 -->
+    <div class="modal-overlay" id="renameFolderModal" style="display: none;">
+        <div class="modal">
+            <div class="modal-header">
+                <h3>重命名文件夹</h3>
+                <button class="close-btn" onclick="hideRenameFolderDialog()">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>当前文件夹名：<span id="currentFolderName"></span></p>
+                <div class="form-group">
+                    <label for="newFolderNameInput">新文件夹名：</label>
+                    <input type="text" id="newFolderNameInput" placeholder="请输入新文件夹名" maxlength="50">
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" onclick="hideRenameFolderDialog()">取消</button>
+                <button class="btn btn-primary" onclick="confirmRenameFolder()">重命名</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 批量重命名对话框 -->
+    <div class="modal-overlay" id="batchRenameModal" style="display: none;">
+        <div class="modal">
+            <div class="modal-header">
+                <h3>批量重命名</h3>
+                <button class="close-btn" onclick="hideBatchRenameDialog()">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label for="renamePattern">命名模式：</label>
+                    <select id="renamePattern" onchange="updateRenamePreview()">
+                        <option value="sequential">序号命名 (文件1, 文件2, ...)</option>
+                        <option value="timestamp">时间戳命名</option>
+                        <option value="prefix">添加前缀</option>
+                        <option value="suffix">添加后缀</option>
+                        <option value="custom">自定义模式</option>
+                    </select>
+                </div>
+                <div class="form-group" id="customInputGroup" style="display: none;">
+                    <label for="customInput">自定义内容：</label>
+                    <input type="text" id="customInput" placeholder="输入前缀/后缀/自定义模式" oninput="updateRenamePreview()">
+                    <small>自定义模式支持：{name} = 原文件名, {index} = 序号, {ext} = 扩展名</small>
+                </div>
+                <div class="form-group">
+                    <label>预览效果：</label>
+                    <div id="renamePreview" class="rename-preview"></div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" onclick="hideBatchRenameDialog()">取消</button>
+                <button class="btn btn-primary" onclick="applyBatchRename()">应用</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // 文件类型检测和图标映射
+        function getFileType(filename) {
+            const ext = filename.toLowerCase().split('.').pop();
+            
+            // 图片文件
+            if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico'].includes(ext)) {
+                return 'image';
+            }
+            
+            // 视频文件
+            if (['mp4', 'avi', 'mkv', 'mov', 'wmv', 'flv', 'webm', 'm4v', '3gp'].includes(ext)) {
+                return 'video';
+            }
+            
+            // 音频文件
+            if (['mp3', 'wav', 'flac', 'aac', 'ogg', 'wma', 'm4a', 'opus'].includes(ext)) {
+                return 'audio';
+            }
+            
+            // PDF文件
+            if (ext === 'pdf') {
+                return 'pdf';
+            }
+            
+            // 压缩文件
+            if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2', 'xz'].includes(ext)) {
+                return 'archive';
+            }
+            
+            // 代码文件
+            if (['js', 'ts', 'py', 'java', 'cpp', 'c', 'h', 'css', 'html', 'php', 'rb', 'go', 'rs', 'swift'].includes(ext)) {
+                return 'code';
+            }
+            
+            // 文档文件
+            if (['doc', 'docx', 'txt', 'rtf', 'odt', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) {
+                return 'document';
+            }
+            
+            return 'file';
+        }
+
+        function getFileIcon(fileType) {
+            const iconMap = {
+                'image': 'fa-image',
+                'video': 'fa-video',
+                'audio': 'fa-music',
+                'pdf': 'fa-file-pdf',
+                'archive': 'fa-file-archive',
+                'code': 'fa-code',
+                'document': 'fa-file-alt',
+                'file': 'fa-file'
+            };
+            return iconMap[fileType] || 'fa-file';
+        }
+
+        function canPreview(fileType) {
+            return ['image', 'video', 'audio'].includes(fileType);
+        }
+
+        // 媒体预览功能
+        function openMediaPreview(filePath, fileName, fileType) {
+            const modal = document.getElementById('mediaPreviewModal');
+            const container = document.getElementById('mediaContainer');
+            const info = document.getElementById('mediaInfo');
+            const title = document.getElementById('mediaTitle');
+            const details = document.getElementById('mediaDetails');
+            
+            // 清空容器
+            container.innerHTML = '';
+            
+            let mediaElement;
+            const fileUrl = `/uploads/${filePath}`;
+            
+            if (fileType === 'image') {
+                mediaElement = document.createElement('img');
+                mediaElement.src = fileUrl;
+                mediaElement.alt = fileName;
+                mediaElement.onload = function() {
+                    details.textContent = `分辨率: ${this.naturalWidth} × ${this.naturalHeight}`;
+                };
+            } else if (fileType === 'video') {
+                mediaElement = document.createElement('video');
+                mediaElement.src = fileUrl;
+                mediaElement.controls = true;
+                mediaElement.autoplay = false;
+                mediaElement.onloadedmetadata = function() {
+                    const duration = Math.round(this.duration);
+                    const minutes = Math.floor(duration / 60);
+                    const seconds = duration % 60;
+                    details.textContent = `时长: ${minutes}:${seconds.toString().padStart(2, '0')} | 分辨率: ${this.videoWidth} × ${this.videoHeight}`;
+                };
+            } else if (fileType === 'audio') {
+                // 创建音频预览容器
+                const audioContainer = document.createElement('div');
+                audioContainer.className = 'audio-preview-container';
+                
+                // 音频图标
+                const audioIcon = document.createElement('div');
+                audioIcon.className = 'audio-preview-icon';
+                audioIcon.innerHTML = '<i class="fas fa-music"></i>';
+                
+                // 文件标题
+                const audioTitle = document.createElement('div');
+                audioTitle.className = 'audio-preview-title';
+                audioTitle.textContent = fileName;
+                
+                // 文件详情
+                const audioDetails = document.createElement('div');
+                audioDetails.className = 'audio-preview-details';
+                audioDetails.textContent = '正在加载音频信息...';
+                
+                // 音频播放器
+                mediaElement = document.createElement('audio');
+                mediaElement.className = 'audio-preview-player';
+                mediaElement.src = fileUrl;
+                mediaElement.controls = true;
+                mediaElement.autoplay = false;
+                mediaElement.preload = 'metadata';
+                mediaElement.controlsList = 'nodownload';
+                
+                // 确保控件显示
+                mediaElement.setAttribute('controls', 'controls');
+                mediaElement.style.display = 'block';
+                mediaElement.style.width = '100%';
+                mediaElement.style.height = '54px';
+                
+                // 添加加载状态
+                let isLoading = true;
+                let loadTimeout = setTimeout(() => {
+                    if (isLoading) {
+                        audioDetails.innerHTML = '<i class="fas fa-spinner"></i> 加载中...';
+                        audioDetails.className = 'audio-preview-details audio-loading';
+                    }
+                }, 500);
+                
+                mediaElement.onloadedmetadata = function() {
+                    isLoading = false;
+                    clearTimeout(loadTimeout);
+                    audioDetails.className = 'audio-preview-details';
+                    
+                    const duration = Math.round(this.duration);
+                    const minutes = Math.floor(duration / 60);
+                    const seconds = duration % 60;
+                    audioDetails.textContent = `时长: ${minutes}:${seconds.toString().padStart(2, '0')}`;
+                };
+                
+                mediaElement.onerror = function(e) {
+                    isLoading = false;
+                    clearTimeout(loadTimeout);
+                    audioDetails.className = 'audio-preview-details audio-error';
+                    audioDetails.innerHTML = '<i class="fas fa-exclamation-triangle"></i>音频文件加载失败<br><small>请检查文件格式或网络连接</small>';
+                    
+                    // 隐藏播放器控件
+                    mediaElement.style.display = 'none';
+                };
+                
+                mediaElement.onloadstart = function() {
+                    audioDetails.textContent = '正在加载音频信息...';
+                    audioDetails.className = 'audio-preview-details';
+                };
+                
+                mediaElement.oncanplay = function() {
+                    isLoading = false;
+                    clearTimeout(loadTimeout);
+                    
+                    if (audioDetails.textContent.includes('加载')) {
+                        const duration = Math.round(this.duration);
+                        const minutes = Math.floor(duration / 60);
+                        const seconds = duration % 60;
+                        audioDetails.textContent = `时长: ${minutes}:${seconds.toString().padStart(2, '0')}`;
+                        audioDetails.className = 'audio-preview-details';
+                    }
+                    
+                    // 确保控件可见
+                    setTimeout(() => {
+                        if (mediaElement.offsetHeight < 30 || !mediaElement.controls) {
+                            // 如果原生控件有问题，显示自定义控件
+                            customControls.style.display = 'flex';
+                            mediaElement.style.display = 'none';
+                        } else {
+                            // 原生控件正常，确保它们可见
+                            mediaElement.style.display = 'block';
+                        }
+                    }, 500);
+                };
+                
+                // 设置超时处理
+                setTimeout(() => {
+                    if (isLoading && mediaElement.readyState === 0) {
+                        isLoading = false;
+                        clearTimeout(loadTimeout);
+                        audioDetails.className = 'audio-preview-details audio-error';
+                        audioDetails.innerHTML = '<i class="fas fa-exclamation-triangle"></i>音频加载超时<br><small>请检查网络连接后重试</small>';
+                        mediaElement.style.display = 'none';
+                    }
+                }, 10000); // 10秒超时
+                
+                // 创建自定义控制按钮
+                const customControls = document.createElement('div');
+                customControls.className = 'audio-custom-controls';
+                customControls.style.display = 'none'; // 默认隐藏，仅在原生控件有问题时显示
+                
+                const playBtn = document.createElement('button');
+                playBtn.className = 'audio-play-btn';
+                playBtn.innerHTML = '<i class="fas fa-play"></i>';
+                
+                const timeDisplay = document.createElement('div');
+                timeDisplay.className = 'audio-time-display';
+                timeDisplay.textContent = '0:00 / 0:00';
+                
+                const volumeControl = document.createElement('div');
+                volumeControl.className = 'audio-volume-control';
+                volumeControl.innerHTML = `
+                    <i class="fas fa-volume-up" style="color: #9c27b0; font-size: 16px;"></i>
+                    <input type="range" class="audio-volume-slider" min="0" max="100" value="100">
+                `;
+                
+                customControls.appendChild(playBtn);
+                customControls.appendChild(timeDisplay);
+                customControls.appendChild(volumeControl);
+                
+                // 播放/暂停功能
+                let isPlaying = false;
+                playBtn.onclick = function() {
+                    if (isPlaying) {
+                        mediaElement.pause();
+                        playBtn.innerHTML = '<i class="fas fa-play"></i>';
+                        isPlaying = false;
+                    } else {
+                        mediaElement.play();
+                        playBtn.innerHTML = '<i class="fas fa-pause"></i>';
+                        isPlaying = true;
+                    }
+                };
+                
+                // 音量控制
+                const volumeSlider = volumeControl.querySelector('.audio-volume-slider');
+                volumeSlider.oninput = function() {
+                    mediaElement.volume = this.value / 100;
+                };
+                
+                // 时间更新
+                mediaElement.ontimeupdate = function() {
+                    const current = Math.floor(this.currentTime);
+                    const duration = Math.floor(this.duration) || 0;
+                    const currentMin = Math.floor(current / 60);
+                    const currentSec = current % 60;
+                    const durationMin = Math.floor(duration / 60);
+                    const durationSec = duration % 60;
+                    timeDisplay.textContent = `${currentMin}:${currentSec.toString().padStart(2, '0')} / ${durationMin}:${durationSec.toString().padStart(2, '0')}`;
+                };
+                
+                // 播放结束
+                mediaElement.onended = function() {
+                    playBtn.innerHTML = '<i class="fas fa-play"></i>';
+                    isPlaying = false;
+                };
+                
+                // 检查原生控件是否工作
+                setTimeout(() => {
+                    const computedStyle = window.getComputedStyle(mediaElement);
+                    if (computedStyle.height === '0px' || mediaElement.offsetHeight < 30) {
+                        // 原生控件可能有问题，显示自定义控件
+                        customControls.style.display = 'flex';
+                        mediaElement.style.display = 'none';
+                    }
+                }, 1000);
+                
+                // 组装容器
+                audioContainer.appendChild(audioIcon);
+                audioContainer.appendChild(audioTitle);
+                audioContainer.appendChild(audioDetails);
+                audioContainer.appendChild(mediaElement);
+                audioContainer.appendChild(customControls);
+                
+                container.appendChild(audioContainer);
+                
+                // 不使用默认的info显示
+                info.style.display = 'none';
+                modal.classList.add('active');
+                
+                // 点击模态框背景关闭
+                modal.onclick = function(e) {
+                    if (e.target === modal) {
+                        closeMediaPreview();
+                    }
+                };
+                
+                // ESC键关闭
+                document.addEventListener('keydown', handleEscapeKey);
+                return; // 提前返回，不执行下面的通用逻辑
+            }
+            
+            if (mediaElement) {
+                container.appendChild(mediaElement);
+                title.textContent = fileName;
+                info.style.display = 'block';
+                modal.classList.add('active');
+                
+                // 点击模态框背景关闭
+                modal.onclick = function(e) {
+                    if (e.target === modal) {
+                        closeMediaPreview();
+                    }
+                };
+                
+                // ESC键关闭
+                document.addEventListener('keydown', handleEscapeKey);
+            }
+        }
+
+        function closeMediaPreview() {
+            const modal = document.getElementById('mediaPreviewModal');
+            const container = document.getElementById('mediaContainer');
+            
+            modal.classList.remove('active');
+            
+            // 停止所有媒体播放
+            container.querySelectorAll('video, audio').forEach(media => {
+                media.pause();
+                media.currentTime = 0;
+            });
+            
+            // 移除ESC键监听
+            document.removeEventListener('keydown', handleEscapeKey);
+            
+            // 延迟清空内容，等待动画完成
+            setTimeout(() => {
+                container.innerHTML = '';
+            }, 300);
+        }
+
+        function handleEscapeKey(e) {
+            if (e.key === 'Escape') {
+                closeMediaPreview();
+            }
+        }
+
+        // 生成文件缩略图
+        function generateThumbnail(filePath, fileName, fileType, iconElement) {
+            if (fileType === 'image') {
+                const img = document.createElement('img');
+                img.className = 'file-thumbnail';
+                img.src = `/uploads/${filePath}`;
+                img.onload = function() {
+                    this.classList.add('loaded');
+                    iconElement.classList.add('has-preview');
+                };
+                img.onerror = function() {
+                    console.log('Failed to load thumbnail for:', fileName);
+                };
+                iconElement.appendChild(img);
+            } else if (fileType === 'video') {
+                // 对于视频，我们可以尝试生成第一帧缩略图
+                const video = document.createElement('video');
+                video.src = `/uploads/${filePath}`;
+                video.muted = true;
+                video.preload = 'metadata';
+                video.style.display = 'none';
+                
+                video.onloadedmetadata = function() {
+                    // 设置到视频的10%位置获取缩略图
+                    this.currentTime = Math.max(1, this.duration * 0.1);
+                };
+                
+                video.onseeked = function() {
+                    try {
+                        const canvas = document.createElement('canvas');
+                        const ctx = canvas.getContext('2d');
+                        canvas.width = 48;
+                        canvas.height = 48;
+                        
+                        // 计算缩放比例以适应正方形
+                        const scale = Math.min(48 / this.videoWidth, 48 / this.videoHeight);
+                        const width = this.videoWidth * scale;
+                        const height = this.videoHeight * scale;
+                        const x = (48 - width) / 2;
+                        const y = (48 - height) / 2;
+                        
+                        ctx.drawImage(this, x, y, width, height);
+                        
+                        const img = document.createElement('img');
+                        img.className = 'file-thumbnail';
+                        img.src = canvas.toDataURL();
+                        img.onload = function() {
+                            this.classList.add('loaded');
+                            iconElement.classList.add('has-preview');
+                        };
+                        iconElement.appendChild(img);
+                        
+                        // 添加播放按钮
+                        const playBtn = document.createElement('button');
+                        playBtn.className = 'play-overlay';
+                        playBtn.innerHTML = '<i class="fas fa-play"></i>';
+                        playBtn.onclick = function(e) {
+                            e.stopPropagation();
+                            openMediaPreview(filePath, fileName, fileType);
+                        };
+                        iconElement.appendChild(playBtn);
+                        
+                        // 移除视频元素
+                        video.remove();
+                    } catch (error) {
+                        console.log('Failed to generate video thumbnail:', error);
+                        video.remove();
+                    }
+                };
+                
+                video.onerror = function() {
+                    console.log('Failed to load video for thumbnail:', fileName);
+                    video.remove();
+                };
+                
+                // 添加到DOM中（隐藏状态）
+                document.body.appendChild(video);
+            } else if (fileType === 'audio') {
+                // 为音频文件添加播放按钮
+                const playBtn = document.createElement('button');
+                playBtn.className = 'play-overlay';
+                playBtn.innerHTML = '<i class="fas fa-play"></i>';
+                playBtn.onclick = function(e) {
+                    e.stopPropagation();
+                    openMediaPreview(filePath, fileName, fileType);
+                };
+                iconElement.appendChild(playBtn);
+                iconElement.classList.add('has-preview');
+            }
+        }
+
+        const dropZone = document.getElementById('dropZone');
+        const fileInput = document.getElementById('fileInput');
+        const progressBar = document.getElementById('progressBar');
+        const progress = document.getElementById('progress');
+        const toast = document.getElementById('toast');
+
+        // 拖拽相关事件
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, preventDefaults, false);
+            document.body.addEventListener(eventName, preventDefaults, false);
+        });
+
+        // 防止按钮区域的拖拽事件影响
+        const uploadButtons = document.querySelector('.upload-buttons');
+        if (uploadButtons) {
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                uploadButtons.addEventListener(eventName, function(e) {
+                    e.stopPropagation();
+                }, false);
+            });
+        }
+
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropZone.addEventListener(eventName, highlight, false);
+        });
+
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, unhighlight, false);
+        });
+
+        function highlight(e) {
+            dropZone.classList.add('drag-over');
+        }
+
+        function unhighlight(e) {
+            dropZone.classList.remove('drag-over');
+        }
+
+        dropZone.addEventListener('drop', handleDrop, false);
+
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            
+            // 检查是否包含文件夹
+            const filesArray = Array.from(files);
+            const hasDirectoryItems = Array.from(dt.items).some(item => 
+                item.webkitGetAsEntry && item.webkitGetAsEntry().isDirectory
+            );
+            
+            if (hasDirectoryItems) {
+                handleDirectoryDrop(dt);
+            } else {
+                handleFiles(files);
+            }
+        }
+
+        // 处理文件夹拖拽
+        async function handleDirectoryDrop(dataTransfer) {
+            const items = Array.from(dataTransfer.items);
+            const allFiles = [];
+            
+            for (const item of items) {
+                if (item.webkitGetAsEntry) {
+                    const entry = item.webkitGetAsEntry();
+                    if (entry) {
+                        const files = await processEntry(entry);
+                        allFiles.push(...files);
+                    }
+                }
+            }
+            
+            if (allFiles.length > 0) {
+                handleFolderFiles(allFiles);
+            }
+        }
+
+        // 递归处理目录条目
+        function processEntry(entry, path = '') {
+            return new Promise((resolve) => {
+                if (entry.isFile) {
+                    entry.file((file) => {
+                        // 设置文件的相对路径
+                        file.webkitRelativePath = path + entry.name;
+                        resolve([file]);
+                    });
+                } else if (entry.isDirectory) {
+                    const dirReader = entry.createReader();
+                    dirReader.readEntries(async (entries) => {
+                        const allFiles = [];
+                        for (const childEntry of entries) {
+                            const childFiles = await processEntry(childEntry, path + entry.name + '/');
+                            allFiles.push(...childFiles);
+                        }
+                        resolve(allFiles);
+                    });
+                }
+            });
+        }
+
+        fileInput.addEventListener('change', function(e) {
+            console.log('Files selected, files count:', this.files.length);
+            if (this.files.length > 0) {
+                handleFiles(this.files);
+                // 清空输入，允许重复选择同一文件
+                this.value = '';
+            }
+        });
+
+        // 添加文件夹输入事件
+        document.getElementById('folderInput').addEventListener('change', function(e) {
+            console.log('Folder selected, files count:', this.files.length);
+            if (this.files.length > 0) {
+                handleFolderFiles(this.files);
+                // 清空输入，允许重复选择同一文件夹
+                this.value = '';
+            }
+        });
+
+        // 存储待上传文件的数组
+        let pendingFiles = [];
+
+        // 全局变量
+        let currentFolder = '';
+        let currentSortBy = 'name';
+        let currentSortOrder = 'asc';
+        let currentSearch = '';
+        let folderList = []; // 用于存储文件夹列表
+        let currentMoveFile = null; // 当前要移动的文件
+        let currentRenameFile = null; // 当前要重命名的文件
+        let currentRenameFolder = null; // 当前要重命名的文件夹
+        let isCompactLayout = false; // 是否为紧凑布局
+
+        // 添加上传进度管理
+        class UploadProgress {
+            constructor(file, isQuickUpload = false) {
+                this.file = file;
+                this.startTime = Date.now();
+                this.lastLoaded = 0;
+                this.lastTime = this.startTime;
+                this.aborted = false;
+                this.xhr = null; // 存储 XMLHttpRequest 对象
+                this.createProgressElement(isQuickUpload);
+            }
+
+            createProgressElement(isQuickUpload) {
+                const container = document.createElement('div');
+                container.className = 'file-progress';
+                container.innerHTML = `
+                    <div class="progress-header">
+                        <div class="progress-filename">${this.file.name}</div>
+                        <div class="progress-stats">
+                            <span class="progress-percentage">0%</span>
+                            <span class="progress-size">0/${this.formatSize(this.file.size)}</span>
+                            <button class="cancel-upload-btn">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="progress-bar-outer">
+                        <div class="progress-bar-inner"></div>
+                    </div>
+                    <div class="upload-speed">准备上传...</div>
+                `;
+
+                // 添加取消按钮事件监听
+                const cancelBtn = container.querySelector('.cancel-upload-btn');
+                cancelBtn.addEventListener('click', () => this.cancelUpload());
+
+                const progressContainer = document.getElementById('uploadProgressContainer');
+                if (progressContainer) {
+                    progressContainer.appendChild(container);
+                    progressContainer.style.display = 'block';
+                }
+
+                this.element = container;
+                this.progressBar = container.querySelector('.progress-bar-inner');
+                this.percentageEl = container.querySelector('.progress-percentage');
+                this.sizeEl = container.querySelector('.progress-size');
+                this.speedEl = container.querySelector('.upload-speed');
+            }
+
+            setXHR(xhr) {
+                this.xhr = xhr;
+            }
+
+            cancelUpload() {
+                if (this.xhr) {
+                    this.aborted = true;
+                    this.xhr.abort();
+                    this.element.classList.add('upload-cancelled');
+                    this.speedEl.textContent = '上传已取消';
+                    
+                    // 使用 Promise 和 setTimeout 确保动画完成后再移除元素
+                    const removeElement = () => {
+                        return new Promise(resolve => {
+                            setTimeout(() => {
+                                if (this.element && this.element.parentNode) {
+                                    this.element.remove();
+                                    
+                                    // 检查是否需要隐藏容器
+                                    const container = document.getElementById('uploadProgressContainer');
+                                    if (container && container.children.length === 0) {
+                                        container.style.display = 'none';
+                                    }
+                                }
+                                resolve();
+                            }, 1000);
+                        });
+                    };
+
+                    // 执行移除操作
+                    removeElement().catch(console.error);
+                }
+            }
+
+            updateProgress(loaded) {
+                const now = Date.now();
+                const timeElapsed = (now - this.lastTime) / 1000;
+                const loadedDiff = loaded - this.lastLoaded;
+                
+                // 计算平均速度（使用移动平均）
+                const instantSpeed = timeElapsed > 0 ? loadedDiff / timeElapsed : 0;
+                this.speeds = this.speeds || [];
+                this.speeds.push(instantSpeed);
+                if (this.speeds.length > 5) this.speeds.shift();
+                const avgSpeed = this.speeds.reduce((a, b) => a + b, 0) / this.speeds.length;
+                
+                // 更新进度显示
+                const progress = (loaded / this.file.size) * 100;
+                this.progressBar.style.width = `${progress}%`;
+                this.percentageEl.textContent = `${Math.round(progress)}%`;
+                this.sizeEl.textContent = `${this.formatSize(loaded)}/${this.formatSize(this.file.size)}`;
+                
+                // 计算剩余时间
+                const remaining = (this.file.size - loaded) / avgSpeed;
+                const remainingText = this.formatTime(remaining);
+                
+                // 更新速度显示
+                if (timeElapsed >= 0.5) {
+                    this.speedEl.textContent = `速度: ${this.formatSpeed(avgSpeed)} - 剩余时间: ${remainingText}`;
+                    this.lastLoaded = loaded;
+                    this.lastTime = now;
+                }
+            }
+
+            formatTime(seconds) {
+                if (!isFinite(seconds) || seconds < 0) return '计算中...';
+                if (seconds < 60) return `${Math.round(seconds)}秒`;
+                const minutes = Math.floor(seconds / 60);
+                return `${minutes}分${Math.round(seconds % 60)}秒`;
+            }
+
+            complete() {
+                setTimeout(() => {
+                    this.element.remove();
+                    // 如果没有更多进度条，隐藏容器
+                    const container = document.getElementById('uploadProgressContainer');
+                    if (container && container.children.length === 0) {
+                        container.style.display = 'none';
+                    }
+                }, 1000);
+            }
+
+            formatSize(bytes) {
+                const units = ['B', 'KB', 'MB', 'GB'];
+                let size = bytes;
+                let unitIndex = 0;
+                while (size >= 1024 && unitIndex < units.length - 1) {
+                    size /= 1024;
+                    unitIndex++;
+                }
+                return `${size.toFixed(1)} ${units[unitIndex]}`;
+            }
+
+            formatSpeed(bytesPerSecond) {
+                const units = ['B/s', 'KB/s', 'MB/s', 'GB/s'];
+                let speed = bytesPerSecond;
+                let unitIndex = 0;
+                while (speed >= 1024 && unitIndex < units.length - 1) {
+                    speed /= 1024;
+                    unitIndex++;
+                }
+                return `${speed.toFixed(1)} ${units[unitIndex]}`;
+            }
+        }
+
+        // 单文件上传函数
+        async function uploadSingleFile(file, isQuickUpload = false, isFromFolder = false, customFilename = null) {
+            const formData = new FormData();
+            formData.append('file', file);
+            
+            // 如果是文件夹上传，需要保持相对路径结构
+            if (isFromFolder && file.webkitRelativePath) {
+                formData.append('relative_path', file.webkitRelativePath);
+            }
+            
+            // 添加当前目录信息
+            if (currentFolder) {
+                formData.append('target_folder', currentFolder);
+            }
+            
+            // 添加自定义文件名
+            if (customFilename) {
+                formData.append('custom_filename', customFilename);
+            }
+            
+            return uploadFile(formData, file, isQuickUpload);
+        }
+
+        // 修改文件上传函数 - 移除分片上传，直接上传整个文件
+        async function uploadFile(formData, file, isQuickUpload = false) {
+            return new Promise((resolve, reject) => {
+                const progress = new UploadProgress(file, isQuickUpload);
+                const xhr = new XMLHttpRequest();
+                
+                // 移除分片上传逻辑，所有文件都直接上传
+                // 这样可以避免大文件被切分成多个小文件
+                progress.setXHR(xhr);
+
+                xhr.upload.addEventListener('progress', (event) => {
+                    if (event.lengthComputable && !progress.aborted) {
+                        progress.updateProgress(event.loaded);
+                    }
+                });
+
+                xhr.addEventListener('load', () => {
+                    if (!progress.aborted) {
+                        if (xhr.status === 200) {
+                            const response = JSON.parse(xhr.responseText);
+                            showToast('文件上传成功！');
+                            progress.complete();
+                            resolve(response);
+                        } else {
+                            showToast('上传失败：服务器错误');
+                            progress.element.remove();
+                            reject(new Error('Upload failed'));
+                        }
+                    }
+                });
+
+                xhr.addEventListener('error', () => {
+                    if (!progress.aborted) {
+                        showToast('上传失败：网络错误');
+                        progress.element.remove();
+                        reject(new Error('Network error'));
+                    }
+                });
+
+                xhr.addEventListener('abort', () => {
+                    reject(new Error('Upload cancelled'));
+                });
+
+                // 设置超时时间为30分钟，适用于大文件上传（如700MB视频）
+                xhr.timeout = 30 * 60 * 1000; // 30分钟超时，适应大文件传输
+                
+                xhr.addEventListener('timeout', () => {
+                    if (!progress.aborted) {
+                        showToast('上传超时：文件过大或网络较慢，请检查网络连接');
+                        progress.element.remove();
+                        reject(new Error('Upload timeout'));
+                    }
+                });
+
+                xhr.open('POST', '/upload', true);
+                xhr.send(formData);
+            });
+        }
+
+        // 修改文件处理函数
+        function handleFiles(files) {
+            const quickUpload = document.getElementById('quickUploadToggle').checked;
+            
+            if (quickUpload) {
+                // 快速上传模式 - 直接上传，不做文件名验证
+                initializeProgressContainer();
+                Array.from(files).forEach(file => {
+                    uploadSingleFile(file, true);
+                });
+                showToast(`快速上传模式：开始上传 ${files.length} 个文件`);
+            } else {
+                // 预览模式
+                pendingFiles = [...pendingFiles, ...Array.from(files)];
+                showPreview();
+            }
+        }
+
+        // 处理文件夹上传
+        function handleFolderFiles(files) {
+            const quickUpload = document.getElementById('quickUploadToggle').checked;
+            const filesArray = Array.from(files);
+            
+            console.log('Processing folder files:', filesArray.length);
+            console.log('Files with relative paths:', filesArray.map(f => ({name: f.name, path: f.webkitRelativePath})));
+            
+            if (filesArray.length === 0) {
+                showToast('未选择任何文件');
+                return;
+            }
+            
+            // 检查文件是否有相对路径（确认是文件夹上传）
+            const hasRelativePaths = filesArray.some(file => file.webkitRelativePath);
+            if (!hasRelativePaths) {
+                showToast('请选择文件夹而不是单独的文件');
+                return;
+            }
+            
+            showToast(`检测到文件夹，包含 ${filesArray.length} 个文件`);
+            
+            if (quickUpload) {
+                // 快速上传模式
+                initializeProgressContainer();
+                filesArray.forEach(file => {
+                    uploadSingleFile(file, true, true);
+                });
+            } else {
+                // 预览模式
+                pendingFiles = [...pendingFiles, ...filesArray];
+                showPreview();
+            }
+        }
+
+        // 选择文件函数
+        function selectFiles() {
+            console.log('Selecting files...');
+            document.getElementById('fileInput').click();
+        }
+
+        // 选择文件夹函数
+        function selectFolder() {
+            console.log('Selecting folder...');
+            document.getElementById('folderInput').click();
+        }
+
+        // 返回上级目录
+        function goBack() {
+            if (currentFolder) {
+                const parts = currentFolder.split('/');
+                parts.pop(); // 移除最后一级
+                const parentFolder = parts.join('/');
+                navigateToFolder(parentFolder);
+            }
+        }
+
+        // 自动修复文件名
+        function autoFixFilename(filename) {
+            // 替换有害字符为安全字符
+            let fixed = filename
+                .replace(/[\/\\]/g, '-') // 路径分隔符替换为连字符
+                .replace(/[|]/g, '_')    // 管道符替换为下划线
+                .trim();
+            
+            // 如果文件名太长，截断但保留扩展名
+            if (fixed.length > 300) {
+                const lastDotIndex = fixed.lastIndexOf('.');
+                if (lastDotIndex > 0) {
+                    const extension = fixed.substring(lastDotIndex);
+                    const nameWithoutExt = fixed.substring(0, lastDotIndex);
+                    fixed = nameWithoutExt.substring(0, 300 - extension.length) + extension;
+                } else {
+                    fixed = fixed.substring(0, 300);
+                }
+            }
+            
+            return fixed;
+        }
+
+        // 验证文件名 - 宽松版本，自动修复
+        function validateFilename(input) {
+            // 检查是否跳过验证
+            const skipValidation = document.getElementById('skipValidationToggle').checked;
+            if (skipValidation) {
+                // 移除任何错误提示
+                const existingError = input.parentNode.querySelector('.filename-error');
+                if (existingError) {
+                    existingError.remove();
+                }
+                input.classList.remove('invalid');
+                return true; // 跳过所有验证
+            }
+            
+            const originalFilename = input.value.trim();
+            const fixedFilename = autoFixFilename(originalFilename);
+            
+            // 移除之前的错误提示
+            const existingError = input.parentNode.querySelector('.filename-error');
+            if (existingError) {
+                existingError.remove();
+            }
+            
+            // 重置样式
+            input.classList.remove('invalid');
+            
+            if (originalFilename.length === 0) {
+                showFilenameError(input, '文件名不能为空');
+                return false;
+            }
+            
+            // 如果文件名被自动修复了，更新输入框并显示提示
+            if (fixedFilename !== originalFilename) {
+                input.value = fixedFilename;
+                showFilenameInfo(input, '文件名已自动修正');
+                return true;
+            }
+            
+            return true;
+        }
+
+        // 显示文件名信息提示
+        function showFilenameInfo(input, message) {
+            const infoDiv = document.createElement('div');
+            infoDiv.className = 'filename-info';
+            infoDiv.textContent = message;
+            infoDiv.style.color = '#4caf50';
+            infoDiv.style.fontSize = '0.75em';
+            infoDiv.style.marginTop = '4px';
+            input.parentNode.appendChild(infoDiv);
+            
+            // 3秒后自动移除提示
+            setTimeout(() => {
+                if (infoDiv.parentNode) {
+                    infoDiv.remove();
+                }
+            }, 3000);
+        }
+
+        // 显示文件名错误
+        function showFilenameError(input, message) {
+            input.classList.add('invalid');
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'filename-error';
+            errorDiv.textContent = message;
+            input.parentNode.appendChild(errorDiv);
+        }
+
+        // 显示批量重命名对话框
+        function showBatchRenameDialog() {
+            if (pendingFiles.length === 0) {
+                showToast('没有文件可以重命名');
+                return;
+            }
+            document.getElementById('batchRenameModal').style.display = 'flex';
+            updateRenamePreview();
+        }
+
+        // 隐藏批量重命名对话框
+        function hideBatchRenameDialog() {
+            document.getElementById('batchRenameModal').style.display = 'none';
+            document.getElementById('renamePattern').value = 'sequential';
+            document.getElementById('customInput').value = '';
+            document.getElementById('customInputGroup').style.display = 'none';
+        }
+
+        // 更新重命名预览
+        function updateRenamePreview() {
+            const pattern = document.getElementById('renamePattern').value;
+            const customInput = document.getElementById('customInput').value;
+            const customGroup = document.getElementById('customInputGroup');
+            const preview = document.getElementById('renamePreview');
+            
+            // 显示/隐藏自定义输入框
+            if (pattern === 'prefix' || pattern === 'suffix' || pattern === 'custom') {
+                customGroup.style.display = 'block';
+            } else {
+                customGroup.style.display = 'none';
+            }
+            
+            // 生成预览
+            let previewHTML = '';
+            const now = new Date();
+            const timestamp = now.toISOString().replace(/[:.]/g, '-').slice(0, -5);
+            
+            pendingFiles.forEach((file, index) => {
+                const originalName = file.name;
+                const nameWithoutExt = originalName.replace(/\.[^/.]+$/, "");
+                const ext = originalName.includes('.') ? originalName.split('.').pop() : '';
+                let newName = originalName;
+                
+                switch (pattern) {
+                    case 'sequential':
+                        newName = `文件${index + 1}${ext ? '.' + ext : ''}`;
+                        break;
+                    case 'timestamp':
+                        newName = `${timestamp}_${index + 1}${ext ? '.' + ext : ''}`;
+                        break;
+                    case 'prefix':
+                        if (customInput) {
+                            newName = `${customInput}${originalName}`;
+                        }
+                        break;
+                    case 'suffix':
+                        if (customInput) {
+                            newName = `${nameWithoutExt}${customInput}${ext ? '.' + ext : ''}`;
+                        }
+                        break;
+                    case 'custom':
+                        if (customInput) {
+                            newName = customInput
+                                .replace(/{name}/g, nameWithoutExt)
+                                .replace(/{index}/g, (index + 1).toString())
+                                .replace(/{ext}/g, ext);
+                            if (ext && !newName.includes('.')) {
+                                newName += '.' + ext;
+                            }
+                        }
+                        break;
+                }
+                
+                previewHTML += `
+                    <div class="rename-preview-item">
+                        <span class="rename-original">${originalName}</span>
+                        <span class="rename-arrow">→</span>
+                        <span class="rename-new">${newName}</span>
+                    </div>
+                `;
+            });
+            
+            preview.innerHTML = previewHTML;
+        }
+
+        // 应用批量重命名
+        function applyBatchRename() {
+            const pattern = document.getElementById('renamePattern').value;
+            const customInput = document.getElementById('customInput').value;
+            
+            if ((pattern === 'prefix' || pattern === 'suffix' || pattern === 'custom') && !customInput.trim()) {
+                showToast('请输入自定义内容');
+                return;
+            }
+            
+            const now = new Date();
+            const timestamp = now.toISOString().replace(/[:.]/g, '-').slice(0, -5);
+            
+            // 应用重命名到每个文件输入框
+            document.querySelectorAll('.preview-file-name-input').forEach((input, inputIndex) => {
+                const fileIndex = parseInt(input.dataset.index);
+                const file = pendingFiles[fileIndex];
+                const originalName = file.name;
+                const nameWithoutExt = originalName.replace(/\.[^/.]+$/, "");
+                const ext = originalName.includes('.') ? originalName.split('.').pop() : '';
+                let newName = originalName;
+                
+                switch (pattern) {
+                    case 'sequential':
+                        newName = `文件${fileIndex + 1}${ext ? '.' + ext : ''}`;
+                        break;
+                    case 'timestamp':
+                        newName = `${timestamp}_${fileIndex + 1}${ext ? '.' + ext : ''}`;
+                        break;
+                    case 'prefix':
+                        newName = `${customInput}${originalName}`;
+                        break;
+                    case 'suffix':
+                        newName = `${nameWithoutExt}${customInput}${ext ? '.' + ext : ''}`;
+                        break;
+                    case 'custom':
+                        newName = customInput
+                            .replace(/{name}/g, nameWithoutExt)
+                            .replace(/{index}/g, (fileIndex + 1).toString())
+                            .replace(/{ext}/g, ext);
+                        if (ext && !newName.includes('.')) {
+                            newName += '.' + ext;
+                        }
+                        break;
+                }
+                
+                input.value = newName;
+                validateFilename(input);
+            });
+            
+            hideBatchRenameDialog();
+            showToast('批量重命名已应用');
+        }
+
+        // 修改批量上传函数
+        async function uploadAllFiles() {
+            // 禁用上传按钮并改变样式
+            const uploadBtn = document.querySelector('.upload-all-btn');
+            if (uploadBtn) {
+                uploadBtn.disabled = true;
+                uploadBtn.style.opacity = '0.5';
+                uploadBtn.innerHTML = `
+                    <i class="fas fa-spinner fa-spin"></i>
+                    正在上传...
+                `;
+            }
+
+            initializeProgressContainer();
+            const maxConcurrent = 3;
+            const comments = {};
+            const customFilenames = {};
+            
+            // 获取文件备注
+            document.querySelectorAll('.preview-file-comment').forEach(input => {
+                const index = input.dataset.index;
+                comments[index] = input.value.trim();
+            });
+            
+            // 验证所有文件名并获取自定义文件名
+            let hasInvalidFilenames = false;
+            document.querySelectorAll('.preview-file-name-input').forEach(input => {
+                const index = input.dataset.index;
+                const customName = input.value.trim();
+                
+                // 验证文件名
+                if (!validateFilename(input)) {
+                    hasInvalidFilenames = true;
+                    return;
+                }
+                
+                if (customName && customName !== pendingFiles[index].name) {
+                    customFilenames[index] = customName;
+                }
+            });
+            
+            // 如果有无效文件名，停止上传
+            if (hasInvalidFilenames) {
+                showToast('发现无效文件名，请检查红色标记的文件名');
+                // 恢复上传按钮
+                if (uploadBtn) {
+                    uploadBtn.disabled = false;
+                    uploadBtn.style.opacity = '1';
+                    uploadBtn.innerHTML = `
+                        <i class="fas fa-cloud-upload-alt"></i>
+                        上传 ${pendingFiles.length} 个文件
+                    `;
+                }
+                return;
+            }
+
+                            try {
+                    const uploadTasks = pendingFiles.map((file, index) => {
+                        return async () => {
+                            const formData = new FormData();
+                            formData.append('file', file);
+                            
+                            // 添加备注
+                            if (comments[index]) {
+                                formData.append('comment', comments[index]);
+                            }
+                            
+                            // 添加自定义文件名
+                            if (customFilenames[index]) {
+                                formData.append('custom_filename', customFilenames[index]);
+                            }
+                            
+                            // 处理文件夹路径
+                            if (file.webkitRelativePath) {
+                                formData.append('relative_path', file.webkitRelativePath);
+                            }
+                            
+                            // 添加当前目录信息
+                            if (currentFolder) {
+                                formData.append('target_folder', currentFolder);
+                            }
+                            
+                            try {
+                                await uploadFile(formData, file, false);
+                            } catch (error) {
+                                if (error.message !== 'Upload cancelled') {
+                                    console.error('上传失败:', error);
+                                }
+                            }
+                        };
+                    });
+
+                while (uploadTasks.length > 0) {
+                    const batch = uploadTasks.splice(0, maxConcurrent);
+                    await Promise.all(batch.map(task => task()));
+                }
+
+                // 上传完成后清理预览和进度条
+                clearPreview();
+                clearProgressContainer();
+                loadFiles();
+            } catch (error) {
+                console.error('上传过程出错:', error);
+                if (error.message !== 'Upload cancelled') {
+                    showToast('部分文件上传失败，请重试');
+                }
+            }
+        }
+
+        // 添加清理进度条容器的函数
+        function clearProgressContainer() {
+            const container = document.getElementById('uploadProgressContainer');
+            if (container) {
+                container.innerHTML = '';
+                container.style.display = 'none';
+            }
+        }
+
+        // 添加进度条容器的初始化
+        function initializeProgressContainer() {
+            let container = document.getElementById('uploadProgressContainer');
+            
+            // 如果容器不存在，创建新容器
+            if (!container) {
+                container = document.createElement('div');
+                container.id = 'uploadProgressContainer';
+                container.className = 'upload-progress-container';
+                document.querySelector('.upload-section').appendChild(container);
+            }
+            
+            // 显示容器
+            container.style.display = 'block';
+            
+            return container;
+        }
+
+        // 添加检查进度条容器状态的函数
+        function checkProgressContainer() {
+            const container = document.getElementById('uploadProgressContainer');
+            if (container) {
+                // 如果容器为空，隐藏它
+                if (container.children.length === 0) {
+                    container.style.display = 'none';
+                } else {
+                    container.style.display = 'block';
+                }
+            }
+        }
+
+        // 修改预览显示函数
+        function showPreview() {
+            const previewArea = document.getElementById('uploadPreview');
+            const previewFiles = document.getElementById('previewFiles');
+            const uploadBtn = document.querySelector('.upload-all-btn');
+            
+            // 清空现有预览
+            previewFiles.innerHTML = '';
+            
+            // 显示每个待上传文件
+            pendingFiles.forEach((file, index) => {
+                const fileDiv = document.createElement('div');
+                fileDiv.className = 'preview-file';
+                
+                // 确定显示的文件名（如果是文件夹上传，显示相对路径）
+                const displayName = file.webkitRelativePath || file.name;
+                const isFromFolder = !!file.webkitRelativePath;
+                
+                // 检测文件类型
+                const fileType = getFileType(file.name);
+                const fileIcon = getFileIcon(fileType);
+                
+                fileDiv.innerHTML = `
+                    <div class="preview-file-icon ${fileType}">
+                        <i class="fas ${isFromFolder ? 'fa-folder-open' : fileIcon}"></i>
+                    </div>
+                    <div class="preview-file-info">
+                        <div class="preview-file-name-container">
+                            <label>文件名：</label>
+                            <input type="text" 
+                                   class="preview-file-name-input" 
+                                   value="${file.name}"
+                                   data-index="${index}"
+                                   placeholder="输入文件名"
+                                   onblur="validateFilename(this)"
+                                   oninput="validateFilename(this)">
+                        </div>
+                        ${isFromFolder ? `<div class="preview-file-path">路径：${file.webkitRelativePath}</div>` : ''}
+                        <div class="preview-file-size">${formatFileSize(file.size)}</div>
+                        ${isFromFolder ? '<div class="preview-file-type">来自文件夹</div>' : ''}
+                        <input type="text" 
+                               class="preview-file-comment" 
+                               placeholder="添加文件说明（可选）"
+                               data-index="${index}">
+                    </div>
+                    <button class="remove-file-btn" onclick="removeFile(${index}, event)">
+                        <i class="fas fa-times"></i>
+                    </button>
+                `;
+                previewFiles.appendChild(fileDiv);
+            });
+            
+            // 显示预览区域
+            previewArea.style.display = pendingFiles.length > 0 ? 'block' : 'none';
+            
+            // 更新上传按钮状态和文本
+            if (uploadBtn) {
+                uploadBtn.disabled = pendingFiles.length === 0;
+                uploadBtn.style.opacity = pendingFiles.length === 0 ? '0.5' : '1';
+                uploadBtn.innerHTML = `
+                    <i class="fas fa-cloud-upload-alt"></i>
+                    上传 ${pendingFiles.length} 个文件
+                `;
+            }
+        }
+
+        // 修改移除文件函数
+        function removeFile(index, event) {
+            event.preventDefault();  // 阻止事件冒泡
+            event.stopPropagation();
+            pendingFiles.splice(index, 1);
+            showPreview();
+        }
+
+        // 清除预览
+        function clearPreview() {
+            pendingFiles = [];
+            const previewArea = document.getElementById('uploadPreview');
+            const uploadBtn = document.querySelector('.upload-all-btn');
+            
+            previewArea.style.display = 'none';
+            
+            if (uploadBtn) {
+                uploadBtn.disabled = true;
+                uploadBtn.style.opacity = '0.5';
+                uploadBtn.innerHTML = `
+                    <i class="fas fa-cloud-upload-alt"></i>
+                    上传文件
+                `;
+            }
+            
+            document.getElementById('fileInput').value = '';
+            document.getElementById('folderInput').value = '';
+        }
+
+        function showToast(message) {
+            toast.textContent = message;
+            toast.style.display = 'block';
+            setTimeout(() => {
+                toast.style.display = 'none';
+            }, 3000);
+        }
+
+        function formatFileSize(bytes) {
+            if (bytes === 0) return '0 Bytes';
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        }
+
+        function loadFiles() {
+            const params = new URLSearchParams({
+                folder: currentFolder,
+                sort_by: currentSortBy,
+                sort_order: currentSortOrder,
+                search: currentSearch
+            });
+
+            fetch(`/files?${params}`)
+                .then(response => response.json())
+                .then(data => {
+                    const fileList = document.getElementById('fileList');
+                    fileList.innerHTML = '';
+                    
+                    // 应用紧凑布局到容器
+                    if (isCompactLayout) {
+                        fileList.classList.add('compact');
+                    } else {
+                        fileList.classList.remove('compact');
+                    }
+                    
+                    // 更新面包屑导航
+                    updateBreadcrumb(data.current_folder, data.parent_folder);
+                    
+                    // 更新文件夹列表
+                    folderList = data.files.filter(file => file.type === 'folder');
+                    
+                    data.files.forEach(file => {
+                        const fileCard = document.createElement('div');
+                        fileCard.className = `file-card ${file.type}${isCompactLayout ? ' compact' : ''}`;
+                        
+                        if (file.type === 'folder') {
+                            fileCard.innerHTML = `
+                                <div class="file-header">
+                                    <div class="file-icon">
+                                        <i class="fas fa-folder"></i>
+                                    </div>
+                                    <div class="file-content">
+                                        <div class="file-name">${file.name}</div>
+                                        <div class="file-uploader">
+                                            <i class="fas fa-calendar"></i> 创建时间: ${file.created}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="file-info">
+                                    <div><i class="fas fa-folder"></i> 类型：文件夹</div>
+                                </div>
+                                <div class="file-actions">
+                                    <button class="download-btn" onclick="navigateToFolder('${file.path}')">
+                                        <i class="fas fa-folder-open"></i> 打开
+                                    </button>
+                                    <button class="rename-btn" onclick="showRenameFolderDialog('${file.name}', '${currentFolder}')">
+                                        <i class="fas fa-edit"></i> 重命名
+                                    </button>
+                                    ${(currentUserInfo.isAdmin || currentUserInfo.adminSessionId) ? `<button class="delete-btn" onclick="deleteFolder('${file.path}')">
+                                        <i class="fas fa-trash"></i> 删除
+                                    </button>` : ''}
+                                </div>
+                            `;
+                        } else {
+                            // 检测文件类型
+                            const fileType = getFileType(file.name);
+                            const fileIcon = getFileIcon(fileType);
+                            const canShowPreview = canPreview(fileType);
+                            
+                            fileCard.innerHTML = `
+                                <div class="file-header">
+                                    <div class="file-icon ${fileType}" onclick="${canShowPreview ? `openMediaPreview('${file.path}', '${file.name}', '${fileType}')` : ''}">
+                                        <i class="fas ${fileIcon}"></i>
+                                    </div>
+                                    <div class="file-content">
+                                        <div class="file-name">${file.name}</div>
+                                        <div class="file-uploader">
+                                            <i class="fas fa-user"></i> 上传者: ${formatUploaderInfo(file.uploader_username, file.uploader_ip)}
+                                        </div>
+                                        ${file.comment ? `
+                                            <div class="file-comment">
+                                                <i class="fas fa-comment"></i> ${file.comment}
+                                            </div>
+                                        ` : ''}
+                                    </div>
+                                </div>
+                                <div class="file-info">
+                                    <div><i class="fas fa-weight"></i> 大小：${formatFileSize(file.size)}</div>
+                                    <div><i class="fas fa-clock"></i> 上传时间：${file.created}</div>
+                                    <div><i class="fas fa-tag"></i> 类型：${fileType.toUpperCase()}</div>
+                                </div>
+                                <div class="file-actions">
+                                    ${canShowPreview ? `
+                                        <button class="download-btn" onclick="openMediaPreview('${file.path}', '${file.name}', '${fileType}')">
+                                            <i class="fas fa-eye"></i> 预览
+                                        </button>
+                                    ` : ''}
+                                    <a href="/download/${file.path}" class="download-btn" target="_blank">
+                                        <i class="fas fa-download"></i> 下载
+                                    </a>
+                                    <button class="rename-btn" onclick="showRenameFileDialog('${file.name}', '${currentFolder}')">
+                                        <i class="fas fa-edit"></i> 重命名
+                                    </button>
+                                    <button class="move-btn" onclick="showMoveFileDialog('${file.name}', '${currentFolder}')">
+                                        <i class="fas fa-cut"></i> 移动
+                                    </button>
+                                    ${(currentUserInfo.isAdmin || currentUserInfo.adminSessionId) ? `<button class="delete-btn" onclick="deleteFile('${file.path}')">
+                                        <i class="fas fa-trash"></i> 删除
+                                    </button>` : ''}
+                                </div>
+                            `;
+                            
+                            // 生成缩略图预览
+                            const iconElement = fileCard.querySelector('.file-icon');
+                            if (canShowPreview) {
+                                generateThumbnail(file.path, file.name, fileType, iconElement);
+                            }
+                        }
+                        fileList.appendChild(fileCard);
+                    });
+                })
+                .catch(error => {
+                    console.error('加载文件列表失败:', error);
+                    showToast('加载文件列表失败');
+                });
+        }
+
+        // 更新面包屑导航
+        function updateBreadcrumb(currentFolder, parentFolder) {
+            const breadcrumb = document.getElementById('breadcrumb');
+            breadcrumb.innerHTML = '<a href="#" onclick="navigateToFolder(\'\')"><i class="fas fa-home"></i> 根目录</a>';
+            
+            if (currentFolder) {
+                const parts = currentFolder.split('/');
+                let path = '';
+                parts.forEach((part, index) => {
+                    if (index > 0) path += '/';
+                    path += part;
+                    breadcrumb.innerHTML += `<span class="separator">/</span><a href="#" onclick="navigateToFolder('${path}')">${part}</a>`;
+                });
+            }
+        }
+
+        // 导航到文件夹
+        function navigateToFolder(folder) {
+            currentFolder = folder;
+            updateBackButton();
+            loadFiles();
+        }
+
+        // 更新返回按钮状态
+        function updateBackButton() {
+            const backBtn = document.getElementById('backBtn');
+            if (currentFolder && currentFolder.trim() !== '') {
+                backBtn.style.display = 'inline-flex';
+            } else {
+                backBtn.style.display = 'none';
+            }
+        }
+
+        // 处理搜索
+        function handleSearch(event) {
+            if (event.key === 'Enter' || event.type === 'input') {
+                currentSearch = event.target.value;
+                applySortAndSearch();
+            }
+        }
+
+        // 应用排序和搜索
+        function applySortAndSearch() {
+            currentSortBy = document.getElementById('sortBy').value;
+            currentSearch = document.getElementById('searchInput').value;
+            loadFiles();
+        }
+
+        // 切换排序顺序
+        function toggleSortOrder() {
+            currentSortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc';
+            const btn = document.getElementById('sortOrderBtn');
+            btn.innerHTML = currentSortOrder === 'asc' ? 
+                '<i class="fas fa-sort-alpha-down"></i>' : 
+                '<i class="fas fa-sort-alpha-up"></i>';
+            loadFiles();
+        }
+
+        // 切换布局模式
+        function toggleLayout() {
+            isCompactLayout = !isCompactLayout;
+            const btn = document.getElementById('layoutToggleBtn');
+            const fileList = document.getElementById('fileList');
+            
+            if (isCompactLayout) {
+                fileList.classList.add('compact');
+                btn.classList.add('active');
+                btn.innerHTML = '<i class="fas fa-th-list"></i>';
+                btn.title = '切换到卡片模式';
+            } else {
+                fileList.classList.remove('compact');
+                btn.classList.remove('active');
+                btn.innerHTML = '<i class="fas fa-th-large"></i>';
+                btn.title = '切换到紧凑模式';
+            }
+            
+            // 应用紧凑样式到现有文件卡片
+            applyLayoutToCards();
+            
+            // 保存用户偏好
+            localStorage.setItem('compactLayout', isCompactLayout);
+            
+            // 显示提示
+            showToast(isCompactLayout ? '已切换到紧凑模式' : '已切换到卡片模式');
+        }
+
+        // 应用布局样式到文件卡片
+        function applyLayoutToCards() {
+            const fileCards = document.querySelectorAll('.file-card');
+            fileCards.forEach(card => {
+                if (isCompactLayout) {
+                    card.classList.add('compact');
+                } else {
+                    card.classList.remove('compact');
+                }
+            });
+        }
+
+        // 显示创建文件夹对话框
+        function showCreateFolderDialog() {
+            document.getElementById('createFolderModal').style.display = 'flex';
+            document.getElementById('folderNameInput').focus();
+        }
+
+        // 隐藏创建文件夹对话框
+        function hideCreateFolderDialog() {
+            document.getElementById('createFolderModal').style.display = 'none';
+            document.getElementById('folderNameInput').value = '';
+        }
+
+        // 创建文件夹
+        function createFolder() {
+            const folderName = document.getElementById('folderNameInput').value.trim();
+            if (!folderName) {
+                showToast('请输入文件夹名称');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('folder_name', folderName);
+            formData.append('parent_folder', currentFolder);
+
+            fetch('/folders', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.message) {
+                    showToast(data.message);
+                    hideCreateFolderDialog();
+                    loadFiles();
+                }
+            })
+            .catch(error => {
+                console.error('创建文件夹失败:', error);
+                showToast('创建文件夹失败');
+            });
+        }
+
+        // 显示移动文件对话框
+        function showMoveFileDialog(fileName, sourceFolder) {
+            currentMoveFile = { name: fileName, source: sourceFolder };
+            document.getElementById('moveFileName').textContent = fileName;
+            
+            // 填充目标文件夹选择框
+            const select = document.getElementById('targetFolderSelect');
+            select.innerHTML = '<option value="">根目录</option>';
+            
+            // 递归添加所有文件夹选项
+            loadAllFolders().then(folders => {
+                folders.forEach(folder => {
+                    if (folder.path !== sourceFolder) { // 不能移动到当前文件夹
+                        select.innerHTML += `<option value="${folder.path}">${folder.path || '根目录'}</option>`;
+                    }
+                });
+            });
+            
+            document.getElementById('moveFileModal').style.display = 'flex';
+        }
+
+        // 隐藏移动文件对话框
+        function hideMoveFileDialog() {
+            document.getElementById('moveFileModal').style.display = 'none';
+            currentMoveFile = null;
+        }
+
+        // 确认移动文件
+        function confirmMoveFile() {
+            if (!currentMoveFile) return;
+
+            const targetFolder = document.getElementById('targetFolderSelect').value;
+            const formData = new FormData();
+            formData.append('file_name', currentMoveFile.name);
+            formData.append('source_folder', currentMoveFile.source);
+            formData.append('target_folder', targetFolder);
+
+            fetch('/move_file', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                showToast(data.message);
+                hideMoveFileDialog();
+                loadFiles();
+            })
+            .catch(error => {
+                console.error('移动文件失败:', error);
+                showToast('移动文件失败');
+            });
+        }
+
+        // 加载所有文件夹列表
+        async function loadAllFolders(folder = '') {
+            try {
+                const params = new URLSearchParams({ folder, sort_by: 'name' });
+                const response = await fetch(`/files?${params}`);
+                const data = await response.json();
+                
+                let allFolders = [];
+                const folders = data.files.filter(file => file.type === 'folder');
+                
+                // 添加当前层级的文件夹
+                allFolders = allFolders.concat(folders);
+                
+                // 递归加载子文件夹
+                for (const childFolder of folders) {
+                    const subFolders = await loadAllFolders(childFolder.path);
+                    allFolders = allFolders.concat(subFolders);
+                }
+                
+                return allFolders;
+            } catch (error) {
+                console.error('加载文件夹列表失败:', error);
+                return [];
+            }
+        }
+
+        // 删除文件夹
+        async function deleteFolder(folderPath) {
+            // 检查管理员权限 - 支持通过IP或登录获得的管理员权限
+            if (!currentUserInfo.isAdmin && !currentUserInfo.adminSessionId) {
+                showToast('权限不足，只有管理员才能删除文件夹');
+                return;
+            }
+            
+            if (!confirm('确定要删除这个文件夹吗？文件夹内的所有文件和子文件夹都将被永久删除。')) {
+                return;
+            }
+            
+            try {
+                const headers = {};
+                // 如果有admin session，添加到请求头
+                if (currentUserInfo.adminSessionId) {
+                    headers['Authorization'] = `AdminSession ${currentUserInfo.adminSessionId}`;
+                }
+                
+                const response = await fetch(`/folders/${folderPath}`, {
+                    method: 'DELETE',
+                    headers: headers
+                });
+                
+                if (response.status === 403) {
+                    showToast('权限不足，只有管理员才能删除文件夹');
+                    return;
+                }
+                
+                const result = await response.json();
+                showToast(result.message);
+                loadFiles(); // 重新加载文件列表
+            } catch (error) {
+                showToast('删除失败：' + error.message);
+            }
+        }
+
+        // 显示重命名文件对话框
+        function showRenameFileDialog(fileName, folderPath) {
+            currentRenameFile = { name: fileName, folder: folderPath };
+            document.getElementById('currentFileName').textContent = fileName;
+            document.getElementById('newFileNameInput').value = fileName;
+            document.getElementById('renameFileModal').style.display = 'flex';
+            document.getElementById('newFileNameInput').focus();
+            document.getElementById('newFileNameInput').select();
+        }
+
+        // 隐藏重命名文件对话框
+        function hideRenameFileDialog() {
+            document.getElementById('renameFileModal').style.display = 'none';
+            currentRenameFile = null;
+        }
+
+        // 确认重命名文件
+        function confirmRenameFile() {
+            if (!currentRenameFile) return;
+
+            const newName = document.getElementById('newFileNameInput').value.trim();
+            if (!newName) {
+                showToast('请输入新文件名');
+                return;
+            }
+
+            if (newName === currentRenameFile.name) {
+                showToast('新文件名与原文件名相同');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('old_name', currentRenameFile.name);
+            formData.append('new_name', newName);
+            formData.append('folder_path', currentRenameFile.folder);
+
+            fetch('/rename_file', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                showToast(data.message);
+                hideRenameFileDialog();
+                loadFiles();
+            })
+            .catch(error => {
+                console.error('重命名文件失败:', error);
+                showToast('重命名文件失败');
+            });
+        }
+
+        // 显示重命名文件夹对话框
+        function showRenameFolderDialog(folderName, parentFolder) {
+            currentRenameFolder = { name: folderName, parent: parentFolder };
+            document.getElementById('currentFolderName').textContent = folderName;
+            document.getElementById('newFolderNameInput').value = folderName;
+            document.getElementById('renameFolderModal').style.display = 'flex';
+            document.getElementById('newFolderNameInput').focus();
+            document.getElementById('newFolderNameInput').select();
+        }
+
+        // 隐藏重命名文件夹对话框
+        function hideRenameFolderDialog() {
+            document.getElementById('renameFolderModal').style.display = 'none';
+            currentRenameFolder = null;
+        }
+
+        // 确认重命名文件夹
+        function confirmRenameFolder() {
+            if (!currentRenameFolder) return;
+
+            const newName = document.getElementById('newFolderNameInput').value.trim();
+            if (!newName) {
+                showToast('请输入新文件夹名');
+                return;
+            }
+
+            if (newName === currentRenameFolder.name) {
+                showToast('新文件夹名与原文件夹名相同');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('old_name', currentRenameFolder.name);
+            formData.append('new_name', newName);
+            formData.append('parent_folder', currentRenameFolder.parent);
+
+            fetch('/rename_folder', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                showToast(data.message);
+                hideRenameFolderDialog();
+                loadFiles();
+            })
+            .catch(error => {
+                console.error('重命名文件夹失败:', error);
+                showToast('重命名文件夹失败');
+            });
+        }
+
+        // 添加删除文件的函数
+        async function deleteFile(filename) {
+            // 检查管理员权限 - 支持通过IP或登录获得的管理员权限
+            if (!currentUserInfo.isAdmin && !currentUserInfo.adminSessionId) {
+                showToast('权限不足，只有管理员才能删除文件');
+                return;
+            }
+            
+            if (!confirm('确定要删除这个文件吗？')) {
+                return;
+            }
+            
+            try {
+                const headers = {};
+                // 如果有admin session，添加到请求头
+                if (currentUserInfo.adminSessionId) {
+                    headers['Authorization'] = `AdminSession ${currentUserInfo.adminSessionId}`;
+                }
+                
+                const response = await fetch(`/files/${filename}`, {
+                    method: 'DELETE',
+                    headers: headers
+                });
+                
+                if (response.status === 403) {
+                    showToast('权限不足，只有管理员才能删除文件');
+                    return;
+                }
+                
+                const result = await response.json();
+                showToast(result.message);
+                loadFiles(); // 重新加载文件列表
+            } catch (error) {
+                showToast('删除失败：' + error.message);
+            }
+        }
+
+        // 全局用户信息变量
+        let currentUserInfo = {
+            ip: '',
+            name: '',
+            avatar: '',
+            isAdmin: false,
+            adminSessionId: null  // 添加admin会话ID
+        };
+
+        // 全局IP名称映射
+        let ipNameMap = {};
+        let ipAvatarMap = {};
+
+        // 可用的emoji头像列表
+        const availableEmojis = [
+            '👨‍💻', '👩‍💻', '🧑‍💼', '👨‍🔬', '👩‍🔬', '🧑‍🎨', '👨‍🎨', '👩‍🎨',
+            '🧑‍🚀', '👨‍🚀', '👩‍🚀', '🧑‍⚕️', '👨‍⚕️', '👩‍⚕️', '🧑‍🏫', '👨‍🏫',
+            '👩‍🏫', '🧑‍💼', '👨‍💼', '👩‍💼', '🧑‍🔧', '👨‍🔧', '👩‍🔧', '🧑‍🌾',
+            '👨‍🌾', '👩‍🌾', '🧑‍🍳', '👨‍🍳', '👩‍🍳', '🧑‍🎓', '👨‍🎓', '👩‍🎓',
+            '🤖', '👽', '🦸‍♂️', '🦸‍♀️', '🦹‍♂️', '🦹‍♀️', '🧙‍♂️', '🧙‍♀️',
+            '🧚‍♂️', '🧚‍♀️', '🧞‍♂️', '🧞‍♀️', '🧝‍♂️', '🧝‍♀️', '🧛‍♂️', '🧛‍♀️',
+            '🎭', '🎨', '🎪', '🎯', '🎲', '🎸', '🎺', '🎷', '🎻', '🎹'
+        ];
+
+        // 为IP随机分配的emoji头像缓存
+        let emojiAvatarCache = {};
+
+        // 智能头像分配函数
+        function getAvatarForIP(ip) {
+            // 1. 首先检查是否有配置的图片头像
+            if (ipAvatarMap[ip]) {
+                return {
+                    type: 'image',
+                    src: ipAvatarMap[ip]
+                };
+            }
+            
+            // 2. 检查是否已经为该IP随机分配过emoji头像
+            if (emojiAvatarCache[ip]) {
+                return {
+                    type: 'emoji',
+                    emoji: emojiAvatarCache[ip]
+                };
+            }
+            
+            // 3. 为新IP随机分配一个emoji头像
+            const randomIndex = Math.floor(Math.random() * availableEmojis.length);
+            const assignedEmoji = availableEmojis[randomIndex];
+            
+            // 4. 缓存分配结果
+            emojiAvatarCache[ip] = assignedEmoji;
+            
+            // 5. 保存到localStorage以便持久化
+            try {
+                localStorage.setItem('emojiAvatarCache', JSON.stringify(emojiAvatarCache));
+            } catch (e) {
+                console.warn('无法保存emoji头像缓存到localStorage:', e);
+            }
+            
+            return {
+                type: 'emoji',
+                emoji: assignedEmoji
+            };
+        }
+
+        // 从localStorage恢复emoji头像缓存
+        function loadEmojiAvatarCache() {
+            try {
+                const cached = localStorage.getItem('emojiAvatarCache');
+                if (cached) {
+                    emojiAvatarCache = JSON.parse(cached);
+                }
+            } catch (e) {
+                console.warn('无法从localStorage加载emoji头像缓存:', e);
+                emojiAvatarCache = {};
+            }
+        }
+
+        // 加载用户信息
+        async function loadUserInfo() {
+            try {
+                // 先加载emoji头像缓存
+                loadEmojiAvatarCache();
+                
+                // 获取当前用户IP和管理员信息
+                const [ipResponse, adminResponse, ipNamesResponse] = await Promise.all([
+                    fetch('/get_ip'),
+                    fetch('/admin/info'),
+                    fetch('/get_ip_names')
+                ]);
+                
+                const ipData = await ipResponse.json();
+                const adminData = await adminResponse.json();
+                const ipNamesData = await ipNamesResponse.json();
+                
+                currentUserInfo.ip = ipData.ip;
+                currentUserInfo.isAdmin = adminData.is_admin;
+                
+                // 设置用户名称和头像
+                ipNameMap = ipNamesData.ip_vs_name || {};
+                ipAvatarMap = ipNamesData.ip_vs_avatar || {};
+                
+                currentUserInfo.name = ipNameMap[currentUserInfo.ip] || currentUserInfo.ip;
+                // 使用智能头像分配
+                currentUserInfo.avatar = getAvatarForIP(currentUserInfo.ip);
+                
+                // 检查admin会话状态
+                await checkAdminSession();
+                
+                // 更新UI
+                updateUserInfoDisplay();
+                
+                // 设置头像点击事件
+                setupAvatarClickEvent();
+                
+            } catch (error) {
+                console.error('加载用户信息失败:', error);
+                // 使用默认值
+                currentUserInfo.ip = 'unknown';
+                currentUserInfo.name = '访客';
+                currentUserInfo.avatar = {
+                    type: 'image',
+                    src: '/image/avatar/server.png'
+                };
+                currentUserInfo.isAdmin = false;
+                updateUserInfoDisplay();
+                setupAvatarClickEvent();
+            }
+        }
+
+        // 更新用户信息显示
+        function updateUserInfoDisplay() {
+            const userInfo = document.getElementById('userInfo');
+            const userAvatar = document.getElementById('userAvatar');
+            const userName = document.getElementById('userName');
+            const userRole = document.getElementById('userRole');
+            const userIP = document.getElementById('userIP');
+            
+            if (userInfo && userAvatar && userName && userRole && userIP) {
+                // 清除之前的admin指示器
+                const existingIndicator = userAvatar.querySelector('.admin-indicator');
+                if (existingIndicator) {
+                    existingIndicator.remove();
+                }
+                
+                // 根据头像类型显示不同的内容
+                if (currentUserInfo.avatar.type === 'image') {
+                    // 显示图片头像
+                    userAvatar.innerHTML = `<img src="${currentUserInfo.avatar.src}" alt="用户头像" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">`;
+                    userAvatar.classList.remove('emoji-avatar');
+                } else if (currentUserInfo.avatar.type === 'emoji') {
+                    // 显示emoji头像
+                    userAvatar.textContent = currentUserInfo.avatar.emoji;
+                    userAvatar.classList.add('emoji-avatar');
+                }
+                
+                // 如果已经admin登录，添加指示器
+                if (currentUserInfo.adminSessionId) {
+                    const indicator = document.createElement('div');
+                    indicator.className = 'admin-indicator';
+                    userAvatar.appendChild(indicator);
+                }
+                
+                userName.textContent = currentUserInfo.name;
+                userIP.textContent = currentUserInfo.ip;
+                
+                if (currentUserInfo.isAdmin || currentUserInfo.adminSessionId) {
+                    userRole.innerHTML = `<span class="admin-badge">管理员</span> IP: <span id="userIP">${currentUserInfo.ip}</span>`;
+                } else {
+                    userRole.innerHTML = `IP: <span id="userIP">${currentUserInfo.ip}</span>`;
+                }
+                
+                userInfo.style.display = 'flex';
+            }
+        }
+
+        // Admin登录相关功能
+        function showAdminLogin() {
+            // 如果已经是admin登录状态，显示登出选项
+            if (currentUserInfo.adminSessionId) {
+                if (confirm('您已经是管理员登录状态，是否要登出？')) {
+                    logoutAdmin();
+                }
+                return;
+            }
+            
+            const modal = document.getElementById('adminLoginModal');
+            modal.classList.add('active');
+            
+            // 清空表单
+            document.getElementById('adminUsername').value = '';
+            document.getElementById('adminPassword').value = '';
+            document.getElementById('adminLoginMessage').innerHTML = '';
+            
+            // 聚焦到用户名输入框
+            setTimeout(() => {
+                document.getElementById('adminUsername').focus();
+            }, 100);
+        }
+
+        function closeAdminLogin() {
+            const modal = document.getElementById('adminLoginModal');
+            if (modal) {
+                modal.classList.remove('active');
+            }
+        }
+
+        async function submitAdminLogin(event) {
+            event.preventDefault();
+            
+            const username = document.getElementById('adminUsername').value;
+            const password = document.getElementById('adminPassword').value;
+            const messageDiv = document.getElementById('adminLoginMessage');
+            
+            if (!username || !password) {
+                showAdminMessage('请输入用户名和密码', 'error');
+                return;
+            }
+            
+            try {
+                showAdminMessage('正在登录...', 'info');
+                
+                const formData = new FormData();
+                formData.append('username', username);
+                formData.append('password', password);
+                
+                const response = await fetch('/admin/login', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                const result = await response.json();
+                
+                if (response.ok && result.success) {
+                    // 登录成功
+                    currentUserInfo.adminSessionId = result.admin_session_id;
+                    
+                    // 保存admin会话到localStorage
+                    localStorage.setItem('adminSessionId', result.admin_session_id);
+                    
+                    showAdminMessage('登录成功！', 'success');
+                    
+                    // 更新用户界面
+                    updateUserInfoDisplay();
+                    
+                    // 重新加载文件列表以显示删除按钮
+                    loadFiles();
+                    
+                    // 1秒后关闭弹窗
+                    setTimeout(() => {
+                        closeAdminLogin();
+                    }, 1000);
+                    
+                } else {
+                    showAdminMessage(result.detail || '登录失败', 'error');
+                }
+                
+            } catch (error) {
+                console.error('Admin登录失败:', error);
+                showAdminMessage('网络错误，请稍后重试', 'error');
+            }
+        }
+
+        async function logoutAdmin() {
+            if (!currentUserInfo.adminSessionId) {
+                return;
+            }
+            
+            try {
+                const formData = new FormData();
+                formData.append('admin_session_id', currentUserInfo.adminSessionId);
+                
+                const response = await fetch('/admin/logout', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                const result = await response.json();
+                
+                if (response.ok && result.success) {
+                    console.log('Admin登出成功');
+                } else {
+                    console.warn('Admin登出失败:', result.detail);
+                }
+                
+            } catch (error) {
+                console.error('Admin登出请求失败:', error);
+            } finally {
+                // 无论服务器响应如何，都清除本地状态
+                currentUserInfo.adminSessionId = null;
+                localStorage.removeItem('adminSessionId');
+                updateUserInfoDisplay();
+                
+                // 重新加载文件列表以隐藏删除按钮
+                loadFiles();
+            }
+        }
+
+        async function checkAdminSession() {
+            const sessionId = localStorage.getItem('adminSessionId');
+            if (!sessionId) {
+                return false;
+            }
+            
+            try {
+                const response = await fetch(`/admin/check_session?admin_session_id=${encodeURIComponent(sessionId)}`);
+                const result = await response.json();
+                
+                if (result.valid) {
+                    currentUserInfo.adminSessionId = sessionId;
+                    return true;
+                } else {
+                    // 会话无效，清除本地存储
+                    localStorage.removeItem('adminSessionId');
+                    return false;
+                }
+                
+            } catch (error) {
+                console.error('检查admin会话失败:', error);
+                localStorage.removeItem('adminSessionId');
+                return false;
+            }
+        }
+
+        function showAdminMessage(message, type) {
+            const messageDiv = document.getElementById('adminLoginMessage');
+            messageDiv.innerHTML = `<div class="admin-login-${type}">${message}</div>`;
+        }
+
+        // 点击头像事件处理
+        function setupAvatarClickEvent() {
+            const userAvatar = document.getElementById('userAvatar');
+            if (userAvatar) {
+                userAvatar.addEventListener('click', showAdminLogin);
+            }
+        }
+
+        // 点击弹窗外部关闭
+        document.addEventListener('click', function(event) {
+            const modal = document.getElementById('adminLoginModal');
+            if (event.target === modal) {
+                closeAdminLogin();
+            }
+        });
+
+        // ESC键关闭弹窗
+        document.addEventListener('keydown', function(event) {
+            if (event.key === 'Escape') {
+                closeAdminLogin();
+            }
+        });
+
+        // 格式化上传者信息
+        function formatUploaderInfo(uploaderUsername, uploaderIp) {
+            // 如果uploader_username包含@符号，说明已经是格式化过的名称
+            if (uploaderUsername && uploaderUsername.includes('@')) {
+                return uploaderUsername;
+            }
+            
+            // 否则尝试从IP映射中获取名称
+            if (uploaderIp && ipNameMap[uploaderIp]) {
+                return `${ipNameMap[uploaderIp]}@${uploaderIp}`;
+            }
+            
+            // fallback：使用原始信息
+            return uploaderUsername || uploaderIp || '未知用户';
+        }
+
+        // 初始加载文件列表（在页面完全加载后进行）
+        // loadFiles() 现在将在 DOMContentLoaded 事件中调用
+
+        // 添加开关状态保存
+        document.getElementById('quickUploadToggle').addEventListener('change', function(e) {
+            const isQuickUpload = e.target.checked;
+            document.querySelector('.upload-section').classList.toggle('quick-upload-mode', isQuickUpload);
+            
+            // 保存设置
+            localStorage.setItem('quickUpload', isQuickUpload);
+            
+            // 显示状态提示
+            showUploadStatus(isQuickUpload ? '已开启快速上传' : '已关闭快速上传');
+        });
+
+        // 添加跳过验证开关
+        document.getElementById('skipValidationToggle').addEventListener('change', function(e) {
+            const skipValidation = e.target.checked;
+            
+            // 保存设置
+            localStorage.setItem('skipValidation', skipValidation);
+            
+            // 显示状态提示
+            showUploadStatus(skipValidation ? '已跳过文件名检查' : '已开启文件名检查');
+            
+            // 如果开启跳过验证，清除所有现有的错误提示
+            if (skipValidation) {
+                document.querySelectorAll('.filename-error').forEach(error => error.remove());
+                document.querySelectorAll('.preview-file-name-input').forEach(input => {
+                    input.classList.remove('invalid');
+                });
+            }
+        });
+
+        // 添加状态提示函数
+        function showUploadStatus(message) {
+            let status = document.querySelector('.upload-status');
+            if (!status) {
+                status = document.createElement('div');
+                status.className = 'upload-status';
+                document.body.appendChild(status);
+            }
+            
+            status.textContent = message;
+            status.style.display = 'block';
+            
+            setTimeout(() => {
+                status.style.display = 'none';
+            }, 2000);
+        }
+
+        // 显示内网资产
+        function showInternalAssets() {
+            // 创建模态框
+            const modal = document.createElement('div');
+            modal.className = 'modal-overlay';
+            modal.id = 'internalAssetsModal';
+            modal.style.display = 'flex';
+            
+            // 创建模态框内容
+            const modalContent = document.createElement('div');
+            modalContent.className = 'modal';
+            modalContent.style.maxWidth = '900px';
+            modalContent.style.width = '90%';
+            
+            // 模态框头部
+            const modalHeader = document.createElement('div');
+            modalHeader.className = 'modal-header';
+            modalHeader.innerHTML = `
+                <h3><i class="fas fa-network-wired"></i> 内网资产</h3>
+                <button class="close-btn" onclick="closeInternalAssetsModal()">
+                    <i class="fas fa-times"></i>
+                </button>
+            `;
+            
+            // 模态框主体
+            const modalBody = document.createElement('div');
+            modalBody.className = 'modal-body';
+            modalBody.innerHTML = `
+                <div class="internal-assets-container">
+                    <div class="asset-section">
+                        <h4><i class="fas fa-desktop"></i> 香橙派资源</h4>
+                        <div class="asset-list">
+                            <div class="asset-item" data-asset="orange-1panel">
+                                <div class="asset-info">
+                                    <div class="asset-main">
+                                        <div class="asset-icon">
+                                            <i class="fas fa-server"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <h5>香橙派1Panel</h5>
+                                            <p>6.6.6.86:3333/jeremypi</p>
+                                        </div>
+                                        <div class="asset-actions">
+                                            <a href="http://6.6.6.86:3333/jeremypi" target="_blank" class="asset-link">
+                                                <i class="fas fa-external-link-alt"></i> 访问
+                                            </a>
+                                            <button class="credential-toggle" id="toggle-orange-1panel" onclick="showCredentials('orange-1panel')">
+                                                <i class="fas fa-eye"></i> 查看账号
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="asset-credentials" id="credentials-orange-1panel" style="display: none;">
+                                                <div class="credential-item">
+                                                    <span class="credential-label">账号:</span>
+                                                    <span class="credential-value">jeremypi</span>
+                                                    <button class="copy-btn" onclick="copyToClipboard('jeremypi', 'orange-pi-1panel')">
+                                                        <i class="fas fa-copy"></i>
+                                                    </button>
+                                                </div>
+                                                <div class="credential-item">
+                                                    <span class="credential-label">密码:</span>
+                                                    <span class="credential-value">123tangledup-ai</span>
+                                                    <button class="copy-btn" onclick="copyToClipboard('123tangledup-ai', 'orange-pi-1panel')">
+                                                        <i class="fas fa-copy"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                </div>
+                            </div>
+                            <div class="asset-item" data-asset="orange-vscode">
+                                <div class="asset-info">
+                                    <div class="asset-main">
+                                        <div class="asset-icon">
+                                            <i class="fas fa-code"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <h5>香橙派VScode</h5>
+                                            <p>6.6.6.86:8088</p>
+                                        </div>
+                                        <div class="asset-actions">
+                                            <a href="http://6.6.6.86:8088" target="_blank" class="asset-link">
+                                                <i class="fas fa-external-link-alt"></i> 访问
+                                            </a>
+                                            <button class="credential-toggle" id="toggle-orange-vscode" onclick="showCredentials('orange-vscode')">
+                                                <i class="fas fa-eye"></i> 查看密码
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="asset-credentials" id="credentials-orange-vscode" style="display: none;">
+                                        <div class="credential-item">
+                                            <span class="credential-label">密码:</span>
+                                            <span class="credential-value">jeremypi</span>
+                                            <button class="copy-btn" onclick="copyToClipboard('jeremypi', 'orange-pi-vscode')">
+                                                <i class="fas fa-copy"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="asset-section">
+                        <h4><i class="fas fa-laptop"></i> 台式机资源</h4>
+                        <div class="asset-list">
+                            <div class="asset-item" data-asset="desktop-1panel">
+                                <div class="asset-info">
+                                    <div class="asset-main">
+                                        <div class="asset-icon">
+                                            <i class="fas fa-server"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <h5>台式机ubuntu1Panel</h5>
+                                            <p>6.6.6.66:3333/quantspeed</p>
+                                        </div>
+                                        <div class="asset-actions">
+                                            <a href="http://6.6.6.66:3333/quantspeed" target="_blank" class="asset-link">
+                                                <i class="fas fa-external-link-alt"></i> 访问
+                                            </a>
+                                            <button class="credential-toggle" id="toggle-desktop-1panel" onclick="showCredentials('desktop-1panel')">
+                                                <i class="fas fa-eye"></i> 查看账号
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="asset-credentials" id="credentials-desktop-1panel" style="display: none;">
+                                        <div class="credential-item">
+                                            <span class="credential-label">账号:</span>
+                                            <span class="credential-value">quantspeed</span>
+                                            <button class="copy-btn" onclick="copyToClipboard('quantspeed', 'desktop-1panel')">
+                                                <i class="fas fa-copy"></i>
+                                            </button>
+                                        </div>
+                                        <div class="credential-item">
+                                            <span class="credential-label">密码:</span>
+                                            <span class="credential-value">123quantspeed</span>
+                                            <button class="copy-btn" onclick="copyToClipboard('123quantspeed', 'desktop-1panel')">
+                                                <i class="fas fa-copy"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="asset-item" data-asset="desktop-vscode">
+                                <div class="asset-info">
+                                    <div class="asset-main">
+                                        <div class="asset-icon">
+                                            <i class="fas fa-code"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <h5>台式机VScode</h5>
+                                            <p>6.6.6.66:8080</p>
+                                        </div>
+                                        <div class="asset-actions">
+                                            <a href="http://6.6.6.66:8080" target="_blank" class="asset-link">
+                                                <i class="fas fa-external-link-alt"></i> 访问
+                                            </a>
+                                            <button class="credential-toggle" id="toggle-desktop-vscode" onclick="showCredentials('desktop-vscode')">
+                                                <i class="fas fa-eye"></i> 查看密码
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="asset-credentials" id="credentials-desktop-vscode" style="display: none;">
+                                        <div class="credential-item">
+                                            <span class="credential-label">密码:</span>
+                                            <span class="credential-value">quant-speed</span>
+                                            <button class="copy-btn" onclick="copyToClipboard('quant-speed', 'desktop-vscode')">
+                                                <i class="fas fa-copy"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="asset-section">
+                        <h4><i class="fas fa-th-large"></i> 应用服务</h4>
+                        <div class="asset-list">
+                            <!-- it-tools -->
+                            <div class="asset-item" data-asset="it-tools">
+                                <div class="asset-info">
+                                    <div class="asset-main">
+                                        <div class="asset-icon">
+                                            <i class="fas fa-toolbox"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <h5>it-tools</h5>
+                                            <p>6.6.6.66:40116</p>
+                                        </div>
+                                        <div class="asset-actions">
+                                            <a href="http://6.6.6.66:40116" target="_blank" class="asset-link">
+                                                <i class="fas fa-external-link-alt"></i> 访问
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- langflow -->
+                            <div class="asset-item" data-asset="langflow">
+                                <div class="asset-info">
+                                    <div class="asset-main">
+                                        <div class="asset-icon">
+                                            <i class="fas fa-wind"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <h5>langflow</h5>
+                                            <p>6.6.6.66:7860</p>
+                                        </div>
+                                        <div class="asset-actions">
+                                            <a href="http://6.6.6.66:7860" target="_blank" class="asset-link">
+                                                <i class="fas fa-external-link-alt"></i> 访问
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- n8n -->
+                            <div class="asset-item" data-asset="n8n">
+                                <div class="asset-info">
+                                    <div class="asset-main">
+                                        <div class="asset-icon">
+                                            <i class="fas fa-project-diagram"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <h5>n8n</h5>
+                                            <p>6.6.6.66:5678</p>
+                                        </div>
+                                        <div class="asset-actions">
+                                            <a href="http://6.6.6.66:5678" target="_blank" class="asset-link">
+                                                <i class="fas fa-external-link-alt"></i> 访问
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- linux-command -->
+                            <div class="asset-item" data-asset="linux-command">
+                                <div class="asset-info">
+                                    <div class="asset-main">
+                                        <div class="asset-icon">
+                                            <i class="fas fa-terminal"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <h5>Linux指令搜索</h5>
+                                            <p>6.6.6.66:40255</p>
+                                        </div>
+                                        <div class="asset-actions">
+                                            <a href="http://6.6.6.66:40255/" target="_blank" class="asset-link">
+                                                <i class="fas fa-external-link-alt"></i> 访问
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- ntfy -->
+                            <div class="asset-item" data-asset="ntfy">
+                                <div class="asset-info">
+                                    <div class="asset-main">
+                                        <div class="asset-icon">
+                                            <i class="fas fa-comment-dots"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <h5>ntfy</h5>
+                                            <p>6.6.6.66:40265</p>
+                                        </div>
+                                        <div class="asset-actions">
+                                            <a href="http://6.6.6.66:40265" target="_blank" class="asset-link">
+                                                <i class="fas fa-external-link-alt"></i> 访问
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- screego -->
+                            <div class="asset-item" data-asset="screego">
+                                <div class="asset-info">
+                                    <div class="asset-main">
+                                        <div class="asset-icon">
+                                            <i class="fas fa-desktop"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <h5>screego</h5>
+                                            <p>6.6.6.66:5050</p>
+                                        </div>
+                                        <div class="asset-actions">
+                                            <a href="http://6.6.6.66:5050" target="_blank" class="asset-link">
+                                                <i class="fas fa-external-link-alt"></i> 访问
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- qrcode -->
+                            <div class="asset-item" data-asset="qrcode">
+                                <div class="asset-info">
+                                    <div class="asset-main">
+                                        <div class="asset-icon">
+                                            <i class="fas fa-qrcode"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <h5>叠加态QR-code工具</h5>
+                                            <p>6.6.6.86:8711</p>
+                                        </div>
+                                        <div class="asset-actions">
+                                            <a href="http://6.6.6.86:8711/" target="_blank" class="asset-link">
+                                                <i class="fas fa-external-link-alt"></i> 访问
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            
+            // 添加样式
+            const style = document.createElement('style');
+            style.textContent = `
+                .internal-assets-container {
+                    max-height: 70vh;
+                    overflow-y: auto;
+                }
+                
+                .asset-section {
+                    margin-bottom: 25px;
+                }
+                
+                .asset-section h4 {
+                    margin-bottom: 15px;
+                    color: var(--primary-color);
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    font-size: 18px;
+                }
+                
+                .asset-list {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 15px;
+                }
+                
+                .asset-item {
+                    background: rgba(74, 144, 226, 0.05);
+                    border: 1px solid rgba(74, 144, 226, 0.1);
+                    border-radius: 12px;
+                    overflow: hidden;
+                    transition: all 0.3s ease;
+                }
+                
+                .asset-item:hover {
+                    background: rgba(74, 144, 226, 0.1);
+                    transform: translateY(-2px);
+                    box-shadow: 0 5px 15px rgba(74, 144, 226, 0.15);
+                }
+                
+                .asset-info {
+                    padding: 0;
+                }
+                
+                .asset-main {
+                    display: flex;
+                    align-items: center;
+                    padding: 20px;
+                    gap: 15px;
+                }
+                
+                .asset-icon {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 50px;
+                    height: 50px;
+                    background: rgba(74, 144, 226, 0.1);
+                    border-radius: 10px;
+                    flex-shrink: 0;
+                }
+                
+                .asset-icon i {
+                    font-size: 24px;
+                    color: var(--primary-color);
+                }
+                
+                .asset-details {
+                    flex: 1;
+                }
+                
+                .asset-details h5 {
+                    margin: 0 0 5px 0;
+                    font-size: 16px;
+                    font-weight: 600;
+                    color: var(--text-color);
+                }
+                
+                .asset-details p {
+                    margin: 0;
+                    font-size: 14px;
+                    color: #666;
+                    word-break: break-all;
+                }
+                
+                .asset-actions {
+                    display: flex;
+                    gap: 10px;
+                    align-items: center;
+                }
+                
+                .asset-link {
+                    display: flex;
+                    align-items: center;
+                    gap: 5px;
+                    padding: 8px 15px;
+                    background: var(--primary-color);
+                    color: white;
+                    text-decoration: none;
+                    border-radius: 6px;
+                    font-size: 14px;
+                    transition: all 0.3s ease;
+                }
+                
+                .asset-link:hover {
+                    background: var(--secondary-color);
+                }
+                
+                .credential-toggle {
+                    display: flex;
+                    align-items: center;
+                    gap: 5px;
+                    padding: 8px 15px;
+                    background: #f0f0f0;
+                    color: var(--text-color);
+                    border: none;
+                    border-radius: 6px;
+                    font-size: 14px;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                }
+                
+                .credential-toggle:hover {
+                    background: #e0e0e0;
+                }
+                
+                .asset-credentials {
+                    background: rgba(255, 255, 255, 0.7);
+                    border-top: 1px solid rgba(74, 144, 226, 0.1);
+                    padding: 15px 20px;
+                    animation: slideDown 0.3s ease-in-out;
+                }
+                
+                .credential-item {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 10px;
+                    gap: 10px;
+                }
+                
+                .credential-item:last-child {
+                    margin-bottom: 0;
+                }
+                
+                .credential-label {
+                    font-weight: 600;
+                    min-width: 50px;
+                    color: var(--primary-color);
+                }
+                
+                .credential-value {
+                    flex: 1;
+                    background: rgba(255, 255, 255, 0.8);
+                    padding: 6px 12px;
+                    border-radius: 6px;
+                    font-family: monospace;
+                    font-size: 14px;
+                    word-break: break-all;
+                }
+                
+                .copy-btn {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 32px;
+                    height: 32px;
+                    background: var(--primary-color);
+                    color: white;
+                    border: none;
+                    border-radius: 6px;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                }
+                
+                .copy-btn:hover {
+                    background: var(--secondary-color);
+                }
+                
+                .toast-notification {
+                    position: fixed;
+                    bottom: 20px;
+                    right: 20px;
+                    background: rgba(0, 0, 0, 0.8);
+                    color: white;
+                    padding: 12px 20px;
+                    border-radius: 6px;
+                    transform: translateY(100px);
+                    opacity: 0;
+                    transition: all 0.3s ease;
+                    z-index: 10000;
+                }
+                
+                .toast-notification.show {
+                    transform: translateY(0);
+                    opacity: 1;
+                }
+                
+                @keyframes slideDown {
+                    from { 
+                        opacity: 0; 
+                        max-height: 0; 
+                    }
+                    to { 
+                        opacity: 1; 
+                        max-height: 200px; 
+                    }
+                }
+            `;
+            
+            // 组装模态框
+            modalContent.appendChild(modalHeader);
+            modalContent.appendChild(modalBody);
+            modal.appendChild(modalContent);
+            document.head.appendChild(style);
+            document.body.appendChild(modal);
+            
+            // 点击模态框外部关闭
+            modal.addEventListener('click', function(event) {
+                if (event.target === modal) {
+                    closeInternalAssetsModal();
+                }
+            });
+        }
+
+        // 关闭内网资产模态框
+        function closeInternalAssetsModal() {
+            const modal = document.getElementById('internalAssetsModal');
+            if (modal) {
+                modal.remove();
+            }
+        }
+
+        // 显示账号密码信息
+        function showCredentials(assetId) {
+            const credentialsSection = document.getElementById(`credentials-${assetId}`);
+            const toggleBtn = document.getElementById(`toggle-${assetId}`);
+            
+            if (!credentialsSection || !toggleBtn) {
+                console.error('找不到元素:', `credentials-${assetId}`, `toggle-${assetId}`);
+                return;
+            }
+            
+            if (credentialsSection.style.display === 'none' || !credentialsSection.style.display) {
+                // 显示账号密码
+                credentialsSection.style.display = 'block';
+                toggleBtn.innerHTML = '<i class="fas fa-eye-slash"></i> 隐藏账号';
+            } else {
+                // 隐藏账号密码
+                credentialsSection.style.display = 'none';
+                toggleBtn.innerHTML = '<i class="fas fa-eye"></i> 查看账号';
+            }
+        }
+
+        // 复制到剪贴板
+        function copyToClipboard(text, assetId = null) {
+            // 直接复制传入的文本，不再根据assetId复制整个账号密码字符串
+            // 创建临时文本区域
+            const tempTextArea = document.createElement('textarea');
+            tempTextArea.value = text;
+            document.body.appendChild(tempTextArea);
+            tempTextArea.select();
+            
+            try {
+                document.execCommand('copy');
+                // 根据文本类型显示不同的提示信息
+                if (text === 'jeremypi' || text === 'quant_speed') {
+                    showToast('账号已复制到剪贴板');
+                } else if (text === '123tangledup-ai' || text === '123quantspeed' || text === 'quant-speed') {
+                    showToast('密码已复制到剪贴板');
+                } else {
+                    showToast('内容已复制到剪贴板');
+                }
+            } catch (err) {
+                showToast('复制失败，请手动复制');
+            }
+            
+            // 移除临时文本区域
+            document.body.removeChild(tempTextArea);
+        }
+
+        // 显示提示信息
+        function showToast(message) {
+            const toast = document.createElement('div');
+            toast.className = 'toast-notification';
+            toast.textContent = message;
+            document.body.appendChild(toast);
+            
+            // 显示提示
+            setTimeout(() => {
+                toast.classList.add('show');
+            }, 10);
+            
+            // 3秒后隐藏
+            setTimeout(() => {
+                toast.classList.remove('show');
+                setTimeout(() => {
+                    document.body.removeChild(toast);
+                }, 300);
+            }, 3000);
+        }
+
+        // 页面加载时初始化
+        document.addEventListener('DOMContentLoaded', function() {
+            // 恢复快速上传设置
+            const quickUpload = localStorage.getItem('quickUpload');
+            if (quickUpload !== null) {
+                const isQuickUpload = quickUpload === 'true';
+                document.getElementById('quickUploadToggle').checked = isQuickUpload;
+                document.querySelector('.upload-section').classList.toggle('quick-upload-mode', isQuickUpload);
+            }
+
+            // 恢复跳过验证设置
+            const skipValidation = localStorage.getItem('skipValidation');
+            if (skipValidation !== null) {
+                const isSkipValidation = skipValidation === 'true';
+                document.getElementById('skipValidationToggle').checked = isSkipValidation;
+            }
+            
+            // 恢复布局设置
+            const compactLayout = localStorage.getItem('compactLayout');
+            if (compactLayout !== null) {
+                isCompactLayout = compactLayout === 'true';
+                const btn = document.getElementById('layoutToggleBtn');
+                const fileList = document.getElementById('fileList');
+                
+                if (isCompactLayout) {
+                    fileList.classList.add('compact');
+                    btn.classList.add('active');
+                    btn.innerHTML = '<i class="fas fa-th-list"></i>';
+                    btn.title = '切换到卡片模式';
+                } else {
+                    fileList.classList.remove('compact');
+                    btn.classList.remove('active');
+                    btn.innerHTML = '<i class="fas fa-th-large"></i>';
+                    btn.title = '切换到紧凑模式';
+                }
+            }
+            
+            // 初始化返回按钮状态
+            updateBackButton();
+            
+            // 先加载用户信息，然后加载文件列表
+            loadUserInfo().then(() => {
+                loadFiles();
+            });
+            
+            // 添加长按提示支持
+            const quickUploadSwitch = document.querySelector('.quick-upload-switch');
+            if (quickUploadSwitch) {
+                let pressTimer;
+                
+                quickUploadSwitch.addEventListener('touchstart', () => {
+                    pressTimer = setTimeout(() => {
+                        const hint = quickUploadSwitch.querySelector('.quick-upload-hint');
+                        if (hint) hint.style.display = 'block';
+                    }, 500);
+                });
+                
+                quickUploadSwitch.addEventListener('touchend', () => {
+                    clearTimeout(pressTimer);
+                    setTimeout(() => {
+                        const hint = quickUploadSwitch.querySelector('.quick-upload-hint');
+                        if (hint) hint.style.display = 'none';
+                    }, 1000);
+                });
+            }
+
+            // 添加搜索框实时搜索
+            const searchInput = document.getElementById('searchInput');
+            if (searchInput) {
+                searchInput.addEventListener('input', function(e) {
+                    clearTimeout(searchInput.searchTimeout);
+                    searchInput.searchTimeout = setTimeout(() => {
+                        currentSearch = e.target.value;
+                        loadFiles();
+                    }, 500); // 延迟500ms执行搜索
+                });
+            }
+
+            // 添加键盘快捷键
+            document.addEventListener('keydown', function(e) {
+                // Ctrl+N 或 Cmd+N 创建新文件夹
+                if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
+                    e.preventDefault();
+                    showCreateFolderDialog();
+                }
+                
+                // Escape 关闭模态框
+                if (e.key === 'Escape') {
+                    hideCreateFolderDialog();
+                    hideMoveFileDialog();
+                    hideRenameFileDialog();
+                    hideRenameFolderDialog();
+                    hideBatchRenameDialog();
+                    closeInternalAssetsModal();
+                }
+                
+                // Enter 在各种对话框中执行相应操作
+                if (e.key === 'Enter') {
+                    if (document.getElementById('createFolderModal').style.display === 'flex') {
+                        createFolder();
+                    } else if (document.getElementById('renameFileModal').style.display === 'flex') {
+                        confirmRenameFile();
+                    } else if (document.getElementById('renameFolderModal').style.display === 'flex') {
+                        confirmRenameFolder();
+                    } else if (document.getElementById('batchRenameModal').style.display === 'flex') {
+                        applyBatchRename();
+                    }
+                }
+            });
+        });
+
+        // 添加上传进度提示
+        function showUploadProgress(show) {
+            const progressBar = document.querySelector('.upload-progress');
+            if (!progressBar) return;
+            
+            if (show) {
+                progressBar.style.display = 'block';
+                progressBar.style.width = '100%';
+                progressBar.style.transition = 'width 0.3s ease';
+            } else {
+                progressBar.style.display = 'none';
+                progressBar.style.width = '0';
+            }
+        }
+
+        // 添加样式以优化取消动画
+        const style = document.createElement('style');
+        style.textContent += `
+            .upload-cancelled {
+                opacity: 0.7;
+                transform: translateX(100%);
+                transition: all 0.3s ease;
+            }
+
+            .file-progress {
+                position: relative;
+                transition: all 0.3s ease;
+                overflow: hidden;
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+
+    <!-- Admin登录弹窗 -->
+    <div id="adminLoginModal" class="admin-login-modal">
+        <div class="admin-login-content">
+            <button class="admin-close-btn" onclick="closeAdminLogin()">×</button>
+            <div class="admin-login-header">
+                <h3>管理员登录</h3>
+                <p>点击头像登录管理员账号</p>
+            </div>
+            <div id="adminLoginMessage"></div>
+            <form class="admin-login-form" onsubmit="submitAdminLogin(event)">
+                <div class="admin-form-group">
+                    <label for="adminUsername">用户名</label>
+                    <input type="text" id="adminUsername" name="username" required autocomplete="username">
+                </div>
+                <div class="admin-form-group">
+                    <label for="adminPassword">密码</label>
+                    <input type="password" id="adminPassword" name="password" required autocomplete="current-password">
+                </div>
+                <div class="admin-login-buttons">
+                    <button type="button" class="admin-btn admin-btn-secondary" onclick="closeAdminLogin()">取消</button>
+                    <button type="submit" class="admin-btn admin-btn-primary">登录</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/login.html b/templates/login.html
new file mode 100644
index 0000000..5d1450c
--- /dev/null
+++ b/templates/login.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>登录 - 局域网聊天室</title>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
+    <style>
+        :root {
+            --primary-color: #667eea;
+            --secondary-color: #764ba2;
+            --background-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --success-color: #4ade80;
+            --error-color: #ef4444;
+            --text-dark: #1f2937;
+            --text-light: #6b7280;
+            --border-color: #e5e7eb;
+            --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: var(--background-gradient);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .login-container {
+            background: white;
+            border-radius: 24px;
+            box-shadow: var(--shadow);
+            padding: 48px;
+            width: 100%;
+            max-width: 480px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .login-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 6px;
+            background: var(--background-gradient);
+        }
+
+        .login-header {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+
+        .login-header h1 {
+            color: var(--text-dark);
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 8px;
+        }
+
+        .login-header p {
+            color: var(--text-light);
+            font-size: 1rem;
+            line-height: 1.5;
+        }
+
+        .form-group {
+            margin-bottom: 24px;
+        }
+
+        label {
+            display: block;
+            color: var(--text-dark);
+            font-weight: 500;
+            margin-bottom: 8px;
+            font-size: 0.95rem;
+        }
+
+        .input-wrapper {
+            position: relative;
+        }
+
+        input[type="text"] {
+            width: 100%;
+            padding: 16px 20px 16px 48px;
+            border: 2px solid var(--border-color);
+            border-radius: 12px;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            background: #fafafa;
+            color: var(--text-dark);
+        }
+
+        input[type="text"]:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            background: white;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .input-icon {
+            position: absolute;
+            left: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--text-light);
+            font-size: 1.1rem;
+        }
+
+        .login-btn {
+            width: 100%;
+            padding: 16px;
+            background: var(--background-gradient);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .login-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
+        }
+
+        .login-btn:active {
+            transform: translateY(0);
+        }
+
+        .login-btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .loading-spinner {
+            display: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 1s ease-in-out infinite;
+            margin-right: 8px;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .error-message {
+            background: #fef2f2;
+            border: 1px solid #fecaca;
+            color: var(--error-color);
+            padding: 12px 16px;
+            border-radius: 8px;
+            margin-bottom: 24px;
+            font-size: 0.9rem;
+            display: none;
+        }
+
+        .back-link {
+            text-align: center;
+            margin-top: 32px;
+            padding-top: 24px;
+            border-top: 1px solid var(--border-color);
+        }
+
+        .back-link a {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 500;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: color 0.3s ease;
+        }
+
+        .back-link a:hover {
+            color: var(--secondary-color);
+        }
+
+        .features {
+            margin-top: 32px;
+            padding-top: 24px;
+            border-top: 1px solid var(--border-color);
+        }
+
+        .feature-list {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+            margin-top: 16px;
+        }
+
+        .feature-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: var(--text-light);
+            font-size: 0.9rem;
+        }
+
+        .feature-item i {
+            color: var(--success-color);
+            font-size: 1rem;
+        }
+
+        /* 移动端优化 */
+        @media (max-width: 480px) {
+            .login-container {
+                padding: 32px 24px;
+                border-radius: 16px;
+            }
+
+            .login-header h1 {
+                font-size: 1.75rem;
+            }
+
+            .feature-list {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        /* 动画效果 */
+        .login-container {
+            animation: slideUp 0.6s ease-out;
+        }
+
+        @keyframes slideUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* 输入框动画 */
+        .input-wrapper {
+            animation: fadeIn 0.8s ease-out 0.2s both;
+        }
+
+        .login-btn {
+            animation: fadeIn 0.8s ease-out 0.4s both;
+        }
+
+        .back-link {
+            animation: fadeIn 0.8s ease-out 0.6s both;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <div class="login-header">
+            <h1><i class="bi bi-chat-dots-fill"></i> 局域网聊天室</h1>
+            <p>请输入您的用户名开始聊天</p>
+        </div>
+
+        <form id="loginForm">
+            <div class="error-message" id="errorMessage"></div>
+
+            <div class="form-group">
+                <label for="username">用户名</label>
+                <div class="input-wrapper">
+                    <i class="bi bi-person-fill input-icon"></i>
+                    <input 
+                        type="text" 
+                        id="username" 
+                        name="username" 
+                        placeholder="请输入用户名（1-20个字符）" 
+                        maxlength="20"
+                        required
+                    >
+                </div>
+            </div>
+
+            <button type="submit" class="login-btn" id="loginBtn">
+                <span class="loading-spinner" id="loadingSpinner"></span>
+                <span id="btnText">进入聊天室</span>
+            </button>
+        </form>
+
+        <div class="features">
+            <div class="feature-list">
+                <div class="feature-item">
+                    <i class="bi bi-shield-check"></i>
+                    <span>安全可靠</span>
+                </div>
+                <div class="feature-item">
+                    <i class="bi bi-lightning-fill"></i>
+                    <span>实时聊天</span>
+                </div>
+                <div class="feature-item">
+                    <i class="bi bi-file-earmark-arrow-up"></i>
+                    <span>文件传输</span>
+                </div>
+                <div class="feature-item">
+                    <i class="bi bi-people-fill"></i>
+                    <span>群聊私聊</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="back-link">
+            <a href="/">
+                <i class="bi bi-arrow-left"></i>
+                返回文件传输
+            </a>
+        </div>
+    </div>
+
+    <script>
+        const loginForm = document.getElementById('loginForm');
+        const usernameInput = document.getElementById('username');
+        const loginBtn = document.getElementById('loginBtn');
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        const btnText = document.getElementById('btnText');
+        const errorMessage = document.getElementById('errorMessage');
+
+        // 自动聚焦用户名输入框
+        usernameInput.focus();
+
+        // 表单提交处理
+        loginForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const username = usernameInput.value.trim();
+            if (!username) {
+                showError('请输入用户名');
+                return;
+            }
+
+            if (username.length > 20) {
+                showError('用户名长度不能超过20个字符');
+                return;
+            }
+
+            // 开始登录
+            setLoading(true);
+            hideError();
+
+            try {
+                const formData = new FormData();
+                formData.append('username', username);
+
+                const response = await fetch('/login', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                const data = await response.json();
+
+                if (response.ok) {
+                    // 登录成功，保存session并跳转
+                    localStorage.setItem('session_id', data.session_id);
+                    localStorage.setItem('username', data.username);
+                    
+                    // 跳转到聊天页面
+                    window.location.href = '/chat';
+                } else {
+                    showError(data.detail || '登录失败');
+                }
+            } catch (error) {
+                console.error('登录错误:', error);
+                showError('网络错误，请稍后重试');
+            } finally {
+                setLoading(false);
+            }
+        });
+
+        // 回车键提交
+        usernameInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                loginForm.dispatchEvent(new Event('submit'));
+            }
+        });
+
+        // 实时验证用户名长度
+        usernameInput.addEventListener('input', (e) => {
+            const value = e.target.value;
+            if (value.length > 20) {
+                showError('用户名长度不能超过20个字符');
+            } else {
+                hideError();
+            }
+        });
+
+        function setLoading(loading) {
+            loginBtn.disabled = loading;
+            loadingSpinner.style.display = loading ? 'inline-block' : 'none';
+            btnText.textContent = loading ? '登录中...' : '进入聊天室';
+        }
+
+        function showError(message) {
+            errorMessage.textContent = message;
+            errorMessage.style.display = 'block';
+            usernameInput.focus();
+        }
+
+        function hideError() {
+            errorMessage.style.display = 'none';
+        }
+
+        // 检查是否已经登录
+        window.addEventListener('load', async () => {
+            const sessionId = localStorage.getItem('session_id');
+            const username = localStorage.getItem('username');
+
+            if (sessionId && username) {
+                try {
+                    const response = await fetch(`/check_session?session_id=${sessionId}`);
+                    const data = await response.json();
+
+                    if (data.valid) {
+                        // 会话有效，直接跳转到聊天页面
+                        window.location.href = '/chat';
+                        return;
+                    }
+                } catch (error) {
+                    console.log('会话检查失败:', error);
+                }
+
+                // 清理无效的会话信息
+                localStorage.removeItem('session_id');
+                localStorage.removeItem('username');
+            }
+        });
+    </script>
+</body>
+</html> 
\ No newline at end of file
diff --git a/test_chat.html b/test_chat.html
new file mode 100644
index 0000000..a1c1ad4
--- /dev/null
+++ b/test_chat.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>聊天测试</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        #messages { border: 1px solid #ccc; height: 300px; overflow-y: auto; padding: 10px; margin-bottom: 10px; }
+        #messageInput { width: 300px; padding: 5px; }
+        button { padding: 5px 10px; margin: 5px; }
+        .status { color: green; }
+        .error { color: red; }
+    </style>
+</head>
+<body>
+    <h1>聊天测试</h1>
+    <div id="status">未连接</div>
+    <div id="messages"></div>
+    <input type="text" id="messageInput" placeholder="输入消息...">
+    <button onclick="sendMessage()">发送</button>
+    <button onclick="connectWebSocket()">重新连接</button>
+    
+    <script>
+        let ws = null;
+        let myIp = 'unknown';
+        
+        async function getMyIp() {
+            try {
+                const response = await fetch('/get_ip');
+                const data = await response.json();
+                myIp = data.ip;
+                console.log('My IP:', myIp);
+                document.getElementById('status').innerHTML = `IP: ${myIp} - 准备连接...`;
+            } catch (error) {
+                console.error('获取IP失败:', error);
+                document.getElementById('status').innerHTML = '<span class="error">获取IP失败</span>';
+            }
+        }
+        
+        function connectWebSocket() {
+            if (ws) {
+                ws.close();
+            }
+            
+            ws = new WebSocket(`ws://${window.location.host}/ws`);
+            
+            ws.onopen = function() {
+                console.log('WebSocket连接已建立');
+                document.getElementById('status').innerHTML = `<span class="status">已连接 - IP: ${myIp}</span>`;
+            };
+            
+            ws.onmessage = function(event) {
+                const data = JSON.parse(event.data);
+                console.log('收到消息:', data);
+                
+                const messagesDiv = document.getElementById('messages');
+                const messageElement = document.createElement('div');
+                messageElement.innerHTML = `
+                    <strong>${data.ip}:</strong> ${data.message} 
+                    <small>(${new Date(data.timestamp).toLocaleTimeString()})</small>
+                `;
+                messagesDiv.appendChild(messageElement);
+                messagesDiv.scrollTop = messagesDiv.scrollHeight;
+            };
+            
+            ws.onclose = function() {
+                console.log('WebSocket连接已关闭');
+                document.getElementById('status').innerHTML = '<span class="error">连接已断开</span>';
+            };
+            
+            ws.onerror = function(error) {
+                console.error('WebSocket错误:', error);
+                document.getElementById('status').innerHTML = '<span class="error">连接错误</span>';
+            };
+        }
+        
+        function sendMessage() {
+            const messageInput = document.getElementById('messageInput');
+            const message = messageInput.value.trim();
+            
+            if (!message || !ws || ws.readyState !== WebSocket.OPEN) {
+                alert('请输入消息并确保连接正常');
+                return;
+            }
+            
+            const messageData = {
+                message: message,
+                timestamp: new Date().getTime(),
+                type: 'text'
+            };
+            
+            try {
+                ws.send(JSON.stringify(messageData));
+                messageInput.value = '';
+                
+                // 显示自己的消息
+                const messagesDiv = document.getElementById('messages');
+                const messageElement = document.createElement('div');
+                messageElement.innerHTML = `
+                    <strong>我 (${myIp}):</strong> ${message} 
+                    <small>(${new Date().toLocaleTimeString()})</small>
+                `;
+                messageElement.style.color = 'blue';
+                messagesDiv.appendChild(messageElement);
+                messagesDiv.scrollTop = messagesDiv.scrollHeight;
+            } catch (error) {
+                console.error('发送消息失败:', error);
+                alert('发送消息失败');
+            }
+        }
+        
+        // 回车键发送消息
+        document.getElementById('messageInput').addEventListener('keypress', function(event) {
+            if (event.key === 'Enter') {
+                sendMessage();
+            }
+        });
+        
+        // 页面加载时初始化
+        window.addEventListener('load', async function() {
+            await getMyIp();
+            connectWebSocket();
+        });
+    </script>
+</body>
+</html> 
\ No newline at end of file