Code Monkey home page Code Monkey logo

keepwork's Introduction

KeepWork Website

Build Setup

# install dependencies
yarn install

# create .env file and add your settings
cp .env.default .env

# for dev
yarn dev

# for production
# build for production with minification
yarn build
yarn start

# if there are some errors while start server, pls try stop before start
yarn stop

keepwork's People

Contributors

ddxy1230 avatar kevinxft avatar leopoldchen avatar lixizhi avatar lsx18 avatar onedou avatar qhchen88 avatar sandu1213 avatar wxaxiaoyao avatar xuntian avatar yq33z3069 avatar yuanoook avatar zhangkaitlyn avatar

Stargazers

 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

keepwork's Issues

mod属性编辑器

  1. 属性展示
    一个mod包含多个基础组件,每个基础组件有多个可编辑数据,可编辑数据分为多种类型

  2. 已有数据显示
    属性编辑器需展示当前正在编辑的数据信息,注意需要合并default数据

  3. 数据change事件
    当一个属性值被修改,发起action请求,组合当前基础组件的配置值并发给action

网站目录树

通过APIservice读取数据并显示。
注:

  1. 修改旧的数据获取方式,不一次性读取网站所有数据,取消文件夹深度遍历。
  2. 单个文件夹下的文件采用无限加载模式,也不要一次性全部载入。

建议:

  1. 添加页面搜索功能
  2. 一次编辑一个网站,不做跨网站编辑

@azothli

前端 API Service 封装

  1. 后端API方法封装
  • 保证在组件中的调用是基于service方法,而不是基于http
  • 拒绝回调地狱,使用async await
  1. 测试
  2. 文档

viewport 编辑功能调整

背景

  1. 新增mod。
    目前当页面没有内容时会出现一个简单的+按钮,这样的为空设计其实有所欠缺,需要有更多的信息表述。
    另外,选中一个mod时,目前只能在尾部添加新mod,应该允许在mod前也能添加新mod。
  2. mod位置移动
    目前在viewport区无法移动调整mod位置。建议新增上下移动功能,方便用户编辑。
    是否考虑拖拽操作?拖拽操作容易带来负面效果,需仔细考虑一下。 @azothli

目标

调整viewport部分的mod新增功能。
新增mod位置变更功能。

指标

  1. 允许在mod前后添加新mod
  2. 在页面为空时引导用户创建新mod

网站theme实现

当前的theme配置应存成md文件,需解决页面加载时的theme读取和切换逻辑,需考虑redux

codemirror 操作优化

背景

目前的codemirror区只是实现了简单的md文案编辑和更新事件响应等,有许多之前已经实现的旧功能还是缺失的。比如mod代码折叠、mod选中时的高亮等等。
另外,也有一些之前没有实现的功能可以添加,比如�mod指令 autocomplete功能

目标

完善并优化codemirror区域的�功能操作

指标

  • 实现工具栏的快捷操作
  • 实现mod代码折叠,以及选中时的代码高亮
  • 添加autocomplete支持

网站layout程序设计

  1. 以element ui 的 layout为基础
  2. 一个网站拥有一个default layout
  3. 一个网站可以拥有多个layout,不同页面可以设置特殊的layout

需要考虑几个问题 @azothli

  1. 在什么位置做layout编辑?
  2. 为方便操作,是否应该在主编辑窗口提供快捷的layout编辑功能?以wix为例,header footer是可以直接在页面中编辑的。此处需要考虑的问题比较多,需要规划

Style预览组件

背景

当前是样式预览方案是显示ui设计师提供的图片,考虑到将来有大量的mod和style,这部分的工作量会比较繁琐。如果使用实时预览,一方面可以免去这个制作图片的工作,另一方面也可以真正实现有效的预览,即预览的数据就是选择后会显示出的实际样式。

目标

开发一个组件,可以在选择样式时,预览显示其实时数据。

指标

  1. 实现预览组件,基于实时数据预览。(注:在新建mod时,使用default数据)
  2. 预览结果与组件加入viewport之后的显示是一致的。
  3. 支持pc和手机两种模式

全新UI风格设计

在目前手机版的基础上,计划参照当下流行的WIN10扁平化风格重新设计,草图如下

ADI mod重构

  1. 遵循新的规范书写
  • 基础组件与mod分离
  • 使用栅栏式布局
  • 使用jss
  • 保证代码简洁

支持服务端渲染

背景:
旧的解决方案再提供服务端渲染这方面很乏力,导致页面SEO容易出现问题。在转换Vue技术栈后,后端渲染可以按照官方建议流程来实践。
搭建后端服务器后,nginx的跳转也会变简单,这是一举多得。

目标:
支持后端渲染

指标:

  1. 集成后端渲染
  2. 如果访问对象是搜索引擎,使用后端渲染

Keepwork大赛运营团队

1,acmc比赛具体安排
2,其他比赛合作计划
3,paracraft未来整体推进规划
(acm, ican合作实施, 北京开放大学资源, 3D校园LBS应用, 逻辑塔项目在国内/国外的展会, 都可作为整体推进计划的一部分)

Viewport支持响应式

背景

目前viewport无法根据当前真正的宽度来做响应,比如viewport宽度为手机宽度时,应该响应成手机的显示样式。
由于css的media响应是根据浏览器的整体宽度来处理的,与预期效果不一致。解决方案可以考虑iframe或者js实时计算宽度。

目标

使用iframe实现viewport的响应式预览

指标

  • viewport在不同宽度下有对应的显示方式
  • viewport区域与editor主区域的事件交互与现有版本保持一致
  • 总结基于iframe下的事件交互方法,便于后续开发

KP Mod编辑器

  1. Mod样式编辑
  2. 普通MOD制作(无复杂后端逻辑)

手机 & PC 模式切换

背景

目前很多mod的设计是需要支持手机模式的,比如paracraft mod。
旧的编辑器并没有做这方面的支持,因此在新的实现里添加此功能。
由于已经做好viewport 区域的 iframe支持,手机模式只要设计好宽度就好。

目标

针对viewport区域提供手机和pc两种模式,方便切换

指标

  1. mod显示根据不同模式呈现不同视觉效果(以UIUX设计为准)

Keepwork版号申请与运营主体

主要是2大类申请:

  • keepwork.com 申请ICP经营许可证 (因为有支付功能了,之前只有备案号)
  • 哈奇,Paracraft的PC版和手机版需要申请版号

By Effie

申请版号:

  • 1、送审单位一共有两个:一个是文化部,一个是总署,各需要提供4+6个游戏账号,其中总署要求初级、中级、高级账号各两个
  • 2、出具项目的说明书,必须包含整个项目所有功能
  • 3、对于充值收费功能做出明确的说明(如果游戏有),且本功能必须是外网可以体验到的
  • 4、提供游戏中的所有文本

之前的业务部门就负责提供这些内容,其他还要准备一些公司证件材料和填表格,手机版本和PC版本需分开送审。

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.