完善知识入库

src/components/KnowledgeCard/CertificationCard.vue

@@ -0,0 +1,164 @@
+<template xmlns:el-col="http://www.w3.org/1999/html">
+    <el-card class="certification-card" shadow="hover">
+        <!-- 第一行 -->
+        <template #header>
+            <el-row>
+                <el-col :span="3">
+                    <span><strong>S/N: </strong>{{ curNum + 1 }} / {{ totalNum }}</span>
+                </el-col>
+
+                <el-col :span="9">
+                    <span><strong>认证名: </strong>{{ certificationVO.title }}</span>
+                </el-col>
+
+                <el-col :span="6" />
+                <!-- 查看全部按钮 -->
+                <el-col :span="1">
+                    <el-button type="text" circle @click="expand" v-if="!isAll"><strong>查看全部</strong></el-button>
+                    <el-button type="text" circle @click="withdraw" v-if="isAll"><strong>收起</strong></el-button>
+                </el-col>
+                <el-col :span="1" />
+
+                <!-- 编辑和删除按钮 -->
+                <el-col :span="1" v-if="editMode">
+                    <el-button type="primary" plain size="small" @click="dialog = true"><i
+                            class="el-icon-edit"></i></el-button>
+                </el-col>
+                <el-col :span="1" v-if="editMode">
+                    <el-button type="danger" plain size="small" @click="isDelete = true"><i
+                            class="el-icon-delete"></i></el-button>
+                </el-col>
+
+                <!-- 审核通过和拒绝按钮 -->
+                <el-col :span="1" v-if="checkMode">
+                    <el-button type="primary" plain size="small" @click="dialog = true"><i
+                            class="el-icon-check"></i></el-button>
+                </el-col>
+                <el-col :span="1" v-if="checkMode">
+                    <el-button type="danger" plain size="small" @click="isDelete = true"><i
+                            class="el-icon-close"></i></el-button>
+                </el-col>
+
+            </el-row>
+        </template>
+
+        <!-- 主要信息 -->
+        <div class="certification-card-body">
+            <el-row style="margin-bottom: 8px;">
+                <el-col :span="24">
+                    <strong>认证机构：</strong><span>{{ certificationVO.organization }}</span>
+                </el-col>
+            </el-row>
+
+            <el-row style="margin-bottom: 8px;">
+                <el-col :span="24">
+                    <strong>认证链接：</strong>
+                    <el-link :href="certificationVO.link" target="_blank">
+                        {{ certificationVO.link }}
+                    </el-link>
+                </el-col>
+            </el-row>
+
+            <el-row>
+                <el-col :span="24">
+                    <strong>简介：</strong>{{ certificationVO.abstract }}
+                </el-col>
+            </el-row>
+        </div>
+
+        <el-divider v-if="isAll"></el-divider>
+
+        <div class="certification-card-foot" v-if="isAll">
+            <el-row>
+                <el-col :span="3">
+                    <div><strong>状态: </strong>已审核</div>
+                </el-col>
+                <el-col :span="3">
+                    <div><strong>审核人: </strong>小苏</div>
+                </el-col>
+
+                <el-col :span="12"></el-col>
+
+                <el-col :span="6" v-if="!certificationVO.lastModifiedTime">
+                    <div><strong>CreateTime: </strong>{{ toMyDate(certificationVO.createdTime) }}</div>
+                </el-col>
+
+                <el-col :span="6" v-else>
+                    <div><strong>lastModifiedTime: </strong>{{ toMyDate(certificationVO.lastModifiedTime) }}</div>
+                </el-col>
+            </el-row>
+        </div>
+
+    </el-card>
+
+</template>
+
+<script>
+import axios from "axios";
+import MarkdownText from "@/components/MarkdownText";
+import { toMyDate } from "@/utils/dateConvertor";
+import { markdownToHTML } from "@/utils/markdown";
+
+export default {
+    name: "CertificationCard",
+    components: {
+        MarkdownText
+    },
+    props: {
+        certificationVO: Object,
+        totalNum: Number,
+        curNum: Number,
+        checkMode: Boolean,
+        editMode: Boolean,
+    },
+    computed: {
+    },
+    data() {
+        return {
+            isAll: false,
+            dialog: false,
+            isDelete: false,
+        }
+    },
+    methods: {
+        markdownToHTML,
+        toMyDate,
+        expand() {
+            if (!this.isAll) {
+                this.isAll = true;
+            }
+        },
+        withdraw() {
+            if (this.isAll) {
+                this.isAll = false;
+            }
+        },
+        handleClose() {
+            this.$confirm('此操作将丢失填写信息, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.dialog = false;
+            })
+        },
+        closeDialog() {
+            this.dialog = false;
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+/* 淡绿色背景 */
+.certification-card {
+    margin: 20px;
+    font-size: 18px;
+    background-color: #eef7f2;
+}
+
+.certification-card-body {
+    text-align: left;
+    font-size: 15px;
+}
+</style>

src/components/KnowledgeCard/LiteratureCard.vue

@@ -108,6 +108,7 @@
 <script>
 import axios from "axios";
 import MarkdownText from "@/components/MarkdownText";
+import { toMyDate } from "@/utils/dateConvertor";
 import { markdownToHTML } from "@/utils/markdown";
 
 export default {
@@ -133,6 +134,7 @@ export default {
     },
     methods: {
         markdownToHTML,
+        toMyDate,
         expand() {
             if (!this.isAll) {
                 this.isAll = true;
@@ -155,22 +157,6 @@ export default {
         closeDialog() {
             this.dialog = false;
         },
-        toMyDate(instant) {
-            let date = new Date(instant);
-            var year = date.getFullYear();
-            var month = date.getMonth() + 1;
-            var theDate = date.getDate();
-            var hour = date.getHours();
-            var minute = date.getMinutes();
-            var second = date.getSeconds();
-
-            if (month < 10) { month = '0' + month; }
-            if (theDate < 10) { theDate = '0' + theDate; }
-            if (hour < 10) { hour = '0' + hour; }
-            if (minute < 10) { minute = '0' + minute; }
-            if (second < 10) { second = '0' + second; }
-            return year + "-" + month + "-" + theDate + " " + hour + ":" + minute + ":" + second;
-        }
     }
 }
 </script>

src/components/KnowledgeCard/MonographCard.vue

@@ -0,0 +1,176 @@
+<template xmlns:el-col="http://www.w3.org/1999/html">
+    <el-card class="monograph-card" shadow="hover">
+        <!-- 第一行 -->
+        <template #header>
+            <el-row>
+                <el-col :span="3">
+                    <span><strong>S/N: </strong>{{ curNum + 1 }} / {{ totalNum }}</span>
+                </el-col>
+
+                <el-col :span="9">
+                    <span><strong>标题: </strong>{{ monographVO.title }}</span>
+                </el-col>
+
+                <el-col :span="6" />
+                <!-- 查看全部按钮 -->
+                <el-col :span="1">
+                    <el-button type="text" circle @click="expand" v-if="!isAll"><strong>查看全部</strong></el-button>
+                    <el-button type="text" circle @click="withdraw" v-if="isAll"><strong>收起</strong></el-button>
+                </el-col>
+                <el-col :span="1" />
+
+                <!-- 编辑和删除按钮 -->
+                <el-col :span="1" v-if="editMode">
+                    <el-button type="primary" plain size="small" @click="dialog = true"><i
+                            class="el-icon-edit"></i></el-button>
+                </el-col>
+                <el-col :span="1" v-if="editMode">
+                    <el-button type="danger" plain size="small" @click="isDelete = true"><i
+                            class="el-icon-delete"></i></el-button>
+                </el-col>
+
+                <!-- 审核通过和拒绝按钮 -->
+                <el-col :span="1" v-if="checkMode">
+                    <el-button type="primary" plain size="small" @click="dialog = true"><i
+                            class="el-icon-check"></i></el-button>
+                </el-col>
+                <el-col :span="1" v-if="checkMode">
+                    <el-button type="danger" plain size="small" @click="isDelete = true"><i
+                            class="el-icon-close"></i></el-button>
+                </el-col>
+
+            </el-row>
+        </template>
+
+        <!-- 主要信息 -->
+        <div class="monograph-card-body">
+            <el-row style="margin-bottom: 8px;">
+                <el-col :span="24">
+                    <strong>作者：</strong>{{ monographVO.author }}
+                </el-col>
+            </el-row>
+
+            <el-row style="margin-bottom: 8px;">
+                <el-col :span="24">
+                    <strong>出版社：</strong>{{ monographVO.publisher }}
+                </el-col>
+            </el-row>
+
+            <el-row style="margin-bottom: 8px;">
+                <el-col :span="24">
+                    <strong>年份：</strong>{{ monographVO.year }}
+                </el-col>
+            </el-row>
+
+            <el-row style="margin-bottom: 8px;">
+                <el-col :span="24">
+                    <strong>全文链接：</strong>
+                    <el-link :href="monographVO.link" target="_blank">
+                        {{ monographVO.link }}
+                    </el-link>
+                </el-col>
+            </el-row>
+
+            <el-row>
+                <el-col :span="24">
+                    <strong>摘要：</strong>{{ monographVO.abstract }}
+                </el-col>
+            </el-row>
+        </div>
+
+        <el-divider v-if="isAll"></el-divider>
+
+        <div class="monograph-card-foot" v-if="isAll">
+            <el-row>
+                <el-col :span="3">
+                    <div><strong>状态: </strong>已审核</div>
+                </el-col>
+                <el-col :span="3">
+                    <div><strong>审核人: </strong>小苏</div>
+                </el-col>
+
+                <el-col :span="12"></el-col>
+
+                <el-col :span="6" v-if="!monographVO.lastModifiedTime">
+                    <div><strong>CreateTime: </strong>{{ toMyDate(monographVO.createdTime) }}</div>
+                </el-col>
+
+                <el-col :span="6" v-else>
+                    <div><strong>lastModifiedTime: </strong>{{ toMyDate(monographVO.lastModifiedTime) }}</div>
+                </el-col>
+            </el-row>
+        </div>
+
+    </el-card>
+
+</template>
+
+<script>
+import axios from "axios";
+import MarkdownText from "@/components/MarkdownText";
+import { toMyDate } from "@/utils/dateConvertor";
+import { markdownToHTML } from "@/utils/markdown";
+
+export default {
+    name: "MonographCard",
+    components: {
+        MarkdownText
+    },
+    props: {
+        monographVO: Object,
+        totalNum: Number,
+        curNum: Number,
+        checkMode: Boolean,
+        editMode: Boolean,
+    },
+    computed: {
+    },
+    data() {
+        return {
+            isAll: false,
+            dialog: false,
+            isDelete: false,
+        }
+    },
+    methods: {
+        markdownToHTML,
+        toMyDate,
+        expand() {
+            if (!this.isAll) {
+                this.isAll = true;
+            }
+        },
+        withdraw() {
+            if (this.isAll) {
+                this.isAll = false;
+            }
+        },
+        handleClose() {
+            this.$confirm('此操作将丢失填写信息, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.dialog = false;
+            })
+        },
+        closeDialog() {
+            this.dialog = false;
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+/* 淡绿色背景 */
+.monograph-card {
+    margin: 20px;
+    font-size: 18px;
+    background-color: #eef7f2;
+}
+
+.monograph-card-body {
+    text-align: left;
+    font-size: 15px;
+}
+</style>

src/components/KnowledgeCard/StandardCard.vue

@@ -95,6 +95,7 @@
 <script>
 import axios from "axios";
 import MarkdownText from "@/components/MarkdownText";
+import { toMyDate } from "@/utils/dateConvertor";
 import { markdownToHTML } from "@/utils/markdown";
 
 export default {
@@ -120,6 +121,7 @@ export default {
     },
     methods: {
         markdownToHTML,
+        toMyDate,
         expand() {
             if (!this.isAll) {
                 this.isAll = true;
@@ -142,22 +144,6 @@ export default {
         closeDialog() {
             this.dialog = false;
         },
-        toMyDate(instant) {
-            let date = new Date(instant);
-            var year = date.getFullYear();
-            var month = date.getMonth() + 1;
-            var theDate = date.getDate();
-            var hour = date.getHours();
-            var minute = date.getMinutes();
-            var second = date.getSeconds();
-
-            if (month < 10) { month = '0' + month; }
-            if (theDate < 10) { theDate = '0' + theDate; }
-            if (hour < 10) { hour = '0' + hour; }
-            if (minute < 10) { minute = '0' + minute; }
-            if (second < 10) { second = '0' + second; }
-            return year + "-" + month + "-" + theDate + " " + hour + ":" + minute + ":" + second;
-        }
     }
 }
 </script>

src/components/KnowledgeCreator/SingleKnowledgeCreator.vue

@@ -0,0 +1,121 @@
+<!-- 知识创建 -->
+<template>
+    <div class="knowledge-create">
+        <el-form :model="knowledge" :rules="rules" ref="knowledge" label-width="100px" label-position="left">
+            <el-form-item label="知识点类型" prop="type">
+                <el-radio-group v-model="knowledge.type">
+                    <el-radio-button v-for="item in typeOptions" :value="item.value" :label="item.label" />
+                </el-radio-group>
+            </el-form-item>
+
+            <el-form-item v-if="knowledge.type === '国际规范'" v-for="item in standardInput" :label="item.label"
+                :prop="item.value">
+                <el-input v-model="knowledge[item.value]" />
+            </el-form-item>
+
+            <el-form-item v-if="knowledge.type === '综述文献'" v-for="item in literatureInput" :label="item.label"
+                :prop="item.value">
+                <el-input v-model="knowledge[item.value]" />
+            </el-form-item>
+
+            <el-form-item v-if="knowledge.type === '软件专著'" v-for="item in monographInput" :label="item.label"
+                :prop="item.value">
+                <el-input v-model="knowledge[item.value]" />
+            </el-form-item>
+
+            <el-form-item v-if="knowledge.type === '软件认证'" v-for="item in certificationInput" :label="item.label"
+                :prop="item.value">
+                <el-input v-model="knowledge[item.value]" />
+            </el-form-item>
+
+            <el-form-item>
+                <el-button type="primary" @click="submitForm('knowledge')">提交</el-button>
+                <el-button @click="resetForm('knowledge')">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+import ButtonFilter from "@/components/ButtonFilter";
+
+export default {
+    name: "SingleKnowledgeCreator",
+    components: {
+        ButtonFilter,
+    },
+    props: {
+    },
+    data() {
+        return {
+            typeOptions: [
+                { label: '国际规范', value: 'standard' },
+                { label: '综述文献', value: 'literature' },
+                { label: '软件专著', value: 'monograph' },
+                { label: '软件认证', value: 'certification' },
+            ],
+            knowledge: {
+                type: "国际规范",
+                id: "",
+                name: "",
+                description: "",
+                type: "",
+                link: "",
+            },
+            standardInput: [
+                { label: '规范编号', value: 'id' },
+                { label: '规范名称', value: 'title' },
+                { label: '简介', value: 'abstract' },
+                { label: '链接', value: 'link' },
+            ],
+            literatureInput: [
+                { label: '标题', value: 'title' },
+                { label: '作者', value: 'author' },
+                { label: '期刊/会议', value: 'journal' },
+                { label: '出版时间', value: 'year' },
+                { label: '简介', value: 'abstract' },
+                { label: '链接', value: 'link' },
+            ],
+            monographInput: [
+                { label: '专著名称', value: 'title' },
+                { label: '作者', value: 'author' },
+                { label: '出版社', value: 'publisher' },
+                { label: '出版时间', value: 'year' },
+                { label: '简介', value: 'abstract' },
+                { label: '链接', value: 'link' },
+            ],
+            certificationInput: [
+                { label: '认证名称', value: 'title' },
+                { label: '认证机构', value: 'organization' },
+                { label: '简介', value: 'abstract' },
+                { label: '链接', value: 'link' },
+            ],
+            rules: {
+                id: [{ required: true, message: "请输入编号", trigger: "blur" }],
+                title: [{ required: true, message: "请输入知识名称", trigger: "blur" }],
+                link: [{ required: true, message: "请输入链接", trigger: "blur" }],
+                abstract: [{ required: true, message: "请输入简介", trigger: "blur" }],
+                type: [{ required: true, message: "请选择知识类型", trigger: "change" }],
+            },
+        };
+    },
+    methods: {
+        submitForm(formName) {
+            console.log(this.knowledge);
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        handleClick(tab) {
+            console.log(tab.name);
+        },
+    },
+}
+</script>
+
+<style scoped>
+.knowledge-create {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+</style>

src/router/index.js

@@ -91,6 +91,11 @@ const routes = [
         name: "KnowledgeCheck",
         component: () => import("@/views/Bok/Main/KnowledgeCheck"),
       },
+      {
+        path: "knowledgeImport",
+        name: "KnowledgeImport",
+        component: () => import("@/views/Bok/Main/KnowledgeImport"),
+      }
     ],
   },
 ];

src/views/Bok/Main/KnowledgeCheck.vue

@@ -13,20 +13,31 @@
                 <literature-card v-for="(item, index) in checkKnowledgeList" :checkMode="true"
                     v-show="item.status === activeName && item.type === 'literature'" :key="item.id"
                     :literature-v-o="item" :total-num="checkTotalNum" :cur-num="index + (currentPage - 1) * pageSize" />
+                <monograph-card v-for="(item, index) in checkKnowledgeList" :checkMode="true"
+                    v-show="item.status === activeName && item.type === 'monograph'" :key="item.id"
+                    :monograph-v-o="item" :total-num="checkTotalNum" :cur-num="index + (currentPage - 1) * pageSize" />
+                <certification-card v-for="(item, index) in checkKnowledgeList" :checkMode="true"
+                    v-show="item.status === activeName && item.type === 'certification'" :key="item.id"
+                    :certification-v-o="item" :total-num="checkTotalNum"
+                    :cur-num="index + (currentPage - 1) * pageSize" />
             </el-tab-pane>
         </el-tabs>
     </div>
 </template>
 
 <script>
-import StandardCard from "@/components/KnowledgeCard/StandardCard.vue";
-import LiteratureCard from "@/components/KnowledgeCard/LiteratureCard.vue";
+import StandardCard from "@/components/KnowledgeCard/StandardCard";
+import LiteratureCard from "@/components/KnowledgeCard/LiteratureCard";
+import CertificationCard from "@/components/KnowledgeCard/CertificationCard";
+import MonographCard from "@/components/KnowledgeCard/MonographCard";
 
 export default {
     name: "KnowledgeCheck",
     components: {
         StandardCard,
         LiteratureCard,
+        CertificationCard,
+        MonographCard,
     },
     data() {
         return {
@@ -64,6 +75,26 @@ export default {
                 year: '2019',
                 link: 'https://www.jos.org.cn/html/2019/1/5645.htm',
                 status: 'DELETING',
+            },
+            {
+                uuid: '523fa8c5-6509-aefb-872a-a3e5f12f6578',
+                type: 'monograph', // 专著
+                title: '可信计算平台：设计与应用',
+                author: '冯登国, 徐震, 张立武',
+                publisher: '清华大学出版社',
+                year: '2006',
+                abstract: '我们正处在一个计算机科学繁荣昌盛的时期。针对安全增强硬件的构造与使用的专门研究已有很长的历史，并且现在逐步将其并入主流计算平台；我们无法预料未来的日子里将发生什么当前新兴的信息基础设施的一个基本观点是分布式：在分布式环境中，多个参与者参与到计算中，并且其中每一个都可能有不同的兴趣和动机。那么，要检测这种分布式条件下的安全性，就需要检测每个平台做什么计算以及参与者必须信任哪些平台，以此来提供防止各种类型的敌手攻击的安全属性，如果这个参与者想要信任整个计算的话。所以安全分布式计算需要考虑那些参与计算却拥有不同观点的不同组织的独立平台的可信度。我们还必须考虑这么多的参与者实际上是否信任这个平台——并且如果他们应该信任，该如何让他们知道这一点。',
+                link: 'https://book.douban.com/subject/20430352/',
+                status: 'CREATING',
+            },
+            {
+                uuid: 'a26e162f-b0fa-7eb9-0f52-7db6e9e2ed0a',
+                type: 'certification', // 认证
+                organization: '中国计算机学会',
+                title: 'CCF CSP认证',
+                abstract: '计算机软件能力认证以被测试者熟练掌握程序设计、数据结构以及算法，通过一定范围内自选的通用编程语言，在指定时间空间内，熟练、准确地完成对给定问题的编程和调试为认证标准。编程语言允许使用C/C++、Java或Python。所编程序的正确性由计算机系统根据事先给定的数据进行测试，通过者得分，否则不得分。中国计算机学会将对每一名参加认证并有成绩者发放认证成绩单（成绩单中标注所使用编程语言及成绩分析）。测试的问题覆盖大学计算机专业所学习的程序设计、数据结构以及算法，以及相关的数学基础知识，并关注编程技巧的使用、性能的优化，以及异常情况的正常处理。',
+                link: 'https://www.cspro.org/',
+                status: 'CREATING',
             }],
 
             pageSize: 20,

src/views/Bok/Main/KnowledgeImport.vue

@@ -0,0 +1,83 @@
+<!-- 知识入库 -->
+<template>
+    <h1>知识入库</h1>
+    <el-space :fill="true" direction="vertical" alignment="flex-start" :size="30" style="width: 100%;">
+        <el-tabs v-model="tabActiveName" @tab-click="handleTabClick" stretch>
+            <!-- 输入知识 -->
+            <el-tab-pane label="添加知识" name="addKnowledge">
+                <single-knowledge-creator />
+            </el-tab-pane>
+            <!-- 爬虫 -->
+            <el-tab-pane label="知识爬取" name="crawler">
+                <!-- <el-row align="middle">
+                    <el-col :span="2">
+                        <strong>爬取地址：</strong>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-input placeholder="请输入爬取地址" v-model="crawlerUrl"></el-input>
+                    </el-col>
+                    <el-col :span="3">
+                        <el-button type="primary" @click="crawler">开始爬取</el-button>
+                    </el-col>
+                </el-row> -->
+
+            </el-tab-pane>
+
+        </el-tabs>
+    </el-space>
+</template>
+
+<script>
+import SingleKnowledgeCreator from "@/components/KnowledgeCreator/SingleKnowledgeCreator";
+
+export default {
+    components: {
+        SingleKnowledgeCreator,
+    },
+    data() {
+        return {
+            tabActiveName: "addKnowledge",
+            form: {
+                name: "",
+                description: "",
+                type: "",
+                content: "",
+            },
+            rules: {
+                name: [{ required: true, message: "请输入知识名称", trigger: "blur" }],
+                description: [{ required: true, message: "请输入知识描述", trigger: "blur" }],
+                type: [{ required: true, message: "请选择知识类型", trigger: "change" }],
+                content: [{ required: true, message: "请输入知识内容", trigger: "blur" }],
+            },
+            typeOptions: [
+                { value: "1", label: "国际规范" },
+                { value: "2", label: "综述文献" },
+                { value: "3", label: "专著" },
+                { value: "4", label: "认证" },
+            ],
+        };
+    },
+    methods: {
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    this.$message({
+                        message: "提交成功",
+                        type: "success",
+                    });
+                } else {
+                    return false;
+                }
+            });
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        handleTabClick(tab) {
+            console.log(tab);
+        },
+    },
+};
+</script>
+
+<style scoped></style>

src/views/Bok/Main/KnowledgeRepo.vue

@@ -44,8 +44,38 @@
                     </div>
                 </el-backtop>
             </el-tab-pane>
-            <el-tab-pane label="专著" name="专著"></el-tab-pane>
-            <el-tab-pane label="认证" name="认证"></el-tab-pane>
+
+            <el-tab-pane label="专著" name="专著">
+                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                    :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
+                    layout="total, sizes, prev, pager, next, jumper" :total=this.totalNum
+                    v-if="this.knowledgeList.length !== 0" />
+                <monograph-card v-for="(item, index) in knowledgeList" v-show="item.type === 'monograph'" :key="item.id"
+                    :editMode="true" :monograph-v-o="item" :total-num="totalNum"
+                    :cur-num="index + (currentPage - 1) * pageSize" />
+                <el-backtop :bottom="50">
+                    <div
+                        style="height: 100%;width: 100%;background-color: #f2f5f6;box-shadow: 0 0 6px rgba(0,0,0, .12);line-height: 40px;">
+                        UP
+                    </div>
+                </el-backtop>
+            </el-tab-pane>
+
+            <el-tab-pane label="认证" name="认证">
+                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                    :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
+                    layout="total, sizes, prev, pager, next, jumper" :total=this.totalNum
+                    v-if="this.knowledgeList.length !== 0" />
+                <certification-card v-for="(item, index) in knowledgeList" v-show="item.type === 'certification'"
+                    :key="item.id" :editMode="true" :certification-v-o="item" :total-num="totalNum"
+                    :cur-num="index + (currentPage - 1) * pageSize" />
+                <el-backtop :bottom="50">
+                    <div
+                        style="height: 100%;width: 100%;background-color: #f2f5f6;box-shadow: 0 0 6px rgba(0,0,0, .12);line-height: 40px;">
+                        UP
+                    </div>
+                </el-backtop>
+            </el-tab-pane>
         </el-tabs>
     </el-space>
 
@@ -53,13 +83,17 @@
 
 <script>
 import StandardCard from "@/components/KnowledgeCard/StandardCard";
-import LiteratureCard from "@/components/KnowledgeCard/LiteratureCard.vue";
+import LiteratureCard from "@/components/KnowledgeCard/LiteratureCard";
+import MonographCard from "@/components/KnowledgeCard/MonographCard";
+import CertificationCard from "@/components/KnowledgeCard/CertificationCard";
 
 export default {
     name: "KnowledgeRepo",
     components: {
         StandardCard,
         LiteratureCard,
+        MonographCard,
+        CertificationCard
     },
 
     data() {
@@ -72,12 +106,14 @@ export default {
             searchContent: '',
             // 知识列表
             knowledgeList: [{
+                uuid: '0b389403-8911-0939-b01b-3e9eaafee607',
                 type: 'standard',
                 id: 'ISO/IEC 9126-1:2001',
                 title: '软件工程 - 产品质量 - 第1部分:质量模型',
                 abstract: 'ISO/IEC 9126-1:2001是ISO/IEC 9126系列标准的第1部分，是一个质量模型，定义了软件产品质量的特性和度量。其中,质量特性分为内部质量特性、外部质量特性和使用质量特性。',
                 link: 'https://www.iso.org/standard/22749.html'
             }, {
+                uuid: '803d1032-072b-8c4b-c809-0548dbc9f174',
                 type: 'standard',
                 id: 'ISO 5807:1985',
                 title: "信息处理 - 数据、程序和系统流程图、程序网络图以及系统资源图表用的文档符号和约定",
@@ -85,6 +121,7 @@ export default {
                 link: 'http://www.iso.ch/iso/en/CatalogueDetailPage.CatalogueDetail?CSNUMBER=11955'
             },
             {
+                uuid: 'a503faf4-6509-aefb-872a-a3e5f21947f9',
                 type: 'literature', // 文献综述
                 title: '软件过程与管理方法综述',
                 author: '荣国平, 张贺, 邵栋, 王青',
@@ -92,7 +129,26 @@ export default {
                 abstract: '工程化软件开发需要对软件开发整个过程进行有效的组织和管理，由此产生了一系列软件开发组织和管理方法，其主要目的是形成一种载体，用以积累和传递关于软件开发的经验教训.然而，由于软件开发的一些天然特性（比如复杂性和不可见性）的存在，使得描述软件开发过程的软件开发与组织方法也天然地带着一定的抽象性.由此带来了很多概念上的误导和实践中的争论，影响了上述目的的达成.例如，对于究竟该如何选择和定义合适的软件开发过程以更好地满足某个特定项目的要求，目前仍然缺少可靠的手段.甚至有些面向工业界的调研报告表明：在实际软件项目开发中，过程改进（例如引入新的工具或者方法）的主要驱动力是佚闻.试图厘清软件组织与管理话题的若干核心概念，系统梳理软件组织和管理方法的特征，并且以软件发展的历史为主线，介绍软件组织与管理方法的历史沿革，整理出这种历史沿革背后的缘由.在此基础上，讨论和总结若干发现，以期为研究者和实践者提供参考.',
                 year: '2019',
                 link: 'https://www.jos.org.cn/html/2019/1/5645.htm'
-            }],
+            },
+            {
+                uuid: '523fa8c5-6509-aefb-872a-a3e5f12f6578',
+                type: 'monograph', // 专著
+                title: '可信计算平台：设计与应用',
+                author: '冯登国, 徐震, 张立武',
+                publisher: '清华大学出版社',
+                year: '2006',
+                abstract: '我们正处在一个计算机科学繁荣昌盛的时期。针对安全增强硬件的构造与使用的专门研究已有很长的历史，并且现在逐步将其并入主流计算平台；我们无法预料未来的日子里将发生什么当前新兴的信息基础设施的一个基本观点是分布式：在分布式环境中，多个参与者参与到计算中，并且其中每一个都可能有不同的兴趣和动机。那么，要检测这种分布式条件下的安全性，就需要检测每个平台做什么计算以及参与者必须信任哪些平台，以此来提供防止各种类型的敌手攻击的安全属性，如果这个参与者想要信任整个计算的话。所以安全分布式计算需要考虑那些参与计算却拥有不同观点的不同组织的独立平台的可信度。我们还必须考虑这么多的参与者实际上是否信任这个平台——并且如果他们应该信任，该如何让他们知道这一点。',
+                link: 'https://book.douban.com/subject/20430352/'
+            },
+            {
+                uuid: 'a26e162f-b0fa-7eb9-0f52-7db6e9e2ed0a',
+                type: 'certification', // 认证
+                title: 'CCF CSP认证',
+                organization: '中国计算机学会',
+                abstract: '计算机软件能力认证以被测试者熟练掌握程序设计、数据结构以及算法，通过一定范围内自选的通用编程语言，在指定时间空间内，熟练、准确地完成对给定问题的编程和调试为认证标准。编程语言允许使用C/C++、Java或Python。所编程序的正确性由计算机系统根据事先给定的数据进行测试，通过者得分，否则不得分。中国计算机学会将对每一名参加认证并有成绩者发放认证成绩单（成绩单中标注所使用编程语言及成绩分析）。测试的问题覆盖大学计算机专业所学习的程序设计、数据结构以及算法，以及相关的数学基础知识，并关注编程技巧的使用、性能的优化，以及异常情况的正常处理。',
+                link: 'https://www.cspro.org/'
+            }
+            ],
         }
     },
     methods: {

src/views/Bok/SideBar.vue

@@ -16,6 +16,10 @@
         <i class="el-icon-box"></i>
         <template #title>知识库</template>
       </el-menu-item>
+      <el-menu-item index="knowledgeImport">
+        <i class="el-icon-upload"></i>
+        <template #title>知识入库</template>
+      </el-menu-item>
       <el-menu-item index="knowledgeCheck">
         <i class="el-icon-s-check"></i>
         <template #title>知识审核</template>