perf: improve plugin detail page ui

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-05-24 11:14:28 +08:00
parent 90d2ddddca
commit 7d4f0ff11f
1 changed files with 17 additions and 18 deletions

View File

@ -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>