mirror of https://github.com/1Panel-dev/1Panel
fix: 应用商店，安装应用详情页面，取消路由，显示“全部”和“已安装” tab 页面按钮
zhengkunwang223
zhengkunwang223
parent
cd99173410
commit
a4e7535138
|
|
@ -38,16 +38,16 @@ const appStoreRouter = {
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/apps/detail/:id',
|
||||
name: 'AppDetail',
|
||||
props: true,
|
||||
hidden: true,
|
||||
component: () => import('@/views/app-store/detail/index.vue'),
|
||||
meta: {
|
||||
activeMenu: '/apps',
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: '/apps/detail/:id',
|
||||
// name: 'AppDetail',
|
||||
// props: true,
|
||||
// hidden: true,
|
||||
// component: () => import('@/views/app-store/detail/index.vue'),
|
||||
// meta: {
|
||||
// activeMenu: '/apps',
|
||||
// },
|
||||
// },
|
||||
],
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,82 +1,95 @@
|
|||
<template>
|
||||
<el-card v-loading="loading">
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="2">
|
||||
<el-button @click="sync" type="primary" :plain="true">{{ $t('app.sync') }}</el-button>
|
||||
</el-col>
|
||||
<el-col :span="22">
|
||||
<div style="float: right">
|
||||
<el-input
|
||||
style="display: inline; margin-right: 5px"
|
||||
v-model="req.name"
|
||||
clearable
|
||||
@clear="searchByName('')"
|
||||
></el-input>
|
||||
<el-button
|
||||
style="display: inline; margin-right: 5px"
|
||||
v-model="req.name"
|
||||
@click="searchByName(req.name)"
|
||||
>
|
||||
{{ '搜索' }}
|
||||
<div>
|
||||
<el-card v-loading="loading" v-if="!showDetail">
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="2">
|
||||
<el-button @click="sync" type="primary" :plain="true">{{ $t('app.sync') }}</el-button>
|
||||
</el-col>
|
||||
<el-col :span="22">
|
||||
<div style="float: right">
|
||||
<el-input
|
||||
style="display: inline; margin-right: 5px"
|
||||
v-model="req.name"
|
||||
clearable
|
||||
@clear="searchByName('')"
|
||||
></el-input>
|
||||
<el-button
|
||||
style="display: inline; margin-right: 5px"
|
||||
v-model="req.name"
|
||||
@click="searchByName(req.name)"
|
||||
>
|
||||
{{ $t('app.search') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br />
|
||||
<el-row>
|
||||
<el-button
|
||||
style="margin-right: 5px"
|
||||
@click="changeTag('all')"
|
||||
type="primary"
|
||||
:plain="activeTag !== 'all'"
|
||||
>
|
||||
{{ $t('app.all') }}
|
||||
</el-button>
|
||||
<div style="margin-right: 5px" :span="1" v-for="item in tags" :key="item.key">
|
||||
<el-button @click="changeTag(item.key)" type="primary" :plain="activeTag !== item.key">
|
||||
{{ item.name }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br />
|
||||
<el-row>
|
||||
<el-button style="margin-right: 5px" @click="changeTag('all')" type="primary" :plain="activeTag !== 'all'">
|
||||
{{ $t('app.all') }}
|
||||
</el-button>
|
||||
<div style="margin-right: 5px" :span="1" v-for="item in tags" :key="item.key">
|
||||
<el-button @click="changeTag(item.key)" type="primary" :plain="activeTag !== item.key">
|
||||
{{ item.name }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row :gutter="5">
|
||||
<el-col v-for="(app, index) in apps" :key="index" :span="6">
|
||||
<div @click="getAppDetail(app.id)">
|
||||
<el-card :body-style="{ padding: '0px' }" class="a-card">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="8">
|
||||
<div class="icon">
|
||||
<el-image class="image" :src="'data:image/png;base64,' + app.icon"></el-image>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="a-detail">
|
||||
<div class="d-name">
|
||||
<font size="3" style="font-weight: 700">{{ app.name }}</font>
|
||||
</el-row>
|
||||
<el-row :gutter="5">
|
||||
<el-col v-for="(app, index) in apps" :key="index" :span="6">
|
||||
<div @click="getAppDetail(app.id)">
|
||||
<el-card :body-style="{ padding: '0px' }" class="a-card">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="8">
|
||||
<div class="icon">
|
||||
<el-image class="image" :src="'data:image/png;base64,' + app.icon"></el-image>
|
||||
</div>
|
||||
<div class="d-description">
|
||||
<font size="1">
|
||||
<span>
|
||||
{{ app.shortDesc }}
|
||||
</span>
|
||||
</font>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="a-detail">
|
||||
<div class="d-name">
|
||||
<font size="3" style="font-weight: 700">{{ app.name }}</font>
|
||||
</div>
|
||||
<div class="d-description">
|
||||
<font size="1">
|
||||
<span>
|
||||
{{ app.shortDesc }}
|
||||
</span>
|
||||
</font>
|
||||
</div>
|
||||
<div class="d-tag">
|
||||
<el-tag
|
||||
v-for="(tag, ind) in app.tags"
|
||||
:key="ind"
|
||||
round
|
||||
:colr="getColor(ind)"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-tag">
|
||||
<el-tag v-for="(tag, ind) in app.tags" :key="ind" round :colr="getColor(ind)">
|
||||
{{ tag.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<Detail v-if="showDetail" :id="appId"></Detail>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { App } from '@/api/interface/app';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import router from '@/routers';
|
||||
import { SearchApp, SyncApp } from '@/api/modules/app';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import i18n from '@/lang';
|
||||
import Detail from '../detail/index.vue';
|
||||
|
||||
let req = reactive({
|
||||
name: '',
|
||||
|
|
@ -90,6 +103,8 @@ let tags = ref<App.Tag[]>([]);
|
|||
const colorArr = ['#6495ED', '#54FF9F', '#BEBEBE', '#FFF68F', '#FFFF00', '#8B0000'];
|
||||
let loading = ref(false);
|
||||
let activeTag = ref('all');
|
||||
let showDetail = ref(false);
|
||||
let appId = ref(0);
|
||||
|
||||
const getColor = (index: number) => {
|
||||
return colorArr[index];
|
||||
|
|
@ -103,10 +118,8 @@ const search = async (req: App.AppReq) => {
|
|||
};
|
||||
|
||||
const getAppDetail = (id: number) => {
|
||||
let params: { [key: string]: any } = {
|
||||
id: id,
|
||||
};
|
||||
router.push({ name: 'AppDetail', params });
|
||||
showDetail.value = true;
|
||||
appId.value = id;
|
||||
};
|
||||
|
||||
const sync = () => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<el-card>
|
||||
<LayoutContent :header="$t('app.detail')" :back-name="'App'">
|
||||
<LayoutContent :header="$t('app.detail')" :back-name="'App'" :v-loading="loadingDetail">
|
||||
<div class="brief">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
<el-descriptions-item :label="$t('app.author')">{{ app.author }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div>
|
||||
<el-button :disabled="!appDetail.enable" @click="openInstall" type="primary">
|
||||
<el-button v-if="appDetail.enable" @click="openInstall" type="primary">
|
||||
{{ $t('app.install') }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue