diff --git a/README.md b/README.md index ba740e3..85bad9b 100644 --- a/README.md +++ b/README.md @@ -16,16 +16,20 @@ XCEL 是由京东用户体验设计部 [凹凸实验室][1] 推出的一个 Exce 1. 体验佳：该工具基于 Electron 开发，使其拥有了很多原生特性，如与系统一致的弹框、无边框设计等等。 2. 可视化：可视化操作你的 Excel 数据，支持文件的导入导出。 3. 强大的筛选逻辑：提供了单列运算逻辑、多列运算逻辑和双列范围逻辑三种筛选方式，并且可通过“且”、“或”和“编组”的方式任意组合。 +4. 去重功能：提供可指定列的方式进行去重，有效避免数据冗余。 + ## 图示 -1. 整体说明 -![整体说明][6] -2. 筛选条件表单 -![筛选条件表单][7] +1. 初始界面 +![初始界面][6] +2. 筛选条件面板 +![筛选条件面板][7] 3. 历史文件列表 ![历史文件列表][8] 4. 使用说明 -![此处输入图片的描述][9] +![使用说明][9] +5. 应用更新 +![应用更新][10] ## 模块说明 @@ -42,7 +46,7 @@ XCEL 是由京东用户体验设计部 [凹凸实验室][1] 推出的一个 Exce XCEL 推荐使用 node v6.x 作为编译运行环境。另外，构建工具使用了 Webpack。 ## 构建步骤 -该项目是基于 [electron-vue][10] 开发，该模板的更多信息可以 [点击这里][11] 查看。 +该项目是基于 [electron-vue][11] 开发，该模板的更多信息可以 [点击这里][12] 查看。 ``` # install dependencies npm install @@ -57,7 +61,7 @@ npm run build npm run pack ``` -更多构建信息可点击 [这里][12] 查看。 +更多构建信息可点击 [这里][13] 查看。 ## 初始化项目时可能会遇到的问题 @@ -86,31 +90,153 @@ ERROR in dlopen(/Users/**/Desktop/XCel/node_modules/node-sass/vendor/darwin-x64- --- -## 一些有助于理解程序的图片 - -1. Vue 组件结构 -  ![Vue 组件结构][13] -2. Vuex 数据结构 -  ![Vuex 数据结构][14] -3. 解析 Excel 后的数据结构（在 background process 中） -  ![解析 Excel 后的数据结构][15] -4. 项目的文件结构 -  ![项目的文件结构][16] - - -[1]: https://aotu.io/ +## 一些有助于理解程序的图例 + +1. Vue 组件结构 +  ![Vue 组件结构][14] +2. Vuex 数据结构 +  ![Vuex 数据结构][15] +3. 解析 Excel 后的数据结构（在 Background Process 中） +  ![解析 Excel 后的数据结构][16] +4. 项目的文件结构 +. +├── README.md +├── app················································应用的代码目录 +│   ├── crashTempate.js································应用崩溃时提交的日志信息 +│   ├── dist···········································应用构建后的代码目录 +│   │   ├── background································· +│   │   │   ├── excelUtils.js·························· +│   │   │   ├── filterUtils.js························· +│   │   │   ├── generateHTMLString.js·················· +│   │   │   ├── index.html····························· +│   │   │   └── index.js······························· +│   │   └── update····································· +│   │   ├── index.css······························ +│   │   ├── index.html····························· +│   │   └── index.js······························· +│   ├── electron.js····································electron 入口文件（Main Process） +│   ├── icons··········································electron-packager 打包时所需的应用图标 +│   │   ├── icon.icns··································.icns <--> OSX +│   │   ├── icon.ico···································.ico <--> Windows +│   │   └── icon.png···································.png <--> 可选项 +│   ├── ipcMainSets.js·································IPC通讯：主进程 +│   ├── main.ejs·······································页面入口 +│   ├── menuTemplate.js································应用的菜单栏 +│   ├── node_modules···································应用层级的 node_modules +│   ├── package.json···································应用层级的 package.json（如 Lodash） +│   └── src············································Vue 相关的目录 +│   ├── App.vue····································单页面的主结构 +│   ├── api········································所有 API 请求（目前为空） +│   ├── background·································Backgroud Process（Renderer Process）用于处理耗时的操作 +│   │   ├── excelUtils.js··························excel 相关的工具函数集合 +│   │   ├── filterUtils.js·························过滤相关的工具函数集合 +│   │   ├── generateHTMLString.js··················根据excel数据生成相应的 HTML 字符串 +│   │   ├── index.html·····························Background Process 入口文件 +│   │   └── index.js·······························Background Process 入口 JavaScript 文件 +│   ├── components·································组件目录 +│   │   ├── FirstScreenPageView····················首屏的组件目录 +│   │   │   ├── ColSelDialog.vue···················列选择弹框组件 +│   │   │   ├── ExcelDisplay.vue···················Excel 展示组件 +│   │   │   ├── FilterForUnique.vue················去重逻辑表单组件 +│   │   │   ├── FilterFormDoubleColsRange.vue······双列范围逻辑表单组件 +│   │   │   ├── FilterFormMultiCalc.vue············多列运算逻辑表单组件 +│   │   │   ├── FilterFormSingleLogic.vue··········单列运算逻辑表单组件 +│   │   │   ├── FilterPanel.vue····················过滤面板组件 +│   │   │   ├── FilterTag.vue······················过滤标签组件 +│   │   │   ├── FilterTagList.vue··················过滤标签列组件 +│   │   │   ├── GroupSelect.vue····················组别选择组件 +│   │   │   ├── SheetOfExcel.vue···················Excel 的 sheet 组件 +│   │   │   └── uniqueTag.vue······················去重逻辑表单组件 +│   │   ├── FirstScreenPageView.vue················首屏页面结构组件 +│   │   ├── InstructionsPageView···················使用说明组件目录 +│   │   │   ├── Instructions.vue···················使用说明组件 +│   │   │   └── assets·····························静态资源 +│   │   │   └── qrcode.jpg·····················二维码图片 +│   │   ├── InstructionsPageView.vue···············使用说明页面结构 +│   │   ├── assets·································静态资源 +│   │   │   ├── O2-icon.png························O2 图标 +│   │   │   ├── common.scss························通用 CSS 样式 +│   │   │   ├── content.scss·······················使用说面页面的 CSS 样式 +│   │   │   ├── markdown.scss······················markdown 的 CSS 样式 +│   │   │   ├── o2logo.png·························O2 logo +│   │   │   ├── select.scss························下拉选择框的 CSS 样式 +│   │   │   ├── svg································SVG 图标目录 +│   │   │   ├── table.scss·························table 相关的 CSS 样式 +│   │   │   ├── tabs.scss··························Excel 的 Tabs(sheets) CSS 样式 +│   │   │   └── xcel_logo.png······················xcel Logo +│   │   └── common·································可复用的组件目录 +│   │   ├── FileList.vue·······················文件列表组件 +│   │   ├── Footer.vue·························底部组件 +│   │   ├── Header.vue·························头部组件 +│   │   ├── Loading.vue························文件处理时的 Loading 组件 +│   │   ├── SideBar.vue························侧边栏组件 +│   │   ├── UpdateDialog.vue···················应用更新弹框组件 +│   │   └── WindowTop.vue······················顶部控制条组件 +│   ├── main.js····································Vue 入口文件 +│   ├── routes.js··································Vue 路由文件 +│   ├── store······································Vuex 数据目录 +│   │   ├── actions.js·····························涉及多个 mutations 的 action 集合 +│   │   ├── getters.js·····························涉及多个 mutations 的 getter 集合 +│   │   ├── index.js·······························Vuex 入口文件 +│   │   ├── modules································模块目录 +│   │   │   ├── clientUpdate.js····················应用更新相关的模块 +│   │   │   ├── excel.js···························Excel 相关的模块 +│   │   │   ├── file.js····························文件相关的模块 +│   │   │   ├── filter.js··························过滤相关的模块 +│   │   │   ├── programWindow.js···················应用窗口的控制模块（如最大化、最小化） +│   │   │   └── unique.js··························去重相关的模块 +│   │   └── mutation-types.js······················mutation-types 声明 +│   ├── update·····································应用更新的页面（Renderer Procss） +│   │   ├── index.css······························ +│   │   ├── index.html····························· +│   │   └── index.js······························· +│   └── utils······································工具函数目录 +│   ├── ExcelSet.js····························Excel 相关的工具函数 +│   ├── appInfo.js·····························应用相关的信息 +│   ├── localStorageSet.js·····················本地存储的工具函数 +│   └── openExternal.js························通过默认浏览器打开外链的工具函数 +├── build··············································electron-builder 生成安装包时所需文件（如图标、背景图） +│   ├── background.png·································Mac 安装时显示的背景图 +│   ├── icon.icns······································OSX 应用图标 +│   ├── icon.ico······································· +│   ├── install-spinner.gif····························Windons 安装时显示的 GIF 动画 +│   ├── installerHeader································ +│   └── installerHeaderIcon.ico························ +├── builds·············································electron-packager 打包出来的各平台应用 +│   ├── XCel-darwin-x64································macOS 64位 +│   ├── XCel-linux-ia32································Linux 32位 +│   ├── XCel-linux-x64·································Liunx 64位 +│   ├── XCel-mas-x64···································苹果应用商店（Mac App Store）的 安装包 +│   ├── XCel-win32-ia32································Windows 32位 +│   └── XCel-win32-x64·································windows 64位 +├── config.js··········································Electron 构建时的配置文件 +├── node_modules·······································Electron 层级的 node_modules +├── package.json·······································Electron 层级的 package.json +├── tasks··············································预定义的任务集（如快速新建 Vue 组件等） +│   ├── release.js····································· +│   ├── runner.js······································ +│   └── vue············································ +│   ├── route.js··································· +│   ├── route.template.txt························· +│   └── routes.template.txt························ +└── webpack.config.js··································webpack 配置文件 + + + + [1]: https://aotu.io/ [2]: http://jdc.jd.com/lab/xcel/download/1.3.1/xcel-1.3.1.dmg [3]: http://jdc.jd.com/lab/xcel/download/1.3.1/xcel%20Setup%201.3.1.exe [4]: http://jdc.jd.com/lab/xcel/download/1.3.1/xcel%20Setup%201.3.1-ia32.exe [5]: http://jdc.jd.com/lab/xcel/download/1.3.1/xcel-1.3.1-linux-x64.zip - [6]: https://misc.aotu.io/JChehe/2016-11-15-xcel/graphic11.png - [7]: https://misc.aotu.io/JChehe/2016-11-15-xcel/graphic22.png - [8]: https://misc.aotu.io/JChehe/2016-11-15-xcel/graphic33.png - [9]: https://misc.aotu.io/JChehe/2016-11-15-xcel/graphic44.png - [10]: https://github.com/SimulatedGREG/electron-vue - [11]: https://simulatedgreg.gitbooks.io/electron-vue/content/index.html - [12]: https://simulatedgreg.gitbooks.io/electron-vue/content/docs/npm_scripts.html - [13]: https://misc.aotu.io/JChehe/2016-11-15-xcel/component-structure.jpg - [14]: https://misc.aotu.io/JChehe/2016-11-15-xcel/vuex-data-structure.jpg - [15]: https://misc.aotu.io/JChehe/2016-11-15-xcel/excel-data-analysis.jpg - [16]: https://misc.aotu.io/JChehe/2016-11-15-xcel/file-structure.jpg + [6]: https://misc.aotu.io/JChehe/xcel/initial_interface.png + [7]: https://misc.aotu.io/JChehe/xcel/filter_panel.png + [8]: https://misc.aotu.io/JChehe/xcel/sidebar.png + [9]: https://misc.aotu.io/JChehe/xcel/instructions_for_use.png + [10]: https://misc.aotu.io/JChehe/xcel/app_update.png + [11]: https://github.com/SimulatedGREG/electron-vue + [12]: https://simulatedgreg.gitbooks.io/electron-vue/content/index.html + [13]: https://simulatedgreg.gitbooks.io/electron-vue/content/docs/npm_scripts.html + [14]: https://misc.aotu.io/JChehe/xcel/component_structure.png + [15]: https://misc.aotu.io/JChehe/xcel/data_structure.png + [16]: https://misc.aotu.io/JChehe/xcel/excel.png + [17]: https://misc.aotu.io/JChehe/2016-11-15-xcel/file-structure.jpg