refactor: 压缩和重命名目录结构

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img alt="V3 Admin Vite Logo" width="120" height="120" src="./src/assets/layouts/logo.png">
+  <img alt="V3 Admin Vite Logo" width="120" height="120" src="./src/assets/images/layouts/logo.png">
   <h1>V3 Admin Vite</h1>
   <span>English | <a href="./README.zh-CN.md">中文</a></span>
 </div>
@@ -128,9 +128,9 @@ pnpm test
 
 ## Project preview
 
-![preview1.png](./src/assets/docs/preview1.png)
+![preview1.png](./src/assets/images/docs/preview1.png)
-![preview2.png](./src/assets/docs/preview2.png)
+![preview2.png](./src/assets/images/docs/preview2.png)
-![preview3.png](./src/assets/docs/preview3.png)
+![preview3.png](./src/assets/images/docs/preview3.png)
 
 ## 💕 Contributors
 

README.zh-CN.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img alt="V3 Admin Vite Logo" width="120" height="120" src="./src/assets/layouts/logo.png">
+  <img alt="V3 Admin Vite Logo" width="120" height="120" src="./src/assets/images/layouts/logo.png">
   <h1>V3 Admin Vite</h1>
   <span><a href="./README.md">English</a> | 中文</span>
 </div>
@@ -125,9 +125,9 @@ pnpm test
 
 ## 项目预览图
 
-![preview1.png](./src/assets/docs/preview1.png)
+![preview1.png](./src/assets/images/docs/preview1.png)
-![preview2.png](./src/assets/docs/preview2.png)
+![preview2.png](./src/assets/images/docs/preview2.png)
-![preview3.png](./src/assets/docs/preview3.png)
+![preview3.png](./src/assets/images/docs/preview3.png)
 
 ## 💕 贡献者
 

src/components/SearchMenu/SearchResult.vue

@@ -85,7 +85,7 @@ defineExpose({ getScrollTop })
 </template>
 
 <style lang="scss" scoped>
-@import "@/styles/mixins.scss";
+@import "@/assets/styles/mixins.scss";
 
 .result-item {
   display: flex;

src/http/login/index.ts

@@ -1,5 +1,5 @@
 import type * as Login from "./types/login"
-import { request } from "@/utils/service"
+import { request } from "@/http/request"
 
 /** 获取登录验证码 */
 export function getLoginCodeApi() {

src/http/request.ts

@@ -3,7 +3,7 @@ import { useUserStore } from "@/pinia/stores/user"
 import axios from "axios"
 import { ElMessage } from "element-plus"
 import { get, merge } from "lodash-es"
-import { getToken } from "./cache/cookies"
+import { getToken } from "../utils/cache/cookies"
 
 /** 退出登录并强制刷新页面（会重定向到登录页） */
 function logout() {
@@ -12,17 +12,18 @@ function logout() {
 }
 
 /** 创建请求实例 */
-function createService() {
+function createInstance() {
-  // 创建一个 axios 实例命名为 service
+  // 创建一个 axios 实例命名为 instance
-  const service = axios.create()
+  const instance = axios.create()
-  // 请求拦截
+  // 请求拦截器
-  service.interceptors.request.use(
+  instance.interceptors.request.use(
+    // 发送之前
     config => config,
     // 发送失败
     error => Promise.reject(error)
   )
-  // 响应拦截（可根据具体业务作出相应的调整）
+  // 响应拦截器（可根据具体业务作出相应的调整）
-  service.interceptors.response.use(
+  instance.interceptors.response.use(
     (response) => {
       // apiData 是 api 返回的数据
       const apiData = response.data
@@ -94,30 +95,38 @@ function createService() {
       return Promise.reject(error)
     }
   )
-  return service
+  return instance
 }
 
 /** 创建请求方法 */
-function createRequest(service: AxiosInstance) {
+function createRequest(instance: AxiosInstance) {
-  return function <T>(config: AxiosRequestConfig): Promise<T> {
+  return <T>(config: AxiosRequestConfig): Promise<T> => {
     const token = getToken()
-    const defaultConfig = {
+    // 默认配置
+    const defaultConfig: AxiosRequestConfig = {
+      // 接口地址
+      baseURL: import.meta.env.VITE_BASE_URL,
+      // 请求头
       headers: {
         // 携带 Token
         "Authorization": token ? `Bearer ${token}` : undefined,
         "Content-Type": "application/json"
       },
+      // 请求体
+      data: {},
+      // 请求超时
       timeout: 5000,
-      baseURL: import.meta.env.VITE_BASE_URL,
+      // 跨域请求时是否携带 Cookies
-      data: {}
+      withCredentials: false
     }
     // 将默认配置 defaultConfig 和传入的自定义配置 config 进行合并成为 mergeConfig
     const mergeConfig = merge(defaultConfig, config)
-    return service(mergeConfig)
+    return instance(mergeConfig)
   }
 }
 
-/** 用于网络请求的实例 */
+/** 用于请求的实例 */
-const service = createService()
+const instance = createInstance()
-/** 用于网络请求的方法 */
+
-export const request = createRequest(service)
+/** 用于请求的方法 */
+export const request = createRequest(instance)

src/http/table/index.ts

@@ -1,5 +1,5 @@
 import type * as Table from "./types/table"
-import { request } from "@/utils/service"
+import { request } from "@/http/request"
 
 /** 增 */
 export function createTableDataApi(data: Table.CreateOrUpdateTableRequestData) {

src/layouts/LeftMode.vue

@@ -50,7 +50,7 @@ function handleClickOutside() {
 </template>
 
 <style lang="scss" scoped>
-@import "@/styles/mixins.scss";
+@import "@/assets/styles/mixins.scss";
 $transition-time: 0.35s;
 
 .app-wrapper {

src/layouts/LeftTopMode.vue

@@ -38,7 +38,7 @@ const layoutClasses = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-@import "@/styles/mixins.scss";
+@import "@/assets/styles/mixins.scss";
 $transition-time: 0.35s;
 
 .app-wrapper {

src/layouts/TopMode.vue

@@ -26,7 +26,7 @@ const { showTagsView, showLogo } = storeToRefs(settingsStore)
 </template>
 
 <style lang="scss" scoped>
-@import "@/styles/mixins.scss";
+@import "@/assets/styles/mixins.scss";
 $transition-time: 0.35s;
 
 .app-wrapper {

src/layouts/components/AppMain.vue

@@ -29,7 +29,7 @@ const settingsStore = useSettingsStore()
 </template>
 
 <style lang="scss" scoped>
-@import "@/styles/mixins.scss";
+@import "@/assets/styles/mixins.scss";
 
 .app-main {
   width: 100%;

src/layouts/components/Logo/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import logo from "@/assets/layouts/logo.png?url"
+import logo from "@/assets/images/layouts/logo.png?url"
-import logoText1 from "@/assets/layouts/logo-text-1.png?url"
+import logoText1 from "@/assets/images/layouts/logo-text-1.png?url"
-import logoText2 from "@/assets/layouts/logo-text-2.png?url"
+import logoText2 from "@/assets/images/layouts/logo-text-2.png?url"
 import { useLayoutMode } from "@/composables/useLayoutMode"
 
 interface Props {

src/layouts/components/Settings/index.vue

@@ -71,7 +71,7 @@ function resetConfigLayout() {
 </template>
 
 <style lang="scss" scoped>
-@import "@/styles/mixins.scss";
+@import "@/assets/styles/mixins.scss";
 
 .setting-container {
   padding: 20px;

src/layouts/components/Sidebar/SidebarItem.vue

@@ -83,7 +83,7 @@ function resolvePath(routePath: string) {
 </template>
 
 <style lang="scss" scoped>
-@import "@/styles/mixins.scss";
+@import "@/assets/styles/mixins.scss";
 
 .svg-icon {
   min-width: 1em;

src/main.ts

@@ -1,12 +1,12 @@
 // core
 import App from "@/App.vue"
-import { loadDirectives } from "@/directives"
 import { pinia } from "@/pinia"
 import { router } from "@/router"
 import { createApp } from "vue"
 import "@/router/permission"
 // load
-import { loadSvg } from "@/icons"
+import { loadSvg } from "@/assets/icons"
+import { loadDirectives } from "@/directives"
 import { loadPlugins } from "@/plugins"
 // css
 import "uno.css"
@@ -15,7 +15,7 @@ import "element-plus/dist/index.css"
 import "element-plus/theme-chalk/dark/css-vars.css"
 import "vxe-table/lib/style.css"
 import "vxe-table-plugin-element/dist/style.css"
-import "@/styles/index.scss"
+import "@/assets/styles/index.scss"
 
 const app = createApp(App)
 
@@ -27,6 +27,7 @@ loadSvg(app)
 loadDirectives(app)
 
 app.use(pinia).use(router)
+
 router.isReady().then(() => {
   app.mount("#app")
 })

src/pages/composable-demo/use-fetch-select.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { getSelectDataApi } from "@/api/composable-demo/use-fetch-select"
 import { useFetchSelect } from "@/composables/useFetchSelect"
+import { getSelectDataApi } from "@/http/composable-demo/use-fetch-select"
 
 const { loading, options, value } = useFetchSelect({
   api: getSelectDataApi

src/pages/composable-demo/use-fullscreen-loading.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { getErrorApi, getSuccessApi } from "@/api/composable-demo/use-fullscreen-loading"
 import { useFullscreenLoading } from "@/composables/useFullscreenLoading"
+import { getErrorApi, getSuccessApi } from "@/http/composable-demo/use-fullscreen-loading"
 import { ElMessage } from "element-plus"
 
 const svg = `

src/pages/error-page/403.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Svg403 from "@/assets/error-page/403.svg?component" // vite-svg-loader 插件的功能
+import Svg403 from "@/assets/images/error-page/403.svg?component" // vite-svg-loader 插件的功能
 import ErrorPageLayout from "./components/ErrorPageLayout.vue"
 </script>
 

src/pages/error-page/404.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Svg404 from "@/assets/error-page/404.svg?component" // vite-svg-loader 插件的功能
+import Svg404 from "@/assets/images/error-page/404.svg?component" // vite-svg-loader 插件的功能
 import ErrorPageLayout from "./components/ErrorPageLayout.vue"
 </script>
 

src/pages/login/components/Owl.vue

@@ -28,7 +28,7 @@ const props = defineProps<Props>()
   width: 120px;
   height: 95px;
   transform: translateY(12%);
-  @include backgroundImage("@/assets/login/face.png");
+  @include backgroundImage("@/assets/images/login/face.png");
   .hand-down-left,
   .hand-down-right {
     z-index: 2;
@@ -40,12 +40,12 @@ const props = defineProps<Props>()
   .hand-down-left {
     bottom: 3px;
     left: -35px;
-    @include backgroundImage("@/assets/login/hand-down-left.png");
+    @include backgroundImage("@/assets/images/login/hand-down-left.png");
   }
   .hand-down-right {
     bottom: 3px;
     right: -40px;
-    @include backgroundImage("@/assets/login/hand-down-right.png");
+    @include backgroundImage("@/assets/images/login/hand-down-right.png");
   }
   .hand-up-left,
   .hand-up-right {
@@ -59,12 +59,12 @@ const props = defineProps<Props>()
   .hand-up-left {
     bottom: 11px;
     left: -5px;
-    @include backgroundImage("@/assets/login/hand-up-left.png");
+    @include backgroundImage("@/assets/images/login/hand-up-left.png");
   }
   .hand-up-right {
     bottom: 11px;
     right: 5px;
-    @include backgroundImage("@/assets/login/hand-up-right.png");
+    @include backgroundImage("@/assets/images/login/hand-up-right.png");
   }
   .close-eyes {
     z-index: 1;
@@ -72,7 +72,7 @@ const props = defineProps<Props>()
     height: 100%;
     opacity: 0;
     transition: opacity 0.1s linear 0.1s;
-    @include backgroundImage("@/assets/login/close-eyes.png");
+    @include backgroundImage("@/assets/images/login/close-eyes.png");
   }
 }
 

src/pages/login/index.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { LoginRequestData } from "@/api/login/types/login"
+import type { LoginRequestData } from "@/http/login/types/login"
 import type { FormInstance, FormRules } from "element-plus"
-import { getLoginCodeApi } from "@/api/login"
 import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
+import { getLoginCodeApi } from "@/http/login"
 import { useUserStore } from "@/pinia/stores/user"
 import { Key, Loading, Lock, Picture, User } from "@element-plus/icons-vue"
 import { reactive, ref } from "vue"
@@ -78,7 +78,7 @@ createCode()
     <Owl :close-eyes="isFocus" />
     <div class="login-card">
       <div class="title">
-        <img src="@/assets/layouts/logo-text-2.png">
+        <img src="@/assets/images/layouts/logo-text-2.png">
       </div>
       <div class="content">
         <el-form ref="loginFormRef" :model="loginFormData" :rules="loginFormRules" @keyup.enter="handleLogin">

src/pages/table/element-plus/index.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { CreateOrUpdateTableRequestData, TableData } from "@/api/table/types/table"
+import type { CreateOrUpdateTableRequestData, TableData } from "@/http/table/types/table"
 import type { FormInstance, FormRules } from "element-plus"
-import { createTableDataApi, deleteTableDataApi, getTableDataApi, updateTableDataApi } from "@/api/table"
 import { usePagination } from "@/composables/usePagination"
+import { createTableDataApi, deleteTableDataApi, getTableDataApi, updateTableDataApi } from "@/http/table"
 import { CirclePlus, Delete, Download, Refresh, RefreshRight, Search } from "@element-plus/icons-vue"
 import { ElMessage, ElMessageBox } from "element-plus"
 import { cloneDeep } from "lodash-es"

src/pages/table/vxe-table/index.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { TableResponseData } from "@/api/table/types/table"
+import type { TableResponseData } from "@/http/table/types/table"
 import type { ElMessageBoxOptions } from "element-plus"
 import type { VxeFormInstance, VxeFormProps, VxeGridInstance, VxeGridProps, VxeModalInstance, VxeModalProps } from "vxe-table"
-import { deleteTableDataApi, getTableDataApi } from "@/api/table"
+import { deleteTableDataApi, getTableDataApi } from "@/http/table"
 import { ElMessage, ElMessageBox } from "element-plus"
 import { nextTick, reactive, ref } from "vue"
 import RoleColumnSolts from "./tsx/RoleColumnSolts"

src/pinia/stores/user.ts

@@ -1,6 +1,6 @@
-import type { LoginRequestData } from "@/api/login/types/login"
+import type { LoginRequestData } from "@/http/login/types/login"
-import { getUserInfoApi, loginApi } from "@/api/login"
 import routeSettings from "@/config/route"
+import { getUserInfoApi, loginApi } from "@/http/login"
 import { pinia } from "@/pinia"
 import { resetRouter } from "@/router"
 import { getToken, removeToken, setToken } from "@/utils/cache/cookies"

src/router/index.ts

@@ -19,20 +19,20 @@ export const constantRoutes: RouteRecordRaw[] = [
     children: [
       {
         path: ":path(.*)",
-        component: () => import("@/views/redirect/index.vue")
+        component: () => import("@/pages/redirect/index.vue")
       }
     ]
   },
   {
     path: "/403",
-    component: () => import("@/views/error-page/403.vue"),
+    component: () => import("@/pages/error-page/403.vue"),
     meta: {
       hidden: true
     }
   },
   {
     path: "/404",
-    component: () => import("@/views/error-page/404.vue"),
+    component: () => import("@/pages/error-page/404.vue"),
     meta: {
       hidden: true
     },
@@ -40,7 +40,7 @@ export const constantRoutes: RouteRecordRaw[] = [
   },
   {
     path: "/login",
-    component: () => import("@/views/login/index.vue"),
+    component: () => import("@/pages/login/index.vue"),
     meta: {
       hidden: true
     }
@@ -52,7 +52,7 @@ export const constantRoutes: RouteRecordRaw[] = [
     children: [
       {
         path: "dashboard",
-        component: () => import("@/views/dashboard/index.vue"),
+        component: () => import("@/pages/dashboard/index.vue"),
         name: "Dashboard",
         meta: {
           title: "首页",
@@ -69,7 +69,7 @@ export const constantRoutes: RouteRecordRaw[] = [
     children: [
       {
         path: "index",
-        component: () => import("@/views/unocss/index.vue"),
+        component: () => import("@/pages/unocss/index.vue"),
         name: "UnoCSS",
         meta: {
           title: "UnoCSS",
@@ -115,7 +115,7 @@ export const constantRoutes: RouteRecordRaw[] = [
     children: [
       {
         path: "element-plus",
-        component: () => import("@/views/table/element-plus/index.vue"),
+        component: () => import("@/pages/table/element-plus/index.vue"),
         name: "ElementPlus",
         meta: {
           title: "Element Plus",
@@ -124,7 +124,7 @@ export const constantRoutes: RouteRecordRaw[] = [
       },
       {
         path: "vxe-table",
-        component: () => import("@/views/table/vxe-table/index.vue"),
+        component: () => import("@/pages/table/vxe-table/index.vue"),
         name: "VxeTable",
         meta: {
           title: "Vxe Table",
@@ -145,7 +145,7 @@ export const constantRoutes: RouteRecordRaw[] = [
     children: [
       {
         path: "menu1",
-        component: () => import("@/views/menu/menu1/index.vue"),
+        component: () => import("@/pages/menu/menu1/index.vue"),
         redirect: "/menu/menu1/menu1-1",
         name: "Menu1",
         meta: {
@@ -154,7 +154,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         children: [
           {
             path: "menu1-1",
-            component: () => import("@/views/menu/menu1/menu1-1/index.vue"),
+            component: () => import("@/pages/menu/menu1/menu1-1/index.vue"),
             name: "Menu1-1",
             meta: {
               title: "menu1-1",
@@ -163,7 +163,7 @@ export const constantRoutes: RouteRecordRaw[] = [
           },
           {
             path: "menu1-2",
-            component: () => import("@/views/menu/menu1/menu1-2/index.vue"),
+            component: () => import("@/pages/menu/menu1/menu1-2/index.vue"),
             redirect: "/menu/menu1/menu1-2/menu1-2-1",
             name: "Menu1-2",
             meta: {
@@ -172,7 +172,7 @@ export const constantRoutes: RouteRecordRaw[] = [
             children: [
               {
                 path: "menu1-2-1",
-                component: () => import("@/views/menu/menu1/menu1-2/menu1-2-1/index.vue"),
+                component: () => import("@/pages/menu/menu1/menu1-2/menu1-2-1/index.vue"),
                 name: "Menu1-2-1",
                 meta: {
                   title: "menu1-2-1",
@@ -181,7 +181,7 @@ export const constantRoutes: RouteRecordRaw[] = [
               },
               {
                 path: "menu1-2-2",
-                component: () => import("@/views/menu/menu1/menu1-2/menu1-2-2/index.vue"),
+                component: () => import("@/pages/menu/menu1/menu1-2/menu1-2-2/index.vue"),
                 name: "Menu1-2-2",
                 meta: {
                   title: "menu1-2-2",
@@ -192,7 +192,7 @@ export const constantRoutes: RouteRecordRaw[] = [
           },
           {
             path: "menu1-3",
-            component: () => import("@/views/menu/menu1/menu1-3/index.vue"),
+            component: () => import("@/pages/menu/menu1/menu1-3/index.vue"),
             name: "Menu1-3",
             meta: {
               title: "menu1-3",
@@ -203,7 +203,7 @@ export const constantRoutes: RouteRecordRaw[] = [
       },
       {
         path: "menu2",
-        component: () => import("@/views/menu/menu2/index.vue"),
+        component: () => import("@/pages/menu/menu2/index.vue"),
         name: "Menu2",
         meta: {
           title: "menu2",
@@ -225,7 +225,7 @@ export const constantRoutes: RouteRecordRaw[] = [
     children: [
       {
         path: "use-fetch-select",
-        component: () => import("@/views/composable-demo/use-fetch-select.vue"),
+        component: () => import("@/pages/composable-demo/use-fetch-select.vue"),
         name: "UseFetchSelect",
         meta: {
           title: "useFetchSelect"
@@ -233,7 +233,7 @@ export const constantRoutes: RouteRecordRaw[] = [
       },
       {
         path: "use-fullscreen-loading",
-        component: () => import("@/views/composable-demo/use-fullscreen-loading.vue"),
+        component: () => import("@/pages/composable-demo/use-fullscreen-loading.vue"),
         name: "UseFullscreenLoading",
         meta: {
           title: "useFullscreenLoading"
@@ -241,7 +241,7 @@ export const constantRoutes: RouteRecordRaw[] = [
       },
       {
         path: "use-watermark",
-        component: () => import("@/views/composable-demo/use-watermark.vue"),
+        component: () => import("@/pages/composable-demo/use-watermark.vue"),
         name: "UseWatermark",
         meta: {
           title: "useWatermark"
@@ -271,7 +271,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
     children: [
       {
         path: "page",
-        component: () => import("@/views/permission/page.vue"),
+        component: () => import("@/pages/permission/page.vue"),
         name: "PagePermission",
         meta: {
           title: "页面级",
@@ -280,7 +280,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
       },
       {
         path: "directive",
-        component: () => import("@/views/permission/directive.vue"),
+        component: () => import("@/pages/permission/directive.vue"),
         name: "DirectivePermission",
         meta: {
           title: "按钮级" // 如果未设置角色，则表示：该页面不需要权限，但会继承根路由的角色

types/vue-router.d.ts

@@ -9,7 +9,7 @@ declare module "vue-router" {
      */
     title?: string
     /**
-     * 设置该路由的图标，记得将 svg 导入 @/icons/svg
+     * 设置该路由的图标，记得将 svg 导入 @/assets/icons/svg
      */
     svgIcon?: string
     /**

vite.config.ts

@@ -91,7 +91,7 @@ export default defineConfig(({ mode }) => {
       svgLoader({ defaultImport: "url" }),
       // 生成 SVG 雪碧图
       createSvgIconsPlugin({
-        iconDirs: [resolve(root, "src/icons/svg")],
+        iconDirs: [resolve(root, "src/assets/icons/svg")],
         symbolId: "icon-[dir]-[name]"
       }),
       // 原子化 CSS
@@ -99,7 +99,7 @@ export default defineConfig(({ mode }) => {
     ],
     // Configuring Vitest: https://cn.vitest.dev/config
     test: {
-      include: ["tests/**/*.test.ts"],
+      include: ["tests/**/*.test.{ts,js}"],
       environment: "jsdom"
     }
   }