1Panel/frontend/src/views/app-store/detail/index.vue

<template>
    <LayoutContent :title="$t('app.detail')" :reload="true" :v-loading="loadingDetail" :divider="true">
        <template #main>
            <div class="brief">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <el-avatar shape="square" :size="180" :src="'data:image/png;base64,' + app.icon" />
                    </el-col>
                    <el-col :span="20">
                        <div class="detail">
                            <div class="name">
                                <span>{{ app.name }}</span>
                            </div>
                            <div class="description">
                                <span>
                                    {{ app.shortDesc }}
                                </span>
                            </div>
                            <div class="version">
                                <el-form-item :label="$t('app.version')">
                                    <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>
                            </div>

                            <br />
                            <div>
                                <el-alert
                                    style="width: 300px"
                                    v-if="!appDetail.enable"
                                    :title="$t('app.limitHelper')"
                                    type="warning"
                                    show-icon
                                    :closable="false"
                                />
                            </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>
                <el-row>
                    <el-col :span="12">
                        <div class="descriptions">
                            <el-descriptions direction="vertical">
                                <el-descriptions-item :label="$t('app.appWebsite')">
                                    <el-link @click="toLink(app.website)">
                                        <el-icon><OfficeBuilding /></el-icon>
                                        <span>{{ $t('app.appOfficeWebsite') }}</span>
                                    </el-link>
                                </el-descriptions-item>
                                <el-descriptions-item :label="$t('app.doc')">
                                    <el-link @click="toLink(app.document)">
                                        <el-icon><Document /></el-icon>
                                        <span>{{ $t('app.document') }}</span>
                                    </el-link>
                                </el-descriptions-item>
                                <el-descriptions-item label="Github">
                                    <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>
            <div v-loading="loadingDetail">
                <v-md-preview :text="appDetail.readme"></v-md-preview>
            </div>
        </template>
    </LayoutContent>
    <Install ref="installRef"></Install>
</template>

<script lang="ts" setup>
import { GetApp, GetAppDetail } from '@/api/modules/app';
import LayoutContent from '@/layout/layout-content.vue';
import { onMounted, ref } from 'vue';
import Install from './install/index.vue';

interface OperateProps {
    id: number;
}
const props = withDefaults(defineProps<OperateProps>(), {
    id: 0,
});
let app = ref<any>({});
let appDetail = ref<any>({});
let version = ref('');
let loadingDetail = ref(false);
const installRef = ref();

const getApp = () => {
    GetApp(props.id).then((res) => {
        app.value = res.data;
        version.value = app.value.versions[0];
        getDetail(version.value);
    });
};

const getDetail = (version: string) => {
    loadingDetail.value = true;
    GetAppDetail(props.id, version)
        .then((res) => {
            appDetail.value = res.data;
        })
        .finally(() => {
            loadingDetail.value = false;
        });
};

const toLink = (link: string) => {
    window.open(link, '_blank');
};

const openInstall = () => {
    let params = {
        params: appDetail.value.params,
        appDetailId: appDetail.value.id,
    };
    installRef.value.acceptParams(params);
};

onMounted(() => {
    getApp();
});
</script>

<style lang="scss">
.brief {
    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>