matter image

src/common/model/matter/Matter.ts

@@ -438,6 +438,7 @@ export default class Matter extends BaseEntity {
 
     //验证是否满足过滤器
     if (!this.validateFileType()) {
+      MessageBoxUtil.error('文件类型不满足，请重试');
       return;
     }
 

src/pages/matter/List.tsx

@@ -42,14 +42,14 @@ export default class List extends TankComponent<IProps, IState> {
   searchText: string | null = null;
   //获取分页的一个帮助器
   pager = new Pager<Matter>(this, Matter, 100);
-  //移动的目标文件夹
-  targetMatterUuid: string | null = null;
   user = Moon.getSingleton().user;
   preference = Moon.getSingleton().preference;
+  // 导演
   director = new Director();
-  share = new Share();
   //当前面包屑模型数组。
   breadcrumbModels: BreadcrumbModel[] = []
+  // 分享
+  share =  new Share();
 
   newMatterRef = React.createRef<MatterPanel>();
 

src/pages/matter/widget/MatterImage.less

@@ -0,0 +1,31 @@
+.matter-image {
+  .composite-box {
+    display: flex;
+    .content {
+      display: flex;
+      flex-grow: 1;
+      position: relative;
+      .text {
+        display: flex;
+        justify-content: center;
+        align-content: center;
+      }
+    }
+    .ant-upload {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+    }
+    .border-short {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .handle {
+      flex-shrink: 0;
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+}

src/pages/matter/widget/MatterImage.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import TankComponent from "../../../common/component/TankComponent";
+import Moon from "../../../common/model/global/Moon";
+import Matter from "../../../common/model/matter/Matter";
+import ImagePreviewer from "../../widget/previewer/ImagePreviewer";
+import { Input, Upload, Button } from "antd";
+import UploadMatterPanel from "./UploadMatterPanel";
+import "./MatterImage.less";
+import MessageBoxUtil from "../../../common/util/MessageBoxUtil";
+import SafeUtil from "../../../common/util/SafeUtil";
+
+interface IProps {
+  value?: string;
+  onChange?: (value: string) => any;
+  preview?: boolean; //上传的照片是否需要预览
+  previewWidth?: number;
+  filter?: string;
+  uploadHint?: string;
+}
+
+interface IState {}
+
+export default class MatterImage extends TankComponent<IProps, IState> {
+  // 是否手动上传模式
+  manual = false;
+  matter = new Matter(this);
+  user = Moon.getSingleton().user;
+
+  constructor(props: IProps) {
+    super(props);
+  }
+
+  changeLink = (e: any) => {
+    SafeUtil.safeCallback(this.props.onChange)(e.target.value);
+  };
+
+  triggerUpload = (fileObj: any) => {
+    const { file } = fileObj;
+    const { filter = "image", uploadHint = "" } = this.props;
+    if (file) {
+      if (this.user.sizeLimit >= 0 && file.size > this.user.sizeLimit) {
+        MessageBoxUtil.error("文件大小超过了限制");
+        return;
+      }
+      this.matter.assign({
+        uploadHint,
+        filter,
+        file,
+        puuid: "root",
+        privacy: false,
+        dir: false,
+        alien: true,
+        userUuid: this.user.uuid,
+      });
+      this.matter.httpUpload(
+        () => {
+          SafeUtil.safeCallback(this.props.onChange)(
+            this.matter.getPreviewUrl()
+          );
+          this.matter = new Matter();
+          this.updateUI();
+        },
+        () => this.updateUI()
+      );
+    }
+  };
+
+  toggleHandle = () => {
+    this.manual = !this.manual;
+    this.updateUI();
+  };
+
+  render() {
+    const { manual, matter } = this;
+    const {
+      value,
+      preview = true,
+      previewWidth = 200,
+      uploadHint,
+    } = this.props;
+
+    return (
+      <div className="matter-image">
+        <div className="tiny-block">
+          {preview && value ? (
+            <img
+              className="p10 mb10 bg-white br5 border"
+              style={{ width: `${previewWidth}px` }}
+              src={value}
+              onClick={() => ImagePreviewer.showSinglePhoto(value)}
+            />
+          ) : null}
+        </div>
+        <div className="composite-box">
+          {manual ? (
+            <Input
+              className="content"
+              placeholder="请填写图片链接"
+              value={value}
+              onChange={this.changeLink}
+            />
+          ) : (
+            <Upload
+              className="content"
+              customRequest={this.triggerUpload}
+              showUploadList={false}
+            >
+              <Button className="wp100 border-short">选择图片</Button>
+            </Upload>
+          )}
+          <Button className="handle" type="primary" onClick={this.toggleHandle}>
+            {manual ? "上传模式" : "填写模式"}
+          </Button>
+        </div>
+        {uploadHint ? <div className="italic">{uploadHint}</div> : null}
+        <UploadMatterPanel matter={matter} />
+      </div>
+    );
+  }
+}

src/pages/preference/Edit.tsx

@@ -1,105 +1,93 @@
-import React from 'react';
-import {RouteComponentProps} from "react-router-dom";
-import "./Edit.less"
+import React from "react";
+import { RouteComponentProps } from "react-router-dom";
+import "./Edit.less";
 import TankComponent from "../../common/component/TankComponent";
 import User from "../../common/model/user/User";
 import Moon from "../../common/model/global/Moon";
 import TankTitle from "../widget/TankTitle";
-import {Button, Form, Input, InputNumber, Switch} from "antd";
-import {SaveOutlined} from '@ant-design/icons';
+import { Button, Form, Input, InputNumber, Switch } from "antd";
+import { SaveOutlined } from "@ant-design/icons";
 import TankContentCard from "../widget/TankContentCard";
 import Preference from "../../common/model/preference/Preference";
 import FileUtil from "../../common/util/FileUtil";
-import {FormInstance} from "antd/lib/form";
+import { FormInstance } from "antd/lib/form";
 import MessageBoxUtil from "../../common/util/MessageBoxUtil";
 import Sun from "../../common/model/global/Sun";
 import Lang from "../../common/model/global/Lang";
+import MatterImage from "../matter/widget/MatterImage";
 
-interface IProps extends RouteComponentProps {
+interface IProps extends RouteComponentProps {}
 
-}
-
-interface IState {
-
-}
+interface IState {}
 
 export default class Edit extends TankComponent<IProps, IState> {
-
   formRef = React.createRef<FormInstance>();
 
-  user: User = Moon.getSingleton().user
-  preference: Preference = Moon.getSingleton().preference
+  user: User = Moon.getSingleton().user;
+  preference: Preference = Moon.getSingleton().preference;
 
   constructor(props: IProps) {
     super(props);
 
     this.state = {};
 
-    this.preference.detailLoading = true
+    this.preference.detailLoading = true;
   }
 
   componentDidMount() {
+    let that = this;
 
-    let that = this
-
-    that.refreshPreference()
+    that.refreshPreference();
   }
 
   refreshPreference() {
-
-    let that = this
+    let that = this;
 
     that.preference.httpFetch(function () {
-      that.preference.detailLoading = false
-      that.updateUI()
-    })
+      that.preference.detailLoading = false;
+      that.updateUI();
+    });
   }
 
   onFinish(values: any) {
-    console.log('Success:', values);
+    console.log("Success:", values);
 
-    let that = this
+    let that = this;
 
-    let user = that.user
+    let user = that.user;
 
-    that.preference.assign(values)
+    that.preference.assign(values);
 
     that.preference.httpSave(function () {
-      MessageBoxUtil.success(Lang.t("operationSuccess"))
+      MessageBoxUtil.success(Lang.t("operationSuccess"));
 
-      Sun.updateFrame()
+      Sun.updateFrame();
 
-      Sun.navigateTo("/preference/index")
-    })
-
-  };
+      Sun.navigateTo("/preference/index");
+    });
+  }
 
   onFinishFailed(errorInfo: any) {
-    console.log('Failed:', errorInfo);
-  };
-
+    console.log("Failed:", errorInfo);
+  }
 
   render() {
+    let that = this;
 
-    let that = this
-
-    let preference = that.preference
+    let preference = that.preference;
 
     const layout = {
-      labelCol: {span: 6},
-      wrapperCol: {span: 18},
+      labelCol: { span: 6 },
+      wrapperCol: { span: 18 },
     };
 
-    let initialValues: any = preference.getForm()
+    let initialValues: any = preference.getForm();
 
     return (
       <div className="page-preference-edit">
-
-        <TankTitle name={Lang.t("preference.editPreference")}>
-        </TankTitle>
+        <TankTitle name={Lang.t("preference.editPreference")}></TankTitle>
 
         <TankContentCard loading={preference.detailLoading}>
-
           <Form
             {...layout}
             name="basic"
@@ -107,94 +95,110 @@ export default class Edit extends TankComponent<IProps, IState> {
             initialValues={initialValues}
             onFinish={this.onFinish.bind(this)}
             onFinishFailed={this.onFinishFailed.bind(this)}
-            onValuesChange={() => {
-              that.updateUI()
-            }}
+            onValuesChange={() => that.updateUI()}
           >
-
             <Form.Item
               label={Lang.t("preference.websiteName")}
               name="name"
-              rules={[{required: true, message: Lang.t("preference.enterWebsiteName")}]}
+              rules={[
+                {
+                  required: true,
+                  message: Lang.t("preference.enterWebsiteName"),
+                },
+              ]}
             >
-              <Input/>
+              <Input />
             </Form.Item>
 
-            <Form.Item
-              label="logo"
-              name="logoUrl"
-            >
-              <Input/>
+            <Form.Item label="logo" name="logoUrl">
+              <MatterImage uploadHint={Lang.t("preference.logoSquare")} />
             </Form.Item>
 
-            <Form.Item
-              label="favicon"
-              name="faviconUrl"
-            >
-              <Input/>
+            <Form.Item label="favicon" name="faviconUrl">
+              <MatterImage
+                filter=".ico"
+                previewWidth={60}
+                uploadHint={Lang.t("preference.onlyAllowIco")}
+              />
             </Form.Item>
 
-            <Form.Item
-              label={Lang.t("preference.copyright")}
-              name="copyright"
-            >
-              <Input/>
+            <Form.Item label={Lang.t("preference.copyright")} name="copyright">
+              <Input />
             </Form.Item>
 
-            <Form.Item
-              label={Lang.t("preference.extraInfo")}
-              name="record"
-            >
-              <Input/>
+            <Form.Item label={Lang.t("preference.extraInfo")} name="record">
+              <Input />
             </Form.Item>
 
-            <Form.Item
-              label={Lang.t("preference.officeUrl")}
-              name="officeUrl"
-            >
-              <Input/>
+            <Form.Item label={Lang.t("preference.officeUrl")} name="officeUrl">
+              <Input />
             </Form.Item>
 
             <Form.Item
               label={Lang.t("preference.zipMaxNumLimit")}
               name="downloadDirMaxNum"
-              rules={[{required: true, message: Lang.t("preference.enterZipMaxNumLimit")}]}
+              rules={[
+                {
+                  required: true,
+                  message: Lang.t("preference.enterZipMaxNumLimit"),
+                },
+              ]}
             >
-              <InputNumber min={-1} max={1000} className='w150'/>
+              <InputNumber min={-1} max={1000} className="w150" />
             </Form.Item>
 
-            <Form.Item label={Lang.t("preference.zipMaxSizeLimit")}
-                       required={true}
+            <Form.Item
+              label={Lang.t("preference.zipMaxSizeLimit")}
+              required={true}
             >
               <Form.Item
                 name="downloadDirMaxSize"
-                rules={[{required: true, message: Lang.t("preference.enterZipMaxSizeLimit")}]}
+                rules={[
+                  {
+                    required: true,
+                    message: Lang.t("preference.enterZipMaxSizeLimit"),
+                  },
+                ]}
                 noStyle
               >
-                <InputNumber min={-1} className='w150'/>
+                <InputNumber min={-1} className="w150" />
               </Form.Item>
-              <span
-                className="pl10"> {Lang.t("preference.current")}:
-                {(this.formRef && this.formRef.current) ?
-                  FileUtil.humanFileSize(this.formRef.current.getFieldValue("downloadDirMaxSize"))
+              <span className="pl10">
+                {" "}
+                {Lang.t("preference.current")}:
+                {this.formRef && this.formRef.current
+                  ? FileUtil.humanFileSize(
+                      this.formRef.current.getFieldValue("downloadDirMaxSize")
+                    )
                   : FileUtil.humanFileSize(preference.defaultTotalSizeLimit)}
               </span>
             </Form.Item>
 
-            <Form.Item label={Lang.t("preference.userDefaultSizeLimit")}
-                       required={true}
+            <Form.Item
+              label={Lang.t("preference.userDefaultSizeLimit")}
+              required={true}
             >
               <Form.Item
                 name="defaultTotalSizeLimit"
-                rules={[{required: true, message: Lang.t("preference.enterUserDefaultSizeLimit")}]}
+                rules={[
+                  {
+                    required: true,
+                    message: Lang.t("preference.enterUserDefaultSizeLimit"),
+                  },
+                ]}
                 noStyle
               >
-                <InputNumber min={-1} className='w150'/>
+                <InputNumber min={-1} className="w150" />
               </Form.Item>
-              <span
-                className="pl10"> {Lang.t("preference.current")}:
-                {(this.formRef && this.formRef.current) ?
-                  FileUtil.humanFileSize(this.formRef.current.getFieldValue("defaultTotalSizeLimit"))
+              <span className="pl10">
+                {" "}
+                {Lang.t("preference.current")}:
+                {this.formRef && this.formRef.current
+                  ? FileUtil.humanFileSize(
+                      this.formRef.current.getFieldValue(
+                        "defaultTotalSizeLimit"
+                      )
+                    )
                   : FileUtil.humanFileSize(preference.defaultTotalSizeLimit)}
               </span>
             </Form.Item>
@@ -205,21 +209,17 @@ export default class Edit extends TankComponent<IProps, IState> {
               required={true}
               valuePropName="checked"
             >
-              <Switch/>
+              <Switch />
             </Form.Item>
 
             <div className="text-right">
-              <Button type="primary" htmlType="submit" icon={<SaveOutlined/>}>
+              <Button type="primary" htmlType="submit" icon={<SaveOutlined />}>
                 {Lang.t("save")}
               </Button>
             </div>
-
           </Form>
         </TankContentCard>
-
       </div>
     );
   }
 }
-
-

src/pages/user/Edit.tsx

@@ -15,6 +15,7 @@ import ColorSelectionOption from "../../common/model/base/option/ColorSelectionO
 import MessageBoxUtil from "../../common/util/MessageBoxUtil";
 import Sun from "../../common/model/global/Sun";
 import Lang from "../../common/model/global/Lang";
+import MatterImage from "../matter/widget/MatterImage";
 
 
 interface RouteParam {
@@ -141,7 +142,7 @@ export default class Edit extends TankComponent<IProps, IState> {
                 name="avatarUrl"
                 initialValue={currentUser.avatarUrl}
               >
-                <Input/>
+                <MatterImage />
               </Form.Item>
             )}