https://mediagpt.ai/_next/static/chunks/app/(app)/demos/page-1a565efb49b79254.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9304],{48562:(e,t,s)=>{Promise.resolve().then(s.bind(s,46524))},46524:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>g});var a=s(35858),r=s(1805),l=s(47226),d=s(8285);let n=e=>{let{count:t,max:s=99,color:r="#ff396d",showZero:n=!1,className:i,size:o="default"}=e,c=l.useMemo(()=>null==t?"":"string"==typeof t?t:0!==t||n?t>s?"".concat(s,"+"):t.toString():"",[t,s,n]);return c?(0,a.jsxs)("div",{className:(0,d.cn)("box-border content-stretch flex flex-col gap-2.5 items-center justify-center py-0 relative rounded-[6.25rem]",{small:"px-[0.375rem] text-[1.125rem] leading-[1.5rem] min-w-[1.5rem] h-[1.5rem]",default:"px-[0.5625rem] text-[1.333rem] leading-[2rem] min-w-[2rem] h-[2rem]"}[o],i),style:{backgroundColor:r},children:[(0,a.jsx)("div",{"aria-hidden":"true",className:"absolute border-[0.1875rem] border-solid border-white inset-[-0.09375rem] pointer-events-none rounded-[6.34375rem]"}),(0,a.jsx)("div",{className:"flex flex-col font-['PingFang_SC:Medium',_sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-center text-nowrap text-white",children:(0,a.jsx)("p",{className:"small"===o?"leading-[1.5rem]":"leading-[2rem]",style:{whiteSpace:"pre"},children:c})})]}):null};var i=s(94089),o=s(75547);let c=()=>(0,a.jsxs)("div",{className:"space-y-8",children:[(0,a.jsx)("div",{className:"bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6",children:(0,a.jsx)("h2",{className:"text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4",children:"面板项组件演示"})}),(0,a.jsxs)("section",{className:"bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8",children:[(0,a.jsx)("h3",{className:"text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6",children:"基础示例"}),(0,a.jsx)("div",{className:"space-y-4",children:(0,a.jsx)(o.A,{list:[{title:"基础面板项",showDivider:!0,onClick:()=>{alert("基础面板项")}},{title:"带副标题",subtitle:"辅助性文案",showDivider:!0,onClick:()=>{alert("带副标题")}}]})})]})]});var x=s(59438);let m=()=>{let[e,t]=(0,l.useState)([]),[s,r]=(0,l.useState)(!1),[d,n]=(0,l.useState)(!1),[i,o]=(0,l.useState)(!0),[c,m]=(0,l.useState)(!1),[h,g]=(0,l.useState)(1),u=(0,l.useCallback)((e,t)=>{let s=["科技","设计","摄影","艺术","生活","旅行"],a=["#FF6B6B","#4ECDC4","#45B7D1","#96CEB4","#FFEAA7","#DDA0DD","#98D8C8","#F7DC6F","#BB8FCE","#85C1E9","#F8C471","#82E0AA"];return Array.from({length:t},(t,r)=>{let l=e+r,d=Math.floor(200*Math.random())+150;return{refid:l,title:"瀑布流项目 ".concat(l),description:"这是第 ".concat(l," 个项目的描述，随机高度 ").concat(d,"px。内容可以是任意长度，展示瀑布流布局的效果。"),imageUrl:"https://picsum.photos/300/".concat(d,"?random=").concat(l),height:d,color:a[Math.floor(Math.random()*a.length)],category:s[Math.floor(Math.random()*s.length)]}})},[]);(0,l.useEffect)(()=>{t(u(1,20)),g(2)},[u]);let b=(0,l.useCallback)(async()=>{if(!s){r(!0),m(!1);try{if(await new Promise(e=>setTimeout(e,1e3)),.1>Math.random())throw Error("Network error");let e=u(20*h-19,20);t(t=>[...t,...e]),g(e=>e+1),h>=5&&o(!1)}catch(e){m(!0)}finally{r(!1)}}},[s,h,u]),p=(0,l.useCallback)(async()=>{n(!0),m(!1);try{await new Promise(e=>setTimeout(e,1500));let e=u(1,20);t(e),g(2),o(!0)}catch(e){m(!0)}finally{n(!1)}},[u]),y=(0,l.useCallback)(e=>(0,a.jsxs)("div",{className:"rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800 hover:shadow-xl transition-shadow duration-300",style:{backgroundColor:e.color+"10"},children:[(0,a.jsxs)("div",{className:"w-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 flex items-center justify-center relative overflow-hidden",style:{height:"".concat(e.height,"px"),backgroundColor:e.color+"20"},children:[(0,a.jsx)("img",{src:e.imageUrl,alt:e.title,className:"w-full h-full object-cover",loading:"lazy",onError:e=>{e.target.style.display="none"}}),(0,a.jsx)("div",{className:"absolute inset-0 flex items-center justify-center text-white text-4xl font-bold",style:{backgroundColor:e.color+"80"},children:e.id}),(0,a.jsx)("div",{className:"absolute top-2 right-2",children:(0,a.jsx)("span",{className:"px-2 py-1 rounded-full text-xs text-white font-medium",style:{backgroundColor:e.color},children:e.category})})]}),(0,a.jsxs)("div",{className:"p-4",children:[(0,a.jsx)("h3",{className:"text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2",children:e.title}),(0,a.jsx)("p",{className:"text-sm text-gray-600 dark:text-gray-400 line-clamp-3",children:e.description}),(0,a.jsxs)("div",{className:"flex items-center justify-between mt-3 pt-3 border-t border-gray-200 dark:border-gray-600",children:[(0,a.jsxs)("span",{className:"text-xs text-gray-500 dark:text-gray-400",children:["#",e.id]}),(0,a.jsxs)("div",{className:"flex items-center space-x-2",children:[(0,a.jsxs)("button",{className:"text-xs text-blue-500 hover:text-blue-600 font-medium",children:["\uD83D\uDC4D ",Math.floor(100*Math.random())]}),(0,a.jsxs)("button",{className:"text-xs text-gray-500 hover:text-gray-600",children:["\uD83D\uDCAC ",Math.floor(20*Math.random())]})]})]})]})]}),[]);return(0,a.jsxs)("div",{className:"space-y-8",children:[(0,a.jsxs)("div",{className:"bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6",children:[(0,a.jsx)("h2",{className:"text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4",children:"瀑布流组件演示"}),(0,a.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6 text-sm",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("h3",{className:"font-medium text-gray-700 dark:text-gray-300 mb-2",children:"功能特性："}),(0,a.jsxs)("ul",{className:"space-y-1 text-gray-600 dark:text-gray-400",children:[(0,a.jsx)("li",{children:"• 响应式瀑布流布局"}),(0,a.jsx)("li",{children:"• 无限滚动加载更多"}),(0,a.jsx)("li",{children:"• 下拉刷新功能"}),(0,a.jsx)("li",{children:"• 自动适配屏幕宽度"}),(0,a.jsx)("li",{children:"• 支持错误处理"})]})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("h3",{className:"font-medium text-gray-700 dark:text-gray-300 mb-2",children:"操作说明："}),(0,a.jsxs)("ul",{className:"space-y-1 text-gray-600 dark:text-gray-400",children:[(0,a.jsx)("li",{children:"• 向下滚动自动加载更多"}

1),(0,a.jsx)("li",{children:"• 在顶部下拉可以刷新数据"}),(0,a.jsx)("li",{children:"• 支持移动端触摸操作"}),(0,a.jsx)("li",{children:"• 自动处理不同高度的内容"}),(0,a.jsx)("li",{children:"• 优化的性能和流畅度"})]})]})]})]}),(0,a.jsxs)("div",{className:"bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6",children:[(0,a.jsx)("h3",{className:"text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4",children:"控制面板"}),(0,a.jsxs)("div",{className:"flex flex-wrap gap-4",children:[(0,a.jsx)("button",{onClick:p,disabled:d,className:"px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",children:d?"刷新中...":"手动刷新"}),(0,a.jsx)("button",{onClick:b,disabled:s||!i,className:"px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",children:s?"加载中...":i?"加载更多":"已到底部"}),(0,a.jsx)("button",{onClick:()=>{t([]),g(1),o(!0),m(!1),t(u(1,20)),g(2)},className:"px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors",children:"重置数据"}),(0,a.jsx)("button",{onClick:()=>m(!c),className:"px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors",children:c?"清除错误":"模拟错误"})]}),(0,a.jsxs)("div",{className:"mt-4 text-sm text-gray-600 dark:text-gray-400",children:[(0,a.jsxs)("p",{children:["当前数据量: ",e.length," 项"]}),(0,a.jsxs)("p",{children:["状态: ",s?"加载中":d?"刷新中":c?"错误状态":"正常"]}),(0,a.jsxs)("p",{children:["更多数据: ",i?"是":"否"]})]})]}),(0,a.jsxs)("div",{className:"bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6",children:[(0,a.jsx)("h3",{className:"text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4",children:"瀑布流效果"}),(0,a.jsx)(x.A,{data:e,renderItem:y,hasMore:i,loadMore:b,onRefresh:p,loading:s,refreshing:d,error:c,breakpointCols:{default:3,1100:3,700:2,500:1},columnGap:"1rem",className:"min-h-[400px]",enablePullToRefresh:!0,pullToRefreshThreshold:80})]}),(0,a.jsxs)("div",{className:"bg-gray-900 rounded-lg p-6",children:[(0,a.jsx)("h3",{className:"text-lg font-semibold text-white mb-4",children:"使用示例"}),(0,a.jsx)("pre",{className:"text-green-400 text-sm overflow-x-auto",children:'import WaterfallFlow from \'@/components/base/waterfall\';\n\n<WaterfallFlow\n  data={items}\n  renderItem={(item, index) => (\n    <div className="bg-white rounded-lg p-4">\n      <h3>{item.title}</h3>\n      <p>{item.description}</p>\n    </div>\n  )}\n  hasMore={hasMore}\n  loadMore={loadMore}\n  onRefresh={handleRefresh}\n  loading={loading}\n  refreshing={refreshing}\n  breakpointCols={{\n    default: 3,\n    1100: 3,\n    700: 2,\n    500: 1\n  }}\n  columnGap="1rem"\n  enablePullToRefresh={true}\n/>'})]})]})};var h=s(27990);let g=()=>{let e=(0,h.gB)(),[t,s]=(0,l.useState)(!1),[d,o]=(0,l.useState)(!1),[x,g]=(0,l.useState)("basic"),u=()=>{alert("Confirmed!"),s(!1),o(!1)},b=()=>{s(!1),o(!1)};return(0,a.jsxs)("div",{className:"min-h-screen bg-gray-50 dark:bg-gray-900",children:[(0,a.jsx)(r.default,{title:"Components Demo",onBack:()=>{e.push("/")},showBackButton:!0,backgroundColor:"#1890ff",rightContent:(0,a.jsxs)("div",{className:"relative",children:[(0,a.jsx)("div",{className:"w-8 h-8 bg-white rounded-full flex items-center justify-center text-xl",children:"\uD83D\uDD14"}),(0,a.jsx)("div",{className:"absolute -top-1 -right-1",children:(0,a.jsx)(n,{count:5,size:"small"})})]})}),(0,a.jsxs)("div",{className:"px-6 py-8 space-y-12",children:[(0,a.jsxs)("div",{className:"text-center",children:[(0,a.jsx)("h1",{className:"text-4xl font-bold text-gray-900 dark:text-white mb-4",children:"Base Components Demo"}),(0,a.jsx)("p",{className:"text-lg text-gray-600 dark:text-gray-300",children:"Interactive demo for AppBar, Badge, Mod

1al, PanelItem, Form, and WaterfallFlow components"})]}),(0,a.jsxs)("section",{className:"bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8",children:[(0,a.jsx)("h2",{className:"text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6",children:"Badge Component"}),(0,a.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-8",children:[(0,a.jsxs)("div",{className:"text-center",children:[(0,a.jsx)("h3",{className:"text-lg font-medium text-gray-700 dark:text-gray-300 mb-4",children:"Interactive Badge"}),(0,a.jsx)("div",{className:"flex justify-center",children:(0,a.jsx)(n,{count:5,color:"#1890ff",size:"small",showZero:!1})})]}),(0,a.jsxs)("div",{className:"text-center",children:[(0,a.jsx)("h3",{className:"text-lg font-medium text-gray-700 dark:text-gray-300 mb-4",children:"Preset Examples"}),(0,a.jsxs)("div",{className:"flex justify-center space-x-4",children:[(0,a.jsx)(n,{count:1}),(0,a.jsx)(n,{count:99}),(0,a.jsx)(n,{count:100}),(0,a.jsx)(n,{count:"NEW",color:"#52c41a"})]})]}),(0,a.jsxs)("div",{className:"text-center",children:[(0,a.jsx)("h3",{className:"text-lg font-medium text-gray-700 dark:text-gray-300 mb-4",children:"In Context"}),(0,a.jsxs)("div",{className:"flex justify-center space-x-6",children:[(0,a.jsxs)("div",{className:"relative",children:[(0,a.jsx)("div",{className:"w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white text-xl",children:"\uD83D\uDCE7"}),(0,a.jsx)("div",{className:"absolute -top-1 -right-1",children:(0,a.jsx)(n,{count:3,size:"small"})})]}),(0,a.jsxs)("div",{className:"relative",children:[(0,a.jsx)("div",{className:"w-12 h-12 bg-green-500 rounded-full flex items-center justify-center text-white text-xl",children:"\uD83D\uDCAC"}),(0,a.jsx)("div",{className:"absolute -top-1 -right-1",children:(0,a.jsx)(n,{count:99,size:"small",color:"#52c41a"})})]})]})]})]})]}),(0,a.jsxs)("section",{className:"bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8",children:[(0,a.jsx)("h2",{className:"text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6",children:"Modal Component"}),(0,a.jsx)("div",{className:"space-y-4",children:(0,a.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[(0,a.jsx)("button",{onClick:()=>{g("basic"),s(!0)},className:"px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors",children:"Open Basic Modal"}),(0,a.jsx)("button",{onClick:()=>{g("confirm"),s(!0)},className:"px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors",children:"Open Complex Modal"}),(0,a.jsx)("button",{onClick:()=>{g("custom"),s(!0)},className:"px-6 py-3 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors",children:"Open Custom Modal"})]})})]}),(0,a.jsxs)("section",{className:"bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8",children:[(0,a.jsx)("h2",{className:"text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6",children:"面板项组件"}),(0,a.jsx)("p",{className:"text-gray-600 dark:text-gray-300 mb-6",children:"基于 Figma 设计稿实现的通用面板项组件，支持左侧图标、副标题、自定义右侧内容等功能。"}),(0,a.jsx)(c,{})]}),(0,a.jsxs)("section",{className:"bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8",children:[(0,a.jsx)("h2",{className:"text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6",children:"瀑布流组件"}),(0,a.jsx)("p",{className:"text-gray-600 dark:text-gray-300 mb-6",children:"支持下拉刷新和上拉加载更多的响应式瀑布流布局组件，适用于图片墙、卡片列表等场景。"}),(0,a.jsx)(m,{})]})]}),(0,a.jsx)(i.A,{open:t,title:"basic"===x?"Basic Modal":"confirm"===x?"Confirm Action":"Custom Modal",onClose:b,onConfirm:u,showButtons:"custom"!==x,showCloseButton:"custom"===x,cancelText:"Cancel",confirmText:"Confirm",children:(0,a.jsxs)("div",{className:"text-center space-y-4",children:["basic"===x&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("p",{className:"text-gray-600 dark:text-gray-300",children:"This is a basic modal with standard cancel and confirm buttons."}),(0,a.jsx)("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"You can customize the content, buttons, and styling as needed."})]}),"confirm"===x&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{className:"text-6xl mb-4",children:"⚠️"}),(0,a.jsx)("p",{className:"text-lg font-medium text-gray-800 dark:text-gray-200",children:"Are you sure you want to proceed?"}),(0,a.jsx)("p",{className:"text-gray-600 dark:text-gray-300",children:"This action cannot be undone. Please confirm your choice."})]}),"custom"===x&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{className:"text-6xl mb-4",children:"\uD83C\uDFA8"}),(0,a.jsx)("h3",{className:"text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4",children:"Custom Mod

1al Content"}),(0,a.jsxs)("div",{className:"space-y-4",children:[(0,a.jsx)("div",{className:"bg-gradient-to-r from-purple-400 to-pink-400 text-white p-4 rounded-lg",children:(0,a.jsx)("p",{className:"font-medium",children:"This modal has custom styling and no default buttons."})}),(0,a.jsxs)("div",{className:"grid grid-cols-2 gap-4",children:[(0,a.jsx)("button",{onClick:b,className:"px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors",children:"Custom Close"}),(0,a.jsx)("button",{onClick:u,className:"px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg hover:from-purple-600 hover:to-pink-600 transition-colors",children:"Custom Action"})]})]})]})]})}),(0,a.jsx)(i.A,{open:d,title:"Complex Modal Example",onClose:b,onConfirm:u,showButtons:!0,showCloseButton:!0,cancelText:"Cancel",confirmText:"Save Changes",contentClassName:"max-h-[60vh]",children:(0,a.jsxs)("div",{className:"space-y-6",children:[(0,a.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("label",{className:"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2",children:"Name"}),(0,a.jsx)("input",{type:"text",className:"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white",placeholder:"Enter your name"})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("label",{className:"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2",children:"Email"}),(0,a.jsx)("input",{type:"email",className:"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white",placeholder:"Enter your email"})]})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("label",{className:"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2",children:"Message"}),(0,a.jsx)("textarea",{className:"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white",rows:4,placeholder:"Enter your message"})]}),(0,a.jsxs)("div",{className:"flex items-center space-x-2",children:[(0,a.jsx)("input",{type:"checkbox",id:"terms",className:"rounded"}),(0,a.jsx)("label",{htmlFor:"terms",className:"text-sm text-gray-600 dark:text-gray-300",children:"I agree to the terms and conditions"})]}),(0,a.jsxs)("div",{className:"bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4",children:[(0,a.jsx)("h4",{className:"font-medium text-blue-800 dark:text-blue-200 mb-2",children:"Notice:"}),(0,a.jsx)("p",{className:"text-sm text-blue-700 dark:text-blue-300",children:"This is an example of a complex modal with form elements, validation, and additional content. The modal supports scrolling when content exceeds the viewport height."})]})]})})]})}}},e=>{var t=t=>e(e.s=t);e.O(0,[3874,2076,8096,7358],()=>t(48562)),_N_E=e.O()}]);