refactor: refactor

src/components/common/AppProvider.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-config-provider wh-full :theme-overrides="themStore.naiveThemeOverrides">
+  <n-config-provider wh-full :theme-overrides="naiveThemeOverrides">
     <n-loading-bar-provider>
       <n-dialog-provider>
         <n-notification-provider>
@@ -16,24 +16,18 @@
 <script setup>
 import { defineComponent, h } from 'vue'
 import { useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui'
-
 import { useCssVar } from '@vueuse/core'
-import { useThemeStore } from '@/store/modules/theme'
+import { kebabCase } from 'lodash-es'
 import { setupMessage, setupDialog } from '@/utils/common/naiveTools'
+import { naiveThemeOverrides } from '~/settings'
 
-const themStore = useThemeStore()
-watch(
-  () => themStore.naiveThemeOverrides.common,
-  (vars) => {
-    for (const key in vars) {
-      useCssVar(`--${key}`, document.documentElement).value = vars[key]
-      if (key === 'primaryColor') {
-        window.localStorage.setItem('__THEME_COLOR__', vars[key])
-      }
-    }
-  },
-  { immediate: true }
-)
+function setupCssVar() {
+  const common = naiveThemeOverrides.common
+  for (const key in common) {
+    useCssVar(`--${kebabCase(key)}`, document.documentElement).value = common[key] || ''
+    if (key === 'primaryColor') window.localStorage.setItem('__THEME_COLOR__', common[key] || '')
+  }
+}
 
 // 挂载naive组件的方法至window, 以便在全局使用
 function setupNaiveTools() {
@@ -46,6 +40,7 @@ function setupNaiveTools() {
 
 const NaiveProviderContent = defineComponent({
   setup() {
+    setupCssVar()
     setupNaiveTools()
   },
   render() {

src/layout/components/sidebar/components/SideLogo.vue

@@ -9,7 +9,7 @@
 
 <script setup>
 import { useAppStore } from '@/store/modules/app'
-const title = import.meta.env.VITE_APP_TITLE
+const title = import.meta.env.VITE_TITLE
 
 const appStore = useAppStore()
 </script>

src/layout/components/tags/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <ScrollX :class="`h-${useTheme.tags.height}`">
+  <ScrollX>
     <n-tag
       v-for="tag in tagsStore.tags"
       :key="tag.path"
-      class="px-15 mx-5 cursor-pointer hover:color-primary"
+      class="px-15 mx-5 rounded-4 cursor-pointer hover:color-primary"
       :type="tagsStore.activeTag === tag.path ? 'primary' : 'default'"
       :closable="tagsStore.tags.length > 1"
       @click="handleTagClick(tag.path)"
@@ -12,27 +12,24 @@
     >
       {{ tag.title }}
     </n-tag>
+    <ContextMenu
+      v-if="contextMenuOption.show"
+      v-model:show="contextMenuOption.show"
+      :current-path="contextMenuOption.currentPath"
+      :x="contextMenuOption.x"
+      :y="contextMenuOption.y"
+    />
   </ScrollX>
-
-  <ContextMenu
-    v-if="contextMenuOption.show"
-    v-model:show="contextMenuOption.show"
-    :current-path="contextMenuOption.currentPath"
-    :x="contextMenuOption.x"
-    :y="contextMenuOption.y"
-  />
 </template>
 
 <script setup name="Tags">
 import ContextMenu from './ContextMenu.vue'
 import { useTagsStore } from '@/store/modules/tags'
-import { useThemeStore } from '@/store/modules/theme'
 import ScrollX from '@/components/common/ScrollX.vue'
 
 const route = useRoute()
 const router = useRouter()
 const tagsStore = useTagsStore()
-const useTheme = useThemeStore()
 
 const contextMenuOption = reactive({
   show: false,
@@ -76,17 +73,14 @@ async function handleContextMenu(e, tagItem) {
 }
 </script>
 
-<style lang="scss">
+<style>
 .n-tag__close {
-  margin-left: 5px;
   box-sizing: content-box;
+  border-radius: 50%;
   font-size: 12px;
   padding: 2px;
-  border-radius: 50%;
-  transition: all 0.7s;
-  &:hover {
-    color: #fff;
-    background-color: var(--primaryColor);
-  }
+  transform: scale(0.9);
+  transform: translateX(5px);
+  transition: all 0.3s;
 }
 </style>

src/layout/index.vue

@@ -11,16 +11,16 @@
       <SideBar />
     </n-layout-sider>
     <n-layout>
-      <n-layout-header bg-white border-b bc-eee :style="`height: ${useTheme.header.height ?? 60}px`">
+      <n-layout-header bg-white border-b bc-eee :style="`height: ${header.height ?? 60}px`">
         <AppHeader />
       </n-layout-header>
 
-      <n-layout bg="#f5f6fb" :style="`height: calc(100% - ${useTheme.header.height ?? 60}px)`">
-        <AppTags v-if="useTheme.tags.visible" />
+      <n-layout bg="#f5f6fb" :style="`height: calc(100% - ${header.height ?? 60}px)`">
+        <AppTags v-if="tags.visible" :style="`height: ${tags.height ?? 50}px`" />
         <AppMain
           class="cus-scroll border-t bc-eee"
           :style="{
-            height: `calc(100% - ${useTheme.tags.visible ? useTheme.tags.height ?? 50 : 0}px)`,
+            height: `calc(100% - ${tags.visible ? tags.height ?? 50 : 0}px)`,
             overflow: 'auto',
           }"
         />
@@ -34,9 +34,8 @@ import AppHeader from './components/header/index.vue'
 import SideBar from './components/sidebar/index.vue'
 import AppMain from './components/AppMain.vue'
 import AppTags from './components/tags/index.vue'
-import { useThemeStore } from '@/store/modules/theme'
 import { useAppStore } from '@/store/modules/app'
+import { header, tags } from '~/settings'
 
-const useTheme = useThemeStore()
 const appStore = useAppStore()
 </script>

src/main.js

@@ -1,5 +1,4 @@
 import '@/styles/reset.css'
-import '@/styles/variables.css'
 import '@/styles/index.scss'
 import 'uno.css'
 import 'virtual:svg-icons-register'

src/router/guard/page-title-guard.js

@@ -1,4 +1,4 @@
-const baseTitle = import.meta.env.VITE_APP_TITLE
+const baseTitle = import.meta.env.VITE_TITLE
 
 export function createPageTitleGuard(router) {
   router.afterEach((to) => {

src/router/index.js

@@ -2,7 +2,7 @@ import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router
 import { setupRouterGuard } from './guard'
 import { basicRoutes } from './routes'
 
-const isHash = import.meta.env.VITE_APP_USE_HASH === 'true'
+const isHash = import.meta.env.VITE_USE_HASH === 'true'
 export const router = createRouter({
   history: isHash ? createWebHashHistory('/') : createWebHistory('/'),
   routes: [],

src/settings/index.js

@@ -1 +0,0 @@
-export { default as themeSettings } from './theme.json'

src/settings/theme.json

@@ -1,17 +0,0 @@
-{
-  "tags": {
-    "visible": true,
-    "height": 50
-  },
-  "header": {
-    "height": 60
-  },
-  "naiveThemeOverrides": {
-    "common": {
-      "primaryColor": "#316C72FF",
-      "primaryColorHover": "#316C72E3",
-      "primaryColorPressed": "#2B4C59FF",
-      "primaryColorSuppl": "#316C7263"
-    }
-  }
-}

src/store/modules/theme.js

@@ -1,23 +0,0 @@
-import { defineStore } from 'pinia'
-import { themeSettings } from '@/settings'
-export const useThemeStore = defineStore('theme', {
-  state() {
-    return {
-      tags: themeSettings.tag || { visible: true, height: 50 },
-      header: themeSettings.header || { height: 60 },
-      naiveThemeOverrides: themeSettings.naiveThemeOverrides || {
-        common: {
-          primaryColor: '#316C72FF',
-          primaryColorHover: '#316C72E3',
-          primaryColorPressed: '#2B4C59FF',
-          primaryColorSuppl: '#316C7263',
-        },
-      },
-    }
-  },
-  actions: {
-    setTabVisible(visible) {
-      this.tags.visible = visible
-    },
-  },
-})

src/styles/variables.css

@@ -1,3 +0,0 @@
-:root {
-  --primaryColor: #316c72;
-}

src/utils/http/index.js

@@ -3,7 +3,6 @@ import { repReject, repResolve, reqReject, reqResolve } from './interceptors'
 
 export function createAxios(options = {}) {
   const defaultOptions = {
-    baseURL: import.meta.env.VITE_APP_BASE_API,
     timeout: 12000,
   }
   const service = axios.create({
@@ -15,10 +14,6 @@ export function createAxios(options = {}) {
   return service
 }
 
-export const defAxios = createAxios()
-
-export default createAxios()
-
-export const testAxios = createAxios({
-  baseURL: import.meta.env.VITE_APP_BASE_API_TEST,
+export default createAxios({
+  baseURL: import.meta.env.VITE_BASE_API,
 })

src/views/login/index.vue

@@ -50,7 +50,7 @@ import { useStorage } from '@vueuse/core'
 import bgImg from '@/assets/images/login_bg.webp'
 import api from './api'
 
-const title = import.meta.env.VITE_APP_TITLE
+const title = import.meta.env.VITE_TITLE
 
 const router = useRouter()
 const { query } = useRoute()