From 5eebeba2a160192d48344ab587e90faaf6135dd8 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 03 六月 2024 15:45:44 +0800
Subject: [PATCH] feat:用户信息面板
---
dist-electron/background.js | 9 ++-
src/layout/components/Header/index.vue | 6 +-
src/assets/icons/icon1.png | 0
src/views/home/index.vue | 9 ++
src/assets/icons/icon2.png | 0
src/views/home/components/user-panel/index.vue | 92 ++++++++++++++++++++++++++++++
components.d.ts | 4 +
src/background.js | 9 ++-
src/layout/index.vue | 1
src/App.vue | 6 +
src/utils/randomColor.js | 15 +++++
11 files changed, 138 insertions(+), 13 deletions(-)
diff --git a/components.d.ts b/components.d.ts
index c0ddc14..d14fc28 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,7 +7,11 @@
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
+ ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElButton: typeof import('element-plus/es')['ElButton']
+ ElCard: typeof import('element-plus/es')['ElCard']
+ ElCol: typeof import('element-plus/es')['ElCol']
+ ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
Header: typeof import('./src/components/Header/index.vue')['default']
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
diff --git a/dist-electron/background.js b/dist-electron/background.js
index 594cf04..aedb9c8 100644
--- a/dist-electron/background.js
+++ b/dist-electron/background.js
@@ -1,11 +1,14 @@
"use strict";
-const { app, BrowserWindow } = require("electron");
+const { app, BrowserWindow, screen } = require("electron");
const { join } = require("path");
process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";
const createWindow = () => {
+ const { width, height } = screen.getPrimaryDisplay().bounds;
const win = new BrowserWindow({
- width: 800,
- height: 600
+ width,
+ height,
+ minWidth: 1280,
+ minHeight: 720
});
if (process.env.VITE_DEV_SERVER_URL) {
win.loadURL(process.env.VITE_DEV_SERVER_URL);
diff --git a/src/App.vue b/src/App.vue
index ab49f3c..26b1552 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,9 +2,11 @@
</script>
<template>
- <div class="page-container w-screen h-screen">
+ <div class="page-container">
<RouterView />
</div>
</template>
-<style scoped></style>
+<style scoped>
+
+</style>
diff --git a/src/assets/icons/icon1.png b/src/assets/icons/icon1.png
new file mode 100644
index 0000000..87c8480
--- /dev/null
+++ b/src/assets/icons/icon1.png
Binary files differ
diff --git a/src/assets/icons/icon2.png b/src/assets/icons/icon2.png
new file mode 100644
index 0000000..9c800c6
--- /dev/null
+++ b/src/assets/icons/icon2.png
Binary files differ
diff --git a/src/background.js b/src/background.js
index 5d81b89..c7c4802 100644
--- a/src/background.js
+++ b/src/background.js
@@ -1,5 +1,5 @@
// src-electron/main.js
-const { app, BrowserWindow } = require('electron');
+const { app, BrowserWindow,screen } = require('electron');
const { join } = require('path');
// 灞忚斀瀹夊叏璀﹀憡
@@ -8,9 +8,12 @@
// 鍒涘缓娴忚鍣ㄧ獥鍙ｆ椂锛岃皟鐢ㄨ繖涓嚱鏁般��
const createWindow = () => {
+ const {width, height} = screen.getPrimaryDisplay().bounds;
const win = new BrowserWindow({
- width: 800,
- height: 600,
+ width: width,
+ height: height,
+ minWidth: 1280,
+ minHeight: 720,
});
// win.loadURL('http://localhost:3000')
diff --git a/src/layout/components/Header/index.vue b/src/layout/components/Header/index.vue
index b7082a9..a7351aa 100644
--- a/src/layout/components/Header/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -29,10 +29,10 @@
<script setup>
import { ref, watchEffect } from 'vue';
-import { useRoute,useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
const route = useRoute();
-console.log(route);
+
const menuList = ref([
{
name: '棣栭〉',
@@ -63,7 +63,7 @@
<style lang="scss" scoped>
.header-container {
- box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.5)
+ box-shadow: 0 1px 20px 0 rgb(0 0 0 / 0.1);
}
@media (min-width: 1836px) {
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 6811d3f..9e50aa0 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -5,6 +5,7 @@
<template>
<div class="page-container w-screen h-screen flex flex-col">
<Header></Header>
+
<div class="page-content w-screen grow relative">
<div class="page-wrapper bg-slate-50 absolute top-0 left-0 right-0 bottom-0 overflow-y-auto">
<el-scrollbar>
diff --git a/src/utils/randomColor.js b/src/utils/randomColor.js
new file mode 100644
index 0000000..59d7f05
--- /dev/null
+++ b/src/utils/randomColor.js
@@ -0,0 +1,15 @@
+
+const colorList = [
+ '#E74C3C',
+ '#8E44AD',
+ '#F39C12',
+ '#27AE60',
+ '#FFD1DC',
+ '#2471A3',
+ '#88D8B0',
+ '#154360',
+ '#F78F1E'
+];
+export default function randomColor() {
+ return colorList[Math.floor(Math.random() * colorList.length)];
+}
\ No newline at end of file
diff --git a/src/views/home/components/user-panel/index.vue b/src/views/home/components/user-panel/index.vue
new file mode 100644
index 0000000..22d1f13
--- /dev/null
+++ b/src/views/home/components/user-panel/index.vue
@@ -0,0 +1,92 @@
+<template>
+ <div class="user-panel sticky left-10 top-5 max-w-sm">
+ <el-card class="card">
+ <div class="panel-content flex flex-col items-center">
+ <div class="avatar-container w-40 h-40 rounded-full overflow-hidden">
+ <div class="avatar-content">
+ <img src="@/assets/image/avatar/avatar.png" class="avatar-img" alt="">
+ </div>
+ <!-- <div class="avatar-content" :style="{backgroundColor: getColor}">
+ <div class="name text-5xl font-bold text-white">寮�</div>
+ </div> -->
+ </div>
+
+ <div class="name-container text-lg font-bold mt-5 mb-2">
+ 娴嬭瘯娴嬭瘯
+ </div>
+
+ <div class="department-container text-base mb-10">
+ 娴嬭瘯娴嬭瘯
+ </div>
+
+ <div class="tool-container grid grid-cols-3 gap-10">
+ <div class="tool-item text-center cursor-pointer" v-for="item in toolList">
+ <div class="tool-icon mb-1">
+ <img :src="item.iconPath" class="width-img" alt="">
+ </div>
+ <div class="tool-title">
+ {{ item.title }}
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </el-card>
+ </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import randomColor from '@/utils/randomColor.js';
+
+const toolList = ref([
+ {
+ id: 1,
+ title: '璧勬簮鍏变韩',
+ iconPath: new URL('@/assets/icons/icon1.png', import.meta.url).href
+ },
+ {
+ id: 2,
+ title: '鎴戠殑璇剧▼',
+ iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href
+ },
+ {
+ id: 3,
+ title: '鎴戠殑璇剧▼',
+ iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href
+ },
+ {
+ id: 4,
+ title: '鎴戠殑璇剧▼',
+ iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href
+ },
+]);
+
+
+const getColor = computed(() => {
+ return randomColor();
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+
+.card {
+ border-radius: 30px;
+}
+
+.avatar-content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.avatar-img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a95cc65..a8cf7f0 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,10 +1,15 @@
<template>
-
+ <UserPanel></UserPanel>
+ <div class="test"></div>
</template>
<script setup>
+import UserPanel from './components/user-panel/index.vue';
+
</script>
<style lang="scss" scoped>
-
+.test {
+ height: 500px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0