zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

코드 블록 설정 패널 UI 정리

Browse Source
This commit is contained in:
zenn
2026-07-24 17:00:33 +09:00
parent e8eaed6ff5
commit 540255512c
8 changed files with 104 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
components/admin/AdminEditorBlockPanel.vue
View File

@@ -78,7 +78,18 @@ const inlineColorSwatches = {
purple: '#8800ff'
}
const languageOptions = ['', 'javascript', 'html', 'css', 'vue', 'json', 'bash', 'markdown', 'sql']
/** @type {Array<{ label: string, value: string }>} 코드 블록 언어 셀렉트 옵션 */
const CODE_LANGUAGE_OPTIONS = [
{ label: '일반 텍스트', value: '' },
{ label: 'JavaScript', value: 'javascript' },
{ label: 'HTML', value: 'html' },
{ label: 'CSS', value: 'css' },
{ label: 'Vue', value: 'vue' },
{ label: 'JSON', value: 'json' },
{ label: 'Bash', value: 'bash' },
{ label: 'Markdown', value: 'markdown' },
{ label: 'SQL', value: 'sql' }
]
/** @type {number|null} 패널 내부 포인터 조작 상태 해제 타이머 */
let panelPointerInsideTimer = null
@@ -640,33 +651,36 @@ onBeforeUnmount(() => {
</template>
<template v-else-if="panel.kind === 'code'">
<div class="admin-editor-block-panel__code-settings grid gap-4">
<div class="admin-editor-block-panel__code-settings grid gap-5">
<label class="admin-editor-block-panel__field grid gap-2 text-sm">
<span class="font-semibold text-[#394047]">언어</span>
<input
class="rounded border border-[#d7dde2] bg-[#eff1f2] px-3 py-2 text-sm text-[#15171a] outline-none transition-colors focus:border-[#8e9cac]"
:value="panel.language"
type="text"
list="admin-editor-block-panel-languages"
placeholder="javascript"
@input="emit('update-code-options', { language: $event.target.value })"
>
<datalist id="admin-editor-block-panel-languages">
<option
v-for="language in languageOptions"
:key="`code-language-${language || 'plain'}`"
:value="language"
/>
</datalist>
<AdminSelectInput
:model-value="panel.language"
:options="CODE_LANGUAGE_OPTIONS"
label="코드 블록 언어"
root-class="admin-editor-block-panel__code-language-select"
width-class="w-full"
select-class="bg-[#eff1f2] border-[#d7dde2] text-[#15171a]"
@update:model-value="emit('update-code-options', { language: $event })"
/>
</label>
<label class="flex cursor-pointer items-center justify-between gap-3 rounded border border-[#edf0f2] bg-[#fafafa] px-3 py-3 text-sm font-semibold text-[#394047]">
<span>줄번호 표시</span>
<input
class="size-4 rounded border-[#c8ced3] text-[#15171a]"
type="checkbox"
:checked="panel.showLineNumbers"
@change="emit('update-code-options', { showLineNumbers: $event.target.checked })"
>
<label class="admin-editor-block-panel__code-line-number-toggle flex cursor-pointer items-center justify-between gap-4 border-t border-[#e3e6e8] pt-5 text-sm">
<span class="admin-editor-block-panel__code-line-number-toggle-copy flex min-w-0 items-center gap-3">
<span class="admin-editor-block-panel__code-line-number-toggle-label font-bold text-[#15171a]">
줄번호 표시
</span>
</span>
<span class="admin-editor-block-panel__code-line-number-toggle-control relative inline-flex h-7 w-12 shrink-0 items-center">
<input
class="peer sr-only"
type="checkbox"
aria-label="줄번호 표시"
:checked="panel.showLineNumbers"
@change="emit('update-code-options', { showLineNumbers: $event.target.checked })"
>
<span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#15171a]" aria-hidden="true" />
<span class="relative ml-1 size-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
</span>
</label>
</div>
</template>