first
parent
6ecfe7fa5c
commit
24c9ff4a7e
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
<theme-picker />
|
||||
<!-- <theme-picker /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
<template>
|
||||
<div class="container ">
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<a class="header-iconLogo" style="background-image: url("https://liblibai-web-static.liblib.cloud/liblibai_v4_online/static/_next/static/images/icon-logo.e3ce24f316fb81dbde1cafc3bf956080.svg");"></a>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<!-- <div>PC客户端</div> -->
|
||||
<div class="header-right-btn pc-client">
|
||||
<svg-icon icon-class="404"></svg-icon>
|
||||
PC客户端
|
||||
</div>
|
||||
<div class="header-right-btn" @click="downImg">
|
||||
<svg-icon icon-class="log"></svg-icon>
|
||||
教程专区
|
||||
</div>
|
||||
<div class="header-right-btn">
|
||||
<svg-icon icon-class="number"></svg-icon>
|
||||
发布
|
||||
</div>
|
||||
<div class="header-right-btn">
|
||||
<svg-icon icon-class="pdf"></svg-icon>
|
||||
登录/注册
|
||||
</div>
|
||||
<!-- <div><el-button class="pc-client"><svg-icon icon-class="404" @click="click" />PC客户端</el-button></div>
|
||||
<div><el-button><svg-icon icon-class="404" @click="click" />教程专区</el-button></div>
|
||||
<div><el-button><svg-icon icon-class="404" @click="click" />发布</el-button></div>
|
||||
<div><el-button><svg-icon icon-class="404" @click="click" />登录/注册</el-button></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { downloadImage } from '@/utils/downloadImage';
|
||||
export default {
|
||||
name: "McHeader",
|
||||
methods: {
|
||||
test(){
|
||||
this.$emit('onCloseLogin', true)
|
||||
},
|
||||
handleDownload() {
|
||||
const imageUrl = 'https://img0.baidu.com/it/u=2191392668,814349101&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1399';
|
||||
const fileName = 'downloaded_image.jpg'; // 可自定义文件名
|
||||
downloadImage(imageUrl, fileName);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.header-btn{
|
||||
color: #1890ff;
|
||||
// border-color: #badeff;
|
||||
}
|
||||
.container{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
// padding:0 20px;
|
||||
.header{
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.header-left{
|
||||
.header-iconLogo{
|
||||
display: block;
|
||||
background-repeat: no-repeat;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.header-right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.header-right-btn{
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
color: rgb(51, 51, 51);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
background-color: rgb(241, 242, 248);
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
@extend .header-btn;
|
||||
}
|
||||
}
|
||||
.pc-client{
|
||||
color: #1890ff;
|
||||
border: 1px solid #1890ff;
|
||||
background-color: #fff;
|
||||
border-color: #badeff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-box">
|
||||
<i class="el-icon-close close-login" @click="onCloseLogin(false)"></i>
|
||||
<div class="login-form">
|
||||
<h2 class="title">{{ loginModeDescriptions[currentLoginMode].title }}</h2>
|
||||
<p class="subtitle">{{ loginModeDescriptions[currentLoginMode].des }}</p>
|
||||
<el-form
|
||||
v-if="currentLoginMode === 'phone'"
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="0"
|
||||
>
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
v-model="ruleForm.phone"
|
||||
placeholder="请输入手机号"
|
||||
>
|
||||
<template #prepend>
|
||||
+86
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input v-model="ruleForm.code" placeholder="请输入验证码">
|
||||
<template #suffix>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
class="code-button"
|
||||
:disabled="codeButtonDisabled"
|
||||
@click="onGetCode"
|
||||
>
|
||||
{{ codeButtonText }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<!-- <el-checkbox v-model="form.agree">
|
||||
点击【登录】代表同意
|
||||
<a href="#/user-agreement">《用户协议》</a>
|
||||
<a href="#/privacy-policy">《隐私政策》</a>
|
||||
</el-checkbox> -->
|
||||
<div class="agreement-text">
|
||||
<div>点击【登录】代表同意</div>
|
||||
<div class="agreement-link">《用户协议》《隐私政策》</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div class="login-button" @click="submitForm(ruleFormRef)">登录</div>
|
||||
</el-form>
|
||||
<div v-if="currentLoginMode === 'wechat'" class="wechat-qs">
|
||||
<div class="qr-code">
|
||||
<!-- <WechatLoginQr /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="other-login-methods">
|
||||
<div>
|
||||
<span>其他登录方式</span>
|
||||
</div>
|
||||
<div class="icons-container">
|
||||
<div class="icon-item" @click="setCurrentLoginMode(currentLoginMode)">
|
||||
<img :src="loginModeDescriptions[currentLoginMode].src" alt="" />
|
||||
</div>
|
||||
<!-- <div class="icon-item">
|
||||
<img src="../../assets/images/icon/icon-qq.png" alt="" />
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "McLogin",
|
||||
data(){
|
||||
return{
|
||||
rules:{
|
||||
phone: [
|
||||
{ required: true, message: '请输入手机号', trigger: 'change' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'change' },
|
||||
{ len: 4, message: '验证码长度为4位', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
codeButtonText:'获取验证码',
|
||||
codeButtonDisabled:false,
|
||||
timerCode:null,
|
||||
ruleForm:{
|
||||
phone: '15888888882',
|
||||
code: ''
|
||||
},
|
||||
ruleFormRef:null,
|
||||
currentLoginMode:'phone',
|
||||
loginModeDescriptions:{
|
||||
phone: {
|
||||
title: '登录',
|
||||
des: '如未注册，验证后自动登录',
|
||||
// src: phoneIcon
|
||||
},
|
||||
wechat: {
|
||||
title: '微信一键登录',
|
||||
des: '关注后自动登录',
|
||||
// src: wechatIcon
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCloseLogin(ag){
|
||||
debugger
|
||||
this.$emit('onCloseLogin', ag)
|
||||
},
|
||||
toggleMode(mode){
|
||||
return mode === 'phone' ? 'wechat' : mode === 'wechat' ? 'phone' : mode
|
||||
},
|
||||
setCurrentLoginMode(mode){
|
||||
this.currentLoginMode = this.toggleMode(mode)
|
||||
},
|
||||
async submitForm (formEl){
|
||||
if (!formEl) return
|
||||
await formEl.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
try {
|
||||
// const res = await phoneLogin({...ruleForm})
|
||||
if (res.code === 200) {
|
||||
// ElMessage({
|
||||
// message: '登录成功',
|
||||
// type: 'success'
|
||||
// })
|
||||
store.userInfo = res.data
|
||||
router.push('./home')
|
||||
}else{
|
||||
// ElMessage({
|
||||
// message: res.msg,
|
||||
// type: 'error'
|
||||
// })
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
},
|
||||
async onGetCode () {
|
||||
if (!ruleForm.phone || !/^1[3-9]\d{9}$/.test(ruleForm.phone)) {
|
||||
// ElMessage.error('请输入有效的手机号')
|
||||
return
|
||||
}
|
||||
try{
|
||||
// const res = await getCode({phone:ruleForm.phone})
|
||||
console.log(res);
|
||||
codeButtonDisabled = true
|
||||
let countdown = 60
|
||||
codeButtonText = `${countdown}秒后重试`
|
||||
this.timerCode = window.setInterval(() => {
|
||||
countdown--
|
||||
if (countdown <= 0) {
|
||||
clearInterval(this.timerCode)
|
||||
codeButtonDisabled.value = false
|
||||
codeButtonText.value = '获取验证码'
|
||||
} else {
|
||||
codeButtonText.value = `${countdown}秒后重试`
|
||||
}
|
||||
}, 1000)
|
||||
// ElMessage.success('验证码已发送')
|
||||
}catch(err){
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.el-input--medium .el-input__inner{
|
||||
height: 42px !important;
|
||||
line-height: 42px !important;
|
||||
}
|
||||
.login-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba($color: #000000, $alpha: 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: calc(100vh - $titleBarHeight);
|
||||
|
||||
.login-box {
|
||||
position: relative;
|
||||
width: 360px;
|
||||
padding: 40px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
.close-login{
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: -30px;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
top: 0;
|
||||
&:hover{
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.wechat-qs {
|
||||
text-align: center;
|
||||
}
|
||||
.agreement-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
display: flex;
|
||||
.agreement-link {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.login-button {
|
||||
background-color: rgb(45, 85, 255);
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
line-height: 50px;
|
||||
}
|
||||
.code-button {
|
||||
background-color: rgba($color: #fff, $alpha: 0);
|
||||
border: none;
|
||||
color: #409eff;
|
||||
}
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin-bottom: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// 统一表单项高度
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-input,
|
||||
.el-select {
|
||||
height: 40px; // 统一高度
|
||||
line-height: 40px;
|
||||
box-sizing: border-box; // 包括内外边距
|
||||
}
|
||||
|
||||
// 处理选择器的高度一致
|
||||
.region-select {
|
||||
.el-input {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
a {
|
||||
color: #409eff;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.other-login-methods {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
.icons-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.icon-item {
|
||||
height: 48px;
|
||||
padding: 0px 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="mcwl-siderbar" v-for="(item,index) in sideBarList" :key="index">
|
||||
<div class="mcwl-siderbar-title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="siderbar-item" :style="{border:item.dashed ? '1px dashed #818080' : ''}" v-for="(subItem,subIndex) in item.list" :key="subIndex">
|
||||
<div class="siderbar-icon">
|
||||
<svg-icon icon-class="pdf"></svg-icon>
|
||||
</div>
|
||||
<div class="siderbar-menu">
|
||||
<div class="siderbar-menu-text">
|
||||
{{ subItem.text }}
|
||||
</div>
|
||||
<div class="siderbar-menu-des">
|
||||
{{ subItem.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-content">
|
||||
<div class="join-us">
|
||||
<svg-icon icon-class="pdf"></svg-icon>
|
||||
加入我们
|
||||
</div>
|
||||
<div class="platform-content">
|
||||
<div class="platform-item">
|
||||
微信公众号
|
||||
</div>
|
||||
<div class="platform-item">
|
||||
小红书
|
||||
</div>
|
||||
<div class="platform-item">
|
||||
抖音
|
||||
</div>
|
||||
<div class="platform-item">
|
||||
B站
|
||||
</div>
|
||||
</div>
|
||||
<div class="platform-content">
|
||||
<div>
|
||||
用户协议
|
||||
</div>
|
||||
<div>
|
||||
隐私政策
|
||||
</div>
|
||||
<div>
|
||||
关于我们
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-text">
|
||||
<div>
|
||||
上海辰风互娱网络科技有限公司
|
||||
</div>
|
||||
<div>
|
||||
京IPC备234324324号
|
||||
</div>
|
||||
<div>
|
||||
网信算备
|
||||
</div>
|
||||
<div>
|
||||
23423432432432423号
|
||||
</div>
|
||||
<div>
|
||||
生成式人工智能服务管理暂行办法
|
||||
</div>
|
||||
<div>
|
||||
备案号shanghai-sefef-23434
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "McSideBar",
|
||||
data(){
|
||||
return{
|
||||
sideBarList:[
|
||||
{
|
||||
id:1,
|
||||
title:'探索',
|
||||
dashed:false,
|
||||
list:[
|
||||
{
|
||||
id:11,
|
||||
icon:'',
|
||||
text:'模型广场',
|
||||
desc:''
|
||||
},
|
||||
{
|
||||
id:12,
|
||||
icon:'',
|
||||
text:'作品灵感',
|
||||
desc:''
|
||||
},
|
||||
{
|
||||
id:13,
|
||||
icon:'',
|
||||
text:'工作流',
|
||||
desc:''
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
title:'创作',
|
||||
dashed:true,
|
||||
list:[
|
||||
{
|
||||
id:21,
|
||||
icon:'',
|
||||
text:'在线生图',
|
||||
desc:'Web UI'
|
||||
},
|
||||
{
|
||||
id:22,
|
||||
icon:'',
|
||||
text:'在线工作流',
|
||||
desc:'Comfy UI'
|
||||
},
|
||||
// {
|
||||
// id:23,
|
||||
// icon:'',
|
||||
// text:'训练LoRA'
|
||||
// },
|
||||
// {
|
||||
// id:24,
|
||||
// icon:'',
|
||||
// text:'高级版生图'
|
||||
// },
|
||||
]
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
title:'其他',
|
||||
dashed:false,
|
||||
list:[
|
||||
// {
|
||||
// id:31,
|
||||
// icon:'',
|
||||
// text:'API开放平台',
|
||||
// },
|
||||
// {
|
||||
// id:32,
|
||||
// icon:'',
|
||||
// text:'创作中心',
|
||||
// },
|
||||
{
|
||||
id:33,
|
||||
icon:'',
|
||||
text:'个人中心',
|
||||
|
||||
},
|
||||
{
|
||||
id:34,
|
||||
icon:'',
|
||||
text:'会员中心',
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
.container{
|
||||
overflow: auto; /* 内容可滚动 */
|
||||
scrollbar-width: none; /* 仅适用于 Firefox，隐藏滚动条 */
|
||||
-ms-overflow-style: none; /* 仅适用于 IE 和 Edge */
|
||||
color: #4e4e4e;
|
||||
width: 220px;
|
||||
height: calc(100vh - 61px);
|
||||
border-right:1px solid #e7e7e7;
|
||||
.mcwl-siderbar{
|
||||
font-size: 14px;
|
||||
padding: 20px;
|
||||
.mcwl-siderbar-title{
|
||||
color: rgb(156, 163, 175);
|
||||
font-size: 12px;
|
||||
}
|
||||
.siderbar-item-dashed{
|
||||
border: 1px dashed #818080;
|
||||
}
|
||||
.siderbar-item{
|
||||
border-radius: 10px;
|
||||
padding: 10px 8px;
|
||||
margin-top: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
.siderbar-icon{
|
||||
margin-right: 4px;
|
||||
> svg{
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.siderbar-menu{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.siderbar-menu-des{
|
||||
margin-top: 4px;
|
||||
color: #8e8e8e;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-content{
|
||||
padding: 20px;
|
||||
.join-us{
|
||||
width: auto;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
border: 1px dashed #818080;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.platform-content{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 12px;
|
||||
.platform-item{
|
||||
padding: 4px 6px;
|
||||
}
|
||||
}
|
||||
.footer-text{
|
||||
font-size:12px;
|
||||
color:#8e8e8e;
|
||||
>div{
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="wechat-login-container">
|
||||
<div v-if="bindTimeout" class="tipTimeout" @click="onGetUUid">
|
||||
刷新二维码
|
||||
<el-icon :size="30"><Refresh /></el-icon>
|
||||
<!-- <i class="el-icon-refresh" @click="onGetUUid"></i> 刷新 -->
|
||||
</div>
|
||||
<div class="qrcode-wrapper" v-if="qrUrl">
|
||||
<!-- <qrcode-vue :value="qrUrl" :size="200" level="M" /> -->
|
||||
<!-- <div class="refresh-tip" v-if="needRefresh">
|
||||
二维码已过期，点击刷新
|
||||
<button @click="generateQrCode">刷新二维码</button>
|
||||
</div> -->
|
||||
</div>
|
||||
<div v-else class="loading">
|
||||
加载中...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "McWechatLoginQr",
|
||||
data(){
|
||||
return{
|
||||
pollingTimer:null,
|
||||
bindTimeout:0,
|
||||
qrUrl:''
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
.wechat-login-container {
|
||||
width: 280px;
|
||||
padding:0 20px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.tipTimeout{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
background-color: rgba($color: #000000, $alpha: 0.5);
|
||||
.qrcode-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.loading {
|
||||
padding: 20px;
|
||||
color: #999;
|
||||
}
|
||||
// opacity:0.3
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -1,6 +1,17 @@
|
|||
<template>
|
||||
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
|
||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
||||
<div>
|
||||
<McHeader @onCloseLogin="onCloseLogin"></McHeader>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div>
|
||||
<McSidebar></McSidebar>
|
||||
</div>
|
||||
<div>
|
||||
<McLogin @onCloseLogin="onCloseLogin" v-if="isShowLogin"></McLogin>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
||||
<sidebar v-if="!sidebar.hide" class="sidebar-container"/>
|
||||
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
|
||||
<div :class="{'fixed-header':fixedHeader}">
|
||||
|
|
@ -11,28 +22,39 @@
|
|||
<right-panel>
|
||||
<settings/>
|
||||
</right-panel>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RightPanel from '@/components/RightPanel'
|
||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
||||
import ResizeMixin from './mixin/ResizeHandler'
|
||||
import { getToken } from '@/utils/auth'
|
||||
// import RightPanel from '@/components/RightPanel'
|
||||
import McHeader from '@/components/McHeader'
|
||||
import McSidebar from '@/components/McSideBar'
|
||||
import McLogin from '@/components/McLogin'
|
||||
// import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
||||
// import ResizeMixin from './mixin/ResizeHandler'
|
||||
import { mapState } from 'vuex'
|
||||
import variables from '@/assets/styles/variables.scss'
|
||||
|
||||
export default {
|
||||
name: 'Layout',
|
||||
components: {
|
||||
AppMain,
|
||||
Navbar,
|
||||
RightPanel,
|
||||
Settings,
|
||||
Sidebar,
|
||||
TagsView
|
||||
data() {
|
||||
return {
|
||||
isShowLogin:false,
|
||||
}
|
||||
},
|
||||
mixins: [ResizeMixin],
|
||||
components: {
|
||||
// AppMain,
|
||||
// Navbar,
|
||||
// RightPanel,
|
||||
// Settings,
|
||||
// Sidebar,
|
||||
// TagsView,
|
||||
McHeader,
|
||||
McSidebar,
|
||||
McLogin
|
||||
},
|
||||
// mixins: [ResizeMixin],
|
||||
computed: {
|
||||
...mapState({
|
||||
theme: state => state.settings.theme,
|
||||
|
|
@ -55,6 +77,9 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
onCloseLogin(ag){
|
||||
this.isShowLogin = ag
|
||||
},
|
||||
handleClickOutside() {
|
||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||
}
|
||||
|
|
@ -65,7 +90,10 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
@import "~@/assets/styles/mixin.scss";
|
||||
@import "~@/assets/styles/variables.scss";
|
||||
|
||||
.main-content{
|
||||
display: flex;
|
||||
padding-top: 61px
|
||||
}
|
||||
.app-wrapper {
|
||||
@include clearfix;
|
||||
position: relative;
|
||||
|
|
@ -93,7 +121,7 @@ export default {
|
|||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
width: calc(100% - #{$base-sidebar-width});
|
||||
// width: calc(100% - #{$base-sidebar-width});
|
||||
transition: width 0.28s;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -47,14 +47,16 @@ router.beforeEach((to, from, next) => {
|
|||
}
|
||||
}
|
||||
} else {
|
||||
next()
|
||||
|
||||
// 没有token
|
||||
if (isWhiteList(to.path)) {
|
||||
// 在免登录白名单，直接进入
|
||||
next()
|
||||
} else {
|
||||
next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
|
||||
NProgress.done()
|
||||
}
|
||||
// if (isWhiteList(to.path)) {
|
||||
// // 在免登录白名单，直接进入
|
||||
// next()
|
||||
// } else {
|
||||
// next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
|
||||
// NProgress.done()
|
||||
// }
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
// src/utils/downloadImage.js
|
||||
|
||||
export async function downloadImage(imageUrl, fileName = 'downloaded_image.jpg') {
|
||||
try {
|
||||
// 使用 fetch 获取图片数据
|
||||
const response = await fetch(imageUrl);
|
||||
const blob = await response.blob(); // 将响应转为 Blob
|
||||
|
||||
// 创建一个 URL 对象
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
|
||||
// 创建一个 <a> 标签并设置其下载属性
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = fileName; // 指定下载的文件名
|
||||
a.click(); // 触发下载
|
||||
|
||||
// 释放对象 URL
|
||||
window.URL.revokeObjectURL(url);
|
||||
} catch (error) {
|
||||
console.error('下载图片失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue