github
/
1Panel
mirror of https://github.com/1Panel-dev/1Panel
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

style: 修改应用商店样式

pull/1060/head
zhengkunwang223 2 years ago committed by zhengkunwang223
parent
c1332235a0
commit
d443103e2c
3 changed files with 155 additions and 131 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 84
      frontend/src/views/app-store/apps/index.vue
  2. 9
      frontend/src/views/app-store/index.scss
  3. 193
      frontend/src/views/app-store/installed/index.vue

84
frontend/src/views/app-store/apps/index.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('app.app')" :divider="true">
<LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('app.app')">
<template #toolbar>
<el-row :gutter="5">
<el-col :span="20">
@ -47,43 +47,48 @@
<el-row :gutter="5">
<el-col v-for="(app, index) in apps" :key="index" :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
<div class="app-card">
<el-row :gutter="24">
<el-col :xs="5" :sm="5" :md="6" :lg="6" :xl="5">
<div class="app-icon">
<el-avatar shape="square" :size="60" :src="'data:image/png;base64,' + app.icon" />
</div>
</el-col>
<el-col :xs="19" :sm="19" :md="18" :lg="18" :xl="19">
<div class="app-content">
<div class="app-header">
<span class="app-title">{{ app.name }}</span>
<el-button
class="app-button"
type="primary"
plain
round
size="small"
@click="getAppDetail(app.key)"
>
{{ $t('app.install') }}
</el-button>
<el-card class="e-card">
<el-row :gutter="24">
<el-col :xs="5" :sm="5" :md="6" :lg="6" :xl="5">
<div class="app-icon">
<el-avatar
shape="square"
:size="60"
:src="'data:image/png;base64,' + app.icon"
/>
</div>
<div class="app-desc">
<span class="desc">
{{ language == 'zh' ? app.shortDescZh : app.shortDescEn }}
</span>
</div>
<div class="app-tag">
<el-tag v-for="(tag, ind) in app.tags" :key="ind" style="margin-right: 5px">
<span :style="{ color: getColor(ind) }">
{{ language == 'zh' ? tag.name : tag.key }}
</el-col>
<el-col :xs="19" :sm="19" :md="18" :lg="18" :xl="19">
<div class="app-content">
<div class="app-header">
<span class="app-title">{{ app.name }}</span>
<el-button
class="app-button"
type="primary"
plain
round
size="small"
@click="getAppDetail(app.key)"
>
{{ $t('app.install') }}
</el-button>
</div>
<div class="app-desc">
<span class="desc">
{{ language == 'zh' ? app.shortDescZh : app.shortDescEn }}
</span>
</el-tag>
</div>
<div class="app-tag">
<el-tag v-for="(tag, ind) in app.tags" :key="ind" style="margin-right: 5px">
<span :style="{ color: getColor(ind) }">
{{ language == 'zh' ? tag.name : tag.key }}
</span>
</el-tag>
</div>
</div>
<div class="divider"></div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>
</div>
</el-col>
</el-row>
@ -234,8 +239,13 @@ onMounted(() => {
margin-top: 5px;
}
}
&:hover {
background-color: rgba(0, 94, 235, 0.03);
.e-card {
border: var(--panel-border) !important;
&:hover {
cursor: pointer;
border: 1px solid var(--el-color-primary) !important;
}
}
}

9
frontend/src/views/app-store/index.scss
Unescape View File

@ -46,8 +46,13 @@
min-width: 440px;
}
}
&:hover {
background-color: rgba(0, 94, 235, 0.03);
.e-card {
border: var(--panel-border) !important;
&:hover {
cursor: pointer;
border: 1px solid var(--el-color-primary) !important;
}
}
}

193
frontend/src/views/app-store/installed/index.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<LayoutContent v-loading="loading || syncLoading" :title="activeName" :divider="true">
<LayoutContent v-loading="loading || syncLoading" :title="activeName">
<template #toolbar>
<el-row :gutter="5">
<el-col :span="20">
@ -67,103 +67,112 @@
class="install-card-col-12"
>
<div class="install-card">
<el-row :gutter="24">
<el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="4">
<div class="icon">
<el-avatar
shape="square"
:size="66"
:src="'data:image/png;base64,' + installed.app.icon"
/>
</div>
</el-col>
<el-col :xs="21" :sm="21" :md="21" :lg="20" :xl="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>
<el-card class="e-card">
<el-row :gutter="24">
<el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="4">
<div class="icon">
<el-avatar
shape="square"
:size="66"
:src="'data:image/png;base64,' + installed.app.icon"
/>
</div>
</el-col>
<el-col :xs="21" :sm="21" :md="21" :lg="20" :xl="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>
<Status :key="installed.status" :status="installed.status"></Status>
</template>
</el-popover>
<span v-else>
<Status :key="installed.status" :status="installed.status"></Status>
</span>
</span>
</span>
<el-button
class="h-button"
type="primary"
plain
round
size="small"
:disabled="installed.status !== 'Running'"
@click="openUploads(installed.app.key, installed.name)"
v-if="mode === 'installed'"
>
{{ $t('database.loadBackup') }}
</el-button>
<el-button
class="h-button"
type="primary"
plain
round
size="small"
:disabled="installed.status !== 'Running'"
@click="openBackups(installed.app.key, installed.name)"
v-if="mode === 'installed'"
>
{{ $t('app.backup') }}
</el-button>
<el-button
class="h-button"
type="primary"
plain
round
size="small"
@click="openOperate(installed, 'upgrade')"
v-if="mode === 'upgrade'"
>
{{ $t('app.upgrade') }}
</el-button>
</div>
<div class="d-description">
<el-tag>{{ $t('app.version') }}：{{ installed.version }}</el-tag>
<el-tag v-if="installed.httpPort > 0">
{{ $t('app.busPort') }}：{{ installed.httpPort }}
</el-tag>
<div class="description">
<span>{{ $t('app.areadyRun') }}： {{ getAge(installed.createdAt) }}</span>
<el-button
class="h-button"
type="primary"
plain
round
size="small"
:disabled="installed.status !== 'Running'"
@click="openUploads(installed.app.key, installed.name)"
v-if="mode === 'installed'"
>
{{ $t('database.loadBackup') }}
</el-button>
<el-button
class="h-button"
type="primary"
plain
round
size="small"
:disabled="installed.status !== 'Running'"
@click="openBackups(installed.app.key, installed.name)"
v-if="mode === 'installed'"
>
{{ $t('app.backup') }}
</el-button>
<el-button
class="h-button"
type="primary"
plain
round
size="small"
@click="openOperate(installed, 'upgrade')"
v-if="mode === 'upgrade'"
>
{{ $t('app.upgrade') }}
</el-button>
</div>
</div>
<div class="app-divider" />
<div
class="d-button"
v-if="mode === 'installed' && installed.status != 'Installing'"
>
<el-button
v-for="(button, key) in buttons"
:key="key"
:type="button.disabled && button.disabled(installed) ? 'info' : 'primary'"
plain
round
size="small"
@click="button.click(installed)"
:disabled="button.disabled && button.disabled(installed)"
<div class="d-description">
<el-tag>{{ $t('app.version') }}：{{ installed.version }}</el-tag>
<el-tag v-if="installed.httpPort > 0">
{{ $t('app.busPort') }}：{{ installed.httpPort }}
</el-tag>
<div class="description">
<span>
{{ $t('app.areadyRun') }}： {{ getAge(installed.createdAt) }}
</span>
</div>
</div>
<div class="app-divider" />
<div
class="d-button"
v-if="mode === 'installed' && installed.status != 'Installing'"
>
{{ button.label }}
</el-button>
<el-button
v-for="(button, key) in buttons"
:key="key"
:type="
button.disabled && button.disabled(installed) ? 'info' : 'primary'
"
plain
round
size="small"
@click="button.click(installed)"
:disabled="button.disabled && button.disabled(installed)"
>
{{ button.label }}
</el-button>
</div>
</div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>
</div>
</el-col>
</el-row>

Write Preview
Loading…
Cancel
Save