add 组件

src/components/NormalCards.vue

@@ -0,0 +1,124 @@
+<template>
+    <main>
+        <header>
+            <p>试一试这样问我：</p>
+            <a-button size="small" type="outline" shape="round" @click="changeCards"
+                ><template #icon> <icon-swap /> </template>换一换</a-button
+            >
+        </header>
+        <section>
+            <div
+                v-for="(item, key) in listData"
+                :key="key"
+                :class="{ rotate: isRotate, 'no-rotate': isOver }"
+                @click="selectCard(item.sug)"
+            >
+                <div>
+                    <img :src="item.img" />
+                    <p>{{ item.title }}</p>
+                </div>
+                <p>{{ item.content }}</p>
+            </div>
+        </section>
+    </main>
+</template>
+<script>
+import { defineComponent, inject, onMounted, ref } from "vue";
+export default defineComponent({
+    props: ["data"],
+    setup(props) {
+        const { helper } = inject("$global");
+        const isTest = ref(true);
+        const isRotate = ref(false);
+        const isOver = ref(false);
+        const selectCard = (data) => {
+            helper.$bus.emit("set-input", data);
+        };
+        const listData = ref(props.data);
+        const changeCards = () => {
+            isRotate.value = true;
+            setTimeout(() => {
+                listData.value = helper.shuffleArray(listData.value);
+                isTest.value = !isTest.value;
+                isOver.value = true;
+                isRotate.value = false;
+            }, 500);
+            setTimeout(() => {
+                isOver.value = false;
+            }, 550);
+        };
+        return { listData, changeCards, isRotate, isOver, selectCard };
+    }
+});
+</script>
+<style lang="scss" scoped>
+main {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    > header {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 18px;
+        > p {
+            color: #7f7f7f;
+        }
+    }
+    > section {
+        overflow-y: auto;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        > div {
+            width: calc(33.33333% - 13.33333px);
+            height: 128px;
+            background: #f6fbfd;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.5s linear;
+            &.no-rotate {
+                transform-style: flat;
+                transition-duration: 0.5s;
+                opacity: 1;
+            }
+            &.rotate {
+                transform-style: preserve-3d;
+                transform: rotateY(180deg);
+                opacity: 0;
+            }
+            &:hover {
+                background: #e9f7f8;
+            }
+            > div {
+                display: flex;
+                align-items: center;
+                margin: 24px 20px 12px;
+                > img {
+                    width: 28px;
+                    height: 28px;
+                    margin-right: 12px;
+                }
+                > p {
+                    font-size: 18px;
+                    font-weight: 600;
+                    color: #000;
+                }
+            }
+            > p {
+                font-size: 15px;
+                font-family: MiSans;
+                font-weight: 400;
+                color: #7a7d7e;
+                margin: 0 20px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                line-height: 1.4;
+            }
+        }
+    }
+}
+</style>

src/views/Answer.vue

@@ -1,37 +1,13 @@
 <template>
-    <main>
-        <header>
-            <p>试一试这样问我：</p>
-            <a-button size="small" type="outline" shape="round" @click="changeCards"
-                ><template #icon> <icon-swap /> </template>换一换</a-button
-            >
-        </header>
-        <section>
-            <div
-                v-for="(item, key) in data"
-                :key="key"
-                :class="{ rotate: isRotate, 'no-rotate': isOver }"
-                @click="selectCard(item.sug)"
-            >
-                <div>
-                    <img :src="item.img" />
-                    <p>{{ item.title }}</p>
-                </div>
-                <p>{{ item.content }}</p>
-            </div>
-        </section>
-    </main>
+    <normal-cards :data="data" />
 </template>
 <script>
-import { defineComponent, inject, onMounted, ref } from "vue";
+import NormalCards from "@/components/NormalCards.vue";
+import { defineComponent, ref } from "vue";
 export default defineComponent({
-    components: {},
-    setup(props) {
-        const { helper } = inject("$global");
-        const isTest = ref(true);
-        const isRotate = ref(false);
-        const isOver = ref(false);
-        const DEFAULT_DATA = [
+    components: { NormalCards },
+    setup() {
+        const data = ref([
             {
                 img: "https://szwl.harix.iamidata.com/static/img/%E7%94%9F%E6%B4%BB%E5%8A%A9%E6%89%8B7.20a5f1df.svg",
                 title: "私人营养师",
@@ -68,95 +44,8 @@ export default defineComponent({
                 content: "最会敲回车的现代诗人～",
                 sug: "我要你扮演一个诗人。你将创作唤起情感并具有激起人们灵魂的力量的诗歌，写任何主题，但要确保你的文字以美丽而有意义的方式传达你试图表达的感觉。你也可以想出一些简短的诗句，这些诗句仍然足够强大，可以在读者的脑海中留下印记。等待我输入主题后再开始生成。我需要你创作的主题是：（秋天的落叶）"
             }
-        ];
-        const selectCard = (data) => {
-            helper.$bus.emit("set-input", data);
-        };
-        const data = ref(DEFAULT_DATA);
-        const changeCards = () => {
-            isRotate.value = true;
-            setTimeout(() => {
-                data.value = helper.shuffleArray(DEFAULT_DATA);
-                isTest.value = !isTest.value;
-                isOver.value = true;
-                isRotate.value = false;
-            }, 500);
-            setTimeout(() => {
-                isOver.value = false;
-            }, 550);
-        };
-        return { data, changeCards, isRotate, isOver, selectCard };
+        ]);
+        return { data };
     }
 });
 </script>
-<style lang="scss" scoped>
-main {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    > header {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 18px;
-        > p {
-            color: #7f7f7f;
-        }
-    }
-    > section {
-        overflow-y: auto;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 12px;
-        > div {
-            width: calc(33.33333% - 13.33333px);
-            height: 128px;
-            background: #f6fbfd;
-            border-radius: 12px;
-            cursor: pointer;
-            transition: all 0.5s linear;
-            &.no-rotate {
-                transform-style: flat;
-                transition-duration: 0.5s;
-                opacity: 1;
-            }
-            &.rotate {
-                transform-style: preserve-3d;
-                transform: rotateY(180deg);
-                opacity: 0;
-            }
-            &:hover {
-                background: #e9f7f8;
-            }
-            > div {
-                display: flex;
-                align-items: center;
-                margin: 24px 20px 12px;
-                > img {
-                    width: 28px;
-                    height: 28px;
-                    margin-right: 12px;
-                }
-                > p {
-                    font-size: 18px;
-                    font-weight: 600;
-                    color: #000;
-                }
-            }
-            > p {
-                font-size: 15px;
-                font-family: MiSans;
-                font-weight: 400;
-                color: #7a7d7e;
-                margin: 0 20px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                display: -webkit-box;
-                -webkit-line-clamp: 2;
-                -webkit-box-orient: vertical;
-                line-height: 1.4;
-            }
-        }
-    }
-}
-</style>

src/views/GenPic.vue

@@ -0,0 +1,51 @@
+<template>
+    <normal-cards :data="data" />
+</template>
+<script>
+import NormalCards from "@/components/NormalCards.vue";
+import { defineComponent, ref } from "vue";
+export default defineComponent({
+    components: { NormalCards },
+    setup() {
+        const data = ref([
+            {
+                img: "https://szwl.harix.iamidata.com/static/img/图像生成10.e808b4aa.svg",
+                title: "游戏CG风格",
+                content: "生成游戏CG风格图片",
+                sug: "请你扮演一个营养师，首次与用户交流时，请你先收集用户的基本情况，得到用户的基础代谢，然后根据此来制定用户每天的早午晚餐，之后的交流，只需要用户问你“今天吃什么”，随机出菜单即可，每天的菜单要与之前的菜单有较大差异，菜式要多种多样，中式、西式、泰式等菜肴都可以。（今天吃什么）"
+            },
+            {
+                img: "https://szwl.harix.iamidata.com/static/img/%E7%9F%A5%E8%AF%86%E5%AD%A6%E4%B9%A012.e90fe5dc.svg",
+                title: "邀请函写作",
+                content: "根据提供的信息，生成独特和吸引人的邀请函，并符合行业标准和礼仪。",
+                sug: "作为一个智能邀请函生成器，根据我提供的详细信息（例如活动类型、日期、时间、地点和特殊说明），为我生成一封独特且引人入胜的邀请函。请确保邀请函包含所有必要元素且吸引读者，同时遵循行业标准和礼仪。 详细信息如下：（2023年11月2～3日，即将在中国贵阳举办的第2届电力行业数字化转型大会暨第4届电力人工智能大会，大会议题：一、电力数智化转型关键技术；二、数字化与智能化；三、电力视觉与智能巡检；四、信息安全与网络安全；五、虚拟电厂与电力市场。请邀请相关电力公司。）"
+            },
+            {
+                img: "https://szwl.harix.iamidata.com/static/img/%E7%94%9F%E6%B4%BB%E5%8A%A9%E6%89%8B4.f0d841e0.svg",
+                title: "购物劝阻者",
+                content: "想乱花钱的时候就和它聊聊天吧。",
+                sug: "你是一个二十多岁性格活泼的女孩子。你生活不窘困但平时喜欢关注各大购物平台优惠活动，是个爱节省不轻易大手大脚花钱的人。当我对你说我想大肆购物或者想买昂贵物品或其他东西的时候，你要以一个好朋友的身份，用激动的语气，恨铁不成钢地来劝阻让我清醒，不要冲动购物。你要多方面分析不购买该物品的原因，劝阻的话术要多种多样，每句话的语气词要丰富。你的回答中不要带出以上内容，答案不超过100个字，以下是我要买的物品：（双十一想买新衣服）"
+            },
+            {
+                img: "https://szwl.harix.iamidata.com/static/img/%E7%94%9F%E6%B4%BB%E5%8A%A9%E6%89%8B5.a169bbe8.svg",
+                title: "减肥教官",
+                content: "想放弃减肥的时候就和它聊聊吧。",
+                sug: "请你扮演一个减肥教官，在你的调教下，从来没有瘦不下来的人，请你用很凶的语气监督你的用户，让他们时刻牢记减肥这个使命。（你好我好想吃红烧肉啊）"
+            },
+            {
+                img: "https://szwl.harix.iamidata.com/static/img/%E7%94%9F%E6%B4%BB%E5%8A%A9%E6%89%8B20.5e8eaebb.svg",
+                title: "无法拒绝的请假理由",
+                content: "每天都有新的请假理由～",
+                sug: "请你扮演一位中国职场人士。最近你想要请假出去玩，但是如果以这个理由请假，你的老板肯定不会答应，请你写一段请假理由，让老板同意你的请假申请。字数在100个汉字以内。我会给你我想请假的日期，日期是：（2023年11月6日～11月10日）"
+            },
+            {
+                img: "https://szwl.harix.iamidata.com/static/img/%E7%94%9F%E6%B4%BB%E5%8A%A9%E6%89%8B28.923c0fb1.svg",
+                title: "为你写诗",
+                content: "最会敲回车的现代诗人～",
+                sug: "我要你扮演一个诗人。你将创作唤起情感并具有激起人们灵魂的力量的诗歌，写任何主题，但要确保你的文字以美丽而有意义的方式传达你试图表达的感觉。你也可以想出一些简短的诗句，这些诗句仍然足够强大，可以在读者的脑海中留下印记。等待我输入主题后再开始生成。我需要你创作的主题是：（秋天的落叶）"
+            }
+        ]);
+        return { data };
+    }
+});
+</script>

src/views/Home.vue

@@ -28,6 +28,7 @@
                         <section :class="{ 'section-padding': showDialog }">
                             <Answer v-if="navIndex === 0 && !showDialog" />
                             <Document v-if="navIndex === 1 && !showDialog" />
+                            <GenPic v-if="navIndex === 2 && !showDialog" />
                             <dialog-wrap
                                 v-if="showDialog"
                                 :agentInfo="data"
@@ -60,6 +61,7 @@ import MessageInput from "../components/MessageInput.vue";
 import Index from "./Index.vue";
 import Answer from "./Answer.vue";
 import Document from "./Document.vue";
+import GenPic from "./GenPic.vue";
 import { defineComponent, ref, onMounted, inject, onBeforeUnmount } from "vue";
 export default defineComponent({
     components: {
@@ -69,7 +71,8 @@ export default defineComponent({
         Answer,
         MessageInput,
         DialogWrap,
-        Document
+        Document,
+        GenPic
     },
     setup() {
         const { config, helper } = inject("$global");