@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/apps/api/docs-viewer.js

@@ -0,0 +1,684 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * API 文档查看器组件
+ * API documentation viewer component with sidebar navigation and live demo support.
+ *
+ * 支持国际化：label 可为字符串或返回字符串的函数，在渲染时动态解析。
+ * Supports i18n: labels can be strings or functions returning strings, resolved at render time.
+ */
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { onAitheLocaleChange, t } from '../../styles/i18n';
+/** 代码块语言别名映射 */
+const LANG_ALIAS = {
+    ts: 'typescript',
+    js: 'javascript',
+    py: 'python',
+    rb: 'ruby',
+    sh: 'bash',
+    yml: 'yaml',
+    md: 'markdown',
+    html: 'html',
+    css: 'css',
+    json: 'json',
+    xml: 'xml',
+    sql: 'sql',
+    rs: 'rust',
+    go: 'go',
+    java: 'java',
+    kt: 'kotlin',
+    swift: 'swift',
+    mjs: 'javascript',
+    cjs: 'javascript',
+    jsx: 'jsx',
+    tsx: 'tsx',
+    vue: 'vue',
+    svelte: 'svelte',
+    wasm: 'wasm',
+    dockerfile: 'dockerfile',
+    makefile: 'makefile',
+    gradle: 'gradle',
+    cmake: 'cmake',
+    tex: 'latex',
+    fs: 'fsharp',
+    ps: 'powershell',
+    pl: 'perl',
+    lua: 'lua',
+    scala: 'scala',
+    dart: 'dart',
+    r: 'r',
+    m: 'objectivec',
+    mm: 'objectivec',
+    h: 'c',
+    hpp: 'cpp',
+};
+/** 将 markdown-it 生成的 <pre><code> 替换为 <aithe-code-editor> */
+function transformCodeBlocks(html) {
+    return html.replace(/<pre><code class="language-(\w+)">([\s\S]*?)<\/code><\/pre>/g, (_match, lang, code) => {
+        const resolved = LANG_ALIAS[lang] || lang;
+        const escaped = code
+            .replaceAll('&amp;', '&')
+            .replaceAll('&lt;', '<')
+            .replaceAll('&gt;', '>')
+            .replaceAll('&quot;', '"')
+            .replaceAll('&#96;', '`')
+            .replaceAll('&#42;', '*')
+            .replaceAll('&#95;', '_')
+            .replaceAll('&#126;', '~')
+            .replaceAll('&#91;', '[')
+            .replaceAll('&#93;', ']')
+            .replaceAll('&#40;', '(')
+            .replaceAll('&#41;', ')')
+            .replaceAll('&#33;', '!')
+            .replaceAll('&', '&amp;')
+            .replaceAll('"', '&quot;')
+            .replaceAll('<', '&lt;')
+            .replaceAll('>', '&gt;')
+            .replaceAll('`', '&#96;')
+            .replaceAll('*', '&#42;')
+            .replaceAll('_', '&#95;')
+            .replaceAll('~', '&#126;')
+            .replaceAll('[', '&#91;')
+            .replaceAll(']', '&#93;')
+            .replaceAll('(', '&#40;')
+            .replaceAll(')', '&#41;')
+            .replaceAll('!', '&#33;');
+        return `<aithe-code-editor readonly show-toolbar show-theme language="${resolved}" value="${escaped}" class="md-code-fence"></aithe-code-editor>`;
+    });
+}
+let AitheDocsViewer = class AitheDocsViewer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.categories = [];
+        this.activeCategory = '';
+        this.activeEntry = '';
+        this.demoSource = '';
+        this.demoError = '';
+        /** locale 变更版本号，用于触发 Lit 重新渲染 / Locale version counter to trigger Lit re-render */
+        this.localeVersion = 0;
+        this.handleContentClick = (event) => {
+            const target = event.target;
+            const anchor = target.closest('a');
+            if (!anchor)
+                return;
+            const href = anchor.getAttribute('href');
+            if (!href)
+                return;
+            if (!href.endsWith('.md'))
+                return;
+            event.preventDefault();
+            const { catDir, filePart } = this.parseMdLink(href);
+            if (!catDir)
+                return;
+            if (this.trySelectGuide(catDir))
+                return;
+            if (!filePart)
+                return;
+            this.trySelectComponent(catDir, filePart);
+        };
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+    }
+
+    .shell {
+      display: grid;
+      grid-template-columns: 220px 1fr;
+      gap: var(--aithe-space-6);
+      min-height: 0;
+    }
+
+    .sidebar {
+      position: sticky;
+      top: 0;
+      align-self: start;
+      padding: var(--aithe-space-4);
+      border: 1px solid var(--aithe-color-border);
+      border-radius: var(--aithe-container-radius-xl);
+      background: var(--aithe-color-surface);
+      box-shadow: var(--aithe-shadow-1);
+      overflow: auto;
+      max-height: calc(100vh - 40px);
+    }
+
+    .cat-title {
+      margin: var(--aithe-space-3) 0 var(--aithe-space-2);
+      font-size: var(--aithe-font-size-sm);
+      font-weight: var(--aithe-font-weight-bold);
+      color: var(--aithe-color-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+    }
+
+    .cat-title:first-child {
+      margin-top: 0;
+    }
+
+    .entry-btn {
+      display: block;
+      width: 100%;
+      padding: var(--aithe-space-2) var(--aithe-space-3);
+      border: none;
+      border-radius: var(--aithe-radius-md);
+      background: transparent;
+      color: var(--aithe-color-text);
+      font-size: var(--aithe-font-size-sm);
+      text-align: left;
+      cursor: pointer;
+      transition:
+        background 0.15s,
+        color 0.15s;
+    }
+
+    .entry-btn:hover {
+      background: var(--aithe-color-bg-subtle);
+    }
+
+    .entry-btn.active {
+      background: linear-gradient(180deg, var(--aithe-primary-6), var(--aithe-primary-7));
+      color: white;
+    }
+
+    .content {
+      min-width: 0;
+      padding: var(--aithe-space-6);
+      border: 1px solid var(--aithe-color-border);
+      border-radius: var(--aithe-container-radius-xl);
+      background: var(--aithe-color-surface-elevated);
+      box-shadow: var(--aithe-shadow-1);
+      overflow: auto;
+    }
+
+    .content h1,
+    .content h2,
+    .content h3,
+    .content h4 {
+      color: var(--aithe-color-text);
+      margin-top: var(--aithe-space-6);
+      margin-bottom: var(--aithe-space-3);
+    }
+
+    .content h1 {
+      font-size: var(--aithe-font-size-xl);
+      border-bottom: 1px solid var(--aithe-color-border);
+      padding-bottom: var(--aithe-space-3);
+    }
+
+    .content h1:first-child {
+      margin-top: 0;
+    }
+
+    .content h2 {
+      font-size: var(--aithe-font-size-lg);
+    }
+
+    .content h3 {
+      font-size: var(--aithe-font-size-md);
+    }
+
+    .content p,
+    .content blockquote {
+      color: var(--aithe-color-text);
+      line-height: 1.7;
+    }
+
+    .content blockquote {
+      margin: var(--aithe-space-3) 0;
+      padding: var(--aithe-space-3) var(--aithe-space-4);
+      border-left: 3px solid var(--aithe-primary-6);
+      background: var(--aithe-color-bg-subtle);
+      border-radius: var(--aithe-container-radius-md);
+    }
+
+    .content table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: var(--aithe-space-4) 0;
+      font-size: var(--aithe-font-size-sm);
+    }
+
+    .content th,
+    .content td {
+      padding: var(--aithe-space-2) var(--aithe-space-3);
+      border: 1px solid var(--aithe-color-border);
+      text-align: left;
+    }
+
+    .content th {
+      background: var(--aithe-color-bg-subtle);
+      font-weight: var(--aithe-font-weight-semibold);
+    }
+
+    .content code {
+      padding: 2px 6px;
+      border-radius: var(--aithe-container-radius-sm);
+      background: var(--aithe-color-bg-subtle);
+      font-family: var(--aithe-font-family-mono);
+      font-size: 0.9em;
+    }
+
+    .content pre {
+      margin: var(--aithe-space-4) 0;
+      padding: var(--aithe-space-4);
+      border: 1px solid var(--aithe-color-border);
+      border-radius: var(--aithe-container-radius-xl);
+      background: #09111f;
+      color: #edf4ff;
+      overflow-x: auto;
+      font-family: var(--aithe-font-family-mono);
+      font-size: 13px;
+      line-height: 1.6;
+    }
+
+    .content pre code {
+      padding: 0;
+      background: transparent;
+      color: inherit;
+    }
+
+    .content a {
+      color: var(--aithe-primary-6);
+      text-decoration: none;
+    }
+
+    .content a:hover {
+      text-decoration: underline;
+    }
+
+    .content ul,
+    .content ol {
+      padding-left: var(--aithe-space-5);
+    }
+
+    .content hr {
+      border: none;
+      border-top: 1px solid var(--aithe-color-border);
+      margin: var(--aithe-space-5) 0;
+    }
+
+    .empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 320px;
+      color: var(--aithe-color-text-muted);
+    }
+
+    .demo-section {
+      margin-top: var(--aithe-space-6);
+      border-top: 1px solid var(--aithe-color-border);
+      padding-top: var(--aithe-space-5);
+    }
+
+    .demo-section-title {
+      font-size: var(--aithe-font-size-lg);
+      font-weight: var(--aithe-font-weight-semibold);
+      color: var(--aithe-color-text);
+      margin-bottom: var(--aithe-space-4);
+    }
+
+    .demo-body {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--aithe-space-4);
+      min-width: 0;
+    }
+
+    .demo-body.vertical {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto;
+    }
+
+    .demo-body.vertical .demo-preview-shell {
+      min-height: 300px;
+    }
+
+    .demo-preview-shell {
+      min-width: 0;
+      max-width: 100%;
+      border: 1px solid var(--aithe-color-border);
+      border-radius: var(--aithe-container-radius-xl);
+      background:
+        radial-gradient(circle at top right, rgba(77, 141, 255, 0.08), transparent 32%),
+        var(--aithe-color-bg);
+      overflow: hidden;
+    }
+
+    .demo-preview {
+      min-width: 0;
+      max-width: 100%;
+      min-height: 180px;
+      padding: var(--aithe-space-5);
+      overflow: auto;
+    }
+
+    .demo-code-shell {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      max-width: 100%;
+      gap: var(--aithe-space-2);
+    }
+
+    .demo-code-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--aithe-space-3);
+    }
+
+    .demo-code-label {
+      font-size: var(--aithe-font-size-sm);
+      font-weight: var(--aithe-font-weight-semibold);
+      color: var(--aithe-color-text-muted);
+    }
+
+    .demo-reset-btn {
+      min-height: 36px;
+      padding: 0 var(--aithe-space-3);
+      border: 1px solid var(--aithe-color-border);
+      border-radius: var(--aithe-radius-md);
+      background: var(--aithe-color-surface);
+      color: var(--aithe-color-text);
+      cursor: pointer;
+      font-size: var(--aithe-font-size-sm);
+    }
+
+    .demo-reset-btn:hover {
+      background: var(--aithe-color-bg-subtle);
+    }
+
+    .demo-editor {
+      display: block;
+      width: 100%;
+      min-width: 0;
+      max-width: 100%;
+      min-height: 220px;
+      padding: var(--aithe-space-4);
+      border: 1px solid var(--aithe-color-border);
+      border-radius: var(--aithe-container-radius-xl);
+      background: #09111f;
+      color: #edf4ff;
+      font: 13px/1.6 var(--aithe-font-family-mono);
+      overflow-x: auto;
+      resize: vertical;
+    }
+
+    .demo-error {
+      padding: var(--aithe-space-3) var(--aithe-space-4);
+      border-top: 1px solid var(--aithe-color-border);
+      background: rgba(223, 82, 107, 0.08);
+      color: var(--aithe-danger-7);
+      font-family: var(--aithe-font-family-mono);
+      font-size: var(--aithe-font-size-sm);
+      white-space: pre-wrap;
+    }
+
+    @media (max-width: 768px) {
+      .shell {
+        grid-template-columns: 1fr;
+      }
+
+      .sidebar {
+        position: static;
+        max-height: none;
+      }
+
+      .demo-body {
+        grid-template-columns: 1fr;
+      }
+    }
+  `; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.unsubscribeLocale = onAitheLocaleChange(() => {
+            this.localeVersion++;
+        });
+        if (this.categories.length > 0 && !this.activeCategory) {
+            this.activeCategory = this.categories[0].key;
+            if (this.categories[0].entries.length > 0) {
+                this.activeEntry = this.categories[0].entries[0].key;
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unsubscribeLocale?.();
+    }
+    parseMdLink(href) {
+        const segments = href.replace(/^\/+/, '').split('/');
+        const lastTwo = segments.length >= 2 ? segments.slice(-2) : segments;
+        const catDir = lastTwo[0];
+        const filePart = lastTwo[1]?.replace(/\.md$/, '') ?? lastTwo[0]?.replace(/\.md$/, '');
+        return { catDir, filePart };
+    }
+    trySelectGuide(catDir) {
+        const guideDir = catDir.replace(/\.md$/, '');
+        const guideMap = {
+            quickstart: 'guide-quickstart',
+            guide: 'guide-guide',
+            theming: 'guide-theming',
+            i18n: 'guide-i18n',
+            datahub: 'guide-datahub',
+            'framework-integration': 'guide-framework-integration',
+            autoform: 'guide-autoform',
+            markdown: 'guide-markdown',
+            highlight: 'guide-highlight',
+        };
+        const guideEntryKey = guideMap[guideDir];
+        if (!guideEntryKey)
+            return false;
+        for (const cat of this.categories) {
+            if (cat.key !== 'guides')
+                continue;
+            for (const entry of cat.entries) {
+                if (entry.key === guideEntryKey) {
+                    this.selectEntry(cat.key, entry.key);
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    trySelectComponent(catDir, filePart) {
+        const catMap = {
+            basic: 'basic',
+            layout: 'layout',
+            framework: 'framework',
+            navigation: 'navigation',
+            form: 'form',
+            feedback: 'feedback',
+            data: 'data',
+            display: 'display',
+            progress: 'progress',
+            container: 'container',
+            theme: 'theme',
+        };
+        const catKey = catMap[catDir];
+        if (!catKey)
+            return;
+        const keyPrefixMap = {
+            basic: 'basic',
+            layout: 'layout',
+            framework: 'framework',
+            navigation: 'nav',
+            form: 'form',
+            feedback: 'fb',
+            data: 'data',
+            display: 'disp',
+            progress: 'prog',
+            container: 'cont',
+            theme: 'theme',
+        };
+        const keyPrefix = keyPrefixMap[catKey] ?? catKey;
+        for (const cat of this.categories) {
+            if (cat.key !== catKey)
+                continue;
+            for (const entry of cat.entries) {
+                if (entry.key === `${keyPrefix}-${filePart}`) {
+                    this.selectEntry(catKey, entry.key);
+                    return;
+                }
+            }
+        }
+    }
+    get currentEntry() {
+        for (const cat of this.categories) {
+            for (const entry of cat.entries) {
+                if (entry.key === this.activeEntry) {
+                    return entry;
+                }
+            }
+        }
+        return undefined;
+    }
+    selectEntry(catKey, entryKey) {
+        this.activeCategory = catKey;
+        this.activeEntry = entryKey;
+    }
+    willUpdate(changed) {
+        if (changed.has('activeEntry')) {
+            const entry = this.currentEntry;
+            this.demoSource = entry?.demoCode ?? '';
+            this.demoError = '';
+        }
+    }
+    updated(changed) {
+        if ((changed.has('demoSource') || changed.has('activeEntry')) && this.demoPreview) {
+            this.scheduleDemoRender();
+        }
+    }
+    scheduleDemoRender() {
+        clearTimeout(this.demoDebounceTimer);
+        this.demoDebounceTimer = setTimeout(() => this.renderDemoPreview(), 300);
+    }
+    renderDemoPreview() {
+        if (!this.demoPreview)
+            return;
+        const entry = this.currentEntry;
+        if (!entry?.demoCode)
+            return;
+        try {
+            this.demoPreview.innerHTML = this.demoSource;
+            entry.demoSetup?.(this.demoPreview);
+            this.demoError = '';
+        }
+        catch (error) {
+            this.demoError = error instanceof Error ? error.stack || error.message : String(error);
+        }
+    }
+    renderSidebar() {
+        return this.categories.map((cat) => html `
+        <div class="cat-title">${typeof cat.label === 'function' ? cat.label() : cat.label}</div>
+        ${cat.entries.map((entry) => html `
+            <button
+              class=${`entry-btn ${this.activeEntry === entry.key ? 'active' : ''}`}
+              type="button"
+              @click=${() => this.selectEntry(cat.key, entry.key)}
+            >
+              ${typeof entry.label === 'function' ? entry.label() : entry.label}
+            </button>
+          `)}
+      `);
+    }
+    renderEmpty() {
+        return html `
+      <div class="empty">${t('api.empty')}</div>
+    `;
+    }
+    renderDemoSection(entry) {
+        if (!entry.demoCode)
+            return '';
+        const previewStyle = entry.previewHeight ? `min-height:${entry.previewHeight}` : '';
+        const demoErrorBlock = this.demoError
+            ? html `
+          <div class="demo-error">${this.demoError}</div>
+        `
+            : '';
+        const layoutClass = entry.layout === 'vertical' ? 'demo-body vertical' : 'demo-body';
+        return html `
+      <div class="demo-section">
+        <div class="demo-section-title">${t('api.demoSection')}</div>
+        <div class=${layoutClass}>
+          <div class="demo-preview-shell">
+            <div class="demo-preview" style=${previewStyle}></div>
+            ${demoErrorBlock}
+          </div>
+          <div class="demo-code-shell">
+            <div class="demo-code-header">
+              <span class="demo-code-label">${t('api.code')}</span>
+              <button
+                class="demo-reset-btn"
+                type="button"
+                @click=${() => {
+            this.demoSource = entry.demoCode ?? '';
+        }}
+              >
+                ${t('api.reset')}
+              </button>
+            </div>
+            <textarea
+              class="demo-editor"
+              .value=${this.demoSource}
+              spellcheck="false"
+              @input=${(event) => {
+            this.demoSource = event.currentTarget.value;
+        }}
+            ></textarea>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderContent(entry) {
+        const currentHtml = entry?.html ?? '';
+        if (!currentHtml)
+            return this.renderEmpty();
+        const transformedHtml = transformCodeBlocks(currentHtml);
+        return html `
+      <div .innerHTML=${transformedHtml} @click=${this.handleContentClick}></div>
+      ${this.renderDemoSection(entry)}
+    `;
+    }
+    render() {
+        const entry = this.currentEntry;
+        return html `
+      <div class="shell">
+        <aside class="sidebar">${this.renderSidebar()}</aside>
+
+        <main class="content">${this.renderContent(entry)}</main>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], AitheDocsViewer.prototype, "categories", void 0);
+__decorate([
+    state()
+], AitheDocsViewer.prototype, "activeCategory", void 0);
+__decorate([
+    state()
+], AitheDocsViewer.prototype, "activeEntry", void 0);
+__decorate([
+    state()
+], AitheDocsViewer.prototype, "demoSource", void 0);
+__decorate([
+    state()
+], AitheDocsViewer.prototype, "demoError", void 0);
+__decorate([
+    state()
+], AitheDocsViewer.prototype, "localeVersion", void 0);
+__decorate([
+    query('.demo-preview')
+], AitheDocsViewer.prototype, "demoPreview", void 0);
+AitheDocsViewer = __decorate([
+    customElement('aithe-docs-viewer')
+], AitheDocsViewer);
+export { AitheDocsViewer };

package/dist/apps/api/i18n/de-DE.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"de-DE.d.ts","sourceRoot":"","sources":["../../../../src/apps/api/i18n/de-DE.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAgIxC,CAAC"}
+{"version":3,"file":"de-DE.d.ts","sourceRoot":"","sources":["../../../../src/apps/api/i18n/de-DE.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA6IxC,CAAC"}