重构路由架构
This commit is contained in:
@@ -0,0 +1,268 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
const useWorldBookStore = create((set, get) => ({
|
||||
// 世界书列表
|
||||
worldBooks: [],
|
||||
// 当前选中的世界书（用于编辑）
|
||||
selectedWorldBook: null,
|
||||
// 全局激活的世界书列表（在槽位中显示）
|
||||
globalWorldBooks: [],
|
||||
// 是否显示编辑面板
|
||||
showEditPanel: false,
|
||||
// 当前编辑的条目
|
||||
editingEntry: null,
|
||||
// 加载状态
|
||||
isLoading: false,
|
||||
// 选中世界书的加载状态
|
||||
isSelecting: false,
|
||||
// 错误信息
|
||||
error: null,
|
||||
// 是否显示世界书下拉框
|
||||
showWorldBookDropdown: false,
|
||||
// 是否显示添加世界书下拉框
|
||||
showAddWorldBookDropdown: false,
|
||||
|
||||
// 从后端获取世界书列表
|
||||
fetchWorldBooks: async () => {
|
||||
set({ isLoading: true, error: null });
|
||||
try {
|
||||
const response = await fetch('/api/worldbooks');
|
||||
if (!response.ok) {
|
||||
throw new Error('获取世界书列表失败');
|
||||
}
|
||||
const data = await response.json();
|
||||
set({
|
||||
worldBooks: data.worldbooks,
|
||||
globalWorldBooks: data.worldbooks.filter(book => book.enabled),
|
||||
isLoading: false
|
||||
});
|
||||
} catch (error) {
|
||||
set({ error: error.message, isLoading: false });
|
||||
console.error('获取世界书列表失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 切换世界书选择下拉框显示
|
||||
toggleWorldBookDropdown: () => set((state) => ({
|
||||
showWorldBookDropdown: !state.showWorldBookDropdown
|
||||
})),
|
||||
|
||||
// 切换添加世界书下拉框显示
|
||||
toggleAddWorldBookDropdown: () => set((state) => ({
|
||||
showAddWorldBookDropdown: !state.showAddWorldBookDropdown
|
||||
})),
|
||||
|
||||
// 添加世界书到全局槽位
|
||||
addGlobalWorldBook: async (uid) => {
|
||||
try {
|
||||
const response = await fetch(`/api/worldbooks/${uid}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
enabled: true
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('添加全局世界书失败');
|
||||
}
|
||||
|
||||
// 更新本地状态
|
||||
set((state) => ({
|
||||
worldBooks: state.worldBooks.map(b =>
|
||||
b.uid === uid ? { ...b, enabled: true } : b
|
||||
),
|
||||
globalWorldBooks: [...state.globalWorldBooks, state.worldBooks.find(b => b.uid === uid)]
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('添加全局世界书失败:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// 从全局槽位移除世界书
|
||||
removeGlobalWorldBook: async (uid) => {
|
||||
try {
|
||||
const response = await fetch(`/api/worldbooks/${uid}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
enabled: false
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('移除全局世界书失败');
|
||||
}
|
||||
|
||||
// 更新本地状态
|
||||
set((state) => ({
|
||||
worldBooks: state.worldBooks.map(b =>
|
||||
b.uid === uid ? { ...b, enabled: false } : b
|
||||
),
|
||||
globalWorldBooks: state.globalWorldBooks.filter(b => b.uid !== uid)
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('移除全局世界书失败:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// 创建新世界书
|
||||
createWorldBook: async (name, description) => {
|
||||
try {
|
||||
const response = await fetch('/api/worldbooks', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name,
|
||||
description: description || '',
|
||||
enabled: false // 新建的世界书默认不全局激活
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('创建世界书失败');
|
||||
}
|
||||
|
||||
// 重新获取世界书列表
|
||||
await get().fetchWorldBooks();
|
||||
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('创建世界书失败:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// 删除世界书
|
||||
deleteWorldBook: async (id) => {
|
||||
try {
|
||||
const response = await fetch(`/api/worldbooks/${id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('删除世界书失败');
|
||||
}
|
||||
|
||||
// 更新状态
|
||||
set((state) => ({
|
||||
worldBooks: state.worldBooks.filter(book => book.uid !== id),
|
||||
selectedWorldBook: state.selectedWorldBook?.uid === id ? null : state.selectedWorldBook,
|
||||
globalWorldBooks: state.globalWorldBooks.filter(book => book.uid !== id)
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('删除世界书失败:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// 选择世界书（用于编辑）
|
||||
selectWorldBook: async (id) => {
|
||||
set({ isSelecting: true, error: null });
|
||||
try {
|
||||
const response = await fetch(`/api/worldbooks/${id}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('获取世界书详情失败');
|
||||
}
|
||||
const data = await response.json();
|
||||
set({
|
||||
selectedWorldBook: data,
|
||||
isSelecting: false
|
||||
});
|
||||
} catch (error) {
|
||||
set({ error: error.message, isSelecting: false });
|
||||
console.error('获取世界书详情失败:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// 添加条目
|
||||
addEntry: async (entry) => {
|
||||
const state = get();
|
||||
if (!state.selectedWorldBook) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/worldbooks/${state.selectedWorldBook.uid}/entries`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(entry),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('添加条目失败');
|
||||
}
|
||||
|
||||
// 重新获取选中的世界书
|
||||
await get().selectWorldBook(state.selectedWorldBook.uid);
|
||||
} catch (error) {
|
||||
console.error('添加条目失败:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// 删除条目
|
||||
deleteEntry: async (entryId) => {
|
||||
const state = get();
|
||||
if (!state.selectedWorldBook) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/worldbooks/${state.selectedWorldBook.uid}/entries/${entryId}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('删除条目失败');
|
||||
}
|
||||
|
||||
// 重新获取选中的世界书
|
||||
await get().selectWorldBook(state.selectedWorldBook.uid);
|
||||
} catch (error) {
|
||||
console.error('删除条目失败:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// 更新条目
|
||||
updateEntry: async (entryId, updatedEntry) => {
|
||||
const state = get();
|
||||
if (!state.selectedWorldBook) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/worldbooks/${state.selectedWorldBook.uid}/entries/${entryId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(updatedEntry),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('更新条目失败');
|
||||
}
|
||||
|
||||
// 重新获取选中的世界书
|
||||
await get().selectWorldBook(state.selectedWorldBook.uid);
|
||||
} catch (error) {
|
||||
console.error('更新条目失败:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// 切换编辑面板显示
|
||||
toggleEditPanel: (show, entry = null) => set({
|
||||
showEditPanel: show !== undefined ? show : !get().showEditPanel,
|
||||
editingEntry: entry
|
||||
})
|
||||
}));
|
||||
|
||||
export default useWorldBookStore;
|
||||
@@ -1,11 +1,291 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import '../tabcss/WorldBook.css';
|
||||
import useWorldBookStore from '../../../Store/Slices/LeftTabsSlices/WorldBookSlice';
|
||||
|
||||
const WorldBook = () => {
|
||||
const {
|
||||
worldBooks,
|
||||
selectedWorldBook,
|
||||
showEditPanel,
|
||||
editingEntry,
|
||||
isLoading,
|
||||
isSelecting,
|
||||
error,
|
||||
showWorldBookDropdown,
|
||||
showAddWorldBookDropdown,
|
||||
globalWorldBooks,
|
||||
fetchWorldBooks,
|
||||
toggleWorldBookDropdown,
|
||||
toggleAddWorldBookDropdown,
|
||||
addGlobalWorldBook,
|
||||
removeGlobalWorldBook,
|
||||
createWorldBook,
|
||||
deleteWorldBook,
|
||||
selectWorldBook,
|
||||
addEntry,
|
||||
deleteEntry,
|
||||
updateEntry,
|
||||
toggleEditPanel,
|
||||
} = useWorldBookStore();
|
||||
|
||||
const [newEntry, setNewEntry] = useState({
|
||||
name: '',
|
||||
content: '',
|
||||
enabled: true,
|
||||
triggerStrategy: 'keyword',
|
||||
insertPosition: 'after',
|
||||
order: 0,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
fetchWorldBooks();
|
||||
}, [fetchWorldBooks]);
|
||||
|
||||
const handleCreateWorldBook = async () => {
|
||||
const name = prompt('请输入世界书名称:');
|
||||
if (name) {
|
||||
await createWorldBook(name);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddEntry = async () => {
|
||||
if (!selectedWorldBook) return;
|
||||
await addEntry(newEntry);
|
||||
setNewEntry({
|
||||
name: '',
|
||||
content: '',
|
||||
enabled: true,
|
||||
triggerStrategy: 'keyword',
|
||||
insertPosition: 'after',
|
||||
order: 0,
|
||||
});
|
||||
};
|
||||
|
||||
const handleEntryClick = (entry) => {
|
||||
toggleEditPanel(true, entry);
|
||||
};
|
||||
|
||||
const handleEntryUpdate = async (field, value) => {
|
||||
if (!editingEntry) return;
|
||||
const updatedEntry = { ...editingEntry, [field]: value };
|
||||
await updateEntry(editingEntry.uid, updatedEntry);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="worldbook-content">
|
||||
<h2>世界书</h2>
|
||||
{/* 在这里实现世界书的具体内容 */}
|
||||
{/* 全局世界书槽位 */}
|
||||
<div className="global-worldbooks-slot">
|
||||
<div className="global-books-header">
|
||||
<span>全局世界书</span>
|
||||
<div className="dropdown">
|
||||
<button className="add-global-book-btn" onClick={toggleAddWorldBookDropdown}>
|
||||
+ 添加
|
||||
</button>
|
||||
{showAddWorldBookDropdown && (
|
||||
<div className="dropdown-menu">
|
||||
<div className="dropdown-item" onClick={handleCreateWorldBook}>
|
||||
新建世界书
|
||||
</div>
|
||||
{worldBooks
|
||||
.filter(book => !globalWorldBooks.find(gb => gb.uid === book.uid))
|
||||
.map(book => (
|
||||
<div
|
||||
key={book.uid}
|
||||
className="dropdown-item"
|
||||
onClick={() => {
|
||||
addGlobalWorldBook(book.uid);
|
||||
toggleAddWorldBookDropdown(false);
|
||||
}}
|
||||
>
|
||||
{book.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="global-books-list">
|
||||
{globalWorldBooks.map(book => (
|
||||
<div
|
||||
key={book.uid}
|
||||
className={`global-book-tag ${selectedWorldBook?.uid === book.uid ? 'active' : ''}`}
|
||||
onClick={() => selectWorldBook(book.uid)}
|
||||
>
|
||||
{book.name}
|
||||
{selectedWorldBook?.uid === book.uid && (
|
||||
<span
|
||||
className="remove-btn"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeGlobalWorldBook(book.uid);
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 世界书选择区域 */}
|
||||
<div className="worldbook-selector">
|
||||
<div className="dropdown" style={{ flex: 1 }}>
|
||||
<button className="dropdown-btn" onClick={toggleWorldBookDropdown}>
|
||||
{selectedWorldBook ? selectedWorldBook.name : '选择世界书'}
|
||||
<span>▼</span>
|
||||
</button>
|
||||
{showWorldBookDropdown && (
|
||||
<div className="dropdown-menu">
|
||||
{worldBooks.map(book => (
|
||||
<div
|
||||
key={book.uid}
|
||||
className={`dropdown-item ${selectedWorldBook?.uid === book.uid ? 'active' : ''}`}
|
||||
onClick={() => {
|
||||
selectWorldBook(book.uid);
|
||||
toggleWorldBookDropdown(false);
|
||||
}}
|
||||
>
|
||||
{book.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{selectedWorldBook && (
|
||||
<button
|
||||
className="btn btn-danger"
|
||||
onClick={() => deleteWorldBook(selectedWorldBook.uid)}
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 条目列表区域 */}
|
||||
{isLoading ? (
|
||||
<div className="loading">加载中...</div>
|
||||
) : error ? (
|
||||
<div className="error">{error}</div>
|
||||
) : selectedWorldBook ? (
|
||||
<div className="entries-container">
|
||||
{isSelecting ? (
|
||||
<div className="loading">加载条目中...</div>
|
||||
) : selectedWorldBook.entries && selectedWorldBook.entries.length > 0 ? (
|
||||
selectedWorldBook.entries.map(entry => (
|
||||
<div
|
||||
key={entry.uid}
|
||||
className={`entry-item ${editingEntry?.uid === entry.uid ? 'active' : ''}`}
|
||||
onClick={() => handleEntryClick(entry)}
|
||||
>
|
||||
<div className="entry-header">
|
||||
<span className="entry-name">{entry.name}</span>
|
||||
<span className={`entry-status ${entry.enabled ? 'enabled' : ''}`}>
|
||||
{entry.enabled ? '启用' : '禁用'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="entry-meta">
|
||||
<span>策略: {entry.triggerStrategy}</span>
|
||||
<span>位置: {entry.insertPosition}</span>
|
||||
<span>顺序: {entry.order}</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="loading">暂无条目</div>
|
||||
)}
|
||||
<button className="btn btn-primary" onClick={handleAddEntry}>
|
||||
+ 添加条目
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="loading">请选择一个世界书</div>
|
||||
)}
|
||||
|
||||
{/* 编辑面板 */}
|
||||
{showEditPanel && editingEntry && (
|
||||
<div className={`edit-panel ${showEditPanel ? 'open' : ''}`}>
|
||||
<div className="edit-panel-header">
|
||||
<h2>编辑条目</h2>
|
||||
<button className="close-btn" onClick={() => toggleEditPanel(false)}>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label">名称</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-input"
|
||||
value={editingEntry.name}
|
||||
onChange={(e) => handleEntryUpdate('name', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label">内容</label>
|
||||
<textarea
|
||||
className="form-textarea"
|
||||
value={editingEntry.content}
|
||||
onChange={(e) => handleEntryUpdate('content', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editingEntry.enabled}
|
||||
onChange={(e) => handleEntryUpdate('enabled', e.target.checked)}
|
||||
/>
|
||||
启用此条目
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label">触发策略</label>
|
||||
<select
|
||||
className="form-select"
|
||||
value={editingEntry.triggerStrategy}
|
||||
onChange={(e) => handleEntryUpdate('triggerStrategy', e.target.value)}
|
||||
>
|
||||
<option value="persistent">持久</option>
|
||||
<option value="keyword">关键词</option>
|
||||
<option value="rag">RAG</option>
|
||||
<option value="calculation">运算</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label">插入位置</label>
|
||||
<select
|
||||
className="form-select"
|
||||
value={editingEntry.insertPosition}
|
||||
onChange={(e) => handleEntryUpdate('insertPosition', e.target.value)}
|
||||
>
|
||||
<option value="before">之前</option>
|
||||
<option value="after">之后</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label">顺序</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-input"
|
||||
value={editingEntry.order}
|
||||
onChange={(e) => handleEntryUpdate('order', parseInt(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="btn btn-danger"
|
||||
onClick={() => deleteEntry(editingEntry.uid)}
|
||||
>
|
||||
删除条目
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,646 +1,366 @@
|
||||
/* ==================== 预设页区域 ==================== */
|
||||
|
||||
.preset-panel {
|
||||
.worldbook-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
gap: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preset-header {
|
||||
/* 全局世界书槽位 */
|
||||
.global-worldbooks-slot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.global-books-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.global-books-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.global-book-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
background: rgba(74, 108, 247, 0.15);
|
||||
border: 1px solid rgba(74, 108, 247, 0.3);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.global-book-tag:hover {
|
||||
background: rgba(74, 108, 247, 0.25);
|
||||
border-color: rgba(74, 108, 247, 0.5);
|
||||
}
|
||||
|
||||
.global-book-tag.active {
|
||||
background: rgba(74, 108, 247, 0.3);
|
||||
border-color: rgba(74, 108, 247, 0.6);
|
||||
box-shadow: 0 0 8px rgba(74, 108, 247, 0.2);
|
||||
}
|
||||
|
||||
.global-book-tag .remove-btn {
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.global-book-tag .remove-btn:hover {
|
||||
opacity: 1;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.add-global-book-btn {
|
||||
padding: 4px 8px;
|
||||
background: rgba(74, 108, 247, 0.2);
|
||||
border: 1px solid rgba(74, 108, 247, 0.3);
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.15s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.add-global-book-btn:hover {
|
||||
background: rgba(74, 108, 247, 0.3);
|
||||
border-color: rgba(74, 108, 247, 0.5);
|
||||
}
|
||||
|
||||
/* 下拉菜单 */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-btn {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
transition: all 0.15s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dropdown-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
margin-top: 4px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.dropdown-item.active {
|
||||
background: rgba(74, 108, 247, 0.15);
|
||||
color: #4a6cf7;
|
||||
}
|
||||
|
||||
/* 世界书选择区域 */
|
||||
.worldbook-selector {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 条目列表区域 */
|
||||
.entries-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.entry-item {
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.entry-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.entry-item.active {
|
||||
background: rgba(74, 108, 247, 0.1);
|
||||
border-color: rgba(74, 108, 247, 0.3);
|
||||
}
|
||||
|
||||
.entry-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.entry-status {
|
||||
font-size: 11px;
|
||||
color: #777;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.entry-status.enabled {
|
||||
color: #4a90e2;
|
||||
background: rgba(74, 144, 226, 0.1);
|
||||
}
|
||||
|
||||
.entry-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
font-size: 11px;
|
||||
color: #777;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 编辑面板 */
|
||||
.edit-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 300px;
|
||||
background: white;
|
||||
z-index: 1000;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.2s ease-out;
|
||||
border-left: 1px solid #e0e0e0;
|
||||
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.edit-panel.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.edit-panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.preset-select-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.preset-label {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.preset-select {
|
||||
flex: 1;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.preset-select:focus {
|
||||
outline: none;
|
||||
border-color: #4a6cf7;
|
||||
}
|
||||
|
||||
.preset-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.preset-action-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.preset-action-btn:hover {
|
||||
background-color: #e8e8e8;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.preset-save-dialog,
|
||||
.preset-edit-dialog,
|
||||
.preset-import-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 16px;
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preset-save-dialog input,
|
||||
.preset-edit-dialog input {
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.preset-save-dialog input:focus,
|
||||
.preset-edit-dialog input:focus {
|
||||
outline: none;
|
||||
border-color: #4a6cf7;
|
||||
}
|
||||
|
||||
.preset-import-dialog textarea {
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
resize: vertical;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
min-height: 100px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.preset-import-dialog textarea:focus {
|
||||
outline: none;
|
||||
border-color: #4a6cf7;
|
||||
}
|
||||
|
||||
.dialog-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.dialog-buttons button {
|
||||
margin-left: 8px;
|
||||
padding: 6px 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.dialog-buttons button:first-child {
|
||||
background-color: #4a6cf7;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dialog-buttons button:first-child:hover {
|
||||
background-color: #3a5ce5;
|
||||
}
|
||||
|
||||
.dialog-buttons button:last-child {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.dialog-buttons button:last-child:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.preset-parameters-container {
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.parameters-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background-color: #f5f5f5;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.parameters-header:hover {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
transition: transform 0.3s ease;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.expand-icon.expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.preset-parameters {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
animation: fadeIn 0.3s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.parameter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.parameter-label {
|
||||
width: 120px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
cursor: help;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.parameter-slider {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: #e0e0e0;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.parameter-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #4a6cf7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.parameter-slider::-moz-range-thumb {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #4a6cf7;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.parameter-number {
|
||||
width: 60px;
|
||||
padding: 4px 6px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
transition: border-color 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.parameter-number:focus {
|
||||
outline: none;
|
||||
border-color: #4a6cf7;
|
||||
}
|
||||
|
||||
.parameter-input {
|
||||
flex: 1;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.parameter-input:focus {
|
||||
outline: none;
|
||||
border-color: #4a6cf7;
|
||||
}
|
||||
|
||||
.parameter-toggles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.toggle-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.toggle-checkbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
accent-color: #4a6cf7;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
padding: 6px 10px;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
max-width: 250px;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 预设组件列表样式 */
|
||||
.preset-components-section {
|
||||
margin-top: 20px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding-top: 20px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.component-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0; /* 移除底部边距 */
|
||||
}
|
||||
|
||||
.component-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.token-count {
|
||||
font-size: 11px;
|
||||
color: #777;
|
||||
margin: 0 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.add-component-btn {
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.components-list {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.prompt-component-item {
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px; /* 减小间距 */
|
||||
padding: 6px 8px; /* 减小内边距 */
|
||||
transition: background-color 0.2s;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.prompt-component-item.dragging {
|
||||
background-color: #e9e9e9;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.prompt-component-item.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.prompt-component-item.marker {
|
||||
border-left: 3px solid #4a90e2;
|
||||
}
|
||||
|
||||
.component-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 4px; /* 减小底部边距 */
|
||||
}
|
||||
|
||||
.component-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px; /* 减小间距 */
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: grab;
|
||||
color: #999;
|
||||
font-size: 14px; /* 减小字体 */
|
||||
padding: 0 2px; /* 减小内边距 */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
width: 18px; /* 减小尺寸 */
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #ccc;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px; /* 减小字体 */
|
||||
color: #4a90e2;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle-btn.enabled {
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
border-color: #4a90e2;
|
||||
}
|
||||
|
||||
.component-name {
|
||||
font-weight: 500;
|
||||
font-size: 13px; /* 减小字体 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.component-marker-badge {
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
font-size: 10px; /* 减小字体 */
|
||||
padding: 1px 4px; /* 减小内边距 */
|
||||
border-radius: 8px;
|
||||
margin-left: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.component-actions {
|
||||
display: flex;
|
||||
gap: 4px; /* 减小间距 */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.view-btn, .edit-btn, .delete-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 11px; /* 减小字体 */
|
||||
padding: 2px 4px; /* 减小内边距 */
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
color: #5c6bc0;
|
||||
}
|
||||
|
||||
.view-btn:hover {
|
||||
background-color: rgba(92, 107, 192, 0.1);
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
color: #4a90e2;
|
||||
}
|
||||
|
||||
.edit-btn:hover {
|
||||
background-color: rgba(74, 144, 226, 0.1);
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
background-color: rgba(231, 76, 60, 0.1);
|
||||
}
|
||||
|
||||
.component-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 2px; /* 减小顶部边距 */
|
||||
font-size: 11px; /* 减小字体 */
|
||||
color: #777;
|
||||
}
|
||||
|
||||
/* 组件编辑/查看对话框 */
|
||||
.component-edit-dialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
max-height: 80vh;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.dialog-header h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
.edit-panel-header h2 {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
.form-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.component-textarea {
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-textarea,
|
||||
.form-select {
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px 10px;
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
resize: none;
|
||||
box-sizing: border-box;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.component-textarea:read-only {
|
||||
background-color: #f9f9f9;
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
.form-input:focus,
|
||||
.form-textarea:focus,
|
||||
.form-select:focus {
|
||||
outline: none;
|
||||
border-color: #4a6cf7;
|
||||
box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.1);
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.token-count {
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.dialog-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dialog-buttons button {
|
||||
padding: 6px 12px;
|
||||
.form-checkbox input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s;
|
||||
font-size: 13px;
|
||||
transition: all 0.15s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dialog-buttons button:first-child {
|
||||
background-color: #4a6cf7;
|
||||
.btn-primary {
|
||||
background: #4a6cf7;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dialog-buttons button:first-child:hover {
|
||||
background-color: #3a5ce5;
|
||||
.btn-primary:hover {
|
||||
background: #3a5ce5;
|
||||
}
|
||||
|
||||
.dialog-buttons button:last-child {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
.btn-danger {
|
||||
background: #e74c3c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dialog-buttons button:last-child:hover {
|
||||
background-color: #e0e0e0;
|
||||
.btn-danger:hover {
|
||||
background: #c0392b;
|
||||
}
|
||||
|
||||
/* 拖拽相关样式 */
|
||||
.drag-indicator {
|
||||
height: 4px;
|
||||
background-color: transparent;
|
||||
border-radius: 2px;
|
||||
margin: 4px 0;
|
||||
transition: all 0.2s ease;
|
||||
opacity: 0;
|
||||
/* 加载和错误状态 */
|
||||
.loading,
|
||||
.error {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.drag-indicator.visible {
|
||||
background-color: #4a90e2;
|
||||
height: 4px;
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
|
||||
.loading {
|
||||
color: #777;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #e74c3c;
|
||||
background: rgba(231, 76, 60, 0.1);
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,407 @@
|
||||
.worldbook-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
gap: 12px;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 全局世界书槽位 */
|
||||
.global-worldbooks-slot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.global-books-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.global-books-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.global-book-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
background: rgba(100, 149, 237, 0.25);
|
||||
border: 1px solid rgba(100, 149, 237, 0.5);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.global-book-tag:hover {
|
||||
background: rgba(100, 149, 237, 0.4);
|
||||
border-color: rgba(100, 149, 237, 0.7);
|
||||
}
|
||||
|
||||
.global-book-tag.active {
|
||||
background: rgba(100, 149, 237, 0.5);
|
||||
border-color: rgba(100, 149, 237, 0.8);
|
||||
box-shadow: 0 0 8px rgba(100, 149, 237, 0.3);
|
||||
}
|
||||
|
||||
.global-book-tag .remove-btn {
|
||||
opacity: 0.9;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.global-book-tag .remove-btn:hover {
|
||||
opacity: 1;
|
||||
color: rgba(255, 107, 107, 1);
|
||||
}
|
||||
|
||||
.add-global-book-btn {
|
||||
padding: 4px 8px;
|
||||
background: rgba(100, 149, 237, 0.3);
|
||||
border: 1px solid rgba(100, 149, 237, 0.5);
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.15s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.add-global-book-btn:hover {
|
||||
background: rgba(100, 149, 237, 0.5);
|
||||
border-color: rgba(100, 149, 237, 0.8);
|
||||
}
|
||||
|
||||
/* 下拉菜单 */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-btn {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
transition: all 0.15s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dropdown-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(10, 10, 10, 0.98);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
margin-top: 4px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: rgba(100, 149, 237, 0.3);
|
||||
}
|
||||
|
||||
.dropdown-item.active {
|
||||
background: rgba(100, 149, 237, 0.4);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
/* 世界书选择区域 */
|
||||
.worldbook-selector {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 条目列表区域 */
|
||||
.entries-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.entry-item {
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.entry-item:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.entry-item.active {
|
||||
background: rgba(100, 149, 237, 0.2);
|
||||
border-color: rgba(100, 149, 237, 0.5);
|
||||
}
|
||||
|
||||
.entry-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.entry-status {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.entry-status.enabled {
|
||||
color: rgba(100, 255, 149, 1);
|
||||
background: rgba(100, 255, 149, 0.2);
|
||||
}
|
||||
|
||||
.entry-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 编辑面板 */
|
||||
.edit-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 300px;
|
||||
background: rgba(20, 20, 20, 0.98);
|
||||
z-index: 1000;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.2s ease-out;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.edit-panel.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.edit-panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.edit-panel-header h2 {
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-textarea,
|
||||
.form-select {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 13px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-textarea:focus,
|
||||
.form-select:focus {
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(100, 149, 237, 0.5);
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.form-checkbox input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: rgba(100, 149, 237, 0.3);
|
||||
border: 1px solid rgba(100, 149, 237, 0.5);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: rgba(100, 149, 237, 0.5);
|
||||
border-color: rgba(100, 149, 237, 0.8);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: rgba(255, 107, 107, 0.3);
|
||||
border: 1px solid rgba(255, 107, 107, 0.5);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: rgba(255, 107, 107, 0.5);
|
||||
border-color: rgba(255, 107, 107, 0.8);
|
||||
}
|
||||
|
||||
/* 加载和错误状态 */
|
||||
.loading,
|
||||
.error {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: rgba(255, 107, 107, 1);
|
||||
background: rgba(255, 107, 107, 0.2);
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-textarea,
|
||||
.form-select {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-size: 13px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-textarea:focus,
|
||||
.form-select:focus {
|
||||
outline: none;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-color: rgba(100, 149, 237, 0.6);
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user