commit：首页重构；应用管理优化

src/views/Home/Index20.vue

@@ -45,7 +45,7 @@ v-for="app in category.apps"
              class="app-card"
              @click="handleAppClick(app)">
           <div class="app-icon-wrapper">
-            <i :class="app.iconClass" class="app-icon"></i>
+            <img :src="app.logo" class="app-icon-img" />
           </div>
           <div class="app-name">{{ app.name }}</div>
         </div>
@@ -60,7 +60,7 @@ v-for="app in category.apps"
       custom-class="app-dialog">
       <div v-if="selectedApp" class="dialog-content">
         <div class="dialog-icon-wrapper">
-          <i :class="selectedApp.iconClass" class="dialog-app-icon"></i>
+          <img :src="selectedApp.logo" class="dialog-app-icon-img" />
         </div>
         <h3 class="dialog-app-name">{{ selectedApp.name }}</h3>
         <p class="dialog-app-id">ID: {{ selectedApp.id }}</p>
@@ -77,6 +77,8 @@ v-for="app in category.apps"
 </template>
 
 <script>
+import * as ClientApi from '@/api/system/oauth2/client'
+import { DICT_TYPE, getDictLabel } from '@/utils/dict'
 export default {
   name: 'AppManager',
   data() {
@@ -84,42 +86,22 @@ export default {
       searchQuery: '',
       dialogVisible: false,
       selectedApp: null,
-      appsData: {
-        统计报表: [
-          {id: 'office1', name: '文档编辑器', iconClass: 'el-icon-document'},
-          {id: 'office2', name: '电子表格', iconClass: 'el-icon-tickets'},
-          {id: 'office3', name: '演示文稿', iconClass: 'el-icon-present'},
-          {id: 'office4', name: 'PDF阅读器', iconClass: 'el-icon-notebook-2'}
-        ],
-        工业互联网: [
-          {id: 'dev1', name: 'IDE Pro', iconClass: 'el-icon-setting'},
-          {id: 'dev2', name: 'Git 工具箱', iconClass: 'el-icon-share'},
-          {id: 'dev3', name: 'API测试工具', iconClass: 'el-icon-connection'},
-          {id: 'dev4', name: '数据库管理', iconClass: 'el-icon-data-line'}
-        ],
-        数据中心: [
-          {id: 'fun1', name: '音乐播放器', iconClass: 'el-icon-headset'},
-          {id: 'fun2', name: '视频观看', iconClass: 'el-icon-video-play'},
-          {id: 'fun3', name: '游戏中心', iconClass: 'el-icon-game'},
-          {id: 'fun4', name: '阅读器', iconClass: 'el-icon-reading'}
-        ],
-        系统工具: [
-          {id: 'sys1', name: '系统监控', iconClass: 'el-icon-monitor'},
-          {id: 'sys2', name: '磁盘清理', iconClass: 'el-icon-delete-solid'},
-          {id: 'sys3', name: '网络诊断', iconClass: 'el-icon-mobile-phone'},
-          {id: 'sys4', name: '安全防护', iconClass: 'el-icon-lock'}
-        ]
-      }
+      appsData: []
     };
   },
+  mounted() {
+    this.fetchApps()
+  },
   computed: {
     categorizedApps() {
       const result = {};
-      for (const [category, apps] of Object.entries(this.appsData)) {
-        result[category] = {
-          apps: apps.map(app => ({...app, category}))
-        };
-      }
+      this.appsData.forEach(app => {
+        const categoryLabel = app.categoryLabel || '未分类'
+        if (!result[categoryLabel]) {
+          result[categoryLabel] = { apps: [] }
+        }
+        result[categoryLabel].apps.push(app)
+      })
       return result;
     },
     filteredCategories() {
@@ -133,7 +115,7 @@ export default {
       for (const [categoryName, categoryData] of Object.entries(this.categorizedApps)) {
         const filteredApps = categoryData.apps.filter(app => 
           app.name.toLowerCase().includes(query) || 
-          app.category.toLowerCase().includes(query)
+          String(app.categoryLabel || '').toLowerCase().includes(query)
         );
         
         if (filteredApps.length > 0) {
@@ -144,19 +126,39 @@ export default {
       return result;
     },
     totalApps() {
-      return Object.values(this.appsData).reduce((total, apps) => total + apps.length, 0);
+      return this.appsData.length;
     },
     categoriesCount() {
-      return Object.keys(this.appsData).length;
+      return Object.keys(this.categorizedApps).length;
     },
     visibleCategories() {
       return Object.keys(this.filteredCategories).length;
     }
   },
   methods: {
+    async fetchApps() {
+      try {
+        const data = await ClientApi.getOAuth2ClientPage({ pageNo: 1, pageSize: 1000 })
+        const list = data?.list || []
+        this.appsData = list.map(item => ({
+          id: item.id,
+          name: item.name,
+          logo: item.logo,
+          category: item.category,
+          categoryLabel: getDictLabel(DICT_TYPE.APP_CATEGORY, item.category),
+          redirectUris: item.redirectUris
+        }))
+      } catch (e) {
+        this.$message.error('应用数据加载失败')
+      }
+    },
     handleAppClick(app) {
-      this.selectedApp = app;
-      this.dialogVisible = true;
+      const uri = Array.isArray(app.redirectUris) ? app.redirectUris[0] : app.redirectUris
+      if (uri) {
+        window.location.href = uri
+      } else {
+        this.$message.warning('未配置重定向地址')
+      }
     },
     confirmLaunch() {
       this.$message.success(`正在启动 ${this.selectedApp.name}...`);
@@ -303,12 +305,18 @@ export default {
   font-size: 28px;
   line-height: 60px;
   color: white;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border-radius: 50%;
   align-items: center;
   justify-content: center;
 }
 
+.app-icon-img {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
 .app-name {
   overflow: hidden;
   font-size: 14px;
@@ -334,12 +342,18 @@ export default {
   font-size: 36px;
   line-height: 80px;
   color: white;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border-radius: 50%;
   align-items: center;
   justify-content: center;
 }
 
+.dialog-app-icon-img {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
 .dialog-app-name {
   margin: 0 0 10px;
   font-size: 1.5rem;