feat: Add comprehensive user guide page with FAQ section

- Added user_guide.html with complete usage instructions
- Included detailed transmission type explanations (7 types)
- Added common parameter settings guidance
- Implemented results interpretation section
- Added practical features documentation (save/load/export)
- Included safety warnings and best practices
- Added FAQ section with 6 common questions
- Enhanced README.md with better documentation
- Updated main index.html to link to user guide
- Improved overall user experience for web customers

README.md

@@ -1,102 +1,128 @@
-# 伺服驱动选型工具
-
-这是一个专业的伺服驱动选型计算工具，支持多种传动结构的参数计算和选型分析。
-
-## 功能特性
-
-- **多种传动结构支持**：
-  - 丝杠传动
-  - 同步带传动  
-  - 减速机传动
-  - 转盘机构
-  - 收放卷系统
-  - 直接驱动
-  - 多种组合传动
-
-- **关键指标计算**：
-  - 转速范围计算
-  - 转矩需求分析
-  - 惯量匹配计算
-  - 功率需求评估
-  - 安全系数验证
-
-- **专业参数考虑**：
-  - 机械摩擦系数
-  - 传动效率
-  - 负载惯量
-  - 加速度要求
-  - 工作循环分析
-
-- **用户友好界面**：
-  - 清晰的输入指导
-  - 实时计算反馈
-  - 工业科技风格UI
-  - 响应式设计
-
-## 使用方法
-
-1. 打开 `index.html` 文件
-2. 选择传动结构类型
-3. 输入相应的机械参数
-4. 查看计算结果和选型建议
-5. 可以导出计算报告
-
-## 技术栈
-
-- HTML5 + CSS3 + JavaScript (纯前端)
-- 无外部依赖
-- 离线可用
-- 响应式设计，支持桌面和移动设备
-
-## 文件结构
+# 伺服驱动选型工具 (Servo Sizer)
+
+一个专业级的伺服电机与驱动器选型计算工具，支持多种传动结构类型，提供精确的工程计算和直观的可视化结果。
+
+## 🚀 功能特性
+
+### 支持的传动类型
+- **滚珠丝杠** - 精密直线运动应用
+- **同步带** - 高速长行程应用  
+- **减速机** - 高扭矩低速应用
+- **转盘** - 旋转工作台应用
+- **收放卷** - 卷绕张力控制应用
+- **直接驱动** - 高精度直接耦合应用
+- **组合传动** - 复杂多级传动系统
+
+### 核心功能
+- ✅ **实时参数计算** - 自动计算转矩、转速、惯量、功率等关键参数
+- ✅ **动态表单生成** - 根据选择的传动类型自动显示相关参数输入
+- ✅ **安全系数应用** - 可配置的安全系数确保选型余量
+- ✅ **惯量比检查** - 自动检测并警告过高的惯量比
+- ✅ **图表可视化** - 使用 Chart.js 显示性能指标
+- ✅ **结果导出** - 支持将计算结果导出为文本文件
+- ✅ **响应式设计** - 适配桌面和移动设备
+
+## 🛠️ 技术栈
+
+- **前端**: HTML5, CSS3, JavaScript (ES6+)
+- **图表库**: Chart.js
+- **设计**: 响应式网格布局，现代化 UI/UX
+- **无依赖**: 纯前端实现，无需后端服务
+
+## 📋 安装与使用
+
+### 快速开始
+1. 克隆或下载项目文件
+2. 在浏览器中打开 `index.html` 文件
+3. 选择传动类型并输入相关参数
+4. 点击"计算选型结果"查看详细分析
+
+### 本地服务器启动（推荐）
+```bash
+# Python 3.7+ 环境（推荐）
+cd servo_sizer
+./start_optimized.sh
+
+# Python 3.6 兼容环境
+cd servo_sizer  
+./start_compatible.sh
+
+# 超轻量级启动（无资源限制）
+cd servo_sizer
+./start_ultralight.sh
+
+# 或者直接使用Python内置服务器
+python3 -m http.server 8080
+```
+
+**注意**: 
+- 推荐使用 `start_optimized.sh` 脚本（Python 3.7+），它包含了内存限制、端口检查和优雅关闭机制
+- 如果使用Python 3.6，请使用 `start_compatible.sh` 脚本
+- 超轻量级版本 `start_ultralight.sh` 适合资源受限环境，无任何限制
+
+### 参数说明
+- **安全系数**: 建议值 1.2-2.0，用于增加选型余量
+- **允许惯量比**: 通常为 5-50，根据应用精度要求调整
+- **摩擦系数**: 根据实际机械结构选择合适的值
+- **传动效率**: 考虑机械损耗，典型值 0.8-0.95
 
+## 🧮 计算原理
+
+### 滚珠丝杠
 ```
-servo_sizer/
-├── index.html          # 主页面
-├── style.css           # 样式文件
-├── script.js           # 核心计算逻辑
-└── README.md          # 说明文档
+推力转矩 = (负载 × 重力 × 导程) / (2π)
+摩擦转矩 = (摩擦力 × 丝杠半径)
+总转矩 = (推力转矩 + 摩擦转矩) / 效率
 ```
 
-## 计算公式说明
+### 同步带
+```
+负载转矩 = (负载 × 重力 × 滑轮半径 + 摩擦力 × 滑轮半径) / 效率
+```
+
+### 减速机
+```
+折算惯量 = 负载惯量 / (减速比²)
+折算转矩 = 负载转矩 / (减速比 × 效率)
+```
 
-### 1. 丝杠传动
-- 负载转矩: `T = (F × P) / (2π × η)`
-- 惯量折算: `J = J_load × (P/2π)²`
-- 最大转速: `n_max = v_max × 60 / P`
+## 🎯 使用场景
 
-### 2. 同步带传动
-- 负载转矩: `T = (F × r) / η`
-- 惯量折算: `J = J_load × (r₁/r₂)²`
-- 线速度: `v = ω × r`
+- **自动化设备设计** - 机器人、CNC机床、3D打印机
+- **工业控制系统** - 包装机械、装配线、物料搬运
+- **精密仪器** - 光学平台、测量设备、实验室设备
+- **教育演示** - 伺服系统原理教学和实验
 
-### 3. 减速机传动
-- 输出转矩: `T_out = T_in × i × η`
-- 惯量折算: `J_motor = J_load / i²`
-- 转速关系: `n_out = n_in / i`
+## 📊 输出结果
 
-### 4. 转盘机构
-- 转动惯量: `J = 0.5 × m × r²`
-- 加速转矩: `T_acc = J × α`
-- 摩擦转矩: `T_fric = μ × m × g × r`
+计算完成后，工具会显示以下关键参数：
+- **转速范围** (RPM) - 电机工作转速范围
+- **连续转矩** (N·m) - 持续工作所需的转矩
+- **峰值转矩** (N·m) - 加速阶段的最大转矩需求
+- **负载惯量** (kg·m²) - 折算到电机轴的总惯量
+- **惯量比** - 负载惯量与电机惯量的比值
+- **额定功率** (W) - 电机所需额定功率
 
-### 5. 收放卷系统
-- 张力转矩: `T = F_tension × r`
-- 惯量变化: `J = 0.5 × m × (r_outer² + r_inner²)`
-- 功率需求: `P = T × ω`
+## 🛡️ 安全提示
 
-## 安全系数标准
+- 计算结果仅供参考，实际选型需结合具体产品规格
+- 建议在关键应用中咨询专业工程师
+- 考虑环境因素（温度、湿度、振动等）对性能的影响
+- 验证所选电机的热性能和长期可靠性
 
-- **惯量匹配比**: 建议 ≤ 10:1 (负载惯量:电机惯量)
-- **安全系数**: 建议 ≥ 1.5-2.0
-- **效率考虑**: 丝杠(70-90%), 同步带(95-98%), 减速机(85-95%)
+## 🤝 贡献指南
 
-## 开发说明
+欢迎提交 Issue 和 Pull Request！主要改进方向：
+- 添加更多传动类型支持
+- 增强计算精度和物理模型
+- 改进用户界面和交互体验
+- 添加多语言支持
+- 集成实际电机产品数据库
 
-所有计算逻辑都在 `script.js` 中实现，采用模块化设计，便于维护和扩展。
+## 📄 许可证
 
-如需添加新的传动类型或修改计算公式，请编辑相应的计算函数。
+MIT License - 免费用于个人和商业项目
 
-## 许可证
+---
 
-MIT License - 免费使用和修改。
+**注意**: 本工具基于简化物理模型，实际工程应用中请结合具体产品手册和专业工程判断。

index.html

@@ -3,76 +3,115 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>伺服驱动选型工具 - Servo Sizer</title>
+    <title>伺服驱动选型工具</title>
     <link rel="stylesheet" href="style.css">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
     <div class="container">
-        <header class="header">
+        <div class="header">
             <h1>🔧 伺服驱动选型工具</h1>
-            <p class="subtitle">专业级伺服电机与驱动器选型计算平台</p>
-        </header>
+            <p class="subtitle">专业级伺服电机与驱动器选型计算，支持多种传动结构类型</p>
+        </div>
 
         <div class="main-content">
-            <div class="input-section">
-                <div class="card">
-                    <h2>⚙️ 传动结构选择</h2>
-                    <div class="transmission-selector">
-                        <select id="transmissionType" class="form-control">
-                            <option value="ballscrew">滚珠丝杠</option>
-                            <option value="timingBelt">同步带</option>
-                            <option value="gearbox">减速机</option>
-                            <option value="rotaryTable">转盘</option>
-                            <option value="winder">收放卷</option>
-                            <option value="directDrive">直接驱动</option>
-                            <option value="combined">组合传动</option>
-                        </select>
-                    </div>
+            <!-- 输入参数区域 -->
+            <div class="card">
+                <h2>⚙️ 输入参数</h2>
+                
+                <div class="form-group">
+                    <label for="transmissionType">传动类型:</label>
+                    <select id="transmissionType" class="form-control">
+                        <option value="ballscrew">滚珠丝杠</option>
+                        <option value="timingBelt">同步带</option>
+                        <option value="gearbox">减速机</option>
+                        <option value="rotaryTable">转盘</option>
+                        <option value="winder">收放卷</option>
+                        <option value="directDrive">直接驱动</option>
+                        <option value="combined">组合传动</option>
+                    </select>
                 </div>
 
-                <div class="card" id="parametersSection">
-                    <h2>📊 机械参数输入</h2>
-                    <div id="dynamicParameters">
-                        <!-- 动态参数表单将在这里生成 -->
-                    </div>
-                </div>
+                <!-- 动态参数表单 -->
+                <div id="dynamicParameters"></div>
 
-                <div class="card">
-                    <h2>🎯 选型要求</h2>
-                    <div class="form-group">
-                        <label for="safetyFactor">安全系数:</label>
-                        <input type="number" id="safetyFactor" class="form-control" value="1.5" min="1.0" max="3.0" step="0.1">
-                    </div>
-                    <div class="form-group">
-                        <label for="inertiaRatio">允许惯量比:</label>
-                        <input type="number" id="inertiaRatio" class="form-control" value="10" min="1" max="50" step="1">
-                    </div>
-                    <div class="form-group">
-                        <label for="frictionCoeff">摩擦系数:</label>
-                        <input type="number" id="frictionCoeff" class="form-control" value="0.01" min="0.001" max="0.5" step="0.001">
-                    </div>
+                <!-- 通用参数 -->
+                <h4>通用设置</h4>
+                <div class="form-group">
+                    <label for="safetyFactor">安全系数:</label>
+                    <input type="number" id="safetyFactor" class="form-control" value="1.5" min="1" max="3" step="0.1">
+                </div>
+                <div class="form-group">
+                    <label for="inertiaRatio">允许惯量比:</label>
+                    <input type="number" id="inertiaRatio" class="form-control" value="10" min="1" max="100" step="1">
+                </div>
+                <div class="form-group">
+                    <label for="frictionCoeff">摩擦系数:</label>
+                    <input type="number" id="frictionCoeff" class="form-control" value="0.01" min="0" max="1" step="0.001">
+                </div>
+                <div class="form-group">
+                    <label for="efficiency">传动效率:</label>
+                    <input type="number" id="efficiency" class="form-control" value="0.9" min="0.1" max="1" step="0.01">
                 </div>
 
-                <button id="calculateBtn" class="btn btn-primary">🚀 计算选型结果</button>
+                <!-- 操作按钮 -->
+                <div class="btn-group">
+                    <button id="calculateBtn" class="btn btn-primary">计算选型结果</button>
+                    <button id="resetBtn" class="btn btn-secondary">重置表单</button>
+                    <button id="exportBtn" class="btn btn-secondary">导出结果</button>
+                    <button id="saveConfigBtn" class="btn btn-secondary">保存配置</button>
+                    <button id="loadConfigBtn" class="btn btn-secondary">加载配置</button>
+                </div>
             </div>
 
-            <div class="output-section">
-                <div class="card">
-                    <h2>📈 计算结果</h2>
+            <!-- 结果显示区域 -->
+            <div class="card">
+                <h2>📊 计算结果</h2>
+                <div id="resultsCard" style="display: none;">
                     <div id="resultsDisplay">
                         <p class="placeholder">请输入参数并点击计算获取结果</p>
                     </div>
+                    <div id="warningMessage" class="warning hidden"></div>
+                    <div id="errorMessage" class="error hidden"></div>
+                    
+                    <!-- 性能图表 -->
+                    <div style="margin-top: 20px; height: 300px;">
+                        <canvas id="performanceChart"></canvas>
+                    </div>
                 </div>
+            </div>
+        </div>
 
-                <div class="card">
-                    <h2>📊 性能图表</h2>
-                    <canvas id="performanceChart" width="400" height="300"></canvas>
-                </div>
+        <!-- 使用指南 -->
+        <div class="card" style="margin-top: 20px;">
+            <h2>📚 使用指南</h2>
+            <div class="guidance-section">
+                <ul>
+                    <li><strong>滚珠丝杠</strong>: 适用于高精度直线运动，如CNC机床、3D打印机</li>
+                    <li><strong>同步带</strong>: 适用于高速长行程应用，如自动化装配线</li>
+                    <li><strong>减速机</strong>: 适用于需要高扭矩低速的应用，如机器人关节</li>
+                    <li><strong>转盘</strong>: 适用于旋转工作台，如分度台、转台</li>
+                    <li><strong>收放卷</strong>: 适用于卷绕张力控制，如薄膜、纸张处理</li>
+                    <li><strong>直接驱动</strong>: 适用于高精度直接耦合，如精密定位平台</li>
+                    <li><strong>组合传动</strong>: 适用于复杂多级传动系统</li>
+                </ul>
+                <p style="margin-top: 10px; color: #666;">
+                    <em>💡 提示: 安全系数建议值为1.2-2.0，惯量比通常为5-50。计算结果仅供参考，请结合具体产品规格进行选型。</em>
+                </p>
+                <p style="margin-top: 15px;">
+                    <a href="user_guide.html" target="_blank" style="color: #3498db; text-decoration: none; font-weight: bold;">
+                        📖 查看完整使用说明
+                    </a>
+                </p>
             </div>
         </div>
-    </div>
 
-    <script src="script.js"></script>
+        <!-- 警告消息容器 -->
+        <div id="alertContainer"></div>
+
+        <!-- 本地 Chart.js -->
+        <script src="chart.js"></script>
+        <!-- 主要脚本 -->
+        <script src="script.js"></script>
+    </div>
 </body>
 </html>

start.sh

@@ -1,21 +1,6 @@
 #!/bin/bash
-# 伺服驱动选型工具启动脚本
-
-echo "🚀 启动伺服驱动选型工具..."
-echo "🔧 工具文件位置: $(pwd)"
-echo "🌐 在浏览器中打开 index.html 即可使用"
-echo ""
-echo "💡 使用说明:"
-echo "1. 打开 index.html 文件"
-echo "2. 选择传动结构类型"
-echo "3. 输入相应的机械参数"
-echo "4. 点击'计算选型结果'按钮"
-echo "5. 查看计算结果和性能图表"
-
-# 如果系统有python3，可以启动简单的HTTP服务器
-if command -v python3 &> /dev/null; then
-    echo ""
-    echo "🎯 您也可以运行以下命令启动本地服务器:"
-    echo "cd servo_sizer && python3 -m http.server 8080"
-    echo "然后在浏览器中访问 http://localhost:8080"
-fi
+# 启动伺服驱动选型工具本地服务器
+cd "$(dirname "$0")"
+echo "启动伺服驱动选型工具..."
+echo "访问地址: http://localhost:8080"
+python3 -m http.server 8080

style.css

@@ -1,301 +1,246 @@
-/* 工业科技风格CSS */
-:root {
-  --primary-color: #007acc;
-  --secondary-color: #2c3e50;
-  --accent-color: #e74c3c;
-  --success-color: #27ae60;
-  --warning-color: #f39c12;
-  --light-gray: #ecf0f1;
-  --dark-gray: #34495e;
-  --border-color: #bdc3c7;
-  --card-bg: #ffffff;
-  --panel-bg: #f8f9fa;
-}
-
+/* 伺服驱动选型工具 - 样式表 */
 * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
 body {
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  background: linear-gradient(135deg, #1a2a3a 0%, #2c3e50 100%);
-  color: #ecf0f1;
-  min-height: 100vh;
-  padding: 20px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
 }
 
 .container {
-  max-width: 1400px;
-  margin: 0 auto;
+    max-width: 1200px;
+    margin: 0 auto;
+    background: white;
+    border-radius: 15px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+    overflow: hidden;
 }
 
 .header {
-  text-align: center;
-  margin-bottom: 30px;
-  padding: 20px;
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 15px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    color: white;
+    padding: 30px;
+    text-align: center;
 }
 
 .header h1 {
-  font-size: 2.5rem;
-  margin-bottom: 10px;
-  background: linear-gradient(45deg, #00c6ff, #0072ff);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    font-size: 2.5em;
+    margin-bottom: 10px;
 }
 
-.header p {
-  font-size: 1.1rem;
-  opacity: 0.8;
+.subtitle {
+    font-size: 1.1em;
+    opacity: 0.9;
 }
 
 .main-content {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 25px;
-}
-
-@media (max-width: 1200px) {
-  .main-content {
-    grid-template-columns: 1fr;
-  }
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    padding: 30px;
 }
 
 .card {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 15px;
-  padding: 25px;
-  backdrop-filter: blur(10px);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    background: #f8f9fa;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }
 
 .card h2 {
-  font-size: 1.5rem;
-  margin-bottom: 20px;
-  color: #00c6ff;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.card h2 i {
-  font-size: 1.2rem;
+    color: #333;
+    margin-bottom: 20px;
+    font-size: 1.5em;
 }
 
 .form-group {
-  margin-bottom: 20px;
+    margin-bottom: 15px;
 }
 
 .form-group label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 600;
-  color: #ecf0f1;
-}
-
-.form-group input,
-.form-group select {
-  width: 100%;
-  padding: 12px 15px;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-  font-size: 14px;
-  transition: all 0.3s ease;
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 600;
+    color: #555;
 }
 
-.form-group input:focus,
-.form-group select:focus {
-  outline: none;
-  border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.2);
+.form-control {
+    width: 100%;
+    padding: 10px;
+    border: 2px solid #ddd;
+    border-radius: 5px;
+    font-size: 14px;
+    transition: border-color 0.3s;
 }
 
-.form-group input::placeholder {
-  color: rgba(255, 255, 255, 0.5);
+.form-control:focus {
+    outline: none;
+    border-color: #4facfe;
 }
 
-.transmission-type {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 15px;
-  margin-bottom: 20px;
-}
-
-.transmission-btn {
-  padding: 15px;
-  border: 2px solid rgba(255, 255, 255, 0.2);
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.05);
-  color: white;
-  cursor: pointer;
-  text-align: center;
-  font-weight: 600;
-  transition: all 0.3s ease;
-}
-
-.transmission-btn:hover {
-  background: rgba(0, 198, 255, 0.2);
-  border-color: #00c6ff;
-}
-
-.transmission-btn.active {
-  background: rgba(0, 198, 255, 0.3);
-  border-color: #00c6ff;
-  color: #00c6ff;
-}
-
-.combination-section {
-  margin-top: 20px;
-  padding-top: 20px;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
+.form-control.error {
+    border-color: #e74c3c;
 }
 
 .btn-group {
-  display: flex;
-  gap: 15px;
-  margin-top: 20px;
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
 }
 
 .btn {
-  padding: 12px 25px;
-  border: none;
-  border-radius: 8px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  flex: 1;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    transition: all 0.3s;
 }
 
 .btn-primary {
-  background: linear-gradient(45deg, #007acc, #005fa3);
-  color: white;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
 }
 
 .btn-primary:hover {
-  background: linear-gradient(45deg, #0066b3, #004d8c);
-  transform: translateY(-2px);
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
 }
 
 .btn-secondary {
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+    background: #6c757d;
+    color: white;
 }
 
 .btn-secondary:hover {
-  background: rgba(255, 255, 255, 0.2);
+    background: #5a6268;
+    transform: translateY(-2px);
 }
 
 .results-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 20px;
-  margin-top: 20px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+    margin-top: 15px;
 }
 
 .result-card {
-  background: rgba(39, 174, 96, 0.1);
-  border: 1px solid rgba(39, 174, 96, 0.3);
-  border-radius: 10px;
-  padding: 20px;
-  text-align: center;
+    background: white;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    text-align: center;
 }
 
-.result-card h3 {
-  font-size: 1rem;
-  margin-bottom: 10px;
-  color: #27ae60;
+.result-label {
+    font-size: 12px;
+    color: #666;
+    margin-bottom: 5px;
 }
 
-.result-card .value {
-  font-size: 1.8rem;
-  font-weight: 700;
-  color: white;
+.result-value {
+    font-size: 18px;
+    font-weight: bold;
+    color: #333;
 }
 
-.result-card .unit {
-  font-size: 0.9rem;
-  opacity: 0.7;
+.placeholder {
+    color: #999;
+    font-style: italic;
+    text-align: center;
+    padding: 20px;
 }
 
 .warning {
-  background: rgba(243, 156, 18, 0.1);
-  border: 1px solid rgba(243, 156, 18, 0.3);
-  color: #f39c12;
-  padding: 15px;
-  border-radius: 8px;
-  margin-top: 20px;
-  display: none;
+    background: #fff3cd;
+    color: #856404;
+    padding: 10px;
+    border-radius: 5px;
+    margin-top: 10px;
 }
 
 .error {
-  background: rgba(231, 76, 60, 0.1);
-  border: 1px solid rgba(231, 76, 60, 0.3);
-  color: #e74c3c;
-  padding: 15px;
-  border-radius: 8px;
-  margin-top: 20px;
-  display: none;
-}
-
-.guidance-section {
-  margin-top: 20px;
-  padding: 15px;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 10px;
-  border-left: 4px solid #00c6ff;
+    background: #f8d7da;
+    color: #721c24;
+    padding: 10px;
+    border-radius: 5px;
+    margin-top: 10px;
 }
 
-.guidance-section h4 {
-  margin-bottom: 10px;
-  color: #00c6ff;
+.hidden {
+    display: none !important;
 }
 
 .guidance-section ul {
-  padding-left: 20px;
+    list-style-type: none;
+    padding-left: 0;
 }
 
 .guidance-section li {
-  margin-bottom: 5px;
-  line-height: 1.4;
+    margin-bottom: 8px;
+    padding: 8px;
+    background: white;
+    border-radius: 5px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
 
-.hidden {
-  display: none;
+.alert {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 15px 20px;
+    border-radius: 5px;
+    color: white;
+    font-weight: bold;
+    z-index: 1000;
+    animation: slideIn 0.3s ease-out;
+}
+
+.alert-info {
+    background: #17a2b8;
+}
+
+.alert-success {
+    background: #28a745;
+}
+
+.alert-warning {
+    background: #ffc107;
+    color: #212529;
+}
+
+.alert-error {
+    background: #dc3545;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
 }
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-  .main-content {
-    gap: 15px;
-  }
-  
-  .card {
-    padding: 15px;
-  }
-  
-  .header h1 {
-    font-size: 2rem;
-  }
-  
-  .transmission-type {
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-  }
-  
-  .btn-group {
-    flex-direction: column;
-  }
-  
-  .btn {
-    flex: none;
-  }
+    .main-content {
+        grid-template-columns: 1fr;
+    }
+    
+    .header h1 {
+        font-size: 2em;
+    }
+    
+    .btn-group {
+        flex-direction: column;
+    }
 }

user_guide.html

@@ -0,0 +1,418 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>伺服驱动选型工具 - 使用指南</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background-color: #f8f9fa;
+            padding: 20px;
+        }
+        
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+        
+        .header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+        }
+        
+        .header p {
+            font-size: 1.2rem;
+            opacity: 0.9;
+        }
+        
+        .content {
+            padding: 30px;
+        }
+        
+        .section {
+            margin-bottom: 40px;
+        }
+        
+        .section h2 {
+            color: #4a5568;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid #e2e8f0;
+        }
+        
+        .section h3 {
+            color: #2d3748;
+            margin: 15px 0 10px 0;
+        }
+        
+        .steps {
+            counter-reset: step-counter;
+            list-style: none;
+        }
+        
+        .steps li {
+            counter-increment: step-counter;
+            position: relative;
+            padding: 15px 0 15px 60px;
+            margin-bottom: 15px;
+            background: #f7fafc;
+            border-left: 4px solid #667eea;
+            border-radius: 5px;
+        }
+        
+        .steps li:before {
+            content: counter(step-counter);
+            position: absolute;
+            left: 15px;
+            top: 15px;
+            width: 30px;
+            height: 30px;
+            background: #667eea;
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+        }
+        
+        .transmission-types {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
+        }
+        
+        .type-card {
+            background: #f7fafc;
+            padding: 20px;
+            border-radius: 8px;
+            border: 1px solid #e2e8f0;
+        }
+        
+        .type-card h4 {
+            color: #4a5568;
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+        }
+        
+        .type-card h4:before {
+            content: "⚙️";
+            margin-right: 10px;
+        }
+        
+        .tips {
+            background: #ebf8ff;
+            border-left: 4px solid #4299e1;
+            padding: 20px;
+            border-radius: 5px;
+            margin: 20px 0;
+        }
+        
+        .tips h3 {
+            display: flex;
+            align-items: center;
+        }
+        
+        .tips h3:before {
+            content: "💡";
+            margin-right: 10px;
+        }
+        
+        .warning {
+            background: #fff5f5;
+            border-left: 4px solid #e53e3e;
+            padding: 20px;
+            border-radius: 5px;
+            margin: 20px 0;
+        }
+        
+        .warning h3 {
+            display: flex;
+            align-items: center;
+        }
+        
+        .warning h3:before {
+            content: "⚠️";
+            margin-right: 10px;
+        }
+        
+        .btn-group {
+            display: flex;
+            gap: 10px;
+            margin-top: 20px;
+            flex-wrap: wrap;
+        }
+        
+        .btn {
+            padding: 10px 20px;
+            background: #667eea;
+            color: white;
+            text-decoration: none;
+            border-radius: 5px;
+            font-weight: bold;
+            transition: background 0.3s;
+        }
+        
+        .btn:hover {
+            background: #5a67d8;
+        }
+        
+        .btn-secondary {
+            background: #718096;
+        }
+        
+        .btn-secondary:hover {
+            background: #4a5568;
+        }
+        
+        @media (max-width: 768px) {
+            .header {
+                padding: 20px;
+            }
+            
+            .header h1 {
+                font-size: 2rem;
+            }
+            
+            .content {
+                padding: 20px;
+            }
+            
+            .transmission-types {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🔧 伺服驱动选型工具使用指南</h1>
+            <p>专业级伺服电机与驱动器选型计算，支持多种传动结构类型</p>
+        </div>
+        
+        <div class="content">
+            <div class="section">
+                <h2>🎯 快速开始</h2>
+                <ol class="steps">
+                    <li><strong>选择传动类型</strong>：从下拉菜单中选择您的应用对应的传动类型（滚珠丝杠、同步带、减速机等）</li>
+                    <li><strong>输入参数</strong>：根据所选传动类型，填写相应的机械参数</li>
+                    <li><strong>设置通用参数</strong>：调整安全系数、允许惯量比、摩擦系数和传动效率</li>
+                    <li><strong>点击计算</strong>：点击"计算选型结果"按钮获取详细的选型建议</li>
+                    <li><strong>查看结果</strong>：分析计算结果，包括转矩、转速、惯量、功率等关键参数</li>
+                </ol>
+                
+                <div class="btn-group">
+                    <a href="index.html" class="btn">立即开始使用</a>
+                    <a href="#transmission-types" class="btn btn-secondary">查看传动类型说明</a>
+                </div>
+            </div>
+            
+            <div class="section" id="transmission-types">
+                <h2>⚙️ 传动类型详解</h2>
+                <p>本工具支持7种常见的传动结构类型，每种类型都有其特定的应用场景：</p>
+                
+                <div class="transmission-types">
+                    <div class="type-card">
+                        <h4>滚珠丝杠</h4>
+                        <p><strong>适用场景：</strong>CNC机床、3D打印机、精密定位平台</p>
+                        <p><strong>关键参数：</strong>丝杠直径、导程、行程距离、负载质量</p>
+                    </div>
+                    
+                    <div class="type-card">
+                        <h4>同步带</h4>
+                        <p><strong>适用场景：</strong>自动化装配线、高速长行程应用、物料搬运</p>
+                        <p><strong>关键参数：</strong>滑轮直径、负载质量、最大线速度</p>
+                    </div>
+                    
+                    <div class="type-card">
+                        <h4>减速机</h4>
+                        <p><strong>适用场景：</strong>机器人关节、高扭矩低速应用、工业机械臂</p>
+                        <p><strong>关键参数：</strong>减速比、负载惯量、负载转矩</p>
+                    </div>
+                    
+                    <div class="type-card">
+                        <h4>转盘</h4>
+                        <p><strong>适用场景：</strong>分度台、旋转工作台、转台设备</p>
+                        <p><strong>关键参数：</strong>转盘质量、转盘半径、最大转速</p>
+                    </div>
+                    
+                    <div class="type-card">
+                        <h4>收放卷</h4>
+                        <p><strong>适用场景：</strong>薄膜处理、纸张卷绕、张力控制系统</p>
+                        <p><strong>关键参数：</strong>材料密度、宽度、初始/最终直径、张力</p>
+                    </div>
+                    
+                    <div class="type-card">
+                        <h4>直接驱动</h4>
+                        <p><strong>适用场景：</strong>高精度直接耦合、精密仪器、光学平台</p>
+                        <p><strong>关键参数：</strong>负载惯量、摩擦转矩、最大转速</p>
+                    </div>
+                    
+                    <div class="type-card">
+                        <h4>组合传动</h4>
+                        <p><strong>适用场景：</strong>复杂多级传动系统、特殊机械结构</p>
+                        <p><strong>关键参数：</strong>组合负载质量、主要/次要传动类型</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="section">
+                <h2>🔧 通用参数设置</h2>
+                
+                <h3>安全系数</h3>
+                <p>安全系数用于增加选型余量，确保系统在实际运行中有足够的安全裕度。</p>
+                <p><strong>推荐值：</strong>1.2 - 2.0</p>
+                <p><strong>默认值：</strong>1.5</p>
+                
+                <h3>允许惯量比</h3>
+                <p>惯量比是负载惯量与电机惯量的比值，影响系统的响应性能和稳定性。</p>
+                <p><strong>典型范围：</strong>5 - 50</p>
+                <p><strong>默认值：</strong>10</p>
+                <p><em>注意：如果计算结果显示惯量比超过允许值，系统会显示警告信息</em></p>
+                
+                <h3>摩擦系数</h3>
+                <p>表示机械系统中的摩擦阻力，影响所需的驱动转矩。</p>
+                <p><strong>典型值：</strong>0.01 - 0.1</p>
+                <p><strong>默认值：</strong>0.01</p>
+                
+                <h3>传动效率</h3>
+                <p>考虑机械传动过程中的能量损耗。</p>
+                <p><strong>典型值：</strong>0.8 - 0.95</p>
+                <p><strong>默认值：</strong>0.9</p>
+            </div>
+            
+            <div class="section">
+                <h2>📊 结果解读</h2>
+                <p>计算完成后，工具会显示以下关键参数：</p>
+                
+                <ul style="margin: 15px 0 15px 30px;">
+                    <li><strong>转速范围 (RPM)</strong>：电机的工作转速范围</li>
+                    <li><strong>连续转矩 (N·m)</strong>：持续工作所需的转矩，已包含安全系数</li>
+                    <li><strong>峰值转矩 (N·m)</strong>：加速阶段的最大转矩需求，已包含安全系数</li>
+                    <li><strong>负载惯量 (kg·m²)</strong>：折算到电机轴的总惯量</li>
+                    <li><strong>惯量比</strong>：负载惯量与电机惯量的比值</li>
+                    <li><strong>额定功率 (W)</strong>：电机所需的额定功率，已包含安全系数</li>
+                </ul>
+                
+                <div class="tips">
+                    <h3>结果使用建议</h3>
+                    <p>• 根据连续转矩和峰值转矩选择合适的电机型号</p>
+                    <p>• 确保所选电机的额定转速覆盖计算的转速范围</p>
+                    <p>• 检查惯量比是否在合理范围内（通常 ≤ 10 为佳）</p>
+                    <p>• 验证电机的额定功率满足计算需求</p>
+                </div>
+            </div>
+            
+            <div class="section">
+                <h2>💾 实用功能</h2>
+                
+                <h3>保存和加载配置</h3>
+                <p>您可以保存当前的参数配置，以便后续快速加载使用。</p>
+                <ul style="margin: 10px 0 10px 30px;">
+                    <li>点击"保存配置"按钮将当前设置保存到浏览器本地存储</li>
+                    <li>点击"加载配置"按钮从本地存储恢复之前的设置</li>
+                </ul>
+                
+                <h3>结果导出</h3>
+                <p>计算结果可以导出为文本文件，便于记录和分享。</p>
+                <ul style="margin: 10px 0 10px 30px;">
+                    <li>点击"导出结果"按钮下载包含所有计算结果的文本文件</li>
+                    <li>文件名包含日期信息，便于版本管理</li>
+                </ul>
+                
+                <h3>图表可视化</h3>
+                <p>工具提供直观的性能指标图表，帮助您快速理解关键参数的关系。</p>
+            </div>
+            
+            <div class="warning">
+                <h3>安全提示</h3>
+                <p>• 本工具的计算结果基于简化物理模型，仅供参考</p>
+                <p>• 实际工程应用中，请结合具体产品规格手册进行最终选型</p>
+                <p>• 关键应用建议咨询专业工程师或电机供应商</p>
+                <p>• 考虑环境因素（温度、湿度、振动等）对电机性能的影响</p>
+                <p>• 验证所选电机的热性能和长期可靠性</p>
+            </div>
+            
+            <div class="section">
+                <h2>🚀 启动方式</h2>
+                <p>本工具可以在任何现代浏览器中直接运行，但推荐使用本地服务器以获得最佳体验：</p>
+                
+                <div class="steps">
+                    <li><strong>直接打开：</strong>双击 <code>index.html</code> 文件在浏览器中打开</li>
+                    <li><strong>本地服务器（推荐）：</strong>在项目目录中运行启动脚本：
+                        <ul style="margin: 10px 0 0 20px;">
+                            <li><code>./start_optimized.sh</code> - Python 3.7+ 环境（推荐）</li>
+                            <li><code>./start_compatible.sh</code> - Python 3.6 兼容环境</li>
+                            <li><code>./start_ultralight.sh</code> - 超轻量级启动（无资源限制）</li>
+                        </ul>
+                    </li>
+                </div>
+            </div>
+            
+            <div class="section">
+                <h2>❓ 常见问题解答 (FAQ)</h2>
+                
+                <h3>Q: 为什么计算结果显示惯量比警告？</h3>
+                <p><strong>A:</strong> 惯量比超过设定的允许值（默认10）时会显示警告。高惯量比可能导致系统响应变慢或不稳定。建议：
+                • 选择更大惯量的电机
+                • 优化机械设计减少负载惯量
+                • 调整允许惯量比参数（但需谨慎）</p>
+                
+                <h3>Q: 如何确定安全系数应该设置多少？</h3>
+                <p><strong>A:</strong> 安全系数取决于应用的可靠性要求：
+                • 一般工业应用：1.2 - 1.5
+                • 高可靠性要求：1.5 - 2.0  
+                • 实验性/非关键应用：1.0 - 1.2</p>
+                
+                <h3>Q: 传动效率如何影响选型结果？</h3>
+                <p><strong>A:</strong> 传动效率越低，所需的电机转矩越大。例如90%效率意味着需要约11%更大的转矩来补偿损耗。对于多级传动，总效率是各级效率的乘积。</p>
+                
+                <h3>Q: 组合传动类型应该如何使用？</h3>
+                <p><strong>A:</strong> 组合传动适用于同时存在多种传动方式的复杂系统。主要传动类型应选择对系统性能影响最大的那个，次要因素通过调整摩擦系数和效率来考虑。</p>
+                
+                <h3>Q: 计算结果中的连续转矩和峰值转矩有什么区别？</h3>
+                <p><strong>A:</strong> 
+                • <strong>连续转矩</strong>：电机长时间运行所需的转矩，决定电机的热性能要求
+                • <strong>峰值转矩</strong>：加速/减速阶段的瞬时最大转矩，决定电机的动态性能
+                选型时两个参数都必须满足，通常峰值转矩需求更高。</p>
+                
+                <h3>Q: 如何验证计算结果的准确性？</h3>
+                <p><strong>A:</strong> 建议采用以下方法验证：
+                • 与供应商提供的选型软件对比
+                • 参考类似成功案例的参数  
+                • 进行小规模原型测试
+                • 咨询专业伺服系统工程师</p>
+            </div>
+            
+            <div class="section">
+                <h2>🤝 技术支持</h2>
+                <p>如果您在使用过程中遇到问题或有改进建议，请联系开发者或提交 Issue。</p>
+                <p>本工具基于 MIT 许可证发布，免费用于个人和商业项目。</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>