feat: 添加应用图标

internal/service/app.go

@@ -47,6 +47,7 @@ func (s *AppService) List(w http.ResponseWriter, r *http.Request) {
 			show = installedAppMap[item.Slug].Show
 		}
 		apps = append(apps, types.AppCenter{
+			Icon:        item.Icon,
 			Name:        item.Name,
 			Description: item.Description,
 			Slug:        item.Slug,

web/src/views/app/IndexView.vue

@@ -4,6 +4,7 @@ import VersionModal from '@/views/app/VersionModal.vue'
 import { NButton, NDataTable, NPopconfirm, NSwitch } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 
+import TheIcon from '@/components/custom/TheIcon.vue'
 import { router } from '@/router'
 import { renderIcon } from '@/utils'
 import type { App } from '@/views/app/types'
@@ -16,7 +17,18 @@ const versionModalOperation = ref('安装')
 const versionModalInfo = ref<App>({} as App)
 
 const columns: any = [
-  { type: 'selection', fixed: 'left' },
+  {
+    key: 'icon',
+    fixed: 'left',
+    width: 80,
+    align: 'center',
+    render(row: any) {
+      return h(TheIcon, {
+        icon: row.icon,
+        size: 24
+      })
+    }
+  },
   {
     title: t('appIndex.columns.name'),
     key: 'name',

web/src/views/apps/frp/route.ts

@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'Frp',
-        icon: 'mdi:virtual-private-network',
+        icon: 'icon-park-outline:connection-box',
         role: ['admin'],
         requireAuth: true
       }

web/src/views/apps/gitea/route.ts

@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'Gitea',
-        icon: 'mdi:git',
+        icon: 'simple-icons:gitea',
         role: ['admin'],
         requireAuth: true
       }

web/src/views/apps/mysql/route.ts

@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'Percona（MySQL）',
-        icon: 'mdi:database',
+        icon: 'logos:percona',
         role: ['admin'],
         requireAuth: true
       }

web/src/views/apps/nginx/route.ts

@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'OpenResty（Nginx）',
-        icon: 'mdi:server-network',
+        icon: 'logos:nginx',
         role: ['admin'],
         requireAuth: true
       }

web/src/views/apps/php74/route.ts

@@ -1,24 +0,0 @@
-import type { RouteType } from '~/types/router'
-
-const Layout = () => import('@/layout/IndexView.vue')
-
-export default {
-  name: 'php74',
-  path: '/apps/php74',
-  component: Layout,
-  isHidden: true,
-  children: [
-    {
-      name: 'apps-php74-index',
-      path: '',
-      component: () => import('../php/IndexView.vue'),
-      meta: {
-        title: 'PHP 7.4',
-        icon: 'mdi:language-php',
-        role: ['admin'],
-        requireAuth: true,
-        php: 74
-      }
-    }
-  ]
-} as RouteType

web/src/views/apps/php80/route.ts

@@ -1,24 +0,0 @@
-import type { RouteType } from '~/types/router'
-
-const Layout = () => import('@/layout/IndexView.vue')
-
-export default {
-  name: 'php80',
-  path: '/apps/php80',
-  component: Layout,
-  isHidden: true,
-  children: [
-    {
-      name: 'apps-php80-index',
-      path: '',
-      component: () => import('../php/IndexView.vue'),
-      meta: {
-        title: 'PHP 8.0',
-        icon: 'mdi:language-php',
-        role: ['admin'],
-        requireAuth: true,
-        php: 80
-      }
-    }
-  ]
-} as RouteType

web/src/views/apps/php81/route.ts

@@ -14,7 +14,7 @@ export default {
       component: () => import('../php/IndexView.vue'),
       meta: {
         title: 'PHP 8.1',
-        icon: 'mdi:language-php',
+        icon: 'logos:php',
         role: ['admin'],
         requireAuth: true,
         php: 81

web/src/views/apps/php82/route.ts

@@ -14,7 +14,7 @@ export default {
       component: () => import('../php/IndexView.vue'),
       meta: {
         title: 'PHP 8.2',
-        icon: 'mdi:language-php',
+        icon: 'logos:php',
         role: ['admin'],
         requireAuth: true,
         php: 82

web/src/views/apps/php83/route.ts

@@ -14,7 +14,7 @@ export default {
       component: () => import('../php/IndexView.vue'),
       meta: {
         title: 'PHP 8.3',
-        icon: 'mdi:language-php',
+        icon: 'logos:php',
         role: ['admin'],
         requireAuth: true,
         php: 83

web/src/views/apps/phpmyadmin/route.ts

@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'phpMyAdmin',
-        icon: 'mdi:database',
+        icon: 'simple-icons:phpmyadmin',
         role: ['admin'],
         requireAuth: true
       }

web/src/views/apps/podman/route.ts

@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'Podman',
-        icon: 'mdi:cup-outline',
+        icon: 'devicon:podman',
         role: ['admin'],
         requireAuth: true
       }

web/src/views/apps/postgresql/route.ts

@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'PostgreSQL',
-        icon: 'mdi:database',
+        icon: 'logos:postgresql',
         role: ['admin'],
         requireAuth: true
       }

web/src/views/apps/redis/route.ts

@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'Redis',
-        icon: 'mdi:database',
+        icon: 'logos:redis',
         role: ['admin'],
         requireAuth: true
       }

web/src/views/apps/rsync/route.ts

@@ -14,7 +14,7 @@ export default {
       component: () => import('./IndexView.vue'),
       meta: {
         title: 'Rsync',
-        icon: 'mdi:sync',
+        icon: 'file-icons:rsync',
         role: ['admin'],
         requireAuth: true
       }

web/src/views/home/IndexView.vue

@@ -632,9 +632,9 @@ if (import.meta.hot) {
                         <n-space>
                           <n-thing>
                             <template #avatar>
-                              <n-avatar class="mt-4">
-                                <TheIcon :size="24" icon="mdi:package-variant-closed" />
-                              </n-avatar>
+                              <div class="mt-8">
+                                <TheIcon :size="30" :icon="item.icon" />
+                              </div>
                             </template>
                             <template #header>
                               {{ item.name }}