From ae501f34ddb3b9f38d4e4e6e9513e004976eb356 Mon Sep 17 00:00:00 2001
From: moshangqi <2509678669@qq.com>
Date: Thu, 26 Oct 2023 09:59:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/inject/AreaSelector/app.module.less | 14 +++++++++++---
 src/pages/inject/AreaSelector/app.tsx         |  6 ++++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/pages/inject/AreaSelector/app.module.less b/src/pages/inject/AreaSelector/app.module.less
index cc962ae1..5c173ff7 100644
--- a/src/pages/inject/AreaSelector/app.module.less
+++ b/src/pages/inject/AreaSelector/app.module.less
@@ -15,7 +15,7 @@
   border: 2px solid @primary-color;
 }
 
-.mask {
+.maskWrapper {
   display: flex;
   box-sizing: border-box;
   align-items: center;
@@ -27,11 +27,19 @@
   font-size: 14px;
   transform: translateX(-50%);
   background-color: rgba(0, 0, 0, 0.65);
+  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.13), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 12px 24px 16px rgba(0, 0, 0, 0.04);
   z-index: @z-index-max + 1;
   border-radius: 10px;
   text-align: center;
   pointer-events: none; // 遮罩层不需要响应鼠标事件
   color: @white;
+  font-family: @font-family;
+  white-space: nowrap;
+
+  .icon {
+    margin-right: 8px;
+    font-size: @font-size-lg;
+  }
 }
 
 .confirm {
@@ -45,8 +53,7 @@
   cursor: pointer;
   display: inline-block;
   color: @white;
-  font-size: 12px;
-  font-weight: 400;
+  font-size: @font-size;
   padding: 0 8px;
   text-align: center;
   touch-action: manipulation;
@@ -56,5 +63,6 @@
   text-decoration: none;
   pointer-events: all;
   transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  font-family: @font-family;
 }
 
diff --git a/src/pages/inject/AreaSelector/app.tsx b/src/pages/inject/AreaSelector/app.tsx
index bc3dbb51..c4873382 100644
--- a/src/pages/inject/AreaSelector/app.tsx
+++ b/src/pages/inject/AreaSelector/app.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useCallback, useState } from 'react';
 import classnames from 'classnames';
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { useForceUpdate } from '@/hooks/useForceUpdate';
 import { transformDOM } from '@/core/transform-dom';
 import { __i18n } from '@/isomorphic/i18n';
@@ -127,8 +128,9 @@ function App(props: IAppProps) {
 
   return (
     <>
-      <div className={classnames(styles.mask, 'select-inner')}>
-        {__i18n('单击区域以选中，再次单击取消选中。ESC 退出， ↲ 完成')}
+      <div className={classnames(styles.maskWrapper, 'select-inner')}>
+        <InfoCircleOutlined className={styles.icon} />
+        {__i18n('单击区域选中，再次点击取消选中，ESC 退出，↩ 完成。')}
         {!!targetRectListRef.current.length && (
           <div
             className={classnames(styles.confirm, 'select-confirm')}