Skip to content

Commit 487c692

Browse files
clanstyclansty
committed
chore: 优化 mod 管理页面的 layout
1 parent 5f01b2b commit 487c692

10 files changed

Lines changed: 221 additions & 134 deletions

File tree

‎AquaMai‎

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import comments from "./modComments.yaml";
88
import { KeyCodeID } from "./types/KeyCodeID";
99
import { useI18n } from 'vue-i18n';
1010
import { locale } from "@/locales";
11+
import { ENTRY_LABEL_CLASS } from "./constants";
1112

1213
export default defineComponent({
1314
props: {
@@ -44,7 +45,7 @@ export default defineComponent({
4445
// @ts-ignore
4546
title={props.entry.path!}
4647
>
47-
<div class="ml-1 w-9em shrink-0 h-42px flex items-center justify-end">{getNameForPath(props.entry.path!, props.entry.name!, props.entry.attribute?.comment?.nameZh)}</div>
48+
<div class={ENTRY_LABEL_CLASS}>{getNameForPath(props.entry.path!, props.entry.name!, props.entry.attribute?.comment?.nameZh)}</div>
4849
<div class="flex flex-col gap-2 w-full ws-pre-line">
4950
<div class="flex gap-2 h-42px items-center">
5051
{(() => {

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { locale } from '@/locales';
77
import { CheckBox, Popover, TransitionVertical } from '@munet/ui';
88
import ProblemsDisplay from '@/components/ProblemsDisplay';
99
import ConfigEntry from './ConfigEntry';
10+
import { ENTRY_GROUP_PADDING } from './constants';
1011

1112
export default defineComponent({
1213
props: {
@@ -57,7 +58,7 @@ export default defineComponent({
5758
{customPanelPosition === 'top' && <CustomPanel entryStates={props.entryStates} sectionState={props.sectionState} section={props.section}/>}
5859
{(CustomPanel && customPanelPosition === 'override') ?
5960
<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?.length && <div class={["flex flex-col gap-2", ENTRY_GROUP_PADDING]}>
6162
{props.section.entries?.filter(it => !it.attribute?.hideWhenDefault || (it.attribute?.hideWhenDefault && !props.entryStates[it.path!].isDefault))
6263
.map((entry) => <ConfigEntry key={entry.path!} entry={entry} entryState={props.entryStates[entry.path!]}/>)}
6364
</div>}

‎MaiChartManager/Front/src/views/ModManager/constants.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export const ENTRY_GROUP_PADDING = 'p-l-15 max-[900px]:p-l-10 max-[500px]:p-l-5!';
2+
export const ENTRY_LABEL_CLASS = 'ml-1 w-9em shrink-0 h-42px flex items-center justify-end';

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

Lines changed: 28 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import api from "@/client/api";
55
import { modInfo, updateModInfo } from "@/store/refs";
66
import { useI18n } from 'vue-i18n';
77
import ConfigEntry from '../../ConfigEntry';
8+
import { ENTRY_GROUP_PADDING, ENTRY_LABEL_CLASS } from '../../constants';
89

910
export default defineComponent({
1011
props: {
@@ -38,7 +39,7 @@ export default defineComponent({
3839
load.value = false
3940
}
4041

41-
return () => <div class="flex flex-col gap-2">
42+
return () => <div class={["flex flex-col gap-2", ENTRY_GROUP_PADDING]}>
4243
{modInfo.value?.isHidConflictExist ? <div class="flex gap-2 items-center m-l-35">
4344
<span class="c-orange">{t('mod.adxHid.conflictDetected')}</span>
4445
<Button variant="secondary" onClick={del} ing={load.value}>{t('mod.adxHid.oneClickDelete')}</Button>
@@ -47,47 +48,41 @@ export default defineComponent({
4748
<span class="c-green-6">{t('mod.adxHid.noConflict')}</span>
4849
</div>}
4950
<div class="grid grid-cols-1 min-[500px]:grid-cols-2 gap-y-12px">
50-
<div>
51-
<div class="flex flex-col gap-2">
52-
<div class="flex gap-2 items-start">
53-
<div class="ml-1 text-sm w-10em shrink-0 h-42px flex items-center justify-end">{t('mod.adxHid.button1')}</div>
54-
<div class="flex flex-col gap-2 w-full ws-pre-line">
55-
<Select v-model:value={props.entryStates['GameSystem.AdxHidInput.Button1'].value} options={options}/>
56-
<div class="text-sm op-80">{t('mod.adxHid.button1Desc')}</div>
57-
</div>
51+
<div class="flex flex-col gap-2">
52+
<div class="flex gap-2 items-start">
53+
<div class={ENTRY_LABEL_CLASS}>{t('mod.adxHid.button1')}</div>
54+
<div class="flex flex-col gap-2 w-full ws-pre-line">
55+
<Select v-model:value={props.entryStates['GameSystem.AdxHidInput.Button1'].value} options={options}/>
56+
<div class="text-sm op-80">{t('mod.adxHid.button1Desc')}</div>
5857
</div>
59-
<div class="flex gap-2 items-start">
60-
<div class="ml-1 text-sm w-10em shrink-0 h-42px flex items-center justify-end">{t('mod.adxHid.button2')}</div>
61-
<div class="flex flex-col gap-2 w-full ws-pre-line">
62-
<Select v-model:value={props.entryStates['GameSystem.AdxHidInput.Button2'].value} options={options}/>
63-
<div class="text-sm op-80">{t('mod.adxHid.button2Desc')}</div>
64-
</div>
58+
</div>
59+
<div class="flex gap-2 items-start">
60+
<div class={ENTRY_LABEL_CLASS}>{t('mod.adxHid.button2')}</div>
61+
<div class="flex flex-col gap-2 w-full ws-pre-line">
62+
<Select v-model:value={props.entryStates['GameSystem.AdxHidInput.Button2'].value} options={options}/>
63+
<div class="text-sm op-80">{t('mod.adxHid.button2Desc')}</div>
6564
</div>
6665
</div>
6766
</div>
68-
<div>
69-
<div class="flex flex-col gap-2">
70-
<div class="flex gap-2 items-start">
71-
<div class="ml-1 text-sm w-10em shrink-0 h-42px flex items-center justify-end">{t('mod.adxHid.button3')}</div>
72-
<div class="flex flex-col gap-2 w-full ws-pre-line">
73-
<Select v-model:value={props.entryStates['GameSystem.AdxHidInput.Button3'].value} options={options}/>
74-
<div class="text-sm op-80">{t('mod.adxHid.button3Desc')}</div>
75-
</div>
67+
<div class="flex flex-col gap-2">
68+
<div class="flex gap-2 items-start">
69+
<div class={ENTRY_LABEL_CLASS}>{t('mod.adxHid.button3')}</div>
70+
<div class="flex flex-col gap-2 w-full ws-pre-line">
71+
<Select v-model:value={props.entryStates['GameSystem.AdxHidInput.Button3'].value} options={options}/>
72+
<div class="text-sm op-80">{t('mod.adxHid.button3Desc')}</div>
7673
</div>
77-
<div class="flex gap-2 items-start">
78-
<div class="ml-1 text-sm w-10em shrink-0 h-42px flex items-center justify-end">{t('mod.adxHid.button4')}</div>
79-
<div class="flex flex-col gap-2 w-full ws-pre-line">
80-
<Select v-model:value={props.entryStates['GameSystem.AdxHidInput.Button4'].value} options={options}/>
81-
<div class="text-sm op-80">{t('mod.adxHid.button4Desc')}</div>
82-
</div>
74+
</div>
75+
<div class="flex gap-2 items-start">
76+
<div class={ENTRY_LABEL_CLASS}>{t('mod.adxHid.button4')}</div>
77+
<div class="flex flex-col gap-2 w-full ws-pre-line">
78+
<Select v-model:value={props.entryStates['GameSystem.AdxHidInput.Button4'].value} options={options}/>
79+
<div class="text-sm op-80">{t('mod.adxHid.button4Desc')}</div>
8380
</div>
8481
</div>
8582
</div>
8683
</div>
87-
<div class="flex flex-col gap-2 p-l-3">
88-
{props.section.entries?.filter(it => !knownPaths.includes(it.path!))
89-
.map((entry) => <ConfigEntry key={entry.path!} entry={entry} entryState={props.entryStates[entry.path!]}/>)}
90-
</div>
84+
{props.section.entries?.filter(it => !knownPaths.includes(it.path!))
85+
.map((entry) => <ConfigEntry key={entry.path!} entry={entry} entryState={props.entryStates[entry.path!]}/>)}
9186
</div>
9287
},
9388
});

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

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {KeyCodeID} from "@/views/ModManager/types/KeyCodeID";
44
import {IEntryState, ISectionState, Section} from "@/client/apiGen";
55
import ConfigEntry from "../../ConfigEntry";
66
import { useI18n } from 'vue-i18n';
7+
import { ENTRY_GROUP_PADDING, ENTRY_LABEL_CLASS } from "../../constants";
78

89
const options = Object.entries(KeyCodeID).map(([key, value]) => ({label: key, value}))
910

@@ -24,47 +25,43 @@ export default defineComponent({
2425

2526
return () => <div class="flex flex-col gap-2">
2627
<div class="grid grid-cols-1 min-[500px]:grid-cols-2 gap-y-12px">
27-
<div>
28-
<div class="flex flex-col gap-2">
29-
{
30-
new Array(8).fill(0).map((_, i) => <div key={i} class="flex gap-2 items-start">
31-
<div class="ml-1 text-sm w-10em shrink-0 h-42px flex items-center justify-end">{t('mod.keyMap.button1P', {index: i + 1})}</div>
32-
<Select v-model:value={props.entryStates[`GameSystem.KeyMap.Button${i + 1}_1P`].value} options={options}/>
33-
</div>)
34-
}
35-
<div class="flex gap-2 items-start">
36-
<div class="ml-1 text-sm w-10em shrink-0 h-42px flex items-center justify-end">{t('mod.keyMap.select1P')}</div>
37-
<Select v-model:value={props.entryStates['GameSystem.KeyMap.Select_1P'].value} options={options}/>
38-
</div>
39-
<div class="flex gap-2 items-start">
40-
<div class="ml-1 text-sm w-10em shrink-0 h-42px flex items-center justify-end">Test</div>
41-
<Select v-model:value={props.entryStates['GameSystem.KeyMap.Test'].value} options={options}/>
42-
</div>
28+
<div class={["flex flex-col gap-2", ENTRY_GROUP_PADDING]}>
29+
{
30+
new Array(8).fill(0).map((_, i) => <div key={i} class="flex gap-2 items-start">
31+
<div class={ENTRY_LABEL_CLASS}>{t('mod.keyMap.button1P', {index: i + 1})}</div>
32+
<Select v-model:value={props.entryStates[`GameSystem.KeyMap.Button${i + 1}_1P`].value} options={options}/>
33+
</div>)
34+
}
35+
<div class="flex gap-2 items-start">
36+
<div class={ENTRY_LABEL_CLASS}>{t('mod.keyMap.select1P')}</div>
37+
<Select v-model:value={props.entryStates['GameSystem.KeyMap.Select_1P'].value} options={options}/>
38+
</div>
39+
<div class="flex gap-2 items-start">
40+
<div class={ENTRY_LABEL_CLASS}>Test</div>
41+
<Select v-model:value={props.entryStates['GameSystem.KeyMap.Test'].value} options={options}/>
4342
</div>
4443
</div>
45-
<div>
46-
<div class="flex flex-col gap-2">
47-
{
48-
new Array(8).fill(0).map((_, i) => <div key={i} class="flex gap-2 items-start">
49-
<div class="ml-1 text-sm w-10em shrink-0 h-42px flex items-center justify-end">{t('mod.keyMap.button2P', {index: i + 1})}</div>
50-
<Select v-model:value={props.entryStates[`GameSystem.KeyMap.Button${i + 1}_2P`].value} options={options}/>
51-
</div>)
52-
}
53-
<div class="flex gap-2 items-start">
54-
<div class="ml-1 text-sm w-10em shrink-0 h-42px flex items-center justify-end">{t('mod.keyMap.select2P')}</div>
55-
<Select v-model:value={props.entryStates['GameSystem.KeyMap.Select_2P'].value} options={options}/>
56-
</div>
57-
<div class="flex gap-2 items-start">
58-
<div class="ml-1 text-sm w-10em shrink-0 h-42px flex items-center justify-end">Service</div>
59-
<Select v-model:value={props.entryStates['GameSystem.KeyMap.Service'].value} options={options}/>
60-
</div>
44+
<div class="flex flex-col gap-2">
45+
{
46+
new Array(8).fill(0).map((_, i) => <div key={i} class="flex gap-2 items-start">
47+
<div class={ENTRY_LABEL_CLASS}>{t('mod.keyMap.button2P', {index: i + 1})}</div>
48+
<Select v-model:value={props.entryStates[`GameSystem.KeyMap.Button${i + 1}_2P`].value} options={options}/>
49+
</div>)
50+
}
51+
<div class="flex gap-2 items-start">
52+
<div class={ENTRY_LABEL_CLASS}>{t('mod.keyMap.select2P')}</div>
53+
<Select v-model:value={props.entryStates['GameSystem.KeyMap.Select_2P'].value} options={options}/>
54+
</div>
55+
<div class="flex gap-2 items-start">
56+
<div class={ENTRY_LABEL_CLASS}>Service</div>
57+
<Select v-model:value={props.entryStates['GameSystem.KeyMap.Service'].value} options={options}/>
6158
</div>
6259
</div>
6360
</div>
6461
<div class="flex flex-col gap-2 p-l-15">
6562
{props.section.entries?.some(it=>it.path === 'GameSystem.KeyMap.DisableIO4_1P') &&
6663
<div class="flex gap-2 items-start">
67-
<div class="ml-1 w-9em shrink-0 h-42px flex items-center justify-end">{t('mod.keyMap.disableIO4')}</div>
64+
<div class={ENTRY_LABEL_CLASS}>{t('mod.keyMap.disableIO4')}</div>
6865
<div class="flex flex-col gap-2 w-full ws-pre-line">
6966
<div class='flex gap-4 h-42px items-center'>
7067
<CheckBox v-model:value={props.entryStates['GameSystem.KeyMap.DisableIO4_1P'].value}>{props.entryStates['GameSystem.KeyMap.DisableIO4_1P'].value ? t('mod.keyMap.disable1P') : t('mod.keyMap.enable1P')}</CheckBox>

0 commit comments

Comments
 (0)