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

2025-08-16 13:57:17 +08:00
parent c77b2282da
commit daa91ac56f
10 changed files with 221 additions and 36 deletions
--- a/app/app.vue
+++ b/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>
--- a/app/components/MarkdownRenderer.vue
+++ b/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>
--- a/app/components/ProductionCard.vue
+++ b/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 {
--- a/app/components/SpecTable.vue
+++ b/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>
--- a/app/layouts/default.vue
+++ b/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>
--- a/app/pages/productions/[...slug].vue
+++ b/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'),
--- a/app/pages/productions/index.vue
+++ b/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>
--- a/app/utils/markdown.ts
+++ b/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)
+}
+
--- a/bun.lock
+++ b/bun.lock
@ -13,10 +13,13 @@
        "@nuxtjs/i18n": "10.0.5",
        "@nuxtjs/strapi": "2.1.1",
        "@pinia/nuxt": "^0.11.2",
+        "@types/markdown-it": "^14.1.2",
        "@unocss/nuxt": "^66.4.2",
        "@vueuse/nuxt": "^13.6.0",
+        "dompurify": "^3.2.6",
        "element-plus": "^2.10.7",
        "eslint": "^9.0.0",
+        "markdown-it": "^14.1.0",
        "nuxt": "^4.0.3",
        "sass": "^1.90.0",
        "vue": "^3.5.18",
@ -542,10 +545,16 @@

    "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],

+    "@types/linkify-it": ["@types/linkify-it@5.0.0", "", {}, "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q=="],
+
    "@types/lodash": ["@types/lodash@4.17.20", "", {}, "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA=="],

    "@types/lodash-es": ["@types/lodash-es@4.17.12", "", { "dependencies": { "@types/lodash": "*" } }, "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ=="],

+    "@types/markdown-it": ["@types/markdown-it@14.1.2", "", { "dependencies": { "@types/linkify-it": "^5", "@types/mdurl": "^2" } }, "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog=="],
+
+    "@types/mdurl": ["@types/mdurl@2.0.0", "", {}, "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg=="],
+
    "@types/node": ["@types/node@24.2.1", "", { "dependencies": { "undici-types": "~7.10.0" } }, "sha512-DRh5K+ka5eJic8CjH7td8QpYEV6Zo10gfRkjHCO3weqZHWDtAaSTFtl4+VMqOJ4N5jcuhZ9/l+yy8rVgw7BQeQ=="],

    "@types/normalize-package-data": ["@types/normalize-package-data@2.4.4", "", {}, "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA=="],
@ -556,6 +565,8 @@

    "@types/triple-beam": ["@types/triple-beam@1.3.5", "", {}, "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw=="],

+    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
+
    "@types/web-bluetooth": ["@types/web-bluetooth@0.0.21", "", {}, "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="],

    "@types/yauzl": ["@types/yauzl@2.10.3", "", { "dependencies": { "@types/node": "*" } }, "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q=="],
@ -1060,6 +1071,8 @@

    "domhandler": ["domhandler@5.0.3", "", { "dependencies": { "domelementtype": "^2.3.0" } }, "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w=="],

+    "dompurify": ["dompurify@3.2.6", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ=="],
+
    "domutils": ["domutils@3.2.2", "", { "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3" } }, "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw=="],

    "dot-prop": ["dot-prop@9.0.0", "", { "dependencies": { "type-fest": "^4.18.2" } }, "sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ=="],
@ -1438,6 +1451,8 @@

    "lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],

+    "linkify-it": ["linkify-it@5.0.0", "", { "dependencies": { "uc.micro": "^2.0.0" } }, "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ=="],
+
    "listhen": ["listhen@1.9.0", "", { "dependencies": { "@parcel/watcher": "^2.4.1", "@parcel/watcher-wasm": "^2.4.1", "citty": "^0.1.6", "clipboardy": "^4.0.0", "consola": "^3.2.3", "crossws": ">=0.2.0 <0.4.0", "defu": "^6.1.4", "get-port-please": "^3.1.2", "h3": "^1.12.0", "http-shutdown": "^1.2.2", "jiti": "^2.1.2", "mlly": "^1.7.1", "node-forge": "^1.3.1", "pathe": "^1.1.2", "std-env": "^3.7.0", "ufo": "^1.5.4", "untun": "^0.1.3", "uqr": "^0.1.2" }, "bin": { "listen": "bin/listhen.mjs", "listhen": "bin/listhen.mjs" } }, "sha512-I8oW2+QL5KJo8zXNWX046M134WchxsXC7SawLPvRQpogCbkyQIaFxPE89A2HiwR7vAK2Dm2ERBAmyjTYGYEpBg=="],

    "load-tsconfig": ["load-tsconfig@0.2.5", "", {}, "sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg=="],
@ -1480,10 +1495,14 @@

    "magicast": ["magicast@0.3.5", "", { "dependencies": { "@babel/parser": "^7.25.4", "@babel/types": "^7.25.4", "source-map-js": "^1.2.0" } }, "sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ=="],

+    "markdown-it": ["markdown-it@14.1.0", "", { "dependencies": { "argparse": "^2.0.1", "entities": "^4.4.0", "linkify-it": "^5.0.0", "mdurl": "^2.0.0", "punycode.js": "^2.3.1", "uc.micro": "^2.1.0" }, "bin": { "markdown-it": "bin/markdown-it.mjs" } }, "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg=="],
+
    "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],

    "mdn-data": ["mdn-data@2.12.2", "", {}, "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA=="],

+    "mdurl": ["mdurl@2.0.0", "", {}, "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="],
+
    "memoize-one": ["memoize-one@6.0.0", "", {}, "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="],

    "merge-options": ["merge-options@3.0.4", "", { "dependencies": { "is-plain-obj": "^2.1.0" } }, "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ=="],
@ -1762,6 +1781,8 @@

    "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],

+    "punycode.js": ["punycode.js@2.3.1", "", {}, "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA=="],
+
    "qs": ["qs@6.14.0", "", { "dependencies": { "side-channel": "^1.1.0" } }, "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w=="],

    "quansync": ["quansync@0.2.10", "", {}, "sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A=="],
@ -2006,6 +2027,8 @@

    "typescript": ["typescript@5.9.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A=="],

+    "uc.micro": ["uc.micro@2.1.0", "", {}, "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="],
+
    "ufo": ["ufo@1.6.1", "", {}, "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA=="],

    "ultrahtml": ["ultrahtml@1.6.0", "", {}, "sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw=="],
--- a/package.json
+++ b/package.json
@ -19,10 +19,13 @@
    "@nuxtjs/i18n": "10.0.5",
    "@nuxtjs/strapi": "2.1.1",
    "@pinia/nuxt": "^0.11.2",
+    "@types/markdown-it": "^14.1.2",
    "@unocss/nuxt": "^66.4.2",
    "@vueuse/nuxt": "^13.6.0",
+    "dompurify": "^3.2.6",
    "element-plus": "^2.10.7",
    "eslint": "^9.0.0",
+    "markdown-it": "^14.1.0",
    "nuxt": "^4.0.3",
    "sass": "^1.90.0",
    "vue": "^3.5.18",