应用介绍详情

src/components/czr-ui/CzrMarkdown/CzrMarkdown.vue

@@ -42,13 +42,17 @@
           </template>
         </template>
       </div>
-      <div class="flex flex-1 overflow-hidden" :class="`layout-${layout}`">
+      <div
+        class="flex flex-1 overflow-hidden"
+        :class="`layout-${layout}`"
+        :style="layout === 'y' ? ' flex-direction: column;' : ''"
+      >
         <div
           class="flex-1 p-4"
           :style="
             layout === 'x'
               ? 'border-right: 1px solid rgba(0, 0, 0, 0.15)'
-              : 'border-bottom: 1px solid rgba(0, 0, 0, 0.15)'
+              : 'border-bottom: 1px solid rgba(0, 0, 0, 0.15);'
           "
         >
           <textarea
@@ -125,6 +129,13 @@ const Menus: any = [
       },
     ],
   },
+  {
+    icon: 'czr_md-title-1',
+    title: '自定义标题',
+    start: '<div class="__czr-title_1">',
+    end: '</div>',
+    split: true,
+  },
   { icon: 'czr_md-bold', title: '加粗', start: '**', end: '**' },
   { icon: 'czr_md-em', title: '斜体', start: '*', end: '*' },
   { icon: 'czr_md-bold-em', title: '加粗斜体', start: '***', end: '***' },
@@ -198,6 +209,15 @@ onMounted(() => {
     width: 100%;
     height: 100%;
     overflow: auto;
+    color: #606266;
+    font-size: 0.88rem;
+    line-height: 1.5rem;
+    * {
+      line-height: 1.5rem;
+    }
+    p {
+      margin: 0;
+    }
     /* 通用标题样式 */
     h1,
     h2,
@@ -213,6 +233,7 @@ onMounted(() => {
       margin-top: 1.5em;
       margin-bottom: 0.5em;
       color: #222;
+      margin: 0;
     }
 
     /* H1 样式 */
@@ -220,7 +241,6 @@ onMounted(() => {
       font-size: 2em;
       border-bottom: 1px solid #eaecef;
       padding-bottom: 0.3em;
-      margin-top: 0;
     }
 
     /* H2 样式 */

src/views/manage/home/app-introduction/index.vue

@@ -1,9 +1,138 @@
-<template></template>
+<template>
+  <div
+    class="flex size-full gap-4 rounded-lg bg-linear-to-b from-[#2853F7]/10 to-[#ffffff] p-4"
+  >
+    <div
+      class="flex h-full w-[30rem] flex-col rounded-lg bg-[#ffffff] p-4 shadow"
+    >
+      <div class="flex items-center gap-2">
+        <img
+          src="@/assets/images/model/model-default-logo.png"
+          class="h-[3.25rem] w-[3.25rem] rounded-sm shadow"
+        />
+        <div class="flex-1 text-xl font-bold text-[#2E3238]" v-title>
+          xxxxxxxxxxxxxxxxxxxxxx智能咨询应用
+        </div>
+        <div
+          class="__hover rounded-sm bg-[var(--czr-main-color)] px-4 py-2 text-sm text-[#ffffff]"
+          @click="
+            $router.push({
+              name: 'd8b2a8e5-d087-4722-b833-7b7e10df0ec0',
+              params: { id: state.ID },
+            })
+          "
+        >
+          立即体验
+        </div>
+      </div>
+      <div class="mt-4 flex-1">
+        <CzrMarkdown v-model="state.markdown" :view="true" layout="y" />
+      </div>
+    </div>
+    <div class="flex-1 rounded-lg bg-[#ffffff] p-4 shadow">
+      <div
+        class="relative flex size-full items-center justify-center overflow-hidden"
+        @mouseenter="state.media.hover = true"
+        @mouseleave="state.media.hover = false"
+      >
+        <template v-for="(item, index) in state.media.data">
+          <div
+            class="size-full"
+            v-if="state.media.index % state.media.data.length === index"
+          >
+            <template v-if="item.type === 'img'">
+              <img :src="item.url" class="size-full" />
+            </template>
+            <template v-else-if="item.type === 'video'">
+              <video :src="item.url" controls class="size-full" />
+            </template>
+          </div>
+        </template>
+        <template v-if="state.media.hover">
+          <div
+            class="__hover absolute left-3 flex size-23 items-center justify-center rounded-full border-6 border-[#E0E0E0] mask-circle"
+            @click="state.media.index--"
+          >
+            <SvgIcon name="czr_arrow" :rotate="180" color="#E0E0E0" size="30" />
+          </div>
+          <div
+            class="__hover absolute right-3 flex size-23 items-center justify-center rounded-full border-6 border-[#E0E0E0] mask-circle"
+            @click="state.media.index++"
+          >
+            <SvgIcon name="czr_arrow" color="#E0E0E0" size="30" />
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
 
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { onMounted, reactive } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
-const state: any = reactive({})
+const router = useRouter()
+const route = useRoute()
+const state: any = reactive({
+  ID: route.params.id,
+  detail: {},
+  markdown:
+    '<div class="__czr-title_1">基本信息</div>\n' +
+    '\n' +
+    '**开发单位：** 太极\n' +
+    '**更新时间：** 2025.5.25\n' +
+    '<div class="__czr-title_1">场景介绍</div>\n' +
+    'X智能咨询应用场景简介XX智能咨询应用场景简介XX智能咨询应用场景简介XX智能咨询应用场景简介XX智能咨询应用场景简介XX智能咨询应用场景简介XX智能咨询应用场景简介XX智能咨询应用场景简介\n' +
+    '<div class="__czr-title_1">功能特点</div>\n' +
+    '\n' +
+    '**xxx功能特点1：**\n' +
+    '功能特点1功能特点1功能特点1功能特点1功能特点1功能特点1功能特点1功能特点1功能特点1功能特点1功能特点1功能特点1\n' +
+    '**xxx功能特点2：**\n' +
+    '功能特点1功能特点1功能特点1功能特点1功能特点1功能特点1功能特点1功能特点1功能特点1功能特点1功能特点1功能特点1',
+  media: {
+    index: 0,
+    data: [
+      {
+        type: 'img',
+        url: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
+      },
+      {
+        type: 'video',
+        url: 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4',
+      },
+      {
+        type: 'img',
+        url: 'https://ecmb.bdimg.com/tam-ogel/-1544359402_433927681_88_88.png',
+      },
+      {
+        type: 'img',
+        url: 'https://psstatic.cdn.bcebos.com/basics/aichat/baiduAI_1747382050000.png',
+      },
+    ],
+    hover: false,
+  },
+})
+onMounted(() => {
+  initDictionary()
+  initDetail()
+})
+const initDetail = () => {
+  if (state.ID) {
+    state.detail = {}
+    // pluginDetail(state.ID)
+    //   .then(({ data }: any) => {
+    //     state.detail = data
+    //   })
+    //   .catch(() => {})
+    //   .finally(() => {})
+  } else {
+    router.push({ name: '4806d051-e037-4d9d-99a0-78aa2f2f362b' })
+  }
+}
+const initDictionary = () => {
+  // DictionaryStore.initModelProvides()
+  // DictionaryStore.initModelTypes()
+}
 </script>
 
 <style lang="scss" scoped></style>

src/views/manage/home/model-introduction/index.vue

@@ -30,7 +30,7 @@
         </div>
       </div>
     </div>
-    <div class="flex-1 rounded-lg bg-[#ffffff] p-4">
+    <div class="flex-1 rounded-lg bg-[#ffffff] p-4 shadow">
       <CzrMarkdown v-model="state.markdown" :view="true" />
     </div>
   </div>
@@ -39,7 +39,6 @@
 <script setup lang="ts">
 import { onMounted, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import CzrMarkdown from '@/components/czr-ui/CzrMarkdown/CzrMarkdown.vue'
 
 const router = useRouter()
 const route = useRoute()