This is an automated email from the ASF dual-hosted git repository. critas pushed a commit to branch wx_add_model_choice in repository https://gitbox.apache.org/repos/asf/iotdb-docs.git
commit d952f8606f5325028ab4a60b71cd8c3a4aef37a3 Author: CritasWang <[email protected]> AuthorDate: Tue May 13 15:58:32 2025 +0800 add model choice --- src/.vuepress/components/Sidevar.vue | 114 +++++++++++++++++++++++++++++++---- src/.vuepress/utils/getDocVersion.ts | 2 + 2 files changed, 104 insertions(+), 12 deletions(-) diff --git a/src/.vuepress/components/Sidevar.vue b/src/.vuepress/components/Sidevar.vue index 6293387d..e160ac5d 100644 --- a/src/.vuepress/components/Sidevar.vue +++ b/src/.vuepress/components/Sidevar.vue @@ -2,19 +2,24 @@ <Sidebar class="iotdb-sidebar"> <template #top> <p class="vp-sidebar-header iotdb-sidebar-header"> - <span class="vp-sidebar-title">{{(sidebarItems && sidebarItems.length>0) ? sidebarItems[0]?.text: ''}}</span> + <span class="vp-sidebar-title">{{ (sidebarItems && sidebarItems.length > 0) ? sidebarItems[0]?.text : '' + }}</span> </p> <div class="sidebar-top-wrapper"> <ul class="switch-list" v-if="currentDialect"> - <li - :class="['switch-type', { 'switch-active': currentDialect === 'Tree' }]" + <li :class="['switch-type', { 'switch-active': currentDialect === 'Tree' }]" @click="handleChangeDialect('Tree')">{{ ModelName.Tree }} </li> - <li - :class="['switch-type', { 'switch-active': currentDialect === 'Table' }]" + <li :class="['switch-type', { 'switch-active': currentDialect === 'Table' }]" @click="handleChangeDialect('Table')">{{ ModelName.Table }} </li> </ul> + <div class="help-icon-wrapper"> + <div class="help-icon" @click="handleHelpClick"> + <span>?</span> + </div> + <div class="tooltip">{{ ModelName.Tip }}</div> + </div> </div> </template> </Sidebar> @@ -24,10 +29,11 @@ import { useSidebarItems } from "vuepress-theme-hope/modules/sidebar/composables/index.js"; import Sidebar from 'vuepress-theme-hope/modules/sidebar/components/Sidebar.js'; import { ref, watch, computed } from 'vue'; -import { useRoute } from 'vuepress/client'; -import { getDialect, getDocVersion } from '../utils/index.js'; +import { useRoute, withBase, useRouter } from 'vuepress/client'; +import { getDialect, getDocVersion, URL_SUFFIX } from '../utils/index.js'; const route = useRoute(); +const router = useRouter(); const currentLang = ref('zh'); const currentVersion = ref(''); const currentDialect = ref(''); @@ -36,9 +42,11 @@ const ModelName = computed(() => { return currentLang.value === 'zh' ? { 'Tree': '树模型', 'Table': '表模型', + 'Tip': '模型选择说明', } : { 'Tree': 'Tree', 'Table': 'Table', + 'Tip': 'Model Choice Description', }; }); @@ -47,14 +55,17 @@ const sidebarItems = useSidebarItems(); function handleChangeDialect(val: string) { const oldPath = 'latest'; const newPath = 'latest-Table'; - if(currentDialect.value ==='Table'){ + if (currentDialect.value === 'Table') { window.location.href = window.location.href.replace(newPath, oldPath); } else { window.location.href = window.location.href.replace(oldPath, newPath); } - // window.location.href = `${window.location.origin}/docs${currentLang.value === 'zh' ? currentVersion.value.link : currentVersion.value.enLink}`.replace(currentDialect.value, val); } +function handleHelpClick() { + const modelLink = withBase((currentLang.value === 'zh' ? 'zh/' : '') + 'UserGuide/' + currentVersion.value + '/Background-knowledge/Data-Model-and-Terminology' + URL_SUFFIX + '.html'); + router.push(modelLink); +} watch( () => route.path, @@ -66,10 +77,89 @@ watch( } else { currentLang.value = 'en'; } - currentVersion.value = getDocVersion(newVal,'latest'); - currentDialect.value = getDialect(newVal,''); + currentVersion.value = getDocVersion(newVal, 'latest'); + currentDialect.value = getDialect(newVal, ''); } }, { immediate: true }, ); -</script> \ No newline at end of file +</script> + +<style lang="scss"> +.vp-sidebar .vp-sidebar-links:first-child li:first-child { + display: none; +} + +.sidebar-top-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + overflow: visible; + padding-right: 1.25rem; +} + +.help-icon-wrapper { + position: relative; + margin-left: 8px; + overflow: visible; + + &:hover .tooltip { + visibility: visible; + opacity: 1; + } +} + +.help-icon { + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #e0e0e0; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 12px; + font-weight: bold; + color: #555; + transition: background-color 0.3s; + + &:hover { + background-color: #495ad4; + color: white; + } +} + +.tooltip { + position: absolute; + top: -30px; + left: 50%; + transform: translateX(-50%); + background-color: #333; + color: white; + padding: 5px 10px; + border-radius: 4px; + font-size: 12px; + white-space: nowrap; + pointer-events: none; + z-index: 1000; // 提高 z-index 确保不被遮挡 + filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); + visibility: hidden; + opacity: 0; + transition: opacity 0.3s; + + &:after { + content: ''; + position: absolute; + bottom: -5px; + left: 50%; + transform: translateX(-50%); + border-width: 5px 5px 0; + border-style: solid; + border-color: #333 transparent transparent; + } +} + +.iotdb-sidebar { + overflow: visible !important; +} +</style> \ No newline at end of file diff --git a/src/.vuepress/utils/getDocVersion.ts b/src/.vuepress/utils/getDocVersion.ts index ebf261c8..cfd6359b 100644 --- a/src/.vuepress/utils/getDocVersion.ts +++ b/src/.vuepress/utils/getDocVersion.ts @@ -55,3 +55,5 @@ export const getDialect = (path = '', defaultValue = '') => { } return defaultValue; }; + +export const URL_SUFFIX = '_apache'; \ No newline at end of file
