2 lines
9.3 KiB
JavaScript
2 lines
9.3 KiB
JavaScript
import{r as n,z as ie,G as oe,H as ce,J as de,K as me,L as w,M as xe,N as fe,O as he,P as pe,j as e,T as S,S as H,B as b,Q as I,d as P,U as F,V as ue,W as je,X as ye,a as z,C as y,A as ge}from"./index-B-sDl1ER.js";import{C as g}from"./index-CO5DzGxy.js";import{F as M}from"./index-Bc7ikhKh.js";import{T as E}from"./index-C9m5qSM4.js";import{D as v}from"./index-VkcAtM9X.js";import{P as R}from"./progress-C__thZ4V.js";const ve=s=>{const{value:t,formatter:l,precision:i,decimalSeparator:x,groupSeparator:f="",prefixCls:d}=s;let a;if(typeof l=="function")a=l(t);else{const r=String(t),m=r.match(/^(-?)(\d*)(\.(\d+))?$/);if(!m||r==="-")a=r;else{const u=m[1];let h=m[2]||"0",c=m[4]||"";h=h.replace(/\B(?=(\d{3})+(?!\d))/g,f),typeof i=="number"&&(c=c.padEnd(i,"0").slice(0,i>0?i:0)),c&&(c=`${x}${c}`),a=[n.createElement("span",{key:"int",className:`${d}-content-value-int`},u,h),c&&n.createElement("span",{key:"decimal",className:`${d}-content-value-decimal`},c)]}}return n.createElement("span",{className:`${d}-content-value`},a)},Se=s=>{const{componentCls:t,marginXXS:l,padding:i,colorTextDescription:x,titleFontSize:f,colorTextHeading:d,contentFontSize:a,fontFamily:r}=s;return{[t]:{...ce(s),[`${t}-header`]:{paddingBottom:l,[`${t}-title`]:{color:x,fontSize:f}},[`${t}-skeleton`]:{paddingTop:i},[`${t}-content`]:{color:d,fontSize:a,fontFamily:r,[`${t}-content-value`]:{display:"inline-block",direction:"ltr"},[`${t}-content-prefix, ${t}-content-suffix`]:{display:"inline-block"},[`${t}-content-prefix`]:{marginInlineEnd:l},[`${t}-content-suffix`]:{marginInlineStart:l}}}}},be=s=>{const{fontSizeHeading3:t,fontSize:l}=s;return{titleFontSize:l,contentFontSize:t}},Te=ie("Statistic",s=>{const t=oe(s,{});return Se(t)},be),T=n.forwardRef((s,t)=>{const{prefixCls:l,className:i,rootClassName:x,style:f,valueStyle:d,value:a=0,title:r,valueRender:m,prefix:u,suffix:h,loading:c=!1,formatter:o,precision:j,decimalSeparator:C=".",groupSeparator:k=",",onMouseEnter:A,onMouseLeave:W,styles:K,classNames:U,...V}=s,{getPrefixCls:X,direction:G,className:J,style:O,classNames:Q,styles:Y}=de("statistic"),p=X("statistic",l),[Z,_]=Te(p),q={...s,decimalSeparator:C,groupSeparator:k,loading:c,value:a},[N,$]=me([Q,U],[Y,K],{props:q}),B=n.createElement(ve,{decimalSeparator:C,groupSeparator:k,prefixCls:p,formatter:o,precision:j,value:a}),ee=w(p,{[`${p}-rtl`]:G==="rtl"},J,i,x,N.root,Z,_),te=w(`${p}-header`,N.header),se=w(`${p}-title`,N.title),ne=w(`${p}-content`,N.content),re=w(`${p}-content-prefix`,N.prefix),le=w(`${p}-content-suffix`,N.suffix),D=n.useRef(null);n.useImperativeHandle(t,()=>({nativeElement:D.current}));const ae=xe(V,{aria:!0,data:!0});return n.createElement("div",{...ae,className:ee,style:{...$.root,...O,...f},ref:D,onMouseEnter:A,onMouseLeave:W},r&&n.createElement("div",{className:te,style:$.header},n.createElement("div",{className:se,style:$.title},r)),n.createElement(fe,{paragraph:!1,loading:c,className:`${p}-skeleton`,active:!0},n.createElement("div",{className:ne,style:{...d,...$.content}},u&&n.createElement("span",{className:re,style:$.prefix},u),m?m(B):B,h&&n.createElement("span",{className:le,style:$.suffix},h))))}),Ce=[["Y",1e3*60*60*24*365],["M",1e3*60*60*24*30],["D",1e3*60*60*24],["H",1e3*60*60],["m",1e3*60],["s",1e3],["S",1]];function Ne(s,t){let l=s;const i=/\[[^\]]*]/g,x=(t.match(i)||[]).map(r=>r.slice(1,-1)),f=t.replace(i,"[]"),d=Ce.reduce((r,[m,u])=>{if(r.includes(m)){const h=Math.floor(l/u);return l-=h*u,r.replace(new RegExp(`${m}+`,"g"),c=>{const o=c.length;return h.toString().padStart(o,"0")})}return r},f);let a=0;return d.replace(i,()=>{const r=x[a];return a+=1,r})}function $e(s,t,l){const{format:i=""}=t,x=new Date(s).getTime(),f=Date.now(),d=Math.max(l?x-f:f-x,0);return Ne(d,i)}const we=1e3/60;function Ee(s){return new Date(s).getTime()}const L=s=>{const{value:t,format:l="HH:mm:ss",onChange:i,onFinish:x,type:f,...d}=s,a=f==="countdown",[r,m]=n.useState(null),u=he(()=>{const o=Date.now(),j=Ee(t);m({});const C=a?j-o:o-j;return i?.(C),a&&j<o?(x?.(),!1):!0});n.useEffect(()=>{let o;const j=()=>{u()||window.clearInterval(o)},C=()=>{o=window.setInterval(j,we)},k=()=>{window.clearInterval(o)};return C(),()=>{k()}},[t,a]),n.useEffect(()=>{m({})},[]);const h=(o,j)=>r?$e(o,{...j,format:l},a):"-",c=o=>pe(o,{title:void 0});return n.createElement(T,{...d,value:t,valueRender:c,formatter:h})},ke=s=>n.createElement(L,{...s,type:"countdown"}),Ie=n.memo(ke);T.Timer=L;T.Countdown=Ie;const{Title:ze}=S,Me=()=>e.jsxs("div",{style:{minHeight:"100vh"},children:[e.jsx(g,{variant:"borderless",style:{marginBottom:20},children:e.jsxs(M,{justify:"space-between",align:"center",children:[e.jsxs("div",{children:[e.jsx(ze,{level:3,style:{marginBottom:4},children:"页面标题"}),e.jsx(S.Text,{type:"secondary",children:"这是页面的描述信息,可以简要说明页面用途"})]}),e.jsxs(H,{style:{height:"100%"},children:[e.jsx(b,{icon:e.jsx(I,{}),children:"操作一"}),e.jsx(b,{icon:e.jsx(P,{}),children:"操作二"}),e.jsx(b,{type:"primary",icon:e.jsx(F,{}),children:"主要操作"}),e.jsx(ue,{trigger:["click"],menu:{items:[{label:"导出数据",key:"1",icon:e.jsx(ye,{})},{label:"批量操作",key:"2"},{label:"更多设置",key:"3"}]},children:e.jsx(b,{style:{padding:"0 8px"},children:e.jsx(je,{style:{fontSize:18}})})})]})]})}),e.jsxs(z,{gutter:[16,16],style:{marginBottom:24},children:[e.jsx(y,{xs:24,sm:12,lg:6,children:e.jsxs(g,{variant:"borderless",children:[e.jsx(T,{title:"总用户数",value:11893,prefix:e.jsx(I,{style:{color:"#1677ff"}}),valueStyle:{color:"#1677ff"}}),e.jsxs("div",{style:{marginTop:12},children:[e.jsx(E,{color:"success",children:"+12.5%"}),e.jsx(S.Text,{type:"secondary",style:{fontSize:12},children:"较上周"})]})]})}),e.jsx(y,{xs:24,sm:12,lg:6,children:e.jsxs(g,{variant:"borderless",children:[e.jsx(T,{title:"活跃用户",value:8234,prefix:e.jsx(P,{style:{color:"#52c41a"}}),valueStyle:{color:"#52c41a"}}),e.jsxs("div",{style:{marginTop:12},children:[e.jsx(E,{color:"success",children:"+8.2%"}),e.jsx(S.Text,{type:"secondary",style:{fontSize:12},children:"较上周"})]})]})}),e.jsx(y,{xs:24,sm:12,lg:6,children:e.jsxs(g,{variant:"borderless",children:[e.jsx(T,{title:"总订单",value:32567,prefix:e.jsx(F,{style:{color:"#faad14"}}),valueStyle:{color:"#faad14"}}),e.jsxs("div",{style:{marginTop:12},children:[e.jsx(E,{color:"warning",children:"+5.3%"}),e.jsx(S.Text,{type:"secondary",style:{fontSize:12},children:"较上周"})]})]})}),e.jsx(y,{xs:24,sm:12,lg:6,children:e.jsxs(g,{variant:"borderless",children:[e.jsx(T,{title:"总收入",value:98234,prefix:"¥",valueStyle:{color:"#f5222d"}}),e.jsxs("div",{style:{marginTop:12},children:[e.jsx(E,{color:"error",children:"-2.1%"}),e.jsx(S.Text,{type:"secondary",style:{fontSize:12},children:"较上周"})]})]})})]}),e.jsxs(g,{variant:"borderless",tabList:[{label:"基本信息",key:"base"},{label:"详细信息",key:"info"},{label:"数据分析",key:"analysis"}],activeTabKey:"base",children:[e.jsxs(z,{gutter:[16,16],style:{marginBottom:24},children:[e.jsx(y,{xs:24,lg:24,children:e.jsx(g,{title:e.jsxs("span",{children:[e.jsx(I,{style:{marginRight:8}}),"用户信息概览"]}),style:{background:"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",color:"#fff",borderRadius:8},styles:{header:{color:"#fff",borderBottom:"1px solid rgba(255,255,255,0.2)"}},children:e.jsxs(z,{gutter:[16,16],children:[e.jsx(y,{span:6,children:e.jsx(ge,{size:64,icon:e.jsx(I,{})})}),e.jsxs(y,{span:18,children:[e.jsx(S.Title,{level:5,style:{color:"#fff",marginTop:0},children:"张三 / Zhang San"}),e.jsx(S.Text,{style:{color:"rgba(255,255,255,0.85)"},children:"高级管理员 · 北京市朝阳区 · 在职"})]})]})})}),e.jsx(y,{xs:24,lg:16,children:e.jsx(g,{title:"详细信息",style:{height:"100%",borderRadius:8},children:e.jsxs(v,{column:{xs:1,sm:2},children:[e.jsx(v.Item,{label:"用户名",children:"zhangsan"}),e.jsx(v.Item,{label:"手机号",children:"138****8888"}),e.jsx(v.Item,{label:"邮箱",children:"zhangsan@example.com"}),e.jsx(v.Item,{label:"部门",children:"技术部"}),e.jsx(v.Item,{label:"职位",children:"高级工程师"}),e.jsx(v.Item,{label:"入职时间",children:"2023-01-15"}),e.jsx(v.Item,{label:"状态",children:e.jsx(E,{color:"success",children:"正常"})}),e.jsx(v.Item,{label:"权限等级",children:e.jsx(E,{color:"blue",children:"管理员"})})]})})}),e.jsx(y,{xs:24,lg:8,children:e.jsxs(g,{title:"任务完成度",style:{height:"100%",borderRadius:8},children:[e.jsxs("div",{style:{marginBottom:20},children:[e.jsxs("div",{style:{marginBottom:8},children:[e.jsx("span",{children:"本周任务"}),e.jsx("span",{style:{float:"right",fontWeight:600},children:"75%"})]}),e.jsx(R,{percent:75,strokeColor:"#52c41a"})]}),e.jsxs("div",{style:{marginBottom:20},children:[e.jsxs("div",{style:{marginBottom:8},children:[e.jsx("span",{children:"本月目标"}),e.jsx("span",{style:{float:"right",fontWeight:600},children:"60%"})]}),e.jsx(R,{percent:60,strokeColor:"#1677ff"})]}),e.jsxs("div",{children:[e.jsxs("div",{style:{marginBottom:8},children:[e.jsx("span",{children:"年度KPI"}),e.jsx("span",{style:{float:"right",fontWeight:600},children:"45%"})]}),e.jsx(R,{percent:45,strokeColor:"#faad14"})]})]})})]}),e.jsxs(M,{justify:"space-between",align:"center",children:[e.jsxs(H,{children:[e.jsx(b,{size:"large",children:"重置"}),e.jsx(b,{type:"primary",size:"large",children:"保存"}),e.jsx(b,{type:"primary",size:"large",ghost:!0,children:"提交审核"})]}),e.jsx(S.Text,{type:"secondary",children:"最后更新时间: 2026-01-01 10:30:00"})]})]})]});export{Me as default};
|