jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): 用NCard组件替换ShadowCard

Browse Source
This commit is contained in:
Soybean
2021-11-06 01:53:17 +08:00
parent 4487f9fbdc
commit 048eae6748
16 changed files with 167 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/views/dashboard/analysis/components/BottomPart/index.vue
View File

@ -1,24 +1,27 @@
<template>
<n-grid :x-gap="16" :y-gap="16" :item-responsive="true" responsive="screen">
<n-grid-item span="s:24 m:8">
<shadow-card class="h-400px p-18px">
<n-timeline>
<n-timeline-item v-for="item in timelines" :key="item.type" v-bind="item" />
</n-timeline>
</shadow-card>
<n-card title="时间线" :bordered="false" class="rounded-16px shadow-sm">
<div class="h-360px">
<n-timeline>
<n-timeline-item v-for="item in timelines" :key="item.type" v-bind="item" />
</n-timeline>
</div>
</n-card>
</n-grid-item>
<n-grid-item span="s:24 m:16">
<shadow-card class="h-400px p-18px">
<n-data-table size="small" :columns="columns" :data="tableData" />
</shadow-card>
<n-card title="表格" :bordered="false" class="rounded-16px shadow-sm">
<div class="h-360px">
<n-data-table size="small" :columns="columns" :data="tableData" />
</div>
</n-card>
</n-grid-item>
</n-grid>
</template>
<script setup lang="ts">
import { h } from 'vue';
import { NGrid, NGridItem, NTimeline, NTimelineItem, NDataTable, NTag } from 'naive-ui';
import { ShadowCard } from '@/components';
import { NGrid, NGridItem, NCard, NTimeline, NTimelineItem, NDataTable, NTag } from 'naive-ui';
interface TimelineData {
type: 'default' | 'info' | 'success' | 'warning' | 'error';

2
src/views/dashboard/analysis/components/DataCard/components/GradientBg.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="bg-gradient wh-full p-16px text-white">
<div class="bg-gradient p-16px rounded-16px text-white">
<slot></slot>
</div>
</template>

28
src/views/dashboard/analysis/components/DataCard/index.vue
View File

@ -1,20 +1,18 @@
<template>
<n-grid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
<n-grid-item v-for="item in cardData" :key="item.id">
<shadow-card class="h-100px">
<gradient-bg :start-color="item.colors[0]" :end-color="item.colors[1]">
<h3 class="text-16px">{{ item.title }}</h3>
<div class="flex justify-between pt-12px">
<component :is="item.icon" class="text-32px" />
<count-to
:prefix="item.unit"
:start-value="1"
:end-value="item.value"
class="text-30px text-white dark:text-dark"
/>
</div>
</gradient-bg>
</shadow-card>
<gradient-bg class="h-100px" :start-color="item.colors[0]" :end-color="item.colors[1]">
<h3 class="text-16px">{{ item.title }}</h3>
<div class="flex justify-between pt-12px">
<component :is="item.icon" class="text-32px" />
<count-to
:prefix="item.unit"
:start-value="1"
:end-value="item.value"
class="text-30px text-white dark:text-dark"
/>
</div>
</gradient-bg>
</n-grid-item>
</n-grid>
</template>
@ -24,7 +22,7 @@ import type { VNodeChild } from 'vue';
import { NGrid, NGridItem } from 'naive-ui';
import { BarChartOutlined, MoneyCollectOutlined, TrademarkOutlined } from '@vicons/antd';
import { DocumentDownload } from '@vicons/carbon';
import { ShadowCard, CountTo } from '@/components';
import { CountTo } from '@/components';
import { dynamicIconRender } from '@/utils';
import { GradientBg } from './components';

48
src/views/dashboard/analysis/components/TopChart/index.vue
View File

@ -1,36 +1,38 @@
<template>
<n-grid :x-gap="16" :y-gap="16" :item-responsive="true" responsive="screen">
<n-grid-item span="s:24 m:16">
<shadow-card class="flex h-360px p-18px">
<div class="w-200px h-full py-12px">
<h3 class="text-16px font-bold">Dashboard</h3>
<p class="text-[#aaa]">Overview Of Lasted Month</p>
<h3 class="pt-36px text-24px font-bold">
<count-to prefix="$" :start-value="0" :end-value="7754" />
</h3>
<p class="text-[#aaa]">Current Month Earnings</p>
<h3 class="pt-36px text-24px font-bold">
<count-to :start-value="0" :end-value="1234" />
</h3>
<p class="text-[#aaa]">Current Month Sales</p>
<n-button class="mt-24px" type="primary">Last Month Summary</n-button>
<n-card :bordered="false" class="rounded-16px shadow-sm">
<div class="flex h-360px">
<div class="w-200px h-full py-12px">
<h3 class="text-16px font-bold">Dashboard</h3>
<p class="text-[#aaa]">Overview Of Lasted Month</p>
<h3 class="pt-36px text-24px font-bold">
<count-to prefix="$" :start-value="0" :end-value="7754" />
</h3>
<p class="text-[#aaa]">Current Month Earnings</p>
<h3 class="pt-36px text-24px font-bold">
<count-to :start-value="0" :end-value="1234" />
</h3>
<p class="text-[#aaa]">Current Month Sales</p>
<n-button class="mt-24px" type="primary">Last Month Summary</n-button>
</div>
<div ref="lineRef" class="flex-1 h-full"></div>
</div>
<div ref="lineRef" class="flex-1 h-full"></div>
</shadow-card>
</n-card>
</n-grid-item>
<n-grid-item span="s:24 m:8">
<shadow-card class="h-360px">
<div ref="pieRef" class="wh-full"></div>
</shadow-card>
<n-card :bordered="false" class="rounded-16px shadow-sm">
<div ref="pieRef" class="w-full h-360px"></div>
</n-card>
</n-grid-item>
</n-grid>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { NGrid, NGridItem, NButton } from 'naive-ui';
import { NGrid, NGridItem, NCard, NButton } from 'naive-ui';
import { Line, Pie } from '@antv/g2plot';
import { ShadowCard, CountTo } from '@/components';
import { CountTo } from '@/components';
import data from './data.json';
const lineRef = ref<HTMLElement | null>(null);
@ -83,11 +85,9 @@ function renderPieChart() {
}
},
label: {
type: 'spider',
offset: '8%',
type: 'inner',
autoRotate: false,
formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
style: { fontSize: 18 }
formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`
},
statistic: undefined,
pieStyle: {

47
src/views/dashboard/workbench/components/HeaderInfo/index.vue
View File

@ -1,47 +0,0 @@
<template>
<shadow-card class="flex-y-center justify-between h-120px p-12px">
<div class="flex-y-center">
<img src="@/assets/svg/avatar/avatar01.svg" alt="" class="w-70px h-70px" />
<div class="pl-12px">
<h3 class="text-18px font-semibold">早安，{{ auth.userInfo.userName }}, 今天又是充满活力的一天！</h3>
<p class="leading-30px text-[#999]">今日多云转晴，20℃ - 25℃！</p>
</div>
</div>
<n-space :size="36">
<n-statistic v-for="item in statisticData" :key="item.id" v-bind="item"></n-statistic>
</n-space>
</shadow-card>
</template>
<script setup lang="ts">
import { NSpace, NStatistic } from 'naive-ui';
import { useAuthStore } from '@/store';
import { ShadowCard } from '@/components';
interface StatisticData {
id: number;
label: string;
value: string;
}
const auth = useAuthStore();
const statisticData: StatisticData[] = [
{
id: 0,
label: '经验',
value: '3年'
},
{
id: 1,
label: '项目数量',
value: '10+'
},
{
id: 2,
label: '主要技术栈',
value: 'TS,Vue3,React,Nodejs'
}
];
</script>
<style scoped></style>

48
src/views/dashboard/workbench/components/WorkbenchHeader/index.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<n-card :bordered="false" class="rounded-16px shadow-sm">
<div class="flex-y-center justify-between">
<div class="flex-y-center">
<img src="@/assets/svg/avatar/avatar01.svg" alt="" class="w-70px h-70px" />
<div class="pl-12px whitespace-nowrap">
<h3 class="text-18px font-semibold">早安，{{ auth.userInfo.userName }}, 今天又是充满活力的一天！</h3>
<p class="leading-30px text-[#999]">今日多云转晴，20℃ - 25℃！</p>
</div>
</div>
<n-space :size="36">
<n-statistic v-for="item in statisticData" :key="item.id" v-bind="item"></n-statistic>
</n-space>
</div>
</n-card>
</template>
<script setup lang="ts">
import { NCard, NSpace, NStatistic } from 'naive-ui';
import { useAuthStore } from '@/store';
interface StatisticData {
id: number;
label: string;
value: string;
}
const auth = useAuthStore();
const statisticData: StatisticData[] = [
{
id: 0,
label: '项目数',
value: '25'
},
{
id: 1,
label: '待办',
value: '4/16'
},
{
id: 2,
label: '消息',
value: '12'
}
];
</script>
<style scoped></style>

29
src/views/dashboard/workbench/components/WorkbenchMain/index.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<n-grid cols="s:1 m:2" responsive="screen" :x-gap="16" :y-gap="16">
<n-grid-item>
<n-space :vertical="true" :size="16">
<n-card title="项目" :bordered="false" size="small" class="shadow-sm rounded-16px">
<template #header-extra>
<a class="g_text-primary" href="javascript:;">全部项目</a>
</template>
</n-card>
<n-card title="动态" :bordered="false" size="small" class="shadow-sm rounded-16px">
<template #header-extra>
<a class="g_text-primary" href="javascript:;">更多动态</a>
</template>
</n-card>
</n-space>
</n-grid-item>
<n-grid-item>
<n-space :vertical="true" :size="16">
<n-card title="快捷操作" :bordered="false" size="small" class="shadow-sm rounded-16px"></n-card>
<n-card title="XX指数" :bordered="false" size="small" class="shadow-sm rounded-16px"></n-card>
</n-space>
</n-grid-item>
</n-grid>
</template>
<script setup lang="ts">
import { NGrid, NGridItem, NSpace, NCard } from 'naive-ui';
</script>
<style scoped></style>

5
src/views/dashboard/workbench/components/index.ts
View File

@ -1,3 +1,4 @@
import HeaderInfo from './HeaderInfo/index.vue';
import WorkbenchHeader from './WorkbenchHeader/index.vue';
import WorkbenchMain from './WorkbenchMain/index.vue';
export { HeaderInfo };
export { WorkbenchHeader, WorkbenchMain };

20
src/views/dashboard/workbench/index.vue
View File

@ -1,25 +1,11 @@
<template>
<n-space :vertical="true" :size="16">
<header-info />
<workbench-header />
<workbench-main />
</n-space>
</template>
<script lang="ts" setup>
import { onActivated } from 'vue';
import { NSpace } from 'naive-ui';
import { useLoading } from '@/hooks';
import { HeaderInfo } from './components';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { loading, startLoading, endLoading } = useLoading(true);
function handleEndLoading() {
startLoading();
setTimeout(() => {
endLoading();
}, 800);
}
onActivated(() => {
handleEndLoading();
});
import { WorkbenchHeader, WorkbenchMain } from './components';
</script>
<style scoped></style>