1
0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-21 09:19:16 +08:00

178 lines
6.1 KiB
Vue
Raw Normal View History

<template>
<LayoutContent :title="$t('app.detail')" :reload="true" :v-loading="loadingDetail" :divider="true">
2023-01-12 15:12:01 +08:00
<template #main>
2022-11-28 13:50:53 +08:00
<div class="brief">
<el-row :gutter="20">
2023-02-01 22:19:00 +08:00
<div>
<el-col :span="3">
<el-avatar shape="square" :size="180" :src="'data:image/png;base64,' + app.icon" />
</el-col>
</div>
2023-01-31 14:02:29 +08:00
<el-col :span="18">
<div class="detail">
<div class="name">
<span>{{ app.name }}</span>
2022-11-28 13:50:53 +08:00
</div>
<div class="description">
2022-11-28 13:50:53 +08:00
<span>
2022-12-08 16:00:59 +08:00
{{ app.shortDesc }}
2022-11-28 13:50:53 +08:00
</span>
</div>
<div class="version">
<el-form-item :label="$t('app.version')">
2022-11-28 13:50:53 +08:00
<el-select v-model="version" @change="getDetail(version)">
<el-option
v-for="(v, index) in app.versions"
:key="index"
:value="v"
:label="v"
>
{{ v }}
</el-option>
</el-select>
</el-form-item>
2022-12-01 16:45:00 +08:00
</div>
2022-12-01 16:45:00 +08:00
<br />
<div>
<el-alert
style="width: 300px"
v-if="!appDetail.enable"
:title="$t('app.limitHelper')"
type="warning"
show-icon
:closable="false"
/>
2022-11-28 13:50:53 +08:00
</div>
<div>
<el-button round v-if="appDetail.enable" @click="openInstall" type="primary">
{{ $t('app.install') }}
</el-button>
</div>
</div>
</el-col>
</el-row>
<div class="divider"></div>
2023-02-01 22:19:00 +08:00
<div>
<el-row>
<el-col :span="12">
<div class="descriptions">
<el-descriptions direction="vertical">
<el-descriptions-item>
<el-link @click="toLink(app.website)">
<el-icon><OfficeBuilding /></el-icon>
<span>{{ $t('app.appOfficeWebsite') }}</span>
</el-link>
</el-descriptions-item>
<el-descriptions-item>
<el-link @click="toLink(app.document)">
<el-icon><Document /></el-icon>
<span>{{ $t('app.document') }}</span>
</el-link>
</el-descriptions-item>
<el-descriptions-item>
<el-link @click="toLink(app.github)">
<el-icon><Link /></el-icon>
<span>{{ $t('app.github') }}</span>
</el-link>
</el-descriptions-item>
</el-descriptions>
</div>
</el-col>
</el-row>
</div>
2022-11-28 13:50:53 +08:00
</div>
2023-01-31 14:02:29 +08:00
<div v-loading="loadingDetail" style="margin-left: -32px">
2022-11-28 13:50:53 +08:00
<v-md-preview :text="appDetail.readme"></v-md-preview>
</div>
2023-01-12 15:12:01 +08:00
</template>
</LayoutContent>
<Install ref="installRef"></Install>
</template>
<script lang="ts" setup>
2022-09-23 16:33:55 +08:00
import { GetApp, GetAppDetail } from '@/api/modules/app';
import LayoutContent from '@/layout/layout-content.vue';
2022-09-23 16:33:55 +08:00
import { onMounted, ref } from 'vue';
2022-11-02 15:19:14 +08:00
import Install from './install/index.vue';
2022-09-23 16:33:55 +08:00
interface OperateProps {
id: number;
}
const props = withDefaults(defineProps<OperateProps>(), {
id: 0,
});
2022-09-23 16:33:55 +08:00
let app = ref<any>({});
let appDetail = ref<any>({});
let version = ref('');
let loadingDetail = ref(false);
const installRef = ref();
2022-09-23 16:33:55 +08:00
const getApp = () => {
GetApp(props.id).then((res) => {
app.value = res.data;
version.value = app.value.versions[0];
getDetail(version.value);
});
};
2022-09-23 16:33:55 +08:00
const getDetail = (version: string) => {
loadingDetail.value = true;
GetAppDetail(props.id, version)
.then((res) => {
appDetail.value = res.data;
})
.finally(() => {
loadingDetail.value = false;
});
};
2022-09-23 16:33:55 +08:00
const toLink = (link: string) => {
window.open(link, '_blank');
};
2022-09-23 16:33:55 +08:00
const openInstall = () => {
let params = {
params: appDetail.value.params,
appDetailId: appDetail.value.id,
};
installRef.value.acceptParams(params);
};
2022-09-23 16:33:55 +08:00
onMounted(() => {
getApp();
});
</script>
<style lang="scss">
.brief {
2023-02-01 22:19:00 +08:00
// height: 30vh;
.name {
span {
font-weight: 500;
font-size: 18px;
}
}
.description {
margin-top: 10px;
span {
font-size: 14px;
color: #646a73;
}
}
.version {
margin-top: 10px;
}
.descriptions {
margin-top: 5px;
}
}
.el-avatar {
--el-avatar-bg-color: #ffffff;
}
</style>