更新了AI页和我的页,一级页面都重构完成。

This commit is contained in:
lik
2026-10-04 21:21:50 +08:00
parent 428fb7c52c
commit f542b1dced
26 changed files with 1482 additions and 1141 deletions
+44 -19
View File
@@ -18,31 +18,37 @@
background-color: var(--paper);
}
/* ===== 清空入口(在输入区下方)===== */
/* ===== 辅助入口(在输入区下方:常见问题 + 清空聊天)===== */
/* 空心描边小按钮:2rpx 暖橙描边、无填充。
清空是低频破坏性动作,用"只描边"与输入区右侧那个浅橙底发送键区分开;
两者都是低频辅助动作,用"只描边"与输入区右侧那个浅橙底发送键区分开;
描边在纸面上 4.66:1、文字 6.10:1,均过线。
圆角 20rpx 与输入框、发送键、气泡同档——全页统一为圆角矩形,不再有胶囊
容器是 column,靠 align-self: flex-end 右对齐,不必再套一层行容器 */
.clear-btn {
圆角 20rpx 与输入框、发送键、气泡同档——全页统一为圆角矩形,不再有胶囊。
容器是 column,靠 align-self: flex-end 把整行右对齐 */
.tool-bar {
align-self: flex-end;
display: flex;
align-items: center;
gap: 8rpx;
gap: 16rpx;
flex-shrink: 0;
/* 上 12 贴住输入区,右 32 对齐页面页边距;下不留边距,底部空气统一交给容器 */
margin: 12rpx 32rpx 0;
}
.tool-btn {
display: flex;
align-items: center;
gap: 8rpx;
padding: 10rpx 26rpx;
border-radius: 20rpx;
border: 2rpx solid var(--brand-strong);
transition: transform 0.15s ease;
}
.clear-btn:active {
.tool-btn:active {
transform: scale(0.96);
}
.clear-btn-text {
.tool-btn-text {
font-size: 24rpx;
font-weight: 500;
color: var(--brand-ink);
@@ -64,7 +70,8 @@
display: flex;
flex-direction: column;
align-items: center;
padding: 80rpx 40rpx;
/* 上方留白收小:消息区本身已有 20rpx 内距,这里 80rpx 会显得图标吊得太低 */
padding: 40rpx 40rpx 80rpx;
text-align: center;
}
@@ -81,6 +88,14 @@
border: 2rpx solid var(--brand-line);
}
/* 空态图标改为 ai-ink.png(暖墨线稿的 AI 气泡):与头像区的 home-ink.png 同源,
落在浅橙衬底上仍清晰(暖陶土线稿约 6.8:1)。
88rpx 略大于原 t-icon 的 72rpx,因为该图是满画布的气泡轮廓,缩小会显弱 */
.welcome-icon-img {
width: 88rpx;
height: 88rpx;
}
.welcome-title {
margin-bottom: 12rpx;
font-size: 40rpx;
@@ -95,32 +110,42 @@
color: var(--muted);
}
.quick-questions {
/* 常见问题清单:整块收成一张白卡,行与行之间只用横线分隔、不留间隙。
空会话的欢迎区与会话流里由「常见问题」按钮唤起的清单共用同一套语言——
都是一份"可点的清单",不该一处是散卡、一处才收成块 */
.question-list {
width: 100%;
display: flex;
flex-direction: column;
gap: 20rpx;
background: var(--white);
border: 2rpx solid var(--line);
border-radius: 20rpx;
box-shadow: var(--shadow-card);
/* 裁掉行的直角与点按底色,保住卡片自身的圆角 */
overflow: hidden;
}
/* 常见问题:首页白卡语言 + 右侧 chevron 做点击暗示 */
/* 清单行:文字 + 右侧 chevron 做点击暗示 */
.quick-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16rpx;
padding: 28rpx 28rpx 28rpx 32rpx;
background: var(--white);
border: 2rpx solid var(--line);
border-radius: 20rpx;
box-shadow: var(--shadow-card);
padding: 26rpx 28rpx;
font-size: 28rpx;
color: var(--ink-2);
text-align: left;
transition: transform 0.15s ease;
transition: background 0.15s ease;
}
/* 行分隔线用 --sep(比 --line 深一档,白面上才看得见) */
.quick-item + .quick-item {
border-top: 2rpx solid var(--sep);
}
/* 行嵌在整块里,不能像独立卡那样整体缩放(会撕裂分隔线),
点按反馈改由底色承担 */
.quick-item:active {
transform: scale(0.98);
background: var(--brand-soft);
}