fix: render Ref-compatible GUI display names

This commit is contained in:
2026-08-13 00:00:27 +00:00
parent 6da7d2f899
commit 7ac9035bbc
29 changed files with 834 additions and 261 deletions
@@ -8,7 +8,10 @@ interface CityInfo {
id: number;
name: string;
level: number;
levelName: string;
regionName: string;
nationId: number;
nationName: string;
population: number;
populationMax: number;
agriculture: number;
@@ -66,8 +69,8 @@ const metrics = computed(() => {
<div v-else-if="!props.city" class="empty">도시 정보를 불러오지 못했습니다.</div>
<div v-else class="city-body">
<div class="title">
{{ props.city.name }} (Lv {{ props.city.level }}) · 국가 {{ props.city.nationId || '무주' }} · 보급
{{ props.city.supplyState }} · 전방 {{ props.city.frontState }}
{{ props.city.regionName }} | {{ props.city.levelName }} {{ props.city.name }} ·
{{ props.city.nationId > 0 ? `지배 국가 【 ${props.city.nationName}` : '공 백 지' }}
</div>
<div class="progress-grid">
<div
@@ -13,6 +13,7 @@ interface GeneralStats {
interface GeneralProgression {
experienceLevel: number;
dedicationLevel: number;
dedicationText?: string;
statExperience?: { leadership: number; strength: number; intelligence: number };
statUpgradeLimit?: number;
}
@@ -22,6 +23,7 @@ interface GeneralInfo {
name: string;
npcState: number;
officerLevel: number;
officerLevelText: string;
stats: GeneralStats;
gold: number;
rice: number;
@@ -34,6 +36,7 @@ interface GeneralInfo {
age?: number;
turnTime?: string;
crewTypeId?: number;
crewTypeName?: string;
traits?: { personal: string; specialWar: string; specialDomestic: string };
progression?: GeneralProgression;
}
@@ -78,7 +81,7 @@ const experiencePercent = computed(() =>
<div v-else-if="!props.general" class="empty">장수 정보를 불러오지 못했습니다.</div>
<div v-else class="general-body">
<div class="general-title">
{{ props.general.name }} · 관직 {{ props.general.officerLevel }} · {{ props.general.age ?? '-' }} ·
{{ props.general.name }} · {{ props.general.officerLevelText }} · {{ props.general.age ?? '-' }} ·
다음
{{ props.general.turnTime?.slice(11, 16) ?? '-' }}
</div>
@@ -102,11 +105,11 @@ const experiencePercent = computed(() =>
><strong>{{ props.general.crew.toLocaleString() }}</strong> <span>훈련</span
><strong>{{ props.general.train }}</strong> <span>사기</span><strong>{{ props.general.atmos }}</strong>
<span>부상</span><strong>{{ props.general.injury }}</strong> <span>병종</span
><strong>{{ props.general.crewTypeId || '-' }}</strong> <span>성격</span
><strong>{{ props.general.crewTypeName ?? '-' }}</strong> <span>성격</span
><strong>{{ props.general.traits?.personal ?? '-' }}</strong> <span>전투특기</span
><strong>{{ props.general.traits?.specialWar ?? '-' }}</strong> <span>내정특기</span
><strong>{{ props.general.traits?.specialDomestic ?? '-' }}</strong> <span>계급</span
><strong>Lv {{ props.general.progression?.dedicationLevel ?? 0 }}</strong> <span>공헌</span
><strong>{{ props.general.progression?.dedicationText ?? '무품관' }}</strong> <span>공헌</span
><strong>{{ props.general.dedication.toLocaleString() }}</strong>
</div>
@@ -7,11 +7,14 @@ interface NationInfo {
name: string;
color: string;
level: number;
levelName: string;
gold: number;
rice: number;
tech: number;
typeCode: string;
typeName: string;
capitalCityId: number | null;
capitalCityName: string | null;
}
const props = defineProps<{
@@ -31,7 +34,7 @@ const props = defineProps<{
class="title"
:style="{ backgroundColor: props.nation.color, color: legacyNationTextColor(props.nation.color) }"
>
{{ props.nation.name }}<template v-if="props.nation.id > 0"> (Lv {{ props.nation.level }})</template>
{{ props.nation.name }}<template v-if="props.nation.id > 0"> ({{ props.nation.levelName }})</template>
</div>
<div class="grid">
<span>국고</span
@@ -40,10 +43,11 @@ const props = defineProps<{
><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.rice.toLocaleString() }}</strong>
<span>기술</span
><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.tech.toLocaleString() }}</strong>
<span>체제</span><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.typeCode }}</strong>
<span>체제</span><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.typeName }}</strong>
<span>수도</span
><strong>{{ props.nation.id === 0 ? '해당 없음' : (props.nation.capitalCityId ?? '-') }}</strong>
<span>국가 등급</span><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.level }}</strong>
><strong>{{ props.nation.id === 0 ? '해당 없음' : (props.nation.capitalCityName ?? '-') }}</strong>
<span>국가 등급</span
><strong>{{ props.nation.id === 0 ? '해당 없음' : props.nation.levelName }}</strong>
</div>
</div>
</div>
+18 -7
View File
@@ -14,6 +14,19 @@ export const officerLevelMapDefault: Record<number, string> = {
0: '재야',
};
export const nationLevelMap: Record<number, string> = {
7: '황제',
6: '왕',
5: '공',
4: '주목',
3: '주자사',
2: '군벌',
1: '호족',
0: '방랑군',
};
export const formatNationLevelText = (nationLevel: number): string => nationLevelMap[nationLevel] ?? '-';
export const officerLevelMapByNationLevel: Record<number, Record<number, string>> = {
7: {
12: '황제',
@@ -75,15 +88,13 @@ export const officerLevelMapByNationLevel: Record<number, Record<number, string>
export const formatOfficerLevelText = (officerLevel: number, nationLevel?: number): string => {
if (officerLevel < 5) {
return officerLevelMapDefault[officerLevel] ?? '???';
return officerLevelMapDefault[officerLevel] ?? '-';
}
const nationMap =
nationLevel === undefined
? officerLevelMapDefault
: (officerLevelMapByNationLevel[nationLevel] ?? officerLevelMapDefault);
return nationMap[officerLevel] ?? (officerLevelMapDefault[officerLevel] ?? '???');
if (nationLevel === undefined) {
return officerLevelMapDefault[officerLevel] ?? '-';
}
return officerLevelMapByNationLevel[nationLevel]?.[officerLevel] ?? '-';
};
export const regionMap: Record<number, string> = {
+5 -3
View File
@@ -38,6 +38,8 @@ const resolveErrorMessage = (value: unknown): string => {
};
const formatNumber = (value: number | null | undefined): string => (value ?? 0).toLocaleString();
const displayCode = (value: string | null | undefined): string =>
!value || /^\d+$/u.test(value) ? '-' : value.replace(/^che_(?:event_)?/u, '');
const cutDateTime = (value: string | null | undefined, showSecond = false): string => {
if (!value) {
return '-';
@@ -395,7 +397,7 @@ onMounted(() => {
<h2 class="section-title bg2">경매 {{ uniqueDetail.auction.id }} 상세</h2>
<dl class="detail-grid">
<dt class="bg1">경매명</dt>
<dd>{{ uniqueDetail.auction.detail.title ?? uniqueDetail.auction.targetCode }}</dd>
<dd>{{ uniqueDetail.auction.detail.title ?? displayCode(uniqueDetail.auction.targetCode) }}</dd>
<dt class="bg1">주최자(익명)</dt>
<dd :class="{ 'is-me': uniqueDetail.auction.isCallerHost }">{{ uniqueDetail.auction.hostName }}</dd>
<dt class="bg1">종료일시</dt>
@@ -442,7 +444,7 @@ onMounted(() => {
@keydown.space.prevent="selectUnique(auction)"
>
<span>{{ auction.id }}</span
><span>{{ auction.detail.title ?? auction.targetCode }}</span>
><span>{{ auction.detail.title ?? displayCode(auction.targetCode) }}</span>
<span :class="{ 'is-me': auction.isCallerHost }">{{ auction.hostName }}</span>
<span class="tnum">{{ cutDateTime(auction.closeAt) }}</span>
<span>{{ (auction.detail.remainCloseDateExtensionCnt ?? 0) > 0 ? '남음' : '소진' }}</span>
@@ -474,7 +476,7 @@ onMounted(() => {
@keydown.space.prevent="selectUnique(auction)"
>
<span>{{ auction.id }}</span
><span>{{ auction.detail.title ?? auction.targetCode }}</span>
><span>{{ auction.detail.title ?? displayCode(auction.targetCode) }}</span>
<span :class="{ 'is-me': auction.isCallerHost }">{{ auction.hostName }}</span>
<span class="tnum">{{ cutDateTime(auction.closeAt) }}</span>
<span>{{ (auction.detail.remainCloseDateExtensionCnt ?? 0) > 0 ? '남음' : '소진' }}</span>
@@ -269,7 +269,7 @@ onMounted(() => {
<SkeletonLines v-if="loading" :lines="5" />
<div v-else-if="selectedGeneral" class="battle-general-card">
<div class="battle-general-name">
{{ selectedGeneral.name }} (관직 {{ selectedGeneral.officerLevel }})
{{ selectedGeneral.name }} ({{ selectedGeneral.officerLevelText }})
</div>
<span
class="battle-general-portrait"
@@ -293,9 +293,9 @@ onMounted(() => {
</div>
<div class="battle-general-extra">
<span>명성</span><strong>{{ selectedGeneral.experience.toLocaleString('ko-KR') }}</strong>
<span>계급</span><strong>{{ selectedGeneral.dedication.toLocaleString('ko-KR') }}</strong>
<span>계급</span><strong>{{ selectedGeneral.progression.dedicationText }}</strong>
<span>나이</span><strong>{{ selectedGeneral.age }}</strong> <span>병종</span
><strong>{{ selectedGeneral.crewTypeId }}</strong> <span>승리</span
><strong>{{ selectedGeneral.crewTypeName }}</strong> <span>승리</span
><strong>{{ selectedGeneral.battleStats.kills }}</strong> <span>패배</span
><strong>{{ selectedGeneral.battleStats.deaths }}</strong> <span>사살</span
><strong>{{ selectedGeneral.battleStats.killCrew.toLocaleString('ko-KR') }}</strong>
+39 -11
View File
@@ -132,12 +132,40 @@ const noDefencePenaltyWaived = computed(() => {
);
});
const noDefenceLabel = computed(() => (noDefencePenaltyWaived.value ? '×' : '× [훈련 -3,사기 -6]'));
const items = computed<Array<{ key: ItemSlotKey; name: string; code: string | null }>>(() => [
{ key: 'horse', name: '', code: data.value?.general.items.horse ?? null },
{ key: 'weapon', name: '무기', code: data.value?.general.items.weapon ?? null },
{ key: 'book', name: '서적', code: data.value?.general.items.book ?? null },
{ key: 'item', name: '도구', code: data.value?.general.items.item ?? null },
]);
const fallbackDisplayCode = (value: string | null | undefined): string | null =>
value && !/^\d+$/u.test(value) ? value.replace(/^che_(?:event_)?/u, '') : null;
const items = computed<Array<{ key: ItemSlotKey; slotName: string; displayName: string | null; code: string | null }>>(
() => [
{
key: 'horse',
slotName: '말',
displayName:
data.value?.general.itemNames?.horse ?? fallbackDisplayCode(data.value?.general.items.horse) ?? null,
code: data.value?.general.items.horse ?? null,
},
{
key: 'weapon',
slotName: '무기',
displayName:
data.value?.general.itemNames?.weapon ?? fallbackDisplayCode(data.value?.general.items.weapon) ?? null,
code: data.value?.general.items.weapon ?? null,
},
{
key: 'book',
slotName: '서적',
displayName:
data.value?.general.itemNames?.book ?? fallbackDisplayCode(data.value?.general.items.book) ?? null,
code: data.value?.general.items.book ?? null,
},
{
key: 'item',
slotName: '도구',
displayName:
data.value?.general.itemNames?.item ?? fallbackDisplayCode(data.value?.general.items.item) ?? null,
code: data.value?.general.items.item ?? null,
},
]
);
const iconChoices = computed(() => data.value?.iconChoices ?? []);
const autorunUser = computed(() => asRecord(world.value?.meta.autorun_user));
@@ -302,8 +330,8 @@ const dieOnPrestart = async () => {
}
};
const dropItem = (item: { key: ItemSlotKey; name: string; code: string | null }) =>
confirmMutation(`${item.code ?? item.name}을(를) 버리시겠습니까?`, () =>
const dropItem = (item: { key: ItemSlotKey; slotName: string; displayName: string | null; code: string | null }) =>
confirmMutation(`${item.displayName ?? item.slotName}을(를) 버리시겠습니까?`, () =>
trpc.general.dropItem.mutate({ itemType: item.key })
);
@@ -416,7 +444,7 @@ onMounted(() => {
>
· 계급
<strong
>Lv {{ data.general.progression?.dedicationLevel ?? 0 }} ({{
>{{ data.general.progression?.dedicationText ?? '무품관' }} ({{
data.general.dedication
}})</strong
>
@@ -425,7 +453,7 @@ onMounted(() => {
<div>승률 0% · 승리 0 · 패배 0</div>
<div>살상률 0% · 사살 0 · 피살 0</div>
<div>
병종 {{ data.general.crewTypeId || '-' }} · 내정특기
병종 {{ data.general.crewTypeName ?? '-' }} · 내정특기
{{ data.general.traits?.specialDomestic ?? '-' }} · 부상 {{ data.general.injury }} · 부대
{{ data.general.troopId || '-' }} · 벌점 {{ penalties.length || '-' }}
</div>
@@ -595,7 +623,7 @@ onMounted(() => {
:disabled="!item.code"
@click="dropItem(item)"
>
{{ item.code ?? '-' }}
{{ item.displayName ?? '-' }}
</button>
</div>
@@ -63,7 +63,6 @@ const generals = computed(() =>
})
);
const special = (general: General) => `${general.specialDomestic?.name ?? '-'} / ${general.specialWar?.name ?? '-'}`;
const rank = (general: General) => (general.dedicationLevel ? `${11 - general.dedicationLevel}품관` : '무품관');
const iconUrl = (general: General) => resolveGeneralIconUrl(general);
onMounted(load);
</script>
@@ -78,7 +77,13 @@ onMounted(load);
<strong>세력 장수</strong>
<span class="right-actions">
<span class="dropdown">
<button class="top-button mode-button" :aria-expanded="viewMenuOpen" @click="viewMenuOpen = !viewMenuOpen">보기 모드</button>
<button
class="top-button mode-button"
:aria-expanded="viewMenuOpen"
@click="viewMenuOpen = !viewMenuOpen"
>
보기 모드
</button>
<span v-if="viewMenuOpen" class="dropdown-menu">
<button
@click="
@@ -178,7 +183,7 @@ onMounted(load);
</td>
<td :class="`name-cell npc-${general.npcState}`">{{ general.name }}</td>
<td>{{ formatOfficerLevelText(general.officerLevel, data?.nation.level) }}</td>
<td>{{ rank(general) }}<br />({{ (general.dedicationLevel * 200).toLocaleString() }})</td>
<td>{{ general.dedicationText }}<br />({{ general.bill.toLocaleString() }})</td>
<td>Lv {{ general.experienceLevel }}<br />({{ general.personality?.name ?? '-' }})</td>
<td>{{ general.stats.leadership }}</td>
<td>{{ general.stats.strength }}</td>
@@ -3,6 +3,7 @@ import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { formatLog } from '../utils/formatLog';
import { legacyNationTextColor } from '../utils/legacyNationColor';
import { formatNationLevelText } from '../utils/nationFormat';
import { trpc } from '../utils/trpc';
type Result = Awaited<ReturnType<typeof trpc.nation.getNationInfo.query>>;
@@ -11,9 +12,7 @@ const router = useRouter();
const error = ref('');
const number = (value: number) => value.toLocaleString('ko-KR');
const diff = (value: number) => `${value > 0 ? '+' : ''}${number(value)}`;
const nationLevel = computed(
() => ['두목', '영주', '군벌', '주자사', '주목', '공', '왕', '황제'][data.value?.nation.level ?? 0] ?? '-'
);
const nationLevel = computed(() => formatNationLevelText(data.value?.nation.level ?? 0));
onMounted(async () => {
try {
data.value = await trpc.nation.getNationInfo.query();
+2 -12
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { formatOfficerLevelText } from '../utils/nationFormat';
import { formatNationLevelText, formatOfficerLevelText } from '../utils/nationFormat';
import { getNpcColor } from '../utils/npcColor';
import { trpc } from '../utils/trpc';
@@ -12,16 +12,6 @@ const nations = ref<Directory>([]);
const loading = ref(false);
const error = ref('');
const nationLevelText: Record<number, string> = {
7: '황제',
6: '왕',
5: '공',
4: '주목',
3: '주자사',
2: '군벌',
1: '호족',
0: '방랑군',
};
const whiteTextColors = new Set([
'',
'#330000',
@@ -111,7 +101,7 @@ onMounted(() => {
<td class="label-cell"> </td>
<td class="value-wide type-name">{{ Array.from(nation.type.name).join(' ') }}</td>
<td class="label-cell"> </td>
<td class="value-wide">{{ nationLevelText[nation.level] ?? '-' }}</td>
<td class="value-wide">{{ formatNationLevelText(nation.level) }}</td>
<td class="label-cell"> </td>
<td class="value-wide">{{ nation.power }}</td>
<td class="label-cell">장수 / 속령</td>
@@ -140,7 +140,7 @@ onMounted(() => {
<td>{{ valueOrDash(general.leadership) }}</td>
<td>{{ valueOrDash(general.strength) }}</td>
<td>{{ valueOrDash(general.intel) }}</td>
<td>{{ valueOrDash(general.officerLevel) }}</td>
<td>{{ valueOrDash(general.officerLevelText) }}</td>
<td>{{ valueOrDash(general.personal) }}</td>
<td>{{ valueOrDash(general.special) }}</td>
<td>{{ valueOrDash(general.special2) }}</td>
@@ -358,8 +358,11 @@ onBeforeUnmount(() => {
<span role="tooltip">{{ candidate.specialDomesticInfo }}</span>
</span>
/
<span>{{ candidate.specialWar ?? '-' }}</span
><br /><br />
<span v-if="candidate.specialWarName" class="trait-tooltip" tabindex="0">
{{ candidate.specialWarName }}
<span role="tooltip">{{ candidate.specialWarInfo }}</span>
</span>
<span v-else>-</span><br /><br />
보병: {{ Math.trunc(candidate.dex[0] / 1000) }}K<br />
궁병: {{ Math.trunc(candidate.dex[1] / 1000) }}K<br />
기병: {{ Math.trunc(candidate.dex[2] / 1000) }}K<br />
@@ -408,8 +411,11 @@ onBeforeUnmount(() => {
<span role="tooltip">{{ selectedCandidate.specialDomesticInfo }}</span>
</span>
/
<span>{{ selectedCandidate.specialWar ?? '-' }}</span
><br /><br />
<span v-if="selectedCandidate.specialWarName" class="trait-tooltip" tabindex="0">
{{ selectedCandidate.specialWarName }}
<span role="tooltip">{{ selectedCandidate.specialWarInfo }}</span>
</span>
<span v-else>-</span><br /><br />
보병: {{ Math.trunc(selectedCandidate.dex[0] / 1000) }}K<br />
궁병: {{ Math.trunc(selectedCandidate.dex[1] / 1000) }}K<br />
기병: {{ Math.trunc(selectedCandidate.dex[2] / 1000) }}K<br />