feat: 图片编辑增加上传图片

packages/server/src/main.ts

@@ -3,18 +3,19 @@ import { AppModule } from './app/app.module';
 import { initConfig } from './config';
 import { ConfigService } from '@nestjs/config';
 
+process.env.TZ = 'Asia/Shanghai';
+
 async function bootstrap() {
   initConfig();
 
   const app = await NestFactory.create(AppModule, {
     cors: true,
-    bodyParser: false,
   });
 
   const configService = app.get(ConfigService);
   const PORT = configService.get('PORT');
 
-  await app.listen("9190");
+  await app.listen('9190');
 
   console.log(`Server application is up and running on port ${9190}`);
 }

packages/web/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @pear-rec/web
 
+## 1.3.10
+
+feat: 图片编辑增加上传图片
+
 ## 1.3.9
 
 feat: 修改GIF

packages/web/src/components/records/RecordsContent.tsx

@@ -6,6 +6,7 @@ import {
   CameraOutlined,
   VideoCameraOutlined,
 } from '@ant-design/icons';
+import dayjs from 'dayjs';
 import { useApi } from '../../api';
 import { useRecordApi } from '../../api/record';
 import { eventEmitter } from '../../util/bus';
@@ -126,7 +127,7 @@ const RecordAudioCard = forwardRef(() => {
   }
 
   function getAvatar(record: any) {
-    if (record.fileType == 'ss' || record.fileType == 'eg') {
+    if (record.fileType == 'ss' || record.fileType == 'eg' || record.fileType == 'ei') {
       return <ScissorOutlined />;
     }
     if (record.fileType == 'rs') {
@@ -219,7 +220,12 @@ const RecordAudioCard = forwardRef(() => {
                 }
                 description={
                   <span>
-                    <span dangerouslySetInnerHTML={{ __html: record.createdAt }}></span>{' '}
+                    <span
+                      className="createdAt"
+                      dangerouslySetInnerHTML={{
+                        __html: dayjs(record.createdAt).format('YYYY-MM-DD HH:mm:ss'),
+                      }}
+                    ></span>
                     <span className="openFolder" onClick={() => openFilePath(record.filePath)}>
                       在文件夹中显示
                     </span>

packages/web/src/components/upload/UploadImg.tsx

@@ -1,34 +1,35 @@
-import React, { useImperativeHandle, useRef, forwardRef } from "react";
-import { useTranslation } from "react-i18next";
-import { Space, Button } from "antd";
+import React, { useImperativeHandle, useRef, forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Space, Button } from 'antd';
 
 function UploadImg(props) {
-	const { t } = useTranslation();
-	const inputRef = useRef(null);
+  const { t } = useTranslation();
+  const { className, style, children } = props;
+  const inputRef = useRef(null);
 
-	function handleUpload() {
-		inputRef.current.click();
-	}
+  function handleUpload() {
+    inputRef.current.click();
+  }
 
-	function handleUploadImg(event) {
-		const files = event.target.files;
-		props.handleUploadImg(files);
-	}
+  function handleUploadImg(event) {
+    const files = event.target.files;
+    props.handleUploadImg(files);
+  }
 
-	return (
-		<Space>
-			<Button type="primary" onClick={handleUpload}>
-				图片
-			</Button>
-			<input
-				type="file"
-				accept="image/png,image/jpeg,.webp"
-				className="inputRef hide"
-				ref={inputRef}
-				onChange={handleUploadImg}
-			/>
-		</Space>
-	);
+  return (
+    <Space className={...className} style={...style}>
+      <Button type="primary" onClick={handleUpload}>
+      {children || '图片'}
+      </Button>
+      <input
+        type="file"
+        accept="image/png,image/jpeg,.webp"
+        className="inputRef hide"
+        ref={inputRef}
+        onChange={handleUploadImg}
+      />
+    </Space>
+  );
 }
 
 export default UploadImg;

packages/web/src/pages/editImage/index.module.scss

@@ -1,12 +1,17 @@
 .container {
-	height: 100vh;
-	width: 100%;
-	position: relative;
-	:global {
-		.save {
-			position: absolute;
-			right: 50px;
-			top: 10px;
-		}
-	}
+  height: 100vh;
+  width: 100%;
+  position: relative;
+  :global {
+    .upload {
+      position: absolute;
+      left: 50px;
+      top: 10px;
+    }
+    .save {
+      position: absolute;
+      right: 50px;
+      top: 10px;
+    }
+  }
 }

packages/web/src/pages/editImage/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Modal } from 'antd';
 import ImageEditor from 'tui-image-editor';
+import UploadImg from '../../components/upload/UploadImg';
 import ininitApp from '../../pages/main';
 import { useApi } from '../../api';
 import { useUserApi } from '../../api/user';
@@ -168,13 +169,18 @@ const EditImage = () => {
   const api = useApi();
   const userApi = useUserApi();
   const userRef = useRef({} as any);
+  const [imgUrl, setImgUrl] = useState<string>('');
   const [instance, setInstance] = useState<any>('');
 
   useEffect(() => {
     init();
     userRef.current.id || getCurrentUser();
   }, []);
 
+  useEffect(() => {
+    imgUrl && initImageEditor();
+  }, [imgUrl]);
+
   async function getCurrentUser() {
     try {
       const res = (await userApi.getCurrentUser()) as any;
@@ -189,10 +195,14 @@ const EditImage = () => {
   function init() {
     const paramsString = location.search;
     const searchParams = new URLSearchParams(paramsString);
-    let imgUrl = searchParams.get('imgUrl');
-    if (imgUrl.substring(0, 4) != 'blob') {
-      imgUrl = `${window.baseURL}file?url=${imgUrl}`;
+    let _imgUrl = searchParams.get('imgUrl');
+    if (_imgUrl.substring(0, 4) != 'blob') {
+      _imgUrl = `${window.baseURL}file?url=${_imgUrl}`;
     }
+    setImgUrl(_imgUrl);
+  }
+
+  function initImageEditor() {
     const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
       includeUI: {
         loadImage: {
@@ -270,9 +280,18 @@ const EditImage = () => {
     ]);
   }
 
+  function handleUploadImg(files) {
+    const selectedFile = files[0];
+    const _imgUrl = window.URL.createObjectURL(selectedFile);
+    setImgUrl(_imgUrl);
+  }
+
   return (
     <div className={styles.container}>
       <div id="tui-image-editor"></div>
+      <UploadImg className="upload" handleUploadImg={handleUploadImg}>
+        上传
+      </UploadImg>
       <Button className="save" type="primary" onClick={save}>
         {t('editImage.save')}
       </Button>

packages/web/src/pages/records/index.module.scss

@@ -26,6 +26,7 @@
       .openFolder {
         color: #1677ff;
         cursor: pointer;
+        margin-left: 10px;
       }
     }
   }