@incremark/vue 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incremark/vue",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Incremark Vue 3 集成",
   "type": "module",
   "main": "./dist/index.js",
@@ -14,7 +14,7 @@
     "./components/*": {
       "import": "./src/components/*.vue"
     },
-    "./style.css": "./dist/index.css"
+    "./style.css": "@incremark/theme/styles.css"
   },
   "files": [
     "dist",
@@ -22,8 +22,10 @@
   ],
   "dependencies": {
     "shiki": "^3.20.0",
-    "@incremark/core": "0.1.0",
-    "@incremark/devtools": "0.1.0"
+    "@incremark/core": "0.2.0",
+    "@incremark/devtools": "0.2.0",
+    "@incremark/shared": "0.2.0",
+    "@incremark/theme": "0.2.0"
   },
   "peerDependencies": {
     "vue": "^3.3.0",
@@ -58,7 +60,7 @@
     "url": "https://github.com/kingshuaishuai/incremark.git",
     "directory": "packages/vue"
   },
-  "homepage": "https://incremark-docs.vercel.app/",
+  "homepage": "https://www.incremark.com/",
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch"

package/src/ThemeProvider.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { DesignTokens } from '@incremark/theme'
+import { applyTheme } from '@incremark/theme'
+
+/**
+ * 主题配置，可以是：
+ * - 字符串：'default' | 'dark'
+ * - 完整主题对象：DesignTokens
+ * - 部分主题对象：Partial<DesignTokens>（会合并到默认主题）
+ */
+const props = withDefaults(
+  defineProps<{
+    theme: 'default' | 'dark' | DesignTokens | Partial<DesignTokens>
+    class?: string
+  }>(),
+  {
+    class: ''
+  }
+)
+
+const containerRef = ref<HTMLElement>()
+
+watch(
+  () => props.theme,
+  (theme) => {
+    if (containerRef.value) {
+      // 应用主题到容器元素
+      applyTheme(containerRef.value, theme)
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <div ref="containerRef" :class="props.class" class="incremark-theme-provider">
+    <slot />
+  </div>
+</template>
+

package/src/components/Incremark.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, type Component } from 'vue'
-import type { ParsedBlock } from '@incremark/core'
+import type { ParsedBlock, RootContent } from '@incremark/core'
+import type { HTML } from 'mdast'
+import { useDefinationsContext } from '../composables/useDefinationsContext'
+import type { UseIncremarkReturn } from '../composables/useIncremark'
 import IncremarkHeading from './IncremarkHeading.vue'
 import IncremarkParagraph from './IncremarkParagraph.vue'
 import IncremarkCode from './IncremarkCode.vue'
@@ -9,11 +12,20 @@ import IncremarkTable from './IncremarkTable.vue'
 import IncremarkBlockquote from './IncremarkBlockquote.vue'
 import IncremarkThematicBreak from './IncremarkThematicBreak.vue'
 import IncremarkMath from './IncremarkMath.vue'
+import IncremarkHtmlElement from './IncremarkHtmlElement.vue'
 import IncremarkDefault from './IncremarkDefault.vue'
+import IncremarkFootnotes from './IncremarkFootnotes.vue'
 
 // 组件映射类型
 export type ComponentMap = Partial<Record<string, Component>>
 
+/**
+ * 检查是否是 html 节点
+ */
+function isHtmlNode(node: RootContent): node is HTML {
+  return node.type === 'html'
+}
+
 // 带稳定 ID 的块类型
 export interface BlockWithStableId extends ParsedBlock {
   stableId: string
@@ -23,7 +35,7 @@ export interface BlockWithStableId extends ParsedBlock {
 const props = withDefaults(
   defineProps<{
     /** 要渲染的块列表（来自 useIncremark 的 blocks） */
-    blocks: BlockWithStableId[]
+    blocks?: BlockWithStableId[]
     /** 自定义组件映射，key 为节点类型 */
     components?: ComponentMap
     /** 待处理块的样式类名 */
@@ -32,8 +44,11 @@ const props = withDefaults(
     completedClass?: string
     /** 是否显示块状态边框 */
     showBlockStatus?: boolean
+    /** 可选：useIncremark 返回的对象（用于自动注入数据） */
+    incremark?: UseIncremarkReturn
   }>(),
   {
+    blocks: () => [],
     components: () => ({}),
     pendingClass: 'incremark-pending',
     completedClass: 'incremark-completed',
@@ -41,6 +56,27 @@ const props = withDefaults(
   }
 )
 
+// 从 context 获取 footnoteReferenceOrder（如果有的话）
+let footnoteReferenceOrder
+try {
+  const context = useDefinationsContext()
+  footnoteReferenceOrder = context.footnoteReferenceOrder
+} catch {
+  // 如果没有 context，使用空数组
+  footnoteReferenceOrder = computed(() => [])
+}
+
+// 计算实际使用的 blocks 和 isFinalized
+const actualBlocks = computed<BlockWithStableId[]>(() => props.incremark?.blocks.value || props.blocks || [])
+const actualIsFinalized = computed(() => {
+  if (props.incremark) {
+    return props.incremark.isFinalized.value
+  }
+  // 如果手动传入 blocks，自动判断是否所有 block 都是 completed
+  const blocks = props.blocks || []
+  return blocks.length > 0 && blocks.every(b => b.status === 'completed')
+})
+
 // 默认组件映射
 const defaultComponents: Record<string, Component> = {
   heading: IncremarkHeading,
@@ -51,7 +87,8 @@ const defaultComponents: Record<string, Component> = {
   blockquote: IncremarkBlockquote,
   thematicBreak: IncremarkThematicBreak,
   math: IncremarkMath,
-  inlineMath: IncremarkMath
+  inlineMath: IncremarkMath,
+  htmlElement: IncremarkHtmlElement
 }
 
 // 合并用户组件和默认组件
@@ -67,9 +104,10 @@ function getComponent(type: string): Component {
 
 <template>
   <div class="incremark">
-    <TransitionGroup name="incremark-fade">
+    <!-- 主要内容块 -->
+    <template v-for="block in actualBlocks">
       <div
-        v-for="block in blocks"
+        v-if="block.node.type !== 'definition' && block.node.type !== 'footnoteDefinition'"
         :key="block.stableId"
         :class="[
           'incremark-block',
@@ -78,24 +116,16 @@ function getComponent(type: string): Component {
           { 'incremark-last-pending': block.isLastPending }
         ]"
       >
-        <component :is="getComponent(block.node.type)" :node="block.node" />
+        <!-- HTML 节点：渲染为代码块显示源代码 -->
+        <pre v-if="isHtmlNode(block.node)" class="incremark-html-code"><code>{{ (block.node as HTML).value }}</code></pre>
+        <!-- 其他节点：使用对应组件 -->
+        <component v-else :is="getComponent(block.node.type)" :node="block.node" />
       </div>
-    </TransitionGroup>
+    </template>
+
+    <!-- 脚注列表（仅在 finalize 后显示） -->
+    <IncremarkFootnotes
+      v-if="actualIsFinalized && (footnoteReferenceOrder as any).value?.length > 0"
+    />
   </div>
 </template>
-
-<style scoped>
-.incremark-block.incremark-show-status.incremark-pending {
-  border-left: 3px solid #a855f7;
-  padding-left: 12px;
-  opacity: 0.8;
-}
-
-.incremark-fade-enter-active {
-  transition: opacity 0.2s ease-out;
-}
-
-.incremark-fade-enter-from {
-  opacity: 0;
-}
-</style>

package/src/components/IncremarkBlockquote.vue

@@ -16,25 +16,3 @@ defineProps<{
   </blockquote>
 </template>
 
-<style scoped>
-.incremark-blockquote {
-  margin: 1em 0;
-  padding: 0.5em 1em;
-  border-left: 4px solid #3b82f6;
-  background: #f0f7ff;
-  border-radius: 0 4px 4px 0;
-}
-
-.incremark-blockquote :deep(p) {
-  margin: 0.5em 0;
-}
-
-.incremark-blockquote :deep(p:first-child) {
-  margin-top: 0;
-}
-
-.incremark-blockquote :deep(p:last-child) {
-  margin-bottom: 0;
-}
-</style>
-

package/src/components/IncremarkCode.vue

@@ -188,14 +188,14 @@ async function copyCode() {
       <span class="language">MERMAID</span>
       <div class="mermaid-actions">
         <button 
-          class="view-toggle" 
+          class="code-btn" 
           @click="toggleMermaidView" 
           type="button"
           :disabled="!mermaidSvg"
         >
           {{ mermaidViewMode === 'preview' ? '源码' : '预览' }}
         </button>
-        <button class="copy-btn" @click="copyCode" type="button">
+        <button class="code-btn" @click="copyCode" type="button">
           {{ copied ? '✓ 已复制' : '复制' }}
         </button>
       </div>
@@ -218,7 +218,7 @@ async function copyCode() {
   <div v-else class="incremark-code">
     <div class="code-header">
       <span class="language">{{ language }}</span>
-      <button class="copy-btn" @click="copyCode" type="button">
+      <button class="code-btn" @click="copyCode" type="button">
         {{ copied ? '✓ 已复制' : '复制' }}
       </button>
     </div>
@@ -234,161 +234,3 @@ async function copyCode() {
     </div>
   </div>
 </template>
-
-<style scoped>
-/* Mermaid 样式 */
-.incremark-mermaid {
-  margin: 1em 0;
-  border-radius: 8px;
-  overflow: hidden;
-  background: #1a1a2e;
-}
-
-.mermaid-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 16px;
-  background: #16213e;
-  border-bottom: 1px solid #0f3460;
-  font-size: 12px;
-}
-
-.mermaid-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.view-toggle {
-  padding: 4px 10px;
-  border: 1px solid #0f3460;
-  border-radius: 6px;
-  background: transparent;
-  color: #8b949e;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.view-toggle:hover:not(:disabled) {
-  background: #0f3460;
-  color: #e0e0e0;
-}
-
-.view-toggle:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.mermaid-content {
-  padding: 16px;
-  min-height: 100px;
-}
-
-.mermaid-loading {
-  color: #8b949e;
-  font-size: 14px;
-}
-
-.mermaid-source-code {
-  margin: 0;
-  padding: 12px;
-  background: #0d1117;
-  border-radius: 6px;
-  color: #c9d1d9;
-  font-family: 'Fira Code', 'SF Mono', monospace;
-  font-size: 13px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  overflow-x: auto;
-}
-
-.mermaid-svg {
-  overflow-x: auto;
-}
-
-.mermaid-svg :deep(svg) {
-  max-width: 100%;
-  height: auto;
-}
-
-/* 代码块样式 */
-.incremark-code {
-  margin: 1em 0;
-  border-radius: 8px;
-  overflow: hidden;
-  background: #24292e;
-}
-
-.code-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 16px;
-  background: #1f2428;
-  border-bottom: 1px solid #30363d;
-  font-size: 12px;
-}
-
-.language {
-  color: #8b949e;
-  text-transform: uppercase;
-  font-weight: 500;
-  letter-spacing: 0.5px;
-}
-
-.copy-btn {
-  padding: 4px 12px;
-  border: 1px solid #30363d;
-  border-radius: 6px;
-  background: transparent;
-  color: #8b949e;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.copy-btn:hover {
-  background: #30363d;
-  color: #c9d1d9;
-}
-
-.code-content {
-  overflow-x: auto;
-}
-
-.code-loading {
-  opacity: 0.7;
-}
-
-/* Shiki 生成的代码样式 */
-.shiki-wrapper :deep(pre) {
-  margin: 0;
-  padding: 16px;
-  background: transparent !important;
-  overflow-x: auto;
-}
-
-.shiki-wrapper :deep(code) {
-  font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Consolas', monospace;
-  font-size: 14px;
-  line-height: 1.6;
-}
-
-/* 回退样式 */
-.code-fallback,
-.code-loading pre {
-  margin: 0;
-  padding: 16px;
-  overflow-x: auto;
-  background: transparent;
-}
-
-.code-fallback code,
-.code-loading code {
-  font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Consolas', monospace;
-  font-size: 14px;
-  line-height: 1.6;
-  color: #c9d1d9;
-}
-</style>

package/src/components/IncremarkDefault.vue

@@ -13,30 +13,3 @@ defineProps<{
   </div>
 </template>
 
-<style scoped>
-.incremark-default {
-  margin: 0.5em 0;
-  padding: 10px;
-  background: #fff3cd;
-  border: 1px solid #ffc107;
-  border-radius: 4px;
-  font-size: 12px;
-}
-
-.type-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  background: #ffc107;
-  border-radius: 4px;
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-
-pre {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-all;
-  font-size: 11px;
-}
-</style>
-

package/src/components/IncremarkFootnotes.vue

@@ -0,0 +1,78 @@
+<!--
+/**
+ * 脚注列表组件
+ *
+ * 在文档底部渲染所有脚注定义，按引用出现的顺序排列
+ *
+ * @component IncremarkFootnotes
+ *
+ * @remarks
+ * 样式定义在 @incremark/theme 中的 footnotes.less
+ * footnoteReferenceOrder 自动从 context 获取，无需手动传递
+ */
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FootnoteDefinition, RootContent } from 'mdast'
+import { useDefinationsContext } from '../composables/useDefinationsContext'
+import IncremarkRenderer from './IncremarkRenderer.vue'
+
+const { definations, footnoteDefinitions, footnoteReferenceOrder } = useDefinationsContext()
+
+/**
+ * 按引用顺序排列的脚注列表
+ * 只显示已有定义的脚注
+ */
+const orderedFootnotes = computed<Array<{ identifier: string; definition: FootnoteDefinition }>>(() => {
+  return footnoteReferenceOrder.value
+    .map(identifier => ({
+      identifier,
+      definition: footnoteDefinitions.value[identifier]
+    }))
+    .filter(item => item.definition !== undefined)
+})
+
+/**
+ * 是否有脚注需要显示
+ */
+const hasFootnotes = computed(() => orderedFootnotes.value.length > 0)
+</script>
+
+<template>
+  <section v-if="hasFootnotes" class="incremark-footnotes">
+    <hr class="incremark-footnotes-divider" />
+    <ol class="incremark-footnotes-list">
+      <li
+        v-for="(item, index) in orderedFootnotes"
+        :key="item.identifier"
+        :id="`fn-${item.identifier}`"
+        class="incremark-footnote-item"
+      >
+        <div class="incremark-footnote-content">
+          <!-- 脚注序号 -->
+          <span class="incremark-footnote-number">{{ index + 1 }}.</span>
+          
+          <!-- 脚注内容 -->
+          <div class="incremark-footnote-body">
+            <IncremarkRenderer
+              v-for="(child, childIndex) in item.definition.children"
+              :key="childIndex"
+              :node="(child as RootContent)"
+            />
+          </div>
+        </div>
+        
+        <!-- 返回链接 -->
+        <a 
+          :href="`#fnref-${item.identifier}`" 
+          class="incremark-footnote-backref"
+          aria-label="返回引用位置"
+        >
+          ↩
+        </a>
+      </li>
+    </ol>
+  </section>
+</template>
+
+

package/src/components/IncremarkHeading.vue

@@ -11,23 +11,7 @@ const tag = computed(() => `h${props.node.depth}`)
 </script>
 
 <template>
-  <component :is="tag" class="incremark-heading">
+  <component :is="tag" :class="`incremark-heading h${node.depth}`">
     <IncremarkInline :nodes="node.children" />
   </component>
 </template>
-
-<style scoped>
-.incremark-heading {
-  margin: 0.5em 0;
-  font-weight: 600;
-  line-height: 1.3;
-}
-
-h1 { font-size: 2em; border-bottom: 1px solid #eee; padding-bottom: 0.3em; }
-h2 { font-size: 1.5em; }
-h3 { font-size: 1.25em; }
-h4 { font-size: 1em; }
-h5 { font-size: 0.875em; }
-h6 { font-size: 0.85em; color: #666; }
-</style>
-

package/src/components/IncremarkHtmlElement.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import type { RootContent, PhrasingContent } from 'mdast'
+import IncremarkInline from './IncremarkInline.vue'
+
+/**
+ * HtmlElementNode 类型定义（与 @incremark/core 中的定义一致）
+ */
+interface HtmlElementNode {
+  type: 'htmlElement'
+  tagName: string
+  attrs: Record<string, string>
+  children: RootContent[]
+  data?: {
+    rawHtml?: string
+    parsed?: boolean
+    originalType?: string
+  }
+}
+
+defineProps<{
+  node: HtmlElementNode
+}>()
+
+/**
+ * 判断是否是行内元素
+ */
+function isInlineElement(tagName: string): boolean {
+  const inlineElements = [
+    'a', 'abbr', 'acronym', 'b', 'bdo', 'big', 'br', 'button', 'cite', 
+    'code', 'dfn', 'em', 'i', 'img', 'input', 'kbd', 'label', 'map', 
+    'object', 'output', 'q', 'samp', 'script', 'select', 'small', 
+    'span', 'strong', 'sub', 'sup', 'textarea', 'time', 'tt', 'var'
+  ]
+  return inlineElements.includes(tagName.toLowerCase())
+}
+
+/**
+ * 判断是否是自闭合元素
+ */
+function isVoidElement(tagName: string): boolean {
+  const voidElements = [
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 
+    'link', 'meta', 'param', 'source', 'track', 'wbr'
+  ]
+  return voidElements.includes(tagName.toLowerCase())
+}
+
+/**
+ * 判断子节点是否都是行内内容
+ */
+function hasOnlyInlineChildren(children: RootContent[]): boolean {
+  if (!children || children.length === 0) return true
+  
+  return children.every(child => {
+    const type = child.type
+    // 常见的行内类型
+    const inlineTypes = ['text', 'strong', 'emphasis', 'inlineCode', 'link', 'image', 'break', 'html', 'htmlElement']
+    if (inlineTypes.includes(type)) {
+      // 如果是 htmlElement，检查是否是行内元素
+      if (type === 'htmlElement') {
+        return isInlineElement((child as unknown as HtmlElementNode).tagName)
+      }
+      return true
+    }
+    return false
+  })
+}
+
+/**
+ * 将属性对象转换为 HTML 属性字符串（用于 v-bind）
+ */
+function getAttrs(attrs: Record<string, string>): Record<string, string> {
+  // 过滤掉可能有问题的属性
+  const result: Record<string, string> = {}
+  for (const [key, value] of Object.entries(attrs)) {
+    // 跳过事件属性（已在解析时过滤，这里双重保险）
+    if (key.startsWith('on')) continue
+    result[key] = value
+  }
+  return result
+}
+</script>
+
+<template>
+  <component 
+    :is="node.tagName" 
+    v-bind="getAttrs(node.attrs)"
+    :class="['incremark-html-element', `incremark-${node.tagName}`]"
+  >
+    <!-- 自闭合元素没有子节点 -->
+    <template v-if="!isVoidElement(node.tagName)">
+      <!-- 如果子节点都是行内内容，使用 IncremarkInline -->
+      <template v-if="hasOnlyInlineChildren(node.children)">
+        <IncremarkInline :nodes="(node.children as PhrasingContent[])" />
+      </template>
+      
+      <!-- 否则递归渲染每个子节点 -->
+      <template v-else>
+        <template v-for="(child, idx) in node.children" :key="idx">
+          <!-- 如果子节点是 htmlElement，递归 -->
+          <IncremarkHtmlElement 
+            v-if="child.type === 'htmlElement'" 
+            :node="(child as unknown as HtmlElementNode)" 
+          />
+          <!-- 如果是文本节点 -->
+          <template v-else-if="child.type === 'text'">
+            {{ (child as any).value }}
+          </template>
+          <!-- 其他类型尝试用 IncremarkInline -->
+          <IncremarkInline 
+            v-else-if="['strong', 'emphasis', 'inlineCode', 'link', 'image', 'break'].includes(child.type)"
+            :nodes="[child as PhrasingContent]" 
+          />
+          <!-- 段落等块级元素 -->
+          <template v-else-if="child.type === 'paragraph'">
+            <p><IncremarkInline :nodes="((child as any).children as PhrasingContent[])" /></p>
+          </template>
+          <!-- 其他未知类型，显示原始 -->
+          <template v-else>
+            <div class="incremark-unknown-child">{{ child.type }}</div>
+          </template>
+        </template>
+      </template>
+    </template>
+  </component>
+</template>
+
+<style scoped>
+.incremark-html-element {
+  /* 保持原有样式 */
+}
+
+.incremark-unknown-child {
+  color: #999;
+  font-style: italic;
+}
+</style>
+