change sidebar ui and icon

This commit is contained in:
Julian Freeman
2025-12-07 21:31:56 -04:00
parent c0403e3b6e
commit 2cb13d70f7
59 changed files with 34 additions and 13 deletions

View File

@@ -5,6 +5,7 @@ import { invoke } from "@tauri-apps/api/core";
import { ElMessage } from 'element-plus';
import { Document, VideoPlay, CircleCheck, Moon, Sunny, Delete, UploadFilled, Refresh } from '@element-plus/icons-vue';
import { listen, UnlistenFn } from '@tauri-apps/api/event';
import appIcon from './assets/app-icon-96.png';
// Navigation
const activeMenu = ref("preparation");
@@ -469,6 +470,9 @@ watch(currentDir, (newPath) => {
<template>
<el-container class="layout-container" style="height: 100vh">
<el-aside width="200px" class="main-aside">
<div class="aside-header">
<img :src="appIcon" alt="App Icon" class="app-icon" />
</div>
<el-menu
:default-active="activeMenu"
class="el-menu-vertical-demo"
@@ -503,7 +507,6 @@ watch(currentDir, (newPath) => {
<el-main>
<!-- Preparation Page -->
<div v-if="activeMenu === 'preparation'">
<h2>准备工作</h2>
<el-card class="box-card" shadow="hover">
<template #header>
@@ -573,7 +576,6 @@ watch(currentDir, (newPath) => {
<!-- Review Page -->
<div v-else-if="activeMenu === 'review'">
<h2>审核</h2>
<el-alert
v-if="isReviewDisabled"
@@ -627,7 +629,6 @@ watch(currentDir, (newPath) => {
<!-- Check Page -->
<div v-else-if="activeMenu === 'check'" style="display: flex; flex-direction: column; height: 100%; overflow: hidden;">
<h2>检查</h2>
<el-alert
v-if="isReviewDisabled"
@@ -680,6 +681,26 @@ body {
flex-direction: column;
transition: background-color 0.3s, border-color 0.3s;
}
.aside-header {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.app-icon {
width: 64px;
height: 64px;
}
.el-menu-vertical-demo .el-menu-item {
font-size: 20px; /* Increase text size */
height: 80px; /* Adjust height to accommodate larger font/icons and maintain spacing */
line-height: 50px;
}
.el-menu-vertical-demo .el-menu-item .el-icon {
font-size: 20px; /* Increase icon size */
margin-right: 12px;
}
.aside-footer {
padding: 16px;
display: flex;