slider

src/assets/icons/index.ts

@@ -1,4 +1,3 @@
-
 export * from "./components/Icon3D";
 export * from "./components/IconAdd";
 export * from "./components/IconAi";

src/assets/imgs/add.svg

@@ -1 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><defs><style>.a{fill:#1f1f1f;}.b{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g transform="translate(-1489 -385)"><rect class="a" width="80" height="80" rx="4" transform="translate(1489 385)"/><g transform="translate(1514.754 410.754)"><path class="b" d="M24,16V33.666" transform="translate(-9.754 -10.587)"/><path class="b" d="M16,24H33.666" transform="translate(-10.587 -9.754)"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
+    <defs>
+        <style>
+            .a{fill:#262626;}.b{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style>
+    </defs>
+    <g transform="translate(-1489 -385)">
+        <rect class="a" width="80" height="80" rx="4" transform="translate(1489 385)" />
+        <g transform="translate(1514.754 410.754)">
+            <path class="b" d="M24,16V33.666" transform="translate(-9.754 -10.587)" />
+            <path class="b" d="M16,24H33.666" transform="translate(-10.587 -9.754)" />
+        </g>
+    </g>
+</svg>

src/assets/imgs/sliderClose.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.922" height="122.999" viewBox="0 0 15.922 122.999"><defs><style>.a{fill:#262626;}.b{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;opacity:0.7;}</style></defs><g transform="translate(-373.078 -511)"><path class="a" d="M15034.751,1997.21s-1.037,9.956,7.382,15.671,8.5,15.542,8.5,26.036v46.3s-1.732,12.7-8.5,16.881-7.382,13.138-7.382,17.974Z" transform="translate(-14661.633 -1486.21)"/><path class="b" d="M7.115,0,3.557,3.557,0,0" transform="translate(382.818 568.5) rotate(90)"/></g></svg>

src/modules/editor/components/CompUI/basicUI/Page/screen.tsx

@@ -1,55 +1,89 @@
-import { useEditor } from "@/modules/editor"
-import { Select } from "ant-design-vue"
-import { defineComponent } from "vue"
+import { useEditor } from "@/modules/editor";
+import { Select } from "ant-design-vue";
+import { defineComponent } from "vue";
 
 export default defineComponent({
-    setup(props, ctx) {
-        const editor = useEditor();
-        const ctrl = editor.controls.screenCtrl;
+  setup(props, ctx) {
+    const editor = useEditor();
+    const ctrl = editor.controls.screenCtrl;
 
-        return ()=>{
-            return (
-                <div class="px-16px">
-                    <div class="flex items-center">
-                        <span class="w-70px">屏幕类型</span>
-                        <Select value={ctrl.state.screen.useFor} onChange={(v)=>{
-                            const s = {useFor: v, pageMode: ctrl.state.screen.pageMode, pageSizeType: ctrl.state.screen.pageSizeType}
-                            ctrl.saveScreenPage();
-                            ctrl.state.setScreen(s as any);
-                            setTimeout(() => {
-                                editor.controls.editorCtrl.autoInScreen();
-                            }, 0);
-
-                        }} class = "flex-1 overflow-hidden" options={[{ label: "手机", value: "mobile" }, { label: "PC", value: "pc" }]}  />
-                    </div>
-                    <div  class="flex items-center mt-5px">
-                        <span class="w-70px">页面模式</span>
-                        <Select onChange={(v)=>{
-                            ctrl.saveScreenPage();
-                            const s = {useFor: ctrl.state.screen.useFor, pageMode:v, pageSizeType: ctrl.state.screen.pageSizeType} 
-                            if( v == "long") {
-                                s.pageSizeType = "normal";
-                            }
-                            ctrl.state.setScreen(s as any);
-                            setTimeout(() => {
-                                editor.controls.editorCtrl.autoInScreen();
-                            }, 0);
-
-                        }} value={ctrl.state.screen.pageMode} class = "flex-1 overflow-hidden" options={[{ label: "H5长页", value: "long" }, { label: "翻页", value: "short" }]}  />
-                    </div>
-                    {
-                        ctrl.state.screen.pageMode == "short" && <div  class="flex items-center mt-5px">
-                           <span class="w-70px">屏幕长度</span>
-                           <Select onChange={(v)=>{
-                               ctrl.saveScreenPage();
-                               const s = {useFor: ctrl.state.screen.useFor, pageMode:ctrl.state.screen.pageMode, pageSizeType: v}
-                               ctrl.state.setScreen(s as any);
-                           }} value={ctrl.state.screen.pageSizeType} class = "flex-1 overflow-hidden" options={[{ label: "短屏幕", value: "short" }, { label: "普通屏幕", value: "normal"},  { label: "长屏幕", value: "long"}]}  />
-                       </div>
-                    }
-                 
-                </div>
-            )
-        }
-    },
-})
+    return () => {
+      return (
+        <div class="px-16px">
+          <div class="flex items-center my-15px">
+            <span class="w-70px text-12px">屏幕类型</span>
+            <Select
+              value={ctrl.state.screen.useFor}
+              onChange={(v) => {
+                const s = {
+                  useFor: v,
+                  pageMode: ctrl.state.screen.pageMode,
+                  pageSizeType: ctrl.state.screen.pageSizeType,
+                };
+                ctrl.saveScreenPage();
+                ctrl.state.setScreen(s as any);
+                setTimeout(() => {
+                  editor.controls.editorCtrl.autoInScreen();
+                }, 0);
+              }}
+              class="flex-1 overflow-hidden"
+              options={[
+                { label: "手机", value: "mobile" },
+                { label: "PC", value: "pc" },
+              ]}
+            />
+          </div>
+          <div class="flex items-center my-15px">
+            <span class="w-70px text-12px">页面模式</span>
+            <Select
+              onChange={(v) => {
+                ctrl.saveScreenPage();
+                const s = {
+                  useFor: ctrl.state.screen.useFor,
+                  pageMode: v,
+                  pageSizeType: ctrl.state.screen.pageSizeType,
+                };
+                if (v == "long") {
+                  s.pageSizeType = "normal";
+                }
+                ctrl.state.setScreen(s as any);
+                setTimeout(() => {
+                  editor.controls.editorCtrl.autoInScreen();
+                }, 0);
+              }}
+              value={ctrl.state.screen.pageMode}
+              class="flex-1 overflow-hidden"
+              options={[
+                { label: "H5长页", value: "long" },
+                { label: "翻页", value: "short" },
+              ]}
+            />
+          </div>
+          {ctrl.state.screen.pageMode == "short" && (
+            <div class="flex items-center mt-5px">
+              <span class="w-70px">屏幕长度</span>
+              <Select
+                onChange={(v) => {
+                  ctrl.saveScreenPage();
+                  const s = {
+                    useFor: ctrl.state.screen.useFor,
+                    pageMode: ctrl.state.screen.pageMode,
+                    pageSizeType: v,
+                  };
+                  ctrl.state.setScreen(s as any);
+                }}
+                value={ctrl.state.screen.pageSizeType}
+                class="flex-1 overflow-hidden"
+                options={[
+                  { label: "短屏幕", value: "short" },
+                  { label: "普通屏幕", value: "normal" },
+                  { label: "长屏幕", value: "long" },
+                ]}
+              />
+            </div>
+          )}
+        </div>
+      );
+    };
+  },
+});

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

@@ -1,7 +1,7 @@
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
-import { onUnmounted, reactive, ref , nextTick} from "vue";
+import { onUnmounted, reactive, ref, nextTick } from "vue";
 import { Container, Draggable } from "vue-dndrop";
 import { useEditor } from "../../..";
 import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
@@ -92,9 +92,9 @@ export default defineUI({
                           actions.selectObjs([]);
                           actions.pickComp(item, false);
 
-                          nextTick(()=>{
+                          nextTick(() => {
                             controls.editorCtrl.autoInScreen();
-                          })
+                          });
                         }}
                       >
                         {store.streamCardIds.length > 1 && (
@@ -330,7 +330,7 @@ const editLayerStyle = css`
 const cardList = css`
   width: 120px;
   height: 100%;
-  background: #262626;
+  background: #1f1f1f;
   overflow-x: hidden;
   pointer-events: auto;
   display: flex;

src/modules/editor/components/Viewport/Slider/SliderLeft/ListFilter/CateFilter.tsx

@@ -256,7 +256,10 @@ const RootStyle = css`
   } */
 `;
 const BtnStyle = css`
-  padding-left: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
   height: 32px;
   line-height: 30px;
   cursor: pointer;

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

@@ -67,7 +67,7 @@ export default defineComponent({
       if (options.length == 0) return null;
       return (
         <div class={rootStyle}>
-          {options.slice(0, state.limitLen).map((d: any, i: number) => (
+          {/* {options.slice(0, state.limitLen).map((d: any, i: number) => (
             <div class={"cate_item flex-1"}>
               <CateSelect
                 key={i}
@@ -77,16 +77,15 @@ export default defineComponent({
                 onChange={(v) => cateChange(d.id, v)}
               />
             </div>
-          ))}
-          {options.length > state.limitLen && (
-            <div class={"ml-10px w-65px"}>
-              <CateFilter
-                options={options}
-                value={state.values}
-                onChange={filterChange}
-              />
-            </div>
-          )}
+          ))} */}
+
+          <div class={"flex-1"}>
+            <CateFilter
+              options={options}
+              value={state.values}
+              onChange={filterChange}
+            />
+          </div>
         </div>
       );
     };

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

@@ -1,4 +1,4 @@
-import { cx } from "@linaria/core";
+import { css, cx } from "@linaria/core";
 import { Tooltip } from "ant-design-vue";
 import { defineComponent, reactive } from "vue";
 import { number, object } from "vue-types";
@@ -124,7 +124,7 @@ export default defineUI({
       const { list, tabIndex } = state;
 
       return (
-        <div class="h-full flex">
+        <div class="h-full flex  relative z-2">
           <PanelTabs
             tabIndex={tabIndex}
             onChange={(index) => {
@@ -134,18 +134,35 @@ export default defineUI({
               state.tabIndex = index;
             }}
           />
-          {tabs.map((tab, index) => {
-            if (!list.includes(index)) return null;
-            return (
-              <PanelContent
-                key={index}
-                currentTab={tab}
-                currentIndex={tabIndex}
-                contentIndex={index}
-                class={tabIndex !== index && "hidden"}
-              />
-            );
-          })}
+          <div
+            class={[
+              "flex flex-1 relative transition-all w-280px",
+              tabIndex != -1 ? "max-w-280px" : "max-w-0",
+            ]}
+          >
+            {tabs.map((tab, index) => {
+              if (!list.includes(index)) return null;
+              return (
+                <PanelContent
+                  key={index}
+                  currentTab={tab}
+                  currentIndex={tabIndex}
+                  contentIndex={index}
+                  class={tabIndex !== index && "hidden"}
+                />
+              );
+            })}
+            {tabIndex != -1 && (
+              <div
+                class={SliderClose}
+                onClick={() => {
+                  state.tabIndex = -1;
+                }}
+              >
+                <img src={require("@/assets/imgs/sliderClose.svg")} />
+              </div>
+            )}
+          </div>
         </div>
       );
     };
@@ -205,7 +222,7 @@ const PanelContent = defineComponent({
 
       if (!currentTab.content) return null;
       return (
-        <div class="mt-15px mx-5px flex items-center justify-around space-x-1">
+        <div class="mt-15px px-10px grid gap-10px grid-cols-3">
           {currentTab.content?.map((item: any, index: number) => (
             <span
               class={cx(
@@ -245,7 +262,7 @@ const PanelContent = defineComponent({
                 currentIndex={currentIndex}
                 contentIndex={contentIndex}
                 class={cx(
-                  "flex-1 h-1/1 px-16px !my-10px overflow-x-hidden overflow-y-auto scrollbar",
+                  "flex-1 h-1/1 px-10px !my-10px overflow-x-hidden overflow-y-auto scrollbar",
                   currCompIndex !== index && "hidden"
                 )}
                 {...currComp.props}
@@ -266,3 +283,14 @@ const PanelContent = defineComponent({
     };
   },
 });
+const SliderClose = css`
+  position: absolute;
+  right: -16px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  img {
+    width: 16px;
+    object-fit: contain;
+  }
+`;

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

@@ -19,7 +19,7 @@ export default defineUI({
       <div class="flex flex-col h-1/1">
         <slots.Header class="px-16px py-10px bg-component border-bottom !border-2px" />
         <div class="flex flex-1 h-0">
-          <slots.SliderLeft class="w-370px bg-component border-right !border-2px" />
+          <slots.SliderLeft class="bg-component border-right !border-2px" />
           <div class="flex-1 relative flex flex-col overflow-hidden">
             <slots.Toolbar />
             <slots.Content />

src/modules/resource/components/SouceModal.tsx

@@ -6,6 +6,7 @@ import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
 import { any, bool, string } from "vue-types";
 import { useResource } from "..";
 import { SelectOneImage } from "@/pages/website/Material2/modal";
+import Thumbnail from "@/components/Thumbnail";
 export default defineComponent({
   props: {
     item: any(),
@@ -124,11 +125,10 @@ export default defineComponent({
             <Form name="basic">
               <Form.Item name="thumbnail" {...validateInfos.thumbnail}>
                 <div class={"h-180px bg-light-50"} onClick={changeThumbnail}>
-                  <Image
-                    class="w-1/1 h-1/1 !object-contain"
+                  <Thumbnail
                     src={thumbnail}
-                    style={{ aspectRatio: 1 }}
-                    size={240}
+                    class="h-1/1 w-1/1"
+                    objectContain={props.sourceType == "image" ? true : false}
                   />
                 </div>
               </Form.Item>