From d5b71326058848fb8c6cbebbd7322cc6081aed76 Mon Sep 17 00:00:00 2001
From: CNWei <t6g888@163.com>
Date: Sun, 1 Nov 2026 19:55:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20Select=20=E7=9A=84=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E7=AE=AD=E5=A4=B4=E6=94=B9=E6=88=90=E4=B8=8E=20Menu?=
 =?UTF-8?q?=20=E4=B8=80=E8=87=B4=E7=9A=84=20CSS=20=E6=8A=98=E8=A7=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

收起朝下、展开朝上，6px 折角 + 透明度过渡，替代原来的 arrow_down_line 图标。
影响面：所有 Select 的外观；交互与 API 不变。
---
 docs/COMPONENTS.md               |  1 +
 src/components/Select.module.css | 21 +++++++++++++++++----
 src/components/Select.tsx        |  2 +-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/docs/COMPONENTS.md b/docs/COMPONENTS.md
index e1b981b..f571060 100644
--- a/docs/COMPONENTS.md
+++ b/docs/COMPONENTS.md
@@ -770,3 +770,4 @@
 | 2026-10-31 | `Layout` 新增 `toolbar` 插槽：页头与页身之间的一条真实占位带（搜索 / 筛选 / 操作），宽度跟随容器（`contained` 时与侧栏 + 内容同宽），在 `height="screen"` 下不参与内部滚动。用它替代「搜索框 fixed + `contentOffset` 让位」的写法，页面不再需要用 JS 改 DOM 尺寸。兼容性：纯新增可选 prop，`contentOffset` 行为不变 |
 | 2026-11-01 | 新增三个「站点外壳」组件，把应用里各自手写的一套收进库：`Brand`（logo / 首字标记 + 名称，`href` 可选）、`Ticker`（无限滚动信息条，按实测宽度位移，循环不跳帧）、`SearchField`（语义版搜索框，`variant` 切普通 / 悬浮条）。同时新增展示级令牌 `--su-font-size-2xl` / `--su-line-height-2xl`（32 / 40）。兼容性：纯新增，无破坏 |
 | 2026-11-01 | 新增 `EntryRow` / `EntryTile`：把应用里两套手写内容卡（`.app-card` / `.ces-card`）收进库。两者共用同一套点击语义（无修饰键接管、按住修饰键保留默认）与悬停反馈；`EntryTile` 由 `Card padding="none" hoverable` + `Cover` 拼成。兼容性：纯新增 |
+| 2026-11-01 | `Select` 的下拉箭头从 `arrow_down_line` 换成和 `Menu` 一致的 CSS 折角（6px、收起朝下 / 展开朝上）。影响面：所有 `Select` 的外观，交互不变 |
diff --git a/src/components/Select.module.css b/src/components/Select.module.css
index 75ab1bc..cd14e08 100644
--- a/src/components/Select.module.css
+++ b/src/components/Select.module.css
@@ -51,15 +51,28 @@
   white-space: nowrap;
 }
 
+/* 折角箭头：与 Menu 的 caret 同一套画法，收起朝下、展开朝上 */
 .caret {
   flex-shrink: 0;
-  font-size: var(--su-font-size-sm);
-  color: var(--su-text-muted);
-  transition: transform var(--su-duration-base) var(--su-ease-in-out);
+  width: 6px;
+  height: 6px;
+  margin-right: 2px;
+  border-left: 1px solid currentColor;
+  border-bottom: 1px solid currentColor;
+  opacity: 0.4;
+  transform: rotate(315deg);
+  transition:
+    transform var(--su-duration-base) var(--su-ease-in-out),
+    opacity var(--su-duration-base) var(--su-ease-in-out);
+}
+
+.trigger:hover .caret {
+  opacity: 0.7;
 }
 
 .triggerOpen .caret {
-  transform: rotate(180deg);
+  opacity: 0.7;
+  transform: rotate(135deg);
 }
 
 .list {
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 0c7c214..a845584 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -105,7 +105,7 @@ export function Select({
         <span className={selected === undefined ? styles.placeholder : styles.value}>
           {selected?.label ?? placeholder}
         </span>
-        <Icon name="arrow_down_line" className={styles.caret} />
+        <span className={styles.caret} aria-hidden="true" />
       </button>
 
       {open && (