@@ -3,76 +3,60 @@ title: 汐洛生态
33createTime : 2025/11/17 19:22:30
44permalink : /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 是一个包含了许多有用的函数式响应式工具的库。
0 commit comments