feat: ai's attempt

src/components/Article.tsx

@@ -0,0 +1,57 @@
+import { Component, createSignal, onMount, onCleanup, Show } from 'solid-js';
+import { parseMarkdown } from '../markdown';
+import { fetchData } from '../data-loader';
+
+export interface ArticleProps {
+  src: string;
+  onLoaded?: () => void;
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Article 组件
+ * 用于将特定 src 位置的 md 文件显示为 markdown 文章
+ */
+export const Article: Component<ArticleProps> = (props) => {
+  const [content, setContent] = createSignal('');
+  const [loading, setLoading] = createSignal(true);
+  const [error, setError] = createSignal<Error | null>(null);
+
+  let articleRef: HTMLArticleElement | undefined;
+
+  onMount(async () => {
+    setLoading(true);
+    try {
+      const text = await fetchData(props.src);
+      setContent(text);
+      setLoading(false);
+      props.onLoaded?.();
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error(String(err));
+      setError(errorObj);
+      setLoading(false);
+      props.onError?.(errorObj);
+    }
+  });
+
+  onCleanup(() => {
+    // 清理时清空内容，触发内部组件的销毁
+    setContent('');
+  });
+
+  return (
+    <article ref={articleRef} class="prose prose-lg" data-src={props.src}>
+      <Show when={loading()}>
+        <div class="text-gray-500">加载中...</div>
+      </Show>
+      <Show when={error()}>
+        <div class="text-red-500">加载失败：{error()?.message}</div>
+      </Show>
+      <Show when={!loading() && !error()}>
+        <div innerHTML={parseMarkdown(content())} />
+      </Show>
+    </article>
+  );
+};
+
+export default Article;

src/components/index.ts

@@ -1,6 +1,11 @@
 // 导入以注册自定义元素
 import './dice';
 import './table';
+import './md-link';
+
+// 导出组件
+export { Article } from './Article';
+export type { ArticleProps } from './Article';
 
 // 导出类型
 export type { DiceProps } from './dice';

src/components/md-link.tsx

@@ -0,0 +1,72 @@
+import { customElement, noShadowDOM } from "solid-element";
+import { createSignal, onCleanup } from "solid-js";
+import { render } from "solid-js/web";
+import { Article } from "./Article";
+
+customElement("md-link", {}, (props, { element }) => {
+  noShadowDOM();
+
+  const [showArticle, setShowArticle] = createSignal(false);
+  let articleContainer: HTMLDivElement | undefined;
+  let disposeArticle: (() => void) | null = null;
+
+  // 从 element 的 textContent 获取链接目标
+  const linkSrc = element?.textContent?.trim() || "";
+
+  // 查找包含此元素的 p 标签
+  const parentP = element?.closest("p");
+
+  const toggleArticle = () => {
+    if (!parentP) return;
+
+    if (showArticle()) {
+      // 隐藏文章
+      if (articleContainer) {
+        if (disposeArticle) {
+          disposeArticle();
+          disposeArticle = null;
+        }
+        articleContainer.remove();
+        articleContainer = undefined;
+      }
+      setShowArticle(false);
+    } else {
+      // 显示文章
+      articleContainer = document.createElement("div");
+      articleContainer.classList.add("md-link-article");
+      articleContainer.classList.add("mt-4", "ml-4", "border-l-2", "border-gray-200", "pl-4");
+      parentP.after(articleContainer);
+
+      // 渲染 Article 组件
+      disposeArticle = render(() => (
+        <Article 
+          src={linkSrc}
+          onLoaded={() => console.log("Article loaded:", linkSrc)}
+          onError={(err) => console.error("Article error:", err)}
+        />
+      ), articleContainer);
+
+      setShowArticle(true);
+    }
+  };
+
+  onCleanup(() => {
+    if (disposeArticle) {
+      disposeArticle();
+      disposeArticle = null;
+    }
+  });
+
+  return (
+    <a
+      href="#"
+      onClick={(e) => {
+        e.preventDefault();
+        toggleArticle();
+      }}
+      class="text-blue-600 hover:text-blue-800 hover:underline"
+    >
+      {linkSrc}
+    </a>
+  );
+});