书包对接API

2024-11-25 16:36:03 +08:00 · 2023-07-28 13:19:57 +08:00 · 2023-07-28 13:19:57 +08:00 · 8deb5b52f2
commit 8deb5b52f2
parent d682645eeb
8 changed files with 76 additions and 27 deletions
--- a/README-EN.md
+++ b/README-EN.md
@ -15,6 +15,7 @@ English | [简体中文](./README.md)
 - change block size
 - hidden block category or specific block
 - custom assets library
+- backpack API
 - and more……

 ### The case
@ -61,6 +62,14 @@ This is a complete configuration example

 ```js
 window.scratchConfig = {
+      session: {
+        token: "", // user token
+        username: "Username" // user name
+      },
+      backpack:{
+        enable: true, // enable backpack
+        api: "/api/teaching/scratch/backpack", //backpack API
+      },
      logo: {
        show: true, //is visible
        url: "./static/logo.png", //logo url, support base64 images
--- a/README.md
+++ b/README.md
@ -12,6 +12,7 @@
 - 修改积木大小
 - 显示隐藏积木
 - 自定义素材库
+- 对接背包API
 - And more……

 ### 使用案例
@ -69,6 +70,14 @@ https://www.213.name/archives/1739

 ```js
    window.scratchConfig = {
+      session: {
+        token: "", // 用户Token
+        username: "Username" //用户名
+      },
+      backpack:{
+        enable: true, // 是否启用背包
+        api: "/api/teaching/scratch/backpack", //背包API接口
+      },
      logo: {
        show: true, //是否显示
        url: "./static/logo.png", //logo地址，支持base64图片
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@ -62,7 +62,7 @@ const GUIComponent = props => {
        authorUsername,
        basePath,
        backdropLibraryVisible,
-        backpackHost,
+        backpackApi,
        backpackVisible,
        blocksTabVisible,
        cardsVisible,
@ -335,7 +335,7 @@ const GUIComponent = props => {
                                </TabPanel>
                            </Tabs>
                            {backpackVisible ? (
-                                <Backpack host={backpackHost} />
+                                <Backpack host={backpackApi} />
                            ) : null}
                        </Box>

@ -369,7 +369,7 @@ GUIComponent.propTypes = {
    authorThumbnailUrl: PropTypes.string,
    authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // can be false
    backdropLibraryVisible: PropTypes.bool,
-    backpackHost: PropTypes.string,
+    backpackApi: PropTypes.string,
    backpackVisible: PropTypes.bool,
    basePath: PropTypes.string,
    blocksTabVisible: PropTypes.bool,
@ -426,7 +426,7 @@ GUIComponent.propTypes = {
    vm: PropTypes.instanceOf(VM).isRequired
 };
 GUIComponent.defaultProps = {
-    backpackHost: null,
+    backpackApi: null,
    backpackVisible: false,
    basePath: './',
    canChangeLanguage: true,
--- a/src/containers/backpack.jsx
+++ b/src/containers/backpack.jsx
@ -52,13 +52,13 @@ class Backpack extends React.Component {

        // If a host is given, add it as a web source to the storage module
        // TODO remove the hacky flag that prevents double adding
-        if (props.host && !storage._hasAddedBackpackSource) {
-            storage.addWebSource(
-                [storage.AssetType.ImageVector, storage.AssetType.ImageBitmap, storage.AssetType.Sound],
-                this.getBackpackAssetURL
-            );
-            storage._hasAddedBackpackSource = true;
-        }
+        // if (props.host && !storage._hasAddedBackpackSource) {
+        //     storage.addWebSource(
+        //         [storage.AssetType.ImageVector, storage.AssetType.ImageBitmap, storage.AssetType.Sound],
+        //         this.getBackpackAssetURL
+        //     );
+        //     storage._hasAddedBackpackSource = true;
+        // }
    }
    componentDidMount () {
        this.props.vm.addListener('BLOCK_DRAG_END', this.handleBlockDragEnd);
@ -250,6 +250,22 @@ const getTokenAndUsername = state => {
            username: state.session.session.user.username
        };
    }
+    //从配置文件读取session
+    if(window.scratchConfig && window.scratchConfig.session){
+        return {
+            token: window.scratchConfig.session.token,
+            username: window.scratchConfig.session.username
+        }
+    }
+    //从localstorage读取session
+    var token = localStorage.getItem('pro__Access-Token')
+    var userInfo = localStorage.getItem('pro__Login_Userinfo')
+    if(userInfo && token){
+        return {
+            token: JSON.parse(token).value,
+            username: JSON.parse(userInfo).value.username
+        }
+    }
    // Otherwise try to pull testing params out of the URL, or return nulls
    // TODO a hack for testing the backpack
    const tokenMatches = window.location.href.match(/[?&]token=([^&]*)&?/);
--- a/src/lib/backpack-api.js
+++ b/src/lib/backpack-api.js
@ -8,8 +8,8 @@ import codePayload from './backpack/code-payload';
 // Also include a full body url for loading sprite zips
 // TODO retreiving the images through storage would allow us to remove this.
 const includeFullUrls = (item, host) => Object.assign({}, item, {
-    thumbnailUrl: `${host}/${item.thumbnail}`,
-    bodyUrl: `${host}/${item.body}`
+    thumbnailUrl: `${item.thumbnail}`,
+    bodyUrl: `${item.body}`
 });

 const getBackpackContents = ({
@ -21,14 +21,14 @@ const getBackpackContents = ({
 }) => new Promise((resolve, reject) => {
    xhr({
        method: 'GET',
-        uri: `${host}/${username}?limit=${limit}&offset=${offset}`,
-        headers: {'x-token': token},
+        uri: `${host}/content?limit=${limit}&offset=${offset}`,
+        headers: {'X-Access-Token': token},
        json: true
    }, (error, response) => {
        if (error || response.statusCode !== 200) {
            return reject(new Error(response.status));
        }
-        return resolve(response.body.map(item => includeFullUrls(item, host)));
+        return resolve(response.body.result.map(item => includeFullUrls(item, host)));
    });
 });

@ -44,14 +44,14 @@ const saveBackpackObject = ({
 }) => new Promise((resolve, reject) => {
    xhr({
        method: 'POST',
-        uri: `${host}/${username}`,
-        headers: {'x-token': token},
+        uri: `${host}/save`,
+        headers: {'X-Access-Token': token},
        json: {type, mime, name, body, thumbnail}
    }, (error, response) => {
        if (error || response.statusCode !== 200) {
            return reject(new Error(response.status));
        }
-        return resolve(includeFullUrls(response.body, host));
+        return resolve(includeFullUrls(response.body.result, host));
    });
 });

@ -63,8 +63,8 @@ const deleteBackpackObject = ({
 }) => new Promise((resolve, reject) => {
    xhr({
        method: 'DELETE',
-        uri: `${host}/${username}/${id}`,
-        headers: {'x-token': token}
+        uri: `${host}/delete?id=${id}`,
+        headers: {'X-Access-Token': token}
    }, (error, response) => {
        if (error || response.statusCode !== 200) {
            return reject(new Error(response.status));
--- a/src/playground/index.ejs
+++ b/src/playground/index.ejs
@ -17,6 +17,14 @@
  <% } %>
  <script>
    window.scratchConfig = {
+      session: {
+        token: "", // 用户Token
+        username: "Username" //用户名
+      },
+      backpack:{
+        enable: true, // 是否启用背包
+        api: "/api/teaching/scratch/backpack", //背包API接口
+      },
      logo: {
        show: true, //是否显示
        url:  window.location.protocol+"//"+window.location.host + "/static/logo.png", //logo地址，支持base64图片
--- a/src/playground/render-gui.jsx
+++ b/src/playground/render-gui.jsx
@ -40,8 +40,12 @@ export default appTarget => {
    )(GUI);

    // TODO a hack for testing the backpack, allow backpack host to be set by url param
-    const backpackHostMatches = window.location.href.match(/[?&]backpack_host=([^&]*)&?/);
-    const backpackHost = backpackHostMatches ? backpackHostMatches[1] : null;
+    //const backpackHostMatches = window.location.href.match(/[?&]backpack_host=([^&]*)&?/);
+    //const backpackHost = backpackHostMatches ? backpackHostMatches[1] : null;
+    const backpackApi = window.scratchConfig && window.scratchConfig.backpack && window.scratchConfig.backpack.api
+    const backpackShow =  window.scratchConfig.session && window.scratchConfig.session.token
+                      &&  window.scratchConfig && window.scratchConfig.backpack && window.scratchConfig.backpack.enable
+                         || false

    const scratchDesktopMatches = window.location.href.match(/[?&]isScratchDesktop=([^&]+)/);
    let simulateScratchDesktop;
@ -75,9 +79,9 @@ export default appTarget => {
            /> :
            <WrappedGui
                canEditTitle
-                backpackVisible={false}
-                showComingSoon
-                backpackHost={backpackHost}
+                backpackVisible={backpackShow}
+                // showComingSoon
+                backpackApi={backpackApi}
                canSave={false}
                onClickLogo={onClickLogo}
            />,
--- a/webpack.config.js
+++ b/webpack.config.js
@ -20,7 +20,10 @@ const base = {
    devServer: {
        contentBase: path.resolve(__dirname, 'build'),
        host: '127.0.0.1',
-        port: process.env.PORT || 8601
+        port: process.env.PORT || 8601,
+        proxy: {
+            '/api': 'http://localhost:8081'
+        }
    },
    output: {
        library: 'GUI',