Ccf 2024/icon

[cooooooooooode]

赛题分析 —— 当前存在的问题分析

当前支持

• 基于TinyVue-Icon组件使用图标
• 允许导入UI组件物料，可以使用其他组件库图标

当前问题分析

• 图标库不够丰富
• 通过导入组件库ICON 成本高，不够灵活
• 缺少在低码平台上安装、发布的图标物料资源
• 出码后导入新图标成本高，需要重新加入图标方案
• 缺少对自定义图标的管理功能

赛题分析 —— 方案目标

基于低码平台实现通用图标解决方案

• 需定义物料协议规范，以便后续在低码平台上共享物料
• 需高效集成图标资源，支持利用在线图标资源、支持自定义图标导入
  • 在线图标库
  • 自定义图标库，支持创建、导入、删除图标库，支持添加、删除单个图标
• 出码友好
  • 需支持主流框架
  • 出码后图标需支持按需引入
  • 离线图标
  • 支持灵活扩展

要解决的核心问题

基于低码平台实现通用图标解决方案

• 需定义物料协议规范，以便在低码平台上共享物料
  • 可安装、卸载
  • 可创建、删除
• 需高效集成图标资源，支持利用在线图标资源、支持自定义图标管理
  • 在线图标库
  • 自定义图标库，支持创建、导入、删除图表库，支持添加、删除单个图标
• 出码友好
  • 出码后图标需支持按需引入
  • 离线图标
  • 支持灵活扩展

方案设计概述 —— 常用方案分析

font 字体图标

• 优势
  • 兼容性更广泛，IE6+，互联网早期的利器
• 问题
  • 只能使用 color 和 font-size 控制，而且尺寸特别不精细
  • 无法按需引入
• 代表
  • iconfont

组件库内置Icon组件

• 优势
  • 组件库内无需配置，可直接使用
• 问题
  • 图标不够丰富，无法自定义
• 代表方案
  • tiny-vue
  • element-plus
  • ant-design

inline svg

• 优势
  • 支持多色、局部颜色控制、控制尺寸使用 width 和 height
  • 图标资源丰富,可按需引入
• 问题
  • 兼容性不如font，但现代浏览器适用
  • 需单独配置
• 代表方案
  • iconify
  • unplugin-icon

方案设计概述 —— 最终选择SVG

iconify

• 有规范的协议，基于JSON数据，在低码平台上安装、发布 相比npm包更方便
• 资源丰富

unplugin-icons、unplugin-vue-components

• 基于vite，主流框架全部适配
• 支持按需导入、打包
• 支持 在线图标、iconifyJSON协议图标库、svg文件 等常用场景
• 出码后可脱离平台灵活导入资源

方案实现 —— 概述

• 制定协议——基于 iconify JSON 协议
• 开发图标物料管理插件
• 基于 @iconify/vue 实现画布渲染、预览
• 基于 unplugin-icons、unplugin-vue-components 实现出码后对在线图标库、自定义图标的支持和按需导入

方案实现 —— 架构图

方案实现 —— 物料协议

{
  name: 'test图标库',
  prefix: 'test',
  icons: {
    home:{
      name: 'home',
      body: '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
      width: 24,
      height: 24
    }
  },
  occupier: {
    id: 86,
    username: '开发者',
    email: 'developer@lowcode.com',
    resetPasswordToken: 'developer',
    confirmationToken: 'dfb2c162-351f-4f44-ad5f-8998',
    is_admin: true
  }
}

方案实现 —— 功能设计

物料-图标插件 (packages/plugins/materials/src/icon)

• 在线图标
  • 展示、筛选 iconify在线资源
• 我的图标
  • 创建、导入、删除 集合
  • 添加、删除 单个图标
• mock server API
  • collection
    • create
    • import
    • remove
    • update
  • icon
    • import
    • remove

画布渲染 (packages/canvas)

• 修改canvas 内置CanvasIcon组件
  • 引入 @iconify/vue , 兼容Tinyvue-icon
  • 支持加载、刷新自定义图标数据，使用addCollection 动态导入图标库，实现画布渲染

预览渲染 ( packages/design-core/preview)

• 基于 @iconify/vue 封装图标预览组件Icon
• 加载自定义图标数据导出为icon.json
• 使用 iconify/addCollection 导入自定义图标库JOSN数据

出码配置( packages/vue-generator)

• 分析schema找出所有自定义图标，写入svg图标资源
• 修改 /templates/vue-template 更新 vite.config.js 配置，实现自定义图标、在线图标、按需导入、按需打包
• 低码转高码时修正自定义图标引入形式为
• vite-config.js

    import { defineConfig } from 'vite'
    import path from 'path'
    import vue from '@vitejs/plugin-vue'
    import vueJsx from '@vitejs/plugin-vue-jsx'
    
    import Icons from 'unplugin-icons/vite'
    import { FileSystemIconLoader } from 'unplugin-icons/loaders'
    import IconsResolver from 'unplugin-icons/resolver'
    import Components from 'unplugin-vue-components/vite'
    
    export default defineConfig({
      resolve: {
        alias: {
          '@': path.resolve(__dirname, 'src')
        }
      },
      plugins: [
        vue(),
        vueJsx(),
        Icons({
          autoInstall: true,
          compiler: 'vue3',
          customCollections: {
            test: FileSystemIconLoader('src/assets/icons/test'),
            test2: FileSystemIconLoader('src/assets/icons/test2')
          },
          iconCustomizer(collection, icon, props) {}
        }),
        Components({
          dts: true,
          resolvers: [
            IconsResolver({
              prefix: 'i',
              alias: {},
              customCollections: ['test', 'test2']
            })
          ]
        })
      ],
      define: {
        'process.env': { ...process.env }
      },
      build: {
        minify: true,
        commonjsOptions: {
          transformMixedEsModules: true
        },
        cssCodeSplit: false
      }
    })

TODO

[] tiny-engine-data-center API
[] 用户体验优化
[] 单个图标导入
[] 代码优化

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

🗂️ Base branches to auto review (2)

• refactor/develop
• ospp-*

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.