开发: 添加小屏幕css[少], 聊天记录投票. 客户中心修改, 工作台支持小屏

src/pages/ChatLogs/components/ChatCollect.tsx

@@ -8,7 +8,7 @@ export const ChatCollect: React.FC<IChatItem> = (props) => {
         <div>
           <div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
             <div style={{ wordBreak: 'break-all' }}>群名：{msg.room_name}</div>
-            <div style={{ wordBreak: 'break-all' }}>创建者：{msg.creator}</div>
+            <div style={{ wordBreak: 'break-all' }}>群主：{msg.creator}</div>
             <div style={{ wordBreak: 'break-all' }}>表名：{msg.title}</div>
             <div
               style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}

src/pages/ChatLogs/components/ChatVote.tsx

@@ -1,15 +1,80 @@
+import { SignalFilled } from '@ant-design/icons';
+import { Modal } from 'antd';
+import { useEffect, useState } from 'react';
 import { IChatItem } from '../ChatLogsType';
+import styles from './index.module.scss';
 
 export const ChatVote: React.FC<IChatItem> = (props) => {
-  const votetype: any = { 101: '发起投票', 102: '参与投票' };
+  const votetype: any = { '101': '发起投票', '102': '参与投票' };
+  const [open, setOpen] = useState(false);
+  const [voteitem, setVoteitem] = useState([]);
+
+  useEffect(() => {
+    try {
+      const msg = JSON.parse(props.chat?.content as string);
+      setVoteitem(msg?.voteitem);
+    } catch (e) {}
+  }, [props.chat]);
 
   function content() {
+    try {
+      const msg = JSON.parse(props.chat?.content as string);
+
+      return (
+        <>
+          <div
+            style={{ display: 'flex', color: '#000', flexDirection: 'column', cursor: 'pointer' }}
+            onClick={() => setOpen(true)}
+          >
+            <div style={{ wordBreak: 'break-all', fontWeight: 'bold' }}>{msg?.votetitle}</div>
+            <div style={{ wordBreak: 'break-all' }}>
+              {Array.isArray(msg?.voteitem)
+                ? [0, 1, 2].map((item) => {
+                    return msg?.voteitem[item] ? (
+                      <div className={styles.voteitem}>{msg?.voteitem[item]}</div>
+                    ) : (
+                      <></>
+                    );
+                  })
+                : null}
+            </div>
+            <div
+              style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}
+            >
+              <SignalFilled style={{ color: '#F0B40E' }} /> 投票 [
+              {votetype[msg?.votetype as string]}]
+            </div>
+          </div>
+          <Modal
+            open={open}
+            title={msg?.votetitle}
+            centered
+            onCancel={() => {
+              setOpen(false);
+            }}
+            footer={false}
+          >
+            <div style={{ maxHeight: '75vh', overflow: 'auto' }}>
+              {Array.isArray(voteitem)
+                ? voteitem.map((item) => {
+                    return (
+                      <div key={item} className={styles.voteitem}>
+                        {item}
+                      </div>
+                    );
+                  })
+                : null}
+            </div>
+          </Modal>
+        </>
+      );
+    } catch (e) {}
+
     return (
       <div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
-        <div style={{ wordBreak: 'break-all' }}>{props.chat?.votetitle}</div>
-        <div style={{ wordBreak: 'break-all' }}>{props.chat?.voteitem}</div>
+        <div style={{ wordBreak: 'break-all' }}>{props.chat?.content}</div>
         <div style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}>
-          投票 [{votetype[props.chat?.votetype as string]}]
+          <SignalFilled style={{ color: '#F0B40E' }} /> 投票
         </div>
       </div>
     );

src/pages/ChatLogs/components/EmojiFormat.tsx

@@ -7,13 +7,16 @@ type IProps = {
 export const EmojiFormat: React.FC<IProps> = (props) => {
   const format = () => {
     let txt = props.content;
-    emoji.forEach((item) => {
-      const reg = new RegExp(`\\[${item}\\]`, 'g');
-      txt = txt.replace(
-        reg,
-        `<img style="width: 24px;height:24px" src="/api/assets/wechat/emoji/${item}.png" alt="" />`,
-      );
-    });
+    if (txt.includes('[') && txt.includes(']')) {
+      emoji.forEach((item) => {
+        const reg = new RegExp(`\\[${item}\\]`, 'g');
+        txt = txt.replace(
+          reg,
+          `<img style="width: 24px;height:24px" src="/api/assets/wechat/emoji/${item}.png" alt="" />`,
+        );
+      });
+    }
+
     return txt;
   };
 

src/pages/ChatLogs/components/Svgs.tsx

@@ -1,7 +1,7 @@
 export const OwnerSvg = () => {
   return (
     <span
-      title="创建者"
+      title="群主"
       style={{
         display: 'inline-flex',
         alignItems: 'center',

src/pages/ChatLogs/components/index.module.scss

@@ -42,6 +42,7 @@
   justify-content: center;
   min-height: 40px;
   padding: 12px;
+  white-space: pre-wrap;
   word-break: break-all;
   background-color: #fff;
   border-radius: 4px;
@@ -153,3 +154,20 @@
   background-color: #8c8c8c;
   border-radius: 40px;
 }
+
+.voteitem {
+  position: relative;
+  padding-left: 16px;
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border: 2px solid #ccc;
+    border-radius: 8px;
+    transform: translateY(-50%);
+    content: '';
+  }
+}