Skip to content

Commit d66aa89

Browse files
committed
更新
1 parent e45ad64 commit d66aa89

File tree

6 files changed

+286
-252
lines changed

6 files changed

+286
-252
lines changed

plume/docs/.vuepress/config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@ export default defineUserConfig({
133133
*/
134134
markdown: {
135135
include: {}, // 启用引入其他 markdown 文件内容
136+
collapse: true, // 启用折叠面板
136137
codeTree: true, // 启用代码目录树
137138
abbr: true, // 启用 abbr 语法 *[label]: content
138139
annotation: true, // 启用 annotation 语法 [+label]: content

plume/docs/.vuepress/plume.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default defineThemeConfig({
2323
appearance: true, // 配置 深色模式
2424

2525
social: [
26-
{ icon: 'github', link: 'https://github.com/Soltus' },
26+
{ icon: 'github', link: 'https://github.com/Hi-Sillot' },
2727
{ icon: 'bilibili', link: 'https://space.bilibili.com/36046609' },
2828
{
2929
icon: { svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M192 32c0 17.7 14.3 32 32 32c123.7 0 224 100.3 224 224c0 17.7 14.3 32 32 32s32-14.3 32-32C512 128.9 383.1 0 224 0c-17.7 0-32 14.3-32 32zm0 96c0 17.7 14.3 32 32 32c70.7 0 128 57.3 128 128c0 17.7 14.3 32 32 32s32-14.3 32-32c0-106-86-192-192-192c-17.7 0-32 14.3-32 32zM96 144c0-26.5-21.5-48-48-48S0 117.5 0 144V368c0 79.5 64.5 144 144 144s144-64.5 144-144s-64.5-144-144-144H128v96h16c26.5 0 48 21.5 48 48s-21.5 48-48 48s-48-21.5-48-48V144z"></path></svg>', name: 'ld246' },
Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
2+
::::: tabs
3+
4+
@tab Web
5+
6+
汐洛已经放弃 React 生态,转向使用 Vue 生态。之前使用 React 生态的 [JoyUI](https://mui.com/joy-ui/getting-started/)
7+
为了兼容汐洛生态,选择进一步缩窄为支持 SSR 的组件库。最后,综合美观等方面考虑,汐洛选择 Naive UI + TDesign + Quasar([SSR注意](https://www.quasar-cn.cn/start/pick-quasar-flavour)),他们的分工有所不同。由于 Quasar 的接入较为复杂,汐洛 vuepress 站点并未使用,而是计划用于浏览器插件、汐洛绞架插件、汐洛KMP。
8+
9+
Naive UI 的二维码、跑马灯组件存在问题(跑马灯移动端正常)。`tdesign-vue-next``tdesign-mobile-vue` 公用在SSR场景下无法完美解决,要么动态引入会有水合问题,要么同时引用会有冲突,按需引用太麻烦没试过,因此汐洛只使用表现更好的 `tdesign-mobile-vue` 而不使用 `tdesign-vue-next`
10+
11+
:::: collapse
12+
- Naive UI + TDesign 统一切换深色模式
13+
14+
::: code-tree title="同步深色模式" height="580px" entry=".vuepress/layouts/Layout.vue"
15+
16+
```vue title=".vuepress/layouts/Layout.vue"
17+
<script lang="ts" setup>
18+
import { computed, onMounted, watch } from "vue";
19+
import { Layout } from 'vuepress-theme-plume/client'
20+
// https://theme-plume.vuejs.press/guide/api/client/#usedarkmode
21+
import { useDarkMode } from "vuepress-theme-plume/composables";
22+
// <n-config-provider :theme="isDark ? darkTheme : lightTheme"> 包裹 vuepress-theme-plume/client 的 <Layout>
23+
import { darkTheme, lightTheme } from 'naive-ui'
24+
const isDark = useDarkMode();
25+
const updateDarkMode = () => {
26+
if (isDark.value) {
27+
// 设置TDesign深色模式
28+
document.documentElement.setAttribute("theme-mode", "dark");
29+
} else {
30+
// 重置TDesign为浅色模式
31+
document.documentElement.removeAttribute("theme-mode");
32+
}
33+
};
34+
watch(isDark, (newValue) => {
35+
updateDarkMode();
36+
});
37+
onMounted(() => {
38+
updateDarkMode();
39+
});
40+
</script>
41+
42+
<template>
43+
<n-config-provider :theme="isDark ? darkTheme : lightTheme">
44+
<Layout>
45+
</Layout>
46+
</n-config-provider>
47+
</template>
48+
```
49+
50+
```ts title=".vuepress/client.ts"
51+
import Layout from "./layouts/Layout.vue"; // [!code warning]
52+
export default defineClientConfig({
53+
setup() {
54+
},
55+
layouts: {
56+
Layout, // [!code warning] 默认布局
57+
},
58+
});
59+
```
60+
61+
:::
62+
63+
::::
64+
65+
@tab Kotlin/JVM
66+
67+
Jetpack-Compose -> Compose-Multiplatform
68+
69+
[MIUIX](https://github.com/compose-miuix-ui/miuix) 是主要使用的第三方UI库。
70+
71+
@tab C\#/.NET
72+
73+
汐洛已经放弃 .NET 生态,但保留在必要时候使用。
74+
75+
:::::

plume/docs/col_blog/HWD/Sillot/汐洛生态.md

Lines changed: 57 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -3,76 +3,60 @@ title: 汐洛生态
33
createTime: 2025/11/17 19:22:30
44
permalink: /blog/sc6gbqz1/
55
---
6-
## UI组件库
7-
8-
:::: tabs
9-
10-
@tab Web
11-
12-
汐洛已经放弃 React 生态,转向使用 Vue 生态。之前使用 React 生态的 [JoyUI](https://mui.com/joy-ui/getting-started/)
13-
为了兼容汐洛生态,选择进一步缩窄为支持 SSR 的组件库。最后,综合美观等方面考虑,汐洛选择 Naive UI + TDesign + Quasar([SSR注意](https://www.quasar-cn.cn/start/pick-quasar-flavour)),他们的分工有所不同。由于 Quasar 的接入较为复杂,汐洛 vuepress 站点并未使用,而是计划用于浏览器插件、汐洛绞架插件、汐洛KMP。
14-
15-
Naive UI 的二维码、跑马灯组件存在问题(跑马灯移动端正常)。`tdesign-vue-next``tdesign-mobile-vue` 公用在SSR场景下无法完美解决,要么动态引入会有水合问题,要么同时引用会有冲突,按需引用太麻烦没试过,因此汐洛只使用表现更好的 `tdesign-mobile-vue` 而不使用 `tdesign-vue-next`
16-
17-
Naive UI + TDesign 统一切换深色模式:
18-
19-
::: code-tree title="同步深色模式" height="580px" entry=".vuepress/layouts/Layout.vue"
20-
21-
```vue
22-
<script lang="ts" setup>
23-
import { computed, onMounted, watch } from "vue";
24-
import { Layout } from 'vuepress-theme-plume/client'
25-
// https://theme-plume.vuejs.press/guide/api/client/#usedarkmode
26-
import { useDarkMode } from "vuepress-theme-plume/composables";
27-
// <n-config-provider :theme="isDark ? darkTheme : lightTheme"> 包裹 vuepress-theme-plume/client 的 <Layout>
28-
import { darkTheme, lightTheme } from 'naive-ui'
29-
const isDark = useDarkMode();
30-
const updateDarkMode = () => {
31-
if (isDark.value) {
32-
// 设置TDesign深色模式
33-
document.documentElement.setAttribute("theme-mode", "dark");
34-
} else {
35-
// 重置TDesign为浅色模式
36-
document.documentElement.removeAttribute("theme-mode");
37-
}
38-
};
39-
watch(isDark, (newValue) => {
40-
updateDarkMode();
41-
});
42-
onMounted(() => {
43-
updateDarkMode();
44-
});
45-
</script>
46-
47-
<template>
48-
<n-config-provider :theme="isDark ? darkTheme : lightTheme">
49-
<Layout>
50-
</Layout>
51-
</n-config-provider>
52-
</template>
53-
```
54-
55-
```ts
56-
import Layout from "./layouts/Layout.vue"; // [!code warning]
57-
export default defineClientConfig({
58-
setup() {
59-
},
60-
layouts: {
61-
Layout, // [!code warning] 默认布局
62-
},
63-
});
64-
```
65-
66-
:::
67-
68-
@tab Kotlin/JVM
69-
70-
Jetpack-Compose -> Compose-Multiplatform
71-
72-
[MIUIX](https://github.com/compose-miuix-ui/miuix) 是主要使用的第三方UI库。
73-
74-
@tab C\#/.NET
75-
76-
汐洛已经放弃 .NET 生态,但保留在必要时候使用。
77-
78-
::::
6+
7+
## 应用
8+
9+
### 本地优先内容生产工具
10+
11+
#### 思源笔记
12+
13+
思源笔记是一款本地优先的笔记应用,支持跨平台、跨设备同步,支持 Markdown 语法,支持丰富的主题和插件,通过了**海文东全感知开源认证**。汐洛绞架基于思源笔记二次开发。
14+
15+
#### Obsidian
16+
17+
Obsidian 是一款闭源的跨平台笔记应用,支持 Markdown 语法,支持丰富的主题和插件,支持导入和导出笔记。汐洛开发 Obsidian 插件提供服务。
18+
19+
#### VSCode
20+
21+
汐洛开发 VSCode 插件提供服务。
22+
23+
#### Everything
24+
25+
汐洛调用 Everything 提供服务。
26+
27+
#### Quicker
28+
29+
汐洛开发 Quicker 脚本提供服务。
30+
31+
#### Vuepress
32+
33+
汐洛开发 Vuepress 插件提供服务。
34+
35+
#### Jupyter Lab
36+
37+
汐洛开发 Jupyter Lab 提供服务。
38+
39+
#### OpenList
40+
41+
汐洛基于 OpenList 二次开发。
42+
43+
#### FFmpeg
44+
45+
汐洛调用 FFmpeg 提供服务。
46+
47+
## 基座
48+
49+
### UI组件库
50+
51+
<!-- @include: ./汐洛生态-基座-UI组件库.snippet.md -->
52+
53+
54+
### VUE 工具库
55+
56+
#### Pinia
57+
58+
Pinia 是 Vue 状态管理库,它可以帮助我们管理状态,并在组件之间共享状态。
59+
60+
#### VueUse
61+
62+
VueUse 是一个包含了许多有用的函数式响应式工具的库。

plume/package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,14 @@
2727
"@vueuse/core": "^14.0.0",
2828
"date-fns": "^4.1.0",
2929
"http-server": "^14.1.1",
30-
"naive-ui": "^2.43.1",
30+
"naive-ui": "^2.43.2",
3131
"pinia": "^3.0.3",
3232
"tdesign-mobile-vue": "^1.11.0",
3333
"typescript": "^5.9.3",
3434
"vfonts": "^0.0.3",
3535
"vue": "^3.5.22",
3636
"vuepress": "2.0.0-rc.26",
37-
"vuepress-theme-plume": "1.0.0-rc.176"
37+
"vuepress-theme-plume": "1.0.0-rc.178"
3838
},
3939
"dependencies": {
4040
"artplayer": "^5.2.3",
@@ -43,7 +43,6 @@
4343
"echarts": "^6.0.0",
4444
"flowchart.ts": "^3.0.1",
4545
"grapheme-splitter": "^1.0.4",
46-
"localforage": "^1.10.0",
4746
"mermaid": "^11.7.0",
4847
"pinia-plugin-persistedstate": "^4.7.1",
4948
"pyodide": "^0.29.0",

0 commit comments

Comments
 (0)