feat: 使首页的教程placehold支持中文，同时使markdown编辑器同app主题变化

src/components/TutorialCarousel.vue

@@ -4,7 +4,8 @@
     @wheel.prevent="handleWheel"
     @mouseenter="pauseAutoRotation"
     @mouseleave="resumeAutoRotation"
-  >    <!-- 例程卡片堆叠 -->
+  >
+    <!-- 例程卡片堆叠 -->
     <div class="card-stack relative mx-auto">
       <div
         v-for="(tutorial, index) in tutorials"
@@ -16,26 +17,39 @@
       >
         <!-- 卡片内容 -->
         <div class="relative">
-          <!-- 图片 -->          <img 
+          <!-- 图片 -->
-            :src="tutorial.thumbnail || `https://placehold.co/600x400?text=${tutorial.title}`" 
+          <img
+            :src="
+              tutorial.thumbnail ||
+              `https://kaifage.com/api/placeholder/600/400?text=${tutorial.title}&color=000000&bgColor=ffffff&fontSize=72`
+            "
             class="w-full object-contain"
             :alt="tutorial.title"
-            style="width: 600px; height: 400px;"
+            style="width: 600px; height: 400px"
           />
 
           <!-- 卡片蒙层 -->
           <div
             class="absolute inset-0 bg-primary opacity-20 transition-opacity duration-300"
-            :class="{'opacity-10': index === currentIndex}"
+            :class="{ 'opacity-10': index === currentIndex }"
           ></div>
 
           <!-- 标题覆盖层 -->
-          <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-base-300 to-transparent">
+          <div
+            class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-base-300 to-transparent"
+          >
             <div class="flex flex-col gap-2">
-              <h3 class="text-lg font-bold text-base-content">{{ tutorial.title }}</h3>
+              <h3 class="text-lg font-bold text-base-content">
-              <p class="text-sm opacity-80 truncate">{{ tutorial.description }}</p>
+                {{ tutorial.title }}
+              </h3>
+              <p class="text-sm opacity-80 truncate">
+                {{ tutorial.description }}
+              </p>
               <!-- 标签显示 -->
-              <div v-if="tutorial.tags && tutorial.tags.length > 0" class="flex flex-wrap gap-1">
+              <div
+                v-if="tutorial.tags && tutorial.tags.length > 0"
+                class="flex flex-wrap gap-1"
+              >
                 <span
                   v-for="tag in tutorial.tags.slice(0, 3)"
                   :key="tag"
@@ -64,10 +78,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted } from "vue";
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router";
-import { AuthManager } from '@/utils/AuthManager';
+import { AuthManager } from "@/utils/AuthManager";
-import type { ExamSummary } from '@/APIClient';
+import type { ExamInfo } from "@/APIClient";
 
 // 接口定义
 interface Tutorial {
@@ -104,21 +118,21 @@ const handleCardClick = (index: number, tutorialId: string) => {
 // 从数据库加载实验数据
 onMounted(async () => {
   try {
-    console.log('正在从数据库加载实验数据...');
+    console.log("正在从数据库加载实验数据...");
 
     // 创建认证客户端
     const client = AuthManager.createAuthenticatedExamClient();
 
     // 获取实验列表
-    const examList: ExamSummary[] = await client.getExamList();
+    const examList: ExamInfo[] = await client.getExamList();
 
     // 筛选可见的实验并转换为Tutorial格式
     const visibleExams = examList
-      .filter(exam => exam.isVisibleToUsers)
+      .filter((exam) => exam.isVisibleToUsers)
       .slice(0, 6); // 限制轮播显示最多6个实验
 
     if (visibleExams.length === 0) {
-      console.warn('没有找到可见的实验');
+      console.warn("没有找到可见的实验");
       return;
     }
 
@@ -129,11 +143,17 @@ onMounted(async () => {
       try {
         // 获取实验的封面资源（模板资源）
         const resourceClient = AuthManager.createAuthenticatedResourceClient();
-        const resourceList = await resourceClient.getResourceList(exam.id, 'cover', 'template');
+        const resourceList = await resourceClient.getResourceList(
+          exam.id,
+          "cover",
+          "template",
+        );
         if (resourceList && resourceList.length > 0) {
           // 使用第一个封面资源
           const coverResource = resourceList[0];
-          const fileResponse = await resourceClient.getResourceById(coverResource.id);
+          const fileResponse = await resourceClient.getResourceById(
+            coverResource.id,
+          );
           // 创建Blob URL作为缩略图
           thumbnail = URL.createObjectURL(fileResponse.data);
         }
@@ -144,29 +164,31 @@ onMounted(async () => {
       return {
         id: exam.id,
         title: exam.name,
-        description: '点击查看实验详情',
+        description: "点击查看实验详情",
         thumbnail,
-        tags: exam.tags || []
+        tags: exam.tags || [],
       };
     });
 
     tutorials.value = await Promise.all(tutorialPromises);
 
-    console.log('成功加载实验数据:', tutorials.value.length, '个实验');
+    console.log("成功加载实验数据:", tutorials.value.length, "个实验");
 
     // 启动自动旋转
     startAutoRotation();
   } catch (error) {
-    console.error('加载实验数据失败:', error);
+    console.error("加载实验数据失败:", error);
 
     // 如果加载失败，显示默认的占位内容
-    tutorials.value = [{
+    tutorials.value = [
-      id: 'placeholder',
+      {
-      title: '实验数据加载中...',
+        id: "placeholder",
-      description: '请稍后或刷新页面重试',
+        title: "实验数据加载中...",
+        description: "请稍后或刷新页面重试",
         thumbnail: undefined,
-      tags: []
+        tags: [],
-    }];
+      },
+    ];
   }
 });
 
@@ -177,8 +199,8 @@ onUnmounted(() => {
   }
 
   // 清理创建的Blob URLs
-  tutorials.value.forEach(tutorial => {
+  tutorials.value.forEach((tutorial) => {
-    if (tutorial.thumbnail && tutorial.thumbnail.startsWith('blob:')) {
+    if (tutorial.thumbnail && tutorial.thumbnail.startsWith("blob:")) {
       URL.revokeObjectURL(tutorial.thumbnail);
     }
   });
@@ -200,7 +222,8 @@ const nextCard = () => {
 
 // 上一张卡片
 const prevCard = () => {
-  currentIndex.value = (currentIndex.value - 1 + tutorials.value.length) % tutorials.value.length;
+  currentIndex.value =
+    (currentIndex.value - 1 + tutorials.value.length) % tutorials.value.length;
 };
 
 // 设置活动卡片
@@ -234,36 +257,44 @@ const resumeAutoRotation = () => {
 const goToExam = (examId: string) => {
   // 跳转到实验列表页面并传递examId参数，页面将自动打开对应的实验详情模态框
   router.push({
-    path: '/exam',
+    path: "/exam",
-    query: { examId: examId }
+    query: { examId: examId },
   });
 };
 
 // 计算卡片类和样式
 const getCardClass = (index: number) => {
   const isActive = index === currentIndex.value;
-  const isPrev = (index === currentIndex.value - 1) || (currentIndex.value === 0 && index === tutorials.value.length - 1);
+  const isPrev =
-  const isNext = (index === currentIndex.value + 1) || (currentIndex.value === tutorials.value.length - 1 && index === 0);
+    index === currentIndex.value - 1 ||
+    (currentIndex.value === 0 && index === tutorials.value.length - 1);
+  const isNext =
+    index === currentIndex.value + 1 ||
+    (currentIndex.value === tutorials.value.length - 1 && index === 0);
 
   return {
-    'z-30': isActive,
+    "z-30": isActive,
-    'z-20': isPrev || isNext,
+    "z-20": isPrev || isNext,
-    'z-10': !isActive && !isPrev && !isNext,
+    "z-10": !isActive && !isPrev && !isNext,
-    'hover:scale-105': isActive,
+    "hover:scale-105": isActive,
-    'cursor-pointer': true
+    "cursor-pointer": true,
   };
 };
 
 const getCardStyle = (index: number) => {
   const isActive = index === currentIndex.value;
-  const isPrev = (index === currentIndex.value - 1) || (currentIndex.value === 0 && index === tutorials.value.length - 1);
+  const isPrev =
-  const isNext = (index === currentIndex.value + 1) || (currentIndex.value === tutorials.value.length - 1 && index === 0);
+    index === currentIndex.value - 1 ||
+    (currentIndex.value === 0 && index === tutorials.value.length - 1);
+  const isNext =
+    index === currentIndex.value + 1 ||
+    (currentIndex.value === tutorials.value.length - 1 && index === 0);
 
   // 基本样式
   let style = {
-    transform: 'scale(1) translateY(0) rotate(0deg)',
+    transform: "scale(1) translateY(0) rotate(0deg)",
-    opacity: '1',
+    opacity: "1",
-    filter: 'blur(0)'
+    filter: "blur(0)",
   };
 
   // 活动卡片
@@ -273,26 +304,26 @@ const getCardStyle = (index: number) => {
 
   // 上一张卡片
   if (isPrev) {
-    style.transform = 'scale(0.85) translateY(-10%) rotate(-5deg)';
+    style.transform = "scale(0.85) translateY(-10%) rotate(-5deg)";
-    style.opacity = '0.7';
+    style.opacity = "0.7";
-    style.filter = 'blur(1px)';
+    style.filter = "blur(1px)";
     return style;
   }
 
   // 下一张卡片
   if (isNext) {
-    style.transform = 'scale(0.85) translateY(10%) rotate(5deg)';
+    style.transform = "scale(0.85) translateY(10%) rotate(5deg)";
-    style.opacity = '0.7';
+    style.opacity = "0.7";
-    style.filter = 'blur(1px)';
+    style.filter = "blur(1px)";
     return style;
   }
 
   // 其他卡片
-  style.transform = 'scale(0.7) translateY(0) rotate(0deg)';
+  style.transform = "scale(0.7) translateY(0) rotate(0deg)";
-  style.opacity = '0.4';
+  style.opacity = "0.4";
-  style.filter = 'blur(2px)';
+  style.filter = "blur(2px)";
   return style;
-}
+};
 </script>
 
 <style scoped>

src/stores/equipments.ts

@@ -129,7 +129,7 @@ export const useEquipments = defineStore("equipments", () => {
   async function jtagUploadBitstream(
     bitstream: File,
     examId?: string,
-  ): Promise<number | null> {
+  ): Promise<string | null> {
     try {
       // 自动开启电源
       await powerSetOnOff(true);
@@ -155,7 +155,7 @@ export const useEquipments = defineStore("equipments", () => {
     }
   }
 
-  async function jtagDownloadBitstream(bitstreamId?: number): Promise<string> {
+  async function jtagDownloadBitstream(bitstreamId?: string): Promise<string> {
     if (bitstreamId === null || bitstreamId === undefined) {
       dialog.error("请先选择要下载的比特流");
       return "";

src/stores/theme.ts

@@ -1,67 +1,73 @@
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch } from "vue";
-import { defineStore } from 'pinia'
+import { defineStore } from "pinia";
 
 // 本地存储主题的键名
-const THEME_STORAGE_KEY = 'fpga-weblab-theme'
+const THEME_STORAGE_KEY = "fpga-weblab-theme";
 
-export const useThemeStore = defineStore('theme', () => {
+export const useThemeStore = defineStore("theme", () => {
-  const allTheme = ["winter", "night"]
+  const allTheme = ["winter", "night"];
   const darkTheme = "night";
   const lightTheme = "winter";
 
   // 尝试从本地存储中获取保存的主题
   const getSavedTheme = (): string | null => {
-    return localStorage.getItem(THEME_STORAGE_KEY)
+    return localStorage.getItem(THEME_STORAGE_KEY);
-  }
+  };
 
   // 检测系统主题偏好
   const getPreferredTheme = (): string => {
-    const savedTheme = getSavedTheme()
+    const savedTheme = getSavedTheme();
     // 如果有保存的主题设置，优先使用
     if (savedTheme && allTheme.includes(savedTheme)) {
-      return savedTheme
+      return savedTheme;
     }
     // 否则检测系统主题模式
-    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches 
+    return window.matchMedia &&
-      ? darkTheme : lightTheme
+      window.matchMedia("(prefers-color-scheme: dark)").matches
-  }
+      ? darkTheme
+      : lightTheme;
+  };
 
   // 初始化主题为首选主题
-  const currentTheme = ref(getPreferredTheme())
+  const currentTheme = ref(getPreferredTheme());
+  const currentMode = computed(() =>
+    currentTheme.value === darkTheme ? "dark" : "light",
+  );
 
   // 保存主题到本地存储
   const saveTheme = (theme: string) => {
-    localStorage.setItem(THEME_STORAGE_KEY, theme)
+    localStorage.setItem(THEME_STORAGE_KEY, theme);
-  }
+  };
 
   // 当主题变化时，保存到本地存储
   watch(currentTheme, (newTheme) => {
-    saveTheme(newTheme)
+    saveTheme(newTheme);
-  })
+  });
 
   // 添加系统主题变化的监听
   const setupThemeListener = () => {
     if (window.matchMedia) {
-      const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)')
+      const colorSchemeQuery = window.matchMedia(
+        "(prefers-color-scheme: dark)",
+      );
       const handler = (e: MediaQueryListEvent) => {
         // 只有当用户没有手动设置过主题时，才跟随系统变化
         if (!getSavedTheme()) {
-          currentTheme.value = e.matches ? darkTheme : lightTheme
+          currentTheme.value = e.matches ? darkTheme : lightTheme;
-        }
         }
+      };
 
       // 添加主题变化监听器
-      colorSchemeQuery.addEventListener('change', handler)
+      colorSchemeQuery.addEventListener("change", handler);
-    }
     }
+  };
   function setTheme(theme: string) {
-    const isContained: boolean = allTheme.includes(theme)
+    const isContained: boolean = allTheme.includes(theme);
     if (isContained) {
-      currentTheme.value = theme
+      currentTheme.value = theme;
-      saveTheme(theme) // 保存主题到本地存储
+      saveTheme(theme); // 保存主题到本地存储
-    }
+    } else {
-    else {
+      console.error(`Not have such theme: ${theme}`);
-      console.error(`Not have such theme: ${theme}`)
     }
   }
 
@@ -77,26 +83,26 @@ export const useThemeStore = defineStore('theme', () => {
   }
 
   function isDarkTheme(): boolean {
-    return currentTheme.value == darkTheme
+    return currentTheme.value == darkTheme;
   }
 
   function isLightTheme(): boolean {
-    return currentTheme.value == lightTheme
+    return currentTheme.value == lightTheme;
   }
 
   // 初始化时设置系统主题变化监听器
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
-    setupThemeListener()
+    setupThemeListener();
   }
 
   return {
     allTheme,
     currentTheme,
+    currentMode,
     setTheme,
     toggleTheme,
     isDarkTheme,
     isLightTheme,
-    setupThemeListener
+    setupThemeListener,
-  }
+  };
-})
+});
-