chore(plugin-notification-in-app-message): improve UI and add logs (#5550)

* chore: add some log to plugin-notification-in-app-message

* refactor: improve unread message count display

packages/plugins/@nocobase/plugin-notification-in-app-message/src/client/components/ContentConfigForm.tsx

@@ -59,7 +59,7 @@ export const ContentConfigForm = ({ variableOptions }) => {
                   useTypedConstant: ['string'],
                 },
                 description: tval(
-                  "Support two types of links in nocobase: internal links and external links. If using an internal link, the link starts with '/', for example, '/admin/page'. If using an external link, the link starts with 'http', for example, 'https://example.com'.",
+                  'Support two types of links: internal links and external links. If using an internal link, the link starts with"/", for example, "/admin". If using an external link, the link starts with "http", for example, "https://example.com".',
                 ),
               },
             },

packages/plugins/@nocobase/plugin-notification-in-app-message/src/client/components/Inbox.tsx

@@ -16,7 +16,7 @@
  * For more information, please rwefer to: https://www.nocobase.com/agreement.
  */
 
-import React, { useEffect, useCallback, useContext } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { Badge, Button, ConfigProvider, Drawer, Tooltip } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
 import { createStyles } from 'antd-style';
@@ -76,9 +76,15 @@ const InnerInbox = (props) => {
       }}
     >
       <Tooltip title={t('Message')}>
-        <Button className={styles.button} title={'Apps'} icon={<Icon type={'MailOutlined'} />} onClick={onIconClick} />
+        <Badge count={unreadMsgsCountObs.value} size="small" offset={[-12, 14]}>
+          <Button
+            className={styles.button}
+            title={'Apps'}
+            icon={<Icon type={'MailOutlined'} />}
+            onClick={onIconClick}
+          />
+        </Badge>
       </Tooltip>
-      {unreadMsgsCountObs.value && <Badge count={unreadMsgsCountObs.value} size="small" offset={[-18, -16]}></Badge>}
       <Drawer
         title={DrawerTitle}
         open={inboxVisible.value}

packages/plugins/@nocobase/plugin-notification-in-app-message/src/client/components/MessageConfigForm.tsx

@@ -108,7 +108,7 @@ export const MessageConfigForm = ({ variableOptions }) => {
                   useTypedConstant: ['string'],
                 },
                 description: tval(
-                  "Support two types of links in nocobase: internal links and external links. If using an internal link, the link starts with '/', for example, '/admin/page'. If using an external link, the link starts with 'http', for example, 'https://example.com'.",
+                  'Support two types of links: internal links and external links. If using an internal link, the link starts with"/", for example, "/admin". If using an external link, the link starts with "http", for example, "https://example.com".',
                 ),
               },
             },

packages/plugins/@nocobase/plugin-notification-in-app-message/src/locale/en-US.json

@@ -17,6 +17,6 @@
   "Message content": "Message content",
   "Inapp Message": "Inapp Message",
   "Detail URL": "Detail URL",
-  "Support two types of links in nocobase: internal links and external links. If using an internal link, the link starts with '/', for example, '/admin/page'. If using an external link, the link starts with 'http', for example, 'https://example.com'.": "Support two types of links in nocobase: internal links and external links. If using an internal link, the link starts with '/', for example, '/admin/page'. If using an external link, the link starts with 'http', for example, 'https://example.com'.",
+  "Support two types of links: internal links and external links. If using an internal link, the link starts with\"/\", for example, \"/admin\". If using an external link, the link starts with \"http\", for example, \"https://example.com\".": "Support two types of links: internal links and external links. If using an internal link, the link starts with \"/\", for example, \"/admin\". If using an external link, the link starts with \"http\", for example, \"https://example.com\".",
   "Mark as read": "Mark as read"
 }

packages/plugins/@nocobase/plugin-notification-in-app-message/src/locale/zh-CN.json

@@ -16,6 +16,6 @@
   "Message content": "消息内容",
   "Inapp Message": "站内信",
   "Detail URL": "详情链接",
-  "Support two types of links in nocobase: internal links and external links. If using an internal link, the link starts with '/', for example, '/admin/page'. If using an external link, the link starts with 'http', for example, 'https://example.com'.": "nocobase支持两种链接类型：内部链接和外部链接。如果使用内部链接，链接以'/'开头，例如，'/admin/page'。如果使用外部链接，链接以'http'开头，例如，'https://example.com'。",
+  "Support two types of links: internal links and external links. If using an internal link, the link starts with\"/\", for example, \"/admin\". If using an external link, the link starts with \"http\", for example, \"https://example.com\".": "支持两种链接类型：内部链接和外部链接。如果使用内部链接，链接以“/”开头，例如“/admin”。如果使用外部链接，链接以“http”开头，例如“https://example.com”。",
   "Mark as read": "标记为已读"
 }