更新

Author: Soltus

plume/docs/.vuepress/client.components.ts

@@ -7,11 +7,9 @@ import { setup } from "@css-render/vue3-ssr";
 import { NaiveUI } from "./modules/NaiveUi";
 import TestNaiveUi from "./components/TestNaiveUi.vue";
 // TDesign
-import TestTDesign from "./components/TestTDesign.vue";
+import mTDesign from 'tdesign-mobile-vue';
 // 引入组件库的少量全局样式变量
-import "tdesign-vue-next/es/style/index.css";
 import "tdesign-mobile-vue/es/style/index.css";
-import { isMobileDevice } from "./utils/env";
 
 // 组件
 import BannerTopArchived from "./plugins/vuepress-plugin-sillot-block/banner/components/BannerTopArchived.vue";
@@ -42,7 +40,6 @@ export const components = {
   GithubLabel,
   C,
   TestNaiveUi,
-  TestTDesign,
   TestRelationGraph,
   SSRComponent,
   IndexMe,
@@ -81,16 +78,17 @@ function setupNaiveUI(app: App, isSSR: boolean) {
 /**
  * 初始化 TDesign
  * 调用侧同样使用 isMobileDevice 加载对应组件，刷新页面生效
+ * 还是有些问题无法解决，最终放弃混用
  */
-function setupTDesign(app: App, isSSR: boolean) {
-  const ComponentLib = isMobileDevice()
-    ? import("tdesign-mobile-vue")
-    : import("tdesign-vue-next");
+// function setupTDesign(app: App, isSSR: boolean) {
+//   const ComponentLib = isMobileDevice()
+//     ? import("tdesign-mobile-vue")
+//     : import("tdesign-vue-next");
 
-  ComponentLib.then((lib) => {
-    app.use(lib.default);
-  });
-}
+//   ComponentLib.then((lib) => {
+//     app.use(lib.default);
+//   });
+// }
 
 /**
  * 初始化所有组件库
@@ -103,8 +101,7 @@ export async function setupUI(context: EnhanceContext) {
   // 初始化 NaiveUI
   setupNaiveUI(app, isSSR);
   // 初始化 TDesign
-  setupTDesign(app, isSSR);
-  // app.use(TDesign);
+  app.use(mTDesign);
 
   // 注册全局组件，不在 md 中使用则不需注册
   registerGlobalComponents(context.app);

plume/docs/.vuepress/components/TestTDesign.vue

@@ -1,18 +1,19 @@
 <!-- 文章的默认布局 -->
 <script lang="ts" setup>
-import { computed, onMounted, watch } from "vue";
+import { computed, defineAsyncComponent, onMounted, watch } from "vue";
 import { Layout } from 'vuepress-theme-plume/client'
 import { isMobileDevice } from "../utils/env";
 import Backlink from "../plugins/BiGraph/client/components/Backlink.vue";
 import LocalGraph from "../plugins/BiGraph/client/components/LocalGraphView.vue";
 import GlobalGraph from "../plugins/BiGraph/client/components/GlobalGraphView.vue";
 import AuthorLink from "../plugins/vuepress-plugin-sillot-author/components/AuthorLink.vue";
-import SiteSettings from "../plugins/vuepress-plugin-sillot-site-settings/components/SiteSettings.vue";
 import mSiteSettings from "../plugins/vuepress-plugin-sillot-site-settings/components/mSiteSettings.vue";
+import NSiteSettings from "../plugins/vuepress-plugin-sillot-site-settings/components/NSiteSettings.vue";
 // https://theme-plume.vuejs.press/guide/api/client/#usedarkmode
 import { useDarkMode } from "vuepress-theme-plume/composables";
 // <n-config-provider :theme="isDark ? darkTheme : lightTheme"> 包裹 vuepress-theme-plume/client 的 <Layout>
 import { darkTheme, lightTheme } from 'naive-ui'
+import { useDeviceDetection } from "../plugins/vuepress-plugin-sillot-site-settings/composables/useDeviceDetection";
 const isDark = useDarkMode();
 const updateDarkMode = () => {
   if (isDark.value) {
@@ -23,6 +24,12 @@ const updateDarkMode = () => {
     document.documentElement.removeAttribute("theme-mode");
   }
 };
+const { isMobile, componentKey } = useDeviceDetection()
+
+const currentComponent = computed(() =>
+  isMobile.value ? mSiteSettings : NSiteSettings
+)
+
 watch(isDark, (newValue) => {
   updateDarkMode();
 });
@@ -41,22 +48,25 @@ const options = computed(() => {
 
 <template>
   <n-config-provider :theme="isDark ? darkTheme : lightTheme">
-  <global-graph v-if="options.enableGlobalGraph"></global-graph>
-  <Layout>
-    <template #doc-footer-before>
-      <backlink></backlink>
-    </template>
-    <template #nav-bar-content-after>
-      <mSiteSettings v-if="isMobileDevice()" />
-      <SiteSettings v-if="!isMobileDevice()" />
-    </template>
-    <template #aside-outline-before>
-      <local-graph v-if="options.enableLocalGraph"></local-graph>
-    </template>
-    <template #doc-meta-bottom>
-      <AuthorLink></AuthorLink>
-    </template>
-  </Layout>
+    <n-message-provider>
+      <global-graph v-if="options.enableGlobalGraph"></global-graph>
+      <Layout>
+        <template #doc-footer-before>
+          <backlink></backlink>
+        </template>
+        <template #nav-bar-content-after>
+          <ClientOnly>
+            <component :is="currentComponent" :key="componentKey" />
+          </ClientOnly>
+        </template>
+        <template #aside-outline-before>
+          <local-graph v-if="options.enableLocalGraph"></local-graph>
+        </template>
+        <template #doc-meta-bottom>
+          <AuthorLink></AuthorLink>
+        </template>
+      </Layout>
+    </n-message-provider>
   </n-config-provider>
 </template>