18ba36a539
- 目录重命名：Dashboard → Center（匹配路由 /home/center） - 删除遗留代码：Default.js、InvestmentPlansAndReviews.js、InvestmentCalendarChakra.js（共 2596 行） - 创建 src/types/center.ts 类型定义（15+ 接口） - 性能优化： - 创建 useCenterColors Hook 封装 7 个 useColorModeValue - 创建 utils/formatters.ts 提取纯函数 - 修复 loadRealtimeQuotes 的 useCallback 依赖项 - InvestmentPlanningCenter 添加 useMemo 缓存 - TypeScript 迁移：Center.js → Center.tsx 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
199 lines
3.9 KiB
Plaintext
199 lines
3.9 KiB
Plaintext
/* EventFormModal.less - 投资计划/复盘弹窗响应式样式 */
|
|
|
|
// ==================== 变量定义 ====================
|
|
@mobile-breakpoint: 768px;
|
|
@modal-border-radius-mobile: 12px;
|
|
@modal-border-radius-desktop: 8px;
|
|
|
|
// 间距
|
|
@spacing-xs: 4px;
|
|
@spacing-sm: 8px;
|
|
@spacing-md: 12px;
|
|
@spacing-lg: 16px;
|
|
@spacing-xl: 20px;
|
|
@spacing-xxl: 24px;
|
|
|
|
// 字体大小
|
|
@font-size-xs: 12px;
|
|
@font-size-sm: 14px;
|
|
@font-size-md: 16px;
|
|
|
|
// 颜色
|
|
@color-border: #f0f0f0;
|
|
@color-text-secondary: #999;
|
|
@color-error: #ff4d4f;
|
|
|
|
// ==================== 主样式 ====================
|
|
.event-form-modal {
|
|
// Modal 整体
|
|
.ant-modal-content {
|
|
border-radius: @modal-border-radius-desktop;
|
|
}
|
|
|
|
// Modal 标题放大加粗
|
|
.ant-modal-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ant-modal-body {
|
|
padding: @spacing-xxl;
|
|
padding-top: 36px; // 增加标题与表单间距
|
|
}
|
|
|
|
.ant-form-item {
|
|
margin-bottom: @spacing-xl;
|
|
}
|
|
|
|
// 表单标签加粗，左对齐
|
|
.ant-form-item-label {
|
|
text-align: left !important;
|
|
|
|
> label {
|
|
font-weight: 600 !important;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
// 字符计数样式
|
|
.ant-input-textarea-show-count::after {
|
|
font-size: @font-size-xs;
|
|
color: @color-text-secondary;
|
|
}
|
|
|
|
// 日期选择器全宽
|
|
.ant-picker {
|
|
width: 100%;
|
|
}
|
|
|
|
// 股票标签样式
|
|
.ant-tag {
|
|
margin: 2px;
|
|
border-radius: @spacing-xs;
|
|
}
|
|
|
|
// 模板按钮组
|
|
.template-buttons {
|
|
.ant-btn {
|
|
font-size: @font-size-xs;
|
|
}
|
|
}
|
|
|
|
// 底部操作栏布局
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
// 加载状态
|
|
.ant-btn-loading {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
// 错误状态动画
|
|
.ant-form-item-has-error {
|
|
.ant-input,
|
|
.ant-picker,
|
|
.ant-select-selector {
|
|
animation: shake 0.3s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ==================== 移动端适配 ====================
|
|
@media (max-width: @mobile-breakpoint) {
|
|
.event-form-modal {
|
|
// Modal 整体尺寸
|
|
.ant-modal {
|
|
width: calc(100vw - 32px) !important;
|
|
max-width: 100% !important;
|
|
margin: @spacing-lg auto;
|
|
top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.ant-modal-content {
|
|
max-height: calc(100vh - 32px);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: @modal-border-radius-mobile;
|
|
}
|
|
|
|
// Modal 头部
|
|
.ant-modal-header {
|
|
padding: @spacing-md @spacing-lg;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ant-modal-title {
|
|
font-size: @font-size-md;
|
|
}
|
|
|
|
// Modal 内容区域
|
|
.ant-modal-body {
|
|
padding: @spacing-lg;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
// Modal 底部
|
|
.ant-modal-footer {
|
|
padding: @spacing-md @spacing-lg;
|
|
flex-shrink: 0;
|
|
border-top: 1px solid @color-border;
|
|
}
|
|
|
|
// 表单项间距
|
|
.ant-form-item {
|
|
margin-bottom: @spacing-lg;
|
|
}
|
|
|
|
// 表单标签
|
|
.ant-form-item-label > label {
|
|
font-size: @font-size-sm;
|
|
height: auto;
|
|
}
|
|
|
|
// 输入框字体 - iOS 防止缩放需要 16px
|
|
.ant-input,
|
|
.ant-picker-input > input,
|
|
.ant-select-selection-search-input {
|
|
font-size: @font-size-md !important;
|
|
}
|
|
|
|
// 文本域高度
|
|
.ant-input-textarea textarea {
|
|
font-size: @font-size-md !important;
|
|
min-height: 120px;
|
|
}
|
|
|
|
// 模板按钮组
|
|
.template-buttons .ant-btn {
|
|
font-size: @font-size-xs;
|
|
padding: 2px @spacing-sm;
|
|
height: 26px;
|
|
}
|
|
|
|
// 股票选择器
|
|
.ant-select-selector {
|
|
min-height: 40px !important;
|
|
}
|
|
|
|
// 底部按钮
|
|
.ant-modal-footer .ant-btn {
|
|
font-size: @font-size-md;
|
|
height: 40px;
|
|
border-radius: @spacing-sm;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ==================== 动画 ====================
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-4px); }
|
|
75% { transform: translateX(4px); }
|
|
}
|