From 51be5700d8b3aa3693ba669b57d77eb7be9d0911 Mon Sep 17 00:00:00 2001 From: Ghost <106998207@qq.com> Date: Mon, 12 Jan 2026 09:41:42 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=A5=E7=BE=A4=E6=AC=A2=E8=BF=8E=E8=AF=AD?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/GroupSelection/index.tsx | 11 +- .../group-welcome/detail/index.module.scss | 125 +++ .../workspace/group-welcome/detail/index.tsx | 245 +++++ .../form/components/BasicSettings.tsx | 175 ++++ .../form/components/GroupSelector.tsx | 89 ++ .../form/components/MessageConfig.module.scss | 127 +++ .../form/components/MessageConfig.tsx | 865 ++++++++++++++++++ .../form/components/RobotSelector.tsx | 89 ++ .../workspace/group-welcome/form/index.api.ts | 16 + .../group-welcome/form/index.data.ts | 27 + .../workspace/group-welcome/form/index.tsx | 366 ++++++++ .../workspace/group-welcome/list/index.api.ts | 27 + .../group-welcome/list/index.module.scss | 154 ++++ .../workspace/group-welcome/list/index.tsx | 280 ++++++ src/router/config.ts | 4 + src/router/module/workspace.tsx | 24 + 16 files changed, 2621 insertions(+), 3 deletions(-) create mode 100644 src/pages/mobile/workspace/group-welcome/detail/index.module.scss create mode 100644 src/pages/mobile/workspace/group-welcome/detail/index.tsx create mode 100644 src/pages/mobile/workspace/group-welcome/form/components/BasicSettings.tsx create mode 100644 src/pages/mobile/workspace/group-welcome/form/components/GroupSelector.tsx create mode 100644 src/pages/mobile/workspace/group-welcome/form/components/MessageConfig.module.scss create mode 100644 src/pages/mobile/workspace/group-welcome/form/components/MessageConfig.tsx create mode 100644 src/pages/mobile/workspace/group-welcome/form/components/RobotSelector.tsx create mode 100644 src/pages/mobile/workspace/group-welcome/form/index.api.ts create mode 100644 src/pages/mobile/workspace/group-welcome/form/index.data.ts create mode 100644 src/pages/mobile/workspace/group-welcome/form/index.tsx create mode 100644 src/pages/mobile/workspace/group-welcome/list/index.api.ts create mode 100644 src/pages/mobile/workspace/group-welcome/list/index.module.scss create mode 100644 src/pages/mobile/workspace/group-welcome/list/index.tsx diff --git a/src/components/GroupSelection/index.tsx b/src/components/GroupSelection/index.tsx index fe18005..e698a79 100644 --- a/src/components/GroupSelection/index.tsx +++ b/src/components/GroupSelection/index.tsx @@ -82,10 +82,15 @@ export default function GroupSelection({ {selectedOptions.map(group => (
- +
-
{group.name}
-
{group.chatroomId}
+
{group.groupName || group.name}
+ {group.nickName && ( +
归属：{group.nickName}
+ )} + {!group.nickName && group.chatroomId && ( +
{group.chatroomId}
+ )}
{!readonly && ( + } + /> + } + > +
+ +
+

{taskData.name}

+ +
+ + + {taskData.name} + + + + + {config.interval || 0} 分钟 + + + {taskData.createTime || "暂无"} + + {taskData.updateTime && ( + + {taskData.updateTime} + + )} + + + + 目标群组}> +
+ {config.wechatGroupsOptions && config.wechatGroupsOptions.length > 0 ? ( + config.wechatGroupsOptions.map((group: any) => ( +
+ {group.groupAvatar && ( + {group.groupName + )} +
+
{group.groupName || `群组 ${group.id}`}
+ {group.nickName && ( +
归属：{group.nickName}
+ )} +
+
+ )) + ) : ( +
+ 已选择 {config.wechatGroups?.length || 0} 个群组 +
+ )} +
+ + + 机器人}> +
+ {config.deviceGroupsOptions && config.deviceGroupsOptions.length > 0 ? ( + config.deviceGroupsOptions.map((robot: any) => ( + + {robot.memo || robot.wechatId || robot.nickname || `设备 ${robot.id}`} + + )) + ) : ( +
+ 已选择 {config.deviceGroups?.length || 0} 个机器人 +
+ )} +
+ + + 欢迎消息}> +
+ {config.messages && config.messages.length > 0 ? ( + config.messages.map((message: any, index: number) => ( +
+
+ 消息 {message.order || index + 1} + {getMessageTypeText(message.type)} +
+
+ {message.type === "text" ? ( +
/g, ">") + .replace(/\n/g, "
") + .replace(/@\{好友\}/g, '@好友') + }} + /> + ) : message.type === "image" ? ( + 图片 + ) : message.type === "video" ? ( +
+
+ )) + ) : ( +
+ 暂无欢迎消息 +
+ )} +
+ +
+ + ); +}; + +export default GroupWelcomeDetail; diff --git a/src/pages/mobile/workspace/group-welcome/form/components/BasicSettings.tsx b/src/pages/mobile/workspace/group-welcome/form/components/BasicSettings.tsx new file mode 100644 index 0000000..6b4c00b --- /dev/null +++ b/src/pages/mobile/workspace/group-welcome/form/components/BasicSettings.tsx @@ -0,0 +1,175 @@ +import React, { + useImperativeHandle, + forwardRef, + useState, + useEffect, +} from "react"; +import { Input, Form, Card, Switch, InputNumber, Radio } from "antd"; + +interface BasicSettingsProps { + defaultValues?: { + name: string; + status: number; // 0: 否, 1: 是 + interval: number; // 时间间隔（分钟） + pushType?: number; // 0: 定时推送, 1: 立即推送 + startTime?: string; // 允许推送的开始时间 + endTime?: string; // 允许推送的结束时间 + }; + onNext: (values: any) => void; + loading?: boolean; +} + +export interface BasicSettingsRef { + validate: () => Promise; + getValues: () => any; +} + +const BasicSettings = forwardRef( + ( + { + defaultValues = { + name: "", + status: 1, // 默认开启 + interval: 1, // 默认1分钟 + pushType: 0, // 默认定时推送 + startTime: "09:00", // 默认开始时间 + endTime: "21:00", // 默认结束时间 + }, + }, + ref, + ) => { + const [form] = Form.useForm(); + + useEffect(() => { + if (defaultValues) { + form.setFieldsValue(defaultValues); + } + }, [defaultValues, form]); + + useImperativeHandle(ref, () => ({ + validate: async () => { + try { + await form.validateFields(); + return true; + } catch (error) { + console.log("BasicSettings 表单验证失败:", error); + return false; + } + }, + getValues: () => { + return form.getFieldsValue(); + }, + })); + + return ( + +
+
+

+ 基础设置 +

+

+ 配置任务的基本信息 +

+
+ + + + + + + + 定时推送 + 立即推送 + + + + {/* 允许推送的时间段 - 只在定时推送时显示 */} + + prevValues.pushType !== currentValues.pushType + } + > + {({ getFieldValue }) => { + // 只在pushType为0（定时推送）时显示时间段设置 + return getFieldValue("pushType") === 0 ? ( + +
+ + + + 至 + + + +
+ + ) : null; + }} + + + + + + + + + (checked ? 1 : 0)} + getValueProps={(value) => ({ checked: value === 1 })} + > + + +
+ + ); + }, +); + +BasicSettings.displayName = "BasicSettings"; + +export default BasicSettings; diff --git a/src/pages/mobile/workspace/group-welcome/form/components/GroupSelector.tsx b/src/pages/mobile/workspace/group-welcome/form/components/GroupSelector.tsx new file mode 100644 index 0000000..1e335ac --- /dev/null +++ b/src/pages/mobile/workspace/group-welcome/form/components/GroupSelector.tsx @@ -0,0 +1,89 @@ +import React, { useImperativeHandle, forwardRef } from "react"; +import { Form, Card } from "antd"; +import GroupSelection from "@/components/GroupSelection"; +import { GroupSelectionItem } from "@/components/GroupSelection/data"; + +interface GroupSelectorProps { + selectedGroups: GroupSelectionItem[]; + onPrevious: () => void; + onNext: (data: { + groups: string[]; + groupsOptions: GroupSelectionItem[]; + }) => void; +} + +export interface GroupSelectorRef { + validate: () => Promise; + getValues: () => any; +} + +const GroupSelector = forwardRef( + ({ selectedGroups, onNext }, ref) => { + const [form] = Form.useForm(); + + useImperativeHandle(ref, () => ({ + validate: async () => { + try { + form.setFieldsValue({ + groups: selectedGroups.map(item => String(item.id)), + }); + await form.validateFields(["groups"]); + return true; + } catch (error) { + console.log("GroupSelector 表单验证失败:", error); + return false; + } + }, + getValues: () => { + return form.getFieldsValue(); + }, + })); + + const handleGroupSelect = (groupsOptions: GroupSelectionItem[]) => { + const groups = groupsOptions.map(item => String(item.id)); + form.setFieldValue("groups", groups); + onNext({ groups, groupsOptions }); + }; + + return ( + +
+
+

+ 选择群组 +

+

+ 请选择需要设置欢迎语的群组（可多选） +

+
+ + + + +
+ + ); + }, +); + +GroupSelector.displayName = "GroupSelector"; + +export default GroupSelector; diff --git a/src/pages/mobile/workspace/group-welcome/form/components/MessageConfig.module.scss b/src/pages/mobile/workspace/group-welcome/form/components/MessageConfig.module.scss new file mode 100644 index 0000000..9757a83 --- /dev/null +++ b/src/pages/mobile/workspace/group-welcome/form/components/MessageConfig.module.scss @@ -0,0 +1,127 @@ +.messageList { + display: flex; + flex-direction: column; + gap: 16px; +} + +.messageCard { + background: #fff; + border-radius: 12px; + box-shadow: + 0 4px 16px rgba(22, 119, 255, 0.06), + 0 1.5px 4px rgba(0, 0, 0, 0.04); + padding: 20px 12px 16px 12px; + border: 1.5px solid #f0f3fa; + transition: + box-shadow 0.2s, + border 0.2s, + transform 0.2s; + position: relative; + + &:hover { + box-shadow: + 0 8px 24px rgba(22, 119, 255, 0.12), + 0 2px 8px rgba(0, 0, 0, 0.08); + border: 1.5px solid #1677ff; + transform: translateY(-2px) scale(1.01); + } +} + +.messageHeader { + margin-bottom: 12px; +} + +.messageHeaderContent { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 8px; +} + +.messageTypeBtns { + display: flex; + gap: 5px; + margin-bottom: 8px; +} + +.messageTypeBtn { + width: 32px; + height: 32px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.messageContent { + margin-top: 12px; +} + +.removeBtn { + color: #ff4d4f; + background: none; + border: none; + cursor: pointer; + font-size: 16px; + padding: 0 8px; + transition: color 0.2s; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + color: #d9363e; + } +} + +.addMessageButtons { + margin-top: 16px; + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.addMessageBtn { + flex: 1; + min-width: 120px; +} + +.richTextInput { + white-space: pre-wrap; // 保留换行和空格 + word-wrap: break-word; // 允许长单词换行 + + &:focus { + border-color: #1677ff; + box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1); + } + + &:empty:before { + content: attr(data-placeholder); + color: #bfbfbf; + } + + // @好友样式 + :global(.mention-friend) { + color: #1677ff !important; + font-weight: 600 !important; + background: #e6f7ff !important; + padding: 2px 4px !important; + border-radius: 3px !important; + display: inline !important; + } +} + +@media (max-width: 600px) { + .addMessageButtons { + flex-direction: column; + + .addMessageBtn { + width: 100%; + min-width: auto; + } + } + + .messageTypeBtns { + flex-wrap: wrap; + } +} diff --git a/src/pages/mobile/workspace/group-welcome/form/components/MessageConfig.tsx b/src/pages/mobile/workspace/group-welcome/form/components/MessageConfig.tsx new file mode 100644 index 0000000..ab7d5f6 --- /dev/null +++ b/src/pages/mobile/workspace/group-welcome/form/components/MessageConfig.tsx @@ -0,0 +1,865 @@ +import React, { useImperativeHandle, forwardRef, useState, useRef, useEffect } from "react"; +import { Form, Card, Button, Input } from "antd"; +import { PlusOutlined, CloseOutlined, ClockCircleOutlined, UserAddOutlined } from "@ant-design/icons"; +import { + MessageOutlined, + PictureOutlined, + VideoCameraOutlined, + FileOutlined, +} from "@ant-design/icons"; +import { WelcomeMessage } from "../index.data"; +import ImageUpload from "@/components/Upload/ImageUpload/ImageUpload"; +import VideoUpload from "@/components/Upload/VideoUpload"; +import FileUpload from "@/components/Upload/FileUpload"; +import styles from "./MessageConfig.module.scss"; + +const { TextArea } = Input; + +// 富文本编辑器组件 +interface RichTextEditorProps { + value: string; + onChange: (text: string) => void; + placeholder?: string; + maxLength?: number; + onInsertMention?: React.MutableRefObject<{ insertMention: () => void } | null>; // 插入@好友的ref +} + +const RichTextEditor: React.FC = ({ + value, + onChange, + placeholder = "", + maxLength = 500, + onInsertMention, +}) => { + const editorRef = useRef(null); + const isComposingRef = useRef(false); + + // 暴露插入@好友的方法 + useEffect(() => { + if (onInsertMention && editorRef.current) { + onInsertMention.current = { + insertMention: () => { + if (!editorRef.current) return; + + // 获取当前文本（包含换行符） + const currentText = getText(editorRef.current.innerHTML); + + // 检查是否已经存在@好友，如果存在则不允许再插入 + if (currentText.includes('@{好友}')) { + // 已经存在@好友，不允许再插入 + return; + } + + // 先保存当前光标位置 + const saved = saveSelection(); + const mentionPlaceholder = "@{好友}"; + + // 根据光标位置插入@好友 + let newContent: string; + if (!saved) { + // 如果没有光标位置，插入到末尾 + if (!currentText) { + newContent = mentionPlaceholder; + } else if (currentText.endsWith("\n") || currentText.endsWith(" ")) { + newContent = currentText + mentionPlaceholder; + } else { + newContent = currentText + " " + mentionPlaceholder; + } + } else { + // 在光标位置插入@好友 + const cursorPos = saved.startOffset; + const beforeText = currentText.substring(0, cursorPos); + const afterText = currentText.substring(cursorPos); + + // 判断光标前是否需要添加空格 + const needsSpace = beforeText.length > 0 + && !beforeText.endsWith(" ") + && !beforeText.endsWith("\n") + && afterText.length > 0 + && !afterText.startsWith(" "); + + if (needsSpace) { + newContent = beforeText + " " + mentionPlaceholder + afterText; + } else { + newContent = beforeText + mentionPlaceholder + afterText; + } + } + + // 直接更新编辑器内容 + const formatted = formatContent(newContent); + editorRef.current.innerHTML = formatted; + + // 恢复光标位置到插入的@好友后面 + // 使用双重 requestAnimationFrame 确保 DOM 完全更新 + requestAnimationFrame(() => { + requestAnimationFrame(() => { + if (editorRef.current) { + const selection = window.getSelection(); + if (!selection) return; + + // 计算新插入的@好友在文本中的位置 + let newCursorPos: number; + if (!saved) { + // 如果没有保存的光标位置，放在末尾 + newCursorPos = newContent.length; + } else { + // 计算插入@好友后的光标位置 + const cursorPos = saved.startOffset; + const beforeText = currentText.substring(0, cursorPos); + const needsSpace = beforeText.length > 0 + && !beforeText.endsWith(" ") + && !beforeText.endsWith("\n") + && currentText.substring(cursorPos).length > 0 + && !currentText.substring(cursorPos).startsWith(" "); + + // @好友的位置 = 原光标位置 + (如果需要空格则+1) + const mentionPos = cursorPos + (needsSpace ? 1 : 0); + // 光标位置 = @好友位置 + @好友长度 + newCursorPos = mentionPos + mentionPlaceholder.length; + } + + // 使用文本位置恢复光标 + restoreSelection({ startOffset: newCursorPos, endOffset: newCursorPos }); + + // 确保编辑器获得焦点 + editorRef.current.focus(); + } + }); + }); + + // 更新value + onChange(newContent); + } + }; + } + }, [onInsertMention, onChange]); + + // 格式化内容，只将系统插入的@{好友}高亮，手动输入的@好友不高亮 + const formatContent = (text: string) => { + if (!text) return ""; + // 先转义HTML，但保留@{好友}格式用于替换 + // 将@{好友}替换为特殊标记，避免被转义 + const parts = text.split(/(@\{好友\})/g); + return parts.map((part, index) => { + if (part === '@{好友}') { + // 在span后面添加零宽空格，确保可以继续输入 + return '@好友\u200B'; + } + // 转义其他部分，保留换行符 + return part + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/\n/g, "
"); // 保留换行符 + }).join(''); + }; + + // 提取纯文本（将高亮的@好友还原为@{好友}格式） + const getText = (html: string) => { + // 先处理HTML中的mention-friend元素 + const tempDiv = document.createElement("div"); + tempDiv.innerHTML = html; + + // 将所有的mention-friend元素替换为@{好友}格式 + const mentions = tempDiv.querySelectorAll('.mention-friend'); + mentions.forEach((mention) => { + const replacement = document.createTextNode('@{好友}'); + mention.parentNode?.replaceChild(replacement, mention); + }); + + // 将块级元素转换为换行符：在块级元素前后添加换行 + const blockElements = Array.from(tempDiv.querySelectorAll('div, p, h1, h2, h3, h4, h5, h6')); + blockElements.forEach((block) => { + // 在块级元素前添加换行符 + if (block.previousSibling) { + const textNode = document.createTextNode('\n'); + block.parentNode?.insertBefore(textNode, block); + } + // 在块级元素后添加换行符 + if (block.nextSibling) { + const textNode = document.createTextNode('\n'); + block.parentNode?.insertBefore(textNode, block.nextSibling); + } + }); + + // 手动遍历所有节点，提取文本和
标签 + const walker = document.createTreeWalker( + tempDiv, + NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, + null + ); + + const textParts: string[] = []; + let node: Node | null; + + while ((node = walker.nextNode())) { + if (node.nodeType === Node.TEXT_NODE) { + const text = node.textContent || ''; + if (text) { + textParts.push(text); + } + } else if (node.nodeName === 'BR') { + textParts.push('\n'); + } + } + + // 如果没有找到任何内容，使用 textContent 作为后备 + let text = textParts.length > 0 + ? textParts.join('') + : (tempDiv.textContent || ""); + + // 移除零宽空格 + text = text.replace(/\u200B/g, ''); + + return text; + }; + + // 保存和恢复光标位置 + const saveSelection = () => { + if (!editorRef.current) return null; + const selection = window.getSelection(); + if (!selection || selection.rangeCount === 0) return null; + + const range = selection.getRangeAt(0); + // 检查range是否在editor内部 + if (!editorRef.current.contains(range.commonAncestorContainer)) { + return null; + } + + // 获取当前文本内容（包含换行符） + const currentText = getText(editorRef.current.innerHTML); + + // 创建一个临时范围来计算光标前的文本长度 + const preCaretRange = range.cloneRange(); + preCaretRange.selectNodeContents(editorRef.current); + preCaretRange.setEnd(range.endContainer, range.endOffset); + + // 使用getText函数获取文本（包含换行符），然后计算长度 + // 创建一个临时div来保存当前HTML + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = editorRef.current.innerHTML; + + // 克隆光标前的内容 + const clonedRange = preCaretRange.cloneContents(); + const beforeDiv = document.createElement('div'); + beforeDiv.appendChild(clonedRange); + + // 获取光标前的文本（包含换行符） + // 需要处理.mention-friend元素，将其转换为@{好友} + const beforeText = getText(beforeDiv.innerHTML); + const startOffset = beforeText.length; + + return { + startOffset, + endOffset: startOffset + (range.toString().length), + currentText, // 保存当前文本，用于后续计算 + }; + }; + + const restoreSelection = (saved: { startOffset: number; endOffset: number } | null) => { + if (!saved || !editorRef.current) return; + + try { + const selection = window.getSelection(); + if (!selection) return; + + // 获取当前文本内容（包含换行符） + const currentText = getText(editorRef.current.innerHTML); + const targetOffset = Math.min(saved.startOffset, currentText.length); + + const range = document.createRange(); + let charCount = 0; + let found = false; + + // 遍历所有节点，包括文本节点、
元素和.mention-friend元素 + const walker = document.createTreeWalker( + editorRef.current, + NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, + null + ); + + let node: Node | null; + while ((node = walker.nextNode()) && !found) { + if (node.nodeType === Node.TEXT_NODE) { + // 跳过零宽空格 + const text = node.textContent || ''; + const nodeLength = text.replace(/\u200B/g, '').length; + if (charCount + nodeLength >= targetOffset) { + const offset = targetOffset - charCount; + // 计算实际偏移量（考虑零宽空格） + let actualOffset = 0; + let charIndex = 0; + for (let i = 0; i < text.length; i++) { + if (text[i] !== '\u200B') { + if (charIndex >= offset) break; + charIndex++; + } + actualOffset++; + } + range.setStart(node, Math.max(0, Math.min(actualOffset, text.length))); + range.setEnd(node, Math.max(0, Math.min(actualOffset, text.length))); + found = true; + } + charCount += nodeLength; + } else if (node.nodeName === 'BR') { + if (charCount >= targetOffset) { + // 光标应该在
之前 + range.setStartBefore(node); + range.setEndBefore(node); + found = true; + } else if (charCount + 1 >= targetOffset) { + // 光标应该在
之后 + range.setStartAfter(node); + range.setEndAfter(node); + found = true; + } + charCount += 1; + } else if (node.nodeType === Node.ELEMENT_NODE) { + // 处理.mention-friend元素，它代表@{好友}，长度为4 + const element = node as Element; + if (element.classList.contains('mention-friend')) { + const mentionLength = 4; // @{好友}的长度 + if (charCount + mentionLength >= targetOffset) { + // 光标应该在mention-friend之后（零宽空格后面） + // 查找或创建零宽空格 + let zwspNode: Node | null = null; + const nextSibling = node.nextSibling; + + if (nextSibling && nextSibling.nodeType === Node.TEXT_NODE && nextSibling.textContent === '\u200B') { + zwspNode = nextSibling; + } else { + // 如果没有零宽空格，创建一个 + zwspNode = document.createTextNode('\u200B'); + node.parentNode?.insertBefore(zwspNode, nextSibling); + } + + // 将光标放在零宽空格后面 + if (zwspNode) { + range.setStartAfter(zwspNode); + range.setEndAfter(zwspNode); + } else { + range.setStartAfter(node); + range.setEndAfter(node); + } + found = true; + } + charCount += mentionLength; + } + } + } + + if (found) { + selection.removeAllRanges(); + selection.addRange(range); + } else { + // 如果没找到，放在末尾 + const range = document.createRange(); + range.selectNodeContents(editorRef.current); + range.collapse(false); + selection.removeAllRanges(); + selection.addRange(range); + } + } catch (err) { + // 如果恢复失败，将光标放在末尾 + try { + const selection = window.getSelection(); + if (selection && editorRef.current) { + const range = document.createRange(); + range.selectNodeContents(editorRef.current); + range.collapse(false); + selection.removeAllRanges(); + selection.addRange(range); + } + } catch (e) { + // 忽略错误 + } + } + }; + + // 更新内容（只在外部value变化时更新，不干扰用户输入） + useEffect(() => { + if (!editorRef.current || isComposingRef.current) return; + const currentText = getText(editorRef.current.innerHTML); + // 只在外部value变化且与当前内容不同时更新 + if (currentText !== value) { + const saved = saveSelection(); + const formatted = formatContent(value) || ""; + if (editorRef.current.innerHTML !== formatted) { + editorRef.current.innerHTML = formatted; + // 延迟恢复光标，确保DOM已更新 + setTimeout(() => { + restoreSelection(saved); + }, 0); + } + } + }, [value]); + + const handleInput = (e: React.FormEvent) => { + if (isComposingRef.current) return; + + const text = getText(e.currentTarget.innerHTML); + if (text.length <= maxLength) { + // 先更新文本内容 + onChange(text); + + // 不在输入时立即格式化，只在失去焦点时格式化 + // 这样可以避免干扰用户输入 + } else { + // 超出长度，恢复之前的内容 + const saved = saveSelection(); + e.currentTarget.innerHTML = formatContent(value); + requestAnimationFrame(() => { + restoreSelection(saved); + }); + } + }; + + return ( + <> +
{ + isComposingRef.current = true; + }} + onCompositionEnd={(e) => { + isComposingRef.current = false; + handleInput(e); + }} + onBlur={(e) => { + const text = getText(e.currentTarget.innerHTML); + onChange(text); + // 失去焦点时格式化，确保@好友高亮显示 + if (text.includes('@{好友}')) { + const formatted = formatContent(text); + if (e.currentTarget.innerHTML !== formatted) { + e.currentTarget.innerHTML = formatted; + } + } + }} + data-placeholder={placeholder} + style={{ + minHeight: "80px", + maxHeight: "200px", + padding: "8px 12px", + border: "1px solid #d9d9d9", + borderRadius: "6px", + fontSize: "14px", + lineHeight: "1.5", + outline: "none", + overflowY: "auto", + whiteSpace: "pre-wrap", + wordBreak: "break-word", + backgroundColor: "#fff", + }} + className={styles.richTextInput} + /> +
+ {value.length}/{maxLength} +
+ + ); +}; + +// 消息类型配置 +const messageTypes = [ + { id: "text", icon: MessageOutlined, label: "文本" }, + { id: "image", icon: PictureOutlined, label: "图片" }, + { id: "video", icon: VideoCameraOutlined, label: "视频" }, + { id: "file", icon: FileOutlined, label: "文件" }, +]; + +interface MessageConfigProps { + defaultMessages?: WelcomeMessage[]; + onPrevious: () => void; + onNext: (data: { messages: WelcomeMessage[] }) => void; +} + +export interface MessageConfigRef { + validate: () => Promise; + getValues: () => any; +} + +const MessageConfig = forwardRef( + ({ defaultMessages = [], onNext }, ref) => { + const [form] = Form.useForm(); + const [messages, setMessages] = useState( + defaultMessages.length > 0 + ? defaultMessages + : [ + { + id: Date.now().toString(), + type: "text", + content: "", + order: 1, + sendInterval: 5, + intervalUnit: "seconds", + }, + ], + ); + + useImperativeHandle(ref, () => ({ + validate: async () => { + try { + // 验证至少有一条消息 + if (messages.length === 0) { + form.setFields([ + { + name: "messages", + errors: ["请至少配置一条欢迎消息"], + }, + ]); + return false; + } + + // 验证每条消息都有内容 + for (const msg of messages) { + if (!msg.content) { + form.setFields([ + { + name: "messages", + errors: ["请填写所有消息的内容，消息内容不能为空"], + }, + ]); + return false; + } + // 移除@{好友}格式标记和空白字符后检查是否有实际内容 + const contentWithoutMention = msg.content + .replace(/@\{好友\}/g, "") + .replace(/\s+/g, " ") + .trim(); + if (contentWithoutMention === "") { + form.setFields([ + { + name: "messages", + errors: ["请填写所有消息的内容，消息内容不能为空"], + }, + ]); + return false; + } + } + + form.setFieldsValue({ messages }); + await form.validateFields(["messages"]); + return true; + } catch (error) { + console.log("MessageConfig 表单验证失败:", error); + return false; + } + }, + getValues: () => { + return { messages }; + }, + })); + + // 添加消息 + const handleAddMessage = (type: WelcomeMessage["type"] = "text") => { + const newMessage: WelcomeMessage = { + id: Date.now().toString(), + type, + content: "", + order: messages.length + 1, + sendInterval: 5, + intervalUnit: "seconds", + }; + setMessages([...messages, newMessage]); + }; + + // 删除消息 + const handleRemoveMessage = (id: string) => { + const newMessages = messages + .filter(msg => msg.id !== id) + .map((msg, index) => ({ ...msg, order: index + 1 })); + setMessages(newMessages); + }; + + // 更新消息 + const handleUpdateMessage = (id: string, updates: Partial) => { + setMessages( + messages.map(msg => (msg.id === id ? { ...msg, ...updates } : msg)), + ); + }; + + // 切换时间单位 + const toggleIntervalUnit = (id: string) => { + const message = messages.find(msg => msg.id === id); + if (!message) return; + const newUnit = message.intervalUnit === "minutes" ? "seconds" : "minutes"; + handleUpdateMessage(id, { intervalUnit: newUnit }); + }; + + // 存储每个消息的编辑器ref + const editorRefs = useRef void } | null>>>({}); + + // 插入@好友占位符（使用特殊格式，只有系统插入的才会高亮） + const handleInsertFriendMention = (messageId: string) => { + const editorRef = editorRefs.current[messageId]; + if (editorRef?.current) { + editorRef.current.insertMention(); + } + }; + + // 将纯文本转换为带样式的HTML（用于富文本显示） + const formatContentWithMentions = (content: string) => { + if (!content) return ""; + // 转义HTML特殊字符 + const escaped = content + .replace(/&/g, "&") + .replace(//g, ">"); + // 只将@{好友}格式替换为带样式的span，手动输入的@好友不会被高亮 + return escaped.replace( + /@\{好友\}/g, + '@好友' + ); + }; + + // 从富文本中提取纯文本 + const extractTextFromHtml = (html: string) => { + const div = document.createElement("div"); + div.innerHTML = html; + return div.textContent || div.innerText || ""; + }; + + return ( + +
+
+

+ 配置欢迎消息 +

+

+ 配置多条欢迎消息，新成员入群时将按顺序发送 +

+
+ + { + if (messages.length === 0) { + return Promise.reject("请至少配置一条欢迎消息"); + } + const hasEmptyContent = messages.some((msg) => { + if (!msg.content) return true; + // 移除@{好友}格式标记和空白字符后检查是否有实际内容 + const contentWithoutMention = msg.content + .replace(/@\{好友\}/g, "") + .replace(/\s+/g, " ") + .trim(); + return contentWithoutMention === ""; + }); + if (hasEmptyContent) { + return Promise.reject("请填写所有消息的内容，消息内容不能为空"); + } + return Promise.resolve(); + }, + }, + ]} + > +
+ {messages.map((message, index) => ( +
+
+ {/* 时间间隔设置 */} +
+
+ 间隔 + + handleUpdateMessage(message.id, { + sendInterval: Number(e.target.value), + }) + } + style={{ width: 60 }} + min={1} + /> + +
+ +
+ {/* 类型切换按钮 */} +
+ {messageTypes.map(type => ( + + ))} +
+
+ +
+ {/* 文本消息 */} + {message.type === "text" && ( +
+
+ 消息内容 + +
+
+ {/* 富文本输入框 */} + { + if (text.length <= 500) { + handleUpdateMessage(message.id, { + content: text, + }); + } + }} + placeholder="请输入欢迎消息内容，点击@好友按钮可插入@好友占位符" + maxLength={500} + onInsertMention={(() => { + if (!editorRefs.current[message.id]) { + editorRefs.current[message.id] = React.createRef(); + } + return editorRefs.current[message.id]; + })()} + /> +
+
+ 提示：@好友为占位符，系统会根据实际情况自动@相应好友 +
+
+ )} + + {/* 图片消息 */} + {message.type === "image" && ( + + handleUpdateMessage(message.id, { + content: urls && urls.length > 0 ? urls[0] : "", + }) + } + count={1} + accept="image/*" + /> + )} + + {/* 视频消息 */} + {message.type === "video" && ( + + handleUpdateMessage(message.id, { + content: typeof url === "string" ? url : (Array.isArray(url) && url.length > 0 ? url[0] : ""), + }) + } + maxSize={50} + maxCount={1} + showPreview={true} + /> + )} + + {/* 文件消息 */} + {message.type === "file" && ( + + handleUpdateMessage(message.id, { + content: typeof url === "string" ? url : (Array.isArray(url) && url.length > 0 ? url[0] : ""), + }) + } + maxSize={10} + maxCount={1} + showPreview={true} + acceptTypes={["excel", "word", "ppt"]} + /> + )} +
+
+ ))} +
+ + +
+ + + + +
+
+ + ); + }, +); + +MessageConfig.displayName = "MessageConfig"; + +export default MessageConfig; diff --git a/src/pages/mobile/workspace/group-welcome/form/components/RobotSelector.tsx b/src/pages/mobile/workspace/group-welcome/form/components/RobotSelector.tsx new file mode 100644 index 0000000..c5bd0d0 --- /dev/null +++ b/src/pages/mobile/workspace/group-welcome/form/components/RobotSelector.tsx @@ -0,0 +1,89 @@ +import React, { useImperativeHandle, forwardRef } from "react"; +import { Form, Card } from "antd"; +import DeviceSelection from "@/components/DeviceSelection"; +import { DeviceSelectionItem } from "@/components/DeviceSelection/data"; + +interface RobotSelectorProps { + selectedRobots: DeviceSelectionItem[]; + onPrevious: () => void; + onNext: (data: { + robots: string[]; + robotsOptions: DeviceSelectionItem[]; + }) => void; +} + +export interface RobotSelectorRef { + validate: () => Promise; + getValues: () => any; +} + +const RobotSelector = forwardRef( + ({ selectedRobots, onNext }, ref) => { + const [form] = Form.useForm(); + + useImperativeHandle(ref, () => ({ + validate: async () => { + try { + form.setFieldsValue({ + robots: selectedRobots.map(item => String(item.id)), + }); + await form.validateFields(["robots"]); + return true; + } catch (error) { + console.log("RobotSelector 表单验证失败:", error); + return false; + } + }, + getValues: () => { + return form.getFieldsValue(); + }, + })); + + const handleRobotSelect = (robotsOptions: DeviceSelectionItem[]) => { + const robots = robotsOptions.map(item => String(item.id)); + form.setFieldValue("robots", robots); + onNext({ robots, robotsOptions }); + }; + + return ( + +
+
+

+ 选择机器人 +

+

+ 请选择用于发送欢迎消息的机器人 +

+
+ + + + +
+ + ); + }, +); + +RobotSelector.displayName = "RobotSelector"; + +export default RobotSelector; diff --git a/src/pages/mobile/workspace/group-welcome/form/index.api.ts b/src/pages/mobile/workspace/group-welcome/form/index.api.ts new file mode 100644 index 0000000..44f0dae --- /dev/null +++ b/src/pages/mobile/workspace/group-welcome/form/index.api.ts @@ -0,0 +1,16 @@ +import request from "@/api/request"; + +// 创建入群欢迎语任务 +export function createGroupWelcomeTask(data: any) { + return request("/v1/workbench/create", data, "POST"); +} + +// 更新入群欢迎语任务 +export function updateGroupWelcomeTask(data: any) { + return request("/v1/workbench/update", data, "POST"); +} + +// 获取入群欢迎语任务详情 +export function fetchGroupWelcomeTaskDetail(id: string) { + return request("/v1/workbench/detail", { id }, "GET"); +} diff --git a/src/pages/mobile/workspace/group-welcome/form/index.data.ts b/src/pages/mobile/workspace/group-welcome/form/index.data.ts new file mode 100644 index 0000000..55d7ccd --- /dev/null +++ b/src/pages/mobile/workspace/group-welcome/form/index.data.ts @@ -0,0 +1,27 @@ +import { GroupSelectionItem } from "@/components/GroupSelection/data"; +import { DeviceSelectionItem } from "@/components/DeviceSelection/data"; + +// 欢迎消息类型 +export interface WelcomeMessage { + id: string; + type: "text" | "image" | "video" | "file"; + content: string; + order: number; // 消息顺序 + sendInterval?: number; // 发送间隔 + intervalUnit?: "seconds" | "minutes"; // 间隔单位 +} + +export interface FormData { + name: string; + status: number; // 0: 否, 1: 是（开关） + interval: number; // 时间间隔（分钟） + pushType?: number; // 0: 定时推送, 1: 立即推送 + startTime?: string; // 允许推送的开始时间 + endTime?: string; // 允许推送的结束时间 + groups: string[]; // 群组ID列表 + groupsOptions: GroupSelectionItem[]; // 群组选项列表 + robots: string[]; // 机器人（设备）ID列表 + robotsOptions: DeviceSelectionItem[]; // 机器人选项列表 + messages: WelcomeMessage[]; // 欢迎消息列表 + [key: string]: any; +} diff --git a/src/pages/mobile/workspace/group-welcome/form/index.tsx b/src/pages/mobile/workspace/group-welcome/form/index.tsx new file mode 100644 index 0000000..bcce6e9 --- /dev/null +++ b/src/pages/mobile/workspace/group-welcome/form/index.tsx @@ -0,0 +1,366 @@ +import React, { useState, useEffect, useRef } from "react"; +import { useNavigate, useParams } from "react-router-dom"; +import { Button } from "antd"; +import { Toast } from "antd-mobile"; +import { + createGroupWelcomeTask, + fetchGroupWelcomeTaskDetail, + updateGroupWelcomeTask, +} from "./index.api"; +import Layout from "@/components/Layout/Layout"; +import StepIndicator from "@/components/StepIndicator"; +import BasicSettings, { BasicSettingsRef } from "./components/BasicSettings"; +import GroupSelector, { GroupSelectorRef } from "./components/GroupSelector"; +import RobotSelector, { RobotSelectorRef } from "./components/RobotSelector"; +import MessageConfig, { MessageConfigRef } from "./components/MessageConfig"; +import type { FormData, WelcomeMessage } from "./index.data"; +import NavCommon from "@/components/NavCommon"; +import { GroupSelectionItem } from "@/components/GroupSelection/data"; +import { DeviceSelectionItem } from "@/components/DeviceSelection/data"; + +const steps = [ + { id: 1, title: "步骤 1", subtitle: "基础设置" }, + { id: 2, title: "步骤 2", subtitle: "选择机器人" }, + { id: 3, title: "步骤 3", subtitle: "选择群组" }, + { id: 4, title: "步骤 4", subtitle: "配置消息" }, +]; + +const NewGroupWelcome: React.FC = () => { + const { id } = useParams<{ id: string }>(); + const navigate = useNavigate(); + const [currentStep, setCurrentStep] = useState(1); + const [loading, setLoading] = useState(false); + + const [groupsOptions, setGroupsOptions] = useState([]); + const [robotsOptions, setRobotsOptions] = useState([]); + + const [formData, setFormData] = useState({ + name: "", + status: 1, + interval: 1, // 默认1分钟 + pushType: 0, // 默认定时推送 + startTime: "09:00", + endTime: "21:00", + groups: [], + groupsOptions: [], + robots: [], + robotsOptions: [], + messages: [ + { + id: Date.now().toString(), + type: "text", + content: "", + order: 1, + sendInterval: 5, + intervalUnit: "seconds", + }, + ], + }); + const [isEditMode, setIsEditMode] = useState(false); + + // 创建子组件的ref + const basicSettingsRef = useRef(null); + const groupSelectorRef = useRef(null); + const robotSelectorRef = useRef(null); + const messageConfigRef = useRef(null); + + useEffect(() => { + if (!id) return; + setIsEditMode(true); + // 加载编辑数据 + const loadEditData = async () => { + try { + const res = await fetchGroupWelcomeTaskDetail(id); + const data = res?.data || res; + const config = data?.config || {}; + + // 回填表单数据 + // 处理 groups：可能是字符串数组或字符串 + let groupsArray: any[] = []; + if (config.wechatGroups && Array.isArray(config.wechatGroups)) { + groupsArray = config.wechatGroups; + } else if (config.groups) { + if (Array.isArray(config.groups)) { + groupsArray = config.groups; + } else if (typeof config.groups === 'string') { + try { + groupsArray = JSON.parse(config.groups); + } catch { + groupsArray = []; + } + } + } + + // 处理 robots：可能是字符串数组或字符串 + let robotsArray: any[] = []; + if (config.deviceGroups && Array.isArray(config.deviceGroups)) { + robotsArray = config.deviceGroups; + } else if (config.robots || config.devices) { + const robotsData = config.robots || config.devices; + if (Array.isArray(robotsData)) { + robotsArray = robotsData; + } else if (typeof robotsData === 'string') { + try { + robotsArray = JSON.parse(robotsData); + } catch { + robotsArray = []; + } + } + } + + setFormData(prev => ({ + ...prev, + name: data.name || "", + status: data.status ?? config.status ?? 1, + interval: config.interval || 1, // 默认1分钟 + pushType: config.pushType ?? 0, + startTime: config.startTime || "09:00", + endTime: config.endTime || "21:00", + groups: groupsArray.map((id: any) => String(id)), + robots: robotsArray.map((id: any) => String(id)), + messages: config.messages || [ + { + id: Date.now().toString(), + type: "text", + content: "", + order: 1, + sendInterval: 5, + intervalUnit: "seconds", + }, + ], + })); + + // 回填选项数据 + // 映射群组选项字段：groupAvatar -> avatar, groupName -> name + if (config.wechatGroupsOptions) { + const mappedGroups = config.wechatGroupsOptions.map((group: any) => ({ + ...group, + avatar: group.groupAvatar || group.avatar, + name: group.groupName || group.name, + ownerNickname: group.nickName || group.ownerNickname, + })); + setGroupsOptions(mappedGroups); + } + if (config.deviceGroupsOptions) { + setRobotsOptions(config.deviceGroupsOptions); + } + } catch (error) { + console.error("加载编辑数据失败:", error); + Toast.show({ content: "加载数据失败", position: "top" }); + } + }; + loadEditData(); + }, [id]); + + const handleBasicSettingsChange = (values: Partial) => { + setFormData(prev => ({ ...prev, ...values })); + }; + + // 群组选择 + const handleGroupsChange = (data: { + groups: string[]; + groupsOptions: GroupSelectionItem[]; + }) => { + setFormData(prev => ({ + ...prev, + groups: data.groups, + groupsOptions: data.groupsOptions, + })); + setGroupsOptions(data.groupsOptions); + }; + + // 机器人选择 + const handleRobotsChange = (data: { + robots: string[]; + robotsOptions: DeviceSelectionItem[]; + }) => { + setFormData(prev => ({ + ...prev, + robots: data.robots, + robotsOptions: data.robotsOptions, + })); + setRobotsOptions(data.robotsOptions); + }; + + // 消息配置 + const handleMessagesChange = (data: { messages: WelcomeMessage[] }) => { + setFormData(prev => ({ + ...prev, + messages: data.messages, + })); + }; + + const handleSave = async () => { + try { + // 调用 MessageConfig 的表单校验 + const isValid = (await messageConfigRef.current?.validate()) || false; + if (!isValid) return; + + setLoading(true); + + // 获取基础设置中的值 + const basicSettingsValues = basicSettingsRef.current?.getValues() || {}; + const messageConfigValues = messageConfigRef.current?.getValues() || {}; + + // 构建 API 请求数据 + const apiData: any = { + name: basicSettingsValues.name || formData.name, + type: 7, // 入群欢迎语工作台类型固定为7 + status: basicSettingsValues.status ?? formData.status, + interval: basicSettingsValues.interval || formData.interval, + pushType: basicSettingsValues.pushType ?? formData.pushType ?? 0, + startTime: basicSettingsValues.startTime || formData.startTime || "09:00", + endTime: basicSettingsValues.endTime || formData.endTime || "21:00", + wechatGroups: formData.groups.map(id => Number(id)), // 使用 wechatGroups + deviceGroups: formData.robots.map(id => Number(id)), // 使用 deviceGroups + messages: messageConfigValues.messages || formData.messages, + }; + + // 更新时需要传递id + if (id) { + apiData.id = Number(id); + } + + // 调用创建或更新 API + if (id) { + await updateGroupWelcomeTask(apiData); + Toast.show({ content: "更新成功", position: "top" }); + navigate("/workspace/group-welcome"); + } else { + await createGroupWelcomeTask(apiData); + Toast.show({ content: "创建成功", position: "top" }); + navigate("/workspace/group-welcome"); + } + } catch (error) { + Toast.show({ content: "保存失败，请稍后重试", position: "top" }); + } finally { + setLoading(false); + } + }; + + const handlePrevious = () => { + if (currentStep > 1) { + setCurrentStep(currentStep - 1); + } + }; + + const handleNext = async () => { + if (currentStep < 4) { + try { + let isValid = false; + + switch (currentStep) { + case 1: + // 调用 BasicSettings 的表单校验 + isValid = (await basicSettingsRef.current?.validate()) || false; + if (isValid) { + const values = basicSettingsRef.current?.getValues(); + if (values) { + handleBasicSettingsChange(values); + } + setCurrentStep(2); + } + break; + + case 2: + // 调用 RobotSelector 的表单校验 + isValid = (await robotSelectorRef.current?.validate()) || false; + if (isValid) { + setCurrentStep(3); + } + break; + + case 3: + // 调用 GroupSelector 的表单校验 + isValid = (await groupSelectorRef.current?.validate()) || false; + if (isValid) { + setCurrentStep(4); + } + break; + + default: + setCurrentStep(currentStep + 1); + } + } catch (error) { + console.log("表单验证失败:", error); + } + } + }; + + const renderFooter = () => { + return ( +
+ {currentStep > 1 && ( + + )} + {currentStep === 4 ? ( + + ) : ( + + )} +
+ ); + }; + + return ( + } + footer={renderFooter()} + > +
+
+ +
+
+ {currentStep === 1 && ( + + )} + {currentStep === 2 && ( + setCurrentStep(1)} + onNext={handleRobotsChange} + /> + )} + {currentStep === 3 && ( + setCurrentStep(2)} + onNext={handleGroupsChange} + /> + )} + {currentStep === 4 && ( + setCurrentStep(3)} + onNext={handleMessagesChange} + /> + )} +
+
+ + ); +}; + +export default NewGroupWelcome; diff --git a/src/pages/mobile/workspace/group-welcome/list/index.api.ts b/src/pages/mobile/workspace/group-welcome/list/index.api.ts new file mode 100644 index 0000000..0fde0c8 --- /dev/null +++ b/src/pages/mobile/workspace/group-welcome/list/index.api.ts @@ -0,0 +1,27 @@ +import request from "@/api/request"; + +interface ApiResponse { + code: number; + message: string; + data: T; +} + +// 获取入群欢迎语任务列表 +export async function fetchGroupWelcomeTasks() { + return request("/v1/workbench/list", { type: 7 }, "GET"); +} + +// 删除入群欢迎语任务 +export async function deleteGroupWelcomeTask(id: string): Promise { + return request("/v1/workbench/delete", { id }, "DELETE"); +} + +// 切换任务状态 +export function toggleGroupWelcomeTask(data: { id: string; status: number }): Promise { + return request("/v1/workbench/update-status", { ...data, type: 7 }, "POST"); +} + +// 复制任务 +export async function copyGroupWelcomeTask(id: string): Promise { + return request("/v1/workbench/copy", { id }, "POST"); +} diff --git a/src/pages/mobile/workspace/group-welcome/list/index.module.scss b/src/pages/mobile/workspace/group-welcome/list/index.module.scss new file mode 100644 index 0000000..8563da0 --- /dev/null +++ b/src/pages/mobile/workspace/group-welcome/list/index.module.scss @@ -0,0 +1,154 @@ +.nav-title { + font-size: 18px; + font-weight: 600; + color: #333; +} +.searchBar { + display: flex; + gap: 8px; + padding: 16px; +} + +.refresh-btn { + // 只针对当前模块的refresh-btn按钮进行样式设置 + &.ant-btn { + height: 38px !important; + width: 40px !important; + padding: 0 !important; + border-radius: 8px !important; + min-width: 40px !important; + flex-shrink: 0 !important; + } +} + +.bg { + padding-bottom: 20px; +} + +.taskList { + display: flex; + flex-direction: column; + gap: 16px; + padding: 0 16px; +} + +.emptyCard { + text-align: center; + padding: 48px 0; + background: #fff; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); +} + +.taskCard { + background: #fff; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + padding: 20px 16px 12px 16px; +} + +.taskHeader { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 12px; +} + +.taskTitle { + display: flex; + align-items: center; + font-size: 16px; + font-weight: 600; +} + +.taskActions { + display: flex; + align-items: center; + gap: 8px; +} + +.taskInfoGrid { + font-size: 13px; + color: #666; + margin-bottom: 12px; + display: flex; + justify-content: space-between; + gap: 16px; + + > div { + display: flex; + align-items: center; + gap: 4px; + } +} + +.taskFooter { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 12px; + color: #888; + border-top: 1px dashed #eee; + padding-top: 8px; + margin-top: 8px; +} + +// CardMenu 样式 +.menu-btn { + background: none; + border: none; + padding: 4px; + cursor: pointer; + border-radius: 4px; + color: #666; + + &:hover { + background: #f5f5f5; + } +} + +.menu-dropdown { + position: absolute; + right: 0; + top: 28px; + background: white; + border-radius: 6px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + z-index: 100; + min-width: 120px; + padding: 4px; + border: 1px solid #e5e5e5; +} + +.menu-item { + padding: 8px 12px; + cursor: pointer; + display: flex; + align-items: center; + border-radius: 4px; + font-size: 14px; + gap: 8px; + transition: background 0.2s; + + &:hover { + background: #f5f5f5; + } + + &.danger { + color: #ff4d4f; + + &:hover { + background: #fff2f0; + } + } +} + +@media (max-width: 600px) { + .taskCard { + padding: 12px 6px 8px 6px; + } + .taskInfoGrid { + flex-direction: column; + gap: 8px; + } +} diff --git a/src/pages/mobile/workspace/group-welcome/list/index.tsx b/src/pages/mobile/workspace/group-welcome/list/index.tsx new file mode 100644 index 0000000..543a9e3 --- /dev/null +++ b/src/pages/mobile/workspace/group-welcome/list/index.tsx @@ -0,0 +1,280 @@ +import React, { useState, useEffect, useRef } from "react"; +import { useNavigate } from "react-router-dom"; +import { + TeamOutlined, + PlusOutlined, + SearchOutlined, + ReloadOutlined, + MoreOutlined, + ClockCircleOutlined, + EditOutlined, + DeleteOutlined, + CopyOutlined, + MessageOutlined, +} from "@ant-design/icons"; +import { Card, Button, Input, Badge, Switch } from "antd"; +import Layout from "@/components/Layout/Layout"; +import NavCommon from "@/components/NavCommon"; +import { + fetchGroupWelcomeTasks, + deleteGroupWelcomeTask, + toggleGroupWelcomeTask, + copyGroupWelcomeTask, +} from "./index.api"; +import styles from "./index.module.scss"; + +// 卡片菜单组件 +interface CardMenuProps { + onView: () => void; + onEdit: () => void; + onCopy: () => void; + onDelete: () => void; +} + +const CardMenu: React.FC = ({ onEdit, onCopy, onDelete }) => { + const [open, setOpen] = useState(false); + const menuRef = useRef(null); + + useEffect(() => { + function handleClickOutside(event: MouseEvent) { + if (menuRef.current && !menuRef.current.contains(event.target as Node)) { + setOpen(false); + } + } + if (open) document.addEventListener("mousedown", handleClickOutside); + return () => document.removeEventListener("mousedown", handleClickOutside); + }, [open]); + + return ( +
+ + {open && ( +
+
{ + onEdit(); + setOpen(false); + }} + className={styles["menu-item"]} + > + + 编辑 +
+
{ + onCopy(); + setOpen(false); + }} + className={styles["menu-item"]} + > + + 复制 +
+
{ + onDelete(); + setOpen(false); + }} + className={`${styles["menu-item"]} ${styles["danger"]}`} + > + + 删除 +
+
+ )} +
+ ); +}; + +const GroupWelcome: React.FC = () => { + const navigate = useNavigate(); + const [searchTerm, setSearchTerm] = useState(""); + const [tasks, setTasks] = useState([]); + const [loading, setLoading] = useState(false); + + const fetchTasks = async () => { + setLoading(true); + try { + const result = await fetchGroupWelcomeTasks(); + setTasks(result.list || result || []); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + fetchTasks(); + }, []); + + const handleDelete = async (taskId: string) => { + if (!window.confirm("确定要删除该任务吗？")) return; + await deleteGroupWelcomeTask(taskId); + fetchTasks(); + }; + + const handleEdit = (taskId: string) => { + navigate(`/workspace/group-welcome/edit/${taskId}`); + }; + + const handleView = (taskId: string) => { + navigate(`/workspace/group-welcome/${taskId}`); + }; + + const handleCopy = async (taskId: string) => { + await copyGroupWelcomeTask(taskId); + fetchTasks(); + }; + + const toggleTaskStatus = async (taskId: string) => { + const task = tasks.find(t => t.id === taskId); + if (!task) return; + const newStatus = task.status === 1 ? 2 : 1; + await toggleGroupWelcomeTask({ id: taskId, status: newStatus }); + fetchTasks(); + }; + + const handleCreateNew = () => { + navigate("/workspace/group-welcome/new"); + }; + + const filteredTasks = tasks.filter(task => + task.name?.toLowerCase().includes(searchTerm.toLowerCase()), + ); + + const getStatusColor = (status: number) => { + switch (status) { + case 1: + return "green"; + case 2: + return "gray"; + default: + return "gray"; + } + }; + + const getStatusText = (status: number) => { + switch (status) { + case 1: + return "进行中"; + case 2: + return "已暂停"; + default: + return "未知"; + } + }; + + return ( + + navigate("/workspace")} + right={ + + } + /> + +
+ setSearchTerm(e.target.value)} + prefix={} + allowClear + size="large" + /> + +
+ + } + > +
+
+ {filteredTasks.length === 0 ? ( + + +
+ 暂无欢迎语任务 +
+
+ 创建您的第一个入群欢迎语任务 +
+ + + ) : ( + filteredTasks.map(task => ( + +
+
+ {task.name} + +
+
+ toggleTaskStatus(task.id)} + /> + handleView(task.id)} + onEdit={() => handleEdit(task.id)} + onCopy={() => handleCopy(task.id)} + onDelete={() => handleDelete(task.id)} + /> +
+
+
+
+ + 目标群组：{task.config?.wechatGroups?.length || 0} 个群 +
+
+ 欢迎消息： + {task.config?.messages?.length || 0} 条 +
+
+ +
+
+ 时间间隔： + {task.config?.interval || 0} 分钟 +
+
创建时间：{task.createTime || "暂无"}
+
+ + )) + )} +
+
+ + ); +}; + +export default GroupWelcome; diff --git a/src/router/config.ts b/src/router/config.ts index d2157c2..f161a4e 100644 --- a/src/router/config.ts +++ b/src/router/config.ts @@ -59,6 +59,10 @@ export const routeGroups = { "/workspace/traffic-distribution/new", "/workspace/traffic-distribution/edit/:id", "/workspace/traffic-distribution/:id", + "/workspace/group-welcome", + "/workspace/group-welcome/new", + "/workspace/group-welcome/:id", + "/workspace/group-welcome/edit/:id", ], }, diff --git a/src/router/module/workspace.tsx b/src/router/module/workspace.tsx index 8b160cc..6a4575b 100644 --- a/src/router/module/workspace.tsx +++ b/src/router/module/workspace.tsx @@ -29,6 +29,9 @@ import AIKnowledgeDetail from "@/pages/mobile/workspace/ai-knowledge/detail"; import AIKnowledgeForm from "@/pages/mobile/workspace/ai-knowledge/form"; import DistributionManagement from "@/pages/mobile/workspace/distribution-management"; import ChannelDetailPage from "@/pages/mobile/workspace/distribution-management/detail"; +import GroupWelcome from "@/pages/mobile/workspace/group-welcome/list"; +import FormGroupWelcome from "@/pages/mobile/workspace/group-welcome/form"; +import DetailGroupWelcome from "@/pages/mobile/workspace/group-welcome/detail"; import PlaceholderPage from "@/components/PlaceholderPage"; const workspaceRoutes = [ @@ -251,6 +254,27 @@ const workspaceRoutes = [ element: , auth: true, }, + // 入群欢迎语 + { + path: "/workspace/group-welcome", + element: , + auth: true, + }, + { + path: "/workspace/group-welcome/new", + element: , + auth: true, + }, + { + path: "/workspace/group-welcome/:id", + element: , + auth: true, + }, + { + path: "/workspace/group-welcome/edit/:id", + element: , + auth: true, + }, ]; export default workspaceRoutes;