+
+
{{ n }}
@@ -211,7 +247,7 @@
-
+
-
{{ line.lineNumber || index + 1 }}
+
{{ line.lineNumber || index + 1 }}
{
@@ -264,6 +307,8 @@ watch(resultFullscreen, (isFullscreen) => {
const leftResultRef = ref(null)
const rightResultRef = ref(null)
const resultContentRef = ref(null)
+const leftFullscreenResultRef = ref(null)
+const rightFullscreenResultRef = ref(null)
const isScrolling = ref(false)
// 提示消息
@@ -438,7 +483,7 @@ const escapeHtml = (text) => {
return div.innerHTML
}
-// 同步滚动处理
+// 同步滚动处理（非全屏模式）
const handleLeftScroll = () => {
if (isScrolling.value) return
isScrolling.value = true
@@ -461,6 +506,29 @@ const handleRightScroll = () => {
}, 10)
}
+// 同步滚动处理（全屏模式）
+const handleLeftFullscreenScroll = () => {
+ if (isScrolling.value) return
+ isScrolling.value = true
+ if (leftFullscreenResultRef.value && rightFullscreenResultRef.value) {
+ rightFullscreenResultRef.value.scrollTop = leftFullscreenResultRef.value.scrollTop
+ }
+ setTimeout(() => {
+ isScrolling.value = false
+ }, 10)
+}
+
+const handleRightFullscreenScroll = () => {
+ if (isScrolling.value) return
+ isScrolling.value = true
+ if (leftFullscreenResultRef.value && rightFullscreenResultRef.value) {
+ leftFullscreenResultRef.value.scrollTop = rightFullscreenResultRef.value.scrollTop
+ }
+ setTimeout(() => {
+ isScrolling.value = false
+ }, 10)
+}
+
// 高亮差异文本
const highlightDiff = (text, diffRanges) => {
if (!diffRanges || diffRanges.length === 0) {
@@ -973,7 +1041,7 @@ const NodeComparisonResult = {
}
// 对比两个JSON节点，返回对比结果和相似度
-const compareJsonNodes = (nodeA, nodeB) => {
+const compareJsonNodes = (nodeA, nodeB, ignoreOrder = false) => {
const result = (type, similarity) => ({ type, similarity, nodeA, nodeB })
if (isNullOrUndefined(nodeA) && isNullOrUndefined(nodeB)) {
@@ -992,13 +1060,16 @@ const compareJsonNodes = (nodeA, nodeB) => {
if (typeof nodeA !== typeof nodeB) {
return result(NodeComparisonResult.DIFFERENT, 0.0)
}
- if (isMapType(nodeA) && isMapType(nodeB)) return compareMaps(nodeA, nodeB)
- if (isListType(nodeA) && isListType(nodeB)) return compareLists(nodeA, nodeB)
+ if (isMapType(nodeA) && isMapType(nodeB)) return compareMaps(nodeA, nodeB, ignoreOrder)
+ if (isListType(nodeA) && isListType(nodeB)) {
+ // 根据参数选择是否忽略列表顺序
+ return ignoreOrder ? compareListsIgnoreOrder(nodeA, nodeB, ignoreOrder) : compareLists(nodeA, nodeB, ignoreOrder)
+ }
return result(NodeComparisonResult.DIFFERENT, 0.0)
}
// 对比Map（对象）
-const compareMaps = (mapA, mapB) => {
+const compareMaps = (mapA, mapB, ignoreOrder = false) => {
const keysA = Object.keys(mapA).sort()
const keysB = Object.keys(mapB).sort()
const setA = new Set(keysA)
@@ -1015,7 +1086,8 @@ const compareMaps = (mapA, mapB) => {
const hasKeyB = setB.has(key)
const valueComparison = compareJsonNodes(
hasKeyA ? mapA[key] : undefined,
- hasKeyB ? mapB[key] : undefined
+ hasKeyB ? mapB[key] : undefined,
+ ignoreOrder
)
if (hasKeyA && hasKeyB && valueComparison.type === NodeComparisonResult.DIFFERENT) {
valueComparison.type = NodeComparisonResult.SIMILAR
@@ -1049,8 +1121,156 @@ const compareMaps = (mapA, mapB) => {
return { type: NodeComparisonResult.SIMILAR, similarity: avgSimilarity, ...base }
}
+// 对比List（数组）- 忽略顺序，使用贪心算法寻找最佳匹配
+const compareListsIgnoreOrder = (listA, listB, ignoreOrder = false) => {
+ const n = listA.length
+ const m = listB.length
+
+ // 计算所有元素对的相似度矩阵
+ const similarityMatrix = []
+ for (let i = 0; i < n; i++) {
+ similarityMatrix[i] = []
+ for (let j = 0; j < m; j++) {
+ const comp = compareJsonNodes(listA[i], listB[j], ignoreOrder)
+ similarityMatrix[i][j] = comp
+ }
+ }
+
+ // 使用贪心算法找到最佳匹配（不考虑顺序）
+ // 每次选择相似度最高的未匹配对
+ const matches = []
+ const usedA = new Set()
+ const usedB = new Set()
+
+ // 创建所有可能的匹配对，按相似度降序排序
+ const allPairs = []
+ for (let i = 0; i < n; i++) {
+ for (let j = 0; j < m; j++) {
+ allPairs.push({
+ indexA: i,
+ indexB: j,
+ similarity: similarityMatrix[i][j].similarity,
+ comparison: similarityMatrix[i][j]
+ })
+ }
+ }
+ allPairs.sort((a, b) => b.similarity - a.similarity)
+
+ // 贪心匹配：选择相似度最高的未匹配对
+ for (const pair of allPairs) {
+ if (!usedA.has(pair.indexA) && !usedB.has(pair.indexB)) {
+ matches.push({
+ indexA: pair.indexA,
+ indexB: pair.indexB,
+ comparison: pair.comparison
+ })
+ usedA.add(pair.indexA)
+ usedB.add(pair.indexB)
+ }
+ }
+
+ // 添加未匹配的A中元素（删除）
+ for (let i = 0; i < n; i++) {
+ if (!usedA.has(i)) {
+ matches.push({
+ indexA: i,
+ indexB: undefined,
+ comparison: {
+ type: NodeComparisonResult.DIFFERENT,
+ similarity: 0.0,
+ nodeA: listA[i],
+ nodeB: undefined
+ }
+ })
+ }
+ }
+
+ // 添加未匹配的B中元素（插入）
+ for (let j = 0; j < m; j++) {
+ if (!usedB.has(j)) {
+ matches.push({
+ indexA: undefined,
+ indexB: j,
+ comparison: {
+ type: NodeComparisonResult.DIFFERENT,
+ similarity: 0.0,
+ nodeA: undefined,
+ nodeB: listB[j]
+ }
+ })
+ }
+ }
+
+ // 按原始顺序排序匹配结果（先A后B，保持展示的一致性）
+ matches.sort((a, b) => {
+ if (a.indexA !== undefined && b.indexA !== undefined) {
+ return a.indexA - b.indexA
+ }
+ if (a.indexA !== undefined) return -1
+ if (b.indexA !== undefined) return 1
+ if (a.indexB !== undefined && b.indexB !== undefined) {
+ return a.indexB - b.indexB
+ }
+ return 0
+ })
+
+ // 判断父节点类型
+ const totalElements = n + m
+ const matchedElements = matches.filter(m => m.indexA !== undefined && m.indexB !== undefined).length
+ const sameMatches = matches.filter(m =>
+ m.indexA !== undefined &&
+ m.indexB !== undefined &&
+ m.comparison.type === NodeComparisonResult.SAME
+ ).length
+ const differentMatches = matches.filter(m =>
+ m.comparison.type === NodeComparisonResult.DIFFERENT
+ ).length
+
+ if (totalElements === 0) {
+ return {
+ type: NodeComparisonResult.SAME,
+ similarity: 1.0,
+ nodeA: listA,
+ nodeB: listB,
+ matches
+ }
+ }
+
+ if (n !== 0 && m !== 0 && differentMatches === totalElements) {
+ return {
+ type: NodeComparisonResult.DIFFERENT,
+ similarity: 0.0,
+ nodeA: listA,
+ nodeB: listB,
+ matches
+ }
+ }
+
+ if (sameMatches === matchedElements && matchedElements === totalElements) {
+ return {
+ type: NodeComparisonResult.SAME,
+ similarity: 1.0,
+ nodeA: listA,
+ nodeB: listB,
+ matches
+ }
+ }
+
+ // 计算加权平均相似度
+ const totalSimilarity = matches.reduce((sum, m) => sum + m.comparison.similarity, 0)
+ const avgSimilarity = totalElements > 0 ? totalSimilarity / totalElements : 0
+
+ return {
+ type: NodeComparisonResult.SIMILAR,
+ similarity: avgSimilarity,
+ nodeA: listA,
+ nodeB: listB,
+ matches
+ }
+}
+
// 对比List（数组）- 寻找最佳匹配使相似度最高
-const compareLists = (listA, listB) => {
+const compareLists = (listA, listB, ignoreOrder = false) => {
const n = listA.length
const m = listB.length
@@ -1060,7 +1280,7 @@ const compareLists = (listA, listB) => {
for (let i = 0; i < n; i++) {
similarityMatrix[i] = []
for (let j = 0; j < m; j++) {
- const comp = compareJsonNodes(listA[i], listB[j])
+ const comp = compareJsonNodes(listA[i], listB[j], ignoreOrder)
similarityMatrix[i][j] = comp
}
}
@@ -1070,6 +1290,15 @@ const compareLists = (listA, listB) => {
const dp = Array(n + 1).fill(null).map(() => Array(m + 1).fill(0))
const path = Array(n + 1).fill(null).map(() => Array(m + 1).fill(null))
+ // 初始化边界情况：当j=0时，只能跳过A中的元素
+ for (let i = 1; i <= n; i++) {
+ path[i][0] = 'skipA'
+ }
+ // 初始化边界情况：当i=0时，只能跳过B中的元素
+ for (let j = 1; j <= m; j++) {
+ path[0][j] = 'skipB'
+ }
+
for (let i = 1; i <= n; i++) {
for (let j = 1; j <= m; j++) {
const matchSimilarity = similarityMatrix[i - 1][j - 1].similarity
@@ -1154,7 +1383,7 @@ const compareLists = (listA, listB) => {
}
}
- if (differentMatches === totalElements) {
+ if (n !== 0 && m !== 0 && differentMatches === totalElements) {
return {
type: NodeComparisonResult.DIFFERENT,
similarity: 0.0,
@@ -1462,8 +1691,8 @@ const compareJson = (textA, textB) => {
const jsonA = JSON.parse(textA)
const jsonB = JSON.parse(textB)
- // 执行节点对比
- const comparison = compareJsonNodes(jsonA, jsonB)
+ // 执行节点对比，传递忽略列表顺序的参数
+ const comparison = compareJsonNodes(jsonA, jsonB, ignoreListOrder.value)
console.log(comparison)
// 转换为展示格式
@@ -1522,6 +1751,8 @@ const performCompare = () => {
compareResult.value = compareTextByChar(leftText.value, rightText.value)
}
}
+ // 保存到历史记录
+ saveToHistory()
showToast('对比完成', 'info', 2000)
} catch (e) {
showToast(e.message)
@@ -1555,52 +1786,16 @@ const compareTest = () => {
stats: {same: 0, insert: 0, delete: 0, modify: 0}
}
const cases = [
- // 1. 完全相同的简单JSON
- ["{\"name\":\"John\",\"age\":30}", "{\"name\":\"John\",\"age\":30}"],
- // 2. 值不同的简单JSON
- ["{\"name\":\"John\",\"age\":30}", "{\"name\":\"Jane\",\"age\":25}"],
- // 3. 键不同
- ["{\"a\":1,\"b\":2}", "{\"a\":1,\"c\":3}"],
- // 4. 嵌套对象
- ["{\"user\":{\"name\":\"John\",\"address\":{\"city\":\"NY\"}}}", "{\"user\":{\"name\":\"Jane\",\"address\":{\"city\":\"LA\"}}}"],
- // 5. 嵌套数组
- ["{\"items\":[1,2,[3,4]]}", "{\"items\":[1,2,[3,5]]}"],
- // 6. 数组顺序不同（是否考虑顺序）
- ["[1,2,3,4]", "[4,3,2,1]"],
- // 7. 数组长度不同
- ["[1,2,3,4,5]", "[1,2,3]"],
- // 8. 空数组
- ["[]", "[]"],
- ["[1,2,3]", "[]"],
- // 10. null值处理
- ["{\"a\":null,\"b\":\"value\"}", "{\"a\":null,\"b\":\"value\"}"],
- ["{\"a\":null}", "{\"a\":\"null\"}"], // null vs 字符串"null"
- // 11. 布尔值
- ["{\"flag\":true,\"active\":false}", "{\"flag\":true,\"active\":true}"],
- // 12. 数字类型（整数、浮点数、科学计数法）
- ["{\"int\":42,\"float\":3.14}", "{\"int\":42,\"float\":3.140}"],
- ["{\"num\":1e3}", "{\"num\":1000}"],
- // 13. 空字符串
- ["{\"str\":\"\",\"normal\":\"text\"}", "{\"str\":\"\",\"normal\":\"text\"}"],
- // 14. 空对象
- ["{}", "{}"],
- ["{}", "{\"key\":\"value\"}"],
- // 15. 键的顺序不同
- ["{\"a\":1,\"b\":2}", "{\"b\":2,\"a\":1}"], // 对象键顺序是否影响比较
- // 16. 数据类型混用
- ["{\"id\":\"123\"}", "{\"id\":123}"], // 字符串数字 vs 数字
- ["{\"value\":true}", "{\"value\":\"true\"}"], // 布尔 vs 字符串
- // 17. 特殊字符
- ["{\"text\":\"line1\\nline2\\ttab\"}", "{\"text\":\"line1\\nline2\\ttab\"}"],
- ["{\"quote\":\"He said \\\"hello\\\"\"}", "{\"quote\":\"He said \\\"hello\\\"\"}"],
- ["{\"unicode\":\"\u4e2d\u6587\"}", "{\"unicode\":\"中文\"}"],
- // 18. 大数字
- ["{\"big\":9999999999999999}", "{\"big\":10000000000000000}"],
- ["{\"big\":9007199254740991}", "{\"big\":9007199254740992}"], // 超出安全整数范围
- // 19. 多层嵌套混合
- ["{\"users\":[{\"id\":1,\"data\":{\"scores\":[85,90,null]}},{\"id\":2}]}", "{\"users\":[{\"id\":1,\"data\":{\"scores\":[85,90,95]}},{\"id\":2}]}"],
- // 21. 日期对象（通常序列化为字符串）
- ["{\"date\":\"2024-01-15T10:30:00Z\"}", "{\"date\":\"2024-01-15T10:30:00.000Z\"}"],
+ ["[]","[\"a\"]"],
+ ["[\"a\"]", "[]"],
+ ["[[\"a\",\"b\"]]", "[]"],
+ ["[]","[\"a\",\"b\"]"],
+ ["[]","[[\"a\",\"b\"]]"],
+ ["{}","{\"a\": {\"c\":\"d\"}}"],
+ ["{}", "{\"a\":\"b\"}"],
+ ["[\"a\",\"b\"]", "[]"],
+ ["{\"a\": {\"c\":\"d\"}}", "[]"],
+ ["{\"a\":\"b\"}", "{}"],
["{\"a\":\"a\",\"b\":\"b\",\"d\":null}", "{\"a\":\"a\",\"c\":\"c\"}"],
["[\"a\",\"b\",null]", "[\"a\",\"c\"]"],
["[{\"a\":\"a\"},{\"b\":\"b\"},null]", "[{\"a\":\"a\"},{\"c\":\"c\"}]"],
@@ -1611,8 +1806,6 @@ const compareTest = () => {
["{\"a\": {\"c\":\"d\"}}","{\"a\": null}"],
["{\"a\": null}","{\"a\": {\"c\":\"d\"}}"],
["{\"a\": {\"c\":\"d\"}}","{}"],
- ["{}","{\"a\": {\"c\":\"d\"}}"],
- ["{}", "{\"a\":\"b\"}"],
["{\"a\":\"a1\"}", "{\"b\":\"b2\"}"],
["{\"a\":{\"c\":\"d\",\"e\":\"f\"}}", "{\"b\":{\"c\":\"d\",\"m\":\"l\"}}"],
["{\"a\":{\"c\":\"d\",\"e\":\"f\"}}", "{\"a\":{\"c\":\"d\",\"e\":\"l\"}}"],
@@ -1624,7 +1817,9 @@ const compareTest = () => {
["[[[\"a\",\"b\"],[]]]","[[[\"a\",\"b\",\"c\"],[\"b\"]],[\"c\"]]"]
]
for (let item of cases) {
+ console.log("=================================================")
console.log(item)
+ console.log("=================================================")
let res = compareJson(item[0], item[1])
total.left.push({type: 'same', content: ''}, {
type: 'same',
@@ -1654,9 +1849,130 @@ const compareTest = () => {
compareResult.value = total
}
+// 切换侧栏
+const toggleSidebar = () => {
+ sidebarOpen.value = !sidebarOpen.value
+}
+
+// 格式化时间
+const formatTime = (timestamp) => {
+ const date = new Date(timestamp)
+ const now = new Date()
+ const diff = now - date
+
+ if (diff < 60000) return '刚刚'
+ if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前'
+ if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前'
+
+ return date.toLocaleString('zh-CN', {
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit'
+ })
+}
+
+// 截断文本
+const truncateText = (text, maxLength) => {
+ if (!text) return ''
+ if (text.length <= maxLength) return text
+ return text.substring(0, maxLength) + '...'
+}
+
+// 获取模式标签
+const getModeLabel = (mode, subMode, ignoreOrder) => {
+ if (mode === 'json') {
+ return ignoreOrder ? 'JSON对比（忽略列表顺序）' : 'JSON对比'
+ } else {
+ return subMode === 'line' ? '文本对比（行维度）' : '文本对比（字符维度）'
+ }
+}
+
+// 保存到历史记录
+const saveToHistory = () => {
+ // 如果两个输入框都为空，不保存
+ if (!leftText.value.trim() && !rightText.value.trim()) {
+ return
+ }
+
+ const historyItem = {
+ leftText: leftText.value,
+ rightText: rightText.value,
+ compareMode: compareMode.value,
+ textSubMode: textSubMode.value,
+ ignoreListOrder: ignoreListOrder.value,
+ time: Date.now()
+ }
+
+ // 从localStorage读取现有历史
+ let history = []
+ try {
+ const stored = localStorage.getItem(STORAGE_KEY)
+ if (stored) {
+ history = JSON.parse(stored)
+ }
+ } catch (e) {
+ console.error('读取历史记录失败', e)
+ }
+
+ // 检查是否与最新记录相同，如果相同则不保存
+ if (history.length > 0) {
+ const lastItem = history[0]
+ if (lastItem.leftText === historyItem.leftText &&
+ lastItem.rightText === historyItem.rightText &&
+ lastItem.compareMode === historyItem.compareMode &&
+ lastItem.textSubMode === historyItem.textSubMode &&
+ lastItem.ignoreListOrder === historyItem.ignoreListOrder) {
+ return
+ }
+ }
+
+ // 添加到开头
+ history.unshift(historyItem)
+
+ // 限制最多50条
+ if (history.length > MAX_HISTORY) {
+ history = history.slice(0, MAX_HISTORY)
+ }
+
+ // 保存到localStorage
+ try {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(history))
+ loadHistoryList()
+ } catch (e) {
+ console.error('保存历史记录失败', e)
+ }
+}
+
+// 加载历史记录列表
+const loadHistoryList = () => {
+ try {
+ const stored = localStorage.getItem(STORAGE_KEY)
+ if (stored) {
+ historyList.value = JSON.parse(stored)
+ }
+ } catch (e) {
+ console.error('加载历史记录失败', e)
+ historyList.value = []
+ }
+}
+
+// 加载历史记录
+const loadHistory = (item) => {
+ leftText.value = item.leftText || ''
+ rightText.value = item.rightText || ''
+ compareMode.value = item.compareMode || 'text'
+ textSubMode.value = item.textSubMode || 'line'
+ ignoreListOrder.value = item.ignoreListOrder || false
+ updateLeftLineCount()
+ updateRightLineCount()
+ compareResult.value = null
+}
+
onMounted(() => {
updateLeftLineCount()
updateRightLineCount()
+ loadHistoryList()
// compareTest()
})
@@ -1807,12 +2123,127 @@ onUnmounted(() => {
background: #ffffff;
}
+/* 侧栏样式 */
+.sidebar {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 300px;
+ background: #ffffff;
+ border-right: 1px solid #e5e5e5;
+ transform: translateX(-100%);
+ transition: transform 0.3s ease;
+ z-index: 10;
+ display: flex;
+ flex-direction: column;
+ box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
+}
+
+.sidebar-open {
+ transform: translateX(0);
+}
+
+.content-wrapper.sidebar-pushed {
+ margin-left: 300px;
+}
+
+.sidebar-header {
+ padding: 1rem;
+ border-bottom: 1px solid #e5e5e5;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: #ffffff;
+}
+
+.sidebar-header h3 {
+ margin: 0;
+ font-size: 1rem;
+ color: #1a1a1a;
+ font-weight: 500;
+}
+
+.close-btn {
+ background: none;
+ border: none;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: #666666;
+ padding: 0;
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: color 0.2s;
+}
+
+.close-btn:hover {
+ color: #1a1a1a;
+}
+
+.sidebar-content {
+ flex: 1;
+ overflow-y: auto;
+ padding: 0.5rem;
+ background: #ffffff;
+}
+
+.empty-history {
+ padding: 2rem;
+ text-align: center;
+ color: #999999;
+ font-size: 0.875rem;
+}
+
+.history-item {
+ padding: 0.75rem;
+ margin-bottom: 0.5rem;
+ background: #ffffff;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.2s;
+ border: 1px solid #e5e5e5;
+}
+
+.history-item:hover {
+ background: #f5f5f5;
+ border-color: #d0d0d0;
+}
+
+.history-time {
+ font-size: 0.75rem;
+ color: #999999;
+ margin-bottom: 0.25rem;
+}
+
+.history-preview {
+ font-size: 0.875rem;
+ color: #1a1a1a;
+}
+
+.history-mode {
+ font-weight: 500;
+ color: #1a1a1a;
+ margin-bottom: 0.25rem;
+ font-size: 0.8125rem;
+}
+
+.history-text {
+ font-family: 'Courier New', monospace;
+ word-break: break-all;
+ color: #666666;
+ font-size: 0.8125rem;
+}
+
.content-wrapper {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: #ffffff;
+ transition: margin-left 0.3s ease;
}
/* 工具栏 */
@@ -1886,6 +2317,57 @@ onUnmounted(() => {
border-color: #1a1a1a;
}
+.switch-label {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ cursor: pointer;
+ user-select: none;
+}
+
+.switch-input {
+ width: 36px;
+ height: 20px;
+ appearance: none;
+ background: #e5e5e5;
+ border-radius: 10px;
+ position: relative;
+ cursor: pointer;
+ transition: background 0.2s;
+ outline: none;
+}
+
+.switch-input:checked {
+ background: #1a1a1a;
+}
+
+.switch-input::before {
+ content: '';
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background: #ffffff;
+ top: 2px;
+ left: 2px;
+ transition: transform 0.2s;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.switch-input:checked::before {
+ transform: translateX(16px);
+}
+
+.switch-text {
+ font-size: 0.8125rem;
+ color: #666666;
+ font-weight: 500;
+}
+
+.switch-input:checked + .switch-text {
+ color: #1a1a1a;
+}
+
.toolbar-actions {
display: flex;
gap: 0.5rem;
@@ -1940,6 +2422,34 @@ onUnmounted(() => {
flex-direction: column;
overflow: hidden;
background: #ffffff;
+ position: relative;
+}
+
+.sidebar-toggle {
+ position: absolute;
+ left: 0;
+ bottom: 1rem;
+ z-index: 5;
+}
+
+.toggle-btn {
+ width: 32px;
+ height: 48px;
+ background: #1a1a1a;
+ color: #ffffff;
+ border: none;
+ border-radius: 0 4px 4px 0;
+ cursor: pointer;
+ font-size: 0.875rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s;
+ box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+}
+
+.toggle-btn:hover {
+ background: #333333;
}
.panel-header {
@@ -2332,6 +2842,11 @@ onUnmounted(() => {
gap: 0.25rem;
}
+ .sidebar {
+ width: 80%;
+ max-width: 300px;
+ }
+
.toast-notification {
bottom: 10px;
left: 1rem;