GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/custom/ShadowCard/index.vue
View File

@ -1,8 +0,0 @@
<template>
<div class="overflow-hidden shadow-sm rounded-16px bg-light dark:bg-dark">
<slot></slot>
</div>
</template>
<script setup lang="ts"></script>
<style scoped></style>

3
src/components/custom/index.ts
View File

@ -2,7 +2,6 @@ import CountTo from './CountTo/index.vue';
import IconClose from './IconClose/index.vue';
import ButtonTab from './ButtonTab/index.vue';
import ChromeTab from './ChromeTab/index.vue';
import ShadowCard from './ShadowCard/index.vue';
import BetterScroll from './BetterScroll/index.vue';
export { CountTo, IconClose, ButtonTab, ChromeTab, ShadowCard, BetterScroll };
export { CountTo, IconClose, ButtonTab, ChromeTab, BetterScroll };

7
src/views/about/components/DevDependency/index.vue
View File

@ -1,16 +1,15 @@
<template>
<shadow-card class="p-18px !rounded-4px">
<h3 class="pb-18px text-16px font-semibold">开发环境依赖</h3>
<n-card title="开发环境依赖" :bordered="false" size="small" class="rounded-16px shadow-sm">
<n-descriptions label-placement="left" bordered size="small">
<n-descriptions-item v-for="item in dependencies" :key="item.name" :label="item.name">
{{ item.version }}
</n-descriptions-item>
</n-descriptions>
</shadow-card>
</n-card>
</template>
<script setup lang="ts">
import { NDescriptions, NDescriptionsItem } from 'naive-ui';
import { NCard, NDescriptions, NDescriptionsItem } from 'naive-ui';
import { packageJson } from '@/utils';
const dependencies = packageJson.devDependencies;

7
src/views/about/components/ProDependency/index.vue
View File

@ -1,16 +1,15 @@
<template>
<shadow-card class="p-18px !rounded-4px">
<h3 class="pb-18px text-16px font-semibold">生产环境依赖</h3>
<n-card title="生产环境依赖" :bordered="false" size="small" class="rounded-16px shadow-sm">
<n-descriptions label-placement="left" bordered size="small">
<n-descriptions-item v-for="item in dependencies" :key="item.name" :label="item.name">
{{ item.version }}
</n-descriptions-item>
</n-descriptions>
</shadow-card>
</n-card>
</template>
<script setup lang="ts">
import { NDescriptions, NDescriptionsItem } from 'naive-ui';
import { NCard, NDescriptions, NDescriptionsItem } from 'naive-ui';
import { packageJson } from '@/utils';
const { dependencies } = packageJson;

7
src/views/about/components/ProjectInfo/index.vue
View File

@ -1,6 +1,5 @@
<template>
<shadow-card class="p-18px !rounded-4px">
<h3 class="pb-18px text-16px font-semibold">项目信息</h3>
<n-card title="项目信息" :bordered="false" size="small" class="rounded-16px shadow-sm">
<n-descriptions label-placement="left" bordered size="small" :column="2">
<n-descriptions-item label="版本">
<n-tag type="primary">{{ version }}</n-tag>
@ -15,11 +14,11 @@
<a class="g_text-primary" href="https://soybean.pro" target="_blank">预览地址</a>
</n-descriptions-item>
</n-descriptions>
</shadow-card>
</n-card>
</template>
<script setup lang="ts">
import { NDescriptions, NDescriptionsItem, NTag } from 'naive-ui';
import { NCard, NDescriptions, NDescriptionsItem, NTag } from 'naive-ui';
import { packageJson } from '@/utils';
const { version } = packageJson;

9
src/views/about/components/ProjectIntroduction/index.vue
View File

@ -1,12 +1,13 @@
<template>
<shadow-card class="h-120px p-18px !rounded-4px">
<h3 class="h-36px leading-36px text-26px font-bold">关于</h3>
<n-card title="关于" :bordered="false" size="large" class="rounded-16px shadow-sm">
<p class="leading-24px">
Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript
的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你。
</p>
</shadow-card>
</n-card>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
import { NCard } from 'naive-ui';
</script>
<style scoped></style>

15
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-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>
</shadow-card>
</div>
</n-card>
</n-grid-item>
<n-grid-item span="s:24 m:16">
<shadow-card class="h-400px p-18px">
<n-card title="表格" :bordered="false" class="rounded-16px shadow-sm">
<div class="h-360px">
<n-data-table size="small" :columns="columns" :data="tableData" />
</shadow-card>
</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>

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

@ -1,8 +1,7 @@
<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]">
<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" />
@ -14,7 +13,6 @@
/>
</div>
</gradient-bg>
</shadow-card>
</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';

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

@ -1,7 +1,8 @@
<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">
<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>
@ -16,21 +17,22 @@
<n-button class="mt-24px" type="primary">Last Month Summary</n-button>
</div>
<div ref="lineRef" class="flex-1 h-full"></div>
</shadow-card>
</div>
</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>

10
src/views/system/login/index.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="login-bg relative flex-center wh-full">
<shadow-card class="w-400px p-40px !rounded-20px z-10">
<n-card :bordered="false" size="large" class="z-20 !w-auto rounded-20px shadow-sm">
<div class="w-400px">
<header class="flex-y-center justify-between">
<div class="w-70px h-70px rounded-35px overflow-hidden">
<system-logo class="wh-full" :fill="true" :color="theme.themeColor" />
@ -13,7 +14,8 @@
<component :is="item.component" />
</div>
</main>
</shadow-card>
</div>
</n-card>
<login-bg :theme-color="theme.themeColor" />
</div>
</template>
@ -21,8 +23,8 @@
<script lang="ts" setup>
import { computed } from 'vue';
import type { Component, PropType } from 'vue';
import { NGradientText } from 'naive-ui';
import { ShadowCard, SystemLogo, LoginBg } from '@/components';
import { NCard, NGradientText } from 'naive-ui';
import { SystemLogo, LoginBg } from '@/components';
import { useAppTitle } from '@/hooks';
import { EnumLoginModule } from '@/enum';
import { addColorAlpha } from '@/utils';