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',
+        updatedAt: '2026-01-03',
-        version: '2',
+        version: '3',
         enabled: true,
         changelogs: CHANGE_LOGS['keep-screen-on'],
       },

src/views/ToolboxView/Other/KeepScreenOn.vue

@@ -13,71 +13,78 @@
     }"
     @click="isFaded = false"
   >
-    <div class="controls">
+    <!-- 配置参数 -->
-
+    <n-card size="small" title="配置参数">
-      <div class="title">开关 / Switch</div>
+      <n-form
-
+        class="form-no-feedback"
-      <n-switch
+        label-align="left"
-        :value="wakeLock.isActive.value"
+        label-placement="left"
-        size="medium"
+        label-width="auto"
-        :round="false"
-        @update:value="handleToggleWakeLock"
       >
-        <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
+        <n-form-item label="背景颜色 / Background Color">
-        v-model:value="bgColor"
+          <n-color-picker
-        size="medium"
+            v-model:value="bgColor"
-        :modes="['hex']"
+            size="medium"
-        :show-preview="true"
+            :modes="['hex']"
-        :swatches="[
+            :show-preview="true"
-          '#000000',
+            :swatches="[
-          '#252525',
+              '#000000',
-          '#505050',
+              '#252525',
-          '#808080',
+              '#505050',
-          '#FFFFFF',
+              '#808080',
-        ]"
+              '#FFFFFF',
-      />
+            ]"
+          />
+        </n-form-item>
 
-      <div
+        <n-form-item
-        v-show="fullscreen.isSupported"
+          v-show="fullscreen.isSupported"
-        class="title"
+          label="切换全屏 / Toggle Fullscreen"
-      >切换全屏 / Toggle Fullscreen</div>
+        >
+          <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
+        <n-form-item label="隐藏界面 / Hide UI">
-        v-show="fullscreen.isSupported"
+          <n-switch
-        size="medium"
+            v-model:value="isFaded"
-        :round="false"
+            size="medium"
-        :value="fullscreen.isFullscreen.value"
+            :round="false"
-        @update:value="handleToggleFullscreen"
+            @click.stop
-      >
+          >
-        <template #checked>开启</template>
+            <template #checked>隐藏</template>
-        <template #unchecked>关闭</template>
+            <template #unchecked>显示</template>
-      </n-switch>
+          </n-switch>
+        </n-form-item>
 
-      <div class="title">隐藏界面 / Hide UI</div>
+      </n-form>
-
+    </n-card>
-      <n-switch
-        v-model:value="isFaded"
-        size="medium"
-        :round="false"
-        @click.stop
-      >
-        <template #checked>隐藏</template>
-        <template #unchecked>显示</template>
-      </n-switch>
-
-    </div>
   </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;
     }
-  }
 
-  > * {
+    :deep(.n-card) {
-    transition: opacity 0.25s;
+      border-color: transparent;
+    }
   }
 }
 
-.controls {
+:deep(.n-card) {
-  margin: auto;
+  background-color: transparent;
-  padding-bottom: 48px;
+  transition: all 0.25s;
-  text-align: center;
-}
-
-.title {
-  margin-top: 48px;
-  margin-bottom: 16px;
-  font-size: 24px;
 }
 
 :deep(.n-color-picker) {