refactor(admin): use target-row grid for target inputs

This commit is contained in:
RhenCloud 2026-08-03 07:02:45 +08:00
parent fb9550b94d
commit be50d23319
No known key found for this signature in database
GPG key ID: A574A617378C4E0B
2 changed files with 59 additions and 1 deletions

View file

@ -696,6 +696,52 @@ main {
width: 100%;
}
.target-row {
display: grid;
grid-template-columns: minmax(130px, 1fr) auto;
grid-template-areas:
"select del"
"in1 in2";
gap: 8px;
align-items: center;
padding: 10px;
margin-bottom: 8px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.target-row select {
grid-area: select;
width: 100%;
padding: 7px 8px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
color: var(--text);
font-family: var(--ui);
font-size: 12.5px;
font-weight: 500;
}
.target-row input[type="text"] {
width: 100%;
min-width: 0;
}
.target-row input.tg-in1 {
grid-area: in1;
}
.target-row input.tg-in2 {
grid-area: in2;
}
.target-row > .icon-btn {
grid-area: del;
justify-self: end;
}
.add-filter {
margin-top: 4px;
width: 100%;
@ -1008,6 +1054,14 @@ main {
grid-template-columns: 100px 1fr auto;
}
.target-row {
grid-template-columns: 1fr auto;
grid-template-areas:
"select del"
"in1 in1"
"in2 in2";
}
header {
padding: 12px 16px;
}

View file

@ -79,7 +79,7 @@
>{{ t("routeEditor.targets") }}
<span class="lbl-note">{{ t("routeEditor.targetsNote") }}</span></label
>
<div v-for="(tg, i) in form.targets" :key="i" class="filter-row">
<div v-for="(tg, i) in form.targets" :key="i" class="target-row">
<select v-model="tg.platform">
<option value="discord">Discord</option>
<option value="telegram">Telegram</option>
@ -88,11 +88,13 @@
<input
v-model="tg.channelId"
type="text"
class="tg-in1"
:placeholder="t('routeEditor.channelPlaceholder')"
/>
<input
v-model="tg.threadId"
type="text"
class="tg-in2"
:placeholder="t('routeEditor.threadPlaceholder')"
/>
</template>
@ -100,11 +102,13 @@
<input
v-model="tg.chatId"
type="text"
class="tg-in1"
:placeholder="t('routeEditor.chatPlaceholder')"
/>
<input
v-model="tg.topicId"
type="text"
class="tg-in2"
:placeholder="t('routeEditor.topicPlaceholder')"
/>
</template>