Refactor Liquid component to functional API pattern for v1.0

[Copilot]

Refactor Liquid Component to Functional API Pattern

This PR refactors the Liquid component following the gpt-vis-ai-refactor skill workflow, targeting the ai branch.

Progress Checklist

• Step 1: Create Liquid component code in src/ai/vis/liquid/index.ts

  • Implement functional factory pattern with render/destroy methods
  • Match configuration from knowledges/水波图 - Liquid Chart.md
  • Define TypeScript types (LiquidOptions, LiquidConfig, LiquidInstance)
  • Use shared theme utilities from src/ai/util/theme.ts
  • Support all shapes: circle, rect, pin, triangle
  • Support themes: default, academy, dark
  • Dynamic font size calculation based on chart dimensions
  • Remove animate: false configuration (browser rendering supports animations)

• Step 2: Create component README at src/ai/vis/liquid/README.md

  • Document usage examples with TypeScript code
  • Document all configuration options with types and defaults
  • Document style options (backgroundColor, palette)
  • Include multiple examples (basic, shapes, themes, custom styles)
  • Document methods (render, destroy)
  • Add use cases and notes

• Step 3: Add playground demos (8 comprehensive examples)

  • Update src/ai/playground/main.ts with Liquid import
  • Example 1: Basic Liquid Chart (75% completion)
  • Example 2: With Title (task completion)
  • Example 3: Rectangle Shape (resource usage)
  • Example 4: Pin Shape / Water Drop (storage)
  • Example 5: Triangle Shape (KPI achievement)
  • Example 6: Academy Theme (project progress)
  • Example 7: Dark Theme
  • Example 8: Custom Styles (custom colors & background)
  • Update src/ai/playground/index.html with 8 container elements

• Step 4: Update exports in src/ai/index.ts

  • Export Liquid component
  • Export all types (LiquidConfig, LiquidOptions)

• Step 5: Update skill documentation

  • Add guidance to avoid animate: false in Don'ts section
  • Add requirement to take playground screenshots in Step 3

• Step 6: Take playground screenshots for review

Original prompt

按照 gpt-vis-ai-refactor skill 的流程，重构一下 liquid 组件。目标分支为 ai

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

⚠️ No Changeset found

Latest commit: c57f185

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

🎊 PR Preview c57f185 has been successfully built and deployed to https://antvis-GPT-Vis-preview-playground-pr-285.surge.sh

🕐 Build time: 0.009s

_{🤖 By surge-preview}

[hustcc]

@copilot 修改几个点：

1. animate 配置去掉，这个不要抄 gpt-vis-ssr，因为 ssr 是图片，不需要动画
2. 上述更新到 skill 描述中合适的位置
3. 代码生成完成之后，截图 playground 方便又 review，并把这一个就成更新但 skill 描述中合适位置

[Copilot]

@copilot 修改几个点：

1. animate 配置去掉，这个不要抄 gpt-vis-ssr，因为 ssr 是图片，不需要动画...

完成了以下修改 (commit c57f185):

1. ✅ 已移除 animate: false 配置 - 浏览器渲染默认支持动画
2. ✅ 已更新 skill 描述:
   • 在 Don'ts 部分添加了不要使用 animate: false 的说明
   • 在 Step 3 要求部分添加了完成后需要截图 playground 的说明
3. ✅ Playground 布局已完成，包含 8 个 Liquid 示例

Playground 截图:

注: 截图显示了完整的 Liquid Chart 部分布局，包括所有 8 个示例配置（基础、标题、矩形、水滴、三角形、academy 主题、dark 主题、自定义样式）。