app发版页样式优化

src/pages/productCenter/mobileConfig/menuconfig/ApkUpload/index.js

 import React, { useEffect, useMemo, useState } from 'react';
 import styles from './index.less';
-import { Form, Table, Input, message, Button, Upload, Tooltip, Space } from 'antd';
+import { Form, Table, Input, message, Button, Upload, Tooltip, Space, Tag } from 'antd';
 import {
   getAppUploadRecords,
   postAppVersionInfo,
   getApkVerionInfo,
 } from '@/services/mobileConfig/api';
-import { UploadOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { UploadOutlined, QuestionCircleOutlined, DownloadOutlined } from '@ant-design/icons';
 import { request } from '@wisdom-utils/utils/es';
 const ApkUpload = props => {
   const [loadding, setLoadding] = useState(false);
@@ -27,7 +27,25 @@ const ApkUpload = props => {
     {
       title: '版本号',
       dataIndex: 'Ver',
+      width: 200,
       key: 'Ver',
+      render: (text, record, index) => {
+        if (index === 0)
+          return (
+            <>
+              {text}
+              <Tag
+                color="blue"
+                style={{
+                  marginLeft: '10px',
+                }}
+              >
+                当前版本
+              </Tag>
+            </>
+          );
+        return <>{text}</>;
+      },
     },
     {
       title: '上传时间',
@@ -38,7 +56,7 @@ const ApkUpload = props => {
       title: '发版日志',
       dataIndex: 'UploadLog',
       key: 'UploadLog',
-      render: (text, recore, index) => (
+      render: (text, record, index) => (
         <Tooltip title={text}>
           <div
             style={{
@@ -57,16 +75,15 @@ const ApkUpload = props => {
       title: '下载',
       key: 'DownUrl',
       dataIndex: 'DownUrl',
-      render: (text, record, index) => (
-        <UploadOutlined onClick={() => window.open(`${window.origin}${text}`, '_self')} />
-      ),
+      render: (text, record, index) => {
+        return <DownloadOutlined onClick={() => window.open(`${window.origin}${text}`, '_self')} />;
+      },
     },
   ];
 
   const [form] = Form.useForm();
   useEffect(() => {
     getRecords();
-    //getAppUploadRecords().then(x=> console.log(x, '上传记录'))
   }, []);
   const normFile = e => {
     if (Array.isArray(e)) {
@@ -129,6 +146,7 @@ const ApkUpload = props => {
         display: 'flex',
         width: '100%',
       }}
+      className={styles.apkUpload}
     >
       <Form
         style={{
@@ -146,18 +164,24 @@ const ApkUpload = props => {
         <Form.Item name="ApkName" label="应用名称" rules={[{ required: true }]}>
           <Input placeholder="请输入应用名称" />
         </Form.Item>
-        <Form.Item label="发布版本号">
+        <Form.Item label="发版版本号">
           <Space>
             <Form.Item name="Ver" noStyle rules={[{ required: true, message: '请输入版本号' }]}>
-              <Input placeholder="请输入发布版本号" />
+              <Input placeholder="请输入发版版本号" />
             </Form.Item>
-            <Tooltip title="版本号通过上传Apk获取或者手动填写">
+            <Tooltip title="上传apk自动获取">
               <QuestionCircleOutlined />
             </Tooltip>
           </Space>
         </Form.Item>
-        <Form.Item name="UploadLog" label="发版说明" rules={[{ required: true }]}>
-          <TextArea rows={6} placeholder="请输入发版说明" />
+        <Form.Item name="UploadLog" label="发版日志" rules={[{ required: true }]}>
+          <TextArea
+            rows={6}
+            placeholder="请输入发版日志，例：
+              更新日志：
+              1.修复bugXXXX
+              2.新增功能XXXX"
+          />
         </Form.Item>
         <Form.Item name="DownUrl" style={{ display: 'none' }} />
         <Form.Item
@@ -208,6 +232,7 @@ const ApkUpload = props => {
         </Form.Item>
       </Form>
       <Table
+        bordered={true}
         style={{
           width: '50%',
         }}
@@ -216,6 +241,9 @@ const ApkUpload = props => {
           pageSize: 10,
         }}
         dataSource={dataSource}
+        rowClassName={(record, index) => {
+          if (index === 0) return 'newVer-row';
+        }}
       />
     </div>
   );

src/pages/productCenter/mobileConfig/menuconfig/ApkUpload/index.less

+.apkUpload{
+    :global{
+        .newVer-row{
+            background-color: #e6f7ff; /* 淡蓝色背景 */
+            font-weight: bold; /* 粗体字体 */
+            color: #1890ff; /* Ant Design主色 */
+        }
+    }
+}