chore(工具箱/保持亮屏): 调整界面样式，与其他模块统一

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初始版本。',
   ],

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'],
       },

src/views/ToolboxView/Other/KeepScreenOn.vue

@@ -13,10 +13,16 @@
     }"
     @click="isFaded = false"
   >
-    <div class="controls">
-
-      <div class="title">开关 / Switch</div>
+    <!-- 配置参数 -->
+    <n-card size="small" title="配置参数">
+      <n-form
+        class="form-no-feedback"
+        label-align="left"
+        label-placement="left"
+        label-width="auto"
+      >
 
+        <n-form-item label="开关 / Switch">
           <n-switch
             :value="wakeLock.isActive.value"
             size="medium"
@@ -26,9 +32,9 @@
             <template #checked>开启</template>
             <template #unchecked>关闭</template>
           </n-switch>
+        </n-form-item>
 
-      <div class="title">背景颜色 / Background Color</div>
-
+        <n-form-item label="背景颜色 / Background Color">
           <n-color-picker
             v-model:value="bgColor"
             size="medium"
@@ -42,14 +48,13 @@
               '#FFFFFF',
             ]"
           />
+        </n-form-item>
 
-      <div
+        <n-form-item
           v-show="fullscreen.isSupported"
-        class="title"
-      >切换全屏 / Toggle Fullscreen</div>
-
+          label="切换全屏 / Toggle Fullscreen"
+        >
           <n-switch
-        v-show="fullscreen.isSupported"
             size="medium"
             :round="false"
             :value="fullscreen.isFullscreen.value"
@@ -58,9 +63,9 @@
             <template #checked>开启</template>
             <template #unchecked>关闭</template>
           </n-switch>
+        </n-form-item>
 
-      <div class="title">隐藏界面 / Hide UI</div>
-
+        <n-form-item label="隐藏界面 / Hide UI">
           <n-switch
             v-model:value="isFaded"
             size="medium"
@@ -70,14 +75,16 @@
             <template #checked>隐藏</template>
             <template #unchecked>显示</template>
           </n-switch>
+        </n-form-item>
 
-    </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) {