fix: bug

src/components/Right.vue

@@ -0,0 +1,146 @@
+<template>
+    <main :class="{ open: openRight }">
+        <a-tooltip
+            v-if="!openRight"
+            content="数智库"
+            @click="
+                () => {
+                    openRight = true;
+                }
+            "
+        >
+            <section>
+                <img src="@/assets/other/right.svg" width="18" />
+            </section>
+        </a-tooltip>
+        <div v-if="openRight">
+            <header>
+                <p>数智库</p>
+                <section
+                    v-outside="
+                        () => {
+                            openSearch = false;
+                        }
+                    "
+                >
+                    <div :class="{ input: true, open: openSearch }">
+                        <a-input
+                            :style="{ width: '100%', height: '38px', borderRadius: '19px', fontSize: '12px' }"
+                            placeholder="搜索指令或关键词"
+                            allow-clear
+                        >
+                            <template #prefix>
+                                <icon-search />
+                            </template>
+                        </a-input>
+                    </div>
+                    <a-tooltip content="搜索">
+                        <div
+                            v-show="!openSearch"
+                            class="button"
+                            @click="
+                                () => {
+                                    openSearch = true;
+                                }
+                            "
+                        >
+                            <icon-search size="large" />
+                        </div>
+                    </a-tooltip>
+                    <a-tooltip
+                        content="关闭"
+                        @click="
+                            () => {
+                                openRight = false;
+                            }
+                        "
+                    >
+                        <div class="button"><icon-close size="large" /></div>
+                    </a-tooltip>
+                </section>
+            </header>
+        </div>
+    </main>
+</template>
+<script>
+import { defineComponent, inject, onMounted, ref } from "vue";
+export default defineComponent({
+    setup(props, { emit }) {
+        const openRight = ref(false);
+        const openSearch = ref(false);
+        return {
+            openRight,
+            openSearch
+        };
+    }
+});
+</script>
+<style scoped>
+main {
+    height: 100%;
+    width: 64px;
+    overflow: hidden;
+    transition-duration: 0.2s;
+    &.open {
+        width: 300px;
+    }
+    > section {
+        overflow: hidden;
+        margin: 30px 24px 0 0;
+        width: 40px;
+        height: 40px;
+        background: linear-gradient(90deg, #41d98c, #31c4c9);
+        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.03);
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        justify-content: center;
+        border-radius: 20px;
+    }
+    > div {
+        background: #fff;
+        height: 100%;
+        > header {
+            height: 60px;
+            padding: 0 10px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            > p {
+                line-height: 60px;
+                font-size: 20px;
+                font-weight: bold;
+                overflow: hidden;
+                word-wrap: break-word;
+                white-space: nowrap;
+            }
+            > section {
+                height: 60px;
+                display: flex;
+                align-items: center;
+                .input {
+                    width: 0px;
+                    overflow: hidden;
+                    height: 38px;
+                    transition-duration: 0.1s;
+                    &.open {
+                        width: 170px;
+                    }
+                }
+                .button {
+                    width: 40px;
+                    height: 40px;
+                    cursor: pointer;
+                    border-radius: 8px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    &:hover {
+                        background: rgba(150, 171, 185, 0.2);
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/Home.vue

@@ -55,10 +55,12 @@
                     </div>
                 </div>
             </div>
+            <right v-if="navIndex === 0 || navIndex === 2" />
         </div>
     </div>
 </template>
 <script>
+import Right from "../components/Right.vue";
 import DialogWrap from "../components/DialogWrap.vue";
 import Slider from "../components/Slider.vue";
 import History from "../components/History.vue";
@@ -75,6 +77,7 @@ import Analysis from "./Analysis.vue";
 import { defineComponent, ref, onMounted, inject, onBeforeUnmount } from "vue";
 export default defineComponent({
     components: {
+        Right,
         Slider,
         History,
         Index,