refactor: Semantic structure re-layout

assets/index.less

@@ -1,4 +1,5 @@
 @select-prefix: ~'rc-select';
+@import url('./patch.less');
 
 * {
   box-sizing: border-box;

assets/patch.less

@@ -0,0 +1,83 @@
+// This is used for semantic refactoring
+@import (reference) url('./index.less');
+
+.@{select-prefix}.@{select-prefix} {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  border: 1px solid blue;
+  position: relative;
+
+  // Content 部分自动占据剩余宽度
+  .@{select-prefix}-content {
+    flex: auto;
+    display: flex;
+    align-items: center;
+    /* Prevent content from wrapping */
+    min-width: 0; /* allow flex item to shrink */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+  }
+
+  .@{select-prefix}-input {
+    border: none;
+    background: transparent;
+  }
+
+  .@{select-prefix}-placeholder {
+    opacity: 0.5;
+
+    &::after {
+      content: '\00a0'; // nbsp placeholder
+      width: 0;
+      overflow: hidden;
+    }
+  }
+
+  .@{select-prefix}-content,
+  .@{select-prefix}-input,
+  .@{select-prefix}-placeholder {
+    padding: 0;
+    margin: 0;
+    line-height: 1.5;
+    font-size: 14px;
+    font-weight: normal;
+  }
+
+  // 其他部分禁止自动宽度，使用内容宽度
+  .@{select-prefix}-prefix,
+  .@{select-prefix}-suffix,
+  .@{select-prefix}-clear {
+    flex: none;
+  }
+
+  .@{select-prefix}-clear {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  // ============================= Single =============================
+  &-single {
+    .@{select-prefix}-input {
+      position: absolute;
+      inset: 0;
+    }
+  }
+
+  // ============================ Multiple ============================
+  &-multiple {
+    .@{select-prefix}-selection-item {
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      margin-right: 4px;
+    }
+
+    .@{select-prefix}-input {
+      width: calc(var(--select-input-width, 10) * 1px);
+      min-width: 4px;
+    }
+  }
+}

docs/examples/multiple-with-maxCount.tsx

@@ -14,6 +14,7 @@ const Test: React.FC = () => {
     <>
       <h2>Multiple with maxCount</h2>
       <Select
+        showSearch
         maxCount={4}
         mode="multiple"
         value={value}

docs/examples/multiple.tsx

@@ -99,7 +99,7 @@ class Test extends React.Component {
             style={{ width: 500 }}
             mode="multiple"
             loading={loading}
-            suffixIcon={suffixIcon}
+            suffix={suffixIcon}
             allowClear
             optionFilterProp="children"
             optionLabelProp="children"

examples/InputExample.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import Input from '../src/SelectInput/Input';
+
+const InputExample = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <div>
+      <h2>Input Component Examples</h2>
+
+      <div>
+        <h3>Basic Input</h3>
+        <Input prefixCls="rc-select" placeholder="Type something..." />
+      </div>
+
+      <div>
+        <h3>Controlled Input</h3>
+        <Input 
+          prefixCls="rc-select" 
+          value={value} 
+          onChange={(e) => setValue(e.target.value)}
+          placeholder="Controlled input..."
+        />
+        <p>Current value: {value}</p>
+      </div>
+
+      <div>
+        <h3>Disabled Input</h3>
+        <Input 
+          prefixCls="rc-select" 
+          disabled 
+          placeholder="Disabled input..."
+        />
+      </div>
+
+      <div>
+        <h3>Input with Custom Style</h3>
+        <Input 
+          prefixCls="rc-select" 
+          className="custom-input"
+          style={{ border: '2px solid #1890ff', borderRadius: '4px' }}
+          placeholder="Styled input..."
+        />
+      </div>
+    </div>
+  );
+};
+
+export default InputExample;

examples/SelectContentExample.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import SelectContent from '../src/SelectInput/Content';
+import type { DisplayValueType } from '../src/interface';
+
+const SelectContentExample = () => {
+  const singleValue: DisplayValueType[] = [{ value: 'option1', label: 'Option 1' }];
+
+  const multipleValues: DisplayValueType[] = [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+  ];
+
+  const emptyValues: DisplayValueType[] = [];
+
+  return (
+    <div>
+      <h2>SelectContent Value Logic Examples</h2>
+
+      <div>
+        <h3>Single Mode with Value</h3>
+        <SelectContent prefixCls="rc-select" multiple={false} value={singleValue} />
+      </div>
+
+      <div>
+        <h3>Multiple Mode with Values</h3>
+        <SelectContent prefixCls="rc-select" multiple={true} value={multipleValues} />
+      </div>
+
+      <div>
+        <h3>Single Mode with Empty Values</h3>
+        <SelectContent prefixCls="rc-select" multiple={false} value={emptyValues} />
+      </div>
+
+      <div>
+        <h3>Multiple Mode with Empty Values</h3>
+        <SelectContent prefixCls="rc-select" multiple={true} value={emptyValues} />
+      </div>
+    </div>
+  );
+};
+
+export default SelectContentExample;

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
+};