@wsxjs/wsx-press 0.0.18

package/src/client/components/DocTOC.wsx

@@ -0,0 +1,262 @@
+/**
+ * @jsxImportSource @wsxjs/wsx-core
+ * DocTOC Component
+ *
+ * Table of Contents component that displays TOC data generated by wsx-press plugin.
+ */
+
+import { LightComponent, autoRegister, state } from "@wsxjs/wsx-core";
+import { createLogger } from "@wsxjs/wsx-logger";
+import { RouterUtils } from "@wsxjs/wsx-router";
+import type { TOCItem } from "../../types";
+import styles from "./DocTOC.css?inline";
+
+const logger = createLogger("DocTOC");
+
+/**
+ * TOC 数据缓存（全局共享）
+ */
+const tocCache: {
+    data: Record<string, TOCItem[]> | null;
+    promise: Promise<Record<string, TOCItem[]>> | null;
+} = {
+    data: null,
+    promise: null,
+};
+
+/**
+ * 加载 TOC 数据（带缓存）
+ */
+async function loadTOCData(): Promise<Record<string, TOCItem[]>> {
+    if (tocCache.data) {
+        return tocCache.data;
+    }
+
+    if (tocCache.promise) {
+        return tocCache.promise;
+    }
+
+    tocCache.promise = (async () => {
+        try {
+            const response = await fetch("/.wsx-press/docs-toc.json");
+            if (!response.ok) {
+                throw new Error(`Failed to load TOC data: ${response.statusText}`);
+            }
+            const data = (await response.json()) as Record<string, TOCItem[]>;
+            tocCache.data = data;
+            tocCache.promise = null;
+            return data;
+        } catch (error) {
+            tocCache.promise = null;
+            throw error;
+        }
+    })();
+
+    return tocCache.promise;
+}
+
+/**
+ * DocTOC Component
+ *
+ * Displays table of contents using TOC data generated by wsx-press plugin.
+ */
+@autoRegister({ tagName: "wsx-doc-toc" })
+export default class DocTOC extends LightComponent {
+    @state private items: TOCItem[] = [];
+    @state private activeId: string = "";
+
+    private observer: IntersectionObserver | null = null;
+    private headingElements: Map<string, HTMLElement> = new Map();
+    private routeChangeUnsubscribe: (() => void) | null = null;
+
+    constructor() {
+        super({
+            styles,
+            styleName: "wsx-doc-toc",
+        });
+    }
+
+    protected async onConnected() {
+        // 加载 TOC 数据
+        await this.loadTOC();
+
+        // 监听路由变化
+        this.routeChangeUnsubscribe = RouterUtils.onRouteChange(() => {
+            this.loadTOC();
+        });
+    }
+
+    protected onDisconnected() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+        if (this.routeChangeUnsubscribe) {
+            this.routeChangeUnsubscribe();
+            this.routeChangeUnsubscribe = null;
+        }
+    }
+
+    /**
+     * 加载当前文档的 TOC 数据
+     */
+    private async loadTOC(): Promise<void> {
+        try {
+            const routeInfo = RouterUtils.getCurrentRoute();
+            const params = routeInfo.params as { category?: string; page?: string };
+
+            if (!params.category || !params.page) {
+                this.items = [];
+                return;
+            }
+
+            const docPath = `${params.category}/${params.page}`;
+            const tocData = await loadTOCData();
+            this.items = tocData[docPath] || [];
+
+            // 为标题元素设置 ID（如果还没有）
+            requestAnimationFrame(() => {
+                this.setupHeadingIds();
+                // 在标题 ID 设置完成后，重新设置滚动观察器
+                this.setupScrollObserver();
+            });
+        } catch (error) {
+            logger.error("Failed to load TOC", error);
+            this.items = [];
+        }
+    }
+
+    /**
+     * 为文档中的标题元素设置 ID
+     */
+    private setupHeadingIds(): void {
+        const docContent = document.querySelector(".doc-content");
+        if (!docContent) {
+            return;
+        }
+
+        // 查找所有标题元素（包括 wsx-marked-heading 和标准 h1-h6）
+        const headings = docContent.querySelectorAll("h1, h2, h3, h4, h5, h6, wsx-marked-heading");
+        this.headingElements.clear();
+
+        headings.forEach((heading) => {
+            // 获取标题文本
+            const text = heading.textContent?.trim() || "";
+            if (!text) return;
+
+            // 生成 ID
+            const id = this.generateId(text);
+
+            // 设置 ID
+            if (heading instanceof HTMLElement) {
+                heading.id = id;
+                this.headingElements.set(id, heading);
+            }
+        });
+    }
+
+    /**
+     * 生成锚点 ID
+     */
+    private generateId(text: string): string {
+        return text
+            .toLowerCase()
+            .replace(/[^\w\s-]/g, "")
+            .replace(/\s+/g, "-")
+            .replace(/-+/g, "-")
+            .trim();
+    }
+
+    /**
+     * 设置滚动观察器，高亮当前可见的标题
+     */
+    private setupScrollObserver(): void {
+        if (!("IntersectionObserver" in window)) {
+            return;
+        }
+
+        this.observer = new IntersectionObserver(
+            (entries) => {
+                // 找到最接近顶部的可见标题
+                const visibleEntries = entries.filter((entry) => entry.isIntersecting);
+                if (visibleEntries.length > 0) {
+                    // 按位置排序，选择最接近顶部的
+                    visibleEntries.sort((a, b) => {
+                        const aTop = a.boundingClientRect.top;
+                        const bTop = b.boundingClientRect.top;
+                        return Math.abs(aTop) - Math.abs(bTop);
+                    });
+                    this.activeId = visibleEntries[0].target.id;
+                }
+            },
+            {
+                rootMargin: "-100px 0px -80% 0px",
+                threshold: 0,
+            }
+        );
+
+        // 观察所有标题元素
+        this.headingElements.forEach((element) => {
+            this.observer?.observe(element);
+        });
+    }
+
+    /**
+     * 处理 TOC 项点击
+     */
+    private handleTOCClick = (id: string, e: Event): void => {
+        e.preventDefault();
+        const element = this.headingElements.get(id);
+        if (element) {
+            element.scrollIntoView({ behavior: "smooth", block: "start" });
+            // 更新 URL hash（不触发滚动）
+            window.history.replaceState(null, "", `#${id}`);
+        }
+    };
+
+    /**
+     * 渲染 TOC 项
+     */
+    private renderTOCItem(item: TOCItem): HTMLElement {
+        const isActive = this.activeId === item.id;
+        const hasChildren = item.children.length > 0;
+
+        return (
+            <li class={`doc-toc-item doc-toc-item-level-${item.level}`}>
+                <a
+                    href={`#${item.id}`}
+                    class={`doc-toc-link ${isActive ? "active" : ""}`}
+                    onClick={(e) => this.handleTOCClick(item.id, e)}
+                >
+                    {item.text}
+                </a>
+                {hasChildren && (
+                    <ul class="doc-toc-list doc-toc-sublist">
+                        {item.children.map((child) => this.renderTOCItem(child))}
+                    </ul>
+                )}
+            </li>
+        ) as HTMLElement;
+    }
+
+    render() {
+        if (this.items.length === 0) {
+            return (
+                <aside class="doc-toc">
+                    <div class="doc-toc-empty">暂无目录</div>
+                </aside>
+            );
+        }
+
+        return (
+            <aside class="doc-toc">
+                <h3 class="doc-toc-title">目录</h3>
+                <nav class="doc-toc-nav">
+                    <ul class="doc-toc-list">
+                        {this.items.map((item) => this.renderTOCItem(item))}
+                    </ul>
+                </nav>
+            </aside>
+        );
+    }
+}

package/src/client/index.ts

@@ -0,0 +1,32 @@
+/**
+ * @wsxjs/wsx-press/client
+ * Client-side components entry point
+ *
+ * IMPORTANT: Import components directly (not just export) to ensure
+ * @autoRegister decorators are executed and components are registered.
+ */
+
+// Import DocPage component (triggers @autoRegister decorator)
+import "./components/DocPage.wsx";
+
+// Import DocSearch component (triggers @autoRegister decorator)
+import "./components/DocSearch.wsx";
+
+// Import DocLayout component (triggers @autoRegister decorator)
+import "./components/DocLayout.wsx";
+
+// Import DocSidebar component (triggers @autoRegister decorator)
+import "./components/DocSidebar.wsx";
+
+// Import DocTOC component (triggers @autoRegister decorator)
+import "./components/DocTOC.wsx";
+
+// Export components for type checking and explicit usage
+export { default as DocPage } from "./components/DocPage.wsx";
+export { default as DocSearch } from "./components/DocSearch.wsx";
+export { default as DocLayout } from "./components/DocLayout.wsx";
+export { default as DocSidebar } from "./components/DocSidebar.wsx";
+export { default as DocTOC } from "./components/DocTOC.wsx";
+
+// Components will be exported here as they are implemented
+// export { DocBreadcrumb } from "./components/DocBreadcrumb.wsx";

package/src/client/styles/code.css

@@ -0,0 +1,242 @@
+/**
+ * WSX-Press 代码高亮样式
+ * 基于 GitHub 主题
+ */
+
+/* ===== 代码块容器 ===== */
+.wsx-press-code-block {
+  position: relative;
+  margin: var(--wsx-press-spacing-lg) 0;
+}
+
+.wsx-press-code-block pre {
+  margin: 0;
+  border-radius: var(--wsx-press-radius-md);
+}
+
+/* ===== 语言标签 ===== */
+.wsx-press-code-block[data-language]::before {
+  content: attr(data-language);
+  position: absolute;
+  top: var(--wsx-press-spacing-sm);
+  right: var(--wsx-press-spacing-md);
+  padding: 0.2em 0.6em;
+  font-family: var(--wsx-press-font-mono);
+  font-size: var(--wsx-press-font-size-xs);
+  color: var(--wsx-press-text-tertiary);
+  background: var(--wsx-press-bg-tertiary);
+  border: 1px solid var(--wsx-press-border);
+  border-radius: var(--wsx-press-radius-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* ===== 行号 ===== */
+.wsx-press-code-line-numbers {
+  display: flex;
+}
+
+.wsx-press-code-line-numbers .line-numbers {
+  flex-shrink: 0;
+  padding-right: var(--wsx-press-spacing-md);
+  margin-right: var(--wsx-press-spacing-md);
+  border-right: 1px solid var(--wsx-press-border);
+  color: var(--wsx-press-text-tertiary);
+  user-select: none;
+  text-align: right;
+}
+
+.wsx-press-code-line-numbers .line-content {
+  flex: 1;
+  overflow-x: auto;
+}
+
+/* ===== 高亮行 ===== */
+.wsx-press-code-line.highlighted {
+  background: var(--wsx-press-bg-tertiary);
+  border-left: 4px solid var(--wsx-press-accent);
+  padding-left: calc(var(--wsx-press-spacing-sm) - 4px);
+  margin-left: calc(var(--wsx-press-spacing-sm) * -1);
+}
+
+/* ===== 差异视图 ===== */
+.wsx-press-code-line.diff-add {
+  background: rgba(46, 160, 67, 0.15);
+  border-left: 4px solid #2ea043;
+}
+
+.wsx-press-code-line.diff-remove {
+  background: rgba(248, 81, 73, 0.15);
+  border-left: 4px solid #f85149;
+}
+
+/* ===== 语法高亮（亮色模式） ===== */
+.wsx-press-code .token.comment,
+.wsx-press-code .token.prolog,
+.wsx-press-code .token.doctype,
+.wsx-press-code .token.cdata {
+  color: #6a737d;
+}
+
+.wsx-press-code .token.punctuation {
+  color: #24292e;
+}
+
+.wsx-press-code .token.property,
+.wsx-press-code .token.tag,
+.wsx-press-code .token.boolean,
+.wsx-press-code .token.number,
+.wsx-press-code .token.constant,
+.wsx-press-code .token.symbol,
+.wsx-press-code .token.deleted {
+  color: #005cc5;
+}
+
+.wsx-press-code .token.selector,
+.wsx-press-code .token.attr-name,
+.wsx-press-code .token.string,
+.wsx-press-code .token.char,
+.wsx-press-code .token.builtin,
+.wsx-press-code .token.inserted {
+  color: #032f62;
+}
+
+.wsx-press-code .token.operator,
+.wsx-press-code .token.entity,
+.wsx-press-code .token.url,
+.wsx-press-code .language-css .token.string,
+.wsx-press-code .style .token.string {
+  color: #d73a49;
+}
+
+.wsx-press-code .token.atrule,
+.wsx-press-code .token.attr-value,
+.wsx-press-code .token.keyword {
+  color: #d73a49;
+}
+
+.wsx-press-code .token.function,
+.wsx-press-code .token.class-name {
+  color: #6f42c1;
+}
+
+.wsx-press-code .token.regex,
+.wsx-press-code .token.important,
+.wsx-press-code .token.variable {
+  color: #e36209;
+}
+
+/* ===== 语法高亮（暗色模式） ===== */
+@media (prefers-color-scheme: dark) {
+  .wsx-press-code .token.comment,
+  .wsx-press-code .token.prolog,
+  .wsx-press-code .token.doctype,
+  .wsx-press-code .token.cdata {
+    color: #8b949e;
+  }
+
+  .wsx-press-code .token.punctuation {
+    color: #c9d1d9;
+  }
+
+  .wsx-press-code .token.property,
+  .wsx-press-code .token.tag,
+  .wsx-press-code .token.boolean,
+  .wsx-press-code .token.number,
+  .wsx-press-code .token.constant,
+  .wsx-press-code .token.symbol,
+  .wsx-press-code .token.deleted {
+    color: #79c0ff;
+  }
+
+  .wsx-press-code .token.selector,
+  .wsx-press-code .token.attr-name,
+  .wsx-press-code .token.string,
+  .wsx-press-code .token.char,
+  .wsx-press-code .token.builtin,
+  .wsx-press-code .token.inserted {
+    color: #a5d6ff;
+  }
+
+  .wsx-press-code .token.operator,
+  .wsx-press-code .token.entity,
+  .wsx-press-code .token.url,
+  .wsx-press-code .language-css .token.string,
+  .wsx-press-code .style .token.string {
+    color: #ff7b72;
+  }
+
+  .wsx-press-code .token.atrule,
+  .wsx-press-code .token.attr-value,
+  .wsx-press-code .token.keyword {
+    color: #ff7b72;
+  }
+
+  .wsx-press-code .token.function,
+  .wsx-press-code .token.class-name {
+    color: #d2a8ff;
+  }
+
+  .wsx-press-code .token.regex,
+  .wsx-press-code .token.important,
+  .wsx-press-code .token.variable {
+    color: #ffa657;
+  }
+}
+
+[data-theme="dark"] {
+  .wsx-press-code .token.comment,
+  .wsx-press-code .token.prolog,
+  .wsx-press-code .token.doctype,
+  .wsx-press-code .token.cdata {
+    color: #8b949e;
+  }
+
+  .wsx-press-code .token.punctuation {
+    color: #c9d1d9;
+  }
+
+  .wsx-press-code .token.property,
+  .wsx-press-code .token.tag,
+  .wsx-press-code .token.boolean,
+  .wsx-press-code .token.number,
+  .wsx-press-code .token.constant,
+  .wsx-press-code .token.symbol,
+  .wsx-press-code .token.deleted {
+    color: #79c0ff;
+  }
+
+  .wsx-press-code .token.selector,
+  .wsx-press-code .token.attr-name,
+  .wsx-press-code .token.string,
+  .wsx-press-code .token.char,
+  .wsx-press-code .token.builtin,
+  .wsx-press-code .token.inserted {
+    color: #a5d6ff;
+  }
+
+  .wsx-press-code .token.operator,
+  .wsx-press-code .token.entity,
+  .wsx-press-code .token.url,
+  .wsx-press-code .language-css .token.string,
+  .wsx-press-code .style .token.string {
+    color: #ff7b72;
+  }
+
+  .wsx-press-code .token.atrule,
+  .wsx-press-code .token.attr-value,
+  .wsx-press-code .token.keyword {
+    color: #ff7b72;
+  }
+
+  .wsx-press-code .token.function,
+  .wsx-press-code .token.class-name {
+    color: #d2a8ff;
+  }
+
+  .wsx-press-code .token.regex,
+  .wsx-press-code .token.important,
+  .wsx-press-code .token.variable {
+    color: #ffa657;
+  }
+}

package/src/client/styles/index.css

@@ -0,0 +1,12 @@
+/**
+ * WSX-Press 样式入口
+ * 导入所有全局样式
+ */
+
+/* 基础样式 */
+@import './reset.css';
+@import './theme.css';
+
+/* 内容样式 */
+@import './typography.css';
+@import './code.css';

package/src/client/styles/reset.css

@@ -0,0 +1,116 @@
+/**
+ * WSX-Press CSS Reset
+ * 轻量级重置，确保跨浏览器一致性
+ */
+
+/* ===== Box sizing ===== */
+.wsx-press-reset *,
+.wsx-press-reset *::before,
+.wsx-press-reset *::after {
+  box-sizing: border-box;
+}
+
+/* ===== 移除默认 margin ===== */
+.wsx-press-reset h1,
+.wsx-press-reset h2,
+.wsx-press-reset h3,
+.wsx-press-reset h4,
+.wsx-press-reset h5,
+.wsx-press-reset h6,
+.wsx-press-reset p,
+.wsx-press-reset ul,
+.wsx-press-reset ol,
+.wsx-press-reset dl,
+.wsx-press-reset dd,
+.wsx-press-reset blockquote,
+.wsx-press-reset figure,
+.wsx-press-reset pre {
+  margin: 0;
+}
+
+/* ===== 移除列表样式 ===== */
+.wsx-press-reset ul,
+.wsx-press-reset ol {
+  padding: 0;
+  list-style: none;
+}
+
+/* ===== 重置 blockquote ===== */
+.wsx-press-reset blockquote {
+  padding: 0;
+  quotes: none;
+}
+
+/* ===== 表格重置 ===== */
+.wsx-press-reset table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* ===== 按钮重置 ===== */
+.wsx-press-reset button {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.wsx-press-reset button:disabled {
+  cursor: not-allowed;
+}
+
+/* ===== 输入框重置 ===== */
+.wsx-press-reset input,
+.wsx-press-reset textarea,
+.wsx-press-reset select {
+  font: inherit;
+  color: inherit;
+}
+
+/* ===== 链接重置 ===== */
+.wsx-press-reset a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/* ===== 图片重置 ===== */
+.wsx-press-reset img,
+.wsx-press-reset svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* ===== Code 重置 ===== */
+.wsx-press-reset code,
+.wsx-press-reset kbd,
+.wsx-press-reset samp,
+.wsx-press-reset pre {
+  font-family: var(--wsx-press-font-mono, monospace);
+}
+
+/* ===== 滚动条样式（可选） ===== */
+.wsx-press-reset ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.wsx-press-reset ::-webkit-scrollbar-track {
+  background: var(--wsx-press-bg-secondary);
+}
+
+.wsx-press-reset ::-webkit-scrollbar-thumb {
+  background: var(--wsx-press-border-hover);
+  border-radius: var(--wsx-press-radius-sm);
+}
+
+.wsx-press-reset ::-webkit-scrollbar-thumb:hover {
+  background: var(--wsx-press-text-tertiary);
+}
+
+/* Firefox 滚动条 */
+.wsx-press-reset * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--wsx-press-border-hover) var(--wsx-press-bg-secondary);
+}