diff --git a/src/components/setting-panel/components/PageWidth.vue b/src/components/setting-panel/components/PageWidth.vue index 4fe9650a..7ab6f61c 100644 --- a/src/components/setting-panel/components/PageWidth.vue +++ b/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(() => { @@ -84,4 +103,10 @@ onActivated(() => { display: flex; justify-content: space-between; } + +/* 调整页面宽度被禁用时的样式 */ +.disabled { + cursor: not-allowed; + color: var(--kungalgame-font-color-0); +} diff --git a/src/language/en.ts b/src/language/en.ts index eb6796d2..658ea469 100644 --- a/src/language/en.ts +++ b/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', diff --git a/src/language/zh.ts b/src/language/zh.ts index d459da83..2358c057 100644 --- a/src/language/zh.ts +++ b/src/language/zh.ts @@ -14,6 +14,7 @@ export default { default: '系统默认', fontInput: '请在这里输入字体的名字', width: '页面宽度', + disabled: '该页面不允许调整宽度', background: '背景设置', preset: '点击使用我们预设的背景', custom: '自定义背景',