feat: add page

src/components/DocumentCards.vue

@@ -0,0 +1,345 @@
+<template>
+    <main>
+        <section :class="{ 'section-full': hasUpload }">
+            <div v-for="(item, key) in data" :key="key" :style="{ background: item.background }">
+                <img :src="getAssetURL(item.img)" />
+                <div :style="{ color: item.color }">
+                    {{ item.title }}
+                    <span>{{ item.content }}</span>
+                </div>
+            </div>
+        </section>
+        <footer v-if="hasUpload">
+            <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>
+                            <section>
+                                <a-upload
+                                    draggable
+                                    :multiple="true"
+                                    :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"
+                                >
+                                    <template #upload-button>
+                                        <div class="upload-main">
+                                            <p>拖拽文档到这里，或<span>点此上传</span></p>
+                                            <span> 支持上传.pdf, .doc, .docx, .txt, .csv文档，大小不超过30M </span>
+                                        </div>
+                                    </template>
+                                </a-upload>
+                            </section>
+                            <div>
+                                <p>
+                                    <span>已解析文件列表</span>
+                                    <span>共0个</span>
+                                </p>
+                                <div>
+                                    <a-table
+                                        :pagination="false"
+                                        row-key="name"
+                                        :columns="columns"
+                                        :data="tableData"
+                                        :row-selection="rowSelection"
+                                        v-model:selectedKeys="selectedKeys"
+                                    >
+                                        <template #methods="{ record }">
+                                            <a-button @click="$modal.info({ title: 'Name', content: record.name })"
+                                                >删除</a-button
+                                            >
+                                        </template>
+                                    </a-table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </a-popover>
+        </footer>
+    </main>
+</template>
+<script>
+import { defineComponent, ref, inject, reactive } from "vue";
+export default defineComponent({
+    props: ["data", "hasUpload"],
+    setup() {
+        const showUpload = ref(true);
+        const { helper } = inject("$global");
+        const maxSize = 30 * 1024 * 1024;
+        const fileList = [];
+        const onBeforeUpload = (file) => {
+            if (file.size > maxSize) {
+                helper.message("error", `上传文件大小不能超过10M`);
+                return false;
+            }
+            return true;
+        };
+        const onExceedLimit = () => {
+            helper.message("error", `最多上传5个文件`);
+        };
+        const customRequest = async (option) => {
+            const { onSuccess, fileItem } = option;
+            const { file, uid } = fileItem;
+            fileList.push({
+                id: uid,
+                file
+            });
+            onSuccess();
+        };
+        const onBeforeRemove = (data) => {
+            fileList = fileList.filter((item) => item.id !== data.uid);
+            return true;
+        };
+        const selectedKeys = ref(["Jane Doe", "Alisa Ross"]);
+
+        const rowSelection = reactive({
+            type: "checkbox",
+            showCheckedAll: true,
+            onlyCurrent: false
+        });
+
+        const columns = [
+            {
+                title: "文件名称",
+                dataIndex: "name"
+            },
+            {
+                title: "类型",
+                dataIndex: "type"
+            },
+            {
+                title: "大小",
+                dataIndex: "size"
+            },
+            {
+                title: "上传时间",
+                dataIndex: "time"
+            },
+            {
+                title: "操作",
+                slotName: "methods"
+            }
+        ];
+        const tableData = reactive([
+            {
+                key: "1",
+                name: "文件名称1",
+                type: "pdf",
+                size: "13M",
+                time: "2024.9.8"
+            },
+            {
+                key: "2",
+                name: "文件名称2",
+                type: "pdf",
+                size: "13M",
+                time: "2024.9.8"
+            },
+            {
+                key: "3",
+                name: "文件名称3",
+                type: "pdf",
+                size: "13M",
+                time: "2024.9.8"
+            }
+        ]);
+        return {
+            selectedKeys,
+            getAssetURL: helper.getAssetURL,
+            showUpload,
+            onBeforeUpload,
+            onExceedLimit,
+            onBeforeRemove,
+            customRequest,
+            columns,
+            tableData,
+            rowSelection
+        };
+    }
+});
+</script>
+<style lang="scss" scoped>
+.upload-main {
+    width: 800px;
+    height: 109px;
+    background: url("@/assets/document/upload.svg");
+    margin: 0 auto;
+    padding: 24px 0px 24px 277px;
+    background-size: 100%;
+    > p {
+        color: #000;
+        font-weight: bold;
+        margin-bottom: 5px;
+        > span {
+            color: #00aea3;
+            text-decoration: underline;
+        }
+    }
+    > span {
+        font-size: 13px;
+        color: #7f7f7f;
+    }
+}
+main {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    > section {
+        overflow-y: auto;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 20px;
+        &.section-full {
+            flex: 1;
+        }
+        > div {
+            width: 382px;
+            height: 120px;
+            padding: 20px 24px;
+            border-radius: 8px;
+            display: flex;
+            > img {
+                width: 30px;
+                height: 38px;
+                margin-right: 12px;
+            }
+            > div {
+                font-size: 18px;
+                font-weight: bold;
+
+                > span {
+                    font-size: 15px;
+                    font-weight: 400;
+                    color: #797d7f;
+                    margin-top: 8px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    line-height: 1.4;
+                }
+            }
+        }
+    }
+    > 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;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 30px;
+    > header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 13px;
+        > 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);
+            }
+        }
+    }
+    > div {
+        flex: 1;
+        overflow-y: auto;
+        > div {
+            > p {
+                margin: 20px 0;
+                color: #7f7f7f;
+                font-size: 13px;
+                display: flex;
+                justify-content: space-between;
+            }
+        }
+    }
+}
+</style>

src/components/MessageInput.vue

@@ -18,6 +18,8 @@
                     borderRadius: '12px',
                     marginTop: '20px',
                     padding: '0px 30px 0 16px',
+                    background: 'transparent',
+                    border: '1px solid #e3e3e3',
                     minHeight: '90px',
                     paddingBottom: `${value.length > maxLength / 2 ? '20px' : ''}`
                 }"
@@ -85,6 +87,7 @@ export default defineComponent({
     width: 30px;
     height: 100%;
     margin-right: 8px;
+    display: none;
     div {
         width: 30px;
         height: 30px;

src/views/Document.vue

@@ -1,104 +1,15 @@
 <template>
-    <main>
-        <section>
-            <div v-for="(item, key) in data" :key="key" :style="{ background: item.background }">
-                <img :src="getAssetURL(item.img)" />
-                <div :style="{ color: item.color }">
-                    {{ item.title }}
-                    <span>{{ item.content }}</span>
-                </div>
-            </div>
-        </section>
-        <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>
-                            <section>
-                                <a-upload
-                                    draggable
-                                    :multiple="true"
-                                    :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"
-                                >
-                                    <template #upload-button>
-                                        <div class="upload-main">
-                                            <p>拖拽文档到这里，或<span>点此上传</span></p>
-                                            <span> 支持上传.pdf, .doc, .docx, .txt, .csv文档，大小不超过30M </span>
-                                        </div>
-                                    </template>
-                                </a-upload>
-                            </section>
-                            <div>
-                                <p>
-                                    <span>已解析文件列表</span>
-                                    <span>共0个</span>
-                                </p>
-                                <div>
-                                    <a-table
-                                        :pagination="false"
-                                        row-key="name"
-                                        :columns="columns"
-                                        :data="tableData"
-                                        :row-selection="rowSelection"
-                                        v-model:selectedKeys="selectedKeys"
-                                    >
-                                        <template #methods="{ record }">
-                                            <a-button @click="$modal.info({ title: 'Name', content: record.name })"
-                                                >删除</a-button
-                                            >
-                                        </template>
-                                    </a-table>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </a-popover>
-        </footer>
-    </main>
+    <document-cards :data="data" :hasUpload="true" />
 </template>
 <script>
+import DocumentCards from "@/components/DocumentCards.vue";
 import { defineComponent, ref, inject, reactive } from "vue";
 export default defineComponent({
-    components: {},
+    components: {
+        DocumentCards
+    },
     setup() {
-        const showUpload = ref(true);
-        const { helper } = inject("$global");
-        const maxSize = 30 * 1024 * 1024;
-        const fileList = [];
-        const DEFAULT_DATA = [
+        const data = ref([
             {
                 background: "rgba(72, 177, 244, 0.06)",
                 color: "rgb(72, 177, 244)",
@@ -113,249 +24,10 @@ export default defineComponent({
                 title: "多文档问答",
                 content: "支持勾选多个文档，实现基于限定文档的问答"
             }
-        ];
-        const onBeforeUpload = (file) => {
-            if (file.size > maxSize) {
-                helper.message("error", `上传文件大小不能超过10M`);
-                return false;
-            }
-            return true;
-        };
-        const onExceedLimit = () => {
-            helper.message("error", `最多上传5个文件`);
-        };
-        const customRequest = async (option) => {
-            const { onSuccess, fileItem } = option;
-            const { file, uid } = fileItem;
-            fileList.push({
-                id: uid,
-                file
-            });
-            onSuccess();
-        };
-        const onBeforeRemove = (data) => {
-            fileList = fileList.filter((item) => item.id !== data.uid);
-            return true;
-        };
-        const data = ref(DEFAULT_DATA);
-        const selectedKeys = ref(["Jane Doe", "Alisa Ross"]);
-
-        const rowSelection = reactive({
-            type: "checkbox",
-            showCheckedAll: true,
-            onlyCurrent: false
-        });
-
-        const columns = [
-            {
-                title: "文件名称",
-                dataIndex: "name"
-            },
-            {
-                title: "类型",
-                dataIndex: "type"
-            },
-            {
-                title: "大小",
-                dataIndex: "size"
-            },
-            {
-                title: "上传时间",
-                dataIndex: "time"
-            },
-            {
-                title: "操作",
-                slotName: "methods"
-            }
-        ];
-        const tableData = reactive([
-            {
-                key: "1",
-                name: "文件名称1",
-                type: "pdf",
-                size: "13M",
-                time: "2024.9.8"
-            },
-            {
-                key: "2",
-                name: "文件名称2",
-                type: "pdf",
-                size: "13M",
-                time: "2024.9.8"
-            },
-            {
-                key: "3",
-                name: "文件名称3",
-                type: "pdf",
-                size: "13M",
-                time: "2024.9.8"
-            }
         ]);
         return {
-            data,
-            selectedKeys,
-            getAssetURL: helper.getAssetURL,
-            showUpload,
-            onBeforeUpload,
-            onExceedLimit,
-            onBeforeRemove,
-            customRequest,
-            columns,
-            tableData,
-            rowSelection
+            data
         };
     }
 });
 </script>
-<style lang="scss" scoped>
-.upload-main {
-    width: 800px;
-    height: 109px;
-    background: url("@/assets/document/upload.svg");
-    margin: 0 auto;
-    padding: 24px 0px 24px 277px;
-    background-size: 100%;
-    > p {
-        color: #000;
-        font-weight: bold;
-        margin-bottom: 5px;
-        > span {
-            color: #00aea3;
-            text-decoration: underline;
-        }
-    }
-    > span {
-        font-size: 13px;
-        color: #7f7f7f;
-    }
-}
-main {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    > section {
-        overflow-y: auto;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 20px;
-        flex: 1;
-        > div {
-            width: 382px;
-            height: 120px;
-            padding: 20px 24px;
-            border-radius: 8px;
-            display: flex;
-            > img {
-                width: 30px;
-                height: 38px;
-                margin-right: 12px;
-            }
-            > div {
-                font-size: 18px;
-                font-weight: bold;
-
-                > span {
-                    font-size: 15px;
-                    font-weight: 400;
-                    color: #797d7f;
-                    margin-top: 8px;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    display: -webkit-box;
-                    -webkit-line-clamp: 2;
-                    -webkit-box-orient: vertical;
-                    line-height: 1.4;
-                }
-            }
-        }
-    }
-    > 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;
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 30px;
-    > header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 13px;
-        > 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);
-            }
-        }
-    }
-    > div {
-        flex: 1;
-        overflow-y: auto;
-        > div {
-            > p {
-                margin: 20px 0;
-                color: #7f7f7f;
-                font-size: 13px;
-                display: flex;
-                justify-content: space-between;
-            }
-        }
-    }
-}
-</style>

src/views/DocumentAnswer.vue

@@ -0,0 +1,47 @@
+<template>
+    <document-cards :data="data" :hasUpload="false" />
+</template>
+<script>
+import DocumentCards from "@/components/DocumentCards.vue";
+import { defineComponent, ref, inject, reactive } from "vue";
+export default defineComponent({
+    components: {
+        DocumentCards
+    },
+    setup() {
+        const data = ref([
+            {
+                background: "rgba(72, 177, 244, 0.06)",
+                color: "rgb(72, 177, 244)",
+                img: "/src/assets/answer/1.png",
+                title: "多源多问答",
+                content: "检索多个文档内容，通过大模型生成答案"
+            },
+            {
+                background: "rgba(158, 128, 255, 0.06)",
+                color: "rgb(158, 128, 255)",
+                img: "/src/assets/answer/2.png",
+                title: "垂域知识库",
+                content: "通过后台管理平台，快速构建垂域的专业知识库"
+            },
+            {
+                background: "rgba(24, 200, 138, 0.06)",
+                color: "rgb(24, 200, 138)",
+                img: "/src/assets/answer/3.png",
+                title: "文档溯源",
+                content: "答案引用的文档支持预览及文档内容高亮"
+            },
+            {
+                background: "rgba(255, 110, 110, 0.06)",
+                color: "rgb(255, 110, 110)",
+                img: "/src/assets/answer/4.png",
+                title: "文档检索",
+                content: "支持用户查看问题相关的全量文档"
+            }
+        ]);
+        return {
+            data
+        };
+    }
+});
+</script>

src/views/DocumentQuestion.vue

@@ -0,0 +1,33 @@
+<template>
+    <document-cards :data="data" :hasUpload="true" />
+</template>
+<script>
+import DocumentCards from "@/components/DocumentCards.vue";
+import { defineComponent, ref, inject, reactive } from "vue";
+export default defineComponent({
+    components: {
+        DocumentCards
+    },
+    setup() {
+        const data = ref([
+            {
+                background: "rgba(72, 177, 244, 0.06)",
+                color: "rgb(72, 177, 244)",
+                img: "/src/assets/question/1.png",
+                title: "多类型题目",
+                content: "支持生成单选、多选、判断、问答题等多种题目类型"
+            },
+            {
+                background: "rgba(158, 128, 255, 0.06)",
+                color: "rgb(158, 128, 255)",
+                img: "/src/assets/question/2.png",
+                title: "文档管理",
+                content: "基于个人账号实现文档管理和权限区分你的文档他人不可见"
+            }
+        ]);
+        return {
+            data
+        };
+    }
+});
+</script>

src/views/GenDocument.vue

@@ -0,0 +1,47 @@
+<template>
+    <document-cards :data="data" :hasUpload="false" />
+</template>
+<script>
+import DocumentCards from "@/components/DocumentCards.vue";
+import { defineComponent, ref, inject, reactive } from "vue";
+export default defineComponent({
+    components: {
+        DocumentCards
+    },
+    setup() {
+        const data = ref([
+            {
+                background: "rgba(72, 177, 244, 0.06)",
+                color: "rgb(72, 177, 244)",
+                img: "/src/assets/gen/1.png",
+                title: "多类型写作",
+                content: "讲话稿或者发言稿、工作总结、工作方案、述职报告等"
+            },
+            {
+                background: "rgba(158, 128, 255, 0.06)",
+                color: "rgb(158, 128, 255)",
+                img: "/src/assets/gen/2.png",
+                title: "字数控制",
+                content: "可控制字数范围，如800、1000、2000.3000字等，可在这个字数左右生成文档"
+            },
+            {
+                background: "rgba(24, 200, 138, 0.06)",
+                color: "rgb(24, 200, 138)",
+                img: "/src/assets/gen/3.png",
+                title: "续写扩写",
+                content: "对之前生成文章中的其中某一部分进行继续完善，支持1分钟内的3轮"
+            },
+            {
+                background: "rgba(255, 110, 110, 0.06)",
+                color: "rgb(255, 110, 110)",
+                img: "/src/assets/gen/4.png",
+                title: "多个 prompt 组合",
+                content: "支持标题、关键词、大纲等的随意组合"
+            }
+        ]);
+        return {
+            data
+        };
+    }
+});
+</script>

src/views/GenPic.vue

@@ -12,37 +12,37 @@ export default defineComponent({
                 img: "https://szwl.harix.iamidata.com/static/img/图像生成10.e808b4aa.svg",
                 title: "游戏CG风格",
                 content: "生成游戏CG风格图片",
-                sug: "请你扮演一个营养师，首次与用户交流时，请你先收集用户的基本情况，得到用户的基础代谢，然后根据此来制定用户每天的早午晚餐，之后的交流，只需要用户问你“今天吃什么”，随机出菜单即可，每天的菜单要与之前的菜单有较大差异，菜式要多种多样，中式、西式、泰式等菜肴都可以。（今天吃什么）"
+                sug: "杰作，最高品质，游戏CG风格，细腻的皮肤，幻想，超详细，复杂的背景，HDR，_________（杰作，最高品质，游戏CG风格，细腻的皮肤，幻想，超详细，复杂的背景，HDR，身材高挑美丽的女性精灵在林中漫步）"
             },
             {
-                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/%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/%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/%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/%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/%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/%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/%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/%E7%94%9F%E6%B4%BB%E5%8A%A9%E6%89%8B28.923c0fb1.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: "杰作，最高品质，动漫，彩色，细腻，_______（杰作，最高品质，动漫，彩色，细腻，一个看书的少女）"
             }
         ]);
         return { data };

src/views/Home.vue

@@ -29,6 +29,9 @@
                             <Answer v-if="navIndex === 0 && !showDialog" />
                             <Document v-if="navIndex === 1 && !showDialog" />
                             <GenPic v-if="navIndex === 2 && !showDialog" />
+                            <GenDocument v-if="navIndex === 3 && !showDialog" />
+                            <DocumentAnswer v-if="navIndex === 4 && !showDialog" />
+                            <DocumentQuestion v-if="navIndex === 5 && !showDialog" />
                             <dialog-wrap
                                 v-if="showDialog"
                                 :agentInfo="data"
@@ -62,6 +65,9 @@ import Index from "./Index.vue";
 import Answer from "./Answer.vue";
 import Document from "./Document.vue";
 import GenPic from "./GenPic.vue";
+import GenDocument from "./GenDocument.vue";
+import DocumentAnswer from "./DocumentAnswer.vue";
+import DocumentQuestion from "./DocumentQuestion.vue";
 import { defineComponent, ref, onMounted, inject, onBeforeUnmount } from "vue";
 export default defineComponent({
     components: {
@@ -72,7 +78,10 @@ export default defineComponent({
         MessageInput,
         DialogWrap,
         Document,
-        GenPic
+        GenPic,
+        GenDocument,
+        DocumentAnswer,
+        DocumentQuestion
     },
     setup() {
         const { config, helper } = inject("$global");
@@ -211,7 +220,7 @@ export default defineComponent({
                         display: block;
                         color: #000;
                         font-size: 15px;
-                        margin: 13px 0 32px;
+                        margin: 5px 0 32px;
                     }
                 }
             }