V13-FE-011: finalize search list layout slice

2026-08-09 02:57:26 +09:00
parent 9efd202e76
commit 6422cb2b13
984 changed files with 120811 additions and 1498 deletions
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  title: string
+  breadcrumb?: string
+  description?: string
+  status?: string
+  dirty?: boolean
+}>(), { breadcrumb:'', description:'', status:'', dirty:false })
+</script>
+
+<template>
+  <header class="kbx-page-header">
+    <div class="kbx-page-header__identity">
+      <div v-if="breadcrumb" class="kbx-page-header__breadcrumb">{{ breadcrumb }}</div>
+      <div class="kbx-page-header__title-row">
+        <h1>{{ title }}</h1>
+        <span v-if="status" class="kbx-page-header__status">{{ status }}</span>
+        <span v-if="dirty" class="kbx-page-header__dirty">변경됨</span>
+      </div>
+      <p v-if="description">{{ description }}</p>
+    </div>
+    <div class="kbx-page-header__utility"><slot name="utility" /></div>
+  </header>
+</template>
+
+<style scoped>
+.kbx-page-header {
+  min-height:var(--kbx-page-header-height);
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:var(--kbx-space-4);
+  padding:var(--kbx-space-1) var(--kbx-screen-inline-padding);
+  border-bottom:var(--kbx-border-width) solid var(--kbx-color-border);
+  background:var(--kbx-color-surface);
+}
+.kbx-page-header__identity { min-width:0; }
+.kbx-page-header__title-row { display:flex; align-items:center; gap:var(--kbx-space-2); min-width:0; }
+h1 { font-size:var(--kbx-font-2xl); font-weight:600; margin:0; line-height:1.3; }
+.kbx-page-header__breadcrumb, p { font-size:var(--kbx-font-xs); color:var(--kbx-color-text-muted); margin:0 0 var(--kbx-space-1); }
+.kbx-page-header__status, .kbx-page-header__dirty { font-size:var(--kbx-font-xs); padding:var(--kbx-space-1) var(--kbx-space-2); border:var(--kbx-border-width) solid var(--kbx-color-border); border-radius:var(--kbx-radius-sm); white-space:nowrap; }
+.kbx-page-header__status { background:var(--kbx-color-surface-muted); }
+.kbx-page-header__dirty { color:var(--kbx-color-warning-text); border-color:var(--kbx-color-warning-border); background:var(--kbx-color-warning-surface); }
+.kbx-page-header__utility { display:flex; align-items:center; gap:var(--kbx-space-1); flex-shrink:0; }
+</style>