vue2-client 0.1.1 → 1.0.0

package/src/components/result/Result.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="result">
+    <div >
+      <a-icon :class="[isSuccess ? 'success' : 'error' ,'icon']" :type="isSuccess ? 'check-circle' : 'close-circle'" />
+    </div>
+    <!--
+        将标题的class设置为动态绑定，并在CSS中新增，title_danger，使标题变红加粗
+        对外暴露属性名为title-class
+        例如<result :is-success="icon" :description="description" :title="title" :title-class="titleClass">
+    -->
+    <div :class="titleClass" v-if="title">{{ title }}</div>
+    <div class="desc" v-if="description">{{ description }}</div>
+    <div class="content">
+      <slot></slot>
+    </div>
+    <div class="action">
+      <slot name="action"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Result',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['isSuccess', 'title', 'description', 'titleClass']
+}
+</script>
+
+<style lang="less" scoped>
+  .result{
+    text-align: center;
+    width: 72%;
+    margin: 0 auto;
+    .icon{
+      font-size: 72px;
+      line-height: 72px;
+      margin-bottom: 24px;
+    }
+    .success {
+      color: @success-color;
+    }
+    .error {
+      color: @error-color;
+    }
+    .title{
+      font-size: 24px;
+      color: @title-color;
+      font-weight: 500;
+      line-height: 32px;
+      margin-bottom: 16px;
+    }
+    .title_danger{
+      font-size: 24px;
+      color: red;
+      font-weight: 800;
+      line-height: 32px;
+      margin-bottom: 16px;
+    }
+    .desc{
+      font-size: 20px;
+      line-height: 35px;
+      color: @text-color-second;
+      margin-bottom: 24px;
+    }
+    .content{
+      background-color: @background-color-light;
+      padding: 24px 40px;
+      border-radius: 2px;
+      text-align: left;
+    }
+    .action{
+      margin-top: 32px;
+    }
+  }
+
+</style>

package/src/components/setting/Setting.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="side-setting">
+    <setting-item>
+      <a-button @click="saveSetting" type="primary" icon="save">{{ $t('save') }}</a-button>
+      <a-button @click="resetSetting" type="dashed" icon="redo" style="float: right">{{ $t('reset') }}</a-button>
+    </setting-item>
+    <setting-item :title="$t('theme.title')">
+      <img-checkbox-group
+        @change="values => setTheme({...theme, mode: values[0]})"
+        :default-values="[theme.mode]"
+      >
+        <img-checkbox :title="$t('theme.dark')" img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" value="dark"/>
+        <img-checkbox :title="$t('theme.light')" img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" value="light"/>
+        <img-checkbox :title="$t('theme.night')" img="https://gw.alipayobjects.com/zos/antfincdn/hmKaLQvmY2/LCkqqYNmvBEbokSDscrm.svg" value="night"/>
+      </img-checkbox-group>
+    </setting-item>
+    <setting-item :title="$t('theme.color')">
+      <color-checkbox-group
+        @change="(values, colors) => setTheme({...theme, color: colors[0]})"
+        :defaultValues="[palettes.indexOf(theme.color)]"
+        :multiple="false"
+      >
+        <color-checkbox v-for="(color, index) in palettes" :key="index" :color="color" :value="index" />
+      </color-checkbox-group>
+    </setting-item>
+    <a-divider/>
+    <setting-item :title="$t('navigate.title')">
+      <img-checkbox-group
+        @change="values => setLayout(values[0])"
+        :default-values="[layout]"
+      >
+        <img-checkbox :title="$t('navigate.side')" img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" value="side"/>
+        <img-checkbox :title="$t('navigate.head')" img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" value="head"/>
+        <img-checkbox :title="$t('navigate.mix')" img="https://gw.alipayobjects.com/zos/antfincdn/x8Ob%26B8cy8/LCkqqYNmvBEbokSDscrm.svg" value="mix"/>
+      </img-checkbox-group>
+    </setting-item>
+    <setting-item>
+      <a-list :split="false">
+        <a-list-item>
+          {{ $t('navigate.content.title') }}
+          <a-select
+            :getPopupContainer="getPopupContainer"
+            :value="pageWidth"
+            @change="setPageWidth"
+            class="select-item"
+            size="small"
+            slot="actions"
+          >
+            <a-select-option value="fluid">{{ $t('navigate.content.fluid') }}</a-select-option>
+            <a-select-option value="fixed">{{ $t('navigate.content.fixed') }}</a-select-option>
+          </a-select>
+        </a-list-item>
+        <a-list-item>
+          {{ $t('navigate.fixedHeader') }}
+          <a-switch :checked="fixedHeader" slot="actions" size="small" @change="setFixedHeader" />
+        </a-list-item>
+        <a-list-item>
+          {{ $t('navigate.fixedSideBar') }}
+          <a-switch :checked="fixedSideBar" slot="actions" size="small" @change="setFixedSideBar" />
+        </a-list-item>
+      </a-list>
+    </setting-item>
+    <a-divider />
+    <setting-item :title="$t('other.title')">
+      <a-list :split="false">
+        <a-list-item>
+          {{ $t('other.weekMode') }}
+          <a-switch :checked="weekMode" slot="actions" size="small" @change="setWeekMode" />
+        </a-list-item>
+        <a-list-item>
+          {{ $t('other.multiPages') }}
+          <a-switch :checked="multiPage" slot="actions" size="small" @change="setMultiPage" />
+        </a-list-item>
+        <a-list-item>
+          {{ $t('other.hideSetting') }}
+          <a-switch :checked="hideSetting" slot="actions" size="small" @change="setHideSetting" />
+        </a-list-item>
+      </a-list>
+    </setting-item>
+    <a-divider />
+    <setting-item :title="$t('animate.title')">
+      <a-list :split="false">
+        <a-list-item>
+          {{ $t('animate.disable') }}
+          <a-switch :checked="animate.disabled" slot="actions" size="small" @change="val => setAnimate({...animate, disabled: val})" />
+        </a-list-item>
+        <a-list-item>
+          {{ $t('animate.effect') }}
+          <a-select
+            :value="animate.name"
+            :getPopupContainer="getPopupContainer"
+            @change="val => setAnimate({...animate, name: val})"
+            class="select-item"
+            size="small"
+            slot="actions"
+          >
+            <a-select-option :key="index" :value="item.name" v-for="(item, index) in animates">{{ item.alias }}</a-select-option>
+          </a-select>
+        </a-list-item>
+        <a-list-item>
+          {{ $t('animate.direction') }}
+          <a-select
+            :value="animate.direction"
+            :getPopupContainer="getPopupContainer"
+            @change="val => setAnimate({...animate, direction: val})"
+            class="select-item"
+            size="small"
+            slot="actions"
+          >
+            <a-select-option :key="index" :value="item" v-for="(item, index) in directions">{{ item }}</a-select-option>
+          </a-select>
+        </a-list-item>
+      </a-list>
+    </setting-item>
+    <a-alert
+      v-if="isDev"
+      style="max-width: 240px; margin: -16px 0 8px; word-break: break-all"
+      type="warning"
+      :message="$t('alert')"
+    >
+    </a-alert>
+    <a-button
+      v-if="isDev"
+      id="copyBtn"
+      :data-clipboard-text="copyConfig"
+      @click="copyCode"
+      style="width: 100%"
+      icon="copy" >{{ $t('copy') }}</a-button>
+  </div>
+</template>
+
+<script>
+import SettingItem from './SettingItem'
+import { ColorCheckbox, ImgCheckbox } from '@/components/checkbox'
+import Clipboard from 'clipboard'
+import { mapState, mapMutations } from 'vuex'
+import { formatConfig } from '@/utils/formatter'
+import { setting } from '@/config/default'
+import sysConfig from '@/config/config'
+import fastEqual from 'fast-deep-equal'
+import deepMerge from 'deepmerge'
+
+const ColorCheckboxGroup = ColorCheckbox.Group
+const ImgCheckboxGroup = ImgCheckbox.Group
+export default {
+  name: 'Setting',
+  i18n: require('./i18n'),
+  components: { ImgCheckboxGroup, ImgCheckbox, ColorCheckboxGroup, ColorCheckbox, SettingItem },
+  data () {
+    return {
+      copyConfig: 'Sorry, you have copied nothing O(∩_∩)O~',
+      isDev: process.env.NODE_ENV === 'development'
+    }
+  },
+  computed: {
+    directions () {
+      return this.animates.find(item => item.name == this.animate.name).directions
+    },
+    ...mapState('setting', ['theme', 'layout', 'animate', 'animates', 'palettes', 'multiPage', 'weekMode', 'fixedHeader', 'fixedSideBar', 'hideSetting', 'pageWidth'])
+  },
+  watch: {
+    'animate.name': function (val) {
+      this.setAnimate({ name: val, direction: this.directions[0] })
+    }
+  },
+  methods: {
+    getPopupContainer () {
+      return this.$el.parentNode
+    },
+    copyCode () {
+      const config = this.extractConfig(false)
+      this.copyConfig = `// 自定义配置，参考 ./default/setting.config.js，需要自定义的属性在这里配置即可
+      module.exports = ${formatConfig(config)}
+      `
+      const clipboard = new Clipboard('#copyBtn')
+      clipboard.on('success', () => {
+        this.$message.success(`复制成功，覆盖文件 src/config/config.js 然后重启项目即可生效`).then(() => {
+          const localConfig = localStorage.getItem(process.env.VUE_APP_SETTING_KEY)
+          if (localConfig) {
+            console.warn('检测到本地有历史保存的主题配置，想要要拷贝的配置代码生效，您可能需要先重置配置')
+            this.$message.warn('检测到本地有历史保存的主题配置，想要要拷贝的配置代码生效，您可能需要先重置配置', 5)
+          }
+        })
+        clipboard.destroy()
+      })
+    },
+    saveSetting () {
+      const closeMessage = this.$message.loading('正在保存到本地，请稍后...', 0)
+      const config = this.extractConfig(true)
+      localStorage.setItem(process.env.VUE_APP_SETTING_KEY, JSON.stringify(config))
+      setTimeout(closeMessage, 800)
+    },
+    resetSetting () {
+      this.$confirm({
+        title: '重置主题会刷新页面，当前页面内容不会保留，确认重置？',
+        onOk () {
+          localStorage.removeItem(process.env.VUE_APP_SETTING_KEY)
+          window.location.reload()
+        }
+      })
+    },
+    // 提取配置
+    extractConfig (local = false) {
+      const config = {}
+      const mySetting = this.$store.state.setting
+      const dftSetting = local ? deepMerge(setting, sysConfig) : setting
+      Object.keys(mySetting).forEach(key => {
+        const dftValue = dftSetting[key]; const myValue = mySetting[key]
+        if (dftValue != undefined && !fastEqual(dftValue, myValue)) {
+          config[key] = myValue
+        }
+      })
+      return config
+    },
+    ...mapMutations('setting', ['setTheme', 'setLayout', 'setMultiPage', 'setWeekMode',
+      'setFixedSideBar', 'setFixedHeader', 'setAnimate', 'setHideSetting', 'setPageWidth'])
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .side-setting{
+    min-height: 100%;
+    background-color: @base-bg-color;
+    padding: 24px;
+    font-size: 14px;
+    line-height: 1.5;
+    word-wrap: break-word;
+    position: relative;
+    .flex{
+      display: flex;
+    }
+    .select-item{
+      width: 80px;
+    }
+  }
+</style>

package/src/components/setting/SettingItem.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="setting-item">
+    <h3 v-if="title" class="title">{{ title }}</h3>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SettingItem',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['title']
+}
+</script>
+
+<style lang="less" scoped>
+  .setting-item{
+    margin-bottom: 24px;
+    .title{
+      font-size: 14px;
+      color: @title-color;
+      line-height: 22px;
+      margin-bottom: 12px;
+    }
+  }
+</style>

package/src/components/setting/i18n.js

@@ -0,0 +1,117 @@
+module.exports = {
+  messages: {
+    CN: {
+      theme: {
+        title: '整体风格设置',
+        light: '亮色菜单风格',
+        dark: '暗色菜单风格',
+        night: '深夜模式',
+        color: '主题色'
+      },
+      navigate: {
+        title: '导航设置',
+        side: '侧边导航',
+        head: '顶部导航',
+        mix: '混合导航',
+        content: {
+          title: '内容区域宽度',
+          fluid: '流式',
+          fixed: '定宽'
+        },
+        fixedHeader: '固定Header',
+        fixedSideBar: '固定侧边栏'
+      },
+      other: {
+        title: '其他设置',
+        weekMode: '色弱模式',
+        multiPages: '多页签模式',
+        hideSetting: '隐藏设置抽屉'
+      },
+      animate: {
+        title: '页面切换动画',
+        disable: '禁用动画',
+        effect: '动画效果',
+        direction: '动画方向'
+      },
+      alert: '拷贝配置后，直接覆盖文件 src/config/config.js 中的全部内容，然后重启即可。（注意：仅会拷贝与默认配置不同的项）',
+      copy: '拷贝配置',
+      save: '保存配置',
+      reset: '重置配置'
+    },
+    HK: {
+      theme: {
+        title: '整體風格設置',
+        light: '亮色菜單風格',
+        dark: '暗色菜單風格',
+        night: '深夜模式',
+        color: '主題色'
+      },
+      navigate: {
+        title: '導航設置',
+        side: '側邊導航',
+        head: '頂部導航',
+        content: {
+          title: '內容區域寬度',
+          fluid: '流式',
+          fixed: '定寬'
+        },
+        fixedHeader: '固定Header',
+        fixedSideBar: '固定側邊欄'
+      },
+      other: {
+        title: '其他設置',
+        weekMode: '色弱模式',
+        multiPages: '多頁簽模式',
+        hideSetting: '隱藏設置抽屜'
+      },
+      animate: {
+        title: '頁面切換動畫',
+        disable: '禁用動畫',
+        effect: '動畫效果',
+        direction: '動畫方向'
+      },
+      alert: '拷貝配置后，直接覆蓋文件 src/config/config.js 中的全部內容，然後重啟即可。（注意：僅會拷貝與默認配置不同的項）',
+      copy: '拷貝配置',
+      save: '保存配置',
+      reset: '重置配置'
+    },
+    US: {
+      theme: {
+        title: 'Page Style Setting',
+        light: 'Light Style',
+        dark: 'Dark Style',
+        night: 'Night Style',
+        color: 'Theme Color'
+      },
+      navigate: {
+        title: 'Navigation Mode',
+        side: 'Side Menu Layout',
+        head: 'Top Menu Layout',
+        mix: 'Mix Menu Layout',
+        content: {
+          title: 'Content Width',
+          fluid: 'Fluid',
+          fixed: 'Fixed'
+        },
+        fixedHeader: 'Fixed Header',
+        fixedSideBar: 'Fixed SideBar'
+      },
+      other: {
+        title: 'Other Setting',
+        weekMode: 'Week Mode',
+        multiPages: 'Multi Pages',
+        hideSetting: 'Hide Setting Drawer'
+      },
+      animate: {
+        title: 'Page Toggle Animation',
+        disable: 'Disable',
+        effect: 'Effect',
+        direction: 'Direction'
+      },
+      alert: 'After copying the configuration code, directly cover all contents in the file src/config/config.js, then restart the server. (Note: only items that are different from the default configuration will be copied)',
+      copy: 'Copy Setting',
+      save: 'Save',
+      reset: 'Reset'
+    }
+  }
+}

package/src/components/table/StandardTable.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="standard-table">
+    <div class="alert">
+      <a-alert type="info" :show-icon="true" v-if="selectedRows">
+        <div class="message" slot="message">
+          已选择&nbsp;<a>{{ selectedRows.length }}</a>&nbsp;项 <a class="clear" @click="onClear">清空</a>
+          <template v-for="(item, index) in needTotalList" >
+            <div v-if="item.needTotal" :key="index">
+              {{ item.title }}总计&nbsp;
+              <a>{{ item.customRender ? item.customRender(item.total) : item.total }}</a>
+            </div>
+          </template>
+        </div>
+      </a-alert>
+    </div>
+    <a-table
+      :bordered="bordered"
+      :loading="loading"
+      :columns="columns"
+      :dataSource="dataSource"
+      :rowKey="rowKey"
+      :pagination="pagination"
+      :expandedRowKeys="expandedRowKeys"
+      :expandedRowRender="expandedRowRender"
+      @change="onChange"
+      :rowSelection="selectedRows ? {selectedRowKeys: selectedRowKeys, onChange: updateSelect} : undefined"
+    >
+      <template slot-scope="text, record, index" :slot="slot" v-for="slot in Object.keys($scopedSlots).filter(key => key !== 'expandedRowRender') ">
+        <slot :name="slot" v-bind="{text, record, index}"></slot>
+      </template>
+      <template :slot="slot" v-for="slot in Object.keys($slots)">
+        <slot :name="slot"></slot>
+      </template>
+      <template slot-scope="record, index, indent, expanded" :slot="$scopedSlots.expandedRowRender ? 'expandedRowRender' : ''">
+        <slot v-bind="{record, index, indent, expanded}" :name="$scopedSlots.expandedRowRender ? 'expandedRowRender' : ''"></slot>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StandardTable',
+  props: {
+    bordered: Boolean,
+    // eslint-disable-next-line vue/require-default-prop
+    loading: [Boolean, Object],
+    // eslint-disable-next-line vue/require-default-prop
+    columns: Array,
+    // eslint-disable-next-line vue/require-default-prop
+    dataSource: Array,
+    rowKey: {
+      type: [String, Function],
+      default: 'key'
+    },
+    pagination: {
+      type: [Object, Boolean],
+      default: true
+    },
+    // eslint-disable-next-line vue/require-default-prop
+    selectedRows: Array,
+    // eslint-disable-next-line vue/require-default-prop
+    expandedRowKeys: Array,
+    // eslint-disable-next-line vue/require-default-prop
+    expandedRowRender: Function
+  },
+  data () {
+    return {
+      needTotalList: []
+    }
+  },
+  methods: {
+    updateSelect (selectedRowKeys, selectedRows) {
+      this.$emit('update:selectedRows', selectedRows)
+      this.$emit('selectedRowChange', selectedRowKeys, selectedRows)
+    },
+    initTotalList (columns) {
+      const totalList = columns.filter(item => item.needTotal)
+        .map(item => {
+          return {
+            ...item,
+            total: 0
+          }
+        })
+      return totalList
+    },
+    onClear () {
+      this.updateSelect([], [])
+      this.$emit('clear')
+    },
+    onChange (pagination, filters, sorter, { currentDataSource }) {
+      this.$emit('change', pagination, filters, sorter, { currentDataSource })
+    }
+  },
+  created () {
+    this.needTotalList = this.initTotalList(this.columns)
+  },
+  watch: {
+    selectedRows (selectedRows) {
+      this.needTotalList = this.needTotalList.map(item => {
+        return {
+          ...item,
+          total: selectedRows.reduce((sum, val) => {
+            let v
+            try {
+              // eslint-disable-next-line no-eval
+              v = val[item.dataIndex] ? val[item.dataIndex] : eval(`val.${item.dataIndex}`)
+            } catch (_) {
+              v = val[item.dataIndex]
+            }
+            v = !isNaN(parseFloat(v)) ? parseFloat(v) : 0
+            return sum + v
+          }, 0)
+        }
+      })
+    }
+  },
+  computed: {
+    selectedRowKeys () {
+      return this.selectedRows.map(record => {
+        return (typeof this.rowKey === 'function') ? this.rowKey(record) : record[this.rowKey]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.standard-table{
+  .alert{
+    margin-bottom: 16px;
+    .message{
+      a{
+        font-weight: 600;
+      }
+    }
+    .clear{
+      float: right;
+    }
+  }
+}
+</style>