From 45a129ea94bfae0f9c60b235cfd6ef2d83a5309f Mon Sep 17 00:00:00 2001
From: Cxx0822 <1556464090@qq.com>
Date: Wed, 2 Jul 2025 22:43:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=9B=B4=E6=96=B0=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E8=89=B2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Login/CommonLogin.vue   |  5 +--
 src/components/Profile/ProfileCard.vue | 14 +++----
 src/store/app.ts                       | 22 ++++++++--
 src/styles/life.detail.module.scss     |  1 +
 src/views/record/recipeForm.vue        | 57 +++++++++++++++-----------
 src/views/record/recordForm.vue        |  4 ++
 6 files changed, 64 insertions(+), 39 deletions(-)

diff --git a/src/components/Login/CommonLogin.vue b/src/components/Login/CommonLogin.vue
index 610a1f4..7e9d497 100644
--- a/src/components/Login/CommonLogin.vue
+++ b/src/components/Login/CommonLogin.vue
@@ -48,7 +48,7 @@
     <div />
 
     <div class="login-type">
-      <el-button @click="authStore.changeLoginType('phone')">手机号登录</el-button>
+      <el-button>手机号登录</el-button>
       <el-button>扫码登录</el-button>
     </div>
 
@@ -58,8 +58,7 @@
       <div class="type-list">
         <i class="fa-brands fa-weixin" style="color: #3CB034"></i>
         <i class="fa-brands fa-qq" style="color: #29A4D9"></i>
-        <i class="fa-solid fa-envelope" style="color: #4971B8"
-           @click="authStore.changeLoginType('email')"></i>
+        <i class="fa-solid fa-envelope" style="color: #4971B8"></i>
         <i class="fa-brands fa-github" style="color: #555555"></i>
       </div>
     </div>
diff --git a/src/components/Profile/ProfileCard.vue b/src/components/Profile/ProfileCard.vue
index b0b432a..7883c9d 100644
--- a/src/components/Profile/ProfileCard.vue
+++ b/src/components/Profile/ProfileCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="profile-card">
+  <div class="profile-card card-item">
     <div class="avatar-wrapper">
       <el-avatar :src="avatarUrl" alt="用户头像" :size="80"
                  fit="contain" @click="previewVisible = true"
@@ -75,16 +75,16 @@ const avatarUrl = computed(() => {
 
 <style lang="scss">
 .profile-card {
-  background: linear-gradient(135deg, #6e8efb, #a777e3);
-  border-radius: 10px;
-  padding: 20px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  // background: linear-gradient(135deg, #6e8efb, #a777e3);
+  // border-radius: 10px;
+  padding: 10px;
+  // box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   text-align: center;
-  color: white;
+  // color: white;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 15px;
+  gap: 10px;
 
   .avatar-wrapper {
     position: relative;
diff --git a/src/store/app.ts b/src/store/app.ts
index 0eaf062..abd824f 100644
--- a/src/store/app.ts
+++ b/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.2025070101'
+    version: 'v1.0.0.2025070201'
   }),
   actions: {
     initApp() {
@@ -71,9 +71,23 @@ export const useAppStore = defineStore('ipp', {
     getThemeColor(): string {
       return getLocalStorage('theme-color') as string || '#009FA8'
     },
-    setThemeColor(value: string) {
-      document.documentElement.style.setProperty('--el-color-primary', value)
-      setLocalStorage('theme-color', value)
+    setThemeColor(color: string) {
+      const { style } = document.documentElement
+
+      // 1. 设置主色
+      style.setProperty('--el-color-primary', color)
+
+      // 2. 设置浅色变体（light-*）
+      style.setProperty('--el-color-primary-light-3', `color-mix(in srgb, ${color} 70%, white)`)
+      style.setProperty('--el-color-primary-light-5', `color-mix(in srgb, ${color} 50%, white)`)
+      style.setProperty('--el-color-primary-light-7', `color-mix(in srgb, ${color} 30%, white)`)
+      style.setProperty('--el-color-primary-light-8', `color-mix(in srgb, ${color} 20%, white)`)
+      style.setProperty('--el-color-primary-light-9', `color-mix(in srgb, ${color} 10%, white)`)
+
+      // 3. 设置深色变体（dark-*）
+      style.setProperty('--el-color-primary-dark-2', `color-mix(in srgb, ${color} 80%, black)`)
+
+      setLocalStorage('theme-color', color)
     }
   }
 })
diff --git a/src/styles/life.detail.module.scss b/src/styles/life.detail.module.scss
index c8e0b7e..f3bbee1 100644
--- a/src/styles/life.detail.module.scss
+++ b/src/styles/life.detail.module.scss
@@ -203,6 +203,7 @@
     }
 
     .button-container {
+      margin-top: 10px;
       align-self: center;
 
       display: flex;
diff --git a/src/views/record/recipeForm.vue b/src/views/record/recipeForm.vue
index 479c275..8c68076 100644
--- a/src/views/record/recipeForm.vue
+++ b/src/views/record/recipeForm.vue
@@ -1,15 +1,26 @@
 <template>
   <div class="food-recipe-form common-mobile-view">
+    <h2 style="text-align: center; margin: 0;">
+      {{ foodStore.recipeApiType === 'ADD' ? '新增菜谱' : '编辑菜谱' }}
+    </h2>
+
+    <el-steps :active="currentStepIndex"
+              align-center finish-status="success">
+      <el-step title="基础信息" />
+      <el-step title="食材信息" />
+      <el-step title="步骤信息" />
+    </el-steps>
+
     <el-form ref="formRef" :model="foodStore.currentRecipe"
              :rules="rules" label-width="60px">
-      <el-form-item label="名称" prop="name">
+      <el-form-item v-if="currentStepIndex === 0" label="名称" prop="name">
         <el-input v-model="foodStore.currentRecipe.name" autocomplete="off"
                   placeholder="请输入名称" clearable
                   show-word-limit maxlength="20">
         </el-input>
       </el-form-item>
 
-      <el-form-item label="菜系" prop="category">
+      <el-form-item v-if="currentStepIndex === 0" label="菜系" prop="category">
         <el-select v-model="foodStore.currentRecipe.category"
                    placeholder="请选择或输入菜系" allow-create filterable>
           <el-option v-for="(item, index) in foodCategoryList"
@@ -17,39 +28,42 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item label="推荐" prop="recommendRate">
+      <el-form-item v-if="currentStepIndex === 0" label="推荐" prop="recommendRate">
         <el-rate v-model="foodStore.currentRecipe.recommendRate"
                  :colors="foodStore.rateColorList"/>
       </el-form-item>
 
-      <el-form-item label="共享">
+      <el-form-item v-if="currentStepIndex === 0" label="共享">
         <el-radio-group v-model="foodStore.currentRecipe.isShare">
           <el-radio :value="false">否</el-radio>
           <el-radio :value="true">是</el-radio>
         </el-radio-group>
       </el-form-item>
 
-      <el-form-item label="食材">
-        <food-material-form />
-      </el-form-item>
-
-      <el-form-item label="步骤">
-        <food-step-form />
-      </el-form-item>
-
-      <el-form-item label="备注">
+      <el-form-item v-if="currentStepIndex === 0" label="备注">
         <el-input v-model="foodStore.currentRecipe.remark" autocomplete="off"
                   placeholder="请输入备注" clearable
                   type="textarea" :rows="3"
                   show-word-limit maxlength="50">
         </el-input>
       </el-form-item>
+
+      <el-form-item v-if="currentStepIndex === 1" label="食材">
+        <food-material-form />
+      </el-form-item>
+
+      <el-form-item v-if="currentStepIndex === 2" label="步骤">
+        <food-step-form />
+      </el-form-item>
     </el-form>
 
     <div class="button-container">
-      <el-button type="primary" @click="confirmClick">确认</el-button>
-      <el-button v-if="foodStore.recipeApiType === 'UPDATE'"
-                 type="danger" @click="deleteClick">删除</el-button>
+      <el-button v-if="currentStepIndex !== 0"
+                 type="primary" @click="currentStepIndex--">上一步</el-button>
+      <el-button v-if="currentStepIndex !== 2"
+                 type="primary" @click="currentStepIndex++">下一步</el-button>
+      <el-button v-if="currentStepIndex === 2"
+                 type="primary" @click="confirmClick">确认</el-button>
       <el-button type="info" @click="cancelClick">取消</el-button>
     </div>
 
@@ -67,7 +81,6 @@ import { useFoodStore } from '@/store/food'
 import type { FormInstance, FormRules } from 'element-plus'
 import { ref, reactive } from 'vue'
 import { foodRules } from '@/utils/element/elRules'
-import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 
 const rules = reactive<FormRules>(foodRules)
 const formRef = ref<FormInstance>()
@@ -75,6 +88,8 @@ const foodStore = useFoodStore()
 
 const foodCategoryList = ['家常菜', '淮扬菜', '甜点', '其他']
 
+const currentStepIndex = ref(0)
+
 /**
  * 点击确认按钮
  */
@@ -88,14 +103,6 @@ const confirmClick = () => {
 const cancelClick = () => {
   history.back()
 }
-
-const deleteClick = () => {
-  commonElMessageBox('是否确认删除该菜谱?').then(() => {
-    foodStore.recipeApiType = 'DELETE'
-    foodStore.handleRecipeApi(foodStore.currentRecipe)
-    history.back()
-  })
-}
 </script>
 
 <style lang="scss">
diff --git a/src/views/record/recordForm.vue b/src/views/record/recordForm.vue
index d245900..cc61ae3 100644
--- a/src/views/record/recordForm.vue
+++ b/src/views/record/recordForm.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="food-record-form common-mobile-view">
+    <h2 style="text-align: center; margin: 0;">
+      {{ foodStore.recordApiType === 'ADD' ? '新增记录' : '编辑记录' }}
+    </h2>
+
     <el-form ref="formRef" :model="foodStore.currentRecord"
              :rules="rules" label-width="80">
       <el-form-item label="菜谱名称" prop="name">