feat: 修改应用商店 已安装列表

frontend/components.d.ts

@@ -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']

frontend/src/lang/modules/zh.ts

@@ -855,6 +855,7 @@ export default {
         toInstall: '去安装',
         param: '参数配置',
         syncAppList: '更新应用列表',
+        syncAppListSuccess: '更新成功',
     },
     website: {
         website: '网站',

frontend/src/views/app-store/apps/index.vue

@@ -1,37 +1,32 @@
 <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'">
-                        <el-button @click="changeTag('all')" type="primary" :plain="activeTag !== 'all'">
+                        {{ $t('app.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 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
-                        <el-input
+                        v-model="req.name"
-                            class="table-button"
+                        clearable
-                            v-model="req.name"
+                        @clear="searchByName('')"
-                            clearable
+                        suffix-icon="Search"
-                            @clear="searchByName('')"
+                        @keyup.enter="searchByName(req.name)"
-                            suffix-icon="Search"
+                        @blur="searchByName(req.name)"
-                            @keyup.enter="searchByName(req.name)"
+                        :placeholder="$t('commons.button.search')"
-                            @blur="searchByName(req.name)"
+                    ></el-input>
-                            :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="app-content">
-                                    <div class="d-name">
+                                    <div class="app-header">
-                                        <span class="name">{{ app.name }}</span>
+                                        <span class="app-title">{{ app.name }}</span>
-                                        <el-button class="h-button" round @click="getAppDetail(app.id)">安装</el-button>
+                                        <el-button
+                                            class="app-button"
+                                            type="primary"
+                                            plain
+                                            round
+                                            @click="getAppDetail(app.id)"
+                                        >
+                                            安装
+                                        </el-button>
                                     </div>
-                                    <div class="d-description">
+                                    <div class="app-desc">
-                                        <span class="description">
+                                        <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>

frontend/src/views/app-store/index.scss

@@ -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;
+}

frontend/src/views/app-store/installed/index.vue

@@ -1,111 +1,218 @@
 <template>
-    <el-card>
+    <LayoutContent v-loading="loading" :title="$t('app.installed')">
-        <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search" v-loading="loading">
+        <template #toolbar>
-            <template #toolbar>
+            <el-row :gutter="5">
-                <el-row>
+                <el-col :span="20">
-                    <el-col :span="18">
+                    <!-- <div>
-                        <el-button @click="sync" type="primary" :plain="true">{{ $t('app.sync') }}</el-button>
+                        <el-button @click="changeTag('all')" type="primary" :plain="activeTag !== 'all'">
-                    </el-col>
+                            {{ $t('app.all') }}
-                    <el-col :span="6">
+                        </el-button>
-                        <div style="float: right">
+                        <div v-for="item in tags" :key="item.key" style="display: inline">
-                            <el-input class="table-button" v-model="searchName" clearable @clear="search()"></el-input>
+                            <el-button
-                            <el-button class="table-button" @click="search()" icon="Search">
+                                class="tag-button"
-                                {{ $t('app.search') }}
+                                @click="changeTag(item.key)"
+                                type="primary"
+                                :plain="activeTag !== item.key"
+                            >
+                                {{ item.name }}
                             </el-button>
                         </div>
-                    </el-col>
+                    </div> -->
-                </el-row>
+                </el-col>
-            </template>
+                <el-col :span="4">
-            <el-table-column :label="$t('app.name')" prop="name" min-width="150px" show-overflow-tooltip>
+                    <div style="float: right">
-                <template #default="{ row }">
+                        <el-input
-                    <el-link :underline="false" @click="openParam(row.id)" type="primary">
+                            class="table-button"
-                        {{ row.name }}
+                            v-model="searchName"
-                    </el-link>
+                            clearable
-                    <el-tag round effect="dark" v-if="row.canUpdate">{{ $t('app.canUpdate') }}</el-tag>
+                            @clear="search()"
-                </template>
+                            suffix-icon="Search"
-            </el-table-column>
+                            @keyup.enter="search()"
-            <el-table-column :label="$t('app.app')" prop="app.name" show-overflow-tooltip></el-table-column>
+                            @blur="search()"
-            <el-table-column :label="$t('app.version')" prop="version" show-overflow-tooltip></el-table-column>
+                            :placeholder="$t('commons.button.search')"
-            <el-table-column :label="$t('website.port')" prop="httpPort"></el-table-column>
+                        ></el-input>
-            <el-table-column :label="$t('app.backup')">
-                <template #default="{ row }">
-                    <el-link :underline="false" @click="openBackups(row.id, row.name)" type="primary">
-                        {{ $t('app.backup') }} ({{ row.backups.length }})
-                    </el-link>
-                </template>
-            </el-table-column>
-
-            <el-table-column :label="$t('app.status')">
-                <template #default="{ row }">
-                    <el-popover
-                        v-if="row.status === 'Error'"
-                        placement="bottom"
-                        :width="400"
-                        trigger="hover"
-                        :content="row.message"
-                    >
-                        <template #reference><Status :key="row.status" :status="row.status"></Status></template>
-                    </el-popover>
-                    <div v-else>
-                        <el-icon v-if="row.status === 'Installing'" class="is-loading">
-                            <Loading />
-                        </el-icon>
-                        <Status :key="row.status" :status="row.status"></Status>
                     </div>
-                </template>
+                </el-col>
-            </el-table-column>
+            </el-row>
-            <el-table-column
+        </template>
-                prop="createdAt"
+        <template #rightButton>
-                :label="$t('commons.table.date')"
+            <el-button @click="sync" type="primary" link>{{ $t('app.sync') }}</el-button>
-                :formatter="dateFromat"
+        </template>
-                show-overflow-tooltip
+        <template #main>
-            />
+            <div class="divider"></div>
-            <fu-table-operations
+            <el-row :gutter="5">
-                width="300px"
+                <el-col v-for="(installed, index) in data" :key="index" :span="12">
-                :ellipsis="10"
+                    <div class="app-card">
-                :buttons="buttons"
+                        <el-row :gutter="24">
-                :label="$t('commons.table.operate')"
+                            <el-col :span="4">
-                fixed="right"
+                                <div class="icon">
-                fix
+                                    <el-avatar
-            />
+                                        shape="square"
-        </ComplexTable>
+                                        :size="66"
-        <el-dialog
+                                        :src="'data:image/png;base64,' + installed.app.icon"
-            v-model="open"
+                                    />
-            :title="$t('commons.msg.operate')"
+                                </div>
-            :destroy-on-close="true"
+                            </el-col>
-            :close-on-click-modal="false"
+                            <el-col :span="20">
-            :before-close="handleClose"
+                                <div class="a-detail">
-            width="30%"
+                                    <div class="d-name">
-        >
+                                        <span class="name">{{ installed.name }}</span>
-            <div style="text-align: center">
+                                        <span class="status">
-                <p>{{ $t('app.versioneSelect') }}</p>
+                                            <el-popover
-                <el-select v-model="operateReq.detailId">
+                                                v-if="installed.status === 'Error'"
-                    <el-option
+                                                placement="bottom"
-                        v-for="(version, index) in versions"
+                                                :width="400"
-                        :key="index"
+                                                trigger="hover"
-                        :value="version.detailId"
+                                                :content="installed.message"
-                        :label="version.version"
+                                            >
-                    ></el-option>
+                                                <template #reference>
-                </el-select>
+                                                    <Status :key="installed.status" :status="installed.status"></Status>
-            </div>
+                                                </template>
-            <template #footer>
+                                            </el-popover>
-                <span class="dialog-footer">
+                                            <span v-else>
-                    <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
+                                                <el-icon v-if="installed.status === 'Installing'" class="is-loading">
-                    <el-button
+                                                    <Loading />
-                        type="primary"
+                                                </el-icon>
-                        @click="operate"
+                                                <Status :key="installed.status" :status="installed.status"></Status>
-                        :disabled="operateReq.operate == 'update' && versions == null"
+                                            </span>
-                    >
+                                        </span>
-                        {{ $t('commons.button.confirm') }}
+
-                    </el-button>
+                                        <el-button
-                </span>
+                                            class="h-button"
-            </template>
+                                            type="primary"
-        </el-dialog>
+                                            link
-        <Backups ref="backupRef" @close="search"></Backups>
+                                            @click="openBackups(installed.id, installed.name)"
-        <AppResources ref="checkRef"></AppResources>
+                                        >
-        <AppDelete ref="deleteRef" @close="search"></AppDelete>
+                                            备份
-        <AppParams ref="appParamRef"></AppParams>
+                                        </el-button>
-    </el-card>
+                                    </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">
+                            {{ row.name }}
+                        </el-link>
+                        <el-tag round effect="dark" v-if="row.canUpdate">{{ $t('app.canUpdate') }}</el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('app.app')" prop="app.name" show-overflow-tooltip></el-table-column>
+                <el-table-column :label="$t('app.version')" prop="version" show-overflow-tooltip></el-table-column>
+                <el-table-column :label="$t('website.port')" prop="httpPort"></el-table-column>
+                <el-table-column :label="$t('app.backup')">
+                    <template #default="{ row }">
+                        <el-link :underline="false" @click="openBackups(row.id, row.name)" type="primary">
+                            {{ $t('app.backup') }} ({{ row.backups.length }})
+                        </el-link>
+                    </template>
+                </el-table-column>
+
+                <el-table-column :label="$t('app.status')">
+                    <template #default="{ row }">
+                        <el-popover
+                            v-if="row.status === 'Error'"
+                            placement="bottom"
+                            :width="400"
+                            trigger="hover"
+                            :content="row.message"
+                        >
+                            <template #reference><Status :key="row.status" :status="row.status"></Status></template>
+                        </el-popover>
+                        <div v-else>
+                            <el-icon v-if="row.status === 'Installing'" class="is-loading">
+                                <Loading />
+                            </el-icon>
+                            <Status :key="row.status" :status="row.status"></Status>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    prop="createdAt"
+                    :label="$t('commons.table.date')"
+                    :formatter="dateFromat"
+                    show-overflow-tooltip
+                />
+                <fu-table-operations
+                    width="300px"
+                    :ellipsis="10"
+                    :buttons="buttons"
+                    :label="$t('commons.table.operate')"
+                    fixed="right"
+                    fix
+                />
+            </ComplexTable> -->
+        </template>
+    </LayoutContent>
+    <el-dialog
+        v-model="open"
+        :title="$t('commons.msg.operate')"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        :before-close="handleClose"
+        width="30%"
+    >
+        <div style="text-align: center">
+            <p>{{ $t('app.versioneSelect') }}</p>
+            <el-select v-model="operateReq.detailId">
+                <el-option
+                    v-for="(version, index) in versions"
+                    :key="index"
+                    :value="version.detailId"
+                    :label="version.version"
+                ></el-option>
+            </el-select>
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button
+                    type="primary"
+                    @click="operate"
+                    :disabled="operateReq.operate == 'update' && versions == null"
+                >
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </el-dialog>
+    <Backups ref="backupRef" @close="search"></Backups>
+    <AppResources ref="checkRef"></AppResources>
+    <AppDelete ref="deleteRef" @close="search"></AppDelete>
+    <AppParams ref="appParamRef"></AppParams>
 </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 ComplexTable from '@/components/complex-table/index.vue';
-import { dateFromat } from '@/utils/util';
+// 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 {
+@import '../index.scss';
-    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;
-}
 </style>