Merge branch 'master' of http://dev.sohomall.jp:3000/lizhuang/hanye-website

assets/css/styles.css

@@ -94,26 +94,14 @@ html[lang="ja"] body {
   font-family: 'M PLUS 1p', sans-serif !important;
 }
 
-/* Markdown 内容样式 */
-.prose {
-  color: rgba(255, 255, 255, 0.6);
-  line-height: 1.625;
 
-  blockquote {
-    border-left-color: var(--color-primary);
-
-    p {
-      margin: 0;
-    }
-  }
-}
 
 .prose h1 {
   font-size: 1.5rem;
   font-weight: 700;
   color: white;
   margin-bottom: 1.5rem;
-  margin-top: 2rem;
+  margin-top: 1rem;
 }
 
 .prose h2 {
@@ -327,4 +315,9 @@ html[lang="ja"] body {
 .route-loader-enter-from,
 .route-loader-leave-to {
   opacity: 0;
-}
+}
+
+
+
+
+

composables/useTableHighlight.ts

@@ -0,0 +1,261 @@
+/**
+ * 表格高亮 Composable
+ * 用于在 ContentRenderer 渲染的表格中高亮当前产品型号对应的列
+ */
+export function useTableHighlight() {
+  /**
+   * 高亮包含指定文本的表格列
+   * @param highlightText 要高亮的文本内容
+   * @param containerSelector 容器选择器，默认为 '.prose'
+   * @param highlightClass 高亮CSS类名，默认为 'highlighted-model-column'
+   */
+  function highlightTableColumns(
+    highlightText: string,
+    containerSelector: string = ".full-table-screen .prose",
+    highlightClass: string = "highlighted-model-column"
+  ) {
+    if (!highlightText?.trim()) return;
+
+    const containers = document.querySelectorAll(containerSelector);
+
+    containers.forEach((container) => {
+      const tables = container.querySelectorAll("table");
+
+      tables.forEach((table) => {
+        const rows = table.querySelectorAll("tbody tr, tr");
+        const targetColumnIndexes: number[] = [];
+
+        // 首先遍历所有行，找到包含目标文本的列索引
+        rows.forEach((row) => {
+          const cells = row.querySelectorAll("td, th");
+          cells.forEach((cell, columnIndex) => {
+            const textContent = cell.textContent?.trim() || "";
+            if (textContent === highlightText.trim()) {
+              if (!targetColumnIndexes.includes(columnIndex)) {
+                targetColumnIndexes.push(columnIndex);
+              }
+            }
+          });
+        });
+
+        // 清除所有列的高亮
+        rows.forEach((row) => {
+          const cells = row.querySelectorAll("td, th");
+          cells.forEach((cell) => {
+            cell.classList.remove(highlightClass);
+          });
+        });
+
+        // 高亮目标列的所有单元格
+        if (targetColumnIndexes.length > 0) {
+          rows.forEach((row) => {
+            const cells = row.querySelectorAll("td, th");
+            targetColumnIndexes.forEach((columnIndex) => {
+              if (cells[columnIndex]) {
+                cells[columnIndex].classList.add(highlightClass);
+              }
+            });
+          });
+
+          // 在小屏幕上自动滚动到高亮列
+          scrollToHighlightedColumn(table, targetColumnIndexes[0]);
+        }
+      });
+    });
+  }
+
+  /**
+   * 在小屏幕上滚动到高亮列
+   * @param table 表格元素
+   * @param columnIndex 列索引
+   */
+  function scrollToHighlightedColumn(table: Element, columnIndex: number) {
+    if (typeof window === "undefined") return;
+
+    // 只在小屏幕上执行滚动
+    if (window.innerWidth > 768) return;
+
+    const firstRow = table.querySelector("tr");
+    if (!firstRow) return;
+
+    const targetCell = firstRow.children[columnIndex] as HTMLElement;
+    if (!targetCell) return;
+
+    // 找到可滚动的父容器
+    const scrollContainer = table.closest(".prose")?.parentElement;
+    if (!scrollContainer) return;
+
+    // 延迟执行滚动，确保样式已应用
+    setTimeout(() => {
+      const cellRect = targetCell.getBoundingClientRect();
+      const containerRect = scrollContainer.getBoundingClientRect();
+
+      // 计算需要滚动的距离
+      const scrollLeft =
+        targetCell.offsetLeft - containerRect.width / 2 + cellRect.width / 2;
+
+      scrollContainer.scrollTo({
+        left: Math.max(0, scrollLeft),
+        behavior: "smooth",
+      });
+    }, 200);
+  }
+
+  /**
+   * 添加表格响应式包装器
+   * @param table 表格元素
+   */
+  function wrapTableForResponsive(table: Element) {
+    if (table.parentElement?.classList.contains("table-responsive-wrapper")) {
+      return; // 已经包装过了
+    }
+
+    const wrapper = document.createElement("div");
+    wrapper.className =
+      "table-responsive-wrapper overflow-x-auto bg-zinc-900 rounded-lg";
+    wrapper.style.cssText = `
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      border-radius: 8px;
+      background: rgb(24 24 27);
+      margin: 1rem 0;
+    `;
+
+    // 确保表格有足够的宽度
+    (table as HTMLElement).style.cssText = `
+      min-width: 1200px;
+      width: 100%;
+      margin: 0;
+      border-radius: 0;
+      table-layout: auto;
+    `;
+
+    // 为表格单元格设置合适的宽度
+    const cells = table.querySelectorAll("th, td");
+    cells.forEach((cell, index) => {
+      const htmlCell = cell as HTMLElement;
+      if (index === 0) {
+        // 第一列给更多宽度
+        htmlCell.style.minWidth = "200px";
+      } else {
+        htmlCell.style.minWidth = "150px";
+      }
+      htmlCell.style.maxWidth = "300px";
+      htmlCell.style.whiteSpace = "nowrap";
+      htmlCell.style.overflow = "hidden";
+      htmlCell.style.textOverflow = "ellipsis";
+    });
+
+    // 添加滚动指示器
+    const scrollIndicator = document.createElement("div");
+    scrollIndicator.className =
+      "scroll-indicator text-xs text-zinc-400 mb-2 block md:hidden";
+    table.parentNode?.insertBefore(wrapper, table);
+    wrapper.appendChild(scrollIndicator);
+    wrapper.appendChild(table);
+
+    // 监听滚动，隐藏指示器
+    wrapper.addEventListener("scroll", () => {
+      if (wrapper.scrollLeft > 10) {
+        scrollIndicator.style.display = "none";
+      }
+    });
+
+    // 添加自定义滚动条样式
+    const style = document.createElement("style");
+    style.textContent = `
+      .table-responsive-wrapper::-webkit-scrollbar {
+        height: 12px;
+      }
+      .table-responsive-wrapper::-webkit-scrollbar-track {
+        background: rgb(39 39 42);
+        border-radius: 6px;
+      }
+      .table-responsive-wrapper::-webkit-scrollbar-thumb {
+        background: rgb(34 197 94);
+        border-radius: 6px;
+        border: 2px solid rgb(39 39 42);
+      }
+      .table-responsive-wrapper::-webkit-scrollbar-thumb:hover {
+        background: rgb(34 197 94 / 0.8);
+      }
+      @keyframes fadeInOut {
+        0%, 100% { opacity: 0.6; }
+        50% { opacity: 1; }
+      }
+    `;
+
+    if (!document.head.querySelector("#table-scroll-styles")) {
+      style.id = "table-scroll-styles";
+      document.head.appendChild(style);
+    }
+  }
+
+  /**
+   * 初始化表格列高亮功能
+   * @param highlightText 要高亮的文本内容（响应式）
+   * @param delay 延迟执行时间（毫秒），默认500ms
+   */
+  function initTableHighlight(
+    highlightText: Ref<string> | ComputedRef<string>,
+    delay: number = 500
+  ) {
+    // 页面挂载后执行高亮
+    onMounted(() => {
+      nextTick(() => {
+        setTimeout(() => {
+          // 为所有表格添加响应式包装器
+          const tables = document.querySelectorAll(".full-table-screen .prose table");
+          tables.forEach(wrapTableForResponsive);
+
+          // 执行高亮
+          highlightTableColumns(unref(highlightText));
+        }, delay);
+      });
+    });
+
+    // 监听文本变化，重新高亮
+    watch(highlightText, (newText) => {
+      nextTick(() => {
+        setTimeout(() => {
+          highlightTableColumns(newText);
+        }, 100);
+      });
+    });
+
+    // 监听窗口大小变化，重新调整表格
+    if (typeof window !== "undefined") {
+      const handleResize = debounce(() => {
+        const tables = document.querySelectorAll(".full-table-screen .prose table");
+        tables.forEach(wrapTableForResponsive);
+        highlightTableColumns(unref(highlightText));
+      }, 300);
+
+      window.addEventListener("resize", handleResize);
+
+      onUnmounted(() => {
+        window.removeEventListener("resize", handleResize);
+      });
+    }
+  }
+
+  /**
+   * 防抖函数
+   * @param func 要防抖的函数
+   * @param delay 延迟时间
+   */
+  function debounce(func: Function, delay: number) {
+    let timeoutId: ReturnType<typeof setTimeout>;
+    return (...args: any[]) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => func.apply(null, args), delay);
+    };
+  }
+
+  return {
+    highlightTableColumns,
+    initTableHighlight,
+    scrollToHighlightedColumn,
+    wrapTableForResponsive,
+  };
+}

content.config.ts

@@ -25,6 +25,7 @@ const productCollection = defineCollection({
   schema: z.object({
     title: z.string(),
     name: z.string(),
+    model: z.string(),
     description: z.string().optional(),
     id: z.string(),
     categoryId: z.string(), // 关联类别的ID

i18n/locales/en.ts

@@ -173,6 +173,7 @@ export default {
     capacitiesTitle: "Capacities",
     relatedProducts: "Related Products",
     seriesTitle: "Series",
+    modelTitle: "Model",
   },
   faq: {
     title: "Frequently Asked Questions",

i18n/locales/ja.ts

@@ -166,6 +166,7 @@ export default {
     capacitiesTitle: "容量",
     relatedProducts: "関連製品",
     seriesTitle: "系列",
+    modelTitle: "型番",
   },
   faq: {
     title: "よくある質問",

i18n/locales/zh.ts

@@ -162,6 +162,7 @@ export default {
     capacitiesTitle: "容量",
     relatedProducts: "相关产品",
     seriesTitle: "系列",
+    modelTitle: "型号",
   },
   faq: {
     title: "常见问题",

pages/products/[id].vue

@@ -282,22 +282,36 @@
               <!-- 右侧产品信息 -->
               <div class="flex flex-col gap-8">
                 <!-- 产品名称 -->
-                <div class="bg-zinc-900 rounded-lg p-6">
+                <div class="bg-zinc-900 rounded-lg p-2 md:p-6">
                   <h1 class="text-white text-3xl font-medium mb-4">
                     {{ product.title || product.name }}
                   </h1>
-                  <div class="text-[#71717A] text-lg leading-relaxed">
+                  <div
+                    class="text-[#71717A] text-sm md:text-base leading-relaxed"
+                  >
                     {{ product.summary }}
                   </div>
                 </div>
 
                 <!-- 产品参数 -->
-                <div class="bg-zinc-900 rounded-lg p-6">
+                <div
+                  class="bg-zinc-900 rounded-lg p-2 md:p-6 text-sm md:text-base"
+                >
                   <div class="grid grid-cols-1 gap-4">
                     <div
-                      class="flex justify-between items-center py-2 border-b border-zinc-800"
+                      class="flex justify-between items-center gap-2 py-2 border-b border-zinc-800"
                     >
-                      <span class="text-[#71717A]">{{
+                      <span class="text-[#71717A] whitespace-nowrap">{{
+                        t("products.modelTitle")
+                      }}</span>
+                      <span class="text-white font-medium">{{
+                        product.model
+                      }}</span>
+                    </div>
+                    <div
+                      class="flex justify-between items-center gap-2 py-2 border-b border-zinc-800"
+                    >
+                      <span class="text-[#71717A] whitespace-nowrap">{{
                         t("products.categoryTitle")
                       }}</span>
                       <span class="text-white font-medium"
@@ -309,9 +323,9 @@
                     </div>
                     <div
                       v-if="product.tag"
-                      class="flex justify-between items-center py-2 border-b border-zinc-800"
+                      class="flex justify-between items-center gap-2 py-2 border-b border-zinc-800"
                     >
-                      <span class="text-[#71717A]">{{
+                      <span class="text-[#71717A] whitespace-nowrap">{{
                         t("products.seriesTitle")
                       }}</span>
                       <span class="text-white font-medium">{{
@@ -319,9 +333,9 @@
                       }}</span>
                     </div>
                     <div
-                      class="flex justify-between items-center py-2 border-b border-zinc-800"
+                      class="flex justify-between items-center gap-2 py-2 border-b border-zinc-800"
                     >
-                      <span class="text-[#71717A]">{{
+                      <span class="text-[#71717A] whitespace-nowrap">{{
                         t("products.usageTitle")
                       }}</span>
                       <span class="text-white font-medium">{{
@@ -345,13 +359,13 @@
                 <!-- 产品描述 -->
                 <div
                   v-if="product.description"
-                  class="bg-zinc-900 rounded-lg p-6"
+                  class="bg-zinc-900 rounded-lg p-2 md:p-6"
                 >
-                  <h2 class="text-white text-xl font-medium mb-6">
+                  <h2 class="text-white text-xl font-medium mb-2 md:mb-6">
                     {{ t("products.productDescription") }}
                   </h2>
                   <div
-                    class="text-[#71717A] leading-relaxed space-y-4 prose prose-invert max-w-none"
+                    class="text-[#71717A] leading-relaxed space-y-4 prose prose-invert max-w-none text-sm md:text-base"
                   >
                     {{ product.description }}
                   </div>
@@ -360,10 +374,10 @@
                 <!-- 个人用户产品描述 -->
                 <div
                   v-if="product.meta?.audiences === 0"
-                  class="bg-zinc-900 rounded-lg p-6"
+                  class="bg-zinc-900 rounded-lg p-2 md:p-6"
                 >
                   <div
-                    class="text-[#71717A] leading-relaxed space-y-4 prose prose-invert max-w-none"
+                    class="text-[#71717A] leading-relaxed space-y-4 prose prose-invert max-w-none text-sm md:text-base"
                   >
                     <ContentRenderer :value="product.content" />
                   </div>
@@ -372,14 +386,12 @@
                 <!-- 相关产品 -->
                 <div
                   v-if="relatedProducts.length > 0"
-                  class="bg-zinc-900 rounded-lg p-6"
+                  class="bg-zinc-900 rounded-lg p-2 md:p-6"
                 >
-                  <h2 class="text-white text-xl font-medium mb-6">
+                  <h2 class="text-white text-xl font-medium mb-2 md:mb-6">
                     {{ t("products.relatedProducts") }}
                   </h2>
-                  <div
-                    class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
-                  >
+                  <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                     <nuxt-link
                       v-for="relatedProduct in relatedProducts"
                       :key="relatedProduct.id"
@@ -399,7 +411,7 @@
                           />
                         </div>
                         <h3
-                          class="text-white text-lg font-medium mb-2 line-clamp-2"
+                          class="text-white text-base md:text-lg font-medium mb-2 line-clamp-2"
                         >
                           {{ relatedProduct.title || relatedProduct.name }}
                         </h3>
@@ -415,12 +427,14 @@
             <!-- 企业用户产品描述 -->
             <div
               v-if="product.meta?.audiences === 1"
-              class="bg-zinc-900 rounded-lg p-6 mt-6"
+              class="bg-zinc-900 rounded-lg p-2 md:p-6 mt-6 full-table-screen"
             >
               <div
-                class="text-[#71717A] leading-relaxed space-y-4 prose prose-invert max-w-none"
+                class="text-[#71717A] leading-relaxed space-y-4 prose prose-invert max-w-none text-sm md:text-base"
               >
-                <ContentRenderer :value="product.content" />
+                <ContentRenderer
+                  :value="product.content"
+                />
               </div>
             </div>
           </div>
@@ -436,6 +450,7 @@
  * 展示产品主图、参数和描述
  */
 import { useErrorHandler } from "~/composables/useErrorHandler";
+import { useTableHighlight } from "~/composables/useTableHighlight";
 import { useRoute, useI18n, useAsyncData } from "#imports";
 import { queryCollection } from "#imports";
 import { ContentRenderer } from "#components";
@@ -454,6 +469,7 @@ import "swiper/css/pagination";
 import "swiper/css/effect-fade";
 
 const { error, isLoading } = useErrorHandler();
+const { initTableHighlight } = useTableHighlight();
 const route = useRoute();
 const { locale, t } = useI18n();
 const id = route.params.id as string;
@@ -477,6 +493,7 @@ const homepagePath = computed(() => {
 interface Product {
   id: string;
   name: string;
+  model: string;
   usage: string[];
   capacities: string[];
   category: string;
@@ -559,6 +576,7 @@ const product = computed<Product | any>(() => {
   return {
     id: id,
     name: String(meta.name || productContent.value.title || ""),
+    model: String(meta.model || ""),
     title: String(productContent.value.title || meta.name || ""),
     usage: Array.isArray(meta.usage) ? meta.usage : [],
     capacities: Array.isArray(meta.capacities) ? meta.capacities : [],
@@ -583,6 +601,9 @@ const product = computed<Product | any>(() => {
   };
 });
 
+// 初始化表格高亮功能
+initTableHighlight(computed(() => product.value?.model || ""));
+
 /**
  * 获取相关产品
  */
@@ -968,4 +989,359 @@ useHead(() => ({
   aspect-ratio: 1 / 1;
   position: relative;
 }
+
+/* 表格样式和高亮效果 */
+:deep(.full-table-screen .prose table) {
+  @apply border-collapse border border-zinc-700 rounded-lg overflow-hidden;
+}
+
+:deep(.full-table-screen .prose thead) {
+  @apply bg-zinc-800;
+}
+
+:deep(.full-table-screen .prose th) {
+  @apply px-6 py-3 text-left text-base font-medium text-zinc-300 uppercase tracking-wider border-b border-zinc-700;
+}
+
+:deep(.full-table-screen .prose tbody) {
+  @apply bg-zinc-900 divide-y divide-zinc-700;
+}
+
+:deep(.full-table-screen .prose td) {
+  @apply px-6 py-4 text-sm text-zinc-300 border-b border-zinc-700/50;
+}
+
+:deep(.full-table-screen .prose tr) {
+  @apply transition-colors duration-200;
+}
+
+:deep(.full-table-screen .prose tr:hover:not(.highlighted-model-row)) {
+  @apply bg-zinc-800/50;
+}
+
+/* 高亮当前型号对应的行 */
+:deep(.full-table-screen .prose tr.highlighted-model-row) {
+  @apply bg-cyan-500/20 border border-cyan-400/50;
+}
+
+:deep(.full-table-screen .prose tr.highlighted-model-row td) {
+  @apply text-cyan-400 font-medium;
+}
+
+/* 表格响应式处理 */
+@media (max-width: 640px) {
+  :deep(.prose table) {
+    font-size: 0.875rem;
+  }
+
+  :deep(.full-table-screen .prose th),
+  :deep(.full-table-screen .prose td) {
+    @apply px-3 py-2;
+  }
+}
+
+/* 表格响应式容器 */
+:deep(.full-table-screen .prose) {
+  /* 为包含表格的容器添加水平滚动 */
+  & > *:has(table) {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-color: theme("colors.cyan.400") theme("colors.zinc.800");
+  }
+
+  /* 自定义滚动条样式 */
+  & > *:has(table)::-webkit-scrollbar {
+    height: 8px;
+  }
+
+  & > *:has(table)::-webkit-scrollbar-track {
+    background: theme("colors.zinc.800");
+    border-radius: 4px;
+  }
+
+  & > *:has(table)::-webkit-scrollbar-thumb {
+    background: theme("colors.cyan.400");
+    border-radius: 4px;
+  }
+
+  & > *:has(table)::-webkit-scrollbar-thumb:hover {
+    background: theme("colors.cyan.300");
+  }
+}
+
+/* 小屏幕表格优化 */
+@media (max-width: 768px) {
+  :deep(.full-table-screen .prose table) {
+    min-width: 100%;
+    white-space: nowrap;
+  }
+
+  :deep(.full-table-screen .prose th),
+  :deep(.full-table-screen .prose td) {
+    @apply px-2 py-2 text-xs;
+    min-width: 100px; /* 确保最小宽度 */
+  }
+
+  /* 高亮列在小屏幕上更明显 */
+  :deep(.full-table-screen .prose td.highlighted-model-column),
+  :deep(.full-table-screen .prose th.highlighted-model-column) {
+    @apply bg-cyan-500/30;
+    position: sticky;
+    z-index: 10;
+  }
+
+  :deep(.full-table-screen .prose td.highlighted-model-column)::before,
+  :deep(.full-table-screen .prose th.highlighted-model-column)::before {
+    width: 4px;
+  }
+}
+
+/* 超小屏幕处理 */
+@media (max-width: 480px) {
+  :deep(.full-table-screen .prose th),
+  :deep(.full-table-screen .prose td) {
+    @apply px-1 py-1 text-xs;
+    min-width: 80px;
+  }
+
+  /* 为高亮列添加固定位置，确保始终可见 */
+  :deep(.full-table-screen .prose td.highlighted-model-column),
+  :deep(.full-table-screen .prose th.highlighted-model-column) {
+    position: sticky;
+    left: 0;
+    z-index: 20;
+    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+  }
+}
+
+/* 列高亮基础样式 */
+:deep(.full-table-screen .prose td.highlighted-model-column),
+:deep(.full-table-screen .prose th.highlighted-model-column) {
+  @apply bg-cyan-500/20 text-cyan-400 font-medium;
+  position: relative;
+}
+
+:deep(.full-table-screen .prose td.highlighted-model-column)::before,
+:deep(.full-table-screen .prose th.highlighted-model-column)::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background-color: theme("colors.cyan.400");
+}
+
+/* 表格行悬停效果 */
+:deep(.full-table-screen .prose tr:hover td:not(.highlighted-model-column)) {
+  @apply bg-zinc-800/30;
+}
+
+/* 表格响应式包装器样式 */
+:deep(.table-responsive-wrapper) {
+  border-radius: 8px;
+  background: theme("colors.zinc.900");
+  margin: 1rem 0;
+}
+
+:deep(.scroll-indicator) {
+  animation: fadeInOut 3s ease-in-out infinite;
+}
+
+@keyframes fadeInOut {
+  0%,
+  100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* 优化表格在响应式包装器中的显示 */
+:deep(.table-responsive-wrapper table) {
+  margin: 0;
+  border-radius: 0;
+}
+
+/* 滚动条增强 */
+:deep(.table-responsive-wrapper::-webkit-scrollbar) {
+  height: 12px;
+}
+
+:deep(.table-responsive-wrapper::-webkit-scrollbar-track) {
+  background: theme("colors.zinc.800");
+  border-radius: 6px;
+  margin: 0 8px;
+}
+
+:deep(.table-responsive-wrapper::-webkit-scrollbar-thumb) {
+  background: linear-gradient(
+    45deg,
+    theme("colors.cyan.500"),
+    theme("colors.cyan.400")
+  );
+  border-radius: 6px;
+  border: 2px solid theme("colors.zinc.800");
+}
+
+:deep(.table-responsive-wrapper::-webkit-scrollbar-thumb:hover) {
+  background: linear-gradient(
+    45deg,
+    theme("colors.cyan.400"),
+    theme("colors.cyan.300")
+  );
+}
+
+/* 简化的表格响应式处理 - 覆盖之前的复杂样式 */
+:deep(.full-table-screen .prose table) {
+  min-width: 700px !important;
+  width: 100% !important;
+  white-space: nowrap;
+}
+
+:deep(.full-table-screen .prose th),
+:deep(.full-table-screen .prose td) {
+  white-space: nowrap !important;
+  min-width: 100px;
+}
+
+/* 移动设备优化 */
+@media (max-width: 768px) {
+  :deep(.full-table-screen .prose table) {
+    min-width: 800px !important;
+    font-size: 0.875rem;
+  }
+
+  :deep(.full-table-screen .prose th),
+  :deep(.full-table-screen .prose td) {
+    min-width: 80px;
+    padding: 0.5rem 0.25rem !important;
+    font-size: 0.75rem;
+  }
+}
+
+@media (max-width: 480px) {
+  :deep(.full-table-screen .prose table) {
+    min-width: 600px !important;
+  }
+
+  :deep(.full-table-screen .prose th),
+  :deep(.full-table-screen .prose td) {
+    min-width: 90px !important;
+    padding: 0.25rem 0.375rem !important;
+    font-size: 0.75rem !important;
+  }
+}
+
+/* 优化单元格宽度 - 更合适的显示空间 */
+:deep(.full-table-screen .prose table) {
+  min-width: 1000px !important; /* 增加整体表格宽度 */
+}
+
+:deep(.full-table-screen .prose th),
+:deep(.full-table-screen .prose td) {
+  min-width: 150px !important; /* 增加单元格最小宽度 */
+  max-width: 300px; /* 设置最大宽度避免过宽 */
+  padding: 0.75rem 1rem !important; /* 增加内边距 */
+}
+
+/* 第一列（通常是标题列）给更多宽度 */
+:deep(.full-table-screen .prose th:first-child),
+:deep(.full-table-screen .prose td:first-child) {
+  min-width: 200px !important;
+}
+
+/* 针对不同屏幕尺寸的优化 */
+@media (max-width: 1024px) {
+  :deep(.full-table-screen .prose table) {
+    min-width: 900px !important;
+  }
+
+  :deep(.full-table-screen .prose th),
+  :deep(.full-table-screen .prose td) {
+    min-width: 130px !important;
+    padding: 0.5rem 0.75rem !important;
+  }
+}
+
+@media (max-width: 768px) {
+  :deep(.full-table-screen .prose table) {
+    min-width: 800px !important;
+  }
+
+  :deep(.full-table-screen .prose th),
+  :deep(.full-table-screen .prose td) {
+    min-width: 120px !important;
+    padding: 0.5rem 0.5rem !important;
+    font-size: 0.875rem !important;
+  }
+}
+
+@media (max-width: 640px) {
+  :deep(.full-table-screen .prose table) {
+    min-width: 700px !important;
+  }
+
+  :deep(.full-table-screen .prose th),
+  :deep(.full-table-screen .prose td) {
+    min-width: 100px !important;
+    padding: 0.375rem 0.5rem !important;
+    font-size: 0.8rem !important;
+  }
+}
+
+@media (max-width: 480px) {
+  :deep(.full-table-screen .prose table) {
+    min-width: 600px !important;
+  }
+
+  :deep(.full-table-screen .prose th),
+  :deep(.full-table-screen .prose td) {
+    min-width: 90px !important;
+    padding: 0.25rem 0.375rem !important;
+    font-size: 0.75rem !important;
+  }
+}
+
+/* 单元格内容截断和悬停显示 */
+:deep(.full-table-screen .prose th),
+:deep(.full-table-screen .prose td) {
+  position: relative;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+/* 悬停时显示完整内容 */
+:deep(.full-table-screen .prose th:hover),
+:deep(.full-table-screen .prose td:hover) {
+  overflow: visible !important;
+  white-space: normal !important;
+  z-index: 100;
+  background-color: theme("colors.zinc.800") !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border-radius: 4px;
+}
+
+/* 高亮列的悬停效果 */
+:deep(.full-table-screen .prose th.highlighted-model-column:hover),
+:deep(.full-table-screen .prose td.highlighted-model-column:hover) {
+  background-color: theme("colors.cyan.600") !important;
+  color: white !important;
+}
+
+/* 确保悬停时的文本不会被遮挡 */
+:deep(.full-table-screen .prose table) {
+  position: relative;
+  z-index: 1;
+}
+
+:deep(.full-table-screen .prose th:hover),
+:deep(.full-table-screen .prose td:hover) {
+  position: relative;
+  z-index: 101;
+}
 </style>