@tnotesjs/ui 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tnotesjs/ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Shared Vue UI for TNotes built-in blocks — consumed by the TNotes SSG and Desk.",
   "type": "module",
   "exports": {
@@ -83,7 +83,7 @@
     "react-dom": "18.3.1",
     "sass": "^1.90.0",
     "shiki": "4.4.2",
-    "@tnotesjs/mindmap-core": "^0.2.3"
+    "@tnotesjs/mindmap-core": "^0.2.4"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",

package/src/components/Footprints/Footprints.vue

@@ -186,6 +186,9 @@ watch(
 <style scoped lang="scss">
 .tn-footprints {
   margin: 1rem 0;
+  padding: 12px 16px;
+  border: 1px solid var(--tn-c-divider);
+  border-radius: 8px;
   color: var(--tn-c-text);
 }
 
@@ -312,6 +315,7 @@ watch(
 .tn-footprints__modal-img {
   max-width: min(92vw, 960px);
   max-height: 88vh;
+  border-radius: 4px;
   object-fit: contain;
 }
 

package/src/components/ImagePreview/ImagePreview.vue

@@ -225,6 +225,7 @@ onBeforeUnmount(() => {
 .tn-image-preview > img {
   max-width: 90vw;
   max-height: 90vh;
+  border-radius: 4px;
   user-select: none;
   cursor: grab;
   transition: transform 100ms ease-out;

package/src/components/Mermaid/Mermaid.vue

@@ -502,8 +502,7 @@ watch(
 .tn-mermaid {
   position: relative;
   margin: 1rem 0;
-  /* Rest: no frame. Border appears with the action menu (hover / menu focus / copy feedback). */
-  border: 1px solid transparent;
+  border: 1px solid var(--tn-c-divider);
   border-radius: 8px;
   background: var(--tn-c-bg);
   overflow: hidden;

package/src/components/Mindmap/Mindmap.vue

@@ -1185,11 +1185,13 @@ onBeforeUnmount(() => {
 }
 .mindmap-canvas-host:deep(.mm-edit-input .inline-run.code) {
   padding: 0 4px;
+  border: 1px solid var(--tn-c-inline-code-border);
   border-radius: 4px;
-  background: color-mix(in srgb, var(--mm-canvas-bg) 82%, var(--mm-text) 18%);
-  color: var(--tn-c-danger, #e85d5d);
+  background: var(--tn-c-inline-code-bg);
+  color: inherit;
   font-family: var(--tn-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-size: 0.92em;
+  font-size: 1em;
+  font-weight: 400;
 }
 .mindmap-canvas-host:deep(.mm-edit-input .inline-run.link) {
   color: var(--mm-accent);
@@ -1326,7 +1328,7 @@ onBeforeUnmount(() => {
   max-width: min(100%, 560px);
   max-height: 360px;
   margin: 5px 0 12px 25px;
-  border-radius: 6px;
+  border-radius: 4px;
 }
 .mindmap-outline :deep(.is-bold) {
   font-weight: 700;
@@ -1346,11 +1348,14 @@ onBeforeUnmount(() => {
   background: var(--tn-c-mark-bg, rgba(255, 221, 0, 0.45));
 }
 .mindmap-outline :deep(.is-code) {
-  padding: 1px 5px;
+  padding: 0 4px;
+  border: 1px solid var(--tn-c-inline-code-border);
   border-radius: 4px;
-  background: var(--tn-c-bg-soft);
-  color: var(--tn-c-danger);
+  background: var(--tn-c-inline-code-bg);
+  color: inherit;
   font-family: var(--tn-font-mono);
+  font-size: 1em;
+  font-weight: 400;
 }
 .mindmap-outline :deep(.is-link) {
   color: var(--tn-c-brand);

package/src/components/Mindmap/editor/OutlineView.vue

@@ -2345,7 +2345,7 @@ function onDragUp() {
   position: relative;
   max-width: 100%;
   line-height: 0;
-  border-radius: 6px;
+  border-radius: 4px;
   overflow: hidden;
   background: color-mix(in srgb, var(--mm-text-dim) 12%, transparent);
   box-shadow: 0 0 0 1px color-mix(in srgb, var(--mm-text-dim) 25%, transparent);

package/src/components/Mindmap/editor/RichInlineEditor.vue

@@ -419,12 +419,14 @@ onBeforeUnmount(emitCommit)
   background: var(--tn-c-mark-bg, rgba(255, 221, 0, 0.45));
 }
 .rich-inline-editor :deep(.inline-run.code) {
-  padding: 2px 6px;
-  border-radius: 5px;
-  background: color-mix(in srgb, var(--mm-text) 18%, transparent);
-  color: #f08a6e;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 0.92em;
+  padding: 0 4px;
+  border: 1px solid var(--tn-c-inline-code-border, #e7e9e8);
+  border-radius: 4px;
+  background: var(--tn-c-inline-code-bg, rgba(0, 0, 0, 0.06));
+  color: inherit;
+  font-family: var(--tn-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 1em;
+  font-weight: 400;
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
 }

package/src/components/WordList/RightClickMenu.vue

@@ -1,5 +1,10 @@
 <template>
-  <div v-if="show" class="rightClickMenu" :style="{ left: x + 'px', top: y + 'px' }">
+  <div
+    v-if="show"
+    class="rightClickMenu"
+    :style="{ left: x + 'px', top: y + 'px' }"
+    @mousedown.stop
+  >
     <div v-if="showPin" class="menuItem" @click="handlePin">📌 Pin</div>
     <div class="menuItem" @click="(e) => handlePronounce(e, 'en-GB')">📢 Pronounce（英）</div>
     <div class="menuItem" @click="(e) => handlePronounce(e, 'en-US')">📢 Pronounce（美）</div>
@@ -61,12 +66,12 @@ const handleReset = () => {
 .rightClickMenu {
   position: fixed;
   z-index: 99999;
-  background: #2c2c2c;
-  border: 1px solid #444;
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+  background: var(--tn-c-bg-elv, var(--tn-c-bg));
+  border: 1px solid var(--tn-c-divider);
+  border-radius: 8px;
+  box-shadow: var(--tn-shadow-2);
   font-size: 13px;
-  color: #eee;
+  color: var(--tn-c-text);
   cursor: pointer;
   user-select: none;
 }
@@ -75,7 +80,7 @@ const handleReset = () => {
   padding: 8px 16px;
 
   &:hover {
-    background-color: #444;
+    background: var(--tn-c-hover);
   }
 }
 </style>

package/src/components/WordList/WordList.vue

@@ -48,6 +48,7 @@ const sortedWords = computed(() => {
   if (!props.needSort) return unique
   return unique.sort((a, b) => a.toLowerCase().charCodeAt(0) - b.toLowerCase().charCodeAt(0))
 })
+const islandWords = computed(() => encodeURIComponent(JSON.stringify(sortedWords.value)))
 const checkedStates = ref({})
 
 const updateCheckedState = (word, isChecked) => {
@@ -84,6 +85,7 @@ const cardX = ref(0)
 const cardY = ref(0)
 const cardContent = ref('')
 const wordCache = ref({})
+const wordMarkdown = ref({})
 
 // 加载失败的词汇（也就是词库中不存在的词汇）
 const failedWords = ref({})
@@ -112,6 +114,66 @@ let currentWordForContextMenu = null
 // 防抖计时器
 let hoverTimer = null
 
+function wordSlug(word) {
+  return encodeURIComponent(word.toLowerCase().replaceAll(/\s/g, '_'))
+}
+
+function wordGithubUrl(word) {
+  return `${props.wordsBaseUrl}${wordSlug(word)}.md`
+}
+
+async function ensureWord(word) {
+  if (wordCache.value[word]) return
+  const url = `${props.wordsRawBaseUrl}${wordSlug(word)}.md`
+  try {
+    const res = await fetch(url)
+    if (res.ok) {
+      const text = await res.text()
+      wordMarkdown.value[word] = text
+      wordCache.value[word] = marked.parse(text)
+    } else {
+      wordCache.value[word] = `<em>无法加载单词内容</em>`
+      failedWords.value[word] = true
+    }
+  } catch (err) {
+    console.error(err)
+    wordCache.value[word] = `<em>加载失败</em>`
+    failedWords.value[word] = true
+  }
+}
+
+const copiedCardId = ref(null)
+let copiedTimer = null
+
+async function copyCardMarkdown(card, event) {
+  event.stopPropagation()
+  const markdown = wordMarkdown.value[card.word]
+  if (!markdown) return
+  try {
+    await navigator.clipboard.writeText(markdown)
+  } catch {
+    const field = document.createElement('textarea')
+    field.value = markdown
+    field.setAttribute('readonly', '')
+    field.style.position = 'fixed'
+    field.style.left = '-9999px'
+    document.body.append(field)
+    field.select()
+    document.execCommand('copy')
+    field.remove()
+  }
+  copiedCardId.value = card.id
+  clearTimeout(copiedTimer)
+  copiedTimer = setTimeout(() => {
+    copiedCardId.value = null
+  }, 1500)
+}
+
+function openCardOnGithub(card, event) {
+  event.stopPropagation()
+  window.open(wordGithubUrl(card.word), '_blank', 'noopener')
+}
+
 /**
  * 显示单词卡片
  */
@@ -128,29 +190,8 @@ const showWordCard = async (e, word) => {
       cardY.value = clientY + 10
       showCard.value = true
 
-      if (wordCache.value[word]) {
-        cardContent.value = wordCache.value[word]
-        resolve()
-        return
-      }
-
-      const url = `${props.wordsRawBaseUrl}${encodeURIComponent(
-        word.toLowerCase().replaceAll(/\s/g, '_')
-      )}.md`
-      try {
-        const res = await fetch(url)
-        if (res.ok) {
-          let text = await res.text()
-          text = marked.parse(text)
-          wordCache.value[word] = text
-          cardContent.value = text
-        } else {
-          cardContent.value = `<em>无法加载单词内容</em>`
-        }
-      } catch (err) {
-        console.error(err)
-        cardContent.value = `<em>加载失败</em>`
-      }
+      await ensureWord(word)
+      cardContent.value = wordCache.value[word] || `<em>加载失败</em>`
       resolve()
     }, 300)
   })
@@ -208,28 +249,8 @@ const preloadWords = async () => {
   for (let i = 0; i < wordsToPreload.length; i++) {
     const word = wordsToPreload[i]
 
-    // 如果已经缓存过，跳过
     if (wordCache.value[word]) continue
-
-    const url = `${props.wordsRawBaseUrl}${encodeURIComponent(
-      word.toLowerCase().replaceAll(/\s/g, '_')
-    )}.md`
-    try {
-      const res = await fetch(url)
-      if (res.ok) {
-        let text = await res.text()
-        text = marked.parse(text)
-        wordCache.value[word] = text
-        console.log(`✅ 预加载完成: ${word}`)
-      } else {
-        wordCache.value[word] = `<em>无法加载单词内容</em>`
-        failedWords.value[word] = true
-      }
-    } catch (err) {
-      console.error(`❌ 加载失败: ${word}`, err)
-      wordCache.value[word] = `<em>加载失败</em>`
-      failedWords.value[word] = true
-    }
+    await ensureWord(word)
 
     // 可选：加个延迟避免并发请求过多
     await new Promise((resolve) => setTimeout(resolve, 200))
@@ -446,6 +467,7 @@ onMounted(() => {
  */
 onUnmounted(() => {
   clearTimeout(hoverTimer)
+  clearTimeout(copiedTimer)
   if (typeof document !== 'undefined') {
     document.removeEventListener('mousemove', onDragging)
     document.removeEventListener('mouseup', stopDrag)
@@ -455,7 +477,12 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="tn-word-list">
+  <div
+    class="tn-word-list"
+    data-tn-island="word-list"
+    :data-words="islandWords"
+    :data-need-sort="needSort ? 'true' : 'false'"
+  >
     <ol>
       <li
         v-for="(word, index) in sortedWords"
@@ -515,10 +542,60 @@ onUnmounted(() => {
         @mousedown="(e) => startDrag(card, e)"
         @click="bringToFront(card)"
       >
+        <div class="wordCardTools">
+          <button
+            type="button"
+            class="cardTool"
+            aria-label="在 GitHub 打开"
+            title="在 GitHub 打开"
+            @mousedown.stop
+            @click.stop="openCardOnGithub(card, $event)"
+          >
+            <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+              <path
+                fill="currentColor"
+                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"
+              />
+            </svg>
+          </button>
+          <button
+            type="button"
+            class="cardTool"
+            :aria-label="copiedCardId === card.id ? '已复制' : '复制 Markdown'"
+            :title="copiedCardId === card.id ? '已复制' : '复制 Markdown'"
+            @mousedown.stop
+            @click.stop="copyCardMarkdown(card, $event)"
+          >
+            <svg
+              v-if="copiedCardId !== card.id"
+              viewBox="0 0 24 24"
+              width="16"
+              height="16"
+              aria-hidden="true"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.8"
+                d="M9 9h10v10H9zM5 15V5h10"
+              />
+            </svg>
+            <svg v-else viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.8"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="m5 12 5 5L20 7"
+              />
+            </svg>
+          </button>
+        </div>
         <div class="wordCardContentWrapper">
           <div class="wordCardContent" v-html="card.content"></div>
         </div>
-        <button class="closeBtn" @click.stop="removeCard(card.id)">✖</button>
+        <button class="closeBtn" @mousedown.stop @click.stop="removeCard(card.id)">✖</button>
         <div class="resizeHandle" @mousedown.stop="startResize(card, $event)"></div>
       </div>
     </template>
@@ -549,11 +626,41 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .tn-word-list {
+  padding: 12px 16px;
+  border: 1px solid var(--tn-c-divider);
+  border-radius: 8px;
+
   // Checkbox 样式
   input[type='checkbox'] {
-    margin: 8px;
-    transform: scale(1.3);
+    appearance: none;
+    -webkit-appearance: none;
+    position: relative;
+    box-sizing: border-box;
+    flex: none;
+    width: 16px;
+    height: 16px;
+    margin: 0 8px;
+    border: 1px solid var(--tn-c-task-check-border);
+    border-radius: 4px;
+    background: var(--tn-c-task-check-bg);
     cursor: pointer;
+
+    &:checked {
+      border-color: var(--tn-c-task-check);
+      background: var(--tn-c-task-check);
+    }
+
+    &:checked::after {
+      content: '';
+      position: absolute;
+      left: 4.5px;
+      top: 1px;
+      width: 4px;
+      height: 9px;
+      border: solid #fff;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
   }
 
   // 链接样式
@@ -577,8 +684,9 @@ onUnmounted(() => {
 
   // 单词列表样式
   ol {
-    list-style-type: decimal;
-    padding-left: 20px;
+    list-style: none;
+    margin: 0;
+    padding-left: 0;
 
     li {
       display: flex;
@@ -599,13 +707,12 @@ onUnmounted(() => {
   }
 }
 
-// 单词卡片样式（🌑 暗色悬浮卡片）
 .wordCard {
   position: fixed;
   z-index: 9999;
-  background: #1e1e1e;
-  border: 1px solid #333;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  background: var(--tn-c-bg-elv, var(--tn-c-bg));
+  border: 1px solid var(--tn-c-divider);
+  box-shadow: var(--tn-shadow-2);
   padding: 12px 16px;
   max-width: 600px;
   min-width: 200px;
@@ -613,12 +720,11 @@ onUnmounted(() => {
   font-size: 14px;
   line-height: 1.4;
   border-radius: 8px;
-  color: #eee;
+  color: var(--tn-c-text);
   pointer-events: auto;
-  font-family: sans-serif;
+  font-family: var(--tn-font-sans, sans-serif);
   cursor: move;
 
-  // 关闭按钮
   .closeBtn {
     position: absolute;
     right: 5px;
@@ -627,19 +733,49 @@ onUnmounted(() => {
     border: none;
     font-size: 16px;
     cursor: pointer;
-    color: #ccc;
+    color: var(--tn-c-text-2);
 
     &:hover {
-      color: white;
+      color: var(--tn-c-text);
     }
   }
 }
 
 // 卡片内容包裹器
+.wordCardTools {
+  position: absolute;
+  top: 6px;
+  left: 8px;
+  z-index: 2;
+  display: flex;
+  gap: 2px;
+}
+
+.cardTool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--tn-c-text-2);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--tn-c-hover);
+    color: var(--tn-c-text);
+  }
+}
+
 .wordCardContentWrapper {
   width: 100%;
   height: 100%;
   overflow: auto;
+  box-sizing: border-box;
+  padding-top: 22px;
 }
 
 // 卡片内容样式
@@ -657,13 +793,13 @@ onUnmounted(() => {
   bottom: 0;
   width: 12px;
   height: 12px;
-  background-color: #666;
+  background-color: var(--tn-c-text-2);
   cursor: nwse-resize;
   z-index: 2;
   border-radius: 50%;
 
   &:hover {
-    background-color: #aaa;
+    background-color: var(--tn-c-text);
   }
 }
 </style>

package/src/excalidraw/ExcalidrawSvg.vue

@@ -105,12 +105,13 @@ defineExpose({ state, errorReason })
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--tn-excalidraw-bg, transparent);
 }
 .tn-excalidraw-view__image {
   max-width: 100%;
   max-height: 100%;
+  border-radius: 4px;
   object-fit: contain;
 }
 .tn-excalidraw-view__placeholder {

package/src/styles/prose.css

@@ -47,15 +47,15 @@
   line-height: var(--tn-heading-6-line);
 }
 :is(.tn-prose, .vp-doc) :where(a) {
-  color: var(--tn-c-brand);
+  color: var(--tn-c-link);
   text-decoration: none;
-  font-weight: 500;
+  font-weight: 400;
   overflow-wrap: anywhere;
   word-break: break-word;
 }
 :is(.tn-prose, .vp-doc) :where(a:hover) {
-  color: var(--tn-c-brand-hover);
-  text-decoration: underline;
+  color: var(--tn-c-link);
+  text-decoration: none;
 }
 :is(.tn-prose, .vp-doc) :where(ul, ol) {
   padding-left: 1.5rem;
@@ -106,11 +106,15 @@
   background-size: 12px 12px;
 }
 :is(.tn-prose, .vp-doc) :where(:not(pre) > code) {
-  color: var(--tn-c-brand);
-  background: var(--tn-c-default-soft);
+  color: inherit;
+  background: var(--tn-c-inline-code-bg);
+  border: 1px solid var(--tn-c-inline-code-border);
   border-radius: 4px;
-  font: 0.875em var(--tn-font-mono);
-  padding: 3px 6px;
+  margin: 1px 3px;
+  padding: 0 4px;
+  font-family: var(--tn-font-mono);
+  font-size: 1em;
+  font-weight: 400;
 }
 :is(.tn-prose, .vp-doc) :where(mark) {
   color: inherit;
@@ -161,6 +165,13 @@
   max-width: 100%;
   height: auto;
 }
+/* 笔记里的图片默认 4px 圆角。Desk 和静态站共用；按钮里的图标保持直角。 */
+:is(.tn-prose, .vp-doc, .live-editor) :where(img) {
+  border-radius: 4px;
+}
+:is(.tn-prose, .vp-doc, .live-editor) button img {
+  border-radius: 0;
+}
 :is(.tn-prose, .vp-doc) :where(figure.tn-image) {
   display: block;
   width: fit-content;
@@ -180,6 +191,14 @@
   width: 100%;
   height: auto;
 }
+
+/* 正文图片边界。Desk 可视化图和静态站图共用；Swiper 的边画在 .tn-swiper 上。 */
+:is(.tn-prose, .vp-doc) :where(figure.tn-image > img),
+.cm-lp-image-frame > img,
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block img) {
+  border: 1px solid var(--tn-c-media-edge);
+  border-radius: 4px;
+}
 :is(.tn-prose, .vp-doc) :where(figure.tn-image > figcaption),
 :is(.tn-prose, .vp-doc) :where(figcaption) {
   display: block;

package/src/styles/swiper.css

@@ -2,16 +2,16 @@
 
 .tn-swiper {
   margin: 1rem 0;
-  overflow: visible;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
+  overflow: hidden;
+  border: 1px solid var(--tn-c-media-edge);
+  border-radius: 4px;
+  box-shadow: none;
   background: transparent;
   padding: 0;
-  border: none;
 }
 
 .tn-swiper:hover {
-  box-shadow: 0 4px 16px rgb(0 0 0 / 0.28);
+  box-shadow: none;
 }
 
 .tn-swiper-tabs {
@@ -22,7 +22,6 @@
   overflow-x: auto;
   overflow-y: hidden;
   border-bottom: 1px solid var(--tn-c-divider);
-  border-radius: 8px 8px 0 0;
   background: var(--tn-c-bg-soft);
   box-shadow: inset 0 -1px var(--tn-c-divider);
 }
@@ -125,7 +124,6 @@
   width: 100%;
   overflow: hidden;
   margin: 0;
-  border-radius: 0 0 8px 8px;
   background: var(--tn-c-bg);
 }
 
@@ -147,5 +145,35 @@
   max-width: 100%;
   height: auto;
   margin: 0 auto;
+  border: 0;
+  border-radius: 4px;
   object-fit: contain;
 }
+
+.tn-swiper .swiper-slide.is-align-left img {
+  margin-left: 0;
+  margin-right: auto;
+}
+
+.tn-swiper .swiper-slide.is-align-right img {
+  margin-left: auto;
+  margin-right: 0;
+}
+
+.tn-swiper.is-empty .swiper-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 180px;
+  border: 0;
+  border-radius: 0;
+  background: var(--tn-c-bg-soft);
+}
+
+.tn-swiper-empty {
+  margin: 0;
+  color: var(--tn-c-text-2);
+  font-size: 14px;
+  line-height: 1.5;
+  text-align: center;
+}

package/src/styles/tokens.css

@@ -12,9 +12,18 @@
   --tn-c-bg-input: #f6f6f7;
   --tn-c-divider: #e2e2e3;
   --tn-c-divider-strong: #c2c2c4;
+  /* 正文图片和 Swiper 外框。浅色里分割线就能和白底分开。 */
+  --tn-c-media-edge: var(--tn-c-divider);
   --tn-c-hover: rgba(142, 150, 170, 0.14);
   --tn-c-highlight: rgba(100, 108, 255, 0.16);
   --tn-c-brand-soft: var(--tn-c-highlight);
+  /* 阅读选区。语雀正文 ::selection：rgba(27, 162, 227, 0.2)，字色不改。 */
+  --tn-c-selection: rgba(27, 162, 227, 0.2);
+  /* 正文链接。语雀看得见的字色是 #3B82CE，悬停不变，没有底。 */
+  --tn-c-link: #3b82ce;
+  /* 行内代码。语雀 ne-code-content：黑 6% 底，浅边 #e7e9e8，字色跟正文。 */
+  --tn-c-inline-code-bg: rgba(0, 0, 0, 0.06);
+  --tn-c-inline-code-border: #e7e9e8;
   --tn-c-success: #18794e;
   --tn-c-warning: #915930;
   --tn-c-danger: #b8272c;
@@ -30,11 +39,11 @@
   --tn-c-task-check-bg: #ffffff;
   --tn-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12);
   --tn-font-sans:
-    'Punctuation SC', Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial,
+    sans-serif, 'Segoe UI', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
   --tn-font-mono: 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
-  --tn-prose-size: 16px;
-  --tn-prose-line-height: 28px;
+  --tn-prose-size: 15px;
+  --tn-prose-line-height: 26.1px;
   --tn-heading-weight: 600;
   --tn-heading-1-size: 32px;
   --tn-heading-1-line: 40px;
@@ -63,7 +72,14 @@
   --tn-c-bg-input: #161618;
   --tn-c-divider: #2e2e32;
   --tn-c-divider-strong: #3c3f44;
+  /* 暗色分割线贴近编辑区，掺文字色后白底图和深色图都能看见边。 */
+  --tn-c-media-edge: color-mix(in srgb, var(--tn-c-text-2) 42%, var(--tn-c-bg));
   --tn-c-hover: rgba(101, 117, 133, 0.16);
+  /* 同一青色。暗底上 0.2 太淡，提高到 0.35 才看得清。 */
+  --tn-c-selection: rgba(27, 162, 227, 0.35);
+  --tn-c-link: #8ebef5;
+  --tn-c-inline-code-bg: rgba(255, 255, 255, 0.08);
+  --tn-c-inline-code-border: rgba(255, 255, 255, 0.12);
   --tn-c-success: #3dd68c;
   --tn-c-warning: #f9b44e;
   --tn-c-danger: #f66f81;

package/src/swiper/hydrate.ts

@@ -47,6 +47,13 @@ export function wrapSlideIndex(index: number, length: number, delta: -1 | 1): nu
   return (index + delta + length) % length
 }
 
+export const SWIPER_EMPTY_TEXT = 'empty swiper'
+
+/** 没有图片幻灯片时的壳。Desk 与站点用同一段结构。 */
+export function emptySwiperMarkup(): string {
+  return `<div class="tn-swiper is-empty"><div class="swiper-container"><p class="tn-swiper-empty">${SWIPER_EMPTY_TEXT}</p></div></div>`
+}
+
 const READY = 'tnSwiperReady'
 
 /**
@@ -76,6 +83,7 @@ export function hydrateTnSwipers(root: ParentNode = document): number {
 }
 
 function hydrateOne(host: HTMLElement): boolean {
+  if (host.classList.contains('is-empty')) return true
   const tabs = host.querySelector<HTMLElement>('.tn-swiper-tabs')
   const wrapper = host.querySelector<HTMLElement>('.swiper-wrapper')
   if (!wrapper) return false