mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
refactor(projects): 细节完善
This commit is contained in:
Soybean
97
src/components/business/LoadingEmptyWrapper/index.vue
Normal file
97
src/components/business/LoadingEmptyWrapper/index.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div v-if="reloadFlag" class="relative">
|
||||
<slot></slot>
|
||||
<div v-show="showPlaceholder" class="absolute-lt w-full h-full" :class="placeholderClass">
|
||||
<div v-show="loading" class="absolute-center">
|
||||
<n-spin :show="true" :size="loadingSize" />
|
||||
</div>
|
||||
<div v-show="isEmpty" class="absolute-center">
|
||||
<div class="relative" :class="emptyNetworkClass">
|
||||
<svg-empty-data class="text-primary" />
|
||||
<p class="absolute-lb w-full text-center">{{ emptyDesc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="!network" class="absolute-center">
|
||||
<div
|
||||
class="relative"
|
||||
:class="[{ 'cursor-pointer': showNetworkReload }, emptyNetworkClass]"
|
||||
@click="handleReload"
|
||||
>
|
||||
<svg-network-error class="text-primary" />
|
||||
<p class="absolute-lb w-full text-center">{{ networkErrorDesc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, watch, nextTick, onUnmounted } from 'vue';
|
||||
import { NSpin } from 'naive-ui';
|
||||
import { NETWORK_ERROR_MSG } from '@/config';
|
||||
import { SvgEmptyData, SvgNetworkError } from '@/components';
|
||||
import { useBoolean } from '@/hooks';
|
||||
|
||||
interface Props {
|
||||
/** 是否加载 */
|
||||
loading: boolean;
|
||||
/** 是否为空 */
|
||||
empty?: boolean;
|
||||
/** 加载图标的大小 */
|
||||
loadingSize?: 'small' | 'medium' | 'large';
|
||||
/** 中间占位符的class */
|
||||
placeholderClass?: string;
|
||||
/** 空数据描述文本 */
|
||||
emptyDesc?: string;
|
||||
/** 空数据和网络异常占位class */
|
||||
emptyNetworkClass?: string;
|
||||
/** 显示网络异常的重试点击按钮 */
|
||||
showNetworkReload?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false,
|
||||
empty: false,
|
||||
loadingSize: 'medium',
|
||||
placeholderClass: 'bg-white',
|
||||
emptyDesc: '暂无数据',
|
||||
emptyNetworkClass: 'w-320px h-320px text-16px text-[#666]',
|
||||
showNetworkReload: false
|
||||
});
|
||||
|
||||
// 网络状态
|
||||
const { bool: network, setBool: setNetwork } = useBoolean(window.navigator.onLine);
|
||||
const { bool: reloadFlag, setBool: setReload } = useBoolean(true);
|
||||
|
||||
// 数据是否为空
|
||||
const isEmpty = computed(() => props.empty && !props.loading && network.value);
|
||||
|
||||
const showPlaceholder = computed(() => props.loading || isEmpty.value || !network.value);
|
||||
|
||||
const networkErrorDesc = computed(() =>
|
||||
props.showNetworkReload ? `${NETWORK_ERROR_MSG}, 点击重试` : NETWORK_ERROR_MSG
|
||||
);
|
||||
|
||||
function handleReload() {
|
||||
if (!props.showNetworkReload) return;
|
||||
setReload(false);
|
||||
nextTick(() => {
|
||||
setReload(true);
|
||||
});
|
||||
}
|
||||
|
||||
const stopHandle = watch(
|
||||
() => props.loading,
|
||||
newValue => {
|
||||
// 结束加载判断一下网络状态
|
||||
if (!newValue) {
|
||||
setNetwork(window.navigator.onLine);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
stopHandle();
|
||||
});
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -1,3 +1,4 @@
|
||||
import LoadingEmptyWrapper from './LoadingEmptyWrapper/index.vue';
|
||||
import LoginAgreement from './LoginAgreement/index.vue';
|
||||
|
||||
export { LoginAgreement };
|
||||
export { LoadingEmptyWrapper, LoginAgreement };
|
||||
|
||||
37
src/typings/common/route.d.ts
vendored
37
src/typings/common/route.d.ts
vendored
@ -22,15 +22,19 @@ declare namespace AuthRoute {
|
||||
| 'document_vite'
|
||||
| 'document_naive'
|
||||
| 'document_project'
|
||||
| 'component'
|
||||
| 'component_button'
|
||||
| 'component_card'
|
||||
| 'component_table'
|
||||
| 'exception'
|
||||
| 'exception_403'
|
||||
| 'exception_404'
|
||||
| 'exception_500'
|
||||
| 'multi-menu'
|
||||
| 'multi-menu_first'
|
||||
| 'multi-menu_first_second'
|
||||
| 'multi-menu_first_second-new'
|
||||
| 'multi-menu_first_second-new_third'
|
||||
| 'exception'
|
||||
| 'exception_403'
|
||||
| 'exception_404'
|
||||
| 'exception_500'
|
||||
| 'about';
|
||||
|
||||
/** 路由的path */
|
||||
@ -55,20 +59,20 @@ declare namespace AuthRoute {
|
||||
title: string;
|
||||
/** 路由的动态路径 */
|
||||
dynamicPath?: PathToDynamicPath<'/login'>;
|
||||
/** 作为单独路由的父级路由布局组件 */
|
||||
/** 作为单级路由的父级路由布局组件 */
|
||||
singleLayout?: Extract<RouteComponent, 'basic' | 'blank'>;
|
||||
/** 需要登录权限 */
|
||||
requiresAuth?: boolean;
|
||||
/** 哪些类型的用户有权限才能访问的路由 */
|
||||
/** 哪些类型的用户有权限才能访问的路由(空的话则表示不需要权限) */
|
||||
permissions?: Auth.RoleType[];
|
||||
/** 缓存页面 */
|
||||
keepAlive?: boolean;
|
||||
/** 菜单和面包屑对应的图标 */
|
||||
icon?: string;
|
||||
/** 外链链接 */
|
||||
href?: string;
|
||||
/** 是否在菜单中隐藏 */
|
||||
hide?: boolean;
|
||||
/** 外链链接 */
|
||||
href?: string;
|
||||
/** 路由顺序，可用于菜单的排序 */
|
||||
order?: number;
|
||||
/** 表示是否是多级路由的中间级路由(用于转换路由数据时筛选多级路由的标识，定义路由时不用填写) */
|
||||
@ -102,14 +106,11 @@ declare namespace AuthRoute {
|
||||
/** 单独一级路由的key (单独路由需要添加一个父级路由用于应用布局组件) */
|
||||
type SingleRouteKey = Exclude<
|
||||
GetSingleRouteKey<RouteKey>,
|
||||
GetMultiRouteParentKey<RouteKey> | 'root' | 'not-found-page'
|
||||
GetRouteFirstParentKey<RouteKey> | 'root' | 'not-found-page'
|
||||
>;
|
||||
/** 单独路由父级路由key */
|
||||
type SingleRouteParentKey = `${SingleRouteKey}-parent`;
|
||||
|
||||
/** 单独路由path */
|
||||
type SingleRoutePath = KeyToPath<SingleRouteKey>;
|
||||
|
||||
/** 单独路由父级路由path */
|
||||
type SingleRouteParentPath = KeyToPath<SingleRouteParentKey>;
|
||||
|
||||
@ -124,12 +125,12 @@ declare namespace AuthRoute {
|
||||
| `${Path}/:module(${string})`
|
||||
| `${Path}/:module(${string})?`;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
type GetSingleRouteKey<Key extends RouteKey> = Key extends `${infer Left}${RouteSplitMark}${infer Right}`
|
||||
? never
|
||||
: Key;
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
type GetMultiRouteParentKey<Key extends RouteKey> = Key extends `${infer Left}${RouteSplitMark}${infer Right}`
|
||||
/** 获取一级路由(包括有子路由的一级路由) */
|
||||
type GetSingleRouteKey<Key extends RouteKey> =
|
||||
Key extends `${infer IgnoredLeft}${RouteSplitMark}${infer IgnoredRight}` ? never : Key;
|
||||
|
||||
/** 获取子路由的一级父路由 */
|
||||
type GetRouteFirstParentKey<Key extends RouteKey> = Key extends `${infer Left}${RouteSplitMark}${infer IgnoredRight}`
|
||||
? Left
|
||||
: never;
|
||||
}
|
||||
|
||||
@ -21,3 +21,14 @@ export function transformToTimeCountDown(seconds: number) {
|
||||
const second = fillZero(seconds - minuteNum * SECONDS_A_MINUTE);
|
||||
return `${minute}: ${second}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定整数范围内的随机整数
|
||||
* @param start - 开始范围
|
||||
* @param end - 结束范围
|
||||
*/
|
||||
export function getRandomInterger(end: number, start: number = 0) {
|
||||
const range = end - start;
|
||||
const random = Math.floor(Math.random() * range + start);
|
||||
return random;
|
||||
}
|
||||
|
||||
@ -12,9 +12,12 @@ import {
|
||||
DocumentVueNew,
|
||||
DocumentVite,
|
||||
DocumentNaive,
|
||||
About,
|
||||
ComponentButton,
|
||||
ComponentCard,
|
||||
ComponentTable,
|
||||
MultiMenuFirstSecond,
|
||||
MultiMenuFirstSecondNewThird
|
||||
MultiMenuFirstSecondNewThird,
|
||||
About
|
||||
} from '@/views';
|
||||
import type { LayoutComponentName } from '@/interface';
|
||||
|
||||
@ -39,6 +42,7 @@ type ViewComponentKey = Exclude<
|
||||
| 'dashboard'
|
||||
| 'document'
|
||||
| 'document_project'
|
||||
| 'component'
|
||||
| 'multi-menu'
|
||||
| 'multi-menu_first'
|
||||
| 'multi-menu_first_second-new'
|
||||
@ -63,12 +67,15 @@ export function getViewComponent(routeKey: AuthRoute.RouteKey) {
|
||||
'document_vue-new',
|
||||
'document_vite',
|
||||
'document_naive',
|
||||
'about',
|
||||
'multi-menu_first_second',
|
||||
'multi-menu_first_second-new_third',
|
||||
'component_button',
|
||||
'component_card',
|
||||
'component_table',
|
||||
'exception_403',
|
||||
'exception_404',
|
||||
'exception_500',
|
||||
'multi-menu_first_second',
|
||||
'multi-menu_first_second-new_third',
|
||||
'about',
|
||||
'not-found-page'
|
||||
];
|
||||
|
||||
@ -85,13 +92,16 @@ export function getViewComponent(routeKey: AuthRoute.RouteKey) {
|
||||
'document_vue-new': DocumentVueNew,
|
||||
document_vite: DocumentVite,
|
||||
document_naive: DocumentNaive,
|
||||
'multi-menu_first_second': MultiMenuFirstSecond,
|
||||
'multi-menu_first_second-new_third': MultiMenuFirstSecondNewThird,
|
||||
'not-found-page': NotFound,
|
||||
component_button: ComponentButton,
|
||||
component_card: ComponentCard,
|
||||
component_table: ComponentTable,
|
||||
exception_403: NoPermission,
|
||||
exception_404: NotFound,
|
||||
exception_500: ServiceError,
|
||||
about: About
|
||||
'multi-menu_first_second': MultiMenuFirstSecond,
|
||||
'multi-menu_first_second-new_third': MultiMenuFirstSecondNewThird,
|
||||
about: About,
|
||||
'not-found-page': NotFound
|
||||
};
|
||||
|
||||
return () => setViewComponentName(viewComponent[key], key) as Promise<Component>;
|
||||
|
||||
576
src/views/component/button/index.vue
Normal file
576
src/views/component/button/index.vue
Normal file
@ -0,0 +1,576 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card title="按钮" class="h-full shadow-sm rounded-16px">
|
||||
<n-grid cols="s:1 m:2" responsive="screen" :x-gap="16" :y-gap="16">
|
||||
<n-grid-item v-for="item in buttonExample" :key="item.id">
|
||||
<n-card :title="item.label" class="min-h-180px">
|
||||
<p v-if="item.desc" class="pb-16px">{{ item.desc }}</p>
|
||||
<n-space>
|
||||
<n-button
|
||||
v-for="button in item.buttons"
|
||||
:key="button.id"
|
||||
v-bind="button.props"
|
||||
:style="`--icon-margin: ${button.props.circle ? 0 : 6}px`"
|
||||
>
|
||||
<template v-if="button.icon" #icon>
|
||||
<Icon :icon="button.icon" />
|
||||
</template>
|
||||
{{ button.label }}
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
<n-grid-item class="h-180px">
|
||||
<n-card title="加载中" class="h-full">
|
||||
<p class="pb-16px">按钮有加载状态。</p>
|
||||
<n-space>
|
||||
<n-button :loading="loading" type="primary" @click="startLoading">开始加载</n-button>
|
||||
<n-button @click="endLoading">取消加载</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NCard, NGrid, NGridItem, NSpace, NButton } from 'naive-ui';
|
||||
import type { ButtonProps } from 'naive-ui';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { useLoading } from '@/hooks';
|
||||
|
||||
interface ButtonDetail {
|
||||
id: number;
|
||||
props: ButtonProps & { href?: string; target?: string };
|
||||
label?: string;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
interface ButtonExample {
|
||||
id: number;
|
||||
label: string;
|
||||
buttons: ButtonDetail[];
|
||||
desc?: string;
|
||||
}
|
||||
|
||||
const { loading, startLoading, endLoading } = useLoading();
|
||||
|
||||
const buttonExample: ButtonExample[] = [
|
||||
{
|
||||
id: 0,
|
||||
label: '基础',
|
||||
buttons: [
|
||||
{
|
||||
id: 0,
|
||||
props: {},
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: { type: 'tertiary' },
|
||||
label: 'Tertiary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: { type: 'primary' },
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: { type: 'info' },
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
props: { type: 'success' },
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
props: { type: 'warning' },
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
props: { type: 'error' },
|
||||
label: 'Error'
|
||||
}
|
||||
],
|
||||
desc: '按钮的 type 分别为 default、primary、info、success、warning 和 error。'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
label: '次要按钮',
|
||||
buttons: [
|
||||
{
|
||||
id: 0,
|
||||
props: { strong: true, secondary: true },
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: { strong: true, secondary: true, type: 'tertiary' },
|
||||
label: 'Tertiary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: { strong: true, secondary: true, type: 'primary' },
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: { strong: true, secondary: true, type: 'info' },
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
props: { strong: true, secondary: true, type: 'success' },
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
props: { strong: true, secondary: true, type: 'warning' },
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
props: { strong: true, secondary: true, type: 'error' },
|
||||
label: 'Error'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
props: { strong: true, secondary: true, round: true },
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
props: { strong: true, secondary: true, round: true, type: 'tertiary' },
|
||||
label: 'Tertiary'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
props: { strong: true, secondary: true, round: true, type: 'primary' },
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
props: { strong: true, secondary: true, round: true, type: 'info' },
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
props: { strong: true, secondary: true, round: true, type: 'success' },
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
props: { strong: true, secondary: true, round: true, type: 'warning' },
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
props: { strong: true, secondary: true, round: true, type: 'error' },
|
||||
label: 'Error'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '次次要按钮',
|
||||
buttons: [
|
||||
{
|
||||
id: 0,
|
||||
props: { tertiary: true },
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: { tertiary: true, type: 'primary' },
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: { tertiary: true, type: 'info' },
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: { tertiary: true, type: 'success' },
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
props: { tertiary: true, type: 'warning' },
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
props: { tertiary: true, type: 'error' },
|
||||
label: 'Error'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
props: { tertiary: true, round: true },
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
props: { tertiary: true, round: true, type: 'primary' },
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
props: { tertiary: true, round: true, type: 'info' },
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
props: { tertiary: true, round: true, type: 'success' },
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
props: { tertiary: true, round: true, type: 'warning' },
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
props: { tertiary: true, round: true, type: 'error' },
|
||||
label: 'Error'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: '次次次要按钮',
|
||||
buttons: [
|
||||
{
|
||||
id: 0,
|
||||
props: { quaternary: true },
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: { quaternary: true, type: 'primary' },
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: { quaternary: true, type: 'info' },
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: { quaternary: true, type: 'success' },
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
props: { quaternary: true, type: 'warning' },
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
props: { quaternary: true, type: 'error' },
|
||||
label: 'Error'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
props: { quaternary: true, round: true },
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
props: { quaternary: true, round: true, type: 'primary' },
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
props: { quaternary: true, round: true, type: 'info' },
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
props: { quaternary: true, round: true, type: 'success' },
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
props: { quaternary: true, round: true, type: 'warning' },
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
props: { quaternary: true, round: true, type: 'error' },
|
||||
label: 'Error'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: '虚线按钮',
|
||||
buttons: [
|
||||
{
|
||||
id: 0,
|
||||
props: { dashed: true },
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: { dashed: true, type: 'tertiary' },
|
||||
label: 'Tertiary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: { dashed: true, type: 'primary' },
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: { dashed: true, type: 'info' },
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
props: { dashed: true, type: 'success' },
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
props: { dashed: true, type: 'warning' },
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
props: { dashed: true, type: 'error' },
|
||||
label: 'Error'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: '尺寸',
|
||||
buttons: [
|
||||
{
|
||||
id: 0,
|
||||
props: { size: 'tiny', strong: true },
|
||||
label: '小小'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: { size: 'small', strong: true },
|
||||
label: '小'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: { size: 'medium', strong: true },
|
||||
label: '不小'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: { size: 'large', strong: true },
|
||||
label: '不不小'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: '文本按钮',
|
||||
buttons: [
|
||||
{
|
||||
id: 0,
|
||||
props: { text: true },
|
||||
label: '那车头依然吐着烟',
|
||||
icon: 'mdi:train'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
label: '自定义标签按钮',
|
||||
buttons: [
|
||||
{
|
||||
id: 0,
|
||||
props: {
|
||||
text: true,
|
||||
tag: 'a',
|
||||
href: 'https://github.com/honghuangdc/soybean-admin',
|
||||
target: '_blank',
|
||||
type: 'primary'
|
||||
},
|
||||
label: 'soybean-admin'
|
||||
}
|
||||
],
|
||||
desc: '你可以把按钮渲染成不同的标签，比如 a标签 。'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
label: '按钮禁用',
|
||||
buttons: [
|
||||
{
|
||||
id: 0,
|
||||
props: {
|
||||
disabled: true
|
||||
},
|
||||
label: '不许点'
|
||||
}
|
||||
],
|
||||
desc: '按钮可以被禁用'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
label: '图标按钮',
|
||||
buttons: [
|
||||
{
|
||||
id: 0,
|
||||
props: {
|
||||
secondary: true,
|
||||
strong: true
|
||||
},
|
||||
label: '+100元',
|
||||
icon: 'mdi:cash-100'
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
props: {
|
||||
iconPlacement: 'right',
|
||||
secondary: true,
|
||||
strong: true
|
||||
},
|
||||
label: '+100元',
|
||||
icon: 'mdi:cash-100'
|
||||
}
|
||||
],
|
||||
desc: '在按钮上使用图标。'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
label: '不同形状按钮',
|
||||
buttons: [
|
||||
{
|
||||
id: 0,
|
||||
props: {
|
||||
circle: true
|
||||
},
|
||||
icon: 'mdi:cash-100'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: {
|
||||
round: true
|
||||
},
|
||||
label: '圆角'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: {},
|
||||
label: '方'
|
||||
}
|
||||
],
|
||||
desc: '按钮拥有不同的形状。'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
label: '透明背景按钮',
|
||||
buttons: [
|
||||
{
|
||||
id: 0,
|
||||
props: { ghost: true },
|
||||
label: 'Default'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: { ghost: true, type: 'tertiary' },
|
||||
label: 'Tertiary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: { ghost: true, type: 'primary' },
|
||||
label: 'Primary'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: { ghost: true, type: 'info' },
|
||||
label: 'Info'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
props: { ghost: true, type: 'success' },
|
||||
label: 'Success'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
props: { ghost: true, type: 'warning' },
|
||||
label: 'Warning'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
props: { ghost: true, type: 'error' },
|
||||
label: 'Error'
|
||||
}
|
||||
],
|
||||
desc: 'Ghost 按钮有透明的背景。'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
label: '自定义颜色',
|
||||
buttons: [
|
||||
{
|
||||
id: 0,
|
||||
props: {
|
||||
color: '#8a2be2'
|
||||
},
|
||||
label: '#8a2be2',
|
||||
icon: 'ic:baseline-color-lens'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
props: {
|
||||
color: '#ff69b4'
|
||||
},
|
||||
label: '#ff69b4',
|
||||
icon: 'ic:baseline-color-lens'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
props: {
|
||||
color: '#8a2be2',
|
||||
ghost: true
|
||||
},
|
||||
label: '#8a2be2',
|
||||
icon: 'ic:baseline-color-lens'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
props: {
|
||||
color: '#ff69b4',
|
||||
ghost: true
|
||||
},
|
||||
label: '#ff69b4',
|
||||
icon: 'ic:baseline-color-lens'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
props: {
|
||||
color: '#8a2be2',
|
||||
text: true
|
||||
},
|
||||
label: '#8a2be2',
|
||||
icon: 'ic:baseline-color-lens'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
props: {
|
||||
color: '#ff69b4',
|
||||
text: true
|
||||
},
|
||||
label: '#ff69b4',
|
||||
icon: 'ic:baseline-color-lens'
|
||||
}
|
||||
],
|
||||
desc: '这两个颜色看起来像毒蘑菇。'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<style scoped></style>
|
||||
43
src/views/component/card/index.vue
Normal file
43
src/views/component/card/index.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card title="卡片" class="h-full shadow-sm rounded-16px">
|
||||
<n-space :vertical="true">
|
||||
<n-card title="基本用法">
|
||||
<p class="pb-16px">基础卡片</p>
|
||||
<n-card title="卡片">卡片内容</n-card>
|
||||
</n-card>
|
||||
<n-card title="尺寸">
|
||||
<p class="pb-16px">卡片有 small、medium、large、huge 尺寸。</p>
|
||||
<n-space vertical>
|
||||
<n-card title="小卡片" size="small">卡片内容</n-card>
|
||||
<n-card title="中卡片" size="medium">卡片内容</n-card>
|
||||
<n-card title="大卡片" size="large">卡片内容</n-card>
|
||||
<n-card title="超大卡片" size="huge">卡片内容</n-card>
|
||||
</n-space>
|
||||
</n-card>
|
||||
<n-card title="文本按钮">
|
||||
<p class="pb-16px">
|
||||
content 和 footer 可以被 hard 或 soft 分段，action 可以被分段。分段分割线会在区域的上方出现。
|
||||
</p>
|
||||
<n-card
|
||||
title="卡片分段示例"
|
||||
:segmented="{
|
||||
content: true,
|
||||
footer: 'soft'
|
||||
}"
|
||||
>
|
||||
<template #header-extra>#header-extra</template>
|
||||
卡片内容
|
||||
<template #footer>#footer</template>
|
||||
<template #action>#action</template>
|
||||
</n-card>
|
||||
</n-card>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NCard, NSpace } from 'naive-ui';
|
||||
</script>
|
||||
<style scoped></style>
|
||||
5
src/views/component/index.ts
Normal file
5
src/views/component/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
const ComponentButton = () => import('./button/index.vue');
|
||||
const ComponentCard = () => import('./card/index.vue');
|
||||
const ComponentTable = () => import('./table/index.vue');
|
||||
|
||||
export { ComponentButton, ComponentCard, ComponentTable };
|
||||
85
src/views/component/table/index.vue
Normal file
85
src/views/component/table/index.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card title="表格" class="h-full shadow-sm rounded-16px">
|
||||
<n-space :vertical="true">
|
||||
<n-space>
|
||||
<n-button @click="getDataSource">有数据</n-button>
|
||||
<n-button @click="getEmptyDataSource">空数据</n-button>
|
||||
</n-space>
|
||||
<loading-empty-wrapper class="h-480px" :loading="loading" :empty="empty">
|
||||
<n-data-table :columns="columns" :data="dataSource" :flex-height="true" class="h-480px" />
|
||||
</loading-empty-wrapper>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { NCard, NSpace, NButton, NDataTable } from 'naive-ui';
|
||||
import type { DataTableColumn } from 'naive-ui';
|
||||
import { LoadingEmptyWrapper } from '@/components';
|
||||
import { useLoadingEmpty } from '@/hooks';
|
||||
import { getRandomInterger } from '@/utils';
|
||||
|
||||
interface DataSource {
|
||||
name: string;
|
||||
age: number;
|
||||
address: string;
|
||||
}
|
||||
|
||||
const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty();
|
||||
|
||||
const columns: DataTableColumn[] = [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age'
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address'
|
||||
}
|
||||
];
|
||||
|
||||
const dataSource = ref<DataSource[]>([]);
|
||||
|
||||
function createDataSource(): DataSource[] {
|
||||
return Array(100)
|
||||
.fill(1)
|
||||
.map((_item, index) => {
|
||||
return {
|
||||
name: `Name${index}`,
|
||||
age: getRandomInterger(30, 20),
|
||||
address: '中国'
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function getDataSource() {
|
||||
startLoading();
|
||||
setTimeout(() => {
|
||||
dataSource.value = createDataSource();
|
||||
endLoading();
|
||||
setEmpty(!dataSource.value.length);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function getEmptyDataSource() {
|
||||
startLoading();
|
||||
setTimeout(() => {
|
||||
dataSource.value = [];
|
||||
endLoading();
|
||||
setEmpty(!dataSource.value.length);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDataSource();
|
||||
});
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -1,5 +1,6 @@
|
||||
export * from './system';
|
||||
export * from './dashboard';
|
||||
export * from './document';
|
||||
export * from './component';
|
||||
export * from './about';
|
||||
export * from './multi-menu';
|
||||
|
||||
Reference in New Issue
Block a user