xiaoshu/src/views/Knowledge.vue

<template>
    <div id="app">
        <Slider>
            <Directory />
        </Slider>
        <div class="main">
            <header>
                <top-bar @choose-nav="chooseNav" />
            </header>
            <section>
                <dialog-wrap
                    :suggestions="suggestions"
                    :isSetting="false"
                    :readonly="readonly"
                    @setReadonly="setReadonly"
                />
            </section>
            <footer>
                <message-input :readonly="readonly" />
            </footer>
        </div>
        <record-list :data="recordList" :open="isOpenRecord" @closeRecord="closeRecord" @handleSelect="handleSelect" />
    </div>
</template>
<script>
import Slider from "../components/Slider.vue";
import DialogWrap from "../components/DialogWrap.vue";
import MessageInput from "../components/MessageInput.vue";
import TopBar from "../components/TopBar.vue";
import Directory from "../components/Directory.vue";
import RecordList from "../components/RecordList.vue";
import { defineComponent, ref, inject } from "vue";
export default defineComponent({
    components: {
        Slider,
        DialogWrap,
        MessageInput,
        TopBar,
        Directory,
        RecordList
    },
    setup() {
        const { helper } = inject("$global");
        const suggestions = ["有没有关于AI agent的论文"];
        const readonly = ref(false);
        const isOpenRecord = ref(false);
        const recordList = ref([
            {
                name: "今天",
                list: [
                    "你必须知道的8种产品设计能力提升技巧",
                    "干货|学会写简历，轻松拿offer",
                    "探索了5种改善移动用户体验的绝佳做",
                    "通知必读，再不看就晚啦",
                    "最佳产品管理书籍在此，获取职场上升上"
                ]
            },
            {
                name: "昨天",
                list: ["探索了5种改善移动用户体验的绝佳做", "面试攻略：超级加分的10个面试满分小技"]
            },
            {
                name: "过去7天",
                list: [
                    "你必须知道的8种产品设计能力提升技巧",
                    "干货|学会写简历，轻松拿offer",
                    "探索了5种改善移动用户体验的绝佳做",
                    "通知必读，再不看就晚啦",
                    "最佳产品管理书籍在此，获取职场上升上"
                ]
            },
            {
                name: "过去半年",
                list: ["探索了5种改善移动用户体验的绝佳做", "面试攻略：超级加分的10个面试满分小技"]
            },
            {
                name: "更久以前",
                list: [
                    "你必须知道的8种产品设计能力提升技巧",
                    "干货|学会写简历，轻松拿offer",
                    "探索了5种改善移动用户体验的绝佳做",
                    "通知必读，再不看就晚啦",
                    "最佳产品管理书籍在此，获取职场上升上"
                ]
            }
        ]);
        const handleSelect = (value, index, key, e) => {
            switch (value) {
                case "delete":
                    recordList.value[index].list.splice(key, 1);
                    break;
                case "edit":
                    const div = document.getElementById(`recod-item-${index}-${key}`);
                    const wrapDiv = div.cloneNode();
                    const { width, height, top, left } = div.getBoundingClientRect();
                    wrapDiv.style.width = `${width}px`;
                    wrapDiv.style.height = `${height}px`;
                    wrapDiv.style.top = `${top}px`;
                    wrapDiv.style.left = `${left}px`;
                    wrapDiv.style.position = "absolute";
                    const inputNode = document.createElement("input");
                    inputNode.value = recordList.value[index].list[key];
                    inputNode.style = "width: 100%;height: 100%";
                    wrapDiv.append(inputNode);
                    helper.setDialog(
                        true,
                        wrapDiv,
                        () => {
                            inputNode.focus();
                        },
                        () => {
                            recordList.value[index].list[key] = inputNode.value;
                        }
                    );
                    break;
            }
        };
        const openRecord = () => (isOpenRecord.value = true);
        const chooseNav = (index) => {
            switch (index) {
                case 2:
                    openRecord();
                    break;
            }
        };
        const closeRecord = () => (isOpenRecord.value = false);
        const setReadonly = (status) => {
            readonly.value = status;
        };
        return {
            recordList,
            isOpenRecord,
            readonly,
            setReadonly,
            suggestions,
            handleSelect,
            openRecord,
            closeRecord,
            chooseNav
        };
    }
});
</script>
<style>
.arco-message-list-top {
    top: 350px !important;
}
</style>
<style scoped>
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fbfbfb;
    overflow-y: auto;
    > header {
        display: flex;
        align-items: center;
        justify-content: right;
        padding: 0 20px;
        height: 50px;
        border-bottom: 1px solid rgba(229, 229, 229, 1);
    }
    > section {
        padding: 0 80px;
        flex: 1;
    }
    > footer {
        padding: 0 80px;
        margin-top: 80px;
    }
}
</style>