fix: docs deploy cleanup and ssr guards

Author: HeJiaYue520

.github/workflows/docs-deploy-bt.yaml

@@ -142,7 +142,9 @@ jobs:
         run: |
           PORT="${DOCS_DEPLOY_PORT:-22}"
           TARGET_DIR="${{ steps.target_path.outputs.TARGET_DIR }}"
-          ssh -p "$PORT" "$DOCS_DEPLOY_USER@$DOCS_DEPLOY_HOST" "rm -rf '$TARGET_DIR' && mkdir -p '$TARGET_DIR'"
+          ssh -p "$PORT" "$DOCS_DEPLOY_USER@$DOCS_DEPLOY_HOST" "\
+            mkdir -p '$TARGET_DIR' && \
+            find '$TARGET_DIR' -mindepth 1 -maxdepth 1 ! -name '.user.ini' -exec rm -rf {} +"
 
       - name: Upload dist
         env:
@@ -152,7 +154,7 @@ jobs:
         run: |
           PORT="${DOCS_DEPLOY_PORT:-22}"
           TARGET_DIR="${{ steps.target_path.outputs.TARGET_DIR }}"
-          rsync -az --delete --timeout=120 --info=progress2 -e "ssh -p $PORT" apps/docs/.vitepress/dist/ "$DOCS_DEPLOY_USER@$DOCS_DEPLOY_HOST:$TARGET_DIR/"
+          rsync -az --delete --exclude='.user.ini' --timeout=120 --info=progress2 -e "ssh -p $PORT" apps/docs/.vitepress/dist/ "$DOCS_DEPLOY_USER@$DOCS_DEPLOY_HOST:$TARGET_DIR/"
 
       - name: Print remote dist summary
         env:

apps/docs/en/components/bubble/demos/with-markdown.vue

@@ -7,13 +7,19 @@ Supports formulas, code blocks, task lists, and streaming rendering.
 </docs>
 
 <script setup lang="ts">
-import { MarkdownRenderer } from 'x-markdown-vue';
-import 'x-markdown-vue/style';
 import 'katex/dist/katex.min.css';
 
 import 'shiki';
 import 'shiki-stream';
 
+const MarkdownRenderer = shallowRef();
+onMounted(async () => {
+  if (typeof window === 'undefined') return;
+  await import('x-markdown-vue/style');
+  const mod = await import('x-markdown-vue');
+  MarkdownRenderer.value = mod.MarkdownRenderer ?? mod.default ?? mod;
+});
+
 const avatar = 'https://avatars.githubusercontent.com/u/76239030?s=40&v=4';
 
 const staticContent = ref(`### Inline Formulas
@@ -117,7 +123,11 @@ onUnmounted(() => {
       <Bubble :avatar="avatar" placement="start">
         <template #content>
           <div class="markdown-content-wrapper">
-            <MarkdownRenderer :markdown="staticContent" />
+            <component
+              :is="MarkdownRenderer"
+              v-if="MarkdownRenderer"
+              :markdown="staticContent"
+            />
           </div>
         </template>
       </Bubble>
@@ -139,7 +149,9 @@ onUnmounted(() => {
       <Bubble :avatar="avatar" placement="start">
         <template #content>
           <div class="markdown-content-wrapper">
-            <MarkdownRenderer
+            <component
+              :is="MarkdownRenderer"
+              v-if="MarkdownRenderer"
               :markdown="streamingContent"
               :enable-animate="true"
             />

apps/docs/en/components/bubbleList/demos/with-markdown.vue

@@ -7,13 +7,19 @@ Supports formulas, code blocks, and task lists in list rendering.
 </docs>
 
 <script setup lang="ts">
-import { MarkdownRenderer } from 'x-markdown-vue';
-import 'x-markdown-vue/style';
 import 'katex/dist/katex.min.css';
 
 import 'shiki';
 import 'shiki-stream';
 
+const MarkdownRenderer = shallowRef();
+onMounted(async () => {
+  if (typeof window === 'undefined') return;
+  await import('x-markdown-vue/style');
+  const mod = await import('x-markdown-vue');
+  MarkdownRenderer.value = mod.MarkdownRenderer ?? mod.default ?? mod;
+});
+
 const list = ref([
   {
     key: '1',
@@ -82,7 +88,11 @@ console.log(greeting);
   <BubbleList :list="list" max-height="500px">
     <template #content="{ item }">
       <div class="markdown-content-wrapper">
-        <MarkdownRenderer :markdown="item.content" />
+        <component
+          :is="MarkdownRenderer"
+          v-if="MarkdownRenderer"
+          :markdown="item.content"
+        />
       </div>
     </template>
   </BubbleList>

apps/docs/en/home/components/Contributors.vue

@@ -14,9 +14,8 @@ const repo = 'Element-Plus-X';
 
 const targetElement = ref();
 
-const contributors: RepoContributor[] = _repo_contributors[
-  repo as keyof typeof _repo_contributors
-] as RepoContributor[];
+const contributors: RepoContributor[] =
+  (_repo_contributors as Record<string, RepoContributor[]>)[repo] ?? [];
 // const loading = ref(false);
 // const error = ref('');
 

apps/docs/en/home/components/FeaturesSection/index.vue

@@ -1,6 +1,5 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { gsap } from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { defineClientComponent } from 'vitepress';
 import { markRaw, nextTick, onMounted, onUnmounted, ref } from 'vue';
 import {
@@ -16,10 +15,9 @@ import {
 } from './starfield-manager';
 import { TechCircleManager } from './tech-circle-manager';
 
-// 注册GSAP插件
-gsap.registerPlugin(ScrollTrigger);
-
 // DOM引用
+let ScrollTrigger: any;
+
 const cardWrapRef = ref<HTMLElement | null>(null);
 const canvases = ref<(HTMLCanvasElement | null)[]>([]);
 const backgroundContainerRef = ref<HTMLElement | null>(null);
@@ -242,7 +240,13 @@ function initBackgroundCircles() {
 }
 
 // 生命周期
-onMounted(() => {
+onMounted(async () => {
+  if (typeof window === 'undefined') return;
+  if (!ScrollTrigger) {
+    const mod = await import('gsap/ScrollTrigger');
+    ScrollTrigger = mod.default ?? mod.ScrollTrigger;
+  }
+  if (ScrollTrigger) gsap.registerPlugin(ScrollTrigger);
   initBackgroundCircles();
   setTimeout(() => {
     initCardAnimations();

apps/docs/en/home/components/FeaturesSection/starfield-manager.ts

@@ -64,7 +64,8 @@ export class StarfieldManager {
 
     const resizeCanvas = () => {
       const { width, height } = innerWrap.getBoundingClientRect();
-      const dpr = window.devicePixelRatio || 1;
+      const dpr =
+        typeof window === 'undefined' ? 1 : window.devicePixelRatio || 1;
       this.canvas.width = width * dpr;
       this.canvas.height = height * dpr;
       this.canvas.style.width = `${width}px`;

apps/docs/en/home/components/HeroSection.vue

@@ -1,11 +1,9 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { gsap } from 'gsap';
-import ScrollTrigger from 'gsap/ScrollTrigger';
-import { SplitText } from 'gsap/SplitText';
 import { ref } from 'vue';
 
-gsap.registerPlugin(SplitText);
-gsap.registerPlugin(ScrollTrigger);
+let SplitText: any;
+let ScrollTrigger: any;
 
 // 复制状态和安装命令
 const copied = ref(false);
@@ -21,6 +19,17 @@ const previewText = 'Preview';
 const githubText = 'GitHub';
 
 onMounted(async () => {
+  if (typeof window === 'undefined') return;
+  if (!SplitText) {
+    const mod = await import('gsap/SplitText');
+    SplitText = mod.SplitText;
+  }
+  if (!ScrollTrigger) {
+    const mod = await import('gsap/ScrollTrigger');
+    ScrollTrigger = mod.default ?? mod.ScrollTrigger;
+  }
+  if (SplitText) gsap.registerPlugin(SplitText);
+  if (ScrollTrigger) gsap.registerPlugin(ScrollTrigger);
   await document.fonts?.ready;
   textAnimation();
   scrollTriggerAnimation();

apps/docs/en/home/components/ProductDisplayArea.vue

@@ -1,27 +1,26 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
 
 const columnCount = 4;
 const columnVerticalOffset = 60;
 
 const responsive = reactive({ isMobile: false });
 
 function checkScreenSize() {
+  if (typeof window === 'undefined') return;
   responsive.isMobile = window.innerWidth < 1000;
 }
 
 onMounted(() => {
   checkScreenSize();
+  if (typeof window === 'undefined') return;
   window.addEventListener('resize', checkScreenSize);
-
-  return () => {
-    window.removeEventListener('resize', checkScreenSize);
-  };
 });
 
-// onUnmounted(() => {
-//   window.removeEventListener('resize', checkScreenSize);
-// });
+onUnmounted(() => {
+  if (typeof window === 'undefined') return;
+  window.removeEventListener('resize', checkScreenSize);
+});
 
 // 为每张张张图片设置独特的阴影参数
 const chatImgs = ref([

apps/docs/en/home/components/ReviewsSection.vue

@@ -1,21 +1,35 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 import { reviews, shuffleReviews } from './reviews';
 
 const WaterfallItem = ref();
 
 async function calcSpan() {
-  for (const el of WaterfallItem.value) {
+  const items = WaterfallItem.value;
+  if (!items) return;
+  const list = Array.isArray(items) ? items : [items];
+
+  for (const el of list) {
     await nextTick();
     const rows = Math.floor(el.clientHeight / 2) + 18;
     el.style.gridRowEnd = `span ${rows}`;
   }
 }
+
+function handleResize() {
+  void calcSpan();
+}
+
 onMounted(async () => {
   await calcSpan();
+  if (typeof window === 'undefined') return;
+  window.addEventListener('resize', handleResize);
 });
 
-window.addEventListener('resize', calcSpan);
+onUnmounted(() => {
+  if (typeof window === 'undefined') return;
+  window.removeEventListener('resize', handleResize);
+});
 </script>
 
 <template>

apps/docs/en/home/components/SupportSection.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { Plus } from '@element-plus/icons-vue';
 import { gsap } from 'gsap';
-import ScrollTrigger from 'gsap/ScrollTrigger';
 import { onMounted, ref } from 'vue';
 import { sponsors } from './reviews';
 
-gsap.registerPlugin(ScrollTrigger);
-
+let ScrollTrigger: any;
 const toBeSponsorUrl = ref<string>('https://chat.element-plus-x.com/chat');
 
 function toBeSponsor() {
@@ -15,7 +13,13 @@ function toBeSponsor() {
   window.open(toBeSponsorUrl.value, '_blank');
 }
 
-onMounted(() => {
+onMounted(async () => {
+  if (typeof window === 'undefined') return;
+  if (!ScrollTrigger) {
+    const mod = await import('gsap/ScrollTrigger');
+    ScrollTrigger = mod.default ?? mod.ScrollTrigger;
+  }
+  if (ScrollTrigger) gsap.registerPlugin(ScrollTrigger);
   scrollTriggerAnimation();
 });