feat: 添加分页组件和配置

- 新增 PageConfig 组件用于分页设置
- 新增 Paging 组件用于显示分页信息
- 添加自定义样式和布局

src/views/Design/components/ChooseQuestion.vue

@@ -1,10 +1,20 @@
 <template>
   <div class="choose-question-container">
-    <div :class="chooseQuestionId===element.id ? 'choose-question-active':''" @click="chooseItem">
+    <div
+      class="choose-question-context"
+      :class="chooseQuestionId === element.id ? 'choose-question-active' : ''"
+      @click="chooseItem"
+    >
       <slot></slot>
       <!--      题目操作-->
-      <div v-if="chooseQuestionId===element.id" class="choose-question-active-container">
-        <div v-for="item in questionAction" :key="item.key" class="" :class="item.class?item.class:''" @click="itemAction(item)">
+      <div v-if="chooseQuestionId === element.id" class="choose-question-active-container">
+        <div
+          v-for="item in questionAction"
+          :key="item.key"
+          class=""
+          :class="item.class ? item.class : ''"
+          @click="itemAction(item)"
+        >
           <i class="icon iconfont choose-question-active-container-icon" v-html="item.icon"></i>
           <div class="choose-question-active-container-name">
             {{ item.name }}
@@ -79,24 +89,28 @@ const chooseItem = () => {
 
 const itemAction = (item) => {
   switch (item.key) {
-  case 'edit':
-    break;
-  case 'copy':
-    break;
-  case 'moveUp':
-    break;
-  case 'moveDown':
-    break;
-  case 'delete':
-    break;
+    case 'edit':
+      break;
+    case 'copy':
+      break;
+    case 'moveUp':
+      break;
+    case 'moveDown':
+      break;
+    case 'delete':
+      break;
   }
 };
-
 </script>
 <style scoped lang="scss">
 .choose-question-container {
   padding: 5px;
 
+  & .choose-question-context {
+    overflow: hidden;
+    border-radius: 5px;
+  }
+
   & .choose-question-active {
     outline: 1px dashed #409eff;
   }
@@ -118,5 +132,4 @@ const itemAction = (item) => {
     }
   }
 }
-
 </style>