知识库管理模块页面画写(未全部完成，待改版后再继续)

src/App.vue

@@ -594,4 +594,44 @@ input[type="number"] {
 .el-card{
   border: none !important;
 }
+
+.agent_page{
+    width: calc(100% - 26px);
+    height: calc(100vh - 26px);
+    background: #FFFFFF;
+    border-radius: 6px;
+    border: 1px solid #F3F4F6;
+    margin: 12px;
+    overflow-y: auto;
+}
+
+.adf{
+  display: flex;
+}
+.adfac{
+  display: flex;
+  align-items: center;
+}
+.adfacjc{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.adfacjb{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.adffcacjc{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.adffcacjb{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
 </style>

src/assets/scss/common.scss

@@ -485,6 +485,7 @@ img {
   position: relative;
   height: 100%;
   width: 100%;
+  overflow: hidden;
 
   &__wrapper {
     width: calc(100% - 240px);

src/router/index.js

@@ -55,6 +55,8 @@ export const moduleRoutes = {
     { path: '/agentProgram', component: () => import('@/views/modules/agent/program'), name: 'agentProgram', meta: { title: '项目管理', isTab: false } },
     { path: '/agentProgramAddTeam', component: () => import('@/views/modules/agent/program/addTeam'), name: 'agentProgramAddTeam', meta: { title: '添加团队', isTab: false } },
     { path: '/agentKnowledge', component: () => import('@/views/modules/agent/knowledge'), name: 'agentKnowledge', meta: { title: '知识库管理', isTab: false } },
+    { path: '/agentKnowledgeAdd', component: () => import('@/views/modules/agent/knowledge/add'), name: 'agentKnowledgeAdd', meta: { title: '创建知识库', isTab: false } },
+    { path: '/agentKnowledgeCategory', component: () => import('@/views/modules/agent/knowledgeCategory'), name: 'agentKnowledgeCategory', meta: { title: '类目管理', isTab: false } },
   ]
 }
 

src/views/main-sidebar.vue

@@ -107,24 +107,7 @@ export default {
       codeBtn:true,
       codeBtnText:'获取验证码',
       agree:false,
-      testMenus:[
-        {
-          menuId:2,
-          name:'知识库管理',
-          children:[],
-          pid:0,
-          type:0,
-          url:'/agentKnowledge',
-        },
-        {
-          menuId:6,
-          name:'项目管理',
-          children:[],
-          pid:0,
-          type:0,
-          url:'/agentProgram',
-        }
-      ],
+      testMenus:[],
       dataForm: {
         username: "admin",
         password: "cx8082",

src/views/modules/agent/knowledge.vue

@@ -1,6 +1,47 @@
 <template>
-    <div class="page">
-        11
+    <div class="agent_page">
+        <div class="top adfacjb">
+            <div class="left">知识库管理</div>
+            <div class="right adfac">
+                <div class="r_query adfacjb queryInput">
+                    <el-input v-model="queryParams.name" placeholder="请输入知识库名称查询"></el-input>
+                    <img src="@/assets/images/agent/query_mini.png">
+                </div>
+                <div class="r_add" @click="handleAdd">+ 创建知识库</div>
+            </div>
+        </div>
+        <template v-if="list.length">
+            <div class="list">
+                <div class="item adfac" v-for="(item, index) in list" :key="index">
+                    <div class="i_name adfac">
+                        <img src="@/assets/images/agent/book_mini.png">
+                        <div class="in_name">
+                            <p class="i_text">{{ item.name }}</p>
+                            <p class="i_tip">{{ item.intro }}</p>
+                        </div>
+                    </div>
+                    <div class="i_num adffcacjb">
+                        <p class="i_tip">知识数</p>
+                        <p class="i_text">{{item.num}}</p>
+                    </div>
+                    <div class="i_time adffcacjb">
+                        <p class="i_tip">更新时间</p>
+                        <p class="i_text">{{item.time}}</p>
+                    </div>
+                    <div class="i_opreations adfacjb">
+                        <div class="io_pre">查看</div>
+                        <div class="io_pre">编辑</div>
+                        <div class="io_pre">删除</div>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template v-else>
+            <div class="empty adffcacjc">
+                <img src="@/assets/images/agent/knowledge_empty.png">
+                <p>暂无知识库</p>
+            </div>
+        </template>
     </div>
 </template>
 
@@ -8,8 +49,158 @@
     import { ref, getCurrentInstance } from 'vue'
     const { proxy } = getCurrentInstance();
     
+    const queryParams = ref({
+        name: ''
+    })
+    const list = ref([
+        {
+            name: '知识库1',
+            intro: '这是一个知识库的简介，可以简要描述一下这个知识库的内容。',
+            num: 20,
+            time: '2023-04-01 09:21'
+        }
+    ])
+
+    const handleAdd = () => {
+        proxy.$router.push('agentKnowledgeAdd')
+    }
 </script>
 
 <style scoped lang="scss">
-    
+    ::v-deep .queryInput .el-input__inner{
+        border: none !important;
+        height: 30px !important;
+        line-height: 30px !important;
+        padding: 0 !important;
+        width: 200px !important;
+    }
+
+    .agent_page{
+        .top{
+            width: 100%;
+            padding: 20px;
+            box-sizing: border-box;
+            border-bottom: 1px solid #E5E7EB;
+            .left{
+                font-family: PingFang-SC, PingFang-SC;
+                font-weight: bold;
+                font-size: 16px;
+                color: #111111;
+                line-height: 16px;
+            }
+            .right{
+                .r_query{
+                    width: 278px;
+                    height: 34px;
+                    border-radius: 6px;
+                    border: 1px solid #E2E7F5;
+                    padding: 0 16px;
+                    box-sizing: border-box;
+                    img{
+                        width: 16px;
+                        height: 16px;
+                        cursor: pointer;
+                    }
+                }
+                .r_add{
+                    width: 110px;
+                    height: 36px;
+                    background: #1C4ED8;
+                    border-radius: 6px;
+                    margin-left: 16px;
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #FFFFFF;
+                    line-height: 36px;
+                    text-align: center;
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .list{
+            padding: 0 20px;
+            .item{
+                padding: 22px 0;
+                box-shadow: inset 0px -1px 0px 0px #F2F2F2;
+                .i_text{
+                    font-family: PingFang-SC, PingFang-SC;
+                    font-weight: bold;
+                    font-size: 14px;
+                    color: #111111;
+                    line-height: 14px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    margin-top: 12px;
+                }
+                .i_tip{
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #9CA3AF;
+                    line-height: 14px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                .i_name{
+                    width: calc(100% - 712px);
+                    img{
+                        width: 20px;
+                        height: 18px;
+                    }
+                    .in_name{
+                        margin-left: 22px;
+                        .i_text{
+                            margin-top: 0;
+                        }
+                        .i_tip{
+                            margin-top: 12px;
+                        }
+                    }
+                }
+                .i_num{
+                    width: 112px;
+                }
+                .i_time{
+                    width: 424px;
+                }
+                .i_opreations{
+                    width: 176px;
+                    .io_pre{
+                        width: 48px;
+                        height: 32px;
+                        background: #F6F9FC;
+                        border-radius: 6px;
+                        font-family: PingFangSC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 14px;
+                        color: #6B7280;
+                        line-height: 32px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+
+        .empty{
+            width: 100%;
+            height: calc(100% - 77px);
+            img{
+                width: 64px;
+                height: 61px;
+            }
+            p{
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 14px;
+                color: #9CA3AF;
+                line-height: 14px;
+                margin-top: 16px;
+            }
+        }
+    }
 </style>

src/views/modules/agent/knowledge/add.vue

@@ -0,0 +1,365 @@
+<template>
+    <div class="agent_page">
+        <div class="top">
+            <img src="@/assets/images/agent/arrow_left.png" @click="handleBack">
+            <div class="spans">
+                <span>知识库</span>
+                <span class="last">&nbsp;/&nbsp;创建知识库</span>
+            </div>
+        </div>
+        <div class="steps adfacjc">
+            <div class="s_text adfac" :class="{'active':step<3}">
+                <div class="st_num">1</div>
+                <span>知识库信息</span>
+            </div>
+            <div class="s_line"></div>
+            <div class="s_text adfac" :class="{'active':step===2}">
+                <div class="st_num">2</div>
+                <span>数据添加</span>
+            </div>
+        </div>
+        <template v-if="step===1">
+            <div class="content">
+                <div class="c_title">创建知识库</div>
+                <el-form ref="knowledgeFormRef" :model="knowledgeDto" :rules="knowledgeRule" label-width="100px" style="margin-top: 38px;">
+                    <el-form-item label="知识库名称" prop="aaa">
+                        <el-input v-model="knowledgeDto.aaa" clearable placeholder="请输入知识库名称" maxlength="20" show-word-limit></el-input>
+                    </el-form-item>
+                    <el-form-item label="知识库描述" prop="bbb">
+                        <el-input type="textarea" v-model="knowledgeDto.bbb" clearable placeholder="请输入知识库描述" maxlength="200" show-word-limit></el-input>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </template>
+        <template v-else-if="step===2">
+            <div class="content">
+                <div class="c_title">选择数据</div>
+                <div class="c_tip">导入数据，构建知识库索引</div>
+                <div class="c_type adfac">
+                    <span>导入方式</span>
+                    <el-radio-group v-model="exportType">
+                        <el-radio :label="1">选择文件</el-radio>
+                        <el-radio :label="2">上传文件</el-radio>
+                    </el-radio-group>
+                </div>
+                <template v-if="exportType===1">
+                    <div class="c_xzwj">
+                        <span>请选择类目</span>
+                        <div class="cx_box adf">
+                            <div class="cxb_left">
+                                <span>类目</span>
+                                <div class="cl_list">
+                                    <div class="cl_item" :class="{'active':cidx===index}" v-for="(item,index) in categoryList" :key="index" @click="handleSelectCategory(item,index)">{{ item.name }}</div>
+                                </div>
+                            </div>
+                            <div class="cxb_rigth">
+                                <el-table :data="fileList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无文件" max-height="600px">
+                                    <el-table-column label="序号" width="50">
+                                        <template #default="scope">
+                                            {{ scope.$index + 1 }}
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column label="文件名称" prop="aaa"></el-table-column>
+                                    <el-table-column label="状态" prop="bbb">
+                                        <template #default="{ row }"></template>
+                                    </el-table-column>
+                                    <el-table-column label="数据来源" prop="aaa"></el-table-column>
+                                    <el-table-column label="文件格式" prop="aaa"></el-table-column>
+                                </el-table>
+                                <el-row style="display: flex;justify-content: center;">
+                                    <el-pagination
+                                        @size-change="handleSizeChange"
+                                        @current-change="handleCurrentChange"
+                                        :current-page="queryParams.page"
+                                        :page-sizes="[5, 10, 20, 50]"
+                                        :page-size="10"
+                                        layout="total, sizes, prev, pager, next, jumper"
+                                        :total="total"
+                                        v-show="total > 0">
+                                    </el-pagination>
+                                </el-row>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <template v-else-if="exportType===2">
+                    <div class="c_scwj">
+                        <div class="cs_item">
+                            <span>导入类目</span>
+                            <el-select v-model="knowledgeDto.category" placeholder="请选择类目"></el-select>
+                        </div>
+                        <div class="cs_item">
+                            <span>导入方式</span>
+                            <el-select v-model="knowledgeDto.category" placeholder="请选择类目"></el-select>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </template>
+        <div class="btns adfac">
+            <el-button type="primary" @click="handleNext" v-if="step===1">下一步</el-button>
+            <el-button type="primary" @click="handlePrevious" v-if="step===2">上一步</el-button>
+            <el-button type="default" @click="handleCancel">取消</el-button>
+        </div>
+    </div>
+</template>
+
+<script setup name="">
+    import { ref, getCurrentInstance } from 'vue'
+    const { proxy } = getCurrentInstance();
+
+    const step = ref(2)
+    const exportType = ref(1)
+    const categoryList = ref([
+        {id:1,name:'高企的发展路径'},
+        {id:2,name:'团队管理'},
+        {id:3,name:'默认类目'}
+    ])
+    const knowledgeFormRef = ref(null)
+    const knowledgeDto = ref({
+        aaa: '',
+        bbb: '',
+        category:''
+    })
+    const knowledgeRule = ref({
+        aaa: [
+            { required: true, message: '请输入知识库名称', trigger: 'blur' }
+        ],
+        bbb: [
+            { required: true, message: '请输入知识库描述', trigger: 'blur' }
+        ]
+    })
+    const fileList = ref([])
+    const cidx = ref('')
+    const loading = ref(false)
+    const queryParams = ref({
+        page: 1,
+        limit: 10
+    })
+    const total = ref(0)
+    const handleSizeChange = (val) => {
+        queryParams.value.limit = val;
+        getList()
+    }
+    const handleCurrentChange = (val) => {
+        queryParams.value.page = val;
+        getList()
+    }
+    const getList = () => {
+        let query = {...queryParams.value};
+        loading.value = true;
+        // const res = await listOrder(query);
+        // userList.value = res.data.list;
+        // total.value = res.data.total;
+        loading.value = false;
+    }
+
+    const handleSelectCategory = (item,index) => {
+        cidx.value = index;
+        getList();
+    }
+
+    const handleBack = () => {
+        proxy.$router.go(-1)
+    }
+
+    const handleNext = () => {
+        proxy.$refs.knowledgeFormRef.validate((valid) => {
+            if (valid) {
+                step.value = 2
+            } else {
+                return false;
+            }
+        })
+    }
+    const handlePrevious = () => {
+        step.value = 1
+    }
+    const handleCancel = () => {
+        proxy.$router.go(-1)
+    }
+</script>
+
+<style scoped lang="scss">
+    .agent_page{
+        position: relative;
+        .top{
+            width: 100%;
+            height: 64px;
+            background: #FFFFFF;
+            border-bottom: 1px solid #F3F4F6;
+            display: flex;
+            align-items: center;
+            img{
+                width: 36px;
+                height: 36px;
+                margin-left: 16px;
+                cursor: pointer;
+            }
+            .spans{
+                display: flex;
+                align-items: center;
+                margin-left: 23px;
+                span{
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #6B7280;
+                    line-height: 14px;
+                    &.last{
+                        color: #111111;
+                    }
+                }
+            }
+        }
+
+        .steps{
+            margin-top: 24px;
+            .s_text{
+                .st_num{
+                    width: 24px;
+                    height: 24px;
+                    border-radius: 50%;
+                    background: #DDE0E6;
+                    font-family: PingFang-SC, PingFang-SC;
+                    font-weight: bold;
+                    font-size: 14px;
+                    color: #FFFFFF;
+                    line-height: 24px;
+                    text-align: center;
+                }
+                span{
+                    margin-left: 10px;
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #6B7280;
+                    line-height: 14px;
+                }
+                &.active{
+                    .st_num{
+                        background: #2463EB;
+                    }
+                    span{
+                        color: #2463EB;
+                    }
+                }
+            }
+            .s_line{
+                width: 496px;
+                height: 1px;
+                border: 1px solid #E5E7EB;
+                margin: 0 21px;
+            }
+        }
+
+        .content{
+            width: 100%;
+            height: calc(100% - 190px);
+            padding: 20px 30px 0;
+            box-sizing: border-box;
+            overflow-y: auto;
+
+            .c_title{
+                font-family: PingFang-SC, PingFang-SC;
+                font-weight: bold;
+                font-size: 16px;
+                color: #111111;
+                line-height: 16px;
+            }
+            .c_tip{
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 14px;
+                color: #9CA3AF;
+                line-height: 14px;
+                margin-top: 16px;
+            }
+            .c_type{
+                margin-top: 32px;
+                span{
+                    font-family: PingFang-SC, PingFang-SC;
+                    font-weight: bold;
+                    font-size: 14px;
+                    color: #111111;
+                    line-height: 14px;
+                    margin-right: 40px;
+                }
+            }
+            .c_xzwj{
+                width: 100%;
+                height: calc(100% - 122px);
+                padding: 16px 19px;
+                box-sizing: border-box;
+                margin-top: 28px;
+                border-radius: 6px;
+                border: 1px solid #ECEEF5;
+                overflow-y: auto;
+                &>span{
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #111111;
+                    line-height: 14px;
+                }
+                .cx_box{
+                    width: 100%;
+                    height: calc(100% - 30px);
+                    margin-top: 14px;
+                    .cxb_left{
+                        width: 257px;
+                        height: 100%;
+                        border-radius: 6px;
+                        border: 1px solid #ECEEF5;
+                        padding: 25px 22px;
+                        box-sizing: border-box;
+                        overflow-y: auto;
+                        &>span{
+                            font-family: PingFangSC, PingFang SC;
+                            font-weight: 400;
+                            font-size: 14px;
+                            color: #111111;
+                            line-height: 14px;
+                        }
+                        .cl_list{
+                            margin-top: 13px;
+                            .cl_item{
+                                width: 100%;
+                                height: 36px;
+                                border-radius: 8px;
+                                font-family: PingFangSC, PingFang SC;
+                                font-weight: 400;
+                                font-size: 14px;
+                                color: #111111;
+                                line-height: 36px;
+                                padding-left: 40px;
+                                box-sizing: border-box;
+                                cursor: pointer;
+                                &.active,&:hover{
+                                    background: #ECEEF5;
+                                    color: #2463EB;
+                                }
+                            }
+                        }
+                    }
+                    .cxb_rigth{
+                        width: calc(100% - 257px);
+                        height: 100%;
+                        overflow-y: auto;
+                        padding-left: 10px;
+                        box-sizing: border-box;
+                    }
+                }
+            }
+        }
+
+        .btns{
+            width: 100%;
+            padding: 24px 29px;
+            box-sizing: border-box;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+        }
+    }
+</style>

src/views/modules/agent/knowledgeCategory.vue

@@ -0,0 +1,381 @@
+<template>
+    <div class="agent_page">
+        <div class="title">类目管理</div>
+        <div class="content adf">
+            <div class="left">
+                <div class="l_top adfacjb">
+                    <span>类目</span>
+                    <span @click="handleAddCategory">+</span>
+                </div>
+                <div class="categories">
+                    <div class="c_item" :class="{'active':index===cidx}" v-for="(item, index) in categoryList" :key="index" @click="handleSelecyCategory(item,index)">
+                        {{ item.name }}
+                        <el-popover placement="right" width="177" trigger="click">
+                            <div class="tl_czs">
+                                <div class="tlc_pre" @click.stop="handleEditCategory(item,index)">编辑类目</div>
+                                <div class="tlc_pre" @click.stop="handleDeleteCategory(item,index)">删除类目</div>
+                            </div>
+                            <i slot="reference" class="el-icon-more" style="font-size: 14px;color: #999; transform: rotate(90deg);" @click.stop="handleSetTeam(team,idx)"></i>
+                        </el-popover>
+                    </div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="r_name adfac" v-if="rightName">
+                    <span class="rn_mc">{{ rightName }}</span>
+                    <span class="rn_tip">共<span class="rn_num">{{ 3 }}</span>个文件</span>
+                    <span class="rn_tip"><span class="rn_num">{{ 0 }}</span>个文件审核中</span>
+                </div>
+                <div class="tulr_top adfacjb">
+                    <div class="tulrt_l adfacjb queryInput">
+                        <el-input v-model="queryParams.name" placeholder="请输入文件名称查询"></el-input>
+                        <img src="@/assets/images/agent/query_mini.png">
+                    </div>
+                    <div class="tulrt_r adf">
+                        <div class="tr_btn">批量管理</div>
+                        <div class="tr_btn">导入数据</div>
+                    </div>
+                </div>
+                <el-table :data="fileList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无文件" max-height="578px" style="margin-top: 24px;">
+                    <el-table-column label="序号" width="50">
+                        <template #default="scope">
+                            {{ scope.$index + 1 }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="文件名称" prop="aaa"></el-table-column>
+                    <el-table-column label="状态" prop="bbb">
+                        <template #default="{ row }"></template>
+                    </el-table-column>
+                    <el-table-column label="数据来源" prop="aaa"></el-table-column>
+                    <el-table-column label="文件格式" prop="aaa"></el-table-column>
+                    <el-table-column label="上传时间" prop="aaa"></el-table-column>
+                    <el-table-column label="操作" width="150">
+                        <template #default="scope">
+                            <el-button link type="text" size="mini" @click="handleDetail(scope.row)">详情</el-button>
+                            <el-button link type="text" size="mini" @click="handleTag(scope.row)">标签</el-button>
+                            <el-button link type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <el-row style="display: flex;justify-content: center;">
+                    <el-pagination
+                        @size-change="handleSizeChange"
+                        @current-change="handleCurrentChange"
+                        :current-page="queryParams.page"
+                        :page-sizes="[5, 10, 20, 50]"
+                        :page-size="10"
+                        layout="total, sizes, prev, pager, next, jumper"
+                        :total="total"
+                        v-show="total > 0">
+                    </el-pagination>
+                </el-row>
+            </div>
+        </div>
+        <el-dialog width="30%" :visible.sync="categoryShow" :title="categoryTitle" @close="categoryShow=false">
+            <el-form ref="categoryRef" :model="categoryForm" :rules="categoryRules" label-width="90px" style="width: 90%;margin: 0 auto;">
+                <el-form-item label="类目名称" prop="name">
+                    <el-input v-model="categoryForm.name" placeholder="请输入类目名称" />
+                </el-form-item>
+            </el-form>
+            <div class="demo-drawer__footer" style="display: flex;justify-content: end;margin-top: 100px;">
+                <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup name="">
+    import { ref, getCurrentInstance } from 'vue'
+    const { proxy } = getCurrentInstance();
+
+    const cidx = ref('');
+    const categoryList = ref([
+        {id:1,name:'高企的发展路径'},
+        {id:2,name:'团队管理'},
+        {id:3,name:'默认类目'}
+    ]);
+    const rightName = ref('');
+    const queryParams = ref({
+        page:1,
+        limit:10,
+        name: ''
+    })
+    const fileList = ref([]);
+    const total = ref(0);
+    const loading = ref(false);
+    const categoryShow = ref(false);
+    const categoryTitle = ref('新增类目');
+    const categoryForm = ref({
+        name: ''
+    });
+    const categoryRules = ref({
+        name: [
+            { required: true, message: '请输入类目名称', trigger: 'blur' }
+        ]
+    });
+    const buttonLoading = ref(false);
+
+    const handleEditCategory = (item, index) => {
+        categoryTitle.value = '编辑类目';
+        Object.assign(categoryForm.value, item);
+        cidx.value = index;
+        categoryShow.value = true;
+    }
+
+    const handleDeleteCategory = (item, index) => {
+        categoryList.value.splice(index,1);
+        if (cidx.value === index) {
+            rightName.value = '';
+        } else if (cidx.value > index) {
+            cidx.value--;
+        }
+    }
+
+    const handleDetail = () => {
+        proxy.$router.push('/file/detail')
+    }
+
+    const handleTag = () => {
+        proxy.$router.push('/file/tag')
+    }
+
+
+
+    const submitForm = () => {
+        proxy.$refs.categoryRef.validate((valid) => {
+            if (valid) {
+                buttonLoading.value = true;
+                setTimeout(()=>{
+                    categoryList.value.push({id:categoryList.value.length+1,name:categoryForm.value.name});
+                    buttonLoading.value = false;
+                    categoryShow.value = false;
+                },1000)
+            } else {
+                return false;
+            }
+        });
+    }
+
+    const cancel = () => {
+        proxy.$refs.categoryRef.resetFields();
+        categoryShow.value = false;
+    }
+
+
+    const handleAddCategory = () => {
+        categoryShow.value = true;
+    }
+
+    const handleSelecyCategory = (item, index) => {
+        cidx.value = index;
+        rightName.value = item.name;
+    }
+
+    const getList = async () => {
+        let query = {...queryParams.value};
+        loading.value = true;
+        // const res = await listOrder(query);
+        // userList.value = res.data.list;
+        // total.value = res.data.total;
+        loading.value = false;
+    }
+    const handleSizeChange = (e)=>{
+        queryParams.value.limit = e;
+        getList();
+    }
+    const handleCurrentChange = (e)=>{
+        queryParams.value.page = e;
+        getList();
+    }
+</script>
+
+<style scoped lang="scss">
+    ::v-deep .queryInput .el-input__inner{
+        border: none !important;
+        height: 30px !important;
+        line-height: 30px !important;
+        padding: 0 !important;
+        width: 200px !important;
+    }
+    :v-deep .el-dialog__wrapper{
+        background: rgba(0,0,0,.3) !important;
+    }
+    ::v-deep .el-dialog__title{
+        font-weight: bold !important;
+    }
+    ::v-deep .el-dialog{
+        margin-top: 15vh !important;
+    }
+    ::v-deep .el-drawer__header span{
+        font-weight: bold;
+        font-size: 16px;
+        color: #1D2129;
+        line-height: 22px;
+    }
+
+    .agent_page{
+        .title{
+            width: 100%;
+            height: 70px;
+            padding: 30px 20px;
+            box-sizing: border-box;
+            border-bottom: 1px solid #ECEEF5;
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: bold;
+            font-size: 16px;
+            color: #111111;
+            line-height: 16px;
+        }
+
+        .content{
+            width: 100%;
+            height: calc(100% - 71px);
+            .left{
+                width: 286px;
+                height: 100%;
+                overflow-y: auto;
+                border-right: 1px solid #ECEEF5;
+                padding: 37px 22px;
+                box-sizing: border-box;
+                .l_top{
+                    span{
+                        font-family: PingFangSC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 16px;
+                        color: #111111;
+                        line-height: 14px;
+                        &:last-child{
+                            font-size: 20px;
+                            color: #1C4ED8;
+                            cursor: pointer;
+                        }
+                    }
+                }
+                .categories{
+                    margin-top: 13px;
+                    .c_item{
+                        width: 100%;
+                        height: 36px;
+                        border-radius: 8px;
+                        font-family: PingFangSC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 14px;
+                        color: #111111;
+                        line-height: 36px;
+                        padding-left: 40px;
+                        box-sizing: border-box;
+                        position: relative;
+                        cursor: pointer;
+                        &:hover,&.active{
+                            background: #F0F2F8;
+                            color: #2E69EB;
+                            i{
+                                color: #2E69EB !important;
+                            }
+                        }
+                        
+                        i{
+                            position: absolute;
+                            right: 10px;
+                            top: 12px;
+                        }
+                    }
+                }
+            }
+
+            .right{
+                width: calc(100% - 286px);
+                height: 100%;
+                padding: 37px 22px;
+                box-sizing: border-box;
+
+                .r_name{
+                    margin-bottom: 20px;
+                    .rn_mc{
+                        font-family: PingFangSC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 16px;
+                        color: #111111;
+                        line-height: 16px;
+                    }
+                    .rn_tip{
+                        font-family: PingFangSC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 14px;
+                        color: #9CA3AF;
+                        line-height: 14px;
+                        margin-left: 8px;
+                        &:last-child{
+                            margin-left: 24px;
+                        }
+                        .rn_num{
+                            color: #1D2129;
+                            margin: 0 2px;
+                        }
+                    }
+                }
+
+                
+                .tulr_top{
+                    .tulrt_l{
+                        width: 278px;
+                        height: 34px;
+                        border-radius: 6px;
+                        border: 1px solid #E2E7F5;
+                        padding: 0 16px;
+                        box-sizing: border-box;
+                        img{
+                            width: 16px;
+                            height: 16px;
+                            cursor: pointer;
+                        }
+                    }
+                    .tulrt_r{
+                        .tr_btn{
+                            width: 92px;
+                            height: 36px;
+                            border-radius: 6px;
+                            border: 1px solid #C1C7D2;
+                            margin-left: 20px;
+                            cursor: pointer;
+                            font-family: PingFangSC, PingFang SC;
+                            font-weight: 400;
+                            font-size: 14px;
+                            color: #111111;
+                            line-height: 36px;
+                            text-align: center;
+                            &:last-child{
+                                background: #1C4ED8;
+                                color: #FFFFFF;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .tl_czs{
+        .tlc_pre{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 14px;
+            color: #1D2129;
+            line-height: 20px;
+            padding: 12px 0;
+            border-bottom: 1px solid #ECEEF5;
+            cursor: pointer;
+            &:first-child{
+                padding-top: 0;
+            }
+            &:last-child{
+                border: none;
+                padding-bottom: 0;
+            }
+            &:hover{
+                color: #2E69EB;
+            }
+        }
+    }
+</style>