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-dark: #004d5c;
--main-light-1: #007f96;
--main-light-2: #F2F6F7;
--main-light-3: #E2EEF3;
--main-light-2: #D3EAED;
--main-light-3: #EDF4F5;
--main-light-4: #F2F6F7;
--min-width: 400px;
--min-header-width: 80px;
--min-sider-width: 100px;

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

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

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

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

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

@ -3,7 +3,7 @@
<div v-if="state.isSidebarOpen" class="conversations">
<div class="actions">
<!-- <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>
<div class="conversation"
@ -143,7 +143,7 @@ onMounted(() => {
width: 100px;
height: 100%;
overflow-y: auto;
border-right: 1px solid #EDF4F5;
border-right: 1px solid var(--main-light-3);
min-width: var(--min-sider-width);
max-width: 200px;
background-color: #FAFCFD;
@ -171,7 +171,7 @@ onMounted(() => {
cursor: pointer;
&:hover {
background-color: #ECECEC;
background-color: var(--main-light-3);
}
}
}
@ -184,7 +184,6 @@ onMounted(() => {
cursor: pointer;
width: 100%;
user-select: none;
transition: border-left 0.1s;
&__title {
color: var(--c-black-light-3);
@ -205,7 +204,8 @@ onMounted(() => {
&.active {
border-left: 3px solid var(--main-color);
background-color: #EDF4F5;
padding-left: 13px;
background-color: var(--main-light-3);
& .conversation__title {
color: var(--c-black-light-1);
@ -213,7 +213,7 @@ onMounted(() => {
}
&:hover {
background-color: #EDF4F5;
background-color: var(--main-light-3);
& .conversation__delete {
display: block;

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

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