@yl_lowcode/docs-theme 0.0.8 → 0.0.10

package/color/index.ts

@@ -22,8 +22,8 @@ export default (
   theme: "dark" | "light",
   color: "red" | "pink" | "blue" | "green" | "orange" | "purple" = "blue"
 ) => {
-  console.log(theme, color);
   const themeColor = themeColors[color];
+  document.documentElement.style.setProperty("--soui-brand-6", themeColor['Brand-6']);
   (window as any).Shineout?.setToken?.({
     selector: "html",
     token: {

package/demo.vue

@@ -145,8 +145,9 @@ onBeforeUnmount(() => previewRoot?.unmount());
 }
 
 .aui-demo-preview {
-  padding: 32px 24px;
+  padding: 20px;
   min-height: 80px;
+  overflow: auto;
   background: var(--vp-c-bg);
 }
 

package/drop-down.vue

@@ -128,10 +128,10 @@ onUnmounted(() => document.removeEventListener("click", handleClickOutside));
   top: calc(100% + 8px); /* 距离触发器下方 8px */
   right: -20px;
   /* 如果需要居右对齐，把 left:0 改为 right:0 */
-  background-color: var(--soui-neutral-fill-2);
+  background-color: var(--vp-c-bg);
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border: 1px solid var(--soui-neutral-border-1);
+  border: 1px solid var(--vp-c-gutter);
   padding: 6px 0;
   z-index: 2000;
   overflow: hidden;
@@ -156,7 +156,7 @@ onUnmounted(() => document.removeEventListener("click", handleClickOutside));
 }
 
 .menu-item:hover {
-  background-color: var(--soui-neutral-fill-3); /* 浅灰色 hover 背景 */
+  background-color: var(--vp-c-bg-soft); /* 浅灰色 hover 背景 */
 }
 
 /* Label 样式 */

package/editor.ts

@@ -0,0 +1 @@
+export * from "@yl_lowcode/editor";

package/index.ts

@@ -4,6 +4,11 @@ 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,

package/layout.vue

@@ -4,10 +4,13 @@ import { useData } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 import Playground from "./playground.vue";
 import setTheme from "./color";
-import { watch, nextTick, provide, onMounted } from "vue";
+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",
@@ -45,6 +48,10 @@ const colorConfig = [
     onClick: async () => {
       localStorage?.setItem("color", item.key);
       setTheme(isDark.value ? "dark" : "light", item.key);
+      themeHooks.onThemeChange?.({
+        theme: isDark.value ? "dark" : "light",
+        color: item.key,
+      });
     },
   };
 });
@@ -87,13 +94,20 @@ provide("toggle-appearance", async ({ clientX: x, clientY: y }: MouseEvent) => {
 
 onMounted(() => {
   watch(isDark, async (dark) => {
-    setTheme(dark ? "dark" : "light", localStorage?.getItem("color") as any);
+    const color = localStorage?.getItem("color") as any;
+    setTheme(dark ? "dark" : "light", color);
+    themeHooks.onThemeChange?.({
+      theme: dark ? "dark" : "light",
+      color: color || "blue",
+    });
   });
   setTimeout(async () => {
-    setTheme(
-      isDark.value ? "dark" : "light",
-      localStorage?.getItem("color") as any
-    );
+    const color = localStorage?.getItem("color") as any;
+    setTheme(isDark.value ? "dark" : "light", color);
+    themeHooks.onThemeChange?.({
+      theme: isDark.value ? "dark" : "light",
+      color: color || "blue",
+    });
   }, 800);
 });
 </script>

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@yl_lowcode/docs-theme",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "共享 VitePress 文档主题（React Demo 支持）",
   "type": "module",
   "main": "index.ts",
   "exports": {
     ".": "./index.ts",
-    "./plugins/shiki-raw": "./plugins/shiki-raw.js"
+    "./plugins/shiki-raw": "./plugins/shiki-raw.js",
+    "./sucrase": "./sucrase.ts",
+    "./editor": "./editor.ts"
   },
   "dependencies": {
     "sucrase": "3.35.1",

package/playground.vue

@@ -3,6 +3,7 @@
 import React from "react";
 import * as ReactDOMClient from "react-dom/client";
 import { ref, inject, onMounted, onBeforeUnmount } from "vue";
+import { Monaco as MonacoEditor } from "./editor";
 /**
  * 通用 Playground 组件
  *
@@ -129,9 +130,6 @@ onMounted(async () => {
       setError(err);
     }, []);
 
-    // 动态获取 Monaco 组件（从 moduleMap 中取）
-    const MonacoEditor = userModules["@yl_lowcode/editor"]?.Monaco;
-
     return React.createElement(
       "div",
       { style: { display: "flex", height: "100vh", overflow: "hidden" } },

package/sucrase.ts

@@ -0,0 +1,2 @@
+export * from "sucrase";
+export { default } from "sucrase";