@qxs-bns/components-wc 0.0.30 → 0.0.32

package/es/subject/blank-fill.mjs

@@ -1,18 +1,17 @@
-import{html as t,css as e,LitElement as i}from"lit";import{property as s,state as r}from"lit/decorators.js";import{safeCustomElement as a}from"../base/define.mjs";import{trimCommaSeparatedText as o,trimText as n,SubjectError as l}from"./single.mjs";import{sortingCardStyles as h,renderSortingCard as p}from"./sorting-card.mjs";import{joinSubjectTitle as c,resolveSubjectPrefix as d}from"./title-prefix.mjs";import{SubjectType as g,SubjectTypeLabel as x}from"./types.mjs";var u=Object.defineProperty,y=Object.getOwnPropertyDescriptor,m=(t,e,i,s)=>{for(var r,a=s>1?void 0:s?y(e,i):e,o=t.length-1;o>=0;o--)(r=t[o])&&(a=(s?r(e,i,a):r(a))||a);return s&&a&&u(e,i,a),a};const w=t`
+import{html as t,css as e,LitElement as i}from"lit";import{property as s,state as r}from"lit/decorators.js";import{safeCustomElement as a}from"../base/define.mjs";import{SUB_TEXT_EDITOR_TOOLBAR as o}from"../editor/toolbar.mjs";import{emitSubjectEvent as n,emitSubjectModelValue as l,getSubjectImageResources as h,getSubjectVideoResource as d,resolveSubjectCategoryLabel as c,showSubjectToast as p,buildSubjectSortingTitle as g}from"./shared-methods.mjs";import{subjectHostStyles as x,subjectControlResetStyles as u,subjectPreviewBaseStyles as w,subjectFormBaseStyles as y,subjectTextareaStyles as _}from"./shared-styles.mjs";import{trimCommaSeparatedText as m,trimText as f,SubjectError as v}from"./single.mjs";import{sortingCardStyles as b,renderSortingCard as $}from"./sorting-card.mjs";import{resolveSubjectPrefix as I}from"./title-prefix.mjs";import{SubjectType as k,SubjectTypeLabel as T}from"./types.mjs";var A=Object.defineProperty,B=Object.getOwnPropertyDescriptor,C=(t,e,i,s)=>{for(var r,a=s>1?void 0:s?B(e,i):e,o=t.length-1;o>=0;o--)(r=t[o])&&(a=(s?r(e,i,a):r(a))||a);return s&&a&&A(e,i,a),a};const j=" ______",L=t`
   <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
     <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
-  </svg>`;let _=class extends i{constructor(){super(...arguments),this["order-index"]=0,this.title="",this["custom-id"]="",this["is-edit"]=!1,this["is-save"]=!1,this["is-set"]=!1,this["is-key"]=!1,this["show-action"]=!0,this["show-add"]=!0,this["hide-add-rich-text"]=!1,this["show-rich-text"]=!1,this["show-delete-action"]=!0,this["show-save-action"]=!0,this.sorting=!1,this["show-answer-setting"]=!1,this["show-analysis"]=!1,this["rich-text-content"]="",this.analysis="",this["exam-answer-relation-type"]=0,this["exam-expand"]="",this["exam-id"]=0,this["category-id"]="",this["exam-answer-setting"]={isInOrder:!1,isIgnoreCase:!0},this["upload-image"]=async t=>new Promise((e,i)=>{const s=new FileReader;s.onload=t=>e(t.target?.result),s.onerror=i,s.readAsDataURL(t)}),this["answer-list"]=[],this["tag-list"]=[],this["category-list"]=[],this["resource-list"]=[],this["show-tag"]=!1,this["show-category"]=!1,this["show-resource"]=!1,this["model-value"]="",this["use-model"]=!1,this._title="",this._analysis="",this._answers=[{title:"",tag:"",showInput:!1}],this._isInOrder=!1,this._isIgnoreCase=!0,this._showRichText=!1,this._richText="",this._selectedTagList=[],this._categoryId="",this.TITLE_MAX=400}willUpdate(t){t.has("is-edit")&&this["is-edit"]&&this._syncProps(),!this["is-edit"]&&(t.has("title")||t.has("answer-list")||t.has("analysis")||t.has("exam-answer-setting")||t.has("rich-text-content")||t.has("tag-list")||t.has("category-id"))&&this._syncProps(),t.has("model-value")&&this["use-model"]&&(this._title=this["model-value"].replaceAll(/<filter><\/filter>/g," ______")),t.has("tag-list")&&(this._selectedTagList=Array.isArray(this["tag-list"])?this["tag-list"].map(t=>({...t})):[]),t.has("category-id")&&(this._categoryId=this["category-id"]?String(this["category-id"]):"")}_normalizeAnswerTitle(t){return o(t?.title??t?.answer??"")}_syncProps(){if(this._title=(this.title||"").replaceAll(/<filter><\/filter>/g," ______"),this._analysis=this.analysis||"",this["answer-list"]?.length)this._answers=this["answer-list"].map(t=>({title:this._normalizeAnswerTitle(t),tag:"",showInput:!1,answerId:t?.answerId??t?.examAnswerId}));else{const t=(this._title.match(/ ______/g)||[]).length;this._answers=Array.from({length:t},()=>({title:"",tag:"",showInput:!1}))}this["exam-answer-setting"]&&(this._isInOrder=!!this["exam-answer-setting"].isInOrder,this._isIgnoreCase=!!this["exam-answer-setting"].isIgnoreCase),this._richText=this["rich-text-content"]||"",this._showRichText=!!this["rich-text-content"],this._selectedTagList=Array.isArray(this["tag-list"])?this["tag-list"].map(t=>({...t})):[],this._categoryId=this["category-id"]?String(this["category-id"]):""}_emit(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e??null}))}_addBlank(){this._title+=" ______",this._answers=[...this._answers,{title:"",tag:"",showInput:!1}],this.requestUpdate(),this._emitModelUpdate()}_onTitleInput(t){const e=t.target;e.value.length>this.TITLE_MAX&&(e.value=e.value.slice(0,this.TITLE_MAX)),this._title=e.value;const i=(this._title.match(/ ______/g)||[]).length;if(i!==this._answers.length)if(i>this._answers.length)for(let t=this._answers.length;t<i;t++)this._answers=[...this._answers,{title:"",tag:"",showInput:!1}];else this._answers=this._answers.slice(0,i);this._emitModelUpdate()}_emitModelUpdate(){if(this["use-model"]){const t=this._title.replaceAll(/ ______/g,"<filter></filter>");this.dispatchEvent(new CustomEvent("update:modelValue",{bubbles:!0,composed:!0,detail:t}))}}_handleAddTag(t){t.showInput=!1,t.tag&&(t.title=t.title?[t.title,t.tag].join(","):t.tag,t.tag=""),this.requestUpdate()}_closeTag(t,e){if(!t)return;const i=e.title.split(","),s=i.findIndex(e=>e===t);s>-1&&(i.splice(s,1),e.title=i.join(",")),this.requestUpdate()}_onCategoryChange(t){this._categoryId=t,this._emit("category-change",{value:t,customId:this["custom-id"]||"",examId:this["exam-id"]||0})}_imageResources(){return(this["resource-list"]||[]).filter(t=>1===t.resourceType).map(t=>t.resource.middle||t.resource.url).filter(Boolean)}_videoResource(){return(this["resource-list"]||[]).find(t=>2===t.resourceType)?.resource||null}_categoryLabel(){const t=this["category-list"].find(t=>String(t.categoryId)===String(this._categoryId));return t?.title||t?.categoryName||this._categoryId||"未选择分类"}async toJSON(){return new Promise((t,e)=>{const i={customId:this["custom-id"]||void 0,answerType:"blank_fill",orderIndex:this["order-index"]},s=n(this["is-edit"]?this._title:this.title?.replaceAll(/<filter><\/filter>/g," ______")||""),r=this["is-edit"]?this._answers:(this["answer-list"]||[]).map(t=>({...t,title:this._normalizeAnswerTitle(t),answerId:t?.answerId??t?.examAnswerId})),a=n(this["is-edit"]?this._analysis:this.analysis||""),o=this["is-edit"]?this._isInOrder:this["exam-answer-setting"]?.isInOrder??!1,h=this["is-edit"]?this._isIgnoreCase:this["exam-answer-setting"]?.isIgnoreCase??!0,p=this["is-edit"]?this._showRichText:!!this["rich-text-content"],c=this["is-edit"]?this._richText:this["rich-text-content"]||"",d=r.filter(t=>this._normalizeAnswerTitle(t));if(!s)return void e(new l("题目标题不能为空!","EMPTY_TITLE","title",i));if(r.length<1)return void e(new l("至少添加一个填空符!","NO_BLANK","answers",i));const x={answerType:g.BLANK_FILL,examTypeEnum:g.BLANK_FILL,title:s.replaceAll(/ ______/g,"<filter></filter>"),answers:d.map((t,e)=>{const i=this._normalizeAnswerTitle(t),s={title:i,answer:i,isCorrect:!0,orderIndex:e+1};return t.answerId&&(s.answerId=t.answerId,s.examAnswerId=t.answerId),s}),analysis:a,isSetCorrectAnswer:d.length>0,isKey:this["is-key"],examAnswerSettingBO:{isIgnoreCase:h,isInOrder:o},examAnswerSettingVO:{isIgnoreCase:h,isInOrder:o},examRichTextContent:p?c:""};this["custom-id"]&&(x.customId=this["custom-id"]),t(x)})}async _save(t){t?.stopImmediatePropagation();try{const t=await this.toJSON();this._emit("save",t)}catch(t){!function(t){const e=document.createElement("div");e.textContent=t,Object.assign(e.style,{position:"fixed",top:"20px",left:"50%",transform:"translateX(-50%)",padding:"10px 20px",borderRadius:"4px",fontSize:"13px",color:"#fff",background:"#f56c6c",zIndex:"99999",boxShadow:"0 4px 12px rgba(0,0,0,.15)",transition:"opacity .3s",opacity:"1"}),document.body.appendChild(e),setTimeout(()=>{e.style.opacity="0",setTimeout(()=>e.remove(),300)},2500)}(t.message)}}validate(){const t=[],e={customId:this["custom-id"]||void 0,answerType:"blank_fill",orderIndex:this["order-index"]},i=n(this["is-edit"]?this._title:this.title?.replaceAll(/<filter><\/filter>/g," ______")||""),s=this["is-edit"]?this._answers:(this["answer-list"]||[]).map(t=>({...t,title:this._normalizeAnswerTitle(t)}));return i||t.push(new l("题目标题不能为空!","EMPTY_TITLE","title",e)),s.length<1&&t.push(new l("至少添加一个填空符!","NO_BLANK","answers",e)),t}_renderPreview(){const e=this.title.replaceAll(/<filter><\/filter>/g," ______"),i=this["is-edit"]?this._answers:(this["answer-list"]||[]).map(t=>({...t,title:this._normalizeAnswerTitle(t)})),s=c(d(this["subject-prefix"],`${this["order-index"]+1}.`),e);return t`
+  </svg>`;let S=class extends i{constructor(){super(...arguments),this["order-index"]=0,this.title="",this["custom-id"]="",this["is-edit"]=!1,this["is-save"]=!1,this["is-set"]=!1,this["is-key"]=!1,this["show-action"]=!0,this["show-add"]=!0,this["hide-add-rich-text"]=!1,this["show-rich-text"]=!1,this["show-delete-action"]=!0,this["show-save-action"]=!0,this.sorting=!1,this["show-answer-setting"]=!1,this["show-analysis"]=!1,this["rich-text-content"]="",this.analysis="",this["exam-answer-relation-type"]=0,this["exam-expand"]="",this["exam-id"]=0,this["category-id"]="",this["exam-answer-setting"]={isInOrder:!1,isIgnoreCase:!0},this["upload-image"]=async t=>new Promise((e,i)=>{const s=new FileReader;s.onload=t=>e(t.target?.result),s.onerror=i,s.readAsDataURL(t)}),this["answer-list"]=[],this["tag-list"]=[],this["category-list"]=[],this["resource-list"]=[],this["show-tag"]=!1,this["show-category"]=!1,this["show-resource"]=!1,this["model-value"]="",this["use-model"]=!1,this._title="",this._analysis="",this._answers=[{title:"",tag:"",showInput:!1}],this._isInOrder=!1,this._isIgnoreCase=!0,this._showRichText=!1,this._richText="",this._selectedTagList=[],this._categoryId="",this.TITLE_MAX=400}willUpdate(t){t.has("is-edit")&&this["is-edit"]&&this._syncProps(),!this["is-edit"]&&(t.has("title")||t.has("answer-list")||t.has("analysis")||t.has("exam-answer-setting")||t.has("rich-text-content")||t.has("tag-list")||t.has("category-id"))&&this._syncProps(),t.has("model-value")&&this["use-model"]&&(this._title=this["model-value"].replaceAll(/<filter><\/filter>/g," ______")),t.has("tag-list")&&(this._selectedTagList=Array.isArray(this["tag-list"])?this["tag-list"].map(t=>({...t})):[]),t.has("category-id")&&(this._categoryId=this["category-id"]?String(this["category-id"]):"")}_normalizeAnswerTitle(t){return m(t?.title??t?.answer??"")}_blankCount(t){return(t.match(/ ______/g)||[]).length}_syncAnswersToBlankCount(t){t!==this._answers.length&&(t>this._answers.length?this._answers=[...this._answers,...Array.from({length:t-this._answers.length},()=>({title:"",tag:"",showInput:!1}))]:this._answers=this._answers.slice(0,t))}_syncProps(){if(this._title=(this.title||"").replaceAll(/<filter><\/filter>/g," ______"),this._analysis=this.analysis||"",this["answer-list"]?.length)this._answers=this["answer-list"].map(t=>({title:this._normalizeAnswerTitle(t),tag:"",showInput:!1,answerId:t?.answerId??t?.examAnswerId}));else{const t=this._blankCount(this._title);this._answers=Array.from({length:t},()=>({title:"",tag:"",showInput:!1}))}this["exam-answer-setting"]&&(this._isInOrder=!!this["exam-answer-setting"].isInOrder,this._isIgnoreCase=!!this["exam-answer-setting"].isIgnoreCase),this._richText=this["rich-text-content"]||"",this._showRichText=!!this["rich-text-content"],this._selectedTagList=Array.isArray(this["tag-list"])?this["tag-list"].map(t=>({...t})):[],this._categoryId=this["category-id"]?String(this["category-id"]):""}_emit(t,e){n(this,t,e)}_addBlank(){const t=this.shadowRoot?.querySelector(".title-textarea"),e=t?.selectionStart??this._title.length,i=t?.selectionEnd??this._title.length,s=`${this._title.slice(0,e)}${j}${this._title.slice(i)}`;s.length>this.TITLE_MAX||(this._title=s,this._syncAnswersToBlankCount(this._blankCount(this._title)),this.requestUpdate(),this._emitModelUpdate(),this.updateComplete.then(()=>{const t=this.shadowRoot?.querySelector(".title-textarea");if(!t)return;const i=e+7;t.focus(),t.setSelectionRange(i,i)}))}_onTitleInput(t){const e=t.target;e.value.length>this.TITLE_MAX&&(e.value=e.value.slice(0,this.TITLE_MAX)),this._title=e.value,this._syncAnswersToBlankCount(this._blankCount(this._title)),this._emitModelUpdate()}_emitModelUpdate(){if(this["use-model"]){const t=this._title.replaceAll(/ ______/g,"<filter></filter>");l(this,t)}}_handleAddTag(t){t.showInput=!1,t.tag&&(t.title=t.title?[t.title,t.tag].join(","):t.tag,t.tag=""),this.requestUpdate()}_closeTag(t,e){if(!t)return;const i=e.title.split(","),s=i.findIndex(e=>e===t);s>-1&&(i.splice(s,1),e.title=i.join(",")),this.requestUpdate()}_onCategoryChange(t){this._categoryId=t,this._emit("category-change",{value:t,customId:this["custom-id"]||"",examId:this["exam-id"]||0})}_imageResources(){return h(this["resource-list"]||[])}_videoResource(){return d(this["resource-list"]||[])}_categoryLabel(){return c(this["category-list"],this._categoryId)}_previewAnswerText(t){const e=(t?.title||"").split(",").map(t=>t.trim()).filter(Boolean);return e.length?e.join(" / "):""}_renderInlineBlankTitle(e){const i=this.title.replaceAll(/<filter><\/filter>/g," ______"),s=I(this["subject-prefix"],`${this["order-index"]+1}.`),r=i.split(" ______");return t`<span class="title preview-filled-title">${s?`${s} `:""}${r[0]??""}${r.slice(1).map((i,s)=>{const r=this._previewAnswerText(e[s]);return t`<span class="inline-blank ${r?"":"empty"}">${r||"填空"}</span>${i}`})}</span>`}async toJSON(){return new Promise((t,e)=>{const i={customId:this["custom-id"]||void 0,answerType:"blank_fill",orderIndex:this["order-index"]},s=f(this["is-edit"]?this._title:this.title?.replaceAll(/<filter><\/filter>/g," ______")||""),r=this["is-edit"]?this._answers:(this["answer-list"]||[]).map(t=>({...t,title:this._normalizeAnswerTitle(t),answerId:t?.answerId??t?.examAnswerId})),a=f(this["is-edit"]?this._analysis:this.analysis||""),o=this["is-edit"]?this._isInOrder:this["exam-answer-setting"]?.isInOrder??!1,n=this["is-edit"]?this._isIgnoreCase:this["exam-answer-setting"]?.isIgnoreCase??!0,l=this["is-edit"]?this._showRichText:!!this["rich-text-content"],h=this["is-edit"]?this._richText:this["rich-text-content"]||"",d=r.filter(t=>this._normalizeAnswerTitle(t));if(!s)return void e(new v("题目标题不能为空!","EMPTY_TITLE","title",i));if(r.length<1)return void e(new v("至少添加一个填空符!","NO_BLANK","answers",i));const c={answerType:k.BLANK_FILL,examTypeEnum:k.BLANK_FILL,title:s.replaceAll(/ ______/g,"<filter></filter>"),answers:d.map((t,e)=>{const i=this._normalizeAnswerTitle(t),s={title:i,answer:i,isCorrect:!0,orderIndex:e+1};return t.answerId&&(s.answerId=t.answerId,s.examAnswerId=t.answerId),s}),analysis:a,isSetCorrectAnswer:d.length>0,isKey:this["is-key"],examAnswerSettingBO:{isIgnoreCase:n,isInOrder:o},examAnswerSettingVO:{isIgnoreCase:n,isInOrder:o},examRichTextContent:l?h:""};this["custom-id"]&&(c.customId=this["custom-id"]),t(c)})}async _save(t){t?.stopImmediatePropagation();try{const t=await this.toJSON();this._emit("save",t)}catch(t){p(t.message)}}validate(){const t=[],e={customId:this["custom-id"]||void 0,answerType:"blank_fill",orderIndex:this["order-index"]},i=f(this["is-edit"]?this._title:this.title?.replaceAll(/<filter><\/filter>/g," ______")||""),s=this["is-edit"]?this._answers:(this["answer-list"]||[]).map(t=>({...t,title:this._normalizeAnswerTitle(t)}));return i||t.push(new v("题目标题不能为空!","EMPTY_TITLE","title",e)),s.length<1&&t.push(new v("至少添加一个填空符!","NO_BLANK","answers",e)),t}_renderPreview(){const e=this["is-edit"]?this._answers:(this["answer-list"]||[]).map(t=>({...t,title:this._normalizeAnswerTitle(t)}));return t`
       <div class="preview">
-        <span class="title">${s}（填空题）</span>
-        ${this["show-rich-text"]&&this["rich-text-content"]?t`<div class="rich-text" .innerHTML=${this["rich-text-content"]}></div>`:""}
-        ${i.some(t=>t.title)?t`
-          <div class="content flex flex-wrap">
-            <span>正确答案：</span>
-            ${i.map((e,i)=>e.title?t`<span style="margin-right:10px">填空${i+1}: ${e.title}</span>`:"")}
+        <div class="preview-header">
+          <div class="preview-title-row">
+            ${this._renderInlineBlankTitle(e)}
+            <span class="preview-type">填空题</span>
           </div>
-        `:""}
-        ${this.analysis?t`<div style="color:#909399;font-size:12px;margin-top:8px">解析: ${this.analysis}</div>`:""}
+          ${this["show-rich-text"]&&this["rich-text-content"]?t`<div class="rich-text" .innerHTML=${this["rich-text-content"]}></div>`:""}
+        </div>
+        ${this.analysis?t`<div class="preview-note">${this.analysis}</div>`:""}
         ${this["show-category"]&&this._categoryId?t`<div class="section-row"><span class="value-text">分类：${this._categoryLabel()}</span></div>`:""}
         ${this._renderResourceSection()}
       </div>
@@ -45,104 +44,116 @@ import{html as t,css as e,LitElement as i}from"lit";import{property as s,state a
           ${e.length||i?.url?"":t`<div class="tag-hint">暂无资源</div>`}
         </div>
       </div>
-    `}_renderSorting(){const t=n(this["is-edit"]?this._title:this.title||"")||"未命名题目",e=c(d(this["subject-prefix"],`${this["order-index"]+1}. `),t);return p(e,x[g.BLANK_FILL]||g.BLANK_FILL)}_renderEdit(){return t`
-      <div class="flex flex-items-start">
-        <div class="label"><span>题目:</span></div>
-        <div style="flex:1">
-          <div class="el-input">
-            <textarea rows="3" .value=${this._title}
-              maxlength=${this.TITLE_MAX}
-              @input=${t=>this._onTitleInput(t)}
-              placeholder="【填空题】请输入问题"></textarea>
-            <span class="char-counter">${this._title.length}/${this.TITLE_MAX}</span>
+    `}_renderSorting(){const t=f(this["is-edit"]?this._title:this.title||"")||"未命名题目",e=g(this["subject-prefix"],this["order-index"],t);return $(e,T[k.BLANK_FILL]||k.BLANK_FILL)}_renderEdit(){return t`
+      <div class="edit-form">
+        <div class="edit-row">
+          <div class="label"><span>题目:</span></div>
+          <div class="row-body">
+            <div class="el-input title-input">
+              <textarea class="title-textarea" rows="3" .value=${this._title}
+                maxlength=${this.TITLE_MAX}
+                @input=${t=>this._onTitleInput(t)}
+                placeholder="【填空题】请输入问题"></textarea>
+              <div class="title-input-actions">
+                <span class="char-counter">${this._title.length}/${this.TITLE_MAX}</span>
+                <button type="button" class="title-input-insert" @click=${()=>this._addBlank()}>插入填空符</button>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
 
-      <div class="flex flex-justify-end">
-        <span class="el-link" @click=${()=>this._addBlank()}>插入填空符</span>
-      </div>
-
-      <div class="flex flex-items-center" style="margin-top:12px">
-        <div class="label"><span>答题设置:</span></div>
-        <label class="el-checkbox">
-          <input type="checkbox" .checked=${this._isInOrder}
-            @change=${t=>{this._isInOrder=t.target.checked}} />
-          答案不分顺序
-        </label>
-        <label class="el-checkbox">
-          <input type="checkbox" .checked=${this._isIgnoreCase}
-            @change=${t=>{this._isIgnoreCase=t.target.checked}} />
-          忽略大小写
-        </label>
-      </div>
+        <div class="edit-row section-row">
+          <div class="label"><span>答题设置:</span></div>
+          <div class="row-body edit-inline">
+            <label class="el-checkbox">
+              <input type="checkbox" .checked=${this._isInOrder}
+                @change=${t=>{this._isInOrder=t.target.checked}} />
+              答案不分顺序
+            </label>
+            <label class="el-checkbox">
+              <input type="checkbox" .checked=${this._isIgnoreCase}
+                @change=${t=>{this._isIgnoreCase=t.target.checked}} />
+              忽略大小写
+            </label>
+          </div>
+        </div>
 
-      <slot name="business-tag"></slot>
+        <slot name="business-tag"></slot>
 
-      ${this._renderCategorySection()}
+        ${this._renderCategorySection()}
 
-      ${this._renderResourceSection()}
+        ${this._renderResourceSection()}
 
-      ${this._answers.map((e,i)=>t`
-        <div class="answer-item" style="margin-top:12px">
-          <div class="label"><span>第${i+1}空答案:</span></div>
-          <div class="answer-tags">
-            ${e.title.split(",").filter(Boolean).map(i=>t`
-              <span class="el-tag">
-                ${i}
-                <span class="el-tag__close" @click=${()=>this._closeTag(i,e)}>×</span>
-              </span>
-            `)}
-            ${t`
-              ${e.showInput?t`
-                <input type="text" class="el-input--small"
-                  @keydown=${t=>{"Enter"===t.key&&this._handleAddTag(e)}}
-                  @input=${t=>{e.tag=t.target.value}}
-                  @blur=${()=>this._handleAddTag(e)} />
-              `:t`
-                <span class="el-button--small" @click=${()=>{e.showInput=!0,this.requestUpdate(),this.updateComplete.then(()=>{this.shadowRoot?.querySelector(".el-input--small")?.focus()})}}>
-                  ${w}
-                  <span>${e.title?"添加同义词":"添加答案"}</span>
-                </span>
-              `}
-            `}
+        <div class="edit-row section-row answer-section-row">
+          <div class="label"><span>参考答案:</span></div>
+          <div class="row-body">
+            <div class="answer-section">
+              <div class="edit-note">每个填空支持多个同义词，录入后会按逗号序列化。</div>
+              ${this._answers.map((e,i)=>t`
+                <div class="answer-item">
+                  <div class="answer-item-label"><span>第${i+1}空:</span></div>
+                  <div class="answer-tags">
+                    ${e.title.split(",").filter(Boolean).map(i=>t`
+                      <span class="el-tag">
+                        ${i}
+                        <span class="el-tag__close" @click=${()=>this._closeTag(i,e)}>×</span>
+                      </span>
+                    `)}
+                    ${t`
+                      ${e.showInput?t`
+                        <input type="text" class="el-input--small"
+                          @keydown=${t=>{"Enter"===t.key&&this._handleAddTag(e)}}
+                          @input=${t=>{e.tag=t.target.value}}
+                          @blur=${()=>this._handleAddTag(e)} />
+                      `:t`
+                        <span class="el-button--small" @click=${()=>{e.showInput=!0,this.requestUpdate(),this.updateComplete.then(()=>{this.shadowRoot?.querySelector(".el-input--small")?.focus()})}}>
+                          ${L}
+                          <span>${e.title?"添加同义词":"添加答案"}</span>
+                        </span>
+                      `}
+                    `}
+                  </div>
+                </div>
+              `)}
+            </div>
           </div>
         </div>
-      `)}
 
-      ${this["show-rich-text"]&&this._showRichText?t`
-        <div class="flex flex-items-start" style="margin-top:12px">
-          <div class="label"><span>副文本:</span></div>
-          <div style="flex:1">
-            <slot name="sub-text">
-              <qxs-blocksuite-editor
-                .content=${this._richText}
-                .upload-image=${this["upload-image"]}
-                ?is-edit=${!0}
-                @input=${t=>{this._richText=t.target.getContent()}}
-              ></qxs-blocksuite-editor>
-            </slot>
-            ${this["show-action"]?"":t`
-                <div class="flex flex-justify-end" style="margin-top:8px">
-                  <span class="el-link" style="color:#f56c6c" @click=${()=>{this._showRichText=!1,this._richText=""}}>删除富文本</span>
-                </div>
-              `}
+        ${this["show-rich-text"]&&this._showRichText?t`
+          <div class="edit-row section-row">
+            <div class="label"><span>副文本:</span></div>
+            <div class="row-body">
+              <slot name="sub-text">
+                <qxs-blocksuite-editor
+                  .content=${this._richText}
+                  .toolbar=${o}
+                  .upload-image=${this["upload-image"]}
+                  ?is-edit=${!0}
+                  @input=${t=>{this._richText=t.target.getContent()}}
+                ></qxs-blocksuite-editor>
+              </slot>
+              ${this["show-action"]?"":t`
+                  <div class="flex flex-justify-end" style="margin-top:8px">
+                    <span class="el-link" style="color:#f56c6c" @click=${()=>{this._showRichText=!1,this._richText=""}}>删除富文本</span>
+                  </div>
+                `}
+            </div>
           </div>
-        </div>
-      `:""}
+        `:""}
 
-      ${this["show-analysis"]?t`
-        <div class="flex flex-items-start" style="margin-top:12px">
-          <div class="label"><span>解析:</span></div>
-          <div style="flex:1">
-            <div class="el-input">
-              <textarea rows="2" .value=${this._analysis}
-                @input=${t=>{this._analysis=t.target.value}}
-                placeholder="请输入题目解析"></textarea>
+        ${this["show-analysis"]?t`
+          <div class="edit-row section-row">
+            <div class="label"><span>解析:</span></div>
+            <div class="row-body">
+              <div class="el-input">
+                <textarea rows="2" .value=${this._analysis}
+                  @input=${t=>{this._analysis=t.target.value}}
+                  placeholder="请输入题目解析"></textarea>
+              </div>
             </div>
           </div>
-        </div>
-      `:""}
+        `:""}
+      </div>
     `}render(){if(this.sorting)return this._renderSorting();const e=this["is-edit"]?t`<div slot="edit">${this._renderEdit()}</div>`:t`<div slot="preview">${this._renderPreview()}</div>`;return t`
       <qxs-subject-layout .show-edit=${this["is-edit"]}>
         ${e}
@@ -166,38 +177,60 @@ import{html as t,css as e,LitElement as i}from"lit";import{property as s,state a
         `:""}
         <slot name="action"></slot>
       </qxs-subject-layout>
-    `}};_.styles=[h,e`
-    :host { display: block; font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 12px; color: #5a5a5a; }
-    *, ::before, ::after { box-sizing: border-box; }
-
-    .preview { padding: 12px 0; }
-    .preview .title { font-size: 14px; color: #303133; }
-    .preview .rich-text { margin-top: 8px; }
-    .preview .rich-text img { max-width: 100%; }
-    .preview .rich-text img[data-align="left"] { display: block !important; margin: 0 auto 0 0 !important; }
-    .preview .rich-text img[data-align="center"] { display: block !important; margin: 0 auto !important; }
-    .preview .rich-text img[data-align="right"] { display: block !important; margin: 0 0 0 auto !important; }
-    .preview .content { color: #a8abb2; margin-top: 10px; }
+    `}};S.styles=[b,x,u,w,y,_,e`
+    .preview-note {
+      margin-top: 18px;
+      padding-left: 10px;
+      border-left: 2px solid #e5eaf3;
+      font-size: 13px;
+      line-height: 1.8;
+      color: #6b7280;
+    }
+    .preview-filled-title {
+      display: inline;
+      font-size: 16px;
+      line-height: 1.9;
+      font-weight: 600;
+      color: #303133;
+    }
+    .inline-blank {
+      display: inline-flex;
+      align-items: center;
+      min-width: 64px;
+      margin: 0 4px;
+      padding: 0 4px 1px;
+      border-bottom: 1px solid #d6deea;
+      font-size: 14px;
+      line-height: 1.6;
+      font-weight: 500;
+      color: #8b95a7;
+      vertical-align: baseline;
+    }
+    .inline-blank.empty {
+      color: transparent;
+    }
 
     .flex { display: flex; }
     .flex-wrap { flex-wrap: wrap; }
     .flex-items-center { display: flex; align-items: center; }
     .flex-items-start { display: flex; align-items: flex-start; }
     .flex-justify-end { display: flex; justify-content: flex-end; }
-    .label { min-width: 70px; font-size: 13px; color: #606266; }
-
-    textarea {
-      border: 1px solid #dcdfe6; border-radius: 3px; padding: 5px 11px;
-      font-size: 13px; font-family: inherit; width: 100%; resize: none; transition: border-color .2s;
-      line-height: 1.5; display: block; box-sizing: border-box;
+    .edit-actions {
+      display: flex;
+      justify-content: flex-end;
+      padding-left: 88px;
+    }
+    .edit-inline {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px 14px;
+      min-height: 32px;
     }
-    textarea:focus { border-color: #3D61E3; outline: none; }
-    textarea:disabled { background: #f5f7fa; color: #c0c4cc; cursor: not-allowed; }
-    .el-input { position: relative; display: block; }
-    .el-input textarea { padding-bottom: 24px; }
-    .el-input .char-counter {
-      position: absolute; right: 12px; bottom: 8px;
-      font-size: 12px; color: #909399; line-height: 1; pointer-events: none;
+    .edit-note {
+      font-size: 12px;
+      line-height: 1.6;
+      color: #909399;
     }
 
     .el-tag {
@@ -214,8 +247,8 @@ import{html as t,css as e,LitElement as i}from"lit";import{property as s,state a
 
     .el-button--small {
       display: inline-flex; align-items: center; gap: 4px;
-      height: 24px; padding: 0 10px; font-size: 12px; line-height: 1;
-      border: 1px solid #dcdfe6; border-radius: 3px; background: #fff; color: #606266;
+      height: 28px; padding: 0 10px; font-size: 12px; line-height: 1;
+      border: 1px solid #dcdfe6; border-radius: 6px; background: #fff; color: #606266;
       cursor: pointer; transition: all .2s; white-space: nowrap;
     }
     .el-button--small:hover { color: #3D61E3; border-color: #c6e2ff; background-color: #ecf5ff; }
@@ -224,12 +257,49 @@ import{html as t,css as e,LitElement as i}from"lit";import{property as s,state a
     .el-link:hover { color: #2D4CB8; }
     .el-link.is-disabled { color: #c0c4cc; cursor: not-allowed; }
 
-    .el-input--small { width: 80px; }
-    .el-input--small input {
-      height: 24px; padding: 0 8px; font-size: 12px; line-height: 24px;
-      border: 1px solid #dcdfe6; border-radius: 3px; width: 100%;
+    .el-input--small {
+      width: 80px;
+      height: 28px;
+      padding: 0 8px;
+      font-size: 12px;
+      line-height: 24px;
+      color: #606266;
+      background: #fff;
+      border: 1px solid #dcdfe6;
+      border-radius: 6px;
+      box-sizing: border-box;
+      font-family: inherit;
+    }
+    .el-input--small:focus { border-color: #3D61E3; outline: none; }
+
+    .title-input textarea {
+      padding-bottom: 38px;
+    }
+    .title-input-actions {
+      position: absolute;
+      right: 12px;
+      bottom: 8px;
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
     }
-    .el-input--small input:focus { border-color: #3D61E3; outline: none; }
+    .title-input .char-counter {
+      position: static;
+      color: #909399;
+    }
+    .title-input-insert {
+      border: none;
+      background: none;
+      padding: 0;
+      margin: 0;
+      color: #3D61E3;
+      cursor: pointer;
+      font-size: 12px;
+      font-family: inherit;
+      line-height: 1;
+      white-space: nowrap;
+    }
+    .title-input-insert:hover { color: #2D4CB8; }
 
     .el-checkbox {
       display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
@@ -239,11 +309,25 @@ import{html as t,css as e,LitElement as i}from"lit";import{property as s,state a
       width: 14px; height: 14px; cursor: pointer; accent-color: #3D61E3;
     }
 
-    .answer-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
-    .answer-item .label { min-width: 70px; padding-top: 0; color: #909399; }
-    .answer-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
+    .answer-item {
+      display: grid;
+      grid-template-columns: 70px minmax(0, 1fr);
+      gap: 8px 12px;
+      align-items: start;
+    }
+    .answer-item-label {
+      min-width: 0;
+      align-self: center;
+      font-size: 13px;
+      line-height: 1.5;
+      font-weight: 600;
+      color: #6b7280;
+      letter-spacing: 0;
+    }
+    .answer-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-height: 28px; }
+    .answer-section { display: flex; flex-direction: column; gap: 10px; }
+    .answer-section-row > .label { padding-top: 0; }
 
-    .section-row { margin-top: 12px; }
     .value-text { font-size: 13px; color: #606266; white-space: pre-wrap; }
     .tag-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 32px; }
     .tag-item {
@@ -256,7 +340,7 @@ import{html as t,css as e,LitElement as i}from"lit";import{property as s,state a
     .tag-hint { font-size: 12px; color: #909399; }
 
     .el-select {
-      width: 150px; height: 32px; border: 1px solid #dcdfe6; border-radius: 3px;
+      width: 150px; height: 34px; border: 1px solid #dcdfe6; border-radius: 6px;
       padding: 0 8px; font-size: 13px; background: #fff; appearance: none;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c0c4cc' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
       background-repeat: no-repeat; background-position: right 8px center;
@@ -270,5 +354,32 @@ import{html as t,css as e,LitElement as i}from"lit";import{property as s,state a
       width: 72px; height: 72px; object-fit: cover; border-radius: 6px;
       border: 1px solid #e4e7ed; background: #f5f7fa;
     }
-  `],m([s({type:Number,attribute:"order-index"})],_.prototype,"order-index",2),m([s({type:String,attribute:"subject-prefix"})],_.prototype,"subject-prefix",2),m([s({type:String})],_.prototype,"title",2),m([s({type:String,attribute:"custom-id"})],_.prototype,"custom-id",2),m([s({type:Boolean,attribute:"is-edit"})],_.prototype,"is-edit",2),m([s({type:Boolean,attribute:"is-save"})],_.prototype,"is-save",2),m([s({type:Boolean,attribute:"is-set"})],_.prototype,"is-set",2),m([s({type:Boolean,attribute:"is-key"})],_.prototype,"is-key",2),m([s({type:Boolean,attribute:"show-action"})],_.prototype,"show-action",2),m([s({type:Boolean,attribute:"show-add"})],_.prototype,"show-add",2),m([s({type:Boolean,attribute:"hide-add-rich-text"})],_.prototype,"hide-add-rich-text",2),m([s({type:Boolean,attribute:"show-rich-text"})],_.prototype,"show-rich-text",2),m([s({type:Boolean,attribute:"show-delete-action"})],_.prototype,"show-delete-action",2),m([s({type:Boolean,attribute:"show-save-action"})],_.prototype,"show-save-action",2),m([s({type:Boolean,reflect:!0})],_.prototype,"sorting",2),m([s({type:Boolean,attribute:"show-answer-setting"})],_.prototype,"show-answer-setting",2),m([s({type:Boolean,attribute:"show-analysis"})],_.prototype,"show-analysis",2),m([s({type:String,attribute:"rich-text-content"})],_.prototype,"rich-text-content",2),m([s({type:String})],_.prototype,"analysis",2),m([s({type:Number,attribute:"exam-answer-relation-type"})],_.prototype,"exam-answer-relation-type",2),m([s({type:String,attribute:"exam-expand"})],_.prototype,"exam-expand",2),m([s({type:Number,attribute:"exam-id"})],_.prototype,"exam-id",2),m([s({type:String,attribute:"category-id"})],_.prototype,"category-id",2),m([s({type:Object,attribute:"exam-answer-setting"})],_.prototype,"exam-answer-setting",2),m([s({type:Object,attribute:"upload-image"})],_.prototype,"upload-image",2),m([s({type:Array,attribute:"answer-list"})],_.prototype,"answer-list",2),m([s({type:Array,attribute:"tag-list"})],_.prototype,"tag-list",2),m([s({type:Array,attribute:"category-list"})],_.prototype,"category-list",2),m([s({type:Array,attribute:"resource-list"})],_.prototype,"resource-list",2),m([s({type:Boolean,attribute:"show-tag"})],_.prototype,"show-tag",2),m([s({type:Boolean,attribute:"show-category"})],_.prototype,"show-category",2),m([s({type:Boolean,attribute:"show-resource"})],_.prototype,"show-resource",2),m([s({type:String,attribute:"model-value"})],_.prototype,"model-value",2),m([s({type:Boolean,attribute:"use-model"})],_.prototype,"use-model",2),m([r()],_.prototype,"_title",2),m([r()],_.prototype,"_analysis",2),m([r()],_.prototype,"_answers",2),m([r()],_.prototype,"_isInOrder",2),m([r()],_.prototype,"_isIgnoreCase",2),m([r()],_.prototype,"_showRichText",2),m([r()],_.prototype,"_richText",2),m([r()],_.prototype,"_selectedTagList",2),m([r()],_.prototype,"_categoryId",2),_=m([a("qxs-blank-fill")],_);export{_ as QxsBlankFill};
+
+    @media (max-width: 720px) {
+      .edit-row,
+      .section-row {
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .edit-row > .label,
+      .section-row > .label {
+        min-width: 0;
+        padding-top: 0;
+      }
+
+      .edit-actions {
+        padding-left: 0;
+        justify-content: flex-start;
+      }
+
+      .answer-item {
+        flex-direction: column;
+      }
+
+      .answer-item-label {
+        min-width: 0;
+      }
+    }
+  `],C([s({type:Number,attribute:"order-index"})],S.prototype,"order-index",2),C([s({type:String,attribute:"subject-prefix"})],S.prototype,"subject-prefix",2),C([s({type:String})],S.prototype,"title",2),C([s({type:String,attribute:"custom-id"})],S.prototype,"custom-id",2),C([s({type:Boolean,attribute:"is-edit"})],S.prototype,"is-edit",2),C([s({type:Boolean,attribute:"is-save"})],S.prototype,"is-save",2),C([s({type:Boolean,attribute:"is-set"})],S.prototype,"is-set",2),C([s({type:Boolean,attribute:"is-key"})],S.prototype,"is-key",2),C([s({type:Boolean,attribute:"show-action"})],S.prototype,"show-action",2),C([s({type:Boolean,attribute:"show-add"})],S.prototype,"show-add",2),C([s({type:Boolean,attribute:"hide-add-rich-text"})],S.prototype,"hide-add-rich-text",2),C([s({type:Boolean,attribute:"show-rich-text"})],S.prototype,"show-rich-text",2),C([s({type:Boolean,attribute:"show-delete-action"})],S.prototype,"show-delete-action",2),C([s({type:Boolean,attribute:"show-save-action"})],S.prototype,"show-save-action",2),C([s({type:Boolean,reflect:!0})],S.prototype,"sorting",2),C([s({type:Boolean,attribute:"show-answer-setting"})],S.prototype,"show-answer-setting",2),C([s({type:Boolean,attribute:"show-analysis"})],S.prototype,"show-analysis",2),C([s({type:String,attribute:"rich-text-content"})],S.prototype,"rich-text-content",2),C([s({type:String})],S.prototype,"analysis",2),C([s({type:Number,attribute:"exam-answer-relation-type"})],S.prototype,"exam-answer-relation-type",2),C([s({type:String,attribute:"exam-expand"})],S.prototype,"exam-expand",2),C([s({type:Number,attribute:"exam-id"})],S.prototype,"exam-id",2),C([s({type:String,attribute:"category-id"})],S.prototype,"category-id",2),C([s({type:Object,attribute:"exam-answer-setting"})],S.prototype,"exam-answer-setting",2),C([s({type:Object,attribute:"upload-image"})],S.prototype,"upload-image",2),C([s({type:Array,attribute:"answer-list"})],S.prototype,"answer-list",2),C([s({type:Array,attribute:"tag-list"})],S.prototype,"tag-list",2),C([s({type:Array,attribute:"category-list"})],S.prototype,"category-list",2),C([s({type:Array,attribute:"resource-list"})],S.prototype,"resource-list",2),C([s({type:Boolean,attribute:"show-tag"})],S.prototype,"show-tag",2),C([s({type:Boolean,attribute:"show-category"})],S.prototype,"show-category",2),C([s({type:Boolean,attribute:"show-resource"})],S.prototype,"show-resource",2),C([s({type:String,attribute:"model-value"})],S.prototype,"model-value",2),C([s({type:Boolean,attribute:"use-model"})],S.prototype,"use-model",2),C([r()],S.prototype,"_title",2),C([r()],S.prototype,"_analysis",2),C([r()],S.prototype,"_answers",2),C([r()],S.prototype,"_isInOrder",2),C([r()],S.prototype,"_isIgnoreCase",2),C([r()],S.prototype,"_showRichText",2),C([r()],S.prototype,"_richText",2),C([r()],S.prototype,"_selectedTagList",2),C([r()],S.prototype,"_categoryId",2),S=C([a("qxs-blank-fill")],S);export{S as QxsBlankFill};
 //# sourceMappingURL=blank-fill.mjs.map