iCoding的博客

工作周报

2025年9月19日 · 阅读需 1 分钟

Quany

软件工程师

本周工作

优化页面交互功能；
修复问题；
测试功能；
完成详情功能；

下周工作

设置任务重试实例

token 时效提示：系统繁忙，请稍候再试；
绑定自愈工具打开窗口，把红框已选的选上；
JSON 控件默认需要格式化下这个json;
换成开关按钮；
保存按钮放到 1112 这个文本域的下面；

微信公众号

工作周报

2025年9月12日 · 阅读需 1 分钟

Quany

软件工程师

本周工作

优化页面交互功能：动态表单的样式布局，分栏列调整；用户输入优化；
联调接口，进度（100%）：
- token 接入；
- 策略动作管理;动态表单设计；
- 动作表单；
- 系统管理;
表单数据校验，进度（100%）:
- 策略动作管理;
- 动态表单设计-动态数据效验；

下周工作

优化页面交互功能；
跟踪测试证书问题；
修复问题；
测试功能；
部署生产；
完成详情功能；

设置任务重试实例

token 时效提示：系统繁忙，请稍候再试；
绑定自愈工具打开窗口，把红框已选的选上；
JSON 控件默认需要格式化下这个json;
换成开关按钮；
保存按钮放到 1112 这个文本域的下面；

微信公众号

动态表单配置指南

2025年9月9日 · 阅读需 4 分钟

Quany

软件工程师

介绍

配合异常自愈动作策略管理，其中有四类动作固定，其余由动作表单动态配置，实现高度自由定义。

动作表单字段配置

前端实现组件： FormItem; 🉑参考：https://ant.design/components/form-cn#formitem

示例：

{
  "label": "测试", // 必填配置：名称
  "name": "test", // 必填配置：字段名
  "valueType": "string", // 必填配置：数据类型"string|boolean|int|nubmer|",
  "componentType": "input", // 必填配置：字段组件类型

  "placeholder": "提示语", // 可选配置：字段组件的提示语
  "defaultValue": "", // 可选配置：字段组件的默认值
  "maxLength": 1000, // 可选配置：字段组件的最大长度
  "fieldDesc": "测试描述", // 可选配置：字段组件的描述
  "hidden": false // 可选配置：字段组件是否隐藏
}

必填配置

 "label": "测试", // 必填配置：名称
  "name": "test", // 必填配置：字段名
  "valueType": "string", // 必填配置：数据类型"string|boolean|int|nubmer|",
  "componentType": "input", // 必填配置：字段组件类型

注意componentType可配置的字段组件类型有以下：

export type ItemTypePropsMap = {
  'image-code': OmitProps<ImageCodeProps>;
  'message-code': OmitProps<MessageCodeProps>;
  'input': OmitProps<InputProps & { options?: SelectProps['options'] }>; // 一般输入框
  'hidden': OmitProps<InputProps>; // 隐藏
  'number': OmitProps<InputNumberProps>; // 数字
  'textarea': OmitProps<TextAreaProps>; // 文本域，后端大致长度是 200
  'password': OmitProps<PasswordProps>; // 密码
  'mobile': OmitProps<InputProps>; // 手机号
  'email': OmitProps<InputProps>; // 邮箱
  'select': OmitProps<SelectProps>; // 下拉选择框
  'select-tree': OmitProps<TreeSelectProps & { options?: TreeSelectProps['treeData'] }>;
  'checkbox': OmitProps<CheckboxProps>;
  'checkbox-group': OmitProps<CheckboxGroupProps>;
  'radio': OmitProps<RadioProps>;
  'radio-button': OmitProps<RadioButtonProps & { options?: SelectProps['options'] }>;
  'radio-group': OmitProps<RadioGroupProps>;
  'switch': OmitProps<SwitchProps>;
  'date': OmitProps<DatePickerProps & DatePickerCommonProps>;
  'date-long': OmitProps<DatePickerLongProps & DatePickerCommonProps>;
  'week': OmitProps<DatePickerProps & DatePickerCommonProps>;
  'month': OmitProps<DatePickerProps & DatePickerCommonProps>;
  'quarter': OmitProps<DatePickerProps & DatePickerCommonProps>;
  'year': OmitProps<DatePickerProps & DatePickerCommonProps>;
  'date-range': OmitProps<RangePickerProps & RangePickerCommonProps>;
  'week-range': OmitProps<RangePickerProps & RangePickerCommonProps>;
  'month-range': OmitProps<RangePickerProps & RangePickerCommonProps>;
  'quarter-range': OmitProps<RangePickerProps & RangePickerCommonProps>;
  'year-range': OmitProps<RangePickerProps & RangePickerCommonProps>;
  'time': OmitProps<TimePickerProps>;
  'time-range': OmitProps<TimeRangePickerProps>;
  'date-time-range': OmitProps<RangePickerProps & RangePickerCommonProps>;
  'date-time': OmitProps<DatePickerProps & DatePickerCommonProps>;
  'cascader': OmitProps<CascaderProps>;
  'transfer': OmitProps<TransferProps<any>>;
};

通用配置

    placeholder: "提示语", // 可选配置：字段组件的提示语
    required: true, // 可选配置：字段是否必填
    maxLength?: number; // 可选配置：字段长度限制
    len?: number; // 可选配置：字段长度限制
    minLength?: number; // 可选配置：字段长度限制
    noSpace?: boolean; // 可选配置：是否有空隙
    pattern?: [RegExp, string?] | RegExp; // 可选配置：字段组件的校验正则
    span?: number | string; // 可选配置：字段组件的宽度
    col?: ColProps; // 可选配置：字段组件的列属性
    itemStyle?: CSSProperties; // 可选配置：字段组件的样式
    itemClassName?: string; // 可选配置：字段组件的类名
    itemProps?: any; // 可选配置：字段组件的属性
    className?: string; // 可选配置：字段组件的样式，支持 tws
    rootClassName?: string; // 可选配置：字段组件的根样式，支持 tws
    layout?: FormItemLayout; // 可选配置：字段组件的布局

组件类型配置（componentType）

select: 下拉选择框

    options: {
      label: string;
      value: number | string;
    }[];

number: 数字输入框

   max: number; // 可选配置：最大值
   min: number; // 可选配置：最小值

date: 日期选择框

  dateFormat?: string;    // 日期必须配置：日期格式

属性列举

    type?: Type;
    maxLength?: number;
    len?: number;
    minLength?: number;
    noSpace?: boolean;
    pattern?: [RegExp, string?] | RegExp;
    span?: number | string;
    col?: ColProps;
    itemStyle?: CSSProperties;
    itemClassName?: string;
    itemProps?: any;

    prefixCls?: string;
    noStyle?: boolean;
    style?: React.CSSProperties;
    className?: string;
    rootClassName?: string;
    children?: ChildrenType<Values>;
    id?: string;
    hasFeedback?: boolean | {
        icons: FeedbackIcons;
    };
    validateStatus?: ValidateStatus;
    required?: boolean;
    hidden?: boolean;
    initialValue?: any; // 可选配置：初始化值
    messageVariables?: Record<string, string>;
    tooltip?: LabelTooltipType;
    /** @deprecated No need anymore */
    fieldKey?: React.Key | React.Key[];
    layout?: FormItemLayout;

    labelCol?: ColProps;
    wrapperCol?: ColProps;
    extra?: React.ReactNode;
    status?: ValidateStatus;
    help?: React.ReactNode;
    fieldId?: string;
    label?: React.ReactNode;

微信公众号

工作周报

2025年9月5日 · 阅读需 3 分钟

Quany

软件工程师

本周工作

配置测试环境菜单,排序，纠正对应名称；
页面制作；
- 表单管理；
- 扩展表单管理；
联调接口，进度（80%）：
- 表单管理；
- 扩展表单管理；
- 自愈场景策略管理；
- 列表-自愈场景列表；生效范围；
表单数据校验，进度（80%）:
- 表单必填项校验；
- 表单数据类型校验；下周工作
联调接口（100%）：策略动作管理，系统管理
优化页面交互功能；
token 接入；
测试边界功能；

设置任务重试实例

最近一周，主要参与了运维管理平台的前端功能开发、问题修复和新功能集成工作，并开始了新项目的权限申请准备。

1. 生效范围管理功能优化

修复了生效范围保存时接口调用错误的问题，调整了后端接口调用方式。〔1〕〔2〕〔3〕
实现了生效范围无变化时的前端提示逻辑，避免不必要的后端请求。〔1〕〔4〕
解决了生效范围为空时的保存限制，后端放开了相关校验。〔5〕〔6〕〔7〕

2. 数据删除与显示逻辑增强

添加了显示隐藏数据开关（showHidden），控制逻辑删除数据的显示状态。〔8〕〔9〕〔10〕
优化了删除操作逻辑，开关打开时禁用删除功能，开关关闭时可正常删除。〔11〕〔12〕〔13〕
调整了删除后的提示和列表刷新机制，确保数据状态同步。〔14〕〔15〕〔16〕

3. 动态表单配置清理与优化

删除了动态表单中无用的字段（如enabled、isValidate、isEmpty、maxLength、fieldDesc），简化了配置。〔17〕〔18〕〔19〕
修复了动态表单中placeholder和required字段的显示问题，确保模板一致性。〔20〕〔21〕〔22〕

4. 用户界面调整与体验改进

优化了弹框大小和滚动条显示，增加了水平滚动条并调整了宽度。〔23〕〔24〕〔25〕
实现了详情展开默认显示和窗口内滚动条，提升长界面浏览体验。〔26〕〔25〕〔27〕
调整了按钮顺序和布局，如将“生成”操作置于“执行”之上。〔28〕〔29〕〔30〕

5. 新功能集成与接口对接

添加了设置执行自愈计划开关，并对接了后端新接口。〔31〕〔32〕〔33〕
修复了任务时间显示问题，支持毫秒级时间格式化。〔34〕〔35〕〔36〕

6. 新项目权限申请准备

开始整理前端项目列表（如XYF-FWS-ADMIN-FRONT），准备申请测试和生产环境的服务器权限。〔37〕〔38〕〔39〕

微信公众号

工作周报

2025年8月29日 · 阅读需 1 分钟

Quany

软件工程师

本周工作

配置测试环境菜单,排序，纠正对应名称；
页面制作；
- 任务详情；
联调接口，进度（20%）：
- 动作管理；
- 场景管理；
- 任务中心；
- 告警名与场景映射管理；
- 自愈计划；

下周工作

联调接口；
优化页面交互功能；
约定动态表单规则；

微信公众号

工作周报

2025年8月22日 · 阅读需 1 分钟

Quany

软件工程师

本周工作

配置测试环境菜单；
页面制作；
- 完成策略动作管理-新增策略;
- 自愈执行计划-嵌套子表格;
开始联调接口；

下周工作

联调接口；
完成页面交互功能；
表单数据校验；

微信公众号

工作周报

2025年8月15日 · 阅读需 1 分钟

Quany

软件工程师

本周工作

解决技术难点：
- 跳转异常自愈项目
- 详情 diff 方案
已完成大部分页面制作；
- 策略动作管理-列表；
- 自愈场景策略管理-列表，新建策略,绑定工具
- 应用列表-》自愈场景策略列表，绑定策略，生效范围
- 生成自愈计划开关

下周工作

完成策略动作管理-新增策略；自愈执行计划-嵌套子表格；
开始联调接口；
研究如何配置菜单；

微信公众号

用户自定义界面方案

2025年8月13日 · 阅读需 3 分钟

Quany

软件工程师

下面给出一个可操作的方案与最佳实践，帮助你建立一个面向前端调用的“API 知识库”（即集中、可发现、可校验、可生成客户端代码和 mock 的 API 元数据平台）。我会包含架构组成、数据模型、工具链、实现步骤、示例与运维/治理建议。

一、目标与要点

将所有 API（REST/GraphQL/gRPC/事件）以结构化规范保存（最好使用 OpenAPI/AsyncAPI/protobuf）。
提供易于前端使用的文档、示例、Mock 服务、以及自动生成的 TypeScript 客户端/类型定义。
支持版本管理、变更通知、契约验证（contract tests）与 CI 校验。
提供搜索、权限控制、可访问的 Developer Portal。

二、知识库的数据模型（必备字段）每个 API 条目应包含：

id / name / 简短描述
规范文件（OpenAPI/AsyncAPI/proto）与 URL（或存放仓库）
路径 & 方法（endpoint 列表）
请求/响应 JSON Schema / GraphQL schema
请求参数（path/query/header/body），必需性与默认值
示例请求与示例响应

设计知识库是一项复杂的任务，通常需要考虑多个方面。以下是一些设计知识库时可以参考的步骤和要点：

1. 需求分析

用户需求：确定用户需要哪些信息以及如何使用这些信息。
内容类型：确定知识库将包含哪些类型的信息（例如文档、FAQ、教程、视频等）。

2. 结构设计

分类体系：设计一个清晰的分类系统，使用户能够快速找到所需信息。可以考虑使用层次结构或标签系统。
元数据：为知识库条目定义元数据（例如创建日期、作者、关键词等），以便更好地管理和搜索。

3. 工具与技术选择

数据库选择：选择合适的数据库（如关系型数据库或文档型数据库）存储知识库内容。
内容管理系统（CMS）：选择一个适合的CMS，以便进行内容创建、编辑和发布。

4. 用户界面设计

搜索功能：设计高效的搜索功能，使用户可以通过关键词快速找到信息。
浏览功能：提供清晰的导航和浏览功能，方便用户按分类查找信息。

5. 内容创建与管理

内容标准：制定统一的内容创建标准和格式，包括语言风格、图片使用规范等。
版本管理：考虑如何管理内容的版本，以便跟踪更改和更新历史。

6. 权限与安全

用户权限：定义不同用户角色的权限，确保只有授权人员可以编辑或删除内容。
数据安全：确保知识库的数据安全性，避免数据丢失或泄露。

7. 反馈与改进

用户反馈：收集用户反馈以了解知识库的使用情况，发现不足之处。
持续更新：定期审查和更新知识库内容，以保持其时效性和准确性。

8. 培训与支持

用户培训：提供培训和支持，帮助用户熟悉知识库的使用。
文档与帮助：创建帮助文档和常见问题解答，以支持用户。

示例架构

前端：用户界面，包含搜索框、分类列表、内容展示区。
后端：处理用户请求、数据库交互、内容管理（可能使用RESTful API或GraphQL接口）。
数据库：存储知识库内容及其元数据。

通过遵循以上步骤，你可以设计出一个高效且用户友好的知识库，满足组织或用户的需求。

微信公众号

工作计划

2025年8月12日 · 阅读需 1 分钟

Quany

软件工程师

本周工作

完成页面：
- 自愈场景策略管理
代码
- suixingpay-cloud 代码库熟悉,找到跳转地方
- 新项目：aiops-front，初始化，部署

下周工作

解决技术难点：
- 以 tab 方式跳转异常自愈项目
- 动态表单：
  - 验证是否需要
  - 支持输入类型：文本，数字，日期，时间，文件，单选框，多选框，下拉选择
需求：
- 自愈场景策略管理；

微信公众号

工作计划

2025年8月8日 · 阅读需 1 分钟

Quany

软件工程师

需要讨论的地方：

从应用那跳过去，是要带这个应用 id 过去，所做的场景，策略都是针对应用的吧？

发现

视频制作：https://aiapp.vidnoz.com/

微信公众号​

微信公众号​

介绍​

动作表单字段配置​

必填配置​

通用配置​

组件类型配置（componentType）​

属性列举​

微信公众号​

1. 生效范围管理功能优化​

2. 数据删除与显示逻辑增强​

3. 动态表单配置清理与优化​

4. 用户界面调整与体验改进​

5. 新功能集成与接口对接​

6. 新项目权限申请准备​

微信公众号​

微信公众号​

微信公众号​

微信公众号​

1. 需求分析​

2. 结构设计​

3. 工具与技术选择​

4. 用户界面设计​

5. 内容创建与管理​

6. 权限与安全​

7. 反馈与改进​

8. 培训与支持​

示例架构​

微信公众号​

微信公众号​

需要讨论的地方：​

发现​

微信公众号​

微信公众号

微信公众号

介绍

动作表单字段配置

必填配置

通用配置

组件类型配置（componentType）

属性列举

微信公众号

1. 生效范围管理功能优化

2. 数据删除与显示逻辑增强

3. 动态表单配置清理与优化

4. 用户界面调整与体验改进

5. 新功能集成与接口对接

6. 新项目权限申请准备

微信公众号

微信公众号

微信公众号

微信公众号

1. 需求分析

2. 结构设计

3. 工具与技术选择

4. 用户界面设计

5. 内容创建与管理

6. 权限与安全

7. 反馈与改进

8. 培训与支持

示例架构

微信公众号

微信公众号

需要讨论的地方：

发现

微信公众号