Skip to content

Commit

Permalink
format
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhanghengxin
zhanghengxin committed Mar 13, 2024
1 parent 7d257ea commit 8b45c9e
Show file tree
Hide file tree
Showing 7 changed files with 1,712 additions and 1,243 deletions.
184 changes: 114 additions & 70 deletions main/src/components/Apps/AppDetailInfo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,38 +14,73 @@
<!-- App Info Header Start -->
<div class="app-header is-flex pb-4 b-line">
<div class="header-icon mr-5">
<b-image :key="appDetailData.icon" :src="appDetailData.icon"
:src-fallback="require('@/assets/img/app/default.svg')" class="is-128x128 icon-shadow"
webp-fallback=".jpg"></b-image>
<b-image
:key="appDetailData.icon"
:src="appDetailData.icon"
:src-fallback="require('@/assets/img/app/default.svg')"
class="is-128x128 icon-shadow"
webp-fallback=".jpg"
></b-image>
</div>
<div class="is-flex-grow-1 is-flex is-align-items-center">
<div>
<h4 class="title store-title is-4 ">{{ i18n(appDetailData.title) }}</h4>
<p class="subtitle is-size-14px two-line mb-3">{{
i18n(appDetailData.tagline)
}}</p>
<h4 class="title store-title is-4">{{ i18n(appDetailData.title) }}</h4>
<p class="subtitle is-size-14px two-line mb-3">{{ i18n(appDetailData.tagline) }}</p>
<p class="description mb-2">
<b-button v-if="installedList.includes(appDetailData.id)"
:loading="appDetailData.id == currentInstallId" rounded size="is-normal" type="is-primary"
@click="openThirdContainerByAppInfo(appDetailData)">
<b-button
v-if="installedList.includes(appDetailData.id)"
:loading="appDetailData.id == currentInstallId"
rounded
size="is-normal"
type="is-primary"
@click="openThirdContainerByAppInfo(appDetailData)"
>
{{ $t('Open') }}
</b-button>
<b-button v-else :disabled="unusable" :loading="appDetailData.id == currentInstallId" rounded
size="is-normal" type="is-primary"
@click="$emit('install', appDetailData.id, appDetailData); $messageBus('appstore_install', i18n(appDetailData.title))">
{{ $t('Install') }}
</b-button>
<b-dropdown v-else :triggers="['hover', 'click']">
<template #trigger>
<b-button
:disabled="unusable"
:loading="appDetailData.id == currentInstallId"
rounded
size="is-normal"
type="is-primary"
@click="
$emit('install', appDetailData.id, appDetailData)
$messageBus('appstore_install', i18n(appDetailData.title))
"
>
{{ $t('Install') }}
</b-button>
</template>
<b-button
:disabled="unusable"
:loading="appDetailData.id == currentInstallId"
rounded
size="is-normal"
type="is-primary"
@click="openConfigPanle"
>
{{ $t('Custom Install') }}
</b-button>
</b-dropdown>
</p>

<p v-if="unusable"
<p
v-if="unusable"
class="has-background-red-tertiary has-text-red has-text-full-04 _is-normal is-flex is-align-items-center font pr-2"
style="width: fit-content;height: 1.5rem;border-radius: 0.25rem">
style="width: fit-content; height: 1.5rem; border-radius: 0.25rem"
>
<label class="is-flex ml-2 mr-1">
<b-icon class="is-16x16" custom-size="casa-19px" icon="close-outline" pack="casa"></b-icon>
<b-icon
class="is-16x16"
custom-size="casa-19px"
icon="close-outline"
pack="casa"
></b-icon>
</label>
{{ $t('Not compatible with {arch} devices.', { arch: archTitle }) }}
</p>

</div>
</div>
</div>
Expand All @@ -72,9 +107,9 @@
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading "><span class="is-hidden-mobile">{{
$t('REQUIRE')
}} </span>{{ $t('MEMORY') }}</p>
<p class="heading">
<span class="is-hidden-mobile">{{ $t('REQUIRE') }} </span>{{ $t('MEMORY') }}
</p>
<p class="title has-text-weight-normal">{{ appDetailData.min_memory }}</p>
<p class="footing is-size-14px">MB</p>
</div>
Expand All @@ -84,13 +119,23 @@

<!-- App Info Slider Start -->
<div v-if="showDetailSwiper" class="is-relative">
<swiper ref="infoSwiper" :options="swiperOptions" class="swiper swiper-responsive-breakpoints"
@observer-update="updateSwiper" @ready="handleSwiperReadied">
<swiper
ref="infoSwiper"
:options="swiperOptions"
class="swiper swiper-responsive-breakpoints"
@observer-update="updateSwiper"
@ready="handleSwiperReadied"
>
<swiper-slide v-for="item in appDetailData.screenshot_link" :key="'sc' + item">
<div class="gap">
<b-image :src="item" :src-fallback="require('@/assets/img/app/swiper_placeholder.png')"
class="border-8 is-clickable " placeholder ratio="16by9"
@click.native="zoomScreenshot(item)"></b-image>
<b-image
:src="item"
:src-fallback="require('@/assets/img/app/swiper_placeholder.png')"
class="border-8 is-clickable"
placeholder
ratio="16by9"
@click.native="zoomScreenshot(item)"
></b-image>
</div>
</swiper-slide>
</swiper>
Expand All @@ -106,42 +151,39 @@
</VMdEditor>
</div>
<!-- App Info End -->

</section>
</div>
</template>

<script>
import VMdEditor from '@kangc/v-md-editor';
import VMdEditor from '@kangc/v-md-editor'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import business_OpenThirdApp from "@/mixins/app/Business_OpenThirdApp";
import business_ShowNewAppTag from "@/mixins/app/Business_ShowNewAppTag";
import commonI18n from "@/mixins/base/common-i18n";
import app from "@/App.vue";
import business_OpenThirdApp from '@/mixins/app/Business_OpenThirdApp'
import business_ShowNewAppTag from '@/mixins/app/Business_ShowNewAppTag'
import commonI18n from '@/mixins/base/common-i18n'
import app from '@/App.vue'
import YAML from 'yaml'
export default {
name: "AppDetailInfo.vue",
name: 'AppDetailInfo.vue',
components: { VMdEditor, Swiper, SwiperSlide },
mixins: [business_ShowNewAppTag, business_OpenThirdApp, commonI18n],
props: {
appDetailData: {
type: Object,
default: () => {
}
default: () => {}
},
installedList: {
type: Array,
default: () => {
}
default: () => {}
},
currentInstallId: {
type: String,
default: ""
default: ''
},
arch: {
type: String,
default: ""
default: ''
},
showDetailSwiper: {
type: Boolean,
Expand All @@ -153,26 +195,25 @@ export default {
},
close: {
type: Function,
default: () => {
}
default: () => {}
}
},
computed: {
app() {
app () {
return app
},
archTitle() {
archTitle () {
// 如果是 arm 默认显示 armv7
if (this.arch === 'arm') {
return 'armv7'
}
return this.arch
},
unusable() {
return !this.appDetailData.architectures?.includes(this.arch);
unusable () {
return !this.appDetailData.architectures?.includes(this.arch)
}
},
data() {
data () {
return {
//Image List Swiper
disPrev: false,
Expand All @@ -187,7 +228,7 @@ export default {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
disabledClass: 'swiper-button-disabled',
disabledClass: 'swiper-button-disabled'
},
breakpoints: {
640: {
Expand All @@ -201,40 +242,45 @@ export default {
}
},
on: {
breakpoint: (swiper) => {
this.slidesPerView = swiper.slidesPerView;
breakpoint: swiper => {
this.slidesPerView = swiper.slidesPerView
}
}
},
}
}
},
methods: {
updateSwiper() {
this.swiper.slideTo(0, 0, false);
updateSwiper () {
this.swiper.slideTo(0, 0, false)
},
handleSwiperReadied(swiper) {
this.swiper = swiper;
handleSwiperReadied (swiper) {
this.swiper = swiper
},
getCateIcon(name) {
getCateIcon (name) {
let tempO = this.cateMenu.find(item => item.name == name) || { font: 'apps' }
return tempO.font;
return tempO.font
},
zoomScreenshot(img) {
const customVNode = this.$createElement('div', {
class: 'modal-content'
}, [
this.$createElement('img', { attrs: { src: img } })
]);
zoomScreenshot (img) {
const customVNode = this.$createElement(
'div',
{
class: 'modal-content'
},
[this.$createElement('img', { attrs: { src: img } })]
)
this.$buefy.modal.open({
content: [customVNode],
customClass: '_zoom-screenshot',
fullScreen: true,
hasModalCard: true,
destroyOnHide: true,
animation: "zoom-in",
canCancel: ["outside", "x"]
});
animation: 'zoom-in',
canCancel: ['outside', 'x']
})
},
openConfigPanle () {
this.$emit('switchAppConfigContent', YAML.stringify(this.appDetailData.compose))
}
}
}
Expand All @@ -243,7 +289,6 @@ export default {
<style lang="scss">
//The underscore "_" here represents that it is only used in this context and needs to be placed in the modularized CSS later.
.modal._zoom-screenshot {
.animation-content {
display: flex;
align-items: center;
Expand All @@ -270,12 +315,11 @@ export default {
background: #fff;
}
}
}
.app-detial .modal-card-body .github-markdown-body {
padding: 1rem 0 0 0;
font-size: 0.875rem;
line-height: 1.25rem;
}
</style>
</style>
Loading

0 comments on commit 8b45c9e

Please sign in to comment.