细节处修改

This commit is contained in:
lqins 2024-12-22 12:37:32 +08:00
parent 0c1f650e9c
commit ab903e3cc1
14 changed files with 111 additions and 65 deletions

View File

@ -8,6 +8,9 @@
::v-deep (.el-message-box__message){ ::v-deep (.el-message-box__message){
font-size: 18px !important font-size: 18px !important
} }
.newChat{
margin-bottom: 10px
}
// left side // left side
.el-container{ .el-container{
height: 100%; height: 100%;
@ -115,7 +118,7 @@
background-color :var(--theme-bg); background-color :var(--theme-bg);
box-shadow: 0px 3px 9px rgba(112,144,176,0.12); box-shadow: 0px 3px 9px rgba(112,144,176,0.12);
border: 1px solid var(--border-active); border: 1px solid var(--shadow-color);
} }
} }
} }
@ -219,6 +222,8 @@
.chat-box { .chat-box {
overflow-y: auto; overflow-y: auto;
//border-bottom: 1px solid #4f4f4f //border-bottom: 1px solid #4f4f4f
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IEEdge */
// //
--content-font-size: 16px; --content-font-size: 16px;
@ -234,6 +239,9 @@
} }
::-webkit-scrollbar {
display: none; /* Webkit */
}
} }
.input-box { .input-box {

View File

@ -23,7 +23,8 @@
--el-input-focus-border-color: #b0a0f8; --el-input-focus-border-color: #b0a0f8;
--little-btn-bg:#e9d3f6; --little-btn-bg:#e9d3f6;
--gray-btn-bg:#ededf591; --gray-btn-bg:#ededf591;
--a-link-color: #3561ff // --a-link-color: #3561ff
--a-link-color: #6e8eff
--shadow-color:rgba(223,71,255,0.6) --shadow-color:rgba(223,71,255,0.6)
--sm-btn-bg:#6052ed; --sm-btn-bg:#6052ed;
--theme-text-tertiary: #595959; --theme-text-tertiary: #595959;

View File

@ -23,4 +23,15 @@
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: #666666; background-color: #666666;
} }
overflow: auto; /* */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IEEdge */
::-webkit-scrollbar {
display: none; /* Webkit */
}
&.showScrollbar {
::-webkit-scrollbar {
display: none; /* Webkit */
}
}
} }

View File

@ -379,7 +379,7 @@
display block display block
cursor pointer cursor pointer
background-color #4E5058 background-color #4E5058
color var(--text-theme-color) color #fff
&:hover { &:hover {
background-color #6D6F78 background-color #6D6F78

View File

@ -259,7 +259,7 @@
background none background none
padding 6px padding 6px
transition background 0.6s ease 0s transition background 0.6s ease 0s
color #726E6C color #919191
&:hover { &:hover {
// background #5f5958 // background #5f5958

View File

@ -164,6 +164,8 @@
&:hover { &:hover {
// box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* */ // box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* */
transform: translateY(-10px); /* 10 */ transform: translateY(-10px); /* 10 */
box-shadow: 0 0 10px var(--shadow-color);
background-color: #30323c;
} }
} }
} }

View File

@ -1,6 +1,6 @@
.el-overlay-dialog { .el-overlay-dialog {
.el-dialog { .el-dialog {
background-color #1a1b1e // background-color #1a1b1e
.el-dialog__header { .el-dialog__header {
.el-dialog__title { .el-dialog__title {
@ -33,14 +33,15 @@
} }
.task-info { .task-info {
background-color #25262b // background-color #25262b
padding 1rem 1.5rem padding 1rem 1.5rem
.info-line { .info-line {
width 100% width 100%
.prompt { .prompt {
background-color #35363b // background-color #35363b
padding 10px padding 10px
color #999999 color #999999
overflow auto overflow auto
@ -64,16 +65,16 @@
label { label {
display flex display flex
width 100px width 100px
color #a5a5a5 color :var(--el-text-color-primary)
} }
.item-value { .item-value {
display flex display flex
width 100% width 100%
background-color #35363b // background-color #35363b
padding 2px 5px padding 2px 5px
border-radius 5px border-radius 5px
color #F5F5F5 color: var(--text-theme-color);
} }
} }

View File

@ -3,6 +3,13 @@
height 100% height 100%
// background-color #0E0808 // background-color #0E0808
overflow auto overflow auto
.item-group{
scrollbar-width: auto !important; /* Firefox */
-ms-overflow-style: auto !important; /* IEEdge */
::-webkit-scrollbar {
display: block !important;
}
}
.left-bar { .left-bar {
max-width 340px max-width 340px
@ -147,8 +154,14 @@
position relative position relative
overflow-x auto overflow-x auto
overflow-y hidden overflow-y hidden
scrollbar-width: auto !important; /* Firefox */
-ms-overflow-style: auto !important; /* IEEdge */
width 100% width 100%
::-webkit-scrollbar {
display: block !important;
}
.inner { .inner {
display flex display flex
flex-flow row flex-flow row
@ -256,7 +269,7 @@
font-weight 700 font-weight 700
a { a {
color vae( --a-link-color) color var( --a-link-color)
&:hover { &:hover {
text-decoration underline text-decoration underline
} }
@ -309,7 +322,7 @@
background none background none
padding 6px padding 6px
transition background 0.6s ease 0s transition background 0.6s ease 0s
color #726E6C color #919191
&:hover { &:hover {
// background #5f5958 // background #5f5958

View File

@ -21,7 +21,8 @@
--btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce); --btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
--border-active:rgba(255, 255, 255, 0.1); --border-active:rgba(255, 255, 255, 0.1);
// --card-bg: rgba(17, 28, 68, 1); // --card-bg: rgba(17, 28, 68, 1);
--card-bg: #1f243f; // --card-bg: #1f243f;
--card-bg:#252d58;
--card-bg-table: rgba(17, 28, 68, 1); --card-bg-table: rgba(17, 28, 68, 1);
--theme-bg:rgb(13, 20, 53); --theme-bg:rgb(13, 20, 53);
--theme-bg-all:rgb(13, 20, 53); --theme-bg-all:rgb(13, 20, 53);
@ -34,7 +35,8 @@
--el-bg-color-overlay: rgba(17, 28, 68, 1); --el-bg-color-overlay: rgba(17, 28, 68, 1);
--el-border-color-light: rgba(255, 255, 255, 0.2); --el-border-color-light: rgba(255, 255, 255, 0.2);
--line-box:rgba(255, 255, 255, 0.1); --line-box:rgba(255, 255, 255, 0.1);
--chat-bg:#141a36; // --chat-bg:#141a36;
--chat-bg:#1f243f
--el-bg-color:#141a36; --el-bg-color:#141a36;
--el-fill-color-blank: rgba(17, 28, 68, 1); --el-fill-color-blank: rgba(17, 28, 68, 1);
--el-fill-color-light: rgba(86, 86, 95, .2); --el-fill-color-light: rgba(86, 86, 95, .2);

View File

@ -432,10 +432,12 @@ const reGenerate = (prompt) => {
line-height 1.5 line-height 1.5
code { code {
color:var(--theme-text-color-primary); color:#fff;
background-color var( --little-btn-bg) background-color var( --el-color-primary)
padding 0 3px; padding 0 3px;
border-radius 5px; border-radius 5px;
font-size: 16px;
padding: 5px 7px;
} }
} }
@ -539,7 +541,7 @@ const reGenerate = (prompt) => {
} }
.bar-item.bg { .bar-item.bg {
background-color var( --gray-btn-bg) // background-color var( --gray-btn-bg)
cursor pointer cursor pointer
} }

View File

@ -41,7 +41,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-row> </el-row>
<el-empty :image-size="100" v-else /> <el-empty :image-size="100" v-else :image="nodata" description="暂无数据" />
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination
v-if="total > 0" v-if="total > 0"
@ -59,6 +59,8 @@
</template> </template>
<script setup> <script setup>
import nodata from "@/assets/img/no-data.png";
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import { httpGet } from "@/utils/http"; import { httpGet } from "@/utils/http";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";

View File

@ -1,29 +1,25 @@
<template> <template>
<div class="black-dialog"> <div class="black-dialog">
<el-dialog <el-dialog
v-model="showDialog" v-model="showDialog"
style="--el-dialog-bg-color:#414141; :title="title"
--el-text-color-primary:#f1f1f1; :width="width"
--el-border-color:#414141; :before-close="cancel"
--el-color-primary:#21aa93;
--el-color-primary-dark-2:#41555d;
--el-color-white: #e1e1e1;
--el-color-primary-light-3:#549688;
--el-fill-color-blank:#616161;
--el-color-primary-light-7:#717171;
--el-color-primary-light-9:#717171;
--el-text-color-regular:#e1e1e1"
:title="title"
:width="width"
:before-close="cancel"
> >
<div class="dialog-body"> <div class="dialog-body">
<slot></slot> <slot></slot>
</div> </div>
<template #footer v-if="!hideFooter"> <template #footer v-if="!hideFooter">
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="cancel">{{cancelText}}</el-button> <el-button @click="cancel" style="--el-border-radius-base: 8px">{{
<el-button type="primary" @click="$emit('confirm')" v-if="!hideConfirm">{{confirmText}}</el-button> cancelText
}}</el-button>
<el-button
type="primary"
@click="$emit('confirm')"
v-if="!hideConfirm"
>{{ confirmText }}</el-button
>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
@ -31,45 +27,47 @@
</template> </template>
<script setup> <script setup>
import { ref, watch } from "vue";
import {ref, watch} from "vue";
const props = defineProps({ const props = defineProps({
show : Boolean, show: Boolean,
title: { title: {
type: String, type: String,
default: 'Tips', default: "Tips"
}, },
width: { width: {
type: String, type: String,
default: 'auto', default: "auto"
}, },
hideFooter:{ hideFooter: {
type: Boolean, type: Boolean,
default: false default: false
}, },
hideConfirm:{ hideConfirm: {
type: Boolean, type: Boolean,
default: false default: false
}, },
confirmText: { confirmText: {
type: String, type: String,
default: '确定', default: "确定"
}, },
cancelText: { cancelText: {
type: String, type: String,
default: '取消', default: "取消"
}, }
}); });
const emits = defineEmits(['confirm','cancal']); const emits = defineEmits(["confirm", "cancal"]);
const showDialog = ref(props.show) const showDialog = ref(props.show);
watch(() => props.show, (newValue) => { watch(
showDialog.value = newValue () => props.show,
}) (newValue) => {
showDialog.value = newValue;
}
);
const cancel = () => { const cancel = () => {
showDialog.value = false showDialog.value = false;
emits('cancal') emits("cancal");
} };
</script> </script>
<style lang="stylus"> <style lang="stylus">
@ -110,5 +108,4 @@ const cancel = () => {
} }
} }
} }
</style> </style>

View File

@ -3,12 +3,12 @@
<el-container> <el-container>
<el-aside> <el-aside>
<div class="media-page"> <div class="media-page">
<!-- <el-button @click="_newChat" color="#21aa93"> <el-button @click="_newChat" type="primary" class="newChat">
<el-icon style="margin-right: 5px"> <el-icon style="margin-right: 5px">
<Plus/> <Plus />
</el-icon> </el-icon>
新建对话 新建对话
</el-button> --> </el-button>
<div class="search-box"> <div class="search-box">
<el-input <el-input
@ -248,7 +248,7 @@
</textarea> </textarea>
</div> </div>
<div class="flex-between"> <div class="flex-between">
<div @click="_newChat" class="flex-center add-new"> <!-- <div @click="_newChat" class="flex-center add-new">
<el-tooltip <el-tooltip
class="box-item" class="box-item"
effect="dark" effect="dark"
@ -256,7 +256,7 @@
> >
<el-icon><CirclePlusFilled /></el-icon> <el-icon><CirclePlusFilled /></el-icon>
</el-tooltip> </el-tooltip>
</div> </div> -->
<div class="flex little-btns"> <div class="flex little-btns">
<span class="send-btn tool-item-btn"> <span class="send-btn tool-item-btn">
<!-- showStopGenerate --> <!-- showStopGenerate -->
@ -688,7 +688,7 @@ const resizeElement = function () {
// leftBoxHeight.value = window.innerHeight - 90 - 45 - 82; // leftBoxHeight.value = window.innerHeight - 90 - 45 - 82;
// leftBoxHeight.value = window.innerHeight - 90 - 82; // leftBoxHeight.value = window.innerHeight - 90 - 82;
leftBoxHeight.value = window.innerHeight - 90 - 50; leftBoxHeight.value = window.innerHeight - 90 - 100;
}; };
const _newChat = () => { const _newChat = () => {

View File

@ -181,7 +181,7 @@
</div> </div>
</div> </div>
<!-- :style="{ 'padding-left': isCollapse ? '65px' : '170px' }" --> <!-- :style="{ 'padding-left': isCollapse ? '65px' : '170px' }" -->
<div class="right-main"> <el-scrollbar class="right-main">
<div <div
v-if="loginUser.id === undefined || !loginUser.id" v-if="loginUser.id === undefined || !loginUser.id"
class="loginMask" class="loginMask"
@ -205,7 +205,7 @@
</router-view> </router-view>
</div> </div>
<!-- </div> --> <!-- </div> -->
</div> </el-scrollbar>
<config-dialog <config-dialog
v-if="loginUser.id" v-if="loginUser.id"
:show="showConfigDialog" :show="showConfigDialog"
@ -309,13 +309,20 @@ const changeNav = (item) => {
curPath.value = item.url; curPath.value = item.url;
if (item.url.indexOf("http") !== -1) { if (item.url.indexOf("http") !== -1) {
// //
router.push({ name: "ExternalLink", query: { url: item.url } }); window.open(item.url, "_blank");
} else { } else {
router.push(item.url); //
if (router.currentRoute.value.path !== item.url) {
router.push(item.url).then(() => {
// `routerViewKey`
routerViewKey.value += 1;
});
}
} }
}; };
onMounted(() => { onMounted(() => {
curPath.value = router.currentRoute.value.path;
getSystemInfo() getSystemInfo()
.then((res) => { .then((res) => {
logo.value = res.data.logo; logo.value = res.data.logo;