jlocal/jingrow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update default tool styling

Browse Source
This commit is contained in:
jingrow 2025-11-21 10:30:11 +08:00
parent 51cf09b125
commit 366c654e9e
2 changed files with 43 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/jingrow/frontend/src/shared/stores/tools.ts
View File

@ -29,7 +29,7 @@ function getDefaultTools(): Tool[] {
description: t('Remove background from images using AI technology'), description: t('Remove background from images using AI technology'),
category: 'Image Processing', category: 'Image Processing',
icon: 'photo-edit', icon: 'photo-edit',
color: '#1fc76f', color: '#e5e7eb',
type: 'route', type: 'route',
routeName: 'RemoveBackground', routeName: 'RemoveBackground',
order: 1, order: 1,
@ -42,7 +42,7 @@ function getDefaultTools(): Tool[] {
// description: t('Tool description'), // description: t('Tool description'),
// category: 'Category', // category: 'Category',
// icon: 'icon-name', // icon: 'icon-name',
// color: '#1fc76f', // color: '#e5e7eb',
// type: 'route', // type: 'route',
// routeName: 'RouteName', // routeName: 'RouteName',
// order: 2, // order: 2,

51
apps/jingrow/frontend/src/views/tools/Tools.vue
View File

@ -37,10 +37,16 @@
@dragend="handleDragEnd" @dragend="handleDragEnd"
> >
<div class="tool-card-content" @click="handleOpenTool(tool)"> <div class="tool-card-content" @click="handleOpenTool(tool)">
<div class="tool-icon" :style="{ backgroundColor: tool.color || '#1fc76f' }"> <div
<DynamicIcon :name="tool.icon || 'tool'" :size="32" color="white" /> class="tool-icon"
:class="{ 'default-tool-icon': tool.isDefault }"
:style="tool.isDefault
? { borderColor: tool.color || '#e5e7eb' }
: { backgroundColor: tool.color || '#1fc76f' }"
>
<DynamicIcon :name="tool.icon || 'tool'" :size="32" :color="tool.isDefault ? '#64748b' : 'white'" />
</div> </div>
<div class="tool-name">{{ tool.name }}</div> <div class="tool-name" :class="{ 'default-tool-name': tool.isDefault }">{{ tool.name }}</div>
</div> </div>
<n-dropdown <n-dropdown
trigger="click" trigger="click"
@ -73,8 +79,14 @@
class="hidden-tool-item" class="hidden-tool-item"
@click="handleShowDefaultTool(tool.id)" @click="handleShowDefaultTool(tool.id)"
> >
<div class="hidden-tool-icon" :style="{ backgroundColor: tool.color || '#1fc76f' }"> <div
<DynamicIcon :name="tool.icon || 'tool'" :size="24" color="white" /> class="hidden-tool-icon"
:class="{ 'default-tool-icon': tool.isDefault }"
:style="tool.isDefault
? { borderColor: tool.color || '#e5e7eb' }
: { backgroundColor: tool.color || '#1fc76f' }"
>
<DynamicIcon :name="tool.icon || 'tool'" :size="24" :color="tool.isDefault ? '#64748b' : 'white'" />
</div> </div>
<div class="hidden-tool-name">{{ tool.name }}</div> <div class="hidden-tool-name">{{ tool.name }}</div>
<button class="show-tool-btn" @click.stop="handleShowDefaultTool(tool.id)"> <button class="show-tool-btn" @click.stop="handleShowDefaultTool(tool.id)">
@ -722,12 +734,11 @@ function handleMenuSelect(key: string, tool: Tool) {
background: white; background: white;
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: grab; cursor: grab;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border: 1px solid #e5e7eb; border: none;
aspect-ratio: 1; aspect-ratio: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -736,18 +747,15 @@ function handleMenuSelect(key: string, tool: Tool) {
.tool-card:hover { .tool-card:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-color: #1fc76f;
} }
.tool-card.dragging { .tool-card.dragging {
opacity: 0.5; opacity: 0.5;
transform: scale(0.95); transform: scale(0.95);
cursor: grabbing; cursor: grabbing;
border-color: #1fc76f;
} }
.tool-card.drag-over { .tool-card.drag-over {
border-color: #1fc76f;
box-shadow: 0 0 0 2px rgba(31, 199, 111, 0.1); box-shadow: 0 0 0 2px rgba(31, 199, 111, 0.1);
} }
@ -772,6 +780,12 @@ function handleMenuSelect(key: string, tool: Tool) {
transition: transform 0.2s; transition: transform 0.2s;
} }
.tool-icon.default-tool-icon {
background-color: transparent;
border: 1.5px solid;
box-shadow: none;
}
.tool-card:hover .tool-icon { .tool-card:hover .tool-icon {
transform: scale(1.05); transform: scale(1.05);
} }
@ -785,6 +799,10 @@ function handleMenuSelect(key: string, tool: Tool) {
word-break: break-word; word-break: break-word;
} }
.tool-name.default-tool-name {
color: #64748b;
}
.tool-menu-trigger { .tool-menu-trigger {
position: absolute; position: absolute;
top: 8px; top: 8px;
@ -800,6 +818,13 @@ function handleMenuSelect(key: string, tool: Tool) {
transition: all 0.2s; transition: all 0.2s;
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
}
.tool-card:hover .tool-menu-trigger {
opacity: 1;
pointer-events: auto;
} }
.tool-menu-trigger:hover { .tool-menu-trigger:hover {
@ -885,6 +910,12 @@ function handleMenuSelect(key: string, tool: Tool) {
flex-shrink: 0; flex-shrink: 0;
} }
.hidden-tool-icon.default-tool-icon {
background-color: transparent;
border: 1.5px solid;
box-shadow: none;
}
.hidden-tool-name { .hidden-tool-name {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;