From 6d4328e6a9541d20bde1666253cb684abc4a3d0a Mon Sep 17 00:00:00 2001 From: jingrow Date: Sat, 1 Nov 2025 18:35:05 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96pagetype=E5=B7=A5=E5=85=B7?= =?UTF-8?q?=E6=A0=8F=E4=B8=BB=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE=E9=85=8D?= =?UTF-8?q?=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/core/pagetype/GenericDetailPage.vue | 76 ++++++++++++++- .../src/core/pagetype/GenericListPage.vue | 95 ++++++++++++++++--- .../src/core/pagetype/SinglePageDetail.vue | 76 ++++++++++++++- 3 files changed, 230 insertions(+), 17 deletions(-) diff --git a/apps/jingrow/frontend/src/core/pagetype/GenericDetailPage.vue b/apps/jingrow/frontend/src/core/pagetype/GenericDetailPage.vue index 6d534ee..4cc96c3 100644 --- a/apps/jingrow/frontend/src/core/pagetype/GenericDetailPage.vue +++ b/apps/jingrow/frontend/src/core/pagetype/GenericDetailPage.vue @@ -76,7 +76,7 @@ {{ t('Back') }} - + {{ t('Save') }} @@ -1631,6 +1631,80 @@ watch(() => route.params.entity, async (newEntity, oldEntity) => { justify-content: center; } +/* 保存按钮 - 使用柔和的品牌色系，与列表页创建按钮一致 */ +.save-btn-brand { + background: #e6f8f0 !important; + border: 1px solid #1fc76f !important; + color: #0d684b !important; +} + +.save-btn-brand :deep(.n-button__border) { + border: none !important; + border-color: transparent !important; +} + +.save-btn-brand :deep(.n-button__state-border) { + border: none !important; + border-color: transparent !important; +} + +.save-btn-brand:hover { + background: #dcfce7 !important; + border-color: #1fc76f !important; + border: 1px solid #1fc76f !important; + color: #166534 !important; + box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15) !important; +} + +.save-btn-brand:hover :deep(.n-button__border), +.save-btn-brand:hover :deep(.n-button__state-border) { + border: none !important; + border-color: transparent !important; +} + +.save-btn-brand:focus { + background: #dcfce7 !important; + border-color: #1fc76f !important; + border: 1px solid #1fc76f !important; + color: #166534 !important; + box-shadow: 0 0 0 2px rgba(31, 199, 111, 0.2) !important; +} + +.save-btn-brand:focus :deep(.n-button__border), +.save-btn-brand:focus :deep(.n-button__state-border) { + border: none !important; + border-color: transparent !important; +} + +.save-btn-brand:active { + background: #1fc76f !important; + border-color: #1fc76f !important; + border: 1px solid #1fc76f !important; + color: white !important; + box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2) !important; +} + +.save-btn-brand:active :deep(.n-button__border), +.save-btn-brand:active :deep(.n-button__state-border) { + border: none !important; + border-color: transparent !important; +} + +.save-btn-brand:disabled { + background: #f1f5f9 !important; + border: 1px solid #e2e8f0 !important; + border-color: #e2e8f0 !important; + color: #94a3b8 !important; + opacity: 0.6 !important; + cursor: not-allowed !important; +} + +.save-btn-brand:disabled :deep(.n-button__border), +.save-btn-brand:disabled :deep(.n-button__state-border) { + border: none !important; + border-color: transparent !important; +} + /* 响应式设计 - Naive UI Layout 自动处理 */ @media (max-width: 768px) { .generic-detail-page { diff --git a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue index 96626e4..ba9dd28 100644 --- a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue +++ b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue @@ -1534,14 +1534,38 @@ function formatDisplayValue(value: any, fieldName: string) { .filters { display: flex; gap: 8px; align-items: center; } /* 视图切换按钮 */ -.view-toggle { display: flex; background: #f8fafc; border-radius: 8px; padding: 2px; border: 1px solid #e2e8f0; } -.toggle-btn { - width: 32px; height: 32px; border: none; Background: transparent; color: #64748b; - cursor: pointer; display: flex; align-items: center; justify-content: center; - border-radius: 6px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +.view-toggle { + display: flex; + background: #f8fafc; + border-radius: 8px; + padding: 2px; + border: 1px solid #e2e8f0; +} + +/* 切换按钮 - 使用灰色系 */ +.toggle-btn { + width: 32px; + height: 32px; + border: none; + background: transparent; + color: #6b7280; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +.toggle-btn:hover { + background: #f1f5f9; + color: #475569; +} + +.toggle-btn.active { + background: #e2e8f0; + color: #1e293b; } -.toggle-btn:hover { background: #e2e8f0; color: #475569; } -.toggle-btn.active { background: #2563eb; color: white; } /* 刷新按钮 */ .refresh-btn { @@ -1555,16 +1579,57 @@ function formatDisplayValue(value: any, fieldName: string) { .refresh-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } .refresh-btn:disabled:hover { background: #f8fafc; color: #64748b; transform: none; box-shadow: none; } -/* 新建按钮 */ +/* 新建按钮 - 使用柔和的品牌色系，与整体风格协调 */ .create-btn { - height: 36px; padding: 0 16px; border: none; border-radius: 8px; background: #2563eb; - color: white; cursor: pointer; display: flex; align-items: center; gap: 6px; - font-size: 14px; font-weight: 500; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; overflow: hidden; + height: 36px; + padding: 0 16px; + border: 1px solid #1fc76f; + border-radius: 8px; + background: #e6f8f0; + color: #0d684b; + cursor: pointer; + display: flex; + align-items: center; + gap: 6px; + font-size: 14px; + font-weight: 500; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; +} +.create-btn:hover { + background: #dcfce7; + border-color: #1fc76f; + color: #166534; + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15); +} +.create-btn:active { + background: #1fc76f; + border-color: #1fc76f; + color: white; + transform: translateY(0); + box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2); +} +.create-btn:disabled { + background: #f1f5f9; + border-color: #e2e8f0; + color: #94a3b8; + opacity: 0.6; + cursor: not-allowed; + transform: none; + box-shadow: none; +} +.create-btn:disabled:hover { + background: #f1f5f9; + border-color: #e2e8f0; + color: #94a3b8; + transform: none; + box-shadow: none; +} +.create-btn i { + font-size: 12px; } -.create-btn:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); } -.create-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3); } -.create-btn i { font-size: 12px; } /* 删除选中按钮 */ .delete-btn { diff --git a/apps/jingrow/frontend/src/core/pagetype/SinglePageDetail.vue b/apps/jingrow/frontend/src/core/pagetype/SinglePageDetail.vue index 7756500..5bc01f6 100644 --- a/apps/jingrow/frontend/src/core/pagetype/SinglePageDetail.vue +++ b/apps/jingrow/frontend/src/core/pagetype/SinglePageDetail.vue @@ -14,7 +14,7 @@ {{ t('Back') }} - + {{ t('Save') }} @@ -1143,4 +1143,78 @@ watch(() => route.params.entity, async (newEntity, oldEntity) => { padding: 12px; min-height: 40px; } + +/* 保存按钮 - 使用柔和的品牌色系，与列表页创建按钮一致 */ +.save-btn-brand { + background: #e6f8f0 !important; + border: 1px solid #1fc76f !important; + color: #0d684b !important; +} + +.save-btn-brand :deep(.n-button__border) { + border: none !important; + border-color: transparent !important; +} + +.save-btn-brand :deep(.n-button__state-border) { + border: none !important; + border-color: transparent !important; +} + +.save-btn-brand:hover { + background: #dcfce7 !important; + border-color: #1fc76f !important; + border: 1px solid #1fc76f !important; + color: #166534 !important; + box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15) !important; +} + +.save-btn-brand:hover :deep(.n-button__border), +.save-btn-brand:hover :deep(.n-button__state-border) { + border: none !important; + border-color: transparent !important; +} + +.save-btn-brand:focus { + background: #dcfce7 !important; + border-color: #1fc76f !important; + border: 1px solid #1fc76f !important; + color: #166534 !important; + box-shadow: 0 0 0 2px rgba(31, 199, 111, 0.2) !important; +} + +.save-btn-brand:focus :deep(.n-button__border), +.save-btn-brand:focus :deep(.n-button__state-border) { + border: none !important; + border-color: transparent !important; +} + +.save-btn-brand:active { + background: #1fc76f !important; + border-color: #1fc76f !important; + border: 1px solid #1fc76f !important; + color: white !important; + box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2) !important; +} + +.save-btn-brand:active :deep(.n-button__border), +.save-btn-brand:active :deep(.n-button__state-border) { + border: none !important; + border-color: transparent !important; +} + +.save-btn-brand:disabled { + background: #f1f5f9 !important; + border: 1px solid #e2e8f0 !important; + border-color: #e2e8f0 !important; + color: #94a3b8 !important; + opacity: 0.6 !important; + cursor: not-allowed !important; +} + +.save-btn-brand:disabled :deep(.n-button__border), +.save-btn-brand:disabled :deep(.n-button__state-border) { + border: none !important; + border-color: transparent !important; +}