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

10
frontend/public/font/iconfont.css

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 4412427 */ font-family: "iconfont"; /* Project id 4412427 */
src: url('iconfont.woff2?t=1722391811007') format('woff2'), src: url('iconfont.woff2?t=1726139300607') format('woff2'),
url('iconfont.woff?t=1722391811007') format('woff'), url('iconfont.woff?t=1726139300607') format('woff'),
url('iconfont.ttf?t=1722391811007') format('truetype'); url('iconfont.ttf?t=1726139300607') format('truetype');
} }
.iconfont { .iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-workchat:before {
content: "\100c2";
}
.icon-progress:before { .icon-progress:before {
content: "\e625"; 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-", "css_prefix_text": "icon-",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "41842645",
"name": "workchat",
"font_class": "workchat",
"unicode": "100c2",
"unicode_decimal": 65730
},
{ {
"icon_id": "39799840", "icon_id": "39799840",
"name": "progress", "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 { .menu {
width: 65px; width: 55px;
background-color: #2E2E2E; background-color: #2E2E2E;
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden; overflow-x: hidden;

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

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

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

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

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

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

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

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

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

@ -1,5 +1,16 @@
<template> <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"> <el-col :span="1">
<chat-nav /> <chat-nav />
</el-col> </el-col>
@ -9,7 +20,7 @@
<el-col :span="17"> <el-col :span="17">
<chat-content /> <chat-content />
</el-col> </el-col>
</el-row> </el-row> -->
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -28,6 +39,36 @@ onMounted(async () => {
</script> </script>
<style lang="scss" scoped> <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> </style>

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

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

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

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

3
frontend/src/system/applist.ts

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

9
frontend/src/system/initBuiltin.ts

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