feat: Feature/pro docs (#70)

* chore: merge main

* feat: update docs

* feat: remove coze-assistant

* feat: add watermark plugin

* feat: update preferences

* feat: update docs

---------

Co-authored-by: vince <vince292007@gmail.com>
This commit is contained in:
Vben
2024-07-28 14:29:05 +08:00
committed by GitHub
parent 14538f7ed5
commit 376fd17a61
225 changed files with 7731 additions and 1784 deletions

View File

@@ -0,0 +1,14 @@
export default defineEventHandler((event) => {
// setResponseHeaders(event, {
// 'Access-Control-Allow-Credentials': 'true',
// 'Access-Control-Allow-Headers': '*',
// 'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
// 'Access-Control-Allow-Origin': '*',
// 'Access-Control-Expose-Headers': '*',
// });
if (event.method === 'OPTIONS') {
event.node.res.statusCode = 204;
event.node.res.statusMessage = 'No Content.';
return 'OK';
}
});

View File

@@ -3,4 +3,16 @@ import errorHandler from './error';
export default defineNitroConfig({
devErrorHandler: errorHandler,
errorHandler: '~/error',
routeRules: {
'/api/**': {
cors: true,
headers: {
'Access-Control-Allow-Credentials': 'true',
'Access-Control-Allow-Headers': '*',
'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
'Access-Control-Allow-Origin': '*',
'Access-Control-Expose-Headers': '*',
},
},
},
});

View File

@@ -80,8 +80,8 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
icon: 'mdi:button-cursor',
title: 'page.demos.access.adminVisible',
},
name: 'AccessAdminVisible',
path: 'admin-visible',
name: 'AccessAdminVisibleDemo',
path: '/demos/access/admin-visible',
},
super: {
component: '/demos/access/super-visible',
@@ -89,8 +89,8 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
icon: 'mdi:button-cursor',
title: 'page.demos.access.superVisible',
},
name: 'AccessSuperVisible',
path: 'super-visible',
name: 'AccessSuperVisibleDemo',
path: '/demos/access/super-visible',
},
user: {
component: '/demos/access/user-visible',
@@ -98,8 +98,8 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
icon: 'mdi:button-cursor',
title: 'page.demos.access.userVisible',
},
name: 'AccessUserVisible',
path: 'user-visible',
name: 'AccessUserVisibleDemo',
path: '/demos/access/user-visible',
},
};
@@ -117,8 +117,8 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
redirect: '/demos/access',
children: [
{
name: 'Access',
path: 'access',
name: 'AccessDemos',
path: '/demosaccess',
meta: {
icon: 'mdi:cloud-key-outline',
title: 'page.demos.access.backendPermissions',
@@ -126,8 +126,8 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
redirect: '/demos/access/page-control',
children: [
{
name: 'AccessPageControl',
path: 'page-control',
name: 'AccessPageControlDemo',
path: '/demos/access/page-control',
component: '/demos/access/index',
meta: {
icon: 'mdi:page-previous-outline',
@@ -135,8 +135,8 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
},
},
{
name: 'AccessButtonControl',
path: 'button-control',
name: 'AccessButtonControlDemo',
path: '/demos/access/button-control',
component: '/demos/access/button-control',
meta: {
icon: 'mdi:button-cursor',
@@ -144,8 +144,8 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
},
},
{
name: 'AccessMenuVisible403',
path: 'menu-visible-403',
name: 'AccessMenuVisible403Demo',
path: '/demos/access/menu-visible-403',
component: '/demos/access/menu-visible-403',
meta: {
authority: ['no-body'],

View File

@@ -1,6 +1,5 @@
VITE_PORT = 5555
# 应用标题
VITE_GLOB_APP_TITLE=Vben Admin
# spa-title
VITE_GLOB_APP_TITLE = Vben Admin
VITE_APP_NAMESPACE = web-antd
# 应用命名空间用于缓存、store等功能的前缀确保隔离
VITE_APP_NAMESPACE=vben-web-antd

View File

@@ -1,8 +1,7 @@
# public path
VITE_PUBLIC_PATH = /
VITE_BASE=/
# Basic interface address SPA
VITE_GLOB_API_URL=/api
VITE_VISUALIZER = true
VITE_VISUALIZER=true

View File

@@ -1,5 +1,16 @@
VITE_PUBLIC_PATH = /
# 端口号
VITE_PORT=5555
VITE_BASE=/
# 接口地址
VITE_GLOB_API_URL=/api
VITE_NITRO_MOCK = true
# 是否开启 Nitro Mock服务true 为开启false 为关闭
VITE_NITRO_MOCK=true
# 是否打开 devtoolstrue 为打开false 为关闭
VITE_DEVTOOLS=false
# 是否注入全局loading
VITE_INJECT_APP_LOADING=true

View File

@@ -1,9 +1,16 @@
# public path
VITE_PUBLIC_PATH = /
VITE_BASE=/
# Basic interface address SPA
VITE_GLOB_API_URL = https://mock-napi.vben.pro/api
# 接口地址
VITE_GLOB_API_URL=https://mock-napi.vben.pro/api
VITE_COMPRESS = gzip
# 是否开启压缩,可以设置为 none, brotli, gzip
VITE_COMPRESS=gzip
VITE_PWA = false
# 是否开启 PWA
VITE_PWA=false
# vue-router 的模式
VITE_ROUTER_HISTORY=hash
# 是否注入全局loading
VITE_INJECT_APP_LOADING=true

View File

@@ -14,6 +14,19 @@
<!-- 由 vite 注入 VITE_GLOB_APP_TITLE 变量,在 .env 文件内配置 -->
<title><%= VITE_GLOB_APP_TITLE %></title>
<link rel="icon" href="/favicon.ico" />
<script>
// 生产环境下注入百度统计
if (window._VBEN_ADMIN_PRO_APP_CONF_) {
var _hmt = _hmt || [];
(function () {
var hm = document.createElement('script');
hm.src =
'https://hm.baidu.com/hm.js?d20a01273820422b6aa2ee41b6c9414d';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
}
</script>
</head>
<body>
<div id="app"></div>

View File

@@ -44,7 +44,7 @@
"ant-design-vue": "^4.2.3",
"dayjs": "^1.11.12",
"pinia": "2.1.7",
"vue": "^3.4.33",
"vue": "^3.4.34",
"vue-router": "^4.4.0"
}
}

View File

@@ -0,0 +1,33 @@
import { requestClient } from '#/api/request';
export namespace AuthApi {
/** 登录接口参数 */
export interface LoginParams {
password: string;
username: string;
}
/** 登录接口返回值 */
export interface LoginResult {
accessToken: string;
desc: string;
realName: string;
refreshToken: string;
userId: string;
username: string;
}
}
/**
* 登录
*/
export async function login(data: AuthApi.LoginParams) {
return requestClient.post<AuthApi.LoginResult>('/auth/login', data);
}
/**
* 获取用户权限码
*/
export async function getAccessCodes() {
return requestClient.get<string[]>('/auth/codes');
}

View File

@@ -1,6 +1,6 @@
import type { RouteRecordStringComponent } from '@vben/types';
import { requestClient } from '#/apis/request';
import { requestClient } from '#/api/request';
/**
*

View File

@@ -1,6 +1,6 @@
import type { UserInfo } from '@vben/types';
import { requestClient } from '#/apis/request';
import { requestClient } from '#/api/request';
/**
*

View File

@@ -1,4 +1,4 @@
import { requestClient } from '#/apis/request';
import { requestClient } from '#/api/request';
/**
*

View File

@@ -1,3 +1,2 @@
export * from './core';
export * from './demos';
export type * from './types';

View File

@@ -3,6 +3,7 @@
*/
import type { HttpResponse } from '@vben/request';
import { useAppConfig } from '@vben/hooks';
import { preferences } from '@vben/preferences';
import { RequestClient } from '@vben/request';
@@ -10,13 +11,11 @@ import { message } from 'ant-design-vue';
import { useAccessStore } from '#/store';
/**
*
* Create a request instance
*/
function createRequestClient() {
const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
function createRequestClient(baseURL: string) {
const client = new RequestClient({
baseURL: import.meta.env.VITE_GLOB_API_URL,
baseURL,
// 为每个请求携带 Authorization
makeAuthorization: () => {
return {
@@ -43,6 +42,13 @@ function createRequestClient() {
};
},
makeErrorMessage: (msg) => message.error(msg),
makeRequestHeaders: () => {
return {
// 为每个请求携带 Accept-Language
'Accept-Language': preferences.app.locale,
};
},
});
client.addResponseInterceptor<HttpResponse>((response) => {
const { data: responseData, status } = response;
@@ -56,9 +62,4 @@ function createRequestClient() {
return client;
}
const requestClient = createRequestClient();
// 其他配置的请求方法
// const { request: xxxRequest } = createRequest();
export { requestClient };
export const requestClient = createRequestClient(apiURL);

View File

@@ -1,17 +0,0 @@
import type { UserApi } from '../types';
import { requestClient } from '#/apis/request';
/**
* 登录
*/
export async function login(data: UserApi.LoginParams) {
return requestClient.post<UserApi.LoginResult>('/auth/login', data);
}
/**
* 获取用户权限码
*/
export async function getAccessCodes() {
return requestClient.get<string[]>('/auth/codes');
}

View File

@@ -1 +0,0 @@
export type * from './user';

View File

@@ -1,19 +0,0 @@
namespace UserApi {
/** 登录接口参数 */
export interface LoginParams {
password: string;
username: string;
}
/** 登录接口返回值 */
export interface LoginResult {
accessToken: string;
desc: string;
realName: string;
refreshToken: string;
userId: string;
username: string;
}
}
export type { UserApi };

View File

@@ -1,10 +1,9 @@
import { createApp } from 'vue';
import { preferences } from '@vben/preferences';
import '@vben/styles';
import '@vben/styles/antd';
import { loadMessages, setupI18n } from '#/locales';
import { setupI18n } from '#/locales';
import { setupStore } from '#/store';
import App from './app.vue';
@@ -14,11 +13,7 @@ async function bootstrap(namespace: string) {
const app = createApp(App);
// 国际化 i18n 配置
await setupI18n(app, {
defaultLocale: preferences.app.locale,
loadMessages,
missingWarn: !import.meta.env.PROD,
});
await setupI18n(app);
// 配置 pinia-store
await setupStore(app, { namespace });

View File

@@ -1,9 +1,11 @@
import type { SupportedLanguagesType } from '@vben/types';
import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
import type { Locale } from 'ant-design-vue/es/locale';
import type { App } from 'vue';
import { ref } from 'vue';
import { $t, loadLocalesMap, setupI18n } from '@vben/locales';
import { $t, setupI18n as coreSetup, loadLocalesMap } from '@vben/locales';
import { preferences } from '@vben/preferences';
import antdEnLocale from 'ant-design-vue/es/locale/en_US';
import antdDefaultLocale from 'ant-design-vue/es/locale/zh_CN';
@@ -76,4 +78,13 @@ async function loadAntdLocale(lang: SupportedLanguagesType) {
}
}
async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
await coreSetup(app, {
defaultLocale: preferences.app.locale,
loadMessages,
missingWarn: !import.meta.env.PROD,
...options,
});
}
export { $t, antdLocale, loadMessages, setupI18n };

View File

@@ -33,11 +33,17 @@
"text": "Text Badge",
"color": "Badge Color"
},
"activeIcon": {
"title": "Active Menu Icon",
"children": "Children Active Icon"
},
"fallback": { "title": "Fallback Page" },
"features": {
"title": "Features",
"hideChildrenInMenu": "Hide Menu Children",
"loginExpired": "Login Expired",
"icons": "Icons",
"watermark": "Watermark",
"tabs": "Tabs",
"tabDetail": "Tab Detail Page"
},

View File

@@ -33,6 +33,10 @@
"text": "文本徽标",
"color": "徽标颜色"
},
"activeIcon": {
"title": "菜单激活图标",
"children": "子级激活图标"
},
"fallback": {
"title": "缺省页"
},
@@ -40,6 +44,8 @@
"title": "功能",
"hideChildrenInMenu": "隐藏子菜单",
"loginExpired": "登录过期",
"icons": "图标",
"watermark": "水印",
"tabs": "标签页",
"tabDetail": "标签详情页"
},

View File

@@ -1,3 +1,4 @@
import { unmountGlobalLoading } from '@vben/hooks';
import { initPreferences } from '@vben/preferences';
import { overridesPreferences } from './preferences';
@@ -9,7 +10,8 @@ async function initApplication() {
// name用于指定项目唯一标识
// 用于区分不同项目的偏好设置以及存储数据的key前缀以及其他一些需要隔离的数据
const env = import.meta.env.PROD ? 'prod' : 'dev';
const namespace = `${import.meta.env.VITE_APP_NAMESPACE}-${env}`;
const appVersion = import.meta.env.VITE_APP_VERSION;
const namespace = `${import.meta.env.VITE_APP_NAMESPACE}-${appVersion}-${env}`;
// app偏好设置初始化
await initPreferences({
@@ -23,38 +25,7 @@ async function initApplication() {
await bootstrap(namespace);
// 移除并销毁loading
destroyAppLoading();
}
/**
* 移除并销毁loading
* 放在这里是而不是放在 index.html 的app标签内是因为这样比较不会生硬渲染过快可能会有闪烁
* 通过先添加css动画隐藏在动画结束后在移除loading节点来改善体验
* 不好的地方是会增加一些代码量
*/
function destroyAppLoading() {
// 查找全局 loading 元素
const loadingElement = document.querySelector('#__app-loading__');
if (loadingElement) {
// 添加隐藏类,触发过渡动画
loadingElement.classList.add('hidden');
// 查找所有需要移除的注入 loading 元素
const injectLoadingElements = document.querySelectorAll(
'[data-app-loading^="inject"]',
);
// 当过渡动画结束时,移除 loading 元素和所有注入的 loading 元素
loadingElement.addEventListener(
'transitionend',
() => {
loadingElement.remove(); // 移除 loading 元素
injectLoadingElements.forEach((el) => el.remove()); // 移除所有注入的 loading 元素
},
{ once: true },
); // 确保事件只触发一次
}
unmountGlobalLoading();
}
initApplication();

View File

@@ -1,9 +1,15 @@
import { useAppConfig } from '@vben/hooks';
import { defineOverridesPreferences } from '@vben/preferences';
const { appTitle } = useAppConfig(import.meta.env, import.meta.env.PROD);
/**
* @description 项目配置文件
* 只需要覆盖项目中的一部分配置,不需要的配置不用覆盖,会自动使用默认配置
*/
export const overridesPreferences = defineOverridesPreferences({
// overrides
app: {
name: appTitle,
},
});

View File

@@ -8,7 +8,7 @@ import { preferences } from '@vben/preferences';
import { message } from 'ant-design-vue';
import { getAllMenus } from '#/apis';
import { getAllMenus } from '#/api';
import { BasicLayout, IFrameView } from '#/layouts';
import { $t } from '#/locales';

View File

@@ -1,6 +1,10 @@
import type { RouteRecordName, RouteRecordRaw } from 'vue-router';
import { createRouter, createWebHashHistory } from 'vue-router';
import {
createRouter,
createWebHashHistory,
createWebHistory,
} from 'vue-router';
import { traverseTreeValues } from '@vben/utils';
@@ -11,11 +15,14 @@ import { routes } from './routes';
* @zh_CN 创建vue-router实例
*/
const router = createRouter({
history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH),
history:
import.meta.env.VITE_ROUTER_HISTORY === 'hash'
? createWebHashHistory(import.meta.env.VITE_BASE)
: createWebHistory(import.meta.env.VITE_BASE),
// 应该添加到路由的初始路由列表。
routes,
scrollBehavior: () => ({ left: 0, top: 0 }),
// 是否应该禁止尾部斜杠。默认为假
// 是否应该禁止尾部斜杠。
// strict: true,
});

View File

@@ -13,11 +13,10 @@ const routes: RouteRecordRaw[] = [
},
name: 'Dashboard',
path: '/',
redirect: '/analytics',
children: [
{
name: 'Analytics',
path: 'analytics',
path: '/analytics',
component: () => import('#/views/dashboard/analytics/index.vue'),
meta: {
affixTab: true,
@@ -27,7 +26,7 @@ const routes: RouteRecordRaw[] = [
},
{
name: 'Workspace',
path: 'workspace',
path: '/workspace',
component: () => import('#/views/dashboard/workspace/index.vue'),
meta: {
title: $t('page.dashboard.workspace'),

View File

@@ -14,7 +14,6 @@ const routes: RouteRecordRaw[] = [
},
name: 'Demos',
path: '/demos',
redirect: '/demos/access',
children: [
// 权限控制
{
@@ -22,13 +21,12 @@ const routes: RouteRecordRaw[] = [
icon: 'mdi:shield-key-outline',
title: $t('page.demos.access.frontendPermissions'),
},
name: 'Access',
path: 'access',
redirect: '/demos/access/page-control',
name: 'AccessDemos',
path: '/demos/access',
children: [
{
name: 'AccessPageControl',
path: 'page-control',
name: 'AccessPageControlDemo',
path: '/demos/access/page-control',
component: () => import('#/views/demos/access/index.vue'),
meta: {
icon: 'mdi:page-previous-outline',
@@ -36,8 +34,8 @@ const routes: RouteRecordRaw[] = [
},
},
{
name: 'AccessButtonControl',
path: 'button-control',
name: 'AccessButtonControlDemo',
path: '/demos/access/button-control',
component: () => import('#/views/demos/access/button-control.vue'),
meta: {
icon: 'mdi:button-cursor',
@@ -45,8 +43,8 @@ const routes: RouteRecordRaw[] = [
},
},
{
name: 'AccessMenuVisible403',
path: 'menu-visible-403',
name: 'AccessMenuVisible403Demo',
path: '/demos/access/menu-visible-403',
component: () =>
import('#/views/demos/access/menu-visible-403.vue'),
meta: {
@@ -57,8 +55,8 @@ const routes: RouteRecordRaw[] = [
},
},
{
name: 'AccessSuperVisible',
path: 'super-visible',
name: 'AccessSuperVisibleDemo',
path: '/demos/access/super-visible',
component: () => import('#/views/demos/access/super-visible.vue'),
meta: {
authority: ['super'],
@@ -67,8 +65,8 @@ const routes: RouteRecordRaw[] = [
},
},
{
name: 'AccessAdminVisible',
path: 'admin-visible',
name: 'AccessAdminVisibleDemo',
path: '/demos/access/admin-visible',
component: () => import('#/views/demos/access/admin-visible.vue'),
meta: {
authority: ['admin'],
@@ -77,8 +75,8 @@ const routes: RouteRecordRaw[] = [
},
},
{
name: 'AccessUserVisible',
path: 'user-visible',
name: 'AccessUserVisibleDemo',
path: '/demos/access/user-visible',
component: () => import('#/views/demos/access/user-visible.vue'),
meta: {
authority: ['user'],
@@ -94,13 +92,39 @@ const routes: RouteRecordRaw[] = [
icon: 'mdi:feature-highlight',
title: $t('page.demos.features.title'),
},
name: 'Features',
path: 'features',
redirect: '/demos/features/tabs',
name: 'FeaturesDemos',
path: '/demos/features',
children: [
{
name: 'LoginExpiredDemo',
path: '/demos/features/login-expired',
component: () =>
import('#/views/demos/features/login-expired/index.vue'),
meta: {
icon: 'mdi:encryption-expiration',
title: $t('page.demos.features.loginExpired'),
},
},
{
name: 'IconsDemo',
path: '/demos/features/icons',
component: () => import('#/views/demos/features/icons/index.vue'),
meta: {
title: $t('page.demos.features.icons'),
},
},
{
name: 'WatermarkDemo',
path: '/demos/features/watermark',
component: () =>
import('#/views/demos/features/watermark/index.vue'),
meta: {
title: $t('page.demos.features.watermark'),
},
},
{
name: 'FeatureTabsDemo',
path: 'tabs',
path: '/demos/features/tabs',
component: () => import('#/views/demos/features/tabs/index.vue'),
meta: {
icon: 'lucide:app-window',
@@ -109,7 +133,7 @@ const routes: RouteRecordRaw[] = [
},
{
name: 'FeatureTabDetailDemo',
path: 'tabs/detail/:id',
path: '/demos/features/tabs/detail/:id',
component: () =>
import('#/views/demos/features/tabs/tab-detail.vue'),
meta: {
@@ -120,19 +144,19 @@ const routes: RouteRecordRaw[] = [
},
},
{
name: 'HideChildrenInMenuParent',
path: 'hide-menu-children',
name: 'HideChildrenInMenuParentDemo',
path: '/demos/features/hide-menu-children',
component: () =>
import('#/views/demos/features/hide-menu-children/parent.vue'),
meta: {
hideChildrenInMenu: true,
icon: 'ic:round-menu',
title: 'page.demos.features.hideChildrenInMenu',
title: $t('page.demos.features.hideChildrenInMenu'),
},
children: [
{
name: 'HideChildrenInMenuChildren',
path: 'hide-children-in-menu',
name: 'HideChildrenInMenuChildrenDemo',
path: '/demos/features/hide-menu-children/children',
component: () =>
import(
'#/views/demos/features/hide-menu-children/children.vue'
@@ -140,31 +164,20 @@ const routes: RouteRecordRaw[] = [
},
],
},
{
name: 'LoginExpired',
path: 'login-expired',
component: () =>
import('#/views/demos/features/login-expired/index.vue'),
meta: {
icon: 'mdi:encryption-expiration',
title: $t('page.demos.features.loginExpired'),
},
},
],
},
// 面包屑导航
{
name: 'BreadcrumbDemos',
path: 'breadcrumb',
path: '/demos/breadcrumb',
meta: {
icon: 'lucide:navigation',
title: $t('page.demos.breadcrumb.navigation'),
},
redirect: '/demos/breadcrumb/lateral',
children: [
{
name: 'BreadcrumbLateral',
path: 'lateral',
name: 'BreadcrumbLateralDemo',
path: '/demos/breadcrumb/lateral',
component: () => import('#/views/demos/breadcrumb/lateral.vue'),
meta: {
icon: 'lucide:navigation',
@@ -172,8 +185,8 @@ const routes: RouteRecordRaw[] = [
},
},
{
name: 'BreadcrumbLateralDetail',
path: 'lateral-detail',
name: 'BreadcrumbLateralDetailDemo',
path: '/demos/breadcrumb/lateral-detail',
component: () =>
import('#/views/demos/breadcrumb/lateral-detail.vue'),
meta: {
@@ -183,17 +196,16 @@ const routes: RouteRecordRaw[] = [
},
},
{
name: 'BreadcrumbLevel',
path: 'level',
name: 'BreadcrumbLevelDemo',
path: '/demos/breadcrumb/level',
meta: {
icon: 'lucide:navigation',
title: $t('page.demos.breadcrumb.level'),
},
redirect: '/demos/breadcrumb/level/detail',
children: [
{
name: 'BreadcrumbLevelDetail',
path: 'detail',
name: 'BreadcrumbLevelDetailDemo',
path: '/demos/breadcrumb/level/detail',
component: () =>
import('#/views/demos/breadcrumb/level-detail.vue'),
meta: {
@@ -210,13 +222,12 @@ const routes: RouteRecordRaw[] = [
icon: 'mdi:lightbulb-error-outline',
title: $t('page.demos.fallback.title'),
},
name: 'Fallback',
path: 'fallback',
redirect: '/demos/fallback/403',
name: 'FallbackDemos',
path: '/demos/fallback',
children: [
{
name: 'Fallback403',
path: '403',
name: 'Fallback403Demo',
path: '/demos/fallback/403',
component: () => import('#/views/_core/fallback/forbidden.vue'),
meta: {
icon: 'mdi:do-not-disturb-alt',
@@ -224,8 +235,8 @@ const routes: RouteRecordRaw[] = [
},
},
{
name: 'Fallback404',
path: '404',
name: 'Fallback404Demo',
path: '/demos/fallback/404',
component: () => import('#/views/_core/fallback/not-found.vue'),
meta: {
icon: 'mdi:table-off',
@@ -233,8 +244,8 @@ const routes: RouteRecordRaw[] = [
},
},
{
name: 'Fallback500',
path: '500',
name: 'Fallback500Demo',
path: '/demos/fallback/500',
component: () =>
import('#/views/_core/fallback/internal-error.vue'),
meta: {
@@ -243,8 +254,8 @@ const routes: RouteRecordRaw[] = [
},
},
{
name: 'FallbackOffline',
path: 'offline',
name: 'FallbackOfflineDemo',
path: '/demos/fallback/offline',
component: () => import('#/views/_core/fallback/offline.vue'),
meta: {
icon: 'mdi:offline',
@@ -261,14 +272,13 @@ const routes: RouteRecordRaw[] = [
icon: 'lucide:circle-dot',
title: $t('page.demos.badge.title'),
},
name: 'BadgeDemo',
path: 'badge',
redirect: '/demos/badge/dot',
name: 'BadgeDemos',
path: '/demos/badge',
children: [
{
name: 'BadgeDotDemo',
component: () => import('#/views/demos/badge/index.vue'),
path: 'dot',
path: '/demos/badge/dot',
meta: {
badgeType: 'dot',
icon: 'lucide:square-dot',
@@ -278,7 +288,7 @@ const routes: RouteRecordRaw[] = [
{
name: 'BadgeTextDemo',
component: () => import('#/views/demos/badge/index.vue'),
path: 'text',
path: '/demos/badge/text',
meta: {
badge: '10',
icon: 'lucide:square-dot',
@@ -288,7 +298,7 @@ const routes: RouteRecordRaw[] = [
{
name: 'BadgeColorDemo',
component: () => import('#/views/demos/badge/index.vue'),
path: 'color',
path: '/demos/badge/color',
meta: {
badge: 'Hot',
badgeVariants: 'destructive',
@@ -298,28 +308,48 @@ const routes: RouteRecordRaw[] = [
},
],
},
// 菜单激活图标
{
meta: {
activeIcon: 'fluent-emoji:radioactive',
icon: 'bi:radioactive',
title: $t('page.demos.activeIcon.title'),
},
name: 'ActiveIconDemos',
path: '/demos/active-icon',
children: [
{
name: 'ActiveIconDemo',
component: () => import('#/views/demos/active-icon/index.vue'),
path: '/demos/active-icon/children',
meta: {
activeIcon: 'fluent-emoji:radioactive',
icon: 'bi:radioactive',
title: $t('page.demos.activeIcon.children'),
},
},
],
},
// 外部链接
{
meta: {
icon: 'ic:round-settings-input-composite',
title: $t('page.demos.outside.title'),
},
name: 'Outside',
path: 'outside',
redirect: '/demos/outside/iframe',
name: 'OutsideDemos',
path: '/demos/outside',
children: [
{
name: 'iframe',
path: 'iframe',
name: 'IframeDemos',
path: '/demos/outside/iframe',
meta: {
icon: 'mdi:newspaper-variant-outline',
title: $t('page.demos.outside.embedded'),
},
redirect: '/demos/outside/iframe/vue-document',
children: [
{
name: 'VueDocument',
path: 'vue-document',
name: 'VueDocumentDemo',
path: '/demos/outside/iframe/vue-document',
component: IFrameView,
meta: {
icon: 'logos:vue',
@@ -329,8 +359,8 @@ const routes: RouteRecordRaw[] = [
},
},
{
name: 'Tailwindcss',
path: 'tailwindcss',
name: 'TailwindcssDemo',
path: '/demos/outside/iframe/tailwindcss',
component: IFrameView,
meta: {
icon: 'devicon:tailwindcss',
@@ -342,17 +372,16 @@ const routes: RouteRecordRaw[] = [
],
},
{
name: 'ExternalLink',
path: 'external-link',
name: 'ExternalLinkDemos',
path: '/demos/outside/external-link',
meta: {
icon: 'mdi:newspaper-variant-multiple-outline',
title: $t('page.demos.outside.externalLink'),
},
redirect: '/demos/outside/external-link/vite',
children: [
{
name: 'Vite',
path: 'vite',
name: 'ViteDemo',
path: '/demos/outside/external-link/vite',
component: IFrameView,
meta: {
icon: 'logos:vitejs',
@@ -361,8 +390,8 @@ const routes: RouteRecordRaw[] = [
},
},
{
name: 'VueUse',
path: 'vue-use',
name: 'VueUseDemo',
path: '/demos/outside/external-link/vue-use',
component: IFrameView,
meta: {
icon: 'logos:vueuse',
@@ -380,13 +409,12 @@ const routes: RouteRecordRaw[] = [
icon: 'ic:round-menu',
title: $t('page.demos.nested.title'),
},
name: 'Nested',
path: 'nested',
redirect: '/demos/nested/menu1',
name: 'NestedDemos',
path: '/demos/nested',
children: [
{
name: 'Menu1',
path: 'menu1',
name: 'Menu1Demo',
path: '/demos/nested/menu1',
component: () => import('#/views/demos/nested/menu-1.vue'),
meta: {
icon: 'ic:round-menu',
@@ -395,18 +423,17 @@ const routes: RouteRecordRaw[] = [
},
},
{
name: 'Menu2',
path: 'menu2',
name: 'Menu2Demo',
path: '/demos/nested/menu2',
meta: {
icon: 'ic:round-menu',
keepAlive: true,
title: $t('page.demos.nested.menu2'),
},
redirect: '/demos/nested/menu2/menu2-1',
children: [
{
name: 'Menu21',
path: 'menu2-1',
name: 'Menu21Demo',
path: '/demos/nested/menu2/menu2-1',
component: () => import('#/views/demos/nested/menu-2-1.vue'),
meta: {
icon: 'ic:round-menu',
@@ -417,16 +444,15 @@ const routes: RouteRecordRaw[] = [
],
},
{
name: 'Menu3',
path: 'menu3',
name: 'Menu3Demo',
path: '/demos/nested/menu3',
meta: {
icon: 'ic:round-menu',
title: $t('page.demos.nested.menu3'),
},
redirect: '/demos/nested/menu3/menu3-1',
children: [
{
name: 'Menu31',
name: 'Menu31Demo',
path: 'menu3-1',
component: () => import('#/views/demos/nested/menu-3-1.vue'),
meta: {
@@ -436,17 +462,16 @@ const routes: RouteRecordRaw[] = [
},
},
{
name: 'Menu32',
name: 'Menu32Demo',
path: 'menu3-2',
meta: {
icon: 'ic:round-menu',
title: $t('page.demos.nested.menu3_2'),
},
redirect: '/demos/nested/menu3/menu3-2/menu3-2-1',
children: [
{
name: 'Menu321',
path: 'menu3-2-1',
name: 'Menu321Demo',
path: '/demos/nested/menu3/menu3-2/menu3-2-1',
component: () =>
import('#/views/demos/nested/menu-3-2-1.vue'),
meta: {

View File

@@ -17,11 +17,10 @@ const routes: RouteRecordRaw[] = [
},
name: 'VbenProject',
path: '/vben-admin',
redirect: '/vben-admin/about',
children: [
{
name: 'VbenAbout',
path: 'about',
path: '/vben-admin/about',
component: () => import('#/views/_core/vben/about/index.vue'),
meta: {
badgeType: 'dot',
@@ -32,7 +31,7 @@ const routes: RouteRecordRaw[] = [
},
{
name: 'VbenDocument',
path: 'document',
path: '/vben-admin/document',
component: IFrameView,
meta: {
icon: 'lucide:book-open-text',
@@ -43,7 +42,7 @@ const routes: RouteRecordRaw[] = [
},
{
name: 'VbenGithub',
path: 'github',
path: '/vben-admin/github',
component: IFrameView,
meta: {
icon: 'mdi:github',

View File

@@ -11,7 +11,7 @@ import { resetAllStores, useCoreAccessStore } from '@vben/stores';
import { notification } from 'ant-design-vue';
import { defineStore } from 'pinia';
import { getAccessCodes, getUserInfo, login } from '#/apis';
import { getAccessCodes, getUserInfo, login } from '#/api';
import { $t } from '#/locales';
export const useAccessStore = defineStore('access', () => {

View File

@@ -1,5 +1,7 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
defineOptions({ name: 'Fallback403Demo' });
</script>
<template>

View File

@@ -1,5 +1,7 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
defineOptions({ name: 'Fallback500Demo' });
</script>
<template>

View File

@@ -1,5 +1,7 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
defineOptions({ name: 'Fallback404Demo' });
</script>
<template>

View File

@@ -1,5 +1,7 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
defineOptions({ name: 'FallbackOfflineDemo' });
</script>
<template>

View File

@@ -3,8 +3,6 @@ import { onMounted, ref } from 'vue';
import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
defineOptions({ name: 'AnalyticsTrends' });
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

View File

@@ -3,8 +3,6 @@ import { onMounted, ref } from 'vue';
import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
defineOptions({ name: 'AnalyticsVisitsData' });
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

View File

@@ -3,8 +3,6 @@ import { onMounted, ref } from 'vue';
import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
defineOptions({ name: 'AnalyticsVisitsSales' });
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

View File

@@ -3,8 +3,6 @@ import { onMounted, ref } from 'vue';
import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
defineOptions({ name: 'AnalyticsVisitsSource' });
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

View File

@@ -3,8 +3,6 @@ import { onMounted, ref } from 'vue';
import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
defineOptions({ name: 'AnalyticsVisits' });
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

View File

@@ -20,8 +20,6 @@ import AnalyticsVisitsData from './analytics-visits-data.vue';
import AnalyticsVisitsSales from './analytics-visits-sales.vue';
import AnalyticsVisitsSource from './analytics-visits-source.vue';
defineOptions({ name: 'Analytics' });
const overviewItems: AnalysisOverviewItem[] = [
{
icon: SvgCardIcon,

View File

@@ -22,8 +22,6 @@ import { useAccessStore } from '#/store';
import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';
defineOptions({ name: 'Workspace' });
const accessStore = useAccessStore();
const projectItems: WorkbenchProjectItem[] = [

View File

@@ -1,7 +1,5 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
defineOptions({ name: 'AccessAdminVisible' });
</script>
<template>

View File

@@ -9,8 +9,6 @@ import { Button } from 'ant-design-vue';
import { resetAllStores, useAccessStore } from '#/store';
defineOptions({ name: 'AccessButtonControl' });
const accounts: Record<string, LoginAndRegisterParams> = {
admin: {
password: '123456',

View File

@@ -9,8 +9,6 @@ import { Button } from 'ant-design-vue';
import { resetAllStores, useAccessStore } from '#/store';
defineOptions({ name: 'Access' });
const accounts: Record<string, LoginAndRegisterParams> = {
admin: {
password: '123456',
@@ -51,7 +49,9 @@ async function handleToggleAccessMode() {
resetAllStores();
await accessStore.authLogin(accounts.super, async () => {
router.go(0);
setTimeout(() => {
router.go(0);
}, 150);
});
}
</script>

View File

@@ -1,7 +1,5 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
defineOptions({ name: 'AccessMenuVisible403' });
</script>
<template>

View File

@@ -1,7 +1,5 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
defineOptions({ name: 'AccessSuperVisible' });
</script>
<template>

View File

@@ -1,7 +1,5 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
defineOptions({ name: 'AccessUserVisible' });
</script>
<template>

View File

@@ -0,0 +1,11 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
</script>
<template>
<Fallback
description="用于菜单激活显示不同的图标"
status="coming-soon"
title="激活图标示例"
/>
</template>

View File

@@ -1,7 +1,5 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
defineOptions({ name: 'Menu321' });
</script>
<template>

View File

@@ -5,8 +5,6 @@ import { Fallback } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
defineOptions({ name: 'BreadcrumbLateralDetail' });
const router = useRouter();
</script>

View File

@@ -5,12 +5,10 @@ import { Fallback } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
defineOptions({ name: 'BreadcrumbLateral' });
const router = useRouter();
function details() {
router.push({ name: 'BreadcrumbLateralDetail' });
router.push({ name: 'BreadcrumbLateralDetailDemo' });
}
</script>

View File

@@ -1,7 +1,5 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
defineOptions({ name: 'BreadcrumbLevelDetail' });
</script>
<template>

View File

@@ -1,7 +1,5 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
defineOptions({ name: 'HideMenuChildren' });
</script>
<template>

View File

@@ -0,0 +1,61 @@
<script lang="ts" setup>
import {
MdiGithub,
MdiGoogle,
MdiKeyboardEsc,
MdiQqchat,
MdiWechat,
SvgAvatar1Icon,
SvgAvatar2Icon,
SvgAvatar3Icon,
SvgAvatar4Icon,
SvgBellIcon,
SvgCakeIcon,
SvgCardIcon,
SvgDownloadIcon,
} from '@vben/icons';
</script>
<template>
<div class="p-5">
<div class="card-box p-5">
<h1 class="text-xl font-semibold">图标</h1>
<div class="text-foreground/80 mt-2">
图标可在
<a
class="text-primary"
href="https://icon-sets.iconify.design/"
target="_blank"
>
Iconify
</a>
中查找支持多种图标库 Material Design, Font Awesome, Jam Icons
</div>
</div>
<div class="card-box mt-5 p-5">
<div class="mb-3 text-lg font-semibold">Iconify</div>
<div class="flex items-center gap-5">
<MdiGithub class="size-8" />
<MdiGoogle class="size-8 text-red-500" />
<MdiQqchat class="size-8 text-green-500" />
<MdiWechat class="size-8" />
<MdiKeyboardEsc class="size-8" />
</div>
</div>
<div class="card-box mt-5 p-5">
<div class="mb-3 text-lg font-semibold">Svg Icons</div>
<div class="flex items-center gap-5">
<SvgAvatar1Icon class="size-8" />
<SvgAvatar2Icon class="size-8 text-red-500" />
<SvgAvatar3Icon class="size-8 text-green-500" />
<SvgAvatar4Icon class="size-8" />
<SvgCakeIcon class="size-8" />
<SvgBellIcon class="size-8" />
<SvgCardIcon class="size-8" />
<SvgDownloadIcon class="size-8" />
</div>
</div>
</div>
</template>

View File

@@ -5,9 +5,7 @@ import { preferences, updatePreferences } from '@vben/preferences';
import { Button } from 'ant-design-vue';
import { getMockStatus } from '#/apis';
defineOptions({ name: 'LoginExpired' });
import { getMockStatus } from '#/api';
async function handleClick(type: LoginExpiredModeType) {
const loginExpiredMode = preferences.app.loginExpiredMode;

View File

@@ -6,8 +6,6 @@ import { useTabs } from '@vben/hooks';
import { Input as AInput, Button } from 'ant-design-vue';
defineOptions({ name: 'FeatureTabsDemo' });
const router = useRouter();
const newTabTitle = ref('');

View File

@@ -4,8 +4,6 @@ import { useRoute } from 'vue-router';
import { useTabs } from '@vben/hooks';
defineOptions({ name: 'FeatureTabDetailDemo' });
const route = useRoute();
const { setTabTitle } = useTabs();

View File

@@ -0,0 +1,66 @@
<script lang="ts" setup>
import { useWatermark } from '@vben/hooks';
import { Button } from 'ant-design-vue';
const { destroyWatermark, updateWatermark } = useWatermark();
async function createWaterMark() {
await updateWatermark({
advancedStyle: {
colorStops: [
{
color: 'red',
offset: 0,
},
{
color: 'blue',
offset: 1,
},
],
type: 'linear',
},
content: 'hello my watermark',
globalAlpha: 0.5,
gridLayoutOptions: {
cols: 2,
gap: [20, 20],
matrix: [
[1, 0],
[0, 1],
],
rows: 2,
},
height: 200,
layout: 'grid',
rotate: 22,
width: 200,
});
}
</script>
<template>
<div class="p-5">
<div class="card-box p-5">
<h1 class="text-xl font-semibold">水印</h1>
<div class="text-foreground/80 mt-2">
水印使用了
<a
class="text-primary"
href="https://zhensherlock.github.io/watermark-js-plus/"
target="_blank"
>
watermark-js-plus
</a>
开源插件详细配置可见插件配置
</div>
</div>
<div class="card-box mt-5 p-5">
<div class="mb-3 flex gap-3 text-lg font-semibold">
<Button type="primary" @click="createWaterMark()">创建水印</Button>
<Button danger @click="destroyWatermark">移除水印</Button>
</div>
</div>
</div>
</template>

View File

@@ -1,9 +1,10 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
defineOptions({ name: 'Menu1' });
</script>
<template>
<Fallback status="coming-soon" />
<div>
<Fallback status="coming-soon" />
<input />
</div>
</template>

View File

@@ -1,9 +1,10 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
defineOptions({ name: 'Menu21' });
</script>
<template>
<Fallback status="coming-soon" />
<div>
<Fallback status="coming-soon" />
<input />
</div>
</template>

View File

@@ -1,9 +1,10 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
defineOptions({ name: 'Menu31' });
</script>
<template>
<Fallback status="coming-soon" />
<div>
<Fallback status="coming-soon" />
<input />
</div>
</template>

View File

@@ -1,9 +1,10 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
defineOptions({ name: 'Menu321' });
</script>
<template>
<Fallback status="coming-soon" />
<div>
<Fallback status="coming-soon" />
<input />
</div>
</template>

View File

@@ -3,6 +3,7 @@
"extends": "@vben/tsconfig/node.json",
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"noEmit": false
},
"include": ["vite.config.mts"]

View File

@@ -6,7 +6,7 @@ import {
} from '@vben/vite-config';
export default defineConfig(async () => {
const { appTitle, port, ...envConfig } = await loadAndConvertEnv();
const { appTitle, base, port, ...envConfig } = await loadAndConvertEnv();
return {
application: {
...envConfig,
@@ -16,13 +16,14 @@ export default defineConfig(async () => {
pwaOptions: getDefaultPwaOptions(appTitle),
},
vite: {
base,
server: {
port,
proxy: {
'/api': {
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
// 代理目标地址 - backend-mock 项目
// mock代理目标地址
target: 'http://localhost:5320/api',
ws: true,
},