Skip to content

Dev #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
weizwz merged 2 commits into from
Nov 28, 2025
Merged

Dev #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9192ddd
feat: 更新默认数据
weizwz Nov 28, 2025
df509fb
feat: 优化样式细节
weizwz Nov 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 3 additions & 7 deletions components/modals/EditCategoryModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export const EditCategoryModal: React.FC<EditCategoryModalProps> = ({
cancelText="取消"
destroyOnHidden
>
<div className='pt-2'></div>
<div className="pt-2"></div>
<Form
form={form}
labelCol={{ flex: '54px' }}
Expand All @@ -80,17 +80,13 @@ export const EditCategoryModal: React.FC<EditCategoryModalProps> = ({
name="name"
rules={[
{ required: true, message: '请输入分类名称' },
{ max: 20, message: '分类名称不能超过20个字符' },
{ max: 20, message: '分类名称不能超过 20 个字符' },
]}
>
<Input placeholder="请输入分类名称" />
</Form.Item>

<Form.Item
label="图标"
name="icon"
rules={[{ required: true, message: '请选择图标' }]}
>
<Form.Item label="图标" name="icon" rules={[{ required: true, message: '请选择图标' }]}>
<IconPicker />
</Form.Item>
</Form>
Expand Down
56 changes: 18 additions & 38 deletions components/modals/EditLinkModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,7 @@ export const EditLinkModal: React.FC<EditLinkModalProps> = ({
<span id="edit-link-modal-description" className="sr-only">
填写表单以{link ? '编辑' : '添加'}导航链接信息
</span>
<div className='pt-2'></div>
<div className="pt-2"></div>
<Form
form={form}
labelCol={{ flex: '54px' }}
Expand All @@ -350,18 +350,15 @@ export const EditLinkModal: React.FC<EditLinkModalProps> = ({
{ max: 500, message: '地址长度不能超过 500 个字符' },
]}
>
<Input
placeholder="https://example.com"
onChange={handleUrlChange}
/>
<Input placeholder="https://example.com" onChange={handleUrlChange} />
</Form.Item>

<Form.Item
label="名称"
name="name"
rules={[
{ required: true, message: '请输入链接名称' },
{ max: 50, message: '名称长度不能超过 50 个字符' },
{ max: 30, message: '名称长度不能超过 30 个字符' },
]}
>
<Input placeholder="链接名称" />
Expand All @@ -370,26 +367,13 @@ export const EditLinkModal: React.FC<EditLinkModalProps> = ({
<Form.Item
label="描述"
name="description"
rules={[
{ max: 200, message: '描述长度不能超过 200 个字符' },
]}
rules={[{ max: 200, message: '描述长度不能超过 200 个字符' }]}
>
<Input.TextArea
placeholder="链接描述（可选）"
rows={3}
showCount
maxLength={200}
/>
<Input.TextArea placeholder="链接描述（可选）" rows={3} showCount maxLength={200} />
</Form.Item>

<Form.Item
label="分类"
name="category"
>
<Select
placeholder="选择分类（可选）"
allowClear
>
<Form.Item label="分类" name="category">
<Select placeholder="选择分类（可选）" allowClear>
{categories.map((category) => (
<Select.Option key={category.id} value={category.name}>
<span className="mr-2">{renderIcon(category.icon)}</span>
Expand All @@ -400,12 +384,12 @@ export const EditLinkModal: React.FC<EditLinkModalProps> = ({
</Form.Item>

<Form.Item label="图标">
<Space.Compact className='w-full flex'>
<Select
className='w-32!'
<Space.Compact className="w-full flex">
<Select
className="w-32!"
value={iconType}
onChange={handleIconTypeChange}
options={iconOptions}
options={iconOptions}
/>
{iconType === '2' ? (
<Form.Item name="icon" className="flex-1 mb-0!">
Expand All @@ -418,7 +402,7 @@ export const EditLinkModal: React.FC<EditLinkModalProps> = ({
</Form.Item>
) : (
<Form.Item name="icon" className="flex-1 mb-0!">
<Input
<Input
placeholder={iconType === '1' ? '自动获取' : '输入图标 URL'}
disabled={iconType === '1'}
onChange={handleIconUrlChange}
Expand Down Expand Up @@ -455,12 +439,12 @@ export const EditLinkModal: React.FC<EditLinkModalProps> = ({
</Space.Compact>
</Form.Item>
</Col>

<Col xs={24} sm={12}>
<Form.Item label="预览">
<div className="flex items-center gap-3">
{/* 预览卡片 */}
<div
<div
className="w-25 h-25 rounded-xl flex items-center justify-center relative overflow-hidden border border-input-border dark:border-dark-input-border dark:brightness-[0.8] transition-all"
style={{ backgroundColor: previewBgColor }}
>
Expand All @@ -478,12 +462,10 @@ export const EditLinkModal: React.FC<EditLinkModalProps> = ({
}}
/>
) : (
<div className="text-white/40 text-xs text-center px-2">
暂无图标
</div>
<div className="text-white/40 text-xs text-center px-2">暂无图标</div>
)}
</div>

{/* 缩放控制按钮 */}
<div className="flex flex-col gap-2">
<Button
Expand All @@ -507,11 +489,9 @@ export const EditLinkModal: React.FC<EditLinkModalProps> = ({
title="重置"
/>
</div>

{/* 缩放比例显示 */}
<div className="text-sm text-gray-500">
{Math.round(iconScale * 100)}%
</div>
<div className="text-sm text-gray-500">{Math.round(iconScale * 100)}%</div>
</div>
</Form.Item>
</Col>
Expand Down
72 changes: 35 additions & 37 deletions components/navigation/LinkCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,14 +260,11 @@ const LinkCardBase: React.FC<LinkCardProps> = ({ link, onEdit, onDelete, isDragg
{...(isDraggingEnabled ? listeners : {})}
{...(isDraggingEnabled ? attributes : {})}
>
<Dropdown
menu={{ items: menuItems }}
trigger={['contextMenu']}
>
<Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}>
<motion.div
whileHover={{
whileHover={{
y: -4,
transition: { duration: 0.2 }
transition: { duration: 0.2 },
}}
className="h-full"
onContextMenu={handleContextMenu}
Expand All @@ -292,41 +289,42 @@ const LinkCardBase: React.FC<LinkCardProps> = ({ link, onEdit, onDelete, isDragg
height: '100%',
padding: 0,
display: 'flex',
}
},
}}
>
{/* 左侧：背景色 + 图标 */}
<div
className="flex-none w-22 flex items-center justify-center text-white relative overflow-hidden dark:brightness-[0.8]"
style={{
backgroundColor: link.backgroundColor || '#bae0ff',
}}
aria-hidden="true"
>
{renderIcon}
{
(link.backgroundColor === '#ffffff' || link.backgroundColor === 'rgb(255, 255, 255)' || link.backgroundColor?.indexOf('rgba(255, 255, 255') === 0) &&
<div className='absolute right-0 top-7/32 h-9/16 w-0 border-r border-card-border z-0'></div>
}
</div>

{/* 右侧：名称 + 描述 */}
<div className="flex-1 flex flex-col justify-center p-3 bg-(--background-main) gap-1">
{/* 名称 */}
<div className="text-[15px] font-semibold text-(--foreground) overflow-hidden text-ellipsis whitespace-nowrap leading-snug">
{link.name}
{/* 左侧：背景色 + 图标 */}
<div
className="flex-none w-22 flex items-center justify-center text-white relative overflow-hidden dark:brightness-[0.8]"
style={{
backgroundColor: link.backgroundColor || '#bae0ff',
}}
aria-hidden="true"
>
{renderIcon}
{(link.backgroundColor === '#ffffff' ||
link.backgroundColor === 'rgb(255, 255, 255)' ||
link.backgroundColor?.indexOf('rgba(255, 255, 255') === 0) && (
<div className="absolute right-0 top-7/32 h-9/16 w-0 border-r border-card-border z-0"></div>
)}
</div>

{/* 描述 */}
{link.description && (
<div className="text-xs text-(--foreground-secondary) overflow-hidden text-ellipsis line-clamp-2 leading-relaxed">
{link.description}

{/* 右侧：名称 + 描述 */}
<div className="w-full flex-1 flex flex-col justify-center p-3 bg-(--background-main) gap-1 overflow-hidden">
{/* 名称 */}
<div className="text-[15px] font-semibold text-(--foreground) overflow-hidden text-ellipsis whitespace-nowrap leading-snug">
{link.name}
</div>
)}
</div>
</Card>
</motion.div>
</Dropdown>

{/* 描述 */}
{link.description && (
<div className="text-xs text-(--foreground-secondary) overflow-hidden text-ellipsis line-clamp-2">
{link.description}
</div>
)}
</div>
</Card>
</motion.div>
</Dropdown>
</div>
);
};
Expand Down
Loading