feat: grid-layout布局, hooks/stores模块独立

.npmrc

@@ -6,3 +6,4 @@ public-hoist-pattern[]=*eslint*
 public-hoist-pattern[]=*prettier*
 public-hoist-pattern[]=*vite-plugin-mock*
 public-hoist-pattern[]=vite
+strict-peer-dependencies=false

apps/admin/package.json

@@ -32,8 +32,8 @@
     "@vben/hooks": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locale": "workspace:*",
-    "@vben/pinia": "workspace:*",
     "@vben/request": "workspace:*",
+    "@vben/stores": "workspace:*",
     "@vben/styles": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vben/vbencomponents": "workspace:*",

apps/admin/src/layout/index.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Layout } from '@vben/layouts'
+
 </script>
 
 <template>

apps/admin/src/main.ts

@@ -6,7 +6,7 @@ import { createApp } from 'vue'
 import { router } from '@/router'
 import { setupRouteGuard } from '@/router/guard'
 import { setupI18n } from '@vben/locale'
-import { setupPinia } from '@vben/pinia'
+import { setupPinia } from '@vben/stores'
 import { initApplication } from './init-application'
 import { registerComponents } from '../init-components'
 ;(async () => {

apps/admin/src/pages/sys/login/login.vue

@@ -6,7 +6,6 @@ import ForgetPasswordForm from './forget-password-form.vue'
 import RegisterForm from './register-form.vue'
 import MobileForm from './mobile-form.vue'
 import QrCodeForm from './qrcode-form.vue'
-import { DarkModeToggle } from '@vben/layouts'
 const { bem } = createNamespace('login')
 
 defineProps({

apps/admin/src/store/auth.ts

@@ -1,4 +1,4 @@
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { asyncRoutes, PAGE_NOT_FOUND_ROUTE } from '@/router/routes'
 import { filterTree } from '@vben/utils'
 import { Menu } from '@vben/types'

apps/admin/src/store/config.ts

@@ -6,7 +6,7 @@ import {
   ProjectConfig,
   TransitionSetting,
 } from '@vben/types'
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { deepMerge } from '@vben/utils'
 import { APP_DARK_MODE_KEY_, ThemeEnum } from '@vben/constants'
 import { darkMode, projectSetting } from '@/setting'

apps/admin/src/store/lock.ts

@@ -1,5 +1,5 @@
 import type { LockInfo } from '@vben/types'
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { useUserStore } from '@/store/user'
 
 interface LockState {

apps/admin/src/store/modules/app.ts

@@ -1,4 +1,4 @@
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 // import { pinia } from '@/pinia'
 import { resetRouter } from '@/router'
 

apps/admin/src/store/multipleTab.ts

@@ -4,7 +4,7 @@ import type {
   Router,
 } from 'vue-router'
 import { toRaw, unref } from 'vue'
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 
 import { useGo, useRedo } from '@vben/hooks'
 // import { Persistent } from '/@/utils/cache/persistent';

apps/admin/src/store/test.ts

@@ -1,4 +1,4 @@
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 
 export const useTest = defineStore({
   id: 'use--test',

apps/admin/src/store/user.ts

@@ -1,5 +1,5 @@
 import type { LoginParams } from '@/apis/auth'
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { BASIC_HOME_PATH, BASIC_LOGIN_PATH, PageEnum } from '@vben/constants'
 // import { pinia } from '@/pinia'
 import { router } from '@/router'

apps/grid-admin/.env

@@ -0,0 +1,5 @@
+# spa title
+VITE_GLOB_APP_TITLE = Vben Admin
+
+# spa shortname
+VITE_GLOB_APP_SHORT_NAME = vben_admin

apps/grid-admin/.env.development

@@ -0,0 +1,21 @@
+# Whether to open mock
+VITE_USE_MOCK = true
+
+# public path
+VITE_PUBLIC_PATH = /
+
+# Cross-domain proxy, you can configure multiple
+# Please note that no line breaks
+VITE_PROXY = [["/basic-api","http://localhost:3000"]]
+# VITE_PROXY=[["/api","https://vvbin.cn/test"]]
+
+# Whether to enable https and http2 in the development environment
+# it will greatly optimize the loading speed at the first startup
+# 是否在开发环境开启 https 和 http2（开启后将大幅优化首次启动时加载速度）
+VITE_USE_HTTPS = true
+
+# Delete console
+VITE_DROP_CONSOLE = false
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/basic-api

apps/grid-admin/.env.production

@@ -0,0 +1,28 @@
+# Whether to open mock
+VITE_USE_MOCK = true
+
+# public path
+VITE_PUBLIC_PATH = /
+
+# Delete console
+VITE_DROP_CONSOLE = true
+
+# Whether to enable gzip or brotli compression
+# Optional: gzip | brotli | none
+# If you need multiple forms, you can use `,` to separate
+VITE_BUILD_COMPRESS = 'none'
+
+# Whether to delete origin files when using compress, default false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/basic-api
+
+# Whether to enable image compression
+VITE_USE_IMAGEMIN= true
+
+# use pwa
+VITE_USE_PWA = false
+
+# Is it compatible with older browsers
+VITE_LEGACY = false

apps/grid-admin/index.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
+    <title><%= title %></title>
+    <link rel="icon" href="/favicon.ico" />
+  </head>
+  <body>
+    <div id="app">
+       <style>
+        .app-loading {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          background-color: #f4f7f9;
+        }
+
+        .app-loading .app-loading__wrap {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          display: flex;
+          transform: translate3d(-50%, -50%, 0);
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+        }
+
+        .app-loading .dots {
+          display: flex;
+          padding: 98px;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .app-loading .app-loading-title {
+          display: flex;
+          margin-top: 30px;
+          font-size: 30px;
+          color: rgb(0 0 0 / 85%);
+          justify-content: center;
+          align-items: center;
+        }
+
+        .app-loading .app-loading__logo {
+          display: block;
+          width: 90px;
+          margin: 0 auto;
+          margin-bottom: 20px;
+        }
+
+        .dot {
+          position: relative;
+          display: inline-block;
+          width: 48px;
+          height: 48px;
+          margin-top: 30px;
+          font-size: 32px;
+          transform: rotate(45deg);
+          box-sizing: border-box;
+          animation: antRotate 1.2s infinite linear;
+        }
+
+        .dot i {
+          position: absolute;
+          display: block;
+          width: 20px;
+          height: 20px;
+          background-color: #0065cc;
+          border-radius: 100%;
+          opacity: 30%;
+          transform: scale(0.75);
+          animation: antSpinMove 1s infinite linear alternate;
+          transform-origin: 50% 50%;
+        }
+
+        .dot i:nth-child(1) {
+          top: 0;
+          left: 0;
+        }
+
+        .dot i:nth-child(2) {
+          top: 0;
+          right: 0;
+          animation-delay: 0.4s;
+        }
+
+        .dot i:nth-child(3) {
+          right: 0;
+          bottom: 0;
+          animation-delay: 0.8s;
+        }
+
+        .dot i:nth-child(4) {
+          bottom: 0;
+          left: 0;
+          animation-delay: 1.2s;
+        }
+
+        @keyframes antRotate {
+          to {
+            transform: rotate(405deg);
+          }
+        }
+
+        @keyframes antRotate {
+          to {
+            transform: rotate(405deg);
+          }
+        }
+
+        @keyframes antSpinMove {
+          to {
+            opacity: 100%;
+          }
+        }
+
+        @keyframes antSpinMove {
+          to {
+            opacity: 100%;
+          }
+        }
+      </style>
+
+      <div class="app-loading">
+        <div class="app-loading__wrap">
+          <img src="/logo.png" class="app-loading__logo" alt="Logo" />
+          <div class="app-loading-dots">
+            <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+          </div>
+          <div class="app-loading-title"><%= title %></div>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>