xiaoshu/src/views/Home.vue

<template>
    <div id="app">
        <Slider @select-nav="selectNav" :index="navIndex" v-show="!closeOthers"></Slider>
        <div class="main">
            <div :class="{ 'history-wrap': true, 'history-wrap-open': !closeOthers && navIndex > -1 }">
                <History
                    @set-new="
                        () => {
                            showDialog = false;
                        }
                    "
                    @handle-click="selectHistory"
                />
            </div>
            <div class="wrap">
                <Index :number="swiperNumber" v-if="navIndex === -1" @select-nav="selectNav" />
                <div class="border-wrap" v-else>
                    <div>
                        <header>
                            <div>
                                <img src="@/assets/other/robot.gif" width="52" />
                                <p>
                                    信通小数<span>{{ slider[navIndex].title }}</span>
                                </p>
                                <span>{{ slider[navIndex].dialog }}</span>
                            </div>
                        </header>
                        <section>
                            <Answer v-if="navIndex === 0 && !showDialog" />
                            <dialog-wrap
                                v-if="showDialog"
                                :agentInfo="data"
                                :userInfo="userInfo"
                                :isSetting="false"
                                :readonly="readonly"
                                @setReadonly="setReadonly"
                            />
                        </section>
                        <footer>
                            <message-input :readonly="readonly" eventName="open-dialog" />
                        </footer>
                        <a-tooltip :content="closeOthers ? '收起' : '展开'">
                            <div @click="openAll">
                                <img src="@/assets/other/open.svg" width="20" v-if="closeOthers" />
                                <img src="@/assets/other/close.svg" width="20" v-else />
                            </div>
                        </a-tooltip>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import DialogWrap from "../components/DialogWrap.vue";
import Slider from "../components/Slider.vue";
import History from "../components/History.vue";
import MessageInput from "../components/MessageInput.vue";
import Index from "./Index.vue";
import Answer from "./Answer.vue";
import { defineComponent, ref, onMounted, inject, onBeforeUnmount } from "vue";
export default defineComponent({
    components: {
        Slider,
        History,
        Index,
        Answer,
        MessageInput,
        DialogWrap
    },
    setup() {
        const { config, helper } = inject("$global");
        const closeOthers = ref(false);
        const swiperNumber = ref(5);
        const navIndex = ref(-1);
        const readonly = ref(false);
        const showDialog = ref(false);
        const userInfo = {
            name: "奇橙",
            avatar: "https://s21.ax1x.com/2024/04/18/pFzyA0O.png"
        };
        const data = {
            avatar: "https://s21.ax1x.com/2024/04/18/pFzyA0O.png",
            title: "论文解读助手",
            name: "@奇橙",
            content: "你好，我是一名专业的论文检索助手，可以帮你查找并详细解读你需要的学术论文。",
            hot: 345,
            star: 34,
            id: "111"
        };
        const openAll = () => {
            closeOthers.value = !closeOthers.value;
        };
        const selectNav = (index) => {
            navIndex.value = index;
            if (index === -1) {
                swiperNumber.value = 5;
            } else {
                swiperNumber.value = 4;
            }
            helper.$bus.emit("stop-writing");
            showDialog.value = false;
        };
        const setReadonly = (status) => {
            readonly.value = status;
        };
        const selectHistory = (id) => {
            console.log(id);
        };
        onMounted(() => {
            helper.$bus.on("open-dialog", (value) => {
                showDialog.value = true;
                setTimeout(() => {
                    helper.$bus.emit("send-message", value);
                }, 300);
            });
        });
        onBeforeUnmount(() => {
            helper.$bus.off("open-dialog");
        });
        return {
            navIndex,
            selectNav,
            swiperNumber,
            slider: config.slider,
            readonly,
            userInfo,
            setReadonly,
            data,
            showDialog,
            selectHistory,
            closeOthers,
            openAll
        };
    }
});
</script>
<style lang="scss" scoped>
.main {
    flex: 1;
    position: relative;
    display: flex;
    .history-wrap {
        width: 0px;
        opacity: 0;
        overflow: hidden;
        transition-duration: 0.3s;
        transition-property: width;
        &-open {
            opacity: 1;
            width: 260px;
        }
    }
    .wrap {
        flex: 1;
    }
    .border-wrap {
        position: relative;
        padding: 30px 16px 30px 40px;
        flex: 1;
        height: 100%;
        > div {
            width: 100%;
            height: 100%;
            background: #fff;
            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.03);
            border-radius: 14px;
            display: flex;
            flex-direction: column;
            padding: 0 32px;
            position: relative;
            > div {
                position: absolute;
                bottom: -10px;
                left: -10px;
                z-index: 10;
                width: 38px;
                height: 38px;
                border-radius: 20px;
                background: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }
            > header {
                > div {
                    display: inline-block;
                    margin-top: 20px;
                    > img {
                        transform: translateX(-12px);
                    }
                    > p {
                        font-size: 36px;
                        font-weight: bold;
                        color: #000;
                        > span {
                            font-weight: bold;
                            background: linear-gradient(180deg, #41d98c, #31c4c9);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                    }
                    > span {
                        display: block;
                        color: #000;
                        font-size: 15px;
                        margin: 13px 0 32px;
                    }
                }
            }
            > section {
                flex: 1;
                padding-bottom: 50px;
                overflow: hidden;
            }
            > footer {
            }
        }
    }
}
</style>