左侧菜单插件自动化 以及点击滚动到对应位置

.fes.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-16 10:53:09
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-10-26 09:13:11
+ * @LastEditTime: 2023-11-02 08:43:08
  */
 // import { resolve } from 'path';
 import { join } from 'path';
@@ -23,6 +23,9 @@ export default defineBuildConfig({
         title: 'Ice.gl',
         navigation: 'top',
         multiTabs: false,
+        isFixedHeader: true,
+        // isFixedSidebar: true,
+        // sideWidth: 800,
         logo: 'logo.png',
         menus: [
             {

README.md

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-16 10:53:09
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-10-31 11:38:06
+ * @LastEditTime: 2023-11-02 08:05:54
 -->
 # 🧊🧊🧊 icegl-three-vue-tres 🧊🧊🧊
 ## 🎉🎉🎊 三维可视化项目快速落地の开源框架 🎊🎉🎉
@@ -31,7 +31,7 @@ ThreeJS大名鼎鼎的基于浏览器渲染，JavaScript语言的3D库。
 
 集成封装项目落地的常用库：图标、多语言、API接口调用、Vuex/Pinia、model数据封装、页面layout/权限access、路由管理等。
 
-- 🌠 像写Vue3.x一样写三维可视化项目 * TresJS [点击详情](https://tresjs.org/guide)
+- 🌠 像写Vue3.x一样写三维可视化项目，并且全功能版本追溯保持threeJS最新版本 * TresJS [点击详情](https://tresjs.org/guide)
 
 ```html
 <template>

src/pages/index.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-16 10:53:09
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-11-01 12:55:50
+ * @LastEditTime: 2023-11-02 09:08:58
 -->
 <template>
     <div class="flex h-full">
@@ -27,21 +27,16 @@
                         <PictureOutlined />
                     </template>
                     <template #label>插件中心</template>
-                    <f-menu-item value="2.1">
+                    <f-menu-item v-for="(onePlugin, pkey) in pluginsConfig" :value="pkey">
-                        <template #label>{{ pluginsConfig.digitalCity.title }}</template>
+                        <template #label>{{ onePlugin.title }}</template>
-                    </f-menu-item>
-                    <f-menu-item value="2.2">
-                        <template #label>{{ pluginsConfig.earthSample.title }}</template>
-                    </f-menu-item>
-                    <f-menu-item value="2.3">
-                        <template #label>{{ pluginsConfig.vantaJS.title }}</template>
                     </f-menu-item>
                 </f-sub-menu>
             </f-menu>
         </div>
-        <div class="w-full">
+        <div class="flex-1 overflow-scroll" style="height: calc(100vh - 54px);">
-            <div style="background-color: #f1f1f2;" v-for="(onePlugin, pkey) in pluginsConfig" :key="pkey">
+            <div style="background-color: #f1f1f2;" v-for="(onePlugin, pkey) in pluginsConfig" :key="pkey"
-                <FDivider titlePlacement="left">{{ onePlugin.title }}</FDivider>
+                :ref="el => tabListRef[pkey] = el">
+                <FDivider titlePlacement="left">{{ onePlugin.title + pkey }}</FDivider>
                 <FText class="ml-13" tag="i" size="small">{{ onePlugin.intro }}</FText>
                 <div class="flex flex-wrap flex-justify-start content-start mt-6 pl-6">
                     <div class="w-80 mr-10 mb-10 overflow-hidden" v-for="(onePreview, okey) in onePlugin.preview"
@@ -61,7 +56,8 @@
 </template>
 
 <script setup lang="ts">
-import { defineRouteMeta, useRouter } from '@fesjs/fes'; // 一大坑，fesJS的路由被他自己封装了
+import { ref } from 'vue';
+import { defineRouteMeta, useRouter } from '@fesjs/fes'; //fesJS的路由被他自己封装了
 import { AppstoreOutlined, PictureOutlined } from '@fesjs/fes-design/icon';
 import { FCard, FDivider, FText } from '@fesjs/fes-design';
 import { getPluginsConfig } from '../common/utils';
@@ -71,15 +67,13 @@ defineRouteMeta({
     title: '开源框架展示',
 });
 
-const router = useRouter()  // 一大坑，fesJS的路由被他自己封装了
+const tabListRef = ref([])
-
 let pluginsConfig = getPluginsConfig();
-
 const goto = (value: string) => {
-    console.log(value)
+    tabListRef.value[value.value]?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: "nearest" })
 }
+const router = useRouter()  //fesJS的路由被他自己封装了
 let publicPath = process.env.BASE_URL
-
 const toPage = (plugin: string, value: any) => {
     let routeUrl = router.resolve({
         path: `/${plugin}/${value}`
@@ -88,8 +82,12 @@ const toPage = (plugin: string, value: any) => {
 }
 </script>
 
-<style>
+<style lang="less">
 .layout-logo {
-    margin-right: 6.2em !important;
+    /* margin-right: 6.2em !important; */
+    width: 12.5rem !important;
+    padding: 0 !important;
+    justify-content: center;
+    margin: 0 !important;
 }
 </style>

src/plugins/earthSample/readme.md

@@ -0,0 +1,11 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2023-11-02 08:03:41
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2023-11-02 08:07:20
+-->
+
+## 依赖npm包:
+yarn add gsap

src/plugins/vantaJS/readme.md

@@ -0,0 +1,11 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2023-11-02 08:03:41
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2023-11-02 08:08:43
+-->
+
+## 依赖npm包:
+yarn add vanta