From 7d4f0ff11f98309505f04e0e6f073acf661f247d Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 24 May 2022 11:14:28 +0800
Subject: [PATCH] perf: improve plugin detail page ui

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/views/system/plugins/PluginDetail.vue | 35 +++++++++++------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/views/system/plugins/PluginDetail.vue b/src/views/system/plugins/PluginDetail.vue
index e4165d92..da91bb15 100644
--- a/src/views/system/plugins/PluginDetail.vue
+++ b/src/views/system/plugins/PluginDetail.vue
@@ -29,8 +29,11 @@ console.log(plugin);
     <VCard :body-class="['!p-0']">
       <div class="px-4 py-5 sm:px-6">
         <h3 class="text-lg leading-6 font-medium text-gray-900">插件信息</h3>
-        <p class="mt-1 max-w-2xl text-sm text-gray-500">
-          {{ plugin.spec.version }}
+        <p class="mt-1 max-w-2xl text-sm text-gray-500 flex items-center gap-2">
+          <span>{{ plugin.spec.version }}</span>
+          <VTag>
+            {{ plugin.metadata.enabled ? "已启用" : "未启用" }}
+          </VTag>
         </p>
       </div>
       <div class="border-t border-gray-200">
@@ -38,25 +41,15 @@ console.log(plugin);
           <div
             class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
-            <dt class="text-sm font-medium text-gray-500">名称</dt>
+            <dt class="text-sm font-medium text-gray-900">名称</dt>
             <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
               {{ plugin.metadata.name }}
             </dd>
           </div>
-          <div
-            class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-500">是否启用</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-              <VTag>
-                {{ plugin.metadata.enabled ? "已启用" : "未启用" }}
-              </VTag>
-            </dd>
-          </div>
           <div
             class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
-            <dt class="text-sm font-medium text-gray-500">插件类别</dt>
+            <dt class="text-sm font-medium text-gray-900">插件类别</dt>
             <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
               <VTag>
                 extensions.halo.run/category/{{
@@ -68,7 +61,7 @@ console.log(plugin);
           <div
             class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
-            <dt class="text-sm font-medium text-gray-500">版本</dt>
+            <dt class="text-sm font-medium text-gray-900">版本</dt>
             <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
               {{ plugin.spec.version }}
             </dd>
@@ -76,7 +69,7 @@ console.log(plugin);
           <div
             class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
-            <dt class="text-sm font-medium text-gray-500">Halo 版本要求</dt>
+            <dt class="text-sm font-medium text-gray-900">Halo 版本要求</dt>
             <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
               {{ plugin.spec.requires }}
             </dd>
@@ -84,7 +77,7 @@ console.log(plugin);
           <div
             class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
-            <dt class="text-sm font-medium text-gray-500">提供方</dt>
+            <dt class="text-sm font-medium text-gray-900">提供方</dt>
             <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
               <a :href="plugin.spec.homepage" target="_blank">
                 @{{ plugin.spec.author }}
@@ -94,11 +87,17 @@ console.log(plugin);
           <div
             class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
-            <dt class="text-sm font-medium text-gray-500">协议</dt>
+            <dt class="text-sm font-medium text-gray-900">协议</dt>
             <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
               {{ plugin.spec.license }}
             </dd>
           </div>
+          <div
+            class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+          >
+            <dt class="text-sm font-medium text-gray-900">模型定义</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">无</dd>
+          </div>
         </dl>
       </div>
     </VCard>