Ant Design 使用

Ant Design 定制示例

介绍

Ant Design (Pro) 相关文档：

• https://ant.design/index-cn
  • https://umijs.org/
  • https://dvajs.com/
  • Redux一个用于应用程序状态管理的开源JavaScript库 https://cn.redux.js.org/tutorials/essentials/part-1-overview-concepts/
• https://pro.ant.design/zh-CN/ 开箱即用的中台前端/设计解决方案
  • 代码：https://github.com/ant-design/ant-design-pro
  • 在线示例：https://preview.pro.ant.design/ 可以定制 src/defaultSettings.js （主要是后台样式）
• https://procomponents.ant.design/
• https://antv.vision/ 可视化组件

创建项目

Ant Design Pro 生成项目模板，参考 https://beta-pro.ant.design/docs

$ npm i @ant-design/pro-cli -g
$ pro create x-ui
$ cd x-ui
$ tyarn
$ tyarn start
$ tyarn start:dev

目录结构

• 参考：https://pro.ant.design/zh-CN/docs/folder/
• 配置参考 https://v3.umijs.org/zh-CN/config
• src/pages/document.ejs 配置加载页，包括对应的 logo 等
• src/app.tsx getInitialState 做权限初始化，如认证等信息
• src/models 全局初始化数据，应用加载前初始化用户、权限、菜单等数据，其它地方使用 const { initialState, setInitialState } = useModel('@@initialState');
• 页面组件的定制，需要在 routes.ts 配置，参考 plugin-layout

相关扩展

• @umijs/plugin-access 管理权限
• 中间件 & 拦截器
• @umijs/plugin-request

定制

• 国际化删除 src/locales 对应的文件即可精简

Mock

• Mock 示例

开发

基于 OpenAPI 生成前端调用代码（参考）：

• 配置 config/config.ts

import { join } from 'path';

export default defineConfig({
 ...
  openAPI: [
     {
       requestLibPath: "import { request } from 'umi'",
      // 或者使用在线的版本
       // schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json"
       schemaPath: join(__dirname, 'oneapi.json'),
      mock: false,  // 为 true 会在 mock 目录生成 mock 文件
  projectName: 'swagger',
    },
...

• 生成services代码到 src/services/目录下

npm openapi

生成openapi文档到 src/services/swagger 目录，然后就可以在页面中调用

自定义配置

• 添加配置 config/config.<env>.ts

export default defineConfig({
  define: {
    APP_URL: 'http://dev.xiexianbin.cn:8000', // 当前SaaS发布的URL地址
  },
  ...

• src/typings.d.ts 中声明定义：

declare const APP_URL: string;

• tsx中使用 ${APP_URL}

css/less

• CSS Modules 的基本原理很简单，就是对每个类名（非 :global 声明的）按照一定规则进行转换，保证它的唯一性

jsx

• Jsx 文件注释

{/* jsx 单行注释 */}

{/*
    多行注释
*/}

发布

npm run build

F&Q

CORS 问题

需求是实现 http://dev.xiexianbin.cn:8001 调用 http://dev.xiexianbin.cn:8888 时，将 .xiexianbin.cn 的 cookie 带过去

• 浏览器调用错误日志

Access to fetch at 'http://dev.xiexianbin.cn:8888/api/v1/user' from origin 'http://dev.xiexianbin.cn:8001' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

• ts 调用示例

export async function user(options?: { [key: string]: any }) {
  return request<{
    data: API.User;
  }>('/api/v1/user', {
    method: 'GET',
    credentials: 'include',  // 添加改行实现将 .xiexianbin.cn 的 cookie 带过去
    ...(options || {}),
  });
}

• gin Demo实现，参考

    // origin := c.Request.Header.Get("Origin")
    // c.Header("Access-Control-Allow-Origin", origin)
    c.Writer.Header().Set("Access-Control-Allow-Origin", c.Request.Header.Get("Origin") // 这一行是核心
    c.Writer.Header().Set("Access-Control-Max-Age", "86400")
    c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, UPDATE")
    c.Writer.Header().Set("Access-Control-Allow-Headers", "Access-Control-Allow-Origin, Origin, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
    c.Writer.Header().Set("Access-Control-Expose-Headers", "Content-Length")
    c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")

cors 示例