feat: 全面优化ai-hub前端细节
This commit is contained in:
@@ -5,6 +5,8 @@
|
|||||||
"ComputedRef": true,
|
"ComputedRef": true,
|
||||||
"DirectiveBinding": true,
|
"DirectiveBinding": true,
|
||||||
"EffectScope": true,
|
"EffectScope": true,
|
||||||
|
"ElMessage": true,
|
||||||
|
"ElMessageBox": true,
|
||||||
"ExtractDefaultPropTypes": true,
|
"ExtractDefaultPropTypes": true,
|
||||||
"ExtractPropTypes": true,
|
"ExtractPropTypes": true,
|
||||||
"ExtractPublicPropTypes": true,
|
"ExtractPublicPropTypes": true,
|
||||||
|
|||||||
@@ -290,14 +290,14 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="QrCodeType === WECHAT_QRCODE_TYPE.LoginOrRegister" class="tip-old-user">
|
<div v-if="QrCodeType === WECHAT_QRCODE_TYPE.LoginOrRegister" class="tip-old-user">
|
||||||
提示:<br>
|
<p>提示:</p>
|
||||||
意社区老用户可返回登录<br>
|
<p>意社区老用户可用原方式登录</p>
|
||||||
登录后前往个人中心绑定微信
|
<p>登录后前往个人中心绑定微信</p>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="QrCodeType === WECHAT_QRCODE_TYPE.Bind" class="tip-old-user-bind">
|
<div v-if="QrCodeType === WECHAT_QRCODE_TYPE.Bind" class="tip-old-user-bind">
|
||||||
提示:<br>
|
提示:<br>
|
||||||
若该微信已注册意社区<br>
|
若扫码的微信已注册过意社区账号<br>
|
||||||
将直接解绑到该账号
|
将直接解绑到当前登录账号
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -306,56 +306,17 @@ onMounted(() => {
|
|||||||
.tip-old-user{
|
.tip-old-user{
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
padding: 6px 12px;
|
color: #FF4D4F;
|
||||||
color: #F56C6C;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
min-height: 4rem;
|
text-align: center;
|
||||||
border-radius: var(--r);
|
|
||||||
border: none;
|
|
||||||
background: rgba(#fff, 0.1);
|
|
||||||
backdrop-filter: blur(2px);
|
|
||||||
text-shadow: 0.25em 0.25em 1px #00000010;
|
|
||||||
--shadow-color: 0deg 0% 64%;
|
|
||||||
--shadow-elevation-high: 0.5px 1px 1.1px hsl(var(--shadow-color) / 0.28), 1.4px 3.1px 3.4px -0.4px hsl(var(--shadow-color) / 0.27), 2.5px 5.3px 5.9px -0.7px hsl(var(--shadow-color) / 0.25), 3.9px 8.4px 9.3px -1.1px hsl(var(--shadow-color) / 0.24), 6px 12.9px 14.3px -1.5px hsl(var(--shadow-color) / 0.23), 9px 19.5px 21.6px -1.8px hsl(var(--shadow-color) / 0.21), 13.4px 28.9px 32px -2.2px hsl(var(--shadow-color) / 0.2), 19.3px 41.7px 46.2px -2.6px hsl(var(--shadow-color) / 0.19), 27.1px 58.5px 64.8px -2.9px hsl(var(--shadow-color) / 0.17), 37.1px 80px 88.6px -3.3px hsl(var(--shadow-color) / 0.16);
|
|
||||||
--inner-light: inset 0 -6px 2px -5px #ffffff24, inset 0 -8px 3px -5px #ffffff3b, inset 0 -20px 10px -15px #ffffff5c, inset 7px 25px 10px -20px #ffffff5c;
|
|
||||||
--inner-shadow: inset -20px 5px 10px -20px #00000021, inset -40px 50px 7px -55px #00000021;
|
|
||||||
--external-light: 5px -30px 30px -20px #ffffff70, 5px 10px 30px -20px #ffffff70;
|
|
||||||
--default: var(--external-light), var(--shadow-elevation-high), var(--inner-light), var(--inner-shadow);
|
|
||||||
box-shadow: var(--default);
|
|
||||||
background-position: center;
|
|
||||||
animation: gradient 10s linear infinite;
|
|
||||||
//background: linear-gradient(45deg, #85d5e757, #7a9ed254, #ba6ac93d, #de54c217, #f86b2d4f);
|
|
||||||
//background: #00DB73;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.tip-old-user-bind{
|
.tip-old-user-bind{
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
padding: 6px 12px;
|
color: #FF4D4F;
|
||||||
color: #ffffff;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 4rem;
|
|
||||||
border-radius: var(--r);
|
|
||||||
border: none;
|
|
||||||
background: rgba(#fff, 0.1);
|
|
||||||
backdrop-filter: blur(2px);
|
|
||||||
text-shadow: 0.25em 0.25em 1px #00000010;
|
|
||||||
--shadow-color: 0deg 0% 64%;
|
|
||||||
--shadow-elevation-high: 0.5px 1px 1.1px hsl(var(--shadow-color) / 0.28), 1.4px 3.1px 3.4px -0.4px hsl(var(--shadow-color) / 0.27), 2.5px 5.3px 5.9px -0.7px hsl(var(--shadow-color) / 0.25), 3.9px 8.4px 9.3px -1.1px hsl(var(--shadow-color) / 0.24), 6px 12.9px 14.3px -1.5px hsl(var(--shadow-color) / 0.23), 9px 19.5px 21.6px -1.8px hsl(var(--shadow-color) / 0.21), 13.4px 28.9px 32px -2.2px hsl(var(--shadow-color) / 0.2), 19.3px 41.7px 46.2px -2.6px hsl(var(--shadow-color) / 0.19), 27.1px 58.5px 64.8px -2.9px hsl(var(--shadow-color) / 0.17), 37.1px 80px 88.6px -3.3px hsl(var(--shadow-color) / 0.16);
|
|
||||||
--inner-light: inset 0 -6px 2px -5px #ffffff24, inset 0 -8px 3px -5px #ffffff3b, inset 0 -20px 10px -15px #ffffff5c, inset 7px 25px 10px -20px #ffffff5c;
|
|
||||||
--inner-shadow: inset -20px 5px 10px -20px #00000021, inset -40px 50px 7px -55px #00000021;
|
|
||||||
--external-light: 5px -30px 30px -20px #ffffff70, 5px 10px 30px -20px #ffffff70;
|
|
||||||
--default: var(--external-light), var(--shadow-elevation-high), var(--inner-light), var(--inner-shadow);
|
|
||||||
box-shadow: var(--default);
|
|
||||||
background-position: center;
|
|
||||||
animation: gradient 10s linear infinite;
|
|
||||||
background: linear-gradient(45deg, #85d5e757, #7a9ed254, #ba6ac93d, #de54c217, #f86b2d4f);
|
|
||||||
background: #ff0000;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.qr-wrapper {
|
.qr-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -366,6 +327,7 @@ onMounted(() => {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #303133;
|
color: #303133;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.qr-img-wrapper {
|
.qr-img-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import { useUserStore } from '@/stores';
|
|||||||
const greeting = useTimeGreeting();
|
const greeting = useTimeGreeting();
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
|
||||||
const username = computed(() => userStore.userInfo?.username ?? '意心Ai,一心只为打造更良心的AI平台');
|
const username = computed(() => userStore.userInfo?.username ?? '意心Ai,一心只为打造更良心的Ai平台');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@@ -71,10 +71,10 @@ function maskEmail(email: string) {
|
|||||||
return `${name.substring(0, 2)}****@${domain}`;
|
return `${name.substring(0, 2)}****@${domain}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function maskPhone(phone: string) {
|
function maskPhone(phone: number) {
|
||||||
if (!phone)
|
if (!phone)
|
||||||
return '';
|
return '';
|
||||||
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
|
return phone.toString().replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
|
||||||
}
|
}
|
||||||
|
|
||||||
// 操作处理
|
// 操作处理
|
||||||
|
|||||||
@@ -212,7 +212,7 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 11;
|
// z-index: 11;
|
||||||
width: var(--sidebar-default-width);
|
width: var(--sidebar-default-width);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
@@ -315,7 +315,7 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
|
|||||||
.aside-container-collapse {
|
.aside-container-collapse {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 54px;
|
top: 54px;
|
||||||
z-index: 22;
|
// z-index: 22;
|
||||||
height: auto;
|
height: auto;
|
||||||
max-height: calc(100% - 110px);
|
max-height: calc(100% - 110px);
|
||||||
padding-bottom: 12px;
|
padding-bottom: 12px;
|
||||||
@@ -381,5 +381,9 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
|
|||||||
padding-left: 12px !important;
|
padding-left: 12px !important;
|
||||||
background-color: var(--sidebar-background-color) !important;
|
background-color: var(--sidebar-background-color) !important;
|
||||||
}
|
}
|
||||||
|
.conversation-group .active-sticky
|
||||||
|
{
|
||||||
|
z-index: 0 ;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -199,7 +199,7 @@ function onProductPackage() {
|
|||||||
v-else
|
v-else
|
||||||
class="inline-block px-2 py-0.5 text-xs text-gray-600 bg-gray-100 rounded-full cursor-pointer hover:bg-yellow-50 hover:text-yellow-700 transition"
|
class="inline-block px-2 py-0.5 text-xs text-gray-600 bg-gray-100 rounded-full cursor-pointer hover:bg-yellow-50 hover:text-yellow-700 transition"
|
||||||
>
|
>
|
||||||
普通用户 · 开通 VIP
|
普通用户
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -238,7 +238,7 @@ function onProductPackage() {
|
|||||||
v-else
|
v-else
|
||||||
class="inline-block px-2 py-0.5 text-xs text-gray-600 bg-gray-100 rounded-full cursor-pointer hover:bg-yellow-50 hover:text-yellow-700 transition"
|
class="inline-block px-2 py-0.5 text-xs text-gray-600 bg-gray-100 rounded-full cursor-pointer hover:bg-yellow-50 hover:text-yellow-700 transition"
|
||||||
>
|
>
|
||||||
普通用户 · 开通 VIP
|
普通用户
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ const sessionId = computed(() => route.params?.id);
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: calc(100% - 32px);
|
// width: calc(100% - 32px);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
overflow-anchor: none;
|
overflow-anchor: none;
|
||||||
|
|||||||
@@ -312,7 +312,7 @@ function copy(item: any) {
|
|||||||
<div class="footer-container">
|
<div class="footer-container">
|
||||||
<div class="footer-time">
|
<div class="footer-time">
|
||||||
<span v-if="item.creationTime "> {{ item.creationTime }}</span>
|
<span v-if="item.creationTime "> {{ item.creationTime }}</span>
|
||||||
<span v-if="((item.role === 'ai' || item.role === 'assistant') && item?.tokenUsage?.total) " class="footer-token">
|
<span style="margin-left: 10px;" v-if="((item.role === 'ai' || item.role === 'assistant') && item?.tokenUsage?.total) " class="footer-token">
|
||||||
{{ ((item.role === 'ai' || item.role === 'assistant') && item?.tokenUsage?.total) ? `token:${item?.tokenUsage?.total}` : '' }}</span>
|
{{ ((item.role === 'ai' || item.role === 'assistant') && item?.tokenUsage?.total) ? `token:${item?.tokenUsage?.total}` : '' }}</span>
|
||||||
<el-button icon="DocumentCopy" size="small" circle @click="copy(item)" />
|
<el-button icon="DocumentCopy" size="small" circle @click="copy(item)" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -641,7 +641,7 @@
|
|||||||
|
|
||||||
.markdown-body .highlight pre,
|
.markdown-body .highlight pre,
|
||||||
.markdown-body pre {
|
.markdown-body pre {
|
||||||
padding: 16px;
|
padding: 16px 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
.el-bubble-content{
|
.el-bubble-content{
|
||||||
padding: 9px 16px !important;
|
padding: 10px !important;
|
||||||
color: rgba(0,0,0,0.85) !important;
|
color: rgba(0,0,0,0.85) !important;
|
||||||
font-size: 16px !important;
|
font-size: 16px !important;
|
||||||
font-weight: 400 !important;
|
font-weight: 400 !important;
|
||||||
|
|||||||
Reference in New Issue
Block a user