这是一次KendoReact Free Components Challenge挑战的投稿。

• 我做的项目
• 演示
• 视频
• KendoReact 体验
• 免费使用的 KendoReact 组件
• 想要让人印象深刻
• AI 集成的图片

产品过期追踪工具AI是一款基于React构建的应用程序，帮助用户追踪产品的过期日期。它可以广泛应用于超市、药店和商场，让用户能实时查看产品的详细信息。产品在货架上的过期问题越来越突出，因此强烈推荐使用此应用程序。这款过期追踪AI是一款解决实际问题的真实应用，它是基于React构建的，并包含至少10个免费组件（如KendoReact）。该项目完全依照此次挑战的时间框架从零开始搭建。

项目集成了AI，可以自动总结库存中产品的详细信息，并提供防止产品过期的具体操作建议。此外，AI还能自动扫描产品信息并添加到库存，无需填写表格。

演示版

该应用程序的前端使用React构建，并包含10个或更多KendoReact免费组件，我将在下面列出。

公共网址: 产品过期追踪AI工具
Github项目: Github

请看下面的图片 示例图

视频DEMO

(视频教程)

KendoReact 体验

KendoReact Free Components 是一个改变游戏规则的工具，用于使用 React 设计和开发商业应用程序。它包含50多个免费组件，我在该项目中使用了以下列出的组件。由于其出色的UI以及我在项目中的广泛使用，它极大地改善了我的用户体验。用少量代码就能完成很多工作。我只需要选择组件并调整属性以适应项目。

KendoReact 免费组件使用

1 Kendo标签和输入组件

    import { Label } from "@progress/kendo-react-labels";
    import { Input } from "@progress/kendo-react-inputs";

    <Label className="font-medium" editorId="firstName">
     名字
    </Label>
    <Input
      id="firstName"
      disabled
      name="firstName"
      type="text"
      value={firstName}
      onChange={}
    />

进入全屏，退出全屏

如图所示，这是一张图片。

2 Kendo日期选择器控件

    import { DatePicker } from "@progress/kendo-react-dateinputs";
    <DatePicker
      className=""
      name="dob"
      value={dob}
      onChange={}
    />

进入全屏 退出全屏

3 Kendo下拉選單

    import { DropDownList } from "@progress/kendo-react-dropdowns";
    <DropDownList
      style={{
      width: "390px",
     }}
     data={性别}
     value={性别值={gender}}
     defaultValue="男"
     onChange={}
     name="性别"
    />

进入全屏。退出全屏。

4 通知：剑道

    import { Notification } from "@progress/kendo-react-notification";
    <Notification closable={true} type={{ style: "error", icon: true }}>
     {error}
    </Notification>

点击全屏 退出全屏

这是一张图片，点击可以查看更大的版本。

5 工具栏，分隔符，按钮 (Button) 和 按钮组 (Button Group)

    import {
      Toolbar,
      ToolbarSeparator,
      Button,
      ButtonGroup,
    } from "@progress/kendo-react-buttons";
    /* 这里是一个工具栏，包含一个按钮组，按钮组中有一个按钮用于加粗文本 */
    <Toolbar>
      <ButtonGroup>
        <Button
          className="k-toolbar-button"
          svgIcon={boldIcon}
          title="加粗"
          onClick={() => onFormat("bold")}
          /* 单击此按钮将触发 onFormat 函数，参数为 "bold"，用于执行加粗操作 */
        />
    </ButtonGroup>
    </Toolbar>

切换到全屏 退出全屏

6 Kendo Grid，列

    import { Grid, GridColumn as Column } from "@progress/kendo-react-grid";
    <Grid>
       <Column field="id" title="ID" filterable={false} width="40px" />
       <Column field="productName" title="产品名字" width="240px" />
    </Grid>

进入全屏模式，退出全屏

7 Kendo对话框，对话操作栏

    import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";
    <Dialog title={"请确认, "} onClose={toggleDialog}>
      <p style={{ margin: "25px", textAlign: "center" }}>
        关于 {selectedProduct.productName} 的操作
      </p>
      <DialogActionsBar>
        <Button themeColor="info">
         修改
        </Button>
      </DialogActionsBar>
    </Dialog>

全屏模式 退出全屏

这是一张图片。

8 剑道复选框（CheckBox）

    import { Checkbox } from "@progress/kendo-react-inputs";
    // 此代码段演示了如何使用Checkbox组件的基本属性。
    <Checkbox
        type="checkbox"
        id={}
        name={}
        defaultChecked={}
        onChange={}
        label={}
    />

进入全屏 退出全屏

9 剑卡，卡名，卡体

    import { Card, CardBody, CardTitle } from "@progress/kendo-react-layout";
    <Card style={{ width: 300 }} type="info">
      <CardBody>
        <CardTitle>总产品</CardTitle>
        <p>系统内的产品总数。</p>
      </CardBody>
    </Card>

进入全屏 退出全屏

10 kendō 进度条

    import { ProgressBar } from "@progress/kendo-react-progressbars"; // 引入进度条组件 from Kendo UI React库
    <ProgressBar value={productLength} /> // 显示产品长度的进度条

全屏模式 退出全屏

11 Kendo浮动按钮

导入 { FloatingActionButton } from "@progress/kendo-react-buttons";
/* 
  FloatingActionButton
 Icon根据open的值显示不同的图标：
open为true时显示cancelIcon，为false时显示homeIcon
items为导航链接
item为自定义项
positionMode设置为绝对定位
modal设置为true，表示弹出模式
onOpen和onClose分别绑定打开和关闭的处理函数
*/
<FloatingActionButton
   svgIcon={open ? cancelIcon : homeIcon}
   items={navLinks}
   item={CustomItem}
   positionMode="absolute"
   modal={true}
   onOpen={handleOpen}
   onClose={handleClose}
/>

全屏模式，退出全屏。

来看看这张图：

想给他人留下深刻印象

我将AI技术与OpenAI进行了集成。

• 在这里，用户可以向AI询问与库存/数据库中的产品相关的问题，例如查询所有产品的过期日期，汇总即将过期的产品，采取行动步骤，并根据产品数量预测在下次进货时哪些产品应该增加库存或减少库存。

• 使用相机扫描产品详情，AI 会根据图像信息推断产品详情。此外，还增加了一个 Kendo 按钮，当用户觉得 AI 的识别结果满意时，产品就会被自动保存到数据库中。这相当于一个快捷方式，用户无需单独填写繁琐的“添加产品”表单。

AI整合示例图

看看这张有趣的图片。(图片描述)