优化：网站管理界面

2021-01-21 22:48:02 +08:00 · 2021-01-21 22:48:02 +08:00 · 8d140c3b92
commit 8d140c3b92
parent 0e7d958c07
9 changed files with 139 additions and 93 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "jmal-cloud-view",
-  "version": "2.0.1",
+  "version": "2.0.3",
  "description": "jmal cloud",
  "author": "Jmal <zhushilun084@163.com>",
  "license": "MIT",
--- a/src/components/input/UploadImageInput.vue
+++ b/src/components/input/UploadImageInput.vue
@ -1,49 +1,64 @@
 <template>
  <div class="upload-input-image">
-    <select-file title="选择图片" @select="selectedFile" :visible.sync="dialogSelectFile"></select-file>
-    <div class="upload">
-      <div class="url-desc url-desc-first">输入图片的url 或</div>
-      <el-button class="upload-select-btn" title="选择文件" type="primary" size="small" icon="el-icon-folder" circle @click="dialogSelectFile = true"></el-button>
-      <el-upload
-        ref="uploadRef"
-        class="upload"
-        action="/api/upload-markdown-image"
-        :headers="headers"
-        :data="extraData"
-        name="files"
-        accept="image/*"
-        :show-file-list="false"
-        :file-list="fileList"
-        :limit="1"
-        :before-upload="handleBeforeUpload"
-        :on-success="handleSuccess"
-        :on-remove="handleFileListRemove"
-        :on-progress="handleProgress"
-      >
-        <el-button title="上传" type="primary" size="small" icon="el-icon-upload2" circle></el-button>
-        <div class="url-desc" v-if="uploadState > 0" slot="tip">
-          <span v-show="uploadState === 1">图片上传中{{uploadPercentage}}%</span>
-          <span v-show="uploadState === 2">图片上传成功</span>
-          <span v-show="uploadState === 3">该图片不支持自动上传</span>
-          <span v-show="uploadState === 4">图片加载中</span>
-          <i :class="{
+    <el-row>
+      <el-col :xs="24">
+        <select-file title="选择图片" @select="selectedFile" :visible.sync="dialogSelectFile"></select-file>
+        <div class="upload">
+          <!--      <div class="url-desc url-desc-first">输入图片的url 或</div>-->
+          <el-button class="upload-select-btn" title="选择文件" type="primary" size="small" icon="el-icon-folder" circle @click="dialogSelectFile = true"></el-button>
+          <el-upload
+            ref="uploadRef"
+            class="upload"
+            action="/api/upload-markdown-image"
+            :headers="headers"
+            :data="extraData"
+            name="files"
+            accept="image/*"
+            :show-file-list="false"
+            :file-list="fileList"
+            :limit="1"
+            :before-upload="handleBeforeUpload"
+            :on-success="handleSuccess"
+            :on-remove="handleFileListRemove"
+            :on-progress="handleProgress"
+          >
+            <el-button title="上传" type="primary" size="small" icon="el-icon-upload2" circle></el-button>
+            <div class="url-desc" v-if="uploadState > 0" slot="tip">
+              <span v-show="uploadState === 1">图片上传中{{uploadPercentage}}%</span>
+              <span v-show="uploadState === 2">图片上传成功</span>
+              <span v-show="uploadState === 3">该图片不支持自动上传</span>
+              <span v-show="uploadState === 4">图片加载中</span>
+              <i :class="{
            'el-icon-loading': uploadState === 1 ||  uploadState === 4,
            'el-icon-check': uploadState === 2,
            'el-icon-warning-outline': uploadState === 3
          }"></i>
+            </div>
+          </el-upload>
        </div>
-      </el-upload>
-    </div>
-    <el-tooltip class="item" effect="dark" placement="bottom">
-      <el-input :autosize="intputAutosize" type="textarea" width="100%" v-model="currentValue" @change="change" @input="input" @focus="isLocked = true"></el-input>
-      <div slot="content">
-        <el-image :style="{maxWidth: tipImageMaxWidth + 'px'}" :src="currentValue" fit="contain" @load="loadSuccess">
-          <div slot="error" class="image-slot">
-            <i class="el-icon-picture-outline"></i>
+      </el-col>
+      <el-col :xs="24">
+        <el-tooltip class="item" effect="dark" placement="bottom">
+          <el-input
+            :autosize="intputAutosize"
+            placeholder="请输入图片的url 或 上传"
+            type="textarea"
+            width="100%"
+            v-model="currentValue"
+            @change="change"
+            @input="input"
+            @focus="isLocked = true">
+          </el-input>
+          <div slot="content">
+            <el-image :style="{maxWidth: tipImageMaxWidth + 'px'}" :src="currentValue" fit="contain" @load="loadSuccess">
+              <div slot="error" class="image-slot">
+                <i class="el-icon-picture-outline"></i>
+              </div>
+            </el-image>
          </div>
-        </el-image>
-      </div>
-    </el-tooltip>
+        </el-tooltip>
+      </el-col>
+    </el-row>
  </div>
 </template>
 <script>
@ -219,6 +234,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .upload {
+  margin-bottom: 1px;
  display: -webkit-box;
  .upload-select-btn {
    margin-right: 5px;
--- a/src/components/select/MultipleTree.vue
+++ b/src/components/select/MultipleTree.vue
@ -109,6 +109,8 @@ export default {
            }
          }, 100)
        })
+      } else {
+        this.valueTitles = []
      }
    },
    selectNode(props, data){
--- a/src/components/select/tree.vue
+++ b/src/components/select/tree.vue
@ -81,9 +81,19 @@ export default {
    // 初始化值
    initHandle(){
      if(this.valueId){
-        this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]     // 初始化显示
-        this.$refs.selectTree.setCurrentKey(this.valueId)       // 设置默认选中
-        this.defaultExpandedKey = [this.valueId]      // 设置默认展开
+        this.$nextTick(() => {
+          // 设置默认选中
+          this.$refs.selectTree.setCurrentKey(this.valueId)
+          const that = this
+          setTimeout(function (){
+            // 初始化显示
+            that.valueTitle = that.$refs.selectTree.getNode(that.valueId).data[that.props.label]
+          }, 100)
+          // 设置默认展开
+          this.defaultExpandedKey = [this.valueId]
+        })
+      } else {
+        this.valueTitle = ''
      }
    },
    // 切换选项
--- a/src/styles/setting.scss
+++ b/src/styles/setting.scss
@ -134,12 +134,6 @@ a:hover {
    border-top: 1px solid #f4f4f4;
  }
 }
-/deep/.el-input {
-  width: unset;
-}
-/deep/.el-textarea {
-  max-width: 500px;
-}
 .form-slogan {
  width: 100%;
  max-width: 500px;
--- a/src/views/setting/articles/articleManager.vue
+++ b/src/views/setting/articles/articleManager.vue
@ -46,9 +46,11 @@
                </el-radio-group>
              </div>
            </el-col>
-            <el-col :xs="24" :sm="14">
+            <el-col :xs="24" :sm="14" class="text-align-right">
+              <el-button v-if="isFilter" type="text" size="mini" @click="cancelFilter">取消筛选</el-button>
              <el-input
                  v-model="query.keyword"
+                  style="width:unset;"
                  class="query-item"
                  clearable
                  size="mini"
@ -66,7 +68,6 @@
              >
              </multiple-tree-select>
              <el-button type="primary" size="mini" @click="theFilter">筛选</el-button>
-              <el-button v-if="isFilter" type="text" size="mini" @click="cancelFilter">取消筛选</el-button>
            </el-col>
          </el-row>
        </div>
--- a/src/views/setting/articles/blogManager.vue
+++ b/src/views/setting/articles/blogManager.vue
@ -158,9 +158,6 @@ export default {
 <style lang="scss" scoped>
@import "src/styles/setting";
@import "src/styles/markdown";
-/deep/ .el-textarea {
-  max-width: 1080px;
-}
 /deep/ .el-collapse-item__header {
  font-size: 16px;
  padding-left: 20px;
--- a/src/views/setting/articles/categoryManager.vue
+++ b/src/views/setting/articles/categoryManager.vue
@ -1,37 +1,37 @@
 <template>
  <div class="container" v-wechat-title="title">
-    <el-dialog class="dialog-cm" :title="dialogTitle" :close-on-click-modal="false" :visible.sync="dialogVisible">
-      <el-form ref="managerForm" :model="form" label-position="left" :rules="rules" label-width="85px">
-        <el-form-item label="分类名称" prop="name">
-          <el-input v-model="form.name" style="width: 100%;"/>
+    <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">
+        <el-form-item label="分类名称:" prop="name">
+          <el-input v-model="form.name" placeholder="请输入分类名称"/>
        </el-form-item>
-        <el-form-item label="分类缩略名" prop="slug">
-          <el-input v-model="form.slug" style="width: 100%;"/>
-          <div class="instruction">分类缩略名用于创建友好的链接形式.</div>
+        <el-form-item label="分类缩略名:" prop="slug">
+          <el-input v-model="form.slug" placeholder="分类缩略名用于创建友好的链接形式"/>
        </el-form-item>
-        <el-form-item label="父级分类" prop="parentCategoryId">
-          <el-cascader
+        <el-form-item label="父级分类:" prop="parentCategoryId">
+          <tree-select
+            style="width: 100%;"
            v-model="form.parentCategoryId"
            placeholder="不选择"
            :options="categories"
-            :show-all-levels="false"
            :props="{ checkStrictly: true, value: 'id', label: 'name'}"
-            clearable></el-cascader>
+          >
+          </tree-select>
        </el-form-item>
-        <el-form-item label="分类描述" prop="desc">
-          <el-input type="textarea" v-model="form.desc" :autosize="{ minRows: 2, maxRows: 6 }"/>
-          <div class="instruction">此文字用于描述分类, 在该分类首页中它会被显示.</div>
+        <el-form-item label="分类描述:" prop="desc">
+          <el-input type="textarea" placeholder="此文字用于描述分类, 在该分类首页中它会被显示" v-model="form.desc" :autosize="{ minRows: 2, maxRows: 6 }"/>
        </el-form-item>
-        <el-form-item label="分类背景" prop="categoryBackground">
+        <el-form-item label="分类背景:" prop="categoryBackground">
          <upload-image-input v-model="form.categoryBackground"/>
          <div class="instruction">在这里填入图片的URL地址, 以在分类页面显示一个背景大图.</div>
        </el-form-item>
-        <el-form-item>
-          <el-button native-type="submit" type="primary" size="small" :loading="categoryUpdateLoading"
-                     @click.native.prevent="onSave('managerForm')">保 存
-          </el-button>
-        </el-form-item>
      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+        <el-button native-type="submit" type="primary" size="small" :loading="categoryUpdateLoading"
+                   @click.native.prevent="onSave('managerForm')">保 存
+        </el-button>
+      </div>
    </el-dialog>
    <el-card class="box-card">
      <div slot="header">
@ -106,10 +106,11 @@
 <script>
 import categoryApi from "@/api/category";
 import UploadImageInput from "@/components/input/UploadImageInput";
+import TreeSelect from "@/components/select/tree";

 export default {
  name: 'categoryManager',
-  components: {UploadImageInput},
+  components: {TreeSelect, UploadImageInput},
  data() {
    return {
      title: "分类管理",
--- a/src/views/setting/articles/tagManager.vue
+++ b/src/views/setting/articles/tagManager.vue
@ -1,24 +1,24 @@
 <template>
  <div class="container" v-wechat-title="title">
-    <el-dialog class="dialog-cm" :title="dialogTitle" :close-on-click-modal="false" :visible.sync="dialogVisible">
-      <el-form ref="managerForm" :model="form" label-position="left" :rules="rules" label-width="85px">
-        <el-form-item label="标签名称" prop="name">
-          <el-input v-model="form.name" style="width: 100%;"/>
+    <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">
+        <el-form-item label="标签名称:" prop="name">
+          <el-input v-model="form.name" placeholder="请输入标签名称"/>
        </el-form-item>
-        <el-form-item label="标签缩略名" prop="slug">
-          <el-input v-model="form.slug" style="width: 100%;"/>
-          <div class="instruction">标签缩略名用于创建友好的链接形式, 如果留空则默认使用标签名称.</div>
+        <el-form-item label="标签缩略名:" prop="slug">
+          <el-input v-model="form.slug" placeholder="请输入标签缩略名"/>
        </el-form-item>
-        <el-form-item label="标签背景" prop="categoryBackground">
+        <el-form-item label="标签背景:" prop="categoryBackground">
          <upload-image-input v-model="form.tagBackground"/>
          <div class="instruction">在这里填入图片的URL地址, 以在该标签页面显示一个背景大图.</div>
        </el-form-item>
-        <el-form-item>
-          <el-button native-type="submit" type="primary" :loading="tagUpdateLoading"
-                     @click.native.prevent="onSave('managerForm')">保 存
-          </el-button>
-        </el-form-item>
      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+        <el-button size="small" native-type="submit" type="primary" :loading="tagUpdateLoading"
+                   @click.native.prevent="onSave('managerForm')">保 存
+        </el-button>
+      </div>
    </el-dialog>
    <el-card class="box-card">
      <div slot="header">
@ -38,9 +38,24 @@
      </div>
      <div>
        <el-checkbox-group v-model="multipleSelection" size="small" @change="handleCheckTagChange">
-          <el-checkbox v-for="tag in tags" :key="tag.id" class="tag-checkbox" :label="tag.id" border>
-            {{tag.name}}
-          </el-checkbox>
+          <span v-for="tag in tags"
+                class="tag-checkbox"
+               :key="tag.id"
+               @mouseover.prevent="hoverEditId = tag.id"
+               @mouseleave.prevent="hoverEditId = ''">
+            <el-checkbox
+              :label="tag.id"
+              border
+            >
+              {{tag.name}}
+              <i
+                :style="{marginLeft: '-5px',visibility: hoverEditId === tag.id ? 'visible' : 'hidden'}"
+                class="el-tag__close el-icon-edit"
+                @click.prevent="handleEdit(tag.id)"
+              >
+              </i>
+            </el-checkbox>
+          </span>
        </el-checkbox-group>
      </div>
    </el-card>
@ -50,7 +65,6 @@

 <script>
 import tagApi from "@/api/tag";
-import categoryApi from "@/api/category";
 import UploadImageInput from "@/components/input/UploadImageInput";

 export default {
@ -62,6 +76,7 @@ export default {
      dialogVisible: false,
      dialogTitle: '',
      tagUpdateLoading: false,
+      hoverEditId: '',
      form: {
        name: '',
        slug: '',
@ -90,6 +105,9 @@ export default {
        this.tags = res.data
      })
    },
+    mouseover(id) {
+      console.log(6789)
+    },
    handleCheckTagChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.tags.length;
@ -105,12 +123,16 @@ export default {
      }
      this.isIndeterminate = false
    },
-    handleEdit() {
+    handleEdit(id) {
+      let tagId = this.multipleSelection[0]
+      if(id){
+        tagId = id
+      }
      this.editMove = 2
      this.dialogVisible = true
      this.dialogTitle = '修改标签'
       tagApi.tagInfo({
-        tagId: this.multipleSelection[0]
+        tagId: tagId
      }).then(res => {
        this.form = res.data
      })
@ -220,6 +242,7 @@ export default {
  line-height: 32px;
 }
 /deep/ .tag-checkbox {
+  padding-left: 8px;
  .el-checkbox__inner {
    display: none;
  }
@ -235,6 +258,8 @@ export default {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
+  font-weight: 400;
+  padding: 5px 5px 5px 10px;
 }
 /deep/ .el-checkbox.is-bordered.is-checked {
  background-color: #ecf5ff;