Refactor LED strip configuration interface layout

- Separate LED control panels from display preview areas
- Add dedicated LED count control section at bottom of page
- Create new LedCountControlPanel component with 4-column grid layout
- Fix display container height to prevent layout overflow
- Remove embedded LED controls from DisplayView component
- Improve text color for display info panel title
- Hide spinner buttons on number inputs for cleaner UI
- Enhance input field styling with centered text and larger font

src/components/led-strip-configuration/led-count-control-panel.tsx

@@ -0,0 +1,155 @@
+import { invoke } from '@tauri-apps/api/core';
+import { Component, createMemo, For, JSX, splitProps } from 'solid-js';
+import { DisplayInfo } from '../../models/display-info.model';
+import { ledStripStore } from '../../stores/led-strip.store';
+import { Borders } from '../../constants/border';
+
+type LedCountControlItemProps = {
+  displayId: number;
+  border: Borders;
+  label: string;
+};
+
+const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
+  const config = createMemo(() => {
+    return ledStripStore.strips.find(
+      (s) => s.display_id === props.displayId && s.border === props.border
+    );
+  });
+
+  const handleDecrease = () => {
+    if (config()) {
+      invoke('patch_led_strip_len', {
+        displayId: props.displayId,
+        border: props.border,
+        deltaLen: -1,
+      }).catch((e) => {
+        console.error(e);
+      });
+    }
+  };
+
+  const handleIncrease = () => {
+    if (config()) {
+      invoke('patch_led_strip_len', {
+        displayId: props.displayId,
+        border: props.border,
+        deltaLen: 1,
+      }).catch((e) => {
+        console.error(e);
+      });
+    }
+  };
+
+  const handleInputChange = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    const newValue = parseInt(target.value);
+    const currentLen = config()?.len || 0;
+    
+    if (!isNaN(newValue) && newValue >= 0 && newValue <= 1000) {
+      const deltaLen = newValue - currentLen;
+      if (deltaLen !== 0) {
+        invoke('patch_led_strip_len', {
+          displayId: props.displayId,
+          border: props.border,
+          deltaLen: deltaLen,
+        }).catch((e) => {
+          console.error(e);
+          // Reset input value on error
+          target.value = currentLen.toString();
+        });
+      }
+    } else {
+      // Reset invalid input
+      target.value = (config()?.len || 0).toString();
+    }
+  };
+
+  return (
+    <div class="card bg-base-100 border border-base-300/50 p-2">
+      <div class="flex flex-col gap-1">
+        <div class="text-center">
+          <span class="text-xs font-medium text-base-content">
+            {props.label}
+          </span>
+        </div>
+
+        <div class="flex items-center gap-1">
+          <button
+            class="btn btn-xs btn-circle btn-outline flex-shrink-0"
+            onClick={handleDecrease}
+            disabled={!config() || (config()?.len || 0) <= 0}
+            title="减少LED数量"
+          >
+            -
+          </button>
+
+          <input
+            type="number"
+            class="input input-xs flex-1 text-center min-w-0 text-sm font-medium [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+            value={config()?.len || 0}
+            min="0"
+            max="1000"
+            onBlur={handleInputChange}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleInputChange(e);
+              }
+            }}
+          />
+
+          <button
+            class="btn btn-xs btn-circle btn-outline flex-shrink-0"
+            onClick={handleIncrease}
+            disabled={!config() || (config()?.len || 0) >= 1000}
+            title="增加LED数量"
+          >
+            +
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+type LedCountControlPanelProps = {
+  display: DisplayInfo;
+} & JSX.HTMLAttributes<HTMLElement>;
+
+export const LedCountControlPanel: Component<LedCountControlPanelProps> = (props) => {
+  const [localProps, rootProps] = splitProps(props, ['display']);
+
+  const borders: { border: Borders; label: string }[] = [
+    { border: 'Top', label: '上' },
+    { border: 'Bottom', label: '下' },
+    { border: 'Left', label: '左' },
+    { border: 'Right', label: '右' },
+  ];
+
+  return (
+    <div {...rootProps} class={'card bg-base-200 shadow-lg border border-base-300 ' + (rootProps.class || '')}>
+      <div class="card-body p-4">
+        <div class="card-title text-base mb-3 flex items-center justify-between">
+          <span>LED数量控制</span>
+          <div class="badge badge-info badge-outline">显示器 {localProps.display.id}</div>
+        </div>
+
+        <div class="grid grid-cols-4 gap-2">
+          <For each={borders}>
+            {(item) => (
+              <LedCountControlItem
+                displayId={localProps.display.id}
+                border={item.border}
+                label={item.label}
+              />
+            )}
+          </For>
+        </div>
+
+        <div class="text-xs text-base-content/50 mt-3 p-2 bg-base-300/50 rounded">
+          💡 提示：点击 +/- 按钮或直接输入数值来调整LED数量（范围：0-1000）
+        </div>
+      </div>
+    </div>
+  );
+};