From a6f1feb98003221ecb993a985d26df21bedc52e2 Mon Sep 17 00:00:00 2001
From: luckyasme <807254037@qq.com>
Date: Tue, 13 May 2025 10:40:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=BA=E6=99=AF=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/.vitepress/src/components/doc/DocType.vue | 145 ++++++++++++++++++
 .../src/components/doc/DocTypeMobile.vue      | 140 +++++++++++++++++
 .../src/components/doc/DocVersion.vue         |   2 +
 app/.vitepress/src/i18n/home/home-en.ts       |   1 +
 app/.vitepress/src/i18n/home/home-zh.ts       |   1 +
 app/.vitepress/src/layouts/LayoutDoc.vue      |  18 +--
 6 files changed, 294 insertions(+), 13 deletions(-)
 create mode 100644 app/.vitepress/src/components/doc/DocType.vue
 create mode 100644 app/.vitepress/src/components/doc/DocTypeMobile.vue

diff --git a/app/.vitepress/src/components/doc/DocType.vue b/app/.vitepress/src/components/doc/DocType.vue
new file mode 100644
index 000000000..a34e81be7
--- /dev/null
+++ b/app/.vitepress/src/components/doc/DocType.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useRouter } from 'vitepress';
+import { OIcon, ODropdown, ODropdownItem, OScroller } from '@opensig/opendesign';
+
+import IconChevronDown from '~icons/app/icon-chevron-down.svg';
+
+import { businessScenarioList, toolList } from '@/config/home';
+import { useNodeStore } from '@/stores/node';
+import { useLocale } from '@/composables/useLocale';
+import { isElementVisible } from '@/utils/element';
+
+const router = useRouter()
+const nodeStore = useNodeStore();
+const { t, locale } = useLocale();
+const visible = ref(false);
+
+watch(visible, (val) => {
+  if (val) {
+    setTimeout(() => {
+      const scroller = document.querySelector<HTMLElement>('.doc-type-scroller .o-scroller-container');
+      const el = document.querySelector<HTMLElement>('.doc-type-scroller .doc-type-dropdown-active');
+      if (scroller && el && !isElementVisible(el, scroller)) {
+        el.scrollIntoView();
+      }
+    });
+  }
+});
+
+const scenarioData = computed(() => {
+  return businessScenarioList.filter(item => item.href[locale.value]);
+});
+
+const toolData = computed(() => {
+  return toolList.filter(item => item.href[locale.value]);
+});
+
+const onClickItem = (item: Record<string, any>) => {
+  if (nodeStore.moduleNode?.href !== item.href[locale.value]){
+    router.go(item.href[locale.value]);
+  }
+}
+</script>
+
+<template>
+  <div>
+    <ODropdown v-model:visible="visible" trigger="hover" option-position="bl">
+      <div class="doc-type-wrap hover-icon-rotate">
+        <p class="doc-type">{{ nodeStore.moduleNode?.label }}</p>
+        <OIcon class="icon"><IconChevronDown /></OIcon>
+      </div>
+      <template #dropdown>
+        <OScroller class="doc-type-scroller" show-type="hover" size="small" disabled-x>
+          <!-- 业务场景 -->
+          <div class="doc-type-small-title">{{ t('home.businessScenario') }}</div>
+          <ODropdownItem
+            v-for="item in scenarioData"
+            :key="item.href[locale]"
+            :class="{ 'doc-type-dropdown-active': nodeStore.moduleNode?.href === item.href[locale], 'o-dropdown-item-en': locale === 'en' }"
+            :style="{ '--dropdown-item-color-hover': 'var(--o-color-info2)' }"
+            @click="onClickItem(item)"
+          >
+            {{ item.title[locale] }}
+          </ODropdownItem>
+
+          <!-- 工具 -->
+          <div class="doc-type-small-title">{{ t('home.tool') }}</div>
+          <ODropdownItem
+            v-for="item in toolData"
+            :key="item.href[locale]"
+            :class="{ 'doc-type-dropdown-active': nodeStore.moduleNode?.href === item.href[locale], 'o-dropdown-item-en': locale === 'en' }"
+            :style="{ '--dropdown-item-color-hover': 'var(--o-color-info2)' }"
+            @click="onClickItem(item)"
+          >
+            {{ item.title[locale] }}
+          </ODropdownItem>
+        </OScroller>
+      </template>
+    </ODropdown>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.doc-type-wrap {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: var(--o-color-info1);
+
+  @include hover {
+    .doc-type-text {
+      color: var(--o-color-info2);
+    }
+  }
+}
+
+.doc-type {
+  margin-right: 8px;
+  color: var(--o-color-info1);
+  font-weight: 500;
+  @include text2;
+}
+
+.doc-type-scroller {
+  max-height: 320px;
+}
+
+.doc-type-small-title {
+  padding: 8px 12px 4px;
+  color: var(--o-color-info3);
+  @include tip2;
+}
+
+.o-dropdown {
+  display: inline-block;
+  margin-bottom: 8px;
+  @include respond-to('<=laptop') {
+    margin-bottom: 0;
+  }
+}
+
+.o-dropdown-item {
+  @include text1;
+  width: 200px;
+  white-space: nowrap;
+  --dropdown-item-justify: flex-start;
+  --dropdown-item-padding: 7px 12px;
+  @include hover {
+    background-color: var(--o-color-control2-light);
+  }
+}
+
+.o-dropdown-item-en {
+  width: 248px;
+}
+
+.doc-type-dropdown-active {
+  color: var(--o-color-primary1);
+  background-color: var(--o-color-control3-light);
+  @include hover {
+    color: var(--o-color-primary1);
+    background-color: var(--o-color-control3-light);
+  }
+}
+</style>
diff --git a/app/.vitepress/src/components/doc/DocTypeMobile.vue b/app/.vitepress/src/components/doc/DocTypeMobile.vue
new file mode 100644
index 000000000..4916efc16
--- /dev/null
+++ b/app/.vitepress/src/components/doc/DocTypeMobile.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useRouter } from 'vitepress';
+import { OIcon, ODialog } from '@opensig/opendesign';
+
+import IconChevronDown from '~icons/app/icon-chevron-down.svg';
+
+import { businessScenarioList, toolList } from '@/config/home';
+import { useLocale } from '@/composables/useLocale';
+import { useNodeStore } from '@/stores/node';
+import { isElementVisible } from '@/utils/element';
+
+const router = useRouter();
+const { t, locale } = useLocale();
+const nodeStore = useNodeStore();
+const showDlg = ref(false);
+
+watch(showDlg, (val) => {
+  if (val) {
+    setTimeout(() => {
+      const scroller = document.querySelector<HTMLElement>('.docs-type-dialog .o-scroller > .o-scroller-container');
+      const el = document.querySelector<HTMLElement>('.docs-type-dialog .doc-item-active-mb');
+      if (scroller && el && !isElementVisible(el, scroller)) {
+        el.scrollIntoView();
+      }
+    });
+  }
+});
+
+const scenarioData = computed(() => {
+  return businessScenarioList.filter(item => item.href[locale.value]);
+});
+
+const toolData = computed(() => {
+  return toolList.filter(item => item.href[locale.value]);
+});
+
+const onClickItem = (item: Record<string, any>) => {
+  if (nodeStore.moduleNode?.href !== item.href[locale.value]) {
+    router.go(item.href[locale.value]);
+    showDlg.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="doc-type-mb" @click="showDlg = true">
+    <p class="text">{{ nodeStore.moduleNode?.label }}</p>
+    <OIcon class="icon"><IconChevronDown /></OIcon>
+  </div>
+
+  <ODialog v-model:visible="showDlg" :phone-half-full="true" class="docs-type-dialog">
+    <template #header>
+      <div class="title-header">
+        <p class="title">{{ t('home.selectScenarioOrTool') }}</p>
+      </div>
+    </template>
+    <!-- 业务场景 -->
+    <div class="doc-type-small-title-mb">{{ t('home.businessScenario') }}</div>
+    <div
+      v-for="item in scenarioData"
+      :key="item.href[locale]"
+      class="doc-item-mb"
+      :class="{ 'doc-item-active-mb': nodeStore.moduleNode?.href === item.href[locale] }"
+      @click="onClickItem(item)"
+    >
+      {{ item.title[locale] }}
+    </div>
+
+    <!-- 工具 -->
+    <div class="doc-type-small-title-mb">{{ t('home.tool') }}</div>
+    <div
+      v-for="item in toolData"
+      :key="item.href[locale]"
+      class="doc-item-mb"
+      :class="{ 'doc-item-active-mb': nodeStore.moduleNode?.href === item.href[locale] }"
+      @click="onClickItem(item)"
+    >
+      {{ item.title[locale] }}
+    </div>
+
+    <div class="bottom-empty"></div>
+  </ODialog>
+</template>
+
+<style lang="scss">
+.docs-type-dialog {
+  .o-dlg-main {
+    --dlg-max-height: 446px;
+    margin: 24px;
+  }
+
+  .o-dlg-header {
+    --dlg-head-padding: 16px 16px 0 16px;
+  }
+
+  .o-dlg-body {
+    --dlg-body-padding: 12px 16px 0;
+  }
+
+  :deep(.o-dlg-header + .o-dlg-body) {
+    --dlg-padding-body-top: 0;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.doc-type-mb {
+  display: inline-flex;
+  margin-left: 8px;
+  @include h3;
+}
+
+.icon {
+  margin-left: 8px;
+}
+
+.doc-type-small-title-mb {
+  padding: 12px 0;
+  font-weight: 500;
+  color: var(--o-color-info1);
+  @include h4;
+}
+
+.doc-item-mb {
+  padding: 14px 16px;
+  color: var(--o-color-info1);
+  border-radius: var(--o-radius-xs);
+  @include h4;
+}
+
+.doc-item-active-mb {
+  color: var(--o-color-primary1);
+  background-color: var(--o-color-control3-light);
+}
+
+.bottom-empty {
+  padding-bottom: 16px;
+}
+</style>
diff --git a/app/.vitepress/src/components/doc/DocVersion.vue b/app/.vitepress/src/components/doc/DocVersion.vue
index 8df88017f..2a7a108f4 100644
--- a/app/.vitepress/src/components/doc/DocVersion.vue
+++ b/app/.vitepress/src/components/doc/DocVersion.vue
@@ -75,8 +75,10 @@ const changeVersion = (item: { href?: string }) => {
 }
 
 .version-dropdown-active {
+  color: var(--o-color-primary1);
   background-color: var(--o-color-control3-light);
   @include hover {
+    color: var(--o-color-primary1);
     background-color: var(--o-color-control3-light);
   }
 }
diff --git a/app/.vitepress/src/i18n/home/home-en.ts b/app/.vitepress/src/i18n/home/home-en.ts
index 777cfca1e..b8075ea7c 100644
--- a/app/.vitepress/src/i18n/home/home-en.ts
+++ b/app/.vitepress/src/i18n/home/home-en.ts
@@ -4,4 +4,5 @@ export default {
   topSearch: 'Popular searches: ',
   businessScenario: 'Scenarios',
   tool: 'Tools',
+  selectScenarioOrTool: 'Select Scenario/Tool',
 };
diff --git a/app/.vitepress/src/i18n/home/home-zh.ts b/app/.vitepress/src/i18n/home/home-zh.ts
index 1502becc4..af741805c 100644
--- a/app/.vitepress/src/i18n/home/home-zh.ts
+++ b/app/.vitepress/src/i18n/home/home-zh.ts
@@ -4,4 +4,5 @@ export default {
   topSearch: '热门搜索：',
   businessScenario: '业务场景',
   tool: '工具',
+  selectScenarioOrTool: '选择场景/工具',
 };
diff --git a/app/.vitepress/src/layouts/LayoutDoc.vue b/app/.vitepress/src/layouts/LayoutDoc.vue
index c1df43629..8039b0976 100644
--- a/app/.vitepress/src/layouts/LayoutDoc.vue
+++ b/app/.vitepress/src/layouts/LayoutDoc.vue
@@ -5,6 +5,8 @@ import { storeToRefs } from 'pinia';
 import { OIcon, useMessage } from '@opensig/opendesign';
 
 import DocFooter from '@/components/doc/DocFooter.vue';
+import DocType from '@/components/doc/DocType.vue';
+import DocTypeMobile from '@/components/doc/DocTypeMobile.vue';
 import DocVersion from '@/components/doc/DocVersion.vue';
 import DocVersionMobile from '@/components/doc/DocVersionMobile.vue';
 import DocSearch from '@/components/doc/DocSearch.vue';
@@ -213,7 +215,7 @@ onUnmounted(() => {
   <div class="ly-container">
     <template v-if="docsMenu.length > 0">
       <div v-if="!isPhone" class="doc-sidebar" :class="{ 'is-closed': lePad && isSidebarHidden }">
-        <p class="doc-type">{{ nodeStore.moduleNode?.label }}</p>
+        <DocType />
         <DocVersion v-if="!viewStore.isCommonView" :version="version" />
         <DocSearch @switchVisible="isSidebarHidden = true" />
         <DocMenu
@@ -233,7 +235,7 @@ onUnmounted(() => {
         <div class="sidebar-top">
           <div class="menu-opener-mb" :class="{ 'menu-opener-mb-active': !isSidebarHidden }">
             <OIcon @click="switchMenu"><IconExpand /></OIcon>
-            <p class="text">{{ nodeStore.moduleNode?.label }}</p>
+            <DocTypeMobile />
           </div>
           <DocVersionMobile v-if="!viewStore.isCommonView" :version="version" />
         </div>
@@ -436,13 +438,10 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   color: var(--o-color-info1);
-  @include h3;
+  
   .o-icon svg {
     width: var(--o-icon_size-m);
   }
-  .text {
-    margin-left: 8px;
-  }
 }
 .menu-opener-mb-active {
   .o-icon {
@@ -490,13 +489,6 @@ onUnmounted(() => {
   }
 }
 
-.doc-type {
-  @include text2;
-  color: var(--o-color-info1);
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-
 .ly-doc {
   padding-top: var(--layout-doc-padding-top);
   padding-bottom: var(--layout-doc-padding-bottom);
-- 
Gitee