perf: improve plugin detail page ui

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/views/interface/themes/ThemeDetail.vue

@@ -134,7 +134,7 @@ const handleChangeTheme = (theme: any) => {
             { id: 'detail', label: '详情' },
             { id: 'settings', label: '基础设置' },
           ]"
-          class="w-full"
+          class="w-full !rounded-none"
           type="outline"
         ></VTabbar>
       </template>

src/views/system/plugins/PluginDetail.vue

@@ -1,10 +1,15 @@
 <script lang="ts" setup>
 import { VPageHeader } from "@/components/base/header";
 import { VButton } from "@/components/base/button";
+import { VTabbar } from "@/components/base/tabs";
 import { useRoute } from "vue-router";
 import { plugins } from "./plugins-mock";
 import { VTag } from "@/components/base/tag";
+import { VInput } from "@/components/base/input";
 import { VCard } from "@/components/base/card";
+import { ref } from "vue";
+
+const pluginActiveId = ref("detail");
 
 const { params } = useRoute();
 
@@ -27,9 +32,24 @@ console.log(plugin);
 
   <div class="m-0 md:m-4">
     <VCard :body-class="['!p-0']">
-      <div class="px-4 py-5 sm:px-6">
+      <template #header>
+        <VTabbar
+          v-model:active-id="pluginActiveId"
+          :items="[
+            { id: 'detail', label: '详情' },
+            { id: 'settings', label: '基础设置' },
+          ]"
+          class="w-full !rounded-none"
+          type="outline"
+        ></VTabbar>
+      </template>
+
+      <div v-if="pluginActiveId === 'detail'">
+        <div class="px-4 py-4 sm:px-6">
           <h3 class="text-lg font-medium leading-6 text-gray-900">插件信息</h3>
-        <p class="mt-1 flex max-w-2xl items-center gap-2 text-sm text-gray-500">
+          <p
+            class="mt-1 flex max-w-2xl items-center gap-2 text-sm text-gray-500"
+          >
             <span>{{ plugin.spec.version }}</span>
             <VTag>
               {{ plugin.metadata.enabled ? "已启用" : "未启用" }}
@@ -96,10 +116,54 @@ console.log(plugin);
               class="bg-white px-4 py-5 hover:bg-gray-50 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:col-span-2 sm:mt-0">无</dd>
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                无
+              </dd>
             </div>
           </dl>
         </div>
+      </div>
+
+      <div v-if="pluginActiveId === 'settings'">
+        <form>
+          <div class="space-y-6 divide-y divide-gray-100 sm:space-y-5">
+            <div
+              class="px-4 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5"
+            >
+              <label
+                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+              >
+                设置项 1
+              </label>
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
+                <div class="flex max-w-lg shadow-sm">
+                  <VInput />
+                </div>
+              </div>
+            </div>
+            <div
+              class="px-4 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5"
+            >
+              <label
+                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+              >
+                设置项 2
+              </label>
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
+                <div class="flex max-w-lg shadow-sm">
+                  <VInput />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="pt-5">
+            <div class="flex justify-start p-4">
+              <VButton type="secondary"> 保存</VButton>
+            </div>
+          </div>
+        </form>
+      </div>
     </VCard>
   </div>
 </template>