Skip to content
GitLab
Commit e3a28c68 authored by 水玉婷's avatar 水玉婷
Browse files

feat:样式调整及loading调整

parent d3b643f3
Hide whitespace changes
Inline Side-by-side
src/views/History.vue
View file @ e3a28c68
......@@ -373,7 +373,7 @@ onMounted(() => {
padding: 8px 12px 8px 36px;
border: 1px solid #d9d9d9;
border-radius: 6px;
font-size: 14px;
font-size: 16px;
&:focus {
outline: none;
......@@ -433,7 +433,7 @@ onMounted(() => {
min-width: 0;
.session-title {
font-size: 14px;
font-size: 16px;
font-weight: 500;
color: #333;
margin-bottom: 4px;
......@@ -490,7 +490,7 @@ onMounted(() => {
}
p {
font-size: 14px;
font-size: 16px;
margin: 0;
}
}
......
src/views/components/AiChat.vue
View file @ e3a28c68
......@@ -63,6 +63,9 @@
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<img
......
src/views/components/ChartComponent.vue
View file @ e3a28c68
......@@ -379,6 +379,11 @@ onMounted(() => {
display: flex;
align-items: center;
margin-right: 6px;
.ant-select {
.ant-select-selector {
height: 28px;
}
}
}
.chart-fields-selector {
......
src/views/components/TableComponent.vue
View file @ e3a28c68
......@@ -393,9 +393,6 @@ const getTableScroll = () => {
&:last-child {
border-right: none;
}
.ant-table-column-sorter-up.active, .ant-table-column-sorter-down.active {
color: #656363;
}
}
.ant-table-tbody > tr > td {
......
src/views/components/VoiceRecognition.vue
View file @ e3a28c68
......@@ -685,7 +685,7 @@ defineExpose({
}
.full-screen-text {
font-size: 14px;
font-size: 16px;
opacity: 0;
transition: opacity 0.3s ease;
}
......
src/views/components/style.less
View file @ e3a28c68
......@@ -2,6 +2,14 @@
// 全局样式和变量定义
// =============================================
// 全局基础样式
body {
font-size: 16px;
color: @gray-7; // #323232
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.5;
}
// 颜色变量
@primary-color: var(--primary-color, #5B8AFE);
@primary-hover: var(--primary-color-hover, #4a7df5);
......@@ -19,10 +27,9 @@
@gray-6: #666666;
@gray-7: #323232;
@gray-8:#969799;
@gray-9:#222629;
@gray-10:#C8C9CC;
@success-color: #52c41a;
@error-color: #f5222d;
@error-color: #DF4545;
@warning-color: #faad14;
// 新增颜色变量
......@@ -172,6 +179,7 @@ li {
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 12px 0px;
}
// 输入容器
......@@ -188,7 +196,7 @@ li {
.message-time {
color: @message-time-color;
margin-bottom: 6px;
font-size: 14px;
font-size: 16px;
}
.message {
......@@ -262,17 +270,15 @@ li {
}
.message-content {
padding: 10px;
border-radius: 8px;
line-height: 1.5;
border-radius: 4px;
position: relative;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
white-space: pre-wrap;
.message-inner-box {
font-size: 0;
:deep(.message-text) {
font-size: 14px;
font-size: 16px;
}
}
}
......@@ -280,37 +286,37 @@ li {
.message.received .message-content {
background-color:none;
border-top-left-radius: 5px;
color: @gray-9;
color: @gray-7;
border: none;
padding: 0;
box-shadow:none;
}
.message.sent .message-content {
background: linear-gradient(135deg, @primary-color 0%, @primary-light 100%);
border-top-right-radius: 5px;
background: #5B8AFE;
color: @white;
}
// 图表块样式
.chart-block {
margin-top: 12px;
margin: 20px 0px 8px;
}
// 失败消息样式
.message-failed-wrapper {
margin-top: 8px;
margin-top: 12px;
.failed-indicator {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
font-size: 12px;
font-size: 16px;
color: @error-color;
.failed-text {
color: @error-color;
font-size:16px;
}
.retry-button {
......@@ -333,7 +339,7 @@ li {
line-height: 1.5;
color: @error-color;
white-space: pre-wrap;
font-size: 14px;
font-size: 16px;
}
// 成功消息样式
......@@ -341,7 +347,7 @@ li {
line-height: 1.5;
color: @success-color;
white-space: pre-wrap;
font-size: 14px;
font-size: 16px;
}
// 思考消息样式
......@@ -352,7 +358,7 @@ li {
// 思考框样式
:deep(.think-box-toggle) {
cursor: pointer;
font-size: 14px;
font-size: 16px;
text-decoration: none;
display: flex;
align-items: center;
......@@ -366,7 +372,7 @@ li {
height: 24px;
border-radius: 50%;
color: white;
font-size: 12px;
font-size: 16px;
font-weight: bold;
position: relative;
}
......@@ -393,7 +399,6 @@ li {
.loading-dots {
display: flex;
gap: 4px;
.dot {
width: 6px;
......@@ -403,14 +408,26 @@ li {
animation: loading-dots 1.4s ease-in-out infinite both;
&:nth-child(1) {
animation-delay: -0.32s;
animation-delay: -0.7s;
}
&:nth-child(2) {
animation-delay: -0.16s;
animation-delay: -0.56s;
}
&:nth-child(3) {
animation-delay: -0.42s;
}
&:nth-child(4) {
animation-delay: -0.28s;
}
&:nth-child(5) {
animation-delay: -0.14s;
}
&:nth-child(6) {
animation-delay: 0s;
}
}
......@@ -418,7 +435,7 @@ li {
.thinking-text {
color: @gray-7;
font-size: 14px;
font-size: 16px;
transition: color 0.3s ease;
font-weight: 500;
}
......@@ -474,6 +491,7 @@ li {
transition: opacity 0.3s ease-in-out 0.1s, transform 0.3s ease-in-out 0.1s;
padding-left:24px;
position: relative;
line-height: 24px;
&::before {
content: '';
......@@ -554,9 +572,8 @@ li {
outline: none;
resize: none;
height: 52px;
font-size: 15px;
font-size: 16px;
transition: border-color 0.3s, box-shadow 0.3s;
background-color: @blue-light-2;
border: 1px solid @gray-3;
overflow: hidden;
position: relative;
......@@ -609,7 +626,6 @@ li {
p {
color: @gray-5;
font-size: 12px;
span {
margin-right: 15px;
......@@ -640,7 +656,7 @@ li {
padding: 12px 16px;
background-color: @blue-light-2;
border-bottom: 1px solid @blue-light-3;
font-size: 14px;
font-size: 16px;
color: @gray-7;
font-weight: 500;
line-height: 1.4;
......@@ -651,7 +667,7 @@ li {
padding: 8px 16px;
background-color: @white;
border-bottom: 1px solid @gray-2;
font-size: 14px;
font-size: 16px;
color: @gray-7;
font-weight: 600;
line-height: 1.4;
......@@ -800,7 +816,7 @@ li {
padding: 12px 16px;
background-color: @blue-light-2;
border-bottom: 1px solid @blue-light-3;
font-size: 14px;
font-size: 16px;
color: @gray-7;
font-weight: 500;
line-height: 1.4;
......@@ -827,7 +843,7 @@ li {
line-height: 1.4;
.option-number-title {
font-size: 14px;
font-size: 16px;
color: @gray-7;
font-weight: 500;
......@@ -844,7 +860,7 @@ li {
}
.option-url {
font-size: 12px;
font-size: 16px;
color: @gray-5;
font-family: 'Courier New', monospace;
word-break: break-all;
......@@ -874,7 +890,7 @@ li {
position: relative;
background-color: @blue-light-2;
border-bottom: 1px solid @blue-light-3;
font-size: 14px;
font-size: 16px;
color: @gray-7;
font-weight: 500;
line-height: 1.4;
......@@ -895,9 +911,9 @@ li {
overflow: hidden;
.markdown-content {
font-size: 14px;
line-height: 1.6;
color: @gray-9;
font-size: 16px;
line-height: 24px;
color: @gray-7;
background: none;
white-space: initial;
// br{
......@@ -913,7 +929,7 @@ li {
h6 {
margin-bottom: 8px;
font-weight: 600;
color: @gray-9;
color: @gray-7;
line-height: 1.3;
background: none;
}
......@@ -957,7 +973,7 @@ li {
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 13px;
font-size: 16px;
color: @error-color;
}
......@@ -972,8 +988,8 @@ li {
code {
background: none;
padding: 0;
color: @gray-9;
font-size: 13px;
color: @gray-7;
font-size: 16px;
line-height: 1.4;
}
}
......@@ -1038,12 +1054,12 @@ li {
span {
color: #ff4d4f;
font-size: 14px;
font-size: 16px;
}
}
.image-caption {
font-size: 13px;
font-size: 16px;
color: #666;
font-style: italic;
line-height: 1.4;
......@@ -1072,7 +1088,7 @@ li {
table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
font-size: 16px;
background-color: @white;
th,
......@@ -1131,7 +1147,7 @@ li {
width: 100%;
border-collapse: collapse;
margin: 12px 0 0;
font-size: 13px;
font-size: 16px;
background-color: @white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
max-width: 100%;
......@@ -1203,9 +1219,8 @@ li {
outline: none;
resize: none;
height: 52px;
font-size: 15px;
font-size: 16px;
transition: border-color 0.3s, box-shadow 0.3s;
background-color: @blue-light-2;
border: 1px solid @gray-3;
overflow: hidden;
position: relative;
......@@ -1217,9 +1232,9 @@ li {
}
&:disabled {
background-color: @gray-2;
border-color: @gray-3;
color: @gray-5;
background-color: #F7F8FA;
border-color: #DCDEE0;
color: @gray-8;
cursor: not-allowed;
}
}
......@@ -1235,7 +1250,7 @@ li {
p {
color: @gray-5;
font-size: 12px;
font-size: 16px;
span {
margin-right: 15px;
......@@ -1263,7 +1278,7 @@ li {
@media (max-width: 1000px) {
.chat-messages {
padding: 12px 14px;
padding: 12px 20px !important;
}
.chat-container{
.chat-input-container {
......@@ -1277,7 +1292,7 @@ li {
@media (max-width: 768px) {
:deep(.message-table) {
.data-table {
font-size: 12px;
font-size: 16px;
th,
td {
......@@ -1298,7 +1313,7 @@ li {
}
.table-summary {
font-size: 12px;
font-size: 16px;
padding: 8px 10px;
}
}
......@@ -1315,14 +1330,14 @@ li {
}
h3 {
font-size: 15px;
font-size: 16px;
}
pre {
padding: 8px;
code {
font-size: 12px;
font-size: 16px;
}
}
}
......@@ -1332,11 +1347,11 @@ li {
.option-item {
.option-content {
.option-number-title {
font-size: 14px;
font-size: 16px;
}
.option-url {
font-size: 11px;
font-size: 16px;
max-width: 100%;
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment