马一丁

Beautify the print button

@@ -488,7 +488,14 @@ class HTMLRenderer: @@ -488,7 +488,14 @@ class HTMLRenderer:
488 </div> 488 </div>
489 <div class="header-actions"> 489 <div class="header-actions">
490 <theme-button value="light" id="theme-toggle" size="1.5"></theme-button> 490 <theme-button value="light" id="theme-toggle" size="1.5"></theme-button>
491 - <button id="print-btn" class="action-btn" type="button">打印页面</button> 491 + <button id="print-btn" class="action-btn print-btn" type="button">
  492 + <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  493 + <polyline points="6 9 6 2 18 2 18 9"></polyline>
  494 + <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
  495 + <rect x="6" y="14" width="12" height="8"></rect>
  496 + </svg>
  497 + <span>打印页面</span>
  498 + </button>
492 <button id="export-btn" class="action-btn" type="button" style="display: none;">⬇️ 导出PDF</button> 499 <button id="export-btn" class="action-btn" type="button" style="display: none;">⬇️ 导出PDF</button>
493 </div> 500 </div>
494 </header> 501 </header>
@@ -3235,22 +3242,72 @@ theme-button {{ @@ -3235,22 +3242,72 @@ theme-button {{
3235 margin: 0; 3242 margin: 0;
3236 }} 3243 }}
3237 .action-btn {{ 3244 .action-btn {{
  3245 + --mouse-x: 50%;
  3246 + --mouse-y: 50%;
3238 border: none; 3247 border: none;
3239 - border-radius: 6px;  
3240 - background: var(--primary-color); 3248 + border-radius: 10px;
  3249 + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
3241 color: #fff; 3250 color: #fff;
3242 - padding: 10px 16px; 3251 + padding: 11px 22px;
3243 cursor: pointer; 3252 cursor: pointer;
3244 - font-size: 0.95rem;  
3245 - transition: transform 0.2s ease;  
3246 - min-width: 160px; 3253 + font-size: 0.92rem;
  3254 + font-weight: 600;
  3255 + letter-spacing: 0.025em;
  3256 + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  3257 + min-width: 140px;
3247 white-space: nowrap; 3258 white-space: nowrap;
3248 display: inline-flex; 3259 display: inline-flex;
3249 align-items: center; 3260 align-items: center;
3250 justify-content: center; 3261 justify-content: center;
  3262 + gap: 10px;
  3263 + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  3264 + position: relative;
  3265 + overflow: hidden;
  3266 +}}
  3267 +.action-btn::before {{
  3268 + content: '';
  3269 + position: absolute;
  3270 + top: 0;
  3271 + left: 0;
  3272 + width: 100%;
  3273 + height: 100%;
  3274 + background: linear-gradient(to bottom, rgba(255,255,255,0.12), transparent);
  3275 + opacity: 0;
  3276 + transition: opacity 0.35s ease;
  3277 +}}
  3278 +.action-btn::after {{
  3279 + content: '';
  3280 + position: absolute;
  3281 + top: var(--mouse-y);
  3282 + left: var(--mouse-x);
  3283 + width: 0;
  3284 + height: 0;
  3285 + background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
  3286 + border-radius: 50%;
  3287 + transform: translate(-50%, -50%);
  3288 + transition: width 0.45s ease-out, height 0.45s ease-out;
  3289 + pointer-events: none;
3251 }} 3290 }}
3252 .action-btn:hover {{ 3291 .action-btn:hover {{
3253 - transform: translateY(-1px); 3292 + transform: translateY(-2px);
  3293 + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.1);
  3294 +}}
  3295 +.action-btn:hover::before {{
  3296 + opacity: 1;
  3297 +}}
  3298 +.action-btn:hover::after {{
  3299 + width: 280%;
  3300 + height: 280%;
  3301 +}}
  3302 +.action-btn:active {{
  3303 + transform: translateY(0) scale(0.98);
  3304 + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  3305 +}}
  3306 +.action-btn .btn-icon {{
  3307 + width: 18px;
  3308 + height: 18px;
  3309 + flex-shrink: 0;
  3310 + filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
3254 }} 3311 }}
3255 body.exporting {{ 3312 body.exporting {{
3256 cursor: progress; 3313 cursor: progress;
@@ -6015,6 +6072,20 @@ document.addEventListener('DOMContentLoaded', () => { @@ -6015,6 +6072,20 @@ document.addEventListener('DOMContentLoaded', () => {
6015 if (printBtn) { 6072 if (printBtn) {
6016 printBtn.addEventListener('click', () => window.print()); 6073 printBtn.addEventListener('click', () => window.print());
6017 } 6074 }
  6075 + // 为所有 action-btn 添加鼠标追踪光晕效果
  6076 + document.querySelectorAll('.action-btn').forEach(btn => {
  6077 + btn.addEventListener('mousemove', (e) => {
  6078 + const rect = btn.getBoundingClientRect();
  6079 + const x = ((e.clientX - rect.left) / rect.width) * 100;
  6080 + const y = ((e.clientY - rect.top) / rect.height) * 100;
  6081 + btn.style.setProperty('--mouse-x', x + '%');
  6082 + btn.style.setProperty('--mouse-y', y + '%');
  6083 + });
  6084 + btn.addEventListener('mouseleave', () => {
  6085 + btn.style.setProperty('--mouse-x', '50%');
  6086 + btn.style.setProperty('--mouse-y', '50%');
  6087 + });
  6088 + });
6018 const exportBtn = document.getElementById('export-btn'); 6089 const exportBtn = document.getElementById('export-btn');
6019 if (exportBtn) { 6090 if (exportBtn) {
6020 exportBtn.addEventListener('click', exportPdf); 6091 exportBtn.addEventListener('click', exportPdf);