xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-14 21:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add top navbar for front page

Browse Source
This commit is contained in:
RockYang
2024-05-16 20:10:00 +08:00
parent 44b3237dd6
commit b2771b7b3f
22 changed files with 836 additions and 633 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/assets/css/chat-app.styl
View File

@@ -1,6 +1,6 @@
.page-apps {
background-color: #282c34;
height 100vh
height 100%
.title {
text-align center

455
web/src/assets/css/chat-plus.css
View File

@@ -1,313 +1,378 @@
#app {
height: 100%;
height: 100%;
}
#app .common-layout {
height: 100%;
height: 100%;
}
#app .common-layout .el-aside {
background-color: #252526;
background-color: #252526;
}
#app .common-layout .el-aside .title-box {
padding: 6px 10px;
display: flex;
color: #fff;
font-size: 20px;
padding: 6px 10px;
display: flex;
color: #fff;
font-size: 20px;
}
#app .common-layout .el-aside .title-box span {
padding-top: 5px;
padding-left: 10px;
padding-top: 5px;
padding-left: 10px;
}
#app .common-layout .el-aside .chat-list {
display: flex;
flex-flow: column;
background-color: #28292a;
border-top: 1px solid #2f3032;
border-right: 1px solid #2f3032;
display: flex;
flex-flow: column;
background-color: #28292a;
border-top: 1px solid #2f3032;
border-right: 1px solid #2f3032;
}
#app .common-layout .el-aside .chat-list .search-box {
flex-wrap: wrap;
padding: 10px 15px;
flex-wrap: wrap;
padding: 10px 15px;
}
#app .common-layout .el-aside .chat-list .search-box .el-input__wrapper {
background-color: #363535;
box-shadow: none;
background-color: #363535;
box-shadow: none;
}
#app .common-layout .el-aside .chat-list ::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
width: 0;
height: 0;
background-color: transparent;
}
#app .common-layout .el-aside .chat-list .content {
width: 100%;
overflow-y: scroll;
width: 100%;
overflow-y: scroll;
}
#app .common-layout .el-aside .chat-list .content .chat-list-item {
display: flex;
width: 100%;
justify-content: flex-start;
padding: 8px 12px;
cursor: pointer;
display: flex;
width: 100%;
justify-content: flex-start;
padding: 8px 12px;
cursor: pointer;
}
#app .common-layout .el-aside .chat-list .content .chat-list-item:hover {
background-color: #343540;
background-color: #343540;
}
#app .common-layout .el-aside .chat-list .content .chat-list-item .avatar {
width: 28px;
height: 28px;
border-radius: 50%;
width: 28px;
height: 28px;
border-radius: 50%;
}
#app .common-layout .el-aside .chat-list .content .chat-list-item .chat-title-input {
font-size: 14px;
margin-top: 4px;
margin-left: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 190px;
font-size: 14px;
margin-top: 4px;
margin-left: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 190px;
}
#app .common-layout .el-aside .chat-list .content .chat-list-item .chat-title {
color: #c1c1c1;
padding: 5px 10px;
max-width: 220px;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #c1c1c1;
padding: 5px 10px;
max-width: 220px;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#app .common-layout .el-aside .chat-list .content .chat-list-item .btn {
display: none;
position: absolute;
right: 2px;
top: 16px;
color: #fff;
display: none;
position: absolute;
right: 2px;
top: 16px;
color: #fff;
}
#app .common-layout .el-aside .chat-list .content .chat-list-item .btn .el-icon {
margin-right: 8px;
margin-right: 8px;
}
#app .common-layout .el-aside .chat-list .content .chat-list-item.active {
background-color: #343540;
background-color: #343540;
}
#app .common-layout .el-aside .chat-list .content .chat-list-item.active .btn {
display: inline;
display: inline;
}
#app .common-layout .el-aside .tool-box {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 20px 10px 20px;
border-top: 1px solid #3c3c3c;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 20px 10px 20px;
border-top: 1px solid #3c3c3c;
}
#app .common-layout .el-aside .tool-box .user-info {
width: 100%;
padding-top: 10px;
width: 100%;
padding-top: 10px;
}
#app .common-layout .el-aside .tool-box .user-info .el-dropdown-link {
width: 100%;
cursor: pointer;
display: flex;
width: 100%;
cursor: pointer;
display: flex;
}
#app .common-layout .el-aside .tool-box .user-info .el-dropdown-link .el-image {
width: 20px;
height: 20px;
border-radius: 5px;
width: 20px;
height: 20px;
border-radius: 5px;
}
#app .common-layout .el-aside .tool-box .user-info .el-dropdown-link .username {
display: flex;
line-height: 22px;
width: 230px;
padding-left: 10px;
display: flex;
line-height: 22px;
width: 230px;
padding-left: 10px;
}
#app .common-layout .el-aside .tool-box .user-info .el-dropdown-link .el-icon {
color: #ccc;
line-height: 24px;
color: #ccc;
line-height: 24px;
}
#app .common-layout .el-main {
overflow: hidden;
--el-main-padding: 0;
margin: 0;
overflow: hidden;
--el-main-padding: 0;
margin: 0;
}
#app .common-layout .el-main .chat-head {
width: 100%;
height: 50px;
background-color: #28292a;
width: 100%;
height: 50px;
background-color: #28292a;
}
#app .common-layout .el-main .chat-head .chat-config {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding-top: 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding-top: 10px;
}
#app .common-layout .el-main .chat-head .chat-config .role-select-label {
color: #fff;
color: #fff;
}
#app .common-layout .el-main .chat-head .chat-config .el-select {
max-width: 150px;
margin-right: 10px;
max-width: 150px;
margin-right: 10px;
}
#app .common-layout .el-main .chat-head .chat-config .role-select {
max-width: 130px;
max-width: 130px;
}
#app .common-layout .el-main .chat-head .chat-config .el-button .el-icon {
margin-right: 5px;
margin-right: 5px;
}
#app .common-layout .el-main .chat-head .iconfont {
margin-right: 5px;
margin-right: 5px;
}
#app .common-layout .el-main .chat-head .is-circle {
margin-left: 5px;
margin-left: 5px;
}
#app .common-layout .el-main .chat-head .is-circle .iconfont {
margin-right: 0;
margin-right: 0;
}
#app .common-layout .el-main .right-box {
min-width: 0;
flex: 1;
background-color: #fff;
border-left: 1px solid #4f4f4f;
#app .common-layout .el-main .chat-box {
min-width: 0;
flex: 1;
background-color: #fff;
border-left: 1px solid #4f4f4f;
}
#app .common-layout .el-main .right-box #container {
overflow: hidden;
width: 100%;
#app .common-layout .el-main .chat-box #container {
overflow: hidden;
width: 100%;
}
#app .common-layout .el-main .right-box #container ::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
#app .common-layout .el-main .chat-box #container ::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
#app .common-layout .el-main .right-box #container .chat-box {
overflow-y: scroll;
--content-font-size: 16px;
--content-color: #c1c1c1;
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
padding: 0 0 50px 0;
#app .common-layout .el-main .chat-box #container .chat-box {
overflow-y: scroll;
--content-font-size: 16px;
--content-color: #c1c1c1;
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
padding: 0 0 50px 0;
}
#app .common-layout .el-main .right-box #container .chat-box .chat-line {
font-size: 14px;
display: flex;
align-items: flex-start;
#app .common-layout .el-main .chat-box #container .chat-box .chat-line {
font-size: 14px;
display: flex;
align-items: flex-start;
}
#app .common-layout .el-main .right-box #container .re-generate {
position: relative;
display: flex;
justify-content: center;
#app .common-layout .el-main .chat-box #container .re-generate {
position: relative;
display: flex;
justify-content: center;
}
#app .common-layout .el-main .right-box #container .re-generate .btn-box {
position: absolute;
bottom: 10px;
#app .common-layout .el-main .chat-box #container .re-generate .btn-box {
position: absolute;
bottom: 10px;
}
#app .common-layout .el-main .right-box #container .re-generate .btn-box .el-button .el-icon {
margin-right: 5px;
#app .common-layout .el-main .chat-box #container .re-generate .btn-box .el-button .el-icon {
margin-right: 5px;
}
#app .common-layout .el-main .right-box #container .input-box {
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
padding: 0 15px;
#app .common-layout .el-main .chat-box #container .input-box {
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
padding: 0 15px;
}
#app .common-layout .el-main .right-box #container .input-box .input-container {
width: 100%;
margin: 0;
border: none;
padding: 10px 0;
display: flex;
justify-content: center;
position: relative;
#app .common-layout .el-main .chat-box #container .input-box .input-container {
width: 100%;
margin: 0;
border: none;
padding: 10px 0;
display: flex;
justify-content: center;
position: relative;
}
#app .common-layout .el-main .right-box #container .input-box .input-container .el-textarea .el-textarea__inner::-webkit-scrollbar {
width: 0;
height: 0;
#app .common-layout .el-main .chat-box #container .input-box .input-container .el-textarea .el-textarea__inner::-webkit-scrollbar {
width: 0;
height: 0;
}
#app .common-layout .el-main .right-box #container .input-box .input-container .select-file {
position: absolute;
right: 48px;
top: 20px;
#app .common-layout .el-main .chat-box #container .input-box .input-container .select-file {
position: absolute;
right: 48px;
top: 20px;
}
#app .common-layout .el-main .right-box #container .input-box .input-container .send-btn {
position: absolute;
right: 12px;
top: 20px;
#app .common-layout .el-main .chat-box #container .input-box .input-container .send-btn {
position: absolute;
right: 12px;
top: 20px;
}
#app .common-layout .el-main .right-box #container .input-box .input-container .send-btn .el-button {
padding: 8px 5px;
border-radius: 6px;
background: #19c37d;
color: #fff;
font-size: 20px;
#app .common-layout .el-main .chat-box #container .input-box .input-container .send-btn .el-button {
padding: 8px 5px;
border-radius: 6px;
background: #19c37d;
color: #fff;
font-size: 20px;
}
#app .common-layout .el-main .right-box #container::-webkit-scrollbar {
width: 0;
height: 0;
#app .common-layout .el-main .chat-box #container::-webkit-scrollbar {
width: 0;
height: 0;
}
#app .el-message-box {
width: 90%;
max-width: 420px;
width: 90%;
max-width: 420px;
}
#app .el-message {
min-width: 100px;
max-width: 600px;
min-width: 100px;
max-width: 600px;
}
.el-select-dropdown__wrap .el-select-dropdown__item .role-option {
display: flex;
flex-flow: row;
margin-top: 8px;
display: flex;
flex-flow: row;
margin-top: 8px;
}
.el-select-dropdown__wrap .el-select-dropdown__item .role-option .el-image {
width: 20px;
height: 20px;
border-radius: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
}
.el-select-dropdown__wrap .el-select-dropdown__item .role-option span {
margin-left: 5px;
height: 20px;
line-height: 20px;
margin-left: 5px;
height: 20px;
line-height: 20px;
}
.account {
display: flex;
background-color: #90ffc2;
color: #000;
width: 100%;
border-radius: 10px;
padding: 10px;
display: flex;
background-color: #90ffc2;
color: #000;
width: 100%;
border-radius: 10px;
padding: 10px;
}
.account .vip-logo .el-image {
width: 40px;
height: 40px;
border-radius: 100%;
background-color: #fff;
width: 40px;
height: 40px;
border-radius: 100%;
background-color: #fff;
}
.account .vip-info {
padding: 0 10px 0 10px;
padding: 0 10px 0 10px;
}
.account .vip-info h4,
.account .vip-info p {
margin: 0;
margin: 0;
}
.account .vip-info h4 {
font-weight: bold;
font-size: 16px;
font-weight: bold;
font-size: 16px;
}
.account .vip-info p {
color: #333;
color: #333;
}
.account .pay-btn {
width: 100%;
display: flex;
justify-content: right;
align-items: center;
width: 100%;
display: flex;
justify-content: right;
align-items: center;
}
.el-overlay-dialog .el-dialog .el-dialog__body .notice {
padding: 0 20px 0 20px;
line-height: 1.8;
padding: 0 20px 0 20px;
line-height: 1.8;
}
.el-overlay-dialog .el-dialog .el-dialog__body .notice .el-text {
font-size: 16px;
font-size: 16px;
}
.dialog-service {
text-align: center;
text-align: center;
}
.dialog-service .el-image {
width: 360px;
width: 360px;
}

94
web/src/assets/css/chat-plus.styl
View File

@@ -10,35 +10,26 @@ $borderColor = #4676d0;
// left side
.el-aside {
background-color: $sideBgColor;
height 100vh
.title-box {
padding: 6px 10px;
display: flex;
color: #ffffff;
font-size: 20px;
span {
padding-top: 5px;
padding-left: 10px;
}
}
//background-color: $sideBgColor;
padding 10px
width var(--el-aside-width, 320px)
.chat-list {
display: flex
flex-flow: column
background-color: #28292A
border-top: 1px solid #2F3032
border-right: 1px solid #2F3032
//background-color: $sideBgColor
border-radius 10px
padding 10px 0
.search-box {
flex-wrap: wrap
padding: 10px 15px;
//background-color #343540
padding: 10px 0;
.el-input__wrapper {
background-color: #363535;
.search-input {
--el-input-bg-color: #363535
--el-input-border-color: #464545
--el-input-focus-border-color: #47fff1
--el-input-hover-border-color: #2DA39A
box-shadow: none
}
}
@@ -52,9 +43,6 @@ $borderColor = #4676d0;
}
.content {
//display flex
//flex-wrap: wrap;
//flex-direction column
width: 100%
overflow-y: scroll
@@ -65,14 +53,17 @@ $borderColor = #4676d0;
padding: 8px 12px
//border-bottom: 1px solid #3c3c3c
cursor: pointer
border: 1px solid #3c3c3c
margin-bottom 6px
border-radius 5px
&:hover {
background-color #343540
}
.avatar {
width: 28px;
height: 28px;
width: 32px;
height: 32px;
border-radius: 50%;
}
@@ -96,13 +87,17 @@ $borderColor = #4676d0;
text-overflow: ellipsis;
}
.btn {
display none
.chat-opt {
position: absolute;
right: 2px;
top: 16px;
color #ffffff
.el-dropdown-link {
color #ffffff
}
.el-icon {
margin-right 8px;
}
@@ -111,10 +106,7 @@ $borderColor = #4676d0;
.chat-list-item.active {
background-color: #343540;
.btn {
display inline
}
border-color #21aa93
}
}
}
@@ -126,37 +118,6 @@ $borderColor = #4676d0;
align-items: center;
padding 0 20px 10px 20px;
border-top 1px solid #3c3c3c;
.user-info {
width 100%
padding-top 10px;
.el-dropdown-link {
width 100%;
cursor: pointer
display flex
.el-image {
width: 20px;
height: 20px;
border-radius: 5px;
}
.username {
display flex
line-height 22px;
width 230px;
padding-left 10px;
}
.el-icon {
color: #cccccc;
line-height 24px;
}
}
}
}
}
@@ -210,11 +171,12 @@ $borderColor = #4676d0;
}
}
.right-box {
.chat-box {
min-width: 0;
flex: 1;
background-color: #ffffff
border-left: 1px solid #4f4f4f
background-color: var(--el-bg-color)
color var(--el-text-color-primary)
#container {
overflow: hidden;

156
web/src/assets/css/home.styl Normal file
View File

@@ -0,0 +1,156 @@
.home {
display: flex;
height 100vh
width 100%
flex-flow column
.header {
display flex
justify-content space-between
height 50px
line-height 50px
background-color #1E1F22
padding-right 20px
.banner {
display flex
.logo {
display flex
padding 5px
cursor pointer
.el-image {
width 40px
height 40px
}
}
.title {
display: flex;
color: #ffffff;
font-size: 20px;
padding 0 10px
}
}
.navbar {
.user-info {
width 100%
padding 5px 0;
.el-dropdown-link {
width 100%;
cursor: pointer
display flex
.el-image {
width: 36px;
height: 36px;
border-radius: 50%
}
.el-icon {
color: #cccccc;
line-height 24px;
}
}
}
}
}
.main {
width 100%
display flex
flex-flow row
.navigator {
display flex
flex-flow column
width 50px
padding 10px 1px
border-right: 1px solid #3c3c3c
background-color: #1E1F22
.nav-items {
margin-top: 10px;
padding 0 5px
li {
margin-bottom 15px
a {
color #DADBDC
border-radius 10px
width 40px
height 40px
display flex
justify-content center
align-items center
cursor pointer
background-color #414348
.el-image {
border-radius 10px
}
.iconfont {
font-size 20px
}
}
a:hover, a.active {
color #47fff1
background-color #0F7A71
}
.title {
font-size: 12px
padding-top: 5px
color: #e5e7eb;
text-align: center;
}
.active {
color #47fff1
}
}
}
}
.content {
width: 100%
box-sizing: border-box
background-color #282c34
}
}
}
.el-popper {
.more-menus {
li {
padding 10px 15px
cursor pointer
border-radius 5px
margin 5px 0
.el-image {
position: relative
top 5px
right 5px
}
&:hover {
background-color #f1f1f1
}
}
li.active {
background-color #f1f1f1
}
}
}

4
web/src/assets/css/image-mj.styl
View File

@@ -1,6 +1,6 @@
.page-mj {
background-color: #282c34;
height 100vh
height 100%
.inner {
display: flex;
@@ -235,7 +235,7 @@
.task-list-box {
width 100%
padding 10px
padding 0 10px 10px 10px
color #ffffff
overflow-x hidden

6
web/src/assets/css/image-sd.styl
View File

@@ -10,10 +10,12 @@
border 1px solid #454545
min-width 300px
max-width 300px
padding 10px
padding 10px 10px 20px 10px
border-radius 10px
color #ffffff;
font-size 14px
height 100%
overflow auto
h2 {
font-weight: bold;
@@ -83,7 +85,7 @@
.task-list-box {
width 100%
padding 10px
padding 0 10px 10px 10px
color #ffffff
overflow-x hidden

17
web/src/assets/css/mark-map.styl
View File

@@ -1,6 +1,6 @@
.page-mark-map {
background-color: #282c34;
height 100vh
height 100%
.inner {
display: flex;
@@ -24,6 +24,7 @@
}
// 隐藏滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
@@ -64,21 +65,15 @@
}
}
.right-box {
.chat-box {
width 100%
.top-bar {
display flex
justify-content space-between
justify-content right
align-items center
h2 {
color #ffffff
}
.el-button {
margin-right 20px
}
padding 10px 20px 10px 10px
}
.markdown {

2
web/src/assets/css/member.styl
View File

@@ -1,6 +1,6 @@
.member {
background-color: #282c34;
height 100vh
height 100%
.el-dialog {
.el-dialog__body {