work

src/components/AssetsList.tsx

@@ -1,20 +1,39 @@
 import { List } from "@queenjs/ui";
 import { Empty, Pagination, Spin } from "ant-design-vue";
 import { defineUI } from "queenjs";
-import { any, number, string } from "vue-types";
-
+import { onUnmounted, reactive } from "vue";
+import { any, string } from "vue-types";
+import { responsiveObserve } from "./responsiveObserve";
 export default defineUI({
   props: {
-    columns: number().def(5),
+    columns: any().def(5),
     gap: string().def("15px"),
     item: any().isRequired,
     control: any().isRequired,
   },
   setup(props) {
+    // const state = reactive({
+    //   screen: "",
+    // });
+    // const mediaQuery = new responsiveObserve();
+    // mediaQuery.register((e: any) => {
+    //   console.log(e);
+    //   state.screen = e;
+    // });
+    // const colStyle = (columns: any) => {
+    //   const screen = state.screen;
+    //   const columnCount = columns[screen] ? columns[screen] : columns.column;
+    //   if (columnCount) {
+    //     return columnCount;
+    //   }
+    //   return columns || 5;
+    // };
+    // onUnmounted(() => {
+    //   mediaQuery.unregister();
+    // });
     return () => {
       const { control, columns, gap } = props;
       const loading = control.state.loading;
-
       return (
         <div>
           {loading && (

src/components/responsiveObserve.ts

@@ -0,0 +1,43 @@
+const responsiveMap: { [key: string]: string } = {
+  xs: "(max-width: 575px)",
+  sm: "(min-width: 576px)",
+  md: "(min-width: 768px)",
+  lg: "(min-width: 992px)",
+  xl: "(min-width: 1200px)",
+  xxl: "(min-width: 1600px)",
+  xxxl: "(min-width: 2000px)",
+};
+
+export class responsiveObserve {
+  matchHandlers = {} as { [key: string]: any };
+  unregister() {
+    Object.keys(responsiveMap).forEach((screen) => {
+      const matchMediaQuery = responsiveMap[screen];
+      const handler = this.matchHandlers[matchMediaQuery];
+      if (handler) {
+        handler.mql.removeEventListener("change", handler.listener);
+      }
+    });
+    this.matchHandlers = {};
+  }
+  register(cb: any) {
+    Object.keys(responsiveMap).forEach((screen) => {
+      const matchMediaQuery = responsiveMap[screen];
+      const listener = (e: MediaQueryListEvent) => {
+        console.log(e);
+        if (e.matches) {
+          cb && cb(screen);
+        }
+      };
+      const mql = window.matchMedia(matchMediaQuery);
+      if (mql.matches) {
+        cb && cb(screen);
+      }
+      this.matchHandlers[matchMediaQuery] = {
+        mql: mql,
+        listener: listener,
+      };
+      mql.addEventListener("change", listener);
+    });
+  }
+}

src/pages/website/MyComps/components/Header.tsx

@@ -5,7 +5,7 @@ export default defineUI({
   setup(props, { emit }) {
     return () => (
       <div class="flex items-center justify-between">
-        <h3 class="text-22px">我的组件</h3>
+        <h3 class="text-22px">作品集</h3>
         {/* <Button type="primary" onClick={()=>emit("add")}>
           新增+
         </Button> */}

src/pages/website/MyComps/components/index.tsx

@@ -26,7 +26,7 @@ export default defineUI({
           <slots.List
             gap="25px"
             class="my-30px"
-            columns={4}
+            columns={5}
             control={props.Controller.ListCtrl}
             item={(record: any) => (
               <CompItem

src/pages/website/Promotion/components/Header.tsx

@@ -8,7 +8,7 @@ export default defineComponent({
 
     return () => (
       <div class="flex items-center justify-between">
-        <h3 class="text-22px">我的推广</h3>
+        <h3 class="text-22px">我的作品</h3>
         <Button type="primary" onClick={resource.actions.createPromotion}>
           新增+
         </Button>

src/pages/website/Promotion2/components/Header.tsx

@@ -8,7 +8,7 @@ export default defineUI({
     
     return () => (
       <div class="flex items-center justify-between">
-        <h3 class="text-22px">我的推广</h3>
+        <h3 class="text-22px">我的作品</h3>
         <Button type="primary" onClick={()=>emit("add")}>
           新增+
         </Button>

src/pages/website/components/layout/LeftContent.tsx

@@ -30,13 +30,13 @@ export default defineUI({
     const menuOptions = [
       {
         link: "/workbench/promotion",
-        label: "我的推广",
+        label: "我的作品",
         icon: IconDashboard,
         // suffix: "7",
       },
       {
         link: "/workbench/myComps",
-        label: "我的组件",
+        label: "作品集",
         icon: IconCube,
         // suffix: "32",
       },