104 lines
3.4 KiB
Vue
104 lines
3.4 KiB
Vue
<template>
|
||
<aside class="conversation-list">
|
||
<header class="list-header">
|
||
<div>
|
||
<h2>联系人</h2>
|
||
<p>{{ contacts.contacts.length }} 位好友</p>
|
||
</div>
|
||
<div class="header-actions">
|
||
<button class="icon-button" title="添加联系人" @click="openAddContact">＋</button>
|
||
<button class="icon-button" title="刷新" @click="contacts.refreshContacts({ force: true })">↻</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="search-box">
|
||
<input v-model.trim="keyword" placeholder="搜索联系人">
|
||
</div>
|
||
|
||
<div class="sidebar-scroll">
|
||
<button
|
||
v-for="item in filteredContacts"
|
||
:key="item.id"
|
||
class="conversation-item"
|
||
:class="{ active: item.id === contacts.activeId }"
|
||
@click="contacts.setActiveContact(item.id)"
|
||
>
|
||
<img v-if="item.portrait" class="conversation-avatar image-avatar" :src="item.portrait" alt="">
|
||
<span v-else class="conversation-avatar">{{ item.avatarText }}</span>
|
||
<span class="conversation-copy">
|
||
<strong>{{ item.title }}</strong>
|
||
<small>{{ item.subtitle }}</small>
|
||
</span>
|
||
</button>
|
||
|
||
<div v-if="!filteredContacts.length" class="empty-list">
|
||
<strong>{{ contacts.loading ? '正在加载' : '暂无联系人' }}</strong>
|
||
<span>{{ contacts.loading ? '请稍候' : '好友同步完成后会显示在这里' }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="addingContact" class="modal-backdrop" @click.self="closeAddContact">
|
||
<form class="modal-panel" @submit.prevent="submitAddContact">
|
||
<header>
|
||
<strong>添加联系人</strong>
|
||
<button type="button" class="icon-button" title="关闭" @click="closeAddContact">×</button>
|
||
</header>
|
||
<label>
|
||
<span>用户ID / 手机号 / 用户名</span>
|
||
<input v-model.trim="addKeyword" autocomplete="off" placeholder="请输入要添加的联系人">
|
||
</label>
|
||
<p v-if="contacts.actionError" class="form-error">{{ contacts.actionError }}</p>
|
||
<p v-if="contacts.actionInfo" class="form-info">{{ contacts.actionInfo }}</p>
|
||
<div class="modal-actions">
|
||
<button type="button" class="ghost-inline-action" @click="closeAddContact">取消</button>
|
||
<button class="primary-inline-action" :disabled="contacts.loading || !addKeyword">
|
||
{{ contacts.loading ? '添加中...' : '添加' }}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</aside>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref } from 'vue';
|
||
import { useContactStore } from '@/stores/contacts';
|
||
|
||
const contacts = useContactStore();
|
||
const keyword = ref('');
|
||
const addingContact = ref(false);
|
||
const addKeyword = ref('');
|
||
|
||
const filteredContacts = computed(() => {
|
||
const value = keyword.value.toLowerCase();
|
||
if (!value) {
|
||
return contacts.contacts;
|
||
}
|
||
return contacts.contacts.filter(item => {
|
||
return item.title.toLowerCase().includes(value)
|
||
|| item.subtitle.toLowerCase().includes(value)
|
||
|| item.uid.toLowerCase().includes(value);
|
||
});
|
||
});
|
||
|
||
function openAddContact() {
|
||
contacts.actionError = '';
|
||
contacts.actionInfo = '';
|
||
addKeyword.value = '';
|
||
addingContact.value = true;
|
||
}
|
||
|
||
function closeAddContact() {
|
||
addingContact.value = false;
|
||
}
|
||
|
||
async function submitAddContact() {
|
||
const added = await contacts.addContact(addKeyword.value);
|
||
if (added) {
|
||
window.setTimeout(() => {
|
||
addingContact.value = false;
|
||
}, 500);
|
||
}
|
||
}
|
||
</script>
|