Skip to content

Commit f36b015

Browse files
cherishsincecherishsince
committed
【增加】dataset 列表页面
1 parent 95bb19d commit f36b015

File tree

1 file changed

+152
-0
lines changed

1 file changed

+152
-0
lines changed

‎src/views/knowledge/dataset.vue

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<template>
2+
<div class="knowledge-base-container">
3+
<div class="card-container">
4+
<el-card class="create-card" shadow="hover">
5+
<div class="create-content">
6+
<el-icon class="create-icon"><Plus /></el-icon>
7+
<span class="create-text">创建知识库</span>
8+
</div>
9+
<div class="create-footer">
10+
导入您自己的文本数据或通过 Webhook 实时写入数据以增强 LLM 的上下文。
11+
</div>
12+
</el-card>
13+
14+
<el-card class="document-card" shadow="hover" v-for="index in 4" :key="index">
15+
<div class="document-header">
16+
<el-icon><Folder /></el-icon>
17+
<span>接口鉴权示例代码.md</span>
18+
</div>
19+
<div class="document-info">
20+
<el-tag size="small">1 文档</el-tag>
21+
<el-tag size="small" type="info">5 千字符</el-tag>
22+
<el-tag size="small" type="warning">0 关联应用</el-tag>
23+
</div>
24+
<p class="document-description">
25+
useful for when you want to answer queries about the 接口鉴权示例代码.md
26+
</p>
27+
</el-card>
28+
</div>
29+
30+
<div class="pagination-container">
31+
<el-pagination
32+
v-model:current-page="currentPage"
33+
v-model:page-size="pageSize"
34+
:page-sizes="[10, 20, 30, 40]"
35+
:small="false"
36+
:disabled="false"
37+
:background="true"
38+
layout="total, sizes, prev, pager, next, jumper"
39+
:total="total"
40+
@size-change="handleSizeChange"
41+
@current-change="handleCurrentChange"
42+
/>
43+
</div>
44+
</div>
45+
</template>
46+
47+
<script setup>
48+
import { ref } from 'vue'
49+
import { Folder, Plus } from '@element-plus/icons-vue'
50+
51+
const currentPage = ref(1)
52+
const pageSize = ref(10)
53+
const total = ref(100) // 假设总共有100条数据
54+
55+
const handleSizeChange = (val) => {
56+
console.log(`每页 ${val} 条`)
57+
}
58+
59+
const handleCurrentChange = (val) => {
60+
console.log(`当前页: ${val}`)
61+
}
62+
</script>
63+
64+
<style scoped>
65+
.knowledge-base-container {
66+
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
67+
position: absolute;
68+
padding: 20px;
69+
margin: 0 auto;
70+
display: flex;
71+
flex-direction: column;
72+
top: 0;
73+
bottom: 40px;
74+
width: 100%;
75+
}
76+
77+
.card-container {
78+
display: flex;
79+
flex-wrap: wrap; /* Enable wrapping */
80+
gap: 20px;
81+
margin-bottom: auto; /* Pushes pagination to the bottom */
82+
}
83+
84+
.create-card, .document-card {
85+
flex: 1 1 360px; /* Allow cards to grow and shrink */
86+
min-width: 0;
87+
max-width: 400px;
88+
border-radius: 10px;
89+
cursor: pointer;
90+
}
91+
92+
.create-card {
93+
background-color: rgba(168, 168, 168, 0.22);
94+
}
95+
.create-card:hover {
96+
background-color: #fff;
97+
}
98+
99+
.create-content {
100+
display: flex;
101+
align-items: center;
102+
gap: 10px;
103+
margin-bottom: 15px;
104+
}
105+
106+
.create-icon {
107+
font-size: 24px;
108+
color: #409EFF;
109+
}
110+
111+
.create-text {
112+
font-size: 18px;
113+
font-weight: bold;
114+
color: #303133;
115+
}
116+
117+
.create-footer {
118+
font-size: 14px;
119+
color: #909399;
120+
line-height: 1.5;
121+
}
122+
123+
.document-header {
124+
display: flex;
125+
align-items: center;
126+
gap: 10px;
127+
font-size: 16px;
128+
font-weight: bold;
129+
margin-bottom: 15px;
130+
}
131+
132+
.document-info {
133+
display: flex;
134+
gap: 10px;
135+
margin-bottom: 15px;
136+
}
137+
138+
.document-description {
139+
color: #606266;
140+
font-size: 14px;
141+
line-height: 1.5;
142+
}
143+
144+
.pagination-container {
145+
position: absolute;
146+
width: 100%;
147+
bottom: 0;
148+
display: flex;
149+
justify-content: center;
150+
margin-top: 20px;
151+
}
152+
</style>

0 commit comments

Comments
 (0)