Cxx0822/food-hub-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-23 22:42:01 +08:00
parent e09aed87d1
commit 4956c1822e
14 changed files with 184 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.ico" /> <link rel="icon" type="image/svg+xml" href="/logo.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>食光集</title> <title>食光集</title>
</head> </head>
<body> <body>

18
src/App.vue
View File

@@ -1,8 +1,26 @@
<template> <template>
<app-loading ref="loadingRef"/>
<router-view /> <router-view />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import AppLoading from '@/components/AppLoading.vue'
import { useAppStore } from '@/store/app.ts'
import { useRouter } from 'vue-router'
const appStore = useAppStore()
const router = useRouter()
appStore.initApp()
router.beforeEach((to, from, next) => {
appStore.isLoading = true
next()
})
router.afterEach(() => {
appStore.isLoading = false
})
</script> </script>
<style lang="scss"> <style lang="scss">

20
src/components/AppLoading.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<div v-if="appStore.isLoading" id="app-loading">
<div class="cube-container">
<div class="cube cube1"></div>
<div class="cube cube2"></div>
<div class="cube cube3"></div>
</div>
<p class="loading-text">正在加载中...</p>
</div>
</template>
<script setup>
import { useAppStore } from '@/store/app.ts'
const appStore = useAppStore()
</script>
<style lang="scss">
@use "@/styles/app.loading.module.scss";
</style>

5
src/components/Food/FoodCard.vue
View File

@@ -65,8 +65,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { Edit, MoreFilled, DeleteFilled } from '@element-plus/icons-vue' import { Edit, MoreFilled, DeleteFilled } from '@element-plus/icons-vue'
import { useFoodStore } from '@/store/food' import { useFoodStore } from '@/store/food'
import { defineProps, onMounted, PropType, reactive } from 'vue' import { defineProps, onMounted, reactive } from 'vue'
import { IFoodRecipe, IFoodRecord } from '@/types/food.ts' import type { PropType } from 'vue'
import type { IFoodRecipe, IFoodRecord } from '@/types/food.ts'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { formatDate } from 'vue3-common/utils/dateUtil' import { formatDate } from 'vue3-common/utils/dateUtil'
import { deepCopyObject } from 'vue3-common/utils/dataUtil' import { deepCopyObject } from 'vue3-common/utils/dataUtil'

2
src/components/Food/FoodDailyItem.vue
View File

@@ -29,7 +29,7 @@ import { useFoodStore } from '@/store/food.ts'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useAppStore } from '@/store/app.ts' import { useAppStore } from '@/store/app.ts'
import { formatChineseDate } from 'vue3-common/utils/dateUtil' import { formatChineseDate } from 'vue3-common/utils/dateUtil'
import { IFoodRecord } from '@/types/food.ts' import type { IFoodRecord } from '@/types/food.ts'
const foodStore = useFoodStore() const foodStore = useFoodStore()
const appStore = useAppStore() const appStore = useAppStore()

27
src/components/Moment/MomentCard.vue
View File

@@ -47,6 +47,18 @@
@click="sendCommentClick" @click="sendCommentClick"
class="send-button">发送</el-button> class="send-button">发送</el-button>
</div> </div>
<div class="moment-comment-list">
<div class="moment-comment-item">
<span class="name">Cxx：</span>
<span>确实很不错</span>
</div>
<div class="moment-comment-item">
<span class="name">Cxx：</span>
<span>确实很不错阿</span>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -100,6 +112,21 @@ const sendCommentClick = async () => {
justify-items: center; justify-items: center;
gap: 5px; gap: 5px;
} }
.moment-comment-list {
padding: 10px;
background-color: var(--color-comment-bg);
display: flex;
flex-direction: column;
gap: 5px;
.moment-comment-item {
.name {
font-weight: bold;
}
}
}
} }
} }
</style> </style>

2
src/store/app.ts
View File

@@ -14,7 +14,7 @@ export const useAppStore = defineStore('ipp', {
isDark: false, isDark: false,
isWebSocket: false, isWebSocket: false,
serverIp: '14.103.235.151', serverIp: '14.103.235.151',
version: 'v1.0.0.2025042901' version: 'v1.0.0.2025062303'
}), }),
actions: { actions: {
initApp() { initApp() {

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; }
}
}

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

@@ -0,0 +1,7 @@
@use 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
'base': #009FA8, // 设置你的主题色
),
)
);

2
src/styles/index.module.scss
View File

@@ -48,6 +48,7 @@ span, input {
--color-bg: #F5F5F5; --color-bg: #F5F5F5;
--color-card-bg: #FFFFFF; --color-card-bg: #FFFFFF;
--color-record-card-bg: #F5F5DC; --color-record-card-bg: #F5F5DC;
--color-comment-bg: #F5F5F5;
--color-border-bg: #FFFFFF; --color-border-bg: #FFFFFF;
--color-text: #000000; --color-text: #000000;
} }
@@ -57,6 +58,7 @@ span, input {
--color-bg: #000000; --color-bg: #000000;
--color-card-bg: #000000; --color-card-bg: #000000;
--color-record-card-bg: #4C4D4F; --color-record-card-bg: #4C4D4F;
--color-comment-bg: #4C4D4F;
--color-border-bg: #4C4D4F; --color-border-bg: #4C4D4F;
--color-text: #FFFFFF; --color-text: #FFFFFF;
} }

7
src/views/login/index.vue
View File

@@ -6,10 +6,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { isMobile } from 'vue3-common/utils/layoutUtil'
import { ElMessage } from 'element-plus'
const router = useRouter() const router = useRouter()
const loginClick = () => { const loginClick = () => {
if (!isMobile()) {
ElMessage.error('暂不支持PC端')
return
}
router.push('/record') router.push('/record')
} }
</script> </script>

29
src/views/profile/index.vue
View File

@@ -1,12 +1,37 @@
<template> <template>
<div class="common-mobile-view profile"> <div class="common-mobile-view profile">
个人中心 个人中心
<div>
<span>版本号：</span>
<span>{{ appStore.version }}</span>
</div>
<div class="button-container">
<el-button type="primary" @click="viewLatestVersionClick">检查新版本</el-button>
<el-button type="primary" @click="logoutClick">退出登录</el-button>
</div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useAppStore } from '@/store/app.ts'
import { useRouter } from 'vue-router'
const appStore = useAppStore()
const router = useRouter()
const viewLatestVersionClick = () => {
location.reload()
}
const logoutClick = () => {
router.push('/')
}
</script> </script>
<style scoped> <style lang="scss">
.profile {
display: flex;
flex-direction: column;
gap: 10px;
}
</style> </style>

2
src/views/record/index.vue
View File

@@ -38,7 +38,7 @@ import FoodTimeline from '@/components/Food/FoodTimeline.vue'
import { Search } from '@element-plus/icons-vue' import { Search } from '@element-plus/icons-vue'
import { onMounted, reactive } from 'vue' import { onMounted, reactive } from 'vue'
import { useFoodStore } from '@/store/food' import { useFoodStore } from '@/store/food'
import { IFoodSegment } from '@/types/food' import type { IFoodSegment } from '@/types/food'
const foodStore = useFoodStore() const foodStore = useFoodStore()

7
vite.config.ts
View File

@@ -5,6 +5,13 @@ import path from 'path'
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/styles/element/index.module.scss" as *;'
}
}
},
base: './', base: './',
resolve: { resolve: {
// 配置路径别名 // 配置路径别名