From cacbb71dfea9a5499f902e42547548b2b9b88b15 Mon Sep 17 00:00:00 2001 From: xingguishuai Date: Wed, 26 Mar 2025 13:02:50 +0800 Subject: [PATCH] fix pr question --- .cursor/rules/ob-rules.mdc | 9 ++ main.css | 2 +- main.ts | 200 ++++--------------------------------- styles.css | 110 ++++++++++---------- 4 files changed, 91 insertions(+), 230 deletions(-) create mode 100644 .cursor/rules/ob-rules.mdc diff --git a/.cursor/rules/ob-rules.mdc b/.cursor/rules/ob-rules.mdc new file mode 100644 index 0000000..27f7b3b --- /dev/null +++ b/.cursor/rules/ob-rules.mdc @@ -0,0 +1,9 @@ +--- +description: +globs: +alwaysApply: true +--- + +# Your rule content + +1. You should avoid assigning styles via JavaScript or in HTML and instead move all these styles into CSS so that they are more easily adaptable by themes and snippets diff --git a/main.css b/main.css index 4c5a3ec..29b55b4 100644 --- a/main.css +++ b/main.css @@ -1 +1 @@ -.modal{max-width:90vw;max-height:90vh;display:flex;flex-direction:column;min-width:400px;transition:width .3s ease,height .3s ease;background-color:#121212;border-radius:0}.image-share-modal{max-width:2000px;max-height:2000px;transition:width .3s ease,height .3s ease;animation:modal-in .3s ease;background-color:#121212;border:none;border-radius:0;box-shadow:0 10px 30px #00000080}.image-share-modal .resizable-container{position:relative;width:100%;height:100%;background:#121212;border-radius:0;box-shadow:none;overflow:hidden;transition:box-shadow .3s ease;display:flex;flex-direction:row;border:none}.theme-dark .image-share-modal .resizable-container{box-shadow:none}.image-share-modal .controls-panel{min-width:280px;width:280px;padding:0;border-right:1px solid var(--background-modifier-border);display:flex;flex-direction:column;gap:0;background:#181818;overflow-y:auto;overflow-x:hidden;height:100%;max-height:100%;color:#e0e0e0}.image-share-modal .controls-panel h2{background-color:#181818;margin:0;padding:20px;border-bottom:1px solid rgba(255,255,255,.1);text-align:center;color:#fff;font-size:1.2em;font-weight:500;letter-spacing:.02em}.image-share-modal .flex-spacer{flex-grow:1;min-height:20px}.image-share-modal .control-section{display:flex;flex-direction:column;gap:16px;padding:20px;border-bottom:1px solid rgba(255,255,255,.1)}.image-share-modal .control-section:last-child{border-bottom:none;padding-bottom:20px}.image-share-modal .download-section{margin-top:0}.image-share-modal .preview-panel{flex:1;display:flex;flex-direction:column;padding:0;overflow:hidden;background-color:#121212;position:relative;height:100%}.image-share-modal .preview-panel h2{margin:0;padding:20px;color:#fff;font-size:1.2em;font-weight:500;text-align:center;position:sticky;top:0;background-color:#121212;z-index:5;border-bottom:1px solid rgba(255,255,255,.1)}.image-share-modal .resize-handle{position:absolute;right:0;bottom:0;width:20px;height:20px;cursor:se-resize;background:var(--interactive-accent);clip-path:polygon(100% 0,100% 100%,0 100%);opacity:.6;transition:opacity .2s ease}.image-share-modal .resize-handle:hover{opacity:1}.image-share-modal .header{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--background-modifier-border)}.image-share-modal .image-preview-container{height:100%;display:flex;flex-direction:column;box-sizing:border-box;gap:16px;position:relative;width:100%;font-size:16px;line-height:2;letter-spacing:.05em}.image-share-modal .canvas-container{display:flex;justify-content:center;align-items:flex-start;padding:20px;background:#121212;border-radius:0;min-height:200px;width:100%;flex:1;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;transition:background-color .3s ease}.image-share-modal h2{margin:0 0 16px;color:var(--text-normal);font-size:1.4em;font-weight:600;padding:4px 0;text-align:center;letter-spacing:.02em}.image-share-modal .section-title{font-size:1em;font-weight:500;margin:0 0 8px;color:#aaa;opacity:.9}.image-share-modal canvas{height:auto;border-radius:0;box-shadow:0 2px 12px #0003;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;transform:translateZ(0);backface-visibility:hidden;min-width:auto;min-height:auto;transition:width .3s ease,height .3s ease;transform-origin:top left}.image-share-modal .template-selector{display:flex;flex-direction:column;gap:12px;width:100%}.image-share-modal .template-button{padding:12px 16px;border:none;border-radius:8px;background:#252525;color:#e0e0e0;cursor:pointer;transition:all .2s ease;font-size:14px;font-weight:500;box-shadow:0 2px 4px #0003;display:flex;align-items:center;gap:8px;text-align:left}.image-share-modal .template-button svg{min-width:16px;color:#aaa}.image-share-modal .template-button:hover{background:#303030;transform:translateY(-2px);box-shadow:0 4px 8px #00000040}.image-share-modal .template-button.active{background:#7c5ef2;color:#fff;box-shadow:0 2px 8px #7c5ef266}.image-share-modal .template-button.active svg{color:#fff}.image-preview-container .markdown-preview-view{padding:24px}.text-preview-modal .text-preview-container{display:flex;flex-direction:column;height:100%}.text-preview-modal .preview-container{flex:1;overflow-y:auto;margin-bottom:16px}.text-preview-modal .button-container{display:flex;justify-content:center;padding:8px 0;border-top:1px solid var(--background-modifier-border)}.text-preview-modal .button-container button{padding:8px 16px}.elegant-download-button{width:100%;height:48px;border-radius:8px;background-color:#7c5ef2;box-shadow:0 4px 12px #7c5ef24d;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.25,.8,.25,1);z-index:10;gap:8px;color:#fff;font-weight:500}.elegant-download-button:hover{background-color:#8f74f3;box-shadow:0 6px 16px #7c5ef266;transform:translateY(-2px)}.elegant-download-button svg{color:#fff;width:20px;height:20px}.elegant-download-button.clicked{transform:scale(.98);box-shadow:0 2px 8px #7c5ef233}.theme-dark .elegant-download-button{background-color:var(--interactive-accent)}.theme-dark .elegant-download-button:hover{background-color:var(--interactive-accent-hover)}.theme-dark .elegant-download-button svg{color:var(--text-on-accent)}.image-share-modal .zoom-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:0;padding:12px 16px;background:#252525;border-radius:8px;width:100%}.image-share-modal .zoom-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:none;background:#181818;color:#aaa;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000004d}.image-share-modal .zoom-button:hover{background:#7c5ef2;color:#fff;transform:translateY(-2px);box-shadow:0 3px 6px #0000004d}.image-share-modal .zoom-text{font-size:14px;font-weight:600;color:#e0e0e0;width:50px;text-align:center;user-select:none}.download-toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%);padding:12px 20px;background-color:#252525;color:#e0e0e0;border-radius:8px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 16px #0000004d;z-index:1000;animation:toast-in .3s ease forwards}.download-toast svg{width:20px;height:20px;color:#7c5ef2}.download-toast span{font-size:14px;font-weight:500}.download-toast.hide{animation:toast-out .3s ease forwards}@keyframes toast-in{0%{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%);opacity:1}}@keyframes toast-out{0%{transform:translate(-50%);opacity:1}to{transform:translate(-50%,20px);opacity:0}}.theme-dark .image-share-modal .canvas-container{background:#121212;box-shadow:none}@keyframes modal-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.theme-dark .image-share-modal .preview-panel{background-color:#121212}.image-share-modal .buttons-container{display:flex;gap:12px;width:100%}.image-share-modal .buttons-container.vertical{flex-direction:column;gap:16px}.elegant-button{flex:1;height:48px;border-radius:8px;background-color:#7c5ef2;box-shadow:0 4px 12px #7c5ef24d;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.25,.8,.25,1);z-index:10;gap:8px;color:#fff;font-weight:500}.elegant-button:hover{background-color:#8f74f3;box-shadow:0 6px 16px #7c5ef266;transform:translateY(-2px)}.elegant-button svg{color:#fff;width:20px;height:20px}.elegant-button.clicked{transform:scale(.98);box-shadow:0 2px 8px #7c5ef233}.elegant-button.copy-button{background-color:#2d9e6d;box-shadow:0 4px 12px #2d9e6d4d}.elegant-button.copy-button:hover{background-color:#33b97e;box-shadow:0 6px 16px #2d9e6d66}.elegant-button.copy-button.clicked{box-shadow:0 2px 8px #2d9e6d33}.elegant-button.download-button{background-color:#7c5ef2;box-shadow:0 4px 12px #7c5ef24d}.temp-markdown-container{position:absolute;left:-9999px;box-sizing:border-box;word-break:break-word;overflow-wrap:break-word;word-wrap:break-word;hyphens:auto;font-family:PingFang SC,Microsoft YaHei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif;height:auto;padding:24px}.temp-markdown-container.light-theme{background:#f8f9fc;color:#2c3e50}.temp-markdown-container.dark-theme{background:#2d3436;color:#e2e2e2}.temp-date-metadata{font-size:13px;margin-bottom:20px}.temp-date-metadata.light-theme{color:#666}.temp-date-metadata.dark-theme{color:#999}.enhanced-text-rendering{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:visible}.zoom-out-icon,.zoom-in-icon,.download-icon,.copy-icon,.light-template-icon,.dark-template-icon{display:inline-block}.modal-layout{display:flex;flex-direction:column}.modal-content-layout{width:100%;height:100%;display:flex;flex-direction:column}.canvas-preview{max-width:none;transition:width .3s ease}.markdown-style-base{font-size:16px;line-height:2em;letter-spacing:.12em}.markdown-style-base p{margin:1.8em 5px!important;padding:.2em 0}.markdown-style-base li{margin:12px 0;line-height:1.8em}.markdown-style-base h1,.markdown-style-base h2,.markdown-style-base h3,.markdown-style-base h4,.markdown-style-base h5,.markdown-style-base h6{margin:28px 0 18px!important;padding:.6em 1em!important;line-height:1.5em}.markdown-style-base blockquote,.markdown-style-base q{padding:10px 15px;margin:15px 0;line-height:1.8em}.markdown-style-base ul,.markdown-style-base ol{padding-left:25px;margin:15px 5px}.markdown-style-base pre{margin:15px 0;padding:12px;line-height:1.5em}.markdown-style-base .markdown-preview-sizer{padding:10px 5px}.markdown-style-base pre,.markdown-style-base code{font-size:14px;font-family:Roboto,Courier New,Consolas,Inconsolata,Courier,monospace;margin:auto 5px}.markdown-style-base code{white-space:pre-wrap;border-radius:2px;display:inline}.markdown-style-base pre{font-size:15px;line-height:1.4em;display:block!important}.markdown-style-base pre code{white-space:pre;overflow:auto;border-radius:3px;padding:1px;display:block!important}.markdown-style-base table{padding:0;border-collapse:collapse;border-spacing:0;font-size:1em;font:inherit;border:0;margin:0 auto}.markdown-style-base tbody{margin:0;padding:0;border:0}.markdown-style-base table tr{border:0;border-top:1px solid #CCC;background-color:#fff;margin:0;padding:0}.markdown-style-base table tr:nth-child(2n){background-color:#f8f8f8}.markdown-style-base table tr th,.markdown-style-base table tr td{font-size:16px;border:1px solid #CCC;margin:0;padding:5px 10px}.markdown-style-default strong,.markdown-style-default b{color:#bf360c}.markdown-style-default em,.markdown-style-default i{color:#009688}.markdown-style-default hr{border:1px solid #BF360C;margin:1.5em auto}.markdown-style-default blockquote,.markdown-style-default q{border-left:2px solid #009688;padding:0 10px;color:#777;quotes:none;margin-left:1em}.markdown-style-default h1,.markdown-style-default h2,.markdown-style-default h3,.markdown-style-default h4,.markdown-style-default h5,.markdown-style-default h6{font-style:bold!important;color:#009688!important;text-align:center!important;margin:1.5em 5px!important;padding:.5em 1em!important}.markdown-style-default h1{font-size:24px!important;border-bottom:1px solid #ddd!important}.markdown-style-default h2{font-size:20px!important;border-bottom:1px solid #eee!important}.markdown-style-default h3{font-size:18px}.markdown-style-default h4{font-size:16px}.markdown-style-default table tr th{font-weight:700;color:#eee;border:1px solid #009688;background-color:#009688}.markdown-style-modern strong,.markdown-style-modern b{color:#e91e63}.markdown-style-modern em,.markdown-style-modern i{color:#2196f3}.markdown-style-modern hr{border:1px solid #E91E63;margin:1.5em auto}.markdown-style-modern blockquote,.markdown-style-modern q{border-left:2px solid #2196F3;padding:0 10px;color:#555;quotes:none;margin-left:1em}.markdown-style-modern h1,.markdown-style-modern h2,.markdown-style-modern h3,.markdown-style-modern h4,.markdown-style-modern h5,.markdown-style-modern h6{font-style:bold!important;color:#2196f3!important;text-align:center!important;margin:1.5em 5px!important;padding:.5em 1em!important}.markdown-style-modern h1{font-size:24px!important;border-bottom:1px solid #eee!important}.markdown-style-modern h2{font-size:20px!important;border-bottom:1px solid #f5f5f5!important}.markdown-style-modern h3{font-size:18px}.markdown-style-modern h4{font-size:16px}.markdown-style-modern table tr th{font-weight:700;color:#fff;border:1px solid #2196F3;background-color:#2196f3}.markdown-style-minimal strong,.markdown-style-minimal b{color:#424242;font-weight:600}.markdown-style-minimal em,.markdown-style-minimal i{color:#616161}.markdown-style-minimal hr{border:1px solid #e0e0e0;margin:1.5em auto}.markdown-style-minimal blockquote,.markdown-style-minimal q{border-left:2px solid #e0e0e0;padding:0 10px;color:#757575;quotes:none;margin-left:1em}.markdown-style-minimal h1,.markdown-style-minimal h2,.markdown-style-minimal h3,.markdown-style-minimal h4,.markdown-style-minimal h5,.markdown-style-minimal h6{font-style:normal!important;color:#424242!important;text-align:left!important;margin:1.5em 5px!important;padding:.3em 0!important}.markdown-style-minimal h1{font-size:24px!important;border-bottom:1px solid #f5f5f5!important}.markdown-style-minimal h2{font-size:20px!important;border-bottom:1px solid #fafafa!important}.markdown-style-minimal h3{font-size:18px}.markdown-style-minimal h4{font-size:16px}.markdown-style-minimal table tr th{font-weight:500;color:#424242;border:1px solid #e0e0e0;background-color:#fafafa}.style-selector{display:flex;flex-direction:column;gap:12px;width:100%}.style-button{padding:12px 16px;border:none;border-radius:8px;background:#252525;color:#e0e0e0;cursor:pointer;transition:all .2s ease;font-size:14px;font-weight:500;box-shadow:0 2px 4px #0003;display:flex;align-items:center;gap:8px;text-align:left}.style-button:hover{background:#303030;transform:translateY(-2px);box-shadow:0 4px 8px #00000040}.style-button.active{background:#7c5ef2;color:#fff;box-shadow:0 2px 8px #7c5ef266} +.modal{max-width:90vw;max-height:90vh;display:flex;flex-direction:column;min-width:400px;transition:width .3s ease,height .3s ease;background-color:#121212;border-radius:0}.image-share-modal{max-width:2000px;max-height:2000px;transition:width .3s ease,height .3s ease;animation:modal-in .3s ease;background-color:#121212;border:none;border-radius:0;box-shadow:0 10px 30px #00000080}.image-share-modal .resizable-container{position:relative;width:100%;height:100%;background:#121212;border-radius:0;box-shadow:none;overflow:hidden;transition:box-shadow .3s ease;display:flex;flex-direction:row;border:none}.theme-dark .image-share-modal .resizable-container{box-shadow:none}.image-share-modal .controls-panel{min-width:280px;width:280px;padding:0;border-right:1px solid var(--background-modifier-border);display:flex;flex-direction:column;gap:0;background:#181818;overflow-y:auto;overflow-x:hidden;height:100%;max-height:100%;color:#e0e0e0}.image-share-modal .controls-panel h2{background-color:#181818;margin:0;padding:20px;border-bottom:1px solid rgba(255,255,255,.1);text-align:center;color:#fff;font-size:1.2em;font-weight:500;letter-spacing:.02em}.image-share-modal .flex-spacer{flex-grow:1;min-height:20px}.image-share-modal .control-section{display:flex;flex-direction:column;gap:16px;padding:20px;border-bottom:1px solid rgba(255,255,255,.1)}.image-share-modal .control-section:last-child{border-bottom:none;padding-bottom:20px}.image-share-modal .download-section{margin-top:0}.image-share-modal .preview-panel{flex:1;display:flex;flex-direction:column;padding:0;overflow:hidden;background-color:#121212;position:relative;height:100%}.image-share-modal .preview-panel h2{margin:0;padding:20px;color:#fff;font-size:1.2em;font-weight:500;text-align:center;position:sticky;top:0;background-color:#121212;z-index:5;border-bottom:1px solid rgba(255,255,255,.1)}.image-share-modal .resize-handle{position:absolute;right:0;bottom:0;width:20px;height:20px;cursor:se-resize;background:var(--interactive-accent);clip-path:polygon(100% 0,100% 100%,0 100%);opacity:.6;transition:opacity .2s ease}.image-share-modal .resize-handle:hover{opacity:1}.image-share-modal .header{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--background-modifier-border)}.image-share-modal .image-preview-container{height:100%;display:flex;flex-direction:column;box-sizing:border-box;gap:16px;position:relative;width:100%;font-size:16px;line-height:2;letter-spacing:.05em}.image-share-modal .canvas-container{display:flex;justify-content:center;align-items:flex-start;padding:20px;background:#121212;border-radius:0;min-height:200px;width:100%;flex:1;overflow:auto;-webkit-overflow-scrolling:touch;transition:background-color .3s ease}.image-share-modal h2{margin:0 0 16px;color:var(--text-normal);font-size:1.4em;font-weight:600;padding:4px 0;text-align:center;letter-spacing:.02em}.image-share-modal .section-title{font-size:1em;font-weight:500;margin:0 0 8px;color:#aaa;opacity:.9}.image-share-modal canvas{height:auto!important;border-radius:0;box-shadow:0 2px 12px #0003;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;transform:translateZ(0);backface-visibility:hidden;min-width:auto;min-height:auto}.image-share-modal .template-selector{display:flex;flex-direction:column;gap:12px;width:100%}.image-share-modal .template-button{padding:12px 16px;border:none;border-radius:8px;background:#252525;color:#e0e0e0;cursor:pointer;transition:all .2s ease;font-size:14px;font-weight:500;box-shadow:0 2px 4px #0003;display:flex;align-items:center;gap:8px;text-align:left}.image-share-modal .template-button svg{min-width:16px;color:#aaa}.image-share-modal .template-button:hover{background:#303030;transform:translateY(-2px);box-shadow:0 4px 8px #00000040}.image-share-modal .template-button.active{background:#7c5ef2;color:#fff;box-shadow:0 2px 8px #7c5ef266}.image-share-modal .template-button.active svg{color:#fff}.image-preview-container .markdown-preview-view{padding:24px}.text-preview-modal .text-preview-container{display:flex;flex-direction:column;height:100%}.text-preview-modal .preview-container{flex:1;overflow-y:auto;margin-bottom:16px}.text-preview-modal .button-container{display:flex;justify-content:center;padding:8px 0;border-top:1px solid var(--background-modifier-border)}.text-preview-modal .button-container button{padding:8px 16px}.elegant-download-button{width:100%;height:48px;border-radius:8px;background-color:#7c5ef2;box-shadow:0 4px 12px #7c5ef24d;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.25,.8,.25,1);z-index:10;gap:8px;color:#fff;font-weight:500}.elegant-download-button:hover{background-color:#8f74f3;box-shadow:0 6px 16px #7c5ef266;transform:translateY(-2px)}.elegant-download-button svg{color:#fff;width:20px;height:20px}.elegant-download-button.clicked{transform:scale(.98);box-shadow:0 2px 8px #7c5ef233}.theme-dark .elegant-download-button{background-color:var(--interactive-accent)}.theme-dark .elegant-download-button:hover{background-color:var(--interactive-accent-hover)}.theme-dark .elegant-download-button svg{color:var(--text-on-accent)}.download-toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%);padding:12px 20px;background-color:#252525;color:#e0e0e0;border-radius:8px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 16px #0000004d;z-index:1000;animation:toast-in .3s ease forwards}.download-toast svg{width:20px;height:20px;color:#7c5ef2}.download-toast span{font-size:14px;font-weight:500}.download-toast.hide{animation:toast-out .3s ease forwards}@keyframes toast-in{0%{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%);opacity:1}}@keyframes toast-out{0%{transform:translate(-50%);opacity:1}to{transform:translate(-50%,20px);opacity:0}}.theme-dark .image-share-modal .canvas-container{background:#121212;box-shadow:none}@keyframes modal-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.theme-dark .image-share-modal .preview-panel{background-color:#121212}.image-share-modal .buttons-container{display:flex;gap:12px;width:100%}.image-share-modal .buttons-container.vertical{flex-direction:column;gap:16px}.elegant-button{flex:1;height:48px;border-radius:8px;background-color:#7c5ef2;box-shadow:0 4px 12px #7c5ef24d;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.25,.8,.25,1);z-index:10;gap:8px;color:#fff;font-weight:500}.elegant-button:hover{background-color:#8f74f3;box-shadow:0 6px 16px #7c5ef266;transform:translateY(-2px)}.elegant-button svg{color:#fff;width:20px;height:20px}.elegant-button.clicked{transform:scale(.98);box-shadow:0 2px 8px #7c5ef233}.elegant-button.copy-button{background-color:#2d9e6d;box-shadow:0 4px 12px #2d9e6d4d}.elegant-button.copy-button:hover{background-color:#33b97e;box-shadow:0 6px 16px #2d9e6d66}.elegant-button.copy-button.clicked{box-shadow:0 2px 8px #2d9e6d33}.elegant-button.download-button{background-color:#7c5ef2;box-shadow:0 4px 12px #7c5ef24d}.temp-markdown-container{position:absolute;left:-9999px;box-sizing:border-box;word-break:break-word;overflow-wrap:break-word;word-wrap:break-word;hyphens:auto;font-family:PingFang SC,Microsoft YaHei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif;height:auto;padding:24px}.temp-markdown-container.light-theme{background:#f8f9fc;color:#2c3e50}.temp-markdown-container.dark-theme{background:#2d3436;color:#e2e2e2}.temp-date-metadata{font-size:13px;margin-bottom:20px}.temp-date-metadata.light-theme{color:#666}.temp-date-metadata.dark-theme{color:#999}.enhanced-text-rendering{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:visible}.zoom-out-icon,.zoom-in-icon,.download-icon,.copy-icon,.light-template-icon,.dark-template-icon{display:inline-block}.modal-layout{display:flex;flex-direction:column}.modal-content-layout{width:100%;height:100%;display:flex;flex-direction:column}.canvas-preview{display:none}.markdown-style-base{font-size:16px;line-height:2em;letter-spacing:.12em}.markdown-style-base p{margin:1.8em 5px!important;padding:.2em 0}.markdown-style-base li{margin:12px 0;line-height:1.8em}.markdown-style-base h1,.markdown-style-base h2,.markdown-style-base h3,.markdown-style-base h4,.markdown-style-base h5,.markdown-style-base h6{margin:28px 0 18px!important;padding:.6em 1em!important;line-height:1.5em}.markdown-style-base blockquote,.markdown-style-base q{padding:10px 15px;margin:15px 0;line-height:1.8em}.markdown-style-base ul,.markdown-style-base ol{padding-left:25px;margin:15px 5px}.markdown-style-base pre{margin:15px 0;padding:12px;line-height:1.5em}.markdown-style-base .markdown-preview-sizer{padding:10px 5px}.markdown-style-base pre,.markdown-style-base code{font-size:14px;font-family:Roboto,Courier New,Consolas,Inconsolata,Courier,monospace;margin:auto 5px}.markdown-style-base code{white-space:pre-wrap;border-radius:2px;display:inline}.markdown-style-base pre{font-size:15px;line-height:1.4em;display:block!important}.markdown-style-base pre code{white-space:pre;overflow:auto;border-radius:3px;padding:1px;display:block!important}.markdown-style-base table{padding:0;border-collapse:collapse;border-spacing:0;font-size:1em;font:inherit;border:0;margin:0 auto}.markdown-style-base tbody{margin:0;padding:0;border:0}.markdown-style-base table tr{border:0;border-top:1px solid #CCC;background-color:#fff;margin:0;padding:0}.markdown-style-base table tr:nth-child(2n){background-color:#f8f8f8}.markdown-style-base table tr th,.markdown-style-base table tr td{font-size:16px;border:1px solid #CCC;margin:0;padding:5px 10px}.markdown-style-default strong,.markdown-style-default b{color:#bf360c}.markdown-style-default em,.markdown-style-default i{color:#009688}.markdown-style-default hr{border:1px solid #BF360C;margin:1.5em auto}.markdown-style-default blockquote,.markdown-style-default q{border-left:2px solid #009688;padding:0 10px;color:#777;quotes:none;margin-left:1em}.markdown-style-default h1,.markdown-style-default h2,.markdown-style-default h3,.markdown-style-default h4,.markdown-style-default h5,.markdown-style-default h6{font-style:bold!important;color:#009688!important;text-align:center!important;margin:1.5em 5px!important;padding:.5em 1em!important}.markdown-style-default h1{font-size:24px!important;border-bottom:1px solid #ddd!important}.markdown-style-default h2{font-size:20px!important;border-bottom:1px solid #eee!important}.markdown-style-default h3{font-size:18px}.markdown-style-default h4{font-size:16px}.markdown-style-default table tr th{font-weight:700;color:#eee;border:1px solid #009688;background-color:#009688}.markdown-style-modern strong,.markdown-style-modern b{color:#e91e63}.markdown-style-modern em,.markdown-style-modern i{color:#2196f3}.markdown-style-modern hr{border:1px solid #E91E63;margin:1.5em auto}.markdown-style-modern blockquote,.markdown-style-modern q{border-left:2px solid #2196F3;padding:0 10px;color:#555;quotes:none;margin-left:1em}.markdown-style-modern h1,.markdown-style-modern h2,.markdown-style-modern h3,.markdown-style-modern h4,.markdown-style-modern h5,.markdown-style-modern h6{font-style:bold!important;color:#2196f3!important;text-align:center!important;margin:1.5em 5px!important;padding:.5em 1em!important}.markdown-style-modern h1{font-size:24px!important;border-bottom:1px solid #eee!important}.markdown-style-modern h2{font-size:20px!important;border-bottom:1px solid #f5f5f5!important}.markdown-style-modern h3{font-size:18px}.markdown-style-modern h4{font-size:16px}.markdown-style-modern table tr th{font-weight:700;color:#fff;border:1px solid #2196F3;background-color:#2196f3}.markdown-style-minimal strong,.markdown-style-minimal b{color:#424242;font-weight:600}.markdown-style-minimal em,.markdown-style-minimal i{color:#616161}.markdown-style-minimal hr{border:1px solid #e0e0e0;margin:1.5em auto}.markdown-style-minimal blockquote,.markdown-style-minimal q{border-left:2px solid #e0e0e0;padding:0 10px;color:#757575;quotes:none;margin-left:1em}.markdown-style-minimal h1,.markdown-style-minimal h2,.markdown-style-minimal h3,.markdown-style-minimal h4,.markdown-style-minimal h5,.markdown-style-minimal h6{font-style:normal!important;color:#424242!important;text-align:left!important;margin:1.5em 5px!important;padding:.3em 0!important}.markdown-style-minimal h1{font-size:24px!important;border-bottom:1px solid #f5f5f5!important}.markdown-style-minimal h2{font-size:20px!important;border-bottom:1px solid #fafafa!important}.markdown-style-minimal h3{font-size:18px}.markdown-style-minimal h4{font-size:16px}.markdown-style-minimal table tr th{font-weight:500;color:#424242;border:1px solid #e0e0e0;background-color:#fafafa}.style-selector{display:flex;flex-direction:column;gap:12px;width:100%}.style-button{padding:12px 16px;border:none;border-radius:8px;background:#252525;color:#e0e0e0;cursor:pointer;transition:all .2s ease;font-size:14px;font-weight:500;box-shadow:0 2px 4px #0003;display:flex;align-items:center;gap:8px;text-align:left}.style-button:hover{background:#303030;transform:translateY(-2px);box-shadow:0 4px 8px #00000040}.style-button.active{background:#7c5ef2;color:#fff;box-shadow:0 2px 8px #7c5ef266}.cloned-preview-container{padding:24px;box-sizing:border-box}.temp-container{box-sizing:border-box;padding:24px}.template-width-800{width:800px}.template-width-760{width:760px}.dynamic-height{height:var(--content-height)}.temp-div{width:var(--template-width);padding:24px;box-sizing:border-box}.style-description{display:block;font-size:12px;opacity:.7;margin-top:4px}.modal-size{width:var(--modal-width);height:var(--modal-height)}.image-share-modal .zoom-controls,.image-share-modal .zoom-button,.image-share-modal .zoom-text,.zoom-out-icon,.zoom-in-icon,.canvas-preview{display:none} diff --git a/main.ts b/main.ts index 5748135..3f3d9d4 100644 --- a/main.ts +++ b/main.ts @@ -21,13 +21,15 @@ class ImageGenerator { public async updateCanvas() { try { const tempDiv = document.createElement('div'); - tempDiv.className = 'markdown-preview-view markdown-rendered temp-markdown-container'; + tempDiv.className = 'markdown-preview-view markdown-rendered temp-markdown-container temp-container'; tempDiv.classList.add(this.currentTemplate.id === 'dark' ? 'dark-theme' : 'light-theme'); // Add the markdown style classes tempDiv.classList.add('markdown-style-base'); tempDiv.classList.add(`markdown-style-${this.currentStyle}`); - tempDiv.style.width = `${this.currentTemplate.width}px`; - tempDiv.style.padding = '24px'; + + // Set template width via CSS custom property + tempDiv.style.setProperty('--template-width', `${this.currentTemplate.width}px`); + tempDiv.classList.add('temp-div'); // 添加日期 const dateDiv = tempDiv.createDiv({ cls: 'metadata-container temp-date-metadata' }); @@ -46,7 +48,6 @@ class ImageGenerator { new Component() ); - // We don't need the inline stylesheet anymore since we're using CSS classes document.body.appendChild(tempDiv); // 获取实际内容高度，包括内边距 @@ -60,27 +61,28 @@ class ImageGenerator { width: this.currentTemplate.width, height: finalHeight, backgroundColor: this.currentTemplate.id === 'dark' ? '#2d3436' : '#e8ecf9', - scale: window.devicePixelRatio * 2, // 根据设备像素比自动调整清晰度 + scale: window.devicePixelRatio * 2, windowWidth: this.currentTemplate.width, windowHeight: finalHeight, - logging: false, // 减少日志输出 + logging: false, useCORS: true, - imageTimeout: 0, // 防止图像加载超时 - allowTaint: true, // 允许跨域图像 + imageTimeout: 0, + allowTaint: true, onclone: (clonedDoc) => { const clonedDiv = clonedDoc.querySelector('.markdown-preview-view') as HTMLElement; if (clonedDiv) { - clonedDiv.style.width = `${this.currentTemplate.width - 40}px`; - clonedDiv.style.height = `${finalHeight}px`; + // Set width and height via CSS classes and custom properties + clonedDiv.classList.add('cloned-preview-container'); + clonedDiv.classList.add(`template-width-${this.currentTemplate.width - 40}`); + clonedDiv.style.setProperty('--content-height', `${finalHeight}px`); + clonedDiv.classList.add('dynamic-height'); clonedDiv.classList.add('enhanced-text-rendering'); - // Make sure the style classes are properly applied to the cloned document - // This ensures the styling is preserved during the html2canvas conversion + // Make sure the style classes are properly applied if (!clonedDiv.classList.contains('markdown-style-base')) { clonedDiv.classList.add('markdown-style-base'); } - // Add the specific style class if it's not already there const styleClass = `markdown-style-${this.currentStyle}`; if (!clonedDiv.classList.contains(styleClass)) { clonedDiv.classList.add(styleClass); @@ -204,8 +206,10 @@ class TextPreviewModal extends Modal { const finalWidth = Math.min(width + 300, maxWidth); // 300px 是左侧面板宽度 const finalHeight = Math.min(height + 80, maxHeight); // 添加额外的高度用于顶部和底部 - modalElement.style.width = `${finalWidth}px`; - modalElement.style.height = `${finalHeight}px`; + // Use CSS custom properties for dynamic sizing + modalElement.style.setProperty('--modal-width', `${finalWidth}px`); + modalElement.style.setProperty('--modal-height', `${finalHeight}px`); + modalElement.classList.add('modal-size'); // 添加flex布局 modalElement.classList.add('modal-layout'); @@ -234,106 +238,6 @@ class TextPreviewModal extends Modal { // 创建模板选择器 const templateSelector = themeSection.createDiv({ cls: 'template-selector' }); - // 2. 创建缩放控制区域 - const zoomSection = controlsPanel.createDiv({ cls: 'control-section' }); - zoomSection.createEl('div', { text: '调整大小', cls: 'section-title' }); - - // 创建缩放控制 - const zoomControls = zoomSection.createDiv({ cls: 'zoom-controls' }); - - const zoomOutBtn = zoomControls.createEl('button', { - cls: 'zoom-button zoom-out', - attr: { 'aria-label': '缩小预览' } - }); - - // Replace innerHTML with DOM API - const zoomOutIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - zoomOutIcon.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); - zoomOutIcon.setAttribute('width', '18'); - zoomOutIcon.setAttribute('height', '18'); - zoomOutIcon.setAttribute('viewBox', '0 0 24 24'); - zoomOutIcon.setAttribute('fill', 'none'); - zoomOutIcon.setAttribute('stroke', 'currentColor'); - zoomOutIcon.setAttribute('stroke-width', '2'); - zoomOutIcon.setAttribute('stroke-linecap', 'round'); - zoomOutIcon.setAttribute('stroke-linejoin', 'round'); - zoomOutIcon.classList.add('zoom-out-icon'); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', '11'); - circle.setAttribute('cy', '11'); - circle.setAttribute('r', '8'); - - const line1 = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line1.setAttribute('x1', '21'); - line1.setAttribute('y1', '21'); - line1.setAttribute('x2', '16.65'); - line1.setAttribute('y2', '16.65'); - - const line2 = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line2.setAttribute('x1', '8'); - line2.setAttribute('y1', '11'); - line2.setAttribute('x2', '14'); - line2.setAttribute('y2', '11'); - - zoomOutIcon.appendChild(circle); - zoomOutIcon.appendChild(line1); - zoomOutIcon.appendChild(line2); - zoomOutBtn.appendChild(zoomOutIcon); - - const zoomText = zoomControls.createEl('span', { - cls: 'zoom-text', - text: '100%' - }); - - const zoomInBtn = zoomControls.createEl('button', { - cls: 'zoom-button zoom-in', - attr: { 'aria-label': '放大预览' } - }); - - // Replace innerHTML with DOM API - const zoomInIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - zoomInIcon.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); - zoomInIcon.setAttribute('width', '18'); - zoomInIcon.setAttribute('height', '18'); - zoomInIcon.setAttribute('viewBox', '0 0 24 24'); - zoomInIcon.setAttribute('fill', 'none'); - zoomInIcon.setAttribute('stroke', 'currentColor'); - zoomInIcon.setAttribute('stroke-width', '2'); - zoomInIcon.setAttribute('stroke-linecap', 'round'); - zoomInIcon.setAttribute('stroke-linejoin', 'round'); - zoomInIcon.classList.add('zoom-in-icon'); - - const circleIn = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circleIn.setAttribute('cx', '11'); - circleIn.setAttribute('cy', '11'); - circleIn.setAttribute('r', '8'); - - const line3 = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line3.setAttribute('x1', '21'); - line3.setAttribute('y1', '21'); - line3.setAttribute('x2', '16.65'); - line3.setAttribute('y2', '16.65'); - - const line4 = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line4.setAttribute('x1', '11'); - line4.setAttribute('y1', '8'); - line4.setAttribute('x2', '11'); - line4.setAttribute('y2', '14'); - - const line5 = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - line5.setAttribute('x1', '8'); - line5.setAttribute('y1', '11'); - line5.setAttribute('x2', '14'); - line5.setAttribute('y2', '11'); - - zoomInIcon.appendChild(circleIn); - zoomInIcon.appendChild(line3); - zoomInIcon.appendChild(line4); - zoomInIcon.appendChild(line5); - - zoomInBtn.appendChild(zoomInIcon); - // 创建空间填充区域 controlsPanel.createDiv({ cls: 'flex-spacer' }); @@ -573,9 +477,6 @@ class TextPreviewModal extends Modal { // 当模板变更时更新弹出框尺寸 adjustModalSize(newCanvas.width, newCanvas.height); - - // 始终使用100%缩放 - adjustZoom(100); }; if (template.id === 'default') { templateButton.addClass('active'); @@ -604,10 +505,7 @@ class TextPreviewModal extends Modal { // 添加描述 const styleDesc = document.createElement('small'); styleDesc.textContent = style.description; - styleDesc.style.display = 'block'; - styleDesc.style.fontSize = '12px'; - styleDesc.style.opacity = '0.7'; - styleDesc.style.marginTop = '4px'; + styleDesc.classList.add('style-description'); styleButton.appendChild(styleDesc); // 设置当前活动样式 @@ -642,28 +540,11 @@ class TextPreviewModal extends Modal { const newCanvas = this.imageGenerator.getCanvas(); canvasContainer.appendChild(newCanvas); - // 应用缩放 - adjustZoom(zoomLevel); + // 更新模态框大小 + adjustModalSize(newCanvas.width, newCanvas.height); }); }); - // 缩放逻辑 - function adjustZoom(level: number) { - const canvas = canvasContainer.querySelector('canvas'); - if (!canvas) return; - - // 设置实际宽度值而不是百分比，确保缩放效果生效 - const originalWidth = canvas.width; - canvas.classList.add('canvas-preview'); - canvas.style.width = `${originalWidth * level / 100}px`; - - // 更新缩放文本 - zoomText.textContent = `${level}%`; - - // 保存当前缩放级别 - zoomLevel = level; - } - // 等待初始画布渲染完成 await this.imageGenerator.updateCanvas(); const canvas = this.imageGenerator.getCanvas(); @@ -672,43 +553,6 @@ class TextPreviewModal extends Modal { // 更新模态框大小以适应画布 adjustModalSize(canvas.width, canvas.height); - // 设置默认缩放比例为100% - let zoomLevel = 80; - adjustZoom(zoomLevel); - - // 添加缩放按钮事件和动画 - zoomOutBtn.addEventListener('click', () => { - if (zoomLevel > 50) { - zoomLevel -= 10; - adjustZoom(zoomLevel); - - // 添加点击动画 - zoomOutBtn.animate([ - { transform: 'scale(0.9)' }, - { transform: 'scale(1)' } - ], { - duration: 150, - easing: 'ease-out' - }); - } - }); - - zoomInBtn.addEventListener('click', () => { - if (zoomLevel < 200) { - zoomLevel += 10; - adjustZoom(zoomLevel); - - // 添加点击动画 - zoomInBtn.animate([ - { transform: 'scale(0.9)' }, - { transform: 'scale(1)' } - ], { - duration: 150, - easing: 'ease-out' - }); - } - }); - // 添加复制按钮点击事件 copyButton.addEventListener('click', async () => { copyButton.classList.add('clicked'); diff --git a/styles.css b/styles.css index af32d58..ab8a91d 100644 --- a/styles.css +++ b/styles.css @@ -179,8 +179,7 @@ If your plugin does not need CSS, delete this file. min-height: 200px; width: 100%; flex: 1; - overflow-x: auto; - overflow-y: auto; + overflow: auto; -webkit-overflow-scrolling: touch; transition: background-color 0.3s ease; } @@ -205,7 +204,7 @@ If your plugin does not need CSS, delete this file. .image-share-modal canvas { - height: auto; + height: auto !important; border-radius: 0; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); image-rendering: -webkit-optimize-contrast; @@ -214,8 +213,6 @@ If your plugin does not need CSS, delete this file. backface-visibility: hidden; min-width: auto; min-height: auto; - transition: width 0.3s ease, height 0.3s ease; - transform-origin: top left; } .image-share-modal .template-selector { @@ -338,50 +335,6 @@ If your plugin does not need CSS, delete this file. color: var(--text-on-accent); } -/* 添加缩放控制样式 */ -.image-share-modal .zoom-controls { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - margin-bottom: 0; - padding: 12px 16px; - background: #252525; - border-radius: 8px; - width: 100%; -} - -.image-share-modal .zoom-button { - display: flex; - align-items: center; - justify-content: center; - width: 36px; - height: 36px; - border-radius: 50%; - border: none; - background: #181818; - color: #aaaaaa; - cursor: pointer; - transition: all 0.2s ease; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -} - -.image-share-modal .zoom-button:hover { - background: #7c5ef2; - color: #ffffff; - transform: translateY(-2px); - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); -} - -.image-share-modal .zoom-text { - font-size: 14px; - font-weight: 600; - color: #e0e0e0; - width: 50px; - text-align: center; - user-select: none; -} - /* 下载提示样式 */ .download-toast { position: fixed; @@ -597,8 +550,7 @@ If your plugin does not need CSS, delete this file. /* Canvas scaling classes */ .canvas-preview { - max-width: none; - transition: width 0.3s ease; + display: none; } /* Markdown styles that can be switched between */ @@ -954,3 +906,59 @@ If your plugin does not need CSS, delete this file. color: #ffffff; box-shadow: 0 2px 8px rgba(124, 94, 242, 0.4); } + +/* Dynamic sizing classes */ +.cloned-preview-container { + padding: 24px; + box-sizing: border-box; +} + +.temp-container { + box-sizing: border-box; + padding: 24px; +} + +/* Width classes for different templates */ +.template-width-800 { + width: 800px; +} + +.template-width-760 { + width: 760px; /* 800px - 40px padding */ +} + +/* Dynamic height class that will be set via CSS custom property */ +.dynamic-height { + height: var(--content-height); +} + +/* Temporary div styles */ +.temp-div { + width: var(--template-width); + padding: 24px; + box-sizing: border-box; +} + +/* Style description text */ +.style-description { + display: block; + font-size: 12px; + opacity: 0.7; + margin-top: 4px; +} + +/* Modal sizing classes */ +.modal-size { + width: var(--modal-width); + height: var(--modal-height); +} + +/* 移除缩放控制样式 */ +.image-share-modal .zoom-controls, +.image-share-modal .zoom-button, +.image-share-modal .zoom-text, +.zoom-out-icon, +.zoom-in-icon, +.canvas-preview { + display: none; +}