f

public/config.js

@@ -1,7 +1,11 @@
+var id = "cms";
+
+var uploadAPI = `http://192.168.89.13:7201/api/upload/${id}`
 
 var SERVER_BASE = '';
 
+var prefix = 'http://192.168.89.13:7777/'
 // 获取真实的上传文件地址
-function getRealPath(path) {
-  return path;
+function getRealPath (path) {
+  return `${prefix}` + path;
 }

src/components/EditForm/index.jsx

@@ -0,0 +1,116 @@
+import React from 'react'
+import { Button, Card, Row, Col, Form } from 'antd'
+import { ProForm } from '@ant-design/pro-components'
+import { useSearchParams, useNavigate } from 'react-router-dom'
+
+const noop = (x) => x
+
+export default React.forwardRef(function EditForm (props, ref) {
+  const navigate = useNavigate()
+
+  const onBackDefault = () => navigate(-1);
+
+  const {
+    rowId,
+    rowKey,
+    request,
+    transform, // 提交时转换数据
+    convertValue, // 初始化表单时数值转换
+    maxWidth = '800px',
+    renderItems,
+    formRef,
+    initialValues, // 初始化 form 只生效一次
+    initialData, // 初始化 form 每次都生效
+    onFinish,
+    onDataReady,
+    onBack = onBackDefault,
+    ...leftProps
+  } = props
+
+  const [form] = Form.useForm()
+
+  if (formRef) {
+    formRef.current = form
+  }
+
+  // 表单提交
+  const onSubmit = async (values) => {
+    // 可能需要转换下格式
+    if (rowId) {
+      values[rowKey] = rowId
+    }
+    const data = transform ? transform(rowId, values) : values
+
+    if (rowId && request?.update) {
+      const res = await request.update(rowId, data)
+      if (onFinish) {
+        onFinish(res)
+      }
+    } else if (request?.save) {
+      const res = await request.save(data)
+      if (onFinish) {
+        onFinish(res)
+      }
+    }
+
+    return true
+  }
+
+  // 查询详情
+  React.useEffect(() => {
+    form.resetFields()
+
+    if (rowId && request?.get) {
+      request.get(rowId).then((res) => {
+        if (onDataReady) {
+          onDataReady(res)
+        }
+
+        // 此处可能需要转换下数据格式
+        const formData = convertValue ? convertValue(res) : res
+        form.setFieldsValue(formData)
+      })
+    } else {
+      form.resetFields()
+      const formData = convertValue ? convertValue(initialData) : initialData
+      form.setFieldsValue(formData)
+    }
+  }, [request?.get, rowId, initialData])
+
+  // React.useEffect(() => {
+  //   form.resetFields()
+  //   const formData = convertValue ? convertValue(initialData) : initialData
+  //   form.setFieldsValue(formData)
+  // }, [initialData])
+
+  React.useImperativeHandle(ref, () => ({
+    form: form,
+  }))
+
+  return (
+    <ProForm
+      form={form}
+      onFinish={onSubmit}
+      style={{ maxWidth }}
+      layout="horizontal"
+      labelCol={{ flex: '120px' }}
+      initialValues={initialValues}
+      submitter={{
+        render: (_, doms) => [
+          <Row gutter={48}>
+            <Col flex="200px"></Col>
+            <Col>
+              {doms[1]}
+            </Col>
+            <Col>
+              <Button onClick={onBack}>返回</Button>
+            </Col>
+          </Row>,
+        ],
+      }}
+      {...leftProps}
+    >
+      {renderItems()}
+    </ProForm>
+  )
+})

src/components/Page/Edit.jsx

@@ -1,22 +1,19 @@
 import React from 'react';
-import { Button, Card, Form } from 'antd';
+import { Button, Card, Row, Col, Form } from 'antd';
+import { ProForm } from '@ant-design/pro-components';
+import EditForm from '@/components/EditForm';
 import { useSearchParams, useNavigate } from "react-router-dom";
 import useBool from '@/utils/hooks/useBool';
 import Page from './index';
 
-const FormItem = Form.Item;
-const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
+export default function EditPage(props) {
+
+  const {
+    title,
+    onFinish,
+    ...leftProps
+  } = props;
 
-export default (props) => {
-  /**
-   * request 编辑或者新增接口
-   * dataFunc 将 form 表单数据转换为接口需要格式, 一般情况下不需要这个操作
-   * formDataFunc 将接口返回的值转换为 form 表单数据格式, 一般情况下不需要这个操作
-   * width form 表单宽度, 默认 800px
-   */
-  const { request, dataFunc, formDataFunc, width = '800px', onFinish, ...leftProps } = props;
-  const [loading, startLoading, stopLoading] = useBool();
-  const [form] = Form.useForm();
   const navigate = useNavigate();
 
   // 获取 id query 参数, 如果存在说明是编辑，而不是新增
@@ -30,63 +27,22 @@ export default (props) => {
     }, 600);
   }, [navigate]);
 
-  // 表单提交
-  const onSubmit = (values) => {    
-    startLoading();
-    // 可能需要转换下格式
-    const data = dataFunc ? dataFunc(id, values) : values;
-    if (id) {
-      request.update(id, data).then((res) => {
-        stopLoading();
-        if (onFinish) {
-          onFinish(res);
-        } else {
-          navBack();
-        }
-      }).catch(stopLoading);
+  const handleFinish = (res) => {
+    if (onFinish) {
+      onFinish(res);
     } else {
-      request.save(data)
-        .then((res) => {
-          stopLoading();
-          if (onFinish) {
-            onFinish(res);
-          } else {
-            navBack();
-          }
-        }).catch(stopLoading);
+      navBack();
     }
   }
 
-  // 查询详情
-  React.useEffect(() => {
-    if (id && request) {
-      request.get(id).then(res => {
-        // 此处可能需要转换下数据格式
-        const formData = formDataFunc ? formDataFunc(res) : res;
-        form.setFieldsValue(formData);
-      })
-    }
-  }, [request, id]);
-
   return (
-    <Page>
-      <Card bodyStyle={{padding: '48px 24px'}}>
-        <Form {...formItemLayout} form={form} onFinish={onSubmit} style={{width}} {...leftProps} >
-          {props.children}
-          <FormItem label=" " colon={false} style={{marginBottom: 0}}>
-            <Button type="default" onClick={() => navigate(-1)}>
-              取消
-            </Button>
-            <Button
-              type="primary"
-              htmlType="submit"
-              style={{ marginLeft: '4em' }}
-              loading={loading}
-            >
-              确认
-            </Button>
-          </FormItem>
-        </Form>
+    <Page title={title}>
+      <Card title={title}>
+        <EditForm
+          rowId={id}
+          onFinish={handleFinish}
+          {...leftProps}
+        />
       </Card>
     </Page>
   )

src/components/Page/List.jsx

@@ -1,89 +1,48 @@
-import React from 'react';
-import { Button, Popconfirm, message } from 'antd';
-import { ProTable } from '@ant-design/pro-components';
-import { queryTable } from '@/utils/request';
-import Page from './index';
+import React from 'react'
+import { message } from 'antd'
+import Page from './index'
+import XTable from '../XTable'
 
 export default React.forwardRef((props, ref) => {
   /**
    * request 与 ProTable 定义不同，这个只是普通的接口即可
    */
-  const { request, rowKey, columns, onAdd, onDelete, onEdit, toolBarRender, columnOptionRender, ...leftProps } = props;
-  const actionRef = React.useRef();
-  const hideRef = React.useRef();
+  const {
+    attach,
+    title,
+    extra,
+    ...leftProps
+  } = props
+  const [loading, setLoading] = React.useState(false);
+  const actionRef = React.useRef()
+  const hideRef = React.useRef()
 
-  const api = React.useMemo(() => queryTable(request), [request]);
+  React.useImperativeHandle(
+    ref,
+    () => {
+      const showLoading = (msg) => (hideRef.current = message.loading(msg || '操作中, 请稍候...'))
+      const hideLoading = () => hideRef.current && hideRef.current()
+      const reload = () => actionRef.current?.reload && actionRef.current.reload()
 
-  // 统一实现操作列
-  const cols = React.useMemo(() => [
-    ...columns,
-    {
-      title: '操作',
-      valueType: 'option',
-      key: 'option',
-      ellipsis: true,
-      render: (_, record) => [
-        (
-          onEdit && 
-          <Button style={{ padding: 0 }} type="link" key={1} onClick={() => onEdit(record) }>
-            编辑
-          </Button>
-        ),
-        (
-          onDelete &&
-          <Popconfirm
-            key={3}
-            title="您是否确认删除 ?"
-            onConfirm={() => onDelete(record)}
-            okText="确定"
-            cancelText="取消"
-          >
-            <Button style={{ padding: 0 }} type="link">
-              删除
-            </Button>
-          </Popconfirm>
-        ),
-        ...(columnOptionRender ? columnOptionRender(_, record) : []),
-      ].filter(Boolean),
+      return {
+        showLoading,
+        hideLoading,
+        reload,
+        setLoading,
+        actionRef: actionRef,
+      }
     },
-  ], [columns, onEdit, onDelete]);
-
-  React.useImperativeHandle(ref, () => {
-    const showLoading = msg => (hideRef.current = message.loading(msg || '操作中, 请稍候...'));
-    const hideLoading = () => hideRef.current && hideRef.current();
-    const reload = () => actionRef.current?.reload && actionRef.current.reload();
-
-    return {
-      showLoading,
-      hideLoading,
-      reload,
-      actionRef: actionRef,
-    }
-  }, []);
+    []
+  )
 
   return (
-    <Page>
-      <ProTable
-        rowKey={rowKey}
-        columns={cols}
-        request={api}
-        cardBordered
-        actionRef={actionRef}
-        toolBarRender={() => [
-          (
-            onAdd && 
-            <Button
-              key="1"
-              type="primary"
-              onClick={onAdd}
-            >
-              新增
-            </Button>
-          ),
-          ...(toolBarRender ? toolBarRender() : []),
-        ].filter(Boolean)}
+    <Page title={title} extra={extra}>
+      {attach}
+      <XTable
+        ref={actionRef}
+        loading={loading}
         {...leftProps}
       />
     </Page>
   )
-});
+})

src/components/Upload/UploadFile.jsx

@@ -1,61 +0,0 @@
-import React from "react";
-import { UploadOutlined } from "@ant-design/icons";
-import { Button } from "antd";
-import Upload from "@/components/Upload/Upload";
-
-const getFileInfo = (x) => ({
-  uid: x,
-  name: x?.split("/")?.at(-1)?.replace(/^\d+-/, ""),
-  status: "done",
-  thumbUrl: x,
-  url: x,
-});
-
-export default (props) => {
-  const { value, onChange, accept = ".ppt,.pptx,.pdf" } = props;
-
-  const [loading, setLoading] = React.useState(false);
-
-  const [fileList, setFileList] = React.useState([]);
-
-
-  const handleChange = (info) => {
-    const newFileList = [...info.fileList];
-
-    if (info.file.status === "uploading") {
-      setLoading(true);
-    } else if (info.file.status === "error") {
-      setLoading(false);
-    } else if (info.file.status === "done") {
-      setLoading(false);
-      const { url, fileType } = info.file.response;
-      if (onChange) {
-        onChange(url, fileType);
-      }
-    }
-
-    setFileList(newFileList);
-  };
-
-  React.useEffect(() => {
-    if (!value) {
-      setFileList([]);
-    } else {
-      setFileList([getFileInfo(value)]);
-    }
-  }, [value]);
-
-  return (
-    <>
-      <Upload
-        accept={accept}
-        fileList={fileList}
-        onChange={handleChange}
-      >
-        <Button loading={loading} icon={<UploadOutlined />}>
-          点击上传文件
-        </Button>
-      </Upload>
-    </>
-  );
-};

src/components/Upload/UploadFiles.jsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { UploadOutlined } from '@ant-design/icons'
+import { Button, Space, Row, Col, Popconfirm } from 'antd';
+import Upload from './Upload'
+
+const noop = x => x;
+
+export default function UploadFiles (props) {
+
+  const {
+    rowKey = "id",
+    rowLabel = "attachName",
+    readonly = false,
+    multiple = true,
+    value,
+    onChange,
+    onPreview,
+    onDownload,
+    transform = noop,
+    renderItem = defRenderItem,
+    ...leftProps
+  } = props;
+
+  const [loading, setLoading] = React.useState(false)
+
+  const list = React.useMemo(() => {
+    return Array.isArray(value) ? value.filter(Boolean) : [value].filter(Boolean);
+  }, [value]);
+
+  const getId = (item) => {
+    return typeof rowKey == 'function' ? rowKey(item) : item[rowKey];
+  };
+
+  const getLabel = (item) => {
+    return typeof rowLabel == 'function' ? rowLabel(item) : item[rowLabel];
+  }
+
+  const handleChange = (info) => {
+    // console.log('info-------->', info)
+    if (info.file.status === 'uploading') {
+      setLoading(true)
+      return
+    }
+    if (info.file.status === 'error') {
+      setLoading(false)
+      return
+    }
+
+    if (info.file.status === 'done') {
+      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 }
+        const destList = list.map(item => {
+          const { createdBy, createdTime, updatedBy, updatedTime, ...rest } = item;
+          return rest;
+        });
+        onChange(destList.concat(da))
+        // }
+      } else {
+        onChange(data)
+      }
+    }
+  }
+
+  const onDelete = (item) => {
+    if (multiple) {
+      const id = getId(item);
+      const vals = list.filter(x => getId(x) != id);
+      onChange(vals);
+    } else {
+      onChange();
+    }
+  }
+
+  // console.log('-----valuefang--->', value);
+
+  return (
+    <Upload
+      multiple={multiple}
+      showUploadList={false}
+      onChange={handleChange}
+      style={{ display: 'inline-block', width: '100%' }}
+      {...leftProps}
+    >
+      {!readonly && <Button icon={<UploadOutlined />}>上传附件</Button>}
+      <div onClick={e => e.stopPropagation()} style={{ marginTop: 10 }}>
+        {
+          list.map(item => (
+            <div key={getId(item)}>{renderItem(item, { readonly, loading, getLabel, getId, onDelete, onPreview, onDownload })}</div>
+          ))
+        }
+      </div>
+    </Upload>
+  );
+}
+
+const btnStyle = { padding: 0, height: '24px' };
+
+function defRenderItem (item, { readonly, loading, getLabel, getId, onDelete, onPreview, onDownload }) {
+
+  const handlePreview = () => {
+    if (typeof onPreview == 'function') {
+      onPreview(item);
+    }
+  }
+
+  const handleDownload = () => {
+    if (typeof onDownload == 'function') {
+      onDownload(item);
+    }
+  }
+
+  return (
+    <Row gutter={16}>
+      <Col flex={1} style={{ display: 'flex', alignItems: 'center' }}>
+        <div style={{ fontSize: '12px' }}>{getLabel(item)}</div>
+      </Col>
+      <Col flex="none">
+        <Button type='link' style={btnStyle} onClick={handlePreview}>预览</Button>
+      </Col>
+      <Col flex="none">
+        <Button type='link' style={btnStyle} onClick={handleDownload}>下载</Button>
+      </Col>
+      {
+        !readonly ? (
+          <Col flex="none">
+            <Popconfirm
+              title="确定进行删除操作 ?"
+              onConfirm={() => onDelete(item)}
+            >
+              <Button type='link' style={btnStyle} danger>删除</Button>
+            </Popconfirm>
+          </Col>
+        ) : null
+      }
+    </Row>
+  );
+}

src/components/Upload/UploadImage.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { setProperty } from '@/utils/css';
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
 import Upload from './Upload';
+import styles from './style.less';
 
 function beforeUpload (file) {
   const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
@@ -41,12 +42,13 @@ export default (props) => {
     if (info.file.status === 'done') {
       setLoading(false);
       const { url, fileType } = info.file.response;
+      // console.log('--------方--url-.>', url);
       onChange(url);
     }
   };
 
   const previewUrl = getRealPath ? getRealPath(value) : value;
-
+  // console.log('--------previewUrl----->', previewUrl);
   React.useEffect(() => {
     setProperty('--cust-upload-ratio', ratio);
   }, [ratio]);
@@ -55,10 +57,12 @@ export default (props) => {
     setProperty('--cust-upload-width', `${width}px`);
   }, [width]);
 
+  // console.log('-----里层----->value,', value);
   return (
     <Upload
       listType="picture-card"
-      className="cust-img-upload"
+      className={styles['ant-upload']}
+      style={{ width: '200px' }}
       showUploadList={false}
       beforeUpload={beforeUpload}
       onChange={handleChange}

src/components/Upload/UploadImageList.jsx

@@ -4,8 +4,8 @@ import { Modal } from 'antd'
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
 import Upload from './Upload';
 
-function beforeUpload(file) {
-  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'|| file.type === 'image/gif';
+function beforeUpload (file) {
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
   if (!isJpgOrPng) {
     message.error('请上传 JPG,PNG 或 GIF 图片!');
   }
@@ -24,8 +24,11 @@ const UploadButton = (props) => (
   </div>
 );
 
+const defaultInput = x => ({ uid: x, url: x });
+const defaultOutput = x => x.url;
+
 export default (props) => {
-  const { value, onChange, input, output } = props;
+  const { value, onChange, input = defaultInput, output = defaultOutput } = props;
 
   const [loading, setLoading] = useState(false);
   const [previewVisible, setPreviewVisible] = useState(false);
@@ -47,10 +50,10 @@ export default (props) => {
     }
   };
 
-  const handleSuccess = ({url}) => {
+  const handleSuccess = ({ url }) => {
     setLoading(false)
     const inx = fileList?.length ? fileList.length + 1 : 1
-    const list = fileList.concat({
+    const list = (fileList || []).concat({
       url,
       uid: `new-${inx}`,
       status: 'done'
@@ -59,35 +62,28 @@ export default (props) => {
   }
 
   const toggleChange = (list) => {
-    if (output) {
-      onChange(list.map(x => output(x)))
-    } else {
-      onChange(list)
-    }
+    onChange(list.map(x => output(x)))
   }
 
   const handlePreview = (file) => {
-    setPreviewImage(file.url)
+    setPreviewImage(`${prefix}` + file.url)
     setPreviewVisible(true)
   }
 
   useEffect(() => {
-    if (input) {
-      const lst = (value || []).map((it) => {
-        const { uid, url } = input(it)
-        return {
-          uid,
-          url,
-          status: 'done',
-          raw: it,
-        }
-      })
-      setFileList(lst)
-    } else {
-      setFileList(value || [])
-    }
+    const lst = (value || []).map((it) => {
+      const { uid, url } = input(it)
+      let ur = `${prefix}` + url
+      return {
+        uid,
+        ur,
+        status: 'done',
+        raw: it,
+      }
+    })
+    setFileList(lst)
   }, [value])
-
+  // console.log('------fileList---->>>>', fileList);
   return (
     <>
       <Upload

src/components/Upload/UploadImages.jsx

@@ -3,19 +3,19 @@ import { Space } from 'antd';
 import UploadImage from "@/components/Upload/UploadImage";
 
 export default (props) => {
-  const { value = [], onChange, limit = 1, ratio, tips } = props;
+  const { value, onChange, limit = 1, ratio, tips } = props;
 
-  const handleChange = (inx = 0) => e => {
-    value[inx] = e;
-    onChange(value.slice());
+  const handleChange = () => e => {
+    let val = e
+    onChange(val);
   }
 
   return (
     <div className="flex">
       <div className="flex-0">
         <UploadImage
-          onChange={handleChange(0)}
-          value={value[0]}
+          onChange={handleChange()}
+          value={value}
           ratio={ratio}
           tips={tips}
         />

src/components/Upload/request.js

@@ -1,42 +1,27 @@
 import request from "@/utils/request";
 
-import { useModel } from "@/store";
-
-const upload = (file, fileType = "image") => {
-  const { policyList } = useModel("policy");
+const upload = file => {
   const formData = new FormData();
-  formData.append("OSSAccessKeyId", policyList.OSSAccessKeyId);
-  formData.append("signature", policyList.signature);
-  formData.append("policy", policyList.policy);
-  formData.append("key", policyList.dir);
-  formData.append("success_action_status", 200);
   formData.append("file", file);
-
-  // return request(policyList.host, {
-  //   method: "post",
-  //   data: formData,
-  //   headers: {
-  //     "Content-Type": "multipart/form-data",
-  //     "Access-Control-Allow-Origin": "*",
-  //   },
-  // });
+  formData.append("fileType", file.type);
+  return request(uploadAPI, { method: "POST", data: formData });
 };
 
 /**
  * 上传文件
  * @returns
  */
-export function uploadFile(params) {
+export function uploadFile (params) {
   const { file, onSuccess, onError } = params;
   upload(file)
     .then((res) => {
-      onSuccess(res, file);
+      onSuccess({ url: res.attachUrl, fileType: file.type, name: file.name }, file);
     })
     .catch((e) => {
       onError(e);
     });
 
   return {
-    abort: () => {},
+    abort: () => { },
   };
 }

src/components/Upload/style.less

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

src/components/XTable/components/Actions.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Dropdown, Space } from 'antd';
+import { HolderOutlined } from '@ant-design/icons';
+
+export default function renderActions(children = []) {
+
+  // children 小于，等于 2 个直接返回
+  if (children.length <= 2) {
+    return (
+      <Space size={8}>
+        {children}
+      </Space>
+    );
+  }
+
+  // 第一个拿出来
+  const first = children.shift();
+  const items = children.map((item, index) => {
+    return ({
+      key: index,
+      label: item,
+    });
+  });
+
+  return (
+    <Space size={8}>
+      {first}
+      <Dropdown menu={{ items }}>
+        <a onClick={(e) => e.preventDefault()}>
+          更多
+          <HolderOutlined />
+        </a>
+      </Dropdown>
+    </Space>
+  );
+}

src/components/XTable/index.jsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { ProTable } from '@ant-design/pro-components'
+import { Button, Popconfirm, message } from 'antd'
+import { UploadOutlined, PlusOutlined } from '@ant-design/icons'
+import { queryTable } from '@/utils/request'
+import renderActions from './components/Actions'
+
+function XTable (props, ref) {
+  /**
+   * request 与 ProTable 定义不同，这个只是普通的接口即可
+   */
+  const {
+    request,
+    rowKey,
+    columns,
+    onAdd,
+    onDelete,
+    onEdit,
+    onDetail,
+    onExport,
+    toolBarRender,
+    columnOptionRender,
+    option = true,
+    ...leftProps
+  } = props;
+
+  const actionRef = React.useRef();
+  const paramsRef = React.useRef({});
+  const api = React.useMemo(() => {
+    if (typeof request == 'function') {
+      return queryTable(request, { paramsCallback: x => paramsRef.current = x });
+    }
+  }, [request]);
+
+  // 统一实现操作列
+  const newColumns = React.useMemo(
+    () => [
+      ...columns,
+      option ? {
+        title: '操作',
+        key: 'option',
+        fixed: 'right',
+        search: false,
+        width: 140,
+        render: (_, record) => renderActions([
+          onDetail && (
+            <Button
+              style={{ padding: 0 }}
+              type="link"
+              key="detail"
+              onClick={() => onDetail(record)}
+            >
+              详情
+            </Button>
+          ),
+          onEdit && (
+            <Button
+              style={{ padding: 0 }}
+              type="link"
+              key="edit"
+              onClick={() => onEdit(record)}
+            >
+              编辑
+            </Button>
+          ),
+          onDelete && (
+            <Popconfirm
+              key="delete"
+              title="您是否确认删除 ?"
+              onConfirm={() => onDelete(record, () => actionRef.current?.reload())}
+              okText="确定"
+              cancelText="取消"
+            >
+              <Button style={{ padding: 0 }} type="link" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          ),
+          ...(columnOptionRender ? columnOptionRender(_, record) : []),
+        ].filter(Boolean)),
+      } : false,
+    ].filter(Boolean),
+    [columns, option, onEdit, onDelete]
+  );
+
+  React.useImperativeHandle(ref, () => actionRef.current);
+
+  return (
+    <ProTable
+      rowKey={rowKey}
+      columns={newColumns}
+      request={api}
+      cardBordered
+      actionRef={actionRef}
+      form={{
+        // syncToUrl: true,
+        // syncToInitialValues: false,
+      }}
+      scroll={{ x: 'max-content' }}
+      toolBarRender={() =>
+        [
+          onAdd && (
+            <Button
+              key="add"
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={onAdd}
+            >
+              新增
+            </Button>
+          ),
+          onExport && (
+            <Button
+              ghost
+              key="export"
+              type="primary"
+              onClick={() => onExport(paramsRef.current)}
+              icon={<UploadOutlined />}
+            >
+              导出
+            </Button>
+          ),
+          ...(toolBarRender ? toolBarRender() : []),
+        ].filter(Boolean)
+      }
+      {...leftProps}
+    />
+  );
+}
+
+export default React.forwardRef(XTable);

src/pages/PreviewObj.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+
+export default function PreviewObj(props) {
+
+  const [ searchParams ] = useSearchParams();
+  const url = decodeURIComponent(searchParams.get('url'));
+  const type = decodeURIComponent(searchParams.get('type'));
+
+  return (
+    <object
+      data={url}
+      type={type}
+      width="100%"
+      height="100%"
+    />
+  );
+}

src/pages/article/Detail.jsx

@@ -1,54 +1,55 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useEffect } from 'react'
 import Page from '@/components/Page'
 import { Button, Input, Descriptions, Form, Image, Card, Row, Col, Space, Tag } from 'antd'
+import { useSearchParams } from "react-router-dom";
+import { getTaPostById } from "@/services/taPost";
 
 export default (props) => {
-
-  const { list } = props;
-
+  const [list, setList] = useState()
+  const [searchParams] = useSearchParams();
+  const id = searchParams.get("id");
+  useEffect(() => {
+    getTaPostById(id).then((res) => {
+      setList(res)
+    })
+  }, [id])
+  // console.log('-------list?.images------>>>>>', list?.images ? JSON.parse(list?.images) : null);
   return (
     <Page>
       <Card bordered={false}>
         <Descriptions layout="vertical" bordered>
-          <Descriptions.Item label="标题">AIgc</Descriptions.Item>
-          <Descriptions.Item label="描述" span={2}>我喜欢的智能</Descriptions.Item>
+          <Descriptions.Item label="标题">{list?.title}</Descriptions.Item>
+          <Descriptions.Item label="描述" span={2}>{list?.describe}</Descriptions.Item>
           <Descriptions.Item label="正文" span={3}>
-            AIGC，全称为AI-Generated Content，是指基于人工智能技术自动生成各种类型的内容，如文本、图像、声音、视频等。它利用已有数据寻找规律，并自
-            动生成内容，既是一种内容分类方式，也是一种内容生产方式，还是一种用于内容自动生成的一类技术集合。
-            AIGC涵盖了人工智能、计算机图形学和深度学习等领域技术的综合平台，其目的在于将这些技术结合起来，实现更加高效、智能化的图像识别和处理，提升
-            人机交互的用户体验。与百度AI文心一言和ChatGPT相比，AIGC主要侧重于图像识别与处理等技术，而百度AI文心一言则更侧重于自然语言处理。
-            AIGC在多个领域具有广泛的应用。在智能安防领域，它可以通过图像识别技术实现人脸识别、车辆识别等功能，提升安全监控的效率和准确性。在游戏和
-            虚拟现实领域，AIGC可以实现高度逼真的图像渲染和物理模拟，提升游戏体验。此外，AIGC还可以参与内容共创，推动媒体融合转型，参与制作全流程，推
-            进虚实交融，提供发展动能，助力产业加快升级等。
-            具体来说，AIGC可以生成高质量、独特的图像作品，包括绘画、插图、设计、艺术品等；可以创作音乐、歌曲、声音效果或其他音频内容，提供新颖和多样
-            化的音乐体验；可以生成影片、动画、短视频等，具备专业级的画面效果和剧情呈现；还可以生成3D模型、场景、动画等，为游戏开发、虚拟现实和影视制
-            作提供多样化的创意和设计。
-            然而，尽管AIGC具有强大的创造力，但仍然需要人类的指导和监督，以确保创作的质量和道德性。在创作过程中，AIGC会遵循人类设定的规则和算法，但其
-            结果仍然需要人类进行审查和评估，以确保内容符合社会价值观和法律法规。
-            总的来说，AIGC是一种强大的内容生成工具，其应用前景广阔，将在未来为人们的生活带来更多便利和乐趣。
-          </Descriptions.Item>
-          <Descriptions.Item label="标签">
-            <Tag color="red">ai</Tag>
-            <Tag color="red">智能</Tag>
-          </Descriptions.Item>
-          <Descriptions.Item label="横向封面图">
-            <Image src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp" width={80} />
-          </Descriptions.Item>
-          <Descriptions.Item label="纵向封面图">
-            <Image src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp" width={80} />
+            <div dangerouslySetInnerHTML={{ __html: list?.content }} />
           </Descriptions.Item>
           <Descriptions.Item label="图片">
-            <Image src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" width={80} />
-          </Descriptions.Item>
-          <Descriptions.Item label="分类">
-            人工智能
-          </Descriptions.Item>
-          <Descriptions.Item label="链接地址">
-            https://www.baidu.com/
-          </Descriptions.Item>
-          <Descriptions.Item label="附件" span={3}>
-
+            {
+              list?.images ? JSON.parse(list?.images).map((item, index) => (
+                <Image key={index} src={`${prefix}` + item} width={80} />
+              )) : null
+            }
+          </Descriptions.Item>
+          <Descriptions.Item label="横向封面">
+            {
+              list?.coverHorizontal ? <Image src={`${prefix}` + list?.coverHorizontal} width={80} /> : null
+            }
+          </Descriptions.Item>
+          <Descriptions.Item label="纵向封面">
+            {
+              list?.coverVertical ? <Image src={`${prefix}` + list?.coverVertical} width={80} /> : null
+            }
           </Descriptions.Item>
+          <Descriptions.Item label="标签">
+            {
+              list?.tags ? JSON.parse(list?.tags).map((item, index) => (
+                <Tag color="red" key={index}>{item}</Tag>
+              )) : null
+            }
+          </Descriptions.Item>
+          <Descriptions.Item label="作者">{list?.author}</Descriptions.Item>
+          <Descriptions.Item label="链接地址">{list?.link}</Descriptions.Item>
+          <Descriptions.Item label="附件"></Descriptions.Item>
         </Descriptions>
       </Card>
     </Page>

src/pages/article/Edit.jsx

@@ -1,49 +1,83 @@
 import React, { useRef, useState } from 'react'
-import { Button, Input, Form } from 'antd'
+import { Button, Input, Form, Select } from 'antd'
 import Edit from '@/components/Page/Edit'
 import Wangeditor from '@/components/Wangeditor'
-import UploadFile from '@/components/Upload/UploadFile'
+import UploadFiles from '@/components/Upload/UploadFiles'
 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";
+
+const request = {
+  get: getTaPostById,
+  save: postTaPost,
+  update: putTaPost,
+}
 
 export default (props) => {
 
-  const onFinish = () => { }
+  const transform = (_, item) => {
+    let images = item?.images ? JSON.stringify(item?.images) : null
+    let taAttachList = item?.taAttachList ? item?.taAttachList : []
+    let tags = item?.tags ? JSON.stringify(item?.tags) : null
+    let data = { ...item, images: images, taAttachList: taAttachList, tags: tags }
+    return data
+  }
+
+  const convertValue = (formData) => {
+    let tags = formData?.tags ? JSON.parse(formData?.tags) : null
+    let images = formData?.images ? JSON.parse(formData?.images) : null
+    return { ...formData, tags: tags, images: images }
+  }
 
   return (
     <Edit
-      onFinish={onFinish}
-    >
-      <Form.Item label="文章标题" required>
-        <Input placeholder="请输入" />
-      </Form.Item>
-      <Form.Item label="文章描述">
-        <Input placeholder="请输入" />
-      </Form.Item>
-      <Form.Item label="文章正文">
-        <Wangeditor />
-      </Form.Item>
-      <Form.Item label="文章标签">
-        <Input placeholder="请输入" />
-      </Form.Item>
-      <Form.Item label="横向封面图">
-        <UploadImages ratio={0.5} />
-      </Form.Item>
-      <Form.Item label="纵向封面图">
-        <UploadImages ratio={'100:200'} />
-      </Form.Item>
-      <Form.Item label="文章图片">
-        <UploadImageList />
-      </Form.Item>
-      <Form.Item label="文章分类">
-        <Input placeholder="请输入" />
-      </Form.Item>
-      <Form.Item label="链接地址">
-        <Input placeholder="请输入" />
-      </Form.Item>
-      <Form.Item label="文章附件">
-        <UploadFile />
-      </Form.Item>
-    </Edit>
+      rowKey="postId"
+      request={request}
+      transform={transform}
+      convertValue={convertValue}
+      // onValuesChange={console.log}
+      renderItems={() => (
+        <>
+          <Form.Item label="文章标题" required name="title">
+            <Input placeholder="请输入" />
+          </Form.Item>
+          <Form.Item label="文章描述" name="describe">
+            <Input placeholder="请输入" />
+          </Form.Item>
+          <Form.Item label="文章正文" name="content">
+            <Wangeditor />
+          </Form.Item>
+          <Form.Item label="文章图片" name="images">
+            <UploadImageList />
+          </Form.Item>
+          <Form.Item label="横向封面" name="coverHorizontal">
+            <UploadImages ratio={0.5} />
+          </Form.Item>
+          <Form.Item label="纵向封面" name="coverVertical">
+            <UploadImages ratio={'100:200'} />
+          </Form.Item>
+
+          <Form.Item label="文章标签" name="tags">
+            <Select mode="tags" tokenSeparators={[',']} placeholder="请输入" />
+          </Form.Item>
+          <Form.Item label="文章作者" name="author">
+            <Input placeholder="请输入" />
+          </Form.Item>
+          <Form.Item label="链接地址" name="link">
+            <Input placeholder="请输入" />
+          </Form.Item>
+          <Form.Item label="上传附件" name="taAttachList">
+            <UploadFiles
+              rowKey={x => x.attachUrl}
+              rowLabel={x => x.attachName}
+              transform={x => ({ attachUrl: x.url, attachName: x.name, fileType: x.fileType })}
+              onDownload={x => downladFile(x)}
+              onPreview={x => previewFile(x)}
+            />
+          </Form.Item>
+        </>
+      )}
+    />
   )
 }

src/pages/article/index.jsx

@@ -2,8 +2,10 @@ import React, { useRef, useState } from 'react'
 import List from '@/components/Page/List'
 import { Button, Tag, Image } from 'antd'
 import { useNavigate } from 'react-router-dom'
+import { getTaPost, deleteTaPost } from "@/services/taPost";
 
 export default (props) => {
+  const actionRef = useRef();
   const navigate = useNavigate();
 
   const columns = [
@@ -21,77 +23,80 @@ export default (props) => {
     {
       title: '正文',
       dataIndex: 'content',
-      ellipsis: { showTitle: false },
+      render: (_, it) =>
+        <div style={{ width: '9vw' }}>
+          <div dangerouslySetInnerHTML={{ __html: it?.content }} style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }} />
+        </div>,
       search: false,
     },
     {
-      title: '标签',
-      dataIndex: 'tag',
-      search: false,
-      render: (_, it) => <Tag color="red">{it?.tag}</Tag>
-    },
-    {
-      title: '横向封面图',
-      dataIndex: 'HImg',
-      render: (_, it) => <Image src={it?.HImg} width={80} />,
-      search: false,
-    },
-    {
-      title: '纵向封面图',
-      dataIndex: 'VImg',
-      render: (_, it) => <Image src={it?.VImg} width={80} />,
+      title: '图片',
+      dataIndex: 'images',
+      render: (_, it) => it?.images ? <Image src={`${prefix}` + JSON.parse(it?.images)[0]} width={80} /> : null,
       search: false,
     },
+    // {
+    //   title: '横向封面',
+    //   dataIndex: 'coverHorizontal',
+    //   render: (_, it) => it?.coverHorizontal ? <Image src={`${prefix}` + it?.coverHorizontal} width={80} /> : null,
+    //   search: false,
+    // },
+    // {
+    //   title: '纵向封面',
+    //   dataIndex: 'coverVertical',
+    //   render: (_, it) => it?.coverVertical ? <Image src={`${prefix}` + it?.coverVertical} width={80} /> : null,
+    //   search: false,
+    // },
     {
-      title: '图片',
-      dataIndex: 'img',
-      render: (_, it) => <Image src={it?.img} width={80} />,
+      title: '标签',
+      dataIndex: 'tags',
       search: false,
+      render: (_, it) => it?.tags ? JSON.parse(it?.tags).map(it => <Tag color="red">{it}</Tag>) : null
     },
     {
-      title: '分类',
-      dataIndex: 'classify'
+      title: '作者',
+      dataIndex: 'author'
     },
     {
-      title: '链接地址',
+      title: '链接',
       dataIndex: 'link',
       ellipsis: true,
-      render: (_, it) => <a href="#">{it?.link}</a>,
+      render: (_, it) =>
+        <div style={{ width: '8vw' }}>
+          <div style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}><a href="#">{it?.link}</a></div>
+        </div>,
       search: false,
     },
-    {
-      title: '附件',
-      dataIndex: 'attachment',
-      search: false,
-    }
+    // {
+    //   title: '附件',
+    //   dataIndex: 'attachment',
+    //   search: false,
+    // }
   ]
 
-  const dataSource = [
-    {
-      id: 1,
-      title: 'AIgc',
-      describe: '我喜欢的智能',
-      content: 'AIGC，全称为AI-Generated Content，是指基于人工智能技术自动生成各种类型的内容，如文本、图像、声音、视频等。它利用已有数据寻找规律，并自动生成内容，既是一种内容分类方式，也是一种内容生产方式，还是一种用于内容自动生成的一类技术集合。AIGC涵盖了人工智能、计算机图形学和深度学习等领域技术的综合平台，其目的在于将这些技术结合起来，实现更加高效、智能化的图像识别和处理，提升人机交互的用户体验。与百度AI文心一言和ChatGPT相比，AIGC主要侧重于图像识别与处理等技术，而百度AI文心一言则更侧重于自然语言处理。AIGC在多个领域具有广泛的应用。在智能安防领域，它可以通过图像识别技术实现人脸识别、车辆识别等功能，提升安全监控的效率和准确性。在游戏和虚拟现实领域，AIGC可以实现高度逼真的图像渲染和物理模拟，提升游戏体验。此外，AIGC还可以参与内容共创，推动媒体融合转型，参与制作全流程，推进虚实交融，提供发展动能，助力产业加快升级等。具体来说，AIGC可以生成高质量、独特的图像作品，包括绘画、插图、设计、艺术品等；可以创作音乐、歌曲、声音效果或其他音频内容，提供新颖和多样化的音乐体验；可以生成影片、动画、短视频等，具备专业级的画面效果和剧情呈现；还可以生成3D模型、场景、动画等，为游戏开发、虚拟现实和影视制作提供多样化的创意和设计。然而，尽管AIGC具有强大的创造力，但仍然需要人类的指导和监督，以确保创作的质量和道德性。在创作过程中，AIGC会遵循人类设定的规则和算法，但其结果仍然需要人类进行审查和评估，以确保内容符合社会价值观和法律法规。总的来说，AIGC是一种强大的内容生成工具，其应用前景广阔，将在未来为人们的生活带来更多便利和乐趣。',
-      tag: 'ai',
-      HImg: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
-      VImg: 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
-      img: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
-      classify: '人工智能',
-      link: 'https://www.baidu.com/',
-    }
-  ]
+  const onEdit = (it) => {
+    navigate(`/article/edit?id=${it.postId}`)
+  }
+
+  const onDelete = (it) => {
+    deleteTaPost(it.postId).then(res => {
+      actionRef.current.reload();
+    })
+  }
 
-  const onEdit = (_, it) => {
-    navigate(`/article/edit?id=${'it.id'}`)
+  const onDetail = (it) => {
+    navigate(`/article/detail?id=${it.postId}`)
   }
 
   return (
     <List
-      rowKey="id"
+      rowKey="postId"
       columns={columns}
-      dataSource={dataSource}
+      actionRef={actionRef}
       onEdit={onEdit}
-      request={{}}
+      onDelete={onDelete}
+      // onDetail={onDetail}
+      request={getTaPost}
       toolBarRender={() => [
         <Button
           key="2"
@@ -103,17 +108,6 @@ export default (props) => {
           新增
         </Button>
       ]}
-      columnOptionRender={() => [
-        <Button
-          key="3"
-          type="link"
-          onClick={() => {
-            navigate('/article/detail')
-          }}
-        >
-          详情
-        </Button>,
-      ]}
     />
   )
 }

src/pages/classify/components/Form.jsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { Button, Card, Form, Input, InputNumber, Select } from "antd";
+import useBool from "@/utils/hooks/useBool";
+import { postTdCategory, putTdCategory } from "@/services/tdCategory";
+import { formItemLayout, tailFormItemLayout } from "@/utils/form";
+
+export default (props) => {
+  const { category, list, parentId, onChange } = props;
+
+  const [submiting, startSubmit, cancelSubmit] = useBool();
+  const [form] = Form.useForm();
+
+  const onFinish = (values) => {
+    startSubmit();
+
+    if (category?.categoryId) {
+      // 修改
+      putTdCategory(category.categoryId, values)
+        .then((res) => {
+          cancelSubmit();
+          onChange(res);
+        })
+        .catch(() => {
+          cancelSubmit();
+        });
+    } else {
+      // 新增
+      postTdCategory(values)
+        .then((res) => {
+          cancelSubmit();
+          onChange(res);
+        })
+        .catch(() => {
+          cancelSubmit();
+        });
+    }
+  };
+
+  React.useEffect(() => {
+
+    form.resetFields();
+    if (category) {
+      form.setFieldsValue(category);
+    } else {
+      form.setFieldValue("parentId", parentId);
+    }
+
+  }, [category, parentId]);
+
+  return (
+    <Form
+      form={form}
+      {...formItemLayout}
+      style={{ maxWidth: "800px" }}
+      onFinish={onFinish}
+    >
+      <Form.Item
+        name="sortNo"
+        label="序号"
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        name="categoryName"
+        label="分类"
+        rules={[{ required: true, message: "请填写分类名称" }]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item name="parentId" label="上级分类">
+        <Select disabled={true}>
+          {(list || []).map((x) => (
+            <Select.Option key={x.categoryId}>{x.categoryName}</Select.Option>
+          ))}
+        </Select>
+      </Form.Item>
+
+      <Form.Item name="status" label="状态">
+        <Select style={{ width: "100%" }} placeholder="请选择状态">
+          <Select.Option value={0}>不正常</Select.Option>
+          <Select.Option value={1}>正常</Select.Option>
+        </Select>
+      </Form.Item>
+      <Form.Item {...tailFormItemLayout}>
+        <Button loading={submiting} type="primary" htmlType="submit">
+          保存
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};

src/pages/classify/index.jsx

@@ -0,0 +1,159 @@
+import React from "react";
+import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
+import { Button, Card, Row, Col, Tree, Tooltip, Popconfirm, Spin } from "antd";
+import Page from "@/components/Page";
+import { getTdCategory, deleteTdCategory } from "@/services/tdCategory";
+import { arr2Tree } from "@/utils/array";
+import useBool from "@/utils/hooks/useBool";
+import Form from "./components/Form";
+import { useModel } from "@/store";
+
+export default (props) => {
+  const { user } = useModel("user");
+
+  const [loading, startLoading, stopLoading] = useBool();
+  const [list, setList] = React.useState([]);
+  const [current, setCurrernt] = React.useState();
+  const [parentId, setParentId] = React.useState();
+
+  const [parentList, treeData] = React.useMemo(() => {
+    const plist = [{ categoryId: "-1", name: "根节点" }].concat(list);
+    const [tree] = arr2Tree(
+      (list || []).map((x) => ({
+        title: x.categoryName,
+        key: x.categoryId,
+        parentId: x.parentId,
+        raw: x,
+      }))
+    );
+
+    return [plist, tree];
+  }, [list]);
+
+  const changeCurrent = (category) => {
+    setCurrernt(category);
+    setParentId(category?.categoryPId || "-1");
+  };
+
+  const onSelect = (selectedKeys, e) => {
+    changeCurrent(e.node.raw);
+  };
+
+  const onClick = (category) => {
+    changeCurrent(category);
+  };
+
+  const onAdd = (parent = "-1") => {
+    setParentId(parent);
+    setCurrernt();
+  };
+
+  const onDelete = (category) => {
+    deleteTdCategory(category.categoryId).then(() => {
+      queryList();
+    });
+  };
+
+  const queryList = React.useCallback(() => {
+    startLoading();
+    getTdCategory({ pageSize: 500 }).then((res) => {
+      setList(res.records || []);
+      stopLoading();
+    });
+  }, []);
+
+  const onFormChange = () => {
+    // 重新查一次数据
+    queryList();
+  };
+
+  React.useEffect(() => {
+    queryList();
+  }, []);
+
+  return (
+    <Page>
+      <Row gutter={24}>
+        <Col span={8} style={{ overflow: "hidden" }}>
+          <Card
+            title="分类"
+            onSelect={onSelect}
+            extra={
+              // user.orgId === "1" && (
+              <Button type="link" onClick={() => onAdd()}>
+                新增
+              </Button>
+              // )
+            }
+          >
+            {/* <Spin spinning={loading}> */}
+            <Tree
+              blockNode
+              defaultExpandParent={true}
+              treeData={treeData}
+              titleRender={(node) => (
+                <div
+                  style={{ display: "flex" }}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <div
+                    style={{
+                      lineHeight: "32px",
+                      flex: 1,
+                      width: 0,
+                    }}
+                    onClick={() => onClick(node.raw)}
+                  >
+                    <div
+                      style={{
+                        overflow: "hidden",
+                        whiteSpace: "nowrap",
+                        textOverflow: "ellipsis",
+                      }}
+                    >
+                      {node.title}
+                    </div>
+                  </div>
+                  <div style={{ width: "80px", flex: "none" }}>
+                    <Tooltip title="新增子节点">
+                      <Button
+                        type="link"
+                        icon={<PlusOutlined />}
+                        onClick={() => onAdd(node.raw.categoryId)}
+                      ></Button>
+                    </Tooltip>
+                    <Tooltip title="删除节点">
+                      <Popconfirm
+                        title="确认进行删除操作?"
+                        onConfirm={() => onDelete(node.raw)}
+                      >
+                        <Button
+                          type="link"
+                          danger
+                          icon={<DeleteOutlined />}
+                        ></Button>
+                      </Popconfirm>
+                    </Tooltip>
+                  </div>
+                </div>
+              )}
+            />
+            {/* </Spin> */}
+          </Card>
+        </Col>
+        <Col span={16}>
+          {parentId && (
+            <Card>
+              <Form
+                category={current}
+                parentId={parentId}
+                list={parentList}
+                onChange={onFormChange}
+              />
+            </Card>
+          )}
+        </Col>
+      </Row>
+    </Page>
+  );
+};

src/pages/login/LoginForm.jsx

@@ -21,7 +21,6 @@ export default (props) => {
         setLoading(false);
       })
       .catch((err) => {
-        // console.log('----err--', err);
         setLoading(false);
       });
 

src/routes/routes.jsx

@@ -2,8 +2,8 @@ import {
   UserOutlined,
   SolutionOutlined,
   FileTextOutlined,
-  HeartOutlined,
-  HourglassTwoTone,
+  ContainerOutlined,
+  EllipsisOutlined,
   StopFilled,
 } from '@ant-design/icons'
 import { Outlet, Navigate } from 'react-router-dom'
@@ -13,6 +13,8 @@ import Page404 from '@/pages/404'
 import Article from '@/pages/article'
 import ArticleEdit from '@/pages/article/Edit'
 import ArticleDetail from '@/pages/article/detail'
+import Classify from '@/pages/classify'
+import PreviewObj from "@/pages/PreviewObj";
 
 // import RoleEdit from "@/pages/role/Edit";
 /**
@@ -38,7 +40,7 @@ export const authRoutes = [
     element: <Article />,
     meta: {
       title: '文章管理',
-      icon: <UserOutlined />,
+      icon: <ContainerOutlined />,
     },
   },
   {
@@ -49,12 +51,20 @@ export const authRoutes = [
       hideInMenu: true
     },
   },
+  // {
+  //   path: 'article/detail',
+  //   element: <ArticleDetail />,
+  //   meta: {
+  //     title: '文章详情',
+  //     hideInMenu: true
+  //   },
+  // },
   {
-    path: 'article/detail',
-    element: <ArticleDetail />,
+    path: 'classify',
+    element: <Classify />,
     meta: {
-      title: '文章详情',
-      hideInMenu: true
+      title: '分类管理',
+      icon: <EllipsisOutlined />,
     },
   }
 ]
@@ -70,6 +80,10 @@ export const defaultRoutes = [
       },
     ],
   },
+  {
+    path: "/previewobj",
+    element: <PreviewObj />,
+  },
   {
     path: '/login',
     element: <Login />,

src/services/login.js

@@ -33,4 +33,4 @@ export const postQrCode = (id, params) =>
 /**
 * 获取当前用户信息
 */
-export const currentUser = (params) => request("/api/admin/current", { params })
+export const currentUser = (params) => request("/api/sysUser/current", { params })

src/services/taPost.js

@@ -0,0 +1,26 @@
+import request from "@/utils/request";
+
+/*
+ * 分页查询
+ */
+export const getTaPost = (params) => request('/api/taPost', { params });
+
+/*
+ * 新增数据
+ */
+export const postTaPost = (data) => request('/api/taPost', { data, method: 'post' });
+
+/*
+ * 通过ID查询单条数据
+ */
+export const getTaPostById = (id) => request(`/api/taPost/${id}`);
+
+/*
+ * 更新数据
+ */
+export const putTaPost = (id, data) => request(`/api/taPost/${id}`, { data, method: 'put' });
+
+/*
+ * 通过主键删除数据
+ */
+export const deleteTaPost = (id) => request(`/api/taPost/${id}`, { method: 'delete' });

src/services/tdCategory.js

@@ -0,0 +1,26 @@
+import request from "@/utils/request";
+
+/*
+ * 分页查询
+ */
+export const getTdCategory = (params) => request('/api/tdCategory', { params });
+
+/*
+ * 新增数据
+ */
+export const postTdCategory = (data) => request('/api/tdCategory', { data, method: 'post' });
+
+/*
+ * 通过ID查询单条数据
+ */
+export const getTdCategoryById = (id) => request(`/api/tdCategory/${id}`);
+
+/*
+ * 更新数据
+ */
+export const putTdCategory = (id, data) => request(`/api/tdCategory/${id}`, { data, method: 'put' });
+
+/*
+ * 通过主键删除数据
+ */
+export const deleteTdCategory = (id) => request(`/api/tdCategory/${id}`, { method: 'delete' });

src/store/index.js

@@ -6,7 +6,7 @@ import usePolicy from "./models/useOssPolicy";
 const store = createStore({
   system: useSystem,
   user: useUser,
-  policy: usePolicy,
+  // policy: usePolicy,
 });
 
 export default store

src/store/models/user.js

@@ -5,38 +5,34 @@ import { currentUser } from "@/services/login";
 import { getAuthedRoutes } from "@/routes/permissions";
 
 export default function useUser () {
-  const [user, setUser] = useState({ userId: 1, userName: "admin" });
-  const [login, setLogin] = useState(false);
+  const [user, setUser] = useState({ name: 'admin', userId: 123 });
+  const [isLogin, setIsLogin] = useState(true);
   const menusRef = useRef();
   const routesRef = useRef();
   const dbMenusRef = useRef([]);
 
   const getCurrentUser = (params) =>
     new Promise((resolve, reject) => {
-      // currentUser(params)
-      //   .then((res) => {
-      // dbMenusRef.current = res?.menuList || [];
-      // const permissions = dbMenusRef.current.map((x) => x.menuCode);
+      // { name: 'admin', userId: 123 }
+      currentUser(params)
+        .then((res) => {
+          dbMenusRef.current = res?.menuList || [];
+          // const permissions = dbMenusRef.current.map((x) => x.menuCode);
 
-      // // authRoutes 是所有待验证授权的路由
-      // // authedRoutes 是已经被授权的路由
-      // const authedRoutes = getAuthedRoutes(authRoutes, permissions || []);
+          // authRoutes 是所有待验证授权的路由
+          // authedRoutes 是已经被授权的路由
+          const authedRoutes = getAuthedRoutes(authRoutes);
 
-      // menusRef.current = getMenuItems(authedRoutes);
-      // routesRef.current = mergeAuthRoutes(defaultRoutes, authedRoutes);
-
-      //   setUser(res);
-      //   resolve();
-      // })
-      // .catch(reject);
+          menusRef.current = getMenuItems(authedRoutes);
+          routesRef.current = mergeAuthRoutes(defaultRoutes, authedRoutes);
+          setUser(res);
+          setIsLogin(true)
+          resolve();
+        })
+        .catch(reject);
     });
-
-  // authRoutes 是所有待验证授权的路由
-  // authedRoutes 是已经被授权的路由
-  const authedRoutes = getAuthedRoutes(authRoutes);
-  menusRef.current = getMenuItems(authedRoutes);
-  routesRef.current = mergeAuthRoutes(defaultRoutes, authedRoutes);
-
+  menusRef.current = getMenuItems(authRoutes);
+  console.log('-------->isLogin', isLogin);
   return {
     user,
     setUser,
@@ -44,6 +40,6 @@ export default function useUser () {
     menus: menusRef.current || [],
     routes: routesRef.current || [],
     dbMenus: dbMenusRef.current,
-    login,
+    isLogin,
   };
 }

src/utils/attach.js

@@ -0,0 +1,17 @@
+
+export const downladFile = (attach) => {
+  const ele = document.createElement('a');
+  ele.href = getRealPath(attach.attachUrl);
+  ele.download = attach.attachName;
+  ele.target = '_blank';
+  ele.click();
+}
+
+export const previewFile = (attach) => {
+  const { pathname, hash } = window.location;
+  const ele = document.createElement('a');
+  const searchParams = '?url=' + encodeURIComponent(getRealPath(attach.attachUrl)) + '&type=' + encodeURIComponent(attach.fileType);
+  ele.href = pathname + '#/previewobj' + searchParams;
+  ele.target = '_blank';
+  ele.click();
+}

vite.config.js

@@ -11,7 +11,7 @@ export default defineConfig({
     host: "0.0.0.0",
     proxy: {
       "/api": {
-        target: "http://192.168.89.25:7009",
+        target: "http://192.168.89.13:8080",
         changeOrigin: true,
       },
     },