feat: 添加荣誉对话框组件，整合徽章和辐射图标，优化展示逻辑

packages/app/src/composables/honor-dialog.ts

@@ -0,0 +1,23 @@
+import { inject, InjectionKey } from 'vue'
+export interface DialogShowOptions {
+  title?: string
+  text?: string
+  actions?: any
+  form?: boolean
+  schema?: any
+  action?: Function
+  formData?: any
+  onConfirm?: Function
+}
+export const HonorDialogSymbol: InjectionKey<{
+  show: (options: DialogShowOptions) => void
+}> = Symbol.for('HonorDialogContext')
+export const useHonorDialog = () => {
+  const honorDialog = inject(HonorDialogSymbol)
+  if (!honorDialog) {
+    throw new Error('useHonorDialog must be used inside setup()')
+  }
+  return {
+    show: honorDialog.show,
+  }
+}

packages/app/src/layouts/tabbar.vue

@@ -15,6 +15,7 @@ import {
 import { currRoute } from '../utils'
 import { defaultThemeVars } from '../core/themes/default'
 import { useRouter } from '../core/utils/router'
+import HonorDialog from '@/pages/common/components/honor-dialog.vue'
 
 const router = useRouter()
 const publishState = ref(false)
@@ -118,6 +119,7 @@ const toPublishCase = () => {
     </div>
     <wd-toast />
     <wd-message-box />
+    <HonorDialog />
   </wd-config-provider>
 </template>
 

packages/app/src/pages/common/components/honor-dialog.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { close } from '../../../core/libs/svgs'
+import { HonorDialogSymbol } from '../../../composables/honor-dialog'
+import earnBadgeTitle from '@designer-hub/assets/src/libs/assets/earnBadgeTitle'
+import radiation from '@designer-hub/assets/src/libs/assets/radiation'
+import { NetImages } from '../../../core/libs/net-images'
+import { ConfigProviderThemeVars } from 'wot-design-uni'
+
+const modelValue = defineModel({ default: false, type: Boolean })
+const themeVars: ConfigProviderThemeVars = {
+  overlayBg: 'rgba(0,0,0,0.85)',
+}
+const title = ref('东方研习营')
+const content = ref('获得东方研习营游学徽章')
+const path = ref('')
+const src = ref(
+  'https://image.zhuchaohui.com/zhucaohui/e104215c64d39e4a0f8676c48b8e7221c891eade1c8d7f02b2a7f0be862e3f76.png',
+)
+const show = (options: { title: string; content: string; path: string; image: string }) => {
+  title.value = options.title
+  content.value = options.content
+  path.value = options.path
+  src.value = options.image
+  modelValue.value = true
+}
+provide(HonorDialogSymbol, { show })
+</script>
+<template>
+  <wd-config-provider :themeVars="themeVars">
+    <wd-popup v-model="modelValue" custom-class="bg-transparent! bg-[#f6f6f6]!">
+      <div class="flex flex-col items-center relative">
+        <wd-img width="60vw" mode="widthFix" :src="earnBadgeTitle"></wd-img>
+        <div class="w-[100vw] h-[68vw] pt-2 flex">
+          <div class="w-100vw h-100vw absolute left-0 right-0 top--8">
+            <wd-img
+              custom-class="absolute! vertical-bottom"
+              width="100%"
+              height="100%"
+              :src="radiation"
+            ></wd-img>
+            <wd-img
+              custom-class="absolute! left-16 top-4 vertical-bottom"
+              width="58vw"
+              mode="widthFix"
+              :src="NetImages.Stars"
+            ></wd-img>
+            <wd-img
+              custom-class="absolute! ma-a top-50% left-50% translate-[-50%,-50%]  vertical-bottom blur-60"
+              width="40vw"
+              mode="widthFix"
+              :src="src"
+            ></wd-img>
+            <wd-img
+              custom-class="absolute! ma-a top-50% left-50% translate-[-50%,-50%]  vertical-bottom"
+              width="40vw"
+              mode="widthFix"
+              :src="src"
+            ></wd-img>
+          </div>
+        </div>
+        <div class="text-center">
+          <div class="text-white text-2xl font-normal font-['PingFang_SC'] uppercase">
+            {{ title }}
+          </div>
+          <div class="mt-2 text-[#9f9b94] text-base font-normal font-['PingFang_SC'] uppercase">
+            {{ content }}
+          </div>
+        </div>
+        <div
+          class="my-10 w-[155px] px-5 py-2.5 rounded-full border border-solid border-[#c8beab] justify-center items-center gap-1 inline-flex"
+        >
+          <div
+            class="text-center text-[#c7bdab] text-base font-normal font-['PingFang_SC'] leading-normal"
+          >
+            查看奖励
+          </div>
+        </div>
+        <wd-img width="24" height="24" :src="close" @click="modelValue = false"></wd-img>
+      </div>
+    </wd-popup>
+  </wd-config-provider>
+</template>

packages/app/src/pages/home/index.vue

@@ -42,10 +42,12 @@ import dayjs from 'dayjs'
 import { pick, sort } from 'radash'
 import { Activity, StudyTour } from '../../core/libs/models'
 import PageHelperEvo from '@/components/page-helper-evo.vue'
+import { useMessage } from 'wot-design-uni'
 
 defineOptions({
   name: 'Home',
 })
+useMessage()
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
 const { features } = usePermissions()

packages/assets/src/libs/assets/earnBadgeTitle.ts

@@ -0,0 +1,2 @@
+import earnBadgeTitle from '../../assets/earn-badge-title.svg' 
+ export default earnBadgeTitle

packages/assets/src/libs/assets/radiation.ts

@@ -0,0 +1,2 @@
+import radiation from '../../assets/radiation.svg' 
+ export default radiation