u

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

@@ -132,6 +132,19 @@ const App = {
     const popoverAOpen = ref(true)
     const popoverBOpen = ref(true)
 
+    // RTL 开关：直接翻 <html dir>。CSS 侧靠 [dir='rtl'] 选择器，JS 侧靠 useDirection
+    // 观察 documentElement，两边都跟得上。也支持 ?dir=rtl 直接以 RTL 进入，
+    // 便于 E2E 与人工核对（不依赖点击顺序）。
+    const rtl = ref(new URLSearchParams(location.search).get('dir') === 'rtl')
+    function applyRtl() {
+      document.documentElement.setAttribute('dir', rtl.value ? 'rtl' : 'ltr')
+    }
+    function toggleRtl() {
+      rtl.value = !rtl.value
+      applyRtl()
+    }
+    applyRtl()
+
     // 扁平树：两个节点都不是父节点，用来验「叶子不该留展开箭头占位」
     const flatTreeData = [
       { key: 'flat-1', title: '节点一（无子节点）' },
@@ -165,6 +178,8 @@ const App = {
     }
 
     return {
+      rtl,
+      toggleRtl,
       model,
       tab,
       seg,
@@ -188,6 +203,12 @@ const App = {
   },
   template: `
   <div class="page">
+    <div class="row" style="padding: 8px 0">
+      <G3Button size="small" data-testid="toggle-rtl" @click="toggleRtl">
+        dir: {{ rtl ? 'rtl' : 'ltr' }}
+      </G3Button>
+    </div>
+
     <section id="s-basic">
       <h2>基础：Button / Tag / Spin / Segmented / Space</h2>
       <div class="row">
@@ -244,7 +265,7 @@ const App = {
         <G3Input v-model="model.name" data-testid="input-basic" placeholder="默认" style="width: 180px" />
         <G3Input v-model="model.name" type="password" data-testid="input-password" style="width: 180px" />
         <G3Input v-model="model.level" type="number" data-testid="input-number" style="width: 120px" />
-        <G3Input v-model="model.name" allow-clear data-testid="input-clear" style="width: 180px" />
+        <G3Input v-model="model.name" clearable data-testid="input-clear" style="width: 180px" />
         <G3Input v-model="model.name" show-count :maxlength="20" style="width: 180px" />
         <G3Input v-model="model.name" status="error" style="width: 160px" />
         <G3Input v-model="model.name" disabled style="width: 160px" />