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

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

easyflow-ui-admin/app/src/views/config/apikey/SysApiKey.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-import { ElDialog } from 'element-plus';
+import { EasyFlowPanelModal } from '@easyflow/common-ui';
 
 import SysApiKeyList from '#/views/config/apikey/SysApiKeyList.vue';
 import SysApiKeyResourcePermissionList from '#/views/config/apikey/SysApiKeyResourcePermissionList.vue';
@@ -11,14 +11,14 @@ const dialogVisible = ref(false);
 <template>
   <div class="sys-apikey-container">
     <SysApiKeyList />
-    <ElDialog
-      v-model="dialogVisible"
-      draggable
-      :close-on-click-modal="false"
-      align-center
+    <EasyFlowPanelModal
+      v-model:open="dialogVisible"
+      :centered="true"
+      width="xl"
+      :show-footer="false"
     >
       <SysApiKeyResourcePermissionList />
-    </ElDialog>
+    </EasyFlowPanelModal>
   </div>
 </template>
 

easyflow-ui-admin/app/src/views/config/apikey/SysApiKeyList.vue

@@ -3,10 +3,11 @@ import type { FormInstance } from 'element-plus';
 
 import { markRaw, ref } from 'vue';
 
+import { EasyFlowPanelModal } from '@easyflow/common-ui';
+
 import { Delete, MoreFilled, Plus } from '@element-plus/icons-vue';
 import {
   ElButton,
-  ElDialog,
   ElDropdown,
   ElDropdownItem,
   ElDropdownMenu,
@@ -19,6 +20,7 @@ import {
 
 import { api } from '#/api/request';
 import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
+import ListPageShell from '#/components/page/ListPageShell.vue';
 import PageData from '#/components/page/PageData.vue';
 import { $t } from '#/locales';
 import SysApiKeyResourcePermissionList from '#/views/config/apikey/SysApiKeyResourcePermissionList.vue';
@@ -112,13 +114,14 @@ function addNewApiKey() {
 <template>
   <div class="flex h-full flex-col gap-6 p-6">
     <SysApiKeyModal ref="saveDialog" @reload="reset" />
-    <HeaderSearch
-      :buttons="headerButtons"
-      @search="handleSearch"
-      @button-click="headerButtonClick"
-    />
-
-    <div class="bg-background border-border flex-1 rounded-lg border p-5">
+    <ListPageShell>
+      <template #filters>
+        <HeaderSearch
+          :buttons="headerButtons"
+          @search="handleSearch"
+          @button-click="headerButtonClick"
+        />
+      </template>
       <PageData
         ref="pageDataRef"
         page-url="/api/v1/sysApiKey/page"
@@ -188,14 +191,15 @@ function addNewApiKey() {
           </ElTable>
         </template>
       </PageData>
-    </div>
-    <ElDialog
-      v-model="dialogVisible"
+    </ListPageShell>
+    <EasyFlowPanelModal
+      v-model:open="dialogVisible"
       :title="$t('sysApiKeyResourcePermission.addPermission')"
-      draggable
-      :close-on-click-modal="false"
+      :centered="true"
+      width="xl"
+      :show-footer="false"
     >
       <SysApiKeyResourcePermissionList />
-    </ElDialog>
+    </EasyFlowPanelModal>
   </div>
 </template>

easyflow-ui-admin/app/src/views/config/apikey/SysApiKeyModal.vue

@@ -3,13 +3,13 @@ import type { FormInstance } from 'element-plus';
 
 import { onMounted, ref } from 'vue';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
 import {
   ElAlert,
-  ElButton,
   ElCheckbox,
   ElCheckboxGroup,
   ElDatePicker,
-  ElDialog,
   ElForm,
   ElFormItem,
   ElMessage,
@@ -157,21 +157,23 @@ defineExpose({
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    draggable
+  <EasyFlowFormModal
+    v-model:open="dialogVisible"
     :title="isAdd ? $t('button.add') : $t('button.edit')"
     :before-close="closeDialog"
-    :close-on-click-modal="false"
+    :confirm-loading="btnLoading"
+    :confirm-text="$t('button.save')"
+    :submitting="btnLoading"
     width="50%"
+    @confirm="save"
   >
     <ElForm
-      label-width="120px"
       ref="saveForm"
       :model="entity"
       status-icon
       :rules="rules"
-      class="form-container"
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact form-container"
     >
       <!-- 状态选择 -->
       <ElFormItem prop="status" :label="$t('sysApiKey.status')">
@@ -217,21 +219,7 @@ defineExpose({
         </ElCheckboxGroup>
       </ElFormItem>
     </ElForm>
-
-    <template #footer>
-      <ElButton @click="closeDialog">
-        {{ $t('button.cancel') }}
-      </ElButton>
-      <ElButton
-        type="primary"
-        @click="save"
-        :loading="btnLoading"
-        :disabled="btnLoading"
-      >
-        {{ $t('button.save') }}
-      </ElButton>
-    </template>
-  </ElDialog>
+  </EasyFlowFormModal>
 </template>
 
 <style scoped>

easyflow-ui-admin/app/src/views/config/apikey/SysApiKeyResourcePermissionList.vue

@@ -19,6 +19,7 @@ import {
 } from 'element-plus';
 
 import { api } from '#/api/request';
+import ListPageShell from '#/components/page/ListPageShell.vue';
 import PageData from '#/components/page/PageData.vue';
 import { $t } from '#/locales';
 
@@ -77,81 +78,83 @@ function remove(row: any) {
 <template>
   <div class="page-container !m-0 !pl-0">
     <SysApiKeyResourcePermissionModal ref="saveDialog" @reload="reset" />
-    <div class="flex items-center justify-between">
-      <ElForm ref="formRef" :inline="true" :model="formInline">
-        <ElFormItem prop="title" class="!mr-3">
-          <ElInput
-            v-model="formInline.title"
-            :placeholder="$t('sysApiKeyResourcePermission.title')"
-          />
-        </ElFormItem>
-        <ElFormItem>
-          <ElButton @click="search(formRef)" type="primary">
-            {{ $t('button.query') }}
+    <ListPageShell dense>
+      <template #filters>
+        <div class="flex items-center justify-between gap-4">
+          <ElForm ref="formRef" :inline="true" :model="formInline">
+            <ElFormItem prop="title" class="!mr-3">
+              <ElInput
+                v-model="formInline.title"
+                :placeholder="$t('sysApiKeyResourcePermission.title')"
+              />
+            </ElFormItem>
+            <ElFormItem>
+              <ElButton @click="search(formRef)" type="primary">
+                {{ $t('button.query') }}
+              </ElButton>
+              <ElButton @click="reset(formRef)">
+                {{ $t('button.reset') }}
+              </ElButton>
+            </ElFormItem>
+          </ElForm>
+          <ElButton @click="showDialog({})" type="primary">
+            <ElIcon class="mr-1">
+              <Plus />
+            </ElIcon>
+            {{ $t('button.add') }}
           </ElButton>
-          <ElButton @click="reset(formRef)">
-            {{ $t('button.reset') }}
-          </ElButton>
-        </ElFormItem>
-      </ElForm>
-      <div class="mb-5">
-        <ElButton @click="showDialog({})" type="primary">
-          <ElIcon class="mr-1">
-            <Plus />
-          </ElIcon>
-          {{ $t('button.add') }}
-        </ElButton>
-      </div>
-    </div>
-    <PageData
-      ref="pageDataRef"
-      page-url="/api/v1/sysApiKeyResourcePermission/page"
-      :page-size="10"
-    >
-      <template #default="{ pageList }">
-        <ElTable :data="pageList" border>
-          <ElTableColumn
-            prop="requestInterface"
-            :label="$t('sysApiKeyResourcePermission.requestInterface')"
-          >
-            <template #default="{ row }">
-              {{ row.requestInterface }}
-            </template>
-          </ElTableColumn>
-          <ElTableColumn
-            prop="title"
-            :label="$t('sysApiKeyResourcePermission.title')"
-          >
-            <template #default="{ row }">
-              {{ row.title }}
-            </template>
-          </ElTableColumn>
-          <ElTableColumn :label="$t('common.handle')" width="90" align="right">
-            <template #default="{ row }">
-              <div class="flex items-center gap-3">
-                <ElButton link type="primary" @click="showDialog(row)">
-                  {{ $t('button.edit') }}
-                </ElButton>
-
-                <ElDropdown>
-                  <ElButton link :icon="MoreFilled" />
-
-                  <template #dropdown>
-                    <ElDropdownMenu>
-                      <ElDropdownItem @click="remove(row)">
-                        <ElButton link :icon="Delete" type="danger">
-                          {{ $t('button.delete') }}
-                        </ElButton>
-                      </ElDropdownItem>
-                    </ElDropdownMenu>
-                  </template>
-                </ElDropdown>
-              </div>
-            </template>
-          </ElTableColumn>
-        </ElTable>
+        </div>
       </template>
-    </PageData>
+      <PageData
+        ref="pageDataRef"
+        page-url="/api/v1/sysApiKeyResourcePermission/page"
+        :page-size="10"
+      >
+        <template #default="{ pageList }">
+          <ElTable :data="pageList" border>
+            <ElTableColumn
+              prop="requestInterface"
+              :label="$t('sysApiKeyResourcePermission.requestInterface')"
+            >
+              <template #default="{ row }">
+                {{ row.requestInterface }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn
+              prop="title"
+              :label="$t('sysApiKeyResourcePermission.title')"
+            >
+              <template #default="{ row }">
+                {{ row.title }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn :label="$t('common.handle')" width="90" align="right">
+              <template #default="{ row }">
+                <div class="flex items-center gap-3">
+                  <ElButton link type="primary" @click="showDialog(row)">
+                    {{ $t('button.edit') }}
+                  </ElButton>
+
+                  <ElDropdown>
+                    <ElButton link :icon="MoreFilled" />
+
+                    <template #dropdown>
+                      <ElDropdownMenu>
+                        <ElDropdownItem @click="remove(row)">
+                          <ElButton link :icon="Delete" type="danger">
+                            {{ $t('button.delete') }}
+                          </ElButton>
+                        </ElDropdownItem>
+                      </ElDropdownMenu>
+                    </template>
+                  </ElDropdown>
+                </div>
+              </template>
+            </ElTableColumn>
+          </ElTable>
+        </template>
+      </PageData>
+    </ListPageShell>
   </div>
 </template>
 

easyflow-ui-admin/app/src/views/config/apikey/SysApiKeyResourcePermissionModal.vue

@@ -3,14 +3,9 @@ import type { FormInstance } from 'element-plus';
 
 import { onMounted, ref } from 'vue';
 
-import {
-  ElButton,
-  ElDialog,
-  ElForm,
-  ElFormItem,
-  ElInput,
-  ElMessage,
-} from 'element-plus';
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
+import { ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus';
 
 import { api } from '#/api/request';
 import { $t } from '#/locales';
@@ -73,19 +68,23 @@ function closeDialog() {
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    draggable
+  <EasyFlowFormModal
+    v-model:open="dialogVisible"
+    :closable="!btnLoading"
     :title="isAdd ? $t('button.add') : $t('button.edit')"
     :before-close="closeDialog"
-    :close-on-click-modal="false"
+    :confirm-loading="btnLoading"
+    :confirm-text="$t('button.save')"
+    :submitting="btnLoading"
+    @confirm="save"
   >
     <ElForm
-      label-width="120px"
       ref="saveForm"
       :model="entity"
       status-icon
       :rules="rules"
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
     >
       <ElFormItem
         prop="requestInterface"
@@ -97,20 +96,7 @@ function closeDialog() {
         <ElInput v-model.trim="entity.title" />
       </ElFormItem>
     </ElForm>
-    <template #footer>
-      <ElButton @click="closeDialog">
-        {{ $t('button.cancel') }}
-      </ElButton>
-      <ElButton
-        type="primary"
-        @click="save"
-        :loading="btnLoading"
-        :disabled="btnLoading"
-      >
-        {{ $t('button.save') }}
-      </ElButton>
-    </template>
-  </ElDialog>
+  </EasyFlowFormModal>
 </template>
 
 <style scoped></style>

easyflow-ui-admin/app/src/views/config/apikey/SysApiKeyResourcePermissionSelectModal.vue

@@ -1,24 +1,17 @@
 <script setup lang="ts">
 import type { FormInstance } from 'element-plus';
 
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 
-import {
-  ElButton,
-  ElDatePicker,
-  ElDialog,
-  ElForm,
-  ElFormItem,
-  ElMessage,
-} from 'element-plus';
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
+import { ElDatePicker, ElForm, ElFormItem, ElMessage } from 'element-plus';
 
 import { api } from '#/api/request';
 import DictSelect from '#/components/dict/DictSelect.vue';
 import { $t } from '#/locales';
 
 const emit = defineEmits(['reload']);
-// vue
-onMounted(() => {});
 defineExpose({
   openDialog,
 });
@@ -74,35 +67,26 @@ function closeDialog() {
   entity.value = {};
   dialogVisible.value = false;
 }
-const resourcePermissionList = ref([]);
-function getResourcePermissionList() {
-  api.get('/api/v1/sysApiKeyResourcePermission/list').then((res) => {
-    console.log('资源');
-    console.log(res);
-    if (res.errorCode === 0) {
-      resourcePermissionList.value = res.data;
-    }
-  });
-}
-onMounted(() => {
-  getResourcePermissionList();
-});
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    draggable
+  <EasyFlowFormModal
+    v-model:open="dialogVisible"
+    :closable="!btnLoading"
     :title="isAdd ? $t('button.add') : $t('button.edit')"
     :before-close="closeDialog"
-    :close-on-click-modal="false"
+    :confirm-loading="btnLoading"
+    :confirm-text="$t('button.save')"
+    :submitting="btnLoading"
+    @confirm="save"
   >
     <ElForm
-      label-width="120px"
       ref="saveForm"
       :model="entity"
       status-icon
       :rules="rules"
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
     >
       <ElFormItem prop="status" :label="$t('sysApiKey.status')">
         <DictSelect v-model="entity.status" dict-code="dataStatus" />
@@ -111,20 +95,7 @@ onMounted(() => {
         <ElDatePicker v-model="entity.expiredAt" type="datetime" />
       </ElFormItem>
     </ElForm>
-    <template #footer>
-      <ElButton @click="closeDialog">
-        {{ $t('button.cancel') }}
-      </ElButton>
-      <ElButton
-        type="primary"
-        @click="save"
-        :loading="btnLoading"
-        :disabled="btnLoading"
-      >
-        {{ $t('button.save') }}
-      </ElButton>
-    </template>
-  </ElDialog>
+  </EasyFlowFormModal>
 </template>
 
 <style scoped></style>