feat: 更新样式布局

super456 · Apr 26, 2024 · 0ad81d5 · 0ad81d5
1 parent eb2764c
commit 0ad81d5
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="纵倾童鞋的前端知识学习图谱，根据前端领域学习过程总结，用思维导图的方式总结个人所学知识和整个技能体系，方便梳理知识点、结构化输出、总结核心技术点等，期待您的关注⭐️（持续更新中🚀...）" />
-    <title>FE-MindMap | 纵倾童鞋</title>
+    <title>前端知识图谱 | 纵倾童鞋</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/scripts/generateReadme.js b/scripts/generateReadme.js
@@ -3,7 +3,7 @@ import { execa } from 'execa'
 import { globbySync } from 'globby'
 import { orderBy } from 'lodash-es'
 
-const MD_HEADER = `# FE-MindMap
+const MD_HEADER = `# 前端知识图谱
 
 纵倾童鞋的前端知识学习图谱，根据前端领域学习过程总结，用思维导图的方式总结个人所学知识和整个技能体系，方便梳理知识点、结构化输出、总结核心技术点等，期待您的关注⭐️（持续更新中🚀...）
 

diff --git a/src/App.vue b/src/App.vue
@@ -6,6 +6,13 @@ import data from '../public/xmind.json'
 
 const viewer = ref<XMindEmbedViewer>()
 const PROD = import.meta.env.PROD
+const fileName = ref(data[0].name)
+
+const githubIcon = `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>`
+
+const switchViewer = (name: string) => {
+  fileName.value = name
+}
 
 onMounted(async () => {
   const res = await fetch(data[0].path)
@@ -29,18 +36,45 @@ onMounted(async () => {
 
 <template>
   <h1 class="title">
-    FE-MindMap
+    前端知识图谱 - {{ fileName }}
+  </h1>
+  <nav class="nav">
     <img
       v-if="PROD"
       class="visitor"
       src="https://visitor-badge.laobi.icu/badge?page_id=super456.fe-mindmap"
       onerror="this.style.display='none'"
     />
-  </h1>
-  <nav class="nav">
-    <a href="https://github.com/super456" target="_blank" rel="noreferrer">纵倾童鞋</a>
-    <a href="https://github.com/super456/FE-MindMap" target="_blank" rel="noreferrer">GitHub</a>
+    <a href="https://github.com/super456" target="_blank" rel="noreferrer">
+      <div class="link">
+        <img
+          src="./../public/favicon.ico"
+          mode="scaleToFill"
+          class="icon"
+        />
+        纵倾童鞋
+      </div>
+    </a>
+    <a href="https://github.com/super456/FE-MindMap" target="_blank" rel="noreferrer">
+      <div class="link">
+        <div v-html="githubIcon" class="icon" />
+        GitHub
+      </div>
+    </a>
   </nav>
   <div id="fe-mindmap"></div>
-  <SwitchControl v-if="viewer?.load" :viewer="viewer" />
+  <SwitchControl v-if="viewer?.load" :viewer="viewer" @change="switchViewer" />
 </template>
+<style scoped>
+.link {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+</style>
diff --git a/src/components/DropdownMenu.vue b/src/components/DropdownMenu.vue
@@ -4,7 +4,7 @@ import { useFloating, offset } from '@floating-ui/vue'
 import data from '../../public/xmind.json'
 
 const emit = defineEmits<{
-  (e: 'click', filePath: string): void
+  (e: 'click', filePath: string, fileName: string): void
 }>()
 
 const trigger = ref()
@@ -22,15 +22,14 @@ const handleTrigger = () => {
   update()
 }
 
-const handleClick = (filePath: string) => {
+const handleClick = (filePath: string, fileName: string) => {
   open.value = false
-  emit('click', filePath)
+  emit('click', filePath, fileName)
 }
 </script>
 
 <template>
   <button class="btn" ref="trigger" @click="handleTrigger">
-    切换 Xmind
     <svg
       class="btn-icon"
       width="16"
@@ -52,6 +51,7 @@ const handleClick = (filePath: string) => {
         stroke-linecap="round"
       />
     </svg>
+    切换知识图谱
   </button>
   <Teleport to="body">
     <div
@@ -60,7 +60,7 @@ const handleClick = (filePath: string) => {
       ref="tooltip"
     >
       <div class="dropdown-menu">
-        <div v-for="item in data" class="dropdown-item" @click="handleClick(item.path)">
+        <div v-for="item in data" class="dropdown-item" @click="handleClick(item.path, item.name)">
           {{ item.name }} [{{ item.updateTime }}]
         </div>
       </div>

diff --git a/src/components/SwitchControl.vue b/src/components/SwitchControl.vue
@@ -3,6 +3,9 @@ import { XMindEmbedViewer } from 'xmind-embed-viewer'
 import DropdownMenu from './DropdownMenu.vue'
 
 const props = defineProps<{ viewer: XMindEmbedViewer }>()
+const emit = defineEmits<{
+  (e: 'change', fileName: string): void
+}>()
 
 const selectFileFromLocal = async (accept: string) => {
   const fileSelector = document.createElement('input')
@@ -24,8 +27,9 @@ const selectFileFromLocal = async (accept: string) => {
   return fileSelector.files[0]
 }
 
-const handleLoadFile = (filePath: string) => {
+const handleLoadFile = (filePath: string, fileName: string) => {
   fetch(filePath).then(async (res) => {
+    emit('change', fileName)
     props.viewer.load(await res.arrayBuffer())
   })
 }
@@ -40,7 +44,11 @@ const handleOpenLocalFile = async () => {
 <template>
   <div class="control">
     <DropdownMenu @click="handleLoadFile" />
-    <button class="btn" @click="handleOpenLocalFile">打开本地文件</button>
+    <span style="margin: 0 10px;">|</span>
+    <button class="btn" @click="handleOpenLocalFile">
+      <svg t="1714123135555" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4528" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M796.59008 298.14784v-20.0704c0-61.93152-51.24096-113.62304-112.55808-113.62304H391.168l-2.37568-3.80928-26.09152-38.0928c-18.6368-27.4432-55.37792-47.26784-84.25472-47.26784H104.448c-28.672 0-52.10112 19.82464-52.10112 47.26784v632.91392l95.4368-350.37184c15.9744-58.368 88.22784-106.9056 158.9248-106.9056h489.8816v-0.04096zM339.968 342.71232c-63.0784 0-127.3856 40.96-141.63968 90.23488L77.08672 854.17984c-14.21312 49.23392 26.50112 90.23488 89.53856 90.23488h539.32032c63.0784 0 127.3856-41.00096 141.63968-90.23488l121.2416-421.19168c14.21312-49.27488-26.50112-90.23488-89.53856-90.23488H339.968z m106.33216 411.648v-144.1792h-57.344c-24.69888-13.88544 8.11008-38.37952 8.11008-38.37952s106.57792-89.12896 120.4224-94.69952c21.83168-16.05632 31.45728 0 31.45728 0s123.24864 91.3408 135.04512 106.496c5.7344 24.33024-2.37568 26.58304-2.37568 26.58304h-60.2112v146.14528c0 18.75968-16.22016 32.11264-35.51232 32.11264h-106.78272c-19.2512 0-32.768-15.64672-32.768-34.07872z" fill="#8a8a8a" p-id="4529"></path></svg>
+      打开本地文件
+    </button>
   </div>
 </template>
 
@@ -73,9 +81,6 @@ const handleOpenLocalFile = async () => {
     &:hover {
       background-color: rgba(0, 0, 0, 0.05);
     }
-    & ~ .btn {
-      margin-left: 12px;
-    }
     &-icon {
       margin-left: 4px;
     }

diff --git a/src/index.scss b/src/index.scss
@@ -26,6 +26,8 @@ a {
 
 .nav {
   position: fixed;
+  display: flex;
+  align-items: center;
   right: 14px;
   top: 14px;
   margin: 10px 0;