前言本次的主要工作聚焦于短篇小说创作前端界面的优化与部分功能改进一、整体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、细节决定体验圆角、阴影、动效、图标、留白这些小细节累加起来就是用户能直观感受到的「好用、好看」。
山东大学软件学院2026项目实训-个人博客（六）
发布时间：2026/6/13 12:18:15
前言本次的主要工作聚焦于短篇小说创作前端界面的优化与部分功能改进一、整体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、细节决定体验圆角、阴影、动效、图标、留白这些小细节累加起来就是用户能直观感受到的「好用、好看」。
的演进与通信机制)
