feat: 完成 issue #164 [A1] FBA UI 骨架定制——iAOP 品牌+默认主页+清理 demo+构建流水线
This commit is contained in:
@@ -0,0 +1,43 @@
|
|||||||
|
#!/usr/bin/env bash
|
||||||
|
# =============================================================================
|
||||||
|
# iAOP FBA UI 构建流水线（Epic #163 / issue #164 [A1]）
|
||||||
|
#
|
||||||
|
# 用法：
|
||||||
|
# ./deploy/fba/build-ui.sh [--src DIR] [--out DIR]
|
||||||
|
# --src FBA UI 工程目录（默认 deploy/fba/fba-ui-src）
|
||||||
|
# --out 产物输出目录（默认 deploy/fba/artifacts）
|
||||||
|
#
|
||||||
|
# 流程：pnpm install → 生产构建 → 打 tar 到 artifacts/
|
||||||
|
# 产物：artifacts/fba-ui-dist.tar.gz（解压后 dist/ 即 nginx 站点目录）
|
||||||
|
#
|
||||||
|
# 环境要求：Node.js >= 18.18、pnpm >= 9（Vben5 monorepo）
|
||||||
|
# =============================================================================
|
||||||
|
set -euo pipefail
|
||||||
|
|
||||||
|
ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/../.." && pwd)"
|
||||||
|
SRC="${SRC_DIR:-$ROOT/deploy/fba/fba-ui-src}"
|
||||||
|
OUT="${OUT_DIR:-$ROOT/deploy/fba/artifacts}"
|
||||||
|
APP_DIR="$SRC/apps/web-antdv-next"
|
||||||
|
|
||||||
|
# 1) 参数校验
|
||||||
|
[ -d "$APP_DIR" ] || { echo "[fail] 未找到 UI 工程: $APP_DIR"; exit 1; }
|
||||||
|
mkdir -p "$OUT"
|
||||||
|
|
||||||
|
# 2) 环境检查
|
||||||
|
command -v node >/dev/null || { echo "[fail] 缺少 node（>=18.18）"; exit 1; }
|
||||||
|
command -v pnpm >/dev/null || { echo "[fail] 缺少 pnpm（>=9），请先安装: npm i -g pnpm"; exit 1; }
|
||||||
|
|
||||||
|
echo "[1/4] 依赖安装（pnpm install）..."
|
||||||
|
cd "$SRC"
|
||||||
|
pnpm install --frozen-lockfile=false
|
||||||
|
|
||||||
|
echo "[2/4] 生产构建（web-antdv-next）..."
|
||||||
|
cd "$APP_DIR"
|
||||||
|
pnpm run build
|
||||||
|
|
||||||
|
echo "[3/4] 打包 dist/ -> $OUT/fba-ui-dist.tar.gz"
|
||||||
|
cd "$APP_DIR"
|
||||||
|
tar -czf "$OUT/fba-ui-dist.tar.gz" dist/
|
||||||
|
|
||||||
|
echo "[4/4] 完成：$OUT/fba-ui-dist.tar.gz"
|
||||||
|
ls -lh "$OUT/fba-ui-dist.tar.gz"
|
||||||
@@ -1,10 +1,16 @@
|
|||||||
VITE_BASE=/
|
# ===== Epic #163 / #164：构建参数模板化 =====
|
||||||
|
# 构建/部署时按环境替换（部署见 deploy/fba/build-ui.sh）
|
||||||
|
# 1) VITE_BASE：FBA UI 挂载前缀（nginx /fba-admin/ 反代）
|
||||||
|
VITE_BASE=/fba-admin/
|
||||||
|
|
||||||
# 接口地址
|
# 2) VITE_GLOB_API_URL：后端 API 基础地址（nginx 反代 /fba/ → fba_server:8001）
|
||||||
VITE_GLOB_API_URL=https://fba.wu-clan.site
|
VITE_GLOB_API_URL=http://39.101.182.167:8090/fba
|
||||||
|
|
||||||
|
# 3) VITE_APP_TITLE：浏览器标题（iAOP 品牌，preferences.ts 已固定，可覆盖）
|
||||||
|
VITE_APP_TITLE=iAOP 云美工业AI优化平台
|
||||||
|
|
||||||
# 是否开启压缩，可以设置为 none, brotli, gzip
|
# 是否开启压缩，可以设置为 none, brotli, gzip
|
||||||
VITE_COMPRESS=gzip
|
VITE_COMPRESS=none
|
||||||
|
|
||||||
# 是否开启 PWA
|
# 是否开启 PWA
|
||||||
VITE_PWA=false
|
VITE_PWA=false
|
||||||
|
|||||||
@@ -9,14 +9,25 @@ export const overridesPreferences = defineOverridesPreferences({
|
|||||||
// overrides
|
// overrides
|
||||||
app: {
|
app: {
|
||||||
accessMode: 'backend',
|
accessMode: 'backend',
|
||||||
name: import.meta.env.VITE_APP_TITLE,
|
name: 'iAOP 云美工业AI优化平台',
|
||||||
enableRefreshToken: true,
|
enableRefreshToken: true,
|
||||||
|
// Epic #163：登录后默认落驾驶舱（路由由后端菜单下发，views/iaop/cockpit）
|
||||||
|
defaultHomePath: '/iaop/cockpit',
|
||||||
},
|
},
|
||||||
footer: {
|
footer: {
|
||||||
enable: false,
|
enable: false,
|
||||||
},
|
},
|
||||||
logo: {
|
logo: {
|
||||||
source: 'https://wu-clan.github.io/picx-images-hosting/logo/fba.png',
|
// iAOP 文字徽标（内联 SVG，避免外部图片依赖）
|
||||||
|
source:
|
||||||
|
'data:image/svg+xml;utf8,' +
|
||||||
|
encodeURIComponent(
|
||||||
|
`<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">` +
|
||||||
|
`<rect width="28" height="28" rx="7" fill="#0b5"/>` +
|
||||||
|
`<text x="14" y="19" font-size="15" font-weight="bold" text-anchor="middle" fill="#fff" font-family="Arial">i</text>` +
|
||||||
|
`<circle cx="20" cy="8" r="3" fill="#34d399"/>` +
|
||||||
|
`</svg>`,
|
||||||
|
),
|
||||||
},
|
},
|
||||||
shortcutKeys: {
|
shortcutKeys: {
|
||||||
enable: false,
|
enable: false,
|
||||||
|
|||||||
@@ -1,38 +0,0 @@
|
|||||||
import type { RouteRecordRaw } from 'vue-router';
|
|
||||||
|
|
||||||
import { $t } from '#/locales';
|
|
||||||
|
|
||||||
const routes: RouteRecordRaw[] = [
|
|
||||||
{
|
|
||||||
meta: {
|
|
||||||
icon: 'lucide:layout-dashboard',
|
|
||||||
order: -1,
|
|
||||||
title: $t('page.dashboard.title'),
|
|
||||||
},
|
|
||||||
name: 'Dashboard',
|
|
||||||
path: '/dashboard',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'Analytics',
|
|
||||||
path: '/analytics',
|
|
||||||
component: () => import('#/views/dashboard/analytics/index.vue'),
|
|
||||||
meta: {
|
|
||||||
affixTab: true,
|
|
||||||
icon: 'lucide:area-chart',
|
|
||||||
title: $t('page.dashboard.analytics'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Workspace',
|
|
||||||
path: '/workspace',
|
|
||||||
component: () => import('#/views/dashboard/workspace/index.vue'),
|
|
||||||
meta: {
|
|
||||||
icon: 'carbon:workspace',
|
|
||||||
title: $t('page.dashboard.workspace'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default routes;
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
import type { RouteRecordRaw } from 'vue-router';
|
|
||||||
|
|
||||||
import { $t } from '#/locales';
|
|
||||||
|
|
||||||
const routes: RouteRecordRaw[] = [
|
|
||||||
{
|
|
||||||
meta: {
|
|
||||||
icon: 'ic:baseline-view-in-ar',
|
|
||||||
keepAlive: true,
|
|
||||||
order: 1000,
|
|
||||||
title: $t('demos.title'),
|
|
||||||
},
|
|
||||||
name: 'Demos',
|
|
||||||
path: '/demos',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
meta: {
|
|
||||||
title: $t('demos.antd'),
|
|
||||||
},
|
|
||||||
name: 'AntDesignDemos',
|
|
||||||
path: '/demos/ant-design-next',
|
|
||||||
component: () => import('#/views/demos/antd/index.vue'),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default routes;
|
|
||||||
-98
@@ -1,98 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
||||||
|
|
||||||
import { onMounted, ref } from 'vue';
|
|
||||||
|
|
||||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
||||||
|
|
||||||
const chartRef = ref<EchartsUIType>();
|
|
||||||
const { renderEcharts } = useEcharts(chartRef);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
renderEcharts({
|
|
||||||
grid: {
|
|
||||||
bottom: 0,
|
|
||||||
containLabel: true,
|
|
||||||
left: '1%',
|
|
||||||
right: '1%',
|
|
||||||
top: '2 %',
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
areaStyle: {},
|
|
||||||
data: [
|
|
||||||
111, 2000, 6000, 16_000, 33_333, 55_555, 64_000, 33_333, 18_000,
|
|
||||||
36_000, 70_000, 42_444, 23_222, 13_000, 8000, 4000, 1200, 333, 222,
|
|
||||||
111,
|
|
||||||
],
|
|
||||||
itemStyle: {
|
|
||||||
color: '#5ab1ef',
|
|
||||||
},
|
|
||||||
smooth: true,
|
|
||||||
type: 'line',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
areaStyle: {},
|
|
||||||
data: [
|
|
||||||
33, 66, 88, 333, 3333, 6200, 20_000, 3000, 1200, 13_000, 22_000,
|
|
||||||
11_000, 2221, 1201, 390, 198, 60, 30, 22, 11,
|
|
||||||
],
|
|
||||||
itemStyle: {
|
|
||||||
color: '#019680',
|
|
||||||
},
|
|
||||||
smooth: true,
|
|
||||||
type: 'line',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
tooltip: {
|
|
||||||
axisPointer: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#019680',
|
|
||||||
width: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
trigger: 'axis',
|
|
||||||
},
|
|
||||||
// xAxis: {
|
|
||||||
// axisTick: {
|
|
||||||
// show: false,
|
|
||||||
// },
|
|
||||||
// boundaryGap: false,
|
|
||||||
// data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
|
|
||||||
// type: 'category',
|
|
||||||
// },
|
|
||||||
xAxis: {
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
boundaryGap: false,
|
|
||||||
data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
width: 1,
|
|
||||||
},
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
type: 'category',
|
|
||||||
},
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
max: 80_000,
|
|
||||||
splitArea: {
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
splitNumber: 4,
|
|
||||||
type: 'value',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<EchartsUI ref="chartRef" />
|
|
||||||
</template>
|
|
||||||
-82
@@ -1,82 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
||||||
|
|
||||||
import { onMounted, ref } from 'vue';
|
|
||||||
|
|
||||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
||||||
|
|
||||||
const chartRef = ref<EchartsUIType>();
|
|
||||||
const { renderEcharts } = useEcharts(chartRef);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
renderEcharts({
|
|
||||||
legend: {
|
|
||||||
bottom: 0,
|
|
||||||
data: ['访问', '趋势'],
|
|
||||||
},
|
|
||||||
radar: {
|
|
||||||
indicator: [
|
|
||||||
{
|
|
||||||
name: '网页',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '移动端',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Ipad',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '客户端',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '第三方',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '其它',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
radius: '60%',
|
|
||||||
splitNumber: 8,
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
areaStyle: {
|
|
||||||
opacity: 1,
|
|
||||||
shadowBlur: 0,
|
|
||||||
shadowColor: 'rgba(0,0,0,.2)',
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
shadowOffsetY: 10,
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
itemStyle: {
|
|
||||||
color: '#b6a2de',
|
|
||||||
},
|
|
||||||
name: '访问',
|
|
||||||
value: [90, 50, 86, 40, 50, 20],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
itemStyle: {
|
|
||||||
color: '#5ab1ef',
|
|
||||||
},
|
|
||||||
name: '趋势',
|
|
||||||
value: [70, 75, 70, 76, 20, 85],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
itemStyle: {
|
|
||||||
// borderColor: '#fff',
|
|
||||||
borderRadius: 10,
|
|
||||||
borderWidth: 2,
|
|
||||||
},
|
|
||||||
symbolSize: 0,
|
|
||||||
type: 'radar',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
tooltip: {},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<EchartsUI ref="chartRef" />
|
|
||||||
</template>
|
|
||||||
-46
@@ -1,46 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
||||||
|
|
||||||
import { onMounted, ref } from 'vue';
|
|
||||||
|
|
||||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
||||||
|
|
||||||
const chartRef = ref<EchartsUIType>();
|
|
||||||
const { renderEcharts } = useEcharts(chartRef);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
renderEcharts({
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
animationDelay() {
|
|
||||||
return Math.random() * 400;
|
|
||||||
},
|
|
||||||
animationEasing: 'exponentialInOut',
|
|
||||||
animationType: 'scale',
|
|
||||||
center: ['50%', '50%'],
|
|
||||||
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
|
|
||||||
data: [
|
|
||||||
{ name: '外包', value: 500 },
|
|
||||||
{ name: '定制', value: 310 },
|
|
||||||
{ name: '技术支持', value: 274 },
|
|
||||||
{ name: '远程', value: 400 },
|
|
||||||
].toSorted((a, b) => {
|
|
||||||
return a.value - b.value;
|
|
||||||
}),
|
|
||||||
name: '商业占比',
|
|
||||||
radius: '80%',
|
|
||||||
roseType: 'radius',
|
|
||||||
type: 'pie',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<EchartsUI ref="chartRef" />
|
|
||||||
</template>
|
|
||||||
-65
@@ -1,65 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
||||||
|
|
||||||
import { onMounted, ref } from 'vue';
|
|
||||||
|
|
||||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
||||||
|
|
||||||
const chartRef = ref<EchartsUIType>();
|
|
||||||
const { renderEcharts } = useEcharts(chartRef);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
renderEcharts({
|
|
||||||
legend: {
|
|
||||||
bottom: '2%',
|
|
||||||
left: 'center',
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
animationDelay() {
|
|
||||||
return Math.random() * 100;
|
|
||||||
},
|
|
||||||
animationEasing: 'exponentialInOut',
|
|
||||||
animationType: 'scale',
|
|
||||||
avoidLabelOverlap: false,
|
|
||||||
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
|
|
||||||
data: [
|
|
||||||
{ name: '搜索引擎', value: 1048 },
|
|
||||||
{ name: '直接访问', value: 735 },
|
|
||||||
{ name: '邮件营销', value: 580 },
|
|
||||||
{ name: '联盟广告', value: 484 },
|
|
||||||
],
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
fontSize: '12',
|
|
||||||
fontWeight: 'bold',
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
// borderColor: '#fff',
|
|
||||||
borderRadius: 10,
|
|
||||||
borderWidth: 2,
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
position: 'center',
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
name: '访问来源',
|
|
||||||
radius: ['40%', '65%'],
|
|
||||||
type: 'pie',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<EchartsUI ref="chartRef" />
|
|
||||||
</template>
|
|
||||||
-55
@@ -1,55 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
||||||
|
|
||||||
import { onMounted, ref } from 'vue';
|
|
||||||
|
|
||||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
||||||
|
|
||||||
const chartRef = ref<EchartsUIType>();
|
|
||||||
const { renderEcharts } = useEcharts(chartRef);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
renderEcharts({
|
|
||||||
grid: {
|
|
||||||
bottom: 0,
|
|
||||||
containLabel: true,
|
|
||||||
left: '1%',
|
|
||||||
right: '1%',
|
|
||||||
top: '2 %',
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
barMaxWidth: 80,
|
|
||||||
// color: '#4f69fd',
|
|
||||||
data: [
|
|
||||||
3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000,
|
|
||||||
3200, 4800,
|
|
||||||
],
|
|
||||||
type: 'bar',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
tooltip: {
|
|
||||||
axisPointer: {
|
|
||||||
lineStyle: {
|
|
||||||
// color: '#4f69fd',
|
|
||||||
width: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
trigger: 'axis',
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
data: Array.from({ length: 12 }).map((_item, index) => `${index + 1}月`),
|
|
||||||
type: 'category',
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
max: 8000,
|
|
||||||
splitNumber: 4,
|
|
||||||
type: 'value',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<EchartsUI ref="chartRef" />
|
|
||||||
</template>
|
|
||||||
@@ -1,90 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { AnalysisOverviewItem } from '@vben/common-ui';
|
|
||||||
import type { TabOption } from '@vben/types';
|
|
||||||
|
|
||||||
import {
|
|
||||||
AnalysisChartCard,
|
|
||||||
AnalysisChartsTabs,
|
|
||||||
AnalysisOverview,
|
|
||||||
} from '@vben/common-ui';
|
|
||||||
import {
|
|
||||||
SvgBellIcon,
|
|
||||||
SvgCakeIcon,
|
|
||||||
SvgCardIcon,
|
|
||||||
SvgDownloadIcon,
|
|
||||||
} from '@vben/icons';
|
|
||||||
|
|
||||||
import AnalyticsTrends from './analytics-trends.vue';
|
|
||||||
import AnalyticsVisitsData from './analytics-visits-data.vue';
|
|
||||||
import AnalyticsVisitsSales from './analytics-visits-sales.vue';
|
|
||||||
import AnalyticsVisitsSource from './analytics-visits-source.vue';
|
|
||||||
import AnalyticsVisits from './analytics-visits.vue';
|
|
||||||
|
|
||||||
const overviewItems: AnalysisOverviewItem[] = [
|
|
||||||
{
|
|
||||||
icon: SvgCardIcon,
|
|
||||||
title: '用户量',
|
|
||||||
totalTitle: '总用户量',
|
|
||||||
totalValue: 120_000,
|
|
||||||
value: 2000,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: SvgCakeIcon,
|
|
||||||
title: '访问量',
|
|
||||||
totalTitle: '总访问量',
|
|
||||||
totalValue: 500_000,
|
|
||||||
value: 20_000,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: SvgDownloadIcon,
|
|
||||||
title: '下载量',
|
|
||||||
totalTitle: '总下载量',
|
|
||||||
totalValue: 120_000,
|
|
||||||
value: 8000,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: SvgBellIcon,
|
|
||||||
title: '使用量',
|
|
||||||
totalTitle: '总使用量',
|
|
||||||
totalValue: 50_000,
|
|
||||||
value: 5000,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const chartTabs: TabOption[] = [
|
|
||||||
{
|
|
||||||
label: '流量趋势',
|
|
||||||
value: 'trends',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '月访问量',
|
|
||||||
value: 'visits',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="p-5">
|
|
||||||
<AnalysisOverview :items="overviewItems" />
|
|
||||||
<AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
|
|
||||||
<template #trends>
|
|
||||||
<AnalyticsTrends />
|
|
||||||
</template>
|
|
||||||
<template #visits>
|
|
||||||
<AnalyticsVisits />
|
|
||||||
</template>
|
|
||||||
</AnalysisChartsTabs>
|
|
||||||
|
|
||||||
<div class="mt-5 w-full md:flex">
|
|
||||||
<AnalysisChartCard class="mt-5 md:mt-0 md:mr-4 md:w-1/3" title="访问数量">
|
|
||||||
<AnalyticsVisitsData />
|
|
||||||
</AnalysisChartCard>
|
|
||||||
<AnalysisChartCard class="mt-5 md:mt-0 md:mr-4 md:w-1/3" title="访问来源">
|
|
||||||
<AnalyticsVisitsSource />
|
|
||||||
</AnalysisChartCard>
|
|
||||||
<AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
|
|
||||||
<AnalyticsVisitsSales />
|
|
||||||
</AnalysisChartCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,266 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type {
|
|
||||||
WorkbenchProjectItem,
|
|
||||||
WorkbenchQuickNavItem,
|
|
||||||
WorkbenchTodoItem,
|
|
||||||
WorkbenchTrendItem,
|
|
||||||
} from '@vben/common-ui';
|
|
||||||
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { useRouter } from 'vue-router';
|
|
||||||
|
|
||||||
import {
|
|
||||||
AnalysisChartCard,
|
|
||||||
WorkbenchHeader,
|
|
||||||
WorkbenchProject,
|
|
||||||
WorkbenchQuickNav,
|
|
||||||
WorkbenchTodo,
|
|
||||||
WorkbenchTrends,
|
|
||||||
} from '@vben/common-ui';
|
|
||||||
import { preferences } from '@vben/preferences';
|
|
||||||
import { useUserStore } from '@vben/stores';
|
|
||||||
import { openWindow } from '@vben/utils';
|
|
||||||
|
|
||||||
import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';
|
|
||||||
|
|
||||||
const userStore = useUserStore();
|
|
||||||
|
|
||||||
// 这是一个示例数据，实际项目中需要根据实际情况进行调整
|
|
||||||
// url 也可以是内部路由，在 navTo 方法中识别处理，进行内部跳转
|
|
||||||
// 例如：url: /dashboard/workspace
|
|
||||||
const projectItems: WorkbenchProjectItem[] = [
|
|
||||||
{
|
|
||||||
color: '',
|
|
||||||
content: '不要等待机会，而要创造机会。',
|
|
||||||
date: '2021-04-01',
|
|
||||||
group: '开源组',
|
|
||||||
icon: 'carbon:logo-github',
|
|
||||||
title: 'Github',
|
|
||||||
url: 'https://github.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#3fb27f',
|
|
||||||
content: '现在的你决定将来的你。',
|
|
||||||
date: '2021-04-01',
|
|
||||||
group: '算法组',
|
|
||||||
icon: 'ion:logo-vue',
|
|
||||||
title: 'Vue',
|
|
||||||
url: 'https://vuejs.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#e18525',
|
|
||||||
content: '没有什么才能比努力更重要。',
|
|
||||||
date: '2021-04-01',
|
|
||||||
group: '上班摸鱼',
|
|
||||||
icon: 'ion:logo-html5',
|
|
||||||
title: 'Html5',
|
|
||||||
url: 'https://developer.mozilla.org/zh-CN/docs/Web/HTML',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#bf0c2c',
|
|
||||||
content: '热情和欲望可以突破一切难关。',
|
|
||||||
date: '2021-04-01',
|
|
||||||
group: 'UI',
|
|
||||||
icon: 'ion:logo-angular',
|
|
||||||
title: 'Angular',
|
|
||||||
url: 'https://angular.io',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#00d8ff',
|
|
||||||
content: '健康的身体是实现目标的基石。',
|
|
||||||
date: '2021-04-01',
|
|
||||||
group: '技术牛',
|
|
||||||
icon: 'bx:bxl-react',
|
|
||||||
title: 'React',
|
|
||||||
url: 'https://reactjs.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#EBD94E',
|
|
||||||
content: '路是走出来的，而不是空想出来的。',
|
|
||||||
date: '2021-04-01',
|
|
||||||
group: '架构组',
|
|
||||||
icon: 'ion:logo-javascript',
|
|
||||||
title: 'Js',
|
|
||||||
url: 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// 同样，这里的 url 也可以使用以 http 开头的外部链接
|
|
||||||
const quickNavItems: WorkbenchQuickNavItem[] = [
|
|
||||||
{
|
|
||||||
color: '#1fdaca',
|
|
||||||
icon: 'ion:home-outline',
|
|
||||||
title: '首页',
|
|
||||||
url: '/',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#bf0c2c',
|
|
||||||
icon: 'ion:grid-outline',
|
|
||||||
title: '仪表盘',
|
|
||||||
url: '/dashboard',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#e18525',
|
|
||||||
icon: 'ion:layers-outline',
|
|
||||||
title: '组件',
|
|
||||||
url: '/demos/features/icons',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#3fb27f',
|
|
||||||
icon: 'ion:settings-outline',
|
|
||||||
title: '系统管理',
|
|
||||||
url: '/demos/features/login-expired', // 这里的 URL 是示例，实际项目中需要根据实际情况进行调整
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#4daf1bc9',
|
|
||||||
icon: 'ion:key-outline',
|
|
||||||
title: '权限管理',
|
|
||||||
url: '/demos/access/page-control',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#00d8ff',
|
|
||||||
icon: 'ion:bar-chart-outline',
|
|
||||||
title: '图表',
|
|
||||||
url: '/analytics',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const todoItems = ref<WorkbenchTodoItem[]>([
|
|
||||||
{
|
|
||||||
completed: false,
|
|
||||||
content: `审查最近提交到Git仓库的前端代码，确保代码质量和规范。`,
|
|
||||||
date: '2024-07-30 11:00:00',
|
|
||||||
title: '审查前端代码提交',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
completed: true,
|
|
||||||
content: `检查并优化系统性能，降低CPU使用率。`,
|
|
||||||
date: '2024-07-30 11:00:00',
|
|
||||||
title: '系统性能优化',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
completed: false,
|
|
||||||
content: `进行系统安全检查，确保没有安全漏洞或未授权的访问。 `,
|
|
||||||
date: '2024-07-30 11:00:00',
|
|
||||||
title: '安全检查',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
completed: false,
|
|
||||||
content: `更新项目中的所有npm依赖包，确保使用最新版本。`,
|
|
||||||
date: '2024-07-30 11:00:00',
|
|
||||||
title: '更新项目依赖',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
completed: false,
|
|
||||||
content: `修复用户报告的页面UI显示问题，确保在不同浏览器中显示一致。 `,
|
|
||||||
date: '2024-07-30 11:00:00',
|
|
||||||
title: '修复UI显示问题',
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
const trendItems: WorkbenchTrendItem[] = [
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-1',
|
|
||||||
content: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
|
|
||||||
date: '刚刚',
|
|
||||||
title: '威廉',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-2',
|
|
||||||
content: `关注了 <a>威廉</a> `,
|
|
||||||
date: '1个小时前',
|
|
||||||
title: '艾文',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-3',
|
|
||||||
content: `发布了 <a>个人动态</a> `,
|
|
||||||
date: '1天前',
|
|
||||||
title: '克里斯',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-4',
|
|
||||||
content: `发表文章 <a>如何编写一个Vite插件</a> `,
|
|
||||||
date: '2天前',
|
|
||||||
title: 'Vben',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-1',
|
|
||||||
content: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
|
|
||||||
date: '3天前',
|
|
||||||
title: '皮特',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-2',
|
|
||||||
content: `关闭了问题 <a>如何运行项目</a> `,
|
|
||||||
date: '1周前',
|
|
||||||
title: '杰克',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-3',
|
|
||||||
content: `发布了 <a>个人动态</a> `,
|
|
||||||
date: '1周前',
|
|
||||||
title: '威廉',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-4',
|
|
||||||
content: `推送了代码到 <a>Github</a>`,
|
|
||||||
date: '2021-04-01 20:00',
|
|
||||||
title: '威廉',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-4',
|
|
||||||
content: `发表文章 <a>如何编写使用 Admin Vben</a> `,
|
|
||||||
date: '2021-03-01 20:00',
|
|
||||||
title: 'Vben',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
// 这是一个示例方法，实际项目中需要根据实际情况进行调整
|
|
||||||
// This is a sample method, adjust according to the actual project requirements
|
|
||||||
function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
|
|
||||||
if (nav.url?.startsWith('http')) {
|
|
||||||
openWindow(nav.url);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (nav.url?.startsWith('/')) {
|
|
||||||
router.push(nav.url).catch((error) => {
|
|
||||||
console.error('Navigation failed:', error);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="p-5">
|
|
||||||
<WorkbenchHeader
|
|
||||||
:avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
|
|
||||||
>
|
|
||||||
<template #title>
|
|
||||||
早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
|
|
||||||
</template>
|
|
||||||
<template #description> 今日晴，20℃ - 32℃！ </template>
|
|
||||||
</WorkbenchHeader>
|
|
||||||
|
|
||||||
<div class="mt-5 flex flex-col lg:flex-row">
|
|
||||||
<div class="mr-4 w-full lg:w-3/5">
|
|
||||||
<WorkbenchProject :items="projectItems" title="项目" @click="navTo" />
|
|
||||||
<WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
|
|
||||||
</div>
|
|
||||||
<div class="w-full lg:w-2/5">
|
|
||||||
<WorkbenchQuickNav
|
|
||||||
:items="quickNavItems"
|
|
||||||
class="mt-5 lg:mt-0"
|
|
||||||
title="快捷导航"
|
|
||||||
@click="navTo"
|
|
||||||
/>
|
|
||||||
<WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
|
|
||||||
<AnalysisChartCard class="mt-5" title="访问来源">
|
|
||||||
<AnalyticsVisitsSource />
|
|
||||||
</AnalysisChartCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,66 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { Page } from '@vben/common-ui';
|
|
||||||
|
|
||||||
import { Button, Card, message, notification, Space } from 'antdv-next';
|
|
||||||
|
|
||||||
type NotificationType = 'error' | 'info' | 'success' | 'warning';
|
|
||||||
|
|
||||||
function info() {
|
|
||||||
message.info('How many roads must a man walk down');
|
|
||||||
}
|
|
||||||
|
|
||||||
function error() {
|
|
||||||
message.error({
|
|
||||||
content: 'Once upon a time you dressed so fine',
|
|
||||||
duration: 2.5,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function warning() {
|
|
||||||
message.warning('How many roads must a man walk down');
|
|
||||||
}
|
|
||||||
function success() {
|
|
||||||
message.success('Cause you walked hand in hand With another man in my place');
|
|
||||||
}
|
|
||||||
|
|
||||||
function notify(type: NotificationType) {
|
|
||||||
notification[type]({
|
|
||||||
duration: 2.5,
|
|
||||||
title: '说点啥呢',
|
|
||||||
type,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Page
|
|
||||||
description="支持多语言，主题功能集成切换等"
|
|
||||||
title="Ant Design Vue组件使用演示"
|
|
||||||
>
|
|
||||||
<Card class="mb-5" title="按钮">
|
|
||||||
<Space>
|
|
||||||
<Button>Default</Button>
|
|
||||||
<Button type="primary"> Primary </Button>
|
|
||||||
<Button> Info </Button>
|
|
||||||
<Button danger> Error </Button>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
<Card class="mb-5" title="Message">
|
|
||||||
<Space>
|
|
||||||
<Button @click="info"> 信息 </Button>
|
|
||||||
<Button danger @click="error"> 错误 </Button>
|
|
||||||
<Button @click="warning"> 警告 </Button>
|
|
||||||
<Button @click="success"> 成功 </Button>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card class="mb-5" title="Notification">
|
|
||||||
<Space>
|
|
||||||
<Button @click="notify('info')"> 信息 </Button>
|
|
||||||
<Button danger @click="notify('error')"> 错误 </Button>
|
|
||||||
<Button @click="notify('warning')"> 警告 </Button>
|
|
||||||
<Button @click="notify('success')"> 成功 </Button>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
</Page>
|
|
||||||
</template>
|
|
||||||
Reference in New Issue
Block a user