Merge pull request #621 from terwer/dev

feat: add memo support

apps/app/assets/css/index.styl

@@ -22,6 +22,8 @@ body
 @import "./db.styl"
 // 折叠块
 @import "./fold.styl"
+// 备注
+@import "./memo.styl"
 
 // 其他修复样式
 

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  // 暗黑模式下也增加最大宽度

apps/app/assets/css/siyuan.styl

@@ -53,4 +53,8 @@
   width 22px
 
 .protyle-wysiwyg .h6 img.emoji, .b3-typography h6 img.emoji
-  width 20px
+  width 20px
+
+/* 避免正文出现横向滚动条 */
+.protyle-content
+  overflow hidden

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"

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. <https://terwer.space/>
+ *  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<HTMLElement>
+
+      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<HTMLElement>
+      inlineMemoElements.forEach((tooltip) => {
+        tooltip.remove() // 移除特定的 tooltip
+      })
+    }
+  })
+})

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. <https://terwer.space/>
+ *  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", {})
+})