Skip to content

Commit c4cd2ce

Browse files
ReLive27ReLive27
authored
Merge pull request #35 from ReLive27/main
feat(app-management): implement application management page layout
2 parents 02e8ecb + 0e292e7 commit c4cd2ce

2 files changed

Lines changed: 93 additions & 102 deletions

File tree

‎web/src/views/app/create.vue‎

Lines changed: 51 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,14 @@
3737
<div class="app-card-grid">
3838

3939
<div
40-
class="app-card"
4140
v-for="item in filteredApps"
4241
:key="item.id"
42+
class="app-card"
4343
@click="selectApp(item)"
4444
>
4545
<!-- 图标 + 标题（横向） -->
4646
<div class="card-header">
47-
<img class="card-icon" :src="item.icon"/>
47+
<img class="card-icon" :src="item.icon">
4848
<div class="card-title">{{ item.name }}</div>
4949
</div>
5050

@@ -55,117 +55,115 @@
5555

5656
<!-- 技术图标 -->
5757
<div class="card-tech">
58-
<img v-for="t in item.tech" :src="t" :key="t"/>
58+
<img v-for="t in item.tech" :key="t" :src="t">
5959
</div>
6060

6161
<!-- NEW 标签 -->
62-
<div class="badge-new" v-if="item.new">新</div>
62+
<div v-if="item.new" class="badge-new">新</div>
6363
</div>
6464

6565
</div>
6666

6767
</div>
6868
</template>
6969

70-
7170
<script>
7271
export default {
73-
name: "AppCreatePage",
72+
name: 'AppCreatePage',
7473
7574
data() {
7675
return {
77-
keyword: "",
78-
activeTag: "全部",
76+
keyword: '',
77+
activeTag: '全部',
7978
80-
protocolTags: ["全部", "OIDC", "CAS", "SAML", "OAuth2"],
79+
protocolTags: ['全部', 'OIDC', 'CAS', 'OAuth2'],
8180
8281
apps: [
8382
{
8483
id: 1,
85-
name: "单页应用程序",
86-
desc: "在浏览器中运行应用程序逻辑的 Web 应用程序。",
87-
icon: require("@/assets/img/spa.svg"),
84+
name: '单页应用程序',
85+
desc: '在浏览器中运行应用程序逻辑的 Web 应用程序。',
86+
icon: require('@/assets/img/spa.svg'),
8887
tech: [
89-
require("@/assets/img/react.svg"),
90-
require("@/assets/img/vuejs.svg"),
91-
require("@/assets/img/javascript.svg")
88+
require('@/assets/img/react.svg'),
89+
require('@/assets/img/vuejs.svg'),
90+
require('@/assets/img/javascript.svg')
9291
],
93-
proto: ["OIDC"],
92+
proto: ['OIDC']
9493
},
9594
{
9695
id: 2,
97-
name: "传统 Web 应用程序",
98-
desc: "在服务器端运行应用程序逻辑的 Web 应用程序。",
99-
icon: require("@/assets/img/web.svg"),
96+
name: '传统 Web 应用程序',
97+
desc: '在服务器端运行应用程序逻辑的 Web 应用程序。',
98+
icon: require('@/assets/img/web.svg'),
10099
tech: [
101-
require("@/assets/img/java.svg"),
102-
require("@/assets/img/python.svg"),
103-
require("@/assets/img/go.svg")
100+
require('@/assets/img/java.svg'),
101+
require('@/assets/img/python.svg'),
102+
require('@/assets/img/go.svg')
104103
],
105-
proto: ["OIDC", "SAML"],
104+
proto: ['OIDC', 'SAML']
106105
},
107106
{
108107
id: 3,
109-
name: "移动应用",
110-
desc: "专为移动设备开发的应用程序。",
111-
icon: require("@/assets/img/mobile.svg"),
108+
name: '移动应用',
109+
desc: '专为移动设备开发的应用程序。',
110+
icon: require('@/assets/img/mobile.svg'),
112111
tech: [
113-
require("@/assets/img/android.svg"),
114-
require("@/assets/img/ios.png"),
115-
require("@/assets/img/flutter.svg")
112+
require('@/assets/img/android.svg'),
113+
require('@/assets/img/ios.png'),
114+
require('@/assets/img/flutter.svg')
116115
],
117-
proto: ["OIDC"],
116+
proto: ['OIDC']
118117
},
119118
{
120119
id: 4,
121-
name: "M2M 应用",
122-
desc: "专为机器间通信而设计的应用。",
123-
icon: require("@/assets/img/m2m.svg"),
120+
name: 'M2M 应用',
121+
desc: '专为机器间通信而设计的应用。',
122+
icon: require('@/assets/img/m2m.svg'),
124123
tech: [
125-
require("@/assets/img/oauth.svg"),
124+
require('@/assets/img/oauth.svg')
126125
],
127-
proto: ["OAuth2"],
126+
proto: ['OAuth2']
128127
},
129128
{
130129
id: 5,
131-
name: "基于标准的应用程序",
132-
desc: "使用标准协议构建的应用。",
133-
icon: require("@/assets/img/std.svg"),
130+
name: '基于标准的应用程序',
131+
desc: '使用标准协议构建的应用。',
132+
icon: require('@/assets/img/std.svg'),
134133
tech: [
135-
require("@/assets/img/oauth.svg"),
136-
require("@/assets/img/openid.png"),
137-
require("@/assets/img/saml.svg"),
138-
require("@/assets/img/cas.png"),
134+
require('@/assets/img/oauth.svg'),
135+
require('@/assets/img/openid.png'),
136+
require('@/assets/img/cas.png')
139137
],
140-
proto: ["SAML", "OIDC", "CAS", "OAuth2"],
141-
},
142-
],
143-
};
138+
proto: ['OIDC', 'CAS', 'OAuth2']
139+
}
140+
]
141+
}
144142
},
145143
146144
computed: {
147145
filteredApps() {
148146
return this.apps.filter(app => {
149-
const matchKeyword = !this.keyword || app.name.includes(this.keyword);
147+
const matchKeyword = !this.keyword || app.name.includes(this.keyword)
150148
151149
const matchTag =
152-
this.activeTag === "全部" || app.proto.includes(this.activeTag);
150+
this.activeTag === '全部' || app.proto.includes(this.activeTag)
153151
154-
return matchKeyword && matchTag;
155-
});
152+
return matchKeyword && matchTag
153+
})
156154
}
157155
},
158156
159157
methods: {
160158
selectTag(tag) {
161-
this.activeTag = tag;
159+
this.activeTag = tag
162160
},
163161
164162
selectApp(item) {
165-
this.$message.success("选择了：" + item.name);
163+
this.$message.success('选择了：' + item.name)
166164
}
167165
}
168-
};
166+
}
169167
</script>
170168

171169
<style lang="scss" scoped>

‎web/src/views/app/index.vue‎

Lines changed: 42 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
<el-input v-model="query.name" placeholder="输入名称或 ClientId"/>
1010
</el-form-item>
1111

12-
<el-form-item label="类型">
12+
<el-form-item label="应用类型">
1313
<el-select v-model="query.type" clearable placeholder="全部类型">
14-
<el-option label="Web" value="web"/>
15-
<el-option label="SPA" value="spa"/>
16-
<el-option label="Native" value="native"/>
17-
<el-option label="Machine-to-Machine" value="m2m"/>
18-
<el-option label="SAML" value="saml"/>
14+
<el-option label="传统WEB应用" value="web"/>
15+
<el-option label="单页应用" value="spa"/>
16+
<el-option label="移动应用" value="mobile"/>
17+
<el-option label="M2M应用" value="m2m"/>
18+
<el-option label="标准应用" value="std"/>
1919
</el-select>
2020
</el-form-item>
2121

@@ -47,25 +47,13 @@
4747
<el-table-column label="应用名称" prop="name" min-width="150"/>
4848
<el-table-column label="Client ID" prop="clientId" min-width="200"/>
4949

50-
<el-table-column label="类型" prop="type" width="160">
50+
<el-table-column label="应用类型" prop="type" width="160">
5151
<template slot-scope="{ row }">
5252
<el-tag size="mini">{{ row.type }}</el-tag>
5353
</template>
5454
</el-table-column>
5555

56-
<el-table-column label="鉴权方式" prop="authMethod" width="160"/>
57-
58-
<el-table-column label="回调地址" min-width="200">
59-
<template slot-scope="{ row }">
60-
<div v-if="row.redirectUris && row.redirectUris.length">
61-
{{ row.redirectUris[0] }}
62-
<span v-if="row.redirectUris.length > 1" class="more">
63-
+{{ row.redirectUris.length - 1 }} 更多
64-
</span>
65-
</div>
66-
<div v-else class="empty">无</div>
67-
</template>
68-
</el-table-column>
56+
<el-table-column label="协议类型" prop="protocolType" width="160"/>
6957

7058
<el-table-column label="状态" width="100">
7159
<template slot-scope="{ row }">
@@ -77,8 +65,9 @@
7765

7866
<el-table-column label="操作" width="200">
7967
<template slot-scope="{ row }">
68+
<el-button size="mini" type="text" @click="detailApp(row)">详情</el-button>
8069
<el-button size="mini" type="text" @click="editApp(row)">编辑</el-button>
81-
<el-button size="mini" type="text" @click="resetSecret(row)">重置密钥</el-button>
70+
<el-button size="mini" type="text" @click="enableApp(row)">禁用</el-button>
8271
<el-button size="mini" type="text" class="danger" @click="deleteApp(row)">删除</el-button>
8372
</template>
8473
</el-table-column>
@@ -97,71 +86,73 @@
9786
</div>
9887
</template>
9988

100-
10189
<script>
10290
export default {
103-
name: "ApplicationList",
91+
name: 'ApplicationList',
10492
10593
data() {
10694
return {
10795
query: {
108-
name: "",
109-
type: "",
110-
status: ""
96+
name: '',
97+
type: '',
98+
status: ''
11199
},
112100
113101
appList: [
114102
{
115-
name: "后台管理系统",
116-
clientId: "abcd-1234-efgh",
117-
type: "Web",
118-
authMethod: "OIDC",
119-
redirectUris: ["https://admin.example.com/callback"],
103+
name: '后台管理系统',
104+
clientId: 'abcd-1234-efgh',
105+
type: 'Web',
106+
protocolType: 'OIDC',
120107
enabled: true
121108
},
122109
{
123-
name: "自动化脚本",
124-
clientId: "xxxx-8888-0000",
125-
type: "Machine-to-Machine",
126-
authMethod: "Client Credentials",
127-
redirectUris: [],
110+
name: '自动化脚本',
111+
clientId: 'xxxx-8888-0000',
112+
type: 'Machine-to-Machine',
113+
protocolType: 'CAS',
128114
enabled: false
129115
}
130116
],
131117
132118
total: 2
133-
};
119+
}
134120
},
135121
136122
methods: {
137123
search() {
138-
this.$message.success("已更新搜索结果");
124+
this.$message.success('已更新搜索结果')
139125
},
140126
141127
openCreateDialog() {
142-
this.$router.push("/app/create");
128+
this.$router.push('/app/create')
129+
},
130+
131+
detailApp(app) {
132+
this.$message.info('打开应用详情：' + app.name)
143133
},
144134
145135
editApp(app) {
146-
this.$message.info("打开编辑应用：" + app.name);
136+
this.$message.info('打开编辑应用：' + app.name)
147137
},
148138
149-
resetSecret(app) {
150-
this.$confirm(`确定重置应用密钥？`, "提示", { type: "warning" })
151-
.then(() => this.$message.success("密钥已重置"))
152-
.catch(()=>{});
139+
enableApp(app) {
140+
this.$confirm(`确定禁用应用？`, '提示', {type: 'warning'})
141+
.then(() => this.$message.success('已禁用'))
142+
.catch(() => {
143+
})
153144
},
154145
155146
deleteApp(app) {
156-
this.$confirm(`确定删除应用：${app.name}？`, "提示", { type: "warning" })
157-
.then(() => this.$message.success("已删除"))
158-
.catch(()=>{});
147+
this.$confirm(`确定删除应用：${app.name}？`, '提示', {type: 'warning'})
148+
.then(() => this.$message.success('已删除'))
149+
.catch(() => {
150+
})
159151
}
160152
}
161-
};
153+
}
162154
</script>
163155

164-
165156
<style scoped lang="scss">
166157
.app-page {
167158
padding: 20px;
@@ -189,10 +180,12 @@ export default {
189180
font-size: 12px;
190181
margin-left: 5px;
191182
}
183+
192184
.empty {
193185
color: #999;
194186
font-size: 12px;
195187
}
188+
196189
.danger {
197190
color: #f56c6c !important;
198191
}

0 commit comments

Comments
 (0)