flipper-plugin-sea-mammals 1.0.1

package/BUILDING_CUSTOM_UI_GUIDE.md

@@ -0,0 +1,164 @@
+# Flipper 插件自定义 UI 构建指南
+
+## 概述
+
+本指南详细说明了如何将 Flipper 插件从简单的表格 UI 转换为自定义卡片式 UI，包括选择功能和侧边栏详情展示。
+
+## 项目结构
+
+```
+flipper-plugin-sea-mammals/
+├── src/
+│   ├── index.tsx          # 主插件文件
+│   ├── components/        # UI组件
+│   └── __tests__/        # 测试文件
+├── BUILDING_CUSTOM_UI_GUIDE.md  # 本指南
+└── package.json
+```
+
+## 步骤详解
+
+### 步骤 1：理解插件架构
+
+**目标**：理解 Flipper 插件的核心概念
+
+**关键概念**：
+
+- `plugin` 函数：插件逻辑的核心，处理数据流和状态管理
+- `Component` 函数：UI 渲染的入口点
+- `PluginClient`：与客户端应用通信的接口
+- `createState`：创建可持久化的状态容器
+
+**实现位置**：`src/index.tsx`
+
+### 步骤 2：定义数据类型
+
+**目标**：定义清晰的数据结构
+
+**数据类型**：
+
+```typescript
+type Row = {
+  id: number;
+  title: string;
+  url: string;
+};
+
+type Events = {
+  newRow: Row;
+};
+```
+
+**实现位置**：`src/index.tsx` 顶部
+
+### 步骤 3：实现插件逻辑
+
+**目标**：创建插件核心逻辑，包括状态管理和事件处理
+
+**功能**：
+
+- 状态管理：使用 `createState` 管理行数据和选择状态
+- 事件处理：监听客户端发送的 `newRow` 事件
+- 选择功能：提供 `setSelection` 方法更新选择状态
+
+**实现位置**：`src/index.tsx` 中的 `plugin` 函数
+
+### 步骤 4：创建 UI 组件
+
+**目标**：构建自定义的卡片式 UI
+
+**组件结构**：
+
+- `MammalCard`：单个动物卡片组件
+- `Component`：主 UI 组件，包含卡片网格和侧边栏
+- `renderSidebar`：侧边栏详情渲染函数
+
+**实现位置**：
+
+- 主 UI：`src/index.tsx` 中的 `Component` 函数
+- 卡片组件：`src/components/MammalCard.tsx`
+
+### 步骤 5：实现选择功能
+
+**目标**：添加卡片选择和侧边栏详情展示
+
+**功能**：
+
+- 卡片点击选择
+- 选中状态视觉反馈
+- 侧边栏显示选中卡片详情
+
+**实现位置**：`src/index.tsx` 中的 `Component` 函数
+
+### 步骤 6：编写单元测试
+
+**目标**：确保插件逻辑和 UI 的正确性
+
+**测试内容**：
+
+- 数据存储测试：验证行数据正确存储
+- UI 交互测试：验证选择和渲染功能
+- 状态持久化测试：验证状态正确导出
+
+**实现位置**：`src/__tests__/seamammals.spec.tsx`
+
+## 技术要点
+
+### 状态管理
+
+- 使用 `createState` 创建可订阅的状态
+- 使用 `persist` 选项实现状态持久化
+- 使用 `useValue` hook 订阅状态变化
+
+### 事件处理
+
+- 使用 `client.onMessage` 监听客户端事件
+- 使用 `client.send` 发送消息到客户端
+- 事件类型通过 `Events` 泛型参数定义
+
+### UI 组件
+
+- 使用 Ant Design 组件库
+- 使用 Flipper 的 Layout 组件
+- 使用 `DataInspector` 展示数据结构
+
+### 测试策略
+
+- 使用 `TestUtils.startPlugin` 测试插件逻辑
+- 使用 `TestUtils.renderPlugin` 测试 UI 组件
+- 使用 `sendEvent` 模拟客户端事件
+- 使用 `exportState` 验证状态持久化
+
+## 文件修改清单
+
+1. **src/index.tsx**
+
+   - 添加选择状态管理
+   - 实现自定义 UI 组件
+   - 添加侧边栏功能
+
+2. **src/components/MammalCard.tsx** (新建)
+
+   - 创建卡片组件
+   - 实现选择交互
+
+3. **src/**tests**/seamammals.spec.tsx** (新建)
+   - 添加完整的测试用例
+   - 测试数据存储和 UI 交互
+
+## 预期结果
+
+完成后的插件将具备以下功能：
+
+- 卡片式布局展示海洋哺乳动物
+- 点击卡片显示侧边栏详情
+- 数据持久化存储
+- 完整的单元测试覆盖
+- 响应式布局设计
+
+## 下一步
+
+1. 实现插件核心逻辑
+2. 创建 UI 组件
+3. 添加测试用例
+4. 验证功能完整性

package/IMPLEMENTATION_SUMMARY.md

@@ -0,0 +1,155 @@
+# Flipper 插件自定义 UI 实现总结
+
+## 项目概述
+
+本项目成功实现了 Flipper 插件的自定义 UI 功能，将简单的表格布局转换为美观的卡片式布局，并添加了选择功能和侧边栏详情展示。
+
+## 实现的功能
+
+### 1. 插件核心逻辑 (`src/index.tsx`)
+
+- ✅ **状态管理**: 使用 `createState` 管理行数据和选择状态
+- ✅ **事件处理**: 监听客户端发送的 `newRow` 事件
+- ✅ **选择功能**: 提供 `setSelection` 方法更新选择状态
+- ✅ **数据持久化**: 使用 `persist` 选项实现状态持久化
+
+### 2. 自定义 UI 组件 (`src/components/MammalCard.tsx`)
+
+- ✅ **卡片布局**: 实现美观的卡片式布局
+- ✅ **选择交互**: 点击卡片进行选择
+- ✅ **视觉反馈**: 选中状态的高亮显示
+- ✅ **悬停效果**: 鼠标悬停时的动画效果
+
+### 3. 主 UI 界面 (`src/index.tsx`)
+
+- ✅ **响应式布局**: 使用 flexbox 实现响应式布局
+- ✅ **侧边栏**: 显示选中卡片的详细信息
+- ✅ **滚动容器**: 支持大量数据的滚动显示
+- ✅ **主题集成**: 使用 Flipper 主题系统
+
+### 4. 测试覆盖 (`src/__tests__/seamammals.spec.tsx`)
+
+- ✅ **数据存储测试**: 验证行数据正确存储
+- ✅ **UI 交互测试**: 验证选择和渲染功能
+- ✅ **状态管理测试**: 验证选择状态正确管理
+- ✅ **数据更新测试**: 验证数据更新处理
+
+## 技术架构
+
+### 数据流
+
+```
+客户端应用 → newRow事件 → 插件逻辑 → 状态更新 → UI重新渲染
+```
+
+### 组件层次
+
+```
+Component (主UI)
+├── MammalCard (卡片组件)
+└── renderSidebar (侧边栏)
+```
+
+### 状态管理
+
+- `rows`: 存储所有行数据
+- `selectedID`: 存储当前选中的 ID
+
+## 文件结构
+
+```
+flipper-plugin-sea-mammals/
+├── src/
+│   ├── index.tsx              # 主插件文件
+│   ├── components/
+│   │   └── MammalCard.tsx     # 卡片组件
+│   └── __tests__/
+│       └── seamammals.spec.tsx # 测试文件
+├── BUILDING_CUSTOM_UI_GUIDE.md # 构建指南
+├── IMPLEMENTATION_SUMMARY.md   # 本总结文档
+└── package.json
+```
+
+## 关键实现细节
+
+### 1. 插件定义
+
+```typescript
+export function plugin(client: PluginClient<Events, {}>) {
+  const rows = createState<Record<string, Row>>({}, { persist: "rows" });
+  const selectedID = createState<string | null>(null, { persist: "selection" });
+
+  client.onMessage("newRow", (row) => {
+    rows.update((draft) => {
+      draft[row.id] = row;
+    });
+  });
+
+  return { rows, selectedID, setSelection };
+}
+```
+
+### 2. UI 组件
+
+```typescript
+export function Component() {
+  const instance = usePlugin(plugin);
+  const rows = useValue(instance.rows);
+  const selectedID = useValue(instance.selectedID);
+
+  return (
+    <div style={{ display: "flex", height: "100%" }}>
+      {/* 卡片网格 */}
+      {/* 侧边栏 */}
+    </div>
+  );
+}
+```
+
+### 3. 卡片组件
+
+```typescript
+export const MammalCard = memo<MammalCardProps>(
+  ({ row, onSelect, selected }) => {
+    return (
+      <div style={cardStyle} onClick={() => onSelect(row.id)}>
+        <div style={imageStyle} />
+        <span style={titleStyle}>{row.title}</span>
+      </div>
+    );
+  }
+);
+```
+
+## 测试结果
+
+- ✅ 4 个测试用例全部通过
+- ✅ 数据存储功能正常
+- ✅ UI 交互功能正常
+- ✅ 状态管理功能正常
+- ✅ 数据更新功能正常
+
+## 性能优化
+
+- ✅ 使用 `memo` 优化组件重渲染
+- ✅ 使用 `useValue` 实现精确的状态订阅
+- ✅ 使用 `createState` 实现高效的状态管理
+
+## 可扩展性
+
+- ✅ 组件化设计，易于添加新功能
+- ✅ 类型安全，使用 TypeScript
+- ✅ 测试覆盖，确保代码质量
+- ✅ 文档完善，便于维护
+
+## 下一步改进建议
+
+1. 添加更多 UI 组件（如搜索、过滤功能）
+2. 实现数据导出功能
+3. 添加更多交互效果
+4. 优化移动端适配
+5. 添加国际化支持
+
+## 总结
+
+本项目成功实现了 Flipper 插件的自定义 UI 功能，展示了如何从简单的表格 UI 转换为功能丰富的卡片式 UI。通过合理的架构设计和完整的测试覆盖，确保了代码的质量和可维护性。

package/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

package/__mocks__/moment.js

@@ -0,0 +1,2 @@
+const moment = require("moment");
+module.exports = moment;

package/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    presets: [
+        '@babel/preset-typescript', 
+        '@babel/preset-react', 
+        ['@babel/preset-env', {targets: {node: 'current'}}]
+    ],
+};

package/dist/bundle.js

@@ -0,0 +1,155 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  Component: () => Component,
+  plugin: () => plugin
+});
+module.exports = __toCommonJS(src_exports);
+var import_react2 = __toESM(require("react"));
+var import_antd = require("antd");
+var import_flipper_plugin2 = require("flipper-plugin");
+
+// src/components/MammalCard.tsx
+var import_react = __toESM(require("react"));
+var import_flipper_plugin = require("flipper-plugin");
+var MammalCard = (0, import_react.memo)(
+  ({ row, onSelect, selected }) => {
+    const handleClick = () => {
+      onSelect(row.id);
+    };
+    const cardStyle = {
+      width: "200px",
+      margin: "8px",
+      cursor: "pointer",
+      border: `2px solid ${selected ? import_flipper_plugin.theme.primaryColor : "transparent"}`,
+      borderRadius: "8px",
+      background: "white",
+      transition: "all 0.2s ease"
+    };
+    const imageStyle = {
+      height: "120px",
+      backgroundImage: `url(${row.url})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
+      borderRadius: "8px 8px 0 0"
+    };
+    const titleStyle = {
+      fontWeight: 500,
+      color: import_flipper_plugin.theme.textColorPrimary,
+      display: "block",
+      padding: "12px"
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: cardStyle,
+        onClick: handleClick,
+        "data-testid": row.title,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.transform = "translateY(-2px)";
+          e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.transform = "translateY(0)";
+          e.currentTarget.style.boxShadow = "none";
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { style: imageStyle }),
+      /* @__PURE__ */ import_react.default.createElement("span", { style: titleStyle }, row.title)
+    );
+  }
+);
+MammalCard.displayName = "MammalCard";
+
+// src/index.tsx
+function plugin(client) {
+  const rows = (0, import_flipper_plugin2.createState)({}, { persist: "rows" });
+  const selectedID = (0, import_flipper_plugin2.createState)(null, { persist: "selection" });
+  client.onMessage("newRow", (row) => {
+    rows.update((draft) => {
+      draft[row.id] = row;
+    });
+  });
+  function setSelection(id) {
+    selectedID.set("" + id);
+  }
+  return {
+    rows,
+    selectedID,
+    setSelection
+  };
+}
+function renderSidebar(row) {
+  return /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ import_react2.default.createElement(import_antd.Typography.Title, { level: 4 }, "Extras"), /* @__PURE__ */ import_react2.default.createElement(
+    "pre",
+    {
+      style: {
+        background: import_flipper_plugin2.theme.backgroundWash,
+        padding: "8px",
+        borderRadius: "4px"
+      }
+    },
+    JSON.stringify(row, null, 2)
+  ));
+}
+function Component() {
+  const instance = (0, import_flipper_plugin2.usePlugin)(plugin);
+  const rows = (0, import_flipper_plugin2.useValue)(instance.rows);
+  const selectedID = (0, import_flipper_plugin2.useValue)(instance.selectedID);
+  return /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", height: "100%" } }, /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      style: {
+        flex: 1,
+        overflow: "auto",
+        background: import_flipper_plugin2.theme.backgroundWash,
+        padding: "16px"
+      }
+    },
+    /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" } }, Object.entries(rows).map(([id, row]) => /* @__PURE__ */ import_react2.default.createElement(
+      MammalCard,
+      {
+        row,
+        onSelect: instance.setSelection,
+        selected: id === selectedID,
+        key: id
+      }
+    )))
+  ), selectedID && /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      style: {
+        width: "300px",
+        borderLeft: `1px solid ${import_flipper_plugin2.theme.borderColor}`
+      }
+    },
+    renderSidebar(rows[selectedID])
+  ));
+}
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vc3JjL2luZGV4LnRzeCIsICIuLi9zcmMvY29tcG9uZW50cy9NYW1tYWxDYXJkLnRzeCJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiaW1wb3J0IFJlYWN0LCB7IG1lbW8gfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IFR5cG9ncmFwaHkgfSBmcm9tIFwiYW50ZFwiO1xuaW1wb3J0IHtcbiAgTGF5b3V0LFxuICBQbHVnaW5DbGllbnQsXG4gIHVzZVBsdWdpbixcbiAgY3JlYXRlU3RhdGUsXG4gIHVzZVZhbHVlLFxuICB0aGVtZSxcbn0gZnJvbSBcImZsaXBwZXItcGx1Z2luXCI7XG5pbXBvcnQgeyBNYW1tYWxDYXJkIH0gZnJvbSBcIi4vY29tcG9uZW50cy9NYW1tYWxDYXJkXCI7XG5cbi8vIFx1NjU3MFx1NjM2RVx1N0M3Qlx1NTc4Qlx1NUI5QVx1NEU0OVxudHlwZSBSb3cgPSB7XG4gIGlkOiBudW1iZXI7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHVybDogc3RyaW5nO1xufTtcblxudHlwZSBFdmVudHMgPSB7XG4gIG5ld1JvdzogUm93O1xufTtcblxuLy8gXHU2M0QyXHU0RUY2XHU5MDNCXHU4RjkxXG5leHBvcnQgZnVuY3Rpb24gcGx1Z2luKGNsaWVudDogUGx1Z2luQ2xpZW50PEV2ZW50cywge30+KSB7XG4gIC8vIFx1NzJCNlx1NjAwMVx1N0JBMVx1NzQwNlxuICBjb25zdCByb3dzID0gY3JlYXRlU3RhdGU8UmVjb3JkPHN0cmluZywgUm93Pj4oe30sIHsgcGVyc2lzdDogXCJyb3dzXCIgfSk7XG4gIGNvbnN0IHNlbGVjdGVkSUQgPSBjcmVhdGVTdGF0ZTxzdHJpbmcgfCBudWxsPihudWxsLCB7IHBlcnNpc3Q6IFwic2VsZWN0aW9uXCIgfSk7XG5cbiAgLy8gXHU0RThCXHU0RUY2XHU1OTA0XHU3NDA2XG4gIGNsaWVudC5vbk1lc3NhZ2UoXCJuZXdSb3dcIiwgKHJvdykgPT4ge1xuICAgIHJvd3MudXBkYXRlKChkcmFmdCkgPT4ge1xuICAgICAgZHJhZnRbcm93LmlkXSA9IHJvdztcbiAgICB9KTtcbiAgfSk7XG5cbiAgLy8gXHU5MDA5XHU2MkU5XHU1MjlGXHU4MEZEXG4gIGZ1bmN0aW9uIHNldFNlbGVjdGlvbihpZDogbnVtYmVyKSB7XG4gICAgc2VsZWN0ZWRJRC5zZXQoXCJcIiArIGlkKTtcbiAgfVxuXG4gIC8vIFx1NjZCNFx1OTczMkFQSVxuICByZXR1cm4ge1xuICAgIHJvd3MsXG4gICAgc2VsZWN0ZWRJRCxcbiAgICBzZXRTZWxlY3Rpb24sXG4gIH07XG59XG5cbi8vIFx1NEZBN1x1OEZCOVx1NjgwRlx1NkUzMlx1NjdEM1x1NTFGRFx1NjU3MFxuZnVuY3Rpb24gcmVuZGVyU2lkZWJhcihyb3c6IFJvdykge1xuICByZXR1cm4gKFxuICAgIDxkaXYgc3R5bGU9e3sgcGFkZGluZzogXCIxNnB4XCIgfX0+XG4gICAgICA8VHlwb2dyYXBoeS5UaXRsZSBsZXZlbD17NH0+RXh0cmFzPC9UeXBvZ3JhcGh5LlRpdGxlPlxuICAgICAgPHByZVxuICAgICAgICBzdHlsZT17e1xuICAgICAgICAgIGJhY2tncm91bmQ6IHRoZW1lLmJhY2tncm91bmRXYXNoLFxuICAgICAgICAgIHBhZGRpbmc6IFwiOHB4XCIsXG4gICAgICAgICAgYm9yZGVyUmFkaXVzOiBcIjRweFwiLFxuICAgICAgICB9fVxuICAgICAgPlxuICAgICAgICB7SlNPTi5zdHJpbmdpZnkocm93LCBudWxsLCAyKX1cbiAgICAgIDwvcHJlPlxuICAgIDwvZGl2PlxuICApO1xufVxuXG4vLyBcdTRFM0JVSVx1N0VDNFx1NEVGNlxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgaW5zdGFuY2UgPSB1c2VQbHVnaW4ocGx1Z2luKTtcbiAgY29uc3Qgcm93cyA9IHVzZVZhbHVlKGluc3RhbmNlLnJvd3MpO1xuICBjb25zdCBzZWxlY3RlZElEID0gdXNlVmFsdWUoaW5zdGFuY2Uuc2VsZWN0ZWRJRCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IHN0eWxlPXt7IGRpc3BsYXk6IFwiZmxleFwiLCBoZWlnaHQ6IFwiMTAwJVwiIH19PlxuICAgICAgPGRpdlxuICAgICAgICBzdHlsZT17e1xuICAgICAgICAgIGZsZXg6IDEsXG4gICAgICAgICAgb3ZlcmZsb3c6IFwiYXV0b1wiLFxuICAgICAgICAgIGJhY2tncm91bmQ6IHRoZW1lLmJhY2tncm91bmRXYXNoLFxuICAgICAgICAgIHBhZGRpbmc6IFwiMTZweFwiLFxuICAgICAgICB9fVxuICAgICAgPlxuICAgICAgICA8ZGl2IHN0eWxlPXt7IGRpc3BsYXk6IFwiZmxleFwiLCBmbGV4V3JhcDogXCJ3cmFwXCIsIGdhcDogXCI4cHhcIiB9fT5cbiAgICAgICAgICB7T2JqZWN0LmVudHJpZXMocm93cykubWFwKChbaWQsIHJvd10pID0+IChcbiAgICAgICAgICAgIDxNYW1tYWxDYXJkXG4gICAgICAgICAgICAgIHJvdz17cm93fVxuICAgICAgICAgICAgICBvblNlbGVjdD17aW5zdGFuY2Uuc2V0U2VsZWN0aW9ufVxuICAgICAgICAgICAgICBzZWxlY3RlZD17aWQgPT09IHNlbGVjdGVkSUR9XG4gICAgICAgICAgICAgIGtleT17aWR9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgICkpfVxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICAge3NlbGVjdGVkSUQgJiYgKFxuICAgICAgICA8ZGl2XG4gICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgIHdpZHRoOiBcIjMwMHB4XCIsXG4gICAgICAgICAgICBib3JkZXJMZWZ0OiBgMXB4IHNvbGlkICR7dGhlbWUuYm9yZGVyQ29sb3J9YCxcbiAgICAgICAgICB9fVxuICAgICAgICA+XG4gICAgICAgICAge3JlbmRlclNpZGViYXIocm93c1tzZWxlY3RlZElEXSl9XG4gICAgICAgIDwvZGl2PlxuICAgICAgKX1cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiIsICJpbXBvcnQgUmVhY3QsIHsgbWVtbyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiZmxpcHBlci1wbHVnaW5cIjtcblxudHlwZSBSb3cgPSB7XG4gIGlkOiBudW1iZXI7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHVybDogc3RyaW5nO1xufTtcblxuaW50ZXJmYWNlIE1hbW1hbENhcmRQcm9wcyB7XG4gIHJvdzogUm93O1xuICBvblNlbGVjdDogKGlkOiBudW1iZXIpID0+IHZvaWQ7XG4gIHNlbGVjdGVkOiBib29sZWFuO1xufVxuXG5leHBvcnQgY29uc3QgTWFtbWFsQ2FyZCA9IG1lbW88TWFtbWFsQ2FyZFByb3BzPihcbiAgKHsgcm93LCBvblNlbGVjdCwgc2VsZWN0ZWQgfSkgPT4ge1xuICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4ge1xuICAgICAgb25TZWxlY3Qocm93LmlkKTtcbiAgICB9O1xuXG4gICAgY29uc3QgY2FyZFN0eWxlOiBSZWFjdC5DU1NQcm9wZXJ0aWVzID0ge1xuICAgICAgd2lkdGg6IFwiMjAwcHhcIixcbiAgICAgIG1hcmdpbjogXCI4cHhcIixcbiAgICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgICBib3JkZXI6IGAycHggc29saWQgJHtzZWxlY3RlZCA/IHRoZW1lLnByaW1hcnlDb2xvciA6IFwidHJhbnNwYXJlbnRcIn1gLFxuICAgICAgYm9yZGVyUmFkaXVzOiBcIjhweFwiLFxuICAgICAgYmFja2dyb3VuZDogXCJ3aGl0ZVwiLFxuICAgICAgdHJhbnNpdGlvbjogXCJhbGwgMC4ycyBlYXNlXCIsXG4gICAgfTtcblxuICAgIGNvbnN0IGltYWdlU3R5bGU6IFJlYWN0LkNTU1Byb3BlcnRpZXMgPSB7XG4gICAgICBoZWlnaHQ6IFwiMTIwcHhcIixcbiAgICAgIGJhY2tncm91bmRJbWFnZTogYHVybCgke3Jvdy51cmx9KWAsXG4gICAgICBiYWNrZ3JvdW5kU2l6ZTogXCJjb3ZlclwiLFxuICAgICAgYmFja2dyb3VuZFBvc2l0aW9uOiBcImNlbnRlclwiLFxuICAgICAgYmFja2dyb3VuZFJlcGVhdDogXCJuby1yZXBlYXRcIixcbiAgICAgIGJvcmRlclJhZGl1czogXCI4cHggOHB4IDAgMFwiLFxuICAgIH07XG5cbiAgICBjb25zdCB0aXRsZVN0eWxlOiBSZWFjdC5DU1NQcm9wZXJ0aWVzID0ge1xuICAgICAgZm9udFdlaWdodDogNTAwLFxuICAgICAgY29sb3I6IHRoZW1lLnRleHRDb2xvclByaW1hcnksXG4gICAgICBkaXNwbGF5OiBcImJsb2NrXCIsXG4gICAgICBwYWRkaW5nOiBcIjEycHhcIixcbiAgICB9O1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXZcbiAgICAgICAgc3R5bGU9e2NhcmRTdHlsZX1cbiAgICAgICAgb25DbGljaz17aGFuZGxlQ2xpY2t9XG4gICAgICAgIGRhdGEtdGVzdGlkPXtyb3cudGl0bGV9XG4gICAgICAgIG9uTW91c2VFbnRlcj17KGUpID0+IHtcbiAgICAgICAgICBlLmN1cnJlbnRUYXJnZXQuc3R5bGUudHJhbnNmb3JtID0gXCJ0cmFuc2xhdGVZKC0ycHgpXCI7XG4gICAgICAgICAgZS5jdXJyZW50VGFyZ2V0LnN0eWxlLmJveFNoYWRvdyA9IFwiMCA0cHggMTJweCByZ2JhKDAsIDAsIDAsIDAuMTUpXCI7XG4gICAgICAgIH19XG4gICAgICAgIG9uTW91c2VMZWF2ZT17KGUpID0+IHtcbiAgICAgICAgICBlLmN1cnJlbnRUYXJnZXQuc3R5bGUudHJhbnNmb3JtID0gXCJ0cmFuc2xhdGVZKDApXCI7XG4gICAgICAgICAgZS5jdXJyZW50VGFyZ2V0LnN0eWxlLmJveFNoYWRvdyA9IFwibm9uZVwiO1xuICAgICAgICB9fVxuICAgICAgPlxuICAgICAgICA8ZGl2IHN0eWxlPXtpbWFnZVN0eWxlfSAvPlxuICAgICAgICA8c3BhbiBzdHlsZT17dGl0bGVTdHlsZX0+e3Jvdy50aXRsZX08L3NwYW4+XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG4pO1xuXG5NYW1tYWxDYXJkLmRpc3BsYXlOYW1lID0gXCJNYW1tYWxDYXJkXCI7XG4iXSwKICAibWFwcGluZ3MiOiAiOzs7Ozs7Ozs7Ozs7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Y0FBQyxTQUFJLE9BQU8sRUFBRSxTQUFTLFFBQVEsUUFBUSxPQUFPLEtBQzVDLDhCQUFBQSxRQUFBO0FBQUEsSUFBQztBQUFBO0FBQUEsTUFDQyxPQUFPO0FBQUEsUUFDTCxNQUFNO0FBQUEsUUFDTixVQUFVO0FBQUEsUUFDVixZQUFZLDZCQUFNO0FBQUEsUUFDbEIsU0FBUztBQUFBLE1BQ1g7QUFBQTtBQUFBLElBRUEsOEJBQUFBLFFBQUEsY0FBQyxTQUFJLE9BQU8sRUFBRSxTQUFTLFFBQVEsVUFBVSxRQUFRLEtBQUssTUFBTSxLQUN6RCxPQUFPLFFBQVEsSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDLElBQUksR0FBRyxNQUNqQyw4QkFBQUEsUUFBQTtBQUFBLE1BQUM7QUFBQTtBQUFBLFFBQ0M7QUFBQSxRQUNBLFVBQVUsU0FBUztBQUFBLFFBQ25CLFVBQVUsT0FBTztBQUFBLFFBQ2pCLEtBQUs7QUFBQTtBQUFBLElBQ1AsQ0FDRCxDQUNIO0FBQUEsRUFDRixHQUNDLGNBQ0MsOEJBQUFBLFFBQUE7QUFBQSxJQUFDO0FBQUE7QUFBQSxNQUNDLE9BQU87QUFBQSxRQUNMLE9BQU87QUFBQSxRQUNQLFlBQVksYUFBYSw2QkFBTTtBQUFBLE1BQ2pDO0FBQUE7QUFBQSxJQUVDLGNBQWMsS0FBSyxXQUFXO0FBQUEsRUFDakMsQ0FFSjtBQUVKOyIsCiAgIm5hbWVzIjogWyJpbXBvcnRfcmVhY3QiLCAiaW1wb3J0X2ZsaXBwZXJfcGx1Z2luIiwgIlJlYWN0IiwgIlJlYWN0Il0KfQo=

package/jest-setup.ts

@@ -0,0 +1,2 @@
+// Jest setup file for Flipper plugin
+// This file is required for proper test environment setup

package/jest.config.js

@@ -0,0 +1,38 @@
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+
+  // 核心修复配置
+  moduleNameMapper: {
+    // 修复 moment 路径问题
+    "antd/node_modules/moment": "<rootDir>/node_modules/moment",
+    "^antd/node_modules/moment$": "<rootDir>/node_modules/moment",
+
+    // 确保 flipper-plugin 正确映射
+    "^flipper-plugin$": "<rootDir>/node_modules/flipper-plugin",
+
+    // 处理样式和静态文件
+    "\\.(css|less|scss)$": "identity-obj-proxy",
+    "\\.(jpg|jpeg|png|gif|svg)$": "<rootDir>/__mocks__/fileMock.js",
+  },
+
+  // 必须包含的转换规则
+  transformIgnorePatterns: [
+    "/node_modules/(?!(antd|flipper|moment|@ant-design))",
+  ],
+
+  // 测试环境配置
+  setupFilesAfterEnv: ["<rootDir>/jest-setup.ts"],
+  globals: {
+    __DEV__: true,
+  },
+
+  // 模块解析配置
+  moduleDirectories: ["node_modules", "src"],
+
+  // 测试文件匹配
+  testMatch: [
+    "<rootDir>/src/**/__tests__/**/*.{ts,tsx}",
+    "<rootDir>/src/**/*.{test,spec}.{ts,tsx}",
+  ],
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://fbflipper.com/schemas/plugin-package/v2.json",
+  "name": "flipper-plugin-sea-mammals",
+  "id": "sea-mammals",
+  "version": "1.0.1",
+  "pluginType": "client",
+  "main": "dist/bundle.js",
+  "flipperBundlerEntry": "src/index.tsx",
+  "license": "MIT",
+  "keywords": [
+    "flipper-plugin"
+  ],
+  "icon": "apps",
+  "title": "Sea Mammals",
+  "scripts": {
+    "lint": "flipper-pkg lint",
+    "prepack": "flipper-pkg lint && flipper-pkg bundle",
+    "build": "flipper-pkg bundle",
+    "watch": "flipper-pkg bundle --watch",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
+  },
+  "peerDependencies": {
+    "@emotion/styled": "latest",
+    "antd": "latest",
+    "flipper-plugin": "^0.273.0",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "latest",
+    "@babel/preset-typescript": "latest",
+    "@emotion/styled": "latest",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^30.0.0",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "antd": "latest",
+    "create-jest": "^30.0.5",
+    "flipper-pkg": "latest",
+    "flipper-plugin": "latest",
+    "jest": "^30.0.5",
+    "jest-environment-jsdom": "^30.0.5",
+    "jest-mock-console": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "ts-jest": "^29.4.1",
+    "typescript": "latest"
+  }
+}

package/src/__tests__/seamammals.spec.tsx

@@ -0,0 +1,156 @@
+import { TestUtils } from "flipper-plugin";
+import * as MammalsPlugin from "..";
+
+// 数据存储测试
+test("It can store rows", () => {
+  const { instance, sendEvent } = TestUtils.startPlugin(MammalsPlugin);
+
+  expect(instance.rows.get()).toEqual({});
+  expect(instance.selectedID.get()).toBeNull();
+
+  sendEvent("newRow", {
+    id: 1,
+    title: "Dolphin",
+    url: "http://dolphin.png",
+  });
+  sendEvent("newRow", {
+    id: 2,
+    title: "Turtle",
+    url: "http://turtle.png",
+  });
+
+  expect(instance.rows.get()).toMatchInlineSnapshot(`
+{
+  "1": {
+    "id": 1,
+    "title": "Dolphin",
+    "url": "http://dolphin.png",
+  },
+  "2": {
+    "id": 2,
+    "title": "Turtle",
+    "url": "http://turtle.png",
+  },
+}
+`);
+});
+
+// UI交互测试
+test("It can have selection and render details", async () => {
+  const { instance, renderer, act, sendEvent, exportState } =
+    TestUtils.renderPlugin(MammalsPlugin);
+
+  sendEvent("newRow", {
+    id: 1,
+    title: "Dolphin",
+    url: "http://dolphin.png",
+  });
+  sendEvent("newRow", {
+    id: 2,
+    title: "Turtle",
+    url: "http://turtle.png",
+  });
+
+  // Dolphin卡片应该可见
+  expect(await renderer.findByTestId("Dolphin")).not.toBeNull();
+
+  // 验证Turtle卡片结构
+  expect(await renderer.findByTestId("Turtle")).toMatchInlineSnapshot(`
+<div
+  data-testid="Turtle"
+  style="width: 200px; margin: 8px; cursor: pointer; border: 2px solid transparent; border-radius: 8px; background: white; transition: all 0.2s ease;"
+>
+  <div
+    style="height: 120px; background-image: url("http://turtle.png"); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px 8px 0 0;"
+  />
+  <span
+    style="font-weight: 500; color: var(--flipper-text-color-primary); display: block; padding: 12px;"
+  >
+    Turtle
+  </span>
+</div>
+`);
+
+  // 没有选择时不应该有侧边栏
+  expect(renderer.queryAllByText("Extras").length).toBe(0);
+
+  act(() => {
+    instance.setSelection(2);
+  });
+
+  // 现在侧边栏应该可见
+  expect(await renderer.findByText("Extras")).not.toBeNull();
+
+  // 验证导出状态
+  expect(exportState()).toEqual({
+    rows: {
+      "1": {
+        id: 1,
+        title: "Dolphin",
+        url: "http://dolphin.png",
+      },
+      "2": {
+        id: 2,
+        title: "Turtle",
+        url: "http://turtle.png",
+      },
+    },
+    selection: "2",
+  });
+});
+
+// 选择功能测试
+test("Selection state is properly managed", () => {
+  const { instance, sendEvent } = TestUtils.startPlugin(MammalsPlugin);
+
+  expect(instance.selectedID.get()).toBeNull();
+
+  instance.setSelection(1);
+  expect(instance.selectedID.get()).toBe("1");
+
+  instance.setSelection(2);
+  expect(instance.selectedID.get()).toBe("2");
+
+  instance.setSelection(1);
+  expect(instance.selectedID.get()).toBe("1");
+});
+
+// 数据更新测试
+test("Data updates are properly handled", () => {
+  const { instance, sendEvent } = TestUtils.startPlugin(MammalsPlugin);
+
+  expect(instance.rows.get()).toEqual({});
+
+  sendEvent("newRow", {
+    id: 1,
+    title: "Dolphin",
+    url: "http://dolphin.png",
+  });
+
+  expect(instance.rows.get()).toEqual({
+    "1": {
+      id: 1,
+      title: "Dolphin",
+      url: "http://dolphin.png",
+    },
+  });
+
+  sendEvent("newRow", {
+    id: 2,
+    title: "Turtle",
+    url: "http://turtle.png",
+  });
+
+  expect(instance.rows.get()).toEqual({
+    "1": {
+      id: 1,
+      title: "Dolphin",
+      url: "http://dolphin.png",
+    },
+    "2": {
+      id: 2,
+      title: "Turtle",
+      url: "http://turtle.png",
+    },
+  });
+});

package/src/components/MammalCard.tsx

@@ -0,0 +1,69 @@
+import React, { memo } from "react";
+import { theme } from "flipper-plugin";
+
+type Row = {
+  id: number;
+  title: string;
+  url: string;
+};
+
+interface MammalCardProps {
+  row: Row;
+  onSelect: (id: number) => void;
+  selected: boolean;
+}
+
+export const MammalCard = memo<MammalCardProps>(
+  ({ row, onSelect, selected }) => {
+    const handleClick = () => {
+      onSelect(row.id);
+    };
+
+    const cardStyle: React.CSSProperties = {
+      width: "200px",
+      margin: "8px",
+      cursor: "pointer",
+      border: `2px solid ${selected ? theme.primaryColor : "transparent"}`,
+      borderRadius: "8px",
+      background: "white",
+      transition: "all 0.2s ease",
+    };
+
+    const imageStyle: React.CSSProperties = {
+      height: "120px",
+      backgroundImage: `url(${row.url})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
+      borderRadius: "8px 8px 0 0",
+    };
+
+    const titleStyle: React.CSSProperties = {
+      fontWeight: 500,
+      color: theme.textColorPrimary,
+      display: "block",
+      padding: "12px",
+    };
+
+    return (
+      <div
+        style={cardStyle}
+        onClick={handleClick}
+        data-testid={row.title}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.transform = "translateY(-2px)";
+          e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)";
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.transform = "translateY(0)";
+          e.currentTarget.style.boxShadow = "none";
+        }}
+      >
+        <div style={imageStyle} />
+        <span style={titleStyle}>{row.title}</span>
+      </div>
+    );
+  }
+);
+
+MammalCard.displayName = "MammalCard";

package/src/index.tsx

@@ -0,0 +1,107 @@
+import React, { memo } from "react";
+import { Typography } from "antd";
+import {
+  Layout,
+  PluginClient,
+  usePlugin,
+  createState,
+  useValue,
+  theme,
+} from "flipper-plugin";
+import { MammalCard } from "./components/MammalCard";
+
+// 数据类型定义
+type Row = {
+  id: number;
+  title: string;
+  url: string;
+};
+
+type Events = {
+  newRow: Row;
+};
+
+// 插件逻辑
+export function plugin(client: PluginClient<Events, {}>) {
+  // 状态管理
+  const rows = createState<Record<string, Row>>({}, { persist: "rows" });
+  const selectedID = createState<string | null>(null, { persist: "selection" });
+
+  // 事件处理
+  client.onMessage("newRow", (row) => {
+    rows.update((draft) => {
+      draft[row.id] = row;
+    });
+  });
+
+  // 选择功能
+  function setSelection(id: number) {
+    selectedID.set("" + id);
+  }
+
+  // 暴露API
+  return {
+    rows,
+    selectedID,
+    setSelection,
+  };
+}
+
+// 侧边栏渲染函数
+function renderSidebar(row: Row) {
+  return (
+    <div style={{ padding: "16px" }}>
+      <Typography.Title level={4}>Extras</Typography.Title>
+      <pre
+        style={{
+          background: theme.backgroundWash,
+          padding: "8px",
+          borderRadius: "4px",
+        }}
+      >
+        {JSON.stringify(row, null, 2)}
+      </pre>
+    </div>
+  );
+}
+
+// 主UI组件
+export function Component() {
+  const instance = usePlugin(plugin);
+  const rows = useValue(instance.rows);
+  const selectedID = useValue(instance.selectedID);
+
+  return (
+    <div style={{ display: "flex", height: "100%" }}>
+      <div
+        style={{
+          flex: 1,
+          overflow: "auto",
+          background: theme.backgroundWash,
+          padding: "16px",
+        }}
+      >
+        <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
+          {Object.entries(rows).map(([id, row]) => (
+            <MammalCard
+              row={row}
+              onSelect={instance.setSelection}
+              selected={id === selectedID}
+              key={id}
+            />
+          ))}
+        </div>
+      </div>
+      {selectedID && (
+        <div
+          style={{
+            width: "300px",
+            borderLeft: `1px solid ${theme.borderColor}`,
+          }}
+        >
+          {renderSidebar(rows[selectedID])}
+        </div>
+      )}
+    </div>
+  );
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "ES6",
+    "jsx": "react",
+    "sourceMap": true,
+    "noEmit": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "types": ["jest"],
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "files": ["src/index.tsx"]
+}