Cxx0822/sweet-hut-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-06-22 21:01:49 +08:00
parent b9c18375f5
commit b4e0d8ebc2
13 changed files with 366 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/layout/mobile-home/TitleBar.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<div class="title-bar">
<div class="left-container">
<el-button v-if="appStore.isShowMobileBack"
type="info" :icon="Back" size="small"
circle color="#FFFFFF"
@click="goBackClick" />
<div v-else class="logo-container">
<img :src="getAssetsImageFile('logo/logo.png')" alt="暂无图片" class="logo"/>
<span>{{ appStore.appName }}</span>
</div>
</div>
<span class="title-container">{{ title }}</span>
<div class="right-container">
<svg-icon v-if="appStore.isWebSocket"
name="home-websocket" style="color: #FFFFFF;"></svg-icon>
<el-button type="info" :icon="Setting" size="small"
circle color="#FFFFFF" @click="openSettingClick"/>
<el-drawer
v-model="appStore.isShowSetting"
title="系统设置" :show-close="false"
size="50%" class="setting-drawer">
<mobile-setting />
</el-drawer>
</div>
</div>
</template>
<script lang="ts" setup>
import { SvgIcon } from 'vue3-common'
import MobileSetting from '@/components/Mobile/MobileSetting.vue'
import { Back } from '@element-plus/icons-vue'
import { Setting } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/store/app.ts'
import { computed } from 'vue'
import { getAssetsImageFile } from '@/utils'
const appStore = useAppStore()
const router = useRouter()
const title = computed(() => router.currentRoute.value.meta.title)
const goBackClick = () => {
appStore.isShowMobileBack = false
history.back()
}
const openSettingClick = () => {
appStore.isShowSetting = true
}
</script>
<style lang="scss">
.setting-drawer {
.el-drawer__header {
margin-bottom: 0;
}
}
</style>

58
src/layout/mobile-home/index.vue
View File

@@ -1,33 +1,6 @@
<template>
<section class="layout-mobile-home">
<div class="title-bar">
<div class="left-container">
<el-button v-if="appStore.isShowMobileBack"
type="info" :icon="Back" size="small"
circle color="#FFFFFF"
@click="goBackClick" />
<div v-else class="logo-container">
<img :src="getAssetsImageFile('logo/logo.png')" alt="暂无图片" class="logo"/>
<span>Sweet Hut</span>
</div>
</div>
<span class="title-container">{{ title }}</span>
<div class="right-container">
<svg-icon v-if="appStore.isWebSocket"
name="home-websocket" style="color: #FFFFFF;"></svg-icon>
<el-button type="info" :icon="Setting" size="small"
circle color="#FFFFFF" @click="openSettingClick"/>
<el-drawer
v-model="appStore.isShowSetting"
title="系统设置" :show-close="false"
size="50%" class="setting-drawer">
<mobile-setting />
</el-drawer>
</div>
</div>
<title-bar />
<router-view />
@@ -36,37 +9,10 @@
</template>
<script lang="ts" setup>
import { SvgIcon } from 'vue3-common'
import MobileSetting from '@/components/Mobile/MobileSetting.vue'
import { Back } from '@element-plus/icons-vue'
import { Setting } from '@element-plus/icons-vue'
import TitleBar from '@/layout/mobile-home/TitleBar.vue'
import TabBar from '@/layout/mobile-home/TabBar.vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/store/app.ts'
import { computed } from 'vue'
import { getAssetsImageFile } from '@/utils'
const appStore = useAppStore()
const router = useRouter()
const title = computed(() => router.currentRoute.value.meta.title)
const goBackClick = () => {
appStore.isShowMobileBack = false
history.back()
}
const openSettingClick = () => {
appStore.isShowSetting = true
}
</script>
<style lang="scss">
@use "@/styles/mobile.home.layout.module.scss";
.setting-drawer {
.el-drawer__header {
margin-bottom: 0;
}
}
</style>