更新保存组件

src/modules/editor/components/CompSave/index.tsx

@@ -0,0 +1,77 @@
+import { defineComponent, reactive } from "vue";
+import { useEditor } from "../..";
+import { useDialog } from "queenjs/api/feedback";
+
+import {Input, Select, Button, Form} from "ant-design-vue"
+
+const layout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 18 },
+};
+
+export default defineComponent({
+  setup() {
+
+    const modal = useDialog();
+    
+    const formState: { [name: string]: any } = reactive({
+       title:"",
+       type: "comp"
+    });
+    const rules = reactive({
+      title: [
+        { required: true, message: "名称不能为空", trigger: "change" },
+        {
+          min: 2,
+          max: 20,
+          message: "长度为2~20位字符",
+          trigger: "change",
+        },
+      ],
+      type: [{ required: true, message: "类型不能为空", trigger: "change" },]
+    });
+
+    const { validate, validateInfos } = Form.useForm(formState, rules);
+    function submit() {
+
+      console.log("xxx");
+
+      validate().then(async () => {
+        modal.submit(formState);
+      });
+    }
+ 
+    return () => {
+     
+
+      return (
+            <div>
+              <Form {...layout} onSubmit={submit}>
+                  <Form.Item {...validateInfos.title} label="名称">
+                    <Input
+                      placeholder={"请输入名称"}
+                      v-model={[formState.title, "value"]}
+                    />
+                  </Form.Item>
+
+                  <Form.Item {...validateInfos.type} label="类型">
+                      <Select
+                        v-model={[formState.type, "value"]}
+                      >
+                        <Select.Option value="comp">组件</Select.Option>
+                        <Select.Option value="text">文字</Select.Option>
+                        <Select.Option value="shape">形状</Select.Option>
+                      </Select>
+                  </Form.Item>
+
+                  <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ span: 24 }}>
+                      <Button block type="primary" htmlType="submit">
+                        确定
+                      </Button>
+                  </Form.Item>
+              </Form>
+            </div>
+      );
+    };
+  },
+});

src/modules/editor/components/index.ts

@@ -1,7 +1,9 @@
 import Preview from "./Preview";
 import Viewport from "./Viewport";
+import CompSave from "./CompSave";
 
 export default {
   Viewport,
   Preview,
+  CompSave,
 };

src/modules/editor/module/actions/edit.ts → src/modules/editor/module/actions/edit.tsx

@@ -5,6 +5,7 @@ import { ScreenshotCtrl } from "../../controllers/ScreenshotCtrl";
 import { CompObject } from "../../controllers/SelectCtrl/compObj";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { ICompKeys, Layout } from "../../typings";
+import CompSave from "../../components/CompSave";
 
 export const editActions = EditorModule.action({
   pickComp(compId: string, selected = true) {
@@ -266,22 +267,41 @@ export const editActions = EditorModule.action({
   // 保存容器为组件
   async saveAsComp(comp: DesignComp) {
     try {
+
+      const CompSave = this.components.CompSave as any;
+      let title = "";
+      let type = "comp";
+
+      try {
+          const ret:any = await queenApi.dialog(<CompSave />, {width:"300px",  title: "保存到我的"});
+        if (!ret) {
+          return;
+        }
+        title = ret.title;
+        type = ret.type;
+
+      } catch (error) {
+        return;
+      }
+
+      console.log( title, type);
+
       // 组件封面
       const blob = await new ScreenshotCtrl().snap({
         element: comp.$el,
       });
       const thumbnail = URL.createObjectURL(blob);
-      const title = await queenApi.showInput({
-        title: "保存到我的",
-        defaultValue: this.controls.compUICtrl.state.components.get(
-          comp.compKey
-        )?.name,
-      });
-
-      
-
+      // const title = await queenApi.showInput({
+      //   title: "保存到我的",
+      //   defaultValue: this.controls.compUICtrl.state.components.get(
+      //     comp.compKey
+      //   )?.name,
+      // });
+
+    
       const data = {
         title,
+        type,
         thumbnail,
         compMap: cloneDeep(this.store.designData.compMap),
       };