fix: bug

src/components/NormalCards.vue

@@ -23,7 +23,7 @@
     </main>
 </template>
 <script>
-import { defineComponent, inject, onMounted, ref } from "vue";
+import { defineComponent, inject, ref } from "vue";
 export default defineComponent({
     props: ["data"],
     setup(props) {

src/components/Right.vue

@@ -36,8 +36,7 @@
                     </div>
                     <a-tooltip content="搜索">
                         <div
-                            v-show="!openSearch"
-                            class="button"
+                            :class="{ button: true, 'button-hide': openSearch }"
                             @click="
                                 () => {
                                     openSearch = true;
@@ -59,18 +58,83 @@
                     </a-tooltip>
                 </section>
             </header>
+            <section>
+                <div v-for="(item, key) in data" :key="key" @click="handleClick(item.sug)">
+                    <header>
+                        <img :src="item.img" />
+                        <p>{{ item.title }}</p>
+                    </header>
+                    <p>{{ item.content }}</p>
+                </div>
+            </section>
         </div>
     </main>
 </template>
 <script>
-import { defineComponent, inject, onMounted, ref } from "vue";
+import { defineComponent, inject, ref } from "vue";
 export default defineComponent({
-    setup(props, { emit }) {
+    setup() {
         const openRight = ref(false);
         const openSearch = ref(false);
+        const { helper } = inject("$global");
+        const data = ref([
+            {
+                img: "https://szwl.harix.iamidata.com/static/img/图像生成10.e808b4aa.svg",
+                title: "游戏CG风格",
+                content: "生成游戏CG风格图片",
+                sug: "杰作，最高品质，游戏CG风格，细腻的皮肤，幻想，超详细，复杂的背景，HDR，_________（杰作，最高品质，游戏CG风格，细腻的皮肤，幻想，超详细，复杂的背景，HDR，身材高挑美丽的女性精灵在林中漫步）"
+            },
+            {
+                img: "https://szwl.harix.iamidata.com/static/img/%E5%9B%BE%E5%83%8F%E7%94%9F%E6%88%901.3e53041f.svg",
+                title: "水墨画风格",
+                content: "生成水墨画风格图片",
+                sug: "杰作，最高品质，水墨画，_________（杰作，最高品质，水墨画，一群文人墨客泛舟于江上）"
+            },
+            {
+                img: "https://szwl.harix.iamidata.com/static/img/%E5%9B%BE%E5%83%8F%E7%94%9F%E6%88%908.fbd859d1.svg",
+                title: "皮克斯风格",
+                content: "生成皮克斯风格图片",
+                sug: "杰作，最高品质，皮克斯风格，_______（杰作，最高品质，皮克斯风格，一对在游乐园玩耍的母女）"
+            },
+            {
+                img: "https://szwl.harix.iamidata.com/static/img/%E5%9B%BE%E5%83%8F%E7%94%9F%E6%88%905.d0507cb6.svg",
+                title: "照片/摄影风格",
+                content: "生成照片/摄影风格图片",
+                sug: "照片，高品质，最佳画质，HDR，UHD，8k，_______（照片，高品质，最佳画质，HDR，UHD，8k，在练芭蕾的少女）"
+            },
+            {
+                img: "https://szwl.harix.iamidata.com/static/img/%E5%9B%BE%E5%83%8F%E7%94%9F%E6%88%904.a54bb126.svg",
+                title: "水彩画风格",
+                content: "生成水彩画风格图片",
+                sug: "杰作，最高品质，水彩画，________（杰作，最高品质，水彩画，牡丹花）"
+            },
+            {
+                img: "https://szwl.harix.iamidata.com/static/img/%E5%9B%BE%E5%83%8F%E7%94%9F%E6%88%906.0f9117f2.svg",
+                title: "动漫风格",
+                content: "生成动漫风格图片",
+                sug: "杰作，最高品质，动漫，彩色，细腻，_______（杰作，最高品质，动漫，彩色，细腻，一个看书的少女）"
+            },
+            {
+                img: "https://szwl.harix.iamidata.com/static/img/%E5%9B%BE%E5%83%8F%E7%94%9F%E6%88%904.a54bb126.svg",
+                title: "水彩画风格",
+                content: "生成水彩画风格图片",
+                sug: "杰作，最高品质，水彩画，________（杰作，最高品质，水彩画，牡丹花）"
+            },
+            {
+                img: "https://szwl.harix.iamidata.com/static/img/%E5%9B%BE%E5%83%8F%E7%94%9F%E6%88%906.0f9117f2.svg",
+                title: "动漫风格",
+                content: "生成动漫风格图片",
+                sug: "杰作，最高品质，动漫，彩色，细腻，_______（杰作，最高品质，动漫，彩色，细腻，一个看书的少女）"
+            }
+        ]);
+        const handleClick = (data) => {
+            helper.$bus.emit("set-input", data);
+        };
         return {
+            data,
             openRight,
-            openSearch
+            openSearch,
+            handleClick
         };
     }
 });
@@ -100,9 +164,11 @@ main {
     > div {
         background: #fff;
         height: 100%;
+        display: flex;
+        flex-direction: column;
         > header {
             height: 60px;
-            padding: 0 10px;
+            padding: 0 10px 0 20px;
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -118,6 +184,10 @@ main {
                 height: 60px;
                 display: flex;
                 align-items: center;
+                overflow: hidden;
+                flex: 1;
+                justify-content: right;
+                padding-right: 30px;
                 .input {
                     width: 0px;
                     overflow: hidden;
@@ -135,12 +205,65 @@ main {
                     display: flex;
                     align-items: center;
                     justify-content: center;
+                    overflow: hidden;
+                    &.button-hide {
+                        width: 0px;
+                    }
+                    &:last-child {
+                        position: absolute;
+                        right: 0;
+                    }
                     &:hover {
                         background: rgba(150, 171, 185, 0.2);
                     }
                 }
             }
         }
+        > section {
+            flex: 1;
+            margin: 30px 0;
+            overflow-y: auto;
+            padding: 0 20px;
+            > div {
+                padding: 10px;
+                margin: 12px 0;
+                background: #f6fbfd;
+                border-radius: 8px;
+                cursor: pointer;
+                &:hover {
+                    background: #e9f7f8;
+                }
+                > header {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 12px;
+                    img {
+                        width: 24px;
+                        height: 24px;
+                        margin-right: 10px;
+                    }
+                    p {
+                        font-size: 18px;
+                        font-weight: bold;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+                > p {
+                    height: 40px;
+                    font-size: 15px;
+                    line-height: 20px;
+                    display: block;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    color: #7a7d7e;
+                }
+            }
+        }
     }
 }
 </style>