fix

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 10

.editorconfig

@@ -0,0 +1,8 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf

.env.development

@@ -0,0 +1,11 @@
+#### 如果需要改变以下环境变量的值，请在根目录下新增 .env.development.local 文件，里面设置的变量会覆盖本文件，并且不会被提交
+VUE_APP_CORE_HOST_URL=https://192.168.10.39
+VUE_APP_EXAM_WORK_HOST_URL=https://192.168.10.39
+VUE_APP_QUESTIONS_HOST_URL=http://192.168.10.150:8900
+VUE_APP_OE_HOST_URL=https://192.168.10.39
+VUE_APP_MARKING_HOST_URL=https://192.168.10.39
+VUE_APP_DATA_PROCESS_HOST_URL=https://192.168.10.39
+VUE_APP_REPORTS_HOST_URL=https://192.168.10.39
+VUE_APP_TASK_HOST_URL=https://192.168.10.39
+VUE_APP_PRINT_HOST_URL=https://192.168.10.39
+VUE_APP_EXCHANGE_HOST_URL=https://192.168.10.39

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],
+  parserOptions: {
+    parser: "babel-eslint",
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "off" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "vue/no-v-html": "off",
+  },
+  overrides: [
+    {
+      files: [
+        "**/__tests__/*.{j,t}s?(x)",
+        "**/tests/unit/**/*.spec.{j,t}s?(x)",
+      ],
+      env: {
+        jest: true,
+      },
+    },
+  ],
+};

.gitignore

@@ -1,11 +1,24 @@
-*.class
-.project
-.classpath
-.settings
-target/
-.idea/
-*.iml
-*.log
-*.class
-*.war
-*.ear
+.DS_Store
+node_modules
+/dist
+package-lock.json
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+
+yarn.lock

README.md

@@ -0,0 +1,130 @@
+# 介绍
+
+本项目是作为公司的前端的模板项目。采用的是 Vue 的全家桶技术。
+
+本文档介绍项目如何使用和扩展、采用的技术栈、目录结构和最佳实践等。你不用一次看完所有内容，但是建议在正式开发前完整读一遍文档。
+
+## 安装、启动和打包
+
+安装：
+
+请安装最新的 node (目前的版本为 15.7.0)
+
+```bash
+# 安装yarn。未来所有的包都由yarn来安装。但是执行脚本可以由npm来做。
+npm install yarn -g
+```
+
+```bash
+# 如果没有全局安装Vue Cli 4.x
+yarn global add @vue/cli
+```
+
+```bash
+yarn
+```
+
+启动:
+
+```bash
+npm start
+```
+
+打包:
+
+```bash
+npm run build
+```
+
+## 技术栈
+
+Vue 2.x
+Vuex 3.x
+Vue router 2.x
+
+TODO: 架构图
+
+## 构建工具
+
+vue-cli
+
+## 工具安装
+
+### Chrome 插件
+
+[Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+
+## VS Code 插件
+
+1.  Vetur (Author: Pine Wu)
+1.  Prettier (Author: Esben Petersen) # 注意: 其他的 vscode 插件可能导致格式化不一致
+1.  ESLint (Author: Dirk Baeumer)
+1.  Vue 2 Snippets (Author: hollowtree)
+1.  GitLens (Author: Eric Amodio) - optional
+1.  REST Client (Author: Huachao Mao) - optional
+1.  Quokka.js (Author: Wallaby.js) - optional
+
+## 目录结构
+
+| 目录                      | 说明                                                                                                                                                                                                                                                                                                               |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| build/                    | 打包产出                                                                                                                                                                                                                                                                                                           |
+| node_modules/             | 依赖包                                                                                                                                                                                                                                                                                                             |
+| src/modules               | 模块化开发，分为基础信息、考务、网考管理、题库、印刷、报表等                                                                                                                                                                                                                                                       |
+| src/modules/\*/assets/    | 图片、音频文件等文件. 在多数情况下，应该把资源文件放在 src/modules/\*/features/下，这种情况可以让应用垂直划分，同时可以更干净的删除资源。                                                                                                                                                                          |
+| src/auth/                 | 认证信息是全局的                                                                                                                                                                                                                                                                                                   |
+| src/components/           | 全局组件                                                                                                                                                                                                                                                                                                           |
+| src/modules/\*/constants/ | 集中放置全局  常量，方便更新 API 的服务器地址等                                                                                                                                                                                                                                                                    |
+| src/directives/           | 全局的 directive                                                                                                                                                                                                                                                                                                   |
+| src/modules/\*/features/  | 实现业务需求的组件。目标是让尽可能多的相关文件在相同的业务组件内。这使得开发团队可以更好的划分任务。业务组件可以依赖全局元素，如 src/auth, src/components, src/directives，或者依赖其它业务组件。但是业务组件不应该依赖其它业务组件的子组件，它应该使用其它组件的 public API。必要时，子组件可能在业务组件中重复。 |
+| src/http/                 | 包含非认证  的 HTTP 请求（ 认证的部分应该在 src/auth 中做）。同时包含 router 和 routes。如果 routes 变的很大，可以将它拆分到 src/features 中，然后通过 import 引用。                                                                                                                                               |
+| src/modules/\*/store/     | 使用 Vuex 管理状态的单一 store                                                                                                                                                                                                                                                                                     |
+| src/styles/               | 全局样式。 局部样式应该放在 src/modules/\*/features/中                                                                                                                                                                                                                                                             |
+| src/utils/                | 共享的工具类。 跟业务有关的  工具方法放在 src/features/中                                                                                                                                                                                                                                                          |
+| static/                   | 不需要 Webpack 处理的静态文件                                                                                                                                                                                                                                                                                      |
+| tests/                    | 单元测试和 E2E 测试                                                                                                                                                                                                                                                                                                |
+
+## 错误处理
+
+### 通用的错误处理
+
+#### API 请求
+
+从用户操作，界面有一处集中显示操作反馈。  
+处理顺序如下：
+
+1.  用户操作
+2.  触发 vue action
+3.  调用 vuex action（无需处理错误）
+4.  调用 api，若出错，修改全局错误状态，并通知展示状态
+5.  界面展示程序状态，即出错信息
+
+如果用户需要 vuex action 的结果，可以在 vuex action 里面返回 promise，不建议在 component 处理状态。
+应该尽可能通过 store 的状态更新使得界面更新。
+
+## 状态处理
+
+无需共享状态的组件可以直接在组件的生命周期中发请求获取数据。一般是纯显示的组件比较多。
+
+共享状态的通过 vuex 来处理。
+
+## 图标处理
+
+采用[vue-awesome](https://github.com/Justineo/vue-awesome)的库。  
+在 src/plugins/vueAwesome.js 添加对应的图标。  
+图标名称和形状可以在 [Font Awesome](https://fontawesome.com/icons?d=gallery) 查找。  
+使用时采用
+
+```html
+<v-icon name="lock" scale="3" />
+```
+
+## TODO:
+
+1. module state
+2. 新项目以 ES2018 为基准，选择 stage 3 的特性，将常用的特性列表在 readme 中给出网址
+
+### 参考资料
+
+1.  [Vue-pizza](https://github.com/prograhammer/vue-pizza)
+1.  [Error handling with async-await in Vue and Vuex](https://dimitrioslytras.com/vue-error-handling/)

UI规范.md

@@ -0,0 +1,184 @@
+# 背景
+
+UI 规范本来应该由 UI 设计师来确定，但在设计师缺失的情况下，仅靠程序员也能高效方便的做出一种中规中矩的 UI。  
+本文以 Web 为设计目标，移动端原生应用有很大不同，但可以根据这些章节做对应修改。  
+本文考虑能应用到 mobile first 的场景。
+
+## 需求
+
+程序员一般不具备整体的页面设计能力，所以需要提供的是明确的指令和模板。  
+程序员不应该深入设计细节，应该通过表达意图，而不是具体细节来完成业务。  
+意图：按钮：主要，大小。
+默认对齐：文字在不同的容器内对齐方式不一样，按钮、表格、标题。元素之间的对齐。
+
+- 常用的页面模板。登录，注册，主页，顶部导航，侧边导航，表单查询，表格。
+- 按钮的类型。
+
+css reset
+h1 div container responsive
+
+normal-text
+rem: root em
+em: container em
+em 与组件库之间的关系
+浏览器默认的字体是 16px。
+
+字体大小会随着设备的大小而调整？必要性？设备大小，只影响布局？
+
+块之间的间距。间距来标明各块之间的亲密度。
+相同背景色的块之间的分隔线。
+
+从已有的项目中抽取规范。
+
+```s
+.title-text {
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 32px;
+  color: #1a1a1a;
+}
+```
+
+## 布局
+
+### header
+
+```s
+.bd-navbar {
+  min-height: 4rem;
+}
+.navbar {
+}
+```
+
+### 侧边栏 sidebar
+
+### 底边 footer
+
+### 默认的边距(margin/padding)
+
+默认的边距为$spacer，$spacer 为 1rem。mt、py-2 等等为定制的边距。mt-n2 可以为负的 margin。
+
+### 模块间距
+
+一般的 padding 是 1rem。
+column 的 padding 是 15px。但 rem/html_font-size 是 16px，这里做一下改变？
+
+### 行高 line-height
+
+### 段落间距 paragraph margin
+
+### 间距的渐进（亲密性）
+
+导航以颜色来区分。  
+模块以线条分割。
+标题与正文之间间隔 2rem。
+正文的 line-height 为 1.5rem。
+段落之间的分割为 1rem？
+
+## 颜色
+
+- 标题颜色 #000000
+- 提示颜色 #666666
+- 文字点击状态 #FF8900
+- 文字悬浮颜色
+- 链接颜色
+- 链接悬浮变色
+- 品牌色
+- 正文色
+- 标题色
+- 副标题色
+- 作者、日期等色
+- 背景色
+- 边框色
+- 输入框填充色
+- 阴影色
+- 成功操作颜色
+- 失败操作颜色
+
+## 字体
+
+### font-family
+
+优先采用系统默认字体。
+
+```s
+  // Safari for OS X and iOS (San Francisco)
+  -apple-system,
+  // Windows
+  "Segoe UI",
+  // Android
+  "Roboto",
+  // Basic web fallback
+  "Helvetica Neue", Arial, sans-serif,
+```
+
+### font-size
+
+### font-weight
+
+## 图片
+
+### svg
+
+### 应用本身的图片尺寸
+
+顶部导航图标 48
+个人中心指示性图标 32
+
+### 图片与描述的间距
+
+0.5rem？
+
+### 按钮中图片与文字的间距，line-height，font-size
+
+间距 0.5em ？
+图片与文字高度一致
+
+### 按钮中图片的变色
+
+### 透明度
+
+透明度可以用来对比重要和不重要，启用和禁用。
+
+## 样例
+
+## Bootstrap 链接
+
+### 定制
+
+### Reboot
+
+### 颜色
+
+### 表单对齐
+
+### 表格对齐
+
+### 水平居中
+
+### 垂直居中
+
+### 水平和垂直居中
+
+### Utilities
+
+### ElementUI
+
+## TODO
+
+- UI guildlines auto check
+- flex class (bootstrap container class)
+- media query breakpoint
+- border / line-height
+- color variables
+- namespace
+- 定制已有组件
+- 科普：颜色对比度。像素，ppi。
+- z-index 规划
+- sketch=ui axure=product js/css/html=component
+- 网页
+- animation
+
+https://zellwk.com/blog/rem-vs-em/
+https://www.designbetter.co/design-systems-handbook

babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+  // 因为webpack4不支持option chaining
+  plugins: [
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+  ],
+};

jenkins.sh

@@ -0,0 +1,31 @@
+#!/bin/bash
+set -e # 如果构建失败，则退出，不能删除旧的包
+
+if [ "$#" -ne 1 ] ; then
+  echo "Usage: $0 BUILD_ENV" >&2
+  exit 1
+fi
+
+pwd
+
+echo “build env: $1”
+
+pwd
+
+yarn
+npm run build:$1
+
+mkdir -p ~/project/examcloud/static-new/admin/temp
+cp -r  dist ~/project/examcloud/static-new/admin/temp
+
+cd ~/project/examcloud/static-new/admin
+if [ -d "dist" ]; then
+  currentTime=`date "+%Y%m%d%H%M%S"`
+  echo "dist backup... $currentTime"
+  tar cf admin-bak-$currentTime.tar.gz dist
+  rm -rf dist/*
+fi
+
+mv temp/dist .
+rm -rf temp
+echo "ok..."

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: "@vue/cli-plugin-unit-jest",
+};

jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "commonjs",
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "**/node_modules/*"]
+}

package.json

@@ -0,0 +1,67 @@
+{
+  "name": "ecs-web-admin",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "start": "vue-cli-service serve --port 3000",
+    "serve": "vue-cli-service serve",
+    "build:dev": "vue-cli-service build",
+    "build:test": "vue-cli-service build",
+    "prebuild:prod": "node prebuild",
+    "build:prod": "vue-cli-service build",
+    "postbuild:prod": "IS_PROD=true node postbuild",
+    "lint": "vue-cli-service lint",
+    "test:unit": "vue-cli-service test:unit"
+  },
+  "dependencies": {
+    "axios": "^0.21.1",
+    "axios-progress-bar": "^1.2.0",
+    "bootstrap": "^4.6.0",
+    "echarts": "^4.9.0",
+    "element-ui": "^2.15.0",
+    "lodash": "^4.17.15",
+    "moment": "^2.29.1",
+    "print-js": "^1.0.61",
+    "randomcolor": "^0.6.2",
+    "rasterizehtml": "^1.3.0",
+    "register-service-worker": "^1.7.2",
+    "spark-md5": "^3.0.1",
+    "viewerjs": "^1.9.0",
+    "vue": "^2.6.12",
+    "vue-awesome": "^4.1.0",
+    "vue-echarts": "^4.1.0",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.11",
+    "@vue/cli-plugin-eslint": "~4.5.11",
+    "@vue/cli-plugin-pwa": "~4.5.11",
+    "@vue/cli-plugin-router": "~4.5.11",
+    "@vue/cli-plugin-unit-jest": "~4.5.11",
+    "@vue/cli-plugin-vuex": "~4.5.11",
+    "@vue/cli-service": "~4.5.11",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/test-utils": "^1.0.3",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.15.0",
+    "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-vue": "^7.3.0",
+    "lint-staged": "^10.5.3",
+    "prettier": "^2.2.1",
+    "sass": "^1.30.0",
+    "sass-loader": "^10.1.0",
+    "vue-cli-plugin-axios": "0.0.4",
+    "vue-cli-plugin-element": "^1.0.1",
+    "vue-template-compiler": "^2.6.12"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,vue}": [
+      "vue-cli-service lint",
+      "git add"
+    ]
+  }
+}

postbuild.js

@@ -0,0 +1,30 @@
+console.log("> postbuild");
+const fs = require("fs");
+
+console.log("process.env.IS_PROD", process.env.IS_PROD);
+
+if (process.env.IS_PROD === "true") {
+  console.log("> postbuild 将sourcemap文件改名，防止源码泄露");
+
+  const revision = require("child_process")
+    .execSync("git rev-parse HEAD")
+    .toString()
+    .trim()
+    .slice(10, 17);
+  const DIR = "./dist/js/";
+  const sourcemaps = fs
+    .readdirSync(DIR)
+    .filter((v) => v.endsWith(".map"))
+    .map((v) => DIR + v);
+  for (const s of sourcemaps) {
+    fs.renameSync(s, s.replace(".js.map", "-" + revision + ".js.map"));
+    console.log(
+      "  rename ",
+      s,
+      " => ",
+      s.replace(".js.map", "-" + revision + ".js.map")
+    );
+  }
+
+  console.log();
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};

prebuild.js

@@ -0,0 +1,32 @@
+// const packageJson = require("./package.json");
+
+// if (packageJson.dependencies.iview !== "^3.4.1") {
+//   console.log("iview 的版本不要轻易升级，一定要充分测试。");
+//   process.exit(1);
+// }
+
+console.log("> prebuild");
+console.log("> prebuild create .env.production.local");
+
+const buildDate = require("moment")().format("YYYY-MM-DD HH:mm:SS");
+console.log("  构建日期为 " + buildDate);
+
+const revision = require("child_process")
+  .execSync("git rev-parse HEAD")
+  .toString()
+  .trim()
+  .slice(0, 7);
+const fs = require("fs");
+console.log("  当前的git版本为 " + revision);
+
+fs.writeFileSync(
+  ".env.production.local",
+  "VUE_APP_GIT_REPO_VERSION=" + buildDate + " - " + revision
+);
+
+fs.writeFileSync(
+  ".env.staging.local",
+  "VUE_APP_GIT_REPO_VERSION=" + buildDate + " - " + revision
+);
+
+console.log();

prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  trailingComma: "es5",
+};

vetur.config.js

@@ -0,0 +1,42 @@
+// vetur.config.js
+/** @type {import('vls').VeturConfig} */
+module.exports = {
+  // **optional** default: `{}`
+  // override vscode settings
+  // Notice: It only affects the settings used by Vetur.
+  settings: {
+    "vetur.useWorkspaceDependencies": true,
+    "vetur.experimental.templateInterpolationService": true,
+  },
+  // **optional** default: `[{ root: './' }]`
+  // support monorepos
+  // projects: [
+  //   './packages/repo2', // shorthand for only root.
+  //   {
+  //     // **required**
+  //     // Where is your project?
+  //     // It is relative to `vetur.config.js`.
+  //     root: './packages/repo1',
+  //     // **optional** default: `'package.json'`
+  //     // Where is `package.json` in the project?
+  //     // We use it to determine the version of vue.
+  //     // It is relative to root property.
+  //     package: './package.json',
+  //     // **optional**
+  //     // Where is TypeScript config file in the project?
+  //     // It is relative to root property.
+  //     tsconfig: './tsconfig.json',
+  //     // **optional** default: `'./.vscode/vetur/snippets'`
+  //     // Where is vetur custom snippets folders?
+  //     snippetFolder: './.vscode/vetur/snippets',
+  //     // **optional** default: `[]`
+  //     // Register globally Vue component glob.
+  //     // If you set it, you can get completion by that components.
+  //     // It is relative to root property.
+  //     // Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
+  //     globalComponents: [
+  //       './src/components/**/*.vue'
+  //     ]
+  //   }
+  // ]
+};

vue.config.js

@@ -0,0 +1,73 @@
+const proxy = {
+  "/api/ecs_core": {
+    target: process.env.VUE_APP_CORE_HOST_URL,
+    changeOrigin: true,
+  },
+  "/api/ecs_exam_work": {
+    target: process.env.VUE_APP_EXAM_WORK_HOST_URL,
+    changeOrigin: true,
+  },
+  "/api/ecs_outlet": {
+    target: process.env.VUE_APP_EXCHANGE_HOST_URL,
+    changeOrigin: true,
+  },
+  "/api/uq_basic": {
+    target: process.env.VUE_APP_QUESTIONS_HOST_URL,
+    changeOrigin: true,
+  },
+  "/api/ecs_oe_admin": {
+    target: process.env.VUE_APP_OE_HOST_URL,
+    changeOrigin: true,
+  },
+  "/api/ecs_oe_student": {
+    target: process.env.VUE_APP_OE_HOST_URL,
+    changeOrigin: true,
+  },
+  "/api/ecs_marking": {
+    target: process.env.VUE_APP_MARKING_HOST_URL,
+    changeOrigin: true,
+  },
+  "/api/ecs_data_process": {
+    target: process.env.VUE_APP_DATA_PROCESS_HOST_URL,
+    changeOrigin: true,
+  },
+  "/api/ecs_prt": {
+    target: process.env.VUE_APP_PRINT_HOST_URL,
+    changeOrigin: true,
+  },
+  "/api/ctr/task": {
+    target: process.env.VUE_APP_TASK_HOST_URL,
+    changeOrigin: true,
+  },
+  "/api/ecs_reports": {
+    target: process.env.VUE_APP_REPORTS_HOST_URL,
+    changeOrigin: true,
+  },
+};
+
+var webpack = require("webpack");
+/** @type {import("@vue/cli-service").ProjectOptions} */
+module.exports = {
+  // 这里设置项目的路径，比如 '/admin' 。设置以后 BASE_URL就有值了。
+  // 注意这解决不了CDN的问题，CDN的问题要另行研究。
+  // 可能的方案是另设一个替代 BASE_URL 的环境变量解决 <%%= BASE_URL %%>favicon.ico 和 ${process.env.BASE_URL}service-worker.js
+  publicPath: "/admin",
+  lintOnSave: process.env.NODE_ENV !== "production" ? true : "error",
+  devServer: {
+    proxy,
+  },
+  configureWebpack: {
+    // devtool: "source-map",  // for vscode debug
+    plugins: [
+      // Ignore all locale files of moment.js
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    ],
+  },
+  transpileDependencies: [
+    /\bvue-awesome\b/,
+    /\bvue-echarts\/components\b/,
+    /\bresize-detector\b/,
+  ],
+};
+
+require("events").EventEmitter.defaultMaxListeners = 0;