30 lines
1.1 KiB
Vue
30 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import type { KbxHelpContent } from '@kbx/contracts'
|
|
|
|
defineProps<{ content: KbxHelpContent }>()
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="kbx-help-panel">
|
|
<header><h2>{{ content.title }}</h2></header>
|
|
<p>{{ content.purpose }}</p>
|
|
<section v-if="content.steps?.length">
|
|
<h3>사용순서</h3>
|
|
<ol><li v-for="step in content.steps" :key="step">{{ step }}</li></ol>
|
|
</section>
|
|
<section v-if="content.shortcuts?.length">
|
|
<h3>단축키</h3>
|
|
<dl><template v-for="item in content.shortcuts" :key="item.key"><dt>{{ item.key }}</dt><dd>{{ item.description }}</dd></template></dl>
|
|
</section>
|
|
<section v-if="content.cautions?.length">
|
|
<h3>주의</h3>
|
|
<ul><li v-for="item in content.cautions" :key="item">{{ item }}</li></ul>
|
|
</section>
|
|
</aside>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.kbx-help-panel { width:min(390px, 92vw); padding:16px; font-size:14px; line-height:1.55; }
|
|
h2 { margin:0 0 8px; font-size:18px; } h3 { margin:18px 0 6px; font-size:14px; } ol, ul { padding-left:20px; } dl { display:grid; grid-template-columns:72px 1fr; gap:6px 10px; } dt { font-weight:700; } dd { margin:0; }
|
|
</style>
|