feat: 换肤

src/packages/avatar/demo.vue

@@ -37,12 +37,10 @@ import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('avatar');
 export default createDemo({
   props: {},
-
   setup() {
     const activeAvatar = (event: Event) => {
       console.log('点击了头像', event);
     };
-
     return {
       activeAvatar
     };

src/packages/avatar/index.vue

@@ -34,11 +34,7 @@ export default create({
     }
   },
   setup(props, { emit, slots }) {
-    // setup内部只能访问这4个属性，值得注意的是props必须在上面声明才能在这里取到
-    // console.log('props', props, 'slots', slots);
     const { size, shape, bgColor, bgIcon, bgImage } = toRefs(props);
-    console.log('bgIcon', bgIcon);
-    //判断是否为小数点
     const activeAvatar = () => {
       emit('active-avatar', event);
     };

src/sites/assets/util/ref.ts

@@ -1,3 +1,5 @@
 import { ref } from 'vue';
 
 export const currentRoute = ref('/');
+
+export const themeColor = ref('red');

src/sites/doc/components/Footer.vue

@@ -5,6 +5,8 @@
         <h4 class="doc-footer-title">相关资源</h4>
         <div class="doc-footer-item">JDW智能构建平台</div>
         <div class="doc-footer-item">JDW智能构建平台</div>
+        <div class="doc-footer-item">JDW智能构建平台</div>
+        <div class="doc-footer-item">JDW智能构建平台</div>
       </div>
       <div class="doc-footer-list">
         <h4 class="doc-footer-title">相关资源</h4>
@@ -28,7 +30,7 @@
             class="doc-footer-select-item"
             v-for="(item, index) in data.themeList"
             :key="index"
-            @click.stop="checkTheme(index)"
+            @click.stop="checkTheme(item.color, index)"
             :class="{ active: data.activeIndex === index }"
           >
             <i :class="`circle-${item.color}`"></i>{{ item.name }}
@@ -41,6 +43,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
+import { themeColor } from '@/sites/assets/util/ref';
 export default defineComponent({
   name: 'doc-footer',
   setup() {
@@ -69,17 +72,17 @@ export default defineComponent({
         'click',
         e => {
           console.log('e.target', e.target);
-          // if (!this.$el.contains(e.target)){
-          //   data.isShowSelect = false;
-          // }
         },
         false
       );
     };
-    const checkTheme = (index: number) => {
+    const checkTheme = (color: string, index: number) => {
       data.isShowSelect = false;
       data.activeIndex = index;
-      console.log('data.isShowSelect', data.isShowSelect);
+      data.theme = color;
+      themeColor.value = color;
+      console.log('themeColor1', themeColor);
+      // bus.emit('select-theme', color)
     };
     return {
       data,
@@ -98,6 +101,7 @@ export default defineComponent({
     &-content {
       display: flex;
       justify-content: space-around;
+      align-items: flex-start;
       margin-right: 50px;
     }
     &-list {

src/sites/doc/components/Header.vue

@@ -1,14 +1,8 @@
 <template>
-  <div class="doc-header" :style="{ background: themeColor === 'red' ? headerBg : themeColor }" :class="`doc-header-${data.theme}`">
+  <!-- <div class="doc-header" :style="{ background: themeColor === 'red' ? headerBg : themeColor }" :class="`doc-header-${data.theme}`"> -->
+  <div class="doc-header" :class="themeName()">
     <div class="header-logo">
-      <a class="logo-link" href="#">
-        <template v-if="data.theme === 'red'">
-          <img src="../../assets/images/logo-header-white.png" />
-        </template>
-        <template v-else>
-          <img src="../../assets/images/logo-header-red.png" />
-        </template>
-      </a>
+      <a class="logo-link" href="#"></a>
       <span class="logo-border"></span>
     </div>
     <div class="header-nav">
@@ -17,7 +11,9 @@
       </div>
       <div class="nav-box">
         <ul class="nav-list">
-          <li class="nav-item" :class="{ active: isActive(header[0].name) }">{{ header[0].cName }}</li>
+          <li class="nav-item" :class="{ active: isActive(header[0].name) }">
+            <router-link :to="header[0].name">{{ header[0].cName }}</router-link>
+          </li>
           <li class="nav-item" :class="{ active: isActive(header[1].name) }">
             <router-link :to="header[1].name">{{ header[1].cName }}</router-link>
           </li>
@@ -53,14 +49,13 @@
 <script lang="ts">
 import { defineComponent, reactive, computed } from 'vue';
 import { header } from '@/config';
-import { currentRoute } from '@/sites/assets/util/ref';
+import { currentRoute, themeColor } from '@/sites/assets/util/ref';
 export default defineComponent({
   name: 'doc-header',
   setup() {
     const data = reactive({
       theme: 'black',
-      themeColor: 'black',
-      headerBg: 'url(' + require('../../assets/images/header-bg.png') + ')',
+      // headerBg: 'url(' + require('../../assets/images/header-bg.png') + ')',
       versonList: [
         {
           name: '1.x'
@@ -79,22 +74,26 @@ export default defineComponent({
     });
     const isActive = computed(() => {
       return function(name: string) {
-        // console.log('currentRoute', this.$router.currentRoute.name)
-        console.log('name', name);
+        // console.log('name1', currentRoute.value == name.toLowerCase());
         return currentRoute.value == name.toLowerCase();
       };
     });
-    const checkTheme = (item: any, index: number) => {
+    const themeName = computed(() => {
+      return function() {
+        return `doc-header-${themeColor.value}`;
+      };
+    });
+    const checkTheme = (item: string, index: number) => {
       data.isShowSelect = false;
       data.activeIndex = index;
-      data.verson = verson;
+      data.verson = item;
     };
     return {
       header,
       data,
       isActive,
-      currentRoute,
-      checkTheme
+      checkTheme,
+      themeName
     };
   }
 });
@@ -125,13 +124,13 @@ export default defineComponent({
     width: 240px;
     height: 64px;
     .logo-link {
-      display: flex;
-      align-items: center;
-      height: 64px;
+      display: inline-block;
+      width: 120px;
+      height: 46px;
       vertical-align: middle;
-      img {
-        height: 46px;
-      }
+      position: absolute;
+      top: 50%;
+      margin-top: -23px;
     }
     .logo-border {
       display: inline-block;
@@ -173,11 +172,15 @@ export default defineComponent({
         position: relative;
         margin-right: 30px;
         font-size: 14px;
-        padding: 0 10px;
         height: 63px;
         line-height: 63px;
         text-align: center;
         cursor: pointer;
+        a {
+          display: inline-block;
+          padding: 0 10px;
+          line-height: 64px;
+        }
         // overflow: hidden;
         &.active {
           font-weight: bold;
@@ -254,6 +257,9 @@ export default defineComponent({
     color: $theme-red-word;
     .header {
       &-logo {
+        .logo-link {
+          background: url('../../assets/images/logo-header-white.png') no-repeat center/100%;
+        }
         .logo-border {
           background: $theme-red-border;
         }
@@ -326,6 +332,9 @@ export default defineComponent({
     border-bottom: 1px solid $theme-white-box-border;
     .header {
       &-logo {
+        .logo-link {
+          background: url('../../assets/images/logo-header-red.png') no-repeat center/100%;
+        }
         .logo-border {
           background: $theme-white-border;
         }
@@ -398,6 +407,9 @@ export default defineComponent({
     border-bottom: 1px solid $theme-black-box-border;
     .header {
       &-logo {
+        .logo-link {
+          background: url('../../assets/images/logo-header-red.png') no-repeat center/100%;
+        }
         .logo-border {
           background: $theme-black-border;
         }

src/sites/doc/router.ts

@@ -30,10 +30,9 @@ const routes: Array<RouteRecordRaw> = [
     name: '/',
     component: Index,
     children: pagesRouter
-  },
-  {
+  }, {
     path: '/resource',
-    name: '/resource',
+    name: 'resource',
     component: Resource
   }
 ];

src/sites/doc/views/Resource.vue

@@ -63,8 +63,10 @@
 </template>
 <script lang="ts">
 import { defineComponent, onMounted, reactive } from 'vue';
+import { onBeforeRouteUpdate, RouteLocationNormalized, useRoute } from 'vue-router';
 import Header from '@/sites/doc/components/Header.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
+import { currentRoute } from '@/sites/assets/util/ref';
 import { ArticleApiService } from '@/sites/service/ArticleApiService';
 export default defineComponent({
   name: 'doc',
@@ -95,8 +97,15 @@ export default defineComponent({
       ],
       activeIndex: 0
     });
+    const watchDemoUrl = (router: RouteLocationNormalized) => {
+      currentRoute.value = router.name as string;
+    };
     onMounted(() => {
-      console.log('mounted');
+      // 路由
+      const route = useRoute();
+      watchDemoUrl(route);
+
+      // 文章列表接口
       const articleApiService = new ArticleApiService();
       articleApiService.getArticle().then(res => {
         if (res?.state == 0) {
@@ -104,11 +113,11 @@ export default defineComponent({
         }
       });
     });
-
+    onBeforeRouteUpdate(to => {
+      watchDemoUrl(to);
+    });
     const clickTab = (index: number) => {
-      console.log('22', index);
       data.activeIndex = index;
-      console.log('33', data.activeIndex);
     };
     return {
       data,