uni-app 标准版（Vue3）

<template>
  <view>
    <Conversation :onConversationSelect="handleConversationSelect"></Conversation>
    <view v-if="!conversationList?.length" class="empty-guide">
      <text class="guide-text">暂无会话，请输入用户ID创建聊天</text>
      <view class="input-container">
        <input v-model="inputUserID" class="userid-input" placeholder="请输入对方用户ID"
          placeholder-class="placeholder-style" />
        <button class="guide-btn" @click="handleCreateConversation">创建会话</button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onShow } from '@dcloudio/uni-app'
import { watch, ref } from 'vue';
import Conversation from '../../TUIKit/components/ConversationList/ConversationList.vue'
import { useConversationListState } from '../../TUIKit';

const { createC2CConversation, conversationList, setActiveConversation, totalUnRead } = useConversationListState();
const inputUserID = ref('');

const handleCreateConversation = async () => {
  if (!inputUserID.value.trim()) {
    return;
  }
  await createC2CConversation(inputUserID.value);
};

const updateTabBarBadge = () => {
  const tabBarList = ['pages/profile/profile', 'pages/conversation/conversation']
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]?.route
  const isTabBarPage = currentPage && tabBarList.includes(currentPage)

  if (!isTabBarPage) {
    return
  }

  if (totalUnRead.value > 0) {
    uni.setTabBarBadge({
      index: 0,
      text: totalUnRead.value > 99 ? '99+' : totalUnRead.value.toString()
    });
  }
};

watch(totalUnRead, updateTabBarBadge, { immediate: true });

const handleConversationSelect = (conversation) => {
  const { conversationID } = conversation
  setActiveConversation(conversationID);
  uni.navigateTo({
    url: '/pages/chat/chat',
  });
}

onShow(() => {
  if (totalUnRead.value > 0) {
    uni.setTabBarBadge({
      index: 0,
      text: totalUnRead.value > 99 ? '99+' : totalUnRead.value.toString()
    });
  } else {
    uni.removeTabBarBadge({ index: 0 });
  }
});
</script>

<style scoped>
.empty-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.guide-text {
  font-size: 16px;
  color: red;
  margin-bottom: 20px;
}

.input-container {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userid-input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 15px;
  border: 1px solid #eee;
  border-radius: 6px;
  font-size: 14px;
}

.placeholder-style {
  color: #ccc;
}

.guide-btn {
  width: 50%;
  line-height: 40px;
  height: 40px;
  background-color: #07c160;
  color: white;
  border-radius: 6px;
  font-size: 16px;
}
</style>

<template>
  <div class="TUIChat">
    <MessageList />
    <MessageInput />
  </div>
</template>

<script lang="ts" setup>
import MessageInput from '../../TUIKit/components/MessageInput/MessageInput.vue';
import MessageList from '../../TUIKit/components/MessageList/MessageList.vue';
</script>

<style>
.TUIChat {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

<template>
  <view class="container">
    <view class="profile">
      <image class="avatar" :src="userInfo.avatarUrl || ''" />
      <text class="name">{{ userInfo.userName || '未设置昵称' }}</text>
      <text class="id">userID: {{ userInfo.userId }}</text>
    </view>

    <input v-model="nick" placeholder="新昵称" />
    <input v-model="avatar" placeholder="新头像URL" />

    <button @click="save">保存</button>
    <button @click="logoutHandle" class="logout">退出</button>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useLoginState } from '../../TUIKit'

const { loginUserInfo: userInfo, setSelfInfo, logout } = useLoginState()
const nick = ref('')
const avatar = ref('')

const save = async () => {
  if (!nick.value && !avatar.value) return uni.showToast({ title: '请输入内容', icon: 'none' })
  try {
    await setSelfInfo({ 
      ...(nick.value && { userName: nick.value }),
      ...(avatar.value && { avatarUrl: avatar.value })
    })
    uni.showToast({ title: '保存成功' })
  } catch {
    uni.showToast({ title: '保存失败', icon: 'none' })
  }
}

const logoutHandle = async () => {
  await logout()
  uni.reLaunch({ url: '/pages/login/login' })
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #f0f0f0;
}

.name {
  font-size: 18px;
  margin: 10px 0;
}

.id {
  color: #888;
  font-size: 14px;
}

input {
  width: 100%;
  height: 40px;
  margin-bottom: 15px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

button {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  background: #07c160;
  color: white;
  border-radius: 6px;
}

.logout {
  background: white;
  color: #f56c6c;
  border: 1px solid #f56c6c;
}
</style>

{
	"pages": [
		{
			"path": "pages/login/login",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/conversation/conversation",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/profile/profile",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/chat/chat",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"tabBar": {
		"list": [
			{
				"pagePath": "pages/conversation/conversation",
				"text": "消息",
				"badge": "{{totalUnRead > 99 ? '99+' : totalUnRead.toString()}}"
			},
			{
				"pagePath": "pages/profile/profile",
				"text": "个人中心"
			}
		]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}