logs and new promote

package.json

@@ -31,8 +31,10 @@
     "zustand": "^5.0.4"
   },
   "dependencies": {
+    "@types/debug": "^4.1.12",
     "antd": "^5.24.7",
     "chai": "^5.1.2",
+    "debug": "^4.4.0",
     "fast-json-patch": "^3.1.1",
     "jimp": "^1.6.0",
     "mocha": "^11.0.1",

plugins/photoshop/css/styles.css

@@ -153,50 +153,12 @@ sp-progressbar {
     margin-left: 5px;
 }
 
-.cloud-promote-bar {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 5px;
-}
-
-.cloud-promote-bar-left {
-    color: var(--uxp-host-text-color-secondary);
-}
-
-.cloud-promote-bar-right {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-}
-
-.cloud-promote-bar-right span {
-    color: var(--uxp-host-text-color-secondary);
-    display: inline-flex;
-    align-items: center;
-    padding: 3px 8px;
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--uxp-host-border-color);
-    border-radius: 4px;
-    position: relative;
-    margin-right: 5px;
-    cursor: pointer;
-}
-
-.cloud-promote-bar-right span img {
-    width: 16px;
-    height: 16px;
-    margin-right: 5px;
-}
-
 .container {
     flex-direction: column;
     display: flex;
     height: 100%;
     width: 100%;
-    padding: 8px;
+    padding: 0 8px;
 }
 
 .panel-body {
@@ -742,4 +704,11 @@ sp-action-button.highlight:hover, .action-button.highlight:hover {
     justify-content: space-around;
     width: 100%;
     padding-bottom: 20px;
+}
+
+.promote-webview {
+    width: 100%;
+    height: 30px;
+    background-color: var(--uxp-host-background-color);
+    margin-bottom: 4px;
 }

plugins/photoshop/index.html

@@ -14,9 +14,11 @@
 </head>
 
 <body>
-  <script>
-    // sdppp.enableLogCapture();
-  </script>
+  <span id="color_computer" style="
+    color: var(--uxp-host-text-color-secondary);
+    border-color: var(--uxp-host-border-color);
+    display: none;
+  "></span>
   <script src="run.js"></script>
 </body>
 

plugins/photoshop/promote.html

@@ -0,0 +1,94 @@
+<html>
+
+<head>
+    <style>
+        body {
+            overflow: hidden;
+            font-size: 12px;
+            padding: 0;
+            margin: 0;
+        }
+
+        .cloud-promote-bar {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 5px;
+            opacity: .9;
+        }
+
+        .cloud-promote-bar-right {
+            display: flex;
+            flex-direction: row;
+            gap: 8px;
+        }
+
+        .cloud-promote-bar-right span {
+            display: inline-flex;
+            align-items: center;
+            padding: 3px 2px;
+            /* border-style: solid;
+            border-width: 1px;
+            border-radius: 4px; */
+            position: relative;
+            margin-right: 5px;
+            cursor: pointer;
+            text-decoration: underline;
+        }
+
+        .cloud-promote-bar-right span img {
+            width: 16px;
+            height: 16px;
+            margin-right: 5px;
+        }
+    </style>
+    <!-- <script>
+        const urlParams = new URLSearchParams(window.location.search);
+        const color = urlParams.get('color');
+        console.log(window.location);
+        document.write(`
+            <style>
+                body {
+                    color: ${color};
+                }
+            </style>
+        `)
+    </script> -->
+    <script>
+        window.addEventListener('message', (event) => {
+            if (event.data.action === 'init') {
+                const color = event.data.payload.color;
+                const cloudData = event.data.payload.cloud;
+                const style = document.createElement('style');
+                style.innerHTML = `
+                    body {
+                        color: ${color};
+                    }
+                `
+                document.head.appendChild(style);
+
+                const promoteItemTemplate = function (item) {
+                    return `<span key="${item.name}" style="border-color: ${item.color}" onclick="window.uxpHost.postMessage({action: 'open', payload: {url: '${item.url}'}})">
+                        <img src="${item.icon}" onerror="this.style.display = 'none'" />${item.name}
+                    </span>
+                    `
+                }
+                const cloudPromoteBarRight = document.getElementById('cloud-promote-bar-right');
+                cloudPromoteBarRight.innerHTML = cloudData.map(promoteItemTemplate).join('');
+            }
+        });
+    </script>
+</head>
+
+<body>
+    <div class="cloud-promote-bar">
+        <span class="cloud-promote-bar-left">云端推荐</span>
+        <span class="cloud-promote-bar-right" id="cloud-promote-bar-right">
+
+        </span>
+    </div>
+
+</body>
+
+</html>

plugins/photoshop/run.js

@@ -80,7 +80,7 @@ entrypoints.setup({
                     enabled: true,
                     checked: false,
                     oninvoke: () => {
-                        const logs = globalThis.sdppp.getLogs();
+                        const logs = globalThis.sdpppX.getLogs();
                         alert(JSON.stringify(logs));
                     }
                 }

plugins/photoshop/sdppp.html

@@ -1,6 +0,0 @@
-<html>
-    <head></head>
-    <body>
-        sdppp!
-    </body>
-</html>

plugins/photoshop/sdpppX.js

@@ -1,2 +1,3 @@
 global.sdpppX = {
+    "MU": 1
 }

typescripts/modules/photoshop/src/entry.tsx

@@ -6,36 +6,3 @@ globalThis.sdppp = globalThis.sdppp || {};
 globalThis.sdppp.renderPhotoshopPlugin = (rootElement: HTMLElement) => {
     createRoot(rootElement).render(<Main />);
 }
-
-const logs: any[] = [];
-const warningLogs: any[] = [];
-const errorLogs: any[] = [];
-globalThis.sdppp.getLogs = () => {
-    return {
-        logs,
-        warningLogs,
-        errorLogs
-    }
-}
-globalThis.sdppp.enableLogCapture = () => {
-    console.log = (function(log) {
-        return function(...args: any[]) {
-            log(...args);
-            logs.push(args);
-        }
-    })(console.log);
-
-    console.warn = (function(log) {
-        return function(...args: any[]) {
-            log(...args);
-            warningLogs.push(args);
-        }
-    })(console.warn);
-
-    console.error = (function(log) {
-        return function(...args: any[]) {
-            log(...args);
-            errorLogs.push(args);
-        }
-    })(console.error);
-}

typescripts/modules/photoshop/src/index.d.ts

@@ -96,6 +96,7 @@ declare module "SDPPPInternal" {
         ) => React.ReactNode
     })
     export function Promote(): JSX.Element;
+    export function Auths(): JSX.Element;
 
     export type AddressBarType = () => JSX.Element;
     export type WorkflowEditPhotoshopType = () => JSX.Element;

typescripts/modules/photoshop/src/tsx/Content.tsx

@@ -1,4 +1,4 @@
-import { useSDPPPContext, Promote } from "./SDPPPInternalBridge.js";
+import { useSDPPPContext, Promote, Auths } from "./SDPPPInternalBridge.js";
 import i18n, { isValidI18nKey } from "../../../../src/common/i18n.mjs";
 import WebPageList from "./WebPageList.js";
 import WorkflowList from "./WorkflowList.js";
@@ -56,6 +56,7 @@ export function Content({
     }, [connectState]);
     return (
         <>
+            <Promote />
             <div className="connect-box">
                 {
                     !editorMode ?
@@ -81,7 +82,7 @@ export function Content({
                 ) : ''
             }
 
-            <Promote />
+            <Auths />
 
             <sp-divider size="small"></sp-divider>