listpage_cli 0.0.286 → 0.0.291

package/bin/cli.js

@@ -4,6 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = require("fs");
+const os_1 = __importDefault(require("os"));
 const path_1 = __importDefault(require("path"));
 const prompts_1 = require("./prompts");
 const copy_1 = require("./copy");
@@ -52,6 +54,8 @@ async function main() {
         return initCmd();
     if (cmd === "sync-docs")
         return syncDocsCmd();
+    if (cmd === "install-skill")
+        return installSkillCmd();
     (0, prompts_1.printHelp)();
 }
 main();
@@ -65,3 +69,18 @@ async function syncDocsCmd() {
     (0, copy_1.syncDirWithRename)(sourceDocs, destDocs);
     console.log("已同步 .trae 和 docs 到执行目录的同级目录");
 }
+async function installSkillCmd() {
+    const args = process.argv.slice(2);
+    const projectMode = args.includes("--project");
+    const skillName = args.find((a) => a !== "install-skill" && a !== "--project") || "listpage";
+    const sourceDir = path_1.default.join(__dirname, "..", "skills", skillName);
+    if (!(0, fs_1.existsSync)(sourceDir)) {
+        console.error(`技能 ${skillName} 不存在`);
+        process.exit(1);
+    }
+    const targetDir = projectMode
+        ? path_1.default.join(process.cwd(), ".cursor", "skills", skillName)
+        : path_1.default.join(os_1.default.homedir(), ".cursor", "skills", skillName);
+    (0, copy_1.copySkillDir)(sourceDir, targetDir);
+    console.log(`已安装 ${skillName} 技能到 ${targetDir}`);
+}

package/bin/copy.js

@@ -10,6 +10,7 @@ exports.copyBackendTemplate = copyBackendTemplate;
 exports.copyDeployScriptTemplate = copyDeployScriptTemplate;
 exports.ensureDir = ensureDir;
 exports.isDirEmpty = isDirEmpty;
+exports.copySkillDir = copySkillDir;
 exports.syncDirWithRename = syncDirWithRename;
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
@@ -100,6 +101,9 @@ function compileTemplateContent(str, vars) {
 function isDirEmpty(dir) {
     return !(0, fs_1.existsSync)(dir) || (0, fs_1.readdirSync)(dir).length === 0;
 }
+function copySkillDir(sourceDir, targetDir) {
+    syncDirWithRename(sourceDir, targetDir);
+}
 function syncDirWithRename(source, destination) {
     ensureDir(destination);
     const items = (0, fs_1.readdirSync)(source);

package/bin/prompts.js

@@ -64,6 +64,8 @@ function printHelp() {
         "说明: 进入中文引导式交互，按提示填写即可",
         "用法: listpage_cli sync-docs",
         "说明: 将模板中的 .trae 和 docs 同步到执行目录的同级目录",
+        "用法: listpage_cli install-skill [listpage] [--project]",
+        "说明: 安装 listpage 技能到 Cursor。默认安装到 ~/.cursor/skills/；加 --project 则安装到当前项目 .cursor/skills/",
     ].join("\n");
     console.log(h);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage_cli",
-  "version": "0.0.286",
+  "version": "0.0.291",
   "private": false,
   "bin": {
     "listpage_cli": "bin/cli.js"
@@ -14,7 +14,8 @@
   },
   "files": [
     "bin",
-    "templates"
+    "templates",
+    "skills"
   ],
   "devDependencies": {
     "typescript": "^5.6.2",

package/skills/listpage/SKILL.md

@@ -0,0 +1,19 @@
+---
+name: listpage
+description: 使用 listpage-next 实现页面级列表/表格。Use ONLY when user explicitly requests to implement a page with listpage, e.g. 用 listpage 实现 xxx 页面, 使用 ListPage 做 xxx. Do NOT apply for generic list/table requests without explicit listpage mention.
+---
+
+# ListPage 使用技能
+
+使用 `listpage-next`。示例与 API 见 [examples.md](examples.md)、[api.md](api.md)。
+
+## 核心要点
+
+- **request**：`(pageParams, filterValues) => Promise<{ list, total, current, pageSize }>`
+- **必配**：`request`、`table.columns`、`table.tableProps.rowKey`
+- **浮窗**：`floats=[{ key, render }]`，`ctx.showFloat(key, record, true)` 关闭后刷新
+
+## 目录结构
+
+- **简单页面**：单文件内联 columns、filters、request
+- **复杂页面**（筛选项 > 3、列 > 5、浮窗 > 1）：`pages/<Feature>/config/{columns,filters,floats,request}.tsx` + `components/`

package/skills/listpage/api.md

@@ -0,0 +1,92 @@
+# API
+
+## ListPageProps
+
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+| --- | --- | --- | --- | --- |
+| `styles` | 页面容器样式覆盖 | `{ page?: React.CSSProperties }` | - | 否 |
+| `storageKey` | 本地存储键名（分页/筛选持久化） | `string` | - | 否 |
+| `initialValues` | 初始值（在无 `state` 与缓存时生效） | `{ filterValues?: any; pageSize?: number; currentPage?: number }` | - | 否 |
+| `state` | 外部初始化值（优先级最高，非受控） | `{ filterValues?: any; pageSize?: number; currentPage?: number }` | - | 否 |
+| `request` | 数据请求函数，返回分页数据 | `(pageParams: { current?: number; pageSize?: number; sort?: string }, filterValues: any) => Promise<{ total: number; pageSize: number; current: number; list: any[] }>` | - | 是 |
+| `header` | 页面标题与右侧操作 | `{ title?: React.ReactNode; extra?: React.ReactNode | ((ctx) => React.ReactNode) }` | - | 否 |
+| `filter` | 筛选配置 | `{ labelInline?: boolean; options: FilterFormOption[]; onReset?: () => void; onChange?: (value) => void }` | - | 否 |
+| `toolbar` | 页面级工具栏 | `{ render: (ctx) => React.ReactNode }` | - | 否 |
+| `table` | 表格配置 | `DataTableProps` | - | 是 |
+| `floats` | 浮窗定义 | `Array<{ key: string; render: (props: FloatComponentProps) => JSX.Element }>` | - | 否 |
+
+## FilterFormOption
+
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+| --- | --- | --- | --- | --- |
+| `name` | 字段名 | `string` | - | 是 |
+| `label` | 标签 | `React.ReactNode` | - | 否 |
+| `component` | 组件类型或自定义节点 | `'input' | 'select' | 'async-select' | 'daterange' | ReactElement` | `'input'` | 否 |
+| `colSpan` | 栅格占比（6 表示半行） | `number` | `2` | 否 |
+| `props` | 组件 props（随类型变化） | `ComponentProps<Type>` | - | 否 |
+| `formItemProps` | antd `Form.Item` 属性（去除 children） | `Omit<FormItemProps, 'children'>` | - | 否 |
+
+组件映射与值约定：
+- `'input'` → antd `Input`
+- `'select'` → antd `Select`
+- `'async-select'` → 组件库 `AsyncSelect`，`request` 返回 `{ list, total, current, pageSize }`
+- `'daterange'` → 增强版 `RangePicker`，提交值为 `[start: string, end: string]`
+
+## DataTableProps（`ListPage.table`）
+
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+| --- | --- | --- | --- | --- |
+| `columns` | 列配置 | `ListPageTableColumn[]` | `[]` | 否 |
+| `title` | 表格卡片标题 | `React.ReactNode` | - | 否 |
+| `extra` | 标题右侧操作（函数可访问 ctx） | `React.ReactNode | ((ctx) => React.ReactNode)` | - | 否 |
+| `tableProps` | antd `Table` 其他属性（除 `dataSource/title/columns`） | `Omit<TableProps, 'dataSource' | 'title' | 'columns'>` | - | 否 |
+| `rowSelectionType` | 选择类型 | `'checkbox' | 'radio'` | - | 否 |
+| `rowTitleKey` | 标题展示所选关键字段 | `string` | - | 否 |
+
+分页说明：底部中文本地化；`pageSizeOptions=[10,20,50,100]`；`showTotal="start-end 共 total 条"`；`tableProps.pagination===false` 隐藏分页。
+
+## ListPageTableColumn
+
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+| --- | --- | --- | --- | --- |
+| `title` | 列头 | `React.ReactNode` | - | 否 |
+| `dataIndex` | 数据字段 | `string` | - | 否 |
+| `key` | 唯一键 | `string` | - | 否 |
+| `width` | 列宽 | `number` | - | 否 |
+| `fixed` | 固定列 | `'left' | 'right'` | - | 否 |
+| `ellipsis` | 省略展示 | `boolean` | - | 否 |
+| `component` | 内置或自定义渲染 | `'text' | 'time' | 'tag' | 'link' | 'switch' | ((value, record, index, ctx) => React.ReactNode)` | - | 否 |
+| `props` | 随 `component` 类型变化的 props | `any` | - | 否 |
+
+内置渲染 props 说明：
+- `text`：透传 `Typography.Text`，默认 `ellipsis={{ tooltip: true }}`
+- `time`：`{ format?: string }`，无值显示 `'-'`
+- `tag`：透传 `TagProps`
+- `link`：`{ titlePropName?: string | (record)=>string; hrefPropName?: string | (record)=>string; target?: HTMLAttributeAnchorTarget }`
+- `switch`：`{ syncChange?: (value: boolean, record) => Promise<void> }`
+
+## Floats（浮窗）
+
+| 属性 | 说明 | 类型 |
+| --- | --- | --- |
+| `key` | 浮窗标识，短横线小写 | `string` |
+| `render` | 浮窗组件渲染函数 | `(props: { record: any; visible: boolean; onClose: () => void }) => JSX.Element` |
+
+调用方式：在列或工具栏中使用 `ctx.showFloat(key, record, onCloseCallback)`；传 `true` 关闭后自动刷新列表，传函数自定义回调。
+
+## ListPageStore（上下文）
+
+| 名称 | 说明 | 类型/签名 |
+| --- | --- | --- |
+| `filters` | 当前筛选条件 | `any` |
+| `dataSource` | 表格数据源 | `any[]` |
+| `pagination` | 分页信息 | `{ current: number; pageSize: number; total: number }` |
+| `loadingData` | 加载状态 | `boolean` |
+| `selection` | 选择集 | `{ selectedRowKeys: Key[]; selectedRows: any[] }` |
+| `submitFilters` | 提交筛选并重置页码 | `(value) => void` |
+| `showFloat` | 打开浮窗 | `(key: string, record: any, onCloseCallback?: true | (() => void)) => void` |
+| `hideFloat` | 关闭浮窗 | `() => void` |
+| `updatePage` | 更新页码与页大小 | `(page: number, pageSize: number) => void` |
+| `fetchTableData` | 拉取数据 | `() => Promise<void>` |
+| `refreshTable` | 刷新数据 | `() => void` |
+| `listen/emit` | 事件机制 | `(name: string, cb: (data:any)=>void) / (name: string, data:any) => void` |

package/skills/listpage/examples.md

@@ -0,0 +1,149 @@
+# ListPage 示例
+
+## 1. 最小示例（单文件内联）
+
+```tsx
+import { ListPage, type FilterFormOption, type ListPageTableColumn } from 'listpage-next';
+import { Button, Input, Select, Space } from 'antd';
+
+const filters: FilterFormOption[] = [
+  { name: 'name', label: '姓名', component: <Input placeholder="请输入" /> },
+  { name: 'status', label: '状态', component: <Select allowClear options={[{ value: 'enabled', label: '启用' }, { value: 'disabled', label: '停用' }]} /> },
+];
+
+const columns: ListPageTableColumn[] = [
+  { title: '姓名', dataIndex: 'name', key: 'name', component: 'text' },
+  { title: '地址', dataIndex: 'address', key: 'address', ellipsis: true },
+];
+
+const request = async ({ current = 1, pageSize = 10 }, filterValues: any) => {
+  const all = Array.from({ length: 100 }).map((_, i) => ({ id: i + 1, name: `Edward ${i + 1}`, address: `Address ${i + 1}` }));
+  let list = all.filter((r) => !filterValues?.name || r.name.includes(filterValues.name));
+  const skip = (current - 1) * pageSize;
+  return { list: list.slice(skip, skip + pageSize), total: list.length, current, pageSize };
+};
+
+export default function Page() {
+  return (
+    <ListPage
+      storageKey="demo-listpage"
+      initialValues={{ currentPage: 1, pageSize: 10 }}
+      request={request}
+      header={{ title: '用户列表', extra: (ctx) => <Space><Button onClick={() => ctx.refreshTable()}>刷新</Button></Space> }}
+      filter={{ options: filters }}
+      table={{ columns, tableProps: { rowKey: 'id' } }}
+    />
+  );
+}
+```
+
+## 2. 带浮窗（新增 Drawer）
+
+```tsx
+import { ListPage, type FilterFormOption, type ListPageTableColumn } from 'listpage-next';
+import { Button, Input, Drawer, Space } from 'antd';
+import { useState } from 'react';
+
+const filters: FilterFormOption[] = [{ name: 'name', label: '姓名', component: <Input placeholder="请输入" /> }];
+const columns: ListPageTableColumn[] = [
+  { title: '姓名', dataIndex: 'name', key: 'name', component: 'text' },
+];
+
+const request = async ({ current = 1, pageSize = 10 }, f: any) => {
+  const list = [{ id: 1, name: 'Test' }];
+  return { list, total: 1, current, pageSize };
+};
+
+const CreateDrawer = (props: { record: any; visible: boolean; onClose: () => void }) => {
+  const { visible, onClose } = props;
+  return (
+    <Drawer open={visible} title="新增" onClose={onClose}>
+      <Input placeholder="姓名" />
+      <Button type="primary" onClick={onClose}>保存</Button>
+    </Drawer>
+  );
+};
+
+export default function Page() {
+  return (
+    <ListPage
+      storageKey="LISTPAGE_USER"
+      request={request}
+      header={{ title: '用户', extra: (ctx) => <Button type="primary" onClick={() => ctx.showFloat('create', {}, true)}>新增</Button> }}
+      filter={{ options: filters }}
+      table={{ columns, tableProps: { rowKey: 'id' } }}
+      floats={[{ key: 'create', render: CreateDrawer }]}
+    />
+  );
+}
+```
+
+## 3. 带行选择
+
+```tsx
+table={{
+  columns,
+  rowSelectionType: 'checkbox',
+  rowTitleKey: 'name',
+  tableProps: { rowKey: 'id' },
+}}
+```
+
+## 4. 带 toolbar
+
+```tsx
+toolbar={{
+  render: (ctx) => (
+    <Space>
+      <Button onClick={() => ctx.refreshTable()}>刷新</Button>
+      <Button>导出</Button>
+    </Space>
+  ),
+}}
+```
+
+## 5. 复杂结构（config 拆分目录）
+
+目录结构：
+
+```
+pages/MemberList/
+├── index.tsx
+├── config/
+│   ├── index.tsx
+│   ├── columns.tsx
+│   ├── filters.tsx
+│   ├── floats.tsx
+│   └── request.ts
+└── components/
+    └── SalesFormFloat.tsx
+```
+
+**config/index.tsx** 汇总导出：
+
+```tsx
+export { columns } from './columns';
+export { filters } from './filters';
+export { floats } from './floats';
+export { request } from './request';
+```
+
+**index.tsx** 组装：
+
+```tsx
+import { ListPage } from 'listpage-next';
+import { columns, filters, floats, request } from './config';
+
+export default function MemberListPage() {
+  return (
+    <ListPage
+      storageKey="LISTPAGE_MEMBER"
+      request={request}
+      header={{ title: '会员列表' }}
+      filter={{ options: filters }}
+      table={{ columns, tableProps: { rowKey: 'id' } }}
+      floats={floats}
+    />
+  );
+}
+```

package/templates/backend-template/.env.example

@@ -0,0 +1,7 @@
+DATABASE_URL=""
+DB_HOST=""
+DB_PORT=3306
+DB_USER="root"
+DB_PASSWORD=""
+DB_NAME=""
+DB_CONNECTION_LIMIT=20

package/templates/backend-template/package.json.tmpl

@@ -16,14 +16,16 @@
     "@nestjs/common": "^11.0.1",
     "@nestjs/core": "^11.0.1",
     "@nestjs/platform-express": "^11.0.1",
-    "@prisma/client": "^6.0.0",
-    "prisma": "^6.0.0",
+     "prisma": "^7.0.0",
+    "@prisma/adapter-mariadb": "^7.0.0",
+    "@prisma/client": "^7.0.0",
+    "@prisma/internals": "^7.0.0",
     "@nestjs/config": "^4.0.0",
     "reflect-metadata": "^0.2.2",
     "class-transformer": "^0.5.1",
     "class-validator": "~0.14.2",
     "rxjs": "^7.8.1",
-    "listpage-next-nest": "~0.0.286"
+    "listpage-next-nest": "~0.0.291"
   },
   "devDependencies": {
     "@nestjs/schematics": "^11.0.0",

package/templates/backend-template/prisma/schema.prisma

@@ -3,8 +3,7 @@ generator client {
 }
 
 datasource db {
-    provider = "sqlite"
-    url      = "file:./dev.db"
+    provider = "mysql"
 }
 
 model User {

package/templates/backend-template/prisma.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'prisma/config';
+import 'dotenv/config';
+
+export default defineConfig({
+  schema: 'prisma/schema.prisma',
+  datasource: {
+    url: process.env.DATABASE_URL!,
+  },
+});

package/templates/backend-template/src/modules/app.module.ts

@@ -1,7 +1,13 @@
 import { Module } from '@nestjs/common';
 import { PrismaModule } from './prisma/prisma.module';
+import { ConfigModule } from '@nestjs/config';
 
 @Module({
-  imports: [PrismaModule],
+  imports: [
+    ConfigModule.forRoot({
+      isGlobal: true,
+    }),
+    PrismaModule,
+  ],
 })
 export class AppModule {}

package/templates/backend-template/src/modules/prisma/prisma.service.ts

@@ -1,8 +1,25 @@
-import { Injectable, OnModuleInit } from '@nestjs/common';
+import { Injectable, OnModuleInit, OnModuleDestroy } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
 import { PrismaClient } from '@prisma/client';
+import { PrismaMariaDb } from '@prisma/adapter-mariadb';
 
 @Injectable()
-export class PrismaService extends PrismaClient implements OnModuleInit {
+export class PrismaService
+  extends PrismaClient
+  implements OnModuleInit, OnModuleDestroy
+{
+  constructor(configService: ConfigService) {
+    const adapter = new PrismaMariaDb({
+      host: configService.get<string>('DB_HOST'),
+      port: Number(configService.get<number>('DB_PORT')),
+      user: configService.get<string>('DB_USER'),
+      password: configService.get<string>('DB_PASSWORD'),
+      database: configService.get<string>('DB_NAME'),
+      connectionLimit: Number(configService.get<number>('DB_CONNECTION_LIMIT')),
+    });
+    super({ adapter });
+  }
+
   async onModuleInit() {
     await this.$connect();
   }

package/templates/frontend-template/package.json.tmpl

@@ -12,7 +12,7 @@
   "dependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "listpage-next": "~0.0.286",
+    "listpage-next": "~0.0.291",
     "react-router-dom": ">=6.0.0",
     "@ant-design/v5-patch-for-react-19": "~1.0.3",
     "ahooks": "^3.9.5",
@@ -23,6 +23,8 @@
     "styled-components": "^6.1.19",
     "mobx": "~6.15.0",
     "@ant-design/icons": "~6.0.2",
+    "listpage-components": "~0.0.291",
+    "lucide-react": "~0.575.0"
     "mobx-react-lite": "~4.1.1"
   },
   "devDependencies": {

package/templates/frontend-template/src/App.tsx.tmpl

@@ -1,17 +1,68 @@
-import { App } from 'listpage-next/features/ReactApp';
+import React from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { ConfigProvider } from 'antd';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
 import { menus } from './router/menus';
-
+import { MainLayout } from './layouts/MainLayout';
 import './App.css';
 
+import 'listpage-components/ui.css';
+
+dayjs.locale('zh-cn');
+
+const RequireAuth = ({ children }: { children: React.ReactElement }) => {
+  const token = localStorage.getItem('token');
+  if (!token) {
+    return <Navigate to="/login" replace />;
+  }
+  return children;
+};
+
 export default () => {
   return (
-    <App
-      basename="/__APP_NAME__"
-      icon={<span>Logo</span>}
-      title="Next Page"
-      menus={menus}
-      hasAuth={() => true}
-      loginElement={<div>登录页</div>}
-    />
+    <ConfigProvider
+      theme={{
+        token: {
+          colorPrimary: '#00A67E', // Medical Green
+          borderRadius: 4,
+          controlHeight: 28,
+        },
+        components: {
+          Switch: {
+            trackHeightSM: 16,
+            handleSizeSM: 12,
+            trackPadding: 2,
+            trackMinWidthSM: 28,
+          },
+        },
+      }}
+    >
+      <BrowserRouter basename="/__APP_NAME__">
+        <Routes>
+          <Route
+            path="/"
+            element={
+              <RequireAuth>
+                <MainLayout />
+              </RequireAuth>
+            }
+          >
+            <Route
+              index
+              element={<Navigate to={`/${menus[0].key}`} replace />}
+            />
+            {menus.map((menu) => (
+              <Route
+                key={menu.key}
+                path={`${menu.key}/*`}
+                element={menu.element}
+              />
+            ))}
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </ConfigProvider>
   );
 };
+

package/templates/frontend-template/src/layouts/MainLayout.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useLocation, useNavigate, Outlet, matchPath } from 'react-router-dom';
+import { Activity } from 'lucide-react';
+import { RouterAdminLayout } from 'listpage-components';
+
+import { menus } from '../router/menus';
+
+export const MainLayout: React.FC = () => {
+  return (
+    <div className="h-screen overflow-hidden">
+      <RouterAdminLayout
+        title="你的应用标题"
+        logo={<Activity />}
+        collapsedWidth={70}
+        menus={menus}
+        routerAdapter={{
+          useLocation,
+          useNavigate,
+          matchPath: (pattern, pathname) => {
+            const result = matchPath({ path: pattern, end: false }, pathname);
+            if (!result) return null;
+            return {
+              params: result.params as any,
+              pathname: result.pathname,
+              pattern,
+            };
+          },
+        }}
+      >
+        <Outlet />
+      </RouterAdminLayout>
+    </div>
+  );
+};

package/templates/frontend-template/src/router/menus.tsx

@@ -1,14 +1,9 @@
-import type { MenuItem } from 'listpage-next';
-
-export const menus: MenuItem[] = [
+export const menus: any[] = [
   {
     key: 'menu1',
+    path: 'menu1',
     label: '菜单一',
-    element: <div>菜单一的内容</div>
+    icon: <span>📈</span>,
+    element: <div>菜单1</div>,
   },
-  {
-    key: 'menu2',
-    label: '菜单二',
-    element: <div>菜单二的内容</div>
-  },
-];
+];

package/templates/package-app-template/package.json

@@ -9,7 +9,7 @@
     "publish": "ts-node src/publish.ts"
   },
   "dependencies": {
-    "listpage-next-deploy": "0.0.286"
+    "listpage-next-deploy": "0.0.291"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",

package/templates/rush-template/docs/ListPage-AI/347/224/237/346/210/220/350/247/204/350/214/203.md

@@ -174,6 +174,8 @@ import {
   type ListPageTableColumn,
   type PaginationData,
   type ListPageContext,
+  type ListPageFloatProps,
+  type FloatComponentProps,
 } from "listpage-next";
 import { Button, Input, Select, Space } from "antd";
 
@@ -204,6 +206,45 @@ const filters: FilterFormOption[] = [
 const columns: ListPageTableColumn<User>[] = [
   { title: "姓名", dataIndex: "name", key: "name", component: "text" },
   { title: "地址", dataIndex: "address", key: "address", ellipsis: true },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 160,
+    fixed: 'right',
+    component: ({ ctx, record }) => (
+      <Space>
+        <Button type="link" size="small" onClick={() => ctx.showFloat('edit', record, true)}>
+          编辑
+        </Button>
+        <Popconfirm
+          title="确定要删除吗？"
+          onConfirm={async () => {
+            await api.sales.remove(record.id);
+            message.success('删除成功');
+            ctx.refreshTable();
+          }}
+        >
+          <Button type="link" size="small" danger>
+            删除
+          </Button>
+        </Popconfirm>
+      </Space>
+    ),
+  },
+];
+
+const EditorModal = (props: FloatComponentProps<User>) => {
+  return <Modal></Modal>
+}
+
+const EditorDrawer = (props: FloatComponentProps<User>) => {
+  return <Drawer></Drawer>
+}
+
+
+const floats: ListPageFloatProps[] = [
+  { key: 'edit', render: EditorModal },
+  { key: 'create', render: EditorDrawer },
 ];
 
 const request = async (