From a381678f2e9481048f6bada66aab0640e6139fc8 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sun, 24 Jan 2021 16:31:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9A=E6=8E=88=E6=9D=83?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/setting-api.js                        |  23 ++-
 src/components/Icon/Icon.vue                  |  14 +-
 src/components/select/icon.vue                |   7 +-
 src/utils/iconfont-find.js                    |  11 -
 src/views/setting/articles/articleManager.vue |   3 +-
 src/views/setting/authAPP.vue                 | 193 ++++++++++++++++++
 6 files changed, 233 insertions(+), 18 deletions(-)
 delete mode 100644 src/utils/iconfont-find.js
 create mode 100644 src/views/setting/authAPP.vue

diff --git a/src/api/setting-api.js b/src/api/setting-api.js
index 921f722..cf2ca7d 100644
--- a/src/api/setting-api.js
+++ b/src/api/setting-api.js
@@ -21,7 +21,28 @@ export default {
       method: 'put',
       params
     })
-  }
+  },
+  getAccessTokenList(params) {
+    return request({
+      url: '/user/setting/accessTokenList',
+      method: 'get',
+      params
+    })
+  },
+  generateAccessToken(params) {
+    return request({
+      url: '/user/setting/generateAccessToken',
+      method: 'put',
+      params
+    })
+  },
+  deleteAccessToken(params) {
+    return request({
+      url: '/user/setting/deleteAccessToken',
+      method: 'delete',
+      params
+    })
+  },
 }
 
 export function getSetting(params) {
diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
index 18032f1..c0b7c3f 100644
--- a/src/components/Icon/Icon.vue
+++ b/src/components/Icon/Icon.vue
@@ -5,9 +5,21 @@
 
 import { Icon } from 'ant-design-vue'
 const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2024484_enjqo8y5nla.js'
+  scriptUrl: '//at.alicdn.com/t/font_2024484_a3e60q05qwc.js'
 })
 
+// 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表
+
+// const nodeArray = Array.from(document.querySelectorAll('.block-icon-list .icon-item .icon-code.icon-code-show'));
+//  const iconNames = nodeArray.map(item => item.outerText.replace('icon-',''))
+//  console.log(iconNames.slice(0,80))
+// console.log(iconNames.slice(80,160))
+
+export const iconFonts = {
+  list: ["zuijinhuoyue","key", "shouquan", "sort", "grid", "list", "emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui",
+    "maren", "zhutou", "qie", "youling", "apple-fill", "attachment", "android-fill", "apple", "download", "arrow-up-circle", "arrow-right-circle", "arrow-down", "ashbin", "add", "file_music", "menu", "role", "jiaoseguanli", "yemianshezhi", "drop_down", "yuandian", "tag", "service-directory", "fabu", "wailian", "bianji-", "WEBSITE", "wangzhanguanli", "Up", "up", "fenlei", "guanlizhuanjiawenzhang", "pifu", "tuichudenglu", "shezhi", "wangzhan", "huaban", "yunshezhi", "UserSettings", "blogger", "biaoqian", "myself", "guidang", "quxiaoyulan1-copy", "yulan-copy", "quxiaoyulan1", "yulan"]
+}
+
 export default {
   name: 'Icon',
   components: {
diff --git a/src/components/select/icon.vue b/src/components/select/icon.vue
index 01834a1..585570a 100644
--- a/src/components/select/icon.vue
+++ b/src/components/select/icon.vue
@@ -44,13 +44,12 @@
 
 <script>
 import icons from './requireIcons'
-import {icon} from '@/utils/iconfont-find'
-import NewComponent from "@/components/select/iconList";
+import {iconFonts} from '@/components/Icon/Icon'
 import IconList from "@/components/select/iconList";
 
 export default {
   name: 'IconSelect',
-  components: {IconList, NewComponent},
+  components: {IconList},
   props: {
     value: {
       type: String,
@@ -60,7 +59,7 @@ export default {
   data() {
     return {
       iconList: icons,
-      iconfontList: icon.list,
+      iconfontList: iconFonts.list,
       currentValue: this.value,
       hasValue: true,
       pickerOpen: false,
diff --git a/src/utils/iconfont-find.js b/src/utils/iconfont-find.js
deleted file mode 100644
index 0d75972..0000000
--- a/src/utils/iconfont-find.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表
-
-// const nodeArray = Array.from(document.querySelectorAll('.block-icon-list .icon-item .icon-code.icon-code-show'));
-//  const iconNames = nodeArray.map(item => item.outerText.replace('icon-',''))
-//  console.log(iconNames.slice(0,80))
-// console.log(iconNames.slice(80,130))
-
-export const icon = {
-  list: ["emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui", "maren", "zhutou", "qie", "youling",
-    "apple-fill", "attachment", "android-fill", "apple", "download", "arrow-up-circle", "arrow-right-circle", "arrow-down", "ashbin", "add", "file_music", "menu", "role", "jiaoseguanli", "yemianshezhi", "drop_down", "yuandian", "tag", "service-directory", "fabu", "wailian", "bianji-", "WEBSITE", "wangzhanguanli", "Up", "up", "fenlei", "guanlizhuanjiawenzhang", "pifu", "tuichudenglu", "shezhi", "wangzhan", "huaban", "yunshezhi", "UserSettings", "blogger", "biaoqian", "myself", "guidang", "quxiaoyulan1-copy", "yulan-copy", "quxiaoyulan1", "yulan"]
-}
diff --git a/src/views/setting/articles/articleManager.vue b/src/views/setting/articles/articleManager.vue
index 6d0cbce..fcc8468 100644
--- a/src/views/setting/articles/articleManager.vue
+++ b/src/views/setting/articles/articleManager.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-wechat-title="title">
     <el-dialog
       :title="title"
       :fullscreen="true"
@@ -447,6 +447,7 @@ export default {
       this.closeDialog()
     },
     closeDialog(){
+      this.title = this.pageTitle
       this.$router.replace({path: this.$route.path})
       window.onbeforeunload = null
       this.hasChange = false
diff --git a/src/views/setting/authAPP.vue b/src/views/setting/authAPP.vue
new file mode 100644
index 0000000..4438f6f
--- /dev/null
+++ b/src/views/setting/authAPP.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="app-container">
+    <el-alert
+      v-if="accessToken"
+      title="新的操作令牌生成成功！您必须立即复制到一个安全的地方, 因为该令牌只会显示一次!"
+      type="success"
+      center
+      :closable="false">
+    </el-alert>
+    <el-alert
+      v-if="accessToken"
+      :title="accessToken"
+      center
+      type="info"
+      :closable="false">
+    </el-alert>
+    <el-dialog class="dialog-cm" width="500px" :title="dialogTitle" :close-on-click-modal="false" :visible.sync="dialogVisible">
+      <el-form ref="managerForm" size="medium" :model="form" label-position="left" :rules="rules" label-width="95px" @submit.native.prevent>
+        <el-form-item label="令牌名称:" prop="name">
+          <el-input v-model="form.name" placeholder="请输入令牌名称" @keyup.enter.native="onSave"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" :loading="saveLoading"
+                   @click="onSave">保 存
+        </el-button>
+      </div>
+    </el-dialog>
+    <el-card class="box-card">
+      <div slot="header">
+        <div class="box-card-header">
+          <div class="clearfix card-header-back">
+            <span>管理个人操作令牌</span>
+            <el-button class="card-button" size="mini" type="primary" @click="newAccessToken">新增令牌</el-button>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div class="token-title-desc">您可以使用这些以生成的令牌来操作 JmalCloud API。</div>
+        <el-divider></el-divider>
+        <div>
+          <ul v-if="accessTokenList.length > 0">
+            <li v-for="token in accessTokenList" :key="token.id">
+              <div class="token-item">
+                <div class="item-icon">
+                  <svg-icon icon-class="key"></svg-icon>
+                </div>
+                <div class="item-content">
+                  <div class="item-title">{{ token.name }}</div>
+                  <div class="item-desc">
+                    <span>增加于</span> <span>{{ token.createTime }}</span>
+                    <i> <svg-icon v-if="token.lastActiveTime" icon-class="zuijinhuoyue"></svg-icon><i v-if="!token.lastActiveTime" class="el-icon-info"></i>{{ token.lastActiveTime ? '最近活动于 '+token.lastActiveTime : '没有最近活动'}}
+                    </i>
+                  </div>
+                </div>
+                <div class="item-active">
+                    <el-button type="danger" size="small" @click="deleteToken(token.id)">删除令牌</el-button>
+                </div>
+              </div>
+              <el-divider></el-divider>
+            </li>
+          </ul>
+          <div v-else class="empty-text">暂无令牌</div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+
+import settingApi from "@/api/setting-api";
+
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      dialogTitle: '新增令牌',
+      accessTokenList: [],
+      accessToken: undefined,
+      form: {
+        name: '',
+        createTime: '',
+        lastActiveTime: ''
+      },
+      rules: {
+        name: [
+          {required: true, message: '请输入令牌名称', trigger: 'blur'},
+        ]
+      },
+      saveLoading: false,
+    }
+  },
+  mounted() {
+    this.getAccessTokenList()
+  },
+  methods: {
+    getAccessTokenList(){
+      settingApi.getAccessTokenList().then((res) => {
+        this.accessTokenList = res.data
+      })
+    },
+    newAccessToken(){
+      this.dialogVisible = true
+    },
+    onSave() {
+      this.$refs.managerForm.validate((valid) => {
+        this.valid = valid
+        if (valid) {
+          this.saveLoading = true
+          settingApi.generateAccessToken({tokenName: this.form.name}).then((res) => {
+            this.accessToken = res.data
+            this.saveLoading = false
+            this.dialogVisible = false
+            this.getAccessTokenList();
+          }).catch(() => {
+            this.saveLoading = false
+          })
+        } else {
+          return false;
+        }
+      })
+    },
+    deleteToken(id) {
+      this.$confirm('您确定要删除此令牌吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+          settingApi.deleteAccessToken({id: id}).then(()=>{
+            this.getAccessTokenList()
+            this.$notify({
+              title: '删除成功',
+              type: 'success',
+              duration: 1000
+            })
+          })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "src/styles/setting";
+/deep/.el-divider--horizontal {
+  margin: 0;
+}
+/deep/.el-alert {
+  margin-bottom: 15px;
+  .el-alert__content {
+    padding: 5px 8px;
+  }
+  .el-alert__title{
+    font-size: 1rem;
+  }
+}
+.token-title-desc {
+  padding: 5px 0 20px 0;
+}
+.token-item {
+  display: flex;
+  height: 80px;
+  line-height: 80px;
+  .item-icon {
+    font-size: 2.5rem;
+    padding: 0 20px;
+  }
+  .item-content {
+    width: 100%;
+    padding: 15px 0;
+    .item-title {
+      height: 30px;
+      line-height: 30px;
+      font-size: 1.2rem;
+    }
+    .item-desc {
+      color: #888;
+      height: 20px;
+      line-height: 20px;
+    }
+  }
+  .item-active {
+    padding: 0 20px;
+  }
+}
+.empty-text {
+  text-align: center;
+  padding: 20px 0 10px 0;
+  color: #999;
+}
+</style>