collection ui

src/App.tsx

@@ -3,14 +3,14 @@ import { Provider } from "queenjs/adapter/vue";
 import { createApp, defineComponent } from "vue";
 import { Router } from "vue-router";
 import "./styles";
-
+import zh_cn from "ant-design-vue/es/locale/zh_CN";
 let setModuleHooks: any[] = [];
 
 const App = defineComponent(() => {
   setModuleHooks.forEach((hook) => hook());
   setModuleHooks = [];
   return () => (
-    <Provider>
+    <Provider locale={zh_cn}>
       <router-view></router-view>
     </Provider>
   );

src/modules/resource/actions/collection.tsx

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

src/modules/resource/actions/editor.ts

@@ -22,7 +22,6 @@ export const editorActions = ResourceModule.action({
 
   async submitRender(id: string, images: any, videos: any) {
     queenApi.showLoading("任务提交中");
-
     console.log("iamges=>", images, "videos->", videos);
 
     try {

src/modules/resource/actions/index.ts

@@ -1,5 +1,11 @@
 import { editorActions } from "./editor";
 import { materialActions } from "./material";
 import { promotionAction } from "./promotion";
+import { collectionAction } from "./collection";
 
-export const actions = [editorActions, materialActions, promotionAction];
+export const actions = [
+  editorActions,
+  materialActions,
+  promotionAction,
+  collectionAction,
+];

src/modules/resource/helper.ts

@@ -30,7 +30,21 @@ export const helper = ResourceModule.helper({
 
     return ctrl;
   },
-
+  createCollectionController() {
+    const ctrl = new ComponentController();
+    ctrl.ListCtrl = new PageListController(this.config?.httpConfig);
+    ctrl.ListCtrl.setCrudPrefix("/frame");
+    ctrl.createComp = this.actions.createCollection;
+    ctrl.onMenuClick = async (name, record) => {
+      if (name == "delete") {
+        await this.actions.deleteCollection(record);
+        ctrl.ListCtrl.fresh();
+      } else if (name == "rename") {
+        await this.actions.renameCollection(record);
+      }
+    };
+    return ctrl;
+  },
   // createSourceController() {
   //   const { controls, actions } = this;
 

src/modules/resource/http.ts

@@ -48,4 +48,16 @@ export const http = ResourceModule.http({
   deleteComp(id: string) {
     return this.request(`/frame/delete/${id}`, { method: "POST" });
   },
+  //collection
+  createCollection(data: any) {
+    return this.request("/frame/create", { method: "POST", data });
+  },
+
+  updateCollection(data: any) {
+    return this.request("/frame/update", { method: "POST", data });
+  },
+
+  deleteCollection(id: string) {
+    return this.request(`/frame/delete/${id}`, { method: "POST" });
+  },
 });

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

@@ -1,3 +1,4 @@
+import { Button } from "ant-design-vue";
 import { defineUI } from "queenjs";
 
 export default defineUI({
@@ -6,9 +7,9 @@ export default defineUI({
     return () => (
       <div class="flex items-center justify-between">
         <h3 class="text-22px">作品集</h3>
-        {/* <Button type="primary" onClick={()=>emit("add")}>
+        <Button type="primary" onClick={() => emit("add")}>
           新增+
-        </Button> */}
+        </Button>
       </div>
     );
   },

src/pages/website/MyComps/index.tsx → src/pages/website/MyCollection/index.tsx

@@ -5,7 +5,7 @@ import PromotionUI from "./components";
 export default defineComponent({
   setup() {
     const resource = useResource();
-    const ctrl = resource.helper.createCompController();
+    const ctrl = resource.helper.createCollectionController();
     return () => (
       <PromotionUI
         Controller={ctrl}

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

@@ -0,0 +1,137 @@
+import { css } from "@linaria/core";
+
+import { Button, Select } from "ant-design-vue";
+import { SearchOutlined } from "@ant-design/icons-vue";
+import { defineComponent, reactive } from "vue";
+import { any } from "vue-types";
+
+export default defineComponent({
+  props: {
+    record: any().isRequired,
+  },
+  setup(props, { slots }) {
+    // if (location.host == "www.infish.cn") {
+    //   shareLink =
+    //     location.origin +
+    //     "/projects/queenshowv1/share.html?id=" +
+    //     props.record._id;
+    // }
+
+    const state = reactive({
+      ...props.record,
+    });
+
+    const EmptyHistory = () => {
+      return (
+        <div
+          class={
+            "inline-flex flex-col items-center justify-center w-full h-full  rounded-6px"
+          }
+          style={{ background: "#F1F2F4" }}
+        >
+          <div>
+            <img
+              width={86}
+              height={66}
+              src={require("@/assets/imgs/empty_history.png")}
+            />
+          </div>
+          <div class={"text-12px mt-16px text-gray"}>暂无历史提交信息</div>
+        </div>
+      );
+    };
+    const EmptyCollection = () => {
+      return (
+        <div class={"text-center"}>
+          <div
+            class={
+              "w-full h-290px inline-flex flex-col items-center justify-center rounded-6px"
+            }
+            style={{ background: "#F1F2F4" }}
+          >
+            <img
+              class={"object-contain"}
+              width={200}
+              height={142}
+              src={require("@/assets/imgs/404.png")}
+            />
+          </div>
+          <div class={"text-12px mt-18px text-gray"}>
+            请输入正确的大赛接收地址获取大赛信息
+          </div>
+        </div>
+      );
+    };
+
+    return () => {
+      return (
+        <div class={ModalStyle}>
+          <div class={"space-y-14px"}>
+            <div
+              class={"flex items-center bg-white px-30px py-18px rounded-6px"}
+            >
+              <div class={"text-16px"}>接收地址</div>
+              <div class={"flex-1 px-30px"}>
+                <Select class={"w-full"}></Select>
+              </div>
+              <div>
+                <Button type="primary" ghost icon={<SearchOutlined />}>
+                  查询
+                </Button>
+              </div>
+            </div>
+            <div class={"bg-white px-30px py-20px"}>{EmptyCollection()}</div>
+            <div class={"flex items-center space-x-16px"}>
+              <div class={"flex-1 bg-white px-30px py-18px rounded-6px"}>
+                <div class={"text-16px"}>当前提交</div>
+                <div class={"mt-20px h-160px"}></div>
+              </div>
+              <div class={"flex-1 bg-white px-30px py-18px rounded-6px"}>
+                <div class={"text-16px"}>历史提交</div>
+                <div class={"mt-20px h-160px"}>{EmptyHistory()}</div>
+              </div>
+            </div>
+          </div>
+          <div class={"text-center mt-24px"}>
+            <Button
+              type="primary"
+              ghost
+              size={"large"}
+              class={"w-240px"}
+              disabled={true}
+            >
+              确认发送
+            </Button>
+          </div>
+        </div>
+      );
+    };
+  },
+});
+const ModalStyle = css`
+  color: #111;
+  .ant-select:not(.ant-select-customize-input) {
+    .ant-select-selector {
+      border-radius: 4px;
+      border-color: rgba(51, 51, 51, 0.3);
+    }
+  }
+  .ant-btn-background-ghost.ant-btn-primary {
+    border-radius: 4px;
+    background-color: rgba(255, 227, 178, 0.3);
+  }
+  .ant-btn-background-ghost.ant-btn-primary[disabled] {
+    color: #fff;
+    border-color: transparent;
+    background: #ccc;
+    text-shadow: none;
+    box-shadow: none;
+    &:hover {
+      color: #fff;
+      border-color: transparent;
+      background: #ccc;
+      text-shadow: none;
+      box-shadow: none;
+    }
+  }
+`;

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

@@ -89,7 +89,13 @@ export default defineUI({
               overlay={
                 <Menu class="w-90px">
                   {/* <Menu.Item>复制</Menu.Item> */}
-                  {/* <Menu.Item>分享</Menu.Item> */}
+                  <Menu.Item
+                    onClick={() => {
+                      emit("menu", "send");
+                    }}
+                  >
+                    发送作品到
+                  </Menu.Item>
                   <Menu.Item>
                     <div onClick={() => emit("menu", "rename")}>重命名</div>
                   </Menu.Item>

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

@@ -0,0 +1,27 @@
+import { ResourceModule } from "@/modules/resource";
+import CollectionModal from "./CollectionModal";
+import { css } from "@linaria/core";
+
+export function sendPromotion(resource: ResourceModule, record: any) {
+  resource.showModal(<CollectionModal record={record}></CollectionModal>, {
+    title: "发送作品",
+    width: "860px",
+    destroyOnClose: true,
+    wrapClassName: CollectionStyle,
+  });
+}
+const CollectionStyle = css`
+  .ant-modal-content {
+    background-color: transparent;
+    border-radius: 4px;
+  }
+  .ant-modal-header {
+    padding: 16px 24px;
+    background-color: #2a2d41;
+    border-radius: 4px 4px 0 0;
+  }
+  .ant-modal-body {
+    background-color: #f1f2f4;
+    border-radius: 0 0 4px 4px;
+  }
+`;

src/pages/website/Promotion2/controller.tsx

@@ -4,6 +4,7 @@ import { PromotionController } from "@/modules/resource/controllers/PromotionCon
 import { PageListController } from "@queenjs/controllers";
 import { queenApi } from "queenjs";
 import ShareModal from "./components/ShareModal";
+import { sendPromotion } from "./components/SendPromotion";
 
 export function createPromotinController(
   resource: ResourceModule,
@@ -64,6 +65,9 @@ export function createPromotinController(
       case "share":
         sharePromotion(record);
         break;
+      case "send":
+        sendPromotion(resource, record);
+        break;
     }
   };
 

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

@@ -35,7 +35,7 @@ export default defineUI({
         // suffix: "7",
       },
       {
-        link: "/workbench/myComps",
+        link: "/workbench/collection",
         label: "作品集",
         icon: IconCube,
         // suffix: "32",
@@ -64,8 +64,11 @@ export default defineUI({
             <Avatar size={76} src={userInfo.avatar} />
             <div class="ml-20px flex-1">
               <p class="mb-10px text-16px font-bold">{userInfo.name}</p>
-              <div class="text-12px text-gray" style={{color:"#E88B00"}}>
-                {userInfo.saas? "VIP 到期时间:" + dayjs(userInfo.saas.Exp).format("YYYY.MM.DD") :  "免费版(限3个推广)" }
+              <div class="text-12px text-gray" style={{ color: "#E88B00" }}>
+                {userInfo.saas
+                  ? "VIP 到期时间:" +
+                    dayjs(userInfo.saas.Exp).format("YYYY.MM.DD")
+                  : "免费版(限3个推广)"}
               </div>
             </div>
           </div>

src/pages/website/router.ts

@@ -33,9 +33,9 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import("./Promotion2"),
       },
       {
-        path: "/workbench/myComps",
-        name: "myComps",
-        component: () => import("./MyComps"),
+        path: "/workbench/collection",
+        name: "collection",
+        component: () => import("./MyCollection"),
       },
       {
         path: "/workstage/material",