feat:用户信息面板

ZhangXianQiang

2024-06-03 5eebeba2a160192d48344ab587e90faaf6135dd8

feat:用户信息面板

 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']

 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);

 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>

 src/assets/icons/icon1.png

 src/assets/icons/icon2.png

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

 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) {

 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>

 src/utils/randomColor.js

New file
@@ -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)];
}

 src/views/home/components/user-panel/index.vue

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

 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>