refactor: 迁移 assets 到 common 目录

README.md

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

src/components/SearchMenu/Result.vue

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

src/layouts/components/AppMain/index.vue

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

src/layouts/components/Logo/index.vue

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

src/layouts/components/Settings/index.vue

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

src/layouts/components/Sidebar/Item.vue

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

src/layouts/modes/LeftMode.vue

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

src/layouts/modes/LeftTopMode.vue

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

src/layouts/modes/TopMode.vue

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

src/main.ts

@@ -13,7 +13,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 "@/assets/styles/index.scss"
+import "@@/assets/styles/index.scss"
 
 const app = createApp(App)
 

src/pages/error-page/403.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Svg403 from "@/assets/images/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/images/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/images/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/images/login/hand-down-left.png");
+    @include backgroundImage("@@/assets/images/login/hand-down-left.png");
   }
   .hand-down-right {
     bottom: 3px;
     right: -40px;
-    @include backgroundImage("@/assets/images/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/images/login/hand-up-left.png");
+    @include backgroundImage("@@/assets/images/login/hand-up-left.png");
   }
   .hand-up-right {
     bottom: 11px;
     right: 5px;
-    @include backgroundImage("@/assets/images/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/images/login/close-eyes.png");
+    @include backgroundImage("@@/assets/images/login/close-eyes.png");
   }
 }
 

src/pages/login/index.vue

@@ -86,7 +86,7 @@ createCode()
     <Owl :close-eyes="isFocus" />
     <div class="login-card">
       <div class="title">
-        <img src="@/assets/images/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">

tsconfig.json

@@ -17,7 +17,10 @@
     "module": "esnext",
     "moduleResolution": "bundler",
     // 非相对模块导入的路径映射配置，根据 baseUrl 配置进行路径计算
-    "paths": { "@/*": ["src/*"] },
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["src/common/*"]
+    },
     "resolveJsonModule": true,
     "types": ["vite/client", "element-plus/global"],
     // 允许 JS
@@ -32,12 +35,7 @@
     "skipLibCheck": true
   },
   // 需要被编译的文件列表
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.vue",
-    "**/*.d.ts"
-  ],
+  "include": ["**/*.ts", "**/*.tsx", "**/*.vue", "**/*.d.ts"],
   // 从编译中排除的文件列表
   "exclude": ["node_modules", "dist"]
 }

types/vue-router.d.ts

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

vite.config.ts

@@ -18,7 +18,9 @@ export default defineConfig(({ mode }) => {
     resolve: {
       alias: {
         // @ 符号指向 src 目录
-        "@": resolve(__dirname, "src")
+        "@": resolve(__dirname, "src"),
+        // @@ 符号指向 src/common 目录
+        "@@": resolve(__dirname, "src/common")
       }
     },
     // 开发环境服务器配置
@@ -91,7 +93,7 @@ export default defineConfig(({ mode }) => {
       svgLoader({ defaultImport: "url" }),
       // 生成 SVG 雪碧图
       createSvgIconsPlugin({
-        iconDirs: [resolve(root, "src/assets/icons")],
+        iconDirs: [resolve(root, "src/common/assets/icons")],
         symbolId: "icon-[dir]-[name]",
         // 自定义 SVGO 配置
         svgoOptions: {