Ice飞冰《配置总结》

龙弘盛

2023-12-01

根据公司项目使用的配置对应着官网做一个总结，下面复制部分公司项目用作学习及参考

应用入口：app.tsx中appConfig中app

app: {
    rootId: 'ice-container',
    addProvider: ({
        children
    }) => ( <LocaleProvider locale = {locale} > {children} < /LocaleProvider>),

    getInitialData: async () => {
        try {
            const data = await authService.getUserPermission()
            return {
                auth: data
            }
        } catch (e) {
            return {auth: {}}
        }
    },
},

rootId: ‘ice-container’，根节点配置
getInitialData: async () => {}，权限管理配置

工程配置：build.json、tscofig.json、package.json

"publicPath": "./",
"plugins": [
    [
        "build-plugin-fusion",
        {
            "themePackage": [{
                    "name": "@alifd/theme-1"
                },
                {
                    "name": "@alifd/theme-2",
                    "default": true
                }
            ]
        }
    ],
    [
        "build-plugin-moment-locales",
        {
            "locales": [
                "zh-cn"
            ]
        }
    ],
    "build-plugin-fusion-material",
    "build-plugin-ice-auth"
]

“publicPath”: “./”，公共路径配置
plugins，配置了fusion主题包

路由配置：src/routes.ts、app.tsx中appConfig中router

import React from 'react';
import BasicLayout from '@/layouts/BasicLayout';
import UserLayout from '@/layouts/UserLayout';
import { lazy } from 'ice'

const FeedbackServerError = React.lazy(() => import('@/pages/Feedback/FeedbackServerError'));
const FeedbackNotFound = React.lazy(() => import('@/pages/Feedback/FeedbackServerError')) ;
const FeedbackForbidden = React.lazy(() => import('@/pages/Feedback/FeedbackForbidden'));
const SystemView = React.lazy(() => import('@/pages/IndexPage/SystemIndex'));

const routerConfig = [
  {
    path: '/user',
    component: UserLayout,
    children: [
      {
        path: '/login',
        component: Login,
      },
      {
        path: '/',
        redirect: '/user/login',
      },
    ],
  },
  {
    path: '/',
    component: BasicLayout,
    children: [
      {
        path: '/index/dashborad',
        component: SystemView,
      },
      {
        path: '/index/tenantview',
        component: TenantView,
      },
    ],
  },
];
export default routerConfig;

import { lazy } from ‘ice’、懒加载
公司项目使用的hash路由，所以app.tsx里没有配置，app.jsx配置详细请看：飞冰路由

路由跳转：

官网demo，通常使用 Link 组件或者 history API 进行路由的跳转：

import { Link, useHistory } from 'ice';

function Home() {
  const history = useHistory();
  return (
    <>
      <Link to="/about">去 about 页面</Link>
      <span
        onClick={() => {
          history.push('/about');
        }}
      >
        去 about 页面
      </span>
    </>
  );
}

项目demo

import { Route, Link, Switch, HashRouter, Redirect } from 'react-router-dom';
<HashRouter>
    <Nav className="basic-nav" direction="hoz" type="normal" onSelect={changeNav} triggerType="hover" style={{ marginBottom: '15px' }} selectedKeys={projectType}>
        {getNavMenuItems(data)}
    </Nav>
    <Switch>
    <Route exact path="/system/applacation/table/:projecttype" component={ApplacationTable} />
    <Route exact path="/system/applacation/menu/:projectid" component={AllocationMenu} />
    <Redirect from="/system/applacation" to="/system/applacation/table/SYSTEM_PROJECT" exact />
    </Switch>
</HashRouter>

编写组件：

使用函数式组件，使用可视化物料
配合props和ahooks

样式方案：

项目有用。global.scss配置全局样式（不用自己引入，框架默认引入），局部用CSS module（和react原生一样）项目demo部分：

// 引入默认全局样式
@import '@alifd/next/reset.scss';

body {
    -webkit-font-smoothing: antialiased;
}

.next-breadcrumb {
    margin-top: 15px;
    margin-left: 34px;
}

.jifrog-filter-table {
    table {
        table-layout: fixed;
        width: 100%;
    }

    table tr td {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -moz-text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
    }
}

可以看看前面css专栏css初始化文章

数据请求：

公司项目配置了个globalServices.tsx文件，一部分请求如下：

app.tsx里还需要配置request（如配置token等，身份失效等），具体去官网查看官网详细配置

import { request } from 'ice';

export default {
    async getUserTree() {
        return await request({
            url: 'url',
            method: 'GET',
        })
    },
    async queryRoleMenuById(roleId: any) {
        return await request(`url${roleId}`)
    }
}

状态管理

项目中没有用到，后期跟进
状态管理

页面配置

项目用到了权限配置

import React from 'react'
import AreaTable from './components'
const Area = () => {
  return (
    <AreaTable />
  )
}
Area.pageConfig = {
  auth: ['p.platform.system.area']
}

export default Area

应该是配合app.tsx的appConfig中的auth配置相对应，做权限管理

菜单配置

项目中没有用到，但是要使用Pro模板布局，需要配置
菜单配置文件约定在 src/layouts/BasicLayout/menuConfig.ts中。headerMenuConfig和asideMenuConfig

日志打印

项目中没有用到，但是功能挺好，可以配置开发环境有打印东西，生产环境不打印
后期跟进[查看配置](日志打印 | 飞冰 (ice.work))

环境配置

项目中有用到

 "scripts": {
    "start": "icejs start",
    "build:test": "icejs build",
    "build:dev": "icejs build --mode dev",
    "build:prod": "icejs build --mode prod",
    "lint": "npm run eslint && npm run stylelint",
    "eslint": "eslint --cache --ext .js,.jsx ./",
    "stylelint": "stylelint ./**/*.scss"
  },

然后和app.tsx同级目录下config.ts配置，项目中注释掉了这一块，有待研究
后期跟进查看配置