feat: add dialog confirm for history

app/components/tags/DishLabel.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { RecipeItem } from '~/types'
+import type { DbRecipeItem } from '~/utils/db'
+import { tools } from '~/data/food'
+import { getEmojisFromStuff } from '~/utils'
+
+const props = defineProps<{
+  dish: RecipeItem | DbRecipeItem
+}>()
+
+const dishLabel = computed(() => {
+  const emojis = getEmojisFromStuff(props.dish.stuff)
+  return `${props.dish.tags?.includes('杂烩') ? '🍲' : emojis.join(' ')} ${props.dish.name}`
+})
+</script>
+
+<template>
+  <span>
+    {{ dishLabel }}
+
+    <template v-for="tool, i in tools">
+      <span v-if="dish.tools?.includes(tool.name)" :key="i" :class="tool.icon" />
+    </template>
+  </span>
+</template>

app/pages/help.vue

@@ -140,7 +140,6 @@
           </div>
         </FAQItem>
       </div>
-      <BaseFooter mt-4 />
     </ion-content>
   </ion-page>
 </template>

app/pages/recipes/history.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { Dialog } from '@capacitor/dialog'
 import dayjs from 'dayjs'
 import { recipeHistories } from '~/composables/store/history'
 
@@ -9,30 +10,66 @@ definePageMeta({
 
 // todo
 // clear one history
-function clearAllHistory() {
+async function clearAllHistory() {
+  await Dialog.confirm({
+    title: '清空历史记录',
+    message: '确定要清空所有历史记录吗？此操作不可撤销。',
+    okButtonTitle: '确认',
+    cancelButtonTitle: '取消',
+  }).then((result) => {
+    if (result.value) {
       recipeHistories.value = []
+    }
+  })
+}
+
+function clearOneHistory(history: typeof recipeHistories.value[0]) {
+  recipeHistories.value = recipeHistories.value.filter(h => h !== history)
 }
 </script>
 
 <template>
-  <div pt-2>
+  <ion-page>
-    <button
+    <ion-header>
-      text="blue-900 dark:blue-200"
+      <ion-toolbar>
-      bg="blue-300 op-20 hover:(blue-800 op-20) dark:hover:(blue-200 op-20)"
+        <ion-buttons slot="start">
-      class="text-sm font-medium px-4 py-2 border border-transparent rounded-md inline-flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+          <ion-back-button default-href="/my" />
-      @click="clearAllHistory"
+        </ion-buttons>
-    >
+        <ion-title>历史记录</ion-title>
-      <span i-ri-eraser-line />
-      <span class="ml-1">清空记录</span>
-    </button>
 
-    <div flex="~ col">
+        <ion-buttons slot="end">
-      <div v-for="history in recipeHistories" :key="history.recipe.name" mt-2>
+          <ion-button title="清空记录" @click="clearAllHistory">
-        <DateTag>
+            <ion-icon slot="icon-only" :icon="ioniconsTrashOutline" />
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <template v-for="history in recipeHistories" :key="history.recipe.name">
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label class="truncate">
+                <DishLabel class="text-sm" :dish="history.recipe" />
+              </ion-label>
+              <ion-text class="text-xs">
                 {{ dayjs(history.time).format('YYYY-MM-DD HH:mm:ss') }}
-        </DateTag>
+              </ion-text>
-        <DishTag :dish="history.recipe" />
+            </ion-item>
-      </div>
+
-    </div>
+            <ion-item-options>
-  </div>
+              <!-- TODO -->
+              <!-- <ion-item-option>
+                收藏
+              </ion-item-option> -->
+              <ion-item-option color="danger" @click="clearOneHistory(history)">
+                删除
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        </template>
+      </ion-list>
+    </ion-content>
+  </ion-page>
 </template>

app/pages/settings.vue

@@ -39,9 +39,6 @@ definePageMeta({
             离开网页后保留选中数据
           </ion-toggle>
         </ion-item>
-        <ion-item :button="true">
-          更多设置，敬请期待
-        </ion-item>
       </ion-list>
     </ion-content>
   </ion-page>

app/pages/tabs/my/index.vue

@@ -16,20 +16,20 @@ definePageMeta({
 
     <ion-content>
       <!-- TODO -->
-      <!-- <ion-list :inset="true">
+      <ion-list :inset="true">
         <ion-item router-link="/recipes/history">
           <ion-icon slot="start" :icon="ioniconsTimeOutline" />
           <ion-label>历史记录</ion-label>
         </ion-item>
-        <ion-item router-link="/recipes/collect">
+        <!-- <ion-item router-link="/recipes/collect">
           <ion-icon slot="start" :icon="ioniconsStarOutline" />
           <ion-label>我的收藏</ion-label>
         </ion-item>
         <ion-item router-link="/cookbooks">
           <ion-icon slot="start" :icon="ioniconsBookOutline" />
           <ion-label>自定义菜谱</ion-label>
-        </ion-item>
+        </ion-item> -->
-      </ion-list> -->
+      </ion-list>
 
       <ion-list :inset="true">
         <ion-item :href="links.githubIssue" target="_blank">

ios/App/Podfile

@@ -15,6 +15,7 @@ def capacitor_pods
   pod 'CapacitorHaptics', :path => '../../node_modules/.pnpm/@capacitor+haptics@7.0.2_@capacitor+core@7.4.3/node_modules/@capacitor/haptics'
   pod 'CapacitorKeyboard', :path => '../../node_modules/.pnpm/@capacitor+keyboard@7.0.3_@capacitor+core@7.4.3/node_modules/@capacitor/keyboard'
   pod 'CapacitorStatusBar', :path => '../../node_modules/.pnpm/@capacitor+status-bar@7.0.3_@capacitor+core@7.4.3/node_modules/@capacitor/status-bar'
+  pod 'CapacitorDialog', :path => '../../node_modules/.pnpm/@capacitor+dialog@7.0.2_@capacitor+core@7.4.3/node_modules/@capacitor/dialog'
 end
 
 target 'App' do

ios/App/Podfile.lock

@@ -4,6 +4,8 @@ PODS:
   - CapacitorApp (7.1.0):
     - Capacitor
   - CapacitorCordova (7.4.3)
+  - CapacitorDialog (7.0.2):
+    - Capacitor
   - CapacitorHaptics (7.0.2):
     - Capacitor
   - CapacitorKeyboard (7.0.3):
@@ -15,6 +17,7 @@ DEPENDENCIES:
   - "Capacitor (from `../../node_modules/.pnpm/@capacitor+ios@7.4.3_@capacitor+core@7.4.3/node_modules/@capacitor/ios`)"
   - "CapacitorApp (from `../../node_modules/.pnpm/@capacitor+app@7.1.0_@capacitor+core@7.4.3/node_modules/@capacitor/app`)"
   - "CapacitorCordova (from `../../node_modules/.pnpm/@capacitor+ios@7.4.3_@capacitor+core@7.4.3/node_modules/@capacitor/ios`)"
+  - "CapacitorDialog (from `../../node_modules/.pnpm/@capacitor+dialog@7.0.2_@capacitor+core@7.4.3/node_modules/@capacitor/dialog`)"
   - "CapacitorHaptics (from `../../node_modules/.pnpm/@capacitor+haptics@7.0.2_@capacitor+core@7.4.3/node_modules/@capacitor/haptics`)"
   - "CapacitorKeyboard (from `../../node_modules/.pnpm/@capacitor+keyboard@7.0.3_@capacitor+core@7.4.3/node_modules/@capacitor/keyboard`)"
   - "CapacitorStatusBar (from `../../node_modules/.pnpm/@capacitor+status-bar@7.0.3_@capacitor+core@7.4.3/node_modules/@capacitor/status-bar`)"
@@ -26,6 +29,8 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/.pnpm/@capacitor+app@7.1.0_@capacitor+core@7.4.3/node_modules/@capacitor/app"
   CapacitorCordova:
     :path: "../../node_modules/.pnpm/@capacitor+ios@7.4.3_@capacitor+core@7.4.3/node_modules/@capacitor/ios"
+  CapacitorDialog:
+    :path: "../../node_modules/.pnpm/@capacitor+dialog@7.0.2_@capacitor+core@7.4.3/node_modules/@capacitor/dialog"
   CapacitorHaptics:
     :path: "../../node_modules/.pnpm/@capacitor+haptics@7.0.2_@capacitor+core@7.4.3/node_modules/@capacitor/haptics"
   CapacitorKeyboard:
@@ -37,10 +42,11 @@ SPEC CHECKSUMS:
   Capacitor: 28d6c01026a9a3f7156529498ec1f389a2a28dbc
   CapacitorApp: 26587c2ce485d88ddb39adb21cac64f8e481afe3
   CapacitorCordova: 435121e81a2df4d0034f0fb11fcefab5104cfdb5
+  CapacitorDialog: 5bf72a94b747fb339df6f64ef60812e5e4630ad2
   CapacitorHaptics: b3fb2869e72c4466e18ce9ccbeb60a3d8723b3d4
   CapacitorKeyboard: 62f36104f26d53d8b3a2a43f2a69fe714f1777d5
   CapacitorStatusBar: 0659ddc7b1713764a05831463d215b177a15d054
 
-PODFILE CHECKSUM: 8bd0d9c820121f1afdd77c0f07183ee4bdcccf29
+PODFILE CHECKSUM: c0ad7487807bc389ebb7e4f95a97f324cfdda550
 
 COCOAPODS: 1.16.2

package.json

@@ -42,6 +42,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^5.4.1",
     "@capacitor/cli": "7.4.3",
+    "@capacitor/dialog": "^7.0.2",
     "@headlessui/vue": "^1.7.23",
     "@iconify-json/carbon": "^1.2.13",
     "@iconify-json/fe": "^1.2.4",

pnpm-lock.yaml

@@ -43,6 +43,9 @@ importers:
       '@capacitor/cli':
         specifier: 7.4.3
         version: 7.4.3
+      '@capacitor/dialog':
+        specifier: ^7.0.2
+        version: 7.0.2(@capacitor/core@7.4.3)
       '@headlessui/vue':
         specifier: ^1.7.23
         version: 1.7.23(vue@3.5.22(typescript@5.9.3))
@@ -855,6 +858,11 @@ packages:
   '@capacitor/core@7.4.3':
     resolution: {integrity: sha512-wCWr8fQ9Wxn0466vPg7nMn0tivbNVjNy1yL4GvDSIZuZx7UpU2HeVGNe9QjN/quEd+YLRFeKEBLBw619VqUiNg==}
 
+  '@capacitor/dialog@7.0.2':
+    resolution: {integrity: sha512-2lRMKEdBV/2LMCwHbC5a03jiU4tdlIN4hXAqmQMxnaa7CAVLfk/vEE+vxA5mpnI/pzoXF/QDQEUXJUd10hbcKA==}
+    peerDependencies:
+      '@capacitor/core': '>=7.0.0'
+
   '@capacitor/haptics@7.0.2':
     resolution: {integrity: sha512-vqfeEM6s2zMgLjpITCTUIy7P/hadq/Gr5E/RClFgMJPB41Y5FsqOKD+j85/uwh8N2cf/aWaPeXUmjnTzJbEB2g==}
     peerDependencies:
@@ -8387,6 +8395,10 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@capacitor/dialog@7.0.2(@capacitor/core@7.4.3)':
+    dependencies:
+      '@capacitor/core': 7.4.3
+
   '@capacitor/haptics@7.0.2(@capacitor/core@7.4.3)':
     dependencies:
       '@capacitor/core': 7.4.3