From 6335c1c4eb6301ae31ff7f1ac391eb37df8b417c Mon Sep 17 00:00:00 2001 From: terwer Date: Wed, 22 Jan 2025 14:18:44 +0800 Subject: [PATCH 1/2] fix: content overflow --- apps/app/assets/css/siyuan.styl | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/app/assets/css/siyuan.styl b/apps/app/assets/css/siyuan.styl index 3fa73437..2db88f1c 100644 --- a/apps/app/assets/css/siyuan.styl +++ b/apps/app/assets/css/siyuan.styl @@ -53,4 +53,8 @@ width 22px .protyle-wysiwyg .h6 img.emoji, .b3-typography h6 img.emoji - width 20px \ No newline at end of file + width 20px + +/* 避免正文出现横向滚动条 */ +.protyle-content + overflow hidden From 6a8c5da3d66580e101c8b228d6fc8f5fd5f5761d Mon Sep 17 00:00:00 2001 From: terwer Date: Wed, 22 Jan 2025 14:55:59 +0800 Subject: [PATCH 2/2] feat: add memo support --- apps/app/assets/css/index.styl | 2 + apps/app/assets/css/memo.styl | 22 ++++++ apps/app/components/static/content/Main.vue | 1 + apps/app/plugins/013.memo.client.ts | 88 +++++++++++++++++++++ apps/app/plugins/014.memo.server.ts | 13 +++ 5 files changed, 126 insertions(+) create mode 100644 apps/app/assets/css/memo.styl create mode 100644 apps/app/plugins/013.memo.client.ts create mode 100644 apps/app/plugins/014.memo.server.ts diff --git a/apps/app/assets/css/index.styl b/apps/app/assets/css/index.styl index 8107d35c..7aa911d9 100644 --- a/apps/app/assets/css/index.styl +++ b/apps/app/assets/css/index.styl @@ -22,6 +22,8 @@ body @import "./db.styl" // 折叠块 @import "./fold.styl" +// 备注 +@import "./memo.styl" // 其他修复样式 diff --git a/apps/app/assets/css/memo.styl b/apps/app/assets/css/memo.styl new file mode 100644 index 00000000..42555574 --- /dev/null +++ b/apps/app/assets/css/memo.styl @@ -0,0 +1,22 @@ +/* s-feat-tooltip 样式 */ +.s-feat-tooltip + background-color #333 // 默认黑色背景 + color #fff // 白色文字 + font-size 12px // 字体大小 + padding 8px // 增加 padding + border-radius 4px // 边框圆角 + box-shadow 0 2px 10px rgba(0, 0, 0, 0.5) // 深色阴影 + pointer-events none + position absolute + display none + z-index 9999 // 保证提示框显示在前面 + word-wrap break-word // 自动换行 + line-height 1.5 + +/* 针对暗黑模式下的样式 */ +html[data-theme-mode="dark"] .s-feat-tooltip + background-color #222 // 暗黑模式下背景色 + color #e0e0e0 // 暗黑模式下文字颜色 + box-shadow 0 2px 10px rgba(0, 0, 0, 0.8) // 更深的阴影 + line-height 2 // 更大行高，增加文本行间距 + max-width 350px // 暗黑模式下也增加最大宽度 diff --git a/apps/app/components/static/content/Main.vue b/apps/app/components/static/content/Main.vue index 57922b90..c2402071 100644 --- a/apps/app/components/static/content/Main.vue +++ b/apps/app/components/static/content/Main.vue @@ -42,6 +42,7 @@ const VNode = () => v-db v-embedblock v-fold + v-desc class="protyle-wysiwyg protyle-wysiwyg--attr" spellcheck="false" contenteditable="false" diff --git a/apps/app/plugins/013.memo.client.ts b/apps/app/plugins/013.memo.client.ts new file mode 100644 index 00000000..b68c57b4 --- /dev/null +++ b/apps/app/plugins/013.memo.client.ts @@ -0,0 +1,88 @@ +/* + * GNU GENERAL PUBLIC LICENSE + * Version 3, 29 June 2007 + * + * Copyright (C) 2025 Terwer, Inc. + * Everyone is permitted to copy and distribute verbatim copies + * of this license document, but changing it is not allowed. + */ + +/** + * 备注插件 + * https://github.com/nuxt/nuxt/issues/13382 + * client = browser only + * + * @author terwer + * @version 6.1.0 + * @since 6.1.0 + */ +/** + * 备注插件 + * https://github.com/nuxt/nuxt/issues/13382 + * client = browser only + * + * @author terwer + * @version 6.1.0 + * @since 6.1.0 + */ +export default defineNuxtPlugin(({ vueApp }) => { + vueApp.directive("desc", { + mounted (el: HTMLElement, binding: any) { + // 获取所有包含 inline-memo 内容的元素 + const inlineMemoElements = document.querySelectorAll("[data-type=\"inline-memo\"]") as NodeListOf + + inlineMemoElements.forEach((el) => { + // 创建 tooltip 元素 + const tooltip = document.createElement("div") + const tooltipId = `tooltip-${Math.random().toString(36).slice(2, 11)}` // 使用 slice 替代 substr + tooltip.setAttribute("data-tooltip-id", tooltipId) // 添加唯一的 data 属性 + tooltip.classList.add("s-feat-tooltip") // 使用 s-feat-tooltip 作为类名 + tooltip.style.position = "absolute" + tooltip.style.pointerEvents = "none" + tooltip.style.display = "none" + tooltip.style.maxWidth = "300px" // 最大宽度，避免超出屏幕 + tooltip.style.wordWrap = "break-word" // 自动换行 + document.body.appendChild(tooltip) + + // 监听元素的鼠标进入、移动、离开事件 + el.addEventListener("mouseenter", (event: MouseEvent) => { + const content = el.getAttribute("data-inline-memo-content") + tooltip.textContent = content || "" // 如果没有 content 则设置为空字符串 + tooltip.style.display = "block" + + // 获取目标元素的位置 + const rect = el.getBoundingClientRect() + + // 计算 tooltip 距离浏览器右边的剩余空间 + const rightSpace = window.innerWidth - rect.right + + // 如果剩余空间不足，tooltip 将显示在左侧 + if (rightSpace < tooltip.offsetWidth + 20) { + tooltip.style.left = `${rect.left - tooltip.offsetWidth - 10}px` // 调整到左侧显示 + } else { + tooltip.style.left = `${rect.right + 10}px` // 右侧显示 + } + + tooltip.style.top = `${rect.top}px` // 保持和目标元素的顶部对齐 + }) + + el.addEventListener("mousemove", (event: MouseEvent) => { + const rect = el.getBoundingClientRect() + tooltip.style.left = `${rect.right + 10}px` // 保持在右侧 + tooltip.style.top = `${rect.top}px` // 保持和目标元素的顶部对齐 + }) + + el.addEventListener("mouseleave", () => { + tooltip.style.display = "none" + }) + }) + }, + unmounted () { + // 清理所有 tooltip 元素 + const inlineMemoElements = document.querySelectorAll("[data-tooltip-id]") as NodeListOf + inlineMemoElements.forEach((tooltip) => { + tooltip.remove() // 移除特定的 tooltip + }) + } + }) +}) diff --git a/apps/app/plugins/014.memo.server.ts b/apps/app/plugins/014.memo.server.ts new file mode 100644 index 00000000..81570565 --- /dev/null +++ b/apps/app/plugins/014.memo.server.ts @@ -0,0 +1,13 @@ +/* + * GNU GENERAL PUBLIC LICENSE + * Version 3, 29 June 2007 + * + * Copyright (C) 2025 Terwer, Inc. + * Everyone is permitted to copy and distribute verbatim copies + * of this license document, but changing it is not allowed. + */ + +// stub - block nuxt getSSRProps error +export default defineNuxtPlugin(({ vueApp }) => { + vueApp.directive("desc", {}) +})