feat:重构模块

src/layout/TabBar.vue

@@ -1,150 +1,150 @@
 <template>
   <div class="tab-bar">
-    <router-link to="/mobile-home" @click="routerClick()" class="item">
+    <router-link to="/home" @click="routerClick()" class="item">
       <i class="fa-solid fa-house"></i>
       <span>主页</span>
     </router-link>
 
-    <router-link v-if="path.includes('bill')" to="/mobile-home/bill/data"
+    <router-link v-if="path.includes('bill')" to="/bill/data"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-calendar-days"></i>
       <span>日常</span>
     </router-link>
-    <router-link v-if="path.includes('bill')" to="/mobile-home/bill/chart"
+    <router-link v-if="path.includes('bill')" to="/bill/chart"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-chart-pie"></i>
       <span>统计</span>
     </router-link>
-    <router-link v-if="path.includes('bill')" to="/mobile-home/bill/setting"
+    <router-link v-if="path.includes('bill')" to="/bill/setting"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-gear"></i>
       <span>设置</span>
     </router-link>
 
-    <router-link v-if="path.includes('food')" to="/mobile-home/food/recipe"
+    <router-link v-if="path.includes('food')" to="/food/recipe"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-utensils"></i>
       <span>菜谱</span>
     </router-link>
-    <router-link v-if="path.includes('food')" to="/mobile-home/food/record"
+    <router-link v-if="path.includes('food')" to="/food/record"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-calendar-days"></i>
       <span>记录</span>
     </router-link>
 
-    <router-link v-if="path.includes('travel')" to="/mobile-home/travel/spot"
+    <router-link v-if="path.includes('travel')" to="/travel/spot"
                  @click="routerClick()" class="item">
       <i class="iconfont icon-jingdian"></i>
       <span>景点</span>
     </router-link>
-    <router-link v-if="path.includes('travel')" to="/mobile-home/travel/record"
+    <router-link v-if="path.includes('travel')" to="/travel/record"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-calendar-days"></i>
       <span>记录</span>
     </router-link>
 
-    <router-link v-if="path.includes('plan')" to="/mobile-home/plan/calendar"
+    <router-link v-if="path.includes('plan')" to="/plan/calendar"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-calendar-days"></i>
       <span>日程</span>
     </router-link>
-    <router-link v-if="path.includes('plan')" to="/mobile-home/plan/list"
+    <router-link v-if="path.includes('plan')" to="/plan/list"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-list"></i>
       <span>清单</span>
     </router-link>
 
-    <router-link v-if="path.includes('anniversary')" to="/mobile-home/anniversary/list"
+    <router-link v-if="path.includes('anniversary')" to="/anniversary/list"
                  @click="routerClick()" class="item">
       <i class="fa-regular fa-calendar-check"></i>
       <span>纪念日</span>
     </router-link>
-    <router-link v-if="path.includes('anniversary')" to="/mobile-home/anniversary/category"
+    <router-link v-if="path.includes('anniversary')" to="/anniversary/category"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-table-cells"></i>
       <span>分类</span>
     </router-link>
 
-    <router-link v-if="path.includes('period')" to="/mobile-home/period/calendar"
+    <router-link v-if="path.includes('period')" to="/period/calendar"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-calendar-days"></i>
       <span>记录</span>
     </router-link>
-    <router-link v-if="path.includes('period')" to="/mobile-home/period/setting"
+    <router-link v-if="path.includes('period')" to="/period/setting"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-gear"></i>
       <span>设置</span>
     </router-link>
 
-    <router-link v-if="path.includes('product')" to="/mobile-home/product/list"
+    <router-link v-if="path.includes('product')" to="/product/list"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-list-ul"></i>
       <span>清单</span>
     </router-link>
 
-    <router-link v-if="path.includes('journal')" to="/mobile-home/journal/record"
+    <router-link v-if="path.includes('journal')" to="/journal/record"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-calendar-days"></i>
       <span>记录</span>
     </router-link>
-    <router-link v-if="path.includes('journal')" to="/mobile-home/journal/timeline"
+    <router-link v-if="path.includes('journal')" to="/journal/timeline"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-timeline"></i>
       <span>时间轴</span>
     </router-link>
 
-    <router-link v-if="path.includes('kpi')" to="/mobile-home/kpi/record"
+    <router-link v-if="path.includes('kpi')" to="/kpi/record"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-calendar-days"></i>
       <span>记录</span>
     </router-link>
 
-    <router-link v-if="path.includes('asset')" to="/mobile-home/asset/list"
+    <router-link v-if="path.includes('asset')" to="/asset/list"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-list-ul"></i>
       <span>清单</span>
     </router-link>
 
-    <router-link v-if="path.includes('ledger')" to="/mobile-home/ledger/list"
+    <router-link v-if="path.includes('ledger')" to="/ledger/list"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-list-ul"></i>
       <span>清单</span>
     </router-link>
 
-    <router-link v-if="path.includes('password')" to="/mobile-home/password/list"
+    <router-link v-if="path.includes('password')" to="/password/list"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-list-ul"></i>
       <span>清单</span>
     </router-link>
 
-    <router-link v-if="path.includes('server')" to="/mobile-home/server/monitor"
+    <router-link v-if="path.includes('server')" to="/server/monitor"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-desktop"></i>
       <span>监控</span>
     </router-link>
-    <router-link v-if="path.includes('server')" to="/mobile-home/server/file"
+    <router-link v-if="path.includes('server')" to="/server/file"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-folder"></i>
       <span>文件</span>
     </router-link>
 
-    <router-link v-if="path.includes('blog')" to="/mobile-home/blog/overview"
+    <router-link v-if="path.includes('blog')" to="/blog/overview"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-book-open"></i>
       <span>列表</span>
     </router-link>
-    <router-link v-if="path.includes('blog')" to="/mobile-home/blog/category"
+    <router-link v-if="path.includes('blog')" to="/blog/category"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-table-cells"></i>
       <span>分类</span>
     </router-link>
-    <router-link v-if="path.includes('blog')" to="/mobile-home/blog/archive"
+    <router-link v-if="path.includes('blog')" to="/blog/archive"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-box-archive"></i>
       <span>归档</span>
     </router-link>
 
-    <router-link to="/mobile-home/profile/index"
+    <router-link to="/profile/index"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-user"></i>
       <span>我的</span>

src/layout/TitleBar.vue

@@ -31,7 +31,7 @@
 
 <script lang="ts" setup>
 import { SvgIcon } from 'vue3-common'
-import MobileSetting from '@/components/Mobile/MobileSetting.vue'
+import MobileSetting from '@/components/Common/MobileSetting.vue'
 import { Back } from '@element-plus/icons-vue'
 import { Setting } from '@element-plus/icons-vue'
 import { useRouter } from 'vue-router'

src/layout/admin/components/NavBar/index.vue

@@ -1,95 +0,0 @@
-<template>
-  <section class="layout-navbar">
-    <div class="left-container">
-      <!-- 控制菜单栏的显示 -->
-      <hamburger
-          id="hamburger-container"
-          :is-active="sidebar.opened"
-          class="hamburger-container"
-          @toggleClick="toggleSideBar" />
-    </div>
-
-    <h3 class="title">Sweet Hut</h3>
-
-    <!-- 右上角菜单栏 -->
-    <div class="right-container">
-      <!--      <div class="note-wrapper">-->
-      <!--        <el-tooltip effect="dark" content="警告信息" placement="bottom">-->
-      <!--          <el-badge is-dot class="item">-->
-      <!--            <svg-icon icon-class="danger" />-->
-      <!--          </el-badge>-->
-      <!--        </el-tooltip>-->
-
-      <!--        <el-tooltip effect="dark" content="待办事项" placement="bottom">-->
-      <!--          <el-badge is-dot class="item">-->
-      <!--            <svg-icon icon-class="todo" @click="viewTodoList"/>-->
-      <!--          </el-badge>-->
-      <!--        </el-tooltip>-->
-      <!--      </div>-->
-
-      <!-- 下拉框组件 -->
-      <el-dropdown>
-        <div class="avatar-wrapper">
-          <svg-icon name="admin-user" class="user-avatar" style="color: #0d9488;"/>
-          <span class="username">管理员</span>
-          <el-icon><caret-bottom /></el-icon>
-        </div>
-
-        <!-- 下拉框菜单 -->
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item @click="updatePasswordClick">
-              <span style="display:block;">修改密码</span>
-            </el-dropdown-item>
-
-            <el-dropdown-item @click="logoutClick">
-              <span style="display:block;">退出登录</span>
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { Hamburger, SvgIcon } from 'vue3-common'
-import 'vue3-common/styles/Hamburger.css'
-import { CaretBottom } from '@element-plus/icons-vue'
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { useAppStore } from '@/store/app'
-
-const router = useRouter()
-const appStore = useAppStore()
-
-const sidebar = computed(() => appStore.sidebar)
-
-/**
- * 侧边栏控制
- */
-const toggleSideBar = () => {
-  appStore.toggleSideBar()
-}
-
-const viewTodoList = () => {
-  console.log('待办事项')
-}
-
-/**
- * 修改密码
- */
-const updatePasswordClick = () => {
-  router.push('/profile')
-}
-
-/**
- * 退出登录
- */
-const logoutClick = () => {
-  // userStore.removeAll()
-  router.push('/login')
-  // 刷新页面 否则会出现切换用户 丢失动态路由的现象
-  // location.reload()
-}
-</script>

src/layout/admin/components/SideBar/Logo.vue

@@ -1,39 +0,0 @@
-<template>
-  <div :class="{'collapse':collapse}">
-    <!-- 跳转到首页 -->
-    <transition name="sidebarLogoFade">
-      <!-- 根据collapse控制Logo组件，即是否显示标题 -->
-      <router-link v-if="collapse" key="collapse" class="logo" to="/admin/dashboard">
-        <!--        <img :src="logoInfo.logo" alt="logo">-->
-      </router-link>
-      <router-link v-else key="expand" class="logo" to="/admin/dashboard">
-        <img :src="getAssetsImageFile('logo/logo.png')"
-             alt="logo">
-      </router-link>
-    </transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { defineProps } from 'vue'
-import { getAssetsImageFile } from '@/utils'
-
-defineProps({
-  collapse: {
-    type: Boolean,
-    require: true
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-// 动画样式
-.sidebarLogoFade-enter-active {
-  transition: opacity 1.5s;
-}
-
-.sidebarLogoFade-enter,
-.sidebarLogoFade-leave-to {
-  opacity: 0;
-}
-</style>

src/layout/admin/components/SideBar/index.vue

@@ -1,23 +0,0 @@
-<template>
-  <aside class="layout-sidebar">
-    <logo :collapse="isCollapse" class="layout-logo"/>
-
-    <menu-list :route="useRoute()"
-               :routers="adminRoutes"
-               :collapse="isCollapse"
-               class="layout-menu"/>
-  </aside>
-</template>
-
-<script lang="ts" setup>
-import Logo from './Logo.vue'
-import { MenuList } from 'vue3-common'
-import adminRoutes from '@/router/admin'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import { useAppStore } from '@/store/app'
-
-const appStore = useAppStore()
-const isCollapse = computed(() => !appStore.sidebar.opened)
-</script>
-

src/layout/admin/index.vue

@@ -1,37 +0,0 @@
-<template>
-  <section :class="classObj" class="layout-admin">
-    <side-bar/>
-
-    <section class="layout-main">
-      <nav-bar/>
-
-      <section class="app-main">
-        <router-view />
-      </section>
-    </section>
-  </section>
-</template>
-
-<script setup lang="ts">
-import SideBar from './components/SideBar/index.vue'
-import NavBar from './components/NavBar/index.vue'
-
-import { computed } from 'vue'
-import { useAppStore } from '@/store/app'
-
-const app = useAppStore()
-
-const classObj = computed(() => {
-  // 控制侧边栏的显示状态
-  return {
-    hideSidebar: !app.sidebar.opened,
-    openSidebar: app.sidebar.opened,
-    withoutAnimation: app.sidebar.withoutAnimation,
-    mobile: app.device === 'mobile'
-  }
-})
-</script>
-
-<style lang="scss">
-@use '@/styles/admin.layout.module.scss';
-</style>

src/layout/home/components/HomeTitle.vue

@@ -1,10 +0,0 @@
-<template>
-  <div class="title-container">
-    <span class="title">{{ appStore.homeTitle }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useAppStore } from '@/store/app.ts'
-const appStore = useAppStore()
-</script>

src/layout/home/components/Navbar/HomeMenu.vue

@@ -1,9 +0,0 @@
-<template>
-  <menu-list :route="useRoute()" :routers="homeRoutes" :mode="'horizontal'" class="layout-menu"/>
-</template>
-
-<script setup lang="ts">
-import { useRoute } from 'vue-router'
-import { MenuList } from 'vue3-common'
-import homeRoutes from '@/router/home'
-</script>

src/layout/home/components/Navbar/index.vue

@@ -1,43 +0,0 @@
-<template>
-  <aside class="layout-navbar">
-    <div class="title-container">
-
-    </div>
-
-    <home-menu />
-
-    <div class="right-container">
-      <home-query />
-
-      <el-dropdown placement="bottom">
-        <el-avatar :src="getAssetsImageFile('avatar.jpg')" ></el-avatar>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item @click="profileClick">个人中心</el-dropdown-item>
-            <el-dropdown-item @click="logoutClick">退出登录</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </div>
-  </aside>
-</template>
-
-<script setup lang="ts">
-import HomeMenu from '@/layout/home/components/Navbar/HomeMenu.vue'
-import HomeQuery from '@/components/Home/HomeQuery.vue'
-import { getAssetsImageFile } from '@/utils'
-import { useRouter } from 'vue-router'
-import { commonElMessageBox } from 'vue3-common/utils/elUtil'
-
-const router = useRouter()
-
-const profileClick = () => {
-  router.push('/home/profile')
-}
-
-const logoutClick = () => {
-  commonElMessageBox('请确认是否退出登录？').then(() => {
-    router.push('/')
-  })
-}
-</script>

src/layout/home/index.vue

@@ -1,17 +0,0 @@
-<template>
-  <section class="layout-home">
-    <navbar/>
-
-    <section class="layout-main">
-      <router-view />
-    </section>
-  </section>
-</template>
-
-<script lang="ts" setup>
-import Navbar from '@/layout/home/components/Navbar/index.vue'
-</script>
-
-<style lang="scss">
-@use "@/styles/home.layout.module.scss";
-</style>

src/layout/index.vue

@@ -9,10 +9,10 @@
 </template>
 
 <script lang="ts" setup>
-import TitleBar from '@/layout/mobile-home/TitleBar.vue'
-import TabBar from '@/layout/mobile-home/TabBar.vue'
+import TitleBar from '@/layout/TitleBar.vue'
+import TabBar from '@/layout/TabBar.vue'
 </script>
 
 <style lang="scss">
-@use "@/styles/mobile.home.layout.module.scss";
+@use "@/styles/mobile.home.layout.module";
 </style>