feat: 功能

This commit is contained in:
2025-12-28 13:49:45 +08:00
parent 36195ea55a
commit bbf8093ca3
25 changed files with 1046 additions and 1970 deletions

View File

@@ -123,22 +123,7 @@ onUnmounted(() => {
<style scoped>
.prompt-display {
line-height: 1.6;
}
/* 代码块优化 */
.prompt-display :deep(pre) {
max-width: 100%;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-all;
background: #282c34;
color: #abb2bf;
padding: 1em;
border-radius: 8px;
margin: 1em 0;
}
.prompt-display :deep(code) {
font-family: 'Fira Code', Menlo, Monaco, Consolas, 'Courier New', monospace;
color: var(--color-text);
font-size: 14px;
}
</style>

View File

@@ -93,29 +93,30 @@ const buttonClass = computed(() => {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 16px;
border: 1px solid rgba(24, 144, 255, 0.3);
border-radius: 4px;
font-size: 14px;
gap: 8px;
padding: 8px 24px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
color: #ffffff;
cursor: pointer;
transition: all 0.15s ease;
background: linear-gradient(135deg, #1890FF 0%, #40A9FF 100%);
box-shadow: 0 0 0 0 rgba(24, 144, 255, 0);
transition: all 0.2s ease;
background: var(--color-slate-900);
box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2), 0 4px 6px -2px rgba(59, 130, 246, 0.1);
user-select: none;
}
.gradient-button:hover {
background: linear-gradient(135deg, #1890FF 0%, #40A9FF 100%);
border-color: rgba(24, 144, 255, 0.5);
box-shadow: 0 0 6px rgba(24, 144, 255, 0.25);
background: var(--color-slate-800);
transform: translateY(-1px);
box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.3), 0 10px 10px -5px rgba(59, 130, 246, 0.15);
}
.gradient-button:active {
background: linear-gradient(135deg, #096DD9 0%, #1890FF 100%);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
background: var(--color-slate-800);
transform: translateY(0);
box-shadow: 0 4px 6px -2px rgba(59, 130, 246, 0.15);
}
.gradient-button__content,
@@ -171,15 +172,14 @@ const buttonClass = computed(() => {
.gradient-button:disabled {
opacity: 0.4;
cursor: not-allowed;
background: linear-gradient(135deg, #096DD9 0%, #1890FF 100%);
border-color: rgba(24, 144, 255, 0.2);
background: var(--color-slate-700);
box-shadow: none;
}
.gradient-button--disabled:hover,
.gradient-button:disabled:hover {
background: linear-gradient(135deg, #096DD9 0%, #1890FF 100%);
border-color: rgba(24, 144, 255, 0.2);
background: var(--color-slate-700);
transform: none;
box-shadow: none;
}

View File

@@ -573,7 +573,7 @@ async function handleLoginSuccess(info) {
.brand-pane {
width: 50%;
height: 100%;
background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
background: linear-gradient(135deg, var(--color-slate-900) 0%, var(--color-slate-800) 100%);
position: relative;
overflow: hidden;
}
@@ -609,7 +609,7 @@ async function handleLoginSuccess(info) {
width: 80px;
height: 80px;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 176, 48, 0.3);
box-shadow: var(--shadow-blue);
}
.brand-title {
@@ -646,9 +646,9 @@ async function handleLoginSuccess(info) {
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
background: var(--color-slate-800);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--color-slate-700);
}
.feature-text {
@@ -676,7 +676,7 @@ async function handleLoginSuccess(info) {
width: 40px;
height: 40px;
border: none;
background: rgba(255, 255, 255, 0.05);
background: var(--color-slate-100);
border-radius: 10px;
color: var(--color-text-secondary);
cursor: pointer;
@@ -687,7 +687,7 @@ async function handleLoginSuccess(info) {
}
.close-btn:hover {
background: rgba(255, 255, 255, 0.1);
background: var(--color-slate-200);
color: var(--color-text);
}
@@ -705,10 +705,10 @@ async function handleLoginSuccess(info) {
display: flex;
gap: 8px;
margin-bottom: 12px;
background: rgba(255, 255, 255, 0.03);
background: var(--color-slate-50);
padding: 4px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-border);
}
.tab-btn {
@@ -727,7 +727,7 @@ async function handleLoginSuccess(info) {
.tab-btn.active {
background: var(--color-primary);
color: white;
box-shadow: 0 2px 8px rgba(0, 176, 48, 0.3);
box-shadow: var(--shadow-sm);
}
/* 表单标题 */
@@ -775,7 +775,7 @@ async function handleLoginSuccess(info) {
padding: 0 16px;
border-radius: 12px;
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.02);
background: var(--color-surface);
color: var(--color-text);
font-size: 16px;
transition: all 0.2s ease;
@@ -784,8 +784,8 @@ async function handleLoginSuccess(info) {
.form-input:focus {
outline: none;
border-color: var(--color-primary);
background: rgba(255, 255, 255, 0.04);
box-shadow: 0 0 0 3px rgba(0, 176, 48, 0.1);
background: var(--color-surface);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-input::placeholder {
@@ -806,7 +806,7 @@ async function handleLoginSuccess(info) {
width: 120px;
height: 48px;
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.02);
background: var(--color-surface);
color: var(--color-text);
border-radius: 12px;
font-size: 14px;
@@ -815,7 +815,7 @@ async function handleLoginSuccess(info) {
}
.send-code-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.05);
background: var(--color-slate-50);
border-color: var(--color-primary);
}
@@ -848,7 +848,7 @@ async function handleLoginSuccess(info) {
}
.forgot-btn:hover {
color: #00b030;
color: var(--color-primary-hover);
}
.back-btn {
@@ -866,7 +866,7 @@ async function handleLoginSuccess(info) {
}
.back-btn:hover {
background: rgba(255, 255, 255, 0.05);
background: var(--color-slate-50);
color: var(--color-text);
}
@@ -882,13 +882,13 @@ async function handleLoginSuccess(info) {
cursor: pointer;
margin-top: 8px;
transition: all 0.2s ease;
box-shadow: 0 4px 16px rgba(0, 176, 48, 0.3);
box-shadow: var(--shadow-blue);
}
.submit-btn:hover:not(:disabled) {
background: #00b030;
background: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0, 176, 48, 0.4);
box-shadow: var(--shadow-blue);
}
.submit-btn:disabled {
@@ -917,7 +917,7 @@ async function handleLoginSuccess(info) {
}
.link-btn:hover {
color: #00b030;
color: var(--color-primary-hover);
}
/* 协议同意 */
@@ -952,7 +952,7 @@ async function handleLoginSuccess(info) {
}
.agreement-link:hover {
color: #00b030;
color: var(--color-primary-hover);
}
/* 响应式设计 */

View File

@@ -124,30 +124,39 @@ function go(item) {
.nav-item {
height: 40px;
border-radius: var(--radius-card);
border-radius: 12px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 12px;
color: var(--color-text-secondary);
background: var(--color-surface);
border: 1px solid var(--color-border);
padding: 8px 12px;
color: var(--color-slate-600);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease, border-color .2s ease;
width: 100%;
text-align: left;
font-size: 14px;
font-weight: 400;
}
.nav-item:hover {
background: #161616; /* hover态加深 */
color: var(--color-text);
background: var(--color-slate-50);
color: var(--color-slate-700);
}
.nav-item.is-active {
background: var(--color-primary);;
color: var(--color-text);
border-color: var(--color-primary);
background: var(--color-blue-50);
color: var(--color-blue-700);
border-color: transparent;
}
.nav-item.is-active:hover {
background: var(--color-blue-100);
color: var(--color-blue-800);
}
.nav-item__icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.nav-item__label { font-size: var(--font-body-size); font-weight: 600; }
.nav-item__label { font-size: 14px; }
</style>

View File

@@ -7,8 +7,8 @@ import UserDropdown from '@/components/UserDropdown.vue'
import TestService from '@/api/test'
const styles = {
background: 'var(--color-surface)',
color: 'var(--color-text)'
background: 'var(--color-slate-900)',
color: 'var(--color-text-inverse)'
}
// const route = useRoute()
const userStore = useUserStore()
@@ -137,29 +137,29 @@ const shouldShowUser = computed(() => {
.btn-primary-nav {
height: 32px;
padding: 0 12px;
border-radius: 8px;
border-radius: var(--radius-button);
background: var(--color-primary);
color: #fff;
font-size: 12px;
color: var(--color-text-inverse);
font-size: 14px;
font-weight: 600;
box-shadow: var(--glow-primary);
box-shadow: var(--shadow-blue);
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary-nav:hover {
transform: translateY(-1px);
box-shadow: var(--glow-primary);
box-shadow: var(--shadow-blue);
filter: brightness(1.03);
}
.btn-test-nav {
height: 32px;
padding: 0 12px;
border-radius: 8px;
border-radius: var(--radius-button);
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text);
font-size: 12px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all .2s ease;