From 98f705de8bcd8aa9b8ff4ccf8129e9584282b55d Mon Sep 17 00:00:00 2001 From: zhang1106 <849185023@qq.com> Date: Tue, 10 Mar 2026 13:12:29 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E5=89=8D=E7=AB=AF=E6=A0=B7=E5=BC=8F):?= =?UTF-8?q?=20=E4=BC=98=E5=8C=96=E9=A1=B9=E7=9B=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.jsx | 7 +- frontend/src/index.css | 136 +++++++++++-------- frontend/src/pages/DeviceFieldManagement.jsx | 8 +- 3 files changed, 84 insertions(+), 67 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index cf3b870..4db2adf 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -539,12 +539,7 @@ const AppLayout = ({ children }) => { danger icon={} onClick={handleLogout} - style={{ - padding: '8px 12px', - height: 'auto', - borderRadius: designTokens.borderRadius.small, - fontSize: 13, - }} + className="logout-btn" > 退出 diff --git a/frontend/src/index.css b/frontend/src/index.css index 869e96a..e238f85 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -139,24 +139,6 @@ body { background: #f0f7ff; } -.ant-btn { - border-radius: 6px; - font-weight: 500; - transition: all 0.3s ease; -} - -.ant-btn-primary { - background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); - border: none; - box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3); -} - -.ant-btn-primary:hover { - background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%); - box-shadow: 0 4px 8px rgba(24, 144, 255, 0.4); - transform: translateY(-1px); -} - .ant-input, .ant-select-selector, .ant-picker { @@ -346,76 +328,67 @@ body { } .ant-btn { - border-radius: 8px !important; - font-weight: 500 !important; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; - height: 40px !important; - padding: 0 20px !important; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; + border-radius: 8px; + font-weight: 500; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .ant-btn-primary { - background: var(--primary-gradient) !important; - border: none !important; - box-shadow: 0 2px 6px rgba(24, 144, 255, 0.35) !important; + background: var(--primary-gradient); + border: none; + box-shadow: 0 2px 6px rgba(24, 144, 255, 0.35); } .ant-btn-primary:hover { - background: var(--primary-gradient) !important; - box-shadow: 0 4px 12px rgba(24, 144, 255, 0.45) !important; - transform: translateY(-2px) !important; + background: var(--primary-gradient); + box-shadow: 0 4px 12px rgba(24, 144, 255, 0.45); } .ant-btn-primary:active { - background: var(--primary-gradient) !important; - box-shadow: 0 2px 6px rgba(24, 144, 255, 0.35) !important; - transform: translateY(0) !important; + background: var(--primary-gradient); + box-shadow: 0 2px 6px rgba(24, 144, 255, 0.35); } .ant-btn-default { - border-color: #d9d9d9 !important; - background: #fff !important; + border-color: #d9d9d9; + background: #fff; } .ant-btn-default:hover { - border-color: #40a9ff !important; - color: #40a9ff !important; - box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15) !important; + border-color: #40a9ff; + color: #40a9ff; + box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15); } .ant-btn-dashed { - border-color: #d9d9d9 !important; - border-style: dashed !important; + border-color: #d9d9d9; + border-style: dashed; } .ant-btn-dashed:hover { - border-color: #40a9ff !important; - color: #40a9ff !important; + border-color: #40a9ff; + color: #40a9ff; } .ant-btn-text { - border-radius: 8px !important; + border-radius: 8px; } .ant-btn-text:hover { - background: rgba(24, 144, 255, 0.08) !important; - color: #1890ff !important; + background: rgba(24, 144, 255, 0.08); + color: #1890ff; } .ant-btn-link { - border-radius: 8px !important; - height: auto !important; - padding: 0 !important; + border-radius: 8px; } .ant-btn-link:hover { - color: #40a9ff !important; + color: #40a9ff; } .ant-btn-group .ant-btn { - border-radius: 6px !important; + border-radius: 6px; } .ant-form-item-label > label { @@ -613,20 +586,21 @@ body { .ant-modal-content { border-radius: 12px !important; - overflow: hidden !important; + overflow: visible !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important; } +.ant-modal-body { + padding: 24px !important; + overflow: hidden !important; +} + .ant-modal-header { border-radius: 12px 12px 0 0 !important; padding: 16px 24px !important; border-bottom: 1px solid #f0f0f0 !important; } -.ant-modal-body { - padding: 24px !important; -} - .ant-modal-footer { border-radius: 0 0 12px 12px !important; border-top: 1px solid #f0f0f0 !important; @@ -896,3 +870,51 @@ body { color: rgba(255, 255, 255, 0.9); margin: 0; } + +.logout-btn { + height: 40px !important; + padding: 0 16px !important; + border-radius: 8px !important; + font-size: 13px !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 6px !important; +} + +.logout-btn:hover { + background: rgba(255, 77, 79, 0.08) !important; + color: #ff4d4f !important; +} + +.page-primary-btn { + height: 36px !important; + padding: 0 16px !important; + border-radius: 6px !important; + font-size: 13px !important; + display: inline-flex !important; + align-items: center !important; + gap: 4px !important; +} + +.table-action-btn { + height: 28px !important; + padding: 0 8px !important; + border-radius: 6px !important; + font-size: 13px !important; + display: inline-flex !important; + align-items: center !important; + gap: 4px !important; +} + +.table-action-btn-disabled { + height: 28px !important; + padding: 0 8px !important; + border-radius: 6px !important; + font-size: 13px !important; + display: inline-flex !important; + align-items: center !important; + gap: 4px !important; + opacity: 0.3 !important; + cursor: not-allowed !important; +} diff --git a/frontend/src/pages/DeviceFieldManagement.jsx b/frontend/src/pages/DeviceFieldManagement.jsx index 987ea68..b187fd7 100644 --- a/frontend/src/pages/DeviceFieldManagement.jsx +++ b/frontend/src/pages/DeviceFieldManagement.jsx @@ -439,7 +439,7 @@ function DeviceFieldManagement() { type="text" icon={} onClick={() => showModal(record)} - style={editButtonStyle} + className="table-action-btn" > 编辑 @@ -450,7 +450,7 @@ function DeviceFieldManagement() { danger icon={} disabled - style={{ ...deleteButtonStyle, opacity: 0.3, cursor: 'not-allowed' }} + className="table-action-btn-disabled" > 删除 @@ -461,7 +461,7 @@ function DeviceFieldManagement() { danger icon={} onClick={() => handleDelete(record.fieldId)} - style={deleteButtonStyle} + className="table-action-btn" > 删除 @@ -484,7 +484,7 @@ function DeviceFieldManagement() { type="primary" icon={} onClick={() => showModal()} - style={primaryActionStyle} + className="page-primary-btn" > 添加字段