+
+
+
+ + 应用配置可实时预览效果，但只是临时生效，要想真正应用于项目，可以点击下方的「复制配置」按钮，并将配置粘贴到 src/settings.ts 文件中。 +
++ 注意：在生产环境中应关闭该模块。 +
+
+
+
+ 颜色主题风格
+
+
+
+
+
+
+ 底部版权
+
+
+
+
+ 是否启用
+
+
+
+
+ 日期
+
+
+
+
+ 公司
+
+
+
+
+ 网址
+
+
+
+
+ 备案
+
+
+
+
+
+ 其它
+
+
+
+
+ 是否启用权限
+
+
+
+
+ 载入进度条
+
+
+
+
+ 返回顶部
+
+
+
+
+ 动态标题
+
+
+
+
diff --git a/src/components/AuthAll/index.vue b/src/components/AuthAll/index.vue
new file mode 100755
index 0000000..3c0f36e
--- /dev/null
+++ b/src/components/AuthAll/index.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
diff --git a/src/components/NotAllowed/index.vue b/src/components/NotAllowed/index.vue
new file mode 100755
index 0000000..a156cad
--- /dev/null
+++ b/src/components/NotAllowed/index.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+
diff --git a/src/components/PageLayout/index.vue b/src/components/PageLayout/index.vue
new file mode 100644
index 0000000..013bf15
--- /dev/null
+++ b/src/components/PageLayout/index.vue
@@ -0,0 +1,248 @@
+
+
+
+
+
+ + 403 +
+
+ 抱歉，你无权访问该页面
+
+
+
+ {{ data.countdown }} 秒后，返回首页
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/PageMain/index.vue b/src/components/PageMain/index.vue
new file mode 100644
index 0000000..51af1e9
--- /dev/null
+++ b/src/components/PageMain/index.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ settingsStore.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Copyright
+
+
+
+
+
+
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
new file mode 100755
index 0000000..5bc0879
--- /dev/null
+++ b/src/components/SvgIcon/index.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+ {{ prefix }}
+ {{ value }}
+ {{ suffix }}
+
+
diff --git a/src/main.ts b/src/main.ts
new file mode 100755
index 0000000..44cf130
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,32 @@
+import './utils/system.copyright'
+
+import Message from 'vue-m-message'
+import 'vue-m-message/dist/style.css'
+
+import 'overlayscrollbars/overlayscrollbars.css'
+
+import App from './App.vue'
+import pinia from './store'
+import router from './router'
+import ui from './ui-provider'
+
+// 自定义指令
+import directive from '@/utils/directive'
+
+// 加载 svg 图标
+import 'virtual:svg-icons-register'
+
+import 'virtual:uno.css'
+
+// 全局样式
+import '@/assets/styles/globals.scss'
+
+const app = createApp(App)
+
+app.use(Message)
+app.use(pinia)
+app.use(router)
+app.use(ui)
+directive(app)
+
+app.mount('#app')
diff --git a/src/mock/user.ts b/src/mock/user.ts
new file mode 100755
index 0000000..eb307b0
--- /dev/null
+++ b/src/mock/user.ts
@@ -0,0 +1,47 @@
+import { defineFakeRoute } from 'vite-plugin-fake-server/client'
+import Mock from 'mockjs'
+
+export default defineFakeRoute([
+ {
+ url: '/mock/user/login',
+ method: 'post',
+ response: ({ body }) => {
+ return {
+ error: '',
+ status: 1,
+ data: Mock.mock({
+ account: body.account,
+ token: `${body.account}_@string`,
+ avatar: 'https://fantastic-mobile.github.io/logo.png',
+ }),
+ }
+ },
+ },
+ {
+ url: '/mock/user/permission',
+ method: 'get',
+ response: ({ headers }) => {
+ let permissions: string[] = []
+ if (headers.token?.indexOf('admin') === 0) {
+ permissions = [
+ 'permission.browse',
+ 'permission.create',
+ 'permission.edit',
+ 'permission.remove',
+ ]
+ }
+ else if (headers.token?.indexOf('test') === 0) {
+ permissions = [
+ 'permission.browse',
+ ]
+ }
+ return {
+ error: '',
+ status: 1,
+ data: {
+ permissions,
+ },
+ }
+ },
+ },
+])
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100755
index 0000000..8474bcc
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,123 @@
+import type { RouteRecordRaw } from 'vue-router/auto'
+import { createRouter, createWebHashHistory } from 'vue-router/auto'
+import { routes } from 'vue-router/auto-routes'
+import path from 'path-browserify'
+import { useNProgress } from '@vueuse/integrations/useNProgress'
+import '@/assets/styles/nprogress.scss'
+import useSettingsStore from '@/store/modules/settings'
+import useUserStore from '@/store/modules/user'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+
+const { isLoading } = useNProgress(null, {
+ showSpinner: false,
+ parent: '#app',
+})
+
+function resolveRoutePath(basePath?: string, routePath?: string) {
+ return basePath ? path.resolve(basePath, routePath ?? '') : routePath ?? ''
+}
+
+// 将多层嵌套路由处理成一级
+function flatRoutesRecursive(routes: RouteRecordRaw[], baseUrl = '') {
+ const result: RouteRecordRaw[] = []
+ for (const route of routes) {
+ if (route.children) {
+ result.push(...flatRoutesRecursive(route.children, resolveRoutePath(baseUrl, route.path)))
+ }
+ else {
+ result.push({
+ ...route,
+ path: resolveRoutePath(baseUrl, route.path),
+ })
+ }
+ }
+ return result
+}
+
+const router = createRouter({
+ history: createWebHashHistory(),
+ routes: flatRoutesRecursive(routes),
+})
+
+router.beforeEach(async (to, from, next) => {
+ const settingsStore = useSettingsStore()
+ const userStore = useUserStore()
+ settingsStore.settings.app.enableProgress && (isLoading.value = true)
+ if (to.meta.auth) {
+ if (userStore.isLogin) {
+ // 获取用户权限
+ if (settingsStore.settings.app.enablePermission) {
+ !userStore.isGetPermissions && await userStore.getPermissions()
+ }
+ next()
+ }
+ else {
+ next({
+ name: 'login',
+ query: {
+ redirect: to.fullPath,
+ },
+ })
+ }
+ }
+ else {
+ next()
+ }
+})
+
+router.afterEach((to, from) => {
+ const settingsStore = useSettingsStore()
+ settingsStore.settings.app.enableProgress && (isLoading.value = false)
+ settingsStore.setTitle(to.meta.title ?? '')
+ const keepAliveStore = useKeepAliveStore()
+ if (to.fullPath !== from.fullPath) {
+ // 判断当前页面是否开启缓存，如果开启，则将当前页面的 name 信息存入 keep-alive 全局状态
+ if (to.meta.cache) {
+ const componentName = to.matched.at(-1)?.components?.default.name
+ if (componentName) {
+ keepAliveStore.add(componentName)
+ }
+ else {
+ // turbo-console-disable-next-line
+ console.warn('[Fantastic-mobile] 该页面组件未设置组件名，会导致缓存失效，请检查')
+ }
+ }
+ // 判断离开页面是否开启缓存，如果开启，则根据缓存规则判断是否需要清空 keep-alive 全局状态里离开页面的 name 信息
+ if (from.meta.cache) {
+ const componentName = from.matched.at(-1)?.components?.default.name
+ if (componentName) {
+ // 通过 meta.cache 判断针对哪些页面进行缓存
+ switch (typeof from.meta.cache) {
+ case 'string':
+ if (from.meta.cache !== to.name) {
+ keepAliveStore.remove(componentName)
+ }
+ break
+ case 'object':
+ if (!from.meta.cache.includes(to.name)) {
+ keepAliveStore.remove(componentName)
+ }
+ break
+ }
+ // 通过 meta.noCache 判断针对哪些页面不需要进行缓存
+ if (from.meta.noCache) {
+ switch (typeof from.meta.noCache) {
+ case 'string':
+ if (from.meta.noCache === to.name) {
+ keepAliveStore.remove(componentName)
+ }
+ break
+ case 'object':
+ if (from.meta.noCache.includes(to.name)) {
+ keepAliveStore.remove(componentName)
+ }
+ break
+ }
+ }
+ }
+ }
+ }
+ document.documentElement.scrollTop = 0
+})
+
+export default router
diff --git a/src/settings.default.ts b/src/settings.default.ts
new file mode 100644
index 0000000..f6066de
--- /dev/null
+++ b/src/settings.default.ts
@@ -0,0 +1,27 @@
+// 该文件为系统默认配置，请勿修改！！！
+
+const globalSettingsDefault: RecursiveRequired
+
+
+ {{ value }}
+
+
+
+
diff --git a/src/ui-kit/HButton.vue b/src/ui-kit/HButton.vue
new file mode 100644
index 0000000..23a1e24
--- /dev/null
+++ b/src/ui-kit/HButton.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
diff --git a/src/ui-kit/HInput.vue b/src/ui-kit/HInput.vue
new file mode 100644
index 0000000..debdb68
--- /dev/null
+++ b/src/ui-kit/HInput.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
diff --git a/src/ui-kit/HSlideover.vue b/src/ui-kit/HSlideover.vue
new file mode 100644
index 0000000..4b0687d
--- /dev/null
+++ b/src/ui-kit/HSlideover.vue
@@ -0,0 +1,83 @@
+
+
+
+
+
+
diff --git a/src/views/feature/component/basic.vue b/src/views/feature/component/basic.vue
new file mode 100644
index 0000000..7b20153
--- /dev/null
+++ b/src/views/feature/component/basic.vue
@@ -0,0 +1,59 @@
+
+
+
+
+
+ {{ data.countdown }} 秒后，返回首页
+
+
+ + 404 +
+
+ 抱歉，你访问的页面不存在
+
+
+ 通过 slot 设置标题
+
+ 还可以放置自定义按钮
+
+
+
+ 这里放页面内容
+ + Fantastic-mobile +
+
+
+
+
+
+
+
+
单色 Icon
+
+
+ 彩色 Icon
+
+
+ Iconify Icon
+
+
+
+
+
+ 无
+
+
+ 水平翻转
+
+
+ 垂直翻转
+
+
+ 水平垂直翻转
+
+
+
+ 翻转：
+旋转：
+
+
+
+
+
+
+
+ UnoCSS
+
+
+
+
+
+
+
+
+ {{ item.title }}
+
+
+
+
+
+
+
+
+ {{ route.title }}
+
+
+
+ 返回
+
+
+
+ Switch: {{ checked }}
+
+
+
+ 头部导航
+
+
+
+ 使用自定义导航可以满足更复杂的业务场景，例如当前页面，你可以滚动页面试试。
+
+ 返回
+
+
+
+ {{ i }}
+
+
+
+ 返回
+
+
+
+
+ 返回
+
+
+ 切换帐号
+帐号权限
+{{ userStore.permissions }}
+ 访问鉴权页面
+
+
+ 点击访问
+
+
+ 鉴权组件（请对照代码查看）
+
+
+
+ 你有 permission.browse 权限
+
+
+
+ 你没有 permission.browse 权限
+
+
+
+
+
+ 你有 permission.create 权限
+
+
+
+ 你没有 permission.create 权限
+
+
+
+
+
+ 你有 permission.browse 或 permission.create 权限
+
+
+
+ 你没有 permission.browse 或 permission.create 权限
+
+
+
+
+
+ 你有 permission.browse 和 permission.create 权限
+
+
+
+ 你没有 permission.browse 和 permission.create 权限
+
+
+
+
+ 鉴权指令（请对照代码查看）
+
+
+
+ 如果你有 permission.browse 权限则能看到这句话
+
+
+ 如果你有 permission.create 权限则能看到这句话
+
+
+ 如果你有 permission.browse 或 permission.create 权限则能看到这句话
+
+
+ 如果你有 permission.browse 和 permission.create 权限则能看到这句话
+
+ 鉴权函数（请对照代码查看）
+
+
+
+
+
+
+ 校验 permission.browse 权限
+
+
+
+
+ 校验 permission.create 权限
+
+
+
+
+ 校验 permission.browse 或 permission.create 权限
+
+
+
+
+ 校验 permission.browse 和 permission.create 权限
+
+
+
+
+
+
+
+ 「插件」栏目下均为第三方插件的演示页面，框架默认并不包含这些插件。如需使用，请先安装对应插件。
+
+ 安装命令：
+
+
+ pnpm add animate.css
+
+
+
+
+
+ {{ animateList.find(item => item.value === animateIn)?.text }}
+
+
+
+
+
+
+ {{ animateList.find(item => item.value === animateOut)?.text }}
+
+
+
+
+
+
+
+
+
+
+ 「插件」栏目下均为第三方插件的演示页面，框架默认并不包含这些插件。如需使用，请先安装对应插件。
+
+ 安装命令：
+
+
+ pnpm add echarts
+
+
+
+
+
+
+
+ 「插件」栏目下均为第三方插件的演示页面，框架默认并不包含这些插件。如需使用，请先安装对应插件。
+
+ 安装命令：
+
+
+ pnpm add vue-esign
+
+
+
+
+ 清空画板
+
+
+ 生成图片
+
+
+ 下载图片
+
+
+
+
+
+
+
+ 「插件」栏目下均为第三方插件的演示页面，框架默认并不包含这些插件。如需使用，请先安装对应插件。
+
+ 安装命令：
+
+
+ pnpm add qrcode
+
+
+ pnpm add @types/qrcode -D
+
+
+
+
+
+
+
+ 「插件」栏目下均为第三方插件的演示页面，框架默认并不包含这些插件。如需使用，请先安装对应插件。
+
+ 安装命令：
+
+
+ pnpm add swiper
+
+
+
+
+
+
+
+ 「插件」栏目下均为第三方插件的演示页面，框架默认并不包含这些插件。如需使用，请先安装对应插件。
+
+ 安装命令：
+
+
+ pnpm add @visactor/vchart
+
+
+
+
+
+
+
+
+
+
+
+ 返回
+
+
+ 可以根据业务逻辑做更精细化的处理，比如动态切换显示内容。
+
+
+
+
+ 返回
+
+
+ 底部导航默认是全局关闭的，可以单独给指定路由设置开启底部导航。
+ 当然也可以设置为全局开启，指定路由设置关闭。
+
+
+
+
+
+ Fantastic-mobile
+
+
+ 别具一格, 自成一派
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+
+
+ 演示账号一键登录
+
+
+
+
+ admin
+
+
+ test
+
+
+
+
+ 登出
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+ Hi, {{ userStore.account }}
+
+
+ 这是个人中心示例页面噢~
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 点赞
+
+ 9+
+
+
+
+
+
+ 收藏
+
+ 99+
+
+
+
+
+
+ 分享
+
+ 999+
+
+
+
+
+
+
+ 服务1
+
+
+
+
+ 服务2
+
+
+
+
+ 服务3
+
+
+
+
+ 服务4
+
+
+
+
+ 服务5
+
+
+
+
+ 服务6
+
+
+
+
+ 服务7
+
+
+
+
+ 服务8
+
+