feat: support post cover

Signed-off-by: Innei <tukon479@gmail.com>

src/components/drawer/components/image-detail-section.tsx

@@ -1,3 +1,4 @@
+import { uniqBy } from 'lodash-es'
 import type { Image as ImageModel } from 'models/base'
 import {
   NButton,
@@ -28,6 +29,10 @@ export const ImageDetailSection = defineComponent({
       type: String,
       required: true,
     },
+    extraImages: {
+      type: Array as PropType<string[]>,
+      required: false,
+    },
   },
   setup(props) {
     const loading = ref(false)
@@ -40,20 +45,47 @@ export const ImageDetailSection = defineComponent({
       return map
     })
 
-    const images = computed<ImageModel[]>(() =>
-      props.text
-        ? pickImagesFromMarkdown(props.text).map((src) => {
-            const existImageInfo = originImageMap.value.get(src)
-            return {
+    const images = computed<ImageModel[]>(() => {
+      const basedImages: ImageModel[] = props.text
+        ? uniqBy(
+            pickImagesFromMarkdown(props.text)
+              .map((src) => {
+                const existImageInfo = originImageMap.value.get(src)
+                return {
+                  src,
+                  height: existImageInfo?.height,
+                  width: existImageInfo?.width,
+                  type: existImageInfo?.type,
+                  accent: existImageInfo?.accent,
+                } as any
+              })
+              .concat(props.images),
+            'src',
+          )
+        : props.images
+      const srcSet = new Set<string>()
+
+      for (const image of basedImages) {
+        image.src && srcSet.add(image.src)
+      }
+      const nextImages = basedImages.concat()
+      if (props.extraImages) {
+        // 需要过滤存在的图片
+        props.extraImages.forEach((src) => {
+          if (!srcSet.has(src)) {
+            nextImages.push({
               src,
-              height: existImageInfo?.height,
-              width: existImageInfo?.width,
-              type: existImageInfo?.type,
-              accent: existImageInfo?.accent,
-            } as any
-          })
-        : props.images,
-    )
+              height: 0,
+              width: 0,
+              type: '',
+              accent: '',
+            })
+          }
+        })
+      }
+
+      return nextImages
+    })
     const handleCorrectImage = async () => {
       loading.value = true
 

src/components/drawer/text-base-drawer.tsx

@@ -1,5 +1,7 @@
+import { isURL } from 'class-validator'
 import { JSONHighlight } from 'components/json-highlight'
 import { isObject, isUndefined } from 'lodash-es'
+import type { SelectOption } from 'naive-ui'
 import {
   NButton,
   NCollapse,
@@ -11,12 +13,19 @@ import {
   NDynamicInput,
   NForm,
   NFormItem,
+  NImage,
+  NInput,
   NModal,
+  NPopover,
+  NSelect,
   NSwitch,
+  NTooltip,
 } from 'naive-ui'
 import { JSONParseReturnOriginal } from 'utils/json'
 import type { PropType } from 'vue'
 
+import type { Image } from '@mx-space/api-client'
+
 import { ImageDetailSection } from './components/image-detail-section'
 import { JSONEditor } from './components/json-editor'
 
@@ -143,11 +152,27 @@ export const TextBaseDrawer = defineComponent({
 
             <NDivider />
 
+            <ImageCoverItem
+              images={props.data.images}
+              onChange={(src) => {
+                if (!props.data.meta) props.data.meta = {}
+                if (src === null) {
+                  delete props.data.meta.cover
+                  return
+                }
+                props.data.meta.cover = src
+              }}
+              value={props.data.meta?.cover}
+            />
+
             <NFormItem label="图片设定" labelAlign="left"></NFormItem>
             <NFormItem>
               <ImageDetailSection
                 text={props.data.text}
                 images={props.data.images}
+                extraImages={
+                  props.data.meta?.cover ? [props.data.meta.cover] : undefined
+                }
                 onChange={(images) => {
                   props.data.images = images
                 }}
@@ -223,3 +248,92 @@ export const TextBaseDrawer = defineComponent({
     )
   },
 })
+
+const ImageCoverItem = defineComponent({
+  props: {
+    images: {
+      type: Array as PropType<Image[]>,
+      required: true,
+    },
+    onChange: {
+      type: Function as PropType<(image: string | null) => void>,
+      required: true,
+    },
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const isValidated = ref(true)
+    const validateAndCallback = (value: string) => {
+      if (!value) {
+        isValidated.value = true
+        props.onChange(null)
+        return
+      }
+      if (isURL(value)) isValidated.value = true
+      else isValidated.value = false
+
+      props.onChange(value)
+    }
+    return () => (
+      <NFormItem label="文章缩略图" labelAlign="left">
+        <NPopover placement="left">
+          {{
+            trigger() {
+              return props.images.length > 0 ? (
+                <NSelect
+                  status={isValidated.value ? undefined : 'error'}
+                  value={props.value}
+                  onUpdateValue={validateAndCallback}
+                  options={(props.images as Image[]).map((image) => ({
+                    label: image.src,
+                    value: image.src,
+                  }))}
+                  filterable
+                  tag
+                  clearable
+                  maxTagCount={1}
+                  renderOption={({
+                    node,
+                    option,
+                  }: {
+                    node: VNode
+                    option: SelectOption
+                  }) =>
+                    h(
+                      NTooltip,
+                      { placement: 'left' },
+                      {
+                        trigger: () => node,
+                        default: () => (
+                          <NImage
+                            src={option.value as string}
+                            alt="popover"
+                            width={400}
+                          />
+                        ),
+                      },
+                    )
+                  }
+                ></NSelect>
+              ) : (
+                <NInput
+                  value={props.value}
+                  status={isValidated.value ? undefined : 'error'}
+                  onUpdateValue={validateAndCallback}
+                  placeholder={'https?://...'}
+                ></NInput>
+              )
+            },
+            default() {
+              if (!props.value) return null
+              return <NImage src={props.value} alt="cover" width={400} />
+            },
+          }}
+        </NPopover>
+      </NFormItem>
+    )
+  },
+})