UI

src/modules/resource/components/MaterialItem.tsx

@@ -1,34 +1,52 @@
-import { css } from "@linaria/core";
+import { css, cx } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
 import { Image, View } from "@queenjs/ui";
 import { defineComponent } from "vue";
-import { any } from "vue-types";
+import { any, string } from "vue-types";
 
 export default defineComponent({
   props: {
     record: any(),
+    use: string<"show" | "select">().def("show"),
   },
   emits: ["delete", "select", "download"],
   setup(props, { emit }) {
     return () => {
-      const { record } = props;
+      const { record, use } = props;
       // console.log("record: ", record);
+
       return (
-        <div class={itemStyles}>
-          <div class="waiting flex items-center justify-center text-white">
-            生成中…
-          </div>
-          <IconDelete class="icon_del" onClick={() => emit("delete")} />
-          <div class="item_actions flex">
-            <div class="btn_circle" onClick={() => emit("download")}>
-              下载
-            </div>
-            <div class="btn_circle" onClick={() => emit("select")}>
-              使用
+        <div class={cx(itemStyles, "relative")}>
+          {use == "show" && (
+            <div class="waiting absolute inset-0 z-2 flex items-center justify-center text-white hidden">
+              生成中…
             </div>
+          )}
+          <div class="absolute inset-0 flex items-center justify-center z-2 opacity-0 hover:opacity-100 transition-all  text-white">
+            {use == "show" && (
+              <IconDelete
+                class="icon_del absolute right-5px top-5px p-3px rounded-2px text-14px cursor-pointer"
+                onClick={() => emit("delete")}
+              />
+            )}
+            {use == "show" ? (
+              <div
+                class="btn_circle rounded-1/2 text-center w-56px leading-56px cursor-pointer"
+                onClick={() => emit("download")}
+              >
+                下载
+              </div>
+            ) : (
+              <div
+                class="btn_circle  rounded-1/2 text-center w-56px leading-56px cursor-pointer"
+                onClick={() => emit("select")}
+              >
+                使用
+              </div>
+            )}
           </div>
           <View ratio={1.4} class="overflow-hidden">
-            <Image class="h-1/1 w-1/1" src="" />
+            <Image class="h-1/1 w-1/1" src={record?.thumbnail?.url} />
           </View>
         </div>
       );
@@ -37,38 +55,7 @@ export default defineComponent({
 });
 
 const itemStyles = css`
-  position: relative;
-  z-index: 1;
-  &:hover {
-    .icon_del,
-    .btn_circle {
-      opacity: 1;
-    }
-  }
-  .icon_del,
-  .btn_circle {
-    opacity: 0;
-    transition: all 0.2s ease;
-  }
-
-  .item_actions,
-  .icon_del,
-  .waiting {
-    position: absolute;
-    z-index: 2;
-    color: #fff;
-  }
-  .item_actions {
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
   .btn_circle {
-    border-radius: 50%;
-    line-height: 56px;
-    width: 56px;
-    text-align: center;
-    cursor: pointer;
     background-color: rgba(0, 0, 0, 0.7);
     &:hover {
       background-color: rgba(0, 0, 0, 0.8);
@@ -78,23 +65,12 @@ const itemStyles = css`
     }
   }
   .icon_del {
-    right: 5px;
-    top: 5px;
-    border-radius: 2px;
-    padding: 3px;
-    font-size: 14px;
-    cursor: pointer;
     background-color: rgba(0, 0, 0, 0.5);
     &:hover {
       background-color: rgba(0, 0, 0, 0.6);
     }
   }
   .waiting {
-    display: none;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
     background-color: rgba(0, 0, 0, 0.2);
   }
 `;

src/modules/resource/components/PromotionItem.tsx

@@ -0,0 +1,74 @@
+import { css, cx } from "@linaria/core";
+import { IconMore } from "@queenjs/icons";
+import { Image, View } from "@queenjs/ui";
+import { Divider, Dropdown, Menu, Tag } from "ant-design-vue";
+import { defineComponent } from "vue";
+import { any } from "vue-types";
+
+export default defineComponent({
+  props: {
+    record: any(),
+  },
+  emits: [],
+  setup(props) {
+    return () => {
+      const { record } = props;
+
+      return (
+        <div class={cx(itemStyles, "relative")}>
+          <View ratio={1.4} class="overflow-hidden relative">
+            <Image class="h-1/1 w-1/1" src={record?.thumbnail?.url} />
+            <Tag
+              color="#E88B00"
+              // color="rgba(0, 0, 0, 0.4)"
+              class="absolute top-0 left-0 z-1 !rounded-none"
+            >
+              未发布
+            </Tag>
+            <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
+              <div class="text-white icon_action w-60px leading-60px orange cursor-pointer rounded-1/2 text-center">
+                编辑
+              </div>
+              <div class="text-white icon_action w-60px leading-60px ml-10px cursor-pointer rounded-1/2 text-center">
+                预览
+              </div>
+            </div>
+          </View>
+          <div class="item_footer rounded-b-4px flex items-center justify-between p-15px">
+            <div>
+              <div class="text-white text-bold">皮革2</div>
+              <div class="flex items-center text-opacity-60 text-white text-12px mt-5px">
+                2021.09.09发布 <Divider type="vertical"></Divider> 23次浏览
+              </div>
+            </div>
+            <Dropdown
+              placement="bottom"
+              overlay={
+                <Menu class="w-90px">
+                  <Menu.Item>复制</Menu.Item>
+                  <Menu.Item>分享</Menu.Item>
+                  <Menu.Item>重命名</Menu.Item>
+                  <Menu.Item>删除</Menu.Item>
+                </Menu>
+              }
+            >
+              <IconMore class="text-26px cursor-pointer" />
+            </Dropdown>
+          </div>
+        </div>
+      );
+    };
+  },
+});
+
+const itemStyles = css`
+  .item_footer {
+    background: #414141;
+  }
+  .icon_action {
+    background-color: rgba(0, 0, 0, 0.5);
+    &.orange {
+      background-color: rgba(232, 139, 0, 0.5);
+    }
+  }
+`;

src/modules/resource/components/index.ts

@@ -1,5 +1,7 @@
 import MaterialItem from "./MaterialItem";
+import PromotionItem from "./PromotionItem";
 
 export const compoents = {
   MaterialItem,
+  PromotionItem,
 };

src/pages/website/Design/index.tsx

@@ -1,5 +1,28 @@
+import { useResource } from "@/modules/resource";
+import { Button } from "ant-design-vue";
 import { defineComponent } from "vue";
+import AssetsList from "../components/AssetsList";
 
-export default defineComponent(() => {
-  return () => <div>我的推广</div>;
+export default defineComponent({
+  setup() {
+    const resource = useResource();
+
+    return () => {
+      return (
+        <div>
+          <div class="flex items-center justify-between">
+            <h3 class="text-22px">我的推广</h3>
+            <Button type="primary">新增+</Button>
+          </div>
+          <AssetsList
+            columns={4}
+            gap="25px"
+            class="my-30px"
+            control={resource.controls.matTempListCtrl}
+            item={() => <resource.components.PromotionItem />}
+          />
+        </div>
+      );
+    };
+  },
 });

src/pages/website/EditMaterial/index.tsx

@@ -0,0 +1,5 @@
+import { defineComponent } from "vue";
+
+export default defineComponent(() => {
+  return () => <div>Settings</div>;
+});

src/pages/website/Material/components/MaterialTemplateModal.tsx

@@ -27,8 +27,12 @@ export default defineComponent({
             control={resource.controls.matTempListCtrl}
             item={(record: any) => (
               <resource.components.MaterialItem
+                use="select"
                 record={record}
-                onSelect={() => resource.actions.selectMaterial(record)}
+                onSelect={() => {
+                  modal.cancel();
+                  resource.actions.selectMaterial(record);
+                }}
               />
             )}
           />

src/pages/website/Material/index.tsx

@@ -33,9 +33,7 @@ export default defineComponent({
     return () => {
       return (
         <div class={rootStyles}>
-          <div>
-            <h3 class="text-22px">我的素材</h3>
-          </div>
+          <h3 class="text-22px">我的素材</h3>
           <div class="flex items-center justify-between mt-20px">
             <div class="filter">
               <Space size={60}>
@@ -80,6 +78,7 @@ export default defineComponent({
             </div>
           </div>
           <AssetsList
+            columns={6}
             class="mt-30px"
             control={resource.controls.materialListCtrl}
             item={(record: any) => (

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

@@ -4,7 +4,7 @@ import {
   IconCamera,
   IconDashboard,
   IconDownload,
-  IconSettings
+  IconSettings,
 } from "@queenjs/icons";
 import { Avatar, Divider } from "ant-design-vue";
 import { defineComponent } from "vue";
@@ -106,8 +106,9 @@ const rootStyles = css`
     color: #fff;
   }
   .router-link-exact-active {
-    background-color: #fff;
     display: block;
+    border-radius: 4px;
+    background-color: #fff;
     > div {
       color: @inf-text-color;
     }

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

@@ -1,3 +1,4 @@
+import { css, cx } from "@linaria/core";
 import { Layout } from "ant-design-vue";
 import { defineComponent } from "vue";
 import LeftContent from "./LeftContent";
@@ -6,18 +7,15 @@ export default defineComponent({
   setup() {
     return () => {
       return (
-        <Layout class="!h-100vh flex" style="background-color: #f7f7f7">
+        <Layout class={cx("!h-100vh flex", rootStyles)}>
           <Layout.Sider
-            class="!bg-transparent overflow-y-auto"
+            class="scrollbar !bg-transparent overflow-y-auto"
             theme="light"
             width="380px"
           >
             <LeftContent />
           </Layout.Sider>
-          <Layout.Content
-            style="background-color: #fff"
-            class="flex-1 my-20px mr-25px rounded-20px p-50px overflow-y-auto"
-          >
+          <Layout.Content class="container scrollbar flex-1 my-20px mr-25px rounded-20px p-50px overflow-y-auto">
             <router-view></router-view>
           </Layout.Content>
         </Layout>
@@ -25,3 +23,10 @@ export default defineComponent({
     };
   },
 });
+
+const rootStyles = css`
+  background-color: @inf-layout-bg;
+  .container {
+    background-color: @inf-modal-bg;
+  }
+`;

src/pages/website/router.ts

@@ -10,6 +10,14 @@ const routes: Array<RouteRecordRaw> = [
     },
     component: () => import("./Home"),
   },
+  {
+    path: "/editor/:id",
+    name: "editor",
+    meta: {
+      needAuth: true,
+    },
+    component: () => import("./EditMaterial"),
+  },
   {
     path: "/workbench",
     name: "workbench",

src/styles/theme.less

@@ -12,10 +12,11 @@
 @inf-text-sub-color: #999;
 @inf-text-less-color: #666;
 
-@inf-mask-bg: fade(#000000, 50%);
-
 @inf-border-color: #1f1f1f;
 
+@inf-mask-bg: fade(#000000, 50%);
+@inf-modal-bg: #1f1f1f;
+
 @inf-layout-bg: #262626;
 @inf-component-bg: #262626;
 

windi.config.js

@@ -8,6 +8,7 @@ export default defineConfig({
       gray: "#999",
       white: "#fff",
       danger: "#e3342f",
+      orange: "#e88b00",
     },
   },
 });