refactor: update ui of app detail modal (#46)

/kind improvement 更新应用详情页面的布局，与 Halo 官方网页保持一致。 <img width="1920" alt="图片" src="https://github.com/halo-dev/plugin-app-store/assets/21301288/2dd9f1d4-3ca2-47cd-bdce-4c79e855f5ee"> <img width="1920" alt="图片" src="https://github.com/halo-dev/plugin-app-store/assets/21301288/6bac2912-b7b4-4c63-965b-a5d3b6808b07"> ```release-note 更新应用详情页面的布局，与 Halo 官方网页保持一致。 ```
halo-dev · Nov 24, 2023 · e0bb8ae · e0bb8ae
1 parent 2bdf16a
commit e0bb8ae
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 68 deletions.
diff --git a/build.gradle b/build.gradle
@@ -2,7 +2,7 @@ plugins {
     id 'java'
     id "com.github.node-gradle.node" version "5.0.0"
     id "io.freefair.lombok" version "8.0.1"
-    id "run.halo.plugin.devtools" version "0.0.5"
+    id "run.halo.plugin.devtools" version "0.0.7"
 }
 
 group 'run.halo.appstore'
@@ -39,3 +39,8 @@ build {
     // build frontend before build
     tasks.getByName('compileJava').dependsOn('buildFrontend')
 }
+
+halo {
+    version = '2.10.2'
+    debug = true
+}
diff --git a/console/src/components/AppActionButton.vue b/console/src/components/AppActionButton.vue
@@ -38,15 +38,15 @@ const actions = computed((): Action[] => {
   return [
     {
       label: installing?.value ? "安装中" : "安装",
-      type: "default",
+      type: "primary",
       available: !hasInstalled.value && isSatisfies.value && app.value?.downloadable,
       onClick: handleInstall,
       loading: installing?.value,
       disabled: false,
     },
     {
       label: `￥${(app.value?.application.spec.priceConfig?.oneTimePrice || 0) / 100}`,
-      type: "default",
+      type: "primary",
       available: app.value?.availableForPurchase && !hasInstalled.value,
       onClick: () => handleOpenCreateOrderPage(),
       loading: false,

diff --git a/console/src/components/AppDetailModal.vue b/console/src/components/AppDetailModal.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { IconLink, VLoading, VModal, VSpace, VTabItem, VTabs } from "@halo-dev/components";
+import { IconLink, VAvatar, VButton, VLoading, VModal, VSpace, VTabItem, VTabs } from "@halo-dev/components";
 import { useQuery } from "@tanstack/vue-query";
 import { ref, watch } from "vue";
 import { computed } from "vue";
@@ -13,6 +13,8 @@ import DetailReleases from "./detail/DetailReleases.vue";
 import AppVersionCheckBar from "./AppVersionCheckBar.vue";
 import AppActionButton from "./AppActionButton.vue";
 import TablerCircleFilled from "~icons/tabler/circle-filled";
+import TablerGraph from "~icons/tabler/graph";
+import TablerDownload from "~icons/tabler/download";
 
 const props = withDefaults(
   defineProps<{
@@ -106,6 +108,7 @@ watch(
     :layer-closable="true"
     height="calc(100vh - 20px)"
     :mount-to-body="true"
+    :body-class="['!as-p-0']"
     @update:visible="onVisibleChange"
   >
     <template #actions>
@@ -123,36 +126,53 @@ watch(
     </template>
     <div>
       <VLoading v-if="isLoading || isFetching" />
-      <div v-else-if="appDetail" class="as-flex as-flex-col-reverse as-gap-5 sm:as-grid sm:as-grid-cols-8">
-        <DetailSidebar :app="appDetail" />
-        <div class="as-col-span-5 lg:as-col-span-6">
-          <div class="as-flex as-flex-wrap as-items-center as-gap-4">
-            <div v-if="appDetail.application.spec.logo" class="as-flex as-justify-center">
-              <img
-                class="as-h-16 as-w-16 as-rounded"
-                :src="prependDomain(appDetail.application.spec.logo)"
-                :alt="appDetail.application.spec.displayName"
-              />
+      <div v-else-if="appDetail">
+        <div class="as-flex as-flex-wrap as-items-start as-gap-8 as-bg-gray-100 as-px-4 as-py-8">
+          <div v-if="appDetail.application.spec.logo" class="as-flex as-justify-center">
+            <VAvatar
+              width="5rem"
+              height="5rem"
+              :src="prependDomain(appDetail.application.spec.logo)"
+              :alt="appDetail.application.spec.displayName"
+            />
+          </div>
+          <div class="as-flex as-flex-col as-gap-3">
+            <div class="as-flex as-flex-wrap as-items-center as-gap-3">
+              <h1 class="as-text-xl as-font-semibold as-text-gray-900">
+                {{ appDetail.application.spec.displayName }}
+              </h1>
+              <span
+                v-if="app?.bought"
+                class="as-inline-flex as-items-center as-gap-x-1.5 as-rounded-full as-bg-purple-100 as-px-1.5 as-py-0.5 as-text-xs as-font-medium as-text-purple-700"
+              >
+                <TablerCircleFilled class="!as-h-2 !as-w-2 as-text-purple-500" />
+                已购买
+              </span>
             </div>
-            <div>
-              <div class="as-flex as-flex-wrap as-items-center as-gap-3">
-                <h1 class="as-text-xl as-font-medium as-text-gray-900">
-                  {{ appDetail.application.spec.displayName }}
-                </h1>
-                <span
-                  v-if="app?.bought"
-                  class="as-inline-flex as-items-center as-gap-x-1.5 as-rounded-full as-bg-purple-100 as-px-1.5 as-py-0.5 as-text-xs as-font-medium as-text-purple-700"
-                >
-                  <TablerCircleFilled class="!as-h-2 !as-w-2 as-text-purple-500" />
-                  已购买
-                </span>
+            <div class="as-flex as-items-center as-space-x-4">
+              <div class="as-inline-flex as-items-center as-space-x-1.5" title="浏览量">
+                <TablerGraph class="as-text-green-600" />
+                <span class="as-text-xs as-tabular-nums">{{ appDetail.views || 0 }}</span>
+              </div>
+              <div class="as-inline-flex as-items-center as-space-x-1.5" title="下载量">
+                <TablerDownload class="as-text-indigo-600" />
+                <span class="as-text-xs as-tabular-nums">{{ appDetail.downloads || 0 }}</span>
               </div>
-              <p v-if="appDetail.application.spec.description" class="as-mt-2 as-text-sm as-text-gray-600">
-                {{ appDetail.application.spec.description }}
-              </p>
+            </div>
+            <p v-if="appDetail.application.spec.description" class="as-text-sm as-text-gray-600">
+              {{ appDetail.application.spec.description }}
+            </p>
+            <div>
+              <VSpace>
+                <AppActionButton :app="app" />
+                <AppVersionCheckBar :app="app" />
+              </VSpace>
             </div>
           </div>
-          <div class="as-mt-5">
+        </div>
+        <div class="as-flex as-flex-col-reverse as-gap-5 as-px-4 as-py-3 sm:as-grid sm:as-grid-cols-8">
+          <DetailSidebar :app="appDetail" />
+          <div class="as-col-span-5 lg:as-col-span-6">
             <div id="app-detail-tabs">
               <VTabs v-model:active-id="activeId">
                 <VTabItem id="readme" label="简介">
@@ -168,10 +188,7 @@ watch(
       </div>
     </div>
     <template #footer>
-      <VSpace>
-        <AppActionButton :app="app" />
-        <AppVersionCheckBar :app="app" />
-      </VSpace>
+      <VButton @click="onVisibleChange(false)">关闭</VButton>
     </template>
   </VModal>
 </template>
diff --git a/console/src/components/detail/DetailSidebar.vue b/console/src/components/detail/DetailSidebar.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { ApplicationDetail } from "@/types";
 import { relativeTimeTo } from "@/utils/date";
-import TablerGraph from "~icons/tabler/graph";
-import TablerDownload from "~icons/tabler/download";
 withDefaults(
   defineProps<{
     app?: ApplicationDetail;
@@ -14,7 +12,7 @@ withDefaults(
 </script>
 
 <template>
-  <aside v-if="app" class="as-col-span-3 sm:as-sticky sm:as-top-0 sm:as-h-screen lg:as-col-span-2">
+  <aside v-if="app" class="as-col-span-3 sm:as-sticky sm:as-top-3 sm:as-h-screen lg:as-col-span-2">
     <ul role="list" class="as-divide-y as-divide-gray-200">
       <li class="as-flex as-pb-4">
         <div class="as-space-y-2">
@@ -96,37 +94,6 @@ withDefaults(
           </div>
         </div>
       </li>
-      <li class="as-flex as-py-4">
-        <div class="as-w-full as-space-y-2">
-          <h2 class="as-text-base as-font-medium as-text-gray-900">数据</h2>
-          <div>
-            <div class="as-grid as-grid-cols-2 as-rounded-lg as-border">
-              <div class="as-flex as-border-r as-p-3">
-                <div class="as-flex as-flex-col as-gap-1">
-                  <div class="as-inline-flex as-items-center as-gap-1">
-                    <TablerGraph class="as-text-green-600" />
-                    <span class="as-text-xs as-text-gray-500">浏览</span>
-                  </div>
-                  <span class="as-font-semibold as-tabular-nums">
-                    {{ app.views }}
-                  </span>
-                </div>
-              </div>
-              <div class="as-flex as-p-3">
-                <div class="as-flex as-flex-col as-gap-1">
-                  <div class="as-inline-flex as-items-center as-gap-1">
-                    <TablerDownload class="as-text-indigo-600" />
-                    <span class="as-text-xs as-text-gray-500">下载</span>
-                  </div>
-                  <span class="as-font-semibold as-tabular-nums">
-                    {{ app.downloads || 0 }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </li>
       <li class="as-flex as-py-4">
         <div class="as-space-y-2">
           <h2 class="as-text-base as-font-medium as-text-gray-900">更多</h2>