shijiplus-web-plugin 0.1.0

package/src/index.less

@@ -0,0 +1,504 @@
+@import '~iview/src/styles/index.less';
+
+@menu-dark-title           : #001529;
+@menu-dark-active-bg       : #000c17;
+@layout-sider-background   : #001529;
+@primary-color             : #9837BE;
+@primary-color-light       : rgba(152, 55, 190, 0.1);
+@link-color                : #6B1785;
+// @info-color             : @primary-color;
+@btn-primary-bg            : #9837BE;
+@error-color               : #FF0000;
+@btn-group-border          : shade(#9837BE, 5%);
+@font-size-small           : 14px;
+@btn-font-size             : @font-size-small;
+@btn-padding-base          : 7px 12px 7px;
+@btn-padding-small         : 4px 8px 4px;
+@line-height-base          : 1.2;
+@layout-body-background    : #f8f8f9;
+
+:root {
+  --text-color         : @text-color;
+  --table-td-hover-bg  : @table-td-hover-bg;
+  --border-radius-base : @border-radius-base;
+  --primary-color      : #9837BE;
+  --subsidiary-color   : @subsidiary-color;
+  --primary-color-light: @primary-color-light;
+  --success-color      : @success-color;
+  --disabled-color     : #C5C8CE;
+  --disabled-bg-color  : #F7F7F7;
+  --border-radius      : @border-radius-base;
+  --border-color       : @border-color-base;
+  --border-style       : @border-style-base;
+  --border-width       : @border-width-base;
+  --border             : @border-color-base @border-style-base @border-width-base;
+  --line-height-base   : @line-height-base;
+
+  --level-1-text-size  : 16px;
+  --level-2-text-size  : 14px;
+  --level-3-text-size  : 12px;
+  --level-1-text-color : @title-color;
+  --level-2-text-color : @text-color;
+  --level-3-text-color : #9EA7B4;
+  --level-1-text-weight: 600;
+  --shadow-card        : @shadow-card;
+  --shadow-up          : @shadow-up;
+  --shadow-down        : @shadow-down;
+  --shadow-left        : @shadow-left;
+  --shadow-right       : @shadow-right;
+}
+
+.ivu-modal-wrap {
+  display        : flex;
+  align-items    : center;
+  justify-content: center;
+
+  .ivu-modal {
+    top: 0;
+
+    .ivu-modal-body {
+      font-size         : @font-size-small;
+      @line-height-base : 1.2;
+    }
+  }
+}
+
+.ivu-btn {
+  &:hover {
+    opacity: 0.9;
+  }
+
+  // .plus-icon {
+  //   img {
+  //     transition: filter .2s linear;
+  //   }
+  // }
+
+  &.ivu-btn-default:hover {
+    .plus-icon {
+      --vector     : -1;
+      --filterColor: @btn-primary-bg  !important;
+    }
+  }
+
+  &:focus {
+    box-shadow: none;
+  }
+
+  &>span {
+    display        : flex;
+    align-items    : center;
+    justify-content: center;
+  }
+
+  .plus-icon {
+    margin-right: 8px;
+  }
+}
+
+.ivu-btn-primary {
+  border-color: @btn-primary-bg;
+
+  &:hover {
+    color: #FFFFFF;
+  }
+}
+
+.ivu-btn-info {
+  border-color: @btn-primary-bg;
+
+  &.ivu-btn-ghost {
+    color: @link-color;
+  }
+}
+
+.activity-border {
+  border-color: @primary-color  !important;
+}
+
+.activity-bg {
+  background-color: @primary-color  !important;
+  color           : #FFF;
+}
+
+.click-span {
+  color    : @link-color;
+  cursor   : pointer !important;
+  font-size: 12px;
+
+  &.normal {
+    color: initial;
+  }
+
+  &.disabled {
+    color : #C5C8CE;
+    cursor: default !important;
+  }
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.outlineBtn {
+  background-color: white;
+  color           : @primary-color;
+  border-color    : @primary-color;
+}
+
+.tool-tip .ivu-tooltip-popper .ivu-tooltip-content .ivu-tooltip-inner {
+  max-width: initial;
+
+  .tool-tip-content {
+    width: fit-content;
+  }
+}
+
+.form-item-line-span {
+  line-height: 32px;
+  height     : 32px;
+}
+
+.statis-block,
+.statis-block-end {
+  border         : 1px solid @border-color-base;
+  border-bottom  : none;
+  display        : flex;
+  width          : 400px;
+  justify-content: center;
+
+  .left {
+    flex        : 1;
+    border-right: 1px solid @border-color-base;
+    text-align  : center;
+  }
+
+  .right {
+    flex      : 1;
+    text-align: center
+  }
+
+  &.landspace {
+    border        : none;
+    flex-direction: column;
+    border-right  : 1px solid @border-color-base;
+
+    &:last-child {
+      border-right: none;
+    }
+
+    .label,
+    .value {
+      flex      : 1;
+      text-align: center;
+      padding   : 2px 0;
+    }
+
+    .label {
+      border-bottom: 1px solid @border-color-base;
+    }
+  }
+
+}
+
+.statis-block-end {
+  border-bottom: 1px solid @border-color-base;
+}
+
+.i-flex-wrap {
+  display  : flex;
+  flex-wrap: wrap;
+
+  &.nowrap {
+    flex-wrap: nowrap;
+  }
+
+  &.justify-between {
+    justify-content: space-between;
+  }
+
+  &.justify-around {
+    justify-content: space-around;
+  }
+
+  &.justify-end {
+    justify-content: flex-end;
+  }
+
+  .f-grow {
+    flex-grow: 1;
+  }
+
+  .f-no-shrink {
+    flex-shrink: 0;
+  }
+
+  &>.ivu-btn,
+  &>span,
+  &>label,
+  &>input {
+    margin-right: 3px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .justify-end {
+    justify-self: end;
+    margin-left : auto;
+    margin-right: 0;
+  }
+}
+
+.f-col {
+  display       : flex;
+  flex-direction: column;
+}
+
+.justify-center {
+  display        : flex;
+  justify-content: center;
+  justify-items  : center;
+}
+
+.align-center {
+  display      : flex;
+  align-items  : center;
+  align-content: center;
+}
+
+.align-end {
+  display      : flex;
+  align-items  : flex-end;
+  align-content: flex-end;
+}
+
+
+.line-1,
+.line-2 {
+  display           : -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp        : 1;
+  text-overflow     : ellipsis;
+  overflow          : hidden;
+  word-break        : break-all;
+  -webkit-box-orient: vertical;
+}
+
+.line-2 {
+  -webkit-line-clamp: 2;
+  line-clamp        : 2;
+}
+
+.f-s-12 {
+  font-family: PingFangSC-Regular;
+  font-size  : 12px;
+  line-height: 16px;
+}
+
+.f-s-14 {
+  font-size: 14px;
+}
+
+.f-s-16 {
+  font-size     : 16px;
+  font-family   : PingFangSC-SNaNpxibold;
+  letter-spacing: 0.44px;
+  line-height   : 26px;
+}
+
+.f-s-24 {
+  font-size: 24px;
+}
+
+.f-w-700 {
+  font-weight: 700;
+}
+
+.f-w-600 {
+  font-weight: 600;
+}
+
+.f-w-500 {
+  font-weight: 500;
+}
+
+.f-w-400 {
+  font-weight: 400;
+}
+
+.f-w-300 {
+  font-weight: 300;
+}
+
+.f-lh-16 {
+  line-height: 16px;
+}
+
+.f-lh-20 {
+  line-height: 20px;
+}
+
+.f-lh-28 {
+  line-height: 28px;
+}
+
+.f-lh-30 {
+  line-height: 30px;
+}
+
+.f-c-17233D {
+  color: var(--level-1-text-color);
+}
+
+.f-c-515A6E {
+  color: var(--level-2-text-color);
+}
+
+.f-c-9EA7B4 {
+  color: var(--level-3-text-color);
+}
+
+.white-break {
+  white-space: break-spaces;
+}
+
+.primary-border {
+  border: 1px solid @primary-color;
+}
+
+.card-block {
+  border       : 1px solid #d7d7d7;
+  border-radius: 4px;
+  padding      : 20px;
+  margin-right : 10px;
+}
+
+.plus-tag {
+  box-sizing   : border-box;
+  display      : block;
+  padding      : 0 2px;
+  height       : fit-content;
+  background   : #F8F8F9;
+  border-radius: 4px;
+  color        : #515A6E;
+
+  &.default {
+    background-color: #EFEFF2;
+    border-color    : #EFEFF2;
+  }
+
+  &.primary {
+    background-color: #F9F0FF;
+    color           : @primary-color;
+    border-color    : @primary-color;
+  }
+
+  &.blue {
+    background  : #F4F7FF;
+    color       : #165DFF;
+    border-color: #F4F7FF;
+  }
+
+  &.border {
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  &.red {
+    background  : #ffeded;
+    color       : #f93d62;
+    border-color: #ffeded;
+  }
+
+  &.gray {
+    background  : #f8f8f9;
+    color       : #9ea7b4;
+    border-color: #f8f8f9;
+  }
+
+  &.green {
+    background  : #3cc13b1a;
+    color       : #3cc13b;
+    border-color: #3cc13b1a;
+  }
+
+  // &.click-span {
+  //   &:hover {
+  //     color: inherit;
+  //   }
+  // }
+}
+
+.pd-tp_8 {
+  padding-top   : 8px;
+  padding-bottom: 8px;
+}
+
+.pd-lr_12 {
+  padding-left : 12px;
+  padding-right: 12px;
+}
+
+.ivu-modal-confirm .ivu-modal-confirm-head .ivu-modal-confirm-head-title {
+  display: inline-block;
+}
+
+.border {
+  border-color: @border-color-base;
+  border-style: @border-style-base;
+  border-width: @border-width-base;
+}
+
+.round-border {
+  border-radius: @border-radius-base;
+}
+
+
+.primary-title,
+.secondary-title,
+.normal-title {
+  font-size  : 16px;
+  color      : @title-color;
+  font-weight: bold;
+  font-family: PingFangSC-SNaNpxibold;
+}
+
+.secondary-title,
+.normal-title,
+.content-text {
+  font-size: 14px;
+}
+
+.secondary-title,
+.normal-title,
+.content-text {
+  color: @text-color;
+}
+
+.normal-title,
+.content-text {
+  color: @text-color;
+}
+
+.content-text,
+.sub-text {
+  font-weight: normal;
+}
+
+.sub-text {
+  font-size  : 12px;
+  font-family: PingFangSC-Regular;
+  color      : #9EA7B4;
+}
+
+.disabled {
+  color      : #C5C8CE !important;
+  cursor     : not-allowed !important;
+  font-weight: normal;
+}
+
+.fill-parents {
+  height: 100%;
+}

package/src/locale/index.js

@@ -0,0 +1,40 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import customZhCn from './lang/zh-CN'
+import customZhTw from './lang/zh-TW'
+import customEnUs from './lang/en-US'
+import zhCnLocale from 'iview/src/locale/lang/zh-CN'
+import enUsLocale from 'iview/src/locale/lang/en-US'
+import zhTwLocale from 'iview/src/locale/lang/zh-TW'
+
+Vue.use(VueI18n)
+
+const localRead = (key) => {
+  return localStorage.getItem(key) || ''
+}
+
+// 自动根据浏览器系统语言设置语言
+const navLang = navigator.language
+const localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false
+let lang = localLang || localRead('local') || 'zh-CN'
+
+Vue.config.lang = lang
+
+// vue-i18n 6.x+写法
+Vue.locale = () => {}
+const messages = {
+  'zh-CN': Object.assign(zhCnLocale, customZhCn),
+  'zh-TW': Object.assign(zhTwLocale, customZhTw),
+  'en-US': Object.assign(enUsLocale, customEnUs)
+}
+const i18n = new VueI18n({
+  locale: lang,
+  messages
+})
+
+export default i18n
+
+// vue-i18n 5.x写法
+// Vue.locale('zh-CN', Object.assign(zhCnLocale, customZhCn))
+// Vue.locale('en-US', Object.assign(zhTwLocale, customZhTw))
+// Vue.locale('zh-TW', Object.assign(enUsLocale, customEnUs))

package/src/locale/lang/en-US.js

@@ -0,0 +1,46 @@
+export default {
+  home: 'Home',
+  login: 'Login',
+  components: 'Components',
+  count_to_page: 'Count-to',
+  tables_page: 'Table',
+  split_pane_page: 'Split-pane',
+  markdown_page: 'Markdown-editor',
+  editor_page: 'Rich-Text-Editor',
+  icons_page: 'Custom-icon',
+  img_cropper_page: 'Image-editor',
+  update: 'Update',
+  doc: 'Document',
+  join_page: 'QQ Group',
+  update_table_page: 'Update .CSV',
+  update_paste_page: 'Paste Table Data',
+  multilevel: 'multilevel',
+  directive_page: 'Directive',
+  level_1: 'Level-1',
+  level_2: 'Level-2',
+  level_2_1: 'Level-2-1',
+  level_2_3: 'Level-2-3',
+  level_2_2: 'Level-2-2',
+  level_2_2_1: 'Level-2-2-1',
+  level_2_2_2: 'Level-2-2-2',
+  excel: 'Excel',
+  'upload-excel': 'Upload Excel',
+  'export-excel': 'Export Excel',
+  tools_methods_page: 'Tools Methods',
+  drag_list_page: 'Drag-list',
+  i18n_page: 'Internationalization',
+  modalTitle: 'Modal Title',
+  content: 'This is the modal box content.',
+  buttonText: 'Show Modal',
+  'i18n-tip': 'Note: Only this page is multi-language, other pages do not add language content to the multi-language package.',
+  error_store_page: 'Error Collection',
+  error_logger_page: 'Error Logger',
+  query: 'Query',
+  params: 'Params',
+  cropper_page: 'Cropper',
+  message_page: 'Message Center',
+  tree_table_page: 'Tree Table',
+  org_tree_page: 'Org Tree',
+  drag_drawer_page: 'Draggable Drawer',
+  tree_select_page: 'Tree Selector'
+}

package/src/locale/lang/zh-CN.js

@@ -0,0 +1,46 @@
+export default {
+  home: '首页',
+  login: '登录',
+  components: '组件',
+  count_to_page: '数字渐变',
+  tables_page: '多功能表格',
+  split_pane_page: '分割窗口',
+  markdown_page: 'Markdown编辑器',
+  editor_page: '富文本编辑器',
+  icons_page: '自定义图标',
+  img_cropper_page: '图片编辑器',
+  update: '上传数据',
+  join_page: 'QQ群',
+  doc: '文档',
+  update_table_page: '上传CSV文件',
+  update_paste_page: '粘贴表格数据',
+  multilevel: '多级菜单',
+  directive_page: '指令',
+  level_1: 'Level-1',
+  level_2: 'Level-2',
+  level_2_1: 'Level-2-1',
+  level_2_3: 'Level-2-3',
+  level_2_2: 'Level-2-2',
+  level_2_2_1: 'Level-2-2-1',
+  level_2_2_2: 'Level-2-2-2',
+  excel: 'Excel',
+  'upload-excel': '上传excel',
+  'export-excel': '导出excel',
+  tools_methods_page: '工具函数',
+  drag_list_page: '拖拽列表',
+  i18n_page: '多语言',
+  modalTitle: '模态框题目',
+  content: '这是模态框内容',
+  buttonText: '显示模态框',
+  'i18n-tip': '注：仅此页做了多语言，其他页面没有在多语言包中添加语言内容',
+  error_store_page: '错误收集',
+  error_logger_page: '错误日志',
+  query: '带参路由',
+  params: '动态路由',
+  cropper_page: '图片裁剪',
+  message_page: '消息中心',
+  tree_table_page: '树状表格',
+  org_tree_page: '组织结构树',
+  drag_drawer_page: '可拖动抽屉',
+  tree_select_page: '树状下拉选择器'
+}

package/src/locale/lang/zh-TW.js

@@ -0,0 +1,46 @@
+export default {
+  home: '首頁',
+  login: '登錄',
+  components: '组件',
+  count_to_page: '数字渐变',
+  tables_page: '多功能表格',
+  split_pane_page: '分割窗口',
+  markdown_page: 'Markdown編輯器',
+  editor_page: '富文本編輯器',
+  icons_page: '自定義圖標',
+  img_cropper_page: '圖片編輯器',
+  update: '上傳數據',
+  join_page: 'QQ群',
+  doc: '文檔',
+  update_table_page: '上傳CSV文件',
+  update_paste_page: '粘貼表格數據',
+  multilevel: '多级菜单',
+  directive_page: '指令',
+  level_1: 'Level-1',
+  level_2: 'Level-2',
+  level_2_1: 'Level-2-1',
+  level_2_3: 'Level-2-3',
+  level_2_2: 'Level-2-2',
+  level_2_2_1: 'Level-2-2-1',
+  level_2_2_2: 'Level-2-2-2',
+  excel: 'Excel',
+  'upload-excel': '上傳excel',
+  'export-excel': '導出excel',
+  tools_methods_page: '工具函數',
+  drag_list_page: '拖拽列表',
+  i18n_page: '多語言',
+  modalTitle: '模態框題目',
+  content: '這是模態框內容',
+  buttonText: '顯示模態框',
+  'i18n-tip': '注：僅此頁做了多語言，其他頁面沒有在多語言包中添加語言內容',
+  error_store_page: '錯誤收集',
+  error_logger_page: '錯誤日誌',
+  query: '帶參路由',
+  params: '動態路由',
+  cropper_page: '圖片裁剪',
+  message_page: '消息中心',
+  tree_table_page: '樹狀表格',
+  org_tree_page: '組織結構樹',
+  drag_drawer_page: '可拖動抽屜',
+  tree_select_page: '樹狀下拉選擇器'
+}

package/src/main.js

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import App from './App.vue'
+import iView from 'iview'
+import './index.less'
+import i18n from '@/locale'
+import ExtentionPlugin from '@/extentionPlugin'
+import importDirective from '@/directive'
+
+Vue.config.productionTip = false
+
+/**
+ * 注册指令
+ */
+importDirective(Vue)
+
+Vue.use(ExtentionPlugin)
+Vue.use(iView, {
+  i18n: (key, value) => i18n.t(key, value)
+})
+new Vue({
+  render: h => h(App),
+}).$mount('#app')