feat 图标更换；代码优化

package-lock.json

@@ -198,6 +198,12 @@
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
       "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ=="
     },
+    "@types/node": {
+      "version": "17.0.32",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.32.tgz",
+      "integrity": "sha512-eAIcfAvhf/BkHcf4pkLJ7ECpBAhh9kcxRBpip9cTiO+hf+aJrsxYxBeS6OXvOd9WqNAJmavXVpZvY1rBjNsXmw==",
+      "dev": true
+    },
     "@types/normalize-package-data": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
@@ -523,6 +529,12 @@
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
       "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
     },
+    "async": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.3.tgz",
+      "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==",
+      "dev": true
+    },
     "async-foreach": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
@@ -2320,6 +2332,37 @@
         }
       }
     },
+    "sass-resources-loader": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/sass-resources-loader/-/sass-resources-loader-2.2.5.tgz",
+      "integrity": "sha512-po8rfETH9cOQACWxubT/1CCu77KjxwRtCDm6QAXZH99aUHBydwSoxdIjC40SGp/dcS/FkSNJl0j1VEojGZqlvQ==",
+      "dev": true,
+      "requires": {
+        "async": "^3.2.3",
+        "chalk": "^4.1.0",
+        "glob": "^7.1.6",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+          "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+          "dev": true
+        },
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
     "scroll-into-view-if-needed": {
       "version": "2.2.29",
       "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz",

package.json

@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@types/js-md5": "^0.4.3",
+    "@types/node": "^17.0.32",
     "@types/qs": "^6.9.7",
     "@vitejs/plugin-vue": "^2.3.1",
     "typescript": "^4.5.4",

src/App.vue

@@ -7,7 +7,7 @@ export default defineComponent({
 })
 </script>
 <script setup lang="ts">
-import { defineComponent,nextTick, onMounted, provide, ref, watch } from 'vue'
+import { defineComponent, nextTick, onMounted, provide, ref, watch } from 'vue'
 import { useRouter } from 'vue-router';
 import emitter from '@/util/eventBus'
 import { message } from 'ant-design-vue';
@@ -15,13 +15,17 @@ const router = useRouter()
 let nickName = ref<string>('')
 let avatar = ref<string>('https://joeschmoe.io/api/v1/random')
 let isTop = ref<boolean>(true)
-let activeIndex = ref<number>(0)
 let menuList = ref(['首页', '优巨引擎官网', '文档中心', '管理中心'])
 const container = ref()
 let currentRouteName = ref()
 let visible = ref<boolean>(false)
 let isRouterAlive = ref<boolean>(true);
 let showAgreement = ref<boolean>(false)
+let activeIndex = ref<number>(0)
+let index = localStorage.getItem('activeIndex')
+if (index) {
+  activeIndex.value = Number(index)
+}
 const reload = () => {
   isRouterAlive.value = false;
   nextTick(() => {
@@ -70,7 +74,10 @@ const loginOut = () => {
 }
 const menu = (i: number) => {
   let token = localStorage.getItem('token')
-  activeIndex.value = i
+  if (i === 0 || i === 3) {
+    activeIndex.value = i
+    localStorage.setItem('activeIndex', String(i))
+  }
   switch (i) {
     case 0:
       router.push('/')
@@ -105,7 +112,7 @@ const menu = (i: number) => {
     <!-- 头部 -->
     <a-layout-header
       :class="['header', isTop ? '' : 'header-color', currentRouteName === 'login' ? 'login-header' : '']">
-      <div class="head-content">
+      <div class="container">
         <div class="left" @click="router.push('/')">
           <img v-if="isTop" class="img" src="@/assets/images/1.png" alt="">
           <img v-else class="img" src="@/assets/images/1-1.png" alt="">
@@ -159,6 +166,7 @@ const menu = (i: number) => {
       </div>
     </a-layout-footer>
   </a-layout>
+  <!-- 客服、公众号 -->
   <div class="fixed top-40vh right-20px">
     <a-tooltip placement="left" color="white">
       <template #title>
@@ -187,15 +195,16 @@ const menu = (i: number) => {
       </div>
     </a-tooltip>
   </div>
-  <a-modal centered v-model:visible="visible" ok-text="确认" cancel-text="取消" title="提示" @ok="loginOut">
-    <p>此操作将退出当前登录用户, 是否继续?</p>
-  </a-modal>
+  <!-- 开发者协议 -->
   <a-modal centered v-model:visible="showAgreement" :footer="null" :width="900">
     <DevelopAgreement></DevelopAgreement>
   </a-modal>
+  <a-modal centered v-model:visible="visible" ok-text="确认" cancel-text="取消" title="提示" @ok="loginOut">
+    <p>此操作将退出当前登录用户, 是否继续?</p>
+  </a-modal>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -210,95 +219,64 @@ const menu = (i: number) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 60px;
-  color: #FFFFFF;
-  background: none;
+  height: $header-height !important;
+  color: #FFFFFF !important;
+  background: none !important;
+  padding: 0 !important;
   z-index: 99;
 
-  .head-content {
+  .left {
     display: flex;
-    justify-content: space-between;
-    width: 100%;
-    min-width: 600px;
-
-    .left {
-      display: flex;
-      align-items: center;
-
-      .img {
-        width: 30px;
-        height: 30px;
-        cursor: pointer;
-      }
+    align-items: center;
 
-      .name {
-        font-size: 16px;
-        font-weight: bold;
-        cursor: pointer;
-        margin-left: 20px;
-      }
+    .img {
+      width: 40px;
+      height: 40px;
+      cursor: pointer;
     }
 
-    .right {
-      display: flex;
-      align-items: center;
-
-      .btn {
-        font-size: 15px;
-        margin-right: 40px;
-        cursor: pointer;
-      }
-
-      .active-btn {
-        color: #0077EE;
-        font-weight: bold;
-      }
-
-      .login {
-        width: 80px;
-        height: 32px;
-        line-height: 32px;
-        text-align: center;
-        background: linear-gradient(141deg, #50A7FF 0%, #1B8DFF 100%);
-        border-radius: 16px 16px 16px 16px;
-        font-size: 14px;
-        color: #FFFFFF;
-        cursor: pointer;
-      }
+    .name {
+      font-size: 16px;
+      font-weight: bold;
+      cursor: pointer;
+      margin-left: 20px;
     }
-
   }
 
-  @media (min-width: 544px) {
-    .head-content {
-      max-width: 576px;
-    }
-  }
+  .right {
+    display: flex;
+    align-items: center;
 
-  @media (min-width: 768px) {
-    .head-content {
-      max-width: 720px;
+    .btn {
+      font-size: 15px;
+      margin-right: 40px;
+      cursor: pointer;
     }
-  }
 
-  @media (min-width: 992px) {
-    .head-content {
-      max-width: 940px;
+    .active-btn {
+      color: #0077EE;
+      font-weight: bold;
     }
-  }
 
-  @media (min-width: 1900px) {
-    .head-content {
-      max-width: 1500px;
+    .login {
+      width: 80px;
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      background: linear-gradient(141deg, #50A7FF 0%, #1B8DFF 100%);
+      border-radius: 16px 16px 16px 16px;
+      font-size: 14px;
+      color: #FFFFFF;
+      cursor: pointer;
     }
   }
 
 }
 
 .header-color {
-  background-color: #ffffff;
+  background-color: #ffffff !important;
   box-shadow: 0px 4px 4px rgb(198 198 198 / 25%);
-  color: #222222;
+  color: #222222 !important;
 }
 
 .login-header {
@@ -308,19 +286,19 @@ const menu = (i: number) => {
 }
 
 .lb-container {
-  min-height: calc(100vh - 80px);
+  min-height: calc(100vh - $footer-height);
   background: white;
 }
 
 .footer {
-  height: 80px;
-  padding: 10px 0;
+  height: $footer-height;
+  padding: 10px 0 !important;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-evenly;
-  background: #252525;
-  color: #FFFFFF;
+  background: #252525 !important;
+  color: #FFFFFF !important;
 
   .name {
     font-size: 18px;

src/assets/style/common.scss

@@ -0,0 +1,10 @@
+// 头部高度
+$header-height: 60px;
+// 底部高度
+$footer-height: 80px;
+.container {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+}
+// container 的媒体查询ant design vue框架已有

src/main.ts

@@ -5,5 +5,6 @@ import 'ant-design-vue/dist/antd.css';
 import router from './router'
 import store from './store'
 import 'virtual:windi.css'
+
 const app = createApp(App);
 app.use(Antd).use(router).use(store).mount('#app')

src/router/index.ts

@@ -17,11 +17,6 @@ const routes = [
     component: () => import('@/views/login/index.vue'),
   },
   {
-    path: "/development",
-    name: "development",
-    component: () => import('@/views/development/index.vue'),
-  },
-  {
     path: "/management",
     name: "management",
     component: () => import('@/views/management/index.vue'),

src/views/development/index.vue

@@ -1,12 +0,0 @@
-<script setup lang='ts'>
-import { onMounted,ref} from 'vue'
-
-onMounted(() => {
-
-})
-</script>
-<template>
-  <div>文档中心</div>
-</template>
-<style lang='scss' scoped>
-</style>

src/views/home/index.vue

@@ -26,19 +26,19 @@ const banners = ref([
     imgUrl: `8-0.png`,
     con: "优巨引擎开放平台",
     con1: "与伙伴一起共同成长",
-    con2: "猎豹AI提供丰富的开放能力和成熟的合作机制，助力合作伙伴在猎豹AI平台上构建本地数字化AI配送平台，焦距全网生态链。",
+    con2: "猎豹AI提供丰富的开放能力和成熟的合作机制，助力合作伙伴在猎豹AI平台上构建本地数字化AI配送平台，聚焦全网生态链。",
   },
   {
     imgUrl: `8-1.png`,
     con: "优巨引擎开放平台",
     con1: "与伙伴一起共同成长",
-    con2: "猎豹AI提供丰富的开放能力和成熟的合作机制，助力合作伙伴在猎豹AI平台上构建本地数字化AI配送平台，焦距全网生态链。",
+    con2: "猎豹AI提供丰富的开放能力和成熟的合作机制，助力合作伙伴在猎豹AI平台上构建本地数字化AI配送平台，聚焦全网生态链。",
   },
   {
     imgUrl: `8-2.png`,
     con: "优巨引擎开放平台",
     con1: "与伙伴一起共同成长",
-    con2: "猎豹AI提供丰富的开放能力和成熟的合作机制，助力合作伙伴在猎豹AI平台上构建本地数字化AI配送平台，焦距全网生态链。",
+    con2: "猎豹AI提供丰富的开放能力和成熟的合作机制，助力合作伙伴在猎豹AI平台上构建本地数字化AI配送平台，聚焦全网生态链。",
   },
 ]);
 const advantageList = ref([
@@ -78,11 +78,13 @@ const toRegister = () => {
   <div class="content">
     <a-carousel autoplay effect="fade">
       <div v-for="(v, i) in banners" :key="i">
-        <div class="h-610px pt-150px pl-220px text-white"
+        <div class="h-610px pt-150px text-white"
           :style="`background: url(${getAssetsFile(v.imgUrl)}) center no-repeat`">
-          <div class="text-60px font-bold">{{ v.con }}</div>
-          <div class="text-60px font-bold my-20px">{{ v.con1 }}</div>
-          <div class="w-600px text-16px font-500 leading-23px">{{ v.con2 }}</div>
+          <div class="container flex-col">
+            <p class="text-60px font-bold">{{ v.con }}</p>
+            <p class="text-60px font-bold my-20px">{{ v.con1 }}</p>
+            <p class="w-600px text-16px font-500 leading-23px">{{ v.con2 }}</p>
+          </div>
         </div>
       </div>
     </a-carousel>
@@ -113,12 +115,13 @@ const toRegister = () => {
         立即注册</div>
     </div>
     <!-- 优势 -->
-    <div class="flex justify-evenly items-center advantage">
-      <div class="flex flex-col items-center text-white" v-for="(v, i) in advantageList" :key="i">
-        <img class="w-60px h-60px" :src="getAssetsFile(v.img)" alt="">
-        <div class="text-18px font-500 my-10px">{{ v.name }}</div>
-        <div class="text-14px font-400">{{ v.tip }}</div>
-
+    <div class="flex items-center advantage">
+      <div class="container">
+        <div class="flex flex-1 flex-col items-center text-white" v-for="(v, i) in advantageList" :key="i">
+          <img class="w-60px h-60px" :src="getAssetsFile(v.img)" alt="">
+          <div class="text-18px font-500 my-10px">{{ v.name }}</div>
+          <div class="text-14px font-400">{{ v.tip }}</div>
+        </div>
       </div>
     </div>
     <!-- 合作伙伴 -->
@@ -132,9 +135,10 @@ const toRegister = () => {
         <div class="text-16px leading-19px text-gray-600 text-center font-500 uppercase mt-10px">cooperative partner
         </div>
       </div>
-      <div class="flex justify-center flex-wrap mt-22px mb-70px ">
-        <img class="w-248px h-88px mx-35px mb-40px" :src="getAssetsFile(`9 (${i + 1}).png`)" alt="" v-for="(v, i) in 15"
-          :key="i">
+      <div class="container flex-wrap justify-between py-60px">
+        <div class="w-1/5 px-20px pb-20px" v-for="(v, i) in 15" :key="i">
+          <img class="w-full" :src="getAssetsFile(`9 (${i + 1}).png`)" alt="">
+        </div>
       </div>
     </div>
   </div>

src/views/management/index.vue

@@ -23,7 +23,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <div class="flex pt-60px w-screen bg-[#f2f4fb] dev-h">
+  <div class="flex w-screen bg-[#f2f4fb] dev-h">
     <div class="h-full bg-white w-256px">
       <a-menu id="dddddd" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" style="width: 256px"
         mode="inline" @click="handleClick">
@@ -34,7 +34,7 @@ onMounted(() => {
         </a-sub-menu>
       </a-menu>
     </div>
-    <div class="w-full h-full px-20px py-20px">
+    <div class="w-full h-full px-20px py-20px overflow-auto">
       <router-view></router-view>
     </div>
   </div>
@@ -42,5 +42,6 @@ onMounted(() => {
 <style lang='scss' scoped>
 .dev-h {
   height: calc(100vh - 80px);
+  padding-top: $header-height;
 }
 </style>

src/views/management/userCenter/appInfo.vue

@@ -18,6 +18,13 @@ let applicationInfo = reactive<Application>({
   storeStatusNotifyUrl: '',
   orderStatusNotifyUrl: ''
 })
+let applicationInfo1 = reactive<Application>({
+  sandbox: 0,
+  appId: '',
+  appSecret: '',
+  storeStatusNotifyUrl: '',
+  orderStatusNotifyUrl: ''
+})
 onMounted(() => {
 
 })
@@ -25,37 +32,45 @@ const getAppInfo = () => {
   appInfo().then((res: any) => {
     console.log('app信息：', res);
     if (res.code === 0) {
-      // applicationInfo = reactive<Application>(res.data[0])
-      Object.assign(applicationInfo, res.data[0])
+      let data = res.data.filter((v: { sandbox: any; }) => {
+        return !v.sandbox
+      })
+      let data1 = res.data.filter((v: { sandbox: any; }) => {
+        return v.sandbox
+      })
+      Object.assign(applicationInfo, data[0])
+      Object.assign(applicationInfo1, data1[0])
     } else {
       message.error(res.msg)
     }
   })
 }
 getAppInfo()
-const submit = () => {
-  setCallback({ id: applicationInfo.id, storeStatusNotifyUrl: applicationInfo.storeStatusNotifyUrl, orderStatusNotifyUrl: applicationInfo.orderStatusNotifyUrl }).then((res: any) => {
-    console.log('res:', res);
-  })
+const submit = async () => {
+  let res: any = await setCallback({ id: applicationInfo.id, storeStatusNotifyUrl: applicationInfo.storeStatusNotifyUrl, orderStatusNotifyUrl: applicationInfo.orderStatusNotifyUrl })
+  let res1: any = await setCallback({ id: applicationInfo1.id, storeStatusNotifyUrl: applicationInfo1.storeStatusNotifyUrl, orderStatusNotifyUrl: applicationInfo1.orderStatusNotifyUrl })
+  if (!res.code && !res1.code) {
+    message.success('提交成功')
+  }
 }
 </script>
 <template>
-  <div class="px-30px py-30px w-full h-full rounded-10px bg-white">
+  <div class="px-30px py-30px w-full min-h-full rounded-10px bg-white">
     <div class="text-20px text-[#222222] font-bold">应用信息</div>
-    <div v-if="applicationInfo.sandbox" class="mt-30px ml-30px">
+    <div class="mt-30px ml-30px">
       <div class="relative text-16px font-500 text-[#333333] leading-19px line-title">正式环境</div>
       <div class="text-14px text-[#666666] font-500 ml-30px">
         <div class="flex items-center mt-20px">
           <p class="w-100px text-right mr-10px">App Key：</p>
-          <p>{{ applicationInfo.appId }}</p>
+          <p>{{ applicationInfo1.appId }}</p>
         </div>
         <div class="flex items-center mt-20px">
           <p class="w-100px text-right mr-10px">App Secret：</p>
-          <p>{{ applicationInfo.appSecret }}</p>
+          <p>{{ applicationInfo1.appSecret }}</p>
         </div>
       </div>
     </div>
-    <div v-else class="mt-30px ml-30px">
+    <div class="mt-30px ml-30px">
       <div class="relative text-16px font-500 text-[#333333] leading-19px line-title">测试环境</div>
       <div class="text-14px text-[#666666] font-500 ml-30px">
         <div class="flex items-center mt-20px">
@@ -68,19 +83,31 @@ const submit = () => {
         </div>
       </div>
     </div>
-    <div class="text-20px text-[#222222] font-bold mt-100px">联调商户</div>
-    <div class="text-20px text-[#222222] font-bold mt-100px">回调地址</div>
-    <a-form :model="applicationInfo" class="w-400px mt-30px ml-70px">
-      <a-form-item label="门店URL地址：" name="storeStatusNotifyUrl">
-        <a-input v-model:value="applicationInfo.storeStatusNotifyUrl" placeholder="请输入门店URL地址" />
-      </a-form-item>
-      <a-form-item label="订单URL地址：" name="orderStatusNotifyUrl">
-        <a-input v-model:value="applicationInfo.orderStatusNotifyUrl" placeholder="请输入订单URL地址" />
-      </a-form-item>
-      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
-        <a-button @click="submit" type="primary" html-type="submit">提交</a-button>
-      </a-form-item>
-    </a-form>
+    <!-- <div class="text-20px text-[#222222] font-bold mt-100px">联调商户</div> -->
+    <div class="text-20px text-[#222222] font-bold mt-40px">回调地址</div>
+    <div class="mt-30px ml-30px">
+      <div class="relative text-16px font-500 text-[#333333] leading-19px line-title">正式环境</div>
+      <a-form :model="applicationInfo1" class="w-400px mt-30px ml-70px">
+        <a-form-item label="门店URL地址：" name="storeStatusNotifyUrl">
+          <a-input v-model:value="applicationInfo1.storeStatusNotifyUrl" placeholder="请输入门店URL地址" />
+        </a-form-item>
+        <a-form-item label="订单URL地址：" name="orderStatusNotifyUrl">
+          <a-input v-model:value="applicationInfo1.orderStatusNotifyUrl" placeholder="请输入订单URL地址" />
+        </a-form-item>
+      </a-form>
+    </div>
+    <div class="mt-30px ml-30px">
+      <div class="relative text-16px font-500 text-[#333333] leading-19px line-title">测试环境</div>
+      <a-form :model="applicationInfo" class="w-400px mt-30px ml-70px">
+        <a-form-item label="门店URL地址：" name="storeStatusNotifyUrl">
+          <a-input v-model:value="applicationInfo.storeStatusNotifyUrl" placeholder="请输入门店URL地址" />
+        </a-form-item>
+        <a-form-item label="订单URL地址：" name="orderStatusNotifyUrl">
+          <a-input v-model:value="applicationInfo.orderStatusNotifyUrl" placeholder="请输入订单URL地址" />
+        </a-form-item>
+      </a-form>
+    </div>
+    <a-button @click="submit" type="primary" html-type="submit">提交</a-button>
   </div>
 </template>
 <style lang='scss' scoped>

vite.config.ts

@@ -11,5 +11,12 @@ export default defineConfig({
     alias: {
       "@": path.resolve(__dirname, "src")
     }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@/assets/style/common.scss";`
+      }
+    }
   }
 })