优化

src/components/PropSidebar.tsx

@@ -482,7 +482,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
         <div className="space-y-3">
           <div className="text-[10px] font-bold text-[#31a8ff]">变量列表</div>
           <p className="text-[10px] text-[#666] leading-relaxed mb-3">
-            可编辑变量默认值，未被内容或显示条件引用的变量可删除。
+            可编辑变量预览值，未被内容或显示条件引用的变量可删除。
           </p>
           {templateVariables.map((v) => {
             const inUse = isTemplateVariableInUse(template, v);
@@ -501,7 +501,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                   type="text"
                   value={template.variableDefaults?.[v] ?? ''}
                   onChange={(e) => setVariableDefault(v, e.target.value)}
-                  placeholder="预览默认值"
+                  placeholder="预览值"
                   className="ps-field font-mono text-[10px] w-full min-w-0"
                 />
                 <div className="flex items-center justify-center w-[44px] shrink-0">
@@ -661,6 +661,17 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
         )}
         {selectedElem.type !== 'table' && (
           <>
+            <div className="flex items-center justify-between gap-2">
+              <label className="ps-field-label">内容</label>
+              <button
+                type="button"
+                disabled={!selectedElem.content}
+                onClick={() => handleElemChange({ ...selectedElem, content: '' })}
+                className="text-[9px] text-[#31a8ff] hover:underline cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed disabled:no-underline shrink-0"
+              >
+                清空内容
+              </button>
+            </div>
             <PropTextarea
               value={selectedElem.content}
               onCommit={(val) => handleElemChange({ ...selectedElem, content: val })}
@@ -691,6 +702,31 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
             )}
           </>
         )}
+        {(selectedElem.type === 'barcode' ||
+          selectedElem.type === 'qrcode' ||
+          selectedElem.type === 'image') && (
+          <label className="flex items-start gap-2 pt-1">
+            <input
+              type="checkbox"
+              checked={selectedElem.showWhenContentEmpty ?? false}
+              onChange={(e) =>
+                handleElemChange({
+                  ...selectedElem,
+                  showWhenContentEmpty: e.target.checked ? true : undefined,
+                })
+              }
+              className="ps-checkbox mt-0.5"
+            />
+            <span className="text-xs text-[#ccc] leading-normal">
+              输出模式下内容为空仍显示
+              {selectedElem.type === 'image' && (
+                <span className="block text-[9px] text-[#777] mt-0.5">
+                  开启后绑定数据为空时可显示默认图片
+                </span>
+              )}
+            </span>
+          </label>
+        )}
         {selectedElem.type === 'table' && (
           <p className="text-[10px] text-[#777] leading-normal">
             表格各单元格内容独立设置，默认为空。点击画布上的单元格后在属性面板编辑。
@@ -1407,6 +1443,45 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                   <option value="fill">拉伸 (fill)</option>
                 </FieldSelect>
               </div>
+              <div>
+                <label className="ps-field-label">默认图片</label>
+                <p className="text-[9px] text-[#777] leading-normal mb-1.5">
+                  主图地址加载失败时使用；需同时开启「内容为空仍显示」才能在绑定数据为空时展示
+                </p>
+                <label className="ps-btn text-[10px] cursor-pointer mb-1.5 inline-flex">
+                  <Upload className="w-3.5 h-3.5" />
+                  选择默认图片
+                  <input
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    onChange={(e) => {
+                      const file = e.target.files?.[0];
+                      if (!file) return;
+                      const reader = new FileReader();
+                      reader.onload = () =>
+                        handleElemChange({
+                          ...selectedElem,
+                          defaultImage: reader.result as string,
+                        });
+                      reader.readAsDataURL(file);
+                      e.target.value = '';
+                    }}
+                  />
+                </label>
+                <PropTextarea
+                  value={selectedElem.defaultImage ?? ''}
+                  onCommit={(val) =>
+                    handleElemChange({
+                      ...selectedElem,
+                      defaultImage: val.trim() || undefined,
+                    })
+                  }
+                  rows={2}
+                  className="ps-field resize-none"
+                  placeholder="默认图片 URL 或 data URI"
+                />
+              </div>
             </div>
           )}