mirror of https://gitee.com/godoos/godoos.git
18 changed files with 197 additions and 136 deletions
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,23 +1,36 @@ |
|||||
<template> |
<script setup> |
||||
<el-form :model="form" label-width="auto" style="padding: 30px;"> |
import { ref } from "vue"; |
||||
<el-form-item label="昵称"> |
import { useChatStore } from "@/stores/chat"; |
||||
<el-input v-model="form.nickname" /> |
const store = useChatStore() |
||||
</el-form-item> |
const form = ref({ |
||||
<el-form-item> |
|
||||
<el-button type="primary" @click="onSubmit">保存</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup> |
|
||||
import { reactive } from 'vue' |
|
||||
|
|
||||
// do not use same name with ref |
|
||||
const form = reactive({ |
|
||||
nickname: '', |
nickname: '', |
||||
}) |
}) |
||||
|
|
||||
const onSubmit = () => { |
const onSubmit = () => { |
||||
console.log('submit!') |
console.log('submit!') |
||||
} |
} |
||||
</script> |
|
||||
|
</script> |
||||
|
<template> |
||||
|
<el-form :model="form" label-width="160px" style="padding: 30px;"> |
||||
|
|
||||
|
<el-form-item label="头像"> |
||||
|
<el-avatar shape="square" :size="80" :src="store.userInfo.avatar"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="昵称"> |
||||
|
<el-input v-model="store.userInfo.nickname" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="手机号"> |
||||
|
<el-input v-model="store.userInfo.phone" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="工号"> |
||||
|
<el-input v-model="store.userInfo.job_number" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="自我介绍"> |
||||
|
<el-input v-model="store.userInfo.desc" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="onSubmit">保存</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
@ -1,99 +1,54 @@ |
|||||
<template> |
<template> |
||||
<el-space direction="vertical" :size="20" class="win11-chat-nav"> |
<el-row> |
||||
|
<el-avatar shape="square" :size="40" class="userAvatar" src="/logo.png"/> |
||||
|
</el-row> |
||||
|
<el-row @click="store.handleSelect(1)"> |
||||
|
<el-icon v-if="store.navId === 1" class="menu-icon-on"> |
||||
|
<ChatLineRound /> |
||||
|
</el-icon> |
||||
|
<el-icon v-else class="menu-icon"> |
||||
|
<ChatRound /> |
||||
|
</el-icon> |
||||
|
</el-row> |
||||
|
<el-row @click="store.handleSelect(2)"> |
||||
|
<el-icon v-if="store.navId === 2" class="menu-icon-on"> |
||||
|
<UserFilled /> |
||||
|
</el-icon> |
||||
|
<el-icon v-else class="menu-icon"> |
||||
|
<User /> |
||||
|
</el-icon> |
||||
|
</el-row> |
||||
|
<!-- <el-space direction="vertical" :size="20" class="win11-chat-nav"> |
||||
<div :class="store.navId === item.index ? 'nav-item active' : 'nav-item'" v-for="item in store.navList" :key="item.index"> |
<div :class="store.navId === item.index ? 'nav-item active' : 'nav-item'" v-for="item in store.navList" :key="item.index"> |
||||
<el-icon size="18" @click="store.handleSelect(item.index)"> |
<el-icon size="18" @click="store.handleSelect(item.index)"> |
||||
<component :is="item.icon" /> |
<component :is="item.icon" /> |
||||
</el-icon> |
</el-icon> |
||||
</div> |
</div> |
||||
</el-space> |
</el-space> --> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { useLocalChatStore } from '@/stores/localchat'; |
import { useLocalChatStore } from '@/stores/localchat'; |
||||
const store = useLocalChatStore(); |
const store = useLocalChatStore(); |
||||
</script> |
</script> |
||||
<style lang="scss" scoped> |
<style scoped> |
||||
.win11-chat-nav { |
.userAvatar { |
||||
height: 100vh; |
margin: 10px auto; |
||||
background-color: #f8f8f8; /* 使用更亮的淡灰色,更接近Win11的背景色 */ |
-webkit-app-region: no-drag |
||||
border-right: 1px solid rgba(230, 230, 230, 0.5); /* 更浅的边框颜色 */ |
|
||||
padding: 8px; |
|
||||
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1); |
|
||||
overflow-y: auto; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
|
|
||||
/* 添加全局字体样式以匹配Win11 */ |
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; |
|
||||
} |
} |
||||
|
|
||||
.win11-chat-nav .nav-item { |
.menu-icon { |
||||
/* 假定每个按钮的基类 */ |
margin: 20px auto; |
||||
position: relative; |
font-size: 25px; |
||||
display: flex; |
color: #8F8F8F; |
||||
align-items: center; |
cursor: pointer; |
||||
justify-content: center; |
} |
||||
width: 100%; |
|
||||
padding: 2px; |
|
||||
border-radius: 50%; /* 圆角 */ |
|
||||
background-color: #f8f7f7; /* 更柔和的背景色 */ |
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 更轻的阴影 */ |
|
||||
transition: all 0.2s ease-in-out; |
|
||||
|
|
||||
/* 修复 active 类的优先级问题 */ |
|
||||
&.active { |
|
||||
/* 加强背景色对比,使用Win11的强调色或品牌色 */ |
|
||||
background-color: #0078d4; /* 深蓝色,Win11 的强调色 */ |
|
||||
color: white; /* 文字颜色反转,确保可读性 */ |
|
||||
|
|
||||
/* 增加外边框以进一步区分 */ |
|
||||
border: 1px solid #005a9c; /* 较深的强调色作为边框 */ |
|
||||
border-radius: 50%; |
|
||||
/* 内发光效果,让按钮看起来更‘活跃’ */ |
|
||||
box-shadow: 0 5px 8px rgba(0, 120, 212, 0.5) inset; |
|
||||
|
|
||||
/* 微动效,当状态改变时给予用户反馈 */ |
|
||||
transform: scale(1.02); |
|
||||
transition: transform 0.2s cubic-bezier(0.2, 0.4, 0.6, 1); |
|
||||
|
|
||||
/* 确保文字在按下时不会因按钮尺寸变化而偏移 */ |
|
||||
transition-property: background-color, box-shadow, transform, color; |
|
||||
} |
|
||||
|
|
||||
/* 修复 hover 效果 */ |
|
||||
&:hover { |
|
||||
background-color: #eaeaea; /* 鼠标悬停时的轻微颜色变化 */ |
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
|
||||
} |
|
||||
|
|
||||
/* 非活动状态的悬停效果,保持与.active状态的区分 */ |
|
||||
.nav-item:hover:not(.active) { |
|
||||
/* 调整以与.active状态区分,例如使用较浅的颜色 */ |
|
||||
background-color: #eaeaea; |
|
||||
} |
|
||||
|
|
||||
/* 修复 el-icon 默认样式的覆盖问题 */ |
|
||||
.el-icon { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
padding: 0; |
|
||||
border-radius: inherit; |
|
||||
background-color: inherit; |
|
||||
box-shadow: inherit; |
|
||||
transition: inherit; |
|
||||
cursor: pointer; |
|
||||
|
|
||||
/* 修复 active 和 hover 效果 */ |
.menu-icon-on { |
||||
&[class*="active"], |
margin: 20px auto; |
||||
&:hover { |
font-size: 25px; |
||||
background-color: inherit; |
color: #07C160; |
||||
box-shadow: inherit; |
cursor: pointer; |
||||
transform: inherit; |
|
||||
transition: inherit; |
|
||||
} |
|
||||
} |
|
||||
} |
} |
||||
</style> |
|
||||
|
</style> |
||||
|
@ -0,0 +1,13 @@ |
|||||
|
export const memberList = [ |
||||
|
{ |
||||
|
name: 'workchat', |
||||
|
appIcon: "chat", |
||||
|
content:"Chat", |
||||
|
frame: true, |
||||
|
width: 800, |
||||
|
height: 600, |
||||
|
center: true, |
||||
|
resizable: true, |
||||
|
isDeskTop: true, |
||||
|
}, |
||||
|
]; |
Loading…
Reference in new issue