Skip to content

Commit 05c78d7

Browse files
committed
perf: Control the button through configuration
1 parent c638e39 commit 05c78d7

File tree

2 files changed

+116
-65
lines changed

2 files changed

+116
-65
lines changed

src/components/Common/DataActions/index.vue

Lines changed: 41 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
v-if="action.dropdown"
66
v-show="action.dropdown.length > 0"
77
:key="action.name"
8-
:class="[action.name, { grouped: action.grouped }]"
8+
:class="[action.name, { grouped: action.grouped, 'table-action-text': isTableActionText }]"
99
:size="action.size"
1010
:split-button="!!action.split"
1111
:type="action.type"
@@ -16,11 +16,12 @@
1616
@command="handleDropdownCallback"
1717
>
1818
<span v-if="action.split" :style="{ cursor: action.disabled ? 'not-allowed' : 'pointer' }">
19-
{{ action.title }}
19+
<Icon v-if="isEllipsisAction(action)" class="ellipsis-icon" icon="fa-ellipsis-v" />
20+
<span v-else>{{ getActionTitle(action) }}</span>
2021
</span>
2122
<el-button
2223
v-else
23-
:class="action.name"
24+
:class="[action.name, { 'table-action-text': isTableActionText }]"
2425
:size="size"
2526
class="more-action"
2627
v-bind="{ ...cleanButtonAction(action), icon: '' }"
@@ -29,7 +30,9 @@
2930
<Icon v-if="action.icon" :icon="action.icon" />
3031
</span>
3132
<span v-if="action.title">
32-
{{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
33+
<Icon v-if="isEllipsisAction(action)" class="ellipsis-icon" icon="fa-ellipsis-v" />
34+
<span v-else>{{ getActionTitle(action) }}</span>
35+
<i class="el-icon-arrow-down el-icon--right" />
3336
</span>
3437
</el-button>
3538
<el-dropdown-menu slot="dropdown" style="overflow: auto; max-height: 60vh">
@@ -69,7 +72,7 @@
6972
<el-button
7073
v-else
7174
:key="action.name"
72-
:class="[action.name, { grouped: action.grouped }]"
75+
:class="[action.name, { grouped: action.grouped, 'table-action-text': isTableActionText }]"
7376
:size="size"
7477
class="action-item"
7578
v-bind="{ ...cleanButtonAction(action), icon: '' }"
@@ -80,7 +83,8 @@
8083
<span v-if="action.icon" style="vertical-align: initial">
8184
<Icon :icon="action.icon" />
8285
</span>
83-
{{ action.title }}
86+
<Icon v-if="isEllipsisAction(action)" class="ellipsis-icon" icon="fa-ellipsis-v" />
87+
<span v-else>{{ getActionTitle(action) }}</span>
8488
</span>
8589
</el-tooltip>
8690
</el-button>
@@ -118,9 +122,21 @@ export default {
118122
computed: {
119123
iActions() {
120124
return this.cleanActions(this.actions)
125+
},
126+
tableActionButtonType() {
127+
return this.$store?.state?.settings?.tableActionButtonType || 'default'
128+
},
129+
isTableActionText() {
130+
return this.tableActionButtonType === 'text'
121131
}
122132
},
123133
methods: {
134+
getActionTitle(action) {
135+
return action?.title
136+
},
137+
isEllipsisAction(action) {
138+
return this.isTableActionText && action?.title === '...'
139+
},
124140
actionsHasIcon(actions) {
125141
return actions.some(action => action.icon)
126142
},
@@ -230,6 +246,7 @@ export default {
230246
$btn-text-color: #ffffff;
231247
$color-btn-background: var(--color-primary-light-3, #e8f7f4);
232248
$color-btn-focus-background: var(--color-primary-light-1, var(--color-primary));
249+
$color-text-hover: var(--color-primary-light-1);
233250
$color-divided: #e4e7ed;
234251
$color-drop-menu-title: #909399;
235252
$color-drop-menu-border: #e4e7ed;
@@ -318,6 +335,24 @@ $color-drop-menu-border: #e4e7ed;
318335
background-color: $color-btn-focus-background;
319336
}
320337
}
338+
339+
.action-item.table-action-text.el-button,
340+
::v-deep .action-item.table-action-text.el-dropdown .el-button {
341+
color: var(--color-primary) !important;
342+
background-color: transparent !important;
343+
border-color: transparent !important;
344+
transition: color 0.2s ease;
345+
}
346+
347+
.action-item.table-action-text.el-button:hover,
348+
.action-item.table-action-text.el-button:focus,
349+
::v-deep .action-item.table-action-text.el-dropdown .el-button:hover,
350+
::v-deep .action-item.table-action-text.el-dropdown .el-button:focus {
351+
color: $color-text-hover !important;
352+
background-color: transparent !important;
353+
border-color: transparent !important;
354+
box-shadow: none !important;
355+
}
321356
}
322357
323358
// 下拉 options

src/store/modules/settings.js

Lines changed: 75 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ const state = {
1414
publicSettings: {},
1515
hasValidLicense: false,
1616
authMethods: {},
17-
themeColors: JSON.parse(localStorage.getItem('themeColors')) || {}
17+
themeColors: JSON.parse(localStorage.getItem('themeColors')) || {},
18+
tableActionButtonType: 'default'
1819
}
1920

2021
const mutations = {
@@ -26,6 +27,7 @@ const mutations = {
2627
SET_PUBLIC_SETTINGS: (state, settings) => {
2728
state.publicSettings = settings
2829
state.themeColors = settings?.INTERFACE?.theme_info?.colors || {}
30+
state.tableActionButtonType = settings?.INTERFACE.theme_info['table-action-button'] || 'default'
2931

3032
if (settings['XPACK_ENABLED']) {
3133
state.hasValidLicense = settings['XPACK_LICENSE_IS_VALID']
@@ -47,55 +49,63 @@ const actions = {
4749
// get user Profile
4850
getPublicSettings({ commit, state }, isOpen) {
4951
return new Promise((resolve, reject) => {
50-
getPublicSettings(isOpen).then(response => {
51-
const data = response || {}
52-
if (isOpen) {
53-
const faviconURL = data['INTERFACE']?.favicon
54-
let link = document.querySelector("link[rel*='icon']")
55-
if (!link) {
56-
link = document.createElement('link')
57-
link.type = 'image/x-icon'
58-
link.rel = 'shortcut icon'
59-
document.getElementsByTagName('head')[0].appendChild(link)
60-
}
61-
if (faviconURL) {
62-
link.href = faviconURL
63-
}
64-
// 动态修改Title
65-
document.title = data?.INTERFACE?.login_title || ''
66-
}
67-
const responseThemeColors = data?.INTERFACE?.theme_info?.colors || {}
68-
const cachedThemeColors = (() => {
69-
if (state.themeColors && Object.keys(state.themeColors).length > 0) {
70-
return state.themeColors
71-
}
72-
try {
73-
return JSON.parse(localStorage.getItem('themeColors')) || {}
74-
} catch (error) {
75-
return {}
52+
getPublicSettings(isOpen)
53+
.then(response => {
54+
const data = response || {}
55+
if (isOpen) {
56+
const faviconURL = data['INTERFACE']?.favicon
57+
let link = document.querySelector("link[rel*='icon']")
58+
if (!link) {
59+
link = document.createElement('link')
60+
link.type = 'image/x-icon'
61+
link.rel = 'shortcut icon'
62+
document.getElementsByTagName('head')[0].appendChild(link)
63+
}
64+
if (faviconURL) {
65+
link.href = faviconURL
66+
}
67+
// 动态修改Title
68+
document.title = data?.INTERFACE?.login_title || ''
7669
}
77-
})()
78-
const themeColors =
79-
Object.keys(responseThemeColors).length > 0 ? responseThemeColors : cachedThemeColors
80-
const nextSettings = {
81-
...data,
82-
INTERFACE: {
83-
...(data?.INTERFACE || {}),
84-
theme_info: {
85-
...(data?.INTERFACE?.theme_info || {}),
86-
colors: themeColors
70+
71+
const responseThemeColors = data?.INTERFACE?.theme_info?.colors || {}
72+
73+
const cachedThemeColors = (() => {
74+
if (state.themeColors && Object.keys(state.themeColors).length > 0) {
75+
return state.themeColors
76+
}
77+
try {
78+
return JSON.parse(localStorage.getItem('themeColors')) || {}
79+
} catch (error) {
80+
return {}
8781
}
82+
})()
83+
84+
const themeColors =
85+
Object.keys(responseThemeColors).length > 0 ? responseThemeColors : cachedThemeColors
86+
const nextSettings = {
87+
...data,
88+
INTERFACE: {
89+
...(data?.INTERFACE || {}),
90+
theme_info: {
91+
...(data?.INTERFACE?.theme_info || {}),
92+
colors: themeColors
93+
}
94+
}
95+
}
96+
97+
commit('SET_PUBLIC_SETTINGS', nextSettings)
98+
changeThemeColors(themeColors || {})
99+
resolve(response)
100+
})
101+
.catch(error => {
102+
if (error.response && error.response.status === 400) {
103+
alert(
104+
'自 v3.6 版本开始,要求配置可信任域名或主机,否则无法正常使用, 查看: https://github.com/jumpserver/jumpserver/releases/tag/v3.6.0'
105+
)
88106
}
89-
}
90-
commit('SET_PUBLIC_SETTINGS', nextSettings)
91-
changeThemeColors(themeColors || {})
92-
resolve(response)
93-
}).catch(error => {
94-
if (error.response && error.response.status === 400) {
95-
alert('自 v3.6 版本开始,要求配置可信任域名或主机,否则无法正常使用, 查看: https://github.com/jumpserver/jumpserver/releases/tag/v3.6.0')
96-
}
97-
reject(error)
98-
})
107+
reject(error)
108+
})
99109
})
100110
},
101111
changeThemeStyle({ commit }, themeColors) {
@@ -108,12 +118,15 @@ const actions = {
108118
return new Promise((resolve, reject) => {
109119
const url = '/api/v1/settings/setting/?category=auth'
110120
const data = { [key]: value }
111-
request.patch(url, data).then(res => {
112-
state.authMethods[key] = value
113-
resolve(res)
114-
}).catch(error => {
115-
reject(error)
116-
})
121+
request
122+
.patch(url, data)
123+
.then(res => {
124+
state.authMethods[key] = value
125+
resolve(res)
126+
})
127+
.catch(error => {
128+
reject(error)
129+
})
117130
})
118131
},
119132
getAuthMethods({ commit, state }) {
@@ -122,12 +135,15 @@ const actions = {
122135
resolve(state.authMethods)
123136
} else {
124137
const url = '/api/v1/settings/setting/?category=auth'
125-
request.get(url).then(res => {
126-
state.authMethods = res
127-
resolve(res)
128-
}).catch(error => {
129-
reject(error)
130-
})
138+
request
139+
.get(url)
140+
.then(res => {
141+
state.authMethods = res
142+
resolve(res)
143+
})
144+
.catch(error => {
145+
reject(error)
146+
})
131147
}
132148
})
133149
}

0 commit comments

Comments
 (0)