perf: ⚡️ 样式优化

17359898647 · Nov 6, 2023 · 2dc84d3 · 2dc84d3
1 parent e3e7cd9
commit 2dc84d3
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 5 deletions.
diff --git a/src/layout/BreadCrumbs/BreadCrumbs.vue b/src/layout/BreadCrumbs/BreadCrumbs.vue
@@ -10,7 +10,7 @@ import { routerHelper } from '@/router/helps/allRouters'
 import { layoutProvide } from '@/store/modules/useLayoutStore'
 
 const { allRouters } = routerHelper()
-const { isHeaderHeight, isContentPadding, isSupported } = inject(layoutProvide)!
+const { isHeaderHeight, isContentPadding, isSupported, isDark } = inject(layoutProvide)!
 const route = useRoute()
 const allBreadcrumb = ref(createBreadcrumb(toValue(allRouters)))
 const breadcrumb = computed(() => {
@@ -26,6 +26,7 @@ useAutoAnimate({
 <template>
   <div
     class="flex flex-nowrap items-center gap-2 overflow-hidden"
+    :class="!isDark ? 'border-b border-[var(--n-border-color)]' : ''"
     :style="{
       height: `${isHeaderHeight}px`,
       padding: `0 ${isContentPadding}px`,

diff --git a/src/layout/MenuView.vue b/src/layout/MenuView.vue
@@ -6,7 +6,7 @@ import { layoutProvide } from '@/store/modules/useLayoutStore'
 import type { _MenuOption } from '@/store/modules/useMenuStore'
 import { useMenuStore } from '@/store/modules/useMenuStore'
 
-const { isCollapsedWidth, isAccordion } = inject(layoutProvide)!
+const { isCollapsedWidth, isAccordion, isInverted, isDark } = inject(layoutProvide)!
 function renderMenuIcon(option: _MenuOption) {
   const { localIcon, lineIcon } = option as _MenuOption
   return (
@@ -48,6 +48,7 @@ const menuOptionsComputed = computed(() => {
     :collapsedWidth="isCollapsedWidth"
     :expandedKeys="openKeys"
     :indent="18"
+    :inverted="isInverted && !isDark"
     :options="menuOptionsComputed"
     :renderIcon="renderMenuIcon"
     :value="selectKey"

diff --git a/src/layout/SiderView.vue b/src/layout/SiderView.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
 import { layoutProvide } from '@/store/modules/useLayoutStore'
 
-const { isCollapsed, setAttrs, isHeaderHeight, isCollapsedWidth, isSiderWidth, isShowTrigger } = inject(layoutProvide)!
+const {
+  isCollapsed,
+  setAttrs,
+  isHeaderHeight,
+  isCollapsedWidth,
+  isSiderWidth,
+  isShowTrigger,
+  isDark,
+  isInverted,
+} = inject(layoutProvide)!
 const time = useDateFormat(
   useNow(),
   computed(() => (isCollapsed.value ? 'HH:mm:ss' : 'YYYY-MM-DD HH:mm:ss')),
@@ -11,13 +20,15 @@ const _setAttrs = (e: boolean) => setAttrs('isCollapsed', e)
 
 <template>
   <NLayoutSider
+    :bordered="!isDark"
     class="relative"
     :collapsed="isCollapsed"
     :collapsedWidth="isCollapsedWidth"
     collapseMode="width"
     :contentStyle="{
       paddingTop: `${isHeaderHeight - 6}px`,
     }"
+    :inverted="isInverted && !isDark"
     :nativeScrollbar="false"
     :showTrigger="isShowTrigger"
     :width="isSiderWidth"

diff --git a/src/layout/TagView/TagsView.vue b/src/layout/TagView/TagsView.vue
@@ -8,7 +8,13 @@ import { useTagStore } from '@/store/modules/useTagStore'
 
 const { isTagViewHeight, isContentPadding } = inject(layoutProvide)!
 const tagStore = useTagStore()
-const { tagList, tagDropdownOptions, contentRef, containerRef, scrollRef } = storeToRefs(tagStore)
+const {
+  tagList,
+  tagDropdownOptions,
+  contentRef,
+  containerRef,
+  scrollRef,
+} = storeToRefs(tagStore)
 const { delTagList: closeTag, tagDropdownClick } = tagStore
 const { isDrag } = useSort(contentRef, tagList, {
   animation: 300,
@@ -28,7 +34,7 @@ function contextmenu(e: MouseEvent, tag: ITag) {
 <template>
   <div
     ref="containerRef"
-    class="demo relative bg-#fafafc text-center dark:bg-#101014"
+    class="relative bg-#fafafc text-center dark:bg-#101014"
     :style="{
       height: `${isTagViewHeight}px`,
       padding: `0 ${isContentPadding}px`,

diff --git a/src/layout/ThemeView/ThemeView.vue b/src/layout/ThemeView/ThemeView.vue
@@ -45,6 +45,7 @@ const setAttrsDeBounce = debounce(setAttrs, 300, {
       @click="setDrawerShow()"
     >
       <SvgIcon
+        class="color-white"
         lineIcon="icon-material-symbols:settings"
         size="26"
         :style="iconRotate"

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -50,6 +50,9 @@ export const router = createRouter({
     ]
   },
   history: createWebHistory(import.meta.env.BASE_URL),
+  scrollBehavior: (...[,,savedPosition]) => {
+    return savedPosition || { top: 0 }
+  },
 })
 export async function installRouter(app: App) {
   app.use(router)