+
+ )
+}
+
+export default CustomTooltip
diff --git a/diffcases/arco-pro/src/components/Chart/fact-multi-pie.tsx b/diffcases/arco-pro/src/components/Chart/fact-multi-pie.tsx
new file mode 100644
index 00000000000..0607ac2980f
--- /dev/null
+++ b/diffcases/arco-pro/src/components/Chart/fact-multi-pie.tsx
@@ -0,0 +1,67 @@
+import useBizTheme from '@/utils/useChartTheme'
+import { Chart, Facet, Legend } from 'bizcharts'
+import React from 'react'
+
+interface FactMultiPieProps {
+ data: any[]
+ loading: boolean
+ height: number
+}
+function FactMultiPie(props: FactMultiPieProps) {
+ return (
+
+ {props.title}
+
+
+ {props.data.map((item, index) => (
+
+
+
+ ))}
+
+
+
+ {formatter(item.value)}
+
+
+
+ setSourceData([])}>
+ {t['message.empty']}
+
+ }
+ >
+ {tabList.map((item) => {
+ const { key, title, avatar } = item
+ const data = groupData[key] || []
+ const unReadData = data.filter((item) => !item.status)
+ return (
+
+ {title}
+ {unReadData.length ? `(${unReadData.length})` : ''}
+
+ }
+ >
+ {
+ readMessage([item])
+ }}
+ onAllBtnClick={(unReadData) => {
+ readMessage(unReadData)
+ }}
+ />
+
+ )
+ })}
+
+
+
+ )
+}
+
+function MessageBox({ children }) {
+ return (
+
+
+ }
+ >
+ {data.map((item, index) => (
+
+
+
+
+
+
+ {
+ onItemClick(item, index)
+ }}
+ >
+
+ 
+
+ )}
+ title={
+
+
+
+ {item.title}
+
+ {item.subTitle}
+
+
+ {item.tag && item.tag.text ? {item.tag.text} : null}
+
+ }
+ description={
+
+
+ {item.content}
+
+
+ {item.time}
+
+
+ }
+ />
+
+
+ )
+ }
+
+ const handleChangeRole = () => {
+ const newRole = role === 'admin' ? 'user' : 'admin'
+ setRole(newRole)
+ }
+
+ const droplist = (
+
+ )
+
+ return (
+
+
+ )
+}
+
+export default Navbar
diff --git a/diffcases/arco-pro/src/components/NavBar/style/icon-button.module.less b/diffcases/arco-pro/src/components/NavBar/style/icon-button.module.less
new file mode 100644
index 00000000000..87345ddacd5
--- /dev/null
+++ b/diffcases/arco-pro/src/components/NavBar/style/icon-button.module.less
@@ -0,0 +1,8 @@
+.icon-button {
+ font-size: 16px;
+ border: 1px solid var(--color-border-2);
+
+ > svg {
+ vertical-align: -3px;
+ }
+}
diff --git a/diffcases/arco-pro/src/components/NavBar/style/index.module.less b/diffcases/arco-pro/src/components/NavBar/style/index.module.less
new file mode 100644
index 00000000000..797dd3890a4
--- /dev/null
+++ b/diffcases/arco-pro/src/components/NavBar/style/index.module.less
@@ -0,0 +1,77 @@
+.navbar {
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 1px solid var(--color-border);
+ box-sizing: border-box;
+ background-color: var(--color-bg-2);
+ height: 100%;
+}
+
+.left {
+ display: flex;
+ align-items: center;
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ width: 200px;
+ padding-left: 20px;
+ box-sizing: border-box;
+}
+
+.logo-name {
+ color: var(--color-text-1);
+ font-weight: 500;
+ font-size: 20px;
+ margin-left: 10px;
+ font-family: 'PingFang SC';
+}
+
+.right {
+ display: flex;
+ list-style: none;
+ padding-right: 20px;
+
+ li {
+ padding: 0 8px;
+ display: flex;
+ align-items: center;
+ }
+
+ a {
+ text-decoration: none;
+ color: var(--color-text-1);
+ }
+}
+
+.username {
+ cursor: pointer;
+}
+
+.round {
+ :global(.arco-input-inner-wrapper) {
+ border-radius: 16px;
+ }
+
+ svg {
+ font-size: 16px;
+ }
+}
+
+.dropdown-icon {
+ margin-right: 8px;
+ font-size: 16px;
+ vertical-align: text-bottom;
+}
+
+.fixed-settings {
+ position: fixed;
+ top: 280px;
+ right: 0px;
+
+ svg {
+ font-size: 18px;
+ vertical-align: -4px;
+ }
+}
diff --git a/diffcases/arco-pro/src/components/Panel/index.tsx b/diffcases/arco-pro/src/components/Panel/index.tsx
new file mode 100644
index 00000000000..b96c3818516
--- /dev/null
+++ b/diffcases/arco-pro/src/components/Panel/index.tsx
@@ -0,0 +1,23 @@
+import { Typography } from '@arco-design/web-react'
+import cs from 'classnames'
+import React, { CSSProperties, ReactNode } from 'react'
+import styles from './style/index.module.less'
+
+interface PanelProps {
+ className?: string
+ style?: CSSProperties
+ title?: ReactNode
+ children?: ReactNode
+}
+
+function Panel(props: PanelProps) {
+ const { className, style, title, children } = props
+ return (
+
+
+
+ 
*/}
+
+ Arco Pro
+ -
+
-
+
+
+ - + } />} + options={[ + { label: '中文', value: 'zh-CN' }, + { label: 'English', value: 'en-US' }, + ]} + value={lang} + triggerProps={{ + autoAlignPopupWidth: false, + autoAlignPopupMinWidth: true, + position: 'br', + }} + trigger="hover" + onChange={(value) => { + setLang(value) + const nextLang = defaultLocale[value] + Message.info(`${nextLang['message.lang.tips']}${value}`) + }} + /> + +
-
+
+ +} /> +
+ -
+
+ +: } + onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')} + /> +
+ -
+
+ ++ ++
+ )}
+
+ {title}
+ {children}
+
+ )
+}
+
+export default Panel
diff --git a/diffcases/arco-pro/src/components/Panel/style/index.module.less b/diffcases/arco-pro/src/components/Panel/style/index.module.less
new file mode 100644
index 00000000000..2f42b81ff08
--- /dev/null
+++ b/diffcases/arco-pro/src/components/Panel/style/index.module.less
@@ -0,0 +1,4 @@
+.panel {
+ background-color: var(--color-bg-2);
+ border-radius: 4px;
+}
diff --git a/diffcases/arco-pro/src/components/PermissionWrapper/index.tsx b/diffcases/arco-pro/src/components/PermissionWrapper/index.tsx
new file mode 100644
index 00000000000..189ea9e0316
--- /dev/null
+++ b/diffcases/arco-pro/src/components/PermissionWrapper/index.tsx
@@ -0,0 +1,41 @@
+import { GlobalState } from '@/store'
+import authentication, { AuthParams } from '@/utils/authentication'
+import React, { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+
+type PermissionWrapperProps = AuthParams & {
+ backup?: React.ReactNode
+}
+
+const PermissionWrapper = (
+ props: React.PropsWithChildren
+
+ )
+}
diff --git a/diffcases/arco-pro/src/components/Settings/color.tsx b/diffcases/arco-pro/src/components/Settings/color.tsx
new file mode 100644
index 00000000000..564e24b1bc1
--- /dev/null
+++ b/diffcases/arco-pro/src/components/Settings/color.tsx
@@ -0,0 +1,71 @@
+import useLocale from '@/utils/useLocale'
+import { generate, getRgbStr } from '@arco-design/color'
+import { Trigger, Typography } from '@arco-design/web-react'
+import React from 'react'
+import { SketchPicker } from 'react-color'
+import { useDispatch, useSelector } from 'react-redux'
+import { GlobalState } from '../../store'
+import styles from './style/color-panel.module.less'
+
+function ColorPanel() {
+ const theme = document.querySelector('body').getAttribute('arco-theme') || 'light'
+ const settings = useSelector((state: GlobalState) => state.settings)
+ const locale = useLocale()
+ const themeColor = settings.themeColor
+ const list = generate(themeColor, { list: true })
+ const dispatch = useDispatch()
+
+ return (
+ {title}
+ {options + && options.map((option) => { + const type = option.type || 'switch' + + return ( +
+ {locale[option.name]}
+ {type === 'switch' && (
+ {
+ const newSetting = {
+ ...settings,
+ [option.value]: checked,
+ }
+ dispatch({
+ type: 'update-settings',
+ payload: { settings: newSetting },
+ })
+ // set color week
+ if (checked && option.value === 'colorWeek') {
+ document.body.style.filter = 'invert(80%)'
+ }
+ if (!checked && option.value === 'colorWeek') {
+ document.body.style.filter = 'none'
+ }
+ }}
+ />
+ )}
+ {type === 'number' && (
+ {
+ const newSetting = {
+ ...settings,
+ [option.value]: value,
+ }
+ dispatch({
+ type: 'update-settings',
+ payload: { settings: newSetting },
+ })
+ }}
+ />
+ )}
+
+ )
+ })}
+ {children}
+
+ (
+ {
+ const newColor = color.hex
+ dispatch({
+ type: 'update-settings',
+ payload: { settings: { ...settings, themeColor: newColor } },
+ })
+ const newList = generate(newColor, {
+ list: true,
+ dark: theme === 'dark',
+ })
+ newList.forEach((l, index) => {
+ const rgbStr = getRgbStr(l)
+ document.body.style.setProperty(
+ `--arcoblue-${index + 1}`,
+ rgbStr,
+ )
+ })
+ }}
+ />
+ )}
+ >
+
+
+ {locale['settings.color.tooltip']}
+
+
+ )
+}
+
+export default ColorPanel
diff --git a/diffcases/arco-pro/src/components/Settings/index.tsx b/diffcases/arco-pro/src/components/Settings/index.tsx
new file mode 100644
index 00000000000..17062aeffab
--- /dev/null
+++ b/diffcases/arco-pro/src/components/Settings/index.tsx
@@ -0,0 +1,72 @@
+import useLocale from '@/utils/useLocale'
+import { Alert, Drawer, Message } from '@arco-design/web-react'
+import { IconSettings } from '@arco-design/web-react/icon'
+import copy from 'copy-to-clipboard'
+import React, { useState } from 'react'
+import { useSelector } from 'react-redux'
+import { GlobalState } from '../../store'
+import IconButton from '../NavBar/IconButton'
+import Block from './block'
+import ColorPanel from './color'
+
+interface SettingProps {
+ trigger?: React.ReactElement
+}
+
+function Setting(props: SettingProps) {
+ const { trigger } = props
+ const [visible, setVisible] = useState(false)
+ const locale = useLocale()
+ const settings = useSelector((state: GlobalState) => state.settings)
+
+ function onCopySettings() {
+ copy(JSON.stringify(settings, null, 2))
+ Message.success(locale['settings.copySettings.message'])
+ }
+
+ return (
+ <>
+ {trigger
+ ? (
+ React.cloneElement(trigger as React.ReactElement, {
+ onClick: () => setVisible(true),
+ })
+ )
+ :
+
+ {themeColor}
+
+ -
+ {list.map((item, index) => (
+
+ ))}
+
+
+
+
+
+
+ {collapsed ?
+
+ {!!breadcrumb.length && (
+
+
+ {flattenRoutes.map((route, index) => {
+ return (
+
+
+ import('./pages/exception/403'))}
+ />
+
+
+
+ {showFooter && }
+
+
+ {breadcrumb.map((node, index) => (
+
+ {typeof node === 'string' ? locale[node] || node : node}
+
+ ))}
+
+
+ )}
+
+
+ )
+}
diff --git a/diffcases/arco-pro/src/pages/dashboard/monitor/data-statistic-list.tsx b/diffcases/arco-pro/src/pages/dashboard/monitor/data-statistic-list.tsx
new file mode 100644
index 00000000000..a039e9f96a6
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/dashboard/monitor/data-statistic-list.tsx
@@ -0,0 +1,76 @@
+import useLocale from '@/utils/useLocale'
+import { Table, Tag, Typography } from '@arco-design/web-react'
+import React from 'react'
+import locale from './locale'
+import styles from './style/index.module.less'
+
+export default function QuickOperation() {
+ const t = useLocale(locale)
+ const columns = [
+ {
+ title: t['monitor.list.title.order'],
+ render: (_col, _record, index) => {index + 1},
+ },
+ {
+ title: t['monitor.list.title.cover'],
+ dataIndex: 'cover',
+ render: (_col, record) => (
+
+
+ {t['monitor.title.chatPanel']}
+
+
+
+
+
+
+
+
+
+
+
+ } />
+
+
+
+
+ 
+ {record.status === -1 && (
+
+ {t['monitor.list.tag.auditFailed']}
+
+ )}
+
+ ),
+ },
+ {
+ title: t['monitor.list.title.name'],
+ dataIndex: 'name',
+ },
+ {
+ dataIndex: 'duration',
+ title: t['monitor.list.title.duration'],
+ },
+ {
+ dataIndex: 'id',
+ title: t['monitor.list.title.id'],
+ },
+ ]
+ const data = [
+ {
+ cover:
+ 'http://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/c788fc704d32cf3b1136c7d45afc2669.png~tplv-uwbnlip3yd-webp.webp',
+ name: '视频直播',
+ duration: '00:05:19',
+ id: '54e23ade',
+ status: -1,
+ },
+ ]
+ return (
+
+
+
+ {t['monitor.list.tip.rotations']}
+ {data.length}
+ {t['monitor.list.tip.rest']}
+
+
+ )
+}
diff --git a/diffcases/arco-pro/src/pages/dashboard/monitor/data-statistic.tsx b/diffcases/arco-pro/src/pages/dashboard/monitor/data-statistic.tsx
new file mode 100644
index 00000000000..8a4c14ec851
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/dashboard/monitor/data-statistic.tsx
@@ -0,0 +1,42 @@
+import useLocale from '@/utils/useLocale'
+import { Button, Card, Radio, Tabs } from '@arco-design/web-react'
+import React from 'react'
+import DataStatisticList from './data-statistic-list'
+import locale from './locale'
+import styles from './style/index.module.less'
+
+export default function DataStatistic() {
+ const t = useLocale(locale)
+ return (
+
+
+ {t['monitor.liveMethod.normal']}
+ {t['monitor.liveMethod.flowControl']}
+ {t['monitor.liveMethod.video']}
+ {t['monitor.liveMethod.web']}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/diffcases/arco-pro/src/pages/dashboard/monitor/locale/index.ts b/diffcases/arco-pro/src/pages/dashboard/monitor/locale/index.ts
new file mode 100644
index 00000000000..745b9bbddfd
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/dashboard/monitor/locale/index.ts
@@ -0,0 +1,99 @@
+const i18n = {
+ "en-US": {
+ "menu.dashboard": "Dashboard",
+ "monitor.title.chatPanel": "Chat Window",
+ "monitor.title.quickOperation": "Quick Operation",
+ "monitor.title.studioInfo": "Studio Information",
+ "monitor.title.studioPreview": "Studio Preview",
+ "monitor.chat.options.all": "All",
+ "monitor.chat.placeholder.searchCategory": "Search Category",
+ "monitor.chat.update": "Update",
+ "monitor.list.title.order": "Order",
+ "monitor.list.title.cover": "Cover",
+ "monitor.list.title.name": "Name",
+ "monitor.list.title.duration": "Duration",
+ "monitor.list.title.id": "ID",
+ "monitor.list.tip.rotations": "Rotations ",
+ "monitor.list.tip.rest": ", The program list is not visible to viewers",
+ "monitor.list.tag.auditFailed": "Audit Failed",
+ "monitor.tab.title.liveMethod": "Live Method",
+ "monitor.tab.title.onlineUsers": "Online Users",
+ "monitor.liveMethod.normal": "Normal Live",
+ "monitor.liveMethod.flowControl": "Flow Control Live",
+ "monitor.liveMethod.video": "Video Live",
+ "monitor.liveMethod.web": "Web Live",
+ "monitor.editCarousel": "Edit",
+ "monitor.startCarousel": "Start",
+ "monitor.quickOperation.changeClarity": "Change the Clarity",
+ "monitor.quickOperation.switchStream": "Switch Stream",
+ "monitor.quickOperation.removeClarity": "Remove the Clarity",
+ "monitor.quickOperation.pushFlowGasket": "Push Flow Gasket",
+ "monitor.studioInfo.label.studioTitle": "Studio Title",
+ "monitor.studioInfo.label.onlineNotification": "Online Notification",
+ "monitor.studioInfo.label.studioCategory": "Studio Category",
+ "monitor.studioInfo.placeholder.studioTitle": "'s Studio",
+ "monitor.studioStatus.title.studioStatus": "Studio Status",
+ "monitor.studioStatus.title.pictureInfo": "Picture Information",
+ "monitor.studioStatus.smooth": "Smooth",
+ "monitor.studioStatus.frameRate": "Frame",
+ "monitor.studioStatus.bitRate": "Bit",
+ "monitor.studioStatus.mainstream": "Main",
+ "monitor.studioStatus.hotStandby": "Hot",
+ "monitor.studioStatus.coldStandby": "Cold",
+ "monitor.studioStatus.line": "Line",
+ "monitor.studioStatus.play": "Format",
+ "monitor.studioStatus.pictureQuality": "Quality",
+ "monitor.studioPreview.studio": "Studio",
+ "monitor.studioPreview.watching": "watching"
+ },
+ "zh-CN": {
+ "menu.dashboard": "仪表盘",
+ "menu.dashboard.monitor": "实时监控",
+ "monitor.title.chatPanel": "聊天窗口",
+ "monitor.title.quickOperation": "快捷操作",
+ "monitor.title.studioInfo": "直播信息",
+ "monitor.title.studioPreview": "直播预览",
+ "monitor.chat.options.all": "全部",
+ "monitor.chat.placeholder.searchCategory": "搜索类目",
+ "monitor.chat.update": "更新",
+ "monitor.list.title.order": "序号",
+ "monitor.list.title.cover": "封面",
+ "monitor.list.title.name": "名称",
+ "monitor.list.title.duration": "视频时长",
+ "monitor.list.title.id": "视频Id",
+ "monitor.list.tip.rotations": "轮播次数",
+ "monitor.list.tip.rest": "，节目单观众不可见",
+ "monitor.list.tag.auditFailed": "审核未通过",
+ "monitor.tab.title.liveMethod": "直播方式",
+ "monitor.tab.title.onlineUsers": "在线人数",
+ "monitor.liveMethod.normal": "普通直播",
+ "monitor.liveMethod.flowControl": "控流直播",
+ "monitor.liveMethod.video": "视频直播",
+ "monitor.liveMethod.web": "网页开播",
+ "monitor.editCarousel": "编辑轮播",
+ "monitor.startCarousel": "开始轮播",
+ "monitor.quickOperation.changeClarity": "切换清晰度",
+ "monitor.quickOperation.switchStream": "主备流切换",
+ "monitor.quickOperation.removeClarity": "摘除清晰度",
+ "monitor.quickOperation.pushFlowGasket": "推流垫片",
+ "monitor.studioInfo.label.studioTitle": "直播标题",
+ "monitor.studioInfo.label.onlineNotification": "上线通知",
+ "monitor.studioInfo.label.studioCategory": "直播类目",
+ "monitor.studioInfo.placeholder.studioTitle": "的直播间",
+ "monitor.studioStatus.title.studioStatus": "直播状态",
+ "monitor.studioStatus.title.pictureInfo": "画面信息",
+ "monitor.studioStatus.smooth": "流畅",
+ "monitor.studioStatus.frameRate": "帧率",
+ "monitor.studioStatus.bitRate": "码率",
+ "monitor.studioStatus.mainstream": "主流",
+ "monitor.studioStatus.hotStandby": "热备",
+ "monitor.studioStatus.coldStandby": "冷备",
+ "monitor.studioStatus.line": "线路",
+ "monitor.studioStatus.play": "播放格式",
+ "monitor.studioStatus.pictureQuality": "画质",
+ "monitor.studioPreview.studio": "直播间",
+ "monitor.studioPreview.watching": "在看"
+ }
+};
+
+export default i18n;
diff --git a/diffcases/arco-pro/src/pages/dashboard/monitor/message-list/index.tsx b/diffcases/arco-pro/src/pages/dashboard/monitor/message-list/index.tsx
new file mode 100644
index 00000000000..d6b575d3d20
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/dashboard/monitor/message-list/index.tsx
@@ -0,0 +1,20 @@
+import { Result } from '@arco-design/web-react'
+import React from 'react'
+import MessageItem, { Message } from './item'
+import styles from './style/index.module.less'
+
+interface MessageListProps {
+ data: Message[]
+}
+
+function MessageList(props: MessageListProps) {
+ const { data = [] } = props
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {data.map((item) =>
+ )
+}
+
+export default MessageList
diff --git a/diffcases/arco-pro/src/pages/dashboard/monitor/message-list/item.tsx b/diffcases/arco-pro/src/pages/dashboard/monitor/message-list/item.tsx
new file mode 100644
index 00000000000..d71ae017dd5
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/dashboard/monitor/message-list/item.tsx
@@ -0,0 +1,52 @@
+import { Space, Typography } from '@arco-design/web-react'
+import { IconCommand, IconStar } from '@arco-design/web-react/icon'
+import cs from 'classnames'
+import React from 'react'
+import styles from './style/index.module.less'
+
+export interface Message {
+ id?: string
+ username?: string
+ content?: string
+ time?: string
+ isCollect?: boolean
+}
+
+export interface MessageItemProps {
+ data: Message
+}
+
+function MessageItem(props: MessageItemProps) {
+ const { data = {} } = props
+ const classNames = cs(styles['message-item'], {
+ [styles['message-item-collected']]: data.isCollect,
+ })
+ return (
+
+
+ {data.username}
+ {data.content}
+
+
+ )
+}
+
+export default MessageItem
diff --git a/diffcases/arco-pro/src/pages/dashboard/monitor/message-list/style/index.module.less b/diffcases/arco-pro/src/pages/dashboard/monitor/message-list/style/index.module.less
new file mode 100644
index 00000000000..afa03168637
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/dashboard/monitor/message-list/style/index.module.less
@@ -0,0 +1,52 @@
+.message-item {
+ font-size: 12px;
+ line-height: 20px;
+ padding: 8px;
+ border-radius: 2px;
+
+ &-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ &-actions {
+ display: flex;
+ opacity: 0;
+
+ &-item {
+ margin-right: 4px;
+ font-size: 14px;
+ color: var(--color-text-3);
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ &:hover {
+ background-color: rgb(var(--gray-3));
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+
+ &-collected {
+ .message-item-actions-collect {
+ color: rgb(var(--gold-6));
+ }
+ }
+
+ &:hover {
+ background-color: rgb(var(--gray-2));
+
+ .message-item-actions {
+ opacity: 1;
+ }
+ }
+}
diff --git a/diffcases/arco-pro/src/pages/dashboard/monitor/mock/index.ts b/diffcases/arco-pro/src/pages/dashboard/monitor/mock/index.ts
new file mode 100644
index 00000000000..1113c672a31
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/dashboard/monitor/mock/index.ts
@@ -0,0 +1,21 @@
+import setupMock from "@/utils/setupMock";
+import Mock from "mockjs";
+
+setupMock({
+ setup: () => {
+ Mock.mock(new RegExp("/api/chatList"), () => {
+ const data = Mock.mock({
+ "data|4-6": [
+ {
+ "id|+1": 1,
+ username: "用户7352772",
+ content: "马上就开始了，好激动！",
+ time: "13:09:12",
+ "isCollect|2": true
+ }
+ ]
+ });
+ return data.data;
+ });
+ }
+});
diff --git a/diffcases/arco-pro/src/pages/dashboard/monitor/quick-operation.tsx b/diffcases/arco-pro/src/pages/dashboard/monitor/quick-operation.tsx
new file mode 100644
index 00000000000..e9616834d24
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/dashboard/monitor/quick-operation.tsx
@@ -0,0 +1,30 @@
+import useLocale from '@/utils/useLocale'
+import { Button, Card, Space, Typography } from '@arco-design/web-react'
+import { IconArrowRight, IconStop, IconSwap, IconTags } from '@arco-design/web-react/icon'
+import React from 'react'
+import locale from './locale'
+
+export default function QuickOperation() {
+ const t = useLocale(locale)
+ return (
+
+
+
+ {data.time}
+
+
+
+
+
+
+
+
+ 
+
+
+
+ {userInfo && (
+
+ 3,6000 {t['monitor.studioPreview.watching']}
+
+
+
+
+
+
+
+
+ {userInfo.name}
+ {t['monitor.studioPreview.studio']}
+
+
+
+ )}
+
+
+ {t['workplace.announcement']}
+
+ {t['workplace.seeMore']}
+
+
+ {data.map((d) => (
+
+
+
+ {t[`workplace.${d.type}`]}
+
+ {d.content}
+
+ ))}
+
+ 
+
+ ))}
+
+ {t['workplace.docs']}
+ {t['workplace.seeMore']}
+
+
+ {Object.entries(links).map(([key, value]) => (
+
+ {t[`workplace.${key}`]}
+
+ ))}
+
+
+
+ )
+}
+
+type DataType = {
+ allContents?: string
+ liveContents?: string
+ increaseComments?: string
+ growthRate?: string
+ chartData?: { count?: number; date?: string }[]
+ down?: boolean
+}
+
+function Overview() {
+ const [data, setData] = useState{icon}
+
+
+
+
+ {title}
+
+ {count}
+ {unit}
+
+
+
+
+
+ {t['workplace.contentData']}
+ ({t['workplace.1year']})
+
+ {t['workplace.seeMore']}
+
+
+
+ {t['workplace.popularContents']}
+
+ {t['workplace.seeMore']}
+
+
+
+ ))}
+
+ 
+
+ {item.slogan}
+ {item.subSlogan}
+
+
+ )
+}
diff --git a/diffcases/arco-pro/src/pages/login/index.tsx b/diffcases/arco-pro/src/pages/login/index.tsx
new file mode 100644
index 00000000000..399fec4df11
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/login/index.tsx
@@ -0,0 +1,37 @@
+import Logo from '@/assets/logo.svg'
+import Footer from '@/components/Footer'
+import React, { useEffect } from 'react'
+import LoginBanner from './banner'
+import LoginForm from './form'
+import styles from './style/index.module.less'
+
+function Login() {
+ useEffect(() => {
+ document.body.setAttribute('arco-theme', 'light')
+ }, [])
+
+ return (
+ {t['login.form.title']}
+
+ {t['login.form.title']}
+
+ {errorMessage}
+
+
+
+ )
+}
+Login.displayName = 'LoginPage'
+
+export default Login
diff --git a/diffcases/arco-pro/src/pages/login/locale/index.ts b/diffcases/arco-pro/src/pages/login/locale/index.ts
new file mode 100644
index 00000000000..e9a18df7460
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/login/locale/index.ts
@@ -0,0 +1,42 @@
+const i18n = {
+ "en-US": {
+ "login.form.title": "Login to Arco Design Pro",
+ "login.form.userName.errMsg": "Username cannot be empty",
+ "login.form.password.errMsg": "Password cannot be empty",
+ "login.form.login.errMsg": "Login error, refresh and try again",
+ "login.form.userName.placeholder": "Username: admin",
+ "login.form.password.placeholder": "Password: admin",
+ "login.form.rememberPassword": "Remember password",
+ "login.form.forgetPassword": "Forgot password",
+ "login.form.login": "login",
+ "login.form.register": "register account",
+ "login.banner.slogan1": "Out-of-the-box high-quality template",
+ "login.banner.subSlogan1":
+ "Rich page templates, covering most typical business scenarios",
+ "login.banner.slogan2": "Built-in solutions to common problems",
+ "login.banner.subSlogan2":
+ "Internationalization, routing configuration, state management everything",
+ "login.banner.slogan3": "Access visualization enhancement tool AUX",
+ "login.banner.subSlogan3": "Realize flexible block development"
+ },
+ "zh-CN": {
+ "login.form.title": "登录 Arco Design Pro",
+ "login.form.userName.errMsg": "用户名不能为空",
+ "login.form.password.errMsg": "密码不能为空",
+ "login.form.login.errMsg": "登录出错，轻刷新重试",
+ "login.form.userName.placeholder": "用户名：admin",
+ "login.form.password.placeholder": "密码：admin",
+ "login.form.rememberPassword": "记住密码",
+ "login.form.forgetPassword": "忘记密码",
+ "login.form.login": "登录",
+ "login.form.register": "注册账号",
+ "login.banner.slogan1": "开箱即用的高质量模板",
+ "login.banner.subSlogan1": "丰富的的页面模板，覆盖大多数典型业务场景",
+ "login.banner.slogan2": "内置了常见问题的解决方案",
+ "login.banner.subSlogan2": "国际化，路由配置，状态管理应有尽有",
+ "login.banner.slogan3": "接入可视化增强工具AUX",
+ "login.banner.subSlogan3": "实现灵活的区块式开发"
+ }
+};
+
+export default i18n;
diff --git a/diffcases/arco-pro/src/pages/login/style/index.module.less b/diffcases/arco-pro/src/pages/login/style/index.module.less
new file mode 100644
index 00000000000..61762241ae2
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/login/style/index.module.less
@@ -0,0 +1,120 @@
+.container {
+ display: flex;
+ height: 100vh;
+
+ .banner {
+ width: 550px;
+ background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
+ }
+
+ .content {
+ flex: 1;
+ position: relative;
+ padding-bottom: 40px;
+ }
+
+ .footer {
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ }
+}
+
+.logo {
+ position: fixed;
+ top: 24px;
+ left: 22px;
+ display: inline-flex;
+ align-items: center;
+ z-index: 1;
+
+ &-text {
+ margin-left: 4px;
+ margin-right: 4px;
+ font-size: 20px;
+ color: var(--color-fill-1);
+ }
+}
+
+.banner {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &-inner {
+ height: 100%;
+ flex: 1;
+ }
+}
+
+.content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.carousel {
+ height: 100%;
+
+ &-item {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ }
+
+ &-title {
+ font-weight: 500;
+ font-size: 20px;
+ line-height: 28px;
+ color: var(--color-fill-1);
+ }
+
+ &-sub-title {
+ margin-top: 8px;
+ font-size: 14px;
+ line-height: 22px;
+ color: var(--color-text-3);
+ }
+
+ &-image {
+ margin-top: 30px;
+ width: 320px;
+ }
+}
+
+.login-form {
+ &-wrapper {
+ width: 320px;
+ }
+
+ &-title {
+ font-size: 24px;
+ font-weight: 500;
+ color: var(--color-text-1);
+ line-height: 32px;
+ }
+
+ &-sub-title {
+ font-size: 16px;
+ line-height: 24px;
+ color: var(--color-text-3);
+ }
+
+ &-error-msg {
+ height: 32px;
+ line-height: 32px;
+ color: rgb(var(--red-6));
+ }
+
+ &-password-actions {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ &-register-btn {
+ color: var(--color-text-3) !important;
+ }
+}
diff --git a/diffcases/arco-pro/src/pages/profile/basic/index.tsx b/diffcases/arco-pro/src/pages/profile/basic/index.tsx
new file mode 100644
index 00000000000..abbec081156
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/profile/basic/index.tsx
@@ -0,0 +1,155 @@
+import useLocale from '@/utils/useLocale'
+import { Badge, Button, Card, Grid, Space, Steps, Table, Typography } from '@arco-design/web-react'
+import axios from 'axios'
+import React, { useEffect, useState } from 'react'
+import ProfileItem from './item'
+import locale from './locale'
+import './mock'
+import styles from './style/index.module.less'
+
+function BasicProfile() {
+ const t = useLocale(locale)
+ const [loading, setLoading] = useState(false)
+ const [data, setData] = useState({ status: 1 })
+ const [preLoading, setPreLoading] = useState(false)
+ const [preData, setPreData] = useState({})
+ const [tableLoading, setTableLoading] = useState(false)
+ const [tableData, setTableData] = useState([])
+
+ function fetchData() {
+ setLoading(true)
+ axios
+ .get('/api/basicProfile')
+ .then((res) => {
+ setData(res.data || {})
+ })
+ .finally(() => {
+ setLoading(false)
+ })
+ }
+
+ function fetchPreData() {
+ setPreLoading(true)
+ axios
+ .get('/api/basicProfile')
+ .then((res) => {
+ setPreData(res.data || {})
+ })
+ .finally(() => {
+ setPreLoading(false)
+ })
+ }
+
+ function fetchTableData() {
+ setTableLoading(true)
+ axios
+ .get('/api/adjustment')
+ .then((res) => {
+ setTableData(res.data)
+ })
+ .finally(() => {
+ setTableLoading(false)
+ })
+ }
+ useEffect(() => {
+ fetchData()
+ fetchPreData()
+ fetchTableData()
+ }, [])
+
+ return (
+
+
+ Arco Design Pro
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t['basicProfile.title.form']}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t['basicProfile.adjustment.record']}
+
+ {
+ if (status) {
+ return (
+
+
+ )
+}
+
+export default PublicOpinionCard
diff --git a/diffcases/arco-pro/src/pages/visualization/data-analysis/public-opinion/index.tsx b/diffcases/arco-pro/src/pages/visualization/data-analysis/public-opinion/index.tsx
new file mode 100644
index 00000000000..5c9cd1e52a2
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/visualization/data-analysis/public-opinion/index.tsx
@@ -0,0 +1,83 @@
+import useLocale from '@/utils/useLocale'
+import { Grid } from '@arco-design/web-react'
+import axios from 'axios'
+import React, { useEffect, useMemo, useState } from 'react'
+import locale from '../locale'
+import PublicOpinionCard, { PublicOpinionCardProps } from './card'
+
+const { Row, Col } = Grid
+
+const cardInfo = [
+ {
+ key: 'visitor',
+ type: 'line',
+ },
+ {
+ key: 'content',
+ type: 'interval',
+ },
+ {
+ key: 'comment',
+ type: 'line',
+ },
+ {
+ key: 'share',
+ type: 'pie',
+ },
+]
+
+function PublicOpinion() {
+ const t = useLocale(locale)
+ const [loading, setLoading] = useState(true)
+ const [data, setData] = useState
+
+ {title}
+
+ }
+ loading={loading}
+ value={count}
+ groupSeparator
+ />
+
+
+
+ {props.compareTime}
+
+
+ {loading ?
+
+ {loading
+ ? (
+
+
+
+ {formatData.map((item, index) => (
+
+
+ )
+}
+
+export default PublicOpinion
diff --git a/diffcases/arco-pro/src/pages/visualization/data-analysis/style/public-opinion.module.less b/diffcases/arco-pro/src/pages/visualization/data-analysis/style/public-opinion.module.less
new file mode 100644
index 00000000000..9277d1c4884
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/visualization/data-analysis/style/public-opinion.module.less
@@ -0,0 +1,96 @@
+@line-card-bg: linear-gradient(180deg, rgb(242 249 254) 0%, #e6f4fe 100%);
+
+@interval-card-bg: linear-gradient(
+ 180deg,
+ rgb(245 254 242) 0%,
+ rgb(230 254 238) 100%
+);
+
+@pie-card-bg: linear-gradient(
+ 180deg,
+ rgb(247 247 255) 0%,
+ rgb(236 236 255) 100%
+);
+
+@line-card-dark-bg: linear-gradient(180deg, #284991 0%, #122b62 100%);
+@interval-card-dark-bg: linear-gradient(180deg, #3d492e 0%, #263827 100%);
+@pie-card-dark-bg: linear-gradient(180deg, #312565 0%, #201936 100%);
+
+.card {
+ display: flex;
+ padding: 20px;
+ padding-top: 16px;
+ border-radius: 4px;
+ min-height: 100px;
+
+ &-line {
+ background: @line-card-bg;
+ }
+
+ &-interval {
+ background: @interval-card-bg;
+ }
+
+ &-pie {
+ background: @pie-card-bg;
+ }
+
+ .statistic {
+ white-space: nowrap;
+ }
+
+ .chart {
+ flex: auto;
+ display: flex;
+ flex-direction: column-reverse;
+ margin-left: 16px;
+ }
+
+ .title {
+ margin: 0;
+ }
+
+ :global(.arco-statistic-content) {
+ margin-top: 24px;
+ margin-bottom: 4px;
+
+ :global(.arco-statistic-value) {
+ font-size: 24px;
+ line-height: 28px;
+ }
+ }
+
+ .compare-yesterday {
+ &-text {
+ font-size: 12px;
+ font-weight: 400;
+ color: var(--color-text-2);
+ }
+ }
+
+ .diff {
+ margin-left: 8px;
+ line-height: 20px;
+ color: rgb(var(--red-6));
+ }
+
+ .diff-increment {
+ color: rgb(var(--green-6));
+ }
+}
+
+body[arco-theme='dark'] {
+ .card {
+ &-line {
+ background: @line-card-dark-bg;
+ }
+
+ &-pie {
+ background: @pie-card-dark-bg;
+ }
+
+ &-interval {
+ background: @interval-card-dark-bg;
+ }
+ }
+}
diff --git a/diffcases/arco-pro/src/pages/visualization/multi-dimension-data-analysis/card-list.tsx b/diffcases/arco-pro/src/pages/visualization/multi-dimension-data-analysis/card-list.tsx
new file mode 100644
index 00000000000..efed64c43bb
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/visualization/multi-dimension-data-analysis/card-list.tsx
@@ -0,0 +1,200 @@
+import useLocale from '@/utils/useLocale'
+import { Card, Grid, Skeleton, Spin, Statistic, Typography } from '@arco-design/web-react'
+import axios from 'axios'
+import { Chart, Interaction, Interval, Line, Tooltip } from 'bizcharts'
+import cs from 'classnames'
+import React, { useEffect, useMemo, useState } from 'react'
+import locale from './locale'
+
+import { IconArrowFall, IconArrowRise } from '@arco-design/web-react/icon'
+import styles from './style/card-block.module.less'
+
+const { Row, Col } = Grid
+const { Title, Text } = Typography
+const basicChartProps = {
+ pure: true,
+ autoFit: true,
+ height: 80,
+ padding: [0, 10, 0, 10],
+}
+
+export interface CardProps {
+ key: string
+ title?: string
+ chartData?: any[]
+ chartType: string
+ count?: number
+ increment?: boolean
+ diff?: number
+ loading?: boolean
+}
+
+function CustomTooltip(props: { items: any[] }) {
+ const { items } = props
+ return (
+
+ {items.map((item, index) => (
+
+ )
+}
+function SimpleLine(props: { chartData: any[] }) {
+ const { chartData } = props
+ return (
+
+ {Number(item.data.y).toLocaleString()}
+
+ ))}
+
+
+ {title}
+
+ }
+ loading={loading}
+ value={count}
+ extra={
+
+
+ {loading
+ ? (
+
+ }
+ groupSeparator
+ />
+
+
+ {chartType === 'interval' &&
+
+
+
+
+ {item.icon}
+
+ {loading
+ ? (
+ ++ ) +} diff --git a/diffcases/arco-pro/src/pages/welcome/index.tsx b/diffcases/arco-pro/src/pages/welcome/index.tsx new file mode 100644 index 00000000000..509b0b6c86c --- /dev/null +++ b/diffcases/arco-pro/src/pages/welcome/index.tsx @@ -0,0 +1,66 @@ +import useLocale from '@/utils/useLocale' +import { Alert, Card, Link, Tag, Typography } from '@arco-design/web-react' +import { IconDoubleRight } from '@arco-design/web-react/icon' +import React from 'react' +import { useSelector } from 'react-redux' +import CodeBlock from './code-block' +import locale from './locale' +import styles from './style/index.module.less' + +export default function Welcome() { + const t = useLocale(locale) + const userInfo = useSelector((state: any) => state.userInfo) || {} + return ( +{code}++ } + onClick={() => { + clipboard(code) + Message.success('复制成功') + }} + /> + +
+
+ )
+}
diff --git a/diffcases/arco-pro/src/pages/welcome/locale/index.ts b/diffcases/arco-pro/src/pages/welcome/locale/index.ts
new file mode 100644
index 00000000000..33fd6f1ef6e
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/welcome/locale/index.ts
@@ -0,0 +1,38 @@
+const i18n = {
+ "en-US": {
+ "welcome.title.welcome": "Welcome",
+ "welcome.invite":
+ "Arco Cli commands can be used to install materials from the material market, and we sincerely invite you to experience it.",
+ "welcome.usage": "Usage",
+ "welcome.step.title.pickup": "Select materials from the material market",
+ "welcome.step.title.install": "Install",
+ "welcome.step.title.result": "Result",
+ "welcome.step.content.pickup":
+ "For example, if you want the workplace page of pro, you can get the package name of the material from the material details",
+ "welcome.step.content.install":
+ "After getting the package name, you can install the material through the following command.",
+ "welcome.step.content.result": "Then, you get a workplace page easily.",
+ "welcome.title.material":
+ "For more materials, please check the following link",
+ "welcome.link.material-pro": "Arco Design Pro material collection",
+ "welcome.link.material-all": "All materials"
+ },
+ "zh-CN": {
+ "welcome.title.welcome": "欢迎",
+ "welcome.invite": "通过 Arco Cli 命令可以安装物料市场的物料，诚邀您体验。",
+ "welcome.usage": "使用方式",
+ "welcome.step.title.pickup": "从物料市场选择物料",
+ "welcome.step.title.install": "安装物料",
+ "welcome.step.title.result": "成果",
+ "welcome.step.content.pickup":
+ "例如您看中了 pro 的 workplace 页面，可以从物料详情中获得该物料的包名",
+ "welcome.step.content.install":
+ "得到包名后，您就可以通过如下命令安装该物料",
+ "welcome.step.content.result": "这样您就能轻松获得一个 workplace 页面",
+ "welcome.title.material": "更多物料请查看以下链接",
+ "welcome.link.material-pro": "Arco Design Pro 物料合集",
+ "welcome.link.material-all": "所有物料"
+ }
+};
+
+export default i18n;
diff --git a/diffcases/arco-pro/src/pages/welcome/style/code-block.module.less b/diffcases/arco-pro/src/pages/welcome/style/code-block.module.less
new file mode 100644
index 00000000000..91a2f232bba
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/welcome/style/code-block.module.less
@@ -0,0 +1,14 @@
+.code-block {
+ color: var(--color-text-2);
+ padding: 8px;
+ background-color: var(--color-fill-1);
+ width: fit-content;
+
+ &-content {
+ display: inline-block;
+ }
+
+ &-copy-btn {
+ margin-left: 8px;
+ }
+}
diff --git a/diffcases/arco-pro/src/pages/welcome/style/index.module.less b/diffcases/arco-pro/src/pages/welcome/style/index.module.less
new file mode 100644
index 00000000000..3e09cbafef5
--- /dev/null
+++ b/diffcases/arco-pro/src/pages/welcome/style/index.module.less
@@ -0,0 +1,4 @@
+.header {
+ background: var(--color-bg-2);
+ padding: 20px;
+}
diff --git a/diffcases/arco-pro/src/react-app-env.d.ts b/diffcases/arco-pro/src/react-app-env.d.ts
new file mode 100644
index 00000000000..6431bc5fc6b
--- /dev/null
+++ b/diffcases/arco-pro/src/react-app-env.d.ts
@@ -0,0 +1 @@
+///
+
+ {t['welcome.title.welcome']}
+
+
+ {userInfo.name}, {userInfo.email}
+
+
+
+
+
+ 1. {t['welcome.step.title.pickup']}
+
+
+ {t['welcome.step.content.pickup']}
+
+ @arco-design/pro-pages-workplace
+
+
+
+
+ 2. {t['welcome.step.title.install']}
+
+ {t['welcome.step.content.install']}
+
+ 3. {t['welcome.step.title.result']}
+
+ {t['welcome.step.content.result']}
+
+
+ {t['welcome.title.material']}
+
+
+
+
+ {t['welcome.link.material-pro']}
+
+
+ {t['welcome.link.material-all']}
+
+
+ )
+}
+
+export default (loader) =>
+ load(loader, {
+ fallback: LoadingComponent({
+ pastDelay: true,
+ error: false,
+ timedOut: false,
+ }),
+ })
diff --git a/diffcases/arco-pro/src/utils/setupMock.ts b/diffcases/arco-pro/src/utils/setupMock.ts
new file mode 100644
index 00000000000..ad37e319371
--- /dev/null
+++ b/diffcases/arco-pro/src/utils/setupMock.ts
@@ -0,0 +1,5 @@
+export default (config: { mock?: boolean; setup: () => void }) => {
+ const { mock = process.env.NODE_ENV === "development", setup } = config;
+ if (mock === false) return;
+ setup();
+};
diff --git a/diffcases/arco-pro/src/utils/useChartTheme.ts b/diffcases/arco-pro/src/utils/useChartTheme.ts
new file mode 100644
index 00000000000..67c92aae211
--- /dev/null
+++ b/diffcases/arco-pro/src/utils/useChartTheme.ts
@@ -0,0 +1,26 @@
+import { G2 } from "bizcharts";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+
+const defaultDarkTheme = G2.getTheme("dark");
+
+G2.registerTheme("darkTheme", {
+ ...defaultDarkTheme,
+ background: "transparent"
+});
+
+function useBizTheme() {
+ const theme = useSelector((state: any) => state.theme);
+ const themeName = theme === "dark" ? "darkTheme" : "light";
+ const [themeObj, setThemeObj] = useState(G2.getTheme(themeName));
+
+ useEffect(() => {
+ const themeName = theme === "dark" ? "darkTheme" : "light";
+ const newTheme = G2.getTheme(themeName);
+ setThemeObj(newTheme);
+ }, [theme]);
+
+ return themeObj;
+}
+
+export default useBizTheme;
diff --git a/diffcases/arco-pro/src/utils/useLocale.ts b/diffcases/arco-pro/src/utils/useLocale.ts
new file mode 100644
index 00000000000..4e35648407e
--- /dev/null
+++ b/diffcases/arco-pro/src/utils/useLocale.ts
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { GlobalContext } from "../context";
+import defaultLocale from "../locale";
+
+function useLocale(locale = null) {
+ const { lang } = useContext(GlobalContext);
+
+ return (locale || defaultLocale)[lang] || {};
+}
+
+export default useLocale;
diff --git a/diffcases/arco-pro/src/utils/useStorage.ts b/diffcases/arco-pro/src/utils/useStorage.ts
new file mode 100644
index 00000000000..c86e09c3451
--- /dev/null
+++ b/diffcases/arco-pro/src/utils/useStorage.ts
@@ -0,0 +1,48 @@
+// https://stackoverflow.com/questions/68424114/next-js-how-to-fetch-localstorage-data-before-client-side-rendering
+// 解决 nextJS 无法获取初始localstorage问题
+
+import { isSSR } from "@/utils/is";
+import { useEffect, useState } from "react";
+
+const getDefaultStorage = key => {
+ if (!isSSR) {
+ return localStorage.getItem(key);
+ } else {
+ return undefined;
+ }
+};
+
+function useStorage(
+ key: string,
+ defaultValue?: string
+): [string, (string) => void, () => void] {
+ const [storedValue, setStoredValue] = useState(
+ getDefaultStorage(key) || defaultValue
+ );
+
+ const setStorageValue = (value: string) => {
+ if (!isSSR) {
+ localStorage.setItem(key, value);
+ if (value !== storedValue) {
+ setStoredValue(value);
+ }
+ }
+ };
+
+ const removeStorage = () => {
+ if (!isSSR) {
+ localStorage.removeItem("key");
+ }
+ };
+
+ useEffect(() => {
+ const storageValue = localStorage.getItem(key);
+ if (storageValue) {
+ setStoredValue(storageValue);
+ }
+ }, []);
+
+ return [storedValue, setStorageValue, removeStorage];
+}
+
+export default useStorage;
diff --git a/diffcases/arco-pro/tsconfig-base.json b/diffcases/arco-pro/tsconfig-base.json
new file mode 100644
index 00000000000..c6daa82d66f
--- /dev/null
+++ b/diffcases/arco-pro/tsconfig-base.json
@@ -0,0 +1,9 @@
+{
+ "compilerOptions": {
+ // "rootDirs": ["./src", "../arco-design-pro-next/src"],
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["src/*"]
+ }
+ }
+}
diff --git a/diffcases/arco-pro/tsconfig.json b/diffcases/arco-pro/tsconfig.json
new file mode 100644
index 00000000000..6b12eb3aff4
--- /dev/null
+++ b/diffcases/arco-pro/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "extends": "./tsconfig-base.json",
+ "compilerOptions": {
+ "target": "es5",
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "allowJs": true,
+ // TODO: Remove skipLibCheck when fix upstream type bug
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": false,
+ "forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "include": [
+ "src"
+ ]
+}
diff --git a/diffcases/arco-pro/webpack.config.js b/diffcases/arco-pro/webpack.config.js
new file mode 100644
index 00000000000..8759c647947
--- /dev/null
+++ b/diffcases/arco-pro/webpack.config.js
@@ -0,0 +1,129 @@
+const path = require("path");
+const webpack = require("webpack");
+const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+const prod = process.env.NODE_ENV === "production";
+
+/** @type {import('webpack').Configuration} */
+const config = {
+ mode: 'development',
+ context: __dirname,
+ entry: "./src/index.tsx",
+ target: ["web", "es5"],
+ devServer: {
+ port: 5555,
+ webSocketServer: "sockjs",
+ historyApiFallback: true
+ },
+ module: {
+ rules: [
+ {
+ test: /\.less$/,
+ use: ["style-loader", "css-loader", "less-loader"],
+ exclude: /\.module\.less$/
+ },
+ {
+ test: /\.module\.less$/,
+ use: ["style-loader", {
+ loader: "css-loader",
+ options: {
+ modules: true,
+ importLoaders: 1,
+ },
+ }, "less-loader"],
+ },
+ {
+ test: /\.svg$/,
+ use: "@svgr/webpack"
+ },
+ {
+ test: /\.(j|t)s$/,
+ exclude: [/[\\/]node_modules[\\/]/],
+ loader: "swc-loader",
+ options: {
+ sourceMap: false,
+ jsc: {
+ parser: {
+ syntax: "typescript"
+ },
+ externalHelpers: true
+ },
+ env: {
+ targets: "Chrome >= 48"
+ }
+ }
+ },
+ {
+ test: /\.(j|t)sx$/,
+ loader: "swc-loader",
+ exclude: [/[\\/]node_modules[\\/]/],
+ options: {
+ sourceMap: false,
+ jsc: {
+ parser: {
+ syntax: "typescript",
+ tsx: true
+ },
+ transform: {
+ react: {
+ runtime: "automatic",
+ development: !prod,
+ refresh: !prod
+ }
+ },
+ externalHelpers: true
+ },
+ env: {
+ targets: "Chrome >= 48"
+ }
+ }
+ },
+ {
+ test: /\.png$/,
+ type: "asset"
+ }
+ ]
+ },
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "src"),
+ // The default exported mock.js contains a minified [parser](https://github.com/nuysoft/Mock/blob/refactoring/src/mock/regexp/parser.js) with super deep binary
+ // expression, which causes stack overflow for swc parser in debug mode.
+ // Alias to the unminified version mitigates this problem.
+ // See also