feat: 功能
This commit is contained in:
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user