feat: add pic

src/assets/document/6.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="32px" viewBox="0 0 100 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>上传</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="补图" transform="translate(-48, -148)">
+            <g id="编组-2" transform="translate(48, 148)">
+                <rect id="矩形" fill="#E8EDF5" x="0" y="0" width="100" height="32" rx="16"></rect>
+                <text id="上传图片" font-family="MiSans-Regular, MiSans" font-size="13" font-weight="normal" fill="#000000">
+                    <tspan x="35" y="21">上传图片</tspan>
+                </text>
+                <path d="M28.2,8 L13.8,8 C13.358176,8 13,8.34822667 13,8.77777778 L13,21.2222222 C13,21.6517889 13.358176,22 13.8,22 L28.2,22 C28.64184,22 29,21.6517889 29,21.2222222 L29,8.77777778 C29,8.34822667 28.64184,8 28.2,8 Z M21,19.8611111 C19.67448,19.8611111 18.6,18.8164778 18.6,17.5277778 L14.6,17.5277778 L14.6,9.55555556 L27.4,9.55555556 L27.4,17.5277778 L23.4,17.5277778 C23.4,18.8164778 22.32552,19.8611111 21,19.8611111 Z M24.2,14.2222222 L21.8,14.2222222 L21.8,18.3055556 L20.2,18.3055556 L20.2,14.2222222 L17.8,14.2222222 L21,10.7222222 L24.2,14.2222222 Z" id="形状" fill="#333333" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/document/7.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="32px" viewBox="0 0 100 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>上传hover</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="补图" transform="translate(-170, -148)">
+            <g id="编组-2备份-2" transform="translate(170, 148)">
+                <rect id="矩形" fill="#E8EDF5" x="0" y="0" width="100" height="32" rx="16"></rect>
+                <text id="上传图片" font-family="MiSans-Regular, MiSans" font-size="13" font-weight="normal" fill="#00AEA3">
+                    <tspan x="35" y="21">上传图片</tspan>
+                </text>
+                <path d="M28.2,8 L13.8,8 C13.358176,8 13,8.34822667 13,8.77777778 L13,21.2222222 C13,21.6517889 13.358176,22 13.8,22 L28.2,22 C28.64184,22 29,21.6517889 29,21.2222222 L29,8.77777778 C29,8.34822667 28.64184,8 28.2,8 Z M21,19.8611111 C19.67448,19.8611111 18.6,18.8164778 18.6,17.5277778 L14.6,17.5277778 L14.6,9.55555556 L27.4,9.55555556 L27.4,17.5277778 L23.4,17.5277778 C23.4,18.8164778 22.32552,19.8611111 21,19.8611111 Z M24.2,14.2222222 L21.8,14.2222222 L21.8,18.3055556 L20.2,18.3055556 L20.2,14.2222222 L17.8,14.2222222 L21,10.7222222 L24.2,14.2222222 Z" id="形状" fill="#00AEA3" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/document/8.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="32px" viewBox="0 0 100 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>上传选择</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="补图" transform="translate(-302, -148)">
+            <g id="编组-2备份-3" transform="translate(302, 148)">
+                <rect id="矩形" fill="#00AEA3" x="0" y="0" width="100" height="32" rx="16"></rect>
+                <text id="上传图片" font-family="MiSans-Regular, MiSans" font-size="13" font-weight="normal" fill="#FFFFFF">
+                    <tspan x="35" y="21">上传图片</tspan>
+                </text>
+                <path d="M28.2,8 L13.8,8 C13.358176,8 13,8.34822667 13,8.77777778 L13,21.2222222 C13,21.6517889 13.358176,22 13.8,22 L28.2,22 C28.64184,22 29,21.6517889 29,21.2222222 L29,8.77777778 C29,8.34822667 28.64184,8 28.2,8 Z M21,19.8611111 C19.67448,19.8611111 18.6,18.8164778 18.6,17.5277778 L14.6,17.5277778 L14.6,9.55555556 L27.4,9.55555556 L27.4,17.5277778 L23.4,17.5277778 C23.4,18.8164778 22.32552,19.8611111 21,19.8611111 Z M24.2,14.2222222 L21.8,14.2222222 L21.8,18.3055556 L20.2,18.3055556 L20.2,14.2222222 L17.8,14.2222222 L21,10.7222222 L24.2,14.2222222 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/DocumentCards.vue

@@ -11,7 +11,7 @@
         </section>
         <footer v-if="hasUpload">
             <a-popover :popup-visible="showUpload" position="tl">
-                <div :class="{ 'text-hide': showUpload }">
+                <div :class="{ 'text-hide': showUpload }" v-if="!uploadImg">
                     <div
                         @click="
                             () => {
@@ -25,10 +25,23 @@
                     </div>
                     <p>已选择 0/0 个文档</p>
                 </div>
+                <div class="text-narrow" v-else>
+                    <div
+                        @click="
+                            () => {
+                                showUpload = true;
+                            }
+                        "
+                    >
+                        <img src="@/assets/document/6.svg" class="img-normal" v-if="!showUpload" />
+                        <img src="@/assets/document/7.svg" class="img-hover" v-if="!showUpload" />
+                        <img src="@/assets/document/8.svg" class="img-active" v-if="showUpload" />
+                    </div>
+                </div>
                 <template #content>
-                    <div class="upload-wrap">
+                    <div :class="{ 'upload-wrap': true, 'upload-wrap-narrow': uploadImg }">
                         <header>
-                            <p>文档解析站</p>
+                            <p>{{ uploadImg ? "上传图片" : "文档解析站" }}</p>
                             <div
                                 @click="
                                     () => {
@@ -43,24 +56,28 @@
                             <section>
                                 <a-upload
                                     draggable
-                                    :multiple="true"
+                                    :multiple="!uploadImg"
                                     :limit="5"
                                     @before-upload="onBeforeUpload"
                                     @exceed-limit="onExceedLimit"
                                     @before-remove="onBeforeRemove"
                                     :custom-request="customRequest"
                                     :show-upload-button="{ showOnExceedLimit: true }"
-                                    accept=".pdf,.doc,.docx,.txt,.csv"
+                                    :accept="uploadImg ? '.png,.jpg' : '.pdf,.doc,.docx,.txt,.csv'"
                                 >
                                     <template #upload-button>
                                         <div class="upload-main">
-                                            <p>拖拽文档到这里，或<span>点此上传</span></p>
-                                            <span> 支持上传.pdf, .doc, .docx, .txt, .csv文档，大小不超过30M </span>
+                                            <p>拖拽{{ uploadImg ? "图片" : "文档" }}到这里，或<span>点此上传</span></p>
+                                            <span>
+                                                支持上传{{
+                                                    uploadImg ? ".png,.jpg图片" : ".pdf,.doc,.docx,.txt,.csv文档"
+                                                }}，大小不超过30M
+                                            </span>
                                         </div>
                                     </template>
                                 </a-upload>
                             </section>
-                            <div>
+                            <div v-if="!uploadImg">
                                 <p>
                                     <span>已解析文件列表</span>
                                     <span>共0个</span>
@@ -96,7 +113,7 @@
 <script>
 import { defineComponent, ref, inject, reactive } from "vue";
 export default defineComponent({
-    props: ["data", "hasUpload", "hasSlider"],
+    props: ["data", "hasUpload", "hasSlider", "uploadImg"],
     setup() {
         const showUpload = ref(true);
         const { helper } = inject("$global");
@@ -205,6 +222,7 @@ export default defineComponent({
         color: #000;
         font-weight: bold;
         margin-bottom: 5px;
+        margin-top: 10px;
         > span {
             color: #00aea3;
             text-decoration: underline;
@@ -277,6 +295,13 @@ main {
                 width: 110px;
                 overflow: hidden;
             }
+            &.text-narrow {
+                width: 100px;
+                overflow: hidden;
+                > div > img {
+                    width: 100px;
+                }
+            }
             > p {
                 overflow: hidden;
                 white-space: nowrap;
@@ -323,6 +348,9 @@ main {
     display: flex;
     flex-direction: column;
     padding-bottom: 30px;
+    &.upload-wrap-narrow {
+        height: 200px;
+    }
     > header {
         display: flex;
         align-items: center;

src/views/PicArticle.vue

@@ -1,5 +1,5 @@
 <template>
-    <document-cards :data="data" :hasUpload="true" :hasSlider="false" />
+    <document-cards :data="data" :hasUpload="true" :hasSlider="false" :uploadImg="true" />
 </template>
 <script>
 import DocumentCards from "@/components/DocumentCards.vue";