github/autoMate
1
0
Fork 0
mirror of https://github.com/yuruotong1/autoMate.git synced 2025-12-26 05:16:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

📝 更新(CategoryItem, ContentItem, QuickNav): 添加样式模块文件

Browse Source
This commit is contained in:
ruotongyu 2024-06-19 23:05:36 +08:00
parent 58b37589b2
commit 1312385478
8 changed files with 66 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/autoMate/src/renderer/src/components/CategoryItem/index.tsx
View File

@ -1,6 +1,6 @@
import { FolderClose } from "@icon-park/react"
import { NavLink } from "react-router-dom"
import styles from "./styles.module.scss"
interface Props {
category: CategoryType
}
@ -9,7 +9,11 @@ export const CategoryItem = ({category}: Props) => {
return (
<NavLink
to={`/config/category/contentList/${category.id}`}
key={category.id} >
key={category.id}
className={({isActive})=>{
return isActive ? styles.active : styles.link
}}
>
<div className="flex items-center gap-1">
<FolderClose theme="outline" size="12" strokeWidth={3}></FolderClose>
<div className="truncate">{category.name}</div>

17
ui/autoMate/src/renderer/src/components/CategoryItem/styles.module.scss Normal file
View File

@ -0,0 +1,17 @@
@mixin commonLink{
@apply px-2 py-2 truncate cursor-pointer block mx-1;
}
// link 编译完是 a 标题
.link{
@include commonLink();
@apply hover:bg-gray-200;
}
.active{
@include commonLink();
// mx-1 外边距
@apply bg-blue-600 text-white rounded-md;
}

6
ui/autoMate/src/renderer/src/components/ContentItem/index.tsx
View File

@ -2,7 +2,7 @@ import { Delete } from '@icon-park/react';
import dayjs from 'dayjs';
import { useContextMenu } from 'mantine-contextmenu';
import { NavLink, useSubmit } from 'react-router-dom'
import styles from "./styles.module.scss"
interface Props {
content: ContentType
}
@ -13,7 +13,9 @@ const { showContextMenu } = useContextMenu();
<NavLink
key={content.id}
to={`/config/category/contentList/${content.category_id}/content/${content.id}`}
className="flex justify-between items-center"
className={({isActive})=>{
return [isActive ? styles.active : '', styles.link].join(' ')
}}
onContextMenu={showContextMenu([
{
key: 'remove',

10
ui/autoMate/src/renderer/src/components/ContentItem/styles.module.scss Normal file
View File

@ -0,0 +1,10 @@
.link{
@apply truncate py-1 px-[6px] cursor-pointer flex items-center
gap-1 border-b mx-2 my-1 hover:bg-slate-100;
}
.active{
@apply bg-blue-700 text-white rounded-md border-none hover:bg-blue-700;
}

20
ui/autoMate/src/renderer/src/components/QuickNav/index.tsx
View File

@ -1,23 +1,27 @@
import { AllApplication } from "@icon-park/react"
import { AllApplication, FolderFailed } from "@icon-park/react"
import { NavLink } from "react-router-dom"
import styles from "./styles.module.scss"
export const QuickNav = () => {
return (
<>
<div className="px-2 mt-2 opacity-90 mb-1">快捷操作</div>
<NavLink to={`/config/category/contentList`} end className="font-blod mb-1">
<main className="mb-3 border-b">
<div className="px-2 mt-2 opacity-90 mb-1 text-[10px]">快捷操作</div>
<NavLink to={`/config/category/contentList`} end className={({isActive})=>
isActive ? styles.active : styles.link
}>
<div className="flex items-center gap-1">
<AllApplication theme="outline" size="12" strokeWidth={3}/>
<div className="truncate">所有内容</div>
</div>
</NavLink>
<NavLink to={`/config/category/contentList/0`} end className="font-blod mb-1">
<NavLink to={`/config/category/contentList/0`} end className={({isActive})=>
isActive ? styles.active : styles.link
}>
<div className="flex items-center gap-1">
<AllApplication theme="outline" size="12" strokeWidth={3}/>
<FolderFailed theme="outline" size="12" strokeWidth={3}/>
<div className="truncate">未分类</div>
</div>
</NavLink>
</>
</main>
)
}

16
ui/autoMate/src/renderer/src/components/QuickNav/styles.module.scss Normal file
View File

@ -0,0 +1,16 @@
@mixin commonLink{
@apply px-2 py-2 truncate cursor-pointer block mx-1;
}
// link 编译完是 a 标题
.link{
@include commonLink;
}
.active{
@include commonLink;
// mx-1 外边距
@apply bg-orange-400 text-white rounded-md;
}

9
ui/autoMate/src/renderer/src/pages/Category/category.scss
View File

@ -9,14 +9,7 @@
.categories{
@apply border-r bg-slate-100 text-xs text-slate-700 overflow-y-auto;
grid-area: categories;
// link 编译完是 a 标题
a{
@apply p-1 py-1 truncate cursor-pointer block;
&.active{
// mx-1 外边距
@apply bg-blue-700 text-white mx-1 rounded-md;
}
}
}

7
ui/autoMate/src/renderer/src/pages/ContentList/contentList.scss
View File

@ -5,13 +5,6 @@
.list{
@apply border-r overflow-y-auto;
grid-area: list;
a {
@apply truncate py-1 px-1 cursor-pointer flex items-center gap-1 border-b mx-2 my-1;
&.active{
@apply bg-blue-700 text-white rounded-md;
}
}
}
.content{
grid-area: content;