From 9cd4319e1c6e961393bc487923f931ab2151fddb Mon Sep 17 00:00:00 2001
From: YuShifan <894402575bt@gmail.com>
Date: Thu, 22 Aug 2024 15:44:42 +0800
Subject: [PATCH] fix(plugin): fix info can not shown totally

---
 src/hooks/Plugins/useRenderPluginForm.ts        |  3 ++-
 src/views/Plugins/PluginDetail.vue              | 13 ++++++++-----
 src/views/Plugins/components/PluginInfo.vue     |  3 ++-
 src/views/Plugins/components/PluginInfoItem.vue |  2 ++
 src/views/Plugins/style/pluginInfo.scss         | 12 ------------
 5 files changed, 14 insertions(+), 19 deletions(-)
 delete mode 100644 src/views/Plugins/style/pluginInfo.scss

diff --git a/src/hooks/Plugins/useRenderPluginForm.ts b/src/hooks/Plugins/useRenderPluginForm.ts
index 66e9c6979..1f1b9eb3e 100644
--- a/src/hooks/Plugins/useRenderPluginForm.ts
+++ b/src/hooks/Plugins/useRenderPluginForm.ts
@@ -151,7 +151,8 @@ export default function usePluginRenderForm(): PluginUI {
   const uiConfigs = ref<PluginUIConfigs | null>(null)
   const i18nConfigs = ref<Record<string, any> | null>(null)
   const schema = ref<AvroSchema | null>(null)
-  const schemaLoading = ref(false)
+  // Default true to prevent UI display before schema loads
+  const schemaLoading = ref(true)
 
   const store = useStore()
 
diff --git a/src/views/Plugins/PluginDetail.vue b/src/views/Plugins/PluginDetail.vue
index ea172b021..e368c7c7a 100644
--- a/src/views/Plugins/PluginDetail.vue
+++ b/src/views/Plugins/PluginDetail.vue
@@ -34,10 +34,14 @@
       <div class="app-wrapper">
         <el-tab-pane :label="tl('infoPlugin')" name="readme" :lazy="true">
           <el-card class="app-card">
-            <div class="plugin-info-bd">
-              <MarkdownContent class="plugin-content" :content="pluginInfo.readme" />
-              <PluginInfo :plugin-data="pluginInfo" />
-            </div>
+            <el-row class="plugin-info-bd" :gutter="20">
+              <el-col :span="16">
+                <MarkdownContent class="plugin-content" :content="pluginInfo.readme" />
+              </el-col>
+              <el-col :span="8">
+                <PluginInfo :plugin-data="pluginInfo" />
+              </el-col>
+            </el-row>
           </el-card>
         </el-tab-pane>
       </div>
@@ -108,7 +112,6 @@ getPluginDetail()
 </script>
 
 <style lang="scss" scoped>
-@import './style/pluginInfo.scss';
 .plugin-detail {
   .el-tag {
     margin-right: 12px;
diff --git a/src/views/Plugins/components/PluginInfo.vue b/src/views/Plugins/components/PluginInfo.vue
index 5d286bca9..fc41b5c60 100644
--- a/src/views/Plugins/components/PluginInfo.vue
+++ b/src/views/Plugins/components/PluginInfo.vue
@@ -69,8 +69,9 @@ const { getPluginAuthorString } = usePluginItem()
 
 <style lang="scss" scoped>
 .plugin-info {
-  padding: 28px 24px;
+  padding: 20px;
   background: linear-gradient(33deg, #1bcba90c 0%, #2369ff0c 46%, #876eff0c 100%);
+  border-radius: 10px;
 }
 .plugin-info-hd {
   margin-top: 0;
diff --git a/src/views/Plugins/components/PluginInfoItem.vue b/src/views/Plugins/components/PluginInfoItem.vue
index d23ed5dd9..c03d0f930 100644
--- a/src/views/Plugins/components/PluginInfoItem.vue
+++ b/src/views/Plugins/components/PluginInfoItem.vue
@@ -35,6 +35,8 @@ defineProps({
   }
   .content {
     color: var(--color-title-primary);
+    word-break: break-all;
+    white-space: pre-wrap;
   }
 }
 </style>
diff --git a/src/views/Plugins/style/pluginInfo.scss b/src/views/Plugins/style/pluginInfo.scss
deleted file mode 100644
index baf09dc6f..000000000
--- a/src/views/Plugins/style/pluginInfo.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.plugin-info-bd {
-  display: flex;
-  .plugin-content {
-    flex-grow: 1;
-    padding-right: 172px;
-    line-height: 24px;
-  }
-  .plugin-info {
-    flex-basis: 492px;
-    flex-shrink: 0;
-  }
-}