init
This commit is contained in:
zyj
53
frontend/app/components/CardBarChart.vue
Normal file
53
frontend/app/components/CardBarChart.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
|
||||
<!-- Active Users Card -->
|
||||
<a-card :bordered="false" class="dashboard-bar-chart" style="margin-bottom: 20px;">
|
||||
<chart-bar :height="220" :data="barChartData"></chart-bar>
|
||||
<div class="card-title">
|
||||
<h2>Active Users</h2>
|
||||
<p>than last week <span class="text-success">+23%</span></p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>We have created multiple options for you to put together and customise into pixel perfect pages.</p>
|
||||
</div>
|
||||
<a-row class="card-footer" type="flex" justify="center" align="top">
|
||||
<a-col :span="6">
|
||||
<h4>3,6K</h4>
|
||||
<span>Users</span>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<h4>2m</h4>
|
||||
<span>Clicks</span>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<h4>$772</h4>
|
||||
<span>Sales</span>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<h4>82</h4>
|
||||
<span>Items</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<!-- Active Users Card -->
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
const barChartData = {
|
||||
labels: ["01", "02", "03", "04", "05", "06", "07", "08", "09"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Sales",
|
||||
backgroundColor: '#fff',
|
||||
borderWidth: 0,
|
||||
borderSkipped: false,
|
||||
borderRadius: 6,
|
||||
data: [850, 600, 500, 620, 900, 500, 900, 630, 900],
|
||||
maxBarThickness: 20
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
</script>
|
||||
44
frontend/app/components/CardLineChart.vue
Normal file
44
frontend/app/components/CardLineChart.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<a-card :bordered="false" class="dashboard-bar-line header-solid">
|
||||
<template #title>
|
||||
<h2>Sales Overview</h2>
|
||||
<p>than last year <span class="text-success">+20%</span></p>
|
||||
</template>
|
||||
|
||||
<template #extra>
|
||||
<a-badge color="primary" class="badge-dot-primary" text="Traffic" />
|
||||
<a-badge color="primary" class="badge-dot-secondary" text="Sales" />
|
||||
</template>
|
||||
|
||||
<chart-line :height="310" :data="lineChartData" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 定义折线图数据
|
||||
const lineChartData = {
|
||||
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Mobile apps",
|
||||
tension: 0.4,
|
||||
borderWidth: 0,
|
||||
pointRadius: 0,
|
||||
borderColor: "#1890FF",
|
||||
borderWidth: 3,
|
||||
data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
|
||||
maxBarThickness: 6
|
||||
},
|
||||
{
|
||||
label: "Websites",
|
||||
tension: 0.4,
|
||||
borderWidth: 0,
|
||||
pointRadius: 0,
|
||||
borderColor: "#B37FEB",
|
||||
borderWidth: 3,
|
||||
data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
|
||||
maxBarThickness: 6
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
101
frontend/app/components/ChartBar.vue
Normal file
101
frontend/app/components/ChartBar.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div>
|
||||
<canvas ref="chartRef" :style="{ height: height + 'px' }"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Chart, registerables } from 'chart.js'
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
|
||||
// 注册 Chart.js 所有组件
|
||||
Chart.register(...registerables)
|
||||
|
||||
// 定义 props
|
||||
const props = defineProps<{
|
||||
data: any
|
||||
height: number
|
||||
}>()
|
||||
|
||||
// chart 实例引用
|
||||
const chartRef = ref<HTMLCanvasElement | null>(null)
|
||||
let chartInstance: Chart | null = null
|
||||
|
||||
onMounted(() => {
|
||||
if (chartRef.value) {
|
||||
const ctx = chartRef.value.getContext('2d')
|
||||
if (!ctx) return
|
||||
|
||||
chartInstance = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: props.data,
|
||||
options: {
|
||||
layout: {
|
||||
padding: { top: 30, right: 15, left: 10, bottom: 5 }
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: false }
|
||||
},
|
||||
// Chart.js v3+ 的 tooltip 配置在 plugins.tooltip
|
||||
// 如果你用的是 v4，tooltips 配置需要改为 plugins.tooltip
|
||||
// 这里保留原写法
|
||||
tooltips: {
|
||||
enabled: true,
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
display: true,
|
||||
color: 'rgba(255, 255, 255, .2)',
|
||||
borderDash: [6],
|
||||
borderDashOffset: 6
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 0,
|
||||
suggestedMax: 1000,
|
||||
display: true,
|
||||
color: '#fff',
|
||||
font: {
|
||||
size: 14,
|
||||
lineHeight: 1.5,
|
||||
weight: '600',
|
||||
family: 'Open Sans'
|
||||
}
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: {
|
||||
display: true,
|
||||
color: '#fff',
|
||||
font: {
|
||||
size: 14,
|
||||
lineHeight: 1.5,
|
||||
weight: '600',
|
||||
family: 'Open Sans'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (chartInstance) {
|
||||
chartInstance.destroy()
|
||||
chartInstance = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
canvas {
|
||||
background-image: linear-gradient(to right, #00369E, #005CFD, #A18DFF);
|
||||
}
|
||||
</style>
|
||||
98
frontend/app/components/ChartLine.vue
Normal file
98
frontend/app/components/ChartLine.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div>
|
||||
<canvas ref="chartRef" :style="{ height: height + 'px' }"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Chart, registerables } from 'chart.js'
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
|
||||
// 注册 Chart.js 所有组件
|
||||
Chart.register(...registerables)
|
||||
|
||||
// 定义 props
|
||||
const props = defineProps<{
|
||||
data: any
|
||||
height: number
|
||||
}>()
|
||||
|
||||
// DOM 引用
|
||||
const chartRef = ref<HTMLCanvasElement | null>(null)
|
||||
// Chart 实例
|
||||
let chartInstance: Chart | null = null
|
||||
|
||||
onMounted(() => {
|
||||
if (!chartRef.value) return
|
||||
const ctx = chartRef.value.getContext('2d')
|
||||
if (!ctx) return
|
||||
|
||||
chartInstance = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: props.data,
|
||||
options: {
|
||||
layout: {
|
||||
padding: { top: 30, right: 15, left: 10, bottom: 5 }
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: false }
|
||||
},
|
||||
// Chart.js v3+ 的 tooltip 配置在 plugins.tooltip
|
||||
// 如果你用的是 v4，需要改成 plugins.tooltip
|
||||
tooltips: {
|
||||
enabled: true,
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
display: true,
|
||||
color: 'rgba(0, 0, 0, .2)',
|
||||
borderDash: [6],
|
||||
borderDashOffset: 6
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 0,
|
||||
suggestedMax: 1000,
|
||||
display: true,
|
||||
color: '#8C8C8C',
|
||||
font: {
|
||||
size: 14,
|
||||
lineHeight: 1.8,
|
||||
weight: '600',
|
||||
family: 'Open Sans'
|
||||
}
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: {
|
||||
display: true,
|
||||
color: '#8C8C8C',
|
||||
font: {
|
||||
size: 14,
|
||||
lineHeight: 1.5,
|
||||
weight: '600',
|
||||
family: 'Open Sans'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (chartInstance) {
|
||||
chartInstance.destroy()
|
||||
chartInstance = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 你可以在这里加样式 */
|
||||
</style>
|
||||
34
frontend/app/components/Header.vue
Normal file
34
frontend/app/components/Header.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="header-outside">
|
||||
<a-layout-header class="header">
|
||||
|
||||
<div class="header-menu">
|
||||
<div></div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { DownOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.header-menu{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.header-outside {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* z-index: 9999; */
|
||||
}
|
||||
|
||||
</style>
|
||||
49
frontend/app/components/HelloWorld.vue
Normal file
49
frontend/app/components/HelloWorld.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import {GreetService} from "../../bindings/go-site-clone";
|
||||
import {Events} from "@wailsio/runtime";
|
||||
|
||||
const name = ref('')
|
||||
const result = ref('Please enter your name below 👇')
|
||||
const time = ref('Listening for Time event...')
|
||||
|
||||
const doGreet = () => {
|
||||
let localName = name.value;
|
||||
if (!localName) {
|
||||
localName = 'anonymous';
|
||||
}
|
||||
GreetService.Greet(localName).then((resultValue) => {
|
||||
result.value = resultValue;
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
Events.On('time', (timeValue) => {
|
||||
time.value = timeValue.data;
|
||||
});
|
||||
})
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="result">{{ result }}</div>
|
||||
<div class="card">
|
||||
<div class="input-box">
|
||||
<input class="input" v-model="name" type="text" autocomplete="off"/>
|
||||
<button class="btn" @click="doGreet">Greet</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div><p>Click on the Wails logo to learn more</p></div>
|
||||
<div><p>{{ time }}</p></div>
|
||||
</div>
|
||||
</template>
|
||||
72
frontend/app/components/SiderMenu.vue
Normal file
72
frontend/app/components/SiderMenu.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-out">
|
||||
<a-layout-sider v-model:collapsed="collapsed" collapsible style="height: 100%;">
|
||||
<div class="logo" />
|
||||
<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" @click="menuClick">
|
||||
<a-menu-item key="">
|
||||
<pie-chart-outlined />
|
||||
<span>控制台</span>
|
||||
</a-menu-item>
|
||||
<a-sub-menu key="device">
|
||||
<template #title>
|
||||
<span>
|
||||
<user-outlined />
|
||||
<span>设备管理</span>
|
||||
</span>
|
||||
</template>
|
||||
<a-menu-item key="list">设备列表</a-menu-item>
|
||||
</a-sub-menu>
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
</div>
|
||||
<div>
|
||||
<a-layout-sider v-model:collapsed="collapsed" collapsible style="height: 100%;"></a-layout-sider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
PieChartOutlined,
|
||||
UserOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { ref } from 'vue';
|
||||
const collapsed = ref<boolean>(false);
|
||||
const selectedKeys = ref<string[]>(['']);
|
||||
function menuClick(e: any) {
|
||||
console.log(e);
|
||||
const keyList = e.keyPath
|
||||
let path = ''
|
||||
for (let i = 0; i < keyList.length; i++) {
|
||||
const element = keyList[i];
|
||||
path += "/"+element
|
||||
}
|
||||
navigateTo(path)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.logo {
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.site-layout .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
[data-theme='dark'] .site-layout .site-layout-background {
|
||||
background: #141414;
|
||||
}
|
||||
|
||||
.menu-out{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
35
frontend/app/components/WidgetCounter.vue
Normal file
35
frontend/app/components/WidgetCounter.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<a-card :bordered="false" class="widget-1" style="margin-bottom: 20px;">
|
||||
<a-statistic
|
||||
:title="title"
|
||||
:value="value"
|
||||
:prefix="prefix"
|
||||
:suffix="suffix"
|
||||
:precision="0"
|
||||
class="text-success"
|
||||
:class="'text-' + status"
|
||||
/>
|
||||
<div class="icon" v-html="icon"></div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
title?: string
|
||||
value?: number
|
||||
prefix?: string
|
||||
suffix?: string
|
||||
icon?: string
|
||||
status?: string
|
||||
}>()
|
||||
|
||||
// 默认值处理（可选）
|
||||
const {
|
||||
title = '',
|
||||
value = 0,
|
||||
prefix = '',
|
||||
suffix = '',
|
||||
icon = '',
|
||||
status = 'success'
|
||||
} = props
|
||||
</script>
|
||||
Reference in New Issue
Block a user