parent
cdfd97ab47
commit
7e0b3b9682
@ -1,72 +0,0 @@
|
||||
<template>
|
||||
<ContentBase>
|
||||
<div class="file-item" v-for="item in items" :key="item.name">
|
||||
<div class="file-item">
|
||||
<div @dblclick="handledouleclick(item.name,item.type)" class="file-item-icon">
|
||||
<img v-if="item.type==='folder'" src="@/assets/folder_icon.png" alt="">
|
||||
<img v-else src="@/assets/file_icon.png" alt="">
|
||||
</div>
|
||||
<div class="file-item-title">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ContentBase>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import ContentBase from './ContentBase';
|
||||
|
||||
export default {
|
||||
name: 'ContentShow',
|
||||
components:{
|
||||
ContentBase,
|
||||
},
|
||||
props:{
|
||||
items:{
|
||||
type:Object,
|
||||
required:true,
|
||||
}
|
||||
},
|
||||
setup(props,context){
|
||||
const handledouleclick = (name,type) => {
|
||||
context.emit("handledoubleclick",name,type);
|
||||
}
|
||||
return {
|
||||
handledouleclick,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.file-item{
|
||||
width: 8vw;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
width: 8vw;
|
||||
height: 8vw;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
margin: 0 0.1vw 1vw 0.1vw;
|
||||
border: 0.1vh solid white;
|
||||
}
|
||||
|
||||
.file-item-icon > img {
|
||||
width: 6vw;
|
||||
height: 6vw;
|
||||
}
|
||||
|
||||
|
||||
.file-item-title{
|
||||
width: 6vw;
|
||||
height: 4vw;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
font-size: 1.2vw;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div @click="leftclick()" @dblclick="doubleclick()" @contextmenu.stop.prevent="rightclick($event)"
|
||||
:class="{ 'file-item-selected' : is_selected }"
|
||||
>
|
||||
<div class="file-item-icon" >
|
||||
<img src="@/assets/file_icon.png" alt="">
|
||||
</div>
|
||||
<FileTitle>
|
||||
{{ item.name }}
|
||||
</FileTitle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
import FileTitle from './FileTitle.vue';
|
||||
import { ref } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'FileFiled',
|
||||
components:{
|
||||
FileTitle,
|
||||
},
|
||||
props:{
|
||||
item:{
|
||||
type:Object,
|
||||
required:true,
|
||||
}
|
||||
},
|
||||
setup(props,context){
|
||||
let store = useStore();
|
||||
let is_selected = ref(false);
|
||||
|
||||
const leftclick = () => {
|
||||
is_selected.value = true;
|
||||
}
|
||||
|
||||
const rightclick = (event) => {
|
||||
context.emit('filerightclick',{
|
||||
item:props.item,
|
||||
menuposition:{
|
||||
top: event.clientY + 'px',
|
||||
left: event.clientX + 'px',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const doubleclick = () => {
|
||||
store.commit('forwardPath',props.item.name + '/');
|
||||
}
|
||||
return {
|
||||
leftclick,
|
||||
rightclick,
|
||||
doubleclick,
|
||||
is_selected,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.file-item {
|
||||
width: 8vw;
|
||||
height: 8vw;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
margin: 0 0.1vw 1vw 0.1vw;
|
||||
border: 0.1vh solid white;
|
||||
}
|
||||
|
||||
.file-item-icon > img {
|
||||
width: 6vw;
|
||||
height: 6vw;
|
||||
}
|
||||
|
||||
|
||||
.file-item-title{
|
||||
width: 6vw;
|
||||
height: 4vw;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
font-size: 1.2vw;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.file-item-selected {
|
||||
border: 0.1vh solid #99d1ff;
|
||||
background: #cce8ff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="file-item-title">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FileTitle',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.file-item {
|
||||
width: 8vw;
|
||||
height: 8vw;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
margin: 0 0.1vw 1vw 0.1vw;
|
||||
border: 0.1vh solid white;
|
||||
}
|
||||
|
||||
.file-item-icon > img {
|
||||
width: 6vw;
|
||||
height: 6vw;
|
||||
}
|
||||
|
||||
|
||||
.file-item-title{
|
||||
width: 6vw;
|
||||
height: 4vw;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
font-size: 1.2vw;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.file-item-selected {
|
||||
border: 0.1vh solid #99d1ff;
|
||||
background: #cce8ff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div @click="leftclick()" @dblclick="doubleclick()" @contextmenu.stop.prevent="rightclick($event)"
|
||||
:class="{ 'file-item-selected' : is_selected }"
|
||||
>
|
||||
<div class="file-item-icon" >
|
||||
<img src="@/assets/folder_icon.png" alt="">
|
||||
</div>
|
||||
<FileTitle>
|
||||
{{ item.name }}
|
||||
</FileTitle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import FileTitle from './FileTitle.vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'FolderFiled',
|
||||
components:{
|
||||
FileTitle,
|
||||
},
|
||||
props:{
|
||||
item:{
|
||||
type:Object,
|
||||
required:true,
|
||||
}
|
||||
},
|
||||
setup(props,context){
|
||||
let store = useStore();
|
||||
let is_selected = ref(false);
|
||||
const leftclick = () => {
|
||||
is_selected.value = true;
|
||||
}
|
||||
|
||||
const rightclick = (event) => {
|
||||
context.emit('filerightclick',{
|
||||
item:props.item,
|
||||
menuposition:{
|
||||
top: event.clientY + 'px',
|
||||
left: event.clientX + 'px',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const doubleclick = () => {
|
||||
store.commit('forwardPath',props.item.name + '/');
|
||||
}
|
||||
|
||||
return {
|
||||
leftclick,
|
||||
rightclick,
|
||||
doubleclick,
|
||||
is_selected,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.file-item {
|
||||
width: 8vw;
|
||||
height: 8vw;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
margin: 0 0.1vw 1vw 0.1vw;
|
||||
border: 0.1vh solid white;
|
||||
}
|
||||
|
||||
.file-item-icon > img {
|
||||
width: 6vw;
|
||||
height: 6vw;
|
||||
}
|
||||
|
||||
|
||||
.file-item-title{
|
||||
width: 6vw;
|
||||
height: 4vw;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
font-size: 1.2vw;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.file-item-selected {
|
||||
border: 0.1vh solid #99d1ff;
|
||||
background: #cce8ff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div>
|
||||
<ul v-if="menutype === 'filemenu'" class="file-menu" :style="{top:menuposition.top,left:menuposition.left}">
|
||||
<li>
|
||||
<div @click="open_file">
|
||||
打开
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
复制
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
粘贴
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
重命名
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
删除
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-else class="context-menu" :style="{top:menuposition.top,left:menuposition.left}">
|
||||
<li>
|
||||
<div>
|
||||
新建
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
刷新
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
粘贴
|
||||
</div>
|
||||
</li>
|
||||
<li @click="turn_back">
|
||||
后退
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
// import { computed } from 'vue';
|
||||
|
||||
export default {
|
||||
name:"RightMenu",
|
||||
props:{
|
||||
menuposition:{
|
||||
type:Object,
|
||||
required:true,
|
||||
},
|
||||
menutype:{
|
||||
type:String,
|
||||
required:true,
|
||||
}
|
||||
},
|
||||
setup(props,context){
|
||||
const open_file = () => {
|
||||
context.emit('open_file');
|
||||
}
|
||||
|
||||
const turn_back = () => {
|
||||
|
||||
context.emit('turn_back');
|
||||
}
|
||||
|
||||
return {
|
||||
open_file,
|
||||
turn_back,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.file-menu {
|
||||
/* 菜单样式 */
|
||||
background-color: pink;
|
||||
border: 1px solid #ccc;
|
||||
position: fixed;
|
||||
padding: 0; /* 移除默认的内边距 */
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
/* 其他样式 */
|
||||
}
|
||||
|
||||
.file-menu > li {
|
||||
padding: 10px; /* 添加内边距以确保内容不紧贴边框 */
|
||||
text-align: left; /* 内容左对齐 */
|
||||
width: 100%; /* 列表项占据父容器的全部宽度 */
|
||||
box-sizing: border-box; /* 包含内边距和边框在内计算元素的总宽度 */
|
||||
background-color: #f9f9f9; /* 可选：为列表项添加背景色 */
|
||||
border-bottom: 1px solid #ddd; /* 可选：为列表项添加底部边框 */
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
/* 菜单样式 */
|
||||
background-color: pink;
|
||||
border: 1px solid #ccc;
|
||||
position: fixed;
|
||||
padding: 0; /* 移除默认的内边距 */
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
/* 其他样式 */
|
||||
}
|
||||
|
||||
.context-menu > li {
|
||||
padding: 10px; /* 添加内边距以确保内容不紧贴边框 */
|
||||
text-align: left; /* 内容左对齐 */
|
||||
width: 100%; /* 列表项占据父容器的全部宽度 */
|
||||
box-sizing: border-box; /* 包含内边距和边框在内计算元素的总宽度 */
|
||||
background-color: #f9f9f9; /* 可选：为列表项添加背景色 */
|
||||
border-bottom: 1px solid #ddd; /* 可选：为列表项添加底部边框 */
|
||||
cursor:pointer;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<ContentBase>
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-3">
|
||||
<form @submit.prevent="login">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">用户名</label>
|
||||
<input v-model="username" type="text" class="form-control" id="username">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">密码</label>
|
||||
<input v-model="password" type="password" class="form-control" id="password">
|
||||
</div>
|
||||
<div class="error-message">{{ error_message }}</div>
|
||||
<button type="submit" class="btn btn-primary">登录</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</ContentBase>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentBase from '../components/ContentBase';
|
||||
import { ref } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import router from '@/router/index.js';
|
||||
|
||||
export default {
|
||||
name: 'LoginView',
|
||||
components: {
|
||||
ContentBase,
|
||||
},
|
||||
setup(){
|
||||
let store = useStore();
|
||||
let username = ref('123');
|
||||
let password = ref('123');
|
||||
let error_message = ref('');
|
||||
|
||||
const login = () => {
|
||||
// http://47.106.113.194:8000/token/
|
||||
store.dispatch('login',{
|
||||
username:username.value,
|
||||
password:password.value,
|
||||
success(){
|
||||
error_message.value = '';
|
||||
router.push({name:'home'});
|
||||
},
|
||||
error(){
|
||||
error_message.value = "用户名或密码错误";
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
return {
|
||||
username,
|
||||
password,
|
||||
error_message,
|
||||
login,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<ContentBase>
|
||||
404
|
||||
</ContentBase>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentBase from '../components/ContentBase';
|
||||
|
||||
export default {
|
||||
name: 'NotFoundView',
|
||||
components: {
|
||||
ContentBase,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<ContentBase>
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-3">
|
||||
<form @submit.prevent="register">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">用户名</label>
|
||||
<input v-model="username" type="text" class="form-control" id="username">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">密码</label>
|
||||
<input v-model="password" type="password" class="form-control" id="password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">确认密码</label>
|
||||
<input v-model="password_confirm" type="password" class="form-control" id="password_confirm">
|
||||
</div>
|
||||
<div class="error-message">{{ error_message }}</div>
|
||||
<button type="submit" class="btn btn-primary">注册</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</ContentBase>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentBase from '../components/ContentBase';
|
||||
import { ref } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import $ from 'jquery';
|
||||
import router from '@/router/index.js';
|
||||
|
||||
export default {
|
||||
name: 'RegisterView',
|
||||
components: {
|
||||
ContentBase,
|
||||
},
|
||||
setup(){
|
||||
let store = useStore();
|
||||
let username = ref('');
|
||||
let password = ref('');
|
||||
let password_confirm = ref('');
|
||||
let error_message = '';
|
||||
|
||||
const register = () => {
|
||||
$.ajax({
|
||||
url:'http://47.106.113.194:8000/register/',
|
||||
type:'post',
|
||||
data:{
|
||||
username:username.value,
|
||||
password:password.value,
|
||||
password_confirm:password_confirm.value,
|
||||
},
|
||||
success(resp){
|
||||
console.log(resp);
|
||||
if (resp.result === 'success'){
|
||||
store.dispatch('login',{
|
||||
username:username.value,
|
||||
password:password.value,
|
||||
success(){
|
||||
error_message = '';
|
||||
router.push({name:'home'});
|
||||
},
|
||||
error(){
|
||||
error_message = "系统异常";
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
error_message = resp.result;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
return {
|
||||
username,
|
||||
password,
|
||||
password_confirm,
|
||||
error_message,
|
||||
register,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<ContentBase>
|
||||
<div>
|
||||
{{ $store.state.user.username }}
|
||||
</div>
|
||||
</ContentBase>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentBase from '../components/ContentBase';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'UserProfileView',
|
||||
components: {
|
||||
ContentBase,
|
||||
},
|
||||
setup(){
|
||||
let store = useStore();
|
||||
return {
|
||||
store,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue