修改 通知公告 自动换行 显示输入2000字

jjb.config.js

@@ -46,7 +46,7 @@ module.exports = {
   // 开发服务
   server: {
     // 监听端口号
-    port: "8086",
+    port: "8036",
     // 服务地址
     host: "127.0.0.1",
     // 是否自动打开浏览器

package.json

@@ -6,8 +6,8 @@
   "license": "MIT",
   "main": "index.js",
   "scripts": {
-    "serve": "node node_modules/@cqsjjb/scripts/webpack.dev.server.js",
+    "serve": "node node_modules/@cqsjjb/scripts/rspack.dev.server.js",
-    "build": "node node_modules/@cqsjjb/scripts/webpack.build.js",
+    "build": "node node_modules/@cqsjjb/scripts/rspack.build.js",
     "push": "jjb-cmd push java production",
     "clean-cache": "rimraf node_modules/.cache/webpack",
     "serve:development": "cross-env NODE_ENV=development npm run serve",

src/pages/Container/Notice/Add/index.js

@@ -8,6 +8,22 @@ import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
 import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
 import { NS_CORPINFO, NS_NOTICE } from "~/enumerate/namespace";
 
+const NOTICE_CONTENT_MAX_LENGTH = 2000;
+
+const getEditorTextLength = (html = "") => {
+  if (!html) {
+    return 0;
+  }
+
+  if (typeof window === "undefined") {
+    return html.replace(/<[^>]+>/g, "").length;
+  }
+
+  const container = document.createElement("div");
+  container.innerHTML = html;
+  return (container.innerText || container.textContent || "").length;
+};
+
 function Add(props) {
   const queryParams = useGetUrlQuery();
   const [form] = Form.useForm();
@@ -188,7 +204,24 @@ function Add(props) {
             required: true,
             customizeRender: true,
             render: (
-              <Form.Item name="content" label="公告内容" labelCol={{ span: 2 }} wrapperCol={{ span: 22 }} rules={[{ required: true }]}>
+              <Form.Item
+                name="content"
+                label="公告内容"
+                labelCol={{ span: 2 }}
+                wrapperCol={{ span: 22 }}
+                rules={[
+                  { required: true },
+                  {
+                    validator: (_, value) => {
+                      if (getEditorTextLength(value) > NOTICE_CONTENT_MAX_LENGTH) {
+                        return Promise.reject(new Error(`公告内容不能超过${NOTICE_CONTENT_MAX_LENGTH}字`));
+                      }
+
+                      return Promise.resolve();
+                    },
+                  },
+                ]}
+              >
                 <Editor
                   value={contentValue || ""}
                   onChange={(value) => {

src/pages/Container/NoticeReadRecord/View/index.js

@@ -72,13 +72,16 @@ function NoticeReadRecordView(props) {
         )
       }
     >
-      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "20px" }}>
+      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "20px", overflowWrap: "anywhere" }}>
-        <Title level={2} style={{ textAlign: "center", marginBottom: "24px" }}>
+        <Title
+          level={2}
+          style={{ textAlign: "center", marginBottom: "24px", wordBreak: "break-all" }}
+        >
           {noticeReadRecordInfo.title}
         </Title>
 
         <div style={{ textAlign: "center", marginBottom: "24px" }}>
-          <Text type="secondary">
+          <Text type="secondary" style={{ wordBreak: "break-all" }}>
             发布时间：
             {noticeReadRecordInfo.publishTime}
           </Text>
@@ -89,9 +92,14 @@ function NoticeReadRecordView(props) {
             minHeight: "200px",
             padding: "20px",
             marginBottom: "24px",
+            overflowWrap: "anywhere",
+            wordBreak: "break-all",
           }}
         >
-          <div dangerouslySetInnerHTML={{ __html: noticeReadRecordInfo.content }} />
+          <div
+            style={{ overflowWrap: "anywhere", wordBreak: "break-all" }}
+            dangerouslySetInnerHTML={{ __html: noticeReadRecordInfo.content }}
+          />
         </div>
       </div>