更新奇思妙想

docs/.vuepress/client.js

@@ -3,13 +3,15 @@ import Layout from './layouts/Layout.vue'
 import FetchGithubCommit from './components/FetchGithubCommit.vue'
 import DynamicTitle from './components/DynamicTitle.vue'
 import DIframe from './components/DIframe.vue'
+import TimeLine from './components/TimeLine/index.vue'
 
 // @see: https://v2.vuepress.vuejs.org/zh/advanced/cookbook/usage-of-client-config.html
 export default defineClientConfig({
   enhance({ app, router, siteData }) {
     app.component('FetchGithubCommit', FetchGithubCommit)
     app.component('DynamicTitle', DynamicTitle)
     app.component('DIframe', DIframe)
+    app.component('TimeLine', TimeLine)
   },
   setup() {},
   layouts: {

docs/.vuepress/components/TimeLine/TimeLine.vue

@@ -0,0 +1,221 @@
+<script setup>
+import { ref, computed, watchEffect } from 'vue'
+const ColorStyle = {
+  // 颜色主题对象
+  blue: '#1677ff',
+  green: '#52c41a',
+  red: '#ff4d4f',
+  gray: '#00000040',
+}
+
+const props = defineProps({
+  timelineData: {
+    type: Array,
+    default: () => [],
+  },
+  width: {
+    type: [String, Number],
+    default: '100%',
+  },
+  lineStyle: {
+    type: String,
+    default: 'solid',
+  },
+  mode: {
+    type: String,
+    default: 'left',
+  },
+  position: {
+    type: String,
+    default: 'left',
+  },
+})
+
+const desc = ref()
+const dotsHeight = ref([])
+const totalWidth = computed(() => {
+  if (typeof props.width === 'number') {
+    return props.width + 'px'
+  } else {
+    return props.width
+  }
+})
+const len = computed(() => {
+  return props.timelineData.length
+})
+function getDotsHeight() {
+  for (let n = 0; n < len.value; n++) {
+    dotsHeight.value[n] = getComputedStyle(
+      desc.value[n].firstElementChild || desc.value[n],
+      null
+    ).getPropertyValue('line-height')
+  }
+}
+watchEffect(
+  () => {
+    getDotsHeight()
+  },
+  { flush: 'post' }
+)
+watchEffect(
+  () => {
+    if (props.mode === 'center') {
+      for (let n = 0; n < len.value; n++) {
+        if ((n + 1) % 2) {
+          // odd
+          if (props.position === 'left') {
+            desc.value[n].classList.add('alternate-left-desc')
+          } else {
+            desc.value[n].classList.add('alternate-right-desc')
+          }
+        } else {
+          // even
+          if (props.position === 'left') {
+            desc.value[n].classList.add('alternate-right-desc')
+          } else {
+            desc.value[n].classList.add('alternate-left-desc')
+          }
+        }
+      }
+    }
+  },
+  { flush: 'post' }
+)
+</script>
+<template>
+  <div class="m-timeline-area" :style="`width: ${totalWidth};`">
+    <div class="m-timeline">
+      <div
+        :class="[
+          'm-timeline-item',
+          { last: index === timelineData.length - 1 },
+        ]"
+        v-for="(data, index) in timelineData"
+        :key="index"
+      >
+        <span
+          :class="`u-tail ${mode}-tail`"
+          :style="`border-left-style: ${lineStyle};`"
+        ></span>
+        <div
+          :class="`m-dot ${mode}-dot`"
+          :style="`height: ${dotsHeight[index]}`"
+        >
+          <slot name="dot" :index="index">
+            <span
+              class="u-dot"
+              v-if="data.color === 'red'"
+              :style="{ borderColor: ColorStyle.red }"
+            ></span>
+            <span
+              class="u-dot"
+              v-else-if="data.color === 'gray'"
+              :style="{ borderColor: ColorStyle.gray }"
+            ></span>
+            <span
+              class="u-dot"
+              v-else-if="data.color === 'green'"
+              :style="{ borderColor: ColorStyle.green }"
+            ></span>
+            <span
+              class="u-dot"
+              v-else-if="data.color === 'blue'"
+              :style="{ borderColor: ColorStyle.blue }"
+            ></span>
+            <span
+              class="u-dot"
+              v-else
+              :style="{ borderColor: data.color || ColorStyle.blue }"
+            ></span>
+          </slot>
+        </div>
+        <div ref="desc" :class="`u-desc ${mode}-desc`">
+          <slot name="desc" :row="data" :index="index">{{
+            data.desc || '--'
+          }}</slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.m-timeline-area {
+  .m-timeline {
+    .m-timeline-item {
+      position: relative;
+      padding-bottom: 30px;
+      .u-tail {
+        position: absolute;
+        top: 12px;
+        width: 0;
+        height: 100%;
+        border-left-width: 2px;
+        border-left-color: #e8e8e8;
+      }
+      .left-tail {
+        left: 5px;
+      }
+      .center-tail {
+        left: 0;
+        right: 0;
+        margin: 0 auto;
+      }
+      .right-tail {
+        right: 5px;
+      }
+      .m-dot {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        .u-dot {
+          display: inline-block;
+          width: 7px;
+          height: 7px;
+          border-width: 2px;
+          border-style: solid;
+          border-radius: 50%;
+          background: #fff;
+        }
+      }
+      .left-dot {
+        left: 6px;
+        transform: translateX(-50%);
+      }
+      .center-dot {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      .right-dot {
+        right: 6px;
+        transform: translateX(50%);
+      }
+      .u-desc {
+        font-size: 14px;
+        line-height: 1.5714285714285714;
+        word-break: break-all;
+      }
+      .left-desc {
+        margin-left: 25px;
+      }
+      .center-desc {
+        width: calc(50% - 12px);
+      }
+      .alternate-left-desc {
+        text-align: end;
+      }
+      .alternate-right-desc {
+        margin-left: calc(50% + 12px);
+      }
+      .right-desc {
+        margin-right: 25px;
+        text-align: end;
+      }
+    }
+    .last {
+      .u-tail {
+        display: none;
+      }
+    }
+  }
+}
+</style>

docs/.vuepress/components/TimeLine/index.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { ref } from 'vue'
+import Timeline from './TimeLine.vue'
+
+const timelineData = ref([
+  {
+    desc: '原型链',
+    date: '2023/03/10',
+    imgUrl: new URL('./imgs/ms1.png', import.meta.url).href,
+    color: 'green',
+  },
+  {
+    desc: 'React 生命周期 v16.3 以前',
+    date: '2023/07/19',
+    imgUrl: new URL('./imgs/ms2.png', import.meta.url).href,
+    color: 'red',
+  },
+  {
+    desc: 'React 生命周期 only v16.3',
+    date: '2023/11/07',
+    imgUrl: new URL('./imgs/ms3.png', import.meta.url).href,
+    color: 'blue',
+  },
+  {
+    desc: 'setTimeout 和 setInterval 的区别',
+    date: '2024/03/24',
+    imgUrl: new URL('./imgs/ms4.png', import.meta.url).href,
+    color: 'pink',
+  },
+  {
+    desc: 'Service Worker的离线缓存',
+    date: '2024/04/13',
+    imgUrl: new URL('./imgs/ms5.png', import.meta.url).href,
+  },
+  {
+    desc: '性能优化',
+    date: '2024/05/06',
+    imgUrl: new URL('./imgs/ms6.png', import.meta.url).href,
+    color: 'gray',
+  },
+  {
+    desc: '网络传输流程',
+    date: '2024/06/17',
+    imgUrl: new URL('./imgs/ms7.png', import.meta.url).href,
+  },
+])
+</script>
+<template>
+  <div class="u-card">
+    <Timeline
+      :timeline-data="timelineData.reverse()"
+      mode="center"
+      width="66vw"
+      line-style="dashed"
+      position="left"
+    >
+      <template #desc="{ row }">
+        <span>{{ row.date }}</span>
+        <div class="desc-card">
+          <img :src="row.imgUrl" alt="" />
+        </div>
+        <span class="mar-r">{{ row.desc }}</span>
+      </template>
+    </Timeline>
+  </div>
+</template>
+<style lang="scss" scoped>
+.u-card {
+  padding: 20px;
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  .desc-card {
+    padding: 10px 0 10px 10px;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+  }
+  img {
+    border-radius: 5px;
+  }
+}
+</style>

docs/.vuepress/config/navbar.js

@@ -41,6 +41,10 @@ export default [
     text: '🗃️技术总结',
     link: '/技术总结/',
   },
+  {
+    text: '🧐奇思妙想',
+    link: '/工具/奇思妙想/',
+  },
   {
     text: '🚀国内镜像 🇨🇳',
     link: 'https://web-blogs-embrance-t-59e6df9d980ba7c216f8993005a68b570df639f055.gitlab.io/',

docs/.vuepress/config/silder.js

@@ -75,13 +75,4 @@ export default [
       '/算法学习/javascript专项练习',
     ],
   },
-  // {
-  //   text: '🧑‍💻工具',
-  //   link: '/工具/',
-  //   collapsible: true,
-  //   children: [
-  //     '/工具/HTML概览',
-  //     '/工具/CSS概览',
-  //   ],
-  // },
 ]

docs/.vuepress/layouts/Layout.vue

@@ -36,9 +36,8 @@ const getCommit = () => {
 getCommit()
 
 const state = reactive({
-  showPageBottom: true,
+  showPageBottom: false,
   onLinNum: 0,
-  showHeaderNavBar: true,
 })
 
 const themeConfig = {
@@ -87,14 +86,9 @@ const route = useRoute()
 watch(
   () => route.path,
   async (val) => {
-    // console.log('监听route.path:', decodeURI(val))
     await nextTick()
     state.showPageBottom = decodeURI(val).includes('/工具/') ? false : true
-    if (val === '/') {
-      state.showHeaderNavBar = true
-    } else {
-      state.showHeaderNavBar = false
-    }
+    // console.log('监听route.path:', decodeURI(val), state.showPageBottom)
   },
   {
     flush: 'post',
@@ -143,9 +137,8 @@ onUnmounted(() => {
   <Fps v-show="state.showPageBottom" />
 
   <ParentLayout>
-    <template #navbar>
-      <div v-if="state.showHeaderNavBar"></div>
-    </template>
+    <!-- <template #navbar>
+    </template> -->
 
     <template #page-bottom v-if="state.showPageBottom">
       <div class="my-footer">