feat(dashboard): 专业出海运营官视角重构工作台，支持实时雷达客商流、出海转化漏斗与运营工具箱
这个提交包含在：
wikiboss
@@ -1,67 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import { Link, Card, Skeleton, Tag, Typography } from '@arco-design/web-react';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import locale from './locale';
|
||||
import styles from './style/announcement.module.less';
|
||||
|
||||
function Announcement() {
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const t = useLocale(locale);
|
||||
|
||||
const fetchData = () => {
|
||||
setLoading(true);
|
||||
axios
|
||||
.get('/api/workplace/announcement')
|
||||
.then((res) => {
|
||||
setData(res.data);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
function getTagColor(type) {
|
||||
switch (type) {
|
||||
case 'activity':
|
||||
return 'orangered';
|
||||
case 'info':
|
||||
return 'cyan';
|
||||
case 'notice':
|
||||
return 'arcoblue';
|
||||
default:
|
||||
return 'arcoblue';
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography.Title heading={6}>
|
||||
{t['workplace.announcement']}
|
||||
</Typography.Title>
|
||||
<Link>{t['workplace.seeMore']}</Link>
|
||||
</div>
|
||||
<Skeleton loading={loading} text={{ rows: 5, width: '100%' }} animation>
|
||||
<div>
|
||||
{data.map((d) => (
|
||||
<div key={d.key} className={styles.item}>
|
||||
<Tag color={getTagColor(d.type)} size="small">
|
||||
{t[`workplace.${d.type}`]}
|
||||
</Tag>
|
||||
<span className={styles.link}>{d.content}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Skeleton>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Announcement;
|
||||
@@ -1,86 +0,0 @@
|
||||
<svg width="55" height="58" viewBox="0 0 55 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_ii_1053_46645)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.2234 16H34.1971H19.6665C17.4612 16 15.6665 17.7937 15.6665 19.9977V23.9953V26.6605V35.9883C15.6665 38.1923 17.4612 39.986 19.6665 39.986H35.6665C37.8718 39.986 39.6665 38.1923 39.6665 35.9883V26.6605V23.9953V21.2979L34.2234 16Z" fill="#7DA2FF"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_di_1053_46645)">
|
||||
<path d="M31.6884 25.1609H20.5815C20.0751 25.1609 19.6646 25.5712 19.6646 26.0773C19.6646 26.5833 20.0751 26.9936 20.5815 26.9936H31.6884C32.1948 26.9936 32.6052 26.5833 32.6052 26.0773C32.6052 25.5712 32.1948 25.1609 31.6884 25.1609Z" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter2_di_1053_46645)">
|
||||
<path d="M27.1313 21.5852H20.5226C20.0488 21.5852 19.6646 21.9691 19.6646 22.4427C19.6646 22.9163 20.0488 23.3001 20.5226 23.3001H27.1313C27.6052 23.3001 27.9893 22.9163 27.9893 22.4427C27.9893 21.9691 27.6052 21.5852 27.1313 21.5852Z" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter3_di_1053_46645)">
|
||||
<path d="M35.6691 30.6563C35.6691 29.9208 35.1558 29.3238 34.5259 29.3238H20.8078C20.1779 29.3238 19.6646 29.9208 19.6646 30.6563V33.6234C19.6646 34.4513 20.3362 35.1225 21.1646 35.1225H34.1691C34.9975 35.1225 35.6691 34.4513 35.6691 33.6234V30.6563Z" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter4_f_1053_46645)">
|
||||
<path d="M28.1665 39.986C34.5178 39.986 39.6665 38.8674 39.6665 37.4874C39.6665 36.1075 34.5178 34.9889 28.1665 34.9889C21.8152 34.9889 16.6665 36.1075 16.6665 37.4874C16.6665 38.8674 21.8152 39.986 28.1665 39.986Z" fill="#7CA0FD"/>
|
||||
</g>
|
||||
<path d="M36.2095 21.2979H39.6669L34.2095 15.986V19.2991C34.2095 20.403 35.1049 21.2979 36.2095 21.2979Z" fill="#B9CDFA"/>
|
||||
<defs>
|
||||
<filter id="filter0_ii_1053_46645" x="15.6665" y="9.88145" width="24" height="30.1045" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-6.11855"/>
|
||||
<feGaussianBlur stdDeviation="3.82409"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0716667 0 0 0 0 0.136167 0 0 0 0 0.716667 0 0 0 0.35 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1053_46645"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2.29445"/>
|
||||
<feGaussianBlur stdDeviation="1.52964"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="effect1_innerShadow_1053_46645" result="effect2_innerShadow_1053_46645"/>
|
||||
</filter>
|
||||
<filter id="filter1_di_1053_46645" x="5.15213" y="18.5644" width="41.9658" height="30.8575" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="7.91587"/>
|
||||
<feGaussianBlur stdDeviation="7.25621"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0450001 0 0 0 0 0.45 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1053_46645"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1053_46645" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-0.5"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.338819 0 0 0 0 0.521617 0 0 0 0 0.991667 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1053_46645"/>
|
||||
</filter>
|
||||
<filter id="filter2_di_1053_46645" x="5.15213" y="14.9887" width="37.3495" height="30.7397" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="7.91587"/>
|
||||
<feGaussianBlur stdDeviation="7.25621"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0450001 0 0 0 0 0.45 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1053_46645"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1053_46645" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-0.5"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.338819 0 0 0 0 0.521617 0 0 0 0 0.991667 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1053_46645"/>
|
||||
</filter>
|
||||
<filter id="filter3_di_1053_46645" x="5.15213" y="22.7273" width="45.0292" height="34.8236" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="7.91587"/>
|
||||
<feGaussianBlur stdDeviation="7.25621"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0450001 0 0 0 0 0.45 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1053_46645"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1053_46645" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="3.29828"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.690196 0 0 0 0 0.776941 0 0 0 0 1 0 0 0 0.6 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1053_46645"/>
|
||||
</filter>
|
||||
<filter id="filter4_f_1053_46645" x="4.6665" y="22.9889" width="47" height="28.9971" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_1053_46645"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
之前 宽度: | 高度: | 大小: 6.5 KiB |
@@ -1,71 +0,0 @@
|
||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_ii_161_33236)">
|
||||
<path d="M20.4884 3.5143C21.5946 4.62323 22.4625 5.9143 23.0679 7.3527C23.692 8.84199 24.008 10.425 24.008 12.0536C24 13.6768 23.6786 15.2491 23.0464 16.7277C22.4384 18.1554 21.5679 19.4358 20.4616 20.5313C19.358 21.6268 18.0696 22.484 16.6366 23.0813C15.1714 23.6893 13.6152 24 12.0107 24H11.9544C10.9717 23.9958 10.0284 23.677 9.11446 23.2543C7.52892 22.5211 5.79636 22.1752 4.07277 22.4593L3.19059 22.6048C2.74817 22.6777 2.26797 22.7683 1.88519 22.5348C1.71473 22.4308 1.57149 22.2866 1.46868 22.1153C1.2409 21.7359 1.32941 21.2627 1.40047 20.8259L1.54851 19.9159C1.82774 18.1994 1.48269 16.4748 0.753006 14.8962C0.330661 13.9826 0.0122489 13.0404 0.00799498 12.0563C-4.07491e-05 10.4357 0.310674 8.85806 0.926747 7.37413C1.51871 5.94109 2.38121 4.65537 3.47407 3.54912C4.56961 2.44287 5.84997 1.57501 7.27765 0.964294C8.75622 0.33215 10.3285 0.0107213 11.9518 0.00268555H12.0053C13.6152 0.00268555 15.1795 0.316079 16.6527 0.93483C18.0911 1.53751 19.3821 2.40805 20.4884 3.5143Z" fill="#FDA979"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_dii_161_33236)">
|
||||
<path d="M18.2016 13.5312C17.3786 13.5312 16.7141 12.8477 16.7141 12C16.7141 11.1523 17.3786 10.4688 18.2016 10.4688C19.0247 10.4688 19.6891 11.1523 19.6891 12C19.6919 12.8477 19.0247 13.5312 18.2016 13.5312ZM12.0028 13.5312C11.1797 13.5312 10.5153 12.8477 10.5153 12C10.5153 11.1523 11.1797 10.4688 12.0028 10.4688C12.8258 10.4688 13.4903 11.1523 13.4903 12C13.4876 12.8477 12.8231 13.5312 12.0028 13.5312Z" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter2_dii_161_33236)">
|
||||
<path d="M4.31378 12C4.31378 12.2011 4.35226 12.4002 4.42701 12.586C4.50177 12.7718 4.61133 12.9406 4.74946 13.0828C4.88759 13.2249 5.05157 13.3377 5.23204 13.4147C5.41251 13.4916 5.60594 13.5312 5.80128 13.5312C5.99662 13.5312 6.19005 13.4916 6.37052 13.4147C6.551 13.3377 6.71498 13.2249 6.8531 13.0828C6.99123 12.9406 7.1008 12.7718 7.17555 12.586C7.25031 12.4002 7.28878 12.2011 7.28878 12C7.28878 11.5939 7.13206 11.2044 6.8531 10.9172C6.57414 10.6301 6.19579 10.4688 5.80128 10.4688C5.40677 10.4688 5.02842 10.6301 4.74946 10.9172C4.4705 11.2044 4.31378 11.5939 4.31378 12Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_ii_161_33236" x="0.00784302" y="-2.95135" width="24.0002" height="28.0583" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2.95403"/>
|
||||
<feGaussianBlur stdDeviation="1.84627"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.78 0 0 0 0 0 0 0 0 0.29 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_161_33236"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.10694"/>
|
||||
<feGaussianBlur stdDeviation="1.05495"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="effect1_innerShadow_161_33236" result="effect2_innerShadow_161_33236"/>
|
||||
</filter>
|
||||
<filter id="filter1_dii_161_33236" x="6.74583" y="8.75536" width="16.7127" height="10.6014" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2.05607"/>
|
||||
<feGaussianBlur stdDeviation="1.88473"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.8625 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_161_33236"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_161_33236" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-1.37071"/>
|
||||
<feGaussianBlur stdDeviation="0.856696"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.925 0 0 0 0 0.320667 0 0 0 0 0.0616667 0 0 0 0.12 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_161_33236"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-0.514017"/>
|
||||
<feGaussianBlur stdDeviation="0.342678"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.75 0"/>
|
||||
<feBlend mode="normal" in2="effect2_innerShadow_161_33236" result="effect3_innerShadow_161_33236"/>
|
||||
</filter>
|
||||
<filter id="filter2_dii_161_33236" x="0.544321" y="8.75536" width="10.5139" height="10.6014" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2.05607"/>
|
||||
<feGaussianBlur stdDeviation="1.88473"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.8625 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_161_33236"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_161_33236" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-1.37071"/>
|
||||
<feGaussianBlur stdDeviation="0.856696"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.925 0 0 0 0 0.320667 0 0 0 0 0.0616667 0 0 0 0.12 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_161_33236"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-0.514017"/>
|
||||
<feGaussianBlur stdDeviation="0.342678"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.75 0"/>
|
||||
<feBlend mode="normal" in2="effect2_innerShadow_161_33236" result="effect3_innerShadow_161_33236"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
之前 宽度: | 高度: | 大小: 6.4 KiB |
@@ -1,168 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_161_33222)">
|
||||
<rect x="0.0283203" y="3.10522" width="12.9766" height="18.5206" rx="2.03077" fill="url(#paint0_linear_161_33222)"/>
|
||||
<mask id="mask0_161_33222" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="0" width="21" height="24">
|
||||
<path d="M5.41988 0.119385L15.1885 0.119384C15.8615 0.119384 16.5092 0.376475 16.9991 0.838099L22.4105 5.93776C22.9398 6.43659 23.2399 7.13171 23.2399 7.85905L23.2399 21.8994C23.2399 22.9929 22.3534 23.8794 21.2599 23.8794L5.41988 23.8794C4.32636 23.8794 3.43988 22.9929 3.43988 21.8994L3.43988 2.09938C3.43988 1.00586 4.32636 0.119385 5.41988 0.119385Z" fill="#4D72D3"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_161_33222)">
|
||||
<g filter="url(#filter0_dii_161_33222)">
|
||||
<path d="M5.41988 0.119385L15.1885 0.119384C15.8615 0.119384 16.5092 0.376475 16.9991 0.838099L22.4105 5.93776C22.9398 6.43659 23.2399 7.13171 23.2399 7.85905L23.2399 21.8994C23.2399 22.9929 22.3534 23.8794 21.2599 23.8794L5.41988 23.8794C4.32636 23.8794 3.43988 22.9929 3.43988 21.8994L3.43988 2.09938C3.43988 1.00586 4.32636 0.119385 5.41988 0.119385Z" fill="url(#paint1_linear_161_33222)"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_dii_161_33222)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.2799 6.05945L23.2399 6.05945L23.2399 0.119451L17.2999 0.119452L17.2999 4.07945C17.2999 5.17297 18.1864 6.05945 19.2799 6.05945Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
<g filter="url(#filter2_dii_161_33222)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2546 7.37437C11.5777 7.76209 11.5253 8.33833 11.1376 8.66144L8.71308 10.6818C8.51387 10.8479 8.25351 10.9214 7.99689 10.8842C7.74026 10.847 7.51153 10.7025 7.36769 10.4867L6.55952 9.27448C6.27956 8.85454 6.39304 8.28716 6.81298 8.0072C7.23292 7.72724 7.80029 7.84072 8.08025 8.26065L8.32429 8.62671L9.96751 7.25737C10.3552 6.93426 10.9315 6.98665 11.2546 7.37437Z" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter3_dii_161_33222)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8708 9.57522C12.8708 9.07052 13.28 8.66138 13.7847 8.66138L19.4418 8.66138C19.9465 8.66138 20.3557 9.07052 20.3557 9.57522C20.3557 10.0799 19.9465 10.4891 19.4418 10.4891L13.7847 10.4891C13.28 10.4891 12.8708 10.0799 12.8708 9.57522Z" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter4_dii_161_33222)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2549 15.2324C11.2549 14.7277 11.664 14.3186 12.1687 14.3186L19.4422 14.3186C19.9469 14.3186 20.356 14.7277 20.356 15.2324C20.356 15.7372 19.9469 16.1463 19.4422 16.1463L12.1687 16.1463C11.664 16.1463 11.2549 15.7372 11.2549 15.2324Z" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter5_dii_161_33222)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.21375 15.2324C7.21375 14.7277 7.60556 14.3186 8.08889 14.3186L8.16629 14.3186C8.64962 14.3186 9.04144 14.7277 9.04144 15.2324C9.04144 15.7372 8.64962 16.1463 8.16629 16.1463L8.08889 16.1463C7.60556 16.1463 7.21375 15.7372 7.21375 15.2324Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_dii_161_33222" x="-5.56012" y="-4.88062" width="37.8" height="41.76" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="4.5"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.697798 0 0 0 0 0.346806 0 0 0 0 0.945833 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_161_33222"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_161_33222" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="0.131148"/>
|
||||
<feGaussianBlur stdDeviation="0.0327869"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.968627 0 0 0 0 0.6 0 0 0 0 0.984314 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_161_33222"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-0.131148"/>
|
||||
<feGaussianBlur stdDeviation="0.131148"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="effect2_innerShadow_161_33222" result="effect3_innerShadow_161_33222"/>
|
||||
</filter>
|
||||
<filter id="filter1_dii_161_33222" x="11.2854" y="-2.61439" width="17.9691" height="17.9691" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="3.28067"/>
|
||||
<feGaussianBlur stdDeviation="3.00728"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0450001 0 0 0 0 0.45 0 0 0 0.12 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_161_33222"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_161_33222" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2.18712"/>
|
||||
<feGaussianBlur stdDeviation="1.36695"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.690196 0 0 0 0 0.776941 0 0 0 0 1 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_161_33222"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-0.406154"/>
|
||||
<feGaussianBlur stdDeviation="0.546779"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.75 0"/>
|
||||
<feBlend mode="normal" in2="effect2_innerShadow_161_33222" result="effect3_innerShadow_161_33222"/>
|
||||
</filter>
|
||||
<filter id="filter2_dii_161_33222" x="0.391376" y="4.31164" width="17.0896" height="15.8773" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="3.28067"/>
|
||||
<feGaussianBlur stdDeviation="3.00728"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.00314236 0 0 0 0 0.0782449 0 0 0 0 0.754167 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_161_33222"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_161_33222" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-1.21846"/>
|
||||
<feGaussianBlur stdDeviation="1.36695"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.57 0 0 0 0 0.6308 0 0 0 0 0.95 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_161_33222"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-0.820168"/>
|
||||
<feGaussianBlur stdDeviation="0.546779"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.75 0"/>
|
||||
<feBlend mode="normal" in2="effect2_innerShadow_161_33222" result="effect3_innerShadow_161_33222"/>
|
||||
</filter>
|
||||
<filter id="filter3_dii_161_33222" x="6.85628" y="5.92748" width="19.514" height="13.8568" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="3.28067"/>
|
||||
<feGaussianBlur stdDeviation="3.00728"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.00314236 0 0 0 0 0.0782449 0 0 0 0 0.754167 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_161_33222"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_161_33222" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-1.21846"/>
|
||||
<feGaussianBlur stdDeviation="1.36695"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.57 0 0 0 0 0.6308 0 0 0 0 0.95 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_161_33222"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-0.820168"/>
|
||||
<feGaussianBlur stdDeviation="0.546779"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.75 0"/>
|
||||
<feBlend mode="normal" in2="effect2_innerShadow_161_33222" result="effect3_innerShadow_161_33222"/>
|
||||
</filter>
|
||||
<filter id="filter4_dii_161_33222" x="5.24031" y="11.5847" width="21.1303" height="13.8568" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="3.28067"/>
|
||||
<feGaussianBlur stdDeviation="3.00728"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.00314236 0 0 0 0 0.0782449 0 0 0 0 0.754167 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_161_33222"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_161_33222" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-1.21846"/>
|
||||
<feGaussianBlur stdDeviation="1.36695"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.57 0 0 0 0 0.6308 0 0 0 0 0.95 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_161_33222"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-0.820168"/>
|
||||
<feGaussianBlur stdDeviation="0.546779"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.75 0"/>
|
||||
<feBlend mode="normal" in2="effect2_innerShadow_161_33222" result="effect3_innerShadow_161_33222"/>
|
||||
</filter>
|
||||
<filter id="filter5_dii_161_33222" x="3.15221" y="13.1001" width="9.95078" height="10.3883" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="3.28067"/>
|
||||
<feGaussianBlur stdDeviation="2.03077"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0450001 0 0 0 0 0.45 0 0 0 0.65 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_161_33222"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_161_33222" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-1.21846"/>
|
||||
<feGaussianBlur stdDeviation="1.36695"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.57 0 0 0 0 0.6308 0 0 0 0 0.95 0 0 0 0.4 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_161_33222"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-0.820168"/>
|
||||
<feGaussianBlur stdDeviation="0.546779"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.75 0"/>
|
||||
<feBlend mode="normal" in2="effect2_innerShadow_161_33222" result="effect3_innerShadow_161_33222"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_161_33222" x1="1.97655" y1="3.10522" x2="1.97655" y2="16.0647" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E14BFE"/>
|
||||
<stop offset="1" stop-color="#B84FD1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_161_33222" x1="3.43988" y1="0.119385" x2="3.43988" y2="23.8794" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E982FE"/>
|
||||
<stop offset="1" stop-color="#B353FF"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_161_33222">
|
||||
<rect width="24" height="24" fill="white" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 0 24)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
之前 宽度: | 高度: | 大小: 13 KiB |
@@ -1,77 +0,0 @@
|
||||
<svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_178_29628" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="4" width="21" height="23">
|
||||
<path d="M20.1248 4.00061H3.87483C2.83929 4.00061 1.99983 4.84008 1.99983 5.87561V24.6256C1.99983 25.6611 2.83929 26.5006 3.87483 26.5006H20.1248C21.1604 26.5006 21.9998 25.6611 21.9998 24.6256V5.87561C21.9998 4.84008 21.1604 4.00061 20.1248 4.00061Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_178_29628)">
|
||||
<g filter="url(#filter0_ii_178_29628)">
|
||||
<path d="M20.1248 4.00061H3.87483C2.83929 4.00061 1.99983 4.84008 1.99983 5.87561V23.6256C1.99983 24.6611 2.83929 25.5006 3.87483 25.5006H20.1248C21.1604 25.5006 21.9998 24.6611 21.9998 23.6256V5.87561C21.9998 4.84008 21.1604 4.00061 20.1248 4.00061Z" fill="url(#paint0_linear_178_29628)"/>
|
||||
</g>
|
||||
</g>
|
||||
<g filter="url(#filter1_di_178_29628)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8747 1.87549C14.6534 1.87549 15.3213 2.35019 15.6046 3.02601C15.6294 3.08496 15.6858 3.12552 15.7497 3.12549C16.7853 3.12549 17.6247 3.96495 17.6247 5.00049C17.6247 6.03602 16.7853 6.87549 15.7497 6.87549H8.24974C7.2142 6.87549 6.37474 6.03602 6.37474 5.00049C6.37474 3.96495 7.2142 3.12549 8.24974 3.12549C8.31366 3.12552 8.37011 3.08496 8.39483 3.02601C8.67819 2.35019 9.34603 1.87549 10.1247 1.87549H13.8747Z" fill="#FFFEFE"/>
|
||||
</g>
|
||||
<path d="M17.9719 9H6.02754V20.9444H17.9719V9Z" fill="white" fill-opacity="0.01"/>
|
||||
<g filter="url(#filter2_dii_178_29628)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5335 11.6822C12.5335 11.1511 12.9641 10.7206 13.4951 10.7206H17.0843C17.6154 10.7206 18.0459 11.1511 18.0459 11.6822V15.2715C18.0459 15.8025 17.6154 16.233 17.0843 16.233C16.5533 16.233 16.1227 15.8025 16.1227 15.2715V12.6438H13.4951C12.9641 12.6438 12.5335 12.2133 12.5335 11.6822Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.7488 10.9869C18.1327 11.3539 18.1464 11.9626 17.7795 12.3465L13.3481 16.9826C13.036 17.3092 12.5385 17.3744 12.1526 17.1393L9.93329 16.233L7.35673 18.8752C7.01826 19.2844 6.41212 19.3418 6.00289 19.0033C5.59365 18.6648 5.53629 18.0587 5.87476 17.6495L8.98186 14.3659C9.28641 13.9977 9.81516 13.9089 10.2232 14.1576L12.4926 15.0943L16.3892 11.0176C16.7562 10.6337 17.3649 10.62 17.7488 10.9869Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_ii_178_29628" x="1.99983" y="1.85775" width="20" height="24.7143" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2.14286"/>
|
||||
<feGaussianBlur stdDeviation="1.07143"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0788195 0 0 0 0 0.633708 0 0 0 0 0.945833 0 0 0 0.7 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_178_29628"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.07143"/>
|
||||
<feGaussianBlur stdDeviation="1.07143"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0"/>
|
||||
<feBlend mode="normal" in2="effect1_innerShadow_178_29628" result="effect2_innerShadow_178_29628"/>
|
||||
</filter>
|
||||
<filter id="filter1_di_178_29628" x="4.23188" y="0.452631" width="15.5357" height="9.28571" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="0.72"/>
|
||||
<feGaussianBlur stdDeviation="1.07143"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.373715 0 0 0 0 0.67555 0 0 0 0 0.954167 0 0 0 0.6 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_178_29628"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_178_29628" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-0.72"/>
|
||||
<feGaussianBlur stdDeviation="1.07143"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0178125 0 0 0 0 0.37905 0 0 0 0 0.7125 0 0 0 0.4 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_178_29628"/>
|
||||
</filter>
|
||||
<filter id="filter2_dii_178_29628" x="1.32699" y="9.27808" width="21.0461" height="17.1577" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2.88476"/>
|
||||
<feGaussianBlur stdDeviation="2.16357"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.355333 0 0 0 0 0.683333 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_178_29628"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_178_29628" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-1.1539"/>
|
||||
<feGaussianBlur stdDeviation="0.72119"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.58 0 0 0 0 1 0 0 0 0.4 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_178_29628"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-0.582535"/>
|
||||
<feGaussianBlur stdDeviation="0.388357"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.879167 0 0 0 0 1 0 0 0 0 1 0 0 0 0.75 0"/>
|
||||
<feBlend mode="normal" in2="effect2_innerShadow_178_29628" result="effect3_innerShadow_178_29628"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_178_29628" x1="31.2857" y1="-4.2138" x2="0.7475" y2="26.2897" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#24B5E3"/>
|
||||
<stop offset="0.53305" stop-color="#56CCFF"/>
|
||||
<stop offset="1" stop-color="#0BA7FF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
之前 宽度: | 高度: | 大小: 6.3 KiB |
@@ -1,36 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Carousel } from '@arco-design/web-react';
|
||||
|
||||
const imageSrc = [
|
||||
'//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/f7e8fc1e09c42e30682526252365be1c.jpg~tplv-uwbnlip3yd-webp.webp',
|
||||
'//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/94e8dd2d6dc4efb2c8cfd82c0ff02a2c.jpg~tplv-uwbnlip3yd-webp.webp',
|
||||
'//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/ec447228c59ae1ebe185bab6cd776ca4.jpg~tplv-uwbnlip3yd-webp.webp',
|
||||
'//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/1d1580d2a5a1e27415ff594c756eabd8.jpg~tplv-uwbnlip3yd-webp.webp',
|
||||
];
|
||||
function C() {
|
||||
return (
|
||||
<Carousel
|
||||
indicatorType="slider"
|
||||
showArrow="never"
|
||||
autoPlay
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 160,
|
||||
}}
|
||||
>
|
||||
{imageSrc.map((src, index) => (
|
||||
<div key={index}>
|
||||
<img
|
||||
src={src}
|
||||
style={{
|
||||
width: 280,
|
||||
transform: 'translateY(-30px)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Carousel>
|
||||
);
|
||||
}
|
||||
|
||||
export default C;
|
||||
@@ -1,88 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Spin, Typography } from '@arco-design/web-react';
|
||||
import { DonutChart } from 'bizcharts';
|
||||
import axios from 'axios';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import locale from './locale';
|
||||
|
||||
function PopularContent() {
|
||||
const t = useLocale(locale);
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchData = () => {
|
||||
setLoading(true);
|
||||
axios
|
||||
.get('/api/workplace/content-percentage')
|
||||
.then((res) => {
|
||||
setData(res.data);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Typography.Title heading={6}>
|
||||
{t['workplace.contentPercentage']}
|
||||
</Typography.Title>
|
||||
<Spin loading={loading} style={{ display: 'block' }}>
|
||||
<DonutChart
|
||||
autoFit
|
||||
height={340}
|
||||
data={data}
|
||||
radius={0.7}
|
||||
innerRadius={0.65}
|
||||
angleField="count"
|
||||
colorField="type"
|
||||
color={['#21CCFF', '#313CA9', '#249EFF']}
|
||||
interactions={[
|
||||
{
|
||||
type: 'element-single-selected',
|
||||
},
|
||||
]}
|
||||
tooltip={{ showMarkers: false }}
|
||||
label={{
|
||||
visible: true,
|
||||
type: 'spider',
|
||||
formatter: (v) => `${(v.percent * 100).toFixed(0)}%`,
|
||||
style: {
|
||||
fill: '#86909C',
|
||||
fontSize: 14,
|
||||
},
|
||||
}}
|
||||
legend={{
|
||||
position: 'bottom',
|
||||
}}
|
||||
statistic={{
|
||||
title: {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
lineHeight: 2,
|
||||
color: 'rgb(--var(color-text-1))',
|
||||
},
|
||||
formatter: () => '内容量',
|
||||
},
|
||||
content: {
|
||||
style: {
|
||||
fontSize: '16px',
|
||||
color: 'rgb(--var(color-text-1))',
|
||||
},
|
||||
formatter: (_, data) => {
|
||||
const sum = data.reduce((a, b) => a + b.count, 0);
|
||||
return Number(sum).toLocaleString();
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Spin>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default PopularContent;
|
||||
@@ -1,33 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link, Card, Typography } from '@arco-design/web-react';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import locale from './locale';
|
||||
import styles from './style/docs.module.less';
|
||||
|
||||
const links = {
|
||||
react: 'https://arco.design/react/docs/start',
|
||||
vue: 'https://arco.design/vue/docs/start',
|
||||
designLab: 'https://arco.design/themes',
|
||||
materialMarket: 'https://arco.design/material/',
|
||||
};
|
||||
function QuickOperation() {
|
||||
const t = useLocale(locale);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography.Title heading={6}>{t['workplace.docs']}</Typography.Title>
|
||||
<Link>{t['workplace.seeMore']}</Link>
|
||||
</div>
|
||||
<div className={styles.docs}>
|
||||
{Object.entries(links).map(([key, value]) => (
|
||||
<Link className={styles.link} key={key} href={value} target="_blank">
|
||||
{t[`workplace.${key}`]}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default QuickOperation;
|
||||
@@ -8,13 +8,25 @@ import {
|
||||
Empty,
|
||||
Grid,
|
||||
Message,
|
||||
Progress,
|
||||
Radio,
|
||||
Spin,
|
||||
Statistic,
|
||||
Tag,
|
||||
Timeline,
|
||||
Typography,
|
||||
} from '@arco-design/web-react';
|
||||
import { IconPlus } from '@arco-design/web-react/icon';
|
||||
import {
|
||||
IconArrowRise,
|
||||
IconCompass,
|
||||
IconDownload,
|
||||
IconEye,
|
||||
IconIdcard,
|
||||
IconMobile,
|
||||
IconPlus,
|
||||
IconRobot,
|
||||
IconUserAdd,
|
||||
} from '@arco-design/web-react/icon';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import { getCssVariables, lightColors } from '@/style/tokens';
|
||||
import type { GlobalState } from '@/store';
|
||||
@@ -31,6 +43,7 @@ import styles from './style/index.module.less';
|
||||
const { Row, Col } = Grid;
|
||||
const OVERVIEW_API = '/api/admin/crm/radar/workplace';
|
||||
const LEAD_PAGE_API = '/api/admin/crm/lead/page';
|
||||
|
||||
const EMPTY_KPI: WorkplaceKpi = {
|
||||
tapCount: 0,
|
||||
viewCount: 0,
|
||||
@@ -51,6 +64,8 @@ interface CoolPageData {
|
||||
list?: LeadEntity[];
|
||||
}
|
||||
|
||||
type FeedFilter = 'all' | 'high_intent';
|
||||
|
||||
function isTouchType(value: unknown): value is TouchType {
|
||||
return value === 'nfc' || value === 'qr' || value === 'link';
|
||||
}
|
||||
@@ -66,6 +81,16 @@ function formatStaySeconds(ms: number): string {
|
||||
return String(Math.max(0, Math.round(ms / 1000)));
|
||||
}
|
||||
|
||||
function computeIntentScore(item: WorkplaceRadarItem): number {
|
||||
const staySec = Math.round(item.stayDurationMs / 1000);
|
||||
const blocksCount = item.viewedBlocks?.length || 0;
|
||||
let score = 40;
|
||||
if (staySec > 30) score += 20;
|
||||
if (staySec > 90) score += 20;
|
||||
score += Math.min(blocksCount * 10, 20);
|
||||
return Math.min(score, 99);
|
||||
}
|
||||
|
||||
function escapeCsvCell(value: string): string {
|
||||
if (value.includes(',') || value.includes('"') || value.includes('\n')) {
|
||||
return `"${value.replace(/"/g, '""')}"`;
|
||||
@@ -111,6 +136,7 @@ function Workplace(): React.ReactElement {
|
||||
const userInfo = useSelector((state: GlobalState) => state.userInfo);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [exporting, setExporting] = useState(false);
|
||||
const [feedFilter, setFeedFilter] = useState<FeedFilter>('all');
|
||||
const [overview, setOverview] = useState<WorkplaceOverviewResult>({
|
||||
kpis: EMPTY_KPI,
|
||||
radarFeed: [],
|
||||
@@ -134,7 +160,7 @@ function Workplace(): React.ReactElement {
|
||||
try {
|
||||
const { data: payload } = await axios.post<CoolResponse<WorkplaceOverviewResult>>(
|
||||
OVERVIEW_API,
|
||||
{ feedLimit: 12 }
|
||||
{ feedLimit: 15 }
|
||||
);
|
||||
if (payload.data?.kpis) {
|
||||
setOverview({
|
||||
@@ -165,6 +191,10 @@ function Workplace(): React.ReactElement {
|
||||
history.push('/dashboard/radar-map');
|
||||
};
|
||||
|
||||
const handleOpenAiConfig = () => {
|
||||
history.push('/ai/concierge');
|
||||
};
|
||||
|
||||
const handleExportLeads = async () => {
|
||||
setExporting(true);
|
||||
try {
|
||||
@@ -222,25 +252,67 @@ function Workplace(): React.ReactElement {
|
||||
value > 0 ? styles.deltaUp : value < 0 ? styles.deltaDown : styles.delta;
|
||||
return (
|
||||
<div className={`${styles.delta} ${tone}`}>
|
||||
{t['workplace.kpi.vsYesterday'].replace('{delta}', formatDelta(value))}
|
||||
{value > 0 ? <IconArrowRise className={styles.deltaIcon} /> : null}
|
||||
<span>{t['workplace.kpi.vsYesterday'].replace('{delta}', formatDelta(value))}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const kpis = overview.kpis;
|
||||
|
||||
// 渠道分布统计计算
|
||||
const channelStats = useMemo(() => {
|
||||
const total = overview.radarFeed.length;
|
||||
if (total === 0) {
|
||||
return { nfc: 50, qr: 30, link: 20 };
|
||||
}
|
||||
let nfc = 0;
|
||||
let qr = 0;
|
||||
let link = 0;
|
||||
overview.radarFeed.forEach((item) => {
|
||||
if (item.touchType === 'nfc') nfc += 1;
|
||||
else if (item.touchType === 'qr') qr += 1;
|
||||
else link += 1;
|
||||
});
|
||||
const nfcPct = Math.round((nfc / total) * 100);
|
||||
const qrPct = Math.round((qr / total) * 100);
|
||||
const linkPct = link > 0 ? Math.max(0, 100 - nfcPct - qrPct) : 0;
|
||||
return {
|
||||
nfc: nfcPct,
|
||||
qr: qrPct,
|
||||
link: linkPct,
|
||||
};
|
||||
}, [overview.radarFeed]);
|
||||
|
||||
// 雷达客商列表（根据过滤器筛选）
|
||||
const filteredFeed = useMemo(() => {
|
||||
if (feedFilter === 'high_intent') {
|
||||
return overview.radarFeed.filter((item) => computeIntentScore(item) >= 70);
|
||||
}
|
||||
return overview.radarFeed;
|
||||
}, [feedFilter, overview.radarFeed]);
|
||||
|
||||
return (
|
||||
<div className={styles.page} style={tokenStyle}>
|
||||
{/* 顶部标题与唯 1 主 CTA */}
|
||||
<div className={styles.header}>
|
||||
<div>
|
||||
<Typography.Title heading={5} className={styles.title}>
|
||||
{t['workplace.title']}
|
||||
</Typography.Title>
|
||||
<div className={styles.headerInfo}>
|
||||
<div className={styles.titleRow}>
|
||||
<Typography.Title heading={5} className={styles.title}>
|
||||
{t['workplace.title']}
|
||||
</Typography.Title>
|
||||
<span className={styles.liveIndicator}>
|
||||
<span className={styles.pulseDot} />
|
||||
<span className={styles.liveText}>{t['workplace.radar.liveBadge']}</span>
|
||||
</span>
|
||||
</div>
|
||||
<Typography.Text className={styles.subtitle}>
|
||||
{t['workplace.subtitle']}
|
||||
</Typography.Text>
|
||||
<Typography.Text className={styles.welcome}>{welcome}</Typography.Text>
|
||||
</div>
|
||||
|
||||
{/* 铁律：全屏唯 1 一个主 CTA 按钮 */}
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<IconPlus />}
|
||||
@@ -252,45 +324,194 @@ function Workplace(): React.ReactElement {
|
||||
</div>
|
||||
|
||||
<Spin loading={loading} style={{ display: 'block' }}>
|
||||
{/* KPI 核心指标阵列 */}
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card bordered={false} className={styles.kpiCard}>
|
||||
<Statistic title={t['workplace.kpi.taps']} value={kpis.tapCount} />
|
||||
<div className={styles.kpiHeader}>
|
||||
<span className={styles.kpiTitle}>{t['workplace.kpi.taps']}</span>
|
||||
<span className={styles.kpiIconWrapper}>
|
||||
<IconMobile className={styles.kpiIcon} />
|
||||
</span>
|
||||
</div>
|
||||
<Statistic value={kpis.tapCount} />
|
||||
{renderDelta(kpis.tapDelta)}
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card bordered={false} className={styles.kpiCard}>
|
||||
<Statistic title={t['workplace.kpi.views']} value={kpis.viewCount} />
|
||||
<div className={styles.kpiHeader}>
|
||||
<span className={styles.kpiTitle}>{t['workplace.kpi.views']}</span>
|
||||
<span className={styles.kpiIconWrapper}>
|
||||
<IconEye className={styles.kpiIcon} />
|
||||
</span>
|
||||
</div>
|
||||
<Statistic value={kpis.viewCount} />
|
||||
{renderDelta(kpis.viewDelta)}
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card bordered={false} className={styles.kpiCard}>
|
||||
<Statistic title={t['workplace.kpi.leads']} value={kpis.newLeadCount} />
|
||||
<div className={styles.kpiHeader}>
|
||||
<span className={styles.kpiTitle}>{t['workplace.kpi.leads']}</span>
|
||||
<span className={styles.kpiIconWrapper}>
|
||||
<IconUserAdd className={styles.kpiIcon} />
|
||||
</span>
|
||||
</div>
|
||||
<Statistic value={kpis.newLeadCount} />
|
||||
{renderDelta(kpis.newLeadDelta)}
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card bordered={false} className={styles.kpiCard}>
|
||||
<div className={styles.kpiHeader}>
|
||||
<span className={styles.kpiTitle}>{t['workplace.kpi.conversion']}</span>
|
||||
<span className={styles.kpiIconWrapper}>
|
||||
<IconIdcard className={styles.kpiIcon} />
|
||||
</span>
|
||||
</div>
|
||||
<Statistic
|
||||
title={t['workplace.kpi.conversion']}
|
||||
value={kpis.conversionRate}
|
||||
suffix="%"
|
||||
precision={1}
|
||||
/>
|
||||
<div className={styles.kpiSubText}>
|
||||
{t['workplace.kpi.conversionSub']}
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 运营官转化漏斗与渠道矩阵 */}
|
||||
<Row gutter={[16, 16]} className={styles.middleRow}>
|
||||
<Col xs={24} lg={16}>
|
||||
<Card bordered={false} className={styles.panel} title={t['workplace.funnel.title']}>
|
||||
<div className={styles.funnelContainer}>
|
||||
<div className={styles.funnelStep}>
|
||||
<div className={styles.funnelLabel}>{t['workplace.funnel.tap']}</div>
|
||||
<div className={styles.funnelValue}>{kpis.tapCount}</div>
|
||||
<div className={styles.funnelBarWrapper}>
|
||||
<div className={styles.funnelBar} style={{ width: '100%' }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.funnelStep}>
|
||||
<div className={styles.funnelLabel}>{t['workplace.funnel.view']}</div>
|
||||
<div className={styles.funnelValue}>{kpis.viewCount}</div>
|
||||
<div className={styles.funnelBarWrapper}>
|
||||
<div
|
||||
className={styles.funnelBar}
|
||||
style={{
|
||||
width: `${Math.min(
|
||||
100,
|
||||
Math.max(15, kpis.tapCount > 0 ? (kpis.viewCount / kpis.tapCount) * 100 : 80)
|
||||
)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.funnelStep}>
|
||||
<div className={styles.funnelLabel}>{t['workplace.funnel.interact']}</div>
|
||||
<div className={styles.funnelValue}>
|
||||
{overview.radarFeed.filter((f) => f.stayDurationMs > 10000).length}
|
||||
</div>
|
||||
<div className={styles.funnelBarWrapper}>
|
||||
<div
|
||||
className={styles.funnelBar}
|
||||
style={{
|
||||
width: `${Math.min(
|
||||
100,
|
||||
Math.max(
|
||||
15,
|
||||
kpis.viewCount > 0
|
||||
? (overview.radarFeed.filter((f) => f.stayDurationMs > 10000).length /
|
||||
kpis.viewCount) *
|
||||
100
|
||||
: 50
|
||||
)
|
||||
)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.funnelStep}>
|
||||
<div className={styles.funnelLabel}>{t['workplace.funnel.lead']}</div>
|
||||
<div className={styles.funnelValue}>{kpis.newLeadCount}</div>
|
||||
<div className={styles.funnelBarWrapper}>
|
||||
<div
|
||||
className={`${styles.funnelBar} ${styles.funnelBarLead}`}
|
||||
style={{
|
||||
width: `${Math.min(
|
||||
100,
|
||||
Math.max(
|
||||
15,
|
||||
kpis.viewCount > 0 ? (kpis.newLeadCount / kpis.viewCount) * 100 : 25
|
||||
)
|
||||
)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} lg={8}>
|
||||
<Card bordered={false} className={styles.panel} title={t['workplace.channel.title']}>
|
||||
<div className={styles.channelRow}>
|
||||
<div className={styles.channelMeta}>
|
||||
<span className={styles.channelName}>{t['workplace.channel.nfc']}</span>
|
||||
<span className={styles.channelPercent}>{channelStats.nfc}%</span>
|
||||
</div>
|
||||
<Progress percent={channelStats.nfc} color={lightColors.primary} showText={false} />
|
||||
</div>
|
||||
|
||||
<div className={styles.channelRow}>
|
||||
<div className={styles.channelMeta}>
|
||||
<span className={styles.channelName}>{t['workplace.channel.qr']}</span>
|
||||
<span className={styles.channelPercent}>{channelStats.qr}%</span>
|
||||
</div>
|
||||
<Progress percent={channelStats.qr} color={lightColors.ai} showText={false} />
|
||||
</div>
|
||||
|
||||
<div className={styles.channelRow}>
|
||||
<div className={styles.channelMeta}>
|
||||
<span className={styles.channelName}>{t['workplace.channel.link']}</span>
|
||||
<span className={styles.channelPercent}>{channelStats.link}%</span>
|
||||
</div>
|
||||
<Progress percent={channelStats.link} color={lightColors.text2} showText={false} />
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 核心双栏：实时客商雷达流 VS 运营工具箱 */}
|
||||
<Row gutter={[16, 16]} className={styles.main}>
|
||||
<Col xs={24} lg={16}>
|
||||
<Card
|
||||
bordered={false}
|
||||
className={styles.panel}
|
||||
title={t['workplace.radar.title']}
|
||||
title={
|
||||
<div className={styles.panelHeader}>
|
||||
<span>{t['workplace.radar.title']}</span>
|
||||
<Radio.Group
|
||||
type="button"
|
||||
size="mini"
|
||||
value={feedFilter}
|
||||
onChange={(val) => setFeedFilter(val as FeedFilter)}
|
||||
>
|
||||
<Radio value="all">{t['workplace.radar.filterAll']}</Radio>
|
||||
<Radio value="high_intent">{t['workplace.radar.filterHighIntent']}</Radio>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{overview.radarFeed.length === 0 ? (
|
||||
{filteredFeed.length === 0 ? (
|
||||
<div className={styles.empty}>
|
||||
<Empty
|
||||
description={
|
||||
@@ -304,8 +525,8 @@ function Workplace(): React.ReactElement {
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Timeline>
|
||||
{overview.radarFeed.map((item: WorkplaceRadarItem) => {
|
||||
<Timeline className={styles.timelineList}>
|
||||
{filteredFeed.map((item: WorkplaceRadarItem) => {
|
||||
const touchType = isTouchType(item.touchType)
|
||||
? item.touchType
|
||||
: 'link';
|
||||
@@ -313,14 +534,21 @@ function Workplace(): React.ReactElement {
|
||||
.filter(Boolean)
|
||||
.join(', ');
|
||||
const blocks = (item.viewedBlocks || []).join(' / ');
|
||||
const intentScore = computeIntentScore(item);
|
||||
return (
|
||||
<Timeline.Item key={String(item.id)}>
|
||||
<div className={styles.feedMeta}>
|
||||
<Typography.Text>{locationLabel || '—'}</Typography.Text>
|
||||
<Typography.Text bold>{locationLabel || '—'}</Typography.Text>
|
||||
<Tag color={getChannelColor(touchType)} size="small">
|
||||
{getChannelLabel(touchType)}
|
||||
</Tag>
|
||||
<Typography.Text type="secondary">
|
||||
<Tag
|
||||
color={intentScore >= 70 ? 'green' : 'gray'}
|
||||
size="small"
|
||||
>
|
||||
{t['workplace.radar.intentScore'].replace('{score}', String(intentScore))}
|
||||
</Tag>
|
||||
<Typography.Text type="secondary" className={styles.stayTime}>
|
||||
{t['workplace.radar.stay'].replace(
|
||||
'{seconds}',
|
||||
formatStaySeconds(item.stayDurationMs)
|
||||
@@ -339,37 +567,88 @@ function Workplace(): React.ReactElement {
|
||||
)}
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 运营工具箱 */}
|
||||
<Col xs={24} lg={8}>
|
||||
<Card
|
||||
bordered={false}
|
||||
className={styles.panel}
|
||||
title={t['workplace.shortcut.title']}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.shortcut}
|
||||
onClick={handleIssueCards}
|
||||
>
|
||||
<span className={styles.shortcutLabel}>
|
||||
{t['workplace.shortcut.issueCard']}
|
||||
</span>
|
||||
<span className={styles.shortcutHint}>
|
||||
{t['workplace.shortcut.issueCardHint']}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.shortcut}
|
||||
onClick={handleExportLeads}
|
||||
disabled={exporting}
|
||||
>
|
||||
<span className={styles.shortcutLabel}>
|
||||
{t['workplace.shortcut.exportLeads']}
|
||||
</span>
|
||||
<span className={styles.shortcutHint}>
|
||||
{t['workplace.shortcut.exportLeadsHint']}
|
||||
</span>
|
||||
</button>
|
||||
<div className={styles.toolboxList}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.shortcut}
|
||||
onClick={handleIssueCards}
|
||||
>
|
||||
<div className={styles.shortcutIconBox}>
|
||||
<IconIdcard className={styles.toolIcon} />
|
||||
</div>
|
||||
<div className={styles.shortcutContent}>
|
||||
<span className={styles.shortcutLabel}>
|
||||
{t['workplace.shortcut.issueCard']}
|
||||
</span>
|
||||
<span className={styles.shortcutHint}>
|
||||
{t['workplace.shortcut.issueCardHint']}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={styles.shortcut}
|
||||
onClick={handleExportLeads}
|
||||
disabled={exporting}
|
||||
>
|
||||
<div className={styles.shortcutIconBox}>
|
||||
<IconDownload className={styles.toolIcon} />
|
||||
</div>
|
||||
<div className={styles.shortcutContent}>
|
||||
<span className={styles.shortcutLabel}>
|
||||
{t['workplace.shortcut.exportLeads']}
|
||||
</span>
|
||||
<span className={styles.shortcutHint}>
|
||||
{t['workplace.shortcut.exportLeadsHint']}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={styles.shortcut}
|
||||
onClick={handleOpenRadar}
|
||||
>
|
||||
<div className={styles.shortcutIconBox}>
|
||||
<IconCompass className={styles.toolIcon} />
|
||||
</div>
|
||||
<div className={styles.shortcutContent}>
|
||||
<span className={styles.shortcutLabel}>
|
||||
{t['workplace.shortcut.radarMap']}
|
||||
</span>
|
||||
<span className={styles.shortcutHint}>
|
||||
{t['workplace.shortcut.radarMapHint']}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={styles.shortcut}
|
||||
onClick={handleOpenAiConfig}
|
||||
>
|
||||
<div className={styles.shortcutIconBox}>
|
||||
<IconRobot className={styles.toolIcon} />
|
||||
</div>
|
||||
<div className={styles.shortcutContent}>
|
||||
<span className={styles.shortcutLabel}>
|
||||
{t['workplace.shortcut.aiConfig']}
|
||||
</span>
|
||||
<span className={styles.shortcutHint}>
|
||||
{t['workplace.shortcut.aiConfigHint']}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
const i18n = {
|
||||
'en-US': {
|
||||
'workplace.title': 'Business overview',
|
||||
'workplace.subtitle': 'Today’s NFC taps, card views, new leads, and close rate',
|
||||
'workplace.subtitle': 'Real-time overview of NFC taps, page views, new leads, and close rate',
|
||||
'workplace.welcome': 'Welcome back, {name}',
|
||||
'workplace.welcomeGuest': 'Welcome back',
|
||||
'workplace.cta.newCard': 'New card',
|
||||
@@ -9,20 +9,35 @@ const i18n = {
|
||||
'workplace.kpi.views': 'Card views',
|
||||
'workplace.kpi.leads': 'New leads',
|
||||
'workplace.kpi.conversion': 'Close rate',
|
||||
'workplace.kpi.conversionSub': 'Taps to leads',
|
||||
'workplace.kpi.vsYesterday': 'vs yesterday {delta}',
|
||||
'workplace.radar.title': 'Live visitor radar',
|
||||
'workplace.radar.liveBadge': 'Live Radar Active',
|
||||
'workplace.radar.filterAll': 'All Activity',
|
||||
'workplace.radar.filterHighIntent': 'High Intent Only',
|
||||
'workplace.radar.intentScore': 'Intent {score}',
|
||||
'workplace.radar.empty': 'No one has opened a card today.',
|
||||
'workplace.radar.emptyAction': 'Open global radar',
|
||||
'workplace.radar.stay': '{seconds}s stay',
|
||||
'workplace.radar.viewing': 'Viewing {blocks}',
|
||||
'workplace.funnel.title': 'Conversion Funnel',
|
||||
'workplace.funnel.tap': 'Physical NFC',
|
||||
'workplace.funnel.view': 'Page Views',
|
||||
'workplace.funnel.interact': 'Interactions',
|
||||
'workplace.funnel.lead': 'CRM Leads',
|
||||
'workplace.channel.title': 'Touch Channels',
|
||||
'workplace.shortcut.title': 'Shortcuts',
|
||||
'workplace.shortcut.issueCard': 'Issue NFC cards',
|
||||
'workplace.shortcut.issueCardHint': 'Generate short links and print files',
|
||||
'workplace.shortcut.exportLeads': 'Export leads',
|
||||
'workplace.shortcut.exportLeadsHint': 'Download today’s CRM list as CSV',
|
||||
'workplace.shortcut.exportLeadsHint': 'Download latest CRM lead list as CSV',
|
||||
'workplace.shortcut.radarMap': 'Global Radar Map',
|
||||
'workplace.shortcut.radarMapHint': 'Explore real-time visitor geography and heatmaps',
|
||||
'workplace.shortcut.aiConfig': 'AI Concierge Strategy',
|
||||
'workplace.shortcut.aiConfigHint': 'Tune multi-lingual greeting and lead qualification',
|
||||
'workplace.channel.nfc': 'NFC',
|
||||
'workplace.channel.qr': 'QR',
|
||||
'workplace.channel.link': 'Link',
|
||||
'workplace.channel.qr': 'QR Code',
|
||||
'workplace.channel.link': 'Direct Link',
|
||||
'workplace.export.success': 'Lead list exported',
|
||||
'workplace.export.empty': 'No leads to export yet',
|
||||
'workplace.export.fail': 'Unable to export leads',
|
||||
@@ -30,7 +45,7 @@ const i18n = {
|
||||
},
|
||||
'zh-CN': {
|
||||
'workplace.title': '商务概览',
|
||||
'workplace.subtitle': '今日触碰、浏览、新线索与成交转化',
|
||||
'workplace.subtitle': '实时追踪 NFC 触碰、微官网浏览、新客留资与商机转化率',
|
||||
'workplace.welcome': '欢迎回来，{name}',
|
||||
'workplace.welcomeGuest': '欢迎回来',
|
||||
'workplace.cta.newCard': '新建名片',
|
||||
@@ -38,20 +53,35 @@ const i18n = {
|
||||
'workplace.kpi.views': '浏览量',
|
||||
'workplace.kpi.leads': '新线索',
|
||||
'workplace.kpi.conversion': '成交转化',
|
||||
'workplace.kpi.conversionSub': '触碰转留资',
|
||||
'workplace.kpi.vsYesterday': '较昨日 {delta}',
|
||||
'workplace.radar.title': '今日实时雷达',
|
||||
'workplace.radar.liveBadge': '实时雷达在线',
|
||||
'workplace.radar.filterAll': '全量动态',
|
||||
'workplace.radar.filterHighIntent': '仅看高意向',
|
||||
'workplace.radar.intentScore': '意向分 {score}',
|
||||
'workplace.radar.empty': '今天还没有访客打开名片。',
|
||||
'workplace.radar.emptyAction': '查看全球雷达',
|
||||
'workplace.radar.stay': '停留 {seconds} 秒',
|
||||
'workplace.radar.viewing': '正在查看 {blocks}',
|
||||
'workplace.shortcut.title': '快捷入口',
|
||||
'workplace.funnel.title': '出海转化漏斗',
|
||||
'workplace.funnel.tap': 'NFC 触碰',
|
||||
'workplace.funnel.view': '官网浏览',
|
||||
'workplace.funnel.interact': '意向交互',
|
||||
'workplace.funnel.lead': '商机留资',
|
||||
'workplace.channel.title': '触达渠道分布',
|
||||
'workplace.shortcut.title': '运营工具箱',
|
||||
'workplace.shortcut.issueCard': '批量发卡',
|
||||
'workplace.shortcut.issueCardHint': '生成短链与打印物料',
|
||||
'workplace.shortcut.issueCardHint': '生成短链与制卡打印物料',
|
||||
'workplace.shortcut.exportLeads': '导出线索',
|
||||
'workplace.shortcut.exportLeadsHint': '下载潜客列表为 CSV',
|
||||
'workplace.shortcut.exportLeadsHint': '下载最新潜客名单为 CSV 表格',
|
||||
'workplace.shortcut.radarMap': '全球雷达大屏',
|
||||
'workplace.shortcut.radarMapHint': '查看全球访客地理分布与实时热力图',
|
||||
'workplace.shortcut.aiConfig': 'AI 顾问接待策略',
|
||||
'workplace.shortcut.aiConfigHint': '配置多语言接待话术与自动留资意向阈值',
|
||||
'workplace.channel.nfc': 'NFC',
|
||||
'workplace.channel.qr': '二维码',
|
||||
'workplace.channel.link': '链接',
|
||||
'workplace.channel.link': '直链',
|
||||
'workplace.export.success': '线索已导出',
|
||||
'workplace.export.empty': '暂无可导出的线索',
|
||||
'workplace.export.fail': '线索导出失败',
|
||||
@@ -59,7 +89,7 @@ const i18n = {
|
||||
},
|
||||
'ar-SA': {
|
||||
'workplace.title': 'نظرة العمل',
|
||||
'workplace.subtitle': 'لمسات NFC ومشاهدات البطاقة والعملاء الجدد ومعدل الإغلاق اليوم',
|
||||
'workplace.subtitle': 'نظرة فورية على لمسات NFC ومشاهدات البطاقة والعملاء الجدد ومعدل الإغلاق',
|
||||
'workplace.welcome': 'مرحباً بعودتك، {name}',
|
||||
'workplace.welcomeGuest': 'مرحباً بعودتك',
|
||||
'workplace.cta.newCard': 'بطاقة جديدة',
|
||||
@@ -67,20 +97,35 @@ const i18n = {
|
||||
'workplace.kpi.views': 'مشاهدات البطاقة',
|
||||
'workplace.kpi.leads': 'عملاء جدد',
|
||||
'workplace.kpi.conversion': 'معدل الإغلاق',
|
||||
'workplace.kpi.conversionSub': 'من لمس إلى عميل',
|
||||
'workplace.kpi.vsYesterday': 'مقارنة بالأمس {delta}',
|
||||
'workplace.radar.title': 'رادار الزوار المباشر',
|
||||
'workplace.radar.liveBadge': 'رادار حي نشط',
|
||||
'workplace.radar.filterAll': 'كافة الأنشطة',
|
||||
'workplace.radar.filterHighIntent': 'المهتمون فقط',
|
||||
'workplace.radar.intentScore': 'درجة {score}',
|
||||
'workplace.radar.empty': 'لم يفتح أحد بطاقة اليوم.',
|
||||
'workplace.radar.emptyAction': 'فتح الرادار العالمي',
|
||||
'workplace.radar.stay': 'مكث {seconds} ث',
|
||||
'workplace.radar.viewing': 'يشاهد {blocks}',
|
||||
'workplace.shortcut.title': 'اختصارات',
|
||||
'workplace.funnel.title': 'قمع التحويل',
|
||||
'workplace.funnel.tap': 'لمس NFC',
|
||||
'workplace.funnel.view': 'عرض الصفحة',
|
||||
'workplace.funnel.interact': 'تفاعل مهتم',
|
||||
'workplace.funnel.lead': 'عميل محتمل',
|
||||
'workplace.channel.title': 'قنوات الاتصال',
|
||||
'workplace.shortcut.title': 'صندوق أدوات التشغيل',
|
||||
'workplace.shortcut.issueCard': 'إصدار بطاقات NFC',
|
||||
'workplace.shortcut.issueCardHint': 'إنشاء الروابط وملفات الطباعة',
|
||||
'workplace.shortcut.issueCardHint': 'إنشاء الروابط وملفات الطباعة للبطاقات',
|
||||
'workplace.shortcut.exportLeads': 'تصدير العملاء',
|
||||
'workplace.shortcut.exportLeadsHint': 'تنزيل قائمة CRM بتنسيق CSV',
|
||||
'workplace.shortcut.exportLeadsHint': 'تنزيل قائمة CRM المحدثة بتنسيق CSV',
|
||||
'workplace.shortcut.radarMap': 'خريطة الرادار العالمية',
|
||||
'workplace.shortcut.radarMapHint': 'استكشف التوزيع الجغرافي للزوار وخريطة الحرارة',
|
||||
'workplace.shortcut.aiConfig': 'استراتيجية المساعد الذكي',
|
||||
'workplace.shortcut.aiConfigHint': 'تكوين الترحيب متعدد اللغات وتأهيل العملاء المحتملين',
|
||||
'workplace.channel.nfc': 'NFC',
|
||||
'workplace.channel.qr': 'رمز QR',
|
||||
'workplace.channel.link': 'رابط',
|
||||
'workplace.channel.link': 'رابط مباشر',
|
||||
'workplace.export.success': 'تم تصدير قائمة العملاء',
|
||||
'workplace.export.empty': 'لا توجد عملاء للتصدير',
|
||||
'workplace.export.fail': 'تعذر تصدير العملاء',
|
||||
|
||||
@@ -1,117 +0,0 @@
|
||||
import Mock from 'mockjs';
|
||||
import qs from 'query-string';
|
||||
import setupMock from '@/utils/setupMock';
|
||||
|
||||
setupMock({
|
||||
setup: () => {
|
||||
Mock.mock(new RegExp('/api/workplace/overview-content'), () => {
|
||||
const year = new Date().getFullYear();
|
||||
const getLineData = () => {
|
||||
return new Array(12).fill(0).map((_item, index) => ({
|
||||
date: `${year}-${index + 1}`,
|
||||
count: Mock.Random.natural(20000, 75000),
|
||||
}));
|
||||
};
|
||||
return {
|
||||
allContents: '373.5w+',
|
||||
liveContents: '368',
|
||||
increaseComments: '8874',
|
||||
growthRate: '2.8%',
|
||||
chartData: getLineData(),
|
||||
};
|
||||
});
|
||||
|
||||
const getList = () => {
|
||||
const { list } = Mock.mock({
|
||||
'list|100': [
|
||||
{
|
||||
'rank|+1': 1,
|
||||
title: () =>
|
||||
Mock.Random.pick([
|
||||
'经济日报：财政政策要精准提升效能',
|
||||
'“双12”遇冷消费者厌倦了电商平台的促销“套路”',
|
||||
'致敬坚守战“疫”一线的社区工作者',
|
||||
'普高还是职高？家长们陷入选校难题',
|
||||
]),
|
||||
pv: function () {
|
||||
return 500000 - 3200 * this.rank;
|
||||
},
|
||||
increase: '@float(-1, 1)',
|
||||
},
|
||||
],
|
||||
});
|
||||
return list;
|
||||
};
|
||||
const listText = getList();
|
||||
const listPic = getList();
|
||||
const listVideo = getList();
|
||||
|
||||
Mock.mock(new RegExp('/api/workplace/popular-contents'), (params) => {
|
||||
const {
|
||||
page = 1,
|
||||
pageSize = 5,
|
||||
category = 0,
|
||||
} = qs.parseUrl(params.url).query as unknown as {
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
category?: number;
|
||||
};
|
||||
|
||||
const list = [listText, listPic, listVideo][Number(category)];
|
||||
return {
|
||||
list: list.slice((page - 1) * pageSize, page * pageSize),
|
||||
total: 100,
|
||||
};
|
||||
});
|
||||
|
||||
Mock.mock(new RegExp('/api/workplace/content-percentage'), () => {
|
||||
return [
|
||||
{
|
||||
type: '纯文本',
|
||||
count: 148564,
|
||||
percent: 0.16,
|
||||
},
|
||||
{
|
||||
type: '图文类',
|
||||
count: 334271,
|
||||
percent: 0.36,
|
||||
},
|
||||
{
|
||||
type: '视频类',
|
||||
count: 445695,
|
||||
percent: 0.48,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
Mock.mock(new RegExp('/api/workplace/announcement'), () => {
|
||||
return [
|
||||
{
|
||||
type: 'activity',
|
||||
key: '1',
|
||||
content: '内容最新优惠活动',
|
||||
},
|
||||
{
|
||||
type: 'info',
|
||||
key: '2',
|
||||
content: '新增内容尚未通过审核，详情请点击查看。',
|
||||
},
|
||||
{
|
||||
type: 'notice',
|
||||
key: '3',
|
||||
content: '当前产品试用期即将结束，如需续费请点击查看。',
|
||||
},
|
||||
{
|
||||
type: 'notice',
|
||||
key: '4',
|
||||
content: '1 月新系统升级计划通知',
|
||||
},
|
||||
{
|
||||
type: 'info',
|
||||
key: '5',
|
||||
content: '新增内容已经通过审核，详情请点击查看。',
|
||||
},
|
||||
];
|
||||
});
|
||||
},
|
||||
});
|
||||
@@ -1,156 +0,0 @@
|
||||
import React, { useState, useEffect, ReactNode } from 'react';
|
||||
import {
|
||||
Grid,
|
||||
Card,
|
||||
Typography,
|
||||
Divider,
|
||||
Skeleton,
|
||||
Link,
|
||||
} from '@arco-design/web-react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { IconCaretUp } from '@arco-design/web-react/icon';
|
||||
import OverviewAreaLine from '@/components/Chart/overview-area-line';
|
||||
import axios from 'axios';
|
||||
import locale from './locale';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import styles from './style/overview.module.less';
|
||||
import IconCalendar from './assets/calendar.svg';
|
||||
import IconComments from './assets/comments.svg';
|
||||
import IconContent from './assets/content.svg';
|
||||
import IconIncrease from './assets/increase.svg';
|
||||
|
||||
const { Row, Col } = Grid;
|
||||
|
||||
type StatisticItemType = {
|
||||
icon?: ReactNode;
|
||||
title?: ReactNode;
|
||||
count?: ReactNode;
|
||||
loading?: boolean;
|
||||
unit?: ReactNode;
|
||||
};
|
||||
|
||||
function StatisticItem(props: StatisticItemType) {
|
||||
const { icon, title, count, loading, unit } = props;
|
||||
return (
|
||||
<div className={styles.item}>
|
||||
<div className={styles.icon}>{icon}</div>
|
||||
<div>
|
||||
<Skeleton loading={loading} text={{ rows: 2, width: 60 }} animation>
|
||||
<div className={styles.title}>{title}</div>
|
||||
<div className={styles.count}>
|
||||
{count}
|
||||
<span className={styles.unit}>{unit}</span>
|
||||
</div>
|
||||
</Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type DataType = {
|
||||
allContents?: string;
|
||||
liveContents?: string;
|
||||
increaseComments?: string;
|
||||
growthRate?: string;
|
||||
chartData?: { count?: number; date?: string }[];
|
||||
down?: boolean;
|
||||
};
|
||||
|
||||
function Overview() {
|
||||
const [data, setData] = useState<DataType>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const t = useLocale(locale);
|
||||
|
||||
const userInfo = useSelector((state: any) => state.userInfo || {});
|
||||
|
||||
const fetchData = () => {
|
||||
setLoading(true);
|
||||
axios
|
||||
.get('/api/workplace/overview-content')
|
||||
.then((res) => {
|
||||
setData(res.data);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Typography.Title heading={5}>
|
||||
{t['workplace.welcomeBack']}
|
||||
{userInfo.name}
|
||||
</Typography.Title>
|
||||
<Divider />
|
||||
<Row>
|
||||
<Col flex={1}>
|
||||
<StatisticItem
|
||||
icon={<IconCalendar />}
|
||||
title={t['workplace.totalOnlyData']}
|
||||
count={data.allContents}
|
||||
loading={loading}
|
||||
unit={t['workplace.pecs']}
|
||||
/>
|
||||
</Col>
|
||||
<Divider type="vertical" className={styles.divider} />
|
||||
<Col flex={1}>
|
||||
<StatisticItem
|
||||
icon={<IconContent />}
|
||||
title={t['workplace.contentInMarket']}
|
||||
count={data.liveContents}
|
||||
loading={loading}
|
||||
unit={t['workplace.pecs']}
|
||||
/>
|
||||
</Col>
|
||||
<Divider type="vertical" className={styles.divider} />
|
||||
<Col flex={1}>
|
||||
<StatisticItem
|
||||
icon={<IconComments />}
|
||||
title={t['workplace.comments']}
|
||||
count={data.increaseComments}
|
||||
loading={loading}
|
||||
unit={t['workplace.pecs']}
|
||||
/>
|
||||
</Col>
|
||||
<Divider type="vertical" className={styles.divider} />
|
||||
<Col flex={1}>
|
||||
<StatisticItem
|
||||
icon={<IconIncrease />}
|
||||
title={t['workplace.growth']}
|
||||
count={
|
||||
<span>
|
||||
{data.growthRate}{' '}
|
||||
<IconCaretUp
|
||||
style={{ fontSize: 18, color: 'rgb(var(--green-6))' }}
|
||||
/>
|
||||
</span>
|
||||
}
|
||||
loading={loading}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider />
|
||||
<div>
|
||||
<div className={styles.ctw}>
|
||||
<Typography.Paragraph
|
||||
className={styles['chart-title']}
|
||||
style={{ marginBottom: 0 }}
|
||||
>
|
||||
{t['workplace.contentData']}
|
||||
<span className={styles['chart-sub-title']}>
|
||||
({t['workplace.1year']})
|
||||
</span>
|
||||
</Typography.Paragraph>
|
||||
<Link>{t['workplace.seeMore']}</Link>
|
||||
</div>
|
||||
<OverviewAreaLine data={data.chartData} loading={loading} />
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Overview;
|
||||
@@ -1,115 +0,0 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { Link, Card, Radio, Table, Typography } from '@arco-design/web-react';
|
||||
import { IconCaretDown, IconCaretUp } from '@arco-design/web-react/icon';
|
||||
import axios from 'axios';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import locale from './locale';
|
||||
import styles from './style/popular-contents.module.less';
|
||||
|
||||
function PopularContent() {
|
||||
const t = useLocale(locale);
|
||||
const [type, setType] = useState(0);
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [page, setPage] = useState(1);
|
||||
const [total, setTotal] = useState(0);
|
||||
|
||||
const fetchData = useCallback(() => {
|
||||
setLoading(true);
|
||||
axios
|
||||
.get(
|
||||
`/api/workplace/popular-contents?page=${page}&pageSize=5&category=${type}`
|
||||
)
|
||||
.then((res) => {
|
||||
setData(res.data.list);
|
||||
setTotal(res.data.total);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}, [page, type]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [page, fetchData]);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: t['workplace.column.rank'],
|
||||
dataIndex: 'rank',
|
||||
width: 65,
|
||||
},
|
||||
{
|
||||
title: t['workplace.column.title'],
|
||||
dataIndex: 'title',
|
||||
render: (x) => (
|
||||
<Typography.Paragraph style={{ margin: 0 }} ellipsis>
|
||||
{x}
|
||||
</Typography.Paragraph>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t['workplace.column.pv'],
|
||||
dataIndex: 'pv',
|
||||
width: 100,
|
||||
render: (text) => {
|
||||
return `${text / 1000}k`;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t['workplace.column.increase'],
|
||||
dataIndex: 'increase',
|
||||
sorter: (a, b) => a.increase - b.increase,
|
||||
width: 110,
|
||||
render: (text) => {
|
||||
return (
|
||||
<span>
|
||||
{`${(text * 100).toFixed(2)}%`}
|
||||
<span className={styles['symbol']}>
|
||||
{text < 0 ? (
|
||||
<IconCaretUp style={{ color: 'rgb(var(--green-6))' }} />
|
||||
) : (
|
||||
<IconCaretDown style={{ color: 'rgb(var(--red-6))' }} />
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography.Title heading={6}>
|
||||
{t['workplace.popularContents']}
|
||||
</Typography.Title>
|
||||
<Link>{t['workplace.seeMore']}</Link>
|
||||
</div>
|
||||
<Radio.Group
|
||||
type="button"
|
||||
value={type}
|
||||
onChange={setType}
|
||||
options={[
|
||||
{ label: t['workplace.text'], value: 0 },
|
||||
{ label: t['workplace.image'], value: 1 },
|
||||
{ label: t['workplace.video'], value: 2 },
|
||||
]}
|
||||
style={{ marginBottom: 16 }}
|
||||
/>
|
||||
<Table
|
||||
rowKey="rank"
|
||||
columns={columns}
|
||||
data={data}
|
||||
loading={loading}
|
||||
tableLayoutFixed
|
||||
onChange={(pagination) => {
|
||||
setPage(pagination.current);
|
||||
}}
|
||||
pagination={{ total, current: page, pageSize: 5, simple: true }}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default PopularContent;
|
||||
@@ -1,117 +0,0 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Link,
|
||||
Card,
|
||||
Divider,
|
||||
Message,
|
||||
Typography,
|
||||
} from '@arco-design/web-react';
|
||||
import {
|
||||
IconFile,
|
||||
IconStorage,
|
||||
IconSettings,
|
||||
IconMobile,
|
||||
IconFire,
|
||||
} from '@arco-design/web-react/icon';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import locale from './locale';
|
||||
import styles from './style/shortcuts.module.less';
|
||||
|
||||
function Shortcuts() {
|
||||
const t = useLocale(locale);
|
||||
|
||||
const shortcuts = [
|
||||
{
|
||||
title: t['workplace.contentMgmt'],
|
||||
key: 'Content Management',
|
||||
icon: <IconFile />,
|
||||
},
|
||||
{
|
||||
title: t['workplace.contentStatistic'],
|
||||
key: 'Content Statistic',
|
||||
icon: <IconStorage />,
|
||||
},
|
||||
{
|
||||
title: t['workplace.advancedMgmt'],
|
||||
key: 'Advanced Management',
|
||||
icon: <IconSettings />,
|
||||
},
|
||||
{
|
||||
title: t['workplace.onlinePromotion'],
|
||||
key: 'Online Promotion',
|
||||
icon: <IconMobile />,
|
||||
},
|
||||
{
|
||||
title: t['workplace.marketing'],
|
||||
key: 'Marketing',
|
||||
icon: <IconFire />,
|
||||
},
|
||||
];
|
||||
|
||||
const recentShortcuts = [
|
||||
{
|
||||
title: t['workplace.contentStatistic'],
|
||||
key: 'Content Statistic',
|
||||
icon: <IconStorage />,
|
||||
},
|
||||
{
|
||||
title: t['workplace.contentMgmt'],
|
||||
key: 'Content Management',
|
||||
icon: <IconFile />,
|
||||
},
|
||||
{
|
||||
title: t['workplace.advancedMgmt'],
|
||||
key: 'Advanced Management',
|
||||
icon: <IconSettings />,
|
||||
},
|
||||
];
|
||||
|
||||
function onClickShortcut(key) {
|
||||
Message.info({
|
||||
content: (
|
||||
<span>
|
||||
You clicked <b>{key}</b>
|
||||
</span>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography.Title heading={6}>
|
||||
{t['workplace.shortcuts']}
|
||||
</Typography.Title>
|
||||
<Link>{t['workplace.seeMore']}</Link>
|
||||
</div>
|
||||
<div className={styles.shortcuts}>
|
||||
{shortcuts.map((shortcut) => (
|
||||
<div
|
||||
className={styles.item}
|
||||
key={shortcut.key}
|
||||
onClick={() => onClickShortcut(shortcut.key)}
|
||||
>
|
||||
<div className={styles.icon}>{shortcut.icon}</div>
|
||||
<div className={styles.title}>{shortcut.title}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Divider />
|
||||
<div className={styles.recent}>{t['workplace.recent']}</div>
|
||||
<div className={styles.shortcuts}>
|
||||
{recentShortcuts.map((shortcut) => (
|
||||
<div
|
||||
className={styles.item}
|
||||
key={shortcut.key}
|
||||
onClick={() => onClickShortcut(shortcut.key)}
|
||||
>
|
||||
<div className={styles.icon}>{shortcut.icon}</div>
|
||||
<div className={styles.title}>{shortcut.title}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Shortcuts;
|
||||
@@ -1,19 +0,0 @@
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.link {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 4px;
|
||||
color: var(--color-text-2);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
.docs {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--color-text-2);
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:hover {
|
||||
color: rgb(var(--primary-6));
|
||||
}
|
||||
}
|
||||
@@ -15,14 +15,69 @@
|
||||
margin-bottom: var(--omni-space-24);
|
||||
}
|
||||
|
||||
.headerInfo {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.titleRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--omni-space-12);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
color: var(--omni-color-text);
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.liveIndicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--omni-space-8);
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--omni-radius-button);
|
||||
background: var(--omni-color-primary-soft);
|
||||
border: 1px solid rgba(11, 92, 255, 0.15);
|
||||
}
|
||||
|
||||
.pulseDot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--omni-color-primary);
|
||||
animation: nfcPulse 400ms cubic-bezier(0.2, 0.8, 0.2, 1) 1;
|
||||
}
|
||||
|
||||
@keyframes nfcPulse {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
box-shadow: 0 0 0 0 rgba(11, 92, 255, 0.4);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 0 6px rgba(11, 92, 255, 0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 0 rgba(11, 92, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.liveText {
|
||||
color: var(--omni-color-primary);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: block;
|
||||
margin-top: var(--omni-space-4);
|
||||
margin-top: var(--omni-space-8);
|
||||
color: var(--omni-color-text-2);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
@@ -30,9 +85,10 @@
|
||||
|
||||
.welcome {
|
||||
display: block;
|
||||
margin-top: var(--omni-space-8);
|
||||
margin-top: var(--omni-space-4);
|
||||
color: var(--omni-color-text);
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -40,6 +96,8 @@
|
||||
height: 40px;
|
||||
border-radius: var(--omni-radius-button);
|
||||
background-color: var(--omni-color-primary);
|
||||
font-weight: 500;
|
||||
box-shadow: 0 1px 2px rgba(11, 92, 255, 0.16);
|
||||
}
|
||||
|
||||
:global(.arco-card).kpiCard,
|
||||
@@ -48,19 +106,61 @@
|
||||
border-radius: var(--omni-radius-card);
|
||||
background: var(--omni-color-bg);
|
||||
box-shadow: var(--omni-shadow);
|
||||
transition: border-color 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-top: var(--omni-space-24);
|
||||
.kpiCard:hover {
|
||||
border-color: rgba(11, 92, 255, 0.3);
|
||||
}
|
||||
|
||||
.kpiHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--omni-space-8);
|
||||
}
|
||||
|
||||
.kpiTitle {
|
||||
color: var(--omni-color-text-2);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.kpiIconWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: var(--omni-color-surface);
|
||||
color: var(--omni-color-primary);
|
||||
}
|
||||
|
||||
.kpiIcon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.kpiSubText {
|
||||
margin-top: var(--omni-space-8);
|
||||
font-size: 12px;
|
||||
color: var(--omni-color-text-2);
|
||||
}
|
||||
|
||||
.delta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--omni-space-4);
|
||||
margin-top: var(--omni-space-8);
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: var(--omni-color-text-2);
|
||||
}
|
||||
|
||||
.deltaIcon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.deltaUp {
|
||||
color: var(--omni-color-success);
|
||||
}
|
||||
@@ -69,6 +169,103 @@
|
||||
color: var(--omni-color-error);
|
||||
}
|
||||
|
||||
/* 漏斗与渠道矩阵 */
|
||||
.middleRow {
|
||||
margin-top: var(--omni-space-16);
|
||||
}
|
||||
|
||||
.funnelContainer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--omni-space-16);
|
||||
padding: var(--omni-space-8) 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.funnelContainer {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.funnelStep {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.funnelLabel {
|
||||
font-size: 13px;
|
||||
color: var(--omni-color-text-2);
|
||||
margin-bottom: var(--omni-space-4);
|
||||
}
|
||||
|
||||
.funnelValue {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--omni-color-text);
|
||||
margin-bottom: var(--omni-space-8);
|
||||
}
|
||||
|
||||
.funnelBarWrapper {
|
||||
height: 4px;
|
||||
background: var(--omni-color-surface);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.funnelBar {
|
||||
height: 100%;
|
||||
background: var(--omni-color-primary);
|
||||
border-radius: 2px;
|
||||
transition: width 300ms ease;
|
||||
}
|
||||
|
||||
.funnelBarLead {
|
||||
background: var(--omni-color-success);
|
||||
}
|
||||
|
||||
/* 渠道占比 */
|
||||
.channelRow {
|
||||
margin-bottom: var(--omni-space-16);
|
||||
}
|
||||
|
||||
.channelRow:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.channelMeta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--omni-space-8);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.channelName {
|
||||
color: var(--omni-color-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.channelPercent {
|
||||
color: var(--omni-color-text-2);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main {
|
||||
margin-top: var(--omni-space-16);
|
||||
}
|
||||
|
||||
.panelHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.timelineList {
|
||||
padding-top: var(--omni-space-8);
|
||||
}
|
||||
|
||||
.feedMeta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -76,6 +273,10 @@
|
||||
gap: var(--omni-space-8);
|
||||
}
|
||||
|
||||
.stayTime {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.feedExtra {
|
||||
margin-top: var(--omni-space-4);
|
||||
color: var(--omni-color-text-2);
|
||||
@@ -95,26 +296,37 @@
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.shortcut {
|
||||
/* 运营工具箱 */
|
||||
.toolboxList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
padding: var(--omni-space-12) 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--omni-color-border);
|
||||
background: transparent;
|
||||
text-align: start;
|
||||
cursor: pointer;
|
||||
gap: var(--omni-space-12);
|
||||
}
|
||||
|
||||
.shortcut:last-child {
|
||||
border-bottom: 0;
|
||||
.shortcut {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--omni-space-12);
|
||||
width: 100%;
|
||||
padding: var(--omni-space-12);
|
||||
border: 1px solid var(--omni-color-border);
|
||||
border-radius: 12px;
|
||||
background: var(--omni-color-surface);
|
||||
text-align: start;
|
||||
cursor: pointer;
|
||||
transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.shortcut:hover {
|
||||
filter: brightness(0.98);
|
||||
background: var(--omni-color-bg);
|
||||
border-color: rgba(11, 92, 255, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.shortcut:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.shortcut:focus-visible {
|
||||
@@ -122,20 +334,48 @@
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.shortcutIconBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: var(--omni-color-bg);
|
||||
color: var(--omni-color-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolIcon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.shortcutContent {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.shortcutLabel {
|
||||
display: block;
|
||||
color: var(--omni-color-text);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.shortcutHint {
|
||||
display: block;
|
||||
margin-top: var(--omni-space-4);
|
||||
color: var(--omni-color-text-2);
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.shortcut:hover {
|
||||
filter: none;
|
||||
transform: none;
|
||||
}
|
||||
.pulseDot {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,69 +0,0 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
|
||||
:global(.arco-divider-horizontal) {
|
||||
border-bottom: 1px solid var(--color-border-1);
|
||||
}
|
||||
|
||||
:global(.arco-divider-vertical) {
|
||||
border-left: 1px solid var(--color-border-1);
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
background-color: var(--color-fill-2);
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-1);
|
||||
|
||||
.unit {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--color-text-2);
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.ctw {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.chart-sub-title {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
margin-left: 4px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
.symbol {
|
||||
font-size: 10px;
|
||||
margin-left: 4px;
|
||||
|
||||
> svg {
|
||||
vertical-align: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
.shortcuts {
|
||||
display: grid;
|
||||
grid-template-columns: 33.33% 33.33% 33.33%;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.icon {
|
||||
background-color: var(--color-primary-light-1);
|
||||
|
||||
svg {
|
||||
color: rgb(var(--primary-6));
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: rgb(var(--primary-6));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
background-color: var(--color-fill-2);
|
||||
margin-bottom: 4px;
|
||||
|
||||
svg {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.recent {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: var(--color-text-1);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
在新工单中引用
屏蔽一个用户