feat：解决钉钉里的标题问题

index.html

@@ -15,21 +15,19 @@
   <noscript>
     <div>Please enable JavaScript to use this application.</div>
   </noscript>
-  <script>
+  <script>(function () {
+      // var vConsole = new window.VConsole();
+      // const angent = navigator.userAgent
+      // const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+      // const setting = localStorage.getItem('color-schema') || 'auto'
+      // if (setting === 'dark' || (prefersDark && setting !== 'light'))
+      //     document.documentElement.classList.toggle('dark', true)
 
-    (function () {
-      var vConsole = new window.VConsole();
-      var angent = navigator.userAgent
-      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-      const setting = localStorage.getItem('color-schema') || 'auto'
-      if (setting === 'dark' || (prefersDark && setting !== 'light'))
-        document.documentElement.classList.toggle('dark', true)
-
-      document.getElementsByTagName('html')[0].style.fontSize = `${(document.documentElement.clientWidth / 750) * 100}px`
-      window.onresize = function () {
-        document.getElementsByTagName('html')[0].style.fontSize = `${(document.documentElement.clientWidth / 750) * 100}px`
-      }
-    })()
+  document.getElementsByTagName('html')[0].style.fontSize = `${(document.documentElement.clientWidth / 750) * 100}px`
+  window.onresize = function () {
+          document.getElementsByTagName('html')[0].style.fontSize = `${(document.documentElement.clientWidth / 750) * 100}px`
+  }
+})()
   </script>
   <script src="/config.js"></script>
   <script type="module" src="/src/main.ts"></script>

package.json

@@ -15,6 +15,7 @@
     "amfe-flexible": "^2.2.1",
     "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
+    "dingtalk-jsapi": "^3.0.20",
     "lib-flexible": "^0.3.2",
     "pdfh5": "^1.4.3",
     "pinia": "^2.1.1",

pnpm-lock.yaml

@@ -13,6 +13,9 @@ dependencies:
   axios:
     specifier: ^1.4.0
     version: registry.npmmirror.com/axios@1.4.0
+  dingtalk-jsapi:
+    specifier: ^3.0.20
+    version: 3.0.20
   lib-flexible:
     specifier: ^0.3.2
     version: registry.npmmirror.com/lib-flexible@0.3.2
@@ -2042,6 +2045,12 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
 
+  /dingtalk-jsapi@3.0.20:
+    resolution: {integrity: sha512-t9eoamS+bc8QE+MtKQvNlJlvKwUg/8YuHpeff/xU0Y7b6Werrd8mropPkZO8PqV8QcXDxwGmTpSe0SoOmdIIgw==}
+    dependencies:
+      promise-polyfill: 7.1.2
+    dev: false
+
   /doctrine@3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
@@ -2580,6 +2589,10 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
+  /promise-polyfill@7.1.2:
+    resolution: {integrity: sha512-FuEc12/eKqqoRYIGBrUptCBRhobL19PS2U31vMNTfyck1FxPyMfgsXyW4Mav85y/ZN1hop3hOwRlUDok23oYfQ==}
+    dev: false
+
   /punycode@2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}

src/App.vue

@@ -1,5 +1,5 @@
 <template>
   <main>
-    <RouterView />
+    <RouterView style="background-color: #f2f2f2;min-height: 100vh;padding-top:0.5vh" />
   </main>
 </template>

src/main.ts

@@ -11,6 +11,7 @@ import 'virtual:windi.css'
 import './styles/main.scss'
 import './styles/table.scss'
 import './styles/pdf.scss'
+
 const app = createApp(App)
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)

src/pages/index.vue

@@ -1,4 +1,5 @@
 <script setup>
+import * as dd from 'dingtalk-jsapi'
 import { menuList } from './menuData.js'
 
 defineOptions({
@@ -10,11 +11,26 @@ const route = currentRoute.value
 const tag = route.query.tag
 let menuListData = {}
 for (const item of menuList) {
-  if (item.tag === tag)
+  if (item.tag === tag) {
+    dd.ready(() => {
+      dd.biz.navigation.setTitle({
+        title: item.title,
+      })
+    })
+
+    // document.title = item.title
     menuListData = item
+  }
 }
-function linkTo(path) {
-  router.push(path)
+function linkTo(child) {
+  dd.ready(() => {
+    dd.biz.navigation.setTitle({
+      title: child.menuName,
+    })
+  })
+
+  // document.title = child.menuName
+  router.push(child.path)
 }
 </script>
 
@@ -26,7 +42,7 @@ function linkTo(path) {
           <p>{{ menuListData.title }}</p>
         </div>
         <div class="funcIconCard">
-          <div v-for="child of menuListData.list" :key="child.menuName" class="funcIcon" @click="linkTo(child.path)">
+          <div v-for="child of menuListData.list" :key="child.menuName" class="funcIcon" @click="linkTo(child)">
             <img :src="child.icon">
             <p>{{ child.menuName }}</p>
           </div>
@@ -38,6 +54,8 @@ function linkTo(path) {
 
 <style lang="scss" scoped>
 .IndexPage {
+  background-color: #f2f2f2;
+
   .header {
     width: 100vw;
     position: fixed;
@@ -52,10 +70,10 @@ function linkTo(path) {
 
   .bodyContainer {
     // margin-top: 2.5vw;
-    padding: 2vw;
+    padding: 0 2vw;
 
     .titleCard {
-      font-size: 18px;
+      font-size: 20px;
       height: 6.7vw;
       line-height: 6.7vw;
       font-weight: bold;
@@ -70,7 +88,7 @@ function linkTo(path) {
 
       .funcIcon {
         width: 25%;
-        font-size: 15px;
+        font-size: 13px;
         text-align: center;
         display: flex;
         flex-direction: column;