Feature: 页面内Markdown渲染 & 规格参数表格

app/app.vue

@@ -13,6 +13,8 @@ import { ElConfigProvider } from 'element-plus';
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import en from 'element-plus/es/locale/lang/en';
 
+const { login } = useStrapiAuth();
+
 const { locale } = useI18n();
 
 const elementPlusLocales = {
@@ -21,4 +23,21 @@ const elementPlusLocales = {
 }
 
 const elementPlusLocale = computed(() => elementPlusLocales[locale.value] || zhCn);
+
+onMounted(() => {
+  // 检查用户是否已登录
+  const user = useStrapiUser();
+  if (!user.value) {
+    // 如果未登录，重定向到登录页面
+    login({ identifier: 'remilia', password: 'huanshuo51' })
+      .then(() => {
+        console.log('Login successful');
+      })
+      .catch((error) => {
+        console.error('Login failed:', error);
+      });
+  } else {
+    console.log('User is already logged in:', user.value);
+  }
+});
 </script>

app/components/MarkdownRenderer.vue

@@ -0,0 +1,36 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <!-- 用 v-html 渲染解析后的 HTML -->
+  <div class="markdown-body" v-html="safeHtml"/>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  content: string
+}
+
+const props = defineProps<Props>()
+
+// 将 Markdown 转换成 HTML
+const safeHtml = computed(() => renderMarkdown(props.content))
+console.log('Markdown content:', safeHtml.value)
+</script>
+
+<style>
+.markdown-body {
+  padding: 10px;
+  line-height: 1.6;
+}
+
+.markdown-body h1,
+.markdown-body h2 {
+    color: var(--el-color-primary);
+    font-size: 1.5em;
+    margin-bottom: 0.5em;
+}
+
+.markdown-body ol {
+    list-style-type: decimal;
+    padding-left: 2em;
+}
+</style>

app/components/ProductionCard.vue

@@ -1,7 +1,7 @@
 <template>
     <el-card class="production-card" @click="handleClick">
         <!-- Image -->
-        <el-image :src="imageUrl" fit="cover" />
+        <el-image class="production-image" :src="imageUrl" fit="contain" />
         <template #footer>
             <!-- Name -->
             <div class="text-center mx-auto text-md">
@@ -36,10 +36,11 @@ const handleClick = () => {
 
 <style scoped>
 .production-card {
-    width: 30%;
-    margin: 20px auto;
+    width: 20%;
+    /* margin: 20px auto; */
     cursor: pointer;
     transition: all 0.3s ease;
+    text-align: center;
 }
 
 .production-card:hover {

app/components/SpecTable.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="spec-collapse">
+        <el-collapse v-for="(value, key) in data" :key="key" v-model="activeName">
+            <el-collapse-item :title="key" :name="key">
+                <el-descriptions :column="1" border>
+                    <el-descriptions-item v-for="(subValue, subKey) in value" :key="subKey" :label="String(subKey)">
+                        <div v-if="isPrimitive(subValue)">
+                            {{ subValue }}
+                        </div>
+                        <div v-else>
+                            <ul>
+                                <li v-for="(item, index) in subValue" :key="index">
+                                    {{ index }}: {{ item }}
+                                </li>
+                            </ul>
+                        </div>
+                    </el-descriptions-item>
+                </el-descriptions>
+            </el-collapse-item>
+        </el-collapse>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true
+    }
+})
+
+const isPrimitive = (val: unknown): boolean => {
+    return (
+        typeof val === 'string' ||
+        typeof val === 'number' ||
+        typeof val === 'boolean' ||
+        val === null
+    )
+}
+
+// 默认全部展开
+const activeName = ref<string[]>(Object.keys(props.data) || [])
+</script>

app/layouts/default.vue

@@ -1,13 +1,35 @@
 <template>
-    <el-container>
-        <el-header>
+    <el-container class="app-container">
+        <el-header class="page-header">
             <jinshen-header />
         </el-header>
-        <el-main>
+        <el-main class="main-content">
             <slot />
         </el-main>
-        <el-footer>
+        <el-footer class="page-footer">
             <jinshen-footer />
         </el-footer>
     </el-container>
-</template>
+</template>
+
+<style scoped>
+.app-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.page-header {
+    padding: 0px;
+}
+
+.main-content {
+    flex: 1;
+    padding: 20px;
+    flex-direction: column;
+}
+
+.page-footer {
+    padding: 0px;
+}
+
+</style>

app/pages/productions/[...slug].vue

@@ -13,7 +13,7 @@
       <!-- 产品详情内容 -->
       <div class="production-header">
         <div class="production-image">
-          <el-image :src="production.image_url" :alt="production.title" fit="contain" />
+          <el-image :src="production.production_image.url" :alt="production.title" fit="contain" />
         </div>
         <div class="production-info">
           <h1>{{ production.title }}</h1>
@@ -25,10 +25,11 @@
       <div class="production-content">
         <el-tabs v-model="activeName">
           <el-tab-pane label="产品详情" name="details">
-            <h2>{{ production.title }}</h2>
-            <p class="summary">{{ production.summary }}</p>
+            <markdown-renderer :content="production.production_details || ''" />
+          </el-tab-pane>
+          <el-tab-pane label="技术规格" name="specs">
+            <spec-table :data="production.production_specs" />
           </el-tab-pane>
-          <el-tab-pane label="技术规格" name="specs" />
           <el-tab-pane label="相关文档" name="documents" />
         </el-tabs>
       </div>
@@ -36,7 +37,7 @@
 
     <!-- 加载状态 -->
     <div v-else-if="pending" class="loading">
-      <el-loading-text>{{ $t('loading') }}</el-loading-text>
+      {{ $t('loading') }}
     </div>
 
     <!-- 未找到产品 -->
@@ -53,20 +54,23 @@
 </template>
 
 <script setup lang="ts">
-interface ProductionDetail {
+interface ProductionDetails {
   id: number
   title: string
   summary: string
-  content?: string
-  image_url: string
-  slug?: string
+  production_type?: string
+  production_image: {
+    url: string
+  }
+  production_details?: string
+  production_specs?: string | object
+  documentId?: string
 }
 
 const route = useRoute()
-const router = useRouter()
-const { find } = useStrapi()
+const { findOne } = useStrapi()
 
-const production = ref<ProductionDetail | null>(null)
+const production = ref<ProductionDetails | null>(null)
 const pending = ref(true)
 
 const activeName = ref('details') // 默认选中概览标签
@@ -77,9 +81,9 @@ const productionParam = computed(() => route.params.slug as string)
 onMounted(async () => {
   try {
 
-    const response = await find(`productions/${productionParam.value}`, {
+    const response = await findOne<ProductionDetails>('productions', productionParam.value, {
       populate: '*',
-    }) as any
+    })
 
     if (response.data) {
       const item = response.data
@@ -87,12 +91,18 @@ onMounted(async () => {
         id: item.id,
         title: item.title,
         summary: item.summary,
-        content: item.content,
-        image_url: item.production_image?.url
+        production_details: item.production_details || '',
+        production_specs: item.production_specs || '',
+        production_image: {
+          url: item.production_image?.url
           ? `http://192.168.86.5:1337${item.production_image.url}`
-          : '',
-        slug: item.slug
+          : ''
+        },
+        documentId: item.documentId || '',
       }
+
+      console.log('Fetched production:', production.value)
+      console.log('Raw specs:', production.value.production_specs)
     }
   } catch (error) {
     console.error('Failed to fetch production:', error)
@@ -101,10 +111,6 @@ onMounted(async () => {
   }
 })
 
-const goBack = () => {
-  router.back()
-}
-
 // SEO
 useHead({
   title: computed(() => production.value?.title || 'Product Detail'),

app/pages/productions/index.vue

@@ -15,10 +15,23 @@
 
 
 <script setup lang="ts">
+import type { StrapiLocale } from '@nuxtjs/strapi'
+
 const { find } = useStrapi()
+const { locale: i18nLocale } = useI18n()
 
 const baseUrl = 'http://192.168.86.5:1337';
 
+interface Production {
+    id: number;
+    title: string;
+    summary: string;
+    production_image?: {
+        url: string;
+    };
+    documentId?: string;
+}
+
 class ProductionInfo {
     id: number;
     title: string;
@@ -35,17 +48,21 @@ class ProductionInfo {
     }
 }
 
+const strapiLocales = {
+    'zh': 'zh-Hans' as StrapiLocale, // 简体中文
+    'en': 'en' as StrapiLocale // 英文
+};
+
 const productions = ref<ProductionInfo[]>();
 
 onMounted(async () => {
     try {
-         
-        const response = await find('productions', {
+        const response = await find<Production>('productions', {
             populate: '*',
-        }) as any
+            locale: strapiLocales[i18nLocale.value], // 使用简体中文
+        })
         
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        productions.value = response.data.map((item: any) => {
+        productions.value = response.data.map((item: Production) => {
             return new ProductionInfo(
                 item.id,
                 item.title,
@@ -66,7 +83,7 @@ onMounted(async () => {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: 20px;
     padding: 20px;
+    gap: 20px;
 }
 </style>

app/utils/markdown.ts

@@ -0,0 +1,15 @@
+import MarkdownIt from 'markdown-it';
+import DOMPurify from 'dompurify';
+
+const md = new MarkdownIt({
+    html: true,
+    linkify: true,
+    typographer: true,
+    breaks: true,
+})
+
+export function renderMarkdown(content: string): string {
+    const dirtyHtml = md.render(content);
+    return DOMPurify.sanitize(dirtyHtml)
+}
+