pbl-teacher-table/src/components/pages/aiAddCourse/aiTips.vue

<template>
    <div class="at_body">
        <div class="at_title">
            <span style="color: #00000066;">{{ ttitle }}</span>
            <span style="margin: 0 5px;color: #00000066;">></span>
            <span>{{ title }}</span>
        </div>
        <div class="at_text">
            <div class="at_text_img">
                <div class="at_restart" @click="reset"></div>
                <div class="at_edit" @click="edit"></div>
            </div>
            <div class="at_text_detail">
                <span v-if="!edtiPan">{{ detail }}</span>
                <textarea v-else rows="5" class="binfo_input binfo_textarea" cols v-model="eDetail"
                    placeholder="请输入提示词"></textarea>
            </div>
            <div class="at_btn" v-if="edtiPan">
                <el-button type="primary" size="mini" @click="confrim">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    props: {
        ttitle: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        detail: {
            type: String,
            default: ''
        },
        pan: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            aiJson: {
                aiDetail: "请根据<课程简要描述>设计一个名为<课程名字>的<课程学科>学科的，面向<面向年级>的项目式学习课程。",
                aiOutline: "请根据<课程简要描述>及#补充参考资料为这个名为<课程名字>的<课程学科>学科的，面向<面向年级>的项目式学习课程设计序列教学活动（需要每个任务都需要至少50个token的详细描述），每个教学活动的活动设计（可以直接使用文件内容）以及每个教学活动的评价量规（学生能做到...）。",
                aiTask: "请根据<教学任务教案>。",
                aiDetail1: "请根据<课程描述>，重新设计该教学任务。任务需要至少50个token的详细描述，包含任务设计，评价标准。",
                aiDetail2: "请你在考虑到整个课程的情况下，优化该任务描述和任务名：<任务名>：<任务描述>",
                aiDetail3: "请你在考虑到整个课程的情况下，**重点考虑该任务及工具名和工具内容的情况下**，优化工具指引。",
                aiDetail4: "请你在考虑到整个课程的情况下，**重点考虑该任务详情**以及工具的情况下，优化评价标准。",
                aiTeacher: "请根据<任务大纲>为每个教学任务设计详细的教案，其中包括但不仅限于该任务的教学目标，教学过程，师生研讨，拓展，学生任务单，相关知识点的练习或Qui以及答案等。",
                teacherDetail: "请根据<教案描述>重新设计该教案。其中包括但不仅限于该任务的教学目标，教学过程，师生研讨，拓展，学生任务单，相关知识点的练习或Qui以及答案等。",
            },
            eDetail: "",
            edtiPan: false
        }
    },
    methods: {
        edit() {
            if (this.edtiPan) {
                this.edtiPan = false
            }
            this.edtiPan = true;
            this.eDetail = JSON.parse(JSON.stringify(this.detail));
        },
        confrim() {
            this.$emit("setAiJson", this.pan, this.eDetail);
            this.edtiPan = false;
        },
        reset() {
            this.$confirm("确定重置此提示词么？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.edtiPan = false;
                    this.$emit("setAiJson", this.pan, this.aiJson[this.pan]);
                })
                .catch(() => {

                });
        }
    },
}
</script>

<style scoped>
.at_body {
    width: 100%;
    margin-bottom: 10px;
}

.at_title {
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.at_text {
    background: #fffef6;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 22px;
    border-radius: 4px;
}

.at_text_img {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 5px;
}

.at_restart {
    background-image: url(../../../assets/icon/course/restart.svg);
    width: 25px;
    height: 25px;
    background-size: 100% 100%;
    cursor: pointer;
}

.at_edit {
    background-image: url(../../../assets/icon/course/edit2.svg);
    width: 25px;
    height: 25px;
    background-size: 100% 100%;
    cursor: pointer;
}

.at_text_detail {
    word-break: break-all;
}

.binfo_input {
    width: 100%;
    margin: 0;
    padding: 5px 7px;
    display: block;
    min-width: 0;
    outline: none;
    box-sizing: border-box;
    background: none;
    border: none;
    border-radius: 4px;
    background: #fff;
    font-size: 15px;
    resize: none;
    font-family: "Microsoft YaHei";
    min-height: 48px;
    /* border: 1px solid #3682fc00; */
    border: 1.5px solid #cad1dc;
}

.binfo_textarea {
    border: 1.5px solid #cad1dc;
    font-size: 15px;
    resize: none;
    /* background: #f6f6f6; */
    font-family: "Microsoft YaHei";
}

.binfo_input:focus-visible {
    border: 1.5px solid #3681fc !important;
}

.at_btn {
    margin-top: 5px;
    text-align: right;
}

.binfo_textarea::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
.binfo_textarea::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.1);
}

/*定义滑块 内阴影+圆角*/
.binfo_textarea::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: rgba(0, 0, 0, 0.1);
}
</style>