From 04a85d8874a5a515cc9c7eca1ea254730a630a89 Mon Sep 17 00:00:00 2001 From: cruise Date: Wed, 19 Mar 2025 00:29:16 +0800 Subject: [PATCH] preview clear --- README.md | 9 +++ main.css | 101 ++++++++++++++++++++++++++- main.ts | 196 ++++++++++++++++++++++++++++++++++++++++++++++------- styles.css | 118 +++++++++++++++++++++++++++++++- 4 files changed, 395 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 5014b75..c24da4a 100644 --- a/README.md +++ b/README.md @@ -3,4 +3,13 @@ This image-sharing plugin for Obsidian (https://obsidian.md) allows you to share selected text as beautiful images. +v0.0.2 +- 引入markdwn-here样式 +- 优化预览样式 +- 调整下载按钮位置 + +v0.0.1 +- 初始化插件 + + diff --git a/main.css b/main.css index 1b8a802..ee63583 100644 --- a/main.css +++ b/main.css @@ -2,6 +2,7 @@ .image-share-modal { max-width: none; max-height: none; + transition: width 0.3s ease; } .image-share-modal .resizable-container { position: relative; @@ -37,7 +38,7 @@ height: 100%; display: flex; flex-direction: column; - padding: 20px 24px; + padding: 5px 5px; box-sizing: border-box; gap: 16px; position: relative; @@ -50,12 +51,14 @@ display: flex; justify-content: center; align-items: flex-start; - padding: 16px; + padding: 2px; background: var(--background-secondary); border-radius: 8px; min-height: 200px; margin-bottom: 60px; width: 100%; + overflow: auto; + max-height: 70vh; } .image-share-modal h2 { margin: 0; @@ -97,6 +100,10 @@ height: auto; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); + image-rendering: -webkit-optimize-contrast; + image-rendering: crisp-edges; + transform: translateZ(0); + backface-visibility: hidden; } .image-share-modal .template-selector { display: flex; @@ -125,4 +132,92 @@ .image-preview-container .markdown-preview-view { padding: 24px; } -/*# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsic3R5bGVzLmNzcyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiLypcclxuXHJcblRoaXMgQ1NTIGZpbGUgd2lsbCBiZSBpbmNsdWRlZCB3aXRoIHlvdXIgcGx1Z2luLCBhbmRcclxuYXZhaWxhYmxlIGluIHRoZSBhcHAgd2hlbiB5b3VyIHBsdWdpbiBpcyBlbmFibGVkLlxyXG5cclxuSWYgeW91ciBwbHVnaW4gZG9lcyBub3QgbmVlZCBDU1MsIGRlbGV0ZSB0aGlzIGZpbGUuXHJcblxyXG4qL1xyXG5cclxuLmltYWdlLXNoYXJlLW1vZGFsIHtcclxuICAgIG1heC13aWR0aDogbm9uZTtcclxuICAgIG1heC1oZWlnaHQ6IG5vbmU7XHJcbn1cclxuXHJcbi5pbWFnZS1zaGFyZS1tb2RhbCAucmVzaXphYmxlLWNvbnRhaW5lciB7XHJcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XHJcbiAgICB3aWR0aDogMTAwJTtcclxuICAgIGJhY2tncm91bmQ6IHZhcigtLWJhY2tncm91bmQtcHJpbWFyeSk7XHJcbiAgICBib3JkZXItcmFkaXVzOiAxMnB4O1xyXG4gICAgYm94LXNoYWRvdzogMCAycHggOHB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcclxuICAgIG92ZXJmbG93OiBoaWRkZW47XHJcbn1cclxuXHJcbi5pbWFnZS1zaGFyZS1tb2RhbCAucmVzaXplLWhhbmRsZSB7XHJcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XHJcbiAgICByaWdodDogMDtcclxuICAgIGJvdHRvbTogMDtcclxuICAgIHdpZHRoOiAyMHB4O1xyXG4gICAgaGVpZ2h0OiAyMHB4O1xyXG4gICAgY3Vyc29yOiBzZS1yZXNpemU7XHJcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1pbnRlcmFjdGl2ZS1hY2NlbnQpO1xyXG4gICAgY2xpcC1wYXRoOiBwb2x5Z29uKDEwMCUgMCwgMTAwJSAxMDAlLCAwIDEwMCUpO1xyXG4gICAgb3BhY2l0eTogMC42O1xyXG4gICAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjJzIGVhc2U7XHJcbn1cclxuXHJcbi5pbWFnZS1zaGFyZS1tb2RhbCAucmVzaXplLWhhbmRsZTpob3ZlciB7XHJcbiAgICBvcGFjaXR5OiAxO1xyXG59XHJcblxyXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLmhlYWRlciB7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcclxuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgICBnYXA6IDE2cHg7XHJcbiAgICBtYXJnaW4tYm90dG9tOiAyMHB4O1xyXG59XHJcblxyXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLmltYWdlLXByZXZpZXctY29udGFpbmVyIHtcclxuICAgIGhlaWdodDogMTAwJTtcclxuICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xyXG4gICAgcGFkZGluZzogMjBweCAyNHB4O1xyXG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcclxuICAgIGdhcDogMTZweDtcclxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcclxuICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgZm9udC1zaXplOiAxNnB4O1xyXG4gICAgbGluZS1oZWlnaHQ6IDI7XHJcbiAgICBsZXR0ZXItc3BhY2luZzogMC4wNWVtO1xyXG59XHJcblxyXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLmNhbnZhcy1jb250YWluZXIge1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG4gICAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XHJcbiAgICBwYWRkaW5nOiAxNnB4O1xyXG4gICAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZC1zZWNvbmRhcnkpO1xyXG4gICAgYm9yZGVyLXJhZGl1czogOHB4O1xyXG4gICAgbWluLWhlaWdodDogMjAwcHg7XHJcbiAgICBtYXJnaW4tYm90dG9tOiA2MHB4O1xyXG4gICAgd2lkdGg6IDEwMCU7XHJcbn1cclxuXHJcbi5pbWFnZS1zaGFyZS1tb2RhbCBoMiB7XHJcbiAgICBtYXJnaW46IDA7XHJcbiAgICBjb2xvcjogdmFyKC0tdGV4dC1ub3JtYWwpO1xyXG4gICAgZm9udC1zaXplOiAxLjJlbTtcclxuICAgIGZvbnQtd2VpZ2h0OiA2MDA7XHJcbiAgICBwYWRkaW5nOiA0cHggMDtcclxuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcclxufVxyXG5cclxuLmltYWdlLXNoYXJlLW1vZGFsIC5kb3dubG9hZC1idXR0b24ge1xyXG4gICAgcG9zaXRpb246IGZpeGVkO1xyXG4gICAgcmlnaHQ6IDMwJTtcclxuICAgIGJvdHRvbTogNDAlO1xyXG4gICAgYmFja2dyb3VuZDogdmFyKC0taW50ZXJhY3RpdmUtYWNjZW50KTtcclxuICAgIGJvcmRlcjogbm9uZTtcclxuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcclxuICAgIHdpZHRoOiA0OHB4O1xyXG4gICAgaGVpZ2h0OiA0OHB4O1xyXG4gICAgY3Vyc29yOiBwb2ludGVyO1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxuICAgIHRyYW5zaXRpb246IGFsbCAwLjJzIGVhc2U7XHJcbiAgICBib3gtc2hhZG93OiAwIDRweCAxMnB4IHJnYmEoMCwgMCwgMCwgMC4xNSk7XHJcbiAgICBwYWRkaW5nOiAxMnB4O1xyXG4gICAgY29sb3I6IHZhcigtLXRleHQtb24tYWNjZW50KTtcclxuICAgIHotaW5kZXg6IDEwMDtcclxufVxyXG5cclxuLmltYWdlLXNoYXJlLW1vZGFsIC5kb3dubG9hZC1idXR0b246aG92ZXIge1xyXG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpO1xyXG4gICAgYm94LXNoYWRvdzogMCA2cHggMTZweCByZ2JhKDAsIDAsIDAsIDAuMik7XHJcbn1cclxuXHJcbi5pbWFnZS1zaGFyZS1tb2RhbCAuZG93bmxvYWQtYnV0dG9uIHN2ZyB7XHJcbiAgICB3aWR0aDogMjRweDtcclxuICAgIGhlaWdodDogMjRweDtcclxufVxyXG5cclxuLmltYWdlLXNoYXJlLW1vZGFsIGNhbnZhcyB7XHJcbiAgICBtYXgtd2lkdGg6IDEwMCU7XHJcbiAgICBoZWlnaHQ6IGF1dG87XHJcbiAgICBib3JkZXItcmFkaXVzOiA4cHg7XHJcbiAgICBib3gtc2hhZG93OiAwIDJweCAxMnB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcclxufVxyXG5cclxuLmltYWdlLXNoYXJlLW1vZGFsIC50ZW1wbGF0ZS1zZWxlY3RvciB7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XHJcbiAgICBnYXA6IDhweDtcclxufVxyXG5cclxuLmltYWdlLXNoYXJlLW1vZGFsIC50ZW1wbGF0ZS1idXR0b24ge1xyXG4gICAgcGFkZGluZzogOHB4IDE2cHg7XHJcbiAgICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1pbnRlcmFjdGl2ZS1hY2NlbnQpO1xyXG4gICAgYm9yZGVyLXJhZGl1czogNnB4O1xyXG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XHJcbiAgICBjb2xvcjogdmFyKC0taW50ZXJhY3RpdmUtYWNjZW50KTtcclxuICAgIGN1cnNvcjogcG9pbnRlcjtcclxuICAgIHRyYW5zaXRpb246IGFsbCAwLjJzIGVhc2U7XHJcbiAgICBmb250LXNpemU6IDE0cHg7XHJcbiAgICBmb250LXdlaWdodDogNTAwO1xyXG59XHJcblxyXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLnRlbXBsYXRlLWJ1dHRvbjpob3ZlciB7XHJcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1pbnRlcmFjdGl2ZS1hY2NlbnQpO1xyXG4gICAgY29sb3I6IHZhcigtLXRleHQtb24tYWNjZW50KTtcclxufVxyXG5cclxuLmltYWdlLXNoYXJlLW1vZGFsIC50ZW1wbGF0ZS1idXR0b24uYWN0aXZlIHtcclxuICAgIGJhY2tncm91bmQ6IHZhcigtLWludGVyYWN0aXZlLWFjY2VudCk7XHJcbiAgICBjb2xvcjogdmFyKC0tdGV4dC1vbi1hY2NlbnQpO1xyXG59XHJcblxyXG4uaW1hZ2UtcHJldmlldy1jb250YWluZXIgLm1hcmtkb3duLXByZXZpZXctdmlldyB7XHJcbiAgICBwYWRkaW5nOiAyNHB4O1xyXG59XHJcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFTQTtBQUNJO0FBQ0E7QUFBQTtBQUdKO0FBQ0k7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFHSjtBQUNJO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFHSjtBQUNJO0FBQUE7QUFHSjtBQUNJO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUdKO0FBQ0k7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBR0o7QUFDSTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUdKO0FBQ0k7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFHSjtBQUNJO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUdKO0FBQ0k7QUFDQTtBQUFBO0FBR0o7QUFDSTtBQUNBO0FBQUE7QUFHSjtBQUNJO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFHSjtBQUNJO0FBQ0E7QUFDQTtBQUFBO0FBR0o7QUFDSTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUdKO0FBQ0k7QUFDQTtBQUFBO0FBR0o7QUFDSTtBQUNBO0FBQUE7QUFHSjtBQUNJO0FBQUE7IiwKICAibmFtZXMiOiBbXQp9Cg== */ +.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 { + position: absolute; + top: 10px; + right: 10px; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.9); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + z-index: 10; +} +.elegant-download-button:hover { + background-color: #f0f0f0; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + transform: translateY(-2px); +} +.elegant-download-button svg { + color: #4285f4; +} +.elegant-download-button.clicked { + transform: scale(0.9); + background-color: #e8e8e8; +} +.theme-dark .elegant-download-button { + background-color: rgba(50, 50, 50, 0.9); +} +.theme-dark .elegant-download-button:hover { + background-color: rgba(60, 60, 60, 0.9); +} +.theme-dark .elegant-download-button svg { + color: #8ab4f8; +} +.image-share-modal .zoom-controls { + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + margin-bottom: 10px; +} +.image-share-modal .zoom-button { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 50%; + border: 1px solid var(--interactive-accent); + background: transparent; + color: var(--interactive-accent); + cursor: pointer; + transition: all 0.2s ease; +} +.image-share-modal .zoom-button:hover { + background: var(--interactive-accent); + color: var(--text-on-accent); +} +.image-share-modal .zoom-text { + font-size: 14px; + font-weight: 500; + color: var(--text-normal); + width: 50px; + text-align: center; +} +/*# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsic3R5bGVzLmNzcyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiLypcclxuXHJcblRoaXMgQ1NTIGZpbGUgd2lsbCBiZSBpbmNsdWRlZCB3aXRoIHlvdXIgcGx1Z2luLCBhbmRcclxuYXZhaWxhYmxlIGluIHRoZSBhcHAgd2hlbiB5b3VyIHBsdWdpbiBpcyBlbmFibGVkLlxyXG5cclxuSWYgeW91ciBwbHVnaW4gZG9lcyBub3QgbmVlZCBDU1MsIGRlbGV0ZSB0aGlzIGZpbGUuXHJcblxyXG4qL1xyXG5cclxuLmltYWdlLXNoYXJlLW1vZGFsIHtcclxuICAgIG1heC13aWR0aDogbm9uZTtcclxuICAgIG1heC1oZWlnaHQ6IG5vbmU7XHJcbiAgICAvKiBcdTc5RkJcdTk2NjRcdTU2RkFcdTVCOUFcdTVCQkRcdTVFQTZcdUZGMENcdTRFRTVcdTRGQkZcdTkwMUFcdThGQzdKYXZhU2NyaXB0XHU1MkE4XHU2MDAxXHU4QkJFXHU3RjZFICovXHJcbiAgICAvKiB3aWR0aDogMTAwMHB4OyAqL1xyXG4gICAgdHJhbnNpdGlvbjogd2lkdGggMC4zcyBlYXNlO1xyXG59XHJcblxyXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLnJlc2l6YWJsZS1jb250YWluZXIge1xyXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG4gICAgd2lkdGg6IDEwMCU7XHJcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1iYWNrZ3JvdW5kLXByaW1hcnkpO1xyXG4gICAgYm9yZGVyLXJhZGl1czogMTJweDtcclxuICAgIGJveC1zaGFkb3c6IDAgMnB4IDhweCByZ2JhKDAsIDAsIDAsIDAuMSk7XHJcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xyXG59XHJcblxyXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLnJlc2l6ZS1oYW5kbGUge1xyXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgcmlnaHQ6IDA7XHJcbiAgICBib3R0b206IDA7XHJcbiAgICB3aWR0aDogMjBweDtcclxuICAgIGhlaWdodDogMjBweDtcclxuICAgIGN1cnNvcjogc2UtcmVzaXplO1xyXG4gICAgYmFja2dyb3VuZDogdmFyKC0taW50ZXJhY3RpdmUtYWNjZW50KTtcclxuICAgIGNsaXAtcGF0aDogcG9seWdvbigxMDAlIDAsIDEwMCUgMTAwJSwgMCAxMDAlKTtcclxuICAgIG9wYWNpdHk6IDAuNjtcclxuICAgIHRyYW5zaXRpb246IG9wYWNpdHkgMC4ycyBlYXNlO1xyXG59XHJcblxyXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLnJlc2l6ZS1oYW5kbGU6aG92ZXIge1xyXG4gICAgb3BhY2l0eTogMTtcclxufVxyXG5cclxuLmltYWdlLXNoYXJlLW1vZGFsIC5oZWFkZXIge1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XHJcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gICAgZ2FwOiAxNnB4O1xyXG4gICAgbWFyZ2luLWJvdHRvbTogMjBweDtcclxufVxyXG5cclxuLmltYWdlLXNoYXJlLW1vZGFsIC5pbWFnZS1wcmV2aWV3LWNvbnRhaW5lciB7XHJcbiAgICBoZWlnaHQ6IDEwMCU7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcclxuICAgIHBhZGRpbmc6IDVweCA1cHg7XHJcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xyXG4gICAgZ2FwOiAxNnB4O1xyXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG4gICAgd2lkdGg6IDEwMCU7XHJcbiAgICBmb250LXNpemU6IDE2cHg7XHJcbiAgICBsaW5lLWhlaWdodDogMjtcclxuICAgIGxldHRlci1zcGFjaW5nOiAwLjA1ZW07XHJcbn1cclxuXHJcbi5pbWFnZS1zaGFyZS1tb2RhbCAuY2FudmFzLWNvbnRhaW5lciB7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XHJcbiAgICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcclxuICAgIHBhZGRpbmc6IDJweDtcclxuICAgIGJhY2tncm91bmQ6IHZhcigtLWJhY2tncm91bmQtc2Vjb25kYXJ5KTtcclxuICAgIGJvcmRlci1yYWRpdXM6IDhweDtcclxuICAgIG1pbi1oZWlnaHQ6IDIwMHB4O1xyXG4gICAgbWFyZ2luLWJvdHRvbTogNjBweDtcclxuICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgb3ZlcmZsb3c6IGF1dG87XHJcbiAgICBtYXgtaGVpZ2h0OiA3MHZoO1xyXG59XHJcblxyXG4uaW1hZ2Utc2hhcmUtbW9kYWwgaDIge1xyXG4gICAgbWFyZ2luOiAwO1xyXG4gICAgY29sb3I6IHZhcigtLXRleHQtbm9ybWFsKTtcclxuICAgIGZvbnQtc2l6ZTogMS4yZW07XHJcbiAgICBmb250LXdlaWdodDogNjAwO1xyXG4gICAgcGFkZGluZzogNHB4IDA7XHJcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XHJcbn1cclxuXHJcbi5pbWFnZS1zaGFyZS1tb2RhbCAuZG93bmxvYWQtYnV0dG9uIHtcclxuICAgIHBvc2l0aW9uOiBmaXhlZDtcclxuICAgIHJpZ2h0OiAzMCU7XHJcbiAgICBib3R0b206IDQwJTtcclxuICAgIGJhY2tncm91bmQ6IHZhcigtLWludGVyYWN0aXZlLWFjY2VudCk7XHJcbiAgICBib3JkZXI6IG5vbmU7XHJcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XHJcbiAgICB3aWR0aDogNDhweDtcclxuICAgIGhlaWdodDogNDhweDtcclxuICAgIGN1cnNvcjogcG9pbnRlcjtcclxuICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XHJcbiAgICB0cmFuc2l0aW9uOiBhbGwgMC4ycyBlYXNlO1xyXG4gICAgYm94LXNoYWRvdzogMCA0cHggMTJweCByZ2JhKDAsIDAsIDAsIDAuMTUpO1xyXG4gICAgcGFkZGluZzogMTJweDtcclxuICAgIGNvbG9yOiB2YXIoLS10ZXh0LW9uLWFjY2VudCk7XHJcbiAgICB6LWluZGV4OiAxMDA7XHJcbn1cclxuXHJcbi5pbWFnZS1zaGFyZS1tb2RhbCAuZG93bmxvYWQtYnV0dG9uOmhvdmVyIHtcclxuICAgIHRyYW5zZm9ybTogc2NhbGUoMS4xKTtcclxuICAgIGJveC1zaGFkb3c6IDAgNnB4IDE2cHggcmdiYSgwLCAwLCAwLCAwLjIpO1xyXG59XHJcblxyXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLmRvd25sb2FkLWJ1dHRvbiBzdmcge1xyXG4gICAgd2lkdGg6IDI0cHg7XHJcbiAgICBoZWlnaHQ6IDI0cHg7XHJcbn1cclxuXHJcbi5pbWFnZS1zaGFyZS1tb2RhbCBjYW52YXMge1xyXG4gICAgbWF4LXdpZHRoOiAxMDAlO1xyXG4gICAgaGVpZ2h0OiBhdXRvO1xyXG4gICAgYm9yZGVyLXJhZGl1czogOHB4O1xyXG4gICAgYm94LXNoYWRvdzogMCAycHggMTJweCByZ2JhKDAsIDAsIDAsIDAuMSk7XHJcbiAgICBpbWFnZS1yZW5kZXJpbmc6IC13ZWJraXQtb3B0aW1pemUtY29udHJhc3Q7XHJcbiAgICBpbWFnZS1yZW5kZXJpbmc6IGNyaXNwLWVkZ2VzO1xyXG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVaKDApO1xyXG4gICAgYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuO1xyXG59XHJcblxyXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLnRlbXBsYXRlLXNlbGVjdG9yIHtcclxuICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxuICAgIGdhcDogOHB4O1xyXG59XHJcblxyXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLnRlbXBsYXRlLWJ1dHRvbiB7XHJcbiAgICBwYWRkaW5nOiA4cHggMTZweDtcclxuICAgIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWludGVyYWN0aXZlLWFjY2VudCk7XHJcbiAgICBib3JkZXItcmFkaXVzOiA2cHg7XHJcbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcclxuICAgIGNvbG9yOiB2YXIoLS1pbnRlcmFjdGl2ZS1hY2NlbnQpO1xyXG4gICAgY3Vyc29yOiBwb2ludGVyO1xyXG4gICAgdHJhbnNpdGlvbjogYWxsIDAuMnMgZWFzZTtcclxuICAgIGZvbnQtc2l6ZTogMTRweDtcclxuICAgIGZvbnQtd2VpZ2h0OiA1MDA7XHJcbn1cclxuXHJcbi5pbWFnZS1zaGFyZS1tb2RhbCAudGVtcGxhdGUtYnV0dG9uOmhvdmVyIHtcclxuICAgIGJhY2tncm91bmQ6IHZhcigtLWludGVyYWN0aXZlLWFjY2VudCk7XHJcbiAgICBjb2xvcjogdmFyKC0tdGV4dC1vbi1hY2NlbnQpO1xyXG59XHJcblxyXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLnRlbXBsYXRlLWJ1dHRvbi5hY3RpdmUge1xyXG4gICAgYmFja2dyb3VuZDogdmFyKC0taW50ZXJhY3RpdmUtYWNjZW50KTtcclxuICAgIGNvbG9yOiB2YXIoLS10ZXh0LW9uLWFjY2VudCk7XHJcbn1cclxuXHJcbi5pbWFnZS1wcmV2aWV3LWNvbnRhaW5lciAubWFya2Rvd24tcHJldmlldy12aWV3IHtcclxuICAgIHBhZGRpbmc6IDI0cHg7XHJcbn1cclxuXHJcbi50ZXh0LXByZXZpZXctbW9kYWwgLnRleHQtcHJldmlldy1jb250YWluZXIge1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XHJcbiAgICBoZWlnaHQ6IDEwMCU7XHJcbn1cclxuXHJcbi50ZXh0LXByZXZpZXctbW9kYWwgLnByZXZpZXctY29udGFpbmVyIHtcclxuICAgIGZsZXg6IDE7XHJcbiAgICBvdmVyZmxvdy15OiBhdXRvO1xyXG4gICAgbWFyZ2luLWJvdHRvbTogMTZweDtcclxufVxyXG5cclxuLnRleHQtcHJldmlldy1tb2RhbCAuYnV0dG9uLWNvbnRhaW5lciB7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XHJcbiAgICBwYWRkaW5nOiA4cHggMDtcclxuICAgIGJvcmRlci10b3A6IDFweCBzb2xpZCB2YXIoLS1iYWNrZ3JvdW5kLW1vZGlmaWVyLWJvcmRlcik7XHJcbn1cclxuXHJcbi50ZXh0LXByZXZpZXctbW9kYWwgLmJ1dHRvbi1jb250YWluZXIgYnV0dG9uIHtcclxuICAgIHBhZGRpbmc6IDhweCAxNnB4O1xyXG59XHJcblxyXG4uZWxlZ2FudC1kb3dubG9hZC1idXR0b24ge1xyXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgdG9wOiAxMHB4O1xyXG4gICAgcmlnaHQ6IDEwcHg7XHJcbiAgICB3aWR0aDogNDBweDtcclxuICAgIGhlaWdodDogNDBweDtcclxuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcclxuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC45KTtcclxuICAgIGJveC1zaGFkb3c6IDAgMnB4IDhweCByZ2JhKDAsIDAsIDAsIDAuMSk7XHJcbiAgICBib3JkZXI6IG5vbmU7XHJcbiAgICBjdXJzb3I6IHBvaW50ZXI7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG4gICAgdHJhbnNpdGlvbjogYWxsIDAuM3MgZWFzZTtcclxuICAgIHotaW5kZXg6IDEwO1xyXG59XHJcblxyXG4uZWxlZ2FudC1kb3dubG9hZC1idXR0b246aG92ZXIge1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjBmMDtcclxuICAgIGJveC1zaGFkb3c6IDAgNHB4IDEycHggcmdiYSgwLCAwLCAwLCAwLjE1KTtcclxuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtMnB4KTtcclxufVxyXG5cclxuLmVsZWdhbnQtZG93bmxvYWQtYnV0dG9uIHN2ZyB7XHJcbiAgICBjb2xvcjogIzQyODVmNDsgIC8qIFx1NEY3Rlx1NzUyOFx1OEMzN1x1NkI0Q1x1ODRERFx1NjIxNlx1NTE3Nlx1NEVENlx1OTAwMlx1NTQwOFx1NEY2MFx1NUU5NFx1NzUyOFx1NzY4NFx1OTg5Q1x1ODI3MiAqL1xyXG59XHJcblxyXG4uZWxlZ2FudC1kb3dubG9hZC1idXR0b24uY2xpY2tlZCB7XHJcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDAuOSk7XHJcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZThlOGU4O1xyXG59XHJcblxyXG4vKiBcdTU3MjhcdTY2OTdcdTgyNzJcdTZBMjFcdTVGMEZcdTRFMEJcdTc2ODRcdTY4MzdcdTVGMEZcdThDMDNcdTY1NzQgKi9cclxuLnRoZW1lLWRhcmsgLmVsZWdhbnQtZG93bmxvYWQtYnV0dG9uIHtcclxuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoNTAsIDUwLCA1MCwgMC45KTtcclxufVxyXG5cclxuLnRoZW1lLWRhcmsgLmVsZWdhbnQtZG93bmxvYWQtYnV0dG9uOmhvdmVyIHtcclxuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoNjAsIDYwLCA2MCwgMC45KTtcclxufVxyXG5cclxuLnRoZW1lLWRhcmsgLmVsZWdhbnQtZG93bmxvYWQtYnV0dG9uIHN2ZyB7XHJcbiAgICBjb2xvcjogIzhhYjRmODsgIC8qIFx1NjY5N1x1ODI3Mlx1NkEyMVx1NUYwRlx1NEUwQlx1NzY4NFx1ODRERFx1ODI3MiAqL1xyXG59XHJcblxyXG4vKiBcdTZERkJcdTUyQTBcdTdGMjlcdTY1M0VcdTYzQTdcdTUyMzZcdTY4MzdcdTVGMEYgKi9cclxuLmltYWdlLXNoYXJlLW1vZGFsIC56b29tLWNvbnRyb2xzIHtcclxuICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XHJcbiAgICBnYXA6IDEwcHg7XHJcbiAgICBtYXJnaW4tYm90dG9tOiAxMHB4O1xyXG59XHJcblxyXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLnpvb20tYnV0dG9uIHtcclxuICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XHJcbiAgICB3aWR0aDogMzJweDtcclxuICAgIGhlaWdodDogMzJweDtcclxuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcclxuICAgIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWludGVyYWN0aXZlLWFjY2VudCk7XHJcbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcclxuICAgIGNvbG9yOiB2YXIoLS1pbnRlcmFjdGl2ZS1hY2NlbnQpO1xyXG4gICAgY3Vyc29yOiBwb2ludGVyO1xyXG4gICAgdHJhbnNpdGlvbjogYWxsIDAuMnMgZWFzZTtcclxufVxyXG5cclxuLmltYWdlLXNoYXJlLW1vZGFsIC56b29tLWJ1dHRvbjpob3ZlciB7XHJcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1pbnRlcmFjdGl2ZS1hY2NlbnQpO1xyXG4gICAgY29sb3I6IHZhcigtLXRleHQtb24tYWNjZW50KTtcclxufVxyXG5cclxuLmltYWdlLXNoYXJlLW1vZGFsIC56b29tLXRleHQge1xyXG4gICAgZm9udC1zaXplOiAxNHB4O1xyXG4gICAgZm9udC13ZWlnaHQ6IDUwMDtcclxuICAgIGNvbG9yOiB2YXIoLS10ZXh0LW5vcm1hbCk7XHJcbiAgICB3aWR0aDogNTBweDtcclxuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcclxufVxyXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBU0E7QUFDSTtBQUNBO0FBR0E7QUFBQTtBQUdKO0FBQ0k7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFHSjtBQUNJO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFHSjtBQUNJO0FBQUE7QUFHSjtBQUNJO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUdKO0FBQ0k7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBR0o7QUFDSTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFHSjtBQUNJO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBR0o7QUFDSTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFHSjtBQUNJO0FBQ0E7QUFBQTtBQUdKO0FBQ0k7QUFDQTtBQUFBO0FBR0o7QUFDSTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFHSjtBQUNJO0FBQ0E7QUFDQTtBQUFBO0FBR0o7QUFDSTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUdKO0FBQ0k7QUFDQTtBQUFBO0FBR0o7QUFDSTtBQUNBO0FBQUE7QUFHSjtBQUNJO0FBQUE7QUFHSjtBQUNJO0FBQ0E7QUFDQTtBQUFBO0FBR0o7QUFDSTtBQUNBO0FBQ0E7QUFBQTtBQUdKO0FBQ0k7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUdKO0FBQ0k7QUFBQTtBQUdKO0FBQ0k7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFHSjtBQUNJO0FBQ0E7QUFDQTtBQUFBO0FBR0o7QUFDSTtBQUFBO0FBR0o7QUFDSTtBQUNBO0FBQUE7QUFJSjtBQUNJO0FBQUE7QUFHSjtBQUNJO0FBQUE7QUFHSjtBQUNJO0FBQUE7QUFJSjtBQUNJO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUdKO0FBQ0k7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBR0o7QUFDSTtBQUNBO0FBQUE7QUFHSjtBQUNJO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTsiLAogICJuYW1lcyI6IFtdCn0K */ diff --git a/main.ts b/main.ts index 7f7fe69..f7c1110 100644 --- a/main.ts +++ b/main.ts @@ -59,10 +59,53 @@ class ImageGenerator { styleSheet.textContent = ` .markdown-here-wrapper { font-size: 16px; - line-height: 1.8em; - letter-spacing: 0.1em; + line-height: 2.0em; /* 增加行高 */ + letter-spacing: 0.12em; /* 增加字间距 */ } + /* 增加段落间距和内边距 */ + p { + margin: 1.8em 5px !important; + padding: 0.2em 0; + } + + /* 优化列表项间距 */ + li { + margin: 12px 0; + line-height: 1.8em; + } + + /* 改善标题样式 */ + h1, h2, h3, h4, h5, h6 { + margin: 28px 0 18px !important; + padding: 0.6em 1em !important; + line-height: 1.5em; + } + + /* 优化引用块样式 */ + blockquote, q { + padding: 10px 15px; + margin: 15px 0; + line-height: 1.8em; + } + + /* 列表项内容间距 */ + ul, ol { + padding-left: 25px; + margin: 15px 5px; + } + + /* 确保代码块不会挤压 */ + pre { + margin: 15px 0; + padding: 12px; + line-height: 1.5em; + } + + /* 添加内容容器的整体间距 */ + .markdown-preview-sizer { + padding: 10px 5px; + } pre, code { font-size: 14px; @@ -239,22 +282,28 @@ class ImageGenerator { const minHeight = 200; const finalHeight = Math.max(actualHeight, minHeight); - // 使用 html2canvas 渲染时使用计算出的高度 + // 增加像素密度和图像质量 const renderedCanvas = await html2canvas(tempDiv, { width: this.currentTemplate.width, height: finalHeight, backgroundColor: this.currentTemplate.id === 'dark' ? '#2d3436' : '#e8ecf9', - scale: 2, + scale: 3, // 增加到3提高清晰度 windowWidth: this.currentTemplate.width, windowHeight: finalHeight, - logging: true, + logging: false, // 减少日志输出 useCORS: 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`; clonedDiv.style.overflow = 'visible'; + // 增加文本渲染清晰度 + clonedDiv.style.textRendering = 'optimizeLegibility'; + clonedDiv.style['webkitFontSmoothing' as any] = 'antialiased'; + clonedDiv.style['mozOsxFontSmoothing' as any] = 'grayscale'; } } }); @@ -275,9 +324,20 @@ class ImageGenerator { } public getDataURL(): string { - return this.canvas.toDataURL('image/png'); + // 增加输出质量，使用PNG格式以保持最佳质量 + return this.canvas.toDataURL('image/png', 1.0); + } + public async downloadAsImage() { + // 获取当前活动文件的名称 + const activeFile = this.app.workspace.getActiveFile(); + const fileName = activeFile ? activeFile.basename : 'share-image'; + + const dataURL = this.getDataURL(); + const a = document.createElement('a'); + a.href = dataURL; + a.download = `${fileName}.png`; + a.click(); } - public async setTemplate(templateId: string) { const template = SHARE_TEMPLATES.find(t => t.id === templateId); if (template) { @@ -285,6 +345,11 @@ class ImageGenerator { await this.updateCanvas(); } } + + // 添加获取当前模板的方法 + public getCurrentTemplate(): ShareTemplate { + return this.currentTemplate; + } } class TextPreviewModal extends Modal { @@ -302,7 +367,13 @@ class TextPreviewModal extends Modal { contentEl.empty(); contentEl.addClass('image-share-modal'); + // 根据当前模板宽度设置弹出框宽度，加上一些边距 + const modalPadding = 48; // 左右各24px的内边距 + const initialWidth = this.imageGenerator.getCurrentTemplate().width + modalPadding; + contentEl.style.width = `${initialWidth}px`; + const resizableContainer = contentEl.createDiv({ cls: 'resizable-container' }); + const previewContainer = resizableContainer.createDiv({ cls: 'image-preview-container' }); // 创建顶部操作区 @@ -314,7 +385,7 @@ class TextPreviewModal extends Modal { // 创建画布容器 const canvasContainer = previewContainer.createDiv({ cls: 'canvas-container' }); - + // 创建模板选择器 SHARE_TEMPLATES.forEach(template => { const templateButton = templateSelector.createEl('button', { @@ -329,32 +400,109 @@ class TextPreviewModal extends Modal { await this.imageGenerator.setTemplate(template.id); canvasContainer.empty(); canvasContainer.appendChild(this.imageGenerator.getCanvas()); + + // 当模板变更时更新弹出框宽度 + const modalPadding = 48; // 与初始化时相同的边距 + const newWidth = this.imageGenerator.getCurrentTemplate().width + modalPadding; + contentEl.style.width = `${newWidth}px`; }; if (template.id === 'default') { templateButton.addClass('active'); } }); + // 添加缩放控制 + const zoomControls = previewContainer.createDiv({ cls: 'zoom-controls' }); + + const zoomOutBtn = zoomControls.createEl('button', { + cls: 'zoom-button zoom-out', + attr: { 'aria-label': '缩小预览' } + }); + zoomOutBtn.innerHTML = ''; + + const zoomText = zoomControls.createEl('span', { + cls: 'zoom-text', + text: '100%' + }); + + const zoomInBtn = zoomControls.createEl('button', { + cls: 'zoom-button zoom-in', + attr: { 'aria-label': '放大预览' } + }); + zoomInBtn.innerHTML = ''; + + // 缩放逻辑 + let zoomLevel = 100; + + zoomOutBtn.addEventListener('click', () => { + if (zoomLevel > 50) { + zoomLevel -= 10; + updateZoom(); + } + }); + + zoomInBtn.addEventListener('click', () => { + if (zoomLevel < 200) { + zoomLevel += 10; + updateZoom(); + } + }); + + const updateZoom = () => { + const canvas = canvasContainer.querySelector('canvas'); + if (canvas) { + canvas.style.width = `${zoomLevel}%`; + zoomText.textContent = `${zoomLevel}%`; + } + }; + // 等待初始画布渲染完成 await this.imageGenerator.updateCanvas(); canvasContainer.appendChild(this.imageGenerator.getCanvas()); - // 添加下载按钮 - const downloadButton = contentEl.createEl('button', { - cls: 'download-button', - attr: {'title': '下载图片'} + // 创建一个容器来包裹所有内容 + // const contentContainer = this.contentEl.createDiv({ + // cls: 'text-preview-container' + // }); + + // // 创建预览区域 + // const previewContainer = contentContainer.createDiv({ + // cls: 'preview-container' + // }); + + // // 将原有的预览内容放入预viewContainer + // this.imageGenerator.generatePreview(previewContainer); + + // // 创建底部按钮容器 + const buttonContainer = resizableContainer.createDiv({ + cls: 'download-button' + }); + + // 将下载按钮放入底部容器 + const downloadButton = buttonContainer.createEl('button', { + cls: 'elegant-download-button', + attr: { 'aria-label': '下载为图片' } }); - downloadButton.innerHTML = ` - - - `; - downloadButton.onclick = () => { - const link = document.createElement('a'); - link.download = 'share-image.png'; - link.href = this.imageGenerator.getDataURL(); - link.click(); - }; + // 使用SVG图标代替文本 + downloadButton.innerHTML = ` + + + + + + `; + + downloadButton.addEventListener('click', async () => { + // 添加点击反馈效果 + downloadButton.classList.add('clicked'); + setTimeout(() => downloadButton.classList.remove('clicked'), 300); + + await this.imageGenerator.downloadAsImage(); + }); + + // // 添加样式 + this.contentEl.addClass('text-preview-modal'); } onClose() { @@ -376,13 +524,13 @@ const SHARE_TEMPLATES: ShareTemplate[] = [ { id: 'default', name: '默认模板', - width: 800, + width: 400, render: async () => {} }, { id: 'dark', name: '深色模板', - width: 800, + width: 400, render: async () => {} } ]; diff --git a/styles.css b/styles.css index 3d19253..9b4dd58 100644 --- a/styles.css +++ b/styles.css @@ -10,6 +10,9 @@ If your plugin does not need CSS, delete this file. .image-share-modal { max-width: none; max-height: none; + /* 移除固定宽度，以便通过JavaScript动态设置 */ + /* width: 1000px; */ + transition: width 0.3s ease; } .image-share-modal .resizable-container { @@ -50,7 +53,7 @@ If your plugin does not need CSS, delete this file. height: 100%; display: flex; flex-direction: column; - padding: 20px 24px; + padding: 5px 5px; box-sizing: border-box; gap: 16px; position: relative; @@ -64,12 +67,14 @@ If your plugin does not need CSS, delete this file. display: flex; justify-content: center; align-items: flex-start; - padding: 16px; + padding: 2px; background: var(--background-secondary); border-radius: 8px; min-height: 200px; margin-bottom: 60px; width: 100%; + overflow: auto; + max-height: 70vh; } .image-share-modal h2 { @@ -116,6 +121,10 @@ If your plugin does not need CSS, delete this file. height: auto; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); + image-rendering: -webkit-optimize-contrast; + image-rendering: crisp-edges; + transform: translateZ(0); + backface-visibility: hidden; } .image-share-modal .template-selector { @@ -149,3 +158,108 @@ If your plugin does not need CSS, delete this file. .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 { + position: absolute; + top: 10px; + right: 10px; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.9); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + z-index: 10; +} + +.elegant-download-button:hover { + background-color: #f0f0f0; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + transform: translateY(-2px); +} + +.elegant-download-button svg { + color: #4285f4; /* 使用谷歌蓝或其他适合你应用的颜色 */ +} + +.elegant-download-button.clicked { + transform: scale(0.9); + background-color: #e8e8e8; +} + +/* 在暗色模式下的样式调整 */ +.theme-dark .elegant-download-button { + background-color: rgba(50, 50, 50, 0.9); +} + +.theme-dark .elegant-download-button:hover { + background-color: rgba(60, 60, 60, 0.9); +} + +.theme-dark .elegant-download-button svg { + color: #8ab4f8; /* 暗色模式下的蓝色 */ +} + +/* 添加缩放控制样式 */ +.image-share-modal .zoom-controls { + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + margin-bottom: 10px; +} + +.image-share-modal .zoom-button { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 50%; + border: 1px solid var(--interactive-accent); + background: transparent; + color: var(--interactive-accent); + cursor: pointer; + transition: all 0.2s ease; +} + +.image-share-modal .zoom-button:hover { + background: var(--interactive-accent); + color: var(--text-on-accent); +} + +.image-share-modal .zoom-text { + font-size: 14px; + font-weight: 500; + color: var(--text-normal); + width: 50px; + text-align: center; +}