feat: 统一管理端弹窗与内容区交互样式

- 收敛管理端公共 Modal 链路，新增表单弹窗与普通内容弹窗包装\n- 迁移 Bot、知识库、插件、工作流、资源、MCP、数据中枢与系统管理页面级弹窗\n- 统一内容区工具栏、列表容器、导航与顶部按钮的视觉密度和交互节奏

easyflow-ui-admin/app/src/components/page/ListPageShell.vue

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import { computed, useSlots } from 'vue';
+
+interface Props {
+  contentPadding?: number | string;
+  dense?: boolean;
+  stickyToolbar?: boolean;
+  surface?: 'panel' | 'subtle';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  contentPadding: 0,
+  dense: false,
+  stickyToolbar: false,
+  surface: 'panel',
+});
+
+const slots = useSlots();
+
+const hasToolbar = computed(() => Boolean(slots.filters || slots.actions));
+
+const contentStyle = computed((): CSSProperties => {
+  const padding =
+    typeof props.contentPadding === 'number'
+      ? `${props.contentPadding}px`
+      : props.contentPadding;
+
+  return padding ? { '--list-page-shell-content-padding': padding } : {};
+});
+</script>
+
+<template>
+  <section
+    :class="[
+      'list-page-shell',
+      `is-${surface}`,
+      {
+        'is-dense': dense,
+      },
+    ]"
+  >
+    <div
+      v-if="hasToolbar"
+      :class="[
+        'list-page-shell__toolbar',
+        {
+          'is-sticky': stickyToolbar,
+        },
+      ]"
+    >
+      <div v-if="$slots.filters" class="list-page-shell__filters">
+        <slot name="filters"></slot>
+      </div>
+      <div v-if="$slots.actions" class="list-page-shell__actions">
+        <slot name="actions"></slot>
+      </div>
+    </div>
+
+    <div class="list-page-shell__content" :style="contentStyle">
+      <slot></slot>
+      <slot name="empty"></slot>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.list-page-shell {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  gap: 16px;
+}
+
+.list-page-shell.is-dense {
+  gap: 12px;
+}
+
+.list-page-shell__toolbar {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 8px 6px 2px;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+}
+
+.list-page-shell__toolbar.is-sticky {
+  position: sticky;
+  top: 12px;
+  z-index: 5;
+  padding: 10px 10px 6px;
+  background: hsl(var(--glass-tint) / 0.7);
+  border: 1px solid hsl(var(--glass-border) / 0.44);
+  border-radius: 20px;
+  box-shadow: var(--shadow-toolbar);
+  backdrop-filter: blur(var(--glass-blur)) saturate(155%);
+}
+
+.list-page-shell__filters,
+.list-page-shell__actions {
+  min-width: 0;
+}
+
+.list-page-shell__filters {
+  flex: 1;
+}
+
+.list-page-shell__content {
+  --list-page-shell-content-padding: 0px;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  padding: var(--list-page-shell-content-padding);
+  background: hsl(var(--surface-panel));
+  border: none;
+  border-radius: 24px;
+  box-shadow: var(--shadow-subtle);
+}
+
+.list-page-shell.is-subtle .list-page-shell__content {
+  background: hsl(var(--surface-contrast-soft));
+  box-shadow: none;
+}
+
+.list-page-shell__content :deep(.page-data-container) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.list-page-shell__content :deep(.el-empty) {
+  margin: auto;
+}
+
+.list-page-shell__content :deep(.el-table) {
+  --el-table-bg-color: transparent;
+  --el-table-tr-bg-color: transparent;
+  --el-table-header-bg-color: hsl(var(--table-header-bg));
+  --el-table-border-color: hsl(var(--table-row-border));
+  --el-table-current-row-bg-color: hsl(var(--table-row-hover));
+  --el-fill-color-blank: transparent;
+  background: transparent;
+}
+
+.list-page-shell__content :deep(.el-table--border),
+.list-page-shell__content :deep(.el-table__inner-wrapper),
+.list-page-shell__content :deep(.el-table__header-wrapper),
+.list-page-shell__content :deep(.el-table__body-wrapper) {
+  border: none;
+}
+
+.list-page-shell__content :deep(.el-table__inner-wrapper::before),
+.list-page-shell__content :deep(.el-table--border::before),
+.list-page-shell__content :deep(.el-table--border::after) {
+  display: none;
+}
+
+.list-page-shell__content :deep(.el-table th.el-table__cell) {
+  padding: 12px 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: hsl(var(--text-strong));
+  background: hsl(var(--table-header-bg) / 0.86);
+  border-bottom: 1px solid hsl(var(--divider-faint) / 0.38);
+}
+
+.list-page-shell__content :deep(.el-table th.el-table__cell:first-child) {
+  border-top-left-radius: 12px;
+}
+
+.list-page-shell__content :deep(.el-table th.el-table__cell:last-child) {
+  border-top-right-radius: 12px;
+}
+
+.list-page-shell__content :deep(.el-table td.el-table__cell),
+.list-page-shell__content :deep(.el-table--border .el-table__cell) {
+  padding: 14px 0;
+  border-right: none;
+  border-bottom: 1px solid hsl(var(--divider-faint) / 0.46);
+}
+
+.list-page-shell__content :deep(.el-table__row:hover > td.el-table__cell) {
+  background: hsl(var(--table-row-hover)) !important;
+}
+
+.list-page-shell__content :deep(.el-tag) {
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.list-page-shell__content :deep(.el-pagination) {
+  padding: 0 2px;
+}
+
+.list-page-shell__content :deep(.el-pagination button),
+.list-page-shell__content :deep(.el-pager li) {
+  border-radius: 10px;
+}
+
+.list-page-shell__toolbar :deep(.custom-header) {
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .list-page-shell {
+    gap: 12px;
+  }
+
+  .list-page-shell__toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 2px 0 0;
+  }
+
+  .list-page-shell__actions {
+    width: 100%;
+  }
+}
+</style>