修改项目整体风格
This commit is contained in:
zyj
@@ -1,53 +0,0 @@
|
||||
<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>
|
||||
@@ -1,44 +0,0 @@
|
||||
<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>
|
||||
@@ -1,101 +0,0 @@
|
||||
<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>
|
||||
@@ -1,98 +0,0 @@
|
||||
<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>
|
||||
@@ -1,34 +1,313 @@
|
||||
<template>
|
||||
<div class="header-outside">
|
||||
<a-layout-header class="header">
|
||||
<div class="header-outside">
|
||||
<a-layout-header class="modern-header">
|
||||
<div class="header-content">
|
||||
<!-- 左侧面包屑导航 -->
|
||||
<div class="header-left">
|
||||
<a-breadcrumb class="breadcrumb">
|
||||
<a-breadcrumb-item>
|
||||
<home-outlined />
|
||||
<span>{{ breadcrumbTitle }}</span>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div class="header-menu">
|
||||
<div></div>
|
||||
<div>
|
||||
|
||||
<!-- 右侧操作区 -->
|
||||
<div class="header-right">
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-box">
|
||||
<a-input
|
||||
v-model:value="searchValue"
|
||||
placeholder="搜索功能..."
|
||||
class="search-input"
|
||||
allow-clear
|
||||
>
|
||||
<template #prefix>
|
||||
<search-outlined class="search-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<div class="header-actions">
|
||||
<a-tooltip title="通知">
|
||||
<a-badge :count="3" :offset="[-4, 4]">
|
||||
<div class="action-btn">
|
||||
<bell-outlined class="action-icon" />
|
||||
</div>
|
||||
</a-badge>
|
||||
</a-tooltip>
|
||||
|
||||
<a-tooltip title="设置">
|
||||
<div class="action-btn">
|
||||
<setting-outlined class="action-icon" />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider type="vertical" class="action-divider" />
|
||||
|
||||
<!-- 用户信息 -->
|
||||
<a-dropdown placement="bottomRight">
|
||||
<div class="user-info">
|
||||
<a-avatar
|
||||
class="user-avatar"
|
||||
:style="{ backgroundColor: '#667eea' }"
|
||||
>
|
||||
<template #icon>
|
||||
<user-outlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<span class="user-name">管理员</span>
|
||||
<down-outlined class="dropdown-icon" />
|
||||
</div>
|
||||
<template #overlay>
|
||||
<a-menu class="user-menu">
|
||||
<a-menu-item key="profile">
|
||||
<user-outlined />
|
||||
<span>个人中心</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="settings">
|
||||
<setting-outlined />
|
||||
<span>系统设置</span>
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="logout">
|
||||
<logout-outlined />
|
||||
<span>退出登录</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
</div>
|
||||
|
||||
|
||||
</a-layout-header>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { DownOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
HomeOutlined,
|
||||
SearchOutlined,
|
||||
BellOutlined,
|
||||
SettingOutlined,
|
||||
UserOutlined,
|
||||
DownOutlined,
|
||||
LogoutOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
const searchValue = ref('');
|
||||
|
||||
// 根据路由动态生成面包屑标题
|
||||
const breadcrumbTitle = computed(() => {
|
||||
const path = route.path;
|
||||
if (path === '/' || path === '') return '控制台';
|
||||
if (path.includes('download')) return '整站下载';
|
||||
if (path.includes('record')) return '下载记录';
|
||||
if (path.includes('webpage')) return 'Nginx网站';
|
||||
if (path.includes('pack')) return '打包应用';
|
||||
return '控制台';
|
||||
});
|
||||
</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; */
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.modern-header {
|
||||
background: white;
|
||||
padding: 0 24px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 左侧区域 */
|
||||
.header-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
:deep(.breadcrumb .ant-breadcrumb-link) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.breadcrumb .anticon) {
|
||||
font-size: 18px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
/* 右侧区域 */
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.search-box {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 240px;
|
||||
border-radius: 20px;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input:hover,
|
||||
.search-input:focus {
|
||||
background: white;
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
|
||||
}
|
||||
|
||||
:deep(.search-input .ant-input) {
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: #e6f7ff;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.action-btn:hover .action-icon {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.action-divider {
|
||||
height: 24px;
|
||||
margin: 0 4px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 用户信息 */
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.user-info:hover {
|
||||
background: #e6f7ff;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.user-info:hover .dropdown-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* 用户菜单 */
|
||||
:deep(.user-menu) {
|
||||
min-width: 160px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
:deep(.user-menu .ant-dropdown-menu-item) {
|
||||
padding: 10px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.user-menu .ant-dropdown-menu-item:hover) {
|
||||
background: #e6f7ff;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.modern-header {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
<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>
|
||||
@@ -1,84 +1,385 @@
|
||||
<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 />
|
||||
<!-- 折叠按钮 - 移到外层以避免被遮挡 -->
|
||||
<div class="collapse-trigger" @click="collapsed = !collapsed">
|
||||
<menu-unfold-outlined v-if="collapsed" class="trigger-icon" />
|
||||
<menu-fold-outlined v-else class="trigger-icon" />
|
||||
</div>
|
||||
|
||||
<a-layout-sider
|
||||
v-model:collapsed="collapsed"
|
||||
:trigger="null"
|
||||
:width="240"
|
||||
class="modern-sider"
|
||||
>
|
||||
<!-- Logo区域 -->
|
||||
<div class="logo-container">
|
||||
<div class="logo-icon">
|
||||
<cloud-server-outlined class="icon" />
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div v-if="!collapsed" class="logo-text">
|
||||
<div class="app-title">整站克隆</div>
|
||||
<div class="app-subtitle">Site Clone</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- 菜单 -->
|
||||
<a-menu
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
mode="inline"
|
||||
class="modern-menu"
|
||||
@click="menuClick"
|
||||
>
|
||||
<a-menu-item key="" class="menu-item">
|
||||
<template #icon>
|
||||
<home-outlined class="menu-icon" />
|
||||
</template>
|
||||
<span>控制台</span>
|
||||
</a-menu-item>
|
||||
<a-sub-menu key="site">
|
||||
<template #title>
|
||||
<span>
|
||||
<user-outlined />
|
||||
<span>仿站</span>
|
||||
</span>
|
||||
</template>
|
||||
<a-menu-item key="download">整站下载</a-menu-item>
|
||||
<a-menu-item key="record">仿站记录</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-sub-menu key="run">
|
||||
<template #title>
|
||||
<span>
|
||||
<IeOutlined />
|
||||
<span>运行</span>
|
||||
</span>
|
||||
</template>
|
||||
<a-menu-item key="webpage">Nginx网站</a-menu-item>
|
||||
<a-menu-item key="pack">打包应用</a-menu-item>
|
||||
</a-sub-menu>
|
||||
|
||||
<a-menu-divider class="menu-divider" />
|
||||
|
||||
<a-menu-item-group title="站点管理" class="menu-group">
|
||||
<a-menu-item key="site/download" class="menu-item">
|
||||
<template #icon>
|
||||
<cloud-download-outlined class="menu-icon" />
|
||||
</template>
|
||||
<span>整站下载</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="site/record" class="menu-item">
|
||||
<template #icon>
|
||||
<history-outlined class="menu-icon" />
|
||||
</template>
|
||||
<span>下载记录</span>
|
||||
</a-menu-item>
|
||||
</a-menu-item-group>
|
||||
|
||||
<a-menu-divider class="menu-divider" />
|
||||
|
||||
<a-menu-item-group title="部署运行" class="menu-group">
|
||||
<a-menu-item key="run/webpage" class="menu-item">
|
||||
<template #icon>
|
||||
<global-outlined class="menu-icon" />
|
||||
</template>
|
||||
<span>Nginx网站</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="run/pack" class="menu-item">
|
||||
<template #icon>
|
||||
<appstore-outlined class="menu-icon" />
|
||||
</template>
|
||||
<span>打包应用</span>
|
||||
</a-menu-item>
|
||||
</a-menu-item-group>
|
||||
</a-menu>
|
||||
|
||||
<!-- 底部信息 -->
|
||||
<div class="sider-footer">
|
||||
<transition name="fade">
|
||||
<div v-if="!collapsed" class="footer-content">
|
||||
<div class="version-info">
|
||||
<api-outlined class="footer-icon" />
|
||||
<span>v1.0.0</span>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
</div>
|
||||
<div>
|
||||
<a-layout-sider v-model:collapsed="collapsed" collapsible style="height: 100%;"></a-layout-sider>
|
||||
<a-layout-sider
|
||||
v-model:collapsed="collapsed"
|
||||
:trigger="null"
|
||||
:width="240"
|
||||
style="height: 100%; visibility: hidden;"
|
||||
></a-layout-sider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
PieChartOutlined,
|
||||
UserOutlined,
|
||||
IeOutlined,
|
||||
HomeOutlined,
|
||||
CloudDownloadOutlined,
|
||||
HistoryOutlined,
|
||||
GlobalOutlined,
|
||||
AppstoreOutlined,
|
||||
CloudServerOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
ApiOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { ref } from 'vue';
|
||||
import { ref, watch, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const collapsed = ref<boolean>(false);
|
||||
const selectedKeys = ref<string[]>(['']);
|
||||
const route = useRoute();
|
||||
|
||||
// 监听路由变化更新选中状态
|
||||
watch(() => route.path, (newPath) => {
|
||||
updateSelectedKeys(newPath);
|
||||
}, { immediate: true });
|
||||
|
||||
onMounted(() => {
|
||||
updateSelectedKeys(route.path);
|
||||
});
|
||||
|
||||
function updateSelectedKeys(path: string) {
|
||||
// 移除开头的斜杠
|
||||
const cleanPath = path.startsWith('/') ? path.slice(1) : path;
|
||||
selectedKeys.value = cleanPath ? [cleanPath] : [''];
|
||||
}
|
||||
|
||||
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
|
||||
const key = e.key;
|
||||
if (key) {
|
||||
navigateTo('/' + key);
|
||||
} else {
|
||||
navigateTo('/');
|
||||
}
|
||||
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{
|
||||
.menu-out {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
z-index: 1000;
|
||||
min-height: 100vh;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.modern-sider {
|
||||
background: linear-gradient(180deg, #1a1f35 0%, #0f1419 100%) !important;
|
||||
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: visible;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-layout-sider-children) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Logo区域 */
|
||||
.logo-container {
|
||||
padding: 24px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
margin-bottom: 8px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.logo-icon .icon {
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.app-subtitle {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 折叠按钮 */
|
||||
.collapse-trigger {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: -14px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.collapse-trigger:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.trigger-icon {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 菜单样式 */
|
||||
.modern-menu {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
/* 隐藏滚动条但保持功能 */
|
||||
.modern-menu::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.modern-menu::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.modern-menu::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.modern-menu::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
:deep(.ant-menu-item-group-title) {
|
||||
color: rgba(255, 255, 255, 0.45) !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
padding: 16px 16px 8px !important;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
:deep(.menu-item) {
|
||||
margin: 4px 0 !important;
|
||||
border-radius: 10px !important;
|
||||
height: 44px !important;
|
||||
line-height: 44px !important;
|
||||
color: rgba(255, 255, 255, 0.75) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
:deep(.menu-item:hover) {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
:deep(.menu-item.ant-menu-item-selected) {
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%) !important;
|
||||
color: white !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:deep(.menu-item.ant-menu-item-selected::before) {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 60%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
:deep(.menu-icon) {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
:deep(.menu-divider) {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
margin: 16px 16px !important;
|
||||
}
|
||||
|
||||
/* 底部信息 */
|
||||
.sider-footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.version-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 过渡动画 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 折叠状态调整 */
|
||||
:deep(.ant-layout-sider-collapsed) .logo-container {
|
||||
padding: 24px 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.ant-layout-sider-collapsed) .modern-menu {
|
||||
padding: 8px 8px;
|
||||
}
|
||||
|
||||
:deep(.ant-layout-sider-collapsed .ant-menu-item-group-title) {
|
||||
padding: 8px 0 !important;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-layout-sider-collapsed .menu-item) {
|
||||
padding: 0 calc(50% - 18px / 2) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,35 +0,0 @@
|
||||
<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