山东大学软件学院2026项目实训-个人博客（六）
前言
本次的主要工作聚焦于短篇小说创作前端界面的优化与部分功能改进
一、整体UI视觉优化方案
1. 设计规范统一
色彩体系主色选用清爽蓝色
#409eff，作为按钮、边框、图标主色，契合创作类工具清新、专业的定位；中性色采用浅灰分层，区分背景、文本、边框，红色仅用于退出、警示类操作。圆角与阴影统一卡片、输入框、按钮圆角为
6px~10px，告别生硬直角；搭配轻量级投影，营造卡片悬浮层次感，符合现代后台 UI 风格。间距标准化全局使用
8px/12px/16px/24px倍数间距，表单、模块、内边距规整统一，告别杂乱留白。
2. 细节体验升级
图标赋能为每个表单项搭配语义化 SVG 图标，降低用户理解成本，页面更精致；
表单交互输入框、下拉框添加
focus聚焦高亮 + 外发光效果，明确当前操作区域；按钮动效所有按钮增加 hover 颜色渐变、轻微上浮动画，强化点击反馈；
空状态优化美化占位图标、补充引导按钮，引导用户下一步操作，减少空白页面的迷茫感。
3. 全局过渡动画
给可交互元素添加transition过渡，让颜色、位移变化更加顺滑，提升整体质感。
给出优化完成后的整体界面效果如下：
二、核心问题解决
1. 问题根因分析
外层容器main-container使用display: flex横向布局，默认align-items: stretch。 该属性作用：所有 Flex 子元素高度强制拉平为最高元素高度。 流程：左侧文本框拉高 → 左侧卡片高度变大 → Flex 规则强制中、右侧卡片同步拉高 → 内部垂直居中的图标整体下移。
2. 分步解决方案（关键 CSS 代码）
（1）解除三栏等高绑定（核心代码）
修改外层 Flex 对齐方式，取消自动拉伸：
.main-container { display: flex; gap: 24px; /* 关键：顶部对齐，三栏高度互相独立 */ align-items: flex-start; }（2）设置卡片最小高度，防止布局塌陷
为中间、右侧功能卡片设置min-height，保证页面基础框架稳定，不会因内容过少收缩变形
.middle-card { flex: 1; min-height: 640px; } .right-card { width: 320px; flex-shrink: 0; min-height: 640px; }（3）重构空状态居中逻辑
放弃使用justify-content: center整体垂直居中，改用固定顶部外边距：
.empty-box { margin-top: 120px; /* 固定距离顶部距离 */ display: flex; flex-direction: column; align-items: center; }（4）限制文本框最大拉伸高度
避免左侧文本域无限拉长，破坏整体页面布局：
.form-textarea { max-height: 340px; /* 限制最大高度 */ resize: vertical; /* 仅允许上下拉伸 */ }三、整体效果
1. 布局与交互层面
修复「拖动文本框，右侧图标联动偏移」的经典 Flex 布局问题；
2. 视觉体验层面
统一 UI 设计规范，配色、圆角、阴影、间距风格统一，页面现代感；
丰富图标、焦点、hover 交互，操作反馈清晰，易用性提升；
空状态引导更人性化，降低新手使用门槛。
四、心得体会
1、Flex 布局是把双刃剑
align-items: stretch是默认特性，在多栏卡片布局中极易引发高度联动问题，多栏独立模块优先使用align-items: flex-start/center。
2、界面优化优先
面向已有功能的重构，优先修改 CSS、视图层，尽量不改动 Vue 逻辑与接口，降低风险。
3、细节决定体验
圆角、阴影、动效、图标、留白这些小细节，累加起来就是用户能直观感受到的「好用、好看」。