From 6cbbbe854178c31f228b3f314f163b9853f10cf3 Mon Sep 17 00:00:00 2001
From: Frost-ZX <frost-zx@foxmail.com>
Date: Sat, 3 Jan 2026 19:43:22 +0800
Subject: [PATCH] =?UTF-8?q?chore(=E5=B7=A5=E5=85=B7=E7=AE=B1/=E4=BF=9D?=
 =?UTF-8?q?=E6=8C=81=E4=BA=AE=E5=B1=8F):=20=E8=B0=83=E6=95=B4=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=B8=8E=E5=85=B6=E4=BB=96?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/js/toolbox-changelogs.js          |   1 +
 src/assets/js/toolbox-data.js                |   4 +-
 src/views/ToolboxView/Other/KeepScreenOn.vue | 137 +++++++++----------
 3 files changed, 71 insertions(+), 71 deletions(-)

diff --git a/src/assets/js/toolbox-changelogs.js b/src/assets/js/toolbox-changelogs.js
index 3d1e42c..d80dac7 100644
--- a/src/assets/js/toolbox-changelogs.js
+++ b/src/assets/js/toolbox-changelogs.js
@@ -5,6 +5,7 @@ export const CHANGE_LOGS = {
     '[1] - 2025-02-04\n初始版本。',
   ],
   'keep-screen-on': [
+    '[3] - 2026-01-03\n调整界面样式，与其他模块统一。',
     '[2] - 2024-10-13\n优化界面样式，背景添加圆角。',
     '[1] - 2024-10-11\n初始版本。',
   ],
diff --git a/src/assets/js/toolbox-data.js b/src/assets/js/toolbox-data.js
index b1fc594..b3222d2 100644
--- a/src/assets/js/toolbox-data.js
+++ b/src/assets/js/toolbox-data.js
@@ -296,8 +296,8 @@ export const toolList = [
         iconClass: 'mdi mdi-monitor',
         desc: '保持屏幕开启，不息屏，不休眠。',
         createdAt: '2024-10-11',
-        updatedAt: '2024-10-13',
-        version: '2',
+        updatedAt: '2026-01-03',
+        version: '3',
         enabled: true,
         changelogs: CHANGE_LOGS['keep-screen-on'],
       },
diff --git a/src/views/ToolboxView/Other/KeepScreenOn.vue b/src/views/ToolboxView/Other/KeepScreenOn.vue
index daa4340..d264f1b 100644
--- a/src/views/ToolboxView/Other/KeepScreenOn.vue
+++ b/src/views/ToolboxView/Other/KeepScreenOn.vue
@@ -13,71 +13,78 @@
     }"
     @click="isFaded = false"
   >
-    <div class="controls">
-
-      <div class="title">开关 / Switch</div>
-
-      <n-switch
-        :value="wakeLock.isActive.value"
-        size="medium"
-        :round="false"
-        @update:value="handleToggleWakeLock"
+    <!-- 配置参数 -->
+    <n-card size="small" title="配置参数">
+      <n-form
+        class="form-no-feedback"
+        label-align="left"
+        label-placement="left"
+        label-width="auto"
       >
-        <template #checked>开启</template>
-        <template #unchecked>关闭</template>
-      </n-switch>
 
-      <div class="title">背景颜色 / Background Color</div>
+        <n-form-item label="开关 / Switch">
+          <n-switch
+            :value="wakeLock.isActive.value"
+            size="medium"
+            :round="false"
+            @update:value="handleToggleWakeLock"
+          >
+            <template #checked>开启</template>
+            <template #unchecked>关闭</template>
+          </n-switch>
+        </n-form-item>
 
-      <n-color-picker
-        v-model:value="bgColor"
-        size="medium"
-        :modes="['hex']"
-        :show-preview="true"
-        :swatches="[
-          '#000000',
-          '#252525',
-          '#505050',
-          '#808080',
-          '#FFFFFF',
-        ]"
-      />
+        <n-form-item label="背景颜色 / Background Color">
+          <n-color-picker
+            v-model:value="bgColor"
+            size="medium"
+            :modes="['hex']"
+            :show-preview="true"
+            :swatches="[
+              '#000000',
+              '#252525',
+              '#505050',
+              '#808080',
+              '#FFFFFF',
+            ]"
+          />
+        </n-form-item>
 
-      <div
-        v-show="fullscreen.isSupported"
-        class="title"
-      >切换全屏 / Toggle Fullscreen</div>
+        <n-form-item
+          v-show="fullscreen.isSupported"
+          label="切换全屏 / Toggle Fullscreen"
+        >
+          <n-switch
+            size="medium"
+            :round="false"
+            :value="fullscreen.isFullscreen.value"
+            @update:value="handleToggleFullscreen"
+          >
+            <template #checked>开启</template>
+            <template #unchecked>关闭</template>
+          </n-switch>
+        </n-form-item>
 
-      <n-switch
-        v-show="fullscreen.isSupported"
-        size="medium"
-        :round="false"
-        :value="fullscreen.isFullscreen.value"
-        @update:value="handleToggleFullscreen"
-      >
-        <template #checked>开启</template>
-        <template #unchecked>关闭</template>
-      </n-switch>
+        <n-form-item label="隐藏界面 / Hide UI">
+          <n-switch
+            v-model:value="isFaded"
+            size="medium"
+            :round="false"
+            @click.stop
+          >
+            <template #checked>隐藏</template>
+            <template #unchecked>显示</template>
+          </n-switch>
+        </n-form-item>
 
-      <div class="title">隐藏界面 / Hide UI</div>
-
-      <n-switch
-        v-model:value="isFaded"
-        size="medium"
-        :round="false"
-        @click.stop
-      >
-        <template #checked>隐藏</template>
-        <template #unchecked>显示</template>
-      </n-switch>
-
-    </div>
+      </n-form>
+    </n-card>
   </div>
 </template>
 
 <script setup>
 import {
-  NColorPicker, NSwitch,
+  NCard, NColorPicker, NForm, NFormItem, NSwitch,
 } from 'naive-ui';
 
 import {
@@ -178,7 +185,6 @@ onBeforeUnmount(() => {
 
 <style lang="less" scoped>
 .tool-detail-page {
-  display: flex;
   background-color: inherit;
   transition: all 0.25s;
   user-select: none;
@@ -190,26 +196,19 @@ onBeforeUnmount(() => {
   &.is-on {
     background-color: var(--bg-color);
 
-    &.is-dark-color {
+    &.is-dark-color * {
       color: #FFF;
     }
-  }
 
-  > * {
-    transition: opacity 0.25s;
+    :deep(.n-card) {
+      border-color: transparent;
+    }
   }
 }
 
-.controls {
-  margin: auto;
-  padding-bottom: 48px;
-  text-align: center;
-}
-
-.title {
-  margin-top: 48px;
-  margin-bottom: 16px;
-  font-size: 24px;
+:deep(.n-card) {
+  background-color: transparent;
+  transition: all 0.25s;
 }
 
 :deep(.n-color-picker) {