信息架构/菜单框架大重构-20260109

2026-01-09 11:19:04 +08:00
parent ba3cf95b8a
commit 9021c7fe2b
188 changed files with 7632 additions and 11658 deletions
@@ -0,0 +1,92 @@
+<template>
+  <div class="module-page">
+    <div class="module-header">
+      <div>
+        <h1 class="module-title">{{ title }}</h1>
+        <p v-if="subtitle" class="module-subtitle">{{ subtitle }}</p>
+      </div>
+      <slot name="actions" />
+    </div>
+    <div class="module-content">
+      <div class="module-list">
+        <div class="module-list-header">
+          <span class="list-title">{{ listTitle }}</span>
+          <span class="list-note">列表区域预留</span>
+        </div>
+        <StateEmpty :title="emptyTitle" :description="emptyDescription" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import StateEmpty from "./StateEmpty.vue";
+
+withDefaults(
+  defineProps<{
+    title: string;
+    subtitle?: string;
+    listTitle?: string;
+    emptyTitle?: string;
+    emptyDescription?: string;
+  }>(),
+  {
+    subtitle: "",
+    listTitle: "列表",
+    emptyTitle: "功能建设中",
+    emptyDescription: "该模块基础骨架已建立，后续将补充完整交互与数据能力。",
+  }
+);
+</script>
+
+<style scoped>
+.module-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.module-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.module-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+}
+
+.module-subtitle {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--ctms-text-secondary);
+}
+
+.module-list {
+  background-color: #fff;
+  border: 1px solid var(--ctms-border-color);
+  border-radius: var(--ctms-radius);
+  padding: 20px;
+}
+
+.module-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.list-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+}
+
+.list-note {
+  font-size: 12px;
+  color: var(--ctms-text-disabled);
+}
+</style>