kris/ForcePilot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

update style

Browse Source
This commit is contained in:
Wenjie Zhang 2024-07-26 14:13:05 +08:00
parent 0d67db6629
commit aa1e357a98
6 changed files with 21 additions and 4280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4260
web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
web/src/assets/base.css
View File

@ -38,8 +38,9 @@
--main-color: #005f77; --main-color: #005f77;
--main-color-dark: #004d5c; --main-color-dark: #004d5c;
--main-light-1: #007f96; --main-light-1: #007f96;
--main-light-2: #F2F6F7; --main-light-2: #D3EAED;
--main-light-3: #E2EEF3; --main-light-3: #EDF4F5;
--main-light-4: #F2F6F7;
--min-width: 400px; --min-width: 400px;
--min-header-width: 80px; --min-header-width: 80px;
--min-sider-width: 100px; --min-sider-width: 100px;

12
web/src/components/ChatComponent.vue
View File

@ -413,7 +413,7 @@ onMounted(() => {
} }
&:hover { &:hover {
background-color: #EDF4F5; background-color: var(--main-light-3);
} }
} }
@ -450,7 +450,7 @@ onMounted(() => {
transition: background-color 0.3s; transition: background-color 0.3s;
&:hover { &:hover {
background-color: #EAEAEA; background-color: var(--main-light-3);
} }
} }
} }
@ -482,9 +482,9 @@ onMounted(() => {
padding: 6px 1rem; padding: 6px 1rem;
border-radius: 1rem; border-radius: 1rem;
cursor: pointer; cursor: pointer;
// border: 2px solid var(--main-light-2); // border: 2px solid var(--main-light-4);
transition: background-color 0.3s; transition: background-color 0.3s;
box-shadow: 0px 0px 10px 4px var(--main-light-2); box-shadow: 0px 0px 10px 4px var(--main-light-4);
&:hover { &:hover {
@ -525,7 +525,7 @@ onMounted(() => {
.message-box.sent { .message-box.sent {
background-color: #efefef; background-color: #efefef;
line-height: 24px; line-height: 24px;
background: #EDF4F5; background: var(--main-light-3);
align-self: flex-end; align-self: flex-end;
} }
@ -646,7 +646,7 @@ button:disabled {
} }
.chat-container .chat .header { .chat-container .chat .header {
background: var(--main-light-2); background: var(--main-light-4);
.header__left, .header__right { .header__left, .header__right {
gap: 20px; gap: 20px;
} }

10
web/src/layouts/AppLayout.vue
View File

@ -88,10 +88,10 @@ div.header, #app-router-view {
flex: 0 0 80px; flex: 0 0 80px;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background-color: var(--main-light-2); background-color: var(--main-light-4);
height: 100%; height: 100%;
width: 80px; width: 80px;
border-right: 1px solid #e2eef3; border-right: 1px solid var(--main-light-2);
.logo { .logo {
width: 40px; width: 40px;
@ -150,11 +150,11 @@ div.header, #app-router-view {
&.active { &.active {
font-weight: bold; font-weight: bold;
color: var(--main-color); color: var(--main-color);
background-color: #e2eef3; background-color: var(--main-light-2);
} }
&:hover { &:hover {
background-color: #e2eef3; background-color: var(--main-light-2);
cursor: pointer; cursor: pointer;
} }
} }
@ -174,7 +174,7 @@ div.header, #app-router-view {
align-items: center; align-items: center;
flex: 0 0 60px; flex: 0 0 60px;
border-right: none; border-right: none;
border-top: 1px solid #e2eef3; border-top: 1px solid var(--main-light-2);
.logo { .logo {
display: none; display: none;

12
web/src/views/ChatView.vue
View File

@ -3,7 +3,7 @@
<div v-if="state.isSidebarOpen" class="conversations"> <div v-if="state.isSidebarOpen" class="conversations">
<div class="actions"> <div class="actions">
<!-- <div class="action new" @click="addNewConv"><FormOutlined /></div> --> <!-- <div class="action new" @click="addNewConv"><FormOutlined /></div> -->
<span>对话历史</span> <span style="font-weight: bold;">对话历史</span>
<div class="action close" @click="state.isSidebarOpen = false"><MenuOutlined /></div> <div class="action close" @click="state.isSidebarOpen = false"><MenuOutlined /></div>
</div> </div>
<div class="conversation" <div class="conversation"
@ -143,7 +143,7 @@ onMounted(() => {
width: 100px; width: 100px;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
border-right: 1px solid #EDF4F5; border-right: 1px solid var(--main-light-3);
min-width: var(--min-sider-width); min-width: var(--min-sider-width);
max-width: 200px; max-width: 200px;
background-color: #FAFCFD; background-color: #FAFCFD;
@ -171,7 +171,7 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #ECECEC; background-color: var(--main-light-3);
} }
} }
} }
@ -184,7 +184,6 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
user-select: none; user-select: none;
transition: border-left 0.1s;
&__title { &__title {
color: var(--c-black-light-3); color: var(--c-black-light-3);
@ -205,7 +204,8 @@ onMounted(() => {
&.active { &.active {
border-left: 3px solid var(--main-color); border-left: 3px solid var(--main-color);
background-color: #EDF4F5; padding-left: 13px;
background-color: var(--main-light-3);
& .conversation__title { & .conversation__title {
color: var(--c-black-light-1); color: var(--c-black-light-1);
@ -213,7 +213,7 @@ onMounted(() => {
} }
&:hover { &:hover {
background-color: #EDF4F5; background-color: var(--main-light-3);
& .conversation__delete { & .conversation__delete {
display: block; display: block;

2
web/src/views/SettingView.vue
View File

@ -150,7 +150,7 @@ const sendRestart = () => {
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border: 1px solid #E2EEF3; border: 1px solid var(--main-light-3);
} }
.card { .card {