3.0.0 • Published 4 years ago

m-feedback v3.0.0

Weekly downloads
6
License
ISC
Repository
-
Last release
4 years ago

m-feedback

m-feedback 是融合云提供的一个反馈工具。目的，是为各个服务（公司内部）提供用户反馈搜集功能，快速获取用户反馈，并通过 jira 生成工单进行跟进。

使用示例

说明：

  • \$ProjectPath: 项目（需要使用 m-feedback 组件）路径。

通用方式

请注意示例中的引用和 API 调用顺序，否则组件加载会存在失败。

  • 获取组件

    引用地址：

    https://cdn.jsdelivr.net/npm/m-feedback/umd/mFeedback.js

    https://cdn.jsdelivr.net/npm/m-feedback/umd/css/mFeedback.css

  • 引用组件

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/m-feedback/umd/css/mFeedback.css"
    />
    <title>Document</title>
  </head>
  <body>
    <!-- 该 div 标签的 id 用于组件初始化 -->
    <div id="containerId"></div>

    <script src="https://cdn.jsdelivr.net/npm/m-feedback/umd/mFeedback.js"></script>
    <!-- 组件初始化（必须保证在 div#containerId 和引用 mFeedback.js 的之后，否则初始化会报错） -->
    <script>
      Feedback({
        autoFixed: true,
        containerId: "containerId", // 该 containerId 需与 div 标签中的 id 保持一致。
        username: "wangkaiyuan",
        platform_uuid: "uuid"
      });
    </script>
  </body>
</html>

React 组件

版本要求： React v16.x。

  • 获取组件

    cd path/project/
npm config set @mi:registry http://registry.npm.pt.mi.com
npm install @mi/m-feedback -S

  • 引用组件

    import Feedback from "@mi/m-feedback/dist/mFeedback";

class YourComponent extends Component {
  render() {
    return (
      <div>
        <Feedback
          username="username"
          platform_uuid="${platform_uuid}"
          autoFixed
        />
      </div>
    );
  }
}

使用说明

参数说明

NameNeededtypeDefault ValueDescription
usernameNostringN/A当前用户的小米邮箱前缀。
user_idNonumberN/A当前用户的小米账号ID。 (适用于外网环境无法获得用户小米邮箱前缀情况, 组件内部优先使用username, username为空则使用user_id)
platform_uuidYesstringN/A接入平台（准备使用 Feedback 组件）的唯一身份，需申请。联系人： daichi@xiaomi.com、zhangpeng@xiaomi.com
autoFixedNobooleanfalse是否使用默认定位。
rememberPositionNobooleanfalse是否记住反馈图标拖动后的位置。
guideNobooleanfalse是否开启新手引导
extranetNobooleanfalse是否外网环境 （外网环境使用 Feedback 组件需要设置为 true）
attachmentsNoFile[] \| (() => File[]) \| (() => Promise<File[]>)[]反馈附件 （用户日志文件, 或其他需要记录到反馈的文件）
stagingNobooleanfalse反馈组件是否使用测试环境接口
themeNostring'daybreakBlue' 拂晓蓝：#1890FF主题色 取值: daybreakBlue sunsetOrange calendulaGold goldenPurple polarGreen cyan magenta miOrange geekBlue 表现参考下方色卡
baseConfigNostring[]['service_id', 'page_link', 'fb_type', 'title', 'content', 'global_screenshot', 'user_screenshots']基础表单项配置
extendConfigNoobjectN/A自定义表单项配置。

extendConfig 示例

目前支持的表单控件为： Input、TextArea、Checkbox、CheckboxGroup、Radio、Select，示例如下。

const extendConfig = [
  {
    id: "id1", // 全局唯一的表单控件id，在上传数据时，会以此id为key，用户输入为value，构成键值对上传。
    label: "输入框", // 显示在界面上的表单项的名字
    type: "Input", // 表单项类型
    config: {
      // 表单项配置
      required: true, // 是否必填
      reg: /^1.*0$/, // 用于校验的正则
      message: "请填写内容", // 填写出错后的提示文字
      props: {
        // 其他想要传递给表单项的参数，目前仅支持placeholder[string]、style[object]、options[array]
        placeholder: "这是一个扩展输入框"
      }
    }
  },
  {
    id: "id2",
    label: "文本框",
    type: "TextArea",
    config: {
      required: true,
      message: "请填写内容",
      props: {
        placeholder: "这是一个扩展输入框"
      }
    }
  },
  {
    id: "id3",
    label: "Select",
    type: "Select",
    config: {
      required: true,
      message: "请填写内容",
      props: {
        // options用于Radio、Select与CheckboxGroup。
        // 其中label为用户在界面中看到的选项的名称，value为该label对应的字段名。
        options: [
          {
            label: "服务11",
            value: "1"
          },
          {
            label: "服务22",
            value: "2"
          }
        ]
      }
    }
  },
  {
    id: "id4",
    label: "radio",
    type: "Radio",
    config: {
      required: true,
      message: "请填写内容",
      props: {
        placeholder: "这是一个扩展输入框",
        options: [
          {
            value: "1",
            label: "1"
          },
          {
            value: "2",
            label: "2"
          }
        ]
      }
    }
  },
  {
    id: "id5",
    label: "group",
    type: "CheckboxGroup",
    config: {
      required: true,
      message: "请填写内容",
      props: {
        placeholder: "这是一个扩展输入框",
        options: [
          {
            value: "1",
            label: "1"
          },
          {
            value: "2",
            label: "2"
          }
        ]
      }
    }
  },
  {
    id: "id6",
    label: "checkbox",
    type: "Checkbox",
    config: {
      required: true,
      message: "请填写内容"
    }
  }
];

主题色

我们提供了几个可选择的主题色，你可以通过修改theme属性来改变主题色。 默认值为 拂晓蓝：#1890FF color

功能弹窗默认开启

通过在URL中携带特定的字符串，可在进入页面时默认开启对应的功能弹窗。

  • mfusion.feedback 反馈
  • mfusion.online-support 在线支持
  • mfusion.dianping 提交点评

开发

npm start

测试

在 fusion-ui 项目中，测试 m-feedback 的可用性。

cd m-feedback
npm link
cd fusion-ui
npm link @mi/m-feedback

部署到独立测试环境

先设置独立测试环境的权限,具体详情按照链接来操作测试环境权限,然后打包部署,dist 包的 example.html 需改为 index.html。

#首次构建部署需要登录docker镜像仓库,登录过一次，之后不用
#用户名密码可以在https://cloud.d.xiaomi.net/products/docker/#/userInfo查看
docker login -u username -p password cr.d.xiaomi.net
./build.sh                               //构建docker镜像,会生成一个时间日期的tag
kubectl edit deployment                  //更改deployment的docker镜像tag,更改完毕就完成了独立测试环境的部署

发布

申请权限

cd m-feedback/
npm owner ls [<@scope>/]<pkg>   //列出包的所有者
npm owner add <user> [<@scope>/]<pkg>  // 登陆owner用户，将用户添加至owner赋权

发布 npm 包

cd m-feedback/
# 进入公司私有源
npm install -g nrm
nrm add mi http://registry.npm.pt.mi.com
nrm use mi
# 发布
npm publish
@infinitebrahmanuniverse/nolb-m-@everything-registry/sub-chunk-2116
3.0.0

4 years ago

2.12.13

4 years ago

2.12.12

4 years ago

2.12.13-staging-fdd503a

4 years ago

2.12.12-staging-be2ca87

4 years ago

2.12.11

4 years ago

2.12.10

4 years ago

2.12.9

4 years ago

2.12.8

4 years ago

2.12.7

4 years ago

2.12.6

4 years ago

2.12.5

4 years ago

2.12.4

4 years ago

2.12.3

4 years ago

2.12.2

4 years ago