All files / web/src/components/shared PageHeader.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script setup lang="ts">
import { ElButton } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
 
interface Props {
  title: string
  subtitle?: string
  showBack?: boolean
  backTo?: string | (() => void)
}
 
const props = defineProps<Props>()
const router = useRouter()
 
function handleBack() {
  if (typeof props.backTo === 'function') {
    props.backTo()
  } else if (typeof props.backTo === 'string') {
    router.push(props.backTo)
  } else {
    router.back()
  }
}
</script>
 
<template>
  <div class="page-header">
    <div class="page-header__left">
      <ElButton
        v-if="showBack"
        :icon="ArrowLeft"
        @click="handleBack"
        class="page-header__back"
      >
        Back
      </ElButton>
 
      <div class="page-header__title-group">
        <h1 class="page-header__title">{{ title }}</h1>
        <span v-if="subtitle" class="page-header__subtitle">{{ subtitle }}</span>
      </div>
    </div>
 
    <div v-if="$slots.actions" class="page-header__actions">
      <slot name="actions" />
    </div>
  </div>
</template>
 
<style lang="scss" scoped>
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--rf-page-header-height, var(--rf-size-sm));
  padding: 0 var(--rf-spacing-xl);
  background: var(--rf-color-bg-container);
 
  &__left {
    display: flex;
    align-items: center;
    gap: var(--rf-spacing-md);
  }
 
  &__back {
    flex-shrink: 0;
  }
 
  &__title-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
 
  &__title {
    margin: 0;
    font-size: var(--rf-font-size-lg);
    font-weight: var(--rf-font-weight-semibold);
    color: var(--rf-color-text-primary);
    line-height: 1.2;
  }
 
  &__subtitle {
    margin-top: var(--rf-spacing-3xs);
    font-size: var(--rf-font-size-sm);
    color: var(--rf-color-text-secondary);
  }
 
  &__actions {
    display: flex;
    align-items: center;
    gap: var(--rf-spacing-md);
 
    :deep(.el-input) {
      width: var(--rf-size-xl);
    }
  }
}
 
@media (max-width: 768px) {
  .page-header {
    padding: 0 var(--rf-spacing-lg);
 
    &__title {
      font-size: var(--rf-font-size-md);
    }
 
    &__actions {
      :deep(.el-input) {
        width: var(--rf-size-lg);
      }
    }
  }
}
 
html.dark {
  .page-header {
    background: var(--rf-color-bg-container);
  }
}
</style>