Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix textarea highlight border and prompt dialog style #18

Merged
merged 3 commits into from
Mar 5, 2025
Merged

Fix textarea highlight border and prompt dialog style #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b49d7c2
Fix textarea highlight border and prompt dialog style
hexart Mar 5, 2025
aca1825
fix: 仅在非PR事件中执行Docker登录步骤
hexart Mar 5, 2025
d017dc9
fix: 整合下拉菜单重复类定义，使界面更美观
hexart Mar 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/docker.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ jobs:
echo "Version from package.json: $VERSION"

- name: 登录到Docker Hub
if: github.event_name != 'pull_request'
uses: docker/login-action@v3
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/HistoryDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<template>
<div
v-if="show"
class="fixed inset-0 bg-black bg-opacity-50 z-45 flex items-center justify-center"
class="fixed inset-0 bg-black bg-opacity-50 z-[60] flex items-center justify-center"
@click="emit('update:show', false)"
>
<div
class="w-full max-w-4xl h-[90vh] theme-drawer transform transition-all duration-300 ease-in-out"
class="w-full max-w-4xl h-[85vh] theme-drawer transform transition-all duration-300 ease-in-out"
:class="show ? 'scale-100 opacity-100' : 'scale-95 opacity-0'"
@click.stop
>
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/PromptPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,13 @@
</div>

<!-- 内容区域 -->
<div class="flex-1 min-h-0 theme-input overflow-hidden">
<div class="flex-1 min-h-0 p-[2px] overflow-hidden">
<div class="h-full relative">
<textarea
ref="promptTextarea"
:value="optimizedPrompt"
@input="handleInput"
class="absolute inset-0 w-full h-full p-4 bg-transparent border-none theme-text placeholder-gray-400 dark:placeholder-gray-500 text-sm sm:text-base overflow-auto focus:ring-2 focus:ring-purple-500/50 dark:focus:ring-purple-600/50 resize-none"
class="w-full h-full px-4 py-3 theme-input resize-none"
placeholder="优化后的提示词将显示在这里..."
></textarea>
</div>
Expand Down
179 changes: 62 additions & 117 deletions packages/ui/src/styles/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,78 +203,90 @@ html * {
}

/* ===== 下拉菜单 ===== */

.theme-dropdown {
@apply absolute z-50 min-w-[300px] w-max max-w-[90vw] mt-1 px-1
bg-white/95 dark:bg-gray-800/95
theme-blue:bg-blue-50/95 theme-green:bg-green-50/95 theme-purple:bg-purple-900/95
backdrop-blur-sm rounded-lg
border border-gray-200/50 dark:border-gray-700/50
theme-blue:border-blue-200/50 theme-green:border-green-200/50 theme-purple:border-purple-600/30
shadow-xl;
}

/* 下拉菜单按钮 */
.theme-select-button {
@apply bg-white/30 dark:bg-gray-800/30
@apply w-full h-10 px-3 py-2 rounded-lg transition-all
bg-white/10 dark:bg-gray-900/30
theme-blue:bg-blue-100/30 theme-green:bg-green-100/30 theme-purple:bg-black/20
border border-gray-300/50 dark:border-gray-600/50
border border-gray-300/50 dark:border-gray-700/50
theme-blue:border-blue-300/50 theme-green:border-green-300/50 theme-purple:border-purple-600/50
rounded-lg px-3 py-2
text-gray-900 dark:text-white
text-gray-900 dark:text-white
theme-blue:text-blue-900 theme-green:text-green-900 theme-purple:text-white
hover:border-purple-500/70
theme-blue:hover:border-blue-500/70 theme-green:hover:border-green-500/70 theme-purple:hover:border-purple-500/70
focus:ring-2 focus:ring-purple-500/50 focus:border-transparent
theme-blue:focus:ring-blue-500/50 theme-green:focus:ring-green-500/50 theme-purple:focus:ring-purple-500/50
outline-none transition-colors;
}

/* 下拉菜单 */
.theme-dropdown {
@apply bg-white/95 dark:bg-slate-900/95
theme-blue:bg-blue-100/95 theme-green:bg-green-100/95 theme-purple:bg-gray-800/95
border border-gray-200 dark:border-slate-700
theme-blue:border-blue-400 theme-green:border-green-400 theme-purple:border-purple-600/30
rounded-lg shadow-lg overflow-hidden;
outline-none;
}

/* 下拉菜单项 */
.theme-dropdown-item {
@apply bg-gray-100 dark:bg-slate-800
theme-blue:bg-blue-200 theme-green:bg-green-200 theme-purple:bg-purple-600/30
text-gray-900 dark:text-slate-200
theme-blue:text-blue-950 theme-green:text-green-950 theme-purple:text-purple-200;
@apply px-3 py-2 mb-1 rounded-lg cursor-pointer transition-colors
text-gray-900 dark:text-slate-200
theme-blue:text-blue-950 theme-green:text-green-950 theme-purple:text-purple-200;
}

.theme-dropdown-item:last-child {
@apply mb-0
}

/* 下拉菜单项激活 */
.theme-dropdown-item-active {
@apply bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600
theme-blue:hover:bg-blue-100/50 theme-green:hover:bg-green-100/50 theme-purple:hover:bg-gray-700/50
text-gray-900 dark:text-gray-200
theme-blue:text-blue-700 theme-green:text-green-700 theme-purple:text-gray-300;
@apply bg-purple-100/70 dark:bg-purple-800/50
theme-blue:bg-blue-200/90 theme-green:bg-green-200/90 theme-purple:bg-purple-600/30
text-purple-800 dark:text-purple-200
theme-blue:text-blue-800 theme-green:text-green-800 theme-purple:text-purple-200;
}

/* 下拉菜单项未激活 */
.theme-dropdown-item-inactive {
@apply border-l-2 border-transparent
theme-blue:border-blue-200/50 theme-green:border-green-200/50 theme-purple:border-purple-600/20;
@apply border-transparent
theme-blue:border-blue-200/50 theme-green:border-green-200/50 theme-purple:border-purple-600/20
hover:bg-gray-100/50 dark:hover:bg-gray-700/50
theme-blue:hover:bg-blue-100/50 theme-green:hover:bg-green-100/50 theme-purple:hover:bg-purple-800/50
text-gray-700 dark:text-gray-300
theme-blue:text-blue-700 theme-green:text-green-700 theme-purple:text-gray-300;
}

/* 下拉菜单分组 */
.theme-dropdown-section {
@apply bg-purple-100 dark:bg-purple-800/30
theme-blue:bg-blue-100 theme-green:bg-green-100 theme-purple:bg-purple-600/20
text-purple-700 dark:text-purple-300
theme-blue:text-blue-700 theme-green:text-green-700 theme-purple:text-purple-300
hover:bg-purple-200 dark:hover:bg-purple-800/50
theme-blue:hover:bg-blue-200 theme-green:hover:bg-green-200 theme-purple:hover:bg-purple-600/30
cursor-pointer;
@apply p-2 border-t border-gray-200/50 dark:border-gray-700/50
theme-blue:border-blue-200/50 theme-green:border-green-200/50 theme-purple:border-purple-600/20
bg-purple-100 dark:bg-purple-800/30
theme-blue:bg-blue-100 theme-green:bg-green-100 theme-purple:bg-purple-600/20
text-purple-700 dark:text-purple-300
theme-blue:text-blue-700 theme-green:text-green-700 theme-purple:text-purple-300
hover:bg-purple-200 dark:hover:bg-purple-800/50
theme-blue:hover:bg-blue-200 theme-green:hover:bg-green-200 theme-purple:hover:bg-purple-600/30
cursor-pointer;
}

/* 下拉菜单按钮 */
.theme-dropdown-button {
@apply text-gray-500 dark:text-gray-400
theme-blue:text-blue-500 theme-green:text-green-500 theme-purple:text-gray-400
hover:text-gray-700 dark:hover:text-gray-300;
@apply w-full px-3 py-2 text-sm rounded-lg
bg-purple-100 dark:bg-purple-800/30
theme-blue:bg-blue-100 theme-green:bg-green-100 theme-purple:bg-purple-600/20
text-purple-700 dark:text-purple-300
theme-blue:text-blue-700 theme-green:text-green-700 theme-purple:text-purple-300
hover:bg-purple-200 dark:hover:bg-purple-800/50
theme-blue:hover:bg-blue-200 theme-green:hover:bg-green-200 theme-purple:hover:bg-purple-600/30
transition-colors flex items-center justify-center space-x-1;
}

/* 下拉菜单空状态 */
.theme-dropdown-empty {
@apply text-gray-400 dark:text-gray-500
theme-blue:text-blue-400 theme-green:text-green-400 theme-purple:text-white/50;
@apply px-3 py-2 text-sm
text-gray-500 dark:text-gray-400
theme-blue:text-blue-500 theme-green:text-green-500 theme-purple:text-gray-400;
}

/* 占位符 */
.theme-placeholder {
@apply text-gray-400 dark:text-gray-500
Expand Down Expand Up @@ -365,10 +377,10 @@ html * {

/* 管理界面容器 */
.theme-manager-container {
@apply bg-white dark:bg-slate-900
@apply bg-white dark:bg-slate-800/90
theme-blue:bg-blue-100 theme-green:bg-green-100 theme-purple:bg-gray-900/90
backdrop-blur-sm rounded-xl shadow-xl
border border-gray-200 dark:border-slate-800
border border-slate-200 dark:border-slate-700
theme-blue:border-blue-400 theme-green:border-green-400 theme-purple:border-purple-700/50;
}

Expand Down Expand Up @@ -504,71 +516,6 @@ html * {
display: none;
}

/* ===== 下拉菜单 ===== */
.theme-select-button {
@apply w-full h-10 px-3
bg-white/10 dark:bg-gray-900/30
theme-blue:bg-blue-100/30 theme-green:bg-green-100/30 theme-purple:bg-black/20
border border-gray-300/50 dark:border-gray-700/50
theme-blue:border-blue-300/50 theme-green:border-green-300/50 theme-purple:border-purple-600/50
rounded-lg text-gray-900 dark:text-white
theme-blue:text-blue-900 theme-green:text-green-900 theme-purple:text-white
hover:border-purple-500/70
theme-blue:hover:border-blue-500/70 theme-green:hover:border-green-500/70 theme-purple:hover:border-purple-500/70
focus:ring-2 focus:ring-purple-500/50 focus:border-transparent
theme-blue:focus:ring-blue-500/50 theme-green:focus:ring-green-500/50 theme-purple:focus:ring-purple-500/50
transition-all;
}

.theme-dropdown {
@apply absolute z-50 min-w-[300px] w-max max-w-[90vw] mt-1
bg-white/95 dark:bg-gray-800/95
theme-blue:bg-blue-50/95 theme-green:bg-green-50/95 theme-purple:bg-gray-800/95
backdrop-blur-sm rounded-lg
border border-gray-200/50 dark:border-gray-700/50
theme-blue:border-blue-200/50 theme-green:border-green-200/50 theme-purple:border-purple-600/30
shadow-xl;
}

.theme-dropdown-item {
@apply px-3 py-2 rounded-lg cursor-pointer transition-colors;
}

.theme-dropdown-item-active {
@apply bg-purple-100/70 dark:bg-purple-800/50
theme-blue:bg-blue-100/70 theme-green:bg-green-100/70 theme-purple:bg-purple-600/30
text-purple-800 dark:text-purple-200
theme-blue:text-blue-800 theme-green:text-green-800 theme-purple:text-purple-200;
}

.theme-dropdown-item-inactive {
@apply hover:bg-gray-100/50 dark:hover:bg-gray-700/50
theme-blue:hover:bg-blue-100/50 theme-green:hover:bg-green-100/50 theme-purple:hover:bg-gray-700/50
text-gray-700 dark:text-gray-300
theme-blue:text-blue-700 theme-green:text-green-700 theme-purple:text-gray-300;
}

.theme-dropdown-section {
@apply p-2 border-t border-gray-200/50 dark:border-gray-700/50
theme-blue:border-blue-200/50 theme-green:border-green-200/50 theme-purple:border-purple-600/20;
}

.theme-dropdown-button {
@apply w-full px-3 py-2 text-sm rounded-lg
bg-purple-100 dark:bg-purple-800/30
theme-blue:bg-blue-100 theme-green:bg-green-100 theme-purple:bg-purple-600/20
text-purple-700 dark:text-purple-300
theme-blue:text-blue-700 theme-green:text-green-700 theme-purple:text-purple-300
hover:bg-purple-200 dark:hover:bg-purple-800/50
theme-blue:hover:bg-blue-200 theme-green:hover:bg-green-200 theme-purple:hover:bg-purple-600/30
transition-colors flex items-center justify-center space-x-1;
}

.theme-dropdown-empty {
@apply px-3 py-2 text-gray-500 dark:text-gray-400
theme-blue:text-blue-500 theme-green:text-green-500 theme-purple:text-gray-400
text-sm;
}

/* 占位符文本 */
.theme-placeholder {
Expand Down Expand Up @@ -669,11 +616,13 @@ html * {

/* 主题抽屉 */
.theme-drawer {
@apply bg-white dark:bg-slate-800 border-l border-slate-200 dark:border-slate-700;
@apply bg-white dark:bg-slate-800/90
backdrop-blur-sm rounded-xl shadow-xl
border-l border-slate-200 dark:border-slate-700;
}

.theme-drawer-header {
@apply border-b border-slate-200 dark:border-slate-700;
@apply rounded-t-xl border-b border-slate-200 dark:border-slate-700;
}

.theme-drawer-content {
Expand Down Expand Up @@ -713,10 +662,6 @@ html * {
}

/* 管理界面主题 */
.theme-manager-container {
@apply bg-white dark:bg-slate-800 rounded-lg shadow-xl border border-slate-200 dark:border-slate-700;
}

.theme-manager-header {
@apply border-b border-slate-200 dark:border-slate-700;
}
Expand Down