初始版本

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+out
+.DS_Store
+.eslintcache
+*.log*
+.idea

.npmrc

@@ -0,0 +1,2 @@
+electron_mirror=https://npmmirror.com/mirrors/electron/
+electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

.prettierignore

@@ -0,0 +1,6 @@
+out
+dist
+pnpm-lock.yaml
+LICENSE.md
+tsconfig.json
+tsconfig.*.json

.prettierrc.yaml

@@ -0,0 +1,4 @@
+singleQuote: true
+semi: false
+printWidth: 100
+trailingComma: none

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint"]
+}

.vscode/launch.json

@@ -0,0 +1,39 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Main Process",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceRoot}",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite",
+      "windows": {
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
+      },
+      "runtimeArgs": ["--sourcemap"],
+      "env": {
+        "REMOTE_DEBUGGING_PORT": "9222"
+      }
+    },
+    {
+      "name": "Debug Renderer Process",
+      "port": 9222,
+      "request": "attach",
+      "type": "chrome",
+      "webRoot": "${workspaceFolder}/src/renderer",
+      "timeout": 60000,
+      "presentation": {
+        "hidden": true
+      }
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Debug All",
+      "configurations": ["Debug Main Process", "Debug Renderer Process"],
+      "presentation": {
+        "order": 1
+      }
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

README.md

@@ -0,0 +1,34 @@
+# hardware_monitorndefinedndefined
+
+An Electron application with Vue and TypeScript
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+
+## Project Setup
+
+### Install
+
+```bash
+$ npm install
+```
+
+### Development
+
+```bash
+$ npm run dev
+```
+
+### Build
+
+```bash
+# For windows
+$ npm run build:win
+
+# For macOS
+$ npm run build:mac
+
+# For Linux
+$ npm run build:linux
+```

build/entitlements.mac.plist

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
+    <true/>
+  </dict>
+</plist>

electron-builder.yml

@@ -0,0 +1,45 @@
+appId: com.electron.app
+productName: hardware_monitorndefinedndefined
+directories:
+  buildResources: build
+files:
+  - '!**/.vscode/*'
+  - '!src/*'
+  - '!electron.vite.config.{js,ts,mjs,cjs}'
+  - '!{.eslintcache,eslint.config.mjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
+  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
+  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
+asarUnpack:
+  - resources/**
+win:
+  executableName: hardware_monitorndefinedndefined
+nsis:
+  artifactName: ${name}-${version}-setup.${ext}
+  shortcutName: ${productName}
+  uninstallDisplayName: ${productName}
+  createDesktopShortcut: always
+mac:
+  entitlementsInherit: build/entitlements.mac.plist
+  extendInfo:
+    - NSCameraUsageDescription: Application requests access to the device's camera.
+    - NSMicrophoneUsageDescription: Application requests access to the device's microphone.
+    - NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
+    - NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
+  notarize: false
+dmg:
+  artifactName: ${name}-${version}.${ext}
+linux:
+  target:
+    - AppImage
+    - snap
+    - deb
+  maintainer: electronjs.org
+  category: Utility
+appImage:
+  artifactName: ${name}-${version}.${ext}
+npmRebuild: false
+publish:
+  provider: generic
+  url: https://example.com/auto-updates
+electronDownload:
+  mirror: https://npmmirror.com/mirrors/electron/

electron.vite.config.ts

@@ -0,0 +1,21 @@
+import { resolve } from 'path'
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  main: {
+    plugins: [externalizeDepsPlugin()]
+  },
+  preload: {
+    plugins: [externalizeDepsPlugin()]
+  },
+  renderer: {
+    resolve: {
+      alias: {
+        '@renderer': resolve('src/renderer/src')
+      }
+    },
+    plugins: [vue()],
+    assetsInclude: ["**/*.node", "**.*.lib", "**/*.dll", "**/*.xml"],
+  }
+})

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "hardware_monitorndefinedndefined",
+  "version": "1.0.0",
+  "description": "An Electron application with Vue and TypeScript",
+  "main": "./out/main/index.js",
+  "author": "example.com",
+  "homepage": "https://electron-vite.org",
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "eslint --cache .",
+    "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
+    "typecheck:web": "vue-tsc --noEmit -p tsconfig.web.json --composite false",
+    "typecheck": "npm run typecheck:node && npm run typecheck:web",
+    "start": "electron-vite preview",
+    "dev": "electron-vite dev",
+    "build": "npm run typecheck && electron-vite build",
+    "postinstall": "electron-builder install-app-deps",
+    "build:unpack": "npm run build && electron-builder --dir",
+    "build:win": "npm run build && electron-builder --win",
+    "build:mac": "npm run build && electron-builder --mac",
+    "build:linux": "npm run build && electron-builder --linux"
+  },
+  "dependencies": {
+    "@electron-toolkit/preload": "^3.0.1",
+    "@electron-toolkit/utils": "^4.0.0",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@electron-toolkit/eslint-config-prettier": "3.0.0",
+    "@electron-toolkit/eslint-config-ts": "^3.0.0",
+    "@electron-toolkit/tsconfig": "^1.0.1",
+    "@types/node": "^22.14.1",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "electron": "^35.1.5",
+    "electron-builder": "^25.1.8",
+    "electron-vite": "^3.1.0",
+    "eslint": "^9.24.0",
+    "eslint-plugin-vue": "^10.0.0",
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.6",
+    "vue": "^3.5.13",
+    "vue-eslint-parser": "^10.1.3",
+    "vue-tsc": "^2.2.8"
+  }
+}

resources/hardware_monitor/LibreHardwareManagerManaged2.dll.metagen

@@ -0,0 +1,15 @@
+ImageRuntimeVersion: v4.0.30319
+Assembly LibreHardwareManagerManaged2, Version=1.0.*, Culture=固定语言(固定国家/地区): 
+	hash=SHA1, flags=PublicKey
+Assembly mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089: 
+	hash=None, flags=None
+Assembly LibreHardwareMonitorLib, Version=0.9.*, Culture=固定语言(固定国家/地区): 
+	hash=None, flags=None
+Assembly System.Data, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089: 
+	hash=None, flags=None
+Assembly System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089: 
+	hash=None, flags=None
+Assembly System.Xml, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089: 
+	hash=None, flags=None
+Class LibreHardwareManagerManaged2.Class1: AutoLayout, AnsiClass, Class, Public, BeforeFieldInit
+    Void .ctor(): PrivateScope, Public, HideBySig, SpecialName, RTSpecialName

src/main/index.ts

@@ -0,0 +1,78 @@
+import { app, shell, BrowserWindow, ipcMain } from 'electron'
+import { join } from 'path'
+import { electronApp, optimizer, is } from '@electron-toolkit/utils'
+import icon from '../../resources/icon.png?asset'
+import hardware_monitor from '../../resources/hardware_monitor/hardware_monitor.node'
+function handleQueryCpuName () {
+  hardware_monitor.cpu_name()
+}
+function createWindow(): void {
+  // Create the browser window.
+  const mainWindow = new BrowserWindow({
+    width: 900,
+    height: 670,
+    show: false,
+    autoHideMenuBar: true,
+    ...(process.platform === 'linux' ? { icon } : {}),
+    webPreferences: {
+      preload: join(__dirname, '../preload/index.js'),
+      sandbox: false
+    }
+  })
+
+  mainWindow.on('ready-to-show', () => {
+    mainWindow.show()
+  })
+
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url)
+    return { action: 'deny' }
+  })
+
+  // HMR for renderer base on electron-vite cli.
+  // Load the remote URL for development or the local html file for production.
+  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
+  } else {
+    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
+  }
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.whenReady().then(() => {
+  //ipcMain.handle('queryCpuName', handleQueryCpuName)
+  // Set app user model id for windows
+  electronApp.setAppUserModelId('com.electron')
+
+  // Default open or close DevTools by F12 in development
+  // and ignore CommandOrControl + R in production.
+  // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
+  app.on('browser-window-created', (_, window) => {
+    optimizer.watchWindowShortcuts(window)
+  })
+
+  // IPC test
+  ipcMain.on('ping', () => console.log('pong'))
+
+  createWindow()
+
+  app.on('activate', function () {
+    // On macOS it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+})
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.

src/preload/index.d.ts

@@ -0,0 +1,8 @@
+import { ElectronAPI } from '@electron-toolkit/preload'
+
+declare global {
+  interface Window {
+    electron: ElectronAPI
+    api: unknown
+  }
+}

src/preload/index.ts

@@ -0,0 +1,22 @@
+import { contextBridge } from 'electron'
+import { electronAPI } from '@electron-toolkit/preload'
+
+// Custom APIs for renderer
+const api = {}
+
+// Use `contextBridge` APIs to expose Electron APIs to
+// renderer only if context isolation is enabled, otherwise
+// just add to the DOM global.
+if (process.contextIsolated) {
+  try {
+    contextBridge.exposeInMainWorld('electron', electronAPI)
+    contextBridge.exposeInMainWorld('api', api)
+  } catch (error) {
+    console.error(error)
+  }
+} else {
+  // @ts-ignore (define in dts)
+  window.electron = electronAPI
+  // @ts-ignore (define in dts)
+  window.api = api
+}

src/renderer/App.vue

@@ -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>

src/renderer/assets/base.css

@@ -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;
+}

src/renderer/assets/main.css

@@ -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;
+}

src/renderer/componments/DeviceInformation.vue

@@ -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>

src/renderer/componments/HardwareInfo/Cpu.vue

@@ -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>

src/renderer/componments/HardwareInfo/HardwareInfo.vue

@@ -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>

src/renderer/componments/OverviewOfStatus.vue

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

src/renderer/componments/Setting.vue

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

src/renderer/componments/ThemeEditing.vue

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

src/renderer/index.html

@@ -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>

src/renderer/main.ts

@@ -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')

src/renderer/router/index.ts

@@ -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

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.web.json" }]
+}

tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
+  "include": ["electron.vite.config.*", "src/main/**/*", "src/preload/**/*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["electron-vite/node"]
+  }
+}

tsconfig.web.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
+  "include": [
+    "src/renderer/src/env.d.ts",
+    "src/renderer/src/**/*",
+    "src/renderer/src/**/*.vue",
+    "src/preload/*.d.ts"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@renderer/*": [
+        "src/renderer/src/*"
+      ]
+    }
+  }
+}