Admin/hardwaremoniter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始版本

Browse Source
This commit is contained in:
孙羽
2025-06-07 17:52:33 +08:00
commit 232ba1a5ae
51 changed files with 12314 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/renderer/App.vue Normal file
View File

@ -0,0 +1,141 @@
<template>
<!--整体的盒子-->
<div class="All">
<!--左侧目录菜单-->
<div class="content">
<div class="aigo">
{{ aigo }}
</div>
<!--左侧四个菜单部分-->
<button
v-for="(buttonI,i) in buttonMenu"
:key="buttonI.name"
:class="{ active: buttonI.isActive }"
class="buttonMenu"
@click="switchbutton(buttonI,i)"
>
{{ buttonI.name }}
</button>
<!--下方设置部分-->
<button
class="buttonSetting"
:class="{ active: buttonSetting.isActive }"
@click="switchSettingbutton(buttonSetting.isActive)"
>
{{ buttonSetting.name }}
</button>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter} from 'vue-router';
const aigo=ref('aigo');
/*四个菜单部分*/
const buttonList={
OVERVIEW: 0,
HARDWARE_INFO: 1,
DEVICE_INFO: 2,
THEMES_EDIT:3
};
const buttonMenu=ref([
{ name: '状态概览', id: buttonList.OVERVIEW , path: "/overview", isActive: true},
{ name: '硬件信息', id: buttonList.HARDWARE_INFO, path: "/hardwareInfo", isActive: false},
{ name: '设备信息', id: buttonList.DEVICE_INFO, path: "/equipmentInformation", isActive: false},
{ name: '主题编辑', id: buttonList.THEMES_EDIT, path: "/themeEdit", isActive: false}
]);
const router=useRouter();
/*单独的设置部分*/
const buttonSetting=ref({name:'设置',isActive:false});
function switchbutton(BI: { name:string, id: number, path: string, isActive: boolean}, i:number){
for(let j=0;j<buttonMenu.value.length;j++){
buttonMenu.value[j].isActive=false
}
buttonMenu.value[i].isActive=true;
router.push(BI.path)
};
function switchSettingbutton(SI:any)
{
buttonSetting.value.isActive = !SI
};
</script>
<style scoped>
/*左侧aigo文艺字体logo的样式*/
.aigo {
font-size: 55px;
color: white;
padding: 7%;
text-align: center;
height: 20%;
font-weight: 600;
}
/*整体的背景设计*/
.All {
position: fixed;
background-color: #000000;
height: 100%;
width: 100%;
top: 0%;
left: 0%;
display: flex;
flex-direction: row;
}
/*左侧整体目录的样式*/
.content {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 10%;
background: linear-gradient(135deg, #0b0d1c, #160b34);
}
/*左侧四个菜单的样式*/
.buttonMenu {
width: 100%;
box-sizing: border-box; /* 包含padding和border在宽度内 */
display: block; /* 块级元素默认横向撑满 */
padding: 7% 30%; /* 保持内边距 */
text-align: left;
margin-top: 30%; /*与上一个模块的距离*/
background: linear-gradient(135deg, #0b0d1c, #160b34);
color: #f2f2f2;
border: none;
}
/*按钮按下去后的颜色变化*/
button.active {
background: #5c39df;
font-weight: bold;
border-radius: 0px 10px 10px 0px;
width: 95%;
}
/*左侧设置菜单的单独样式*/
.buttonSetting {
width: 100%;
box-sizing: border-box; /* 包含padding和border在宽度内 */
display: block; /* 块级元素默认横向撑满 */
padding: 15% 35%; /* 保持内边距 */
text-align: left;
margin-top: 70%;
background: linear-gradient(135deg, #0b0d1c, #160b34);
border: none;
color: #f2f2f2;
}
</style>

86
src/renderer/assets/base.css Normal file
View File

@ -0,0 +1,86 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

12
src/renderer/assets/main.css Normal file
View File

@ -0,0 +1,12 @@
:root {
--primary-bg: #000000;
--sidebar-gradient: linear-gradient(135deg, #0b0d1c, #160b34);
--header-purple: #6953ce;
--text-light: #f2f2f2;
--divider-color: #272b37;
}
/* 全局过渡效果 */
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}

173
src/renderer/componments/DeviceInformation.vue Normal file
View File

@ -0,0 +1,173 @@
<script setup lang="ts">
import { ref } from 'vue'
/*小字体///young*/
const young=ref('/// YOUNG /// YOUNG //// YOUNG ////');
/*大字体YOUNG*/
const Young=ref("YOUNG");
/*我有我的YOUNG*/
const myYoung=ref('我有我的YOUNG');
/*equipmentList的字段*/
const equipmentList=ref('设备列表');
/*电脑型号字段*/
const panelHeader_Model=ref('星璨 大岚 屏显版');
/*电脑分辨率字段*/
const panelHeader_Timing=ref('分辨率: 1920*462');
</script>
<template>
<!--右上方图片展示-->
<div>
<!--小字Young-->
<div
class="yong"
>
{{young}}
</div>
<!--Young字样-->
<div
class="Yong">
{{Young}}
</div>
<!--图片标题展示盒子-->
<div
class="boxOftital">
<!--三个图标-->
<div>
</div>
<!--我有我的YOUNG-->
<div
CLASS="myYoung">
{{myYoung}}
</div>
<!--图片的插入-->
<div>
</div>
</div>
</div>
<!--设备列表-->
<div
class="equipmentList">
{{equipmentList}}
</div>
<!--控制面板-->
<div
class="controlPanel">
<!--面板表头信息-->
<div
class="panelHeader_Model"
>
{{panelHeader_Model}}
</div>
<div
class="panelHeader_Timing"
>
{{panelHeader_Timing}}
</div>
<div class="white-line"></div>
</div>
</template>
<style scoped>
/*小字体yong的格式样式*/
.yong{
position: fixed;
transform: rotate(90deg);
height: 6%;
top: 19%;
left: 4%;
color: #494949;
font-size: small;
font-weight: 600;
}
/*大字体YONG的格式样式*/
.Yong{
position: fixed;
transform: rotate(90deg);
color: #494949;
font-size: 70px;
left: 7%;
top: 14%;
font-weight: 600;
}
/*我有我的YOUNG的样式设计*/
.myYoung{
color: #f2f2f2;
font-size: 75px;
padding: 5.5% 2.5%;
text-shadow: 0 2px 4px rgb(22, 11, 52); /* 轻微阴影增加立体感 */
text-rendering: optimizeLegibility; /* 字体渲染优化 */
}
/*右上角盒子的背景和图片设计*/
.boxOftital{
position: fixed;
background-color: #6953ce;
width: 82.5%;
height: 35%;
left: 17%;
top: 4%;
}
/*设备列表的格式设计*/
.equipmentList{
position: fixed;
color: #f2f2f2;
font-weight: 600;
font-size: 26px;
left: 11.5%;
top: 38%;
}
/*控制面板的样式设计*/
.controlPanel{
position: fixed;
width: 85%;
height: 30%;
background-color: #131521;
top: 44%;
left: 12.5%;
}
/*电脑型号模块设计*/
.panelHeader_Model{
color: #f2f2f2;
font-size: 20px;
font-weight: 600;
padding: 1% 1%;
width: 13%;
height: 10%;
}
/*电脑分辨率模块设计*/
.panelHeader_Timing{
position: fixed;
color: #f2f2f2;
top: 47%;
left: 28%;
}
/*可控白线*/
.white-line
{
height: 0.5px;
background: #272b37;
margin: 1px 0; /* 控制间距 */
}
</style>

61
src/renderer/componments/HardwareInfo/Cpu.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<div class="All_information">
<div class="background">
<div class="cpu_name_style">
{{cpu_name}}
</div>
<div v-for="meg in information" class="information">
{{meg.id}}
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// let cpu_name = window.electron.queryCpuName()
/*除了名字之外的所有信息*/
let information= ref([
{
id:"cpu功耗",
},
{
id:"cpu负载",
},
{
id:"cpu温度",
},
{
id:"cpu电压",
}
])
</script>
<style scoped>
.cpu_name_style{
color: #f2f2f2;
}
/*cpu展示页面设计*/
.background{
background-color: black;
position: fixed;
width: 70%;
height: 80%;
top: 10%;
left: 23%;
}
/*大盒子的背景颜色*/
.All_information{
background-color: #1f1f27;
width: 100%;
height: 100%;
}
/*cpu展示信息的字体样式*/
.information{
color:#f2f2f2 ;
}
</style>

111
src/renderer/componments/HardwareInfo/HardwareInfo.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<!-- 不变的目录 -->
<div class="all">
<div class="buttons">
<button
v-for="(MenuUnit,i) in Menu"
class="buttonStyle"
:class="{ active: MenuUnit.isActive }"
:key="MenuUnit.name"
@click="switchbutton(MenuUnit,i)"
>
{{ MenuUnit.name }}
</button>
</div>
<router-view></router-view>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import {useRouter } from 'vue-router'
const router=useRouter();
let Menu = ref([
{
name: 'CPU',
isActive : true,
id:0,
path:"/hardwareInfo/cpu",
},
{
name: 'GPU',
isActive : false,
id:1,
path:"",
},
{
name: '主板',
isActive : false,
id:2,
path:"",
},
{
name: '内存',
isActive : false,
id:3,
path:"",
},
{
name: '硬盘',
isActive : false,
id:4,
path:"",
},
{
name:'显示器',
isActive : false,
id:5,
path:"",
}
])
function switchbutton(menu:{
name: string,isActive: boolean,path:string},j : number)
{
for(let i=0;i<Menu.value.length;i++)
{
Menu.value[i].isActive = false;
}
Menu.value[j].isActive = true;
router.push(menu.path);
}
</script>
<style scoped>
/*最外层的盒子的样式设计*/
.all {
position: fixed;
top: 5%;
left: 15%;
height: 90%;
width: 80%;
background-color: #1d1d25;
display: flex;
flex-direction: row;
}
/*按钮的风格样式和格式设计*/
.buttonStyle {
display: block;
width: 100%;
height: 16.67%;
background: linear-gradient(135deg, #0b0d1c, #160b34);
color: #f2f2f2;
border: none;
}
/*点击按钮后按钮的样式*/
.buttonStyle.active{
background: #fb00c5;
border-radius: 10px 10px 10px 10px;
}
.buttons{
display: flex;
flex-direction: column;
justify-content: center;
width: 8%;
}
</style>

11
src/renderer/componments/OverviewOfStatus.vue Normal file
View File

@ -0,0 +1,11 @@
<script setup lang="ts">
</script>
<template>
</template>
<style scoped>
</style>

11
src/renderer/componments/Setting.vue Normal file
View File

@ -0,0 +1,11 @@
<script setup lang="ts">
</script>
<template>
</template>
<style scoped>
</style>

11
src/renderer/componments/ThemeEditing.vue Normal file
View File

@ -0,0 +1,11 @@
<script setup lang="ts">
</script>
<template>
</template>
<style scoped>
</style>

13
src/renderer/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/main.ts"></script>
</body>
</html>

7
src/renderer/main.ts Normal file
View File

@ -0,0 +1,7 @@
import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.mount('#app')

38
src/renderer/router/index.ts Normal file
View File

@ -0,0 +1,38 @@
import { createRouter, createWebHistory } from 'vue-router'
import HardwareInfo from '../componments/HardwareInfo/HardwareInfo.vue'
import DeviceInformation from '../componments/DeviceInformation.vue'
import OverviewOfStatus from '../componments/OverviewOfStatus.vue'
import ThemeEditing from '../componments/ThemeEditing.vue'
import Cpu from '../componments/HardwareInfo/Cpu.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/hardwareInfo",
component: HardwareInfo,
children: [
{
path: "/hardwareInfo/cpu",
component:Cpu,
}
]
},
{
path:"/equipmentInformation",
component:DeviceInformation
},
{
path:"/overview",
component: OverviewOfStatus
},
{
path: "/themeEdit",
component: ThemeEditing
}
],
})
export default router