From 6f2d4b765300c858c4bb95c32e87194fb849d14a Mon Sep 17 00:00:00 2001
From: zttProjectSpace <zhangtantan@h-partners.com>
Date: Thu, 16 Jan 2025 18:37:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E5=BB=BA=E5=BA=94=E7=94=A8=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7=E8=A1=A8=E5=8D=95=E4=B8=8E=E5=8F=B3=E4=BE=A7=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E9=A2=84=E8=A7=88=E8=81=94=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dialogue/components/InterPreview.vue      |  55 ++++++-
 src/views/styles/InterPreview.scss            | 148 ++++++++++++++++++
 2 files changed, 202 insertions(+), 1 deletion(-)
 create mode 100644 src/views/styles/InterPreview.scss

diff --git a/src/views/dialogue/components/InterPreview.vue b/src/views/dialogue/components/InterPreview.vue
index b918756..80af171 100644
--- a/src/views/dialogue/components/InterPreview.vue
+++ b/src/views/dialogue/components/InterPreview.vue
@@ -1,9 +1,62 @@
 <template>
   <div class="interPreviewBox">
-    
+    <div v-if="interPreviewInfo.appName.length" class="preTop">
+      <div class="preTopContent">
+        <img src="@/assets/images/preTitleIcon.png" class="preTitleIcon" />
+        <div class="preMainAppName">
+          {{ interPreviewInfo.appName }}
+        </div>
+      </div>
+    </div>
+    <div class="preMain">
+      <div class="preMainImg">
+        <img :src="interPreviewInfo.icon" class="preMainAvator" v-if="interPreviewInfo.icon.length" />
+      </div>
+      <div
+        class="preMainContent"
+        v-if="
+          interPreviewInfo.appName.length ||
+          interPreviewInfo.appIntroduction.length ||
+          interPreviewInfo.connectList.length
+        "
+      >
+        <div class="preMainContentTitle" v-if="interPreviewInfo.appName.length">
+          <div class="greetDes">
+            <div class="greetDesContent">你好，我是</div>
+            <div class="greetDesAppName greetDesContent">
+              {{ interPreviewInfo.appName }}
+            </div>
+            <div class="greetDesContent">，很高兴为你服务</div>
+          </div>
+          <div class="preAppUser">
+            <div>@zhang</div>
+            <div class="contentCollect"><IconUnfavorite /></div>
+          </div>
+        </div>
+        <div class="preMainContentDes" v-if="interPreviewInfo.appIntroduction.length">
+          {{ interPreviewInfo.appIntroduction }}
+        </div>
+        <div class="preMainContentLink" v-if="interPreviewInfo.connectList.length">
+          <el-badge :value="connnectLinkList.length" class="linkBadge">
+            <div class="contentLinkTitle">相关链接</div>
+          </el-badge>
+          <div class="connectBox">
+            <div v-for="(connect, index) in connnectLinkList">
+              <div v-if="connect.length" class="connectCard">
+                <div class="connectBoxIndex">{{ index + 1 }}</div>
+                <el-link class="connectBoxContent" type="primary" :href="connect">
+                  {{ connect }}
+                </el-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
+import '../../styles/InterPreview.scss';
 import { ref, watch } from 'vue';
 import { IconUnfavorite } from '@computing/opendesign-icons';
 
diff --git a/src/views/styles/InterPreview.scss b/src/views/styles/InterPreview.scss
new file mode 100644
index 0000000..a345a70
--- /dev/null
+++ b/src/views/styles/InterPreview.scss
@@ -0,0 +1,148 @@
+.dialogue-interPreview-main {
+  width: 100%;
+  display: flex;
+  margin-top: 32px;
+  .interPreviewBox {
+    display: flex;
+    width: 100%;
+    gap: 32px;
+    flex-direction: column;
+    .preTop {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+
+      .preTopContent {
+        display: flex;
+        align-items: center;
+        height: 40px;
+        padding: 8px;
+        border-radius: 20px;
+        gap: 8px;
+        background: linear-gradient(122.39deg, rgba(109, 117, 250, 0.2) -20.158%, rgba(90, 179, 255, 0.2) 112.459%);
+        .preTitleIcon {
+          width: 32px;
+          height: 32px;
+        }
+        .preMainAppName {
+          font-size: 16px;
+          line-height: 24px;
+          color: var(--o-text-color-primary);
+          font-weight: 700;
+        }
+      }
+    }
+
+    .preMain {
+      padding-left: 40px;
+      display: flex;
+      gap: 16px;
+
+      .preMainImg {
+        width: 46px;
+        height: 46px;
+        border-radius: 50%;
+        .preMainAvator {
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+      }
+      .preMainContent {
+        width: calc(100% - 166px);
+        padding: 24px;
+        background-color: var(--o-bg-color-base);
+        .preMainContentTitle {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          border-bottom: 1px solid var(--o-time-text);
+          .greetDes {
+            display: flex;
+            .greetDesContent {
+              font-size: 24px;
+              font-weight: 700;
+              line-height: 32px;
+              color: var(--o-text-color-primary);
+            }
+            .greetDesAppName {
+              color: #6c77fa;
+            }
+          }
+          .preAppUser {
+            display: flex;
+            gap: 16px;
+            margin-bottom: 8px;
+          }
+        }
+        .preMainContentDes {
+          font-size: 16px;
+          line-height: 24px;
+          margin-top: 8px;
+          margin-bottom: 20px;
+        }
+        .preMainContentLink {
+          .contentLinkTitle {
+            color: var(--o-text-color-primary);
+            font-size: 16px;
+            line-height: 24px;
+          }
+          .linkBadge {
+            .el-badge__content {
+              right: calc(-10px + var(--el-badge-size) / 2);
+              top: 4px;
+            }
+          }
+
+          .connectBox {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            .connectCard {
+              display: flex;
+              height: 32px;
+              align-items: center;
+              background: rgba(99, 149, 253, 0.1);
+              padding: 0 8px 0 4px;
+              border-radius: 20px;
+              gap: 6px;
+              .connectBoxIndex {
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                text-align: center;
+                line-height: 24px;
+                font-size: 14px;
+                color: var(--o-text-color-primary);
+                background: var(--o-bg-color-base);
+              }
+              .connectBoxContent {
+                color: #6395fd;
+                font-size: 14px;
+                cursor: pointer;
+                font-weight: 400;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .contentCollect {
+    width: 24px;
+    height: 24px;
+    background-color: var(--o-bg-color-light);
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    svg {
+      width: 16px;
+      height: 16px;
+      path {
+        fill: var(--o-text-color-tertiary);
+      }
+    }
+  }
+}
-- 
Gitee