Merge branch 'master' of http://124.70.149.18:10880/lianghj/queenshow

scripts/deployAssetsToOss.js

@@ -4,7 +4,7 @@ const co = require('co');
 const path = require('path');
 const fs = require('fs');
 
-const cdnpath = `/cloud/v1/`;
+const cdnpath = `/queenshow/`;
 const client = new OSS({
     region: 'oss-cn-chengdu',
     accessKeyId: 'LTAI4GHqGdgY3b14jVRTzL2w',

scripts/deployHtmlToServer.js

@@ -8,19 +8,21 @@ var nativePath = `dist/temp`;
 //创建临时目录
 fs.mkdirSync(nativePath);
 
-// var indexHtml = fs.readFileSync('dist/index.html');
-// fs.writeFileSync(nativePath + path.sep + 'index.html', indexHtml);
+var indexHtml = fs.readFileSync('dist/index.html');
+fs.writeFileSync(nativePath + path.sep + 'index.html', indexHtml);
 
-var shareHtml = fs.readFileSync('dist/share.html');
-fs.writeFileSync(nativePath + path.sep + 'share.html', shareHtml);
+var editHtml = fs.readFileSync('dist/editor.html');
+fs.writeFileSync(nativePath + path.sep + 'editor.html', editHtml);
+// var shareHtml = fs.readFileSync('dist/share.html');
+// fs.writeFileSync(nativePath + path.sep + 'share.html', shareHtml);
 
-var shareHtml = fs.readFileSync('dist/login.html');
-fs.writeFileSync(nativePath + path.sep + 'login.html', shareHtml);
+// var shareHtml = fs.readFileSync('dist/login.html');
+// fs.writeFileSync(nativePath + path.sep + 'login.html', shareHtml);
 
-var consoleHtml = fs.readFileSync('dist/console.html');
-fs.writeFileSync(nativePath + path.sep + 'console.html', consoleHtml);
+// var consoleHtml = fs.readFileSync('dist/console.html');
+// fs.writeFileSync(nativePath + path.sep + 'console.html', consoleHtml);
 
-var serverPath = `/var/www/3dqueencloud/`;
+var serverPath = `/var/www/html/projects/queenshow`;
 
 var ftpUtils = new sftp({
     remotePath: serverPath,

src/dict/apis.ts

@@ -7,7 +7,8 @@ const treeVersion = "/tree/v1";
 const Dict_Apis = {
   auth: `${baseURL}${baseVersion}/usercenter`,
   queentree: `${baseURL}${treeVersion}/assetcenter`,
-  promotion: `${localURL}/promotion`,
+  promotion: `${baseURL}${baseVersion}/promotion`,
+  // promotion: `${localURL}/promotion`,
 };
 
 export { Dict_Apis };

src/modules/resource/controllers/MaterialController.ts

@@ -35,7 +35,7 @@ export class MaterialController  {
     onBtnClick(name:string) {
         console.log("onBtnClick", name)
     }
-    onItemClick(name: "delete" | "download", record:any) {
+    onItemClick(name: "delete" | "download" | "preview", record:any) {
         console.log("onItemClick", name, record)
     }
     async onShowDialog(listCtrl: PageListController<any, any>, type:string) {

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

@@ -12,8 +12,8 @@ export default defineComponent({
 
     const showModal = () => {
       resource.showModal(<OutputTemplateModal />, {
-        title: "选择模板",
-        width: "900px",
+        title: "选择渲染模板",
+        width: "1000px",
       });
     };
 

src/pages/website/CreateMat/components/OutputTemplateItem.tsx

@@ -0,0 +1,77 @@
+import { css, cx } from "@linaria/core";
+import { Image, View } from "@queenjs/ui";
+import { Checkbox, Radio, RadioChangeEvent } from "ant-design-vue";
+import { defineUI } from "queenjs";
+import { reactive } from "vue";
+import { any, bool } from "vue-types";
+
+const options = [
+  { label: "1倍", value: 1 },
+  { label: "2倍", value: 2 },
+];
+
+export default defineUI({
+  props: {
+    active: bool(),
+    record: any(),
+  },
+  emits: ["select", "change"],
+  setup(props, { emit }) {
+    const state = reactive({
+      qos: 1,
+    });
+
+    const change = (e: RadioChangeEvent) => {
+      state.qos = e.target.value;
+      emit("change", state.qos);
+    };
+
+    return () => {
+      const { active, record } = props;
+      //   console.log("record: ", record);
+      return (
+        <div>
+          <View
+            ratio={1.4}
+            onClick={() => emit("select")}
+            class={cx(
+              itemStyles,
+              "overflow-hidden",
+              "relative",
+              active && "active"
+            )}
+          >
+            {active && (
+              <Checkbox
+                checked
+                class="!-mt-0.2em absolute top-0 left-0 text-20px text-red-200 z-3"
+              />
+            )}
+            <Image class="h-1/1 w-1/1" src={record?.thumbnailUrl} />
+          </View>
+          <div>
+            <div class="py-8px">
+              尺寸：{record.width} * {record.height}
+            </div>
+            <div>
+              渲染分辨率：
+              <Radio.Group
+                disabled={!props.active}
+                value={state.qos}
+                options={options}
+                onChange={change}
+              />
+            </div>
+          </div>
+        </div>
+      );
+    };
+  },
+});
+
+const itemStyles = css`
+  border: 1px solid transparent;
+  &.active {
+    border-color: @inf-primary-color;
+  }
+`;

src/pages/website/CreateMat/components/OutputTemplateModal.tsx

@@ -1,9 +1,9 @@
 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";
 import { useRoute } from "vue-router";
+import OutputTemplateItem from "./OutputTemplateItem";
 
 export default defineComponent({
   setup() {
@@ -12,15 +12,19 @@ export default defineComponent({
     const route = useRoute();
 
     const state = reactive({
-      list: [] as {id: string, qos:1}[],
+      list: [] as { id: string; qos: 1 }[],
     }) as any;
 
-    const submit =async () => {
+    const submit = async () => {
       if (state.list.length == 0) {
         queenApi.messageError("请选择至少一个模板");
         return;
       }
-      const isOk = await resource.actions.submitRender(route.params.id as string, state.list, []);
+      const isOk = await resource.actions.submitRender(
+        route.params.id as string,
+        state.list,
+        []
+      );
       if (isOk) {
         modal.submit(true);
       }
@@ -29,33 +33,39 @@ export default defineComponent({
     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.find((v:any)=>v.id == record.id))}
-                    onSelect={() => {
-                      const selected =  !!(state.list.find((v:any)=>v.id == record.id))
-                      if (selected) {
-                        const index = state.list.findIndex(
-                          (d: any) => d.id == record.id
-                        );
-                        state.list.splice(index);
-                        return;
-                      }
-                      state.list.push({id: record.id, qos:1});
-                    }}
-                  />
-                );
-              },
-              empty: () => <Empty description="暂无数据" />,
-            }}
-          </List>
+          {resource.store.sourceDetail.images.length == 0 && (
+            <Empty description="暂无数据" />
+          )}
+          <div class="grid grid-cols-4 gap-10px">
+            {resource.store.sourceDetail.images.map((record: any) => (
+              <OutputTemplateItem
+                record={record}
+                class="cursor-pointer"
+                active={!!state.list.find((v: any) => v.id == record.id)}
+                onChange={(qos) => {
+                  const selected = state.list.find(
+                    (v: any) => v.id == record.id
+                  );
+                  selected.qos = qos;
+                }}
+                onSelect={() => {
+                  const selected = !!state.list.find(
+                    (v: any) => v.id == record.id
+                  );
+                  if (selected) {
+                    const index = state.list.findIndex(
+                      (d: any) => d.id == record.id
+                    );
+                    state.list.splice(index);
+                    return;
+                  }
+                  state.list.push({ id: record.id, qos: 1 });
+                }}
+              />
+            ))}
+          </div>
 
-          <div class="text-right">
+          <div class="text-right mt-10px">
             <Button onClick={modal.cancel}>取消</Button>
             <Button type="primary" class="ml-20px" onClick={submit}>
               确定

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

@@ -42,6 +42,7 @@ export default defineUI({
                   use={ state.currTab == "task" ? "task" : "show"}
                   onDelete={() => props.Controller.onItemClick("delete", record)}
                   onDownload={() =>props.Controller.onItemClick("download", record)}
+                  onPreview={() =>props.Controller.onItemClick("preview", record)}
                 />
               )}
             />

src/pages/website/Material2/components/MaterialItem.tsx

@@ -1,9 +1,8 @@
 import { css, cx } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
 import { Image, View } from "@queenjs/ui";
-import { Checkbox } from "ant-design-vue";
 import { defineUI } from "queenjs";
-import { any, bool, string } from "vue-types";
+import { any, string } from "vue-types";
 
 const renderStatus = {
   succ: "",
@@ -13,18 +12,17 @@ const renderStatus = {
 
 export default defineUI({
   props: {
-    active: bool().def(false),
     record: any(),
     use: string<"show" | "select" | "task">(),
   },
-  emits: ["delete", "select", "download", "use"],
+  emits: ["delete", "download", "use", "preview"],
   setup(props, { emit }) {
     return () => {
-      const { active, record, use } = props;
+      const { record, use } = props;
       // console.error("record: ", record);
 
       return (
-        <div class={cx(itemStyles, "relative", active && "active")}>
+        <div class={cx(itemStyles, "relative")}>
           <View ratio={1.4} class="overflow-hidden">
             {record.fileType == "video" ? (
               <video src={record.file?.url} class="h-1/1 w-1/1" />
@@ -36,28 +34,26 @@ export default defineUI({
                 }
               />
             )}
-            {active && (
-              <Checkbox
-                checked
-                class="!-mt-0.2em absolute top-0 left-0 text-20px text-red-200 z-3"
-              />
-            )}
+
             {use == "task" && record.status !== "succ" && (
               <div class="waiting absolute inset-0 z-2 flex items-center justify-center text-white">
                 {(renderStatus as any)[record.status || "default"]}
               </div>
             )}
             {use !== "task" && (
-              <div
-                class="absolute inset-0 flex items-center justify-center z-2 opacity-0 hover:opacity-100 transition-all text-white"
-                onClick={() => emit("select")}
-              >
+              <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")}
                   />
                 )}
+                <div
+                  class="rounded-1/2 text-center w-56px leading-56px cursor-pointer orange"
+                  onClick={() => emit("preview")}
+                >
+                  预览
+                </div>
                 {use == "show" && (
                   <div
                     class="btn_circle rounded-1/2 text-center w-56px leading-56px cursor-pointer"
@@ -92,17 +88,18 @@ export default defineUI({
 });
 
 const itemStyles = css`
-  border: 1px solid transparent;
-  &.active {
-    border-color: @inf-primary-color;
+  .orange {
+    background-color: rgba(232, 139, 0, 0.5);
+    &:hover {
+      background-color: rgba(232, 139, 0, 0.7);
+    }
   }
-
   .btn_circle {
     background-color: rgba(0, 0, 0, 0.7);
     &:hover {
       background-color: rgba(0, 0, 0, 0.8);
     }
-    &:not(:first-child) {
+    &:not(:nth-of-type(1)) {
       margin-left: 10px;
     }
   }

src/pages/website/Material2/components/PreviewModal.tsx

@@ -0,0 +1,27 @@
+import { Image } from "@queenjs/ui";
+import { defineUI } from "queenjs";
+import { object } from "vue-types";
+
+export default defineUI({
+  props: {
+    data: object<{
+      url: string;
+      fileType: "image" | "video";
+    }>().isRequired,
+  },
+  setup(props) {
+    return () => {
+      const { data } = props;
+      return (
+        <div class="text-center min-h-200px">
+          {data.fileType == "image" && (
+            <Image size={720} src={data.url} class="max-w-1/1" />
+          )}
+          {data.fileType == "video" && (
+            <video controls src={data.url} class="max-w-1/1" />
+          )}
+        </div>
+      );
+    };
+  },
+});

src/pages/website/Material2/components/SelectListItemModal.tsx

@@ -6,13 +6,13 @@ import { PageListController } from "@queenjs/controllers";
 
 export default defineUI({
   slots: {
-     Item
+    Item,
   },
   props: {
     ListCtrl: any<PageListController<any, any>>().isRequired,
   },
-
-  setup(props, {slots}) {
+  emits: ["preview"],
+  setup(props, { emit, slots }) {
     const modal = useModal();
     return () => {
       return (
@@ -23,9 +23,10 @@ export default defineUI({
               <slots.Item
                 use="select"
                 record={record}
-                onUse={()=>{
-                  modal.submit(record  )
+                onUse={() => {
+                  modal.submit(record);
                 }}
+                onPreview={() => emit("preview", record)}
               />
             )}
           />

src/pages/website/Material2/controller.tsx

@@ -1,5 +1,6 @@
 import SelectListItemModal from "./components/SelectListItemModal";
 import { MaterialController } from "../../../modules/resource/controllers/MaterialController";
+import PreviewModal from "./components/PreviewModal";
 
 export default function createController(resource:any, isSelectModel:boolean, selectType :string) {
     const {controls, actions} = resource;
@@ -7,13 +8,28 @@ export default function createController(resource:any, isSelectModel:boolean, se
         const ctrl = resource.controls.matTempListCtrl;
         ctrl.state.query = type == "video" ? { hasVideo: true } : {}
         ctrl.loadPage(1);
-        const record  = await resource.showModal(<SelectListItemModal ListCtrl={ctrl}  />, {
+        const record  = await resource.showModal(<SelectListItemModal ListCtrl={ctrl} onPreview={(record) => {
+          showPreviewModal({
+            url:record.thumbnail,
+            fileType:type == "video" ? "video":'image'
+          })
+        }}  />, {
           title: `${type === "image" ? "图片" : "视频"}模板中心`,
           width: "1000px",
         });
         resource.actions.selectMaterial(record);
     };
 
+    const  showPreviewModal = (data: {
+      url: string;
+      fileType: "image" | "video";
+    }) => {
+      resource.showModal(<PreviewModal data={data}  />, {
+        title: "预览",
+        width: "800px",
+      }); 
+  };
+
     const ctrl = new MaterialController();
     ctrl.imageCtrl = controls.materialImageListCtrl;
     ctrl.vidoeCtrl = controls.materialVideoListCtrl;
@@ -29,6 +45,10 @@ export default function createController(resource:any, isSelectModel:boolean, se
     };
     ctrl.onItemClick = function (name, record) {
       if (name == "delete") return actions.deleteMaterial(record);
+      else if (name == "preview") return showPreviewModal({
+        url: record.file.url,
+        fileType: record.fileType,
+      });
       return actions.downloadMaterial(record);
     };
 

vue.config.js

@@ -7,11 +7,11 @@ const {
 } = require("@ckeditor/ckeditor5-dev-translations");
 const { styles } = require("@ckeditor/ckeditor5-dev-utils");
 
-// const publicPath =
-//   process.env.NODE_ENV === "production"
-//     ? `//infishwaibao.oss-cn-chengdu.aliyuncs.com/cloud/v1/`
-//     : "./";
-const publicPath = "./";
+const publicPath =
+  process.env.NODE_ENV === "production"
+    ? `//infishwaibao.oss-cn-chengdu.aliyuncs.com/queenshow/`
+    : "./";
+// const publicPath = "./";
 
 module.exports = defineConfig({
   pages: {