search

opensumi / codeblitz

Pure front-end IDE framework based on OpenSumi
https://codeblitz.opensumi.com
MIT License
190 stars 16 forks source link

[BUG] error occurred in the <AppRenderer> component and Cannot find Provider of ConfigBrowserModule #192

Open itcloudy opened 1 month ago

itcloudy commented 1 month ago

描述你的问题（Describe the bug）

  1. 使用官方文档https://codeblitz.opensumi.com/zh/docs/develop/api-docs中的【完整示例参考】将其嵌入到antdesignpro中

  2. 路由配置： { name: '', path: '/ide/:platform/:owner/:name/:ref', layout: false, menuRender: false, component: './ide', },

  3. 页面代码pages/ide.tsx如下 import React from 'react'; import { CodeServiceModule } from '@codeblitzjs/ide-code-service'; import { useParams } from '@umijs/max';

// codeblitz import { AppRenderer, SlotLocation, SlotRenderer, SplitPanel, BoxPanel, } from '@codeblitzjs/ide-core/bundle'; import '@codeblitzjs/ide-core/bundle/codeblitz.css'; // codeblitz

// 语法高亮 import '@codeblitzjs/ide-core/languages/html'; import '@codeblitzjs/ide-core/languages/handlebars'; import '@codeblitzjs/ide-core/languages/css'; import '@codeblitzjs/ide-core/languages/scss'; import '@codeblitzjs/ide-core/languages/less'; import '@codeblitzjs/ide-core/languages/javascript'; import '@codeblitzjs/ide-core/languages/typescript'; import '@codeblitzjs/ide-core/languages/json'; // end

// 语言功能 import html from '@codeblitzjs/ide-core/extensions/codeblitz.html-language-features-worker'; import css from '@codeblitzjs/ide-core/extensions/codeblitz.css-language-features-worker'; import typescript from '@codeblitzjs/ide-core/extensions/codeblitz.typescript-language-features-worker'; import json from '@codeblitzjs/ide-core/extensions/codeblitz.json-language-features-worker';

// 布局配置，可根据需要增删模块 export const layoutConfig = {

modules: [''],

},

modules: ['@opensumi/ide-explorer'],

},

modules: ['@opensumi/ide-editor'],

}, // [SlotLocation.bottom]: { // modules: ['@opensumi/ide-output', '@opensumi/ide-markers'], // },

modules: ['@opensumi/ide-status-bar'],

}, };

// 界面布局组件，可根据需要调整 const LayoutComponent = () => (

); const overrideColorTokens = { 'editorGroupHeader.tabsBackground': '#ECF1FE', 'editor.background': '#fff', 'aiNative.inlineDiffAddedRange': '#26bf6d1f', 'aiNative.inlineDiffRemovedRange': '#ff4d4f1e', 'aiNative.inlineDiffAcceptPartialEdit': '#26bf6d80', 'aiNative.inlineDiffDiscardPartialEdit': '#ff4d4f80', 'aiNative.inlineDiffAcceptPartialEdit.foreground': '#000', }

const App: React.FC = () => { const params = useParams(); const platform = params.platform || 'github'; const owner = params.owner || ''; const name = params.name || ''; const ref = params.ref || 'main'; const commit = ''; console.log(platform, owner, name, ref, commit); // for codeup const projectId = ''; return ( <div style={{ width: '100%', height: '100%' }}> <AppRenderer key='ide' appConfig={{ // 扩展 extensionMetadata: [html, css, typescript, json], // 工作空间目录，最好确保不同项目名称不同，如 group/repository 的形式，工作空间目录会挂载到 /workspace 根目录下 workspaceDir: ${platform}/${owner}/${name}, layoutConfig, layoutComponent: LayoutComponent, // 默认偏好设置 defaultPreferences: { 'editor.previewMode': false, 'general.theme': 'opensumi-design-light-theme', }, useSimplifyExplorerPanel: true, // 左侧面板默认宽度 panelSizes: {

      },
      modules: [
        CodeServiceModule.Config({
          platform,
          owner: owner,
          name: name,
          refPath: ref,
          commit: commit,
          hash: location.hash,
          // for codeup
          projectId: projectId,
          gitlink: {
            // for proxy
            endpoint: '/code-service',
          },
          atomgit: {
            // atomgit token https://atomgit.com/-/profile/tokens
            token: '',
          },
          gitee: {
            // gitee token https://gitee.com/profile/personal_access_tokens
            recursive: true,
            token: '',
          },
          codeup: {
            // for proxy
            endpoint: '/code-service',
          },
        }),
      ],

    }}
    runtimeConfig={{
      onWillApplyTheme() {
        return overrideColorTokens;
      },
      // 禁止就改文件树，此时无法新增、删除、重命名文件
      disableModifyFileTree: false,
      // 默认打开文件
      workspace: {
        filesystem: {
          fs: 'InMemory',
        },
      },
    }}
  />
</div>

); }; export default App;

打开浏览器http://localhost:8000/ide/github/opensumi/core/main

复现路径（To Reproduce）

截屏2024-09-30 19 45 48

预期表现（Expected behavior） 能看到github仓库代码

环境信息（Environment）