Skip to content

Commit 6f848d0

Browse files
LiuYuYang01LiuYuYang01
committed
feat: 优化图片上传和展示功能
- 在 create_record 页面中增加图片容器样式，支持不同布局。 - 调整图片预览逻辑，优化三图布局的展示效果。 - 规范化输入框的换行格式，提升代码可读性。
1 parent fefe0c9 commit 6f848d0

File tree

2 files changed

+90
-45
lines changed

2 files changed

+90
-45
lines changed

‎src/pages/create_record/index.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,20 @@
22
.ant-input:focus {
33
box-shadow: none !important;
44
}
5+
6+
.image-container {
7+
&.aspect-square {
8+
position: relative;
9+
overflow: hidden;
10+
11+
.ant-image-img {
12+
object-fit: cover;
13+
width: 100%;
14+
height: 100%;
15+
min-width: 100%;
16+
min-height: 100%;
17+
display: block;
18+
}
19+
}
20+
}
521
}

‎src/pages/create_record/index.tsx‎

Lines changed: 74 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,9 @@ export default () => {
8686
<Input
8787
className="mt-4"
8888
placeholder="https://example.com/image.png"
89-
onChange={(e) => { inputUrl = e.target.value; }}
89+
onChange={(e) => {
90+
inputUrl = e.target.value;
91+
}}
9092
/>
9193
),
9294
okText: '添加',
@@ -128,42 +130,26 @@ export default () => {
128130
<div className="create_record_page min-h-screen p-4 md:p-6 lg:p-10 transition-colors duration-300">
129131
<div className="max-w-3xl mx-auto space-y-6">
130132
<Spin spinning={loading} indicator={<RiLoader4Line className="text-3xl animate-spin text-blue-500" />}>
131-
132133
{/* 主编辑器卡片 */}
133134
<div className="bg-white dark:bg-gray-800 rounded-3xl shadow-xl shadow-gray-200/50 dark:shadow-black/20 overflow-hidden border dark:border-gray-700 transition-all duration-300 hover:shadow-2xl">
134-
135135
<div className="p-3 md:p-6">
136-
<Input.TextArea
137-
value={content}
138-
onChange={(e) => setContent(e.target.value)}
139-
placeholder="此刻你在想什么？..."
140-
autoSize={{ minRows: 6, maxRows: 15 }}
141-
variant="filled"
142-
className="!p-4 text-lg md:text-xl text-gray-700 dark:text-gray-200 placeholder:text-gray-300 dark:placeholder:text-gray-600 px-0 resize-none !bg-transparent dark:!bg-transparent !border-none !shadow-none focus:shadow-none"
143-
/>
136+
<Input.TextArea value={content} onChange={(e) => setContent(e.target.value)} placeholder="此刻你在想什么？..." autoSize={{ minRows: 6, maxRows: 15 }} variant="filled" className="!p-4 text-lg md:text-xl text-gray-700 dark:text-gray-200 placeholder:text-gray-300 dark:placeholder:text-gray-600 px-0 resize-none !bg-transparent dark:!bg-transparent !border-none !shadow-none focus:shadow-none" />
144137
</div>
145138

146139
{/* 图片预览网格区*/}
147140
{imageList.length > 0 && (
148141
<div className="px-6 md:px-8 pb-6 animate-fade-in">
149-
<div className={`grid gap-4 ${imageList.length === 1 ? 'grid-cols-1' : 'grid-cols-2 md:grid-cols-4'}`}>
150-
{imageList.map((item, index) => (
151-
<div key={index} className="group relative aspect-square rounded-2xl overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-100 dark:border-gray-600">
152-
153-
{/* 图片主体 */}
154-
<Image
155-
src={item}
156-
className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-110"
157-
wrapperClassName="w-full h-full"
158-
/>
159-
160-
{/* 删除遮罩层 */}
142+
{imageList.length === 3 ? (
143+
// 微信朋友圈风格的三图布局：左大右小双排
144+
<div className="grid grid-cols-3 gap-2">
145+
<div key={0} className="group relative aspect-auto col-span-2 row-span-1 rounded-2xl overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-100 dark:border-gray-600 flex items-center justify-center image-container">
146+
<Image src={imageList[0]} className="object-cover w-full h-full min-w-full min-h-full transition-transform duration-500 group-hover:scale-110" wrapperClassName="w-full h-full" preview={true} />
161147
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
162148
<Tooltip title="移除图片">
163149
<button
164150
onClick={(e) => {
165151
e.stopPropagation();
166-
handleDelImage(item);
152+
handleDelImage(imageList[0]);
167153
}}
168154
className="bg-white/20 hover:bg-red-500 text-white p-2.5 rounded-full backdrop-blur-md transition-all duration-200 transform scale-90 group-hover:scale-100 hover:rotate-90"
169155
>
@@ -172,43 +158,86 @@ export default () => {
172158
</Tooltip>
173159
</div>
174160
</div>
175-
))}
176-
</div>
161+
<div className="space-y-4">
162+
<div key={1} className="group relative aspect-square rounded-2xl overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-100 dark:border-gray-600 flex items-center justify-center image-container">
163+
<Image src={imageList[1]} className="object-cover w-full h-full min-w-full min-h-full transition-transform duration-500 group-hover:scale-110" wrapperClassName="w-full h-full" preview={true} />
164+
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
165+
<Tooltip title="移除图片">
166+
<button
167+
onClick={(e) => {
168+
e.stopPropagation();
169+
handleDelImage(imageList[1]);
170+
}}
171+
className="bg-white/20 hover:bg-red-500 text-white p-2.5 rounded-full backdrop-blur-md transition-all duration-200 transform scale-90 group-hover:scale-100 hover:rotate-90"
172+
>
173+
<RiDeleteBinLine size={20} />
174+
</button>
175+
</Tooltip>
176+
</div>
177+
</div>
178+
<div key={2} className="group relative aspect-square rounded-2xl overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-100 dark:border-gray-600 flex items-center justify-center image-container">
179+
<Image src={imageList[2]} className="object-cover w-full h-full min-w-full min-h-full transition-transform duration-500 group-hover:scale-110" wrapperClassName="w-full h-full" preview={true} />
180+
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
181+
<Tooltip title="移除图片">
182+
<button
183+
onClick={(e) => {
184+
e.stopPropagation();
185+
handleDelImage(imageList[2]);
186+
}}
187+
className="bg-white/20 hover:bg-red-500 text-white p-2.5 rounded-full backdrop-blur-md transition-all duration-200 transform scale-90 group-hover:scale-100 hover:rotate-90"
188+
>
189+
<RiDeleteBinLine size={20} />
190+
</button>
191+
</Tooltip>
192+
</div>
193+
</div>
194+
</div>
195+
</div>
196+
) : (
197+
<div className={`grid gap-4 ${imageList.length === 1 ? 'grid-cols-1' : imageList.length === 2 ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-4'}`}>
198+
{imageList.map((item, index) => (
199+
<div key={index} className="group relative aspect-square rounded-2xl overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-100 dark:border-gray-600 flex items-center justify-center image-container">
200+
{/* 图片主体 */}
201+
<Image src={item} className="object-cover w-full h-full min-w-full min-h-full transition-transform duration-500 group-hover:scale-110" wrapperClassName="w-full h-full" preview={true} />
202+
203+
{/* 删除遮罩层 */}
204+
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
205+
<Tooltip title="移除图片">
206+
<button
207+
onClick={(e) => {
208+
e.stopPropagation();
209+
handleDelImage(item);
210+
}}
211+
className="bg-white/20 hover:bg-red-500 text-white p-2.5 rounded-full backdrop-blur-md transition-all duration-200 transform scale-90 group-hover:scale-100 hover:rotate-90"
212+
>
213+
<RiDeleteBinLine size={20} />
214+
</button>
215+
</Tooltip>
216+
</div>
217+
</div>
218+
))}
219+
</div>
220+
)}
177221
</div>
178222
)}
179223

180224
{/* 底部工具栏 */}
181225
<div className="bg-gray-50/80 dark:bg-gray-700/30 backdrop-blur-sm px-6 py-4 flex items-center justify-between border-t border-gray-100 dark:border-gray-700">
182-
183226
{/* 左侧：功能按钮 */}
184227
<div className="flex items-center space-x-2">
185228
<Dropdown menu={dropdownItems} placement="topLeft" trigger={['click']}>
186-
<Button
187-
type="text"
188-
icon={<LuImagePlus size={22} />}
189-
className="flex items-center text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 bg-transparent hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-xl h-12 px-4 border-none transition-all"
190-
>
229+
<Button type="text" icon={<LuImagePlus size={22} />} className="flex items-center text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 bg-transparent hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-xl h-12 px-4 border-none transition-all">
191230
<span className="ml-1 hidden sm:inline">添加图片</span>
192-
<span className="ml-1 text-xs bg-gray-200 dark:bg-gray-600 px-1.5 py-0.5 rounded-md text-gray-500 dark:text-gray-300">
193-
{imageList.length}/4
194-
</span>
231+
<span className="ml-1 text-xs bg-gray-200 dark:bg-gray-600 px-1.5 py-0.5 rounded-md text-gray-500 dark:text-gray-300">{imageList.length}/4</span>
195232
</Button>
196233
</Dropdown>
197234
</div>
198235

199236
{/* 右侧：提交按钮 */}
200-
<Button
201-
type="primary"
202-
size="large"
203-
onClick={onSubmit}
204-
loading={loading}
205-
icon={!loading && <BiLogoTelegram size={20} />}
206-
className="h-12 px-5 rounded-xl bg-blue-400 hover:bg-blue-500 shadow-lg shadow-blue-500/30 border-none font-medium text-base flex items-center gap-2 transition-all hover:-translate-y-0.5"
207-
>
237+
<Button type="primary" size="large" onClick={onSubmit} loading={loading} icon={!loading && <BiLogoTelegram size={20} />} className="h-12 px-5 rounded-xl bg-blue-400 hover:bg-blue-500 shadow-lg shadow-blue-500/30 border-none font-medium text-base flex items-center gap-2 transition-all hover:-translate-y-0.5">
208238
{id ? '更新' : '发布'}
209239
</Button>
210240
</div>
211-
212241
</div>
213242
</Spin>
214243
</div>
@@ -224,4 +253,4 @@ export default () => {
224253
/>
225254
</div>
226255
);
227-
};
256+
};

0 commit comments

Comments
 (0)