3581 lines
80 KiB
CSS
3581 lines
80 KiB
CSS
/**
|
||
* 设置界面样式
|
||
*
|
||
* 样式分类说明:
|
||
* 1. 全局基础样式 - CSS 变量、Z-index 层级管理
|
||
* 2. 设置弹窗通用样式 - 所有设置模块共用的弹窗、表单、按钮等样式
|
||
* 3. API 配置管理器专属样式 - API 配置界面的标签页、服务卡片等组件
|
||
* 4. 标签管理器专属样式 - 标签管理界面的拖拽、手风琴等组件
|
||
* 5. 规则配置专属样式 - 提示词规则配置界面的列表、编辑器等组件
|
||
*/
|
||
|
||
/* ===================================================
|
||
1. 全局基础样式
|
||
=================================================== */
|
||
|
||
/* ---Z-index 层级管理--- */
|
||
/* 层级规划：
|
||
* - ComfyUI 系统弹窗：约 9000-9999
|
||
* - 本插件遮罩层：10199
|
||
* - 本插件弹窗基础层级：10200
|
||
* - 下拉菜单：10205
|
||
* - 右键菜单：10215
|
||
* - 多选列表框：10220
|
||
* - 确认气泡框：10225
|
||
* - Tooltip：10230（最上层）
|
||
*/
|
||
:root {
|
||
--settings-modal-z-index: 10200;
|
||
--settings-overlay-z-index: 10199;
|
||
--settings-dropdown-z-index: 10205;
|
||
--settings-context-menu-z-index: 10215;
|
||
--settings-multi-listbox-z-index: 10220;
|
||
--settings-confirm-popup-z-index: 10225;
|
||
--settings-tooltip-z-index: 10230;
|
||
}
|
||
|
||
/* ===================================================
|
||
2. 设置弹窗通用样式 (所有设置模块共用)
|
||
=================================================== */
|
||
|
||
/* ---遮罩层样式--- */
|
||
.settings-modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: var(--settings-overlay-z-index);
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.settings-modal-overlay.overlay-show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.settings-modal-overlay.overlay-hide {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
}
|
||
|
||
/* 设置面板容器 */
|
||
.settings-panel {
|
||
padding: 1rem;
|
||
}
|
||
|
||
/* 设置项组 */
|
||
.settings-group {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
/* 设置项标题 */
|
||
.settings-title {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.5rem;
|
||
color: var(--fg-color);
|
||
}
|
||
|
||
/* 服务申请链接容器样式 */
|
||
.settings-service-links {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
background-color: var(--p-button-secondary-background);
|
||
border-radius: 10px;
|
||
padding: 2px 8px;
|
||
}
|
||
|
||
|
||
/* 服务申请前缀文本样式（与链接字号一致） */
|
||
.settings-service-prefix {
|
||
color: var(--p-button-text-primary-color);
|
||
font-size: 14px;
|
||
padding: 2px 4px;
|
||
}
|
||
|
||
/* 服务申请链接样式 */
|
||
.settings-service-link {
|
||
display: inline-block;
|
||
padding: 4px 4px;
|
||
color: var(--p-button-text-primary-color) !important;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.settings-service-link:hover {
|
||
color: var(--p-button-text-primary-color) !important;
|
||
text-decoration: none !important;
|
||
}
|
||
|
||
/* 服务链接分隔符 */
|
||
.settings-service-separator {
|
||
color: var(--p-button-text-primary-color);
|
||
opacity: 0.5;
|
||
padding: 0 2px;
|
||
user-select: none;
|
||
}
|
||
|
||
/* 设置项内容 */
|
||
.settings-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
/* 按钮组样式 */
|
||
.button-group {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
/* ---设置弹窗样式--- */
|
||
.settings-modal {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%) scale(0.8);
|
||
/* 响应式宽度设置 */
|
||
width: min(90vw, 1048px);
|
||
min-width: 800px;
|
||
/* 响应式高度设置 */
|
||
max-height: 90vh;
|
||
min-height: 600px;
|
||
/* height: 760px; */
|
||
margin: 0;
|
||
z-index: var(--settings-modal-z-index);
|
||
background-color: var(--p-dialog-background);
|
||
border: 1px solid var(--p-dialog-border-color);
|
||
border-radius: var(--p-dialog-border-radius);
|
||
box-shadow: var(--p-dialog-shadow);
|
||
color: var(--p-dialog-color);
|
||
/* 添加弹性布局 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
/* 添加动画属性 */
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
/* ---二次确认对话框独立样式--- */
|
||
/* 适用于各种需要二次确认的场景:删除、修改、更新等 */
|
||
.settings-modal.confirm-dialog {
|
||
/* 使用 max-width 而不是 width,让对话框根据内容自适应宽度 */
|
||
width: fit-content;
|
||
max-width: min(90vw, 600px);
|
||
/* 设置合理的最小宽度,避免对话框过窄 */
|
||
min-width: min(400px, 80vw);
|
||
min-height: auto;
|
||
height: auto;
|
||
}
|
||
|
||
/* 确认对话框内容样式 */
|
||
.confirm-dialog-content {
|
||
text-align: center;
|
||
padding: 2rem 1rem;
|
||
}
|
||
|
||
.confirm-dialog-content-simple {
|
||
text-align: center;
|
||
padding: 1rem;
|
||
}
|
||
|
||
.confirm-dialog-icon {
|
||
font-size: 48px;
|
||
color: var(--p-orange-500);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.confirm-dialog-message {
|
||
margin: 0 0 0.5rem 0;
|
||
font-size: 1.1rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.confirm-dialog-message-simple {
|
||
margin: 0;
|
||
font-size: 1rem;
|
||
color: var(--p-text-color);
|
||
}
|
||
|
||
.confirm-dialog-warning {
|
||
margin: 0;
|
||
font-size: 0.9rem;
|
||
color: var(--p-text-muted-color);
|
||
}
|
||
|
||
/* 弹窗显示动画类 */
|
||
.settings-modal.modal-show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: translate(-50%, -50%) scale(1);
|
||
}
|
||
|
||
/* 弹窗隐藏动画类 */
|
||
.settings-modal.modal-hide {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transform: translate(-50%, -50%) scale(0.8);
|
||
}
|
||
|
||
/* 拖动时的状态 */
|
||
.settings-modal.dragging {
|
||
transition: none;
|
||
cursor: move;
|
||
}
|
||
|
||
/* 标题栏样式 */
|
||
.settings-modal .p-dialog-header {
|
||
padding: var(--p-dialog-header-padding);
|
||
border-bottom: 1px solid var(--p-dialog-border-color);
|
||
|
||
/* 固定头部 */
|
||
flex: 0 0 auto;
|
||
user-select: none;
|
||
}
|
||
|
||
.settings-modal .p-dialog-content {
|
||
padding: 10px 40px;
|
||
position: relative;
|
||
/* 作为二维码的定位参照，避免被外层裁剪 */
|
||
/* 内容区域自适应 */
|
||
flex: 1 1 auto;
|
||
overflow-y: auto;
|
||
/* 添加平滑滚动 */
|
||
scroll-behavior: smooth;
|
||
/* 优化滚动条样式 */
|
||
scrollbar-width: thin;
|
||
scrollbar-color: var(--p-scrollpanel-bar-background) transparent;
|
||
}
|
||
|
||
/* 自定义滚动条样式 */
|
||
.settings-modal .p-dialog-content::-webkit-scrollbar {
|
||
width: 10px;
|
||
}
|
||
|
||
.settings-modal .p-dialog-content::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.settings-modal .p-dialog-content::-webkit-scrollbar-thumb {
|
||
background: var(--p-scrollpanel-bar-background);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.settings-modal .p-dialog-content::-webkit-scrollbar-thumb:hover {
|
||
background: var(--p-scrollpanel-bar-background);
|
||
}
|
||
|
||
.settings-modal .p-dialog-footer {
|
||
padding: 10px 40px 20px 40px;
|
||
|
||
|
||
gap: 0.9rem;
|
||
/* 固定底部 */
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
/* 表单部分样式 */
|
||
.settings-form-section {
|
||
/* margin-bottom: 2rem; */
|
||
/* padding-bottom: 0.5rem; */
|
||
/* border-bottom: 1px solid var(--p-dialog-border-color); */
|
||
}
|
||
|
||
.settings-form-section.baidu-translate-section {
|
||
margin-bottom: 0;
|
||
padding-bottom: 0;
|
||
border-bottom: none;
|
||
padding: 50px 20px 80px 20px;
|
||
background: color-mix(in srgb, var(--secondary-background), transparent 30%);
|
||
border-radius: 6px;
|
||
/* box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05); */
|
||
/* border: 1px solid var(--p-dialog-border-color); */
|
||
}
|
||
|
||
.settings-form-section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin: 0 0 1rem 0;
|
||
color: var(--p-text-muted-color);
|
||
}
|
||
|
||
/* 表单组样式 */
|
||
.settings-form-group {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* 水平布局的表单组 */
|
||
.settings-form-group.horizontal {
|
||
display: flex;
|
||
gap: 1rem;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.settings-form-group.horizontal>* {
|
||
flex: 1;
|
||
min-width: 0;
|
||
/* 防止flex项溢出 */
|
||
}
|
||
|
||
/* 调整水平布局中标签的样式 */
|
||
.settings-form-group.horizontal .settings-form-label {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
/* 调整下拉选择器在水平布局中的样式 */
|
||
.settings-form-group.horizontal .p-dropdown,
|
||
.settings-form-group.horizontal .p-inputtext {
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 确保下拉选择器的容器不会被挤压 */
|
||
.settings-form-group.horizontal .p-dropdown-container {
|
||
min-width: 150px;
|
||
}
|
||
|
||
/* 确保输入框容器不会被挤压 */
|
||
.settings-form-group.horizontal .p-input-wrapper {
|
||
min-width: 150px;
|
||
}
|
||
|
||
.settings-form-group:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.settings-form-label {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 500;
|
||
color: var(--p-text-color);
|
||
}
|
||
|
||
/* ---浮动标签输入框样式 (PrimeVue FloatLabel variant="on")--- */
|
||
.float-label-container {
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
.float-label-container label {
|
||
position: absolute;
|
||
left: 0.75rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--p-text-muted-color);
|
||
font-size: 1rem;
|
||
font-weight: 400;
|
||
transition: all 0.2s ease;
|
||
pointer-events: none;
|
||
background: var(--p-inputtext-background);
|
||
border-radius: 6px;
|
||
padding: 0 0.25rem;
|
||
z-index: 1;
|
||
}
|
||
|
||
.float-label-container input {
|
||
width: 100%;
|
||
padding: 0.75rem;
|
||
font-size: 1rem;
|
||
border: 1px solid var(--p-inputtext-border-color);
|
||
border-radius: var(--p-inputtext-border-radius, 6px);
|
||
background: var(--p-inputtext-background);
|
||
color: var(--p-inputtext-color);
|
||
transition: border-color 0.2s, box-shadow 0.2s;
|
||
box-shadow: var(--p-inputtext-shadow);
|
||
}
|
||
|
||
.float-label-container input:focus {
|
||
outline: none;
|
||
border-color: var(--p-inputtext-focus-border-color);
|
||
box-shadow: var(--p-inputtext-focus-ring-shadow);
|
||
}
|
||
|
||
.float-label-container input:hover:not(:focus) {
|
||
border-color: var(--p-inputtext-hover-border-color);
|
||
}
|
||
|
||
/* 浮动状态 - 当输入框有值或获得焦点时 */
|
||
.float-label-container input:focus~label,
|
||
.float-label-container input:not(:placeholder-shown)~label {
|
||
top: 0;
|
||
transform: translateY(-50%);
|
||
font-size: 0.75rem;
|
||
color: var(--p-text-muted-color);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 密码输入框样式 */
|
||
.float-label-container input[type="password"] {
|
||
font-family: monospace;
|
||
}
|
||
|
||
/* ---浮动标签 textarea 样式--- */
|
||
.float-label-container textarea {
|
||
width: 100%;
|
||
padding: 0.75rem;
|
||
font-size: 1rem;
|
||
border: 1px solid var(--p-inputtext-border-color);
|
||
border-radius: var(--p-inputtext-border-radius, 6px);
|
||
background: var(--p-inputtext-background);
|
||
color: var(--p-inputtext-color);
|
||
transition: border-color 0.2s, box-shadow 0.2s;
|
||
box-shadow: var(--p-inputtext-shadow);
|
||
}
|
||
|
||
.float-label-container textarea:focus {
|
||
outline: none;
|
||
border-color: var(--p-inputtext-focus-border-color);
|
||
box-shadow: var(--p-inputtext-focus-ring-shadow);
|
||
}
|
||
|
||
.float-label-container textarea:hover:not(:focus) {
|
||
border-color: var(--p-inputtext-hover-border-color);
|
||
}
|
||
|
||
/* textarea 的标签初始位置（因为 textarea 高度不固定，使用固定的 top 值） */
|
||
.float-label-container textarea~label {
|
||
top: 1rem;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* 浮动状态 - 当 textarea 有值或获得焦点时 */
|
||
.float-label-container textarea:focus~label,
|
||
.float-label-container textarea:not(:placeholder-shown)~label {
|
||
top: 0;
|
||
transform: translateY(-50%);
|
||
font-size: 0.75rem;
|
||
color: var(--p-text-muted-color);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 输入框容器样式 - 加上 pa- 前缀防止污染全局 flex-1 */
|
||
.pa-flex-1 {
|
||
flex: 1;
|
||
width: 100%;
|
||
}
|
||
|
||
/* ---浮动标签 dropdown 样式--- */
|
||
/* dropdown 的标签默认浮动状态（因为 dropdown 总是有值） */
|
||
.float-label-container .pa-dropdown~label {
|
||
top: 0;
|
||
transform: translateY(-50%);
|
||
font-size: 0.75rem;
|
||
color: var(--p-text-muted-color);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* dropdown 获得焦点时的标签样式 */
|
||
.float-label-container .pa-dropdown.p-focus~label {
|
||
color: var(--p-inputtext-focus-border-color);
|
||
}
|
||
|
||
/* 优化关闭按钮悬停效果 */
|
||
.settings-modal .p-dialog-header-icon.p-dialog-header-close {
|
||
width: 2rem;
|
||
height: 2rem;
|
||
border-radius: 50%;
|
||
transition: background-color 0.2s;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 0.5rem;
|
||
color: var(--p-button-text-secondary-color);
|
||
background-color: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.settings-modal .p-dialog-header-icon.p-dialog-header-close:hover {
|
||
background-color: var(--p-button-text-secondary-hover-background);
|
||
;
|
||
|
||
}
|
||
|
||
.settings-modal .p-dialog-header-icon.p-dialog-header-close .pi-times {
|
||
font-size: 1rem;
|
||
|
||
}
|
||
|
||
/* ---危险按钮样式--- */
|
||
/* 用于删除等危险操作的按钮 - 限定在插件作用域内 */
|
||
.pa-settings-root .p-button-danger,
|
||
.prompt-assistant-container .p-button-danger {
|
||
background: var(--p-button-danger-background);
|
||
border-color: var(--p-button-danger-border-color);
|
||
color: var(--p-button-danger-color);
|
||
}
|
||
|
||
.pa-settings-root .p-button-danger:hover,
|
||
.prompt-assistant-container .p-button-danger:hover {
|
||
background: var(--p-button-danger-hover-background);
|
||
border-color: var(--p-button-danger-hover-border-color);
|
||
color: var(--p-button-danger-color);
|
||
}
|
||
|
||
.pa-settings-root .p-button-danger:active,
|
||
.pa-settings-root .p-button-danger:focus,
|
||
.prompt-assistant-container .p-button-danger:active,
|
||
.prompt-assistant-container .p-button-danger:focus {
|
||
outline: none;
|
||
box-shadow: 0 0 0 0.2rem var(--p-button-danger-active-border-color);
|
||
}
|
||
|
||
|
||
/* 独立下拉选择组件样式（不依赖 PrimeVue 全局样式） */
|
||
/* 仅影响通过小助手创建的选择框，不改变ComfyUI内置组件 */
|
||
.pa-dropdown {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
position: relative;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
background: var(--p-inputtext-background);
|
||
border: 1px solid var(--p-inputtext-border-color);
|
||
border-radius: 6px;
|
||
transition: border-color 0.2s;
|
||
width: 100%;
|
||
box-shadow: var(--p-inputtext-shadow);
|
||
height: 2.5rem;
|
||
}
|
||
|
||
.pa-dropdown:hover {
|
||
border-color: var(--p-form-field-hover-border-color);
|
||
}
|
||
|
||
.pa-dropdown.p-focus {
|
||
border-color: var(--p-form-field-focus-border-color);
|
||
}
|
||
|
||
.pa-dropdown .pa-dropdown-label {
|
||
flex: 1 1 auto;
|
||
border: 0 none;
|
||
color: var(--p-inputtext-color);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
width: 1%;
|
||
height: 100%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.pa-dropdown .pa-dropdown-trigger {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
width: 2.5rem;
|
||
color: var(--p-form-field-hover-border-color);
|
||
height: 100%;
|
||
}
|
||
|
||
/* 下拉面板（独立样式） */
|
||
.pa-dropdown-panel {
|
||
z-index: var(--settings-dropdown-z-index);
|
||
background: var(--p-select-overlay-background);
|
||
border: 1px solid var(--p-select-overlay-border-color);
|
||
box-shadow: var(--p-inputtext-shadow);
|
||
border-radius: 6px;
|
||
transform-origin: center top;
|
||
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
|
||
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
||
}
|
||
|
||
.pa-dropdown-panel.p-hidden {
|
||
opacity: 0;
|
||
transform: scaleY(0.8);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.pa-dropdown-panel.p-enter-active {
|
||
opacity: 1;
|
||
transform: scaleY(1);
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* 隐藏辅助可访问性选择器 - 限定在插件作用域内 */
|
||
.pa-settings-root .p-hidden-accessible,
|
||
.prompt-assistant-container .p-hidden-accessible {
|
||
position: absolute !important;
|
||
width: 1px !important;
|
||
height: 1px !important;
|
||
overflow: hidden !important;
|
||
clip: rect(0 0 0 0) !important;
|
||
clip-path: inset(50%) !important;
|
||
white-space: nowrap !important;
|
||
border: 0 !important;
|
||
padding: 0 !important;
|
||
margin: -1px !important;
|
||
}
|
||
|
||
/* 面板内容滚动容器（独立样式） */
|
||
.pa-dropdown-panel .p-dropdown-items-wrapper {
|
||
max-height: 240px;
|
||
overflow: auto;
|
||
}
|
||
|
||
|
||
/* 列表与选项（独立样式） */
|
||
.pa-dropdown-panel .p-dropdown-items {
|
||
padding: 4px;
|
||
list-style: none;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.pa-dropdown-panel .p-dropdown-item {
|
||
padding: 10px 12px;
|
||
margin: 0;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
transition: background-color 0.2s;
|
||
color: var(--p-select-option-color);
|
||
}
|
||
|
||
.pa-dropdown-panel .p-dropdown-item:hover {
|
||
background-color: var(--p-form-field-filled-hover-background);
|
||
}
|
||
|
||
.pa-dropdown-panel .p-dropdown-item.p-highlight {
|
||
background-color: var(--p-list-option-selected-focus-background);
|
||
color: var(--p-form-field-focus-border-color);
|
||
}
|
||
|
||
/* ---可输入下拉框（ComboBox）样式--- */
|
||
.pa-combobox {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.pa-combobox-input {
|
||
flex: 1 1 auto;
|
||
border: 0 none;
|
||
background: transparent;
|
||
color: var(--p-inputtext-color);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
width: 1%;
|
||
height: 100%;
|
||
padding: 0 0.75rem;
|
||
font-size: 1rem;
|
||
outline: none;
|
||
}
|
||
|
||
.pa-combobox-input::placeholder {
|
||
color: var(--p-text-muted-color);
|
||
}
|
||
|
||
/* ComboBox 浮动标签：输入框有值或聚焦时上浮 */
|
||
.float-label-container .pa-combobox~label {
|
||
top: 0;
|
||
transform: translateY(-50%);
|
||
font-size: 0.75rem;
|
||
color: var(--p-text-muted-color);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.float-label-container .pa-combobox.p-focus~label {
|
||
color: var(--p-inputtext-focus-border-color);
|
||
}
|
||
|
||
/* 水平表单布局中的宽度适配 */
|
||
.settings-form-group.horizontal .pa-dropdown,
|
||
.pa-settings-root .settings-form-group.horizontal .p-inputtext {
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.settings-form-group.horizontal .pa-dropdown-container {
|
||
min-width: 150px;
|
||
}
|
||
|
||
|
||
/* 选择器控件样式 */
|
||
.settings-modal .p-dropdown:not(.pa-dropdown) {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
position: relative;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
background: var(--p-select-background);
|
||
border: 1px solid var(--p-select-border-color);
|
||
border-radius: var(--p-select-border-radius);
|
||
transition: border-color 0.2s;
|
||
width: 100%;
|
||
box-shadow: var(--p-select-shadow);
|
||
height: 2.5rem;
|
||
}
|
||
|
||
.settings-modal .p-dropdown:not(.pa-dropdown):hover {
|
||
border-color: var(--p-form-field-hover-border-color);
|
||
}
|
||
|
||
.settings-modal .p-dropdown:not(.pa-dropdown).p-focus {
|
||
border-color: var(--p-primary-color);
|
||
}
|
||
|
||
.settings-modal .p-dropdown-label:not(.pa-dropdown-label) {
|
||
flex: 1 1 auto;
|
||
padding: var(--p-select-padding-y) var(--p-select-padding-x);
|
||
padding-right: 0;
|
||
background: transparent;
|
||
border: 0 none;
|
||
color: var(--p-select-color);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
width: 1%;
|
||
height: 100%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.settings-modal .p-dropdown-trigger:not(.pa-dropdown-trigger) {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
width: 2.5rem;
|
||
color: var(--p-button-text-secondary-color);
|
||
height: 100%;
|
||
}
|
||
|
||
/* 下拉面板动画相关样式（排除小助手下拉） */
|
||
.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel),
|
||
.settings-modal-dropdown-panel:not(.pa-dropdown-panel) {
|
||
z-index: var(--settings-dropdown-z-index);
|
||
background: var(--p-dialog-background);
|
||
border: 1px solid var(--p-select-overlay-border-color);
|
||
box-shadow: var(--p-select-overlay-shadow);
|
||
border-radius: var(--p-select-overlay-border-radius);
|
||
transform-origin: center top;
|
||
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
|
||
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
||
}
|
||
|
||
.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel).p-hidden,
|
||
.settings-modal-dropdown-panel:not(.pa-dropdown-panel).p-hidden {
|
||
opacity: 0;
|
||
transform: scaleY(0.8);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel).p-enter-active,
|
||
.settings-modal-dropdown-panel:not(.pa-dropdown-panel).p-enter-active {
|
||
opacity: 1;
|
||
transform: scaleY(1);
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-items,
|
||
.settings-modal-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-items {
|
||
padding: var(--p-list-padding, 0.5rem 0);
|
||
list-style: none;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--p-select-list-gap);
|
||
}
|
||
|
||
.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item,
|
||
.settings-modal-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item {
|
||
padding: var(--p-list-item-padding, 0.75rem 1rem);
|
||
margin: 0;
|
||
cursor: pointer;
|
||
border-radius: var(--p-select-option-border-radius);
|
||
transition: background-color 0.2s;
|
||
color: var(--p-list-item-color);
|
||
}
|
||
|
||
.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item:hover,
|
||
.settings-modal-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item:hover {
|
||
background-color: var(--p-select-option-focus-background);
|
||
color: var(--p-select-option-focus-color);
|
||
}
|
||
|
||
.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item.p-highlight,
|
||
.settings-modal-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item.p-highlight {
|
||
background-color: var(--p-select-option-selected-background);
|
||
color: var(--p-select-option-selected-color);
|
||
}
|
||
|
||
/* 响应式布局媒体查询 */
|
||
@media screen and (max-width: 640px) {
|
||
.settings-modal {
|
||
width: 95vw;
|
||
min-width: 320px;
|
||
margin: 0.5rem;
|
||
}
|
||
|
||
.settings-form-group {
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.settings-form-section {
|
||
margin-bottom: 1.5rem;
|
||
padding-bottom: 1rem;
|
||
}
|
||
}
|
||
|
||
/* ===================================================
|
||
3. API 配置管理器专属样式
|
||
=================================================== */
|
||
|
||
/* ---标签页容器--- */
|
||
.api-config-tabs {
|
||
width: 100%;
|
||
}
|
||
|
||
/* ---标签页头部--- */
|
||
.tab-header {
|
||
display: flex;
|
||
gap: 8px;
|
||
border-bottom: 2px solid var(--p-divider-color);
|
||
padding-bottom: 8px;
|
||
margin-bottom: 2px;
|
||
overflow-x: auto;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
/* ---标签按钮--- */
|
||
.tab-button {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
padding: 8px 16px;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
min-width: 100px;
|
||
/* 移除 transform 过渡，避免干扰 Sortable.js 的拖拽动画 */
|
||
transition: background 0.2s, color 0.2s, opacity 0.2s;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tab-button.active {
|
||
background: var(--p-primary-500);
|
||
}
|
||
|
||
.tab-button:hover:not(.active) {
|
||
background: var(--p-list-option-focus-background);
|
||
|
||
}
|
||
|
||
|
||
|
||
.tab-button.active .tab-title {
|
||
color: var(--p-button-primary-color);
|
||
}
|
||
|
||
.tab-button.active .tab-subtitle {
|
||
color: color-mix(in srgb, var(--p-button-primary-color), transparent 30%);
|
||
}
|
||
|
||
/* ---标签标题--- */
|
||
.tab-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: var(--p-text-color);
|
||
white-space: nowrap;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ---标签副标题--- */
|
||
.tab-subtitle {
|
||
font-size: 12px;
|
||
color: color-mix(in srgb, var(--p-text-muted-color), transparent 30%);
|
||
margin-top: 2px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 150px;
|
||
}
|
||
|
||
/* ---新增服务标签按钮--- */
|
||
.service-tab-add {
|
||
padding: 8px 16px;
|
||
border: 1px dashed var(--p-divider-color);
|
||
background: transparent;
|
||
color: var(--p-text-muted-color);
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
min-width: 40px;
|
||
transition: all 0.2s;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.service-tab-add:hover {
|
||
border-color: var(--p-primary-500);
|
||
color: var(--p-primary-500);
|
||
background: var(--p-list-option-focus-background);
|
||
}
|
||
|
||
/* ---标签内容容器--- */
|
||
.tab-content {
|
||
width: 100%;
|
||
}
|
||
|
||
/* ---标签页面板--- */
|
||
.tab-pane {
|
||
padding: 16px;
|
||
display: none;
|
||
}
|
||
|
||
.tab-pane.active {
|
||
display: block;
|
||
}
|
||
|
||
/* ---服务卡片--- */
|
||
.service-card {
|
||
border: 1px solid var(--p-divider-color);
|
||
border-radius: 8px;
|
||
padding: 6px 20px 20px 20px;
|
||
background: var(--p-content-background);
|
||
}
|
||
|
||
/* 标签页容器通用样式 */
|
||
.tab-pane {
|
||
padding: 16px;
|
||
display: none;
|
||
}
|
||
|
||
.tab-pane.active .service-sub-tabs .service-tab-button:first-child {
|
||
background: var(--p-primary-500);
|
||
color: white;
|
||
}
|
||
|
||
/* 服务商二级标签导航 */
|
||
.service-sub-tabs {
|
||
display: flex;
|
||
gap: 8px;
|
||
border-bottom: 2px solid var(--p-divider-color);
|
||
padding-bottom: 8px;
|
||
margin-bottom: 16px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
/* 服务商二级标签按钮 */
|
||
.service-tab-button {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
padding: 8px 16px;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
min-width: 120px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.service-tab-button:hover:not(.active) {
|
||
background: var(--p-surface-100);
|
||
}
|
||
|
||
.service-tab-button.active {
|
||
background: var(--p-primary-500);
|
||
color: white;
|
||
}
|
||
|
||
.service-tab-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--p-text-color);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.service-tab-button.active .service-tab-title {
|
||
color: white;
|
||
}
|
||
|
||
.service-tab-subtitle {
|
||
font-size: 12px;
|
||
color: var(--p-text-muted-color);
|
||
margin-top: 2px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 150px;
|
||
}
|
||
|
||
.service-tab-button.active .service-tab-subtitle {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
/* 新增服务标签按钮 */
|
||
.service-tab-add {
|
||
padding: 8px 16px;
|
||
border: 1px dashed var(--p-divider-color);
|
||
background: transparent;
|
||
color: var(--p-text-color);
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
min-width: 40px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.service-tab-add:hover {
|
||
border-color: var(--p-primary-500);
|
||
color: var(--p-primary-500);
|
||
}
|
||
|
||
/* 空状态提示 */
|
||
.empty-state-hint {
|
||
text-align: center;
|
||
padding: 60px 20px;
|
||
color: var(--p-text-muted-color);
|
||
}
|
||
|
||
.empty-state-hint-small {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: var(--p-text-muted-color);
|
||
}
|
||
|
||
.service-card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.service-card-title {
|
||
margin: 0;
|
||
color: var(--p-text-color);
|
||
font-size: 16px;
|
||
}
|
||
|
||
.service-card-delete-btn {
|
||
padding: 4px 8px;
|
||
border: none;
|
||
background: none;
|
||
color: var(--p-red-500);
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ---简化版服务配置项--- */
|
||
.service-setting-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.service-setting-item:first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.service-setting-label-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.service-setting-label {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--p-text-color);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.service-setting-info-icon {
|
||
font-size: 16px;
|
||
color: var(--p-text-muted-color);
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.service-setting-info-icon:hover {
|
||
color: var(--p-primary-500);
|
||
}
|
||
|
||
/* 配置项容器 - 右对齐 */
|
||
.service-settings-inline {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
margin-top: 16px;
|
||
/* padding-top: 12px; */
|
||
/* border-top: 1px solid var(--p-divider-color); */
|
||
padding-bottom: 1rem;
|
||
border-bottom: 1px solid var(--p-dialog-border-color);
|
||
}
|
||
|
||
/* ---开关控件（简化版）--- */
|
||
|
||
.switch-wrapper {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 44px;
|
||
height: 24px;
|
||
margin-left: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.switch-wrapper input {
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.switch-slider {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #ccc;
|
||
transition: 0.3s;
|
||
border-radius: 24px;
|
||
}
|
||
|
||
.switch-slider.checked {
|
||
background-color: var(--p-primary-500);
|
||
}
|
||
|
||
.switch-button {
|
||
position: absolute;
|
||
content: "";
|
||
height: 18px;
|
||
width: 18px;
|
||
left: 3px;
|
||
bottom: 3px;
|
||
background-color: white;
|
||
transition: 0.3s;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.switch-button.checked {
|
||
left: 23px;
|
||
}
|
||
|
||
/* ---模型配置区域--- */
|
||
.models-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
min-height: 40px;
|
||
padding: 10px;
|
||
background: var(--secondary-background);
|
||
border-radius: 14px;
|
||
border: 1px dashed var(--p-divider-color);
|
||
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
/* ---模型标签--- */
|
||
.model-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 6px 10px;
|
||
background: var(--interface-menu-component-surface-selected);
|
||
color: var(--p-listbox-option-selected-color);
|
||
border-radius: 10px;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
/* 移除 transform 过渡，避免干扰 Sortable.js 的拖拽动画 */
|
||
transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
||
border: 2px solid transparent;
|
||
}
|
||
|
||
.model-tag.default {
|
||
background: var(--p-primary-500);
|
||
color: white;
|
||
}
|
||
|
||
.model-tag.selected {
|
||
border-color: var(--p-primary-500);
|
||
}
|
||
|
||
.model-tag:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.model-tag-icon {
|
||
font-size: 12px;
|
||
margin-right: 6px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.model-tag-name {
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.model-tag-badge {
|
||
font-size: 10px;
|
||
padding: 2px 4px;
|
||
background: rgba(255, 255, 255, 0.3);
|
||
border-radius: 2px;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
/* ---模型删除按钮--- */
|
||
.model-delete-btn {
|
||
background: none;
|
||
border: none;
|
||
color: var(--p-text-muted-color);
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
padding: 0 4px;
|
||
margin-left: 4px;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.model-tag.default .model-delete-btn {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
.model-delete-btn:hover {
|
||
color: var(--p-red-500);
|
||
}
|
||
|
||
/* ---空状态提示--- */
|
||
.empty-hint {
|
||
font-size: 12px;
|
||
color: var(--p-text-muted-color);
|
||
padding: 8px;
|
||
}
|
||
|
||
/* ---高级设置--- */
|
||
.advanced-settings {
|
||
margin-top: 12px;
|
||
padding: 12px;
|
||
background: #1a1a1a;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.advanced-settings-title {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
}
|
||
|
||
.advanced-settings-hint {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.settings-inputs {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.settings-inputs.enabled {
|
||
opacity: 1;
|
||
}
|
||
|
||
.advanced-input-group label {
|
||
display: block;
|
||
font-size: 12px;
|
||
color: #ccc;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.advanced-input-group input {
|
||
width: 100%;
|
||
padding: 6px 8px;
|
||
background: #2a2a2a;
|
||
border: 1px solid #444;
|
||
border-radius: 4px;
|
||
color: #fff;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* ---添加模型对话框--- */
|
||
.pa-settings-root .model-listbox {
|
||
position: fixed;
|
||
width: 320px;
|
||
max-height: 400px;
|
||
background: var(--p-content-background);
|
||
border: 1px solid var(--p-divider-color);
|
||
border-radius: 6px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
z-index: 10220;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.model-listbox-search {
|
||
padding: 12px;
|
||
border-bottom: 1px solid var(--p-divider-color);
|
||
background: var(--p-surface-50);
|
||
}
|
||
|
||
.model-listbox-search input {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid var(--p-divider-color);
|
||
border-radius: 4px;
|
||
background: var(--p-input-background);
|
||
color: var(--p-text-color);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.model-list-container {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 4px;
|
||
}
|
||
|
||
.model-list-item {
|
||
padding: 10px 12px;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
transition: background 0.2s;
|
||
font-size: 14px;
|
||
color: var(--p-text-color);
|
||
}
|
||
|
||
.model-list-item:hover {
|
||
background: var(--p-primary-100);
|
||
}
|
||
|
||
.model-list-empty {
|
||
text-align: center;
|
||
padding: 24px;
|
||
color: var(--p-text-muted-color);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.model-list-error {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.model-list-error-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.model-list-error-title {
|
||
font-size: 14px;
|
||
color: var(--p-text-color);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.model-list-error-detail {
|
||
font-size: 13px;
|
||
color: var(--p-red-500);
|
||
}
|
||
|
||
.model-listbox-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 10219;
|
||
}
|
||
|
||
/* ---新增服务对话框--- */
|
||
.add-service-dialog {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10220;
|
||
}
|
||
|
||
.add-service-dialog-content {
|
||
background: var(--p-content-background);
|
||
border-radius: 8px;
|
||
padding: 24px;
|
||
min-width: 500px;
|
||
max-width: 600px;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.add-service-dialog-title {
|
||
margin: 0 0 20px 0;
|
||
color: var(--p-text-color);
|
||
}
|
||
|
||
.add-service-dialog-buttons {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: flex-end;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.add-service-dialog-btn {
|
||
padding: 8px 16px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.add-service-dialog-btn.cancel {
|
||
border: 1px solid var(--p-divider-color);
|
||
background: var(--p-content-background);
|
||
color: var(--p-text-color);
|
||
}
|
||
|
||
.add-service-dialog-btn.create {
|
||
border: none;
|
||
background: var(--p-primary-500);
|
||
color: white;
|
||
}
|
||
|
||
/* ===================================================
|
||
4. 标签管理器专属样式
|
||
=================================================== */
|
||
|
||
/* ---拖拽排序相关样式--- */
|
||
.tags-manager-container .tag_accordion.dragging,
|
||
.tags-manager-container .tag_item.dragging {
|
||
opacity: 0.7;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||
z-index: 100;
|
||
}
|
||
|
||
.tags-manager-container .tag_accordion.drag-over-top {
|
||
border-top: 3px solid var(--p-primary-500) !important;
|
||
margin-top: -1px;
|
||
}
|
||
|
||
.tags-manager-container .tag_accordion.drag-over-bottom {
|
||
border-bottom: 3px solid var(--p-primary-500) !important;
|
||
margin-bottom: -1px;
|
||
}
|
||
|
||
.tags-manager-container .tag_item.drag-over-left {
|
||
border-left: 3px solid var(--p-primary-500) !important;
|
||
margin-left: -1px;
|
||
}
|
||
|
||
.tags-manager-container .tag_item.drag-over-right {
|
||
border-right: 3px solid var(--p-primary-500) !important;
|
||
margin-right: -1px;
|
||
}
|
||
|
||
/* 标签管理界面特有样式 */
|
||
.tags-manager-container {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.tags-scroll-container {
|
||
min-height: 300px;
|
||
}
|
||
|
||
.tags-manager-container .tag_item {
|
||
cursor: grab;
|
||
user-select: none;
|
||
}
|
||
|
||
.tags-manager-container .tag_item:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.tags-manager-container .tag_accordion {
|
||
cursor: grab;
|
||
user-select: none;
|
||
border: 1px solid transparent;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.tags-manager-container .tag_accordion:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
/* 标签配置管理器样式 */
|
||
.tags-config-container {
|
||
width: 800px;
|
||
height: 600px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.tags-config-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 标签管理弹窗大小 */
|
||
.tags-config-dialog {
|
||
width: 760px;
|
||
height: 600px;
|
||
}
|
||
|
||
.tag-management-section {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tags-action-container {
|
||
display: flex;
|
||
gap: 8px;
|
||
background: transparent;
|
||
}
|
||
|
||
.tags-scroll-container {
|
||
flex: 1;
|
||
overflow-y: hidden;
|
||
overflow-x: hidden;
|
||
padding: 10px;
|
||
border: 1px solid var(--comfy-menu-secondary-bg);
|
||
border-radius: 8px;
|
||
background-color: var(--p-listbox-background);
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.settings-action-btn {
|
||
margin: 0 4px;
|
||
}
|
||
|
||
/* 删除按钮样式 */
|
||
|
||
.tag_delete_button {
|
||
background: none;
|
||
border: none;
|
||
color: var(--p-button-text-secondary-color);
|
||
cursor: pointer;
|
||
padding: 2px;
|
||
margin-left: 4px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
min-width: 24px;
|
||
/* 添加最小宽度 */
|
||
min-height: 24px;
|
||
/* 添加最小高度 */
|
||
transition: all 0.2s;
|
||
opacity: 0.5;
|
||
box-sizing: border-box;
|
||
/* 确保padding不会影响整体大小 */
|
||
}
|
||
|
||
.tag_delete_button.small {
|
||
width: 20px;
|
||
height: 20px;
|
||
min-width: 20px;
|
||
/* 添加最小宽度 */
|
||
min-height: 20px;
|
||
/* 添加最小高度 */
|
||
padding: 2px;
|
||
box-sizing: border-box;
|
||
/* 确保padding不会影响整体大小 */
|
||
}
|
||
|
||
.tag_delete_button:hover {
|
||
background: rgba(255, 100, 100, 0.2);
|
||
color: rgba(255, 100, 100, 1);
|
||
opacity: 1;
|
||
}
|
||
|
||
.tag_delete_icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
min-width: 14px;
|
||
/* 添加最小宽度 */
|
||
min-height: 14px;
|
||
/* 添加最小高度 */
|
||
flex-shrink: 0;
|
||
/* 防止图标被压缩 */
|
||
display: block;
|
||
/* 确保图标显示为块级元素 */
|
||
}
|
||
|
||
.tag_delete_icon.small {
|
||
width: 12px;
|
||
height: 12px;
|
||
min-width: 12px;
|
||
/* 添加最小宽度 */
|
||
min-height: 12px;
|
||
/* 添加最小高度 */
|
||
}
|
||
|
||
/* 编辑按钮样式 */
|
||
.tag_edit_button {
|
||
background: none;
|
||
border: none;
|
||
color: var(--p-text-muted-color);
|
||
cursor: pointer;
|
||
padding: 2px;
|
||
margin-left: 4px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
min-width: 24px;
|
||
/* 添加最小宽度 */
|
||
min-height: 24px;
|
||
/* 添加最小高度 */
|
||
transition: all 0.2s;
|
||
opacity: 0.5;
|
||
box-sizing: border-box;
|
||
/* 确保padding不会影响整体大小 */
|
||
}
|
||
|
||
.tag_edit_button.small {
|
||
width: 20px;
|
||
height: 20px;
|
||
min-width: 20px;
|
||
/* 添加最小宽度 */
|
||
min-height: 20px;
|
||
/* 添加最小高度 */
|
||
padding: 2px;
|
||
box-sizing: border-box;
|
||
/* 确保padding不会影响整体大小 */
|
||
}
|
||
|
||
.tag_edit_button:hover {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
color: rgb(207, 215, 211);
|
||
opacity: 1;
|
||
}
|
||
|
||
.tag_edit_icon {
|
||
color: var(--p-button-text-secondary-color);
|
||
font-size: 12px;
|
||
width: 12px;
|
||
height: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.tag_edit_icon.small {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
|
||
.tag_action_icon {
|
||
font-size: 14px;
|
||
width: 14px;
|
||
/* 添加固定宽度 */
|
||
height: 14px;
|
||
/* 添加固定高度 */
|
||
min-width: 14px;
|
||
/* 添加最小宽度 */
|
||
min-height: 14px;
|
||
/* 添加最小高度 */
|
||
flex-shrink: 0;
|
||
/* 防止图标被压缩 */
|
||
display: flex;
|
||
/* 使用flex布局确保内容居中 */
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.tag_action_icon.small {
|
||
font-size: 12px;
|
||
width: 12px;
|
||
/* 添加固定宽度 */
|
||
height: 12px;
|
||
/* 添加固定高度 */
|
||
min-width: 12px;
|
||
/* 添加最小宽度 */
|
||
min-height: 12px;
|
||
/* 添加最小高度 */
|
||
}
|
||
|
||
/* 确保图标在按钮中居中显示 */
|
||
.tag_accordion_icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
/* 添加右对齐 */
|
||
gap: 4px;
|
||
height: 24px;
|
||
/* 保持固定高度 */
|
||
min-width: 80px;
|
||
/* 确保容器有足够的宽度容纳所有图标 */
|
||
}
|
||
|
||
.tag_accordion_icon .accordion_arrow_icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
min-width: 24px;
|
||
min-height: 24px;
|
||
padding: 2px;
|
||
border-radius: 50%;
|
||
color: var(--p-button-text-secondary-color);
|
||
opacity: 0.5;
|
||
transition: all 0.2s;
|
||
box-sizing: border-box;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tag_accordion_icon .accordion_arrow_icon:hover {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
opacity: 1;
|
||
}
|
||
|
||
.tag_accordion_icon .accordion_arrow_icon.rotate-180 {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
/* 调整图标容器内部布局 */
|
||
.tag_accordion_header {
|
||
padding: 4px 14px;
|
||
background-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 60%);
|
||
cursor: pointer;
|
||
user-select: none;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
transition: all 0.2s ease;
|
||
border-radius: 6px;
|
||
min-height: 32px;
|
||
/* 确保标题栏有足够的高度 */
|
||
}
|
||
|
||
.tag_accordion_title {
|
||
flex: 1;
|
||
font-size: 12px;
|
||
color: var(--p-text-muted-color);
|
||
font-weight: 500;
|
||
margin-right: 8px;
|
||
/* 添加右边距，与图标保持距离 */
|
||
overflow: hidden;
|
||
/* 防止文本溢出 */
|
||
text-overflow: ellipsis;
|
||
/* 文本溢出时显示省略号 */
|
||
white-space: nowrap;
|
||
/* 保持单行 */
|
||
}
|
||
|
||
.tags_container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
padding: 8px;
|
||
background-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 90%);
|
||
border-radius: 0 0 4px 4px;
|
||
}
|
||
|
||
/* 使用popup.css中定义的标签样式，只修改cursor为grab */
|
||
.tags-manager-container .tag_item {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
cursor: grab;
|
||
}
|
||
|
||
.tags-manager-container .tag_item:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.tags-manager-container .tag_accordion {
|
||
position: relative;
|
||
margin-bottom: 8px;
|
||
border: 1px solid transparent;
|
||
border-radius: 4px;
|
||
transition: all 0.2s ease;
|
||
cursor: default;
|
||
/* 标签管理页面中使用默认指针 */
|
||
user-select: none;
|
||
}
|
||
|
||
.tags-manager-container .tag_accordion:hover {
|
||
border-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 60%);
|
||
}
|
||
|
||
.tags-manager-container .tag_accordion_header {
|
||
cursor: grab;
|
||
/* 只有标题部分可拖动 */
|
||
}
|
||
|
||
.tags-manager-container .tag_accordion_header:active {
|
||
cursor: grabbing;
|
||
/* 拖动时显示抓取光标 */
|
||
}
|
||
|
||
/* 拖拽状态样式 */
|
||
.tags-manager-container .tag_accordion.dragging,
|
||
.tags-manager-container .tag_item.dragging {
|
||
opacity: 0.5;
|
||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
|
||
z-index: 10;
|
||
}
|
||
|
||
/* 新增拖拽动画样式 */
|
||
.tags-manager-container .tag-dragging,
|
||
.tags-manager-container .category-dragging {
|
||
opacity: 0.6 !important;
|
||
/* 移除缩放效果 */
|
||
/* transform: scale(1.02); */
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
|
||
z-index: 100 !important;
|
||
}
|
||
|
||
/* 拖拽过程中的目标位置指示器 */
|
||
.tag-ghost,
|
||
.category-ghost {
|
||
opacity: 0.3;
|
||
background-color: color-mix(in srgb, var(--p-primary-500), transparent 85%) !important;
|
||
border: 1px dashed var(--p-primary-500) !important;
|
||
}
|
||
|
||
/* 被选中的元素样式 */
|
||
.tag-chosen,
|
||
.category-chosen {
|
||
background-color: color-mix(in srgb, var(--p-primary-500), transparent 90%);
|
||
border-color: var(--p-primary-500) !important;
|
||
}
|
||
|
||
/* 拖拽时的样式 */
|
||
.tag-drag,
|
||
.category-drag {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 添加元素移动的过渡动画 */
|
||
.tags-manager-container .tag_accordion,
|
||
.tags-manager-container .tag_item {
|
||
/* 移除transform过渡效果 */
|
||
transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
|
||
/* 拖拽排序时的位置指示 */
|
||
.sortable-fallback {
|
||
opacity: 0 !important;
|
||
}
|
||
|
||
.sortable-ghost {
|
||
position: relative;
|
||
}
|
||
|
||
.sortable-ghost::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: color-mix(in srgb, var(--p-primary-500), transparent 90%);
|
||
border: 1px dashed var(--p-primary-500);
|
||
z-index: -1;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.tags-manager-container .tag_accordion.drag-over-top {
|
||
border-top: 2px solid var(--p-primary-500);
|
||
}
|
||
|
||
.tags-manager-container .tag_accordion.drag-over-bottom {
|
||
border-bottom: 2px solid var(--p-primary-500);
|
||
}
|
||
|
||
.tags-manager-container .tag_item.drag-over-left {
|
||
border-left: 2px solid var(--p-primary-500);
|
||
}
|
||
|
||
.tags-manager-container .tag_item.drag-over-right {
|
||
border-right: 2px solid var(--p-primary-500);
|
||
}
|
||
|
||
/* tooltip处理 */
|
||
.has-tooltip {
|
||
position: relative;
|
||
}
|
||
|
||
/* 标签容器布局 */
|
||
.tags-manager-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
/* 弹窗表单内容样式 */
|
||
.dialog-form-content {
|
||
padding: 1.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
flex: 1;
|
||
}
|
||
|
||
.dialog-form-content .settings-form-group {
|
||
margin-bottom: 4rem;
|
||
}
|
||
|
||
.dialog-form-content .settings-form-group:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* 确保下拉框和输入框有合适的宽度和间距 */
|
||
.dialog-form-content .p-dropdown,
|
||
.dialog-form-content .p-inputtext {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 规则配置表单样式 */
|
||
.rules-config-form {
|
||
max-height: 70vh;
|
||
overflow: auto;
|
||
}
|
||
|
||
.settings-form-textarea {
|
||
width: 100%;
|
||
min-height: 150px;
|
||
height: calc(100% - 30px);
|
||
resize: vertical;
|
||
font-family: monospace;
|
||
padding: 8px;
|
||
background-color: var(--p-inputtext-background);
|
||
border: 1px solid var(--p-inputtext-border-color);
|
||
border-radius: 4px;
|
||
color: var(--p-inputtext-color);
|
||
flex-grow: 1;
|
||
}
|
||
|
||
/* API配置表单样式 */
|
||
.api-config-form {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
}
|
||
|
||
/* 刷新按钮样式 */
|
||
.settings-refresh-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 14px;
|
||
color: var(--p-message-info-color);
|
||
cursor: pointer;
|
||
background: transparent;
|
||
border: none;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.settings-refresh-button:hover {
|
||
background-color: color-mix(in srgb, var(--p-message-info-color), transparent 90%);
|
||
}
|
||
|
||
.refresh-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 4px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* 表单分组的间距 */
|
||
.settings-form-section {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* 表单输入组件的样式 */
|
||
.settings-form-group {
|
||
margin-bottom: 26px;
|
||
}
|
||
|
||
/* 水平布局组的样式 */
|
||
.settings-form-group.horizontal {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
}
|
||
|
||
.settings-form-group.horizontal>div {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
}
|
||
|
||
/* 添加标签管理部分的样式 */
|
||
.tag-management-section {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tags-config-container {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.tags-config-form {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.tags-manager-container {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tags-scroll-container {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
max-height: 500px;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* 确保标签手风琴适配宽度 */
|
||
.tag_accordion {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 确保标签项目不会导致容器溢出 */
|
||
.tags_container {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.tag_item {
|
||
max-width: calc(100% - 16px);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 修复弹窗样式，确保内容不会溢出 */
|
||
.settings-dialog {
|
||
max-width: 90vw;
|
||
width: 600px;
|
||
}
|
||
|
||
.settings-dialog-content {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.settings-form-section {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
/* ===================================================
|
||
5. 规则配置专属样式
|
||
=================================================== */
|
||
|
||
/* ---提示词列表样式--- */
|
||
.prompt-list-container {
|
||
border: 1px solid var(--p-dialog-border-color);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
background-color: var(--p-listbox-background);
|
||
height: 300px;
|
||
min-height: 300px;
|
||
max-height: 300px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 反推规则配置列表特定高度 */
|
||
.vision-prompt-list-container {
|
||
height: 300px;
|
||
min-height: 300px;
|
||
max-height: 300px;
|
||
}
|
||
|
||
/* 视频反推规则配置列表固定高度 */
|
||
.video-prompt-list-container {
|
||
height: 300px;
|
||
min-height: 300px;
|
||
max-height: 300px;
|
||
}
|
||
|
||
.prompt-list-header {
|
||
display: flex;
|
||
background-color: var(--p-button-secondary-background);
|
||
border-bottom: 1px solid var(--p-dialog-border-color);
|
||
font-weight: 600;
|
||
color: var(--p-dialog-header-color);
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
}
|
||
|
||
/* 移除表头单元格的竖向分割线 */
|
||
.prompt-list-header .prompt-list-cell {
|
||
border-right: none;
|
||
}
|
||
|
||
.prompt-scroll-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.prompt-list-row {
|
||
display: flex;
|
||
border-bottom: 1px solid var(--p-dialog-border-color);
|
||
transition: background-color 0.2s ease;
|
||
cursor: move;
|
||
}
|
||
|
||
.prompt-list-row:hover {
|
||
background-color: var(--p-select-option-focus-background);
|
||
}
|
||
|
||
.prompt-list-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.prompt-list-row.sortable-ghost {
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.prompt-list-row.sortable-chosen {
|
||
background-color: var(--p-select-option-selected-background);
|
||
}
|
||
|
||
.prompt-list-cell {
|
||
padding: 8px 12px;
|
||
border-right: 1px solid var(--p-dialog-border-color);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
position: relative;
|
||
}
|
||
|
||
.prompt-list-cell:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.prompt-list-cell.status-cell {
|
||
width: 80px;
|
||
flex-shrink: 0;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.prompt-list-cell.name-cell {
|
||
width: 150px;
|
||
flex-shrink: 0;
|
||
min-width: 100px;
|
||
}
|
||
|
||
.prompt-list-cell.content-cell {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
}
|
||
|
||
.prompt-list-cell.action-cell {
|
||
width: 100px;
|
||
flex-shrink: 0;
|
||
text-align: center;
|
||
min-width: 80px;
|
||
}
|
||
|
||
/* 列宽调整手柄 */
|
||
.column-resizer {
|
||
position: absolute;
|
||
top: 0;
|
||
right: -2px;
|
||
width: 4px;
|
||
height: 100%;
|
||
cursor: col-resize;
|
||
background: transparent;
|
||
z-index: 10;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.column-resizer:hover {
|
||
background: var(--p-primary-500);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.column-resizer.resizing {
|
||
background: var(--p-primary-500);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 确保列单元格有相对定位以支持绝对定位的调整手柄 */
|
||
.prompt-list-cell {
|
||
position: relative;
|
||
}
|
||
|
||
/* 拖拽时的全局样式 */
|
||
body.column-resizing {
|
||
cursor: col-resize !important;
|
||
user-select: none !important;
|
||
}
|
||
|
||
body.column-resizing * {
|
||
cursor: col-resize !important;
|
||
user-select: none !important;
|
||
}
|
||
|
||
/* 拖拽排序样式 */
|
||
.sortable-drag {
|
||
opacity: 0.8;
|
||
transform: rotate(2deg);
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.prompt-list-row.sortable-ghost {
|
||
opacity: 0.4;
|
||
background: var(--p-primary-100);
|
||
}
|
||
|
||
.prompt-list-row.sortable-chosen {
|
||
background: var(--p-select-option-selected-background);
|
||
border: 1px solid var(--p-primary-500);
|
||
}
|
||
|
||
/* 状态图标样式优化 */
|
||
.status-cell .active-status {
|
||
color: var(--p-green-500);
|
||
cursor: pointer;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.status-cell .inactive-status {
|
||
color: var(--p-surface-400);
|
||
cursor: pointer;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.status-cell:hover .active-status {
|
||
color: var(--p-green-600);
|
||
}
|
||
|
||
.status-cell:hover .inactive-status {
|
||
color: var(--p-primary-500);
|
||
}
|
||
|
||
/* 状态图标样式 */
|
||
.active-status {
|
||
color: var(--p-message-success-color);
|
||
}
|
||
|
||
.inactive-status {
|
||
color: var(--p-message-warn-color);
|
||
}
|
||
|
||
/* 操作按钮样式 */
|
||
.prompt-action-btn {
|
||
background: transparent;
|
||
border: none;
|
||
padding: 4px 6px;
|
||
margin: 0 2px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s ease;
|
||
color: var(--p-button-text-secondary-color);
|
||
}
|
||
|
||
.prompt-action-btn:hover {
|
||
background-color: var(--p-button-secondary-background);
|
||
}
|
||
|
||
.prompt-action-btn.toggle-btn:hover {
|
||
color: var(--p-message-info-color);
|
||
}
|
||
|
||
.prompt-action-btn.edit-btn:hover {
|
||
color: var(--p-message-warn-color);
|
||
}
|
||
|
||
.prompt-action-btn.delete-btn:hover {
|
||
color: var(--p-message-error-color);
|
||
}
|
||
|
||
/* 规则配置对话框样式 */
|
||
.rules-config-form {
|
||
max-height: 70vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.settings-modal.prompt-edit-dialog {
|
||
max-height: 90vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.rules-config-content {
|
||
padding: 20px;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.rules-section {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.rules-section h3 {
|
||
margin: 0 0 15px 0;
|
||
color: var(--p-dialog-header-color);
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 标签页样式 */
|
||
.settings-modal .popup_tabs_container {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.settings-modal .popup_tabs_scroll {
|
||
overflow-x: hidden;
|
||
overflow-y: hidden;
|
||
}
|
||
|
||
.settings-modal .popup_tabs {
|
||
display: flex;
|
||
border-bottom: 1px solid var(--p-dialog-border-color);
|
||
min-width: max-content;
|
||
}
|
||
|
||
.settings-modal .popup_tab {
|
||
padding: 8px 16px;
|
||
background: var(--p-button-secondary-background);
|
||
border: 1px solid var(--p-dialog-border-color);
|
||
border-bottom: none;
|
||
cursor: pointer;
|
||
margin-right: 2px;
|
||
border-radius: 4px 4px 0 0;
|
||
white-space: nowrap;
|
||
font-size: 13px;
|
||
color: var(--p-button-text-secondary-color);
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.settings-modal .popup_tab.active {
|
||
background: var(--p-dialog-background);
|
||
border-bottom: 1px solid var(--p-dialog-background);
|
||
margin-bottom: -1px;
|
||
font-weight: 500;
|
||
color: var(--p-dialog-header-color);
|
||
}
|
||
|
||
.settings-modal .popup_tab:hover {
|
||
background: var(--p-select-option-focus-background);
|
||
}
|
||
|
||
.settings-modal .popup_tab.active:hover {
|
||
background: var(--p-dialog-background);
|
||
}
|
||
|
||
.settings-modal .popup_tab_content {
|
||
display: none;
|
||
}
|
||
|
||
.settings-modal .popup_tab_content.active {
|
||
display: block;
|
||
}
|
||
|
||
/* 对话框按钮样式 */
|
||
.dialog-buttons {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
margin-top: 20px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid var(--p-dialog-border-color);
|
||
}
|
||
|
||
.dialog-btn {
|
||
padding: 8px 16px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.dialog-btn.primary {
|
||
background: var(--p-button-primary-background);
|
||
color: var(--p-button-primary-color);
|
||
}
|
||
|
||
.dialog-btn.primary:hover {
|
||
background: var(--p-button-primary-hover-background);
|
||
}
|
||
|
||
.dialog-btn.secondary {
|
||
background: var(--p-button-secondary-background);
|
||
color: var(--p-button-secondary-color);
|
||
}
|
||
|
||
.dialog-btn.secondary:hover {
|
||
background: var(--p-button-secondary-hover-background);
|
||
}
|
||
|
||
|
||
|
||
/* 微信徽标悬浮二维码 */
|
||
.pa-wechat-badge {
|
||
position: relative;
|
||
/* 作为二维码定位参照 */
|
||
/* 让绝对定位参照到内容容器 */
|
||
}
|
||
|
||
.pa-wechat-qr {
|
||
position: absolute;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
top: calc(100% + 6px);
|
||
right: 10px;
|
||
/* 向左偏移，避免被滚动条遮挡 */
|
||
transform: none;
|
||
background: var(--p-dialog-background);
|
||
border: 1px solid var(--p-dialog-border-color);
|
||
border-radius: 10px;
|
||
padding: 6px;
|
||
box-shadow: var(--p-dialog-shadow);
|
||
z-index: calc(var(--settings-modal-z-index) + 5);
|
||
/* 淡入淡出动画 */
|
||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||
}
|
||
|
||
.pa-wechat-badge:hover .pa-wechat-qr {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.pa-wechat-qr-img {
|
||
display: block;
|
||
width: 256px;
|
||
height: auto;
|
||
}
|
||
|
||
/* ===================================================
|
||
7. 确认气泡框组件样式 (ConfirmPopup)
|
||
=================================================== */
|
||
|
||
/* ---气泡框容器--- */
|
||
.pa-confirm-popup {
|
||
position: fixed;
|
||
z-index: var(--settings-confirm-popup-z-index);
|
||
opacity: 0;
|
||
transform: scale(0.9);
|
||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||
box-shadow: var(--p-dialog-shadow);
|
||
}
|
||
|
||
.pa-confirm-popup.pa-confirm-popup-show {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
.pa-confirm-popup.pa-confirm-popup-hide {
|
||
opacity: 0;
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
/* ---气泡框内容--- */
|
||
.pa-confirm-popup-content {
|
||
background: var(--p-dialog-background);
|
||
border: 1px solid var(--p-dialog-border-color);
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||
padding: 18px 30px 16px 30px;
|
||
min-width: 280px;
|
||
max-width: 600px;
|
||
}
|
||
|
||
/* 当包含模型参数表单时,使用更大的宽度 */
|
||
.pa-confirm-popup-content:has(.model-params-form) {
|
||
min-width: 480px;
|
||
}
|
||
|
||
/* ---消息区域--- */
|
||
.pa-confirm-popup-message {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
margin-bottom: 30px;
|
||
color: var(--p-dialog-color);
|
||
font-size: 16px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.pa-confirm-popup-icon {
|
||
font-size: 18px;
|
||
color: var(--p-primary-500);
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* ---分割线--- */
|
||
.pa-confirm-popup-divider {
|
||
height: 1px;
|
||
background-color: var(--p-dialog-border-color);
|
||
margin: 0 -30px 16px -30px;
|
||
}
|
||
|
||
/* ---表单区域--- */
|
||
.pa-confirm-popup-form {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.pa-confirm-popup-form .settings-form-group {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.pa-confirm-popup-form .settings-form-group:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* ---模型参数表单横向布局--- */
|
||
.pa-confirm-popup-form.model-params-form {
|
||
display: flex;
|
||
gap: 20px;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.pa-confirm-popup-form.model-params-form .settings-form-group {
|
||
margin-bottom: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ---数字输入框样式优化--- */
|
||
.pa-confirm-popup-form input[type="number"] {
|
||
/* 隐藏默认的上下箭头 */
|
||
appearance: textfield;
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
.pa-confirm-popup-form input[type="number"]::-webkit-outer-spin-button,
|
||
.pa-confirm-popup-form input[type="number"]::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 自定义数字输入框的上下调整按钮容器 */
|
||
.pa-confirm-popup-form .float-label-container {
|
||
position: relative;
|
||
}
|
||
|
||
/* 为数字输入框添加自定义上下按钮 */
|
||
.pa-confirm-popup-form input[type="number"] {
|
||
padding-right: 20px;
|
||
}
|
||
|
||
/* 数字输入框按钮组 */
|
||
.pa-confirm-popup-form .number-input-buttons {
|
||
position: absolute;
|
||
right: 1px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
height: calc(100% - 2px);
|
||
width: 24px;
|
||
z-index: 2;
|
||
}
|
||
|
||
.pa-confirm-popup-form .number-input-button {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--p-inputtext-background);
|
||
border: none;
|
||
border-left: 1px solid var(--p-inputtext-border-color);
|
||
color: var(--p-text-muted-color);
|
||
cursor: pointer;
|
||
font-size: 9px;
|
||
transition: all 0.2s;
|
||
user-select: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.pa-confirm-popup-form .number-input-button:first-child {
|
||
border-top-right-radius: 5px;
|
||
border-bottom: 0.5px solid var(--p-inputtext-border-color);
|
||
}
|
||
|
||
.pa-confirm-popup-form .number-input-button:last-child {
|
||
border-bottom-right-radius: 5px;
|
||
}
|
||
|
||
.pa-confirm-popup-form .number-input-button:hover {
|
||
background: var(--p-inputtext-hover-border-color);
|
||
color: var(--p-inputtext-color);
|
||
}
|
||
|
||
.pa-confirm-popup-form .number-input-button:active {
|
||
background: var(--p-primary-500);
|
||
color: white;
|
||
}
|
||
|
||
.pa-confirm-popup-form .number-input-button .pi {
|
||
font-size: 9px;
|
||
}
|
||
|
||
|
||
|
||
/* ---底部按钮组--- */
|
||
.pa-confirm-popup-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
}
|
||
|
||
.pa-confirm-popup-footer .p-button-sm {
|
||
padding: 6px 16px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* ---箭头指针--- */
|
||
.pa-confirm-popup-arrow {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
border-style: solid;
|
||
}
|
||
|
||
/* 箭头在顶部（气泡在下方） */
|
||
.pa-confirm-popup-arrow.top {
|
||
top: -8px;
|
||
border-width: 0 8px 8px 8px;
|
||
border-color: transparent transparent var(--p-dialog-border-color) transparent;
|
||
}
|
||
|
||
.pa-confirm-popup-arrow.top::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 1px;
|
||
left: -8px;
|
||
width: 0;
|
||
height: 0;
|
||
border-style: solid;
|
||
border-width: 0 8px 8px 8px;
|
||
border-color: transparent transparent var(--p-dialog-background) transparent;
|
||
}
|
||
|
||
/* 箭头在底部（气泡在上方） */
|
||
.pa-confirm-popup-arrow.bottom {
|
||
bottom: -8px;
|
||
border-width: 8px 8px 0 8px;
|
||
border-color: var(--p-dialog-border-color) transparent transparent transparent;
|
||
}
|
||
|
||
.pa-confirm-popup-arrow.bottom::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -9px;
|
||
left: -8px;
|
||
width: 0;
|
||
height: 0;
|
||
border-style: solid;
|
||
border-width: 8px 8px 0 8px;
|
||
border-color: var(--p-dialog-background) transparent transparent transparent;
|
||
}
|
||
|
||
/* 箭头在左侧（气泡在右方） */
|
||
.pa-confirm-popup-arrow.left {
|
||
left: -8px;
|
||
border-width: 8px 8px 8px 0;
|
||
border-color: transparent var(--p-dialog-border-color) transparent transparent;
|
||
}
|
||
|
||
.pa-confirm-popup-arrow.left::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -8px;
|
||
left: 1px;
|
||
width: 0;
|
||
height: 0;
|
||
border-style: solid;
|
||
border-width: 8px 8px 8px 0;
|
||
border-color: transparent var(--p-dialog-background) transparent transparent;
|
||
}
|
||
|
||
/* 箭头在右侧（气泡在左方） */
|
||
.pa-confirm-popup-arrow.right {
|
||
right: -8px;
|
||
border-width: 8px 0 8px 8px;
|
||
border-color: transparent transparent transparent var(--p-dialog-border-color);
|
||
}
|
||
|
||
.pa-confirm-popup-arrow.right::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -8px;
|
||
left: -9px;
|
||
width: 0;
|
||
height: 0;
|
||
border-style: solid;
|
||
border-width: 8px 0 8px 8px;
|
||
border-color: transparent transparent transparent var(--p-dialog-background);
|
||
}
|
||
|
||
/* ===================================================
|
||
8. 右键菜单组件样式 (ContextMenu)
|
||
=================================================== */
|
||
|
||
/* ---菜单容器--- */
|
||
.pa-context-menu {
|
||
position: fixed;
|
||
z-index: var(--settings-context-menu-z-index);
|
||
background: var(--p-dialog-background);
|
||
border: 1px solid var(--p-dialog-border-color);
|
||
border-radius: 6px;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||
min-width: 180px;
|
||
opacity: 0;
|
||
transform: scale(0.95);
|
||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||
}
|
||
|
||
.pa-context-menu.pa-context-menu-show {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
.pa-context-menu.pa-context-menu-hide {
|
||
opacity: 0;
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
/* ---菜单列表--- */
|
||
.pa-context-menu-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 4px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
}
|
||
|
||
/* ---菜单项--- */
|
||
.pa-context-menu-item {
|
||
position: relative;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.pa-context-menu-item:hover {
|
||
background-color: var(--p-form-field-filled-hover-background);
|
||
}
|
||
|
||
.pa-context-menu-item.disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.pa-context-menu-item.disabled:hover {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* ---菜单项内容--- */
|
||
.pa-context-menu-item-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 10px;
|
||
color: var(--p-dialog-color);
|
||
}
|
||
|
||
/* ---菜单项图标--- */
|
||
.pa-context-menu-item-icon {
|
||
font-size: 16px;
|
||
color: var(--p-text-muted-color);
|
||
width: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.pa-context-menu-item:hover .pa-context-menu-item-icon {
|
||
color: var(--p-primary-500);
|
||
}
|
||
|
||
/* ---菜单项文本--- */
|
||
.pa-context-menu-item-label {
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ---二级子菜单样式--- */
|
||
/* 有子菜单的菜单项 */
|
||
.pa-context-menu-item-has-submenu {
|
||
position: relative;
|
||
}
|
||
|
||
.pa-context-menu-item-has-submenu:hover {
|
||
background-color: var(--p-form-field-filled-hover-background);
|
||
}
|
||
|
||
/* 子菜单箭头图标 */
|
||
.pa-context-menu-submenu-icon {
|
||
margin-left: auto;
|
||
padding-left: 12px;
|
||
font-size: 10px;
|
||
color: var(--p-button-text-secondary-color);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.pa-context-menu-item-has-submenu:hover .pa-context-menu-submenu-icon {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 子菜单面板 */
|
||
.pa-context-submenu {
|
||
min-width: 10rem;
|
||
}
|
||
|
||
/* ---分隔符--- */
|
||
.pa-context-menu-separator {
|
||
height: 1px;
|
||
background-color: var(--p-dialog-border-color);
|
||
margin: 4px 8px;
|
||
list-style: none;
|
||
}
|
||
|
||
/* ---危险操作样式（如删除）--- */
|
||
.pa-context-menu-item.danger .pa-context-menu-item-icon {
|
||
color: var(--p-red-500);
|
||
}
|
||
|
||
.pa-context-menu-item.danger:hover .pa-context-menu-item-icon {
|
||
color: var(--p-red-600);
|
||
}
|
||
|
||
/* ===================================================
|
||
9. 分体按钮组件样式 (Split Button)
|
||
=================================================== */
|
||
|
||
/* ---分体按钮容器--- */
|
||
.p-splitbutton-compact {
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
/* ---分体按钮通用样式--- */
|
||
.p-splitbutton-compact .p-button {
|
||
padding: 0.25rem 0.5rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ---分体按钮 Primary 主题--- */
|
||
.p-splitbutton-compact.p-splitbutton-primary .p-button {
|
||
background: var(--p-button-primary-background);
|
||
color: var(--p-button-primary-color);
|
||
border-color: var(--p-button-primary-border-color);
|
||
}
|
||
|
||
.p-splitbutton-compact.p-splitbutton-primary .p-button:hover:not(:disabled) {
|
||
background: var(--p-button-primary-hover-background);
|
||
color: var(--p-button-primary-hover-color);
|
||
border-color: var(--p-button-primary-hover-border-color);
|
||
}
|
||
|
||
/* ---下拉触发按钮--- */
|
||
.p-splitbutton-compact .p-splitbutton-menubutton {
|
||
width: 23px;
|
||
padding: 0.25rem 0.3rem;
|
||
}
|
||
|
||
/* ---按钮文本和图标--- */
|
||
.p-splitbutton-compact .p-button-label {
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.p-splitbutton-compact .p-button-icon {
|
||
font-size: 10px;
|
||
}
|
||
|
||
.pa-context-menu-item.danger:hover {
|
||
background-color: rgba(239, 68, 68, 0.1);
|
||
}
|
||
|
||
/* ---选中状态样式（用于下拉选择器）--- */
|
||
.pa-context-menu-item.active {
|
||
background-color: var(--p-form-field-filled-hover-background);
|
||
}
|
||
|
||
.pa-context-menu-item.active .pa-context-menu-item-label {
|
||
color: var(--p-primary-color);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.pa-context-menu-item.active::before {
|
||
content: '\2713';
|
||
position: absolute;
|
||
left: 8px;
|
||
color: var(--p-primary-color);
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.pa-context-menu-item.active .pa-context-menu-item-content {
|
||
padding-left: 24px;
|
||
}
|
||
|
||
|
||
/* ===================================================
|
||
9. Tooltip 提示框组件样式
|
||
=================================================== */
|
||
|
||
/* ---Tooltip 容器--- */
|
||
.pa-tooltip {
|
||
position: fixed;
|
||
z-index: var(--settings-tooltip-z-index);
|
||
background: var(--p-surface-700);
|
||
/* border: 1px solid var(--p-dialog-border-color); */
|
||
border-radius: 6px;
|
||
padding: 6px 12px;
|
||
font-size: 13px;
|
||
color: var(--p-surface-0);
|
||
max-width: 300px;
|
||
word-wrap: break-word;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||
opacity: 0;
|
||
transform: scale(0.95);
|
||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.pa-tooltip.pa-tooltip-show {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
/* ---Tooltip 箭头--- */
|
||
.pa-tooltip-arrow {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
border-style: solid;
|
||
}
|
||
|
||
/* 箭头在顶部（tooltip 在下方） */
|
||
.pa-tooltip-arrow.top {
|
||
top: -6px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-width: 0 6px 6px 6px;
|
||
border-color: transparent transparent var(--p-surface-700) transparent;
|
||
}
|
||
|
||
/* 箭头在底部（tooltip 在上方） */
|
||
.pa-tooltip-arrow.bottom {
|
||
bottom: -6px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-width: 6px 6px 0 6px;
|
||
border-color: var(--p-surface-700) transparent transparent transparent;
|
||
}
|
||
|
||
/* 箭头在左侧（tooltip 在右方） */
|
||
.pa-tooltip-arrow.left {
|
||
left: -6px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
border-width: 6px 6px 6px 0;
|
||
border-color: transparent var(--p-surface-700) transparent transparent;
|
||
}
|
||
|
||
/* 箭头在右侧（tooltip 在左方） */
|
||
.pa-tooltip-arrow.right {
|
||
right: -6px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
border-width: 6px 0 6px 6px;
|
||
border-color: transparent transparent transparent var(--p-surface-700);
|
||
}
|
||
|
||
/* ===================================================
|
||
多选 Listbox 组件样式
|
||
=================================================== */
|
||
|
||
/* ---Listbox 容器--- */
|
||
.pa-multi-listbox {
|
||
position: fixed;
|
||
width: 320px;
|
||
max-height: 400px;
|
||
background: var(--p-content-background);
|
||
border: 1px solid var(--p-dialog-border-color);
|
||
border-radius: 6px;
|
||
box-shadow: var(--p-dialog-shadow);
|
||
z-index: var(--settings-multi-listbox-z-index);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ---搜索框容器--- */
|
||
.pa-multi-listbox-search {
|
||
padding: 12px;
|
||
border-bottom: 1px solid var(--p-dialog-border-color);
|
||
background: var(--p-inputtext-background);
|
||
}
|
||
|
||
.pa-multi-listbox-search-input {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
padding-right: 32px;
|
||
border: 1px solid var(--p-divider-color);
|
||
border-radius: 4px;
|
||
background: var(--p-input-background);
|
||
color: var(--p-text-color);
|
||
font-size: 14px;
|
||
outline: none;
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.pa-multi-listbox-search-input:focus {
|
||
border-color: var(--p-primary-color);
|
||
}
|
||
|
||
.pa-multi-listbox-search-input::placeholder {
|
||
color: var(--p-text-muted-color);
|
||
}
|
||
|
||
/* 搜索图标 */
|
||
.pa-multi-listbox-search-wrapper {
|
||
position: relative;
|
||
}
|
||
|
||
.pa-multi-listbox-search-icon {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--p-text-muted-color);
|
||
font-size: 14px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ---列表容器--- */
|
||
.pa-multi-listbox-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 4px;
|
||
}
|
||
|
||
/* ---列表项--- */
|
||
.pa-multi-listbox-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10px 12px;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
transition: background 0.2s;
|
||
font-size: 14px;
|
||
color: var(--p-text-color);
|
||
user-select: none;
|
||
}
|
||
|
||
.pa-multi-listbox-item:hover {
|
||
background: var(--p-list-option-focus-background);
|
||
}
|
||
|
||
.pa-multi-listbox-item.selected {
|
||
background: var(--p-dialog-border-color);
|
||
}
|
||
|
||
/* ---复选框样式（参考 PrimeVue Checkbox）--- */
|
||
.pa-multi-listbox-checkbox {
|
||
width: 18px;
|
||
height: 18px;
|
||
min-width: 18px;
|
||
border: 2px solid var(--p-checkbox-border-color, var(--p-inputtext-border-color));
|
||
border-radius: var(--p-checkbox-border-radius, 4px);
|
||
margin-right: 12px;
|
||
position: relative;
|
||
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
||
background: var(--p-checkbox-background, var(--p-inputtext-background));
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 悬停状态 */
|
||
.pa-multi-listbox-item:hover .pa-multi-listbox-checkbox {
|
||
border-color: var(--p-checkbox-hover-border-color, var(--p-primary-color));
|
||
}
|
||
|
||
/* 选中状态 */
|
||
.pa-multi-listbox-item.selected .pa-multi-listbox-checkbox {
|
||
background: var(--p-checkbox-checked-background, var(--p-primary-color));
|
||
border-color: var(--p-checkbox-checked-border-color, var(--p-primary-color));
|
||
}
|
||
|
||
/* 选中状态悬停 */
|
||
.pa-multi-listbox-item.selected:hover .pa-multi-listbox-checkbox {
|
||
background: var(--p-checkbox-checked-hover-background, var(--p-primary-hover-color));
|
||
border-color: var(--p-checkbox-checked-hover-border-color, var(--p-primary-hover-color));
|
||
}
|
||
|
||
/* 复选框勾选标记（使用 PrimeVue 的图标方式） */
|
||
.pa-multi-listbox-checkbox::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 5px;
|
||
height: 9px;
|
||
border: solid var(--p-checkbox-icon-checked-color, #ffffff);
|
||
border-width: 0 2px 2px 0;
|
||
transform: translate(-50%, -60%) rotate(45deg) scale(0);
|
||
transform-origin: center;
|
||
transition: transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
|
||
}
|
||
|
||
/* 选中时显示勾选标记，带有弹性动画 */
|
||
.pa-multi-listbox-item.selected .pa-multi-listbox-checkbox::after {
|
||
transform: translate(-50%, -60%) rotate(45deg) scale(1);
|
||
}
|
||
|
||
/* ---空状态提示--- */
|
||
.pa-multi-listbox-empty {
|
||
text-align: center;
|
||
padding: 24px;
|
||
color: var(--p-text-muted-color);
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* ---底部按钮栏--- */
|
||
.pa-multi-listbox-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px;
|
||
border-top: 1px solid var(--p-divider-color);
|
||
background: var(--p-dialog-border-color);
|
||
}
|
||
|
||
.pa-multi-listbox-count {
|
||
font-size: 13px;
|
||
color: var(--p-text-muted-color);
|
||
}
|
||
|
||
.pa-multi-listbox-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* ===================================================
|
||
6. API 配置管理器 - 底部警告信息
|
||
=================================================== */
|
||
|
||
/* API 管理器主窗口 - 设置最小高度以适应内容 */
|
||
.settings-modal.api-config-dialog-v2 {
|
||
min-height: 760px;
|
||
}
|
||
|
||
/* 调整通知区域位置到最底部 */
|
||
.api-config-dialog-v2 .p-dialog-notice {
|
||
order: 10;
|
||
padding: 0;
|
||
margin-top: auto;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 警告信息样式 */
|
||
.api-config-warning {
|
||
font-size: 12px;
|
||
color: color-mix(in srgb, var(--p-text-muted-color), transparent 50%);
|
||
padding: 10px 20px;
|
||
line-height: 1.6;
|
||
text-align: center;
|
||
border-top: 1px solid var(--p-divider-color);
|
||
/* background: var(--p-dialog-background); */
|
||
}
|
||
|
||
/* ===================================================
|
||
7. 规则配置管理器 - 标签页样式
|
||
=================================================== */
|
||
|
||
/* ---规则配置标签页容器--- */
|
||
.rules-config-tabs {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
|
||
/* ---标签页头部包装容器--- */
|
||
.rules-config-tabs .tab-header-wrapper {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
border-bottom: 2px solid var(--p-divider-color);
|
||
padding-bottom: 8px;
|
||
margin-bottom: 2px;
|
||
padding: 1px 16px 0px 16px;
|
||
}
|
||
|
||
/* ---调整规则配置中的标签头部样式--- */
|
||
.rules-config-tabs .tab-header {
|
||
border-bottom: none;
|
||
padding-bottom: 0;
|
||
margin-bottom: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
/* ---添加按钮容器--- */
|
||
.tab-header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ---标签添加按钮样式--- */
|
||
.tab-add-button {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ---规则面板提示信息--- */
|
||
.rule-pane-notice {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 14px;
|
||
margin-bottom: 12px;
|
||
background: var(--p-message-info-background);
|
||
border: 1px solid var(--p-message-info-border-color);
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
color: var(--p-message-info-color);
|
||
}
|
||
|
||
.rule-pane-notice .pi {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* ---翻译规则行样式（无状态列）--- */
|
||
.prompt-list-row.translate-row {
|
||
display: flex;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.prompt-list-row.translate-row .name-cell {
|
||
flex: 0 0 120px;
|
||
}
|
||
|
||
.prompt-list-row.translate-row .content-cell {
|
||
flex: 1;
|
||
}
|
||
|
||
.prompt-list-row.translate-row .action-cell {
|
||
flex: 0 0 60px;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* ===================================================
|
||
8. 标签管理器专属样式 (新版)
|
||
=================================================== */
|
||
|
||
/* CSV 选择器 */
|
||
.popup_csv_selector {
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
/* border: 0px solid var(--p-inputtext-border-color); */
|
||
background-color: var(--p-inputtext-background);
|
||
color: var(--p-inputtext-color);
|
||
outline: none;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.popup_csv_selector:hover {
|
||
border-color: var(--p-primary-color);
|
||
}
|
||
|
||
/* 标签右键菜单 */
|
||
.tag_context_menu {
|
||
background-color: var(--p-content-background);
|
||
border: 1px solid var(--p-dialog-border-color);
|
||
border-radius: 6px;
|
||
padding: 4px 0;
|
||
box-shadow: var(--p-dialog-shadow);
|
||
z-index: var(--settings-context-menu-z-index);
|
||
min-width: 140px;
|
||
}
|
||
|
||
.tag_context_menu_item {
|
||
padding: 8px 16px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: var(--p-text-color);
|
||
font-size: 14px;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
.tag_context_menu_item:hover {
|
||
background-color: var(--p-list-option-focus-background);
|
||
}
|
||
|
||
.tag_context_menu_item i {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 收藏标签页空状态提示 */
|
||
.empty_tip {
|
||
padding: 24px;
|
||
text-align: center;
|
||
color: var(--p-text-muted-color);
|
||
font-size: 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* ===================================================
|
||
9. 节点帮助翻译器样式 (Node Help Translator)
|
||
=================================================== */
|
||
|
||
/* ---翻译文本样式--- */
|
||
.pa-trans-text {
|
||
display: block;
|
||
margin-top: 4px;
|
||
padding-top: 4px;
|
||
color: var(--p-primary-color, #a855f7);
|
||
font-size: 0.9em;
|
||
line-height: 1.4;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
li .pa-trans-text {
|
||
margin-top: 2px;
|
||
}
|
||
|
||
td .pa-trans-text,
|
||
th .pa-trans-text {
|
||
font-size: 0.85em;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* ---分隔符样式--- */
|
||
.pa-trans-separator {
|
||
height: 4px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* ---翻译按钮容器--- */
|
||
.pa-help-translate-btn-container {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: auto;
|
||
margin-right: 8px;
|
||
gap: 12px;
|
||
}
|
||
|
||
/* ---翻译按钮图标动画--- */
|
||
.pa-translate-btn-icon {
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.pa-translate-btn-icon.spinning {
|
||
animation: pa-spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes pa-spin {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
/* ---视图模式控制--- */
|
||
.pa-mode-bilingual .pa-original-content {
|
||
display: inline;
|
||
}
|
||
|
||
.pa-mode-bilingual .pa-trans-separator {
|
||
display: block;
|
||
height: 4px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.pa-mode-bilingual .pa-trans-text {
|
||
display: block;
|
||
}
|
||
|
||
.pa-mode-translation-only .pa-original-content {
|
||
display: none;
|
||
}
|
||
|
||
.pa-mode-translation-only .pa-trans-separator {
|
||
display: none;
|
||
}
|
||
|
||
.pa-mode-translation-only .pa-trans-text {
|
||
display: block;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.pa-mode-original-only .pa-original-content {
|
||
display: inline;
|
||
}
|
||
|
||
.pa-mode-original-only .pa-trans-separator {
|
||
display: none;
|
||
}
|
||
|
||
.pa-mode-original-only .pa-trans-text {
|
||
display: none;
|
||
}
|
||
|
||
/* ====================== SelectButton 组件样式 ====================== */
|
||
|
||
/* SelectButton 组容器 */
|
||
.pa-select-button-group {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.pa-select-button-group .pa-form-label {
|
||
margin-bottom: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 按钮容器 */
|
||
.pa-select-button {
|
||
display: inline-flex;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
background: #000;
|
||
/* 深色背景 */
|
||
padding: 6px;
|
||
/* 内边距产生间距效果 */
|
||
gap: 6px;
|
||
/* 按钮项之间的间距 */
|
||
border: 1px solid color-mix(in srgb, var(--p-inputtext-border-color), transparent 50%);
|
||
|
||
|
||
}
|
||
|
||
/* 按钮项 */
|
||
.pa-select-button-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.375rem;
|
||
padding: 0.5rem 0.75rem;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
border: none;
|
||
outline: none;
|
||
background: #222;
|
||
/* 默认深色背景 */
|
||
color: var(--p-text-muted-color);
|
||
border-radius: 6px;
|
||
/* 独立圆角 */
|
||
font-size: 0.875rem;
|
||
font-family: inherit;
|
||
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
|
||
position: relative;
|
||
box-shadow: var(--p-dialog-shadow);
|
||
}
|
||
|
||
/* 移除分隔线 */
|
||
.pa-select-button-item:not(:last-child)::after {
|
||
display: none;
|
||
}
|
||
|
||
/* 悬停状态 */
|
||
.pa-select-button-item:not(.pa-select-button-item-disabled):hover {
|
||
background: var(--p-button-primary-hover-background);
|
||
color: var(--p-button-primary-color);
|
||
}
|
||
|
||
/* 选中状态 */
|
||
.pa-select-button-item-selected {
|
||
background: var(--p-primary-500) !important;
|
||
color: var(--p-button-primary-color);
|
||
}
|
||
|
||
.pa-select-button-item-selected::after {
|
||
display: none;
|
||
}
|
||
|
||
.pa-select-button-item-selected+.pa-select-button-item::after {
|
||
display: none;
|
||
}
|
||
|
||
/* 禁用状态 */
|
||
.pa-select-button-item-disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* 按钮图标 */
|
||
.pa-select-button-icon {
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
/* 按钮标签 */
|
||
.pa-select-button-label {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 小尺寸 */
|
||
.pa-select-button-small .pa-select-button-item {
|
||
padding: 0.4rem 1.0rem;
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.pa-select-button-small .pa-select-button-icon {
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
/* 大尺寸 */
|
||
.pa-select-button-large .pa-select-button-item {
|
||
padding: 0.625rem 1rem;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.pa-select-button-large .pa-select-button-icon {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* ===================================================
|
||
10. 通用输入框样式
|
||
=================================================== */
|
||
|
||
/* 禁用状态的输入框 */
|
||
.pa-input-disabled {
|
||
cursor: not-allowed !important;
|
||
opacity: 0.5 !important;
|
||
} |