增加piclist图床支持 (#1297)

* add piclist image hosting

* add piclist svg icon

* some small fix

* fix piclist icon

* change icons path

* recover icon.js

---------

Co-authored-by: yqs112358 <yqs112358.test>

Author: yqs112358

chrome/icons/piclist.png

@@ -0,0 +1,35 @@
+import React, { Fragment } from 'react';
+import { FormComponentProps } from '@ant-design/compatible/lib/form';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.less';
+import { Input } from 'antd';
+
+interface Props extends FormComponentProps {
+  info: {
+    uploadUrl: string;
+    key: string;
+  };
+}
+
+export default ({ form: { getFieldDecorator }, info }: Props) => {
+  const initInfo: Partial<Props['info']> = info || {};
+  return (
+    <Fragment>
+      <Form.Item label="UploadUrl">
+        {getFieldDecorator('uploadUrl', {
+          initialValue: initInfo.uploadUrl,
+          rules: [
+            {
+              required: true,
+            },
+          ],
+        })(<Input placeholder="please input piclist upload URL"></Input>)}
+      </Form.Item>
+      <Form.Item label="Key">
+        {getFieldDecorator('key', {
+          initialValue: initInfo.key,
+        })(<Input placeholder="please input upload key (if needed)"></Input>)}
+      </Form.Item>
+    </Fragment>
+  );
+};

src/common/backend/imageHosting/piclist/form.tsx

@@ -0,0 +1,16 @@
+import Form from './form';
+import { ImageHostingServiceMeta } from '../interface';
+import Service from './service';
+
+export default (): ImageHostingServiceMeta => {
+  return {
+    name: 'piclist',
+    icon: 'icons/piclist.png',
+    type: 'piclist',
+    service: Service,
+    form: Form,
+    permission: {
+      origins: ['<all_urls>'],    // often to be self-hosted
+    },
+  };
+};

src/common/backend/imageHosting/piclist/index.ts

@@ -0,0 +1,54 @@
+import { IBasicRequestService } from '@/service/common/request';
+import { RequestHelper } from '@/service/request/common/request';
+import { UploadImageRequest, ImageHostingService } from '../interface';
+import { Base64ImageToBlob } from '@/common/blob';
+import Container from 'typedi';
+import md5 from '@web-clipper/shared/lib/md5';
+
+export interface PiclistImageHostingOption {
+  uploadUrl: string;
+  key: string;
+}
+
+export default class PiclistImageHostingService implements ImageHostingService {
+  private config: PiclistImageHostingOption;
+
+  constructor(config: PiclistImageHostingOption) {
+    this.config = config;
+  }
+
+  getId = () => {
+    let uploadUrl = this.config.uploadUrl
+    if(this.config.key)
+      uploadUrl += `?key=${this.config.key}`
+    return md5(uploadUrl)    // as id
+  };
+
+  uploadImage = async ({ data }: UploadImageRequest) => {
+    const blob = Base64ImageToBlob(data);
+    return this.uploadBlob(blob);
+  };
+
+  uploadImageUrl = async (url: string) => {
+    const imageBlob = await Container.get(IBasicRequestService).download(url);
+    return this.uploadBlob(imageBlob);
+  };
+
+  private uploadBlob = async (blob: Blob): Promise<string> => {
+    const request = new RequestHelper({ request: Container.get(IBasicRequestService) });
+    let uploadUrl = this.config.uploadUrl
+    if(this.config.key)
+      uploadUrl += `?key=${this.config.key}`
+    let formData = new FormData();
+    formData.append('image', blob);
+    let result = await request.postForm<{ success: boolean, result: string[] }>(
+      uploadUrl,
+      {
+        data: formData,
+      }
+    );
+    if(!result.success)
+      throw new Error("Upload failed");
+    return result.result[0];
+  };
+}

src/common/backend/imageHosting/piclist/service.ts

@@ -19,7 +19,7 @@ const IconAvatar: React.FC<IconAvatarProps> = ({ avatar, size, icon: _icon }) =>
   } else {
     fontSize = size;
   }
-  if (icon.startsWith('http')) {
+  if (icon.startsWith('http') || icon.indexOf('/') != -1) {
     return <Avatar size={fontSize} src={icon} />;
   }
   return <IconFont style={{ fontSize }} type={icon} />;

src/components/avatar/index.tsx

@@ -25,7 +25,7 @@ export default class Page extends React.Component<PageProps> {
     } = this.props;
     let avatar;
 
-    if (icon.startsWith('http')) {
+    if (icon.startsWith('http') || icon.indexOf('/') != -1) {
       avatar = <Avatar src={icon} className={styles.avatar} />;
     } else {
       avatar = <IconFont type={icon} style={{ fontSize: 32 }} />;

src/components/imageHostingSelectOption/index.tsx

@@ -38,7 +38,7 @@ export default class Page extends React.Component<PageProps> {
     } = this.props;
     let avatar;
 
-    if (icon.startsWith('http')) {
+    if (icon.startsWith('http') || icon.indexOf('/') != -1) {
       avatar = <Avatar src={icon} className={styles.avatar} />;
     } else {
       avatar = <IconFont type={icon} style={{ fontSize: 32 }} />;

src/components/imagehostingListItem/index.tsx

@@ -14,8 +14,8 @@ export interface RemoteConfig {
 }
 
 let config: WebClipperConfig = {
-  icon: 'icon.png',
-  iconDark: 'icon-dark.png',
+  icon: 'icons/icon.png',
+  iconDark: 'icons/icon-dark.png',
   yuqueClientId: 'D1AwzCeDPLFWGfcGv7ze',
   yuqueCallback: 'http://webclipper-oauth.yfd.im/yuque_oauth',
   yuqueScope: 'doc,group,repo,attach_upload',
@@ -25,7 +25,7 @@ let config: WebClipperConfig = {
 
 if (process.env.NODE_ENV === 'development') {
   config = Object.assign({}, config, {
-    icon: 'icon-dev.png',
+    icon: 'icons/icon-dev.png',
   });
 }
 

src/config.ts

@@ -7,9 +7,9 @@ class WorkerService implements IWorkerService {
   constructor() {}
   async changeIcon(iconColor: string): Promise<void> {
     if (iconColor === 'light') {
-      chrome.action.setIcon({ path: await getResourcePath('icon-dark.png') });
+      chrome.action.setIcon({ path: await getResourcePath('icons/icon-dark.png') });
     } else {
-      chrome.action.setIcon({ path: await getResourcePath('icon.png') });
+      chrome.action.setIcon({ path: await getResourcePath('icons/icon.png') });
     }
   }
   async initContextMenu(): Promise<void> {

src/service/worker/worker/workerService.ts

@@ -37,7 +37,7 @@ async function getChromeManifest() {
       service_worker: './background.js',
     },
     icons: {
-      128: 'icon.png',
+      128: 'icons/icon.png',
     },
     commands: {
       'save-selection': {
@@ -76,7 +76,7 @@ async function getFirefoxManifest() {
       scripts: ['chrome/background.js'],
     },
     icons: {
-      128: 'chrome/icon.png',
+      128: 'chrome/icons/icon.png',
     },
     commands: {
       'save-selection': {