Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: update ui of app detail modal #46

Merged
merged 1 commit into from
Nov 24, 2023
Merged

refactor: update ui of app detail modal #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -39,3 +39,8 @@ build {
// build frontend before build
tasks.getByName('compileJava').dependsOn('buildFrontend')
}

halo {
version = '2.10.2'
debug = true
}
4 changes: 2 additions & 2 deletions console/src/components/AppActionButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
79 changes: 48 additions & 31 deletions console/src/components/AppDetailModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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<{
Expand Down Expand Up @@ -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>
Expand All @@ -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="简介">
Expand All @@ -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>
35 changes: 1 addition & 34 deletions console/src/components/detail/DetailSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand Down