diff --git a/.cursor/rules/blazor.mdc b/.cursor/rules/blazor.mdc
new file mode 100644
index 00000000..81b79da8
--- /dev/null
+++ b/.cursor/rules/blazor.mdc
@@ -0,0 +1,75 @@
+---
+description:     You are a senior Blazor and .NET developer, experienced in C#, ASP.NET Core, and Entity Framework Core. You also use Visual Studio Enterprise for running, debugging, and testing your Blazor applications.
+globs: *.razor
+alwaysApply: true
+---
+
+    You are a senior Blazor and .NET developer, experienced in C#, ASP.NET Core, and Entity Framework Core. You also use Visual Studio Enterprise for running, debugging, and testing your Blazor applications.
+  
+    ## Workflow and Development Environment
+    - All running, debugging, and testing of the Blazor app should happen in Visual Studio Enterprise.
+    - Code editing, AI suggestions, and refactoring will be done within Cursor AI.
+    - Recognize that Visual Studio is installed and should be used for compiling and launching the app.
+  
+    ## Blazor Code Style and Structure
+    - Write idiomatic and efficient Blazor and C# code.
+    - Follow .NET and Blazor conventions.
+    - Use Razor Components appropriately for component-based UI development.
+    - Prefer inline functions for smaller components but separate complex logic into code-behind or service classes.
+    - Async/await should be used where applicable to ensure non-blocking UI operations.
+  
+    ## Naming Conventions
+    - Follow PascalCase for component names, method names, and public members.
+    - Use camelCase for private fields and local variables.
+    - Prefix interface names with "I" (e.g., IUserService).
+  
+    ## Blazor and .NET Specific Guidelines
+    - Utilize Blazor's built-in features for component lifecycle (e.g., OnInitializedAsync, OnParametersSetAsync).
+    - Use data binding effectively with @bind.
+    - Leverage Dependency Injection for services in Blazor.
+    - Structure Blazor components and services following Separation of Concerns.
+    - Use C# 10+ features like record types, pattern matching, and global usings.
+  
+    ## Error Handling and Validation
+    - Implement proper error handling for Blazor pages and API calls.
+    - Use logging for error tracking in the backend and consider capturing UI-level errors in Blazor with tools like ErrorBoundary.
+    - Implement validation using FluentValidation or DataAnnotations in forms.
+  
+    ## Blazor API and Performance Optimization
+    - Utilize Blazor server-side or WebAssembly optimally based on the project requirements.
+    - Use asynchronous methods (async/await) for API calls or UI actions that could block the main thread.
+    - Optimize Razor components by reducing unnecessary renders and using StateHasChanged() efficiently.
+    - Minimize the component render tree by avoiding re-renders unless necessary, using ShouldRender() where appropriate.
+    - Use EventCallbacks for handling user interactions efficiently, passing only minimal data when triggering events.
+  
+    ## Caching Strategies
+    - Implement in-memory caching for frequently used data, especially for Blazor Server apps. Use IMemoryCache for lightweight caching solutions.
+    - For Blazor WebAssembly, utilize localStorage or sessionStorage to cache application state between user sessions.
+    - Consider Distributed Cache strategies (like Redis or SQL Server Cache) for larger applications that need shared state across multiple users or clients.
+    - Cache API calls by storing responses to avoid redundant calls when data is unlikely to change, thus improving the user experience.
+  
+    ## State Management Libraries
+    - Use Blazor’s built-in Cascading Parameters and EventCallbacks for basic state sharing across components.
+    - Implement advanced state management solutions using libraries like Fluxor or BlazorState when the application grows in complexity.
+    - For client-side state persistence in Blazor WebAssembly, consider using Blazored.LocalStorage or Blazored.SessionStorage to maintain state between page reloads.
+    - For server-side Blazor, use Scoped Services and the StateContainer pattern to manage state within user sessions while minimizing re-renders.
+  
+    ## API Design and Integration
+    - Use HttpClient or other appropriate services to communicate with external APIs or your own backend.
+    - Implement error handling for API calls using try-catch and provide proper user feedback in the UI.
+  
+    ## Testing and Debugging in Visual Studio
+    - All unit testing and integration testing should be done in Visual Studio Enterprise.
+    - Test Blazor components and services using xUnit, NUnit, or MSTest.
+    - Use Moq or NSubstitute for mocking dependencies during tests.
+    - Debug Blazor UI issues using browser developer tools and Visual Studio’s debugging tools for backend and server-side issues.
+    - For performance profiling and optimization, rely on Visual Studio's diagnostics tools.
+  
+    ## Security and Authentication
+    - Implement Authentication and Authorization in the Blazor app where necessary using ASP.NET Identity or JWT tokens for API authentication.
+    - Use HTTPS for all web communication and ensure proper CORS policies are implemented.
+  
+    ## API Documentation and Swagger
+    - Use Swagger/OpenAPI for API documentation for your backend API services.
+    - Ensure XML documentation for models and API methods for enhancing Swagger documentation.
+  
\ No newline at end of file
diff --git a/.idea/.idea.CodeWF/.idea/.gitignore b/.idea/.idea.CodeWF/.idea/.gitignore
new file mode 100644
index 00000000..7a60b42e
--- /dev/null
+++ b/.idea/.idea.CodeWF/.idea/.gitignore
@@ -0,0 +1,13 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# Rider 忽略的文件
+/modules.xml
+/contentModel.xml
+/.idea.CodeWF.iml
+/projectSettingsUpdater.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/.idea.CodeWF/.idea/.name b/.idea/.idea.CodeWF/.idea/.name
new file mode 100644
index 00000000..932a8764
--- /dev/null
+++ b/.idea/.idea.CodeWF/.idea/.name
@@ -0,0 +1 @@
+CodeWF
\ No newline at end of file
diff --git a/.idea/.idea.CodeWF/.idea/encodings.xml b/.idea/.idea.CodeWF/.idea/encodings.xml
new file mode 100644
index 00000000..df87cf95
--- /dev/null
+++ b/.idea/.idea.CodeWF/.idea/encodings.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding" addBOMForNewFiles="with BOM under Windows, with no BOM otherwise" />
+</project>
\ No newline at end of file
diff --git a/.idea/.idea.CodeWF/.idea/indexLayout.xml b/.idea/.idea.CodeWF/.idea/indexLayout.xml
new file mode 100644
index 00000000..7b08163c
--- /dev/null
+++ b/.idea/.idea.CodeWF/.idea/indexLayout.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="UserContentModel">
+    <attachedFolders />
+    <explicitIncludes />
+    <explicitExcludes />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/.idea.CodeWF/.idea/vcs.xml b/.idea/.idea.CodeWF/.idea/vcs.xml
new file mode 100644
index 00000000..35eb1ddf
--- /dev/null
+++ b/.idea/.idea.CodeWF/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/README.zh-CN.md b/README.zh-CN.md
index db5dd1de..252095e1 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -187,7 +187,7 @@ CodeWF Toolbox 使用Avalonia开发的跨平台工具箱，使用了Prism做为
 
 ## OpenAPI
 
-https://localhost:5002//scalar/v1
+https://localhost:5002/scalar/v1
 
 ## 赞助
 
diff --git a/src/CodeWF/Pages/Tool/Converter/IconConverter.razor b/src/CodeWF/Pages/Tool/Converter/IconConverter.razor
index 7e555104..d4f73d70 100644
--- a/src/CodeWF/Pages/Tool/Converter/IconConverter.razor
+++ b/src/CodeWF/Pages/Tool/Converter/IconConverter.razor
@@ -2,152 +2,423 @@
 
 <PageTitle>在线ICO转换器 - @SiteOptions.Value.AppTitle</PageTitle>
 
+<div class="fluent-container">
+    <div class="fluent-header">
+        <h2 class="fluent-title">ICO 图标转换工具</h2>
+        <p class="fluent-subtitle">将您的图片转换为多尺寸的 ICO 图标文件</p>
+    </div>
+
+    <div class="fluent-content">
+        <div class="fluent-main">
+            <div class="fluent-card">
+                <div class="fluent-card-content">
+                    <div class="fluent-form-group">
+                        <label for="fileInput" class="fluent-label">选择源图片文件</label>
+                        <div class="fluent-file-input">
+                            <input type="file" id="fileInput" accept=".png,.jpg,.jpeg,.webp" />
+                            <span class="fluent-file-button">浏览文件</span>
+                            <span class="fluent-file-name">未选择文件</span>
+                        </div>
+                        <div class="fluent-hint">支持的格式: PNG、JPG、JPEG、WEBP</div>
+                    </div>
+
+                    <div class="fluent-form-group">
+                        <label class="fluent-label">选择图标尺寸</label>
+                        <div class="fluent-checkbox-group">
+                            <div class="fluent-checkbox">
+                                <input type="checkbox" id="size16" value="16" checked>
+                                <label for="size16">16x16</label>
+                            </div>
+                            <div class="fluent-checkbox">
+                                <input type="checkbox" id="size32" value="32" checked>
+                                <label for="size32">32x32</label>
+                            </div>
+                            <div class="fluent-checkbox">
+                                <input type="checkbox" id="size48" value="48">
+                                <label for="size48">48x48</label>
+                            </div>
+                            <div class="fluent-checkbox">
+                                <input type="checkbox" id="size64" value="64">
+                                <label for="size64">64x64</label>
+                            </div>
+                            <div class="fluent-checkbox">
+                                <input type="checkbox" id="size128" value="128">
+                                <label for="size128">128x128</label>
+                            </div>
+                            <div class="fluent-checkbox">
+                                <input type="checkbox" id="size256" value="256">
+                                <label for="size256">256x256</label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="fluent-actions">
+                        <button id="mergeButton" class="fluent-button fluent-primary">
+                            <svg class="fluent-icon" viewBox="0 0 24 24">
+                                <path d="M4 21h16v-2H4v2zm0-4h16v-2H4v2zm0-4h16v-2H4v2zm0-4h16V7H4v2zm0-6v2h16V3H4z"/>
+                            </svg>
+                            合并生成ICO
+                        </button>
+                        <button id="separateButton" class="fluent-button fluent-secondary">
+                            <svg class="fluent-icon" viewBox="0 0 24 24">
+                                <path d="M3 3v6h6V3H3zm8 0v6h6V3h-6zm-8 8v6h6v-6H3zm8 0v6h6v-6h-6z"/>
+                            </svg>
+                            分别生成ICO
+                        </button>
+                    </div>
+
+                    <div id="result" class="fluent-result">
+                        <div class="fluent-success-message">
+                            <svg class="fluent-icon" viewBox="0 0 24 24">
+                                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
+                            </svg>
+                            <span>转换成功! 请点击下方按钮下载文件。</span>
+                        </div>
+                        <a id="downloadLink" class="fluent-button fluent-success" target="_blank">
+                            <svg class="fluent-icon" viewBox="0 0 24 24">
+                                <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+                            </svg>
+                            下载文件
+                        </a>
+                        <div class="fluent-warning-message">
+                            <svg class="fluent-icon" viewBox="0 0 24 24">
+                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
+                            </svg>
+                            <span>请注意：生成的文件仅保留2分钟，请及时下载。</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="fluent-sidebar">
+            <div class="fluent-card">
+                <div class="fluent-card-header">
+                    <h3>使用说明</h3>
+                </div>
+                <div class="fluent-card-content">
+                    <ol class="fluent-list">
+                        <li>选择一个图片文件作为源文件</li>
+                        <li>选择需要的图标尺寸（建议至少包含16x16和32x32）</li>
+                        <li>点击"合并生成ICO"将所有尺寸合并到一个ICO文件中</li>
+                        <li>或点击"分别生成ICO"获取每个尺寸的单独文件</li>
+                    </ol>
+                    <div class="fluent-code-block">
+                        <div class="fluent-code-title">网站图标引用代码</div>
+                        <pre><code>&lt;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /&gt;</code></pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
 <style>
-    .converter-container {
-        max-width: 800px;
-        margin: 20px auto;
+    /* Fluent UI 风格样式 - 修复容器溢出问题 */
+    .fluent-container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 24px;
+        font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
+        color: #323130;
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .fluent-header {
+        margin-bottom: 24px;
+    }
+
+    .fluent-title {
+        font-size: 28px;
+        font-weight: 600;
+        margin: 0 0 8px 0;
+        color: #0078d4;
+        word-wrap: break-word;
+    }
+
+    .fluent-subtitle {
+        font-size: 16px;
+        margin: 0;
+        color: #605e5c;
+        word-wrap: break-word;
+    }
+
+    .fluent-content {
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        gap: 24px;
+        width: 100%;
+    }
+
+    @@media (max-width: 768px) {
+        .fluent-content {
+            grid-template-columns: 1fr;
+        }
+        
+        .fluent-container {
+            padding: 16px;
+        }
+        
+        .fluent-actions {
+            flex-direction: column;
+        }
+        
+        .fluent-button {
+            width: 100%;
+        }
+    }
+
+    .fluent-card {
+        background: white;
+        border-radius: 4px;
+        box-shadow: 0 1.6px 3.6px 0 rgba(0,0,0,0.132), 0 0.3px 0.9px 0 rgba(0,0,0,0.108);
+        transition: box-shadow 0.3s ease;
+        overflow: hidden;
+        margin-bottom: 24px;
+        width: 100%;
+    }
+
+    .fluent-card:hover {
+        box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,0.132), 0 1.2px 3.6px 0 rgba(0,0,0,0.108);
+    }
+
+    .fluent-card-header {
+        padding: 16px 20px;
+        border-bottom: 1px solid #edebe9;
+    }
+
+    .fluent-card-header h3 {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+    }
+
+    .fluent-card-content {
         padding: 20px;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-word;
+    }
+
+    .fluent-form-group {
+        margin-bottom: 24px;
     }
 
-    .input-group {
-        margin-bottom: 1rem;
+    .fluent-label {
+        display: block;
+        font-size: 14px;
+        font-weight: 600;
+        margin-bottom: 8px;
     }
 
-    .size-options {
+    .fluent-file-input {
+        position: relative;
         display: flex;
-        flex-wrap: wrap;
-        gap: 1rem;
-        margin: 1rem 0;
+        align-items: center;
+        border: 1px solid #8a8886;
+        border-radius: 2px;
+        overflow: hidden;
+        height: 36px;
+        width: 100%;
     }
 
-    .size-option {
+    .fluent-file-input input[type="file"] {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        cursor: pointer;
+        z-index: 2;
+    }
+
+    .fluent-file-button {
+        background-color: #f3f2f1;
+        padding: 0 16px;
+        height: 100%;
         display: flex;
         align-items: center;
-        gap: 0.5rem;
+        border-right: 1px solid #8a8886;
+        font-size: 14px;
+    }
+
+    .fluent-file-name {
+        padding: 0 12px;
+        font-size: 14px;
+        color: #605e5c;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .fluent-hint {
+        font-size: 12px;
+        color: #605e5c;
+        margin-top: 4px;
+    }
+
+    .fluent-checkbox-group {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+        gap: 12px;
+        width: 100%;
     }
 
-    .button-group {
-        margin: 1.5rem 0;
+    .fluent-checkbox {
         display: flex;
-        gap: 1rem;
+        align-items: center;
     }
 
-    .btn {
-        padding: 0.5rem 1rem;
-        border: none;
-        border-radius: 4px;
+    .fluent-checkbox input[type="checkbox"] {
+        width: 20px;
+        height: 20px;
+        margin-right: 8px;
         cursor: pointer;
-        font-size: 1rem;
     }
 
-    .btn-primary {
-        background-color: #007bff;
-        color: white;
+    .fluent-checkbox label {
+        font-size: 14px;
+        cursor: pointer;
     }
 
-    .btn-secondary {
-        background-color: #6c757d;
+    .fluent-actions {
+        display: flex;
+        gap: 12px;
+        margin-bottom: 24px;
+        flex-wrap: wrap;
+    }
+
+    .fluent-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 16px;
+        height: 36px;
+        border-radius: 2px;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.1s ease;
+        border: none;
+        outline: none;
+        text-decoration: none;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .fluent-primary {
+        background-color: #0078d4;
         color: white;
     }
 
-    .btn-success {
-        background-color: #28a745;
+    .fluent-primary:hover {
+        background-color: #106ebe;
+    }
+
+    .fluent-primary:active {
+        background-color: #005a9e;
+    }
+
+    .fluent-secondary {
+        background-color: #f3f2f1;
+        color: #323130;
+        border: 1px solid #8a8886;
+    }
+
+    .fluent-secondary:hover {
+        background-color: #edebe9;
+    }
+
+    .fluent-secondary:active {
+        background-color: #e1dfdd;
+    }
+
+    .fluent-success {
+        background-color: #107c10;
         color: white;
     }
 
-    .memo {
-        margin-top: 3rem;
-        padding-top: 1.5rem;
-        border-top: 1px solid #dee2e6;
+    .fluent-success:hover {
+        background-color: #0b6a0b;
     }
 
-    .code-block {
-        background-color: #f8f9fa;
-        padding: 1rem;
-        border-radius: 4px;
-        font-family: Consolas, monospace;
-        margin: 1rem 0;
+    .fluent-success:active {
+        background-color: #094e09;
     }
 
-    #result {
-        margin-top: 1rem;
+    .fluent-icon {
+        width: 18px;
+        height: 18px;
+        margin-right: 8px;
+        fill: currentColor;
+        flex-shrink: 0;
     }
 
-    .me-2 {
-        margin-right: 0.5rem;
+    .fluent-result {
+        display: none;
     }
 
-    .alert {
-        padding: 0.75rem 1.25rem;
-        border-radius: 4px;
-        margin-bottom: 1rem;
+    .fluent-success-message,
+    .fluent-warning-message {
+        display: flex;
+        align-items: flex-start;
+        padding: 12px 16px;
+        border-radius: 2px;
+        margin-bottom: 16px;
+        word-wrap: break-word;
+    }
+    
+    .fluent-success-message span,
+    .fluent-warning-message span {
+        flex: 1;
     }
 
-    .alert-warning {
-        background-color: #fff3cd;
-        border: 1px solid #ffeeba;
-        color: #856404;
+    .fluent-list {
+        padding-left: 20px;
+        margin: 0 0 20px 0;
     }
 
-    .mt-2 {
-        margin-top: 0.5rem;
+    .fluent-list li {
+        margin-bottom: 8px;
+        line-height: 1.5;
     }
-</style>
 
-<div class="converter-container">
-    <div class="converter-form">
-        <div class="input-group">
-            <label for="fileInput">选择源图片文件</label>
-            <input type="file" id="fileInput" class="form-control" accept=".png,.jpg,.jpeg,.webp" />
-            <small class="text-muted">支持的格式: PNG、JPG、JPEG、WEBP</small>
-        </div>
+    .fluent-code-block {
+        background-color: #f3f2f1;
+        border-radius: 2px;
+        overflow: hidden;
+        width: 100%;
+    }
 
-        <div class="form-group mt-3">
-            <label>选择图标尺寸</label>
-            <div class="size-options">
-                <label class="checkbox-inline">
-                    <input type="checkbox" value="16" checked> 16x16
-                </label>
-                <label class="checkbox-inline">
-                    <input type="checkbox" value="32" checked> 32x32
-                </label>
-                <label class="checkbox-inline">
-                    <input type="checkbox" value="48"> 48x48
-                </label>
-                <label class="checkbox-inline">
-                    <input type="checkbox" value="64"> 64x64
-                </label>
-                <label class="checkbox-inline">
-                    <input type="checkbox" value="128"> 128x128
-                </label>
-                <label class="checkbox-inline">
-                    <input type="checkbox" value="256"> 256x256
-                </label>
-            </div>
-        </div>
+    .fluent-code-title {
+        background-color: #edebe9;
+        padding: 8px 12px;
+        font-size: 13px;
+        font-weight: 600;
+    }
 
-        <div class="form-group mt-3">
-            <button id="mergeButton" class="btn btn-primary me-2">合并生成ICO</button>
-            <button id="separateButton" class="btn btn-secondary">分别生成ICO</button>
-        </div>
+    .fluent-code-block pre {
+        margin: 0;
+        padding: 12px;
+        overflow-x: auto;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
 
-        <div id="result" style="display:none" class="mt-3">
-            <a id="downloadLink" class="btn btn-success" target="_blank">下载文件</a>
-            <div class="alert alert-warning mt-2">
-                <i class="bi bi-clock-history me-2"></i>请注意：生成的文件仅保留2分钟，请及时下载。
-            </div>
-        </div>
-    </div>
+    .fluent-code-block code {
+        font-family: 'Cascadia Code', Consolas, monospace;
+        font-size: 13px;
+        color: #323130;
+    }
 
-    <div class="memo">
-        <h4>使用说明</h4>
-        <p>1. ICO图标文件可以包含多个不同尺寸的图像，建议至少包含16x16和32x32两种尺寸。</p>
-        <p>2. 网站图标引用代码示例：</p>
-        <div class="code-block">
-            <code>&lt;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /&gt;</code>
-        </div>
-    </div>
-</div>
+    /* 确保所有元素都使用border-box盒模型 */
+    *, *::before, *::after {
+        box-sizing: border-box;
+    }
+</style>
 
 @code {
     public const string Slug = "ico";
@@ -155,6 +426,16 @@
 
 <script>
     $(document).ready(function () {
+        // 文件输入框美化
+        $('#fileInput').on('change', function() {
+            var fileName = $(this).val().split('\\').pop();
+            if (fileName) {
+                $('.fluent-file-name').text(fileName);
+            } else {
+                $('.fluent-file-name').text('未选择文件');
+            }
+        });
+
         function validateInput() {
             const $fileInput = $('#fileInput');
             if (!$fileInput[0].files || !$fileInput[0].files.length) {
@@ -182,17 +463,21 @@
             if (!validation) return;
 
             const $button = isMerge ? $('#mergeButton') : $('#separateButton');
-            const $result = $('#result');
+            const $result = $('.fluent-result');
             const $downloadLink = $('#downloadLink');
+            
+            // 保存原始按钮内容
+            const originalHtml = $button.html();
 
-            const formData = new FormData();
-            formData.append('sourceImage', validation.file);
-            formData.append('sizes', validation.sizes.join(','));
-
+            // 添加加载状态
             $button.prop('disabled', true)
-                .text(isMerge ? '合并生成中...' : '分别生成中...');
+                .html(`<div class="fluent-spinner"></div><span>${isMerge ? '合并生成中...' : '分别生成中...'}</span>`);
 
             try {
+                const formData = new FormData();
+                formData.append('sourceImage', validation.file);
+                formData.append('sizes', validation.sizes.join(','));
+
                 const response = await $.ajax({
                     url: `/api/Image/${isMerge ? 'merge' : 'separate'}`,
                     type: 'POST',
@@ -204,8 +489,10 @@
                 if (response.success) {
                     $downloadLink
                         .attr('href', response.url)
-                        .text(`下载${isMerge ? 'ICO文件' : 'ZIP压缩包'}`);
-                    $result.fadeIn();
+                        .html(`<svg class="fluent-icon" viewBox="0 0 24 24">
+                                <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+                              </svg> 下载${isMerge ? 'ICO文件' : 'ZIP压缩包'}`);
+                    $result.fadeIn(300);
                 } else {
                     alert('生成失败：' + response.message);
                 }
@@ -213,13 +500,38 @@
                 console.error('错误:', error);
                 alert('生成过程出错，请稍后重试');
             } finally {
-                $button.prop('disabled', false)
-                    .text(isMerge ? '合并生成ICO' : '分别生成ICO');
+                $button.prop('disabled', false).html(originalHtml);
             }
         }
 
+        // 添加加载动画样式
+        $('<style>')
+            .text(`
+                .fluent-spinner {
+                    width: 16px;
+                    height: 16px;
+                    margin-right: 8px;
+                    border: 2px solid rgba(255,255,255,0.3);
+                    border-radius: 50%;
+                    border-top-color: #fff;
+                    animation: spin 0.8s linear infinite;
+                }
+                
+                @@keyframes spin {
+                    to { transform: rotate(360deg); }
+                }
+            `)
+            .appendTo('head');
+
         // 绑定按钮事件
         $('#mergeButton').click(() => convertIcon(true));
         $('#separateButton').click(() => convertIcon(false));
+        
+        // 添加按钮悬停效果
+        $('.fluent-button').on('mousedown', function() {
+            $(this).css('transform', 'scale(0.98)');
+        }).on('mouseup mouseleave', function() {
+            $(this).css('transform', 'scale(1)');
+        });
     });
 </script>
\ No newline at end of file
diff --git a/src/CodeWF/Pages/Tool/Converter/NuoChe.razor b/src/CodeWF/Pages/Tool/Converter/NuoChe.razor
index d2f499f7..09a2fa6d 100644
--- a/src/CodeWF/Pages/Tool/Converter/NuoChe.razor
+++ b/src/CodeWF/Pages/Tool/Converter/NuoChe.razor
@@ -21,45 +21,45 @@
     }
 }
 
-<PageTitle>���Ų����</PageTitle>
+<PageTitle>挪车码</PageTitle>
 
 <div class="nuoche-container">
     @if (string.IsNullOrWhiteSpace(P))
     {
         <div class="generator-container">
-            <h1 class="generator-title">Ų��������������</h1>
+            <h1 class="generator-title">挪车码生成器</h1>
             <div class="input-group">
-                <label for="phoneNumber">�ֻ�����</label>
-                <input type="tel" id="phoneNumber" placeholder="�������ֻ�����" />
+                <label for="phoneNumber">手机号码</label>
+                <input type="tel" id="phoneNumber" placeholder="请输入手机号码" />
             </div>
             <div class="input-group">
-                <label for="title">����</label>
-                <input type="text" id="title" placeholder="ɨ��Ų��" value="ɨ��Ų��" />
+                <label for="title">标题</label>
+                <input type="text" id="title" placeholder="请输入标题" value="请输入标题" />
             </div>
             <div class="input-group">
                 <div class="checkbox-container">
                     <input type="checkbox" id="enableSubtitle" />
-                    <label for="enableSubtitle">��������</label>
+                    <label for="enableSubtitle">添加副标题</label>
                 </div>
-                <input type="text" id="subtitle" placeholder="ɨ����ϵ�����򲦴�绰: 16800000000" disabled />
+                <input type="text" id="subtitle" placeholder="请输入副标题" disabled />
             </div>
             <div class="button-group">
                 <button class="primary-button" onclick="generateQrCode()">
-                    <i class="fas fa-qrcode"></i> ���ɶ�ά��
+                    <i class="fas fa-qrcode"></i> 生成二维码
                 </button>
             </div>
             <div class="qr-code-container" style="display: none">
-                <img alt="Ų����" />
+                <img alt="挪车码" />
                 <div class="action-buttons">
                     <a target="_blank" class="preview-link">
-                        <i class="fas fa-external-link-alt"></i> Ԥ��
+                        <i class="fas fa-external-link-alt"></i> 预览
                     </a>
                     <a class="download-link">
-                        <i class="fas fa-download"></i> ����
+                        <i class="fas fa-download"></i> 下载
                     </a>
                 </div>
                 <div class="alert alert-warning mt-2">
-                    <i class="fas fa-clock"></i> ��ע�⣺���ɵ��ļ�������2���ӣ��뼰ʱ���ء�
+                    <i class="fas fa-clock"></i> 注意：生成的图片有效期为2分钟，请及时下载。
                 </div>
             </div>
         </div>
@@ -69,21 +69,21 @@
         <div class="card">
             <div class="card-header">
                 <i class="fas fa-car"></i>
-                <h1 class="title">��ʱͣ����������</h1>
+                <h1 class="title">临时停车，请挪车</h1>
             </div>
             <div class="card-body">
-                <p class="description">����ҵij��谭�����ij���ͨ�У�����·���ť֪ͨ�ң������������㾴���½⡣</p>
+                <p class="description">您的爱车临时停放在这里，请您挪车。</p>
                 <a class="phone-button" href="tel:@_decodePhone">
-                    <i class="fas fa-phone-alt"></i> �������绰
+                    <i class="fas fa-phone-alt"></i> 联系车主
                 </a>
-                <a class="generate-link" href="/nuoche">ȥ����һ��Ų����</a>
+                <a class="generate-link" href="/nuoche">去生成一个挪车码</a>
             </div>
         </div>
     }
 </div>
 
 <style>
-    /* ȫ����ʽ */
+    /* ȫ����ʽ */
     .nuoche-container {
         padding: 20px;
         max-width: 100%;
@@ -96,7 +96,7 @@
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     }
 
-    /* ������ҳ����ʽ */
+    /* 首页样式 */
     .generator-container {
         text-align: center;
         padding: 30px 20px;
@@ -119,7 +119,7 @@
         color: #666;
     }
 
-    /* Ų������Ϣ��Ƭ��ʽ */
+    /* 挪车码信息卡片样式 */
     .card {
         width: 90%;
         max-width: 400px;
@@ -203,7 +203,7 @@
         text-decoration: underline;
     }
 
-    /* �����µ���ʽ */
+    /* 输入组样式 */
     .input-group {
         width: 100%;
         margin-bottom: 20px;
@@ -297,7 +297,7 @@
         text-decoration: underline;
     }
 
-    /* ����С���������ʽ */
+    /* 副标题样式 */
     .checkbox-container {
         display: flex;
         align-items: center;
@@ -334,13 +334,13 @@
         if (enableSubtitle) {
             subtitle = document.getElementById('subtitle').value.trim();
             if (!subtitle) {
-                subtitle = `ɨ����ϵ�����򲦴�绰: ${phoneNumber || "16800000000"}`;
+                subtitle = `扫码联系车主: ${phoneNumber || "16800000000"}`;
                 document.getElementById('subtitle').value = subtitle;
             }
         }
 
         if (!title || !phoneNumber) {
-            alert('�����������ֻ�����');
+            alert('请输入标题和手机号码');
             return;
         }
 
@@ -364,12 +364,12 @@
                 img.src = data.qrCodeUrl;
                 qrCodeContainer.querySelector('.preview-link').href = data.generatedUrl;
 
-                // �������ع���
+                // 下载链接
                 const downloadLink = qrCodeContainer.querySelector('.download-link');
                 downloadLink.onclick = () => {
                     const a = document.createElement('a');
                     a.href = data.qrCodeUrl;
-                    a.download = 'Ų����.png';
+                    a.download = '挪车码.png';
                     document.body.appendChild(a);
                     a.click();
                     document.body.removeChild(a);
@@ -380,12 +380,12 @@
                 throw new Error(data.message);
             }
         } catch (error) {
-            console.error('���ɶ�ά��ʧ��:', error);
-            alert('���ɶ�ά��ʧ�ܣ����Ժ�����');
+            console.error('生成二维码失败:', error);
+            alert('生成二维码失败，请稍后再试');
         }
     }
 
-    // ����С���⸴ѡ����¼�����
+    // 副标题选择
     document.addEventListener('DOMContentLoaded', function() {
         const enableSubtitleCheckbox = document.getElementById('enableSubtitle');
         const subtitleInput = document.getElementById('subtitle');
@@ -397,17 +397,17 @@
                 if (this.checked) {
                     if (!subtitleInput.value.trim()) {
                         const phoneNumber = phoneInput.value.trim() || "16800000000";
-                        subtitleInput.value = `ɨ����ϵ�����򲦴�绰: ${phoneNumber}`;
+                        subtitleInput.value = `扫码联系车主: ${phoneNumber}`;
                     }
                     subtitleInput.focus();
                 }
             });
             
-            // ���ֻ�����仯ʱ�����С������������ʹ�õ���Ĭ�ϸ�ʽ�������С�����еĵ绰����
+            // 手机号码变化时，更新副标题
             phoneInput.addEventListener('input', function() {
-                if (enableSubtitleCheckbox.checked && subtitleInput.value.startsWith('ɨ����ϵ�����򲦴�绰:')) {
+                if (enableSubtitleCheckbox.checked && subtitleInput.value.startsWith('扫码联系车主:')) {
                     const phoneNumber = this.value.trim() || "16800000000";
-                    subtitleInput.value = `ɨ����ϵ�����򲦴�绰: ${phoneNumber}`;
+                    subtitleInput.value = `扫码联系车主: ${phoneNumber}`;
                 }
             });
         }
diff --git a/src/CodeWF/Shared/CmsTitle.razor b/src/CodeWF/Shared/CmsTitle.razor
index c79b23e1..4cda64b8 100644
--- a/src/CodeWF/Shared/CmsTitle.razor
+++ b/src/CodeWF/Shared/CmsTitle.razor
@@ -1,7 +1,10 @@
-@if (!string.IsNullOrWhiteSpace(Icon))
-{
-    <div class="title">@Title</div>
-}
+<div class="title">
+    @if (!string.IsNullOrWhiteSpace(Icon))
+    {
+        <i class="@Icon"></i>
+    }
+    @Title
+</div>
 
 @code {
     [Parameter] public string Icon { get; set; }
diff --git a/src/CodeWF/Shared/UMenuBar.razor b/src/CodeWF/Shared/UMenuBar.razor
index 7f136b8d..7af9a549 100644
--- a/src/CodeWF/Shared/UMenuBar.razor
+++ b/src/CodeWF/Shared/UMenuBar.razor
@@ -1,15 +1,17 @@
-<div class="cl-menu-bar" onclick="cl_click_bar(this)"><i class="far fa-bars" /></div>
+<div class="cl-menu-bar" onclick="cl_click_bar(this)"><i class="far fa-bars"></i></div>
 <script>
     var isMenuShow = false;
     function cl_click_bar(obj) {
-        var target = '@Target';
-        var menu = $('.' + target);
+        const target = '@Target';
+        const menu = document.querySelector('.' + target);
+        if (!menu) return;
+        
         if (isMenuShow) {
-            menu.hide();
-            $(obj).css('left', 0);
+            menu.style.display = 'none';
+            obj.style.left = '0';
         } else {
-            menu.show();
-            $(obj).css('left', '199px');
+            menu.style.display = 'block';
+            obj.style.left = '199px';
         }
         isMenuShow = !isMenuShow;
     }
diff --git a/src/WebSite/App.razor b/src/WebSite/App.razor
index aac275c5..fa92c3af 100644
--- a/src/WebSite/App.razor
+++ b/src/WebSite/App.razor
@@ -21,6 +21,9 @@
     <script src="@Config.GetStaticFileUrl("js/jquery.min.js")"></script>
     <script src="@Config.GetStaticFileUrl("_content/CodeWF/js/toc.js")"></script>
     <script src="@Config.GetStaticFileUrl("js/settings.js")"></script>
+    <link href="css/fluent-ui.css" rel="stylesheet" />
+    <!-- 暂时注释掉动画CSS -->
+    <!-- <link href="css/fluent-animations.css" rel="stylesheet" /> -->
 </head>
 
 <body>
@@ -59,7 +62,35 @@
     })();
     const settings = new Settings();
 </script>
-
+<script type="application/ld+json">
+{
+  "@@context": "https://schema.org",
+  "@@type": "WebSite",
+  "name": "码坊",
+  "url": "https://dotnet9.com",
+  "potentialAction": {
+    "@@type": "SearchAction",
+    "target": "https://dotnet9.com/search?q={search_term_string}",
+    "query-input": "required name=search_term_string"
+  },
+  "description": "码坊是使用.NET 10 Blazor开发的一个网站，这里有技术文章，有开源项目介绍，有在线工具使用:  码坊—文章启智，工具助力",
+  "author": {
+    "@@type": "Organization",
+    "name": "码坊团队",
+    "logo": "https://dotnet9.com/favicon.png"
+  },
+  "publisher": {
+    "@@type": "Organization",
+    "name": "码坊",
+    "logo": {
+      "@@type": "ImageObject",
+      "url": "https://dotnet9.com/favicon.png"
+    }
+  }
+}
+</script>
+<!-- 暂时注释掉动画JS -->
+<!-- <script src="js/fluent-animations.js"></script> -->
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/WebSite/Pages/Index.razor b/src/WebSite/Pages/Index.razor
index 71d883a3..98a01729 100644
--- a/src/WebSite/Pages/Index.razor
+++ b/src/WebSite/Pages/Index.razor
@@ -11,14 +11,16 @@
     <div class="container text-white h-100">
         <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5">
             <div class="col pt-4 pb-4">
-                <h2 class="display-4" style="font-weight:500;margin-bottom:2rem;">文章启智，工具助力</h2>
-                <h5 class="font-weight-light" style="margin-bottom:10px;"><strong>码坊</strong>：使用<strong>.NET 10 Web API</strong> + <strong>Blazor</strong>开发。</h5>
-                <h5 class="font-weight-light" style="margin-bottom:1.5rem;">有技术文章、开源项目介绍和在线工具，助力高效编程。</h5>
-                <a href="/bbs" class="btn btn-lg btn-outline-white btn-round">博客</a>
-                <a href="https://github.com/dotnet9/codewf" class="btn btn-success btn-round shadow-sm" target="_blank">Github</a>
+                <h2 class="display-4 font-weight-bold mb-4">文章启智，工具助力</h2>
+                <h5 class="font-weight-light mb-2"><strong>码坊</strong>：使用<strong>.NET 10 Web API</strong> + <strong>Blazor</strong>开发。</h5>
+                <h5 class="font-weight-light mb-4">有技术文章、开源项目介绍和在线工具，助力高效编程。</h5>
+                <div class="d-flex justify-content-center gap-3">
+                    <a href="/bbs" class="btn btn-lg btn-outline-white btn-round mr-2">博客</a>
+                    <a href="https://github.com/dotnet9/codewf" class="btn btn-lg btn-success btn-round shadow-sm" target="_blank">Github</a>
+                </div>
             </div>
             <div class="col align-self-bottom align-items-right text-right h-max-380 position-relative z-index-1">
-                <img src="https://img1.dotnet9.com/site/banners/resource.png" class="rounded img-fluid">
+                <img src="https://img1.dotnet9.com/site/banners/resource.png" class="rounded img-fluid shadow">
             </div>
         </div>
     </div>
@@ -35,11 +37,11 @@
         }
         else
         {
-            var index = 0;
             foreach (var blogPost in _posts)
             {
+                int index = _posts.IndexOf(blogPost);
                 <div class="col-md-6 col-xl-4">
-                    <MediaBox Style="text-salmon" Icon="@_icons[index++]" Title="@blogPost.Title" Link="@ConstantUtil.GetBbsPostUrl(blogPost)">
+                    <MediaBox Style="@GetIconStyle(index)" Icon="@Icons[index % Icons.Length]" Title="@blogPost.Title" Link="@ConstantUtil.GetBbsPostUrl(blogPost)">
                         @blogPost.Description
                     </MediaBox>
                 </div>
@@ -47,23 +49,39 @@
         }
     </div>
 </div>
-
 <script>
-	jQuery(document).ready(function() {
-		$(window).scroll(function() {
-			$('.index-nav').toggleClass('@SiteHeader.DarkNavClass', $(this).scrollTop() > 50);
-		});
-	});
+    document.addEventListener('DOMContentLoaded', function() {
+        const handleScroll = () => {
+            const indexNav = document.querySelector('.index-nav');
+            if (indexNav) {
+                if (window.scrollY > 50) {
+                    indexNav.classList.add('@SiteHeader.DarkNavClass');
+                } else {
+                    indexNav.classList.remove('@SiteHeader.DarkNavClass');
+                }
+            }
+        };
+        
+        window.addEventListener('scroll', handleScroll);
+        // 初始检查
+        handleScroll();
+    });
 </script>
 
 @code
 {
-    private string[] _icons = { "fas fa-paper-plane", "fas fa-shield-alt", "fas fa-layer-group", "fas fa-vector-square", "fab fa-amazon", "fab fa-slack-hash" };
+    private static readonly string[] Icons = { "fas fa-paper-plane", "fas fa-shield-alt", "fas fa-layer-group", "fas fa-vector-square", "fab fa-amazon", "fab fa-slack-hash" };
     private List<BlogPost>? _posts;
 
-    protected override async Task OnInitAsync()
+    protected override async Task OnInitializedAsync()
     {
-        await base.OnInitAsync();
+        await base.OnInitializedAsync();
         _posts = await AppService.GetBannerPostAsync();
     }
+
+    private string GetIconStyle(int index)
+    {
+        string[] styles = new[] { "text-salmon", "text-primary", "text-success", "text-info", "text-warning" };
+        return styles[index % styles.Length];
+    }
 }
\ No newline at end of file
diff --git a/src/WebSite/Pages/TimeLine.razor b/src/WebSite/Pages/TimeLine.razor
index 3767b2ff..55d096c9 100644
--- a/src/WebSite/Pages/TimeLine.razor
+++ b/src/WebSite/Pages/TimeLine.razor
@@ -6,45 +6,49 @@
 
 <PageTitle>时间线 - @SiteOption.Value.AppTitle</PageTitle>
 
-<div class="container cl-container cl-post">
-    <div>
-        <div id="@_mdId">
-            <CmsCard>
-                <HeadTemplate>
-                    <WechatPublicLink />
-                </HeadTemplate>
-                <ChildContent>
-                    <div class="title">时间线</div>
-                    <div id="toc">
-                        <div>
-                            <a class="item-title" href="@GetTopLink()" title="时间线">时间线</a>
+<div class="container cl-container cl-post responsive-container">
+    <div class="row">
+        <div class="col-lg-8">
+            <div id="@_mdId">
+                <CmsCard class="card-enhanced">
+                    <HeadTemplate>
+                        <WechatPublicLink />
+                    </HeadTemplate>
+                    <ChildContent>
+                        <div class="title font-weight-bold mb-4">时间线</div>
+                        <div id="toc" class="mb-4">
+                            <div>
+                                <a class="item-title" href="@GetTopLink()" title="时间线">时间线</a>
+                            </div>
                         </div>
-                    </div>
-                    <div>
-                        @if (_items?.Any() == true)
-                        {
-                            foreach (var item in _items)
+                        <div>
+                            @if (_items?.Any() == true)
                             {
-                                <h2>@item.Time?.ToString("yyyy-MM-dd")</h2>
-                                <h3>@item.Title</h3>
-                                <p>@item.Content</p>
+                                @foreach (var (item, index) in _items.Select((item, index) => (item, index)))
+                                {
+                                    <div class="timeline-item @(index % 2 == 0 ? "slide-up" : "fade-in")" style="animation-delay: @(index * 0.1)s">
+                                        <h2 class="text-primary">@item.Time?.ToString("yyyy-MM-dd")</h2>
+                                        <h3 class="mb-2">@item.Title</h3>
+                                        <p class="text-muted">@item.Content</p>
+                                        <hr class="my-4" />
+                                    </div>
+                                }
                             }
-                        }
-                        else
-                        {
-                            <AntEmpty/>
-                        }
-                    </div>
-
-                </ChildContent>
-            </CmsCard>
+                            else
+                            {
+                                <AntEmpty/>
+                            }
+                        </div>
+                    </ChildContent>
+                </CmsCard>
+            </div>
+            <div style="height:20px;"></div>
+        </div>
+        <div class="col-lg-4">
+            <UWebSiteCount/>
+            <div style="height: 20px;"></div>
+            <UPostRank/>
         </div>
-        <div style="height:20px;"></div>
-    </div>
-    <div>
-        <UWebSiteCount/>
-        <div style="height: 20px;"></div>
-        <UPostRank/>
     </div>
 </div>
 
diff --git a/src/WebSite/Services/SeoService.cs b/src/WebSite/Services/SeoService.cs
new file mode 100644
index 00000000..0519ecba
--- /dev/null
+++ b/src/WebSite/Services/SeoService.cs
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/src/WebSite/Shared/CommonMarkdown.razor b/src/WebSite/Shared/CommonMarkdown.razor
index 135a46d6..d6d2503a 100644
--- a/src/WebSite/Shared/CommonMarkdown.razor
+++ b/src/WebSite/Shared/CommonMarkdown.razor
@@ -3,23 +3,25 @@
 
 <PageTitle>@Title - @SiteOption.Value.AppTitle</PageTitle>
 
-<div class="container cl-container cl-post">
-    <div>
-        <CmsCard>
-            <HeadTemplate>
-                <WechatPublicLink />
-            </HeadTemplate>
-            <ChildContent>
-                <div class="title">@Title</div>
-                <UPostInfo Title="@Title" Markdown="@Markdown" Content="@HtmlContent" />
-            </ChildContent>
-        </CmsCard>
-        <div style="height:20px;"></div>
-    </div>
-    <div>
-        <UWebSiteCount />
-        <div style="height: 20px;"></div>
-        <UPostRank />
+<div class="container fluent-container mt-4">
+    <div class="row">
+        <div class="col-lg-8">
+            <div class="fluent-card shadow-sm mb-4 fluent-animated fluent-slide-up fluent-duration-normal">
+                <div class="fluent-card-header">
+                    <h2 class="fluent-title">@Title</h2>
+                    <WechatPublicLink />
+                </div>
+                <div class="fluent-card-content">
+                    <UPostInfo Title="@Title" Markdown="@Markdown" Content="@HtmlContent" />
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-4">
+            <div class="fluent-sidebar">
+                <UWebSiteCount class="fluent-widget shadow-sm mb-4 fluent-animated fluent-slide-left fluent-duration-normal fluent-delay-200" />
+                <UPostRank class="fluent-widget shadow-sm fluent-animated fluent-slide-left fluent-duration-normal fluent-delay-300" />
+            </div>
+        </div>
     </div>
 </div>
 
diff --git a/src/WebSite/Shared/FriendLink.razor b/src/WebSite/Shared/FriendLink.razor
index 3c1a405a..3474626a 100644
--- a/src/WebSite/Shared/FriendLink.razor
+++ b/src/WebSite/Shared/FriendLink.razor
@@ -1,19 +1,23 @@
 @inherits BaseComponent
 @inject AppService AppService
 
-<div class="container pt-5 pb-5 links" data-aos="fade-up">
-    <span>友情链接: </span>
+<div class="fluent-container fluent-widget friend-links" data-aos="fade-up">
+    <div class="d-flex flex-wrap align-items-center">
+        <span class="fluent-title-small mr-3">友情链接: </span>
         @if (_links?.Any() != true)
         {
             <AntEmpty/>
         }
         else
         {
-            @foreach (var link in _links)
-            {
-                <span><a href="@link.Link" target="_blank" title="@link.Description">@link.Title</a></span>
-            }
+            <div class="fluent-links-container">
+                @foreach (var link in _links)
+                {
+                    <a href="@link.Link" target="_blank" title="@link.Description" class="fluent-link mr-3 mb-2">@link.Title</a>
+                }
+            </div>
         }
+    </div>
 </div>
 
 @code {
@@ -25,5 +29,4 @@
 
         _links = await AppService.GetAllFriendLinkItemsAsync();
     }
-
 }
\ No newline at end of file
diff --git a/src/WebSite/Shared/HomeLayout.razor b/src/WebSite/Shared/HomeLayout.razor
index e8cc9434..cc48461e 100644
--- a/src/WebSite/Shared/HomeLayout.razor
+++ b/src/WebSite/Shared/HomeLayout.razor
@@ -1,6 +1,9 @@
 @inherits LayoutComponentBase
 
+<link href="css/animations.css" rel="stylesheet" />
 <SiteHeader IsIndex />
-@Body
+<div>
+    @Body
+</div>
 <FriendLink />
 <SiteFooter />
\ No newline at end of file
diff --git a/src/WebSite/Shared/MediaBox.razor b/src/WebSite/Shared/MediaBox.razor
index ab9c20f0..2cdfb575 100644
--- a/src/WebSite/Shared/MediaBox.razor
+++ b/src/WebSite/Shared/MediaBox.razor
@@ -1,10 +1,12 @@
-<div class="media">
-	<div class="iconbox iconmedium rounded-circle @Style mr-4">
-		<i class="@Icon" />
+<div class="fluent-media-box shadow-sm mb-3" data-aos="fade-up" data-aos-delay="@AnimationDelay">
+	<div class="fluent-icon-container @Style">
+		<i class="@Icon" aria-hidden="true"></i>
 	</div>
-	<div class="media-body">
-		<h5><a href="@Link" target="_blank">@Title</a></h5>
-		<p class="text-muted">@ChildContent</p>
+	<div class="fluent-media-content">
+		<h5 class="fluent-media-title">
+			<a href="@Link" target="_blank" class="fluent-link">@Title</a>
+		</h5>
+		<p class="fluent-media-text">@ChildContent</p>
 	</div>
 </div>
 
@@ -13,5 +15,6 @@
 	[Parameter] public string Icon { get; set; }
 	[Parameter] public string Title { get; set; }
     [Parameter] public string Link { get; set; }
+	[Parameter] public int AnimationDelay { get; set; }
 	[Parameter] public RenderFragment ChildContent { get; set; }
 }
\ No newline at end of file
diff --git a/src/WebSite/Shared/SettingBtns.razor b/src/WebSite/Shared/SettingBtns.razor
index d8cfa902..960c59c8 100644
--- a/src/WebSite/Shared/SettingBtns.razor
+++ b/src/WebSite/Shared/SettingBtns.razor
@@ -16,18 +16,17 @@
 
         <a class="btn" title="微信技术交流群" href="https://img1.dotnet9.com/site/favicon/wechatpublic.jpg" target="_blank">
             <div class="far">
-                <svg t="1731662114703" class="icon" viewBox="0 0 1170 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9714" width="24" height="24"><path d="M331.429 263.429q0-23.429-14.286-37.715t-37.714-14.285q-24.572 0-43.429 14.571t-18.857 37.429q0 22.285 18.857 36.857t43.429 14.571q23.428 0 37.714-14t14.286-37.428zM756 553.143q0-16-14.571-28.572T704 512q-15.429 0-28.286 12.857t-12.857 28.286q0 16 12.857 28.857T704 594.857q22.857 0 37.429-12.571T756 553.143zM621.143 263.429q0-23.429-14-37.715t-37.429-14.285q-24.571 0-43.428 14.571t-18.857 37.429q0 22.285 18.857 36.857t43.428 14.571q23.429 0 37.429-14t14-37.428zM984 553.143q0-16-14.857-28.572T932 512q-15.429 0-28.286 12.857t-12.857 28.286q0 16 12.857 28.857T932 594.857q22.286 0 37.143-12.571T984 553.143zM832 326.286Q814.286 324 792 324q-96.571 0-177.714 44T486.57 487.143 440 651.429q0 44.571 13.143 86.857-20 1.714-38.857 1.714-14.857 0-28.572-0.857t-31.428-3.714-25.429-4-31.143-6-28.571-6L124.57 792l41.143-124.571Q0 551.429 0 387.429q0-96.572 55.714-177.715T206.571 82t207.715-46.571q100.571 0 190 37.714T754 177.429t78 148.857z m338.286 320.571q0 66.857-39.143 127.714t-106 110.572l31.428 103.428-113.714-62.285q-85.714 21.143-124.571 21.143-96.572 0-177.715-40.286T512.857 797.714t-46.571-150.857T512.857 496t127.714-109.429 177.715-40.285q92 0 173.143 40.285t130 109.715 48.857 150.571z" fill="#0e932e" p-id="9715"></path></svg>
+                <svg t="1731662114703" class="icon" viewBox="0 0 1170 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9714" width="20" height="20"><path d="M331.429 263.429q0-23.429-14.286-37.715t-37.714-14.285q-24.572 0-43.429 14.571t-18.857 37.429q0 22.285 18.857 36.857t43.429 14.571q23.428 0 37.714-14t14.286-37.428zM756 553.143q0-16-14.571-28.572T704 512q-15.429 0-28.286 12.857t-12.857 28.286q0 16 12.857 28.857T704 594.857q22.857 0 37.429-12.571T756 553.143zM621.143 263.429q0-23.429-14-37.715t-37.429-14.285q-24.571 0-43.428 14.571t-18.857 37.429q0 22.285 18.857 36.857t43.428 14.571q23.429 0 37.429-14t14-37.428zM984 553.143q0-16-14.857-28.572T932 512q-15.429 0-28.286 12.857t-12.857 28.286q0 16 12.857 28.857T932 594.857q22.286 0 37.143-12.571T984 553.143zM832 326.286Q814.286 324 792 324q-96.571 0-177.714 44T486.57 487.143 440 651.429q0 44.571 13.143 86.857-20 1.714-38.857 1.714-14.857 0-28.572-0.857t-31.428-3.714-25.429-4-31.143-6-28.571-6L124.57 792l41.143-124.571Q0 551.429 0 387.429q0-96.572 55.714-177.715T206.571 82t207.715-46.571q100.571 0 190 37.714T754 177.429t78 148.857z m338.286 320.571q0 66.857-39.143 127.714t-106 110.572l31.428 103.428-113.714-62.285q-85.714 21.143-124.571 21.143-96.572 0-177.715-40.286T512.857 797.714t-46.571-150.857T512.857 496t127.714-109.429 177.715-40.285q92 0 173.143 40.285t130 109.715 48.857 150.571z" fill="#0e932e" p-id="9715"></path></svg>
             </div>
         </a>
         <a class="btn" title="QQ技术交流群" href="https://qm.qq.com/q/zlAqfO6L1S" target="_blank">
             <div class="far">
-                <svg t="1731662324778" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11581" width="24" height="24"><path d="M363.512131 774.038018c-10.783601-0.927115-30.573319-7.160073-41.950438-38.482453-14.160511-38.862099-9.367345-92.745311 13.506619-151.697981 9.365298-24.113187 23.835871-48.64593 43.11189-73.121368-2.889817-8.883321-4.347005-17.879206-4.347005-26.901697 0-19.817348 6.878664-48.584532 38.053688-77.154217 8.571213-59.886949 36.713156-114.910123 80.020498-155.99075 15.244192-14.46034 31.970132-26.784016 49.77566-36.84414-40.662095-42.256406-96.686063-68.373227-158.547992-68.373227-116.355031 0-212.011648 92.303242-223.737714 210.67214-23.042809 18.314111-36.482913 39.624463-36.482913 62.473867 0 10.943236 3.297093 21.508873 9.0624 31.611975-15.607466 18.053168-37.003775 45.989427-49.793056 78.918397-20.678972 53.296857-24.515347 100.449783-13.285584 131.270742 10.099009 27.802206 27.809369 25.316595 42.376133-0.376577 3.748371-6.602372 9.408277-15.760962 15.692401-25.734104 10.771321 33.352619 28.785603 63.862493 52.500725 89.730651-14.545274 4.422729-27.139104 9.66308-34.290991 15.694447-26.988678 22.983457-28.179806 49.662073-5.291516 70.092381 29.586852 26.461675 149.416008 39.405475 219.038692 0.50756 7.869225 0.668219 15.759939 1.101077 23.813359 1.11438 4.783956-9.159614 12.189623-18.874883 23.447015-28.461215l0.104377-0.089028c2.115174-1.782599 4.438079-3.496637 6.991228-5.151323-4.341888-6.348592-8.401344-12.860912-12.167111-19.520589C391.947763 767.639285 379.410216 775.399015 363.512131 774.038018z" fill="#272636" p-id="11582"></path><path d="M943.019641 591.757508l0.020466 0c-11.976776-30.891568-32.069393-57.07695-46.710858-74.033134 5.430686-9.477862 8.501628-19.389606 8.501628-29.655414 0-21.434172-12.627598-41.425482-34.223452-58.605769-11.001565-111.020536-100.756775-197.630103-209.870892-197.630103-109.151979 0-198.887746 86.589101-209.888288 197.630103-21.61632 17.180288-34.224476 37.171598-34.224476 58.605769 0 10.265808 3.092431 20.177552 8.501628 29.655414-14.641465 16.935718-34.712593 43.142589-46.710858 74.033134-19.398816 49.996694-22.997784 94.232175-12.462846 123.144668 9.473769 26.081005 26.088168 23.749914 39.753399-0.353041 3.51608-6.193049 8.826016-14.785751 14.721283-24.140817 10.104125 31.287587 27.004027 59.909461 49.250704 84.176145-13.644765 4.149507-25.459858 9.06547-32.168654 14.72333-25.318642 21.561062-26.435069 46.588061-4.964058 65.753563 27.756157 24.823362 140.166343 36.965913 205.479885 0.475837 7.504928 0.63752 15.027252 1.050935 22.712281 1.050935 8.194636 0 16.290011-0.413416 24.281009-1.113357 65.271586 36.572964 177.86392 24.409946 205.641567-0.413416 21.449521-19.165502 20.312628-44.192501-4.982478-65.753563-6.935969-5.864568-19.279089-10.880815-33.530674-15.156188 22.080901-24.182772 38.815027-52.619428 48.861848-83.742263 5.89936 9.356089 11.20418 17.947767 14.721283 24.140817 13.665231 24.081465 30.259164 26.41358 39.753399 0.353041C966.017424 685.989683 962.418456 641.755226 943.019641 591.757508z" fill="#272636" p-id="11583"></path></svg>
+                <svg t="1731662324778" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11581" width="20" height="20"><path d="M363.512131 774.038018c-10.783601-0.927115-30.573319-7.160073-41.950438-38.482453-14.160511-38.862099-9.367345-92.745311 13.506619-151.697981 9.365298-24.113187 23.835871-48.64593 43.11189-73.121368-2.889817-8.883321-4.347005-17.879206-4.347005-26.901697 0-19.817348 6.878664-48.584532 38.053688-77.154217 8.571213-59.886949 36.713156-114.910123 80.020498-155.99075 15.244192-14.46034 31.970132-26.784016 49.77566-36.84414-40.662095-42.256406-96.686063-68.373227-158.547992-68.373227-116.355031 0-212.011648 92.303242-223.737714 210.67214-23.042809 18.314111-36.482913 39.624463-36.482913 62.473867 0 10.943236 3.297093 21.508873 9.0624 31.611975-15.607466 18.053168-37.003775 45.989427-49.793056 78.918397-20.678972 53.296857-24.515347 100.449783-13.285584 131.270742 10.099009 27.802206 27.809369 25.316595 42.376133-0.376577 3.748371-6.602372 9.408277-15.760962 15.692401-25.734104 10.771321 33.352619 28.785603 63.862493 52.500725 89.730651-14.545274 4.422729-27.139104 9.66308-34.290991 15.694447-26.988678 22.983457-28.179806 49.662073-5.291516 70.092381 29.586852 26.461675 149.416008 39.405475 219.038692 0.50756 7.869225 0.668219 15.759939 1.101077 23.813359 1.11438 4.783956-9.159614 12.189623-18.874883 23.447015-28.461215l0.104377-0.089028c2.115174-1.782599 4.438079-3.496637 6.991228-5.151323-4.341888-6.348592-8.401344-12.860912-12.167111-19.520589C391.947763 767.639285 379.410216 775.399015 363.512131 774.038018z" fill="#272636" p-id="11582"></path><path d="M943.019641 591.757508l0.020466 0c-11.976776-30.891568-32.069393-57.07695-46.710858-74.033134 5.430686-9.477862 8.501628-19.389606 8.501628-29.655414 0-21.434172-12.627598-41.425482-34.223452-58.605769-11.001565-111.020536-100.756775-197.630103-209.870892-197.630103-109.151979 0-198.887746 86.589101-209.888288 197.630103-21.61632 17.180288-34.224476 37.171598-34.224476 58.605769 0 10.265808 3.092431 20.177552 8.501628 29.655414-14.641465 16.935718-34.712593 43.142589-46.710858 74.033134-19.398816 49.996694-22.997784 94.232175-12.462846 123.144668 9.473769 26.081005 26.088168 23.749914 39.753399-0.353041 3.51608-6.193049 8.826016-14.785751 14.721283-24.140817 10.104125 31.287587 27.004027 59.909461 49.250704 84.176145-13.644765 4.149507-25.459858 9.06547-32.168654 14.72333-25.318642 21.561062-26.435069 46.588061-4.964058 65.753563 27.756157 24.823362 140.166343 36.965913 205.479885 0.475837 7.504928 0.63752 15.027252 1.050935 22.712281 1.050935 8.194636 0 16.290011-0.413416 24.281009-1.113357 65.271586 36.572964 177.86392 24.409946 205.641567-0.413416 21.449521-19.165502 20.312628-44.192501-4.982478-65.753563-6.935969-5.864568-19.279089-10.880815-33.530674-15.156188 22.080901-24.182772 38.815027-52.619428 48.861848-83.742263 5.89936 9.356089 11.20418 17.947767 14.721283 24.140817 13.665231 24.081465 30.259164 26.41358 39.753399 0.353041C966.017424 685.989683 962.418456 641.755226 943.019641 591.757508z" fill="#272636" p-id="11583"></path></svg>
             </div>
         </a>
         <a class="btn" title="网站源码仓库" href="https://github.com/dotnet9/CodeWF" target="_blank">
             <div class="far">
-                <!--图标库没有github-->
-                <svg height="24" width="24" viewBox="0 0 24 24" version="1.1">
+                <svg height="20" width="20" viewBox="0 0 24 24" version="1.1">
                     <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path>
                 </svg>
             </div>
diff --git a/src/WebSite/Shared/SiteLayout.razor b/src/WebSite/Shared/SiteLayout.razor
index e831cf2f..2f142a96 100644
--- a/src/WebSite/Shared/SiteLayout.razor
+++ b/src/WebSite/Shared/SiteLayout.razor
@@ -1,6 +1,10 @@
 @inherits LayoutComponentBase
 
-<SiteHeader />
-@Body
-<SettingBtns/>
-<SiteFooter />
\ No newline at end of file
+<div class="fluent-layout">
+    <SiteHeader />
+    <main class="fluent-main">
+        @Body
+    </main>
+    <SettingBtns />
+    <SiteFooter />
+</div>
\ No newline at end of file
diff --git a/src/WebSite/_Imports.razor b/src/WebSite/_Imports.razor
index 75bf0681..5c429182 100644
--- a/src/WebSite/_Imports.razor
+++ b/src/WebSite/_Imports.razor
@@ -12,4 +12,4 @@
 @using CodeWF.Pages.Bbs
 @using CodeWF.Options
 @using CodeWF.Shared
-@using CodeWF.Extensions
\ No newline at end of file
+@using CodeWF.Extensions
diff --git a/src/WebSite/wwwroot/css/animations.css b/src/WebSite/wwwroot/css/animations.css
new file mode 100644
index 00000000..f47f9442
--- /dev/null
+++ b/src/WebSite/wwwroot/css/animations.css
@@ -0,0 +1,63 @@
+/* 创建新的动画CSS文件 */
+.fade-in {
+    animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.slide-up {
+    animation: slideUp 0.5s ease-out;
+}
+
+@keyframes slideUp {
+    from { transform: translateY(20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+.pulse {
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+/* 悬停效果 */
+.hover-lift {
+    transition: transform 0.3s ease;
+}
+
+.hover-lift:hover {
+    transform: translateY(-5px);
+}
+
+/* 按钮动画 */
+.btn-animated {
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.btn-animated:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.2);
+    transform: scaleX(0);
+    transform-origin: right;
+    transition: transform 0.3s ease;
+    z-index: -1;
+}
+
+.btn-animated:hover:after {
+    transform: scaleX(1);
+    transform-origin: left;
+} 
\ No newline at end of file
diff --git a/src/WebSite/wwwroot/css/fluent-animations.css b/src/WebSite/wwwroot/css/fluent-animations.css
new file mode 100644
index 00000000..deb42d33
--- /dev/null
+++ b/src/WebSite/wwwroot/css/fluent-animations.css
@@ -0,0 +1,193 @@
+/* 基础动画属性 */
+.fluent-animated {
+  opacity: 0;
+  visibility: hidden;
+  will-change: transform, opacity;
+  transition-property: transform, opacity;
+  transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+}
+
+.fluent-animated.animated {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* 淡入动画 */
+.fluent-fade {
+  transform: translateY(0);
+}
+
+.fluent-fade.animated {
+  animation: fluentFade 0.6s forwards;
+}
+
+/* 从下方滑入 */
+.fluent-slide-up {
+  transform: translateY(30px);
+}
+
+.fluent-slide-up.animated {
+  transform: translateY(0);
+}
+
+/* 从左侧滑入 */
+.fluent-slide-right {
+  transform: translateX(-30px);
+}
+
+.fluent-slide-right.animated {
+  transform: translateX(0);
+}
+
+/* 从右侧滑入 */
+.fluent-slide-left {
+  transform: translateX(30px);
+}
+
+.fluent-slide-left.animated {
+  transform: translateX(0);
+}
+
+/* 缩放动画 */
+.fluent-scale {
+  transform: scale(0.9);
+}
+
+.fluent-scale.animated {
+  transform: scale(1);
+}
+
+/* 旋转动画 */
+.fluent-rotate {
+  transform: rotate(-5deg);
+}
+
+.fluent-rotate.animated {
+  transform: rotate(0);
+}
+
+/* 组合动画 */
+.fluent-slide-up-fade {
+  transform: translateY(30px);
+  opacity: 0;
+}
+
+.fluent-slide-up-fade.animated {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+/* 动画持续时间变体 */
+.fluent-duration-fast {
+  transition-duration: 400ms;
+}
+
+.fluent-duration-normal {
+  transition-duration: 600ms;
+}
+
+.fluent-duration-slow {
+  transition-duration: 800ms;
+}
+
+/* 动画延迟变体 */
+.fluent-delay-0 {
+  transition-delay: 0ms;
+}
+
+.fluent-delay-100 {
+  transition-delay: 100ms;
+}
+
+.fluent-delay-200 {
+  transition-delay: 200ms;
+}
+
+.fluent-delay-300 {
+  transition-delay: 300ms;
+}
+
+.fluent-delay-400 {
+  transition-delay: 400ms;
+}
+
+.fluent-delay-500 {
+  transition-delay: 500ms;
+}
+
+/* 特殊动画效果 */
+@keyframes fluentFade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.fluent-pulse {
+  animation: fluentPulse 2s infinite;
+}
+
+@keyframes fluentPulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.fluent-bounce {
+  animation: fluentBounce 0.6s;
+}
+
+@keyframes fluentBounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-20px);
+  }
+  60% {
+    transform: translateY(-10px);
+  }
+}
+
+/* 悬停效果 */
+.fluent-hover-lift {
+  transition: transform 0.3s ease;
+}
+
+.fluent-hover-lift:hover {
+  transform: translateY(-5px);
+}
+
+.fluent-hover-shadow {
+  transition: box-shadow 0.3s ease;
+}
+
+.fluent-hover-shadow:hover {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+/* 媒体卡片特殊动画 */
+.fluent-media-box {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.fluent-media-box:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+.fluent-media-box .fluent-icon-container {
+  transition: transform 0.3s ease;
+}
+
+.fluent-media-box:hover .fluent-icon-container {
+  transform: scale(1.1) rotate(5deg);
+} 
\ No newline at end of file
diff --git a/src/WebSite/wwwroot/css/fluent-ui.css b/src/WebSite/wwwroot/css/fluent-ui.css
new file mode 100644
index 00000000..1297ae4e
--- /dev/null
+++ b/src/WebSite/wwwroot/css/fluent-ui.css
@@ -0,0 +1,184 @@
+/* FluentUI 风格的基础样式 */
+:root {
+    --fluent-primary: #0078d4;
+    --fluent-primary-dark: #106ebe;
+    --fluent-primary-light: #deecf9;
+    --fluent-neutral-light: #f3f2f1;
+    --fluent-neutral: #edebe9;
+    --fluent-neutral-dark: #a19f9d;
+    --fluent-black: #323130;
+    --fluent-white: #ffffff;
+    --fluent-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --fluent-border-radius: 2px;
+    --fluent-transition: all 0.2s ease-in-out;
+}
+
+/* 容器样式 */
+.fluent-container {
+    padding: 1rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* 卡片样式 */
+.fluent-card {
+    background-color: var(--fluent-white);
+    border-radius: var(--fluent-border-radius);
+    border: 1px solid var(--fluent-neutral);
+    overflow: hidden;
+    transition: var(--fluent-transition);
+}
+
+.fluent-card:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
+}
+
+.fluent-card-header {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--fluent-neutral);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.fluent-card-content {
+    padding: 1.5rem;
+}
+
+.fluent-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--fluent-black);
+    margin: 0;
+}
+
+/* 侧边栏样式 */
+.fluent-sidebar {
+    position: sticky;
+    top: 1rem;
+}
+
+.fluent-widget {
+    background-color: var(--fluent-white);
+    border-radius: var(--fluent-border-radius);
+    border: 1px solid var(--fluent-neutral);
+    padding: 1.25rem;
+    transition: var(--fluent-transition);
+}
+
+.fluent-widget:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
+}
+
+/* MediaBox 样式 */
+.fluent-media-box {
+    display: flex;
+    background-color: var(--fluent-white);
+    border-radius: var(--fluent-border-radius);
+    border: 1px solid var(--fluent-neutral);
+    padding: 1.25rem;
+    transition: var(--fluent-transition);
+}
+
+.fluent-media-box:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
+    transform: translateY(-2px);
+}
+
+.fluent-icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    margin-right: 1rem;
+    background-color: var(--fluent-primary-light);
+    color: var(--fluent-primary);
+}
+
+.fluent-icon-container.text-salmon {
+    background-color: #ffebe6;
+    color: #d13438;
+}
+
+.fluent-media-content {
+    flex: 1;
+}
+
+.fluent-media-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.fluent-media-text {
+    color: #605e5c;
+    margin-bottom: 0;
+    font-size: 0.9rem;
+}
+
+.fluent-link {
+    color: var(--fluent-primary);
+    text-decoration: none;
+    transition: var(--fluent-transition);
+}
+
+.fluent-link:hover {
+    color: var(--fluent-primary-dark);
+    text-decoration: underline;
+}
+
+/* 动画效果 */
+.fluent-fade-in {
+    animation: fluentFadeIn 0.3s ease-in-out;
+}
+
+@keyframes fluentFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* 友情链接样式 */
+.friend-links {
+    background-color: var(--fluent-white);
+    border-radius: var(--fluent-border-radius);
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.fluent-title-small {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--fluent-black);
+}
+
+.fluent-links-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.fluent-links-container .fluent-link {
+    padding: 0.25rem 0.75rem;
+    border-radius: var(--fluent-border-radius);
+    background-color: var(--fluent-neutral-light);
+    color: var(--fluent-black);
+    margin-right: 0.75rem;
+    margin-bottom: 0.5rem;
+    transition: var(--fluent-transition);
+    font-size: 0.9rem;
+}
+
+.fluent-links-container .fluent-link:hover {
+    background-color: var(--fluent-primary-light);
+    color: var(--fluent-primary);
+    text-decoration: none;
+    transform: translateY(-2px);
+    box-shadow: var(--fluent-shadow);
+} 
\ No newline at end of file
diff --git a/src/WebSite/wwwroot/css/responsive-helpers.css b/src/WebSite/wwwroot/css/responsive-helpers.css
new file mode 100644
index 00000000..afee3e63
--- /dev/null
+++ b/src/WebSite/wwwroot/css/responsive-helpers.css
@@ -0,0 +1,37 @@
+/* 创建新的响应式辅助类CSS文件 */
+.gap-1 { gap: 0.25rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 1rem; }
+.gap-4 { gap: 1.5rem; }
+.gap-5 { gap: 3rem; }
+
+/* 响应式间距 */
+@media (max-width: 576px) {
+    .mb-sm-0 { margin-bottom: 0 !important; }
+    .mb-sm-1 { margin-bottom: 0.25rem !important; }
+    .mb-sm-2 { margin-bottom: 0.5rem !important; }
+    .mb-sm-3 { margin-bottom: 1rem !important; }
+    .mb-sm-4 { margin-bottom: 1.5rem !important; }
+    .mb-sm-5 { margin-bottom: 3rem !important; }
+    
+    .mt-sm-0 { margin-top: 0 !important; }
+    .mt-sm-1 { margin-top: 0.25rem !important; }
+    .mt-sm-2 { margin-top: 0.5rem !important; }
+    .mt-sm-3 { margin-top: 1rem !important; }
+    .mt-sm-4 { margin-top: 1.5rem !important; }
+    .mt-sm-5 { margin-top: 3rem !important; }
+}
+
+/* 响应式文本对齐 */
+@media (max-width: 576px) {
+    .text-sm-center { text-align: center !important; }
+    .text-sm-left { text-align: left !important; }
+    .text-sm-right { text-align: right !important; }
+}
+
+/* 响应式显示/隐藏 */
+@media (max-width: 576px) {
+    .d-sm-none { display: none !important; }
+    .d-sm-block { display: block !important; }
+    .d-sm-flex { display: flex !important; }
+} 
\ No newline at end of file
diff --git a/src/WebSite/wwwroot/css/site.css b/src/WebSite/wwwroot/css/site.css
new file mode 100644
index 00000000..26a2ee81
--- /dev/null
+++ b/src/WebSite/wwwroot/css/site.css
@@ -0,0 +1,61 @@
+/* 添加到您现有的CSS文件中 */
+.responsive-container {
+    padding: 2rem 1rem;
+}
+
+@media (min-width: 768px) {
+    .responsive-container {
+        padding: 3rem 2rem;
+    }
+}
+
+/* 改进卡片样式 */
+.card-enhanced {
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card-enhanced:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* 改进导航栏样式 */
+.topnav.navbar {
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+/* 改进Logo样式 */
+.logo-container {
+    display: flex;
+    align-items: center;
+    transition: transform 0.2s ease;
+}
+
+.logo-container:hover {
+    transform: scale(1.05);
+}
+
+.logo-image {
+    margin-right: 0.5rem;
+}
+
+/* 改进友情链接样式 */
+.links {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+}
+
+.links a {
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+}
+
+.links a:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+    text-decoration: none;
+} 
\ No newline at end of file
diff --git a/src/WebSite/wwwroot/js/fluent-animations.js b/src/WebSite/wwwroot/js/fluent-animations.js
new file mode 100644
index 00000000..85849a59
--- /dev/null
+++ b/src/WebSite/wwwroot/js/fluent-animations.js
@@ -0,0 +1,213 @@
+/**
+ * FluentAnimations - 为页面元素添加顺序动画效果
+ * 使用方法：
+ * 1. 在元素上添加 fluent-animated 类和动画类型（如 fluent-slide-up）
+ * 2. 可选：添加延迟类（如 fluent-delay-100）和持续时间类（如 fluent-duration-fast）
+ * 3. 页面加载时会自动初始化动画
+ */
+class FluentAnimations {
+  constructor(options = {}) {
+    this.options = {
+      rootMargin: '0px',
+      threshold: 0.1,
+      animateOnce: true,
+      animateWhenVisible: true,
+      defaultDelay: 100,
+      defaultDuration: 'normal',
+      ...options
+    };
+    
+    this.animatedElements = [];
+    this.observer = null;
+    this.initialized = false;
+  }
+
+  /**
+   * 初始化动画系统
+   */
+  init() {
+    if (this.initialized) return;
+    
+    // 创建交叉观察器，用于检测元素是否进入视口
+    if ('IntersectionObserver' in window) {
+      this.observer = new IntersectionObserver(this._onIntersection.bind(this), {
+        rootMargin: this.options.rootMargin,
+        threshold: this.options.threshold
+      });
+      
+      // 查找所有带有动画类的元素
+      const elements = document.querySelectorAll('.fluent-animated');
+      elements.forEach(element => {
+        this.animatedElements.push(element);
+        this.observer.observe(element);
+      });
+    } else {
+      // 如果浏览器不支持 IntersectionObserver，则直接显示所有元素
+      document.querySelectorAll('.fluent-animated').forEach(element => {
+        element.classList.add('animated');
+      });
+    }
+    
+    // 如果不需要等待元素可见，则立即开始顺序动画
+    if (!this.options.animateWhenVisible) {
+      this._animateSequentially();
+    }
+    
+    this.initialized = true;
+  }
+
+  /**
+   * 处理元素进入视口的事件
+   * @param {IntersectionObserverEntry[]} entries 
+   */
+  _onIntersection(entries) {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        // 如果元素进入视口，添加动画类
+        if (this.options.animateWhenVisible) {
+          this._animateElement(entry.target);
+        }
+        
+        // 如果只需要动画一次，则停止观察该元素
+        if (this.options.animateOnce) {
+          this.observer.unobserve(entry.target);
+        }
+      } else if (!this.options.animateOnce && !this.options.animateWhenVisible) {
+        // 如果元素离开视口且不是只动画一次，则移除动画类
+        entry.target.classList.remove('animated');
+      }
+    });
+  }
+
+  /**
+   * 为指定元素添加动画类
+   * @param {HTMLElement} element 
+   */
+  _animateElement(element) {
+    element.classList.add('animated');
+  }
+
+  /**
+   * 顺序动画所有元素
+   */
+  _animateSequentially() {
+    let delay = 0;
+    
+    this.animatedElements.forEach(element => {
+      // 检查元素是否已有延迟类
+      const hasDelayClass = Array.from(element.classList).some(cls => cls.startsWith('fluent-delay-'));
+      
+      if (!hasDelayClass) {
+        // 如果没有延迟类，则添加计算的延迟
+        element.style.transitionDelay = `${delay}ms`;
+        delay += this.options.defaultDelay;
+      }
+      
+      // 检查元素是否已有持续时间类
+      const hasDurationClass = Array.from(element.classList).some(cls => cls.startsWith('fluent-duration-'));
+      
+      if (!hasDurationClass) {
+        // 如果没有持续时间类，则添加默认持续时间
+        element.classList.add(`fluent-duration-${this.options.defaultDuration}`);
+      }
+      
+      // 添加动画类
+      setTimeout(() => {
+        this._animateElement(element);
+      }, 10);
+    });
+  }
+
+  /**
+   * 重置所有动画
+   */
+  reset() {
+    this.animatedElements.forEach(element => {
+      element.classList.remove('animated');
+      
+      if (this.observer) {
+        this.observer.observe(element);
+      }
+    });
+  }
+
+  /**
+   * 为指定选择器的元素添加动画
+   * @param {string} selector CSS选择器
+   * @param {string} animationType 动画类型
+   * @param {Object} options 选项
+   */
+  animate(selector, animationType, options = {}) {
+    const elements = document.querySelectorAll(selector);
+    const delay = options.delay || 0;
+    const duration = options.duration || this.options.defaultDuration;
+    const stagger = options.stagger || 100;
+    
+    elements.forEach((element, index) => {
+      // 添加动画类
+      element.classList.add('fluent-animated', animationType);
+      
+      // 设置延迟和持续时间
+      element.style.transitionDelay = `${delay + (index * stagger)}ms`;
+      element.classList.add(`fluent-duration-${duration}`);
+      
+      // 如果需要立即动画，则添加动画类
+      if (options.immediate) {
+        setTimeout(() => {
+          this._animateElement(element);
+        }, 10);
+      } else if (this.observer) {
+        // 否则添加到观察器
+        this.animatedElements.push(element);
+        this.observer.observe(element);
+      }
+    });
+  }
+}
+
+// 页面加载完成后初始化动画
+document.addEventListener('DOMContentLoaded', () => {
+  // 创建全局动画实例
+  window.fluentAnimations = new FluentAnimations({
+    animateWhenVisible: true,
+    defaultDelay: 100,
+    defaultDuration: 'normal'
+  });
+  
+  // 初始化动画
+  window.fluentAnimations.init();
+  
+  // 为特定元素添加自定义动画
+  const mediaBoxes = document.querySelectorAll('.fluent-media-box');
+  Array.from(mediaBoxes).forEach((box, index) => {
+    box.classList.add('fluent-animated', 'fluent-slide-up-fade');
+    box.style.transitionDelay = `${index * 100}ms`;
+  });
+  
+  // 为首页标题添加特殊动画
+  const heroTitle = document.querySelector('.jumbotron h2');
+  if (heroTitle) {
+    heroTitle.classList.add('fluent-animated', 'fluent-slide-right', 'fluent-duration-slow');
+  }
+  
+  // 为首页副标题添加特殊动画
+  const heroSubtitles = document.querySelectorAll('.jumbotron h5');
+  heroSubtitles.forEach((subtitle, index) => {
+    subtitle.classList.add('fluent-animated', 'fluent-slide-right', 'fluent-duration-normal');
+    subtitle.style.transitionDelay = `${200 + (index * 150)}ms`;
+  });
+  
+  // 为首页按钮添加特殊动画
+  const heroButtons = document.querySelectorAll('.jumbotron .btn');
+  heroButtons.forEach((button, index) => {
+    button.classList.add('fluent-animated', 'fluent-slide-up', 'fluent-duration-normal');
+    button.style.transitionDelay = `${500 + (index * 100)}ms`;
+  });
+  
+  // 为首页图片添加特殊动画
+  const heroImage = document.querySelector('.jumbotron img');
+  if (heroImage) {
+    heroImage.classList.add('fluent-animated', 'fluent-slide-left', 'fluent-duration-slow');
+    heroImage.style.transitionDelay = '300ms';
+  }
+}); 
\ No newline at end of file
diff --git a/src/WebSite/wwwroot/robots.txt b/src/WebSite/wwwroot/robots.txt
new file mode 100644
index 00000000..0519ecba
--- /dev/null
+++ b/src/WebSite/wwwroot/robots.txt
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/src/WebSite/wwwroot/sitemap.xml b/src/WebSite/wwwroot/sitemap.xml
new file mode 100644
index 00000000..0519ecba
--- /dev/null
+++ b/src/WebSite/wwwroot/sitemap.xml
@@ -0,0 +1 @@
+ 
\ No newline at end of file