mirror of
https://github.com/LHY0125/PathEditor.git
synced 2026-07-01 03:25:54 +08:00
chore: 开源项目基础设施全面完善
新增配置文件: - .editorconfig — 跨编辑器代码风格统一 - .gitattributes — 行尾符 CRLF 规范化 - .prettierrc + .prettierignore — 前端代码格式化 - .markdownlint.json — Markdown 格式规范 - commitlint.config.js — Conventional Commits 强制校验 新增 GitHub 社区文件: - .github/dependabot.yml — 依赖自动更新 (npm + Cargo + Actions) - .github/CODEOWNERS — 自动 PR 审查分配 - .github/FUNDING.yml — 开源赞助入口 新增文档: - ROADMAP.md — v5.1/v5.2/v6.0 路线图 - SUPPORT.md — 帮助与支持指南 - docs/screenshots/ — 截图目录就位 新增 Git Hooks: - .husky/pre-commit — lint-staged 自动格式化+修复 - .husky/commit-msg — commitlint 校验提交消息 CI 强化 (.github/workflows/ci.yml): - 新增 Prettier 格式检查步骤 - 新增 cargo fmt --check 步骤 - 新增 Vitest 覆盖率生成 + Codecov 上报 修复: - index.html 标题 v4.0 → v5.0 - PathEditDialog set-state-in-effect 改用 useRef prevOpen 守卫 - use-app-actions.test.tsx 缺失 @vitest-environment jsdom - 所有 TS/TSX 文件 Prettier 格式化统一 配置更新: - vitest.config.ts — v8 覆盖率 + 阈值门禁 (60%/70%) - package.json — format/format:check/test:coverage/prepare 脚本 + lint-staged - .gitignore — 新增 coverage/sync-conflict/playwright-report - README.md — 新增 coverage + platform 徽章 + 截图区域
This commit is contained in:
@@ -66,7 +66,10 @@ export function AnalyzeDialog({ open, onClose }: Props) {
|
||||
<Modal open={open} onClose={onClose}>
|
||||
<div className="flex flex-col" style={{ width: 680, maxHeight: '75vh' }}>
|
||||
{/* 标题栏 */}
|
||||
<div className="flex items-center justify-between px-5 py-3 border-b" style={{ borderColor: 'var(--app-border)' }}>
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-3 border-b"
|
||||
style={{ borderColor: 'var(--app-border)' }}
|
||||
>
|
||||
<h2 className="text-base font-semibold">{t('analyze.title')}</h2>
|
||||
<div className="flex gap-1">
|
||||
{(['conflicts', 'tools'] as TabType[]).map((tb) => (
|
||||
@@ -88,7 +91,10 @@ export function AnalyzeDialog({ open, onClose }: Props) {
|
||||
{/* 内容 */}
|
||||
<div className="flex-1 overflow-auto p-4">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12 text-sm" style={{ color: 'var(--app-fg)', opacity: 0.6 }}>
|
||||
<div
|
||||
className="flex items-center justify-center py-12 text-sm"
|
||||
style={{ color: 'var(--app-fg)', opacity: 0.6 }}
|
||||
>
|
||||
{t('analyze.scanning')}
|
||||
</div>
|
||||
) : tab === 'conflicts' ? (
|
||||
@@ -214,5 +220,7 @@ function EmptyHint({ text }: { text: string }) {
|
||||
|
||||
function getEnabledPaths(): string[] {
|
||||
const { sysPaths, userPaths } = useAppStore.getState();
|
||||
return [...sysPaths.filter((e) => e.enabled), ...userPaths.filter((e) => e.enabled)].map((e) => e.path);
|
||||
return [...sysPaths.filter((e) => e.enabled), ...userPaths.filter((e) => e.enabled)].map(
|
||||
(e) => e.path,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
|
||||
interface HelpDialogProps { open: boolean; onClose: () => void; }
|
||||
interface HelpDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function HelpDialog({ open, onClose }: HelpDialogProps) {
|
||||
const { t } = useTranslation();
|
||||
@@ -9,9 +12,15 @@ export function HelpDialog({ open, onClose }: HelpDialogProps) {
|
||||
return (
|
||||
<Modal open={open} onClose={onClose}>
|
||||
<h2 className="text-lg font-semibold mb-4">{t('dialog.helpTitle')}</h2>
|
||||
<pre className="text-sm whitespace-pre-wrap font-sans leading-relaxed max-w-lg">{t('help.content')}</pre>
|
||||
<pre className="text-sm whitespace-pre-wrap font-sans leading-relaxed max-w-lg">
|
||||
{t('help.content')}
|
||||
</pre>
|
||||
<div className="flex justify-end mt-4">
|
||||
<button className="px-4 py-1.5 text-sm rounded text-white" style={{ backgroundColor: '#2563eb' }} onClick={onClose}>
|
||||
<button
|
||||
className="px-4 py-1.5 text-sm rounded text-white"
|
||||
style={{ backgroundColor: '#2563eb' }}
|
||||
onClick={onClose}
|
||||
>
|
||||
{t('dialog.confirm')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,13 @@ interface ImportDialogProps {
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export function ImportDialog({ open, systemCount, userCount, onSelect, onCancel }: ImportDialogProps) {
|
||||
export function ImportDialog({
|
||||
open,
|
||||
systemCount,
|
||||
userCount,
|
||||
onSelect,
|
||||
onCancel,
|
||||
}: ImportDialogProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
@@ -21,10 +27,40 @@ export function ImportDialog({ open, systemCount, userCount, onSelect, onCancel
|
||||
{userCount > 0 && `用户变量: ${userCount} 条`}
|
||||
</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
{systemCount > 0 && <button className="px-4 py-2 text-sm rounded border text-left" style={{ borderColor: 'var(--app-border)' }} onClick={() => onSelect('system')}>{t('dialog.importSystem')}</button>}
|
||||
{userCount > 0 && <button className="px-4 py-2 text-sm rounded border text-left" style={{ borderColor: 'var(--app-border)' }} onClick={() => onSelect('user')}>{t('dialog.importUser')}</button>}
|
||||
{systemCount > 0 && userCount > 0 && <button className="px-4 py-2 text-sm rounded border text-left" style={{ borderColor: 'var(--app-border)' }} onClick={() => onSelect('both')}>{t('dialog.importBoth')}</button>}
|
||||
<button className="px-4 py-2 text-sm rounded border mt-2" style={{ borderColor: 'var(--app-border)' }} onClick={onCancel}>{t('dialog.cancel')}</button>
|
||||
{systemCount > 0 && (
|
||||
<button
|
||||
className="px-4 py-2 text-sm rounded border text-left"
|
||||
style={{ borderColor: 'var(--app-border)' }}
|
||||
onClick={() => onSelect('system')}
|
||||
>
|
||||
{t('dialog.importSystem')}
|
||||
</button>
|
||||
)}
|
||||
{userCount > 0 && (
|
||||
<button
|
||||
className="px-4 py-2 text-sm rounded border text-left"
|
||||
style={{ borderColor: 'var(--app-border)' }}
|
||||
onClick={() => onSelect('user')}
|
||||
>
|
||||
{t('dialog.importUser')}
|
||||
</button>
|
||||
)}
|
||||
{systemCount > 0 && userCount > 0 && (
|
||||
<button
|
||||
className="px-4 py-2 text-sm rounded border text-left"
|
||||
style={{ borderColor: 'var(--app-border)' }}
|
||||
onClick={() => onSelect('both')}
|
||||
>
|
||||
{t('dialog.importBoth')}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="px-4 py-2 text-sm rounded border mt-2"
|
||||
style={{ borderColor: 'var(--app-border)' }}
|
||||
onClick={onCancel}
|
||||
>
|
||||
{t('dialog.cancel')}
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
|
||||
@@ -10,30 +10,54 @@ interface PathEditDialogProps {
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export function PathEditDialog({ open, title, initialValue, onConfirm, onCancel }: PathEditDialogProps) {
|
||||
export function PathEditDialog({
|
||||
open,
|
||||
title,
|
||||
initialValue,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}: PathEditDialogProps) {
|
||||
const { t } = useTranslation();
|
||||
const [value, setValue] = useState(initialValue);
|
||||
const prevOpen = useRef(open);
|
||||
|
||||
// 对话框打开时重置输入值 — 此模式不会导致级联渲染
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
useEffect(() => { if (open) setValue(initialValue); }, [open, initialValue]);
|
||||
useEffect(() => {
|
||||
if (open && !prevOpen.current) setValue(initialValue);
|
||||
prevOpen.current = open;
|
||||
}, [open, initialValue]);
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onCancel}>
|
||||
<h2 className="text-lg font-semibold mb-4">{title}</h2>
|
||||
<label className="text-sm mb-2 block">{t('dialog.pathLabel')}</label>
|
||||
<input
|
||||
type="text" autoFocus value={value}
|
||||
type="text"
|
||||
autoFocus
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') onConfirm(value); }}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') onConfirm(value);
|
||||
}}
|
||||
className="w-full min-w-[400px] px-3 py-2 rounded border text-sm outline-none"
|
||||
style={{ backgroundColor: 'var(--app-list-bg)', color: 'var(--app-fg)', borderColor: 'var(--app-border)' }}
|
||||
style={{
|
||||
backgroundColor: 'var(--app-list-bg)',
|
||||
color: 'var(--app-fg)',
|
||||
borderColor: 'var(--app-border)',
|
||||
}}
|
||||
/>
|
||||
<div className="flex justify-end gap-2 mt-4">
|
||||
<button className="px-4 py-1.5 text-sm rounded border" style={{ borderColor: 'var(--app-border)' }} onClick={onCancel}>
|
||||
<button
|
||||
className="px-4 py-1.5 text-sm rounded border"
|
||||
style={{ borderColor: 'var(--app-border)' }}
|
||||
onClick={onCancel}
|
||||
>
|
||||
{t('dialog.cancel')}
|
||||
</button>
|
||||
<button className="px-4 py-1.5 text-sm rounded text-white" style={{ backgroundColor: '#2563eb' }} onClick={() => onConfirm(value)}>
|
||||
<button
|
||||
className="px-4 py-1.5 text-sm rounded text-white"
|
||||
style={{ backgroundColor: '#2563eb' }}
|
||||
onClick={() => onConfirm(value)}
|
||||
>
|
||||
{t('dialog.confirm')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -65,13 +65,13 @@ export function ProfileDialog({ open, onClose }: Props) {
|
||||
if (!selected || !selectedData) return;
|
||||
if (!window.confirm(t('profile.applyConfirm', { name: selected }))) return;
|
||||
useAppStore.getState().replaceBothPaths(
|
||||
selectedData.sys.map(e => e.path),
|
||||
selectedData.user.map(e => e.path),
|
||||
selectedData.sys.map((e) => e.path),
|
||||
selectedData.user.map((e) => e.path),
|
||||
);
|
||||
// 同步 disabled 状态
|
||||
await invoke('save_disabled_state', {
|
||||
system: selectedData.sys.filter(e => !e.enabled).map(e => e.path),
|
||||
user: selectedData.user.filter(e => !e.enabled).map(e => e.path),
|
||||
system: selectedData.sys.filter((e) => !e.enabled).map((e) => e.path),
|
||||
user: selectedData.user.filter((e) => !e.enabled).map((e) => e.path),
|
||||
});
|
||||
await useAppStore.getState().savePaths();
|
||||
onClose();
|
||||
@@ -80,7 +80,10 @@ export function ProfileDialog({ open, onClose }: Props) {
|
||||
const handleDelete = async (name: string) => {
|
||||
if (!window.confirm(`删除配置文件 "${name}"?`)) return;
|
||||
await invoke('delete_profile', { name });
|
||||
if (selected === name) { setSelected(null); setSelectedData(null); }
|
||||
if (selected === name) {
|
||||
setSelected(null);
|
||||
setSelectedData(null);
|
||||
}
|
||||
refreshProfiles();
|
||||
};
|
||||
|
||||
@@ -95,16 +98,23 @@ export function ProfileDialog({ open, onClose }: Props) {
|
||||
return (
|
||||
<Modal open={open} onClose={onClose}>
|
||||
<div className="flex flex-col" style={{ width: 680, maxHeight: '75vh' }}>
|
||||
<div className="flex items-center justify-between px-5 py-3 border-b" style={{ borderColor: 'var(--app-border)' }}>
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-3 border-b"
|
||||
style={{ borderColor: 'var(--app-border)' }}
|
||||
>
|
||||
<h2 className="text-base font-semibold">{t('profile.title')}</h2>
|
||||
<div className="flex gap-2 items-center">
|
||||
<input
|
||||
type="text"
|
||||
value={newName}
|
||||
onChange={e => setNewName(e.target.value)}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
placeholder={t('profile.namePlaceholder')}
|
||||
className="px-2 py-1 text-sm rounded border outline-none w-44"
|
||||
style={{ backgroundColor: 'var(--app-list-bg)', color: 'var(--app-fg)', borderColor: 'var(--app-border)' }}
|
||||
style={{
|
||||
backgroundColor: 'var(--app-list-bg)',
|
||||
color: 'var(--app-fg)',
|
||||
borderColor: 'var(--app-border)',
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className="px-3 py-1 text-sm rounded text-white"
|
||||
@@ -127,11 +137,16 @@ export function ProfileDialog({ open, onClose }: Props) {
|
||||
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* 左侧:列表 */}
|
||||
<div className="w-48 border-r overflow-auto p-2" style={{ borderColor: 'var(--app-border)' }}>
|
||||
<div
|
||||
className="w-48 border-r overflow-auto p-2"
|
||||
style={{ borderColor: 'var(--app-border)' }}
|
||||
>
|
||||
{profiles.length === 0 ? (
|
||||
<div className="text-xs text-center py-6" style={{ opacity: 0.5 }}>{t('profile.noProfiles')}</div>
|
||||
<div className="text-xs text-center py-6" style={{ opacity: 0.5 }}>
|
||||
{t('profile.noProfiles')}
|
||||
</div>
|
||||
) : (
|
||||
profiles.map(p => (
|
||||
profiles.map((p) => (
|
||||
<div
|
||||
key={p.name}
|
||||
onClick={() => handleLoad(p.name)}
|
||||
@@ -157,7 +172,9 @@ export function ProfileDialog({ open, onClose }: Props) {
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="font-semibold text-sm">{selectedData.name}</span>
|
||||
<span className="text-xs" style={{ opacity: 0.5 }}>{selectedData.modified}</span>
|
||||
<span className="text-xs" style={{ opacity: 0.5 }}>
|
||||
{selectedData.modified}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-1.5 mb-3">
|
||||
@@ -171,7 +188,10 @@ export function ProfileDialog({ open, onClose }: Props) {
|
||||
<button
|
||||
className="px-3 py-1 text-xs rounded"
|
||||
style={{ backgroundColor: 'var(--app-list-bg)', color: 'var(--app-fg)' }}
|
||||
onClick={() => { setRenameOpen(true); setRenameValue(selectedData.name); }}
|
||||
onClick={() => {
|
||||
setRenameOpen(true);
|
||||
setRenameValue(selectedData.name);
|
||||
}}
|
||||
>
|
||||
{t('profile.rename')}
|
||||
</button>
|
||||
@@ -189,18 +209,32 @@ export function ProfileDialog({ open, onClose }: Props) {
|
||||
<input
|
||||
type="text"
|
||||
value={renameValue}
|
||||
onChange={e => setRenameValue(e.target.value)}
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
className="px-2 py-1 text-xs rounded border outline-none"
|
||||
style={{ backgroundColor: 'var(--app-list-bg)', color: 'var(--app-fg)', borderColor: 'var(--app-border)' }}
|
||||
style={{
|
||||
backgroundColor: 'var(--app-list-bg)',
|
||||
color: 'var(--app-fg)',
|
||||
borderColor: 'var(--app-border)',
|
||||
}}
|
||||
/>
|
||||
<button className="px-2 py-1 text-xs rounded text-white" style={{ backgroundColor: '#3b82f6' }} onClick={handleRename}>
|
||||
<button
|
||||
className="px-2 py-1 text-xs rounded text-white"
|
||||
style={{ backgroundColor: '#3b82f6' }}
|
||||
onClick={handleRename}
|
||||
>
|
||||
确认
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<PathSection title={`系统 PATH (${selectedData.sys.length})`} paths={selectedData.sys} />
|
||||
<PathSection title={`用户 PATH (${selectedData.user.length})`} paths={selectedData.user} />
|
||||
<PathSection
|
||||
title={`系统 PATH (${selectedData.sys.length})`}
|
||||
paths={selectedData.sys}
|
||||
/>
|
||||
<PathSection
|
||||
title={`用户 PATH (${selectedData.user.length})`}
|
||||
paths={selectedData.user}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -213,9 +247,13 @@ export function ProfileDialog({ open, onClose }: Props) {
|
||||
function PathSection({ title, paths }: { title: string; paths: PathEntry[] }) {
|
||||
return (
|
||||
<div className="mb-2">
|
||||
<div className="text-xs font-medium mb-1" style={{ opacity: 0.7 }}>{title}</div>
|
||||
<div className="text-xs font-medium mb-1" style={{ opacity: 0.7 }}>
|
||||
{title}
|
||||
</div>
|
||||
{paths.length === 0 ? (
|
||||
<div className="text-xs" style={{ opacity: 0.4 }}>(空)</div>
|
||||
<div className="text-xs" style={{ opacity: 0.4 }}>
|
||||
(空)
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-0.5 max-h-48 overflow-auto">
|
||||
{paths.map((e, i) => (
|
||||
|
||||
@@ -28,19 +28,32 @@ export function AppShell() {
|
||||
const setSelectedIndices = useAppStore((s) => s.setSelectedIndices);
|
||||
|
||||
const [editDialog, setEditDialog] = useState<DialogState['editDialog']>({
|
||||
open: false, index: -1, value: '', target: TargetType.SYSTEM,
|
||||
open: false,
|
||||
index: -1,
|
||||
value: '',
|
||||
target: TargetType.SYSTEM,
|
||||
});
|
||||
const [newDialog, setNewDialog] = useState(false);
|
||||
const [helpOpen, setHelpOpen] = useState(false);
|
||||
const [importDialog, setImportDialog] = useState<DialogState['importDialog']>({
|
||||
open: false, system: [], user: [],
|
||||
open: false,
|
||||
system: [],
|
||||
user: [],
|
||||
});
|
||||
const [analyzeOpen, setAnalyzeOpen] = useState(false);
|
||||
const [profilesOpen, setProfilesOpen] = useState(false);
|
||||
|
||||
const actions = useAppActions(activeTab, {
|
||||
editDialog, newDialog, helpOpen, importDialog,
|
||||
setEditDialog, setNewDialog, setHelpOpen, setImportDialog, setAnalyzeOpen, setProfilesOpen,
|
||||
editDialog,
|
||||
newDialog,
|
||||
helpOpen,
|
||||
importDialog,
|
||||
setEditDialog,
|
||||
setNewDialog,
|
||||
setHelpOpen,
|
||||
setImportDialog,
|
||||
setAnalyzeOpen,
|
||||
setProfilesOpen,
|
||||
});
|
||||
|
||||
const tabConfig: { id: TabId; label: string }[] = [
|
||||
@@ -50,14 +63,20 @@ export function AppShell() {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen" style={{ backgroundColor: 'var(--app-bg)', color: 'var(--app-fg)' }}>
|
||||
<div
|
||||
className="flex flex-col h-screen"
|
||||
style={{ backgroundColor: 'var(--app-bg)', color: 'var(--app-fg)' }}
|
||||
>
|
||||
<TitleBar />
|
||||
|
||||
<div className="flex border-b px-4" style={{ borderColor: 'var(--app-border)' }}>
|
||||
{tabConfig.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => { setActiveTab(tab.id); setSelectedIndices([]); }}
|
||||
onClick={() => {
|
||||
setActiveTab(tab.id);
|
||||
setSelectedIndices([]);
|
||||
}}
|
||||
className={`px-4 py-1.5 text-sm font-medium transition-colors ${activeTab === tab.id ? 'tab-active' : 'opacity-60'}`}
|
||||
style={{ color: activeTab === tab.id ? '#3b82f6' : 'var(--app-fg)' }}
|
||||
>
|
||||
@@ -96,7 +115,10 @@ export function AppShell() {
|
||||
|
||||
<div
|
||||
className="flex-1 overflow-auto"
|
||||
onDragOver={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'link'; }}
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'link';
|
||||
}}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
if (activeTab === 'merged') return;
|
||||
@@ -104,20 +126,47 @@ export function AppShell() {
|
||||
const entry = e.dataTransfer.items[i].webkitGetAsEntry();
|
||||
if (entry?.isDirectory) {
|
||||
const file = e.dataTransfer.files[i] as TauriFile;
|
||||
if (file.path) useAppStore.getState().addPath(file.path, activeTab === 'user' ? TargetType.USER : TargetType.SYSTEM);
|
||||
if (file.path)
|
||||
useAppStore
|
||||
.getState()
|
||||
.addPath(file.path, activeTab === 'user' ? TargetType.USER : TargetType.SYSTEM);
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{activeTab === 'merged' ? <MergePreview /> : <PathTable tabId={activeTab as 'system' | 'user'} />}
|
||||
{activeTab === 'merged' ? (
|
||||
<MergePreview />
|
||||
) : (
|
||||
<PathTable tabId={activeTab as 'system' | 'user'} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<StatusBar />
|
||||
|
||||
<PathEditDialog open={newDialog} title={t('dialog.newPath')} initialValue="" onConfirm={actions.handleNewConfirm} onCancel={() => setNewDialog(false)} />
|
||||
<PathEditDialog open={editDialog.open} title={t('dialog.editPath')} initialValue={editDialog.value} onConfirm={actions.handleEditConfirm} onCancel={() => setEditDialog({ open: false, index: -1, value: '', target: TargetType.SYSTEM })} />
|
||||
<PathEditDialog
|
||||
open={newDialog}
|
||||
title={t('dialog.newPath')}
|
||||
initialValue=""
|
||||
onConfirm={actions.handleNewConfirm}
|
||||
onCancel={() => setNewDialog(false)}
|
||||
/>
|
||||
<PathEditDialog
|
||||
open={editDialog.open}
|
||||
title={t('dialog.editPath')}
|
||||
initialValue={editDialog.value}
|
||||
onConfirm={actions.handleEditConfirm}
|
||||
onCancel={() =>
|
||||
setEditDialog({ open: false, index: -1, value: '', target: TargetType.SYSTEM })
|
||||
}
|
||||
/>
|
||||
<HelpDialog open={helpOpen} onClose={() => setHelpOpen(false)} />
|
||||
<ImportDialog open={importDialog.open} systemCount={importDialog.system.length} userCount={importDialog.user.length} onSelect={actions.handleImportSelect} onCancel={() => setImportDialog({ open: false, system: [], user: [] })} />
|
||||
<ImportDialog
|
||||
open={importDialog.open}
|
||||
systemCount={importDialog.system.length}
|
||||
userCount={importDialog.user.length}
|
||||
onSelect={actions.handleImportSelect}
|
||||
onCancel={() => setImportDialog({ open: false, system: [], user: [] })}
|
||||
/>
|
||||
<AnalyzeDialog open={analyzeOpen} onClose={() => setAnalyzeOpen(false)} />
|
||||
<ProfileDialog open={profilesOpen} onClose={() => setProfilesOpen(false)} />
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
import { Component, type ReactNode } from 'react';
|
||||
|
||||
interface Props { children: ReactNode; }
|
||||
interface State { hasError: boolean; error: string; }
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
}
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: string;
|
||||
}
|
||||
|
||||
export class ErrorBoundary extends Component<Props, State> {
|
||||
state: State = { hasError: false, error: '' };
|
||||
@@ -18,7 +23,10 @@ export class ErrorBoundary extends Component<Props, State> {
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen" style={{ backgroundColor: 'var(--app-bg)', color: 'var(--app-fg)' }}>
|
||||
<div
|
||||
className="flex items-center justify-center h-screen"
|
||||
style={{ backgroundColor: 'var(--app-bg)', color: 'var(--app-fg)' }}
|
||||
>
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="text-xl font-bold">应用出错</h2>
|
||||
<p className="text-sm opacity-70">{this.state.error}</p>
|
||||
|
||||
@@ -11,9 +11,7 @@ export function TitleBar() {
|
||||
className="flex items-center justify-between px-4 py-2 border-b select-none"
|
||||
style={{ borderColor: 'var(--app-border)' }}
|
||||
>
|
||||
<h1 className="text-lg font-semibold">
|
||||
{isAdmin ? t('app.name') : t('app.nameReadonly')}
|
||||
</h1>
|
||||
<h1 className="text-lg font-semibold">{isAdmin ? t('app.name') : t('app.nameReadonly')}</h1>
|
||||
<span className="text-sm opacity-60">v{version}</span>
|
||||
</header>
|
||||
);
|
||||
|
||||
@@ -56,8 +56,7 @@ export function MergePreview() {
|
||||
<tr
|
||||
key={`${source}-${displayIndex}`}
|
||||
style={{
|
||||
backgroundColor:
|
||||
rowIdx % 2 === 0 ? 'var(--app-list-bg)' : 'var(--app-list-alt)',
|
||||
backgroundColor: rowIdx % 2 === 0 ? 'var(--app-list-bg)' : 'var(--app-list-alt)',
|
||||
color: 'var(--app-fg)',
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -42,7 +42,8 @@ export function PathTable({ tabId }: PathTableProps) {
|
||||
const result: PathRow[] = [];
|
||||
for (let i = 0; i < paths.length; i++) {
|
||||
const p = paths[i];
|
||||
if (p.path.toLowerCase().includes(q)) result.push({ path: p.path, index: i, enabled: p.enabled });
|
||||
if (p.path.toLowerCase().includes(q))
|
||||
result.push({ path: p.path, index: i, enabled: p.enabled });
|
||||
}
|
||||
return result;
|
||||
}, [paths, searchQuery]);
|
||||
@@ -74,15 +75,15 @@ export function PathTable({ tabId }: PathTableProps) {
|
||||
});
|
||||
});
|
||||
|
||||
return () => { cancelled = true; };
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [paths]);
|
||||
|
||||
// 异步展开环境变量(用于 tooltip)
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
const toExpand = paths.filter(
|
||||
(p) => p.path.includes('%') && !expandedRef.current.has(p.path),
|
||||
);
|
||||
const toExpand = paths.filter((p) => p.path.includes('%') && !expandedRef.current.has(p.path));
|
||||
if (toExpand.length === 0) return;
|
||||
|
||||
const batch = toExpand.slice(0, 20);
|
||||
@@ -105,7 +106,9 @@ export function PathTable({ tabId }: PathTableProps) {
|
||||
});
|
||||
});
|
||||
|
||||
return () => { cancelled = true; };
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [paths]);
|
||||
|
||||
// 所有路径默认有效(异步验证结果回来后再精确染色)
|
||||
@@ -194,7 +197,10 @@ export function PathTable({ tabId }: PathTableProps) {
|
||||
: 'var(--app-list-alt)',
|
||||
}}
|
||||
>
|
||||
<td className="w-8 px-2 py-0.5 text-xs opacity-50" style={{ color: 'var(--app-fg)' }}>
|
||||
<td
|
||||
className="w-8 px-2 py-0.5 text-xs opacity-50"
|
||||
style={{ color: 'var(--app-fg)' }}
|
||||
>
|
||||
{index + 1}
|
||||
</td>
|
||||
<td className="w-6 px-1 py-0.5">
|
||||
|
||||
@@ -36,12 +36,7 @@ export function ToolBar(props: ToolBarProps) {
|
||||
<SearchInput />
|
||||
<div className="flex-1" />
|
||||
<UndoRedoButtons />
|
||||
<button
|
||||
className={btnClass}
|
||||
style={btnStyle}
|
||||
disabled={!isAdmin}
|
||||
onClick={props.onImport}
|
||||
>
|
||||
<button className={btnClass} style={btnStyle} disabled={!isAdmin} onClick={props.onImport}>
|
||||
{t('button.import')}
|
||||
</button>
|
||||
<button className={btnClass} style={btnStyle} onClick={props.onExport}>
|
||||
|
||||
@@ -9,7 +9,9 @@ interface ModalProps {
|
||||
export function Modal({ open, onClose, children }: ModalProps) {
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
window.addEventListener('keydown', handler);
|
||||
return () => window.removeEventListener('keydown', handler);
|
||||
}, [open, onClose]);
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export const btnClass = 'px-3 py-1 text-sm rounded border transition-colors disabled:opacity-40 disabled:cursor-not-allowed';
|
||||
export const btnClass =
|
||||
'px-3 py-1 text-sm rounded border transition-colors disabled:opacity-40 disabled:cursor-not-allowed';
|
||||
|
||||
export const btnStyle: React.CSSProperties = {
|
||||
backgroundColor: 'var(--app-bg)',
|
||||
|
||||
Reference in New Issue
Block a user