sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式整改

Browse Source
This commit is contained in:
shenaowei
2026-02-25 23:44:01 +08:00
parent 8beb4a5508
commit 116e363e83
16 changed files with 660 additions and 720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

329
frontend/app/web-gold/src/views/trends/Forecast.vue
View File

@@ -631,52 +631,39 @@ onMounted(() => {
</template>
<style scoped lang="less">
// 设计系统变量
@primary: #00b030;
@primary-light: #00c838;
@primary-glow: rgba(0, 176, 48, 0.12);
@bg-base: #f5f6f8;
@bg-card: #ffffff;
@bg-elevated: #fafbfc;
@border-subtle: rgba(0, 0, 0, 0.04);
@border-default: rgba(0, 0, 0, 0.08);
@text-primary: rgba(0, 0, 0, 0.88);
@text-secondary: rgba(0, 0, 0, 0.55);
@text-tertiary: rgba(0, 0, 0, 0.35);
@radius-sm: 6px;
@radius-md: 10px;
@radius-lg: 14px;
// 使用设计系统变量
// 主色: var(--color-primary-500) = #3B82F6
// 页面布局
.forecast-page {
display: grid;
grid-template-columns: 1fr 400px;
gap: 16px;
gap: var(--space-4);
height: 100%;
background: @bg-base;
background: var(--color-gray-50);
}
// 面板基础
.search-panel,
.create-panel {
background: @bg-card;
border: 1px solid @border-subtle;
border-radius: @radius-lg;
background: var(--color-bg-card);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
box-shadow: var(--shadow-sm);
}
.panel-header {
padding: 16px 20px;
border-bottom: 1px solid @border-subtle;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-gray-200);
}
.panel-title {
font-size: 15px;
font-size: var(--font-size-md);
font-weight: 600;
color: @text-primary;
color: var(--color-gray-900);
margin: 0;
letter-spacing: -0.01em;
}
@@ -684,8 +671,8 @@ onMounted(() => {
// ========== 搜索面板 ==========
.search-bar {
display: flex;
gap: 8px;
padding: 12px 16px;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
}
.search-input-wrap {
@@ -695,31 +682,31 @@ onMounted(() => {
.search-icon {
position: absolute;
left: 12px;
left: var(--space-3);
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: @text-tertiary;
color: var(--color-gray-400);
pointer-events: none;
}
.search-input {
width: 100%;
height: 38px;
padding: 0 12px 0 38px;
font-size: 14px;
color: @text-primary;
background: @bg-base;
border: 1px solid @border-default;
border-radius: @radius-sm;
transition: all 0.2s;
padding: 0 var(--space-3) 0 38px;
font-size: var(--font-size-base);
color: var(--color-gray-900);
background: var(--color-gray-50);
border: 1px solid var(--color-gray-300);
border-radius: var(--radius-base);
transition: all var(--duration-fast);
&::placeholder { color: @text-tertiary; }
&::placeholder { color: var(--color-gray-400); }
&:focus {
outline: none;
border-color: @primary;
box-shadow: 0 0 0 3px @primary-glow;
border-color: var(--color-primary-500);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
&:disabled { opacity: 0.5; }
}
@@ -727,19 +714,19 @@ onMounted(() => {
.search-btn {
padding: 0 18px;
height: 38px;
font-size: 14px;
font-size: var(--font-size-base);
font-weight: 500;
color: #fff;
background: @primary;
background: var(--color-primary-500);
border: none;
border-radius: @radius-sm;
border-radius: var(--radius-base);
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s;
gap: var(--space-2);
transition: all var(--duration-fast);
&:hover:not(:disabled) { background: @primary-light; }
&:hover:not(:disabled) { background: var(--color-primary-400); }
&:disabled { opacity: 0.5; cursor: not-allowed; }
}
@@ -760,34 +747,34 @@ onMounted(() => {
// 筛选器
.filters-row {
display: flex;
gap: 12px;
padding: 0 16px 12px;
border-bottom: 1px solid @border-subtle;
gap: var(--space-3);
padding: 0 var(--space-4) var(--space-3);
border-bottom: 1px solid var(--color-gray-200);
}
.filter-item {
display: flex;
align-items: center;
gap: 6px;
gap: var(--space-2);
}
.filter-label {
font-size: 12px;
color: @text-tertiary;
font-size: var(--font-size-xs);
color: var(--color-gray-400);
}
:deep(.ant-select) {
width: 88px;
.ant-select-selector {
background: @bg-base !important;
border-color: @border-default !important;
border-radius: @radius-sm !important;
background: var(--color-gray-50) !important;
border-color: var(--color-gray-300) !important;
border-radius: var(--radius-base) !important;
height: 26px !important;
.ant-select-selection-item {
color: @text-primary !important;
font-size: 12px !important;
color: var(--color-gray-900) !important;
font-size: var(--font-size-xs) !important;
line-height: 24px !important;
}
}
@@ -797,11 +784,11 @@ onMounted(() => {
.results-area {
flex: 1;
overflow-y: auto;
padding: 12px;
padding: var(--space-3);
&::-webkit-scrollbar { width: 4px; }
&::-webkit-scrollbar-track { background: transparent; }
&::-webkit-scrollbar-thumb { background: @border-default; border-radius: 2px; }
&::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: 2px; }
}
// 空状态
@@ -810,20 +797,20 @@ onMounted(() => {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 20px;
padding: 48px var(--space-5);
}
.empty-icon {
width: 48px;
height: 48px;
color: @text-tertiary;
margin-bottom: 12px;
color: var(--color-gray-400);
margin-bottom: var(--space-3);
opacity: 0.6;
}
.empty-text {
font-size: 14px;
color: @text-secondary;
font-size: var(--font-size-base);
color: var(--color-gray-600);
margin: 0;
}
@@ -833,17 +820,17 @@ onMounted(() => {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 20px;
gap: 12px;
color: @text-secondary;
font-size: 13px;
padding: 48px var(--space-5);
gap: var(--space-3);
color: var(--color-gray-600);
font-size: var(--font-size-sm);
}
.loading-ring {
width: 28px;
height: 28px;
border: 2px solid @border-default;
border-top-color: @primary;
border: 2px solid var(--color-gray-300);
border-top-color: var(--color-primary-500);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@@ -856,28 +843,28 @@ onMounted(() => {
.topic-list {
display: flex;
flex-direction: column;
gap: 8px;
gap: var(--space-2);
}
.topic-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
background: @bg-card;
border: 1px solid @border-subtle;
border-radius: @radius-md;
gap: var(--space-3);
padding: var(--space-3);
background: var(--color-bg-card);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s;
transition: all var(--duration-fast);
&:hover {
border-color: @border-default;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border-color: var(--color-gray-300);
box-shadow: var(--shadow-md);
}
&.selected {
border-color: @primary;
box-shadow: 0 0 0 3px @primary-glow;
border-color: var(--color-primary-500);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
}
@@ -886,8 +873,8 @@ onMounted(() => {
flex-shrink: 0;
width: 88px;
height: 50px;
background: @bg-base;
border-radius: @radius-sm;
background: var(--color-gray-50);
border-radius: var(--radius-base);
overflow: hidden;
img {
@@ -902,7 +889,7 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
color: @text-tertiary;
color: var(--color-gray-400);
svg { width: 20px; height: 20px; opacity: 0.4; }
}
@@ -910,11 +897,11 @@ onMounted(() => {
.topic-num {
position: absolute;
top: 4px;
left: 4px;
top: var(--space-1);
left: var(--space-1);
min-width: 16px;
height: 16px;
padding: 0 4px;
padding: 0 var(--space-1);
font-size: 10px;
font-weight: 600;
color: #fff;
@@ -930,13 +917,13 @@ onMounted(() => {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
gap: var(--space-1);
}
.topic-title {
font-size: 13px;
font-size: var(--font-size-sm);
font-weight: 500;
color: @text-primary;
color: var(--color-gray-900);
margin: 0;
line-height: 1.4;
display: -webkit-box;
@@ -945,15 +932,15 @@ onMounted(() => {
-webkit-box-orient: vertical;
overflow: hidden;
cursor: pointer;
transition: color 0.15s;
transition: color var(--duration-fast);
&:hover { color: @primary; }
&:hover { color: var(--color-primary-500); }
}
.topic-meta {
display: flex;
align-items: center;
gap: 6px;
gap: var(--space-2);
}
.author-avatar {
@@ -965,7 +952,7 @@ onMounted(() => {
.author-name {
font-size: 11px;
color: @text-secondary;
color: var(--color-gray-600);
}
.topic-stats {
@@ -978,7 +965,7 @@ onMounted(() => {
align-items: center;
gap: 3px;
font-size: 11px;
color: @text-tertiary;
color: var(--color-gray-500);
svg { width: 11px; height: 11px; }
}
@@ -990,17 +977,17 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
color: @primary;
background: @primary-glow;
color: var(--color-primary-500);
background: rgba(59, 130, 246, 0.1);
border: none;
border-radius: @radius-sm;
border-radius: var(--radius-base);
cursor: pointer;
transition: all 0.15s;
transition: all var(--duration-fast);
svg { width: 16px; height: 16px; }
&:hover {
background: @primary;
background: var(--color-primary-500);
color: #fff;
}
}
@@ -1008,28 +995,28 @@ onMounted(() => {
// ========== 创作面板 ==========
.create-form {
flex: 1;
padding: 16px;
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: 16px;
gap: var(--space-4);
overflow-y: auto;
&::-webkit-scrollbar { width: 4px; }
&::-webkit-scrollbar-track { background: transparent; }
&::-webkit-scrollbar-thumb { background: @border-default; border-radius: 2px; }
&::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: 2px; }
}
.form-block {
display: flex;
flex-direction: column;
gap: 8px;
gap: var(--space-2);
&.half { flex: 1; }
label {
font-size: 12px;
font-size: var(--font-size-xs);
font-weight: 500;
color: @text-secondary;
color: var(--color-gray-600);
}
}
@@ -1044,12 +1031,12 @@ onMounted(() => {
align-items: center;
gap: 5px;
font-size: 11px;
color: @primary;
color: var(--color-primary-500);
&.analyzing .tag-dot {
width: 5px;
height: 5px;
background: @primary;
background: var(--color-primary-500);
border-radius: 50%;
animation: pulse 1s ease-in-out infinite;
}
@@ -1062,17 +1049,17 @@ onMounted(() => {
.content-input {
:deep(.ant-input) {
background: @bg-base !important;
border-color: @border-default !important;
color: @text-primary !important;
border-radius: @radius-sm !important;
font-size: 13px !important;
background: var(--color-gray-50) !important;
border-color: var(--color-gray-300) !important;
color: var(--color-gray-900) !important;
border-radius: var(--radius-base) !important;
font-size: var(--font-size-sm) !important;
line-height: 1.6 !important;
&::placeholder { color: @text-tertiary !important; }
&::placeholder { color: var(--color-gray-400) !important; }
&:focus {
border-color: @primary !important;
box-shadow: 0 0 0 2px @primary-glow !important;
border-color: var(--color-primary-500) !important;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}
}
}
@@ -1080,68 +1067,68 @@ onMounted(() => {
// 下拉选择器
:deep(.ant-select) {
.ant-select-selector {
background: @bg-base !important;
border-color: @border-default !important;
border-radius: @radius-sm !important;
background: var(--color-gray-50) !important;
border-color: var(--color-gray-300) !important;
border-radius: var(--radius-base) !important;
height: 36px !important;
.ant-select-selection-item,
.ant-select-selection-placeholder {
color: @text-primary !important;
font-size: 13px !important;
color: var(--color-gray-900) !important;
font-size: var(--font-size-sm) !important;
line-height: 34px !important;
}
}
&.ant-select-focused .ant-select-selector {
border-color: @primary !important;
box-shadow: 0 0 0 2px @primary-glow !important;
border-color: var(--color-primary-500) !important;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}
}
.agent-category {
margin-left: 8px;
margin-left: var(--space-2);
font-size: 11px;
color: @text-tertiary;
color: var(--color-gray-500);
}
// 表单行
.form-row {
display: flex;
gap: 12px;
gap: var(--space-3);
}
// 模式切换
.mode-switch {
display: flex;
gap: 6px;
gap: var(--space-2);
}
.mode-btn {
flex: 1;
height: 36px;
font-size: 13px;
font-size: var(--font-size-sm);
font-weight: 500;
color: @text-secondary;
background: @bg-base;
border: 1px solid @border-default;
border-radius: @radius-sm;
color: var(--color-gray-600);
background: var(--color-gray-50);
border: 1px solid var(--color-gray-300);
border-radius: var(--radius-base);
cursor: pointer;
transition: all 0.15s;
transition: all var(--duration-fast);
&:hover { border-color: @border-subtle; color: @text-primary; }
&:hover { border-color: var(--color-gray-200); color: var(--color-gray-900); }
&.active {
color: #fff;
background: @primary;
border-color: @primary;
background: var(--color-primary-500);
border-color: var(--color-primary-500);
}
}
// 幅度滑块
.level-num {
font-size: 12px;
font-size: var(--font-size-xs);
font-weight: 600;
color: @primary;
color: var(--color-primary-500);
}
.level-slider {
@@ -1149,7 +1136,7 @@ onMounted(() => {
height: 4px;
-webkit-appearance: none;
appearance: none;
background: @bg-base;
background: var(--color-gray-50);
border-radius: 2px;
outline: none;
@@ -1157,14 +1144,14 @@ onMounted(() => {
-webkit-appearance: none;
width: 14px;
height: 14px;
background: @primary;
background: var(--color-primary-500);
border-radius: 50%;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
transition: transform var(--duration-fast), box-shadow var(--duration-fast);
&:hover {
transform: scale(1.15);
box-shadow: 0 0 0 4px @primary-glow;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}
}
}
@@ -1173,26 +1160,26 @@ onMounted(() => {
.generate-btn {
width: 100%;
height: 44px;
font-size: 14px;
font-size: var(--font-size-base);
font-weight: 600;
color: #fff;
background: @primary;
background: var(--color-primary-500);
border: none;
border-radius: @radius-md;
border-radius: var(--radius-md);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s;
gap: var(--space-2);
transition: all var(--duration-fast);
margin-top: auto;
svg { width: 16px; height: 16px; }
&:hover:not(:disabled) {
background: @primary-light;
background: var(--color-primary-400);
transform: translateY(-1px);
box-shadow: 0 6px 20px @primary-glow;
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15);
}
&:disabled {
@@ -1201,21 +1188,21 @@ onMounted(() => {
}
&.loading {
background: @primary;
background: var(--color-primary-500);
}
}
.points-hint {
text-align: center;
font-size: 12px;
color: #94a3b8;
margin: 8px 0 0;
font-size: var(--font-size-xs);
color: var(--color-gray-500);
margin: var(--space-2) 0 0;
}
// 结果区域
.result-block {
padding-top: 16px;
border-top: 1px solid @border-subtle;
padding-top: var(--space-4);
border-top: 1px solid var(--color-gray-200);
}
.result-header {
@@ -1226,39 +1213,39 @@ onMounted(() => {
}
.result-title {
font-size: 12px;
font-size: var(--font-size-xs);
font-weight: 500;
color: @text-secondary;
color: var(--color-gray-600);
}
.copy-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: 12px;
color: @text-secondary;
background: @bg-base;
border: 1px solid @border-default;
border-radius: @radius-sm;
gap: var(--space-1);
padding: var(--space-1) 10px;
font-size: var(--font-size-xs);
color: var(--color-gray-600);
background: var(--color-gray-50);
border: 1px solid var(--color-gray-300);
border-radius: var(--radius-base);
cursor: pointer;
transition: all 0.15s;
transition: all var(--duration-fast);
svg { width: 12px; height: 12px; }
&:hover {
color: @text-primary;
border-color: @text-tertiary;
color: var(--color-gray-900);
border-color: var(--color-gray-500);
}
}
.result-content {
padding: 14px;
font-size: 13px;
font-size: var(--font-size-sm);
line-height: 1.7;
color: @text-primary;
background: @bg-base;
border-radius: @radius-sm;
color: var(--color-gray-900);
background: var(--color-gray-50);
border-radius: var(--radius-base);
white-space: pre-wrap;
word-wrap: break-word;
max-height: 240px;
@@ -1266,7 +1253,7 @@ onMounted(() => {
&::-webkit-scrollbar { width: 4px; }
&::-webkit-scrollbar-track { background: transparent; }
&::-webkit-scrollbar-thumb { background: @border-default; border-radius: 2px; }
&::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: 2px; }
}
// 过渡动画