ソースを参照

feat:全局增加 pc-only.vue 界面,用于提示 PC 操作
feat:优化 404.vue 界面

YunaiV 4 ヶ月 前
コミット
10111a110f
3 ファイル変更71 行追加16 行削除
  1. 25 16
      src/pages/error/404.vue
  2. 39 0
      src/pages/error/pc-only.vue
  3. 7 0
      src/pages/index/index.ts

+ 25 - 16
src/pages/error/404.vue

@@ -1,30 +1,39 @@
 <script lang="ts" setup>
-import { HOME_PAGE } from '@/utils'
+import { navigateBackPlus } from '@/utils'
 
 definePage({
   style: {
-    // 'custom' 表示开启自定义导航栏,默认 'default'
     navigationStyle: 'custom',
   },
 })
 
-function goBack() {
-  // 当pages.config.ts中配置了tabbar页面时,使用switchTab切换到首页
-  // 否则使用navigateTo返回首页
-  uni.switchTab({ url: HOME_PAGE })
+function handleBack() {
+  navigateBackPlus()
 }
 </script>
 
 <template>
-  <view class="h-screen flex flex-col items-center justify-center">
-    <view> 404 </view>
-    <view> 页面不存在 </view>
-    <button class="mt-6 w-40 text-center" @click="goBack">
-      返回首页
-    </button>
+  <view class="yd-page-container flex flex-col">
+    <wd-navbar
+      title="页面不存在"
+      left-arrow placeholder safe-area-inset-top fixed
+      @click-left="handleBack"
+    />
+
+    <view class="flex flex-1 flex-col items-center bg-white px-48rpx pt-1/3">
+      <wd-icon name="warning" size="96rpx" color="#faad14" />
+      <view class="mt-24rpx text-34rpx text-[#333] font-semibold">
+        404
+      </view>
+      <view class="mt-16rpx text-center text-28rpx text-[#666] leading-44rpx">
+        抱歉,您访问的页面不存在
+      </view>
+
+      <view class="mt-32rpx w-full">
+        <wd-button :block="true" :plain="true" @click="handleBack">
+          返回
+        </wd-button>
+      </view>
+    </view>
   </view>
 </template>
-
-<style lang="scss" scoped>
-//
-</style>

+ 39 - 0
src/pages/error/pc-only.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { navigateBackPlus } from '@/utils'
+
+definePage({
+  style: {
+    navigationStyle: 'custom',
+  },
+})
+
+function handleBack() {
+  navigateBackPlus()
+}
+</script>
+
+<template>
+  <view class="yd-page-container flex flex-col">
+    <wd-navbar
+      title="仅支持 PC"
+      left-arrow placeholder safe-area-inset-top fixed
+      @click-left="handleBack"
+    />
+
+    <view class="flex flex-1 flex-col items-center bg-white px-48rpx pt-1/3">
+      <wd-icon name="laptop" size="96rpx" color="#1677ff" />
+      <view class="mt-24rpx text-34rpx text-[#333] font-semibold">
+        该功能仅支持 PC
+      </view>
+      <view class="mt-16rpx text-center text-28rpx text-[#666] leading-44rpx">
+        由于移动端操作不便,请在电脑端打开管理后台完成相关操作。
+      </view>
+
+      <view class="mt-32rpx w-full">
+        <wd-button :block="true" :plain="true" @click="handleBack">
+          返回
+        </wd-button>
+      </view>
+    </view>
+  </view>
+</template>

+ 7 - 0
src/pages/index/index.ts

@@ -99,6 +99,13 @@ const menuGroupsData: MenuGroup[] = [
     key: 'infra',
     name: '基础设施',
     menus: [
+      {
+        key: 'codegen',
+        name: '代码生成',
+        icon: 'chevron-up-rectangle',
+        url: '/pages/error/pc-only',
+        iconColor: '#1677ff',
+      },
       {
         key: 'accessLog',
         name: '访问日志',