feat: 添加完整的前端管理系统 (VbenAdmin)
- 添加基于 VbenAdmin + Vue3 + Element Plus 的前端管理系统 - 包含完整的 UI 组件库和工具链 - 支持多应用架构 (web-ele, backend-mock, playground) - 包含完整的开发规范和配置 - 修复 admin 目录的子模块问题,确保正确提交
This commit is contained in:
@@ -0,0 +1,72 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { Settings } from '@vben/icons';
|
||||
import { $t, loadLocaleMessages } from '@vben/locales';
|
||||
import { preferences, updatePreferences } from '@vben/preferences';
|
||||
import { capitalizeFirstLetter } from '@vben/utils';
|
||||
|
||||
import { useVbenDrawer } from '@vben-core/popup-ui';
|
||||
import { VbenButton } from '@vben-core/shadcn-ui';
|
||||
|
||||
import PreferencesDrawer from './preferences-drawer.vue';
|
||||
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
connectedComponent: PreferencesDrawer,
|
||||
});
|
||||
|
||||
/**
|
||||
* preferences 转成 vue props
|
||||
* preferences.widget.fullscreen=>widgetFullscreen
|
||||
*/
|
||||
const attrs = computed(() => {
|
||||
const result: Record<string, any> = {};
|
||||
for (const [key, value] of Object.entries(preferences)) {
|
||||
for (const [subKey, subValue] of Object.entries(value)) {
|
||||
result[`${key}${capitalizeFirstLetter(subKey)}`] = subValue;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
/**
|
||||
* preferences 转成 vue listener
|
||||
* preferences.widget.fullscreen=>@update:widgetFullscreen
|
||||
*/
|
||||
const listen = computed(() => {
|
||||
const result: Record<string, any> = {};
|
||||
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,
|
||||
) => {
|
||||
updatePreferences({ [key]: { [subKey]: val } });
|
||||
if (key === 'app' && subKey === 'locale') {
|
||||
loadLocaleMessages(val);
|
||||
}
|
||||
};
|
||||
}
|
||||
} else {
|
||||
result[key] = value;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<Drawer v-bind="{ ...$attrs, ...attrs }" v-on="listen" />
|
||||
|
||||
<div @click="() => drawerApi.open()">
|
||||
<slot>
|
||||
<VbenButton
|
||||
:title="$t('preferences.title')"
|
||||
class="bg-primary flex-col-center size-10 cursor-pointer rounded-l-lg rounded-r-none border-none"
|
||||
>
|
||||
<Settings class="size-5" />
|
||||
</VbenButton>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user