simple321vip/violin-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rewrite write page

Browse Source
This commit is contained in:
simple321vip
2022-10-28 00:52:28 +08:00
parent 6fc98d832b
commit 2e2dbbbf72
3 changed files with 383 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mock/blog.ts
+31
View File
@@ -0,0 +1,31 @@
import { MockMethod } from 'vite-plugin-mock'
export default [
{
url: '/auth/api/v1/author/blog/content/0001',
method: 'get',
response: ({ body, query }) => {
return {
content: "asdasdasdasdsadasdasdasdasdas"
}
}
},
{
url: '/auth/api/v1/author/blog/content/0002',
method: 'get',
response: ({ body, query }) => {
return {
content: "wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww"
}
}
},
{
url: '/auth/api/v1/author/blog/content',
method: 'POST',
response: ({ body, query }) => {
return {
content: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
}
}
},
] as MockMethod[]
mock/blogs.ts → mock/blogType.ts
+101 -2
View File
@@ -4,11 +4,11 @@ export default [
{
url: '/auth/api/v1/author/blog/list',
method: 'get',
response: () => {
response: ({ body, query }) => {
return [
{
btId: "001",
btName: "your world",
btName: "your world---",
blog_list: [
{
bid: "0001",
@@ -48,6 +48,27 @@ export default [
],
order: 1
},
{
btId: "003",
btName: "my world",
blog_list: [
{
bid: "0003",
title: "three",
content: "nothing",
btId: "002",
order: 0,
},
{
bid: "0004",
title: "two",
content: "anything",
btId: "002",
order: 1,
},
],
order: 2
},
]
}
},
@@ -100,5 +121,83 @@ export default [
},
]
}
},
{
url: '/auth/api/v1/author/blog_type',
method: 'put',
response: () => {
return {
btId: "001",
btName: "your world---",
blog_list: [
{
bid: "0001",
title: "one",
content: "nothing",
btId: "001",
order: 0,
},
],
order: 2,
}
}
},
{
url: '/auth/api/v1/author/blog_type',
method: 'post',
response: () => {
return {
}
}
},
{
url: '/auth/api/v1/author/blog_type',
method: 'delete',
response: ({ body, query }) => {
return [
{
btId: "001",
btName: "your world---",
blog_list: [
{
bid: "0001",
title: "one",
content: "nothing",
btId: "001",
order: 0,
},
{
bid: "0002",
title: "two",
content: "anything",
btId: "001",
order: 1,
},
],
order: 0
},
{
btId: "002",
btName: "my world",
blog_list: [
{
bid: "0003",
title: "three",
content: "nothing",
btId: "002",
order: 0,
},
{
bid: "0004",
title: "two",
content: "anything",
btId: "002",
order: 1,
},
],
order: 1
},
]
}
},
] as MockMethod[]
src/view/blog/createBlog.vue
+248 -176
View File
@@ -1,7 +1,18 @@
<template>
<div class="blog_editer" v-if="isReady">
<div class="bt_section" :style="btWholeStyle">
<el-button class="bt-input" @click="contentDialogVisible = true">增加一个分类</el-button>
<div class="side_bar">
<el-button class="operate_button" v-if="collapsible[0] == 1" :icon="CaretRight" @click="collapsible[0] = 0"
size="small" />
<el-button class="operate_button" v-if="collapsible[0] == 0" :icon="CaretLeft" @click="collapsible[0] = 1"
size="small" />
</div>
<div class="bt_section" :style="btWholeStyle" v-show="collapsible[0] == 0">
<div class="item_header">
<el-button class="item_header_button" @click="blogTypeCreateDialogVisible = true">增加一个分类</el-button>
</div>
<draggable :list="blogTypes" ghost-class="ghost" handle=".move" animation="300" :force-fallback="true" itemKey=""
filter=".forbid" chosen-class="chosenClass" :fallback-class="true" :fallback-on-body="true"
:touch-start-threshold="50" :fallback-tolerance="50" @start="onStart" @end="onEnd" group="group1"
@@ -9,17 +20,27 @@
<template #item="{ element }">
<div class="item">
<label class="move"></label>
<el-button class="bt-input" @click="onclickTypeTab(element.order)">{{ element.btName }}</el-button>
<el-icon v-show="checkedBlogIndex == element.order">
<Setting />
</el-icon>
<p class="bt-input" @click="onclickTypeTab(element.order)">{{ element.btName }}</p>
<div>
<el-button class="operate_button" :icon="Setting" size="small" v-show="checkedBlogIndex == element.order"
@click="handleCreateBlogType()" />
</div>
</div>
</template>
</draggable>
</div>
<div class="b_section" :style="bWholeStyle">
<el-button class="bt-input" :disabled="isclicked" @click="insertBlog">增加一个博客</el-button>
<div class="side_bar">
<el-button class="operate_button" v-if="collapsible[1] == 1" :icon="CaretRight" @click="collapsible[1] = 0"
size="small" />
<el-button class="operate_button" v-if="collapsible[1] == 0" :icon="CaretLeft" @click="collapsible[1] = 1"
size="small" />
</div>
<div class="b_section" :style="bWholeStyle" v-show="collapsible[1] == 0">
<div class="item_header">
<el-button class="item_header_button" :disabled="isclicked" @click="insertBlog">增加一个博客</el-button>
</div>
<draggable :list="blogTypes[checkedBlogIndex].blogs" ghost-class="ghost" handle=".move" animation="300"
:force-fallback="true" itemKey="" filter=".forbid" chosen-class="chosenClass" :fallback-class="true"
:fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50" @start="onStart" @end="onEnd"
@@ -27,14 +48,17 @@
<template #item="{ element }">
<div class="item">
<label class="move"></label>
<el-button class="bt-input" @click="onclickBlogTab(element)">{{ element.title }}</el-button>
<el-icon v-show="checkedBlogIndex == element.order">
<Setting />
</el-icon>
<p class="bt-input" @click="onclickBlogTab(element)">{{ element.title }}</p>
<div>
<el-button class="operate_button" v-show="checkedIndex == element.order" :icon="Edit" size="small"
@click="deleteDialogVisible = true" />
</div>
</div>
</template>
</draggable>
</div>
<div class="c_section">
<div class="title_style">
<el-input v-model="blogTypes[checkedBlogIndex].blogs[checkedIndex].title" @keyup.enter.native="saveTitle"
@@ -50,36 +74,35 @@
:style="{ height: innerHeight }" />
</div>
</div>
<el-dialog v-model="dialogVisible" title="修改博客分类名称" width="30%">
<el-input v-model="(blogTypes[checkedBlogIndex] as BlogType).btName"></el-input>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="saveType">确认</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="contentDialogVisible" title="新的博客分类" width="30%">
<!-- create blogtype dialog -->
<el-dialog v-model="blogTypeCreateDialogVisible" title="新的博客分类" width="30%">
<el-input v-model="btName">
</el-input>
<template #footer>
<span class="dialog-footer">
<el-button @click="contentDialogVisible = false">取消</el-button>
<el-button @click="blogTypeCreateDialogVisible = false">取消</el-button>
<el-button type="primary" @click="insertBlogType">确认</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="btdeleteDialogVisible" title="删除博客分类" width="30%">
你正在对 {{ blogTypes[checkedBlogIndex].btName }}
<el-input v-model="btName" :placeholder="'请输入<' + blogTypes[checkedBlogIndex].btName + '>'">
<!-- edit and delete blogtype dialog -->
<el-dialog v-model="blogTypeEditDialogVisible" title="博客分类 Setting" width="30%">
你正在对「 {{ blogTypes[checkedBlogIndex].btName }}」进行操作
<div style="display: flex; margin: 10px">
<el-button type="primary" @click="saveBlogType()">修改</el-button>
<el-input v-model="btName">
</el-input>
<template #footer>
<span class="dialog-footer">
<el-button @click="btdeleteDialogVisible = false">取消</el-button>
<el-button type="primary" @click="deleteBlogType">确认</el-button>
</span>
</template>
</div>
<div style="display: flex; margin: 10px">
<el-button type="danger" @click="deleteBlogType()">删除</el-button>
<el-input v-model="deleteBtName" :placeholder="'请输入 ' + blogTypes[checkedBlogIndex].btName + ' 进行删除'">
</el-input>
</div>
</el-dialog>
<!-- delete blog dialog -->
<el-dialog v-model="deleteDialogVisible" title="删除博客" width="30%">
你正在对 {{ blogTypes[checkedBlogIndex].blogs[checkedIndex].title }}
<el-input v-model="btName" :placeholder="'请输入<删除>'">
@@ -98,7 +121,7 @@
import { onMounted, reactive, ref, watch } from 'vue'
import $moment from "moment"
import MdEditor from 'md-editor-v3'
import { Edit } from "@element-plus/icons-vue"
import { Edit, CaretRight, CaretLeft, Setting } from "@element-plus/icons-vue"
import 'md-editor-v3/lib/style.css'
import {
updateBtName,
@@ -132,9 +155,8 @@ type BlogType = {
order: number
}
const blogTypes = reactive<BlogType[]>([])
const dialogVisible = ref(false)
const contentDialogVisible = ref(false)
const btdeleteDialogVisible = ref(false)
const blogTypeCreateDialogVisible = ref(false)
const blogTypeEditDialogVisible = ref(false)
const deleteDialogVisible = ref(false)
let checkedIndex = ref<number>(0)
@@ -143,6 +165,9 @@ let isclicked = ref(false)
let isReady = ref(false)
let updated = ref(false)
let startTime = reactive($moment());
// tmp btName for create, edit, delete
let btName = ref("")
let deleteBtName = ref("")
/*
draggable 对CSS样式没有什么要求万物皆可拖拽
@@ -160,25 +185,6 @@ const state = reactive({
})
// 関数定義
//拖拽开始的事件
const onStart = () => {
console.log("开始拖拽");
};
//拖拽结束的事件
const onEnd = () => {
blogTypes.forEach((blogType, index) => {
blogType.order = index
})
sortBlogType()
}
const onMove = (e: any) => {
//不允许停靠
if (e.relatedContext.element.disabledPark == true) return false;
return true;
}
/**
* Blog一覧取得
*/
@@ -210,7 +216,7 @@ const getTestData = async () => {
})
isReady.value = true
checkedBlogIndex.value = blogTypes[0].order
checkedIndex.value = blogTypes.values().next().value.blogs.keys().next().value
checkedIndex.value = 0
// TODO 需要优化部分
/**
* 延迟执行一秒
@@ -233,27 +239,26 @@ const getTestData = async () => {
/**
* BlogTypeを選べる
* @param key
* @param order
*/
const onclickTypeTab = (order: number) => {
checkedBlogIndex.value = order
const bid = blogTypes[order].blogs.values().next().value.bid
// getContent(bid).then(response => {
// (blogTypes[order].blogs.get(bid) as Blog).content = response.data.content
// checkedBlogIndex.value = order
// checkedIndex.value = bid
// })
}
const onclickBlogTab = (blog: Blog) => {
getContent(blog.bid).then(response => {
blogTypes[checkedBlogIndex.value].blogs[checkedIndex.value].content = response.data.content
const bid = blogTypes[order].blogs[0].bid
getContent(bid).then(response => {
blogTypes[order].blogs[0].content = response.data.content
checkedBlogIndex.value = order
checkedIndex.value = 0
})
}
const handleEditBtName = (bt: BlogType) => {
dialogVisible.value = true
const onclickBlogTab = (blog: Blog) => {
checkedIndex.value = blog.order
getContent(blog.bid).then(response => {
blogTypes[checkedBlogIndex.value].blogs[checkedIndex.value].content = response.data.content
checkedIndex.value = blog.order
}).catch(() => {
checkedIndex.value = blog.order
})
}
/**
@@ -276,18 +281,7 @@ const saveContent = () => {
})
}
/**
* btName modify
*/
const saveType = () => {
const query = {
btId: checkedBlogIndex.value,
btName: (blogTypes[checkedBlogIndex.value] as BlogType).btName
}
updateBtName(query).then(response => {
dialogVisible.value = false
})
}
/**
* Blogタイトル修正
@@ -350,14 +344,29 @@ const deleteBlog = () => {
blogTypes[checkedBlogIndex.value].blogs.splice(checkedIndex.value, 1)
deleteDialogVisible.value = false
}
})
deleteDialogVisible.value = false
btName.value = ""
}).catch(() => {
deleteDialogVisible.value = false
btName.value = ""
})
}
}
// Blogタイプ新規作成用、作成後、リセットする
let btName = ref("")
const handleCreateBlogType = () => {
btName.value = blogTypes[checkedBlogIndex.value].btName
blogTypeEditDialogVisible.value = true
}
/**
* create blogType
*/
const insertBlogType = () => {
if (btName.value == "") {
blogTypeCreateDialogVisible.value = false
return
}
const data = {
btName: btName.value,
order: blogTypes.length
@@ -383,32 +392,74 @@ const insertBlogType = () => {
blog_type.blogs.push(blog)
})
blogTypes.push(blog_type)
checkedBlogIndex.value = response.data.btId
checkedIndex.value = blog_type.blogs.keys().next().value
contentDialogVisible.value = false
checkedBlogIndex.value = response.data.order
checkedIndex.value = blog_type.blogs[0].order
blogTypeCreateDialogVisible.value = false
btName.value = ""
})
}
/**
* edit blogType
*/
const saveBlogType = () => {
if (btName.value == "") {
blogTypeEditDialogVisible.value = false
return
}
const query = {
btId: blogTypes[checkedBlogIndex.value].btId,
btName: btName.value,
}
updateBtName(query).then(() => {
console.log(blogTypes)
blogTypes[checkedBlogIndex.value].btName = btName.value
blogTypeEditDialogVisible.value = false
btName.value = ""
}).catch(() => {
btName.value = ""
blogTypeEditDialogVisible.value = false
})
}
const deleteBlogType = () => {
if (btName.value == (blogTypes[checkedBlogIndex.value] as BlogType).btName) {
if (deleteBtName.value == blogTypes[checkedBlogIndex.value].btName) {
const data = {
btId: checkedBlogIndex.value
}
removeBlogType(data).then((response) => {
if (response.status == 200) {
blogTypes.splice(checkedBlogIndex.value, 1)
checkedBlogIndex.value = blogTypes.keys().next().value
checkedIndex.value = blogTypes.values().next().value.blogs.keys().next().value
} else {
blogTypes.length = 0
response.data.sort((x: any, y: any) => { x.order - y.order })
response.data.forEach((element: any) => {
const blog_type: BlogType = {
btId: element.btId,
btName: element.btName,
blogs: [],
order: element.order
}
btdeleteDialogVisible.value = false
element.blog_list.forEach((item: any) => {
const blog: Blog = {
bid: item.bid,
btId: item.btId,
btName: item.btName,
title: item.title,
blog_prex: item.blog_prex,
autosave_control: item.autosave_control,
content: item.content,
order: item.order
}
blog_type.blogs.push(blog)
})
blogTypes.push(blog_type)
})
checkedBlogIndex.value = 0
checkedIndex.value = 0
blogTypeEditDialogVisible.value = false
})
btName.value = ""
} else {
blogTypeEditDialogVisible.value = false
}
deleteBtName.value = ""
}
const sortBlogType = () => {
@@ -448,26 +499,65 @@ getTestData()
// サイズ調整部分
type WholeStyle = {
width: string,
height: string
//拖拽开始的事件
const onStart = () => {
console.log("开始拖拽");
};
//拖拽结束的事件
const onEnd = () => {
blogTypes.forEach((blogType, index) => {
blogType.order = index
})
sortBlogType()
}
let innerHeight = ref("")
const onMove = (e: any) => {
//不允许停靠
if (e.relatedContext.element.disabledPark == true) return false;
return true;
}
type WholeStyle = any
const btWholeStyle = reactive<WholeStyle>({} as WholeStyle)
let btWidth = 0.10 * window.innerWidth
btWholeStyle.width = btWidth + 'px'
btWholeStyle.height = window.innerHeight + 'px'
const bWholeStyle = reactive<WholeStyle>({} as WholeStyle)
let bWidth = 0.23 * window.innerWidth
bWholeStyle.width = bWidth + 'px'
const cWholeStyle = reactive<WholeStyle>({} as WholeStyle)
let contentWidth = 0.67 * window.innerWidth
cWholeStyle.width = contentWidth + 'px'
innerHeight.value = (window.innerHeight - 50) + 'px'
// onMounted(() => {
const collapsible = reactive([0, 0])
const whole_width = reactive([0.15, 0.15])
let innerHeight = ref("")
const selected_style = {
"background-color": "#EBEBEB"
}
const unselected_style = {
"background-color": "#FFFFFF"
}
const setup_size = () => {
btWholeStyle.width = whole_width[0] * window.innerWidth + 'px'
bWholeStyle.width = whole_width[1] * window.innerWidth + 'px'
cWholeStyle.width = ((1 - whole_width[0] - whole_width[1]) * window.innerWidth - 44) + 'px'
innerHeight.value = (window.innerHeight - 50) + 'px'
btWholeStyle.height = window.innerHeight + 'px'
}
setup_size()
watch(collapsible, async () => {
if (collapsible[0] == 0) {
whole_width[0] = 0.15
} else {
whole_width[0] = 0
}
if (collapsible[1] == 0) {
whole_width[1] = 0.15
} else {
whole_width[1] = 0
}
btWholeStyle.width = whole_width[0] * window.innerWidth + 'px'
bWholeStyle.width = whole_width[1] * window.innerWidth + 'px'
cWholeStyle.width = ((1 - whole_width[0] - whole_width[1]) * window.innerWidth - 44) + 'px'
})
// })
</script>
<style scoped>
@@ -495,102 +585,84 @@ innerHeight.value = (window.innerHeight - 50) + 'px'
border-bottom: 1px solid royalblue;
}
.el-dropdown {
margin-right: 5px;
}
.blog_editer {
display: flex;
}
.tab_list {
.item_header {
display: flex;
flex-direction: column;
align-items: center;
border-top: 1px solid royalblue;
border-bottom: 1px solid royalblue;
}
.itxst {
width: 600px;
.item_header_button {
border: 0px;
height: 50px;
}
.move {
cursor: move;
}
table.tb {
color: #333;
border: solid 1px #999;
font-size: 13px;
border-collapse: collapse;
min-width: 100px;
user-select: none;
}
table.tb th {
background: rgb(168 173 217);
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999;
text-align: left;
}
table.tb th:nth-of-type(1) {
text-align: center;
}
table.tb td {
background: #d6c8c8;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999;
}
table.tb td:nth-of-type(1) {
text-align: center;
.side_bar {
display: flex;
align-items: center;
justify-content: flex-start;
width: 20px;
}
.item {
/* border: solid 1px rgb(221, 221, 221); */
padding: 0px;
text-align: left;
/* background-color: rgb(247, 246, 246); */
margin-bottom: 10px;
margin-top: 3px;
margin-bottom: 3px;
display: flex;
height: 50px;
flex-direction: row;
align-items: center;
/* min-height: 100px; */
justify-items: center;
user-select: none;
cursor: move;
border: 0px;
border-bottom: 1px;
}
.item>label {
/* border-bottom: solid 1px rgb(221, 221, 221); */
background-color: lightslategrey;
color: #333;
height: 50px;
width: 10px;
width: 15px;
}
.item>label:hover {
cursor: move;
}
.item>div {
display: flex;
flex-direction: column;
align-items: flex-end;
border: 0px;
}
.operate_button {
border-color: #FFFFFF;
width: 20px;
border: 0px;
}
.bt-input {
margin-left: 0px;
padding-left: 10px;
margin: 0px;
border: 0px;
padding-left: 0px;
padding-right: 5px;
font-size: 15px;
overflow: hidden;
line-height: 50px;
height: 50px;
width: 100px;
border-radius: 0px;
border-right: 0px;
border-left: 0px;
/* border-top: 1px solid royalblue;
border-bottom: 1px solid royalblue; */
flex-grow: 1;
cursor: pointer;
white-space: nowrap;
text-overflow: ellipsis;
}
.bt-input:hover {
background-color: #EBEBEB;
}
.item>p {