Skip to content

Commit fbd253e

Browse files
mmdaplmmdapl
committed
feat(@142vip/vitepress): 优化VipProjectTable组件UI布局，支持同步加载数据，兼容移动端左右滚动表格
1 parent beb0317 commit fbd253e

1 file changed

Lines changed: 136 additions & 59 deletions

File tree

‎packages/vitepress/src/components/VipProjectTable.vue‎

Lines changed: 136 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
<script lang="ts" setup>
22
import type { VipProject } from '@142vip/vitepress'
3-
import { ElImage, ElLink, ElTable, ElTableColumn } from 'element-plus'
3+
import {
4+
ElDivider,
5+
ElImage,
6+
ElLink,
7+
ElTable,
8+
ElTableColumn,
9+
} from 'element-plus'
410
import 'element-plus/theme-chalk/base.css'
11+
import 'element-plus/theme-chalk/el-divider.css'
512
import 'element-plus/theme-chalk/el-image.css'
613
import 'element-plus/theme-chalk/el-link.css'
714
import 'element-plus/theme-chalk/el-table-column.css'
815
import 'element-plus/theme-chalk/el-table.css'
9-
import 'element-plus/theme-chalk/el-checkbox.css'
10-
import 'element-plus/theme-chalk/el-empty.css'
1116
1217
defineProps<{
1318
data: VipProject[]
@@ -31,84 +36,156 @@ function npmVersionBadgeUrl(name: string) {
3136
<h2 class="vip-project-table__title">
3237
{{ title ?? '核心业务' }}
3338
</h2>
34-
<ElTable
35-
:data="data"
36-
border
37-
class="vip-project-table"
38-
fit
39-
flexible
40-
stripe
41-
:show-header="false"
39+
<div
40+
:aria-label="title ?? '项目列表表格'"
41+
class="vip-project-table-scroll"
42+
role="region"
4243
>
43-
<ElTableColumn header-align="center" label="项目名称" min-width="180" prop="name" />
44-
<ElTableColumn align="center" header-align="center" label="项目代号" min-width="50" prop="id" />
45-
<ElTableColumn header-align="center" label="功能描述" min-width="300" prop="description" width="auto" />
46-
<ElTableColumn align="center" header-align="center" label="当前版本" min-width="120">
47-
<template #default="{ row }">
48-
<ElLink
49-
v-if="!row.private"
50-
:href="npmPackageUrl(row.name)"
51-
:underline="false"
52-
class="vip-project-table__badge-link"
53-
:title="row.name"
54-
rel="noopener noreferrer"
55-
target="_blank"
56-
>
44+
<ElTable
45+
:data="data"
46+
:show-header="false"
47+
border
48+
class="vip-project-table"
49+
fit
50+
flexible
51+
stripe
52+
>
53+
<ElTableColumn header-align="center" label="项目名称" min-width="160" prop="name" />
54+
<ElTableColumn align="center" header-align="center" label="项目代号" min-width="48" prop="id" />
55+
<ElTableColumn header-align="center" label="功能描述" min-width="280" prop="description" />
56+
<ElTableColumn align="center" header-align="center" label="当前版本" min-width="112">
57+
<template #default="{ row }">
58+
<ElLink
59+
v-if="!row.private"
60+
:href="npmPackageUrl(row.name)"
61+
:title="row.name"
62+
:underline="false"
63+
class="vip-project-table__badge-link"
64+
rel="noopener noreferrer"
65+
target="_blank"
66+
>
67+
<ElImage
68+
:src="npmVersionBadgeUrl(row.name)"
69+
:title="`${row.name} ${row.version}`"
70+
/>
71+
</ElLink>
5772
<ElImage
58-
:src="npmVersionBadgeUrl(row.name)"
73+
v-else
74+
:src="privateBadgeUrl(row.version)"
5975
:title="`${row.name} ${row.version}`"
6076
/>
61-
</ElLink>
62-
<ElImage
63-
v-else
64-
:src="privateBadgeUrl(row.version)"
65-
:title="`${row.name} ${row.version}`"
66-
/>
67-
</template>
68-
</ElTableColumn>
69-
<ElTableColumn align="center" header-align="center" label="文档" width="150">
70-
<template #default="{ row }">
71-
<ElLink :href="row.sourceCode" :underline="false" rel="noopener noreferrer" target="_blank" title="源码">
72-
源码
73-
</ElLink>&nbsp;
74-
<ElLink :href="row.changelog" :underline="false" rel="noopener noreferrer" target="_blank" title="日志">
75-
日志
76-
</ElLink>&nbsp;
77-
<ElLink :href="row.readme" :underline="false" rel="noopener noreferrer" target="_blank" title="文档">
78-
文档
79-
</ElLink>
80-
</template>
81-
</ElTableColumn>
82-
</ElTable>
77+
</template>
78+
</ElTableColumn>
79+
<ElTableColumn align="left" header-align="center" label="文档" width="148">
80+
<template #default="{ row }">
81+
<div class="vip-project-table__doc">
82+
<ElLink
83+
:href="row.sourceCode"
84+
:underline="false"
85+
class="vip-project-table__doc-link"
86+
rel="noopener noreferrer"
87+
target="_blank"
88+
type="primary"
89+
>
90+
源码
91+
</ElLink>
92+
<ElDivider class="vip-project-table__doc-divider" direction="vertical" />
93+
<ElLink
94+
:href="row.changelog"
95+
:underline="false"
96+
class="vip-project-table__doc-link"
97+
rel="noopener noreferrer"
98+
target="_blank"
99+
type="primary"
100+
>
101+
日志
102+
</ElLink>
103+
<ElDivider class="vip-project-table__doc-divider" direction="vertical" />
104+
<ElLink
105+
:href="row.readme"
106+
:underline="false"
107+
class="vip-project-table__doc-link"
108+
rel="noopener noreferrer"
109+
target="_blank"
110+
type="primary"
111+
>
112+
文档
113+
</ElLink>
114+
</div>
115+
</template>
116+
</ElTableColumn>
117+
</ElTable>
118+
</div>
83119
</template>
84120

85121
<style lang="scss" scoped>
122+
$vip-table-radius: 10px;
123+
86124
.vip-project-table__title {
87125
margin-top: 0;
88126
}
89127
128+
.vip-project-table-scroll {
129+
width: 100%;
130+
max-width: 100%;
131+
overflow-x: auto;
132+
overflow-y: visible;
133+
-webkit-overflow-scrolling: touch;
134+
overscroll-behavior-x: contain;
135+
border-radius: $vip-table-radius;
136+
scrollbar-width: thin;
137+
138+
// 抵消 VitePress `.vp-doc` 内对表格的外边距
139+
.vp-doc & {
140+
display: block;
141+
margin: 0 !important;
142+
143+
.vip-project-table {
144+
display: block;
145+
margin: 0 !important;
146+
overflow-x: visible;
147+
148+
:deep(table) {
149+
border-collapse: collapse;
150+
margin: 0 !important;
151+
}
152+
}
153+
}
154+
}
155+
90156
.vip-project-table {
91157
width: 100%;
92-
border-radius: 10px !important;
158+
min-width: 760px;
159+
border-radius: $vip-table-radius !important;
160+
161+
:deep(.el-link),
162+
:deep(.el-link:is(:hover, :focus, :active)) {
163+
text-decoration: none !important;
164+
}
93165
}
94166
95167
.vip-project-table__badge-link {
96168
display: inline-flex;
97169
vertical-align: middle;
98170
line-height: 0;
99171
}
100-
</style>
101172
102-
<style lang="scss">
103-
/* 避免 VitePress 文档全局 table 样式挤压本表格 */
104-
.vp-doc .vip-project-table {
105-
display: block;
106-
margin: 0 !important;
107-
overflow-x: auto;
173+
.vip-project-table__doc {
174+
display: inline-flex;
175+
flex-wrap: nowrap;
176+
align-items: center;
177+
white-space: nowrap;
178+
}
179+
180+
.vip-project-table__doc-link {
181+
padding: 2px;
108182
}
109183
110-
.vp-doc .vip-project-table :deep(table) {
111-
border-collapse: collapse;
112-
margin: 0 !important;
184+
.vip-project-table__doc-divider.el-divider--vertical {
185+
flex-shrink: 0;
186+
align-self: center;
187+
margin: 0 4px;
188+
height: 14px;
189+
border-color: var(--el-border-color-lighter);
113190
}
114191
</style>

0 commit comments

Comments
 (0)