Cxx0822/blog-admin-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:初始化工程

Browse Source
This commit is contained in:
Cxx0822
2025-09-21 22:48:33 +08:00
commit b0935a05fd
95 changed files with 12906 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc.cjs Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
extends: [
'./node_modules/vue3-eslint'
]
}

24
.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

5
README.md Normal file
View File

@@ -0,0 +1,5 @@
# Vue 3 + TypeScript + Vite
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

13
index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cxx0822の博客管理系统</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

44
package.json Normal file
View File

@@ -0,0 +1,44 @@
{
"name": "blog-admin-ui",
"private": true,
"version": "0.0.1",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.7.2",
"@popperjs/core": "^2.11.8",
"@vueuse/core": "^13.1.0",
"animate.css": "^4.1.1",
"dayjs": "^1.11.13",
"element-plus": "^2.9.7",
"file-icons-vue": "^1.3.4",
"font-awesome": "^4.7.0",
"md-editor-v3": "^4.21.3",
"pinia": "^2.3.1",
"ua-parser-js": "^2.0.3",
"vue": "3.5.12",
"vue3-common": "git+https://gitee.com/Cxx0822/vue3-common",
"vue3-emoji-picker": "^1.1.8",
"vue3-eslint": "git+https://gitee.com/Cxx0822/vue3-eslint"
},
"devDependencies": {
"@types/node": "^18.19.86",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"@vitejs/plugin-vue": "5.2.1",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.2.0",
"eslint-plugin-vue": "^8.7.1",
"sass": "^1.86.3",
"typescript": "^5.8.3",
"vite": "~5.2.0",
"vite-plugin-svg-icons": "^2.0.1",
"vue-tsc": "^1.8.27"
}
}

6111
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

1
public/vite.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

10
src/App.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<router-view />
</template>
<script setup lang="ts">
</script>
<style lang="scss">
@use '@/styles/index.module.scss';
</style>

107
src/apis/blog.ts Normal file
View File

@@ -0,0 +1,107 @@
import { cloudService } from './index'
import { IBlog, IBlogCategory, IBlogComment, IBlogStats, IBlogVisit, INewBlog, IQueryBlog } from '@/types/blog'
import qs from 'qs'
import { IPageRecord } from '@/types'
export const queryBlogApi = (currentPage: number, pageSize: number): Promise<any> =>
cloudService({
url: '/blog-api/blog/page',
method: 'get',
params: { currentPage, pageSize }
})
export const queryBlogByConditionApi = (query: IQueryBlog): Promise<IBlog[]> =>
cloudService({
url: '/blog-api/blog/condition',
method: 'get',
params: query,
paramsSerializer: (params) => {
return qs.stringify(params, { arrayFormat: 'indices' })
}
})
export const queryBlogByIdApi = (id: number): Promise<IBlog> =>
cloudService({
url: `/blog-api/blog/content/${id}`,
method: 'get'
})
export const queryBlogCategoryApi = (): Promise<IBlogCategory[]> =>
cloudService({
url: '/blog-api/blog/category',
method: 'get'
})
export const queryBlogStatsApi = (): Promise<IBlogStats> =>
cloudService({
url: '/blog-api/blog/stats',
method: 'get'
})
export const queryLatestBlogApi = (): Promise<IBlog[]> =>
cloudService({
url: '/blog-api/blog/latest',
method: 'get'
})
export const queryBlogCommentApi = (blogId: number): Promise<IBlogComment[]> =>
cloudService({
url: `/blog-api/blog/comment/${blogId}`,
method: 'get'
})
export const addBlogCommentApi = (blogComment: IBlogComment): Promise<boolean> =>
cloudService({
url: '/blog-api/blog/comment',
method: 'put',
data: blogComment
})
export const queryAdminBlogApi = (currentPage: number,
pageSize: number): Promise<IPageRecord<IBlog>> =>
cloudService({
url: '/admin-service/blog-manage/page',
method: 'get',
params: { currentPage, pageSize }
})
export const queryAdminBlogByIdApi = (id: number): Promise<IBlog> =>
cloudService({
url: `/admin-service/blog-manage/content/${id}`,
method: 'get'
})
export const queryAdminBlogCategoryApi = (): Promise<IBlogCategory[]> =>
cloudService({
url: '/admin-service/blog-manage/category',
method: 'get'
})
export const addBlogApi = (blog: INewBlog): Promise<boolean> =>
cloudService({
url: '/admin-service/blog-manage',
method: 'post',
data: blog
})
export const updateBlogApi = (id: number, blog: INewBlog): Promise<boolean> =>
cloudService({
url: `/admin-service/blog-manage/${id}`,
method: 'put',
data: blog
})
export const deleteBlogApi = (id: number): Promise<boolean> =>
cloudService({
url: `/admin-service/blog-manage/${id}`,
method: 'DELETE'
})
export const queryBlogVisitApi = (currentPage: number,
pageSize: number): Promise<IPageRecord<IBlogVisit>> =>
cloudService({
url: '/admin-service/blog-manage/visit',
method: 'get',
params: { currentPage, pageSize }
})

3
src/apis/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import createService from 'vue3-common/utils/axiosUtil'
export const cloudService = createService()

16
src/apis/session.ts Normal file
View File

@@ -0,0 +1,16 @@
import { cloudService } from './index'
import { ISession } from '@/types/auth'
export const loginHomeApi = (name: string, password: string): Promise<ISession> =>
cloudService({
url: '/home-service/session',
method: 'post',
params: { name, password }
})
export const loginAdminApi = (name: string, password: string): Promise<ISession> =>
cloudService({
url: '/admin-service/session',
method: 'post',
params: { name, password }
})

15
src/apis/user.ts Normal file
View File

@@ -0,0 +1,15 @@
import { cloudService } from './index'
import { IUser } from '@/types/auth.ts'
export const queryUserApi = (id: number): Promise<IUser> =>
cloudService({
url: `/home-service/user/${id}`,
method: 'get'
})
export const updateUserApi = (id: number, user: IUser): Promise<boolean> =>
cloudService({
url: `/home-service/user/${id}`,
method: 'put',
data: user
})

BIN
src/assets/font/custom.ttf Normal file
View File

Binary file not shown.

1
src/assets/vue.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 496 B

62
src/components/Archive/BlogArchive.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<div class="blog-archive blog-section card-item">
<h4 class="module-title">文章归档</h4>
<el-date-picker
v-model="currentYear"
type="year" placeholder="请选择年份"
style="width: 100px"
@change="changeDateEvent"
/>
<span class="total">共计{{ blogStore.blogList.length }}篇文章</span>
<el-timeline class="time-line">
<el-timeline-item v-for="(value, index) in blogStore.blogList" :key="index">
<div class="item">
<span class="date">{{ value.createTime }}</span>
<span class="title" @click="viewBlogClick(index)">{{ value.title }}</span>
</div>
</el-timeline-item>
</el-timeline>
</div>
</template>
<script setup lang="ts">
import { useBlogStore } from '@/store/blog.ts'
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
const blogStore = useBlogStore()
const router = useRouter()
const currentYear = ref(new Date())
onMounted(() => {
blogStore.queryBlogByCondition({
year: (new Date()).getFullYear()
})
})
/**
* 选择年份事件
* @param value 年份
*/
const changeDateEvent = async (value: Date) => {
await blogStore.queryBlogByCondition({
year: value.getFullYear()
})
}
/**
* 点击查看博客按钮
* @param index 索引
*/
const viewBlogClick = async (index: number) => {
const blogId = blogStore.blogList[index].id
await router.push({ name: 'DetailId', params: { id: blogId } })
}
</script>
<style scoped lang="scss">
@use "@/styles/blog/blog.archive.module.scss";
</style>

40
src/components/Category/BlogCategory.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<div class="blog-category blog-section card-item">
<h4 class="module-title">文章分类</h4>
<span class="total">目前共计{{ blogStore.blogCategoryList.length }}个分类</span>
<div class="category-list">
<div v-for="(item, index) in blogStore.blogCategoryList"
:key="index" class="item" @click="viewBlogCategoryClick(item.name)">
<span class="label">{{ item.name }}</span>
<span class="value">{{ `(${item.count})` }}</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { useBlogStore } from '@/store/blog.ts'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'
const blogStore = useBlogStore()
const router = useRouter()
onMounted(() => {
blogStore.queryBlogCategory()
})
/**
* 点击查看博客分类信息
* @param name 类别名称
*/
const viewBlogCategoryClick = async (name: string) => {
await router.push({ name: 'CategoryName', params: { name } })
}
</script>
<style scoped lang="scss">
@use "@/styles/blog/blog.category.module.scss";
</style>

41
src/components/Category/BlogCategoryDetail.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div class="blog-category-detail blog-section card-item">
<span class="name">{{ route.params?.name }}</span>
<div class="category-detail-list">
<div v-for="(item, index) in blogStore.blogList"
:key="index" class="item" @click="viewBlogClick(index)">
<span class="number">{{ index+1 }}</span>
<span class="date">{{ item?.createTime }}</span>
<span class="title">{{ item.title }}</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { useBlogStore } from '@/store/blog.ts'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'
const blogStore = useBlogStore()
const router = useRouter()
const route = useRoute()
onMounted(async () => {
const categoryName = route.params.name as string
await blogStore.queryBlogByCondition({
category: categoryName
})
})
const viewBlogClick = async (index: number) => {
const blogId = blogStore.blogList[index].id
await router.push({ name: 'DetailId', params: { id: blogId } })
}
</script>
<style scoped lang="scss">
@use "@/styles/blog/blog.category.detail.module.scss";
</style>

30
src/components/Comment/BlogComment.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<div class="blog-comment card-item">
<div class="comment-total">
<span>共 {{ blogStore.blogNestedCommentList.length }} 条评论</span>
</div>
<div class="comment-list">
<blog-comment-item v-for="(item, index) in blogStore.blogNestedCommentList" :key="index"
:comment="item.comment" :replyList="item.replies"/>
</div>
</div>
</template>
<script setup lang="ts">
import BlogCommentItem from '@/components/Comment/BlogCommentItem.vue'
import { useBlogStore } from '@/store/blog'
const blogStore = useBlogStore()
</script>
<style lang="scss">
.blog-comment {
width: 100%;
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
</style>

121
src/components/Comment/BlogCommentEdit.vue Normal file
View File

@@ -0,0 +1,121 @@
<template>
<div class="blog-comment-edit card-item">
<div class="comment-title">
<el-input v-model="blogComment.name"
:maxlength="10" show-word-limit
placeholder="请输入昵称"/>
<el-input v-model="blogComment.website"
:maxlength="50" show-word-limit
placeholder="请输入个人博客网站"/>
</div>
<el-input v-model="blogComment.content"
placeholder="有什么想和我说的呢" :maxlength="500"
:rows="7" show-word-limit type="textarea"
/>
<div class="comment-button">
<el-popover ref="emojiPopoverRef" placement="top" :width="300" trigger="hover">
<template #default>
<div class="emoji-panel">
<EmojiPicker :native="true" @select="onSelectEmoji" />
</div>
</template>
<template #reference>
<el-button circle>
<i class="fa-regular fa-face-smile"></i>
</el-button>
</template>
</el-popover>
<el-button type="primary"
:disabled="blogComment.content.length === 0"
@click="sendCommentClick"
class="send-button">发送</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import EmojiPicker from 'vue3-emoji-picker'
import 'vue3-emoji-picker/css'
import { defineProps, ref, onMounted } from 'vue'
import { useBlogStore } from '@/store/blog.ts'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
import { IBlogComment } from '@/types/blog.ts'
const blogStore = useBlogStore()
const emojiPopoverRef = ref()
const props = defineProps({
parentId: {
required: true,
type: Number,
default: 0
}
})
const blogComment = ref<IBlogComment>({
id: 0,
blogId: 0,
name: '',
website: '',
content: '',
ipAddress: '',
userAgent: '',
parentId: 0,
isApproved: true,
createTime: ''
})
onMounted(() => {
blogComment.value = deepCopyObject(blogStore.getEmptyBlogComment())
})
const onSelectEmoji = (emoji) => {
if (blogComment.value.content.length <= 498) {
blogComment.value.content += emoji.i
}
emojiPopoverRef.value.hide()
}
const sendCommentClick = async () => {
blogComment.value.parentId = props.parentId
blogComment.value.blogId = blogStore.currentBlogId
if (!blogComment.value.name) {
blogComment.value.name = 'Anonymous'
}
await blogStore.addBlogComment(blogComment.value)
blogComment.value = deepCopyObject(blogStore.getEmptyBlogComment())
blogStore.isShowBlogCommentEdit = false
}
</script>
<style lang="scss">
.blog-comment-edit {
width: 100%;
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
.comment-title {
display: flex;
justify-content: space-between;
gap: 10px;
}
.comment-button {
width: 100%;
display: flex;
.send-button {
margin-left: auto;
}
}
}
</style>

127
src/components/Comment/BlogCommentItem.vue Normal file
View File

@@ -0,0 +1,127 @@
<template>
<div class="blog-comment-card">
<el-avatar :src="`https://api.dicebear.com/6.x/adventurer/svg?seed=${props.comment.name}`"
:size="50" alt="未加载"/>
<div class="blog-comment-content">
<div class="basic-info">
<span>{{ props.comment.name }}</span>
<span class="content">{{ getBrowser(props.comment.userAgent) }}</span>
<span class="content">{{ getOsInfo(props.comment.userAgent) }}</span>
</div>
<div class="sub-info">
<span class="content">{{ props.comment.createTime }}</span>
<el-button v-if="!blogComment.isShowEdit"
type="primary" text @click="replyClick">回复</el-button>
<el-button v-else type="primary"
text @click="cancelClick">取消</el-button>
</div>
<p>{{ props.comment.content }}</p>
<blog-comment-edit v-if="blogComment.isShowEdit"
:parent-id="props.comment.id"/>
<div class="reply-list">
<div class="blog-comment-card" v-for="(item, index) in props.replyList" :key="index">
<el-avatar :src="`https://api.dicebear.com/6.x/adventurer/svg?seed=${item.name}`"
:size="50" alt="未加载"/>
<div class="blog-comment-content">
<div class="basic-info">
<span>{{ item.name }}</span>
<span class="content">{{ getBrowser(props.comment.userAgent) }}</span>
<span class="content">{{ getOsInfo(props.comment.userAgent) }}</span>
</div>
<div class="sub-info">
<span class="content">{{ item.createTime }}</span>
</div>
<p>{{ item.content }}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import BlogCommentEdit from '@/components/Comment/BlogCommentEdit.vue'
import 'vue3-emoji-picker/css'
import { defineProps, PropType, reactive } from 'vue'
import { IBlogComment } from '@/types/blog'
import { useBlogStore } from '@/store/blog.ts'
import { UAParser } from 'ua-parser-js'
const blogStore = useBlogStore()
const props = defineProps({
comment: {
required: true,
type: Object as PropType<IBlogComment>
},
replyList: {
required: true,
type: Object as PropType<IBlogComment[]>
}
})
const blogComment = reactive({
isShowEdit: false
})
const replyClick = () => {
blogStore.currentBlogComment = blogStore.getEmptyBlogComment()
blogComment.isShowEdit = true
}
const cancelClick = () => {
blogComment.isShowEdit = false
}
const getOsInfo = (userAgent: string) => {
const uaParse = new UAParser(userAgent)
return `${uaParse.getOS().name} ${uaParse.getOS().version}`
}
const getBrowser = (userAgent: string) => {
const uaParse = new UAParser(userAgent)
return `${uaParse.getBrowser().name} ${uaParse.getBrowser().version}`
}
</script>
<style lang="scss">
.blog-comment-card {
width: 100%;
padding: 10px;
display: grid;
grid-template-columns: 60px 1fr;
gap: 5px;
.blog-comment-content {
display: flex;
flex-direction: column;
gap: 5px;
.basic-info {
display: flex;
align-items: center;
gap: 10px;
font-size: small;
}
.sub-info {
display: flex;
justify-content: space-between;
align-items: center;
}
.content {
font-size: small;
color: #666666;
}
}
}
</style>

67
src/components/Content/BlogDetail.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<div class="blog-detail blog-section card-item" id="blog-section">
<div class="blog-title">
<span class="title">{{ blogStore.currentBlog.title }}</span>
<blog-label :basic-blog="getBasicBlog(blogStore.currentBlog)"/>
</div>
<div class="blog-md card-item">
<MdPreview editorId="blog-id"
v-model="blogStore.currentBlog.content"
:theme="appStore.isDark ? 'dark' : 'light'"/>
</div>
<div class="blog-copyright">
<span>
<strong>本文作者: </strong> Cxx
</span>
<span>
<strong>本文链接: </strong>
<a href="https://www.microsoft.com/">{{ currentUrl.href }}</a>
</span>
<span>
<strong>版权声明: </strong>
本博客所有文章除特别声明外，均采用
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">©BY-NC-SA</a>
许可协议。转载请注明出处！
</span>
</div>
<div class="blog-ending">
<span>-------------本文结束♥感谢您的阅读♥给个五星好评吧~~-------------</span>
</div>
<blog-comment-edit :parent-id="0"/>
<blog-comment />
</div>
</template>
<script setup lang="ts">
import BlogLabel from '@/components/Content/BlogLabel.vue'
import BlogCommentEdit from '@/components/Comment/BlogCommentEdit.vue'
import BlogComment from '@/components/Comment/BlogComment.vue'
import { MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { useBlogStore } from '@/store/blog.ts'
import { useAppStore } from '@/store/app'
import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'
const blogStore = useBlogStore()
const appStore = useAppStore()
const route = useRoute()
const currentUrl = new URL(window.location.href)
onMounted(async () => {
const blogId = route.params.id as number
blogStore.currentBlogId = blogId
await blogStore.queryBlogById(blogId)
})
</script>
<style scoped lang="scss">
@use "@/styles/blog/blog.detail.module.scss";
</style>

92
src/components/Content/BlogLabel.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<div class="label-list">
<div class="container">
<div class="top-value item" v-if="props.basicBlog?.topValue > 1">
<i class="fa-solid fa-thumbtack"></i>
</div>
<div v-if="props.basicBlog?.topValue > 1" class="item">|</div>
<div class="great item" v-if="props.basicBlog?.isGreat">
<i class="fa-regular fa-newspaper"></i>
</div>
<div v-if="props.basicBlog?.isGreat" class="item">|</div>
<div class="item">
<i class="fa-regular fa-calendar"></i>
<span class="date">{{ formatDate(props.basicBlog.createTime) }}</span>
</div>
<div class="item">|</div>
<div class="item">
<i class="fa-regular fa-calendar-check"></i>
<span class="date">{{ formatDate(props.basicBlog.createTime) }}</span>
</div>
<div class="item">|</div>
<div class="item">
<i class="fa-regular fa-folder"></i>
<span class="category" @click="viewBlogCategoryClick">
{{ props.basicBlog.category }}
</span>
</div>
<div class="item">|</div>
<div class="item">
<i class="fa-solid fa-eye"></i>
<span>{{ props.basicBlog.visitCount }} 次</span>
</div>
</div>
<div class="container">
<div class="item">
<i class="fa-regular fa-file-word"></i>
<span>{{ props.basicBlog.wordCount }} 字</span>
</div>
<div class="item">|</div>
<div class="item">
<i class="fa-regular fa-clock"></i>
<span>{{ props.basicBlog.readDuration.toFixed(0) }} 分钟</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { defineProps, PropType } from 'vue'
import { IBasicBlog } from '@/types/blog.ts'
import { useBlogStore } from '@/store/blog.ts'
import { useRouter } from 'vue-router'
import { formatDate } from 'vue3-common/utils/dateUtil'
const blogStore = useBlogStore()
const router = useRouter()
const props = defineProps({
basicBlog: {
required: true,
type: Object as PropType<IBasicBlog>
}
})
/**
* 点击查看博客分类按钮
*/
const viewBlogCategoryClick = async () => {
const category = props.basicBlog?.category as string
await blogStore.queryBlogByCondition({
category
})
await router.push({ name: 'CategoriesBlog', params: { name: category } })
}
</script>
<style scoped lang="scss">
@use "@/styles/blog/blog.label.module.scss";
</style>

66
src/components/Content/BlogOverview.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<div class="blog-content-list blog-section card-item">
<div v-if="blogStore.blogList.length === 0"
class="blog-content blog-content-empty" >
</div>
<div class="blog-content blog-content-summary"
v-for="(item, index) in blogStore.blogList" :key="index">
<span class="title">{{ item.title }}</span>
<blog-label :basic-blog="getBasicBlog(item)"/>
<p class="content">
{{ item.summary }}
</p>
<el-button type="primary" @click="readBlogClick(index)">阅读全文 »</el-button>
<hr/>
</div>
<el-pagination
v-model:current-page="blogStore.pageInfo.currentPage"
:page-size="blogStore.pageInfo.pageSize"
:total="blogStore.pageInfo.totalSize"
layout="total, prev, pager, next"
@current-change="changePageClick"
/>
</div>
</template>
<script setup lang="ts">
import BlogLabel from '@/components/Content/BlogLabel.vue'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'
import { useBlogStore } from '@/store/blog.ts'
import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
const router = useRouter()
const blogStore = useBlogStore()
onMounted(async () => {
await blogStore.queryBlog()
})
/**
* 点击阅读博客按钮
* @param index 索引
*/
const readBlogClick = async (index: number) => {
const blogId = blogStore.blogList[index].id
await router.push({ name: 'DetailId', params: { id: blogId } })
}
/**
* 点击切换博客页数按钮
* @param page 页码
*/
const changePageClick = async (page: number) => {
blogStore.pageInfo.currentPage = page
await blogStore.queryBlog()
}
</script>
<style lang="scss">
@use "@/styles/blog/blog.overview.module.scss";
</style>

147
src/components/Login/CommonLogin.vue Normal file
View File

@@ -0,0 +1,147 @@
<template>
<div class="common-login">
<el-form ref="loginFormRef" :model="authStore.loginForm"
:rules="rules" class="login-form"
autocomplete="on" label-position="left"
@submit.native.prevent>
<!-- 账户名表单选项 -->
<el-form-item prop="username" class="form-item">
<el-input
v-model="authStore.loginForm.username"
placeholder="请输入账号" clearable
>
<template #prefix>
<i class="fa-solid fa-user"></i>
</template>
</el-input>
</el-form-item>
<!-- password表单选项 -->
<el-form-item prop="password" class="form-item">
<el-input
v-model="authStore.loginForm.password"
placeholder="请输入密码" type="password"
show-password clearable
@keyup.enter.native="handleLogin()"
>
<template #prefix>
<i class="fa-solid fa-lock"></i>
</template>
</el-input>
</el-form-item>
<el-form-item>
<login-auth />
</el-form-item>
<el-form-item class="login-option">
<el-checkbox v-model="authStore.loginForm.isRemember">记住密码</el-checkbox>
<el-link type="primary">忘记密码？</el-link>
</el-form-item>
</el-form>
<el-button type="primary" style="width: 100%;"
:disabled="!authStore.isVerified"
:loading="authStore.loginLoading"
@click.prevent="handleLogin('common')">登录
</el-button>
<div />
<el-button type="primary" style="width: 100%;"
:disabled="!authStore.isVerified"
:loading="authStore.loginAdminLoading"
@click.prevent="handleLogin('admin')">登录管理系统
</el-button>
<div class="login-type">
<el-button @click="authStore.changeLoginType('phone')">手机号登录</el-button>
<el-button>扫码登录</el-button>
</div>
<div class="login-others-type">
<el-divider content-position="center">其他登录方式</el-divider>
<div class="type-list">
<i class="fa-brands fa-weixin" style="color: #3CB034"></i>
<i class="fa-brands fa-qq" style="color: #29A4D9"></i>
<i class="fa-solid fa-envelope" style="color: #4971B8"
@click="authStore.changeLoginType('email')"></i>
<i class="fa-brands fa-github" style="color: #555555"></i>
</div>
</div>
<div class="login-register">
<span>还没有账户？</span><el-link type="primary">创建账户</el-link>
</div>
</div>
</template>
<script setup lang="ts">
import LoginAuth from '@/components/Login/LoginAuth.vue'
import { useAuthStore } from '@/store/auth'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { ElMessage, FormRules } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import { loginRules } from '@/utils/element/elRules'
import { getLocalStorage, setLocalStorage } from 'vue3-common/utils/storageUtil'
import { ILoginType } from '@/types/auth'
import { isMobile } from 'vue3-common/utils/layoutUtil'
const rules = reactive<FormRules>(loginRules)
const authStore = useAuthStore()
const router = useRouter()
const userStore = useUserStore()
const loginFormRef = ref()
onMounted(() => {
const storageLoginForm = getLocalStorage('loginForm')
if (storageLoginForm) {
authStore.loginForm = JSON.parse(storageLoginForm)
}
})
const handleLogin = async (type: ILoginType) => {
loginFormRef.value.validate(async (valid: any) => {
if (valid) {
if (type === 'common' && !isMobile()) {
ElMessage.error('目前只支持移动端')
return
}
if (type === 'admin' && isMobile()) {
ElMessage.error('目前只支持PC端')
return
}
if (type === 'common') {
authStore.loginLoading = true
} else {
authStore.loginAdminLoading = true
}
try {
await authStore.handleLogin(type)
userStore.handleSession(authStore.homeSession)
// 2. 存储账户密码到localStorage中
if (authStore.loginForm.isRemember) {
setLocalStorage('loginForm', JSON.stringify(authStore.loginForm))
}
if (type === 'common') {
await router.push('/mobile-home')
} else {
await router.push('/admin')
}
} finally {
authStore.loginLoading = false
authStore.loginAdminLoading = false
}
} else {
ElMessage.error('请输入正确的信息')
return false
}
})
}
</script>

78
src/components/Login/EmailLogin.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<div class="email-login">
<el-form ref="loginFormRef" :model="authStore.emailLoginForm"
:rules="rules" class="login-form"
autocomplete="on" label-position="left"
@submit.native.prevent>
<el-form-item prop="email" class="form-item">
<el-input
v-model="authStore.emailLoginForm.email"
placeholder="请输入邮箱地址" clearable
>
<template #prefix>
<i class="fa-solid fa-envelope"></i>
</template>
</el-input>
</el-form-item>
<el-form-item prop="code" class="code-item">
<el-input
v-model="authStore.emailLoginForm.code"
placeholder="请输入验证码" type="password"
show-password clearable
>
<template #prefix>
<i class="fa-solid fa-shield-halved"></i>
</template>
</el-input>
<el-button type="primary"
:disabled="authStore.isGettingCode"
@click="authStore.getAuthCode('email')">
{{ authStore.isGettingCode ? authStore.getCodeCountdown + 's' : '获取验证码' }}
</el-button>
</el-form-item>
</el-form>
<el-button type="primary" style="width: 100%;"
:loading="authStore.loginLoading"
@click.prevent="handleLogin()">登录
</el-button>
<el-button style="width: 100%;margin-left: 0;"
@click="authStore.changeLoginType('common')">取消
</el-button>
</div>
</template>
<script setup lang="ts">
import { useAuthStore } from '@/store/auth'
import { useRouter } from 'vue-router'
import { ElMessage, FormRules } from 'element-plus'
import { reactive, ref } from 'vue'
import { loginRules } from '@/utils/element/elRules'
const rules = reactive<FormRules>(loginRules)
const authStore = useAuthStore()
const router = useRouter()
const loginFormRef = ref()
const handleLogin = async () => {
loginFormRef.value.validate(async (valid: any) => {
if (valid) {
authStore.loginLoading = true
try {
await authStore.handleLogin('email')
await router.push('/home')
} finally {
authStore.loginLoading = false
}
} else {
ElMessage.error('请输入正确的信息')
return false
}
})
}
</script>

182
src/components/Login/LoginAuth.vue Normal file
View File

@@ -0,0 +1,182 @@
<template>
<div class="login-auth">
<div class="slider-container"
@mousedown="startDrag" @mousemove="handleDrag"
@mouseup="endDrag" @mouseleave="endDrag"
@touchstart="startDrag" @touchmove="handleDrag" @touchend="endDrag">
<div ref="draggableRef" class="draggable"
:style="{ left: `${loginAuth.dragLeft}px` }">
<i v-if="authStore.isVerified" class="fas fa-check"></i>
<i v-else class="fas fa-arrow-right"></i>
</div>
<div :style="{ width: loginAuth.progressWidth + '%' }" class="slider-progress"></div>
<div class="slider-message" :style="{color: authStore.isVerified ? '#FFFFFF' : '#696969'}">
<span v-if="authStore.isVerified">验证成功！</span>
<span v-else-if="loginAuth.isDragging">拖动中...</span>
<span v-else>向右拖动滑块 完成验证</span>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { useAuthStore } from '@/store/auth'
const draggableRef = ref(null)
const authStore = useAuthStore()
const loginAuth = reactive({
isDragging: false,
initialX: 0,
offsetX: 0,
dragLeft: 0,
progressWidth: 0,
targetWidth: 100,
// 记录拖动的开始时间
startTime: 0,
// 记录拖动过程中的位置
positions: [],
// 记录拖动过程中的时间戳
timestamps: []
})
const startDrag = (event) => {
// 验证成功后禁止拖动
if (authStore.isVerified) return
loginAuth.isDragging = true
const touch = event.changedTouches ? event.changedTouches[0] : event
loginAuth.initialX = touch.clientX
loginAuth.offsetX = draggableRef.value?.offsetLeft
loginAuth.startTime = Date.now()
loginAuth.positions = []
loginAuth.timestamps = []
loginAuth.positions.push(loginAuth.initialX)
loginAuth.timestamps.push(loginAuth.startTime)
}
const handleDrag = (event) => {
if (loginAuth.isDragging && !authStore.isVerified) {
const touch = event.changedTouches ? event.changedTouches[0] : event
const dx = touch.clientX - loginAuth.initialX
const newLeft = loginAuth.offsetX + dx
const sliderWidth = draggableRef.value?.parentNode.offsetWidth
const handleWidth = draggableRef.value?.offsetWidth
if (newLeft < 0) {
loginAuth.dragLeft = 0
loginAuth.progressWidth = 0
} else if (newLeft > sliderWidth - handleWidth) {
loginAuth.dragLeft = sliderWidth - handleWidth
loginAuth.progressWidth = loginAuth.targetWidth
} else {
loginAuth.dragLeft = newLeft
loginAuth.progressWidth = (newLeft / (sliderWidth - handleWidth)) * loginAuth.targetWidth
}
loginAuth.positions.push(touch.clientX)
loginAuth.timestamps.push(Date.now())
}
}
const endDrag = () => {
loginAuth.isDragging = false
if (loginAuth.progressWidth === loginAuth.targetWidth && !checkIsHuman()) {
authStore.isVerified = true
} else {
loginAuth.dragLeft = 0
loginAuth.progressWidth = 0
}
}
const checkIsHuman = () => {
const endTime = Date.now()
const dragDuration = endTime - loginAuth.startTime
const speedChanges = []
for (let i = 1; i < loginAuth.positions.length; i++) {
const distance = loginAuth.positions[i] - loginAuth.positions[i - 1]
const time = loginAuth.timestamps[i] - loginAuth.timestamps[i - 1]
const speed = time > 0 ? distance / time : 0
speedChanges.push(speed)
}
// 计算速度变化的标准差
const meanSpeed = speedChanges.reduce((sum, speed) => sum + speed, 0) / speedChanges.length
const variance = speedChanges.reduce((sum, speed) => sum + Math.pow(speed - meanSpeed, 2), 0) / speedChanges.length
const stdDevSpeed = Math.sqrt(variance)
// 检查是否有停顿
let hasPause = false
for (let i = 1; i < loginAuth.timestamps.length; i++) {
if (loginAuth.timestamps[i] - loginAuth.timestamps[i - 1] > 200) {
hasPause = true
break
}
}
// 综合判断是否为机器操作
return dragDuration >= 100 && stdDevSpeed >= 0.1 && hasPause
}
</script>
<style lang="scss">
.login-auth {
width: 100%;
.slider-container {
position: relative;
height: 32px;
background-color: #E7E9E8;
border: 1px solid #E7E9E8;
border-radius: 5px;
overflow: hidden;
.draggable {
position: absolute;
top: 0;
left: 0;
width: 35px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--el-color-primary);
color: #FFFFFF;
cursor: pointer;
z-index: 3;
border-left: 1px solid #E7E9E8;
border-radius: 3px;
}
.slider-progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: var(--el-color-primary);
z-index: 1;
}
.slider-message {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
user-select: none;
span {
transition: opacity 0.3s ease;
opacity: 1;
}
}
}
}
</style>

78
src/components/Login/PhoneLogin.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<div class="phone-login">
<el-form ref="loginFormRef" :model="authStore.phoneLoginForm"
:rules="rules" class="login-form"
autocomplete="on" label-position="left"
@submit.native.prevent>
<el-form-item prop="phoneNumber" class="form-item">
<el-input
v-model="authStore.phoneLoginForm.phoneNumber"
placeholder="请输入手机号" clearable
>
<template #prefix>
<i class="fa-solid fa-mobile-screen"></i>
</template>
</el-input>
</el-form-item>
<el-form-item prop="code" class="code-item">
<el-input
v-model="authStore.phoneLoginForm.code"
placeholder="请输入验证码" type="password"
show-password clearable
>
<template #prefix>
<i class="fa-solid fa-shield-halved"></i>
</template>
</el-input>
<el-button type="primary"
:disabled="authStore.isGettingCode"
@click="authStore.getAuthCode('phone')">
{{ authStore.isGettingCode ? authStore.getCodeCountdown + 's' : '获取验证码' }}
</el-button>
</el-form-item>
</el-form>
<el-button type="primary" style="width: 100%;"
:loading="authStore.loginLoading"
@click.prevent="handleLogin()">登录
</el-button>
<el-button style="width: 100%;margin-left: 0;"
@click="authStore.changeLoginType('common')">取消
</el-button>
</div>
</template>
<script setup lang="ts">
import { useAuthStore } from '@/store/auth'
import { useRouter } from 'vue-router'
import { ElMessage, FormRules } from 'element-plus'
import { reactive, ref } from 'vue'
import { loginRules } from '@/utils/element/elRules'
const rules = reactive<FormRules>(loginRules)
const authStore = useAuthStore()
const router = useRouter()
const loginFormRef = ref()
const handleLogin = async () => {
loginFormRef.value.validate(async (valid: any) => {
if (valid) {
authStore.loginLoading = true
try {
await authStore.handleLogin('phone')
await router.push('/home')
} finally {
authStore.loginLoading = false
}
} else {
ElMessage.error('请输入正确的信息')
return false
}
})
}
</script>

95
src/layout/components/NavBar/index.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<section class="layout-navbar">
<div class="left-container">
<!-- 控制菜单栏的显示 -->
<hamburger
id="hamburger-container"
:is-active="sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar" />
</div>
<h3 class="title">Sweet Hut</h3>
<!-- 右上角菜单栏 -->
<div class="right-container">
<!-- <div class="note-wrapper">-->
<!-- <el-tooltip effect="dark" content="警告信息" placement="bottom">-->
<!-- <el-badge is-dot class="item">-->
<!-- <svg-icon icon-class="danger" />-->
<!-- </el-badge>-->
<!-- </el-tooltip>-->
<!-- <el-tooltip effect="dark" content="待办事项" placement="bottom">-->
<!-- <el-badge is-dot class="item">-->
<!-- <svg-icon icon-class="todo" @click="viewTodoList"/>-->
<!-- </el-badge>-->
<!-- </el-tooltip>-->
<!-- </div>-->
<!-- 下拉框组件 -->
<el-dropdown>
<div class="avatar-wrapper">
<svg-icon name="admin-user" class="user-avatar" style="color: #0d9488;"/>
<span class="username">管理员</span>
<el-icon><caret-bottom /></el-icon>
</div>
<!-- 下拉框菜单 -->
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="updatePasswordClick">
<span style="display:block;">修改密码</span>
</el-dropdown-item>
<el-dropdown-item @click="logoutClick">
<span style="display:block;">退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</section>
</template>
<script setup lang="ts">
import { Hamburger, SvgIcon } from 'vue3-common'
import 'vue3-common/styles/Hamburger.css'
import { CaretBottom } from '@element-plus/icons-vue'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/store/app'
const router = useRouter()
const appStore = useAppStore()
const sidebar = computed(() => appStore.sidebar)
/**
* 侧边栏控制
*/
const toggleSideBar = () => {
appStore.toggleSideBar()
}
const viewTodoList = () => {
console.log('待办事项')
}
/**
* 修改密码
*/
const updatePasswordClick = () => {
router.push('/profile')
}
/**
* 退出登录
*/
const logoutClick = () => {
// userStore.removeAll()
router.push('/login')
// 刷新页面 否则会出现切换用户 丢失动态路由的现象
// location.reload()
}
</script>

39
src/layout/components/SideBar/Logo.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<div :class="{'collapse':collapse}">
<!-- 跳转到首页 -->
<transition name="sidebarLogoFade">
<!-- 根据collapse控制Logo组件，即是否显示标题 -->
<router-link v-if="collapse" key="collapse" class="logo" to="/dashboard">
<!-- <img :src="logoInfo.logo" alt="logo">-->
</router-link>
<router-link v-else key="expand" class="logo" to="/dashboard">
<img :src="getAssetsImageFile('logo/logo.png')"
alt="logo">
</router-link>
</transition>
</div>
</template>
<script setup lang="ts">
import { defineProps } from 'vue'
import { getAssetsImageFile } from '@/utils'
defineProps({
collapse: {
type: Boolean,
require: true
}
})
</script>
<style lang="scss" scoped>
// 动画样式
.sidebarLogoFade-enter-active {
transition: opacity 1.5s;
}
.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
opacity: 0;
}
</style>

23
src/layout/components/SideBar/index.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<aside class="layout-sidebar">
<logo :collapse="isCollapse" class="layout-logo"/>
<menu-list :route="useRoute()"
:routers="adminRoutes"
:collapse="isCollapse"
class="layout-menu"/>
</aside>
</template>
<script lang="ts" setup>
import Logo from './Logo.vue'
import { MenuList } from 'vue3-common'
import adminRoutes from '@/router/admin'
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useAppStore } from '@/store/app'
const appStore = useAppStore()
const isCollapse = computed(() => !appStore.sidebar.opened)
</script>

37
src/layout/index.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<section :class="classObj" class="layout-admin">
<side-bar/>
<section class="layout-main">
<nav-bar/>
<section class="app-main">
<router-view />
</section>
</section>
</section>
</template>
<script setup lang="ts">
import SideBar from './components/SideBar/index.vue'
import NavBar from './components/NavBar/index.vue'
import { computed } from 'vue'
import { useAppStore } from '@/store/app'
const app = useAppStore()
const classObj = computed(() => {
// 控制侧边栏的显示状态
return {
hideSidebar: !app.sidebar.opened,
openSidebar: app.sidebar.opened,
withoutAnimation: app.sidebar.withoutAnimation,
mobile: app.device === 'mobile'
}
})
</script>
<style lang="scss">
@use '@/styles/admin.layout.module.scss';
</style>

30
src/main.ts Normal file
View File

@@ -0,0 +1,30 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
// 引入路由
import router from './router'
// 引入element-ui组件
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/src/index.scss'
import 'element-plus/theme-chalk/dark/css-vars.css'
import 'dayjs/locale/zh-cn'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// 引入font-awesome
import 'font-awesome/css/font-awesome.min.css'
import '@fortawesome/fontawesome-free/css/all.css'
import 'animate.css'
// 创建Vue3实例
const app = createApp(App)
// 使用路由
app.use(router)
// 使用Pinia 需要ts 4.5以上
app.use(createPinia())
// 使用Element UI Plus
app.use(ElementPlus, { locale: zhCn })
// 挂载到根组件上
app.mount('#app')

155
src/pages/login/index.vue Normal file
View File

@@ -0,0 +1,155 @@
<template>
<div class="login-view">
<div class="login-container">
<div class="login-title">
<span class="title">
{{ loginInfo.title }}
</span>
</div>
<common-login v-if="authStore.loginType === 'common'"
class="animate__animated animate__bounceIn"/>
<phone-login v-if="authStore.loginType === 'phone'"
class="animate__animated animate__bounceIn"/>
<email-login v-if="authStore.loginType === 'email'"
class="animate__animated animate__bounceIn"/>
</div>
</div>
</template>
<script setup lang="ts">
import CommonLogin from '@/components/Login/CommonLogin.vue'
import PhoneLogin from '@/components/Login/PhoneLogin.vue'
import EmailLogin from '@/components/Login/EmailLogin.vue'
import { useAuthStore } from '@/store/auth'
import { onMounted, onUnmounted, reactive } from 'vue'
const authStore = useAuthStore()
const loginInfo = reactive({
title: 'Sweet Hut'
})
onMounted(() => {
authStore.isVerified = false
// authStore.resetLoginForm()
})
onUnmounted(() => {
authStore.stopCountdown()
})
</script>
<style lang="scss">
$form-item-width: 300px;
$login-height: 500px;
.login-view {
height: 100%;
display: grid;
place-items: center;
.login-container {
// height: $login-height;
padding: 30px;
border-radius: 15px;
box-shadow: 2px 2px 5px #D3D3D3, 4px 4px 10px #A9A9A9;
display: flex;
flex-direction: column;
// justify-content: center;
align-items: center;
gap: 1vh;
.login-title {
margin-bottom: 20px;
.title {
font-size: 1.5rem;
}
}
.common-login {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 1vh;
.login-form {
.el-form-item {
width: $form-item-width;
}
.login-option {
.el-form-item__content {
justify-content: space-between;
}
}
}
.login-type {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.login-others-type {
margin-top: 5vh;
width: 100%;
.el-divider {
.el-divider__text {
color: #A9A9A9;
font-size: 0.8rem;
}
}
.type-list {
display: flex;
justify-content: space-evenly;
i {
font-size: 1.2rem;
}
i:hover {
cursor: pointer;
filter: brightness(1.5);
}
}
}
.login-register {
margin-top: 10px;
display: flex;
justify-content: center;
span {
font-size: 0.9rem;
}
}
}
.phone-login, .email-login {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1vh;
.login-form {
.el-form-item {
width: $form-item-width;
}
.code-item {
.el-form-item__content {
flex-wrap: nowrap;
gap: 10px;
}
}
}
}
}
}
</style>

7
src/router/admin.ts Normal file
View File

@@ -0,0 +1,7 @@
import AdminLayout from '@/layout/index.vue'
import { adminMeta } from '@/views/meta'
import { getRoutersByModules, sortRoutesByOrder } from 'vue3-common/utils/routerUtil'
const adminRoutes = getRoutersByModules(import.meta.glob('@/views/**/*.vue'), AdminLayout, adminMeta)
export default sortRoutesByOrder(adminRoutes)

15
src/router/constant.ts Normal file
View File

@@ -0,0 +1,15 @@
import { RouteRecordRaw } from 'vue-router'
const constantRoutes: RouteRecordRaw[] = [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: () => import('@/pages/login/index.vue'),
meta: { hidden: true }
}
]
export default constantRoutes

22
src/router/index.ts Normal file
View File

@@ -0,0 +1,22 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import { setupRouteGuard } from 'vue3-common/utils/permissionUtil'
// 使用 import.meta.glob 自动导入所有 src/router 目录下的 .ts 文件
const routeModules = import.meta.glob('./*.ts', { eager: true })
// 将所有模块的默认导出（即路由配置）合并成一个路由数组
const routes: RouteRecordRaw[] = Object.values(routeModules)
.map((module: any) => module.default) // 获取每个模块的默认导出
.flat() // 扁平化数组，确保所有路由项都在一个数组中
const router = createRouter({
history: createWebHashHistory(),
scrollBehavior: () => ({ top: 0 }),
routes
})
console.log(routes)
setupRouteGuard(router)
export default router

96
src/store/app.ts Normal file
View File

@@ -0,0 +1,96 @@
import { defineStore } from 'pinia'
import { setCookie, getCookie, getLocalStorage, setLocalStorage } from 'vue3-common/utils/storageUtil'
import { useDark, useToggle } from '@vueuse/core'
export const useAppStore = defineStore('ipp', {
state: () => ({
appName: 'Sweet Hut',
sidebar: {
// !!:转为布尔值
// 保存当前菜单栏显示和隐藏的状态
opened: getCookie('sidebarStatus') ? !!getCookie('sidebarStatus') : true as boolean,
withoutAnimation: false as boolean
},
device: 'desktop' as string,
homeTitle: '',
isLoading: false,
isLogin: false,
isShowMobileBack: false,
isShowSetting: false,
themeColor: '',
isDark: false,
isWebSocket: false,
serverIp: '14.103.235.151',
version: 'v1.0.0.2025042901'
}),
actions: {
// 控制菜单栏显示和隐藏的切换
toggleSideBar() {
this.sidebar.opened = !this.sidebar.opened
this.sidebar.withoutAnimation = false
if (this.sidebar.opened) {
setCookie('sidebarStatus', String(1))
} else {
setCookie('sidebarStatus', String(0))
}
},
initApp() {
this.setThemeColor(this.getThemeColor())
this.setDartModel()
},
setDartModel() {
const dark = useDark({
selector: 'html',
attribute: 'class',
valueDark: 'dark',
valueLight: ''
})
this.isDark = dark.value
},
toggleDark(e: MouseEvent) {
const toggleDark = useToggle(useDark())
if (!document.startViewTransition) {
toggleDark()
this.isDark = !this.isDark
return
}
const transition = document.startViewTransition(() => {
toggleDark() // 实际切换主题
})
transition.ready.then(() => {
const x = e.clientX
const y = e.clientY
// 从点击点到窗口最远边缘的距离，这个距离即为圆的半径，用于确定一个圆形裁剪路径 (clip path) 的最大尺寸，以便覆盖整个视窗。
// 勾股定理：a² + b² = c²
const a = Math.max(x, window.innerWidth - x)
const b = Math.max(y, window.innerHeight - y)
const radius = Math.sqrt((a ** 2) + (b ** 2))
const clipPath = [`circle(0 at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`]
// 实现过渡的过程 circle
document.documentElement.animate(
{
clipPath: this.isDark ? clipPath.reverse() : clipPath
},
{
duration: 500,
easing: 'ease-in',
pseudoElement: this.isDark ? '::view-transition-old(root)' : '::view-transition-new(root)'
}
)
})
this.isDark = !this.isDark
},
getThemeColor(): string {
return getLocalStorage('theme-color') as string || '#009FA8'
},
setThemeColor(value: string) {
document.documentElement.style.setProperty('--el-color-primary', value)
setLocalStorage('theme-color', value)
}
}
})

128
src/store/auth.ts Normal file
View File

@@ -0,0 +1,128 @@
import { defineStore } from 'pinia'
import { ILoginType, ISession } from '@/types/auth'
import { loginAdminApi, loginHomeApi } from '@/apis/session'
import { ElMessage } from 'element-plus'
import { emailPattern, phonePattern } from '@/utils/element/elRules'
export const useAuthStore = defineStore('auth', {
state: () => ({
loginForm: {
username: '',
password: '',
isRemember: false
},
phoneLoginForm: {
phoneNumber: '',
code: ''
},
emailLoginForm: {
email: '',
code: ''
},
loginType: 'common' as ILoginType,
loginLoading: false,
loginAdminLoading: false,
isVerified: false,
isGettingCode: false,
getCodeCountdown: 60,
getCodeTimer: null as NodeJS.Timeout | null,
homeSession: {} as ISession
}),
actions: {
changeLoginType(type: ILoginType) {
this.loginType = type
if (type === 'common') {
this.stopCountdown()
}
this.resetLoginForm()
},
getAuthCode(type: ILoginType) {
switch (type) {
case 'phone':
if (phonePattern.test(this.phoneLoginForm.phoneNumber)) {
this.isGettingCode = true
ElMessage.success('验证码已发送至手机')
this.startCountdown()
} else {
ElMessage.error('请先输入正确的手机号')
}
break
case 'email':
if (emailPattern.test(this.emailLoginForm.email)) {
this.isGettingCode = true
ElMessage.success('验证码已发送至邮箱')
this.startCountdown()
} else {
ElMessage.error('请先输入正确的邮箱地址')
}
break
default:
break
}
},
startCountdown() {
this.getCodeTimer = setInterval(() => {
if (this.getCodeCountdown > 0) {
this.getCodeCountdown--
} else {
clearInterval(this.getCodeTimer as NodeJS.Timeout)
this.isGettingCode = false
this.getCodeCountdown = 60
}
}, 1000)
},
stopCountdown() {
if (this.getCodeTimer) {
clearInterval(this.getCodeTimer)
}
},
async handleLogin(type: ILoginType) {
const { username, password } = this.loginForm
const { phoneNumber, code: phoneCode } = this.phoneLoginForm
const { email, code: emailCode } = this.emailLoginForm
switch (type) {
case 'common':
this.homeSession = await loginHomeApi(username, password)
break
case 'phone':
this.homeSession = await loginHomeApi(phoneNumber, phoneCode)
break
case 'email':
this.homeSession = await loginHomeApi(email, emailCode)
break
case 'admin':
this.homeSession = await loginAdminApi(username, password)
break
default:
break
}
ElMessage.success('登录成功')
},
resetLoginForm() {
switch (this.loginType) {
case 'common':
this.loginForm = {
username: '',
password: '',
isRemember: false
}
break
case 'phone':
this.phoneLoginForm = {
phoneNumber: '',
code: ''
}
break
case 'email':
this.emailLoginForm = {
email: '',
code: ''
}
break
default:
break
}
}
}
})

168
src/store/blog.ts Normal file
View File

@@ -0,0 +1,168 @@
import { defineStore } from 'pinia'
import {
IBlog, IBlogCategory, IBlogComment,
IBlogLatest, IBlogNestedComment, IBlogStats, INewBlog, IQueryBlog
} from '@/types/blog'
import {
addBlogApi, addBlogCommentApi, deleteBlogApi, queryAdminBlogApi, queryAdminBlogByIdApi, queryAdminBlogCategoryApi,
queryBlogApi, queryBlogByConditionApi, queryBlogByIdApi,
queryBlogCategoryApi, queryBlogCommentApi, queryBlogStatsApi, queryLatestBlogApi, updateBlogApi
} from '@/apis/blog.ts'
import { IHandleApi } from 'vue3-common/types'
import { ElMessage } from 'element-plus'
import { ImagePathEnum } from '@/types'
import { flattenToTwoLevel } from '@/utils/blog/blogUtil.ts'
export const useBlogStore = defineStore('blog', {
state: () => ({
blogList: [] as IBlog[],
blogCommentList: [] as IBlogComment[],
blogNestedCommentList: [] as IBlogNestedComment[],
currentBlogComment: {
id: 0,
blogId: 0,
name: '',
website: '',
content: '',
ipAddress: '',
userAgent: '',
parentId: 0,
isApproved: true,
createTime: ''
} as IBlogComment,
currentBlogId: 0,
currentBlog: {
id: 0,
title: '',
topValue: 0,
isGreat: false,
categoryId: 0,
category: '',
summary: '',
content: '',
wordCount: 0,
readDuration: 0,
visitCount: 0,
createTime: '',
updateTime: ''
} as IBlog,
newBlog: {} as INewBlog,
blogCategoryList: [] as IBlogCategory[],
blogStats: {} as IBlogStats,
latestBlogList: [] as IBlogLatest[],
queryBlog: {} as IQueryBlog,
blogImagePath: ImagePathEnum.BLOG,
blogApiType: 'ADD' as IHandleApi,
pageInfo: {
currentPage: 1,
pageSize: 10,
totalSize: 1
},
isScrollEnd: false,
adminPageInfo: {
currentPage: 1,
pageSize: 10,
totalSize: 1
},
progressValue: '0%'
}),
actions: {
async queryBlog() {
const { currentPage, pageSize } = this.pageInfo
const result = await queryBlogApi(currentPage, pageSize)
this.blogList = result.records
this.pageInfo.totalSize = result.total
},
async queryMobileBlog() {
const { currentPage, pageSize } = this.pageInfo
const result = await queryBlogApi(currentPage, pageSize)
this.blogList.push(...result.records)
this.pageInfo.totalSize = result.total
},
async queryAdminBlog() {
const { currentPage, pageSize } = this.adminPageInfo
const result = await queryAdminBlogApi(currentPage, pageSize)
this.blogList = result.records
this.pageInfo.totalSize = result.total
},
async queryBlogByCondition(query: IQueryBlog) {
this.blogList = await queryBlogByConditionApi(query)
},
async queryBlogById(id: number) {
this.currentBlog = await queryBlogByIdApi(id)
await this.queryBlogComment(this.currentBlogId)
this.blogNestedCommentList = flattenToTwoLevel(this.blogCommentList)
},
async queryAdminBlogById(id: number) {
this.currentBlog = await queryAdminBlogByIdApi(id)
},
async queryBlogComment(blogId: number) {
this.blogCommentList = await queryBlogCommentApi(blogId)
},
async addBlogComment(blogComment: IBlogComment) {
await addBlogCommentApi(blogComment)
await this.queryBlogById(blogComment.blogId)
},
async queryBlogCategory() {
this.blogCategoryList = await queryBlogCategoryApi()
},
async queryAdminBlogCategory() {
this.blogCategoryList = await queryAdminBlogCategoryApi()
},
async queryBlogStats() {
this.blogStats = await queryBlogStatsApi()
},
async queryLatestBlog() {
this.latestBlogList = await queryLatestBlogApi()
},
async handleBlogApi(id?: number) {
switch (this.blogApiType) {
case 'ADD':
await addBlogApi(this.newBlog)
ElMessage.success('新增博客成功')
break
case 'UPDATE':
await updateBlogApi(this.newBlog.id as number, this.newBlog)
ElMessage.success('更新博客成功')
break
case 'DELETE':
await deleteBlogApi(id as number)
ElMessage.success('删除博客成功')
break
default:
break
}
await this.refreshInfo()
},
async refreshInfo() {
this.pageInfo.currentPage = 1
await this.queryBlog()
await this.queryBlogStats()
await this.queryLatestBlog()
},
getEmptyBlog(): INewBlog {
return {
id: 0,
category: '',
content: '',
isGreat: false,
title: '',
topValue: 0
}
},
getEmptyBlogComment(): IBlogComment {
return {
blogId: 0,
content: '',
createTime: '',
id: 0,
ipAddress: '',
isApproved: true,
name: '',
parentId: 0,
userAgent: '',
website: ''
}
}
}
})

78
src/store/user.ts Normal file
View File

@@ -0,0 +1,78 @@
import { defineStore } from 'pinia'
import { getLocalStorage, setLocalStorage, removeLocalStorage } from 'vue3-common/utils/storageUtil'
import { ILoginForm } from 'vue3-common'
import { ISession, IUser } from '@/types/auth'
import { queryUserApi, updateUserApi } from '@/apis/user.ts'
import { ImagePathEnum } from '@/types'
export const useUserStore = defineStore('user', {
state: () => ({
userInfo: {
id: 0,
accountId: 0,
accountName: '',
username: '',
gender: 0,
idNumber: '',
phoneNumber: '',
email: '',
birthDate: '',
avatar: '',
description: '',
area: ['', ''],
address: '',
job: '',
tags: []
} as IUser,
userImagePath: ImagePathEnum.USER
}),
actions: {
setLoginForm(loginForm: ILoginForm) {
setLocalStorage('loginForm', JSON.stringify(loginForm))
},
getLoginForm() {
return getLocalStorage('loginForm')
},
removeLoginForm() {
removeLocalStorage('loginForm')
},
handleSession(session: ISession) {
this.setToken(session.saToken.tokenValue)
this.setUserId(session.userInfo.id)
this.userInfo = session.userInfo
},
async queryUser() {
this.userInfo = await queryUserApi(Number(this.getUserId()))
},
async updateUser() {
await updateUserApi(this.userInfo.id, this.userInfo)
},
async updateAccountPassword(oldPassword: string, newPassword: string) {
console.log(this.userInfo.accountId)
// await updateAccountPasswordApi(this.userInfo.accountId, oldPassword, newPassword)
},
setToken(token: string) {
setLocalStorage('token', token)
},
getToken() {
return getLocalStorage('token')
},
setUserId(userId: number) {
setLocalStorage('userId', String(userId))
},
getUserId() {
return getLocalStorage('userId')
},
setAccount(accountName: string) {
setLocalStorage('account', accountName)
},
getAccount() {
return getLocalStorage('account')
},
removeAll() {
removeLocalStorage('token')
removeLocalStorage('account')
}
}
})

223
src/styles/admin.layout.module.scss Normal file
View File

@@ -0,0 +1,223 @@
$sidebar-width: 160px;
$sidebar-bg-color: #009FA8;
$hide-sidebar-width: 55px;
$logo-bg-color: #FFFFFF;
$logo-font-size: 1.2rem;
$menu-bg-color: #009FA8;
$menu-hover-color: #F3F0ED;
$menu-active-color: #FFFFFF;
$menu-font-size: 1rem;
$navbar-bg-color: #FFFFFF;
$navbar-height: 50px;
$app-main-bg-color: #009FA8;
$module-bg-color: #FFFFFF;
$transition-time: 0.28s;
// 全局布局
.layout-admin {
position: relative;
height: 100%;
width: 100%;
// 侧边栏
.layout-sidebar {
// 宽度过渡时间
transition: width $transition-time;
background-color: $sidebar-bg-color;
height: 100%;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
// Logo区域
.layout-logo {
background: $logo-bg-color;
.logo {
height: $navbar-height;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
img {
padding: 5px;
height: $navbar-height;
}
.title {
font-size: $logo-font-size;
}
}
}
// 菜单区域
.layout-menu {
overflow: auto;
height: calc(100vh - $navbar-height);
padding: 5px 0;
.el-menu {
// height: calc(100vh - $navbar-height);
background-color: $menu-bg-color;
border: none;
// 一级菜单项和下级菜单项
.el-menu-item, .el-sub-menu__title {
// border-top-left-radius: 20px;
// border-bottom-left-radius: 20px;
border-radius: 10px;
display: flex;
gap: 0.5vw;
font-size: $menu-font-size;
color: #FFFFFF;
}
// 悬浮时的颜色
.el-menu-item:hover {
background-color: $menu-hover-color !important;
color: #000000;
}
.el-sub-menu__title:hover {
color: #000000;
}
// 选中时的颜色
.el-menu-item.is-active {
background-color: $menu-active-color !important;
color: #000000;
}
}
}
}
// 主体区域
.layout-main {
min-height: 100%;
// margin-left过渡时间
transition: margin-left $transition-time;
position: relative;
// 导航栏
.layout-navbar {
height: $navbar-height;
overflow: hidden;
background: $navbar-bg-color;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
.left-container {
.hamburger-container {
height: calc($navbar-height / 2);
width: calc($navbar-height / 2);
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
&:hover {
background: rgba(0, 0, 0, .025)
}
}
}
.title {
margin: auto;
font-size: 1.6vw;
}
.right-container {
margin-left: auto;
display: flex;
align-items: center;
font-size: 1vw;
cursor: pointer;
.note-wrapper {
display: flex;
.item {
display: flex;
align-items: center;
margin-right: 0.2vw;
}
}
.avatar-wrapper {
display: flex;
align-items: center;
gap: 2px;
margin-right: 10px;
cursor: pointer;
&:focus {
outline: none;
}
.username {
font-size: 1rem;
}
}
}
}
// 内容区域
.app-main {
background-color: $app-main-bg-color;
height: calc(100vh - $navbar-height);
width: 100%;
padding: 1vh 0.5vw;
overflow: auto;
}
}
.admin-module {
height: 100%;
background-color: $module-bg-color;
padding: 1vh 0.5vw;
border-radius: 15px;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
align-items: center;
gap: 1vh;
}
.card-item {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 10px;
box-shadow: 5px 5px 5px #CFCFCF;
}
}
// 打开侧边栏
.openSidebar {
.layout-sidebar {
width: $sidebar-width;
}
.layout-main {
margin-left: $sidebar-width;
}
}
// 隐藏侧边栏
.hideSidebar {
.layout-sidebar {
width: $hide-sidebar-width;
}
.layout-main {
margin-left: $hide-sidebar-width;
}
}

62
src/styles/app.loading.module.scss Normal file
View File

@@ -0,0 +1,62 @@
#app-loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #f8f9fa;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
/* 立方体的容器（让方块水平排列） */
.cube-container {
display: flex;
gap: 15px; /* 方块之间的间距 */
}
/* 立体小方块 */
.cube {
width: 40px;
height: 40px;
background: linear-gradient(145deg, #3498db, #2980b9); /* 渐变颜色 */
border-radius: 5px;
position: relative;
animation: jump 1.2s infinite ease-in-out;
}
/* 给不同的方块加不同颜色 */
.cube1 { background: linear-gradient(145deg, #e74c3c, #c0392b); animation-delay: 0s; }
.cube2 { background: linear-gradient(145deg, #f1c40f, #d4ac0d); animation-delay: 0.2s; }
.cube3 { background: linear-gradient(145deg, #2ecc71, #27ae60); animation-delay: 0.4s; }
/* 方块跳跃动画 */
@keyframes jump {
0%, 100% {
transform: translateY(0);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateY(-30px);
box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.3);
}
}
/* 加载文字 */
.loading-text {
margin-top: 20px;
font-size: 18px;
color: #555;
font-weight: bold;
letter-spacing: 2px;
animation: fade 1.5s infinite ease-in-out;
}
/* 文字淡入淡出动画 */
@keyframes fade {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
}

51
src/styles/blog/blog.archive.module.scss Normal file
View File

@@ -0,0 +1,51 @@
@use "blog.variable.module.scss" as blog;
.blog-archive {
display: flex;
flex-direction: column;
gap: 3vh;
padding: 10vh 2vw;
::v-deep(.el-date-editor) {
align-self: center;
}
.total {
align-self: center;
font-size: blog.$normal-font-size;
color: blog.$normal-text-color;
}
.time-line {
height: 100%;
padding: 10px;
overflow: auto;
.item {
height: 5vh;
.date {
color: blog.$normal-text-color;
margin-right: 5px;
}
.title {
font-size: blog.$normal-font-size;
color: blog.$normal-text-color;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 0.2rem;
}
.title:hover {
color: var(--color-text);
}
}
}
}
@media screen and (max-width: 768px) {
.blog-archive {
padding: 20px 10px;
}
}

59
src/styles/blog/blog.category.detail.module.scss Normal file
View File

@@ -0,0 +1,59 @@
@use "blog.variable.module.scss" as blog;
.blog-category-detail {
padding: 10vh 2vw;
display: flex;
flex-direction: column;
gap: 3vh;
.name {
font-weight: bold;
text-align: center;
font-size: blog.$large-font-size;
}
.category-detail-list {
height: 100%;
padding: 10px;
display: flex;
flex-direction: column;
gap: 2vh;
.item {
display: grid;
grid-template-columns: 40px 200px 1fr;
justify-items: center;
align-items: center;
gap: 10px;
cursor: pointer;
color: blog.$normal-text-color;
padding-bottom: 0.5vh;
border: none;
border-bottom: 1px dashed blog.$gray-text-color;
.number, .date {
text-align: center;
}
.title {
justify-self: start;
}
span {
padding: 0.2vw;
}
}
.item:hover {
color: var(--color-text);
}
}
}
@media screen and (max-width: 768px) {
.blog-category-detail {
padding: 20px 10px;
}
}

69
src/styles/blog/blog.category.module.scss Normal file
View File

@@ -0,0 +1,69 @@
@use "blog.variable.module.scss" as blog;
.blog-category {
display: flex;
flex-direction: column;
gap: 3vh;
padding: 10vh 2vw;
.total {
text-align: center;
font-size: blog.$normal-font-size;
color: blog.$normal-text-color;
}
.category-list {
height: 100%;
padding: 10px;
display: flex;
flex-direction: column;
gap: 15px;
overflow: auto;
.item {
display: flex;
align-items: center;
gap: 5px;
padding-bottom: 5px;
border-bottom: 1px dashed blog.$gray-text-color;
color: blog.$normal-text-color;
i {
font-size:28px;
color: #0f8bc7;
}
.content {
display: flex;
flex-direction: column;
gap: 5px;
.label {
cursor: pointer;
color: blog.$normal-text-color;
font-size: blog.$normal-font-size;
}
.label:hover {
color: blog.$hover-text-color;
}
.value {
font-size: blog.$normal-font-size;
color: blog.$gray-text-color;
}
}
}
.item:hover {
color: var(--color-text);
cursor: pointer;
}
}
}
@media screen and (max-width: 768px) {
.blog-category {
padding: 20px 10px;
}
}

71
src/styles/blog/blog.detail.module.scss Normal file
View File

@@ -0,0 +1,71 @@
@use "blog.variable.module.scss" as blog;
.blog-detail {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2vh;
padding: 10vh 2vw 3vh 2vw;
.blog-md {
height: 100%;
width: 100%;
padding: 10px;
overflow: auto;
.md-editor {
height: 100%;
}
}
}
.blog-title {
width: 100%;
display: grid;
grid-template-rows: 1fr 1fr;
align-items: center;
gap: 1vh;
.title {
background-color: blog.$theme-color;
padding: 5px;
border: 2px solid blog.$theme-color;
border-radius: 10px;
text-align: center;
font-size: blog.$blog-title-font-size;
font-family: "华文楷体", serif;
}
}
.blog-copyright {
width: 100%;
background-color: var(--color-copyright-bg);
padding: 10px;
border-left: 3px solid #FD2C17;
font-size: blog.$small-font-size;
display: flex;
flex-direction: column;
gap: 1vh;
strong {
margin-right: 0.2vw;
}
}
.blog-ending {
span {
color: #CFCFCF;
}
}
.blog-detail-mobile {
padding: 10px;
display: flex;
flex-direction: column;
gap: 2vh;
}

15
src/styles/blog/blog.footbar.module.scss Normal file
View File

@@ -0,0 +1,15 @@
@use "blog.variable.module.scss" as blog;
.blog-site-footer {
padding: 10px 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
span {
font-size: blog.$small-font-size;
}
}

57
src/styles/blog/blog.label.module.scss Normal file
View File

@@ -0,0 +1,57 @@
@use "blog.variable.module.scss" as blog;
.label-list {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1vh;
margin-bottom: 1vh;
.container {
display: flex;
align-items: center;
gap: 5px;
.item {
font-size: blog.$small-font-size;
color: blog.$gray-text-color;
display: flex;
align-items: center;
gap: 5px;
span {
font-size: blog.$small-font-size;
font-family: "Times New Roman", serif;
}
}
}
.top-value {
color: #7d26cd !important;
}
.great {
color: #FFFFFF !important;
background-color: #7d26cd;
padding: 2px;
}
.date {
text-decoration: underline dotted;
text-underline-offset: 0.2em;
}
.category {
text-decoration: underline;
text-underline-offset: 0.2em;
color: blog.$normal-text-color;
cursor: pointer;
}
.category:hover {
color: blog.$hover-text-color;
}
}

60
src/styles/blog/blog.module.scss Normal file
View File

@@ -0,0 +1,60 @@
@use "blog.variable.module.scss" as blog;
.blog-container {
// height: 100%;
background-color: var(--color-bg);
padding: 0 5vw;
display: grid;
grid-template-columns: minmax(13vw, 200px) 1fr;
column-gap: 2vw;
aside {
display: grid;
grid-template-rows: 40vh 60vh;
row-gap: 2vh;
z-index: 2;
.blog-summary {
// 滚动到顶部固定
position: sticky;
top: 0;
}
}
section {
z-index: 2;
display: flex;
flex-direction: column;
gap: 2vh;
.blog-section {
// height: 100%;
min-height: 100vh;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12),
0 3px 1px -2px rgba(0,0,0,0.06),
0 1px 5px 0 rgba(0,0,0,0.12),
0 -1px 0.5px 0 rgba(0,0,0,0.09);
.module-title {
background-color: blog.$theme-color;
padding: 5px;
border: 2px solid blog.$theme-color;
border-radius: 10px;
text-align: center;
font-size: blog.$large-font-size;
font-family: "华文楷体", serif;
}
}
}
.card-item {
background-color: var(--color-card-bg);
border: 1px solid var(--color-border-bg);
border-radius: blog.$border-radius;
// box-shadow: 3px 3px 3px #CFCFCF;
}
}

87
src/styles/blog/blog.overview.module.scss Normal file
View File

@@ -0,0 +1,87 @@
@use "blog.variable.module.scss" as blog;
$blog-content-list-item-height: 38vh;
$blog-content-title-font-size: 1.6rem;
$hr-color: #CFCFCF;
.blog-content-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 5vh;
padding: 10vh 2vw 2vh 2vw;
position: relative;
.blog-content {
width: 100%;
height: $blog-content-list-item-height;
padding: 4vh 1vw;
border: 1px solid blog.$border-color;
border-radius: 15px;
box-shadow: 0 0 5px blog.$border-color;
}
.blog-content-empty {
display: flex;
justify-content: center;
align-items: center;
}
.blog-content-summary {
display: grid;
grid-template-rows: 1fr 1fr 8vh 1fr 1fr;
justify-items: center;
align-items: center;
gap: 2vh;
.title {
font-size: $blog-content-title-font-size;
font-family: "华文楷体", serif;
font-weight: bolder;
position: relative;
}
// 自动展开下划线
.title:after {
content: "";
width: 0;
height: 2px;
background: blog.$theme-color;
// 初始位置在底部中间
position: absolute;
top: 100%;
left: 50%;
// 动画时间
transition: all .8s;
}
// 悬浮式展开到100%
.title:hover::after {
width: 100%;
left: 0;
}
.content {
font-size: blog.$normal-font-size;
line-height: 150%;
}
hr {
width: 10%;
height: 1px;
background-color: $hr-color;
border: none;
}
span, p {
font-family: '华为行楷',serif;
}
}
}
@media screen and (max-width: 768px) {
.blog-content-list {
padding: 10px;
}
}

281
src/styles/blog/blog.sidebar.module.scss Normal file
View File

@@ -0,0 +1,281 @@
@use "blog.variable.module.scss" as blog;
$title-font-color: #FFFFFF;
$title-font-size: 1.8rem;
$sub-title-font-size: 1rem;
.blog-aside {
.top-container {
width: 100%;
display: grid;
grid-template-rows: 2fr 3fr;
.title-container {
background-color: blog.$theme-color;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
display: grid;
grid-template-rows: 1fr 1fr;
justify-items: center;
align-items: center;
padding: 10px;
.title {
color: $title-font-color;
font-size: $title-font-size;
}
.sub-title {
font-family: "华文楷体", serif;
font-size: $sub-title-font-size;
text-align: center;
line-height: 150%;
}
}
.blog-menu-container {
align-self: center;
height: 90%;
display: grid;
grid-template-rows: repeat(4, 1fr);
align-items: center;
.el-menu-item {
height: 5vh;
gap: 0.5vw;
font-size: blog.$normal-font-size;
.menu-title {
}
.value {
position: absolute;
right: 10%;
line-height: 2vh;
background-color: blog.$normal-bg-color;
padding: 2px;
border: solid 1px blog.$normal-bg-color;
border-radius: 15px;
color: var(--color-bg);
font-size: blog.$small-font-size;
font-family: "Times New Roman",serif;
}
}
}
.el-menu {
border: none;
}
}
.blog-summary {
display: flex;
flex-direction: column;
align-items: center;
gap: 1vh;
.blog-summary-tab {
margin-top: 1vh;
height: 5vh;
display: flex;
align-items: center;
gap: 1vw;
span {
font-size: blog.$small-font-size;
}
span:hover {
color: #FC6423;
cursor: pointer;
}
.tab-active {
color: #FC6423;
text-decoration: underline;
text-underline-offset: 0.5em;
}
}
.blog-brief {
height: 100%;
width: 100%;
display: grid;
grid-template-rows: 150px 50px 50px 1fr;
justify-items: center;
align-items: center;
gap: 1vh;
.avatar {
padding: 1vh 1vw;
display: grid;
grid-template-rows: 100px 1fr;
justify-items: center;
align-items: center;
gap: 1vh;
img {
width: 100px;
height: 100px;
border-radius: 50%;
transition: all 2.0s;
cursor: pointer;
}
img:hover {
transform: rotate(360deg);
}
span {
font-weight: bold;
}
}
.info {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
gap: 1vw;
.item {
display: grid;
grid-template-rows: 1fr 1fr;
justify-items: center;
align-items: center;
gap: 5px;
cursor: pointer;
.name {
color: blog.$gray-text-color;
}
.name:hover {
color: var(--color-text);
}
}
}
.social {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
cursor: pointer;
.item {
width: 100%;
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
color: blog.$normal-text-color;
font-size: blog.$small-font-size;
.name {
font-size: blog.$small-font-size;
}
}
.item:hover {
background-color: var(--color-card-bg);
color: var(--color-text);
}
}
.latest-blog {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1vh;
.title {
span {
margin-left: 5px;
font-weight: bold;
}
}
.blog-list {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5vh;
cursor: pointer;
span {
text-align: center;
text-decoration: underline;
text-underline-offset: 0.1em;
font-size: blog.$small-font-size;
color: blog.$normal-text-color;
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
span:hover {
color: var(--color-text);
}
}
}
.blog-time {
width: 10vw;
height: 100%;
}
span {
font-size: blog.$normal-font-size;
}
}
.md-editor-catalog {
height: 100%;
width: 100%;
overflow: auto;
span {
word-break: break-all;
white-space: normal;
font-size: blog.$smaller-font-size;
color: #666666;
}
}
.scroll-container {
padding: 2px 0;
width: 100%;
border-color: blog.$border-color;
border-bottom-left-radius: blog.$border-radius;
border-bottom-right-radius: blog.$border-radius;
background-color: var(--color-scroll-card-bg);
text-align: center;
.fa-arrow-up {
color: blog.$theme-color;
margin-right: 0.2vw;
}
span {
font-size: blog.$small-font-size;
color: #A19FA0;
}
}
.scroll-container:hover {
cursor: pointer;
}
}
}

129
src/styles/blog/blog.tools.module.scss Normal file
View File

@@ -0,0 +1,129 @@
@use "blog.variable.module.scss" as blog;
.blog-tools {
position: absolute;
.book-mark-link {
border-bottom: none;
display: block;
position: fixed;
top: -2px;
left: 20px;
color: #222;
font-size: 26px;
transition: .3s;
z-index: 2;
}
.github-corner {
border-bottom: none;
display: block;
position: fixed;
top: 0;
right: 0;
color: #222;
font-size: 26px;
transition: .3s;
z-index: 2;
}
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%, 100% {
transform: rotate(0)
}
20%, 60% {
transform: rotate(-25deg)
}
40%, 80% {
transform: rotate(10deg)
}
}
@media (max-width: 500px) {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
#particles {
position: absolute;
z-index: 0;
}
.heart {
position: fixed;
opacity: 1;
scale: 1;
width: 10px;
height: 10px;
background: red;
transform: rotate(45deg);
z-index: 2;
}
.heart:after, .heart:before {
content: "";
width: inherit;
height: inherit;
background: inherit;
border-radius: 50%;
position: absolute;
}
.heart:after {
top: -5px;
}
.heart:before {
left: -5px;
}
@keyframes move {
100% {
transform: translateY(-20px) rotate(45deg);
opacity: 0;
}
}
.blog-progress {
/* Positioning */
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background-color: transparent;
color: blog.$theme-color;
z-index: 3;
}
.blog-progress::-webkit-progress-bar {
background-color: transparent;
}
.blog-progress::-webkit-progress-value {
background-color: blog.$theme-color;
}
.blog-progress::-moz-progress-bar {
background-color: blog.$theme-color;
}
.theme-button {
position: fixed;
top: -2px;
left: 50px;
z-index: 10;
}
}

23
src/styles/blog/blog.variable.module.scss Normal file
View File

@@ -0,0 +1,23 @@
$bg-color: #EEEEEE;
$card-bg-color: #FFFFFF;
// 主题颜色
$theme-color: #009FA8;
// 正常文本颜色
$normal-text-color: #555555;
// 悬浮文本颜色
$hover-text-color: #000000;
// 灰色文本颜色
$gray-text-color: #9C9C9C;
$normal-bg-color: #CCCCCC;
$hover-bg-color: #F9F9F9;
$blog-title-font-size: 1.6rem;
$large-font-size: 1.3rem;
$normal-font-size: 1rem;
$small-font-size: 0.9rem;
$smaller-font-size: 0.8rem;
$border-color: #EEEEEE;
$border-radius: 15px;

10
src/styles/element/index.module.scss Normal file
View File

@@ -0,0 +1,10 @@
@use 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
'base': #009FA8, // 设置你的主题色
),
)
);
// 也可以在此引入其他 Element Plus 样式
//@use 'element-plus/theme-chalk/src/index.scss' as *;

163
src/styles/home.layout.module.scss Normal file
View File

@@ -0,0 +1,163 @@
@use "home.variable.module" as home;
.layout-home {
display: flex;
flex-direction: column;
.layout-navbar {
background-color: home.$navbar-bg-color;
position: sticky;
top: 0;
z-index: 2;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
display: grid;
grid-template-columns: 1fr 70% 1fr;
align-items: center;
.title-container {
}
.right-container {
margin-right: 10px;
justify-self: flex-end;
display: flex;
justify-content: center;
gap: 1vw;
.el-avatar:hover {
cursor: pointer;
}
}
.layout-menu {
.el-menu {
display: flex;
justify-content: center;
background-color: home.$navbar-bg-color !important;
overflow: auto;
border-bottom: none !important;
.el-menu-item, .el-sub-menu__title {
height: home.$navbar-height;
font-family: "华文楷体", serif;
font-size: 1rem;
}
.el-icon, span {
color: #FFFFFF;
}
}
}
}
.layout-main {
height: calc(100vh - #{home.$navbar-height});
overflow: auto;
background-color: home.$body-bg-color;
padding: 10px;
}
.layout-main::-webkit-scrollbar {
display: none;
}
.common-view {
height: 100%;
.body-container {
height: 100%;
display: grid;
grid-template-columns: 1fr minmax(400px, 30%);
gap: 1vw;
.left-container {
display: flex;
flex-direction: column;
gap: 1vh;
.common-statistics {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
gap: 1vw;
}
}
.right-container {
display: flex;
flex-direction: column;
gap: 1vh;
.common-query {
align-self: center;
display: flex;
gap: 10px;
}
}
.add-new {
position: absolute;
right: 1%;
bottom: 2%;
width: 50px;
height: 50px;
font-size: 1.8rem;
box-shadow: 0 4px 10px #CFCFCF;
}
}
@media (max-width: 1200px) {
.body-container {
grid-template-columns: 1fr 1fr;
}
}
}
.plan-view {
.body-container {
grid-template-columns: 1fr minmax(350px, 30%);
}
}
.common-section {
height: 100%;
overflow: auto;
}
.card-item {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 15px;
box-shadow: 3px 3px 3px #CFCFCF;
}
.record-card-item {
background-color: var(--color-record-card-bg);
border: 1px solid var(--color-record-card-bg);
border-radius: 10px;
// box-shadow: 3px 3px 3px #CFCFCF;
}
.el-switch {
.el-switch__core {
height: 32px;
width: 80px;
}
}
}
.el-menu--popup-container {
.el-menu--popup {
min-width: 8vw;
}
.el-menu-item.is-active {
background-color: home.$menu-active-color !important;
}
}

15
src/styles/home.variable.module.scss Normal file
View File

@@ -0,0 +1,15 @@
$theme-color: #009FA8;
$navbar-bg-color: #138BBF;
$body-bg-color: #F5F5F5;
$footer-bg-color: #F5F5DC;
$menu-active-color: #009FA8;
$navbar-height: 60px;
$foot-height: 50px;
$common-padding: 10px;
$query-height: 60px;
$main-top-padding: 2vh;
$main-left-padding: 0.5vw;

89
src/styles/home/bill.mobile.module.scss Normal file
View File

@@ -0,0 +1,89 @@
.mobile-bill-view {
display: flex;
flex-direction: column;
gap: 10px;
.el-date-editor {
align-self: center;
}
.bill-chart {
display: grid;
grid-template-rows: repeat(4, 1fr);
gap: 10px;
.chart-container {
display: grid;
grid-template-rows: 40px 1fr;
.content {
padding: 0 5px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #009FA8;
.title {
font-size: 1em;
font-weight: bold;
}
}
.chart {
height: 300px;
width: 100%;
}
.rank-chart {
overflow: auto;
display: flex;
flex-direction: column;
gap: 5px;
.rank-item {
padding: 10px;
display: grid;
grid-template-columns: 20px 1fr 80px;
align-items: center;
.rank-amount {
justify-self: flex-end;
}
}
.rank-item:nth-child(1) {
color: #d4af37;
font-weight: bold;
}
.rank-item:nth-child(2) {
color: #a8a8a8;
}
.rank-item:nth-child(3) {
color: #b87333;
}
}
}
}
.el-switch {
.el-switch__core {
height: 32px;
width: 80px;
}
}
.bill-setting {
display: flex;
flex-direction: column;
gap: 10px;
.button-container {
align-self: center;
display: flex;
gap: 10px;
}
}
}

48
src/styles/home/bill.module.scss Normal file
View File

@@ -0,0 +1,48 @@
.bill-view {
.bill-chart {
flex-grow: 1;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 2vh;
.chart-container {
display: grid;
grid-template-rows: 40px 1fr;
.content {
padding: 0 5px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #009FA8;
.title {
font-size: 1em;
font-weight: bold;
}
}
}
}
@media (max-width: 1200px) {
.bill-chart {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
gap: 2vh;
.chart-container {
.chart {
min-width: 300px;
min-height: 250px;
}
}
}
}
.bill-dialog {
width: 950px;
}
}

20
src/styles/home/food.mobile.module.scss Normal file
View File

@@ -0,0 +1,20 @@
.mobile-food-view {
display: flex;
flex-direction: column;
gap: 10px;
.food-list {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
//align-items: center;
gap: 1vh;
.list {
display: flex;
flex-direction: column;
gap: 10px;
}
}
}

39
src/styles/home/food.module.scss Normal file
View File

@@ -0,0 +1,39 @@
.food-view {
.food-list {
background-color: #F5F5F5;
flex-grow: 1;
overflow: auto;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
//align-items: center;
gap: 1vh;
padding: 10px;
.list {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 2vw;
row-gap: 2vh;
}
@media (min-width: 1280px) and (max-width: 1500px) {
.list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1280px) {
.list {
grid-template-columns: repeat(1, 1fr);
}
}
.el-pagination {
align-self: center;
}
}
}

232
src/styles/home/life.detail.module.scss Normal file
View File

@@ -0,0 +1,232 @@
.life-detail {
position: relative;
display: grid;
grid-template-rows: 40px 1fr;
align-items: center;
.title {
text-align: center;
font-weight: bold;
font-size: 1.4rem;
}
section {
.info-container, .record-container {
.info-item {
padding: 1vh 1vw;
display: flex;
flex-direction: column;
gap: 1vh;
.title-info {
display: flex;
align-items: center;
gap: 5px;
svg {
height: 1.4em;
width: 1.4em;
}
.sub-title {
font-size: large;
font-weight: bold;
}
}
.info {
margin-left: 2vw;
}
}
}
.info-container {
display: flex;
flex-direction: column;
gap: 10px;
.food-basic-info {
display: flex;
gap: 1vh;
}
.travel-basic-info {
display: flex;
flex-direction: column;
gap: 1vh;
.basic-item {
display: flex;
flex-direction: column;
gap: 1vh;
.basic-title {
font-weight: bold;
}
.basic-content {
margin-left: 1vw;
display: flex;
gap: 1vh;
}
}
}
.material-info {
display: flex;
flex-direction: column;
gap: 1vh;
.material-item {
display: flex;
flex-direction: column;
gap: 1vh;
.material-title {
font-weight: bold;
}
.material-content {
margin-left: 1vw;
display: flex;
gap: 1vh;
}
}
}
.step-info {
margin-left: 1vw;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1vh;
min-height: 28vh;
.step-container {
display: grid;
grid-template-columns: 50px 1fr;
gap: 1vw;
.step-body {
display: flex;
flex-direction: column;
gap: 1vh;
.step-content {
font-weight: bold;
}
.step-image {
height: 100%;
width: 100%;
max-height: 300px;
max-width: 300px;
}
}
}
}
.others-info {
margin-left: 1vw;
display: flex;
gap: 1vw;
.others-title {
font-weight: bold;
}
}
.guide-info {
display: flex;
flex-direction: column;
gap: 1vh;
.guide-item {
display: flex;
flex-direction: column;
gap: 1vh;
.guide-title {
font-weight: bold;
}
.guide-content {
min-height: 6vh;
margin-left: 1vw;
display: flex;
gap: 1vh;
}
}
}
}
.info-container .info-item:last-child {
flex-grow: 1;
}
.record-container {
overflow: auto;
display: flex;
flex-direction: column;
gap: 2vh;
.record-info {
.el-timeline {
.el-timeline-item__wrapper {
.el-timeline-item__timestamp {
color: #000000;
font-weight: bold;
}
}
}
.record-card {
.el-card__body {
display: grid;
grid-template-rows: 20px 250px;
gap: 10px;
.record-content {
font-weight: bold;
}
.el-carousel {
.el-carousel__container {
height: 100%;
}
}
}
}
}
}
}
.back-button {
position: absolute;
top: 0;
left: 0;
}
}
@media screen and (min-width: 768px) {
.life-detail {
section {
height: calc(100vh - 40px - 40px - 4vh);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
}
}
@media screen and (max-width: 768px) {
.life-detail {
section {
display: flex;
flex-direction: column;
gap: 10px;
}
}
}

90
src/styles/home/life.record.module.scss Normal file
View File

@@ -0,0 +1,90 @@
$card-image-height: 200px;
.life-record-card {
display: grid;
grid-template-rows: minmax($card-image-height, 26vh) 1fr;
.el-carousel {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
.el-carousel__container {
height: 100%;
}
.el-image {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
.record-info {
border-top: 1px solid var(--el-color-primary);
padding: 1vh;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
.top-container, .bottom-container {
display: flex;
justify-content: space-between;
align-items: center;
.info-list {
display: flex;
align-items: center;
gap: 8px;
.el-rate {
height: auto;
}
.info-item {
display: flex;
align-items: center;
gap: 3px;
.title {
font-size: 1.2rem;
font-weight: bold;
}
}
.category-item {
color: #0d9488;
}
.location-item {
color: #0d9488;
}
.amount-item {
font-size: 1.2rem;
color: #CFB53B;
}
.fa-solid.fa-location-dot {
color: #008000;
}
.fa-solid.fa-flag {
color: #0000FF;
}
.fa-regular.fa-calendar-check {
color: #FF0000;
}
}
}
.bottom-container {
font-size: small;
color: #9C9C9C;
}
}
}

28
src/styles/home/plan.mobile.module.scss Normal file
View File

@@ -0,0 +1,28 @@
.mobile-plan-view {
display: flex;
flex-direction: column;
gap: 10px;
#planCalendar {
.fc-view {
height: calc(100vh - 210px);
.fc-timegrid-body {
// 单元格高度
tr {
height: 3.5vh;
}
}
}
}
.plan-list {
.el-scrollbar {
.el-scrollbar__view {
display: flex;
flex-direction: column;
gap: 2vh;
}
}
}
}

13
src/styles/home/plan.module.scss Normal file
View File

@@ -0,0 +1,13 @@
.plan-view {
.plan-list {
height: calc(100vh - 120px);
.el-scrollbar {
.el-scrollbar__view {
display: flex;
flex-direction: column;
gap: 2vh;
}
}
}
}

20
src/styles/home/travel.mobile.module.scss Normal file
View File

@@ -0,0 +1,20 @@
.mobile-travel-view {
display: flex;
flex-direction: column;
gap: 10px;
.travel-list {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
//align-items: center;
gap: 1vh;
.list {
display: flex;
flex-direction: column;
gap: 10px;
}
}
}

33
src/styles/home/travel.module.scss Normal file
View File

@@ -0,0 +1,33 @@
.travel-view {
.travel-spot-list {
background-color: #F5F5F5;
flex-grow: 1;
overflow: auto;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
//align-items: center;
gap: 1vh;
padding: 10px;
.list {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 4vw;
row-gap: 2vh;
}
@media (max-width: 1280px) {
.list {
grid-template-columns: repeat(1, 1fr);
}
}
.el-pagination {
align-self: center;
}
}
}

85
src/styles/index.module.scss Normal file
View File

@@ -0,0 +1,85 @@
body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: CustomFont, sans-serif;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
a:focus,
a:active {
outline: none;
}
a,
a:focus,
a:hover {
cursor: pointer;
color: inherit;
text-decoration: none;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#app {
height: 100%;
}
html {
font-size: 16px;
}
span, input {
font-family: 'CustomFont', serif;
}
// 明亮主题变量
:root {
// 基础颜色
--color-bg: #F5F5F5;
--color-card-bg: #FFFFFF;
--color-record-card-bg: #F5F5DC;
--color-border-bg: #FFFFFF;
--color-text: #000000;
}
// 暗黑主题变量
.dark {
--color-bg: #000000;
--color-card-bg: #000000;
--color-record-card-bg: #4C4D4F;
--color-border-bg: #4C4D4F;
--color-text: #FFFFFF;
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
.dark::view-transition-old(root) {
z-index: 9999;
}
@media (max-width: 1280px) {
html {
font-size: 13px;
}
}
@font-face {
font-family: 'CustomFont';
src: url('@/assets/font/custom.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@import "//at.alicdn.com/t/c/font_4793264_6bh098pu52x.css";

154
src/styles/mobile.home.layout.module.scss Normal file
View File

@@ -0,0 +1,154 @@
@use "home.variable.module" as home;
$titleBar-height: 40px;
$tabBar-height: 70px;
.layout-mobile-home {
height: 100%;
.common-mobile-view {
height: calc(100vh - $tabBar-height - $titleBar-height);
overflow: auto;
background-color: var(--color-bg);
color: var(--color-text);
padding: 10px;
}
.common-query {
align-self: center;
display: flex;
gap: 10px;
}
.mobile-common-query {
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
.query-item {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
}
.common-statistics {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
gap: 10px;
}
.title-bar {
background-color: var(--el-color-primary);
height: $titleBar-height;
padding: 0 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
.left-container {
justify-self: flex-start;
color: #FFFFFF;
.logo-container {
display: flex;
align-items: center;
gap: 5px;
.logo {
width: 20px;
height: 20px;
}
}
}
.title-container {
color: #FFFFFF;
font-weight: bold;
font-size: 1.2rem;
}
.right-container {
justify-self: flex-end;
display: flex;
align-items: center;
gap: 5px;
}
}
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: $tabBar-height;
display: flex;
justify-content: space-around;
background-color: var(--color-card-bg);
color: var(--color-text);
box-shadow: 0 -1px 2px var(--color-border-bg);
padding: 10px 0;
.item {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 5px;
i {
font-size: 24px;
}
}
.router-link-active {
color: var(--el-color-primary);
}
}
.add-new {
position: absolute;
right: 2%;
bottom: 9%;
font-size: 1.8rem;
}
.vc-container {
width: 100%;
.vc-day {
min-height: 40px;
}
.vc-day-box-center-bottom {
height: 105%;
display: flex;
}
}
.common-section {
height: 100%;
overflow: auto;
}
.card-item {
background-color: var(--color-card-bg);
border: 1px solid var(--color-border-bg);
border-radius: 10px;
// box-shadow: 3px 3px 3px #CFCFCF;
}
.record-card-item {
background-color: var(--color-record-card-bg);
border: 1px solid var(--color-record-card-bg);
border-radius: 10px;
// box-shadow: 3px 3px 3px #CFCFCF;
}
}

48
src/types/auth.ts Normal file
View File

@@ -0,0 +1,48 @@
export type ILoginType = 'common' | 'phone' | 'email' | 'admin'
export type IAccountType = 'QQ' | 'WeChat' | 'Phone' | 'EMail'
export interface IUser {
id: number;
accountId: number;
accountName: string;
username: string;
gender: number;
idNumber: string;
phoneNumber: string;
email: string;
birthDate: string;
avatar: string;
description: string;
area: string[];
address: string;
job: string;
tags: string[];
}
export interface ISession {
saToken: {
tokenName: string;
tokenValue: string;
isLogin: boolean;
loginId: string;
loginType: string;
tokenTimeout: number;
sessionTimeout: number;
tokenSessionTimeout: number;
tokenActiveTimeout: number;
loginDevice: string;
tag: string;
};
userInfo: IUser;
}
export interface IAccount {
id: number;
accountName: string;
password: string;
confirmPassword: string;
username: string;
state: number;
date: string;
}

84
src/types/blog.ts Normal file
View File

@@ -0,0 +1,84 @@
export interface IBlog {
id: number;
title: string;
topValue: number;
isGreat: boolean;
categoryId: number;
category: string;
summary: string;
content: string;
wordCount: number;
readDuration: number;
visitCount: number;
createTime: string;
updateTime: string;
}
export interface INewBlog {
id: number;
title: string;
topValue: number;
isGreat: boolean;
category: string;
content: string;
}
export interface IQueryBlog {
category?: string;
title?: string;
year?: number;
}
export interface IBasicBlog {
category: string;
topValue: number;
isGreat: boolean;
wordCount: number;
readDuration: number;
visitCount: number;
createTime: string;
updateTime: string;
}
export interface IBlogCategory {
name: string;
count: number;
}
export interface IBlogStats {
blogCount: number;
categoryCount: number;
wordCount: number;
}
export interface IBlogLatest {
id: number;
title: string;
}
export interface IBlogVisit {
ip: string;
os: string;
browser: string;
uri: string;
title: string;
visitTime: string;
}
export interface IBlogComment {
id: number;
blogId: number;
name: string;
website: string;
content: string;
ipAddress: string;
userAgent: string;
parentId: number;
isApproved: boolean;
createTime: string;
}
export interface IBlogNestedComment {
comment: IBlogComment;
replies: IBlogComment[];
}

25
src/types/index.ts Normal file
View File

@@ -0,0 +1,25 @@
export enum ImagePathEnum {
BLOG= 'blog',
BILL = 'bill',
FOOD = 'food',
TRAVEL = 'travel',
PRODUCT = 'product',
JOURNAL = 'journal',
LEDGER = 'ledger',
USER = 'user'
}
export interface IPageRecord<T> {
current: number;
size: number;
total: number;
pages: number;
records: T[];
}
export type IDateType = 'month' | 'year'
export interface ICategory {
label: string;
value: string;
}

194
src/utils/blog/blogUtil.ts Normal file
View File

@@ -0,0 +1,194 @@
import { ElMessage } from 'element-plus'
import { IBasicBlog, IBlog, IBlogComment, IBlogNestedComment } from '@/types/blog.ts'
import dayjs from 'dayjs'
/**
* 粒子特效
*/
export const particlesOptions = {
background: {
color: {}
},
fpsLimit: 60,
interactivity: {
events: {
// 点击时事件
onClick: {
enable: false,
mode: 'push' // 可用的click模式有: "push", "remove", "repulse", "bubble"。
},
// 悬浮时事件
onHover: {
enable: true,
mode: 'grab' // 可用的hover模式有: "grab", "repulse", "bubble"。
},
resize: true
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40
},
push: {
quantity: 4
},
repulse: {
distance: 200,
duration: 0.4
}
}
},
particles: {
color: {
value: '#000000'
},
links: {
color: '#000000', // '#dedede'。线条颜色。
distance: 150, // 线条长度
enable: true, // 是否有线条
opacity: 0.5, // 线条透明度。
width: 1 // 线条宽度。
},
collisions: {
enable: false
},
move: {
direction: 'none',
enable: true,
outMode: 'bounce',
random: false,
speed: 4, // 粒子运动速度。
straight: false
},
number: {
density: {
enable: true,
area: 800
},
value: 50 // 粒子数量。
},
opacity: {
value: 0.1 // 粒子透明度。
},
shape: {
type: 'edge' // 可用的粒子外观类型有："circle","edge","triangle", "polygon","star"
},
size: {
random: true,
value: 5
}
},
detectRetina: true
}
/**
* 创建鼠标点击爱心特效
* @param leftPosition 左侧位置
* @param topPosition 右侧位置
*/
export const createHeartDiv = (leftPosition: number, topPosition: number) => {
const heart = document.createElement('div')
document.body.appendChild(heart)
heart.classList.add('heart')
heart.style.left = `${leftPosition}px`
heart.style.top = `${topPosition}px`
heart.style.animation = 'move 1s normal forwards'
setTimeout(() => {
document.body.removeChild(heart)
}, 1000)
heart.style.backgroundColor = `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`
}
/**
* 校验博客上传图片
* @param files 文件
*/
export const validateBlogImage = (files: File[]): boolean => {
if (files.length > 1) {
ElMessage.error('请上传1张图片')
return false
}
const uploadFile = files[0]
const fileTypeList = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff']
if (fileTypeList.indexOf(uploadFile.type.toLowerCase()) !== -1) {
ElMessage.error('请上传图片文件')
return false
}
const maxFileSize = 5 * 1024 * 1024
if (uploadFile.size > maxFileSize) {
ElMessage.error('请上传5M以内的图片')
return false
}
return true
}
export const formatBlogWordCount = (count: number): string => {
if (!count) {
return ''
}
if (count < 10000) return count.toString()
const units = ['万', '亿', '兆']
let unitIndex = -1
while (count >= 10000 && unitIndex < units.length - 1) {
count /= 10000
unitIndex++
}
// 保留两位小数，并移除末尾可能的零
const formattedNum = count.toFixed(2).replace(/\.?0+$/, '')
return `${formattedNum}${units[unitIndex]}`
}
export const getBlogRunTotalTime = (startDateStr: string):string => {
const startDate = dayjs(startDateStr)
const endDate = dayjs() // 当前时间
// 计算完整时间间隔（年、月、日）
const years = endDate.diff(startDate, 'year')
const months = endDate.diff(startDate.add(years, 'year'), 'month')
const days = endDate.diff(startDate.add(years, 'year').add(months, 'month'), 'day')
return `${years}年${months}月${days}日`
}
export const getBasicBlog = (blog: IBlog): IBasicBlog => {
return {
category: blog.category,
isGreat: blog.isGreat,
readDuration: blog.readDuration,
topValue: blog.topValue,
wordCount: blog.wordCount,
visitCount: blog.visitCount,
createTime: blog.createTime,
updateTime: blog.updateTime
}
}
// 扁平化数据转两层嵌套结构
export function flattenToTwoLevel(comments: IBlogComment[]): IBlogNestedComment[] {
// 创建评论映射表，快速查找评论
const commentMap = new Map<number, IBlogComment>()
comments.forEach((comment) => commentMap.set(comment.id, comment))
// 结果数组
const result: IBlogNestedComment[] = []
// 遍历所有评论，构建两层结构
comments.forEach((comment) => {
if (comment.parentId === 0) {
// 顶层评论
const replies = comments.filter((reply) => reply.parentId === comment.id)
result.push({ comment, replies })
}
})
return result
}

164
src/utils/blog/ribbon.ts Normal file
View File

@@ -0,0 +1,164 @@
const { random } = Math
const randomColor = [
['#95e1d3', '#eaffd0', '#fce38a', '#f38181'],
['#6a2c70', '#b83b5e', '#f08a5d', '#f9ed69'],
['#edb1f1', '#d59bf6', '#9896f1', '#8ef6e4'],
['#ff9de2', '#8c82fc', '#b693fe', '#7effdb'],
['#fff5a5', '#ffaa64', '#ff8264', '#ff6464']
]
export interface IRibbonOptions {
zIndex: number;
alpha: number;
size: number;
}
interface IRibbonPoint {
x: number;
y: number;
}
const getRandomInt = (value: number) => {
return Math.floor(Math.random() * value)
}
export class Ribbon {
/**
* 画布元素
*/
canvas: HTMLCanvasElement;
/**
* Canvas中的Context
*/
ctx: CanvasRenderingContext2D;
/**
* 轨迹路径
*/
path: IRibbonPoint[];
/**
* 区域宽度
*/
width: number;
/**
* 区域高度
*/
height: number;
/**
* 颜色色系
*/
colorIndex: number;
/**
* 配置项
*/
options: IRibbonOptions
constructor(options: IRibbonOptions = {
alpha: 0.6,
size: 300,
zIndex: 0
}) {
this.options = options
// 生成Canvas元素 并添加到Body中
this.canvas = document.createElement('canvas')
this.canvas.classList.add('ribbon-canvas')
this.canvas.style.cssText = `position:fixed;top:0;left:0;z-index:${this.options.zIndex}`
document.getElementsByTagName('body')[0].appendChild(this.canvas)
this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D
this.width = window.innerWidth
this.height = window.innerHeight
// 返回实际宽高
const dpr = window.devicePixelRatio || 1
this.canvas.width = this.width * dpr
this.canvas.height = this.height * dpr
// 水平、竖直方向缩放
this.ctx.scale(dpr, dpr)
// 图形透明度
this.ctx.globalAlpha = this.options.alpha
this.path = []
this.colorIndex = 0
this.reDraw()
}
/**
* 重新绘制
*/
reDraw() {
// 清除之前绘制的图形
this.ctx.clearRect(0, 0, this.width, this.height)
// 生成新的点和路径
const point1: IRibbonPoint = {
x: 0,
y: this.height * 0.7 + this.options.size
}
const point2: IRibbonPoint = {
x: 0,
y: this.height * 0.7 - this.options.size
}
this.path = [point1, point2]
// 随机选择色系
this.colorIndex = getRandomInt(randomColor.length)
// 路径没有填满屏幕宽度时，绘制路径
while (this.path[1].x < this.width + this.options.size) {
this.draw(this.path[0], this.path[1])
}
}
/**
* 绘制线
* @param start 起点
* @param end 终点
*/
draw(start: IRibbonPoint, end: IRibbonPoint) {
// 绘制当前点
this.ctx.beginPath()
this.ctx.moveTo(start.x, start.y)
this.ctx.lineTo(end.x, end.y)
const nextX = this.geneX(end.x)
const nextY = this.geneY(end.y)
this.ctx.lineTo(nextX, nextY)
this.ctx.closePath()
// 随机生成颜色
const color = randomColor[this.colorIndex]
this.ctx.fillStyle = `${color[getRandomInt(color.length)]}`
// 根据当前样式填充路径
this.ctx.fill()
// 继续绘制下一个点
// 起点更新为当前终点
this.path[0] = this.path[1]
// 更新终点
this.path[1] = { x: nextX, y: nextY }
}
/**
* 生成下一个x坐标
* @param x 当前x坐标
*/
geneX(x: number) {
// 当前坐标向上平移
return x + this.options.size
}
/**
* 生成下一个y坐标
* @param y 当前y坐标
*/
geneY(y: number) {
// 当前坐标向右平移
const temp = y + (random() * 2 - 1.1) * this.options.size
return (temp > this.height || temp < 0) ? this.height : temp
}
/**
* 清除画布
*/
clear() {
this.canvas.remove()
}
}

345
src/utils/blog/timeCanvas.ts Normal file
View File

@@ -0,0 +1,345 @@
const timeColors = ['#33B5E5', '#0099CC', '#AA66CC', '#9933CC', '#99CC00', '#669900', '#FFBB33', '#FF8800', '#FF4444', '#CC0000']
const timeDigits = [
[
[0, 0, 1, 1, 1, 0, 0],
[0, 1, 1, 0, 1, 1, 0],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[0, 1, 1, 0, 1, 1, 0],
[0, 0, 1, 1, 1, 0, 0]
], // 0
[
[0, 0, 0, 1, 1, 0, 0],
[0, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[1, 1, 1, 1, 1, 1, 1]
], // 1
[
[0, 1, 1, 1, 1, 1, 0],
[1, 1, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 0],
[0, 1, 1, 0, 0, 0, 0],
[1, 1, 0, 0, 0, 0, 0],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 1, 1, 1, 1, 1]
], // 2
[
[1, 1, 1, 1, 1, 1, 1],
[0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[0, 1, 1, 1, 1, 1, 0]
], // 3
[
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 0, 1, 1, 1, 0],
[0, 0, 1, 1, 1, 1, 0],
[0, 1, 1, 0, 1, 1, 0],
[1, 1, 0, 0, 1, 1, 0],
[1, 1, 1, 1, 1, 1, 1],
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 0, 1, 1, 1, 1]
], // 4
[
[1, 1, 1, 1, 1, 1, 1],
[1, 1, 0, 0, 0, 0, 0],
[1, 1, 0, 0, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 0],
[0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[0, 1, 1, 1, 1, 1, 0]
], // 5
[
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 1, 1, 0, 0, 0],
[0, 1, 1, 0, 0, 0, 0],
[1, 1, 0, 0, 0, 0, 0],
[1, 1, 0, 1, 1, 1, 0],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[0, 1, 1, 1, 1, 1, 0]
], // 6
[
[1, 1, 1, 1, 1, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0]
], // 7
[
[0, 1, 1, 1, 1, 1, 0],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[0, 1, 1, 1, 1, 1, 0],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[0, 1, 1, 1, 1, 1, 0]
], // 8
[
[0, 1, 1, 1, 1, 1, 0],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[0, 1, 1, 1, 0, 1, 1],
[0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 1, 1, 0, 0, 0, 0]
], // 9
[
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 1, 1, 0],
[0, 1, 1, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 1, 1, 0],
[0, 1, 1, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
]// :
]
interface ITimeCanvasNum {
num: number;
offsetX: number;
offsetY: number;
}
interface ITimeCanvasBall {
offsetX: number;
offsetY: number;
color: string;
g: number;
vx: number;
vy: number;
}
export class TimeCanvas {
context: CanvasRenderingContext2D
width: number
height: number
options: {
RADIUS: number; // 球半径
NUMBER_GAP: number; // 数字之间的间隙
u: number; // 碰撞能量损耗系数
timeColor: string; // 时间颜色
colors: string[]; // 彩色小球的颜色
digit: any[]; // 数字显示
offsetX: number; // 初始x偏移
offsetY: number; // 初始y偏移
}
currentNums: ITimeCanvasNum[] = [] // 屏幕显示的8个字符
balls: ITimeCanvasBall[] = [] // 存储彩色的小球
constructor(context: CanvasRenderingContext2D, width: number, height: number) {
this.context = context
this.width = width
this.height = height
this.options = {
RADIUS: 1.2, // 球半径
NUMBER_GAP: 10, // 数字之间的间隙
u: 0.4, // 碰撞能量损耗系数
timeColor: '#1677FF',
colors: timeColors, // 彩色小球的颜色
digit: timeDigits, // 数字显示
offsetX: 0,
offsetY: 10
}
}
/**
* 绘制时间
*/
drawDatetime(): void {
// 计算需要显示的时间数字信息
const timeNums = [] as ITimeCanvasNum[]
const date = new Date()
const hours = date.getHours()
const hour1 = Math.floor(hours / 10)
const hour2 = hours % 10
timeNums.push({ num: hour1, offsetX: 0, offsetY: 0 })
timeNums.push({ num: hour2, offsetX: 0, offsetY: 0 })
// 添加冒号 下同
timeNums.push({ num: 10, offsetX: 0, offsetY: 0 })
const minutes = date.getMinutes()
const minute1 = Math.floor(minutes / 10)
const minute2 = minutes % 10
timeNums.push({ num: minute1, offsetX: 0, offsetY: 0 })
timeNums.push({ num: minute2, offsetX: 0, offsetY: 0 })
timeNums.push({ num: 10, offsetX: 0, offsetY: 0 })
const seconds = date.getSeconds()
const second1 = Math.floor(seconds / 10)
const second2 = seconds % 10
timeNums.push({ num: second1, offsetX: 0, offsetY: 0 })
timeNums.push({ num: second2, offsetX: 0, offsetY: 0 })
// canvas绘制时的初始x偏移
let { offsetX } = this.options
// canvas绘制时的初始y偏移
const { offsetY } = this.options
for (let x = 0; x < timeNums.length; x++) {
timeNums[x].offsetX = offsetX
timeNums[x].offsetY = offsetY
offsetX = this.drawSingleNumber(timeNums[x])
// 两个数字连一块，应该间隔一些距离
if (x < timeNums.length - 1) {
offsetX += this.options.NUMBER_GAP
}
}
// 第一次绘制
if (this.currentNums.length === 0) {
this.currentNums = timeNums
} else {
// 后续绘制时 替换不同的部分 并添加爆炸小球
for (let index = 0; index < this.currentNums.length; index++) {
if (this.currentNums[index].num !== timeNums[index].num) {
// 不一样时，添加彩色小球
// this.addBalls(timeNums[index])
this.currentNums[index].num = timeNums[index].num
}
}
}
// 渲染小球
// this.renderBalls()
// 更新小球
// this.updateBalls()
}
/**
* 添加小球
* @param item 小球数字
*/
addBalls(item: ITimeCanvasNum) {
const { num, offsetX } = item
const numMatrix = this.options.digit[num]
for (let y = 0; y < numMatrix.length; y++) {
for (let x = 0; x < numMatrix[y].length; x++) {
if (numMatrix[y][x] === 1) {
const ball: ITimeCanvasBall = {
offsetX: offsetX + this.options.RADIUS + this.options.RADIUS * 2 * x,
offsetY: this.options.offsetY + this.options.RADIUS + this.options.RADIUS * 2 * y,
color: this.options.colors[Math.floor(Math.random() * this.options.colors.length)],
g: 1.5 + Math.random(),
vx: Math.pow(-1, Math.ceil(Math.random() * 10)) * 4 + Math.random(),
vy: -5
}
this.balls.push(ball)
}
}
}
}
/**
* 渲染小球
*/
renderBalls() {
for (let index = 0; index < this.balls.length; index++) {
const ball = this.balls[index]
this.context.beginPath()
this.context.fillStyle = this.balls[index].color
this.context.arc(ball.offsetX, ball.offsetY, this.options.RADIUS, 0, 2 * Math.PI)
this.context.fill()
}
}
/**
* 更新小球
*/
updateBalls() {
let i = 0
const radius = this.options.RADIUS
for (let index = 0; index < this.balls.length; index++) {
const ball = this.balls[index]
ball.offsetX += ball.vx
ball.offsetY += ball.vy
ball.vy += ball.g
if (ball.offsetY > (this.height - radius)) {
ball.offsetY = this.height - radius
ball.vy = -ball.vy * this.options.u
}
if (ball.offsetX > radius && ball.offsetX < (this.width - radius)) {
this.balls[i] = this.balls[index]
i++
}
}
// 去除出边界的球
for (;i < this.balls.length; i++) {
this.balls.pop()
}
// 防止切换至其他窗口 仍然在生成粒子
if (this.balls.length > 100) {
this.balls = []
}
}
/**
* 获取单个数字
* @param timeNums 数字
*/
drawSingleNumber(timeNums: ITimeCanvasNum): number {
const numMatrix = this.options.digit[timeNums.num]
const radius = this.options.RADIUS
for (let y = 0; y < numMatrix.length; y++) {
for (let x = 0; x < numMatrix[y].length; x++) {
if (numMatrix[y][x] === 1) {
this.context.beginPath()
const arcX = timeNums.offsetX + radius + radius * 2 * x
const arcY = timeNums.offsetY + radius + radius * 2 * y
this.context.arc(arcX, arcY, radius, 0, 2 * Math.PI)
this.context.fill()
this.context.fillStyle = this.options.timeColor
}
}
}
this.context.beginPath()
timeNums.offsetX += numMatrix[0].length * radius * 2
return timeNums.offsetX as number
}
}

27
src/utils/echats/billCharts.ts Normal file
View File

@@ -0,0 +1,27 @@
export const billRateChartOption = (value: number, color: string) => {
return {
series: [
{
type: 'liquidFill',
center: ['50%', '50%'],
radius: '90%',
data: [
{
value,
itemStyle: { color }
}
],
label: {
fontSize: 14
},
outline: {
show: false
},
backgroundStyle: {
color: 'white',
shadowBlur: 3
}
}
]
}
}

38
src/utils/echats/foodCharts.ts Normal file
View File

@@ -0,0 +1,38 @@
import { commonTitle, commonGrid, emptyGraphic } from 'vue3-common/utils/eChartsUtil'
export const foodWorkChartOption = (datasetSource: string[][]) => {
return {
title: commonTitle('📊成果统计'),
graphic: emptyGraphic(datasetSource.length),
grid: commonGrid,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
dataset: {
source: datasetSource
},
xAxis: { type: 'category' },
yAxis: {},
series: [
{
type: 'bar',
barWidth: '20%',
label: {
show: true,
position: 'top'
}
},
{
type: 'bar',
barWidth: '20%',
label: {
show: true,
position: 'top'
}
}]
}
}

373
src/utils/element/elRules.ts Normal file
View File

@@ -0,0 +1,373 @@
export const chinesePattern = /^[\u4e00-\u9fa5a-zA-Z0-9]+$/
export const amountPattern = /^\d+(\.?\d{1,2})?$/
export const phonePattern = /^1[3-9]\d{9}$/
export const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
export const blogRules = {
title: [
{ required: true, message: '请输入博客标题', trigger: 'change' }
],
category: [
{ required: true, message: '请输入或选择博客分类', trigger: 'change' },
// { pattern: new RegExp(chinesePattern), message: '请输入中英文或数字' },
{ min: 1, max: 10, message: '请输入10字以内的类别', trigger: 'blur' }]
}
export const loginRules = {
username: [
{ required: true, message: '请输入账号', trigger: 'blur' },
{ pattern: /^[0-9a-zA-Z]+$/, message: '请输入正确的格式: 数字或英文字母', trigger: ['blur'] }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ pattern: /^[0-9a-zA-Z]+$/, message: '请输入正确的格式: 数字或英文字母', trigger: ['blur'] }
],
phoneNumber: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: phonePattern, message: '请输入正确的手机号格式', trigger: ['blur'] }
],
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ pattern: emailPattern, message: '请输入正确的邮箱格式', trigger: ['blur'] }
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ pattern: /^\d{6}$/, message: '请输入6位数字验证码', trigger: ['blur'] }
]
}
export const billRecordRules = {
bookName: [
{ required: true, message: '请选择账本类型', trigger: 'change' }
],
type: [
{ required: true, message: '请选择账单类别', trigger: 'change' }
],
category: [
{ required: true, message: '请选择账单分类', trigger: 'change' }
],
date: [
{ required: true, message: '请选择账单时间', trigger: 'change' }
],
payAccount: [
{ required: true, message: '请选择账单账户', trigger: 'change' }
],
amount: [
{ required: true, message: '请输入账单金额', trigger: 'change' },
{ pattern: new RegExp(amountPattern), message: '请输入正确的金额（最多两位小数）' }
],
location: [
],
content: [
{ required: true, message: '请输入账单内容', trigger: 'change' }
]
}
export const billPayRules = {
name: [
{ required: true, message: '请输入账户名称', trigger: 'blur' },
{ pattern: new RegExp(chinesePattern), message: '请输入中英文或数字' }
],
icon: [
{ required: true, message: '请输入账户图标', trigger: 'blur' }
],
color: [
{ required: true, message: '请输入图标颜色', trigger: 'change' }
]
}
export const billBookRules = {
name: [
{ required: true, message: '请输入账本名称', trigger: 'blur' },
{ pattern: new RegExp(chinesePattern), message: '请输入中英文或数字' }
],
icon: [
{ required: true, message: '请输入账本图标', trigger: 'blur' }
],
color: [
{ required: true, message: '请输入图标颜色', trigger: 'change' }
]
}
export const billCategoryRules = {
bookName: [
{ required: true, message: '请选择账本类型', trigger: 'change' }
],
name: [
{ required: true, message: '请输入类别名称', trigger: 'blur' },
{ pattern: new RegExp(chinesePattern), message: '请输入中英文或数字' }
],
type: [
{ required: true, message: '请选择类型名称', trigger: 'change' }
],
icon: [
{ required: true, message: '请输入类别图标', trigger: 'blur' }
],
color: [
{ required: true, message: '请输入图标颜色', trigger: 'change' }
]
}
export const budgetRules = {
category: [
{ required: true, message: '请输入或选择预算类别', trigger: 'blur' },
{ pattern: new RegExp(chinesePattern), message: '请输入中英文或数字' }
],
project: [
{ required: true, message: '请输入预算项目', trigger: 'blur' },
{ pattern: new RegExp(chinesePattern), message: '请输入中英文或数字' }
],
content: [
{ required: true, message: '请输入预算内容', trigger: 'blur' },
{ pattern: new RegExp(chinesePattern), message: '请输入中英文或数字' }
],
vendor: [
{ pattern: new RegExp(chinesePattern), message: '请输入中英文或数字' }
],
budget: [
{ pattern: new RegExp(amountPattern), message: '请输入正确的金额（最多两位小数）' }
],
actual: [
{ pattern: new RegExp(amountPattern), message: '请输入正确的金额（最多两位小数）' }
],
remake: [
{ pattern: new RegExp(chinesePattern), message: '请输入中英文或数字' }
]
}
export const foodRules = {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
{ pattern: new RegExp(chinesePattern), message: '请输入中英文或数字' }
],
category: [
{ required: true, message: '请选择菜系', trigger: 'change' }
]
}
export const foodMaterialRules = {
type: [
{ required: true, message: '请选择类型', trigger: 'change' }
],
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
amount: [
{ required: true, message: '请输入分量', trigger: 'blur' }
]
}
export const foodStepRules = {
content: [
{ required: true, message: '请输入内容', trigger: 'blur' }
]
}
export const foodRecordRules = {
name: [
{ required: true, message: '请选择菜谱名称', trigger: 'change' }
],
date: [
{ required: true, message: '请选择完成时间', trigger: 'change' }
],
person: [
{ required: true, message: '请选择完成人', trigger: 'change' }
]
}
export const travelRules = {
area: [
{ required: true, message: '请选择景点地区', trigger: 'change' }
],
name: [
{ required: true, message: '请输入景点名称', trigger: 'change' },
{ pattern: new RegExp(chinesePattern), message: '请输入中英文或数字' }
],
address: [
{ pattern: new RegExp(chinesePattern), message: '请输入中英文或数字' }
],
price: [
{ pattern: new RegExp(amountPattern), message: '请输入正确的金额（最多两位小数）' }
]
}
export const travelRecordRules = {
name: [
{ required: true, message: '请选择景点名称', trigger: 'change' }
],
date: [
{ required: true, message: '请选择旅行日期', trigger: 'change' }
],
persons: [
{ required: true, message: '请输入旅行人', trigger: 'blur' }
]
}
export const planRules = {
title: [
{ required: true, message: '请输入标题', trigger: 'blur' }
],
email: [
{ pattern: emailPattern, message: '请输入正确的邮箱格式', trigger: ['blur'] }
]
}
export const anniversaryRules = {
title: [
{ required: true, message: '请输入标题', trigger: 'blur' }
],
date: [
{ required: true, message: '请选择日期', trigger: 'change' }
],
recurring: [
{ required: true, message: '请选择是否重复', trigger: 'change' }
],
type: [
{ required: true, message: '请选择类型', trigger: 'change' }
]
}
export const productRules = {
name: [
{ required: true, message: '请输入物品名称', trigger: 'blur' }
],
price: [
{ required: true, message: '请输入物品价格', trigger: 'change' }
],
purchaseDate: [
{ required: true, message: '请选择购买日期', trigger: 'change' }
],
purchaser: [
{ required: true, message: '请选择购买人', trigger: 'change' }
]
}
export const journalRules = {
content: [
{ required: true, message: '请输入内容', trigger: 'blur' }
],
date: [
{ required: true, message: '请选择日期', trigger: 'change' }
]
}
export const kpiRules = {
patientName: [
{ required: true, message: '请输入患者名称', trigger: 'blur' }
],
date: [
{ required: true, message: '请选择日期', trigger: 'change' }
],
project: [
{ required: true, message: '请输入项目', trigger: 'change' }
],
price: [
{ required: true, message: '请选择价格', trigger: 'change' }
]
}
export const assetRules = {
category: [
{ required: true, message: '请选择类型', trigger: 'change' }
],
name: [
{ required: true, message: '请输入/选择名称', trigger: 'change' },
{ pattern: new RegExp(chinesePattern), message: '请输入中英文或数字' }
],
owner: [
{ required: true, message: '请选择所属人', trigger: 'change' }
],
amount: [
{ required: true, message: '请输入金额', trigger: 'change' },
{ pattern: new RegExp(amountPattern), message: '请输入正确的金额（最多两位小数）' }
]
}
export const ledgerRules = {
book: [
{ required: true, message: '请输入账本名称', trigger: 'blur' }
],
category: [
{ required: true, message: '请输入类别', trigger: 'blur' }
],
content: [
{ required: true, message: '请输入内容', trigger: 'blur' }
],
price: [
{ required: true, message: '请输入金额', trigger: 'change' },
{ pattern: new RegExp(amountPattern), message: '请输入正确的金额（最多两位小数）' }
],
number: [
{ required: true, message: '请输入数量', trigger: 'blur' }
],
unit: [
{ required: true, message: '请输入单位', trigger: 'blur' }
],
payer: [
{ required: true, message: '请输入付款人', trigger: 'blur' }
]
}
export const passwordRules = {
title: [
{ required: true, message: '请输入标题', trigger: 'blur' }
],
username: [
{ required: true, message: '请输入账号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
owner: [
{ required: true, message: '请选择所属人', trigger: 'change' }
]
}
export const accountRules = {
accountName: [
{ required: true, message: '请输入账号名称', trigger: 'blur' }
],
username: [
{ required: true, message: '请输入用户姓名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入账号密码', trigger: 'blur' },
{ min: 6, max: 20, message: '请输入6~20位的密码', trigger: 'change' }
],
confirmPassword: [
{ required: true, message: '请输入确认密码', trigger: 'blur' },
{ min: 6, max: 20, message: '请输入6~20位的密码', trigger: 'change' }
]
}
export const profileInfoRules = {
username: [
{ required: true, message: '请输入用户姓名', trigger: 'blur' }
],
phoneNumber: [
{ pattern: phonePattern, message: '请输入正确的手机号格式', trigger: ['blur'] }
],
email: [
{ pattern: emailPattern, message: '请输入正确的邮箱格式', trigger: ['blur'] }
]
}
export const profilePasswordRules = {
oldPassword: [
{ required: true, message: '请输入旧密码', trigger: 'blur' },
{ min: 6, max: 20, message: '请输入6~20位的密码', trigger: 'change' }
],
newPassword: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ min: 6, max: 20, message: '请输入6~20位的密码', trigger: 'change' }
],
confirmPassword: [
{ required: true, message: '请输入确认密码', trigger: 'blur' },
{ min: 6, max: 20, message: '请输入6~20位的密码', trigger: 'change' }
]
}

38
src/utils/home/anniversaryUtil.ts Normal file
View File

@@ -0,0 +1,38 @@
import axios from 'axios'
import { IAnniversary, IAnniversaryCategory } from '@/types/anniversary'
import dayjs from 'dayjs'
import { formatDate, getDateDifference, isBeforeDate } from 'vue3-common/utils/dateUtil'
export const anniversaryCategoryMap: Map<string, IAnniversaryCategory> = new Map([
['生活', { name: '生活', title: '🏡 生活', subTitle: '点滴生活，值得铭记', color: '#E6C200' }],
['工作', { name: '工作', title: '💼 工作', subTitle: '见证成长，每步精彩', color: '#007BFF' }],
['家庭', { name: '家庭', title: '👨‍👩‍👧‍👦 家庭', subTitle: '家人陪伴，温暖常在', color: '#FF5733' }],
['成就', { name: '成就', title: '🏆 成就', subTitle: '记录辉煌，见证成长', color: '#28A745' }],
['爱情', { name: '爱情', title: '💖 爱情', subTitle: '铭记心动，珍藏爱意', color: '#FF69B4' }],
['生日', { name: '生日', title: '🎂 生日', subTitle: '记录成长，珍藏祝福', color: '#FF9900' }],
['旅行', { name: '旅行', title: '✈️ 旅行', subTitle: '探索世界，留下足迹', color: '#32CD32' }],
['宠物', { name: '宠物', title: '🐾 宠物', subTitle: '陪伴成长，忠实伙伴', color: '#D2691E' }]
])
export const getHolidays = async () => {
const year = new Date().getFullYear()
const countryCode = 'CN'
const apiUrl = `https://date.nager.at/api/v3/PublicHolidays/${year}/${countryCode}`
const response = await axios.get(apiUrl)
return response.data
}
export const getAnniversaryRemainDays = (dateItem: IAnniversary): number => {
if (dateItem.type === 'countUp') {
return getDateDifference(dateItem.date, formatDate(new Date()), 'days')
} else if (dateItem.recurring) {
const currentYear = new Date().getFullYear()
let thisYear = dayjs(`${currentYear}-${dateItem.date.slice(5)}`)
if (isBeforeDate(thisYear, formatDate(new Date()))) {
thisYear = thisYear.add(1, 'year')
}
return Math.abs(getDateDifference(thisYear, formatDate(new Date()), 'days'))
} else {
return Math.abs(getDateDifference(dateItem.date, formatDate(new Date()), 'days'))
}
}

115
src/utils/home/billUtil.ts Normal file
View File

@@ -0,0 +1,115 @@
import {
IBillCalendarDaily,
IBillCategory,
IBillRecord,
IBillSummaryStats, IBillType
} from '@/types/bill'
import { formatDate } from 'vue3-common/utils/dateUtil'
/**
* 获取日程日期
* @param billRecordList 账单记录
* @param type 账单类型
*/
export const getCalendarDateList = (billRecordList: IBillRecord[], type: 'expensive' | 'income'): string[] => {
const resultSet = new Set()
billRecordList.forEach((item) => {
if (item.type === type) {
resultSet.add(formatDate(item.date))
}
})
return [...resultSet] as string[]
}
/**
* 获取日程日期
* @param billRecordList 账单记录
* @param date 日期
*/
export const getCalendarDailyCount = (billRecordList: IBillRecord[],
date: string): IBillCalendarDaily => {
const calendarDaily: IBillCalendarDaily = {
dailyRecordList: [],
totalExpensive: 0,
totalIncome: 0
}
billRecordList.forEach((value) => {
// 判断是否是当前日期
if (formatDate(value.date) === date) {
calendarDaily.dailyRecordList.push(value)
// 统计当前日期的收入和支出总和
if (value.type === 'expensive') {
calendarDaily.totalExpensive += value.amount
} else {
calendarDaily.totalIncome += value.amount
}
}
})
return calendarDaily
}
/**
* 计算账单概要统计
* @param billRecordList 账单记录
*/
export const getBillSummaryStats = (billRecordList: IBillRecord[]): IBillSummaryStats => {
const billSummaryStats: IBillSummaryStats = {
balance: 0,
expensive: 0,
income: 0,
rate: 0
}
billRecordList.forEach((value) => {
// 统计当前日期的支出和收入总和
if (value.type === 'expensive') {
billSummaryStats.expensive += value.amount
} else {
billSummaryStats.income += value.amount
}
})
billSummaryStats.balance = billSummaryStats.income - billSummaryStats.expensive
// 计算支出/收入
if (billSummaryStats.expensive === 0) {
billSummaryStats.rate = 0
} else if (billSummaryStats.income === 0) {
billSummaryStats.rate = 1
} else {
billSummaryStats.rate = Math.min(billSummaryStats.expensive / billSummaryStats.income, 1)
}
return billSummaryStats
}
export const getCategoryByName = (categoryList: IBillCategory[], name: string): IBillCategory => {
return categoryList.find((item) => item.name === name) || {
bookName: '',
name: '',
type: '',
icon: ''
}
}
export const getBillSortByAmount = (billRecordList: IBillRecord[],
billType: IBillType): IBillRecord[] => {
return billRecordList.filter((item) => item.type === billType)
.sort((a, b) => b.amount - a.amount)
}
/**
* 根据值显示不同的颜色
*/
export const getRateColor = (rate: number) => {
if (rate <= 0.3) {
return '#008B8B'
} else if (rate > 0.3 && rate <= 0.6) {
return '#FFA500'
} else {
return '#CD4F39'
}
}

197
src/utils/home/planUtil.ts Normal file
View File

@@ -0,0 +1,197 @@
import dayjs from 'dayjs'
import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
/**
* 日程配置参数
*/
export const calendarConfig = {
height: 'auto',
slotMinTime: '08:00',
slotMaxTime: '18:00',
allDaySlot: false,
firstDay: (new Date()).getDay(),
initialDate: new Date(),
buttonText: {
today: '今天',
month: '月视图',
week: '周视图',
day: '日视图',
list: '列表视图'
},
locale: 'zh-cn',
slotLabelFormat: {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
meridiem: false,
hour12: false
},
/**
* 月视图 每天最多显示几个事件
*/
dayMaxEventRows: 3,
/**
* 自定义标题模板
* @param arg
*/
// eventContent(arg) {
// return { html: `<div>${arg.event.title}</div>` }
// },
editable: true,
selectable: true,
/**
* 禁止拖动
*/
eventStartEditable: false,
/**
* 禁止拖动资源
*/
eventResourceEditable: false
}
/**
* 初始化普通视图日程
* @param element 挂载元素
* @param select 日期选择事件
* @param eventClick 事件点击
* @param updateDateEvent 更新日期事件
*/
export const initCommonCalendar = (element: HTMLElement,
select: Function,
eventClick: Function,
updateDateEvent: Function) => {
const { height, slotMinTime, slotMaxTime, allDaySlot, firstDay, initialDate, buttonText,
locale, dayMaxEventRows, editable, selectable, eventStartEditable } = calendarConfig
const plugins = [dayGridPlugin, interactionPlugin, timeGridPlugin]
const initialView = 'dayGridMonth'
const headerToolbar = {
left: 'timeGridDay,timeGridWeek,dayGridMonth',
center: 'title',
right: 'prev,today,next'
}
return new Calendar(element, {
height,
plugins,
initialView,
slotMinTime,
slotMaxTime,
allDaySlot,
firstDay,
initialDate,
headerToolbar,
buttonText,
locale,
slotLabelFormat: {
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false
},
dayMaxEventRows,
editable,
selectable,
eventStartEditable,
select,
eventClick,
datesSet: updateDateEvent
})
}
export const initMobileCalendar = (element: HTMLElement,
select: Function,
eventClick: Function,
updateDateEvent: Function) => {
const { height, slotMinTime, slotMaxTime, allDaySlot, firstDay, initialDate, buttonText,
locale, dayMaxEventRows, editable, selectable, eventStartEditable } = calendarConfig
const plugins = [dayGridPlugin, interactionPlugin, timeGridPlugin]
const initialView = 'weekView'
const headerToolbar = {
left: 'dayView,weekView',
center: 'title',
right: 'prev,today,next'
}
return new Calendar(element, {
height,
plugins,
initialView,
views: {
dayView: {
type: 'timeGrid',
buttonText: '日'
},
weekView: {
type: 'timeGrid',
duration: { days: 4 },
buttonText: '周'
}
},
slotMinTime,
slotMaxTime,
allDaySlot,
firstDay,
initialDate,
headerToolbar,
buttonText,
locale,
slotLabelFormat: {
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false
},
dayMaxEventRows,
editable,
selectable,
eventStartEditable,
select,
eventClick,
datesSet: updateDateEvent
})
}
export const getRemainDays = (targetDate: string): string => {
const today = dayjs()
const target = dayjs(targetDate)
const totalDays = target.diff(today, 'days')
const isExpired = totalDays < 0
const isToday = totalDays === 0
const absTotalDays = Math.abs(totalDays)
// 计算年、月、周、天
const years = Math.floor(absTotalDays / 365)
const months = Math.floor((absTotalDays % 365) / 30)
const weeks = Math.floor((absTotalDays % 30) / 7)
const days = absTotalDays % 7
// 根据不同情况返回不同的结果
let result = ''
if (isToday) {
result = '今天到期'
} else {
const type = isExpired ? '过期' : '剩余'
result = `${type}: `
if (years > 0) result += `${years}年 `
if (months > 0) result += `${months}个月 `
if (weeks > 0) result += `${weeks}周 `
if (days > 0) result += `${days}天`
}
return result.trim()
}
export const isBeforeToday = (targetDate: string) => {
return dayjs(targetDate).isBefore(dayjs(), 'day')
}
export const isBeforeTime = (startTime: string, endTime: string) => {
return dayjs(startTime, 'HH:mm').isBefore(dayjs(endTime, 'HH:mm'))
}

7
src/utils/home/travelUtil.ts Normal file
View File

@@ -0,0 +1,7 @@
export const parsePerson = (persons: string[]): string => {
if (persons.length === 1) {
return persons[0]
} else {
return `${persons[0]}等`
}
}

41
src/utils/index.ts Normal file
View File

@@ -0,0 +1,41 @@
/**
* 设置激活样式
* @param parentClassName 父组件类名
* @param elementTag 元素类型
* @param currentElement 当前元素
* @param activeClassName 激活的样式名称
*/
export const setActiveClass = (parentClassName: string, elementTag: string,
currentElement: Element, activeClassName: string) => {
const container = document.getElementsByClassName(parentClassName)[0]
const elementList = container.getElementsByTagName(elementTag)
// 去除class样式
for (let i = 0; i < elementList.length; i++) {
elementList[i].removeAttribute('class')
}
// 增加当前激活的菜单样式
currentElement.setAttribute('class', activeClassName)
}
/**
* 文件服务器地址
*/
export const fileServiceUrl = '/home-service/file'
/**
* 服务器文件路径根地址
*/
export const serviceFileRootPath = '/home-service/'
/**
* 获取assets静态资源
* @param url 路径
*/
export const getAssetsImageFile = (url: string) => {
return new URL(`/src/assets/${url}`, import.meta.url).href
}
export const isLargeScreen = (innerWidth = 1200): boolean => {
return window.innerWidth > innerWidth
}

109
src/views/article/article.vue Normal file
View File

@@ -0,0 +1,109 @@
<template>
<div class="admin-module">
<div class="button-container">
<el-button type="primary" @click="addNewBlogClick">新增文章</el-button>
</div>
<el-table
:data="blogStore.blogList"
border stripe
:header-cell-style="tableHeaderStyle()"
:cell-style="tableCellStyle()"
:row-style="tableRowStyle()"
class="card-item">
<el-table-column type="index" align="center" width="50" />
<el-table-column prop="title" label="标题" align="center" min-width="10%"/>
<el-table-column prop="category" label="类别" align="center" min-width="10%" />
<el-table-column label="精品" align="center" min-width="10%">
<template #default="scope">
<el-tag type="success" v-if="scope.row.isGreat">是</el-tag>
<el-tag type="danger" v-else>否</el-tag>
</template>
</el-table-column>
<el-table-column label="置顶" align="center" min-width="10%">
<template #default="scope">
<el-tag type="success" v-if="scope.row.topValue > 1">是</el-tag>
<el-tag type="danger" v-else>否</el-tag>
</template>
</el-table-column>
<el-table-column prop="wordCount" label="字数" align="center" min-width="10%" />
<el-table-column prop="visitCount" label="阅读次数" align="center" min-width="10%" />
<el-table-column fixed="right" label="操作" align="center" width="250">
<template #default="scope">
<el-button type="primary" @click="previewBlogClick(scope.row)">预览</el-button>
<el-button type="primary" @click="editBlogClick(scope.row)">编辑</el-button>
<el-button type="danger" @click="deleteBlogClick(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:current-page="blogStore.adminPageInfo.currentPage"
:page-size="blogStore.adminPageInfo.pageSize"
:total="blogStore.adminPageInfo.totalSize"
layout="total, prev, pager, next"
@change="changePageClick"
/>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import { useBlogStore } from '@/store/blog.ts'
import { IBlog } from '@/types/blog.ts'
import { commonElMessageBox, tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
import { useRouter } from 'vue-router'
const router = useRouter()
const blogStore = useBlogStore()
onMounted(async () => {
await blogStore.queryAdminBlog()
})
/**
* 点击切换博客页数按钮
* @param page 页码
* @param pageSize 每页大小
*/
const changePageClick = async (page: number, pageSize: number) => {
blogStore.adminPageInfo.currentPage = page
blogStore.adminPageInfo.pageSize = pageSize
await blogStore.queryAdminBlog()
}
/**
* 点击新增博客按钮
*/
const addNewBlogClick = () => {
router.push({ name: 'AdminBlogDetailId', params: { id: 0 } })
}
/**
* 点击预览博客按钮
* @param blog 博客
*/
const previewBlogClick = async (blog: IBlog) => {
await router.push({ name: 'AdminBlogPreviewId', params: { id: blog.id } })
}
/**
* 点击编辑博客按钮
* @param blog 博客
*/
const editBlogClick = async (blog: IBlog) => {
await router.push({ name: 'AdminBlogDetailId', params: { id: blog.id } })
}
/**
* 点击删除博客按钮
* @param blog 博客
*/
const deleteBlogClick = (blog: IBlog) => {
blogStore.blogApiType = 'DELETE'
commonElMessageBox('是否确认删除该博客?').then(() => {
blogStore.handleBlogApi(blog.id)
})
}
</script>

82
src/views/article/category.vue Normal file
View File

@@ -0,0 +1,82 @@
<template>
<div class="admin-module">
<div class="button-container">
<el-button type="primary" @click="addNewCategoryClick">新增类别</el-button>
</div>
<el-table
:data="blogStore.blogCategoryList"
border stripe
:header-cell-style="tableHeaderStyle()"
:cell-style="tableCellStyle()"
:row-style="tableRowStyle()"
style="width: 50%"
class="card-item">
<el-table-column type="index" align="center" width="50" />
<el-table-column prop="name" label="名称" align="center" min-width="10%"/>
<el-table-column prop="count" label="数量" align="center" min-width="10%" />
<el-table-column fixed="right" label="操作" align="center" width="200">
<template #default="scope">
<el-button type="primary" @click="editCategoryClick(scope.row)">编辑</el-button>
<el-button type="danger" @click="deleteCategoryClick(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import { useBlogStore } from '@/store/blog.ts'
import { IBlogCategory } from '@/types/blog.ts'
import { ElMessageBox } from 'element-plus'
import { tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
const blogStore = useBlogStore()
onMounted(async () => {
await blogStore.queryBlogCategory()
})
/**
* 点击新增类别按钮
*/
const addNewCategoryClick = () => {
ElMessageBox.prompt('请输入类别名称', '新增类别', {
confirmButtonText: '确认',
cancelButtonText: '取消',
inputPlaceholder: '请输入类别名称',
inputPattern: /^.{0,10}$/,
inputErrorMessage: '请输入10字以内的类别名称'
})
.then(({ value }) => {
console.log(value)
})
}
/**
* 点击编辑类别按钮
* @param category 类别
*/
const editCategoryClick = async (category: IBlogCategory) => {
ElMessageBox.prompt('请输入类别名称', '编辑类别', {
confirmButtonText: '确认',
cancelButtonText: '取消',
inputValue: category.name,
inputPlaceholder: '请输入类别名称',
inputPattern: /^.{0,10}$/,
inputErrorMessage: '请输入10字以内的类别名称'
})
.then(({ value }) => {
console.log(value)
})
}
/**
* 点击删除类别按钮
* @param category 类别
*/
const deleteCategoryClick = (category: IBlogCategory) => {
}
</script>

149
src/views/article/detail[id].vue Normal file
View File

@@ -0,0 +1,149 @@
<template>
<div class="admin-module admin-blog-detail">
<el-form ref="formRef" :model="blogStore.newBlog"
:inline="true" :rules="rules"
class="blog-form">
<el-form-item label="标题" name="title" prop="title">
<el-input v-model="blogStore.newBlog.title"
:maxlength="20" show-word-limit clearable
style="width: 300px"/>
</el-form-item>
<el-form-item label="分类" name="category" prop="category">
<el-select
v-model="blogStore.newBlog.category"
filterable allow-create placeholder="请选择分类" clearable
@focus="focusCategoryEvent" style="width: 150px">
<el-option
v-for="(value, index) in blogStore.blogCategoryList"
:key="index" :label="value.name" :value="value.name"/>
</el-select>
</el-form-item>
<el-form-item label="置顶值">
<el-input-number v-model="blogStore.newBlog.topValue"
:min="1" :max="10" style="width: 120px"/>
</el-form-item>
<el-form-item label="精品">
<el-switch v-model="blogStore.newBlog.isGreat"/>
</el-form-item>
</el-form>
<MdEditor v-model="blogStore.newBlog.content" @onUploadImg="onUploadImg"/>
<div class="button-container">
<el-button type="primary" @click="backClick">返回</el-button>
<el-button type="primary" @click="submitFormEvent">保存</el-button>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useBlogStore } from '@/store/blog.ts'
import { MdEditor } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { ElLoading, ElMessage, FormInstance, FormRules } from 'element-plus'
import { blogRules } from '@/utils/element/elRules.ts'
import { useRouter, useRoute } from 'vue-router'
import { validateBlogImage } from '@/utils/blog/blogUtil'
import { doUploadFile } from 'vue3-common/utils/fileUtil'
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
const rules = reactive<FormRules>(blogRules)
const formRef = ref<FormInstance>()
const route = useRoute()
const router = useRouter()
const blogStore = useBlogStore()
const focusCategoryEvent = async () => {
await blogStore.queryAdminBlogCategory()
}
onMounted(async () => {
await nextTick(() => {
formRef.value?.clearValidate()
})
const blogId = route.params.id as number
if (blogId > 0) {
blogStore.blogApiType = 'UPDATE'
await blogStore.queryAdminBlogById(route.params.id as number)
blogStore.newBlog = blogStore.currentBlog
} else {
blogStore.blogApiType = 'ADD'
blogStore.newBlog = blogStore.getEmptyBlog()
}
})
/**
* 校验博客
*/
const validateBlog = (): boolean => {
if (blogStore.newBlog.content === '') {
ElMessage.error('请输入博客内容')
return false
}
return true
}
/**
* 提交表单事件
*/
const submitFormEvent = () => {
// 表单校验
formRef.value?.validate().then(async () => {
if (validateBlog()) {
await blogStore.handleBlogApi()
await router.push('/admin/blog/article')
}
})
}
const onUploadImg = async (files: File[], callback) => {
const loading = ElLoading.service({
lock: true,
text: '正在上传图片 请等待',
background: 'rgba(0, 0, 0, 0.7)'
})
if (validateBlogImage(files)) {
const result = await doUploadFile(fileServiceUrl, files[0], blogStore.blogImagePath, false)
// 显示在markdown中
// 注意这里需要是数组的形式
const urlArray = []
urlArray.push({
url: `${serviceFileRootPath}${result.url.replace(/\\/g, '/')}`,
alt: '暂无图片',
title: files[0].name
})
callback(urlArray)
}
loading.close()
}
const backClick = () => {
router.push('/admin/blog/article')
}
</script>
<style lang="scss">
.admin-blog-detail {
position: relative;
@media (max-width: 1200px) {
.blog-form {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
.md-editor {
height: 80vh;
}
}
</style>

34
src/views/article/preview[id].vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="admin-module">
<h3>{{ blogStore.currentBlog.title }}</h3>
<MdPreview editorId="blog-id" v-model="blogStore.currentBlog.content"/>
<div class="button-container">
<el-button type="primary" @click="backClick">返回</el-button>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import { useBlogStore } from '@/store/blog.ts'
import { MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
const blogStore = useBlogStore()
onMounted(async () => {
const blogId = route.params.id as number
await blogStore.queryAdminBlogById(blogId)
blogStore.newBlog = blogStore.currentBlog
})
const backClick = () => {
router.push('/admin/blog/article')
}
</script>

13
src/views/dashboard/index.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div>
Dashboard
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
</style>

44
src/views/meta.ts Normal file
View File

@@ -0,0 +1,44 @@
import { IRouteMetaConfig } from 'vue3-common/types'
export const adminMeta: IRouteMetaConfig = {
'/dashboard': {
title: '总览',
icon: '',
order: 1,
redirect: '/dashboard/index'
},
'/dashboard/index': {
title: '',
icon: ''
},
'/article': {
title: '文章管理',
icon: '',
redirect: '/article/article'
},
'/article/article': {
title: '',
icon: ''
},
'/article/category': {
title: '',
icon: ''
},
'/article/detail/:id': {
title: '',
icon: ''
},
'/article/preview/:id': {
title: '',
icon: ''
},
'/monitor': {
title: '监控管理',
icon: '',
redirect: '/monitor/visit'
},
'/monitor/visit': {
title: '',
icon: ''
}
}

69
src/views/monitor/visit.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<div class="admin-module">
<el-table
:data="blogInfo.blogVisitList"
border stripe
:header-cell-style="tableHeaderStyle()"
:cell-style="tableCellStyle()"
:row-style="tableRowStyle()"
style="width: 100%"
class="card-item">
<el-table-column type="index" align="center" width="50" />
<el-table-column prop="ip" label="IP" align="center" min-width="10%"/>
<el-table-column prop="os" label="平台" align="center" min-width="10%" />
<el-table-column prop="browser" label="浏览器" align="center" min-width="10%" />
<el-table-column prop="uri" label="路径" align="center" min-width="10%" />
<el-table-column prop="title" label="博客标题" align="center" min-width="10%" />
<el-table-column prop="visitTime" label="访问时间" align="center" min-width="10%" />
</el-table>
<el-pagination
v-model:current-page="blogInfo.pageInfo.currentPage"
:page-size="blogInfo.pageInfo.pageSize"
:total="blogInfo.pageInfo.totalSize"
layout="total, prev, pager, next"
@change="changePageClick"
/>
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import { IBlogVisit } from '@/types/blog.ts'
import { queryBlogVisitApi } from '@/apis/blog.ts'
import { tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
const blogInfo = reactive({
blogVisitList: [] as IBlogVisit[],
pageInfo: {
currentPage: 1,
pageSize: 15,
totalSize: 1
}
})
onMounted(async () => {
await queryBlogVisit()
})
/**
* 切换页码
* @param page 当前页码
* @param pageSize 页码大小
*/
const changePageClick = async (page: number, pageSize: number) => {
blogInfo.pageInfo.currentPage = page
blogInfo.pageInfo.pageSize = pageSize
await queryBlogVisit()
}
/**
* 查看博客访问记录
*/
const queryBlogVisit = async () => {
const { currentPage, pageSize } = blogInfo.pageInfo
const result = await queryBlogVisitApi(currentPage, pageSize)
blogInfo.blogVisitList = result.records
blogInfo.pageInfo.totalSize = result.total
}
</script>

1
src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

23
tsconfig.app.json Normal file
View File

@@ -0,0 +1,23 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
// 设置 @ 路径
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
],
"vue3-common/*": ["node_modules/vue3-common/dist/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

7
tsconfig.json Normal file
View File

@@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

25
tsconfig.node.json Normal file
View File

@@ -0,0 +1,25 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}

46
vite.config.ts Normal file
View File

@@ -0,0 +1,46 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// const API_HOST = '14.103.235.151'
const API_HOST = '127.0.0.1'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]'
})
],
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "./src/styles/element/index.module.scss" as *;'
}
}
},
base: '/blog-admin/',
resolve: {
// 配置路径别名
alias: {
'@': path.resolve(__dirname, './src')
}
},
server: {
port: 5174,
// 服务器代理 服务器没有部署Nginx的情况下使用
proxy: {
'/blog-api': {
target: `http://${API_HOST}:8082`,
changeOrigin: true,
rewrite: (item) => item.replace(/^\/blog-api/, '')
}
}
}
})