feat: 初步完成搜索及其分页

OriginIndex.vue

@@ -1,247 +0,0 @@
-<template>
-    <el-space :fill="true" direction="vertical" class="qr-wrapper">
-        <h1>Question Search</h1>
-        <el-space direction="vertical" v-if="!multipleMode">
-            <el-button v-if="!searchMode" @click="selectSearch" icon="el-icon-search" type="primary">搜索</el-button>
-            <el-space v-else>
-                <el-input placeholder="请输入内容" v-model="searchContent" @keydown.enter="clickSearch">
-                    <template #append>
-                        <el-button icon="el-icon-search" @click="clickSearch"></el-button>
-                    </template>
-                </el-input>
-                <el-button type="danger" size="mini" @click="cancelSearch">取消</el-button>
-            </el-space>
-
-            <div class="search-result" v-if="searchMode">
-                <BriefQuestionCard v-for="(item,index) in resultQuestions"
-                                   :questionvo="item" :total-num="resultQuestions.length" :cur-num="index"></BriefQuestionCard>
-            </div>
-
-            <el-space>
-                <el-button icon="el-icon-folder-add" type="success">新建</el-button>
-                <el-button @click="clickMulSelect" icon="el-icon-more" type="warning">批量处理</el-button>
-            </el-space>
-        </el-space>
-        <el-space v-else>
-            <el-button type="danger" icon="el-icon-delete" @click="clickMulDelete">删除</el-button>
-            <el-button @click="multipleMode = !multipleMode" type="info" icon="el-icon-finished">完成
-            </el-button>
-        </el-space>
-        <el-space direction="vertical">
-            <el-space>
-                <h3>筛选</h3>
-                <el-button type="danger" @click="clearFilter" size="mini">清空</el-button>
-            </el-space>
-            <el-space direction="vertical" alignment="flex-start">
-                <qr-filter :title="typeFilter.title" :checkboxOption="typeFilter.option" :checkboxGroup="typeFilter.group"
-                           @filterChange="handleTypeFilter"/>
-                <qr-filter :title="knowledgeFilter.title" :checkboxOption="knowledgeFilter.option"
-                           :checkboxGroup="knowledgeFilter.group"
-                           @filterChange="handleKnowledgeFilter"/>
-                <qr-filter :title="levelFilter.title" :checkboxOption="levelFilter.option"
-                           :checkboxGroup="levelFilter.group"
-                           @filterChange="handleLevelFilter"/>
-                <qr-sorter :choice="sorter.default" :direction="sorter.direction" :option="sorter.option"
-                           @sorterChange="handleSorter" @directionChange="handleSorterDirection"/>
-            </el-space>
-        </el-space>
-        <div class="ql-container">
-            <question-list ref="question-list"></question-list>
-        </div>
-    </el-space>
-</template>
-
-<script>
-    import QuestionList from "@/components/QuestionItem/ListItem";
-    import Filter from "@/components/Filter";
-    import Sorter from "@/components/Sorter";
-    import BriefQuestionCard from "../../card/BriefQuestionCard";
-    import axios from "axios";
-
-    export default {
-        name: "Search",
-        components: {
-            QuestionList,
-            "qr-filter": Filter,
-            "qr-sorter": Sorter,
-            BriefQuestionCard
-        },
-        data() {
-            return {
-                // 点击批量处理，切换多选状态
-                multipleMode: false,
-                // 点击搜索，切换搜索状态
-                searchMode: false,
-                searchContent: "",
-
-                // 筛选条件
-                typeFilter: {
-                    title: "题型",
-                    group: [],
-                    option: [
-                        {
-                            label: "选择",
-                            title: "选择",
-                        },
-                        {
-                            label: "填空",
-                            title: "填空",
-                        },
-                    ],
-                },
-                knowledgeFilter: {
-                    title: "知识点",
-                    group: [],
-                    option: [
-                        {
-                            label: "java",
-                            title: "JAVA",
-                        },
-                        {
-                            label: "python",
-                            title: "Python",
-                        },
-                    ],
-                },
-                levelFilter: {
-                    title: "难度",
-                    group: [],
-                    option: [
-                        {
-                            label: "easy",
-                            title: "简单",
-                        },
-                        {
-                            label: "normal",
-                            title: "中等",
-                        },
-                        {
-                            label: "hard",
-                            title: "困难",
-                        },
-                    ],
-                },
-                sorter: {
-                    "default": "index",
-                    option: [
-                        {
-                            label: 'index',
-                            title: '序号',
-                        },
-                        {
-                            label: 'type',
-                            title: '题型',
-                        },
-                        {
-                            label: 'level',
-                            title: '难度',
-                        },
-                    ],
-                    direction: true,
-
-                },
-                resultQuestions: [],
-            }
-        },
-        methods: {
-            // 点击批量处理
-            clickMulSelect() {
-                const _this = this
-                _this.multipleMode = !_this.multipleMode
-            },
-
-            // 批量处理时点击删除
-            clickMulDelete() {
-                const _this = this
-            },
-
-            // 清空筛选条件
-            clearFilter() {
-                const _this = this
-                _this.knowledgeFilter.group = [];
-                _this.levelFilter.group = [];
-                _this.typeFilter.group = [];
-            },
-
-            // 处理排序顺序的筛选
-            handleSorterDirection() {
-                const _this = this
-                _this.sorter.direction = !_this.sorter.direction
-                _this.sort(5)
-            },
-
-            // 处理题型的筛选
-            handleTypeFilter() {
-                console.log(1)
-            },
-
-            // 处理知识点的筛选
-            handleKnowledgeFilter() {
-                console.log(2)
-            },
-
-            // 处理难度的筛选
-            handleLevelFilter() {
-                console.log(3)
-            },
-
-            // 处理排序条件的筛选
-            handleSorter() {
-                console.log(4)
-                const _this = this
-                _this.sorter.direction = true
-                _this.sort(5)
-            },
-
-            // 对题目列表进行排序
-            sort(param) {
-                console.log(param)
-            },
-
-            // 点击搜索
-            selectSearch() {
-                const _this = this
-                _this.searchMode = true
-            },
-
-            // 取消搜索
-            cancelSearch() {
-                const _this = this
-                _this.searchMode = false
-            },
-
-            // 进行关键词搜索
-            clickSearch(){
-                const _this = this
-                if(_this.searchContent === ""){
-                    alert("请输入关键词");
-                }else{
-                    axios.get("/api/api/question", {
-                        params:{
-                            stem: this.searchContent
-                        }}).then(res => {
-                        console.log(res);
-                        this.resultQuestions = res.data.content
-                        this.$notify({
-                            title: '成功',
-                            message: '搜索成功',
-                            type: 'success'
-                        });
-                    }).catch(err => {
-                        console.log(err);
-                        this.$notify.error({
-                            title: '错误',
-                            message: '搜索失败'
-                        });
-                    }).finally(()=>{
-                        console.log("search completed!")
-                    })
-                }
-            },
-        },
-    }
-</script>
-
-<style scoped>
-
-</style>

src/components/Filter.vue

@@ -1,31 +0,0 @@
-<template>
-  <el-space>
-    <span>{{ title }}</span>
-    <el-checkbox-group v-model="checkboxGroup" size="mini" @change="handleFilterChange">
-      <el-checkbox-button v-for="(item, index) in checkboxOption"
-                          :label="item.label">
-        {{ item.title }}
-      </el-checkbox-button>
-    </el-checkbox-group>
-  </el-space>
-</template>
-
-<script>
-export default {
-  name: "Filter",
-  props: {
-    title: String,
-    checkboxGroup: Array,
-    checkboxOption: Array,
-  },
-  methods:{
-    handleFilterChange(){
-      const _this = this
-      _this.$emit("filterChange");
-    },
-  },
-}
-</script>
-
-<style scoped>
-</style>

src/components/Sorter.vue

@@ -1,40 +0,0 @@
-<template>
-<el-space>
-<!--  <span>排序</span>-->
-  <el-radio-group v-model="choice" size="mini" @change="handleSorterChange">
-    <el-radio-button v-for="(item, index) in option" :label="item.label">
-      {{item.title}}
-    </el-radio-button>
-  </el-radio-group>
-  <el-button @click="handleDirectionChange" size="mini" type="success">
-    {{ direction ? "正序" : "倒序" }}
-  </el-button>
-</el-space>
-</template>
-
-<script>
-export default {
-  name: "Sorter",
-  props: {
-    choice: String,
-    option: Array,
-    direction: Boolean,
-  },
-  methods:{
-    // 改变正序或倒序
-    handleDirectionChange() {
-      const _this = this
-      _this.$emit("directionChange")
-    },
-
-    handleSorterChange(){
-      const _this = this
-      _this.$emit("sorterChange");
-    },
-  },
-}
-</script>
-
-<style scoped>
-
-</style>

src/components/bok/SideBar.vue

@@ -9,7 +9,7 @@
         @select="handleSelect"
         @open="handleOpen"
         @close="handleClose">
-      <el-menu-item index="questionSearch">
+      <el-menu-item index="search">
         <i class="el-icon-search"></i>
         <template #title>搜索</template>
       </el-menu-item>

src/components/bok/bokMain/QuestionSearch.vue

@@ -1,295 +0,0 @@
-<template>
-    <el-space :fill="true" direction="vertical" class="qr-wrapper">
-        <h1>Question Search</h1>
-        <el-space direction="vertical" v-if="!multipleMode">
-            <el-button v-if="!searchMode" @click="selectSearch" icon="el-icon-search" type="primary">搜索</el-button>
-            <el-space v-else>
-                <el-input placeholder="请输入内容" v-model="searchContent" @keydown.enter="clickSearch">
-                    <template #append>
-                        <el-button icon="el-icon-search" @click="clickSearch"></el-button>
-                    </template>
-                </el-input>
-                <el-button type="danger" size="mini" @click="cancelSearch">取消</el-button>
-            </el-space>
-        </el-space>
-
-        <el-space direction="vertical">
-            <el-space>
-                <h2>筛选</h2>
-                <el-button type="danger" @click="clearFilter" size="mini">清空</el-button>
-            </el-space>
-            <el-space direction="vertical" alignment="flex-start">
-                <p>tags</p>
-                <qr-filter :title="typeFilter.title" :checkboxOption="typeFilter.option"
-                           :checkboxGroup="typeFilter.group"
-                           @filterChange="handleTypeFilter"/>
-                <qr-filter :title="levelFilter.title" :checkboxOption="levelFilter.option"
-                           :checkboxGroup="levelFilter.group"
-                           @filterChange="handleLevelFilter"/>
-                <p>knowledgeId</p>
-                <!--                <qr-filter :title="knowledgeFilter.title" :checkboxOption="knowledgeFilter.option"-->
-                <!--                           :checkboxGroup="knowledgeFilter.group"-->
-                <!--                           @filterChange="handleKnowledgeFilter"/>-->
-            </el-space>
-
-            <el-space direction="vertical">
-                <el-space>
-                    <h2>排序</h2>
-                </el-space>
-                <el-space>
-                    <qr-sorter :choice="sorter.default" :direction="sorter.direction" :option="sorter.option"
-                               @sorterChange="handleSorter" @directionChange="handleSorterDirection"/>
-                </el-space>
-
-            </el-space>
-
-            <el-space>
-                <div class="search-result" v-if="searchMode">
-                    <BriefQuestionCard v-for="(item,index) in resultQuestions"
-                                       :questionvo="item" :total-num="resultQuestions.length" :cur-num="index"></BriefQuestionCard>
-                </div>
-            </el-space>
-
-        </el-space>
-    </el-space>
-</template>
-
-<script>
-    import QuestionList from "@/components/QuestionItem/ListItem";
-    import Filter from "@/components/Filter";
-    import Sorter from "@/components/Sorter";
-    import BriefQuestionCard from "../../card/BriefQuestionCard";
-    import axios from "axios";
-
-    export default {
-        name: "Search",
-        components: {
-            QuestionList,
-            "qr-filter": Filter,
-            "qr-sorter": Sorter,
-            BriefQuestionCard
-        },
-        data() {
-            return {
-                // 点击批量处理，切换多选状态
-                multipleMode: false,
-                // 点击搜索，切换搜索状态
-                searchMode: false,
-                searchContent: "",
-
-                // 筛选条件
-                typeFilter: {
-                    title: "题型",
-                    group: [],
-                    option: [
-                        {
-                            label: "选择",
-                            title: "选择",
-                        },
-                        {
-                            label: "填空",
-                            title: "填空",
-                        },
-                        {
-                            label: "判断",
-                            title: "判断",
-                        },
-                        {
-                            label: "简答",
-                            title: "简答",
-                        },
-                        {
-                            label: "代码",
-                            title: "代码",
-                        },
-                    ],
-                },
-                knowledgeFilter: {
-                    title: "知识点",
-                    group: [],
-                    option: [
-                        {
-                            label: "java",
-                            title: "JAVA",
-                        },
-                        {
-                            label: "python",
-                            title: "Python",
-                        },
-                    ],
-                },
-                levelFilter: {
-                    title: "难度",
-                    group: [],
-                    option: [
-                        {
-                            label: "easy",
-                            title: "简单",
-                        },
-                        {
-                            label: "normal",
-                            title: "中等",
-                        },
-                        {
-                            label: "hard",
-                            title: "困难",
-                        },
-                    ],
-                },
-                sorter: {
-                    "default": "index",
-                    option: [
-                        {
-                            label: 'index',
-                            title: '序号',
-                        },
-                        {
-                            label: 'type',
-                            title: '题型',
-                        },
-                        {
-                            label: 'level',
-                            title: '难度',
-                        },
-                    ],
-                    direction: true,
-
-                },
-                resultQuestions: [],
-            }
-        },
-        methods: {
-            // 点击批量处理
-            clickMulSelect() {
-                const _this = this
-                _this.multipleMode = !_this.multipleMode
-            },
-
-            // 批量处理时点击删除
-            clickMulDelete() {
-                const _this = this
-            },
-
-            // 清空筛选条件
-            clearFilter() {
-                const _this = this
-                _this.knowledgeFilter.group = [];
-                _this.levelFilter.group = [];
-                _this.typeFilter.group = [];
-            },
-
-            // 处理排序顺序的筛选
-            handleSorterDirection() {
-                const _this = this
-                _this.sorter.direction = !_this.sorter.direction
-                _this.sort(5)
-            },
-
-            // 处理题型的筛选
-            handleTypeFilter() {
-                console.log(1)
-            },
-
-            // 处理知识点的筛选
-            handleKnowledgeFilter() {
-                console.log(2)
-            },
-
-            // 处理难度的筛选
-            handleLevelFilter() {
-                console.log(3)
-            },
-
-            // 处理排序条件的筛选
-            handleSorter() {
-                console.log(4)
-                const _this = this
-                _this.sorter.direction = true
-                _this.sort(5)
-            },
-
-            // 对题目列表进行排序
-            sort(param) {
-                console.log(param)
-            },
-
-            // 点击搜索
-            selectSearch() {
-                const _this = this
-                _this.searchMode = true
-            },
-
-            // 取消搜索
-            cancelSearch() {
-                const _this = this
-                _this.searchMode = false
-            },
-
-            // 进行关键词搜索
-            clickSearch(){
-                const _this = this
-                if(_this.searchContent === ""){
-                    alert("请输入关键词");
-                }else{
-                    let typeArray = [];
-                    let levelArray = [];
-                    if('选择' in this.typeFilter.group){
-                        typeArray.push('choice');
-                    } else if('填空' in this.typeFilter.group){
-                        typeArray.push('blank');
-                    } else if('判断' in this.typeFilter.group){
-                        typeArray.push('true_false');
-                    } else if('简答' in this.typeFilter.group){
-                        typeArray.push('short_answer');
-                    } else if('代码' in this.typeFilter.group){
-                        typeArray.push('code');
-                    }
-
-                    if('简单' in this.levelFilter.group){
-                        levelArray.push(1);
-                        levelArray.push(2);
-                    }else if('中等' in this.levelFilter.group){
-                        levelArray.push(3);
-                    }else{
-                        levelArray.push(4);
-                        levelArray.push(5);
-                    }
-
-                    this.requestQuestion(this.searchContent, [], [], [], [])
-
-                }
-            },
-            requestQuestion(stem, ...items){
-                axios.get("/api/api/question", {
-                    params:{
-                        stem: stem,
-                        tags: items[0],
-                        type: items[1],
-                        weights: items[2],
-                        knowledgeId: items[3]
-                    }}).then(res => {
-                    console.log(res);
-                    this.resultQuestions = res.data.content
-                    this.$notify({
-                        title: '成功',
-                        message: '搜索成功',
-                        type: 'success'
-                    });
-                }).catch(err => {
-                    console.log(err);
-                    this.$notify.error({
-                        title: '错误',
-                        message: '搜索失败'
-                    });
-                }).finally(()=>{
-                    console.log("search completed!")
-                })
-
-            }
-        },
-    }
-</script>
-
-<style scoped>
-
-</style>

src/components/bok/bokMain/search/index.vue

@@ -0,0 +1,289 @@
+<template>
+    <el-space :fill="true" direction="vertical" class="qr-wrapper" alignment="flex-start" :size="30">
+        <h1>Question Search</h1>
+        <el-input placeholder="请输入内容" v-model="searchContent" @keydown.enter="clickSearch">
+            <template #append>
+                <el-button icon="el-icon-search" @click="clickSearch"></el-button>
+            </template>
+        </el-input>
+        <el-collapse @change="closeCollapse" v-model="isCollapsed">
+            <el-collapse-item :title="collapseItemTitle" name="1">
+                <el-space direction="vertical" alignment="flex-start">
+                    <button-filter :title="typeFilter.title" :checkboxOption="typeFilter.option" ref="typeFilter"
+                                   @filterChange="handleTypeFilter"/>
+                    <button-filter :title="levelFilter.title" :checkboxOption="levelFilter.option" ref="levelFilter"
+                                   @filterChange="handleLevelFilter"/>
+                    <search-filter :title="tagFilter.title" :keyword="tagFilter.keyword" ref="tagFilter"
+                                   @filterChange="handleTagFilter"/>
+                    <search-filter :title="knowledgeFilter.title" :keyword="knowledgeFilter.keyword"
+                                   ref="knowledgeFilter"
+                                   @filterChange="handleKnowledgeFilter"/>
+                    <qr-sorter :option="sorter.option" @dirChange="handleSortDirChange" @stdChange="handleSortStdChange"
+                               ref="sorter"/>
+                </el-space>
+            </el-collapse-item>
+        </el-collapse>
+        <!--        注释-->
+        <el-space direction="vertical">
+            <brief-question-card v-for="(item, index) in currentQuestions" :questionvo="item"
+                                 :total-num="requiredQuestions.length"
+                                 :cur-num="index+pagination.size*(pagination.current-1)"/>
+            <el-pagination v-if="requiredQuestions.length!==0" @size-change="handleSizeChange"
+                           @current-change="handleCurrentChange"
+                           v-model:current-page="pagination.current" :page-sizes="pagination.sizes"
+                           v-model:page-size="pagination.size" :layout="pagination.layout"
+                           :total="requiredQuestions.length"/>
+        </el-space>
+    </el-space>
+</template>
+
+<script>
+import QuestionList from "@/components/QuestionItem/ListItem";
+import ButtonFilter from "@/components/tool/ButtonFilter";
+import Sorter from "@/components/tool/Sorter";
+import BriefQuestionCard from "@/components/card/BriefQuestionCard";
+import SearchFilter from "@/components/tool/SearchFilter";
+import axios from "axios";
+import src from "./srcData"
+
+export default {
+    name: "Search",
+    components: {
+        QuestionList,
+        ButtonFilter,
+        SearchFilter,
+        "qr-sorter": Sorter,
+        BriefQuestionCard
+    },
+    data() {
+        return {
+            searchContent: "",
+
+            // 筛选条件
+            isCollapsed: [],
+            //
+            typeFilter: {
+                title: "题型",
+                group: [],
+                option: src.typeOption,
+            },
+            levelFilter: {
+                title: "难度",
+                group: [],
+                option: src.levelOption,
+            },
+            tagFilter: {
+                title: "Tags",
+                keyword: src.tagKeyword,
+            },
+            knowledgeFilter: {
+                title: "知识点",
+                keyword: src.knowledgeKeyword,
+            },
+            sorter: {
+                option: src.sortOption,
+            },
+
+            // 根据关键词搜索的结果
+            resultQuestions: [],
+            // 经过筛选后的结果
+            requiredQuestions: [],
+
+            // 分页信息
+            pagination: {
+                current: 1,
+                size: 10,
+                layout: "total, sizes, prev, pager, next, jumper",
+                sizes: [5, 10, 20]
+            },
+        }
+    },
+    computed: {
+        // 筛选和排序折叠栏的标题
+        collapseItemTitle() {
+            let res = "筛选和排序"
+            if (this.isCollapsed.length) {
+                return res + "（点击收起）"
+            } else {
+                return res + "（点击展开）"
+            }
+        },
+        // 当前页面展示的问题
+        currentQuestions() {
+            // todo
+            const _this = this
+            let pageIndex = _this.pagination.current - 1
+            let pageSize = _this.pagination.size
+            let start = pageIndex * pageSize
+            let end = Math.min(start + pageSize, _this.requiredQuestions.length)
+            let res = _this.requiredQuestions.slice(start, end)
+            return res
+        },
+    },
+    methods: {
+        // 展开和收起
+        closeCollapse(val) {
+            if (!val.length) {
+                // this.resetAll()
+            }
+        },
+
+        // 清空筛选条件
+        resetAll() {
+            const _this = this
+            _this.$refs.typeFilter.clearFilter();
+            _this.$refs.levelFilter.clearFilter();
+            _this.$refs.tagFilter.clearFilter();
+            _this.$refs.knowledgeFilter.clearFilter();
+            _this.$refs.sorter.reset();
+        },
+
+        // 处理题型的筛选
+        handleTypeFilter(checkboxGroup) {
+            // todo
+            if (this.resultQuestions.length === 0) {
+                return
+            }
+            console.log(checkboxGroup)
+        },
+
+        // 处理知识点的筛选
+        handleKnowledgeFilter(group) {
+            // todo
+            if (this.resultQuestions.length === 0) {
+                return
+            }
+            console.log(group)
+        },
+
+        // 处理难度的筛选
+        handleLevelFilter(checkboxGroup) {
+            // todo
+            if (this.resultQuestions.length === 0) {
+                return
+            }
+            console.log(checkboxGroup)
+        },
+
+        // 处理排序标准的筛选
+        handleSortStdChange(std) {
+            // todo
+            if (this.resultQuestions.length === 0) {
+                return
+            }
+            console.log(std)
+        },
+
+        // 处理排序顺序的筛选
+        handleSortDirChange(dir) {
+            // todo
+            if (this.resultQuestions.length === 0) {
+                return
+            }
+            console.log(dir)
+        },
+
+        // 处理Tag的筛选
+        handleTagFilter(group) {
+            // todo
+            if (this.resultQuestions.length === 0) {
+                return
+            }
+            console.log(group)
+        },
+
+        // 进行关键词搜索
+        clickSearch() {
+            const _this = this
+            if (_this.searchContent === "") {
+                alert("请输入关键词");
+            } else {
+                this.requestQuestion(this.searchContent, [], [], [], [])
+
+                // todo
+                let typeArray = _this.$refs.typeFilter.checkboxGroup;
+                let levelArray = _this.$refs.levelFilter.checkboxGroup;
+                let tagArray = _this.$refs.tagFilter.checkGroup;
+                let knowledgeArray = _this.$refs.knowledgeFilter.checkGroup;
+                let sortStd = _this.$refs.sorter.standard;
+                let sortDir = _this.$refs.sorter.direction;
+                console.log(typeArray, levelArray, tagArray, knowledgeArray, sortStd, sortDir)
+            }
+        },
+
+        // todo 注释
+        requestQuestion(stem, ...items) {
+            axios.get("/api/api/question", {
+                params: {
+                    stem: stem,
+                    tags: items[0],
+                    type: items[1],
+                    weights: items[2],
+                    knowledgeId: items[3]
+                }
+            }).then(res => {
+                console.log(res);
+                this.resultQuestions = res.data.questions
+                this.$notify({
+                    title: '成功',
+                    message: '搜索成功',
+                    type: 'success'
+                });
+
+                // todo 经过初始筛选条件的处理
+                this.requiredQuestions = this.resultQuestions.map(function (item) {
+                    return item
+                })
+            }).catch(err => {
+                console.log(err);
+                this.$notify.error({
+                    title: '错误',
+                    message: '搜索失败'
+                });
+            }).finally(() => {
+                console.log("search completed!")
+            })
+        },
+
+        //
+        handleSizeChange(val) {
+        },
+
+        //
+        handleCurrentChange(val) {
+        },
+    },
+}
+</script>
+
+<style scoped>
+.el-collapse {
+    border: 1px solid var(--el-collapse-border-color);
+}
+
+.collapse-title {
+    display: flex;
+
+&
+-length {
+    margin-left: auto;
+    margin-right: 14px;
+}
+
+}
+::v-deep .el-collapse-item__content {
+    padding: 0;
+}
+
+::v-deep .el-collapse-item__arrow {
+    margin: 4px 12px 4px 12px;
+}
+
+::v-deep .el-collapse-item__header {
+    /*color: $blue;*/
+    /*height: 40px;*/
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+}
+</style>

src/components/bok/bokMain/search/srcData.js

@@ -0,0 +1,74 @@
+import axios from "axios";
+
+const typeOption = [
+  {
+    label: "choice",
+    title: "选择",
+  },
+  {
+    label: "blank",
+    title: "填空",
+  },
+  {
+    label: "true_false",
+    title: "判断",
+  },
+  {
+    label: "short_answer",
+    title: "简答",
+  },
+  {
+    label: "code",
+    title: "代码",
+  },
+]
+
+const levelOption = [
+  {
+    label: "1",
+    title: "入门",
+  },
+  {
+    label: "2",
+    title: "简单",
+  },
+  {
+    label: "3",
+    title: "普通",
+  },
+  {
+    label: "4",
+    title: "困难",
+  },
+  {
+    label: "5",
+    title: "挑战",
+  }
+]
+
+const tagKeyword = ["111", "222"]
+
+const knowledgeKeyword = ["java", "python", "c++"]
+
+const sortOption = [
+  {
+    label: 'index',
+    title: '序号',
+  },
+  {
+    label: 'type',
+    title: '题型',
+  },
+  {
+    label: 'level',
+    title: '难度',
+  },
+]
+
+export default {
+  typeOption,
+  levelOption,
+  tagKeyword,
+  knowledgeKeyword,
+  sortOption,
+}

src/components/tool/ButtonFilter.vue

@@ -0,0 +1,46 @@
+<template>
+    <el-space>
+        <span>{{ title }}</span>
+        <el-checkbox-group v-model="checkboxGroup" size="mini">
+            <el-checkbox-button v-for="(item, index) in checkboxOption"
+                                :label="item.label">
+                {{ item.title }}
+            </el-checkbox-button>
+        </el-checkbox-group>
+        <el-button size="mini" type="danger" @click="clearFilter">清空</el-button>
+    </el-space>
+</template>
+
+<script>
+export default {
+    name: "ButtonFilter",
+    data(){
+        return{
+            checkboxGroup: [],
+        }
+    },
+    props: {
+        title: String,
+        checkboxOption: Array,
+    },
+    methods: {
+        //
+        clearFilter(){
+            if(this.checkboxGroup.length !== 0){
+                this.checkboxGroup = []
+            }
+        },
+    },
+    watch:{
+        checkboxGroup:{
+            handler(val, oldVal) {
+                this.$emit("filterChange", val)
+            },
+            deep: true,
+        },
+    }
+}
+</script>
+
+<style scoped>
+</style>

src/components/tool/SearchFilter.vue

@@ -0,0 +1,94 @@
+<template>
+    <el-space>
+        <span>{{ title }}</span>
+        <el-autocomplete size="mini" class="inline-input" v-model="content" :fetch-suggestions="querySearch"
+                         placeholder="请输入内容" @select="handleSelect" :trigger-on-focus="false" clearable/>
+        <el-button-group v-if="checkGroup.length !== 0">
+            <el-button v-for="(item,index) in checkGroup" size="mini" @click="deleteOption(item)">
+                {{ item.value }}
+                <i class="el-icon-circle-close"/>
+            </el-button>
+        </el-button-group>
+        <el-button size="mini" type="danger" @click="clearFilter">清空</el-button>
+    </el-space>
+</template>
+
+<script>
+import {defineComponent, ref, onMounted} from 'vue'
+
+export default {
+    name: "SearchFilter",
+    data() {
+        return {
+            content: "",
+            checkGroup: [],
+            suggestion: [],
+        }
+    },
+    props: {
+        title: String,
+        keyword: Array,
+    },
+    mounted() {
+        // 填充输入建议
+        for (let k in this.keyword) {
+            this.suggestion.push({
+                value: this.keyword[k]
+            })
+        }
+    },
+    methods: {
+        //
+        querySearch(queryString, cb) {
+            let suggestion = this.suggestion;
+            let results = queryString ? suggestion.filter(this.createFilter(queryString)) : suggestion;
+            // 调用 callback 返回建议列表的数据
+            cb(results);
+        },
+
+        //
+        createFilter(queryString) {
+            return (suggestion) => {
+                return (suggestion.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+            };
+        },
+
+        //
+        handleSelect(item) {
+            if (this.checkGroup.indexOf(item) === -1) {
+                this.checkGroup.push(item)
+            }
+        },
+
+        //
+        deleteOption(item) {
+            this.checkGroup = this.checkGroup.filter(function (g) {
+                return (g !== item);
+            })
+        },
+
+        //
+        clearFilter() {
+            this.content = ""
+            if (this.checkGroup.length !== 0) {
+                this.checkGroup = []
+            }
+        },
+    },
+    watch: {
+        checkGroup: {
+            handler(val, oldVal) {
+                let res = []
+                for (let groupElement of this.checkGroup) {
+                    res.push(groupElement.value)
+                }
+                this.$emit("filterChange", res)
+            },
+            deep: true
+        },
+    }
+}
+</script>
+
+<style scoped>
+</style>

src/components/tool/Sorter.vue

@@ -0,0 +1,60 @@
+<template>
+    <el-space>
+        <span>排序</span>
+        <el-radio-group v-model="standard" size="mini">
+            <el-radio-button v-for="(item, index) in option" :label="item.label">
+                {{ item.title }}
+            </el-radio-button>
+        </el-radio-group>
+        <el-button @click="changeDirection" size="mini" type="success">
+            {{ direction ? "正序" : "倒序" }}
+        </el-button>
+        <el-button size="mini" type="danger" @click="reset">默认</el-button>
+    </el-space>
+</template>
+
+<script>
+export default {
+    name: "Sorter",
+    data() {
+        return {
+            standard: "",
+            direction: true,
+        }
+    },
+    props: {
+        option: Array,
+    },
+    mounted() {
+        this.standard = this.option[0].label
+    },
+    methods: {
+        // 改变正序或倒序
+        changeDirection() {
+            this.direction = !this.direction
+        },
+
+        // 恢复默认
+        reset() {
+            this.standard = this.option[0].label
+            this.direction = true
+        },
+    },
+    watch: {
+        standard: {
+            handler(val, oldVal) {
+                this.$emit("stdChange", val)
+            },
+        },
+        direction: {
+            handler(val, oldVal) {
+                this.$emit("dirChange", val)
+            }
+        },
+    },
+}
+</script>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -28,9 +28,9 @@ const routes = [
         component: () => import("../components/bok/bokMain/QuestionRepository/index"),
       },
       {
-        path: "questionSearch",
-        name: "QuestionSearch",
-        component: () => import("../components/bok/bokMain/QuestionSearch"),
+        path: "search",
+        name: "Search",
+        component: () => import("../components/bok/bokMain/search/index"),
       },
       {
         path: "collection",

vue.config.js

@@ -15,8 +15,8 @@ module.exports = {
                     "^/api": ""
                 }
             }
-        }
+        },
+        port: 8000,
     },
     lintOnSave:false,
-
 }