依赖

1. tailwind最新版，可用cdn

    <script src="https://cdn.tailwindcss.com"></script>

2. element-ui 由于和uniapp全端生态不符（后期会考虑废弃）

需要优化的方面（待办）

统一好 class 命名

完善基础组件

组件兼容多端

完善组件文档

完善组件测试

完善组件示例

组件图标可能要转svg

去除element-ui的组件调用 改用uview

API调用之类的需要去除

增加通用图标库

简单说明

i-background-pic-editor(小红书图片生成)

说明：该组件可以生成小红书图片组件，待完善

Props

| Prop | 作用 | 额外说明 | | ------------ | ------------------------------------------------------------ | ---------------- | | config | 配置模板的各种配置，与iThinkAi后端配合 | 后续完善文档说明 | | otherSetting | 模板的其它配置，hasMask 是否有遮罩 fontPosition 字体浮动方向 优先于配置 glass 毛玻璃效果 isShowText 是否显示文字 | 后续完善说明文档 |

Methods

| Method | 作用 | 返回信息 | | -------- | ---------------------- | ------------ | | generate | 获取最后生成的图片列表 | [base64,...] | | error | 输出生成之中的报错 | 报错信息 |

i-button(按钮)

说明： 按钮

Props

 props: {
​      type: {
​        type: String,
​        default: 'linear' // linear, normal, white, lighter, lighterWhite
​      },
​      width: {
​        type: String,
​        default: "100%"
​      },
​      height: {
​        type: String,
​        default: "60px"
​      },
​      fontSize: {
​        type: String,
​        default: "24px"
​      },
​      lineHeight: {
​        type: String,
​        default: "1"
​      },
​      disabled: {
​        type: Boolean,
​        default: false
​      },
​      loading: {
​        type: Boolean,
​        default: false
​      }
​    }

Methods

click: 点击按钮触发

i-empty(空组件)

Props

title：空标题说明

i-icon(各类图标)

Props

type: {
    type: String, // edit like likeActive
    default: 'edit'
},
width: {
    type: Number,
    default: 14
},
height: {
    type: Number,
    default: 14
},
color: {
    type: String,
    default: '#333333'
}

i-input(输入框)

Props

            value: {
                type: String,
                default: ''
            },
            inputStyle: {
                type: String,
                default: 'normal' // Line normal
            },
            placeholder: {
                type: String,
                default: '请输入内容'
            },
            type: {
                type: String,
                default: 'text'
            },
            maxlength: {
                type: Number,
                default: 140
            },
            password: {
                type: Boolean,
                default: false
            },
            placeholderClass: {
                type: String,
                default: ''
            }

Slot

prefix 前置 slot

suffix 后置slot(一般图标)

end 最后面的slot(按钮之类的)

i-leftnav(左侧栏)

Props

        title: {
            type: String,
            default: "运营部"
        },
        navs: {
            type: Array,
            default: () => {
                return [
                    // {
                    //     label: "我的收藏",
                    //     icon: require('../static/image/Collect.png')
                    // },
                    // {
                    //     label: "小红书运营",
                    //     icon: require('../static/image/Collect.png')
                    // }
                ]
            }
        },
        footer: {
            type: Array,
            default: () => {
                return [
                    // {
                    //     name: "使用教程",
                    //     icon: require('../static/image/Tutorials.png'),
                    //     url: 'https://vwjisjt7h3.feishu.cn/docx/Jerkd66LsoOu0XxMGh1cTBEynPe?from=from_copylink'
                    // }
                    // {
                    //     name: "推荐邀请",
                    //     icon: require('../static/image/invite.png'),
                    //     url: '/pages/invite'
                    // }
                ]
            }
        }

Methods

key: 滑动的key

i-link-card(卡片)

Props

		params: { // 场景配置
			type: Object,
			default() {
				return {
					pic: require("../static/emptyScene.png"),
					name: "场景名称",
					remark: "场景说明",
					views: 1000, // 被查看
					use: 300, //被使用
					like: 300, // 点赞
					labels: [
						{label: "通用"}
					]
				}
			}
		},
		isCollect: { // 是否是收藏场景
			type: Boolean,
			default() {
				return false
			}
		},
		conf: { // 其它配置
			type: Object,
			default() {
				return {
					showFooter: ['use', 'like'],
					customCard: false
				}
			}
		}

Methods

deleteScene: 删除场景事件

如果this.$api.deleteScene是api 那么会触发 $refresh 事件刷新

like：点赞事件

card：自定义卡片点击事件 props的 conf.customCard为true的时候开启

i-markdown-editor(markdown编辑框)

Props

edit: 编辑的文本

Methods

change: 改变文本事件

cancel: 取消改变文本事件

i-mask-container(遮罩层)

Slot

content: 内容

i-popup-title(弹窗标题)

Props

title: 标题文本

i-popup(弹窗)

Props

isShow: 是否显示

background: 弹窗背景

Methods

close 关闭事件

i-switch(开关)

Props

            options: {
                type: Object,
                default: () => {
                    return {
                        title: "标题",
                        hideTitle: false,
                    }
                }
            },
            defaultValue: {
                type: Boolean,
                default: false
            }

Methods

change 改变状态

i-table（通用表格)

Props

        props: {
            float: {
                type: String,
                default: 'left'
            },
            height: {
                type: String,
                default: '300px'
            },
            emptyText: {
                type: String,
                default: '暂无数据'
            },
            // 功能按钮配置 { title: xxx,field:xxx }
            option: {
                type: Array,
                default(){
                    return []
                }
            },
            // { title: '名字', field: 'name', type: xxx }
            header: {
                type: Array,
                default(){
                    return []
                }
            },
            list: {
                type: Array,
                default(){
                    return []
                }
            },
        },

Methods

scrollBottom: 滑动到底部

operation: 点击了操作触发（有option时候可触发

i-template-list（模板列表）

Props

		props: {
			types: {
				type: Array,
				default(){
					return []
				}
			},
			templates: {
				type: Array,
				default(){
					return []
				}
			},
			index: {
				type: Number,
				default(){
					return 0
				}
			},
			loading: {
				type: Boolean,
				default(){
					return false
				}
			},
			addCustomTemplate: {
				type: Boolean,
				default(){
					return false
				}
			}
		},

Methods

change：改变模板选择时候触发

check：当前点击模板下标

typeChange：类型改变触发

editTemplate：点击编辑模板触发

deleteTemp：点击删除模板触发

addModal：点击添加模板触发

bottom: 滑动到最后触发

i-upload（上传组件）

Methods:

fileUrl：上传成功后的地址