bf1942/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-12-25 22:30:19 +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

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 };