Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

src/assets/icons/components/IconApplication.tsx

@@ -0,0 +1,7 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconApplication = createIcon(<svg viewBox="0 0 1024 1024">
+    <path
+        d="M1008.302197 306.556735 789.691542 525.16739C769.561962 545.29697 736.950904 545.29697 716.821324 525.16739L498.2391 306.556735C478.10952 286.455586 478.10952 253.816097 498.2391 233.714948L716.821324 15.104293C736.950904-5.025287 769.561962-5.025287 789.691542 15.104293L1008.302197 233.714948C1028.431777 253.816097 1028.431777 286.455586 1008.302197 306.556735ZM753.668691 54.823253 537.958061 270.533884 753.668691 486.244515 969.379322 270.533884 753.668691 54.823253ZM369.841946 1023.971568 57.094228 1023.971568C25.677298 1023.971568 0.231007 998.525277 0.231007 967.108347L0.231007 654.360629C0.231007 622.972131 25.677298 597.497407 57.094228 597.497407L369.841946 597.497407C401.230445 597.497407 426.705168 622.972131 426.705168 654.360629L426.705168 967.108347C426.705168 998.525277 401.230445 1023.971568 369.841946 1023.971568ZM369.841946 654.360629 57.094228 654.360629 57.094228 967.108347 369.841946 967.108347 369.841946 654.360629ZM369.841946 512.202575 57.094228 512.202575C25.677298 512.202575 0.231007 486.756284 0.231007 455.339354L0.231007 142.591636C0.231007 111.203137 25.677298 85.728414 57.094228 85.728414L369.841946 85.728414C401.230445 85.728414 426.705168 111.203137 426.705168 142.591636L426.705168 455.339354C426.705168 486.756284 401.230445 512.202575 369.841946 512.202575ZM369.841946 142.591636 57.094228 142.591636 57.094228 455.339354 369.841946 455.339354 369.841946 142.591636ZM568.863221 597.497407 881.61094 597.497407C912.999438 597.497407 938.474161 622.972131 938.474161 654.360629L938.474161 967.108347C938.474161 998.525277 912.999438 1023.971568 881.61094 1023.971568L568.863221 1023.971568C537.446292 1023.971568 512 998.525277 512 967.108347L512 654.360629C512 622.972131 537.446292 597.497407 568.863221 597.497407ZM568.863221 967.108347 881.61094 967.108347 881.61094 654.360629 568.863221 654.360629 568.863221 967.108347Z"
+        fill="currentColor"></path>
+</svg>)

src/assets/icons/components/IconCloud.tsx

@@ -0,0 +1,13 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconCloud = createIcon(<svg viewBox="0 0 1024 1024">
+    <path
+        d="M510.723192 787.364921a21.280133 21.280133 0 0 1-21.280133-21.280133v-255.361596a21.280133 21.280133 0 0 1 13.193682-19.577722 20.003325 20.003325 0 0 1 22.982544 4.681629l127.680798 127.680798a20.85453 20.85453 0 0 1-29.792186 29.792186l-91.504572-91.078969V766.084788a21.280133 21.280133 0 0 1-21.280133 21.280133z"
+        fill="currentColor"></path>
+    <path
+        d="M383.042394 659.684123a20.003325 20.003325 0 0 1-14.896093-6.38404 20.428928 20.428928 0 0 1 0-29.792186l127.680798-127.680798a20.85453 20.85453 0 0 1 29.792186 29.792186l-127.680798 127.680798a20.003325 20.003325 0 0 1-14.896093 6.38404zM297.921862 787.364921H234.081463a170.241064 170.241064 0 0 1-170.241064-170.241064 170.241064 170.241064 0 0 1 170.241064-170.241064H297.921862a21.280133 21.280133 0 0 1 0 42.560266H234.081463a127.680798 127.680798 0 0 0-127.680798 127.680798 127.680798 127.680798 0 0 0 127.680798 127.680798H297.921862a21.280133 21.280133 0 0 1 0 42.560266zM787.364921 787.364921H723.524522a21.280133 21.280133 0 0 1 0-42.560266h63.840399a127.680798 127.680798 0 0 0 127.680798-127.680798 127.680798 127.680798 0 0 0-127.680798-127.680798H723.524522a21.280133 21.280133 0 0 1 0-42.560266h63.840399a170.241064 170.241064 0 0 1 170.241064 170.241064 170.241064 170.241064 0 0 1-170.241064 170.241064z"
+        fill="currentColor"></path>
+    <path
+        d="M723.524522 489.443059a21.280133 21.280133 0 0 1-21.280133-21.280133 191.521197 191.521197 0 0 0-383.042394 0 21.280133 21.280133 0 0 1-42.560266 0 234.081463 234.081463 0 0 1 468.162926 0 21.280133 21.280133 0 0 1-21.280133 21.280133z"
+        fill="currentColor"></path>
+</svg>)

src/assets/icons/components/IconText.tsx

@@ -1,3 +1,19 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconText = createIcon(<svg viewBox="0 0 16 16"><g transform="translate(0 -0.078)"><rect fill="none" opacity="0.2" width="16" height="16" transform="translate(0 0.078)"/><g transform="translate(1.892 1.971)"><rect fill="none" stroke="#a9abaf" stroke-linejoin="round" width="12" height="12" rx="1" transform="translate(0.107 0.107)"/><g transform="translate(2.764 2.367)"><path fill="none" stroke="#a9abaf" stroke-linejoin="round" stroke-linecap="round" d="M16,17.192V16h6.36v1.192" transform="translate(-16 -16)"/><path fill="none" stroke="#a9abaf" stroke-linejoin="round" stroke-linecap="round" d="M22,34h1.59" transform="translate(-19.615 -26.845)"/><path fill="none" stroke="#a9abaf" stroke-linejoin="round" stroke-linecap="round" d="M24,18v6.36" transform="translate(-20.821 -17.205)"/></g></g></g></svg>)
+export const IconText = createIcon(<svg viewBox="0 0 16 16">
+    <g transform="translate(0 -0.078)">
+        <rect fill="none" opacity="0.2" width="16" height="16" transform="translate(0 0.078)" />
+        <g transform="translate(1.892 1.971)">
+            <rect fill="none" stroke="currentColor" stroke-linejoin="round" width="12" height="12" rx="1"
+                transform="translate(0.107 0.107)" />
+            <g transform="translate(2.764 2.367)">
+                <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round"
+                    d="M16,17.192V16h6.36v1.192" transform="translate(-16 -16)" />
+                <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M22,34h1.59"
+                    transform="translate(-19.615 -26.845)" />
+                <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M24,18v6.36"
+                    transform="translate(-20.821 -17.205)" />
+            </g>
+        </g>
+    </g>
+</svg>)

src/assets/icons/index.ts

@@ -6,7 +6,9 @@ export * from "./components/IconAirPlain";
 export * from "./components/IconAlignC";
 export * from "./components/IconAlignL";
 export * from "./components/IconAlignR";
+export * from "./components/IconApplication";
 export * from "./components/IconClear";
+export * from "./components/IconCloud";
 export * from "./components/IconCroperr";
 export * from "./components/IconCross";
 export * from "./components/IconCube";

src/assets/icons/svg/application.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 1024 1024">
+    <path
+        d="M1008.302197 306.556735 789.691542 525.16739C769.561962 545.29697 736.950904 545.29697 716.821324 525.16739L498.2391 306.556735C478.10952 286.455586 478.10952 253.816097 498.2391 233.714948L716.821324 15.104293C736.950904-5.025287 769.561962-5.025287 789.691542 15.104293L1008.302197 233.714948C1028.431777 253.816097 1028.431777 286.455586 1008.302197 306.556735ZM753.668691 54.823253 537.958061 270.533884 753.668691 486.244515 969.379322 270.533884 753.668691 54.823253ZM369.841946 1023.971568 57.094228 1023.971568C25.677298 1023.971568 0.231007 998.525277 0.231007 967.108347L0.231007 654.360629C0.231007 622.972131 25.677298 597.497407 57.094228 597.497407L369.841946 597.497407C401.230445 597.497407 426.705168 622.972131 426.705168 654.360629L426.705168 967.108347C426.705168 998.525277 401.230445 1023.971568 369.841946 1023.971568ZM369.841946 654.360629 57.094228 654.360629 57.094228 967.108347 369.841946 967.108347 369.841946 654.360629ZM369.841946 512.202575 57.094228 512.202575C25.677298 512.202575 0.231007 486.756284 0.231007 455.339354L0.231007 142.591636C0.231007 111.203137 25.677298 85.728414 57.094228 85.728414L369.841946 85.728414C401.230445 85.728414 426.705168 111.203137 426.705168 142.591636L426.705168 455.339354C426.705168 486.756284 401.230445 512.202575 369.841946 512.202575ZM369.841946 142.591636 57.094228 142.591636 57.094228 455.339354 369.841946 455.339354 369.841946 142.591636ZM568.863221 597.497407 881.61094 597.497407C912.999438 597.497407 938.474161 622.972131 938.474161 654.360629L938.474161 967.108347C938.474161 998.525277 912.999438 1023.971568 881.61094 1023.971568L568.863221 1023.971568C537.446292 1023.971568 512 998.525277 512 967.108347L512 654.360629C512 622.972131 537.446292 597.497407 568.863221 597.497407ZM568.863221 967.108347 881.61094 967.108347 881.61094 654.360629 568.863221 654.360629 568.863221 967.108347Z"
+        fill="currentColor"></path>
+</svg>

src/assets/icons/svg/cloud.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 1024 1024">
+    <path
+        d="M510.723192 787.364921a21.280133 21.280133 0 0 1-21.280133-21.280133v-255.361596a21.280133 21.280133 0 0 1 13.193682-19.577722 20.003325 20.003325 0 0 1 22.982544 4.681629l127.680798 127.680798a20.85453 20.85453 0 0 1-29.792186 29.792186l-91.504572-91.078969V766.084788a21.280133 21.280133 0 0 1-21.280133 21.280133z"
+        fill="currentColor"></path>
+    <path
+        d="M383.042394 659.684123a20.003325 20.003325 0 0 1-14.896093-6.38404 20.428928 20.428928 0 0 1 0-29.792186l127.680798-127.680798a20.85453 20.85453 0 0 1 29.792186 29.792186l-127.680798 127.680798a20.003325 20.003325 0 0 1-14.896093 6.38404zM297.921862 787.364921H234.081463a170.241064 170.241064 0 0 1-170.241064-170.241064 170.241064 170.241064 0 0 1 170.241064-170.241064H297.921862a21.280133 21.280133 0 0 1 0 42.560266H234.081463a127.680798 127.680798 0 0 0-127.680798 127.680798 127.680798 127.680798 0 0 0 127.680798 127.680798H297.921862a21.280133 21.280133 0 0 1 0 42.560266zM787.364921 787.364921H723.524522a21.280133 21.280133 0 0 1 0-42.560266h63.840399a127.680798 127.680798 0 0 0 127.680798-127.680798 127.680798 127.680798 0 0 0-127.680798-127.680798H723.524522a21.280133 21.280133 0 0 1 0-42.560266h63.840399a170.241064 170.241064 0 0 1 170.241064 170.241064 170.241064 170.241064 0 0 1-170.241064 170.241064z"
+        fill="currentColor"></path>
+    <path
+        d="M723.524522 489.443059a21.280133 21.280133 0 0 1-21.280133-21.280133 191.521197 191.521197 0 0 0-383.042394 0 21.280133 21.280133 0 0 1-42.560266 0 234.081463 234.081463 0 0 1 468.162926 0 21.280133 21.280133 0 0 1-21.280133 21.280133z"
+        fill="currentColor"></path>
+</svg>

src/assets/icons/svg/text.svg

@@ -1 +1,17 @@
-<svg viewBox="0 0 16 16"><g transform="translate(0 -0.078)"><rect fill="none" opacity="0.2" width="16" height="16" transform="translate(0 0.078)"/><g transform="translate(1.892 1.971)"><rect fill="none" stroke="#a9abaf" stroke-linejoin="round" width="12" height="12" rx="1" transform="translate(0.107 0.107)"/><g transform="translate(2.764 2.367)"><path fill="none" stroke="#a9abaf" stroke-linejoin="round" stroke-linecap="round" d="M16,17.192V16h6.36v1.192" transform="translate(-16 -16)"/><path fill="none" stroke="#a9abaf" stroke-linejoin="round" stroke-linecap="round" d="M22,34h1.59" transform="translate(-19.615 -26.845)"/><path fill="none" stroke="#a9abaf" stroke-linejoin="round" stroke-linecap="round" d="M24,18v6.36" transform="translate(-20.821 -17.205)"/></g></g></g></svg>
+<svg viewBox="0 0 16 16">
+    <g transform="translate(0 -0.078)">
+        <rect fill="none" opacity="0.2" width="16" height="16" transform="translate(0 0.078)" />
+        <g transform="translate(1.892 1.971)">
+            <rect fill="none" stroke="currentColor" stroke-linejoin="round" width="12" height="12" rx="1"
+                transform="translate(0.107 0.107)" />
+            <g transform="translate(2.764 2.367)">
+                <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round"
+                    d="M16,17.192V16h6.36v1.192" transform="translate(-16 -16)" />
+                <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M22,34h1.59"
+                    transform="translate(-19.615 -26.845)" />
+                <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M24,18v6.36"
+                    transform="translate(-20.821 -17.205)" />
+            </g>
+        </g>
+    </g>
+</svg>

src/modules/editor/components/CompUI/basicUI/Map/component.tsx

@@ -32,9 +32,10 @@ export const Component = defineComponent({
           position: value.addressInfo.lnglat,
         });
         map.value.add(marker.value);
-
-        const toolbar = new AMap.ToolBar({ position: "LT" }); // 缩放工具条实例化
-        map.value.addControl(toolbar);
+        if (!store.isEditMode) {
+          const toolbar = new AMap.ToolBar({ position: "LT" }); // 缩放工具条实例化
+          map.value.addControl(toolbar);
+        }
       });
     }
 

src/modules/editor/components/CompUI/formItems/MapAttr.tsx

@@ -105,7 +105,7 @@ export default defineComponent({
           geocoder.value = new AMap.Geocoder();
           autoComplete.value = new AMap.AutoComplete({ city: "全国" });
 
-          const toolbar = new AMap.ToolBar(); // 缩放工具条实例化
+          const toolbar = new AMap.ToolBar({ position: "LT" }); // 缩放工具条实例化
           map.value.addControl(toolbar);
         }
       );

src/modules/editor/components/Viewport/Toolbar/AiText.tsx → src/modules/editor/components/Viewport/Slider/SliderLeft/AiText.tsx

@@ -1,13 +1,13 @@
 import { useEditor } from "@/modules/editor";
-import { CloseOutlined } from "@ant-design/icons-vue";
-import { defineComponent, reactive } from "vue";
-import { Button, Input, message } from "ant-design-vue";
 import { css } from "@linaria/core";
+import { Button, Input } from "ant-design-vue";
 import { queenApi } from "queenjs";
+import { defineComponent, reactive } from "vue";
+
 export default defineComponent({
-  emits: ["visible"],
-  setup(props, { emit }) {
+  setup() {
     const { store, actions } = useEditor();
+
     const state = reactive({
       loading: false,
       inputValue: "",
@@ -15,6 +15,7 @@ export default defineComponent({
       boxFocus: false,
       generated: false,
     });
+
     const generateWord = () => {
       if (state.loading) {
         return;
@@ -66,16 +67,9 @@ export default defineComponent({
     };
 
     return () => (
-      <div class={[AIStyle, "w-280px p-20px bg-component"]}>
+      <div class={[AIStyle, "w-1/1 p-20px bg-component"]}>
         <div>
-          <div class={"flex justify-between items-center "}>
-            AI提示词
-            <CloseOutlined
-              onClick={() => {
-                emit("visible", false);
-              }}
-            />
-          </div>
+          <div>AI提示词</div>
           <div class={"mt-14px"}>
             <div class={["input_box pb-12px", state.boxFocus ? "focus" : ""]}>
               <Input.TextArea
@@ -146,11 +140,7 @@ export default defineComponent({
   },
 });
 const AIStyle = css`
-  border-radius: 4px;
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
-  background-color: rgba(38, 38, 38, 0.95);
   color: #fff;
-  backdrop-filter: blur(5px);
   .input_box,
   .result_text {
     position: relative;

src/modules/editor/components/Viewport/Slider/SliderLeft/Application.tsx

@@ -0,0 +1,70 @@
+import { useEditor } from "@/modules/editor";
+import { ICompKeys } from "@/modules/editor/typings";
+import { css } from "@linaria/core";
+import { useReactive } from "@queenjs/use";
+import { Tooltip } from "ant-design-vue";
+import { defineComponent } from "vue";
+import { Container, Draggable } from "vue-dndrop";
+
+export default defineComponent({
+  setup() {
+    const editor = useEditor();
+    const { compUICtrl } = editor.controls;
+
+    const state = useReactive(() => ({
+      basicComps() {
+        return ["Map"].map(
+          (key) => compUICtrl.state.components.get(key) as any
+        );
+      },
+    }));
+
+    return () => {
+      return (
+        <Container
+          class={basicStyle}
+          orientation="horizontal"
+          behaviour="copy"
+          group-name="canvas"
+          get-child-payload={(index: number) => {
+            return state.basicComps[index].compKey;
+          }}
+        >
+          {state.basicComps.map((item) => {
+            return (
+              <Draggable key={item.compKey} class="!leading-0">
+                <div
+                  class="draggable-item"
+                  onClick={() =>
+                    editor.actions.clickCompToDesign(item.compKey as ICompKeys)
+                  }
+                >
+                  <span>
+                    <img
+                      class="h-24px m-4px pointer-events-none"
+                      src={item.thumbnail}
+                    />
+                  </span>
+                  <span class="pl-10px">{item.name}</span>
+                </div>
+              </Draggable>
+            );
+          })}
+        </Container>
+      );
+    };
+  },
+});
+
+const basicStyle = css`
+  display: flex;
+  align-items: center;
+  .draggable-item {
+    border-radius: 4px;
+    margin: 0 4px;
+    cursor: pointer;
+    &:hover {
+      background-color: darken(@inf-component-bg, 3%);
+    }
+  }
+`;

src/modules/editor/components/Viewport/Slider/SliderLeft/BaseComp.tsx

@@ -13,9 +13,17 @@ export default defineComponent({
 
     const state = useReactive(() => ({
       basicComps() {
-        return ["Text", "Image", "Video", "Web3D",  "Line", "Arc", "Ellipse", "Triangle", "Rectage", "Polygon","PolygonNormal", "Curve", "Map"].map(
-          (key) => compUICtrl.state.components.get(key) as any
-        );
+        return [
+          "Web3D",
+          "Line",
+          "Arc",
+          "Ellipse",
+          "Triangle",
+          "Rectage",
+          "Polygon",
+          "PolygonNormal",
+          "Curve",
+        ].map((key) => compUICtrl.state.components.get(key) as any);
       },
     }));
 

src/modules/editor/components/Viewport/Slider/SliderLeft/Text.tsx

@@ -0,0 +1,23 @@
+import { useEditor } from "@/modules/editor";
+import { Button } from "ant-design-vue";
+import { defineUI } from "queenjs";
+
+export default defineUI({
+  setup() {
+    const editor = useEditor();
+
+    return () => {
+      return (
+        <div class="pt-20px">
+          <Button
+            block
+            type="primary"
+            onClick={() => editor.actions.clickCompToDesign("Text")}
+          >
+            添加文本框
+          </Button>
+        </div>
+      );
+    };
+  },
+});

src/modules/editor/components/Viewport/Slider/SliderLeft/index.tsx

@@ -1,33 +1,59 @@
-import { Button } from "ant-design-vue";
+import { css, cx } from "@linaria/core";
+import { Button, Tooltip } from "ant-design-vue";
 import { computed, reactive } from "vue";
 
-import { IconImage, IconShape, IconTpl, IconVideo } from "@/assets/icons";
-import { css, cx } from "@linaria/core";
+import {
+  IconAi,
+  IconApplication,
+  IconCloud,
+  IconImage,
+  IconText,
+  IconTpl,
+  IconVideo,
+} from "@/assets/icons";
 import { IconCube, IconLayers } from "@queenjs/icons";
 import { defineUI } from "queenjs";
+import { CompTree } from "../SliderRight/CompTree";
+import AiText from "./AiText";
+import Application from "./Application";
 import CustomComps from "./CustomComps";
-import Shapes from "./Shapes";
 import { Sources } from "./Sources";
 import Templates from "./Templates";
-import { CompTree } from "../SliderRight/CompTree";
+import Text from "./Text";
 
 const tabs = [
   {
-    title: "图片",
-    icon: IconImage,
+    title: "模板",
+    icon: IconTpl,
+    component: Templates,
+  },
+  {
+    title: "组合",
+    icon: IconCube,
     content: [
       {
         title: "平台",
-        component: Sources,
-        props: { sourceType: "Image", sourceFrom: "system" },
+        component: CustomComps,
+        props: { compType: "senior" },
       },
       {
         title: "我的",
-        component: Sources,
-        props: { sourceType: "Image", sourceFrom: "user" },
+        component: CustomComps,
+        props: { compType: "user" },
       },
     ],
   },
+  {
+    title: "文字",
+    icon: IconText,
+    component: Text,
+  },
+  {
+    title: "图片",
+    icon: IconImage,
+    component: Sources,
+    props: { sourceType: "Image", sourceFrom: "system" },
+  },
   // {
   //   title: "形状",
   //   icon: IconShape,
@@ -36,39 +62,34 @@ const tabs = [
   {
     title: "视频",
     icon: IconVideo,
-    content: [
-      {
-        title: "平台",
-        component: Sources,
-        props: { sourceType: "Video", sourceFrom: "system" },
-      },
-      {
-        title: "我的",
-        component: Sources,
-        props: { sourceType: "Video", sourceFrom: "user" },
-      },
-    ],
+    component: Sources,
+    props: { sourceType: "Video", sourceFrom: "system" },
   },
   {
     title: "组件",
-    icon: IconCube,
+    icon: IconApplication,
+    component: Application,
+  },
+  {
+    title: "已上传",
+    icon: IconCloud,
     content: [
       {
-        title: "平台",
-        component: CustomComps,
-        props: { compType: "senior" },
+        title: "图片",
+        component: Sources,
+        props: { sourceType: "Image", sourceFrom: "user" },
       },
       {
-        title: "我的",
-        component: CustomComps,
-        props: { compType: "user" },
+        title: "视频",
+        component: Sources,
+        props: { sourceType: "Video", sourceFrom: "user" },
       },
     ],
   },
   {
-    title: "模板",
-    icon: IconTpl,
-    component: Templates,
+    title: "AI",
+    icon: IconAi,
+    component: AiText,
   },
   {
     title: "图层",
@@ -82,7 +103,7 @@ export default defineUI({
     // @ts-ignore
     const state = reactive({
       tabIndex: 0,
-      compIndexs: [0, 0, 0, 0, 0],
+      compIndexs: [0, 0, 0, 0, 0, 0, 0],
       currentTab: computed(() => {
         return tabs[state.tabIndex];
       }),
@@ -103,7 +124,7 @@ export default defineUI({
             {tabs.map((record, index) => {
               return (
                 <>
-                  {index === tabs.length - 1 && <div class="flex-1"></div>}
+                  {index === tabs.length - 2 && <div class="flex-1"></div>}
                   <div
                     key={index}
                     class={cx(
@@ -113,8 +134,9 @@ export default defineUI({
                     )}
                     onClick={() => (state.tabIndex = index)}
                   >
-                    <record.icon class="text-24px" />
-                    <div class="text-center mt-2px">{record.title}</div>
+                    <Tooltip title={record.title} placement="right">
+                      <record.icon class="text-28px p-10px" />
+                    </Tooltip>
                   </div>
                 </>
               );

src/modules/editor/components/Viewport/Toolbar/index.tsx

@@ -1,46 +1,19 @@
 import { useEditor } from "@/modules/editor";
 import { useLauncher } from "@/modules/launcher";
-import { css, cx } from "@linaria/core";
-import { Dropdown } from "ant-design-vue";
+import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
-import { reactive } from "vue";
 import { TipIcons } from "../../TipIcons";
 import BaseComp from "../Slider/SliderLeft/BaseComp";
-import AiText from "./AiText";
 
 export default defineUI({
   setup() {
     const { actions } = useEditor();
     const launcher = useLauncher();
 
-    const state = reactive({
-      aiVisible: false,
-    });
-
     return () => (
       <div class="flex items-center justify-between px-15px py-12px">
         <div class="space-x-10px z-999 flex items-center">
           <BaseComp />
-          <Dropdown
-            overlayClassName={dropdownStyles}
-            overlay={
-              <AiText
-                onVisible={(v) => {
-                  state.aiVisible = v;
-                }}
-              />
-            }
-            destroyPopupOnHide={true}
-            placement="bottomLeft"
-            visible={state.aiVisible}
-          >
-            <TipIcons.AiText
-              class={cx(btnCls, state.aiVisible && "active")}
-              onClick={() => {
-                state.aiVisible = !state.aiVisible;
-              }}
-            />
-          </Dropdown>
         </div>
         <div class="space-x-10px z-999">
           <TipIcons.Screenshot
@@ -77,7 +50,3 @@ const bottomBtnStyles = css`
   background-color: #333;
   @apply shadow;
 `;
-
-const dropdownStyles = css`
-  /* transform: translateY(-20px); */
-`;