feat:增加菜谱记录功能

src/views/login/index.vue

@@ -42,19 +42,20 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss">
-$form-item-width: 300px;
+$form-item-width: 90vw;
 $login-height: 500px;
 
 .login-view {
   height: 100%;
-  display: grid;
-  place-items: center;
+  // display: grid;
+  // place-items: center;
 
   .login-container {
-    // height: $login-height;
-    padding: 30px;
-    border-radius: 15px;
-    box-shadow: 2px 2px 5px #D3D3D3, 4px 4px 10px #A9A9A9;
+    margin-top: 20vh;
+    height: $login-height;
+    // padding: 30px;
+    // border-radius: 15px;
+    // box-shadow: 2px 2px 5px #D3D3D3, 4px 4px 10px #A9A9A9;
 
     display: flex;
     flex-direction: column;
@@ -102,7 +103,7 @@ $login-height: 500px;
         .el-divider {
           .el-divider__text {
             color: #A9A9A9;
-            font-size: 0.8rem;
+            font-size: 1rem;
           }
         }
 
@@ -126,7 +127,7 @@ $login-height: 500px;
         display: flex;
         justify-content: center;
         span {
-          font-size: 0.9rem;
+          font-size: 1.2rem;
         }
       }
     }

src/views/record/recipeForm.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="food-recipe-form common-mobile-view">
     <el-form ref="formRef" :model="foodStore.currentRecipe"
-             :rules="rules" label-width="80px">
-      <el-form-item label="美食名称" prop="name">
+             :rules="rules" label-width="60px">
+      <el-form-item 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 label="菜系" prop="category">
         <el-select v-model="foodStore.currentRecipe.category"
                    placeholder="请选择或输入菜系">
           <el-option v-for="(item, index) in foodCategoryList"
@@ -17,7 +17,7 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item label="推荐指数" prop="recommendRate">
+      <el-form-item label="推荐" prop="recommendRate">
         <el-rate v-model="foodStore.currentRecipe.recommendRate"
                  :colors="foodStore.rateColorList"/>
       </el-form-item>
@@ -33,7 +33,8 @@
       <el-form-item label="备注">
         <el-input v-model="foodStore.currentRecipe.remark" autocomplete="off"
                   placeholder="请输入备注" clearable
-                  show-word-limit maxlength="20">
+                  type="textarea" :rows="3"
+                  show-word-limit maxlength="50">
         </el-input>
       </el-form-item>
     </el-form>
@@ -43,12 +44,17 @@
       <el-button type="danger" @click="deleteClick">删除</el-button>
       <el-button type="info" @click="cancelClick">取消</el-button>
     </div>
+
+    <food-material-dialog />
+    <food-step-dialog />
   </div>
 </template>
 
 <script lang="ts" setup>
 import FoodMaterialForm from '@/components/Food/FoodMaterialForm.vue'
 import FoodStepForm from '@/components/Food/FoodStepForm.vue'
+import FoodMaterialDialog from '@/components/Food/FoodMaterialDialog.vue'
+import FoodStepDialog from '@/components/Food/FoodStepDialog.vue'
 import { useFoodStore } from '@/store/food'
 import type { FormInstance, FormRules } from 'element-plus'
 import { ref, reactive } from 'vue'