feat: update view and reaction

components/CommentItem.vue

@@ -107,7 +107,7 @@
 </template>
 <script lang="ts" setup>
 import { CommentParams, CommentVo } from 'Comment'
-import { MovieVo } from 'Movie'
+import type { MovieVo } from 'Movie'
 import { useUserStore } from '~~/stores/user'
 import { deleteComment, addComment } from '~~/composables/apis/comment'
 import { children } from 'dom7'

components/MMGC/Header.vue

@@ -6,22 +6,23 @@
  </section>
  <nav class="MMGC-nav">
  <p class="nav-item">
+ <div class="active" :class="{active2:currentRoute(`/activity/${activityId}/about`)}"></div>
  <NuxtLink :to="localePath(`/activity/${activityId}/about`)"> {{ $t('desc') }} </NuxtLink>
  </p>
- <i class="split">/</i>
  <p class="nav-item">
+ <div class="active" :class="{active2:currentRoute(`/activity/${activityId}/main`)}"></div>
  <NuxtLink :to="localePath(`/activity/${activityId}/main`)">
  {{ $t('mainStage') }}
  </NuxtLink>
  </p>
- <i class="split">/</i>
  <p class="nav-item">
+ <div class="active" :class="{active2:currentRoute(`/activity/${activityId}/support`)}"></div>
  <NuxtLink :to="localePath(`/activity/${activityId}/support`)">
  {{ $t('organSponsor') }}
  </NuxtLink>
  </p>
- <i class="split">/</i>
  <p class="nav-item">
+ <div class="active" :class="{active2:currentRoute(`/activity/${activityId}/history`)}"></div>
  <NuxtLink :to="localePath(`/activity/${activityId}/history`)">
  {{ $t('history') }}
  </NuxtLink>
@@ -110,12 +111,13 @@
  </div>
 </template>
 <script setup lang="ts">
-import { MemberVo } from 'Member'
 import { storeToRefs } from 'pinia'
 import { useGlobalStore } from '~~/stores/global'
 import { useUserStore } from '~~/stores/user'
 import lodash from 'lodash'
-import { Ref } from 'vue'
+import type { Ref } from 'vue'
+import type { MemberVo } from 'Member'
+
 const route = useRoute()
 const store = useGlobalStore()
 const localePath = useLocalePath()
@@ -128,6 +130,7 @@ const userInfo = storeToRefs(userStore).userInfo as unknown as Ref<MemberVo>
 
 const activityId =
  parseInt(route.params.activityId?.toString()) || globalStore.config?.currentActivityId
+
 let activityData = ref<any>()
 
 if (activityId === globalStore.config?.currentActivityId) {
@@ -147,6 +150,11 @@ const isUserInfo = computed(() => {
  return !lodash.isEmpty(userInfo.value)
 })
 
+const currentRoute = (link:any)=> {
+ const route2 = localeRoute('link')
+ return route2?.fullPath === route.fullPath
+}
+
 const goWelcome = () => {
  const route = localeRoute('/welcome')
  navigateTo(route?.fullPath)
@@ -198,6 +206,16 @@ const logout = () => {
  transition: color 0.4s ease;
  margin: 0 6px;
  width: 50px;
+ display: flex;
+ align-items: center;
+ .active {
+ width: 8px;
+ height: 16px;
+ transition: all ease 0.4s;
+ background-color: gray;
+ border-radius: 6px;
+ margin-right: 4px;
+ }
  a {
  display: flex;
  flex-direction: column;
@@ -211,6 +229,13 @@ const logout = () => {
  }
  &:hover {
  color: $themeColor;
+ .active {
+ background-color: $themeColor;
+ transform: scaleY(1.2);
+ &.active2 {
+ background-color: $themeColor;
+ }
+ }
  }
  }
  .split {
@@ -262,7 +287,7 @@ const logout = () => {
  font-size: $bigFontSize;
  font-weight: 600;
  .nav-item {
- margin: 0 4px;
+ margin: 0 16px;
  width: unset;
  a {
  flex-direction: row;

components/MemberPop.vue

@@ -40,7 +40,7 @@
  </el-popover>
 </template>
 <script setup lang="ts">
-import { MemberVo } from 'Member'
+import type { MemberVo } from 'Member'
 import { calcZip } from '~~/utils'
 
 const props = defineProps<{

components/MovieListCard.vue

@@ -78,7 +78,7 @@
  </div>
 </template>
 <script lang="ts" setup>
-import { MovieVo } from 'Movie'
+import type { MovieVo } from 'Movie'
 
 defineProps<{
  movieItem: MovieVo

components/MovieShowItem.vue

@@ -5,9 +5,6 @@
  v-if="movieItem.moviePlaylink"
  :video-url="movieItem.moviePlaylink"
  :cover="movieItem.movieCover"
- :ref="setItemRefs"
- @on-play="canAutoPlay = false"
- @on-pause="canAutoPlay = true"
  />
  <div v-else class="w-full h-full">
  <MyCustomImage :img="movieItem.movieCover"></MyCustomImage>
@@ -72,7 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { MovieVo } from 'Movie'
+import type { MovieVo } from 'Movie'
 defineProps<{
  movieItem: MovieVo
 }>()

components/MyCustom/AvatarUpload.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ElMessage, UploadRequestOptions } from 'element-plus'
+import { ElMessage, type UploadRequestOptions } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 
 import type { UploadProps } from 'element-plus'

components/MyInfo.vue

@@ -1,46 +1,61 @@
 <template>
- <div @mouseover="isShow = true" class="relative" v-if="memberVo">
+ <div class="relative" v-if="memberVo" ref="ref1">
  <ElAvatar :src="memberVo.avatar || undefined" class="mx-1">{{ noAvatar }}</ElAvatar>
- <div class="popover" @mouseleave="showOff" v-show="isShow" @mouseover="isShow = true">
- <div class="flex flex-col items-center">
- <ElAvatar :size="60" :src="memberVo.avatar || undefined" class="mx-1">{{
- noAvatar
- }}</ElAvatar>
- <p class="title mt-1" style="font-size: 24px">{{ memberVo.memberName }}</p>
- <p>{{ memberVo.username }}</p>
- <p v-if="snsSites.length">{{ $t('sns') }}</p>
- <div class="flex flex-wrap">
- <div
- v-for="item in snsSites"
- :key="item.value"
- class="cursor-pointer"
- :title="`${$t('clickJump')} ${item.value}`"
- @click="openlink(item.value)"
- >
- <Icon :name="item.icon" :style="{ color: item.color }" size="16px" class="mr-1" />
+ <Transition name="up-to-down">
+ <div class="popover" ref="ref2" v-show="isHover || isHover1">
+ <div class="flex flex-col">
+ <div class="flex items-center justify-between">
+ <ElAvatar :size="52" :src="memberVo.avatar || undefined">{{ noAvatar }}</ElAvatar>
+ <div class="flex flex-col ml-2">
+ <p class="name1">{{ memberVo.memberName }}</p>
+ <p class="username">@{{ memberVo.username }}</p>
+ </div>
+ </div>
+ <div class="flex flex-col mt-4">
+ <p class="text-light-50 text-lg">{{ $t('sns') }}</p>
+ <div class="flex flex-wrap" v-if="snsSites.length">
+ <div
+ v-for="item in snsSites"
+ :key="item.value"
+ class="cursor-pointer mx-1"
+ :title="`${$t('clickJump')} ${item.value}`"
+ @click="openlink(item.value)"
+ >
+ <Icon :name="item.icon" :style="{ color: item.color }" size="16px" class="mr-1" />
+ </div>
+ </div>
+ <p v-else>暂未关联社交媒体</p>
  </div>
  </div>
- </div>
- <div class="wrapper">
- <div class="btn" @click="editMyInfo"><Icon name="ion:edit"></Icon>{{ $t('update') }}</div>
- <div class="btn" @click="logout">
- <Icon name="ion:log-out-outline"></Icon>{{ $t('logout') }}
+
+ <div class="wrapper">
+ <div class="btn bg-blue-500" @click="editMyInfo">
+ <Icon name="ion:edit"></Icon>{{ $t('update') }}
+ </div>
+ <div class="btn bg-red-500" @click="logout">
+ <Icon name="ion:log-out-outline"></Icon>{{ $t('logout') }}
+ </div>
  </div>
+ <MyInfoEdit ref="editRef" />
  </div>
- <MyInfoEdit ref="editRef" />
- </div>
+ </Transition>
  </div>
 </template>
 <script setup lang="ts">
 import _ from 'lodash'
-import { MemberVo } from 'Member'
+import type { MemberVo } from 'Member'
+
 const props = defineProps<{
  memberVo: MemberVo
 }>()
-const { openlink, noAvatar, snsSites } = useMemberPop(props.memberVo)
 const emit = defineEmits(['logout'])
+const { openlink, noAvatar, snsSites } = useMemberPop(props.memberVo)
 const isShow = ref(false)
+const ref2 = ref()
+const ref1 = ref()
 
+const isHover = useElementHover(ref2)
+const isHover1 = useElementHover(ref1)
 const editRef = ref()
 
 const logout = () => {
@@ -60,25 +75,35 @@ const showOff = _.debounce(() => {
 <style lang="scss" scoped>
 .popover {
  position: absolute;
- padding: 3px;
+ padding: 8px 8px;
  top: 120%;
- right: -50%;
+ right: -45%;
  width: 12rem;
- height: 15rem;
- border-radius: 30px;
+ height: 13rem;
+ border-radius: 16px;
  color: $themeNotActiveColor;
  box-shadow: 0 0 10px rgba(223, 62, 13, 0.212);
  display: flex;
+ border: 2px solid $themeColor;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(65, 3, 3, 0.178);
  backdrop-filter: blur(5px);
  z-index: 1;
  overflow: hidden;
+ .name1 {
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: white;
+ @include showLine(2);
+ }
+ .username {
+ font-size: 0.8rem;
+ color: rgb(192, 192, 192);
+ }
  .wrapper {
- width: 105%;
- transform: translateY(4px);
+ width: 100%;
  flex-shrink: 0;
  .btn {
  width: 100%;
@@ -88,13 +113,12 @@ const showOff = _.debounce(() => {
  padding: 0 20px;
  height: 28px;
  font-size: 14px;
- border-bottom: 1px solid;
- background-color: rgba(39, 24, 1, 0.342);
+ border-radius: 16px;
+ margin: 4px 0;
  transition: 0.4s ease all;
- color: $themeNotActiveColor;
+ color: white;
  &:hover {
  color: $themeColor;
- background-color: rgba(39, 24, 1, 0.87);
  }
  }
  }

components/MyInfoEdit.vue

@@ -44,7 +44,7 @@
  </el-dialog>
 </template>
 <script setup lang="ts">
-import { MemberVo } from 'Member'
+import type { MemberVo } from 'Member'
 import { UserApi } from '~~/composables/apis/user'
 import { useUserStore } from '~~/stores/user'
 import { genral } from '~~/composables/useFormRules'

components/ReviewItem.vue

@@ -0,0 +1,83 @@
+<template>
+ <div class="review-item mb-2">
+ <div class="review-content mr-1 flex-1">
+ <p>{{ comment?.content }}</p>
+ <div class="triangle"></div>
+ <div class="info">
+ <p class="publish-time">发布于:{{ comment.createTime }}</p>
+ <el-popconfirm
+ :title="$t('confirmDelete')"
+ @confirm="deleteMyComment"
+ v-if="userInfo && userInfo.memberId === comment.memberVo?.memberId"
+ >
+ <template #reference>
+ <ElButton type="danger" link size="small">{{ $t('delete') }}</ElButton>
+ </template>
+ </el-popconfirm>
+ </div>
+ </div>
+ <div class="flex-shrink-0 translate-y-4">
+ <MemberPop :member-vo="comment.memberVo" v-if="comment.memberVo" :size="28" />
+ <MemberPop v-else :member-vo="{}" :size="28" />
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import type { CommentVo } from 'Comment'
+import type { MovieVo } from 'Movie'
+import { useUserStore } from '~~/stores/user'
+import { deleteComment } from '~~/composables/apis/comment'
+
+const { userInfo } = useUserStore()
+const props = defineProps<{
+ comment: CommentVo
+ movieDetail: MovieVo
+ isChildren?: boolean
+ level: number
+ topPrarentId: number
+}>()
+const emits = defineEmits(['refresh', 'sentReply'])
+
+const { t } = useI18n()
+
+const deleteMyComment = async () => {
+ await deleteComment(props.comment.commentId)
+ ElMessage.success(t('deleteSuccess'))
+ emits('refresh')
+}
+</script>
+
+<style lang="scss" scoped>
+.review-item {
+ display: flex;
+ align-items: flex-end;
+ .review-content {
+ border-radius: 12px;
+ background-color: white;
+ padding: 8px;
+ position: relative;
+ color: black;
+ .info {
+ font-size: 10px;
+ margin-top: 1rem;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ .publish-time {
+ color: #726d6d;
+ }
+ }
+ .triangle {
+ position: absolute;
+ bottom: -2px;
+ right: 3px;
+ color: white;
+ width: 10px;
+ height: 10px;
+ background-color: white;
+ clip-path: polygon(17% 0, 45% 0, 62% 0, 83% 55%, 100% 100%, 46% 78%, 10% 71%, 0 38%, 0 0);
+ }
+ }
+}
+</style>