优化

src/components/PropSidebar.tsx

@@ -48,6 +48,8 @@ import {
   HelpCircle,
   Lock,
   Unlock,
+  Eye,
+  EyeOff,
   ArrowUp,
   ArrowDown,
   ArrowLeft,
@@ -570,6 +572,14 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
     }
   };
 
+  const toggleLayerVisibility = (idx: number) => {
+    const list = template.elements.map((el, i) => {
+      if (i !== idx) return el;
+      return { ...el, hidden: el.hidden ? undefined : true };
+    });
+    onChangeTemplate({ ...template, elements: list });
+  };
+
   const deleteLayer = async (id: string) => {
     const el = template.elements.find((x) => x.id === id);
     if (el?.locked) return;
@@ -1535,6 +1545,60 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                 />
                 <span className="text-[12px] text-[#ccc]">自动换行</span>
               </label>
+
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <label className="ps-field-label">最大行数</label>
+                  <PropInput
+                    type="number"
+                    min="0"
+                    max="99"
+                    step="1"
+                    value={selectedElem.textMaxLines ?? ''}
+                    onCommit={(val) => {
+                      const raw = String(val).trim();
+                      if (!raw) {
+                        handleElemChange({
+                          ...selectedElem,
+                          textMaxLines: undefined,
+                          textEllipsis: undefined,
+                        });
+                        return;
+                      }
+                      const n = Math.max(0, Math.min(99, Math.floor(Number(val) || 0)));
+                      handleElemChange({
+                        ...selectedElem,
+                        textMaxLines: n > 0 ? n : undefined,
+                        textEllipsis: n > 0 ? selectedElem.textEllipsis : undefined,
+                      });
+                    }}
+                    className="ps-field font-mono"
+                    placeholder="不限"
+                  />
+                  <p className="text-[9px] text-[#666] mt-0.5">留空表示不限制</p>
+                </div>
+                <div className="flex items-end pb-5">
+                  <label
+                    className={`flex items-center gap-2 cursor-pointer ${
+                      !selectedElem.textMaxLines ? 'opacity-40 cursor-not-allowed' : ''
+                    }`}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selectedElem.textEllipsis === true}
+                      disabled={!selectedElem.textMaxLines || selectedElem.textMaxLines <= 0}
+                      onChange={(e) =>
+                        handleElemChange({
+                          ...selectedElem,
+                          textEllipsis: e.target.checked ? true : undefined,
+                        })
+                      }
+                      className="ps-checkbox"
+                    />
+                    <span className="text-[12px] text-[#ccc]">超出显示省略号</span>
+                  </label>
+                </div>
+              </div>
             </div>
           )}
 
@@ -2116,6 +2180,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
           const actualIdx = template.elements.length - 1 - revIdx;
           const isSelected = selectedElementIds.includes(elem.id);
           const isLocked = !!elem.locked;
+          const isHidden = elem.hidden === true;
 
           return (
             <div
@@ -2145,7 +2210,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                   }
               }
               className={`ps-layer-item group ${isSelected && !isLocked ? 'selected' : ''} ${isLocked ? 'ps-layer-item-locked' : ''
-                }`}
+                }${isHidden ? ' ps-layer-item-hidden' : ''}`}
             >
               <div className="flex items-center gap-2 min-w-0 flex-1 pointer-events-none">
                 <span className="ps-layer-item-icon">
@@ -2186,6 +2251,14 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                     </button>
                   </>
                 )}
+                <button
+                  type="button"
+                  onClick={(e) => { e.stopPropagation(); toggleLayerVisibility(actualIdx); }}
+                  title={isHidden ? '显示图层' : '隐藏图层'}
+                  className={isHidden ? 'text-[#666]' : 'text-[#ccc] hover:text-white'}
+                >
+                  {isHidden ? <EyeOff /> : <Eye />}
+                </button>
                 <button
                   type="button"
                   onClick={(e) => { e.stopPropagation(); toggleLockLayer(actualIdx); }}