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

apps/jingrow/frontend/src/core/pagetype/GenericDetailPage.vue

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

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; }
+.view-toggle { 
-.toggle-btn { 
+  display: flex; 
-  width: 32px; height: 32px; border: none; Background: transparent; color: #64748b; 
+  background: #f8fafc; 
-  cursor: pointer; display: flex; align-items: center; justify-content: center; 
+  border-radius: 8px; 
-  border-radius: 6px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
+  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;
+  height: 36px; 
-  color: white; cursor: pointer; display: flex; align-items: center; gap: 6px;
+  padding: 0 16px; 
-  font-size: 14px; font-weight: 500; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid #1fc76f; 
-  position: relative; overflow: hidden;
+  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 {

apps/jingrow/frontend/src/core/pagetype/SinglePageDetail.vue

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