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
|
VITE_AUTH_ROUTE_MODE=static
|
||||||
|
|
||||||
# static auth route home
|
# static auth route home
|
||||||
VITE_ROUTE_HOME=home
|
VITE_ROUTE_HOME=kyc
|
||||||
|
|
||||||
# default menu icon
|
# default menu icon
|
||||||
VITE_MENU_ICON=mdi:menu
|
VITE_MENU_ICON=mdi:menu
|
||||||
|
|||||||
@@ -49,16 +49,16 @@ export const generatedRoutes: GeneratedRoute[] = [
|
|||||||
order: 5
|
order: 5
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
name: 'home',
|
// name: 'home',
|
||||||
path: '/home',
|
// path: '/home',
|
||||||
component: 'layout.base$view.home',
|
// component: 'layout.base$view.home',
|
||||||
meta: {
|
// meta: {
|
||||||
title: 'home',
|
// title: 'home',
|
||||||
i18nKey: 'route.home',
|
// i18nKey: 'route.home',
|
||||||
order: 1
|
// order: 1
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
name: 'iframe-page',
|
name: 'iframe-page',
|
||||||
path: '/iframe-page/:url',
|
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