feat: 完成 preview 组件的功能

- 新增 preview 组件相关的资源
- 调用 web 端部分 API
- 相关题目添加答案配置

src/views/Design/components/Questions/RateCharacter.vue

@@ -47,6 +47,8 @@ const props = defineProps({
   }
 });
 
+const model = defineModel();
+
 const renderScore = (min, max, interval) => {
   const result = [];
   for (let i = min; i <= max; i += interval) {
@@ -61,21 +63,24 @@ const renderScore = (min, max, interval) => {
   }
   rateItem.value = result;
 };
+// 重置颜色
 const getItem = (value) => {
-  // chooseId.value = value.id;
+  model.value = value.label;
   rateItem.value.forEach((item, index) => {
     rateItem.value[index].active = item.label <= value.label;
   });
 };
 
+watch(model, () => {
+  getItem({ label: model.value, active: false });
+});
+
 // 监听 min、max 和 score_interval 的变化
 watch(
   () => [props.config.min, props.config.max, props.config.score_interval],
   (newValues) => {
     const [newMin, newMax, newScoreInterval] = newValues;
-    // this.renderScore();
     renderScore(newMin, newMax, newScoreInterval);
-    // 在这里可以添加对这些值变化的处理逻辑
   },
   { immediate: true }
 );
@@ -83,7 +88,6 @@ watch(
 
 <style scoped lang="scss">
 ul {
-  // border: 1px solid red;
   display: flex;
   margin-bottom: 10px;
 }
@@ -95,12 +99,10 @@ ul {
   border: 1px solid #ddd;
   border-radius: 4px;
   color: #666;
-
-  // border: 1px solid red;
 }
 
 .active_item {
   background-color: #70b936;
   color: #fff;
 }
-</style>
+</style>