feat:更新朋友圈功能

src/views/profile/index.vue

@@ -1,52 +1,150 @@
 <template>
-  <div class="common-mobile-view profile">
-    个人中心
-    <div>
-      <span>版本号：</span>
-      <span>{{ appStore.version }}</span>
+  <div class="profile-view common-mobile-view">
+    <profile-card />
+
+    <div class="menu-card card-item">
+      <div class="menu-item" @click="infoClick">
+        <i class="fas fa-user"></i>
+        <span>基本资料</span>
+        <i class="fas fa-chevron-right"></i>
+      </div>
+
+      <div class="menu-divider"></div>
+
+      <div class="menu-item">
+        <i class="fas fa-cog"></i>
+        <span>账户设置</span>
+        <i class="fas fa-chevron-right"></i>
+      </div>
+
+      <div class="menu-divider"></div>
+
+      <div class="menu-item">
+        <i class="fa-solid fa-comment-dots"></i>
+        <span>反馈意见</span>
+        <i class="fas fa-chevron-right"></i>
+      </div>
+
+      <div class="menu-divider"></div>
+
+      <div class="menu-item" @click="passwordClick">
+        <i class="fas fa-key"></i>
+        <span>更改密码</span>
+        <i class="fas fa-chevron-right"></i>
+      </div>
+
+      <div class="menu-divider"></div>
+
+      <div class="menu-item">
+        <i class="fa-solid fa-file-arrow-down"></i>
+        <span>软件下载</span>
+        <i class="fas fa-chevron-right"></i>
+      </div>
+
+      <div class="menu-divider"></div>
+
+      <div class="menu-item" @click="refreshClick">
+        <i class="fa-solid fa-arrows-rotate"></i>
+        <span>检查更新</span>
+        <i class="fas fa-chevron-right"></i>
+      </div>
+
+      <div class="menu-divider"></div>
+
+      <div class="menu-item" @click="logoutClick">
+        <i class="fas fa-sign-out-alt"></i>
+        <span>退出登录</span>
+        <i class="fas fa-chevron-right"></i>
+      </div>
     </div>
 
-    <div>
-      IOS下载地址：<el-image :src="getAssetsImageFile('ios.png')"/>
-    </div>
-    <div>
-      Android下载地址：
-    </div>
-
-    <div class="button-container">
-      <el-button type="primary" @click="viewLatestVersionClick">检查新版本</el-button>
-      <el-button type="primary" @click="logoutClick">退出登录</el-button>
-    </div>
+    <div class="version">版本号 {{ appStore.version }}</div>
   </div>
 </template>
 
-<script setup lang="ts">
-import { useAppStore } from '@/store/app.ts'
+<script lang="ts" setup>
+import ProfileCard from '@/components/Profile/ProfileCard.vue'
 import { useUserStore } from '@/store/user.ts'
-import { useAuthStore } from '@/store/auth.ts'
+import { useAppStore } from '@/store/app.ts'
+import { useAuthStore } from '@/store/auth'
 import { useRouter } from 'vue-router'
-import { getAssetsImageFile } from '@/utils'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { onMounted } from 'vue'
 
-const appStore = useAppStore()
 const userStore = useUserStore()
 const authStore = useAuthStore()
+const appStore = useAppStore()
 const router = useRouter()
 
-const viewLatestVersionClick = async () => {
+onMounted(() => {
+  userStore.queryUser(userStore.getUserId() as number)
+})
+
+const infoClick = () => {
+  router.push('/profile/info')
+}
+
+const passwordClick = () => {
+  // appStore.isShowMobileBack = true
+  // router.push('/mobile-home/profile/password')
+}
+
+const refreshClick = async () => {
   await router.push('/')
   location.reload()
 }
 
-const logoutClick = async () => {
-  await authStore.handleLogout(userStore.userInfo.username)
-  await router.push('/')
+const logoutClick = () => {
+  commonElMessageBox('请确认是否退出系统？').then(async () => {
+    userStore.removeAll()
+    await authStore.handleLogout(userStore.userInfo.username)
+    await router.push('/')
+  })
 }
 </script>
 
 <style lang="scss">
-.profile {
+.profile-view {
   display: flex;
   flex-direction: column;
   gap: 10px;
+
+  .menu-card {
+    border-radius: 10px;
+    padding: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    .menu-item {
+      padding: 10px;
+      display: grid;
+      grid-template-columns: 20px 1fr 15px;
+      align-items: center;
+      gap: 5px;
+      cursor: pointer;
+      font-size: 1.2rem;
+
+      i {
+        color: var(--el-color-primary);
+      }
+
+      span {
+        color: var(--color-text);
+      }
+    }
+
+    .menu-divider {
+      height: 1px;
+      background-color: #E8E8E8;
+      margin: 0 5px;
+    }
+  }
+
+  .version {
+    align-self: center;
+    color: #999;
+  }
 }
 </style>