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

2026-02-10 09:30:20 +08:00
parent 9e210114b6
commit 34f7c68041
3 changed files with 124 additions and 58 deletions
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -103,6 +103,8 @@ export const getDictLabel = (dictType: string, value: any): string => {
 export enum DICT_TYPE {
  USER_TYPE = 'user_type',
  COMMON_STATUS = 'common_status',
+  APP_CATEGORY = 'app_category',
+  APP_QX = 'app_qx',
  TERMINAL = 'terminal', // 终端

  // ========== SYSTEM 模块 ==========
--- a/src/views/Home/Index20.vue
+++ b/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;
--- a/src/views/system/oauth2/client/index.vue
+++ b/src/views/system/oauth2/client/index.vue
@@ -32,7 +32,46 @@
        </el-tag>
      </template>
      <!-- 表单 -->
-      <template #scopes-form="scope">
+      <template #category-form>
+        <el-select
+          v-model="tableForm.category"
+          filterable
+          placeholder="请输入应用分类"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in getIntDictOptions(DICT_TYPE.APP_CATEGORY)"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </template>
+      <template #authorizedGrantTypes-form>
+        <el-select
+          v-model="tableForm.authorizedGrantTypes"
+          filterable
+          multiple
+          allow-create
+          placeholder="请输入授权类型"
+          style="width: 100%"
+        >
+          <el-option v-for="item in getDictOptions(DICT_TYPE.SYSTEM_OAUTH2_GRANT_TYPE)" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </template>
+      <template #authorities-form>
+        <el-select
+          v-model="tableForm.authorities"
+          filterable
+          multiple
+          allow-create
+          placeholder="请输入权限"
+          style="width: 100%"
+        >
+          <el-option v-for="item in getDictOptions(DICT_TYPE.APP_QX)" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </template>
+      <template #scopes-form>
        <el-select
          v-model="tableForm.scopes"
          filterable
@@ -41,20 +80,21 @@
          placeholder="请输入授权范围"
          style="width: 100%"
        >
-          <el-option v-for="item in scope.value" :key="item" :label="item" :value="item" />
+          <el-option v-for="item in [{
+            label: 'user.read',
+            value: 'user.read'
+          },{
+            label: 'user.write',
+            value: 'user.write'
+          }]" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </template>
-      <template #redirectUris-form="scope">
-        <el-select
-          v-model="tableForm.redirectUris"
-          filterable
-          multiple
-          allow-create
-          placeholder="请输入可重定向的 URI 地址"
-          style="width: 100%"
-        >
-          <el-option v-for="item in scope.value" :key="item" :label="item" :value="item" />
-        </el-select>
+      <template #category="scope">
+        <dict-tag
+          v-if="scope.row.category !== undefined"
+          :type="DICT_TYPE.APP_CATEGORY"
+          :value="scope.row.category"
+        />
      </template>
      <template #status="scope">
        <dict-tag
@@ -105,9 +145,14 @@ const tableOption = reactive({
    name: {
      label: '应用名',
      search: true,
-      minWidth: 100,
+      span: 12,
      rules: [{ required: true, message: '应用名不能为空', trigger: 'blur' }]
    },
+    category: {
+      label: '应用分类',
+      span: 12,
+      rules: [{ required: true, message: '应用分类不能为空', trigger: 'blur' }]
+    },
    logo: {
      label: '应用图标',
      span: 24,
@@ -174,7 +219,6 @@ const tableOption = reactive({
      hide: true,
      control: (val) => {
        let dicData = ["user.read","user.write"]
-        debugger
        if (val?.length) {
          dicData = val.map((item) => {
            return { label: item, value: item }
@@ -195,8 +239,6 @@ const tableOption = reactive({
    },
    redirectUris: {
      label: '可重定向的 URI 地址',
-      // type: 'select',
-      multiple: true,
      span: 12,
      hide: true,
      rules: [{ required: true, message: '可重定向的 URI 地址不能为空', trigger: 'blur' }]
@@ -204,12 +246,20 @@ const tableOption = reactive({
    authorities: {
      label: '权限',
      span: 12,
+      multiple: true,
+      hide: true,
+      type: 'select'
+    },
+    callbackUris: {
+      label: '回调地址',
+      span: 12,
      hide: true
    },
    resourceIds: {
      label: '资源',
      span: 12,
-      hide: true
+      hide: true,
+      type: 'array'
    },
    additionalInformation: {
      label: '附加信息',