feat backNav搭建

src/components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AppFooter: typeof import('./components/AppFooter.vue')['default']
     AppLogos: typeof import('./components/AppLogos.vue')['default']
+    BackNav: typeof import('./components/backNav.vue')['default']
     HiCounter: typeof import('./components/HiCounter.vue')['default']
     HomeConstruction: typeof import('./components/home/construction.vue')['default']
     HomeHomeNav: typeof import('./components/home/homeNav.vue')['default']
@@ -21,5 +22,6 @@ declare module 'vue' {
     HomeWarning: typeof import('./components/home/warning.vue')['default']
     HomeWarning_list: typeof import('./components/home/warning_list.vue')['default']
     InputEntry: typeof import('./components/InputEntry.vue')['default']
+    MessageNav: typeof import('./components/message/nav.vue')['default']
   }
 }

src/components/AppFooter.vue

@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-function handleClickGithub() {
-  if (window?.open) {
-    window.open('https://github.com/uni-helper/vitesse-uni-app')
-  }
-  else {
-    uni.showToast({
-      icon: 'none',
-      title: '请使用浏览器打开',
-    })
-  }
-}
-</script>
-
-<template>
-  <view text="xl gray4" m-5 flex items-center justify-center gap-3>
-    <navigator url="/pages/index" open-type="redirect">
-      <view i-carbon-campsite />
-    </navigator>
-
-    <view cursor-pointer @click="handleClickGithub">
-      <view i-carbon:logo-github />
-    </view>
-  </view>
-</template>

src/components/AppLogos.vue

@@ -1,29 +0,0 @@
-<template>
-  <view inline-flex cursor-default text-2xl font-300>
-    <view
-      flex
-      flex-col
-      items-center
-      hover-class="drop-shadow-md drop-shadow-color-green5"
-    >
-      <image inline-block h-18 w-18 src="/static/logo.svg" />
-      <text mt--2 text-green5 class="uni-helper-logo__label">
-        uni-helper
-      </text>
-    </view>
-    <view
-      text="3xl gray4"
-      m="x-4 y-auto"
-      i-carbon-add
-      transform
-      transition-all-500
-      hover:rotate-135
-    />
-    <view flex flex-col hover-class="drop-shadow-md drop-shadow-color-purple5">
-      <image inline-block h-18 w-18 src="/static/vite.png" />
-      <text mt--2 text-purple5>
-        Vite
-      </text>
-    </view>
-  </view>
-</template>

src/components/HiCounter.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-const { count, inc, dec } = useCount()
-</script>
-
-<template>
-  <view inline-flex m="y-3">
-    <view class="btn" @click="dec()">
-      <text i-carbon-subtract />
-    </view>
-    <view font="mono" w="15" m-auto inline-block>
-      {{ count }}
-    </view>
-    <view class="btn" @click="inc()">
-      <text i-carbon-add />
-    </view>
-  </view>
-</template>
-
-<style>
-.btn {
-  --at-apply: w-8 h-8 flex items-center justify-center rounded-full bg-teal-600 text-white cursor-pointer;
-}
-</style>

src/components/InputEntry.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-const name = ref('')
-function go() {
-  if (name.value) {
-    uni.navigateTo({
-      url: `/pages/hi?name=${name.value}`,
-    })
-  }
-}
-</script>
-
-<template>
-  <view>
-    <view
-      p="x-4 y-2"
-      w="250px"
-      m="t-5 auto"
-      text="center"
-      bg="transparent"
-      border="~ rounded gray-200 dark:gray-700 solid"
-      outline="none active:none"
-      box-border
-      w-full
-    >
-      <input
-        v-model="name"
-        placeholder="What's your name?"
-        type="text"
-        autocomplete="off"
-        mr-0
-        w-full
-      >
-    </view>
-    <view>
-      <button
-        :disabled="!name"
-        m="t-3 auto"
-        m-auto
-        w-120rpx
-        rounded
-        bg-teal-600
-        px-4
-        py-1
-        text-sm
-        text-white
-        hover-class="bg-teal-700"
-        @click="go"
-      >
-        GO
-      </button>
-    </view>
-  </view>
-</template>

src/components/backNav.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+}>()
+
+function handleBack() {
+  uni.navigateBack()
+}
+</script>
+
+<template>
+  <view class="custom-nav">
+    <view class="nav-left">
+      <view class="back-btn" @tap="handleBack">
+        <wd-icon name="left" size="48rpx" />
+      </view>
+      <text class="nav-title">
+        {{ title || '返回' }}
+      </text>
+    </view>
+    <view class="nav-right">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.custom-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 120rpx;
+  padding-left: 32rpx;
+  padding-right: 32rpx;
+  background-color: #ffffff;
+  z-index: 999;
+}
+
+.nav-left {
+  display: flex;
+  align-items: center;
+}
+
+.back-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+}
+
+.nav-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333333;
+}
+
+.nav-right {
+  display: flex;
+  align-items: center;
+}
+</style>

src/components/home/homeNav.vue

@@ -1,13 +1,28 @@
 <script setup lang="ts">
 function onIconClick(name: string) {
-  console.log(`点击了${name}图标`)
+  if (name === '通知') {
+    uni.navigateTo({
+      url: '/pages/message/index',
+    })
+  }
+  else if (name === '设置') {
+    // 处理设置
+    console.log(`点击了${name}图标`)
+  }
+  else if (name === '蓝牙') {
+    // 处理蓝牙
+    console.log(`点击了${name}图标`)
+  }
+  else {
+    console.log(`点击了${name}图标`)
+  }
 }
 </script>
 
 <template>
   <view class="custom-nav">
     <view class="nav-left">
-      <image class="nav-logo" src="/static/logo.png" mode="aspectFit" @click="onIconClick('logo')" />
+      <image class="nav-logo" src="/static/logo.png" mode="aspectFit" @tap="onIconClick('logo')" />
       <view class="nav-info">
         <text class="nav-title">
           G6高速改扩建测试测试项目
@@ -18,9 +33,9 @@ function onIconClick(name: string) {
       </view>
     </view>
     <view class="nav-right">
-      <image class="nav-icon" src="/static/seting.png" mode="aspectFit" @click="onIconClick('设置')" />
+      <image class="nav-icon" src="/static/seting.png" mode="aspectFit" @tap="onIconClick('设置')" />
-      <image class="nav-icon" src="/static/Bluetooth.png" mode="aspectFit" @click="onIconClick('蓝牙')" />
+      <image class="nav-icon" src="/static/Bluetooth.png" mode="aspectFit" @tap="onIconClick('蓝牙')" />
-      <image class="nav-icon" src="/static/message.png" mode="aspectFit" @click="onIconClick('通知')" />
+      <image class="nav-icon" src="/static/message.png" mode="aspectFit" @tap="onIconClick('通知')" />
     </view>
   </view>
 </template>

src/pages/message/index.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+definePage({
+  layout: false,
+  style: {
+    navigationStyle: 'custom',
+  },
+})
+
+function handleMarkAllRead() {
+  console.log('全部标记已读')
+}
+</script>
+
+<template>
+  <view class="page">
+    <back-nav title="消息中心">
+      <wd-button size="small" round @tap="handleMarkAllRead">
+        全部标记已读
+      </wd-button>
+    </back-nav>
+
+    <view class="content">
+      <text class="empty">
+        暂无消息
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  background-color: #EAEFF9;
+}
+
+.content {
+  padding: 16px;
+  padding-top: 100px;
+}
+
+.empty {
+  font-size: 14px;
+  color: #999999;
+  text-align: center;
+  display: block;
+  margin-top: 100px;
+}
+</style>

src/uni-pages.d.ts

@@ -5,6 +5,7 @@
 
 type _LocationUrl =
   "/pages/home/index" |
+  "/pages/message/index" |
   "/pages/report/index" |
   "/pages/work/index";