Skip to content
This repository was archived by the owner on May 29, 2026. It is now read-only.

Commit ecc5c6a

Browse files
InneiInnei
committed
style: enhance responsive design for task components
- Updated styles in AiTaskQueue and TaskQueuePanel components to improve responsiveness on mobile devices. - Adjusted padding, font sizes, and dimensions for various elements to ensure a better user experience across different screen sizes. These changes aim to enhance the usability and visual consistency of the task management interface on mobile devices. Signed-off-by: Innei <tukon479@gmail.com>
1 parent d99b3c7 commit ecc5c6a

2 files changed

Lines changed: 26 additions & 22 deletions

File tree

‎src/components/ai-task-queue/AiTaskQueue.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -89,11 +89,11 @@ const TaskItem = defineComponent({
8989

9090
return (
9191
<div
92-
class="group flex items-center gap-3 border-b border-neutral-100 px-1 dark:border-neutral-800"
92+
class="phone:gap-2 group flex items-center gap-3 border-b border-neutral-100 px-1 dark:border-neutral-800"
9393
style={{ height: `${ITEM_HEIGHT}px` }}
9494
>
9595
{/* Status Icon */}
96-
<div class="flex size-8 shrink-0 items-center justify-center rounded-full bg-neutral-50 dark:bg-neutral-800">
96+
<div class="phone:size-7 flex size-8 shrink-0 items-center justify-center rounded-full bg-neutral-50 dark:bg-neutral-800">
9797
{getStatusIcon()}
9898
</div>
9999

@@ -102,7 +102,7 @@ const TaskItem = defineComponent({
102102
<div class="flex items-center gap-2">
103103
<span
104104
class={[
105-
'truncate text-sm font-medium',
105+
'phone:text-xs truncate text-sm font-medium',
106106
isFailed
107107
? 'text-red-600 dark:text-red-400'
108108
: 'text-neutral-800 dark:text-neutral-100',
@@ -112,13 +112,15 @@ const TaskItem = defineComponent({
112112
{task.label}
113113
</span>
114114
</div>
115-
<div class="mt-0.5 flex h-5 items-center gap-2">
115+
<div class="phone:h-4 phone:gap-1.5 mt-0.5 flex h-5 items-center gap-2">
116116
<span class="shrink-0 text-xs text-neutral-400">
117117
{TaskTypeLabels[task.type] || task.type}
118118
</span>
119119
{isRunning && progressInfo && (
120120
<>
121-
<span class="text-neutral-300 dark:text-neutral-600">·</span>
121+
<span class="phone:hidden text-neutral-300 dark:text-neutral-600">
122+
·
123+
</span>
122124
<span class="text-xs text-blue-500">{progressInfo.text}</span>
123125
</>
124126
)}
@@ -127,17 +129,19 @@ const TaskItem = defineComponent({
127129
task.tokensGenerated !== undefined &&
128130
task.tokensGenerated > 0 && (
129131
<>
130-
<span class="text-neutral-300 dark:text-neutral-600">
132+
<span class="phone:hidden text-neutral-300 dark:text-neutral-600">
131133
·
132134
</span>
133-
<span class="text-xs tabular-nums text-blue-500">
135+
<span class="phone:hidden text-xs tabular-nums text-blue-500">
134136
{task.tokensGenerated} tokens
135137
</span>
136138
</>
137139
)}
138140
{isFailed && task.error && (
139141
<>
140-
<span class="text-neutral-300 dark:text-neutral-600">·</span>
142+
<span class="phone:hidden text-neutral-300 dark:text-neutral-600">
143+
·
144+
</span>
141145
<span
142146
class="truncate text-xs text-red-500"
143147
title={task.error}
@@ -151,7 +155,7 @@ const TaskItem = defineComponent({
151155

152156
{/* Progress bar for running tasks */}
153157
{isRunning && progressInfo && (
154-
<div class="w-16 shrink-0">
158+
<div class="phone:w-12 w-16 shrink-0">
155159
<NProgress
156160
type="line"
157161
percentage={progressInfo.percent}
@@ -165,11 +169,11 @@ const TaskItem = defineComponent({
165169
{/* Retry button */}
166170
{canRetry && (
167171
<button
168-
class="shrink-0 rounded-md p-1.5 text-neutral-400 opacity-0 transition-all hover:bg-neutral-100 hover:text-neutral-600 group-hover:opacity-100 dark:hover:bg-neutral-700 dark:hover:text-neutral-300"
172+
class="phone:opacity-100 phone:p-1 shrink-0 rounded-md p-1.5 text-neutral-400 opacity-0 transition-all hover:bg-neutral-100 hover:text-neutral-600 group-hover:opacity-100 dark:hover:bg-neutral-700 dark:hover:text-neutral-300"
169173
onClick={() => props.onRetry?.(task.id)}
170174
title="重试"
171175
>
172-
<RefreshCw class="size-4" />
176+
<RefreshCw class="phone:size-3.5 size-4" />
173177
</button>
174178
)}
175179
</div>
@@ -271,7 +275,7 @@ export const AiTaskQueue = defineComponent({
271275
),
272276
footer: () =>
273277
!isProcessing && tasks.length > 0 ? (
274-
<div class="flex items-center justify-between border-t border-neutral-100 px-4 py-2.5 text-xs dark:border-neutral-800">
278+
<div class="phone:px-3 phone:py-2 flex items-center justify-between border-t border-neutral-100 px-4 py-2.5 text-xs dark:border-neutral-800">
275279
<div class="text-neutral-400">
276280
{completedCount > 0 && (
277281
<span class="text-green-600 dark:text-green-400">

‎src/components/task-queue-panel/TaskQueuePanel.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -110,18 +110,18 @@ export const TaskQueuePanel = defineComponent({
110110
leaveToClass="opacity-0 translate-y-4"
111111
>
112112
{props.visible && props.tasks.length > 0 && (
113-
<div class="fixed bottom-4 right-4 z-50 w-[500px]">
114-
<div class="overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-xl dark:border-neutral-700 dark:bg-neutral-900">
113+
<div class="phone:bottom-0 phone:left-0 phone:right-0 phone:w-full phone:shadow-[0_-4px_16px_rgba(0,0,0,0.08)] dark:phone:shadow-[0_-4px_16px_rgba(0,0,0,0.3)] fixed bottom-4 right-4 z-50 w-[500px]">
114+
<div class="phone:rounded-b-none phone:border-x-0 phone:border-b-0 phone:shadow-none overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-xl dark:border-neutral-700 dark:bg-neutral-900">
115115
{/* Header */}
116116
<div
117-
class="flex cursor-pointer select-none items-center justify-between px-4 py-3"
117+
class="phone:px-3 phone:py-2.5 flex cursor-pointer select-none items-center justify-between px-4 py-3"
118118
onClick={toggleCollapse}
119119
>
120-
<div class="flex items-center gap-2.5">
121-
<div class="flex size-6 items-center justify-center rounded-md bg-neutral-100 dark:bg-neutral-800">
120+
<div class="phone:gap-2 flex items-center gap-2.5">
121+
<div class="phone:size-5 flex size-6 items-center justify-center rounded-md bg-neutral-100 dark:bg-neutral-800">
122122
{slots.icon?.()}
123123
</div>
124-
<span class="text-sm font-medium text-neutral-900 dark:text-neutral-100">
124+
<span class="phone:text-xs text-sm font-medium text-neutral-900 dark:text-neutral-100">
125125
{slots.title?.()}
126126
</span>
127127
</div>
@@ -135,9 +135,9 @@ export const TaskQueuePanel = defineComponent({
135135
title={collapsed.value ? '展开' : '折叠'}
136136
>
137137
{collapsed.value ? (
138-
<ChevronUp class="size-4" />
138+
<ChevronUp class="phone:size-3.5 size-4" />
139139
) : (
140-
<ChevronDown class="size-4" />
140+
<ChevronDown class="phone:size-3.5 size-4" />
141141
)}
142142
</button>
143143
{(props.showCloseWhenProcessing || !props.isProcessing) && (
@@ -149,7 +149,7 @@ export const TaskQueuePanel = defineComponent({
149149
}}
150150
title={props.closeTitle}
151151
>
152-
<X class="size-4" />
152+
<X class="phone:size-3.5 size-4" />
153153
</button>
154154
)}
155155
</div>
@@ -167,7 +167,7 @@ export const TaskQueuePanel = defineComponent({
167167
>
168168
{!collapsed.value && (
169169
<div class="overflow-hidden border-t border-neutral-100 dark:border-neutral-800">
170-
<div class="h-[600px] overflow-y-auto px-4 py-2">
170+
<div class="phone:h-[50vh] phone:px-3 phone:py-1.5 h-[600px] overflow-y-auto px-4 py-2">
171171
<TransitionGroup
172172
moveClass="transition-all duration-200"
173173
enterActiveClass="transition-all duration-200"

0 commit comments

Comments
 (0)