alibaba-fusion / materials Goto Github PK

View Code? Open in Web Editor NEW

238.0 10.0 178.0 7.87 MB

基于 icejs+fusion 的官方精品物料

Home Page: https://fusion.design/template

JavaScript 37.97% TypeScript 53.03% HTML 0.13% SCSS 0.08% CSS 8.79%

react codesnippets blocks react-components scaffold

materials's Issues

物料启动不起来

按照文档操作
1、根目录下npm install
2、cd blocks/AdvancedDetail
3、 npm install
4、 npm run start
报错如下：

头部导航如何使用？

查看 icework的文档： https://ice.work/docs/guide/basic/menu
以及此github模版项目，都未看到头部导航如何使用。

头部导航还能使用吗？
有相关文档吗？

[FEATURE]successDetail的图片希望是矢量的

materials/blocks/SuccessDetail/src/index.tsx

Line 27 in 7b3f7d5

image = 'https://img.alicdn.com/tfs/TB1UOSVoqL7gK0jSZFBXXXZZpXa-73-72.png',

可以用

<svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg>

代替

现在的图片糊的很严重

ice-stark-layout运行在IE11时报错 SCRIPT5022: Objects are not valid as a React child

你好，直接下载运行 ice-stark-layout 工程时报错，且页面空白：

盼复~
🚶 🚶‍♀

大佬能做的像ant design pro 那么完善吗？

fusion design pro 做的没ant design pro那么完善。希望大佬们完善一下 pro版本。谢谢！

Fusion Design Pro(TS)模板start失败

通过AppWorks初始化 Fusion Design Pro(TS)模板，安装完成依赖后，执行npm start，启动失败，尝试了几次都不行，使用Lite模板是可以正常启动的。
麻烦看下是什么情况，谢谢。

相关日志如下:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'd:\nvm\nodejs\node.exe',
1 verbose cli 'd:\nvm\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'start'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]prestart: [email protected]
6 info lifecycle [email protected]start: [email protected]
7 verbose lifecycle [email protected]start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]start: PATH: D:\nvm\v14.17.3\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\work\workspace\IceProjects\empm-frontend\node_modules.bin;C:\Programs\Python\Python37\Scripts;C:\Programs\Python\Python37;C:\Users\N.Liu.jdks\jdk-17\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Tomcat\apache-tomcat-8.0.47\bin;C:\WINDOWS\System32\OpenSSH;C:\maven\apache-maven-3.3.9\bin;C:\Program Files\dotnet;C:\Program Files (x86)\dotnet;C:\Program Files (x86)\Webex\Webex\Applications;C:\work\apache-maven-3.8.1\bin;d:\Program Files\Git\cmd;D:\Program Files\Amazon\AWSCLIV2;C:\Program Files\Docker\Docker\resources\bin;C:\ProgramData\DockerDesktop\version-bin;D:\Program Files\Amazon\AWSSAMCLI\bin;D:\nvm;d:\nvm\nodejs;D:\Program Files (x86)\Yarn\bin;C:\Program Files (x86)\OpenSSL-Win32\bin;D:\Android\Sdk\platform-tools;C:\Users\N.Liu\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Bandizip;D:\Program Files\Microsoft VS Code\bin;C:\Users\N.Liu\AppData\Local\GitHubDesktop\bin;D:\Program Files\Fiddler
9 verbose lifecycle [email protected]start: CWD: C:\work\workspace\IceProjects\empm-frontend
10 silly lifecycle [email protected]start: Args: [ '/d /s /c', 'icejs start' ]
11 silly lifecycle [email protected]start: Returned: code: 1 signal: null
12 info lifecycle [email protected]start: Failed to exec start script
13 verbose stack Error: [email protected] start: icejs start
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (D:\nvm\v14.17.3\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:375:28)
13 verbose stack at ChildProcess. (D:\nvm\v14.17.3\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:375:28)
13 verbose stack at maybeClose (internal/child_process.js:1055:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\work\workspace\IceProjects\empm-frontend
16 verbose Windows_NT 10.0.19042
17 verbose argv "d:\nvm\nodejs\node.exe" "d:\nvm\nodejs\node_modules\npm\bin\npm-cli.js" "start"
18 verbose node v14.17.3
19 verbose npm v6.14.13
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] start: icejs start
22 error Exit status 1
23 error Failed at the [email protected] start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]ndows_NT 10.0.19042
17 verbose argv "d:\nvm\nodejs\node.exe" "d:\nvm\nodejs\node_modules\npm\bin\npm-cli.js" "start"
18 verbose node v14.17.3
19 verbose npm v6.14.13
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] start: icejs start
22 error Exit status 1
23 error Failed at the [email protected] start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

scaffold-lite-js 模板 install 时没有安装 react-router 依赖

RT

手动安装 react-router 后才可正常启动该模板
ice verison: 1.18.3
yarn version: 1.22.10

菜单栏底部出现滚动条

页面选中的时候会出现选中效果，右边的竖线偏移了1px。
right:-1px;
此代码导致底部出现滚动条，建议改为1px的竖线，可用边框。或者外部超出隐藏也可以。
补充：貌似只有win上会有滚动条

问题

PRO 模板依赖 ResponsiveGrid 栅格布局，但是 ResponsiveGrid 使用了 display: grid 导致无法在 IE 上使用

预期

希望提供 PRO 模板对 IE11 的支持

build-plugin-fusion这个插件是不是都不生效了

刚下的默认工程
如图所示，配置了一点作用都没

Could not resolve "../node_modules/fmin/index.js

使用@alifd/fusion-design-pro创建模板项目
yarn start
报错

ERR! Build failed with 2 errors: node_modules/venn.js/src/diagram.js:6:25: error: Could not resolve "../node_modules/fmin/index.js" node_modules/venn.js/src/layout.js:2:20: error: Could not resolve "../node_modules/fmin/index.js"

Tag的Group在重绘时无法删除老的数据

selectedAccounts是个数组，在selectedAccounts改变时Group会重新绘制，但是在重绘时，上一次列表中的数据还保留在界面。期望是在Group重绘时，只显示这一次selectedAccounts中的数据。
是我的用法不对吗？

  const [selectedAccounts, setSelectedAccounts] = React.useState<DataSource[]>(dataSource);
  const onSelectedAccountClose = (record: DataSource) => {
    const filteredArray = selectedAccounts.filter((a) => a.contentItemId != record.contentItemId);
    setSelectedAccounts(filteredArray);
    return true;
  };

<Group>
            {selectedAccounts.map((a) => (
              <Closeable key={a.login} onClose={() => onSelectedAccountClose(a)}>
                {`${a.login}`}
              </Closeable>
            ))}
</Group>

有没有接口、路由等配置文件快速生成的方案

大家好，有没有接口、路由等配置文件快速生成的最佳实践方案。

我看到可以通过飞冰在工程中某个文件夹下快速生成页面相关的主体逻辑。可是一个功能的完成除了这些主体逻辑以外，还包括很多，比如请求接口，路由的配置或页面在菜单中的入口等等，这个代码会分散在工程的各个文件夹中，所以我现在无法在物料的模板中完成。

以“请求接口”为例，我看到官网物料的数据请求是将接口逻辑直接写在组件中（如代码）。我希望能将接口维护在单独的文件中，并且这些代码能快速生成。以场景列表物料为例，场景列表的接口希望维护在如下文件中：

// 文件 src/api/scene.js
import request from './base.js';
export function getSceneList(params) {
  return request.get('/api/scene/list', { params });
}

Slider在重绘时无法删除老的数据

如下图所示：slider里面的item更新后貌似不能删除老的数据？
generateCardWithSlider() {
const tabs = this.props.tabs;
const tabTitles = this.props.tabTitles;
const isValid = Object.keys(tabs).length > 0;
const bollonTarget = ;
this.tabKeys = Object.keys(tabTitles);
const cardLen = this.tabKeys.length;

return (
  <section>
    {isValid && (
      <Slider
        slidesToShow={this.props.slider && cardLen > 6 ? 6 : cardLen}
        slidesToScroll={6}
        dots={false}
        infinite={false}
        draggable={false}
      >
        {this.tabKeys.map((key, index) => {
          const activeFlag = index === this.state.index;
          return (
            <ul
              className={`tab-items-ul ${
                activeFlag ? "active" : "in-active"
              }`}
              key={index}
            >
              <li
                data-key={key}
                className={activeFlag ? "active" : ""}
                onClick={this.tabClick.bind(this, index)}
              >
                {tabs[key] ? (
                  <React.Fragment>
                    <span className="name">
                      {tabTitles[key] === "商机转化率" ? (
                        <div>
                          <span>{tabTitles[key]}</span>
                          <Balloon
                            trigger={
                              <img
                                className='point'
                                src="https://img.alicdn.com/imgextra/i4/O1CN01Fi1cnQ1UV7ZK09is9_!!6000000002522-2-tps-28-28.png"
                              ></img>
                            }
                            closable={false}
                            align="t"
                          >
                            {$i18n.get({
                             id:'intl-mydata.init.index.Business_opportunity_conversion_rate'
                            })}
                          </Balloon>
                        </div>
                      ) : (
                        <span>{tabTitles[key]}</span>
                      )}
                    </span>
                    {this.props.terminalTypeForSlide !== "total" &&
                    (key === "ordCnt" || key === "ordAmt") ? (
                      <div className="slide-no-data" key={index}>
                        {$i18n.get({
                          id:
                            "intl-mydata.common.target-analysis.terminal.nosupport",
                          dm: "不支持区分终端"
                        })}
                        <Balloon
                          trigger={bollonTarget}
                          triggerType="hover"
                          align="t"
                        >
                          {$i18n.get({
                            id:
                              "intl-mydata.common.target-analysis.terminal.nosupporttip",
                            dm: "该指标目前不支持区分终端"
                          })}
                        </Balloon>
                      </div>
                    ) : (
                      <React.Fragment>
                        <span className="value">
                          {~key.indexOf("Rate")
                            ? `${(tabs[key].value * 100).toFixed(2)}%`
                            : Number(tabs[key].value).toLocaleString()}
                        </span>
                        <span className="compare">
                          <span className="compare-type">
                            {`${this.props.unit}:`}
                          </span>
                          {tabs[key].hasOwnProperty("cycleCrc") && (
                            <span
                              className={`compare-value ${
                                !Number(tabs[key].cycleCrc)
                                  ? "color-normal"
                                  : tabs[key].cycleCrc < 0
                                  ? "color-down"
                                  : "color-up"
                              } ${
                                this.props.isNewVersion
                                  ? "isNewVersion"
                                  : ""
                              }`}
                            >
                              {this.ratioConvert(tabs[key].cycleCrc)}
                            </span>
                          )}
                          {tabs[key] &&
                            tabs[key].hasOwnProperty("wowDiff") && (
                              <span
                                className={
                                  "compare-value " +
                                  (!Number(tabs[key].wowDiff)
                                    ? "color-normal"
                                    : tabs[key].wowDiff < 0
                                    ? "color-down"
                                    : "color-up")
                                }
                              >
                                {this.ratioConvert(tabs[key].wowDiff)}
                              </span>
                            )}
                          {tabs[key] &&
                            tabs[key].hasOwnProperty("momDiff") && (
                              <span
                                className={
                                  "compare-value " +
                                  (!Number(tabs[key].momDiff)
                                    ? "color-normal"
                                    : tabs[key].momDiff < 0
                                    ? "color-down"
                                    : "color-up")
                                }
                              >
                                {this.ratioConvert(tabs[key].momDiff)}
                              </span>
                            )}
                        </span>
                      </React.Fragment>
                    )}
                  </React.Fragment>
                ) : (
                  <React.Fragment>
                    <span className="name">
                      <span>{tabTitles[key]}</span>
                    </span>
                    <div className="slide-no-data" key={index}>
                      {$i18n.get({
                        id:
                          "intl-mydata.common.target-analysis.slidepanel.ZoneClassificationIsNotSupported",
                        dm: "不支持区分类目"
                      })}
                      <Balloon
                        trigger={bollonTarget}
                        triggerType="hover"
                        align="t"
                      >
                        {$i18n.get({
                          id:
                            "intl-mydata.common.target-analysis.slidepanel.ThisIndicatorDoesNotCurrently",
                          dm: "该指标目前不支持区分类目"
                        })}
                      </Balloon>
                    </div>
                  </React.Fragment>
                )}
              </li>
            </ul>
          );
        })}
      </Slider>
    )}
  </section>
);

}