From c785dfa47b8a45674297b91bafb4c34d6eed7f7a Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 31 Dec 2024 14:24:28 +0800
Subject: [PATCH] fix: Optimize style

---
 .../ai-chat/ExecutionDetailDialog.vue         |  4 ---
 .../ai-chat/ParagraphSourceDialog.vue         |  4 +--
 .../ai-chat/component/ParagraphCard.vue       | 25 +++++++++++++++----
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/ui/src/components/ai-chat/ExecutionDetailDialog.vue b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
index 870868dd1..11e3f1b46 100644
--- a/ui/src/components/ai-chat/ExecutionDetailDialog.vue
+++ b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
@@ -624,10 +624,6 @@ defineExpose({ open })
 @media only screen and (max-width: 768px) {
   .execution-details-dialog {
     width: 90% !important;
-
-    .footer-content {
-      display: block;
-    }
   }
 }
 </style>
diff --git a/ui/src/components/ai-chat/ParagraphSourceDialog.vue b/ui/src/components/ai-chat/ParagraphSourceDialog.vue
index 9b0bbefeb..dffb10d41 100644
--- a/ui/src/components/ai-chat/ParagraphSourceDialog.vue
+++ b/ui/src/components/ai-chat/ParagraphSourceDialog.vue
@@ -79,9 +79,7 @@ defineExpose({ open })
 @media only screen and (max-width: 768px) {
   .paragraph-source {
     width: 90% !important;
-    .footer-content {
-      display: block;
-    }
+ 
   }
 }
 </style>
diff --git a/ui/src/components/ai-chat/component/ParagraphCard.vue b/ui/src/components/ai-chat/component/ParagraphCard.vue
index 9ea77f216..f133e2278 100644
--- a/ui/src/components/ai-chat/component/ParagraphCard.vue
+++ b/ui/src/components/ai-chat/component/ParagraphCard.vue
@@ -17,7 +17,7 @@
     </template>
     <template #footer>
       <div class="footer-content flex-between">
-        <el-text class="flex align-center" style="width: 50%">
+        <el-text class="flex align-center item">
           <img :src="getImgUrl(data?.document_name?.trim())" alt="" width="20" class="mr-4" />
 
           <template v-if="meta?.source_url">
@@ -28,24 +28,24 @@
                   : meta?.source_url
               "
               target="_blank"
-              class="ellipsis"
+              class="ellipsis-1"
               :title="data?.document_name?.trim()"
             >
               {{ data?.document_name?.trim() }}
             </a>
           </template>
           <template v-else>
-            <span class="ellipsis" :title="data?.document_name?.trim()">
+            <span class="ellipsis-1" :title="data?.document_name?.trim()">
               {{ data?.document_name?.trim() }}
             </span>
           </template>
         </el-text>
-        <div class="flex align-center" style="line-height: 32px">
+        <div class="flex align-center item" style="line-height: 32px">
           <AppAvatar class="mr-8 avatar-blue" shape="square" :size="18">
             <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
           </AppAvatar>
 
-          <span class="ellipsis" :title="data?.dataset_name"> {{ data?.dataset_name }}</span>
+          <span class="ellipsis-1" :title="data?.dataset_name"> {{ data?.dataset_name }}</span>
         </div>
       </div>
     </template>
@@ -77,6 +77,13 @@ const parsedMeta = computed(() => {
 const meta = computed(() => (isMetaObject.value ? props.data.meta : parsedMeta.value))
 </script>
 <style lang="scss" scoped>
+.paragraph-source-card {
+  .footer-content {
+    .item {
+      width: 50%;
+    }
+  }
+}
 .paragraph-source-card-height {
   height: 260px;
 }
@@ -85,5 +92,13 @@ const meta = computed(() => (isMetaObject.value ? props.data.meta : parsedMeta.v
   .paragraph-source-card-height {
     height: 285px;
   }
+  .paragraph-source-card {
+    .footer-content {
+      display: block;
+      .item {
+        width: 100%;
+      }
+    }
+  }
 }
 </style>