add

src/assets/document/3.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="32px" viewBox="0 0 110 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, -95)">
+            <g id="编组-2" transform="translate(48, 95)">
+                <rect id="矩形" fill="#E8EDF5" x="0" y="0" width="110" height="32" rx="16"></rect>
+                <text id="文档解析站" font-family="MiSans-Regular, MiSans" font-size="13" font-weight="normal" fill="#000000">
+                    <tspan x="32" y="21">文档解析站</tspan>
+                </text>
+                <g id="编组-8" transform="translate(13, 8)">
+                    <g id="编组" transform="translate(6.5, 8) scale(-1, 1) translate(-6.5, -8)translate(-0, 0)">
+                        <path d="M12.4507042,1.73493976 C12.7540719,1.73493976 13,1.99385942 13,2.31325301 L13,15.4216867 C13,15.7410803 12.7540719,16 12.4507042,16 L2.1971831,16 C1.89381542,16 1.64788732,15.7410803 1.64788732,15.4216867 L1.64788732,2.31325301 C1.64788732,1.99385942 1.89381542,1.73493976 2.1971831,1.73493976 L12.4507042,1.73493976 Z M10.8028169,8.86746988 L9.70422535,8.86746988 C9.70422535,10.2515044 8.63853279,11.373494 7.32394366,11.373494 C6.69831001,11.373494 6.11213662,11.1190436 5.67101153,10.6707236 L4.90801821,11.5028861 C5.55194204,12.1573126 6.41077388,12.5301205 7.32394366,12.5301205 C8.24490112,12.5301205 9.08227683,12.1533506 9.70459727,11.5382295 L9.70422535,11.9518072 L10.8028169,11.9518072 L10.8028169,8.86746988 Z M7.32394366,5.20481928 C6.40298621,5.20481928 5.5656105,5.58158921 4.94329006,6.19671023 L4.94366197,5.78313253 L3.84507042,5.78313253 L3.84507042,8.86746988 L4.94366197,8.86746988 C4.94366197,7.48343536 6.00935453,6.36144578 7.32394366,6.36144578 C7.97906858,6.36144578 8.59059946,6.64066941 9.03672156,7.12722357 L9.82712069,6.32391431 C9.17604946,5.61383648 8.28025617,5.20481928 7.32394366,5.20481928 Z" id="形状结合" fill="#333333" fill-rule="nonzero"></path>
+                        <path d="M10.2535211,2.31325301 L10.2535211,0 L0.366197183,0 C0.163953803,0 0,0.17261494 0,0.385542169 L0,13.1084337 L2.1971831,13.1084337" id="路径" stroke="#333333" stroke-width="1.1386212" stroke-linejoin="round"></path>
+                    </g>
+                    <g id="编组" transform="translate(3.25, 4.75)"></g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/document/4.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="32px" viewBox="0 0 110 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, -95)">
+            <g id="编组-2" transform="translate(170, 95)">
+                <rect id="矩形" fill="#E8EDF5" x="0" y="0" width="110" height="32" rx="16"></rect>
+                <text id="文档解析站" font-family="MiSans-Regular, MiSans" font-size="13" font-weight="normal" fill="#00AEA3">
+                    <tspan x="32" y="21">文档解析站</tspan>
+                </text>
+                <g id="编组-8" transform="translate(13, 8)">
+                    <g id="编组" transform="translate(6.5, 8) scale(-1, 1) translate(-6.5, -8)translate(-0, 0)">
+                        <path d="M12.4507042,1.73493976 C12.7540719,1.73493976 13,1.99385942 13,2.31325301 L13,15.4216867 C13,15.7410803 12.7540719,16 12.4507042,16 L2.1971831,16 C1.89381542,16 1.64788732,15.7410803 1.64788732,15.4216867 L1.64788732,2.31325301 C1.64788732,1.99385942 1.89381542,1.73493976 2.1971831,1.73493976 L12.4507042,1.73493976 Z M10.8028169,8.86746988 L9.70422535,8.86746988 C9.70422535,10.2515044 8.63853279,11.373494 7.32394366,11.373494 C6.69831001,11.373494 6.11213662,11.1190436 5.67101153,10.6707236 L4.90801821,11.5028861 C5.55194204,12.1573126 6.41077388,12.5301205 7.32394366,12.5301205 C8.24490112,12.5301205 9.08227683,12.1533506 9.70459727,11.5382295 L9.70422535,11.9518072 L10.8028169,11.9518072 L10.8028169,8.86746988 Z M7.32394366,5.20481928 C6.40298621,5.20481928 5.5656105,5.58158921 4.94329006,6.19671023 L4.94366197,5.78313253 L3.84507042,5.78313253 L3.84507042,8.86746988 L4.94366197,8.86746988 C4.94366197,7.48343536 6.00935453,6.36144578 7.32394366,6.36144578 C7.97906858,6.36144578 8.59059946,6.64066941 9.03672156,7.12722357 L9.82712069,6.32391431 C9.17604946,5.61383648 8.28025617,5.20481928 7.32394366,5.20481928 Z" id="形状结合" fill="#00AEA3" fill-rule="nonzero"></path>
+                        <path d="M10.2535211,2.31325301 L10.2535211,0 L0.366197183,0 C0.163953803,0 0,0.17261494 0,0.385542169 L0,13.1084337 L2.1971831,13.1084337" id="路径" stroke="#00AEA3" stroke-width="1.1386212" stroke-linejoin="round"></path>
+                    </g>
+                    <g id="编组" transform="translate(3.25, 4.75)"></g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/document/5.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="32px" viewBox="0 0 110 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, -95)">
+            <g id="编组-2" transform="translate(302, 95)">
+                <rect id="矩形" fill="#00AEA3" x="0" y="0" width="110" height="32" rx="16"></rect>
+                <text id="文档解析站" font-family="MiSans-Regular, MiSans" font-size="13" font-weight="normal" fill="#FFFFFF">
+                    <tspan x="32" y="21">文档解析站</tspan>
+                </text>
+                <g id="编组-8" transform="translate(13, 8)">
+                    <g id="编组" transform="translate(6.5, 8) scale(-1, 1) translate(-6.5, -8)translate(-0, 0)">
+                        <path d="M12.4507042,1.73493976 C12.7540719,1.73493976 13,1.99385942 13,2.31325301 L13,15.4216867 C13,15.7410803 12.7540719,16 12.4507042,16 L2.1971831,16 C1.89381542,16 1.64788732,15.7410803 1.64788732,15.4216867 L1.64788732,2.31325301 C1.64788732,1.99385942 1.89381542,1.73493976 2.1971831,1.73493976 L12.4507042,1.73493976 Z M10.8028169,8.86746988 L9.70422535,8.86746988 C9.70422535,10.2515044 8.63853279,11.373494 7.32394366,11.373494 C6.69831001,11.373494 6.11213662,11.1190436 5.67101153,10.6707236 L4.90801821,11.5028861 C5.55194204,12.1573126 6.41077388,12.5301205 7.32394366,12.5301205 C8.24490112,12.5301205 9.08227683,12.1533506 9.70459727,11.5382295 L9.70422535,11.9518072 L10.8028169,11.9518072 L10.8028169,8.86746988 Z M7.32394366,5.20481928 C6.40298621,5.20481928 5.5656105,5.58158921 4.94329006,6.19671023 L4.94366197,5.78313253 L3.84507042,5.78313253 L3.84507042,8.86746988 L4.94366197,8.86746988 C4.94366197,7.48343536 6.00935453,6.36144578 7.32394366,6.36144578 C7.97906858,6.36144578 8.59059946,6.64066941 9.03672156,7.12722357 L9.82712069,6.32391431 C9.17604946,5.61383648 8.28025617,5.20481928 7.32394366,5.20481928 Z" id="形状结合" fill="#FFFFFF" fill-rule="nonzero"></path>
+                        <path d="M10.2535211,2.31325301 L10.2535211,0 L0.366197183,0 C0.163953803,0 0,0.17261494 0,0.385542169 L0,13.1084337 L2.1971831,13.1084337" id="路径" stroke="#FFFFFF" stroke-width="1.1386212" stroke-linejoin="round"></path>
+                    </g>
+                    <g id="编组" transform="translate(3.25, 4.75)"></g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/Document.vue

@@ -9,7 +9,40 @@
                 </div>
             </div>
         </section>
-        <footer>文档解析站</footer>
+        <footer>
+            <a-popover :popup-visible="showUpload" position="tl">
+                <div :class="{ 'text-hide': showUpload }">
+                    <div
+                        @click="
+                            () => {
+                                showUpload = true;
+                            }
+                        "
+                    >
+                        <img src="@/assets/document/3.svg" class="img-normal" v-if="!showUpload" />
+                        <img src="@/assets/document/4.svg" class="img-hover" v-if="!showUpload" />
+                        <img src="@/assets/document/5.svg" class="img-active" v-if="showUpload" />
+                    </div>
+                    <p>已选择 0/0 个文档</p>
+                </div>
+                <template #content>
+                    <div class="upload-wrap">
+                        <header>
+                            <p>文档解析站</p>
+                            <div
+                                @click="
+                                    () => {
+                                        showUpload = false;
+                                    }
+                                "
+                            >
+                                <icon-close size="large" />
+                            </div>
+                        </header>
+                    </div>
+                </template>
+            </a-popover>
+        </footer>
     </main>
 </template>
 <script>
@@ -17,6 +50,7 @@ import { defineComponent, ref, inject } from "vue";
 export default defineComponent({
     components: {},
     setup() {
+        const showUpload = ref(false);
         const { helper } = inject("$global");
         const DEFAULT_DATA = [
             {
@@ -35,7 +69,7 @@ export default defineComponent({
             }
         ];
         const data = ref(DEFAULT_DATA);
-        return { data, getAssetURL: helper.getAssetURL };
+        return { data, getAssetURL: helper.getAssetURL, showUpload };
     }
 });
 </script>
@@ -80,5 +114,75 @@ main {
             }
         }
     }
+    > footer {
+        > div {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            height: 32px;
+            border-radius: 21px;
+            border: 1px solid #e3e3e3;
+            white-space: nowrap;
+            overflow: hidden;
+            transition-duration: 0.3s;
+            width: 250px;
+            &.text-hide {
+                width: 110px;
+                overflow: hidden;
+            }
+            > p {
+                overflow: hidden;
+                white-space: nowrap;
+            }
+            > div {
+                cursor: pointer;
+                width: 110px;
+                height: 32px;
+                .img-normal {
+                    display: block;
+                }
+                .img-hover {
+                    display: none;
+                }
+                &:hover {
+                    .img-normal {
+                        display: none;
+                    }
+                    .img-hover {
+                        display: block;
+                    }
+                }
+                > img {
+                    width: 110px;
+                    height: 32px;
+                }
+            }
+        }
+    }
+}
+.upload-wrap {
+    width: 800px;
+    height: 300px;
+    > header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        > p {
+            font-size: 18px;
+            font-weight: bold;
+        }
+        > div {
+            width: 38px;
+            height: 38px;
+            border-radius: 6px;
+            cursor: pointer;
+            justify-content: center;
+            align-items: center;
+            display: flex;
+            &:hover {
+                background: rgba(0, 0, 0, 0.05);
+            }
+        }
+    }
 }
 </style>