NebulaShell/website/views/pages/features.ejs

<!-- 特性页面 -->
<section class="page-features">
    <!-- 页面标题 -->
    <div class="page-header">
        <div class="container">
            <h1 class="page-title">核心特性</h1>
            <p class="page-subtitle">FutureOSS 的六大核心特性，专为现代开发需求设计</p>
            <div class="page-actions">
                <a href="/" class="btn btn-outline" data-page="home">
                    <i class="fas fa-arrow-left"></i>
                    <span>返回首页</span>
                </a>
                <a href="/architecture" class="btn btn-primary" data-page="architecture">
                    <i class="fas fa-arrow-right"></i>
                    <span>查看架构</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 特性网格 -->
    <div class="features-section">
        <div class="container">
            <div class="features-grid">
                <!-- 特性1: 插件化架构 -->
                <div class="feature-card feature-highlight">
                    <div class="feature-header">
                        <div class="feature-icon">
                            <i class="fas fa-puzzle-piece"></i>
                        </div>
                        <h3 class="feature-title">插件化架构</h3>
                        <span class="feature-badge">核心</span>
                    </div>
                    <div class="feature-content">
                        <p class="feature-desc">
                            核心功能全部插件化，按需加载，极致轻量。从 HTTP 服务到 Web 界面，一切皆为插件。
                        </p>
                        <ul class="feature-list">
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>按需加载，减少资源占用</span>
                            </li>
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>热插拔，无需重启服务</span>
                            </li>
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>模块化设计，易于维护</span>
                            </li>
                        </ul>
                    </div>
                    <div class="feature-footer">
                        <span class="feature-tag">架构</span>
                        <span class="feature-tag">扩展性</span>
                    </div>
                </div>

                <!-- 特性2: 安全沙箱 -->
                <div class="feature-card">
                    <div class="feature-header">
                        <div class="feature-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h3 class="feature-title">安全沙箱</h3>
                        <span class="feature-badge">安全</span>
                    </div>
                    <div class="feature-content">
                        <p class="feature-desc">
                            数字签名验证 + 权限分级控制，确保插件来源可信，运行安全。
                        </p>
                        <ul class="feature-list">
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>插件数字签名验证</span>
                            </li>
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>权限分级控制系统</span>
                            </li>
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>可选沙箱环境隔离</span>
                            </li>
                        </ul>
                    </div>
                    <div class="feature-footer">
                        <span class="feature-tag">安全</span>
                        <span class="feature-tag">验证</span>
                    </div>
                </div>

                <!-- 特性3: 热重载支持 -->
                <div class="feature-card">
                    <div class="feature-header">
                        <div class="feature-icon">
                            <i class="fas fa-sync-alt"></i>
                        </div>
                        <h3 class="feature-title">热重载支持</h3>
                        <span class="feature-badge">开发</span>
                    </div>
                    <div class="feature-content">
                        <p class="feature-desc">
                            开发阶段插件实时更新，无需重启服务，提升开发效率。
                        </p>
                        <ul class="feature-list">
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>代码变更实时生效</span>
                            </li>
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>开发模式专属功能</span>
                            </li>
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>状态保持，无需重新登录</span>
                            </li>
                        </ul>
                    </div>
                    <div class="feature-footer">
                        <span class="feature-tag">开发</span>
                        <span class="feature-tag">效率</span>
                    </div>
                </div>

                <!-- 特性4: 可视化控制台 -->
                <div class="feature-card">
                    <div class="feature-header">
                        <div class="feature-icon">
                            <i class="fas fa-tachometer-alt"></i>
                        </div>
                        <h3 class="feature-title">可视化控制台</h3>
                        <span class="feature-badge">监控</span>
                    </div>
                    <div class="feature-content">
                        <p class="feature-desc">
                            Web 仪表盘实时监控系统状态与插件运行情况，管理更直观。
                        </p>
                        <ul class="feature-list">
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>实时系统状态监控</span>
                            </li>
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>插件运行状态可视化</span>
                            </li>
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>一键启用/禁用插件</span>
                            </li>
                        </ul>
                    </div>
                    <div class="feature-footer">
                        <span class="feature-tag">UI</span>
                        <span class="feature-tag">监控</span>
                    </div>
                </div>

                <!-- 特性5: 双协议服务 -->
                <div class="feature-card">
                    <div class="feature-header">
                        <div class="feature-icon">
                            <i class="fas fa-network-wired"></i>
                        </div>
                        <h3 class="feature-title">双协议服务</h3>
                        <span class="feature-badge">性能</span>
                    </div>
                    <div class="feature-content">
                        <p class="feature-desc">
                            同时支持 HTTP API 和 TCP 高性能模式，满足不同场景需求。
                        </p>
                        <ul class="feature-list">
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>HTTP RESTful API 服务</span>
                            </li>
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>TCP 高性能 HTTP 服务</span>
                            </li>
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>WebSocket 实时通信</span>
                            </li>
                        </ul>
                    </div>
                    <div class="feature-footer">
                        <span class="feature-tag">网络</span>
                        <span class="feature-tag">性能</span>
                    </div>
                </div>

                <!-- 特性6: 依赖自动解析 -->
                <div class="feature-card">
                    <div class="feature-header">
                        <div class="feature-icon">
                            <i class="fas fa-cogs"></i>
                        </div>
                        <h3 class="feature-title">依赖自动解析</h3>
                        <span class="feature-badge">便捷</span>
                    </div>
                    <div class="feature-content">
                        <p class="feature-desc">
                            插件依赖自动安装，告别手动配置烦恼，开箱即用。
                        </p>
                        <ul class="feature-list">
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>依赖自动检测与安装</span>
                            </li>
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>版本冲突智能解决</span>
                            </li>
                            <li class="feature-item">
                                <i class="fas fa-check"></i>
                                <span>离线安装支持</span>
                            </li>
                        </ul>
                    </div>
                    <div class="feature-footer">
                        <span class="feature-tag">依赖</span>
                        <span class="feature-tag">自动化</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 特性对比 -->
    <div class="comparison-section">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">与传统框架对比</h2>
                <p class="section-subtitle">FutureOSS 带来的变革性优势</p>
            </div>
            <div class="comparison-table">
                <table class="table">
                    <thead>
                        <tr>
                            <th>特性</th>
                            <th>FutureOSS</th>
                            <th>传统框架</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>架构设计</td>
                            <td><span class="comparison-good">插件化微内核</span></td>
                            <td><span class="comparison-bad">单体或微服务</span></td>
                        </tr>
                        <tr>
                            <td>资源占用</td>
                            <td><span class="comparison-good">按需加载，极致轻量</span></td>
                            <td><span class="comparison-bad">全量加载，资源浪费</span></td>
                        </tr>
                        <tr>
                            <td>扩展性</td>
                            <td><span class="comparison-good">无限扩展，热插拔</span></td>
                            <td><span class="comparison-bad">有限扩展，需重启</span></td>
                        </tr>
                        <tr>
                            <td>安全性</td>
                            <td><span class="comparison-good">数字签名 + 沙箱</span></td>
                            <td><span class="comparison-bad">依赖开发者自觉</span></td>
                        </tr>
                        <tr>
                            <td>开发体验</td>
                            <td><span class="comparison-good">热重载，实时更新</span></td>
                            <td><span class="comparison-bad">修改后需重启</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 下一步行动 -->
    <div class="next-section">
        <div class="container">
            <div class="next-content">
                <h2 class="next-title">深入了解技术实现？</h2>
                <p class="next-subtitle">查看 FutureOSS 的技术架构和设计思想</p>
                <div class="next-actions">
                    <a href="/architecture" class="btn btn-primary btn-large" data-page="architecture">
                        <i class="fas fa-sitemap"></i>
                        <span>查看架构</span>
                    </a>
                    <a href="/plugins" class="btn btn-secondary btn-large" data-page="plugins">
                        <i class="fas fa-puzzle-piece"></i>
                        <span>探索插件</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>