feat: finished basic functio

frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@fluentui/react-components": "^9.56.2",
+        "@fluentui/react-icons": "^2.0.266",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -16,6 +17,8 @@
         "@types/react": "^18.0.17",
         "@types/react-dom": "^18.0.6",
         "@vitejs/plugin-react": "^2.0.1",
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.4.49",
         "tailwindcss": "^3.4.15",
         "typescript": "^4.6.4",
         "vite": "^3.0.7"
@@ -2602,6 +2605,44 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.20",
+      "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3363,6 +3404,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
@@ -3755,6 +3810,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmmirror.com/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",

frontend/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@fluentui/react-components": "^9.56.2",
+    "@fluentui/react-icons": "^2.0.266",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

frontend/package.json.md5

@@ -1 +1 @@
-c5764cc06684403f68bdc08107b7dc4a
+d96d5e55cba5f9d68f0aa1d714fb5f1a

frontend/pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@fluentui/react-components':
         specifier: ^9.56.2
         version: 9.56.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)
+      '@fluentui/react-icons':
+        specifier: ^2.0.266
+        version: 2.0.266(react@18.3.1)
       react:
         specifier: ^18.2.0
         version: 18.3.1

frontend/src/App.tsx

@@ -1,5 +1,24 @@
+import React, { useEffect } from 'react'
 import { useState } from 'react'
-import { Button } from '@fluentui/react-components'
+import {
+  Button,
+  createTableColumn,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  DialogTrigger,
+  Field,
+  Input,
+  Radio,
+  RadioGroup,
+  TableColumnDefinition,
+  TableColumnSizingOptions,
+  useTableColumnSizing_unstable,
+  useTableFeatures,
+} from '@fluentui/react-components'
 import {
   TableBody,
   TableCell,
@@ -8,18 +27,272 @@ import {
   TableHeader,
   TableHeaderCell,
   TableCellLayout,
-  PresenceBadgeStatus,
-  Avatar,
+  makeStyles,
+  tokens,
 } from '@fluentui/react-components'
+import {
+  ClockRegular,
+  CheckmarkRegular,
+  DismissRegular,
+  DocumentArrowRightRegular,
+} from '@fluentui/react-icons'
+
+import { Status, Item, SaveTo } from './types'
+import { SelectFiles, SelectFolder, ProcessFiles } from '../wailsjs/go/main/App'
+import { main } from '../wailsjs/go/models'
+import { EventsOn } from '../wailsjs/runtime/runtime'
+
+const columnsDef: TableColumnDefinition<Item>[] = [
+  createTableColumn<Item>({
+    columnId: 'status',
+    renderHeaderCell: () => <>状态</>,
+  }),
+  createTableColumn<Item>({
+    columnId: 'file',
+    renderHeaderCell: () => <>文件</>,
+  }),
+]
+
+const useStyles = makeStyles({
+  iconGreen: {
+    color: tokens.colorPaletteGreenForeground1,
+  },
+  iconRed: {
+    color: tokens.colorPaletteRedForeground1,
+  },
+  iconYellow: {
+    color: tokens.colorPaletteYellowForeground1,
+  },
+})
 
 export const App = () => {
+  const styles = useStyles()
+
+  const [items, setItems] = useState<Item[]>([])
+  const [isProcessing, setIsProcessing] = useState(false)
+
+  const [totalFilesNeedToProcess, setTotalFilesNeedToProcess] = useState(0)
+  const [finishedCount, setFinishedCount] = useState(0)
+
+  const [saveTo, setSaveTo] = useState<SaveTo>('original')
+  const [savePath, setSavePath] = useState('')
+
+  const [message, setMessage] = useState('')
+  const [open, setOpen] = useState(false)
+
+  const [columns] = React.useState<TableColumnDefinition<Item>[]>(columnsDef)
+  const [columnSizingOptions] = React.useState<TableColumnSizingOptions>({
+    status: {
+      idealWidth: 100,
+      minWidth: 100,
+    },
+    file: {
+      idealWidth: 150,
+      minWidth: 150,
+    },
+  })
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const { getRows, columnSizing_unstable, tableRef } = useTableFeatures(
+    {
+      columns,
+      items,
+    },
+    [useTableColumnSizing_unstable({ columnSizingOptions })]
+  )
+
+  // return the icon based on the status
+  const statusMapIcon = (status: Status) => {
+    switch (status) {
+      case 'pending':
+        return <ClockRegular />
+      case 'processing':
+        return <DocumentArrowRightRegular className={styles.iconYellow} />
+      case 'done':
+        return <CheckmarkRegular className={styles.iconGreen} />
+      case 'error':
+        return <DismissRegular className={styles.iconRed} />
+      default:
+    }
+  }
+
+  // return the text based on the status
+  const statusMapText = (status: Status) => {
+    switch (status) {
+      case 'pending':
+        return '等待'
+      case 'processing':
+        return '处理'
+      case 'done':
+        return '完成'
+      case 'error':
+        return '错误'
+    }
+  }
+
+  const selectFiles = () => {
+    SelectFiles().then(files => {
+      for (const file of files) {
+        setItems(prev => [...prev, { file, status: 'pending' }])
+      }
+      setTotalFilesNeedToProcess(files.length)
+    })
+  }
+
+  const showDialog = (message: string) => {
+    setMessage(message)
+    setOpen(true)
+  }
+
+  const startProcess = async () => {
+    // 未添加文件时
+    if (items.length === 0) {
+      showDialog('当前文件列表为空，请先添加文件。')
+      return
+    }
+    // 检查所有文件是否都已处理完毕
+    let isAllFinished = true
+    for (const item of items) {
+      if (item.status === 'pending') {
+        isAllFinished = false
+        break
+      }
+    }
+    if (isAllFinished) {
+      showDialog('当前文件列表已全部处理完毕，请重新添加新的文件。')
+      return
+    }
+    setIsProcessing(true)
+    const ncmFiles: main.NcmFile[] = []
+    items.forEach(item => {
+      ncmFiles.push({
+        Name: item.file,
+        Status: item.status,
+      })
+    })
+    ProcessFiles(ncmFiles, savePath).then(() => {})
+  }
+
+  useEffect(() => {
+    EventsOn('file-status-changed', (index: number, status: Status) => {
+      if (status == 'done' || status === 'error') {
+        setFinishedCount(prev => prev + 1)
+      }
+      setItems(prev => {
+        const newItems = [...prev]
+        newItems[index].status = status
+        return newItems
+      })
+    })
+  }, [])
+
+  useEffect(() => {
+    if (finishedCount === totalFilesNeedToProcess) {
+      setFinishedCount(0)
+      setTotalFilesNeedToProcess(0)
+      setIsProcessing(false)
+    }
+  }, [finishedCount])
+
   return (
-    <div className='p-2'>
-      <div className="flex space-between gap-2">
-        <Button>添加文件</Button>
-        <Button>清除列表</Button>
-        <Button appearance="primary">开始转换</Button>
+    <div className="p-3">
+      <Dialog
+        // this controls the dialog open state
+        open={open}
+        onOpenChange={(event, data) => {
+          // it is the users responsibility to react accordingly to the open state change
+          setOpen(data.open)
+        }}
+      >
+        <DialogSurface style={{ width: '400px' }}>
+          <DialogBody>
+            <DialogTitle>警告</DialogTitle>
+            <DialogContent>{message}</DialogContent>
+            <DialogActions>
+              <DialogTrigger disableButtonEnhancement>
+                <Button appearance="primary">关闭</Button>
+              </DialogTrigger>
+            </DialogActions>
+          </DialogBody>
+        </DialogSurface>
+      </Dialog>
+      <div className="flex space-between gap-3">
+        <Button onClick={selectFiles}>添加文件</Button>
+        <Button onClick={() => setItems([])}>清除列表</Button>
+        <Button
+          appearance="primary"
+          onClick={() => {
+            startProcess()
+          }}
+          disabled={isProcessing}
+        >
+          {isProcessing ? '处理中...' : '开始处理'}
+        </Button>
       </div>
+      <div className="mt-3">
+        <Field label="保存转换后的文件到">
+          <RadioGroup
+            layout="horizontal"
+            value={saveTo}
+            onChange={(_, data) => {
+              setSaveTo(data.value as SaveTo)
+              if (data.value === 'original') {
+                setSavePath('')
+              }
+            }}
+          >
+            <Radio value="original" label="源文件所在目录" />
+            <Radio value="custom" label="自定义保存目录" />
+            {saveTo === 'custom' && (
+              <Input
+                placeholder="点击来选择保存目录"
+                value={savePath}
+                readOnly
+                style={{ flexGrow: 1 }}
+                onClick={() => {
+                  SelectFolder().then(path => {
+                    if (path) {
+                      setSavePath(path)
+                    }
+                  })
+                }}
+              />
+            )}
+          </RadioGroup>
+        </Field>
+      </div>
+      <Table
+        ref={tableRef}
+        arial-label="Default table"
+        style={{ minWidth: '510px' }}
+        size="small"
+        className="mt-3"
+      >
+        <TableHeader>
+          <TableRow>
+            {columns.map(column => (
+              <TableHeaderCell
+                key={column.columnId}
+                {...columnSizing_unstable.getTableHeaderCellProps(column.columnId)}
+              >
+                {column.renderHeaderCell()}
+              </TableHeaderCell>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {items.map((file, index) => (
+            <TableRow key={index}>
+              <TableCell>
+                <TableCellLayout media={statusMapIcon(file.status)}>
+                  {statusMapText(file.status)}
+                </TableCellLayout>
+              </TableCell>
+              <TableCell>{file.file}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
     </div>
   )
 }

frontend/src/main.css

@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+/* Set automatic background color */
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #292929;
+  }
+}

frontend/src/main.tsx

@@ -1,14 +1,35 @@
-import {createRoot} from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
+import React, { useEffect, useState } from 'react'
 import './main.css'
 import App from './App'
-import { FluentProvider, webLightTheme } from '@fluentui/react-components';
+import { FluentProvider, webLightTheme, webDarkTheme } from '@fluentui/react-components'
 
-const container = document.getElementById('root')
+const Root: React.FC = () => {
+  const [isDarkMode, setIsDarkMode] = useState(
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  )
 
-const root = createRoot(container!)
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
 
-root.render(
-  <FluentProvider theme={webLightTheme}>
-    <App />
-  </FluentProvider>,
-)
+    const handleChange = (e: MediaQueryListEvent) => {
+      setIsDarkMode(e.matches)
+    }
+
+    // 监听系统主题变化
+    mediaQuery.addEventListener('change', handleChange)
+
+    // 清理监听器
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange)
+    }
+  }, [])
+
+  return (
+    <FluentProvider theme={isDarkMode ? webDarkTheme : webLightTheme}>
+      <App />
+    </FluentProvider>
+  )
+}
+
+createRoot(document.getElementById('root')!).render(<Root />)

frontend/src/types.ts

@@ -0,0 +1,8 @@
+export type Status = 'pending' | 'processing' | 'done' | 'error';
+
+export type SaveTo = 'original' | 'custom'
+
+export type Item = {
+  status: Status;
+  file: string;
+}

frontend/wailsjs/go/main/App.d.ts

@@ -1,4 +1,9 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
+import {main} from '../models';
 
-export function Greet(arg1:string):Promise<string>;
+export function ProcessFiles(arg1:Array<main.NcmFile>,arg2:string):Promise<void>;
+
+export function SelectFiles():Promise<Array<string>>;
+
+export function SelectFolder():Promise<string>;

frontend/wailsjs/go/main/App.js

@@ -2,6 +2,14 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
-export function Greet(arg1) {
-  return window['go']['main']['App']['Greet'](arg1);
+export function ProcessFiles(arg1, arg2) {
+  return window['go']['main']['App']['ProcessFiles'](arg1, arg2);
+}
+
+export function SelectFiles() {
+  return window['go']['main']['App']['SelectFiles']();
+}
+
+export function SelectFolder() {
+  return window['go']['main']['App']['SelectFolder']();
 }

frontend/wailsjs/go/models.ts

@@ -0,0 +1,19 @@
+export namespace main {
+	
+	export class NcmFile {
+	    Name: string;
+	    Status: string;
+	
+	    static createFrom(source: any = {}) {
+	        return new NcmFile(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.Name = source["Name"];
+	        this.Status = source["Status"];
+	    }
+	}
+
+}
+