@yl_lowcode/docs-theme 0.0.5 → 0.0.7

package/index.ts

@@ -2,8 +2,7 @@
 import DefaultTheme from "vitepress/theme";
 import Layout from "./layout.vue";
 import Demo from "./demo.vue";
-import "./styles/vars.css";
-import "./styles/custom.css";
+import "./theme.css";
 
 export default {
   extends: DefaultTheme,

package/layout.vue

@@ -3,7 +3,51 @@
 import { useData } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 import Playground from "./playground.vue";
-import { nextTick, provide } from "vue";
+import setTheme from "./color";
+import { watch, nextTick, provide, onMounted } from "vue";
+// @ts-ignore
+import NiceDropdown from "./drop-down.vue";
+
+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);
+      setTheme(isDark.value ? "dark" : "light", item.key);
+    },
+  };
+});
 
 const { frontmatter, isDark } = useData();
 
@@ -40,6 +84,18 @@ provide("toggle-appearance", async ({ clientX: x, clientY: y }: MouseEvent) => {
     }
   );
 });
+
+onMounted(() => {
+  watch(isDark, async (dark) => {
+    setTheme(dark ? "dark" : "light", localStorage?.getItem("color") as any);
+  });
+  setTimeout(async () => {
+    setTheme(
+      isDark.value ? "dark" : "light",
+      localStorage?.getItem("color") as any
+    );
+  }, 800);
+});
 </script>
 
 <template>
@@ -47,6 +103,21 @@ provide("toggle-appearance", async ({ clientX: x, clientY: y }: MouseEvent) => {
   <DefaultTheme.Layout v-else>
     <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" />
@@ -78,152 +149,4 @@ provide("toggle-appearance", async ({ clientX: x, clientY: y }: MouseEvent) => {
 .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;
-}
-
-.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;
-}
-
-.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);
-}
-
-.VPNavBar.has-sidebar .content {
-  padding-right: 40px !important;
-}
-
-h2 {
-  margin-left: 0 !important;
-}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yl_lowcode/docs-theme",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "共享 VitePress 文档主题（React Demo 支持）",
   "type": "module",
   "main": "index.ts",

package/styles/custom.css

@@ -1,48 +0,0 @@
-/* 覆盖 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

@@ -1,55 +0,0 @@
-/* 文档主题 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);
-}