u

code/g3soft-libs/packages/ui/playground/main.ts

@@ -6,6 +6,7 @@ import {
   G3ButtonGroupSeparator,
   G3Checkbox,
   G3Col,
+  G3ColorPicker,
   G3DatePicker,
   G3Drawer,
   G3Dropdown,
@@ -74,6 +75,7 @@ const App = {
     G3ButtonGroupSeparator,
     G3Checkbox,
     G3Col,
+    G3ColorPicker,
     G3DatePicker,
     G3Drawer,
     G3Dropdown,
@@ -131,6 +133,8 @@ const App = {
     // 挂载即展开的浮层：验证「初始 open」也能拿到 z-index
     const popoverAOpen = ref(true)
     const popoverBOpen = ref(true)
+    // 颜色选择器：给 RTL 用例验「取色区/色相条不镜像」用
+    const color = ref('#165dff')
 
     // RTL 开关：直接翻 <html dir>。CSS 侧靠 [dir='rtl'] 选择器，JS 侧靠 useDirection
     // 观察 documentElement，两边都跟得上。也支持 ?dir=rtl 直接以 RTL 进入，
@@ -191,6 +195,7 @@ const App = {
       openDrawer,
       popoverAOpen,
       popoverBOpen,
+      color,
       flatTreeData,
       treeMenuItems,
       roleOptions: ROLE_OPTIONS,
@@ -287,6 +292,19 @@ const App = {
       </div>
     </section>
 
+    <section id="s-color-picker">
+      <h2>ColorPicker</h2>
+      <div class="row">
+        <!-- 注意：不给 G3ColorPicker 挂 data-testid —— 它的根是 G3Popover（多根：
+             触发器 + Teleport），多根组件不做 attr 透传，testid 会被 Vue 丢弃。
+             E2E 用 .g3-color-picker 类名定位。 -->
+        <G3ColorPicker v-model="color" />
+        <G3ColorPicker v-model="color" :presets="false" />
+        <G3ColorPicker v-model="color" size="small" />
+        <G3ColorPicker v-model="color" disabled />
+      </div>
+    </section>
+
     <section id="s-form">
       <h2>Form / Select / Date / Switch / Radio / Checkbox</h2>
       <G3Form :model="model" :label-width="90" data-testid="form">