feat(web): 添加文件拖拽，文件搜索功能

packages/app/electron.builder.json

@@ -4,13 +4,12 @@
     "productName": "ocs",
     "asar": false,
     "copyright": "Copyright © 2021 ${author}",
-    // "afterAllArtifactBuild": "./lib/electron/after-pack.js",
     "nsis": {
         "oneClick": false,
         "allowToChangeInstallationDirectory": true
     },
     "win": {
-        "icon": "public/favicon.ico",
+        "icon": "public/icon.ico",
         "artifactName": "${productName}-${version}-setup-${os}-${arch}.${ext}",
         "target": [
             {
@@ -20,13 +19,13 @@
         ]
     },
     "mac": {
-        "icon": "public/favicon.ico",
+        "icon": "public/icon.ico",
         "artifactName": "${productName}-${version}-setup-${os}-${arch}.${ext}",
         "target": "default"
     },
     "fileAssociations": {
         "ext": "ocs",
-        "icon": "public/favicon.ico",
+        "icon": "public/icon.ico",
         "name": "ocs 脚本"
     }
 }

packages/app/index.js

@@ -10,8 +10,13 @@ const { initStore } = require("./src/tasks/init.store");
 const { autoLaunch } = require("./src/tasks/auto.launch");
 
 const logger = Logger("main");
+
 const store = new Store();
 
+app.on("second-instance", (event, argv, workingDirectory, additionalData) => {
+    logger.debug({ event, argv, workingDirectory, additionalData });
+});
+
 task("OCS启动程序", () =>
     Promise.all([
         task("初始化错误处理", () => handleError()),
@@ -37,6 +42,13 @@ function handleError() {
         logger.error("child-process-gone", e);
         process.exit(0);
     });
+
+    process.on("uncaughtException", (e) => {
+        logger.error("rejectionHandled", e);
+    });
+    process.on("unhandledRejection", (e) => {
+        logger.error("unhandledRejection", e);
+    });
 }
 
 /** 等待显示 */
@@ -56,6 +68,6 @@ async function open() {
 async function task(name, func) {
     const time = Date.now();
     const res = await func();
-    logger.debug({ task: name, time: Date.now() - time });
+    logger.debug(name, "耗时:", Date.now() - time);
     return res;
 }

packages/app/package.json

@@ -4,7 +4,7 @@
     "description": "app package of ocs",
     "main": "index.js",
     "scripts": {
-        "dev": "electron .",
+        "dev": "chcp 65001 && electron .",
         "pack": "electron-builder --config ./electron.builder.json --dir",
         "dist": "electron-builder --config ./electron.builder.json"
     },

packages/app/src/logger.js

@@ -1,29 +1,36 @@
 //@ts-check
 
-const { pino } = require("pino");
 const { app } = require("electron");
 const path = require("path");
 const dayjs = require("dayjs");
+const util = require("util");
+const fs = require("fs");
 
 module.exports = function logger(name) {
     const dest = path.join(app.getPath("logs"), "/", dayjs().format("YYYY-MM-DD"), "/", name + ".log");
 
-    return pino(
-        {
-            base: null,
-            formatters: {
-                level(label, number) {
-                    return { level: label };
-                },
-            },
-            timestamp: () => `,"time":"${new Date(Date.now()).toLocaleString()}"`,
-            level: "debug",
-        },
-        pino.destination({
-            dest,
-            append: true,
-            mkdir: true,
-            sync: false,
-        })
-    );
+    function log(level, ...msg) {
+        const data = msg
+            .map((s) => {
+                if (typeof s === "object" || typeof s === "function") {
+                    s = util.inspect(s);
+                }
+                return s;
+            })
+            .join("");
+        const txt = `[${level}] ${new Date().toLocaleString()} \t ` + data;
+        console.log(txt);
+        if (!fs.existsSync(path.dirname(dest))) {
+            fs.mkdirSync(path.dirname(dest), { recursive: true });
+        }
+        fs.appendFileSync(dest, txt + "\n");
+    }
+
+    return {
+        log: (...msg) => log("信息", ...msg),
+        info: (...msg) => log("信息", ...msg),
+        error: (...msg) => log("错误", ...msg),
+        debug: (...msg) => log("调试", ...msg),
+        warn: (...msg) => log("警告", ...msg),
+    };
 };

packages/app/src/main.js

@@ -1,8 +1,7 @@
 // @ts-check
 const { BrowserWindow, app } = require("electron");
 
-
-app.disableHardwareAcceleration()
+app.disableHardwareAcceleration();
 
 function createWindow() {
     return new BrowserWindow({
@@ -41,7 +40,7 @@ async function openWindow() {
         }
     });
 
-    win.show()
+    win.show();
 
     return win;
 }

packages/app/src/tasks/auto.launch.js

@@ -3,10 +3,12 @@ const Store = require("electron-store");
 
 /** 配置自动启动 */
 function autoLaunch() {
-    const store = new Store();
-    app.setLoginItemSettings({
-        openAtLogin: Boolean(store.get("auto-launch") || false),
-    });
+    if (app.isPackaged) {
+        const store = new Store();
+        app.setLoginItemSettings({
+            openAtLogin: Boolean(store.get("auto-launch") || false),
+        });
+    }
 }
 
 exports.autoLaunch = autoLaunch;

packages/app/src/tasks/init.store.js

@@ -20,7 +20,7 @@ exports.initStore = function () {
         /** 配置文件路径 */
         store.set("config-path", path.resolve(app.getPath("userData"), "./config.json"));
 
-        /** 工作台路径 */
+        /** 工作区路径 */
         const workspace = path.resolve(app.getPath("userData"), "./workspace");
         fs.mkdirSync(workspace, { recursive: true });
         store.set("workspace", workspace);

packages/app/src/tasks/remote.register.js

@@ -1,4 +1,6 @@
 const { ipcMain, app, dialog, BrowserWindow } = require("electron");
+const Logger = require("../logger");
+
 const { autoLaunch } = require("./auto.launch");
 
 /**
@@ -7,16 +9,20 @@ const { autoLaunch } = require("./auto.launch");
  * @param target 事件目标
  */
 function registerRemoteEvent(name, target) {
+    const logger = Logger("remote");
     ipcMain
         .on(name + "-get", (event, args) => {
+            logger.info({ event: name + "-get", args });
             const property = args[0];
             event.returnValue = target[property];
         })
-        .on(name + "-get", (event, args) => {
+        .on(name + "-set", (event, args) => {
+            logger.info({ event: name + "-set", args });
             const [property, value] = [args[0], args[1]];
             event.returnValue = target[property] = value;
         })
         .on(name + "-call", async (event, args) => {
+            logger.info({ event: name + "-call", args });
             const [property, ...value] = [args.shift(), ...args];
             event.returnValue = await target[property](...value);
         });

packages/app/test.js

@@ -0,0 +1 @@
+

packages/web/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/icon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ocs</title>
   </head>

packages/web/src/assets/css/common.css

@@ -20,12 +20,6 @@ html,
 .pointer {
   cursor: pointer;
 }
-/**
-bootstrap 和 ant design 冲突，导致图标移位
-*/
-body .ocsicon {
-  transform: translate(-0.5px, -3px);
-}
 /* 设置滚动条的样式 */
 ::-webkit-scrollbar {
   width: 10px;

packages/web/src/assets/less/common.less

@@ -23,13 +23,6 @@ html,
     cursor: pointer;
 }
 
-/**
-bootstrap 和 ant design 冲突，导致图标移位
-*/
-body .ocsicon {
-    transform: translate(-0.5px, -3px);
-}
-
 /* 设置滚动条的样式 */
 ::-webkit-scrollbar {
     width: 10px;

packages/web/src/components/Icon.vue

@@ -1,14 +1,14 @@
 <template>
-    <IconFont :type="icon" class="ocsicon"></IconFont>
+    <IconFont :type="type" class="ocsicon"></IconFont>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, toRefs } from "vue";
 interface IconProps {
-    icon: string;
+    type: string;
 }
 const props = withDefaults(defineProps<IconProps>(), {});
-const { icon } = toRefs(props);
+const { type } = toRefs(props);
 </script>
 
 <style scope lang="less"></style>

packages/web/src/components/file/File.ts

@@ -0,0 +1,84 @@
+import { Stats } from "fs";
+import { store } from "../../store";
+
+const fs = require("fs") as typeof import("fs");
+const path = require("path") as typeof import("path");
+
+export { fs, path };
+
+export interface File {
+    title: string;
+    key: string;
+    slots: {
+        icon: string;
+    };
+
+    stat?: FileStats;
+    path?: string;
+    content?: string;
+    children?: File[];
+}
+
+export interface FileStats {
+    isDirectory: boolean;
+    createTime: number;
+    modifyTime: number;
+}
+
+/**
+ * 获取可用文件名
+ * @param name 名字模板, 例如 新建文件夹($count)
+ */
+export function validFileName(name: string) {
+    let count = 0;
+    let p = "";
+    while (true) {
+        p = path.resolve(store.workspace, name.replace("($count)", count++ === 0 ? "" : `(${count})`));
+        if (!fs.existsSync(p)) {
+            break;
+        }
+    }
+    return p;
+}
+
+/**
+ * 创建文件(夹)对象
+ *
+ * @param filePath 文件(夹)路径
+ * @param title 覆盖文件显示名
+ * @returns
+ */
+export function createFile(filePath: string, title?: string): File {
+    const stat = fs.statSync(filePath);
+    let children;
+    let content;
+    let icon;
+    if (stat.isDirectory()) {
+        icon = "dir";
+        children = fs
+            .readdirSync(filePath)
+            .map((childFilePath) => createFile(path.resolve(filePath, childFilePath)))
+            .filter((f) => !!f);
+    } else {
+        icon = "file";
+        content = fs.readFileSync(filePath).toString();
+    }
+
+    title = title || path.basename(filePath);
+    let p = path.dirname(filePath);
+    return {
+        title,
+        key: filePath,
+        slots: {
+            icon,
+        },
+        stat: {
+            isDirectory: stat.isDirectory(),
+            createTime: stat.birthtimeMs,
+            modifyTime: stat.ctimeMs,
+        },
+        content,
+        path: p,
+        children,
+    };
+}