feat: page width disabled

src/components/setting-panel/components/PageWidth.vue

@@ -5,12 +5,18 @@ import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
 import { storeToRefs } from 'pinia'
 
 const route = useRoute()
+
 const settingsStore = useKUNGalgameSettingsStore()
 const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
 
+// 页面宽度
 const pageWidth = ref(0)
+// 当前页面路由的名字
 const routeName = computed(() => route.name as string)
+// 调整页面宽度是否被禁用
+const isDisabled = ref(false)
 
+// 允许调整宽度的页面
 const pageNameArray = [
   'KUN',
   'Topic',
@@ -22,14 +28,21 @@ const pageNameArray = [
   'ThanksList',
 ]
 
+// 初始化页面宽度
 const initPageWidth = () => {
   if (pageNameArray.includes(routeName.value)) {
+    // 页面宽度值等于 store 宽度值
     pageWidth.value = showKUNGalgamePageWidth.value[routeName.value]
+    // 取消禁用输入
+    isDisabled.value = false
+  } else {
+    isDisabled.value = true
   }
 }
 
 watch(pageWidth, () => {
   if (pageNameArray.includes(routeName.value)) {
+    // 将用户输入的宽度存入 store
     showKUNGalgamePageWidth.value[routeName.value] = pageWidth.value
   }
 })
@@ -45,21 +58,27 @@ onActivated(() => {
 
 <template>
   <!-- 设置某些页面的宽度 -->
-  <div class="width">
+  <div
+    class="width"
+    :class="isDisabled ? 'disabled' : ''"
+    :title="isDisabled ? `${$tm('header.settings.disabled')}` : ''"
+  >
     <div class="width-container">
       <span>{{ $tm('header.settings.width') }}</span>
       <span>{{ pageWidth }}%</span>
     </div>
     <div class="page-width">
-      <span>50%</span
+      <span>50%</span>
-      ><input
+      <input
         class="main"
         min="50"
         max="90"
         step="0.1"
         type="range"
         v-model="pageWidth"
-      /><span>90%</span>
+        :disabled="isDisabled"
+      />
+      <span>90%</span>
     </div>
   </div>
 </template>
@@ -84,4 +103,10 @@ onActivated(() => {
   display: flex;
   justify-content: space-between;
 }
+
+/* 调整页面宽度被禁用时的样式 */
+.disabled {
+  cursor: not-allowed;
+  color: var(--kungalgame-font-color-0);
+}
 </style>

src/language/en.ts

@@ -14,6 +14,7 @@ export default {
       default: 'System Default',
       fontInput: 'Input font name here',
       width: 'Page Width',
+      disabled: 'The page does not allow width adjustment',
       background: 'Background Setting',
       preset: 'Use our preset background',
       custom: 'Custom Background',

src/language/zh.ts

@@ -14,6 +14,7 @@ export default {
       default: '系统默认',
       fontInput: '请在这里输入字体的名字',
       width: '页面宽度',
+      disabled: '该页面不允许调整宽度',
       background: '背景设置',
       preset: '点击使用我们预设的背景',
       custom: '自定义背景',