Procházet zdrojové kódy

统一每个模块的标题

liuziting před 6 měsíci
rodič
revize
2c8a675087
3 změnil soubory, kde provedl 25 přidání a 46 odebrání
  1. 4 4
      src/views/FortuneCooking.vue
  2. 20 41
      src/views/SauceDesign.vue
  3. 1 1
      src/views/TodayEat.vue

+ 4 - 4
src/views/FortuneCooking.vue

@@ -19,7 +19,7 @@
             <!-- 占卜类型选择 -->
             <div class="mb-8">
                 <div class="bg-purple-500 text-white px-4 py-2 rounded-t-lg border-2 border-[#0A0910] border-b-0 inline-block">
-                    <span class="font-bold">选择占卜类型</span>
+                    <span class="font-bold">1.选择占卜类型</span>
                 </div>
                 <div class="bg-white border-2 border-[#0A0910] rounded-lg rounded-tl-none p-4 md:p-6">
                     <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -43,7 +43,7 @@
             <!-- 占卜参数配置区域 -->
             <div v-if="selectedType" class="mb-8">
                 <div class="bg-indigo-500 text-white px-4 py-2 rounded-t-lg border-2 border-[#0A0910] border-b-0 inline-block">
-                    <span class="font-bold">🎯 配置占卜参数</span>
+                    <span class="font-bold">2.配置占卜参数</span>
                 </div>
                 <div class="bg-white border-2 border-[#0A0910] rounded-lg rounded-tl-none p-4 md:p-6">
                     <!-- 今日运势配置 -->
@@ -144,7 +144,7 @@
                         <button
                             @click="startFortune"
                             :disabled="!canStartFortune || isLoading"
-                            class="w-full px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 disabled:from-gray-400 disabled:to-gray-400 text-white font-bold text-lg rounded-lg border-2 border-[#0A0910] transition-all duration-300 transform hover:scale-105 disabled:scale-100 disabled:cursor-not-allowed shadow-lg"
+                            class="w-full px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 disabled:from-gray-400 disabled:to-gray-400 text-white font-bold text-lg rounded-lg border-2 border-[#0A0910] transition-all duration-300 transform disabled:scale-100 disabled:cursor-not-allowed shadow-lg"
                         >
                             <span class="flex items-center gap-3 justify-center">
                                 <template v-if="isLoading">
@@ -164,7 +164,7 @@
             <!-- 占卜结果展示 -->
             <div v-if="fortuneResult" class="mb-8" data-fortune-result>
                 <div class="bg-pink-500 text-white px-4 py-2 rounded-t-lg border-2 border-[#0A0910] border-b-0 inline-block">
-                    <span class="font-bold">🌟 占卜结果</span>
+                    <span class="font-bold">3.占卜结果</span>
                 </div>
                 <div class="bg-white border-2 border-[#0A0910] rounded-lg rounded-tl-none p-4 md:p-6">
                     <FortuneCard class="max-w-2xl mx-auto" :fortune="fortuneResult" :show-actions="true" />

+ 20 - 41
src/views/SauceDesign.vue

@@ -1,16 +1,12 @@
 <template>
-    <div class="min-h-screen bg-orange-400 px-2 md:px-4 py-6">
+    <div class="min-h-screen bg-yellowpx-2 md:px-4 py-6">
         <!-- 全局导航 -->
         <GlobalNavigation />
-
         <div class="max-w-7xl mx-auto">
-
-
-
             <!-- 智能推荐配置区域 -->
             <div class="mb-8">
                 <div class="bg-blue-500 text-white px-4 py-2 rounded-t-lg border-2 border-[#0A0910] border-b-0 inline-block">
-                    <span class="font-bold">🤖 智能推荐</span>
+                    <span class="font-bold">1.智能推荐</span>
                 </div>
                 <div class="bg-white border-2 border-[#0A0910] rounded-lg rounded-tl-none p-4 md:p-6">
                     <div class="grid md:grid-cols-2 gap-6">
@@ -83,9 +79,7 @@
                                     @click="toggleUseCase(useCase.id)"
                                     :class="[
                                         'p-3 rounded-lg border-2 border-[#0A0910] text-sm font-medium transition-all duration-200',
-                                        preferences.useCase.includes(useCase.id)
-                                            ? 'bg-blue-500 text-white'
-                                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                                        preferences.useCase.includes(useCase.id) ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                                     ]"
                                 >
                                     <span class="mr-1">{{ useCase.icon }}</span>
@@ -109,12 +103,7 @@
                                     class="inline-flex items-center px-2 py-1 bg-orange-100 text-orange-800 text-xs rounded-full"
                                 >
                                     {{ ingredient }}
-                                    <button
-                                        @click="removeIngredient(ingredient)"
-                                        class="ml-1 text-orange-600 hover:text-orange-800"
-                                    >
-                                        ×
-                                    </button>
+                                    <button @click="removeIngredient(ingredient)" class="ml-1 text-orange-600 hover:text-orange-800">×</button>
                                 </span>
                             </div>
 
@@ -179,9 +168,7 @@
                             </button>
                         </div>
                         <div class="text-center pt-4 border-t border-gray-200">
-                            <p class="text-sm text-gray-500">
-                                💡 不满意推荐结果?试试调整上方的口味偏好或使用场景
-                            </p>
+                            <p class="text-sm text-gray-500">💡 不满意推荐结果?试试调整上方的口味偏好或使用场景</p>
                         </div>
                     </div>
                 </div>
@@ -190,7 +177,7 @@
             <!-- 酱料搜索区域 -->
             <div class="mb-8">
                 <div class="bg-green-500 text-white px-4 py-2 rounded-t-lg border-2 border-[#0A0910] border-b-0 inline-block">
-                    <span class="font-bold">🔍 酱料搜索</span>
+                    <span class="font-bold">2.酱料搜索</span>
                 </div>
                 <div class="bg-white border-2 border-[#0A0910] rounded-lg rounded-tl-none p-4 md:p-6">
                     <div class="flex gap-4">
@@ -226,7 +213,7 @@
             <!-- 制作教程区域 -->
             <div class="mb-8" data-results>
                 <div class="bg-teal-500 text-white px-4 py-2 rounded-t-lg border-2 border-[#0A0910] border-b-0 inline-block">
-                    <span class="font-bold">📋 制作教程</span>
+                    <span class="font-bold">3.制作教程</span>
                 </div>
                 <div class="bg-white border-2 border-[#0A0910] rounded-lg rounded-tl-none p-4 md:p-6">
                     <!-- 空状态 -->
@@ -244,7 +231,6 @@
                                 <span>🔍</span>
                                 <span>直接搜索想要制作的酱料</span>
                             </p>
-                            
                         </div>
                     </div>
 
@@ -282,12 +268,7 @@
                         >
                             {{ historyItem }}
                         </button>
-                        <button
-                            @click="clearHistory"
-                            class="px-3 py-2 text-sm text-red-600 hover:text-red-700 underline"
-                        >
-                            清除历史
-                        </button>
+                        <button @click="clearHistory" class="px-3 py-2 text-sm text-red-600 hover:text-red-700 underline">清除历史</button>
                     </div>
                 </div>
             </div>
@@ -338,8 +319,6 @@ onMounted(() => {
     }
 })
 
-
-
 // 切换使用场景
 const toggleUseCase = (useCaseId: string) => {
     const index = preferences.value.useCase.indexOf(useCaseId)
@@ -371,11 +350,11 @@ const removeIngredient = (ingredient: string) => {
 const getRecommendations = async () => {
     isLoadingRecommendations.value = true
     currentSauce.value = null
-    
+
     try {
         const result = await recommendSauces(preferences.value)
         recommendations.value = result
-        
+
         if (result.length === 0) {
             showErrorMessage('暂时没有找到合适的推荐,请尝试调整偏好设置')
         } else {
@@ -401,7 +380,7 @@ const searchSauce = async () => {
 
     const sauceName = searchQuery.value.trim()
     addToHistory(sauceName)
-    
+
     isLoadingSearch.value = true
     recommendations.value = []
     currentSauce.value = null
@@ -409,7 +388,7 @@ const searchSauce = async () => {
     try {
         const result = await generateSauceRecipe(sauceName)
         currentSauce.value = result
-        
+
         // 滚动到结果区域
         setTimeout(() => {
             const resultsElement = document.querySelector('[data-results]')
@@ -428,14 +407,14 @@ const searchSauce = async () => {
 // 选择推荐的酱料
 const selectRecommendedSauce = async (sauceName: string) => {
     addToHistory(sauceName)
-    
+
     isLoadingSearch.value = true
     currentSauce.value = null
 
     try {
         const result = await generateSauceRecipe(sauceName)
         currentSauce.value = result
-        
+
         // 滚动到结果区域
         setTimeout(() => {
             const resultsElement = document.querySelector('[data-results]')
@@ -515,7 +494,7 @@ const showErrorMessage = (message: string) => {
     background: #ef4444;
     cursor: pointer;
     border: 2px solid #fff;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .slider-yellow::-webkit-slider-thumb {
@@ -526,7 +505,7 @@ const showErrorMessage = (message: string) => {
     background: #eab308;
     cursor: pointer;
     border: 2px solid #fff;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .slider-blue::-webkit-slider-thumb {
@@ -537,7 +516,7 @@ const showErrorMessage = (message: string) => {
     background: #3b82f6;
     cursor: pointer;
     border: 2px solid #fff;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .slider-green::-webkit-slider-thumb {
@@ -548,7 +527,7 @@ const showErrorMessage = (message: string) => {
     background: #22c55e;
     cursor: pointer;
     border: 2px solid #fff;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .slider-red::-moz-range-thumb,
@@ -560,6 +539,6 @@ const showErrorMessage = (message: string) => {
     border-radius: 50%;
     cursor: pointer;
     border: 2px solid #fff;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
-</style>
+</style>

+ 1 - 1
src/views/TodayEat.vue

@@ -262,7 +262,7 @@ const startRandomSelection = async () => {
 
 // 随机选择菜品
 const selectRandomDishes = async () => {
-    const dishCount = 4 // 固定生成4个菜品
+    const dishCount = 6 // 固定生成6个菜品
     let filteredDishes = [...allDishes.value]
 
     // 根据偏好过滤菜品