feat: 添加分页组件和配置

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

src/views/Design/components/Questions/paging/Paging.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="page" :class="{ active: active }">
+    <div class="page-text">
+      <div class="page-text-line"></div>
+      <span class="page-text-content">
+        第 {{ info.page }}/{{ info.total }} 页：{{ info.first_title }}-{{ info.last_title }}
+      </span>
+      <div class="page-text-line"></div>
+      <div v-if="!isOneQuestionPerPage" class="page-icon">
+        <i
+          class="iconfont active-icon"
+          :style="{ marginRight: isLastPage ? '0' : '16px' }"
+          @click="activePage"
+          >&#xe86c;</i
+        >
+        <template v-if="!isLastPage">
+          <i class="iconfont moverQues" style="margin-right: 16px">&#xe71b;</i>
+          <i class="iconfont" @click="deleteHandle">&#xe6c5;</i>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useCounterStore } from '@/stores/counter';
+import { storeToRefs } from 'pinia';
+
+// Props 定义
+const props = defineProps({
+  info: {
+    type: Object,
+    default: () => ({})
+  },
+  index: {
+    type: Number,
+    default: 0
+  },
+  active: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// 使用 Pinia Store
+const counterStore = useCounterStore();
+const { questionsInfo } = storeToRefs(counterStore);
+
+// 计算属性
+const isOneQuestionPerPage = computed(() => {
+  return !!questionsInfo.value?.survey?.is_one_page_one_question;
+});
+
+const isLastPage = computed(() => {
+  return props.index === (questionsInfo.value?.questions?.length - 1 || -1);
+});
+
+// 自定义事件
+const emit = defineEmits(['activePage', 'removePage']);
+
+function activePage() {
+  emit('activePage');
+}
+
+function deleteHandle() {
+  emit('removePage');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/style/whole/whole';
+
+.page {
+  &.active {
+    color: $yili-default-color;
+
+    .page-text-line {
+      border-color: $yili-default-color;
+    }
+
+    .active-icon {
+      color: $yili-default-color;
+    }
+  }
+
+  .page-text {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 38px;
+    border-radius: 6px;
+  }
+
+  .page-text-line {
+    flex: 1;
+    height: 1px;
+    border: 1px dashed #bfbfbf;
+  }
+
+  .page-text-content {
+    margin: 0 3px;
+    cursor: default;
+  }
+
+  .page-icon {
+    display: flex;
+    align-items: center;
+    padding-right: 18px;
+    padding-left: 20px;
+  }
+
+  .iconfont {
+    width: 24px;
+    height: 24px;
+    color: #dadada;
+    cursor: pointer;
+
+    &:hover {
+      color: $yili-default-color;
+    }
+  }
+}
+</style>