mirror of
https://github.com/doocs/md.git
synced 2024-11-24 19:10:34 +08:00
feature: night theme for upload-image-dialog
This commit is contained in:
JimQing
parent
eacc33c598
commit
488a259950
@ -65,7 +65,7 @@
|
|||||||
color: @nightWhiteColor;
|
color: @nightWhiteColor;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.insert__dialog, .about__dialog, .reset__dialog {
|
.insert__dialog, .about__dialog, .reset__dialog, .upload__dialog {
|
||||||
.el-dialog {
|
.el-dialog {
|
||||||
background-color: @nightBgColor;
|
background-color: @nightBgColor;
|
||||||
}
|
}
|
||||||
@ -75,6 +75,15 @@
|
|||||||
.el-dialog__title, .el-form-item__label {
|
.el-dialog__title, .el-form-item__label {
|
||||||
color: @nightWhiteColor;
|
color: @nightWhiteColor;
|
||||||
}
|
}
|
||||||
|
.el-tabs__item {
|
||||||
|
color: @nightActiveCodeMirrorColor;
|
||||||
|
}
|
||||||
|
.is-active {
|
||||||
|
color: @nightWhiteColor;
|
||||||
|
}
|
||||||
|
.el-upload-dragger {
|
||||||
|
background-color: @nightButtonBg;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
/deep/ .el-icon-upload, .el-icon-download, .el-icon-refresh, .el-icon-s-grid {
|
/deep/ .el-icon-upload, .el-icon-download, .el-icon-refresh, .el-icon-s-grid {
|
||||||
color: @nightWhiteColor;
|
color: @nightWhiteColor;
|
||||||
|
|||||||
@ -1,178 +1,172 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog title="插入图片" class="dialog" :visible="value" @close="$emit('close')">
|
<el-dialog title="插入图片" class="upload__dialog" :visible="value" @close="$emit('close')">
|
||||||
<el-tabs type="card" :value="'upload'">
|
<el-tabs type="card" :value="'upload'">
|
||||||
<el-tab-pane class="upload-panel" label="选择上传" name="upload">
|
<el-tab-pane class="upload-panel" label="选择上传" name="upload">
|
||||||
<el-select v-model="imgHost" @change="changeImgHost" placeholder="请选择" size="small">
|
<el-select v-model="imgHost" @change="changeImgHost" placeholder="请选择" size="small">
|
||||||
<el-option
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
||||||
v-for="item in options"
|
</el-option>
|
||||||
:key="item.value"
|
</el-select>
|
||||||
:label="item.label"
|
<el-upload drag action :headers="{'Content-Type': 'multipart/form-data'}" :show-file-list="false"
|
||||||
:value="item.value"
|
:multiple="true" accept=".jpg, .jpeg, .png, .gif" name="file" :before-upload="beforeUpload"
|
||||||
></el-option>
|
v-loading="uploadingImg">
|
||||||
</el-select>
|
<i class="el-icon-upload"></i>
|
||||||
<el-upload
|
<div class="el-upload__text">
|
||||||
drag
|
将文件拖到此处，或
|
||||||
action
|
<em>点击上传</em>
|
||||||
:headers="{'Content-Type': 'multipart/form-data'}"
|
</div>
|
||||||
:show-file-list="false"
|
</el-upload>
|
||||||
:multiple="true"
|
</el-tab-pane>
|
||||||
accept=".jpg, .jpeg, .png, .gif"
|
<el-tab-pane class="github-panel" label="GitHub 图床" name="github">
|
||||||
name="file"
|
<el-form class="setting-form" ref="form" :model="formGitHub" label-position="right" label-width="100px">
|
||||||
:before-upload="beforeUpload"
|
<el-form-item label="GitHub 仓库">
|
||||||
v-loading="uploadingImg"
|
<el-input v-model="formGitHub.repo" placeholder="如：github.com/yanglbme/resource"></el-input>
|
||||||
>
|
</el-form-item>
|
||||||
<i class="el-icon-upload"></i>
|
<el-form-item label="token">
|
||||||
<div class="el-upload__text">
|
<el-input v-model="formGitHub.accessToken"
|
||||||
将文件拖到此处，或
|
placeholder="如：cc1d0c1426d0fd0902bd2d7184b14da61b8abc46"></el-input>
|
||||||
<em>点击上传</em>
|
<el-link type="primary"
|
||||||
</div>
|
href="https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token"
|
||||||
</el-upload>
|
target="_blank">如何获取 GitHub token？</el-link>
|
||||||
</el-tab-pane>
|
</el-form-item>
|
||||||
<el-tab-pane class="github-panel" label="GitHub 图床" name="github">
|
<el-form-item>
|
||||||
<el-form
|
<el-button type="primary" @click="onSubmit">保存配置</el-button>
|
||||||
class="setting-form"
|
</el-form-item>
|
||||||
ref="form"
|
</el-form>
|
||||||
:model="formGitHub"
|
</el-tab-pane>
|
||||||
label-position="right"
|
</el-tabs>
|
||||||
label-width="100px"
|
</el-dialog>
|
||||||
>
|
|
||||||
<el-form-item label="GitHub 仓库">
|
|
||||||
<el-input v-model="formGitHub.repo" placeholder="如：github.com/yanglbme/resource"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="token">
|
|
||||||
<el-input v-model="formGitHub.accessToken" placeholder="如：cc1d0c1426d0fd0902bd2d7184b14da61b8abc46"></el-input>
|
|
||||||
<el-link type="primary" href="https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token" target="_blank">如何获取 GitHub token？</el-link>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="onSubmit">保存配置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
|
import {
|
||||||
|
uploadImgFile
|
||||||
|
} from "../../assets/scripts/uploadImageFile";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
formGitHub: {
|
|
||||||
repo: "",
|
|
||||||
accessToken: "",
|
|
||||||
},
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
value: "default",
|
|
||||||
label: "默认图床",
|
|
||||||
},
|
},
|
||||||
{
|
},
|
||||||
value: "github",
|
data() {
|
||||||
label: "GitHub",
|
return {
|
||||||
|
formGitHub: {
|
||||||
|
repo: "",
|
||||||
|
accessToken: "",
|
||||||
|
},
|
||||||
|
options: [{
|
||||||
|
value: "default",
|
||||||
|
label: "默认图床",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "github",
|
||||||
|
label: "GitHub",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
imgHost: "default",
|
||||||
|
uploadingImg: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (localStorage.getItem("GitHubConfig")) {
|
||||||
|
this.formGitHub = JSON.parse(localStorage.getItem("GitHubConfig"));
|
||||||
|
}
|
||||||
|
if (localStorage.getItem("ImgHost")) {
|
||||||
|
this.imgHost = localStorage.getItem("ImgHost");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeImgHost() {
|
||||||
|
console.log("select img host:", this.imgHost);
|
||||||
|
localStorage.setItem("ImgHost", this.imgHost);
|
||||||
},
|
},
|
||||||
],
|
onSubmit() {
|
||||||
imgHost: "default",
|
if (!(this.formGitHub.repo && this.formGitHub.accessToken)) {
|
||||||
uploadingImg: false,
|
const blankElement = this.formGitHub.repo ? "token" : "GitHub 仓库"
|
||||||
};
|
this.$message({
|
||||||
},
|
showClose: true,
|
||||||
created() {
|
message: `参数「${blankElement}」不能为空`,
|
||||||
if (localStorage.getItem("GitHubConfig")) {
|
type: "error",
|
||||||
this.formGitHub = JSON.parse(localStorage.getItem("GitHubConfig"));
|
});
|
||||||
}
|
return;
|
||||||
if (localStorage.getItem("ImgHost")) {
|
}
|
||||||
this.imgHost = localStorage.getItem("ImgHost");
|
localStorage.setItem("GitHubConfig", JSON.stringify(this.formGitHub));
|
||||||
}
|
console.log("submit github params:", this.formGitHub);
|
||||||
},
|
this.$message({
|
||||||
methods: {
|
message: "保存成功",
|
||||||
changeImgHost() {
|
type: "success",
|
||||||
console.log("select img host:", this.imgHost);
|
});
|
||||||
localStorage.setItem("ImgHost", this.imgHost);
|
},
|
||||||
},
|
// 图片上传前的处理
|
||||||
onSubmit() {
|
beforeUpload(file) {
|
||||||
if (!(this.formGitHub.repo && this.formGitHub.accessToken)) {
|
if (!this.validateConfig()) {
|
||||||
const blankElement = this.formGitHub.repo ? "token" : "GitHub 仓库"
|
return;
|
||||||
this.$message({
|
}
|
||||||
showClose: true,
|
|
||||||
message: `参数「${blankElement}」不能为空`,
|
|
||||||
type: "error",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
localStorage.setItem("GitHubConfig", JSON.stringify(this.formGitHub));
|
|
||||||
console.log("submit github params:", this.formGitHub);
|
|
||||||
this.$message({
|
|
||||||
message: "保存成功",
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 图片上传前的处理
|
|
||||||
beforeUpload(file) {
|
|
||||||
if (!this.validateConfig()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.uploadingImg = true;
|
this.uploadingImg = true;
|
||||||
uploadImgFile(file)
|
uploadImgFile(file)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
this.$emit("uploaded", res);
|
this.$emit("uploaded", res);
|
||||||
this.uploadingImg = false;
|
this.uploadingImg = false;
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
this.uploadingImg = false;
|
this.uploadingImg = false;
|
||||||
this.$message({
|
this.$message({
|
||||||
showClose: true,
|
showClose: true,
|
||||||
message: err,
|
message: err,
|
||||||
type: "error",
|
type: "error",
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
return false;
|
|
||||||
},
|
|
||||||
validateConfig() {
|
|
||||||
switch (this.imgHost) {
|
|
||||||
case "github":
|
|
||||||
const { repo, accessToken } = this.formGitHub;
|
|
||||||
if (!repo || !accessToken) {
|
|
||||||
this.$message.error("未配置 GitHub 参数");
|
|
||||||
return false;
|
return false;
|
||||||
}
|
},
|
||||||
}
|
validateConfig() {
|
||||||
return true;
|
switch (this.imgHost) {
|
||||||
|
case "github":
|
||||||
|
const {
|
||||||
|
repo, accessToken
|
||||||
|
} = this.formGitHub;
|
||||||
|
|
||||||
|
if (!repo || !accessToken) {
|
||||||
|
this.$message.error("未配置 GitHub 参数");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.upload-panel {
|
.upload-panel {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
.el-select {
|
|
||||||
align-self: flex-end;
|
.el-select {
|
||||||
margin: 0 67.75px 20px;
|
align-self: flex-end;
|
||||||
width: 100px;
|
margin: 0 67.75px 20px;
|
||||||
}
|
width: 100px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.github-panel {
|
.github-panel {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-form {
|
.setting-form {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
.el-form-item {
|
|
||||||
margin: 15px;
|
.el-form-item {
|
||||||
}
|
margin: 15px;
|
||||||
.el-form-item:last-child {
|
}
|
||||||
text-align: right;
|
|
||||||
}
|
.el-form-item:last-child {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user