diff --git a/muyun-web/src/app/ThemeSkinPreferencesDialog.vue b/muyun-web/src/app/ThemeSkinPreferencesDialog.vue
index 5b63dbb4..aa286e6c 100644
--- a/muyun-web/src/app/ThemeSkinPreferencesDialog.vue
+++ b/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')"
diff --git a/muyun-web/src/platform-components/ManagementPanelHeader.vue b/muyun-web/src/platform-components/ManagementPanelHeader.vue
new file mode 100644
index 00000000..fa68e626
--- /dev/null
+++ b/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>
diff --git a/muyun-web/src/platform-components/ManagementWorkspace.vue b/muyun-web/src/platform-components/ManagementWorkspace.vue
index cc237031..dc9b02d1 100644
--- a/muyun-web/src/platform-components/ManagementWorkspace.vue
+++ b/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;
diff --git a/muyun-web/src/platform-components/RecordDetailLayout.vue b/muyun-web/src/platform-components/RecordDetailLayout.vue
index d4f9be8b..245c9b8b 100644
--- a/muyun-web/src/platform-components/RecordDetailLayout.vue
+++ b/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;
diff --git a/muyun-web/src/platform-components/RecordDetailPanel.vue b/muyun-web/src/platform-components/RecordDetailPanel.vue
index 365ef0e4..01b52c62 100644
--- a/muyun-web/src/platform-components/RecordDetailPanel.vue
+++ b/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>
diff --git a/muyun-web/src/platform-components/RecordExplorerPanel.vue b/muyun-web/src/platform-components/RecordExplorerPanel.vue
index 66926e57..d3d402fc 100644
--- a/muyun-web/src/platform-components/RecordExplorerPanel.vue
+++ b/muyun-web/src/platform-components/RecordExplorerPanel.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue';
 import { UiButton, UiInput } from '@muyun/vue-ui-antdv';
+import ManagementPanelHeader from './ManagementPanelHeader.vue';
 
 defineOptions({ name: 'RecordExplorerPanel' });
 
@@ -59,33 +60,29 @@ async function focusSearchInput() {
 
 <template>
   <section class="record-explorer-panel">
-    <header class="record-explorer-panel-header">
-      <UiButton
-        class="record-explorer-panel-title"
-        icon-name="reload"
-        icon-position="end"
-        type="text"
-        :title="refreshTitle ?? `刷新${title}`"
-        @click="emit('refresh')"
-      >
-        <span class="record-explorer-panel-title-text">
-          <span>{{ title }}</span>
-        </span>
-      </UiButton>
-      <div v-if="$slots['title-extra']" class="record-explorer-panel-title-extra">
+    <ManagementPanelHeader
+      class="record-explorer-panel-header"
+      :title="title"
+      title-action-icon="reload"
+      :title-action-title="refreshTitle ?? `刷新${title}`"
+      @title-action="emit('refresh')"
+    >
+      <template v-if="$slots['title-extra']" #status>
         <slot name="title-extra" />
-      </div>
-      <div class="record-explorer-panel-actions">
-        <UiButton
-          v-if="searchable"
-          icon-name="search"
-          type="text"
-          :title="`搜索${title}`"
-          @click="toggleSearch"
-        />
-        <slot name="actions" />
-      </div>
-    </header>
+      </template>
+      <template #actions>
+        <div class="record-explorer-panel-actions">
+          <UiButton
+            v-if="searchable"
+            icon-name="search"
+            type="text"
+            :title="`搜索${title}`"
+            @click="toggleSearch"
+          />
+          <slot name="actions" />
+        </div>
+      </template>
+    </ManagementPanelHeader>
 
     <Transition name="record-explorer-search">
       <div v-if="searchVisible" ref="searchRoot" class="record-explorer-search">
@@ -119,7 +116,8 @@ async function focusSearchInput() {
   flex-direction: column;
   min-width: 0;
   min-height: 0;
-  padding: 12px;
+  padding: var(--muyun-management-panel-padding-block, 10px)
+    var(--muyun-management-panel-padding-inline, 12px);
   border: 1px solid var(--muyun-border);
   border-radius: 8px;
   background: var(--muyun-surface);
@@ -127,53 +125,8 @@ async function focusSearchInput() {
 }
 
 .record-explorer-panel-header {
-  display: flex;
   flex: 0 0 auto;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 10px;
-}
-
-.record-explorer-panel-title {
-  margin: -4px 0 -4px -6px;
-  padding: 4px 6px;
-  color: var(--muyun-text);
-  font-size: 16px;
-  font-weight: 700;
-}
-
-.record-explorer-panel-title-text {
-  display: inline-grid;
-  justify-items: start;
-  gap: 2px;
-}
-
-.record-explorer-panel-title-extra {
-  display: inline-flex;
-  flex: 1 1 auto;
-  align-items: center;
-  min-width: 0;
-}
-
-.record-explorer-panel-title :deep(.ui-button-trailing-icon) {
-  width: 0;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-  color: var(--muyun-text-muted);
-  opacity: 0;
-  overflow: hidden;
-  transition:
-    width 0.12s ease,
-    margin-inline-start 0.12s ease,
-    opacity 0.12s ease;
-}
-
-.record-explorer-panel-title:hover :deep(.ui-button-trailing-icon),
-.record-explorer-panel-title:focus-visible :deep(.ui-button-trailing-icon) {
-  width: 1em;
-  margin-inline-start: 6px;
-  opacity: 1;
+  margin-bottom: var(--muyun-management-panel-content-gap, 8px);
 }
 
 .record-explorer-panel-actions {
@@ -187,7 +140,7 @@ async function focusSearchInput() {
   display: flex;
   flex: 0 0 auto;
   min-width: 0;
-  margin-bottom: 10px;
+  margin-bottom: var(--muyun-management-panel-content-gap, 8px);
   overflow: hidden;
 }
 
@@ -212,7 +165,7 @@ async function focusSearchInput() {
 .record-explorer-search-enter-to,
 .record-explorer-search-leave-from {
   max-height: 40px;
-  margin-bottom: 10px;
+  margin-bottom: var(--muyun-management-panel-content-gap, 8px);
   opacity: 1;
   transform: translateY(0);
 }
@@ -239,7 +192,7 @@ async function focusSearchInput() {
   flex: 0 0 auto;
   align-items: center;
   min-height: 32px;
-  margin-top: 10px;
+  margin-top: var(--muyun-management-panel-content-gap, 8px);
   padding-top: 8px;
   border-top: 1px solid var(--muyun-border-subtle);
 }
diff --git a/muyun-web/src/platform-components/RecordQueryListPanel.vue b/muyun-web/src/platform-components/RecordQueryListPanel.vue
index 5def4b48..eb91b6ed 100644
--- a/muyun-web/src/platform-components/RecordQueryListPanel.vue
+++ b/muyun-web/src/platform-components/RecordQueryListPanel.vue
@@ -1298,13 +1298,21 @@ defineExpose({ clearSelection, refresh });
           :disabled="queryActionsDisabled"
           @update:value="handlePageSizeChange"
         />
-        <UiButton :disabled="queryActionsDisabled || pageNum <= 1" @click="goPage(pageNum - 1)">
-          上一页
-        </UiButton>
+        <UiButton
+          aria-label="上一页"
+          title="上一页"
+          icon-name="left"
+          :disabled="queryActionsDisabled || pageNum <= 1"
+          @click="goPage(pageNum - 1)"
+        />
         <span>第 {{ pageNum }} / {{ pages }} 页</span>
-        <UiButton :disabled="queryActionsDisabled || pageNum >= pages" @click="goPage(pageNum + 1)">
-          下一页
-        </UiButton>
+        <UiButton
+          aria-label="下一页"
+          title="下一页"
+          icon-name="right"
+          :disabled="queryActionsDisabled || pageNum >= pages"
+          @click="goPage(pageNum + 1)"
+        />
       </div>
     </footer>
   </main>
@@ -1320,11 +1328,12 @@ defineExpose({ clearSelection, refresh });
     'body'
     'pagination';
   align-content: stretch;
-  gap: 12px;
+  gap: var(--muyun-management-panel-content-gap, 8px);
   min-width: 0;
   min-height: 0;
   height: 100%;
-  padding: 14px;
+  padding: var(--muyun-management-panel-padding-block, 10px)
+    var(--muyun-management-panel-padding-inline, 12px);
   border: 1px solid var(--muyun-border);
   border-radius: 8px;
   background: var(--muyun-surface);
diff --git a/muyun-web/src/platform-workbench/Workbench.vue b/muyun-web/src/platform-workbench/Workbench.vue
index 06bd01c5..cd57d0ab 100644
--- a/muyun-web/src/platform-workbench/Workbench.vue
+++ b/muyun-web/src/platform-workbench/Workbench.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
-import { UiDropdown, UiError, UiIcon, UiSidePanelHost, UiSpin, UiTabs } from '@muyun/vue-ui-antdv';
+import { UiButton, UiDropdown, UiError, UiIcon, UiSidePanelHost, UiSpin, UiTabs } from '@muyun/vue-ui-antdv';
 import type {
   MenuNavigationTarget,
   MenuRecord,
@@ -383,26 +383,28 @@ function targetLabelOf(descriptor: PageDescriptor | undefined) {
             />
           </Transition>
           <div class="topbar-title">
-            <h1>{{ activeTab?.title ?? '控制台' }}</h1>
+            <div class="topbar-title-heading">
+              <h1>{{ activeTab?.title ?? '控制台' }}</h1>
+              <UiButton
+                class="title-refresh-action"
+                aria-label="刷新当前页"
+                icon-name="reload"
+                type="text"
+                :title="`刷新${activeTab?.title ?? '当前页'}`"
+                :disabled="!activeTab"
+                @click="refreshActiveTab"
+              />
+            </div>
             <span>{{ activePageTypeLabel }} / {{ activeTargetLabel }}</span>
           </div>
         </div>
 
         <div class="topbar-actions" aria-label="全局工具">
           <button
-            class="icon-button"
-            type="button"
-            aria-label="刷新当前页"
-            title="刷新当前页"
-            :disabled="!activeTab"
-            @click="refreshActiveTab"
-          >
-            <UiIcon name="reload" />
-          </button>
-          <button
-            class="icon-button"
+            class="icon-button skin-button"
             type="button"
             aria-label="皮肤切换"
+            title="切换皮肤"
             @click="emit('userCommand', 'themeSkin')"
           >
             <UiIcon name="skin" />
@@ -511,6 +513,61 @@ function targetLabelOf(descriptor: PageDescriptor | undefined) {
   min-width: 0;
 }
 
+.topbar-title-heading {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+}
+
+.title-refresh-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0;
+  min-width: 0;
+  height: 18px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  margin-inline-start: 0;
+  color: var(--muyun-support-text-muted);
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transition:
+    width 120ms ease,
+    margin-inline-start 120ms ease,
+    opacity 120ms ease;
+}
+
+.topbar-title-heading:hover .title-refresh-action,
+.title-refresh-action:focus-visible {
+  width: 12px;
+  margin-inline-start: 6px;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+:deep(.title-refresh-action.ant-btn-text:not(:disabled):hover),
+.title-refresh-action:focus-visible {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+:deep(.title-refresh-action .anticon) {
+  display: block;
+  font-size: 12px;
+}
+
+:deep(.title-refresh-action .ant-btn-icon) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
 .topbar-identity {
   display: flex;
   align-items: center;
@@ -618,6 +675,81 @@ function targetLabelOf(descriptor: PageDescriptor | undefined) {
   transform: translateY(-1px);
 }
 
+.skin-button {
+  position: relative;
+  width: 29px;
+  height: 29px;
+  isolation: isolate;
+  overflow: hidden;
+  border-color: transparent;
+  color: var(--muyun-theme-base);
+  background:
+    linear-gradient(var(--muyun-support-surface), var(--muyun-support-surface)) padding-box,
+    var(--muyun-skin-picker-border-gradient) border-box;
+  background-size:
+    100% 100%,
+    220% 100%;
+  background-position:
+    0 0,
+    0 0;
+}
+
+.skin-button :deep(.anticon) {
+  position: relative;
+  z-index: 1;
+}
+
+.skin-button::before {
+  position: absolute;
+  inset: -14px;
+  z-index: -1;
+  content: '';
+  background: var(--muyun-skin-picker-glow);
+  opacity: 0;
+  transform: rotate(-20deg) scale(0.88);
+  transition:
+    opacity 180ms ease,
+    transform 320ms ease;
+}
+
+.skin-button:hover,
+.skin-button:focus-visible {
+  border-color: transparent;
+  background-position:
+    0 0,
+    100% 0;
+  box-shadow: inset 0 0 0 1px var(--muyun-skin-picker-focus-ring);
+  transform: none;
+}
+
+.skin-button:hover::before,
+.skin-button:focus-visible::before {
+  opacity: 1;
+  transform: rotate(0deg) scale(1);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .skin-button:hover,
+  .skin-button:focus-visible {
+    animation: skin-spectrum-shift 2.8s linear infinite;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skin-button,
+  .skin-button::before {
+    transition: none;
+  }
+}
+
+@keyframes skin-spectrum-shift {
+  to {
+    background-position:
+      0 0,
+      220% 0;
+  }
+}
+
 .user-button {
   display: inline-flex;
   align-items: center;
@@ -710,7 +842,7 @@ function targetLabelOf(descriptor: PageDescriptor | undefined) {
 
 .tab-strip :deep(.ant-tabs-tab) {
   margin: 0 4px 0 0 !important;
-  padding: 6px 10px !important;
+  padding: 5px 0 !important;
   border: 1px solid var(--muyun-support-border) !important;
   border-bottom-color: var(--muyun-support-border) !important;
   border-radius: 8px 8px 0 0 !important;
@@ -742,6 +874,16 @@ function targetLabelOf(descriptor: PageDescriptor | undefined) {
   margin-left: 1px !important;
 }
 
+.tab-strip :deep(.ant-tabs-tab-with-remove .ant-tabs-tab-btn) {
+  display: inline-flex;
+  align-items: center;
+}
+
+.tab-strip :deep(.ant-tabs-tab-with-remove .ant-tabs-tab-btn::before) {
+  flex: 0 0 13px;
+  content: '';
+}
+
 .tab-strip :deep(.ant-tabs-tab:not(.ant-tabs-tab-active):hover) {
   border-color: var(--muyun-theme-border) !important;
   background: var(--muyun-theme-soft) !important;
diff --git a/muyun-web/src/vue-ui-antdv/components/UiDataTable.vue b/muyun-web/src/vue-ui-antdv/components/UiDataTable.vue
index d6d4bb3b..3b28d2a4 100644
--- a/muyun-web/src/vue-ui-antdv/components/UiDataTable.vue
+++ b/muyun-web/src/vue-ui-antdv/components/UiDataTable.vue
@@ -255,11 +255,21 @@ function isExpandTriggerEvent(event: MouseEvent) {
 }
 
 .ui-data-table :deep(.ant-table-thead > tr > th) {
+  /* Keep adapter density above Ant's generated physical padding shorthand. */
+  padding-block: 8px !important;
   background: var(--muyun-hover-subtle);
   color: var(--muyun-text);
   font-weight: 700;
 }
 
+.ui-data-table :deep(.ant-table-tbody > tr > td) {
+  padding-block: 6px !important;
+}
+
+.ui-data-table :deep(.ant-table-tbody > tr.ant-table-measure-row > td) {
+  padding-block: 0 !important;
+}
+
 .ui-data-table :deep(.ant-table-thead > tr > th.ui-data-table-action-cell) {
   text-align: center !important;
 }
@@ -276,6 +286,51 @@ function isExpandTriggerEvent(event: MouseEvent) {
   color: var(--muyun-text-muted);
 }
 
+.ui-data-table :deep(.ant-table-row-expand-icon) {
+  display: inline-grid;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  place-items: center;
+  background: transparent;
+  color: var(--muyun-text-muted);
+  transform: none;
+  transition:
+    color 160ms ease,
+    background-color 160ms ease;
+}
+
+.ui-data-table :deep(.ant-table-row-expand-icon::before) {
+  position: static;
+  width: 6px;
+  height: 6px;
+  border-right: 1.5px solid currentcolor;
+  border-bottom: 1.5px solid currentcolor;
+  background: transparent;
+  transform: rotate(-45deg);
+  transition: transform 160ms ease;
+}
+
+.ui-data-table :deep(.ant-table-row-expand-icon::after) {
+  display: none;
+}
+
+.ui-data-table :deep(.ant-table-row-expand-icon-expanded::before) {
+  transform: rotate(45deg);
+}
+
+.ui-data-table :deep(.ant-table-row-expand-icon:hover) {
+  background: var(--muyun-hover-subtle);
+  color: var(--muyun-theme-base);
+}
+
+.ui-data-table :deep(.ant-table-row-expand-icon:focus-visible) {
+  outline: 2px solid var(--muyun-theme-focus);
+  outline-offset: 1px;
+}
+
 .ui-data-table :deep(.ant-table-cell-fix-right),
 .ui-data-table :deep(.ant-table-cell-fix-right-first) {
   background: var(--muyun-surface);
diff --git a/muyun-web/src/vue-ui-antdv/components/UiIcon.vue b/muyun-web/src/vue-ui-antdv/components/UiIcon.vue
index b4d6af69..4be0e57b 100644
--- a/muyun-web/src/vue-ui-antdv/components/UiIcon.vue
+++ b/muyun-web/src/vue-ui-antdv/components/UiIcon.vue
@@ -10,6 +10,7 @@ import {
   EditOutlined,
   ExportOutlined,
   FilterOutlined,
+  LeftOutlined,
   LockOutlined,
   MenuFoldOutlined,
   MenuUnfoldOutlined,
@@ -18,6 +19,7 @@ import {
   PushpinOutlined,
   PoweroffOutlined,
   ReloadOutlined,
+  RightOutlined,
   SaveOutlined,
   SearchOutlined,
   SettingOutlined,
@@ -36,6 +38,7 @@ export type UiIconName =
   | 'export'
   | 'filter'
   | 'help'
+  | 'left'
   | 'lock'
   | 'menu-collapse'
   | 'menu-expand'
@@ -44,6 +47,7 @@ export type UiIconName =
   | 'pin'
   | 'power'
   | 'reload'
+  | 'right'
   | 'save'
   | 'search'
   | 'skin'
@@ -63,6 +67,7 @@ const icons = {
   export: ExportOutlined,
   filter: FilterOutlined,
   help: QuestionCircleOutlined,
+  left: LeftOutlined,
   lock: LockOutlined,
   'menu-collapse': MenuFoldOutlined,
   'menu-expand': MenuUnfoldOutlined,
@@ -71,6 +76,7 @@ const icons = {
   pin: PushpinOutlined,
   power: PoweroffOutlined,
   reload: ReloadOutlined,
+  right: RightOutlined,
   save: SaveOutlined,
   search: SearchOutlined,
   skin: SkinOutlined,
diff --git a/muyun-web/src/vue-ui-antdv/components/UiTabs.vue b/muyun-web/src/vue-ui-antdv/components/UiTabs.vue
index a2df89ec..1a2a3162 100644
--- a/muyun-web/src/vue-ui-antdv/components/UiTabs.vue
+++ b/muyun-web/src/vue-ui-antdv/components/UiTabs.vue
@@ -3,7 +3,6 @@ import { Tabs as ATabs, TabPane as ATabPane } from 'ant-design-vue';
 import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import type { UiTabItem } from '../types';
 import UiIcon from './UiIcon.vue';
-import UiTooltip from './UiTooltip.vue';
 
 defineOptions({ name: 'UiTabs', inheritAttrs: false });
 
@@ -413,17 +412,16 @@ onUnmounted(() => {
             }"
             :data-tab-key="tab.key"
           >
-            <UiTooltip v-if="tab.pinned" title="取消锁定标签">
-              <button
-                class="ui-tabs-pin-button"
-                type="button"
-                aria-label="取消锁定标签"
-                @pointerdown.stop
-                @click.stop="emit('togglePin', tab.key)"
-              >
-                <UiIcon name="pin" />
-              </button>
-            </UiTooltip>
+            <button
+              v-if="tab.pinned"
+              class="ui-tabs-pin-button"
+              type="button"
+              aria-label="取消锁定标签"
+              @pointerdown.stop
+              @click.stop="emit('togglePin', tab.key)"
+            >
+              <UiIcon name="pin" />
+            </button>
             {{ tab.title }}
           </span>
         </template>
@@ -504,7 +502,7 @@ onUnmounted(() => {
 .ui-tabs-label {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 2px;
   cursor: grab;
   touch-action: pan-x;
   user-select: none;
@@ -517,16 +515,23 @@ onUnmounted(() => {
   height: 15px;
   padding: 0;
   border: 0;
+  border-radius: 4px;
   background: transparent;
   color: var(--muyun-theme-base);
   cursor: pointer;
   font-size: 11px;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease,
+    transform 120ms ease;
 }
 
 .ui-tabs-pin-button:hover,
 .ui-tabs-pin-button:focus-visible {
+  background: var(--muyun-theme-soft);
   color: var(--muyun-theme-active);
   outline: 0;
+  transform: scale(1.08);
 }
 
 .ui-tabs :deep(.ant-tabs-tab .ant-tabs-tab-remove) {
diff --git a/muyun-web/src/vue-ui-antdv/theme.ts b/muyun-web/src/vue-ui-antdv/theme.ts
index 56792414..78fc8505 100644
--- a/muyun-web/src/vue-ui-antdv/theme.ts
+++ b/muyun-web/src/vue-ui-antdv/theme.ts
@@ -30,11 +30,19 @@ export interface UiSupportTheme {
   disabledText: string;
 }
 
+/** Visual treatment for the global theme-skin entry point. */
+export interface UiSkinPickerTheme {
+  borderGradient: string;
+  glow: string;
+  focusRing: string;
+}
+
 export interface UiTheme {
   appearance: 'light' | 'dark';
   theme: UiThemeTone;
   brandAccent: UiThemeTone;
   support: UiSupportTheme;
+  skinPicker: UiSkinPickerTheme;
   positive: UiThemeTone;
   warning: UiThemeTone;
   danger: UiThemeTone;
@@ -91,6 +99,11 @@ export const defaultUiTheme: UiTheme = {
     disabled: '#EEF1F5',
     disabledText: '#8A96A6',
   },
+  skinPicker: {
+    borderGradient: 'linear-gradient(120deg, #2B82E8, #7367F0 34%, #CF5CA7 66%, #E6AD42)',
+    glow: 'conic-gradient(from 210deg, transparent 0deg, rgb(43 130 232 / 12%) 80deg, rgb(115 103 240 / 14%) 145deg, rgb(207 92 167 / 10%) 205deg, transparent 275deg)',
+    focusRing: 'rgb(115 103 240 / 20%)',
+  },
   positive: {
     base: '#00A870',
     onBase: '#171F2A',
@@ -182,6 +195,11 @@ const lightAmberTheme: UiTheme = {
     disabled: '#F3EFE8',
     disabledText: '#968B7C',
   },
+  skinPicker: {
+    borderGradient: 'linear-gradient(120deg, #C07A00, #E0A11C 34%, #0062B0 66%, #58A8E2)',
+    glow: 'conic-gradient(from 210deg, transparent 0deg, rgb(192 122 0 / 12%) 80deg, rgb(224 161 28 / 14%) 145deg, rgb(0 98 176 / 10%) 205deg, transparent 275deg)',
+    focusRing: 'rgb(0 98 176 / 20%)',
+  },
 };
 
 const darkNavyTheme: UiTheme = {
@@ -225,6 +243,11 @@ const darkNavyTheme: UiTheme = {
     disabled: '#202A3A',
     disabledText: '#748399',
   },
+  skinPicker: {
+    borderGradient: 'linear-gradient(120deg, #5B8CFF, #7BA3FF 34%, #F5C542 66%, #FFD76A)',
+    glow: 'conic-gradient(from 210deg, transparent 0deg, rgb(91 140 255 / 18%) 80deg, rgb(123 163 255 / 20%) 145deg, rgb(245 197 66 / 14%) 205deg, transparent 275deg)',
+    focusRing: 'rgb(123 163 255 / 24%)',
+  },
   positive: {
     base: '#42C998',
     onBase: '#0F172A',
@@ -317,6 +340,11 @@ const darkGraphiteTheme: UiTheme = {
     disabled: '#2A2E34',
     disabledText: '#7E8792',
   },
+  skinPicker: {
+    borderGradient: 'linear-gradient(120deg, #6EA8FF, #91BEFF 34%, #E8B949 66%, #F4CD6C)',
+    glow: 'conic-gradient(from 210deg, transparent 0deg, rgb(110 168 255 / 18%) 80deg, rgb(145 190 255 / 20%) 145deg, rgb(232 185 73 / 14%) 205deg, transparent 275deg)',
+    focusRing: 'rgb(145 190 255 / 24%)',
+  },
 };
 
 export const uiThemeSkins: readonly UiThemeSkin[] = [
@@ -349,10 +377,11 @@ export function uiThemeSkinById(value: unknown): UiThemeSkin {
 
 export function cssVariablesOf(theme: UiTheme): Record<`--muyun-${string}`, string> {
   const variables: Record<`--muyun-${string}`, string> = {};
-  const roles: Record<string, UiThemeTone | UiSupportTheme> = {
+  const roles: Record<string, UiThemeTone | UiSupportTheme | UiSkinPickerTheme> = {
     theme: theme.theme,
     brandAccent: theme.brandAccent,
     support: theme.support,
+    skinPicker: theme.skinPicker,
     positive: theme.positive,
     warning: theme.warning,
     danger: theme.danger,
@@ -395,6 +424,10 @@ export function antDesignThemeOf(theme: UiTheme): ThemeConfig {
       controlItemBgActiveHover: theme.theme.focus,
       controlItemBgActiveDisabled: theme.support.disabled,
       borderRadius: 4,
+      fontSize: 13,
+      controlHeight: 30,
+      controlHeightSM: 22,
+      controlHeightLG: 38,
     },
   };
 }
diff --git a/muyun-web/tests/platform-components/RecordQueryListPanel.component.test.ts b/muyun-web/tests/platform-components/RecordQueryListPanel.component.test.ts
index 8ae9a8af..d90890fb 100644
--- a/muyun-web/tests/platform-components/RecordQueryListPanel.component.test.ts
+++ b/muyun-web/tests/platform-components/RecordQueryListPanel.component.test.ts
@@ -49,6 +49,20 @@ describe('RecordQueryListPanel', () => {
     expect(cells[1].attributes('style')).toContain('--record-query-list-max-lines: 3');
     expect(cells[1].attributes('title')).toBe('显示三行以内，全文仍可通过提示查看');
   });
+
+  it('keeps icon-only pagination controls accessible', async () => {
+    const wrapper = shallowMount(RecordQueryListPanel, {
+      props: {
+        context: createContext({ id: 'note-1' }),
+        title: '备注',
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.find('[aria-label="上一页"]').exists()).toBe(true);
+    expect(wrapper.find('[aria-label="下一页"]').exists()).toBe(true);
+  });
 });
 
 function createContext(record: QueryListRecord): ModuleContext<QueryListRecord> {
diff --git a/muyun-web/tests/platform-components/staticManagementComponentContracts.test.ts b/muyun-web/tests/platform-components/staticManagementComponentContracts.test.ts
index 39da69af..ae0fc455 100644
--- a/muyun-web/tests/platform-components/staticManagementComponentContracts.test.ts
+++ b/muyun-web/tests/platform-components/staticManagementComponentContracts.test.ts
@@ -55,10 +55,17 @@ it('record list explorer exposes visible secondary identity text', () => {
 
 it('record explorer panel uses a single title contract', () => {
   const panelSource = readSource('src/platform-components/RecordExplorerPanel.vue');
+  const detailPanelSource = readSource('src/platform-components/RecordDetailPanel.vue');
+  const headerSource = readSource('src/platform-components/ManagementPanelHeader.vue');
   const layoutSource = readSource('src/platform-components/StaticManagementLayout.vue');
+  const workspaceSource = readSource('src/platform-components/ManagementWorkspace.vue');
 
   assert.notMatch(panelSource, /eyebrow/);
   assert.notMatch(layoutSource, /groupTitle/);
+  assert.match(panelSource, /<ManagementPanelHeader/);
+  assert.match(detailPanelSource, /<ManagementPanelHeader/);
+  assert.match(headerSource, /--muyun-management-panel-header-height/);
+  assert.match(workspaceSource, /--muyun-management-panel-padding-block/);
 });
 
 it('record metadata uses semantic text colors so dark skins preserve hierarchy', () => {
diff --git a/muyun-web/tests/vue-ui-antdv/UiTabs.component.test.ts b/muyun-web/tests/vue-ui-antdv/UiTabs.component.test.ts
index 0e292073..37a69b56 100644
--- a/muyun-web/tests/vue-ui-antdv/UiTabs.component.test.ts
+++ b/muyun-web/tests/vue-ui-antdv/UiTabs.component.test.ts
@@ -123,8 +123,10 @@ it('shows a pin button for locked tabs and keeps them out of bulk-close actions'
   });
   const labels = wrapper.findAll('.ui-tabs-label');
 
-  expect(wrapper.find('.ui-tabs-pin-button').attributes('aria-label')).toBe('取消锁定标签');
-  await wrapper.find('.ui-tabs-pin-button').trigger('click');
+  const pinButton = wrapper.find('.ui-tabs-pin-button');
+  expect(pinButton.attributes('aria-label')).toBe('取消锁定标签');
+  expect(pinButton.attributes('title')).toBeUndefined();
+  await pinButton.trigger('click');
   expect(wrapper.emitted('togglePin')).toEqual([['application']]);
 
   await labels[1].element
diff --git a/muyun-web/tests/vue-ui-antdv/theme.test.ts b/muyun-web/tests/vue-ui-antdv/theme.test.ts
index e4c1d2f2..bb5c5d78 100644
--- a/muyun-web/tests/vue-ui-antdv/theme.test.ts
+++ b/muyun-web/tests/vue-ui-antdv/theme.test.ts
@@ -20,6 +20,8 @@ describe('UiTheme', () => {
     expect(variables['--muyun-support-disabled']).toBe('#EEF1F5');
     expect(variables['--muyun-positive-focus']).toBe('#D3F3E7');
     expect(variables['--muyun-danger-border']).toBe('#F5E5E7');
+    expect(variables['--muyun-skin-picker-border-gradient']).toContain('linear-gradient');
+    expect(variables['--muyun-skin-picker-glow']).toContain('conic-gradient');
   });
 
   it('allows a future palette adjustment without changing semantic consumers', () => {
@@ -102,6 +104,8 @@ describe('UiTheme', () => {
       expect(variables['--muyun-theme-base']).toBeTruthy();
       expect(variables['--muyun-support-surface']).toBeTruthy();
       expect(variables['--muyun-danger-soft-text']).toBeTruthy();
+      expect(variables['--muyun-skin-picker-border-gradient']).toBeTruthy();
+      expect(variables['--muyun-skin-picker-glow']).toBeTruthy();
       expect(antDesignThemeOf(skin.theme).algorithm).toBeTruthy();
     });
   });