Skip to content

Commit b9e3d32

Browse files
clanstyclansty
committed
chore: mod 设置界面优化
1 parent 8a9bf25 commit b9e3d32

8 files changed

Lines changed: 90 additions & 95 deletions

File tree

‎MaiChartManager/Front/src/views/ModManager/AquaMaiConfigurator.tsx‎

Lines changed: 11 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,12 @@
11
import { defineComponent, PropType, ref, computed, watch } from 'vue';
2-
import { ConfigDto, IEntryState, ISectionState, Section } from "@/client/apiGen";
3-
import { CheckBox, Popover, TextInput, Button, theme } from '@munet/ui';
2+
import { ConfigDto } from "@/client/apiGen";
3+
import { TextInput, theme, WhateverNaviBar } from '@munet/ui';
44
import _ from "lodash";
5-
import ProblemsDisplay from "@/components/ProblemsDisplay";
65
import configSortStub from './configSort.yaml'
76
import { useMagicKeys, whenever } from "@vueuse/core";
8-
import ConfigEntry from './ConfigEntry';
9-
import { getSectionPanelOverride, getNameForPath, getBigSectionName } from './utils';
10-
import comments from "./modComments.yaml";
7+
import { getBigSectionName } from './utils';
118
import { useI18n } from 'vue-i18n';
12-
import { locale } from "@/locales";
13-
14-
const ConfigSection = defineComponent({
15-
props: {
16-
section: { type: Object as PropType<Section>, required: true },
17-
entryStates: { type: Object as PropType<Record<string, IEntryState>>, required: true },
18-
sectionState: { type: Object as PropType<ISectionState>, required: true },
19-
isCommunity: Boolean,
20-
},
21-
setup(props, { emit }) {
22-
const { t, te } = useI18n();
23-
24-
const CustomPanel = getSectionPanelOverride(props.section.path!)
25-
const customPanelPosition: 'top' | 'bottom' | 'override' = comments.customPanelPosition[props.section.path!] || 'override';
26-
const comment = computed(() => {
27-
const localeKey = 'mod.commentOverrides.' + props.section.path!.replace(/\./g, '_');
28-
if (te(localeKey)) {
29-
return t(localeKey);
30-
}
31-
if (locale.value.startsWith('zh')) {
32-
return props.section.attribute?.comment?.commentZh;
33-
}
34-
return props.section.attribute?.comment?.commentEn;
35-
})
36-
37-
return () => <div class="flex flex-col gap-2 p-1 border-transparent border-solid border-1px rd hover:border-[oklch(0.68_0.17_var(--hue))]">
38-
{!props.section.attribute!.alwaysEnabled && <div class="flex gap-2 items-start"
39-
// @ts-ignore
40-
title={props.section.path!}
41-
>
42-
<div class="ml-1 text-lg w-9em shrink-0">{getNameForPath(props.section.path!, props.section.path!.split('.').pop()!, props.section.attribute?.comment?.nameZh)}</div>
43-
<div class="flex flex-col gap-2 w-full ws-pre-line">
44-
<div class="flex gap-2 h-28px items-center">
45-
<CheckBox v-model:value={props.sectionState.enabled}>{props.sectionState.enabled ? '开' : '关'}</CheckBox>
46-
{comments.shouldEnableOptions[props.section.path!] && !props.sectionState.enabled && <ProblemsDisplay problems={[t('mod.needEnableOption')]}/>}
47-
{props.isCommunity && <Popover trigger="hover">{{
48-
trigger: () => <div class="i-ic-baseline-info text-lg c-neutral-5"/>,
49-
default: () => <div>
50-
<div class="text-lg mb-2">{t('mod.community.title')}</div>
51-
<div class="text-sm whitespace-pre-line lh-1.7em">{t('mod.community.description')}</div>
52-
</div>
53-
}}</Popover>}
54-
</div>
55-
{comment.value}
56-
</div>
57-
</div>}
58-
{props.sectionState.enabled && <>
59-
{customPanelPosition === 'top' && <CustomPanel entryStates={props.entryStates} sectionState={props.sectionState} section={props.section}/>}
60-
{(CustomPanel && customPanelPosition === 'override') ?
61-
<CustomPanel entryStates={props.entryStates} sectionState={props.sectionState} section={props.section}/> :
62-
!!props.section.entries?.length && <div class="flex flex-col gap-2 p-l-15 max-[900px]:p-l-10 max-[500px]:p-l-5!">
63-
{props.section.entries?.filter(it => !it.attribute?.hideWhenDefault || (it.attribute?.hideWhenDefault && !props.entryStates[it.path!].isDefault))
64-
.map((entry) => <ConfigEntry key={entry.path!} entry={entry} entryState={props.entryStates[entry.path!]}/>)}
65-
</div>}
66-
{customPanelPosition === 'bottom' && <CustomPanel entryStates={props.entryStates} sectionState={props.sectionState} section={props.section}/>}
67-
</>}
68-
</div>;
69-
},
70-
});
9+
import ConfigSection from './ConfigSection';
7110

7211
export default defineComponent({
7312
props: {
@@ -175,26 +114,14 @@ export default defineComponent({
175114
)}
176115
</div>
177116
<div class="flex flex-col h-full">
117+
<div class="min-[900px]:hidden shrink-0">
118+
<WhateverNaviBar items={allTabs.value.map(tab => ({
119+
name: tab.label,
120+
onClick: () => activeTab.value = tab.key,
121+
selected: activeTab.value === tab.key,
122+
}))}/>
123+
</div>
178124
<div class="flex gap-2 p-2 shrink-0">
179-
<div class={["min-[900px]:hidden"]}>
180-
<Popover trigger="click">{{
181-
trigger: () => <Button variant="secondary" size="small"><span class="i-ic-baseline-menu text-lg"/></Button>,
182-
default: () => <div class="flex flex-col gap-0.5">
183-
{allTabs.value.map(tab =>
184-
<div
185-
key={tab.key}
186-
class={[
187-
'px-3 py-1.5 rd cursor-pointer text-sm',
188-
activeTab.value === tab.key && theme.value.listItemSelect, theme.value.listItemHover,
189-
]}
190-
onClick={() => activeTab.value = tab.key}
191-
>
192-
{tab.label}
193-
</div>
194-
)}
195-
</div>
196-
}}</Popover>
197-
</div>
198125
<TextInput v-model:value={search.value} placeholder={t('mod.searchPlaceholder')} ref={searchRef} innerClass="h-42px!" class="flex-1"/>
199126
</div>
200127
<div ref={scrollContainerRef} class="of-y-auto cst flex-1 p-2 pt-0 text-14px">

‎MaiChartManager/Front/src/views/ModManager/ConfigEditor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,11 +154,11 @@ export default defineComponent({
154154
{t('mod.killGameProcess')}
155155
</Button>
156156
{isMuModMode.value && (
157-
<>
157+
<div class="flex gap-2 items-center">
158158
<span class="shrink-0">{t('mod.mumodChannel')}:</span>
159159
<Radio k={'slow'} v-model:value={localMuModChannel.value}>{t('mod.mumodChannelSlow')}</Radio>
160160
<Radio k={'fast'} v-model:value={localMuModChannel.value}>{t('mod.mumodChannelFast')}</Radio>
161-
</>
161+
</div>
162162
)}
163163
</div>
164164
{isBothModsPresent.value && (

‎MaiChartManager/Front/src/views/ModManager/ConfigEntry.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default defineComponent({
8787
})()}
8888
{comments.shouldEnableOptions[props.entry.path!] && !props.entryState.value && <ProblemsDisplay problems={[t('mod.needEnableOption')]}/>}
8989
</div>
90-
{comment.value}
90+
<div class="text-sm op-80">{comment.value}</div>
9191
</div>
9292
</div>;
9393
},

‎MaiChartManager/Front/src/views/ModManager/ConfigSection.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { IEntryState, ISectionState, Section } from '@/client/apiGen';
2+
import { defineComponent, PropType, ref, computed, watch } from 'vue';
3+
import { useI18n } from 'vue-i18n';
4+
import { getNameForPath, getSectionPanelOverride } from './utils';
5+
import comments from "./modComments.yaml";
6+
import { locale } from '@/locales';
7+
import { CheckBox, Popover, TransitionVertical } from '@munet/ui';
8+
import ProblemsDisplay from '@/components/ProblemsDisplay';
9+
import ConfigEntry from './ConfigEntry';
10+
11+
export default defineComponent({
12+
props: {
13+
section: { type: Object as PropType<Section>, required: true },
14+
entryStates: { type: Object as PropType<Record<string, IEntryState>>, required: true },
15+
sectionState: { type: Object as PropType<ISectionState>, required: true },
16+
isCommunity: Boolean,
17+
},
18+
setup(props, { emit }) {
19+
const { t, te } = useI18n();
20+
21+
const CustomPanel = getSectionPanelOverride(props.section.path!)
22+
const customPanelPosition: 'top' | 'bottom' | 'override' = comments.customPanelPosition[props.section.path!] || 'override';
23+
const comment = computed(() => {
24+
const localeKey = 'mod.commentOverrides.' + props.section.path!.replace(/\./g, '_');
25+
if (te(localeKey)) {
26+
return t(localeKey);
27+
}
28+
if (locale.value.startsWith('zh')) {
29+
return props.section.attribute?.comment?.commentZh;
30+
}
31+
return props.section.attribute?.comment?.commentEn;
32+
})
33+
34+
return () => <div class="flex flex-col p-1 border-transparent border-solid border-1px rd hover:border-[oklch(0.68_0.17_var(--hue))]">
35+
{!props.section.attribute!.alwaysEnabled && <div class="flex gap-2 items-start"
36+
// @ts-ignore
37+
title={props.section.path!}
38+
>
39+
<div class="ml-1 text-lg w-9em shrink-0">{getNameForPath(props.section.path!, props.section.path!.split('.').pop()!, props.section.attribute?.comment?.nameZh)}</div>
40+
<div class="flex flex-col gap-2 w-full ws-pre-line">
41+
<div class="flex gap-2 h-28px items-center">
42+
<CheckBox v-model:value={props.sectionState.enabled}>{props.sectionState.enabled ? '开' : '关'}</CheckBox>
43+
{comments.shouldEnableOptions[props.section.path!] && !props.sectionState.enabled && <ProblemsDisplay problems={[t('mod.needEnableOption')]}/>}
44+
{props.isCommunity && <Popover trigger="hover">{{
45+
trigger: () => <div class="i-ic-baseline-info text-lg c-neutral-5"/>,
46+
default: () => <div>
47+
<div class="text-lg mb-2">{t('mod.community.title')}</div>
48+
<div class="text-sm whitespace-pre-line lh-1.7em">{t('mod.community.description')}</div>
49+
</div>
50+
}}</Popover>}
51+
</div>
52+
<div class="text-sm op-80">{comment.value}</div>
53+
</div>
54+
</div>}
55+
<TransitionVertical>
56+
{props.sectionState.enabled && <div class="flex flex-col gap-2 mt-2">
57+
{customPanelPosition === 'top' && <CustomPanel entryStates={props.entryStates} sectionState={props.sectionState} section={props.section}/>}
58+
{(CustomPanel && customPanelPosition === 'override') ?
59+
<CustomPanel entryStates={props.entryStates} sectionState={props.sectionState} section={props.section}/> :
60+
!!props.section.entries?.length && <div class="flex flex-col gap-2 p-l-15 max-[900px]:p-l-10 max-[500px]:p-l-5!">
61+
{props.section.entries?.filter(it => !it.attribute?.hideWhenDefault || (it.attribute?.hideWhenDefault && !props.entryStates[it.path!].isDefault))
62+
.map((entry) => <ConfigEntry key={entry.path!} entry={entry} entryState={props.entryStates[entry.path!]}/>)}
63+
</div>}
64+
{customPanelPosition === 'bottom' && <CustomPanel entryStates={props.entryStates} sectionState={props.sectionState} section={props.section}/>}
65+
</div>}
66+
</TransitionVertical>
67+
</div>;
68+
},
69+
});

‎MaiChartManager/Front/src/views/ModManager/sectionPanelOverride/GameSystem.AdxHidInput/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,14 @@ export default defineComponent({
5353
<div class="ml-1 text-sm w-10em shrink-0 h-42px flex items-center justify-end">{t('mod.adxHid.button1')}</div>
5454
<div class="flex flex-col gap-2 w-full ws-pre-line">
5555
<Select v-model:value={props.entryStates['GameSystem.AdxHidInput.Button1'].value} options={options}/>
56-
{t('mod.adxHid.button1Desc')}
56+
<div class="text-sm op-80">{t('mod.adxHid.button1Desc')}</div>
5757
</div>
5858
</div>
5959
<div class="flex gap-2 items-start">
6060
<div class="ml-1 text-sm w-10em shrink-0 h-42px flex items-center justify-end">{t('mod.adxHid.button2')}</div>
6161
<div class="flex flex-col gap-2 w-full ws-pre-line">
6262
<Select v-model:value={props.entryStates['GameSystem.AdxHidInput.Button2'].value} options={options}/>
63-
{t('mod.adxHid.button2Desc')}
63+
<div class="text-sm op-80">{t('mod.adxHid.button2Desc')}</div>
6464
</div>
6565
</div>
6666
</div>
@@ -71,14 +71,14 @@ export default defineComponent({
7171
<div class="ml-1 text-sm w-10em shrink-0 h-42px flex items-center justify-end">{t('mod.adxHid.button3')}</div>
7272
<div class="flex flex-col gap-2 w-full ws-pre-line">
7373
<Select v-model:value={props.entryStates['GameSystem.AdxHidInput.Button3'].value} options={options}/>
74-
{t('mod.adxHid.button3Desc')}
74+
<div class="text-sm op-80">{t('mod.adxHid.button3Desc')}</div>
7575
</div>
7676
</div>
7777
<div class="flex gap-2 items-start">
7878
<div class="ml-1 text-sm w-10em shrink-0 h-42px flex items-center justify-end">{t('mod.adxHid.button4')}</div>
7979
<div class="flex flex-col gap-2 w-full ws-pre-line">
8080
<Select v-model:value={props.entryStates['GameSystem.AdxHidInput.Button4'].value} options={options}/>
81-
{t('mod.adxHid.button4Desc')}
81+
<div class="text-sm op-80">{t('mod.adxHid.button4Desc')}</div>
8282
</div>
8383
</div>
8484
</div>

‎MaiChartManager/Front/src/views/ModManager/sectionPanelOverride/GameSystem.KeyMap/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export default defineComponent({
7171
<CheckBox v-model:value={props.entryStates['GameSystem.KeyMap.DisableIO4_2P'].value}>{props.entryStates['GameSystem.KeyMap.DisableIO4_2P'].value ? t('mod.keyMap.disable2P') : t('mod.keyMap.enable2P')}</CheckBox>
7272
<CheckBox v-model:value={props.entryStates['GameSystem.KeyMap.DisableIO4System'].value}>{props.entryStates['GameSystem.KeyMap.DisableIO4System'].value ? t('mod.keyMap.disableSystem') : t('mod.keyMap.enableSystem')}</CheckBox>
7373
</div>
74-
{t('mod.keyMap.disableIO4Tip')}
74+
<div class="text-sm op-80">{t('mod.keyMap.disableIO4Tip')}</div>
7575
</div>
7676
</div>}
7777
{props.section.entries?.filter(it => !knownPaths.includes(it.path!))

‎MaiChartManager/Front/src/views/ModManager/sectionPanelOverride/GameSystem.MaimollerIO/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export default defineComponent({
6666
: <div class="flex gap-2 items-center m-l-35">
6767
<span class="c-green-6">{t('mod.mmlIo.installed')}</span>
6868
</div>}
69-
<div class="m-l-35">
69+
<div class="m-l-35 op-80">
7070
{t('mod.mmlIo.tip')}
7171
</div>
7272
<div class="grid grid-cols-1 min-[500px]:grid-cols-2 gap-y-12px">

‎MaiChartManager/Front/src/views/ModManager/sectionPanelOverride/GameSystem.PdxTouch/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ export default defineComponent({
9999
/>,
100100
}}
101101
</DropMenu>
102-
<div class="text-sm op-60">{t('mod.pdx.pathDesc')}</div>
102+
<div class="text-sm op-80">{t('mod.pdx.pathDesc')}</div>
103103
</div>
104104
</div>
105105
}
@@ -124,7 +124,6 @@ export default defineComponent({
124124
/>,
125125
}}
126126
</DropMenu>
127-
<div class="text-sm op-60">{t('mod.pdx.pathDesc')}</div>
128127
</div>
129128
</div>
130129
}

0 commit comments

Comments
 (0)