feat(admin): add image url preview in admin

Author: moonrailgun

server/admin/src/client/components/field/imageUrl.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { createFieldFactory, FieldDetailComponent, Image, Link } from 'tushan';
+
+export const ImageUrlFieldDetail: FieldDetailComponent = React.memo((props) => {
+ const url = props.value;
+ const isImage = ['.png', '.jpg', '.gif', '.jpeg', '.webp'].some((ext) =>
+ String(url).endsWith(ext)
+ );
+
+ if (isImage) {
+ return <Image src={url} height={100} />;
+ }
+
+ return (
+ <Link href={props.value} icon={true} target="_blank">
+ {props.value}
+ </Link>
+ );
+});
+ImageUrlFieldDetail.displayName = 'ImageUrlFieldDetail';
+
+export const createImageUrlField = createFieldFactory({
+ detail: ImageUrlFieldDetail,
+ edit: ImageUrlFieldDetail,
+});

server/admin/src/client/fields.ts

@@ -14,6 +14,7 @@ import {
 import { createFileSizeField } from './components/field/filesize';
 import { createUserField } from './components/field/user';
 import { parseUrlStr } from './utils';
+import { createImageUrlField } from './components/field/imageUrl';
 
 export const userFields = [
  createTextField('id', {
@@ -152,7 +153,7 @@ export const groupFields = [
 
 export const fileFields = [
  createTextField('objectName'),
- createUrlField('url', {
+ createImageUrlField('url', {
  preRenderTransform: parseUrlStr,
  }),
  createFileSizeField('size', {