优化侧边栏菜单排序的实现
This commit is contained in:
parent
785c3bfa9b
commit
4715ca0e87
@ -25,7 +25,7 @@
|
||||
<!-- Edit mode: show workspace items with controls -->
|
||||
<div v-else class="edit-menu">
|
||||
<draggable
|
||||
v-model="editableWorkspaces"
|
||||
v-model="menuStore.editableWorkspaceOrder"
|
||||
item-key="id"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
@ -97,7 +97,6 @@ const workspaceEditStore = useWorkspaceEditStore()
|
||||
|
||||
const appName = computed(() => localStorage.getItem('appName') || 'Jingrow')
|
||||
|
||||
const editableWorkspaces = ref<AppMenuItem[]>([])
|
||||
const editDialogState = ref({ show: false, workspace: null as AppMenuItem | null })
|
||||
|
||||
const parentWorkspaceOptions = computed(() => {
|
||||
@ -108,7 +107,7 @@ const parentWorkspaceOptions = computed(() => {
|
||||
const isPrivate = currentWorkspace.isPrivate ?? false
|
||||
|
||||
// Filter workspaces: only same type (public/private) and exclude current workspace
|
||||
return editableWorkspaces.value
|
||||
return menuStore.editableWorkspaceOrder
|
||||
.filter(w => {
|
||||
// Exclude current workspace itself
|
||||
if (w.id === currentWorkspace.id) return false
|
||||
@ -129,13 +128,6 @@ watch(() => workspaceEditStore.isEditMode, (isEdit) => {
|
||||
if (isEdit) syncEditableWorkspaces()
|
||||
})
|
||||
|
||||
// Sync sorted workspaces to store when changed (for save)
|
||||
watch(editableWorkspaces, (items) => {
|
||||
if (workspaceEditStore.isEditMode) {
|
||||
workspaceEditStore.updateSortedWorkspaces(items)
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
function syncEditableWorkspaces() {
|
||||
const workspaceItems = menuStore.items
|
||||
.filter(item => item.type === 'workspace')
|
||||
@ -143,11 +135,6 @@ function syncEditableWorkspaces() {
|
||||
|
||||
// Sort to ensure parent items come before their children
|
||||
const sorted: AppMenuItem[] = []
|
||||
const byId: Record<string, AppMenuItem> = {}
|
||||
|
||||
workspaceItems.forEach(item => {
|
||||
byId[item.id] = item
|
||||
})
|
||||
|
||||
// First add all root items (items without parent)
|
||||
workspaceItems.forEach(item => {
|
||||
@ -162,7 +149,7 @@ function syncEditableWorkspaces() {
|
||||
}
|
||||
})
|
||||
|
||||
editableWorkspaces.value = sorted
|
||||
menuStore.editableWorkspaceOrder = sorted
|
||||
}
|
||||
|
||||
function getMenuOptions(workspace: AppMenuItem) {
|
||||
@ -189,7 +176,7 @@ async function editWorkspace(workspace: AppMenuItem) {
|
||||
// Convert parentId (name with user suffix) to parent label (title without suffix)
|
||||
const processedWorkspace = { ...workspace }
|
||||
if (processedWorkspace.parentId) {
|
||||
const parentItem = editableWorkspaces.value.find(w => w.workspaceName === processedWorkspace.parentId)
|
||||
const parentItem = menuStore.editableWorkspaceOrder.find(w => w.workspaceName === processedWorkspace.parentId)
|
||||
if (parentItem) {
|
||||
processedWorkspace.parentId = parentItem.label
|
||||
}
|
||||
|
||||
@ -66,6 +66,9 @@ export const useMenuStore = defineStore('menu', () => {
|
||||
const hasWorkspaceAccess = ref(false)
|
||||
const hasCreateWorkspaceAccess = ref(false)
|
||||
|
||||
// Editable workspace order (for sidebar drag sorting in edit mode)
|
||||
const editableWorkspaceOrder = ref<AppMenuItem[]>([])
|
||||
|
||||
// 正确初始化为数组,而不是函数
|
||||
const initItems = () => {
|
||||
const cached = loadFromStorage()
|
||||
@ -237,6 +240,7 @@ export const useMenuStore = defineStore('menu', () => {
|
||||
workspaces,
|
||||
hasWorkspaceAccess,
|
||||
hasCreateWorkspaceAccess,
|
||||
editableWorkspaceOrder,
|
||||
addMenu,
|
||||
updateMenu,
|
||||
removeMenu,
|
||||
|
||||
@ -1,44 +1,29 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import type { AppMenuItem } from './menu'
|
||||
|
||||
/**
|
||||
* Workspace Edit Mode Store
|
||||
* Manages global edit mode state for workspace sidebar
|
||||
*/
|
||||
export const useWorkspaceEditStore = defineStore('workspaceEdit', () => {
|
||||
// Edit mode state
|
||||
const isEditMode = ref(false)
|
||||
|
||||
// Sorted workspace items (updated when user drags in sidebar)
|
||||
const sortedWorkspaces = ref<AppMenuItem[]>([])
|
||||
|
||||
// Enter edit mode
|
||||
function enterEditMode() {
|
||||
isEditMode.value = true
|
||||
}
|
||||
|
||||
// Exit edit mode
|
||||
function exitEditMode() {
|
||||
isEditMode.value = false
|
||||
}
|
||||
|
||||
// Toggle edit mode
|
||||
function toggleEditMode() {
|
||||
isEditMode.value = !isEditMode.value
|
||||
}
|
||||
|
||||
// Update sorted workspaces
|
||||
function updateSortedWorkspaces(items: AppMenuItem[]) {
|
||||
sortedWorkspaces.value = items
|
||||
}
|
||||
|
||||
return {
|
||||
isEditMode,
|
||||
sortedWorkspaces,
|
||||
enterEditMode,
|
||||
exitEditMode,
|
||||
toggleEditMode,
|
||||
updateSortedWorkspaces
|
||||
toggleEditMode
|
||||
}
|
||||
})
|
||||
|
||||
@ -966,8 +966,8 @@ async function saveChanges() {
|
||||
// Save sidebar workspace sort order
|
||||
async function saveSidebarSortOrder() {
|
||||
try {
|
||||
// Use sorted workspaces from store (updated by sidebar drag)
|
||||
const workspaceItems = workspaceEditStore.sortedWorkspaces
|
||||
// Use sorted workspaces from menuStore (updated by sidebar drag)
|
||||
const workspaceItems = menuStore.editableWorkspaceOrder
|
||||
|
||||
if (!workspaceItems || workspaceItems.length === 0) return
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user