feat: 移除主页及相关组件，更新路由配置以使用 KYC 页面作为主页
This commit is contained in:
2
.env
2
.env
@@ -17,7 +17,7 @@ VITE_ICON_LOCAL_PREFIX=icon-local
|
||||
VITE_AUTH_ROUTE_MODE=static
|
||||
|
||||
# static auth route home
|
||||
VITE_ROUTE_HOME=home
|
||||
VITE_ROUTE_HOME=kyc
|
||||
|
||||
# default menu icon
|
||||
VITE_MENU_ICON=mdi:menu
|
||||
|
||||
@@ -49,16 +49,16 @@ export const generatedRoutes: GeneratedRoute[] = [
|
||||
order: 5
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'home',
|
||||
path: '/home',
|
||||
component: 'layout.base$view.home',
|
||||
meta: {
|
||||
title: 'home',
|
||||
i18nKey: 'route.home',
|
||||
order: 1
|
||||
}
|
||||
},
|
||||
// {
|
||||
// name: 'home',
|
||||
// path: '/home',
|
||||
// component: 'layout.base$view.home',
|
||||
// meta: {
|
||||
// title: 'home',
|
||||
// i18nKey: 'route.home',
|
||||
// order: 1
|
||||
// }
|
||||
// },
|
||||
{
|
||||
name: 'iframe-page',
|
||||
path: '/iframe-page/:url',
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import IconPicker from '@/components/custom/icon-picker.vue';
|
||||
import HeaderBanner from './modules/header-banner.vue';
|
||||
import CardData from './modules/card-data.vue';
|
||||
import LineChart from './modules/line-chart.vue';
|
||||
import PieChart from './modules/pie-chart.vue';
|
||||
import ProjectNews from './modules/project-news.vue';
|
||||
import CreativityBanner from './modules/creativity-banner.vue';
|
||||
|
||||
const appStore = useAppStore();
|
||||
|
||||
const gap = computed(() => (appStore.isMobile ? 0 : 16));
|
||||
const selectedIcon = ref('');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpace vertical :size="16">
|
||||
<HeaderBanner />
|
||||
<CardData />
|
||||
<NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:14">
|
||||
<NCard :bordered="false" class="card-wrapper">
|
||||
<LineChart />
|
||||
</NCard>
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:10">
|
||||
<NCard :bordered="false" class="card-wrapper">
|
||||
<PieChart />
|
||||
</NCard>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
<NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:14">
|
||||
<ProjectNews />
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:10">
|
||||
<CreativityBanner />
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</NSpace>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,115 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { createReusableTemplate } from '@vueuse/core';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'CardData'
|
||||
});
|
||||
|
||||
interface CardData {
|
||||
key: string;
|
||||
title: string;
|
||||
value: number;
|
||||
unit: string;
|
||||
color: {
|
||||
start: string;
|
||||
end: string;
|
||||
};
|
||||
icon: string;
|
||||
}
|
||||
|
||||
const cardData = computed<CardData[]>(() => [
|
||||
{
|
||||
key: 'visitCount',
|
||||
title: $t('page.home.visitCount'),
|
||||
value: 9725,
|
||||
unit: '',
|
||||
color: {
|
||||
start: '#ec4786',
|
||||
end: '#b955a4'
|
||||
},
|
||||
icon: 'ant-design:bar-chart-outlined'
|
||||
},
|
||||
{
|
||||
key: 'turnover',
|
||||
title: $t('page.home.turnover'),
|
||||
value: 1026,
|
||||
unit: '$',
|
||||
color: {
|
||||
start: '#865ec0',
|
||||
end: '#5144b4'
|
||||
},
|
||||
icon: 'ant-design:money-collect-outlined'
|
||||
},
|
||||
{
|
||||
key: 'downloadCount',
|
||||
title: $t('page.home.downloadCount'),
|
||||
value: 970925,
|
||||
unit: '',
|
||||
color: {
|
||||
start: '#56cdf3',
|
||||
end: '#719de3'
|
||||
},
|
||||
icon: 'carbon:document-download'
|
||||
},
|
||||
{
|
||||
key: 'dealCount',
|
||||
title: $t('page.home.dealCount'),
|
||||
value: 9527,
|
||||
unit: '',
|
||||
color: {
|
||||
start: '#fcbc25',
|
||||
end: '#f68057'
|
||||
},
|
||||
icon: 'ant-design:trademark-circle-outlined'
|
||||
}
|
||||
]);
|
||||
|
||||
interface GradientBgProps {
|
||||
gradientColor: string;
|
||||
}
|
||||
|
||||
const [DefineGradientBg, GradientBg] = createReusableTemplate<GradientBgProps>();
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
|
||||
function getGradientColor(color: CardData['color']) {
|
||||
return `linear-gradient(to bottom right, ${color.start}, ${color.end})`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :bordered="false" size="small" class="card-wrapper">
|
||||
<!-- define component start: GradientBg -->
|
||||
<DefineGradientBg v-slot="{ $slots, gradientColor }">
|
||||
<div
|
||||
class="px-16px pb-4px pt-8px text-white"
|
||||
:style="{ backgroundImage: gradientColor, borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
<component :is="$slots.default" />
|
||||
</div>
|
||||
</DefineGradientBg>
|
||||
<!-- define component end: GradientBg -->
|
||||
|
||||
<NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
|
||||
<NGi v-for="item in cardData" :key="item.key">
|
||||
<GradientBg :gradient-color="getGradientColor(item.color)" class="flex-1">
|
||||
<h3 class="text-16px">{{ item.title }}</h3>
|
||||
<div class="flex justify-between pt-12px">
|
||||
<SvgIcon :icon="item.icon" class="text-32px" />
|
||||
<CountTo
|
||||
:prefix="item.unit"
|
||||
:start-value="1"
|
||||
:end-value="item.value"
|
||||
class="text-30px text-white dark:text-dark"
|
||||
/>
|
||||
</div>
|
||||
</GradientBg>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</NCard>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,17 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'CreativityBanner'
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :title="$t('page.home.creativity')" :bordered="false" size="small" class="h-full card-wrapper">
|
||||
<div class="h-full flex-center">
|
||||
<icon-local-banner class="text-400px text-primary sm:text-320px" />
|
||||
</div>
|
||||
</NCard>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,66 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useAuthStore } from '@/store/modules/auth';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'HeaderBanner'
|
||||
});
|
||||
|
||||
const appStore = useAppStore();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
const gap = computed(() => (appStore.isMobile ? 0 : 16));
|
||||
|
||||
interface StatisticData {
|
||||
id: number;
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const statisticData = computed<StatisticData[]>(() => [
|
||||
{
|
||||
id: 0,
|
||||
label: $t('page.home.projectCount'),
|
||||
value: '25'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
label: $t('page.home.todo'),
|
||||
value: '4/16'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: $t('page.home.message'),
|
||||
value: '12'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :bordered="false" class="card-wrapper">
|
||||
<NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:18">
|
||||
<div class="flex-y-center">
|
||||
<div class="size-72px shrink-0 overflow-hidden rd-1/2">
|
||||
<img src="@/assets/imgs/soybean.jpg" class="size-full" />
|
||||
</div>
|
||||
<div class="pl-12px">
|
||||
<h3 class="text-18px font-semibold">
|
||||
{{ $t('page.home.greeting', { userName: authStore.userInfo.username }) }}
|
||||
</h3>
|
||||
<p class="text-#999 leading-30px">{{ $t('page.home.weatherDesc') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:6">
|
||||
<NSpace :size="24" justify="end">
|
||||
<NStatistic v-for="item in statisticData" :key="item.id" class="whitespace-nowrap" v-bind="item" />
|
||||
</NSpace>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</NCard>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,237 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { NButton, NCard, NDescriptions, NDescriptionsItem, NInput, NSpace } from 'naive-ui';
|
||||
import IconPicker from '@/components/custom/icon-picker.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'IconPickerExample'
|
||||
});
|
||||
|
||||
// 基础使用
|
||||
const selectedIcon1 = ref('');
|
||||
|
||||
// 默认值
|
||||
const selectedIcon2 = ref('material-symbols:home');
|
||||
|
||||
// 自定义配置
|
||||
const selectedIcon3 = ref('');
|
||||
|
||||
// 单个图标集
|
||||
const selectedIcon4 = ref('material-icon-theme:folder-aws');
|
||||
|
||||
// 表单集成示例
|
||||
interface FormData {
|
||||
name: string;
|
||||
icon: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const formData = ref<FormData>({
|
||||
name: '',
|
||||
icon: '',
|
||||
description: ''
|
||||
});
|
||||
|
||||
function handleSubmit() {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('表单数据:', formData.value);
|
||||
window.$message?.success(`提交成功！图标：${formData.value.icon}`);
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
formData.value = {
|
||||
name: '',
|
||||
icon: '',
|
||||
description: ''
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<NSpace vertical :size="24">
|
||||
<!-- 标题 -->
|
||||
<div>
|
||||
<h1 class="mb-2 text-2xl font-bold">Icon Picker 图标选择器</h1>
|
||||
<p class="text-gray-600 dark:text-gray-400">支持多个图标集切换，实时搜索和分页</p>
|
||||
</div>
|
||||
|
||||
<!-- 基础使用 - 多图标集切换 -->
|
||||
<NCard title="多图标集切换" :bordered="false" class="rounded-lg shadow">
|
||||
<NSpace vertical :size="16">
|
||||
<div>
|
||||
<p class="mb-3 text-sm text-gray-600">通过 Tabs 在不同的图标集之间切换</p>
|
||||
<IconPicker v-model="selectedIcon1" />
|
||||
</div>
|
||||
<NDescriptions :column="1" size="small" bordered>
|
||||
<NDescriptionsItem label="选中的图标">
|
||||
<code class="text-primary">{{ selectedIcon1 || '未选择' }}</code>
|
||||
</NDescriptionsItem>
|
||||
</NDescriptions>
|
||||
</NSpace>
|
||||
</NCard>
|
||||
|
||||
<!-- 带默认值 -->
|
||||
<NCard title="带默认值" :bordered="false" class="rounded-lg shadow">
|
||||
<NSpace vertical :size="16">
|
||||
<div>
|
||||
<p class="mb-3 text-sm text-gray-600">设置默认图标值</p>
|
||||
<IconPicker v-model="selectedIcon2" />
|
||||
</div>
|
||||
<NDescriptions :column="1" size="small" bordered>
|
||||
<NDescriptionsItem label="选中的图标">
|
||||
<code class="text-primary">{{ selectedIcon2 }}</code>
|
||||
</NDescriptionsItem>
|
||||
</NDescriptions>
|
||||
</NSpace>
|
||||
</NCard>
|
||||
|
||||
<!-- 自定义配置 -->
|
||||
<NCard title="自定义配置" :bordered="false" class="rounded-lg shadow">
|
||||
<NSpace vertical :size="16">
|
||||
<div>
|
||||
<p class="mb-3 text-sm text-gray-600">自定义弹窗宽度、每页数量和图标尺寸</p>
|
||||
<IconPicker v-model="selectedIcon3" :width="700" :page-size="80" icon-size="28px" />
|
||||
</div>
|
||||
<NDescriptions :column="1" size="small" bordered>
|
||||
<NDescriptionsItem label="选中的图标">
|
||||
<code class="text-primary">{{ selectedIcon3 || '未选择' }}</code>
|
||||
</NDescriptionsItem>
|
||||
</NDescriptions>
|
||||
</NSpace>
|
||||
</NCard>
|
||||
|
||||
<!-- 单个图标集 -->
|
||||
<NCard title="单个图标集" :bordered="false" class="rounded-lg shadow">
|
||||
<NSpace vertical :size="16">
|
||||
<div>
|
||||
<p class="mb-3 text-sm text-gray-600">只显示 Cryptocurrency Color 图标集</p>
|
||||
<IconPicker v-model="selectedIcon4" prefix="cryptocurrency-color" :collections="['cryptocurrency-color']" />
|
||||
</div>
|
||||
<NDescriptions :column="1" size="small" bordered>
|
||||
<NDescriptionsItem label="选中的图标">
|
||||
<code class="text-primary">{{ selectedIcon4 }}</code>
|
||||
</NDescriptionsItem>
|
||||
</NDescriptions>
|
||||
</NSpace>
|
||||
</NCard>
|
||||
|
||||
<!-- 表单集成 -->
|
||||
<NCard title="表单集成示例" :bordered="false" class="rounded-lg shadow">
|
||||
<NSpace vertical :size="16">
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div>
|
||||
<label class="mb-2 block text-sm font-medium">名称</label>
|
||||
<NInput v-model:value="formData.name" placeholder="请输入名称" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="mb-2 block text-sm font-medium">图标</label>
|
||||
<IconPicker v-model="formData.icon" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="mb-2 block text-sm font-medium">描述</label>
|
||||
<NInput v-model:value="formData.description" type="textarea" placeholder="请输入描述" :rows="3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NSpace>
|
||||
<NButton type="primary" @click="handleSubmit">提交</NButton>
|
||||
<NButton @click="handleReset">重置</NButton>
|
||||
</NSpace>
|
||||
|
||||
<NDescriptions :column="1" size="small" bordered>
|
||||
<NDescriptionsItem label="表单数据">
|
||||
<code class="text-primary">{{ JSON.stringify(formData, null, 2) }}</code>
|
||||
</NDescriptionsItem>
|
||||
</NDescriptions>
|
||||
</NSpace>
|
||||
</NCard>
|
||||
|
||||
<!-- API 文档 -->
|
||||
<NCard title="Props API" :bordered="false" class="rounded-lg shadow">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-100 dark:bg-gray-800">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left">属性</th>
|
||||
<th class="px-4 py-2 text-left">类型</th>
|
||||
<th class="px-4 py-2 text-left">默认值</th>
|
||||
<th class="px-4 py-2 text-left">说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-t dark:border-gray-700">
|
||||
<td class="px-4 py-2"><code>modelValue</code></td>
|
||||
<td class="px-4 py-2"><code>string</code></td>
|
||||
<td class="px-4 py-2"><code>''</code></td>
|
||||
<td class="px-4 py-2">选中的图标值（v-model）</td>
|
||||
</tr>
|
||||
<tr class="border-t dark:border-gray-700">
|
||||
<td class="px-4 py-2"><code>prefix</code></td>
|
||||
<td class="px-4 py-2"><code>IconCollection</code></td>
|
||||
<td class="px-4 py-2"><code>'material-symbols'</code></td>
|
||||
<td class="px-4 py-2">默认图标集前缀</td>
|
||||
</tr>
|
||||
<tr class="border-t dark:border-gray-700">
|
||||
<td class="px-4 py-2"><code>collections</code></td>
|
||||
<td class="px-4 py-2"><code>IconCollection[]</code></td>
|
||||
<td class="px-4 py-2"><code>['material-symbols', 'material-icon-theme']</code></td>
|
||||
<td class="px-4 py-2">可选的图标集列表</td>
|
||||
</tr>
|
||||
<tr class="border-t dark:border-gray-700">
|
||||
<td class="px-4 py-2"><code>pageSize</code></td>
|
||||
<td class="px-4 py-2"><code>number</code></td>
|
||||
<td class="px-4 py-2"><code>60</code></td>
|
||||
<td class="px-4 py-2">每页显示的图标数量</td>
|
||||
</tr>
|
||||
<tr class="border-t dark:border-gray-700">
|
||||
<td class="px-4 py-2"><code>width</code></td>
|
||||
<td class="px-4 py-2"><code>number</code></td>
|
||||
<td class="px-4 py-2"><code>600</code></td>
|
||||
<td class="px-4 py-2">弹窗宽度（px）</td>
|
||||
</tr>
|
||||
<tr class="border-t dark:border-gray-700">
|
||||
<td class="px-4 py-2"><code>iconSize</code></td>
|
||||
<td class="px-4 py-2"><code>string</code></td>
|
||||
<td class="px-4 py-2"><code>'24px'</code></td>
|
||||
<td class="px-4 py-2">图标显示尺寸</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</NCard>
|
||||
|
||||
<!-- 功能特性 -->
|
||||
<NCard title="功能特性" :bordered="false" class="rounded-lg shadow">
|
||||
<ul class="list-disc list-inside text-sm space-y-2">
|
||||
<li>✅ 支持多个图标集切换（Tabs）</li>
|
||||
<li>✅ Material Symbols（3000+ 图标）</li>
|
||||
<li>✅ Material Icon Theme（VSCode 文件图标）</li>
|
||||
<li>✅ 支持实时搜索过滤</li>
|
||||
<li>✅ 分页展示，避免一次性渲染大量图标</li>
|
||||
<li>✅ 缓存机制，避免重复加载</li>
|
||||
<li>✅ 响应式设计，支持深色模式</li>
|
||||
<li>✅ TypeScript 类型支持</li>
|
||||
<li>✅ 支持清除选择</li>
|
||||
<li>✅ 图标预览和名称提示</li>
|
||||
</ul>
|
||||
</NCard>
|
||||
</NSpace>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
code {
|
||||
@apply rounded bg-gray-100 px-1.5 py-0.5 text-xs font-mono dark:bg-gray-800;
|
||||
}
|
||||
|
||||
table {
|
||||
@apply border-collapse;
|
||||
}
|
||||
|
||||
th {
|
||||
@apply font-semibold;
|
||||
}
|
||||
</style>
|
||||
@@ -1,152 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { watch } from 'vue';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useEcharts } from '@/hooks/common/echarts';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'LineChart'
|
||||
});
|
||||
|
||||
const appStore = useAppStore();
|
||||
|
||||
const { domRef, updateOptions } = useEcharts(() => ({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [$t('page.home.downloadCount'), $t('page.home.registerCount')],
|
||||
top: '0'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [] as string[]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
color: '#8e9dff',
|
||||
name: $t('page.home.downloadCount'),
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
stack: 'Total',
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0.25,
|
||||
color: '#8e9dff'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#fff'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [] as number[]
|
||||
},
|
||||
{
|
||||
color: '#26deca',
|
||||
name: $t('page.home.registerCount'),
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
stack: 'Total',
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0.25,
|
||||
color: '#26deca'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#fff'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}));
|
||||
|
||||
async function mockData() {
|
||||
await new Promise(resolve => {
|
||||
setTimeout(resolve, 1000);
|
||||
});
|
||||
|
||||
updateOptions(opts => {
|
||||
opts.xAxis.data = ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'];
|
||||
opts.series[0].data = [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311];
|
||||
opts.series[1].data = [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678];
|
||||
|
||||
return opts;
|
||||
});
|
||||
}
|
||||
|
||||
function updateLocale() {
|
||||
updateOptions((opts, factory) => {
|
||||
const originOpts = factory();
|
||||
|
||||
opts.legend.data = originOpts.legend.data;
|
||||
opts.series[0].name = originOpts.series[0].name;
|
||||
opts.series[1].name = originOpts.series[1].name;
|
||||
|
||||
return opts;
|
||||
});
|
||||
}
|
||||
|
||||
async function init() {
|
||||
mockData();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => appStore.locale,
|
||||
() => {
|
||||
updateLocale();
|
||||
}
|
||||
);
|
||||
|
||||
// init
|
||||
init();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :bordered="false" class="card-wrapper">
|
||||
<div ref="domRef" class="h-360px overflow-hidden"></div>
|
||||
</NCard>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,109 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { watch } from 'vue';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useEcharts } from '@/hooks/common/echarts';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'PieChart'
|
||||
});
|
||||
|
||||
const appStore = useAppStore();
|
||||
|
||||
const { domRef, updateOptions } = useEcharts(() => ({
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
bottom: '1%',
|
||||
left: 'center',
|
||||
itemStyle: {
|
||||
borderWidth: 0
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
|
||||
name: $t('page.home.schedule'),
|
||||
type: 'pie',
|
||||
radius: ['45%', '75%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '12'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [] as { name: string; value: number }[]
|
||||
}
|
||||
]
|
||||
}));
|
||||
|
||||
async function mockData() {
|
||||
await new Promise(resolve => {
|
||||
setTimeout(resolve, 1000);
|
||||
});
|
||||
|
||||
updateOptions(opts => {
|
||||
opts.series[0].data = [
|
||||
{ name: $t('page.home.study'), value: 20 },
|
||||
{ name: $t('page.home.entertainment'), value: 10 },
|
||||
{ name: $t('page.home.work'), value: 40 },
|
||||
{ name: $t('page.home.rest'), value: 30 }
|
||||
];
|
||||
|
||||
return opts;
|
||||
});
|
||||
}
|
||||
|
||||
function updateLocale() {
|
||||
updateOptions((opts, factory) => {
|
||||
const originOpts = factory();
|
||||
|
||||
opts.series[0].name = originOpts.series[0].name;
|
||||
|
||||
opts.series[0].data = [
|
||||
{ name: $t('page.home.study'), value: 20 },
|
||||
{ name: $t('page.home.entertainment'), value: 10 },
|
||||
{ name: $t('page.home.work'), value: 40 },
|
||||
{ name: $t('page.home.rest'), value: 30 }
|
||||
];
|
||||
|
||||
return opts;
|
||||
});
|
||||
}
|
||||
|
||||
async function init() {
|
||||
mockData();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => appStore.locale,
|
||||
() => {
|
||||
updateLocale();
|
||||
}
|
||||
);
|
||||
|
||||
// init
|
||||
init();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :bordered="false" class="card-wrapper">
|
||||
<div ref="domRef" class="h-360px overflow-hidden"></div>
|
||||
</NCard>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,40 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'ProjectNews'
|
||||
});
|
||||
|
||||
interface NewsItem {
|
||||
id: number;
|
||||
content: string;
|
||||
time: string;
|
||||
}
|
||||
|
||||
const newses = computed<NewsItem[]>(() => [
|
||||
{ id: 1, content: $t('page.home.projectNews.desc1'), time: '2021-05-28 22:22:22' },
|
||||
{ id: 2, content: $t('page.home.projectNews.desc2'), time: '2021-10-27 10:24:54' },
|
||||
{ id: 3, content: $t('page.home.projectNews.desc3'), time: '2021-10-31 22:43:12' },
|
||||
{ id: 4, content: $t('page.home.projectNews.desc4'), time: '2021-11-03 20:33:31' },
|
||||
{ id: 5, content: $t('page.home.projectNews.desc5'), time: '2021-11-07 22:45:32' }
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :title="$t('page.home.projectNews.title')" :bordered="false" size="small" segmented class="card-wrapper">
|
||||
<template #header-extra>
|
||||
<a class="text-primary" href="javascript:;">{{ $t('page.home.projectNews.moreNews') }}</a>
|
||||
</template>
|
||||
<NList>
|
||||
<NListItem v-for="item in newses" :key="item.id">
|
||||
<template #prefix>
|
||||
<SoybeanAvatar class="size-48px!" />
|
||||
</template>
|
||||
<NThing :title="item.content" :description="item.time" />
|
||||
</NListItem>
|
||||
</NList>
|
||||
</NCard>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user