@yl_lowcode/docs-theme 0.0.1

package/demo.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+// @ts-ignore
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { withBase } from 'vitepress'
+
+// @ts-ignore
+const props = defineProps<{
+  component: any;
+  code: { raw: string; html: string; srcPath: string };
+  title?: string;
+}>();
+
+const previewRef = ref<HTMLElement | null>(null);
+const expanded = ref(false);
+const copied = ref(false);
+let previewRoot: any = null;
+let copyTimer: ReturnType<typeof setTimeout> | null = null;
+
+async function mountPreview() {
+  if (!previewRef.value) return;
+  const [{ default: React }, { createRoot }] = await Promise.all([
+    import("react"),
+    import("react-dom/client"),
+  ]);
+  previewRoot?.unmount();
+  previewRoot = createRoot(previewRef.value);
+  previewRoot.render(React.createElement(props.component));
+}
+
+function openLive() {
+  const url = `/playground.html?demo=${props.code.srcPath}`;
+  window.open(withBase(url), "_blank");
+}
+
+function toggleExpand() {
+  expanded.value = !expanded.value;
+}
+
+async function copyCode() {
+  await navigator.clipboard.writeText(props.code.raw);
+  copied.value = true;
+  if (copyTimer) clearTimeout(copyTimer);
+  copyTimer = setTimeout(() => {
+    copied.value = false;
+  }, 2000);
+}
+
+onMounted(() => mountPreview());
+onBeforeUnmount(() => previewRoot?.unmount());
+</script>
+
+<template>
+  <div class="aui-demo">
+    <!-- 预览区 -->
+    <div class="aui-demo-preview" ref="previewRef" />
+
+    <!-- 底部操作栏 -->
+    <div class="aui-demo-footer">
+      <span class="aui-demo-desc">{{ title ?? "" }}</span>
+      <div class="aui-demo-actions">
+        <!-- 在线调试（新 Tab） -->
+        <button class="aui-action-btn" title="在线调试" @click="openLive">
+          <svg viewBox="0 0 1024 1024" width="16" height="16">
+            <path
+              d="M746.222933 102.239573l-359.799466 330.820267L185.347413 281.4976 102.2464 329.864533l198.20544 182.132054-198.20544 182.132053 83.101013 48.510293 201.076054-151.558826 359.799466 330.676906 175.527254-85.251413V187.4944z m0 217.57952v384.341334l-255.040853-192.177494z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+        <!-- 展开/收起代码 -->
+        <button
+          class="aui-action-btn"
+          :class="{ active: expanded }"
+          :title="expanded ? '收起代码' : '展开代码'"
+          @click="toggleExpand"
+        >
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline v-if="!expanded" points="6 9 12 15 18 9" />
+            <polyline v-else points="18 15 12 9 6 15" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- 代码区（可展开） -->
+    <div v-show="expanded" class="aui-demo-code">
+      <span class="aui-lang-label">tsx</span>
+      <button
+        class="aui-copy-btn"
+        :class="{ copied }"
+        @click="copyCode"
+        title="复制代码"
+      >
+        <span v-if="copied" class="aui-copy-label">已复制</span>
+        <svg
+          v-if="copied"
+          viewBox="0 0 24 24"
+          width="20"
+          height="20"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path
+            d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"
+          />
+          <rect x="9" y="3" width="6" height="4" rx="1" />
+          <polyline points="9 12 11 14 15 10" />
+        </svg>
+        <svg
+          v-else
+          viewBox="0 0 24 24"
+          width="20"
+          height="20"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path
+            d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"
+          />
+          <rect x="9" y="3" width="6" height="4" rx="1" />
+        </svg>
+      </button>
+      <div v-html="code.html" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.aui-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  overflow: hidden;
+  margin: 20px 0;
+}
+
+.aui-demo-preview {
+  padding: 32px 24px;
+  min-height: 80px;
+  background: var(--vp-c-bg);
+}
+
+.aui-demo-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 8px 6px 16px;
+  min-height: 40px;
+  border-top: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+}
+
+.aui-demo-desc {
+  flex: 1;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+
+.aui-demo-actions {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.aui-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--vp-c-text-3);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.aui-action-btn:hover {
+  background: var(--vp-c-bg-mute);
+  color: var(--vp-c-text-1);
+}
+
+.aui-action-btn.active {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+
+.aui-demo-code {
+  position: relative;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.aui-demo-code :deep(pre) {
+  margin: 0;
+  border-radius: 0;
+}
+
+.aui-lang-label {
+  position: absolute;
+  top: 2px;
+  right: 12px;
+  z-index: 2;
+  font-size: 12px;
+  font-weight: 500;
+  user-select: none;
+  color: var(--vp-code-lang-color);
+  transition: color 0.4s, opacity 0.4s;
+}
+
+.aui-demo-code:hover .aui-lang-label {
+  opacity: 0;
+}
+
+.aui-copy-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-2);
+  font-size: 13px;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s, background 0.15s,
+    box-shadow 0.15s;
+  opacity: 0;
+}
+
+.aui-demo-code:hover .aui-copy-btn {
+  opacity: 1;
+}
+
+.aui-copy-btn:hover {
+  color: var(--vp-c-text-1);
+  border-color: var(--vp-c-brand-1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.aui-copy-btn.copied {
+  opacity: 1;
+  color: var(--vp-c-brand-1);
+  border-color: var(--vp-c-brand-1);
+}
+</style>

package/index.ts

@@ -0,0 +1,13 @@
+import DefaultTheme from "vitepress/theme";
+import Layout from "./layout.vue";
+import Demo from "./demo.vue";
+import "./styles/vars.css";
+import "./styles/custom.css";
+
+export default {
+  extends: DefaultTheme,
+  Layout,
+  enhanceApp({ app }: { app: import("vue").App }) {
+    app.component("Demo", Demo);
+  },
+};

package/layout.vue

@@ -0,0 +1,263 @@
+<script setup lang="ts">
+// @ts-ignore
+import { useData } from "vitepress";
+// @ts-ignore
+import DefaultTheme from "vitepress/theme";
+// @ts-ignore
+import Playground from "./playground.vue";
+// @ts-ignore
+import { nextTick, provide } from "vue";
+
+const { frontmatter, isDark } = useData();
+
+const enableTransitions = () =>
+  "startViewTransition" in document &&
+  window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
+
+provide("toggle-appearance", async ({ clientX: x, clientY: y }: MouseEvent) => {
+  if (!enableTransitions()) {
+    isDark.value = !isDark.value;
+    return;
+  }
+
+  const clipPath = [
+    `circle(0px at ${x}px ${y}px)`,
+    `circle(${Math.hypot(
+      Math.max(x, innerWidth - x),
+      Math.max(y, innerHeight - y)
+    )}px at ${x}px ${y}px)`,
+  ];
+  // @ts-ignore
+  await document.startViewTransition(async () => {
+    isDark.value = !isDark.value;
+    await nextTick();
+  }).ready;
+
+  document.documentElement.animate(
+    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
+    {
+      duration: 300,
+      easing: "ease-in",
+      fill: "forwards",
+      pseudoElement: `::view-transition-${isDark.value ? "old" : "new"}(root)`,
+    }
+  );
+});
+</script>
+
+<template>
+  <Playground v-if="frontmatter.layout === 'playground'" />
+  <DefaultTheme.Layout v-else>
+    <template #nav-bar-content-after>
+      <slot name="nav-bar-content-after" />
+    </template>
+    <template #sidebar-nav-before>
+      <slot name="sidebar-nav-before" />
+    </template>
+  </DefaultTheme.Layout>
+</template>
+
+<style>
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root),
+.dark::view-transition-new(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root),
+.dark::view-transition-old(root) {
+  z-index: 9999;
+}
+
+.VPSwitchAppearance {
+  width: 22px !important;
+}
+
+.VPSwitchAppearance .check {
+  transform: none !important;
+}
+
+/** 自定义样式 */
+h3 {
+  margin-bottom: 16px !important;
+}
+
+table {
+  display: table !important;
+  margin: 0 !important;
+}
+
+a {
+  text-decoration: none !important;
+}
+
+.vp-doc li+li {
+  margin-top: 0 !important;
+}
+
+.vp-doc th,
+.vp-doc td {
+  border: none;
+}
+
+.vp-doc ul,
+.vp-doc ol {
+  padding-left: 0 !important;
+  margin: 0 !important;
+}
+
+.vp-doc blockquote {
+  border-left: 2px solid var(--primary-color);
+  padding-left: 10px;
+  color: var(--vp-c-text-1) !important;
+}
+
+#api+table {
+  width: 100%;
+}
+
+blockquote+table {
+  width: 100%;
+}
+
+p.text {
+  margin-bottom: 1em;
+}
+
+h2.text {
+  margin-top: 20px;
+  margin-bottom: 0.5em;
+}
+
+/* 调整样式 */
+body {
+  --vp-code-font-size: 12px !important;
+}
+
+.VPDoc.has-aside .content-container {
+  max-width: 940px;
+}
+
+.VPDoc .content {
+  min-width: 940px;
+  padding: 0;
+}
+
+.VPDoc .content .content-container {
+  max-width: 100% !important;
+}
+
+.VPDoc .prev-next {
+  padding-bottom: 40px !important;
+}
+
+.VPDocAside .content {
+  padding-left: 10px;
+}
+
+.VPHomeHero .text {
+  margin-top: 12px !important;
+}
+
+#VPContent.has-sidebar {
+  padding-right: 0;
+  padding-left: 260px;
+}
+
+.VPSidebar {
+  padding-left: 60px !important;
+  width: 280px !important;
+}
+
+.VPNavBar.has-sidebar .container>.title {
+  padding-left: 60px !important;
+  width: 280px !important;
+}
+
+.VPNavBar.has-sidebar .content {
+  padding-left: 280px !important;
+}
+
+.VPNavBar.has-sidebar .divider {
+  padding-left: 300px !important;
+}
+
+.content-container {
+  margin-left: 30px !important;
+}
+
+.vp-doc td,
+.vp-doc th {
+  font-size: 12px;
+}
+
+.custom-block {
+  padding: 12px 30px !important;
+}
+
+.custom-block-title {
+  display: none;
+}
+
+.VPHomeHero .image-bg {
+  background-image: linear-gradient(-45deg, #646cffcc 50%, #ffd14785 50%);
+  filter: blur(68px);
+}
+
+.vp-doc tr:nth-child(2n) {
+  background-color: transparent;
+}
+
+.vp-doc h2 {
+  border-top: none;
+  margin: 10px;
+}
+
+h2.text {
+  margin-top: 0;
+}
+
+:root {
+  --soui-brand-6: #197afa;
+  --soui-font-14: 12px;
+  --soui-tabs-tab-font-size: 12px;
+  --soui-14-regular: 12px;
+  --vp-c-brand-1: var(--soui-brand-6);
+  --vp-c-brand-2: var(--soui-brand-6);
+  --vp-button-brand-bg: var(--soui-brand-6);
+}
+
+body {
+  font-size: 12px;
+}
+
+.VPNavBar.has-sidebar .content {
+  padding-right: 40px !important;
+}
+
+h2 {
+  margin-left: 0 !important;
+}
+
+.VPImage.logo {
+  border-radius: 50%;
+  height: 30px;
+}
+
+.vp-doc[class*=" _interview"] .custom-block {
+  padding: 16px !important;
+}
+
+.vp-doc[class*=" _interview"] .custom-block summary {
+  margin-bottom: 0 !important;
+}
+
+.vp-doc[class*=" _interview"] .custom-block p {
+  margin: 0 !important;
+}
+</style>

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@yl_lowcode/docs-theme",
+  "version": "0.0.1",
+  "description": "共享 VitePress 文档主题（React Demo 支持）",
+  "type": "module",
+  "main": "index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./plugins/shiki-raw": "./plugins/shiki-raw.js"
+  },
+  "files": [
+    "index.ts",
+    "layout.vue",
+    "demo.vue",
+    "playground.vue",
+    "plugins",
+    "styles"
+  ],
+  "dependencies": {
+    "sucrase": "3.35.1",
+    "@yl_lowcode/editor": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "vitepress": ">=1.6.0",
+    "vue": "^3.4.0"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {}
+}

package/playground.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+// @ts-ignore
+import { ref, inject, onMounted, onBeforeUnmount } from "vue";
+
+/**
+ * 通用 Playground 组件
+ *
+ * 使用方需通过 provide 注入以下配置：
+ *   provide("playground-config", {
+ *     codeGlobs: import.meta.glob("../../demos/**\/*.tsx", { query: "?raw", import: "default" }),
+ *     loadModules: () => import("@yl_lowcode/editor").then(m => ({ "@yl_lowcode/editor": m })),
+ *   })
+ */
+const config = inject<{
+  codeGlobs: Record<string, () => Promise<any>>;
+  loadModules: () => Promise<Record<string, any>>;
+}>("playground-config");
+
+const containerRef = ref<HTMLElement | null>(null);
+let reactRoot: any = null;
+
+onMounted(async () => {
+  if (!containerRef.value || !config) return;
+
+  const params = new URLSearchParams(window.location.search);
+  const demo = params.get("demo");
+  if (!demo) return;
+
+  // 在 globs 中查找匹配的 demo 文件
+  const matchKey = Object.keys(config.codeGlobs).find((k) => k.includes(`/${demo}.tsx`));
+  if (!matchKey) return;
+
+  const rawCode = (await config.codeGlobs[matchKey]()).raw as string;
+  const [{ default: React }, { createRoot }, { transform }, userModules] = await Promise.all([
+    import("react"),
+    import("react-dom/client"),
+    import("sucrase"),
+    config.loadModules(),
+  ]);
+
+  // 编译函数：将 TSX 代码转换为可执行模块
+  function compileCode(code: string, moduleMap: Record<string, any>) {
+    try {
+      const normalizedCode = /\bimport\s+React\b/.test(code)
+        ? code
+        : `import React from "react";\n${code}`;
+      const { code: compiled } = transform(normalizedCode, {
+        transforms: ["typescript", "jsx", "imports"],
+        jsxRuntime: "classic",
+      });
+      if (!compiled) return { component: null, error: "编译无输出" };
+
+      const require = (name: string) => {
+        const resolved = moduleMap[name];
+        if (resolved !== undefined) return resolved;
+        throw new Error(`未找到模块: "${name}"`);
+      };
+
+      const exports = {} as Record<string, unknown>;
+      new Function("require", "module", "exports", compiled)(
+        require,
+        { exports },
+        exports,
+      );
+
+      const Component = (exports.default ?? exports) as React.ComponentType;
+      const component = typeof Component === "function" ? Component : null;
+      return { component, error: component ? null : "export default 不是函数" };
+    } catch (err: unknown) {
+      const error = err instanceof Error ? err.message : String(err);
+      return { component: null, error };
+    }
+  }
+
+  // ErrorBoundary
+  class ErrorBoundary extends React.Component<
+    React.PropsWithChildren<{}>,
+    { error: string | null }
+  > {
+    constructor(props: React.PropsWithChildren<{}>) {
+      super(props);
+      this.state = { error: null };
+    }
+    static getDerivedStateFromError(err: unknown) {
+      return { error: err instanceof Error ? err.message : String(err) };
+    }
+    render() {
+      if (this.state.error) {
+        return React.createElement(
+          "div",
+          {
+            style: {
+              margin: 0,
+              padding: "12px 16px",
+              color: "#ef4444",
+              fontSize: "12px",
+              fontFamily: "monospace",
+              borderBottom: "1px solid rgba(239,68,68,.2)",
+              background: "rgba(239,68,68,.05)",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all",
+              maxHeight: "160px",
+              overflow: "auto",
+            },
+          },
+          "Runtime error: " + this.state.error,
+        );
+      }
+      return (this.props as any).children;
+    }
+  }
+
+  // 合并模块映射（react 始终提供）
+  const moduleMap: Record<string, any> = {
+    react: React,
+    ...userModules,
+  };
+
+  function App() {
+    const [code, setCode] = React.useState(rawCode);
+    const [Preview, setPreview] = React.useState<React.ComponentType | null>(
+      () => compileCode(rawCode, moduleMap).component,
+    );
+    const [error, setError] = React.useState<string | null>(
+      () => compileCode(rawCode, moduleMap).error,
+    );
+
+    const handleCodeChange = React.useCallback((newCode: string) => {
+      setCode(newCode);
+      const { component, error: err } = compileCode(newCode, moduleMap);
+      setPreview(() => component);
+      setError(err);
+    }, []);
+
+    // 动态获取 Monaco 组件（从 moduleMap 中取）
+    const MonacoEditor = userModules["@yl_lowcode/editor"]?.Monaco;
+
+    return React.createElement(
+      "div",
+      { style: { display: "flex", height: "100vh", overflow: "hidden" } },
+      // 左侧：Monaco 编辑器
+      React.createElement(
+        "div",
+        {
+          style: {
+            flex: 1,
+            borderRight: "1px solid var(--vp-c-divider)",
+            overflow: "hidden",
+          },
+        },
+        MonacoEditor
+          ? React.createElement(MonacoEditor, {
+              value: code,
+              language: "javascript",
+              style: { height: "100%" },
+              onChange: handleCodeChange,
+            })
+          : React.createElement("textarea", {
+              value: code,
+              onChange: (e: any) => handleCodeChange(e.target.value),
+              style: { width: "100%", height: "100%", fontFamily: "monospace", padding: "16px" },
+            }),
+      ),
+      // 右侧：预览 + 错误
+      React.createElement(
+        "div",
+        {
+          style: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+          },
+        },
+        error &&
+          React.createElement(
+            "div",
+            {
+              style: {
+                margin: 0,
+                padding: "12px 16px",
+                color: "#ef4444",
+                fontSize: "12px",
+                fontFamily: "monospace",
+                borderBottom: "1px solid rgba(239,68,68,.2)",
+                background: "rgba(239,68,68,.05)",
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-all",
+                maxHeight: "160px",
+                overflow: "auto",
+              },
+            },
+            error,
+          ),
+        React.createElement(
+          ErrorBoundary,
+          { key: code },
+          React.createElement(
+            "div",
+            { style: { flex: 1, padding: "24px", overflow: "auto" } },
+            Preview && React.createElement(Preview),
+          ),
+        ),
+      ),
+    );
+  }
+
+  reactRoot = createRoot(containerRef.value);
+  reactRoot.render(React.createElement(App));
+});
+
+onBeforeUnmount(() => {
+  reactRoot?.unmount();
+});
+</script>
+
+<template>
+  <div class="playground-page">
+    <div ref="containerRef" class="playground-container" />
+  </div>
+</template>
+
+<style scoped>
+.playground-page {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--vp-c-bg);
+}
+
+.playground-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/plugins/shiki-raw.js

@@ -0,0 +1,41 @@
+import { readFileSync } from "fs";
+import { createMarkdownRenderer } from "vitepress";
+
+let mdPromise = null;
+
+function getMd(srcDir, options) {
+  if (!mdPromise) {
+    mdPromise = createMarkdownRenderer(srcDir, options);
+  }
+  return mdPromise;
+}
+
+export function shikiRawPlugin(options) {
+  let srcDir = process.cwd();
+
+  return {
+    name: "vite-plugin-shiki-raw",
+    enforce: "pre",
+    configResolved(config) {
+      srcDir = config.root;
+    },
+    async load(id) {
+      if (!id.endsWith("?raw")) return null;
+
+      const filePath = id.slice(0, -4);
+      if (!filePath.endsWith(".tsx")) return null;
+
+      const raw = readFileSync(filePath, "utf-8");
+      const md = await getMd(srcDir, options);
+      const html =
+        typeof md.renderAsync === "function"
+          ? await md.renderAsync("```tsx\n" + raw + "\n```")
+          : md.render("```tsx\n" + raw + "\n```");
+
+      const demosIdx = filePath.indexOf("/demos/");
+      const srcPath = demosIdx >= 0 ? filePath.slice(demosIdx + 7, -4) : "";
+
+      return `export default ${JSON.stringify({ raw, html, srcPath })}`;
+    },
+  };
+}

package/styles/custom.css

@@ -0,0 +1,48 @@
+/* 覆盖 VitePress 默认变量，接入主题色 */
+:root {
+  --vp-c-brand-1: var(--aui-accent);
+  --vp-c-brand-2: var(--aui-accent-light);
+  --vp-c-brand-3: var(--aui-accent-dark);
+  --vp-c-brand-soft: rgba(99, 102, 241, 0.1);
+}
+
+.dark .shiki span {
+  color: var(--shiki-dark, inherit);
+  font-size: 13px;
+}
+
+html:not(.dark) .shiki span {
+  color: var(--shiki-light, inherit);
+  font-size: 13px;
+}
+
+.vp-doc .language-tsx {
+  margin: 0 !important;
+  border-radius: 0 !important;
+}
+
+.vp-doc .shiki-themes {
+  padding: 10px 0 !important;
+}
+
+.vp-doc img {
+  margin: 0 !important;
+}
+
+/* demo 代码展示区：复用 VitePress 代码块，隐藏多余 UI */
+.aui-demo-code .language-tsx {
+  margin: 0;
+}
+
+.aui-demo-code .copy,
+.aui-demo-code .lang {
+  display: none !important;
+}
+
+.aui-demo-code pre.shiki {
+  margin: 0;
+  padding: 20px 24px;
+  font-size: 13px;
+  line-height: 1.7;
+  border-radius: 0;
+}

package/styles/vars.css

@@ -0,0 +1,55 @@
+/* 文档主题 CSS 变量 */
+
+:root {
+  /* 高亮色（可动态修改） */
+  --aui-accent: #197afa;
+  --aui-accent-light: #3891fb;
+  --aui-accent-dark: #0563da;
+  --aui-accent-bg: rgba(25, 122, 250, 0.1);
+
+  /* 亮色主题 */
+  --aui-bg: #ffffff;
+  --aui-bg-soft: #f6f6f7;
+  --aui-bg-mute: #ebebed;
+  --aui-border: #e2e2e3;
+  --aui-text: #213547;
+  --aui-text-2: #4a5270;
+  --aui-text-3: #8b8b8f;
+
+  /* 组件尺寸 */
+  --aui-radius-sm: 4px;
+  --aui-radius: 6px;
+  --aui-radius-lg: 10px;
+
+  /* 间距 */
+  --aui-space-1: 4px;
+  --aui-space-2: 8px;
+  --aui-space-3: 12px;
+  --aui-space-4: 16px;
+
+  /* 字体 */
+  --aui-font-sm: 13px;
+  --aui-font-base: 14px;
+  --aui-font-lg: 16px;
+
+  /* 阴影 */
+  --aui-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --aui-shadow-md:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --aui-shadow-focus: 0 0 0 3px rgba(25, 122, 250, 0.3);
+}
+
+.dark {
+  --aui-bg: #0c0e13;
+  --aui-bg-soft: #161b27;
+  --aui-bg-mute: #1e2536;
+  --aui-border: #2a3147;
+  --aui-text: #e8ecf8;
+  --aui-text-2: #9ba8c9;
+  --aui-text-3: #5a6480;
+  --aui-accent-bg: rgba(25, 122, 250, 0.18);
+  --aui-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --aui-shadow-md:
+    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  --aui-shadow-focus: 0 0 0 3px rgba(25, 122, 250, 0.4);
+}