111
This commit is contained in:
Putoo
13
Web/src/components/Base/Abar.vue
Normal file
13
Web/src/components/Base/Abar.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<router-link :to="href" :class="_class">
|
||||
<slot></slot>
|
||||
</router-link>
|
||||
</template>
|
||||
<script setup>
|
||||
// 1. 定义接收父组件传来的参数 props
|
||||
const props = defineProps({
|
||||
// 字段名、类型、默认值
|
||||
href: String,
|
||||
_class: String,
|
||||
})
|
||||
</script>
|
||||
31
Web/src/components/Base/Abutton.vue
Normal file
31
Web/src/components/Base/Abutton.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<button class="kx-link-button" @click="handleClick">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
||||
const emit = defineEmits(['click'])
|
||||
// 定义 click 事件
|
||||
const handleClick = (): any => {
|
||||
emit('click')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.kx-link-button {
|
||||
/* text-decoration: underline; */
|
||||
color: #1e5494;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.kx-link-button:hover{
|
||||
color: #FFFFFF;
|
||||
background: #1e5494;
|
||||
}
|
||||
|
||||
</style>
|
||||
26
Web/src/components/Base/Acheak.vue
Normal file
26
Web/src/components/Base/Acheak.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<Abutton @click="handleClick" v-if="onValue != onCheak">
|
||||
<slot></slot>
|
||||
</Abutton>
|
||||
|
||||
<span v-if="onValue == onCheak">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// 1. 定义接收父组件传来的参数 props
|
||||
const props = defineProps({
|
||||
// 字段名、类型、默认值
|
||||
href: String,
|
||||
onValue: String,
|
||||
onCheak: String
|
||||
|
||||
})
|
||||
|
||||
const emit = defineEmits(['click'])
|
||||
// 定义 click 事件
|
||||
const handleClick = (): any => {
|
||||
emit('click')
|
||||
}
|
||||
|
||||
</script>
|
||||
88
Web/src/components/Base/PageLoading.vue
Normal file
88
Web/src/components/Base/PageLoading.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<Transition name="page-loading-fade">
|
||||
<div v-if="appStore.isLoading" class="page-loading" role="status" aria-live="polite" aria-busy="true">
|
||||
<div class="gif">
|
||||
<!-- <van-image round width="6rem" height="8rem" src="/images/logo.png" /> -->
|
||||
<div style="width: 200px; height: 200px;">
|
||||
<img src="/images/loading4.gif" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const appStore = useAppStore()
|
||||
const defaultImage = '/images/page-loading-cover.png'
|
||||
const fallbackImage = '/images/logo.png'
|
||||
const loadingImage = ref(defaultImage)
|
||||
|
||||
const handleImageError = (): void => {
|
||||
if (loadingImage.value !== fallbackImage) {
|
||||
loadingImage.value = fallbackImage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-loading {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
.gif {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-loading__panel {
|
||||
width: min(100%, 280px);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-loading__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 16px 48px rgba(12, 40, 74, 0.18);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.page-loading__title {
|
||||
color: #103b63;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-loading__text {
|
||||
color: #4f6476;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.page-loading-fade-enter-active,
|
||||
.page-loading-fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.page-loading-fade-enter-from,
|
||||
.page-loading-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
157
Web/src/components/Base/Pagination.vue
Normal file
157
Web/src/components/Base/Pagination.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="pagination">
|
||||
<!-- 第一行：导航按钮 -->
|
||||
<div class="pagination-nav">
|
||||
<span v-if="currentPage > 1" @click="changePage('first')">首页</span>
|
||||
<span v-if="currentPage > 1" @click="changePage('prev')">上一页</span>
|
||||
<span v-if="currentPage < totalPages" @click="changePage('next')">下一页</span>
|
||||
<span v-if="currentPage < totalPages" @click="changePage('last')">尾页</span>
|
||||
</div>
|
||||
<!-- 第二行：页码信息与跳转 -->
|
||||
<div class="pagination-info">
|
||||
<span>第{{ currentPage }}/{{ totalPages }}页</span>
|
||||
<input
|
||||
v-model.number="goPage"
|
||||
type="number"
|
||||
min="1"
|
||||
:max="totalPages"
|
||||
class="page-input"
|
||||
@keyup.enter="changePage('input')"
|
||||
/>
|
||||
<button @click="changePage('input')">跳转</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
|
||||
// 定义Props
|
||||
interface Props {
|
||||
currentPage: number; // 当前页
|
||||
limit: number; // 每页条数
|
||||
total: number; // 总条数
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
currentPage: 1,
|
||||
limit: 10,
|
||||
total: 0,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
// 响应式存储当前页（不直接修改props）
|
||||
const currentPage = ref(props.currentPage)
|
||||
// 跳转输入框绑定值
|
||||
const goPage = ref(props.currentPage)
|
||||
|
||||
// 计算属性：自动计算总页数（核心修复）
|
||||
const totalPages = computed(() => {
|
||||
const { total, limit } = props
|
||||
if (total <= 0 || limit <= 0) return 1
|
||||
return Math.ceil(total / limit)
|
||||
})
|
||||
|
||||
// 监听父组件传入的页码变化，同步内部值
|
||||
watch(
|
||||
() => props.currentPage,
|
||||
(val) => {
|
||||
currentPage.value = val
|
||||
goPage.value = val
|
||||
}
|
||||
)
|
||||
|
||||
//回到顶部
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth' // 平滑动画，去掉就是瞬间置顶
|
||||
})
|
||||
}
|
||||
|
||||
// 分页切换方法
|
||||
const changePage = (type: 'first' | 'prev' | 'next' | 'last' | 'input') => {
|
||||
const pages = totalPages.value
|
||||
|
||||
if (type === 'input') {
|
||||
// 输入跳转：边界校验
|
||||
let page = goPage.value
|
||||
page = Math.max(1, Math.min(page, pages))
|
||||
currentPage.value = page
|
||||
} else {
|
||||
// 按钮跳转
|
||||
switch (type) {
|
||||
case 'first':
|
||||
currentPage.value = 1
|
||||
break
|
||||
case 'prev':
|
||||
currentPage.value = Math.max(1, currentPage.value - 1)
|
||||
break
|
||||
case 'next':
|
||||
currentPage.value = Math.min(pages, currentPage.value + 1)
|
||||
break
|
||||
case 'last':
|
||||
currentPage.value = pages
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 更新输入框显示
|
||||
goPage.value = currentPage.value
|
||||
// 向父组件抛出最新页码
|
||||
emit('pageChange', currentPage.value)
|
||||
scrollToTop();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pagination {
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.pagination-nav {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.pagination-nav span {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
color: #1e5494;
|
||||
}
|
||||
|
||||
.pagination-nav span.disabled {
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none; /* 禁用点击 */
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-input {
|
||||
width: 46px;
|
||||
padding: 4px 6px;
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pagination-info button {
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #1e5494;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
color: #1e5494;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user