pixwsber7
/
dsl3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨 规范前台src/views里面的代码

Browse Source
master
linhaojun 4 years ago
parent efc05b355b
commit ca99ef5678
12 changed files with 142 additions and 220 deletions
Show Stats Download Patch File Download Diff File

59
aurora-vue/aurora-blog/src/views/404.vue
Unescape View File

@ -7,22 +7,15 @@
<div class="left-section">
<div class="inner-content">
<h1 class="heading">404</h1>
<p class="subheading">
Looks like the page you were looking for is no longer here.
</p>
<p class="subheading">Looks like the page you were looking for is no longer here.</p>
</div>
</div>
<div class="right-section">
<svg
class="svgimg"
xmlns="http://www.w3.org/2000/svg"
viewBox="51.5 -15.288 385 505.565"
>
<svg class="svgimg" xmlns="http://www.w3.org/2000/svg" viewBox="51.5 -15.288 385 505.565">
<g class="bench-legs">
<path
d="M202.778,391.666h11.111v98.611h-11.111V391.666z M370.833,390.277h11.111v100h-11.111V390.277z M183.333,456.944h11.111
v33.333h-11.111V456.944z M393.056,456.944h11.111v33.333h-11.111V456.944z"
/>
v33.333h-11.111V456.944z M393.056,456.944h11.111v33.333h-11.111V456.944z" />
</g>
<g class="top-bench">
<path
@ -30,70 +23,52 @@
c0-1.535,1.244-2.778,2.778-2.778H393.75c1.534,0,2.777,1.243,2.777,2.778V397.917z M400.694,414.583
c0,1.534-1.243,2.778-2.777,2.778H188.194c-1.534,0-2.778-1.244-2.778-2.778v-8.333c0-1.534,1.244-2.777,2.778-2.777h209.723
c1.534,0,2.777,1.243,2.777,2.777V414.583z M403.473,431.25c0,1.534-1.244,2.777-2.778,2.777H184.028
c-1.534,0-2.778-1.243-2.778-2.777v-8.333c0-1.534,1.244-2.778,2.778-2.778h216.667c1.534,0,2.778,1.244,2.778,2.778V431.25z"
/>
c-1.534,0-2.778-1.243-2.778-2.777v-8.333c0-1.534,1.244-2.778,2.778-2.778h216.667c1.534,0,2.778,1.244,2.778,2.778V431.25z" />
</g>
<g class="bottom-bench">
<path
d="M417.361,459.027c0,0.769-1.244,1.39-2.778,1.39H170.139c-1.533,0-2.777-0.621-2.777-1.39v-4.86
c0-0.769,1.244-0.694,2.777-0.694h244.444c1.534,0,2.778-0.074,2.778,0.694V459.027z"
/>
c0-0.769,1.244-0.694,2.777-0.694h244.444c1.534,0,2.778-0.074,2.778,0.694V459.027z" />
<path
d="M185.417,443.75H400c0,0,18.143,9.721,17.361,10.417l-250-0.696C167.303,451.65,185.417,443.75,185.417,443.75z"
/>
d="M185.417,443.75H400c0,0,18.143,9.721,17.361,10.417l-250-0.696C167.303,451.65,185.417,443.75,185.417,443.75z" />
</g>
<g id="lamp">
<path
class="lamp-details"
d="M125.694,421.997c0,1.257-0.73,3.697-1.633,3.697H113.44c-0.903,0-1.633-2.44-1.633-3.697V84.917
c0-1.257,0.73-2.278,1.633-2.278h10.621c0.903,0,1.633,1.02,1.633,2.278V421.997z"
/>
c0-1.257,0.73-2.278,1.633-2.278h10.621c0.903,0,1.633,1.02,1.633,2.278V421.997z" />
<path
class="lamp-accent"
d="M128.472,93.75c0,1.534-1.244,2.778-2.778,2.778h-13.889c-1.534,0-2.778-1.244-2.778-2.778V79.861
c0-1.534,1.244-2.778,2.778-2.778h13.889c1.534,0,2.778,1.244,2.778,2.778V93.75z"
/>
c0-1.534,1.244-2.778,2.778-2.778h13.889c1.534,0,2.778,1.244,2.778,2.778V93.75z" />
<circle class="lamp-light" cx="119.676" cy="44.22" r="40.51" />
<path
class="lamp-details"
d="M149.306,71.528c0,3.242-13.37,13.889-29.861,13.889S89.583,75.232,89.583,71.528c0-4.166,13.369-13.889,29.861-13.889
S149.306,67.362,149.306,71.528z"
/>
S149.306,67.362,149.306,71.528z" />
<radialGradient
class="light-gradient"
id="SVGID_1_"
cx="119.676"
cy="44.22"
r="65"
gradientUnits="userSpaceOnUse"
>
gradientUnits="userSpaceOnUse">
<stop offset="0%" style="stop-color: #ffffff; stop-opacity: 1" />
<stop offset="50%" style="stop-color: #ededed; stop-opacity: 0.5">
<animate
attributeName="stop-opacity"
values="0.0; 0.5; 0.0"
dur="5000ms"
repeatCount="indefinite"
></animate>
repeatCount="indefinite"></animate>
</stop>
<stop
offset="100%"
style="stop-color: #ededed; stop-opacity: 0"
/>
<stop offset="100%" style="stop-color: #ededed; stop-opacity: 0" />
</radialGradient>
<circle
class="lamp-light__glow"
fill="url(#SVGID_1_)"
cx="119.676"
cy="44.22"
r="65"
/>
<circle class="lamp-light__glow" fill="url(#SVGID_1_)" cx="119.676" cy="44.22" r="65" />
<path
class="lamp-bottom"
d="M135.417,487.781c0,1.378-1.244,2.496-2.778,2.496H106.25c-1.534,0-2.778-1.118-2.778-2.496v-74.869
c0-1.378,1.244-2.495,2.778-2.495h26.389c1.534,0,2.778,1.117,2.778,2.495V487.781z"
/>
c0-1.378,1.244-2.495,2.778-2.495h26.389c1.534,0,2.778,1.117,2.778,2.495V487.781z" />
</g>
</svg>
</div>
@ -103,7 +78,6 @@
<style lang="css" scoped>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans');
/*Variables*/
.left-section .inner-content {
position: absolute;
top: 50%;
@ -122,10 +96,7 @@
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
var(--background-primary),
var(--background-secondary)
);
background: linear-gradient(var(--background-primary), var(--background-secondary));
border-radius: 18px;
}
.background .ground {

12
aurora-vue/aurora-blog/src/views/About.vue
Unescape View File

@ -84,45 +84,36 @@ export default defineComponent({
size: 7
})
commentStore.type = 3
onMounted(() => {
fetchComments()
fetchAbout()
})
onBeforeUnmount(() => {
commonStore.resetHeaderImage()
tocbot.destroy()
})
provide(
'comments',
computed(() => reactiveData.comments)
)
provide(
'haveMore',
computed(() => reactiveData.haveMore)
)
emitter.on('aboutFetchComment', () => {
pageInfo.current = 1
reactiveData.isReload = true
fetchComments()
})
emitter.on('aboutFetchReplies', (index) => {
fetchReplies(index)
})
emitter.on('aboutLoadMore', () => {
fetchComments()
})
const handlePreview = (index: any) => {
v3ImgPreviewFn({ images: reactiveData.images, index: reactiveData.images.indexOf(index) })
}
const initTocbot = () => {
let nodes = postRef.value.children
if (nodes.length) {
@ -161,7 +152,6 @@ export default defineComponent({
})
})
}
const fetchComments = () => {
const params = {
type: 3,
@ -184,13 +174,11 @@ export default defineComponent({
pageInfo.current++
})
}
const fetchReplies = (index: any) => {
api.getRepliesByCommentId(reactiveData.comments[index].id).then(({ data }) => {
reactiveData.comments[index].replyDTOs = data.data
})
}
return {
postRef,
...toRefs(reactiveData),

14
aurora-vue/aurora-blog/src/views/Archives.vue
Unescape View File

@ -68,15 +68,13 @@ export default defineComponent({
total: 0,
size: 12
})
onMounted(() => {
toPageTop()
fetchArchives()
})
onUnmounted(() => {
commonStore.resetHeaderImage()
})
const fetchArchives = () => {
articleStore.archives = ''
api
@ -99,16 +97,16 @@ export default defineComponent({
pagination.total = data.data.count
})
}
const pageChangeHanlder = (current: number) => {
pagination.current = current
toPageTop()
fetchArchives()
}
const toPageTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
top: 0
})
fetchArchives()
}
return {
pageChangeHanlder,
pagination,

56
aurora-vue/aurora-blog/src/views/Article.vue
Unescape View File

@ -187,7 +187,7 @@ export default defineComponent({
const articleRef = ref()
let md = require('markdown-it')()
const reactiveData = reactive({
id: '' as any,
articleId: '' as any,
article: '' as any,
wordNum: '' as any,
readTime: '' as any,
@ -203,54 +203,45 @@ export default defineComponent({
size: 7
})
commentStore.type = 1
onMounted(() => {
reactiveData.id = route.params.articleId
toTop()
reactiveData.articleId = route.params.articleId
toPageTop()
fetchArticle()
fetchComments()
})
onBeforeUnmount(() => {
commonStore.resetHeaderImage()
reactiveData.article = ''
tocbot.destroy()
})
onBeforeRouteUpdate((to) => {
if (to.params.articleId != reactiveData.id) {
reactiveData.article = ''
reactiveData.readTime = ''
reactiveData.wordNum = ''
reactiveData.comments = []
reactiveData.images = []
reactiveData.preArticleCard = ''
reactiveData.nextArticleCard = ''
reactiveData.id = to.params.articleId
pageInfo.current = 1
reactiveData.isReload = true
toTop()
fetchArticle()
fetchComments()
}
reactiveData.article = ''
reactiveData.readTime = ''
reactiveData.wordNum = ''
reactiveData.comments = []
reactiveData.images = []
reactiveData.preArticleCard = ''
reactiveData.nextArticleCard = ''
reactiveData.articleId = to.params.articleId
pageInfo.current = 1
reactiveData.isReload = true
toPageTop()
fetchArticle()
fetchComments()
})
provide(
'comments',
computed(() => reactiveData.comments)
)
provide(
'haveMore',
computed(() => reactiveData.haveMore)
)
emitter.on('articleFetchComment', () => {
pageInfo.current = 1
reactiveData.isReload = true
fetchComments()
})
emitter.on('articleFetchReplies', (index) => {
fetchReplies(index)
})
@ -258,11 +249,9 @@ export default defineComponent({
emitter.on('articleLoadMore', () => {
fetchComments()
})
const handlePreview = (index: any) => {
v3ImgPreviewFn({ images: reactiveData.images, index: reactiveData.images.indexOf(index) })
}
const initTocbot = () => {
let nodes = articleRef.value.children
if (nodes.length) {
@ -290,10 +279,9 @@ export default defineComponent({
})
}
}
const fetchArticle = () => {
loading.value = true
api.getArticeById(reactiveData.id).then(({ data }) => {
api.getArticeById(reactiveData.articleId).then(({ data }) => {
if (data.code === 52003) {
proxy.$notify({
title: 'Error',
@ -344,11 +332,10 @@ export default defineComponent({
})
})
}
const fetchComments = () => {
const params = {
type: 1,
topicId: reactiveData.id,
topicId: reactiveData.articleId,
current: pageInfo.current,
size: pageInfo.size
}
@ -367,31 +354,26 @@ export default defineComponent({
pageInfo.current++
})
}
const fetchReplies = (index: any) => {
api.getRepliesByCommentId(reactiveData.comments[index].id).then(({ data }) => {
reactiveData.comments[index].replyDTOs = data.data
})
}
const handleAuthorClick = (link: string) => {
if (link === '') link = window.location.href
window.location.href = link
}
const toTop = () => {
const toPageTop = () => {
window.scrollTo({
top: 0
})
}
const deleteHTMLTag = (content: any) => {
return content
.replace(/<\/?[^>]*>/g, '')
.replace(/[|]*\n/, '')
.replace(/&npsp;/gi, '')
}
return {
articleRef,
...toRefs(reactiveData),

15
aurora-vue/aurora-blog/src/views/ArticleList.vue
Unescape View File

@ -43,14 +43,15 @@ export default defineComponent({
total: 0,
current: 1
})
const reactiveData = reactive({
articles: '' as any,
tagName: '' as any
})
const fetchData = () => {
onMounted(() => {
reactiveData.tagName = route.query.tagName
fetchArticles()
})
const fetchArticles = () => {
api
.getArticlesByTagId({
tagId: route.params.tagId,
@ -69,21 +70,17 @@ export default defineComponent({
pagination.total = data.data.count
})
}
onMounted(fetchData)
const backToPageTop = () => {
window.scrollTo({
top: 0
})
}
const pageChangeHanlder = (current: number) => {
reactiveData.articles = ''
backToPageTop()
pagination.current = current
fetchData()
backToPageTop()
fetchArticles()
}
return {
pagination,
pageChangeHanlder,

45
aurora-vue/aurora-blog/src/views/FriendLink.vue
Unescape View File

@ -60,7 +60,6 @@ export default defineComponent({
setup() {
const { t } = useI18n()
const commentStore = useCommentStore()
commentStore.type = 4
const reactiveData = reactive({
links: '' as any,
comments: [] as any,
@ -71,10 +70,30 @@ export default defineComponent({
current: 1,
size: 7
})
const fetchData = () => {
commentStore.type = 4
onMounted(() => {
fetchLinks()
fetchComments()
}
})
provide(
'comments',
computed(() => reactiveData.comments)
)
provide(
'haveMore',
computed(() => reactiveData.haveMore)
)
emitter.on('friendLinkFetchComment', () => {
pageInfo.current = 1
reactiveData.isReload = true
fetchComments()
})
emitter.on('friendLinkFetchReplies', (index) => {
fetchReplies(index)
})
emitter.on('friendLinkLoadMore', () => {
fetchComments()
})
const fetchLinks = () => {
api.getFriendLink().then(({ data }) => {
reactiveData.links = data.data
@ -107,26 +126,6 @@ export default defineComponent({
reactiveData.comments[index].replyDTOs = data.data
})
}
onMounted(fetchData)
provide(
'comments',
computed(() => reactiveData.comments)
)
provide(
'haveMore',
computed(() => reactiveData.haveMore)
)
emitter.on('friendLinkFetchComment', () => {
pageInfo.current = 1
reactiveData.isReload = true
fetchComments()
})
emitter.on('friendLinkFetchReplies', (index) => {
fetchReplies(index)
})
emitter.on('friendLinkLoadMore', () => {
fetchComments()
})
return {
...toRefs(reactiveData),
t

17
aurora-vue/aurora-blog/src/views/Home.vue
Unescape View File

@ -126,7 +126,6 @@ export default defineComponent({
})
let nowCategoryId = 0
let md = require('markdown-it')()
onMounted(() => {
fetchTopAndFeatured()
fetchCategories()
@ -134,7 +133,6 @@ export default defineComponent({
const articleListEl = document.getElementById('article-list')
articleOffset.value = articleListEl && articleListEl instanceof HTMLElement ? articleListEl.offsetTop + 120 : 0
})
const fetchTopAndFeatured = () => {
api.getTopAndFeaturedArticles().then(({ data }) => {
data.data.topArticle.articleContent = md
@ -153,7 +151,6 @@ export default defineComponent({
articleStore.featuredArticles = data.data.featuredArticles
})
}
const fetchArticles = () => {
reactiveData.haveArticles = false
api
@ -176,7 +173,6 @@ export default defineComponent({
}
})
}
const fetchArticlesByCategoryId = (categoryId: any) => {
reactiveData.haveArticles = false
api
@ -198,23 +194,20 @@ export default defineComponent({
reactiveData.haveArticles = true
})
}
const fetchCategories = () => {
categoryStore.categories = []
api.getAllCategories().then(({ data }) => {
categoryStore.categories.push(...data.data)
})
}
const expandHandler = () => {
expanderClass.value.expanded = !expanderClass.value.expanded
tabClass.value['expanded-tab'] = !tabClass.value['expanded-tab']
}
const handleTabChange = (categoryId: any) => {
pagination.current = 1
activeTab.value = categoryId
backToPageTop()
toPageTop()
if (categoryId !== 0) {
nowCategoryId = categoryId
fetchArticlesByCategoryId(categoryId)
@ -223,28 +216,24 @@ export default defineComponent({
fetchArticles()
}
}
const backToPageTop = () => {
const toPageTop = () => {
window.scrollTo({
top: articleOffset.value
})
}
const activeTabStyle = (catagoryId: any) => {
if (catagoryId === activeTab.value) return { background: appStore.themeConfig.header_gradient_css }
return {}
}
const pageChangeHanlder = (current: number) => {
pagination.current = current
backToPageTop()
toPageTop()
if (nowCategoryId === 0) {
fetchArticles()
} else {
fetchArticlesByCategoryId(nowCategoryId)
}
}
return {
...toRefs(reactiveData),
...toRefs(articleStore.$state),

46
aurora-vue/aurora-blog/src/views/Message.vue
Unescape View File

@ -35,7 +35,6 @@ export default defineComponent({
setup() {
const { t } = useI18n()
const commentStore = useCommentStore()
commentStore.type = 2
const reactiveData = reactive({
comments: [] as any,
haveMore: false as any,
@ -45,9 +44,30 @@ export default defineComponent({
current: 1,
size: 7
})
const fetchData = () => {
commentStore.type = 2
onMounted(() => {
fetchComments()
}
})
provide(
'comments',
computed(() => reactiveData.comments)
)
provide(
'haveMore',
computed(() => reactiveData.haveMore)
)
emitter.on('messageFetchComment', () => {
pageInfo.current = 1
reactiveData.isReload = true
fetchComments()
})
emitter.on('messageFetchReplies', (index) => {
fetchReplies(index)
})
emitter.on('messageLoadMore', () => {
fetchComments()
})
const fetchComments = () => {
const params = {
type: 2,
@ -75,26 +95,6 @@ export default defineComponent({
reactiveData.comments[index].replyDTOs = data.data
})
}
provide(
'comments',
computed(() => reactiveData.comments)
)
provide(
'haveMore',
computed(() => reactiveData.haveMore)
)
emitter.on('messageFetchComment', () => {
pageInfo.current = 1
reactiveData.isReload = true
fetchComments()
})
emitter.on('messageFetchReplies', (index) => {
fetchReplies(index)
})
emitter.on('messageLoadMore', () => {
fetchComments()
})
onMounted(fetchData)
return {
...toRefs(reactiveData),
t

4
aurora-vue/aurora-blog/src/views/Photos.vue
Unescape View File

@ -19,7 +19,7 @@
:infinite-scroll-immediate-check="false"
:infinite-scroll-disabled="noResult"
infinite-scroll-watch-disabled="scrollDisabled"
:infinite-scroll-distance="isMobile?0:30">
:infinite-scroll-distance="isMobile ? 0 : 30">
<div class="photo-wrap">
<img
v-for="(item, index) of photos"
@ -95,7 +95,7 @@ export default defineComponent({
...toRefs(reactiveData),
handlePreview,
loadDataFromServer,
isMobile:computed(()=>commonStore.isMobile),
isMobile: computed(() => commonStore.isMobile),
t
}
}

15
aurora-vue/aurora-blog/src/views/Tags.vue
Unescape View File

@ -39,18 +39,17 @@ export default defineComponent({
const commonStore = useCommonStore()
const { t } = useI18n()
const tagStore = useTagStore()
const fetchData = async () => {
onMounted(() => {
fetchTags()
})
onUnmounted(() => {
commonStore.resetHeaderImage()
})
const fetchTags = () => {
api.getAllTags().then(({ data }) => {
tagStore.tags = data.data
})
}
onMounted(fetchData)
onUnmounted(() => {
commonStore.resetHeaderImage()
})
return {
tags: toRef(tagStore.$state, 'tags'),
t

66
aurora-vue/aurora-blog/src/views/Talk.vue
Unescape View File

@ -67,7 +67,6 @@ export default defineComponent({
setup() {
const { t } = useI18n()
const commentStore = useCommentStore()
commentStore.type = 5
const route = useRoute()
const router = useRouter()
const reactiveData = reactive({
@ -81,15 +80,34 @@ export default defineComponent({
current: 1,
size: 7
})
commentStore.type = 5
onMounted(() => {
toPageTop()
fetchTalk()
fetchComments()
})
provide(
'comments',
computed(() => reactiveData.comments)
)
provide(
'haveMore',
computed(() => reactiveData.haveMore)
)
emitter.on('talkFetchComment', () => {
pageInfo.current = 1
reactiveData.isReload = true
fetchComments()
})
emitter.on('talkFetchReplies', (index) => {
fetchReplies(index)
})
emitter.on('talkLoadMore', () => {
fetchComments()
})
const handlePreview = (index: any) => {
v3ImgPreviewFn({ images: reactiveData.images, index: reactiveData.images.indexOf(index) })
}
const formatTime = (data: any): string => {
let hours = new Date(data).getHours()
let minutes = new Date(data).getMinutes()
let seconds = new Date(data).getSeconds()
return hours + ':' + minutes + ':' + seconds
}
const fetchTalk = () => {
api.getTalkById(route.params.talkId).then(({ data }) => {
if (data.data === null) {
@ -102,12 +120,10 @@ export default defineComponent({
}
})
}
const path = route.path
const arr = path.split('/')
const fetchComments = () => {
const params = {
type: 5,
topicId: arr[2],
topicId: route.params.talkId,
current: pageInfo.current,
size: pageInfo.size
}
@ -131,33 +147,17 @@ export default defineComponent({
reactiveData.comments[index].replyDTOs = data.data
})
}
provide(
'comments',
computed(() => reactiveData.comments)
)
provide(
'haveMore',
computed(() => reactiveData.haveMore)
)
emitter.on('talkFetchComment', () => {
pageInfo.current = 1
reactiveData.isReload = true
fetchComments()
})
emitter.on('talkFetchReplies', (index) => {
fetchReplies(index)
})
emitter.on('talkLoadMore', () => {
fetchComments()
})
const fetchData = () => {
const formatTime = (data: any): string => {
let hours = new Date(data).getHours()
let minutes = new Date(data).getMinutes()
let seconds = new Date(data).getSeconds()
return hours + ':' + minutes + ':' + seconds
}
const toPageTop = () => {
window.scrollTo({
top: 0
})
fetchTalk()
fetchComments()
}
onMounted(fetchData)
return {
...toRefs(reactiveData),
handlePreview,

13
aurora-vue/aurora-blog/src/views/TalkList.vue
Unescape View File

@ -84,6 +84,9 @@ export default defineComponent({
images: [] as any,
talks: '' as any
})
onMounted(() => {
fetchTalks()
})
const handlePreview = (index: any) => {
v3ImgPreviewFn({ images: reactiveData.images, index: reactiveData.images.indexOf(index) })
}
@ -102,26 +105,22 @@ export default defineComponent({
})
})
}
const fetchData = () => {
fetchTalks()
}
onMounted(fetchData)
const formatTime = (data: any): string => {
let hours = new Date(data).getHours()
let minutes = new Date(data).getMinutes()
let seconds = new Date(data).getSeconds()
return hours + ':' + minutes + ':' + seconds
}
const backToPageTop = () => {
const toPageTop = () => {
window.scrollTo({
top: 0
})
}
const pageChangeHanlder = (current: number) => {
reactiveData.talks = ''
backToPageTop()
toPageTop()
pagination.current = current
fetchData()
fetchTalks()
}
const toTalk = (id: any) => {
router.push({ path: '/talks/' + id })

Write Preview
Loading…
Cancel
Save