/xiaoetong

🐧小鹅通店铺管理

Primary LanguageVue

打开方式：

clone 到本地后（文件较大，60M 左右，下载需要一点时间）：

  1. npm install

  2. npm run dev

备注：

  1. 页面包含两大部分：后台管理页 和 帮助中心，路由默认首先进入后台管理页，帮助中心页面可在后台管理页主页 -> 店铺详情 中右侧的帮助中心点击进入，或者由右上角用户图像 hover 后出来的提示信息中进入

  2. 后台管理页是在试用期已过的前提下开发的，可以随处点击查看，把玩，可以改变 Vuex 全局数据，但不能跟后台交互，不能登录。

  3. 信息筛选，搜索，隐藏，显示，分页跳转功能可在 “图文” 页面中查看，因为其余页面功能比较类似，就只在一处展示了。帮助中心里边问题汇总部分，前三个栏目才有文章详情，没有把九十多篇文章详情全部 mock 进去......

  4. 建议跟原页面一起打开进行比较，我自信经过自己调改后的布局会更好看一点（比如打开设置页面）......另外对于页面的跳转和按钮的交互做了一些简单的动画作为应答，以使得页面整体更为活泼一些（比如图文页中显示和隐藏按钮触发的小动画）

  5. mock 了一些用户数据，在页面中异步获取，再通过 Vuex 来全局分发，能够模拟真实环境

对比：

内容 原项目 优化后
HTML 标签语义化 × √
压缩图片 × √
统一样式 表现一致 × √
组件化开发 × √
图片懒加载 × √
http 请求数 xxx 各页面不同，不过基本在各页面的 1/2 左右
库 / 框架 jQuery 库 Vue 框架
CSS 框架 Boostrap 无
维护成本 高，存在命名空间冲突，频繁操作 DOM 导致大量重绘重排，业务逻辑关系也会比较混乱等等。jQuery 不适合开发中大型网页应用 中，虚拟 DOM 渲染页面极快，通过 Vuex 管理全局数据，由数据来驱动页面的方式使得调试较为便利，即便未来应用变得很复杂，也可以胜任，并且可以肯定要比 jQuery 简单方便
页面跳转 每次跳转都刷新一次页面 路由跳转，不用刷新
页面加载 load 2s - 3s load 800ms 左右，稳定在 1s 以下
面向未来 jQuery 并不是不能，而是成本太高，体验不佳，已经不适合用于开发中大型单页应用 由数据来驱动页面的方式使得调试较为便利，即便未来应用变得很复杂，也可以胜任，并且可以肯定要比 jQuery 简单方便

其余各页面 BUG 提交：

一，全局：

  1. 图片必须压缩。比如店铺详情中，底下“他们做的不错”中的宋鸿兵图片大小超过 500kb， 远超其余 70kb 的均值，这张图不应该这么大。另外在帮助中心里还存在 1.4M 的图片，实在太大

  2. HTML 中有大量无内容的标签存在，这一部分应该去掉的，如果是因为业务可能存在的需求，在开发文件中注释掉，等待启用也就可以啦，通过 webpack 等工具 build 出来后就不会出现在用户页面中了。

    举例，比如帮助中心主页面中即存在：

    <p style="white-space: normal;"><span class="author-17741 font-color-12 font-size-3" style="font-size: 11pt;"><br></span></p>

  1. 尽量使用语义化的标签，能够用标签来完成的，不应该使用 div 来模拟，然后再使用 css 。比如主页面左侧导航栏存在：

    <div class="base_divide_line"></div>

    里边使用了空白的 div 标签，并设置高度来换行/增加间距。

    实际上，以上两处直接使用 br 标签就完成了（在帮助中心的问题汇总中，大量存在这一类空标签换行/撑开空隙）

    另外，不应该用 div 来充当 a 标签


二，专栏页面：

  1. 点击排序，出来的操作框中，input 的宽度小了一点点，导致 placeholder 里边的最后一个字有些超出界限，看不到了

三，用户界面 -> 访问用户：

  1. 第二个多选菜单，选择手机号码时，宽度不够，“码”字有一小部分被遮挡了

四，用户界面 -> 消息列表

  1. 屏幕分辨率拉到最小值 1240px 时，订单状态和分销情况的 input 已经超出页面

五，我的服务 -> 流量账户：

  1. 导出流量记录这个 button 中的文字超出界限

六，直播界面：

  1. 直播类型的选择中，“直播类型”应该是要禁止选择的，只是一种提示，增加一个 disable 属性即可

七，设置页面：

  1. 店铺装修中的文字描述所占据的空间太小，导致高度被撑开，页面高度拉大，实际上表格中的空间足够大，不应该去撑开高度的，这个方式破坏了页面本身的布局

  2. 流量模式右侧少一个链接按钮

  3. 功能配置中的文字没有对齐

  4. 店铺装修中的“分享自定义”缺少中间的信息描述，右侧“了解详情”的位置不对，最后，这一行的底部边框没有完全贴合


八，数据分析页面：

  1. 趋势分析中保存为图的按钮部分超出了边界，且字体显示不全

九，左侧导航栏：

  1. 点击会员，但是背景色的显示跳到了营销部分，二者内容其实是不一样的

十，帮助中心 -> 主页面：

  1. 热门专题的店铺装修处，hover 的时候阴影未显示，因为高度不够了

  2. 应该在第一行，它能让数据获取方得知此页面的元数据。最先得知页面编码，进而获取之后meta（如果有）内的作者、关键字等数据（因为这些内容可能是非ASCII字符）时，可以用指定编码方式获取。获取方得到全部元数据后可以自行判断是否继续获取其后内容


十一，帮助中心 -> 内容页：

  1. 图片需要进一步压缩，有多张图片过于巨大，实际上不需要这么大，另外部分图片裁切不准确，有些不应该出现在用户界面的应该裁剪。

    举例：

    开通店铺 -- 开通知识店铺 中的第一张图片大小为 1.4MB


    内容付费 -- 专栏 -- 创建专栏商品 中的第一张图片大小为 819kb


  1. 文字样式未统一，导致各部分图文的排版不一致。

    举例：

    内容付费 -- 视频 -- 创建视频商品 一部分段落跟图片之间没有间距，一部分又有间距


  1. 一部分单位使用 pt， 另一部分使用 px ，文字大小不一

  1. 多余的空白元素或者文字未删除。

    举例：

    内容付费 -- 图文 -- 创建图文商品 视频下边多了两个点，实际上是两个空的元素未删除造成的


    内容付费 -- 会员 -- 会员排序 第三章图片下边多出一行字，实际上是别的文章（专栏）的内容


  1. 视频格式中， 中虽然指定了ogg,webm,mp4 格式，但实际上 src 的地址全是 mp4，并未做区分。

    举例：

    全部视频都这样，比如 内容付费 -- 专栏 -- 创建专栏商品 中的视频地址


  1. 段落分层不对。

    举例：

    内容付费 -- 专栏 -- 创建专栏商品 中，步骤使用了 1,2,3,4 之后，第二部分内容又以 2 开头，实际上应该是 一，内容： 1,2,3,4 .... 紧接着应该是 二 xxx：1,2,3,4


  1. 文字的最大宽度是 880px ，但是图片和视频的宽度设置最大宽度是 800px ，这样导致文字和图片不能对齐。举例：所有文章都这样......

  1. 视频在打开后，点击其他内容，原视频未关闭，只有在刷新页面后才停止

十二，帮助中心 -> 新手专区：

  1. 每个小节右侧的小图标跟文字重合了

  2. 中间的文字区域够大，实际上不需要隐藏文字，不需要固定文字区域的宽度，自然贴合即可

  3. 章节和标题之间的竖线，应该用 border 来实现，自动贴合高度而不是硬编码指定一个，不然会给后期维护增加困难

  4. 内容重复 --- 查看订单记录出现 2 次



并非 BUG ，只是关乎用户体验：（以下内容全部在项目中实现了）

  1. 所有字母，数字，符号跟相邻的中文字符之间要有空格，不然眼睛看得比较疲劳

  2. 图文界面，视频界面，音频界面，专栏界面，直播界面共计 4 个页面的搜索框提示符，不应该都是输入商品名称，而是各自对应的“图文名称”，“视频名称”，“音频名称”，“专栏名称”

  3. 真实世界的文字不会是刀削斧凿那般线条分明，墨水写到纸张上后，会有很小部分的墨水呈现向四周扩散的状态，也就是文字浸润的效果，body 增加 text-shadow: 0 0 1px rgba(128, 128, 128, .2) 后视觉体验也许会更好一些

  4. 对所有 table 标签加入了 border ，看起来更舒服一点，内容被框在线条中，能够帮助分辨


一，用户界面 -> 访问用户：

  1. 第二个多选菜单和右侧的搜索框之间应该要有间隙

  2. 提示图标 hover 上去时，提示文字的出现应该增加一个动画效果


二，用户界面 -> 消息列表

  1. +推送全员按钮这里，可能是多了一个 + 号

三，我的服务 -> 服务订购 和 流量账户 界面：

  1. 服务订购界面中，订购记录和下方的元素之间应有空隙，增加点外边距

  2. 流量账户界面中，点击资费说明时，弹出的提示，应该对文字进行区分，以便用户阅读，重点部分，用不同的颜色来处理，以便用户快速抓住重点


四，设置页面：

  1. 表格每一行在鼠标 hover 上去的时候应该有“提示”，这样用户的视线能够快速定位，知道自己看到的是哪一行

五，店铺主页：

  1. 顶部的用户信息导航栏的状态过渡应该增加动画效果

六，帮助中心 -> 主页面：

  1. 页脚（footer）文字跳转链接 hover 上去的时候应有提示

  2. 页脚微信二维码的出现应该用动画过渡

  3. 搜索框中进行搜索时，最好有热门搜索提示


七，帮助中心 -> 新手专区：

  1. 由于章节众多，用户眼睛可能疲劳，应当增加一个鼠标 hover 到哪一章节的提示（轻微改变背景色）

八，帮助中心 -> 问题汇总：

  1. 左侧的导航栏之间的切换，由于栏目众多，打开多个后导致视觉难以聚焦，要快速找到需要点击的地方比较费劲，所以，在点击一个导航栏之后，应该把其余的关上，并且 ，正在显示的这个导航栏应该给予视觉上的提示（我在导航栏文字下方做了一个蓝色线条，以此作为提示）