refactor: reorg

src/components/Article.tsx

@@ -26,8 +26,6 @@ export const Article: Component<ArticleProps> = (props) => {
     fetchArticleContent
   );
 
-  let articleRef: HTMLArticleElement | undefined;
-
   createEffect(() => {
     const data = content();
     if (data) {
@@ -40,7 +38,7 @@ export const Article: Component<ArticleProps> = (props) => {
   });
 
   return (
-    <article ref={articleRef} class={`prose ${props.class || ''}`} data-src={props.src}>
+    <article class={`prose ${props.class || ''}`} data-src={props.src}>
       <Show when={content.loading}>
         <div class="text-gray-500">加载中...</div>
       </Show>

src/components/Sidebar.tsx

@@ -3,21 +3,23 @@ import { generateToc, type FileNode, type TocNode } from "../data-loader";
 import { useLocation } from "@solidjs/router";
 import { FileTreeNode, HeadingNode } from "./FileTree";
 
-interface SidebarProps {
+export interface SidebarProps {
   isOpen: boolean;
   onClose: () => void;
+}
+
+interface SidebarContentProps {
+  fileTree: FileNode[];
+  pathHeadings: Record<string, TocNode[]>;
+  currentPath: string;
+  onClose: () => void;
   isDesktop?: boolean;
 }
 
 /**
  * 侧边栏内容组件
  */
-const SidebarContent: Component<{
+const SidebarContent: Component<SidebarContentProps> = (props) => {
-  fileTree: FileNode[];
-  pathHeadings: Record<string, TocNode[]>;
-  currentPath: string;
-  onClose: () => void;
-}> = (props) => {
   const location = useLocation();
 
   // 响应式获取当前文件的标题列表
@@ -82,9 +84,7 @@ const SidebarContent: Component<{
 export const MobileSidebar: Component<SidebarProps> = (props) => {
   const location = useLocation();
   const [fileTree, setFileTree] = createSignal<FileNode[]>([]);
-  const [pathHeadings, setPathHeadings] = createSignal<
+  const [pathHeadings, setPathHeadings] = createSignal<Record<string, TocNode[]>>({});
-    Record<string, TocNode[]>
-  >({});
 
   // 加载目录数据
   onMount(async () => {
@@ -122,12 +122,10 @@ export const MobileSidebar: Component<SidebarProps> = (props) => {
 /**
  * 桌面端固定侧边栏
  */
-export const DesktopSidebar: Component = () => {
+export const DesktopSidebar: Component<{}> = () => {
   const location = useLocation();
   const [fileTree, setFileTree] = createSignal<FileNode[]>([]);
-  const [pathHeadings, setPathHeadings] = createSignal<
+  const [pathHeadings, setPathHeadings] = createSignal<Record<string, TocNode[]>>({});
-    Record<string, TocNode[]>
-  >({});
 
   // 加载目录数据
   onMount(async () => {
@@ -143,7 +141,7 @@ export const DesktopSidebar: Component = () => {
         pathHeadings={pathHeadings()}
         currentPath={location.pathname}
         onClose={() => {}}
-        isDesktop={true}
+        isDesktop
       />
     </aside>
   );

src/components/index.ts

@@ -1,6 +1,6 @@
-// 导入以注册自定义元素
+// 导入自定义元素以注册
-import './dice';
+import './md-dice';
-import './table';
+import './md-table';
 import './md-link';
 import './md-pins';
 import './md-deck';
@@ -13,5 +13,5 @@ export type { SidebarProps } from './Sidebar';
 export { FileTreeNode, HeadingNode } from './FileTree';
 
 // 导出数据类型
-export type { DiceProps } from './dice';
+export type { DiceProps } from './md-dice';
-export type { TableProps } from './table';
+export type { TableProps } from './md-table';

src/components/md-dice.tsx

@@ -1,6 +1,10 @@
 import { customElement, noShadowDOM } from "solid-element";
 import { createSignal, onMount } from "solid-js";
 
+export interface DiceProps {
+  key?: string;
+}
+
 interface RollResult {
   total: number;
   rolls: number[];

src/components/md-table.tsx

@@ -2,12 +2,16 @@ import { customElement, noShadowDOM } from 'solid-element';
 import { createSignal, For, Show, createEffect, createMemo, createResource } from 'solid-js';
 import { parse } from 'csv-parse/browser/esm/sync';
 import { marked } from '../markdown';
-import { resolvePath } from '../utils/path';
+import { resolvePath } from '../utils';
+
+export interface TableProps {
+  roll?: boolean;
+  remix?: boolean;
+}
 
 interface TableRow {
   label: string;
   body: string;
-  group?: string;
   [key: string]: string;
 }
 

src/components/utils/layer-parser.ts

@@ -1,4 +1,4 @@
-import type { Layer, LayerConfig } from './types';
+import type { Layer, LayerConfig } from '../types';
 
 /**
  * 解析 layers 字符串 "body:1,7-5,8 title:1,1-5,1"