Skip to content

Commit 9ee1bf9

Browse files
Layau-codeLayau-code
committed
style: 优化登录页布局 - 左侧25%宽度,表单居中,全局字体80%
1 parent 8f4d631 commit 9ee1bf9

File tree

3 files changed

+83
-79
lines changed

3 files changed

+83
-79
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,32 @@ jobs:
5858
JWT_SECRET: ${{ secrets.JWT_SECRET }}
5959
REDIS_PASSWORD: ${{ secrets.REDIS_PASSWORD }}
6060

61-
# 7. 部署到服务器
62-
- name: Deploy to Server
61+
# 7. 上传 JAR 包到服务器
62+
- name: Upload JAR to Server
63+
uses: appleboy/[email protected]
64+
with:
65+
host: ${{ secrets.SERVER_HOST }}
66+
port: ${{ secrets.SERVER_PORT }}
67+
username: ${{ secrets.SERVER_USER }}
68+
key: ${{ secrets.SERVER_SSH_KEY }}
69+
source: "target/TinyFlow-0.0.1-SNAPSHOT.jar"
70+
target: "/opt/TinyFlow/"
71+
strip_components: 1
72+
73+
# 8. 上传前端构建产物到服务器
74+
- name: Upload Frontend to Server
75+
uses: appleboy/[email protected]
76+
with:
77+
host: ${{ secrets.SERVER_HOST }}
78+
port: ${{ secrets.SERVER_PORT }}
79+
username: ${{ secrets.SERVER_USER }}
80+
key: ${{ secrets.SERVER_SSH_KEY }}
81+
source: "web/dist/*"
82+
target: "/opt/TinyFlow/web/dist/"
83+
strip_components: 2
84+
85+
# 9. 重启服务
86+
- name: Restart Service
6387
uses: appleboy/[email protected]
6488
env:
6589
APP_DOMAIN: ${{ secrets.APP_DOMAIN }}
@@ -73,56 +97,35 @@ jobs:
7397
key: ${{ secrets.SERVER_SSH_KEY }}
7498
envs: APP_DOMAIN,DB_PASSWORD,JWT_SECRET,REDIS_PASSWORD
7599
script: |
76-
cd /opt/TinyFlow
100+
echo "🚀 开始部署..."
77101
78-
# 拉取最新代码并强制丢弃本地更改（重试机制）
79-
for i in 1 2 3; do
80-
if git fetch origin; then
81-
git reset --hard origin/master
82-
break
83-
else
84-
echo "⚠️ git fetch 失败，第 $i 次重试..."
85-
sleep 2
86-
fi
87-
done
102+
# 复制 JAR 包到运行目录
103+
sudo mkdir -p /opt/tinyflow
104+
sudo cp /opt/TinyFlow/TinyFlow-0.0.1-SNAPSHOT.jar /opt/tinyflow/app.jar
88105
89-
# 更新 systemd 配置文件中的环境变量
106+
# 更新 systemd 环境变量
90107
sudo sed -i "s|Environment=\"APP_DOMAIN=.*\"|Environment=\"APP_DOMAIN=$APP_DOMAIN\"|g" /etc/systemd/system/tinyflow.service
91108
sudo sed -i "s|Environment=\"DB_PASSWORD=.*\"|Environment=\"DB_PASSWORD=$DB_PASSWORD\"|g" /etc/systemd/system/tinyflow.service
92109
sudo sed -i "s|Environment=\"JWT_SECRET=.*\"|Environment=\"JWT_SECRET=$JWT_SECRET\"|g" /etc/systemd/system/tinyflow.service
93110
sudo sed -i "s|Environment=\"REDIS_PASSWORD=.*\"|Environment=\"REDIS_PASSWORD=$REDIS_PASSWORD\"|g" /etc/systemd/system/tinyflow.service
94111
95-
# 重新构建前端
96-
cd web
97-
npm ci --prefer-offline --no-audit
98-
npm run build
99-
100-
# 重新构建后端
101-
cd ..
102-
mvn clean package -DskipTests -q
103-
104-
# 创建目录并复制JAR包到运行目录
105-
sudo mkdir -p /opt/tinyflow
106-
sudo cp target/TinyFlow-0.0.1-SNAPSHOT.jar /opt/tinyflow/app.jar
107-
108-
# 重新加载 systemd 并重启服务
112+
# 重启服务
109113
sudo systemctl daemon-reload
110114
sudo systemctl restart tinyflow
111115
112-
# 等待服务启动（Spring Boot 应用启动较慢，需要更长时间）
113116
echo "⏳ 等待服务启动..."
114117
sleep 10
115118
116119
# 检查服务状态
117120
if ! systemctl is-active --quiet tinyflow; then
118121
echo "❌ 服务未运行，查看日志："
119-
journalctl -u tinyflow -n 100
122+
journalctl -u tinyflow -n 50 --no-pager
120123
exit 1
121124
fi
122125
123126
echo "✅ systemd服务已启动，等待应用完全就绪..."
124127
125-
# 健康检查（重试机制，不强制要求200状态码）
128+
# 健康检查
126129
MAX_RETRY=12
127130
RETRY_COUNT=0
128131
while [ $RETRY_COUNT -lt $MAX_RETRY ]; do
@@ -139,18 +142,15 @@ jobs:
139142
done
140143
141144
echo "❌ 健康检查超时，最后状态码: $HTTP_CODE"
142-
echo "检查服务端口监听状态："
143-
ss -tlnp | grep 8080 || netstat -tlnp | grep 8080 || echo "未找到监听8080端口的进程"
144-
echo "查看服务完整启动日志（包含错误和警告）："
145-
journalctl -u tinyflow -n 200 --no-pager | grep -E "ERROR|WARN|Started TinyFlowApplication|Failed to|Exception" || journalctl -u tinyflow -n 200 --no-pager
145+
journalctl -u tinyflow -n 100 --no-pager | grep -E "ERROR|WARN|Exception" || journalctl -u tinyflow -n 50 --no-pager
146146
exit 1
147147
148-
# 8. 部署失败通知（可选）
148+
# 10. 部署失败通知（可选）
149149
- name: Deployment Failed
150150
if: failure()
151151
run: echo "❌ TinyFlow 部署失败！请检查 GitHub Actions 日志"
152152

153-
# 9. 部署成功通知
153+
# 11. 部署成功通知
154154
- name: Deployment Success
155155
if: success()
156-
run: echo "✅ TinyFlow 部署成功！所有测试已通过，部署完成。"
156+
run: echo "✅ TinyFlow 部署成功！"

‎web/src/pages/LoginPage.vue‎

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<!-- 全屏登录页面 - 飞书风格 -->
33
<div class="min-h-screen w-full flex font-sans">
4-
<!-- 左侧品牌区域 - 25% 宽度（左右比例1:3），渐变背景 -->
5-
<div class="hidden lg:flex flex-col w-1/4 min-w-[360px] relative overflow-hidden bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
4+
<!-- 左侧品牌区域 - 25% 宽度，渐变背景 -->
5+
<div class="hidden lg:flex flex-col w-1/4 min-w-[340px] relative overflow-hidden bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
66
<!-- 装饰性背景元素 -->
77
<div class="absolute inset-0 overflow-hidden">
88
<!-- 主装饰圆 -->
@@ -42,51 +42,51 @@
4242
</div>
4343

4444
<!-- 中间主内容区域 -->
45-
<div class="flex-1 flex flex-col justify-start items-end pt-60">
46-
<!-- 大 Logo + 名称 - 左右并排紧挨 -->
47-
<div class="flex items-center gap-1 mb-4">
48-
<img src="/logo.png" alt="TinyFlow" class="h-10 w-auto flex-shrink-0" />
49-
<span class="text-[55px] font-bold text-gray-800">TinyFlow</span>
45+
<div class="flex-1 flex flex-col justify-start items-start pt-56 px-2">
46+
<!-- 大 Logo + 名称 -->
47+
<div class="flex items-center gap-1 mb-4 w-full justify-end pr-2">
48+
<img src="/logo.png" alt="TinyFlow" class="h-8 w-auto flex-shrink-0" />
49+
<span class="text-[44px] font-bold text-gray-800">TinyFlow</span>
5050
</div>
5151

52-
<!-- 主标语 - 上下结构，上小下大 -->
53-
<div class="mb-20 text-right">
54-
<h2 class="text-[30px] font-semibold text-gray-800 leading-tight">现在注册</h2>
55-
<h2 class="text-[40px] font-bold gradient-text-animated leading-tight">让分享更轻松</h2>
52+
<!-- 主标语 -->
53+
<div class="mb-12 text-right w-full pr-2">
54+
<h2 class="text-[24px] font-semibold text-gray-800 leading-tight">现在注册</h2>
55+
<h2 class="text-[32px] font-bold gradient-text-animated leading-tight">让分享更轻松</h2>
5656
</div>
5757

5858
<!-- 三段卖点 - 简洁线条图标 -->
5959
<div class="space-y-6">
60-
<!-- 卖炵1 -->
60+
<!-- 卖炷1 -->
6161
<div class="flex items-start gap-4">
62-
<svg class="w-6 h-6 text-blue-500 flex-shrink-0 mt-1" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
62+
<svg class="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
6363
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
6464
</svg>
6565
<div>
66-
<div class="text-[16px] font-semibold text-gray-800 mb-2">毫秒级跳转</div>
67-
<div class="text-[15px] text-gray-500 leading-relaxed">基于分布式架构优化，每次跳转均控制在毫秒级，高效不失可靠</div>
66+
<div class="text-[14px] font-semibold text-gray-800 mb-1">毫秒级跳转</div>
67+
<div class="text-[13px] text-gray-500 leading-relaxed">基于分布式架构优化，每次跳转均控制在毫秒级，高效不失可靠</div>
6868
</div>
6969
</div>
7070

71-
<!-- 卖炵2 -->
71+
<!-- 卖炷2 -->
7272
<div class="flex items-start gap-4">
73-
<svg class="w-6 h-6 text-blue-500 flex-shrink-0 mt-1" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
73+
<svg class="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
7474
<path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
7575
</svg>
7676
<div>
77-
<div class="text-[16px] font-semibold text-gray-800 mb-2">实时数据分析</div>
78-
<div class="text-[15px] text-gray-500 leading-relaxed">多维度报表展示来源、设备、地域等数据分布，精准掌握用户特征与趋势</div>
77+
<div class="text-[14px] font-semibold text-gray-800 mb-1">实时数据分析</div>
78+
<div class="text-[13px] text-gray-500 leading-relaxed">多维度报表展示来源、设备、地域等数据分布，精准掌握用户特征与趋势</div>
7979
</div>
8080
</div>
8181

82-
<!-- 卖炵3 -->
82+
<!-- 卖炷3 -->
8383
<div class="flex items-start gap-4">
84-
<svg class="w-6 h-6 text-blue-500 flex-shrink-0 mt-1" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
84+
<svg class="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
8585
<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
8686
</svg>
8787
<div>
88-
<div class="text-[16px] font-semibold text-gray-800 mb-2">安全可靠</div>
89-
<div class="text-[15px] text-gray-500 leading-relaxed">企业级侵入检测与数据加密保护，灵活的权限管理体系，构建深层防御线</div>
88+
<div class="text-[14px] font-semibold text-gray-800 mb-1">安全可靠</div>
89+
<div class="text-[13px] text-gray-500 leading-relaxed">企业级侵入检测与数据加密保护，灵活的权限管理体系，构建深层防御线</div>
9090
</div>
9191
</div>
9292
</div>
@@ -99,24 +99,24 @@
9999
</div>
100100
</div>
101101

102-
<!-- 右侧登录表单区域 - 70% 宽度，白色背景 -->
103-
<div class="flex-1 flex items-center justify-center p-6 md:p-12 bg-white relative">
102+
<!-- 右侧登录表单区域 - 75% 宽度 -->
103+
<div class="flex-1 flex items-start justify-center pt-80 bg-white relative">
104104
<!-- 登录表单容器 -->
105-
<div class="w-full max-w-[480px]">
105+
<div class="w-[360px]">
106106
<!-- 移动端 Logo -->
107107
<div class="lg:hidden flex items-center gap-3 mb-10">
108108
<img src="/logo.png" alt="TinyFlow" class="h-10 w-auto" />
109109
<span class="text-2xl font-bold text-gray-800">TinyFlow</span>
110110
</div>
111111

112112
<!-- 登录卡片 -->
113-
<div class="bg-white rounded-2xl p-8 md:p-10 shadow-xl border border-gray-100">
113+
<div class="bg-white rounded-2xl p-8 md:p-150 shadow-xl border border-gray-100">
114114
<!-- 标题 -->
115-
<div class="mb-8">
116-
<h1 class="text-[22px] font-bold text-gray-900 mb-2">
115+
<div class="mb-6">
116+
<h1 class="text-[18px] font-bold text-gray-900 mb-1">
117117
{{ isLogin ? '欢迎使用 TinyFlow' : '创建新账户' }}
118118
</h1>
119-
<p class="text-[14px] text-gray-500">
119+
<p class="text-[13px] text-gray-500">
120120
{{ isLogin ? '登录以管理您的短链和统计数据' : '注册后即可享受全部功能' }}
121121
</p>
122122
</div>
@@ -125,35 +125,35 @@
125125
<form @submit.prevent="handleSubmit" class="space-y-5">
126126
<!-- 用户名 -->
127127
<div>
128-
<label class="block text-[13px] font-medium text-gray-700 mb-2">用户名</label>
128+
<label class="block text-[12px] font-medium text-gray-700 mb-1.5">用户名</label>
129129
<input
130130
v-model="formData.username"
131131
type="text"
132132
required
133-
class="w-full h-11 px-4 rounded-lg border border-gray-200 text-[14px] transition-all duration-200 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 bg-white hover:border-gray-300"
133+
class="w-full h-10 px-3 rounded-lg border border-gray-200 text-[13px] transition-all duration-200 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 bg-white hover:border-gray-300"
134134
:placeholder="isLogin ? '输入您的用户名' : '设置用户名'"
135135
/>
136136
</div>
137137

138138
<!-- 邮箱（仅注册时显示）-->
139139
<div v-if="!isLogin">
140-
<label class="block text-[13px] font-medium text-gray-700 mb-2">邮箱地址</label>
140+
<label class="block text-[12px] font-medium text-gray-700 mb-1.5">邮箱地址</label>
141141
<input
142142
v-model="formData.email"
143143
type="email"
144-
class="w-full h-11 px-4 rounded-lg border border-gray-200 text-[14px] transition-all duration-200 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 bg-white hover:border-gray-300"
144+
class="w-full h-10 px-3 rounded-lg border border-gray-200 text-[13px] transition-all duration-200 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 bg-white hover:border-gray-300"
145145
placeholder="输入您的邮箱地址（可选）"
146146
/>
147147
</div>
148148

149149
<!-- 密码 -->
150150
<div>
151-
<label class="block text-[13px] font-medium text-gray-700 mb-2">密码</label>
151+
<label class="block text-[12px] font-medium text-gray-700 mb-1.5">密码</label>
152152
<input
153153
v-model="formData.password"
154154
type="password"
155155
required
156-
class="w-full h-11 px-4 rounded-lg border border-gray-200 text-[14px] transition-all duration-200 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 bg-white hover:border-gray-300"
156+
class="w-full h-10 px-3 rounded-lg border border-gray-200 text-[13px] transition-all duration-200 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 bg-white hover:border-gray-300"
157157
:placeholder="isLogin ? '输入您的密码' : '设置密码（至少6位）'"
158158
:minlength="isLogin ? 1 : 6"
159159
/>
@@ -162,7 +162,7 @@
162162
<!-- 错误提示 -->
163163
<div
164164
v-if="error"
165-
class="p-3 rounded-lg text-[13px] bg-red-50 border border-red-100 text-red-600"
165+
class="p-2.5 rounded-lg text-[12px] bg-red-50 border border-red-100 text-red-600"
166166
>
167167
{{ error }}
168168
</div>
@@ -171,24 +171,24 @@
171171
<button
172172
type="submit"
173173
:disabled="loading"
174-
class="w-full h-11 rounded-lg font-semibold text-white text-[14px] transition-all duration-200 hover:opacity-90 disabled:opacity-70 disabled:cursor-not-allowed bg-blue-500 hover:bg-blue-600"
174+
class="w-full h-10 rounded-lg font-semibold text-white text-[13px] transition-all duration-200 hover:opacity-90 disabled:opacity-70 disabled:cursor-not-allowed bg-blue-500 hover:bg-blue-600"
175175
>
176176
{{ loading ? '处理中...' : (isLogin ? '登录' : '创建账户') }}
177177
</button>
178178
</form>
179179

180180
<!-- 跳过登录 -->
181-
<div class="mt-5 text-center">
181+
<div class="mt-4 text-center">
182182
<button
183183
@click="skipLogin"
184-
class="text-[13px] text-gray-400 hover:text-blue-500 transition-colors"
184+
class="text-[12px] text-gray-400 hover:text-blue-500 transition-colors"
185185
>
186186
暂不登录，先看看 →
187187
</button>
188188
</div>
189189

190190
<!-- 底部切换提示 -->
191-
<div class="mt-5 pt-5 border-t border-gray-100 text-center text-[13px] text-gray-500">
191+
<div class="mt-4 pt-4 border-t border-gray-100 text-center text-[12px] text-gray-500">
192192
{{ isLogin ? '还没有账户？' : '已有账户？' }}
193193
<button
194194
@click="isLogin = !isLogin"

‎web/src/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@
3232
--tf-shadow-modal: 0 12px 40px rgba(31, 35, 41, 0.12);
3333
}
3434

35+
html {
36+
font-size: 80%; /* 基础字体调整为80%，布局更紧凑 */
37+
}
38+
3539
html, body {
3640
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
3741
background-color: var(--tf-bg-page);

0 commit comments

Comments
 (0)