feat: redesign live recorder control console ui

2026-05-13 18:51:05 +08:00
parent d69c7d015e
commit b81ead700d
12 changed files with 2120 additions and 806 deletions
@@ -0,0 +1,115 @@
+<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>