<template>
|
<div class="h100 overflow-y-auto p-[16px]">
|
<div class="flex flex-col h100">
|
<div class="text-[16px] font-[500] h-[22px]">知识库管理</div>
|
<div class="mx-0 mt-[12px] mb-[16px] flex justify-between items-center">
|
<el-input
|
v-model="state.knowledgeBaseForm.Name"
|
style="width: 230px; margin-right: 10px; background: #ffffff; border-radius: 6px; transition: all 0.2s"
|
placeholder="搜索知识库名称"
|
clearable
|
:suffix-icon="Search"
|
></el-input>
|
<el-button icon="ele-Plus" @click="createKnowledgeBase()" type="primary"> 创建知识库 </el-button>
|
</div>
|
<div class="flex flex-wrap gap-3 overflow-x-auto set_item_jel">
|
<img :src="knowledgeLeft" class="set_item_img" />
|
<div class="set_item_content">
|
<div class="flex items-center">
|
<div class="mr-[10px] text-[14px] font-[500] h-[22px]">知识库名称</div>
|
<span class="set_desc_text">
|
<span class="set_desc_icon ywifont ywicon-wendang"> </span>
|
1个知识
|
</span>
|
<span class="set_desc_text">
|
<span class="set_desc_icon ywifont ywicon-wendang"> </span>
|
{{ state.currentKnowledgeBaseTime }}更新
|
</span>
|
</div>
|
</div>
|
<div class="set_btn_group">
|
<el-button link class="text-[12px] text-[#686682]">查看 </el-button>
|
<el-divider direction="vertical" />
|
<el-button link class="text-[12px] text-[#686682]">命中测试 </el-button>
|
<el-divider direction="vertical" />
|
<el-button link class="text-[12px] text-[#686682]">编辑 </el-button>
|
<el-divider direction="vertical" />
|
<el-button link class="text-[12px] text-[#686682]">删除 </el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { Search } from '@element-plus/icons-vue';
|
import { reactive } from 'vue';
|
import knowledgeLeft from '/static/images/knowledge/left.png';
|
const state = reactive({
|
knowledgeBaseForm: {
|
Name: '',
|
},
|
currentKnowledgeBaseTime: '2024-08-29 14:22:14',
|
});
|
//创建知识库
|
const createKnowledgeBase = () => {
|
console.log('createKnowledgeBase');
|
};
|
</script>
|
<style scoped lang="scss">
|
.set_item_jel {
|
align-items: center;
|
background: #fff;
|
border-radius: 16px;
|
max-width: 700px;
|
padding: 16px 20px;
|
width: 100%;
|
box-sizing: border-box;
|
.set_item_img {
|
width: 40px;
|
flex-shrink: 0;
|
border-style: none;
|
vertical-align: middle;
|
}
|
.set_item_content {
|
flex: 1;
|
margin: 0 12px 0 16px;
|
width: calc(100% - 300px);
|
.set_desc_text {
|
align-items: center;
|
display: flex;
|
gap: 2px;
|
color: rgba(135, 138, 171, 0.75);
|
font-size: 12px;
|
}
|
.set_desc_text:not(:last-child) {
|
margin-right: 10px;
|
}
|
.set_desc_icon {
|
color: rgba(135, 138, 171, 0.75);
|
align-items: center;
|
display: inline-flex;
|
font-size: 16px;
|
justify-content: center;
|
}
|
}
|
.set_btn_group {
|
flex-shrink: 0;
|
}
|
}
|
</style>
|
