alibaba-fusion / materials Goto Github PK

View Code? Open in Web Editor NEW

238.0 238.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%

blocks codesnippets react react-components scaffold

materials's People

Contributors

Stargazers

Watchers

Forkers

tao518 455745367 gaojoe19 wangkele xurenjie1996 wangnan1210 chantel186 zhangorrin panchanghe 1012511661 zjp313497775 yanchang0210 chloehm jxr0822 nianxiongdi pyxhr hehaowen wasd3044 funie2017 zzhengqq skysuka jimmybai buguoni jerrywoo gjl001 tomicat nuochong pinucao lvjiankai zgying yangjunzhou861012 eric19062 oldfu joring-n wanghuining123 raohuiyong shangyueyue tiangliu jackwiy nvziyiqiu slowwu vic1994 yinxiaoli2007 zhuyongjun18 frontendmasterlh zhouao linsirui wjy18666 bigyellowtoi yk81708090 northdrift demystify2014 taolin666 jangocheng wujian5130991 crayon957 duanxy123 hanyyy5 we452366 mengqingjunzz pdap seven-scars dyyliao123 wumingliang99 xujiahu4 ylfeng250 yetuxx scofieldwyq wanwj7575 sunbr denghanling suixinlei faith0811 sql506255992 15971912317 wuyusong1020 tao1991123 czz362100 haaling tangwei88 jyil jamiescou sml782 missshengan luhc228 proflier reevses googlezhang jietinghuang lineargenius raphielainsworth candy0509 sspku-yqliu yizuocheng penwa waerdeng5 jitaguizhao cgyaaa 845909391 qq-zhangqi

materials's Issues

头部导航如何使用？

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

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

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

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

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

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

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

期望在Design Pro的页面上，能看到当前页面所使用的区块

例如想使用如下的区块，区块实际对应的npm包名为@alifd/fusion-table-list 但是在页面上找不到对应的入口

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

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

盼复~
🚶 🚶‍♀

菜单栏底部出现滚动条

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

BizAnchor中offsetTop没有用处

本打算使用该字段达到scroll偏移的目的，搜了下代码，发现只是定义了一下，并没有被使用？？
而且也没有暴露onScroll 和 onItemClick ,真是尴了个尬。

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

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

[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>

代替

现在的图片糊的很严重

Fusion Design Pro(TS)模板start失败

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

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

RT

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

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>

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

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

官网上各组件、模块、模板展示页面的查看代码跳转链接为github的404页面

问题描述

【非技术性问题】官网各组件、模块、模板等页面的查看代码按钮跳转到github的404页面，另外有些查看代码的按钮指向url为空。

错误信息

如图，点击查看代码按钮跳转到github的404页面

解决建议

经对比，是路径缺少react-materials这一层级。
e.g
错误链接：https://github.com/alibaba-fusion/materials/tree/master/scaffolds/next-single-page
正确链接：https://github.com/alibaba-fusion/materials/tree/master/react-materials/scaffolds/next-single-page
对于空白链接，建议补充完善！
感谢开源分享！
以上，非技术性问题，如非必要，请忽略。

物料启动不起来

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

如下图所示：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>
);

}

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"

PRO 模板支持 IE11

问题

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

预期

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