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