refactor: update UI components and styles, adjust configs (#11511)

biome.json

@@ -14,6 +14,8 @@
       "!**/dist/**",
       "!**/server/**",
       "!**/public/**",
+      "!**/coverage/**",
+      "!**/node_modules/**",
       "!biome.json"
     ]
   },

config/config.ts

@@ -45,13 +45,9 @@ export default defineConfig({
    * @name 主题的配置
    * @description 虽然叫主题，但是其实只是 less 的变量设置
    * @doc antd的主题设置 https://ant.design/docs/react/customize-theme-cn
-   * @doc umi 的theme 配置 https://umijs.org/docs/api/config#theme
+   * @doc umi 的 theme 配置 https://umijs.org/docs/api/config#theme
    */
-  theme: {
-    // 如果不想要 configProvide 动态设置主题需要把这个设置为 default
-    // 只有设置为 variable， 才能使用 configProvide 动态设置主色调
-    'root-entry-name': 'variable',
-  },
+  // theme: { '@primary-color': '#1DA57A' }
   /**
    * @name moment 的国际化配置
    * @description 如果对国际化没有要求，打开之后能减少js的包大小

src/loading.tsx

@@ -1,5 +1,7 @@
 import { Skeleton } from 'antd';
 
-const Loading: React.FC = () => <Skeleton style={{ margin: '24px 40px' }} active />;
+const Loading: React.FC = () => (
+  <Skeleton style={{ margin: '24px 40px' }} active />
+);
 
 export default Loading;

src/pages/account/center/components/ArticleListContent/index.style.ts

@@ -10,8 +10,10 @@ const useStyles = createStyles(({ token }) => {
       marginTop: '16px',
       color: token.colorTextSecondary,
       lineHeight: '22px',
+      display: 'flex',
+      gap: '8px',
+      alignItems: 'center',
       '& > em': {
-        marginLeft: '16px',
         color: token.colorTextDisabled,
         fontStyle: 'normal',
       },

src/pages/account/center/components/Articles/index.tsx

@@ -31,6 +31,9 @@ const Articles: React.FC = () => {
       rowKey="id"
       itemLayout="vertical"
       dataSource={listData?.list || []}
+      style={{
+        margin: '0 -24px',
+      }}
       renderItem={(item) => (
         <List.Item
           key={item.id}

src/pages/account/center/index.tsx

@@ -116,7 +116,6 @@ const TagList: React.FC<{
       {inputVisible && (
         <Input
           ref={ref}
-          type="text"
           size="small"
           style={{
             width: 78,
@@ -227,7 +226,7 @@ const Center: React.FC = () => {
             loading={loading}
           >
             {!loading && currentUser && (
-              <div>
+              <>
                 <div className={styles.avatarHolder}>
                   <img alt="" src={currentUser.avatar} />
                   <div className={styles.name}>{currentUser.name}</div>
@@ -255,14 +254,14 @@ const Center: React.FC = () => {
                     ))}
                   </Row>
                 </div>
-              </div>
+              </>
             )}
           </Card>
         </Col>
         <Col lg={17} md={24}>
           <Card
             className={styles.tabsCard}
-            bordered={false}
+            variant="borderless"
             tabList={operationTabList}
             activeTabKey={tabKey}
             onTabChange={(_tabKey: string) => {

src/pages/dashboard/analysis/components/ProportionSales.tsx

@@ -1,6 +1,5 @@
 import { Pie } from '@ant-design/plots';
-import { Card, Radio, Typography } from 'antd';
-import type { RadioChangeEvent } from 'antd/es/radio';
+import { Card, Segmented, Typography } from 'antd';
 import numeral from 'numeral';
 import React from 'react';
 import type { DataItem } from '../data.d';
@@ -18,14 +17,14 @@ const ProportionSales = ({
   dropdownGroup: React.ReactNode;
   salesType: 'all' | 'online' | 'stores';
   salesPieData: DataItem[];
-  handleChangeSalesType?: (e: RadioChangeEvent) => void;
+  handleChangeSalesType?: (value: 'all' | 'online' | 'stores') => void;
 }) => {
   const { styles } = useStyles();
   return (
     <Card
       loading={loading}
       className={styles.salesCard}
-      bordered={false}
+      variant="borderless"
       title="销售额类别占比"
       style={{
         height: '100%',
@@ -33,17 +32,20 @@ const ProportionSales = ({
       extra={
         <div className={styles.salesCardExtra}>
           {dropdownGroup}
-          <div className={styles.salesTypeRadio}>
-            <Radio.Group value={salesType} onChange={handleChangeSalesType}>
-              <Radio.Button value="all">全部渠道</Radio.Button>
-              <Radio.Button value="online">线上</Radio.Button>
-              <Radio.Button value="stores">门店</Radio.Button>
-            </Radio.Group>
-          </div>
+          <Segmented
+            className={styles.salesTypeRadio}
+            value={salesType}
+            onChange={handleChangeSalesType}
+            options={[
+              { label: '全部渠道', value: 'all' },
+              { label: '线上', value: 'online' },
+              { label: '门店', value: 'stores' },
+            ]}
+            size="middle"
+          />
         </div>
       }
     >
-      <div>
       <Text>销售额</Text>
       <Pie
         height={340}
@@ -55,12 +57,10 @@ const ProportionSales = ({
         legend={false}
         label={{
           position: 'spider',
-            text: (item: { x: number; y: number }) => {
-              return `${item.x}: ${numeral(item.y).format('0,0')}`;
-            },
+          text: (item: { x: number; y: number }) =>
+            `${item.x}: ${numeral(item.y).format('0,0')}`,
         }}
       />
-      </div>
     </Card>
   );
 };

src/pages/dashboard/analysis/components/SalesCard.tsx

@@ -39,13 +39,15 @@ const SalesCard = ({
   return (
     <Card
       loading={loading}
-      bordered={false}
-      bodyStyle={{
-        padding: 0,
+      variant="borderless"
+      styles={{
+        body: {
+          padding: loading ? 24 : 0,
+        },
       }}
     >
-      <div className={styles.salesCard}>
       <Tabs
+        className={styles.salesCard}
         tabBarExtraContent={
           <div className={styles.salesExtraWrap}>
             <div className={styles.salesExtra}>
@@ -77,6 +79,7 @@ const SalesCard = ({
             <RangePicker
               value={rangePickerValue}
               onChange={handleRangePickerChange}
+              variant="filled"
               style={{
                 width: 256,
               }}
@@ -212,7 +215,6 @@ const SalesCard = ({
           },
         ]}
       />
-      </div>
     </Card>
   );
 };

src/pages/dashboard/analysis/index.tsx

@@ -3,7 +3,6 @@ import { GridContent } from '@ant-design/pro-components';
 import { useRequest } from '@umijs/max';
 import { Col, Dropdown, Row } from 'antd';
 import type { RangePickerProps } from 'antd/es/date-picker';
-import type { RadioChangeEvent } from 'antd/es/radio';
 import type { Dayjs } from 'dayjs';
 import type { FC } from 'react';
 import { Suspense, useState } from 'react';
@@ -90,8 +89,8 @@ const Analysis: FC<AnalysisProps> = () => {
       </Dropdown>
     </span>
   );
-  const handleChangeSalesType = (e: RadioChangeEvent) => {
-    setSalesType(e.target.value);
+  const handleChangeSalesType = (value: SalesType) => {
+    setSalesType(value);
   };
   const handleTabChange = (key: string) => {
     setCurrentTabKey(key);

src/pages/list/basic-list/index.tsx

@@ -11,8 +11,8 @@ import {
   List,
   Modal,
   Progress,
-  Radio,
   Row,
+  Segmented,
 } from 'antd';
 import dayjs from 'dayjs';
 import type { FC } from 'react';
@@ -27,8 +27,6 @@ import {
 } from './service';
 import useStyles from './style.style';
 
-const RadioButton = Radio.Button;
-const RadioGroup = Radio.Group;
 const { Search } = Input;
 const Info: FC<{
   title: React.ReactNode;
@@ -139,15 +137,20 @@ export const BasicList: FC = () => {
   };
   const extraContent = (
     <div>
-      <RadioGroup defaultValue="all">
-        <RadioButton value="all">全部</RadioButton>
-        <RadioButton value="progress">进行中</RadioButton>
-        <RadioButton value="waiting">等待中</RadioButton>
-      </RadioGroup>
+      <Segmented
+        defaultValue="all"
+        options={[
+          { label: '全部', value: 'all' },
+          { label: '进行中', value: 'progress' },
+          { label: '等待中', value: 'waiting' },
+        ]}
+        // 如有需要可添加 onChange 事件
+      />
       <Search
         className={styles.extraContentSearch}
         placeholder="请输入"
         onSearch={() => ({})}
+        variant="filled"
       />
     </div>
   );
@@ -204,13 +207,15 @@ export const BasicList: FC = () => {
 
           <Card
             className={styles.listCard}
-            bordered={false}
+            variant="borderless"
             title="基本列表"
             style={{
               marginTop: 24,
             }}
-            bodyStyle={{
+            styles={{
+              body: {
                 padding: '0 32px 40px 32px',
+              },
             }}
             extra={extraContent}
           >