搜索结果列表页面开发
This commit is contained in:
付民康
25
src/components/RepoFileList/README.md
Normal file
25
src/components/RepoFileList/README.md
Normal file
@@ -0,0 +1,25 @@
|
||||
TS接口文档可以查看同文件夹下的types.ts, demo可以访问/demo777进行查看
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|-------------|-----------|---------------------------|-------------------------------- |------------|
|
||||
| data | 项目文件列表数据 | Array<RepoFileListRow> | — | [] |
|
||||
| columns | 项目文件列表字段 | Array<RepoFileListColumn> | — | 具体参考组件内的代码 |
|
||||
| showHeader? | 是否显示表头 | boolean | — | false |
|
||||
| headerBg? | 是否显示表头背景色 | boolean | — | false |
|
||||
|
||||
### Emits
|
||||
|
||||
| 方法 | 说明 | 返回值 |
|
||||
|-----------|--------|-----------------------|
|
||||
| rowClick | 行点击触发 | data: RepoFileListRow |
|
||||
| fileClick | 文件点击触发 | data: RepoFileListRow |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|--------------------|--------------|
|
||||
| header | 组件头部插槽，不在表格内 |
|
||||
| th:${column.field} | 对应列表头的插槽 |
|
||||
| td:${column.field} | 对应列表格内容的插槽 |
|
||||
121
src/components/RepoFileList/index.vue
Normal file
121
src/components/RepoFileList/index.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<section ref="fileRef" class="g-repo-file-list g-card">
|
||||
<div v-if="$slots.header" class="g-repo-file-list-header">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<d-table v-bind="$props" style="width: 100%;">
|
||||
<d-column v-for="(column, index) in columns" :key="`${column.field}_${index}`" v-bind="column">
|
||||
<template #header>
|
||||
<slot :name="`th:${column.field}`" :column="column" :style="{width:`${column.width}%`}">{{ column.title }}</slot>
|
||||
</template>
|
||||
<template #default="{ row, rowIndex }">
|
||||
<slot :name="`td:${column.field}`" :row="row" :rowIndex="rowIndex" :column="column" :columnIndex="index">
|
||||
<FileIcon
|
||||
v-if="column.isFile"
|
||||
:type="row.filetype"
|
||||
:title="row.filename"
|
||||
:link="row.fileLink"
|
||||
:file="row"
|
||||
@click.stop="onFileClick(row)"
|
||||
/>
|
||||
<span v-else-if="column.isTime" class="g-repo-file-list-text g-repo-file-list-time">
|
||||
{{ formatTimeFromNow(row[column.field]) }}
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="g-repo-file-list-text"
|
||||
:title="row[column.field]"
|
||||
>
|
||||
<GLink v-if="row.commitLink" :to="row.commitLink">
|
||||
{{ row[column.field] || '-' }}
|
||||
</GLink>
|
||||
<template v-else>
|
||||
{{ row[column.field] || '-' }}
|
||||
</template>
|
||||
</span>
|
||||
</slot>
|
||||
</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import FileIcon from '@/components/FileIcon/index.vue';
|
||||
import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
|
||||
import type { RepoFileListColumn, RepoFileListRow } from '@/components/RepoFileList/types';
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
data: Array<RepoFileListRow>;
|
||||
columns?: RepoFileListColumn[];
|
||||
showHeader?: boolean; // 是否显示表头
|
||||
headerBg?: boolean; // 是否显示表头背景色
|
||||
}>(),
|
||||
{
|
||||
data: () => [],
|
||||
columns: () => [
|
||||
{
|
||||
title: '文件',
|
||||
field: 'file',
|
||||
isFile: true,
|
||||
width: 26
|
||||
},
|
||||
{
|
||||
title: '最后提交记录',
|
||||
field: 'commit',
|
||||
width: 56
|
||||
},
|
||||
{
|
||||
title: '最后更新时间',
|
||||
field: 'updateTime',
|
||||
isTime: true,
|
||||
width: 18,
|
||||
align: 'center'
|
||||
}
|
||||
],
|
||||
showHeader: false,
|
||||
headerBg: false
|
||||
}
|
||||
);
|
||||
|
||||
const { formatTimeFromNow } = useTimeFormat();
|
||||
|
||||
const emits = defineEmits<{(e: 'fileClick', data: RepoFileListRow): void }>();
|
||||
|
||||
const onFileClick = (data: RepoFileListRow) => {
|
||||
emits('fileClick', data);
|
||||
};
|
||||
|
||||
const fileRef = ref(null);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'devui-theme/styles-var/devui-var.scss';
|
||||
|
||||
.g-repo-file-list {
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
min-width: 500px;
|
||||
&-header {
|
||||
border-bottom: 1px solid var(--border-color-ligher);
|
||||
}
|
||||
&-text {
|
||||
color: var(--color-ligh);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
:deep(.devui-table__thead > tr > th) {
|
||||
line-height: 24px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
:deep(.devui-table__tbody .devui-table__cell) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
30
src/components/RepoFileList/types.ts
Normal file
30
src/components/RepoFileList/types.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
export type RepoFileListColumn = {
|
||||
// 标题
|
||||
title: string;
|
||||
// column key值
|
||||
field: string;
|
||||
// column是否为文件列，为true则使用FileIcon组件，自定义插槽的时候不受此影响
|
||||
isFile?: boolean;
|
||||
// 是否为时间列，为true则使用组件内自带的时间转换，自定义插槽的时候不受此影响
|
||||
isTime?: boolean;
|
||||
// 列宽, 不填的时候自适应
|
||||
width?: number;
|
||||
// 最大宽度
|
||||
maxWidth?: number;
|
||||
}
|
||||
|
||||
export type RepoFileListRow = {
|
||||
// 文件类型，用于显示对应文件的icon
|
||||
filetype: string;
|
||||
// 文件名称
|
||||
filename: string;
|
||||
// 文件对应的路由地址
|
||||
fileLink?: string;
|
||||
// 最后一次提交内容
|
||||
commit: string;
|
||||
// commit对应的路由地址
|
||||
commitLink?: string;
|
||||
// 最后一次更新时间
|
||||
updateTime: string;
|
||||
[propName: string]: any
|
||||
}
|
||||
Reference in New Issue
Block a user