From 82490bc78697fd5d6f04c78284ca086516dd07d5 Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Fri, 24 Apr 2026 16:15:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(h5):=20=E6=96=B0=E5=A2=9E=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=E7=BB=84=E4=BB=B6=20NavBar/Toast/Chip/StarLevel/Skele?=
 =?UTF-8?q?ton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend-h5/src/App.vue                  |  4 ++++
 frontend-h5/src/components/Chip.vue      | 14 ++++++++++++++
 frontend-h5/src/components/NavBar.vue    | 15 +++++++++++++++
 frontend-h5/src/components/Skeleton.vue  |  3 +++
 frontend-h5/src/components/StarLevel.vue | 11 +++++++++++
 frontend-h5/src/components/Toast.vue     | 21 +++++++++++++++++++++
 frontend-h5/src/composables/useToast.js  | 11 +++++++++++
 7 files changed, 79 insertions(+)
 create mode 100644 frontend-h5/src/components/Chip.vue
 create mode 100644 frontend-h5/src/components/NavBar.vue
 create mode 100644 frontend-h5/src/components/Skeleton.vue
 create mode 100644 frontend-h5/src/components/StarLevel.vue
 create mode 100644 frontend-h5/src/components/Toast.vue
 create mode 100644 frontend-h5/src/composables/useToast.js

diff --git a/frontend-h5/src/App.vue b/frontend-h5/src/App.vue
index 29a98d4..30dc27a 100644
--- a/frontend-h5/src/App.vue
+++ b/frontend-h5/src/App.vue
@@ -1,3 +1,6 @@
+<script setup>
+import Toast from '@/components/Toast.vue'
+</script>
 <template>
   <router-view v-slot="{ Component }">
     <transition name="page" mode="out-in">
@@ -6,6 +9,7 @@
       </keep-alive>
     </transition>
   </router-view>
+  <Toast />
 </template>
 
 <style>
diff --git a/frontend-h5/src/components/Chip.vue b/frontend-h5/src/components/Chip.vue
new file mode 100644
index 0000000..8c80706
--- /dev/null
+++ b/frontend-h5/src/components/Chip.vue
@@ -0,0 +1,14 @@
+<script setup>
+defineProps({ tone: { type: String, default: 'neutral' } })
+const map = {
+  brand: 'bg-brand/10 text-brand',
+  danger: 'bg-danger/10 text-danger',
+  info: 'bg-info/10 text-info',
+  neutral: 'bg-neutral-100 text-neutral-600',
+}
+</script>
+<template>
+  <span class="inline-flex items-center px-2 py-0.5 text-xs rounded-full whitespace-nowrap" :class="map[tone]">
+    <slot />
+  </span>
+</template>
diff --git a/frontend-h5/src/components/NavBar.vue b/frontend-h5/src/components/NavBar.vue
new file mode 100644
index 0000000..cbb8f8a
--- /dev/null
+++ b/frontend-h5/src/components/NavBar.vue
@@ -0,0 +1,15 @@
+<script setup>
+import { useRouter } from 'vue-router'
+defineProps({ title: String, showBack: { type: Boolean, default: true } })
+const router = useRouter()
+</script>
+<template>
+  <header class="sticky top-0 z-20 h-12 flex items-center bg-white/90 backdrop-blur border-b border-line">
+    <button v-if="showBack" class="w-12 h-12 flex items-center justify-center active:bg-line" @click="router.back()">
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M13 4l-6 6 6 6" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    </button>
+    <div v-else class="w-12 h-12"></div>
+    <h1 class="flex-1 text-center text-base font-semibold truncate px-4">{{ title }}</h1>
+    <div class="w-12 h-12"><slot name="right" /></div>
+  </header>
+</template>
diff --git a/frontend-h5/src/components/Skeleton.vue b/frontend-h5/src/components/Skeleton.vue
new file mode 100644
index 0000000..1ecf5cd
--- /dev/null
+++ b/frontend-h5/src/components/Skeleton.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="animate-pulse bg-neutral-200/60 rounded" />
+</template>
diff --git a/frontend-h5/src/components/StarLevel.vue b/frontend-h5/src/components/StarLevel.vue
new file mode 100644
index 0000000..4fe551d
--- /dev/null
+++ b/frontend-h5/src/components/StarLevel.vue
@@ -0,0 +1,11 @@
+<script setup>
+defineProps({ value: { type: Number, default: 0 }, max: { type: Number, default: 3 } })
+</script>
+<template>
+  <span class="inline-flex items-center gap-0.5">
+    <svg v-for="i in max" :key="i" width="14" height="14" viewBox="0 0 20 20"
+      :fill="i <= value ? '#2F4F3F' : '#E5E5E5'">
+      <path d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9 4.8 17.6l1-5.8L1.5 7.7l5.9-.9z"/>
+    </svg>
+  </span>
+</template>
diff --git a/frontend-h5/src/components/Toast.vue b/frontend-h5/src/components/Toast.vue
new file mode 100644
index 0000000..93e7ee1
--- /dev/null
+++ b/frontend-h5/src/components/Toast.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { useToast } from '@/composables/useToast'
+const { state } = useToast()
+</script>
+<template>
+  <teleport to="body">
+    <div class="fixed top-2 left-0 right-0 z-50 flex flex-col items-center gap-2 pointer-events-none">
+      <transition-group name="toast">
+        <div v-for="t in state.list" :key="t.id"
+          class="px-4 py-2 rounded-full text-sm shadow-card"
+          :class="t.type==='error' ? 'bg-danger text-white' : 'bg-neutral-800/90 text-white'">
+          {{ t.msg }}
+        </div>
+      </transition-group>
+    </div>
+  </teleport>
+</template>
+<style>
+.toast-enter-active,.toast-leave-active{transition:all .25s ease}
+.toast-enter-from,.toast-leave-to{opacity:0;transform:translateY(-8px)}
+</style>
diff --git a/frontend-h5/src/composables/useToast.js b/frontend-h5/src/composables/useToast.js
new file mode 100644
index 0000000..3b002e7
--- /dev/null
+++ b/frontend-h5/src/composables/useToast.js
@@ -0,0 +1,11 @@
+import { reactive } from 'vue'
+const state = reactive({ list: [] })
+let seq = 0
+export function useToast() {
+  const show = (msg, type = 'info', duration = 2000) => {
+    const id = ++seq
+    state.list.push({ id, msg, type })
+    setTimeout(() => { state.list = state.list.filter(x => x.id !== id) }, duration)
+  }
+  return { state, show }
+}