mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-01-19 16:29:17 +08:00
feat: 修改应用商店 已安装列表
This commit is contained in:
zhengkunwang223
zhengkunwang223
parent
2ed62864b8
commit
45cda28d01
10
frontend/components.d.ts
vendored
10
frontend/components.d.ts
vendored
@ -21,7 +21,7 @@ declare module 'vue' {
|
||||
ElAside: typeof import('element-plus/es')['ElAside']
|
||||
ElAvatar: typeof import('element-plus/es')['ElAvatar']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup'];
|
||||
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
|
||||
ElCard: typeof import('element-plus/es')['ElCard']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
|
||||
@ -37,6 +37,9 @@ declare module 'vue' {
|
||||
ElDivider: typeof import('element-plus/es')['ElDivider']
|
||||
ElDraw: typeof import('element-plus/es')['ElDraw']
|
||||
ElDrawer: typeof import('element-plus/es')['ElDrawer']
|
||||
ElDropdown: typeof import('element-plus/es')['ElDropdown']
|
||||
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
|
||||
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
|
||||
ElFooter: typeof import('element-plus/es')['ElFooter']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
@ -44,7 +47,7 @@ declare module 'vue' {
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElImage: typeof import('element-plus/es')['ElImage']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElInputNumber: typeof import('element-plus/es')['ElInputNumber'];
|
||||
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
|
||||
ElLink: typeof import('element-plus/es')['ElLink']
|
||||
ElMain: typeof import('element-plus/es')['ElMain']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
@ -66,10 +69,13 @@ declare module 'vue' {
|
||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||
ElTree: typeof import('element-plus/es')['ElTree']
|
||||
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||
FileList: typeof import('./src/components/file-list/index.vue')['default']
|
||||
FileRole: typeof import('./src/components/file-role/index.vue')['default']
|
||||
Footer: typeof import('./src/components/app-layout/footer/index.vue')['default']
|
||||
InfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
|
||||
Loading: typeof import('element-plus/es')['ElLoadingDirective']
|
||||
Logo: typeof import('./src/components/app-layout/menu/components/Logo.vue')['default']
|
||||
Menu: typeof import('./src/components/app-layout/menu/index.vue')['default']
|
||||
|
||||
@ -855,6 +855,7 @@ export default {
|
||||
toInstall: '去安装',
|
||||
param: '参数配置',
|
||||
syncAppList: '更新应用列表',
|
||||
syncAppListSuccess: '更新成功',
|
||||
},
|
||||
website: {
|
||||
website: '网站',
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<template>
|
||||
<LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('website.website')">
|
||||
<LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('app.app')">
|
||||
<template #toolbar>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="20">
|
||||
<div>
|
||||
<el-button @click="changeTag('all')" type="primary" :plain="activeTag !== 'all'">
|
||||
{{ $t('app.all') }}
|
||||
</el-button>
|
||||
@ -17,12 +16,9 @@
|
||||
{{ item.name }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div style="float: right">
|
||||
<el-input
|
||||
class="table-button"
|
||||
v-model="req.name"
|
||||
clearable
|
||||
@clear="searchByName('')"
|
||||
@ -31,7 +27,6 @@
|
||||
@blur="searchByName(req.name)"
|
||||
:placeholder="$t('commons.button.search')"
|
||||
></el-input>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
@ -42,25 +37,33 @@
|
||||
<div class="divider"></div>
|
||||
<el-row :gutter="5">
|
||||
<el-col v-for="(app, index) in apps" :key="index" :span="8">
|
||||
<div class="a-card">
|
||||
<div class="app-card">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="5">
|
||||
<div class="icon">
|
||||
<div class="app-icon">
|
||||
<el-avatar shape="square" :size="60" :src="'data:image/png;base64,' + app.icon" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<div class="a-detail">
|
||||
<div class="d-name">
|
||||
<span class="name">{{ app.name }}</span>
|
||||
<el-button class="h-button" round @click="getAppDetail(app.id)">安装</el-button>
|
||||
<div class="app-content">
|
||||
<div class="app-header">
|
||||
<span class="app-title">{{ app.name }}</span>
|
||||
<el-button
|
||||
class="app-button"
|
||||
type="primary"
|
||||
plain
|
||||
round
|
||||
@click="getAppDetail(app.id)"
|
||||
>
|
||||
安装
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="d-description">
|
||||
<span class="description">
|
||||
<div class="app-desc">
|
||||
<span class="desc">
|
||||
{{ app.shortDesc }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-tag" style="margin-top: 5px">
|
||||
<div class="app-tag">
|
||||
<el-tag v-for="(tag, ind) in app.tags" :key="ind" :colr="getColor(ind)">
|
||||
{{ tag.name }}
|
||||
</el-tag>
|
||||
@ -153,67 +156,60 @@ onMounted(() => {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.a-card {
|
||||
.app-card {
|
||||
height: 120px;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
|
||||
.icon {
|
||||
.app-icon {
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
width: 80px;
|
||||
height: 80%;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
.image {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.a-detail {
|
||||
.app-content {
|
||||
margin-top: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.d-name {
|
||||
.app-header {
|
||||
height: 20%;
|
||||
.name {
|
||||
.app-title {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #1f2329;
|
||||
}
|
||||
.h-button {
|
||||
.app-button {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.d-description {
|
||||
.app-desc {
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
.description {
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
color: #646a73;
|
||||
}
|
||||
}
|
||||
|
||||
.app-tag {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.a-card:hover {
|
||||
.app-card:hover {
|
||||
background-color: rgba(0, 94, 235, 0.03);
|
||||
}
|
||||
|
||||
.table-button {
|
||||
display: inline;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tag-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
@ -221,6 +217,6 @@ onMounted(() => {
|
||||
.divider {
|
||||
margin-top: 5px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
}
|
||||
</style>
|
||||
|
||||
75
frontend/src/views/app-store/index.scss
Normal file
75
frontend/src/views/app-store/index.scss
Normal file
@ -0,0 +1,75 @@
|
||||
.app-card {
|
||||
height: 140px;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
|
||||
.icon {
|
||||
margin-top: 10px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.a-detail {
|
||||
margin-top: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.d-name {
|
||||
height: 20%;
|
||||
.name {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #1f2329;
|
||||
}
|
||||
.status {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.h-button {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.d-description {
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
.el-tag {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.description {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #646a73;
|
||||
}
|
||||
}
|
||||
.d-button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-card:hover {
|
||||
background-color: rgba(0, 94, 235, 0.03);
|
||||
}
|
||||
|
||||
.table-button {
|
||||
display: inline;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tag-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin-top: 5px;
|
||||
border: 0;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
.el-avatar {
|
||||
--el-avatar-bg-color: #eaeaea;
|
||||
}
|
||||
@ -1,21 +1,127 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search" v-loading="loading">
|
||||
<LayoutContent v-loading="loading" :title="$t('app.installed')">
|
||||
<template #toolbar>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-button @click="sync" type="primary" :plain="true">{{ $t('app.sync') }}</el-button>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div style="float: right">
|
||||
<el-input class="table-button" v-model="searchName" clearable @clear="search()"></el-input>
|
||||
<el-button class="table-button" @click="search()" icon="Search">
|
||||
{{ $t('app.search') }}
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="20">
|
||||
<!-- <div>
|
||||
<el-button @click="changeTag('all')" type="primary" :plain="activeTag !== 'all'">
|
||||
{{ $t('app.all') }}
|
||||
</el-button>
|
||||
<div v-for="item in tags" :key="item.key" style="display: inline">
|
||||
<el-button
|
||||
class="tag-button"
|
||||
@click="changeTag(item.key)"
|
||||
type="primary"
|
||||
:plain="activeTag !== item.key"
|
||||
>
|
||||
{{ item.name }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div> -->
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div style="float: right">
|
||||
<el-input
|
||||
class="table-button"
|
||||
v-model="searchName"
|
||||
clearable
|
||||
@clear="search()"
|
||||
suffix-icon="Search"
|
||||
@keyup.enter="search()"
|
||||
@blur="search()"
|
||||
:placeholder="$t('commons.button.search')"
|
||||
></el-input>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<template #rightButton>
|
||||
<el-button @click="sync" type="primary" link>{{ $t('app.sync') }}</el-button>
|
||||
</template>
|
||||
<template #main>
|
||||
<div class="divider"></div>
|
||||
<el-row :gutter="5">
|
||||
<el-col v-for="(installed, index) in data" :key="index" :span="12">
|
||||
<div class="app-card">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="4">
|
||||
<div class="icon">
|
||||
<el-avatar
|
||||
shape="square"
|
||||
:size="66"
|
||||
:src="'data:image/png;base64,' + installed.app.icon"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div class="a-detail">
|
||||
<div class="d-name">
|
||||
<span class="name">{{ installed.name }}</span>
|
||||
<span class="status">
|
||||
<el-popover
|
||||
v-if="installed.status === 'Error'"
|
||||
placement="bottom"
|
||||
:width="400"
|
||||
trigger="hover"
|
||||
:content="installed.message"
|
||||
>
|
||||
<template #reference>
|
||||
<Status :key="installed.status" :status="installed.status"></Status>
|
||||
</template>
|
||||
</el-popover>
|
||||
<span v-else>
|
||||
<el-icon v-if="installed.status === 'Installing'" class="is-loading">
|
||||
<Loading />
|
||||
</el-icon>
|
||||
<Status :key="installed.status" :status="installed.status"></Status>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<el-button
|
||||
class="h-button"
|
||||
type="primary"
|
||||
link
|
||||
@click="openBackups(installed.id, installed.name)"
|
||||
>
|
||||
备份
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="d-description">
|
||||
<el-tag>版本：{{ installed.version }}</el-tag>
|
||||
<el-tag>HTTP端口：{{ installed.httpPort }}</el-tag>
|
||||
<!-- <span class="description">
|
||||
{{ app.shortDesc }}
|
||||
</span> -->
|
||||
<div class="description">
|
||||
<span>已运行：12天</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="d-button">
|
||||
<el-button
|
||||
v-for="(button, key) in buttons"
|
||||
:key="key"
|
||||
type="primary"
|
||||
plain
|
||||
round
|
||||
size="small"
|
||||
@click="button.click(installed)"
|
||||
:disabled="button.disabled && button.disabled(installed)"
|
||||
>
|
||||
{{ button.label }}
|
||||
</el-button>
|
||||
<!-- <el-tag v-for="(tag, ind) in app.tags" :key="ind" :colr="getColor(ind)">
|
||||
{{ tag.name }}
|
||||
</el-tag> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search" v-loading="loading">
|
||||
<el-table-column :label="$t('app.name')" prop="name" min-width="150px" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-link :underline="false" @click="openParam(row.id)" type="primary">
|
||||
@ -68,7 +174,9 @@
|
||||
fixed="right"
|
||||
fix
|
||||
/>
|
||||
</ComplexTable>
|
||||
</ComplexTable> -->
|
||||
</template>
|
||||
</LayoutContent>
|
||||
<el-dialog
|
||||
v-model="open"
|
||||
:title="$t('commons.msg.operate')"
|
||||
@ -105,7 +213,6 @@
|
||||
<AppResources ref="checkRef"></AppResources>
|
||||
<AppDelete ref="deleteRef" @close="search"></AppDelete>
|
||||
<AppParams ref="appParamRef"></AppParams>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -116,9 +223,10 @@ import {
|
||||
GetAppUpdateVersions,
|
||||
AppInstalledDeleteCheck,
|
||||
} from '@/api/modules/app';
|
||||
import LayoutContent from '@/layout/layout-content.vue';
|
||||
import { onMounted, onUnmounted, reactive, ref } from 'vue';
|
||||
import ComplexTable from '@/components/complex-table/index.vue';
|
||||
import { dateFromat } from '@/utils/util';
|
||||
// import ComplexTable from '@/components/complex-table/index.vue';
|
||||
// import { dateFromat } from '@/utils/util';
|
||||
import i18n from '@/lang';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import Backups from './backups.vue';
|
||||
@ -273,6 +381,12 @@ const buttons = [
|
||||
openOperate(row, 'delete');
|
||||
},
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('app.detail'),
|
||||
click: (row: any) => {
|
||||
openParam(row.id);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const openBackups = (installId: number, installName: string) => {
|
||||
@ -300,24 +414,5 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.i-card {
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
.content {
|
||||
.image {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.i-card:hover {
|
||||
border: 1px solid;
|
||||
border-color: $primary-color;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.table-button {
|
||||
display: inline;
|
||||
margin-right: 5px;
|
||||
}
|
||||
@import '../index.scss';
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user