@varlet/cli 2.17.1 → 2.18.0-alpha.1697511280107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "2.17.1",
+  "version": "2.18.0-alpha.1697511280107",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -64,8 +64,8 @@
     "vite": "4.3.5",
     "vue": "3.3.4",
     "webfont": "^9.0.0",
-    "@varlet/shared": "2.17.1",
-    "@varlet/vite-plugins": "2.17.1"
+    "@varlet/shared": "2.18.0-alpha.1697511280107",
+    "@varlet/vite-plugins": "2.18.0-alpha.1697511280107"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.1",
@@ -80,9 +80,9 @@
     "@types/semver": "^7.3.9",
     "@types/sharp": "0.31.1",
     "rimraf": "^5.0.1",
-    "@varlet/ui": "2.17.1",
-    "@varlet/icons": "2.17.1",
-    "@varlet/touch-emulator": "2.17.1"
+    "@varlet/icons": "2.18.0-alpha.1697511280107",
+    "@varlet/ui": "2.18.0-alpha.1697511280107",
+    "@varlet/touch-emulator": "2.18.0-alpha.1697511280107"
   },
   "peerDependencies": {
     "@vue/runtime-core": "3.3.4",
@@ -95,9 +95,9 @@
     "lodash-es": "^4.17.21",
     "vue": "3.3.4",
     "vue-router": "4.2.0",
-    "@varlet/ui": "2.17.1",
-    "@varlet/icons": "2.17.1",
-    "@varlet/touch-emulator": "2.17.1"
+    "@varlet/icons": "2.18.0-alpha.1697511280107",
+    "@varlet/ui": "2.18.0-alpha.1697511280107",
+    "@varlet/touch-emulator": "2.18.0-alpha.1697511280107"
   },
   "scripts": {
     "dev": "tsc --watch",

package/site/pc/components/AppSidebar.vue

@@ -1,72 +1,57 @@
 <template>
   <div class="varlet-site-sidebar var-elevation--3">
-    <var-cell
-      class="varlet-site-sidebar__item"
-      :id="item.doc"
-      :class="{
-        'varlet-site-sidebar__item--active': item.doc === menuName,
-        'varlet-site-sidebar__link': item.type !== menuTypes.TITLE,
-        'varlet-site-sidebar__title': item.type === menuTypes.TITLE,
-      }"
-      :key="index"
+    <a
+      class="varlet-site-sidebar__link"
       v-for="(item, index) in menu"
-      v-ripple="{
-        disabled: item.type === menuTypes.TITLE,
-      }"
-      @click="changeRoute(item)"
+      :key="index"
+      :href="`#/${language}/${item.doc}`"
+      @click.prevent
     >
-      <span class="varlet-site-sidebar__indicator"></span>
-      <span class="varlet-site-sidebar__item--title" v-if="item.type === menuTypes.TITLE">{{ item.text[language]
+      <var-cell
+        class="varlet-site-sidebar__item"
+        :id="item.doc"
+        :class="{
+          'varlet-site-sidebar__item--active': item.doc === menuName,
+          'varlet-site-sidebar__cell': item.type !== menuTypes.TITLE,
+          'varlet-site-sidebar__title': item.type === menuTypes.TITLE,
+        }"
+        v-ripple="{
+          disabled: item.type === menuTypes.TITLE,
+        }"
+        @click="changeRoute(item)"
+      >
+        <span class="varlet-site-sidebar__indicator"></span>
+        <span class="varlet-site-sidebar__item--title" v-if="item.type === menuTypes.TITLE">{{
+          item.text[language]
         }}</span>
-      <span v-else>{{ item.text[language] }}</span>
-    </var-cell>
+        <span v-else>{{ item.text[language] }}</span>
+      </var-cell>
+    </a>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { MenuTypes, type Menu } from '../../utils'
-import { reactive, defineComponent } from 'vue'
-import type { PropType } from 'vue'
-
-export default defineComponent({
-  name: 'AppSidebar',
-  props: {
-    menu: {
-      type: Array as PropType<Menu[]>
-    },
-    menuName: {
-      type: String
-    },
-    language: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['change'],
-  setup(props, { emit }) {
-    const menuTypes = reactive(MenuTypes)
-
-    const changeRoute = (item: Menu) => {
-      if (item.type === MenuTypes.TITLE || props.menuName === item.doc) {
-        return
-      }
+import { reactive } from 'vue'
 
-      emit('change', item)
-    }
+const props = defineProps<{ menu: Menu[]; menuName: string; language: string }>()
+const emit = defineEmits(['change'])
+const menuTypes = reactive(MenuTypes)
 
-    return {
-      menuTypes,
-      changeRoute
-    }
+const changeRoute = (item: Menu) => {
+  if (item.type === MenuTypes.TITLE || props.menuName === item.doc) {
+    return
   }
-})
+
+  emit('change', item)
+}
 </script>
 
 <style lang="less">
 @keyframes indicator-fade-in {
   from {
     transform: scaleY(0);
-    opacity: .3;
+    opacity: 0.3;
   }
 
   to {
@@ -91,6 +76,13 @@ export default defineComponent({
     display: none;
   }
 
+  &__link {
+    display: block;
+    color: initial;
+    text-decoration: none;
+    outline: none;
+  }
+
   &__item {
     margin: 0 !important;
     user-select: none !important;
@@ -120,12 +112,12 @@ export default defineComponent({
         height: 40px;
         position: absolute;
         left: 0;
-        animation: indicator-fade-in .25s;
+        animation: indicator-fade-in 0.25s;
       }
     }
   }
 
-  &__link {
+  &__cell {
     cursor: pointer !important;
     font-size: 14px !important;
     color: var(--site-config-color-text) !important;