feat:新增节点数据储存

apps/web/package.json

@@ -12,6 +12,7 @@
     "@repo/nodes": "workspace:^",
     "element-plus": "^2.13.1",
     "normalize.css": "^8.0.1",
+    "pinia": "^3.0.4",
     "vue": "^3.5.24",
     "vue-router": "4"
   },

apps/web/src/components/setter/HttpSetter.vue

@@ -21,26 +21,12 @@ const props = withDefaults(
 const emit = defineEmits<{
     'update:visible': [value: boolean]
 }>()
+
 </script>
 <template>
     <div class='content'>
-        <ElDrawer :model-value="visible" :show-close="false" size="25%" @close="emit('update:visible', false)">
-
-            <template #header>
-                <h4>HTTP请求</h4>
-                <Icon icon="lucide:x" height="24" width="24"></Icon>
-            </template>
-
-            <!-- Drawer content -->
-            This is drawer content.
 
-            <!-- <template #footer>
-                <ElButton type="success" size="large" class="w-full" @click="emit('update:visible', false)">
-                    运行
-                </ElButton>
-            </template> -->
 
-        </ElDrawer>
     </div>
 </template>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>

apps/web/src/components/setter/index.vue

@@ -2,26 +2,91 @@
  * @Author: liuJie
  * @Date: 2026-01-25 22:13:06
  * @LastEditors: liuJie
- * @LastEditTime: 2026-01-25 22:26:30
+ * @LastEditTime: 2026-01-27 10:01:23
  * @Describe: file describe
 -->
 <script lang="ts" setup>
 import HttpSetter from './HttpSetter.vue';
+import { Icon } from "@iconify/vue";
+import { useComponentMapInspector } from "@/store"
+
+const store = useComponentMapInspector()
+
+console.log(store.componentMap['http'])
+
 interface Props {
     data: any, // 暂时定义
     visible: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
     id: '',
+    data: null,
     visible: false
 })
 const emit = defineEmits<{
     'update:visible': [value: boolean]
 }>()
+const closeDrawer = () => {
+    emit('update:visible', false)
+}
 </script>
 <template>
     <div class='setter'>
+        <div class="drawer shadow-2xl" :class="{ 'drawer--open': props.visible }">
+            <header>
+                <h4>HTTP请求</h4>
+                <Icon icon="lucide:x" height="24" width="24" @click="closeDrawer" class="cursor-pointer"></Icon>
+            </header>
+            <div class="content">
+                <component :is="'http-node'" :data="props.data"></component>
+            </div>
+        </div>
+
         <HttpSetter :data="data" v-model:visible="props.visible" />
     </div>
 </template>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.setter {
+
+    /* Drawer 主体 */
+    .drawer {
+        position: fixed;
+        top: 100px;
+        right: 5px;
+        bottom: 10px;
+        width: 420px;
+        background: #fff;
+        z-index: 1000;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        border: 1px solid #e4e4e4;
+
+        /* 初始隐藏状态 */
+        transform: translateX(100%);
+        transition: transform 0.25s ease;
+    }
+
+    /* 显示状态 */
+    .drawer--open {
+        transform: translateX(0);
+    }
+
+    /* Header */
+    .drawer header {
+        height: 56px;
+        padding: 0 16px;
+        border-bottom: 1px solid #eee;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    /* 内容区 */
+    .drawer .content {
+        flex: 1;
+        padding: 16px;
+        overflow-y: auto;
+    }
+}
+</style>

apps/web/src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import store from './store'
 import router from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
@@ -8,4 +9,4 @@ import 'element-plus/dist/index.css'
 import 'normalize.css'
 import 'virtual:uno.css'
 
-createApp(App).use(router).use(ElementPlus).mount('#app')
+createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

apps/web/src/store/index.ts

@@ -0,0 +1,21 @@
+/*
+ * @Author: liuJie
+ * @Date: 2026-01-26 21:52:39
+ * @LastEditors: liuJie
+ * @LastEditTime: 2026-01-27 10:10:22
+ * @Describe: file describe
+ */
+import type { App } from "vue";
+import { createPinia } from "pinia";
+import useComponentMapInspector from "@/store/modules/materialSetterMaps.store"
+import useConditionOptionsStore from "@/store/modules/conditionNode.store"
+import useHttpOptionsStore from "@/store/modules/httpNode.store"
+
+const pinia = createPinia();
+
+const store = (app: App<Element>) => {
+    app.use(pinia);
+}
+export { useComponentMapInspector, useConditionOptionsStore, useHttpOptionsStore };
+
+export default store;

apps/web/src/store/modules/conditionNode.store.ts

@@ -0,0 +1,25 @@
+/*
+ * @Author: liuJie
+ * @Date: 2026-01-27 10:05:01
+ * @LastEditors: liuJie
+ * @LastEditTime: 2026-01-27 10:09:54
+ * @Describe: 往对应节点里存储选项信息
+ */
+
+import { defineStore } from "pinia";
+
+export const useConditionOptionsStore = defineStore('conditionOptions', {
+    state: () => ({
+        currentNodeOptions: null as null | Record<string, any>,
+    }),
+    actions: {
+        setCurrentNodeOptions(options: Record<string, any>) {
+            this.currentNodeOptions = options;
+        },
+        clearCurrentNodeOptions() {
+            this.currentNodeOptions = null;
+        }
+    },
+})
+
+export default useConditionOptionsStore;

apps/web/src/store/modules/httpNode.store.ts

@@ -0,0 +1,25 @@
+/*
+ * @Author: liuJie
+ * @Date: 2026-01-27 10:08:16
+ * @LastEditors: liuJie
+ * @LastEditTime: 2026-01-27 10:10:16
+ * @Describe: file describe
+ */
+
+import { defineStore } from "pinia";
+
+export const useHttpOptionsStore = defineStore('httpOptions', {
+    state: () => ({
+        currentNodeOptions: null as null | Record<string, any>,
+    }),
+    actions: {
+        setCurrentNodeOptions(options: Record<string, any>) {
+            this.currentNodeOptions = options;
+        },
+        clearCurrentNodeOptions() {
+            this.currentNodeOptions = null;
+        }
+    },
+})
+
+export default useHttpOptionsStore;

apps/web/src/store/modules/materialSetterMaps.store.ts

@@ -0,0 +1,38 @@
+/*
+ * @Author: liuJie
+ * @Date: 2026-01-26 17:22:54
+ * @LastEditors: liuJie
+ * @LastEditTime: 2026-01-27 10:06:32
+ * @Describe: 异步组件映射
+ */
+import {defineAsyncComponent, shallowRef} from "vue";
+import { defineStore } from "pinia";
+
+const useComponentMapInspector = defineStore('componentMapInspector', {
+    state: () => ({
+        componentMap: {
+            http: shallowRef(
+                defineAsyncComponent({
+                    loader:()=>import('@/components/setter/HttpSetter.vue'),
+                    // errorComponent:  错误组件
+                })),
+            condition: shallowRef(
+                defineAsyncComponent({
+                    loader:()=>import('@/components/setter/ConditionSetter.vue'),
+                    // errorComponent:  错误组件
+                })),
+            database: shallowRef(
+                defineAsyncComponent({
+                    loader:()=>import('@/components/setter/DatabaseSetter.vue'),
+                    // errorComponent:  错误组件
+                })),
+            code: shallowRef(
+                defineAsyncComponent({
+                    loader:()=>import('@/components/setter/CodeSetter.vue'),
+                    // errorComponent:  错误组件
+                }))
+        },
+    }),
+})
+
+export default useComponentMapInspector