u

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

@@ -1,6 +1,7 @@
 import { createApp, reactive, ref } from 'vue'
 import { Plus, Search, Settings } from '@lucide/vue'
 import {
+  G3Attachment,
   G3Button,
   G3ButtonGroup,
   G3ButtonGroupSeparator,
@@ -23,10 +24,12 @@ import {
   G3Radio,
   G3RadioGroup,
   G3RangePicker,
+  G3RichText,
   G3Row,
   G3Scrollbar,
   G3Segmented,
   G3Select,
+  G3SliderCaptcha,
   G3Space,
   G3Spin,
   G3Splitter,
@@ -39,6 +42,7 @@ import {
   G3Tooltip,
   G3Tree,
 } from '@g3soft/ui'
+import type { AttachmentCategory, AttachmentItem } from '@g3soft/ui'
 import '@g3soft/tokens'
 
 /**
@@ -70,6 +74,7 @@ const LONG_TEXT = Array.from({ length: 40 }, (_, index) => `第 ${index + 1} 行
 
 const App = {
   components: {
+    G3Attachment,
     G3Button,
     G3ButtonGroup,
     G3ButtonGroupSeparator,
@@ -90,10 +95,12 @@ const App = {
     G3Radio,
     G3RadioGroup,
     G3RangePicker,
+    G3RichText,
     G3Row,
     G3Scrollbar,
     G3Segmented,
     G3Select,
+    G3SliderCaptcha,
     G3Space,
     G3Spin,
     G3Splitter,
@@ -135,6 +142,11 @@ const App = {
     const popoverBOpen = ref(true)
     // 颜色选择器：给 RTL 用例验「取色区/色相条不镜像」用
     const color = ref('#165dff')
+    // 滑块验证码：给 E2E 验真实指针拖拽、键盘与 RTL 起步边
+    const captchaPassed = ref(false)
+    const captchaDisabled = ref(false)
+    // 富文本编辑器：给样式核对用
+    const richHtml = ref('<h2>标题</h2><p>这是<b>加粗</b>、<i>斜体</i>、<sup>上标</sup>、<sub>下标</sub>的正文。</p><ul><li>列表项一</li><li>列表项二</li></ul>')
 
     // RTL 开关：直接翻 <html dir>。CSS 侧靠 [dir='rtl'] 选择器，JS 侧靠 useDirection
     // 观察 documentElement，两边都跟得上。也支持 ?dir=rtl 直接以 RTL 进入，
@@ -181,7 +193,24 @@ const App = {
       })
     }
 
+    /* ---- Attachment 附件管理器 ---- */
+    const attachmentFiles = ref<AttachmentItem[]>([
+      { id: 1, name: '2026年度框架合同.pdf', size: 512_000, categoryId: 'contract' },
+      { id: 2, name: '供应商报价明细.xlsx', size: 86_000, categoryId: 'invoice' },
+      { id: 3, name: '现场照片.jpg', size: 1_240_000, categoryId: 'photo' },
+      { id: 4, name: '验收纪要.docx', size: 24_000, categoryId: 'contract' },
+      { id: 5, name: '进度汇报.pptx', size: 640_000, categoryId: 'photo' },
+      { id: 6, name: '现场记录.zip', size: 8_192_000, categoryId: 'invoice' },
+    ])
+    const attachmentCategories: AttachmentCategory[] = [
+      { id: 'contract', name: '合同文件' },
+      { id: 'invoice', name: '发票凭证' },
+      { id: 'photo', name: '现场照片' },
+    ]
+
     return {
+      attachmentFiles,
+      attachmentCategories,
       rtl,
       toggleRtl,
       model,
@@ -196,6 +225,9 @@ const App = {
       popoverAOpen,
       popoverBOpen,
       color,
+      captchaPassed,
+      captchaDisabled,
+      richHtml,
       flatTreeData,
       treeMenuItems,
       roleOptions: ROLE_OPTIONS,
@@ -348,6 +380,21 @@ const App = {
       </G3FormGroup>
     </section>
 
+    <section id="s-captcha">
+      <h2>SliderCaptcha 滑块验证码</h2>
+      <div class="row" style="align-items: flex-start">
+        <div style="width: 320px">
+          <G3SliderCaptcha v-model="captchaPassed" data-testid="slider-captcha" />
+          <div data-testid="slider-captcha-state" style="margin-top: 8px; font-size: 12px">
+            {{ captchaPassed ? 'passed' : 'idle' }}
+          </div>
+        </div>
+        <div style="width: 320px">
+          <G3SliderCaptcha v-model="captchaDisabled" disabled data-testid="slider-captcha-disabled" />
+        </div>
+      </div>
+    </section>
+
     <section id="s-data">
       <h2>Tabs / Tree / Pagination / Splitter / Scrollbar / TimeSelect</h2>
       <div class="row" style="align-items: flex-start">
@@ -426,6 +473,32 @@ const App = {
       </div>
     </section>
 
+    <section id="s-richtext">
+      <h2>RichText 富文本编辑器</h2>
+      <G3RichText v-model="richHtml" data-testid="rich-text" placeholder="请输入正文…" />
+    </section>
+
+    <section id="s-attachment">
+      <h2>Attachment 附件管理器</h2>
+      <!-- 根节点是单元素 div，data-testid 直接落在组件上即可 -->
+      <G3Attachment
+        data-testid="attachment"
+        :files="attachmentFiles"
+        :categories="attachmentCategories"
+        :height="420"
+      />
+      <!-- 窄实例：分类栏 200 + 分割条 10 之后列表只剩 ~210px，
+           压到一行的极限（工具栏必须裁切 / 省略，而不是长高）-->
+      <div style="width: 420px; margin-top: 12px">
+        <G3Attachment
+          data-testid="attachment-narrow"
+          :files="attachmentFiles"
+          :categories="attachmentCategories"
+          :height="360"
+        />
+      </div>
+    </section>
+
     <section id="s-feedback">
       <h2>Modal / Drawer / Message / Notification</h2>
       <div class="row">