v8: new FS module!

.github/workflows/compile.yml

@@ -26,7 +26,7 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm i
+    - run: npm i --dev
     - run: npm run build --if-present
     - run: tar -zcvf release.tgz dist/
     - name: Upload binaries to release

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@imzlh/vlist",
   "version": "5.7.3",
-  "displayName": "vList5",
+  "displayName": "vList",
   "description": "一个全能的现代化的文件管理UI，使用vue3",
   "license": "MIT",
   "keywords": [

src/App.vue

@@ -326,17 +326,15 @@
 		<Command />
 		<!-- 显示选择栏 -->
 		<div class="mobile-tool">
-			<div @click="layout_displayLeft = !layout_displayLeft">
-				<svg viewBox="0 0 16 16">
-					<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
-				</svg>
-			</div>
+			<div @click="layout_displayLeft = !layout_displayLeft" vs-icon="right"></div>
 		</div>
 	</div>
 </template>
 
 <style lang="scss">
-	@import './style/font.scss';
+	// 全局导入
+	@import './style/font.css';
+	@import './style/icon.css';
 
 	body {
 		margin: 0;

src/action/action.ts

@@ -7,10 +7,9 @@ export const FACTION = {
     action: 'copy' as 'copy' | 'move',
     async exec(dest: vDir): Promise<boolean | number> {
         try{
-            await FS.__request(this.action, {
-                from: this.marked.map(item => item.path),
-                to: dest.path
-            });
+            const origin = this.marked.map(item => item.path);
+            if(this.action == 'copy') FS.copy(origin, dest.path);
+            else FS.move(origin, dest.path);
             await FS.loadPaths([...this.marked.map(item => splitPath(item).dir), dest.path]);
         }catch(e){
             message({

src/module/explorer.vue

@@ -43,8 +43,7 @@
         paths = ref<Array<HTMLElement>>([]);
 
     watch(paths, els => els[els.length -1]?.scrollIntoView({
-        'behavior': 'smooth',
-        'block': 'end'
+        'behavior': 'smooth'
     }))
 
     // 延时激活

src/module/home.vue

@@ -40,7 +40,9 @@
 
     const vScroll = {
         updated(el: HTMLElement, data){
-            data.value && el.scrollIntoView();
+            data.value && el.scrollIntoView({
+                behavior: 'smooth'
+            });
         }
     } as Directive;
 
@@ -146,7 +148,7 @@
 </script>
 
 <script lang="ts" setup>
-    import { version, name } from '/package.json';
+    import { version, displayName as name } from '/package.json';
 
     function autoComplete(event: KeyboardEvent){
         if(event.key == 'ArrowUp'){

src/module/message.vue

@@ -30,7 +30,7 @@
                 <header v-if="item.title">
                     <img v-if="item.icon" :src="item.icon">
                     <span>{{ item.title }}</span>
-                    <i class="close" @click="msg_destroy(i)"></i>
+                    <i class="close" @click="msg_destroy(i)" vs-icon="x"></i>
                 </header>
                 <template v-if="item.content">
                     <div class="body" :data-level="item.type">
@@ -92,7 +92,6 @@
                 font-size: .8rem;
 
                 .close {
-                    content: $icon_right;
                     opacity: .2;
                     width: 1.2em;
 

src/module/setting.vue

@@ -53,9 +53,9 @@
                     <input v-if="item.type == 'text'" v-model="item.value.value" class="right input" type="text">
 
                     <div v-else-if="item.type == 'number'" class="right numinput">
-                        <div class="minus" @pointerdown="click($event, -item.step, item.value)"></div>
+                        <div vs-icon="minus" class="minus" @pointerdown="click($event, -item.step, item.value)"></div>
                         <div class="real">{{ item.value.value }}</div>
-                        <div class="add" @pointerdown="click($event, item.step, item.value)"></div>
+                        <div vs-icon="add" class="add" @pointerdown="click($event, item.step, item.value)"></div>
                     </div>
 
                     <input v-else-if="item.type == 'check'" class="right check" type="checkbox"
@@ -67,7 +67,7 @@
                         :min="item.min" :max="item.max" :step="item.step"
                     >
 
-                    <div v-else-if="item.type == 'object'" class="goto right"></div>
+                    <div v-else-if="item.type == 'object'" vs-icon="right" class="goto right"></div>
 
                     <div v-else class="right choose">
                         <div tabindex="-1">
@@ -255,14 +255,6 @@
                         border-radius: .35rem;
                         flex-grow: 0;
 
-                        >.minus {
-                            content: $icon_min;
-                        }
-
-                        >.add {
-                            content: $icon_add;
-                        }
-
                         >.minus,
                         >.add {
                             height: 1rem;
@@ -279,7 +271,6 @@
                     }
 
                     &.goto {
-                        content: $icon_right;
                         width: .8rem;
                         height: .8rem;
                         flex-grow: 0;

src/module/tabs.vue

@@ -73,7 +73,7 @@
 			>
 				<img :src="data.icon" onerror="this.style.display = 'none';" class="icon">
 				<span>{{ data.name }}</span>
-				<i class="close" @click.stop="delete tabs[i];"></i>
+				<i class="close" vs-icon="x" @click.stop="delete tabs[i];"></i>
 			</div>
 		</template>
 	</TransitionGroup>
@@ -89,7 +89,7 @@
 			<div class="app-meta-header" @click="current = i">
 				<img :src="data.icon" onerror="this.style.display = 'none';" class="icon">
 				<span>{{ data.name }}</span>
-				<i class="close" @click="delete tabs[i];"></i>
+				<i vs-icon="x" class="close" @click="delete tabs[i];"></i>
 			</div>
 			<suspense>
 				<div class="webview" v-if="typeof data.content === 'string'" v-webview="data.content"></div>
@@ -107,8 +107,6 @@
 
 
 <style lang="scss" scoped>
-	@import '@/style/icon.scss';
-
 	.tab {
 		padding: .45rem;
 		display: flex;
@@ -190,7 +188,6 @@
 
 			>i.close{
 				display: none;
-				content: $icon_close;
 				width: 1rem;
 				height: 1rem;
 
@@ -234,7 +231,6 @@
 
 			>i {
 				pointer-events: all;
-				content: $icon_close;
 				position: absolute;
 				top: 1rem;
 				right: 1rem;

src/module/tree.vue

@@ -54,8 +54,7 @@
                         const pos = el.getBoundingClientRect().y;
                         if(pos <= UI.fontSize.value * 4.6 || pos >= document.documentElement.clientHeight)
                             el.scrollIntoView({
-                                'behavior': 'smooth',
-                                'block': 'center'
+                                'behavior': 'smooth'
                             });
                         el.classList.add('selected');
                         requestAnimationFrame(() => el.focus());

src/module/upload.vue

@@ -28,14 +28,16 @@
             if(!e.dataTransfer?.files.length) return;
             mouse.show = false;
 
-            FS.upload(e, dir, obj => eque.push(obj));
+            FS.upload(e, dir, {
+                created: obj => eque.push(obj)
+            });
         }
     }
 </script>
 
 <template>
     <div class="upload-wrapper" @dragover.prevent="drag.start" @drop.prevent="drag.end" @dragleave="mouse.show = false">
-        <div class="container" @click="FS.upload(true, dir, obj => eque.push(obj))">
+        <div class="container" @click="FS.upload(null, dir, { created: obj => eque.push(obj) })">
             <div v-for="item in eque" @click.stop="event('select', item.path)">
                 <img :src="getIcon(item.name)" :alt="item.icon">
                 <span class="name">{{ item.name }}</span>
@@ -63,7 +65,7 @@
             </div>
 
             <!-- 添加上传文件 -->
-            <div @click="FS.upload(true, dir, obj => eque.push(obj))">
+            <div @click="FS.upload(null, dir, { created: obj => eque.push(obj) })">
                 <svg viewBox="0 0 16 16">
                     <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
                 </svg>

src/opener/markdown.vue

@@ -311,7 +311,7 @@
                     <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                 </svg>
 
-                <Upload :option="FS.__findTree(splitPath(input).dir)" class="after" :active="CFG.upload" @click.stop
+                <Upload :option="FS.stat(splitPath(input).dir)" class="after" :active="CFG.upload" @click.stop
                     @create="plug" @select="plug"
                 />
                 <!-- <div @click.stop class="after" :active="CFG.upload"></div> -->

src/opener/txtreader.vue

@@ -220,8 +220,8 @@
             @click="handleClick" @keypress="handleKbd" @wheel="handleWheel"
             @touchstart="handleTouch" @touchmove="handleTouch" @touchend="handleTouch"
         ></div>
-        <div class="prev" @click="prev"></div>
-        <div class="next" @click="next"></div>
+        <div class="prev" vs-icon="left" @click="prev"></div>
+        <div class="next" vs-icon="right" @click="next"></div>
         <div class="mask" v-show="ui.helper || ui.chapter" @click="ui.helper = ui.chapter = false"></div>
         <div class="helper" v-show="ui.helper">
             <button @click="bookmark.push(endpos! / db!.length)" v-if="cached">
@@ -286,8 +286,6 @@
 </template>
 
 <style lang="scss" >
-    @import "@/style/icon.scss";
-
     @font-face {
         font-family: 'GenJyuuGothic';
         src: url('/font/GenJyuuGothic-Regular.woff2') format('woff2');
@@ -323,12 +321,10 @@
         }
 
         > .prev{
-            content: $icon_left;
             left: 0;
         }
 
         > .next{
-            content: $icon_right;
             right: 0;
         }