@tnotesjs/ui 0.3.3 → 0.4.1

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;
@@ -22,17 +31,19 @@
   --tn-c-warning-soft: rgba(234, 179, 8, 0.14);
   --tn-c-danger-soft: rgba(244, 63, 94, 0.14);
   --tn-c-default-soft: #e8e8e9;
+  /* ==高亮== 的底色：正文、Desk 编辑器、SSG 共用 */
+  --tn-c-mark-bg: rgba(255, 221, 0, 0.45);
   /* 任务列表复选框（对齐语雀）：16px 方框、圆角 4px、选中填充品牌绿 + 白色对勾。 */
   --tn-c-task-check: #00b96b;
   --tn-c-task-check-border: #d9d9d9;
   --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;
@@ -61,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;
@@ -69,6 +87,7 @@
   --tn-c-warning-soft: rgba(234, 179, 8, 0.16);
   --tn-c-danger-soft: rgba(244, 63, 94, 0.14);
   --tn-c-default-soft: #2e2e32;
+  --tn-c-mark-bg: rgba(250, 204, 21, 0.32);
   --tn-c-task-check-border: #4a4d54;
   --tn-c-task-check-bg: transparent;
   --tn-shadow-2: 0 4px 12px rgb(0 0 0 / 0.35);

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

package/src/entries/mindmap-editor.ts

@@ -1,37 +0,0 @@
-/**
- * 思维导图编辑器外壳入口：Web 与 VS Code 扩展共用同一套三视图 UI。
- *
- * 与 `./mindmap` 的分工：`./mindmap` 是 SSG / Desk 笔记里内嵌的「预览 + 可选编辑」块
- * （`components/Mindmap/Mindmap.vue`，自带 `--mm-*` 主题变量与只读渲染）；本入口导出它
- * 内部复用的编辑器组件，供自带页面外壳的宿主（Web 整页、VS Code webview）直接组装。
- *
- * 宿主职责：`MindmapSession` 归属、`--mm-*` 变量定义、落盘 / 剪贴板 / 图片写入
- * （`apps/mindmap-web`、`apps/mindmap-vscode`）。浮层默认不 teleport，嵌入笔记的宿主
- * 保持默认即可；整页宿主传 `teleport-to="body"`。
- */
-export { default as AppIcon } from '../components/Mindmap/editor/AppIcon.vue'
-export { default as CanvasContextMenu } from '../components/Mindmap/editor/CanvasContextMenu.vue'
-export { default as CollapseMenu } from '../components/Mindmap/editor/CollapseMenu.vue'
-export { default as IconButton } from '../components/Mindmap/editor/IconButton.vue'
-export { default as LinkPopover } from '../components/Mindmap/editor/LinkPopover.vue'
-export { default as MarkdownView } from '../components/Mindmap/editor/MarkdownView.vue'
-export { default as MindmapView } from '../components/Mindmap/editor/MindmapView.vue'
-export { default as OutlineView } from '../components/Mindmap/editor/OutlineView.vue'
-export { default as RichInlineEditor } from '../components/Mindmap/editor/RichInlineEditor.vue'
-export { default as SearchBar } from '../components/Mindmap/editor/SearchBar.vue'
-export { default as SelectionToolbar } from '../components/Mindmap/editor/SelectionToolbar.vue'
-export { default as FocusBreadcrumbs } from '../components/Mindmap/FocusBreadcrumbs.vue'
-
-export { insertImageIntoSource } from '../components/Mindmap/editor/imagePaste'
-export {
-  pasteCanvasOutline,
-  readMindmapClipboard,
-  writeMindmapClipboard
-} from '../components/Mindmap/editor/mindmapClipboard'
-export { resolveAfterDropLevel } from '../components/Mindmap/editor/outlineDrag'
-export type { DropLevel } from '../components/Mindmap/editor/outlineDrag'
-export {
-  altShortcut,
-  isApplePlatform,
-  primaryShortcut
-} from '../components/Mindmap/editor/platform'