refactor(Design): 优化问卷题目样式和布局

-调整了多个组件的左图标样式，统一为带编号的标题格式
- 优化了选择题和其他题型的样式，提高了可读性和美观度
-调整了部分颜色和间距，使整体风格更加协调

src/assets/css/base.scss

@@ -27,6 +27,7 @@
   --van-tabs-bottom-bar-width: 28px;
   --van-loading-text-color: #fff;
   --van-loading-spinner-color: #fff;
+  --van-action-sheet-cancel-text-color: #000;
 }
 
 /* semantic color variables for this project */

src/assets/css/public.scss

@@ -260,6 +260,7 @@ input {
   position: relative;
 
   &::after {
+    color: #c8c9ca;
     content: attr(data-placeholder);
     position: absolute;
     top: 0;
@@ -267,3 +268,18 @@ input {
     pointer-events: none; // 确保占位符不会干扰用户输入
   }
 }
+
+.content-title,
+.introduction {
+  .editor-placeholder {
+    &::after {
+      color: #fff;
+    }
+  }
+}
+
+.van-field__label--required {
+  &::before {
+    display: none !important;
+  }
+}

src/views/Design/components/ActionCompoents/OptionAction.vue

@@ -11,7 +11,7 @@
     >
       <!-- eslint-disable-next-line -->
       <template #item="{ element, index }">
-        <div class="flex align-center option-action-container">
+        <div class="flex align-center option-action-container space-between">
           <slot name="item" :element="element" :index="index"></slot>
           <span v-if="active" class="flex">
             <!--<van-icon class-prefix="mobilefont"
@@ -31,7 +31,7 @@
   </div>
   <!--  操作项弹窗-->
   <van-action-sheet v-model:show="show">
-    <div class="van-action-sheet-title">操作选项</div>
+    <div class="van-action-sheet-title">选项操作</div>
 
     <van-cell-group :border="false" class="br12 round-group">
       <van-cell title="固定置底">

src/views/Design/components/ActionCompoents/QuestionAction.vue

@@ -7,7 +7,7 @@
 
   <!--  操作项弹窗-->
   <van-action-sheet v-model:show="show" title="">
-    <div class="van-action-sheet-title">操作选项</div>
+    <div class="van-action-sheet-title">题目设置</div>
     <van-cell-group
       v-if="![6].includes(activeQuestion.question_type)"
       :border="false"

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

@@ -6,9 +6,7 @@
     label-align="top"
     class="contenteditable-question-title base-select"
   >
-    <template #left-icon>
-      {{ isPreview ? element.title : index + 1 }}
-    </template>
+    <template #left-icon> {{ isPreview ? element.title : index + 1 }}. </template>
     <template #label>
       <contenteditable
         v-model="element.stem"
@@ -77,19 +75,24 @@
               >
                 <template #default>
                   <div class="flex align-center van-cell">
-                    <contenteditable
-                      v-model="it.option"
-                      :className="active ? 'contenteditable-input' : ''"
-                      :active="active"
-                    >
-                      <template #right-icon>
-                        <div v-if="active" class="moverQues">
-                          <van-icon class-prefix="mobilefont" name="option "></van-icon>
-                        </div>
-                      </template>
-                    </contenteditable>
-                    <div v-if="it.is_other">
-                      <input class="other-input" type="text" />
+                    <div class="flex" style="width: 100%; flex-wrap: wrap">
+                      <contenteditable
+                        v-model="it.option"
+                        :className="active ? 'contenteditable-input' : ''"
+                        :active="active"
+                      >
+                        <template #right-icon>
+                          <div v-if="active" class="moverQues">
+                            <van-icon class-prefix="mobilefont" name="option "></van-icon>
+                          </div>
+                        </template>
+                      </contenteditable>
+                      <input
+                        class="other-input"
+                        type="text"
+                        v-if="it.is_other"
+                        style="width: 100%"
+                      />
                     </div>
                   </div>
                 </template>
@@ -164,10 +167,10 @@ const emitValue = () => {
   }
 
   & .other-input {
-    width: 100px;
+    width: 100%;
     height: 20px;
-    margin-left: 20px;
     padding: 3px 5px;
+    margin-top: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     outline: none;

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

@@ -7,9 +7,7 @@
       label-align="top"
       class="contenteditable-question-title"
     >
-      <template #left-icon>
-        {{ isPreview ? element.title : index + 1 }}
-      </template>
+      <template #left-icon> {{ isPreview ? element.title : index + 1 }}. </template>
       <template #label>
         <contenteditable
           v-model="element.stem"

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

@@ -16,7 +16,7 @@ const { element } = toRefs(props);
  * 上传文件
  * @description 上传文件
  */
-function handleFileUpload () {
+function handleFileUpload() {
   const fileInput = document.createElement('input');
   fileInput.type = 'file';
   // 文件类型限制
@@ -27,7 +27,7 @@ function handleFileUpload () {
 
   fileInput.addEventListener('change', handleFileChange);
 
-  function handleFileChange (event: Event) {
+  function handleFileChange(event: Event) {
     const files = (event.target as HTMLInputElement).files;
     if (files) {
       // 检测文件数量
@@ -70,13 +70,24 @@ const emitValue = () => {
 
 <template>
   <van-cell-group>
-    <van-field v-model="element.stem" :label="element.stem" :required="element.config.is_required === 1"
-      label-align="top" input-align="center" class="contenteditable-question-title">
-      <template #left-icon> {{ isPreview ? element.title : index + 1 }}</template>
+    <van-field
+      v-model="element.stem"
+      :label="element.stem"
+      :required="element.config.is_required === 1"
+      label-align="top"
+      input-align="center"
+      class="contenteditable-question-title"
+    >
+      <template #left-icon> {{ isPreview ? element.title : index + 1 }}.</template>
       <!-- 使用 title 插槽来自定义标题 -->
       <template #label>
-        <contenteditable v-model="element.stem" :active="active" @blur="emitValue" className="contenteditable-label"
-          :errorMessage="errorMessage"></contenteditable>
+        <contenteditable
+          v-model="element.stem"
+          :active="active"
+          @blur="emitValue"
+          className="contenteditable-label"
+          :errorMessage="errorMessage"
+        ></contenteditable>
       </template>
 
       <template #input>

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

@@ -115,9 +115,7 @@ const errorMessage = defineModel('errorMessage', {
     label-align="top"
     class="contenteditable-question-title"
   >
-    <template #left-icon>
-      {{ isPreview ? element.title : index + 1 }}
-    </template>
+    <template #left-icon> {{ isPreview ? element.title : index + 1 }}. </template>
     <!-- 使用 title 插槽来自定义标题 -->
     <template #label>
       <contenteditable

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

@@ -7,9 +7,7 @@
       label-align="top"
       class="contenteditable-question-title"
     >
-      <template #left-icon>
-        {{ isPreview ? element.title : index + 1 }}
-      </template>
+      <template #left-icon> {{ isPreview ? element.title : index + 1 }}. </template>
       <template #label>
         <contenteditable
           v-model="element.stem"

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

@@ -7,9 +7,7 @@
       label-align="top"
       class="contenteditable-question-title"
     >
-      <template #left-icon>
-        {{ isPreview ? element.title : index + 1 }}
-      </template>
+      <template #left-icon> {{ isPreview ? element.title : index + 1 }}. </template>
       <template #label>
         <contenteditable
           v-model="element.stem"

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

@@ -204,9 +204,7 @@ async function handleUploadImg() {
     :border="false"
     readonly
   >
-    <template #left-icon>
-      {{ isPreview ? element.title : index + 1 }}
-    </template>
+    <template #left-icon> {{ isPreview ? element.title : index + 1 }}. </template>
     <template #label>
       <contenteditable
         v-model="element.stem"

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

@@ -7,9 +7,7 @@
       label-align="top"
       class="base-select contenteditable-question-title"
     >
-      <template #left-icon>
-        {{ isPreview ? element.title : index + 1 }}
-      </template>
+      <template #left-icon> {{ isPreview ? element.title : index + 1 }}. </template>
       <template #label>
         <contenteditable
           v-model="element.stem"