实战中前端设计思考

🫱 前言：

本文记录一些需求和相应的解决方法，以达成更高效的前后端设计和更好的用户交互。

用户反馈

对AI生成内容进行反馈：

• 每一条回答下点赞和点踩
• 点赞直接提交，点踩弹窗输入意见

AI回答

后端返回带有格式的文本，前端直接渲染。可以使用MarkdownIt，同时进行md格式和html格式的渲染

import MarkdownIt from "markdown-it";
import hljs from "highlight.js"; // 假设你在使用highlight.js进行代码高亮

const md = new MarkdownIt({
    html: true, // 启用HTML渲染
    highlight(str, lang) {
        if (lang && hljs.getLanguage(lang)) {
            try {
                return hljs.highlight(str, { language: lang }).value;
            } catch (err) {
                console.log("highlight", err);
            }
        }

        return ""; // use external default escaping
    },
}).use(copyPlugin);

const content = `
### 标题1
<span style="color: red;">警告</span>
`;

const renderedContent = md.render(content);

// 在Vue组件中
export default {
    data() {
        return {
            content: renderedContent
        };
    },
    template: `
        <div v-html="content"></div>
    `
};