feat:更新菜谱UI

src/components/Food/FoodCard.vue

@@ -41,6 +41,18 @@
             <i class="fa-solid fa-utensils"></i>
             {{ props.foodItem.category }}
           </div>
+          <div class="info-item like-item">
+            <i class="fa-regular fa-thumbs-up"></i>
+            {{ props.foodItem.likeCount }}
+          </div>
+          <div class="info-item comment-item">
+            <i class="fa-regular fa-comment"></i>
+            {{ props.foodItem.commentCount }}
+          </div>
+          <div class="info-item start-item">
+            <i class="fa-solid fa-star"></i>
+            0
+          </div>
         </div>
 
         <div v-if="props.foodItem?.recordList.length > 0" class="info-list">

src/components/Food/FoodDaily.vue

@@ -83,7 +83,7 @@ const dateClick = (day) => {
  */
 const changeMonthClick = async (value) => {
   foodStore.queryRecord.month = value[0].id
-  await foodStore.refreshInfo()
+  await foodStore.queryRecordList()
 }
 </script>
 

src/components/Food/FoodQuery.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="search-container">
     <el-input v-if="expanded" ref="inputRef"
-              v-model="searchText" placeholder="搜索菜友食谱"
+              v-model="searchText" placeholder="搜索菜友菜谱"
               style="width: 200px;"
               show-word-limit :maxlength="10" clearable
               @keyup.enter="handleSearch" @blur="handleBlur"

src/layout/TitleBar.vue

@@ -13,12 +13,13 @@
 
     <span class="title-container">{{ title }}</span>
 
-    <div class="right-container">
-      <svg-icon v-if="appStore.isWebSocket"
-                name="home-websocket" style="color: #FFFFFF;"></svg-icon>
+    <div v-if="!appStore.isShowMobileBack" class="right-container">
+<!--      <svg-icon v-if="appStore.isWebSocket"-->
+<!--                name="home-websocket" style="color: #FFFFFF;"></svg-icon>-->
       <food-query />
-      <el-button type="info" :icon="Setting" size="small"
-                 circle color="#FFFFFF" @click="openSettingClick"/>
+
+      <el-button :icon="Setting" size="small"
+                 circle @click="openSettingClick"/>
 
       <el-drawer
           v-model="appStore.isShowSetting"

src/store/app.ts

@@ -14,7 +14,7 @@ export const useAppStore = defineStore('ipp', {
     isDark: false,
     isWebSocket: false,
     serverIp: '14.103.235.151',
-    version: 'v1.0.0.2025062802'
+    version: 'v1.0.0.2025070101'
   }),
   actions: {
     initApp() {

src/styles/life.detail.module.scss

@@ -201,6 +201,24 @@
         }
       }
     }
+
+    .button-container {
+      align-self: center;
+    }
+
+    .food-comment-list {
+      padding: 10px;
+
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+
+      .food-comment-item {
+        .name {
+          font-weight: bold;
+        }
+      }
+    }
   }
 
   .back-button {

src/styles/life.record.module.scss

@@ -47,7 +47,7 @@ $card-image-height: 200px;
         .info-item {
           display: flex;
           align-items: center;
-          gap: 3px;
+          gap: 5px;
 
           .title {
             font-size: 1.2rem;
@@ -59,6 +59,18 @@ $card-image-height: 200px;
           color: #0d9488;
         }
 
+        .like-item {
+          color: #FF4D4F;
+        }
+
+        .comment-item {
+          color: #03A9F4;
+        }
+
+        .start-item {
+          color: #FFAB40;
+        }
+
         .location-item {
           color: #0d9488;
         }

src/styles/mobile.home.layout.module.scss

@@ -77,7 +77,7 @@ $tabBar-height: 70px;
 
       display: flex;
       align-items: center;
-      gap: 5px;
+      gap: 10px;
     }
   }
 

src/types/food.ts

@@ -18,6 +18,14 @@ export interface IStep {
   imageUrl: string;
 }
 
+export interface IComment {
+  id: number;
+  username: string;
+  avatar: string;
+  content: string;
+  date: string;
+}
+
 /**
  * 成果信息
  */
@@ -63,6 +71,10 @@ export interface IRecipe {
    * 成果
    */
   recordList: IRecord[];
+  likeList: string[];
+  likeCount: number;
+  commentList: IComment[];
+  commentCount: number;
 }
 
 /**
@@ -78,14 +90,6 @@ export interface IFoodQuery {
   category: string;
 }
 
-export interface IComment {
-  id: number;
-  username: string;
-  avatar: string;
-  content: string;
-  date: string;
-}
-
 export interface IMoment {
   id?: number;
   userId?: number;

src/views/record/detail[id].vue

@@ -12,6 +12,12 @@
 
         <food-others-data/>
       </div>
+
+      <div class="button-container">
+        <el-button circle><i class="fa-regular fa-thumbs-up"></i></el-button>
+        <el-button circle><i class="fa-regular fa-star"></i></el-button>
+<!--        <el-button circle><i class="fa-regular fa-comment"></i></el-button>-->
+      </div>
     </section>
   </div>
 </template>