jingrowlocal/jingrow-framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化pagetype工具栏主操作按钮配色

Browse Source
This commit is contained in:
jingrow 2025-11-01 18:35:05 +08:00
parent 61ea5cb547
commit 6d4328e6a9
3 changed files with 230 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
apps/jingrow/frontend/src/core/pagetype/GenericDetailPage.vue
View File

@ -76,7 +76,7 @@
</template>
{{ t('Back') }}
</n-button>
<n-button type="primary" size="medium" :disabled="loading" @click="handleSave" v-if="canEdit">
<n-button type="primary" size="medium" :disabled="loading" @click="handleSave" v-if="canEdit" class="save-btn-brand">
{{ t('Save') }}
</n-button>
</n-space>
@ -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 {

95
apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
View File

@ -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 {

76
apps/jingrow/frontend/src/core/pagetype/SinglePageDetail.vue
View File

@ -14,7 +14,7 @@
</template>
{{ t('Back') }}
</n-button>
<n-button type="primary" :disabled="loading" @click="handleSave" v-if="canEdit">
<n-button type="primary" :disabled="loading" @click="handleSave" v-if="canEdit" class="save-btn-brand">
{{ t('Save') }}
</n-button>
</n-space>
@ -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;
}
</style>