{"_id":"@botply-kit/detail","_rev":"3-72e84f81ffec0f9b6ce20c7f944b8cc2","name":"@botply-kit/detail","dist-tags":{"latest":"3.1.4"},"versions":{"3.1.0":{"name":"@botply-kit/detail","version":"3.1.0","keywords":["botply","detail"],"author":{"name":"Iafine","email":"iafineden@gmail.com"},"license":"MIT","_id":"@botply-kit/detail@3.1.0","maintainers":[{"name":"iafine","email":"iafineden@gmail.com"}],"homepage":"https://www.botply-kit.com/","bugs":{"url":"https://github.com/botply/botply-kit/issues"},"dist":{"shasum":"6bdfba92bd0f3379d3f7918f3cc683f430ba2bb6","tarball":"https://registry.npmjs.org/@botply-kit/detail/-/detail-3.1.0.tgz","fileCount":19,"integrity":"sha512-DX3FCeDWFf02+3Z1aKSoBQpC/tkwcTAgT3gU7wiWJv+CS66qY0cXQnDxbLZ/zYuN8SKxOn+ogdvADmFo4Zb3oQ==","signatures":[{"sig":"MEYCIQCE9P6p0D+B+zMI2AHBA7eDfSZNVeFcvunXBaosjK6FHAIhAOeu5mgOtu8IoIf1dDBE903Mn3VPX5MqhhZUIxXw6YSy","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35161},"main":"dist/cjs/index.cjs","type":"module","_from":"file:botply-kit-detail-3.1.0.tgz","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.cjs"}},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast --watch","build":"tsx ../../scripts/build/main.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsx ../../scripts/build/main.ts"},"_npmUser":{"name":"iafine","email":"iafineden@gmail.com"},"_resolved":"/private/var/folders/s5/k7bxfqvj5118nhzh6vnxgnt80000gn/T/159ba2771b411981087f4409ec13b43d/botply-kit-detail-3.1.0.tgz","storybook":{"url":"https://storybook.botply-kit.com","title":"Botply Kit"},"_integrity":"sha512-DX3FCeDWFf02+3Z1aKSoBQpC/tkwcTAgT3gU7wiWJv+CS66qY0cXQnDxbLZ/zYuN8SKxOn+ogdvADmFo4Zb3oQ==","repository":{"url":"git+https://github.com/botply/botply-kit.git","type":"git","directory":"packages/detail"},"_npmVersion":"11.5.2","description":"A detail package for botply","directories":{},"sideEffects":false,"_nodeVersion":"22.16.0","dependencies":{"@botply-kit/ui":"3.1.0","@botply-kit/utils":"3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=19","react-dom":">=19","lucide-react":">=0.50.0"},"_npmOperationalInternal":{"tmp":"tmp/detail_3.1.0_1754920305891_0.5243983708707862","host":"s3://npm-registry-packages-npm-production"}},"3.1.2":{"name":"@botply-kit/detail","version":"3.1.2","keywords":["botply","detail"],"author":{"name":"Iafine","email":"iafineden@gmail.com"},"license":"MIT","_id":"@botply-kit/detail@3.1.2","maintainers":[{"name":"iafine","email":"iafineden@gmail.com"}],"homepage":"https://www.botply-kit.com/","bugs":{"url":"https://github.com/botply/botply-kit/issues"},"dist":{"shasum":"bb30149a82bb66e33bbd470eada3588ed8c86ac2","tarball":"https://registry.npmjs.org/@botply-kit/detail/-/detail-3.1.2.tgz","fileCount":19,"integrity":"sha512-mH6I2MBrGg9t+l4JFuOu6BgbvNx1lE/+WN59rH2nfE0CN1UDWFhmuMQ1WW00m0eMeoAqDpefi9aE9hB8ErXq1A==","signatures":[{"sig":"MEUCIQDkrPGApA9VQpbYFPfUk01mhTpRMdQqTss/PooPOQayCAIgdFYrN6EX0vb+EiIrrH6c1rwgg2EPs4Wo+/g45Z3Jz9U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35161},"main":"dist/cjs/index.cjs","type":"module","_from":"file:botply-kit-detail-3.1.2.tgz","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.cjs"}},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast --watch","build":"tsx ../../scripts/build/main.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsx ../../scripts/build/main.ts"},"_npmUser":{"name":"iafine","email":"iafineden@gmail.com"},"_resolved":"/private/var/folders/s5/k7bxfqvj5118nhzh6vnxgnt80000gn/T/3e4d4ea70e9a33380ba81b340bf60db3/botply-kit-detail-3.1.2.tgz","storybook":{"url":"https://storybook.botply-kit.com","title":"Botply Kit"},"_integrity":"sha512-mH6I2MBrGg9t+l4JFuOu6BgbvNx1lE/+WN59rH2nfE0CN1UDWFhmuMQ1WW00m0eMeoAqDpefi9aE9hB8ErXq1A==","repository":{"url":"git+https://github.com/botply/botply-kit.git","type":"git","directory":"packages/detail"},"_npmVersion":"11.5.2","description":"A detail package for botply","directories":{},"sideEffects":false,"_nodeVersion":"22.16.0","dependencies":{"@botply-kit/ui":"3.1.0","@botply-kit/utils":"3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=19","react-dom":">=19","lucide-react":">=0.50.0"},"_npmOperationalInternal":{"tmp":"tmp/detail_3.1.2_1754920731381_0.7597545407052753","host":"s3://npm-registry-packages-npm-production"}},"3.1.4":{"name":"@botply-kit/detail","version":"3.1.4","description":"A detail package for botply","type":"module","main":"dist/cjs/index.cjs","module":"dist/esm/index.js","types":"dist/types/index.d.ts","sideEffects":false,"publishConfig":{"access":"public"},"author":{"name":"Iafine","email":"iafineden@gmail.com"},"license":"MIT","homepage":"https://www.botply-kit.com/","repository":{"type":"git","url":"git+https://github.com/botply/botply-kit.git","directory":"packages/detail"},"keywords":["botply","detail"],"storybook":{"title":"Botply Kit","url":"https://storybook.botply-kit.com"},"dependencies":{"@botply-kit/ui":"3.1.4","@botply-kit/utils":"3.1.0"},"peerDependencies":{"react":">=19","react-dom":">=19","lucide-react":">=0.50.0"},"exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.cjs"}},"./package.json":"./package.json"},"scripts":{"build:fast":"tsx ../../scripts/build/main.ts","build":"tsx ../../scripts/build/main.ts --dts","dev":"pnpm build:fast --watch","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit"},"_id":"@botply-kit/detail@3.1.4","bugs":{"url":"https://github.com/botply/botply-kit/issues"},"_integrity":"sha512-VgVjLaTgIXhmMJDyqJP/WAiuoAND81g8XnHtPOHpqk2dLwM3rFoUKq4irsLpjnOpbkiiyOtr19NOCTxwNwAYEw==","_resolved":"/tmp/72a3eac4c40b6fa21d1b3de562d248a8/botply-kit-detail-3.1.4.tgz","_from":"file:botply-kit-detail-3.1.4.tgz","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-VgVjLaTgIXhmMJDyqJP/WAiuoAND81g8XnHtPOHpqk2dLwM3rFoUKq4irsLpjnOpbkiiyOtr19NOCTxwNwAYEw==","shasum":"9f41b2d95252502e021533ffaac96257c7fdb97d","tarball":"https://registry.npmjs.org/@botply-kit/detail/-/detail-3.1.4.tgz","fileCount":19,"unpackedSize":35161,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDhJfFsBy6S/OOF1qFCmi0TDjWv8JLPWMWL+HirjKQF3gIhAOlMz5O+C24BxOEFAK94iK88ZLGGPzS6Xf4P9cehpsy+"}]},"_npmUser":{"name":"iafine","email":"iafineden@gmail.com"},"directories":{},"maintainers":[{"name":"iafine","email":"iafineden@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/detail_3.1.4_1756295990830_0.26614175309902954"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-11T13:51:45.716Z","modified":"2025-08-27T11:59:51.236Z","3.1.0":"2025-08-11T13:51:46.044Z","3.1.2":"2025-08-11T13:58:51.543Z","3.1.4":"2025-08-27T11:59:51.011Z"},"bugs":{"url":"https://github.com/botply/botply-kit/issues"},"author":{"name":"Iafine","email":"iafineden@gmail.com"},"license":"MIT","homepage":"https://www.botply-kit.com/","keywords":["botply","detail"],"repository":{"type":"git","url":"git+https://github.com/botply/botply-kit.git","directory":"packages/detail"},"description":"A detail package for botply","maintainers":[{"name":"iafine","email":"iafineden@gmail.com"}],"readme":"# 通用详情组件\n\n一套通用的详情页面组件，提供统一的布局和样式，方便在不同页面复用。\n\n## 组件列表\n\n### 主容器组件\n\n- `DetailLayout` - 详情页面完整布局（包含面包屑导航和页面标题）\n- `Detail` - 详情内容容器\n- `DetailSkeleton` - 加载状态骨架屏\n- `DetailError` - 错误状态组件\n\n### 详情项组件\n\n- `StringItem` - 文本显示项\n- `LinkItem` - 链接显示项\n- `DateItem` - 日期显示项\n- `TagItem` - 标签显示项\n- `TextareaItem` - 多行文本显示项\n- `ActionItem` - 操作按钮项\n- `TableItem` - 表格显示项\n- `CustomItem` - 自定义内容项\n\n## 使用示例\n\n### 完整页面布局\n\n```tsx\nimport {\n  ActionItem,\n  DateItem,\n  Detail,\n  DetailError,\n  DetailLayout,\n  DetailSkeleton,\n  LinkItem,\n  StringItem,\n  TableItem,\n  TagItem,\n  TextareaItem,\n} from \"@/components/detail\"\n\nfunction UserDetail() {\n  const { data, isPending, isError, refetch } = useUserDetail(id)\n  const navigate = useNavigate()\n  const router = useRouter()\n  const canGoBack = useCanGoBack()\n\n  const goUserList = () => {\n    if (canGoBack) {\n      router.history.back()\n    } else {\n      router.navigate({ to: \"/users\" })\n    }\n  }\n\n  const breadcrumbs = [\n    {\n      label: \"用户列表\",\n      onClick: goUserList,\n    },\n    {\n      label: \"用户详情\",\n    },\n  ]\n\n  if (isPending) {\n    return (\n      <DetailLayout\n        title=\"用户详情\"\n        description=\"查看用户的详细信息\"\n        breadcrumbs={breadcrumbs}\n      >\n        <DetailSkeleton itemCount={6} />\n      </DetailLayout>\n    )\n  }\n\n  if (isError) {\n    return (\n      <DetailLayout\n        title=\"用户详情\"\n        description=\"查看用户的详细信息\"\n        breadcrumbs={breadcrumbs}\n      >\n        <DetailError onRetry={() => refetch()} />\n      </DetailLayout>\n    )\n  }\n\n  return (\n    <DetailLayout\n      title=\"用户详情\"\n      description=\"查看用户的详细信息\"\n      breadcrumbs={breadcrumbs}\n    >\n      <Detail title=\"基本信息\">\n        <StringItem label=\"用户名\" value={data.username} />\n        <StringItem label=\"邮箱\" value={data.email} />\n        <LinkItem label=\"个人网站\" value={data.website} />\n        <DateItem label=\"注册时间\" value={data.createdAt} />\n        <TagItem label=\"标签\" value={data.tags} />\n        <TextareaItem label=\"个人简介\" value={data.bio} />\n        <ActionItem\n          label=\"操作\"\n          actions={[\n            {\n              label: \"编辑\",\n              variant: \"default\",\n              onClick: () => navigate(\"/users/edit\"),\n            },\n            {\n              label: \"删除\",\n              variant: \"destructive\",\n              onClick: () => handleDelete(),\n            },\n          ]}\n        />\n      </Detail>\n    </DetailLayout>\n  )\n}\n```\n\n### 基本用法（不含页面布局）\n\n```tsx\n<Detail title=\"用户详情\" description=\"查看用户的详细信息\">\n  <StringItem label=\"用户名\" value={data.username} />\n  <StringItem label=\"邮箱\" value={data.email} />\n  <LinkItem label=\"个人网站\" value={data.website} />\n  <DateItem label=\"注册时间\" value={data.createdAt} />\n  <TagItem label=\"标签\" value={data.tags} />\n  <TextareaItem label=\"个人简介\" value={data.bio} />\n</Detail>\n```\n\n### 自定义内容\n\n```tsx\n<DetailLayout title=\"产品详情\" breadcrumbs={breadcrumbs}>\n  <Detail title=\"产品信息\">\n    <StringItem label=\"产品名称\" value={data.name} />\n    <CustomItem label=\"价格\">\n      <div className=\"flex items-center gap-2\">\n        <span className=\"text-2xl font-bold text-green-600\">¥{data.price}</span>\n        <Badge variant=\"secondary\">限时优惠</Badge>\n      </div>\n    </CustomItem>\n    <TableItem label=\"规格参数\" component={<SpecTable />} />\n  </Detail>\n</DetailLayout>\n```\n\n## 组件属性\n\n### DetailLayout\n\n| 属性        | 类型                 | 默认值 | 说明           |\n| ----------- | -------------------- | ------ | -------------- |\n| title       | string               | -      | 页面标题       |\n| description | string               | -      | 页面描述       |\n| breadcrumbs | BreadcrumbItemType[] | -      | 面包屑导航配置 |\n| children    | ReactNode            | -      | 子组件         |\n\n### BreadcrumbItemType\n\n| 属性    | 类型       | 默认值 | 说明             |\n| ------- | ---------- | ------ | ---------------- |\n| label   | string     | -      | 面包屑文本       |\n| href    | string     | -      | 链接地址（可选） |\n| onClick | () => void | -      | 点击事件（可选） |\n\n### Detail\n\n| 属性        | 类型      | 默认值 | 说明         |\n| ----------- | --------- | ------ | ------------ |\n| title       | string    | -      | 详情页面标题 |\n| description | string    | -      | 详情页面描述 |\n| children    | ReactNode | -      | 子组件       |\n| className   | string    | -      | 自定义样式类 |\n\n### DetailSkeleton\n\n| 属性      | 类型   | 默认值     | 说明           |\n| --------- | ------ | ---------- | -------------- |\n| title     | string | \"详情信息\" | 骨架屏标题     |\n| itemCount | number | 6          | 骨架屏项目数量 |\n\n### DetailError\n\n| 属性    | 类型       | 默认值                               | 说明         |\n| ------- | ---------- | ------------------------------------ | ------------ |\n| title   | string     | \"加载失败\"                           | 错误标题     |\n| message | string     | \"获取详情信息时发生错误，请稍后重试\" | 错误消息     |\n| onRetry | () => void | -                                    | 重试回调函数 |\n\n### StringItem\n\n| 属性        | 类型           | 默认值 | 说明       |\n| ----------- | -------------- | ------ | ---------- |\n| label       | string         | -      | 字段标签   |\n| value       | string \\| null | -      | 显示值     |\n| placeholder | string         | \"-\"    | 空值占位符 |\n\n### LinkItem\n\n| 属性        | 类型           | 默认值 | 说明       |\n| ----------- | -------------- | ------ | ---------- |\n| label       | string         | -      | 字段标签   |\n| value       | string \\| null | -      | 链接地址   |\n| placeholder | string         | \"-\"    | 空值占位符 |\n\n### DateItem\n\n| 属性        | 类型                   | 默认值                | 说明       |\n| ----------- | ---------------------- | --------------------- | ---------- |\n| label       | string                 | -                     | 字段标签   |\n| value       | string \\| Date \\| null | -                     | 日期值     |\n| placeholder | string                 | \"-\"                   | 空值占位符 |\n| formatStr   | string                 | \"yyyy-MM-dd HH:mm:ss\" | 日期格式   |\n\n### TagItem\n\n| 属性        | 类型             | 默认值   | 说明       |\n| ----------- | ---------------- | -------- | ---------- |\n| label       | string           | -        | 字段标签   |\n| value       | string[] \\| null | -        | 标签数组   |\n| placeholder | string           | \"无标签\" | 空值占位符 |\n\n### ActionItem\n\n| 属性    | 类型               | 默认值 | 说明         |\n| ------- | ------------------ | ------ | ------------ |\n| label   | string             | -      | 字段标签     |\n| actions | ActionItemAction[] | -      | 操作按钮配置 |\n\n### ActionItemAction\n\n| 属性     | 类型          | 默认值    | 说明     |\n| -------- | ------------- | --------- | -------- |\n| label    | string        | -         | 按钮文本 |\n| onClick  | () => void    | -         | 点击事件 |\n| variant  | ButtonVariant | \"outline\" | 按钮样式 |\n| disabled | boolean       | false     | 是否禁用 |\n\n## 设计特点\n\n1. **完整布局** - DetailLayout 提供与创建页面一致的布局结构\n2. **面包屑导航** - 支持灵活的面包屑配置，提升用户体验\n3. **统一风格** - 与表单页面保持一致的卡片设计风格\n4. **响应式设计** - 采用网格布局，标签和内容分离\n5. **类型安全** - 完整的 TypeScript 类型定义\n6. **状态处理** - 内置加载和错误状态，提升用户体验\n7. **易于复用** - 简洁的 API 设计，可在其他页面快速使用\n\n## 最佳实践\n\n1. **使用 DetailLayout** - 对于完整的详情页面，推荐使用 DetailLayout 组件\n2. **面包屑导航** - 配置合理的面包屑导航，提升用户体验\n3. **状态处理** - 始终处理加载和错误状态\n4. **操作按钮** - 合理配置操作按钮的样式和权限\n5. **内容分组** - 使用多个 Detail 组件对内容进行逻辑分组\n","readmeFilename":"README.md"}