mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
style(projects): update prettier config
This commit is contained in:
Soybean
@ -27,13 +27,13 @@ function transformVersionData(tuple: [string, string]): PkgVersionInfo {
|
||||
const [name, version] = tuple;
|
||||
return {
|
||||
name,
|
||||
version,
|
||||
version
|
||||
};
|
||||
}
|
||||
|
||||
export const pkgJson: PkgJson = {
|
||||
name: pkgWithType.name,
|
||||
version: pkgWithType.version,
|
||||
dependencies: Object.entries(pkgWithType.dependencies).map((item) => transformVersionData(item)),
|
||||
devDependencies: Object.entries(pkgWithType.devDependencies).map((item) => transformVersionData(item)),
|
||||
dependencies: Object.entries(pkgWithType.dependencies).map(item => transformVersionData(item)),
|
||||
devDependencies: Object.entries(pkgWithType.devDependencies).map(item => transformVersionData(item))
|
||||
};
|
||||
|
||||
@ -63,40 +63,40 @@ const buttonExample: ButtonExample[] = [
|
||||
{
|
||||
id: 0,
|
||||
props: {},
|
||||
label: 'Default',
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: { type: 'tertiary' },
|
||||
label: 'Tertiary',
|
||||
label: 'Tertiary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: { type: 'primary' },
|
||||
label: 'Primary',
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: { type: 'info' },
|
||||
label: 'Info',
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
props: { type: 'success' },
|
||||
label: 'Success',
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
props: { type: 'warning' },
|
||||
label: 'Warning',
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
props: { type: 'error' },
|
||||
label: 'Error',
|
||||
},
|
||||
label: 'Error'
|
||||
}
|
||||
],
|
||||
desc: '按钮的 type 分别为 default、primary、info、success、warning 和 error。',
|
||||
desc: '按钮的 type 分别为 default、primary、info、success、warning 和 error。'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
@ -105,74 +105,74 @@ const buttonExample: ButtonExample[] = [
|
||||
{
|
||||
id: 0,
|
||||
props: { strong: true, secondary: true },
|
||||
label: 'Default',
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: { strong: true, secondary: true, type: 'tertiary' },
|
||||
label: 'Tertiary',
|
||||
label: 'Tertiary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: { strong: true, secondary: true, type: 'primary' },
|
||||
label: 'Primary',
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: { strong: true, secondary: true, type: 'info' },
|
||||
label: 'Info',
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
props: { strong: true, secondary: true, type: 'success' },
|
||||
label: 'Success',
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
props: { strong: true, secondary: true, type: 'warning' },
|
||||
label: 'Warning',
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
props: { strong: true, secondary: true, type: 'error' },
|
||||
label: 'Error',
|
||||
label: 'Error'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
props: { strong: true, secondary: true, round: true },
|
||||
label: 'Default',
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
props: { strong: true, secondary: true, round: true, type: 'tertiary' },
|
||||
label: 'Tertiary',
|
||||
label: 'Tertiary'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
props: { strong: true, secondary: true, round: true, type: 'primary' },
|
||||
label: 'Primary',
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
props: { strong: true, secondary: true, round: true, type: 'info' },
|
||||
label: 'Info',
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
props: { strong: true, secondary: true, round: true, type: 'success' },
|
||||
label: 'Success',
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
props: { strong: true, secondary: true, round: true, type: 'warning' },
|
||||
label: 'Warning',
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
props: { strong: true, secondary: true, round: true, type: 'error' },
|
||||
label: 'Error',
|
||||
},
|
||||
],
|
||||
label: 'Error'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@ -181,64 +181,64 @@ const buttonExample: ButtonExample[] = [
|
||||
{
|
||||
id: 0,
|
||||
props: { tertiary: true },
|
||||
label: 'Default',
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: { tertiary: true, type: 'primary' },
|
||||
label: 'Primary',
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: { tertiary: true, type: 'info' },
|
||||
label: 'Info',
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: { tertiary: true, type: 'success' },
|
||||
label: 'Success',
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
props: { tertiary: true, type: 'warning' },
|
||||
label: 'Warning',
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
props: { tertiary: true, type: 'error' },
|
||||
label: 'Error',
|
||||
label: 'Error'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
props: { tertiary: true, round: true },
|
||||
label: 'Default',
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
props: { tertiary: true, round: true, type: 'primary' },
|
||||
label: 'Primary',
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
props: { tertiary: true, round: true, type: 'info' },
|
||||
label: 'Info',
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
props: { tertiary: true, round: true, type: 'success' },
|
||||
label: 'Success',
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
props: { tertiary: true, round: true, type: 'warning' },
|
||||
label: 'Warning',
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
props: { tertiary: true, round: true, type: 'error' },
|
||||
label: 'Error',
|
||||
},
|
||||
],
|
||||
label: 'Error'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
@ -247,64 +247,64 @@ const buttonExample: ButtonExample[] = [
|
||||
{
|
||||
id: 0,
|
||||
props: { quaternary: true },
|
||||
label: 'Default',
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: { quaternary: true, type: 'primary' },
|
||||
label: 'Primary',
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: { quaternary: true, type: 'info' },
|
||||
label: 'Info',
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: { quaternary: true, type: 'success' },
|
||||
label: 'Success',
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
props: { quaternary: true, type: 'warning' },
|
||||
label: 'Warning',
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
props: { quaternary: true, type: 'error' },
|
||||
label: 'Error',
|
||||
label: 'Error'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
props: { quaternary: true, round: true },
|
||||
label: 'Default',
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
props: { quaternary: true, round: true, type: 'primary' },
|
||||
label: 'Primary',
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
props: { quaternary: true, round: true, type: 'info' },
|
||||
label: 'Info',
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
props: { quaternary: true, round: true, type: 'success' },
|
||||
label: 'Success',
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
props: { quaternary: true, round: true, type: 'warning' },
|
||||
label: 'Warning',
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
props: { quaternary: true, round: true, type: 'error' },
|
||||
label: 'Error',
|
||||
},
|
||||
],
|
||||
label: 'Error'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
@ -313,39 +313,39 @@ const buttonExample: ButtonExample[] = [
|
||||
{
|
||||
id: 0,
|
||||
props: { dashed: true },
|
||||
label: 'Default',
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: { dashed: true, type: 'tertiary' },
|
||||
label: 'Tertiary',
|
||||
label: 'Tertiary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: { dashed: true, type: 'primary' },
|
||||
label: 'Primary',
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: { dashed: true, type: 'info' },
|
||||
label: 'Info',
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
props: { dashed: true, type: 'success' },
|
||||
label: 'Success',
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
props: { dashed: true, type: 'warning' },
|
||||
label: 'Warning',
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
props: { dashed: true, type: 'error' },
|
||||
label: 'Error',
|
||||
},
|
||||
],
|
||||
label: 'Error'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
@ -354,24 +354,24 @@ const buttonExample: ButtonExample[] = [
|
||||
{
|
||||
id: 0,
|
||||
props: { size: 'tiny', strong: true },
|
||||
label: '小小',
|
||||
label: '小小'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: { size: 'small', strong: true },
|
||||
label: '小',
|
||||
label: '小'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: { size: 'medium', strong: true },
|
||||
label: '不小',
|
||||
label: '不小'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: { size: 'large', strong: true },
|
||||
label: '不不小',
|
||||
},
|
||||
],
|
||||
label: '不不小'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
@ -381,9 +381,9 @@ const buttonExample: ButtonExample[] = [
|
||||
id: 0,
|
||||
props: { text: true },
|
||||
label: '那车头依然吐着烟',
|
||||
icon: 'mdi:train',
|
||||
},
|
||||
],
|
||||
icon: 'mdi:train'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
@ -396,12 +396,12 @@ const buttonExample: ButtonExample[] = [
|
||||
tag: 'a',
|
||||
href: 'https://github.com/honghuangdc/soybean-admin',
|
||||
target: '_blank',
|
||||
type: 'primary',
|
||||
type: 'primary'
|
||||
},
|
||||
label: 'soybean-admin',
|
||||
},
|
||||
label: 'soybean-admin'
|
||||
}
|
||||
],
|
||||
desc: '你可以把按钮渲染成不同的标签，比如 a标签 。',
|
||||
desc: '你可以把按钮渲染成不同的标签，比如 a标签 。'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
@ -410,12 +410,12 @@ const buttonExample: ButtonExample[] = [
|
||||
{
|
||||
id: 0,
|
||||
props: {
|
||||
disabled: true,
|
||||
disabled: true
|
||||
},
|
||||
label: '不许点',
|
||||
},
|
||||
label: '不许点'
|
||||
}
|
||||
],
|
||||
desc: '按钮可以被禁用',
|
||||
desc: '按钮可以被禁用'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
@ -425,23 +425,23 @@ const buttonExample: ButtonExample[] = [
|
||||
id: 0,
|
||||
props: {
|
||||
secondary: true,
|
||||
strong: true,
|
||||
strong: true
|
||||
},
|
||||
label: '+100元',
|
||||
icon: 'mdi:cash-100',
|
||||
icon: 'mdi:cash-100'
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
props: {
|
||||
iconPlacement: 'right',
|
||||
secondary: true,
|
||||
strong: true,
|
||||
strong: true
|
||||
},
|
||||
label: '+100元',
|
||||
icon: 'mdi:cash-100',
|
||||
},
|
||||
icon: 'mdi:cash-100'
|
||||
}
|
||||
],
|
||||
desc: '在按钮上使用图标。',
|
||||
desc: '在按钮上使用图标。'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
@ -450,24 +450,24 @@ const buttonExample: ButtonExample[] = [
|
||||
{
|
||||
id: 0,
|
||||
props: {
|
||||
circle: true,
|
||||
circle: true
|
||||
},
|
||||
icon: 'mdi:cash-100',
|
||||
icon: 'mdi:cash-100'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: {
|
||||
round: true,
|
||||
round: true
|
||||
},
|
||||
label: '圆角',
|
||||
label: '圆角'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: {},
|
||||
label: '方',
|
||||
},
|
||||
label: '方'
|
||||
}
|
||||
],
|
||||
desc: '按钮拥有不同的形状。',
|
||||
desc: '按钮拥有不同的形状。'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
@ -476,40 +476,40 @@ const buttonExample: ButtonExample[] = [
|
||||
{
|
||||
id: 0,
|
||||
props: { ghost: true },
|
||||
label: 'Default',
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: { ghost: true, type: 'tertiary' },
|
||||
label: 'Tertiary',
|
||||
label: 'Tertiary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: { ghost: true, type: 'primary' },
|
||||
label: 'Primary',
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: { ghost: true, type: 'info' },
|
||||
label: 'Info',
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
props: { ghost: true, type: 'success' },
|
||||
label: 'Success',
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
props: { ghost: true, type: 'warning' },
|
||||
label: 'Warning',
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
props: { ghost: true, type: 'error' },
|
||||
label: 'Error',
|
||||
},
|
||||
label: 'Error'
|
||||
}
|
||||
],
|
||||
desc: 'Ghost 按钮有透明的背景。',
|
||||
desc: 'Ghost 按钮有透明的背景。'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
@ -518,58 +518,58 @@ const buttonExample: ButtonExample[] = [
|
||||
{
|
||||
id: 0,
|
||||
props: {
|
||||
color: '#8a2be2',
|
||||
color: '#8a2be2'
|
||||
},
|
||||
label: '#8a2be2',
|
||||
icon: 'ic:baseline-color-lens',
|
||||
icon: 'ic:baseline-color-lens'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: {
|
||||
color: '#ff69b4',
|
||||
color: '#ff69b4'
|
||||
},
|
||||
label: '#ff69b4',
|
||||
icon: 'ic:baseline-color-lens',
|
||||
icon: 'ic:baseline-color-lens'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: {
|
||||
color: '#8a2be2',
|
||||
ghost: true,
|
||||
ghost: true
|
||||
},
|
||||
label: '#8a2be2',
|
||||
icon: 'ic:baseline-color-lens',
|
||||
icon: 'ic:baseline-color-lens'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: {
|
||||
color: '#ff69b4',
|
||||
ghost: true,
|
||||
ghost: true
|
||||
},
|
||||
label: '#ff69b4',
|
||||
icon: 'ic:baseline-color-lens',
|
||||
icon: 'ic:baseline-color-lens'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
props: {
|
||||
color: '#8a2be2',
|
||||
text: true,
|
||||
text: true
|
||||
},
|
||||
label: '#8a2be2',
|
||||
icon: 'ic:baseline-color-lens',
|
||||
icon: 'ic:baseline-color-lens'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
props: {
|
||||
color: '#ff69b4',
|
||||
text: true,
|
||||
text: true
|
||||
},
|
||||
label: '#ff69b4',
|
||||
icon: 'ic:baseline-color-lens',
|
||||
},
|
||||
icon: 'ic:baseline-color-lens'
|
||||
}
|
||||
],
|
||||
desc: '这两个颜色看起来像毒蘑菇。',
|
||||
},
|
||||
desc: '这两个颜色看起来像毒蘑菇。'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
title="卡片分段示例"
|
||||
:segmented="{
|
||||
content: true,
|
||||
footer: 'soft',
|
||||
footer: 'soft'
|
||||
}"
|
||||
>
|
||||
<template #header-extra>#header-extra</template>
|
||||
|
||||
@ -32,16 +32,16 @@ const columns: DataTableColumn[] = [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
key: 'age'
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
},
|
||||
key: 'address'
|
||||
}
|
||||
];
|
||||
|
||||
const dataSource = ref<DataSource[]>([]);
|
||||
@ -53,7 +53,7 @@ function createDataSource(): DataSource[] {
|
||||
return {
|
||||
name: `Name${index}`,
|
||||
age: getRandomInteger(30, 20),
|
||||
address: '中国',
|
||||
address: '中国'
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
@ -43,43 +43,43 @@ const timelines: TimelineData[] = [
|
||||
{ type: 'success', title: '成功', content: '哪里成功', time: '2021-10-10 20:46' },
|
||||
{ type: 'error', title: '错误', content: '哪里错误', time: '2021-10-10 20:46' },
|
||||
{ type: 'warning', title: '警告', content: '哪里警告', time: '2021-10-10 20:46' },
|
||||
{ type: 'info', title: '信息', content: '是的', time: '2021-10-10 20:46' },
|
||||
{ type: 'info', title: '信息', content: '是的', time: '2021-10-10 20:46' }
|
||||
];
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
key: 'age'
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: 'Tags',
|
||||
key: 'tags',
|
||||
render(row: TableData) {
|
||||
const tags = row.tags.map((tagKey) => {
|
||||
const tags = row.tags.map(tagKey => {
|
||||
return h(
|
||||
NTag,
|
||||
{
|
||||
style: {
|
||||
marginRight: '6px',
|
||||
marginRight: '6px'
|
||||
},
|
||||
type: 'info',
|
||||
type: 'info'
|
||||
},
|
||||
{
|
||||
default: () => tagKey,
|
||||
default: () => tagKey
|
||||
}
|
||||
);
|
||||
});
|
||||
return tags;
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const tableData: TableData[] = [
|
||||
@ -88,50 +88,50 @@ const tableData: TableData[] = [
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
tags: ['nice', 'developer'],
|
||||
tags: ['nice', 'developer']
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
name: 'Jim Green',
|
||||
age: 42,
|
||||
address: 'London No. 1 Lake Park',
|
||||
tags: ['wow'],
|
||||
tags: ['wow']
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
tags: ['cool', 'teacher'],
|
||||
tags: ['cool', 'teacher']
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
name: 'Soybean',
|
||||
age: 25,
|
||||
address: 'China Shenzhen',
|
||||
tags: ['handsome', 'programmer'],
|
||||
tags: ['handsome', 'programmer']
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
tags: ['nice', 'developer'],
|
||||
tags: ['nice', 'developer']
|
||||
},
|
||||
{
|
||||
key: 5,
|
||||
name: 'Jim Green',
|
||||
age: 42,
|
||||
address: 'London No. 1 Lake Park',
|
||||
tags: ['wow'],
|
||||
tags: ['wow']
|
||||
},
|
||||
{
|
||||
key: 6,
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
tags: ['cool', 'teacher'],
|
||||
},
|
||||
tags: ['cool', 'teacher']
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@ -16,7 +16,7 @@ interface Props {
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
startColor: '#56cdf3',
|
||||
endColor: '#719de3',
|
||||
endColor: '#719de3'
|
||||
});
|
||||
|
||||
const gradientStyle = computed(() => `linear-gradient(to bottom right, ${props.startColor}, ${props.endColor})`);
|
||||
|
||||
@ -37,7 +37,7 @@ const cardData: CardData[] = [
|
||||
value: 1000000,
|
||||
unit: '',
|
||||
colors: ['#ec4786', '#b955a4'],
|
||||
icon: 'ant-design:bar-chart-outlined',
|
||||
icon: 'ant-design:bar-chart-outlined'
|
||||
},
|
||||
{
|
||||
id: 'amount',
|
||||
@ -45,7 +45,7 @@ const cardData: CardData[] = [
|
||||
value: 234567.89,
|
||||
unit: '$',
|
||||
colors: ['#865ec0', '#5144b4'],
|
||||
icon: 'ant-design:money-collect-outlined',
|
||||
icon: 'ant-design:money-collect-outlined'
|
||||
},
|
||||
{
|
||||
id: 'download',
|
||||
@ -53,7 +53,7 @@ const cardData: CardData[] = [
|
||||
value: 666666,
|
||||
unit: '',
|
||||
colors: ['#56cdf3', '#719de3'],
|
||||
icon: 'carbon:document-download',
|
||||
icon: 'carbon:document-download'
|
||||
},
|
||||
{
|
||||
id: 'trade',
|
||||
@ -61,8 +61,8 @@ const cardData: CardData[] = [
|
||||
value: 999999,
|
||||
unit: '',
|
||||
colors: ['#fcbc25', '#f68057'],
|
||||
icon: 'ant-design:trademark-circle-outlined',
|
||||
},
|
||||
icon: 'ant-design:trademark-circle-outlined'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@ -49,20 +49,20 @@ function renderLineChart() {
|
||||
yField: 'value',
|
||||
seriesField: 'type',
|
||||
lineStyle: {
|
||||
lineWidth: 4,
|
||||
lineWidth: 4
|
||||
},
|
||||
area: {
|
||||
style: {
|
||||
fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
|
||||
},
|
||||
fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'
|
||||
}
|
||||
},
|
||||
smooth: true,
|
||||
animation: {
|
||||
appear: {
|
||||
animation: 'wave-in',
|
||||
duration: 2000,
|
||||
},
|
||||
},
|
||||
duration: 2000
|
||||
}
|
||||
}
|
||||
});
|
||||
line.value.render();
|
||||
}
|
||||
@ -72,7 +72,7 @@ function renderPieChart() {
|
||||
{ type: '学习', value: 20 },
|
||||
{ type: '娱乐', value: 10 },
|
||||
{ type: '工作', value: 30 },
|
||||
{ type: '休息', value: 40 },
|
||||
{ type: '休息', value: 40 }
|
||||
];
|
||||
pie.value = new Pie(pieRef.value, {
|
||||
appendPadding: 10,
|
||||
@ -83,21 +83,21 @@ function renderPieChart() {
|
||||
innerRadius: 0.65,
|
||||
meta: {
|
||||
value: {
|
||||
formatter: (v) => `${v}%`,
|
||||
},
|
||||
formatter: v => `${v}%`
|
||||
}
|
||||
},
|
||||
label: {
|
||||
type: 'inner',
|
||||
autoRotate: false,
|
||||
formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
|
||||
formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`
|
||||
},
|
||||
statistic: undefined,
|
||||
pieStyle: {
|
||||
radius: [20],
|
||||
radius: [20]
|
||||
},
|
||||
color: ['#025DF4', '#DB6BCF', '#2498D1', '#FF745A', '#007E99', '#FFA8A8', '#2391FF'],
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
position: 'bottom'
|
||||
},
|
||||
interactions: [
|
||||
{ type: 'element-selected' },
|
||||
@ -107,15 +107,15 @@ function renderPieChart() {
|
||||
cfg: {
|
||||
start: [
|
||||
{ trigger: 'element:mouseenter', action: 'pie-statistic:change' },
|
||||
{ trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' },
|
||||
{ trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' }
|
||||
],
|
||||
end: [
|
||||
{ trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
|
||||
{ trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' },
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
{ trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' }
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
pie.value.render();
|
||||
|
||||
@ -30,18 +30,18 @@ const statisticData: StatisticData[] = [
|
||||
{
|
||||
id: 0,
|
||||
label: '项目数',
|
||||
value: '25',
|
||||
value: '25'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
label: '待办',
|
||||
value: '4/16',
|
||||
value: '4/16'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '消息',
|
||||
value: '12',
|
||||
},
|
||||
value: '12'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@ -77,7 +77,7 @@ const technology: Technology[] = [
|
||||
description: '一套用于构建用户界面的渐进式框架',
|
||||
author: '尤雨溪 - Evan You',
|
||||
site: 'https://v3.cn.vuejs.org/',
|
||||
icon: 'vscode-icons:file-type-vue',
|
||||
icon: 'vscode-icons:file-type-vue'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
@ -85,7 +85,7 @@ const technology: Technology[] = [
|
||||
description: 'JavaScript类型的超集，它可以编译成纯JavaScript',
|
||||
author: '微软 - Microsoft',
|
||||
site: 'https://www.typescriptlang.org/',
|
||||
icon: 'vscode-icons:file-type-typescript-official',
|
||||
icon: 'vscode-icons:file-type-typescript-official'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@ -93,7 +93,7 @@ const technology: Technology[] = [
|
||||
description: '下一代前端开发与构建工具',
|
||||
author: '尤雨溪 - Evan You',
|
||||
site: 'https://vitejs.cn/',
|
||||
icon: 'vscode-icons:file-type-vite',
|
||||
icon: 'vscode-icons:file-type-vite'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
@ -102,7 +102,7 @@ const technology: Technology[] = [
|
||||
author: '图森未来 - TuSimple',
|
||||
site: 'https://www.naiveui.com/zh-CN/os-theme',
|
||||
icon: 'mdi:alpha-n-box-outline',
|
||||
iconColor: '#5fbc22',
|
||||
iconColor: '#5fbc22'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
@ -111,7 +111,7 @@ const technology: Technology[] = [
|
||||
author: 'Windicss',
|
||||
site: 'https://windicss.org/',
|
||||
icon: 'file-icons:windi',
|
||||
iconColor: '#48b0f1',
|
||||
iconColor: '#48b0f1'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
@ -120,8 +120,8 @@ const technology: Technology[] = [
|
||||
author: 'Posva',
|
||||
site: 'https://pinia.esm.dev/',
|
||||
icon: 'mdi:fruit-pineapple',
|
||||
iconColor: '#fecf48',
|
||||
},
|
||||
iconColor: '#fecf48'
|
||||
}
|
||||
];
|
||||
|
||||
const activity: Activity[] = [
|
||||
@ -129,7 +129,7 @@ const activity: Activity[] = [
|
||||
{ id: 3, content: 'Soybean 正在忙于为soybean-admin写项目说明文档！', time: '2021-11-03 20:33:31' },
|
||||
{ id: 2, content: 'Soybean 准备为soybean-admin 1.0的发布做充分的准备工作！', time: '2021-10-31 22:43:12' },
|
||||
{ id: 1, content: '@yanbowe 向soybean-admin提交了一个bug，多标签栏不会自适应。', time: '2021-10-27 10:24:54' },
|
||||
{ id: 0, content: 'Soybean 在2021年5月28日创建了开源项目soybean-admin！', time: '2021-05-28 22:22:22' },
|
||||
{ id: 0, content: 'Soybean 在2021年5月28日创建了开源项目soybean-admin！', time: '2021-05-28 22:22:22' }
|
||||
];
|
||||
|
||||
const shortcuts: Shortcuts[] = [
|
||||
@ -138,7 +138,7 @@ const shortcuts: Shortcuts[] = [
|
||||
{ id: 2, label: '权限管理', icon: 'mdi:family-tree', iconColor: '#f56c6c' },
|
||||
{ id: 3, label: '组件', icon: 'fluent:app-store-24-filled', iconColor: '#19a2f1' },
|
||||
{ id: 4, label: '表格', icon: 'mdi:table-large', iconColor: '#fab251' },
|
||||
{ id: 5, label: '图表', icon: 'mdi:chart-areaspline', iconColor: '#8aca6b' },
|
||||
{ id: 5, label: '图表', icon: 'mdi:chart-areaspline', iconColor: '#8aca6b' }
|
||||
];
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@ -13,11 +13,11 @@ const ROUTE_KEY_SPLIT_MARK = '_';
|
||||
const SYSTEM_VIEW = 'system-view_';
|
||||
|
||||
/** 过滤掉组件文件 */
|
||||
const viewKeys = Object.keys(importViews).filter((key) => !key.includes(COMPONENTS_KEY));
|
||||
const viewKeys = Object.keys(importViews).filter(key => !key.includes(COMPONENTS_KEY));
|
||||
|
||||
function getViewComponent() {
|
||||
const components: ViewComponent = {};
|
||||
viewKeys.forEach((key) => {
|
||||
viewKeys.forEach(key => {
|
||||
const routeKey = key
|
||||
.replace(PREFIX, '')
|
||||
.replace(SUFFIX, '')
|
||||
|
||||
@ -26,13 +26,13 @@ function renderVditor() {
|
||||
minHeight: 400,
|
||||
theme: theme.darkMode ? 'dark' : 'classic',
|
||||
icon: 'material',
|
||||
cache: { enable: false },
|
||||
cache: { enable: false }
|
||||
});
|
||||
}
|
||||
|
||||
const stopHandle = watch(
|
||||
() => theme.darkMode,
|
||||
(newValue) => {
|
||||
newValue => {
|
||||
const themeMode = newValue ? 'dark' : 'classic';
|
||||
vditor.value?.setTheme(themeMode);
|
||||
}
|
||||
|
||||
@ -28,5 +28,5 @@ export const icons = [
|
||||
'ic:baseline-filter-7',
|
||||
'ic:baseline-filter-8',
|
||||
'ic:baseline-filter-9',
|
||||
'ic:baseline-filter-9-plus',
|
||||
'ic:baseline-filter-9-plus'
|
||||
];
|
||||
|
||||
@ -18,7 +18,7 @@ async function renderBaiduMap() {
|
||||
const map = new AMap.Map(domRef.value, {
|
||||
zoom: 11,
|
||||
center: [114.05834626586915, 22.546789983033168],
|
||||
viewMode: '3D',
|
||||
viewMode: '3D'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ async function renderBaiduMap() {
|
||||
const map = new TMap.Map(domRef.value, {
|
||||
center: new TMap.LatLng(39.98412, 116.307484),
|
||||
zoom: 11,
|
||||
viewMode: '3D',
|
||||
viewMode: '3D'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ interface Map {
|
||||
|
||||
const maps: Map[] = [
|
||||
{ id: 'gaode', label: '高德地图', component: GaodeMap },
|
||||
{ id: 'tencent', label: '腾讯地图', component: TencentMap },
|
||||
{ id: 'tencent', label: '腾讯地图', component: TencentMap }
|
||||
];
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@ -17,21 +17,21 @@ function printTable() {
|
||||
printJS({
|
||||
printable: [
|
||||
{ name: 'soybean', wechat: 'honghuangdc', remark: '欢迎来技术交流' },
|
||||
{ name: 'soybean', wechat: 'honghuangdc', remark: '欢迎来技术交流' },
|
||||
{ name: 'soybean', wechat: 'honghuangdc', remark: '欢迎来技术交流' }
|
||||
],
|
||||
properties: ['name', 'wechat', 'remark'],
|
||||
type: 'json',
|
||||
type: 'json'
|
||||
});
|
||||
}
|
||||
function printImage() {
|
||||
printJS({
|
||||
printable: [
|
||||
'https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/qq_qrcode.JPG',
|
||||
'https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/qq_qrcode.JPG',
|
||||
'https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/qq_qrcode.JPG'
|
||||
],
|
||||
type: 'image',
|
||||
header: 'Multiple Images',
|
||||
imageStyle: 'width:100%;',
|
||||
imageStyle: 'width:100%;'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -52,22 +52,22 @@ const swiperExample: SwiperExample[] = [
|
||||
id: 1,
|
||||
label: 'Navigation',
|
||||
options: {
|
||||
navigation: true,
|
||||
},
|
||||
navigation: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'Pagination',
|
||||
options: {
|
||||
pagination: true,
|
||||
},
|
||||
pagination: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: 'Pagination dynamic',
|
||||
options: {
|
||||
pagination: { dynamicBullets: true },
|
||||
},
|
||||
pagination: { dynamicBullets: true }
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
@ -75,9 +75,9 @@ const swiperExample: SwiperExample[] = [
|
||||
options: {
|
||||
navigation: true,
|
||||
pagination: {
|
||||
type: 'progressbar',
|
||||
},
|
||||
},
|
||||
type: 'progressbar'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
@ -85,20 +85,20 @@ const swiperExample: SwiperExample[] = [
|
||||
options: {
|
||||
navigation: true,
|
||||
pagination: {
|
||||
type: 'fraction',
|
||||
},
|
||||
},
|
||||
type: 'fraction'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: 'Slides per view',
|
||||
options: {
|
||||
pagination: {
|
||||
clickable: true,
|
||||
clickable: true
|
||||
},
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
},
|
||||
spaceBetween: 30
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
@ -106,11 +106,11 @@ const swiperExample: SwiperExample[] = [
|
||||
options: {
|
||||
navigation: true,
|
||||
pagination: {
|
||||
clickable: true,
|
||||
clickable: true
|
||||
},
|
||||
loop: true,
|
||||
},
|
||||
},
|
||||
loop: true
|
||||
}
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@ -19,7 +19,7 @@ function renderXgPlayer() {
|
||||
player.value = new Player({
|
||||
el: domRef.value,
|
||||
url,
|
||||
playbackRate: [0.5, 0.75, 1, 1.5, 2],
|
||||
playbackRate: [0.5, 0.75, 1, 1.5, 2]
|
||||
});
|
||||
}
|
||||
function destroyXgPlayer() {
|
||||
|
||||
@ -33,11 +33,11 @@ const formRef = ref<(HTMLElement & FormInst) | null>(null);
|
||||
const model = reactive({
|
||||
phone: '',
|
||||
code: '',
|
||||
imgCode: '',
|
||||
imgCode: ''
|
||||
});
|
||||
const rules = {
|
||||
phone: formRules.phone,
|
||||
code: formRules.code,
|
||||
code: formRules.code
|
||||
};
|
||||
|
||||
function handleSmsCode() {
|
||||
@ -48,7 +48,7 @@ function handleSubmit(e: MouseEvent) {
|
||||
if (!formRef.value) return;
|
||||
e.preventDefault();
|
||||
|
||||
formRef.value.validate((errors) => {
|
||||
formRef.value.validate(errors => {
|
||||
if (!errors) {
|
||||
window.$message?.success('验证成功');
|
||||
} else {
|
||||
|
||||
@ -51,13 +51,13 @@ const formRef = ref<(HTMLElement & FormInst) | null>(null);
|
||||
const model = reactive({
|
||||
phone: '',
|
||||
code: '',
|
||||
imgCode: '',
|
||||
imgCode: ''
|
||||
});
|
||||
const imgCode = ref('');
|
||||
const rules = {
|
||||
phone: formRules.phone,
|
||||
code: formRules.code,
|
||||
imgCode: getImgCodeRule(imgCode),
|
||||
imgCode: getImgCodeRule(imgCode)
|
||||
};
|
||||
|
||||
function handleSmsCode() {
|
||||
@ -68,7 +68,7 @@ function handleSubmit(e: MouseEvent) {
|
||||
if (!formRef.value) return;
|
||||
e.preventDefault();
|
||||
|
||||
formRef.value.validate((errors) => {
|
||||
formRef.value.validate(errors => {
|
||||
if (!errors) {
|
||||
const { phone, code } = model;
|
||||
login(phone, code, 'sms');
|
||||
|
||||
@ -34,7 +34,7 @@ interface Props {
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
startColor: '#28aff0',
|
||||
endColor: '#120fc4',
|
||||
endColor: '#120fc4'
|
||||
});
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@ -28,7 +28,7 @@ interface Props {
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
startColor: '#28aff0',
|
||||
endColor: '#120fc4',
|
||||
endColor: '#120fc4'
|
||||
});
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@ -51,11 +51,11 @@ const { toLoginModule } = useRouterPush();
|
||||
const formRef = ref<(HTMLElement & FormInst) | null>(null);
|
||||
const model = reactive({
|
||||
phone: '15170283876',
|
||||
pwd: 'abc123456',
|
||||
pwd: 'abc123456'
|
||||
});
|
||||
const rules: FormRules = {
|
||||
phone: formRules.phone,
|
||||
pwd: formRules.pwd,
|
||||
pwd: formRules.pwd
|
||||
};
|
||||
const rememberMe = ref(false);
|
||||
|
||||
@ -63,7 +63,7 @@ function handleSubmit(e: MouseEvent) {
|
||||
if (!formRef.value) return;
|
||||
e.preventDefault();
|
||||
|
||||
formRef.value.validate((errors) => {
|
||||
formRef.value.validate(errors => {
|
||||
if (!errors) {
|
||||
const { phone, pwd } = model;
|
||||
login(phone, pwd, 'pwd');
|
||||
|
||||
@ -41,13 +41,13 @@ const model = reactive({
|
||||
phone: '',
|
||||
code: '',
|
||||
pwd: '',
|
||||
confirmPwd: '',
|
||||
confirmPwd: ''
|
||||
});
|
||||
const rules: FormRules = {
|
||||
phone: formRules.phone,
|
||||
code: formRules.code,
|
||||
pwd: formRules.pwd,
|
||||
confirmPwd: getConfirmPwdRule(toRefs(model).pwd),
|
||||
confirmPwd: getConfirmPwdRule(toRefs(model).pwd)
|
||||
};
|
||||
|
||||
const agreement = ref(false);
|
||||
@ -60,7 +60,7 @@ function handleSubmit(e: MouseEvent) {
|
||||
if (!formRef.value) return;
|
||||
e.preventDefault();
|
||||
|
||||
formRef.value.validate((errors) => {
|
||||
formRef.value.validate(errors => {
|
||||
if (!errors) {
|
||||
if (!agreement.value) return;
|
||||
window.$message?.success('验证成功');
|
||||
|
||||
@ -40,13 +40,13 @@ const model = reactive({
|
||||
phone: '',
|
||||
code: '',
|
||||
pwd: '',
|
||||
confirmPwd: '',
|
||||
confirmPwd: ''
|
||||
});
|
||||
const rules: FormRules = {
|
||||
phone: formRules.phone,
|
||||
code: formRules.code,
|
||||
pwd: formRules.pwd,
|
||||
confirmPwd: getConfirmPwdRule(toRefs(model).pwd),
|
||||
confirmPwd: getConfirmPwdRule(toRefs(model).pwd)
|
||||
};
|
||||
|
||||
function handleSmsCode() {
|
||||
@ -57,7 +57,7 @@ function handleSubmit(e: MouseEvent) {
|
||||
if (!formRef.value) return;
|
||||
e.preventDefault();
|
||||
|
||||
formRef.value.validate((errors) => {
|
||||
formRef.value.validate(errors => {
|
||||
if (!errors) {
|
||||
window.$message?.success('验证成功');
|
||||
} else {
|
||||
|
||||
@ -57,12 +57,12 @@ const modules: LoginModule[] = [
|
||||
{ key: 'code-login', label: EnumLoginModule['code-login'], component: CodeLogin },
|
||||
{ key: 'register', label: EnumLoginModule.register, component: Register },
|
||||
{ key: 'reset-pwd', label: EnumLoginModule['reset-pwd'], component: ResetPwd },
|
||||
{ key: 'bind-wechat', label: EnumLoginModule['bind-wechat'], component: BindWechat },
|
||||
{ key: 'bind-wechat', label: EnumLoginModule['bind-wechat'], component: BindWechat }
|
||||
];
|
||||
|
||||
const activeModule = computed(() => {
|
||||
const active: LoginModule = { ...modules[0] };
|
||||
const findItem = modules.find((item) => item.key === props.module);
|
||||
const findItem = modules.find(item => item.key === props.module);
|
||||
if (findItem) {
|
||||
Object.assign(active, findItem);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user