116 lines
2.5 KiB
Vue
116 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import { Close } from "@element-plus/icons-vue";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue: boolean;
|
|
title: string;
|
|
subtitle?: string;
|
|
size?: string | number;
|
|
}>(),
|
|
{
|
|
subtitle: "",
|
|
size: "520px"
|
|
}
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
(event: "update:modelValue", value: boolean): void;
|
|
}>();
|
|
|
|
const visible = computed({
|
|
get: () => props.modelValue,
|
|
set: (value: boolean) => emit("update:modelValue", value)
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<el-drawer v-model="visible" class="right-drawer" direction="rtl" :size="size" :with-header="false">
|
|
<div class="right-drawer__shell">
|
|
<header class="right-drawer__header">
|
|
<div class="right-drawer__copy">
|
|
<div class="right-drawer__eyebrow">详情面板</div>
|
|
<h3 class="right-drawer__title">{{ title }}</h3>
|
|
<p v-if="subtitle" class="right-drawer__subtitle">{{ subtitle }}</p>
|
|
</div>
|
|
<el-button class="right-drawer__close" text circle @click="visible = false">
|
|
<el-icon><Close /></el-icon>
|
|
</el-button>
|
|
</header>
|
|
|
|
<div class="right-drawer__body">
|
|
<slot />
|
|
</div>
|
|
|
|
<footer v-if="$slots.footer" class="right-drawer__footer">
|
|
<slot name="footer" />
|
|
</footer>
|
|
</div>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.right-drawer .el-drawer__body) {
|
|
padding: 0;
|
|
}
|
|
|
|
.right-drawer__shell {
|
|
display: flex;
|
|
min-height: 100%;
|
|
flex-direction: column;
|
|
background: linear-gradient(180deg, var(--surface-raised), var(--surface));
|
|
}
|
|
|
|
.right-drawer__header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 24px 24px 18px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.right-drawer__eyebrow {
|
|
margin-bottom: 8px;
|
|
color: var(--accent);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.right-drawer__title {
|
|
margin: 0;
|
|
color: var(--text-primary);
|
|
font-size: 22px;
|
|
font-weight: 760;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
|
|
.right-drawer__subtitle {
|
|
margin: 8px 0 0;
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.right-drawer__close {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.right-drawer__body {
|
|
flex: 1;
|
|
padding: 20px 24px 24px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.right-drawer__footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
padding: 16px 24px 24px;
|
|
border-top: 1px solid var(--border-subtle);
|
|
}
|
|
</style>
|