@fuxishi/vitepress-theme 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +113 -107
  2. package/dist/chunk/FxHomeFeatureBefore-DUbsbVTj.js +38 -0
  3. package/dist/index.js +1 -1
  4. package/package.json +4 -3
  5. package/dist/chunk/FxHomeFeatureBefore-C2KseNb3.js +0 -27
package/README.md CHANGED
@@ -1,107 +1,113 @@
1
- # @fuxishi/vitepress-theme
2
-
3
- 精美的 VitePress 文档站主题扩展，毛玻璃质感，紫蓝渐变，动效丰富，开箱即用。
4
-
5
- ## 特性
6
-
7
- - 🎵 **悬浮音乐球** — 毛玻璃质感的浮动播放器，支持单曲/列表模式，紫蓝渐变进度环与四重播放动效
8
- - 🎊 **点击彩纸** — 全局点击彩纸特效，金色星星与彩色纸屑
9
- - ✨ **Feature 光效** — 首页 Feature 卡片鼠标追踪光晕效果
10
- - 🌈 **彩虹边框** — 暗色模式下代码块 hover 时展示彩虹旋转边框
11
- - 🔄 **主题切换动画** — View Transition API 实现亮暗模式圆形扩散动画
12
- - 🎨 **标题装饰** — h1-h4 各有不同颜色的下划线装饰
13
- - ⚙️ **类型安全** — 完整的 TypeScript 类型定义，IDE 友好
14
-
15
- ## 安装
16
-
17
- ```bash
18
- npm install @fuxishi/vitepress-theme
19
- ```
20
-
21
- 需要安装以下 peerDependencies：
22
-
23
- ```bash
24
- npm install vitepress vue element-plus
25
- ```
26
-
27
- ## 使用
28
-
29
- ### 1. 注册主题
30
-
31
- 创建 `.vitepress/theme/index.ts`：
32
-
33
- ```ts
34
- import FxTheme from "@fuxishi/vitepress-theme"
35
- import "@fuxishi/vitepress-theme/style.css"
36
-
37
- export default FxTheme
38
- ```
39
-
40
- ### 2. 继承配置
41
-
42
- 创建 `.vitepress/config.mts`：
43
-
44
- ```ts
45
- import { defineConfigWithTheme } from "vitepress"
46
- import fxConfig from "@fuxishi/vitepress-theme/config"
47
- import type { FxThemeConfig } from "@fuxishi/vitepress-theme/config"
48
-
49
- export default defineConfigWithTheme<FxThemeConfig>({
50
- extends: fxConfig,
51
- lang: "zh-CN",
52
- title: "我的文档站",
53
- themeConfig: {
54
- nav: [{ text: "指南", link: "/guide/" }],
55
- sidebar: {
56
- "/guide/": [{ text: "快速开始", link: "/guide/" }],
57
- },
58
- // 启用音乐球
59
- musicBall: {
60
- enable: true,
61
- autoplay: false,
62
- loop: true,
63
- src: "/music/my-song.mp3",
64
- },
65
- // 启用彩纸效果
66
- confetti: true,
67
- },
68
- })
69
- ```
70
-
71
- ### 3. 启动开发服务器
72
-
73
- ```bash
74
- npx vitepress dev
75
- ```
76
-
77
- ## 配置
78
-
79
- ### FxThemeConfig
80
-
81
- 继承自 VitePress `DefaultTheme.Config`，新增以下字段：
82
-
83
- | 配置项 | 类型 | 默认值 | 说明 |
84
- | -------------------- | ------------- | ------- | -------------------- |
85
- | `musicBall.enable` | `boolean` | `true` | 是否启用音乐球 |
86
- | `musicBall.visible` | `boolean` | `true` | 是否可见 |
87
- | `musicBall.autoplay` | `boolean` | `false` | 自动播放 |
88
- | `musicBall.loop` | `boolean` | `true` | 循环播放（单曲模式） |
89
- | `musicBall.src` | `string` | `''` | 单首音乐地址 |
90
- | `musicBall.list` | `MusicItem[]` | — | 多首音乐列表 |
91
- | `confetti` | `boolean` | `true` | 是否启用点击彩纸效果 |
92
-
93
- ## 导出
94
-
95
- | 导出路径 | 说明 |
96
- | ------------------------------------ | ---------------------- |
97
- | `@fuxishi/vitepress-theme` | 主题（Layout + 样式） |
98
- | `@fuxishi/vitepress-theme/config` | VitePress 基础配置预设 |
99
- | `@fuxishi/vitepress-theme/style.css` | 独立样式文件 |
100
-
101
- ## 文档
102
-
103
- 完整文档请访问：[https://fuxishi-vitepress-theme.fuxizjxzy.cn](https://fuxishi-vitepress-theme.fuxizjxzy.cn)
104
-
105
- ## License
106
-
107
- [MIT](./LICENSE)
1
+ # @fuxishi/vitepress-theme
2
+
3
+ 精美的 VitePress 文档站主题扩展，毛玻璃质感，紫蓝渐变，动效丰富，开箱即用。
4
+
5
+ A beautiful VitePress theme extension with frosted glass effects, purple-blue gradients, rich animations, and ready to use.
6
+
7
+ ## 特性 / Features
8
+
9
+ - 🎵 **悬浮音乐球 / Floating Music Ball** — 毛玻璃质感的浮动播放器，支持单曲/列表模式，紫蓝渐变进度环与四重播放动效 / Frosted glass floating player with single/playlist mode, purple-blue gradient progress ring and four playback animations
10
+ - 🎊 **点击彩纸 / Click Confetti** — 全局点击彩纸特效，金色星星与金色圆形纸屑 / Global click confetti effect with gold stars and circular confetti
11
+ - ✨ **Feature 光效 / Feature Glow** — 首页 Feature 卡片鼠标追踪光晕效果 / Mouse-tracking glow effect on homepage Feature cards
12
+ - ✨ **光束边框 / Beam Border** — 暗色模式下代码块和导航 hover 时展示紫青品牌色光束旋转边框 / Purple-cyan brand color beam border on code blocks and navigation in dark mode on hover
13
+ - 🔄 **主题切换动画 / Theme Switch Animation** — View Transition API 实现亮暗模式圆形扩散动画 / Circular spread animation for light/dark mode switching using View Transition API
14
+ - 🎨 **标题装饰 / Heading Decorations** — h1-h4 各有不同颜色的下划线装饰 / Different colored underlines for h1-h4 headings
15
+ - ⚙️ **类型安全 / Type-safe** — 完整的 TypeScript 类型定义，IDE 友好 / Complete TypeScript type definitions, IDE friendly
16
+
17
+ ## 安装 / Installation
18
+
19
+ ```bash
20
+ npm install @fuxishi/vitepress-theme
21
+ ```
22
+
23
+ 需要安装以下 peerDependencies / Install peerDependencies:
24
+
25
+ ```bash
26
+ npm install vitepress vue
27
+ ```
28
+
29
+ ## 使用 / Usage
30
+
31
+ ### 1. 注册主题 / Register Theme
32
+
33
+ 创建 `.vitepress/theme/index.ts`:
34
+
35
+ ```ts
36
+ import FxTheme from "@fuxishi/vitepress-theme"
37
+ import "@fuxishi/vitepress-theme/style.css"
38
+
39
+ export default FxTheme
40
+ ```
41
+
42
+ ### 2. 继承配置 / Extend Configuration
43
+
44
+ 创建 `.vitepress/config.mts`:
45
+
46
+ ```ts
47
+ import { defineConfigWithTheme } from "vitepress"
48
+ import fxConfig from "@fuxishi/vitepress-theme/config"
49
+ import type { FxThemeConfig } from "@fuxishi/vitepress-theme/config"
50
+
51
+ export default defineConfigWithTheme<FxThemeConfig>({
52
+ extends: fxConfig,
53
+ lang: "zh-CN",
54
+ title: "我的文档站",
55
+ themeConfig: {
56
+ nav: [{ text: "指南", link: "/guide/" }],
57
+ sidebar: {
58
+ "/guide/": [{ text: "快速开始", link: "/guide/" }],
59
+ },
60
+ // 启用音乐球 / Enable music ball
61
+ musicBall: {
62
+ enable: true,
63
+ autoplay: false,
64
+ loop: true,
65
+ src: "/music/my-song.mp3",
66
+ },
67
+ // 启用彩纸效果 / Enable confetti
68
+ confetti: true,
69
+ },
70
+ })
71
+ ```
72
+
73
+ ### 3. 启动开发服务器 / Start Dev Server
74
+
75
+ ```bash
76
+ npx vitepress dev
77
+ ```
78
+
79
+ ## 配置 / Configuration
80
+
81
+ ### FxThemeConfig
82
+
83
+ 继承自 VitePress `DefaultTheme.Config`，新增以下字段 / Extends VitePress `DefaultTheme.Config` with the following fields:
84
+
85
+ | 配置项 / Option | 类型 / Type | 默认值 / Default | 说明 / Description |
86
+ | --------------------- | ------------- | ---------------- | ---------------------------------------- |
87
+ | `musicBall.enable` | `boolean` | `true` | 是否启用音乐球 / Enable music ball |
88
+ | `musicBall.visible` | `boolean` | `true` | 是否可见 / Visibility |
89
+ | `musicBall.autoplay` | `boolean` | `false` | 自动播放 / Autoplay |
90
+ | `musicBall.loop` | `boolean` | `true` | 循环播放（单曲模式）/ Loop (single mode) |
91
+ | `musicBall.src` | `string` | `''` | 单首音乐地址 / Single music URL |
92
+ | `musicBall.list` | `MusicItem[]` | — | 多首音乐列表 / Multi-song playlist |
93
+ | `confetti` | `boolean` | `true` | 是否启用点击彩纸效果 / Enable confetti |
94
+
95
+ ## 导出 / Exports
96
+
97
+ | 导出路径 / Export Path | 说明 / Description |
98
+ | ------------------------------------- | ------------------------------------- |
99
+ | `@fuxishi/vitepress-theme` | 主题（Layout + 样式）/ Theme (Layout + Styles) |
100
+ | `@fuxishi/vitepress-theme/config` | VitePress 基础配置预设 / VitePress base config preset |
101
+ | `@fuxishi/vitepress-theme/style.css` | 独立样式文件 / Standalone style file |
102
+
103
+ ## 文档 / Documentation
104
+
105
+ 完整文档请访问 / Full documentation:
106
+
107
+ [https://fuxishi-vitepress-theme.fuxizjxzy.cn](https://fuxishi-vitepress-theme.fuxizjxzy.cn)
108
+
109
+ ## License
110
+
111
+ [MIT](./LICENSE)
112
+
113
+ > 后续将在 GitHub 开放源码 / Will be open-sourced on GitHub in the future.
package/dist/chunk/FxHomeFeatureBefore-DUbsbVTj.js ADDED
@@ -0,0 +1,38 @@
1
+ import { defineComponent as e, onBeforeUnmount as t, onMounted as n } from "vue";
2
+ //#region .vitepress/components/FxHomeFeatureBefore.ts
3
+ var r = e({ setup() {
4
+ let e = [
5
+ "#f00",
6
+ "#0f0",
7
+ "#f0f",
8
+ "#0ff",
9
+ "#FE7300",
10
+ "#008EFF",
11
+ "#8B5CF6",
12
+ "#10B981"
13
+ ];
14
+ function r(e) {
15
+ let t = e.target.closest(".VPFeature");
16
+ if (!t) return;
17
+ let n = t.getBoundingClientRect(), r = e.clientX - n.left, i = e.clientY - n.top;
18
+ t.style.setProperty("--x", r + "px"), t.style.setProperty("--y", i + "px");
19
+ }
20
+ function i() {
21
+ document.querySelectorAll(".VPHomeFeatures .VPFeature").forEach((t, n) => {
22
+ t.style.setProperty("--color", e[n % e.length]);
23
+ });
24
+ }
25
+ let a = new MutationObserver(i);
26
+ return n(() => {
27
+ document.addEventListener("mousemove", r);
28
+ let e = document.querySelector(".VPHomeFeatures");
29
+ e && a.observe(e, {
30
+ childList: !0,
31
+ subtree: !0
32
+ }), i();
33
+ }), t(() => {
34
+ document.removeEventListener("mousemove", r), a.disconnect();
35
+ }), () => null;
36
+ } });
37
+ //#endregion
38
+ export { r as default };
package/dist/index.js CHANGED
@@ -19,7 +19,7 @@ var s = t({ setup(t, { slots: s }) {
19
19
  pseudoElement: `::view-transition-${d.value ? "old" : "new"}(root)`
20
20
  });
21
21
  });
22
- let p = f.musicBall?.enable && (f.musicBall?.src || f.musicBall?.list?.length > 0), m = a(() => import("./chunk/FxMusicBall-B_F7Q9VQ.js"), [{ style: { display: f.musicBall && f.musicBall.visible ? "" : "none" } }]), h = a(() => import("./chunk/FxHomeFeatureBefore-C2KseNb3.js")), g = a(() => import("./chunk/FxConfetti-DIy1zU6g.js"));
22
+ let p = f.musicBall?.enable && (f.musicBall?.src || f.musicBall?.list?.length > 0), m = a(() => import("./chunk/FxMusicBall-B_F7Q9VQ.js"), [{ style: { display: f.musicBall && f.musicBall.visible ? "" : "none" } }]), h = a(() => import("./chunk/FxHomeFeatureBefore-DUbsbVTj.js")), g = a(() => import("./chunk/FxConfetti-DIy1zU6g.js"));
23
23
  return () => [
24
24
  n(l, null, {
25
25
  ...s,
package/package.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fuxishi/vitepress-theme",
3
3
  "displayName": "@fuxishi/vitepress-theme",
4
4
  "private": false,
5
- "version": "1.0.2",
5
+ "version": "1.0.4",
6
6
  "license": "MIT",
7
- "description": "A beautiful VitePress theme for fx-core documentation.",
7
+ "description": "一款精美的 VitePress 主题",
8
8
  "keywords": [
9
9
  "vitepress",
10
10
  "theme",
@@ -44,7 +44,8 @@
44
44
  "dev": "vite build --watch",
45
45
  "ncu": "ncu -u && npm install",
46
46
  "login": "npm login --registry=https://registry.npmjs.org/",
47
- "publish": "npm publish --access public --registry=https://registry.npmjs.org/"
47
+ "pub": "npm publish --access public --registry=https://registry.npmjs.org/",
48
+ "deprecate": "node -e \"const v=process.argv[1],m=process.argv[2]||'';require('child_process').execSync('npm deprecate @fuxishi/vitepress-theme@'+v+' \\\"'+m+'\\\" --registry=https://registry.npmjs.org/',{stdio:'inherit'})\""
48
49
  },
49
50
  "dependencies": {
50
51
  "canvas-confetti": "^1.9.4",
package/dist/chunk/FxHomeFeatureBefore-C2KseNb3.js DELETED
@@ -1,27 +0,0 @@
1
- import { defineComponent as e, onMounted as t } from "vue";
2
- //#region .vitepress/components/FxHomeFeatureBefore.ts
3
- var n = e({ setup() {
4
- return t(() => {
5
- let e = [
6
- "#f00",
7
- "#0f0",
8
- "#f0f",
9
- "#0ff",
10
- "#FE7300",
11
- "#008EFF",
12
- "red",
13
- "red",
14
- "red",
15
- "red",
16
- "red"
17
- ], t = document.querySelector(".VPHomeFeatures");
18
- document.querySelectorAll(".VPHomeFeatures .VPFeature").forEach((n, r) => {
19
- n.style.setProperty("--color", e[r]), n.addEventListener("mousemove", function(e) {
20
- let n = e.pageX - this.offsetLeft, r = e.pageY - (t?.offsetTop || 0) - this.offsetTop;
21
- this.style.setProperty("--x", n + "px"), this.style.setProperty("--y", r + "px");
22
- });
23
- });
24
- }), () => null;
25
- } });
26
- //#endregion
27
- export { n as default };