feat: 🚀 新增stylelint对scss样式的规范处理，新增提交的emoji图标处理。
This commit is contained in:
何嘉悦
@@ -76,26 +76,22 @@ function selectedIcon(name: string) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
cursor: pointer;
|
||||
padding: 0px 4px;
|
||||
margin: 3px 0 3px !important;
|
||||
width: fit-content !important;
|
||||
height: fit-content;
|
||||
text-align: center;
|
||||
padding: 0 4px;
|
||||
margin: 3px 0 !important;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-item:hover {
|
||||
box-shadow: 1px 1px 10px 0 #a1a1a1;
|
||||
}
|
||||
|
||||
.el-tab-pane {
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_name {
|
||||
display: none;
|
||||
}
|
||||
@@ -106,58 +102,48 @@ function selectedIcon(name: string) {
|
||||
.icon-body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.icon_name {
|
||||
display: block;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
.grid-container {
|
||||
margin-top: 12px;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
border-left: 1px solid #eee;
|
||||
border-top: 1px solid #eee;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 500px;
|
||||
margin-top: 12px;
|
||||
overflow: hidden auto;
|
||||
border-top: 1px solid #eeeeee;
|
||||
border-left: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
width: 100% !important;
|
||||
padding: 16px 0;
|
||||
margin: 0 !important;
|
||||
border-right: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
width: 100% !important;
|
||||
text-align: center;
|
||||
border-right: 1px solid #eeeeee;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-top: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.grid {
|
||||
border-top: 1px solid #eee;
|
||||
border-top: 1px solid #eeeeee;
|
||||
}
|
||||
}
|
||||
|
||||
.icons-container span {
|
||||
font-size: 12px !important;
|
||||
color: #99a9bf;
|
||||
}
|
||||
|
||||
.icons-container svg {
|
||||
font-size: 24px !important;
|
||||
color: #606266;
|
||||
span,
|
||||
svg {
|
||||
font-size: 24px !important;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -103,20 +103,18 @@ async function handleSubmit() {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 24px;
|
||||
padding: 12px;
|
||||
background: #409eff;
|
||||
margin-top: 24px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
background: #409eff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -181,20 +181,18 @@ async function getEmailCode() {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 24px;
|
||||
padding: 12px;
|
||||
background: #409eff;
|
||||
margin-top: 24px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
background: #409eff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -27,20 +27,18 @@
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 24px;
|
||||
padding: 12px;
|
||||
background: #409eff;
|
||||
margin-top: 24px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
background: #409eff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -179,91 +179,78 @@ onBeforeUnmount(() => {
|
||||
.qr-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
align-items: center;
|
||||
.tip {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.qr-img-wrapper {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
padding: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #f0f2f5;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
|
||||
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 8%);
|
||||
.qr-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.el-icon {
|
||||
font-size: 18px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.expired-overlay,
|
||||
.scanned-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.expired-overlay {
|
||||
background: hsla(0, 0%, 100%, 0.95);
|
||||
cursor: pointer;
|
||||
|
||||
background: hsl(0deg 0% 100% / 95%);
|
||||
.expired-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
text-align: center;
|
||||
|
||||
.expired-text {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scanned-overlay {
|
||||
background: hsla(120, 60%, 97%, 0.95);
|
||||
cursor: default;
|
||||
|
||||
background: hsl(120deg 60% 97% / 95%);
|
||||
.scanned-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
.success-icon {
|
||||
font-size: 18px;
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.scanned-text {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
gap: 8px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.countdown-text {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
|
||||
@@ -113,16 +113,14 @@ function onAfterLeave() {
|
||||
/* 动画样式（仅作用于弹框） */
|
||||
.dialog-zoom-enter-active,
|
||||
.dialog-zoom-leave-active {
|
||||
transition: all 0.3s ease-in-out;
|
||||
transform-origin: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.dialog-zoom-enter-from,
|
||||
.dialog-zoom-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.dialog-zoom-enter-to,
|
||||
.dialog-zoom-leave-from {
|
||||
opacity: 1;
|
||||
@@ -134,122 +132,107 @@ function onAfterLeave() {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
opacity: 1;
|
||||
backdrop-filter: blur(3px);
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.mask[hidden] {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 对话框容器样式 */
|
||||
.glass-dialog {
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
max-width: 90%;
|
||||
height: var(--login-dialog-height);
|
||||
padding: var(--login-dialog-padding);
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
border-radius: var(--login-dialog-border-radius);
|
||||
overflow: hidden;
|
||||
padding: var(--login-dialog-padding);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
max-width: 90%;
|
||||
box-shadow: 0 4px 24px rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
/* 以下样式与原代码一致，未修改 */
|
||||
.left-section {
|
||||
width: calc(var(--login-dialog-width) / 2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: calc(var(--login-dialog-width) / 2);
|
||||
padding: var(--login-dialog-section-padding);
|
||||
background: linear-gradient(
|
||||
233deg,
|
||||
rgba(113, 161, 255, 0.6) 17.67%,
|
||||
rgba(154, 219, 255, 0.6) 70.4%
|
||||
);
|
||||
background: linear-gradient(233deg, rgb(113 161 255 / 60%) 17.67%, rgb(154 219 255 / 60%) 70.4%);
|
||||
}
|
||||
|
||||
.left-section .logo-wrap {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 24px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.left-section .logo-wrap .logo-img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
|
||||
filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
|
||||
background: var(--login-dialog-logo-background);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 8%);
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 10%));
|
||||
}
|
||||
|
||||
.left-section .logo-wrap .logo-text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--login-dialog-logo-text-color);
|
||||
}
|
||||
|
||||
.left-section .ad-banner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left-section .ad-banner .svg-icon {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 310px;
|
||||
}
|
||||
|
||||
.right-section {
|
||||
width: calc(var(--login-dialog-width) / 2);
|
||||
position: relative;
|
||||
padding: var(--login-dialog-section-padding);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(var(--login-dialog-width) / 2);
|
||||
padding: var(--login-dialog-section-padding);
|
||||
}
|
||||
|
||||
.right-section .content-wrapper {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 8px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right-section .content-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.right-section .mode-toggle {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
cursor: pointer;
|
||||
color: var(--login-dialog-mode-toggle-color);
|
||||
transition: color 0.3s;
|
||||
font-size: 24px;
|
||||
color: var(--login-dialog-mode-toggle-color);
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.right-section .form-container,
|
||||
.right-section .qr-container {
|
||||
display: flex;
|
||||
@@ -259,48 +242,40 @@ function onAfterLeave() {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-section .form-box {
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
height: 100%;
|
||||
place-self: center center;
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
padding: var(--login-dialog-section-padding);
|
||||
border-radius: var(--login-dialog-border-radius);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
@media (width <= 800px) {
|
||||
.left-section {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.glass-dialog {
|
||||
padding: var(--login-dialog-padding);
|
||||
height: var(--login-dialog-height);
|
||||
padding: var(--login-dialog-padding);
|
||||
}
|
||||
|
||||
.right-section {
|
||||
padding: calc(var(--login-dialog-section-padding) - 8px);
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-up-down {
|
||||
animation: upDown 5s linear 0ms infinite;
|
||||
animation: up-down 5s linear 0ms infinite;
|
||||
}
|
||||
|
||||
@keyframes upDown {
|
||||
@keyframes up-down {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@@ -110,24 +110,20 @@ function handleClick(item: GetSessionListVO) {
|
||||
<style scoped lang="scss">
|
||||
.model-select-box {
|
||||
color: var(--el-color-primary, #409eff);
|
||||
background: var(--el-color-primary-light-9, rgb(235.9 245.3 255));
|
||||
border: 1px solid var(--el-color-primary, #409eff);
|
||||
background: var(--el-color-primary-light-9, rgb(235.9, 245.3, 255));
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.popover-content-box-item.is-select {
|
||||
color: var(--el-color-primary, #409eff);
|
||||
font-weight: 700;
|
||||
color: var(--el-color-primary, #409eff);
|
||||
}
|
||||
|
||||
.popover-content-box {
|
||||
height: 200px;
|
||||
gap: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
gap: 4px;
|
||||
height: 200px;
|
||||
overflow: hidden auto;
|
||||
.popover-content-box-items {
|
||||
:deep() {
|
||||
.popover-trigger-item-text {
|
||||
@@ -135,23 +131,20 @@ function handleClick(item: GetSessionListVO) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover-content-box-item-text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
// 滚动条样式
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #ccc;
|
||||
background: #cccccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,19 +3,19 @@ import type { CSSProperties } from 'vue';
|
||||
import { arrow, autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue';
|
||||
import { onClickOutside } from '@vueuse/core';
|
||||
|
||||
export type PopoverPlacement =
|
||||
| 'top'
|
||||
| 'top-start'
|
||||
| 'top-end'
|
||||
| 'bottom'
|
||||
| 'bottom-start'
|
||||
| 'bottom-end'
|
||||
| 'left'
|
||||
| 'left-start'
|
||||
| 'left-end'
|
||||
| 'right'
|
||||
| 'right-start'
|
||||
| 'right-end';
|
||||
export type PopoverPlacement
|
||||
= | 'top'
|
||||
| 'top-start'
|
||||
| 'top-end'
|
||||
| 'bottom'
|
||||
| 'bottom-start'
|
||||
| 'bottom-end'
|
||||
| 'left'
|
||||
| 'left-start'
|
||||
| 'left-end'
|
||||
| 'right'
|
||||
| 'right-start'
|
||||
| 'right-end';
|
||||
|
||||
export type Offset = [number, number];
|
||||
|
||||
@@ -190,13 +190,11 @@ function handleClick() {
|
||||
transform 0.2s ease;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.popover-fade-enter-from,
|
||||
.popover-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.popover-fade-enter-to,
|
||||
.popover-fade-leave-from {
|
||||
opacity: 1;
|
||||
|
||||
@@ -24,17 +24,16 @@ const svgClass = computed(() => {
|
||||
<style scope lang="scss">
|
||||
.sub-el-icon,
|
||||
.nav-icon {
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
margin-right: 12px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
position: relative;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
fill: currentColor;
|
||||
vertical-align: -2px;
|
||||
fill: currentColor;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -43,22 +43,19 @@ useWindowWidthObserver();
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.layout-header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layout-container-main {
|
||||
margin-left: var(--sidebar-left-container-default-width, 0px);
|
||||
margin-left: var(--sidebar-left-container-default-width, 0);
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
}
|
||||
@@ -67,7 +64,6 @@ useWindowWidthObserver();
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.layout-scrollbar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -209,16 +209,15 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
|
||||
<style scoped lang="scss">
|
||||
// 基础样式
|
||||
.aside-container {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
width: var(--sidebar-default-width);
|
||||
height: 100%;
|
||||
pointer-events: auto;
|
||||
background-color: var(--sidebar-background-color);
|
||||
border-right: 0.5px solid var(--s-color-border-tertiary, rgba(0, 0, 0, 0.08));
|
||||
z-index: 11;
|
||||
|
||||
border-right: 0.5px solid var(--s-color-border-tertiary, rgb(0 0 0 / 8%));
|
||||
.aside-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -226,33 +225,30 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
|
||||
|
||||
// 侧边栏头部样式
|
||||
.aside-header {
|
||||
height: 36px;
|
||||
margin: 10px 12px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
height: 36px;
|
||||
margin: 10px 12px 0;
|
||||
.logo-img {
|
||||
box-sizing: border-box;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-weight: 700;
|
||||
color: rgb(0 0 0 / 85%);
|
||||
transform: skewX(-2deg);
|
||||
}
|
||||
}
|
||||
@@ -261,56 +257,49 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
|
||||
.aside-body {
|
||||
.creat-chat-btn-wrapper {
|
||||
padding: 0 12px;
|
||||
|
||||
.creat-chat-btn {
|
||||
user-select: none;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
padding: 8px 6px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 6px;
|
||||
color: #0057ff;
|
||||
background-color: rgba(0, 87, 255, 0.06);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0, 102, 255, 0.15);
|
||||
cursor: pointer;
|
||||
gap: 6px;
|
||||
|
||||
user-select: none;
|
||||
background-color: rgb(0 87 255 / 6%);
|
||||
border: 1px solid rgb(0 102 255 / 15%);
|
||||
border-radius: 12px;
|
||||
&:hover {
|
||||
background-color: rgba(0, 87, 255, 0.12);
|
||||
background-color: rgb(0 87 255 / 12%);
|
||||
}
|
||||
|
||||
.creat-chat-text {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
font-size: 16px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-left: auto;
|
||||
height: 24px;
|
||||
color: rgba(0, 87, 255, 0.3);
|
||||
margin-left: auto;
|
||||
color: rgb(0 87 255 / 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aside-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
// 会话列表高度-基础样式
|
||||
.conversations-wrap {
|
||||
height: calc(100vh - 110px);
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -325,63 +314,58 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
|
||||
// 折叠样式
|
||||
.aside-container-collapse {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
// 向左偏移一个宽度
|
||||
transform: translateX(-100%);
|
||||
top: 54px;
|
||||
border-radius: 15px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow:
|
||||
0px 10px 20px 0px rgba(0, 0, 0, 0.1),
|
||||
0px 0px 1px 0px rgba(0, 0, 0, 0.15);
|
||||
height: auto;
|
||||
z-index: 22;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
max-height: calc(100% - 110px);
|
||||
padding-bottom: 12px;
|
||||
overflow: hidden;
|
||||
|
||||
/* 禁用悬停事件 */
|
||||
pointer-events: none;
|
||||
border: 1px solid rgb(0 0 0 / 8%);
|
||||
border-radius: 15px;
|
||||
box-shadow:
|
||||
0 10px 20px 0 rgb(0 0 0 / 10%),
|
||||
0 0 1px 0 rgb(0 0 0 / 15%);
|
||||
opacity: 0;
|
||||
|
||||
// 指定样式过渡
|
||||
transition-property: opacity, transform;
|
||||
transition-duration: 0.3s, 0.3s;
|
||||
transition-timing-function: ease, ease;
|
||||
transition-delay: 0.3s, 0.3s;
|
||||
|
||||
// 向左偏移一个宽度
|
||||
transform: translateX(-100%);
|
||||
transition:
|
||||
opacity 0.3s ease 0.3s,
|
||||
transform 0.3s ease 0.3s;
|
||||
|
||||
/* 新增：未激活悬停时覆盖延迟 */
|
||||
&.no-delay {
|
||||
transition-delay: 0s, 0s;
|
||||
}
|
||||
|
||||
/* 禁用悬停事件 */
|
||||
pointer-events: none;
|
||||
|
||||
&:hover,
|
||||
&.aside-container-suspended {
|
||||
pointer-events: auto;
|
||||
/* 悬停激活后恢复事件响应 */
|
||||
}
|
||||
}
|
||||
|
||||
// 悬停样式
|
||||
.aside-container-collapse:hover,
|
||||
.aside-container-collapse.aside-container-suspended {
|
||||
// 直接在这里写悬停时的样式（与 aside-container-suspended 一致）
|
||||
opacity: 1;
|
||||
transform: translateX(15px);
|
||||
border-radius: 15px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow:
|
||||
0px 10px 20px 0px rgba(0, 0, 0, 0.1),
|
||||
0px 0px 1px 0px rgba(0, 0, 0, 0.15);
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
max-height: calc(100% - 110px);
|
||||
padding-bottom: 12px;
|
||||
overflow: hidden;
|
||||
pointer-events: auto;
|
||||
border: 1px solid rgb(0 0 0 / 8%);
|
||||
border-radius: 15px;
|
||||
box-shadow:
|
||||
0 10px 20px 0 rgb(0 0 0 / 10%),
|
||||
0 0 1px 0 rgb(0 0 0 / 15%);
|
||||
|
||||
// 直接在这里写悬停时的样式（与 aside-container-suspended 一致）
|
||||
opacity: 1;
|
||||
|
||||
// 过渡动画沿用原有设置
|
||||
transition-property: opacity, transform;
|
||||
transition-duration: 0.3s, 0.3s;
|
||||
transition-timing-function: ease, ease;
|
||||
transition-delay: 0s, 0s;
|
||||
transform: translateX(15px);
|
||||
transition:
|
||||
opacity 0.3s ease 0s,
|
||||
transform 0.3s ease 0s;
|
||||
|
||||
// 会话列表高度-悬停样式
|
||||
.conversations-wrap {
|
||||
|
||||
@@ -130,12 +130,11 @@ function handleClick(item: any) {
|
||||
width: 520px;
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
.popover-content-box {
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
padding: 8px;
|
||||
box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -31,15 +31,14 @@ function handleCreatChat() {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.is-disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: #0057ff;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
border-color: #0057ff;
|
||||
border-style: solid;
|
||||
cursor: not-allowed;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,15 +74,14 @@ function handleClickTitle() {
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
.svg-icon {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0.5;
|
||||
display: none;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -79,14 +79,12 @@ onKeyStroke(event => event.ctrlKey && event.key.toLowerCase() === 'k', handleCtr
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
|
||||
.header-box {
|
||||
height: var(--header-container-default-heigth);
|
||||
width: 100%;
|
||||
width: calc(
|
||||
100% - var(--sidebar-left-container-default-width, 0px) - var(
|
||||
@@ -94,8 +92,9 @@ onKeyStroke(event => event.ctrlKey && event.key.toLowerCase() === 'k', handleCtr
|
||||
0px
|
||||
)
|
||||
);
|
||||
margin: 0 var(--sidebar-right-container-default-width, 0px) 0
|
||||
var(--sidebar-left-container-default-width, 0px);
|
||||
height: var(--header-container-default-heigth);
|
||||
margin: 0 var(--sidebar-right-container-default-width, 0) 0
|
||||
var(--sidebar-left-container-default-width, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,14 +18,14 @@ const sessionId = computed(() => route.params?.id);
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chat-container {
|
||||
padding: 0 16px;
|
||||
width: calc(100% - 32px);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: calc(100% - 32px);
|
||||
height: 100%;
|
||||
padding: 0 16px;
|
||||
overflow-anchor: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -108,13 +108,12 @@ watch(
|
||||
<style scoped lang="scss">
|
||||
.chat-defaul-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
min-height: 450px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
min-height: 450px;
|
||||
.chat-defaul-sender {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -324,48 +324,41 @@ watch(
|
||||
<style scoped lang="scss">
|
||||
.chat-with-id-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
height: 100%;
|
||||
.chat-warp {
|
||||
width: 100%;
|
||||
height: calc(100vh - 60px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
width: 100%;
|
||||
height: calc(100vh - 60px);
|
||||
.thinking-chain-warp {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.el-bubble-list {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.el-bubble {
|
||||
padding: 0 12px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.el-typewriter {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-defaul-sender {
|
||||
margin-bottom: 22px;
|
||||
width: 100%;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -32,30 +32,25 @@ function handleHomePage() {
|
||||
#box {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#banner {
|
||||
margin-top: 60px;
|
||||
background: url("@/assets/images/error/403.png") no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.elx-top {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.elx-bottom {
|
||||
height: 300px;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.elx-text1 {
|
||||
font-size: 46px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.elx-text2 {
|
||||
padding-top: 30px;
|
||||
font-family: YouYuan;
|
||||
|
||||
@@ -32,30 +32,25 @@ function handleHomePage() {
|
||||
#box {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#banner {
|
||||
margin-top: 60px;
|
||||
background: url("@/assets/images/error/404.png") no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.elx-top {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.elx-bottom {
|
||||
height: 300px;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.elx-text1 {
|
||||
font-size: 46px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.elx-text2 {
|
||||
padding-top: 30px;
|
||||
font-family: YouYuan;
|
||||
|
||||
Reference in New Issue
Block a user