@yl_lowcode/docs-theme 0.0.13 → 0.0.15

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@yl_lowcode/docs-theme",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "共享 VitePress 文档主题（React Demo 支持）",
   "type": "module",
   "main": "index.ts",
   "exports": {
     ".": "./index.ts",
-    "./plugins/shiki-raw": "./plugins/shiki-raw.js"
+    "./vue": "./vue/index.ts",
+    "./plugins/shiki-raw": "./plugins/shiki-react.js",
+    "./plugins/shiki-vue": "./plugins/shiki-vue.js"
   },
   "peerDependencies": {
     "vue": "^3.4.0",

package/plugins/shiki-vue.js

@@ -0,0 +1,40 @@
+import { readFileSync } from "fs";
+import { createMarkdownRenderer } from "vitepress";
+
+function getMd(srcDir, options) {
+  if (!mdPromise) {
+    mdPromise = createMarkdownRenderer(srcDir, options);
+  }
+  return mdPromise;
+}
+
+/**
+ * 为 .vue?raw 添加 Shiki 高亮 HTML，同时保留原始源码字符串。
+ * 返回对象：{ raw: string; html: string; srcPath: string }
+ */
+export function vueRawPlugin(options) {
+  let srcDir = process.cwd();
+
+  return {
+    name: "vite-plugin-vue-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(".vue")) return null;
+
+      const raw = readFileSync(filePath, "utf-8");
+      const md = await getMd(srcDir, options);
+      const html = await md.renderAsync("```vue\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/{index.ts → react/index.ts}

@@ -2,7 +2,7 @@
 import DefaultTheme from "vitepress/theme";
 import Layout from "./layout.vue";
 import Demo from "./demo.vue";
-import "./theme.css";
+import "../theme.css";
 
 export interface ThemeHooks {
   /** 主题或颜色变更时触发（dark/light 切换、颜色切换都会调用） */

package/{layout.vue → react/layout.vue}

@@ -3,11 +3,11 @@
 import { useData } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 import Playground from "./playground.vue";
-import setTheme from "./color";
+import setTheme from "../color";
 import { watch, nextTick, provide, inject, onMounted } from "vue";
-import type { ThemeHooks } from "./index";
+import type { ThemeHooks } from "../index";
 // @ts-ignore
-import NiceDropdown from "./drop-down.vue";
+import NiceDropdown from "../drop-down.vue";
 
 const themeHooks = inject<ThemeHooks>("theme-hooks", {});
 
@@ -47,10 +47,10 @@ const colorConfig = [
     ...item,
     onClick: async () => {
       localStorage?.setItem("color", item.key);
-      setTheme(isDark.value ? "dark" : "light", item.key);
+      const rgbColor = setTheme(isDark.value ? "dark" : "light", item.key);
       themeHooks.onThemeChange?.({
         theme: isDark.value ? "dark" : "light",
-        color: item.key,
+        color: rgbColor,
       });
     },
   };

package/vue/demo.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="aui-demo">
+    <!-- 预览区：直接渲染 Vue 组件 -->
+    <div class="aui-demo-preview">
+      <component :is="component" />
+    </div>
+
+    <!-- 底部操作栏 -->
+    <div class="aui-demo-footer">
+      <span class="aui-demo-desc">{{ title ?? '' }}</span>
+      <div class="aui-demo-actions">
+        <button
+          class="aui-action-btn"
+          :class="{ active: expanded }"
+          :title="expanded ? '收起代码' : '展开代码'"
+          @click="expanded = !expanded"
+        >
+          <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">vue</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>
+
+<script setup lang="ts">
+// @ts-nocheck
+import { ref } from 'vue'
+import { withBase } from 'vitepress'
+
+const props = defineProps<{
+  component: any
+  code: { raw: string; html: string; srcPath: string }
+  title?: string
+}>()
+
+const expanded = ref(false)
+const copied = ref(false)
+let copyTimer: ReturnType<typeof setTimeout> | null = null
+
+  function openLive() {
+  const url = `/playground.html?demo=${props.code.srcPath}`;
+  window.open(withBase(url), "_blank");
+}
+
+async function copyCode() {
+  await navigator.clipboard.writeText(props.code.raw)
+  copied.value = true
+  if (copyTimer) clearTimeout(copyTimer)
+  copyTimer = setTimeout(() => { copied.value = false }, 2000)
+}
+</script>
+
+<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/vue/index.ts

@@ -0,0 +1,18 @@
+// @ts-nocheck
+import DefaultTheme from "vitepress/theme";
+import Layout from "./layout.vue";
+import Demo from "./demo.vue";
+import "../theme.css";
+
+export interface ThemeHooks {
+  /** 主题或颜色变更时触发（dark/light 切换、颜色切换都会调用） */
+  onThemeChange?: (info: { theme: "dark" | "light"; color: string }) => void;
+}
+
+export default {
+  extends: DefaultTheme,
+  Layout,
+  enhanceApp({ app }: { app: import("vue").App }) {
+    app.component("Demo", Demo);
+  },
+};

package/vue/layout.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { useData } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+import setTheme from "../color";
+import { watch, nextTick, provide, inject, onMounted } from "vue";
+import type { ThemeHooks } from "../index";
+// @ts-ignore
+import NiceDropdown from "../drop-down.vue";
+
+const themeHooks = inject<ThemeHooks>("theme-hooks", {});
+
+const colorConfig = [
+  {
+    key: "blue",
+    label: "山药蓝",
+    color: "#197AFA",
+  },
+  {
+    key: "green",
+    label: "生机绿",
+    color: "#29CC97",
+  },
+  {
+    key: "orange",
+    label: "活力橙",
+    color: "#F75229",
+  },
+  {
+    key: "purple",
+    label: "科技紫",
+    color: "#6463D5",
+  },
+  {
+    key: "pink",
+    label: "魅力粉",
+    color: "#d84293",
+  },
+  {
+    key: "red",
+    label: "喜庆红",
+    color: "#eb4242",
+  },
+].map((item: any) => {
+  return {
+    ...item,
+    onClick: async () => {
+      localStorage?.setItem("color", item.key);
+      const rgbColor = setTheme(isDark.value ? "dark" : "light", item.key);
+      themeHooks.onThemeChange?.({
+        theme: isDark.value ? "dark" : "light",
+        color: rgbColor,
+      });
+    },
+  };
+});
+
+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)`,
+    }
+  );
+});
+
+onMounted(() => {
+  watch(isDark, async (dark) => {
+    const color = localStorage?.getItem("color") as any;
+    const rgbColor = setTheme(dark ? "dark" : "light", color);
+    themeHooks.onThemeChange?.({
+      theme: dark ? "dark" : "light",
+      color: rgbColor || "blue",
+    });
+  });
+  setTimeout(async () => {
+    const color = localStorage?.getItem("color") as any;
+    const rgbColor = setTheme(isDark.value ? "dark" : "light", color);
+    themeHooks.onThemeChange?.({
+      theme: isDark.value ? "dark" : "light",
+      color: rgbColor || "blue",
+    });
+  }, 800);
+});
+</script>
+
+<template>
+  <DefaultTheme.Layout>
+    <template #nav-bar-content-after>
+      <slot name="nav-bar-content-after" />
+      <NiceDropdown :options="colorConfig" width="90px">
+        <template #trigger>
+          <svg
+            viewBox="0 0 24 24"
+            width="16px"
+            height="16px"
+            fill="var(--soui-brand-6)"
+            style="margin-left: 20px"
+          >
+            <path
+              d="M8.36107 2.0003C8.55307 1.99563 8.74236 2.04634 8.9063 2.14639L13.4505 4.91945L18.472 3.15178C18.9929 2.96839 19.5639 3.24204 19.7473 3.76299C19.811 3.94415 19.8213 4.13984 19.7768 4.32667L18.5437 9.50539L21.7766 13.7348C22.112 14.1736 22.0282 14.8012 21.5894 15.1366C21.4368 15.2532 21.2538 15.3235 21.0624 15.3389L15.7561 15.7664L12.7327 20.1481C12.419 20.6026 11.7962 20.7169 11.3417 20.4032C11.1836 20.2941 11.0603 20.1418 10.9864 19.9645L9.20794 15.694L3.89851 21.0041C3.50799 21.3946 2.87482 21.3946 2.4843 21.0041C2.09378 20.6135 2.09378 19.9804 2.4843 19.5898L7.46294 14.61L3.83862 13.5286C3.30937 13.3708 3.00828 12.8138 3.16613 12.2845C3.22102 12.1005 3.32774 11.9361 3.47355 11.8111L7.51513 8.34624L7.38569 3.02432C7.37226 2.47219 7.80895 2.01372 8.36107 2.0003ZM9.52452 5.45242C9.47449 5.53441 9.44913 5.62908 9.45148 5.7251L9.53762 9.24671L6.86306 11.5395C6.65341 11.7192 6.62914 12.0348 6.80887 12.2445C6.87138 12.3174 6.95357 12.3708 7.04561 12.3982L10.4215 13.4048L11.775 16.6557C11.8811 16.9107 12.1738 17.0313 12.4288 16.9252C12.5174 16.8883 12.5935 16.8266 12.648 16.7476L14.6492 13.8492L18.1593 13.5657C18.4346 13.5435 18.6397 13.3023 18.6174 13.0271C18.6097 12.9314 18.5746 12.84 18.5163 12.7637L16.3782 9.96569L17.1935 6.5383C17.2574 6.26966 17.0914 6.00007 16.8228 5.93616C16.7294 5.91394 16.6315 5.91909 16.541 5.951L13.2191 7.12122L10.2118 5.28607C9.97606 5.14222 9.66836 5.21671 9.52452 5.45242Z"
+            />
+          </svg>
+        </template>
+      </NiceDropdown>
+    </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;
+}
+</style>