vuepress-theme-uniapp-official 1.6.10 → 1.6.11

package/components/DcloudSearchPage/AIChat/index.vue

@@ -13,10 +13,9 @@
           <div class="meta">
             <span class="time">{{ m.time }}</span>
 
-            <!-- <div class="actions" v-if="m.role === 'assistant'">
-              <LikeButton :active="!!m.like" type="like" @click.stop="like(m)" />
-              <LikeButton :active="!!m.dislike" type="dislike" @click.stop="dislike(m)" />
-            </div> -->
+            <div class="actions" v-if="m.role === 'assistant' && m.uni_ai_feedback_id.length > 0">
+              <AIFeedback :like="m.like" :dislike="m.dislike" :uni_ai_feedback_id="m.uni_ai_feedback_id" @action="data => feedbackAction(m.id, data)"/>
+            </div>
           </div>
 
         </div>
@@ -59,13 +58,13 @@
 import { ref, nextTick, watchEffect, onMounted, computed } from 'vue'
 import searchPageConfig from '@theme-config/searchPage';
 import { renderMarkdown } from "./markdown-loader";
-import { MAX_AI_ANSWER_LENGTH, AI_CHAT_FOR_DOC_SEARCH_URL } from '../constants';
+import { MAX_AI_ANSWER_LENGTH, AI_CHAT_FOR_DOC_SEARCH_URL, AI_UPDATE_FEEDBACK_URL } from '../constants';
 import { ajax } from '../utils/postDcloudServer';
 import SelectPlatform from '../components/SelectPlatform.vue';
-import LikeButton from '../components/LikeButton.vue';
+import AIFeedback from '../components/AIFeedback.vue';
 import Skeleton from '../components/Skeleton.vue';
 
-const { aiPlatforms = [], aiChatForDocSearch = AI_CHAT_FOR_DOC_SEARCH_URL } = searchPageConfig;
+const { aiPlatforms = [], aiChatForDocSearch = AI_CHAT_FOR_DOC_SEARCH_URL, aiUpdateFeedbackUrl = AI_UPDATE_FEEDBACK_URL } = searchPageConfig;
 
 const props = defineProps({
   currentCategory: {
@@ -232,6 +231,7 @@ async function send() {
   sending.value = true
 
   let fakeReply = ''
+  let uni_ai_feedback_id = ''
   try {
     const res = await ajax(aiChatForDocSearch, 'POST', {
       "question": userText,
@@ -240,6 +240,7 @@ async function send() {
     })
     if (res.errorCode === 0) {
       fakeReply = res.chunk
+      uni_ai_feedback_id = res.uni_ai_feedback_id
     } else {
       fakeReply = `抱歉，AI 助手出错了：${res.errorMsg || '未知错误'}`
     }
@@ -253,6 +254,7 @@ async function send() {
     id: Date.now() + 1,
     role: 'assistant',
     raw: fakeReply,
+    uni_ai_feedback_id, // 从接口获取反馈 ID
     rendered: await renderHTML(fakeReply),
     time: formatTime(),
     isTyping: false,
@@ -269,19 +271,13 @@ async function send() {
   scrollToBottom()
 }
 
-function like(m) {
-  console.log('like');
-  m.like = !m.like;
-  if (m.like) {
-    m.dislike = false;
-  }
-}
-
-function dislike(m) {
-  console.log('dislike');
-  m.dislike = !m.dislike;
-  if (m.dislike) {
-    m.like = false;
+function feedbackAction(messageId, data) {
+  // 更新对应消息的反馈状态
+  const msg = messages.value.find(m => m.id === messageId);
+  if (msg) {
+    msg.like = data.like;
+    msg.dislike = data.dislike;
+    setSessionMessages(messages.value)
   }
 }
 

package/components/DcloudSearchPage/components/AIAnswer.vue

@@ -13,23 +13,17 @@
         本回答由 AI 生成，可能已过期、失效或不适用于当前情形，仅供参考
       </div>
 
-      <!-- <div v-show="hasMessage" class="ai-answer-footer_right">
-        <LikeButton :active="status.like" type="like" @click.stop="like" />
-        <LikeButton :active="status.dislike" type="dislike" @click.stop="dislike" />
-      </div> -->
+      <div v-show="hasMessage && props.item.uni_ai_feedback_id.length > 0">
+        <AIFeedback :uni_ai_feedback_id="props.item.uni_ai_feedback_id"/>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import searchPageConfig from '@theme-config/searchPage';
+import { computed } from 'vue';
 import Skeleton from './Skeleton.vue';
-import LikeButton from './LikeButton.vue';
-import { computed, reactive } from 'vue';
-
-const {
-  aiChatForDocSearch = 'https://ai-assist-api.dcloud.net.cn/tbox/chatForDocSearch'
-} = searchPageConfig;
+import AIFeedback from './AIFeedback.vue';
 
 const props = defineProps({
   item: {
@@ -41,27 +35,6 @@ const props = defineProps({
 const hasMessage = computed(() => {
   return props.item.msg && props.item.msg.length > 0;
 })
-
-const status = reactive({
-  like: false,
-  dislike: false
-})
-
-function like() {
-  console.log('like');
-  status.like = !status.like;
-  if (status.like) {
-    status.dislike = false;
-  }
-}
-
-function dislike() {
-  console.log('dislike');
-  status.dislike = !status.dislike;
-  if (status.dislike) {
-    status.like = false;
-  }
-}
 </script>
 
 <style lang="stylus">
@@ -122,7 +95,4 @@ function dislike() {
   justify-content space-between
   font-size 12px
   color #888
-
-  .ai-answer-footer_right
-    display flex
 </style>

package/components/DcloudSearchPage/components/AIFeedback.vue

@@ -0,0 +1,246 @@
+<script setup>
+import { reactive, computed, ref } from 'vue';
+import searchPageConfig from '@theme-config/searchPage';
+import LikeButton from './LikeButton.vue';
+import { sendFeedback } from '../utils/aiUtils';
+import { AI_UPDATE_FEEDBACK_URL } from '../constants';
+import { usePopoverDirective } from '../../../util'
+
+const { aiUpdateFeedbackUrl = AI_UPDATE_FEEDBACK_URL, } = searchPageConfig;
+const reasons = [
+  { label: '字数太长' },
+  { label: '常识错误' },
+  { label: '与提问不符' },
+  { label: '产品体验差' }
+];
+const { mouseEnter, directive: vPopover } = usePopoverDirective('#search-container')
+
+const props = defineProps({
+  uni_ai_feedback_id: {
+    type: String,
+    default: ''
+  },
+  like: {
+    type: Boolean,
+    default: false
+  },
+  dislike: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['action'])
+
+const status = reactive({
+  like: props.like,
+  dislike: props.dislike
+})
+const selectedReasons = ref([]);
+const comment = ref('');
+const aiFeedbackVisible = ref(false);
+const feedbackStatus = computed(() => {
+  if (!status.dislike && !status.like) {
+    return ''
+  }
+  if (status.like) {
+    return true
+  } else {
+    return false
+  }
+})
+const lastStatus = reactive({
+  like: false,
+  dislike: false
+})
+
+function setLastStatus() {
+  lastStatus.like = status.like;
+  lastStatus.dislike = status.dislike;
+}
+function resetStatus() {
+  status.like = lastStatus.like;
+  status.dislike = lastStatus.dislike;
+}
+function feedback() {
+  sendFeedback(aiUpdateFeedbackUrl, {
+    uni_ai_feedback_id: props.uni_ai_feedback_id,
+    comment: `${selectedReasons.value.join(';')} ${comment.value}`.trim(),
+    status: feedbackStatus.value
+  })
+    .then((response) => {
+      emit('action', status)
+      if (!response) {
+        resetStatus()
+      }
+    })
+    .catch(() => {
+      resetStatus()
+    })
+}
+
+function like() {
+  if (props.uni_ai_feedback_id) {
+    setLastStatus()
+    status.like = !status.like;
+    if (status.like) {
+      status.dislike = false;
+    }
+    feedback()
+  }
+}
+
+function dislike() {
+  if (props.uni_ai_feedback_id) {
+    setLastStatus()
+    status.dislike = !status.dislike;
+    aiFeedbackVisible.value = status.dislike
+    if (status.dislike) {
+      status.like = false;
+    }
+    feedback()
+  }
+}
+
+function toggleReason(text) {
+  const index = selectedReasons.value.indexOf(text);
+  if (index > -1) {
+    selectedReasons.value.splice(index, 1);
+  } else {
+    selectedReasons.value.push(text);
+  }
+}
+
+function closeComment() {
+  selectedReasons.value = [];
+  comment.value = '';
+  aiFeedbackVisible.value = false
+}
+function sendComment() {
+  feedback()
+  if (aiFeedbackVisible.value) {
+    selectedReasons.value = [];
+    comment.value = '';
+    aiFeedbackVisible.value = false;
+  }
+}
+</script>
+
+<template>
+  <div style="display: flex;">
+    <LikeButton :active="status.like" type="like" @click.stop="like" />
+    <div class="dislike_container" @mouseenter="mouseEnter">
+      <LikeButton :active="status.dislike" type="dislike" @click="dislike" />
+
+      <div class="ai-feedback" v-show="aiFeedbackVisible" v-popover>
+        <div class="ai-feedback-header">进一步反馈</div>
+
+        <div class="tags">
+          <div v-for="item in reasons" :key="item.label" class="tag"
+            :class="{ active: selectedReasons.includes(item.label) }" @click="toggleReason(item.label)">
+            {{ item.label }}
+          </div>
+        </div>
+
+        <textarea v-model="comment" class="feedback-input" placeholder="具体原因和建议"></textarea>
+
+        <div class="footer">
+          <button class="btn cancel" @click="closeComment">关闭</button>
+          <button class="btn submit" @click="sendComment">提交</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="stylus" scoped>
+.ai-feedback
+  position absolute
+  width 300px
+  background #fff
+  border-radius 14px
+  padding 18px
+  box-shadow 0 8px 28px rgba(0,0,0,0.12)
+  border 1px solid rgba(0,0,0,0.06)
+  animation fadeIn .2s ease
+  box-sizing border-box
+
+.ai-feedback-header
+  font-size 16px
+  font-weight 600
+  margin-bottom 14px
+  color #222
+
+.tags
+  width 100%
+  display flex
+  flex-wrap wrap
+  justify-content space-between
+
+.tag
+  width calc(50% - 8px)
+  background #f2f3f5
+  border-radius 8px
+  padding 8px 0
+  margin-bottom 8px
+  text-align center
+  font-size 14px
+  color #444
+  cursor pointer
+  transition all .2s ease
+
+.tag.active
+  background $accentColor
+  color #fff
+
+.feedback-input
+  width 100%
+  box-sizing border-box
+  padding 10px 12px
+  border 1px solid #e5e5e5
+  border-radius 10px
+  font-size 14px
+  color #333
+  min-height 60px
+  resize none
+  transition border .2s
+  outline none
+
+  &:focus
+    border 1px solid $accentColor
+
+.footer
+  display flex
+  justify-content flex-end
+  margin-top 8px
+
+.btn
+  padding 8px 16px
+  border-radius 8px
+  font-size 14px
+  border none
+  cursor pointer
+  transition background .2s
+
+.cancel
+  background #f2f3f5
+  color #333
+
+.cancel:hover
+  background #e5e6e7
+
+.submit
+  margin-left 8px
+  background rgba($accentColor, .9)
+  color #fff
+
+.submit:hover
+  background $accentColor
+
+@keyframes fadeIn
+  from
+    opacity 0
+    transform translateY(-4px)
+  to
+    opacity 1
+    transform translateY(0)
+</style>

package/components/DcloudSearchPage/constants.js

@@ -1,4 +1,5 @@
 export const DEFAULT_ENABLE_AI = true; // 默认启用 AI 助手
 export const MAX_AI_ANSWER_LENGTH = 6; // AI 消息最小长度
 export const AI_CHAT_FOR_DOC_SEARCH_URL = 'https://ai-assist-api-p.dcloud.net.cn/http/tbox/chatForDocSearch'
+export const AI_UPDATE_FEEDBACK_URL = 'https://ai-assist-api-p.dcloud.net.cn/http/tbox/updateFeedBackForDocSearch'
 export const AI_ERROR_MSG = '很抱歉，AI 助手未能找到相关答案。请尝试更换关键词进行搜索。'

package/components/DcloudSearchPage/index.vue

@@ -159,7 +159,7 @@ const {
 		resultsScreen: { resultsText, noResultsText, askNoResultsText },
 	},
 	extraFacetFilters = [],
-	aiChatForDocSearch = AI_CHAT_FOR_DOC_SEARCH_URL
+	aiChatForDocSearch = AI_CHAT_FOR_DOC_SEARCH_URL,
 } = searchPageConfig;
 const crawlerUrl = 'https://zh.uniapp.dcloud.io/'
 
@@ -206,6 +206,7 @@ export default {
 
 			searchAIResult: Promise.resolve(null),
 			aiMessage: {
+				uni_ai_feedback_id: '',
 				isAI: true,
 				title: 'AI 助手回答',
 				msg: ''
@@ -448,6 +449,7 @@ export default {
 					"question": this.searchValue,
 					"group_name": this.currentCategory.text
 				}).then(res => {
+					this.aiMessage.uni_ai_feedback_id = res.uni_ai_feedback_id || ''
 					if (res.errorCode === 0) {
 						return renderMarkdown(res.chunk)
 					} else {

package/components/DcloudSearchPage/utils/aiUtils.js

@@ -0,0 +1,29 @@
+import { ajax } from './postDcloudServer.js';
+
+/**
+ *
+ * @param {string} url AI_UPDATE_FEEDBACK_URL
+ * @param {{ uni_ai_feedback_id: string, comment: string, status: boolean|string }} payload
+ *
+ * @returns {Promise<boolean>}
+ */
+export function sendFeedback(url, payload) {
+	const data = {
+		uni_ai_feedback_id: payload.uni_ai_feedback_id,
+		comment: payload.comment,
+		status: payload.status, // true: like, false: dislike, '': neutral
+	};
+	return ajax(url, 'post', data)
+		.then(response => {
+			if (response.errorCode === 0) {
+				return true;
+			} else {
+				console.error('sendFeedback response error:', response.errorMsg);
+				return false;
+			}
+		})
+		.catch(error => {
+			console.error('sendFeedback error:', error);
+			return false;
+		});
+}

package/global-components/Popover.vue

@@ -1,27 +1,20 @@
 <script setup>
 import { ref, useSlots } from 'vue'
-import { getNavbarHeight } from '../util'
+import { usePopoverDirective } from '../util'
 
 const emit = defineEmits(['show', 'hide'])
 
+const { mouseEnter, directive: vPopover } = usePopoverDirective('.theme-default-content')
+
 const props = defineProps({
   table: String
 })
 
 const infoHover = ref(false)
 const slots = useSlots()
-let mouseOptions = {}
 
-const mouseEnter = (e) => {
-  const { top, left, bottom, right, height, width } = e.target.getBoundingClientRect()
-  mouseOptions = {
-    top,
-    left,
-    bottom,
-    right,
-    height,
-    width
-  }
+const wrapperMouseEnter = (e) => {
+  mouseEnter(e)
   infoHover.value = true
   emit('show')
 }
@@ -30,61 +23,12 @@ const mouseLeave = (e) => {
   infoHover.value = false
   emit('hide')
 }
-
-const vPopover = {
-  inserted(el, binding, vnode, prevVnode) {
-    const ThemeDefaultContent = document.querySelector('.theme-default-content')
-    if (ThemeDefaultContent) {
-      ThemeDefaultContent.appendChild(el)
-    }
-  },
-  componentUpdated(el, binding, vnode, prevVnode) {
-    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-    const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
-    const screenWidth = document.documentElement.clientWidth
-
-    const { width, height } = el.getBoundingClientRect()
-    const { left: targetLeft, top: targetTop, bottom: targetBottom, right: targetRight, height: targetHeight, width: targetWidth } = mouseOptions
-    const OFFSET = 10
-    const NAVBAR_HEIGHT = getNavbarHeight()
-
-    // 默认 icon 正中间位置
-    const HALF_WIDTH = width / 2
-    const HALF_TARGET_WIDTH = targetWidth / 2
-    const TOP = height // + OFFSET
-    const LEFT = HALF_TARGET_WIDTH - HALF_WIDTH
-
-    const DEFAULT_TOP = targetTop + scrollTop
-    const DEFAULT_LEFT = targetLeft + scrollLeft
-
-    let currentTop = DEFAULT_TOP - TOP
-    let currentLeft = DEFAULT_LEFT + LEFT
-
-    if (targetTop - NAVBAR_HEIGHT - TOP - OFFSET > 0) {
-      // 上方空间够
-      currentTop = currentTop - OFFSET
-    } else {
-      // 上方空间不够
-      currentTop = currentTop + (height + targetHeight) + OFFSET
-    }
-
-    const RIGHT_OFFSET = (screenWidth - (targetLeft + HALF_TARGET_WIDTH)) - HALF_WIDTH
-    // const LEFT_OFFSET = (screenWidth - targetLeft - HALF_TARGET_WIDTH) - HALF_WIDTH
-
-    if (RIGHT_OFFSET < 0) {
-      // 右侧空间不够
-      currentLeft = screenWidth - width
-    }
-    el.style.top = `${currentTop < 0 ? 0 : currentTop}px`
-    el.style.left = `${currentLeft < 0 ? 0 : currentLeft}px`
-  }
-}
 </script>
 
 <template>
   <div class="popover" @mouseleave="mouseLeave">
     <span>
-      <div class="popover-reference-wrapper" @mouseenter="mouseEnter">
+      <div class="popover-reference-wrapper" @mouseenter="wrapperMouseEnter">
         <slot name="reference"></slot>
         <svg v-if="!slots.reference" width="20" height="20" t="1715917545486" class="icon" viewBox="0 0 1024 1024"
           version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10306" fill="#2c3e50">
@@ -113,7 +57,7 @@ const vPopover = {
 .popover-content-wrapper {
   position: absolute;
   background-color: #fff;
-  z-index: 11;
+  z-index: 601;
   border-radius: 5px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   transition: opacity .1s cubic-bezier(0.57, 0.85, 0.85, 0.57);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-uniapp-official",
-  "version": "1.6.10",
+  "version": "1.6.11",
   "description": "uni-app official website theme for vuepress",
   "main": "index.js",
   "repository": {
@@ -45,9 +45,9 @@
     "vuepress-plugin-mermaidjs": "1.9.1",
     "vuepress-plugin-named-chunks": "^1.1.4",
     "vuepress-plugin-zooming": "^1.1.8",
-    "vuepress-plugin-expandable-row": "^1.0.10",
     "vuepress-plugin-noscript-code": "^1.0.2",
-    "vuepress-plugin-check-md2": "^1.0.5"
+    "vuepress-plugin-check-md2": "^1.0.5",
+    "vuepress-plugin-expandable-row": "^1.0.10"
   },
   "resolutions": {
     "terser-webpack-plugin": "1.4.6",

package/util/index.js

@@ -1,121 +1,119 @@
 import Vue from 'vue';
 
-export const isServer = Vue.prototype.$isServer
-export const hashRE = /#.*$/
-export const extRE = /\.(md|html)$/
-export const endingSlashRE = /\/$/
-export const outboundRE = /^[a-z]+:/i
+export const isServer = Vue.prototype.$isServer;
+export const hashRE = /#.*$/;
+export const extRE = /\.(md|html)$/;
+export const endingSlashRE = /\/$/;
+export const outboundRE = /^[a-z]+:/i;
 
 export function normalize(path) {
-  return decodeURI(path)
-    .replace(hashRE, '')
-    .replace(extRE, '')
+	return decodeURI(path).replace(hashRE, '').replace(extRE, '');
 }
 
 export function getHash(path) {
-  const match = path.match(hashRE)
-  if (match) {
-    return match[0]
-  }
+	const match = path.match(hashRE);
+	if (match) {
+		return match[0];
+	}
 }
 
 export function isExternal(path) {
-  return outboundRE.test(path)
+	return outboundRE.test(path);
 }
 
 export function isMailto(path) {
-  return /^mailto:/.test(path)
+	return /^mailto:/.test(path);
 }
 
 export function isTel(path) {
-  return /^tel:/.test(path)
+	return /^tel:/.test(path);
 }
 
 export function ensureExt(path) {
-  if (isExternal(path)) {
-    return path
-  }
-  const hashMatch = path.match(hashRE)
-  const hash = hashMatch ? hashMatch[0] : ''
-  const normalized = normalize(path)
-
-  if (endingSlashRE.test(normalized)) {
-    return path
-  }
-  return normalized + '.html' + hash
+	if (isExternal(path)) {
+		return path;
+	}
+	const hashMatch = path.match(hashRE);
+	const hash = hashMatch ? hashMatch[0] : '';
+	const normalized = normalize(path);
+
+	if (endingSlashRE.test(normalized)) {
+		return path;
+	}
+	return normalized + '.html' + hash;
 }
 
 export function isActive(route, path) {
-  const routeHash = decodeURIComponent(route.hash)
-  const linkHash = getHash(path)
-  if (linkHash && routeHash !== linkHash) {
-    return false
-  }
-  const routePath = normalize(route.path)
-  const pagePath = normalize(path)
-  return routePath === pagePath
+	const routeHash = decodeURIComponent(route.hash);
+	const linkHash = getHash(path);
+	if (linkHash && routeHash !== linkHash) {
+		return false;
+	}
+	const routePath = normalize(route.path);
+	const pagePath = normalize(path);
+	return routePath === pagePath;
 }
 
 export function resolvePage(pages, rawPath, base) {
-  if (isExternal(rawPath)) {
-    return {
-      type: 'external',
-      path: rawPath
-    }
-  }
-  if (base) {
-    rawPath = resolvePath(rawPath, base)
-  }
-  const path = normalize(rawPath)
-  const hash = rawPath.split('#')[1]
-  for (let i = 0; i < pages.length; i++) {
-    if (normalize(pages[i].regularPath) === path) {
-      return Object.assign({}, pages[i], {
-        type: 'page',
-        path: ensureExt(pages[i].path) + (hash ? `#${hash}` : '')
-      })
-    }
-  }
-  console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`)
-  return {}
+	if (isExternal(rawPath)) {
+		return {
+			type: 'external',
+			path: rawPath,
+		};
+	}
+	if (base) {
+		rawPath = resolvePath(rawPath, base);
+	}
+	const path = normalize(rawPath);
+	const hash = rawPath.split('#')[1];
+	for (let i = 0; i < pages.length; i++) {
+		if (normalize(pages[i].regularPath) === path) {
+			return Object.assign({}, pages[i], {
+				type: 'page',
+				path: ensureExt(pages[i].path) + (hash ? `#${hash}` : ''),
+			});
+		}
+	}
+	console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`);
+	return {};
 }
 
 function resolvePath(relative, base, append) {
-  const firstChar = relative.charAt(0)
-  if (firstChar === '/') {
-    return relative
-  }
-
-  if (firstChar === '?' || firstChar === '#') {
-    return base + relative
-  }
-
-  const stack = base.split('/')
-
-  // remove trailing segment if:
-  // - not appending
-  // - appending to trailing slash (last segment is empty)
-  if (!append || !stack[stack.length - 1]) {
-    stack.pop()
-  }
-
-  // resolve relative path
-  const segments = relative.replace(/^\//, '').split('/')
-  for (let i = 0; i < segments.length; i++) {
-    const segment = segments[i]
-    if (segment === '..') {
-      stack.pop()
-    } else if (segment !== '.') {
-      stack.push(segment)
-    }
-  }
-
-  // ensure leading slash
-  if (stack[0] !== '') {
-    stack.unshift('')
-  }
-
-  return stack.join('/')
+	const firstChar = relative.charAt(0);
+	if (firstChar === '/') {
+		return relative;
+	}
+
+	if (firstChar === '?' || firstChar === '#') {
+		return base + relative;
+	}
+
+	const stack = base.split('/');
+
+	// remove trailing segment if:
+	// - not appending
+	// - appending to trailing slash (last segment is empty)
+	if (!append || !stack[stack.length - 1]) {
+		stack.pop();
+	}
+
+	// resolve relative path
+	const segments = relative.replace(/^\//, '').split('/');
+	for (let i = 0; i < segments.length; i++) {
+		const segment = segments[i];
+		if (segment === '..') {
+			stack.pop();
+		} else if (segment !== '.') {
+			stack.push(segment);
+		}
+	}
+
+	// ensure leading slash
+	if (stack[0] !== '') {
+		stack.unshift('');
+	}
+
+	return stack.join('/');
 }
 
 /**
@@ -126,29 +124,25 @@ function resolvePath(relative, base, append) {
  * @returns { SidebarGroup }
  */
 export function resolveSidebarItems(page, regularPath, site, localePath) {
-  const { pages, themeConfig } = site
-
-  const localeConfig = localePath && themeConfig.locales
-    ? themeConfig.locales[localePath] || themeConfig
-    : themeConfig
-
-  const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar
-  if (pageSidebarConfig === 'auto') {
-    return resolveHeaders(page)
-  }
-
-  const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar
-  if (!sidebarConfig) {
-    return []
-  } else {
-    const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig)
-    if (config === 'auto') {
-      return resolveHeaders(page)
-    }
-    return config
-      ? config.map(item => resolveItem(item, pages, base))
-      : []
-  }
+	const { pages, themeConfig } = site;
+
+	const localeConfig = localePath && themeConfig.locales ? themeConfig.locales[localePath] || themeConfig : themeConfig;
+
+	const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar;
+	if (pageSidebarConfig === 'auto') {
+		return resolveHeaders(page);
+	}
+
+	const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar;
+	if (!sidebarConfig) {
+		return [];
+	} else {
+		const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig);
+		if (config === 'auto') {
+			return resolveHeaders(page);
+		}
+		return config ? config.map(item => resolveItem(item, pages, base)) : [];
+	}
 }
 
 /**
@@ -156,41 +150,43 @@ export function resolveSidebarItems(page, regularPath, site, localePath) {
  * @returns { SidebarGroup }
  */
 function resolveHeaders(page) {
-  const headers = groupHeaders(page.headers || [])
-  return [{
-    type: 'group',
-    collapsable: false,
-    title: page.title,
-    path: null,
-    children: headers.map(h => ({
-      type: 'auto',
-      title: h.title,
-      basePath: page.path,
-      path: page.path + '#' + h.slug,
-      children: h.children || []
-    }))
-  }]
+	const headers = groupHeaders(page.headers || []);
+	return [
+		{
+			type: 'group',
+			collapsable: false,
+			title: page.title,
+			path: null,
+			children: headers.map(h => ({
+				type: 'auto',
+				title: h.title,
+				basePath: page.path,
+				path: page.path + '#' + h.slug,
+				children: h.children || [],
+			})),
+		},
+	];
 }
 
 export function groupHeaders(headers) {
-  // group h3s under h2
-  headers = headers.map(h => Object.assign({}, h))
-  let lastH2
-  headers.forEach(h => {
-    if (h.level === 2) {
-      lastH2 = h
-    } else if (lastH2) {
-      (lastH2.children || (lastH2.children = [])).push(h)
-    }
-  })
-  // TODO h1-h3
-  return headers.filter(h => h.level === 2)
+	// group h3s under h2
+	headers = headers.map(h => Object.assign({}, h));
+	let lastH2;
+	headers.forEach(h => {
+		if (h.level === 2) {
+			lastH2 = h;
+		} else if (lastH2) {
+			(lastH2.children || (lastH2.children = [])).push(h);
+		}
+	});
+	// TODO h1-h3
+	return headers.filter(h => h.level === 2);
 }
 
 export function resolveNavLinkItem(linkItem) {
-  return Object.assign(linkItem, {
-    type: linkItem.items && linkItem.items.length ? 'links' : 'link'
-  })
+	return Object.assign(linkItem, {
+		type: linkItem.items && linkItem.items.length ? 'links' : 'link',
+	});
 }
 
 /**
@@ -199,100 +195,98 @@ export function resolveNavLinkItem(linkItem) {
  * @returns { base: string, config: SidebarConfig }
  */
 export function resolveMatchingConfig(regularPath, config) {
-  if (Array.isArray(config)) {
-    return {
-      base: '/',
-      config: config
-    }
-  }
-  for (const base in config) {
-    if (ensureEndingSlash(regularPath).indexOf(encodeURI(base)) === 0) {
-      return {
-        base,
-        config: config[base]
-      }
-    }
-  }
-  return {}
+	if (Array.isArray(config)) {
+		return {
+			base: '/',
+			config: config,
+		};
+	}
+	for (const base in config) {
+		if (ensureEndingSlash(regularPath).indexOf(encodeURI(base)) === 0) {
+			return {
+				base,
+				config: config[base],
+			};
+		}
+	}
+	return {};
 }
 
 function ensureEndingSlash(path) {
-  return /(\.html|\/)$/.test(path)
-    ? path
-    : path + '/'
+	return /(\.html|\/)$/.test(path) ? path : path + '/';
 }
 
 function resolveItem(item, pages, base, groupDepth = 1) {
-  if (typeof item === 'string') {
-    return resolvePage(pages, item, base)
-  } else if (Array.isArray(item)) {
-    return Object.assign(resolvePage(pages, item[0], base), {
-      title: item[1]
-    })
-  } else {
-    const children = item.children || []
-    if (children.length === 0 && item.path) {
-      return Object.assign(resolvePage(pages, item.path, base), {
-        title: item.title
-      })
-    }
-    return {
-      type: 'group',
-      path: item.path,
-      title: item.title,
-      sidebarDepth: item.sidebarDepth,
-      initialOpenGroupIndex: item.initialOpenGroupIndex,
-      children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)),
-      collapsable: item.collapsable !== false
-    }
-  }
+	if (typeof item === 'string') {
+		return resolvePage(pages, item, base);
+	} else if (Array.isArray(item)) {
+		return Object.assign(resolvePage(pages, item[0], base), {
+			title: item[1],
+		});
+	} else {
+		const children = item.children || [];
+		if (children.length === 0 && item.path) {
+			return Object.assign(resolvePage(pages, item.path, base), {
+				title: item.title,
+			});
+		}
+		return {
+			type: 'group',
+			path: item.path,
+			title: item.title,
+			sidebarDepth: item.sidebarDepth,
+			initialOpenGroupIndex: item.initialOpenGroupIndex,
+			children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)),
+			collapsable: item.collapsable !== false,
+		};
+	}
 }
 
 export function forbidScroll(use = true) {
-  if (use) {
-    const classList = document.body.className.split(' ')
-    classList.push('forbid_scroll')
-    document.body.className = classList.join(' ')
-  } else {
-    document.body.className = document.body.className.replace(/\s+forbid_scroll/g, '')
-  }
+	if (use) {
+		const classList = document.body.className.split(' ');
+		classList.push('forbid_scroll');
+		document.body.className = classList.join(' ');
+	} else {
+		document.body.className = document.body.className.replace(/\s+forbid_scroll/g, '');
+	}
 }
 
 export const os = {
-  android: false,
-  ios: false,
-  mobile: false,
-  pc: false,
-  init: function () {
-    var ua = navigator.userAgent;
-    if (ua.match(/(Android);?[\s\/]+([\d+.]+)?/)) {
-      this.android = true;
-      this.mobile = true;
-      this.pc = false;
-    } else if (ua.match(/(iPhone\sOS)\s([\d_]+)/)) {
-      this.ios = true;
-      this.mobile = true;
-      this.pc = false;
-    } else {
-      this.android = false;
-      this.ios = false;
-      this.mobile = false;
-      this.pc = true;
-    }
-  }
+	android: false,
+	ios: false,
+	mobile: false,
+	pc: false,
+	init: function () {
+		var ua = navigator.userAgent;
+		if (ua.match(/(Android);?[\s\/]+([\d+.]+)?/)) {
+			this.android = true;
+			this.mobile = true;
+			this.pc = false;
+		} else if (ua.match(/(iPhone\sOS)\s([\d_]+)/)) {
+			this.ios = true;
+			this.mobile = true;
+			this.pc = false;
+		} else {
+			this.android = false;
+			this.ios = false;
+			this.mobile = false;
+			this.pc = true;
+		}
+	},
 };
 
 export function debounce(fn, delay) {
-  let timeout
-  const newFn = function () {
-    clearTimeout(timeout)
-    const timerFn = () => fn.apply(this, arguments)
-    timeout = setTimeout(timerFn, delay)
-  }
-  newFn.cancel = function () {
-    clearTimeout(timeout)
-  }
-  return newFn
+	let timeout;
+	const newFn = function () {
+		clearTimeout(timeout);
+		const timerFn = () => fn.apply(this, arguments);
+		timeout = setTimeout(timerFn, delay);
+	};
+	newFn.cancel = function () {
+		clearTimeout(timeout);
+	};
+	return newFn;
 }
 
 /*
@@ -303,31 +297,105 @@ export function debounce(fn, delay) {
  * @returns {Element}
  */
 export function findContainerInVm(ref, vm, def) {
-  if (!ref) return def
-  let container
-  let parent = vm
-  while ((parent = parent.$parent) && !container) {
-    container = parent.$refs[ref]
-  }
-  // Ensure it's html element (ref could be component)
-  if (container && container.$el) {
-    container = container.$el
-  }
-  return container || def
+	if (!ref) return def;
+	let container;
+	let parent = vm;
+	while ((parent = parent.$parent) && !container) {
+		container = parent.$refs[ref];
+	}
+	// Ensure it's html element (ref could be component)
+	if (container && container.$el) {
+		container = container.$el;
+	}
+	return container || def;
 }
 
 export function once(fn, ctx = null) {
-  let res
-  return (...args) => {
-    if (fn) {
-      res = fn.apply(ctx, args)
-      fn = null
-    }
-    return res
-  }
+	let res;
+	return (...args) => {
+		if (fn) {
+			res = fn.apply(ctx, args);
+			fn = null;
+		}
+		return res;
+	};
 }
 
 export const getNavbarHeight = () => {
-  const { height, top } = document.querySelector('.navbar').getBoundingClientRect()
-  return height + top
-}
+	const { height, top } = document.querySelector('.navbar').getBoundingClientRect();
+	return height + top;
+};
+
+export const usePopoverDirective = selector => {
+	let mouseOptions = {};
+	const mouseEnter = e => {
+		const { top, left, bottom, right, height, width } = e.target.getBoundingClientRect();
+		mouseOptions = {
+			top,
+			left,
+			bottom,
+			right,
+			height,
+			width,
+		};
+	};
+
+	return {
+		mouseEnter,
+		directive: {
+			inserted(el, binding, vnode, prevVnode) {
+				const insertContent = document.querySelector(selector);
+				if (insertContent) {
+					insertContent.appendChild(el);
+				}
+			},
+			componentUpdated(el, binding, vnode, prevVnode) {
+				const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+				const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
+				const screenWidth = document.documentElement.clientWidth;
+
+				const { width, height } = el.getBoundingClientRect();
+				const {
+					left: targetLeft,
+					top: targetTop,
+					bottom: targetBottom,
+					right: targetRight,
+					height: targetHeight,
+					width: targetWidth,
+				} = mouseOptions;
+				const OFFSET = 10;
+				const NAVBAR_HEIGHT = getNavbarHeight();
+
+				// 默认 icon 正中间位置
+				const HALF_WIDTH = width / 2;
+				const HALF_TARGET_WIDTH = targetWidth / 2;
+				const TOP = height; // + OFFSET
+				const LEFT = HALF_TARGET_WIDTH - HALF_WIDTH;
+
+				const DEFAULT_TOP = targetTop + scrollTop;
+				const DEFAULT_LEFT = targetLeft + scrollLeft;
+
+				let currentTop = DEFAULT_TOP - TOP;
+				let currentLeft = DEFAULT_LEFT + LEFT;
+
+				if (targetTop - NAVBAR_HEIGHT - TOP - OFFSET > 0) {
+					// 上方空间够
+					currentTop = currentTop - OFFSET;
+				} else {
+					// 上方空间不够
+					currentTop = currentTop + (height + targetHeight) + OFFSET;
+				}
+
+				const RIGHT_OFFSET = screenWidth - (targetLeft + HALF_TARGET_WIDTH) - HALF_WIDTH;
+				// const LEFT_OFFSET = (screenWidth - targetLeft - HALF_TARGET_WIDTH) - HALF_WIDTH
+
+				if (RIGHT_OFFSET < 0) {
+					// 右侧空间不够
+					currentLeft = screenWidth - width;
+				}
+				el.style.top = `${currentTop < 0 ? 0 : currentTop}px`;
+				el.style.left = `${currentLeft < 0 ? 0 : currentLeft}px`;
+			},
+		},
+	};
+};