|
@@ -1,10 +1,13 @@
|
|
|
import { create } from "zustand";
|
|
|
-import { editAgentWebsite as _editAgentWebsite, editAgentAvatar, editAgentWebsite } from "@/service/agent";
|
|
|
+import {
|
|
|
+ editAgentWebsite as _editAgentWebsite,
|
|
|
+ editAgentAvatar,
|
|
|
+ editAgentWebsite,
|
|
|
+} from "@/service/agent";
|
|
|
import { TComponentItem } from "@/types/agent";
|
|
|
import { isSuccess } from "@/utils";
|
|
|
|
|
|
-
|
|
|
-function safeSwap(arr:any[], index1:number, index2: number) {
|
|
|
+function safeSwap(arr: any[], index1: number, index2: number) {
|
|
|
if (
|
|
|
index1 >= 0 &&
|
|
|
index1 < arr.length &&
|
|
@@ -17,13 +20,14 @@ function safeSwap(arr:any[], index1:number, index2: number) {
|
|
|
}
|
|
|
|
|
|
export interface ComponentState {
|
|
|
- agentId: string,
|
|
|
+ agentId: string;
|
|
|
maxIndex: number; // 最大组件索引
|
|
|
insertIndex: number; // 插入组件的索引
|
|
|
components: TComponentItem[] | []; // 后期是否需要改成链表方便中间插入删除等操作??
|
|
|
currentComponent: TComponentItem | null;
|
|
|
+ loading: boolean;
|
|
|
setComponentList: (list: TComponentItem[], agentId: string) => void;
|
|
|
- delComponent: (c: TComponentItem) => Promise<void>;
|
|
|
+ delComponent: (c: TComponentItem) => Promise<boolean>;
|
|
|
saveComponent: (c: TComponentItem) => Promise<boolean>;
|
|
|
insertComponent: (c: TComponentItem[]) => Promise<TComponentItem[] | null>;
|
|
|
swapTwoComponent: (c: TComponentItem, direction: number) => Promise<void>;
|
|
@@ -50,27 +54,24 @@ export const sortComponentsByIndex = (a: TComponentItem, b: TComponentItem) => {
|
|
|
|
|
|
export const useComponentStore = create<ComponentState>((set, get) => ({
|
|
|
loading: false,
|
|
|
- agentId: '',
|
|
|
+ agentId: "",
|
|
|
components: [],
|
|
|
currentComponent: null,
|
|
|
maxIndex: 1,
|
|
|
insertIndex: -1,
|
|
|
setComponentList: (list: TComponentItem[], agentId: string) => {
|
|
|
let sorted = list.sort(sortComponentsByIndex);
|
|
|
- set({agentId, components: sorted, maxIndex: getMaxIndex(sorted) });
|
|
|
+ set({ agentId, components: sorted, maxIndex: getMaxIndex(sorted) });
|
|
|
},
|
|
|
insertComponent: async (list: TComponentItem[]) => {
|
|
|
-
|
|
|
-
|
|
|
const insertIndex = get().insertIndex;
|
|
|
let _components = get().components.sort(sortComponentsByIndex);
|
|
|
- console.log('current components list:', _components)
|
|
|
- const _componentsLen = _components.length
|
|
|
+ console.log("current components list:", _components);
|
|
|
+ const _componentsLen = _components.length;
|
|
|
|
|
|
-
|
|
|
console.log("insertIndex:", insertIndex);
|
|
|
if (insertIndex === -1) {
|
|
|
- console.log('顶部插入')
|
|
|
+ console.log("顶部插入");
|
|
|
// 顶部插入, 原组件列表所有 index + list.length
|
|
|
_components = _components.map((item: TComponentItem) => {
|
|
|
item.data.index = item.data.index + list.length;
|
|
@@ -78,21 +79,21 @@ export const useComponentStore = create<ComponentState>((set, get) => ({
|
|
|
});
|
|
|
_components = [...list, ..._components];
|
|
|
} else if (insertIndex === _componentsLen - 1) {
|
|
|
- console.log('底部插入')
|
|
|
+ console.log("底部插入");
|
|
|
// 底部插入, 所有新插入的组件 index 需要加上已存在组件列表长度
|
|
|
- list = list.map( c => {
|
|
|
- c.data.index = c.data.index + _componentsLen
|
|
|
- return c
|
|
|
- })
|
|
|
+ list = list.map((c) => {
|
|
|
+ c.data.index = c.data.index + _componentsLen;
|
|
|
+ return c;
|
|
|
+ });
|
|
|
_components = [..._components, ...list];
|
|
|
} else {
|
|
|
- // 中间插入,
|
|
|
- console.log('中间插入')
|
|
|
+ // 中间插入,
|
|
|
+ console.log("中间插入");
|
|
|
const restIndex = insertIndex + 1;
|
|
|
- list = list.map( c => {
|
|
|
- c.data.index = c.data.index + restIndex
|
|
|
- return c
|
|
|
- })
|
|
|
+ list = list.map((c) => {
|
|
|
+ c.data.index = c.data.index + restIndex;
|
|
|
+ return c;
|
|
|
+ });
|
|
|
|
|
|
let rest = _components.slice(restIndex).map((item) => {
|
|
|
if (item.data.index) {
|
|
@@ -103,51 +104,51 @@ export const useComponentStore = create<ComponentState>((set, get) => ({
|
|
|
});
|
|
|
|
|
|
_components = [..._components.slice(0, restIndex), ...list, ...rest];
|
|
|
- console.log(_components,111)
|
|
|
+ console.log(_components, 111);
|
|
|
}
|
|
|
|
|
|
+ set({ components: _components });
|
|
|
|
|
|
- set({components: _components})
|
|
|
-
|
|
|
return _components;
|
|
|
},
|
|
|
saveComponent: async (c: TComponentItem) => {
|
|
|
console.log("saveComponent");
|
|
|
|
|
|
if (c.data.id === undefined) {
|
|
|
- console.log('没有 id 无法编辑该组件')
|
|
|
- return false
|
|
|
+ console.log("没有 id 无法编辑该组件");
|
|
|
+ return false;
|
|
|
}
|
|
|
|
|
|
const insertIndex = get().insertIndex;
|
|
|
const agentId = get().agentId;
|
|
|
const components = [...get().components];
|
|
|
console.log(c.data.id, insertIndex);
|
|
|
-
|
|
|
- const edit = components.find(item => item.data.id === c.data.id)
|
|
|
|
|
|
- if(edit){
|
|
|
- edit.data = c.data
|
|
|
- edit.enabled = c.enabled
|
|
|
+ const edit = components.find((item) => item.data.id === c.data.id);
|
|
|
+
|
|
|
+ if (edit) {
|
|
|
+ edit.data = c.data;
|
|
|
+ edit.enabled = c.enabled;
|
|
|
}
|
|
|
|
|
|
// 简单更新组件
|
|
|
console.log("a: ", components);
|
|
|
console.log("b: ", get().components);
|
|
|
-
|
|
|
+
|
|
|
// 普通更新或新建
|
|
|
- const {status} = await editAgentWebsite(agentId, {components: components});
|
|
|
- if(isSuccess(status)){
|
|
|
+ const { status } = await editAgentWebsite(agentId, {
|
|
|
+ components: components,
|
|
|
+ });
|
|
|
+ if (isSuccess(status)) {
|
|
|
set({
|
|
|
- components
|
|
|
- })
|
|
|
- return true
|
|
|
+ components,
|
|
|
+ });
|
|
|
+ return true;
|
|
|
}
|
|
|
- return false
|
|
|
-
|
|
|
+ return false;
|
|
|
},
|
|
|
setInsertIndex: (index) => {
|
|
|
- console.log(index,' setInsertIndex')
|
|
|
+ console.log(index, " setInsertIndex");
|
|
|
set({ insertIndex: index });
|
|
|
},
|
|
|
setCurrentComponent: (component: TComponentItem | null) => {
|
|
@@ -156,27 +157,31 @@ export const useComponentStore = create<ComponentState>((set, get) => ({
|
|
|
return component;
|
|
|
},
|
|
|
delComponent: async (c) => {
|
|
|
- set({components: []})
|
|
|
-
|
|
|
- // if (!c.data.id) {
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // set((state) => {
|
|
|
- // const filtered = state.components
|
|
|
- // .filter((item: TComponentItem) => item?.data.id !== c.data.id)
|
|
|
- // .sort(sortComponentsByIndex)
|
|
|
- // .map((item: TComponentItem, index) => {
|
|
|
- // return {
|
|
|
- // ...item,
|
|
|
- // index: index + 1,
|
|
|
- // };
|
|
|
- // });
|
|
|
- // return {
|
|
|
- // components: [...filtered],
|
|
|
- // };
|
|
|
- // });
|
|
|
+ const { components, agentId } = get();
|
|
|
+ // todo: 此处是否需要过滤一些没有 id 的脏数据组件
|
|
|
+ if (!c.data.id || !agentId) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const filtered = components
|
|
|
+ .filter((item: TComponentItem) => item?.data.id !== c.data.id)
|
|
|
+ .sort(sortComponentsByIndex)
|
|
|
+ .map((item: TComponentItem, index) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ index: index + 1,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ const { status } = await editAgentWebsite(agentId, {
|
|
|
+ components: filtered,
|
|
|
+ });
|
|
|
+ if (isSuccess(status)) {
|
|
|
+ set({ components: filtered });
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
calcMaxIndex: (components?: TComponentItem[]) => {
|
|
|
set((state) => {
|
|
|
return { maxIndex: getMaxIndex(components ?? state.components) };
|
|
@@ -205,20 +210,24 @@ export const useComponentStore = create<ComponentState>((set, get) => ({
|
|
|
} else if (direction === 1) {
|
|
|
destComponent = components[arrIndex + 1];
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- const tmpList = [...components]
|
|
|
|
|
|
-
|
|
|
+ const tmpList = [...components];
|
|
|
+
|
|
|
if (destComponent) {
|
|
|
destComponent = { ...destComponent };
|
|
|
- const destComponentIndex = components.findIndex((item) => item.data.id === destComponent?.data.id);
|
|
|
+ const destComponentIndex = components.findIndex(
|
|
|
+ (item) => item.data.id === destComponent?.data.id
|
|
|
+ );
|
|
|
const i = cur.data.index;
|
|
|
cur.data.index = destComponent.data.index;
|
|
|
destComponent.data.index = i;
|
|
|
- const r = safeSwap(tmpList, arrIndex, destComponentIndex) as TComponentItem[]
|
|
|
- await editAgentWebsite(get().agentId, {components: r})
|
|
|
- set({components: r})
|
|
|
+ const r = safeSwap(
|
|
|
+ tmpList,
|
|
|
+ arrIndex,
|
|
|
+ destComponentIndex
|
|
|
+ ) as TComponentItem[];
|
|
|
+ await editAgentWebsite(get().agentId, { components: r });
|
|
|
+ set({ components: r });
|
|
|
}
|
|
|
},
|
|
|
}));
|