first1
This commit is contained in:
wangzzpeng
117
src/views/project/cpns/ProjectPager.vue
Normal file
117
src/views/project/cpns/ProjectPager.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
/**
|
||||
* 项目中心分页器（按设计稿：小方块、当前页为**蓝色描边**而非填充）。
|
||||
*
|
||||
* <p>为什么不复用公共 `PaginationBar`：那个是 32px 实心选中态、服务多个页面，
|
||||
* 与项目中心设计稿的 20px 描边样式不同，改它会波及其它页面。</p>
|
||||
*/
|
||||
|
||||
interface Props {
|
||||
page: number
|
||||
pageSize: number
|
||||
total: number
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{ pageChange: [page: number] }>()
|
||||
|
||||
const pageCount = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))
|
||||
|
||||
/** 页码序列：≤7 全部展示，否则首尾 + 当前页窗口（… 省略） */
|
||||
const pages = computed<Array<number | '...'>>(() => {
|
||||
const n = pageCount.value
|
||||
const { page } = props
|
||||
if (n <= 7) return Array.from({ length: n }, (_, i) => i + 1)
|
||||
const window: Array<number | '...'> = []
|
||||
for (let p = page - 1; p <= page + 1; p++) {
|
||||
if (p >= 1 && p <= n) window.push(p)
|
||||
}
|
||||
if (page > 3) window.unshift('...')
|
||||
if (page < n - 2) window.push('...')
|
||||
return [1, ...window.filter((item) => item !== 1 && item !== n), n].filter(
|
||||
(item, index, arr) => arr.indexOf(item) === index,
|
||||
)
|
||||
})
|
||||
|
||||
function go(page: number): void {
|
||||
if (page < 1 || page > pageCount.value || page === props.page) return
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="project-pager" aria-label="分页">
|
||||
<button
|
||||
type="button"
|
||||
class="project-pager__btn"
|
||||
:disabled="page <= 1"
|
||||
@click="go(page - 1)"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<button
|
||||
v-for="(item, index) in pages"
|
||||
:key="`${item}-${index}`"
|
||||
type="button"
|
||||
class="project-pager__btn"
|
||||
:class="{ 'is-active': item === page, 'is-ellipsis': item === '...' }"
|
||||
:disabled="item === '...'"
|
||||
@click="go(item as number)"
|
||||
>
|
||||
{{ item }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="project-pager__btn"
|
||||
:disabled="page >= pageCount"
|
||||
@click="go(page + 1)"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.project-pager {
|
||||
.flex(row, flex-end, center);
|
||||
gap: 4px;
|
||||
margin-top: 15px;
|
||||
|
||||
&__btn {
|
||||
.flex(row, center, center);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid @border-color-dark;
|
||||
border-radius: 2px;
|
||||
background: @white;
|
||||
color: @heading-color;
|
||||
font-size: @font-size-sm;
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
|
||||
&:hover:not(:disabled):not(.is-ellipsis) {
|
||||
border-color: @primary-color;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
// 设计稿：当前页是描边态（蓝框 + 蓝字），不是实心
|
||||
&.is-active {
|
||||
border-color: @primary-color;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&.is-ellipsis {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:disabled:not(.is-ellipsis) {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
145
src/views/project/cpns/ProjectToolbar.vue
Normal file
145
src/views/project/cpns/ProjectToolbar.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
/**
|
||||
* 项目中心右侧搜索条（按设计稿：关键字输入框 + 重置 + 搜索）。
|
||||
*
|
||||
* <p>输入框比两侧按钮更高（设计稿实测 37 vs 26），三者按中线对齐。</p>
|
||||
*/
|
||||
|
||||
interface Props {
|
||||
keyword: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:keyword': [keyword: string]
|
||||
search: []
|
||||
reset: []
|
||||
}>()
|
||||
|
||||
const keyword = computed({
|
||||
get: () => props.keyword,
|
||||
set: (value: string) => emit('update:keyword', value),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="project-toolbar">
|
||||
<label class="project-toolbar__field">
|
||||
<svg
|
||||
class="project-toolbar__icon"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle
|
||||
cx="6.8"
|
||||
cy="6.8"
|
||||
r="5.2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.4"
|
||||
/>
|
||||
<line
|
||||
x1="10.8"
|
||||
y1="10.8"
|
||||
x2="14.6"
|
||||
y2="14.6"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.4"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
<input
|
||||
v-model="keyword"
|
||||
class="project-toolbar__input"
|
||||
type="text"
|
||||
placeholder="关键字搜索"
|
||||
@keyup.enter="emit('search')"
|
||||
>
|
||||
</label>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="project-toolbar__btn"
|
||||
@click="emit('reset')"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="project-toolbar__btn project-toolbar__btn--primary"
|
||||
@click="emit('search')"
|
||||
>
|
||||
搜索
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.project-toolbar {
|
||||
.flex(row, flex-start, center);
|
||||
gap: 24px;
|
||||
|
||||
&__field {
|
||||
.flex(row, flex-start, center);
|
||||
position: relative;
|
||||
flex: 0 1 380px;
|
||||
min-width: 0;
|
||||
height: 37px;
|
||||
border-radius: @radius-round;
|
||||
background: @input-bg;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
color: @text-color-disabled;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 @spacing-base 0 42px;
|
||||
border: none;
|
||||
border-radius: @radius-round;
|
||||
background: transparent;
|
||||
color: @heading-color;
|
||||
font-size: @font-size-base;
|
||||
outline: none;
|
||||
|
||||
&::placeholder {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
flex-shrink: 0;
|
||||
height: 26px;
|
||||
padding: 0 22px;
|
||||
border-radius: @radius-round;
|
||||
background: @pill-bg;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
transition: color 0.2s, background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background: @primary-color;
|
||||
color: @white;
|
||||
|
||||
&:hover {
|
||||
background: @primary-hover;
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user