From 67d386b10bd8c254e830c8e1f7a2e4e973708454 Mon Sep 17 00:00:00 2001
From: ZRMYDYCG <547471919@qq.com>
Date: Wed, 5 Mar 2025 12:51:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=EF=B8=8F=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=A5=BD=E5=8F=8B=EF=BC=8C=E5=A5=BD=E5=8F=8B?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=EF=BC=8C=E8=AF=A6=E6=83=85=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/add-contact-dialog.css         |  44 ++++++
 .../components/add-contact-dialog.vue         | 136 +++++++++++++++++-
 .../contacts/components/contact-detail.css    |  59 ++++++++
 .../contacts/components/contact-detail.vue    |  76 +++++++++-
 src/view/contacts/components/contact-list.css |  52 +++++++
 src/view/contacts/components/contact-list.vue |  53 +------
 .../components/set-contect-info-dialog.vue    |  69 ++++++++-
 7 files changed, 426 insertions(+), 63 deletions(-)
 create mode 100644 src/view/contacts/components/add-contact-dialog.css
 create mode 100644 src/view/contacts/components/contact-detail.css
 create mode 100644 src/view/contacts/components/contact-list.css

diff --git a/src/view/contacts/components/add-contact-dialog.css b/src/view/contacts/components/add-contact-dialog.css
new file mode 100644
index 0000000..bed2a99
--- /dev/null
+++ b/src/view/contacts/components/add-contact-dialog.css
@@ -0,0 +1,44 @@
+:deep(.gc-column__header) .search {
+    margin-bottom: 15px;
+}
+
+:deep(.el-scrollbar) .gc-list {
+    padding-bottom: 30px;
+}
+
+:deep(.el-scrollbar) .gc-list .gc-list__item .contact-item .user {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+:deep(.el-scrollbar) .gc-list .gc-list__item .contact-item .user .avater {
+    flex-shrink: 0;
+    width: 45px;
+    height: 45px;
+    margin-right: 15px;
+}
+
+:deep(.el-scrollbar) .gc-list .gc-list__item .contact-item .user .avater img {
+    border-radius: 50%;
+}
+
+:deep(.el-scrollbar) .gc-list .gc-list__item .contact-item .user .info {
+    flex: 1;
+}
+
+:deep(.el-scrollbar) .gc-list .gc-list__item .contact-item .user .info .info-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+:deep(.el-scrollbar) .gc-list .gc-list__item .contact-item .user .info .info-top .nickname {
+    flex: 1;
+    width: 0;
+    font-size: 15px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/src/view/contacts/components/add-contact-dialog.vue b/src/view/contacts/components/add-contact-dialog.vue
index 1017376..0f7e7f4 100644
--- a/src/view/contacts/components/add-contact-dialog.vue
+++ b/src/view/contacts/components/add-contact-dialog.vue
@@ -1,7 +1,135 @@
-<script setup lang="ts"></script>
-
 <template>
-  <div></div>
+  <el-dialog
+    v-model="dialogVisible"
+    title="添加好友"
+    width="500"
+    :modal="false"
+    :close-on-click-modal="true"
+    @closed="handleClosed"
+  >
+    <GCColumn ref="gcColumnRef" v-loading="loading" class="!h-[400px]">
+      <template #header>
+        <el-form ref="searchFormRef" :model="searchFormMdl" class="search" @submit.prevent="handleSearchFriend">
+          <el-form-item prop="keywords">
+            <el-input v-model="searchFormMdl.keywords" placeholder="搜索" clearable>
+              <template #prefix>
+                <i class="ri-search-line"></i>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-form>
+      </template>
+
+      <!-- S 搜素结果 -->
+      <GCList
+        ref="contactListRef"
+        :list="contactList"
+        :options="{
+          key: 'user_id',
+        }"
+      >
+        <template #default="{ item }">
+          <div class="contact-item flex w-[100%]">
+            <div class="user flex w-[100%] items-center">
+              <div class="avater">
+                <img :src="item.avatar" alt="" />
+              </div>
+              <div class="info">
+                <div class="info-top flex items-center justify-between">
+                  <p class="nickname truncate">{{ item.nickname }}</p>
+                </div>
+              </div>
+              <div class="oprate">
+                <el-button size="small" @click="handleAdd(item)">加为好友</el-button>
+              </div>
+            </div>
+          </div>
+        </template>
+      </GCList>
+      <!-- E 搜素结果 -->
+    </GCColumn>
+  </el-dialog>
 </template>
 
-<style scoped></style>
+<script setup lang="ts">
+import GCColumn from '@/components/Column/index.vue'
+import GCList from '@/components/List/index.vue'
+import { useCurrentInstance, useLoadMore, usePageList } from '@/hooks'
+import type { ElForm } from 'element-plus'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+
+interface ContactItem {
+  user_id: string | number
+  avatar: string
+  nickname: string
+}
+
+const { proxy } = useCurrentInstance()
+const $api = proxy.$api
+
+const dialogVisible = ref(false)
+const loading = ref(false)
+
+const searchFormRef = ref<InstanceType<typeof ElForm>>()
+const searchFormMdl = reactive({
+  keywords: '',
+})
+
+const {
+  list: contactList,
+  loading: listLoading,
+  getPageList,
+  initData,
+  handleRefresh,
+} = usePageList<ContactItem>({
+  getPageListApi: $api.contact.getContactList,
+  searchParams: searchFormMdl,
+})
+
+const gcColumnRef = ref<InstanceType<typeof GCColumn>>()
+
+// 加载更多逻辑
+onMounted(() => {
+  nextTick(() => {
+    const scrollContainer = gcColumnRef.value?.$el?.querySelector('.el-scrollbar__wrap')
+    if (scrollContainer) {
+      useLoadMore({
+        type: 'bottom',
+        scrollBottomCallback: getPageList,
+        container: scrollContainer,
+        distance: 150,
+      })
+    }
+  })
+})
+
+const handleSearchFriend = () => {
+  handleRefresh()
+}
+
+const handleAdd = (contact: ContactItem) => {
+  // console.log('添加为好友', contact)
+}
+
+const handleClosed = () => {
+  searchFormRef.value?.resetFields()
+  initData()
+}
+
+const open = () => {
+  dialogVisible.value = true
+}
+
+const close = () => {
+  dialogVisible.value = false
+}
+
+defineExpose({
+  open,
+  close,
+})
+</script>
+
+<style scoped>
+@import './add-contact-dialog.css';
+</style>
diff --git a/src/view/contacts/components/contact-detail.css b/src/view/contacts/components/contact-detail.css
new file mode 100644
index 0000000..bb39afc
--- /dev/null
+++ b/src/view/contacts/components/contact-detail.css
@@ -0,0 +1,59 @@
+.contact-detail {
+    flex: 1;
+    height: 850px;
+}
+
+.contact-detail .contact-detail-wrapper {
+    width: 400px;
+    margin: 0 auto;
+}
+
+.contact-detail .contact-detail-wrapper .base-info {
+    padding: 100px 0 45px;
+    border-bottom: 1px solid #e7e7e7;
+}
+
+.contact-detail .contact-detail-wrapper .base-info .left {
+    margin-right: 30px;
+}
+
+.contact-detail .contact-detail-wrapper .base-info .left .nickname {
+    font-size: 18px;
+}
+
+.contact-detail .contact-detail-wrapper .base-info .left .nickname .sex {
+    width: 18px;
+    margin-left: 5px;
+}
+
+.contact-detail .contact-detail-wrapper .base-info .left .desc {
+    font-size: 14px;
+    color: #96a1b1;
+    word-break: break-all;
+    margin-top: 5px;
+}
+
+.contact-detail .contact-detail-wrapper .base-info .right .avater {
+    flex-shrink: 0;
+    width: 45px;
+    height: 45px;
+}
+
+.contact-detail .contact-detail-wrapper .base-info .right .avater img {
+    border-radius: 50%;
+}
+
+.contact-detail .contact-detail-wrapper .other-info {
+    padding: 40px 0 30px;
+    border-bottom: 1px solid #e7e7e7;
+}
+
+.contact-detail .contact-detail-wrapper .other-info .info-row .lable {
+    width: 5em;
+    color: #96a1b1;
+    margin-right: 30px;
+}
+
+.contact-detail .contact-detail-wrapper .oprate {
+    margin-top: 60px;
+}
\ No newline at end of file
diff --git a/src/view/contacts/components/contact-detail.vue b/src/view/contacts/components/contact-detail.vue
index 1017376..4f7ca9e 100644
--- a/src/view/contacts/components/contact-detail.vue
+++ b/src/view/contacts/components/contact-detail.vue
@@ -1,7 +1,77 @@
-<script setup lang="ts"></script>
+<script lang="ts" setup>
+interface Contact {
+  remark: string
+  sex: number | string
+  desc: string
+  avatar: string
+  nickname: string
+  account: string
+  [key: string]: any
+}
+
+interface Props {
+  contact?: Contact
+}
+
+// 定义 props 和 emits
+const emit = defineEmits(['set-contact-info'])
+
+import { withDefaults } from 'vue'
+withDefaults(defineProps<Props>(), {
+  contact: () => ({
+    remark: '',
+    sex: '',
+    desc: '',
+    avatar: '',
+    nickname: '',
+    account: '',
+  }),
+})
+</script>
 
 <template>
-  <div></div>
+  <div class="contact-detail">
+    <div class="contact-detail-wrapper">
+      <div class="base-info flex items-center justify-between">
+        <div class="left">
+          <div class="nickname flex items-center">
+            <span>{{ contact.remark }}</span>
+            <img v-if="String(contact.sex) === '0'" class="sex" src="~@/assets/default_avatar.png" alt="" />
+            <img v-if="String(contact.sex) === '1'" class="sex" src="~@/assets/default_avatar.png" alt="" />
+            <el-button circle size="small" class="ml-[5px]" title="资料设置" @click="$emit('set-contact-info')">
+              <template #icon>
+                <i class="ri-edit-box-line"></i>
+              </template>
+            </el-button>
+          </div>
+          <div class="desc">{{ contact.desc }}</div>
+        </div>
+
+        <div class="right">
+          <div class="avater">
+            <img :src="contact.avater" alt="" />
+          </div>
+        </div>
+      </div>
+
+      <div class="other-info">
+        <div class="info-row flex items-center">
+          <div class="lable">名称</div>
+          <div class="value">{{ contact.nickname }}</div>
+        </div>
+        <div class="info-row flex items-center">
+          <div class="lable">账号</div>
+          <div class="value">{{ contact.account }}</div>
+        </div>
+      </div>
+
+      <div class="oprate">
+        <el-button type="primary" class="mx-auto !block w-[140px]">发消息</el-button>
+      </div>
+    </div>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+@import './contact-detail.css';
+</style>
diff --git a/src/view/contacts/components/contact-list.css b/src/view/contacts/components/contact-list.css
new file mode 100644
index 0000000..675d2c7
--- /dev/null
+++ b/src/view/contacts/components/contact-list.css
@@ -0,0 +1,52 @@
+.contact-list {
+    width: 300px;
+    height: 100vh;
+    border-right: 1px solid #e0e4ea;
+}
+
+.contact-list .gc-column ::v-deep .gc-column__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 70px;
+    padding: 15px;
+    border-bottom: 1px solid #e0e4ea;
+}
+
+.contact-list .gc-column .gc-column__header .oprate .el-button + .el-button {
+    margin-left: 5px;
+}
+
+.contact-list .gc-column .list-title {
+    font-size: 14px;
+    color: #96a1b1;
+    line-height: 45px;
+    padding-left: 15px;
+    margin-bottom: 5px;
+}
+
+.contact-list .gc-column ::v-deep .el-scrollbar .gc-list {
+    padding-bottom: 30px;
+}
+
+.contact-list .gc-column ::v-deep .el-scrollbar .gc-list .gc-list__item .contact-item .user .avater {
+    flex-shrink: 0;
+    width: 45px;
+    height: 45px;
+    margin-right: 15px;
+}
+
+.contact-list .gc-column ::v-deep .el-scrollbar .gc-list .gc-list__item .contact-item .user .avater img {
+    border-radius: 50%;
+}
+
+.contact-list .gc-column ::v-deep .el-scrollbar .gc-list .gc-list__item .contact-item .user .info {
+    flex: 1;
+}
+
+.contact-list .gc-column ::v-deep .el-scrollbar .gc-list .gc-list__item .contact-item .user .info-top .nickname {
+    flex: 1;
+    width: 0;
+    font-size: 15px;
+    font-weight: 600;
+}
\ No newline at end of file
diff --git a/src/view/contacts/components/contact-list.vue b/src/view/contacts/components/contact-list.vue
index 2e6253a..8ea92b9 100644
--- a/src/view/contacts/components/contact-list.vue
+++ b/src/view/contacts/components/contact-list.vue
@@ -124,56 +124,5 @@ const handleChangeContactListItem = (contactId: string | number, contact: Contac
 </template>
 
 <style scoped>
-.contact-list {
-  width: 300px;
-  height: 100vh;
-  border-right: 1px solid #e0e4ea;
-}
-
-.contact-list .gc-column ::v-deep .gc-column__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 70px;
-  padding: 15px;
-  border-bottom: 1px solid #e0e4ea;
-}
-
-.contact-list .gc-column .gc-column__header .oprate .el-button + .el-button {
-  margin-left: 5px;
-}
-
-.contact-list .gc-column .list-title {
-  font-size: 14px;
-  color: #96a1b1;
-  line-height: 45px;
-  padding-left: 15px;
-  margin-bottom: 5px;
-}
-
-.contact-list .gc-column ::v-deep .el-scrollbar .gc-list {
-  padding-bottom: 30px;
-}
-
-.contact-list .gc-column ::v-deep .el-scrollbar .gc-list .gc-list__item .contact-item .user .avater {
-  flex-shrink: 0;
-  width: 45px;
-  height: 45px;
-  margin-right: 15px;
-}
-
-.contact-list .gc-column ::v-deep .el-scrollbar .gc-list .gc-list__item .contact-item .user .avater img {
-  border-radius: 50%;
-}
-
-.contact-list .gc-column ::v-deep .el-scrollbar .gc-list .gc-list__item .contact-item .user .info {
-  flex: 1;
-}
-
-.contact-list .gc-column ::v-deep .el-scrollbar .gc-list .gc-list__item .contact-item .user .info-top .nickname {
-  flex: 1;
-  width: 0;
-  font-size: 15px;
-  font-weight: 600;
-}
+@import './contact-list.css';
 </style>
diff --git a/src/view/contacts/components/set-contect-info-dialog.vue b/src/view/contacts/components/set-contect-info-dialog.vue
index 1017376..35341ec 100644
--- a/src/view/contacts/components/set-contect-info-dialog.vue
+++ b/src/view/contacts/components/set-contect-info-dialog.vue
@@ -1,7 +1,68 @@
-<script setup lang="ts"></script>
-
 <template>
-  <div></div>
+  <el-dialog
+    v-model="dialogVisible"
+    title="资料设置"
+    width="500"
+    :modal="false"
+    :close-on-click-modal="true"
+    @closed="handleClosed"
+  >
+    <el-form ref="formRef" :model="formMdl" label-position="top" class="search" @submit.prevent="handleSetInfo">
+      <el-form-item prop="remark" label="备注">
+        <el-input v-model="formMdl.remark" placeholder="添加备注名" clearable />
+      </el-form-item>
+
+      <el-form-item prop="desc" label="描述">
+        <el-input v-model="formMdl.desc" type="textarea" :rows="3" resize="none" placeholder="添加描述信息" clearable />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="text-center">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" :disabled="isNoneValues" @click="handleSetInfo"> 提交 </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
-<style scoped></style>
+<script setup lang="ts">
+import { useCurrentInstance } from '@/hooks'
+import { computed, ref } from 'vue'
+
+const { $api } = useCurrentInstance()
+
+const dialogVisible = ref(true)
+const formRef = ref<InstanceType<any> | null>(null)
+const formMdl = ref({
+  remark: '',
+  desc: '',
+})
+
+const isNoneValues = computed(() => {
+  return Object.values(formMdl.value).every((value) => {
+    return [null, ''].includes(value)
+  })
+})
+
+const handleSetInfo = () => {
+  // console.log('handleSetInfo')
+}
+
+const handleClosed = () => {
+  formRef.value?.resetFields()
+}
+
+const open = () => {
+  dialogVisible.value = true
+}
+
+const close = () => {
+  dialogVisible.value = false
+}
+
+defineExpose({
+  open,
+  close,
+})
+</script>