Browse Source

change icon

master
godo 9 months ago
parent
commit
83ba8f951f
  1. 29
      frontend/public/font/demo_index.html
  2. 10
      frontend/public/font/iconfont.css
  3. 2
      frontend/public/font/iconfont.js
  4. 7
      frontend/public/font/iconfont.json
  5. BIN
      frontend/public/font/iconfont.ttf
  6. BIN
      frontend/public/font/iconfont.woff
  7. BIN
      frontend/public/font/iconfont.woff2
  8. 2
      frontend/src/components/chat/Chat.vue
  9. 27
      frontend/src/components/chat/ChatBox.vue
  10. 8
      frontend/src/components/chat/ChatMenu.vue
  11. 55
      frontend/src/components/chat/ChatUserSetting.vue
  12. 121
      frontend/src/components/localchat/ChatNav.vue
  13. 45
      frontend/src/components/localchat/LocalChat.vue
  14. 1
      frontend/src/i18n/lang/en.json
  15. 1
      frontend/src/i18n/lang/zh.json
  16. 3
      frontend/src/system/applist.ts
  17. 9
      frontend/src/system/initBuiltin.ts
  18. 13
      frontend/src/system/member.ts

29
frontend/public/font/demo_index.html

@ -54,6 +54,12 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#x100c2;</span>
<div class="name">workchat</div>
<div class="code-name">&amp;#x100c2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe625;</span>
<div class="name">progress</div>
@ -702,9 +708,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1722391811007') format('woff2'),
url('iconfont.woff?t=1722391811007') format('woff'),
url('iconfont.ttf?t=1722391811007') format('truetype');
src: url('iconfont.woff2?t=1726139300607') format('woff2'),
url('iconfont.woff?t=1726139300607') format('woff'),
url('iconfont.ttf?t=1726139300607') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
@ -730,6 +736,15 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-workchat"></span>
<div class="name">
workchat
</div>
<div class="code-name">.icon-workchat
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-progress"></span>
<div class="name">
@ -1702,6 +1717,14 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-workchat"></use>
</svg>
<div class="name">workchat</div>
<div class="code-name">#icon-workchat</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-progress"></use>

10
frontend/public/font/iconfont.css

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4412427 */
src: url('iconfont.woff2?t=1722391811007') format('woff2'),
url('iconfont.woff?t=1722391811007') format('woff'),
url('iconfont.ttf?t=1722391811007') format('truetype');
src: url('iconfont.woff2?t=1726139300607') format('woff2'),
url('iconfont.woff?t=1726139300607') format('woff'),
url('iconfont.ttf?t=1726139300607') format('truetype');
}
.iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-workchat:before {
content: "\100c2";
}
.icon-progress:before {
content: "\e625";
}

2
frontend/public/font/iconfont.js

File diff suppressed because one or more lines are too long

7
frontend/public/font/iconfont.json

@ -5,6 +5,13 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "41842645",
"name": "workchat",
"font_class": "workchat",
"unicode": "100c2",
"unicode_decimal": 65730
},
{
"icon_id": "39799840",
"name": "progress",

BIN
frontend/public/font/iconfont.ttf

Binary file not shown.

BIN
frontend/public/font/iconfont.woff

Binary file not shown.

BIN
frontend/public/font/iconfont.woff2

Binary file not shown.

2
frontend/src/components/chat/Chat.vue

@ -46,7 +46,7 @@ onMounted(() => {
}
.menu {
width: 65px;
width: 55px;
background-color: #2E2E2E;
overflow-y: hidden;
overflow-x: hidden;

27
frontend/src/components/chat/ChatBox.vue

@ -44,10 +44,11 @@ const store = useChatStore()
</el-footer>
</div>
<div class="no-message-container" v-else>
<el-icon :size="180" color="#0078d7">
<ChatDotRound />
</el-icon>
</div>
<el-icon :size="180" color="#0078d7">
<ScaleToOriginal />
</el-icon>
<p>暂无内容</p>
</div>
</template>
<style scoped>
.chatbox-main {
@ -82,11 +83,12 @@ header-title {
border-color: #D6D6D6;
border-style: solid;
}
.msg-footer {
width: 100%;
/* 占据整个宽度 */
height: 30%;
padding: 0;
width: 100%;
/* 占据整个宽度 */
height: 30%;
padding: 0;
}
.input-option {
@ -161,10 +163,11 @@ header-title {
transform: translateY(1px);
/* 微小下移,模拟按下 */
}
.no-message-container {
height: 100%;
margin: 120px auto;
text-align: center;
justify-content: center;
height: 100%;
margin: 120px auto;
text-align: center;
justify-content: center;
}
</style>

8
frontend/src/components/chat/ChatMenu.vue

@ -62,11 +62,5 @@ const store = useChatStore()
color: #07C160;
cursor: pointer;
}
/* 新增样式 */
.floating-button {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
</style>

55
frontend/src/components/chat/ChatUserSetting.vue

@ -1,23 +1,36 @@
<template>
<el-form :model="form" label-width="auto" style="padding: 30px;">
<el-form-item label="昵称">
<el-input v-model="form.nickname" />
</el-form-item>
<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({
<script setup>
import { ref } from "vue";
import { useChatStore } from "@/stores/chat";
const store = useChatStore()
const form = ref({
nickname: '',
})
const onSubmit = () => {
})
const onSubmit = () => {
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>

121
frontend/src/components/localchat/ChatNav.vue

@ -1,99 +1,54 @@
<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">
<el-icon size="18" @click="store.handleSelect(item.index)">
<component :is="item.icon" />
</el-icon>
</div>
</el-space>
</el-space> -->
</template>
<script setup lang="ts">
import { useLocalChatStore } from '@/stores/localchat';
const store = useLocalChatStore();
</script>
<style lang="scss" scoped>
.win11-chat-nav {
height: 100vh;
background-color: #f8f8f8; /* 使用更亮的淡灰色,更接近Win11的背景色 */
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;
<style scoped>
.userAvatar {
margin: 10px auto;
-webkit-app-region: no-drag
}
.win11-chat-nav .nav-item {
/* 假定每个按钮的基类 */
position: relative;
display: flex;
align-items: center;
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;
.menu-icon {
margin: 20px auto;
font-size: 25px;
color: #8F8F8F;
cursor: pointer;
}
/* 修复 active 和 hover 效果 */
&[class*="active"],
&:hover {
background-color: inherit;
box-shadow: inherit;
transform: inherit;
transition: inherit;
}
}
.menu-icon-on {
margin: 20px auto;
font-size: 25px;
color: #07C160;
cursor: pointer;
}
</style>
</style>

45
frontend/src/components/localchat/LocalChat.vue

@ -1,5 +1,16 @@
<template>
<el-row justify="space-between">
<el-container class="container">
<el-aside class="menu">
<chat-nav />
</el-aside>
<el-container class="side">
<chat-domain />
</el-container>
<el-container class="chat-box">
<chat-content />
</el-container>
</el-container>
<!-- <el-row justify="space-between">
<el-col :span="1">
<chat-nav />
</el-col>
@ -9,7 +20,7 @@
<el-col :span="17">
<chat-content />
</el-col>
</el-row>
</el-row> -->
</template>
<script setup lang="ts">
@ -28,6 +39,36 @@ onMounted(async () => {
</script>
<style lang="scss" scoped>
.container {
display: flex;
height: 100%;
width: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
.menu {
width: 55px;
background-color: #f2f2f2;
overflow-y: hidden;
overflow-x: hidden;
-webkit-app-region: drag;
}
.side {
flex: 1;
/* 占据剩余宽度 */
max-height: max-content;
border-right: 1px solid #edebeb;
overflow-y: hidden;
overflow-x: hidden;
background-color: #F7F7F7;
}
.chat-box {
flex: 3;
/* 占据剩余宽度的三倍 */
max-height: max-content;
background-color: #F5F5F5;
}
</style>

1
frontend/src/i18n/lang/en.json

@ -116,6 +116,7 @@
"Terminal": "Terminal",
"calendar": "Calendar",
"localchat": "LocalChat",
"workchat": "Working",
"text.document": "Text Document",
"language": "Language",
"style": "Style",

1
frontend/src/i18n/lang/zh.json

@ -117,6 +117,7 @@
"Terminal": "Terminal",
"calendar": "日历",
"localchat": "内网聊天",
"workchat": "工作台",
"text.document": "文本文档",
"language": "语言",
"style": "样式",

3
frontend/src/system/applist.ts

@ -189,8 +189,7 @@ export const appList = [
{
name: 'localchat',
appIcon: "chat",
//content: "LocalChat",
content:"Chat",
content: "LocalChat",
frame: true,
width: 800,
height: 600,

9
frontend/src/system/initBuiltin.ts

@ -7,9 +7,16 @@ import { basename } from "./core/Path";
import { Dialog } from "./window/Dialog";
import { Tray } from "./menu/Tary";
import { appList } from "./applist.ts";
import { getSystemConfig } from './config'
import { memberList } from "./member.ts";
const unknownIcon = "unknown";
export function initBuiltinApp(system: System) {
appList.forEach((d: any) => {
const config = getSystemConfig();
let sysList = appList;
if(config.userType == 'member') {
sysList = [...appList,...memberList]
}
sysList.forEach((d: any) => {
let addSave = {
name: d.name,

13
frontend/src/system/member.ts

@ -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…
Cancel
Save