Compare commits

..

2 Commits

Author SHA1 Message Date
chy
e69cffbdb6 Merge branch 'main_beta'
# Conflicts:
#	src/views/Home/Index20.vue
2026-02-10 09:52:20 +08:00
gesilong
34f7c68041 commit:首页重构;应用管理优化 2026-02-10 09:30:20 +08:00
3 changed files with 124 additions and 54 deletions

View File

@@ -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 模块 ==========

View File

@@ -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,38 +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: 'dev1', name: '产线组态', iconClass: 'el-icon-setting'}
],
数据中台: [
{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() {
@@ -129,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) {
@@ -140,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}...`);
@@ -299,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;
@@ -330,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;

View File

@@ -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: '附加信息',