feat(app): 优化点赞功能和界面展示

packages/app/src/components/moment-item.vue

@@ -6,6 +6,7 @@ import Tag from './tag.vue'
 import { stringify } from 'qs'
 import { isImageOrVideo } from '../core/utils/common'
 import { useRouter } from '../core/utils/router'
+import { likeActived, likeBlack } from '@designer-hub/assets/src/icons'
 
 const props = defineProps({
   options: {
@@ -149,8 +150,16 @@ onMounted(async () => {
         <wd-img width="15" height="15" src="/static/svgs/comment.svg"></wd-img>
         <view class="ml-1">{{ props.options.reviewCount }}</view>
       </view>
-      <view class="flex items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5">
-        <wd-img width="15" height="15" src="/static/svgs/like.svg"></wd-img>
+      <view
+        class="flex items-center text-3.5 font-400 line-height-5.5"
+        :class="[options.ownUpvote ? 'text-[#ca5141]' : 'text-[rgba(0,0,0,0.85)]']"
+      >
+        <template v-if="options.ownUpvote">
+          <wd-img width="18" height="18" :src="likeActived"></wd-img>
+        </template>
+        <template v-else>
+          <wd-img width="18" height="18" :src="likeBlack"></wd-img>
+        </template>
         <view class="ml-1">{{ props.options.upvoteCount }}</view>
       </view>
     </view>

packages/app/src/pages/home/moment/index.vue

@@ -16,16 +16,14 @@ import {
   shareCircle,
 } from '../../../core/libs/requests'
 import { handleUpvoteClick } from '../../../core/libs/actions'
-import { thumbsUp } from '../../../core/libs/svgs'
 import CommentItem from '../components/comment-item.vue'
-import AvatarGroupCasual from '@/components/avatar-group-casual/avatar-group-casual.vue'
 import { useUserStore } from '../../../store'
 import { storeToRefs } from 'pinia'
 import { isImageOrVideo } from '../../../core/utils/common'
-import { list } from 'radash'
 import dayjs from 'dayjs'
 import SectionHeading from '@/components/section-heading.vue'
 import BottomAppBar from '@/components/bottom-app-bar.vue'
+import { likeActived, likeBlack } from '@designer-hub/assets/src/icons'
 
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
@@ -218,7 +216,9 @@ onShareAppMessage(async () => {
               <view
                 class="flex flex-col items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5"
               >
-                <wd-img width="15" height="15" src="/static/svgs/share.svg"></wd-img>
+                <div class="w-4.5 h-4.5 flex items-center justify-center">
+                  <wd-img width="15" height="15" src="/static/svgs/share.svg"></wd-img>
+                </div>
                 <view class="">{{ data?.shareCount || 0 }}</view>
               </view>
             </button>
@@ -226,7 +226,9 @@ onShareAppMessage(async () => {
           <view
             class="flex flex-col items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5"
           >
-            <wd-img width="15" height="15" src="/static/svgs/comment.svg"></wd-img>
+            <div class="w-4.5 h-4.5 flex items-center justify-center">
+              <wd-img width="15" height="15" src="/static/svgs/comment.svg"></wd-img>
+            </div>
             <view class="">{{ data?.reviewCount }}</view>
           </view>
           <view
@@ -243,7 +245,12 @@ onShareAppMessage(async () => {
               )
             "
           >
-            <wd-img width="15" height="15" :src="thumbsUp"></wd-img>
+            <template v-if="data.ownUpvote">
+              <wd-img width="18" height="18" :src="likeActived"></wd-img>
+            </template>
+            <template v-else>
+              <wd-img width="18" height="18" :src="likeBlack"></wd-img>
+            </template>
             <view>{{ data.upvoteCount }}</view>
           </view>
         </view>

packages/app/src/pages/home/study-tour/index.vue

@@ -12,8 +12,9 @@ import MomentItem from '@/components/moment-item.vue'
 import SectionHeading from '@/components/section-heading.vue'
 import ClassItem from '../components/class-item.vue'
 import TimeLine from './components/time-line.vue'
-import { getCircles, getContents } from '../../../core/libs/requests'
+import { getBanners, getCircles, getContents } from '../../../core/libs/requests'
 import { NetImages } from '../../../core/libs/net-images'
+import { BannerMode } from '../../../core/models/moment'
 
 const { data: studyTours, run: setStudyTours } = useRequest(() => getContents({ contentType: '1' }))
 const { data: classmates, run: setClassmates } = useRequest(
@@ -23,10 +24,14 @@ const { data: classmates, run: setClassmates } = useRequest(
 const { data: circles, run: setCircles } = useRequest(() => getCircles({ tagName: '' }), {
   initialData: { list: [] },
 })
+const { data: banners, run: setBanners } = useRequest(() =>
+  getBanners({ mode: BannerMode.StudyTour }),
+)
 onMounted(async () => {
   await setStudyTours()
   await setClassmates()
   // await setCircles()
+  await setBanners()
 })
 </script>
 <template>

packages/assets/src/assets/svgs/like_actived.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.76562 7.38922V14.6048C1.76562 15.1257 2.45219 15.0039 2.99215 15.0039L3.18486 15.3344V10.7694V6.20447L2.99215 6.67342C2.86381 6.67342 2.61857 6.45261 2.5 6.5C2.38143 6.54739 2.27277 6.65764 2.18202 6.74519C1.99873 6.92202 1.76562 7.13915 1.76562 7.38922ZM13.4054 6.20447H11.0148C11.1973 5.58498 10.6447 6.20447 10.5148 3.50022C10.5148 2.40054 9.51615 1.32369 8.51887 1.46345C7.63951 1.58663 7.54294 2.31991 7.54294 3.23863L6.5 5.5C5.97189 6.5867 2.98066 6.40145 1.90677 6.50134L1.76562 6.5V15.1628L11.5642 15.3344C11.9113 15.3344 12.2475 15.2175 12.5148 15.0039C12.7822 14.7903 12.9638 14.4934 13.0285 14.1644L14.9888 7.38922C15.0296 7.18143 15.0224 6.96751 14.9676 6.76273C14.9129 6.55794 14.812 6.36733 14.6721 6.20447C14.5323 6.04162 14.2379 6.43108 14.0395 6.3411C13.8411 6.25113 13.6246 6.20447 13.4054 6.20447Z" fill="#FFE7E2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.92562 2.98886C7.07957 1.51995 8.73209 0.465943 10.1019 1.2878C10.2337 1.36691 10.3976 1.48471 10.5236 1.66657C10.7162 1.94466 11 2.49492 11 3.30978V5.30993C11 5.58598 11.2238 5.80978 11.5 5.80978H14.1126C15.1364 5.80978 15.8594 6.81283 15.5356 7.78413L13.2023 14.7841C12.9981 15.3966 12.4249 15.8098 11.7792 15.8098H6C5.17157 15.8098 4.5 15.1382 4.5 14.3098V9.30978C4.5 9.03364 4.72386 8.80978 5 8.80978C5.27614 8.80978 5.5 9.03364 5.5 9.30978V14.3098C5.5 14.5859 5.72386 14.8098 6 14.8098H11.7792C11.9945 14.8098 12.1855 14.6721 12.2536 14.4679L14.5869 7.4679C14.6948 7.14413 14.4539 6.80978 14.1126 6.80978H11.5C10.6717 6.80978 10 6.13844 10 5.30993V3.30978C10 2.739 9.80378 2.38362 9.70156 2.23607C9.69046 2.22006 9.66193 2.19004 9.58735 2.14529C8.9464 1.76072 8.01064 2.2299 7.92017 3.0931C7.84714 3.78991 7.71299 4.54345 7.43961 5.04798C6.91288 6.0201 6.24468 6.48473 5.89904 6.67252C5.70019 6.78056 5.49384 6.80978 5.32167 6.80978H2.5C2.22386 6.80978 2 7.03364 2 7.30978V14.3098C2 14.5859 2.22386 14.8098 2.5 14.8098H3C3.27614 14.8098 3.5 15.0336 3.5 15.3098C3.5 15.5859 3.27614 15.8098 3 15.8098H2.5C1.67157 15.8098 1 15.1382 1 14.3098V7.30978C1 6.48136 1.67157 5.80978 2.5 5.80978H5.32167C5.38541 5.80978 5.41319 5.79843 5.42163 5.79384C5.63346 5.67875 6.1437 5.34061 6.56039 4.57158C6.73082 4.25703 6.85308 3.68092 6.92562 2.98886Z" fill="#CA5141"/>
+</svg>

packages/assets/src/assets/svgs/like_black.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.42562 3.17905C7.57957 1.71013 9.23209 0.656129 10.6019 1.47798C10.7337 1.55709 10.8976 1.6749 11.0236 1.85676C11.2162 2.13485 11.5 2.68511 11.5 3.49997V5.50011C11.5 5.77616 11.7238 5.99997 12 5.99997H14.6126C15.6364 5.99997 16.3594 7.00302 16.0356 7.97431L13.7023 14.9743C13.4981 15.5868 12.9249 16 12.2792 16H6.5C5.67157 16 5 15.3284 5 14.5V9.49997C5 9.22383 5.22386 8.99997 5.5 8.99997C5.77614 8.99997 6 9.22383 6 9.49997V14.5C6 14.7761 6.22386 15 6.5 15H12.2792C12.4945 15 12.6855 14.8623 12.7536 14.6581L15.0869 7.65808C15.1948 7.33432 14.9539 6.99997 14.6126 6.99997H12C11.1717 6.99997 10.5 6.32863 10.5 5.50011V3.49997C10.5 2.92919 10.3038 2.57381 10.2016 2.42626C10.1905 2.41024 10.1619 2.38022 10.0874 2.33548C9.4464 1.9509 8.51064 2.42009 8.42017 3.28328C8.34714 3.9801 8.21299 4.73364 7.93961 5.23817C7.41288 6.21029 6.74468 6.67492 6.39904 6.86271C6.20019 6.97075 5.99384 6.99997 5.82167 6.99997H3C2.72386 6.99997 2.5 7.22383 2.5 7.49997V14.5C2.5 14.7761 2.72386 15 3 15H3.5C3.77614 15 4 15.2238 4 15.5C4 15.7761 3.77614 16 3.5 16H3C2.17157 16 1.5 15.3284 1.5 14.5V7.49997C1.5 6.67154 2.17157 5.99997 3 5.99997H5.82167C5.88541 5.99997 5.91319 5.98861 5.92163 5.98403C6.13346 5.86894 6.6437 5.53079 7.06039 4.76177C7.23082 4.44722 7.35308 3.87111 7.42562 3.17905Z" fill="black" fill-opacity="0.85"/>
+</svg>

packages/assets/src/icons.ts

@@ -0,0 +1,4 @@
+import likeActived from "./icons/likeActived";
+import likeBlack from "./icons/likeBlack";
+
+export { likeActived, likeBlack };

packages/assets/src/icons/likeActived.ts

@@ -0,0 +1,2 @@
+import likeActived from "../assets/svgs/like_actived.svg";
+export default likeActived;

packages/assets/src/icons/likeBlack.ts

@@ -0,0 +1,2 @@
+import likeBlack from "../assets/svgs/like_black.svg";
+export default likeBlack;