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