From 241696b152dc7850b9f4c76dc1e940b471ba1cec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=86=E5=85=89LG?= <lg@tydi.fun>
Date: Fri, 5 Sep 2025 02:32:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0windows=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=BE=E7=BD=AE=E5=87=BA=E9=A2=98=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AboutDetail.vue                | 389 +++++++++++
 .../components/AccountsDetail.vue             | 101 +++
 .../components/AdvancedDisplayDetail.vue      | 267 ++++++++
 .../components/AdvancedScalingDetail.vue      | 314 +++++++++
 .../components/AppsDetail.vue                 |  95 +++
 .../components/ClipboardDetail.vue            | 295 +++++++++
 .../components/CortanaDetail.vue              |  97 +++
 .../components/DevicesDetail.vue              | 226 +++++++
 .../components/DisplayDetail.vue              | 434 +++++++++++++
 .../components/EaseOfAccessDetail.vue         |  56 ++
 .../components/FocusAssistDetail.vue          | 516 +++++++++++++++
 .../components/GamingDetail.vue               |  53 ++
 .../components/GraphicsSettingsDetail.vue     | 204 ++++++
 .../components/HDColorDetail.vue              | 376 +++++++++++
 .../components/ManageSoundDevices.vue         | 344 ++++++++++
 .../components/MicrophoneDeviceProperties.vue | 388 +++++++++++
 .../components/MultitaskingDetail.vue         | 410 ++++++++++++
 .../components/NetworkDetail.vue              | 205 ++++++
 .../components/NightModeDetail.vue            | 428 +++++++++++++
 .../components/NotificationDetail.vue         | 551 ++++++++++++++++
 .../components/PersonalizationDetail.vue      |  33 +
 .../components/PhoneDetail.vue                |  81 +++
 .../components/PowerSleepDetail.vue           | 236 +++++++
 .../components/PrivacyDetail.vue              |  94 +++
 .../components/ProjectionDetail.vue           | 325 ++++++++++
 .../components/RemoteDesktopDetail.vue        | 189 ++++++
 .../components/SearchDetail.vue               |  63 ++
 .../components/SharedExperienceDetail.vue     | 318 +++++++++
 .../components/SoundDetail.vue                | 539 ++++++++++++++++
 .../components/SpeakerDeviceProperties.vue    | 313 +++++++++
 .../components/StorageDetail.vue              | 422 ++++++++++++
 .../components/StorageSenseConfig.vue         | 443 +++++++++++++
 .../components/SystemDetail.vue               | 368 +++++++++++
 .../components/TabletModeDetail.vue           | 256 ++++++++
 .../components/TimeLanguageDetail.vue         |  95 +++
 .../components/UpdateSecurityDetail.vue       | 103 +++
 .../components/devices/AutoplayDetail.vue     | 218 +++++++
 .../components/devices/BluetoothDetail.vue    | 323 ++++++++++
 .../components/devices/MouseDetail.vue        | 261 ++++++++
 .../components/devices/PenDetail.vue          | 153 +++++
 .../components/devices/PrintersDetail.vue     | 281 ++++++++
 .../components/devices/TypingDetail.vue       | 227 +++++++
 .../components/devices/UsbDetail.vue          | 110 ++++
 .../components/network/DataUsageDetail.vue    | 323 ++++++++++
 .../components/network/DialupDetail.vue       | 106 +++
 .../components/network/EthernetDetail.vue     |  81 +++
 .../components/network/ProxyDetail.vue        | 436 +++++++++++++
 .../components/network/StatusDetail.vue       | 318 +++++++++
 .../components/network/VpnDetail.vue          | 211 ++++++
 .../personalization/BackgroundDetail.vue      | 473 ++++++++++++++
 .../personalization/ColorsDetail.vue          | 504 +++++++++++++++
 .../personalization/FontsDetail.vue           | 428 +++++++++++++
 .../personalization/LockScreenDetail.vue      | 416 ++++++++++++
 .../personalization/StartDetail.vue           | 315 +++++++++
 .../personalization/TaskbarDetail.vue         | 387 +++++++++++
 .../personalization/ThemesDetail.vue          | 312 +++++++++
 .../time-language/DateTimeDetail.vue          | 328 ++++++++++
 .../time-language/LanguageDetail.vue          | 303 +++++++++
 .../components/time-language/RegionDetail.vue | 222 +++++++
 .../components/time-language/SpeechDetail.vue | 371 +++++++++++
 .../update-security/ActivationDetail.vue      | 321 ++++++++++
 .../update-security/BackupDetail.vue          | 323 ++++++++++
 .../DeliveryOptimizationDetail.vue            | 245 +++++++
 .../update-security/DeveloperDetail.vue       | 494 ++++++++++++++
 .../update-security/FindMyDeviceDetail.vue    | 410 ++++++++++++
 .../update-security/RecoveryDetail.vue        | 240 +++++++
 .../update-security/TroubleshootDetail.vue    | 403 ++++++++++++
 .../update-security/WindowsInsiderDetail.vue  | 556 ++++++++++++++++
 .../update-security/WindowsSecurityDetail.vue | 254 ++++++++
 .../update-security/WindowsUpdateDetail.vue   | 232 +++++++
 .../WindowsSystemSetting/detail.scss          | 116 ++++
 .../WindowsSystemSetting/index.scss           | 427 ++++++++++++
 src/components/WindowsSystemSetting/index.ts  | 605 ++++++++++++++++++
 src/components/WindowsSystemSetting/index.vue | 313 +++++++++
 .../question/WindowsSystemSettingForm.vue     | 576 +++++++++++++++++
 src/views/paper/question/index.vue            |   9 +-
 76 files changed, 22256 insertions(+), 2 deletions(-)
 create mode 100644 src/components/WindowsSystemSetting/components/AboutDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/AccountsDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/AdvancedDisplayDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/AdvancedScalingDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/AppsDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/ClipboardDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/CortanaDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/DevicesDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/DisplayDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/EaseOfAccessDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/FocusAssistDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/GamingDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/GraphicsSettingsDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/HDColorDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/ManageSoundDevices.vue
 create mode 100644 src/components/WindowsSystemSetting/components/MicrophoneDeviceProperties.vue
 create mode 100644 src/components/WindowsSystemSetting/components/MultitaskingDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/NetworkDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/NightModeDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/NotificationDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/PersonalizationDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/PhoneDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/PowerSleepDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/PrivacyDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/ProjectionDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/RemoteDesktopDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/SearchDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/SharedExperienceDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/SoundDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/SpeakerDeviceProperties.vue
 create mode 100644 src/components/WindowsSystemSetting/components/StorageDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/StorageSenseConfig.vue
 create mode 100644 src/components/WindowsSystemSetting/components/SystemDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/TabletModeDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/TimeLanguageDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/UpdateSecurityDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/devices/AutoplayDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/devices/BluetoothDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/devices/MouseDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/devices/PenDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/devices/PrintersDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/devices/TypingDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/devices/UsbDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/network/DataUsageDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/network/DialupDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/network/EthernetDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/network/ProxyDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/network/StatusDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/network/VpnDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/personalization/BackgroundDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/personalization/ColorsDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/personalization/FontsDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/personalization/LockScreenDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/personalization/StartDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/personalization/TaskbarDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/personalization/ThemesDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/time-language/DateTimeDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/time-language/LanguageDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/time-language/RegionDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/time-language/SpeechDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/update-security/ActivationDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/update-security/BackupDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/update-security/DeliveryOptimizationDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/update-security/DeveloperDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/update-security/FindMyDeviceDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/update-security/RecoveryDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/update-security/TroubleshootDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/update-security/WindowsInsiderDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/update-security/WindowsSecurityDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/components/update-security/WindowsUpdateDetail.vue
 create mode 100644 src/components/WindowsSystemSetting/detail.scss
 create mode 100644 src/components/WindowsSystemSetting/index.scss
 create mode 100644 src/components/WindowsSystemSetting/index.ts
 create mode 100644 src/components/WindowsSystemSetting/index.vue
 create mode 100644 src/views/paper/question/WindowsSystemSettingForm.vue

diff --git a/src/components/WindowsSystemSetting/components/AboutDetail.vue b/src/components/WindowsSystemSetting/components/AboutDetail.vue
new file mode 100644
index 0000000..728d427
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/AboutDetail.vue
@@ -0,0 +1,389 @@
+<template>
+  <div class="about-detail">
+    <!-- 系统保护状态 -->
+    <div class="section-group">
+      <div class="system-protection">
+        <div class="protection-title">系统正在监控和保护你的电脑。</div>
+
+        <div class="protection-items">
+          <!-- 病毒和威胁防护 -->
+          <div class="protection-item">
+            <div class="status-icon error">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                <path
+                  d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zM7 4a1 1 0 0 1 2 0v3a1 1 0 0 1-2 0V4zM8 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
+                />
+              </svg>
+            </div>
+            <span class="protection-text">病毒和威胁防护</span>
+          </div>
+
+          <!-- 防火墙和网络保护 -->
+          <div class="protection-item">
+            <div class="status-icon error">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                <path
+                  d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zM7 4a1 1 0 0 1 2 0v3a1 1 0 0 1-2 0V4zM8 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
+                />
+              </svg>
+            </div>
+            <span class="protection-text">防火墙和网络保护</span>
+          </div>
+
+          <!-- 应用和浏览器控制 -->
+          <div class="protection-item">
+            <div class="status-icon success">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                <path
+                  d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"
+                />
+              </svg>
+            </div>
+            <span class="protection-text">应用和浏览器控制</span>
+          </div>
+
+          <!-- 账户保护 -->
+          <div class="protection-item">
+            <div class="status-icon warning">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                <path
+                  d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
+                />
+              </svg>
+            </div>
+            <span class="protection-text">账户保护</span>
+          </div>
+
+          <!-- 设备安全性 -->
+          <div class="protection-item">
+            <div class="status-icon success">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                <path
+                  d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"
+                />
+              </svg>
+            </div>
+            <span class="protection-text">设备安全性</span>
+          </div>
+        </div>
+
+        <div class="security-center-link">
+          <a href="#" @click="openSecurityCenter" class="link-text"
+            >在 Windows 安全中心中查看详细信息</a
+          >
+        </div>
+      </div>
+    </div>
+
+    <!-- 设备规格 -->
+    <div class="section-group">
+      <div class="device-specs">
+        <h3 class="section-title">设备规格</h3>
+
+        <div class="specs-list">
+          <div class="spec-item">
+            <span class="spec-label">设备名称</span>
+            <span class="spec-value">123</span>
+          </div>
+
+          <div class="spec-item">
+            <span class="spec-label">处理器</span>
+            <span class="spec-value">Intel(R) Core(TM) i5-2300 CPU @ 2.80GHz 2.81 GHz</span>
+          </div>
+
+          <div class="spec-item">
+            <span class="spec-label">已安装的 RAM</span>
+            <span class="spec-value">4.00 GB</span>
+          </div>
+
+          <div class="spec-item">
+            <span class="spec-label">设备 ID</span>
+            <span class="spec-value">11E47949-37C4-45B5-9176-2F7CD64E2156</span>
+          </div>
+
+          <div class="spec-item">
+            <span class="spec-label">产品 ID</span>
+            <span class="spec-value">00328-10000-00001-AA184</span>
+          </div>
+
+          <div class="spec-item">
+            <span class="spec-label">系统类型</span>
+            <span class="spec-value">64 位操作系统，基于 x64 的处理器</span>
+          </div>
+
+          <div class="spec-item">
+            <span class="spec-label">笔和触控</span>
+            <span class="spec-value">没有可用于此显示器的笔或触控输入</span>
+          </div>
+        </div>
+
+        <div class="rename-action">
+          <button class="rename-btn" @click="renameComputer">重命名这台电脑</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Windows 规格 -->
+    <div class="section-group">
+      <div class="windows-specs">
+        <h3 class="section-title">Windows 规格</h3>
+
+        <div class="specs-list">
+          <div class="spec-item">
+            <span class="spec-label">版本</span>
+            <span class="spec-value">Windows 10 教育版</span>
+          </div>
+
+          <div class="spec-item">
+            <span class="spec-label">版本号</span>
+            <span class="spec-value">1909</span>
+          </div>
+
+          <div class="spec-item">
+            <span class="spec-label">安装日期</span>
+            <span class="spec-value">2020/8/26</span>
+          </div>
+
+          <div class="spec-item">
+            <span class="spec-label">操作系统版本</span>
+            <span class="spec-value">18363.592</span>
+          </div>
+        </div>
+
+        <div class="windows-links">
+          <div class="link-item">
+            <a href="#" @click="updateWindows" class="link-text">更改产品密钥或升级 Windows</a>
+          </div>
+
+          <div class="link-item">
+            <a href="#" @click="openServiceAgreement" class="link-text"
+              >阅读适用于我们服务的 Microsoft 服务协议</a
+            >
+          </div>
+
+          <div class="link-item">
+            <a href="#" @click="openSoftwareLicense" class="link-text"
+              >阅读 Microsoft 软件许可条款</a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 事件处理函数
+const openSecurityCenter = (e: Event) => {
+  e.preventDefault()
+  console.log('打开 Windows 安全中心')
+}
+
+const renameComputer = () => {
+  console.log('重命名这台电脑')
+}
+
+const updateWindows = (e: Event) => {
+  e.preventDefault()
+  console.log('更改产品密钥或升级 Windows')
+}
+
+const openServiceAgreement = (e: Event) => {
+  e.preventDefault()
+  console.log('打开 Microsoft 服务协议')
+}
+
+const openSoftwareLicense = (e: Event) => {
+  e.preventDefault()
+  console.log('打开 Microsoft 软件许可条款')
+}
+</script>
+
+<style scoped>
+.about-detail {
+  background: #ffffff;
+}
+
+.page-header {
+  padding: 20px 24px 16px 24px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 300;
+  color: #323130;
+}
+
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+  padding: 20px 24px;
+}
+
+.section-group:last-child {
+  border-bottom: none;
+}
+
+.section-title {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  font-weight: 400;
+  color: #323130;
+}
+
+/* 系统保护状态 */
+.system-protection {
+  margin-bottom: 20px;
+}
+
+.protection-title {
+  font-size: 16px;
+  color: #323130;
+  margin-bottom: 16px;
+  font-weight: 400;
+}
+
+.protection-items {
+  margin-bottom: 16px;
+}
+
+.protection-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  gap: 8px;
+}
+
+.protection-item:last-child {
+  margin-bottom: 0;
+}
+
+.status-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.status-icon.success {
+  background-color: #107c10;
+  color: white;
+}
+
+.status-icon.error {
+  background-color: #d13438;
+  color: white;
+}
+
+.status-icon.warning {
+  background-color: #ff8c00;
+  color: white;
+}
+
+.protection-text {
+  font-size: 14px;
+  color: #323130;
+}
+
+.security-center-link {
+  margin-top: 16px;
+}
+
+/* 设备规格 */
+.device-specs,
+.windows-specs {
+  margin-bottom: 20px;
+}
+
+.specs-list {
+  margin-bottom: 20px;
+}
+
+.spec-item {
+  display: flex;
+  margin-bottom: 12px;
+  align-items: flex-start;
+}
+
+.spec-item:last-child {
+  margin-bottom: 0;
+}
+
+.spec-label {
+  font-size: 14px;
+  color: #605e5c;
+  min-width: 140px;
+  flex-shrink: 0;
+}
+
+.spec-value {
+  font-size: 14px;
+  color: #323130;
+  flex: 1;
+  word-break: break-all;
+}
+
+.rename-action {
+  margin-top: 16px;
+}
+
+.rename-btn {
+  padding: 8px 20px;
+  background-color: #f3f2f1;
+  color: #323130;
+  border: 1px solid #d1d1d1;
+  border-radius: 2px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.rename-btn:hover {
+  background-color: #e1dfdd;
+}
+
+.rename-btn:focus {
+  outline: 2px solid #0078d4;
+  border-color: #0078d4;
+}
+
+/* Windows 链接 */
+.windows-links {
+  margin-top: 16px;
+}
+
+.link-item {
+  margin-bottom: 8px;
+}
+
+.link-item:last-child {
+  margin-bottom: 0;
+}
+
+.link-text {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+  display: block;
+}
+
+.link-text:hover {
+  text-decoration: underline;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .spec-item {
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .spec-label {
+    min-width: auto;
+  }
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/AccountsDetail.vue b/src/components/WindowsSystemSetting/components/AccountsDetail.vue
new file mode 100644
index 0000000..ccb9c32
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/AccountsDetail.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="accounts-detail">
+    <div class="section-group">
+      <h3 class="section-title">你的信息</h3>
+      <div class="setting-item">
+        <div class="setting-info">
+          <div class="setting-name">管理你的Microsoft帐户</div>
+          <div class="setting-desc">帐户设置、订阅、安全</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+
+    <div class="section-group">
+      <h3 class="section-title">电子邮件和帐户</h3>
+      <div class="setting-item">
+        <div class="setting-info">
+          <div class="setting-name">添加或删除帐户，更改同步设置</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+
+    <div class="section-group">
+      <h3 class="section-title">登录选项</h3>
+      <div class="setting-item">
+        <div class="setting-info">
+          <div class="setting-name">面部识别、指纹、PIN</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+
+    <div class="section-group">
+      <h3 class="section-title">访问工作或学校帐户</h3>
+      <div class="setting-item">
+        <div class="setting-info">
+          <div class="setting-name">连接到工作或学校</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+
+    <div class="section-group">
+      <h3 class="section-title">同步你的设置</h3>
+      <div class="setting-item">
+        <div class="setting-info">
+          <div class="setting-name">在设备间同步Windows设置</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  activeNav?: string
+}>()
+</script>
+<style scoped>
+.accounts-detail {
+  background: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+}
+.section-title {
+  margin: 0;
+  padding: 16px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #0078d4;
+  background: #f8f9fa;
+}
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.setting-item:hover {
+  background-color: #f8f9fa;
+}
+.setting-info {
+  flex: 1;
+}
+.setting-name {
+  font-size: 14px;
+  font-weight: 400;
+  color: #333;
+}
+.setting-arrow {
+  font-size: 14px;
+  color: #666;
+  margin-left: 12px;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/AdvancedDisplayDetail.vue b/src/components/WindowsSystemSetting/components/AdvancedDisplayDetail.vue
new file mode 100644
index 0000000..73dcdf0
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/AdvancedDisplayDetail.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="advanced-display-detail">
+    <!-- 返回按钮 -->
+    <div class="back-section">
+      <button class="back-button" @click="$emit('back')">
+        <span class="back-icon">←</span>
+        <span>设置</span>
+      </button>
+    </div>
+
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">
+        <span class="home-icon">🏠</span>
+        高级显示设置
+      </h1>
+    </div>
+
+    <!-- 选择显示器部分 -->
+    <div class="display-selection-section">
+      <h3 class="section-title">选择显示器</h3>
+      <p class="section-desc">选择一个显示器以查看或更改设置。</p>
+
+      <div class="display-dropdown">
+        <select v-model="selectedDisplay" class="display-select">
+          <option value="display1">显示 1:</option>
+          <option value="display2">显示 2:</option>
+          <option value="display3">显示 3:</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- 显示信息部分 -->
+    <div class="display-info-section">
+      <h3 class="section-title">显示信息</h3>
+
+      <!-- 显示器图标和名称 -->
+      <div class="display-header">
+        <div class="display-icon">
+          <svg width="48" height="32" viewBox="0 0 48 32" fill="none">
+            <rect
+              x="2"
+              y="6"
+              width="44"
+              height="24"
+              stroke="#323130"
+              stroke-width="2"
+              fill="#f8f9fa"
+              rx="2"
+            />
+            <rect x="20" y="30" width="8" height="2" fill="#323130" />
+            <rect x="16" y="32" width="16" height="2" fill="#323130" />
+          </svg>
+        </div>
+        <div class="display-name">显示器 1: 已连接到 Intel(R) HD Graphics 4600</div>
+      </div>
+
+      <!-- 显示参数列表 -->
+      <div class="display-specs">
+        <div class="spec-row">
+          <span class="spec-label">桌面分辨率</span>
+          <span class="spec-value">1665 × 928</span>
+        </div>
+
+        <div class="spec-row">
+          <span class="spec-label">有源信号分辨率</span>
+          <span class="spec-value">1665 × 928</span>
+        </div>
+
+        <div class="spec-row">
+          <span class="spec-label">刷新频率(Hz)</span>
+          <span class="spec-value">60 Hz</span>
+        </div>
+
+        <div class="spec-row">
+          <span class="spec-label">位深度</span>
+          <span class="spec-value">8 位</span>
+        </div>
+
+        <div class="spec-row">
+          <span class="spec-label">颜色格式</span>
+          <span class="spec-value">RGB</span>
+        </div>
+
+        <div class="spec-row">
+          <span class="spec-label">颜色空间</span>
+          <span class="spec-value">标准动态范围(SDR)</span>
+        </div>
+      </div>
+
+      <!-- 显示适配器属性链接 -->
+      <div class="adapter-link">
+        <a href="#" class="link-text" @click.prevent="openAdapterProperties">
+          显示器 1 的显示适配器属性
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 事件定义
+defineEmits(['back'])
+
+// 响应式数据
+const selectedDisplay = ref('display1')
+
+// 方法
+const openAdapterProperties = () => {
+  console.log('打开显示适配器属性')
+  // 这里可以添加打开适配器属性的逻辑
+}
+</script>
+
+<style scoped>
+.advanced-display-detail {
+  padding: 0;
+  max-width: 800px;
+  color: #323130;
+}
+
+.back-section {
+  margin-bottom: 20px;
+}
+
+.back-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  padding: 8px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.back-button:hover {
+  background: #f3f2f1;
+}
+
+.back-icon {
+  font-size: 16px;
+  color: #323130;
+}
+
+.page-header {
+  margin-bottom: 32px;
+}
+
+.page-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 32px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.home-icon {
+  font-size: 24px;
+}
+
+.display-selection-section,
+.display-info-section {
+  margin-bottom: 40px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 12px 0;
+}
+
+.section-desc {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+  margin: 0 0 16px 0;
+}
+
+.display-dropdown {
+  margin-top: 16px;
+}
+
+.display-select {
+  width: 100%;
+  max-width: 370px;
+  padding: 8px 12px;
+  border: 1px solid #d2d0ce;
+  border-radius: 4px;
+  background: white;
+  font-size: 14px;
+  color: #323130;
+}
+
+.display-select:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+
+.display-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.display-icon {
+  flex-shrink: 0;
+}
+
+.display-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 500;
+}
+
+.display-specs {
+  margin-bottom: 24px;
+}
+
+.spec-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #e1dfdd;
+}
+
+.spec-row:last-child {
+  border-bottom: none;
+}
+
+.spec-label {
+  font-size: 14px;
+  color: #323130;
+  flex: 1;
+  max-width: 200px;
+}
+
+.spec-value {
+  font-size: 14px;
+  color: #605e5c;
+  text-align: right;
+  flex: 1;
+}
+
+.adapter-link {
+  margin-top: 16px;
+}
+
+.link-text {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.link-text:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/AdvancedScalingDetail.vue b/src/components/WindowsSystemSetting/components/AdvancedScalingDetail.vue
new file mode 100644
index 0000000..5a3f3ee
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/AdvancedScalingDetail.vue
@@ -0,0 +1,314 @@
+<template>
+  <div class="advanced-scaling-detail">
+    <!-- 返回按钮 -->
+    <div class="back-section">
+      <button class="back-button" @click="$emit('back')">
+        <span class="back-icon">←</span>
+        <span>设置</span>
+      </button>
+    </div>
+
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">
+        <span class="home-icon">🏠</span>
+        高级缩放设置
+      </h1>
+    </div>
+
+    <!-- 修复应用缩放部分 -->
+    <div class="fix-scaling-section">
+      <h3 class="section-title">修复应用缩放</h3>
+
+      <div class="description-section">
+        <p class="description">
+          显示器设置更改生效时，某些桌面应用可能看起来模糊不清。Windows
+          可以尝试修复这些应用，因此下次打开应用时看起来更清晰。这仅适用于当
+          显示器设置的应用，并非适用于所有应用。
+        </p>
+      </div>
+
+      <div class="auto-fix-section">
+        <div class="auto-fix-toggle">
+          <div class="toggle-info">
+            <div class="toggle-label">允许 Windows 尝试修复应用，使其不模糊</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: autoFixEnabled }"
+            @click="autoFixEnabled = !autoFixEnabled"
+          >
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 自定义缩放部分 -->
+    <div class="custom-scaling-section">
+      <h3 class="section-title">自定义缩放</h3>
+
+      <div class="description-section">
+        <p class="description">
+          你的所有显示器都将设置为你输入的自定义缩放大小。如果某个显示器不
+          支持该大小，这可能导致一些文本、应用和其他项目变得太大或太小。可能限制你
+          更改你的原始设置。
+        </p>
+      </div>
+
+      <div class="custom-input-section">
+        <div class="input-label"> 输入 100% - 500% 之间的自定义缩放大小(不建议) </div>
+
+        <div class="input-container">
+          <input
+            type="number"
+            v-model="customScaleValue"
+            min="100"
+            max="500"
+            class="scale-input"
+            placeholder="100"
+          />
+          <button class="clear-button" @click="clearInput" v-if="customScaleValue"> × </button>
+        </div>
+
+        <button class="apply-button" :disabled="!isValidScale" @click="applyCustomScale">
+          应用
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// 事件定义
+defineEmits(['back'])
+
+// 响应式数据
+const autoFixEnabled = ref(true)
+const customScaleValue = ref('')
+
+// 计算属性
+const isValidScale = computed(() => {
+  const value = parseInt(customScaleValue.value)
+  return !isNaN(value) && value >= 100 && value <= 500
+})
+
+// 方法
+const clearInput = () => {
+  customScaleValue.value = ''
+}
+
+const applyCustomScale = () => {
+  if (isValidScale.value) {
+    console.log('应用自定义缩放:', customScaleValue.value + '%')
+    // 这里可以添加应用缩放的逻辑
+  }
+}
+</script>
+
+<style scoped>
+.advanced-scaling-detail {
+  padding: 0;
+  max-width: 800px;
+  color: #323130;
+}
+
+.back-section {
+  margin-bottom: 20px;
+}
+
+.back-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  padding: 8px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.back-button:hover {
+  background: #f3f2f1;
+}
+
+.back-icon {
+  font-size: 16px;
+  color: #323130;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 32px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.home-icon {
+  font-size: 24px;
+}
+
+.fix-scaling-section,
+.custom-scaling-section {
+  margin-bottom: 40px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.description-section {
+  margin-bottom: 20px;
+}
+
+.description {
+  font-size: 14px;
+  color: #323130;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.auto-fix-section {
+  margin-top: 20px;
+}
+
+.auto-fix-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+}
+
+.toggle-info {
+  flex: 1;
+  max-width: 600px;
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+  line-height: 1.4;
+}
+
+.toggle-switch {
+  width: 44px;
+  height: 24px;
+  background: #d2d0ce;
+  border-radius: 12px;
+  position: relative;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  margin-left: 20px;
+}
+
+.toggle-switch.active {
+  background: #0078d4;
+}
+
+.toggle-switch::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: #ffffff;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.toggle-switch.active::before {
+  transform: translateX(20px);
+}
+
+.custom-input-section {
+  margin-top: 20px;
+}
+
+.input-label {
+  font-size: 14px;
+  color: #323130;
+  margin-bottom: 12px;
+  display: block;
+}
+
+.input-container {
+  position: relative;
+  display: inline-block;
+  margin-bottom: 16px;
+}
+
+.scale-input {
+  width: 280px;
+  padding: 8px 30px 8px 12px;
+  border: 1px solid #d2d0ce;
+  border-radius: 4px;
+  background: white;
+  font-size: 14px;
+  color: #323130;
+  outline: none;
+}
+
+.scale-input:focus {
+  border-color: #0078d4;
+}
+
+.clear-button {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  font-size: 18px;
+  color: #605e5c;
+  cursor: pointer;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clear-button:hover {
+  color: #323130;
+}
+
+.apply-button {
+  background: #f3f2f1;
+  border: 1px solid #d2d0ce;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  margin-left: 12px;
+}
+
+.apply-button:hover:not(:disabled) {
+  background: #edebe9;
+}
+
+.apply-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.apply-button:disabled:hover {
+  background: #f3f2f1;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/AppsDetail.vue b/src/components/WindowsSystemSetting/components/AppsDetail.vue
new file mode 100644
index 0000000..96f8d92
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/AppsDetail.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="apps-detail">
+    <div class="section-group">
+      <h3 class="section-title">应用和功能</h3>
+      <div class="setting-item" @click="manageApps">
+        <div class="setting-info">
+          <div class="setting-name">卸载、移动和修改应用</div>
+          <div class="setting-desc">管理已安装的应用程序</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+
+    <div class="section-group">
+      <h3 class="section-title">默认应用</h3>
+      <div class="setting-item" @click="defaultApps">
+        <div class="setting-info">
+          <div class="setting-name">选择用于链接和文件类型的默认应用</div>
+          <div class="setting-desc">设置默认浏览器、邮件客户端等</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+
+    <div class="section-group">
+      <h3 class="section-title">可选功能</h3>
+      <div class="setting-item" @click="optionalFeatures">
+        <div class="setting-info">
+          <div class="setting-name">添加可选功能</div>
+          <div class="setting-desc">管理 Windows 可选功能</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+
+    <div class="section-group">
+      <h3 class="section-title">离线地图</h3>
+      <div class="setting-item" @click="offlineMaps">
+        <div class="setting-info">
+          <div class="setting-name">下载地图以供离线使用</div>
+          <div class="setting-desc">管理离线地图下载</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+
+    <div class="section-group">
+      <h3 class="section-title">网站的应用</h3>
+      <div class="setting-item" @click="websiteApps">
+        <div class="setting-info">
+          <div class="setting-name">管理网站应用</div>
+          <div class="setting-desc">控制网站作为应用安装的权限</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { sendAppsMsg } from '../index'
+
+interface Props {
+  activeNav: string
+}
+
+defineProps<Props>()
+
+const manageApps = () => {
+  sendAppsMsg('管理应用和功能', 'manageApps', '已打开')
+  console.log('管理应用')
+}
+
+const defaultApps = () => {
+  sendAppsMsg('默认应用设置', 'defaultApps', '已打开')
+  console.log('默认应用')
+}
+
+const optionalFeatures = () => {
+  sendAppsMsg('可选功能', 'optionalFeatures', '已打开')
+  console.log('可选功能')
+}
+
+const offlineMaps = () => {
+  sendAppsMsg('离线地图', 'offlineMaps', '已打开')
+  console.log('离线地图')
+}
+
+const websiteApps = () => {
+  sendAppsMsg('网站应用', 'websiteApps', '已打开')
+  console.log('网站应用')
+}
+</script>
+<style scoped>
+@import '../detail.scss';
+</style>
diff --git a/src/components/WindowsSystemSetting/components/ClipboardDetail.vue b/src/components/WindowsSystemSetting/components/ClipboardDetail.vue
new file mode 100644
index 0000000..848319b
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/ClipboardDetail.vue
@@ -0,0 +1,295 @@
+<template>
+  <div class="clipboard-detail">
+    <!-- 剪贴板历史记录 -->
+    <div class="section-group">
+      <div class="clipboard-history">
+        <div class="history-description">
+          在 Windows 中复制或剪切内容时，内容会复制到剪贴板供你粘贴。
+        </div>
+
+        <h3 class="section-title">剪贴板历史记录</h3>
+        <div class="history-info">
+          保存多个项目到剪贴板以备将来使用。按 Windows 徽标键 + V
+          以查看您的剪贴板历史记录并粘贴其中的内容。
+        </div>
+
+        <div class="setting-item">
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input type="checkbox" v-model="clipboardHistory" @change="updateClipboardHistory" />
+              <span class="toggle-slider"></span>
+            </label>
+            <span class="toggle-label">{{ clipboardHistory ? '开' : '关' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 跨设备同步 -->
+    <div class="section-group">
+      <div class="cross-device-sync">
+        <h3 class="section-title">跨设备同步</h3>
+        <div class="sync-description">
+          在其他设备上粘贴文本。如果打开了此功能，Microsoft
+          将接收剪贴板数据已存储在你的设备之间共享。
+        </div>
+
+        <div class="sync-action">
+          <button class="start-btn" @click="startCrossDeviceSync">开始</button>
+        </div>
+
+        <div class="privacy-link">
+          <a href="#" @click="openPrivacyStatement" class="link-text">隐私声明</a>
+        </div>
+      </div>
+    </div>
+
+    <!-- 清除剪贴板数据 -->
+    <div class="section-group">
+      <div class="clear-clipboard">
+        <h3 class="section-title">清除剪贴板数据</h3>
+        <div class="clear-description"> 清除此设备上及 Microsoft 的所有内容(已固定项除外)。 </div>
+
+        <div class="clear-action">
+          <button class="clear-btn" @click="clearClipboard">清除</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { sendSystemMsg } from '../index'
+
+// 剪贴板设置状态
+const clipboardHistory = ref(true)
+
+// 监听剪贴板历史记录设置变化
+watch(clipboardHistory, (newValue) => {
+  sendSystemMsg('剪贴板历史记录', 'clipboardHistory', newValue)
+})
+
+// 事件处理函数
+const updateClipboardHistory = () => {
+  console.log('剪贴板历史记录:', clipboardHistory.value ? '开启' : '关闭')
+}
+
+const startCrossDeviceSync = () => {
+  sendSystemMsg('跨设备同步', 'crossDeviceSync', '已开始')
+  console.log('开始跨设备同步')
+}
+
+const clearClipboard = () => {
+  sendSystemMsg('清除剪贴板数据', 'clearClipboard', '已执行')
+  console.log('清除剪贴板数据')
+}
+
+const openPrivacyStatement = (e: Event) => {
+  e.preventDefault()
+  sendSystemMsg('隐私声明', 'privacyStatement', '已打开')
+  console.log('打开隐私声明')
+}
+</script>
+
+<style scoped>
+.clipboard-detail {
+  background: #ffffff;
+}
+
+.page-header {
+  padding: 20px 24px 16px 24px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 300;
+  color: #323130;
+}
+
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+  padding: 20px 24px;
+}
+
+.section-group:last-child {
+  border-bottom: none;
+}
+
+.section-title {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  font-weight: 400;
+  color: #323130;
+}
+
+/* 剪贴板历史记录 */
+.clipboard-history {
+  margin-bottom: 20px;
+}
+
+.history-description {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.5;
+  margin-bottom: 20px;
+}
+
+.history-info {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.5;
+  margin-bottom: 20px;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 20px;
+  transition: 0.4s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: '';
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.4s;
+}
+
+input:checked + .toggle-slider {
+  background-color: #0078d4;
+}
+
+input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+  min-width: 20px;
+}
+
+/* 跨设备同步 */
+.cross-device-sync {
+  margin-bottom: 20px;
+}
+
+.sync-description {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.5;
+  margin-bottom: 20px;
+}
+
+.sync-action {
+  margin-bottom: 16px;
+}
+
+.start-btn {
+  padding: 8px 20px;
+  background-color: #f3f2f1;
+  color: #323130;
+  border: 1px solid #d1d1d1;
+  border-radius: 2px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.start-btn:hover {
+  background-color: #e1dfdd;
+}
+
+.start-btn:focus {
+  outline: 2px solid #0078d4;
+  border-color: #0078d4;
+}
+
+.privacy-link {
+  margin-top: 16px;
+}
+
+/* 清除剪贴板数据 */
+.clear-clipboard {
+  margin-bottom: 20px;
+}
+
+.clear-description {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.5;
+  margin-bottom: 20px;
+}
+
+.clear-action {
+  margin-bottom: 16px;
+}
+
+.clear-btn {
+  padding: 8px 20px;
+  background-color: #f3f2f1;
+  color: #323130;
+  border: 1px solid #d1d1d1;
+  border-radius: 2px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.clear-btn:hover {
+  background-color: #e1dfdd;
+}
+
+.clear-btn:focus {
+  outline: 2px solid #0078d4;
+  border-color: #0078d4;
+}
+
+.link-text {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.link-text:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/CortanaDetail.vue b/src/components/WindowsSystemSetting/components/CortanaDetail.vue
new file mode 100644
index 0000000..57f8e0b
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/CortanaDetail.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="cortana-detail">
+    <div class="section-group">
+      <h3 class="section-title">Cortana 语言</h3>
+      <div class="setting-item" @click="languageSettings">
+        <div class="setting-info">
+          <div class="setting-name">选择 Cortana 语言</div>
+          <div class="setting-desc">设置 Cortana 使用的语言</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+
+    <div class="section-group">
+      <h3 class="section-title">权限</h3>
+      <div class="setting-item" @click="permissionSettings">
+        <div class="setting-info">
+          <div class="setting-name">Cortana 权限管理</div>
+          <div class="setting-desc">控制 Cortana 可访问的信息</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+
+    <div class="section-group">
+      <h3 class="section-title">通知</h3>
+      <div class="setting-item" @click="notificationSettings">
+        <div class="setting-info">
+          <div class="setting-name">Cortana 通知</div>
+          <div class="setting-desc">管理来自 Cortana 的通知</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+
+    <div class="section-group">
+      <h3 class="section-title">语音激活</h3>
+      <div class="setting-item" @click="voiceActivation">
+        <div class="setting-info">
+          <div class="setting-name">"你好小娜" 语音激活</div>
+          <div class="setting-desc">允许 Cortana 响应语音命令</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+
+    <div class="section-group">
+      <h3 class="section-title">个人信息</h3>
+      <div class="setting-item" @click="personalInfo">
+        <div class="setting-info">
+          <div class="setting-name">Cortana 个人信息</div>
+          <div class="setting-desc">管理 Cortana 了解的个人信息</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { sendCortanaMsg } from '../index'
+
+interface Props {
+  activeNav: string
+}
+
+defineProps<Props>()
+
+const languageSettings = () => {
+  sendCortanaMsg('语言设置', 'languageSettings', '已打开')
+  console.log('语言设置')
+}
+
+const permissionSettings = () => {
+  sendCortanaMsg('权限设置', 'permissionSettings', '已打开')
+  console.log('权限设置')
+}
+
+const notificationSettings = () => {
+  sendCortanaMsg('通知设置', 'notificationSettings', '已打开')
+  console.log('通知设置')
+}
+
+const voiceActivation = () => {
+  sendCortanaMsg('语音激活', 'voiceActivation', '已打开')
+  console.log('语音激活')
+}
+
+const personalInfo = () => {
+  sendCortanaMsg('个人信息管理', 'personalInfo', '已打开')
+  console.log('个人信息')
+}
+</script>
+
+<style scoped>
+@import '../detail.scss';
+</style>
diff --git a/src/components/WindowsSystemSetting/components/DevicesDetail.vue b/src/components/WindowsSystemSetting/components/DevicesDetail.vue
new file mode 100644
index 0000000..ef9c2b1
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/DevicesDetail.vue
@@ -0,0 +1,226 @@
+<template>
+  <div class="devices-detail">
+    <!-- 蓝牙和其他设备详细设置 -->
+    <div v-if="activeNav === 'bluetooth'">
+      <BluetoothDetail />
+    </div>
+
+    <!-- 打印机和扫描仪详细设置 -->
+    <div v-else-if="activeNav === 'printers'">
+      <PrintersDetail />
+    </div>
+
+    <!-- 鼠标详细设置 -->
+    <div v-else-if="activeNav === 'mouse'">
+      <MouseDetail />
+    </div>
+
+    <!-- 输入详细设置 -->
+    <div v-else-if="activeNav === 'typing'">
+      <TypingDetail />
+    </div>
+
+    <!-- 笔和Windows Ink详细设置 -->
+    <div v-else-if="activeNav === 'pen'">
+      <PenDetail />
+    </div>
+
+    <!-- 自动播放详细设置 -->
+    <div v-else-if="activeNav === 'autoplay'">
+      <AutoplayDetail />
+    </div>
+
+    <!-- USB详细设置 -->
+    <div v-else-if="activeNav === 'usb'">
+      <UsbDetail />
+    </div>
+
+    <!-- 设备主页 -->
+    <div v-else>
+      <div class="section-group">
+        <h3 class="section-title">蓝牙和其他设备</h3>
+        <div class="setting-item" @click="openBluetoothSettings">
+          <div class="setting-info">
+            <div class="setting-name">管理蓝牙设备、鼠标、键盘、笔、音频和其他设备</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">打印机和扫描仪</h3>
+        <div class="setting-item" @click="openPrinterSettings">
+          <div class="setting-info">
+            <div class="setting-name">管理打印机和扫描仪</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">鼠标</h3>
+        <div class="setting-item" @click="openMouseSettings">
+          <div class="setting-info">
+            <div class="setting-name">鼠标选项、滚轮和指针</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">输入</h3>
+        <div class="setting-item" @click="openTypingSettings">
+          <div class="setting-info">
+            <div class="setting-name">键盘、输入法、语言输入</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">笔和 Windows Ink</h3>
+        <div class="setting-item" @click="openPenSettings">
+          <div class="setting-info">
+            <div class="setting-name">Windows Ink 工作区、笔快捷方式</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">自动播放</h3>
+        <div class="setting-item" @click="openAutoplaySettings">
+          <div class="setting-info">
+            <div class="setting-name">为媒体和设备选择默认设置</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">USB</h3>
+        <div class="setting-item" @click="openUsbSettings">
+          <div class="setting-info">
+            <div class="setting-name">USB 通知和设置</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { sendDeviceMsg } from '../index'
+import BluetoothDetail from './devices/BluetoothDetail.vue'
+import PrintersDetail from './devices/PrintersDetail.vue'
+import MouseDetail from './devices/MouseDetail.vue'
+import TypingDetail from './devices/TypingDetail.vue'
+import PenDetail from './devices/PenDetail.vue'
+import AutoplayDetail from './devices/AutoplayDetail.vue'
+import UsbDetail from './devices/UsbDetail.vue'
+
+// 接收props
+defineProps<{
+  activeNav: string
+}>()
+
+// 事件发射器
+const emit = defineEmits<{
+  'navigate-to': [navKey: string]
+}>()
+
+const openBluetoothSettings = () => {
+  sendDeviceMsg('蓝牙设置', 'bluetoothSettings', '已打开')
+  emit('navigate-to', 'bluetooth')
+}
+
+const openPrinterSettings = () => {
+  sendDeviceMsg('打印机设置', 'printerSettings', '已打开')
+  emit('navigate-to', 'printers')
+}
+
+const openMouseSettings = () => {
+  sendDeviceMsg('鼠标设置', 'mouseSettings', '已打开')
+  emit('navigate-to', 'mouse')
+}
+
+const openTypingSettings = () => {
+  sendDeviceMsg('键盘设置', 'typingSettings', '已打开')
+  emit('navigate-to', 'typing')
+}
+
+const openPenSettings = () => {
+  sendDeviceMsg('触控笔设置', 'penSettings', '已打开')
+  emit('navigate-to', 'pen')
+}
+
+const openAutoplaySettings = () => {
+  sendDeviceMsg('自动播放设置', 'autoplaySettings', '已打开')
+  emit('navigate-to', 'autoplay')
+}
+
+const openUsbSettings = () => {
+  sendDeviceMsg('USB设置', 'usbSettings', '已打开')
+  emit('navigate-to', 'usb')
+}
+</script>
+
+<style scoped>
+.devices-detail {
+  background: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.section-group:last-child {
+  border-bottom: none;
+}
+
+.section-title {
+  margin: 0;
+  padding: 16px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #0078d4;
+  background: #f8f9fa;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.setting-item:hover {
+  background-color: #f8f9fa;
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 14px;
+  font-weight: 400;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.setting-desc {
+  font-size: 12px;
+  color: #666;
+}
+
+.setting-arrow {
+  font-size: 14px;
+  color: #666;
+  margin-left: 12px;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/DisplayDetail.vue b/src/components/WindowsSystemSetting/components/DisplayDetail.vue
new file mode 100644
index 0000000..8299841
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/DisplayDetail.vue
@@ -0,0 +1,434 @@
+<template>
+  <div class="display-detail">
+    <!-- 夜间模式详细设置页面 -->
+    <NightModeDetail v-if="showNightModeDetail" @back="showNightModeDetail = false" />
+
+    <!-- Windows HD Color详细设置页面 -->
+    <HDColorDetail v-else-if="showHDColorDetail" @back="showHDColorDetail = false" />
+
+    <!-- 高级缩放设置页面 -->
+    <AdvancedScalingDetail
+      v-else-if="showAdvancedScalingDetail"
+      @back="showAdvancedScalingDetail = false"
+    />
+
+    <!-- 高级显示设置页面 -->
+    <AdvancedDisplayDetail
+      v-else-if="showAdvancedDisplayDetail"
+      @back="showAdvancedDisplayDetail = false"
+    />
+
+    <!-- 图形设置页面 -->
+    <GraphicsSettingsDetail
+      v-else-if="showGraphicsSettingsDetail"
+      @back="showGraphicsSettingsDetail = false"
+    />
+
+    <!-- 主显示设置页面 -->
+    <div v-else>
+      <!-- 显示器配置
+    <div class="monitor-section">
+      <h2 class="section-title">显示</h2>
+      <div class="monitor-preview">
+        <div class="monitor-container">
+          <div class="monitor-frame">
+            <div class="monitor-screen">1</div>
+          </div>
+        </div>
+      </div>
+    </div> -->
+
+      <!-- 亮度和颜色 -->
+      <div class="brightness-color-section">
+        <h3 class="subsection-title">亮度和颜色</h3>
+
+        <div class="setting-group">
+          <div class="setting-item-toggle">
+            <div class="setting-info">
+              <div class="setting-name">夜间模式(21:00 之前停止开闭)</div>
+            </div>
+            <div
+              class="toggle-switch"
+              :class="{ active: nightModeEnabled }"
+              @click="nightModeEnabled = !nightModeEnabled"
+            >
+            </div>
+          </div>
+          <div class="setting-link">
+            <a href="#" class="link-text" @click.prevent="showNightModeDetail = true"
+              >夜间模式设置</a
+            >
+          </div>
+        </div>
+
+        <div class="hdr-section">
+          <h4 class="feature-title">Windows HD Color</h4>
+          <p class="feature-desc"
+            >在兼容所选择的显示器上让HDR和WCG视频、游戏和应用中的画面更明亮、更生动。</p
+          >
+          <div class="setting-link">
+            <a href="#" class="link-text" @click.prevent="showHDColorDetail = true"
+              >Windows HD Color 设置</a
+            >
+          </div>
+        </div>
+      </div>
+
+      <!-- 缩放与布局 -->
+      <div class="scale-layout-section">
+        <h3 class="subsection-title">缩放与布局</h3>
+
+        <div class="setting-group">
+          <div class="setting-label">更改文本、应用等项目的大小</div>
+          <select v-model="scaleLevel" class="scale-select">
+            <option value="100">100% (推荐)</option>
+            <option value="125">125%</option>
+            <option value="150">150%</option>
+            <option value="175">175%</option>
+            <option value="200">200%</option>
+          </select>
+          <div class="setting-link">
+            <a href="#" class="link-text" @click.prevent="showAdvancedScalingDetail = true"
+              >高级缩放设置</a
+            >
+          </div>
+        </div>
+
+        <div class="setting-group">
+          <div class="setting-label">显示分辨率</div>
+          <select v-model="resolution" class="resolution-select">
+            <option value="1920x1080">1920 × 1080 (推荐)</option>
+            <option value="1680x1050">1680 × 1050</option>
+            <option value="1440x900">1440 × 900</option>
+            <option value="1366x768">1366 × 768</option>
+            <option value="1280x720">1280 × 720</option>
+          </select>
+        </div>
+
+        <div class="setting-group">
+          <div class="setting-label">显示方向</div>
+          <select v-model="orientation" class="orientation-select">
+            <option value="landscape">横向</option>
+            <option value="portrait">纵向</option>
+            <option value="landscape-flipped">横向(翻转)</option>
+            <option value="portrait-flipped">纵向(翻转)</option>
+          </select>
+        </div>
+
+        <!-- 旋转锁定 -->
+        <div class="setting-item-toggle">
+          <div class="setting-info">
+            <div class="setting-name">旋转锁定</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: rotationLock }"
+            @click="rotationLock = !rotationLock"
+          >
+          </div>
+        </div>
+      </div>
+
+      <!-- 多显示器设置 -->
+      <div class="multiple-display-section">
+        <h3 class="subsection-title">多显示器设置</h3>
+        <p class="section-desc">一些日式显示器可能不会进行自动检测。选择"检测"即可尝试手动检测。</p>
+
+        <button class="detect-button">检测</button>
+
+        <div class="setting-links">
+          <div class="setting-link">
+            <a href="#" class="link-text" @click.prevent="showAdvancedDisplayDetail = true"
+              >高级显示设置</a
+            >
+          </div>
+          <div class="setting-link">
+            <a href="#" class="link-text" @click.prevent="showGraphicsSettingsDetail = true"
+              >图形设置</a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { sendSystemMsg } from '../index'
+import NightModeDetail from './NightModeDetail.vue'
+import HDColorDetail from './HDColorDetail.vue'
+import AdvancedScalingDetail from './AdvancedScalingDetail.vue'
+import AdvancedDisplayDetail from './AdvancedDisplayDetail.vue'
+import GraphicsSettingsDetail from './GraphicsSettingsDetail.vue'
+
+interface Props {
+  activeNav: string
+}
+
+defineProps<Props>()
+
+// 响应式数据
+const showGraphicsSettingsDetail = ref(false)
+const showAdvancedDisplayDetail = ref(false)
+const showAdvancedScalingDetail = ref(false)
+const showHDColorDetail = ref(false)
+const showNightModeDetail = ref(false)
+const nightModeEnabled = ref(true)
+const scaleLevel = ref('100')
+const resolution = ref('1920x1080')
+const orientation = ref('landscape')
+const rotationLock = ref(true)
+
+// 监听夜间模式变化
+watch(nightModeEnabled, (newValue) => {
+  sendSystemMsg('夜间模式', 'nightMode', newValue)
+})
+
+// 监听缩放级别变化
+watch(scaleLevel, (newValue) => {
+  sendSystemMsg('缩放级别', 'scaleLevel', newValue + '%')
+})
+
+// 监听分辨率变化
+watch(resolution, (newValue) => {
+  sendSystemMsg('显示分辨率', 'resolution', newValue)
+})
+
+// 监听屏幕方向变化
+watch(orientation, (newValue) => {
+  const orientationText = newValue === 'landscape' ? '横向' : '纵向'
+  sendSystemMsg('屏幕方向', 'orientation', orientationText)
+})
+
+// 监听旋转锁定变化
+watch(rotationLock, (newValue) => {
+  sendSystemMsg('旋转锁定', 'rotationLock', newValue)
+})
+</script>
+
+<style scoped>
+.display-detail {
+  padding: 0;
+  max-width: 800px;
+}
+
+.section-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 20px 0;
+}
+
+.subsection-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #323130;
+  margin: 32px 0 16px 0;
+}
+
+.monitor-section {
+  margin-bottom: 32px;
+}
+
+.monitor-preview {
+  margin: 20px 0;
+}
+
+.monitor-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px;
+}
+
+.monitor-frame {
+  width: 160px;
+  height: 100px;
+  border: 3px solid #323130;
+  border-radius: 8px;
+  position: relative;
+  background: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.monitor-frame::after {
+  content: '';
+  position: absolute;
+  bottom: -15px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40px;
+  height: 15px;
+  background: #323130;
+  border-radius: 0 0 8px 8px;
+}
+
+.monitor-screen {
+  color: white;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.brightness-color-section,
+.scale-layout-section,
+.multiple-display-section {
+  margin-bottom: 32px;
+}
+
+.setting-group {
+  margin-bottom: 20px;
+}
+
+.setting-item-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 14px;
+  color: #323130;
+  line-height: 1.4;
+}
+
+.toggle-switch {
+  width: 44px;
+  height: 24px;
+  background: #d2d0ce;
+  border-radius: 12px;
+  position: relative;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.toggle-switch.active {
+  background: #0078d4;
+}
+
+.toggle-switch::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: #ffffff;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.toggle-switch.active::before {
+  transform: translateX(20px);
+}
+
+.setting-link {
+  margin-top: 8px;
+}
+
+.link-text {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.link-text:hover {
+  text-decoration: underline;
+}
+
+.feature-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #323130;
+  margin: 20px 0 8px 0;
+}
+
+.feature-desc {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+  margin: 0 0 8px 0;
+}
+
+.setting-label {
+  font-size: 14px;
+  color: #323130;
+  margin-bottom: 8px;
+  display: block;
+}
+
+.scale-select,
+.resolution-select,
+.orientation-select {
+  width: 100%;
+  max-width: 340px;
+  padding: 8px 12px;
+  border: 1px solid #d2d0ce;
+  border-radius: 4px;
+  background: white;
+  font-size: 14px;
+  color: #323130;
+}
+
+.scale-select:focus,
+.resolution-select:focus,
+.orientation-select:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+
+.section-desc {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+  margin: 0 0 16px 0;
+}
+
+.detect-button {
+  background: #f3f2f1;
+  border: 1px solid #d2d0ce;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  margin-bottom: 20px;
+}
+
+.detect-button:hover {
+  background: #edebe9;
+}
+
+.setting-links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.help-section,
+.feedback-section {
+  margin-top: 40px;
+  padding-top: 20px;
+  border-top: 1px solid #e1dfdd;
+}
+
+.help-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 8px 0;
+}
+
+.feedback-text {
+  font-size: 14px;
+  color: #323130;
+  margin-bottom: 8px;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/EaseOfAccessDetail.vue b/src/components/WindowsSystemSetting/components/EaseOfAccessDetail.vue
new file mode 100644
index 0000000..6b1cadd
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/EaseOfAccessDetail.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="ease-of-access-detail"
+    ><div class="section-group"
+      ><h3 class="section-title">视觉</h3
+      ><div class="setting-item"
+        ><div class="setting-info"
+          ><div class="setting-name"
+            >显示、鼠标指针、文本光标、放大镜、颜色滤镜、高对比度、讲述人</div
+          ></div
+        ><div class="setting-arrow">></div></div
+      ></div
+    ></div
+  >
+</template>
+<script setup lang="ts"></script>
+<style scoped>
+.ease-of-access-detail {
+  background: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+}
+.section-title {
+  margin: 0;
+  padding: 16px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #0078d4;
+  background: #f8f9fa;
+}
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.setting-item:hover {
+  background-color: #f8f9fa;
+}
+.setting-info {
+  flex: 1;
+}
+.setting-name {
+  font-size: 14px;
+  font-weight: 400;
+  color: #333;
+}
+.setting-arrow {
+  font-size: 14px;
+  color: #666;
+  margin-left: 12px;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/FocusAssistDetail.vue b/src/components/WindowsSystemSetting/components/FocusAssistDetail.vue
new file mode 100644
index 0000000..74c3f4b
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/FocusAssistDetail.vue
@@ -0,0 +1,516 @@
+<template>
+  <div class="focus-assist-detail">
+    <!-- 专注助手详细设置页面 -->
+    <div class="focus-assist-main">
+      <p class="description">
+        选择你希望看到和听到的通知，以便能够保持专注。其余通知将直接进入操作中心，你可以随时查看。
+      </p>
+
+      <!-- 专注级别选择 -->
+      <div class="focus-levels-section">
+        <div
+          class="focus-level"
+          :class="{ active: focusLevel === 'off' }"
+          @click="setFocusLevel('off')"
+        >
+          <div class="radio-container">
+            <input type="radio" v-model="focusLevel" value="off" />
+            <span class="radio-circle"></span>
+          </div>
+          <div class="level-content">
+            <div class="level-title">关</div>
+            <div class="level-description">获取来自应用和联系人的所有通知。</div>
+          </div>
+        </div>
+
+        <div
+          class="focus-level"
+          :class="{ active: focusLevel === 'priority' }"
+          @click="setFocusLevel('priority')"
+        >
+          <div class="radio-container">
+            <input type="radio" v-model="focusLevel" value="priority" />
+            <span class="radio-circle"></span>
+          </div>
+          <div class="level-content">
+            <div class="level-title">仅优先通知</div>
+            <div class="level-description"
+              >仅查看优先发列表中选定的通知。其余通知将直接进入操作中心。</div
+            >
+            <button class="customize-link" @click="customizePriorityList">自定义优先列表</button>
+          </div>
+        </div>
+
+        <div
+          class="focus-level"
+          :class="{ active: focusLevel === 'alarms' }"
+          @click="setFocusLevel('alarms')"
+        >
+          <div class="radio-container">
+            <input type="radio" v-model="focusLevel" value="alarms" />
+            <span class="radio-circle"></span>
+          </div>
+          <div class="level-content">
+            <div class="level-title">仅闹钟</div>
+            <div class="level-description">隐藏除闹钟外的所有通知。</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 自动规则 -->
+      <div class="auto-rules-section">
+        <h3 class="subsection-title">自动规则</h3>
+        <p class="rules-description"> 选择不想被打扰的时间或活动，并且专注助手会自动开启。 </p>
+
+        <div class="rule-list">
+          <!-- 时间规则 -->
+          <div class="rule-item">
+            <div class="rule-icon">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="#666">
+                <path
+                  d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"
+                />
+              </svg>
+            </div>
+            <div class="rule-content">
+              <div class="rule-title">在这些时间段内</div>
+              <div class="rule-subtitle">20:00 - 7:00; 仅优先通知</div>
+            </div>
+            <div class="rule-toggle">
+              <label class="toggle-switch">
+                <input type="checkbox" v-model="timeRuleEnabled" @change="toggleTimeRule" />
+                <span class="slider"></span>
+              </label>
+              <span class="toggle-text">{{ timeRuleEnabled ? '开' : '关' }}</span>
+            </div>
+          </div>
+
+          <!-- 投影规则 -->
+          <div class="rule-item">
+            <div class="rule-icon">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="#666">
+                <path
+                  d="M3,3H21A2,2 0 0,1 23,5V15A2,2 0 0,1 21,17H13V19H17V21H7V19H11V17H3A2,2 0 0,1 1,15V5A2,2 0 0,1 3,3M3,5V15H21V5H3Z"
+                />
+              </svg>
+            </div>
+            <div class="rule-content">
+              <div class="rule-title">当我在使用投影时</div>
+              <div class="rule-subtitle">仅闹钟</div>
+            </div>
+            <div class="rule-toggle">
+              <label class="toggle-switch">
+                <input
+                  type="checkbox"
+                  v-model="projectionRuleEnabled"
+                  @change="toggleProjectionRule"
+                />
+                <span class="slider"></span>
+              </label>
+              <span class="toggle-text">{{ projectionRuleEnabled ? '开' : '关' }}</span>
+            </div>
+          </div>
+
+          <!-- 游戏规则 -->
+          <div class="rule-item">
+            <div class="rule-icon">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="#666">
+                <path
+                  d="M7.97,16L5,19C4.67,19.3 4.23,19.5 3.75,19.5A1.75,1.75 0 0,1 2,17.75V17.5L3,10.12C3.21,7.81 5.14,6 7.5,6H16.5C18.86,6 20.79,7.81 21,10.12L22,17.5V17.75A1.75,1.75 0 0,1 20.25,19.5C19.77,19.5 19.33,19.3 19,19L16.03,16H7.97M9.5,8A1.5,1.5 0 0,0 8,9.5A1.5,1.5 0 0,0 9.5,11A1.5,1.5 0 0,0 11,9.5A1.5,1.5 0 0,0 9.5,8M14.5,8A1.5,1.5 0 0,0 13,9.5A1.5,1.5 0 0,0 14.5,11A1.5,1.5 0 0,0 16,9.5A1.5,1.5 0 0,0 14.5,8Z"
+                />
+              </svg>
+            </div>
+            <div class="rule-content">
+              <div class="rule-title">当我玩游戏时</div>
+              <div class="rule-subtitle">仅优先通知</div>
+            </div>
+            <div class="rule-toggle">
+              <label class="toggle-switch">
+                <input type="checkbox" v-model="gamingRuleEnabled" @change="toggleGamingRule" />
+                <span class="slider"></span>
+              </label>
+              <span class="toggle-text">{{ gamingRuleEnabled ? '开' : '关' }}</span>
+            </div>
+          </div>
+
+          <!-- 全屏规则 -->
+          <div class="rule-item">
+            <div class="rule-icon">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="#666">
+                <path
+                  d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z"
+                />
+              </svg>
+            </div>
+            <div class="rule-content">
+              <div class="rule-title">在全屏模式下使用应用时</div>
+              <div class="rule-subtitle">仅闹钟</div>
+            </div>
+            <div class="rule-toggle">
+              <label class="toggle-switch">
+                <input
+                  type="checkbox"
+                  v-model="fullscreenRuleEnabled"
+                  @change="toggleFullscreenRule"
+                />
+                <span class="slider"></span>
+              </label>
+              <span class="toggle-text">{{ fullscreenRuleEnabled ? '开' : '关' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 显示摘要选项 -->
+        <div class="summary-option">
+          <label class="checkbox-container">
+            <input type="checkbox" v-model="showSummary" @change="toggleSummary" />
+            <span class="checkmark"></span>
+            <span class="option-text">向我显示我在专注助手打开时错过的内容</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 响应式数据
+const focusLevel = ref('off')
+const timeRuleEnabled = ref(false)
+const projectionRuleEnabled = ref(true)
+const gamingRuleEnabled = ref(true)
+const fullscreenRuleEnabled = ref(true)
+const showSummary = ref(true)
+
+// 方法
+const setFocusLevel = (level: string) => {
+  focusLevel.value = level
+  console.log('设置专注级别:', level)
+}
+
+const customizePriorityList = () => {
+  console.log('自定义优先列表')
+}
+
+const toggleTimeRule = () => {
+  console.log('时间规则:', timeRuleEnabled.value)
+}
+
+const toggleProjectionRule = () => {
+  console.log('投影规则:', projectionRuleEnabled.value)
+}
+
+const toggleGamingRule = () => {
+  console.log('游戏规则:', gamingRuleEnabled.value)
+}
+
+const toggleFullscreenRule = () => {
+  console.log('全屏规则:', fullscreenRuleEnabled.value)
+}
+
+const toggleSummary = () => {
+  console.log('显示摘要:', showSummary.value)
+}
+</script>
+
+<style scoped>
+.focus-assist-detail {
+  padding: 20px;
+  background: #ffffff;
+  min-height: 600px;
+}
+
+.focus-assist-main {
+  max-width: 800px;
+}
+
+.page-title {
+  font-size: 16px;
+  font-weight: 300;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.description {
+  font-size: 14px;
+  color: #605e5c;
+  margin: 0 0 32px 0;
+  line-height: 1.4;
+}
+
+/* 专注级别部分 */
+.focus-levels-section {
+  margin-bottom: 32px;
+}
+
+.focus-level {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 16px;
+  border: 1px solid #e1e1e1;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.focus-level:hover {
+  background: #f8f9fa;
+}
+
+.focus-level.active {
+  border-color: #0078d4;
+  background: #f3f8ff;
+}
+
+.radio-container {
+  position: relative;
+  margin-top: 2px;
+}
+
+.radio-container input[type='radio'] {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+}
+
+.radio-circle {
+  position: relative;
+  display: block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #666;
+  border-radius: 50%;
+  background: #ffffff;
+}
+
+.focus-level.active .radio-circle {
+  border-color: #0078d4;
+}
+
+.focus-level.active .radio-circle::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #0078d4;
+}
+
+.level-content {
+  flex: 1;
+}
+
+.level-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #323130;
+  margin-bottom: 4px;
+}
+
+.level-description {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+  margin-bottom: 8px;
+}
+
+.customize-link {
+  color: #0078d4;
+  background: none;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: underline;
+  padding: 0;
+}
+
+.customize-link:hover {
+  text-decoration: none;
+}
+
+/* 自动规则部分 */
+.auto-rules-section {
+  padding-top: 24px;
+  border-top: 1px solid #e1e1e1;
+}
+
+.subsection-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 12px 0;
+}
+
+.rules-description {
+  font-size: 14px;
+  color: #605e5c;
+  margin: 0 0 24px 0;
+  line-height: 1.4;
+}
+
+.rule-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.rule-item {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid #e1e1e1;
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.rule-item:hover {
+  background: #f8f9fa;
+}
+
+.rule-icon {
+  width: 32px;
+  height: 32px;
+  margin-right: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.rule-content {
+  flex: 1;
+}
+
+.rule-title {
+  font-size: 16px;
+  font-weight: 400;
+  color: #323130;
+  margin-bottom: 4px;
+}
+
+.rule-subtitle {
+  font-size: 14px;
+  color: #605e5c;
+}
+
+.rule-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 16px;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.4s;
+  border-radius: 24px;
+}
+
+.slider:before {
+  position: absolute;
+  content: '';
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #0078d4;
+}
+
+input:checked + .slider:before {
+  transform: translateX(20px);
+}
+
+.toggle-text {
+  font-size: 14px;
+  color: #323130;
+  min-width: 16px;
+}
+
+/* 显示摘要选项 */
+.summary-option {
+  padding: 16px 0;
+  border-top: 1px solid #e1e1e1;
+}
+
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+}
+
+.checkbox-container input[type='checkbox'] {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+}
+
+.option-text {
+  line-height: 1.4;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .focus-assist-detail {
+    padding: 16px;
+  }
+
+  .focus-level {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .radio-container {
+    align-self: flex-start;
+  }
+
+  .rule-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .rule-toggle {
+    margin-left: 0;
+    align-self: flex-start;
+  }
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/GamingDetail.vue b/src/components/WindowsSystemSetting/components/GamingDetail.vue
new file mode 100644
index 0000000..134873a
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/GamingDetail.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="gaming-detail"
+    ><div class="section-group"
+      ><h3 class="section-title">Xbox Game Bar</h3
+      ><div class="setting-item"
+        ><div class="setting-info"><div class="setting-name">录制游戏剪辑、屏幕截图和广播</div></div
+        ><div class="setting-arrow">></div></div
+      ></div
+    ></div
+  >
+</template>
+<script setup lang="ts"></script>
+<style scoped>
+.gaming-detail {
+  background: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+}
+.section-title {
+  margin: 0;
+  padding: 16px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #0078d4;
+  background: #f8f9fa;
+}
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.setting-item:hover {
+  background-color: #f8f9fa;
+}
+.setting-info {
+  flex: 1;
+}
+.setting-name {
+  font-size: 14px;
+  font-weight: 400;
+  color: #333;
+}
+.setting-arrow {
+  font-size: 14px;
+  color: #666;
+  margin-left: 12px;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/GraphicsSettingsDetail.vue b/src/components/WindowsSystemSetting/components/GraphicsSettingsDetail.vue
new file mode 100644
index 0000000..40404ce
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/GraphicsSettingsDetail.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="graphics-settings-detail">
+    <!-- 返回按钮 -->
+    <div class="back-section">
+      <button class="back-button" @click="$emit('back')">
+        <span class="back-icon">←</span>
+        <span>设置</span>
+      </button>
+    </div>
+
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">
+        <span class="home-icon">🏠</span>
+        图形设置
+      </h1>
+    </div>
+
+    <!-- 图形性能首选项部分 -->
+    <div class="graphics-preferences-section">
+      <h3 class="section-title">图形性能首选项</h3>
+
+      <div class="description-section">
+        <p class="description">
+          自定义特定应用程序图形性能首选项。首选项可以提供更好的应用性能
+          或延长电池使用时间。选择各在下次应用启动后生效。
+        </p>
+      </div>
+    </div>
+
+    <!-- 选择要设置首选项的应用 -->
+    <div class="app-selection-section">
+      <h4 class="subsection-title">选择要设置首选项的应用</h4>
+
+      <div class="app-dropdown">
+        <select v-model="selectedAppType" class="app-select">
+          <option value="classic">经典应用</option>
+          <option value="universal">通用应用</option>
+        </select>
+      </div>
+
+      <button class="browse-button" @click="browseApp"> 浏览 </button>
+    </div>
+
+    <!-- 应用未找到提示 -->
+    <div class="no-apps-message">
+      <p class="message-text">
+        我们无法找到要在此处显示的任何特定于应用的首选项。添加一个应用以 开始。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 事件定义
+defineEmits(['back'])
+
+// 响应式数据
+const selectedAppType = ref('classic')
+
+// 方法
+const browseApp = () => {
+  console.log('浏览应用')
+  // 这里可以添加浏览应用的逻辑
+}
+</script>
+
+<style scoped>
+.graphics-settings-detail {
+  padding: 0;
+  max-width: 800px;
+  color: #323130;
+}
+
+.back-section {
+  margin-bottom: 20px;
+}
+
+.back-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  padding: 8px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.back-button:hover {
+  background: #f3f2f1;
+}
+
+.back-icon {
+  font-size: 16px;
+  color: #323130;
+}
+
+.page-header {
+  margin-bottom: 32px;
+}
+
+.page-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 32px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.home-icon {
+  font-size: 24px;
+}
+
+.graphics-preferences-section {
+  margin-bottom: 32px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.description-section {
+  margin-bottom: 24px;
+}
+
+.description {
+  font-size: 14px;
+  color: #323130;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.app-selection-section {
+  margin-bottom: 32px;
+}
+
+.subsection-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.app-dropdown {
+  display: inline-block;
+  margin-right: 12px;
+  margin-bottom: 16px;
+}
+
+.app-select {
+  width: 200px;
+  padding: 8px 12px;
+  border: 1px solid #d2d0ce;
+  border-radius: 4px;
+  background: white;
+  font-size: 14px;
+  color: #323130;
+}
+
+.app-select:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+
+.browse-button {
+  background: #f3f2f1;
+  border: 1px solid #d2d0ce;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  vertical-align: top;
+}
+
+.browse-button:hover {
+  background: #edebe9;
+}
+
+.no-apps-message {
+  background: #f8f9fa;
+  border: 1px solid #e1dfdd;
+  border-radius: 4px;
+  padding: 24px;
+  text-align: left;
+}
+
+.message-text {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.5;
+  margin: 0;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/HDColorDetail.vue b/src/components/WindowsSystemSetting/components/HDColorDetail.vue
new file mode 100644
index 0000000..e9f1257
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/HDColorDetail.vue
@@ -0,0 +1,376 @@
+<template>
+  <div class="hd-color-detail">
+    <!-- 返回按钮 -->
+    <div class="back-section">
+      <button class="back-button" @click="$emit('back')">
+        <span class="back-icon">←</span>
+        <span>设置</span>
+      </button>
+    </div>
+
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">
+        <span class="home-icon">🏠</span>
+        Windows HD Color 设置
+      </h1>
+    </div>
+
+    <!-- 说明部分 -->
+    <div class="description-section">
+      <p class="description">
+        通过 Windows HD Color，你的设备各种可用时显示高动态范围(HDR)和
+        宽色域(WCG)内容。这包括照片、视频和游戏，并取决于你的显示器和电 脑。
+      </p>
+      <div class="help-link">
+        <a href="#" class="help-link-text">了解更多关于 Windows HD Color 的信息</a>
+      </div>
+    </div>
+
+    <!-- 选择显示器 -->
+    <div class="display-selection-section">
+      <h3 class="section-title">选择显示器</h3>
+      <p class="section-desc">选择一个显示器以查看或更改设置。</p>
+
+      <div class="display-dropdown">
+        <select v-model="selectedDisplay" class="display-select">
+          <option value="display1">显示 1:</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- 显示功能 -->
+    <div class="display-features-section">
+      <h3 class="section-title">显示功能</h3>
+
+      <div class="feature-list">
+        <div class="feature-item">
+          <div class="feature-label">流式传输 HDR 视频</div>
+          <div class="feature-status">否</div>
+        </div>
+
+        <div class="feature-item">
+          <div class="feature-label">使用 HDR 游戏和应用</div>
+          <div class="feature-status">否</div>
+        </div>
+
+        <div class="feature-item">
+          <div class="feature-label">使用 WCG 应用</div>
+          <div class="feature-status">否</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 预览说明 -->
+    <div class="preview-section">
+      <p class="preview-text">
+        下面的预览显示示了使用当前视频设置时的视频播放效果。老此，窗口移
+        动到正在调整的显示器，以实现精确预览。
+      </p>
+
+      <!-- 预览图像区域 -->
+      <div class="preview-image-container">
+        <div class="preview-image">
+          <div class="preview-placeholder">
+            <div class="preview-landscape">
+              <!-- 模拟日落/日出场景 -->
+              <div class="sky-gradient"></div>
+              <div class="landscape-silhouette"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 事件定义
+defineEmits(['back'])
+
+// 响应式数据
+const selectedDisplay = ref('display1')
+</script>
+
+<style scoped>
+.hd-color-detail {
+  padding: 0;
+  max-width: 800px;
+  color: #323130;
+}
+
+.back-section {
+  margin-bottom: 20px;
+}
+
+.back-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  padding: 8px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.back-button:hover {
+  background: #f3f2f1;
+}
+
+.back-icon {
+  font-size: 16px;
+  color: #323130;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 32px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.home-icon {
+  font-size: 24px;
+}
+
+.description-section {
+  margin-bottom: 32px;
+  position: relative;
+}
+
+.description {
+  font-size: 14px;
+  color: #323130;
+  line-height: 1.5;
+  margin: 0 0 16px 0;
+  max-width: 600px;
+}
+
+.help-link {
+  margin-bottom: 20px;
+}
+
+.help-link-text {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.help-link-text:hover {
+  text-decoration: underline;
+}
+
+.right-side-links {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  text-align: right;
+}
+
+.related-setting,
+.video-setting {
+  font-size: 14px;
+  color: #323130;
+}
+
+.link-text {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.link-text:hover {
+  text-decoration: underline;
+}
+
+.display-selection-section,
+.display-features-section {
+  margin-bottom: 32px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 12px 0;
+}
+
+.section-desc {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+  margin: 0 0 16px 0;
+}
+
+.display-dropdown {
+  margin-top: 16px;
+}
+
+.display-select {
+  width: 100%;
+  max-width: 340px;
+  padding: 8px 12px;
+  border: 1px solid #d2d0ce;
+  border-radius: 4px;
+  background: white;
+  font-size: 14px;
+  color: #323130;
+}
+
+.display-select:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+
+.feature-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.feature-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #e1dfdd;
+}
+
+.feature-item:last-child {
+  border-bottom: none;
+}
+
+.feature-label {
+  font-size: 14px;
+  color: #323130;
+  flex: 1;
+}
+
+.feature-status {
+  font-size: 14px;
+  color: #605e5c;
+  min-width: 60px;
+  text-align: right;
+}
+
+.preview-section {
+  margin-bottom: 40px;
+}
+
+.preview-text {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+  margin: 0 0 20px 0;
+}
+
+.preview-image-container {
+  margin-top: 20px;
+}
+
+.preview-image {
+  width: 100%;
+  max-width: 400px;
+  height: 250px;
+  background: #000;
+  border: 1px solid #d2d0ce;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.preview-placeholder {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #1a1a2e;
+}
+
+.preview-landscape {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.sky-gradient {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 70%;
+  background: linear-gradient(to bottom, #ff7b39 0%, #ff4757 30%, #2f1b69 60%, #0c0c54 100%);
+}
+
+.landscape-silhouette {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 30%;
+  background: linear-gradient(
+    to right,
+    #000 0%,
+    #1a1a1a 20%,
+    #000 40%,
+    #2a2a2a 60%,
+    #000 80%,
+    #1a1a1a 100%
+  );
+  clip-path: polygon(
+    0% 60%,
+    10% 40%,
+    25% 70%,
+    35% 30%,
+    50% 50%,
+    65% 20%,
+    80% 60%,
+    90% 30%,
+    100% 40%,
+    100% 100%,
+    0% 100%
+  );
+}
+
+.preview-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: block;
+}
+
+.footer-section {
+  margin-top: 40px;
+  padding-top: 20px;
+  border-top: 1px solid #e1dfdd;
+}
+
+.feedback-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.feedback-text {
+  font-size: 14px;
+  color: #323130;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/ManageSoundDevices.vue b/src/components/WindowsSystemSetting/components/ManageSoundDevices.vue
new file mode 100644
index 0000000..064f498
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/ManageSoundDevices.vue
@@ -0,0 +1,344 @@
+<template>
+  <div class="manage-devices">
+    <div class="manage-header">
+      <button class="back-button" @click="$emit('back')">
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <path
+            d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
+            fill="currentColor"
+          />
+        </svg>
+        设置
+      </button>
+      <div class="home-icon" @click="$emit('back')">
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <path
+            d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 .708.708L8 2.207l5.646 5.647a.5.5 0 0 0 .708-.708l-6-6z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+    </div>
+
+    <div class="manage-content">
+      <h1 class="page-title">管理声音设备</h1>
+      <p class="page-description">下面是你所有设备的列表。选择一个想要启用或禁用的设备。</p>
+
+      <!-- 输出设备 -->
+      <div class="device-section">
+        <h3 class="section-title">输出设备</h3>
+        <div class="device-list">
+          <div
+            v-for="device in outputDevices"
+            :key="device.id"
+            class="device-item"
+            :class="{ selected: device.isDefault }"
+            @click="selectOutputDevice(device.id)"
+          >
+            <div class="device-info">
+              <div class="device-icon">
+                <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+                  <rect x="4" y="8" width="24" height="16" rx="2" fill="#666" />
+                  <circle cx="16" cy="16" r="4" fill="#333" />
+                  <circle cx="16" cy="16" r="2" fill="#999" />
+                </svg>
+              </div>
+              <div class="device-details">
+                <div class="device-name">{{ device.name }}</div>
+                <div class="device-type">{{ device.type }}</div>
+              </div>
+            </div>
+            <div class="device-status" v-if="device.isDefault">
+              <span class="default-indicator">默认</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 输入设备 -->
+      <div class="device-section">
+        <h3 class="section-title">输入设备</h3>
+        <div class="device-list">
+          <div
+            v-for="device in inputDevices"
+            :key="device.id"
+            class="device-item"
+            :class="{ selected: device.isDefault }"
+            @click="selectInputDevice(device.id)"
+          >
+            <div class="device-info">
+              <div class="device-icon">
+                <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+                  <path
+                    d="M16 6C13.8 6 12 7.8 12 10V16C12 18.2 13.8 20 16 20C18.2 20 20 18.2 20 16V10C20 7.8 18.2 6 16 6Z"
+                    fill="#666"
+                  />
+                  <path
+                    d="M10 16C10 16.6 10.4 17 11 17C11.6 17 12 16.6 12 16C12 13.2 14.2 11 16 11C17.8 11 20 13.2 20 16C20 16.6 20.4 17 21 17C21.6 17 22 16.6 22 16C22 12.1 18.9 9 16 9C13.1 9 10 12.1 10 16Z"
+                    fill="#666"
+                  />
+                  <path
+                    d="M16 23C16.6 23 17 23.4 17 24V26C17 26.6 16.6 27 16 27C15.4 27 15 26.6 15 26V24C15 23.4 15.4 23 16 23Z"
+                    fill="#666"
+                  />
+                </svg>
+              </div>
+              <div class="device-details">
+                <div class="device-name">{{ device.name }}</div>
+                <div class="device-type">{{ device.type }}</div>
+              </div>
+            </div>
+            <div class="device-status" v-if="device.isDefault">
+              <span class="default-indicator">默认</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 定义emit
+defineEmits<{
+  back: []
+}>()
+
+// 设备数据接口
+interface AudioDevice {
+  id: string
+  name: string
+  type: string
+  isDefault: boolean
+  isEnabled: boolean
+}
+
+// 响应式数据
+const outputDevices = ref<AudioDevice[]>([
+  {
+    id: 'speaker-1',
+    name: '扬声器',
+    type: 'High Definition Audio Device',
+    isDefault: true,
+    isEnabled: true
+  },
+  {
+    id: 'headphones-1',
+    name: '耳机',
+    type: 'Bluetooth Audio',
+    isDefault: false,
+    isEnabled: true
+  },
+  {
+    id: 'bluetooth-speaker',
+    name: '蓝牙音响',
+    type: 'Bluetooth Audio Device',
+    isDefault: false,
+    isEnabled: false
+  }
+])
+
+const inputDevices = ref<AudioDevice[]>([
+  {
+    id: 'microphone-1',
+    name: 'Microphone',
+    type: 'High Definition Audio Device',
+    isDefault: true,
+    isEnabled: true
+  },
+  {
+    id: 'line-in',
+    name: '线路输入',
+    type: 'Audio Input Device',
+    isDefault: false,
+    isEnabled: true
+  },
+  {
+    id: 'bluetooth-mic',
+    name: '蓝牙麦克风',
+    type: 'Bluetooth Audio Device',
+    isDefault: false,
+    isEnabled: false
+  }
+])
+
+// 方法
+const selectOutputDevice = (deviceId: string) => {
+  // 设置新的默认输出设备
+  outputDevices.value.forEach((device) => {
+    device.isDefault = device.id === deviceId
+  })
+  console.log('选择输出设备:', deviceId)
+}
+
+const selectInputDevice = (deviceId: string) => {
+  // 设置新的默认输入设备
+  inputDevices.value.forEach((device) => {
+    device.isDefault = device.id === deviceId
+  })
+  console.log('选择输入设备:', deviceId)
+}
+</script>
+
+<style scoped>
+.manage-devices {
+  padding: 20px;
+  background: #ffffff;
+  min-height: 600px;
+}
+
+.manage-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e1e1e1;
+}
+
+.back-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  padding: 4px 8px;
+}
+
+.back-button:hover {
+  background: #f3f2f1;
+  border-radius: 4px;
+}
+
+.home-icon {
+  padding: 8px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.home-icon:hover {
+  background: #f3f2f1;
+}
+
+.manage-content {
+  max-width: 800px;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: 300;
+  color: #323130;
+  margin: 0 0 12px 0;
+}
+
+.page-description {
+  font-size: 14px;
+  color: #605e5c;
+  margin: 0 0 32px 0;
+  line-height: 1.4;
+}
+
+.device-section {
+  margin-bottom: 32px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.device-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.device-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border: 1px solid #e1e1e1;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.device-item:hover {
+  background: #f8f9fa;
+  border-color: #c8c6c4;
+}
+
+.device-item.selected {
+  background: #f3f8ff;
+  border-color: #0078d4;
+}
+
+.device-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.device-icon {
+  flex-shrink: 0;
+}
+
+.device-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.device-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #323130;
+}
+
+.device-type {
+  font-size: 14px;
+  color: #605e5c;
+}
+
+.device-status {
+  flex-shrink: 0;
+}
+
+.default-indicator {
+  padding: 4px 12px;
+  background: #e1f5fe;
+  color: #0078d4;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .manage-devices {
+    padding: 16px;
+  }
+
+  .device-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .device-info {
+    width: 100%;
+  }
+
+  .device-status {
+    align-self: flex-start;
+  }
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/MicrophoneDeviceProperties.vue b/src/components/WindowsSystemSetting/components/MicrophoneDeviceProperties.vue
new file mode 100644
index 0000000..70925dd
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/MicrophoneDeviceProperties.vue
@@ -0,0 +1,388 @@
+<template>
+  <div class="device-properties">
+    <div class="properties-header">
+      <button class="back-button" @click="$emit('back')">
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <path
+            d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
+            fill="currentColor"
+          />
+        </svg>
+        设置
+      </button>
+      <div class="home-icon" @click="$emit('back')">
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <path
+            d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 .708.708L8 2.207l5.646 5.647a.5.5 0 0 0 .708-.708l-6-6z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+    </div>
+
+    <div class="properties-content">
+      <div class="device-icon-section">
+        <div class="device-icon">
+          <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+            <path
+              d="M24 8C20.7 8 18 10.7 18 14V20C18 23.3 20.7 26 24 26C27.3 26 30 23.3 30 20V14C30 10.7 27.3 8 24 8Z"
+              fill="#666"
+            />
+            <path
+              d="M16 20C16 20.6 16.4 21 17 21C17.6 21 18 20.6 18 20C18 16.1 20.9 13 24 13C27.1 13 30 16.1 30 20C30 20.6 30.4 21 31 21C31.6 21 32 20.6 32 20C32 15 28 11 24 11C20 11 16 15 16 20Z"
+              fill="#666"
+            />
+            <path
+              d="M24 29C24.6 29 25 29.4 25 30V36C25 36.6 24.6 37 24 37C23.4 37 23 36.6 23 36V30C23 29.4 23.4 29 24 29Z"
+              fill="#666"
+            />
+          </svg>
+        </div>
+        <h1 class="page-title">设备属性</h1>
+      </div>
+
+      <div class="device-info">
+        <div class="device-name-section">
+          <input
+            type="text"
+            v-model="deviceName"
+            class="device-name-input"
+            placeholder="Microphone"
+          />
+          <button class="clear-button" @click="clearDeviceName">×</button>
+          <button class="rename-button">重命名</button>
+        </div>
+
+        <div class="device-status">
+          <label class="checkbox-container">
+            <input type="checkbox" v-model="isDisabled" />
+            <span class="checkmark"></span>
+            禁用
+          </label>
+        </div>
+
+        <div class="audio-section">
+          <h3 class="section-title">声音</h3>
+
+          <div class="volume-control">
+            <div class="volume-section">
+              <div class="volume-icon">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="#666">
+                  <path
+                    d="M10 4C8.3 4 7 5.3 7 7V9C7 10.7 8.3 12 10 12C11.7 12 13 10.7 13 9V7C13 5.3 11.7 4 10 4Z"
+                  />
+                  <path
+                    d="M6 9C6 9.3 6.2 9.5 6.5 9.5C6.8 9.5 7 9.3 7 9C7 7.3 8.3 6 10 6C11.7 6 13 7.3 13 9C13 9.3 13.2 9.5 13.5 9.5C13.8 9.5 14 9.3 14 9C14 6.8 12.2 5 10 5C7.8 5 6 6.8 6 9Z"
+                  />
+                </svg>
+              </div>
+              <div class="volume-slider-container">
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  v-model="microphoneVolume"
+                  class="volume-slider"
+                />
+                <span class="volume-value">{{ microphoneVolume }}</span>
+              </div>
+            </div>
+            <button class="test-button" @click="testMicrophone">测试</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 定义emit
+defineEmits<{
+  back: []
+}>()
+
+// 响应式数据
+const deviceName = ref('Microphone')
+const isDisabled = ref(false)
+const microphoneVolume = ref(95)
+
+// 方法
+const clearDeviceName = () => {
+  deviceName.value = ''
+}
+
+const testMicrophone = () => {
+  console.log('测试麦克风')
+}
+</script>
+
+<style scoped>
+.device-properties {
+  padding: 20px;
+  background: #ffffff;
+  min-height: 600px;
+}
+
+.properties-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e1e1e1;
+}
+
+.back-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  padding: 4px 8px;
+}
+
+.back-button:hover {
+  background: #f3f2f1;
+  border-radius: 4px;
+}
+
+.home-icon {
+  padding: 8px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.home-icon:hover {
+  background: #f3f2f1;
+}
+
+.properties-content {
+  max-width: 600px;
+}
+
+.device-icon-section {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.device-icon {
+  flex-shrink: 0;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: 300;
+  color: #323130;
+  margin: 0;
+}
+
+.device-info {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.device-name-section {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.device-name-input {
+  flex: 1;
+  max-width: 300px;
+  padding: 8px 12px;
+  border: 1px solid #d1d1d1;
+  border-radius: 4px;
+  font-size: 14px;
+  background: #ffffff;
+}
+
+.device-name-input:focus {
+  outline: none;
+  border-color: #0078d4;
+  box-shadow: 0 0 0 1px #0078d4;
+}
+
+.clear-button {
+  width: 24px;
+  height: 24px;
+  border: 1px solid #d1d1d1;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #666;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clear-button:hover {
+  background: #f3f2f1;
+}
+
+.rename-button {
+  padding: 6px 16px;
+  border: 1px solid #d1d1d1;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #323130;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.rename-button:hover {
+  background: #f3f2f1;
+  border-color: #c8c6c4;
+}
+
+.device-status {
+  display: flex;
+  align-items: center;
+}
+
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+}
+
+.checkbox-container input[type='checkbox'] {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+}
+
+.audio-section {
+  border-top: 1px solid #e1e1e1;
+  padding-top: 24px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 20px 0;
+}
+
+.volume-control {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.volume-section {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.volume-icon {
+  flex-shrink: 0;
+}
+
+.volume-slider-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  max-width: 300px;
+}
+
+.volume-slider {
+  flex: 1;
+  height: 4px;
+  background: #e1e1e1;
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+
+.volume-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #0078d4;
+  cursor: pointer;
+}
+
+.volume-slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #0078d4;
+  cursor: pointer;
+  border: none;
+}
+
+.volume-value {
+  font-size: 14px;
+  color: #323130;
+  min-width: 24px;
+  text-align: center;
+}
+
+.test-button {
+  padding: 6px 16px;
+  border: 1px solid #d1d1d1;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #323130;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.test-button:hover {
+  background: #f3f2f1;
+  border-color: #c8c6c4;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .device-properties {
+    padding: 16px;
+  }
+
+  .device-icon-section {
+    flex-direction: column;
+    text-align: center;
+    gap: 12px;
+  }
+
+  .device-name-section {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+
+  .device-name-input {
+    max-width: none;
+  }
+
+  .volume-control {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .volume-slider-container {
+    max-width: none;
+  }
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/MultitaskingDetail.vue b/src/components/WindowsSystemSetting/components/MultitaskingDetail.vue
new file mode 100644
index 0000000..c240ec6
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/MultitaskingDetail.vue
@@ -0,0 +1,410 @@
+<template>
+  <div class="multitasking-detail">
+    <!-- 贴靠窗口提示信息 -->
+    <div class="section-group">
+      <div class="snap-info">
+        <div class="info-text">
+          <span class="highlight-text">*其中某些设置由组织隐藏或管理。</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 使用多个窗口 -->
+    <div class="section-group">
+      <div class="multiple-windows">
+        <h3 class="section-title">使用多个窗口</h3>
+        <div class="section-description">
+          将窗口拖到屏幕的边缘或角落，它们会自动调整大小以形成完美的并排排列。
+        </div>
+
+        <!-- 贴靠窗口开关 -->
+        <div class="setting-group">
+          <div class="setting-title">贴靠窗口</div>
+          <div class="setting-item">
+            <div class="toggle-container">
+              <label class="toggle-switch">
+                <input type="checkbox" v-model="snapWindows" @change="updateSnapWindows" />
+                <span class="toggle-slider"></span>
+              </label>
+              <span class="toggle-label">{{ snapWindows ? '开' : '关' }}</span>
+            </div>
+          </div>
+
+          <!-- 贴靠窗口选项 -->
+          <div class="snap-options" v-if="snapWindows">
+            <div class="option-item">
+              <label class="checkbox-container">
+                <input
+                  type="checkbox"
+                  v-model="autoAdjustWindows"
+                  @change="updateAutoAdjustWindows"
+                />
+                <span class="checkmark"></span>
+                <span class="checkbox-label">贴靠窗口时自动调整窗口的大小，填满可用空间</span>
+              </label>
+            </div>
+
+            <div class="option-item">
+              <label class="checkbox-container">
+                <input type="checkbox" v-model="showSnapAssist" @change="updateShowSnapAssist" />
+                <span class="checkmark"></span>
+                <span class="checkbox-label">将窗口对齐时，显示能够在其旁边对齐的内容</span>
+              </label>
+            </div>
+
+            <div class="option-item">
+              <label class="checkbox-container">
+                <input
+                  type="checkbox"
+                  v-model="adjustOtherWindows"
+                  @change="updateAdjustOtherWindows"
+                />
+                <span class="checkmark"></span>
+                <span class="checkbox-label"
+                  >当我调整某个贴靠窗口的大小时，也调整任何相邻贴靠窗口的大小</span
+                >
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 时间线 -->
+    <div class="section-group">
+      <div class="timeline-settings">
+        <h3 class="section-title">时间线</h3>
+
+        <div class="setting-item">
+          <div class="setting-info">
+            <div class="setting-title">在时间线中显示建议</div>
+          </div>
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input
+                type="checkbox"
+                v-model="showTimelineSuggestions"
+                @change="updateTimelineSuggestions"
+              />
+              <span class="toggle-slider"></span>
+            </label>
+            <span class="toggle-label">{{ showTimelineSuggestions ? '开' : '关' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 虚拟桌面 -->
+    <div class="section-group">
+      <div class="virtual-desktop-settings">
+        <h3 class="section-title">虚拟桌面</h3>
+
+        <div class="setting-group">
+          <div class="setting-info">
+            <div class="setting-title">在任务栏上，显示打开的窗口</div>
+          </div>
+          <div class="dropdown-container">
+            <select
+              v-model="taskbarWindowDisplay"
+              class="setting-select"
+              @change="updateTaskbarDisplay"
+            >
+              <option value="current">仅限我正在使用的桌面</option>
+              <option value="all">所有桌面</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { sendMultitaskingMsg } from '../index'
+
+// 多任务设置状态
+const snapWindows = ref(true)
+const autoAdjustWindows = ref(true)
+const showSnapAssist = ref(true)
+const adjustOtherWindows = ref(true)
+const showTimelineSuggestions = ref(false)
+const taskbarWindowDisplay = ref('current')
+
+// 监听设置变化
+watch(snapWindows, (newVal) => {
+  sendMultitaskingMsg('贴靠窗口', 'snapWindows', newVal)
+})
+
+watch(autoAdjustWindows, (newVal) => {
+  sendMultitaskingMsg('自动调整窗口大小', 'autoAdjustWindows', newVal)
+})
+
+watch(showSnapAssist, (newVal) => {
+  sendMultitaskingMsg('显示贴靠助手', 'showSnapAssist', newVal)
+})
+
+watch(adjustOtherWindows, (newVal) => {
+  sendMultitaskingMsg('调整相邻窗口', 'adjustOtherWindows', newVal)
+})
+
+watch(showTimelineSuggestions, (newVal) => {
+  sendMultitaskingMsg('时间线建议', 'showTimelineSuggestions', newVal)
+})
+
+watch(taskbarWindowDisplay, (newVal) => {
+  sendMultitaskingMsg('任务栏窗口显示', 'taskbarWindowDisplay', newVal)
+})
+
+// 事件处理函数
+const updateSnapWindows = () => {
+  sendMultitaskingMsg('贴靠窗口更新', 'action', snapWindows.value ? '开启' : '关闭')
+  console.log('贴靠窗口设置:', snapWindows.value ? '开启' : '关闭')
+}
+
+const updateAutoAdjustWindows = () => {
+  sendMultitaskingMsg('自动调整窗口更新', 'action', autoAdjustWindows.value)
+  console.log('自动调整窗口大小:', autoAdjustWindows.value)
+}
+
+const updateShowSnapAssist = () => {
+  sendMultitaskingMsg('贴靠助手更新', 'action', showSnapAssist.value)
+  console.log('显示贴靠建议:', showSnapAssist.value)
+}
+
+const updateAdjustOtherWindows = () => {
+  sendMultitaskingMsg('相邻窗口调整更新', 'action', adjustOtherWindows.value)
+  console.log('调整相邻窗口:', adjustOtherWindows.value)
+}
+
+const updateTimelineSuggestions = () => {
+  sendMultitaskingMsg('时间线建议更新', 'action', showTimelineSuggestions.value ? '开启' : '关闭')
+  console.log('时间线建议:', showTimelineSuggestions.value ? '开启' : '关闭')
+}
+
+const updateTaskbarDisplay = () => {
+  sendMultitaskingMsg('任务栏显示更新', 'action', taskbarWindowDisplay.value)
+  console.log('任务栏窗口显示:', taskbarWindowDisplay.value)
+}
+</script>
+
+<style scoped>
+.multitasking-detail {
+  background: #ffffff;
+}
+
+.page-header {
+  padding: 20px 24px 16px 24px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 300;
+  color: #323130;
+}
+
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+  padding: 20px 24px;
+}
+
+.section-group:last-child {
+  border-bottom: none;
+}
+
+.section-title {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  font-weight: 400;
+  color: #323130;
+}
+
+.section-description {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.5;
+  margin-bottom: 20px;
+}
+
+/* 提示信息 */
+.snap-info {
+  margin-bottom: 10px;
+}
+
+.info-text {
+  font-size: 14px;
+}
+
+.highlight-text {
+  color: #d13438;
+  font-weight: 400;
+}
+
+/* 设置组 */
+.setting-group {
+  margin-bottom: 20px;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.setting-item:last-child {
+  margin-bottom: 0;
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-title {
+  font-size: 16px;
+  color: #323130;
+  margin-bottom: 8px;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 20px;
+  transition: 0.4s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: '';
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.4s;
+}
+
+input:checked + .toggle-slider {
+  background-color: #0078d4;
+}
+
+input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+  min-width: 20px;
+}
+
+/* 贴靠选项 */
+.snap-options {
+  margin-top: 16px;
+  padding-left: 20px;
+}
+
+.option-item {
+  margin-bottom: 12px;
+}
+
+.option-item:last-child {
+  margin-bottom: 0;
+}
+
+.checkbox-container {
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+  font-size: 14px;
+  color: #323130;
+  line-height: 1.4;
+}
+
+.checkbox-container input {
+  display: none;
+}
+
+.checkmark {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #0078d4;
+  border-radius: 2px;
+  margin-right: 8px;
+  margin-top: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff;
+  flex-shrink: 0;
+}
+
+.checkbox-container input:checked + .checkmark {
+  background-color: #0078d4;
+}
+
+.checkbox-container input:checked + .checkmark:after {
+  content: '✓';
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.checkbox-label {
+  flex: 1;
+}
+
+/* 下拉菜单 */
+.dropdown-container {
+  margin-top: 12px;
+}
+
+.setting-select {
+  width: 100%;
+  max-width: 300px;
+  padding: 8px 12px;
+  border: 1px solid #d1d1d1;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  background-color: #f3f2f1;
+  cursor: pointer;
+}
+
+.setting-select:focus {
+  outline: 2px solid #0078d4;
+  border-color: #0078d4;
+}
+
+.setting-select:hover {
+  border-color: #a6a6a6;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/NetworkDetail.vue b/src/components/WindowsSystemSetting/components/NetworkDetail.vue
new file mode 100644
index 0000000..ba7c28e
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/NetworkDetail.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="network-detail">
+    <!-- 网络状态详细设置 -->
+    <div v-if="activeNav === 'status'">
+      <StatusDetail />
+    </div>
+
+    <!-- 以太网详细设置 -->
+    <div v-else-if="activeNav === 'ethernet'">
+      <EthernetDetail />
+    </div>
+
+    <!-- 拨号详细设置 -->
+    <div v-else-if="activeNav === 'dialup'">
+      <DialupDetail />
+    </div>
+
+    <!-- VPN详细设置 -->
+    <div v-else-if="activeNav === 'vpn'">
+      <VpnDetail />
+    </div>
+
+    <!-- 数据使用量详细设置 -->
+    <div v-else-if="activeNav === 'dataUsage'">
+      <DataUsageDetail />
+    </div>
+
+    <!-- 代理详细设置 -->
+    <div v-else-if="activeNav === 'proxy'">
+      <ProxyDetail />
+    </div>
+
+    <!-- 网络和Internet主页 -->
+    <div v-else>
+      <div class="section-group">
+        <h3 class="section-title">状态</h3>
+        <div class="setting-item" @click="openNetworkStatus">
+          <div class="setting-info">
+            <div class="setting-name">查看网络状态和设置</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">以太网</h3>
+        <div class="setting-item" @click="openEthernetSettings">
+          <div class="setting-info">
+            <div class="setting-name">有线网络设置</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">拨号</h3>
+        <div class="setting-item" @click="openDialupSettings">
+          <div class="setting-info">
+            <div class="setting-name">设置拨号连接</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">VPN</h3>
+        <div class="setting-item" @click="openVpnSettings">
+          <div class="setting-info">
+            <div class="setting-name">添加、更改或删除 VPN</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">数据使用量</h3>
+        <div class="setting-item" @click="openDataUsage">
+          <div class="setting-info">
+            <div class="setting-name">查看数据使用量详细信息</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">代理</h3>
+        <div class="setting-item" @click="openProxySettings">
+          <div class="setting-info">
+            <div class="setting-name">使用代理服务器</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { sendNetworkMsg } from '../index'
+import StatusDetail from './network/StatusDetail.vue'
+import EthernetDetail from './network/EthernetDetail.vue'
+import DialupDetail from './network/DialupDetail.vue'
+import VpnDetail from './network/VpnDetail.vue'
+import DataUsageDetail from './network/DataUsageDetail.vue'
+import ProxyDetail from './network/ProxyDetail.vue'
+
+// 接收props
+defineProps<{
+  activeNav: string
+}>()
+
+// 事件发射器
+const emit = defineEmits<{
+  'navigate-to': [navKey: string]
+}>()
+
+const openNetworkStatus = () => {
+  sendNetworkMsg('网络状态设置', 'networkStatus', '已打开')
+  emit('navigate-to', 'status')
+}
+
+const openEthernetSettings = () => {
+  sendNetworkMsg('以太网设置', 'ethernetSettings', '已打开')
+  emit('navigate-to', 'ethernet')
+}
+
+const openDialupSettings = () => {
+  sendNetworkMsg('拨号设置', 'dialupSettings', '已打开')
+  emit('navigate-to', 'dialup')
+}
+
+const openVpnSettings = () => {
+  sendNetworkMsg('VPN设置', 'vpnSettings', '已打开')
+  emit('navigate-to', 'vpn')
+}
+
+const openDataUsage = () => {
+  sendNetworkMsg('数据使用量', 'dataUsage', '已打开')
+  emit('navigate-to', 'dataUsage')
+}
+
+const openProxySettings = () => {
+  sendNetworkMsg('代理设置', 'proxySettings', '已打开')
+  emit('navigate-to', 'proxy')
+}
+</script>
+
+<style scoped>
+.network-detail {
+  background: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.section-group:last-child {
+  border-bottom: none;
+}
+
+.section-title {
+  margin: 0;
+  padding: 16px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #0078d4;
+  background: #f8f9fa;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.setting-item:hover {
+  background-color: #f8f9fa;
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 14px;
+  font-weight: 400;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.setting-desc {
+  font-size: 12px;
+  color: #666;
+}
+
+.setting-arrow {
+  font-size: 14px;
+  color: #666;
+  margin-left: 12px;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/NightModeDetail.vue b/src/components/WindowsSystemSetting/components/NightModeDetail.vue
new file mode 100644
index 0000000..f16eb3b
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/NightModeDetail.vue
@@ -0,0 +1,428 @@
+<template>
+  <div class="night-mode-detail">
+    <!-- 返回按钮 -->
+    <div class="back-section">
+      <button class="back-button" @click="$emit('back')">
+        <span class="back-icon">←</span>
+        <span>设置</span>
+      </button>
+    </div>
+
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">
+        <span class="home-icon">🏠</span>
+        夜间模式设置
+      </h1>
+    </div>
+
+    <!-- 夜间模式说明 -->
+    <div class="description-section">
+      <p class="description">
+        屏幕发出的蓝光会影响你的睡眠质量。开启夜间模式可以减少屏幕 蓝光，提高你的睡眠质量。
+      </p>
+      <div class="help-link">
+        <a href="#" class="help-text">
+          有疑问？
+          <span class="help-link-text">获取帮助</span>
+        </a>
+      </div>
+    </div>
+
+    <!-- 立即启用按钮 -->
+    <div class="immediate-section">
+      <button class="immediate-button" @click="enableImmediately"> 立即启用 </button>
+    </div>
+
+    <!-- 强度设置 -->
+    <div class="intensity-section">
+      <h3 class="section-title">强度</h3>
+      <div class="slider-container">
+        <input type="range" min="0" max="100" v-model="intensity" class="intensity-slider" />
+        <div class="intensity-value">{{ intensity }}</div>
+      </div>
+    </div>
+
+    <!-- 计划设置 -->
+    <div class="schedule-section">
+      <h3 class="section-title">计划</h3>
+      <p class="schedule-desc">在指定时间内开启夜间模式</p>
+
+      <!-- 计划开关 -->
+      <div class="schedule-toggle">
+        <div class="toggle-info">
+          <div class="toggle-label">开</div>
+        </div>
+        <div
+          class="toggle-switch"
+          :class="{ active: scheduleEnabled }"
+          @click="scheduleEnabled = !scheduleEnabled"
+        >
+        </div>
+      </div>
+
+      <!-- 时间提示 -->
+      <div class="schedule-info">
+        <div class="schedule-tip"> 打开定位服务，在日落时开启夜间模式 </div>
+        <div class="location-link">
+          <a href="#" class="link-text">定位设置</a>
+        </div>
+      </div>
+
+      <!-- 时间选择 -->
+      <div class="time-options">
+        <div class="time-option">
+          <input type="radio" id="sunset" name="timeOption" value="sunset" v-model="timeOption" />
+          <label for="sunset">日落到日出(0:00 - 0:00)</label>
+        </div>
+
+        <div class="time-option selected">
+          <input type="radio" id="custom" name="timeOption" value="custom" v-model="timeOption" />
+          <label for="custom">设置小时</label>
+        </div>
+      </div>
+
+      <!-- 自定义时间设置 -->
+      <div class="time-inputs" v-if="timeOption === 'custom'">
+        <div class="time-input-group">
+          <label>启用</label>
+          <div class="time-input-container">
+            <input type="number" min="0" max="23" v-model="startHour" class="time-input" />
+            <span class="time-separator">:</span>
+            <input type="number" min="0" max="59" v-model="startMinute" class="time-input" />
+          </div>
+        </div>
+        <div class="time-input-group">
+          <label>关闭</label>
+          <div class="time-input-container">
+            <input type="number" min="0" max="23" v-model="startHour" class="time-input" />
+            <span class="time-separator">:</span>
+            <input type="number" min="0" max="59" v-model="startMinute" class="time-input" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 事件定义
+defineEmits(['back'])
+
+// 响应式数据
+const intensity = ref(61)
+const scheduleEnabled = ref(true)
+const timeOption = ref('custom')
+const startHour = ref(21)
+const startMinute = ref(0)
+
+// 立即启用夜间模式
+const enableImmediately = () => {
+  console.log('立即启用夜间模式')
+}
+</script>
+
+<style scoped>
+.night-mode-detail {
+  padding: 0;
+  max-width: 800px;
+  color: #323130;
+}
+
+.back-section {
+  margin-bottom: 20px;
+}
+
+.back-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  padding: 8px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.back-button:hover {
+  background: #f3f2f1;
+}
+
+.back-icon {
+  font-size: 16px;
+  color: #323130;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 32px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.home-icon {
+  font-size: 24px;
+}
+
+.description-section {
+  margin-bottom: 32px;
+}
+
+.description {
+  font-size: 14px;
+  color: #323130;
+  line-height: 1.5;
+  margin: 0 0 16px 0;
+}
+
+.help-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.help-text {
+  font-size: 14px;
+  color: #323130;
+  text-decoration: none;
+}
+
+.help-link-text {
+  color: #0078d4;
+  text-decoration: none;
+}
+
+.help-link-text:hover {
+  text-decoration: underline;
+}
+
+.immediate-section {
+  margin-bottom: 32px;
+}
+
+.immediate-button {
+  background: #f3f2f1;
+  border: 1px solid #d2d0ce;
+  padding: 10px 20px;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+}
+
+.immediate-button:hover {
+  background: #edebe9;
+}
+
+.intensity-section,
+.schedule-section {
+  margin-bottom: 40px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.slider-container {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.intensity-slider {
+  flex: 1;
+  max-width: 400px;
+  height: 4px;
+  background: #d2d0ce;
+  border-radius: 2px;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.intensity-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  background: #0078d4;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.intensity-slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  background: #0078d4;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+}
+
+.intensity-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #323130;
+  min-width: 30px;
+  text-align: center;
+}
+
+.schedule-desc {
+  font-size: 14px;
+  color: #605e5c;
+  margin: 0 0 16px 0;
+}
+
+.schedule-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.toggle-info {
+  flex: 1;
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+}
+
+.toggle-switch {
+  width: 44px;
+  height: 24px;
+  background: #d2d0ce;
+  border-radius: 12px;
+  position: relative;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.toggle-switch.active {
+  background: #0078d4;
+}
+
+.toggle-switch::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: #ffffff;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.toggle-switch.active::before {
+  transform: translateX(20px);
+}
+
+.schedule-info {
+  margin-bottom: 20px;
+}
+
+.schedule-tip {
+  font-size: 14px;
+  color: #d13438;
+  margin-bottom: 8px;
+}
+
+.location-link .link-text {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.location-link .link-text:hover {
+  text-decoration: underline;
+}
+
+.time-options {
+  margin-bottom: 20px;
+}
+
+.time-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.time-option.selected {
+  background: #f3f2f1;
+}
+
+.time-option input[type='radio'] {
+  width: 16px;
+  height: 16px;
+}
+
+.time-option label {
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  flex: 1;
+}
+
+.time-inputs {
+  background: #f9f9f9;
+  padding: 20px;
+  border-radius: 4px;
+  border-left: 4px solid #0078d4;
+}
+
+.time-input-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.time-input-group label {
+  font-size: 14px;
+  color: #323130;
+  min-width: 60px;
+}
+
+.time-input-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: white;
+  border: 1px solid #d2d0ce;
+  border-radius: 4px;
+  padding: 4px 8px;
+}
+
+.time-input {
+  width: 30px;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  color: #323130;
+  text-align: center;
+}
+
+.time-separator {
+  font-size: 14px;
+  color: #323130;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/NotificationDetail.vue b/src/components/WindowsSystemSetting/components/NotificationDetail.vue
new file mode 100644
index 0000000..0f1fd59
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/NotificationDetail.vue
@@ -0,0 +1,551 @@
+<template>
+  <div class="notification-detail">
+    <!-- 通知和操作详细设置页面 -->
+    <div class="notification-main">
+      <!-- 组策略警告 -->
+      <div class="policy-warning">
+        <span class="warning-text">*其中某些设置已由组织或跨域管理。</span>
+      </div>
+
+      <!-- 快速操作 -->
+      <div class="quick-actions-section">
+        <h3 class="subsection-title">快速操作</h3>
+        <p class="description">你可以直接在操作中心中添加、删除或重新排列快速操作。</p>
+        <button class="edit-quick-actions-btn" @click="editQuickActions">编辑快速操作</button>
+      </div>
+
+      <!-- 通知 -->
+      <div class="notifications-section">
+        <h3 class="subsection-title">通知</h3>
+
+        <div class="notification-setting">
+          <div class="setting-item-large">
+            <div class="setting-info">
+              <div class="setting-name">获取来自应用和其他发送者的通知</div>
+            </div>
+            <div class="toggle-container">
+              <label class="toggle-switch">
+                <input
+                  type="checkbox"
+                  v-model="notificationsEnabled"
+                  @change="toggleNotifications"
+                />
+                <span class="slider"></span>
+              </label>
+              <span class="toggle-text">{{ notificationsEnabled ? '开' : '关' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 专注助手提示 -->
+        <div class="focus-assist-tip">
+          <p class="tip-text">若要控制或取或拒收通知的时间，请试用专注助手。</p>
+          <button class="link-button" @click="openFocusAssist">专注助手设置</button>
+        </div>
+
+        <!-- 通知选项 -->
+        <div class="notification-options" v-if="notificationsEnabled">
+          <div class="option-item">
+            <label class="checkbox-container">
+              <input type="checkbox" v-model="showOnLockScreen" />
+              <span class="checkmark"></span>
+              <span class="option-text">在锁屏界面上显示通知</span>
+            </label>
+          </div>
+
+          <div class="option-item">
+            <label class="checkbox-container">
+              <input type="checkbox" v-model="showRemindersAndVoip" />
+              <span class="checkmark"></span>
+              <span class="option-text">在锁屏界面上显示提醒和 VoIP 来电</span>
+            </label>
+          </div>
+
+          <div class="option-item">
+            <label class="checkbox-container">
+              <input type="checkbox" v-model="playNotificationSounds" />
+              <span class="checkmark"></span>
+              <span class="option-text">允许通知播放声音</span>
+            </label>
+          </div>
+
+          <div class="option-item">
+            <label class="checkbox-container">
+              <input type="checkbox" v-model="showWelcomeExperience" />
+              <span class="checkmark"></span>
+              <span class="option-text"
+                >更新后向我显示"欢迎 Windows"体验，并在我登录时突出显示更新内容和建议的内容</span
+              >
+            </label>
+          </div>
+
+          <div class="option-item">
+            <label class="checkbox-container">
+              <input type="checkbox" v-model="showWindowsTips" />
+              <span class="checkmark"></span>
+              <span class="option-text">在使用 Windows 时获取提示、技巧和建议</span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <!-- 获取来自这些发送者的通知 -->
+      <div class="senders-section" v-if="notificationsEnabled">
+        <h3 class="subsection-title">获取来自这些发送者的通知</h3>
+
+        <div class="sender-description">
+          <p
+            >选择发送者可查看更多设置。发送者还可能有其自己的通知设置，如果某些这样，打开发送者即可更改这些设置。</p
+          >
+        </div>
+
+        <div class="sort-section">
+          <div class="sort-label">排序依据：<strong>最新</strong></div>
+        </div>
+
+        <div class="sender-list">
+          <div
+            class="sender-item"
+            v-for="sender in senders"
+            :key="sender.id"
+            @click="openSenderSettings(sender.id)"
+          >
+            <div class="sender-icon">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="white">
+                <path
+                  d="M10.35 0a1 1 0 0 0-1 1v.68c-.676.078-1.33.24-1.945.479l-.48-.832a1 1 0 1 0-1.73 1l.483.835c-.544.422-1.035.925-1.456 1.47l-.835-.483a1 1 0 0 0-1 1.732l.832.48c-.24.614-.401 1.269-.479 1.945H1a1 1 0 1 0 0 2h.68c.078.676.24 1.33.479 1.945l-.832.48a1 1 0 1 0 1 1.732l.835-.483c.421.545.912 1.048 1.456 1.47l-.483.835a1 1 0 1 0 1.732 1l.48-.832c.614.24 1.269.401 1.945.479V19a1 1 0 1 0 2 0v-.68c.676-.078 1.33-.24 1.945-.479l.48.832a1 1 0 1 0 1.73-1l-.483-.835c.544-.422 1.035-.925 1.456-1.47l.835.483a1 1 0 0 0 1-1.732l-.832-.48c.24-.614.401-1.269.479-1.945H19a1 1 0 1 0 0-2h-.68c-.078-.676-.24-1.33-.479-1.945l.832-.48a1 1 0 1 0-1-1.732l-.835.483c-.421-.545-.912-1.048-1.456-1.47l.483-.835a1 1 0 1 0-1.732-1l-.48.832c-.614-.24-1.269-.401-1.945-.479V1a1 1 0 0 0-1-1zM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+                />
+              </svg>
+            </div>
+            <div class="sender-info">
+              <div class="sender-name">{{ sender.name }}</div>
+              <div class="sender-desc">{{ sender.description }}</div>
+            </div>
+            <div class="sender-toggle">
+              <label class="toggle-switch">
+                <input
+                  type="checkbox"
+                  v-model="sender.enabled"
+                  @change="toggleSender(sender.id)"
+                  @click.stop
+                />
+                <span class="slider"></span>
+              </label>
+              <span class="toggle-text">{{ sender.enabled ? '开' : '关' }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { sendSystemMsg } from '../index'
+
+// 响应式数据
+const notificationsEnabled = ref(true)
+const showOnLockScreen = ref(true)
+const showRemindersAndVoip = ref(true)
+const playNotificationSounds = ref(true)
+const showWelcomeExperience = ref(false)
+const showWindowsTips = ref(false)
+
+// 监听通知设置变化
+watch(notificationsEnabled, (newValue) => {
+  sendSystemMsg('通知总开关', 'notificationsEnabled', newValue)
+})
+
+watch(showOnLockScreen, (newValue) => {
+  sendSystemMsg('锁屏界面显示通知', 'showOnLockScreen', newValue)
+})
+
+watch(showRemindersAndVoip, (newValue) => {
+  sendSystemMsg('锁屏界面显示提醒和VoIP来电', 'showRemindersAndVoip', newValue)
+})
+
+watch(playNotificationSounds, (newValue) => {
+  sendSystemMsg('通知播放声音', 'playNotificationSounds', newValue)
+})
+
+watch(showWelcomeExperience, (newValue) => {
+  sendSystemMsg('显示欢迎Windows体验', 'showWelcomeExperience', newValue)
+})
+
+watch(showWindowsTips, (newValue) => {
+  sendSystemMsg('获取Windows提示和建议', 'showWindowsTips', newValue)
+})
+
+// 发送者数据接口
+interface NotificationSender {
+  id: string
+  name: string
+  description: string
+  icon: string
+  enabled: boolean
+}
+
+// 发送者列表数据
+const senders = ref<NotificationSender[]>([
+  {
+    id: 'settings',
+    name: '设置',
+    description: '开机照片、声音',
+    icon: '',
+    enabled: true
+  }
+])
+
+// 方法
+const toggleNotifications = () => {
+  console.log('通知总开关:', notificationsEnabled.value)
+}
+
+const editQuickActions = () => {
+  sendSystemMsg('编辑快速操作', 'editQuickActions', '已打开')
+  console.log('编辑快速操作')
+}
+
+const openFocusAssist = () => {
+  sendSystemMsg('专注助手设置', 'focusAssistSettings', '已打开')
+  console.log('打开专注助手设置')
+}
+
+const toggleSender = (senderId: string) => {
+  const sender = senders.value.find((s) => s.id === senderId)
+  if (sender) {
+    sendSystemMsg(`通知发送者-${sender.name}`, `sender_${senderId}`, sender.enabled)
+    console.log(`切换发送者 ${sender.name}:`, sender.enabled)
+  }
+}
+
+const openSenderSettings = (senderId: string) => {
+  const sender = senders.value.find((s) => s.id === senderId)
+  if (sender) {
+    sendSystemMsg(`发送者设置-${sender.name}`, `senderSettings_${senderId}`, '已打开')
+  }
+  console.log('打开发送者设置:', senderId)
+}
+</script>
+
+<style scoped>
+.notification-detail {
+  padding: 20px;
+  background: #ffffff;
+  min-height: 600px;
+}
+
+.notification-main {
+  max-width: 800px;
+}
+
+.page-title {
+  font-size: 32px;
+  font-weight: 300;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.policy-warning {
+  margin-bottom: 24px;
+}
+
+.warning-text {
+  color: #d13438;
+  font-size: 14px;
+}
+
+/* 快速操作部分 */
+.quick-actions-section {
+  margin-bottom: 32px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid #e1e1e1;
+}
+
+.subsection-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 12px 0;
+}
+
+.description {
+  font-size: 14px;
+  color: #605e5c;
+  margin: 0 0 16px 0;
+  line-height: 1.4;
+}
+
+.edit-quick-actions-btn {
+  color: #0078d4;
+  background: none;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: underline;
+  padding: 0;
+}
+
+.edit-quick-actions-btn:hover {
+  text-decoration: none;
+}
+
+/* 通知部分 */
+.notifications-section {
+  margin-bottom: 32px;
+}
+
+.notification-setting {
+  margin-bottom: 16px;
+}
+
+.setting-item-large {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 16px;
+  font-weight: 400;
+  color: #323130;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.4s;
+  border-radius: 24px;
+}
+
+.slider:before {
+  position: absolute;
+  content: '';
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #0078d4;
+}
+
+input:checked + .slider:before {
+  transform: translateX(20px);
+}
+
+.toggle-text {
+  font-size: 14px;
+  color: #323130;
+  min-width: 16px;
+}
+
+/* 专注助手提示 */
+.focus-assist-tip {
+  background: #f8f9fa;
+  padding: 16px;
+  border-radius: 8px;
+  margin: 16px 0;
+}
+
+.tip-text {
+  font-size: 14px;
+  color: #323130;
+  margin: 0 0 8px 0;
+}
+
+.link-button {
+  color: #0078d4;
+  background: none;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: underline;
+  padding: 0;
+}
+
+.link-button:hover {
+  text-decoration: none;
+}
+
+/* 通知选项 */
+.notification-options {
+  margin-top: 24px;
+}
+
+.option-item {
+  margin-bottom: 16px;
+}
+
+.checkbox-container {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  line-height: 1.4;
+}
+
+.checkbox-container input[type='checkbox'] {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.option-text {
+  flex: 1;
+}
+
+/* 发送者部分 */
+.senders-section {
+  margin-top: 32px;
+  padding-top: 24px;
+  border-top: 1px solid #e1e1e1;
+}
+
+.sender-description {
+  margin-bottom: 20px;
+}
+
+.sender-description p {
+  font-size: 14px;
+  color: #605e5c;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.sort-section {
+  margin-bottom: 16px;
+}
+
+.sort-label {
+  font-size: 14px;
+  color: #323130;
+}
+
+.sender-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.sender-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border: 1px solid #e1e1e1;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.sender-item:hover {
+  background: #f8f9fa;
+  border-color: #c8c6c4;
+}
+
+.sender-icon {
+  width: 32px;
+  height: 32px;
+  margin-right: 16px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #0078d4;
+  border-radius: 4px;
+}
+
+.sender-icon img {
+  width: 20px;
+  height: 20px;
+}
+
+.sender-info {
+  flex: 1;
+}
+
+.sender-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #323130;
+  margin-bottom: 4px;
+}
+
+.sender-desc {
+  font-size: 14px;
+  color: #605e5c;
+}
+
+.sender-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 16px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .notification-detail {
+    padding: 16px;
+  }
+
+  .setting-item-large {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .toggle-container {
+    align-self: flex-start;
+  }
+
+  .sender-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .sender-toggle {
+    margin-left: 0;
+    align-self: flex-start;
+  }
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/PersonalizationDetail.vue b/src/components/WindowsSystemSetting/components/PersonalizationDetail.vue
new file mode 100644
index 0000000..dfae163
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/PersonalizationDetail.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="personalization-detail">
+    <!-- 使用子组件 -->
+    <BackgroundDetail v-if="activeNav === 'background'" />
+    <ColorsDetail v-if="activeNav === 'colors'" />
+    <LockScreenDetail v-if="activeNav === 'lock-screen'" />
+    <ThemesDetail v-if="activeNav === 'themes'" />
+    <FontsDetail v-if="activeNav === 'fonts'" />
+    <StartDetail v-if="activeNav === 'start'" />
+    <TaskbarDetail v-if="activeNav === 'taskbar'" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import BackgroundDetail from './personalization/BackgroundDetail.vue'
+import ColorsDetail from './personalization/ColorsDetail.vue'
+import LockScreenDetail from './personalization/LockScreenDetail.vue'
+import ThemesDetail from './personalization/ThemesDetail.vue'
+import FontsDetail from './personalization/FontsDetail.vue'
+import StartDetail from './personalization/StartDetail.vue'
+import TaskbarDetail from './personalization/TaskbarDetail.vue'
+
+defineProps<{
+  activeNav: string
+}>()
+</script>
+
+<style scoped>
+.personalization-detail {
+  max-width: 800px;
+  padding: 0;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/PhoneDetail.vue b/src/components/WindowsSystemSetting/components/PhoneDetail.vue
new file mode 100644
index 0000000..98cb9a8
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/PhoneDetail.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="phone-detail">
+    <div class="section-group">
+      <h3 class="section-title">连接你的手机</h3>
+      <div class="setting-item" @click="connectPhone">
+        <div class="setting-info">
+          <div class="setting-name">将手机链接到电脑</div>
+          <div class="setting-desc">在电脑上接收短信、照片等内容</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+
+    <div class="section-group">
+      <h3 class="section-title">Android 设备</h3>
+      <div class="setting-item" @click="androidSettings">
+        <div class="setting-info">
+          <div class="setting-name">Android 设备管理</div>
+          <div class="setting-desc">管理已连接的 Android 设备</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+
+    <div class="section-group">
+      <h3 class="section-title">iPhone</h3>
+      <div class="setting-item" @click="iphoneSettings">
+        <div class="setting-info">
+          <div class="setting-name">iPhone 设备管理</div>
+          <div class="setting-desc">管理已连接的 iPhone 设备</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+
+    <div class="section-group">
+      <h3 class="section-title">同步设置</h3>
+      <div class="setting-item" @click="syncSettings">
+        <div class="setting-info">
+          <div class="setting-name">跨设备同步</div>
+          <div class="setting-desc">在设备间同步通知、消息和应用</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { sendPhoneMsg } from '../index'
+
+interface Props {
+  activeNav: string
+}
+
+defineProps<Props>()
+
+const connectPhone = () => {
+  sendPhoneMsg('连接手机', 'action', '连接手机到电脑')
+  console.log('连接手机')
+}
+
+const androidSettings = () => {
+  sendPhoneMsg('Android设置', 'action', '打开Android设备管理')
+  console.log('Android 设置')
+}
+
+const iphoneSettings = () => {
+  sendPhoneMsg('iPhone设置', 'action', '打开iPhone设备管理')
+  console.log('iPhone 设置')
+}
+
+const syncSettings = () => {
+  sendPhoneMsg('同步设置', 'action', '打开跨设备同步设置')
+  console.log('同步设置')
+}
+</script>
+
+<style scoped>
+@import '../detail.scss';
+</style>
diff --git a/src/components/WindowsSystemSetting/components/PowerSleepDetail.vue b/src/components/WindowsSystemSetting/components/PowerSleepDetail.vue
new file mode 100644
index 0000000..824e3d3
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/PowerSleepDetail.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="power-sleep-detail">
+    <!-- 电源和睡眠详细设置页面 -->
+    <div class="power-sleep-main">
+      <!-- 屏幕部分 -->
+      <div class="screen-section">
+        <h3 class="section-title">屏幕</h3>
+        <div class="setting-item">
+          <div class="setting-info">
+            <label class="setting-label">在接通电源的情况下，经过以下时间后关闭</label>
+            <select
+              v-model="screenTimeoutPlugged"
+              class="time-select"
+              @change="updateScreenTimeout"
+            >
+              <option value="never">从不</option>
+              <option value="1">1分钟</option>
+              <option value="2">2分钟</option>
+              <option value="3">3分钟</option>
+              <option value="5">5分钟</option>
+              <option value="10">10分钟</option>
+              <option value="15">15分钟</option>
+              <option value="20">20分钟</option>
+              <option value="25">25分钟</option>
+              <option value="30">30分钟</option>
+              <option value="45">45分钟</option>
+              <option value="60">1小时</option>
+              <option value="120">2小时</option>
+              <option value="180">3小时</option>
+              <option value="240">4小时</option>
+              <option value="300">5小时</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <!-- 睡眠部分 -->
+      <div class="sleep-section">
+        <h3 class="section-title">睡眠</h3>
+        <div class="setting-item">
+          <div class="setting-info">
+            <label class="setting-label"
+              >在接通电源的情况下，电脑在经过以下时间后进入睡眠状态</label
+            >
+            <select v-model="sleepTimeoutPlugged" class="time-select" @change="updateSleepTimeout">
+              <option value="never">从不</option>
+              <option value="1">1分钟</option>
+              <option value="2">2分钟</option>
+              <option value="3">3分钟</option>
+              <option value="5">5分钟</option>
+              <option value="10">10分钟</option>
+              <option value="15">15分钟</option>
+              <option value="20">20分钟</option>
+              <option value="25">25分钟</option>
+              <option value="30">30分钟</option>
+              <option value="45">45分钟</option>
+              <option value="60">1小时</option>
+              <option value="120">2小时</option>
+              <option value="180">3小时</option>
+              <option value="240">4小时</option>
+              <option value="300">5小时</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { sendSystemMsg } from '../index'
+
+// 响应式数据
+const screenTimeoutPlugged = ref('15') // 15分钟
+const screenTimeoutBattery = ref('5') // 5分钟
+const sleepTimeoutPlugged = ref('30') // 30分钟
+const sleepTimeoutBattery = ref('15') // 15分钟
+const hasBattery = ref(true) // 假设有电池（笔记本电脑）
+
+// 监听屏幕超时设置变化
+watch(screenTimeoutPlugged, (newValue) => {
+  const timeText = newValue === 'never' ? '从不' : `${newValue}分钟`
+  sendSystemMsg('屏幕超时(接通电源)', 'screenTimeoutPlugged', timeText)
+})
+
+watch(screenTimeoutBattery, (newValue) => {
+  const timeText = newValue === 'never' ? '从不' : `${newValue}分钟`
+  sendSystemMsg('屏幕超时(使用电池)', 'screenTimeoutBattery', timeText)
+})
+
+// 监听睡眠超时设置变化
+watch(sleepTimeoutPlugged, (newValue) => {
+  const timeText = newValue === 'never' ? '从不' : `${newValue}分钟`
+  sendSystemMsg('睡眠超时(接通电源)', 'sleepTimeoutPlugged', timeText)
+})
+
+watch(sleepTimeoutBattery, (newValue) => {
+  const timeText = newValue === 'never' ? '从不' : `${newValue}分钟`
+  sendSystemMsg('睡眠超时(使用电池)', 'sleepTimeoutBattery', timeText)
+})
+
+// 方法
+const updateScreenTimeout = () => {
+  console.log('更新屏幕超时设置:', {
+    plugged: screenTimeoutPlugged.value,
+    battery: screenTimeoutBattery.value
+  })
+}
+
+const updateSleepTimeout = () => {
+  console.log('更新睡眠超时设置:', {
+    plugged: sleepTimeoutPlugged.value,
+    battery: sleepTimeoutBattery.value
+  })
+}
+
+const openAdditionalPowerSettings = () => {
+  sendSystemMsg('其他电源设置', 'additionalPowerSettings', '已打开')
+  console.log('打开其他电源设置')
+}
+</script>
+
+<style scoped>
+.power-sleep-detail {
+  padding: 20px;
+  background: #ffffff;
+  min-height: 600px;
+}
+
+.power-sleep-main {
+  max-width: 800px;
+}
+
+/* 部分样式 */
+.screen-section,
+.sleep-section {
+  margin-bottom: 32px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid #e1e1e1;
+}
+
+.sleep-section {
+  border-bottom: none;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 20px 0;
+}
+
+/* 设置项样式 */
+.setting-item {
+  margin-bottom: 20px;
+}
+
+.setting-item:last-child {
+  margin-bottom: 0;
+}
+
+.setting-info {
+  width: 100%;
+}
+
+.setting-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  color: #323130;
+  margin-bottom: 8px;
+  line-height: 1.4;
+}
+
+.time-select {
+  width: 100%;
+  max-width: 200px;
+  padding: 8px 12px;
+  border: 1px solid #d1d1d1;
+  border-radius: 4px;
+  font-size: 14px;
+  background: #ffffff;
+  cursor: pointer;
+  color: #323130;
+}
+
+.time-select:focus {
+  outline: none;
+  border-color: #0078d4;
+  box-shadow: 0 0 0 1px #0078d4;
+}
+
+.time-select:hover {
+  border-color: #c8c6c4;
+}
+
+/* 相关设置 */
+.related-settings {
+  margin-top: 32px;
+  padding-top: 24px;
+  border-top: 1px solid #e1e1e1;
+}
+
+.related-links {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.related-link {
+  color: #0078d4;
+  background: none;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  text-align: left;
+  text-decoration: underline;
+  padding: 0;
+}
+
+.related-link:hover {
+  text-decoration: none;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .power-sleep-detail {
+    padding: 16px;
+  }
+
+  .time-select {
+    max-width: none;
+  }
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/PrivacyDetail.vue b/src/components/WindowsSystemSetting/components/PrivacyDetail.vue
new file mode 100644
index 0000000..154873a
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/PrivacyDetail.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="privacy-detail">
+    <div class="section-group">
+      <h3 class="section-title">常规</h3>
+      <div class="setting-item" @click="openPrivacyOptions">
+        <div class="setting-info">
+          <div class="setting-name">隐私选项</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+    <div class="section-group">
+      <h3 class="section-title">语音</h3>
+      <div class="setting-item" @click="openSpeechServices">
+        <div class="setting-info">
+          <div class="setting-name">语音服务</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+    <div class="section-group">
+      <h3 class="section-title">墨迹书写和键入个性化</h3>
+      <div class="setting-item" @click="openInkingTyping">
+        <div class="setting-info">
+          <div class="setting-name">改进墨迹书写和键入识别</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+  </div>
+  >
+</template>
+<script setup lang="ts">
+import { sendPrivacyMsg } from '../index'
+
+// 隐私选项设置
+const openPrivacyOptions = () => {
+  sendPrivacyMsg('隐私选项', 'action', '打开隐私选项设置')
+}
+
+// 语音服务设置
+const openSpeechServices = () => {
+  sendPrivacyMsg('语音服务', 'action', '打开语音服务设置')
+}
+
+// 墨迹书写和键入设置
+const openInkingTyping = () => {
+  sendPrivacyMsg('墨迹书写和键入', 'action', '打开墨迹书写和键入设置')
+}
+</script>
+<style scoped>
+.privacy-detail {
+  background: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+}
+.section-group:last-child {
+  border-bottom: none;
+}
+.section-title {
+  margin: 0;
+  padding: 16px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #0078d4;
+  background: #f8f9fa;
+}
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.setting-item:hover {
+  background-color: #f8f9fa;
+}
+.setting-info {
+  flex: 1;
+}
+.setting-name {
+  font-size: 14px;
+  font-weight: 400;
+  color: #333;
+}
+.setting-arrow {
+  font-size: 14px;
+  color: #666;
+  margin-left: 12px;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/ProjectionDetail.vue b/src/components/WindowsSystemSetting/components/ProjectionDetail.vue
new file mode 100644
index 0000000..96cd35a
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/ProjectionDetail.vue
@@ -0,0 +1,325 @@
+<template>
+  <div class="projection-detail">
+    <!-- Miracast 不支持提示 -->
+    <div class="section-group">
+      <div class="miracast-warning">
+        <div class="warning-text"> 此设备不支持接收 Miracast，因此不能以无线方式投影到它。 </div>
+        <div class="suggestion-text">
+          将 Windows 手机或电脑投影到此屏幕，并更用其键盘、鼠标和其他设备。
+        </div>
+      </div>
+    </div>
+
+    <!-- 投影设置 -->
+    <div class="section-group">
+      <div class="projection-settings">
+        <div class="setting-group">
+          <div class="setting-title"
+            >当你同意时，部分 Windows 和 Android 设备可以投影到这台电脑</div
+          >
+          <div class="dropdown-container">
+            <select
+              v-model="projectionPermission"
+              class="setting-select"
+              @change="updateProjectionPermission"
+            >
+              <option value="always-off">始终关闭</option>
+              <option value="secure-networks">仅在安全网络中可用</option>
+              <option value="everywhere">随时随地可用</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="setting-group">
+          <div class="setting-title">要求投影到这台电脑</div>
+          <div class="dropdown-container">
+            <select
+              v-model="projectionRequest"
+              class="setting-select"
+              @change="updateProjectionRequest"
+            >
+              <option value="every-time">每次请求连接时</option>
+              <option value="first-time">仅第一次</option>
+              <option value="never">从不</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="setting-group">
+          <div class="setting-title">需要 PIN 才能进行配对</div>
+          <div class="dropdown-container">
+            <select v-model="pinRequirement" class="setting-select" @change="updatePinRequirement">
+              <option value="never">从不</option>
+              <option value="always">始终</option>
+              <option value="first-time">仅第一次</option>
+            </select>
+          </div>
+        </div>
+
+        <!-- 发现设置 -->
+        <div class="setting-item">
+          <div class="setting-info">
+            <div class="setting-title">仅当此电脑接通电源时，才能发现此电脑以进行投影</div>
+          </div>
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input
+                type="checkbox"
+                v-model="onlyWhenPluggedIn"
+                @change="updateDiscoverySettings"
+              />
+              <span class="toggle-slider"></span>
+            </label>
+            <span class="toggle-label">{{ onlyWhenPluggedIn ? '开' : '关' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 电脑名称设置 -->
+    <div class="section-group">
+      <div class="computer-name-settings">
+        <div class="name-display">
+          <span class="name-label">电脑名称</span>
+          <span class="name-value">123</span>
+        </div>
+        <div class="name-action">
+          <a href="#" @click="renameComputer" class="link-text">重命名你的电脑</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 投影设置状态
+const projectionPermission = ref('always-off')
+const projectionRequest = ref('every-time')
+const pinRequirement = ref('never')
+const onlyWhenPluggedIn = ref(true)
+
+// 事件处理函数
+const updateProjectionPermission = () => {
+  console.log('投影权限设置:', projectionPermission.value)
+}
+
+const updateProjectionRequest = () => {
+  console.log('投影请求设置:', projectionRequest.value)
+}
+
+const updatePinRequirement = () => {
+  console.log('PIN 要求设置:', pinRequirement.value)
+}
+
+const updateDiscoverySettings = () => {
+  console.log('发现设置:', onlyWhenPluggedIn.value ? '仅插电时' : '始终可发现')
+}
+
+const renameComputer = (e: Event) => {
+  e.preventDefault()
+  console.log('重命名电脑')
+}
+</script>
+
+<style scoped>
+.projection-detail {
+  background: #ffffff;
+}
+
+.page-header {
+  padding: 20px 24px 16px 24px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 300;
+  color: #323130;
+}
+
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+  padding: 20px 24px;
+}
+
+.section-group:last-child {
+  border-bottom: none;
+}
+
+/* Miracast 警告 */
+.miracast-warning {
+  margin-bottom: 20px;
+}
+
+.warning-text {
+  font-size: 14px;
+  color: #d13438;
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+
+.suggestion-text {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.5;
+}
+
+/* 投影设置 */
+.projection-settings {
+  margin-bottom: 20px;
+}
+
+.setting-group {
+  margin-bottom: 20px;
+}
+
+.setting-group:last-child {
+  margin-bottom: 0;
+}
+
+.setting-title {
+  font-size: 14px;
+  color: #323130;
+  margin-bottom: 8px;
+  line-height: 1.4;
+}
+
+.dropdown-container {
+  margin-bottom: 16px;
+}
+
+.setting-select {
+  width: 100%;
+  max-width: 300px;
+  padding: 8px 12px;
+  border: 1px solid #d1d1d1;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  background-color: #f3f2f1;
+  cursor: pointer;
+}
+
+.setting-select:focus {
+  outline: 2px solid #0078d4;
+  border-color: #0078d4;
+}
+
+.setting-select:hover {
+  border-color: #a6a6a6;
+}
+
+/* 开关设置项 */
+.setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.setting-item:last-child {
+  margin-bottom: 0;
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 20px;
+  transition: 0.4s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: '';
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.4s;
+}
+
+input:checked + .toggle-slider {
+  background-color: #0078d4;
+}
+
+input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+  min-width: 20px;
+}
+
+/* 电脑名称设置 */
+.computer-name-settings {
+  margin-bottom: 20px;
+}
+
+.name-display {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.name-label {
+  font-size: 14px;
+  color: #323130;
+}
+
+.name-value {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 600;
+}
+
+.name-action {
+  margin-top: 8px;
+}
+
+.link-text {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.link-text:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/RemoteDesktopDetail.vue b/src/components/WindowsSystemSetting/components/RemoteDesktopDetail.vue
new file mode 100644
index 0000000..90d5c47
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/RemoteDesktopDetail.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="remote-desktop-detail">
+    <!-- 远程桌面描述 -->
+    <div class="section-group">
+      <div class="remote-desktop-info">
+        <div class="info-description">
+          远程桌面允许使用远程桌面客户端(适用于Windows、Android、iOS和macOS)从远程设备连接到这台电脑并可以控制。这样，你就可以通过其他设备工作，如同直接在这台电脑上工作一样。
+        </div>
+      </div>
+    </div>
+
+    <!-- 启用远程桌面 -->
+    <div class="section-group">
+      <div class="enable-remote-desktop">
+        <h3 class="section-title">启用远程桌面</h3>
+
+        <div class="setting-item">
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input type="checkbox" v-model="remoteDesktopEnabled" @change="updateRemoteDesktop" />
+              <span class="toggle-slider"></span>
+            </label>
+            <span class="toggle-label">{{ remoteDesktopEnabled ? '开' : '关' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 用户账户 -->
+    <div class="section-group">
+      <div class="user-accounts">
+        <h3 class="section-title">用户账户</h3>
+
+        <div class="account-link">
+          <a href="#" @click="selectRemoteUsers" class="link-text">选择可远程访问这台电脑的用户</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 远程桌面设置状态
+const remoteDesktopEnabled = ref(false)
+
+// 事件处理函数
+const updateRemoteDesktop = () => {
+  console.log('远程桌面:', remoteDesktopEnabled.value ? '启用' : '禁用')
+}
+
+const selectRemoteUsers = (e: Event) => {
+  e.preventDefault()
+  console.log('选择远程用户')
+}
+</script>
+
+<style scoped>
+.remote-desktop-detail {
+  background: #ffffff;
+}
+
+.page-header {
+  padding: 20px 24px 16px 24px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 300;
+  color: #323130;
+}
+
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+  padding: 20px 24px;
+}
+
+.section-group:last-child {
+  border-bottom: none;
+}
+
+.section-title {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  font-weight: 400;
+  color: #323130;
+}
+
+/* 远程桌面信息 */
+.remote-desktop-info {
+  margin-bottom: 20px;
+}
+
+.info-description {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.5;
+}
+
+/* 启用远程桌面 */
+.enable-remote-desktop {
+  margin-bottom: 20px;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 20px;
+  transition: 0.4s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: '';
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.4s;
+}
+
+input:checked + .toggle-slider {
+  background-color: #0078d4;
+}
+
+input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+  min-width: 20px;
+}
+
+/* 用户账户 */
+.user-accounts {
+  margin-bottom: 20px;
+}
+
+.account-link {
+  margin-top: 8px;
+}
+
+.link-text {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.link-text:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/SearchDetail.vue b/src/components/WindowsSystemSetting/components/SearchDetail.vue
new file mode 100644
index 0000000..3561001
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/SearchDetail.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="search-detail">
+    <div class="section-group">
+      <h3 class="section-title">权限和历史记录</h3>
+      <div class="setting-item" @click="openSearchWindows">
+        <div class="setting-info">
+          <div class="setting-name">搜索 Windows</div>
+        </div>
+        <div class="setting-arrow">></div>
+      </div>
+    </div>
+  </div>
+  >
+</template>
+<script setup lang="ts">
+import { sendSearchMsg } from '../index'
+
+// 搜索 Windows 设置
+const openSearchWindows = () => {
+  sendSearchMsg('搜索Windows', 'action', '打开搜索Windows设置')
+}
+</script>
+<style scoped>
+.search-detail {
+  background: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+}
+.section-title {
+  margin: 0;
+  padding: 16px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #0078d4;
+  background: #f8f9fa;
+}
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.setting-item:hover {
+  background-color: #f8f9fa;
+}
+.setting-info {
+  flex: 1;
+}
+.setting-name {
+  font-size: 14px;
+  font-weight: 400;
+  color: #333;
+}
+.setting-arrow {
+  font-size: 14px;
+  color: #666;
+  margin-left: 12px;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/SharedExperienceDetail.vue b/src/components/WindowsSystemSetting/components/SharedExperienceDetail.vue
new file mode 100644
index 0000000..cb480bc
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/SharedExperienceDetail.vue
@@ -0,0 +1,318 @@
+<template>
+  <div class="shared-experience-detail">
+    <!-- 账户提示 -->
+    <div class="section-group">
+      <div class="account-info">
+        <div class="info-text"> * 体验共享 使用所有系统账户跨设备对操作进行授权 </div>
+        <div class="account-link">
+          <a href="#" @click="manageAccounts" class="link-text">管理你的账户</a>
+        </div>
+      </div>
+    </div>
+
+    <!-- 跨设备共享 -->
+    <div class="section-group">
+      <div class="cross-device-sharing">
+        <h3 class="section-title">跨设备共享</h3>
+        <div class="section-description">
+          允许其他设备（包括链接的手机和平板电脑）上的应用打开并共享此设备上的应用发送消息，反之亦然
+        </div>
+
+        <div class="setting-item">
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input
+                type="checkbox"
+                v-model="crossDeviceSharing"
+                @change="updateCrossDeviceSharing"
+              />
+              <span class="toggle-slider"></span>
+            </label>
+            <span class="toggle-label">{{ crossDeviceSharing ? '开' : '关' }}</span>
+          </div>
+        </div>
+
+        <!-- 共享范围设置 -->
+        <div class="sharing-scope" v-if="crossDeviceSharing">
+          <div class="scope-title">我可以从以下项目共享或接收</div>
+          <div class="dropdown-container">
+            <select v-model="sharingScope" class="setting-select" @change="updateSharingScope">
+              <option value="my-devices">仅我的设备</option>
+              <option value="nearby-devices">附近的设备</option>
+              <option value="everyone">所有人</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 相关服务链接 -->
+    <div class="section-group">
+      <div class="related-services">
+        <div class="services-title">查看你已接受访问权限的应用和服务:</div>
+
+        <div class="service-links">
+          <div class="service-item">
+            <a href="#" @click="openMicrosoftAccount" class="service-link">Microsoft 账户</a>
+          </div>
+
+          <div class="service-item">
+            <a href="#" @click="openWorkSchoolAccount" class="service-link">工作或学校账户</a>
+          </div>
+        </div>
+
+        <div class="privacy-link">
+          <a href="#" @click="openPrivacyStatement" class="link-text">隐私声明</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 共享体验设置状态
+const crossDeviceSharing = ref(true)
+const sharingScope = ref('my-devices')
+
+// 事件处理函数
+const updateCrossDeviceSharing = () => {
+  console.log('跨设备共享:', crossDeviceSharing.value ? '开启' : '关闭')
+}
+
+const updateSharingScope = () => {
+  console.log('共享范围:', sharingScope.value)
+}
+
+const manageAccounts = (e: Event) => {
+  e.preventDefault()
+  console.log('管理账户')
+}
+
+const openMicrosoftAccount = (e: Event) => {
+  e.preventDefault()
+  console.log('打开 Microsoft 账户')
+}
+
+const openWorkSchoolAccount = (e: Event) => {
+  e.preventDefault()
+  console.log('打开工作或学校账户')
+}
+
+const openPrivacyStatement = (e: Event) => {
+  e.preventDefault()
+  console.log('打开隐私声明')
+}
+</script>
+
+<style scoped>
+.shared-experience-detail {
+  background: #ffffff;
+}
+
+.page-header {
+  padding: 20px 24px 16px 24px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 300;
+  color: #323130;
+}
+
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+  padding: 20px 24px;
+}
+
+.section-group:last-child {
+  border-bottom: none;
+}
+
+.section-title {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  font-weight: 400;
+  color: #323130;
+}
+
+.section-description {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.5;
+  margin-bottom: 20px;
+}
+
+/* 账户信息 */
+.account-info {
+  margin-bottom: 20px;
+}
+
+.info-text {
+  font-size: 14px;
+  color: #605e5c;
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+
+.account-link {
+  margin-top: 8px;
+}
+
+/* 跨设备共享 */
+.cross-device-sharing {
+  margin-bottom: 20px;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 20px;
+  transition: 0.4s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: '';
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.4s;
+}
+
+input:checked + .toggle-slider {
+  background-color: #0078d4;
+}
+
+input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+  min-width: 20px;
+}
+
+/* 共享范围设置 */
+.sharing-scope {
+  margin-top: 20px;
+}
+
+.scope-title {
+  font-size: 14px;
+  color: #323130;
+  margin-bottom: 8px;
+}
+
+.dropdown-container {
+  margin-bottom: 16px;
+}
+
+.setting-select {
+  width: 100%;
+  max-width: 300px;
+  padding: 8px 12px;
+  border: 1px solid #d1d1d1;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  background-color: #f3f2f1;
+  cursor: pointer;
+}
+
+.setting-select:focus {
+  outline: 2px solid #0078d4;
+  border-color: #0078d4;
+}
+
+.setting-select:hover {
+  border-color: #a6a6a6;
+}
+
+/* 相关服务 */
+.related-services {
+  margin-bottom: 20px;
+}
+
+.services-title {
+  font-size: 14px;
+  color: #323130;
+  margin-bottom: 16px;
+}
+
+.service-links {
+  margin-bottom: 20px;
+}
+
+.service-item {
+  margin-bottom: 12px;
+}
+
+.service-item:last-child {
+  margin-bottom: 0;
+}
+
+.service-link {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+  display: block;
+}
+
+.service-link:hover {
+  text-decoration: underline;
+}
+
+.privacy-link {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #e5e5e5;
+}
+
+.link-text {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.link-text:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/SoundDetail.vue b/src/components/WindowsSystemSetting/components/SoundDetail.vue
new file mode 100644
index 0000000..9f9b3e1
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/SoundDetail.vue
@@ -0,0 +1,539 @@
+<template>
+  <div class="sound-detail">
+    <!-- 扬声器设备属性页面 -->
+    <SpeakerDeviceProperties v-if="currentView === 'speaker-properties'" @back="goBack" />
+
+    <!-- 麦克风设备属性页面 -->
+    <MicrophoneDeviceProperties
+      v-else-if="currentView === 'microphone-properties'"
+      @back="goBack"
+    />
+
+    <!-- 管理声音设备页面 -->
+    <ManageSoundDevices v-else-if="currentView === 'manage-devices'" @back="goBack" />
+
+    <!-- 声音详细设置页面 -->
+    <div v-else class="sound-main">
+      <!-- 输出 -->
+      <div class="output-section">
+        <h3 class="subsection-title">输出</h3>
+
+        <div class="setting-group">
+          <div class="setting-item">
+            <div class="setting-info">
+              <label class="setting-label">选择输出设备</label>
+              <select class="device-select">
+                <option value="speaker">扬声器(High Definition Audio Device)</option>
+                <option value="headphone">耳机</option>
+                <option value="bluetooth">蓝牙音响</option>
+              </select>
+              <div class="setting-desc"
+                >更多应用可以设置使用与此处选择的声音设备不同的声音设备。请在高级声音选项中自定义应用音频和设备。</div
+              >
+            </div>
+          </div>
+
+          <div class="setting-item">
+            <div class="setting-info">
+              <button class="link-button" @click="openDeviceProperties">设备属性</button>
+            </div>
+          </div>
+
+          <div class="setting-item">
+            <div class="setting-info">
+              <label class="setting-label">主音量</label>
+              <div class="volume-control">
+                <div class="volume-slider-container">
+                  <input
+                    type="range"
+                    min="0"
+                    max="100"
+                    v-model="masterVolume"
+                    class="volume-slider"
+                    @input="updateMasterVolume"
+                  />
+                  <span class="volume-value">{{ masterVolume }}</span>
+                </div>
+                <button class="test-button" @click="testSpeaker">疑难解答</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="setting-item">
+            <div class="setting-info">
+              <button class="link-button" @click="openSoundDeviceManager">管理声音设备</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 输入 -->
+      <div class="input-section">
+        <h3 class="subsection-title">输入</h3>
+
+        <div class="setting-group">
+          <div class="setting-item">
+            <div class="setting-info">
+              <label class="setting-label">选择输入设备</label>
+              <select class="device-select">
+                <option value="microphone">Microphone(High Definition Audio)</option>
+                <option value="line-in">线路输入</option>
+                <option value="bluetooth-mic">蓝牙麦克风</option>
+              </select>
+              <div class="setting-desc"
+                >更多应用可以设置使用与此处选择的声音设备不同的声音设备。请在高级声音选项中自定义应用音频和设备。</div
+              >
+            </div>
+          </div>
+
+          <div class="setting-item">
+            <div class="setting-info">
+              <button class="link-button" @click="openMicrophoneProperties">设备属性</button>
+            </div>
+          </div>
+
+          <div class="setting-item">
+            <div class="setting-info">
+              <label class="setting-label">测试麦克风</label>
+              <div class="microphone-test">
+                <div class="mic-level-container">
+                  <div class="mic-level-bar">
+                    <div class="mic-level-fill" :style="{ width: microphoneLevel + '%' }"></div>
+                  </div>
+                </div>
+                <button class="test-button" @click="testMicrophone">疑难解答</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="setting-item">
+            <div class="setting-info">
+              <button class="link-button" @click="openSoundDeviceManager">管理声音设备</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 高级声音选项 -->
+      <div class="advanced-section">
+        <h3 class="subsection-title">高级声音选项</h3>
+
+        <div class="setting-group">
+          <div class="setting-item">
+            <div class="setting-info">
+              <div class="setting-item-content">
+                <div class="setting-icon">
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2Z"
+                      fill="#0078d4"
+                    />
+                    <path d="M8 7L13 10L8 13V7Z" fill="white" />
+                  </svg>
+                </div>
+                <div class="setting-text">
+                  <div class="setting-name">应用音量和设备首选项</div>
+                  <div class="setting-desc">自定义与此处选择的音频设备不同的音频设备。</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onUnmounted, watch } from 'vue'
+import { sendSystemMsg } from '../index'
+import SpeakerDeviceProperties from './SpeakerDeviceProperties.vue'
+import MicrophoneDeviceProperties from './MicrophoneDeviceProperties.vue'
+import ManageSoundDevices from './ManageSoundDevices.vue'
+
+// 导航状态
+const currentView = ref<'main' | 'speaker-properties' | 'microphone-properties' | 'manage-devices'>(
+  'main'
+)
+
+// 响应式数据
+const masterVolume = ref(50)
+const microphoneLevel = ref(0)
+let microphoneTestInterval: NodeJS.Timeout | null = null
+
+// 监听音量变化
+watch(masterVolume, (newValue) => {
+  sendSystemMsg('主音量', 'masterVolume', `${newValue}%`)
+})
+
+// 导航方法
+const goBack = () => {
+  currentView.value = 'main'
+}
+
+// 音量控制
+const updateMasterVolume = () => {
+  console.log('更新主音量:', masterVolume.value)
+}
+
+// 测试扬声器
+const testSpeaker = () => {
+  sendSystemMsg('扬声器疑难解答', 'testSpeaker', '已执行')
+  console.log('测试扬声器')
+}
+
+// 测试麦克风
+const testMicrophone = () => {
+  sendSystemMsg('麦克风疑难解答', 'testMicrophone', '已执行')
+  console.log('测试麦克风')
+  // 模拟麦克风音量变化
+  if (microphoneTestInterval) {
+    clearInterval(microphoneTestInterval)
+    microphoneTestInterval = null
+    microphoneLevel.value = 0
+  } else {
+    microphoneTestInterval = setInterval(() => {
+      microphoneLevel.value = Math.random() * 80 + 10
+    }, 100)
+
+    setTimeout(() => {
+      if (microphoneTestInterval) {
+        clearInterval(microphoneTestInterval)
+        microphoneTestInterval = null
+        microphoneLevel.value = 0
+      }
+    }, 3000)
+  }
+}
+
+// 打开设备属性
+const openDeviceProperties = () => {
+  sendSystemMsg('扬声器设备属性', 'speakerProperties', '已打开')
+  currentView.value = 'speaker-properties'
+}
+
+const openMicrophoneProperties = () => {
+  sendSystemMsg('麦克风设备属性', 'microphoneProperties', '已打开')
+  currentView.value = 'microphone-properties'
+}
+
+// 管理声音设备
+const openSoundDeviceManager = () => {
+  sendSystemMsg('管理声音设备', 'soundDeviceManager', '已打开')
+  currentView.value = 'manage-devices'
+}
+
+// 组件销毁时清理
+onUnmounted(() => {
+  if (microphoneTestInterval) {
+    clearInterval(microphoneTestInterval)
+  }
+})
+</script>
+
+<style scoped>
+.sound-detail {
+  padding: 20px;
+  background: #ffffff;
+  min-height: 600px;
+}
+
+.sound-main {
+  max-width: 800px;
+}
+
+.subsection-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 20px 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e1e1e1;
+}
+
+.setting-group {
+  margin-bottom: 32px;
+}
+
+.setting-item {
+  margin-bottom: 20px;
+}
+
+.setting-item:last-child {
+  margin-bottom: 0;
+}
+
+.setting-info {
+  width: 100%;
+}
+
+.setting-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #323130;
+  margin-bottom: 8px;
+}
+
+.device-select {
+  width: 100%;
+  max-width: 400px;
+  padding: 8px 12px;
+  border: 1px solid #d1d1d1;
+  border-radius: 4px;
+  font-size: 14px;
+  background: #ffffff;
+  cursor: pointer;
+}
+
+.device-select:focus {
+  outline: none;
+  border-color: #0078d4;
+  box-shadow: 0 0 0 1px #0078d4;
+}
+
+.setting-desc {
+  font-size: 12px;
+  color: #605e5c;
+  margin-top: 8px;
+  line-height: 1.4;
+}
+
+.property-button,
+.test-button {
+  padding: 6px 12px;
+  border: 1px solid #d1d1d1;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #323130;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.property-button:hover,
+.test-button:hover {
+  background: #f3f2f1;
+  border-color: #c8c6c4;
+}
+
+.volume-control {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 8px;
+}
+
+.volume-slider-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  max-width: 300px;
+}
+
+.volume-slider {
+  flex: 1;
+  height: 4px;
+  background: #e1e1e1;
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+
+.volume-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #0078d4;
+  cursor: pointer;
+}
+
+.volume-slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #0078d4;
+  cursor: pointer;
+  border: none;
+}
+
+.volume-value {
+  font-size: 14px;
+  color: #323130;
+  min-width: 24px;
+  text-align: center;
+}
+
+.microphone-test {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 8px;
+}
+
+.mic-level-container {
+  flex: 1;
+  max-width: 300px;
+}
+
+.mic-level-bar {
+  height: 6px;
+  background: #e1e1e1;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.mic-level-fill {
+  height: 100%;
+  background: #107c10;
+  transition: width 0.1s ease-out;
+  border-radius: 3px;
+}
+
+.link-button {
+  color: #0078d4;
+  background: none;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: none;
+  padding: 0;
+}
+
+.link-button:hover {
+  text-decoration: underline;
+}
+
+.setting-item-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.setting-icon {
+  flex-shrink: 0;
+}
+
+.setting-text {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 14px;
+  font-weight: 400;
+  color: #323130;
+  margin-bottom: 4px;
+}
+
+.navigate-button {
+  color: #605e5c;
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 4px;
+}
+
+.navigate-button:hover {
+  color: #323130;
+}
+
+.related-section {
+  margin-top: 32px;
+  padding-top: 20px;
+  border-top: 1px solid #e1e1e1;
+}
+
+.related-links {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.related-link {
+  color: #0078d4;
+  background: none;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  text-align: left;
+  padding: 0;
+}
+
+.related-link:hover {
+  text-decoration: underline;
+}
+
+.support-section {
+  margin-top: 32px;
+}
+
+.support-card {
+  background: #f8f9fa;
+  border: 1px solid #e1e1e1;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.support-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.support-text {
+  font-size: 14px;
+  color: #323130;
+}
+
+.support-link {
+  color: #0078d4;
+  background: none;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.support-link:hover {
+  text-decoration: none;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .sound-detail {
+    padding: 16px;
+  }
+
+  .volume-control,
+  .microphone-test {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .volume-slider-container {
+    max-width: none;
+    width: 100%;
+  }
+
+  .mic-level-container {
+    max-width: none;
+    width: 100%;
+  }
+
+  .support-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/SpeakerDeviceProperties.vue b/src/components/WindowsSystemSetting/components/SpeakerDeviceProperties.vue
new file mode 100644
index 0000000..abd1eca
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/SpeakerDeviceProperties.vue
@@ -0,0 +1,313 @@
+<template>
+  <div class="device-properties">
+    <div class="properties-header">
+      <button class="back-button" @click="$emit('back')">
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <path
+            d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
+            fill="currentColor"
+          />
+        </svg>
+        设置
+      </button>
+      <div class="home-icon" @click="$emit('back')">
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <path
+            d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 .708.708L8 2.207l5.646 5.647a.5.5 0 0 0 .708-.708l-6-6z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+    </div>
+
+    <div class="properties-content">
+      <div class="device-icon-section">
+        <div class="device-icon">
+          <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+            <rect x="8" y="12" width="32" height="24" rx="2" fill="#666" />
+            <circle cx="24" cy="24" r="6" fill="#333" />
+            <circle cx="24" cy="24" r="3" fill="#999" />
+          </svg>
+        </div>
+        <h1 class="page-title">设备属性</h1>
+      </div>
+
+      <div class="device-info">
+        <div class="device-name-section">
+          <input type="text" v-model="deviceName" class="device-name-input" placeholder="扬声器" />
+          <button class="clear-button" @click="clearDeviceName">×</button>
+          <button class="rename-button">重命名</button>
+        </div>
+
+        <div class="device-status">
+          <label class="checkbox-container">
+            <input type="checkbox" v-model="isDisabled" />
+            <span class="checkmark"></span>
+            禁用
+          </label>
+        </div>
+
+        <div class="spatial-audio-section">
+          <h3 class="section-title">空间音效</h3>
+          <div class="spatial-audio-description">
+            <p class="description-text">
+              选择空间音效格式，以获得更佳真实感环境模拟效果的沉浸式音频体验。
+            </p>
+          </div>
+
+          <div class="spatial-audio-select">
+            <label class="select-label">空间音效格式</label>
+            <select v-model="spatialAudioFormat" class="format-select">
+              <option value="off">关</option>
+              <option value="windows-sonic">Windows Sonic for Headphones</option>
+              <option value="dolby-atmos">Dolby Atmos for Headphones</option>
+              <option value="dts-headphone">DTS Headphone:X</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 定义emit
+defineEmits<{
+  back: []
+}>()
+
+// 响应式数据
+const deviceName = ref('扬声器')
+const isDisabled = ref(false)
+const spatialAudioFormat = ref('off')
+
+// 方法
+const clearDeviceName = () => {
+  deviceName.value = ''
+}
+</script>
+
+<style scoped>
+.device-properties {
+  padding: 20px;
+  background: #ffffff;
+  min-height: 600px;
+}
+
+.properties-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e1e1e1;
+}
+
+.back-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  padding: 4px 8px;
+}
+
+.back-button:hover {
+  background: #f3f2f1;
+  border-radius: 4px;
+}
+
+.home-icon {
+  padding: 8px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.home-icon:hover {
+  background: #f3f2f1;
+}
+
+.properties-content {
+  max-width: 600px;
+}
+
+.device-icon-section {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.device-icon {
+  flex-shrink: 0;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: 300;
+  color: #323130;
+  margin: 0;
+}
+
+.device-info {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.device-name-section {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.device-name-input {
+  flex: 1;
+  max-width: 300px;
+  padding: 8px 12px;
+  border: 1px solid #d1d1d1;
+  border-radius: 4px;
+  font-size: 14px;
+  background: #ffffff;
+}
+
+.device-name-input:focus {
+  outline: none;
+  border-color: #0078d4;
+  box-shadow: 0 0 0 1px #0078d4;
+}
+
+.clear-button {
+  width: 24px;
+  height: 24px;
+  border: 1px solid #d1d1d1;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #666;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clear-button:hover {
+  background: #f3f2f1;
+}
+
+.rename-button {
+  padding: 6px 16px;
+  border: 1px solid #d1d1d1;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #323130;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.rename-button:hover {
+  background: #f3f2f1;
+  border-color: #c8c6c4;
+}
+
+.device-status {
+  display: flex;
+  align-items: center;
+}
+
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+}
+
+.checkbox-container input[type='checkbox'] {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+}
+
+.spatial-audio-section {
+  border-top: 1px solid #e1e1e1;
+  padding-top: 24px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 12px 0;
+}
+
+.description-text {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+  margin: 0 0 20px 0;
+}
+
+.spatial-audio-select {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.select-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #323130;
+}
+
+.format-select {
+  max-width: 300px;
+  padding: 8px 12px;
+  border: 1px solid #d1d1d1;
+  border-radius: 4px;
+  font-size: 14px;
+  background: #ffffff;
+  cursor: pointer;
+}
+
+.format-select:focus {
+  outline: none;
+  border-color: #0078d4;
+  box-shadow: 0 0 0 1px #0078d4;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .device-properties {
+    padding: 16px;
+  }
+
+  .device-icon-section {
+    flex-direction: column;
+    text-align: center;
+    gap: 12px;
+  }
+
+  .device-name-section {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+
+  .device-name-input {
+    max-width: none;
+  }
+
+  .format-select {
+    max-width: none;
+  }
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/StorageDetail.vue b/src/components/WindowsSystemSetting/components/StorageDetail.vue
new file mode 100644
index 0000000..8ee7f2c
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/StorageDetail.vue
@@ -0,0 +1,422 @@
+<template>
+  <div class="storage-detail">
+    <!-- 如果在存储感知配置页面 -->
+    <div v-if="currentPage === 'storage-sense-config'">
+      <StorageSenseConfig @back="goBack" />
+    </div>
+
+    <!-- 主存储页面 -->
+    <div v-else>
+      <!-- 存储感知 -->
+      <div class="section-group">
+        <div class="storage-sense">
+          <div class="sense-header">
+            <div class="sense-info">
+              <div class="sense-title"
+                >存储感知和可以通过删除不需要的文件(例如临时文件和回收站中的内容)自动释放空间。</div
+              >
+            </div>
+            <div class="toggle-container">
+              <label class="toggle-switch">
+                <input type="checkbox" v-model="storageSenseEnabled" @change="updateStorageSense" />
+                <span class="toggle-slider"></span>
+              </label>
+              <span class="toggle-label">关</span>
+            </div>
+          </div>
+
+          <div class="config-link">
+            <a href="#" @click="configureStorageSense" class="link-text">配置存储感知或立即运行</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- 本地磁盘信息 -->
+      <div class="section-group">
+        <div class="disk-info">
+          <div class="disk-header">
+            <h3 class="disk-title">本地磁盘(C:) - 99.4 GB</h3>
+          </div>
+
+          <!-- 存储使用情况条 -->
+          <div class="storage-bar-container">
+            <div class="storage-bar">
+              <div class="storage-used" :style="{ width: usedPercentage + '%' }"></div>
+            </div>
+            <div class="storage-info">
+              <span class="used-space">已使用 {{ usedSpace }} GB</span>
+              <span class="free-space">{{ freeSpace }} GB 可用</span>
+            </div>
+          </div>
+
+          <div class="storage-description">
+            <p>存储空间的使用情况可以在清单以下。</p>
+          </div>
+
+          <!-- 存储使用详情 -->
+          <div class="storage-items">
+            <!-- 应用和功能 -->
+            <div class="storage-item" @click="showStorageCategory('apps')">
+              <div class="item-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="#0078d4">
+                  <path d="M4 4h6v6H4V4zm0 8h6v8H4v-8zm8-8h8v3h-8V4zm0 5h8v11h-8V9z" />
+                </svg>
+              </div>
+              <div class="item-info">
+                <div class="item-name">应用和功能</div>
+                <div class="item-description">卸载未使用或不需要的应用和功能</div>
+              </div>
+              <div class="item-size">1.62 GB</div>
+            </div>
+
+            <!-- 临时文件 -->
+            <div class="storage-item" @click="showStorageCategory('temp')">
+              <div class="item-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="#0078d4">
+                  <path
+                    d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
+                  />
+                </svg>
+              </div>
+              <div class="item-info">
+                <div class="item-name">临时文件</div>
+                <div class="item-description">选择要删除的临时文件</div>
+              </div>
+              <div class="item-size">206 MB</div>
+            </div>
+          </div>
+
+          <!-- 显示更多类别链接 -->
+          <div class="show-more">
+            <a href="#" @click="showMoreCategories" class="link-text">显示更多类别</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- 更多存储设置 -->
+      <div class="section-group">
+        <div class="more-settings">
+          <h3 class="settings-title">更多存储设置</h3>
+
+          <div class="settings-links">
+            <div class="settings-item" @click="viewStorageOtherDrives">
+              <span class="link-text">查看其他驱动器上的存储使用情况</span>
+            </div>
+
+            <div class="settings-item" @click="changeDefaultSaveLocations">
+              <span class="link-text">更改新内容的保存位置</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import StorageSenseConfig from './StorageSenseConfig.vue'
+
+// 页面导航状态
+const currentPage = ref('main')
+
+// 存储感知设置
+const storageSenseEnabled = ref(false)
+
+// 磁盘使用情况
+const totalSpace = ref(99.4) // GB
+const usedSpace = ref(18.8) // GB
+
+const freeSpace = computed(() => {
+  return (totalSpace.value - usedSpace.value).toFixed(1)
+})
+
+const usedPercentage = computed(() => {
+  return ((usedSpace.value / totalSpace.value) * 100).toFixed(1)
+})
+
+// 方法
+const updateStorageSense = () => {
+  console.log('存储感知状态:', storageSenseEnabled.value ? '开启' : '关闭')
+}
+
+const configureStorageSense = (e: Event) => {
+  e.preventDefault()
+  currentPage.value = 'storage-sense-config'
+}
+
+const goBack = () => {
+  currentPage.value = 'main'
+}
+
+const showStorageCategory = (category: string) => {
+  console.log('显示存储类别:', category)
+}
+
+const showMoreCategories = (e: Event) => {
+  e.preventDefault()
+  console.log('显示更多类别')
+}
+
+const viewStorageOtherDrives = () => {
+  console.log('查看其他驱动器')
+}
+
+const changeDefaultSaveLocations = () => {
+  console.log('更改保存位置')
+}
+</script>
+
+<style scoped>
+.storage-detail {
+  background: #ffffff;
+}
+
+.page-header {
+  padding: 20px 24px 16px 24px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 300;
+  color: #323130;
+}
+
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+  padding: 20px 24px;
+}
+
+.section-group:last-child {
+  border-bottom: none;
+}
+
+/* 存储感知部分 */
+.storage-sense {
+  margin-bottom: 20px;
+}
+
+.sense-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 12px;
+}
+
+.sense-info {
+  flex: 1;
+}
+
+.sense-title {
+  font-size: 14px;
+  color: #323130;
+  line-height: 1.5;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 20px;
+  transition: 0.4s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: '';
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.4s;
+}
+
+input:checked + .toggle-slider {
+  background-color: #0078d4;
+}
+
+input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+}
+
+.config-link {
+  margin-top: 8px;
+}
+
+.link-text {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.link-text:hover {
+  text-decoration: underline;
+}
+
+/* 磁盘信息部分 */
+.disk-info {
+  margin-bottom: 20px;
+}
+
+.disk-header {
+  margin-bottom: 16px;
+}
+
+.disk-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 400;
+  color: #323130;
+}
+
+.storage-bar-container {
+  margin-bottom: 16px;
+}
+
+.storage-bar {
+  width: 100%;
+  height: 8px;
+  background-color: #e1dfdd;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.storage-used {
+  height: 100%;
+  background-color: #0078d4;
+  border-radius: 4px;
+}
+
+.storage-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  color: #605e5c;
+}
+
+.storage-description {
+  margin: 16px 0;
+}
+
+.storage-description p {
+  margin: 0;
+  font-size: 14px;
+  color: #323130;
+  line-height: 1.5;
+}
+
+.storage-items {
+  margin: 20px 0;
+}
+
+.storage-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  cursor: pointer;
+  border-bottom: 1px solid #f3f2f1;
+}
+
+.storage-item:last-child {
+  border-bottom: none;
+}
+
+.storage-item:hover {
+  background-color: #f8f9fa;
+  margin: 0 -12px;
+  padding: 12px;
+  border-radius: 4px;
+}
+
+.item-icon {
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.item-info {
+  flex: 1;
+}
+
+.item-name {
+  font-size: 14px;
+  font-weight: 400;
+  color: #323130;
+  margin-bottom: 2px;
+}
+
+.item-description {
+  font-size: 12px;
+  color: #605e5c;
+}
+
+.item-size {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.show-more {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #f3f2f1;
+}
+
+/* 更多存储设置部分 */
+.more-settings {
+  margin-bottom: 20px;
+}
+
+.settings-title {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  font-weight: 400;
+  color: #323130;
+}
+
+.settings-links {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.settings-item {
+  cursor: pointer;
+}
+
+.settings-item:hover .link-text {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/StorageSenseConfig.vue b/src/components/WindowsSystemSetting/components/StorageSenseConfig.vue
new file mode 100644
index 0000000..6b5735f
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/StorageSenseConfig.vue
@@ -0,0 +1,443 @@
+<template>
+  <div class="storage-sense-config">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <div class="header-controls">
+        <button class="back-btn" @click="$emit('back')">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+            <path
+              d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
+            />
+          </svg>
+        </button>
+        <h5 class="page-title">返回</h5>
+      </div>
+    </div>
+
+    <!-- 存储感知主开关 -->
+    <div class="section-group">
+      <div class="main-toggle">
+        <div class="toggle-header">
+          <div class="toggle-info">
+            <div class="toggle-title">存储感知</div>
+            <div class="toggle-description">
+              当你的磁盘空间不足时，存储感知将自动运行。我们在上个月清理了 100 MB 空间。
+            </div>
+          </div>
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input type="checkbox" v-model="storageSenseEnabled" @change="updateStorageSense" />
+              <span class="toggle-slider"></span>
+            </label>
+            <span class="toggle-label">{{ storageSenseEnabled ? '开' : '关' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 运行存储感知 -->
+    <div class="section-group">
+      <div class="run-settings">
+        <h3 class="section-title">运行存储感知</h3>
+        <select v-model="runFrequency" class="frequency-select" @change="updateRunFrequency">
+          <option value="space-low">在可用磁盘空间不足时</option>
+          <option value="daily">每天</option>
+          <option value="weekly">每周</option>
+          <option value="monthly">每月</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- 临时文件设置 -->
+    <div class="section-group">
+      <div class="temp-files-settings">
+        <h3 class="section-title">临时文件</h3>
+
+        <!-- 删除应用未使用的临时文件 -->
+        <div class="setting-item">
+          <label class="checkbox-container">
+            <input type="checkbox" v-model="deleteAppTempFiles" @change="updateTempFileSettings" />
+            <span class="checkmark"></span>
+            <span class="checkbox-label">删除我的应用未在使用的临时文件</span>
+          </label>
+        </div>
+
+        <!-- 回收站文件清理设置 -->
+        <div class="cleanup-setting">
+          <div class="cleanup-description"> 如果回收站中的文件存在超过以下时长，请将其删除: </div>
+          <select
+            v-model="recycleBinDays"
+            class="cleanup-select"
+            @change="updateRecycleBinSettings"
+          >
+            <option value="1">1天</option>
+            <option value="14">14天</option>
+            <option value="30">30天</option>
+            <option value="60">60天</option>
+            <option value="never">从不</option>
+          </select>
+        </div>
+
+        <!-- 下载文件夹清理设置 -->
+        <div class="cleanup-setting">
+          <div class="cleanup-description">
+            如果"下载"文件夹中的文件存在超过以下时长，请将其删除:
+          </div>
+          <select
+            v-model="downloadsFolderDays"
+            class="cleanup-select"
+            @change="updateDownloadsSettings"
+          >
+            <option value="1">1天</option>
+            <option value="14">14天</option>
+            <option value="30">30天</option>
+            <option value="60">60天</option>
+            <option value="never">从不</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <!-- 立即释放空间 -->
+    <div class="section-group">
+      <div class="cleanup-now">
+        <h3 class="section-title">立即释放空间</h3>
+        <div class="cleanup-description">
+          如果您的空间不足，我们可以尝试使用此页面上的设置清理文件。
+        </div>
+
+        <div class="cleanup-action">
+          <button class="cleanup-btn" @click="runCleanupNow" :disabled="isCleaningUp">
+            立即清理
+          </button>
+          <div v-if="cleanupResult" class="cleanup-result">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="#107C10">
+              <path
+                d="M13.854 3.646a.5.5 0 0 1 0 .708L6.5 11.707 2.146 7.354a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
+              />
+            </svg>
+            <span>完成! 我们释放了 {{ releasedSpace }} MB 的磁盘空间。</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 定义emit事件
+defineEmits<{
+  back: []
+}>()
+
+// 存储感知设置
+const storageSenseEnabled = ref(false)
+const runFrequency = ref('space-low')
+const deleteAppTempFiles = ref(true)
+const recycleBinDays = ref('30')
+const downloadsFolderDays = ref('never')
+
+// 清理状态
+const isCleaningUp = ref(false)
+const cleanupResult = ref(false)
+const releasedSpace = ref(100)
+
+// 计算属性
+// (移除未使用的toggleLabel)
+
+// 事件处理函数
+const updateStorageSense = () => {
+  console.log('存储感知状态:', storageSenseEnabled.value ? '开启' : '关闭')
+}
+
+const updateRunFrequency = () => {
+  console.log('运行频率:', runFrequency.value)
+}
+
+const updateTempFileSettings = () => {
+  console.log('临时文件清理:', deleteAppTempFiles.value)
+}
+
+const updateRecycleBinSettings = () => {
+  console.log('回收站清理天数:', recycleBinDays.value)
+}
+
+const updateDownloadsSettings = () => {
+  console.log('下载文件夹清理天数:', downloadsFolderDays.value)
+}
+
+const runCleanupNow = () => {
+  isCleaningUp.value = true
+  cleanupResult.value = false
+
+  // 模拟清理过程
+  setTimeout(() => {
+    isCleaningUp.value = false
+    cleanupResult.value = true
+    releasedSpace.value = Math.floor(Math.random() * 200) + 50 // 随机释放50-250MB
+  }, 2000)
+}
+</script>
+
+<style scoped>
+.storage-sense-config {
+  background: #ffffff;
+}
+
+.page-header {
+  padding: 20px 24px 16px 24px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.back-btn {
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  color: #605e5c;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-btn:hover {
+  background-color: #f3f2f1;
+  color: #323130;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 300;
+  color: #323130;
+}
+
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+  padding: 20px 24px;
+}
+
+.section-group:last-child {
+  border-bottom: none;
+}
+
+.section-title {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  font-weight: 400;
+  color: #323130;
+}
+
+/* 主开关部分 */
+.main-toggle {
+  margin-bottom: 20px;
+}
+
+.toggle-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+}
+
+.toggle-info {
+  flex: 1;
+}
+
+.toggle-title {
+  font-size: 16px;
+  font-weight: 400;
+  color: #323130;
+  margin-bottom: 8px;
+}
+
+.toggle-description {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.5;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 20px;
+  transition: 0.4s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: '';
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.4s;
+}
+
+input:checked + .toggle-slider {
+  background-color: #0078d4;
+}
+
+input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+}
+
+/* 运行设置 */
+.run-settings {
+  margin-bottom: 20px;
+}
+
+.frequency-select,
+.cleanup-select {
+  width: 100%;
+  max-width: 300px;
+  padding: 8px 12px;
+  border: 1px solid #d1d1d1;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  background-color: #f3f2f1;
+}
+
+.frequency-select:focus,
+.cleanup-select:focus {
+  outline: 2px solid #0078d4;
+  border-color: #0078d4;
+}
+
+/* 临时文件设置 */
+.temp-files-settings {
+  margin-bottom: 20px;
+}
+
+.setting-item {
+  margin-bottom: 20px;
+}
+
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+  color: #323130;
+}
+
+.checkbox-container input {
+  display: none;
+}
+
+.checkmark {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #0078d4;
+  border-radius: 2px;
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff;
+}
+
+.checkbox-container input:checked + .checkmark {
+  background-color: #0078d4;
+}
+
+.checkbox-container input:checked + .checkmark:after {
+  content: '✓';
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.checkbox-label {
+  line-height: 1.4;
+}
+
+.cleanup-setting {
+  margin: 16px 0;
+}
+
+.cleanup-description {
+  font-size: 14px;
+  color: #323130;
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+
+/* 立即释放空间 */
+.cleanup-now {
+  margin-bottom: 20px;
+}
+
+.cleanup-action {
+  margin-top: 16px;
+}
+
+.cleanup-btn {
+  padding: 8px 20px;
+  background-color: #0078d4;
+  color: white;
+  border: none;
+  border-radius: 2px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.cleanup-btn:hover:not(:disabled) {
+  background-color: #106ebe;
+}
+
+.cleanup-btn:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.cleanup-result {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+  font-size: 14px;
+  color: #107c10;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/SystemDetail.vue b/src/components/WindowsSystemSetting/components/SystemDetail.vue
new file mode 100644
index 0000000..f523b05
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/SystemDetail.vue
@@ -0,0 +1,368 @@
+<template>
+  <div class="system-detail">
+    <!-- 显示详细设置 -->
+    <div v-if="activeNav === 'display'">
+      <DisplayDetail :activeNav="activeNav" />
+    </div>
+
+    <!-- 声音详细设置 -->
+    <div v-else-if="activeNav === 'sound'">
+      <SoundDetail />
+    </div>
+
+    <!-- 通知和操作详细设置 -->
+    <div v-else-if="activeNav === 'notifications'">
+      <NotificationDetail />
+    </div>
+
+    <!-- 专注助手详细设置 -->
+    <div v-else-if="activeNav === 'focus-assist'">
+      <FocusAssistDetail />
+    </div>
+
+    <!-- 电源和睡眠详细设置 -->
+    <div v-else-if="activeNav === 'power'">
+      <PowerSleepDetail />
+    </div>
+
+    <!-- 存储详细设置 -->
+    <div v-else-if="activeNav === 'storage'">
+      <StorageDetail />
+    </div>
+
+    <!-- 平板模式详细设置 -->
+    <div v-else-if="activeNav === 'tablet-mode'">
+      <TabletModeDetail />
+    </div>
+
+    <!-- 多任务详细设置 -->
+    <div v-else-if="activeNav === 'multitasking'">
+      <MultitaskingDetail />
+    </div>
+
+    <!-- 投影到此电脑详细设置 -->
+    <div v-else-if="activeNav === 'projection'">
+      <ProjectionDetail />
+    </div>
+
+    <!-- 共享体验详细设置 -->
+    <div v-else-if="activeNav === 'shared-experience'">
+      <SharedExperienceDetail />
+    </div>
+
+    <!-- 剪贴板详细设置 -->
+    <div v-else-if="activeNav === 'clipboard'">
+      <ClipboardDetail />
+    </div>
+
+    <!-- 远程桌面详细设置 -->
+    <div v-else-if="activeNav === 'remote-desktop'">
+      <RemoteDesktopDetail />
+    </div>
+
+    <!-- 关于详细设置 -->
+    <div v-else-if="activeNav === 'about'">
+      <AboutDetail />
+    </div>
+
+    <!-- 系统主页 -->
+    <div v-else>
+      <div class="section-group">
+        <h3 class="section-title">显示</h3>
+        <div class="setting-item" @click="openDisplaySettings">
+          <div class="setting-info">
+            <div class="setting-name">更改显示器的外观和方式</div>
+            <div class="setting-desc">分辨率、多个显示器</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">声音</h3>
+        <div class="setting-item" @click="openSoundSettings">
+          <div class="setting-info">
+            <div class="setting-name">管理音频设备和应用音量</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">通知和操作</h3>
+        <div class="setting-item" @click="openNotificationSettings">
+          <div class="setting-info">
+            <div class="setting-name">通知、快速操作</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">专注助手</h3>
+        <div class="setting-item" @click="openFocusAssist">
+          <div class="setting-info">
+            <div class="setting-name">隐藏通知并设置优先级</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">电源和睡眠</h3>
+        <div class="setting-item" @click="openPowerSettings">
+          <div class="setting-info">
+            <div class="setting-name">屏幕和睡眠超时</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">电池</h3>
+        <div class="setting-item" @click="openBatterySettings">
+          <div class="setting-info">
+            <div class="setting-name">电池级别和使用情况</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">存储</h3>
+        <div class="setting-item" @click="openStorageSettings">
+          <div class="setting-info">
+            <div class="setting-name">存储空间和存储感知</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">平板模式</h3>
+        <div class="setting-item" @click="openTabletMode">
+          <div class="setting-info">
+            <div class="setting-name">进入或退出平板模式</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">多任务</h3>
+        <div class="setting-item" @click="openMultitasking">
+          <div class="setting-info">
+            <div class="setting-name">贴靠窗口和虚拟桌面</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">投影到此电脑</h3>
+        <div class="setting-item" @click="openProjection">
+          <div class="setting-info">
+            <div class="setting-name">发现和投影设置</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">共享体验</h3>
+        <div class="setting-item" @click="openSharedExperience">
+          <div class="setting-info">
+            <div class="setting-name">跨设备共享</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">剪贴板</h3>
+        <div class="setting-item" @click="openClipboard">
+          <div class="setting-info">
+            <div class="setting-name">跨设备同步剪贴板</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">远程桌面</h3>
+        <div class="setting-item" @click="openRemoteDesktop">
+          <div class="setting-info">
+            <div class="setting-name">配置此设备的远程连接</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">关于</h3>
+        <div class="setting-item" @click="openAbout">
+          <div class="setting-info">
+            <div class="setting-name">设备规格、重命名电脑、Windows 规格</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { sendSystemMsg } from '../index'
+import DisplayDetail from './DisplayDetail.vue'
+import SoundDetail from './SoundDetail.vue'
+import NotificationDetail from './NotificationDetail.vue'
+import FocusAssistDetail from './FocusAssistDetail.vue'
+import PowerSleepDetail from './PowerSleepDetail.vue'
+import StorageDetail from './StorageDetail.vue'
+import TabletModeDetail from './TabletModeDetail.vue'
+import MultitaskingDetail from './MultitaskingDetail.vue'
+import ProjectionDetail from './ProjectionDetail.vue'
+import SharedExperienceDetail from './SharedExperienceDetail.vue'
+import ClipboardDetail from './ClipboardDetail.vue'
+import RemoteDesktopDetail from './RemoteDesktopDetail.vue'
+import AboutDetail from './AboutDetail.vue'
+
+interface Props {
+  activeNav: string
+}
+
+defineProps<Props>()
+const emit = defineEmits<{
+  'navigate-to': [navKey: string]
+}>()
+
+// 各种设置项的点击处理函数
+const openDisplaySettings = () => {
+  sendSystemMsg('显示设置', 'displaySettings', '已打开')
+  emit('navigate-to', 'display')
+}
+
+const openSoundSettings = () => {
+  sendSystemMsg('声音设置', 'soundSettings', '已打开')
+  emit('navigate-to', 'sound')
+}
+
+const openNotificationSettings = () => {
+  sendSystemMsg('通知设置', 'notificationSettings', '已打开')
+  emit('navigate-to', 'notifications')
+}
+
+const openFocusAssist = () => {
+  sendSystemMsg('专注助手', 'focusAssist', '已打开')
+  emit('navigate-to', 'focus-assist')
+}
+
+const openPowerSettings = () => {
+  sendSystemMsg('电源设置', 'powerSettings', '已打开')
+  emit('navigate-to', 'power')
+}
+
+const openBatterySettings = () => {
+  sendSystemMsg('电池设置', 'batterySettings', '已打开')
+  console.log('打开电池设置')
+}
+
+const openStorageSettings = () => {
+  sendSystemMsg('存储设置', 'storageSettings', '已打开')
+  emit('navigate-to', 'storage')
+}
+
+const openTabletMode = () => {
+  sendSystemMsg('平板模式', 'tabletMode', '已打开')
+  emit('navigate-to', 'tablet-mode')
+}
+
+const openMultitasking = () => {
+  sendSystemMsg('多任务设置', 'multitasking', '已打开')
+  emit('navigate-to', 'multitasking')
+}
+
+const openProjection = () => {
+  sendSystemMsg('投影设置', 'projection', '已打开')
+  emit('navigate-to', 'projection')
+}
+
+const openSharedExperience = () => {
+  sendSystemMsg('共享体验', 'sharedExperience', '已打开')
+  emit('navigate-to', 'shared-experience')
+}
+
+const openClipboard = () => {
+  sendSystemMsg('剪贴板设置', 'clipboard', '已打开')
+  emit('navigate-to', 'clipboard')
+}
+
+const openRemoteDesktop = () => {
+  sendSystemMsg('远程桌面设置', 'remoteDesktop', '已打开')
+  emit('navigate-to', 'remote-desktop')
+}
+
+const openAbout = () => {
+  sendSystemMsg('关于设置', 'about', '已打开')
+  emit('navigate-to', 'about')
+}
+</script>
+
+<style scoped>
+.system-detail {
+  background: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.section-group:last-child {
+  border-bottom: none;
+}
+
+.section-title {
+  margin: 0;
+  padding: 16px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #0078d4;
+  background: #f8f9fa;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.setting-item:hover {
+  background-color: #f8f9fa;
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 14px;
+  font-weight: 400;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.setting-desc {
+  font-size: 12px;
+  color: #666;
+}
+
+.setting-arrow {
+  font-size: 14px;
+  color: #666;
+  margin-left: 12px;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/TabletModeDetail.vue b/src/components/WindowsSystemSetting/components/TabletModeDetail.vue
new file mode 100644
index 0000000..049ce6b
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/TabletModeDetail.vue
@@ -0,0 +1,256 @@
+<template>
+  <div class="tablet-mode-detail">
+    <!-- 当我登录时 -->
+    <div class="section-group">
+      <div class="login-settings">
+        <h3 class="section-title">当我登录时</h3>
+        <div class="dropdown-container">
+          <select v-model="loginBehavior" class="behavior-select" @change="updateLoginBehavior">
+            <option value="auto">根据我的硬件自动调整适当的模式</option>
+            <option value="desktop">使用桌面模式</option>
+            <option value="tablet">使用平板模式</option>
+            <option value="ask">在登录时询问我</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <!-- 当此设备自动打开或关闭平板模式时 -->
+    <div class="section-group">
+      <div class="auto-switch-settings">
+        <h3 class="section-title">当此设备自动打开或关闭平板模式时</h3>
+        <div class="dropdown-container">
+          <select
+            v-model="autoSwitchBehavior"
+            class="behavior-select"
+            @change="updateAutoSwitchBehavior"
+          >
+            <option value="ask">切换前始终询问我</option>
+            <option value="auto">不询问我并切换</option>
+            <option value="never">从不切换</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <!-- 在平板模式下隐藏任务栏上的应用图标 -->
+    <div class="section-group">
+      <div class="taskbar-settings">
+        <div class="setting-item">
+          <div class="setting-info">
+            <div class="setting-title">在平板模式下隐藏任务栏上的应用图标</div>
+          </div>
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input
+                type="checkbox"
+                v-model="hideTaskbarIcons"
+                @change="updateTaskbarIconsSettings"
+              />
+              <span class="toggle-slider"></span>
+            </label>
+            <span class="toggle-label">{{ hideTaskbarIcons ? '开' : '关' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 在平板模式下自动隐藏任务栏 -->
+    <div class="section-group">
+      <div class="auto-hide-settings">
+        <div class="setting-item">
+          <div class="setting-info">
+            <div class="setting-title">在平板模式下自动隐藏任务栏</div>
+          </div>
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input type="checkbox" v-model="autoHideTaskbar" @change="updateAutoHideSettings" />
+              <span class="toggle-slider"></span>
+            </label>
+            <span class="toggle-label">{{ autoHideTaskbar ? '开' : '关' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 平板模式设置状态
+const loginBehavior = ref('auto')
+const autoSwitchBehavior = ref('ask')
+const hideTaskbarIcons = ref(true)
+const autoHideTaskbar = ref(false)
+
+// 事件处理函数
+const updateLoginBehavior = () => {
+  console.log('登录行为设置:', loginBehavior.value)
+}
+
+const updateAutoSwitchBehavior = () => {
+  console.log('自动切换行为设置:', autoSwitchBehavior.value)
+}
+
+const updateTaskbarIconsSettings = () => {
+  console.log('任务栏图标隐藏设置:', hideTaskbarIcons.value ? '开启' : '关闭')
+}
+
+const updateAutoHideSettings = () => {
+  console.log('任务栏自动隐藏设置:', autoHideTaskbar.value ? '开启' : '关闭')
+}
+</script>
+
+<style scoped>
+.tablet-mode-detail {
+  background: #ffffff;
+}
+
+.page-header {
+  padding: 20px 24px 16px 24px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 300;
+  color: #323130;
+}
+
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+  padding: 20px 24px;
+}
+
+.section-group:last-child {
+  border-bottom: none;
+}
+
+.section-title {
+  margin: 0 0 16px 0;
+  font-size: 16px;
+  font-weight: 400;
+  color: #323130;
+}
+
+/* 下拉菜单容器 */
+.dropdown-container {
+  margin-bottom: 20px;
+}
+
+.behavior-select {
+  width: 100%;
+  max-width: 400px;
+  padding: 8px 12px;
+  border: 1px solid #d1d1d1;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  background-color: #f3f2f1;
+  cursor: pointer;
+}
+
+.behavior-select:focus {
+  outline: 2px solid #0078d4;
+  border-color: #0078d4;
+}
+
+.behavior-select:hover {
+  border-color: #a6a6a6;
+}
+
+/* 开关设置项 */
+.setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.setting-item:last-child {
+  margin-bottom: 0;
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-title {
+  font-size: 14px;
+  color: #323130;
+  line-height: 1.4;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 20px;
+  transition: 0.4s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: '';
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.4s;
+}
+
+input:checked + .toggle-slider {
+  background-color: #0078d4;
+}
+
+input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+  min-width: 20px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .setting-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .toggle-container {
+    align-self: flex-end;
+  }
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/TimeLanguageDetail.vue b/src/components/WindowsSystemSetting/components/TimeLanguageDetail.vue
new file mode 100644
index 0000000..15805ce
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/TimeLanguageDetail.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="time-language-detail">
+    <!-- 使用子组件 -->
+    <DateTimeDetail v-if="activeNav === 'date'" />
+    <RegionDetail v-if="activeNav === 'region'" />
+    <LanguageDetail v-if="activeNav === 'language'" />
+    <SpeechDetail v-if="activeNav === 'speech'" />
+
+    <!-- 默认主页面 -->
+    <div v-if="!activeNav || activeNav === 'overview'" class="overview-section">
+      <div class="section-group">
+        <h3 class="section-title">日期和时间</h3>
+        <div class="setting-item" @click="navigateToDate">
+          <div class="setting-info">
+            <div class="setting-name">设置时间、时区和区域格式设置</div>
+            <div class="setting-desc">更改日期、时间和时区</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">区域</h3>
+        <div class="setting-item" @click="navigateToRegion">
+          <div class="setting-info">
+            <div class="setting-name">国家或地区、区域格式</div>
+            <div class="setting-desc">货币、日期和时间格式</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">语言</h3>
+        <div class="setting-item" @click="navigateToLanguage">
+          <div class="setting-info">
+            <div class="setting-name">Windows 显示语言、应用和网站语言、键盘</div>
+            <div class="setting-desc">添加和切换语言</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+
+      <div class="section-group">
+        <h3 class="section-title">语音</h3>
+        <div class="setting-item" @click="navigateToSpeech">
+          <div class="setting-info">
+            <div class="setting-name">语音识别、文本转语音</div>
+            <div class="setting-desc">配置语音功能和语音设置</div>
+          </div>
+          <div class="setting-arrow">></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { sendTimeLanguageMsg } from '../index'
+import DateTimeDetail from './time-language/DateTimeDetail.vue'
+import RegionDetail from './time-language/RegionDetail.vue'
+import LanguageDetail from './time-language/LanguageDetail.vue'
+import SpeechDetail from './time-language/SpeechDetail.vue'
+
+interface Props {
+  activeNav: string
+}
+
+defineProps<Props>()
+
+defineEmits<{
+  navigate: [section: string]
+}>()
+
+// 导航方法
+const navigateToDate = () => {
+  sendTimeLanguageMsg('日期时间导航', 'action', '导航到日期时间设置')
+}
+
+const navigateToRegion = () => {
+  sendTimeLanguageMsg('区域导航', 'action', '导航到区域设置')
+}
+
+const navigateToLanguage = () => {
+  sendTimeLanguageMsg('语言导航', 'action', '导航到语言设置')
+}
+
+const navigateToSpeech = () => {
+  sendTimeLanguageMsg('语音导航', 'action', '导航到语音设置')
+}
+</script>
+
+<style scoped>
+@import '../detail.scss';
+</style>
diff --git a/src/components/WindowsSystemSetting/components/UpdateSecurityDetail.vue b/src/components/WindowsSystemSetting/components/UpdateSecurityDetail.vue
new file mode 100644
index 0000000..3bca7fe
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/UpdateSecurityDetail.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="update-security-detail">
+    <!-- Windows Update -->
+    <WindowsUpdateDetail v-if="activeNav === 'windows_update'" />
+
+    <!-- 传递优化 -->
+    <DeliveryOptimizationDetail v-if="activeNav === 'delivery_optimization'" />
+
+    <!-- Windows 安全中心 -->
+    <WindowsSecurityDetail v-if="activeNav === 'windows_security'" />
+
+    <!-- 备份 -->
+    <BackupDetail v-if="activeNav === 'backup'" />
+
+    <!-- 疑难解答 -->
+    <TroubleshootDetail v-if="activeNav === 'troubleshoot'" />
+
+    <!-- 恢复 -->
+    <RecoveryDetail v-if="activeNav === 'recovery'" />
+
+    <!-- 激活 -->
+    <ActivationDetail v-if="activeNav === 'activation'" />
+
+    <!-- 查找我的设备 -->
+    <FindMyDeviceDetail v-if="activeNav === 'find_my_device'" />
+
+    <!-- 面向开发人员 -->
+    <DeveloperDetail v-if="activeNav === 'developer_options'" />
+
+    <!-- Windows 预览体验计划 -->
+    <WindowsInsiderDetail v-if="activeNav === 'windows_insider_program'" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import WindowsUpdateDetail from './update-security/WindowsUpdateDetail.vue'
+import DeliveryOptimizationDetail from './update-security/DeliveryOptimizationDetail.vue'
+import WindowsSecurityDetail from './update-security/WindowsSecurityDetail.vue'
+import BackupDetail from './update-security/BackupDetail.vue'
+import TroubleshootDetail from './update-security/TroubleshootDetail.vue'
+import RecoveryDetail from './update-security/RecoveryDetail.vue'
+import ActivationDetail from './update-security/ActivationDetail.vue'
+import FindMyDeviceDetail from './update-security/FindMyDeviceDetail.vue'
+import DeveloperDetail from './update-security/DeveloperDetail.vue'
+import WindowsInsiderDetail from './update-security/WindowsInsiderDetail.vue'
+
+// 定义 props
+defineProps<{
+  activeNav: string
+}>()
+</script>
+
+<style scoped>
+.update-security-detail {
+  width: 100%;
+  height: 100%;
+}
+</style>
+<script setup lang="ts"></script>
+<style scoped>
+.update-security-detail {
+  background: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.section-group {
+  border-bottom: 1px solid #e5e5e5;
+}
+.section-group:last-child {
+  border-bottom: none;
+}
+.section-title {
+  margin: 0;
+  padding: 16px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #0078d4;
+  background: #f8f9fa;
+}
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.setting-item:hover {
+  background-color: #f8f9fa;
+}
+.setting-info {
+  flex: 1;
+}
+.setting-name {
+  font-size: 14px;
+  font-weight: 400;
+  color: #333;
+}
+.setting-arrow {
+  font-size: 14px;
+  color: #666;
+  margin-left: 12px;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/devices/AutoplayDetail.vue b/src/components/WindowsSystemSetting/components/devices/AutoplayDetail.vue
new file mode 100644
index 0000000..4a560c2
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/devices/AutoplayDetail.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="autoplay-detail">
+    <!-- 自动播放开关 -->
+    <div class="section-group">
+      <div class="setting-item">
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" v-model="autoplayEnabled" @change="updateAutoplay" />
+            <span class="toggle-slider"></span>
+          </label>
+          <span class="toggle-label">{{ autoplayEnabled ? '开' : '关' }}</span>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">在所有媒体和设备上使用自动播放</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 选择自动播放默认设置 -->
+    <div class="section-group" v-if="autoplayEnabled">
+      <h3 class="section-title">选择自动播放默认设置</h3>
+
+      <div class="autoplay-device">
+        <div class="device-name">可移动驱动器</div>
+        <div class="dropdown-container">
+          <select
+            v-model="removableDriveAction"
+            class="setting-select"
+            @change="updateRemovableDriveAction"
+          >
+            <option value="no-action">不执行操作</option>
+            <option value="open-folder">打开文件夹以查看文件</option>
+            <option value="ask-me">每次都询问我</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="autoplay-device">
+        <div class="device-name">内存卡</div>
+        <div class="dropdown-container">
+          <select
+            v-model="memoryCardAction"
+            class="setting-select"
+            @change="updateMemoryCardAction"
+          >
+            <option value="no-action">不执行操作</option>
+            <option value="open-folder">打开文件夹以查看文件</option>
+            <option value="ask-me">每次都询问我</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 状态管理
+const autoplayEnabled = ref(false)
+const removableDriveAction = ref('no-action')
+const memoryCardAction = ref('no-action')
+
+// 事件处理函数
+const updateAutoplay = () => {
+  console.log('自动播放:', autoplayEnabled.value ? '启用' : '禁用')
+}
+
+const updateRemovableDriveAction = () => {
+  console.log('可移动驱动器操作:', removableDriveAction.value)
+}
+
+const updateMemoryCardAction = () => {
+  console.log('内存卡操作:', memoryCardAction.value)
+}
+</script>
+
+<style scoped>
+.autoplay-detail {
+  padding: 20px;
+  background: #ffffff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.section-group {
+  margin-bottom: 32px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 0;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  margin-right: 12px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 12px;
+  transition: 0.3s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: '';
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.3s;
+}
+
+.toggle-switch input:checked + .toggle-slider {
+  background-color: #0078d4;
+}
+
+.toggle-switch input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+  min-width: 24px;
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.autoplay-device {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+  border-bottom: 1px solid #f3f2f1;
+}
+
+.autoplay-device:last-child {
+  border-bottom: none;
+}
+
+.device-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.dropdown-container {
+  margin-left: 16px;
+}
+
+.setting-select {
+  padding: 8px 12px;
+  border: 1px solid #605e5c;
+  border-radius: 2px;
+  background: #ffffff;
+  font-size: 14px;
+  color: #323130;
+  min-width: 200px;
+}
+
+.setting-select:focus {
+  outline: 2px solid #0078d4;
+  outline-offset: 1px;
+  border-color: #0078d4;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/devices/BluetoothDetail.vue b/src/components/WindowsSystemSetting/components/devices/BluetoothDetail.vue
new file mode 100644
index 0000000..df71ba0
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/devices/BluetoothDetail.vue
@@ -0,0 +1,323 @@
+<template>
+  <div class="bluetooth-detail">
+    <!-- 蓝牙和其他设备区域 -->
+    <div class="section-group">
+      <div class="add-printer-container">
+        <div class="add-button">
+          <div class="add-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+              />
+            </svg>
+          </div>
+          <span class="add-text">添加蓝牙或其他设备</span>
+        </div>
+      </div>
+      <!-- 鼠标、键盘和笔 -->
+      <h3 class="section-title">鼠标、键盘和笔</h3>
+      <div class="device-item">
+        <div class="device-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M12 1v6.586l4.293 4.293 1.414-1.414L14 8.586V1h-2zm-2 0H8v6.586l-4.293 4.293-1.414-1.414L6 8.586V1H4v6.586l-4.293 4.293-1.414-1.414L2 8.586V1h2z"
+            />
+          </svg>
+        </div>
+        <div class="device-info">
+          <div class="device-name">USBKeyboard</div>
+        </div>
+      </div>
+      <div class="device-item">
+        <div class="device-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M12 1v6.586l4.293 4.293 1.414-1.414L14 8.586V1h-2zm-2 0H8v6.586l-4.293 4.293-1.414-1.414L6 8.586V1H4v6.586l-4.293 4.293-1.414-1.414L2 8.586V1h2z"
+            />
+          </svg>
+        </div>
+        <div class="device-info">
+          <div class="device-name">USB Receiver</div>
+        </div>
+      </div>
+      <h3 class="section-title">音频</h3>
+      <div class="device-item">
+        <div class="device-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M12 1v6.586l4.293 4.293 1.414-1.414L14 8.586V1h-2zm-2 0H8v6.586l-4.293 4.293-1.414-1.414L6 8.586V1H4v6.586l-4.293 4.293-1.414-1.414L2 8.586V1h2z"
+            />
+          </svg>
+        </div>
+        <div class="device-info">
+          <div class="device-name">麦克风(Realtek High Definition Audio)</div>
+        </div>
+      </div>
+      <div class="device-item">
+        <div class="device-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M12 1v6.586l4.293 4.293 1.414-1.414L14 8.586V1h-2zm-2 0H8v6.586l-4.293 4.293-1.414-1.414L6 8.586V1H4v6.586l-4.293 4.293-1.414-1.414L2 8.586V1h2z"
+            />
+          </svg>
+        </div>
+        <div class="device-info">
+          <div class="device-name">扬声器(Realtek High Definition Audio)</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 其他设备区域 -->
+    <div class="section-group">
+      <h3 class="section-title">其他设备</h3>
+
+      <!-- 网络适配器 -->
+      <div class="device-item">
+        <div class="device-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-6.5a6.5 6.5 0 1 0 0 13A6.5 6.5 0 0 0 8 1.5z"
+            />
+          </svg>
+        </div>
+        <div class="device-info">
+          <div class="device-name">Intel(R) 82574L Gigabit Network Connection</div>
+        </div>
+      </div>
+
+      <!-- SAS Controller -->
+      <div class="device-item">
+        <div class="device-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4z" />
+          </svg>
+        </div>
+        <div class="device-info">
+          <div class="device-name">SAS Controller</div>
+        </div>
+      </div>
+
+      <!-- USB根集线器 -->
+      <div class="device-item">
+        <div class="device-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4z" />
+          </svg>
+        </div>
+        <div class="device-info">
+          <div class="device-name">USB根集线器(USB 3.0)</div>
+        </div>
+      </div>
+
+      <!-- 通用非即插即用监视器 -->
+      <div class="device-item">
+        <div class="device-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-5L9 14v1a1 1 0 0 1-2 0v-1l-.5-2H2a2 2 0 0 1-2-2V4z"
+            />
+          </svg>
+        </div>
+        <div class="device-info">
+          <div class="device-name">通用非即插即用监视器</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 下载设置 -->
+    <div class="section-group">
+      <div class="setting-item">
+        <div class="checkbox-container">
+          <label class="checkbox-wrapper">
+            <input
+              type="checkbox"
+              v-model="downloadOverMetered"
+              @change="updateDownloadOverMetered"
+            />
+            <span class="checkmark"></span>
+          </label>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">通过按流量计费的连接下载</div>
+          <div class="setting-desc"
+            >为避免产生额外的费用，请始终关闭此功能。这样当你使用按流量计费的Internet连接时，就不会为新设备下载相关的设备软件(驱动程序、信息和应用)。</div
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 状态管理
+const downloadOverMetered = ref(false)
+
+// 事件处理函数
+const updateDownloadOverMetered = () => {
+  console.log('通过按流量计费的连接下载:', downloadOverMetered.value ? '启用' : '禁用')
+}
+</script>
+
+<style scoped>
+.bluetooth-detail {
+  padding: 20px;
+  background: #ffffff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.section-group {
+  margin-bottom: 32px;
+}
+.add-printer-container {
+  margin-bottom: 16px;
+}
+
+.add-button {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background: #faf9f8;
+  border: 1px solid #edebe9;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.add-button:hover {
+  background: #f3f2f1;
+}
+
+.add-icon {
+  width: 40px;
+  height: 40px;
+  background: #e5e5e5;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  color: #605e5c;
+}
+
+.add-text {
+  font-size: 14px;
+  color: #323130;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.device-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 0;
+  border-bottom: 1px solid #edebe9;
+}
+
+.device-item:last-child {
+  border-bottom: none;
+}
+
+.device-icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f3f2f1;
+  border-radius: 4px;
+  margin-right: 16px;
+  color: #605e5c;
+}
+
+.device-info {
+  flex: 1;
+}
+
+.device-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.setting-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 16px 0;
+}
+
+.checkbox-container {
+  margin-right: 16px;
+  margin-top: 2px;
+}
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.checkbox-wrapper input[type='checkbox'] {
+  display: none;
+}
+
+.checkmark {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #605e5c;
+  border-radius: 2px;
+  position: relative;
+  background: #ffffff;
+}
+
+.checkbox-wrapper input[type='checkbox']:checked + .checkmark {
+  background-color: #0078d4;
+  border-color: #0078d4;
+}
+
+.checkbox-wrapper input[type='checkbox']:checked + .checkmark::after {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 2px;
+  width: 6px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+  margin-bottom: 4px;
+}
+
+.setting-desc {
+  font-size: 12px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/devices/MouseDetail.vue b/src/components/WindowsSystemSetting/components/devices/MouseDetail.vue
new file mode 100644
index 0000000..eb74939
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/devices/MouseDetail.vue
@@ -0,0 +1,261 @@
+<template>
+  <div class="mouse-detail">
+    <!-- 选择主按钮 -->
+    <div class="section-group">
+      <div class="setting-item">
+        <div class="setting-info">
+          <div class="setting-name">选择主按钮</div>
+          <div class="dropdown-container">
+            <select v-model="primaryButton" class="setting-select" @change="updatePrimaryButton">
+              <option value="left">左</option>
+              <option value="right">右</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 滚动鼠标滚轮即可滚动 -->
+    <div class="section-group">
+      <div class="setting-item">
+        <div class="setting-info">
+          <div class="setting-name">滚动鼠标滚轮即可滚动</div>
+          <div class="dropdown-container">
+            <select
+              v-model="scrollDirection"
+              class="setting-select"
+              @change="updateScrollDirection"
+            >
+              <option value="multiple">一次多行</option>
+              <option value="single">一次一行</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 设置每次滚动的行数 -->
+    <div class="section-group">
+      <div class="setting-item">
+        <div class="setting-info">
+          <div class="setting-name">设置每次滚动的行数</div>
+          <div class="slider-container">
+            <input
+              type="range"
+              v-model="scrollLines"
+              min="1"
+              max="10"
+              class="setting-slider"
+              @input="updateScrollLines"
+            />
+            <div class="slider-value">{{ scrollLines }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 当我悬停在非活动窗口上方时对其进行滚动 -->
+    <div class="section-group">
+      <div class="setting-item">
+        <div class="setting-info">
+          <div class="setting-name">当我悬停在非活动窗口上方时对其进行滚动</div>
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input
+                type="checkbox"
+                v-model="scrollInactiveWindows"
+                @change="updateScrollInactiveWindows"
+              />
+              <span class="toggle-slider"></span>
+            </label>
+            <span class="toggle-label">{{ scrollInactiveWindows ? '开' : '关' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 状态管理
+const primaryButton = ref('left')
+const scrollDirection = ref('multiple')
+const scrollLines = ref(3)
+const scrollInactiveWindows = ref(false)
+
+// 事件处理函数
+const updatePrimaryButton = () => {
+  console.log('主按钮设置:', primaryButton.value)
+}
+
+const updateScrollDirection = () => {
+  console.log('滚动方向设置:', scrollDirection.value)
+}
+
+const updateScrollLines = () => {
+  console.log('滚动行数设置:', scrollLines.value)
+}
+
+const updateScrollInactiveWindows = () => {
+  console.log('滚动非活动窗口:', scrollInactiveWindows.value ? '启用' : '禁用')
+}
+</script>
+
+<style scoped>
+.mouse-detail {
+  padding: 20px;
+  background: #ffffff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.section-group {
+  margin-bottom: 24px;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 0;
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+  margin-bottom: 8px;
+}
+
+.dropdown-container {
+  margin-top: 8px;
+}
+
+.setting-select {
+  padding: 8px 12px;
+  border: 1px solid #605e5c;
+  border-radius: 2px;
+  background: #ffffff;
+  font-size: 14px;
+  color: #323130;
+  min-width: 120px;
+}
+
+.setting-select:focus {
+  outline: 2px solid #0078d4;
+  outline-offset: 1px;
+  border-color: #0078d4;
+}
+
+.slider-container {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.setting-slider {
+  width: 300px;
+  height: 4px;
+  background: #e1dfdd;
+  border-radius: 2px;
+  outline: none;
+  margin-right: 16px;
+}
+
+.setting-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  background: #0078d4;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.setting-slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  background: #0078d4;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+}
+
+.slider-value {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 600;
+  min-width: 24px;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  margin-right: 12px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 12px;
+  transition: 0.3s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: '';
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.3s;
+}
+
+.toggle-switch input:checked + .toggle-slider {
+  background-color: #0078d4;
+}
+
+.toggle-switch input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/devices/PenDetail.vue b/src/components/WindowsSystemSetting/components/devices/PenDetail.vue
new file mode 100644
index 0000000..1790f10
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/devices/PenDetail.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="pen-detail">
+    <!-- 手写 -->
+    <div class="section-group">
+      <h3 class="section-title">手写</h3>
+
+      <div class="setting-item">
+        <div class="checkbox-container">
+          <label class="checkbox-wrapper">
+            <input type="checkbox" v-model="penHandwriting" @change="updatePenHandwriting" />
+            <span class="checkmark"></span>
+          </label>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">在手写面板上用手指书写</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Windows Ink 工作区 -->
+    <div class="section-group">
+      <h3 class="section-title">Windows Ink 工作区</h3>
+
+      <div class="ink-info">
+        <div class="info-link" @click="learnMoreInk">
+          <span class="link-text">了解 Windows Ink</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 状态管理
+const penHandwriting = ref(false)
+
+// 事件处理函数
+const updatePenHandwriting = () => {
+  console.log('在手写面板上用手指书写:', penHandwriting.value ? '启用' : '禁用')
+}
+
+const learnMoreInk = () => {
+  console.log('了解 Windows Ink')
+}
+</script>
+
+<style scoped>
+.pen-detail {
+  padding: 20px;
+  background: #ffffff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.section-group {
+  margin-bottom: 32px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+}
+
+.checkbox-container {
+  margin-right: 16px;
+  margin-top: 2px;
+}
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.checkbox-wrapper input[type='checkbox'] {
+  display: none;
+}
+
+.checkmark {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #605e5c;
+  border-radius: 2px;
+  position: relative;
+  background: #ffffff;
+}
+
+.checkbox-wrapper input[type='checkbox']:checked + .checkmark {
+  background-color: #0078d4;
+  border-color: #0078d4;
+}
+
+.checkbox-wrapper input[type='checkbox']:checked + .checkmark::after {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 2px;
+  width: 6px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.ink-info {
+  padding: 12px 0;
+}
+
+.info-link {
+  cursor: pointer;
+}
+
+.info-link:hover .link-text {
+  color: #106ebe;
+  text-decoration: underline;
+}
+
+.link-text {
+  font-size: 14px;
+  color: #0078d4;
+  transition: color 0.2s;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/devices/PrintersDetail.vue b/src/components/WindowsSystemSetting/components/devices/PrintersDetail.vue
new file mode 100644
index 0000000..1b2b39f
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/devices/PrintersDetail.vue
@@ -0,0 +1,281 @@
+<template>
+  <div class="printers-detail">
+    <!-- 添加打印机和扫描仪 -->
+    <div class="section-group">
+      <h3 class="section-title">添加打印机和扫描仪</h3>
+      <div class="add-printer-container">
+        <div class="add-button" @click="addPrinter">
+          <div class="add-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+              />
+            </svg>
+          </div>
+          <span class="add-text">添加打印机或扫描仪</span>
+        </div>
+      </div>
+
+      <div class="help-link-container">
+        <a href="#" class="help-link" @click="showPrinterHelp">我需要的打印机不在列表中</a>
+      </div>
+    </div>
+
+    <!-- 打印机和扫描仪列表 -->
+    <div class="section-group">
+      <h3 class="section-title">打印机和扫描仪</h3>
+
+      <div class="printer-item">
+        <div class="printer-icon">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M18 3H6v4h12V3zm1 5H5a1 1 0 0 0-1 1v6h4v4h8v-4h4V9a1 1 0 0 0-1-1zM8 17v-4h8v4H8zm11-8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
+            />
+          </svg>
+        </div>
+        <div class="printer-info">
+          <div class="printer-name">添加打印机或扫描仪</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 设置选项 -->
+    <div class="section-group">
+      <div class="setting-item">
+        <div class="checkbox-container">
+          <label class="checkbox-wrapper">
+            <input type="checkbox" v-model="letWindowsManage" @change="updateWindowsManage" />
+            <span class="checkmark"></span>
+          </label>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">让 Windows 管理默认打印机</div>
+          <div class="setting-desc"
+            >启用此选项，Windows 会将默认打印机设置为你在当前位置最近使用的打印机。</div
+          >
+        </div>
+      </div>
+
+      <div class="setting-item">
+        <div class="checkbox-container">
+          <label class="checkbox-wrapper">
+            <input
+              type="checkbox"
+              v-model="downloadOverMetered"
+              @change="updateDownloadOverMetered"
+            />
+            <span class="checkmark"></span>
+          </label>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">通过按流量计费的连接下载</div>
+          <div class="setting-desc"
+            >为避免产生额外的费用，请始终关闭此功能。这样当你使用按流量计费的Internet连接时，就不会为新设备下载相关的设备软件(驱动程序、信息和应用)。</div
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 状态管理
+const letWindowsManage = ref(false)
+const downloadOverMetered = ref(false)
+
+// 事件处理函数
+const addPrinter = () => {
+  console.log('添加打印机或扫描仪')
+}
+
+const showPrinterHelp = () => {
+  console.log('显示打印机帮助')
+}
+
+const updateWindowsManage = () => {
+  console.log('让Windows管理默认打印机:', letWindowsManage.value ? '启用' : '禁用')
+}
+
+const updateDownloadOverMetered = () => {
+  console.log('通过按流量计费的连接下载:', downloadOverMetered.value ? '启用' : '禁用')
+}
+</script>
+
+<style scoped>
+.printers-detail {
+  padding: 20px;
+  background: #ffffff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.section-group {
+  margin-bottom: 32px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.add-printer-container {
+  margin-bottom: 16px;
+}
+
+.add-button {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background: #faf9f8;
+  border: 1px solid #edebe9;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.add-button:hover {
+  background: #f3f2f1;
+}
+
+.add-icon {
+  width: 40px;
+  height: 40px;
+  background: #e5e5e5;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  color: #605e5c;
+}
+
+.add-text {
+  font-size: 14px;
+  color: #323130;
+}
+
+.help-link-container {
+  margin-top: 8px;
+}
+
+.help-link {
+  font-size: 14px;
+  color: #0078d4;
+  text-decoration: none;
+}
+
+.help-link:hover {
+  text-decoration: underline;
+}
+
+.printer-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 0;
+  border-bottom: 1px solid #edebe9;
+}
+
+.printer-item:last-child {
+  border-bottom: none;
+}
+
+.printer-icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f3f2f1;
+  border-radius: 4px;
+  margin-right: 16px;
+  color: #605e5c;
+}
+
+.printer-info {
+  flex: 1;
+}
+
+.printer-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.setting-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 16px 0;
+}
+
+.checkbox-container {
+  margin-right: 16px;
+  margin-top: 2px;
+}
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.checkbox-wrapper input[type='checkbox'] {
+  display: none;
+}
+
+.checkmark {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #605e5c;
+  border-radius: 2px;
+  position: relative;
+  background: #ffffff;
+}
+
+.checkbox-wrapper input[type='checkbox']:checked + .checkmark {
+  background-color: #0078d4;
+  border-color: #0078d4;
+}
+
+.checkbox-wrapper input[type='checkbox']:checked + .checkmark::after {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 2px;
+  width: 6px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+  margin-bottom: 4px;
+}
+
+.setting-desc {
+  font-size: 12px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/devices/TypingDetail.vue b/src/components/WindowsSystemSetting/components/devices/TypingDetail.vue
new file mode 100644
index 0000000..7d0d515
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/devices/TypingDetail.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="typing-detail">
+    <!-- 硬件键盘 -->
+    <div class="section-group">
+      <h3 class="section-title">硬件键盘</h3>
+      <div class="section-desc">某些语言中无法使用硬件键盘的文本建议</div>
+
+      <div class="setting-item">
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" v-model="showTextSuggestions" @change="updateTextSuggestions" />
+            <span class="toggle-slider"></span>
+          </label>
+          <span class="toggle-label">{{ showTextSuggestions ? '开' : '关' }}</span>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">在我键入时显示文本建议</div>
+        </div>
+      </div>
+
+      <div class="setting-item">
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" v-model="autoCorrectTyping" @change="updateAutoCorrect" />
+            <span class="toggle-slider"></span>
+          </label>
+          <span class="toggle-label">{{ autoCorrectTyping ? '开' : '关' }}</span>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">自动更正我键入的拼写错误</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 多语言文本建议 -->
+    <div class="section-group">
+      <h3 class="section-title">多语言文本建议</h3>
+
+      <div class="setting-item">
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" v-model="multiLanguageText" @change="updateMultiLanguageText" />
+            <span class="toggle-slider"></span>
+          </label>
+          <span class="toggle-label">{{ multiLanguageText ? '开' : '关' }}</span>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">根据识别的你键入所使用的语言显示文本建议</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 更多键盘设置 -->
+    <div class="section-group">
+      <h3 class="section-title">更多键盘设置</h3>
+
+      <div class="setting-link" @click="openAdvancedKeyboardSettings">
+        <div class="link-text">使键盘单击显示更清晰</div>
+      </div>
+
+      <div class="setting-link" @click="openAdvancedKeyboardSettings">
+        <div class="link-text">高级键盘设置</div>
+      </div>
+
+      <div class="setting-link" @click="openLanguageSettings">
+        <div class="link-text">键盘和自动更正</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 状态管理
+const showTextSuggestions = ref(false)
+const autoCorrectTyping = ref(false)
+const multiLanguageText = ref(false)
+
+// 事件处理函数
+const updateTextSuggestions = () => {
+  console.log('显示文本建议:', showTextSuggestions.value ? '启用' : '禁用')
+}
+
+const updateAutoCorrect = () => {
+  console.log('自动更正拼写错误:', autoCorrectTyping.value ? '启用' : '禁用')
+}
+
+const updateMultiLanguageText = () => {
+  console.log('多语言文本建议:', multiLanguageText.value ? '启用' : '禁用')
+}
+
+const openAdvancedKeyboardSettings = () => {
+  console.log('打开高级键盘设置')
+}
+
+const openLanguageSettings = () => {
+  console.log('打开语言设置')
+}
+</script>
+
+<style scoped>
+.typing-detail {
+  padding: 20px;
+  background: #ffffff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.section-group {
+  margin-bottom: 32px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 8px 0;
+}
+
+.section-desc {
+  font-size: 12px;
+  color: #605e5c;
+  margin-bottom: 16px;
+  line-height: 1.4;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  margin-right: 12px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 12px;
+  transition: 0.3s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: '';
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.3s;
+}
+
+.toggle-switch input:checked + .toggle-slider {
+  background-color: #0078d4;
+}
+
+.toggle-switch input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+  min-width: 24px;
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.setting-link {
+  padding: 12px 0;
+  cursor: pointer;
+}
+
+.setting-link:hover .link-text {
+  color: #106ebe;
+  text-decoration: underline;
+}
+
+.link-text {
+  font-size: 14px;
+  color: #0078d4;
+  transition: color 0.2s;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/devices/UsbDetail.vue b/src/components/WindowsSystemSetting/components/devices/UsbDetail.vue
new file mode 100644
index 0000000..772bb2a
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/devices/UsbDetail.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="usb-detail">
+    <!-- USB 通知 -->
+    <div class="section-group">
+      <div class="setting-item">
+        <div class="checkbox-container">
+          <label class="checkbox-wrapper">
+            <input type="checkbox" v-model="usbNotification" @change="updateUsbNotification" />
+            <span class="checkmark"></span>
+          </label>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">如果在连接到 USB 设备时出现问题，请通知我</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 状态管理
+const usbNotification = ref(false)
+
+// 事件处理函数
+const updateUsbNotification = () => {
+  console.log('USB通知:', usbNotification.value ? '启用' : '禁用')
+}
+</script>
+
+<style scoped>
+.usb-detail {
+  padding: 20px;
+  background: #ffffff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.section-group {
+  margin-bottom: 32px;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 0;
+}
+
+.checkbox-container {
+  margin-right: 16px;
+  margin-top: 2px;
+}
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.checkbox-wrapper input[type='checkbox'] {
+  display: none;
+}
+
+.checkmark {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #605e5c;
+  border-radius: 2px;
+  position: relative;
+  background: #ffffff;
+}
+
+.checkbox-wrapper input[type='checkbox']:checked + .checkmark {
+  background-color: #0078d4;
+  border-color: #0078d4;
+}
+
+.checkbox-wrapper input[type='checkbox']:checked + .checkmark::after {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 2px;
+  width: 6px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/network/DataUsageDetail.vue b/src/components/WindowsSystemSetting/components/network/DataUsageDetail.vue
new file mode 100644
index 0000000..8b386cc
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/network/DataUsageDetail.vue
@@ -0,0 +1,323 @@
+<template>
+  <div class="data-usage-detail">
+    <!-- 总览 -->
+    <div class="section-group">
+      <h3 class="section-title">总览</h3>
+
+      <div class="usage-overview">
+        <div class="usage-item">
+          <div class="usage-icon">
+            <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" />
+            </svg>
+          </div>
+          <div class="usage-info">
+            <div class="usage-network">以太网</div>
+            <div class="usage-period">最近 30 天内</div>
+            <div class="usage-amount">1.67 GB</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="view-usage-link">
+        <div class="link-button" @click="viewDetailedUsage">
+          <span class="link-text">查看每个应用的使用情况</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 显示所选网络的设置 -->
+    <div class="section-group">
+      <div class="network-selector-label">显示所选网络的设置:</div>
+      <div class="dropdown-container">
+        <select v-model="selectedNetwork" class="setting-select" @change="updateSelectedNetwork">
+          <option value="ethernet">以太网</option>
+          <option value="wifi">Wi-Fi</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- 流量上限 -->
+    <div class="section-group">
+      <h3 class="section-title">流量上限</h3>
+      <div class="data-limit-desc">Windows 可确保你不超出流量上限。这不会更改你的流量套餐。</div>
+
+      <div class="limit-button-container">
+        <button class="limit-button" @click="setDataLimit">设置限制</button>
+      </div>
+    </div>
+
+    <!-- 后台数据 -->
+    <div class="section-group">
+      <h3 class="section-title">后台数据</h3>
+      <div class="background-data-desc">限制后台数据，以帮助减少 以太网 的数据使用量。</div>
+
+      <div class="radio-group">
+        <div class="radio-option">
+          <label class="radio-label">
+            <input
+              type="radio"
+              v-model="backgroundDataLimit"
+              value="always"
+              @change="updateBackgroundDataLimit"
+            />
+            <span class="radio-circle"></span>
+            <span class="radio-text">始终</span>
+          </label>
+        </div>
+        <div class="radio-option">
+          <label class="radio-label">
+            <input
+              type="radio"
+              v-model="backgroundDataLimit"
+              value="never"
+              @change="updateBackgroundDataLimit"
+            />
+            <span class="radio-circle"></span>
+            <span class="radio-text">从不</span>
+          </label>
+        </div>
+      </div>
+
+      <div class="restriction-desc">限制 Microsoft Store 应用和 Windows 功能可在后台执行的操作</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 状态管理
+const selectedNetwork = ref('ethernet')
+const backgroundDataLimit = ref('never')
+
+// 事件处理函数
+const viewDetailedUsage = () => {
+  console.log('查看每个应用的使用情况')
+}
+
+const updateSelectedNetwork = () => {
+  console.log('选择的网络:', selectedNetwork.value)
+}
+
+const setDataLimit = () => {
+  console.log('设置数据限制')
+}
+
+const updateBackgroundDataLimit = () => {
+  console.log('后台数据限制:', backgroundDataLimit.value)
+}
+</script>
+
+<style scoped>
+.data-usage-detail {
+  padding: 20px;
+  background: #ffffff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.section-group {
+  margin-bottom: 32px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.usage-overview {
+  margin-bottom: 16px;
+}
+
+.usage-item {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 4px;
+}
+
+.usage-icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f3f2f1;
+  border-radius: 4px;
+  margin-right: 16px;
+  color: #605e5c;
+}
+
+.usage-info {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.usage-network {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 600;
+}
+
+.usage-period {
+  font-size: 12px;
+  color: #605e5c;
+}
+
+.usage-amount {
+  font-size: 18px;
+  color: #323130;
+  font-weight: 600;
+}
+
+.view-usage-link {
+  margin-top: 8px;
+}
+
+.link-button {
+  cursor: pointer;
+  padding: 8px 0;
+}
+
+.link-button:hover .link-text {
+  color: #106ebe;
+  text-decoration: underline;
+}
+
+.network-selector-label {
+  font-size: 14px;
+  color: #323130;
+  margin-bottom: 8px;
+}
+
+.dropdown-container {
+  margin-bottom: 16px;
+}
+
+.setting-select {
+  padding: 8px 12px;
+  border: 1px solid #605e5c;
+  border-radius: 2px;
+  background: #ffffff;
+  font-size: 14px;
+  color: #323130;
+  min-width: 200px;
+}
+
+.setting-select:focus {
+  outline: 2px solid #0078d4;
+  outline-offset: 1px;
+  border-color: #0078d4;
+}
+
+.data-limit-desc {
+  font-size: 14px;
+  color: #605e5c;
+  margin-bottom: 16px;
+  line-height: 1.4;
+}
+
+.limit-button-container {
+  margin-top: 16px;
+}
+
+.limit-button {
+  padding: 8px 16px;
+  background: #f3f2f1;
+  border: 1px solid #605e5c;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.limit-button:hover {
+  background: #e1dfdd;
+}
+
+.background-data-desc {
+  font-size: 14px;
+  color: #605e5c;
+  margin-bottom: 16px;
+  line-height: 1.4;
+}
+
+.radio-group {
+  margin-bottom: 16px;
+}
+
+.radio-option {
+  margin-bottom: 8px;
+}
+
+.radio-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+  color: #323130;
+}
+
+.radio-label input[type='radio'] {
+  display: none;
+}
+
+.radio-circle {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #605e5c;
+  border-radius: 50%;
+  margin-right: 12px;
+  position: relative;
+}
+
+.radio-label input[type='radio']:checked + .radio-circle {
+  border-color: #0078d4;
+}
+
+.radio-label input[type='radio']:checked + .radio-circle::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 10px;
+  height: 10px;
+  background: #0078d4;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.radio-text {
+  flex: 1;
+}
+
+.restriction-desc {
+  font-size: 12px;
+  color: #605e5c;
+  line-height: 1.4;
+  margin-top: 8px;
+}
+
+.link-text {
+  font-size: 14px;
+  color: #0078d4;
+  transition: color 0.2s;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/network/DialupDetail.vue b/src/components/WindowsSystemSetting/components/network/DialupDetail.vue
new file mode 100644
index 0000000..735d5b9
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/network/DialupDetail.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="dialup-detail">
+    <!-- 宽带连接 -->
+    <div class="section-group">
+      <div class="broadband-item">
+        <div class="broadband-icon">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M6.62 10.79c1.44-2.83 3.76-5.14 6.59-6.59l2.08-1.42C7.91.24 2.04 5.11.5 12.5l1.42 2.08c1.45-2.83 3.76-5.15 6.59-6.59zm10.75 2.42c-1.44 2.83-3.76 5.14-6.59 6.59l-2.08 1.42C16.09 23.76 21.96 18.89 23.5 11.5l-1.42-2.08c-1.45 2.83-3.76 5.15-6.59 6.59z"
+            />
+          </svg>
+        </div>
+        <div class="broadband-info">
+          <div class="broadband-name">宽带连接</div>
+        </div>
+      </div>
+
+      <div class="setup-link-container">
+        <div class="setup-link" @click="setupNewConnection">
+          <span class="link-text">设置新连接</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 事件处理函数
+const setupNewConnection = () => {
+  console.log('设置新连接')
+}
+</script>
+
+<style scoped>
+.dialup-detail {
+  padding: 20px;
+  background: #ffffff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.section-group {
+  margin-bottom: 32px;
+}
+
+.broadband-item {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  margin-bottom: 16px;
+}
+
+.broadband-icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #0078d4;
+  border-radius: 4px;
+  margin-right: 16px;
+  color: #ffffff;
+}
+
+.broadband-info {
+  flex: 1;
+}
+
+.broadband-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.setup-link-container {
+  margin-top: 8px;
+}
+
+.setup-link {
+  cursor: pointer;
+  padding: 8px 0;
+}
+
+.setup-link:hover .link-text {
+  color: #106ebe;
+  text-decoration: underline;
+}
+
+.link-text {
+  font-size: 14px;
+  color: #0078d4;
+  transition: color 0.2s;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/network/EthernetDetail.vue b/src/components/WindowsSystemSetting/components/network/EthernetDetail.vue
new file mode 100644
index 0000000..d27e012
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/network/EthernetDetail.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="ethernet-detail">
+    <!-- 网络连接 -->
+    <div class="section-group">
+      <div class="network-item">
+        <div class="network-icon">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" />
+          </svg>
+        </div>
+        <div class="network-info">
+          <div class="network-name">网络</div>
+          <div class="network-status">已连接</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 组件逻辑
+</script>
+
+<style scoped>
+.ethernet-detail {
+  padding: 20px;
+  background: #ffffff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.section-group {
+  margin-bottom: 32px;
+}
+
+.network-item {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 4px;
+}
+
+.network-icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f3f2f1;
+  border-radius: 4px;
+  margin-right: 16px;
+  color: #605e5c;
+}
+
+.network-info {
+  flex: 1;
+}
+
+.network-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+  margin-bottom: 4px;
+}
+
+.network-status {
+  font-size: 12px;
+  color: #605e5c;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/network/ProxyDetail.vue b/src/components/WindowsSystemSetting/components/network/ProxyDetail.vue
new file mode 100644
index 0000000..3d9b7f0
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/network/ProxyDetail.vue
@@ -0,0 +1,436 @@
+<template>
+  <div class="proxy-detail">
+    <!-- 自动设置代理 -->
+    <div class="section-group">
+      <h3 class="section-title">自动设置代理</h3>
+      <div class="section-desc"
+        >客代理服务器用于以太网或 Wi-Fi 连接。这些设置不适用于 VPN 连接。</div
+      >
+
+      <div class="setting-item">
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input
+              type="checkbox"
+              v-model="autoDetectSettings"
+              @change="updateAutoDetectSettings"
+            />
+            <span class="toggle-slider"></span>
+          </label>
+          <span class="toggle-label">{{ autoDetectSettings ? '开' : '关' }}</span>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">自动检测设置</div>
+        </div>
+      </div>
+
+      <div class="setting-item">
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" v-model="useSetupScript" @change="updateUseSetupScript" />
+            <span class="toggle-slider"></span>
+          </label>
+          <span class="toggle-label">{{ useSetupScript ? '开' : '关' }}</span>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">使用设置脚本</div>
+        </div>
+      </div>
+
+      <div class="script-settings" v-if="useSetupScript">
+        <div class="input-group">
+          <div class="input-label">脚本设置</div>
+          <input
+            type="text"
+            v-model="scriptUrl"
+            class="setting-input"
+            placeholder="脚本地址"
+            @input="updateScriptUrl"
+          />
+        </div>
+        <div class="save-button-container">
+          <button class="save-button" @click="saveScript">保存</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 手动设置代理 -->
+    <div class="section-group">
+      <h3 class="section-title">手动设置代理</h3>
+      <div class="section-desc"
+        >客代理服务器用于以太网或 Wi-Fi 连接。这些设置不适用于 VPN 连接。</div
+      >
+
+      <div class="setting-item">
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" v-model="useProxyServer" @change="updateUseProxyServer" />
+            <span class="toggle-slider"></span>
+          </label>
+          <span class="toggle-label">{{ useProxyServer ? '开' : '关' }}</span>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">使用代理服务器</div>
+        </div>
+      </div>
+
+      <div class="proxy-settings" v-if="useProxyServer">
+        <div class="input-row">
+          <div class="input-group">
+            <div class="input-label">地址</div>
+            <input
+              type="text"
+              v-model="proxyAddress"
+              class="setting-input"
+              placeholder="代理地址"
+              @input="updateProxyAddress"
+            />
+          </div>
+          <div class="input-group">
+            <div class="input-label">端口</div>
+            <input
+              type="text"
+              v-model="proxyPort"
+              class="setting-input port-input"
+              placeholder="端口"
+              @input="updateProxyPort"
+            />
+          </div>
+        </div>
+
+        <div class="bypass-settings">
+          <div class="input-label"
+            >请勿对以下列条目开头的地址使用代理服务器。若有多个条目，请使用英文分号(;)来分割。</div
+          >
+          <textarea
+            v-model="bypassList"
+            class="bypass-textarea"
+            placeholder="输入不使用代理的地址"
+            @input="updateBypassList"
+          ></textarea>
+
+          <div class="checkbox-container">
+            <label class="checkbox-wrapper">
+              <input
+                type="checkbox"
+                v-model="bypassLocalAddresses"
+                @change="updateBypassLocalAddresses"
+              />
+              <span class="checkmark"></span>
+            </label>
+            <span class="checkbox-text">请勿将代理服务器用于本地(Intranet)地址</span>
+          </div>
+        </div>
+
+        <div class="save-button-container">
+          <button class="save-button" @click="saveProxySettings">保存</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 状态管理
+const autoDetectSettings = ref(false)
+const useSetupScript = ref(false)
+const scriptUrl = ref('')
+const useProxyServer = ref(false)
+const proxyAddress = ref('')
+const proxyPort = ref('')
+const bypassList = ref('')
+const bypassLocalAddresses = ref(false)
+
+// 事件处理函数
+const updateAutoDetectSettings = () => {
+  console.log('自动检测设置:', autoDetectSettings.value ? '启用' : '禁用')
+}
+
+const updateUseSetupScript = () => {
+  console.log('使用设置脚本:', useSetupScript.value ? '启用' : '禁用')
+}
+
+const updateScriptUrl = () => {
+  console.log('脚本地址:', scriptUrl.value)
+}
+
+const saveScript = () => {
+  console.log('保存脚本设置')
+}
+
+const updateUseProxyServer = () => {
+  console.log('使用代理服务器:', useProxyServer.value ? '启用' : '禁用')
+}
+
+const updateProxyAddress = () => {
+  console.log('代理地址:', proxyAddress.value)
+}
+
+const updateProxyPort = () => {
+  console.log('代理端口:', proxyPort.value)
+}
+
+const updateBypassList = () => {
+  console.log('绕过列表:', bypassList.value)
+}
+
+const updateBypassLocalAddresses = () => {
+  console.log('绕过本地地址:', bypassLocalAddresses.value ? '启用' : '禁用')
+}
+
+const saveProxySettings = () => {
+  console.log('保存代理设置')
+}
+</script>
+
+<style scoped>
+.proxy-detail {
+  padding: 20px;
+  background: #ffffff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.section-group {
+  margin-bottom: 32px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 8px 0;
+}
+
+.section-desc {
+  font-size: 12px;
+  color: #605e5c;
+  margin-bottom: 16px;
+  line-height: 1.4;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  margin-right: 12px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 12px;
+  transition: 0.3s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: '';
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.3s;
+}
+
+.toggle-switch input:checked + .toggle-slider {
+  background-color: #0078d4;
+}
+
+.toggle-switch input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+  min-width: 24px;
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.script-settings,
+.proxy-settings {
+  margin-top: 16px;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 4px;
+}
+
+.input-group {
+  margin-bottom: 16px;
+}
+
+.input-label {
+  font-size: 14px;
+  color: #323130;
+  margin-bottom: 8px;
+}
+
+.setting-input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #605e5c;
+  border-radius: 2px;
+  background: #ffffff;
+  font-size: 14px;
+  color: #323130;
+}
+
+.setting-input:focus {
+  outline: 2px solid #0078d4;
+  outline-offset: 1px;
+  border-color: #0078d4;
+}
+
+.input-row {
+  display: flex;
+  gap: 16px;
+}
+
+.input-row .input-group {
+  flex: 1;
+}
+
+.port-input {
+  max-width: 120px;
+}
+
+.bypass-settings {
+  margin-top: 16px;
+}
+
+.bypass-textarea {
+  width: 100%;
+  min-height: 80px;
+  padding: 8px 12px;
+  border: 1px solid #605e5c;
+  border-radius: 2px;
+  background: #ffffff;
+  font-size: 14px;
+  color: #323130;
+  font-family: inherit;
+  resize: vertical;
+  margin-bottom: 16px;
+}
+
+.bypass-textarea:focus {
+  outline: 2px solid #0078d4;
+  outline-offset: 1px;
+  border-color: #0078d4;
+}
+
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-right: 12px;
+}
+
+.checkbox-wrapper input[type='checkbox'] {
+  display: none;
+}
+
+.checkmark {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #605e5c;
+  border-radius: 2px;
+  position: relative;
+  background: #ffffff;
+  margin-right: 8px;
+}
+
+.checkbox-wrapper input[type='checkbox']:checked + .checkmark {
+  background-color: #0078d4;
+  border-color: #0078d4;
+}
+
+.checkbox-wrapper input[type='checkbox']:checked + .checkmark::after {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 2px;
+  width: 6px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.checkbox-text {
+  font-size: 14px;
+  color: #323130;
+}
+
+.save-button-container {
+  margin-top: 16px;
+}
+
+.save-button {
+  padding: 8px 16px;
+  background: #f3f2f1;
+  border: 1px solid #605e5c;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.save-button:hover {
+  background: #e1dfdd;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/network/StatusDetail.vue b/src/components/WindowsSystemSetting/components/network/StatusDetail.vue
new file mode 100644
index 0000000..fd7f100
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/network/StatusDetail.vue
@@ -0,0 +1,318 @@
+<template>
+  <div class="status-detail">
+    <!-- 网络状态 -->
+    <div class="section-group">
+      <h3 class="section-title">网络状态</h3>
+
+      <!-- 网络连接图示 -->
+      <div class="network-diagram">
+        <div class="network-path">
+          <div class="device-icon">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"
+              />
+            </svg>
+          </div>
+          <div class="connection-line"></div>
+          <div class="router-container">
+            <div class="device-icon">
+              <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" />
+              </svg>
+            </div>
+            <div class="device-label">
+              <div class="label-text">以太网</div>
+              <div class="label-subtext">公用网络</div>
+            </div>
+          </div>
+          <div class="connection-line"></div>
+          <div class="device-icon">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <!-- 连接状态信息 -->
+      <div class="connection-status">
+        <div class="status-text">你已连接到 Internet</div>
+        <div class="status-desc"
+          >如果你的流量套餐有限制，则你可以将此网络设置为按流量计费的连接，或者更改其他属性。</div
+        >
+
+        <div class="status-links">
+          <div class="status-link" @click="changeConnectionProperties">
+            <span class="link-text">更改连接属性</span>
+          </div>
+
+          <div class="status-link" @click="showAvailableNetworks">
+            <span class="link-text">显示可用网络</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 更改网络设置 -->
+    <div class="section-group">
+      <h3 class="section-title">更改网络设置</h3>
+
+      <div class="network-setting-item" @click="openNetworkAdapter">
+        <div class="setting-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+            />
+          </svg>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">更改适配器选项</div>
+          <div class="setting-desc">查看网络适配器并更改连接设置。</div>
+        </div>
+      </div>
+
+      <div class="network-setting-item" @click="openSharingOptions">
+        <div class="setting-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"
+            />
+          </svg>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">共享选项</div>
+          <div class="setting-desc">根据所连接到的网络，决定要共享的内容。</div>
+        </div>
+      </div>
+
+      <div class="network-setting-item" @click="openNetworkTroubleshooter">
+        <div class="setting-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+          </svg>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">网络疑难解答</div>
+          <div class="setting-desc">诊断并解决网络问题。</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 查看网络属性 -->
+    <div class="section-group">
+      <div class="network-properties-link" @click="viewNetworkProperties">
+        <span class="link-text">查看网络属性</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 事件处理函数
+const changeConnectionProperties = () => {
+  console.log('更改连接属性')
+}
+
+const showAvailableNetworks = () => {
+  console.log('显示可用网络')
+}
+
+const openNetworkAdapter = () => {
+  console.log('更改适配器选项')
+}
+
+const openSharingOptions = () => {
+  console.log('共享选项')
+}
+
+const openNetworkTroubleshooter = () => {
+  console.log('网络疑难解答')
+}
+
+const viewNetworkProperties = () => {
+  console.log('查看网络属性')
+}
+</script>
+
+<style scoped>
+.status-detail {
+  padding: 20px;
+  background: #ffffff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.section-group {
+  margin-bottom: 32px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.network-diagram {
+  margin: 24px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.network-path {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.device-icon {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f3f2f1;
+  border-radius: 4px;
+  color: #605e5c;
+}
+
+.connection-line {
+  width: 60px;
+  height: 2px;
+  background: #323130;
+}
+
+.router-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.device-label {
+  margin-top: 8px;
+  text-align: center;
+}
+
+.label-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: #323130;
+}
+
+.label-subtext {
+  font-size: 12px;
+  color: #605e5c;
+}
+
+.connection-status {
+  background: #f8f9fa;
+  padding: 20px;
+  border-radius: 4px;
+  margin-top: 16px;
+}
+
+.status-text {
+  font-size: 18px;
+  font-weight: 600;
+  color: #323130;
+  margin-bottom: 8px;
+}
+
+.status-desc {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+  margin-bottom: 16px;
+}
+
+.status-links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.status-link {
+  cursor: pointer;
+}
+
+.status-link:hover .link-text {
+  color: #106ebe;
+  text-decoration: underline;
+}
+
+.network-setting-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 16px 0;
+  border-bottom: 1px solid #f3f2f1;
+  cursor: pointer;
+}
+
+.network-setting-item:last-child {
+  border-bottom: none;
+}
+
+.network-setting-item:hover {
+  background: #f8f9fa;
+  margin: 0 -20px;
+  padding: 16px 20px;
+}
+
+.setting-icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f3f2f1;
+  border-radius: 4px;
+  margin-right: 16px;
+  color: #605e5c;
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+  margin-bottom: 4px;
+}
+
+.setting-desc {
+  font-size: 12px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.network-properties-link {
+  cursor: pointer;
+  padding: 8px 0;
+}
+
+.network-properties-link:hover .link-text {
+  color: #106ebe;
+  text-decoration: underline;
+}
+
+.link-text {
+  font-size: 14px;
+  color: #0078d4;
+  transition: color 0.2s;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/network/VpnDetail.vue b/src/components/WindowsSystemSetting/components/network/VpnDetail.vue
new file mode 100644
index 0000000..f6f1c97
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/network/VpnDetail.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="vpn-detail">
+    <!-- 添加VPN连接 -->
+    <div class="section-group">
+      <div class="add-vpn-container">
+        <div class="add-button" @click="addVpnConnection">
+          <div class="add-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+              />
+            </svg>
+          </div>
+          <span class="add-text">添加 VPN 连接</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 高级选项 -->
+    <div class="section-group">
+      <h3 class="section-title">高级选项</h3>
+
+      <div class="setting-item">
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" v-model="allowVpnOverMetered" @change="updateVpnOverMetered" />
+            <span class="toggle-slider"></span>
+          </label>
+          <span class="toggle-label">{{ allowVpnOverMetered ? '开' : '关' }}</span>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">允许通过按流量计费的网络进行 VPN 连接</div>
+        </div>
+      </div>
+
+      <div class="setting-item">
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" v-model="allowVpnRoaming" @change="updateVpnRoaming" />
+            <span class="toggle-slider"></span>
+          </label>
+          <span class="toggle-label">{{ allowVpnRoaming ? '开' : '关' }}</span>
+        </div>
+        <div class="setting-info">
+          <div class="setting-name">允许漫游时进行 VPN 连接</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 状态管理
+const allowVpnOverMetered = ref(false)
+const allowVpnRoaming = ref(false)
+
+// 事件处理函数
+const addVpnConnection = () => {
+  console.log('添加VPN连接')
+}
+
+const updateVpnOverMetered = () => {
+  console.log('允许通过按流量计费的网络进行VPN连接:', allowVpnOverMetered.value ? '启用' : '禁用')
+}
+
+const updateVpnRoaming = () => {
+  console.log('允许漫游时进行VPN连接:', allowVpnRoaming.value ? '启用' : '禁用')
+}
+</script>
+
+<style scoped>
+.vpn-detail {
+  padding: 20px;
+  background: #ffffff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.section-group {
+  margin-bottom: 32px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.add-vpn-container {
+  margin-bottom: 16px;
+}
+
+.add-button {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background: #faf9f8;
+  border: 1px solid #edebe9;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.add-button:hover {
+  background: #f3f2f1;
+}
+
+.add-icon {
+  width: 40px;
+  height: 40px;
+  background: #e5e5e5;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  color: #605e5c;
+}
+
+.add-text {
+  font-size: 14px;
+  color: #323130;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 0;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  margin-right: 12px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 12px;
+  transition: 0.3s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: '';
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.3s;
+}
+
+.toggle-switch input:checked + .toggle-slider {
+  background-color: #0078d4;
+}
+
+.toggle-switch input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+  min-width: 24px;
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/personalization/BackgroundDetail.vue b/src/components/WindowsSystemSetting/components/personalization/BackgroundDetail.vue
new file mode 100644
index 0000000..ef05a52
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/personalization/BackgroundDetail.vue
@@ -0,0 +1,473 @@
+<template>
+  <div class="background-detail">
+    <div class="preview-section">
+      <h2 class="section-title">预览</h2>
+      <div class="background-preview">
+        <div class="monitor-frame">
+          <div class="monitor-screen" :style="getPreviewStyle">
+            <div class="taskbar-preview">
+              <div class="start-button-preview"></div>
+              <div class="taskbar-icons">
+                <div class="taskbar-icon"></div>
+                <div class="taskbar-icon"></div>
+              </div>
+              <div class="time-preview">11:28<br /><span>11月5日 星期四</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="settings-section">
+      <div class="setting-group">
+        <label class="setting-label">背景</label>
+        <select v-model="backgroundType" class="windows-select" @change="onBackgroundTypeChange">
+          <option value="picture">图片</option>
+          <option value="solid">纯色</option>
+          <option value="slideshow">幻灯片放映</option>
+        </select>
+      </div>
+
+      <!-- 选择图片 -->
+      <div v-if="backgroundType === 'picture'" class="picture-selection">
+        <div class="selection-label">选择图片</div>
+        <div class="image-grid">
+          <div
+            v-for="(image, index) in backgroundImages"
+            :key="index"
+            class="image-option"
+            :class="{ selected: selectedImage === image }"
+            @click="selectImage(image)"
+          >
+            <img :src="image" :alt="`背景图片 ${index + 1}`" />
+            <div v-if="selectedImage === image" class="selected-check">✓</div>
+          </div>
+        </div>
+        <button class="browse-button">浏览</button>
+      </div>
+
+      <!-- 纯色选择 -->
+      <div v-if="backgroundType === 'solid'" class="color-selection">
+        <div class="selection-label">选择你的背景色</div>
+        <div class="color-grid">
+          <div
+            v-for="color in backgroundColors"
+            :key="color"
+            class="color-option"
+            :style="{ backgroundColor: color }"
+            :class="{ selected: selectedColor === color }"
+            @click="selectColor(color)"
+          >
+            <div v-if="selectedColor === color" class="selected-check">✓</div>
+          </div>
+        </div>
+        <div class="custom-color-section">
+          <button class="custom-color-button">
+            <span class="plus-icon">+</span>
+            自定义颜色
+          </button>
+        </div>
+      </div>
+
+      <div v-if="backgroundType === 'picture'" class="fit-selection">
+        <label class="setting-label">选择适合度</label>
+        <select v-model="imageFit" class="windows-select">
+          <option value="fill">填充</option>
+          <option value="fit">适应</option>
+          <option value="stretch">拉伸</option>
+          <option value="tile">平铺</option>
+          <option value="center">居中</option>
+          <option value="span">跨区</option>
+        </select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { sendPersonalizationMsg } from '../../index'
+
+// 响应式数据
+const backgroundType = ref('picture')
+const selectedImage = ref('/images/beach-cave.jpg')
+const selectedColor = ref('#D13438')
+const imageFit = ref('fill')
+
+// 监听背景类型变化
+watch(backgroundType, (newValue) => {
+  const typeMap = {
+    picture: '图片',
+    solid: '纯色',
+    slideshow: '幻灯片放映'
+  }
+  sendPersonalizationMsg('背景类型', 'backgroundType', typeMap[newValue] || newValue)
+})
+
+// 监听选中图片变化
+watch(selectedImage, (newValue) => {
+  sendPersonalizationMsg('背景图片', 'backgroundImage', newValue)
+})
+
+// 监听选中颜色变化
+watch(selectedColor, (newValue) => {
+  sendPersonalizationMsg('背景颜色', 'backgroundColor', newValue)
+})
+
+// 监听图片适合度变化
+watch(imageFit, (newValue) => {
+  const fitMap = {
+    fill: '填充',
+    fit: '适应',
+    stretch: '拉伸',
+    tile: '平铺',
+    center: '居中',
+    span: '跨区'
+  }
+  sendPersonalizationMsg('图片适合度', 'imageFit', fitMap[newValue] || newValue)
+})
+
+// 背景图片列表
+const backgroundImages = ref([
+  '/images/beach-cave.jpg',
+  '/images/bridge.jpg',
+  '/images/underwater.jpg',
+  '/images/mountain-lake.jpg',
+  '/images/mountain-road.jpg'
+])
+
+// 背景颜色列表
+const backgroundColors = ref([
+  '#FF8C00',
+  '#FFD700',
+  '#FFA500',
+  '#DC143C',
+  '#FF6347',
+  '#FF4500',
+  '#FF1493',
+  '#FF69B4',
+  '#DA70D6',
+  '#BA55D3',
+  '#9370DB',
+  '#8A2BE2',
+  '#9400D3',
+  '#4B0082',
+  '#0000FF',
+  '#0080FF',
+  '#1E90FF',
+  '#00BFFF',
+  '#87CEEB',
+  '#87CEFA',
+  '#00CED1',
+  '#40E0D0',
+  '#00FFFF',
+  '#00FF7F',
+  '#00FA9A',
+  '#00FF00',
+  '#9AFF9A',
+  '#90EE90',
+  '#ADFF2F',
+  '#7FFF00',
+  '#32CD32',
+  '#228B22',
+  '#008000',
+  '#556B2F',
+  '#8FBC8F',
+  '#696969',
+  '#708090',
+  '#2F4F4F',
+  '#000000'
+])
+
+// 计算预览样式
+const getPreviewStyle = computed(() => {
+  if (backgroundType.value === 'picture') {
+    return {
+      backgroundImage: `url(${selectedImage.value})`,
+      backgroundSize:
+        imageFit.value === 'fill'
+          ? 'cover'
+          : imageFit.value === 'fit'
+            ? 'contain'
+            : imageFit.value === 'stretch'
+              ? '100% 100%'
+              : imageFit.value === 'tile'
+                ? 'auto'
+                : 'contain',
+      backgroundRepeat: imageFit.value === 'tile' ? 'repeat' : 'no-repeat',
+      backgroundPosition: 'center'
+    }
+  } else {
+    return {
+      backgroundColor: selectedColor.value
+    }
+  }
+})
+
+// 方法
+const onBackgroundTypeChange = () => {
+  // 背景类型改变时的处理
+}
+
+const selectImage = (image: string) => {
+  selectedImage.value = image
+  sendPersonalizationMsg('选择背景图片', 'selectImage', image)
+}
+
+const selectColor = (color: string) => {
+  selectedColor.value = color
+  sendPersonalizationMsg('选择背景颜色', 'selectColor', color)
+}
+</script>
+
+<style scoped>
+.background-detail {
+  max-width: 800px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 400;
+  margin: 0 0 16px 0;
+  color: #323130;
+}
+
+.preview-section {
+  margin-bottom: 32px;
+}
+
+.background-preview {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+
+.monitor-frame {
+  position: relative;
+  width: 300px;
+  height: 169px;
+  border: 8px solid #2d2d2d;
+  border-radius: 8px;
+  background: #000;
+}
+
+.monitor-screen {
+  width: 100%;
+  height: 100%;
+  border-radius: 2px;
+  position: relative;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.taskbar-preview {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 28px;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+}
+
+.start-button-preview {
+  width: 28px;
+  height: 20px;
+  background: #0078d4;
+  margin-right: 8px;
+  border-radius: 2px;
+}
+
+.taskbar-icons {
+  display: flex;
+  gap: 4px;
+  flex: 1;
+}
+
+.taskbar-icon {
+  width: 20px;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+}
+
+.time-preview {
+  color: white;
+  font-size: 8px;
+  text-align: right;
+  line-height: 1.2;
+}
+
+.time-preview span {
+  font-size: 6px;
+  opacity: 0.8;
+}
+
+.settings-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.setting-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.setting-label {
+  font-size: 15px;
+  font-weight: 400;
+  color: #323130;
+}
+
+.windows-select {
+  padding: 8px 12px;
+  border: 2px solid #8a8886;
+  border-radius: 2px;
+  background: white;
+  font-size: 14px;
+  color: #323130;
+  font-family: 'Segoe UI', sans-serif;
+  max-width: 200px;
+}
+
+.windows-select:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+
+.selection-label {
+  font-size: 15px;
+  font-weight: 400;
+  color: #323130;
+  margin-bottom: 16px;
+}
+
+.image-grid {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.image-option {
+  position: relative;
+  width: 80px;
+  height: 45px;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.image-option:hover {
+  border-color: #0078d4;
+}
+
+.image-option.selected {
+  border-color: #0078d4;
+  border-width: 3px;
+}
+
+.image-option img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.selected-check {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 16px;
+  height: 16px;
+  background: #0078d4;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: bold;
+}
+
+.color-grid {
+  display: grid;
+  grid-template-columns: repeat(14, 32px);
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.color-option {
+  width: 32px;
+  height: 32px;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s;
+}
+
+.color-option:hover {
+  border-color: #323130;
+}
+
+.color-option.selected {
+  border-color: #323130;
+  border-width: 3px;
+}
+
+.color-option .selected-check {
+  background: rgba(0, 0, 0, 0.7);
+  width: 14px;
+  height: 14px;
+  font-size: 8px;
+}
+
+.custom-color-section {
+  margin-top: 16px;
+}
+
+.custom-color-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: #f3f2f1;
+  border: 1px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.custom-color-button:hover {
+  background: #edebe9;
+}
+
+.plus-icon {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.browse-button {
+  padding: 8px 16px;
+  background: #0078d4;
+  color: white;
+  border: none;
+  border-radius: 2px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.browse-button:hover {
+  background: #106ebe;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/personalization/ColorsDetail.vue b/src/components/WindowsSystemSetting/components/personalization/ColorsDetail.vue
new file mode 100644
index 0000000..ac3e70b
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/personalization/ColorsDetail.vue
@@ -0,0 +1,504 @@
+<template>
+  <div class="colors-detail">
+    <div class="preview-section">
+      <div class="color-preview">
+        <div class="preview-container">
+          <div class="desktop-preview" :style="{ background: getGradientBackground }">
+            <div class="window-preview">
+              <div class="window-titlebar" :style="{ backgroundColor: accentColor }">
+                <div class="window-buttons">
+                  <div class="window-button"></div>
+                  <div class="window-button"></div>
+                  <div class="window-button"></div>
+                </div>
+              </div>
+              <div class="window-content">
+                <div class="sample-text">Aa</div>
+              </div>
+            </div>
+            <div class="taskbar-preview" :style="getTaskbarStyle">
+              <div class="start-button"></div>
+              <div class="taskbar-icons">
+                <div class="taskbar-icon"></div>
+                <div class="taskbar-icon"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="settings-section">
+      <!-- 选择颜色模式 -->
+      <div class="color-mode-section">
+        <label class="setting-label">选择你的颜色</label>
+        <div class="mode-options">
+          <label class="mode-option">
+            <input type="radio" v-model="colorMode" value="light" />
+            <span class="mode-text">浅色</span>
+          </label>
+          <label class="mode-option">
+            <input type="radio" v-model="colorMode" value="dark" />
+            <span class="mode-text">深色</span>
+          </label>
+          <label class="mode-option">
+            <input type="radio" v-model="colorMode" value="custom" />
+            <span class="mode-text">自定义</span>
+          </label>
+        </div>
+      </div>
+
+      <!-- 透明效果 -->
+      <div class="transparency-section">
+        <label class="setting-label">透明效果</label>
+        <div class="toggle-container">
+          <div
+            class="toggle-switch"
+            :class="{ active: transparencyEnabled }"
+            @click="transparencyEnabled = !transparencyEnabled"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <span class="toggle-text">{{ transparencyEnabled ? '开' : '关' }}</span>
+        </div>
+      </div>
+
+      <!-- 选择主题色 -->
+      <div class="accent-section">
+        <label class="setting-label">选择你的主题色</label>
+        <div class="auto-color-section">
+          <label class="checkbox-option">
+            <input type="checkbox" v-model="autoAccentColor" />
+            <span class="checkbox-text">从我的背景自动选择一种主题色</span>
+          </label>
+        </div>
+
+        <!-- Windows 颜色调色板 -->
+        <div class="windows-colors-title">Windows 颜色</div>
+        <div class="color-palette">
+          <div
+            v-for="color in windowsColors"
+            :key="color"
+            class="accent-color"
+            :style="{ backgroundColor: color }"
+            :class="{ selected: accentColor === color }"
+            @click="selectAccentColor(color)"
+          >
+            <div v-if="accentColor === color" class="color-check">✓</div>
+          </div>
+        </div>
+
+        <div class="custom-color-section">
+          <button class="custom-color-button">
+            <span class="plus-icon">+</span>
+            自定义颜色
+          </button>
+        </div>
+      </div>
+
+      <!-- 在以下区域选择主题颜色 -->
+      <div class="accent-places-section">
+        <div class="section-title">在以下区域选择主题颜色</div>
+        <div class="place-options">
+          <label class="checkbox-option">
+            <input type="checkbox" v-model="showOnStartTaskbar" />
+            <span class="checkbox-text">"开始"菜单、任务栏和操作中心</span>
+          </label>
+          <label class="checkbox-option">
+            <input type="checkbox" v-model="showOnTitleBars" />
+            <span class="checkbox-text">标题栏和窗口边框</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// 响应式数据
+const colorMode = ref('light')
+const transparencyEnabled = ref(false)
+const autoAccentColor = ref(false)
+const accentColor = ref('#D13438')
+const showOnStartTaskbar = ref(false)
+const showOnTitleBars = ref(false)
+
+// Windows 10 颜色调色板
+const windowsColors = ref([
+  '#FFAA44',
+  '#FF8800',
+  '#FF4400',
+  '#CC4400',
+  '#FF6644',
+  '#FF0000',
+  '#FF3377',
+  '#FF4455',
+  '#CC0066',
+  '#DD0077',
+  '#BB0099',
+  '#AA00BB',
+  '#8800DD',
+  '#6600FF',
+  '#4455FF',
+  '#0066FF',
+  '#0088FF',
+  '#00AAFF',
+  '#00CCFF',
+  '#00DDCC',
+  '#00FFAA',
+  '#44FF88',
+  '#88FF44',
+  '#AAFF00',
+  '#CCFF00',
+  '#FFFF00',
+  '#FFCC00',
+  '#FF8800',
+  '#666666',
+  '#777777',
+  '#888888',
+  '#999999',
+  '#AAAAAA',
+  '#BBBBBB',
+  '#CCCCCC'
+])
+
+// 计算背景渐变
+const getGradientBackground = computed(() => {
+  const baseColor = colorMode.value === 'dark' ? '#1a1a1a' : '#ffffff'
+  return `linear-gradient(135deg, ${baseColor} 0%, ${accentColor.value}22 100%)`
+})
+
+// 计算任务栏样式
+const getTaskbarStyle = computed(() => {
+  const baseStyle = {
+    backgroundColor: colorMode.value === 'dark' ? '#1f1f1f' : '#f3f2f1'
+  }
+
+  if (showOnStartTaskbar.value) {
+    return {
+      ...baseStyle,
+      backgroundColor: accentColor.value,
+      opacity: transparencyEnabled.value ? '0.85' : '1'
+    }
+  }
+
+  return {
+    ...baseStyle,
+    opacity: transparencyEnabled.value ? '0.85' : '1'
+  }
+})
+
+// 方法
+const selectAccentColor = (color: string) => {
+  accentColor.value = color
+  autoAccentColor.value = false
+}
+</script>
+
+<style scoped>
+.colors-detail {
+  max-width: 800px;
+}
+
+.preview-section {
+  margin-bottom: 32px;
+}
+
+.color-preview {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+
+.preview-container {
+  width: 400px;
+  height: 225px;
+  border: 1px solid #e1dfdd;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.desktop-preview {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.window-preview {
+  width: 200px;
+  height: 120px;
+  background: white;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.window-titlebar {
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 8px;
+}
+
+.window-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.window-button {
+  width: 12px;
+  height: 12px;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+}
+
+.window-content {
+  height: 88px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+}
+
+.sample-text {
+  font-size: 48px;
+  font-weight: 300;
+  color: #323130;
+  font-family: 'Segoe UI', sans-serif;
+}
+
+.taskbar-preview {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 16px;
+}
+
+.start-button {
+  width: 32px;
+  height: 32px;
+  background: #0078d4;
+  border-radius: 2px;
+}
+
+.taskbar-icons {
+  display: flex;
+  gap: 8px;
+}
+
+.taskbar-icon {
+  width: 32px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+}
+
+.settings-section {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.setting-label {
+  font-size: 15px;
+  font-weight: 400;
+  color: #323130;
+  margin-bottom: 12px;
+  display: block;
+}
+
+.mode-options {
+  display: flex;
+  gap: 24px;
+}
+
+.mode-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.mode-option input[type='radio'] {
+  width: 16px;
+  height: 16px;
+}
+
+.mode-text {
+  font-size: 14px;
+  color: #323130;
+}
+
+.transparency-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.toggle-switch {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background: #8a8886;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.toggle-switch.active {
+  background: #0078d4;
+}
+
+.toggle-slider {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+
+.toggle-switch.active .toggle-slider {
+  transform: translateX(20px);
+}
+
+.toggle-text {
+  font-size: 14px;
+  color: #323130;
+}
+
+.accent-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.auto-color-section {
+  margin-bottom: 8px;
+}
+
+.checkbox-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  margin-bottom: 8px;
+}
+
+.checkbox-option input[type='checkbox'] {
+  width: 16px;
+  height: 16px;
+}
+
+.checkbox-text {
+  font-size: 14px;
+  color: #323130;
+}
+
+.windows-colors-title {
+  font-size: 15px;
+  color: #d13438;
+  margin-bottom: 16px;
+  font-weight: 400;
+}
+
+.color-palette {
+  display: grid;
+  grid-template-columns: repeat(14, 32px);
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.accent-color {
+  width: 32px;
+  height: 32px;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.accent-color:hover {
+  border-color: #323130;
+}
+
+.accent-color.selected {
+  border-color: #323130;
+  border-width: 3px;
+}
+
+.color-check {
+  color: white;
+  font-size: 14px;
+  font-weight: bold;
+  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
+}
+
+.custom-color-section {
+  margin-top: 8px;
+}
+
+.custom-color-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: #f3f2f1;
+  border: 1px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.custom-color-button:hover {
+  background: #edebe9;
+}
+
+.plus-icon {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.accent-places-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 400;
+  color: #323130;
+}
+
+.place-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/personalization/FontsDetail.vue b/src/components/WindowsSystemSetting/components/personalization/FontsDetail.vue
new file mode 100644
index 0000000..cb8c4ee
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/personalization/FontsDetail.vue
@@ -0,0 +1,428 @@
+<template>
+  <div class="fonts-detail">
+    <div class="font-preview-section">
+      <div class="add-fonts-section">
+        <div class="add-fonts-header">
+          <h2 class="section-title">添加字体</h2>
+          <div class="drag-drop-area" @dragover.prevent @drop="handleDrop">
+            <div class="drag-icon">
+              <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+                <path
+                  d="M12 8h24l6 6v28a2 2 0 01-2 2H8a2 2 0 01-2-2V10a2 2 0 012-2z"
+                  stroke="#605e5c"
+                  stroke-width="2"
+                  fill="none"
+                />
+                <path d="M36 8v6h6" stroke="#605e5c" stroke-width="2" fill="none" />
+                <path d="M16 28h16M24 20v16" stroke="#605e5c" stroke-width="2" />
+              </svg>
+            </div>
+            <div class="drag-text">
+              <div class="primary-text">拖放以安装</div>
+              <div class="secondary-text"
+                >将字体文件从文件资源管理器或其他应用拖到此区域，以便在你的设备上安装字体。</div
+              >
+            </div>
+          </div>
+        </div>
+        <div class="store-link-container">
+          <div class="store-icon">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="#0078d4">
+              <path
+                d="M8 0L2 3v10l6 3 6-3V3L8 0zm0 2l4 2-4 2-4-2 4-2zm-4 3l4 2v6l-4-2V5zm8 0v6l-4 2V7l4-2z"
+              />
+            </svg>
+          </div>
+          <a href="#" class="store-link" @click="openFontStore">
+            在 Microsoft Store 中获取更多字体
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="available-fonts-section">
+      <h2 class="section-title">可用字体</h2>
+
+      <!-- 搜索框 -->
+      <div class="search-container">
+        <div class="search-box">
+          <div class="search-icon">🔍</div>
+          <input
+            type="text"
+            v-model="searchQuery"
+            placeholder="在此输入进行搜索..."
+            class="search-input"
+          />
+        </div>
+      </div>
+
+      <!-- 筛选条件 -->
+      <div class="filter-section">
+        <div class="filter-group">
+          <label class="filter-label">筛选条件：</label>
+          <select v-model="selectedFilter" class="filter-select">
+            <option value="all">中文(简体)</option>
+            <option value="latin">拉丁文</option>
+            <option value="symbol">符号</option>
+          </select>
+        </div>
+      </div>
+
+      <!-- 字体列表 -->
+      <div class="fonts-list">
+        <div
+          v-for="font in filteredFonts"
+          :key="font.name"
+          class="font-item"
+          @click="previewFont(font)"
+        >
+          <div class="font-preview">
+            <div class="font-sample" :style="{ fontFamily: font.family }">
+              {{ font.sample }}
+            </div>
+          </div>
+          <div class="font-info">
+            <div class="font-name">{{ font.name }}</div>
+            <div class="font-files">{{ font.files }} 种字体</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// 响应式数据
+const searchQuery = ref('')
+const selectedFilter = ref('all')
+
+// 字体列表
+const availableFonts = ref([
+  {
+    name: '仿宋',
+    family: 'FangSong, serif',
+    sample: '日出江花红似火，春来江水绿如蓝。',
+    files: 1
+  },
+  {
+    name: '黑体',
+    family: 'SimHei, sans-serif',
+    sample: '落霞与孤鹜齐飞，秋水共长天一色。',
+    files: 1
+  },
+  {
+    name: '楷体',
+    family: 'KaiTi, serif',
+    sample: '湖水冲淡了他们留在沙滩上的脚印。',
+    files: 1
+  },
+  {
+    name: '楷体',
+    family: 'KaiTi, serif',
+    sample: '湖水冲淡了他们留在沙滩上的脚印。',
+    files: 1
+  },
+  {
+    name: 'Microsoft YaHei',
+    family: 'Microsoft YaHei, sans-serif',
+    sample: '海浪的声音安抚了我的心灵',
+    files: 4
+  },
+  {
+    name: 'Segoe UI',
+    family: 'Segoe UI, sans-serif',
+    sample: 'The quick brown fox jumps over the lazy dog.',
+    files: 6
+  }
+])
+
+// 过滤后的字体
+const filteredFonts = computed(() => {
+  let fonts = availableFonts.value
+
+  if (searchQuery.value) {
+    fonts = fonts.filter((font) =>
+      font.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+    )
+  }
+
+  return fonts
+})
+
+// 方法
+const handleDrop = (e: DragEvent) => {
+  e.preventDefault()
+  const files = e.dataTransfer?.files
+  if (files && files.length > 0) {
+    console.log(
+      '安装字体文件:',
+      Array.from(files).map((f) => f.name)
+    )
+    // 这里可以实现字体安装逻辑
+  }
+}
+
+const openFontStore = (e: Event) => {
+  e.preventDefault()
+  console.log('打开 Microsoft Store 字体页面')
+}
+
+const previewFont = (font: any) => {
+  console.log('预览字体:', font.name)
+}
+</script>
+
+<style scoped>
+.fonts-detail {
+  max-width: 800px;
+}
+
+.font-preview-section {
+  margin-bottom: 48px;
+}
+
+.add-fonts-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.add-fonts-header {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 400;
+  margin: 0;
+  color: #323130;
+}
+
+.drag-drop-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 48px 32px;
+  border: 2px dashed #8a8886;
+  border-radius: 4px;
+  background: #faf9f8;
+  transition: all 0.2s;
+  text-align: center;
+}
+
+.drag-drop-area:hover {
+  border-color: #0078d4;
+  background: #f3f2f1;
+}
+
+.drag-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.drag-icon svg {
+  width: 48px;
+  height: 48px;
+}
+
+.drag-text {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.store-link-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.store-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.store-link {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.store-link:hover {
+  text-decoration: underline;
+}
+
+.primary-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #323130;
+  margin-bottom: 8px;
+}
+
+.secondary-text {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.store-link {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  align-self: flex-start;
+}
+
+.store-link:hover {
+  text-decoration: underline;
+}
+
+.available-fonts-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.search-container {
+  display: flex;
+  justify-content: center;
+}
+
+.search-box {
+  position: relative;
+  width: 400px;
+  max-width: 100%;
+}
+
+.search-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #605e5c;
+}
+
+.search-input {
+  width: 100%;
+  padding: 12px 12px 12px 40px;
+  border: 2px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  font-family: 'Segoe UI', sans-serif;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+
+.search-input::placeholder {
+  color: #8a8886;
+}
+
+.filter-section {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-label {
+  font-size: 14px;
+  color: #323130;
+}
+
+.filter-select {
+  padding: 6px 12px;
+  border: 2px solid #8a8886;
+  border-radius: 2px;
+  background: white;
+  font-size: 14px;
+  color: #323130;
+}
+
+.filter-select:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+
+.fonts-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.font-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  background: white;
+  border: 1px solid #e1dfdd;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.font-item:hover {
+  background: #f8f9fa;
+  border-color: #c8c6c4;
+}
+
+.font-item:first-child {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+.font-item:last-child {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.font-preview {
+  flex: 1;
+  min-width: 0;
+}
+
+.font-sample {
+  font-size: 16px;
+  color: #323130;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.font-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.font-name {
+  font-size: 14px;
+  color: #0078d4;
+  font-weight: 400;
+}
+
+.font-files {
+  font-size: 12px;
+  color: #605e5c;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/personalization/LockScreenDetail.vue b/src/components/WindowsSystemSetting/components/personalization/LockScreenDetail.vue
new file mode 100644
index 0000000..3840279
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/personalization/LockScreenDetail.vue
@@ -0,0 +1,416 @@
+<template>
+  <div class="lock-screen-detail">
+    <div class="preview-section">
+      <h2 class="section-title">预览</h2>
+      <div class="lock-screen-preview">
+        <div class="screen-frame">
+          <div class="lock-screen" :style="{ backgroundImage: `url(${selectedBackground})` }">
+            <div class="lock-overlay">
+              <div class="lock-time">11:28</div>
+              <div class="lock-date">11月5日，星期四</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="settings-section">
+      <!-- 背景设置 -->
+      <div class="background-section">
+        <label class="setting-label">背景</label>
+        <select v-model="backgroundType" class="windows-select">
+          <option value="picture">图片</option>
+          <option value="slideshow">幻灯片放映</option>
+          <option value="spotlight">Windows 聚焦</option>
+        </select>
+      </div>
+
+      <!-- 选择图片 -->
+      <div v-if="backgroundType === 'picture'" class="image-selection">
+        <div class="selection-label">选择图片</div>
+        <div class="image-grid">
+          <div
+            v-for="(image, index) in lockScreenImages"
+            :key="index"
+            class="image-option"
+            :class="{ selected: selectedBackground === image }"
+            @click="selectBackground(image)"
+          >
+            <img :src="image" :alt="`锁屏图片 ${index + 1}`" />
+            <div v-if="selectedBackground === image" class="selected-check">✓</div>
+          </div>
+        </div>
+        <button class="browse-button">浏览</button>
+      </div>
+
+      <!-- Windows 聚焦设置 -->
+      <div v-if="backgroundType === 'spotlight'" class="spotlight-section">
+        <label class="checkbox-option">
+          <input type="checkbox" v-model="showFunFacts" />
+          <span class="checkbox-text">在锁屏界面上显示 Windows 和 Cortana 获取花絮、提示灯</span>
+        </label>
+      </div>
+
+      <!-- 选择应用 -->
+      <div class="apps-section">
+        <div class="detailed-app-section">
+          <div class="apps-label">选择在锁屏界面上显示详细状态的应用</div>
+          <div class="app-slots">
+            <div
+              class="app-slot detailed-slot"
+              :class="{ filled: detailedApp }"
+              @click="selectDetailedApp"
+            >
+              <div v-if="detailedApp" class="app-icon">📧</div>
+              <div v-else class="plus-icon">+</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="quick-apps-section">
+          <div class="apps-label">选择要在锁屏界面上显示快速状态的应用</div>
+          <div class="app-slots">
+            <div
+              v-for="i in 7"
+              :key="i"
+              class="app-slot quick-slot"
+              :class="{ filled: quickApps[i - 1] }"
+              @click="selectQuickApp(i - 1)"
+            >
+              <div v-if="quickApps[i - 1]" class="app-icon">{{ quickApps[i - 1] }}</div>
+              <div v-else class="plus-icon">+</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 其他设置 -->
+      <div class="other-settings">
+        <label class="checkbox-option">
+          <input type="checkbox" v-model="showBackgroundOnLogin" />
+          <span class="checkbox-text">在登录屏幕上显示锁屏界面背景图片</span>
+        </label>
+      </div>
+
+      <!-- 链接设置 -->
+      <div class="related-links">
+        <a href="#" class="link-item" @click="openScreensaverSettings">屏幕超时设置</a>
+        <a href="#" class="link-item" @click="openScreensaverSettings">屏保设置</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 响应式数据
+const backgroundType = ref('picture')
+const selectedBackground = ref('/images/beach-cave.jpg')
+const showFunFacts = ref(false)
+const detailedApp = ref(true)
+const quickApps = ref(['📧', '', '', '', '', '', ''])
+const showBackgroundOnLogin = ref(false)
+
+// 锁屏图片列表
+const lockScreenImages = ref([
+  '/images/beach-cave.jpg',
+  '/images/bridge.jpg',
+  '/images/underwater.jpg',
+  '/images/mountain-lake.jpg',
+  '/images/mountain-road.jpg'
+])
+
+// 方法
+const selectBackground = (image: string) => {
+  selectedBackground.value = image
+}
+
+const selectDetailedApp = () => {
+  // 打开应用选择对话框
+  console.log('选择详细状态应用')
+}
+
+const selectQuickApp = (index: number) => {
+  // 打开应用选择对话框
+  console.log('选择快速状态应用', index)
+}
+
+const openScreensaverSettings = (e: Event) => {
+  e.preventDefault()
+  console.log('打开屏保设置')
+}
+</script>
+
+<style scoped>
+.lock-screen-detail {
+  max-width: 800px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 400;
+  margin: 0 0 16px 0;
+  color: #323130;
+}
+
+.preview-section {
+  margin-bottom: 32px;
+}
+
+.lock-screen-preview {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+
+.screen-frame {
+  width: 300px;
+  height: 169px;
+  border: 8px solid #2d2d2d;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.lock-screen {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.lock-overlay {
+  color: white;
+  text-align: center;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
+}
+
+.lock-time {
+  font-size: 48px;
+  font-weight: 100;
+  margin-bottom: 8px;
+}
+
+.lock-date {
+  font-size: 16px;
+  font-weight: 300;
+}
+
+.settings-section {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.background-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.setting-label {
+  font-size: 15px;
+  font-weight: 400;
+  color: #323130;
+}
+
+.windows-select {
+  padding: 8px 12px;
+  border: 2px solid #8a8886;
+  border-radius: 2px;
+  background: white;
+  font-size: 14px;
+  color: #323130;
+  font-family: 'Segoe UI', sans-serif;
+  max-width: 200px;
+}
+
+.windows-select:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+
+.selection-label {
+  font-size: 15px;
+  font-weight: 400;
+  color: #323130;
+  margin-bottom: 16px;
+}
+
+.image-grid {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.image-option {
+  position: relative;
+  width: 80px;
+  height: 45px;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.image-option:hover {
+  border-color: #0078d4;
+}
+
+.image-option.selected {
+  border-color: #0078d4;
+  border-width: 3px;
+}
+
+.image-option img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.selected-check {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 16px;
+  height: 16px;
+  background: #0078d4;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: bold;
+}
+
+.browse-button {
+  padding: 8px 16px;
+  background: #0078d4;
+  color: white;
+  border: none;
+  border-radius: 2px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.browse-button:hover {
+  background: #106ebe;
+}
+
+.spotlight-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.checkbox-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  cursor: pointer;
+  margin-bottom: 8px;
+}
+
+.checkbox-option input[type='checkbox'] {
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+}
+
+.checkbox-text {
+  font-size: 14px;
+  color: #323130;
+  line-height: 1.4;
+}
+
+.apps-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.apps-label {
+  font-size: 15px;
+  font-weight: 400;
+  color: #323130;
+  margin-bottom: 16px;
+}
+
+.app-slots {
+  display: flex;
+  gap: 8px;
+}
+
+.app-slot {
+  width: 40px;
+  height: 40px;
+  border: 2px dashed #8a8886;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: #f8f9fa;
+}
+
+.app-slot:hover {
+  border-color: #0078d4;
+  background: #f3f2f1;
+}
+
+.app-slot.filled {
+  border-style: solid;
+  border-color: #323130;
+  background: white;
+}
+
+.detailed-slot {
+  width: 60px;
+  height: 40px;
+}
+
+.app-icon {
+  font-size: 20px;
+}
+
+.plus-icon {
+  font-size: 20px;
+  color: #8a8886;
+  font-weight: bold;
+}
+
+.other-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.related-links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 16px;
+  border-top: 1px solid #e1dfdd;
+}
+
+.link-item {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+  padding: 4px 0;
+}
+
+.link-item:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/personalization/StartDetail.vue b/src/components/WindowsSystemSetting/components/personalization/StartDetail.vue
new file mode 100644
index 0000000..311056d
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/personalization/StartDetail.vue
@@ -0,0 +1,315 @@
+<template>
+  <div class="start-detail">
+    <div class="start-options">
+      <div class="toggle-section">
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label">在"开始"菜单上显示更多磁贴</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: showMoreTiles }"
+            @click="showMoreTiles = !showMoreTiles"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ showMoreTiles ? '开' : '关' }}</div>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label">在"开始"菜单中显示应用列表</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: showAppList }"
+            @click="showAppList = !showAppList"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ showAppList ? '开' : '关' }}</div>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label">显示最近添加的应用</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: showRecentApps }"
+            @click="showRecentApps = !showRecentApps"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ showRecentApps ? '开' : '关' }}</div>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label">显示最常用的应用</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: showMostUsed }"
+            @click="showMostUsed = !showMostUsed"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ showMostUsed ? '开' : '关' }}</div>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label">偶尔在"开始"菜单中显示建议</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: showSuggestions }"
+            @click="showSuggestions = !showSuggestions"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ showSuggestions ? '开' : '关' }}</div>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label">使用全屏"开始"屏幕</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: useFullScreen }"
+            @click="useFullScreen = !useFullScreen"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ useFullScreen ? '开' : '关' }}</div>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label"
+              >在"开始"菜单或任务栏的跳转列表中以及文件资源管理器的"快速访问"中显示最近打开的项</div
+            >
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: showRecentItems }"
+            @click="showRecentItems = !showRecentItems"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ showRecentItems ? '开' : '关' }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="folders-section">
+      <div class="section-title">选择哪些文件夹显示在"开始"菜单上</div>
+      <div class="folders-grid">
+        <div v-for="folder in startFolders" :key="folder.key" class="folder-item">
+          <div class="folder-info">
+            <div class="folder-name">{{ folder.name }}</div>
+          </div>
+          <div
+            class="toggle-switch small"
+            :class="{ active: folder.enabled }"
+            @click="toggleFolder(folder)"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ folder.enabled ? '开' : '关' }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 文件夹选择链接 -->
+    <div class="folders-link-section">
+      <a href="#" class="folders-link" @click="selectFolders"> 选择哪些文件夹显示在"开始"菜单上 </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 响应式数据
+const showMoreTiles = ref(false)
+const showAppList = ref(false)
+const showRecentApps = ref(false)
+const showMostUsed = ref(false)
+const showSuggestions = ref(true)
+const useFullScreen = ref(false)
+const showRecentItems = ref(false)
+
+// 开始菜单文件夹设置
+const startFolders = ref([
+  { key: 'file-explorer', name: '文件资源管理器', enabled: true },
+  { key: 'settings', name: '设置', enabled: true },
+  { key: 'documents', name: '文档', enabled: false },
+  { key: 'downloads', name: '下载', enabled: false },
+  { key: 'music', name: '音乐', enabled: false },
+  { key: 'pictures', name: '图片', enabled: false },
+  { key: 'videos', name: '视频', enabled: false },
+  { key: 'homegroup', name: '家庭组', enabled: false },
+  { key: 'network', name: '网络', enabled: false },
+  { key: 'personal-folder', name: '个人文件夹', enabled: false }
+])
+
+// 方法
+const toggleFolder = (folder: any) => {
+  folder.enabled = !folder.enabled
+}
+
+const selectFolders = (e: Event) => {
+  e.preventDefault()
+  console.log('打开文件夹选择设置')
+}
+</script>
+
+<style scoped>
+.start-detail {
+  max-width: 800px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.toggle-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.toggle-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 0;
+  border-bottom: 1px solid #f3f2f1;
+}
+
+.toggle-item:last-child {
+  border-bottom: none;
+}
+
+.toggle-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+  line-height: 1.4;
+}
+
+.toggle-switch {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background: #8a8886;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  flex-shrink: 0;
+}
+
+.toggle-switch.small {
+  width: 36px;
+  height: 20px;
+  border-radius: 10px;
+}
+
+.toggle-switch.active {
+  background: #0078d4;
+}
+
+.toggle-slider {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+
+.toggle-switch.small .toggle-slider {
+  width: 16px;
+  height: 16px;
+}
+
+.toggle-switch.active .toggle-slider {
+  transform: translateX(20px);
+}
+
+.toggle-switch.small.active .toggle-slider {
+  transform: translateX(16px);
+}
+
+.toggle-state {
+  font-size: 14px;
+  color: #605e5c;
+  min-width: 24px;
+  flex-shrink: 0;
+}
+
+.folders-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.folders-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.folder-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 0;
+  border-bottom: 1px solid #f8f9fa;
+}
+
+.folder-item:last-child {
+  border-bottom: none;
+}
+
+.folder-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.folder-name {
+  font-size: 14px;
+  color: #323130;
+}
+
+.folders-link-section {
+  margin-top: 32px;
+  padding-top: 16px;
+  border-top: 1px solid #f8f9fa;
+}
+
+.folders-link {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.folders-link:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/personalization/TaskbarDetail.vue b/src/components/WindowsSystemSetting/components/personalization/TaskbarDetail.vue
new file mode 100644
index 0000000..e292866
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/personalization/TaskbarDetail.vue
@@ -0,0 +1,387 @@
+<template>
+  <div class="taskbar-detail">
+    <div class="taskbar-options">
+      <div class="toggle-section">
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label">锁定任务栏</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: lockTaskbar }"
+            @click="lockTaskbar = !lockTaskbar"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ lockTaskbar ? '开' : '关' }}</div>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label">在桌面模式下自动隐藏任务栏</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: autoHideDesktop }"
+            @click="autoHideDesktop = !autoHideDesktop"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ autoHideDesktop ? '开' : '关' }}</div>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label">在平板模式下自动隐藏任务栏</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: autoHideTablet }"
+            @click="autoHideTablet = !autoHideTablet"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ autoHideTablet ? '开' : '关' }}</div>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label">使用小任务栏按钮</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: useSmallButtons }"
+            @click="useSmallButtons = !useSmallButtons"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ useSmallButtons ? '开' : '关' }}</div>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label"
+              >当你将鼠标悬停在任务栏末尾的"显示桌面"按钮上时，使用"速览"预览桌面</div
+            >
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: useDesktopPeek }"
+            @click="useDesktopPeek = !useDesktopPeek"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ useDesktopPeek ? '开' : '关' }}</div>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label"
+              >当右键单击"开始"按钮或按下 Windows 键+X 时，在菜单中将命令提示符替换为 Windows
+              PowerShell</div
+            >
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: replaceCmdWithPowerShell }"
+            @click="replaceCmdWithPowerShell = !replaceCmdWithPowerShell"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ replaceCmdWithPowerShell ? '开' : '关' }}</div>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label">在任务栏按钮上显示徽标</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: showBadges }"
+            @click="showBadges = !showBadges"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ showBadges ? '开' : '关' }}</div>
+        </div>
+      </div>
+
+      <!-- 任务栏位置 -->
+      <div class="position-section">
+        <label class="setting-label">任务栏在屏幕上的位置</label>
+        <select v-model="taskbarPosition" class="windows-select">
+          <option value="bottom">底部</option>
+          <option value="top">顶部</option>
+          <option value="left">左侧</option>
+          <option value="right">右侧</option>
+        </select>
+        <p class="setting-help">如何自定义任务栏？</p>
+      </div>
+
+      <!-- 合并任务栏按钮 -->
+      <div class="combine-section">
+        <label class="setting-label">合并任务栏按钮</label>
+        <select v-model="combineButtons" class="windows-select">
+          <option value="always">始终合并按钮</option>
+          <option value="when-full">任务栏已满时</option>
+          <option value="never">从不</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- 通知区域 -->
+    <div class="notification-area-section">
+      <div class="section-title">通知区域</div>
+
+      <div class="notification-links">
+        <a href="#" class="link-item" @click="selectNotificationIcons"
+          >选择哪些图标显示在任务栏上</a
+        >
+        <a href="#" class="link-item" @click="toggleSystemIcons">打开或关闭系统图标</a>
+      </div>
+    </div>
+
+    <!-- 人脉 -->
+    <div class="people-section">
+      <div class="section-title">人脉</div>
+
+      <div class="toggle-item">
+        <div class="toggle-info">
+          <div class="toggle-label">在任务栏上显示联系人</div>
+        </div>
+        <div
+          class="toggle-switch"
+          :class="{ active: showContacts }"
+          @click="showContacts = !showContacts"
+        >
+          <div class="toggle-slider"></div>
+        </div>
+        <div class="toggle-state">{{ showContacts ? '开' : '关' }}</div>
+      </div>
+
+      <div class="people-options">
+        <label class="setting-label">选择要显示多少个联系人</label>
+        <select v-model="contactsCount" class="windows-select" :disabled="!showContacts">
+          <option value="3">3</option>
+          <option value="5">5</option>
+          <option value="10">10</option>
+        </select>
+      </div>
+
+      <div class="toggle-item">
+        <div class="toggle-info">
+          <div class="toggle-label">显示"我的人脉"通知</div>
+        </div>
+        <div
+          class="toggle-switch"
+          :class="{ active: showPeopleNotifications }"
+          @click="showPeopleNotifications = !showPeopleNotifications"
+        >
+          <div class="toggle-slider"></div>
+        </div>
+        <div class="toggle-state">{{ showPeopleNotifications ? '开' : '关' }}</div>
+      </div>
+
+      <div class="toggle-item">
+        <div class="toggle-info">
+          <div class="toggle-label">收到"我的人脉"通知时播放声音</div>
+        </div>
+        <div
+          class="toggle-switch"
+          :class="{ active: playNotificationSound }"
+          @click="playNotificationSound = !playNotificationSound"
+        >
+          <div class="toggle-slider"></div>
+        </div>
+        <div class="toggle-state">{{ playNotificationSound ? '开' : '关' }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 响应式数据
+const lockTaskbar = ref(false)
+const autoHideDesktop = ref(false)
+const autoHideTablet = ref(false)
+const useSmallButtons = ref(false)
+const useDesktopPeek = ref(false)
+const replaceCmdWithPowerShell = ref(false)
+const showBadges = ref(false)
+const taskbarPosition = ref('bottom')
+const combineButtons = ref('always')
+const showContacts = ref(false)
+const contactsCount = ref('3')
+const showPeopleNotifications = ref(true)
+const playNotificationSound = ref(false)
+
+// 方法
+const selectNotificationIcons = (e: Event) => {
+  e.preventDefault()
+  console.log('选择通知区域图标')
+}
+
+const toggleSystemIcons = (e: Event) => {
+  e.preventDefault()
+  console.log('切换系统图标')
+}
+</script>
+
+<style scoped>
+.taskbar-detail {
+  max-width: 800px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.toggle-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.toggle-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 0;
+  border-bottom: 1px solid #f3f2f1;
+}
+
+.toggle-item:last-child {
+  border-bottom: none;
+}
+
+.toggle-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+  line-height: 1.4;
+}
+
+.toggle-switch {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background: #8a8886;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  flex-shrink: 0;
+}
+
+.toggle-switch.active {
+  background: #0078d4;
+}
+
+.toggle-slider {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+
+.toggle-switch.active .toggle-slider {
+  transform: translateX(20px);
+}
+
+.toggle-state {
+  font-size: 14px;
+  color: #605e5c;
+  min-width: 24px;
+  flex-shrink: 0;
+}
+
+.position-section,
+.combine-section,
+.people-options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 0;
+  border-bottom: 1px solid #f3f2f1;
+}
+
+.setting-label {
+  font-size: 14px;
+  font-weight: 400;
+  color: #323130;
+  margin-bottom: 8px;
+  display: block;
+}
+
+.setting-help {
+  font-size: 13px;
+  color: #0078d4;
+  margin: 8px 0 0 0;
+  cursor: pointer;
+}
+
+.setting-help:hover {
+  text-decoration: underline;
+}
+
+.windows-select {
+  padding: 8px 12px;
+  border: 2px solid #8a8886;
+  border-radius: 2px;
+  background: white;
+  font-size: 14px;
+  color: #323130;
+  font-family: 'Segoe UI', sans-serif;
+  max-width: 200px;
+}
+
+.windows-select:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+
+.windows-select:disabled {
+  background: #f3f2f1;
+  color: #a19f9d;
+  cursor: not-allowed;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.notification-area-section,
+.people-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.notification-links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.link-item {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+  padding: 4px 0;
+}
+
+.link-item:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/personalization/ThemesDetail.vue b/src/components/WindowsSystemSetting/components/personalization/ThemesDetail.vue
new file mode 100644
index 0000000..d81cbe4
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/personalization/ThemesDetail.vue
@@ -0,0 +1,312 @@
+<template>
+  <div class="themes-detail">
+    <div class="current-theme-section">
+      <div class="current-theme-title">当前主题：自定义</div>
+      <div class="theme-preview">
+        <div class="theme-display">
+          <div class="theme-bg" :style="{ backgroundColor: currentAccentColor }">
+            <div class="theme-window">
+              <div class="window-titlebar"></div>
+              <div class="window-content"></div>
+            </div>
+            <div class="theme-taskbar"></div>
+          </div>
+        </div>
+        <div class="theme-info">
+          <div class="theme-details">
+            <div class="detail-item">
+              <div class="detail-icon">🖼️</div>
+              <div class="detail-text">
+                <div class="detail-label">背景</div>
+                <div class="detail-value">纯色</div>
+              </div>
+            </div>
+            <div class="detail-item">
+              <div class="detail-icon">🎨</div>
+              <div class="detail-text">
+                <div class="detail-label">颜色</div>
+                <div class="detail-value">浅紫红色</div>
+              </div>
+            </div>
+            <div class="detail-item">
+              <div class="detail-icon">🔊</div>
+              <div class="detail-text">
+                <div class="detail-label">声音</div>
+                <div class="detail-value">Windows 默认</div>
+              </div>
+            </div>
+            <div class="detail-item">
+              <div class="detail-icon">🖱️</div>
+              <div class="detail-text">
+                <div class="detail-label">鼠标光标</div>
+                <div class="detail-value">Windows 默认</div>
+              </div>
+            </div>
+          </div>
+          <button class="save-theme-btn">保存主题</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="theme-options-section">
+      <div class="options-title">更改主题</div>
+      <div class="store-link-section">
+        <a href="#" class="store-link" @click="openStore"> 🏪 在 Microsoft Store 中获取更多主题 </a>
+      </div>
+
+      <div class="theme-grid">
+        <div
+          v-for="theme in availableThemes"
+          :key="theme.id"
+          class="theme-item"
+          @click="applyTheme(theme)"
+        >
+          <div class="theme-thumbnail">
+            <img :src="theme.thumbnail" :alt="theme.name" />
+          </div>
+          <div class="theme-name">{{ theme.name }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 响应式数据
+const currentAccentColor = ref('#D13438')
+
+// 可用主题列表
+const availableThemes = ref([
+  {
+    id: 'windows',
+    name: 'Windows',
+    thumbnail: '/images/theme-windows.png'
+  },
+  {
+    id: 'windows-dark',
+    name: 'Windows (深色主题)',
+    thumbnail: '/images/theme-windows-dark.png'
+  },
+  {
+    id: 'windows10',
+    name: 'Windows 10',
+    thumbnail: '/images/theme-windows10.png'
+  },
+  {
+    id: 'flowers',
+    name: '鲜花',
+    thumbnail: '/images/theme-flowers.png'
+  }
+])
+
+// 方法
+const applyTheme = (theme: any) => {
+  console.log('应用主题:', theme.name)
+}
+
+const openStore = (e: Event) => {
+  e.preventDefault()
+  console.log('打开 Microsoft Store')
+}
+</script>
+
+<style scoped>
+.themes-detail {
+  max-width: 800px;
+}
+
+.current-theme-section {
+  margin-bottom: 32px;
+}
+
+.current-theme-title {
+  font-size: 20px;
+  font-weight: 400;
+  margin: 0 0 24px 0;
+  color: #323130;
+}
+
+.theme-preview {
+  display: flex;
+  gap: 24px;
+  align-items: flex-start;
+}
+
+.theme-display {
+  width: 300px;
+  height: 169px;
+  border: 1px solid #e1dfdd;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.theme-bg {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.theme-window {
+  width: 150px;
+  height: 100px;
+  background: white;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.window-titlebar {
+  height: 24px;
+  background: #f3f2f1;
+  border-bottom: 1px solid #e1dfdd;
+}
+
+.window-content {
+  height: 76px;
+  background: white;
+}
+
+.theme-taskbar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 32px;
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.theme-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.theme-details {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.detail-icon {
+  font-size: 20px;
+  width: 24px;
+  text-align: center;
+}
+
+.detail-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.detail-label {
+  font-size: 14px;
+  color: #605e5c;
+}
+
+.detail-value {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.save-theme-btn {
+  align-self: flex-start;
+  padding: 8px 16px;
+  background: #f3f2f1;
+  border: 1px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.save-theme-btn:hover {
+  background: #edebe9;
+}
+
+.theme-options-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.options-title {
+  font-size: 20px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0;
+}
+
+.store-link-section {
+  margin-bottom: 8px;
+}
+
+.store-link {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.store-link:hover {
+  text-decoration: underline;
+}
+
+.theme-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.theme-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.theme-item:hover {
+  transform: translateY(-2px);
+}
+
+.theme-thumbnail {
+  width: 100%;
+  height: 120px;
+  border: 1px solid #e1dfdd;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #f8f9fa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.theme-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.theme-name {
+  font-size: 14px;
+  color: #323130;
+  text-align: center;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/time-language/DateTimeDetail.vue b/src/components/WindowsSystemSetting/components/time-language/DateTimeDetail.vue
new file mode 100644
index 0000000..f627461
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/time-language/DateTimeDetail.vue
@@ -0,0 +1,328 @@
+<template>
+  <div class="date-time-detail">
+    <div class="section-group">
+      <!-- 自动设置时间 -->
+      <div class="setting-group">
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label">自动设置时间</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: autoSetTime }"
+            @click="autoSetTime = !autoSetTime"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ autoSetTime ? '开' : '关' }}</div>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label">自动设置时区</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: autoSetTimezone }"
+            @click="autoSetTimezone = !autoSetTimezone"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ autoSetTimezone ? '开' : '关' }}</div>
+        </div>
+      </div>
+
+      <!-- 手动设置日期和时间 -->
+      <div class="manual-setting">
+        <div class="setting-label">手动设置日期和时间</div>
+        <button class="change-button" :disabled="autoSetTime" @click="openDateTimeDialog">
+          更改
+        </button>
+      </div>
+
+      <!-- 同步时钟 -->
+      <div class="sync-section">
+        <div class="section-title">同步时钟</div>
+        <div class="time-server">
+          <div class="server-info">时间服务器：time.windows.com</div>
+          <button class="sync-button" @click="syncTime">立即同步</button>
+        </div>
+      </div>
+
+      <!-- 时区 -->
+      <div class="timezone-section">
+        <div class="setting-label">时区</div>
+        <select v-model="selectedTimezone" class="timezone-select" :disabled="autoSetTimezone">
+          <option value="UTC+08:00">(UTC+08:00)北京, 重庆, 香港特别行政区, 乌鲁木齐</option>
+          <option value="UTC+09:00">(UTC+09:00)东京, 首尔</option>
+          <option value="UTC+07:00">(UTC+07:00)曼谷, 河内, 雅加达</option>
+          <option value="UTC+05:30">(UTC+05:30)钦奈, 加尔各答, 孟买, 新德里</option>
+          <option value="UTC+00:00">(UTC+00:00)都柏林, 爱丁堡, 里斯本, 伦敦</option>
+          <option value="UTC-05:00">(UTC-05:00)东部时间(美国和加拿大)</option>
+          <option value="UTC-08:00">(UTC-08:00)太平洋时间(美国和加拿大)</option>
+        </select>
+      </div>
+
+      <!-- 自动调整夏令时 -->
+      <div class="daylight-saving">
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <div class="toggle-label">自动调整夏令时</div>
+          </div>
+          <div
+            class="toggle-switch"
+            :class="{ active: autoDaylightSaving }"
+            @click="autoDaylightSaving = !autoDaylightSaving"
+          >
+            <div class="toggle-slider"></div>
+          </div>
+          <div class="toggle-state">{{ autoDaylightSaving ? '开' : '关' }}</div>
+        </div>
+      </div>
+
+      <!-- 在任务栏中显示其他日历 -->
+      <div class="calendar-section">
+        <div class="setting-label">在任务栏中显示其他日历</div>
+        <select v-model="additionalCalendar" class="calendar-select">
+          <option value="none">简体中文(农历)</option>
+          <option value="lunar">农历</option>
+          <option value="hijri">伊斯兰历</option>
+          <option value="hebrew">希伯来历</option>
+        </select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 响应式数据
+const autoSetTime = ref(false)
+const autoSetTimezone = ref(false)
+const selectedTimezone = ref('UTC+08:00')
+const autoDaylightSaving = ref(false)
+const additionalCalendar = ref('none')
+
+// 方法
+const openDateTimeDialog = () => {
+  console.log('打开日期时间设置对话框')
+}
+
+const syncTime = () => {
+  console.log('同步时间')
+}
+</script>
+
+<style scoped>
+.date-time-detail {
+  max-width: 800px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 32px 0;
+}
+
+.section-group {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.setting-group {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.toggle-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 0;
+}
+
+.toggle-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.toggle-switch {
+  width: 44px;
+  height: 20px;
+  background: #8a8886;
+  border-radius: 10px;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.toggle-switch.active {
+  background: #0078d4;
+}
+
+.toggle-slider {
+  width: 14px;
+  height: 14px;
+  background: white;
+  border-radius: 50%;
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  transition: transform 0.2s;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.toggle-switch.active .toggle-slider {
+  transform: translateX(24px);
+}
+
+.toggle-state {
+  font-size: 14px;
+  color: #605e5c;
+  min-width: 24px;
+  flex-shrink: 0;
+}
+
+.manual-setting {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+  border-top: 1px solid #f3f2f1;
+}
+
+.setting-label {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.change-button {
+  padding: 8px 16px;
+  background: #f3f2f1;
+  border: 1px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  transition: background-color 0.1s;
+}
+
+.change-button:hover:not(:disabled) {
+  background: #edebe9;
+}
+
+.change-button:disabled {
+  background: #f3f2f1;
+  color: #a19f9d;
+  cursor: not-allowed;
+}
+
+.sync-section {
+  padding: 16px 0;
+  border-top: 1px solid #f3f2f1;
+}
+
+.section-title {
+  font-size: 16px;
+  color: #323130;
+  margin: 0 0 16px 0;
+  font-weight: 400;
+}
+
+.time-server {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.server-info {
+  font-size: 14px;
+  color: #605e5c;
+}
+
+.sync-button {
+  padding: 8px 16px;
+  background: #f3f2f1;
+  border: 1px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  transition: background-color 0.1s;
+}
+
+.sync-button:hover {
+  background: #edebe9;
+}
+
+.timezone-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 0;
+  border-top: 1px solid #f3f2f1;
+}
+
+.timezone-select {
+  padding: 8px 12px;
+  border: 2px solid #8a8886;
+  border-radius: 2px;
+  background: white;
+  font-size: 14px;
+  color: #323130;
+  font-family: 'Segoe UI', sans-serif;
+}
+
+.timezone-select:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+
+.timezone-select:disabled {
+  background: #f3f2f1;
+  color: #a19f9d;
+  cursor: not-allowed;
+}
+
+.daylight-saving {
+  padding: 16px 0;
+  border-top: 1px solid #f3f2f1;
+}
+
+.calendar-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 0;
+  border-top: 1px solid #f3f2f1;
+}
+
+.calendar-select {
+  padding: 8px 12px;
+  border: 2px solid #8a8886;
+  border-radius: 2px;
+  background: white;
+  font-size: 14px;
+  color: #323130;
+  font-family: 'Segoe UI', sans-serif;
+  max-width: 300px;
+}
+
+.calendar-select:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/time-language/LanguageDetail.vue b/src/components/WindowsSystemSetting/components/time-language/LanguageDetail.vue
new file mode 100644
index 0000000..f7f2d08
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/time-language/LanguageDetail.vue
@@ -0,0 +1,303 @@
+<template>
+  <div class="language-detail">
+    <div class="section-group">
+      <!-- Windows 显示语言 -->
+      <div class="display-language-section">
+        <div class="section-title">Windows 显示语言</div>
+        <select v-model="windowsDisplayLanguage" class="language-select">
+          <option value="zh-CN">中文(中华人民共和国)</option>
+          <option value="en-US">English (United States)</option>
+          <option value="en-GB">English (United Kingdom)</option>
+          <option value="ja-JP">日本語 (日本)</option>
+          <option value="ko-KR">한국어 (대한민국)</option>
+        </select>
+        <div class="setting-desc"> "设置"和"文件资源管理器"等 Windows 功能将使用此语言显示。 </div>
+
+        <div class="store-link-container">
+          <div class="store-icon">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="#0078d4">
+              <path
+                d="M8 0L2 3v10l6 3 6-3V3L8 0zm0 2l4 2-4 2-4-2 4-2zm-4 3l4 2v6l-4-2V5zm8 0v6l-4 2V7l4-2z"
+              />
+            </svg>
+          </div>
+          <a href="#" class="store-link" @click="openLanguageStore">
+            在 Microsoft Store 中添加 Windows 显示语言
+          </a>
+        </div>
+        <div class="language-pack-desc">
+          使用本地体验包更改 Windows 导航、菜单、消息、设置和帮助主题所用的语言。
+        </div>
+      </div>
+
+      <!-- 首选语言 -->
+      <div class="preferred-languages-section">
+        <div class="section-title">首选语言</div>
+        <div class="preferred-desc">
+          应用和网站将一下列表中支持的第一种语言显示。选择一种语言，然后选择用于配置键盘和其他功能的选项。
+        </div>
+
+        <div class="add-language">
+          <button class="add-button" @click="addPreferredLanguage">
+            <span class="add-icon">+</span>
+            添加首选的语言
+          </button>
+        </div>
+
+        <div class="language-list">
+          <div class="language-item">
+            <div class="language-icon">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="#605e5c">
+                <path
+                  d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"
+                />
+              </svg>
+            </div>
+            <div class="language-info">
+              <div class="language-name">中文(中华人民共和国)</div>
+              <div class="language-details">
+                <span>默认应用语言</span> • <span>默认输入语言</span> •
+                <span>Windows语言语言</span>
+              </div>
+            </div>
+            <div class="language-actions">
+              <button class="action-btn" title="选项">⚙️</button>
+              <button class="action-btn" title="上移">🔺</button>
+              <button class="action-btn" title="下移">🔻</button>
+              <button class="action-btn" title="删除">🗑️</button>
+              <button class="action-btn" title="更多选项">⌨️</button>
+            </div>
+          </div>
+        </div>
+
+        <a href="#" class="input-link" @click="selectInputMethod"> 选择始终默认使用的输入法 </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 响应式数据
+const windowsDisplayLanguage = ref('zh-CN')
+
+// 方法
+const openLanguageStore = (e: Event) => {
+  e.preventDefault()
+  console.log('打开Microsoft Store语言页面')
+}
+
+const addPreferredLanguage = () => {
+  console.log('添加首选语言')
+}
+
+const selectInputMethod = (e: Event) => {
+  e.preventDefault()
+  console.log('选择输入法')
+}
+</script>
+
+<style scoped>
+.language-detail {
+  max-width: 800px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 32px 0;
+}
+
+.section-group {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.display-language-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.section-title {
+  font-size: 16px;
+  color: #323130;
+  margin: 0;
+  font-weight: 400;
+}
+
+.language-select {
+  padding: 8px 12px;
+  border: 2px solid #8a8886;
+  border-radius: 2px;
+  background: white;
+  font-size: 14px;
+  color: #323130;
+  font-family: 'Segoe UI', sans-serif;
+  max-width: 400px;
+}
+
+.language-select:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+
+.setting-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+  max-width: 600px;
+}
+
+.store-link-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 16px 0 8px 0;
+}
+
+.store-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.store-link {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.store-link:hover {
+  text-decoration: underline;
+}
+
+.language-pack-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+  max-width: 600px;
+}
+
+.preferred-languages-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px 0;
+  border-top: 1px solid #f3f2f1;
+}
+
+.preferred-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+  max-width: 600px;
+}
+
+.add-language {
+  margin: 16px 0;
+}
+
+.add-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #f3f2f1;
+  border: 1px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  transition: background-color 0.1s;
+}
+
+.add-button:hover {
+  background: #edebe9;
+}
+
+.add-icon {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.language-list {
+  border: 1px solid #e1dfdd;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.language-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: white;
+  border-bottom: 1px solid #f3f2f1;
+}
+
+.language-item:last-child {
+  border-bottom: none;
+}
+
+.language-icon {
+  flex-shrink: 0;
+}
+
+.language-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.language-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+  margin-bottom: 4px;
+}
+
+.language-details {
+  font-size: 12px;
+  color: #605e5c;
+}
+
+.language-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.action-btn {
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  transition: background-color 0.1s;
+}
+
+.action-btn:hover {
+  background: #f3f2f1;
+}
+
+.input-link {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+  align-self: flex-start;
+  margin-top: 16px;
+}
+
+.input-link:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/time-language/RegionDetail.vue b/src/components/WindowsSystemSetting/components/time-language/RegionDetail.vue
new file mode 100644
index 0000000..f5a9c67
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/time-language/RegionDetail.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="region-detail">
+    <div class="section-group">
+      <!-- 国家或地区 -->
+      <div class="country-section">
+        <div class="setting-label">国家或地区</div>
+        <select v-model="selectedCountry" class="country-select">
+          <option value="CN">中国</option>
+          <option value="US">美国</option>
+          <option value="JP">日本</option>
+          <option value="KR">韩国</option>
+          <option value="GB">英国</option>
+          <option value="DE">德国</option>
+          <option value="FR">法国</option>
+        </select>
+        <div class="setting-desc">
+          Windows 和应用可能会根据你所在的国家或地区向你提供本地内容。
+        </div>
+      </div>
+
+      <!-- 区域格式 -->
+      <div class="format-section">
+        <div class="section-title">区域格式</div>
+        <div class="current-format">
+          <div class="format-label">当前格式: 中文(简体，中国)</div>
+        </div>
+        <select v-model="selectedFormat" class="format-select">
+          <option value="zh-CN">推荐[中文(简体，中国)]</option>
+          <option value="en-US">英语(美国)</option>
+          <option value="en-GB">英语(英国)</option>
+          <option value="ja-JP">日语(日本)</option>
+          <option value="ko-KR">韩语(韩国)</option>
+        </select>
+        <div class="setting-desc"> Windows 根据语言和区域首选项设置日期和时间的格式。 </div>
+      </div>
+
+      <!-- 区域格式数据 -->
+      <div class="format-data-section">
+        <div class="section-title">区域格式数据</div>
+        <div class="format-desc">
+          选择更改数据格式，以在地区所支持的日历、日期和时间格式之间切换。
+        </div>
+
+        <div class="format-examples">
+          <div class="format-row">
+            <div class="format-type">日历:</div>
+            <div class="format-value">公历</div>
+          </div>
+          <div class="format-row">
+            <div class="format-type">一周的第一天:</div>
+            <div class="format-value">星期一</div>
+          </div>
+          <div class="format-row">
+            <div class="format-type">短日期:</div>
+            <div class="format-value">2020/11/16</div>
+          </div>
+          <div class="format-row">
+            <div class="format-type">长日期:</div>
+            <div class="format-value">2020年11月16日</div>
+          </div>
+          <div class="format-row">
+            <div class="format-type">短时间:</div>
+            <div class="format-value">9:30</div>
+          </div>
+          <div class="format-row">
+            <div class="format-type">长时间:</div>
+            <div class="format-value">9:30:10</div>
+          </div>
+        </div>
+
+        <a href="#" class="change-format-link" @click="changeDataFormat"> 更改数据格式 </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 响应式数据
+const selectedCountry = ref('CN')
+const selectedFormat = ref('zh-CN')
+
+// 方法
+const changeDataFormat = (e: Event) => {
+  e.preventDefault()
+  console.log('更改数据格式')
+}
+</script>
+
+<style scoped>
+.region-detail {
+  max-width: 800px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 32px 0;
+}
+
+.section-group {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.country-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.setting-label {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.country-select,
+.format-select {
+  padding: 8px 12px;
+  border: 2px solid #8a8886;
+  border-radius: 2px;
+  background: white;
+  font-size: 14px;
+  color: #323130;
+  font-family: 'Segoe UI', sans-serif;
+  max-width: 400px;
+}
+
+.country-select:focus,
+.format-select:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+
+.setting-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+  max-width: 600px;
+}
+
+.format-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px 0;
+  border-top: 1px solid #f3f2f1;
+}
+
+.section-title {
+  font-size: 16px;
+  color: #323130;
+  margin: 0;
+  font-weight: 400;
+}
+
+.current-format {
+  margin: 8px 0;
+}
+
+.format-label {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.format-data-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px 0;
+  border-top: 1px solid #f3f2f1;
+}
+
+.format-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+  max-width: 600px;
+}
+
+.format-examples {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 16px 0;
+}
+
+.format-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.format-type {
+  font-size: 14px;
+  color: #323130;
+  min-width: 120px;
+  flex-shrink: 0;
+}
+
+.format-value {
+  font-size: 14px;
+  color: #605e5c;
+}
+
+.change-format-link {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+  align-self: flex-start;
+}
+
+.change-format-link:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/time-language/SpeechDetail.vue b/src/components/WindowsSystemSetting/components/time-language/SpeechDetail.vue
new file mode 100644
index 0000000..716fd97
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/time-language/SpeechDetail.vue
@@ -0,0 +1,371 @@
+<template>
+  <div class="speech-detail">
+    <div class="section-group">
+      <div class="page-desc">选择你说的主要语言，管理设备和应用的语音，并设置麦克风。</div>
+
+      <!-- 语音语言 -->
+      <div class="speech-language-section">
+        <div class="section-title">语音语言</div>
+        <div class="language-desc">选择你使用这台设备时所说的语言</div>
+        <select v-model="speechLanguage" class="speech-select">
+          <option value="zh-CN">中文(简体, 中国)</option>
+          <option value="en-US">English (United States)</option>
+          <option value="en-GB">English (United Kingdom)</option>
+          <option value="ja-JP">日本語 (日本)</option>
+        </select>
+
+        <div class="microphone-test">
+          <div class="test-label">识别此语言的非母语口音</div>
+          <input type="checkbox" v-model="recognizeAccent" class="checkbox" />
+        </div>
+      </div>
+
+      <!-- 麦克风 -->
+      <div class="microphone-section">
+        <div class="section-title">麦克风</div>
+        <div class="microphone-desc">设置进行语音识别所需麦克风</div>
+
+        <button class="start-button" @click="startMicrophoneSetup">开始</button>
+      </div>
+
+      <!-- 语音 -->
+      <div class="voice-section">
+        <div class="section-title">语音</div>
+        <div class="voice-desc">选择语音</div>
+
+        <select v-model="selectedVoice" class="voice-select">
+          <option value="huihui">Microsoft Huihui</option>
+          <option value="yaoyao">Microsoft Yaoyao</option>
+          <option value="kangkang">Microsoft Kangkang</option>
+        </select>
+
+        <!-- 语音速度 -->
+        <div class="speech-rate">
+          <div class="rate-label">语音速度</div>
+          <div class="rate-slider-container">
+            <input type="range" v-model="speechRate" min="0" max="100" class="rate-slider" />
+          </div>
+        </div>
+
+        <!-- 听取语音样本 -->
+        <div class="voice-sample">
+          <div class="sample-label">听取语音样本</div>
+          <button class="preview-button" @click="previewVoice">预听语音</button>
+        </div>
+      </div>
+
+      <!-- 管理语音 -->
+      <div class="manage-voices-section">
+        <div class="section-title">管理语音</div>
+
+        <button class="add-voice-button" @click="addVoices">
+          <span class="add-icon">+</span>
+          添加语音
+        </button>
+
+        <!-- 已安装的语音包 -->
+        <div class="installed-voices">
+          <div class="voices-title">已安装的语音包</div>
+          <div class="voices-desc">选择语音包以将其卸载。</div>
+
+          <div class="voice-item">
+            <div class="voice-icon">
+              <svg width="32" height="32" viewBox="0 0 32 32" fill="#605e5c">
+                <path
+                  d="M16 2L4 6v20l12 6 12-6V6L16 2zm0 4l8 4-8 4-8-4 8-4zm-8 6l8 4v12l-8-4V12zm16 0v12l-8 4V16l8-4z"
+                />
+              </svg>
+            </div>
+            <div class="voice-info">
+              <div class="voice-name">中文(简体, 中国)</div>
+              <div class="voice-detail">中文(中华人民共和国)</div>
+            </div>
+            <div class="voice-size">56 MB</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 响应式数据
+const speechLanguage = ref('zh-CN')
+const recognizeAccent = ref(false)
+const selectedVoice = ref('huihui')
+const speechRate = ref(50)
+
+// 方法
+const startMicrophoneSetup = () => {
+  console.log('开始麦克风设置')
+}
+
+const previewVoice = () => {
+  console.log('预览语音')
+}
+
+const addVoices = () => {
+  console.log('添加语音')
+}
+</script>
+
+<style scoped>
+.speech-detail {
+  max-width: 800px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.page-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+  max-width: 600px;
+  margin-bottom: 32px;
+}
+
+.section-group {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.speech-language-section,
+.microphone-section,
+.voice-section,
+.manage-voices-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px 0;
+  border-top: 1px solid #f3f2f1;
+}
+
+.speech-language-section {
+  border-top: none;
+}
+
+.section-title {
+  font-size: 16px;
+  color: #323130;
+  margin: 0;
+  font-weight: 400;
+}
+
+.language-desc,
+.microphone-desc,
+.voice-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+  max-width: 600px;
+}
+
+.speech-select,
+.voice-select {
+  padding: 8px 12px;
+  border: 2px solid #8a8886;
+  border-radius: 2px;
+  background: white;
+  font-size: 14px;
+  color: #323130;
+  font-family: 'Segoe UI', sans-serif;
+  max-width: 300px;
+}
+
+.speech-select:focus,
+.voice-select:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+
+.microphone-test {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.test-label {
+  font-size: 14px;
+  color: #323130;
+}
+
+.checkbox {
+  width: 16px;
+  height: 16px;
+}
+
+.start-button {
+  padding: 8px 16px;
+  background: #f3f2f1;
+  border: 1px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  align-self: flex-start;
+}
+
+.start-button:hover {
+  background: #edebe9;
+}
+
+.speech-rate {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.rate-label {
+  font-size: 14px;
+  color: #323130;
+}
+
+.rate-slider-container {
+  width: 300px;
+}
+
+.rate-slider {
+  width: 100%;
+  height: 4px;
+  background: #e1dfdd;
+  outline: none;
+  border-radius: 2px;
+  appearance: none;
+}
+
+.rate-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  background: #0078d4;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.rate-slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  background: #0078d4;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+}
+
+.voice-sample {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.sample-label {
+  font-size: 14px;
+  color: #323130;
+}
+
+.preview-button {
+  padding: 8px 16px;
+  background: #f3f2f1;
+  border: 1px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  align-self: flex-start;
+}
+
+.preview-button:hover {
+  background: #edebe9;
+}
+
+.add-voice-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #f3f2f1;
+  border: 1px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  align-self: flex-start;
+}
+
+.add-voice-button:hover {
+  background: #edebe9;
+}
+
+.add-icon {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.installed-voices {
+  margin-top: 16px;
+}
+
+.voices-title {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.voices-desc {
+  font-size: 13px;
+  color: #605e5c;
+  margin-bottom: 16px;
+}
+
+.voice-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid #e1dfdd;
+  border-radius: 4px;
+  background: white;
+}
+
+.voice-icon {
+  flex-shrink: 0;
+}
+
+.voice-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.voice-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+  margin-bottom: 4px;
+}
+
+.voice-detail {
+  font-size: 12px;
+  color: #605e5c;
+}
+
+.voice-size {
+  font-size: 14px;
+  color: #605e5c;
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/update-security/ActivationDetail.vue b/src/components/WindowsSystemSetting/components/update-security/ActivationDetail.vue
new file mode 100644
index 0000000..995abe0
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/update-security/ActivationDetail.vue
@@ -0,0 +1,321 @@
+<template>
+  <div class="activation-detail">
+    <div class="section-group">
+      <!-- Windows 规范 -->
+      <div class="activation-section">
+        <div class="windows-specs">
+          <div class="spec-item">
+            <span class="spec-label">版本</span>
+            <span class="spec-value">Windows 10 专业版</span>
+          </div>
+          <div class="spec-item">
+            <span class="spec-label">安装日期</span>
+            <span class="spec-value">‎2024/‎1/‎15</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 激活状态 -->
+      <div class="activation-section">
+        <div class="activation-status">
+          <div class="status-icon">
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="#107c10">
+              <path
+                d="M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2zm0 2c6.63 0 12 5.37 12 12s-5.37 12-12 12S4 22.63 4 16 9.37 4 16 4z"
+              />
+              <path d="M12 16l1.41-1.41L16 18.17l3.59-3.58L21 16l-5 5-5-5z" />
+            </svg>
+          </div>
+          <div class="status-info">
+            <div class="status-title">Windows 已激活</div>
+            <div class="status-desc">Windows 已使用与 Microsoft 帐户关联的数字许可证激活。</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 激活操作 -->
+      <div class="activation-section">
+        <div class="activation-actions">
+          <div class="action-group">
+            <button class="action-btn" @click="addAccount"> 将 Microsoft 帐户添加到此设备 </button>
+            <div class="action-desc">
+              可以帮助你重新激活 Windows（如果你对硬件进行了重大更改）。
+            </div>
+          </div>
+
+          <div class="action-group">
+            <button class="action-btn" @click="changeProductKey"> 更改产品密钥 </button>
+          </div>
+
+          <div class="action-group">
+            <button class="action-btn" @click="troubleshootActivation"> 疑难解答 </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 相关设置 -->
+      <div class="activation-section">
+        <div class="section-title">相关设置</div>
+        <div class="related-settings">
+          <div class="setting-item" @click="openStorePage">
+            <div class="setting-icon">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="#0078d4">
+                <path d="M2 3h12l-1 8H3L2 3z" />
+                <path d="M5 13a1 1 0 100 2 1 1 0 000-2z" />
+                <path d="M11 13a1 1 0 100 2 1 1 0 000-2z" />
+                <path d="M1 1h2l.4 2H15" />
+              </svg>
+            </div>
+            <div class="setting-name">转到 Microsoft Store</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 数字许可证 -->
+      <div class="activation-section">
+        <div class="license-info">
+          <h3 class="license-title">了解数字许可证</h3>
+          <div class="license-desc">
+            数字许可证是 Windows
+            激活的一种方法，它不需要输入产品密钥。数字许可证会链接到硬件配置文件，当设备连接到
+            Internet 时，Windows 激活服务器会识别设备并自动激活 Windows。
+          </div>
+          <div class="license-benefits">
+            <h4>数字许可证的好处：</h4>
+            <ul>
+              <li>不需要记住产品密钥</li>
+              <li>重新安装 Windows 时自动激活</li>
+              <li>与硬件配置文件永久关联</li>
+              <li>可以关联到 Microsoft 帐户</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 方法
+const addAccount = () => {
+  console.log('添加 Microsoft 帐户')
+}
+
+const changeProductKey = () => {
+  console.log('更改产品密钥')
+}
+
+const troubleshootActivation = () => {
+  console.log('疑难解答激活')
+}
+
+const openStorePage = () => {
+  console.log('打开 Microsoft Store')
+}
+</script>
+
+<style scoped>
+.activation-detail {
+  max-width: 800px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 32px 0;
+}
+
+.section-group {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.activation-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.windows-specs {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #e1dfdd;
+}
+
+.spec-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.spec-label {
+  font-size: 14px;
+  color: #605e5c;
+}
+
+.spec-value {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 500;
+}
+
+.activation-status {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 24px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border-left: 4px solid #107c10;
+}
+
+.status-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.status-title {
+  font-size: 16px;
+  color: #323130;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.status-desc {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.activation-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.action-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.action-btn {
+  padding: 12px 24px;
+  background: #f3f2f1;
+  border: 1px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  align-self: flex-start;
+  text-align: left;
+}
+
+.action-btn:hover {
+  background: #edebe9;
+}
+
+.action-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+  max-width: 500px;
+}
+
+.section-title {
+  font-size: 16px;
+  color: #323130;
+  margin: 0 0 16px 0;
+  font-weight: 400;
+}
+
+.related-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  border-radius: 4px;
+}
+
+.setting-item:hover {
+  background: #f8f9fa;
+}
+
+.setting-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.setting-name {
+  font-size: 14px;
+  color: #0078d4;
+  text-decoration: none;
+}
+
+.license-info {
+  padding: 24px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #e1dfdd;
+}
+
+.license-title {
+  font-size: 16px;
+  color: #323130;
+  margin: 0 0 12px 0;
+  font-weight: 500;
+}
+
+.license-desc {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+.license-benefits h4 {
+  font-size: 14px;
+  color: #323130;
+  margin: 0 0 8px 0;
+  font-weight: 500;
+}
+
+.license-benefits ul {
+  margin: 0;
+  padding-left: 20px;
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.license-benefits li {
+  margin-bottom: 4px;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/update-security/BackupDetail.vue b/src/components/WindowsSystemSetting/components/update-security/BackupDetail.vue
new file mode 100644
index 0000000..e780f61
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/update-security/BackupDetail.vue
@@ -0,0 +1,323 @@
+<template>
+  <div class="backup-detail">
+    <div class="section-group">
+      <!-- 文件历史记录 -->
+      <div class="backup-section">
+        <div class="section-header">
+          <h3 class="section-title">使用文件历史记录备份</h3>
+          <div class="section-desc">
+            文件历史记录将备份文档、音乐、图片、视频和桌面文件夹中的文件以及脱机可用的 OneDrive
+            文件。
+          </div>
+        </div>
+
+        <div class="backup-status">
+          <div class="status-icon">
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="#605e5c">
+              <path
+                d="M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2zm0 2c6.63 0 12 5.37 12 12s-5.37 12-12 12S4 22.63 4 16 9.37 4 16 4z"
+              />
+              <path d="M11 16h2v6h-2v-6zm4-4h2v10h-2V12zm4 2h2v8h-2v-8z" />
+            </svg>
+          </div>
+          <div class="status-info">
+            <div class="status-text">文件历史记录目前关闭</div>
+            <button class="add-drive-btn" @click="addDrive"> 添加驱动器 </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 查找较旧的备份 -->
+      <div class="backup-section">
+        <div class="section-header">
+          <h3 class="section-title">查找较旧的备份</h3>
+          <div class="section-desc">
+            如果你使用的是其他备份应用创建的备份，可以尝试还原其中的文件。
+          </div>
+        </div>
+
+        <button class="action-button" @click="findOlderBackups">
+          转到"备份和还原"(Windows 7)
+        </button>
+      </div>
+
+      <!-- 相关设置 -->
+      <div class="backup-section">
+        <div class="section-header">
+          <h3 class="section-title">相关设置</h3>
+        </div>
+
+        <div class="related-settings">
+          <div class="setting-item" @click="openSystemProtection">
+            <div class="setting-icon">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="#0078d4">
+                <path
+                  d="M8 1a7 7 0 000 14A7 7 0 008 1zM6.5 6a1.5 1.5 0 103 0 1.5 1.5 0 00-3 0zm-2 7a6 6 0 0011 0c0-2-4-3-5.5-3S4.5 11 4.5 13z"
+                />
+              </svg>
+            </div>
+            <div class="setting-info">
+              <div class="setting-name">系统保护</div>
+              <div class="setting-desc">为系统驱动器配置还原设置、管理磁盘空间并删除还原点。</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 更多恢复选项 -->
+      <div class="backup-section">
+        <div class="section-header">
+          <h3 class="section-title">更多恢复选项</h3>
+        </div>
+
+        <div class="recovery-options">
+          <div class="recovery-item" @click="resetThisPc">
+            <div class="recovery-icon reset">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="#323130">
+                <path d="M10 3a7 7 0 00-7 7h2a5 5 0 015-5V3z" />
+                <path d="M17 10a7 7 0 01-7 7v2a9 9 0 009-9h-2z" />
+                <path d="M6 8l-3 3 3 3v-2h6v-2H6V8z" />
+              </svg>
+            </div>
+            <div class="recovery-info">
+              <div class="recovery-name">重置此电脑</div>
+              <div class="recovery-desc">重新安装 Windows，但保留你的文件</div>
+            </div>
+            <div class="recovery-arrow">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="#605e5c">
+                <path d="M6 4l4 4-4 4v-8z" />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 方法
+const addDrive = () => {
+  console.log('添加驱动器')
+}
+
+const findOlderBackups = () => {
+  console.log('查找较旧的备份')
+}
+
+const openSystemProtection = () => {
+  console.log('打开系统保护')
+}
+
+const resetThisPc = () => {
+  console.log('重置此电脑')
+}
+</script>
+
+<style scoped>
+.backup-detail {
+  max-width: 800px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 32px 0;
+}
+
+.section-group {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.backup-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.section-header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.section-title {
+  font-size: 16px;
+  color: #323130;
+  margin: 0;
+  font-weight: 400;
+}
+
+.section-desc {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.backup-status {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #e1dfdd;
+}
+
+.status-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.status-text {
+  font-size: 14px;
+  color: #323130;
+}
+
+.add-drive-btn {
+  padding: 8px 16px;
+  background: #0078d4;
+  border: none;
+  border-radius: 2px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  align-self: flex-start;
+}
+
+.add-drive-btn:hover {
+  background: #106ebe;
+}
+
+.action-button {
+  padding: 12px 24px;
+  background: #f3f2f1;
+  border: 1px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  align-self: flex-start;
+}
+
+.action-button:hover {
+  background: #edebe9;
+}
+
+.related-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  border-radius: 4px;
+}
+
+.setting-item:hover {
+  background: #f8f9fa;
+}
+
+.setting-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.setting-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.setting-name {
+  font-size: 14px;
+  color: #0078d4;
+  margin-bottom: 4px;
+  text-decoration: none;
+}
+
+.setting-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.recovery-options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.recovery-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.1s;
+}
+
+.recovery-item:hover {
+  background: #edebe9;
+}
+
+.recovery-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+
+.recovery-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.recovery-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.recovery-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.recovery-arrow {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/update-security/DeliveryOptimizationDetail.vue b/src/components/WindowsSystemSetting/components/update-security/DeliveryOptimizationDetail.vue
new file mode 100644
index 0000000..e0590ac
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/update-security/DeliveryOptimizationDetail.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="delivery-optimization-detail">
+    <div class="section-group">
+      <div class="page-desc">
+        传递优化能够快速、可靠地提供 Windows 和 Microsoft Store 应用更新以及其他 Microsoft 产品。
+      </div>
+
+      <!-- 允许从其他电脑下载 -->
+      <div class="download-section">
+        <div class="section-title">允许从其他电脑下载</div>
+        <div class="download-desc">
+          如果你的 Internet 连接不稳定，或者你要更新多个设备，请允许从其他电脑下载，帮助加快此过程。
+        </div>
+
+        <div class="download-desc">
+          如果启用了此项，你的电脑可能会向以下下载的部分 Windows 更新和应用发送到连接本地网络或
+          Internet 的其他电脑。使用按流量计费的网络时，你的电脑不会向Internet 的其他电脑。
+        </div>
+
+        <a href="#" class="learn-more-link" @click="learnMore">了解相关信息</a>
+
+        <div class="download-options">
+          <div class="radio-group">
+            <div class="radio-item">
+              <input type="radio" id="from-other-pcs" v-model="downloadSource" value="other-pcs" />
+              <label for="from-other-pcs">我本地网络上的电脑</label>
+            </div>
+
+            <div class="radio-item">
+              <input type="radio" id="from-internet" v-model="downloadSource" value="internet" />
+              <label for="from-internet">我本地网络上的电脑和 Internet 上的电脑</label>
+            </div>
+          </div>
+
+          <div class="toggle-section">
+            <div class="toggle-item">
+              <div class="toggle-info">
+                <div class="toggle-label">允许从其他电脑下载</div>
+              </div>
+              <div
+                class="toggle-switch"
+                :class="{ active: allowDownloadFromOthers }"
+                @click="allowDownloadFromOthers = !allowDownloadFromOthers"
+              >
+                <div class="toggle-slider"></div>
+              </div>
+              <div class="toggle-state">{{ allowDownloadFromOthers ? '开' : '关' }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 高级选项 -->
+      <div class="advanced-section">
+        <div class="section-title">高级选项</div>
+        <a href="#" class="advanced-link" @click="openAdvancedSettings">活动监视器</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 响应式数据
+const downloadSource = ref('other-pcs')
+const allowDownloadFromOthers = ref(false)
+
+// 方法
+const learnMore = (e: Event) => {
+  e.preventDefault()
+  console.log('了解相关信息')
+}
+
+const openAdvancedSettings = (e: Event) => {
+  e.preventDefault()
+  console.log('打开活动监视器')
+}
+</script>
+
+<style scoped>
+.delivery-optimization-detail {
+  max-width: 800px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.page-desc {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+  margin-bottom: 32px;
+}
+
+.section-group {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.download-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.section-title {
+  font-size: 16px;
+  color: #323130;
+  margin: 0;
+  font-weight: 400;
+}
+
+.download-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+  max-width: 700px;
+}
+
+.learn-more-link {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 13px;
+  align-self: flex-start;
+}
+
+.learn-more-link:hover {
+  text-decoration: underline;
+}
+
+.download-options {
+  margin-top: 16px;
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.radio-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.radio-item input[type='radio'] {
+  width: 16px;
+  height: 16px;
+  accent-color: #0078d4;
+}
+
+.radio-item label {
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+}
+
+.toggle-section {
+  padding-top: 16px;
+  border-top: 1px solid #f3f2f1;
+}
+
+.toggle-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 0;
+}
+
+.toggle-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.toggle-switch {
+  width: 44px;
+  height: 20px;
+  background: #8a8886;
+  border-radius: 10px;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.toggle-switch.active {
+  background: #0078d4;
+}
+
+.toggle-slider {
+  width: 14px;
+  height: 14px;
+  background: white;
+  border-radius: 50%;
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  transition: transform 0.2s;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.toggle-switch.active .toggle-slider {
+  transform: translateX(24px);
+}
+
+.toggle-state {
+  font-size: 14px;
+  color: #605e5c;
+  min-width: 24px;
+  flex-shrink: 0;
+}
+
+.advanced-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px 0;
+  border-top: 1px solid #f3f2f1;
+}
+
+.advanced-link {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+  align-self: flex-start;
+}
+
+.advanced-link:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/update-security/DeveloperDetail.vue b/src/components/WindowsSystemSetting/components/update-security/DeveloperDetail.vue
new file mode 100644
index 0000000..8820e26
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/update-security/DeveloperDetail.vue
@@ -0,0 +1,494 @@
+<template>
+  <div class="developer-detail">
+    <div class="section-group">
+      <!-- 使用开发人员功能 -->
+      <div class="developer-section">
+        <div class="section-header">
+          <h3 class="section-title">使用开发人员功能</h3>
+          <div class="section-desc">
+            开发人员功能仅供开发使用。启用开发人员功能可能会影响设备的安全性和性能，或导致其他意外问题。
+          </div>
+        </div>
+
+        <div class="developer-options">
+          <div class="option-item">
+            <input
+              type="radio"
+              id="windowsStoreApps"
+              name="developerMode"
+              value="store"
+              v-model="selectedMode"
+              @change="onModeChange"
+            />
+            <label for="windowsStoreApps" class="option-label">
+              <div class="option-content">
+                <div class="option-title">Windows 应用商店应用</div>
+                <div class="option-desc">只安装来自 Windows 应用商店的应用。</div>
+              </div>
+            </label>
+          </div>
+
+          <div class="option-item">
+            <input
+              type="radio"
+              id="sideloadApps"
+              name="developerMode"
+              value="sideload"
+              v-model="selectedMode"
+              @change="onModeChange"
+            />
+            <label for="sideloadApps" class="option-label">
+              <div class="option-content">
+                <div class="option-title">旁加载应用</div>
+                <div class="option-desc"
+                  >安装来自其他来源的应用，包括松散文件（如来自 Visual Studio 的应用）。</div
+                >
+              </div>
+            </label>
+          </div>
+
+          <div class="option-item">
+            <input
+              type="radio"
+              id="developerMode"
+              name="developerMode"
+              value="developer"
+              v-model="selectedMode"
+              @change="onModeChange"
+            />
+            <label for="developerMode" class="option-label">
+              <div class="option-content">
+                <div class="option-title">开发人员模式</div>
+                <div class="option-desc">安装任何已签名的应用并使用高级开发功能。</div>
+              </div>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <!-- 开发人员模式特定设置 -->
+      <div class="developer-section" v-if="selectedMode === 'developer'">
+        <div class="dev-mode-settings">
+          <div class="warning-box">
+            <div class="warning-icon">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="#d83b01">
+                <path d="M12 2L1 21h22L12 2zm0 3.17L20.83 19H3.17L12 5.17z" />
+                <path d="M11 14h2v2h-2v-2zm0-6h2v4h-2V8z" />
+              </svg>
+            </div>
+            <div class="warning-text">
+              <div class="warning-title">开发人员模式</div>
+              <div class="warning-desc">开发人员模式会安装一个程序包，启用设备进行开发和调试。</div>
+            </div>
+          </div>
+
+          <div class="dev-features">
+            <h4 class="features-title">开发人员功能</h4>
+
+            <div class="feature-item">
+              <div class="feature-toggle">
+                <input
+                  type="checkbox"
+                  id="devicePortal"
+                  v-model="devicePortalEnabled"
+                  @change="onFeatureToggle"
+                />
+                <label for="devicePortal" class="toggle-label">
+                  <span class="toggle-slider"></span>
+                </label>
+              </div>
+              <div class="feature-info">
+                <div class="feature-name">设备门户</div>
+                <div class="feature-desc">通过本地网络连接启用诊断和自动化。</div>
+              </div>
+            </div>
+
+            <div class="feature-item">
+              <div class="feature-toggle">
+                <input
+                  type="checkbox"
+                  id="deviceDiscovery"
+                  v-model="deviceDiscoveryEnabled"
+                  @change="onFeatureToggle"
+                />
+                <label for="deviceDiscovery" class="toggle-label">
+                  <span class="toggle-slider"></span>
+                </label>
+              </div>
+              <div class="feature-info">
+                <div class="feature-name">设备发现</div>
+                <div class="feature-desc">使你的设备对 USB 连接和本地网络连接可见。</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Windows PowerShell -->
+      <div class="developer-section">
+        <div class="section-header">
+          <h3 class="section-title">PowerShell</h3>
+          <div class="section-desc">
+            更改执行策略以允许本地 PowerShell
+            脚本在没有数字签名的情况下运行。需要对远程脚本进行签名。
+          </div>
+        </div>
+
+        <div class="powershell-setting">
+          <div class="feature-toggle">
+            <input
+              type="checkbox"
+              id="powershellExecution"
+              v-model="powershellExecutionEnabled"
+              @change="onPowerShellToggle"
+            />
+            <label for="powershellExecution" class="toggle-label">
+              <span class="toggle-slider"></span>
+            </label>
+          </div>
+          <div class="feature-info">
+            <div class="feature-name"
+              >更改执行策略以允许本地 PowerShell 脚本运行而无需签名。远程脚本需要签名。</div
+            >
+          </div>
+        </div>
+      </div>
+
+      <!-- 文件资源管理器 -->
+      <div class="developer-section">
+        <div class="section-header">
+          <h3 class="section-title">文件资源管理器</h3>
+          <div class="section-desc"> 配置文件资源管理器以显示开发所需的完整路径和文件扩展名。 </div>
+        </div>
+
+        <div class="explorer-settings">
+          <div class="feature-item">
+            <div class="feature-toggle">
+              <input
+                type="checkbox"
+                id="showFileExtensions"
+                v-model="showFileExtensions"
+                @change="onExplorerToggle"
+              />
+              <label for="showFileExtensions" class="toggle-label">
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            <div class="feature-info">
+              <div class="feature-name">更改设置以显示文件扩展名</div>
+            </div>
+          </div>
+
+          <div class="feature-item">
+            <div class="feature-toggle">
+              <input
+                type="checkbox"
+                id="showFullPath"
+                v-model="showFullPath"
+                @change="onExplorerToggle"
+              />
+              <label for="showFullPath" class="toggle-label">
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            <div class="feature-info">
+              <div class="feature-name">更改设置以在文件资源管理器标题栏中显示完整路径</div>
+            </div>
+          </div>
+
+          <div class="feature-item">
+            <div class="feature-toggle">
+              <input
+                type="checkbox"
+                id="showHiddenFiles"
+                v-model="showHiddenFiles"
+                @change="onExplorerToggle"
+              />
+              <label for="showHiddenFiles" class="toggle-label">
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            <div class="feature-info">
+              <div class="feature-name">更改设置以显示隐藏文件和系统文件</div>
+            </div>
+          </div>
+
+          <div class="feature-item">
+            <div class="feature-toggle">
+              <input
+                type="checkbox"
+                id="showEmptyDrives"
+                v-model="showEmptyDrives"
+                @change="onExplorerToggle"
+              />
+              <label for="showEmptyDrives" class="toggle-label">
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            <div class="feature-info">
+              <div class="feature-name">更改设置以显示空驱动器</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 响应式数据
+const selectedMode = ref('store')
+const devicePortalEnabled = ref(false)
+const deviceDiscoveryEnabled = ref(false)
+const powershellExecutionEnabled = ref(false)
+const showFileExtensions = ref(false)
+const showFullPath = ref(false)
+const showHiddenFiles = ref(false)
+const showEmptyDrives = ref(false)
+
+// 方法
+const onModeChange = () => {
+  console.log('开发者模式已更改:', selectedMode.value)
+}
+
+const onFeatureToggle = () => {
+  console.log('开发者功能切换')
+}
+
+const onPowerShellToggle = () => {
+  console.log('PowerShell执行策略切换:', powershellExecutionEnabled.value)
+}
+
+const onExplorerToggle = () => {
+  console.log('文件资源管理器设置切换')
+}
+</script>
+
+<style scoped>
+.developer-detail {
+  max-width: 800px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 32px 0;
+}
+
+.section-group {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.developer-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.section-header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.section-title {
+  font-size: 16px;
+  color: #323130;
+  margin: 0;
+  font-weight: 500;
+}
+
+.section-desc {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.developer-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.option-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.option-item input[type='radio'] {
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  accent-color: #0078d4;
+  flex-shrink: 0;
+}
+
+.option-label {
+  flex: 1;
+  cursor: pointer;
+  min-width: 0;
+}
+
+.option-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.option-title {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 500;
+}
+
+.option-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.dev-mode-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.warning-box {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  background: #fef9f5;
+  border-radius: 4px;
+  border-left: 4px solid #d83b01;
+}
+
+.warning-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.warning-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.warning-title {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.warning-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.dev-features {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.features-title {
+  font-size: 14px;
+  color: #323130;
+  margin: 0;
+  font-weight: 500;
+}
+
+.feature-item,
+.powershell-setting {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 0;
+}
+
+.feature-toggle {
+  flex-shrink: 0;
+}
+
+.toggle-label {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.toggle-label input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.2s;
+  border-radius: 24px;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: '';
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.2s;
+  border-radius: 50%;
+}
+
+input:checked + .toggle-label .toggle-slider,
+.toggle-label input:checked + .toggle-slider {
+  background-color: #0078d4;
+}
+
+input:checked + .toggle-label .toggle-slider:before,
+.toggle-label input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+.feature-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.feature-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+  margin-bottom: 4px;
+}
+
+.feature-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.explorer-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/update-security/FindMyDeviceDetail.vue b/src/components/WindowsSystemSetting/components/update-security/FindMyDeviceDetail.vue
new file mode 100644
index 0000000..c568d07
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/update-security/FindMyDeviceDetail.vue
@@ -0,0 +1,410 @@
+<template>
+  <div class="find-device-detail">
+    <div class="section-group">
+      <!-- 功能说明 -->
+      <div class="find-device-section">
+        <div class="feature-description">
+          <div class="desc-icon">
+            <svg width="40" height="40" viewBox="0 0 40 40" fill="#323130">
+              <path
+                d="M20 6c-7.7 0-14 6.3-14 14s6.3 14 14 14 14-6.3 14-14S27.7 6 20 6zm0 4c5.5 0 10 4.5 10 10s-4.5 10-10 10-10-4.5-10-10S14.5 10 20 10z"
+              />
+              <path
+                d="M20 14c-3.3 0-6 2.7-6 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm0 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+              />
+              <path d="M32 4l4 4-4 4-4-4 4-4z" />
+            </svg>
+          </div>
+          <div class="desc-text">
+            <div class="desc-title">保存你设备的位置</div>
+            <div class="desc-content"
+              >如果你遗失了设备，我们可以帮助你找到设备，即使设备处于睡眠状态或未连接到
+              Internet（仅限 Windows 10 设备）。此功能会定期保存你设备的位置。</div
+            >
+          </div>
+        </div>
+      </div>
+
+      <!-- 设置开关 -->
+      <div class="find-device-section">
+        <div class="setting-toggle">
+          <div class="toggle-info">
+            <div class="toggle-title">查找我的设备</div>
+            <div class="toggle-desc">定期保存此设备的位置</div>
+          </div>
+          <div class="toggle-switch">
+            <input
+              type="checkbox"
+              id="findDeviceToggle"
+              v-model="findDeviceEnabled"
+              @change="onToggleChange"
+            />
+            <label for="findDeviceToggle" class="switch">
+              <span class="slider"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <!-- 状态信息 -->
+      <div class="find-device-section" v-if="!findDeviceEnabled">
+        <div class="status-info warning">
+          <div class="status-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="#d83b01">
+              <path d="M12 2L1 21h22L12 2zm0 3.17L20.83 19H3.17L12 5.17z" />
+              <path d="M11 14h2v2h-2v-2zm0-6h2v4h-2V8z" />
+            </svg>
+          </div>
+          <div class="status-text">
+            <div class="status-title">查找我的设备已关闭</div>
+            <div class="status-desc">如果遗失设备，你将无法使用此功能找到设备。</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="find-device-section" v-else>
+        <div class="status-info success">
+          <div class="status-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="#107c10">
+              <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 8z"
+              />
+              <path d="M9 12l1.41-1.41L12 12.17l1.59-1.58L15 12l-3 3-3-3z" />
+            </svg>
+          </div>
+          <div class="status-text">
+            <div class="status-title">查找我的设备已开启</div>
+            <div class="status-desc"
+              >我们会定期保存此设备的位置。如果遗失设备，可以帮助你找到设备。</div
+            >
+          </div>
+        </div>
+      </div>
+
+      <!-- 相关信息 -->
+      <div class="find-device-section">
+        <div class="info-section">
+          <h3 class="info-title">了解更多信息</h3>
+          <div class="info-content">
+            <div class="info-item">
+              <div class="info-bullet">•</div>
+              <div class="info-text">只有管理员才能开启或关闭此设置</div>
+            </div>
+            <div class="info-item">
+              <div class="info-bullet">•</div>
+              <div class="info-text">位置数据将加密并存储在你的 Microsoft 帐户中</div>
+            </div>
+            <div class="info-item">
+              <div class="info-bullet">•</div>
+              <div class="info-text">你可以通过 account.microsoft.com 查看和删除位置历史记录</div>
+            </div>
+            <div class="info-item">
+              <div class="info-bullet">•</div>
+              <div class="info-text">此功能需要位置服务处于开启状态</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 相关设置链接 -->
+      <div class="find-device-section">
+        <div class="related-links">
+          <div class="link-item" @click="openLocationSettings">
+            <div class="link-icon">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="#0078d4">
+                <path d="M8 1a7 7 0 000 14 7 7 0 000-14zm0 10a3 3 0 100-6 3 3 0 000 6z" />
+              </svg>
+            </div>
+            <div class="link-text">位置设置</div>
+          </div>
+
+          <div class="link-item" @click="openAccountWebsite">
+            <div class="link-icon">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="#0078d4">
+                <path
+                  d="M8 1a7 7 0 100 14 7 7 0 000-14zm0 2.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM6 12a6 6 0 0110 0H6z"
+                />
+              </svg>
+            </div>
+            <div class="link-text">管理 Microsoft 帐户设备</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 响应式数据
+const findDeviceEnabled = ref(false)
+
+// 方法
+const onToggleChange = () => {
+  console.log('查找我的设备状态:', findDeviceEnabled.value)
+}
+
+const openLocationSettings = () => {
+  console.log('打开位置设置')
+}
+
+const openAccountWebsite = () => {
+  console.log('打开 Microsoft 帐户网站')
+}
+</script>
+
+<style scoped>
+.find-device-detail {
+  max-width: 800px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 32px 0;
+}
+
+.section-group {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.find-device-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.feature-description {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  padding: 24px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #e1dfdd;
+}
+
+.desc-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.desc-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.desc-title {
+  font-size: 16px;
+  color: #323130;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.desc-content {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.5;
+}
+
+.setting-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #e1dfdd;
+}
+
+.toggle-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.toggle-title {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.toggle-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.toggle-switch {
+  flex-shrink: 0;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.2s;
+  border-radius: 24px;
+}
+
+.slider:before {
+  position: absolute;
+  content: '';
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.2s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #0078d4;
+}
+
+input:checked + .slider:before {
+  transform: translateX(20px);
+}
+
+.status-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 4px;
+  border-left: 4px solid;
+}
+
+.status-info.warning {
+  background: #fef9f5;
+  border-left-color: #d83b01;
+}
+
+.status-info.success {
+  background: #f3f9f1;
+  border-left-color: #107c10;
+}
+
+.status-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.status-title {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.status-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.info-section {
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #e1dfdd;
+}
+
+.info-title {
+  font-size: 14px;
+  color: #323130;
+  margin: 0 0 16px 0;
+  font-weight: 500;
+}
+
+.info-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.info-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.info-bullet {
+  font-size: 14px;
+  color: #605e5c;
+  flex-shrink: 0;
+}
+
+.info-text {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.related-links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.link-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  border-radius: 4px;
+}
+
+.link-item:hover {
+  background: #f8f9fa;
+}
+
+.link-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.link-text {
+  font-size: 14px;
+  color: #0078d4;
+  text-decoration: none;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/update-security/RecoveryDetail.vue b/src/components/WindowsSystemSetting/components/update-security/RecoveryDetail.vue
new file mode 100644
index 0000000..088a85a
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/update-security/RecoveryDetail.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="recovery-detail">
+    <div class="section-group">
+      <!-- 重置此电脑 -->
+      <div class="recovery-section">
+        <div class="section-header">
+          <div class="section-icon">
+            <svg width="40" height="40" viewBox="0 0 40 40" fill="#323130">
+              <path d="M20 6a14 14 0 00-14 14h4a10 10 0 0110-10V6z" />
+              <path d="M34 20a14 14 0 01-14 14v4a18 18 0 0018-18h-4z" />
+              <path d="M12 16l-6 6 6 6v-4h12v-4H12v-4z" />
+            </svg>
+          </div>
+          <div class="section-info">
+            <h3 class="section-title">重置此电脑</h3>
+            <div class="section-desc"
+              >如果电脑运行不正常，重置电脑可能会有所帮助。重置时可以保留你的文件或删除这些文件，然后重新安装
+              Windows。</div
+            >
+            <button class="get-started-btn" @click="resetPc"> 开始 </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 高级启动 -->
+      <div class="recovery-section">
+        <div class="section-header">
+          <div class="section-icon">
+            <svg width="40" height="40" viewBox="0 0 40 40" fill="#323130">
+              <path
+                d="M20 2C10.06 2 2 10.06 2 20s8.06 18 18 18 18-8.06 18-18S29.94 2 20 2zm0 4c7.74 0 14 6.26 14 14s-6.26 14-14 14S6 27.74 6 20 12.26 6 20 6z"
+              />
+              <path d="M19 10v12l8 4.5-1.5 2.6-9.5-5.5V10h3z" />
+            </svg>
+          </div>
+          <div class="section-info">
+            <h3 class="section-title">高级启动</h3>
+            <div class="section-desc"
+              >立即重新启动，以便更改 Windows 启动设置，从设备或光盘启动，更改 Windows
+              启动设置或从系统映像还原 Windows。这将重新启动你的电脑。</div
+            >
+            <button class="restart-btn" @click="advancedStartup"> 立即重新启动 </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 更多恢复选项 -->
+      <div class="recovery-section">
+        <div class="section-header">
+          <h3 class="more-options-title">更多恢复选项</h3>
+        </div>
+
+        <div class="more-options">
+          <div class="option-item" @click="goBackToPreviousBuild">
+            <div class="option-icon">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="#0078d4">
+                <path d="M10 18a8 8 0 100-16 8 8 0 000 16z" />
+                <path d="M7 9l3-3 3 3H7z" />
+                <path d="M10 6v8" />
+              </svg>
+            </div>
+            <div class="option-info">
+              <div class="option-name">回退到以前版本的 Windows 10</div>
+              <div class="option-desc">如果此版本无法正常工作，请尝试回退到较早的版本。</div>
+            </div>
+          </div>
+
+          <div class="option-item" @click="openSystemProtection">
+            <div class="option-icon">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="#0078d4">
+                <path d="M10 2L3 6v4.5c0 5.11 3.41 9.88 7 11 3.59-1.12 7-5.89 7-11V6l-7-4z" />
+                <path d="M9 12l-2-2 1.41-1.41L9 9.17l3.59-3.58L14 7l-5 5z" />
+              </svg>
+            </div>
+            <div class="option-info">
+              <div class="option-name">查看系统保护的工作原理</div>
+              <div class="option-desc">系统保护可定期创建并保存有关电脑文件和系统设置的信息。</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 方法
+const resetPc = () => {
+  console.log('重置此电脑')
+}
+
+const advancedStartup = () => {
+  console.log('高级启动')
+}
+
+const goBackToPreviousBuild = () => {
+  console.log('回退到以前版本')
+}
+
+const openSystemProtection = () => {
+  console.log('打开系统保护')
+}
+</script>
+
+<style scoped>
+.recovery-detail {
+  max-width: 800px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 32px 0;
+}
+
+.section-group {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.recovery-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.section-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  padding: 24px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #e1dfdd;
+}
+
+.section-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+}
+
+.section-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.section-title {
+  font-size: 16px;
+  color: #323130;
+  margin: 0 0 8px 0;
+  font-weight: 500;
+}
+
+.section-desc {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+.get-started-btn,
+.restart-btn {
+  padding: 8px 16px;
+  background: #0078d4;
+  border: none;
+  border-radius: 2px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  align-self: flex-start;
+}
+
+.get-started-btn:hover,
+.restart-btn:hover {
+  background: #106ebe;
+}
+
+.more-options-title {
+  font-size: 16px;
+  color: #323130;
+  margin: 0;
+  font-weight: 400;
+}
+
+.more-options {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.option-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.1s;
+}
+
+.option-item:hover {
+  background: #edebe9;
+}
+
+.option-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.option-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.option-name {
+  font-size: 14px;
+  color: #0078d4;
+  margin-bottom: 4px;
+  font-weight: 400;
+}
+
+.option-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/update-security/TroubleshootDetail.vue b/src/components/WindowsSystemSetting/components/update-security/TroubleshootDetail.vue
new file mode 100644
index 0000000..a8d9282
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/update-security/TroubleshootDetail.vue
@@ -0,0 +1,403 @@
+<template>
+  <div class="troubleshoot-detail">
+    <div class="section-group">
+      <!-- 推荐的疑难解答 -->
+      <div class="troubleshoot-section">
+        <div class="section-header">
+          <h3 class="section-title">推荐的疑难解答</h3>
+          <div class="section-desc">
+            让 Windows 在遇到问题时自动运行疑难解答。Windows 将通知你遇到的问题和可用的修补程序。
+          </div>
+        </div>
+
+        <div class="auto-troubleshoot">
+          <div class="toggle-container">
+            <div class="toggle-info">
+              <div class="toggle-title">运行推荐的疑难解答，然后通知我</div>
+              <div class="toggle-desc">这将修复影响你设备的已知问题。</div>
+            </div>
+            <div class="toggle-switch">
+              <input
+                type="checkbox"
+                id="autoTroubleshoot"
+                v-model="autoTroubleshootEnabled"
+                @change="onAutoTroubleshootToggle"
+              />
+              <label for="autoTroubleshoot" class="switch">
+                <span class="slider"></span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 查找并修复其他问题 -->
+      <div class="troubleshoot-section">
+        <div class="section-header">
+          <h3 class="section-title">查找并修复其他问题</h3>
+          <div class="section-desc"> 运行疑难解答来修复常见问题。 </div>
+        </div>
+
+        <div class="troubleshoot-list">
+          <div class="troubleshoot-item" @click="runTroubleshoot('internet')">
+            <div class="item-icon">
+              <svg width="32" height="32" viewBox="0 0 32 32" fill="#323130">
+                <path
+                  d="M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2zm0 24c-5.51 0-10-4.49-10-10S10.49 6 16 6s10 4.49 10 10-4.49 10-10 10z"
+                />
+                <path d="M12 10v4h8v-4h-8zm0 8v4h8v-4h-8z" />
+              </svg>
+            </div>
+            <div class="item-info">
+              <div class="item-title">Internet 连接</div>
+              <div class="item-desc">查找并修复连接到 Internet 或特定网站的问题。</div>
+            </div>
+            <button class="run-button">运行</button>
+          </div>
+
+          <div class="troubleshoot-item" @click="runTroubleshoot('audio')">
+            <div class="item-icon">
+              <svg width="32" height="32" viewBox="0 0 32 32" fill="#323130">
+                <path d="M9 4l-4 4H2v8h3l4 4V4zm6 8.3v7.4c2.1-.3 3.7-2.1 3.7-4.3s-1.6-4-3.7-4.3z" />
+                <path
+                  d="M19.5 5.8v2.1c4 .5 7.5 3.9 7.5 8.1s-3.5 7.6-7.5 8.1v2.1c5.1-.5 9-4.8 9-10.2s-3.9-9.7-9-10.2z"
+                />
+              </svg>
+            </div>
+            <div class="item-info">
+              <div class="item-title">播放音频</div>
+              <div class="item-desc">查找并修复播放声音或音频的问题。</div>
+            </div>
+            <button class="run-button">运行</button>
+          </div>
+
+          <div class="troubleshoot-item" @click="runTroubleshoot('printer')">
+            <div class="item-icon">
+              <svg width="32" height="32" viewBox="0 0 32 32" fill="#323130">
+                <path
+                  d="M6 2v4h16V2H6zm16 6H6c-2.2 0-4 1.8-4 4v6h4v6h16v-6h4v-6c0-2.2-1.8-4-4-4zM8 20v-4h12v4H8z"
+                />
+                <circle cx="24" cy="12" r="1" />
+              </svg>
+            </div>
+            <div class="item-info">
+              <div class="item-title">打印机</div>
+              <div class="item-desc">查找并修复打印或扫描的问题。</div>
+            </div>
+            <button class="run-button">运行</button>
+          </div>
+
+          <div class="troubleshoot-item" @click="runTroubleshoot('windows-update')">
+            <div class="item-icon">
+              <svg width="32" height="32" viewBox="0 0 32 32" fill="#323130">
+                <path
+                  d="M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2zm0 4c5.5 0 10 4.5 10 10s-4.5 10-10 10S6 21.5 6 16 10.5 6 16 6z"
+                />
+                <path d="M12 14l2 2 4-4 1.5 1.5L14 19l-3.5-3.5L12 14z" />
+              </svg>
+            </div>
+            <div class="item-info">
+              <div class="item-title">Windows 更新</div>
+              <div class="item-desc">查找并修复 Windows 更新的问题。</div>
+            </div>
+            <button class="run-button">运行</button>
+          </div>
+
+          <div class="troubleshoot-item" @click="runTroubleshoot('network-adapter')">
+            <div class="item-icon">
+              <svg width="32" height="32" viewBox="0 0 32 32" fill="#323130">
+                <path
+                  d="M2 8v2h4v14h2V10h16v14h2V10h4V8H2zm6 4v12h2V12H8zm4 0v12h2V12h-2zm4 0v12h2V12h-2zm4 0v12h2V12h-2z"
+                />
+              </svg>
+            </div>
+            <div class="item-info">
+              <div class="item-title">网络适配器</div>
+              <div class="item-desc">查找并修复 Ethernet、Wi-Fi 或其他网络适配器的问题。</div>
+            </div>
+            <button class="run-button">运行</button>
+          </div>
+
+          <div class="troubleshoot-item" @click="runTroubleshoot('bluetooth')">
+            <div class="item-icon">
+              <svg width="32" height="32" viewBox="0 0 32 32" fill="#323130">
+                <path
+                  d="M11.8 6L16 2v12l-4.2-4.2L10 12l4 4-4 4 1.8 1.8L16 18v12l-4.2-4.2L10 24l6-6 6 6-1.8 1.8L16 30V18l4.2 3.8L22 20l-4-4 4-4-1.8-1.8L16 14V2l4.2 3.8z"
+                />
+              </svg>
+            </div>
+            <div class="item-info">
+              <div class="item-title">蓝牙</div>
+              <div class="item-desc">查找并修复蓝牙设备的问题。</div>
+            </div>
+            <button class="run-button">运行</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 其他疑难解答 -->
+      <div class="troubleshoot-section">
+        <div class="section-header">
+          <h3 class="section-title">其他疑难解答</h3>
+        </div>
+
+        <div class="additional-link">
+          <div class="link-item" @click="openAdditionalTroubleshoot">
+            <div class="link-icon">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="#0078d4">
+                <path d="M8 2a6 6 0 100 12A6 6 0 008 2zM7 5h2v2H7V5zm0 3h2v4H7V8z" />
+              </svg>
+            </div>
+            <div class="link-text">其他疑难解答</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 响应式数据
+const autoTroubleshootEnabled = ref(true)
+
+// 方法
+const onAutoTroubleshootToggle = () => {
+  console.log('自动疑难解答状态:', autoTroubleshootEnabled.value)
+}
+
+const runTroubleshoot = (type: string) => {
+  console.log(`运行 ${type} 疑难解答`)
+}
+
+const openAdditionalTroubleshoot = () => {
+  console.log('打开其他疑难解答')
+}
+</script>
+
+<style scoped>
+.troubleshoot-detail {
+  max-width: 800px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 32px 0;
+}
+
+.section-group {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.troubleshoot-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.section-header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.section-title {
+  font-size: 16px;
+  color: #323130;
+  margin: 0;
+  font-weight: 500;
+}
+
+.section-desc {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.auto-troubleshoot {
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #e1dfdd;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.toggle-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.toggle-title {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.toggle-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.toggle-switch {
+  flex-shrink: 0;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.2s;
+  border-radius: 24px;
+}
+
+.slider:before {
+  position: absolute;
+  content: '';
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.2s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #0078d4;
+}
+
+input:checked + .slider:before {
+  transform: translateX(20px);
+}
+
+.troubleshoot-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.troubleshoot-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #e1dfdd;
+  cursor: pointer;
+  transition: background-color 0.1s;
+}
+
+.troubleshoot-item:hover {
+  background: #edebe9;
+}
+
+.item-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+}
+
+.item-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.item-title {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.item-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.run-button {
+  padding: 8px 16px;
+  background: #0078d4;
+  border: none;
+  border-radius: 2px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  flex-shrink: 0;
+}
+
+.run-button:hover {
+  background: #106ebe;
+}
+
+.additional-link {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.link-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  border-radius: 4px;
+}
+
+.link-item:hover {
+  background: #f8f9fa;
+}
+
+.link-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.link-text {
+  font-size: 14px;
+  color: #0078d4;
+  text-decoration: none;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/update-security/WindowsInsiderDetail.vue b/src/components/WindowsSystemSetting/components/update-security/WindowsInsiderDetail.vue
new file mode 100644
index 0000000..3b98c57
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/update-security/WindowsInsiderDetail.vue
@@ -0,0 +1,556 @@
+<template>
+  <div class="insider-detail">
+    <div class="section-group">
+      <!-- 程序介绍 -->
+      <div class="insider-section">
+        <div class="intro-card">
+          <div class="intro-icon">
+            <svg width="48" height="48" viewBox="0 0 48 48" fill="#0078d4">
+              <path
+                d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z"
+              />
+              <path d="M24 12l-8 12h6v8h4v-8h6l-8-12z" />
+            </svg>
+          </div>
+          <div class="intro-content">
+            <div class="intro-title">获取 Windows 的预览版本</div>
+            <div class="intro-desc">
+              成为 Windows 预览体验成员，抢先体验即将推出的 Windows
+              功能。你可以安装预览版本，并向我们提供反馈来帮助改进 Windows。
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 开始使用 -->
+      <div class="insider-section">
+        <div class="get-started-card">
+          <div class="card-header">
+            <h3 class="card-title">开始使用</h3>
+            <div class="card-desc"> 若要开始接收预览版本，需要注册 Microsoft 帐户。 </div>
+          </div>
+
+          <div class="account-status" v-if="!isSignedIn">
+            <div class="status-info">
+              <div class="status-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="#d83b01">
+                  <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 8z"
+                  />
+                  <path d="M11 7h2v6h-2V7zm0 8h2v2h-2v-2z" />
+                </svg>
+              </div>
+              <div class="status-text">
+                <div class="status-title">需要 Microsoft 帐户</div>
+                <div class="status-desc"
+                  >你需要使用 Microsoft 帐户登录才能注册 Windows 预览体验计划。</div
+                >
+              </div>
+            </div>
+            <button class="sign-in-button" @click="signIn"> 登录 </button>
+          </div>
+
+          <div class="account-status" v-else>
+            <div class="status-info">
+              <div class="status-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="#107c10">
+                  <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 8z"
+                  />
+                  <path d="M9 12l1.41-1.41L12 12.17l1.59-1.58L15 12l-3 3-3-3z" />
+                </svg>
+              </div>
+              <div class="status-text">
+                <div class="status-title">已使用 Microsoft 帐户登录</div>
+                <div class="status-desc">user@example.com</div>
+              </div>
+            </div>
+            <button class="get-started-button" @click="getStarted"> 开始 </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 预览版本类型 -->
+      <div class="insider-section" v-if="isSignedIn && showChannels">
+        <div class="channels-card">
+          <div class="card-header">
+            <h3 class="card-title">选择预览体验设置</h3>
+            <div class="card-desc"> 选择你要接收的预览版本类型。你随时可以更改这些设置。 </div>
+          </div>
+
+          <div class="channels-list">
+            <div class="channel-item">
+              <input
+                type="radio"
+                id="devChannel"
+                name="insiderChannel"
+                value="dev"
+                v-model="selectedChannel"
+                @change="onChannelChange"
+              />
+              <label for="devChannel" class="channel-label">
+                <div class="channel-info">
+                  <div class="channel-name">开发频道</div>
+                  <div class="channel-desc"
+                    >获取最新的 Windows 版本，包含最新功能。更新频繁，可能不太稳定。</div
+                  >
+                  <div class="channel-risk">风险等级：高</div>
+                </div>
+              </label>
+            </div>
+
+            <div class="channel-item">
+              <input
+                type="radio"
+                id="betaChannel"
+                name="insiderChannel"
+                value="beta"
+                v-model="selectedChannel"
+                @change="onChannelChange"
+              />
+              <label for="betaChannel" class="channel-label">
+                <div class="channel-info">
+                  <div class="channel-name">Beta 频道</div>
+                  <div class="channel-desc"
+                    >获取即将发布的 Windows 版本。相对稳定，适合日常使用。</div
+                  >
+                  <div class="channel-risk">风险等级：中</div>
+                </div>
+              </label>
+            </div>
+
+            <div class="channel-item">
+              <input
+                type="radio"
+                id="releaseChannel"
+                name="insiderChannel"
+                value="release"
+                v-model="selectedChannel"
+                @change="onChannelChange"
+              />
+              <label for="releaseChannel" class="channel-label">
+                <div class="channel-info">
+                  <div class="channel-name">发布预览频道</div>
+                  <div class="channel-desc"
+                    >获取即将向所有人发布的 Windows 版本。最稳定的预览版本。</div
+                  >
+                  <div class="channel-risk">风险等级：低</div>
+                </div>
+              </label>
+            </div>
+          </div>
+
+          <div class="confirm-selection" v-if="selectedChannel">
+            <button class="confirm-button" @click="confirmChannel"> 确认并重新启动 </button>
+            <div class="confirm-desc"> 选择预览频道后，设备将重新启动以开始接收预览版本。 </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 当前状态 -->
+      <div class="insider-section" v-if="isEnrolled">
+        <div class="status-card">
+          <div class="card-header">
+            <h3 class="card-title">你的预览体验设置</h3>
+          </div>
+
+          <div class="current-status">
+            <div class="status-item">
+              <span class="status-label">当前频道：</span>
+              <span class="status-value">Beta 频道</span>
+            </div>
+            <div class="status-item">
+              <span class="status-label">上次更新：</span>
+              <span class="status-value">2024年1月15日</span>
+            </div>
+            <div class="status-item">
+              <span class="status-label">版本：</span>
+              <span class="status-value">Windows 11 Insider Preview 22635.2915</span>
+            </div>
+          </div>
+
+          <div class="actions">
+            <button class="action-button" @click="changeChannel"> 更改频道 </button>
+            <button class="action-button secondary" @click="stopInsider"> 停止接收预览版本 </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 重要信息 -->
+      <div class="insider-section">
+        <div class="info-card">
+          <div class="card-header">
+            <h3 class="card-title">重要信息</h3>
+          </div>
+
+          <div class="info-list">
+            <div class="info-item">
+              <div class="info-icon">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="#d83b01">
+                  <path d="M8 1L1 15h14L8 1zm0 2.5L13.5 13H2.5L8 3.5z" />
+                  <path d="M7 6h2v4H7V6zm0 5h2v2H7v-2z" />
+                </svg>
+              </div>
+              <div class="info-text">预览版本可能不稳定，建议在非主要设备上使用。</div>
+            </div>
+            <div class="info-item">
+              <div class="info-icon">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="#605e5c">
+                  <path d="M8 1a7 7 0 100 14A7 7 0 008 1zM7 5h2v2H7V5zm0 3h2v4H7V8z" />
+                </svg>
+              </div>
+              <div class="info-text">你的反馈对改进 Windows 非常重要。</div>
+            </div>
+            <div class="info-item">
+              <div class="info-icon">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="#605e5c">
+                  <path
+                    d="M8 1a7 7 0 100 14A7 7 0 008 1zm0 2.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM6 12a6 6 0 0110 0H6z"
+                  />
+                </svg>
+              </div>
+              <div class="info-text">随时可以退出预览体验计划。</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// 响应式数据
+const isSignedIn = ref(false)
+const selectedChannel = ref('')
+const isEnrolled = ref(false)
+
+// 计算属性
+const showChannels = computed(() => {
+  return isSignedIn.value && !isEnrolled.value
+})
+
+// 方法
+const signIn = () => {
+  console.log('登录 Microsoft 帐户')
+  isSignedIn.value = true
+}
+
+const getStarted = () => {
+  console.log('开始预览体验计划')
+}
+
+const onChannelChange = () => {
+  console.log('选择频道:', selectedChannel.value)
+}
+
+const confirmChannel = () => {
+  console.log('确认频道:', selectedChannel.value)
+  isEnrolled.value = true
+}
+
+const changeChannel = () => {
+  console.log('更改频道')
+}
+
+const stopInsider = () => {
+  console.log('停止接收预览版本')
+  isEnrolled.value = false
+}
+</script>
+
+<style scoped>
+.insider-detail {
+  max-width: 800px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 32px 0;
+}
+
+.section-group {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.insider-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.intro-card,
+.get-started-card,
+.channels-card,
+.status-card,
+.info-card {
+  padding: 24px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #e1dfdd;
+}
+
+.intro-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+}
+
+.intro-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.intro-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.intro-title {
+  font-size: 18px;
+  color: #323130;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.intro-desc {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.5;
+}
+
+.card-header {
+  margin-bottom: 20px;
+}
+
+.card-title {
+  font-size: 16px;
+  color: #323130;
+  margin: 0 0 8px 0;
+  font-weight: 500;
+}
+
+.card-desc {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.account-status {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.status-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1;
+}
+
+.status-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.status-title {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.status-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.sign-in-button,
+.get-started-button,
+.confirm-button {
+  padding: 12px 24px;
+  background: #0078d4;
+  border: none;
+  border-radius: 2px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  flex-shrink: 0;
+}
+
+.sign-in-button:hover,
+.get-started-button:hover,
+.confirm-button:hover {
+  background: #106ebe;
+}
+
+.channels-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.channel-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #e1dfdd;
+}
+
+.channel-item input[type='radio'] {
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  accent-color: #0078d4;
+  flex-shrink: 0;
+}
+
+.channel-label {
+  flex: 1;
+  cursor: pointer;
+  min-width: 0;
+}
+
+.channel-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.channel-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 500;
+}
+
+.channel-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+
+.channel-risk {
+  font-size: 12px;
+  color: #d83b01;
+  font-weight: 500;
+}
+
+.confirm-selection {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.confirm-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+  max-width: 400px;
+}
+
+.current-status {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.status-label {
+  font-size: 14px;
+  color: #605e5c;
+}
+
+.status-value {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 500;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+}
+
+.action-button {
+  padding: 8px 16px;
+  background: #0078d4;
+  border: none;
+  border-radius: 2px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.1s;
+}
+
+.action-button:hover {
+  background: #106ebe;
+}
+
+.action-button.secondary {
+  background: #f3f2f1;
+  color: #323130;
+  border: 1px solid #8a8886;
+}
+
+.action-button.secondary:hover {
+  background: #edebe9;
+}
+
+.info-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.info-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.info-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
+}
+
+.info-text {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/update-security/WindowsSecurityDetail.vue b/src/components/WindowsSystemSetting/components/update-security/WindowsSecurityDetail.vue
new file mode 100644
index 0000000..45748f8
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/update-security/WindowsSecurityDetail.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="windows-security-detail">
+    <div class="section-group">
+      <div class="page-desc"> Windows 安全中心是查看和管理设备安全性和运行状况的页面。 </div>
+
+      <!-- 打开 Windows 安全中心 -->
+      <button class="open-security-btn" @click="openWindowsSecurity">
+        打开 Windows 安全中心
+      </button>
+
+      <!-- 保护区域 -->
+      <div class="protection-areas">
+        <div class="section-title">保护区域</div>
+
+        <div class="protection-item">
+          <div class="protection-icon virus">
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="#107c10">
+              <path
+                d="M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2zm0 2c6.63 0 12 5.37 12 12s-5.37 12-12 12S4 22.63 4 16 9.37 4 16 4z"
+              />
+              <path d="m11 16l1.41-1.41L16 18.17l3.59-3.58L21 16l-5 5-5-5z" />
+            </svg>
+          </div>
+          <div class="protection-info">
+            <div class="protection-name">病毒和威胁防护</div>
+            <div class="protection-status">建议执行操作。</div>
+          </div>
+        </div>
+
+        <div class="protection-item">
+          <div class="protection-icon account">
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="#107c10">
+              <path
+                d="M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2zm0 2c6.63 0 12 5.37 12 12s-5.37 12-12 12S4 22.63 4 16 9.37 4 16 4z"
+              />
+              <path
+                d="M16 8a4 4 0 00-4 4 4 4 0 004 4 4 4 0 004-4 4 4 0 00-4-4zm0 12c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+              />
+            </svg>
+          </div>
+          <div class="protection-info">
+            <div class="protection-name">帐户保护</div>
+            <div class="protection-status">建议执行操作。</div>
+          </div>
+        </div>
+
+        <div class="protection-item">
+          <div class="protection-icon firewall">
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="#605e5c">
+              <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 8z"
+              />
+              <path d="M12 6v12l8.5-6z" />
+            </svg>
+          </div>
+          <div class="protection-info">
+            <div class="protection-name">防火墙和网络保护</div>
+            <div class="protection-status">不需要执行操作。</div>
+          </div>
+        </div>
+
+        <div class="protection-item">
+          <div class="protection-icon app-control">
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="#107c10">
+              <path
+                d="M12 2l3.09 6.26L22 9l-5.26 3.09L18 22l-6-3-6 3 1.26-9.91L2 9l6.91-.74L12 2z"
+              />
+              <path d="M12 6v12l5-3-5-9z" />
+            </svg>
+          </div>
+          <div class="protection-info">
+            <div class="protection-name">应用和浏览器控制</div>
+            <div class="protection-status">建议执行操作。</div>
+          </div>
+        </div>
+
+        <div class="protection-item">
+          <div class="protection-icon device-security">
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="#107c10">
+              <path
+                d="M18,8H6V6H18V8M18,12H6V10H18V12M18,16H6V14H18V16M22,8V18L18,22H6A2,2 0 0,1 4,20V6A2,2 0 0,1 6,4H18A2,2 0 0,1 20,6V8H22Z"
+              />
+            </svg>
+          </div>
+          <div class="protection-info">
+            <div class="protection-name">设备安全性</div>
+            <div class="protection-status">不需要执行操作。</div>
+          </div>
+        </div>
+
+        <div class="protection-item">
+          <div class="protection-icon device-performance">
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="#605e5c">
+              <path
+                d="M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2zm0 2c6.63 0 12 5.37 12 12s-5.37 12-12 12S4 22.63 4 16 9.37 4 16 4z"
+              />
+              <path d="M16 8v8l5.66 5.66-1.41 1.41L14 17.83V8h2z" />
+            </svg>
+          </div>
+          <div class="protection-info">
+            <div class="protection-name">设备性能和运行状况</div>
+            <div class="protection-status">设备的运行状况报告。</div>
+          </div>
+        </div>
+
+        <div class="protection-item">
+          <div class="protection-icon family-options">
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="#605e5c">
+              <path
+                d="M16 8a4 4 0 100 8 4 4 0 000-8zM12 20c-2.67 0-8 1.34-8 4v4h16v-4c0-2.66-5.33-4-8-4z"
+              />
+              <path
+                d="M22 12a3 3 0 100 6 3 3 0 000-6zM20 20c-2.67 0-6 1.34-6 3v3h12v-3c0-1.66-3.33-3-6-3z"
+              />
+            </svg>
+          </div>
+          <div class="protection-info">
+            <div class="protection-name">家庭选项</div>
+            <div class="protection-status">管理你的家人使用设备的方式。</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 方法
+const openWindowsSecurity = () => {
+  console.log('打开 Windows 安全中心')
+}
+</script>
+
+<style scoped>
+.windows-security-detail {
+  max-width: 800px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 16px 0;
+}
+
+.page-desc {
+  font-size: 14px;
+  color: #605e5c;
+  line-height: 1.4;
+  margin-bottom: 24px;
+}
+
+.section-group {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.open-security-btn {
+  padding: 12px 24px;
+  background: #f3f2f1;
+  border: 1px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  align-self: flex-start;
+}
+
+.open-security-btn:hover {
+  background: #edebe9;
+}
+
+.protection-areas {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.section-title {
+  font-size: 16px;
+  color: #323130;
+  margin: 0 0 16px 0;
+  font-weight: 400;
+}
+
+.protection-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border-left: 4px solid #e1dfdd;
+}
+
+.protection-item:nth-child(2) {
+  border-left-color: #107c10;
+}
+
+.protection-item:nth-child(3) {
+  border-left-color: #107c10;
+}
+
+.protection-item:nth-child(4) {
+  border-left-color: #605e5c;
+}
+
+.protection-item:nth-child(5) {
+  border-left-color: #107c10;
+}
+
+.protection-item:nth-child(6) {
+  border-left-color: #107c10;
+}
+
+.protection-item:nth-child(7) {
+  border-left-color: #605e5c;
+}
+
+.protection-item:nth-child(8) {
+  border-left-color: #605e5c;
+}
+
+.protection-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+}
+
+.protection-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.protection-name {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+  margin-bottom: 4px;
+}
+
+.protection-status {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/components/update-security/WindowsUpdateDetail.vue b/src/components/WindowsSystemSetting/components/update-security/WindowsUpdateDetail.vue
new file mode 100644
index 0000000..a7a9c2e
--- /dev/null
+++ b/src/components/WindowsSystemSetting/components/update-security/WindowsUpdateDetail.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="windows-update-detail">
+    <div class="section-group">
+      <!-- 更新状态 -->
+      <div class="update-status">
+        <div class="status-icon">
+          <svg width="32" height="32" viewBox="0 0 32 32" fill="#0078d4">
+            <path
+              d="M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2zm0 2c6.63 0 12 5.37 12 12s-5.37 12-12 12S4 22.63 4 16 9.37 4 16 4z"
+            />
+            <path d="m14 8l-6 6 1.41 1.41L14 10.83l6.59 6.59L22 16l-8-8z" />
+            <circle cx="16" cy="16" r="2" fill="white" />
+          </svg>
+        </div>
+        <div class="status-info">
+          <div class="status-text">你使用的是最新版本</div>
+          <div class="last-check">上次检查时间: 2025年08月26日，02:14</div>
+        </div>
+      </div>
+
+      <!-- 检查更新按钮 -->
+      <button class="check-update-btn" @click="checkForUpdates"> 检查更新 </button>
+
+      <!-- 更新选项 -->
+      <div class="update-options">
+        <div class="option-item" @click="togglePauseUpdates">
+          <div class="option-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="#605e5c">
+              <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+            </svg>
+          </div>
+          <div class="option-info">
+            <div class="option-title">暂停更新 7 天</div>
+            <div class="option-desc">获取最新更新以再次暂停</div>
+          </div>
+        </div>
+
+        <div class="option-item" @click="changeActiveHours">
+          <div class="option-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="#605e5c">
+              <path
+                d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"
+              />
+            </svg>
+          </div>
+          <div class="option-info">
+            <div class="option-title">更改使用时段</div>
+            <div class="option-desc">当前为 上午 8:00 - 下午 5:00</div>
+          </div>
+        </div>
+
+        <div class="option-item" @click="viewUpdateHistory">
+          <div class="option-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="#605e5c">
+              <path
+                d="M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3Z"
+              />
+            </svg>
+          </div>
+          <div class="option-info">
+            <div class="option-title">查看更新历史记录</div>
+            <div class="option-desc">查看安装在你的设备上的更新</div>
+          </div>
+        </div>
+
+        <div class="option-item" @click="advancedOptions">
+          <div class="option-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="#605e5c">
+              <path
+                d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.22,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.22,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"
+              />
+            </svg>
+          </div>
+          <div class="option-info">
+            <div class="option-title">高级选项</div>
+            <div class="option-desc">其他更新控制和设置</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 响应式数据
+const isCheckingUpdates = ref(false)
+
+// 方法
+const checkForUpdates = () => {
+  isCheckingUpdates.value = true
+  console.log('检查更新中...')
+  setTimeout(() => {
+    isCheckingUpdates.value = false
+    console.log('更新检查完成')
+  }, 2000)
+}
+
+const togglePauseUpdates = () => {
+  console.log('暂停更新')
+}
+
+const changeActiveHours = () => {
+  console.log('更改使用时段')
+}
+
+const viewUpdateHistory = () => {
+  console.log('查看更新历史记录')
+}
+
+const advancedOptions = () => {
+  console.log('高级选项')
+}
+</script>
+
+<style scoped>
+.windows-update-detail {
+  max-width: 800px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 32px 0;
+}
+
+.section-group {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.update-status {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 24px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border-left: 4px solid #0078d4;
+}
+
+.status-icon {
+  flex-shrink: 0;
+}
+
+.status-info {
+  flex: 1;
+}
+
+.status-text {
+  font-size: 16px;
+  font-weight: 500;
+  color: #323130;
+  margin-bottom: 4px;
+}
+
+.last-check {
+  font-size: 14px;
+  color: #605e5c;
+}
+
+.check-update-btn {
+  padding: 12px 24px;
+  background: #f3f2f1;
+  border: 1px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #323130;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  align-self: flex-start;
+}
+
+.check-update-btn:hover {
+  background: #edebe9;
+}
+
+.update-options {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 32px;
+}
+
+.option-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  background: white;
+  border: 1px solid #e1dfdd;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.option-item:hover {
+  background: #f8f9fa;
+  border-color: #c8c6c4;
+}
+
+.option-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+
+.option-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.option-title {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+  margin-bottom: 4px;
+}
+
+.option-desc {
+  font-size: 13px;
+  color: #605e5c;
+  line-height: 1.4;
+}
+</style>
diff --git a/src/components/WindowsSystemSetting/detail.scss b/src/components/WindowsSystemSetting/detail.scss
new file mode 100644
index 0000000..6801e3e
--- /dev/null
+++ b/src/components/WindowsSystemSetting/detail.scss
@@ -0,0 +1,116 @@
+.section-group {
+  margin-bottom: 24px;
+
+  .section-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: #323130;
+    margin: 0 0 12px 0;
+    padding: 0;
+  }
+
+  .setting-item {
+    background: #ffffff;
+    border: 1px solid #e1dfdd;
+    border-radius: 4px;
+    padding: 16px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: #f3f2f1;
+      border-color: #d2d0ce;
+    }
+
+    &:active {
+      background: #edebe9;
+    }
+
+    .setting-info {
+      flex: 1;
+
+      .setting-name {
+        font-size: 14px;
+        font-weight: 400;
+        color: #323130;
+        margin-bottom: 4px;
+        line-height: 1.4;
+      }
+
+      .setting-desc {
+        font-size: 12px;
+        color: #605e5c;
+        line-height: 1.3;
+      }
+    }
+
+    .setting-arrow {
+      font-size: 16px;
+      color: #605e5c;
+      margin-left: 16px;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+  }
+}
+
+// 特殊样式
+.toggle-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: #ffffff;
+  border: 1px solid #e1dfdd;
+  border-radius: 4px;
+  margin-bottom: 8px;
+
+  .toggle-info {
+    flex: 1;
+
+    .toggle-name {
+      font-size: 14px;
+      font-weight: 400;
+      color: #323130;
+      margin-bottom: 2px;
+    }
+
+    .toggle-desc {
+      font-size: 12px;
+      color: #605e5c;
+    }
+  }
+
+  .toggle-switch {
+    width: 44px;
+    height: 24px;
+    background: #d2d0ce;
+    border-radius: 12px;
+    position: relative;
+    cursor: pointer;
+    transition: background 0.2s ease;
+
+    &.active {
+      background: #0078d4;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 20px;
+      height: 20px;
+      background: #ffffff;
+      border-radius: 50%;
+      transition: transform 0.2s ease;
+    }
+
+    &.active::before {
+      transform: translateX(20px);
+    }
+  }
+}
diff --git a/src/components/WindowsSystemSetting/index.scss b/src/components/WindowsSystemSetting/index.scss
new file mode 100644
index 0000000..a82cd21
--- /dev/null
+++ b/src/components/WindowsSystemSetting/index.scss
@@ -0,0 +1,427 @@
+/* Windows 10 设置样式 - 精确匹配真实界面 */
+.windows-10-settings {
+  width: 100%;
+  height: 100vh;
+  background: #fff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部标题栏 */
+.title-bar {
+  height: 48px;
+  width: 346px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  flex-shrink: 0;
+}
+
+.left-section {
+  display: flex;
+  align-items: center;
+}
+
+.page-title {
+  font-size: 13px;
+  font-weight: 400;
+  color: #323130;
+  margin-left: 12px;
+}
+
+.back-nav {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 400;
+  color: #323130;
+  transition: background-color 0.1s ease;
+}
+
+.back-nav:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.back-nav svg {
+  width: 12px;
+  height: 12px;
+  color: #323130;
+}
+
+/* 主体内容 */
+.main-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* 左侧边栏 (详情页) */
+.sidebar {
+  width: 346px;
+  background: #faf9f8;
+  border-right: 1px solid #edebe9;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  padding-top: 20px;
+}
+
+/* 主页导航 */
+.home-nav {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 24px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #323130;
+  transition: background-color 0.1s;
+  margin-bottom: 16px;
+}
+
+.home-nav:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.home-nav svg {
+  width: 16px;
+  height: 16px;
+  color: #323130;
+}
+
+/* 搜索框容器 */
+.search-container {
+  padding: 0 24px;
+  margin-bottom: 24px;
+}
+
+.sidebar-search {
+  position: relative;
+  width: 100%;
+}
+
+.sidebar-search input {
+  width: 100%;
+  height: 32px;
+  padding: 0 12px 0 36px;
+  border: 1px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  outline: none;
+  background: white;
+  color: #323130;
+}
+
+.sidebar-search input:focus {
+  border-color: #0078d4;
+}
+
+.sidebar-search input::placeholder {
+  color: #605e5c;
+}
+
+.sidebar-search .search-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  color: #605e5c;
+  pointer-events: none;
+}
+
+/* 分类标题 */
+.category-title {
+  padding: 0 24px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #323130;
+  margin-bottom: 16px;
+}
+
+/* 导航菜单 */
+.nav-menu {
+  flex: 1;
+  overflow-y: scroll;
+  padding-bottom: 60px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 24px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #323130;
+  transition: background-color 0.1s;
+  border-left: 3px solid transparent;
+}
+
+.nav-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.nav-item.active {
+  background-color: #f3f2f1;
+  border-left-color: #0078d4;
+  color: #0078d4;
+}
+
+.nav-item .nav-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* 主内容区域 */
+.content-area {
+  flex: 1;
+  overflow-y: auto;
+  background: white;
+}
+
+/* 主页视图 */
+.home-view {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 0px 72px;
+}
+
+/* Windows 设置标题 */
+.settings-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.settings-title {
+  font-size: 26px;
+  font-weight: 500;
+  color: #000;
+  margin: 0;
+}
+
+/* 主页搜索框 */
+.main-search-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 48px;
+}
+
+.main-search {
+  position: relative;
+  width: 100%;
+  max-width: 350px;
+}
+
+.main-search input {
+  width: 100%;
+  height: 36px;
+  padding: 0 16px 0 44px;
+  border: 1px solid #8a8886;
+  border-radius: 2px;
+  font-size: 14px;
+  outline: none;
+  background: white;
+  color: #323130;
+}
+
+.main-search input:focus {
+  border-color: #0078d4;
+}
+
+.main-search input::placeholder {
+  color: #605e5c;
+}
+
+.main-search .search-icon {
+  position: absolute;
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  color: #605e5c;
+  pointer-events: none;
+}
+
+/* 设置网格 */
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px 16px;
+  margin: 0 auto;
+  transform: translateX(-80px);
+}
+
+/* 设置卡片 - 精确匹配Windows 10 */
+.setting-card {
+  background: white;
+  /* border: 1px solid #edebe9; */
+  border-radius: 2px;
+  padding: 16px;
+  cursor: pointer;
+  transition: all 0.1s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  height: 90px;
+  width: 252px;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.setting-card:hover {
+  border-color: #f7f6f6;
+  border: 2px solid #c3c2c1;
+  /* 不改变方块大小 */
+  box-sizing: border-box !important;
+}
+
+.card-icon {
+  /* margin-bottom: 12px; */
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-35%);
+  color: #0078d4;
+  svg {
+    width: 56px;
+    height: 56px;
+  }
+}
+
+.card-content {
+  width: 100%;
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #000;
+  margin: 0 0 4px 0;
+  line-height: 1.3;
+  position: absolute;
+  top: 20px;
+  left: 56px;
+}
+
+.card-description {
+  font-size: 12px;
+  color: #605e5c;
+  margin: 0;
+  line-height: 1.4;
+  position: absolute;
+  top: 40px;
+  left: 56px;
+  display: flex;
+  text-align: left;
+}
+
+/* 详情页面 */
+.detail-view {
+  display: flex;
+  background: white;
+}
+
+.detail-main {
+  flex: 1;
+  padding: 0 32px 24px 32px;
+  max-width: calc(100% - 280px);
+}
+
+.detail-title {
+  font-size: 32px;
+  font-weight: 400;
+  color: #323130;
+  margin: 0 0 24px 0;
+  line-height: 1.3;
+  position: absolute;
+  top: 16px;
+  left: 380px;
+}
+
+.detail-content {
+  max-width: 800px;
+}
+
+/* 右侧相关设置区域 */
+.right-sidebar {
+  width: 280px;
+  padding: 24px 32px 24px 24px;
+  border-left: 1px solid #edebe9;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  flex-shrink: 0;
+}
+
+.related-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.related-title,
+.help-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0;
+}
+
+.related-links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.related-link,
+.help-link,
+.feedback-link {
+  color: #0078d4;
+  text-decoration: none;
+  font-size: 14px;
+  line-height: 1.4;
+  transition: color 0.1s;
+}
+
+.related-link:hover,
+.help-link:hover,
+.feedback-link:hover {
+  color: #106ebe;
+  text-decoration: underline;
+}
+
+/* 帮助链接 */
+.help-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Windows 支持 */
+.support-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: auto;
+}
+
+.support-text {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 600;
+  margin: 0;
+}
diff --git a/src/components/WindowsSystemSetting/index.ts b/src/components/WindowsSystemSetting/index.ts
new file mode 100644
index 0000000..42e7fe9
--- /dev/null
+++ b/src/components/WindowsSystemSetting/index.ts
@@ -0,0 +1,605 @@
+// Windows 10 设置分类 - 使用真实的Windows 10图标路径
+export const categories = [
+  {
+    id: 'system',
+    title: '系统',
+    description: '显示、声音、通知、电源',
+    iconPath:
+      'M2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2zm0 1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v1h2V5H3zm0 3v1h2V8H3zm4-3v1h2V5H7zm0 3v1h2V8H7zm4-3v1h2V5h-2zm0 3v1h2V8h-2z',
+    navItems: [
+      {
+        key: 'display',
+        label: '显示',
+        iconPath:
+          'M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-5L9 14v1a1 1 0 0 1-2 0v-1l-.5-2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h11.5a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2z'
+      },
+      // 声音
+      {
+        key: 'sound',
+        label: '声音',
+        iconPath:
+          'M12 3v6.586l4.293 4.293 1.414-1.414L14 8.586V3h-2zm-2 0H8v6.586l-4.293 4.293-1.414-1.414L6 8.586V3H4v6.586l-4.293 4.293-1.414-1.414L2 8.586V3h2z'
+      },
+      //通知和操作
+      {
+        key: 'notifications',
+        label: '通知和操作',
+        iconPath: 'M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zm-1 4H5v2h6v-2z'
+      },
+      //专注助手
+      {
+        key: 'focus-assist',
+        label: '专注助手',
+        iconPath:
+          'M12 4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h4zm0 4H8v2h4V8z'
+      },
+      //电源和睡眠
+      {
+        key: 'power',
+        label: '电源和睡眠',
+        iconPath:
+          'M12 4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h4zm0 4H8v2h4V8z'
+      },
+      //存储
+      {
+        key: 'storage',
+        label: '存储',
+        iconPath:
+          'M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v1h2V5H5zm0 3v1h2V8H5zm4-3v1h2V5H9zm0 3v1h2V8H9zm4-3v1h2V5h-2zm0 3v1h2V8h-2z'
+      },
+      //平板模式
+      {
+        key: 'tablet-mode',
+        label: '平板模式',
+        iconPath:
+          'M12 2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8zm0 1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1z'
+      },
+      //多任务处理
+      {
+        key: 'multitasking',
+        label: '多任务处理',
+        iconPath:
+          'M12 4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h4zm0 4H8v2h4V8z'
+      },
+      //投影到此电脑
+      {
+        key: 'projection',
+        label: '投影到此电脑',
+        iconPath:
+          'M12 4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h4zm0 4H8v2h4V8z'
+      },
+      //体验共享
+      {
+        key: 'shared-experience',
+        label: '体验共享',
+        iconPath:
+          'M12 4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h4zm0 4H8v2h4V8z'
+      },
+      //剪贴板
+      {
+        key: 'clipboard',
+        label: '剪贴板',
+        iconPath:
+          'M8 0a2 2 0 0 1 2 2v1h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4V2a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v1h2V1a1 1 0 0 0-1-1zm5 4H3v12h10V5z'
+      },
+      //远程桌面
+      {
+        key: 'remote-desktop',
+        label: '远程桌面',
+        iconPath:
+          'M12 4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h4zm0 4H8v2h4V8z'
+      },
+      //关于
+      {
+        key: 'about',
+        label: '关于',
+        iconPath: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z'
+      }
+    ]
+  },
+  {
+    id: 'devices',
+    title: '设备',
+    description: '蓝牙、打印机、鼠标',
+    iconPath:
+      'M9.5 2a.5.5 0 0 0-1 0v2.5H6V2a.5.5 0 0 0-1 0v2.5H2a.5.5 0 0 0 0 1h3V8a.5.5 0 0 0 1 0V5.5h2.5V8a.5.5 0 0 0 1 0V5.5H13a.5.5 0 0 0 0-1H9.5V2zm-7 9.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zm9.5 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z',
+    navItems: [
+      {
+        key: 'bluetooth',
+        label: '蓝牙和其他设备',
+        iconPath:
+          'M8.5 5.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zm-3 2a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 2a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z'
+      },
+      //打印机和扫描仪
+      {
+        key: 'printers',
+        label: '打印机和扫描仪',
+        iconPath:
+          'M12 2a2 2 0 0 1 2 2v1h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h2V2a2 2 0 0 1 2-2h4zm0 1H8a1 1 0 0 0-1 1v1h6V4a1 1 0 0 0-1-1zm-7 3v12h10V7H5zm1 1h8v10H6V8z'
+      },
+      //鼠标
+      {
+        key: 'mouse',
+        label: '鼠标',
+        iconPath:
+          'M12 2a2 2 0 0 1 2 2v1h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h2V2a2 2 0 0 1 2-2h4zm0 1H8a1 1 0 0 0-1 1v1h6V4a1 1 0 0 0-1-1zm-7 3v12h10V7H5zm1 1h8v10H6V8z'
+      },
+      //输入
+      {
+        key: 'typing',
+        label: '输入',
+        iconPath:
+          'M12 2a2 2 0 0 1 2 2v1h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h2V2a2 2 0 0 1 2-2h4zm0 1H8a1 1 0 0 0-1 1v1h6V4a1 1 0 0 0-1-1zm-7 3v12h10V7H5zm1 1h8v10H6V8z'
+      },
+      // 笔和Windows Ink
+      {
+        key: 'pen',
+        label: '笔和Windows Ink',
+        iconPath:
+          'M12 2a2 2 0 0 1 2 2v1h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h2V2a2 2 0 0 1 2-2h4zm0 1H8a1 1 0 0 0-1 1v1h6V4a1 1 0 0 0-1-1zm-7 3v12h10V7H5zm1 1h8v10H6V8z'
+      },
+      //自动播放
+      {
+        key: 'autoplay',
+        label: '自动播放',
+        iconPath:
+          'M12 2a2 2 0 0 1 2 2v1h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h2V2a2 2 0 0 1 2-2h4zm0 1H8a1 1 0 0 0-1 1v1h6V4a1 1 0 0 0-1-1zm-7 3v12h10V7H5zm1 1h8v10H6V8z'
+      },
+      //USB
+      {
+        key: 'usb',
+        label: 'USB',
+        iconPath:
+          'M12 2a2 2 0 0 1 2 2v1h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h2V2a2 2 0 0 1 2-2h4zm0 1H8a1 1 0 0 0-1 1v1h6V4a1 1 0 0 0-1-1zm-7 3v12h10V7H5zm1 1h8v10H6V8z'
+      }
+    ]
+  },
+  {
+    id: 'phone',
+    title: '手机',
+    description: '连接Android设备和iPhone',
+    iconPath:
+      'M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5zm3 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM6 3h4v8H6V3z',
+    navItems: []
+  },
+  {
+    id: 'network',
+    title: '网络和Internet',
+    description: 'Wi-Fi、飞行模式、VPN',
+    iconPath:
+      'M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-6.5a6.5 6.5 0 1 0 0 13A6.5 6.5 0 0 0 8 1.5zM7.5 3a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zm0 1a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm0 1a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z',
+    navItems: [
+      {
+        key: 'status',
+        label: '状态',
+        iconPath:
+          'M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z'
+      },
+      //以太网
+      {
+        key: 'ethernet',
+        label: '以太网',
+        iconPath:
+          'M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v1H3V4a1 1 0 0 1 1-1zm8 10H4a1 1 0 0 1-1-1v-1h10v1a1 1 0 0 1-1 1z'
+      },
+      //拨号
+      {
+        key: 'dialup',
+        label: '拨号',
+        iconPath:
+          'M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v1H3V4a1 1 0 0 1 1-1zm8 10H4a1 1 0 0 1-1-1v-1h10v1a1 1 0 0 1-1 1z'
+      },
+      //VPN
+      {
+        key: 'vpn',
+        label: 'VPN',
+        iconPath:
+          'M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v1H3V4a1 1 0 0 1 1-1zm8 10H4a1 1 0 0 1-1-1v-1h10v1a1 1 0 0 1-1 1z'
+      },
+      //数据使用量
+      {
+        key: 'dataUsage',
+        label: '数据使用量',
+        iconPath:
+          'M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v1H3V4a1 1 0 0 1 1-1zm8 10H4a1 1 0 0 1-1-1v-1h10v1a1 1 0 0 1-1 1z'
+      },
+      //代理
+      {
+        key: 'proxy',
+        label: '代理',
+        iconPath:
+          'M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v1H3V4a1 1 0 0 1 1-1zm8 10H4a1 1 0 0 1-1-1v-1h10v1a1 1 0 0 1-1 1z'
+      }
+    ]
+  },
+  {
+    id: 'personalization',
+    title: '个性化',
+    description: '背景、锁屏、颜色',
+    iconPath:
+      'M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zM3 4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4zm5.5.5A1.5 1.5 0 0 0 7 6v4a1.5 1.5 0 0 0 3 0V6a1.5 1.5 0 0 0-1.5-1.5z',
+    navItems: [
+      {
+        key: 'background',
+        label: '背景',
+        iconPath:
+          'M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z m2.5 0a4.002 4.002 0 0 1-3.204 3.92l-.796.159V13a1 1 0 1 0 2 0V9.281c.652-.129 1.26-.422 1.779-.842A4 4 0 0 1 8.5 5.5z'
+      },
+      //颜色
+      {
+        key: 'colors',
+        label: '颜色',
+        iconPath:
+          'M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v1H3V4a1 1 0 0 1 1-1zm8 10H4a1 1 0 0 1-1-1v-1h10v1a1 1 0 0 1-1 1z'
+      },
+      //锁屏界面
+      {
+        key: 'lock-screen',
+        label: '锁屏界面',
+        iconPath:
+          'M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v1H3V4a1 1 0 0 1 1-1zm8 10H4a1 1 0 0 1-1-1v-1h10v1a1 1 0 0 1-1 1z'
+      },
+      //主题
+      {
+        key: 'themes',
+        label: '主题',
+        iconPath:
+          'M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v1H3V4a1 1 0 0 1 1-1zm8 10H4a1 1 0 0 1-1-1v-1h10v1a1 1 0 0 1-1 1z'
+      },
+      //字体
+      {
+        key: 'fonts',
+        label: '字体',
+        iconPath:
+          'M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v1H3V4a1 1 0 0 1 1-1zm8 10H4a1 1 0 0 1-1-1v-1h10v1a1 1 0 0 1-1 1z'
+      },
+      //开始
+      {
+        key: 'start',
+        label: '开始',
+        iconPath:
+          'M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v1H3V4a1 1 0 0 1 1-1zm8 10H4a1 1 0 0 1-1-1v-1h10v1a1 1 0 0 1-1 1z'
+      },
+      //任务栏
+      {
+        key: 'taskbar',
+        label: '任务栏',
+        iconPath:
+          'M4 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v1H3V4a1 1 0 0 1 1-1zm8 10H4a1 1 0 0 1-1-1v-1h10v1a1 1 0 0 1-1 1z'
+      }
+    ]
+  },
+  {
+    id: 'application',
+    title: '应用',
+    description: '卸载、默认应用、可选功能',
+    iconPath:
+      'M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm2.5 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm4.5 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zM0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13zm1.5-.5a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-.5-.5h-13z',
+    navItems: []
+  },
+  {
+    id: 'account',
+    title: '账户',
+    description: '你的账户、电子邮件、同步设置、工作、家庭',
+    iconPath:
+      'M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z',
+    navItems: []
+  },
+  {
+    id: 'time',
+    title: '时间和语言',
+    description: '语音、区域、日期',
+    iconPath:
+      'M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5zM8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z',
+    navItems: [
+      //日期和时间
+      {
+        key: 'date',
+        label: '日期和时间',
+        iconPath: 'M8 0a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 1a7 7 0 0 1 0 14 7 7 0 0 1 0-14z'
+      },
+      //区域
+      {
+        key: 'region',
+        label: '区域',
+        iconPath: 'M8 0a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 1a7 7 0 0 1 0 14 7 7 0 0 1 0-14z'
+      },
+      //语言
+      {
+        key: 'language',
+        label: '语言',
+        iconPath: 'M8 0a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 1a7 7 0 0 1 0 14 7 7 0 0 1 0-14z'
+      },
+      //语音
+      {
+        key: 'speech',
+        label: '语音',
+        iconPath: 'M8 0a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 1a7 7 0 0 1 0 14 7 7 0 0 1 0-14z'
+      }
+    ]
+  },
+  {
+    id: 'games',
+    title: '游戏',
+    description: '游戏栏、截屏、直播、游戏模式',
+    iconPath:
+      'M2.5 4a.5.5 0 1 0 0 1h11a.5.5 0 0 0 0-1h-11zM2 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7zm1 0v5h10V7H3zm2.5.5a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1zm3 .5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0zm4.5-.5a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1zm-2 2a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0zm-3-.5a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1z',
+    navItems: []
+  },
+  {
+    id: 'easy',
+    title: '轻松使用',
+    description: '讲述人、放大镜、高对比度',
+    iconPath:
+      'M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM4.5 7.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0zM8 5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z',
+    navItems: []
+  },
+  {
+    id: 'search',
+    title: '搜索',
+    description: '查找我的文件、权限',
+    iconPath:
+      'M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z',
+    navItems: []
+  },
+  {
+    id: 'contana',
+    title: 'Contana',
+    description: 'Contana语言、权限、通知',
+    iconPath:
+      'M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z',
+    navItems: []
+  },
+  {
+    id: 'privacy',
+    title: '隐私',
+    description: '位置、相机、麦克风',
+    iconPath:
+      'M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z',
+    navItems: []
+  },
+  {
+    id: 'security',
+    title: '更新和安全',
+    description: 'Windows更新、恢复、备份',
+    iconPath:
+      'M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z',
+    navItems: [
+      //Windows更新
+      {
+        key: 'windows_update',
+        label: 'Windows更新',
+        iconPath:
+          'M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'
+      },
+      //传递优化
+      {
+        key: 'delivery_optimization',
+        label: '传递优化',
+        iconPath:
+          'M12 2a1 1 0 0 1 1 1v1h1a1 1 0 0 1 0 2h-1v1a1 1 0 0 1-2 0v-1h-1a1 1 0 0 1 0-2h1V3a1 1 0 0 1 1-1z'
+      },
+      //Windows安全中心
+      {
+        key: 'windows_security',
+        label: 'Windows安全中心',
+        iconPath:
+          'M12 2a1 1 0 0 1 1 1v1h1a1 1 0 0 1 0 2h-1v1a1 1 0 0 1-2 0v-1h-1a1 1 0 0 1 0-2h1V3a1 1 0 0 1 1-1z'
+      },
+      //备份
+      {
+        key: 'backup',
+        label: '备份',
+        iconPath:
+          'M12 2a1 1 0 0 1 1 1v1h1a1 1 0 0 1 0 2h-1v1a1 1 0 0 1-2 0v-1h-1a1 1 0 0 1 0-2h1V3a1 1 0 0 1 1-1z'
+      },
+      // 疑难解答
+      {
+        key: 'troubleshoot',
+        label: '疑难解答',
+        iconPath:
+          'M12 2a1 1 0 0 1 1 1v1h1a1 1 0 0 1 0 2h-1v1a1 1 0 0 1-2 0v-1h-1a1 1 0 0 1 0-2h1V3a1 1 0 0 1 1-1z'
+      },
+      //恢复
+      {
+        key: 'recovery',
+        label: '恢复',
+        iconPath:
+          'M12 2a1 1 0 0 1 1 1v1h1a1 1 0 0 1 0 2h-1v1a1 1 0 0 1-2 0v-1h-1a1 1 0 0 1 0-2h1V3a1 1 0 0 1 1-1z'
+      },
+      //激活
+      {
+        key: 'activation',
+        label: '激活',
+        iconPath:
+          'M12 2a1 1 0 0 1 1 1v1h1a1 1 0 0 1 0 2h-1v1a1 1 0 0 1-2 0v-1h-1a1 1 0 0 1 0-2h1V3a1 1 0 0 1 1-1z'
+      },
+      //查找我的设备
+      {
+        key: 'find_my_device',
+        label: '查找我的设备',
+        iconPath:
+          'M12 2a1 1 0 0 1 1 1v1h1a1 1 0 0 1 0 2h-1v1a1 1 0 0 1-2 0v-1h-1a1 1 0 0 1 0-2h1V3a1 1 0 0 1 1-1z'
+      },
+      //开发者选项
+      {
+        key: 'developer_options',
+        label: '开发者选项',
+        iconPath:
+          'M12 2a1 1 0 0 1 1 1v1h1a1 1 0 0 1 0 2h-1v1a1 1 0 0 1-2 0v-1h-1a1 1 0 0 1 0-2h1V3a1 1 0 0 1 1-1z'
+      },
+      //Windows预览体验计划
+      {
+        key: 'windows_insider_program',
+        label: 'Windows预览体验计划',
+        iconPath:
+          'M12 2a1 1 0 0 1 1 1v1h1a1 1 0 0 1 0 2h-1v1a1 1 0 0 1-2 0v-1h-1a1 1 0 0 1 0-2h1V3a1 1 0 0 1 1-1z'
+      }
+    ]
+  }
+]
+export const filterNav = [
+  'phone',
+  'application',
+  'account',
+  'games',
+  'easy',
+  'search',
+  'contana',
+  'privacy'
+]
+
+import { useSettingStore } from "@/store/modules/settings"
+
+/**
+ * 通用的消息发送函数，用于将Windows系统设置更改添加到全局状态
+ * @param pageName 设置页面的顶级标题, e.g., '系统'
+ * @param description 更改项的具体描述, e.g., '显示'
+ * @param category 更改项的分类, e.g., 'system'
+ * @param key 更改项的唯一标识, e.g., 'display'
+ * @param value 更改项的值 (可以是 boolean, string, number 等)
+ */
+export const sendWindowsSettingMsg = (pageName: string, description: string, category: string, key: string, value: any) => {
+  const settingStore = useSettingStore()
+
+  let displayValue: string;
+  
+  // 根据值的类型格式化显示文本
+  if (typeof value === 'boolean') {
+    displayValue = value ? '开启' : '关闭';
+  } else if (typeof value === 'number') {
+    displayValue = value.toString();
+  } else {
+    displayValue = value;
+  }
+
+  // 拼接 contentIn 字符串
+  const contentIn = `Windows设置${pageName}-${description}: ${displayValue}`
+  
+  // 拼接 content 字符串
+  const content = `windows@${category}@${key}@${value}`
+
+  // 创建数据对象并添加到 store
+  const data = { contentIn, content, scoreRate: '' };
+  
+  // 为了避免重复，可以先查找并更新，如果不存在再添加
+  const existingIndex = settingStore.settingsFormList.findIndex(item => 
+    item.content && item.content.startsWith(`windows@${category}@${key}@`)
+  );
+
+  if (existingIndex !== -1) {
+    // 如果已存在，则替换
+    settingStore.settingsFormList[existingIndex] = data;
+  } else {
+    // 如果不存在，则添加
+    settingStore.settingsFormList.push(data);
+  }
+
+  console.log('Updated Windows settings data:', data);
+  console.log('Current form list:', settingStore.settingsFormList);
+}
+
+/**
+ * 针对系统设置的便捷函数
+ */
+export const sendSystemMsg = (description: string, key: string, value: any) => {
+  sendWindowsSettingMsg('系统', description, 'system', key, value);
+}
+
+/**
+ * 针对设备设置的便捷函数
+ */
+export const sendDeviceMsg = (description: string, key: string, value: any) => {
+  sendWindowsSettingMsg('设备', description, 'devices', key, value);
+}
+
+/**
+ * 针对网络设置的便捷函数
+ */
+export const sendNetworkMsg = (description: string, key: string, value: any) => {
+  sendWindowsSettingMsg('网络和Internet', description, 'network', key, value);
+}
+
+/**
+ * 针对个性化设置的便捷函数
+ */
+export const sendPersonalizationMsg = (description: string, key: string, value: any) => {
+  sendWindowsSettingMsg('个性化', description, 'personalization', key, value);
+}
+
+/**
+ * 针对应用设置的便捷函数
+ */
+export const sendAppsMsg = (description: string, key: string, value: any) => {
+  sendWindowsSettingMsg('应用', description, 'apps', key, value);
+}
+
+/**
+ * 针对账户设置的便捷函数
+ */
+export const sendAccountMsg = (description: string, key: string, value: any) => {
+  sendWindowsSettingMsg('账户', description, 'accounts', key, value);
+}
+
+/**
+ * 针对时间和语言设置的便捷函数
+ */
+export const sendTimeLanguageMsg = (description: string, key: string, value: any) => {
+  sendWindowsSettingMsg('时间和语言', description, 'time', key, value);
+}
+
+/**
+ * 针对游戏设置的便捷函数
+ */
+export const sendGamingMsg = (description: string, key: string, value: any) => {
+  sendWindowsSettingMsg('游戏', description, 'gaming', key, value);
+}
+
+/**
+ * 针对轻松使用设置的便捷函数
+ */
+export const sendEaseOfAccessMsg = (description: string, key: string, value: any) => {
+  sendWindowsSettingMsg('轻松使用', description, 'easeOfAccess', key, value);
+}
+
+/**
+ * 针对搜索设置的便捷函数
+ */
+export const sendSearchMsg = (description: string, key: string, value: any) => {
+  sendWindowsSettingMsg('搜索', description, 'search', key, value);
+}
+
+/**
+ * 针对Cortana设置的便捷函数
+ */
+export const sendCortanaMsg = (description: string, key: string, value: any) => {
+  sendWindowsSettingMsg('Cortana', description, 'cortana', key, value);
+}
+
+/**
+ * 针对隐私设置的便捷函数
+ */
+export const sendPrivacyMsg = (description: string, key: string, value: any) => {
+  sendWindowsSettingMsg('隐私', description, 'privacy', key, value);
+}
+
+/**
+ * 针对更新和安全设置的便捷函数
+ */
+export const sendUpdateSecurityMsg = (description: string, key: string, value: any) => {
+  sendWindowsSettingMsg('更新和安全', description, 'updateSecurity', key, value);
+}
+
+/**
+ * 针对手机设置的便捷函数
+ */
+export const sendPhoneMsg = (description: string, key: string, value: any) => {
+  sendWindowsSettingMsg('手机', description, 'phone', key, value);
+}
+
+/**
+ * 针对多任务设置的便捷函数
+ */
+export const sendMultitaskingMsg = (description: string, key: string, value: any) => {
+  sendWindowsSettingMsg('多任务', description, 'multitasking', key, value);
+}
diff --git a/src/components/WindowsSystemSetting/index.vue b/src/components/WindowsSystemSetting/index.vue
new file mode 100644
index 0000000..19fcfe2
--- /dev/null
+++ b/src/components/WindowsSystemSetting/index.vue
@@ -0,0 +1,313 @@
+<template>
+  <div class="windows-10-settings">
+    <!-- 顶部标题栏 -->
+    <div
+      class="title-bar"
+      :style="selectedCategory ? { background: '#faf9f8', borderRight: '1px solid #edebe9' } : {}"
+    >
+      <!-- 左侧标题 -->
+      <div class="left-section">
+        <div class="back-nav" @click="goBack" v-if="selectedCategory">
+          <svg width="16" height="16" viewBox="0 0 16 16">
+            <path
+              d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
+              fill="currentColor"
+            />
+          </svg>
+          <span>设置</span>
+        </div>
+        <div v-else class="page-title">设置</div>
+      </div>
+    </div>
+
+    <!-- 主体内容区域 -->
+    <div class="main-content">
+      <!-- 左侧边栏 (详情页) -->
+      <div v-if="selectedCategory" class="sidebar">
+        <!-- 主页导航 -->
+        <div class="home-nav" @click="goBack">
+          <svg width="16" height="16" viewBox="0 0 16 16">
+            <path
+              d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 .708.708L8 2.207l5.646 5.647a.5.5 0 0 0 .708-.708l-6-6z"
+              fill="currentColor"
+            />
+          </svg>
+          <span>主页</span>
+        </div>
+
+        <!-- 搜索框 -->
+        <div class="search-container">
+          <div class="sidebar-search">
+            <svg width="16" height="16" viewBox="0 0 16 16" class="search-icon">
+              <path
+                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
+                fill="currentColor"
+              />
+            </svg>
+            <input type="text" v-model="searchQuery" placeholder="查找设置" />
+          </div>
+        </div>
+
+        <!-- 分类标题 -->
+        <div class="category-title">{{ getCurrentCategory()?.title }}</div>
+
+        <!-- 导航菜单 -->
+        <div class="nav-menu">
+          <div
+            v-for="item in getCurrentCategory()?.navItems || []"
+            :key="item.key"
+            class="nav-item"
+            :class="{ active: activeNavItem === item.key }"
+            @click="setActiveNav(item.key)"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" class="nav-icon">
+              <path :d="item.iconPath" fill="currentColor" />
+            </svg>
+            <span>{{ item.label }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 主内容区域 -->
+      <div class="content-area">
+        <!-- 主页视图 -->
+        <div v-if="!selectedCategory" class="home-view">
+          <!-- Windows 设置标题 -->
+          <div class="settings-header">
+            <h1 class="settings-title">Windows 设置</h1>
+          </div>
+
+          <!-- 搜索框 (主页) -->
+          <div class="main-search-container">
+            <div class="main-search">
+              <svg width="16" height="16" viewBox="0 0 16 16" class="search-icon">
+                <path
+                  d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input type="text" v-model="searchQuery" placeholder="查找设置" />
+            </div>
+          </div>
+
+          <!-- 设置网格 -->
+          <div class="settings-grid">
+            <div
+              v-for="category in filteredCategories"
+              :key="category.id"
+              class="setting-card"
+              @click="selectCategory(category.id)"
+            >
+              <div class="card-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24">
+                  <path :d="category.iconPath" fill="currentColor" />
+                </svg>
+              </div>
+              <div class="card-content">
+                <h3 class="card-title">{{ category.title }}</h3>
+                <p class="card-description">{{ category.description }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 详情页内容 -->
+        <div v-if="selectedCategory" class="detail-view">
+          <div class="detail-main">
+            <h2 class="detail-title">{{ getCurrentNavItemTitle() }}</h2>
+            <div class="detail-content">
+              <!-- 各种详情组件 -->
+              <SystemDetail
+                v-if="selectedCategory === 'system'"
+                :activeNav="activeNavItem"
+                @navigate-to="setActiveNav"
+              />
+              <DevicesDetail
+                v-if="selectedCategory === 'devices'"
+                :activeNav="activeNavItem"
+                @navigate-to="setActiveNav"
+              />
+              <PhoneDetail v-if="selectedCategory === 'phone'" :activeNav="activeNavItem" />
+              <NetworkDetail
+                v-if="selectedCategory === 'network'"
+                :activeNav="activeNavItem"
+                @navigate-to="setActiveNav"
+              />
+              <PersonalizationDetail
+                v-if="selectedCategory === 'personalization'"
+                :activeNav="activeNavItem"
+              />
+              <AppsDetail v-if="selectedCategory === 'application'" :activeNav="activeNavItem" />
+              <AccountsDetail v-if="selectedCategory === 'account'" :activeNav="activeNavItem" />
+              <TimeLanguageDetail v-if="selectedCategory === 'time'" :activeNav="activeNavItem" />
+              <GamingDetail v-if="selectedCategory === 'games'" :activeNav="activeNavItem" />
+              <EaseOfAccessDetail v-if="selectedCategory === 'easy'" :activeNav="activeNavItem" />
+              <SearchDetail v-if="selectedCategory === 'search'" :activeNav="activeNavItem" />
+              <CortanaDetail v-if="selectedCategory === 'contana'" :activeNav="activeNavItem" />
+              <PrivacyDetail v-if="selectedCategory === 'privacy'" :activeNav="activeNavItem" />
+              <UpdateSecurityDetail
+                v-if="selectedCategory === 'security'"
+                :activeNav="activeNavItem"
+              />
+            </div>
+          </div>
+
+          <!-- 右侧相关设置 -->
+          <div class="right-sidebar">
+            <div class="related-settings">
+              <h3 class="related-title">相关设置</h3>
+              <div class="related-links">
+                <template v-if="selectedCategory === 'system'">
+                  <a href="#" class="related-link">设备管理器</a>
+                  <a href="#" class="related-link">系统信息</a>
+                  <a href="#" class="related-link">高级系统设置</a>
+                  <a href="#" class="related-link">系统保护</a>
+                </template>
+                <template v-else-if="selectedCategory === 'devices'">
+                  <a href="#" class="related-link">设备和打印机</a>
+                  <a href="#" class="related-link">鼠标设置</a>
+                  <a href="#" class="related-link">键盘设置</a>
+                  <a href="#" class="related-link">硬件疑难解答</a>
+                </template>
+                <template v-else-if="selectedCategory === 'network'">
+                  <a href="#" class="related-link">网络和共享中心</a>
+                  <a href="#" class="related-link">更改适配器设置</a>
+                  <a href="#" class="related-link">Windows 防火墙</a>
+                  <a href="#" class="related-link">网络疑难解答</a>
+                </template>
+                <template v-else-if="selectedCategory === 'personalization'">
+                  <a href="#" class="related-link">Microsoft Store 中的主题</a>
+                  <a href="#" class="related-link">高级显示设置</a>
+                  <a href="#" class="related-link">桌面图标设置</a>
+                  <a href="#" class="related-link">文件夹选项</a>
+                </template>
+                <template v-else-if="selectedCategory === 'time'">
+                  <a href="#" class="related-link">日期和时间</a>
+                  <a href="#" class="related-link">区域</a>
+                  <a href="#" class="related-link">语言选项</a>
+                  <a href="#" class="related-link">语音识别</a>
+                </template>
+                <template v-else-if="selectedCategory === 'security'">
+                  <a href="#" class="related-link">Windows Defender</a>
+                  <a href="#" class="related-link">系统还原</a>
+                  <a href="#" class="related-link">文件历史记录</a>
+                  <a href="#" class="related-link">BitLocker</a>
+                </template>
+                <template v-else>
+                  <a href="#" class="related-link">控制面板</a>
+                  <a href="#" class="related-link">设备管理器</a>
+                  <a href="#" class="related-link">系统信息</a>
+                </template>
+              </div>
+            </div>
+
+            <div class="help-section">
+              <h3 class="help-title">有疑问？</h3>
+              <a href="#" class="help-link">获取帮助</a>
+            </div>
+
+            <div class="support-section">
+              <div class="support-text">让 Windows 支持更好</div>
+              <a href="#" class="feedback-link">提供反馈</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import SystemDetail from './components/SystemDetail.vue'
+import DevicesDetail from './components/DevicesDetail.vue'
+import PhoneDetail from './components/PhoneDetail.vue'
+import NetworkDetail from './components/NetworkDetail.vue'
+import PersonalizationDetail from './components/PersonalizationDetail.vue'
+import AppsDetail from './components/AppsDetail.vue'
+import AccountsDetail from './components/AccountsDetail.vue'
+import TimeLanguageDetail from './components/TimeLanguageDetail.vue'
+import GamingDetail from './components/GamingDetail.vue'
+import EaseOfAccessDetail from './components/EaseOfAccessDetail.vue'
+import SearchDetail from './components/SearchDetail.vue'
+import CortanaDetail from './components/CortanaDetail.vue'
+import PrivacyDetail from './components/PrivacyDetail.vue'
+import UpdateSecurityDetail from './components/UpdateSecurityDetail.vue'
+import { categories, filterNav } from './index'
+// 响应式数据
+const searchQuery = ref('')
+const selectedCategory = ref<string | null>(null)
+//默认第一个
+const activeNavItem = ref('main')
+
+// 计算属性
+const filteredCategories = computed(() => {
+  if (!searchQuery.value) return categories
+  return categories.filter(
+    (cat) =>
+      cat.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      cat.description.toLowerCase().includes(searchQuery.value.toLowerCase())
+  )
+})
+
+// 方法
+const selectCategory = (categoryId: string) => {
+  if (filterNav.includes(categoryId)) return
+  selectedCategory.value = categoryId
+
+  // 获取当前分类的第一个导航项
+  const category = categories.find((cat) => cat.id === categoryId)
+  if (category && category.navItems && category.navItems.length > 0) {
+    // 默认选择第一个导航项
+    activeNavItem.value = category.navItems[0].key
+  } else {
+    activeNavItem.value = 'main'
+  }
+}
+
+const goBack = () => {
+  selectedCategory.value = null
+  activeNavItem.value = 'main'
+}
+
+const setActiveNav = (navKey: string) => {
+  activeNavItem.value = navKey
+}
+
+const getCurrentCategory = () => {
+  return categories.find((cat) => cat.id === selectedCategory.value)
+}
+
+const getCurrentNavItemTitle = () => {
+  const category = getCurrentCategory()
+  if (!category) return ''
+
+  if (activeNavItem.value === 'main') {
+    return category.title
+  }
+
+  const navItem = category.navItems.find((item) => item.key === activeNavItem.value)
+  return navItem ? navItem.label : category.title
+}
+</script>
+
+<style scoped>
+@import './index.scss';
+::-webkit-scrollbar {
+  background: #faf9f8;
+  width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 4px;
+  border: none;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #aaa;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+</style>
diff --git a/src/views/paper/question/WindowsSystemSettingForm.vue b/src/views/paper/question/WindowsSystemSettingForm.vue
new file mode 100644
index 0000000..b1f0d86
--- /dev/null
+++ b/src/views/paper/question/WindowsSystemSettingForm.vue
@@ -0,0 +1,576 @@
+<template>
+  <div class="edit-dialog">
+    <Dialog v-model="dialogVisible" :title="dialogTitle" width="85%" top="10vh">
+      <el-scrollbar>
+        <div class="main">
+          <el-form
+            ref="formRef"
+            v-loading="formLoading"
+            :model="formData"
+            :rules="formRules"
+            label-width="80px"
+          >
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="专业" prop="specialtyName">
+                  <el-input v-model="formData.specialtyName" placeholder="请输入专业" disabled />
+                </el-form-item>
+              </el-col>
+
+              <el-col :span="12">
+                <el-form-item label="章节名称" prop="chapteridDictText">
+                  <el-input
+                    v-model="formData.chapteridDictTextVo"
+                    placeholder="请输入章节名称"
+                    disabled
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="课程" prop="courseName">
+                  <el-input v-model="formData.courseName" placeholder="请输入课程" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="题型难度" prop="quLevel">
+                  <el-select v-model="formData.quLevel" placeholder="请选择题型难度" clearable>
+                    <el-option
+                      v-for="dict in getIntDictOptions(DICT_TYPE.EXAM_QUE_DIFF)"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="题型" prop="subjectName">
+                  <el-input v-model="formData.subjectName" placeholder="请输入题型" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="知识点" prop="pointNames">
+                  <el-input
+                    v-model="formData.pointNamesVo"
+                    placeholder="请选择知识点"
+                    readonly
+                    @click="openPoints()"
+                  />
+                </el-form-item>
+              </el-col>
+
+              <el-dialog v-model="dialogVisiblePoints" title="选择知识点" width="30%">
+                <el-tree
+                  ref="treeRef"
+                  :data="deptList"
+                  node-key="id"
+                  :props="{ label: 'name', children: 'children' }"
+                  highlight-current
+                  default-expand-all
+                  @node-click="handleNodeClick"
+                />
+              </el-dialog>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="启用状态" prop="status">
+                  <el-radio-group v-model="formData.status">
+                    <el-radio :label="'0'">启用</el-radio>
+                    <el-radio :label="'1'">禁用</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+          <div class="edit-bottom">
+            <div class="edit-left bottom-common">
+              <el-tabs v-model="leftActiveName" class="demo-tabs">
+                <el-tab-pane label="试题描述" name="desc">
+                  <div class="block">
+                    <Editor v-model="formData.content" height="150px" />
+                  </div>
+                </el-tab-pane>
+              </el-tabs>
+            </div>
+            <div class="edit-right bottom-common">
+              <el-tabs v-model="rightActiveName" class="demo-tabs" @tab-click="rightHandleClick">
+                <el-tab-pane label="试题解析" name="analysis">
+                  <div class="block">
+                    <Editor v-model="formData.analysis" height="150px" />
+                  </div>
+                </el-tab-pane>
+                <el-tab-pane name="answer">
+                  <template #label>
+                    <div class="custom-tabs-label">
+                      <p>试题考点</p>
+                      <el-dropdown>
+                        <span class="el-dropdown-link" @click.stop="false">
+                          <div class="setting_icon"></div>
+                        </span>
+                        <template #dropdown>
+                          <el-dropdown-menu>
+                            <el-dropdown-item>
+                              <el-button @click="addWindowsSystemInfo">添加</el-button>
+                            </el-dropdown-item>
+                          </el-dropdown-menu>
+                        </template>
+                      </el-dropdown>
+                    </div>
+                  </template>
+                  <div class="block">
+                    <el-table
+                      v-loading="loading"
+                      :data="list"
+                      @selection-change="handleSelectionChange"
+                    >
+                      <el-table-column label="考点" align="center" prop="contentIn" width="390px" />
+                      <el-table-column label="权值" align="center" prop="scoreRate" width="120px">
+                        <template #default="scope">
+                          <el-input v-model="scope.row.scoreRate" placeholder="请输入权值" />
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="操作" align="center" width="100px">
+                        <template #default="scope">
+                          <el-button type="danger" plain @click="handleDelete(scope.row)" link>
+                            删除
+                          </el-button>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </div>
+                </el-tab-pane>
+              </el-tabs>
+            </div>
+          </div>
+        </div>
+      </el-scrollbar>
+      <template #footer>
+        <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </template>
+    </Dialog>
+  </div>
+  <!-- 表单弹窗：添加/修改 -->
+  <FileForm ref="FileRef" @success="handleUploadSuccess" />
+  <el-dialog
+    v-model="dialogFormVisibleWindowsSystemInfo"
+    title="Windows系统设置考点"
+    width="1100px"
+    @close="handleFrom"
+  >
+    <WindowsSystemSetting />
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { FormRules } from 'element-plus'
+import * as QuestionApi from '@/api/paper/question'
+import FileForm from './components/FileForm.vue'
+import WindowsSystemSetting from '@/components/WindowsSystemSetting/index.vue'
+import * as SpecialtyApi from '@/api/points'
+import { handleTree } from '@/utils/tree'
+import { useSettingStore } from '@/store/modules/settings'
+const settingStore = useSettingStore()
+
+defineOptions({ name: 'WindowsSystemSettingForm' })
+
+const list = ref<any>([]) // 列表的数
+const handleFrom = () => {
+  list.value = [...settingStore.settingsFormList]
+}
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const loading = ref(false) // 列表的加载中
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  pointNamesVo: '',
+  chapteridDictTextVo: '',
+  content: '',
+  specialtyName: '',
+  courseName: '',
+  quBankName: '',
+  required: '',
+  chapteridDictText: '',
+  analysis: '',
+  quLevel: 0,
+  pointNames: '',
+  subjectName: '',
+  status: ' ',
+  resourceValue: '',
+  answerList: [
+    {
+      image: '',
+      content: '',
+      contentIn: '',
+      scoreRate: ''
+    }
+  ],
+  fileUploads: [
+    {
+      quId: '',
+      url: '',
+      fileType: '0',
+      fileName: ''
+    },
+    {
+      quId: '',
+      url: '',
+      fileType: '1',
+      fileName: ''
+    },
+    {
+      quId: '',
+      url: '',
+      fileType: '2',
+      fileName: ''
+    }
+  ]
+})
+
+const documentList = ref([
+  {
+    quId: '',
+    url: '',
+    fileType: '0',
+    fileName: ''
+  },
+  {
+    quId: '',
+    url: '',
+    fileType: '1',
+    fileName: ''
+  },
+  {
+    quId: '',
+    url: '',
+    fileType: '2',
+    fileName: ''
+  }
+])
+const dialogFormVisibleWindowsSystemInfo = ref(false)
+
+const addWindowsSystemInfo = async () => {
+  dialogFormVisibleWindowsSystemInfo.value = true
+}
+
+const handleDelete = (row) => {
+  for (let i = 0; i < list.value.length; i++) {
+    if (row.content == list.value[i].content) {
+      list.value.splice(i, 1)
+    }
+  }
+}
+
+const formRules = reactive<FormRules>({
+  status: [{ required: true, message: '启用状态必填', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+// 左侧试题描述
+const leftActiveName = ref('desc')
+// 右侧tab
+const rightActiveName = ref('answer')
+const rightHandleClick = (tab, e) => {
+  rightActiveName.value = tab.paneName.value
+}
+
+const selections = ref([])
+const handleSelectionChange = (rows) => {
+  selections.value = rows
+}
+
+/** 添加/修改操作 */
+const FileRef = ref()
+const openForm = (type: string) => {
+  FileRef.value.open(type)
+}
+
+const handleUploadSuccess = ({ url, fileType }) => {
+  const index = documentList.value.findIndex((item) => item.fileType === fileType)
+  if (index !== -1) {
+    documentList.value[index].url = url
+  }
+}
+
+// 知识点相关
+const dialogVisiblePoints = ref(false)
+const deptList = ref<any>([])
+const treeRef = ref()
+
+const openPoints = () => {
+  dialogVisiblePoints.value = true
+  getTreePoint()
+}
+
+const getTreePoint = async () => {
+  const res = await SpecialtyApi.listPoints()
+  deptList.value = handleTree(res)
+}
+
+const handleNodeClick = (data: any) => {
+  formData.value.pointNamesVo = data.name
+  formData.value.pointNames = data.id
+  dialogVisiblePoints.value = false
+}
+
+/** 打开弹窗 */
+const open = async (queryParams: any, type: string, id?: number) => {
+  dialogVisible.value = true
+  settingStore.settingsFormList = []
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const res = await QuestionApi.getQuestion(id)
+      formData.value = res
+      console.log(formData.value)
+      list.value = formData.value.answerList
+      settingStore.settingsFormList = [...list.value]
+      documentList.value = res.fileUploads
+    } finally {
+      formLoading.value = false
+    }
+  } else {
+    resetForm()
+    formData.value.specialtyName = queryParams.specialtyName
+    formData.value.courseName = queryParams.courseName
+    formData.value.subjectName = queryParams.subjectName
+    formData.value.pointNames = queryParams.pointNamesVo
+    formData.value.pointNamesVo = queryParams.pointNames
+    formData.value.chapteridDictText = queryParams.chapteridDictTextVo
+    formData.value.chapteridDictTextVo = queryParams.chapteridDictText
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  formData.value.answerList = list.value
+  formData.value.fileUploads = documentList.value
+  // 校验表单
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown
+    if (formType.value === 'create') {
+      await QuestionApi.addQuestion(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await QuestionApi.editQuestion(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    pointNamesVo: '',
+    chapteridDictTextVo: '',
+    content: '',
+    specialtyName: '',
+    courseName: '',
+    quBankName: '',
+    required: '',
+    chapteridDictText: '',
+    analysis: '',
+    quLevel: 0,
+    pointNames: '',
+    subjectName: '',
+    status: ' ',
+    resourceValue: '',
+    answerList: [
+      {
+        image: '',
+        content: '',
+        contentIn: '',
+        scoreRate: ''
+      }
+    ],
+    fileUploads: [
+      {
+        quId: '',
+        url: '',
+        fileType: '0',
+        fileName: ''
+      },
+      {
+        quId: '',
+        url: '',
+        fileType: '1',
+        fileName: ''
+      },
+      {
+        quId: '',
+        url: '',
+        fileType: '2',
+        fileName: ''
+      }
+    ]
+  }
+  formRef.value?.resetFields()
+}
+</script>
+
+<style lang="scss" scoped>
+.edit-dialog {
+  :deep(.el-dialog) {
+    display: flex;
+    flex-direction: column;
+    .el-dialog__header {
+      border-bottom: 1px solid #ededed;
+    }
+    .el-dialog__footer {
+      border-top: 1px solid #ededed;
+    }
+    .el-dialog__body {
+      flex: 1;
+      overflow: hidden;
+      .main {
+        .el-form {
+          padding: 10px;
+          .el-row {
+            justify-content: space-between;
+            margin-bottom: 10px;
+          }
+          .el-form-item {
+            width: 100%;
+            margin-bottom: 0;
+            align-items: center;
+          }
+        }
+        .edit-bottom {
+          display: flex;
+          justify-content: space-between;
+          padding-bottom: 10px;
+          .bottom-common {
+            width: calc(50% - 10px);
+            .el-tabs {
+              height: 100%;
+              .el-tabs__content {
+                flex: 1;
+                overflow-y: auto;
+                .block {
+                  width: 100%;
+                  height: 200px;
+                  overflow: auto;
+                }
+                .answer {
+                  .tip {
+                    color: #8a6d3b;
+                    background-color: #fcf8e3;
+                    border-color: #faebcc;
+                    padding: 10px 20px;
+                    display: flex;
+                    align-items: center;
+                    > p {
+                      flex-shrink: 0;
+                    }
+                  }
+                  .el-radio-group {
+                    width: 100%;
+                    display: inline-flex;
+                    align-items: flex-start;
+                    font-size: 0;
+                    flex-direction: column;
+                    .options {
+                      width: 100%;
+                      margin-top: 15px;
+                      .content {
+                        display: flex;
+                        .text {
+                          width: 100%;
+                          height: 70px;
+                          border: 1px solid #ededed;
+                          .el-textarea__inner {
+                            resize: none;
+                          }
+                        }
+                      }
+                      .more-btn {
+                        margin-top: 8px;
+                        background-color: #ffffff;
+                        border-color: #007bff;
+                        color: #007bff;
+                        width: auto;
+                        height: auto;
+                        padding: 10px 10px;
+                      }
+                    }
+                  }
+                }
+              }
+
+              .custom-tabs-label {
+                display: flex;
+                align-items: center;
+                .setting_icon {
+                  width: 16px;
+                  height: 16px;
+                  background: url('@/assets/icon/setting_blue.png') no-repeat center;
+                  background-size: 100%;
+                  margin-left: 3px;
+                  display: none;
+                }
+              }
+              .is-active {
+                .custom-tabs-label {
+                  .setting_icon {
+                    display: block;
+                  }
+                }
+              }
+              :deep(.ele-pro-table) {
+                flex: 1;
+                margin-top: 10px;
+                .el-table--fit {
+                  height: 100%;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+:deep(.tox-tinymce) {
+  .tox-statusbar {
+    display: none;
+  }
+}
+
+:deep(.el-table) {
+  .el-table__header-wrapper {
+    .el-table__header {
+      thead {
+        tr {
+          th {
+            background: #ebebeb;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/paper/question/index.vue b/src/views/paper/question/index.vue
index 8e4d121..ddd5d46 100644
--- a/src/views/paper/question/index.vue
+++ b/src/views/paper/question/index.vue
@@ -338,6 +338,7 @@
   <WpsWordForm ref="wformRef" @success="getList" />
   <WpsPptxForm ref="pformRef" @success="getList" />
   <SettingForm ref="setformRef" @success="getList" />
+  <WindowsSystemSettingForm ref="windowsSystemFormRef" @success="getList" />
   <EmailForm ref="emailformRef" @success="getList" />
   <WpsXlsxForm ref="xlsxformRef" @success="getList" />
   <PsForm ref="psformRef" @success="getList" />
@@ -360,6 +361,7 @@ import UserImportForm from './UserImportForm.vue'
 import WpsWordForm from './WpsWordForm.vue'
 import WpsPptxForm from './WpsPptxForm.vue'
 import SettingForm from './SettingForm.vue'
+import WindowsSystemSettingForm from './WindowsSystemSettingForm.vue'
 import WpsXlsxForm from './WpsXlsxForm.vue'
 import PsForm from './PsForm.vue'
 import EmailForm from './EmailForm.vue'
@@ -743,6 +745,7 @@ const fformRef = ref()
 const wformRef = ref()
 const pformRef = ref()
 const setformRef = ref()
+const windowsSystemFormRef = ref()
 const emailformRef = ref()
 const xlsxformRef = ref()
 const psformRef = ref()
@@ -767,6 +770,8 @@ const openForm = (type: string, id?: number) => {
     pformRef.value.open(queryParams, type, id)
   } else if (chooseQuestionType.value.includes('windows网络设置')) {
     setformRef.value.open(queryParams, type, id)
+  } else if (chooseQuestionType.value.includes('windows系统设置')) {
+    windowsSystemFormRef.value.open(queryParams, type, id)
   } else if (chooseQuestionType.value.includes('邮箱')) {
     emailformRef.value.open(queryParams, type, id)
   } else if (chooseQuestionType.value.includes('表格')) {
@@ -850,8 +855,8 @@ const handleDeletes = async () => {
       type: 'warning'
     })
     selectedRows.value = rows.map((d: any) => d.quId) // 保存选中的行数据
-   const res =  await QuestionApi.removeQuestions(selectedRows.value)
-      if (res == '删除成功') {
+    const res = await QuestionApi.removeQuestions(selectedRows.value)
+    if (res == '删除成功') {
       message.success(res)
     } else {
       message.error(res)