feat: 统一管理界面视觉契约

muyun-web/src/app/ThemeSkinPreferencesDialog.vue

@@ -44,6 +44,7 @@ function moveSkinFocus(event: KeyboardEvent, currentIndex: number) {
   <UiModal
     :open="open"
     title="偏好设置"
+    :width="460"
     :confirm-text="saving ? '保存中…' : '完成'"
     :confirm-loading="saving"
     @confirm="emit('close')"

muyun-web/src/platform-components/ManagementPanelHeader.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { UiButton, type UiIconName } from '@muyun/vue-ui-antdv';
+
+defineOptions({ name: 'ManagementPanelHeader' });
+
+withDefaults(
+  defineProps<{
+    title: string;
+    subtitle?: string;
+    titleActionIcon?: UiIconName;
+    titleActionTitle?: string;
+  }>(),
+  {
+    subtitle: undefined,
+    titleActionIcon: undefined,
+    titleActionTitle: undefined,
+  },
+);
+
+const emit = defineEmits<{
+  titleAction: [];
+}>();
+</script>
+
+<template>
+  <header class="management-panel-header">
+    <div class="management-panel-header-title-group">
+      <div class="management-panel-header-title-copy">
+        <UiButton
+          v-if="titleActionIcon"
+          class="management-panel-header-title-action"
+          :aria-label="titleActionTitle"
+          :icon-name="titleActionIcon"
+          icon-position="end"
+          type="text"
+          :title="titleActionTitle"
+          @click="emit('titleAction')"
+        >
+          {{ title }}
+        </UiButton>
+        <h2 v-else class="management-panel-header-title">{{ title }}</h2>
+        <p v-if="subtitle" class="management-panel-header-subtitle">{{ subtitle }}</p>
+      </div>
+      <div v-if="$slots.status" class="management-panel-header-status">
+        <slot name="status" />
+      </div>
+    </div>
+    <div v-if="$slots.actions" class="management-panel-header-actions">
+      <slot name="actions" />
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.management-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--muyun-management-panel-header-gap, 8px);
+  min-width: 0;
+  min-height: var(--muyun-management-panel-header-height, 30px);
+}
+
+.management-panel-header-title-group {
+  display: inline-flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--muyun-management-panel-header-gap, 8px);
+  min-width: 0;
+}
+
+.management-panel-header-title-copy {
+  display: grid;
+  min-width: 0;
+}
+
+.management-panel-header-title,
+.management-panel-header-title-action {
+  margin: 0;
+  min-width: 0;
+  height: var(--muyun-management-panel-header-height, 30px);
+  padding: 0;
+  color: var(--muyun-text);
+  font-size: var(--muyun-management-panel-title-font-size, 16px);
+  font-weight: 700;
+  line-height: var(--muyun-management-panel-title-line-height, 22px);
+}
+
+.management-panel-header-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.management-panel-header-subtitle {
+  margin: 3px 0 0;
+  overflow: hidden;
+  color: var(--muyun-text-secondary);
+  font-size: 12px;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.management-panel-header-title-action {
+  border: 0;
+  background: transparent;
+}
+
+:deep(.management-panel-header-title-action.ant-btn-text:not(:disabled):hover) {
+  background: transparent;
+}
+
+.management-panel-header-title-action :deep(.ui-button-trailing-icon) {
+  width: 0;
+  margin-inline: 0;
+  color: var(--muyun-text-muted);
+  opacity: 0;
+  overflow: hidden;
+  transition:
+    width 120ms ease,
+    margin-inline-start 120ms ease,
+    opacity 120ms ease;
+}
+
+.management-panel-header-title-action:hover :deep(.ui-button-trailing-icon),
+.management-panel-header-title-action:focus-visible :deep(.ui-button-trailing-icon) {
+  width: 12px;
+  margin-inline-start: 6px;
+  opacity: 1;
+}
+
+.management-panel-header-status {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  min-width: 0;
+}
+
+.management-panel-header-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--muyun-management-panel-header-gap, 8px);
+  min-width: 0;
+  max-width: 100%;
+}
+</style>

muyun-web/src/platform-components/ManagementWorkspace.vue

@@ -32,6 +32,13 @@ const pageLayout = usePageLayout();
   --muyun-management-explorer-width: 280px;
   --muyun-management-detail-min-width: 560px;
   --muyun-management-column-gap: 12px;
+  --muyun-management-panel-padding-block: 10px;
+  --muyun-management-panel-padding-inline: 12px;
+  --muyun-management-panel-header-height: 30px;
+  --muyun-management-panel-header-gap: 8px;
+  --muyun-management-panel-title-font-size: 16px;
+  --muyun-management-panel-title-line-height: 22px;
+  --muyun-management-panel-content-gap: 8px;
 
   display: grid;
   align-items: start;

muyun-web/src/platform-components/RecordDetailLayout.vue

@@ -27,19 +27,21 @@ withDefaults(
     class="record-detail-layout"
     :class="[`record-detail-layout--${surface}`, { 'record-detail-layout--scrollable': scrollableContent }]"
   >
-    <header class="record-detail-layout-header">
-      <div class="record-detail-layout-title-group">
-        <div class="record-detail-layout-title-copy">
-          <h2>{{ title }}</h2>
-          <p v-if="subtitle">{{ subtitle }}</p>
+    <slot name="header">
+      <header class="record-detail-layout-header">
+        <div class="record-detail-layout-title-group">
+          <div class="record-detail-layout-title-copy">
+            <h2>{{ title }}</h2>
+            <p v-if="subtitle">{{ subtitle }}</p>
+          </div>
+          <slot name="status" />
+          <slot name="title-actions" />
         </div>
-        <slot name="status" />
-        <slot name="title-actions" />
-      </div>
-      <div v-if="$slots.actions" class="record-detail-layout-actions">
-        <slot name="actions" />
-      </div>
-    </header>
+        <div v-if="$slots.actions" class="record-detail-layout-actions">
+          <slot name="actions" />
+        </div>
+      </header>
+    </slot>
     <div v-if="scrollableContent" class="record-detail-layout-content">
       <slot />
     </div>
@@ -64,6 +66,9 @@ withDefaults(
 }
 
 .record-detail-layout--workspace {
+  gap: var(--muyun-management-panel-content-gap, 8px);
+  padding: var(--muyun-management-panel-padding-block, 10px)
+    var(--muyun-management-panel-padding-inline, 12px);
   border: 1px solid var(--muyun-border);
   border-radius: 8px;
 }
@@ -148,6 +153,12 @@ withDefaults(
   background: var(--muyun-surface);
 }
 
+.record-detail-layout--workspace .record-detail-layout-operation {
+  margin: 0 calc(-1 * var(--muyun-management-panel-padding-inline, 12px))
+    calc(-1 * var(--muyun-management-panel-padding-block, 10px));
+  padding-inline: var(--muyun-management-panel-padding-inline, 12px);
+}
+
 @media (max-width: 720px) {
   .record-detail-layout-header {
     display: grid;

muyun-web/src/platform-components/RecordDetailPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import RecordDetailLayout from './RecordDetailLayout.vue';
+import ManagementPanelHeader from './ManagementPanelHeader.vue';
 import { usePageLayout } from './pageLayoutContext';
 
 defineOptions({ name: 'RecordDetailPanel' });
@@ -21,11 +22,15 @@ const pageLayout = usePageLayout();
     :subtitle="subtitle"
     :scrollable-content="pageLayout === 'workspace'"
   >
-    <template #status>
-      <slot name="status" />
-    </template>
-    <template #actions>
-      <slot name="actions" />
+    <template #header>
+      <ManagementPanelHeader :title="title" :subtitle="subtitle">
+        <template v-if="$slots.status" #status>
+          <slot name="status" />
+        </template>
+        <template v-if="$slots.actions" #actions>
+          <slot name="actions" />
+        </template>
+      </ManagementPanelHeader>
     </template>
     <slot />
     <template v-if="$slots.operation" #operation>