MiniDay/hamster-blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 开发中...

Browse Source
This commit is contained in:
叁只仓鼠
2023-04-03 22:04:36 +08:00
parent f2981ace22
commit 8b9df58c29
11 changed files with 596 additions and 3876 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4261
blog-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
blog-frontend/package.json
View File

@@ -10,6 +10,7 @@
"type-check": "vue-tsc --noEmit" "type-check": "vue-tsc --noEmit"
}, },
"dependencies": { "dependencies": {
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12", "@wangeditor/editor-for-vue": "^5.1.12",
"axios": "^1.3.4", "axios": "^1.3.4",
"element-plus": "^2.2.32", "element-plus": "^2.2.32",

1
blog-frontend/src/api/index.ts
View File

@@ -1,3 +1,2 @@
export * from "./api.js"; export * from "./api.js";
export * from "./global-store.js"; export * from "./global-store.js";
export * from "@/swagger";

78
blog-frontend/src/components/BlogComponent.vue
View File

@@ -1,69 +1,75 @@
<script setup lang="ts"> <script setup lang="ts">
import router from '@/router'; import router from "@/router";
import type { BlogInfoResponseVO } from '@/swagger'; import type { BlogInfoResponseVO } from "@/swagger";
const props = defineProps<{ const props = defineProps<{
blog: BlogInfoResponseVO blog: BlogInfoResponseVO;
}>() }>();
function showBlog() { function showBlog() {
router.push("/blog/" + props.blog.id + "/read/") router.push("/blog/" + props.blog.id + "/read/");
} }
function showCreator() { function showCreator() {
console.log("showCreator") console.log("showCreator");
} }
function showUpdater() { function showUpdater() {
console.log("showUpdater") console.log("showUpdater");
} }
</script> </script>
<template> <template>
<el-card class="blog-card"> <el-card class="blog-card">
<template #header> <template #header>
<div class="blog-card-header"> <div class="blog-card-header">
<p @click="showBlog">{{ blog.title }}</p> <p @click="showBlog">{{ blog.title }}</p>
<p @click="showCreator"> <p @click="showCreator">
<el-avatar :size="24" src="/favicon.ico" /> <el-avatar :size="24" src="/favicon.ico" />
{{ blog.creator?.nickname + ' 发表于：' + blog.updateTime?.toLocaleString() }} {{
</p> blog.creator?.nickname +
</div> " 发表于：" +
</template> blog.updateTime?.toLocaleString()
<div class="blog-card-content" v-html="blog.content"> </div> }}
<div class="blog-card-footer"> </p>
<p @click="showUpdater"> </div>
<el-avatar :size="24" src="/favicon.ico" /> </template>
{{ blog.updater?.nickname + ' 最后修改于：' + blog.updateTime?.toLocaleString() }} <div class="blog-card-content" v-html="blog.content"></div>
</p> <div class="blog-card-footer">
</div> <p @click="showUpdater">
</el-card> <el-avatar :size="24" src="/favicon.ico" />
{{
blog.updater?.nickname +
" 最后修改于：" +
blog.updateTime?.toLocaleString()
}}
</p>
</div>
</el-card>
</template> </template>
<style scoped> <style scoped>
.blog-card { .blog-card {
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
} }
.blog-card-header { .blog-card-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.blog-card-header :hover { .blog-card-header :hover {
text-decoration: underline; text-decoration: underline;
} }
.blog-card-footer :hover { .blog-card-footer :hover {
text-decoration: underline; text-decoration: underline;
} }
.item { .item {
margin-bottom: 18px; margin-bottom: 18px;
} }
</style> </style>

8
blog-frontend/src/components/HeaderComponent.vue
View File

@@ -1,13 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { import { api, globalStore, siteSetting } from "@/api";
UserInfoResponseVORoleEnum,
api,
globalStore,
siteSetting,
} from "@/api";
import router from "@/router"; import router from "@/router";
import { UserInfoResponseVORoleEnum } from "@/swagger";
const menuIndex = ref<string>(document.location.pathname); const menuIndex = ref<string>(document.location.pathname);

4
blog-frontend/src/components/manage/SiteManageComponent.vue
View File

@@ -19,9 +19,9 @@ function changeSetting(id: string, content: string) {
} }
}); });
} }
function changeFooterHTML(htmlText: string) { function changeFooterHTML(htmlText: string) {
siteSetting.footer = htmlText; siteSetting.footer = htmlText;
changeSetting(siteSetting.keys.site.footer, htmlText); changeSetting(siteSetting.keys.site.footer, htmlText);
} }
@@ -29,8 +29,6 @@ function changeCustomCSS(cssText: string) {
let cssElement = document.getElementById("custom-css"); let cssElement = document.getElementById("custom-css");
siteSetting.css = cssText; siteSetting.css = cssText;
if (cssElement != null) cssElement.innerText = cssText; if (cssElement != null) cssElement.innerText = cssText;
// prettier
changeSetting(siteSetting.keys.site.css, cssText); changeSetting(siteSetting.keys.site.css, cssText);
} }
</script> </script>

58
blog-frontend/src/router/index.ts
View File

@@ -1,50 +1,50 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
routes: [ routes: [
{ {
path: '/', path: "/",
name: 'index', name: "index",
component: () => import('@/views/IndexView.vue') component: () => import("@/views/IndexView.vue"),
}, },
{ {
path: '/register', path: "/register",
name: 'register', name: "register",
component: () => import('@/views/RegisterView.vue') component: () => import("@/views/RegisterView.vue"),
}, },
{ {
path: '/login', path: "/login",
name: 'login', name: "login",
component: () => import('@/views/LoginView.vue') component: () => import("@/views/LoginView.vue"),
}, },
{ {
path: '/manage', path: "/manage",
name: 'manage', name: "manage",
component: () => import('@/views/ManagePaneView.vue') component: () => import("@/views/ManagePaneView.vue"),
}, },
{ {
path: '/tags', path: "/tags",
name: 'tags', name: "tags",
component: () => import('@/views/TagsView.vue') component: () => import("@/views/TagsView.vue"),
}, },
{ {
path: '/blog/:id', path: "/blog/:id",
name: 'blog', name: "blog",
children: [ children: [
{ {
path: 'read', path: "read",
name: 'read', name: "read",
component: () => import('@/views/BlogReadView.vue') component: () => import("@/views/BlogReadView.vue"),
}, },
{ {
path: 'edit', path: "edit",
name: 'edit', name: "edit",
component: () => import('@/views/BlogEditView.vue') component: () => import("@/views/BlogEditView.vue"),
} },
] ],
}, },
] ],
}) });
export default router export default router;

52
blog-frontend/src/views/BlogReadView.vue
View File

@@ -3,8 +3,8 @@ import { ref } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { api } from "@/api"; import { api } from "@/api";
import type { BlogInfoResponseVO } from "@/swagger";
import router from "@/router"; import router from "@/router";
import type { BlogInfoResponseVO } from "@/swagger";
const blogInfo = ref<BlogInfoResponseVO>(); const blogInfo = ref<BlogInfoResponseVO>();
@@ -16,24 +16,35 @@ if (blogID) {
}); });
} }
function edit() { function editBlog() {
router.push("/blog/" + blogID + "/edit/"); router.push("/blog/" + blogID + "/edit/");
} }
function deleteBlog() {
console.log("deleteBlog " + blogID);
}
</script> </script>
<template> <template>
<el-container class="blog-container"> <el-container class="blog-container">
<el-header class="blog-header"> <el-header class="blog-header">
<h1 class="blog-title">{{ blogInfo?.title }}</h1> <el-row :gutter="20">
<el-col :span="4">
<h1>{{ blogInfo?.creator?.nickname }}</h1>
</el-col>
<el-col :span="16">
<h1 class="blog-title">{{ blogInfo?.title }}</h1>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="editBlog">编辑</el-button>
<el-button type="danger" @click="deleteBlog">删除</el-button>
</el-col>
</el-row>
</el-header> </el-header>
<el-container> <el-main class="blog-main">
<el-aside width="200px" class="blog-aside"> <el-scrollbar class="blog-content" v-html="blogInfo?.content">
<el-button type="primary" @click="edit">编辑</el-button> </el-scrollbar>
</el-aside> </el-main>
<el-container>
<el-main v-html="blogInfo?.content"> </el-main>
</el-container>
</el-container>
</el-container> </el-container>
</template> </template>
@@ -46,25 +57,22 @@ function edit() {
} }
.blog-header { .blog-header {
background-color: aqua; padding-top: 10px;
height: auto; padding-bottom: 10px;
padding: 5px 0 5px 0; margin: 0;
text-align: center;
} }
.blog-title { .blog-title {
text-align: center;
font-size: xx-large; font-size: xx-large;
} }
.blog-aside {
border-width: 0 1px 0 0;
border-style: solid;
}
.blog-content { .blog-content {
height: 100%;
width: 100%;
} }
.flex-grow { .blog-main {
flex-grow: 1; width: 100%;
} }
</style> </style>

4
blog-frontend/src/views/IndexView.vue
View File

@@ -1,7 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive } from "vue"; import { reactive } from "vue";
import { api } from "@/api";
import BlogComponent from "@/components/BlogComponent.vue"; import BlogComponent from "@/components/BlogComponent.vue";
import { api, type BlogInfoResponseVO } from "@/api"; import type { BlogInfoResponseVO } from "@/swagger";
let page = 0; let page = 0;
const blogs = reactive<Array<BlogInfoResponseVO>>([]); const blogs = reactive<Array<BlogInfoResponseVO>>([]);

2
blog-frontend/src/views/LoginView.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive } from "vue"; import { reactive } from "vue";
import router from "@/router";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { api } from "@/api"; import { api } from "@/api";
import router from "@/router";
const form = reactive({ const form = reactive({
email: "", email: "",

3
blog-frontend/src/views/ManagePaneView.vue
View File

@@ -1,7 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import SiteManageComponent from "@/components/manage/SiteManageComponent.vue";
import { globalStore } from "@/api"; import { globalStore } from "@/api";
import SiteManageComponent from "@/components/manage/SiteManageComponent.vue";
const activeName = ref<string>("site"); const activeName = ref<string>("site");