f

package.json

@@ -17,6 +17,7 @@
     "antd": "^5.11.2",
     "axios": "^1.2.0",
     "classnames": "^2.3.2",
+    "dayjs": "^1.11.8",
     "echarts": "^5.4.0",
     "md5": "^2.3.0",
     "react": "18.2.0",

src/components/Page/index.jsx

@@ -10,14 +10,14 @@ const pageStyle = {
 const { Title } = Typography;
 
 export default (props) => {
-  console.log(props);
+  // console.log(props);
   const { meta = {} } = useRoute() || {};
   const style = meta.noLayout ? { height: '100%' } : pageStyle;
   const title = props.title || meta.title;
 
   return (
     <div style={style}>
-      { title && !meta.noLayout && <Title level={3} style={{ paddingBottom: '12px', fontWeight: 400 }}>{ title }</Title> }
+      {title && !meta.noLayout && <Title level={3} style={{ paddingBottom: '12px', fontWeight: 400 }}>{title}</Title>}
       {props.children}
     </div>
   )

src/components/Upload/UploadFiles.jsx

@@ -50,18 +50,23 @@ export default function UploadFiles (props) {
       setLoading(false)
       const resp = info.file.response;
       const data = typeof transform == 'function' ? transform(resp) : resp;
-      // let da = data?.url
       if (multiple) {
-        // console.log('-------2---->>');
         const idList = list.map(getId);
         const targId = getId(data);
         // if (idList.findIndex(x => x == targId) == -1) {
-        let da = { ...data, status: 1 }
+        let da = [{ ...data, status: 1 }]
+        // console.log('------da----->', da);
+        const destda = da.map(item => {
+          const { createdBy, createdTime, updatedBy, updatedTime, ...rest } = item;
+          return rest;
+        });
+
         const destList = list.map(item => {
           const { createdBy, createdTime, updatedBy, updatedTime, ...rest } = item;
           return rest;
         });
-        onChange(destList.concat(da))
+
+        onChange(destList.concat(destda))
         // }
       } else {
         onChange(data)
@@ -79,8 +84,6 @@ export default function UploadFiles (props) {
     }
   }
 
-  // console.log('-----valuefang--->', value);
-
   return (
     <Upload
       multiple={multiple}

src/components/Upload/UploadImage.jsx

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 import { setProperty } from '@/utils/css';
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import { message } from 'antd'
 import Upload from './Upload';
 import styles from './style.less';
 
 function beforeUpload (file) {
+  // console.log('--------file----->', file);
   const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
   if (!isImage) {
     message.error('请上传 JPG , PNG或GIF 图片!');
@@ -61,7 +63,7 @@ export default (props) => {
   return (
     <Upload
       listType="picture-card"
-      className={styles['ant-upload']}
+      // className={styles['ant-upload']}
       style={{ width: '200px' }}
       showUploadList={false}
       beforeUpload={beforeUpload}

src/components/Upload/UploadImageList.jsx

@@ -2,6 +2,7 @@
 import React, { useEffect, useState } from 'react';
 import { Modal } from 'antd'
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import { message } from 'antd'
 import Upload from './Upload';
 
 function beforeUpload (file) {

src/components/Upload/style.less

@@ -6,16 +6,16 @@
   }
 }
 
-.ant-upload {
-  :global(.ant-upload-select) {
-    width: var(--cust-upload-width) !important;
-    height: auto !important;
-    aspect-ratio: var(--cust-upload-ratio);
-  }
+// .ant-upload {
+//   :global(.ant-upload-select) {
+//     width: var(--cust-upload-width) !important;
+//     height: auto !important;
+//     aspect-ratio: var(--cust-upload-ratio);
+//   }
 
-  .cust-img-thumb {
-    width: var(--cust-upload-width) !important;
-    height: auto !important;
-    aspect-ratio: var(--cust-upload-ratio);
-  }
-}
+//   .cust-img-thumb {
+//     width: var(--cust-upload-width) !important;
+//     height: auto !important;
+//     aspect-ratio: var(--cust-upload-ratio);
+//   }
+// }

src/components/Wangeditor/index.jsx

@@ -1,6 +1,14 @@
 import React, { useState, useEffect } from "react";
+import { Spin } from 'antd';
 import "@wangeditor/editor/dist/css/style.css";
 import { Editor, Toolbar } from "@wangeditor/editor-for-react";
+import { DomEditor, Boot } from "@wangeditor/editor";
+import { customUploadImage, customBrowseAndUploadVideo } from "./util";
+import videoToHtmlConf from "./plugins/video/videoToHtmlConf";
+import imageToHtmlConf from "./plugins/image/imageToHtmlConf";
+
+Boot.registerElemToHtml(videoToHtmlConf);
+Boot.registerElemToHtml(imageToHtmlConf);
 
 // 工具栏配置参考
 // https://www.cnblogs.com/-roc/p/16400965.html
@@ -8,29 +16,77 @@ import { Editor, Toolbar } from "@wangeditor/editor-for-react";
 const defaultStyle = {
   border: "1px solid #ccc",
   zIndex: 100,
-  marginTop: "15px"
-}
-
-function MyEditor(props) {
+  marginTop: "15px",
+};
 
-  const style = React.useMemo(() => ({ ...defaultStyle, ...(props.style || {}) }), [props.style])
+function MyEditor (props) {
+  const style = React.useMemo(
+    () => ({ ...defaultStyle, ...(props.style || {}) }),
+    [props.style]
+  );
 
   const {
     value = "",
     onChange = (e) => {
       setHtml(e);
     },
-    toolbarConfig = {
-      excludeKeys: ["group-image", "group-video"],
-    },
+    toolbarKeys,
+    toolbarConfig = {},
     editorConfig = {
       placeholder: "请输入内容...",
     },
     readonly = false,
+    mode = "default",
+    height = 500,
   } = props;
   const [editor, setEditor] = useState(null); // 存储 editor 实例
   const [html, setHtml] = useState("");
- 
+  const [loading, setLoading] = useState(false);
+
+  const toolbarConf = React.useMemo(() => {
+    return toolbarKeys
+      ? {
+        toolbarKeys,
+        ...toolbarConfig,
+      }
+      : toolbarConfig;
+  }, [toolbarConfig, toolbarKeys]);
+
+  const editorConf = React.useMemo(() => {
+    const menuConf = editorConfig.MENU_CONF;
+
+    return {
+      ...editorConfig,
+      MENU_CONF: {
+        uploadImage: { customUpload: customUploadImage },
+        uploadVideo: { customBrowseAndUpload: customBrowseAndUploadVideo(setLoading) },
+        ...menuConf,
+        fontSize: {
+          fontSizeList: [
+            "10px",
+            "11px",
+            "12px",
+            "13px",
+            "14px",
+            "15px",
+            "16px",
+            "18px",
+            "20px",
+            "24px",
+            "28px",
+            "40px",
+            "64px",
+            "72px",
+          ]
+        },
+        lineHeight: {
+          // 从1 到 2.5
+          lineHeightList: (new Array(16)).fill().map((_, inx) => `${1 + inx / 10}`),
+        }
+      },
+    };
+  }, [editorConfig]);
+
   // 模拟 ajax 请求，异步设置 html
   useEffect(() => {
     setHtml(value || "");
@@ -38,6 +94,13 @@ function MyEditor(props) {
 
   // 及时销毁 editor
   useEffect(() => {
+    if (editor) {
+      const toolbar = DomEditor.getToolbar(editor);
+      const curToolbarConfig = toolbar.getConfig();
+      // console.log(curToolbarConfig.toolbarKeys); // 当前菜单排序和分组
+      // console.log(editor?.getAllMenuKeys());
+    }
+
     return () => {
       if (editor == null) return;
       editor.destroy();
@@ -45,39 +108,48 @@ function MyEditor(props) {
     };
   }, [editor]);
 
-  function insertText() {
+  function insertText () {
     if (editor == null) return;
     editor.insertText(" hello ");
   }
 
-  function printHtml() {
+  function printHtml () {
     if (editor == null) return;
     console.log(editor.getHtml());
   }
 
   const handleChange = (editor) => {
-    const raw = editor.getHtml();
-    if (raw !== '<p><br></p>') {
-      onChange(raw)
+    let raw = editor.getHtml();
+
+    if (raw) {
+      raw = raw.replaceAll('<p>', '<p class="rich-paragraph">');
     }
-  }
+
+    if (raw !== "<p><br></p>") {
+      onChange(raw);
+    } else {
+      onChange("");
+    }
+  };
 
   return !readonly ? (
     <div className={props.className} style={style}>
       <Toolbar
         editor={editor}
-        defaultConfig={toolbarConfig}
-        mode="default"
+        defaultConfig={toolbarConf}
+        mode={mode}
         style={{ borderBottom: "1px solid #ccc" }}
       />
-      <Editor
-        defaultConfig={editorConfig}
-        value={html}
-        onCreated={setEditor}
-        onChange={handleChange}
-        mode="default"
-        style={{ height: "500px" }}
-      />
+      <Spin spinning={loading}>
+        <Editor
+          defaultConfig={editorConf}
+          value={html}
+          onCreated={setEditor}
+          onChange={handleChange}
+          mode={mode}
+          style={{ height: `${height}px` }}
+        />
+      </Spin>
     </div>
   ) : (
     <div dangerouslySetInnerHTML={{ __html: value }}></div>

src/components/Wangeditor/plugins/image/imageToHtmlConf.js

@@ -0,0 +1,15 @@
+
+const imageToHtmlConf = {
+  type: 'image',
+  elemToHtml: function(elemNode, childrenHtml) {
+    const { src, alt = '', href = '', style = {} } = elemNode;
+    const { width = '', height = '' } = style;
+
+    let styleStr = ''
+    if (width) styleStr += `width: ${width};`
+    if (height) styleStr += `height: ${height};`
+    return `<img class="rich-img" src="${src}" alt="${alt}" data-href="${href}" style="${styleStr}"/>`
+  },
+}
+
+export default imageToHtmlConf;

src/components/Wangeditor/plugins/video/videoToHtmlConf.js

@@ -0,0 +1,27 @@
+
+// 这段代码是从 官方源码 拷贝过来的
+// 但是去掉了 iframe 的支持
+// https://github.com/wangeditor-team/wangEditor/blob/f35d8a73a0a3dc159134d483afc5963d0256ea18/packages/video-module/src/module/elem-to-html.ts
+const videoToHtmlConf = {
+  type: 'video',
+  elemToHtml: function(elemNode, childrenHtml) {
+    const { src = '', poster = '', width = 'auto', height = 'auto' } = elemNode;
+
+    // 不能按照下方的格式写, 会带入 回车符
+    // const videoHtml = `
+    //   <div data-w-e-type="video" data-w-e-is-void>
+    //     <video src="${src}" poster="${poster}" controls="true" width="${width}" height="${height}"></video>
+    //   </div>
+    // `
+
+    const videoHtml = [
+      `<div data-w-e-type="video" data-w-e-is-void>`,
+      `<video src="${src}" poster="${poster}" controls="true" width="${width}" height="${height}"></video>`,
+      `</div>`
+    ].join('');
+  
+    return videoHtml;
+  }
+}
+
+export default videoToHtmlConf;

src/components/Wangeditor/util.js

@@ -0,0 +1,47 @@
+import { upload } from '@/services/comm';
+
+export const customUploadImage = async (file, insertFn) => {
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append("type", file.type);
+
+  const res = await upload(file);
+  // console.log('----------内部--res->', res);
+  insertFn(`${prefix}` + res.attachUrl, '', res.href)
+}
+
+export const customUploadVideo = async (file, insertFn) => {
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append("type", file.type);
+
+  const res = await upload(file);
+  insertFn(`${prefix}` + res.attachUrl)
+}
+
+
+export const customBrowseAndUploadVideo = (setLoading) => (insertFn) => {
+  const input = document.createElement('input');
+  input.type = "file";
+  input.accept = ".mp4,.m4v";
+  input.onchange = () => {
+    const files = input.files;
+    if (!files || files.length < 1) return;
+
+    const file = files[0];
+
+    const formData = new FormData();
+    // console.log(file)
+    formData.append("file", file);
+    formData.append("type", file.type);
+
+    setLoading(true)
+    upload(file).then(res => {
+      insertFn(`${prefix}` + res.attachUrl)
+    }).finally(() => {
+      setLoading(false);
+    });
+  }
+
+  input.click();
+}

src/layouts/AuthLayout/Main.jsx

@@ -14,7 +14,7 @@ export default (props) => {
   const { user, menus } = useModel('user')
   const navigate = useNavigate()
   const location = useLocation()
-  console.log('menus', menus)
+  // console.log('menus', menus)
   return (
     <Layout className={theme} style={{ height: '100vh' }}>
       <Header theme={theme} user={user} />

src/pages/article/Edit.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useEffect } from 'react'
 import { Button, Input, Form, Select } from 'antd'
 import Edit from '@/components/Page/Edit'
 import Wangeditor from '@/components/Wangeditor'
@@ -7,6 +7,7 @@ import UploadImages from '@/components/Upload/UploadImages'
 import UploadImageList from '@/components/Upload/UploadImageList'
 import { previewFile, downladFile } from '@/utils/attach';
 import { getTaPostById, postTaPost, putTaPost } from "@/services/taPost";
+import { getTdCategory } from "@/services/tdCategory";
 
 const request = {
   get: getTaPostById,
@@ -15,10 +16,17 @@ const request = {
 }
 
 export default (props) => {
+  const [options, setOptions] = useState([])
 
   const transform = (_, item) => {
     let images = item?.images ? JSON.stringify(item?.images) : null
-    let taAttachList = item?.taAttachList ? item?.taAttachList : []
+
+    // let destTaAttachList = 
+
+    let taAttachList = item?.taAttachList ? item?.taAttachList.map(item => {
+      const { createdBy, createdTime, updatedBy, updatedTime, ...rest } = item;
+      return rest;
+    }) : null
     let tags = item?.tags ? JSON.stringify(item?.tags) : null
     let data = { ...item, images: images, taAttachList: taAttachList, tags: tags }
     return data
@@ -30,6 +38,13 @@ export default (props) => {
     return { ...formData, tags: tags, images: images }
   }
 
+  useEffect(() => {
+    getTdCategory().then((res) => {
+      let data = res?.records.map(x => ({ label: x.categoryName, value: x.categoryId }))
+      setOptions(data)
+    })
+  }, [])
+
   return (
     <Edit
       rowKey="postId"
@@ -52,15 +67,18 @@ export default (props) => {
             <UploadImageList />
           </Form.Item>
           <Form.Item label="横向封面" name="coverHorizontal">
-            <UploadImages ratio={0.5} />
+            <UploadImages />
           </Form.Item>
           <Form.Item label="纵向封面" name="coverVertical">
             <UploadImages ratio={'100:200'} />
           </Form.Item>
-
+          <Form.Item label="文章分类" name="categoryId" required>
+            <Select options={options} placeholder="请输入" />
+          </Form.Item>
           <Form.Item label="文章标签" name="tags">
             <Select mode="tags" tokenSeparators={[',']} placeholder="请输入" />
           </Form.Item>
+
           <Form.Item label="文章作者" name="author">
             <Input placeholder="请输入" />
           </Form.Item>

src/pages/article/index.jsx

@@ -1,40 +1,66 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useEffect } from 'react'
 import List from '@/components/Page/List'
-import { Button, Tag, Image } from 'antd'
+import { Button, Tag, Image, Typography, Popconfirm } from 'antd'
 import { useNavigate } from 'react-router-dom'
-import { getTaPost, deleteTaPost } from "@/services/taPost";
+import dayjs from 'dayjs';
+import { queryDict } from "@/utils/request";
+import { getTaPost, deleteTaPost, putTaPost } from "@/services/taPost";
+import { getTdCategory } from "@/services/tdCategory";
+
+const { Text } = Typography;
+
+const queryCategory = queryDict(getTdCategory, { labelKey: "categoryName", valueKey: "categoryId" })
 
 export default (props) => {
+  const [categoryList, setCategoryList] = useState()
   const actionRef = useRef();
   const navigate = useNavigate();
 
   const columns = [
+    {
+      title: "创建时间",
+      dataIndex: "createdTime",
+      valueType: "dateRange",
+      render: (_, it) => it.createdTime?.replace("T", " ").replace(/\d+\:\d+\:\d+/, ""),
+      hideInTable: true,
+      search: {
+        transform: (val) => {
+          return {
+            startDate: val[0],
+            endDate: val[1],
+          };
+        },
+      }
+    },
     {
       title: '标题',
       dataIndex: 'title',
-      ellipsis: true,
+      render: (_, it) => <Text key="title" ellipsis={true}>{it?.title}</Text>,
     },
     {
       title: '描述',
       dataIndex: 'describe',
-      ellipsis: true,
+      render: (_, it) => <Text key="describe" ellipsis={true}>{it?.describe}</Text>,
       search: false,
     },
     {
       title: '正文',
       dataIndex: 'content',
-      render: (_, it) =>
-        <div style={{ width: '9vw' }}>
-          <div dangerouslySetInnerHTML={{ __html: it?.content }} style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }} />
-        </div>,
+      render: (_, it) => <Text key="content" style={{ width: 200 }} ellipsis={true}>{it?.content?.replace(/<[^>]+>/g, '')}</Text>,
       search: false,
     },
     {
       title: '图片',
       dataIndex: 'images',
-      render: (_, it) => it?.images ? <Image src={`${prefix}` + JSON.parse(it?.images)[0]} width={80} /> : null,
+      render: (_, it) => it?.images ? <Text key="images" style={{ width: 100 }} ellipsis={true}><Image src={`${prefix}` + JSON.parse(it?.images)[0]} height={60} /></Text> : null,
       search: false,
     },
+    {
+      title: '分类',
+      dataIndex: 'categoryId',
+      valueType: 'select',
+      request: queryCategory
+    },
     // {
     //   title: '横向封面',
     //   dataIndex: 'coverHorizontal',
@@ -51,27 +77,34 @@ export default (props) => {
       title: '标签',
       dataIndex: 'tags',
       search: false,
-      render: (_, it) => it?.tags ? JSON.parse(it?.tags).map(it => <Tag color="red">{it}</Tag>) : null
+      render: (_, it) => it?.tags ? <Text key="tags" style={{ width: 140 }} ellipsis={true}>{JSON.parse(it?.tags).map(it => <Tag color="processing">{it}</Tag>)}</Text> : null
     },
     {
       title: '作者',
-      dataIndex: 'author'
+      dataIndex: 'author',
+      render: (_, it) => <Text key="author" style={{ width: 100 }} ellipsis={true}>{it?.author}</Text>,
     },
     {
       title: '链接',
       dataIndex: 'link',
-      ellipsis: true,
-      render: (_, it) =>
-        <div style={{ width: '8vw' }}>
-          <div style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}><a href="#">{it?.link}</a></div>
-        </div>,
+      render: (_, it) => <Text key="link" style={{ width: 100 }} ellipsis={true}><a href={it?.link} target="_bank">{it?.link}</a></Text>,
       search: false,
     },
-    // {
-    //   title: '附件',
-    //   dataIndex: 'attachment',
-    //   search: false,
-    // }
+    {
+      title: '状态',
+      dataIndex: 'status',
+      valueEnum: {
+        0: '未发布',
+        1: '发布'
+      },
+      search: false,
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createdTime',
+      render: (_, it) => dayjs(it?.createdTime).format('YYYY-MM-DD HH:mm'),
+      search: false,
+    }
   ]
 
   const onEdit = (it) => {
@@ -83,11 +116,32 @@ export default (props) => {
       actionRef.current.reload();
     })
   }
+  useEffect(() => {
+    getTdCategory().then((res) => {
+      let data = res?.records.map(x => ({ categoryName: x.categoryName, categoryId: x.categoryId }))
+      setCategoryList(data)
+    })
+  }, [])
 
   const onDetail = (it) => {
     navigate(`/article/detail?id=${it.postId}`)
   }
 
+  const onRelease = (item) => {
+    let status = item.status === 1 ? 0 : 1
+    let id = item.postId
+    let cName = categoryList.find(item => item.categoryId === item?.categoryId)
+    let data = [item].map(item => {
+      const { createdTime, updatedTime, ...rest } = item
+      return { ...rest, status: status, categoryName: cName.categoryName }
+    })
+
+    // console.log('--------categoryList------------->', categoryList);
+    putTaPost(id, data[0]).then(res => {
+      actionRef.current?.reload()
+    })
+  }
+
   return (
     <List
       rowKey="postId"
@@ -108,6 +162,22 @@ export default (props) => {
           新增
         </Button>
       ]}
+      columnOptionRender={(item) => [
+        <Popconfirm
+          key="release"
+          title={item?.status === 0 ? '确定要发布吗?' : '确定要取消发布吗?'}
+          onConfirm={() => onRelease(item)}
+          okText="确定"
+          cancelText="取消"
+        >
+          <Button
+            key="3"
+            type="link"
+          >
+            状态
+          </Button>
+        </Popconfirm>
+      ]}
     />
   )
 }

src/services/comm.js

@@ -0,0 +1,10 @@
+import request from "@/utils/request";
+
+export const upload = file => {
+  // let deFile = { file: file, fileType: file.type }
+  // console.log('----------小方------>', deFile);
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append("fileType", file.type);
+  return request(uploadAPI, { method: "POST", data: formData });
+};

src/utils/request.js

@@ -80,7 +80,7 @@ instance.interceptors.response.use(
         message.error("未登录或者超时, 请重新登录");
       }
     } else {
-      console.log(config);
+      // console.log(config);
       if (!config.silent) {
         const errMsg = data.msg || "系统错误";
         message.error(errMsg.indexOf("exception") > -1 ? "服务异常" : errMsg);
@@ -93,7 +93,7 @@ instance.interceptors.response.use(
     // 超出 2xx 范围的状态码都会触发该函数。
     // 对响应错误做点什么
 
-    console.error(error);
+    // console.error(error);
 
     return Promise.reject("网络异常, 请重试...");
   }
@@ -136,6 +136,7 @@ export function queryDict (
       ...(leftParams || {}),
     })
       .then((res) => {
+        // console.log('----------------res?.records----->', res?.records);
         return res?.records?.map((x) => ({
           label: x[labelKey],
           value: x[valueKey],