feat:added support and documentation for the strapi framework

docs/guide/conf.md

@@ -40,9 +40,13 @@ export default router
 createApp(App).use(install, {
     whiteList: ["/login", "/test"], // 路由白名单
     resetPath: "/login", // 比如用户失效需要跳转的路由
+    httpCode:[1], // 接口返回是成功的code码
+    apiModeStrapi:false // 如果接口是strapi框架，设置为true，默认false
 }).use(router).mount("#app")
 ```
 
+>关于如何使用strapi框架，请看[https://juejin.cn/post/7337957655191535650](https://juejin.cn/post/7337957655191535650)
+
 ## 静态添加路由
 
 通过配置参数`menus`,添加路由，更多属性[查看菜单配置](/guide/menu.html#菜单配置)

docs/guide/start.md

@@ -24,6 +24,32 @@ export default defineConfig({
 })
 ```
 
+如果需要可以配置，也可以在使用的时候，在引入即可
+```ts
+import { useNotification } from 'naive-ui'
+```
+```ts
+import AutoImport from 'unplugin-auto-import/vite'
+export default defineConfig({
+    plugins: [
+        AutoImport({
+            imports: [
+                'vue',
+                    {
+                'naive-ui': [
+                    'useDialog',
+                    'useMessage',
+                    'useNotification',
+                    'useLoadingBar'
+                    ]
+                }
+              ]
+        })
+    ]
+})
+```
+
+
 ## main.js
 
 ```javascript

package.json

@@ -1,7 +1,7 @@
 {
     "name": "vue-bag-admin",
     "private": false,
-    "version": "4.2.0",
+    "version": "4.3.0",
     "type": "module",
     "scripts": {
         "dev": "vite",

src/app/admin/main.ts

@@ -30,4 +30,5 @@ createApp(App).use(install, {
     components: {
         headerUserSet: null
     },
+    apiModeStrapi: true
 }).use(router).mount("#app")

src/packages/config/index.ts

@@ -4,7 +4,7 @@ import maxLogo from "@/packages/assets/logo.png"
 export default {
     whiteList: ["/login"],
     resetPath: "/login",
-    httpCode:[1],
+    httpCode: [1],
     menus: [],
     // 通过注入函数，让框架获取外部文件
     getViews: () => {
@@ -18,6 +18,11 @@ export default {
     components: {
         headerUserSet: null
     },
-    apis:{},
-    events:{}
+    apis: {
+        "/login": "/auth/local",
+        "/userInfo": "/user/userinfo",
+        "/menus": "/menus/getAll"
+    },
+    events: {},
+    apiModeStrapi: false
 }

src/packages/http/request.ts

@@ -7,6 +7,8 @@ interface BagAxiosInstance extends AxiosInstance {
     $router?: any
 }
 
+axios.defaults.baseURL = "/api"
+
 const http: BagAxiosInstance = axios.create({
     withCredentials: true,
 })
@@ -28,7 +30,7 @@ http.interceptors.request.use((config: InternalAxiosRequestConfig) => {
 
 http.interceptors.response.use((response: AxiosResponse) => {
     const {code, msg} = response.data
-    if (http.$configOptions.httpCode.indexOf(code) !== -1) {
+    if (http.$configOptions.httpCode.indexOf(code) !== -1 || http.$configOptions.apiModeStrapi) {
         // @ts-ignore
         if (response.config.hint && msg && window.$message) {
             window.$message.success(msg)
@@ -39,8 +41,14 @@ http.interceptors.response.use((response: AxiosResponse) => {
         http.$router.push(http.$configOptions.resetPath)
     }
     return Promise.reject(response)
-}, (error: AxiosError) => {
-    return Promise.reject(error)
+}, (err: AxiosError) => {
+    const {response} = err
+    if (response?.data) {
+        // @ts-ignore
+        const {error} = response?.data
+        error && window.$message.error(error?.message)
+    }
+    return Promise.reject(err)
 })
 
 const post = (url: string, params?: any, config?: AxiosRequestConfig) => {

src/packages/install.vue

@@ -29,10 +29,11 @@ import setupPinia from "@/packages/pinia"
 import config from "@/packages/config"
 import setupIcons from "@/packages/config/icon.ts"
 import {axios} from "@/packages/http/request.ts"
-import router from "@/packages/router"
+import router, {setupRouter} from "@/packages/router"
 import setupComponents from "@/packages/components"
 import Message from "@/packages/layout/components/Message.vue"
 import Notification from "@/packages/layout/components/Notification.vue"
+import locaStore from "@/packages/utils/locaStore.ts"
 
 const emitter: Emitter<any> = mitt()
 
@@ -59,6 +60,8 @@ export {
     install,
     axios,
     router,
+    setupRouter,
+    locaStore
 }
 
 export default defineComponent({

src/packages/router/index.ts

@@ -5,6 +5,7 @@ import "nprogress/nprogress.css"
 import afterEach from "./afterEach.ts"
 import routerMap from "@/packages/router/routerMap.ts"
 import beforeEach from "@/packages/router/beforeEach.ts"
+import type {App} from "vue"
 
 NProgress.configure({
     easing: "ease",  // 动画方式
@@ -29,4 +30,15 @@ router.afterEach((to: RouteLocationNormalized) => {
     afterEach(to)
 })
 
+const setupRouter = (app: App)=>{
+    let { replaceRouter } = app.config.globalProperties?.configOptions // 替换路由，自定义内置路由
+    replaceRouter.forEach((item: any) => {
+        router.addRoute(item)
+    })
+    return router;
+}
+
 export default router
+export {
+    setupRouter
+}

src/packages/view/login/index.vue

@@ -62,9 +62,10 @@
                                         layout="vertical"
                                         :model="compData.form"
                                 >
-                                    <n-form-item label="你的用户" path="name">
-                                        <n-input size="large" :maxlength="12" autocomplete="off"
-                                                 v-model:value="compData.form.name" placeholder="输入你的用户名">
+                                    <n-form-item label="用户名" path="name">
+                                        <n-input size="large" :maxlength="20" autocomplete="off"
+                                                 v-model:value="compData.form.name"
+                                                 :placeholder="compData.mode !== 'login' ? '输入您的用户名' : '输入你的手机号或邮箱'">
                                             <template #suffix>
                                                 <n-icon>
                                                     <HappyOutline/>
@@ -80,7 +81,7 @@
                                         </n-form-item>
                                         <n-form-item v-if="app.mobile" label="验证码" path="code">
                                             <n-input-group>
-                                                <n-input size="large" :maxlength="6" autocomplete="off"
+                                                <n-input size="large" :maxlength="8" autocomplete="off"
                                                          v-model:value="compData.form.code" placeholder="输入验证码">
                                                 </n-input>
                                                 <n-button size="large" type="primary" ghost>发送验证码</n-button>
@@ -92,7 +93,7 @@
                                                          v-model:value="compData.form.email"
                                                          placeholder="输入手机号或者邮箱">
                                                 </n-input>
-                                                <n-input size="large" :style="{width:'43%'}" :maxlength="6"
+                                                <n-input size="large" :style="{width:'43%'}" :maxlength="8"
                                                          autocomplete="off"
                                                          v-model:value="compData.form.code" placeholder="输入验证码">
                                                 </n-input>
@@ -130,7 +131,7 @@
             </div>
         </div>
     </n-card>
-    <!--        <DigitalClock></DigitalClock>-->
+    <!--    <DigitalClock></DigitalClock>-->
 </template>
 <script lang="ts">
 import {defineComponent, ref, reactive, CSSProperties, computed, onMounted} from "vue"
@@ -153,8 +154,8 @@ export default defineComponent({
         const {commonData} = useComponent()
         const compData = reactive({
             form: {
-                name: "admin",
-                password: "123456",
+                name: "[email protected]",
+                password: "strapiPassword",
                 email: "",
                 code: "",
             },
@@ -199,24 +200,31 @@ export default defineComponent({
         })
         const getAssetsFile = computed(() => new URL(`../../assets/${compData.imgName}`, import.meta.url).href)
         onMounted(() => {
-            compData.form.password = locaStore.get("pass")
-            compData.rememberPas = !!compData.form.password
+            if (locaStore.get("pass")) {
+                compData.form.password = locaStore.get("pass")
+                compData.rememberPas = !!compData.form.password
+            }
         })
         const handleLogin = (e) => {
             e.preventDefault()
             formRef.value?.validate((errors) => {
                 if (!errors) {
                     if (compData.mode === "login") {
-                        login(compData.form).then((result) => {
+                        const form = {identifier: compData.form.name}
+                        login({...compData.form, ...form}).then((result) => {
                             if (compData.rememberPas) {
-                                locaStore.set("pass", compData.form.password, 7 * 86400)
+                                locaStore.set("pass", escape(compData.form.password), 7 * 86400)
                             } else {
                                 locaStore.remove("pass")
                             }
                             if (app.configOptions.events.login) {
                                 app.configOptions.events.login({result, router})
                             } else {
-                                locaStore.set("access_token", result.data)
+                                if (app.configOptions.apiModeStrapi) {
+                                    locaStore.set("access_token", `Bearer ${result.jwt}`)
+                                } else {
+                                    locaStore.set("access_token", result.data)
+                                }
                                 router.push("/home")
                             }
                         })

vite.config.ts

@@ -28,9 +28,9 @@ export default ({mode}: { mode: any }) => {
             Components({
                 resolvers: [NaiveUiResolver()]
             }),
-            viteMockServe({
-                mockPath: "./mock",
-            }),
+            // viteMockServe({
+            //     mockPath: "./mock",
+            // }),
             ...plugins
         ],
         publicDir: "public",
@@ -45,6 +45,12 @@ export default ({mode}: { mode: any }) => {
         server: {
             host: "0.0.0.0",
             port: 8280,
+            proxy: {
+                '/api': {
+                    target: 'http://127.0.0.1:1337',
+                    changeOrigin: true,
+                }
+            }
         }
     })
 }