Giter VIP home page Giter VIP logo

yicon's Introduction

YIcon 是一个集图标上传、展示、使用于一身的字体图标管理平台。目的为采用 Iconfont 字体图标替换项目中图片图标的使用,以达到缩减体积、风格统一、提高开发效率等目的。不同的部门可以申请在平台上创建大库,业务线可以选择需要的图标添加到购物车,保存成项目之后进行维护。它可以方便的将 SVG 图标转换为字体图标,提供给 UI/UE 和前端开发使用。

flow

优势

与传统制作图标的方式相比,它拥有如下优势:

  1. 严格的审核流程 图标上传后用户会进行一次编辑,之后会提交到审核,被大库的管理员审核通过后方能入库;
  2. 可控的项目版本 我们的项目每次变动之后再下载,就会生成新的版本,因此在项目中产生的所有版本都可以追溯查看;
  3. 完善的权限管理 我们拥有超管后台,可以自由的控制大库、项目管理员的权限。

编码控制

我们的字体使用的都是 unicode 编码,尽管大部分编码都有其固定作用,但 unicode 留出了一个『私用区』可以用来进行字体扩展,这一区域的码值范围是:E000 - F8FF

我们的字体站规定的码值范围严格按照 unicode 私用区范围,每个上传的新字体都会从 E000 开始生成一个全站唯一固定的编码,之后就不会变动。这样用户在添加到项目或从删除删除时,图标的码值也不会发生改变,增强用户的体验。

尽管在 CSS3 支持了 font-face 的前提下,可以给图标字体加上特定样式以便确保其正确显示,但还是建议将码位落在私用区内以防止引起其他不必要的问题。因此我们字体站推荐的字体容量为 6400 个,在大多数场景下这个数量已足够使用。

如果某个图标废弃不用,可以采用替换的方式才修改其显示,以保证编码不被浪费。

如果你是去哪儿网内网用户,请直接访问该站点

yicon's People

Contributors

amnsss avatar jasonfang93 avatar jgx-jay avatar lwg529 avatar malcolmyu avatar paropark avatar wang508x102 avatar xilixinluo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

yicon's Issues

自动建立 log 文件夹

在启动的时候,如果配置的 log 是写文件,需要检查文件夹是否存在,不存在则自动创建

关于登录

请问这套系统里提供用户登录和管理吗?还是得另外需要自己的用户系统?

开发项目管理

项目管理比较复杂,这次需要考虑:

  1. 整库导入问题。项目是否支持整库导入?导入之后可否编辑?整库导入导出是仅仅进行关联还是在物理上将所有图标都导入到项目中。
  2. 版本冲突问题。目前由于图标替换,产生了图标版本,如何检测替换图标的版本冲突?是否每次项目加载时都需要检测版本冲突?对于版本的冲突,应该如何提示用户是否进行更新?
  3. 项目公开,需要一个单独的界面进行展示,组件注意共用。

需要制作的组件:

  1. 项目列表;
  2. 项目展示;
  3. 项目编辑与人员管理弹窗;
  4. 整库导入部分(待议);
  5. 版本冲突与通知部分(待议)。

引入单元测试

引入单元测试,并使用 travis 进行集成。

先开发完首页,然后开始编写各种测试用例。熟悉一下后端和前端组件测试规范,之后的开发必须测试先行,再写逻辑。

Yicon 运行webpack的时候出现问题

您好,我不知道是哪里出现了问题:
image
我重新配置过很多次项目了,但是还是报错,不知道是哪里出了问题,麻烦解答一下,谢谢。

开发管理员后台

开发管理员后台部分,主要包括:

  1. 大库管理后台,提供大库的添加/删除(这里的删除应该进行限制处理),管理员变更的功能。
  2. 项目管理后台,提供项目的添加/删除,人员变更功能。

构建前端样式/组件框架

这一次前端样式/组件库选用了 material-ui,之所以没使用 ant.design,主要是考虑到我们这个项目不会大量的使用表单和表格等项目后台系统特有的组件,因此使用 material 简单灵活,同时逼格比较高。

但是仅有组件库还是需要进行基础样式的搭建,同时 header 部分、图标上传审核、图标模块等部分需要进行 scss 的编写。新的管理后台页面的样式还需要重新设计。

Yicon用户收集

为了能够更好的了解大家的需求和使用情况,Yicon为用户提供了一个微信反馈群,方便及时的响应大家。未入群,打算部署或已经在使用 Yicon 的童鞋,可以直接在下面回复。

完成顶部 header 开发

完成 iconfont 顶部 header 开发,包含左侧 logo,下拉菜单,购物车和搜索框的样式设计与组件开发。

还在更新维护吗

感觉界面和功能上还需要打磨。比如增加大库改名和删除
另外希望能像yapi一样,引入插件机制,方便引入别的用户登录方式

权限配置失败

您好,我之前issues过了,权限配置根据你们这边提供的教程,配置失败,能解答一下吗?

是否会支持管理svg?

目前所有的图标都是对标字体的,这样彩色的图标就不能用这个平台管理了
我看了一下阿里font,是在下载字体的时候才会进行相关的转换。
是否会添加相关类型管理?

开发首页/大库部分

开发首页大库部分。

后端

涉及的重要数据库表:User、Repository。

这里有一个项目图标版本控制的问题:

鉴于项目的递增性,我们对项目的版本控制采用只记录增加图标的手段,增加的图标有两种:替换图标与新增图标。

新增图标比较简单,对于替换图标来说,在数据库设计的时候给 Icon 表标记了一个 replaceId,标记该图标是为了替换哪一个图标。项目本身是分版本的,在查找项目的时候应该查找当前最大版本,之后查找该版本包含的全部图标(需要剔除其中被替换的图标)。

前端

需要构建如下组件:

  1. 首页小图标集合组件;
  2. 单个图标展示组件(可以在我的图标中复用);
  3. 图标详情组件(应该可以在上传/审核时复用);
  4. 上传图标入口;
  5. 大库通知组件。

具体开发阶段会实时更新。

废弃的 API | Node.js API 文档

系统部署成功,登录sso也配置好了,但是登录完成后后台报错:
(node:14412) [DEP0079] DeprecationWarning: Custom inspection function on Objects via .inspect() is deprecated
页面报错信息:
http://172.16.140.31:3000/api/login?ticket=ST-12-V1JreiIfl5MFYE7Le4U9-cas01.example.org
{"res":false,"status":500,"message":"服务器错误"}
我的系统配置:
config.json
"login": { "ssoType": "sso", "authUrl": "http://172.16.60.23:8080/cas-server/login?service={{service}}", "tokenUrl": "http://172.16.60.23:8080/cas-server/serviceValidate?service={{service}}&ticket={{token}}", "serviceUrl": "http://172.16.140.31:3000/", "adminList": [] },

开发我的图标 timeline 部分

开发我的图标部分,主要是前端工作,需要设计一个 timeline 的组件。

由于这次会存储所有 svg 的路径,因此这里的展示非常简单,只需要区分图标状态即可。

npm WARN Invalid version: "1.0.2.1"

最新版本 yicon install 无法构建
0 info it worked if it ends with ok 1 verbose cli [ '/usr/local/node-v4.8.3-linux-x64/bin/node', 1 verbose cli '/usr/local/node-v4.8.3-linux-x64/bin/npm', 1 verbose cli 'run', 1 verbose cli 'build' ] 2 info using [email protected] 3 info using [email protected] 4 verbose stack Error: Invalid version: "1.0.2.1" 4 verbose stack at Object.module.exports.fixVersionField (/usr/local/node-v4.8.3-linux-x64/lib/node_modules/npm/node_modules/normalize-package-data/lib/fixer.js:191:13) 4 verbose stack at /usr/local/node-v4.8.3-linux-x64/lib/node_modules/npm/node_modules/normalize-package-data/lib/normalize.js:32:38 4 verbose stack at Array.forEach (native) 4 verbose stack at normalize (/usr/local/node-v4.8.3-linux-x64/lib/node_modules/npm/node_modules/normalize-package-data/lib/normalize.js:31:15) 4 verbose stack at final (/usr/local/node-v4.8.3-linux-x64/lib/node_modules/npm/node_modules/read-package-json/read-json.js:349:5) 4 verbose stack at then (/usr/local/node-v4.8.3-linux-x64/lib/node_modules/npm/node_modules/read-package-json/read-json.js:124:5) 4 verbose stack at /usr/local/node-v4.8.3-linux-x64/lib/node_modules/npm/node_modules/read-package-json/read-json.js:243:12 4 verbose stack at /usr/local/node-v4.8.3-linux-x64/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:78:16 4 verbose stack at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3) 5 verbose cwd /app/yicon/src 6 error Linux 2.6.32-573.el6.x86_64 7 error argv "/usr/local/node-v4.8.3-linux-x64/bin/node" "/usr/local/node-v4.8.3-linux-x64/bin/npm" "run" "build" 8 error node v4.8.3 9 error npm v3.10.10 10 error Invalid version: "1.0.2.1" 11 error If you need help, you may report this error at: 11 error <https://github.com/npm/npm/issues> 12 verbose exit [ 1, true ]

开发图标上传部分

图标上传部分需要配合前端上传与 iconfont-builder 工具。前端需要设计文件上传界面,上传后通过 iconfont-builder 直接打成 path,存入数据库,然后进入我的工作台。用户可以在工作台中编辑、删除图标,以及选择需要上传入库的图标。

在后端来说的处理就简单了,除了第一次上传的操作需要创建图标,其余仅需要修改图标的状态即可。这里的逻辑最好抽象出来,因为上传和替换是很相似的,大部分前后端逻辑都可以共用。

需要开发的组件有:

  1. 上传图标组件;
  2. 底部上传提示组件;
  3. 工作台容器(这里上传和审核可以共用);

开发日志/通知系统

我们使用日志来作为通知的承载。

但是日志和通知本身毕竟不同,需要思考一种机制来将发给同一个人的相同类型的日志转化为一条通知。

需要实现的组件:

  1. 日志页面;
  2. 通知页面。

开发完成 isom-fetch

isom-fetch 工具的作用是在服务端渲染时提供首页数据。

背景方案

目前使用服务端渲染进行 react 同构实现,已经可以完成前后端大部分业务代码和路由的公用,但是尚不能解决首屏数据的问题。由于在同构项目中,首屏数据的获取在前端路由控制和后端路由控制时的处理逻辑不同(前端是使用 ajax 请求获取数据,后端是直接调用 controller 方法获取数据库数据),因此需要使用一种同构写法来弥合这种区别。

现有方案

贴吧 react 最佳实践

贴吧 react 最佳实践 提供了一种解决方案,给出了重要的思路:react 在渲染页面时是同步的,因此可以在每一次请求到来时构建一个新的 fetch 实例,将其置于全局中,在执行 action 的 fetch 时使用这个单例;但是本方案也有以下问题:

  1. 需要使用装饰器在 controller 中用 method 和 url 装饰,与路由本身有冲突,代码冗余;
  2. 一个请求只能对应一个 controller,无法走其他中间件;
  3. 改动的范围太大,还需要 hack 中间件。

本方案有自己的构建工具:fit-isomorphic-redux-tools

redial

redial 是一个给组件添加自定义生命周期,并能自由触发的组件,在项目breko-hubreact-production-starter 中对其使用方法有明确的展示。

但是这个方式也有自己的问题:它针对的是有 node 做中间层,而没有自己的数据库的项目,也就是说,前后端获取数据的方式都是使用 axios 进行请求发送,通过在初始 state 时写入不同的 host 和 protocol 来像不同的源发送请求。

尽管不适用于我们的场景,但是它解决了前端路由进入页面时,不重新发起请求的问题,值得研究。

期望实现方案

同构 fetch

目前期望实现的方式是简单的编写一个同构的 fetch 方法,该方法在前端的作用是发送请求,在后端的作用是处理中间件获取数据。该方法在前端的写法为:

import iFetch from 'isom-fetch';

const fetch = iFetch.create({
  baseURL: '/api',
  headers: {}
});

fetch.get('/user', { id });

在后端的写法为:

import iFetch from 'isom-fetch';

app.use(function* (next) {
  const location = this.originalUrl;
  match({ routes, location }, (
    error, redirectLocation, renderProps
  ) => {
    // 直接使用 app 本身,获取其全部中间件,模拟请求执行流程
    const fetch = iFetch.use(this);
    // begin SSR
    if (renderProps) {
      render();
      fetch.all(() => {
        // SSR actually
        render();
      });
    }
  });
});

遇到问题

在实现的过程中,遇到一些问题:

  1. 采用模拟请求执行的方式,如果在这些中间件里用户调用了 httpRequest 或 httpResponse 的某些方法会报错;
  2. 页面加载后,前端路由进入时依然会发送 ajax 请求,导致冗余。这一点可以参考 redial 的处理方式,思考怎么解决。

开发搜索部分

搜索功能包含对图标的搜索和对项目的搜索,是之前的强化版本。

  1. 图标搜索需要添加根据编码的搜索功能,搜索结果应该显示原图标库;
  2. 项目搜索可以根据项目的名称、描述进行搜索,搜索之后可以查看公共的项目。

需要制作的组件有:

  1. 搜索框组件;
  2. 图标项目缩略图展示组件。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.