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(projects): 去除vicons，统一使用iconify图标

Browse Source
This commit is contained in:
Soybean
2021-11-08 05:13:48 +08:00
parent e61ee32a88
commit cd6db3d491
26 changed files with 290 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@
<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" />
<Icon :icon="item.icon" class="text-32px" />
<count-to
:prefix="item.unit"
:start-value="1"
@ -18,12 +18,9 @@
</template>
<script setup lang="ts">
import type { VNodeChild } from 'vue';
import { NGrid, NGridItem } from 'naive-ui';
import { BarChartOutlined, MoneyCollectOutlined, TrademarkOutlined } from '@vicons/antd';
import { DocumentDownload } from '@vicons/carbon';
import { Icon } from '@iconify/vue';
import { CountTo } from '@/components';
import { dynamicIconRender } from '@/utils';
import { GradientBg } from './components';
interface CardData {
@ -32,7 +29,7 @@ interface CardData {
value: number;
unit: string;
colors: [string, string];
icon: () => VNodeChild;
icon: string;
}
const cardData: CardData[] = [
@ -42,7 +39,7 @@ const cardData: CardData[] = [
value: 1000000,
unit: '',
colors: ['#ec4786', '#b955a4'],
icon: dynamicIconRender(BarChartOutlined)
icon: 'ant-design:bar-chart-outlined'
},
{
id: 'amount',
@ -50,7 +47,7 @@ const cardData: CardData[] = [
value: 234567.89,
unit: '$',
colors: ['#865ec0', '#5144b4'],
icon: dynamicIconRender(MoneyCollectOutlined)
icon: 'ant-design:money-collect-outlined'
},
{
id: 'download',
@ -58,7 +55,7 @@ const cardData: CardData[] = [
value: 666666,
unit: '',
colors: ['#56cdf3', '#719de3'],
icon: dynamicIconRender(DocumentDownload)
icon: 'carbon:document-download'
},
{
id: 'trade',
@ -66,7 +63,7 @@ const cardData: CardData[] = [
value: 999999,
unit: '',
colors: ['#fcbc25', '#f68057'],
icon: dynamicIconRender(TrademarkOutlined)
icon: 'ant-design:trademark-circle-outlined'
}
];
</script>

6
src/views/dashboard/workbench/components/WorkbenchHeader/index.vue
View File

@ -3,13 +3,13 @@
<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">
<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 :size="24" :wrap="false">
<n-statistic v-for="item in statisticData" :key="item.id" class="whitespace-nowrap" v-bind="item"></n-statistic>
</n-space>
</div>
</n-card>

32
src/views/dashboard/workbench/components/WorkbenchMain/components/ShortcutsCard.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div
class="
flex-col-center
p-12px
border-1px border-[#efeff5]
dark:border-[#ffffff17]
rounded-4px
hover:shadow-sm
cursor-pointer
"
>
<Icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
<p class="py-8px text-16px">{{ label }}</p>
</div>
</template>
<script setup lang="ts">
import { Icon } from '@iconify/vue';
interface Props {
/** 快捷操作名称 */
label: string;
/** 图标 */
icon: string;
/** 图标颜色 */
iconColor: string;
}
defineProps<Props>();
</script>
<style scoped></style>

32
src/views/dashboard/workbench/components/WorkbenchMain/components/TechnologyCard.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div class="p-4px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-sm cursor-pointer">
<header class="flex-y-center">
<Icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
<h3 class="pl-12px text-18px font-semibold">{{ name }}</h3>
</header>
<p class="py-8px h-56px text-[#999]">{{ description }}</p>
<div class="flex justify-end">
<span>{{ author }}</span>
</div>
</div>
</template>
<script setup lang="ts">
import { Icon } from '@iconify/vue';
interface Props {
/** 技术名称 */
name: string;
/** 技术描述 */
description: string;
/** 技术作者 */
author: string;
/** 技术图标 */
icon: string;
/** 图标颜色 */
iconColor?: string;
}
defineProps<Props>();
</script>
<style scoped></style>

4
src/views/dashboard/workbench/components/WorkbenchMain/components/index.ts Normal file
View File

@ -0,0 +1,4 @@
import TechnologyCard from './TechnologyCard.vue';
import ShortcutsCard from './ShortcutsCard.vue';
export { TechnologyCard, ShortcutsCard };

132
src/views/dashboard/workbench/components/WorkbenchMain/index.vue
View File

@ -1,29 +1,145 @@
<template>
<n-grid cols="s:1 m:2" responsive="screen" :x-gap="16" :y-gap="16">
<n-grid-item>
<n-grid :item-responsive="true" responsive="screen" :x-gap="16" :y-gap="16">
<n-grid-item span="s:24 m:16">
<n-space :vertical="true" :size="16">
<n-card title="项目" :bordered="false" size="small" class="shadow-sm rounded-16px">
<n-card title="项目主要技术栈" :bordered="false" size="small" class="shadow-sm rounded-16px">
<template #header-extra>
<a class="g_text-primary" href="javascript:;">全部项目</a>
<a class="g_text-primary" href="javascript:;">更多技术栈</a>
</template>
<n-grid :item-responsive="true" responsive="screen" cols="m:2 l:3" :x-gap="8" :y-gap="8">
<n-grid-item v-for="item in technology" :key="item.id">
<technology-card v-bind="item" />
</n-grid-item>
</n-grid>
</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-list>
<n-list-item v-for="item in activity" :key="item.id">
<template #prefix>
<div class="w-48px h-48px">
<img src="@/assets/svg/avatar/avatar01.svg" alt="" class="wh-full" />
</div>
</template>
<n-thing :title="item.content" :description="item.time" />
</n-list-item>
</n-list>
</n-card>
</n-space>
</n-grid-item>
<n-grid-item>
<n-grid-item span="s:24 m:8">
<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-card title="快捷操作" :bordered="false" size="small" class="shadow-sm rounded-16px">
<n-grid :item-responsive="true" responsive="screen" cols="m:2 l:3" :x-gap="8" :y-gap="8">
<n-grid-item v-for="item in shortcuts" :key="item.id">
<shortcuts-card v-bind="item" />
</n-grid-item>
</n-grid>
</n-card>
<n-card title="创意" :bordered="false" size="small" class="shadow-sm rounded-16px">
<n-carousel :autoplay="true" :show-arrow="true">
<banner-svg type="1" />
<banner-svg type="2" />
<banner-svg type="3" />
</n-carousel>
</n-card>
</n-space>
</n-grid-item>
</n-grid>
</template>
<script setup lang="ts">
import { NGrid, NGridItem, NSpace, NCard } from 'naive-ui';
import { NGrid, NGridItem, NSpace, NCard, NList, NListItem, NThing, NCarousel } from 'naive-ui';
import { BannerSvg } from '@/components';
import { TechnologyCard, ShortcutsCard } from './components';
interface Technology {
id: number;
name: string;
description: string;
author: string;
icon: string;
iconColor?: string;
}
interface Activity {
id: number;
content: string;
time: string;
}
interface Shortcuts {
id: number;
label: string;
icon: string;
iconColor: string;
}
const technology: Technology[] = [
{
id: 0,
name: 'Vue',
description: '一套用于构建用户界面的渐进式框架',
author: '尤雨溪 - Evan You',
icon: 'vscode-icons:file-type-vue'
},
{
id: 1,
name: 'TypeScript',
description: 'JavaScript类型的超集，它可以编译成纯JavaScript',
author: '微软 - Microsoft',
icon: 'vscode-icons:file-type-typescript-official'
},
{
id: 2,
name: 'Vite',
description: '下一代前端开发与构建工具',
author: '尤雨溪 - Evan You',
icon: 'vscode-icons:file-type-vite'
},
{
id: 3,
name: 'NaiveUI',
description: '一个 Vue 3 组件库',
author: '图森未来 - TuSimple',
icon: 'mdi:alpha-n-box-outline',
iconColor: '#5fbc22'
},
{
id: 4,
name: 'WindiCSS',
description: '下一代实用优先的CSS框架',
author: 'Windicss',
icon: 'file-icons:windi',
iconColor: '#48b0f1'
},
{
id: 5,
name: 'Pinia',
description: 'vue状态管理框架，支持vue2、vue3',
author: 'Posva',
icon: 'mdi:fruit-pineapple',
iconColor: '#fecf48'
}
];
const activity: Activity[] = [
{ id: 4, content: 'Soybean 刚才把工作台页面随便写了一些，凑合能看了！', time: '2021-11-07 22:45:32' },
{ 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' }
];
const shortcuts: Shortcuts[] = [
{ id: 0, label: '主控台', icon: 'mdi:desktop-mac-dashboard', iconColor: '#409eff' },
{ id: 1, label: '系统管理', icon: 'ic:outline-settings', iconColor: '#7238d1' },
{ id: 2, label: '权限管理', icon: 'mdi:family-tree', iconColor: '#f56c6c' },
{ id: 3, label: '组件', icon: 'ion:layers', iconColor: '#8aca6b' },
{ id: 4, label: '表格', icon: 'mdi:table-large', iconColor: '#fab251' },
{ id: 5, label: '图表', icon: 'mdi:chart-areaspline', iconColor: '#1890ff' }
];
</script>
<style scoped></style>