Skip to content

Commit

Permalink
refactor: page ui
Browse files Browse the repository at this point in the history
  • Loading branch information
bs32g1038 committed Mar 24, 2024
1 parent c0772b4 commit 17d93fb
Show file tree
Hide file tree
Showing 26 changed files with 1,560 additions and 134 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
package com.jixialunbi.repository;

import com.jixialunbi.model.Category;
import org.springframework.data.jpa.repository.JpaRepository;


public interface CategoryRepository extends JpaRepository<Category, Long> {

}
6 changes: 1 addition & 5 deletions web/components/AppHeader/components/Search/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,7 @@ export default function Search() {
setInput(router.query.q as any);
}
}, [router.query.q]);
return user ? (
<Button size="small" type="text">
<SearchOutlined />搜索
</Button>
) : (
return (
<div className={styles.inputSearch} style={{ width: 250 }}>
<Input
placeholder="搜索你想要的..."
Expand Down
2 changes: 1 addition & 1 deletion web/components/AppHeader/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default function AppHeader() {
</span>
</div>
<div className={styles.headerRight}>
<Search></Search>
{/* <Search></Search> */}
<Link href="/" passHref={true}>
<Button size="small" type="text">
<HomeOutlined></HomeOutlined>首页
Expand Down
6 changes: 3 additions & 3 deletions web/components/home/components/CategoryList/index.module.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.wrap{
.wrap {
background-color: #fff;
padding: 0 20px 10px;
}
Expand All @@ -25,15 +25,15 @@
align-items: center;
width: fit-content;
flex-wrap: wrap;
gap: 5px;
gap: 10px;
border-radius: 2px;
.switchItem {
&.active {
background: #85a5ff;
color: #fff;
}
&:hover {
border: 1px solid #85a5ff;
color: #85a5ff;
}
}
svg {
Expand Down
76 changes: 44 additions & 32 deletions web/components/home/components/CategoryList/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import EditModal from './components/EditModal';
import { omit } from 'lodash';
import queryString from 'query-string';
import { fetcher } from '../../services';
import Search from '@/components/AppHeader/components/Search';

const { Option } = Select;

Expand All @@ -34,7 +35,7 @@ const CategoryItem = (props: { item: any; isActive: boolean; isAdmin?: boolean;
return node;
}
return (
<Space size={2}>
<Space size={4}>
{node}
<Button
size="small"
Expand All @@ -59,37 +60,49 @@ const CategoryItem = (props: { item: any; isActive: boolean; isAdmin?: boolean;
};

export default function CategoryList() {
const { data, isLoading, mutate } = useSWR('/api/v1/categories', fetcher);
const { isLoading, mutate } = useSWR('/api/v1/categories', fetcher);
const router = useRouter();
const [select, setSelect] = useState(router.query.sort ?? 'default');
const data = [
{
id: '热榜',
name: '热榜',
},
// {
// id: '关注',
// name: '关注',
// },
];
return (
<Spin spinning={isLoading}>
<div className={styles.wrap}>
<div className={styles.switch}>
<Link href={'/'} passHref={true}>
<Button
size="small"
type="text"
className={classNames(styles.switchItem, {
[styles.active]: !router.query.categoryId,
})}
>
<Space>全站</Space>
</Button>
</Link>
{data?.data?.map((item: { name: string; id: number }) => {
return (
<CategoryItem
key={item.id}
item={item}
isActive={parseInt(router.query.categoryId as string) === item.id}
isAdmin={false}
refetch={mutate}
></CategoryItem>
);
})}
</div>
<div>
<div className={styles.wrap}>
<div className={styles.switch}>
<Link href={'/'} passHref={true}>
<Button
size="small"
type="text"
className={classNames(styles.switchItem, {
[styles.active]: !router.query.categoryId,
})}
>
<Space>推荐</Space>
</Button>
</Link>
{data?.map((item: { name: string; id: number }) => {
return (
<CategoryItem
key={item.id}
item={item}
isActive={parseInt(router.query.categoryId as string) === item.id}
isAdmin={false}
refetch={mutate}
></CategoryItem>
);
})}
</div>
<div>
<Search></Search>
</div>
{/* <div>
<Select
value={select}
style={{ width: 100 }}
Expand All @@ -114,8 +127,7 @@ export default function CategoryList() {
</Space>
</Option>
</Select>
</div>
</div>
</Spin>
</div> */}
</div>
);
}
1 change: 1 addition & 0 deletions web/components/home/components/TopicItem/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const CImage: any = dynamic(() => import('./components/CImage') as any, {

export default function TopicItem(props: { item: any }) {
const item = props.item;
console.log(item)
const participants = unionBy(item?.participants, 'id');
return (
<div key={item.title} className={styles.item}>
Expand Down
2 changes: 1 addition & 1 deletion web/components/home/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Home = (props: { data: any }) => {
return (
<Layout>
<TopTip></TopTip>
<PinnedList></PinnedList>
{/* <PinnedList></PinnedList> */}
{type !== 'search' && <CategoryList></CategoryList>}
<div className={styles.content}>
<div className={styles.inner}>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.wrap {
:global {
.ant-image-mask-info {
display: none;
}
}
}
14 changes: 14 additions & 0 deletions web/components/post/TopicItem/components/CImage/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from "react";
import { Image } from 'antd';
import style from './index.module.scss';

export default function CImage(props) {
const { src } = props;
return <Image rootClassName={style.wrap} src={src} alt="" onLoad={(res: any) => {
const oImg = new window.Image();
oImg.src = res.target.src;
if (oImg.height / oImg.width >= 1.2) {
res.currentTarget.style.height = 'auto'
}
}} />
}
119 changes: 119 additions & 0 deletions web/components/post/TopicItem/components/EllipsisDropdown/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import React from 'react';
import { DeleteOutlined, EllipsisOutlined, EyeFilled, PushpinOutlined } from '@ant-design/icons';
import { Button, Dropdown, Menu, message, Space } from 'antd';
import { useSWRMutation } from '@/hooks';
import { useAppStore } from '@/store';

interface Props {
authorId: number;
pinned: boolean;
postId: number;
id: number;
}

export default function EllipsisDropdown(props: Props) {
// const user = useAppSelector((state) => state.app.user);
// const dispatch = useAppDispatch();
const user = useAppStore((state) => state.user);
const { trigger: deletePost } = useSWRMutation({ url: '/api/v1/delete-post' });
// const [deletePost] = useDeletePostMutation();
// const [pinPost] = usePinPostMutation();
return (
<React.Fragment>
<Dropdown
menu={{
onClick: ({ key }) => {
// if (key === '举报' && !user) {
// return dispatch(showLoginModal(true));
// }
// if (key == '编辑') {
// return dispatch(
// setWriteModalState({
// visible: true,
// postId: props.postId,
// type: 'write',
// })
// );
// }
// if (key == '时间线') {
// return setTimeLine({
// visible: true,
// id: props.id,
// });
// }
if (key === '删除') {
deletePost({ id: props.postId } as any).then(() => {
message.success('删除成功!');
});
}
// if (key === '置顶') {
// pinPost({ id: props.postId, pinned: !props.pinned })
// .unwrap()
// .then(() => {
// message.success(props.pinned ? '已取消置顶!' : '置顶成功!');
// });
// }
},
items: [
...(user?.id !== props.authorId
? [
{
label: (
<Space>
<EyeFilled></EyeFilled>举报
</Space>
),
key: '举报',
},
]
: []),
...(user && user.role === 'SuperAdmin'
? [
{
label: (
<Space>
<PushpinOutlined />
{props.pinned ? '取消置顶' : '置顶'}
</Space>
),
key: '置顶',
},
]
: []),
...(user?.id === props.authorId
? [
// {
// label: (
// <Space>
// <EditOutlined></EditOutlined>编辑
// </Space>
// ),
// key: '编辑',
// },
// {
// label: (
// <Space>
// <PlusCircleOutlined></PlusCircleOutlined>时间线
// </Space>
// ),
// key: '时间线',
// },
{
label: (
<Space style={{ color: '#ff7875' }}>
<DeleteOutlined></DeleteOutlined>删除
</Space>
),
key: '删除',
},
]
: []),
],
}}
trigger={['click']}
>
<Button icon={<EllipsisOutlined />} type="text" size="small"></Button>
</Dropdown>
</React.Fragment>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
.timeline {
margin-bottom: -20px;
.timelineTitle {
display: inline-flex;
align-items: center;
position: relative;
background: #df542f;
color: #fff;
padding-right: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: -10px;
margin-bottom: 13px;
svg {
fill: #fff;
}
}
.timelineTime {
color: #97999f;
}
.timelineItemContent {
background: #f6f7f9;
padding: 1px 10px;
border-radius: 8px;
}
.lastEditTime {
color: rgba(0, 0, 0, 0.45);
font-size: 12px;
padding: 8px 5px;
margin-bottom: 0;
display: flex;
justify-content: flex-end;
flex: 1 0 auto;
}
}

.delete {
svg {
fill: #ff4d4f;
}
}
Loading

0 comments on commit 17d93fb

Please sign in to comment.