From b9f1d1239cf4cef7336f46cd4daa784361d14e6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Sat, 8 Nov 2025 14:42:59 +0800
Subject: [PATCH] feat: Mentions reduce dom strcuture and support size (#55638)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: init mentions

* feat: Mentions support size

* chore: update demo

* chore: adjust style

* test: update snapshot

---------

Co-authored-by: thinkasany <480968828@qq.com>
Co-authored-by: 遇见同学 <1875694521@qq.com>
---
 .../__snapshots__/demo-extend.test.ts.snap    |  36 +-
 .../__snapshots__/demo.test.tsx.snap          |  36 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  18 +-
 .../__snapshots__/demo.test.tsx.snap          |  18 +-
 components/input/demo/size.tsx                |  10 +-
 components/input/style/index.ts               |  10 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 128 ++++---
 .../__snapshots__/demo.test.tsx.snap          | 128 ++++---
 .../__snapshots__/index.test.tsx.snap         |   2 +-
 components/mentions/demo/_semantic.tsx        |   8 +-
 components/mentions/demo/size.md              |   7 +
 components/mentions/demo/size.tsx             |  12 +
 components/mentions/demo/style-class.md       |   4 +-
 components/mentions/demo/style-class.tsx      |   4 +-
 components/mentions/index.en-US.md            |   3 +-
 components/mentions/index.tsx                 |  20 +-
 components/mentions/index.zh-CN.md            |   3 +-
 components/mentions/style/index.ts            | 353 ++++++++++--------
 mako.config.json                              |   2 +-
 package.json                                  |   2 +-
 20 files changed, 450 insertions(+), 354 deletions(-)
 create mode 100644 components/mentions/demo/size.md
 create mode 100644 components/mentions/demo/size.tsx

diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index f52815d5ea..b43c1cf952 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2021,19 +2021,15 @@ exports[`renders components/form/demo/custom-feedback-icons.tsx extend context c
             class="ant-form-item-control-input-content"
           >
             <span
-              class="ant-mentions-affix-wrapper ant-mentions-affix-wrapper-input-with-clear-btn ant-mentions-outlined ant-mentions-status-success css-var-test-id ant-mentions-css-var"
+              class="ant-mentions-affix-wrapper ant-mentions-affix-wrapper-input-with-clear-btn ant-mentions-outlined ant-mentions-status-success ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
             >
-              <div
-                class="ant-mentions"
+              <textarea
+                class="rc-textarea"
+                id="custom-feedback-icons_custom-feedback-test-item3"
+                rows="1"
               >
-                <textarea
-                  class="rc-textarea"
-                  id="custom-feedback-icons_custom-feedback-test-item3"
-                  rows="1"
-                >
-                  @mention1
-                </textarea>
-              </div>
+                @mention1
+              </textarea>
               <span
                 class="ant-mentions-suffix"
               >
@@ -5987,7 +5983,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <div
-                class="ant-mentions ant-mentions-disabled ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+                class="ant-mentions ant-mentions-disabled ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
               >
                 <textarea
                   class="rc-textarea rc-textarea-disabled"
@@ -32008,16 +32004,12 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
             class="ant-form-item-control-input-content"
           >
             <span
-              class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions-status-error css-var-test-id ant-mentions-css-var"
+              class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions-status-error ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
             >
-              <div
-                class="ant-mentions"
-              >
-                <textarea
-                  class="rc-textarea"
-                  rows="1"
-                />
-              </div>
+              <textarea
+                class="rc-textarea"
+                rows="1"
+              />
               <span
                 class="ant-mentions-suffix"
               >
@@ -32659,7 +32651,7 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-mentions ant-mentions-filled css-var-test-id ant-mentions-css-var"
+              class="ant-mentions ant-mentions-filled ant-mentions css-var-test-id ant-mentions-css-var"
             >
               <textarea
                 aria-required="true"
diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
index 98bcef7944..6d66d9b9e4 100644
--- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -1531,19 +1531,15 @@ exports[`renders components/form/demo/custom-feedback-icons.tsx correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <span
-              class="ant-mentions-affix-wrapper ant-mentions-affix-wrapper-input-with-clear-btn ant-mentions-outlined ant-mentions-status-success css-var-test-id ant-mentions-css-var"
+              class="ant-mentions-affix-wrapper ant-mentions-affix-wrapper-input-with-clear-btn ant-mentions-outlined ant-mentions-status-success ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
             >
-              <div
-                class="ant-mentions"
+              <textarea
+                class="rc-textarea"
+                id="custom-feedback-icons_custom-feedback-test-item3"
+                rows="1"
               >
-                <textarea
-                  class="rc-textarea"
-                  id="custom-feedback-icons_custom-feedback-test-item3"
-                  rows="1"
-                >
-                  @mention1
-                </textarea>
-              </div>
+                @mention1
+              </textarea>
               <span
                 class="ant-mentions-suffix"
               >
@@ -3142,7 +3138,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <div
-                class="ant-mentions ant-mentions-disabled ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+                class="ant-mentions ant-mentions-disabled ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
               >
                 <textarea
                   class="rc-textarea rc-textarea-disabled"
@@ -14270,16 +14266,12 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <span
-              class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions-status-error css-var-test-id ant-mentions-css-var"
+              class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions-status-error ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
             >
-              <div
-                class="ant-mentions"
-              >
-                <textarea
-                  class="rc-textarea"
-                  rows="1"
-                />
-              </div>
+              <textarea
+                class="rc-textarea"
+                rows="1"
+              />
               <span
                 class="ant-mentions-suffix"
               >
@@ -14903,7 +14895,7 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-mentions ant-mentions-filled css-var-test-id ant-mentions-css-var"
+              class="ant-mentions ant-mentions-filled ant-mentions css-var-test-id ant-mentions-css-var"
             >
               <textarea
                 aria-required="true"
diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
index ee15d84ff7..a63ba88854 100644
--- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -665,7 +665,7 @@ exports[`renders components/input/demo/advance-count.tsx extend context correctl
 exports[`renders components/input/demo/align.tsx extend context correctly 1`] = `
 Array [
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
     style="width: 100px;"
   >
     <textarea
@@ -11791,7 +11791,9 @@ exports[`renders components/input/demo/show-count.tsx extend context correctly 1
 exports[`renders components/input/demo/show-count.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/input/demo/size.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
   <span
     class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-outlined css-var-test-id ant-input-css-var"
   >
@@ -11824,9 +11826,7 @@ Array [
       type="text"
       value=""
     />
-  </span>,
-  <br />,
-  <br />,
+  </span>
   <span
     class="ant-input-affix-wrapper ant-input-outlined css-var-test-id ant-input-css-var"
   >
@@ -11859,9 +11859,7 @@ Array [
       type="text"
       value=""
     />
-  </span>,
-  <br />,
-  <br />,
+  </span>
   <span
     class="ant-input-affix-wrapper ant-input-affix-wrapper-sm ant-input-outlined css-var-test-id ant-input-css-var"
   >
@@ -11894,8 +11892,8 @@ Array [
       type="text"
       value=""
     />
-  </span>,
-]
+  </span>
+</div>
 `;
 
 exports[`renders components/input/demo/size.tsx extend context correctly 2`] = `[]`;
diff --git a/components/input/__tests__/__snapshots__/demo.test.tsx.snap b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
index 3d6abf1f9a..d08dda31a6 100644
--- a/components/input/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
@@ -393,7 +393,7 @@ exports[`renders components/input/demo/advance-count.tsx correctly 1`] = `
 exports[`renders components/input/demo/align.tsx correctly 1`] = `
 Array [
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
     style="width:100px"
   >
     <textarea
@@ -5104,7 +5104,9 @@ exports[`renders components/input/demo/show-count.tsx correctly 1`] = `
 `;
 
 exports[`renders components/input/demo/size.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
   <span
     class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-outlined css-var-test-id ant-input-css-var"
   >
@@ -5137,9 +5139,7 @@ Array [
       type="text"
       value=""
     />
-  </span>,
-  <br />,
-  <br />,
+  </span>
   <span
     class="ant-input-affix-wrapper ant-input-outlined css-var-test-id ant-input-css-var"
   >
@@ -5172,9 +5172,7 @@ Array [
       type="text"
       value=""
     />
-  </span>,
-  <br />,
-  <br />,
+  </span>
   <span
     class="ant-input-affix-wrapper ant-input-affix-wrapper-sm ant-input-outlined css-var-test-id ant-input-css-var"
   >
@@ -5207,8 +5205,8 @@ Array [
       type="text"
       value=""
     />
-  </span>,
-]
+  </span>
+</div>
 `;
 
 exports[`renders components/input/demo/status.tsx correctly 1`] = `
diff --git a/components/input/demo/size.tsx b/components/input/demo/size.tsx
index cefd3a0b10..d80e74e053 100644
--- a/components/input/demo/size.tsx
+++ b/components/input/demo/size.tsx
@@ -1,17 +1,13 @@
 import React from 'react';
 import { UserOutlined } from '@ant-design/icons';
-import { Input } from 'antd';
+import { Flex, Input } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Flex vertical gap="middle">
     <Input size="large" placeholder="large size" prefix={<UserOutlined />} />
-    <br />
-    <br />
     <Input placeholder="default size" prefix={<UserOutlined />} />
-    <br />
-    <br />
     <Input size="small" placeholder="small size" prefix={<UserOutlined />} />
-  </>
+  </Flex>
 );
 
 export default App;
diff --git a/components/input/style/index.ts b/components/input/style/index.ts
index 4b7f2712f7..89c6d28771 100644
--- a/components/input/style/index.ts
+++ b/components/input/style/index.ts
@@ -57,7 +57,13 @@ export const genInputSmallStyle = (token: InputToken): CSSObject => ({
   borderRadius: token.borderRadiusSM,
 });
 
-export const genBasicInputStyle = (token: InputToken): CSSObject => ({
+export const genBasicInputStyle = (
+  token: InputToken,
+  option: {
+    largeStyle?: CSSObject;
+    smallStyle?: CSSObject;
+  } = {},
+): CSSObject => ({
   position: 'relative',
   display: 'inline-block',
   width: '100%',
@@ -73,9 +79,11 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
   // Size
   '&-lg': {
     ...genInputLargeStyle(token),
+    ...option.largeStyle,
   },
   '&-sm': {
     ...genInputSmallStyle(token),
+    ...option.smallStyle,
   },
 
   // RTL
diff --git a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
index 46940401a3..0d4249a107 100644
--- a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3,18 +3,14 @@
 exports[`renders components/mentions/demo/allowClear.tsx extend context correctly 1`] = `
 Array [
   <span
-    class="ant-mentions-affix-wrapper ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
   >
-    <div
-      class="ant-mentions"
+    <textarea
+      class="rc-textarea"
+      rows="1"
     >
-      <textarea
-        class="rc-textarea"
-        rows="1"
-      >
-        hello world
-      </textarea>
-    </div>
+      hello world
+    </textarea>
     <span
       class="ant-mentions-suffix"
     >
@@ -49,18 +45,14 @@ Array [
   <br />,
   <br />,
   <span
-    class="ant-mentions-affix-wrapper ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
   >
-    <div
-      class="ant-mentions"
+    <textarea
+      class="rc-textarea"
+      rows="1"
     >
-      <textarea
-        class="rc-textarea"
-        rows="1"
-      >
-        hello world
-      </textarea>
-    </div>
+      hello world
+    </textarea>
     <span
       class="ant-mentions-suffix"
     >
@@ -95,18 +87,14 @@ Array [
   <br />,
   <br />,
   <span
-    class="ant-mentions-affix-wrapper ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
   >
-    <div
-      class="ant-mentions"
+    <textarea
+      class="rc-textarea"
+      rows="3"
     >
-      <textarea
-        class="rc-textarea"
-        rows="3"
-      >
-        hello world
-      </textarea>
-    </div>
+      hello world
+    </textarea>
     <span
       class="ant-mentions-suffix"
     >
@@ -145,7 +133,7 @@ exports[`renders components/mentions/demo/allowClear.tsx extend context correctl
 
 exports[`renders components/mentions/demo/async.tsx extend context correctly 1`] = `
 <div
-  class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+  class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
   style="width: 100%;"
 >
   <textarea
@@ -182,7 +170,7 @@ exports[`renders components/mentions/demo/autosize-textarea-debug.tsx extend con
   style="gap: 32px;"
 >
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
   >
     <textarea
       class="rc-textarea"
@@ -191,7 +179,7 @@ exports[`renders components/mentions/demo/autosize-textarea-debug.tsx extend con
     />
   </div>
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
     style="resize: none;"
   >
     <textarea
@@ -208,7 +196,7 @@ exports[`renders components/mentions/demo/autosize-textarea-debug.tsx extend con
 
 exports[`renders components/mentions/demo/basic.tsx extend context correctly 1`] = `
 <div
-  class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+  class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
   style="width: 100%;"
 >
   <textarea
@@ -227,7 +215,7 @@ exports[`renders components/mentions/demo/component-token.tsx extend context cor
   style="padding-bottom: 0px; position: relative; min-width: 0;"
 >
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
     style="width: 100%; margin: 0px;"
   >
     <textarea
@@ -274,7 +262,7 @@ exports[`renders components/mentions/demo/form.tsx extend context correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+              class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
             >
               <textarea
                 class="rc-textarea"
@@ -314,7 +302,7 @@ exports[`renders components/mentions/demo/form.tsx extend context correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+              class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
             >
               <textarea
                 aria-required="true"
@@ -385,7 +373,7 @@ exports[`renders components/mentions/demo/form.tsx extend context correctly 2`]
 
 exports[`renders components/mentions/demo/placement.tsx extend context correctly 1`] = `
 <div
-  class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+  class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
   style="width: 100%;"
 >
   <textarea
@@ -399,7 +387,7 @@ exports[`renders components/mentions/demo/placement.tsx extend context correctly
 
 exports[`renders components/mentions/demo/prefix.tsx extend context correctly 1`] = `
 <div
-  class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+  class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
   style="width: 100%;"
 >
   <textarea
@@ -418,7 +406,7 @@ Array [
     style="margin-bottom: 10px;"
   >
     <div
-      class="ant-mentions ant-mentions-disabled ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+      class="ant-mentions ant-mentions-disabled ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
       style="width: 100%;"
     >
       <textarea
@@ -430,7 +418,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
     style="width: 100%;"
   >
     <textarea
@@ -450,7 +438,7 @@ exports[`renders components/mentions/demo/render-panel.tsx extend context correc
   style="padding-bottom: 0px; position: relative; min-width: 0;"
 >
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
     style="width: 100%; margin: 0px;"
   >
     <textarea
@@ -466,6 +454,42 @@ exports[`renders components/mentions/demo/render-panel.tsx extend context correc
 
 exports[`renders components/mentions/demo/render-panel.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/mentions/demo/size.tsx extend context correctly 1`] = `
+<div
+  class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
+  <div
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-lg"
+  >
+    <textarea
+      class="rc-textarea"
+      placeholder="large size"
+      rows="1"
+    />
+  </div>
+  <div
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
+  >
+    <textarea
+      class="rc-textarea"
+      placeholder="default size"
+      rows="1"
+    />
+  </div>
+  <div
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-sm"
+  >
+    <textarea
+      class="rc-textarea"
+      placeholder="small size"
+      rows="1"
+    />
+  </div>
+</div>
+`;
+
+exports[`renders components/mentions/demo/size.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/mentions/demo/status.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
@@ -474,7 +498,7 @@ exports[`renders components/mentions/demo/status.tsx extend context correctly 1`
     class="ant-space-item"
   >
     <div
-      class="ant-mentions ant-mentions-outlined ant-mentions-status-error css-var-test-id ant-mentions-css-var"
+      class="ant-mentions ant-mentions-outlined ant-mentions-status-error ant-mentions css-var-test-id ant-mentions-css-var"
     >
       <textarea
         class="rc-textarea"
@@ -488,7 +512,7 @@ exports[`renders components/mentions/demo/status.tsx extend context correctly 1`
     class="ant-space-item"
   >
     <div
-      class="ant-mentions ant-mentions-outlined ant-mentions-status-warning css-var-test-id ant-mentions-css-var"
+      class="ant-mentions ant-mentions-outlined ant-mentions-status-warning ant-mentions css-var-test-id ant-mentions-css-var"
     >
       <textarea
         class="rc-textarea"
@@ -508,17 +532,17 @@ exports[`renders components/mentions/demo/style-class.tsx extend context correct
   class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
 >
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var acss-3jrxlv"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var acss-3jrxlv"
   >
     <textarea
       class="rc-textarea"
       placeholder="Object"
-      rows="1"
-      style="font-size: 14px;"
+      rows="2"
+      style="resize: vertical; font-size: 14px; font-weight: 200;"
     />
   </div>
   <div
-    class="ant-mentions ant-mentions-filled css-var-test-id ant-mentions-css-var acss-3jrxlv"
+    class="ant-mentions ant-mentions-filled ant-mentions css-var-test-id ant-mentions-css-var acss-3jrxlv"
     style="border: 1px solid rgb(114, 46, 209);"
   >
     <textarea
@@ -538,7 +562,7 @@ exports[`renders components/mentions/demo/variant.tsx extend context correctly 1
   style="gap: 12px;"
 >
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
   >
     <textarea
       class="rc-textarea"
@@ -547,7 +571,7 @@ exports[`renders components/mentions/demo/variant.tsx extend context correctly 1
     />
   </div>
   <div
-    class="ant-mentions ant-mentions-filled css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-filled ant-mentions css-var-test-id ant-mentions-css-var"
   >
     <textarea
       class="rc-textarea"
@@ -556,7 +580,7 @@ exports[`renders components/mentions/demo/variant.tsx extend context correctly 1
     />
   </div>
   <div
-    class="ant-mentions ant-mentions-borderless css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-borderless ant-mentions css-var-test-id ant-mentions-css-var"
   >
     <textarea
       class="rc-textarea"
@@ -565,7 +589,7 @@ exports[`renders components/mentions/demo/variant.tsx extend context correctly 1
     />
   </div>
   <div
-    class="ant-mentions ant-mentions-underlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-underlined ant-mentions css-var-test-id ant-mentions-css-var"
   >
     <textarea
       class="rc-textarea"
diff --git a/components/mentions/__tests__/__snapshots__/demo.test.tsx.snap b/components/mentions/__tests__/__snapshots__/demo.test.tsx.snap
index 664c8e8668..f7d2187ada 100644
--- a/components/mentions/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/mentions/__tests__/__snapshots__/demo.test.tsx.snap
@@ -3,18 +3,14 @@
 exports[`renders components/mentions/demo/allowClear.tsx correctly 1`] = `
 Array [
   <span
-    class="ant-mentions-affix-wrapper ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
   >
-    <div
-      class="ant-mentions"
+    <textarea
+      class="rc-textarea"
+      rows="1"
     >
-      <textarea
-        class="rc-textarea"
-        rows="1"
-      >
-        hello world
-      </textarea>
-    </div>
+      hello world
+    </textarea>
     <span
       class="ant-mentions-suffix"
     >
@@ -49,18 +45,14 @@ Array [
   <br />,
   <br />,
   <span
-    class="ant-mentions-affix-wrapper ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
   >
-    <div
-      class="ant-mentions"
+    <textarea
+      class="rc-textarea"
+      rows="1"
     >
-      <textarea
-        class="rc-textarea"
-        rows="1"
-      >
-        hello world
-      </textarea>
-    </div>
+      hello world
+    </textarea>
     <span
       class="ant-mentions-suffix"
     >
@@ -95,18 +87,14 @@ Array [
   <br />,
   <br />,
   <span
-    class="ant-mentions-affix-wrapper ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
   >
-    <div
-      class="ant-mentions"
+    <textarea
+      class="rc-textarea"
+      rows="3"
     >
-      <textarea
-        class="rc-textarea"
-        rows="3"
-      >
-        hello world
-      </textarea>
-    </div>
+      hello world
+    </textarea>
     <span
       class="ant-mentions-suffix"
     >
@@ -143,7 +131,7 @@ Array [
 
 exports[`renders components/mentions/demo/async.tsx correctly 1`] = `
 <div
-  class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+  class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
   style="width:100%"
 >
   <textarea
@@ -155,7 +143,7 @@ exports[`renders components/mentions/demo/async.tsx correctly 1`] = `
 
 exports[`renders components/mentions/demo/autoSize.tsx correctly 1`] = `
 <div
-  class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+  class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
   style="width:100%"
 >
   <textarea
@@ -171,7 +159,7 @@ exports[`renders components/mentions/demo/autosize-textarea-debug.tsx correctly
   style="gap:32px"
 >
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
   >
     <textarea
       class="rc-textarea"
@@ -180,7 +168,7 @@ exports[`renders components/mentions/demo/autosize-textarea-debug.tsx correctly
     />
   </div>
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
     style="resize:none"
   >
     <textarea
@@ -195,7 +183,7 @@ exports[`renders components/mentions/demo/autosize-textarea-debug.tsx correctly
 
 exports[`renders components/mentions/demo/basic.tsx correctly 1`] = `
 <div
-  class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+  class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
   style="width:100%"
 >
   <textarea
@@ -212,7 +200,7 @@ exports[`renders components/mentions/demo/component-token.tsx correctly 1`] = `
   style="padding-bottom:0;position:relative;min-width:0"
 >
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
     style="width:100%;margin:0"
   >
     <textarea
@@ -256,7 +244,7 @@ exports[`renders components/mentions/demo/form.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+              class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
             >
               <textarea
                 class="rc-textarea"
@@ -296,7 +284,7 @@ exports[`renders components/mentions/demo/form.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+              class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
             >
               <textarea
                 aria-required="true"
@@ -365,7 +353,7 @@ exports[`renders components/mentions/demo/form.tsx correctly 1`] = `
 
 exports[`renders components/mentions/demo/placement.tsx correctly 1`] = `
 <div
-  class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+  class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
   style="width:100%"
 >
   <textarea
@@ -377,7 +365,7 @@ exports[`renders components/mentions/demo/placement.tsx correctly 1`] = `
 
 exports[`renders components/mentions/demo/prefix.tsx correctly 1`] = `
 <div
-  class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+  class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
   style="width:100%"
 >
   <textarea
@@ -394,7 +382,7 @@ Array [
     style="margin-bottom:10px"
   >
     <div
-      class="ant-mentions ant-mentions-disabled ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+      class="ant-mentions ant-mentions-disabled ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
       style="width:100%"
     >
       <textarea
@@ -406,7 +394,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
     style="width:100%"
   >
     <textarea
@@ -424,7 +412,7 @@ exports[`renders components/mentions/demo/render-panel.tsx correctly 1`] = `
   style="padding-bottom:0;position:relative;min-width:0"
 >
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
     style="width:100%;margin:0"
   >
     <textarea
@@ -437,6 +425,40 @@ exports[`renders components/mentions/demo/render-panel.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/mentions/demo/size.tsx correctly 1`] = `
+<div
+  class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
+  <div
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-lg"
+  >
+    <textarea
+      class="rc-textarea"
+      placeholder="large size"
+      rows="1"
+    />
+  </div>
+  <div
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
+  >
+    <textarea
+      class="rc-textarea"
+      placeholder="default size"
+      rows="1"
+    />
+  </div>
+  <div
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-sm"
+  >
+    <textarea
+      class="rc-textarea"
+      placeholder="small size"
+      rows="1"
+    />
+  </div>
+</div>
+`;
+
 exports[`renders components/mentions/demo/status.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
@@ -445,7 +467,7 @@ exports[`renders components/mentions/demo/status.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-mentions ant-mentions-outlined ant-mentions-status-error css-var-test-id ant-mentions-css-var"
+      class="ant-mentions ant-mentions-outlined ant-mentions-status-error ant-mentions css-var-test-id ant-mentions-css-var"
     >
       <textarea
         class="rc-textarea"
@@ -459,7 +481,7 @@ exports[`renders components/mentions/demo/status.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-mentions ant-mentions-outlined ant-mentions-status-warning css-var-test-id ant-mentions-css-var"
+      class="ant-mentions ant-mentions-outlined ant-mentions-status-warning ant-mentions css-var-test-id ant-mentions-css-var"
     >
       <textarea
         class="rc-textarea"
@@ -477,17 +499,17 @@ exports[`renders components/mentions/demo/style-class.tsx correctly 1`] = `
   class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
 >
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var acss-3jrxlv"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var acss-3jrxlv"
   >
     <textarea
       class="rc-textarea"
       placeholder="Object"
-      rows="1"
-      style="font-size:14px"
+      rows="2"
+      style="resize:vertical;font-size:14px;font-weight:200"
     />
   </div>
   <div
-    class="ant-mentions ant-mentions-filled css-var-test-id ant-mentions-css-var acss-3jrxlv"
+    class="ant-mentions ant-mentions-filled ant-mentions css-var-test-id ant-mentions-css-var acss-3jrxlv"
     style="border:1px solid #722ed1"
   >
     <textarea
@@ -505,7 +527,7 @@ exports[`renders components/mentions/demo/variant.tsx correctly 1`] = `
   style="gap:12px"
 >
   <div
-    class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
   >
     <textarea
       class="rc-textarea"
@@ -514,7 +536,7 @@ exports[`renders components/mentions/demo/variant.tsx correctly 1`] = `
     />
   </div>
   <div
-    class="ant-mentions ant-mentions-filled css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-filled ant-mentions css-var-test-id ant-mentions-css-var"
   >
     <textarea
       class="rc-textarea"
@@ -523,7 +545,7 @@ exports[`renders components/mentions/demo/variant.tsx correctly 1`] = `
     />
   </div>
   <div
-    class="ant-mentions ant-mentions-borderless css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-borderless ant-mentions css-var-test-id ant-mentions-css-var"
   >
     <textarea
       class="rc-textarea"
@@ -532,7 +554,7 @@ exports[`renders components/mentions/demo/variant.tsx correctly 1`] = `
     />
   </div>
   <div
-    class="ant-mentions ant-mentions-underlined css-var-test-id ant-mentions-css-var"
+    class="ant-mentions ant-mentions-underlined ant-mentions css-var-test-id ant-mentions-css-var"
   >
     <textarea
       class="rc-textarea"
diff --git a/components/mentions/__tests__/__snapshots__/index.test.tsx.snap b/components/mentions/__tests__/__snapshots__/index.test.tsx.snap
index d341f8f7a1..f8c4aa20bc 100644
--- a/components/mentions/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/mentions/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Mentions rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
-  class="ant-mentions ant-mentions-rtl ant-mentions-outlined css-var-root ant-mentions-css-var"
+  class="ant-mentions ant-mentions-rtl ant-mentions-outlined ant-mentions css-var-root ant-mentions-css-var"
 >
   <textarea
     class="rc-textarea"
diff --git a/components/mentions/demo/_semantic.tsx b/components/mentions/demo/_semantic.tsx
index b2f0a08ad4..e4de620b55 100644
--- a/components/mentions/demo/_semantic.tsx
+++ b/components/mentions/demo/_semantic.tsx
@@ -12,12 +12,14 @@ const locales = {
     root: '根元素，设置行内flex布局、相对定位、内边距和边框样式',
     textarea: '文本域元素，设置字体、行高、文本输入和背景样式',
     popup: '弹出框元素，设置绝对定位、层级、背景色、圆角、阴影和下拉选项样式',
+    suffix: '后缀元素，包含后缀内容的布局和样式，如清除按钮等',
   },
   en: {
     root: 'Root element, set inline flex layout, relative positioning, padding and border styles',
     textarea: 'Textarea element, set font, line height, text input and background styles',
     popup:
       'Popup element, set absolute positioning, z-index, background color, border radius, shadow and dropdown options styles',
+    suffix: 'Suffix element with layout and styling for suffix content like clear button, etc.',
   },
 };
 
@@ -25,13 +27,14 @@ const Block: React.FC<MentionProps> = (props) => {
   const divRef = React.useRef<HTMLDivElement>(null);
   const memoizedValue = React.useMemo<UnstableContextProps>(() => ({ open: true }), []);
   return (
-    <div ref={divRef} style={{ position: 'absolute', height: 170, overflow: 'hidden' }}>
+    <div ref={divRef} style={{ position: 'absolute', height: 200, overflow: 'hidden' }}>
       <UnstableContext.Provider value={memoizedValue}>
         <Mentions
           {...props}
           placement="bottom"
           style={{ width: '100%' }}
-          value="@"
+          value="Hi, @"
+          allowClear
           getPopupContainer={() => divRef.current!}
           styles={{
             popup: {
@@ -70,6 +73,7 @@ const App: React.FC = () => {
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'textarea', desc: locale.textarea, version: '6.0.0' },
+        { name: 'suffix', desc: locale.suffix, version: '6.0.0' },
         { name: 'popup', desc: locale.popup, version: '6.0.0' },
       ]}
     >
diff --git a/components/mentions/demo/size.md b/components/mentions/demo/size.md
new file mode 100644
index 0000000000..08d326eec5
--- /dev/null
+++ b/components/mentions/demo/size.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+通过 `size` 属性配置大小。
+
+## en-US
+
+Configure size via `size` property.
diff --git a/components/mentions/demo/size.tsx b/components/mentions/demo/size.tsx
new file mode 100644
index 0000000000..e909d21f04
--- /dev/null
+++ b/components/mentions/demo/size.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Flex, Mentions } from 'antd';
+
+const App: React.FC = () => (
+  <Flex vertical gap="middle">
+    <Mentions size="large" placeholder="large size" />
+    <Mentions placeholder="default size" />
+    <Mentions size="small" placeholder="small size" />
+  </Flex>
+);
+
+export default App;
diff --git a/components/mentions/demo/style-class.md b/components/mentions/demo/style-class.md
index 8a8c5d7914..228cd4acc5 100644
--- a/components/mentions/demo/style-class.md
+++ b/components/mentions/demo/style-class.md
@@ -1,7 +1,7 @@
 ## zh-CN
 
-通过 `classNames` 和 `styles` 传入对象/函数可以自定义 Mentions 的[语义化结构](#semantic-dom)样式。
+通过 `classNames` 和 `styles` 传入对象/函数可以自定义 Mentions 的[语义化结构](#semantic-dom)样式，例如设置文本框可缩放。
 
 ## en-US
 
-You can customize the [semantic dom](#semantic-dom) style of Mentions by passing objects/functions through `classNames` and `styles`.
+You can customize the [semantic dom](#semantic-dom) style of Mentions by passing objects/functions through `classNames` and `styles`. For example, set the textarea to be resizable.
diff --git a/components/mentions/demo/style-class.tsx b/components/mentions/demo/style-class.tsx
index 8a72e0527c..626e098731 100644
--- a/components/mentions/demo/style-class.tsx
+++ b/components/mentions/demo/style-class.tsx
@@ -21,6 +21,8 @@ const options: MentionsProps['options'] = [
 const stylesObject: MentionsProps['styles'] = {
   textarea: {
     fontSize: 14,
+    resize: 'vertical',
+    fontWeight: 200,
   },
 };
 
@@ -47,7 +49,7 @@ const App: React.FC = () => {
 
   return (
     <Flex vertical gap="middle">
-      <Mentions {...sharedProps} styles={stylesObject} placeholder="Object" />
+      <Mentions {...sharedProps} styles={stylesObject} placeholder="Object" rows={2} />
       <Mentions {...sharedProps} styles={stylesFunction} variant="filled" placeholder="Function" />
     </Flex>
   );
diff --git a/components/mentions/index.en-US.md b/components/mentions/index.en-US.md
index cd9694fd6d..8f4b2a1c32 100644
--- a/components/mentions/index.en-US.md
+++ b/components/mentions/index.en-US.md
@@ -38,7 +38,8 @@ return (
 
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/variant.tsx" version="5.13.0">Variants</code>
+<code src="./demo/size.tsx" version="6.0.0">Size</code>
+<code src="./demo/variant.tsx">Variants</code>
 <code src="./demo/async.tsx">Asynchronous loading</code>
 <code src="./demo/form.tsx">With Form</code>
 <code src="./demo/prefix.tsx">Customize Trigger Token</code>
diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx
index ca6fd10d56..0c38a60658 100644
--- a/components/mentions/index.tsx
+++ b/components/mentions/index.tsx
@@ -22,6 +22,8 @@ import { useComponentConfig } from '../config-provider/context';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import DisabledContext from '../config-provider/DisabledContext';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
+import useSize from '../config-provider/hooks/useSize';
+import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
 import useVariant from '../form/hooks/useVariants';
 import Spin from '../spin';
@@ -43,7 +45,7 @@ export interface OptionProps {
   [key: string]: any;
 }
 
-type SemanticName = 'root' | 'textarea' | 'popup';
+type SemanticName = 'root' | 'textarea' | 'popup' | 'suffix';
 
 export type MentionsClassNamesType = SemanticClassNamesType<MentionProps, SemanticName>;
 export type MentionsStylesType = SemanticStylesType<MentionProps, SemanticName>;
@@ -61,6 +63,7 @@ export interface MentionProps extends Omit<RcMentionsProps, 'suffix' | 'classNam
   variant?: Variant;
   classNames?: MentionsClassNamesType;
   styles?: MentionsStylesType;
+  size?: SizeType;
 }
 
 export interface MentionsProps extends MentionProps {}
@@ -95,12 +98,16 @@ const InternalMentions = React.forwardRef<MentionsRef, MentionProps>((props, ref
     variant: customVariant,
     classNames,
     styles,
+    size: customSize,
     ...restProps
   } = props;
   const [focused, setFocused] = React.useState(false);
   const innerRef = React.useRef<MentionsRef>(null);
   const mergedRef = composeRef(ref, innerRef);
 
+  // ===================== Size =====================
+  const mergedSize = useSize((ctx) => customSize ?? ctx);
+
   // =================== Warning =====================
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Mentions');
@@ -209,6 +216,10 @@ const InternalMentions = React.forwardRef<MentionsRef, MentionProps>((props, ref
     cssVarCls,
     rootCls,
     mergedClassNames.root,
+    {
+      [`${prefixCls}-sm`]: mergedSize === 'small',
+      [`${prefixCls}-lg`]: mergedSize === 'large',
+    },
   );
 
   return (
@@ -228,7 +239,11 @@ const InternalMentions = React.forwardRef<MentionsRef, MentionProps>((props, ref
       ref={mergedRef}
       options={mergedOptions}
       suffix={suffixNode}
-      styles={{ textarea: mergedStyles.textarea, popup: mergedStyles.popup }}
+      styles={{
+        textarea: mergedStyles.textarea,
+        popup: mergedStyles.popup,
+        suffix: mergedStyles.suffix,
+      }}
       classNames={{
         textarea: clsx(mergedClassNames.textarea),
         popup: clsx(
@@ -239,6 +254,7 @@ const InternalMentions = React.forwardRef<MentionsRef, MentionProps>((props, ref
           cssVarCls,
           rootCls,
         ),
+        suffix: mergedClassNames.suffix,
         mentions: clsx(
           {
             [`${prefixCls}-disabled`]: mergedDisabled,
diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md
index b28517d9c8..0fa61f3d95 100644
--- a/components/mentions/index.zh-CN.md
+++ b/components/mentions/index.zh-CN.md
@@ -39,7 +39,8 @@ return (
 
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">基本使用</code>
-<code src="./demo/variant.tsx" version="5.13.0">形态变体</code>
+<code src="./demo/size.tsx" version="6.0.0">尺寸</code>
+<code src="./demo/variant.tsx">形态变体</code>
 <code src="./demo/async.tsx">异步加载</code>
 <code src="./demo/form.tsx">配合 Form 使用</code>
 <code src="./demo/prefix.tsx">自定义触发字符</code>
diff --git a/components/mentions/style/index.ts b/components/mentions/style/index.ts
index c4342d26ab..bb4025304f 100644
--- a/components/mentions/style/index.ts
+++ b/components/mentions/style/index.ts
@@ -49,180 +49,26 @@ type MentionsToken = FullToken<'Mentions'> &
     itemPaddingVertical: string | number;
   };
 
-const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
+// ============================= Mentions =============================
+const genDropdownStyle: GenerateStyle<MentionsToken> = (token) => {
   const {
     componentCls,
-    antCls,
-    colorTextDisabled,
-    controlItemBgHover,
-    controlPaddingHorizontal,
-    colorText,
-    motionDurationSlow,
-    lineHeight,
-    controlHeight,
-    paddingInline,
-    paddingBlock,
     fontSize,
-    fontSizeIcon,
-    colorIcon,
-    colorTextQuaternary,
-    colorBgElevated,
     paddingXXS,
-    borderRadius,
+    colorBgElevated,
     borderRadiusLG,
     boxShadowSecondary,
     itemPaddingVertical,
-    calc,
+    controlPaddingHorizontal,
+    colorText,
+    borderRadius,
+    lineHeight,
+    colorTextDisabled,
+    controlItemBgHover,
+    motionDurationSlow,
   } = token;
   return {
     [componentCls]: {
-      ...resetComponent(token),
-      ...genBasicInputStyle(token),
-
-      position: 'relative',
-      display: 'inline-block',
-      height: 'auto',
-      padding: `0 ${unit(token.paddingInline)}`,
-      overflow: 'hidden',
-      lineHeight,
-      whiteSpace: 'pre-wrap',
-      verticalAlign: 'bottom',
-
-      // Variants
-      ...genOutlinedStyle(token),
-      ...genFilledStyle(token),
-      ...genBorderlessStyle(token),
-
-      '&-affix-wrapper': {
-        ...genBasicInputStyle(token),
-        display: 'inline-flex',
-        paddingBlock: 0,
-        paddingInlineStart: 0,
-        paddingInlineEnd: token.paddingInline,
-
-        '&::before': {
-          display: 'inline-block',
-          width: 0,
-          visibility: 'hidden',
-          content: '"\\a0"',
-        },
-
-        [`${componentCls}-suffix`]: {
-          display: 'inline-flex',
-          alignItems: 'center',
-
-          // 当页面中存在 feedback-icon 时，给 clear-icon 添加右边距
-          [`&:has(${antCls}-form-item-feedback-icon) ${componentCls}-clear-icon`]: {
-            marginInlineEnd: token.marginXS,
-          },
-
-          [`${antCls}-form-item-feedback-icon`]: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          },
-        },
-
-        [`${componentCls}-clear-icon`]: {
-          insetInlineEnd: 0,
-          insetBlockStart: calc(fontSize).mul(lineHeight).mul(0.5).add(paddingBlock).equal(),
-          padding: 0,
-          lineHeight: 0,
-          color: colorTextQuaternary,
-          fontSize: fontSizeIcon,
-          verticalAlign: -1,
-          // https://github.com/ant-design/ant-design/pull/18151
-          // https://codesandbox.io/s/wizardly-sun-u10br
-          cursor: 'pointer',
-          transition: `color ${motionDurationSlow}`,
-
-          border: 'none',
-          outline: 'none',
-          backgroundColor: 'transparent',
-
-          '&:hover': {
-            color: colorIcon,
-          },
-
-          '&:active': {
-            color: colorText,
-          },
-
-          '&-hidden': {
-            visibility: 'hidden',
-          },
-        },
-      },
-
-      // 覆盖 affix-wrapper borderRadius！
-      ...genUnderlinedStyle(token),
-
-      '&-disabled': {
-        '> textarea': {
-          ...genDisabledStyle(token),
-        },
-      },
-
-      // ================= Input Area =================
-      [`&, &-affix-wrapper > ${componentCls}`]: {
-        [`> textarea, ${componentCls}-measure`]: {
-          color: colorText,
-          boxSizing: 'border-box',
-          minHeight: token.calc(controlHeight).sub(2).equal(),
-          margin: 0,
-          padding: `${unit(paddingBlock)} ${unit(paddingInline)}`,
-          overflow: 'inherit',
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          fontWeight: 'inherit',
-          fontSize: 'inherit',
-          fontFamily: 'inherit',
-          fontStyle: 'inherit',
-          fontVariant: 'inherit',
-          fontSizeAdjust: 'inherit',
-          fontStretch: 'inherit',
-          lineHeight: 'inherit',
-          direction: 'inherit',
-          letterSpacing: 'inherit',
-          whiteSpace: 'inherit',
-          textAlign: 'inherit',
-          verticalAlign: 'top',
-          wordWrap: 'break-word',
-          wordBreak: 'inherit',
-          tabSize: 'inherit',
-        },
-
-        '> textarea:disabled': {
-          color: colorTextDisabled,
-        },
-
-        '> textarea': {
-          width: '100%',
-          border: 'none',
-          outline: 'none',
-          resize: 'vertical',
-          backgroundColor: 'transparent',
-          ...genPlaceholderStyle(token.colorTextPlaceholder),
-          padding: `${unit(token.paddingBlock)} 0`,
-        },
-
-        [`${componentCls}-measure`]: {
-          position: 'absolute',
-          top: 0,
-          insetInlineEnd: 0,
-          bottom: 0,
-          insetInlineStart: 0,
-          zIndex: -1,
-          color: 'transparent',
-          pointerEvents: 'none',
-
-          '> span': {
-            display: 'inline-block',
-            minHeight: '1em',
-          },
-        },
-      },
-
       // ================== Dropdown ==================
       '&-dropdown': {
         // Ref select dropdown style
@@ -297,6 +143,183 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
   };
 };
 
+const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
+  const { componentCls, calc, colorText, antCls, colorTextDisabled } = token;
+
+  return {
+    [componentCls]: [
+      // =========================== Common ===========================
+      resetComponent(token),
+      genBasicInputStyle(token, {
+        largeStyle: {
+          padding: undefined,
+        },
+        smallStyle: {
+          padding: undefined,
+        },
+      }),
+
+      // ========================== Variants ==========================
+      genOutlinedStyle(token),
+      genFilledStyle(token),
+      genBorderlessStyle(token),
+      genUnderlinedStyle(token),
+
+      // ========================== Mentions ==========================
+      {
+        '--mentions-padding-inline': token.paddingInline,
+        '--mentions-padding-block': token.paddingBlock,
+        '--mentions-control-height': token.controlHeight,
+
+        display: 'flex',
+        padding: 0,
+        whiteSpace: 'pre-wrap',
+
+        // ========================= Textarea =========================
+        '> textarea': [
+          resetComponent(token),
+          genPlaceholderStyle(token.colorTextPlaceholder),
+
+          {
+            background: 'transparent',
+            border: 'none',
+            borderRadius: 'inherit',
+            outline: 'none',
+            flex: 'auto',
+            minWidth: 0,
+            resize: 'none',
+
+            '&:disabled': {
+              color: colorTextDisabled,
+            },
+          },
+        ],
+
+        [`> textarea, ${componentCls}-measure`]: {
+          color: colorText,
+          boxSizing: 'border-box',
+          margin: 0,
+          minHeight: calc('var(--mentions-control-height)')
+            .sub(calc(token.lineWidth).mul(2).equal())
+            .equal(),
+          paddingInline: 'var(--mentions-padding-inline)',
+          paddingBlock: 'var(--mentions-padding-block)',
+          overflow: 'inherit',
+          overflowX: 'hidden',
+          overflowY: 'auto',
+          fontWeight: 'inherit',
+          fontSize: 'inherit',
+          fontFamily: 'inherit',
+          fontStyle: 'inherit',
+          fontVariant: 'inherit',
+          fontSizeAdjust: 'inherit',
+          fontStretch: 'inherit',
+          lineHeight: 'inherit',
+          direction: 'inherit',
+          letterSpacing: 'inherit',
+          whiteSpace: 'inherit',
+          textAlign: 'inherit',
+          verticalAlign: 'top',
+          wordWrap: 'break-word',
+          wordBreak: 'inherit',
+          tabSize: 'inherit',
+        },
+
+        // ========================= Measure ==========================
+        [`${componentCls}-measure`]: {
+          position: 'absolute',
+          inset: 0,
+          zIndex: -1,
+          color: 'transparent',
+          pointerEvents: 'none',
+
+          '> span': {
+            display: 'inline-block',
+            minHeight: '1em',
+          },
+        },
+
+        // ========================== Suffix ==========================
+        '&-suffix': {
+          display: 'inline-flex',
+          alignItems: 'center',
+          flex: 'none',
+          color: token.colorTextQuaternary,
+          fontSize: token.fontSizeIcon,
+          lineHeight: 1,
+          position: 'absolute',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          insetInlineEnd: 'var(--mentions-padding-inline)',
+          columnGap: token.marginXS,
+
+          [`${componentCls}-clear-icon`]: {
+            // https://github.com/ant-design/ant-design/pull/18151
+            // https://codesandbox.io/s/wizardly-sun-u10br
+            cursor: 'pointer',
+            border: 0,
+            background: 'transparent',
+
+            '&:hover': {
+              color: token.colorIcon,
+            },
+
+            '&:active': {
+              color: token.colorText,
+            },
+
+            '&-hidden': {
+              visibility: 'hidden',
+            },
+          },
+
+          [`${antCls}-form-item-feedback-icon`]: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          },
+        },
+      },
+
+      // ========================= AllowClear =========================
+      {
+        [`&-has-suffix`]: {
+          '> textarea': {
+            paddingInlineEnd: calc(token.paddingXXS)
+              .mul(1.5)
+              .add(token.fontSizeIcon)
+              .add('var(--mentions-padding-inline)')
+              .equal(),
+          },
+        },
+      },
+
+      // ========================== Disabled ==========================
+      {
+        '&-disabled': {
+          '> textarea': {
+            ...genDisabledStyle(token),
+          },
+        },
+      },
+      // ============================ Size ============================
+      {
+        [`&-lg`]: {
+          '--mentions-padding-inline': token.paddingInlineLG,
+          '--mentions-padding-block': token.paddingBlockLG,
+          '--mentions-control-height': token.controlHeightLG,
+        },
+        [`&-sm`]: {
+          '--mentions-padding-inline': token.paddingInlineSM,
+          '--mentions-padding-block': token.paddingBlockSM,
+          '--mentions-control-height': token.controlHeightSM,
+        },
+      },
+    ],
+  };
+};
+
+// ============================== Tokens ==============================
 export const prepareComponentToken: GetDefaultToken<'Mentions'> = (token) => ({
   ...initComponentToken(token),
   dropdownHeight: 250,
@@ -310,7 +333,7 @@ export default genStyleHooks(
   'Mentions',
   (token) => {
     const mentionsToken = mergeToken<MentionsToken>(token, initInputToken(token));
-    return genMentionsStyle(mentionsToken);
+    return [genMentionsStyle(mentionsToken), genDropdownStyle(mentionsToken)];
   },
   prepareComponentToken,
 );
diff --git a/mako.config.json b/mako.config.json
index 90f4f0bd63..7bae2ce7b2 100644
--- a/mako.config.json
+++ b/mako.config.json
@@ -7,7 +7,7 @@
     "strategy": "auto"
   },
   "watch": {
-    "_nodeModulesRegexes": ["rc-.*", ".*cssinjs.*"]
+    "_nodeModulesRegexes": ["rc-.*", ".*cssinjs.*", "@rc-component/.*"]
   },
   "devtool": false,
   "experimental": {
diff --git a/package.json b/package.json
index 864a17cfd8..f6bd322e00 100644
--- a/package.json
+++ b/package.json
@@ -126,7 +126,7 @@
     "@rc-component/image": "~1.5.1",
     "@rc-component/input": "~1.1.0",
     "@rc-component/input-number": "~1.5.0",
-    "@rc-component/mentions": "~1.4.0",
+    "@rc-component/mentions": "~1.5.5",
     "@rc-component/menu": "~1.1.4",
     "@rc-component/motion": "~1.1.4",
     "@rc-component/mutate-observer": "^2.0.0",