49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import DefaultTheme from "vitepress/theme";
|
||
import { watch } from "vue";
|
||
import { useData } from "vitepress";
|
||
import type { App } from "vue";
|
||
import TDesignMobile from "tdesign-mobile-vue";
|
||
import TimiWebUI, { VPopup } from "timi-web";
|
||
|
||
// 必须引完整样式：`tdesign-mobile-vue/es/style/index.css` 只含全局 token，
|
||
// 不含任何组件类，全量注册时会导致所有组件无样式渲染。
|
||
import "tdesign-mobile-vue/dist/tdesign.css";
|
||
import "./styles/index.less";
|
||
|
||
import DemoPreview from "./containers/DemoPreview.vue";
|
||
import ApiTable from "./components/ApiTable.vue";
|
||
|
||
/**
|
||
* 同步深色模式。
|
||
*
|
||
* VitePress 通过 `html.dark` 切换深色，而 TDesign 依赖 `html[theme-mode="dark"]`，
|
||
* 两者不是同一套机制，不同步会导致深色模式下 TDesign 组件仍是亮色。
|
||
*/
|
||
function syncThemeMode(dark: boolean) {
|
||
if (typeof document === "undefined") {
|
||
return;
|
||
}
|
||
document.documentElement.setAttribute("theme-mode", dark ? "dark" : "light");
|
||
}
|
||
|
||
export default {
|
||
extends: DefaultTheme,
|
||
|
||
enhanceApp({ app }: { app: App }) {
|
||
// 全量注册 TDesign Mobile，演示区内所有 t-* 组件直接可用。
|
||
app.use(TDesignMobile);
|
||
// 组件内部大量使用 timi-web 的 v-popup 指令，且用在组件模板里，
|
||
// 无法由演示局部注入，只能在主题里全局注册。
|
||
app.use(TimiWebUI);
|
||
app.directive("popup", VPopup);
|
||
|
||
app.component("demo-preview", DemoPreview);
|
||
app.component("api-table", ApiTable);
|
||
},
|
||
|
||
setup() {
|
||
const { isDark } = useData();
|
||
watch(isDark, syncThemeMode, { immediate: true });
|
||
}
|
||
};
|