腾讯元器：为了荒天帝，自学从零开发了一个微信小程序...

<view>
    <view class="laytout">
        <view class="aside">Aside</view>
        <view class="right">
            <view class="header">Header</view>
            <view class="main">Main Content</view>
            <view class="footer">footer</view>
        </view>
    </view>
</view>

	.laytout {
		display: flex;
		height: 100%;
		width: 100%;
	}

	.right {
		display: flex;
		flex-direction: column;
	}

	.header {
		height: 5vh;
	}

	.main {
		height: 84vh;
		width: 100vw;
		margin-top: 10px;
	}

	.footer {
		width: 100vw;
	}

<scroll-view class="scroll-Y" scroll-y="true" scroll-with-animation='true'>
</scroll-view>

const messageList = []
messageList.push({ content: '你好', sender: 'right' });
messageList.push({ content: '请问有什么可以帮助您吗', sender: 'left' });

<view class="session" v-for="(message, index) in messageList" :key="index">
    <view class="message-line" :class="message.sender === 'left' ? 'message-line-receive' : 'message-line-send'">
        <image v-if="message.sender === 'left'" src='../../../static/chatgpt.png'></image>
        <view :class="message.sender === 'left' ? 'receive' : 'send'">{{ message.content }}</view>
        <image v-if="message.sender === 'right'" src='../../../static/logo.png'></image>
    </view>
</view>

.session {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.message-line {
    display: flex;
    justify-content: flex-end;
}

.message-line-receive {
    align-self: flex-start;
}

<view class="input">
    <uni-icons type="chat" size="30"></uni-icons>
    <view class="chat-input uni-column">
        <input class="uni-input" v-model="inputMessage" maxlength="200" placeholder="你有什么想知道的？" @confirm="sendMessages" />
    </view>
    <uni-icons class='mic' type="mic" size="30"></uni-icons>
</view>

export const useChat = defineStore('useChat',
	() => {
		const state : Chat = reactive({
			messages: [],
			model_id: 0,
			receiver: '',
			sender: '',
		})

// role 1表示send, 2 receive
const constructMessage = function (message, role) {
    switch (state.model_id) {
        // 元器
        case 0:
            state.sender = 'user'
            state.receiver = 'assistant'
            const templete = {
                "role": "",
                "content": [
                    {
                        "type": "text",
                        "text": message
                    }]
            }
            if (role == 1) {
                templete.role = 'user'
            } else {
                templete.role = 'assistant'

            }
            state.messages.push(templete)
            break;
        case 1:
            break;

    }
}

import {useChat} from '../../../stores/chat'
	
const chat = useChat()
const inputMessage = ref()

const sendMessages = function () {
    // 将新输入的问题添加到messages中
    chat.constructMessage(inputMessage.value, 1)
    inputMessage.value = ''
    uni.request({
        url: "https://yuanqi.tencent.com/openapi/v1/agent/chat/completions",
        method: 'POST',
        header: {
            'X-Source': 'openapi',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer pJhqvfJ1xxx',
        },

        data: {
            "assistant_id": "v0c4FkvN",
            "user_id": "rodneyxiong",
            "stream": false,
            "messages": chat.state.messages
        },
        success: (res) => {
            const message = res.data['choices'][0]['message']['content']
            // 将智能体返回的消息放到messages中
            chat.constructMessage(message, 2)
            console.log(res.data);
        }
    })
}

<view class="session" v-for="(message, index) in chat.state.messages" :key="index">
    <view class="message-line" :class="message.role === chat.state.receiver ? 'message-line-receive' : 'message-line-send'">
        <image v-if="message.role === chat.state.receiver" src="../../../static/chatgpt.jpeg"></image>
        <view :class="message.role === chat.state.receiver ? 'receive' : 'send'">{{ message.content[0].text }}</view>
        <image v-if="message.role === chat.state.sender" src='../../../static/logo.jpeg'></image>
    </view>
</view>

<view class="header">
    <view class="uni-icons">
        <uni-icons type="bars" size="26" @click="collapse"></uni-icons>
        <uni-icons type="plusempty" size="26" @click="createSession"></uni-icons>
    </view>
    <view class='data-select'>
        <uni-data-select v-model="value" :localdata="models" :clear="false" @change="change"></uni-data-select>
    </view>
</view>

<view class="aside" v-show="!layout.state.menuCollapse"> </view>

const collapse = function () {
    layout.state.menuCollapse = !layout.state.menuCollapse
}

.aside {
    width: 75vw;
    transition: width 0.3s ease;
}