|
|
@@ -1,152 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="knowledge-base-container">
|
|
|
- <div class="card-container">
|
|
|
- <el-card class="create-card" shadow="hover">
|
|
|
- <div class="create-content">
|
|
|
- <el-icon class="create-icon"><Plus /></el-icon>
|
|
|
- <span class="create-text">创建知识库</span>
|
|
|
- </div>
|
|
|
- <div class="create-footer">
|
|
|
- 导入您自己的文本数据或通过 Webhook 实时写入数据以增强 LLM 的上下文。
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
-
|
|
|
- <el-card class="document-card" shadow="hover" v-for="index in 4" :key="index">
|
|
|
- <div class="document-header">
|
|
|
- <el-icon><Folder /></el-icon>
|
|
|
- <span>接口鉴权示例代码.md</span>
|
|
|
- </div>
|
|
|
- <div class="document-info">
|
|
|
- <el-tag size="small">1 文档</el-tag>
|
|
|
- <el-tag size="small" type="info">5 千字符</el-tag>
|
|
|
- <el-tag size="small" type="warning">0 关联应用</el-tag>
|
|
|
- </div>
|
|
|
- <p class="document-description">
|
|
|
- useful for when you want to answer queries about the 接口鉴权示例代码.md
|
|
|
- </p>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="pagination-container">
|
|
|
- <el-pagination
|
|
|
- v-model:current-page="currentPage"
|
|
|
- v-model:page-size="pageSize"
|
|
|
- :page-sizes="[10, 20, 30, 40]"
|
|
|
- :small="false"
|
|
|
- :disabled="false"
|
|
|
- :background="true"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="total"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import { ref } from 'vue'
|
|
|
-import { Folder, Plus } from '@element-plus/icons-vue'
|
|
|
-
|
|
|
-const currentPage = ref(1)
|
|
|
-const pageSize = ref(10)
|
|
|
-const total = ref(100) // 假设总共有100条数据
|
|
|
-
|
|
|
-const handleSizeChange = (val) => {
|
|
|
- console.log(`每页 ${val} 条`)
|
|
|
-}
|
|
|
-
|
|
|
-const handleCurrentChange = (val) => {
|
|
|
- console.log(`当前页: ${val}`)
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.knowledge-base-container {
|
|
|
- font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
|
|
- position: absolute;
|
|
|
- padding: 20px;
|
|
|
- margin: 0 auto;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- top: 0;
|
|
|
- bottom: 40px;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.card-container {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap; /* Enable wrapping */
|
|
|
- gap: 20px;
|
|
|
- margin-bottom: auto; /* Pushes pagination to the bottom */
|
|
|
-}
|
|
|
-
|
|
|
-.create-card, .document-card {
|
|
|
- flex: 1 1 360px; /* Allow cards to grow and shrink */
|
|
|
- min-width: 0;
|
|
|
- max-width: 400px;
|
|
|
- border-radius: 10px;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-.create-card {
|
|
|
- background-color: rgba(168, 168, 168, 0.22);
|
|
|
-}
|
|
|
-.create-card:hover {
|
|
|
- background-color: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-.create-content {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
- margin-bottom: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-.create-icon {
|
|
|
- font-size: 24px;
|
|
|
- color: #409EFF;
|
|
|
-}
|
|
|
-
|
|
|
-.create-text {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- color: #303133;
|
|
|
-}
|
|
|
-
|
|
|
-.create-footer {
|
|
|
- font-size: 14px;
|
|
|
- color: #909399;
|
|
|
- line-height: 1.5;
|
|
|
-}
|
|
|
-
|
|
|
-.document-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-.document-info {
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
- margin-bottom: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-.document-description {
|
|
|
- color: #606266;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 1.5;
|
|
|
-}
|
|
|
-
|
|
|
-.pagination-container {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- bottom: 0;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin-top: 20px;
|
|
|
-}
|
|
|
-</style>
|