update

package.json

@@ -17,6 +17,10 @@
   "dependencies": {
     "@linaria/core": "^4.1.1",
     "@queenjs-modules/auth": "^0.0.18",
+    "@queenjs-modules/queditor": "^0.0.11",
+    "@queenjs-modules/queentree": "^0.0.10",
+    "@queenjs-modules/queentree-explorer": "^0.0.5",
+    "@queenjs-modules/queentree-explorer-viewer": "^0.0.3",
     "@queenjs/components": "^0.0.5",
     "@queenjs/controllers": "^0.0.6",
     "@queenjs/icons": "^0.0.20",
@@ -32,6 +36,7 @@
     "ant-design-vue": "^3.2.12",
     "co": "^4.6.0",
     "core-js": "^3.8.3",
+    "dayjs": "^1.11.7",
     "file-saver": "^2.0.5",
     "hotkeys-js": "^3.10.2",
     "jszip": "^3.10.1",

src/dict/apis.ts

@@ -1,4 +1,5 @@
-const baseURL = "https://www.3dqueen.cloud";
+const baseURL = "https://www.infish.cn";
+const localURL = "http://192.168.110.180:8889";
 
 const baseVersion = "/cloud/v1";
 const treeVersion = "/tree/v1";
@@ -6,6 +7,7 @@ const treeVersion = "/tree/v1";
 const Dict_Apis = {
   auth: `${baseURL}${baseVersion}/usercenter`,
   queentree: `${baseURL}${treeVersion}/assetcenter`,
+  promotion: `${localURL}/promotion`,
 };
 
 export { Dict_Apis };

src/modules/resource/actions/index.ts

@@ -1,3 +1,4 @@
 import { materialActions } from "./material";
+import { promotionAction } from "./promotion";
 
-export const actions = [materialActions];
+export const actions = [materialActions, promotionAction];

src/modules/resource/actions/material.ts

@@ -2,21 +2,47 @@ import { queenApi } from "queenjs";
 import { ResourceModule } from "..";
 
 export const materialActions = ResourceModule.action({
-  uploadMaterial() {
-    //
+  async uploadMaterial() {
+    const [blob] = await queenApi.selectFile({ accept: "image/*, video/*" });
+    const res = await this.controls.uploader.uploadFile(blob, "source");
+
+    const souceObj = {
+      file: res,
+      fileType: blob.type.split("/")[0],
+      from: "upload",
+    };
+    await this.https.createResource(souceObj);
+    this.store.setSourceType(souceObj.fileType);
+    this.controls.materialListCtrl.state.query = {
+      fileType: this.store.type,
+    };
+    this.controls.materialListCtrl.loadPage(1);
   },
+
   async deleteMaterial(record) {
     const res = await queenApi.showConfirm({
-      content: `删除后不可恢复，是否要删除:${record.name}`,
+      content: `删除后不可恢复，是否要删除此素材？`,
       type: "danger",
     });
     if (!res) return;
-    console.log("record: ", record);
+    await this.https.deleteResource(record._id);
+    this.controls.materialListCtrl.fresh();
   },
+
   downloadMaterial(record) {
-    console.log("record: ", record);
+    window.open(record.file.url);
   },
-  selectMaterial(record) {
-    console.log("record: ", record);
+
+  async selectMaterial(record) {
+    const url = `${location.origin}/index.html#/editor/${record._id}`;
+    location.href = url;
+  },
+
+  async queryTplsDetail(id) {
+    const res = await this.https.queryTplsDetail(id);
+    this.store.setSourceDetail(res.result);
+  },
+  async submitRender() {
+    //
   },
 });

src/modules/resource/actions/promotion.ts

@@ -0,0 +1,34 @@
+import { queenApi } from "queenjs";
+import { ResourceModule } from "..";
+
+export const promotionAction = ResourceModule.action({
+  async renamePromotion(record: any) {
+    const title = await queenApi.showInput({
+      title: "请输入标题",
+      defaultValue: record.title,
+    });
+    if (!title) return;
+    await this.https.updatePromotion({ _id: record._id, title });
+    record.title = title;
+  },
+
+  async deletePromotion(record: any) {
+    const res = await queenApi.showConfirm({
+      content: `删除后无法恢复，确定要删除：${record.title}？`,
+      type: "danger",
+    });
+    if (!res) return;
+    await this.https.deletePromotion(record._id);
+    this.controls.promotionListCtrl.fresh();
+  },
+
+  async createPromotion() {
+    const title = await queenApi.showInput({
+      title: "请输入标题",
+    });
+    if (!title) return;
+    const res = await this.https.createPromotion({ title });
+    const url = `${location.origin}/editor.html#/?id=${res.result}`;
+    location.href = url;
+  },
+});

src/modules/resource/components/MaterialItem.tsx

@@ -1,53 +1,78 @@
 import { css, cx } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
 import { Image, View } from "@queenjs/ui";
+import { Checkbox } from "ant-design-vue";
 import { defineComponent } from "vue";
-import { any, string } from "vue-types";
+import { any, bool, string } from "vue-types";
 
 export default defineComponent({
   props: {
+    active: bool().def(false),
     record: any(),
-    use: string<"show" | "select">().def("show"),
+    use: string<"show" | "select">(),
   },
   emits: ["delete", "select", "download"],
   setup(props, { emit }) {
     return () => {
-      const { record, use } = props;
-      // console.log("record: ", record);
+      const { active, record, use } = props;
+      // console.error("record: ", record);
 
       return (
-        <div class={cx(itemStyles, "relative")}>
+        <div class={cx(itemStyles, "relative", active && "active")}>
+          {active && (
+            <Checkbox
+              checked
+              class="!-mt-0.2em absolute top-0 left-0 text-20px text-red-200 z-3"
+            />
+          )}
           {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">
+          <div
+            class="absolute inset-0 flex items-center justify-center z-2 opacity-0 hover:opacity-100 transition-all text-white"
+            onClick={() => emit("select")}
+          >
             {use == "show" && (
               <IconDelete
                 class="icon_del absolute right-5px top-5px p-3px rounded-2px text-14px cursor-pointer"
                 onClick={() => emit("delete")}
               />
             )}
-            {use == "show" ? (
+            {use == "show" && (
               <div
                 class="btn_circle rounded-1/2 text-center w-56px leading-56px cursor-pointer"
                 onClick={() => emit("download")}
               >
                 下载
               </div>
-            ) : (
+            )}
+            {use == "select" && (
               <div
                 class="btn_circle  rounded-1/2 text-center w-56px leading-56px cursor-pointer"
-                onClick={() => emit("select")}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  emit("select");
+                }}
               >
                 使用
               </div>
             )}
           </div>
           <View ratio={1.4} class="overflow-hidden">
-            <Image class="h-1/1 w-1/1" src={record?.thumbnail?.url} />
+            {record.fileType == "video" ? (
+              <video src={record.file?.url} class="h-1/1 w-1/1" />
+            ) : (
+              <Image
+                class="h-1/1 w-1/1"
+                src={
+                  record?.thumbnail || record?.thumbnailUrl || record.file?.url
+                }
+              />
+            )}
           </View>
+          {/* <div class="py-8px px-10px bg-dark-900">{record.name}</div> */}
         </div>
       );
     };
@@ -55,6 +80,11 @@ export default defineComponent({
 });
 
 const itemStyles = css`
+  border: 1px solid transparent;
+  &.active {
+    border-color: @inf-primary-color;
+  }
+
   .btn_circle {
     background-color: rgba(0, 0, 0, 0.7);
     &:hover {

src/modules/resource/components/PromotionItem.tsx

@@ -2,8 +2,10 @@ 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 dayjs from "dayjs";
 import { defineComponent } from "vue";
 import { any } from "vue-types";
+import { useResource } from "..";
 
 export default defineComponent({
   props: {
@@ -11,6 +13,13 @@ export default defineComponent({
   },
   emits: [],
   setup(props) {
+    const resource = useResource();
+
+    const goEdit = () => {
+      const url = `${location.origin}/editor.html#/?id=${props.record._id}`;
+      location.href = url;
+    };
+
     return () => {
       const { record } = props;
 
@@ -26,7 +35,10 @@ export default defineComponent({
               未发布
             </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
+                class="text-white icon_action w-60px leading-60px orange cursor-pointer rounded-1/2 text-center"
+                onClick={goEdit}
+              >
                 编辑
               </div>
               <div class="text-white icon_action w-60px leading-60px ml-10px cursor-pointer rounded-1/2 text-center">
@@ -36,9 +48,11 @@ export default defineComponent({
           </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="text-white text-bold">{record.title}</div>
               <div class="flex items-center text-opacity-60 text-white text-12px mt-5px">
-                2021.09.09发布 <Divider type="vertical"></Divider> 23次浏览
+                {dayjs(record.updateTime).format("YYYY.MM.DD")} 发布{" "}
+                <Divider type="vertical"></Divider>
+                23次浏览
               </div>
             </div>
             <Dropdown
@@ -47,12 +61,24 @@ export default defineComponent({
                 <Menu class="w-90px">
                   <Menu.Item>复制</Menu.Item>
                   <Menu.Item>分享</Menu.Item>
-                  <Menu.Item>重命名</Menu.Item>
-                  <Menu.Item>删除</Menu.Item>
+                  <Menu.Item>
+                    <div
+                      onClick={() => resource.actions.renamePromotion(record)}
+                    >
+                      重命名
+                    </div>
+                  </Menu.Item>
+                  <Menu.Item>
+                    <div
+                      onClick={() => resource.actions.deletePromotion(record)}
+                    >
+                      删除
+                    </div>
+                  </Menu.Item>
                 </Menu>
               }
             >
-              <IconMore class="text-26px cursor-pointer" />
+              <IconMore class="text-22px cursor-pointer" />
             </Dropdown>
           </div>
         </div>

src/modules/resource/http.ts

@@ -0,0 +1,32 @@
+import { ResourceModule } from ".";
+
+export const http = ResourceModule.http({
+  // resource
+  deleteResource(id: string) {
+    return this.request(`/source/delete/${id}`, { method: "POST" });
+  },
+  createResource(data: any) {
+    return this.request("/source/create", { method: "POST", data });
+  },
+  updateResouce(data: any) {
+    return this.request("/source/update", { method: "POST", data });
+  },
+
+  //   templates
+  queryTplsDetail(id: string) {
+    return this.request(`/tpls/detail/${id}`, { method: "GET" });
+  },
+
+  //   promotion
+  createPromotion(data: any) {
+    return this.request("/h5/create", { method: "POST", data });
+  },
+
+  updatePromotion(data: any) {
+    return this.request("/h5/update", { method: "POST", data });
+  },
+
+  deletePromotion(id: string) {
+    return this.request(`/h5/delete/${id}`, { method: "POST" });
+  },
+});

src/modules/resource/index.ts

@@ -1,22 +1,44 @@
-import { PageListController } from "@queenjs/controllers";
+import { Dict_Apis } from "@/dict";
+import { PageListController, UploadController } from "@queenjs/controllers";
 import { ModuleRoot } from "queenjs";
 import { actions } from "./actions";
 import { compoents } from "./components";
+import { http } from "./http";
 import { store } from "./store";
 
 export class ResourceModule extends ModuleRoot {
+  config = this.setConfig({
+    httpConfig: {
+      baseURL: Dict_Apis.promotion,
+    },
+  });
+
   actions = this.createActions(actions);
-  store = this.createStore([store]);
   components = this.useComponents(compoents);
+  store = this.createStore([store]);
+  https = this.createHttps(http);
 
   controls = {
+    uploader: new UploadController({
+      httpConfig: {
+        baseURL: "https://www.infish.cn/tree/v1/assetcenter",
+      },
+      // httpConfig: () => this.config.httpConfig,
+      dir: "queentree",
+    }),
+    promotionListCtrl: new PageListController(this.config?.httpConfig),
     materialListCtrl: new PageListController(this.config?.httpConfig),
     matTempListCtrl: new PageListController(this.config?.httpConfig),
+    renderTaskListCtrl: new PageListController(this.config?.httpConfig),
   };
 
   onReady() {
-    this.controls.materialListCtrl.setCrudPrefix("/");
-    this.controls.matTempListCtrl.setCrudPrefix("/");
+    this.controls.promotionListCtrl.setCrudPrefix("/h5");
+    this.controls.promotionListCtrl.state.size = 12;
+    this.controls.materialListCtrl.setCrudPrefix("/source");
+    this.controls.materialListCtrl.state.size = 24;
+    this.controls.matTempListCtrl.setCrudPrefix("/tpls");
+    this.controls.renderTaskListCtrl.setCrudPrefix("/tpls");
   }
 }
 

src/modules/resource/store.ts

@@ -2,7 +2,17 @@ import { ResourceModule } from ".";
 
 export const store = ResourceModule.store({
   state: () => ({
-    //
+    type: "video",
+    sourceDetail: {
+      webEditor: { pack: {} },
+    } as any,
   }),
-  actions: {},
+  actions: {
+    setSourceType(v: string) {
+      this.store.type = v;
+    },
+    setSourceDetail(data) {
+      this.store.sourceDetail = data;
+    },
+  },
 });

src/pages/website/Design/index.tsx

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

src/pages/website/EditMaterial/components/ComponentPanel.tsx

@@ -0,0 +1,52 @@
+import { Image, List } from "@queenjs/ui";
+import { Button } from "ant-design-vue";
+import { defineComponent } from "vue";
+import { any } from "vue-types";
+
+export default defineComponent({
+  setup() {
+    return () => {
+      const list = new Array(6).fill({});
+      return (
+        <div class="w-300px flex flex-col">
+          <div class="p-15px text-16px text-white border-dark-800 border-0 border-b-1 border-solid">
+            组件列表
+          </div>
+          <List data={list} gap="10px" class="scrollbar flex-1 py-15px px-15px">
+            {{
+              item: () => <CompItem record={{}} />,
+              loadmore: () => (
+                <div class="text-center py-20px text-12px opacity-80">
+                  没有更多了
+                </div>
+              ),
+            }}
+          </List>
+        </div>
+      );
+    };
+  },
+});
+
+const CompItem = defineComponent({
+  props: {
+    record: any().isRequired,
+  },
+  setup(props) {
+    return () => {
+      const { record } = props;
+      return (
+        <div
+          class="flex items-center py-6px px-12px rounded-4px"
+          style={{ backgroundColor: "#303030" }}
+        >
+          <Image src={record.thumbnail?.url} class="w-48px rounded-4px" />
+          <div class="ml-12px flex-1">{record.name || "未命名"}</div>
+          <Button type="primary" ghost size="small">
+            替换
+          </Button>
+        </div>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,45 @@
+import { useResource } from "@/modules/resource";
+import { css, cx } from "@linaria/core";
+import { IconMore } from "@queenjs/icons";
+import { Button, Divider } from "ant-design-vue";
+import { defineComponent } from "vue";
+import Logo from "../../components/layout/Logo";
+import SelectTemplateModal from "./SelectTemplateModal";
+
+export default defineComponent({
+  setup() {
+    const resource = useResource();
+
+    const showModal = () => {
+      resource.showModal(<SelectTemplateModal />, {
+        title: "选择模板",
+        width: "900px",
+      });
+    };
+
+    return () => {
+      return (
+        <div
+          class={cx(
+            rootStyles,
+            "flex items-center justify-between py-15px px-25px"
+          )}
+        >
+          <Logo />
+          <div class="flex items-center justify-center">
+            <Button type="primary" size="small" onClick={showModal}>
+              渲染
+            </Button>
+            <Divider type="vertical" class="!mx-20px"></Divider>
+            <IconMore class="text-20px" />
+          </div>
+        </div>
+      );
+    };
+  },
+});
+
+const rootStyles = css`
+  height: @inf-header-height;
+  border-bottom: 1px solid @inf-border-color;
+`;

src/pages/website/EditMaterial/components/ModelPanel.tsx

@@ -0,0 +1,52 @@
+import { Image, List } from "@queenjs/ui";
+import { Button } from "ant-design-vue";
+import { defineComponent } from "vue";
+import { any } from "vue-types";
+
+export default defineComponent({
+  setup() {
+    return () => {
+      const list = new Array(6).fill({});
+      return (
+        <div class="w-300px flex flex-col">
+          <div class="p-15px text-16px text-white border-dark-800 border-0 border-b-1 border-solid">
+            模型列表
+          </div>
+          <List data={list} gap="10px" class="scrollbar flex-1 py-15px px-15px">
+            {{
+              item: () => <ProductItem record={{}} />,
+              loadmore: () => (
+                <div class="text-center py-20px text-12px opacity-80">
+                  没有更多了
+                </div>
+              ),
+            }}
+          </List>
+        </div>
+      );
+    };
+  },
+});
+
+const ProductItem = defineComponent({
+  props: {
+    record: any().isRequired,
+  },
+  setup(props) {
+    return () => {
+      const { record } = props;
+      return (
+        <div
+          class="flex items-center py-6px px-12px rounded-4px"
+          style={{ backgroundColor: "#303030" }}
+        >
+          <Image src={record.thumbnail?.url} class="w-48px rounded-4px" />
+          <div class="ml-12px flex-1">{record.name || "未命名"}</div>
+          <Button type="primary" ghost size="small">
+            替换
+          </Button>
+        </div>
+      );
+    };
+  },
+});

src/pages/website/EditMaterial/components/SelectTemplateModal.tsx

@@ -0,0 +1,62 @@
+import { useResource } from "@/modules/resource";
+import { List } from "@queenjs/ui";
+import { Button, Empty } from "ant-design-vue";
+import { queenApi, useModal } from "queenjs";
+import { defineComponent, reactive } from "vue";
+
+export default defineComponent({
+  setup() {
+    const resource = useResource();
+    const modal = useModal();
+
+    const state = reactive({
+      list: [],
+    }) as any;
+
+    const submit = () => {
+      if (state.list.length == 0) {
+        queenApi.messageError("请选择至少一个模板");
+        return;
+      }
+      resource.actions.submitRender();
+    };
+
+    return () => {
+      return (
+        <div>
+          <List data={resource.store.sourceDetail.images} columns={5}>
+            {{
+              item: (record: any) => {
+                return (
+                  <resource.components.MaterialItem
+                    record={record}
+                    class="cursor-pointer"
+                    active={state.list.includes(record.id)}
+                    onSelect={() => {
+                      if (state.list.includes(record.id)) {
+                        const index = state.list.findIndex(
+                          (d: string) => d == record.id
+                        );
+                        state.list.splice(index);
+                        return;
+                      }
+                      state.list.push(record.id);
+                    }}
+                  />
+                );
+              },
+              empty: () => <Empty description="暂无数据" />,
+            }}
+          </List>
+
+          <div class="text-right">
+            <Button onClick={modal.cancel}>取消</Button>
+            <Button type="primary" class="ml-20px" onClick={submit}>
+              确定
+            </Button>
+          </div>
+        </div>
+      );
+    };
+  },
+});

src/pages/website/EditMaterial/index.tsx

@@ -1,5 +1,69 @@
-import { defineComponent } from "vue";
+import { useResource } from "@/modules/resource";
+import { initQueditor } from "@queenjs-modules/queditor";
+import { initExpViewer } from "@queenjs-modules/queentree-explorer-viewer";
+import { defineComponent, onBeforeUnmount, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import ComponentPanel from "./components/ComponentPanel";
+import Header from "./components/Header";
+import ModelPanel from "./components/ModelPanel";
 
-export default defineComponent(() => {
-  return () => <div>Settings</div>;
+export default defineComponent({
+  setup() {
+    const route = useRoute();
+    const expViewer = initExpViewer({
+      modules: {
+        queditor: initQueditor({
+          config: {
+            dragEnable: true,
+          },
+        }),
+      },
+    });
+    const resource = useResource();
+
+    const { queditor } = expViewer.modules;
+
+    expViewer.initComponents({
+      Viewport: {
+        Header: {
+          default: Header,
+        },
+        EditPanel: {
+          default: ComponentPanel,
+        },
+      },
+    });
+
+    queditor.initComponents({
+      Viewport: {
+        SiderLeft: {
+          default: ModelPanel,
+        },
+        Toolbar: {
+          default: () => null,
+        },
+      },
+    });
+
+    const { id } = route.params;
+
+    const init = async () => {
+      await resource.actions.queryTplsDetail(id as string);
+      queditor.actions.initPack(resource.store.sourceDetail?.webEditor?.pack);
+      queditor.store.setCurrScene(0);
+      expViewer.store.setEditNodeUid(resource.store.sourceDetail._id);
+    };
+
+    onMounted(() => init());
+
+    onBeforeUnmount(() => resource.store.setSourceDetail({}));
+
+    return () => {
+      return (
+        <div class="h-100vh">
+          <expViewer.components.Viewport />
+        </div>
+      );
+    };
+  },
 });

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

@@ -1,7 +1,7 @@
 import { useResource } from "@/modules/resource";
 import { css } from "@linaria/core";
 import { useModal } from "queenjs";
-import { defineComponent, onMounted } from "vue";
+import { defineComponent, onBeforeUnmount, onMounted } from "vue";
 import { string } from "vue-types";
 import AssetsList from "../../components/AssetsList";
 
@@ -14,10 +14,16 @@ export default defineComponent({
     const resource = useResource();
 
     onMounted(() => {
-      resource.controls.matTempListCtrl.state.query = {
-        type: props.type,
-      };
-      resource.controls.matTempListCtrl.loadPage(1);
+      const ctrl = resource.controls.matTempListCtrl;
+      if (props.type == "video") {
+        ctrl.state.query = { hasVideo: true };
+      }
+      ctrl.loadPage(1);
+    });
+
+    onBeforeUnmount(() => {
+      const ctrl = resource.controls.matTempListCtrl;
+      ctrl.state.query = {};
     });
 
     return () => {

src/pages/website/Material/index.tsx

@@ -1,23 +1,20 @@
 import { useResource } from "@/modules/resource";
 import { css, cx } from "@linaria/core";
-import { Button, Space } from "ant-design-vue";
-import { defineComponent, onMounted, reactive } from "vue";
+import { Button } from "ant-design-vue";
+import { defineComponent, onMounted } from "vue";
 import AssetsList from "../components/AssetsList";
 import MaterialTemplateModal from "./components/MaterialTemplateModal";
 
 const materialType = [
   { name: "视频", key: "video" },
   { name: "图片", key: "image" },
+  { name: "渲染任务", key: "task" },
 ];
 
 export default defineComponent({
   setup() {
     const resource = useResource();
 
-    const state = reactive({
-      type: "video",
-    });
-
     const showModal = (type: string) => {
       resource.showModal(<MaterialTemplateModal type={type} />, {
         title: `${type === "image" ? "图片" : "视频"}模板中心`,
@@ -25,31 +22,38 @@ export default defineComponent({
       });
     };
 
-    onMounted(() => {
-      resource.controls.materialListCtrl.state.query = { type: state.type };
-      // resource.controls.materialListCtrl.loadPage(1);
-    });
+    const changeType = (v: string) => {
+      resource.store.setSourceType(v);
+      loadPage();
+    };
+
+    const loadPage = () => {
+      resource.controls.materialListCtrl.state.query = {
+        fileType: resource.store.type,
+      };
+      resource.controls.materialListCtrl.loadPage(1);
+    };
+
+    onMounted(() => loadPage());
 
     return () => {
       return (
         <div class={rootStyles}>
           <h3 class="text-22px">我的素材</h3>
           <div class="flex items-center justify-between mt-20px">
-            <div class="filter">
-              <Space size={60}>
-                {materialType.map((d) => (
-                  <span
-                    key={d.key}
-                    onClick={() => (state.type = d.key)}
-                    class={cx(
-                      state.type == d.key && "active",
-                      "cursor-pointer btn_tab"
-                    )}
-                  >
-                    {d.name}
-                  </span>
-                ))}
-              </Space>
+            <div class="filter space-x-60px">
+              {materialType.map((d) => (
+                <span
+                  key={d.key}
+                  onClick={() => changeType(d.key)}
+                  class={cx(
+                    resource.store.type == d.key && "active",
+                    "cursor-pointer btn_tab"
+                  )}
+                >
+                  {d.name}
+                </span>
+              ))}
             </div>
             <div>
               <Button
@@ -83,6 +87,7 @@ export default defineComponent({
             control={resource.controls.materialListCtrl}
             item={(record: any) => (
               <resource.components.MaterialItem
+                use="show"
                 record={record}
                 onDelete={() => resource.actions.deleteMaterial(record)}
                 onDownload={() => resource.actions.downloadMaterial(record)}

src/pages/website/components/AssetsList.tsx

@@ -1,7 +1,6 @@
 import { css } from "@linaria/core";
 import { List } from "@queenjs/ui";
 import { Empty, Pagination } from "ant-design-vue";
-import { nanoid } from "nanoid";
 import { defineComponent } from "vue";
 import { any, number, string } from "vue-types";
 
@@ -15,12 +14,10 @@ export default defineComponent({
   setup(props) {
     return () => {
       const { control, columns, gap } = props;
-      const data =
-        //  control.state.list ||
-        new Array(20).fill({ id: nanoid() });
+
       return (
         <div class={styles}>
-          <List data={data} columns={columns} gap={gap}>
+          <List data={control.state.list} columns={columns} gap={gap}>
             {{
               item: (record: any) => props.item?.(record),
               empty: () => <Empty class="py-50px" description="暂无数据" />,
@@ -30,8 +27,9 @@ export default defineComponent({
             <Pagination
               size="default"
               hideOnSinglePage
+              pageSize={control.state.size}
               total={control.state.total}
-              onChange={control.loadPage}
+              onChange={(p) => control.loadPage(p)}
             />
           </div>
         </div>

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

@@ -9,6 +9,7 @@ import {
 import { Avatar, Divider } from "ant-design-vue";
 import { defineComponent } from "vue";
 import { array, object } from "vue-types";
+import Logo from "./Logo";
 
 export default defineComponent({
   setup() {
@@ -46,13 +47,7 @@ export default defineComponent({
       return (
         <div class={cx(rootStyles, "p-30px h-1/1 flex flex-col")}>
           <div class="mt-20px">
-            <router-link to="/">
-              <img
-                class="w-150px"
-                src={require("@/assets/imgs/Logo.png")}
-                alt=""
-              />
-            </router-link>
+            <Logo />
           </div>
           <div class="my-50px flex items-center">
             <Avatar size={76} src={userInfo.avatar} />

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

@@ -0,0 +1,8 @@
+export default () => {
+  return (
+    <router-link to="/" class="block flex items-center">
+      <img class="h-25px" src={require("@/assets/imgs/Logo.png")} alt="" />
+      <span class="ml-10px text-white text-20px uppercase">queentu</span>
+    </router-link>
+  );
+};

src/styles/theme.less

@@ -15,7 +15,7 @@
 @inf-border-color: #1f1f1f;
 
 @inf-mask-bg: fade(#000000, 50%);
-@inf-modal-bg: #1f1f1f;
+// @inf-modal-bg: #1f1f1f;
 
 @inf-layout-bg: #262626;
 @inf-component-bg: #262626;