listpage-next 0.0.182 → 0.0.187

package/README.md

@@ -1,453 +0,0 @@
-# Next Page Creator
-
-基于 Ant Design 的 React 组件库，专注于提供高质量的筛选表单组件。
-
-## 安装
-
-```bash
-npm install listpage-next
-# 或
-pnpm install listpage-next
-# 或
-yarn add listpage-next
-```
-
-## 快速开始
-
-```tsx
-import { FilterForm } from 'listpage-next';
-import { DatePicker, Select } from 'antd';
-
-const App = () => {
-  const options = [
-    {
-      name: 'title',
-      label: '标题',
-      component: 'input',
-    },
-    {
-      name: 'type',
-      label: '类型',
-      component: <Select />,
-    },
-  ];
-
-  const handleSubmit = (values) => {
-    console.log('表单数据:', values);
-  };
-
-  return <FilterForm options={options} onSubmit={handleSubmit} />;
-};
-```
-
-## 组件列表
-
-### FilterForm
-
-FilterForm 是一个基于 Ant Design Form 的筛选表单组件，支持灵活的表单项配置和网格布局。
-
-#### 组件属性说明
-
-##### FilterFormProps
-
-| 属性名 | 类型 | 默认值 | 必填 | 描述 |
-|--------|------|--------|------|------|
-| options | `FilterFormOption[]` | - | ✅ | 表单项配置数组，定义表单的结构和行为 |
-| initialValues | `FormValue` | `{}` | ❌ | 表单初始值，支持泛型类型约束 |
-| onSubmit | `(values?: FormValue) => void` | - | ❌ | 表单提交回调函数，参数为当前表单值 |
-| onReset | `() => void` | - | ❌ | 表单重置回调函数 |
-
-##### FilterFormOption
-
-| 属性名 | 类型 | 默认值 | 必填 | 描述 |
-|--------|------|--------|------|------|
-| name | `string` | - | ✅ | 表单项字段名，用于数据收集和验证 |
-| label | `ReactNode` | - | ❌ | 表单项标签，支持文本或 React 元素 |
-| component | `ComponentType`| ReactElement` | `'input'` | ❌ | 表单控件，支持字符串类型或 React 组件 |
-| colSpan | `number` | `2` | ❌ | 网格列跨度（1-12），控制表单项宽度 |
-| formItemProps | `Omit<FormItemProps, 'children'>` | - | ❌ | Ant Design Form.Item 的属性配置 |
-
-##### ComponentType
-
-支持的字符串类型组件：
-
-- `'input'`: 输入框组件（默认）
-- `'select'`: 选择器组件
-
-#### 使用示例
-
-##### 基础用法
-
-```tsx
-import React from 'react';
-import { FilterForm } from 'listpage-next';
-
-const BasicExample = () => {
-  const options = [
-    {
-      name: 'username',
-      label: '用户名',
-      component: 'input',
-    },
-    {
-      name: 'status',
-      label: '状态',
-      component: 'select',
-    },
-  ];
-
-  const handleSubmit = (values) => {
-    console.log('提交数据:', values);
-    // 输出: { username: '输入的用户名', status: '选择的状态' }
-  };
-
-  const handleReset = () => {
-    console.log('表单已重置');
-  };
-
-  return (
-    <FilterForm 
-      options={options} 
-      onSubmit={handleSubmit}
-      onReset={handleReset}
-    />
-  );
-};
-```
-
-##### 使用 Ant Design 组件
-
-```tsx
-import React from 'react';
-import { FilterForm } from 'listpage-next';
-import { DatePicker, Select, Input } from 'antd';
-
-const { RangePicker } = DatePicker;
-const { Option } = Select;
-
-const AdvancedExample = () => {
-  const options = [
-    {
-      name: 'keyword',
-      label: '关键词',
-      component: <Input placeholder="请输入关键词" />,
-      colSpan: 3, // 占用3列宽度
-    },
-    {
-      name: 'category',
-      label: '分类',
-      component: (
-        <Select placeholder="请选择分类" allowClear>
-          <Option value="tech">技术</Option>
-          <Option value="business">商业</Option>
-          <Option value="design">设计</Option>
-        </Select>
-      ),
-      colSpan: 2,
-    },
-    {
-      name: 'dateRange',
-      label: '时间范围',
-      component: <RangePicker />,
-      colSpan: 4, // 日期范围选择器通常需要更多空间
-    },
-    {
-      name: 'priority',
-      label: '优先级',
-      component: (
-        <Select placeholder="选择优先级">
-          <Option value="high">高</Option>
-          <Option value="medium">中</Option>
-          <Option value="low">低</Option>
-        </Select>
-      ),
-      colSpan: 2,
-    },
-  ];
-
-  const handleSubmit = (values) => {
-    console.log('筛选条件:', values);
-    // 处理表单数据，如发送 API 请求
-  };
-
-  return <FilterForm options={options} onSubmit={handleSubmit} />;
-};
-```
-
-##### 带初始值和表单验证
-
-```tsx
-import React from 'react';
-import { FilterForm } from 'listpage-next';
-import { Input, Select } from 'antd';
-
-interface FormData {
-  title: string;
-  type: 'article' | 'video' | 'image';
-  tags: string[];
-}
-
-const ValidationExample = () => {
-  const initialValues: FormData = {
-    title: '默认标题',
-    type: 'article',
-    tags: ['react'],
-  };
-
-  const options = [
-    {
-      name: 'title',
-      label: '标题',
-      component: <Input placeholder="请输入标题" />,
-      formItemProps: {
-        rules: [
-          { required: true, message: '请输入标题' },
-          { min: 2, message: '标题至少2个字符' },
-        ],
-      },
-      colSpan: 4,
-    },
-    {
-      name: 'type',
-      label: '内容类型',
-      component: (
-        <Select>
-          <Select.Option value="article">文章</Select.Option>
-          <Select.Option value="video">视频</Select.Option>
-          <Select.Option value="image">图片</Select.Option>
-        </Select>
-      ),
-      formItemProps: {
-        rules: [{ required: true, message: '请选择内容类型' }],
-      },
-      colSpan: 2,
-    },
-    {
-      name: 'tags',
-      label: '标签',
-      component: (
-        <Select mode="multiple" placeholder="选择标签">
-          <Select.Option value="react">React</Select.Option>
-          <Select.Option value="vue">Vue</Select.Option>
-          <Select.Option value="angular">Angular</Select.Option>
-        </Select>
-      ),
-      colSpan: 3,
-    },
-  ];
-
-  const handleSubmit = (values: FormData) => {
-    console.log('验证通过，提交数据:', values);
-  };
-
-  return (
-    <FilterForm<FormData>
-      options={options}
-      initialValues={initialValues}
-      onSubmit={handleSubmit}
-    />
-  );
-};
-```
-
-##### 响应式布局示例
-
-```tsx
-import React from 'react';
-import { FilterForm } from 'listpage-next';
-import { Input, Select, DatePicker } from 'antd';
-
-const ResponsiveExample = () => {
-  const options = [
-    {
-      name: 'search',
-      label: '搜索',
-      component: <Input.Search placeholder="输入搜索关键词" />,
-      colSpan: 6, // 在12列网格中占一半宽度
-    },
-    {
-      name: 'status',
-      label: '状态',
-      component: (
-        <Select placeholder="选择状态">
-          <Select.Option value="active">激活</Select.Option>
-          <Select.Option value="inactive">未激活</Select.Option>
-        </Select>
-      ),
-      colSpan: 3, // 占1/4宽度
-    },
-    {
-      name: 'date',
-      label: '创建日期',
-      component: <DatePicker />,
-      colSpan: 3, // 占1/4宽度
-    },
-    {
-      name: 'region',
-      label: '地区',
-      component: (
-        <Select placeholder="选择地区" allowClear>
-          <Select.Option value="north">北方</Select.Option>
-          <Select.Option value="south">南方</Select.Option>
-        </Select>
-      ),
-      colSpan: 4, // 占1/3宽度
-    },
-    {
-      name: 'department',
-      label: '部门',
-      component: <Select placeholder="选择部门" />,
-      colSpan: 4, // 占1/3宽度
-    },
-    {
-      name: 'level',
-      label: '级别',
-      component: <Select placeholder="选择级别" />,
-      colSpan: 4, // 占1/3宽度
-    },
-  ];
-
-  return <FilterForm options={options} onSubmit={console.log} />;
-};
-```
-
-#### 注意事项
-
-##### 特殊行为和限制
-
-1. **网格布局系统**: FilterForm 使用 12 列网格系统，`colSpan` 属性值应在 1-12 之间
-2. **表单验证**: 组件内部使用 Ant Design Form，支持完整的表单验证功能
-3. **组件类型**: `component` 属性支持字符串类型（'input'、'select'）和 React 元素
-4. **数据收集**: 表单数据通过 `name` 属性收集，确保每个表单项的 `name` 唯一
-
-##### 最佳实践建议
-
-1. **合理使用 colSpan**: 
-   - 短文本输入框建议使用 `colSpan: 2-3`
-   - 日期范围选择器建议使用 `colSpan: 4-6`
-   - 搜索框可以使用更大的 `colSpan: 6-8`
-
-2. **组件选择策略**:
-   ```tsx
-   // ✅ 推荐：使用具体的 Ant Design 组件
-   {
-     name: 'category',
-     component: <Select placeholder="请选择分类" allowClear />
-   }
-   
-   // ✅ 可接受：使用字符串类型（适用于简单场景）
-   {
-     name: 'keyword',
-     component: 'input'
-   }
-   ```
-
-3. **TypeScript 类型约束**:
-   ```tsx
-   // ✅ 推荐：使用泛型约束表单数据类型
-   interface SearchForm {
-     keyword: string;
-     status: 'active' | 'inactive';
-   }
-   
-   <FilterForm<SearchForm>
-     options={options}
-     onSubmit={(values: SearchForm) => {
-       // values 具有完整的类型提示
-     }}
-   />
-   ```
-
-4. **表单验证配置**:
-   ```tsx
-   // ✅ 推荐：在 formItemProps 中配置验证规则
-   {
-     name: 'email',
-     label: '邮箱',
-     component: <Input type="email" />,
-     formItemProps: {
-       rules: [
-         { required: true, message: '请输入邮箱' },
-         { type: 'email', message: '请输入有效的邮箱地址' }
-       ]
-     }
-   }
-   ```
-
-##### 常见问题及解决方案
-
-1. **Q: 表单项不显示或布局异常**
-   ```tsx
-   // ❌ 问题：colSpan 超出范围
-   { name: 'field', colSpan: 15 } // 超出12列限制
-   
-   // ✅ 解决：使用合理的 colSpan 值
-   { name: 'field', colSpan: 6 } // 占一半宽度
-   ```
-
-2. **Q: 自定义组件数据不更新**
-   ```tsx
-   // ❌ 问题：自定义组件未正确处理 value 和 onChange
-   const CustomComponent = () => <input />; // 缺少受控属性
-   
-   // ✅ 解决：确保组件支持受控模式
-   const CustomComponent = ({ value, onChange }) => (
-     <input value={value} onChange={(e) => onChange(e.target.value)} />
-   );
-   ```
-
-3. **Q: 表单重置后初始值丢失**
-   ```tsx
-   // ✅ 解决：确保 initialValues 正确设置
-   <FilterForm
-     initialValues={{ status: 'active' }} // 重置时会恢复到此值
-     options={options}
-   />
-   ```
-
-4. **Q: 表单验证不生效**
-   ```tsx
-   // ❌ 问题：验证规则配置位置错误
-   {
-     name: 'field',
-     rules: [{ required: true }] // 错误位置
-   }
-   
-   // ✅ 解决：在 formItemProps 中配置
-   {
-     name: 'field',
-     formItemProps: {
-       rules: [{ required: true, message: '此字段为必填项' }]
-     }
-   }
-   ```
-
-## 技术栈
-
-- **React**: ^19.1.1
-- **Ant Design**: ^5.27.3
-- **TypeScript**: ^5.9.2
-- **Styled Components**: ^6.1.19
-- **Lodash**: ^4.17.21
-- **ahooks**: ^3.9.5
-- **dayjs**: ^1.11.18
-
-## 开发
-
-```bash
-# 安装依赖
-pnpm install
-
-# 启动开发服务器
-pnpm dev
-
-# 构建
-pnpm build
-
-# 格式化代码
-pnpm format
-```
-
-## 许可证
-
-MIT

package/dist/components/PageLayout/components/PageLoading/index.js

@@ -1,15 +1,10 @@
 import styled_components from "styled-components";
 const PageLoading = styled_components.div`
   align-items: center;
-  bottom: 0;
   display: flex;
   height: 100%;
-  justify-content: center;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
   width: 100%;
+  justify-content: center;
   overflow: hidden;
 
   &::after {

package/dist/features/ChatClient/components/ChatPage/ChatPage.d.ts

@@ -3,9 +3,9 @@ import { BaseMessageInfo, ChatActionEvent, ChatRender, ChatRequest } from '../..
 export interface ChatPageProps<SessionData = any, MessageInfo extends BaseMessageInfo = any> {
     logo?: string;
     title?: string;
+    action: ChatActionEvent<SessionData>;
     children?: ReactNode;
     request: ChatRequest<SessionData, MessageInfo>;
     render: ChatRender<MessageInfo>;
-    action: ChatActionEvent<SessionData>;
 }
 export declare const ChatPage: (props: ChatPageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/components/ChatPage/Sider.d.ts

@@ -1,4 +1,5 @@
+import { ReactNode } from 'react';
 export interface SiderProps {
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 export declare const Sider: (props: SiderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/components/ChatPage/SimplifyChatPage.d.ts

@@ -1,14 +1,14 @@
-import { RefObject } from 'react';
+import { RefObject, CSSProperties } from 'react';
 import { BaseMessageInfo, ChatRender, ChatRequest } from '../../context';
 import { ChatInstance } from '../../context/useChatContext';
 import { ChatSenderProps } from '../ChatSender';
 export interface SimplifyChatPageProps<SessionData = any, MessageInfo extends BaseMessageInfo = any> {
     senderProps?: ChatSenderProps;
-    request: ChatRequest<SessionData, MessageInfo>;
-    render: ChatRender<MessageInfo>;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     initialMessages?: MessageInfo[];
     chatRef?: RefObject<ChatInstance>;
+    request: ChatRequest<SessionData, MessageInfo>;
+    render: ChatRender<MessageInfo>;
 }
 export declare const SimplifyChatPageComponent: <T = any>(props: SimplifyChatPageProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const SimplifyChatPage: <T = any>(props: SimplifyChatPageProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/components/ChatSender/index.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
+import { styled } from "styled-components";
 import { ChatInput } from "../../ui/index.js";
 import { useChatClientContext, useMessageContext } from "../../context/index.js";
-import { styled } from "styled-components";
 const ChatSender = (props)=>{
     const { isRequesting, sendMessage } = useMessageContext();
     const { bubbleListRef } = useChatClientContext();

package/dist/features/ChatClient/ui/ChatSplitter/index.js

@@ -6,7 +6,9 @@ const ChatSplitter = (props)=>{
     const defaultSize = size?.default || '70%';
     const maxSize = size?.max || '80%';
     const minSize = size?.min || '60%';
+    const isOnlyOneVisible = left.visible && !right.visible || !left.visible && right.visible;
     return /*#__PURE__*/ jsxs(StyledSplitter, {
+        onlyOne: isOnlyOneVisible,
         children: [
             left.visible ? /*#__PURE__*/ jsx(Splitter.Panel, {
                 defaultSize: defaultSize,
@@ -35,7 +37,9 @@ const ChatSplitter = (props)=>{
 const StyledSplitter = styled_components(Splitter)`
   height: 100%;
   background: rgb(240, 240, 240);
-
+  .ant-splitter-panel {
+    ${({ onlyOne })=>onlyOne ? 'flex-grow: 1 !important' : ''}
+  }
   .ant-splitter-bar-dragger::before {
     background: transparent !important;
   }

package/dist/features/ChatClient/ui/ConversationList/index.d.ts

@@ -1,11 +1,13 @@
 import { ItemType } from 'antd/es/menu/interface';
 import { InfiniteListProps, InfiniteListRef, RenderActions } from '../../../../components/InfiniteList';
-export interface ConverstionListProps<T = any> {
+export interface ConversationListProps<T = any> {
     rowKey: string;
     ref?: InfiniteListRef<T>;
     defaultActiveKey?: string;
     request: InfiniteListProps<T>['request'];
     menus?: (Omit<ItemType, 'onClick'> & {
+        key?: string;
+        label: string;
         onClick?: (item: T, index: number, actions: RenderActions<Record<string, any>>) => void;
     })[];
     onSelectConversation?: (data: T) => void;
@@ -17,5 +19,5 @@ type ItemData = {
     title: string;
     key: string;
 };
-export declare const ConversationList: <T extends ItemData = any>(props: ConverstionListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ConversationList: <T extends ItemData = any>(props: ConversationListProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/features/ChatClient/ui/EditorContent/editor.js

@@ -89,6 +89,14 @@ const editor_EditorContent = (props)=>{
 const EditorContentStyled = styled_components(EditorContent)`
   .ProseMirror {
     outline: none;
+    p.is-empty::before {
+      content: attr(data-placeholder);
+      color: #999;
+      opacity: 1;
+      pointer-events: none;
+      float: left;
+      height: 0;
+    }
     p {
       margin: 2px 0;
     }

package/dist/features/ChatClient/ui/EditorContent/index.d.ts

@@ -1,2 +1,3 @@
 export { EditorContent } from './editor';
 export type { EditorContentProps } from './editor';
+export type { Editor as EditorInstance } from '@tiptap/react';

package/dist/features/ListPage/context/context.js

@@ -4,13 +4,17 @@ import { ListPageStore } from "./store.js";
 const ListPageContext = /*#__PURE__*/ createContext({});
 const ListPageProvider = (props)=>{
     const { state, request, children, initialValues, storageKey, floats } = props;
-    const store = useMemo(()=>new ListPageStore({
+    const store = useMemo(()=>{
+        const store = new ListPageStore({
             state,
-            initialValues,
-            request,
             floats,
-            storageKey
-        }), []);
+            request,
+            storageKey,
+            initialValues
+        });
+        store.refreshTable();
+        return store;
+    }, []);
     return /*#__PURE__*/ jsx(ListPageContext.Provider, {
         value: store,
         children: children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage-next",
-  "version": "0.0.182",
+  "version": "0.0.187",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",