@wsxjs/wsx-press 0.0.18

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@wsxjs/wsx-press",
+  "version": "0.0.18",
+  "description": "A VitePress-like documentation system built with WSXJS",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./client": {
+      "import": "./dist/client.js",
+      "require": "./dist/client.cjs"
+    },
+    "./node": {
+      "import": "./dist/node.js",
+      "require": "./dist/node.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!**/__tests__",
+    "!**/test"
+  ],
+  "dependencies": {
+    "fuse.js": "^7.0.0",
+    "marked": "^12.0.0",
+    "@wsxjs/wsx-core": "0.0.18",
+    "@wsxjs/wsx-logger": "0.0.18",
+    "@wsxjs/wsx-router": "0.0.18",
+    "@wsxjs/wsx-marked-components": "0.0.18"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^20.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
+    "@vitest/coverage-v8": "^2.0.0",
+    "eslint": "^9.31.0",
+    "fs-extra": "^11.2.0",
+    "glob": "^11.0.0",
+    "memfs": "^4.0.0",
+    "typedoc": "^0.26.0",
+    "typedoc-plugin-markdown": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.4.19",
+    "vitest": "^2.0.0",
+    "@wsxjs/eslint-plugin-wsx": "0.0.18",
+    "@wsxjs/wsx-vite-plugin": "0.0.18"
+  },
+  "peerDependencies": {
+    "typedoc": "^0.26.0",
+    "typedoc-plugin-markdown": "^4.0.0"
+  },
+  "keywords": [
+    "wsx",
+    "web-components",
+    "documentation",
+    "docs",
+    "markdown",
+    "typedoc",
+    "typescript",
+    "vite"
+  ],
+  "author": "WSXJS Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wsxjs/wsxjs.git",
+    "directory": "packages/wsx-press"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:dev": "NODE_ENV=development vite build",
+    "dev": "NODE_ENV=development vite build --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest --run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest --run --coverage"
+  }
+}

package/src/client/components/DocLayout.css

@@ -0,0 +1,49 @@
+wsx-doc-layout {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    min-height: calc(100vh - var(--nav-height, 70px));
+}
+
+.doc-layout {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    max-width: 1600px;
+    margin: 0 auto;
+    gap: 0;
+}
+
+.doc-layout-sidebar {
+    flex-shrink: 0;
+    /* Sidebar 宽度由 wsx-doc-sidebar 组件控制 */
+}
+
+.doc-layout-main {
+    flex: 1;
+    min-width: 0; /* 允许 flex 子元素收缩 */
+    padding: var(--doc-layout-main-padding-y, 1.5rem) var(--doc-layout-main-padding-x, 2rem);
+    max-width: 100%;
+}
+
+.doc-layout-toc {
+    flex-shrink: 0;
+    /* TOC 宽度由 wsx-doc-toc 组件控制 */
+}
+
+/* 响应式设计 */
+@media (max-width: 1280px) {
+    .doc-layout-toc {
+        display: none; /* 隐藏 TOC */
+    }
+}
+
+@media (max-width: 1024px) {
+    .doc-layout-sidebar {
+        display: none; /* 隐藏侧边栏 */
+    }
+
+    .doc-layout-main {
+        padding: var(--doc-layout-main-padding-y, 1.5rem);
+    }
+}

package/src/client/components/DocLayout.wsx

@@ -0,0 +1,92 @@
+/**
+ * @jsxImportSource @wsxjs/wsx-core
+ * DocLayout Component
+ *
+ * Complete documentation layout with sidebar, main content, and TOC.
+ */
+
+import { LightComponent, autoRegister } from "@wsxjs/wsx-core";
+import styles from "./DocLayout.css?inline";
+
+/**
+ * DocLayout Component
+ *
+ * Provides a complete documentation layout with:
+ * - Sidebar navigation (DocSidebar)
+ * - Main content area (DocPage)
+ * - Table of Contents (DocTOC)
+ */
+@autoRegister({ tagName: "wsx-doc-layout" })
+export default class DocLayout extends LightComponent {
+    private sidebarInstance: HTMLElement | null = null;
+    private docPageInstance: HTMLElement | null = null;
+    private tocInstance: HTMLElement | null = null;
+
+    constructor() {
+        super({
+            styles,
+            styleName: "wsx-doc-layout",
+        });
+    }
+
+    protected onConnected() {
+        // 在连接后创建子组件实例
+        requestAnimationFrame(() => {
+            if (this.connected) {
+                // 创建侧边栏
+                const sidebarContainer = this.querySelector(".doc-layout-sidebar");
+                if (sidebarContainer && !this.sidebarInstance) {
+                    this.sidebarInstance = document.createElement("wsx-doc-sidebar");
+                    sidebarContainer.appendChild(this.sidebarInstance);
+                }
+
+                // 创建主内容区
+                const mainContainer = this.querySelector(".doc-layout-main");
+                if (mainContainer && !this.docPageInstance) {
+                    this.docPageInstance = document.createElement("wsx-doc-page");
+                    mainContainer.appendChild(this.docPageInstance);
+                }
+
+                // 创建 TOC
+                const tocContainer = this.querySelector(".doc-layout-toc");
+                if (tocContainer && !this.tocInstance) {
+                    this.tocInstance = document.createElement("wsx-doc-toc");
+                    tocContainer.appendChild(this.tocInstance);
+                }
+            }
+        });
+    }
+
+    protected onDisconnected() {
+        // 清理所有子组件实例
+        if (this.sidebarInstance) {
+            this.sidebarInstance.remove();
+            this.sidebarInstance = null;
+        }
+        if (this.docPageInstance) {
+            this.docPageInstance.remove();
+            this.docPageInstance = null;
+        }
+        if (this.tocInstance) {
+            this.tocInstance.remove();
+            this.tocInstance = null;
+        }
+    }
+
+    render() {
+        return (
+            <div class="doc-layout">
+                <aside class="doc-layout-sidebar">
+                    {/* DocSidebar 实例将在这里动态创建 */}
+                </aside>
+                <main class="doc-layout-main">
+                    {/* DocPage 实例将在这里动态创建 */}
+                </main>
+                <aside class="doc-layout-toc">
+                    {/* DocTOC 实例将在这里动态创建 */}
+                </aside>
+            </div>
+        );
+    }
+}
+

package/src/client/components/DocPage.css

@@ -0,0 +1,56 @@
+.wsx-doc-page {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+}
+
+.doc-page {
+    flex: 1;
+    padding: var(--doc-page-padding-y, 1rem) var(--doc-page-padding-x, 2rem);
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+.doc-loading,
+.doc-empty {
+    text-align: center;
+    padding: 3rem;
+    color: var(--wsx-press-text-secondary, #666);
+}
+
+.doc-error {
+    padding: 2rem;
+    background: var(--wsx-press-error-bg, #fee);
+    border: 1px solid var(--wsx-press-error-border, #fcc);
+    border-radius: 4px;
+    color: var(--wsx-press-error-text, #c33);
+}
+
+.doc-error h2 {
+    margin-top: 0;
+    color: var(--wsx-press-error-title, #a00);
+}
+
+.doc-header {
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--wsx-press-border, #ddd);
+}
+
+.doc-title {
+    margin: 0 0 0.5rem 0;
+    font-size: 2rem;
+    font-weight: 600;
+    color: var(--wsx-press-text-primary, #333);
+}
+
+.doc-description {
+    margin: 0;
+    color: var(--wsx-press-text-secondary, #666);
+    font-size: 1.1rem;
+}
+
+.doc-content {
+    line-height: 1.6;
+}