feat: 实现管理后台 W1-W3 假数据界面

web/src/components/HelpTip.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { NTooltip } from "naive-ui";
+</script>
+
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <span class="help-tip" aria-label="帮助">?</span>
+    </template>
+    <slot />
+  </n-tooltip>
+</template>
+
+<style scoped>
+.help-tip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin-left: 4px;
+  border-radius: 50%;
+  border: 1px solid #999;
+  color: #666;
+  font-size: 11px;
+  line-height: 1;
+  cursor: help;
+  vertical-align: middle;
+}
+</style>

web/src/components/PageHeader.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { NSpace, NText } from "naive-ui";
+import HelpTip from "./HelpTip.vue";
+
+defineProps<{
+  title: string;
+  help?: string;
+}>();
+</script>
+
+<template>
+  <div class="page-header">
+    <n-space align="center" :size="4">
+      <n-text strong style="font-size: 16px">{{ title }}</n-text>
+      <HelpTip v-if="help">{{ help }}</HelpTip>
+    </n-space>
+    <n-space align="center" :size="8">
+      <slot name="actions" />
+    </n-space>
+  </div>
+</template>
+
+<style scoped>
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--n-border-color, #efeff5);
+  background: var(--n-color, #fff);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  flex-shrink: 0;
+}
+</style>

web/src/components/SecretOnceAlert.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { NAlert, NButton, NSpace, NText } from "naive-ui";
+
+const props = defineProps<{
+  title: string;
+  secret: string;
+  filename?: string;
+}>();
+
+const emit = defineEmits<{
+  dismiss: [];
+}>();
+
+function copy() {
+  void navigator.clipboard?.writeText(props.secret);
+}
+
+function download() {
+  const blob = new Blob([props.secret], { type: "text/plain;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = props.filename ?? "secret.txt";
+  a.click();
+  URL.revokeObjectURL(url);
+}
+</script>
+
+<template>
+  <n-alert type="warning" :title="title" style="margin-bottom: 12px">
+    <n-space vertical :size="8">
+      <n-text code>{{ secret }}</n-text>
+      <n-text depth="3">关闭后将无法再次查看，请立即复制或下载。</n-text>
+      <n-space>
+        <n-button size="small" @click="copy">复制</n-button>
+        <n-button size="small" @click="download">下载</n-button>
+        <n-button size="small" secondary @click="emit('dismiss')">我已保存</n-button>
+      </n-space>
+    </n-space>
+  </n-alert>
+</template>