actorref(src): 重构组件以提高代码可维护性

- 更新了多个组件的属性定义和事件处理逻辑
- 优化了部分代码结构，提高了代码的可读性和可维护性
-调整了部分样式，提升了用户体验

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

@@ -46,13 +46,10 @@ const test = ref(1);
 setTimeout(() => {
   test.value = 2;
 }, 300);
-const props = defineProps({
-  config: {
-    type: Object,
-    required: true
-  }
+const config = defineModel('config', {
+  type: Object,
+  required: true
 });
-
 const index = defineModel('index', {
   type: Number
 });
@@ -94,26 +91,29 @@ watch(
 
 // 监听 min、max 和 score_interval 的变化
 watch(
-  () => [props.config.min, props.config.max, props.config.score_interval],
+  () => [config.value.min, config.value.max, config.value.score_interval],
   (newValues) => {
     const [newMin, newMax, newScoreInterval] = newValues;
     renderScore(newMin, newMax, newScoreInterval);
   },
-  { immediate: true }
+  { immediate: true, deep: true }
 );
 </script>
 
 <style scoped lang="scss">
 ul {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
 
   //margin-bottom: 10px;
 }
 
 .rate_item {
-  width: 21px;
-  height: 21px;
-  margin: 0 5px 0 0;
+  width: 20px;
+  height: 20px;
+
+  //margin: 0 5px 0 0;
   border: 1px solid #979797;
   border-radius: 5px;