WIP fix type error!!!

AccountCenter/src/components/Applications/index.tsx

@@ -104,7 +104,7 @@ const Applications: React.FC = () => {
               <Tooltip title="分享" key="share">
                 <ShareAltOutlined />
               </Tooltip>,
-              <Dropdown menu={itemMenu} key="ellipsis">
+              <Dropdown overlay={itemMenu} key="ellipsis">
                 <EllipsisOutlined />
               </Dropdown>,
             ]}

AccountCenter/src/components/ArticleListContent/index.tsx

@@ -17,7 +17,7 @@ const ArticleListContent: React.FC<ApplicationsProps> = ({
 }) => {
   const { styles } = useStyles();
   return (
-    <div className={styles.listContent}>
+    <div>
       <div className={styles.description}>{content}</div>
       <div className={styles.extra}>
         <Avatar src={avatar} size="small" />

AccountCenter/src/components/Articles/index.style.ts

@@ -5,7 +5,7 @@ const useStyles = createStyles(({ token }) => {
     articleList: {
       '.ant-list-item:first-child': { paddingTop: '0' },
     },
-    'a.listItemMetaTitle': {
+    listItemMetaTitle: {
       color: token.colorTextHeading,
     },
   };

AccountCenter/src/index.tsx

@@ -1,5 +1,5 @@
 import { PlusOutlined, HomeOutlined, ContactsOutlined, ClusterOutlined } from '@ant-design/icons';
-import { Avatar, Card, Col, Divider, Input, Row, Tag } from 'antd';
+import { Avatar, Card, Col, Divider, Input, Row, Tag, InputRef } from 'antd';
 import React, { useState, useRef } from 'react';
 import { GridContent } from '@ant-design/pro-components';
 import { Link, useRequest } from '@umijs/max';
@@ -40,7 +40,7 @@ const operationTabList = [
 
 const TagList: React.FC<{ tags: CurrentUser['tags'] }> = ({ tags }) => {
   const { styles } = useStyles();
-  const ref = useRef<Input | null>(null);
+  const ref = useRef<InputRef>(null);
   const [newTags, setNewTags] = useState<TagType[]>([]);
   const [inputVisible, setInputVisible] = useState<boolean>(false);
   const [inputValue, setInputValue] = useState<string>('');

AccountSettings/src/components/base.tsx

@@ -157,7 +157,6 @@ const BaseView: React.FC = () => {
                     labelInValue: true,
                   }}
                   name="province"
-                  className={styles.item}
                   request={async () => {
                     return queryProvince().then(({ data }) => {
                       return data.map((item) => {
@@ -186,7 +185,6 @@ const BaseView: React.FC = () => {
                           },
                         ]}
                         disabled={!province}
-                        className={styles.item}
                         request={async () => {
                           if (!province?.key) {
                             return [];

DashboardAnalysis/src/_mock.ts

@@ -175,7 +175,7 @@ const radarTitleMap = {
   hot: '热度',
 };
 radarOriginData.forEach((item) => {
-  Object.keys(item).forEach((key) => {
+  (Object.keys(item) as Array<keyof typeof item>).forEach((key) => {
     if (key !== 'name') {
       radarData.push({
         name: item.name,

DashboardAnalysis/src/components/Charts/Bar/index.tsx

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 
 import Debounce from 'lodash.debounce';
 import autoHeight from '../autoHeight';
-import styles from '../index.less';
+// import styles from '../index.less';
 
 export type BarProps = {
   title: React.ReactNode;
@@ -104,7 +104,7 @@ class Bar extends Component<
     ];
 
     return (
-      <div className={styles.chart} style={{ height }} ref={this.handleRoot}>
+      <div style={{ height }} ref={this.handleRoot}>
         <div ref={this.handleRef}>
           {title && <h4 style={{ marginBottom: 20 }}>{title}</h4>}
           <Chart

DashboardAnalysis/src/components/Charts/MiniProgress/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tooltip } from 'antd';
-import useStyles from './index.style';
+// import useStyles from './index.style';
 
 export type MiniProgressProps = {
   target: number;
@@ -18,7 +18,7 @@ const MiniProgress: React.FC<MiniProgressProps> = ({
   strokeWidth,
   percent,
 }) => {
-  const { styles } = useStyles();
+  const { styles } = /* useStyles(); */ { styles: {} as any };
   return (
     <div className={styles.miniProgress}>
       <Tooltip title={targetLabel}>

DashboardAnalysis/src/components/Charts/Pie/index.tsx

@@ -7,7 +7,8 @@ import { Divider } from 'antd';
 import ReactFitText from 'react-fittext';
 import classNames from 'classnames';
 import autoHeight from '../autoHeight';
-import styles from './index.less';
+// import styles from './index.less';
+const styles = {} as any;
 
 export type PieProps = {
   animate?: boolean;
@@ -141,7 +142,7 @@ class Pie extends Component<PieProps, PieState> {
     newItem.checked = !newItem.checked;
 
     const { legendData } = this.state;
-    legendData[i] = newItem;
+    legendData[Number(i)] = newItem;
 
     const filteredLegendData = legendData.filter((l) => l.checked).map((l) => l.x);
 

DashboardAnalysis/src/components/Charts/TagCloud/index.tsx

@@ -5,7 +5,8 @@ import DataSet from '@antv/data-set';
 import Debounce from 'lodash.debounce';
 import classNames from 'classnames';
 import autoHeight from '../autoHeight';
-import styles from './index.less';
+// import styles from './index.less';
+const styles: any = {};
 
 /* eslint no-underscore-dangle: 0 */
 /* eslint no-param-reassign: 0 */

DashboardAnalysis/src/components/Charts/TimelineChart/index.tsx

@@ -4,7 +4,7 @@ import DataSet from '@antv/data-set';
 import React from 'react';
 import Slider from 'bizcharts-plugin-slider';
 import autoHeight from '../autoHeight';
-import useStyles from './index.style';
+// import useStyles from './index.style';
 
 export type TimelineChartProps = {
   data: {
@@ -21,7 +21,7 @@ export type TimelineChartProps = {
 };
 
 const TimelineChart: React.FC<TimelineChartProps> = (props) => {
-  const { styles } = useStyles();
+  const { styles } = /* useStyles(); */ { styles: {} as any };
   const {
     title,
     height = 400,
@@ -66,8 +66,8 @@ const TimelineChart: React.FC<TimelineChartProps> = (props) => {
       type: 'map',
       callback(row: { y1: string; y2: string }) {
         const newRow = { ...row };
-        newRow[titleMap.y1] = row.y1;
-        newRow[titleMap.y2] = row.y2;
+        newRow[titleMap.y1 as keyof typeof row] = row.y1;
+        newRow[titleMap.y2 as keyof typeof row] = row.y2;
         return newRow;
       },
     })

DashboardAnalysis/src/components/Charts/WaterWave/index.tsx

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 
 import autoHeight from '../autoHeight';
-import styles from './index.less';
+// import styles from './index.less';
+const styles: any = {};
 
 /* eslint no-return-assign: 0 */
 /* eslint no-mixed-operators: 0 */

DashboardAnalysis/src/components/Charts/autoHeight.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 export type IReactComponent<P = any> =
-  | React.StatelessComponent<P>
+  | React.FunctionComponent<P>
   | React.ComponentClass<P>
   | React.ClassicComponentClass<P>;
 

DashboardAnalysis/src/components/NumberInfo/index.style.ts

@@ -11,7 +11,8 @@ const useStyles = createStyles(({ token }) => {
     numberInfoTitle: {
       marginBottom: '16px',
       color: token.colorText,
-      fontSize: token['font-size-lg'],
+      // fontSize: token['font-size-lg'],
+      fontSize: `${token.fontSizeLG}px`,
       transition: 'all 0.3s',
     },
     numberInfoSubTitle: {
@@ -36,7 +37,8 @@ const useStyles = createStyles(({ token }) => {
     subTotal: {
       marginRight: '0',
       color: token.colorTextSecondary,
-      fontSize: token['font-size-lg'],
+      // fontSize: token['font-size-lg'],
+      fontSize: `${token.fontSizeLG}px`,
       verticalAlign: 'top',
     },
     anticon: {

DashboardAnalysis/src/components/NumberInfo/index.tsx

@@ -27,12 +27,7 @@ const NumberInfo: React.FC<NumberInfoProps> = ({
 }) => {
   const { styles } = useStyles();
   return (
-    <div
-      className={classNames(styles.numberInfo, {
-        [styles[`numberInfo${theme}`]]: theme,
-      })}
-      {...rest}
-    >
+    <div className={classNames(styles[`numberInfo${theme}` as keyof typeof styles])} {...rest}>
       {title && (
         <div className={styles.numberInfoTitle} title={typeof title === 'string' ? title : ''}>
           {title}

DashboardAnalysis/src/components/SalesCard.tsx

@@ -1,13 +1,14 @@
 import { Card, Col, DatePicker, Row, Tabs } from 'antd';
 import type { RangePickerProps } from 'antd/es/date-picker/generatePicker';
-import type moment from 'moment';
+// import type moment from 'moment';
 import { Column } from '@ant-design/charts';
 
 import numeral from 'numeral';
 import type { DataItem } from '../data.d';
 import useStyles from '../style.style';
 
-type RangePickerValue = RangePickerProps<moment.Moment>['value'];
+// FIXME: antd5 已经升级为 dayjs 了
+type RangePickerValue = RangePickerProps<any>['value'];
 export type TimeType = 'today' | 'week' | 'month' | 'year';
 
 const { RangePicker } = DatePicker;
@@ -21,21 +22,18 @@ for (let i = 0; i < 7; i += 1) {
   });
 }
 
-const SalesCard = ({
-  rangePickerValue,
-  salesData,
-  isActive,
-  handleRangePickerChange,
-  loading,
-  selectDate,
-}: {
-  rangePickerValue?: RangeValue<DateType>;
+interface SalesCardProps {
+  rangePickerValue?: RangePickerValue;
   isActive: (key: TimeType) => string;
   salesData: DataItem[];
   loading: boolean;
   handleRangePickerChange: (dates: RangePickerValue, dateStrings: [string, string]) => void;
   selectDate: (key: TimeType) => void;
-}) => {
+}
+
+const SalesCard = (props: SalesCardProps) => {
+  const { rangePickerValue, salesData, isActive, handleRangePickerChange, loading, selectDate } =
+    props;
   const { styles } = useStyles();
   return (
     <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>

DashboardAnalysis/src/components/Trend/index.style.ts

@@ -1,28 +1,58 @@
 import { createStyles } from 'antd-style';
 
-const useStyles = createStyles(({ token }) => {
-  return {
-    trendItem: {
-      display: 'inline-block',
-      fontSize: token.fontSize,
-      lineHeight: '22px',
+const useStyles = createStyles(({ token, cx, css }) => {
+  const trendItem = css({
+    display: 'inline-block',
+    fontSize: token.fontSize,
+    lineHeight: '22px',
+  });
+
+  const upDownCommon = css({
+    position: 'relative',
+    top: 1,
+    marginLeft: 4,
+    span: {
+      fontSize: 12,
+      transform: 'scale(0.83)',
     },
-    up: {
+  });
+
+  const up = cx(
+    upDownCommon,
+    css({
       color: token['red-6'],
-    },
-    down: {
+    }),
+  );
+
+  const down = cx(
+    upDownCommon,
+    css({
       top: '-1px',
       color: token['green-6'],
-    },
-    'trendItemGrey .up, trendItemGrey .down': {
-      color: token.colorText,
-    },
-    'reverseColor .up': {
-      color: token['green-6'],
-    },
-    'reverseColor .down': {
-      color: token['red-6'],
-    },
+    }),
+  );
+
+  const trendItemGrey = css`
+    .${cx(up)}, .${cx(down)} {
+      color: ${token.colorText};
+    }
+  `;
+
+  const reverseColor = css`
+    .${cx(up)} {
+      color: ${token['green-6']};
+    }
+    .${cx(down)} {
+      color: ${token['red-6']};
+    }
+  `;
+
+  return {
+    trendItem,
+    up,
+    down,
+    trendItemGrey,
+    reverseColor,
   };
 });
 

DashboardAnalysis/src/components/Trend/index.tsx

@@ -11,14 +11,8 @@ export type TrendProps = {
   className?: string;
 };
 
-const Trend: React.FC<TrendProps> = ({
-  colorful = true,
-  reverseColor = false,
-  flag,
-  children,
-  className,
-  ...rest
-}) => {
+const Trend = (props: React.PropsWithChildren<TrendProps>) => {
+  const { colorful = true, reverseColor = false, flag, children, className, ...rest } = props;
   const { styles } = useStyles();
   const classString = classNames(
     styles.trendItem,

DashboardWorkplace/src/_mock.ts

@@ -375,7 +375,7 @@ const radarTitleMap = {
   hot: '热度',
 };
 radarOriginData.forEach((item) => {
-  Object.keys(item).forEach((key) => {
+  (Object.keys(item) as Array<keyof typeof item>).forEach((key) => {
     if (key !== 'name') {
       radarData.push({
         name: item.name,

DashboardWorkplace/src/index.tsx

@@ -85,10 +85,12 @@ const PAGE_NAME_UPPER_CAMEL_CASE: FC = () => {
   const { styles } = useStyles();
   const renderActivities = (item: ActivitiesType) => {
     const events = item.template.split(/@\{([^{}]*)\}/gi).map((key) => {
-      if (item[key]) {
+      // fixme: 这里总感觉很奇怪... 不过应该没啥大毛病
+      const anyItem: any = { ...item };
+      if (anyItem[key]) {
         return (
-          <a href={item[key].link} key={item[key].name}>
-            {item[key].name}
+          <a href={anyItem[key].link} key={anyItem[key].name}>
+            {anyItem[key].name}
           </a>
         );
       }
@@ -199,7 +201,7 @@ const PAGE_NAME_UPPER_CAMEL_CASE: FC = () => {
             title="XX 指数"
             loading={data?.radarData?.length === 0}
           >
-            <div className={styles.chart}>
+            <div>
               <Radar
                 height={343}
                 data={data?.radarData || []}