Skip to content

Commit 5fa4a15

Browse files
zhengkunwang223zhengkunwang223
authored
style: Optimize the table styling. (#12540)
1 parent 81c551a commit 5fa4a15

3 files changed

Lines changed: 155 additions & 32 deletions

File tree

‎agent/app/service/agents_hermes_channels.go‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,9 +94,13 @@ func writeHermesQQBotChannelConfig(confDir string, config dto.AgentQQBotConfig)
9494
delete(envMap, "QQ_ALLOWED_USERS")
9595
delete(envMap, "QQ_ALLOW_ALL_USERS")
9696
delete(envMap, "QQ_MARKDOWN_SUPPORT")
97+
if config.DmPolicy == "open" {
98+
envMap["QQ_ALLOW_ALL_USERS"] = "true"
99+
}
97100
if err := writeHermesEnvMap(envPath, envMap, []string{
98101
"QQ_APP_ID",
99102
"QQ_CLIENT_SECRET",
103+
"QQ_ALLOW_ALL_USERS",
100104
"QQ_HOME_CHANNEL",
101105
"QQ_HOME_CHANNEL_NAME",
102106
"QQ_STT_API_KEY",
@@ -150,9 +154,13 @@ func readHermesWecomChannelConfig(confDir string) (*dto.AgentWecomConfig, error)
150154
allowFrom = splitHermesEnvList(envMap["WECOM_ALLOWED_USERS"])
151155
}
152156
groupAllowFrom := extractStringList(extra["group_allow_from"])
153-
dmPolicy := extractStringValue(extra["dm_policy"])
154-
if dmPolicy == "" {
157+
dmPolicy := "pairing"
158+
if extractHermesEnvBool(envMap, "WECOM_ALLOW_ALL_USERS", false) {
155159
dmPolicy = "open"
160+
} else if len(allowFrom) > 0 {
161+
dmPolicy = "allowlist"
162+
} else if policy := extractStringValue(extra["dm_policy"]); policy != "" {
163+
dmPolicy = policy
156164
}
157165
groupPolicy := extractStringValue(extra["group_policy"])
158166
if groupPolicy == "" {
@@ -190,11 +198,22 @@ func writeHermesWecomChannelConfig(confDir string, config dto.AgentWecomConfig)
190198
delete(envMap, "WECOM_SECRET")
191199
}
192200
delete(envMap, "WECOM_ALLOWED_USERS")
201+
delete(envMap, "WECOM_ALLOW_ALL_USERS")
193202
delete(envMap, "WECOM_DM_POLICY")
194203
delete(envMap, "WECOM_GROUP_POLICY")
204+
switch config.DmPolicy {
205+
case "open":
206+
envMap["WECOM_ALLOW_ALL_USERS"] = "true"
207+
case "allowlist":
208+
if allow := joinHermesEnvList(config.AllowFrom); allow != "" {
209+
envMap["WECOM_ALLOWED_USERS"] = allow
210+
}
211+
}
195212
if err := writeHermesEnvMap(envPath, envMap, []string{
196213
"WECOM_BOT_ID",
197214
"WECOM_SECRET",
215+
"WECOM_ALLOW_ALL_USERS",
216+
"WECOM_ALLOWED_USERS",
198217
}); err != nil {
199218
return err
200219
}

‎frontend/src/components/complex-table/index.vue‎

Lines changed: 52 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
</div>
3535

3636
<div
37+
ref="paginationRef"
3738
class="complex-table__pagination flex items-center w-full sm:flex-row flex-col text-xs sm:text-sm"
3839
v-if="props.paginationConfig"
3940
:class="{ '!justify-between': slots.paginationLeft, '!justify-end': !slots.paginationLeft }"
@@ -47,12 +48,9 @@
4748
:page-sizes="[5, 10, 20, 50, 100, 200, 500]"
4849
@size-change="sizeChange"
4950
@current-change="currentChange"
51+
:pager-count="responsivePagerCount"
5052
:size="mobile || paginationConfig.small ? 'small' : 'default'"
51-
:layout="
52-
mobile || paginationConfig.small
53-
? 'total, prev, pager, next'
54-
: 'total, sizes, prev, pager, next, jumper'
55-
"
53+
:layout="responsivePaginationLayout"
5654
/>
5755
</slot>
5856
</div>
@@ -114,7 +112,10 @@ const mobile = computed(() => {
114112
const tableRef = ref();
115113
const tableHeight = ref<number | string>('');
116114
const menuRef = ref<HTMLElement | null>(null);
115+
const paginationRef = ref<HTMLElement | null>(null);
117116
const leftSelect = ref(false);
117+
const paginationWidth = ref(0);
118+
let paginationResizeObserver: ResizeObserver | null = null;
118119
119120
const rightClick = ref({
120121
visible: false,
@@ -197,6 +198,33 @@ function clearSort() {
197198
tableRef.value.refElTable.clearSort();
198199
}
199200
201+
const updatePaginationWidth = () => {
202+
paginationWidth.value = paginationRef.value?.clientWidth || 0;
203+
};
204+
205+
const responsivePaginationLayout = computed(() => {
206+
if (mobile.value || props.paginationConfig?.small) {
207+
return 'total, prev, pager, next';
208+
}
209+
if (paginationWidth.value < 520) {
210+
return 'total, prev, pager, next';
211+
}
212+
return 'total, sizes, prev, pager, next, jumper';
213+
});
214+
215+
const responsivePagerCount = computed(() => {
216+
if (mobile.value || props.paginationConfig?.small) {
217+
return 5;
218+
}
219+
if (paginationWidth.value < 520) {
220+
return 3;
221+
}
222+
if (paginationWidth.value < 720) {
223+
return 5;
224+
}
225+
return 7;
226+
});
227+
200228
const adjustedX = ref(rightClick.value.left);
201229
const adjustedY = ref(rightClick.value.top);
202230
@@ -273,6 +301,13 @@ const toggleSelection = () => {
273301
274302
onMounted(() => {
275303
calcHeight();
304+
nextTick(() => {
305+
updatePaginationWidth();
306+
if (paginationRef.value) {
307+
paginationResizeObserver = new ResizeObserver(updatePaginationWidth);
308+
paginationResizeObserver.observe(paginationRef.value);
309+
}
310+
});
276311
window.addEventListener('resize', calcHeight);
277312
watch(
278313
() => props.height,
@@ -284,6 +319,8 @@ onMounted(() => {
284319
285320
onBeforeUnmount(() => {
286321
window.removeEventListener('resize', calcHeight);
322+
paginationResizeObserver?.disconnect();
323+
paginationResizeObserver = null;
287324
});
288325
</script>
289326

@@ -362,5 +399,15 @@ onBeforeUnmount(() => {
362399
.complex-table__pagination {
363400
flex: 1;
364401
@include flex-row(flex-end);
402+
403+
:deep(.el-pagination__sizes .el-select) {
404+
width: 128px;
405+
min-width: 128px;
406+
}
407+
408+
:deep(.el-pagination--small .el-pagination__sizes .el-select) {
409+
width: 100px;
410+
min-width: 100px;
411+
}
365412
}
366413
</style>

‎frontend/src/views/app-store/detail/params/index.vue‎

Lines changed: 82 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -24,24 +24,25 @@
2424
clearable
2525
@change="updateParam"
2626
></el-input>
27-
<el-select
28-
class="p-w-200"
29-
v-model="form[p.envKey]"
30-
v-if="p.type == 'service'"
31-
@change="changeService(form[p.envKey], p.services)"
32-
>
33-
<el-option
34-
v-for="service in p.services"
35-
:key="service.label"
36-
:value="service.value"
37-
:label="service.label"
38-
></el-option>
39-
</el-select>
40-
<span v-if="p.type === 'service' && p.services.length === 0" class="ml-1.5">
41-
<el-link type="primary" underline="never" @click="toPage(p.key)">
42-
{{ $t('app.toInstall') }}
43-
</el-link>
44-
</span>
27+
<div v-if="p.type == 'service'" class="service-param-row">
28+
<el-select
29+
class="service-param-select p-w-200"
30+
v-model="form[p.envKey]"
31+
@change="changeService(form[p.envKey], p.services)"
32+
>
33+
<el-option
34+
v-for="service in p.services"
35+
:key="service.label"
36+
:value="service.value"
37+
:label="service.label"
38+
></el-option>
39+
</el-select>
40+
<span v-if="p.services.length === 0" class="service-install-link">
41+
<el-link class="service-install-link__text" type="primary" underline="never" @click="toPage(p.key)">
42+
{{ $t('app.toInstall') }}
43+
</el-link>
44+
</span>
45+
</div>
4546
<el-select
4647
v-model="form[p.envKey]"
4748
v-if="p.type == 'select'"
@@ -56,13 +57,13 @@
5657
:label="service.label"
5758
></el-option>
5859
</el-select>
59-
<div v-if="p.type == 'apps'" class="flex space-x-4">
60-
<div class="flex-1">
60+
<div v-if="p.type == 'apps'" class="app-service-row">
61+
<div class="app-service-row__app">
6162
<el-form-item :prop="p.prop">
6263
<el-select
6364
v-model="form[p.envKey]"
6465
@change="getServices(p.child.envKey, form[p.envKey], p)"
65-
class="p-w-200"
66+
class="app-service-row__select p-w-200"
6667
>
6768
<el-option
6869
v-for="service in p.values"
@@ -73,13 +74,13 @@
7374
</el-select>
7475
</el-form-item>
7576
</div>
76-
<div class="flex-2">
77+
<div class="app-service-row__service">
7778
<el-form-item :prop="p.childProp">
7879
<el-select
7980
v-model="form[p.child.envKey]"
8081
v-if="p.child.type == 'service'"
8182
@change="changeService(form[p.child.envKey], p.services)"
82-
class="p-w-300"
83+
class="app-service-row__select p-w-300"
8384
>
8485
<el-option
8586
v-for="service in p.services"
@@ -110,8 +111,13 @@
110111
</el-select>
111112
</el-form-item>
112113
</div>
113-
<span v-if="p.child.type === 'service' && p.services.length === 0">
114-
<el-link type="primary" underline="never" @click="toPage(form[p.envKey])">
114+
<span v-if="p.child.type === 'service' && p.services.length === 0" class="service-install-link">
115+
<el-link
116+
class="service-install-link__text"
117+
type="primary"
118+
underline="never"
119+
@click="toPage(form[p.envKey])"
120+
>
115121
{{ $t('app.toInstall') }}
116122
</el-link>
117123
</span>
@@ -321,3 +327,54 @@ onMounted(() => {
321327
handleParams();
322328
});
323329
</script>
330+
331+
<style lang="scss" scoped>
332+
.service-param-row,
333+
.app-service-row {
334+
display: inline-flex;
335+
align-items: center;
336+
gap: 12px;
337+
max-width: 100%;
338+
flex-wrap: nowrap;
339+
}
340+
341+
.service-param-select,
342+
.app-service-row__app,
343+
.app-service-row__service {
344+
min-width: 0;
345+
}
346+
347+
.service-param-select {
348+
flex: 0 1 200px;
349+
}
350+
351+
.app-service-row__app {
352+
flex: 0 1 200px;
353+
}
354+
355+
.app-service-row__service {
356+
flex: 0 1 300px;
357+
}
358+
359+
.app-service-row__select {
360+
width: 100%;
361+
}
362+
363+
.app-service-row__app :deep(.el-form-item),
364+
.app-service-row__service :deep(.el-form-item) {
365+
margin-bottom: 0;
366+
}
367+
368+
.app-service-row__app :deep(.el-form-item__content),
369+
.app-service-row__service :deep(.el-form-item__content) {
370+
width: 100%;
371+
}
372+
373+
.service-install-link {
374+
flex: 0 0 auto;
375+
}
376+
377+
.service-install-link__text {
378+
white-space: nowrap;
379+
}
380+
</style>

0 commit comments

Comments
 (0)