refactor(project): simplified part of the package, code optimization

This commit is contained in:
vben 2024-07-13 16:35:47 +08:00
parent 5784d718c0
commit daa31f7156
92 changed files with 318 additions and 546 deletions

View File

@ -96,7 +96,7 @@ export class MenuController {
path: 'access',
meta: {
icon: 'mdi:cloud-key-outline',
title: 'page.demos.access.backendControl',
title: 'page.demos.access.backendPermissions',
},
redirect: '/demos/access/page-control',
children: [

View File

@ -1,7 +1,9 @@
import type { GeneratorMenuAndRoutesOptions } from '@vben/access';
import type { ComponentRecordType } from '@vben/types';
import type {
ComponentRecordType,
GenerateMenuAndRoutesOptions,
} from '@vben/types';
import { generateMenusAndRoutes } from '@vben/access';
import { generateAccessible } from '@vben/access';
import { preferences } from '@vben-core/preferences';
import { message } from 'ant-design-vue';
@ -13,7 +15,7 @@ import { $t } from '#/locales';
const forbiddenComponent = () =>
import('#/views/_essential/fallback/forbidden.vue');
async function generateAccess(options: GeneratorMenuAndRoutesOptions) {
async function generateAccess(options: GenerateMenuAndRoutesOptions) {
const pageMap: ComponentRecordType = import.meta.glob('../views/**/*.vue');
const layoutMap: ComponentRecordType = {
@ -21,7 +23,7 @@ async function generateAccess(options: GeneratorMenuAndRoutesOptions) {
IFrameView,
};
return await generateMenusAndRoutes(preferences.app.accessMode, {
return await generateAccessible(preferences.app.accessMode, {
...options,
fetchMenuListAsync: async () => {
message.loading({

View File

@ -3,8 +3,8 @@
"demos": {
"title": "Demos",
"access": {
"frontendControl": "Frontend Control",
"backendControl": "Backend Control",
"frontendPermissions": "Frontend Permissions",
"backendPermissions": "Backend Permissions",
"pageAccess": "Page Access",
"buttonControl": "Button Control",
"menuVisible403": "Menu Visible(403)",

View File

@ -3,8 +3,8 @@
"demos": {
"title": "演示",
"access": {
"frontendControl": "前端控制",
"backendControl": "后端控制",
"frontendPermissions": "前端权限",
"backendPermissions": "后端权限",
"pageAccess": "页面访问",
"buttonControl": "按钮控制",
"menuVisible403": "菜单可见(403)",

View File

@ -19,7 +19,7 @@ const routes: RouteRecordRaw[] = [
{
meta: {
icon: 'mdi:shield-key-outline',
title: $t('page.demos.access.frontendControl'),
title: $t('page.demos.access.frontendPermissions'),
},
name: 'Access',
path: 'access',

View File

@ -1,5 +1,5 @@
<script lang="ts" setup>
import type { TabsItem } from '@vben/types';
import type { TabsOption } from '@vben/types';
import type { AnalysisOverviewItem } from '@vben/universal-ui';
import {
@ -53,7 +53,7 @@ const overviewItems: AnalysisOverviewItem[] = [
},
];
const chartTabs: TabsItem[] = [
const chartTabs: TabsOption[] = [
{
label: '流量趋势',
value: 'trends',

View File

@ -3,7 +3,7 @@ import type { LoginAndRegisterParams } from '@vben/universal-ui';
import { useRouter } from 'vue-router';
import { CodeAccess, useAccess } from '@vben/access';
import { AccessControl, useAccess } from '@vben/access';
import { Button } from 'ant-design-vue';
@ -59,9 +59,9 @@ async function changeAccount(role: string) {
<div class="card-box mt-5 p-5 font-semibold">
<div class="mb-3">
<span class="text-lg">当前账号:</span>
<span class="text-primary mx-4">
{{ accessStore.userRoles }}
<span class="text-lg">当前角色:</span>
<span class="text-primary mx-4 text-lg">
{{ accessStore.userRoles?.[0] }}
</span>
</div>
@ -82,21 +82,40 @@ async function changeAccount(role: string) {
</div>
<div class="card-box mt-5 p-5 font-semibold">
<div class="mb-3 text-lg">组件形式控制</div>
<CodeAccess :value="['AC_100100']">
<div class="mb-3 text-lg">组件形式控制 - 权限码方式</div>
<AccessControl :value="['AC_100100']" type="code">
<Button class="mr-4"> Super 账号可见 ["AC_1000001"] </Button>
</CodeAccess>
<CodeAccess :value="['AC_100030']">
</AccessControl>
<AccessControl :value="['AC_100030']" type="code">
<Button class="mr-4"> Admin 账号可见 ["AC_100010"] </Button>
</CodeAccess>
<CodeAccess :value="['AC_1000001']">
</AccessControl>
<AccessControl :value="['AC_1000001']" type="code">
<Button class="mr-4"> User 账号可见 ["AC_1000001"] </Button>
</CodeAccess>
<CodeAccess :value="['AC_100100', 'AC_100010']">
</AccessControl>
<AccessControl :value="['AC_100100', 'AC_100010']" type="code">
<Button class="mr-4">
Super & Admin 账号可见 ["AC_100100","AC_1000001"]
</Button>
</CodeAccess>
</AccessControl>
</div>
<div
v-if="accessMode === 'frontend'"
class="card-box mt-5 p-5 font-semibold"
>
<div class="mb-3 text-lg">组件形式控制 - 用户角色方式</div>
<AccessControl :value="['super']">
<Button class="mr-4"> Super 角色可见 </Button>
</AccessControl>
<AccessControl :value="['admin']">
<Button class="mr-4"> Admin 角色可见 </Button>
</AccessControl>
<AccessControl :value="['user']">
<Button class="mr-4"> User 角色可见 </Button>
</AccessControl>
<AccessControl :value="['super', 'admin']">
<Button class="mr-4"> Super & Admin 角色可见 </Button>
</AccessControl>
</div>
<div class="card-box mt-5 p-5 font-semibold">

View File

@ -69,7 +69,9 @@ async function handleToggleAccessMode() {
<div class="card-box mt-5 p-5 font-semibold">
<span class="text-lg">当前权限模式:</span>
<span class="text-primary mx-4">{{ accessMode }}</span>
<span class="text-primary mx-4">{{
accessMode === 'frontend' ? '前端权限控制' : '后端权限控制'
}}</span>
<Button type="primary" @click="handleToggleAccessMode">
切换为{{ accessMode === 'frontend' ? '后端' : '前端' }}权限模式
</Button>
@ -77,8 +79,8 @@ async function handleToggleAccessMode() {
<div class="card-box mt-5 p-5 font-semibold">
<div class="mb-3">
<span class="text-lg">当前账号:</span>
<span class="text-primary mx-4">
{{ accessStore.userRoles }}
<span class="text-primary mx-4 text-lg">
{{ accessStore.userRoles?.[0] }}
</span>
</div>

View File

@ -1,5 +1,5 @@
<script lang="ts" setup>
import type { LoginExpiredModeType } from '@vben-core/preferences';
import type { LoginExpiredModeType } from '@vben/types';
import { preferences, updatePreferences } from '@vben-core/preferences';

View File

@ -88,12 +88,6 @@
"clsx": "^2.1.1",
"vue": "^3.4.31"
},
"peerDependencyRules": {
"allowedVersions": {
"eslint": "*",
" @typescript-eslint/eslint-plugin": "*"
}
},
"neverBuiltDependencies": [
"canvas",
"node-gyp",

View File

@ -36,6 +36,7 @@
}
},
"dependencies": {
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"vue-router": "^4.4.0"
}

View File

@ -1,4 +1,4 @@
import type { ExRouteRecordRaw, MenuRecordRaw } from '@vben/types';
import type { ExRouteRecordRaw, MenuRecordRaw } from '@vben-core/typings';
import type { RouteRecordRaw, Router } from 'vue-router';
import { mapTree } from '@vben-core/toolkit';

View File

@ -1,19 +1,17 @@
import type {
ComponentRecordType,
RouteRecordStringComponent,
} from '@vben/types';
import type { RouteRecordRaw } from 'vue-router';
import type { GeneratorMenuAndRoutesOptions } from '../types';
import { $t } from '@vben-core/locales';
import { mapTree } from '@vben-core/toolkit';
import {
ComponentRecordType,
GenerateMenuAndRoutesOptions,
RouteRecordStringComponent,
} from '@vben-core/typings';
/**
* -
*/
async function generateRoutesByBackend(
options: GeneratorMenuAndRoutesOptions,
options: GenerateMenuAndRoutesOptions,
): Promise<RouteRecordRaw[]> {
const { fetchMenuListAsync, layoutMap = {}, pageMap = {} } = options;
@ -65,11 +63,6 @@ function convertRoutes(
];
}
// 国际化转化
if (route.meta?.title) {
route.meta.title = $t(route.meta.title);
}
return route;
});
}
@ -83,6 +76,7 @@ function normalizeViewPath(path: string): string {
? normalizedPath
: `/${normalizedPath}`;
// TODO: 这里耦合了vben-admin的目录结构
return viewPath.replace(/^\/views/, '');
}
export { generateRoutesByBackend };

View File

@ -1,6 +1,7 @@
import type { RouteRecordRaw } from 'vue-router';
import { filterTree, mapTree } from '@vben-core/toolkit';
/**
* -
*/

View File

@ -1,2 +1,5 @@
export * from './find-menu-by-path';
export * from './generate-menus';
export * from './generate-routes-backend';
export * from './generate-routes-frontend';
export * from './merge-route-modules';

View File

@ -29,8 +29,6 @@
}
},
"dependencies": {
"@vben-core/cache": "workspace:*",
"@vben-core/colorful": "workspace:*",
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.11.0",

View File

@ -1,6 +1,7 @@
import type { BuiltinThemeType } from '@vben-core/typings';
import type { SupportedLanguagesType } from './types';
import type {
BuiltinThemeType,
SupportedLanguagesType,
} from '@vben-core/typings';
interface Language {
key: SupportedLanguagesType;

View File

@ -5,17 +5,6 @@ import { PreferenceManager, isDarkTheme } from './preferences';
describe('preferences', () => {
let preferenceManager: PreferenceManager;
vi.mock('@vben-core/cache', () => {
return {
StorageManager: vi.fn().mockImplementation(() => {
return {
getItem: vi.fn(),
removeItem: vi.fn(),
setItem: vi.fn(),
};
}),
};
});
// 模拟 window.matchMedia 方法
vi.stubGlobal(

View File

@ -4,9 +4,12 @@ import type { Preferences } from './types';
import { markRaw, reactive, readonly, watch } from 'vue';
import { StorageManager } from '@vben-core/cache';
import { generatorColorVariables } from '@vben-core/colorful';
import { merge, updateCSSVariables } from '@vben-core/toolkit';
import {
StorageManager,
generatorColorVariables,
merge,
updateCSSVariables,
} from '@vben-core/toolkit';
import {
breakpointsTailwind,

View File

@ -1,28 +1,18 @@
import type {
AccessModeType,
AuthPageLayoutType,
BreadcrumbStyleType,
BuiltinThemeType,
ContentCompactType,
LayoutHeaderModeType,
LayoutType,
LoginExpiredModeType,
NavigationStyleType,
PageTransitionType,
SupportedLanguagesType,
ThemeModeType,
} from '@vben-core/typings';
/**
*
* 'modal' | 'page'
*/
type LoginExpiredModeType = 'modal' | 'page';
type BreadcrumbStyleType = 'background' | 'normal';
type AccessModeType = 'allow-all' | 'backend' | 'frontend';
type NavigationStyleType = 'plain' | 'rounded';
type PageTransitionType = 'fade' | 'fade-down' | 'fade-slide' | 'fade-up';
type AuthPageLayoutType = 'panel-center' | 'panel-left' | 'panel-right';
interface AppPreferences {
/** 权限模式 */
accessMode: AccessModeType;
@ -236,28 +226,17 @@ interface Preferences {
type PreferencesKeys = keyof Preferences;
export type {
AccessModeType,
AppPreferences,
AuthPageLayoutType,
BreadcrumbPreferences,
BreadcrumbStyleType,
ContentCompactType,
FooterPreferences,
HeaderPreferences,
LayoutHeaderModeType,
LayoutType,
LoginExpiredModeType,
LogoPreferences,
NavigationPreferences,
NavigationStyleType,
PageTransitionType,
Preferences,
PreferencesKeys,
ShortcutKeyPreferences,
SidebarPreferences,
SupportedLanguagesType,
TabbarPreferences,
ThemeModeType,
ThemePreferences,
TransitionPreferences,
WidgetPreferences,

View File

@ -1,7 +0,0 @@
import { defineBuildConfig } from 'unbuild';
export default defineBuildConfig({
clean: true,
declaration: true,
entries: ['src/index'],
});

View File

@ -1,40 +0,0 @@
{
"name": "@vben-core/cache",
"version": "5.0.0",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {
"type": "git",
"url": "git+https://github.com/vbenjs/vue-vben-admin.git",
"directory": "packages/@vben-core/shared/cache"
},
"license": "MIT",
"type": "module",
"scripts": {
"build": "pnpm unbuild",
"stub": "pnpm unbuild --stub"
},
"files": [
"dist"
],
"sideEffects": false,
"main": "./dist/index.mjs",
"module": "./dist/index.mjs",
"exports": {
".": {
"types": "./src/index.ts",
"development": "./src/index.ts",
"default": "./dist/index.mjs"
}
},
"publishConfig": {
"exports": {
".": {
"types": "./dist/index.d.ts",
"default": "./dist/index.mjs"
}
}
},
"dependencies": {},
"devDependencies": {}
}

View File

@ -1,6 +0,0 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "@vben/tsconfig/library.json",
"include": ["src"],
"exclude": ["node_modules"]
}

View File

@ -1,7 +0,0 @@
import { defineBuildConfig } from 'unbuild';
export default defineBuildConfig({
clean: true,
declaration: true,
entries: ['src/index'],
});

View File

@ -1,42 +0,0 @@
{
"name": "@vben-core/colorful",
"version": "5.0.0",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {
"type": "git",
"url": "git+https://github.com/vbenjs/vue-vben-admin.git",
"directory": "packages/@vben-core/shared/colorful"
},
"license": "MIT",
"type": "module",
"scripts": {
"build": "pnpm unbuild",
"stub": "pnpm unbuild --stub"
},
"files": [
"dist"
],
"sideEffects": false,
"main": "./dist/index.mjs",
"module": "./dist/index.mjs",
"exports": {
".": {
"types": "./src/index.ts",
"development": "./src/index.ts",
"default": "./dist/index.mjs"
}
},
"publishConfig": {
"exports": {
".": {
"types": "./dist/index.d.ts",
"default": "./dist/index.mjs"
}
}
},
"dependencies": {
"@ant-design/colors": "^7.1.0",
"@ctrl/tinycolor": "^4.1.0"
}
}

View File

@ -1,6 +0,0 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "@vben/tsconfig/library.json",
"include": ["src"],
"exclude": ["node_modules"]
}

View File

@ -1,3 +0,0 @@
# @vben-core/design-tokens
用于维护全局所有的 css 变量,它由 vite 插件在全局注入,不需要手动引入

View File

@ -1,39 +0,0 @@
{
"name": "@vben-core/design-tokens",
"version": "5.0.0",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {
"type": "git",
"url": "git+https://github.com/vbenjs/vue-vben-admin.git",
"directory": "packages/@vben-core/shared/design-tokens"
},
"license": "MIT",
"type": "module",
"scripts": {
"build": "pnpm vite build",
"dts": "vue-tsc --declaration --emitDeclarationOnly --declarationDir dist",
"prepublishOnly": "npm run build"
},
"files": [
"dist"
],
"sideEffects": [
"**/*.css"
],
"main": "./dist/index.css",
"exports": {
".": {
"types": "./src/index.ts",
"development": "./src/index.ts",
"default": "./dist/index.css"
}
},
"publishConfig": {
"exports": {
".": {
"default": "./dist/index.mjs"
}
}
}
}

View File

@ -1,6 +0,0 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "@vben/tsconfig/library.json",
"include": ["src"],
"exclude": ["node_modules"]
}

View File

@ -1,3 +0,0 @@
import { defineConfig } from '@vben/vite-config';
export default defineConfig();

View File

@ -1,5 +1,6 @@
import './scss/index.scss';
import './css/tailwind.css';
import './css/nprogress.css';
import './design-tokens';
export {};

View File

@ -36,6 +36,8 @@
}
},
"dependencies": {
"@ant-design/colors": "^7.1.0",
"@ctrl/tinycolor": "^4.1.0",
"@vue/shared": "^3.4.31",
"clsx": "^2.1.1",
"defu": "^6.1.4",

View File

@ -1,6 +1,6 @@
import { describe, expect, it } from 'vitest';
import { convertToHsl, convertToHslCssVar, isValidColor } from './utils';
import { convertToHsl, convertToHslCssVar, isValidColor } from './convert';
describe('color conversion functions', () => {
it('should correctly convert color to HSL format', () => {

View File

@ -1,6 +1,6 @@
import { generate } from '@ant-design/colors';
import { convertToHslCssVar } from './utils';
import { convertToHslCssVar } from './convert';
export * from '@ant-design/colors';

View File

@ -1,2 +1,2 @@
export * from './convert';
export * from './generator';
export * from './utils';

View File

@ -1,4 +1,6 @@
export * from './cache';
export * from './cn';
export * from './colorful';
export * from './diff';
export * from './dom';
export * from './inference';

View File

@ -33,11 +33,33 @@ type ContentCompactType = 'compact' | 'wide';
type LayoutHeaderModeType = 'auto' | 'auto-scroll' | 'fixed' | 'static';
/**
*
* 'modal' | 'page'
*/
type LoginExpiredModeType = 'modal' | 'page';
type BreadcrumbStyleType = 'background' | 'normal';
type AccessModeType = 'allow-all' | 'backend' | 'frontend';
type NavigationStyleType = 'plain' | 'rounded';
type PageTransitionType = 'fade' | 'fade-down' | 'fade-slide' | 'fade-up';
type AuthPageLayoutType = 'panel-center' | 'panel-left' | 'panel-right';
export type {
AccessModeType,
AuthPageLayoutType,
BreadcrumbStyleType,
BuiltinThemeType,
ContentCompactType,
LayoutHeaderModeType,
LayoutType,
LoginExpiredModeType,
NavigationStyleType,
PageTransitionType,
SupportedLanguagesType,
ThemeModeType,
};

View File

@ -0,0 +1,33 @@
interface BasicOption {
label: string;
value: string;
}
interface SelectOption extends BasicOption {}
interface TabsOption extends BasicOption {}
interface BasicUserInfo {
/**
*
*/
avatar: string;
/**
*
*/
realName: string;
/**
*
*/
roles?: string[];
/**
* id
*/
userId: string;
/**
*
*/
username: string;
}
export type { BasicOption, BasicUserInfo, SelectOption, TabsOption };

View File

@ -1,4 +1,5 @@
export type * from './app';
export * from './basic';
export type * from './helper';
export type * from './menu-record';
export type * from './tabs';

View File

@ -1,3 +1,7 @@
import type { RouteRecordRaw, Router } from 'vue-router';
import type { Component } from 'vue';
interface RouteMeta {
/**
*
@ -91,4 +95,27 @@ interface RouteMeta {
title: string;
}
export type { RouteMeta };
// 定义递归类型以将 RouteRecordRaw 的 component 属性更改为 string
type RouteRecordStringComponent<T = string> = {
children?: RouteRecordStringComponent<T>[];
component: T;
} & Omit<RouteRecordRaw, 'children' | 'component'>;
type ComponentRecordType = Record<string, () => Promise<Component>>;
interface GenerateMenuAndRoutesOptions {
fetchMenuListAsync?: () => Promise<RouteRecordStringComponent[]>;
forbiddenComponent?: RouteRecordRaw['component'];
layoutMap?: ComponentRecordType;
pageMap?: ComponentRecordType;
roles?: string[];
router: Router;
routes: RouteRecordRaw[];
}
export type {
ComponentRecordType,
GenerateMenuAndRoutesOptions,
RouteMeta,
RouteRecordStringComponent,
};

View File

@ -43,7 +43,6 @@
},
"dependencies": {
"@radix-icons/vue": "^1.0.0",
"@vben-core/colorful": "workspace:*",
"@vben-core/iconify": "workspace:*",
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",

View File

@ -3,7 +3,7 @@ import type { MenuRecordBadgeRaw } from '@vben-core/typings';
import { computed } from 'vue';
import { isValidColor } from '@vben-core/colorful';
import { isValidColor } from '@vben-core/toolkit';
import BadgeDot from './menu-badge-dot.vue';

View File

@ -37,14 +37,11 @@
}
},
"dependencies": {
"@vben-core/locales": "workspace:*",
"@vben-core/helpers": "workspace:*",
"@vben-core/preferences": "workspace:*",
"@vben-core/stores": "workspace:*",
"@vben-core/toolkit": "workspace:*",
"vue": "^3.4.31",
"vue-router": "^4.4.0"
},
"devDependencies": {
"@vben/types": "workspace:*"
"@vben-core/typings": "workspace:*",
"vue": "^3.4.31"
}
}

View File

@ -0,0 +1,43 @@
<!--
Access control component for fine-grained access control.
-->
<script lang="ts" setup>
import { computed } from 'vue';
import { useAccess } from './use-access';
interface Props {
/**
* 通过什么方式来控制组件如果是 role则传入角色如果是 code则传入权限码
* @default 'role'
*/
type?: 'code' | 'role';
/**
* Specified codes is visible
* @default []
*/
value?: string[];
}
defineOptions({
name: 'AccessControl',
});
const props = withDefaults(defineProps<Props>(), {
type: 'role',
value: () => [],
});
const { hasAuthByCodes, hasAuthByRoles } = useAccess();
const hasAuth = computed(() => {
const { type, value } = props;
return type === 'role' ? hasAuthByRoles(value) : hasAuthByCodes(value);
});
</script>
<template>
<slot v-if="!value"></slot>
<slot v-else-if="hasAuth"></slot>
</template>

View File

@ -1,29 +0,0 @@
<!--
Access control component for fine-grained access control.
-->
<script lang="ts" setup>
import { useAccess } from './use-access';
interface Props {
/**
* Specified codes is visible
* @default []
*/
value?: string[];
}
defineOptions({
name: 'CodeAccess',
});
withDefaults(defineProps<Props>(), {
value: () => [],
});
const { hasAuthByCodes } = useAccess();
</script>
<template>
<slot v-if="!value"></slot>
<slot v-else-if="hasAuthByCodes(value)"></slot>
</template>

View File

@ -1,17 +1,18 @@
import type { AccessModeType } from '@vben-core/preferences';
import type { RouteRecordRaw } from 'vue-router';
import type { GeneratorMenuAndRoutesOptions } from '../types';
import type {
AccessModeType,
GenerateMenuAndRoutesOptions,
} from '@vben-core/typings';
import {
generateMenus,
generateRoutesByBackend,
generateRoutesByFrontend,
} from '@vben-core/helpers';
import { cloneDepp } from '@vben-core/toolkit';
import { generateMenus } from './generate-menus';
import { generateRoutesByBackend } from './generate-routes-backend';
import { generateRoutesByFrontend } from './generate-routes-frontend';
async function generateMenusAndRoutes(
async function generateAccessible(
mode: AccessModeType,
options: GeneratorMenuAndRoutesOptions,
options: GenerateMenuAndRoutesOptions,
) {
const { router } = options;
@ -25,7 +26,7 @@ async function generateMenusAndRoutes(
});
// 生成菜单
const accessibleMenus = await generateMenus1(mode, accessibleRoutes, options);
const accessibleMenus = await generateMenus(accessibleRoutes, options.router);
return { accessibleMenus, accessibleRoutes };
}
@ -36,7 +37,7 @@ async function generateMenusAndRoutes(
*/
async function generateRoutes(
mode: AccessModeType,
options: GeneratorMenuAndRoutesOptions,
options: GenerateMenuAndRoutesOptions,
) {
const { forbiddenComponent, roles, routes } = options;
@ -61,22 +62,4 @@ async function generateRoutes(
}
}
async function generateMenus1(
mode: AccessModeType,
routes: RouteRecordRaw[],
options: GeneratorMenuAndRoutesOptions,
) {
const { router } = options;
switch (mode) {
case 'allow-all':
case 'frontend':
case 'backend': {
return await generateMenus(routes, router);
}
default: {
return [];
}
}
}
export { generateMenusAndRoutes };
export { generateAccessible };

View File

@ -1,5 +1,3 @@
export { default as CodeAccess } from './code-access.vue';
export * from './generate-menu-and-routes';
export { default as RoleAccess } from './role-access.vue';
export type * from './types';
export { default as AccessControl } from './access-control.vue';
export * from './generate-accessible';
export * from './use-access';

View File

@ -1,29 +0,0 @@
<!--
Access control component for fine-grained access control.
-->
<script lang="ts" setup>
import { useAccess } from './use-access';
interface Props {
/**
* Specified role is visible
* @default []
*/
value?: string[];
}
defineOptions({
name: 'RoleAccess',
});
withDefaults(defineProps<Props>(), {
value: undefined,
});
const { hasAuthByRoles } = useAccess();
</script>
<template>
<slot v-if="!value"></slot>
<slot v-else-if="hasAuthByRoles(value)"></slot>
</template>

View File

@ -1,17 +0,0 @@
import type {
ComponentRecordType,
RouteRecordStringComponent,
} from '@vben/types';
import type { RouteRecordRaw, Router } from 'vue-router';
interface GeneratorMenuAndRoutesOptions {
fetchMenuListAsync?: () => Promise<RouteRecordStringComponent[]>;
forbiddenComponent?: RouteRecordRaw['component'];
layoutMap?: ComponentRecordType;
pageMap?: ComponentRecordType;
roles?: string[];
router: Router;
routes: RouteRecordRaw[];
}
export type { GeneratorMenuAndRoutesOptions };

View File

@ -1,9 +1,6 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "@vben/tsconfig/web.json",
"compilerOptions": {
"types": ["@vben/types/global"]
},
"include": ["src"],
"exclude": ["node_modules"]
}

View File

@ -37,7 +37,6 @@
}
},
"dependencies": {
"@vben-core/colorful": "workspace:*",
"@vben-core/helpers": "workspace:*",
"@vben-core/iconify": "workspace:*",
"@vben-core/layout-ui": "workspace:*",
@ -48,12 +47,9 @@
"@vben-core/stores": "workspace:*",
"@vben-core/tabs-ui": "workspace:*",
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.11.0",
"vue": "^3.4.31",
"vue-router": "^4.4.0"
},
"devDependencies": {
"@vben-core/typings": "workspace:*",
"@vben/types": "workspace:*"
}
}

View File

@ -126,6 +126,19 @@ function useTabs() {
disabled || !isCurrentTab || tabs.length - affixTabs.length <= 1;
const menus: IContextMenuItem[] = [
{
handler: async () => {
if (!contentIsMaximize.value) {
await router.push(tab.fullPath);
}
updateContentScreen(!contentIsMaximize.value);
},
icon: contentIsMaximize.value ? IcRoundFitScreen : IcTwotoneFitScreen,
key: contentIsMaximize.value ? 'restore-maximize' : 'maximize',
text: contentIsMaximize.value
? $t('preferences.tabbar.contextMenu.restoreMaximize')
: $t('preferences.tabbar.contextMenu.maximize'),
},
{
disabled: !isCurrentTab,
handler: async () => {
@ -166,22 +179,10 @@ function useTabs() {
},
icon: IcRoundTableView,
key: 'open-in-new-window',
separator: true,
text: $t('preferences.tabbar.contextMenu.openInNewWindow'),
},
{
handler: async () => {
if (!contentIsMaximize.value) {
await router.push(tab.fullPath);
}
updateContentScreen(!contentIsMaximize.value);
},
icon: contentIsMaximize.value ? IcRoundFitScreen : IcTwotoneFitScreen,
key: contentIsMaximize.value ? 'restore-maximize' : 'maximize',
separator: true,
text: contentIsMaximize.value
? $t('preferences.tabbar.contextMenu.restoreMaximize')
: $t('preferences.tabbar.contextMenu.maximize'),
},
{
disabled: closeLeftDisabled,
handler: async () => {

View File

@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { BreadcrumbStyleType } from '@vben-core/preferences';
import type { IBreadcrumb } from '@vben-core/shadcn-ui';
import type { BreadcrumbStyleType } from '@vben-core/typings';
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { BuiltinThemeType } from '@vben/types';
import type { BuiltinThemeType } from '@vben-core/typings';
import { IcRoundColorLens } from '@vben-core/iconify';
import {

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { MenuRecordRaw } from '@vben/types';
import type { MenuRecordRaw } from '@vben-core/typings';
import { onMounted, onUnmounted, ref, watch } from 'vue';

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { MenuRecordRaw } from '@vben/types';
import type { MenuRecordRaw } from '@vben-core/typings';
import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
import { useRouter } from 'vue-router';

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { SupportedLanguagesType } from '@vben/types';
import type { SupportedLanguagesType } from '@vben-core/typings';
import { IcBaselineLanguage } from '@vben-core/iconify';
import { loadLocaleMessages } from '@vben-core/locales';

View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import type { AuthPageLayoutType } from '@vben-core/preferences';
import type { VbenDropdownMenuItem } from '@vben-core/shadcn-ui';
import type { AuthPageLayoutType } from '@vben-core/typings';
import { computed } from 'vue';

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { SelectListItem } from '@vben/types';
import type { SelectOption } from '@vben-core/typings';
import { $t } from '@vben-core/locales';
import { SUPPORT_LANGUAGES } from '@vben-core/preferences';
@ -14,7 +14,7 @@ defineOptions({
const appLocale = defineModel<string>('appLocale');
const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
const localeItems: SelectListItem[] = SUPPORT_LANGUAGES.map((item) => ({
const localeItems: SelectOption[] = SUPPORT_LANGUAGES.map((item) => ({
label: item.text,
value: item.key,
}));

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { SelectListItem } from '@vben/types';
import type { SelectOption } from '@vben-core/typings';
import { useSlots } from 'vue';
@ -13,7 +13,7 @@ defineOptions({
withDefaults(
defineProps<{
disabled?: boolean;
items?: SelectListItem[];
items?: SelectOption[];
placeholder?: string;
}>(),
{

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { SelectListItem } from '@vben/types';
import type { SelectOption } from '@vben-core/typings';
import { computed } from 'vue';
@ -20,7 +20,7 @@ const breadcrumbStyleType = defineModel<string>('breadcrumbStyleType');
const breadcrumbShowHome = defineModel<boolean>('breadcrumbShowHome');
const breadcrumbHideOnlyOne = defineModel<boolean>('breadcrumbHideOnlyOne');
const typeItems: SelectListItem[] = [
const typeItems: SelectOption[] = [
{ label: $t('preferences.normal'), value: 'normal' },
{ label: $t('preferences.breadcrumb.background'), value: 'background' },
];

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { LayoutHeaderModeType, SelectListItem } from '@vben/types';
import type { LayoutHeaderModeType, SelectOption } from '@vben-core/typings';
import { $t } from '@vben-core/locales';
@ -15,7 +15,7 @@ defineProps<{ disabled: boolean }>();
const headerEnable = defineModel<boolean>('headerEnable');
const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
const localeItems: SelectListItem[] = [
const localeItems: SelectOption[] = [
{
label: $t('preferences.header.modeStatic'),
value: 'static',

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { LayoutType } from '@vben/types';
import type { LayoutType } from '@vben-core/typings';
import { type Component, computed } from 'vue';

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { SelectListItem } from '@vben/types';
import type { SelectOption } from '@vben-core/typings';
import { $t } from '@vben-core/locales';
@ -16,7 +16,7 @@ const navigationStyleType = defineModel<string>('navigationStyleType');
const navigationSplit = defineModel<boolean>('navigationSplit');
const navigationAccordion = defineModel<boolean>('navigationAccordion');
const stylesItems: SelectListItem[] = [
const stylesItems: SelectOption[] = [
{ label: $t('preferences.rounded'), value: 'rounded' },
{ label: $t('preferences.plain'), value: 'plain' },
];

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { SelectListItem } from '@vben/types';
import type { SelectOption } from '@vben-core/typings';
import { useSlots } from 'vue';
@ -20,7 +20,7 @@ defineOptions({
withDefaults(
defineProps<{
disabled?: boolean;
items?: SelectListItem[];
items?: SelectOption[];
placeholder?: string;
}>(),
{

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { SelectListItem } from '@vben/types';
import type { SelectOption } from '@vben-core/typings';
import { useSlots } from 'vue';
@ -20,7 +20,7 @@ defineOptions({
withDefaults(
defineProps<{
disabled?: boolean;
items?: SelectListItem[];
items?: SelectOption[];
placeholder?: string;
}>(),
{

View File

@ -1,15 +1,15 @@
<script setup lang="ts">
import type { BuiltinThemeType } from '@vben/types';
import type { BuiltinThemeType } from '@vben-core/typings';
import { computed, ref } from 'vue';
import { TinyColor, convertToHsl } from '@vben-core/colorful';
import { MdiEditBoxOutline } from '@vben-core/iconify';
import { $t } from '@vben-core/locales';
import {
BUILT_IN_THEME_PRESETS,
type BuiltinThemePreset,
} from '@vben-core/preferences';
import { TinyColor, convertToHsl } from '@vben-core/toolkit';
defineOptions({
name: 'PreferenceBuiltinTheme',

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { ThemeModeType } from '@vben-core/preferences';
import type { ThemeModeType } from '@vben-core/typings';
import type { Component } from 'vue';

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { SelectListItem } from '@vben/types';
import type { SelectOption } from '@vben-core/typings';
import { ToggleGroup, ToggleGroupItem } from '@vben-core/shadcn-ui';
@ -7,7 +7,7 @@ defineOptions({
name: 'PreferenceToggleItem',
});
withDefaults(defineProps<{ disabled?: boolean; items: SelectListItem[] }>(), {
withDefaults(defineProps<{ disabled?: boolean; items: SelectOption[] }>(), {
disabled: false,
items: () => [],
});

View File

@ -1,17 +1,15 @@
<script setup lang="ts">
import type { SegmentedItem } from '@vben-core/shadcn-ui';
import type {
BreadcrumbStyleType,
BuiltinThemeType,
ContentCompactType,
LayoutHeaderModeType,
LayoutType,
NavigationStyleType,
SupportedLanguagesType,
ThemeModeType,
} from '@vben/types';
import type {
BreadcrumbStyleType,
NavigationStyleType,
} from '@vben-core/preferences';
import type { SegmentedItem } from '@vben-core/shadcn-ui';
} from '@vben-core/typings';
import { computed, ref } from 'vue';

View File

@ -1,6 +1,7 @@
<script lang="ts" setup>
import { computed } from 'vue';
import { loadLocaleMessages } from '@vben-core/locales';
import { preferences, updatePreferences } from '@vben-core/preferences';
import { capitalizeFirstLetter } from '@vben-core/toolkit';
@ -29,8 +30,14 @@ const listen = computed(() => {
for (const [key, value] of Object.entries(preferences)) {
if (typeof value === 'object') {
for (const subKey of Object.keys(value)) {
result[`update:${key}${capitalizeFirstLetter(subKey)}`] = (val: any) =>
result[`update:${key}${capitalizeFirstLetter(subKey)}`] = (
val: any,
) => {
updatePreferences({ [key]: { [subKey]: val } });
if (key === 'app' && subKey === 'locale') {
loadLocaleMessages(val);
}
};
}
} else {
result[key] = value;

View File

@ -1,4 +1,6 @@
<script lang="ts" setup>
import type { ThemeModeType } from '@vben-core/typings';
import {
IcRoundMotionPhotosAuto,
IcRoundWbSunny,
@ -6,7 +8,6 @@ import {
} from '@vben-core/iconify';
import { $t } from '@vben-core/locales';
import {
type ThemeModeType,
preferences,
updatePreferences,
usePreferences,

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { AnyFunction } from '@vben/types';
import type { AnyFunction } from '@vben-core/typings';
import type { Component } from 'vue';
import { computed, ref } from 'vue';

View File

@ -1,12 +1,12 @@
<script setup lang="ts">
import type { TabsItem } from '@vben/types';
import type { TabsOption } from '@vben/types';
import { computed } from 'vue';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@vben-core/shadcn-ui';
interface Props {
tabs: TabsItem[];
tabs: TabsOption[];
}
defineOptions({

View File

@ -42,12 +42,7 @@
}
}
},
"peerDependencies": {
"@vben-core/design": "workspace:*",
"@vben-core/design-tokens": "workspace:*"
},
"dependencies": {
"@vben-core/design": "workspace:*",
"@vben-core/design-tokens": "workspace:*"
"@vben-core/design": "workspace:*"
}
}

View File

@ -1,2 +1 @@
import '@vben-core/design';
import '@vben-core/design-tokens';

View File

@ -1,4 +1,2 @@
export type * from './router';
export type * from './ui';
export type * from './user';
export type * from '@vben-core/typings';

View File

@ -1,13 +0,0 @@
import type { RouteRecordRaw } from 'vue-router';
import type { Component } from 'vue';
// 定义递归类型以将 RouteRecordRaw 的 component 属性更改为 string
type RouteRecordStringComponent<T = string> = {
children?: RouteRecordStringComponent<T>[];
component: T;
} & Omit<RouteRecordRaw, 'children' | 'component'>;
type ComponentRecordType = Record<string, () => Promise<Component>>;
export type { ComponentRecordType, RouteRecordStringComponent };

View File

@ -1,11 +0,0 @@
interface SelectListItem {
label: string;
value: string;
}
interface TabsItem {
label: string;
value: string;
}
export type { SelectListItem, TabsItem };

View File

@ -1,9 +1,7 @@
import type { BasicUserInfo } from '@vben-core/typings';
/** 用户信息 */
interface UserInfo {
/**
*
*/
avatar: string;
interface UserInfo extends BasicUserInfo {
/**
*
*/
@ -12,26 +10,11 @@ interface UserInfo {
*
*/
homePath: string;
/**
*
*/
realName: string;
/**
*
*/
roles: string[];
/**
* accessToken
*/
token: string;
/**
* id
*/
userId: string;
/**
*
*/
username: string;
}
export type { UserInfo };

View File

@ -559,6 +559,9 @@ importers:
packages/@core/forward/helpers:
dependencies:
'@vben-core/toolkit':
specifier: workspace:*
version: link:../../shared/toolkit
'@vben-core/typings':
specifier: workspace:*
version: link:../../shared/typings
@ -568,12 +571,6 @@ importers:
packages/@core/forward/preferences:
dependencies:
'@vben-core/cache':
specifier: workspace:*
version: link:../../shared/cache
'@vben-core/colorful':
specifier: workspace:*
version: link:../../shared/colorful
'@vben-core/toolkit':
specifier: workspace:*
version: link:../../shared/toolkit
@ -642,25 +639,12 @@ importers:
specifier: ^9.13.1
version: 9.13.1(vue@3.4.31(typescript@5.5.3))
packages/@core/shared/cache: {}
packages/@core/shared/colorful:
dependencies:
'@ant-design/colors':
specifier: ^7.1.0
version: 7.1.0
'@ctrl/tinycolor':
specifier: ^4.1.0
version: 4.1.0
packages/@core/shared/design:
dependencies:
modern-normalize:
specifier: ^2.0.0
version: 2.0.0
packages/@core/shared/design-tokens: {}
packages/@core/shared/iconify:
dependencies:
'@iconify/vue':
@ -672,6 +656,12 @@ importers:
packages/@core/shared/toolkit:
dependencies:
'@ant-design/colors':
specifier: ^7.1.0
version: 7.1.0
'@ctrl/tinycolor':
specifier: ^4.1.0
version: 4.1.0
'@vue/shared':
specifier: ^3.4.31
version: 3.4.31
@ -757,9 +747,6 @@ importers:
'@radix-icons/vue':
specifier: ^1.0.0
version: 1.0.0(vue@3.4.31(typescript@5.5.3))
'@vben-core/colorful':
specifier: workspace:*
version: link:../../shared/colorful
'@vben-core/iconify':
specifier: workspace:*
version: link:../../shared/iconify
@ -808,9 +795,9 @@ importers:
packages/business/access:
dependencies:
'@vben-core/locales':
'@vben-core/helpers':
specifier: workspace:*
version: link:../../@core/locales
version: link:../../@core/forward/helpers
'@vben-core/preferences':
specifier: workspace:*
version: link:../../@core/forward/preferences
@ -820,16 +807,12 @@ importers:
'@vben-core/toolkit':
specifier: workspace:*
version: link:../../@core/shared/toolkit
'@vben-core/typings':
specifier: workspace:*
version: link:../../@core/shared/typings
vue:
specifier: ^3.4.31
version: 3.4.31(typescript@5.5.3)
vue-router:
specifier: ^4.4.0
version: 4.4.0(vue@3.4.31(typescript@5.5.3))
devDependencies:
'@vben/types':
specifier: workspace:*
version: link:../../types
packages/business/chart-ui:
dependencies:
@ -848,9 +831,6 @@ importers:
packages/business/layouts:
dependencies:
'@vben-core/colorful':
specifier: workspace:*
version: link:../../@core/shared/colorful
'@vben-core/helpers':
specifier: workspace:*
version: link:../../@core/forward/helpers
@ -881,6 +861,9 @@ importers:
'@vben-core/toolkit':
specifier: workspace:*
version: link:../../@core/shared/toolkit
'@vben-core/typings':
specifier: workspace:*
version: link:../../@core/shared/typings
'@vueuse/core':
specifier: ^10.11.0
version: 10.11.0(vue@3.4.31(typescript@5.5.3))
@ -890,13 +873,6 @@ importers:
vue-router:
specifier: ^4.4.0
version: 4.4.0(vue@3.4.31(typescript@5.5.3))
devDependencies:
'@vben-core/typings':
specifier: workspace:*
version: link:../../@core/shared/typings
'@vben/types':
specifier: workspace:*
version: link:../../types
packages/business/universal-ui:
dependencies:
@ -945,9 +921,6 @@ importers:
'@vben-core/design':
specifier: workspace:*
version: link:../@core/shared/design
'@vben-core/design-tokens':
specifier: workspace:*
version: link:../@core/shared/design-tokens
packages/types:
dependencies:

View File

@ -64,22 +64,10 @@
"name": "@vben-core/locales",
"path": "packages/@core/locales",
},
{
"name": "@vben-core/cache",
"path": "packages/@core/shared/cache",
},
{
"name": "@vben-core/colorful",
"path": "packages/@core/shared/colorful",
},
{
"name": "@vben-core/design",
"path": "packages/@core/shared/design",
},
{
"name": "@vben-core/design-tokens",
"path": "packages/@core/shared/design-tokens",
},
{
"name": "@vben-core/iconify",
"path": "packages/@core/shared/iconify",