feat: 重构文档首页，更新功能介绍为核心能力，优化样式和布局以提升可读性和用户体验

docs/.vitepress/config.mjs

@@ -5,6 +5,9 @@ export default withMermaid(
   defineConfig({
     title: 'License Manager',
     description: 'License Manager Documentation',
+    head: [
+      ['script', { src: 'https://code.iconify.design/iconify-icon/1.0.8/iconify-icon.min.js', defer: '' }]
+    ],
     base: '/', // 使用自定义域名时，base 应该设置为 '/'
 
     // 忽略死链检查

docs/en/index.md

@@ -18,41 +18,92 @@ hero:
     - theme: alt
       text: GitHub
       link: https://github.com/cedar-v/license-manager
-
-features:
-  - icon: 🔧
-    title: Customer Management
-    details: Complete customer information management and status control, supporting CRUD operations, status management, and license association
-    
-  - icon: 🔐
-    title: License Generation
-    details: Supports online/offline licensing modes with hardware fingerprint binding for enhanced security
-    
-  - icon: 📊
-    title: License Management
-    details: Real-time status monitoring and license lifecycle management for complete control
-    
-  - icon: 📦
-    title: Deployment Package
-    details: Automatically generates deployment packages with configurations to simplify deployment
-    
-  - icon: 🌐
-    title: API Services
-    details: Provides comprehensive RESTful APIs for validation, activation, and heartbeat monitoring
-    
-  - icon: ⚡
-    title: High Performance
-    details: Native Go coroutines support 10,000+ concurrent connections, API response time <50ms, memory usage <100MB
-    
-  - icon: 🔒
-    title: Security & Reliability
-    details: JWT authentication, HMAC-SHA256 signature, hardware binding, HTTPS encryption for multi-layer security
-    
-  - icon: 🛠️
-    title: Cross-Platform
-    details: Supports multi-platform hardware information retrieval, Docker deployment, and system service operation
 ---
 
+## Key Capabilities
+
+<section class="lm-feature-grid" aria-label="Key Capabilities">
+  <article class="lm-feature-card" style="--accent-from:#3b82f6; --accent-to:#22d3ee;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:user-id-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>Customer Management</h3>
+      <p>Unified profiles, contacts, license relations, plus risk control policies.</p>
+    </div>
+  </article>
+  
+  <article class="lm-feature-card" style="--accent-from:#8b5cf6; --accent-to:#ec4899;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:slider-minimalistic-horizontal-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>License Generation</h3>
+      <p>Online/offline modes, batch delivery, fingerprint binding, and key encryption.</p>
+    </div>
+  </article>
+
+  <article class="lm-feature-card" style="--accent-from:#f97316; --accent-to:#facc15;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:chart-2-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>License Management</h3>
+      <p>Lifecycle visibility, expiration alerts, lock/unlock, and full audit trails.</p>
+    </div>
+  </article>
+
+  <article class="lm-feature-card" style="--accent-from:#0ea5e9; --accent-to:#14b8a6;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:suitcase-lines-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>Deployment Package</h3>
+      <p>Generate configuration-ready bundles automatically for streamlined delivery.</p>
+    </div>
+  </article>
+
+  <article class="lm-feature-card" style="--accent-from:#14b8a6; --accent-to:#22d3ee;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:link-minimalistic-2-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>API Services</h3>
+      <p>RESTful APIs for validation, activation, heartbeat, and tenant isolation.</p>
+    </div>
+  </article>
+
+  <article class="lm-feature-card" style="--accent-from:#f43f5e; --accent-to:#fb7185;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:rocket-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>High Performance</h3>
+      <p>Go coroutines handle 10k+ concurrency with &lt;50 ms responses and &lt;100 MB memory.</p>
+    </div>
+  </article>
+
+  <article class="lm-feature-card" style="--accent-from:#0f172a; --accent-to:#475569;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:shield-minimalistic-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>Security & Reliability</h3>
+      <p>JWT auth, HMAC-SHA256 signatures, hardware binding, HTTPS encryption.</p>
+    </div>
+  </article>
+
+  <article class="lm-feature-card" style="--accent-from:#16a34a; --accent-to:#4ade80;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:earth-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>Cross-Platform</h3>
+      <p>Multi-platform fingerprinting, Docker deployment, and system service support.</p>
+    </div>
+  </article>
+</section>
+
 ## Live Demo
 
 Access: [lm.cedar-v.com:18080](http://lm.cedar-v.com:18080)
@@ -133,26 +184,79 @@ This project is licensed under the [GPL-3.0](https://www.gnu.org/licenses/gpl-3.
 </div>
 
 <style>
+.lm-feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 1.5rem;
+  margin: 2.5rem 0 3rem;
+}
+
+.lm-feature-card {
+  display: flex;
+  gap: 1rem;
+  padding: 1.35rem;
+  border-radius: 1rem;
+  border: 1px solid color-mix(in srgb, var(--vp-c-divider) 80%, transparent);
+  background: color-mix(in srgb, var(--vp-c-bg), var(--vp-c-bg-soft) 55%);
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.lm-feature-card:hover,
+.lm-feature-card:focus-within {
+  border-color: color-mix(in srgb, var(--vp-c-brand) 65%, transparent);
+  background: color-mix(in srgb, var(--vp-c-bg-soft) 85%, var(--vp-c-brand) 10%);
+}
+
+.lm-feature-icon {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.8rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
+  color: #fff;
+  border: 1px solid color-mix(in srgb, #fff 25%, transparent);
+  flex-shrink: 0;
+}
+
+.lm-feature-icon iconify-icon {
+  width: 1.8rem;
+  height: 1.8rem;
+  font-size: 1.8rem;
+  line-height: 1;
+}
+
+.lm-feature-card h3 {
+  margin: 0;
+  font-size: 1.05rem;
+  color: var(--vp-c-text-1);
+}
+
+.lm-feature-card p {
+  margin: 0.3rem 0 0;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+}
+
 .tech-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 2rem;
+  gap: 1.5rem;
   margin: 2rem 0;
 }
 
 .tech-category {
-  background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-  padding: 1.5rem;
+  background: color-mix(in srgb, var(--vp-c-bg), var(--vp-c-bg-soft) 65%);
+  border-radius: 0.9rem;
+  padding: 1.35rem;
   border: 1px solid var(--vp-c-divider);
 }
 
 .tech-category h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1.1rem;
+  margin: 0 0 0.85rem 0;
+  font-size: 1.05rem;
   color: var(--vp-c-brand);
-  border-bottom: 2px solid var(--vp-c-brand);
-  padding-bottom: 0.5rem;
 }
 
 .tech-category ul {
@@ -162,15 +266,15 @@ This project is licensed under the [GPL-3.0](https://www.gnu.org/licenses/gpl-3.
 }
 
 .tech-category li {
-  padding: 0.5rem 0;
+  padding: 0.45rem 0;
   color: var(--vp-c-text-2);
 }
 
 .tech-category li:before {
-  content: "▸ ";
+  content: "·";
+  display: inline-block;
+  width: 1rem;
   color: var(--vp-c-brand);
-  font-weight: bold;
-  margin-right: 0.5rem;
 }
 
 .community {
@@ -178,25 +282,42 @@ This project is licensed under the [GPL-3.0](https://www.gnu.org/licenses/gpl-3.
   align-items: center;
   gap: 2rem;
   margin: 2rem 0;
+  padding: 1.5rem;
+  border-radius: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  background: color-mix(in srgb, var(--vp-c-bg), var(--vp-c-bg-soft) 60%);
+  flex-wrap: wrap;
 }
 
 .community img {
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  border-radius: 0.75rem;
 }
 
 .community ul {
   list-style: none;
   padding: 0;
+  margin: 0;
 }
 
 .community li {
-  padding: 0.25rem 0;
+  padding: 0.3rem 0;
+  color: var(--vp-c-text-2);
 }
 
 .community li:before {
   content: "✓ ";
   color: var(--vp-c-brand);
-  font-weight: bold;
+  font-weight: 600;
+}
+
+@media (max-width: 720px) {
+  .community {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .lm-feature-card {
+    padding: 1.25rem;
+  }
 }
 </style>

docs/index.md

@@ -18,41 +18,92 @@ hero:
     - theme: alt
       text: GitHub
       link: https://github.com/cedar-v/license-manager
-
-features:
-  - icon: 🔧
-    title: 客户管理
-    details: 客户档案、联系人、授权关系统一维护，配合状态与风控策略
-    
-  - icon: 🔐
-    title: 授权生成
-    details: 支持在线/离线授权、批量发放、硬件指纹绑定与密钥加密
-    
-  - icon: 📊
-    title: 授权管理
-    details: 生命周期可视化、到期提醒、锁定/解锁、日志审计一应俱全
-    
-  - icon: 📦
-    title: 部署包生成
-    details: 自动生成包含配置的部署包，简化部署流程
-    
-  - icon: 🌐
-    title: API服务
-    details: 验证、激活、心跳、租户隔离等 RESTful API，易于系统集成
-    
-  - icon: ⚡
-    title: 高性能
-    details: Go 原生协程支撑 10,000+ 并发，API 响应 <50ms，内存 <100MB
-    
-  - icon: 🔒
-    title: 安全可靠
-    details: JWT认证、HMAC-SHA256签名、硬件绑定、HTTPS加密，多重安全保障
-    
-  - icon: 🛠️
-    title: 跨平台
-    details: 支持多平台硬件信息获取，Docker部署，系统服务运行
 ---
 
+## 核心能力
+
+<section class="lm-feature-grid" aria-label="核心能力">
+  <article class="lm-feature-card" style="--accent-from:#3b82f6; --accent-to:#22d3ee;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:user-id-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>客户管理</h3>
+      <p>客户档案、联系人、授权关系统一维护，配合状态与风控策略。</p>
+    </div>
+  </article>
+  
+  <article class="lm-feature-card" style="--accent-from:#8b5cf6; --accent-to:#ec4899;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:slider-minimalistic-horizontal-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>授权生成</h3>
+      <p>在线/离线授权、批量发放、硬件指纹绑定与密钥加密一站打包。</p>
+    </div>
+  </article>
+
+  <article class="lm-feature-card" style="--accent-from:#f97316; --accent-to:#facc15;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:chart-2-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>授权管理</h3>
+      <p>生命周期可视化、到期提醒、锁定/解锁、日志审计一应俱全。</p>
+    </div>
+  </article>
+
+  <article class="lm-feature-card" style="--accent-from:#0ea5e9; --accent-to:#14b8a6;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:suitcase-lines-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>部署包生成</h3>
+      <p>自动生成包含配置的部署包，交付标准化，部署更轻松。</p>
+    </div>
+  </article>
+
+  <article class="lm-feature-card" style="--accent-from:#14b8a6; --accent-to:#22d3ee;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:link-minimalistic-2-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>API 服务</h3>
+      <p>验证、激活、心跳、租户隔离等 RESTful API，易于系统集成。</p>
+    </div>
+  </article>
+
+  <article class="lm-feature-card" style="--accent-from:#f43f5e; --accent-to:#fb7185;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:rocket-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>高性能</h3>
+      <p>Go 原生协程支撑 10,000+ 并发，API 响应 <50ms，内存 <100MB。</p>
+    </div>
+  </article>
+
+  <article class="lm-feature-card" style="--accent-from:#0f172a; --accent-to:#475569;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:shield-minimalistic-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>安全可靠</h3>
+      <p>JWT 认证、HMAC-SHA256 签名、硬件绑定、HTTPS 多重防护。</p>
+    </div>
+  </article>
+
+  <article class="lm-feature-card" style="--accent-from:#16a34a; --accent-to:#4ade80;">
+    <div class="lm-feature-icon">
+      <iconify-icon icon="solar:earth-bold-duotone"></iconify-icon>
+    </div>
+    <div>
+      <h3>跨平台</h3>
+      <p>支持多平台硬件信息获取，Docker 部署，系统服务运行。</p>
+    </div>
+  </article>
+</section>
+
 ## 在线演示
 
 访问地址：[lm.cedar-v.com:18080](http://lm.cedar-v.com:18080)
@@ -133,26 +184,79 @@ features:
 </div>
 
 <style>
+.lm-feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 1.5rem;
+  margin: 2.5rem 0 3rem;
+}
+
+.lm-feature-card {
+  display: flex;
+  gap: 1rem;
+  padding: 1.35rem;
+  border-radius: 1rem;
+  border: 1px solid color-mix(in srgb, var(--vp-c-divider) 80%, transparent);
+  background: color-mix(in srgb, var(--vp-c-bg), var(--vp-c-bg-soft) 55%);
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.lm-feature-card:hover,
+.lm-feature-card:focus-within {
+  border-color: color-mix(in srgb, var(--vp-c-brand) 65%, transparent);
+  background: color-mix(in srgb, var(--vp-c-bg-soft) 85%, var(--vp-c-brand) 10%);
+}
+
+.lm-feature-icon {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.8rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
+  color: #fff;
+  border: 1px solid color-mix(in srgb, #fff 25%, transparent);
+  flex-shrink: 0;
+}
+
+.lm-feature-icon iconify-icon {
+  width: 1.8rem;
+  height: 1.8rem;
+  font-size: 1.8rem;
+  line-height: 1;
+}
+
+.lm-feature-card h3 {
+  margin: 0;
+  font-size: 1.05rem;
+  color: var(--vp-c-text-1);
+}
+
+.lm-feature-card p {
+  margin: 0.3rem 0 0;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+}
+
 .tech-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 2rem;
+  gap: 1.5rem;
   margin: 2rem 0;
 }
 
 .tech-category {
-  background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-  padding: 1.5rem;
+  background: color-mix(in srgb, var(--vp-c-bg), var(--vp-c-bg-soft) 65%);
+  border-radius: 0.9rem;
+  padding: 1.35rem;
   border: 1px solid var(--vp-c-divider);
 }
 
 .tech-category h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1.1rem;
+  margin: 0 0 0.85rem 0;
+  font-size: 1.05rem;
   color: var(--vp-c-brand);
-  border-bottom: 2px solid var(--vp-c-brand);
-  padding-bottom: 0.5rem;
 }
 
 .tech-category ul {
@@ -162,15 +266,15 @@ features:
 }
 
 .tech-category li {
-  padding: 0.5rem 0;
+  padding: 0.45rem 0;
   color: var(--vp-c-text-2);
 }
 
 .tech-category li:before {
-  content: "▸ ";
+  content: "·";
+  display: inline-block;
+  width: 1rem;
   color: var(--vp-c-brand);
-  font-weight: bold;
-  margin-right: 0.5rem;
 }
 
 .community {
@@ -178,25 +282,42 @@ features:
   align-items: center;
   gap: 2rem;
   margin: 2rem 0;
+  padding: 1.5rem;
+  border-radius: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  background: color-mix(in srgb, var(--vp-c-bg), var(--vp-c-bg-soft) 60%);
+  flex-wrap: wrap;
 }
 
 .community img {
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  border-radius: 0.75rem;
 }
 
 .community ul {
   list-style: none;
   padding: 0;
+  margin: 0;
 }
 
 .community li {
-  padding: 0.25rem 0;
+  padding: 0.3rem 0;
+  color: var(--vp-c-text-2);
 }
 
 .community li:before {
   content: "✓ ";
   color: var(--vp-c-brand);
-  font-weight: bold;
+  font-weight: 600;
+}
+
+@media (max-width: 720px) {
+  .community {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .lm-feature-card {
+    padding: 1.25rem;
+  }
 }
 </style>