vue/jingrowtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

常用颜色增加到36个

Browse Source
This commit is contained in:
jingrow 2026-01-21 18:07:18 +08:00
parent 27b7d65e45
commit e863545074
2 changed files with 108 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/locales/zh-CN.json
View File

@ -1115,7 +1115,7 @@
"Background Color": "背景颜色",
"Add to favorites": "添加到收藏",
"Remove from favorites": "从收藏中移除",
"Favorite Colors": "收藏颜色",
"Favorite Colors": "收藏的颜色",
"Color already in favorites": "颜色已在收藏中",
"Maximum 12 favorite colors allowed. Please remove one first.": "最多允许12个收藏颜色，请先移除一个",
"Color added to favorites": "颜色已添加到收藏",

157
src/views/tools/add_background/add_background.vue
View File

@ -161,17 +161,7 @@
<div v-if="uploadedImage" class="right-sidebar">
<div class="sidebar-content">
<div class="color-picker-section">
<div class="section-header">
<h4 class="section-title">{{ t('Background Color') }}</h4>
<button
class="add-favorite-btn"
@click="addToFavorites"
:title="t('Add to favorites')"
:disabled="favoriteColors.length >= MAX_FAVORITE_COLORS"
>
<i class="fa fa-star"></i>
</button>
</div>
<h4 class="section-title">{{ t('Background Color') }}</h4>
<div class="color-picker-container">
<input
v-model="backgroundColor"
@ -179,14 +169,24 @@
class="sidebar-color-picker"
@input="onColorChange"
/>
<input
v-model="backgroundColor"
type="text"
class="sidebar-hex-input"
placeholder="#FFFFFF"
@input="onHexInputChange"
@blur="onHexInputBlur"
/>
<div class="hex-input-wrapper">
<input
v-model="backgroundColor"
type="text"
class="sidebar-hex-input"
placeholder="#FFFFFF"
@input="onHexInputChange"
@blur="onHexInputBlur"
/>
<button
class="add-favorite-btn"
@click="addToFavorites"
:title="t('Add to favorites')"
:disabled="favoriteColors.length >= MAX_FAVORITE_COLORS"
>
<i class="fa fa-star"></i>
</button>
</div>
</div>
</div>
@ -343,20 +343,57 @@ const removeFavoriteColor = (color: string) => {
}
}
// 12 common background colors - light to dark
// 36 common background colors - light to dark gradient
const commonColors = ref([
'#FFFFFF', // White
'#F5F5F5', // Very Light Gray
'#E8E8E8', // Light Gray
'#D4D4D4', // Gray
'#FFE4E1', // Light Pink
'#FFD7BE', // Light Peach
'#FFF4CC', // Light Yellow
'#D4E4BC', // Light Green
'#C8E6F5', // Light Blue
'#E6D7FF', // Light Purple
'#BEBEBE', // Medium Gray
'#A0A0A0' // Dark Gray
// Pure Whites (3)
'#FFFFFF', // Pure White
'#FEFEFE', // Almost White
'#FAFAFA', // Off White
// Light Grays (6)
'#F5F5F5', // Very Light Gray 1
'#F0F0F0', // Very Light Gray 2
'#EBEBEB', // Very Light Gray 3
'#E8E8E8', // Light Gray 1
'#E0E0E0', // Light Gray 2
'#DADADA', // Light Gray 3
// Light Pinks & Peaches (6)
'#FFE4E1', // Misty Rose
'#FFDDE1', // Light Pink
'#FFE4CC', // Light Peach 1
'#FFD7BE', // Light Peach 2
'#FFDAB9', // Peach Puff
'#FFCBA4', // Deep Peach
// Light Yellows & Creams (6)
'#FFFACD', // Lemon Chiffon
'#FFF4CC', // Light Yellow 1
'#FFECB3', // Light Yellow 2
'#FFE4B5', // Moccasin
'#FFDEAD', // Navajo White
'#FFD699', // Light Orange
// Light Greens & Blues (6)
'#E8F5E9', // Light Green 1
'#D4EDDA', // Light Green 2
'#D4E4BC', // Pale Green
'#E0F7FA', // Light Cyan
'#C8E6F5', // Light Sky Blue
'#B3E5FC', // Light Blue
// Light Purples & Lavenders (3)
'#F3E5F5', // Lavender Blush
'#EDE7F6', // Light Purple 1
'#E6D7FF', // Light Purple 2
// Medium to Dark Grays (6)
'#D4D4D4', // Medium Gray 1
'#CACACA', // Medium Gray 2
'#BEBEBE', // Medium Gray 3
'#B0B0B0', // Medium Gray 4
'#A0A0A0', // Dark Gray 1
'#909090' // Dark Gray 2
])
// OKLCH color utilities - perceptually uniform color space
@ -1837,28 +1874,27 @@ const removeHistoryItem = (index: number) => {
gap: 16px;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-bottom: 12px;
border-bottom: 1px solid #e5e7eb;
}
.section-title {
font-size: 14px;
font-weight: 600;
color: #1f2937;
margin: 0;
flex: 1;
padding-bottom: 12px;
border-bottom: 1px solid #e5e7eb;
}
.hex-input-wrapper {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
}
.add-favorite-btn {
width: 32px;
height: 32px;
width: 44px;
height: 44px;
border: 1px solid #e5e7eb;
border-radius: 6px;
border-radius: 8px;
background: white;
color: #fbbf24;
cursor: pointer;
@ -1870,7 +1906,7 @@ const removeHistoryItem = (index: number) => {
flex-shrink: 0;
i {
font-size: 14px;
font-size: 16px;
}
&:hover:not(:disabled) {
@ -1916,7 +1952,7 @@ const removeHistoryItem = (index: number) => {
}
.sidebar-hex-input {
width: 100%;
flex: 1;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 12px;
@ -1927,6 +1963,7 @@ const removeHistoryItem = (index: number) => {
outline: none;
transition: all 0.2s ease;
text-align: center;
min-width: 0;
&:focus {
border-color: #1fc76f;
@ -1942,7 +1979,7 @@ const removeHistoryItem = (index: number) => {
.favorite-colors-grid,
.common-colors-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(6, 1fr);
gap: 10px;
}
@ -2343,9 +2380,28 @@ const removeHistoryItem = (index: number) => {
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}
.hex-input-wrapper {
flex-direction: row;
}
.add-favorite-btn {
width: 44px;
height: 44px;
i {
font-size: 18px;
}
}
.sidebar-hex-input {
font-size: 13px;
padding: 10px;
}
.favorite-colors-grid,
.common-colors-grid {
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(6, 1fr);
gap: 8px;
}
.history-bar {
@ -2391,7 +2447,8 @@ const removeHistoryItem = (index: number) => {
.favorite-colors-grid,
.common-colors-grid {
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(6, 1fr);
gap: 8px;
}
}
</style>