fix: fixed the problem of global search js resource access failure (#2623)

zzcr · web-flow · commit 569ac3c0ca9d · 2024-12-09T14:09:19.000+08:00
* fix: fixed the problem of global search js resource access failure

* feat: update docs version
diff --git a/examples/sites/index.html b/examples/sites/index.html
@@ -21,24 +21,13 @@
       window.DEPLOY_URL = ''
       window.process = { env: {} }
     </script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/>
   </head>
 
   <body class="of-hidden">
     <div id="header"></div>
     <app-root></app-root>
     <div id="app" class="wp100 hp100 pt60 of-hidden"></div>
-    <div class="search-box" style="display: none;"></div>
-    <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
-    <script type="text/javascript">
-      docsearch({
-        appId: "AGPA5UXHMH",
-        apiKey: "5fa09fc20270efa61d68e2c2eb0f56df",
-        indexName: "opentiny",
-        container: ".search-box",
-        debug: false
-      });
-    </script>
+    <div class="search-box"></div>
     <!-- prettier-ignore -->
     <script id="tinyui-design-common" src="/static/js/design-common.js"></script>
     <script type="module" src="./src/main.js"></script>
diff --git a/examples/sites/package.json b/examples/sites/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.20.2",
+  "version": "3.20.3",
   "license": "MIT",
   "scripts": {
     "start": "vite",
@@ -47,7 +47,9 @@
     "tailwindcss": "^3.2.4",
     "vue": "^3.4.31",
     "vue-i18n": "^9.1.10",
-    "vue-router": "4.1.5"
+    "vue-router": "4.1.5",
+    "@docsearch/js": "^3.8.0",
+    "@docsearch/css": "^3.8.0"
   },
   "devDependencies": {
     "@opentiny-internal/unplugin-virtual-template": "workspace:~",
diff --git a/examples/sites/src/App.vue b/examples/sites/src/App.vue
@@ -17,8 +17,6 @@ import { iconClose } from '@opentiny/vue-icon'
 import { appData } from './tools'
 import useTheme from './tools/useTheme'
 
-const envTarget = import.meta.env.VITE_BUILD_TARGET || 'open'
-
 export default defineComponent({
   name: 'AppVue',
   props: [],
@@ -42,11 +40,6 @@ export default defineComponent({
         }
       })
       common.renderHeader()
-
-      const searchBox = document.querySelector('.search-box')
-      if (searchBox && envTarget === 'open') {
-        searchBox.style.display = 'block'
-      }
     })
     const { designConfig, currentThemeKey } = useTheme()
 
diff --git a/examples/sites/src/main.js b/examples/sites/src/main.js
@@ -31,11 +31,25 @@ import hljs from 'highlight.js/lib/core'
 import javascript from 'highlight.js/lib/languages/javascript'
 import css from 'highlight.js/lib/languages/css'
 import html from 'highlight.js/lib/languages/xml'
+import docsearch from '@docsearch/js'
+import '@docsearch/css'
+
+const envTarget = import.meta.env.VITE_BUILD_TARGET || 'open'
 
 hljs.registerLanguage('javascript', javascript)
 hljs.registerLanguage('css', css)
 hljs.registerLanguage('html', html)
 
+if (envTarget === 'open') {
+  docsearch({
+    appId: 'AGPA5UXHMH',
+    apiKey: '5fa09fc20270efa61d68e2c2eb0f56df',
+    indexName: 'opentiny',
+    container: '.search-box',
+    debug: false
+  })
+}
+
 // 实验后发现，先调用一次预热一下，后续再调用会有速度的提示，因此在main中预热一下。
 setTimeout(() => {
   hljs.highlightAuto(`<template>
diff --git a/examples/sites/src/style.css b/examples/sites/src/style.css
@@ -4,7 +4,8 @@ html {
 }
 
 /* reset.css 引入后造成site官网中 b 和 strong 标签没有粗体，此处还原粗体  */
-b, strong {
+b,
+strong {
   font-weight: 700;
 }
 
@@ -22,7 +23,8 @@ b, strong {
   z-index: 1000 !important;
 }
 
-.tiny-grid td,.tiny-grid th {
+.tiny-grid td,
+.tiny-grid th {
   vertical-align: middle;
 }
 
@@ -42,7 +44,7 @@ b, strong {
 
 .DocSearch-Button {
   border-radius: 6px;
-  transition: 0.4s
+  transition: 0.4s;
 }
 
 .DocSearch-Button:hover {

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,8 @@ html {`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`/* reset.css 引入后造成site官网中 b 和 strong 标签没有粗体，此处还原粗体 */`
`7`		`-b, strong {`
	`7`	`+b,`
	`8`	`+strong {`
`8`	`9`	`font-weight: 700;`
`9`	`10`	`}`
`10`	`11`
`@@ -22,7 +23,8 @@ b, strong {`
`22`	`23`	`z-index: 1000 !important;`
`23`	`24`	`}`
`24`	`25`
`25`		`-.tiny-grid td,.tiny-grid th {`
	`26`	`+.tiny-grid td,`
	`27`	`+.tiny-grid th {`
`26`	`28`	`vertical-align: middle;`
`27`	`29`	`}`
`28`	`30`
`@@ -42,7 +44,7 @@ b, strong {`
`42`	`44`
`43`	`45`	`.DocSearch-Button {`
`44`	`46`	`border-radius: 6px;`
`45`		`- transition: 0.4s`
	`47`	`+ transition: 0.4s;`
`46`	`48`	`}`
`47`	`49`
`48`	`50`	`.DocSearch-Button:hover {`