add

.eslintrc.cjs

@@ -1,9 +1,9 @@
-const { readFileSync, readFile } = require("node:fs")
+const { readFileSync } = require("node:fs")
 
 /* eslint-env node */
 require("@rushstack/eslint-patch/modern-module-resolution")
 
-const prettierConfig = JSON.parse(readFileSync("./.prettierrc.json", { encoding: "utf-8" }))
+const prettierConfig = JSON.parse(readFileSync("./.prettierrc", { encoding: "utf-8" }))
 
 module.exports = {
   extends: [

config/index.ts

@@ -10,7 +10,7 @@ type LogoType = "logo" | "bg"
 export interface IDefaultConfig {
   language: LanguageType
   "common.theme": ThemeType
-  "debug": LogLevel,
+  debug: LogLevel
   "desktop:wallpaper": string
   "update.repo"?: string
   "update.owner"?: string
@@ -19,6 +19,7 @@ export interface IDefaultConfig {
   "editor.bg": string
   "editor.logoType": LogoType
   "editor.fontFamily": string
+  "snippet.storagePath": string
   storagePath: string
 }
 
@@ -43,5 +44,6 @@ export default {
     "update.owner": "npmrun",
     "update.allowDowngrade": false,
     "update.allowPrerelease": false,
+    "snippet.storagePath": "$storagePath$/snippets",
   },
 } as const satisfies IConfig

electron.vite.config.ts

@@ -11,8 +11,8 @@ import VueRouter from "unplugin-vue-router/vite"
 import Layouts from "vite-plugin-vue-layouts"
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite"
 import monacoEditorPlugin from "vite-plugin-monaco-editor"
-import IconsResolver from 'unplugin-icons/resolver'
-import Icons from 'unplugin-icons/vite'
+import IconsResolver from "unplugin-icons/resolver"
+import Icons from "unplugin-icons/vite"
 
 export default defineConfig({
   main: {
@@ -32,8 +32,8 @@ export default defineConfig({
         entry: {
           index: resolve(__dirname, "./src/preload/index.ts"),
           plugin: resolve(__dirname, "./src/preload/plugin.ts"),
-        }
-      }
+        },
+      },
     },
     plugins: [externalizeDepsPlugin()],
   },
@@ -110,9 +110,9 @@ export default defineConfig({
         dirs: ["src/components", "src/ui"],
         resolvers: [
           IconsResolver({
-            prefix: 'icon',
+            prefix: "icon",
           }),
-        ]
+        ],
       }),
       Icons(),
       // https://wf0.github.io/example/plugins/Formatter.html

packages/logger/main.ts

@@ -80,7 +80,7 @@ export class Logger {
   /**
    * 构造函数
    */
-  private constructor() {}
+  // private constructor() {}
 
   public init(options?: LoggerOptions): void {
     this.callInitialize = true
@@ -260,7 +260,7 @@ export class Logger {
 // 默认实例
 const logger = Logger.getInstance()
 logger.init()
-setting.onChange("debug", function(n){
+setting.onChange("debug", function (n) {
   logger.setLevel(n.debug)
 })
 

src/common/_ioc.main.ts

@@ -1,11 +1,13 @@
 import { Container, ContainerModule } from "inversify"
 import UpdateCommand from "common/event/Update/main/command"
 import PlatFormCommand from "common/event/PlatForm/main/command"
+import SnippetCommand from "common/event/Snippet/main/command"
 import TabsCommand from "common/event/Tabs/main/command"
 
 const modules = new ContainerModule(bind => {
   bind("TabsCommand").to(TabsCommand).inSingletonScope()
   bind("PlatFormCommand").to(PlatFormCommand).inSingletonScope()
+  bind("SnippetCommand").to(SnippetCommand).inSingletonScope()
   bind("UpdateCommand").to(UpdateCommand).inSingletonScope()
 })
 

src/common/event/Snippet/hook.ts

@@ -0,0 +1,5 @@
+import { Snippet } from "."
+
+export function useSnippet() {
+  return Snippet.getInstance<Snippet>()
+}

src/common/event/Snippet/index.ts

@@ -0,0 +1,18 @@
+import { _Base } from "common/lib/_Base"
+import { ApiFactory } from "common/lib/abstract"
+
+class Snippet extends _Base {
+  constructor() {
+    super()
+  }
+
+  private get api() {
+    return ApiFactory.getApiClient()
+  }
+
+  getTree = async () => {
+    return this.api.call("SnippetCommand.getTree")
+  }
+}
+
+export { Snippet }

src/common/event/Snippet/main/command.ts

@@ -0,0 +1,15 @@
+import path from "path/posix"
+import Setting from "setting/main"
+
+// 代码片段命令处理器
+// base/__snippet__.json 基础信息
+// 路径做为ID, 当前文件夹的信息
+
+export default class SnippetCommand {
+  storagePath: string = Setting.values("snippet.storagePath")
+
+  getTree() {
+    path.resolve(this.storagePath, "__snippet__.json")
+    return this.storagePath
+  }
+}

src/main/App.ts

@@ -46,6 +46,7 @@ protocol.registerSchemesAsPrivileged([
 class App extends BaseClass {
 
   static events = {
+    AppInit: "App.init",
     AppReady: "App.ready",
   }
 
@@ -73,6 +74,7 @@ class App extends BaseClass {
     app.commandLine.appendSwitch("wm-window-animations-disabled")
     // 开启硬件加速
     app.disableHardwareAcceleration();
+    eventbus.emit(App.events.AppInit)
     crashHandler.init()
     this._Updater.init()
     this._DB.init()

src/renderer/components.d.ts

@@ -10,7 +10,19 @@ declare module 'vue' {
   export interface GlobalComponents {
     AdjustLine: typeof import('./src/components/AdjustLine.vue')['default']
     CodeEditor: typeof import('./src/components/CodeEditor/code-editor.vue')['default']
+    IconBiCollectionFill: typeof import('~icons/bi/collection-fill')['default']
+    IconBiTrashFill: typeof import('~icons/bi/trash-fill')['default']
+    IconFluentCollections24Regular: typeof import('~icons/fluent/collections24-regular')['default']
+    IconFluentCollectionsEmpty16Filled: typeof import('~icons/fluent/collections-empty16-filled')['default']
+    IconHugeiconsInbox: typeof import('~icons/hugeicons/inbox')['default']
+    IconIconParkSolidCollectComputer: typeof import('~icons/icon-park-solid/collect-computer')['default']
+    IconIconParkTwotoneDataAll: typeof import('~icons/icon-park-twotone/data-all')['default']
+    IconMdiLightInbox: typeof import('~icons/mdi-light/inbox')['default']
+    IconMynauiTrash: typeof import('~icons/mynaui/trash')['default']
+    IconSolarBoxBoldDuotone: typeof import('~icons/solar/box-bold-duotone')['default']
+    IconSolarHome2Outline: typeof import('~icons/solar/home2-outline')['default']
     'IconStash:arrowReplyDuotone': typeof import('~icons/stash/arrow-reply-duotone')['default']
+    IconTdesignMapCollection: typeof import('~icons/tdesign/map-collection')['default']
     NavBar: typeof import('./src/ui/NavBar.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/renderer/src/assets/style/_common.scss

@@ -10,6 +10,7 @@ html {
   --text-normal: #6b6b6b;
   --text-hover: #000000;
   height: 100%;
+  color: var(--text-normal);
 }
 
 body {

src/renderer/src/pages/index/_ui/_dialog.vue

@@ -2,6 +2,4 @@
   <div bg-white>sada</div>
 </template>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

src/renderer/src/pages/index/index.vue

@@ -1,18 +1,83 @@
 <script setup lang="ts">
+  import { useSnippet } from "common/event/Snippet/hook"
   definePage({
     meta: {
       home: true,
     },
   })
 
-  const showDialog = ref(false)
+  const { getTree } = useSnippet()
+
+  const activeLeft = ref<number | null>(null)
+  function clickActive(e: any) {
+    const el = e.target as HTMLDivElement
+    const { x } = el.getBoundingClientRect()
+    const { width: parentWidth } = el.parentElement!.getBoundingClientRect()
+    const newLeft = +((x / parentWidth) * 100).toFixed(2)
+    if (newLeft === activeLeft.value) {
+      activeLeft.value = null
+      return
+    }
+    activeLeft.value = +((x / parentWidth) * 100).toFixed(2)
+  }
+
+  async function click() {
+    console.log(await getTree())
+  }
 </script>
 
 <template>
-  <div>sad--{{ showDialog }}</div>asd
-  <div @click="$router.push('/demo')">aaa</div>
+  <div h-full flex>
+    <div border-r-coolGray-200 border-r-1 border-r-solid flex flex-col max-w-300px w="3/10">
+      <div class="list">
+        <div v-if="activeLeft !== null" class="active" :style="{ left: activeLeft + '%' }"></div>
+        <div class="item" @click="clickActive">
+          <IconHugeiconsInbox class="icon" />
+          <span class="text">盒子</span>
+        </div>
+        <div class="item" @click="clickActive">
+          <IconFluentCollections24Regular class="icon" />
+          <span class="text">收藏</span>
+        </div>
+        <div class="item" @click="clickActive">
+          <IconSolarHome2Outline class="icon" />
+          <span class="text">全部</span>
+        </div>
+        <div class="item" @click="clickActive">
+          <IconMynauiTrash class="icon" />
+          <span class="text">废纸篓</span>
+        </div>
+      </div>
+      <div @click="click">文件树</div>
+    </div>
+    <div max-w-300px w="3/10" border-r-coolGray-200 border-r-1 border-r-solid>文件树</div>
+    <div>aa</div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-
+  .list {
+    @apply flex border-b-solid border-b-1 border-b-coolGray-200 relative;
+    .active {
+      position: absolute;
+      left: 0;
+      transition: left 0.5s ease;
+      width: 25%;
+      height: 100%;
+      pointer-events: none;
+      background-color: rgba(193, 193, 193, 0.2);
+      z-index: -1;
+    }
+    .item {
+      @apply p-x-3 p-y-2 cursor-pointer flex flex-col gap-1 flex-1 items-center hover:bg-gray-100;
+      .icon {
+        @apply w-5 h-5;
+        pointer-events: none;
+      }
+      .text {
+        @apply text-xs;
+        pointer-events: none;
+      }
+    }
+  }
 </style>

src/renderer/src/router/index.ts

@@ -13,13 +13,11 @@ const router = createRouter({
 })
 
 router.beforeEach((_to, _from, next)=>{
-  console.log("开始导航");
   NProgress.start();
   return next()
 })
-router
+
 router.afterEach((_to, _from, failure) => {
-  console.log("结束导航");
   NProgress.done();
   if (isNavigationFailure(failure)) {
     console.log('failed navigation', failure)