feat: 重写为 Tauri + React + TypeScript (v4.0)

完全移除旧 C+IUP 代码，改用 Tauri 2.x + React 19 + TypeScript + Rust 技术栈重写。功能与 v3.1 完全等价： - React 前端：Tailwind CSS 4、Zustand 状态管理、i18next 国际化 - Rust 后端：winreg 注册表读写、Win32 API FFI 调用 - 核心逻辑：StringList、UndoRedoManager、PathManager、Import/Export - 深色模式、中英文切换、键盘快捷键、合并预览 - 66 个 Vitest 单元测试 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-30 02:25:55 +08:00 · 2026-05-25 18:32:54 +08:00
parent cdcfd8e0a7
commit 48129a8908
2545 changed files with 12608 additions and 142894 deletions
@@ -0,0 +1,60 @@
+import { useTranslation } from 'react-i18next';
+import { useAppStore } from '@/store/app-store';
+
+interface ActionButtonsProps {
+  onNew: () => void;
+  onEdit: () => void;
+  onBrowse: () => void;
+  onDelete: () => void;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  onClean: () => void;
+}
+
+export function ActionButtons({
+  onNew,
+  onEdit,
+  onBrowse,
+  onDelete,
+  onMoveUp,
+  onMoveDown,
+  onClean,
+}: ActionButtonsProps) {
+  const { t } = useTranslation();
+  const isAdmin = useAppStore((s) => s.isAdmin);
+  const disabled = !isAdmin;
+
+  const btnClass =
+    'px-3 py-1 text-sm rounded border transition-colors disabled:opacity-40 disabled:cursor-not-allowed';
+  const btnStyle = {
+    backgroundColor: 'var(--app-bg)',
+    color: 'var(--app-fg)',
+    borderColor: 'var(--app-border)',
+  };
+
+  return (
+    <div className="flex gap-1 flex-wrap">
+      <button className={btnClass} style={btnStyle} disabled={disabled} onClick={onNew}>
+        {t('button.new')}
+      </button>
+      <button className={btnClass} style={btnStyle} disabled={disabled} onClick={onEdit}>
+        {t('button.edit')}
+      </button>
+      <button className={btnClass} style={btnStyle} disabled={disabled} onClick={onBrowse}>
+        {t('button.browse')}
+      </button>
+      <button className={btnClass} style={btnStyle} disabled={disabled} onClick={onDelete}>
+        {t('button.delete')}
+      </button>
+      <button className={btnClass} style={btnStyle} disabled={disabled} onClick={onMoveUp}>
+        {t('button.moveUp')}
+      </button>
+      <button className={btnClass} style={btnStyle} disabled={disabled} onClick={onMoveDown}>
+        {t('button.moveDown')}
+      </button>
+      <button className={btnClass} style={btnStyle} disabled={disabled} onClick={onClean}>
+        {t('button.clean')}
+      </button>
+    </div>
+  );
+}
@@ -0,0 +1,39 @@
+import { useRef, useEffect } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { useTranslation } from 'react-i18next';
+
+export function SearchInput() {
+  const { t } = useTranslation();
+  const searchQuery = useAppStore((s) => s.searchQuery);
+  const setSearchQuery = useAppStore((s) => s.setSearchQuery);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Ctrl+F 聚焦搜索框
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === 'f') {
+        e.preventDefault();
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
+  return (
+    <input
+      ref={inputRef}
+      type="text"
+      placeholder={t('dialog.search')}
+      value={searchQuery}
+      onChange={(e) => setSearchQuery(e.target.value)}
+      className="px-3 py-1 text-sm rounded border outline-none w-56"
+      style={{
+        backgroundColor: 'var(--app-list-bg)',
+        color: 'var(--app-fg)',
+        borderColor: 'var(--app-border)',
+      }}
+    />
+  );
+}
@@ -0,0 +1,93 @@
+import { useTranslation } from 'react-i18next';
+import { useAppStore } from '@/store/app-store';
+import { SearchInput } from './SearchInput';
+import { ActionButtons } from './ActionButtons';
+import { UndoRedoButtons } from './UndoRedoButtons';
+
+interface ToolBarProps {
+  onNew: () => void;
+  onEdit: () => void;
+  onBrowse: () => void;
+  onDelete: () => void;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  onClean: () => void;
+  onImport: () => void;
+  onExport: () => void;
+  onSave: () => void;
+  onCancel: () => void;
+  onHelp: () => void;
+  onLanguage: () => void;
+  onDarkMode: () => void;
+}
+
+export function ToolBar(props: ToolBarProps) {
+  const { t } = useTranslation();
+  const isAdmin = useAppStore((s) => s.isAdmin);
+  const isModified = useAppStore((s) => s.isModified);
+
+  const sysBtnClass =
+    'px-3 py-1 text-sm rounded border transition-colors disabled:opacity-40 disabled:cursor-not-allowed';
+  const sysBtnStyle = {
+    backgroundColor: 'var(--app-bg)',
+    color: 'var(--app-fg)',
+    borderColor: 'var(--app-border)',
+  };
+
+  return (
+    <div className="space-y-2 pb-2 border-b" style={{ borderColor: 'var(--app-border)' }}>
+      {/* 第一行: 搜索 + 系统按钮 */}
+      <div className="flex items-center gap-2 flex-wrap">
+        <SearchInput />
+        <div className="flex-1" />
+        <UndoRedoButtons />
+        <button
+          className={sysBtnClass}
+          style={sysBtnStyle}
+          disabled={!isAdmin}
+          onClick={props.onImport}
+        >
+          {t('button.import')}
+        </button>
+        <button className={sysBtnClass} style={sysBtnStyle} onClick={props.onExport}>
+          {t('button.export')}
+        </button>
+        <button
+          className={sysBtnClass}
+          style={{
+            ...sysBtnStyle,
+            backgroundColor: isModified ? '#2563eb' : sysBtnStyle.backgroundColor,
+            color: isModified ? '#fff' : sysBtnStyle.color,
+          }}
+          disabled={!isAdmin}
+          onClick={props.onSave}
+        >
+          {t('button.save')}
+        </button>
+        <button className={sysBtnClass} style={sysBtnStyle} onClick={props.onCancel}>
+          {t('button.cancel')}
+        </button>
+        <button className={sysBtnClass} style={sysBtnStyle} onClick={props.onHelp}>
+          {t('button.help')}
+        </button>
+        <button className={sysBtnClass} style={sysBtnStyle} onClick={props.onLanguage}>
+          {t('button.language')}
+        </button>
+        <button className={sysBtnClass} style={sysBtnStyle} onClick={props.onDarkMode}>
+          {t('button.darkMode')}
+        </button>
+      </div>
+
+      {/* 第二行: CRUD 操作 */}
+      <ActionButtons
+        onNew={props.onNew}
+        onEdit={props.onEdit}
+        onBrowse={props.onBrowse}
+        onDelete={props.onDelete}
+        onMoveUp={props.onMoveUp}
+        onMoveDown={props.onMoveDown}
+        onClean={props.onClean}
+      />
+    </div>
+  );
+}
@@ -0,0 +1,42 @@
+import { useTranslation } from 'react-i18next';
+import { useAppStore } from '@/store/app-store';
+
+export function UndoRedoButtons() {
+  const { t } = useTranslation();
+  const isAdmin = useAppStore((s) => s.isAdmin);
+  const undoRedo = useAppStore((s) => s.undoRedo);
+  const undo = useAppStore((s) => s.undo);
+  const redo = useAppStore((s) => s.redo);
+
+  const btnClass =
+    'px-3 py-1 text-sm rounded border transition-colors disabled:opacity-40 disabled:cursor-not-allowed';
+  const btnStyle = {
+    backgroundColor: 'var(--app-bg)',
+    color: 'var(--app-fg)',
+    borderColor: 'var(--app-border)',
+  };
+
+  // 订阅状态更新（canUndo/canRedo 不会触发 re-render，用 setTimeout 简单轮询不优雅，但 Zustand 的 subscribe 可以）
+  // 这里简化为每次渲染时检查（因为 undo/redo 会修改列表触发重渲染）
+
+  return (
+    <div className="flex gap-1">
+      <button
+        className={btnClass}
+        style={btnStyle}
+        disabled={!isAdmin || !undoRedo.canUndo()}
+        onClick={undo}
+      >
+        {t('button.undo')}
+      </button>
+      <button
+        className={btnClass}
+        style={btnStyle}
+        disabled={!isAdmin || !undoRedo.canRedo()}
+        onClick={redo}
+      >
+        {t('button.redo')}
+      </button>
+    </div>
+  );
+}