feat:新增pure-admin前端
This commit is contained in:
chenchun
44
Yi.Pure.Vue3/src/plugins/echarts.ts
Normal file
44
Yi.Pure.Vue3/src/plugins/echarts.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import type { App } from "vue";
|
||||
import * as echarts from "echarts/core";
|
||||
import { PieChart, BarChart, LineChart } from "echarts/charts";
|
||||
import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
PolarComponent,
|
||||
LegendComponent,
|
||||
GraphicComponent,
|
||||
ToolboxComponent,
|
||||
TooltipComponent,
|
||||
DataZoomComponent,
|
||||
VisualMapComponent
|
||||
} from "echarts/components";
|
||||
|
||||
const { use } = echarts;
|
||||
|
||||
use([
|
||||
PieChart,
|
||||
BarChart,
|
||||
LineChart,
|
||||
CanvasRenderer,
|
||||
SVGRenderer,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
PolarComponent,
|
||||
LegendComponent,
|
||||
GraphicComponent,
|
||||
ToolboxComponent,
|
||||
TooltipComponent,
|
||||
DataZoomComponent,
|
||||
VisualMapComponent
|
||||
]);
|
||||
|
||||
/**
|
||||
* @description 按需引入echarts，具体看 https://echarts.apache.org/handbook/zh/basics/import/#%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5
|
||||
* @see 温馨提示：必须将 `$echarts` 添加到全局 `globalProperties` ，具体看 https://pure-admin-utils.netlify.app/hooks/useECharts/useECharts#%E4%BD%BF%E7%94%A8%E5%89%8D%E6%8F%90
|
||||
*/
|
||||
export function useEcharts(app: App) {
|
||||
app.config.globalProperties.$echarts = echarts;
|
||||
}
|
||||
|
||||
export default echarts;
|
||||
248
Yi.Pure.Vue3/src/plugins/elementPlus.ts
Normal file
248
Yi.Pure.Vue3/src/plugins/elementPlus.ts
Normal file
@@ -0,0 +1,248 @@
|
||||
// 按需引入element-plus（该方法稳定且明确。当然也支持：https://element-plus.org/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5）
|
||||
import type { App, Component } from "vue";
|
||||
import {
|
||||
/**
|
||||
* 为了方便演示平台将 element-plus 导出的所有组件引入，实际使用中如果你没用到哪个组件，将其注释掉就行
|
||||
* 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/component.ts#L111-L211
|
||||
* */
|
||||
ElAffix,
|
||||
ElAlert,
|
||||
ElAutocomplete,
|
||||
ElAutoResizer,
|
||||
ElAvatar,
|
||||
ElAnchor,
|
||||
ElAnchorLink,
|
||||
ElBacktop,
|
||||
ElBadge,
|
||||
ElBreadcrumb,
|
||||
ElBreadcrumbItem,
|
||||
ElButton,
|
||||
ElButtonGroup,
|
||||
ElCalendar,
|
||||
ElCard,
|
||||
ElCarousel,
|
||||
ElCarouselItem,
|
||||
ElCascader,
|
||||
ElCascaderPanel,
|
||||
ElCheckTag,
|
||||
ElCheckbox,
|
||||
ElCheckboxButton,
|
||||
ElCheckboxGroup,
|
||||
ElCol,
|
||||
ElCollapse,
|
||||
ElCollapseItem,
|
||||
ElCollapseTransition,
|
||||
ElColorPicker,
|
||||
ElConfigProvider,
|
||||
ElContainer,
|
||||
ElAside,
|
||||
ElFooter,
|
||||
ElHeader,
|
||||
ElMain,
|
||||
ElDatePicker,
|
||||
ElDescriptions,
|
||||
ElDescriptionsItem,
|
||||
ElDialog,
|
||||
ElDivider,
|
||||
ElDrawer,
|
||||
ElDropdown,
|
||||
ElDropdownItem,
|
||||
ElDropdownMenu,
|
||||
ElEmpty,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElIcon,
|
||||
ElImage,
|
||||
ElImageViewer,
|
||||
ElInput,
|
||||
ElInputNumber,
|
||||
ElLink,
|
||||
ElMenu,
|
||||
ElMenuItem,
|
||||
ElMenuItemGroup,
|
||||
ElSubMenu,
|
||||
ElPageHeader,
|
||||
ElPagination,
|
||||
ElPopconfirm,
|
||||
ElPopover,
|
||||
ElPopper,
|
||||
ElProgress,
|
||||
ElRadio,
|
||||
ElRadioButton,
|
||||
ElRadioGroup,
|
||||
ElRate,
|
||||
ElResult,
|
||||
ElRow,
|
||||
ElScrollbar,
|
||||
ElSelect,
|
||||
ElOption,
|
||||
ElOptionGroup,
|
||||
ElSelectV2,
|
||||
ElSkeleton,
|
||||
ElSkeletonItem,
|
||||
ElSlider,
|
||||
ElSpace,
|
||||
ElStatistic,
|
||||
ElCountdown,
|
||||
ElSteps,
|
||||
ElStep,
|
||||
ElSwitch,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
ElTableV2,
|
||||
ElTabs,
|
||||
ElTabPane,
|
||||
ElTag,
|
||||
ElText,
|
||||
ElTimePicker,
|
||||
ElTimeSelect,
|
||||
ElTimeline,
|
||||
ElTimelineItem,
|
||||
ElTooltip,
|
||||
ElTransfer,
|
||||
ElTree,
|
||||
ElTreeSelect,
|
||||
ElTreeV2,
|
||||
ElUpload,
|
||||
ElWatermark,
|
||||
ElTour,
|
||||
ElTourStep,
|
||||
ElSegmented,
|
||||
/**
|
||||
* 为了方便演示平台将 element-plus 导出的所有插件引入，实际使用中如果你没用到哪个插件，将其注释掉就行
|
||||
* 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/plugin.ts#L11-L16
|
||||
* */
|
||||
ElLoading, // v-loading 指令
|
||||
ElInfiniteScroll, // v-infinite-scroll 指令
|
||||
ElPopoverDirective, // v-popover 指令
|
||||
ElMessage, // $message 全局属性对象globalProperties
|
||||
ElMessageBox, // $msgbox、$alert、$confirm、$prompt 全局属性对象globalProperties
|
||||
ElNotification // $notify 全局属性对象globalProperties
|
||||
} from "element-plus";
|
||||
|
||||
const components = [
|
||||
ElAffix,
|
||||
ElAlert,
|
||||
ElAutocomplete,
|
||||
ElAutoResizer,
|
||||
ElAvatar,
|
||||
ElAnchor,
|
||||
ElAnchorLink,
|
||||
ElBacktop,
|
||||
ElBadge,
|
||||
ElBreadcrumb,
|
||||
ElBreadcrumbItem,
|
||||
ElButton,
|
||||
ElButtonGroup,
|
||||
ElCalendar,
|
||||
ElCard,
|
||||
ElCarousel,
|
||||
ElCarouselItem,
|
||||
ElCascader,
|
||||
ElCascaderPanel,
|
||||
ElCheckTag,
|
||||
ElCheckbox,
|
||||
ElCheckboxButton,
|
||||
ElCheckboxGroup,
|
||||
ElCol,
|
||||
ElCollapse,
|
||||
ElCollapseItem,
|
||||
ElCollapseTransition,
|
||||
ElColorPicker,
|
||||
ElConfigProvider,
|
||||
ElContainer,
|
||||
ElAside,
|
||||
ElFooter,
|
||||
ElHeader,
|
||||
ElMain,
|
||||
ElDatePicker,
|
||||
ElDescriptions,
|
||||
ElDescriptionsItem,
|
||||
ElDialog,
|
||||
ElDivider,
|
||||
ElDrawer,
|
||||
ElDropdown,
|
||||
ElDropdownItem,
|
||||
ElDropdownMenu,
|
||||
ElEmpty,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElIcon,
|
||||
ElImage,
|
||||
ElImageViewer,
|
||||
ElInput,
|
||||
ElInputNumber,
|
||||
ElLink,
|
||||
ElMenu,
|
||||
ElMenuItem,
|
||||
ElMenuItemGroup,
|
||||
ElSubMenu,
|
||||
ElPageHeader,
|
||||
ElPagination,
|
||||
ElPopconfirm,
|
||||
ElPopover,
|
||||
ElPopper,
|
||||
ElProgress,
|
||||
ElRadio,
|
||||
ElRadioButton,
|
||||
ElRadioGroup,
|
||||
ElRate,
|
||||
ElResult,
|
||||
ElRow,
|
||||
ElScrollbar,
|
||||
ElSelect,
|
||||
ElOption,
|
||||
ElOptionGroup,
|
||||
ElSelectV2,
|
||||
ElSkeleton,
|
||||
ElSkeletonItem,
|
||||
ElSlider,
|
||||
ElSpace,
|
||||
ElStatistic,
|
||||
ElCountdown,
|
||||
ElSteps,
|
||||
ElStep,
|
||||
ElSwitch,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
ElTableV2,
|
||||
ElTabs,
|
||||
ElTabPane,
|
||||
ElTag,
|
||||
ElText,
|
||||
ElTimePicker,
|
||||
ElTimeSelect,
|
||||
ElTimeline,
|
||||
ElTimelineItem,
|
||||
ElTooltip,
|
||||
ElTransfer,
|
||||
ElTree,
|
||||
ElTreeSelect,
|
||||
ElTreeV2,
|
||||
ElUpload,
|
||||
ElWatermark,
|
||||
ElTour,
|
||||
ElTourStep,
|
||||
ElSegmented
|
||||
];
|
||||
|
||||
const plugins = [
|
||||
ElLoading,
|
||||
ElInfiniteScroll,
|
||||
ElPopoverDirective,
|
||||
ElMessage,
|
||||
ElMessageBox,
|
||||
ElNotification
|
||||
];
|
||||
|
||||
/** 按需引入`element-plus` */
|
||||
export function useElementPlus(app: App) {
|
||||
// 全局注册组件
|
||||
components.forEach((component: Component) => {
|
||||
app.component(component.name, component);
|
||||
});
|
||||
// 全局注册插件
|
||||
plugins.forEach(plugin => {
|
||||
app.use(plugin);
|
||||
});
|
||||
}
|
||||
116
Yi.Pure.Vue3/src/plugins/i18n.ts
Normal file
116
Yi.Pure.Vue3/src/plugins/i18n.ts
Normal file
@@ -0,0 +1,116 @@
|
||||
// 多组件库的国际化和本地项目国际化兼容
|
||||
import { type I18n, createI18n } from "vue-i18n";
|
||||
import type { App, WritableComputedRef } from "vue";
|
||||
import { responsiveStorageNameSpace } from "@/config";
|
||||
import { storageLocal, isObject } from "@pureadmin/utils";
|
||||
|
||||
// element-plus国际化
|
||||
import enLocale from "element-plus/es/locale/lang/en";
|
||||
import zhLocale from "element-plus/es/locale/lang/zh-cn";
|
||||
|
||||
const siphonI18n = (function () {
|
||||
// 仅初始化一次国际化配置
|
||||
let cache = Object.fromEntries(
|
||||
Object.entries(
|
||||
import.meta.glob("../../locales/*.y(a)?ml", { eager: true })
|
||||
).map(([key, value]: any) => {
|
||||
const matched = key.match(/([A-Za-z0-9-_]+)\./i)[1];
|
||||
return [matched, value.default];
|
||||
})
|
||||
);
|
||||
return (prefix = "zh-CN") => {
|
||||
return cache[prefix];
|
||||
};
|
||||
})();
|
||||
|
||||
export const localesConfigs = {
|
||||
zh: {
|
||||
...siphonI18n("zh-CN"),
|
||||
...zhLocale
|
||||
},
|
||||
en: {
|
||||
...siphonI18n("en"),
|
||||
...enLocale
|
||||
}
|
||||
};
|
||||
|
||||
/** 获取对象中所有嵌套对象的key键，并将它们用点号分割组成字符串 */
|
||||
function getObjectKeys(obj) {
|
||||
const stack = [];
|
||||
const keys: Set<string> = new Set();
|
||||
|
||||
stack.push({ obj, key: "" });
|
||||
|
||||
while (stack.length > 0) {
|
||||
const { obj, key } = stack.pop();
|
||||
|
||||
for (const k in obj) {
|
||||
const newKey = key ? `${key}.${k}` : k;
|
||||
|
||||
if (obj[k] && isObject(obj[k])) {
|
||||
stack.push({ obj: obj[k], key: newKey });
|
||||
} else {
|
||||
keys.add(newKey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return keys;
|
||||
}
|
||||
|
||||
/** 将展开的key缓存 */
|
||||
const keysCache: Map<string, Set<string>> = new Map();
|
||||
const flatI18n = (prefix = "zh-CN") => {
|
||||
let cache = keysCache.get(prefix);
|
||||
if (!cache) {
|
||||
cache = getObjectKeys(siphonI18n(prefix));
|
||||
keysCache.set(prefix, cache);
|
||||
}
|
||||
return cache;
|
||||
};
|
||||
|
||||
/**
|
||||
* 国际化转换工具函数（自动读取根目录locales文件夹下文件进行国际化匹配）
|
||||
* @param message message
|
||||
* @returns 转化后的message
|
||||
*/
|
||||
export function transformI18n(message: any = "") {
|
||||
if (!message) {
|
||||
return "";
|
||||
}
|
||||
|
||||
// 处理存储动态路由的title,格式 {zh:"",en:""}
|
||||
if (typeof message === "object") {
|
||||
const locale: string | WritableComputedRef<string> | any =
|
||||
i18n.global.locale;
|
||||
return message[locale?.value];
|
||||
}
|
||||
|
||||
const key = message.match(/(\S*)\./)?.input;
|
||||
|
||||
if (key && flatI18n("zh-CN").has(key)) {
|
||||
return i18n.global.t.call(i18n.global.locale, message);
|
||||
} else if (!key && Object.hasOwn(siphonI18n("zh-CN"), message)) {
|
||||
// 兼容非嵌套形式的国际化写法
|
||||
return i18n.global.t.call(i18n.global.locale, message);
|
||||
} else {
|
||||
return message;
|
||||
}
|
||||
}
|
||||
|
||||
/** 此函数只是配合i18n Ally插件来进行国际化智能提示，并无实际意义（只对提示起作用），如果不需要国际化可删除 */
|
||||
export const $t = (key: string) => key;
|
||||
|
||||
export const i18n: I18n = createI18n({
|
||||
legacy: false,
|
||||
locale:
|
||||
storageLocal().getItem<StorageConfigs>(
|
||||
`${responsiveStorageNameSpace()}locale`
|
||||
)?.locale ?? "zh",
|
||||
fallbackLocale: "en",
|
||||
messages: localesConfigs
|
||||
});
|
||||
|
||||
export function useI18n(app: App) {
|
||||
app.use(i18n);
|
||||
}
|
||||
104
Yi.Pure.Vue3/src/plugins/vxeTable.ts
Normal file
104
Yi.Pure.Vue3/src/plugins/vxeTable.ts
Normal file
@@ -0,0 +1,104 @@
|
||||
import "vxe-table/lib/style.css";
|
||||
// import "xe-utils";
|
||||
// import XEUtils from "xe-utils";
|
||||
import type { App } from "vue";
|
||||
// import { i18n } from "@/plugins/i18n";
|
||||
// import zh from "vxe-table/lib/locale/lang/zh-CN";
|
||||
// import en from "vxe-table/lib/locale/lang/en-US";
|
||||
|
||||
import {
|
||||
// 全局对象
|
||||
VXETable,
|
||||
// 表格功能
|
||||
// Filter,
|
||||
// Edit,
|
||||
// Menu,
|
||||
// Export,
|
||||
// Keyboard,
|
||||
// Validator,
|
||||
Custom,
|
||||
// 可选组件
|
||||
Icon,
|
||||
Column,
|
||||
Grid,
|
||||
Pager,
|
||||
Select,
|
||||
// Colgroup,
|
||||
// Tooltip,
|
||||
// Toolbar,
|
||||
// Form,
|
||||
// FormItem,
|
||||
// FormGather,
|
||||
// Checkbox,
|
||||
// CheckboxGroup,
|
||||
// Radio,
|
||||
// RadioGroup,
|
||||
// RadioButton,
|
||||
// Switch,
|
||||
// Input,
|
||||
// Optgroup,
|
||||
// Option,
|
||||
// Textarea,
|
||||
// Button,
|
||||
// Modal,
|
||||
// List,
|
||||
// Pulldown,
|
||||
// 表格
|
||||
Table
|
||||
} from "vxe-table";
|
||||
|
||||
// 全局默认参数
|
||||
VXETable.setConfig({
|
||||
// i18n: (key, args) => {
|
||||
// return unref(i18n.global.locale) === "zh"
|
||||
// ? XEUtils.toFormatString(XEUtils.get(zh, key), args)
|
||||
// : XEUtils.toFormatString(XEUtils.get(en, key), args);
|
||||
// },
|
||||
// translate(key) {
|
||||
// const NAMESPACED = ["el.", "buttons."];
|
||||
// if (key && NAMESPACED.findIndex(v => key.includes(v)) !== -1) {
|
||||
// return i18n.global.t.call(i18n.global.locale, key);
|
||||
// }
|
||||
// return key;
|
||||
// }
|
||||
});
|
||||
|
||||
export function useVxeTable(app: App) {
|
||||
// 表格功能
|
||||
app
|
||||
// .use(Filter)
|
||||
// .use(Edit)
|
||||
// .use(Menu)
|
||||
// .use(Export)
|
||||
// .use(Keyboard)
|
||||
// .use(Validator)
|
||||
.use(Custom)
|
||||
// 可选组件
|
||||
.use(Icon)
|
||||
.use(Column)
|
||||
.use(Grid)
|
||||
.use(Pager)
|
||||
.use(Select)
|
||||
// .use(Colgroup)
|
||||
// .use(Tooltip)
|
||||
// .use(Toolbar)
|
||||
// .use(Form)
|
||||
// .use(FormItem)
|
||||
// .use(FormGather)
|
||||
// .use(Checkbox)
|
||||
// .use(CheckboxGroup)
|
||||
// .use(Radio)
|
||||
// .use(RadioGroup)
|
||||
// .use(RadioButton)
|
||||
// .use(Switch)
|
||||
// .use(Input)
|
||||
// .use(Optgroup)
|
||||
// .use(Option)
|
||||
// .use(Textarea)
|
||||
// .use(Button)
|
||||
// .use(Modal)
|
||||
// .use(List)
|
||||
// .use(Pulldown)
|
||||
// 安装表格
|
||||
.use(Table);
|
||||
}
|
||||
Reference in New Issue
Block a user