refactor: use vs-icon instead of <svg>

imzlh · Oct 3, 2024 · 9b7b463 · 9b7b463
1 parent fd63ecb
commit 9b7b463
Show file tree

Hide file tree

Showing 12 changed files with 630 additions and 556 deletions.
diff --git a/src/env.d.ts b/src/env.d.ts
@@ -638,4 +638,39 @@ interface vApplication{
      * 插件目录
      */
     home: string
-}
+}
+
+// ---------- directive ----------
+
+declare module 'vue' {
+    /**
+     * vList预定义指令
+     */
+    interface ComponentCustomProperties {
+        /**
+         * 适用于vs-icon的颜色变换，用于将黑色图标转换颜色值
+         */
+        colorscale: Directive<HTMLElement, [number, number, number]>,
+
+        /**
+         * 将iframe插入到指定元素中
+         */
+        webview: Directive<HTMLElement, string, {
+            'right-bottom'?: boolean,
+            'left-bottom'?: boolean,
+            'left-top'?: boolean
+        }>,
+
+        /**
+         * 将触摸抽象为pointer
+         */
+        touch: Directive<HTMLElement, any, {
+            prevent?: boolean,
+        }>,
+
+        /**
+         * 允许将元素拖动，默认为拖动父元素
+         */
+        drag: Directive<HTMLElement, any>
+    }
+}
diff --git a/src/init.ts b/src/init.ts
@@ -133,7 +133,7 @@ document.documentElement.addEventListener('pointerleave', () => {
     dragEl.el.style.top = `${dragEl.ry}px`,
     dragEl = undefined;
     document.documentElement.style.cursor = 'default';
-})
+});
 
 // 挂载应用
 const app = createApp(App);
@@ -166,6 +166,13 @@ app.directive('drag', {
     }
 });
 
+// v-colorscale
+import { toFilter } from './utils/colorScale';
+app.directive('colorscale', (el, binding) => 
+    // @ts-ignore
+    el.style.setProperty('--vs-colorscale', toFilter(...binding.value))
+);
+
 // OPTIONAL vWebView
 import { vWebView } from  './utils/webview';
 app.directive('webview', function(el: HTMLElement, binding) {

diff --git a/src/module/explorer.vue b/src/module/explorer.vue
@@ -233,34 +233,13 @@
         <div class="selection">
             <!-- 上一页 -->
             <div class="icon" data-action="history-back" :disable="current == trace.length -1"
-                @click="current ++"
-            >
-                <svg viewBox="0 0 448 512">
-                    <path fill="currentColor"
-                        d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z">
-                    </path>
-                </svg>
-            </div>
+                @click="current ++" vs-icon="left" />
             <!-- 下一页 -->
             <div class="icon" data-action="history-resume" :disable="current == 0"
-                @click="current --"
-            >
-                <svg viewBox="0 0 448 512">
-                    <path fill="currentColor"
-                        d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z">
-                    </path>
-                </svg>
-            </div>
+                @click="current --" vs-icon="right" />
             <!-- 文件夹返回 -->
             <div class="icon" data-action="file-back" :disable="CFG.parent.path == '/'"
-                @click="goto(splitPath(CFG.parent).dir)"
-            >
-                <svg viewBox="0 0 384 512">
-                    <path fill="currentColor"
-                        d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z">
-                    </path>
-                </svg>
-            </div>
+                @click="goto(splitPath(CFG.parent).dir)" vs-icon="point-up" />
             <!-- 路径 -->
             <div class="path" data-mode="normal" :style="{
                 width: CFG.input_size + 'px'
@@ -280,10 +259,7 @@
             <!-- 搜索 -->
             <div class="search" :style="{
                 width: search_size + 'px'
-            }">
-                <svg fill="currentColor" viewBox="0 0 16 16">
-                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
-                </svg>
+            }" vs-icon="search">
                 <input type="text" placeholder="支持正则的筛选" class="search-input">
             </div>
         </div>
@@ -475,7 +451,7 @@
                     background-color: rgba(0, 178, 255, .16);
                 }
 
-                >svg {
+                &::before {
                     display: block;
                     width: .9rem;
                     height: .9rem;

diff --git a/src/module/fdpicker.vue b/src/module/fdpicker.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { FileOrDir, vDir, vFile } from '@/env';
     import { contextMenu, FS, openFile} from '@/utils';
-    import { reactive, ref, shallowRef, watch } from 'vue';
+    import { computed, reactive, ref, shallowRef, watch } from 'vue';
     import List from './list.vue';
     import type { CtxDispOpts } from '@/env';
     import I_LIST from '/icon/viewinfo.webp';
@@ -10,16 +10,19 @@
     const data = reactive({
         display: false,
         history: [] as Array<string>,
-        data: shallowRef<vDir>(),
+        data: undefined as vDir | undefined,
         current: -1,
         showPath: false,
-        path: '',
         displaymode: 'list',
         type: 'file',
         layout: {
             table: [60, 20, 20],
             orderBy: 'name' as 'name' | 'name_rev' | 'date' | 'date_rev' | 'size' | 'size_rev'
         }
+    }),
+    path = computed({
+        get: () => data.history[data.current],
+        set: v => data.current = data.history.push(v) -1
     });
 
     let resolver:undefined|Function;
@@ -28,18 +31,14 @@
     export function show(f: string, filter: 'file'): Promise<vFile[]>;
     export function show(f: string, filter: undefined): Promise<FileOrDir[]>;
     export function show(f: string, filter: 'dir' | 'file' | undefined) {
+        f ||= '/';
         return new Promise(rs => {
             data.history = [f],data.current = 0,data.display = true;
             data.type = filter || 'all';
             resolver = rs;
         });
     }
 
-    async function switchTo(dir:string){
-        data.data = await FS.loadPath(dir);
-        data.current = data.history.push(dir) -1;
-    }
-
     function dirBack(){
         let dir = data.history[data.current];
         if(!dir) return;
@@ -49,16 +48,17 @@
         // 没有上一级
         if(pos == -1) return false;
         // 切换
-        return switchTo(dir.substring(0,pos));
+        return path.value = dir.substring(0,pos);
     }
 
-    function getPath(){
+    const getPath = computed(() => {
         let prefix = '/';
-        return ([{path: '/', name: '根目录'}] as Array<any>).concat(data.path.split('/').map(item => item ? {
+        if(!path.value) return [];
+        return ([{path: '/', name: '根目录'}] as Array<any>).concat(path.value.split('/').map(item => item ? {
             path: prefix += item + '/',
             name: item
         } : null));
-    }
+    });
 
     function submit(){
         resolver && resolver([...data.data!.active.keys()]);
@@ -72,7 +72,7 @@
             content: [
                 {
                     "text": '打开',
-                    "handle": () => item.type == 'dir' ? switchTo(item.path) : openFile(item)
+                    "handle": () => item.type == 'dir' ? (path.value = item.path) : openFile(item)
                 },{
                     "text": "显示为",
                     "child": [
@@ -114,10 +114,7 @@
         } satisfies CtxDispOpts);
     }
 
-    watch(() => data.history[data.current],v =>{ v &&
-        FS.loadPath(v).then(_ => data.data = _);
-        data.path = v || '/';
-    });
+    watch(path, v => v && FS.loadPath(v).then(_ => data.data = _));
 </script>
 
 <script lang="ts" setup>
@@ -129,29 +126,11 @@
         <div class="head">
             <div class="flex">
                 <!-- 上一页 -->
-                <div class="icon" data-action="history-back" :disabled="_.current == 0" @click="_.current --">
-                    <svg viewBox="0 0 448 512">
-                        <path fill="currentColor"
-                            d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z">
-                        </path>
-                    </svg>
-                </div>
+                <div class="icon" data-action="history-back" :disabled="_.current == 0" @click="_.current --" vs-icon="left" button />
                 <!-- 下一页 -->
-                <div class="icon" data-action="history-resume" :disabled="_.current == _.history.length -1" @click="_.current ++">
-                    <svg viewBox="0 0 448 512">
-                        <path fill="currentColor"
-                            d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z">
-                        </path>
-                    </svg>
-                </div>
+                <div class="icon" data-action="history-resume" :disabled="_.current == _.history.length -1" @click="_.current ++" button vs-icon="right" />
                 <!-- 文件夹返回 -->
-                <div class="icon" data-action="file-back" @click="dirBack">
-                    <svg viewBox="0 0 384 512">
-                        <path fill="currentColor"
-                            d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z">
-                        </path>
-                    </svg>
-                </div>
+                <div class="icon" data-action="file-back" @click="dirBack" vs-icon="point-up" button />
                 <div class="title">
                     选择文件
                 </div>
@@ -164,14 +143,14 @@
             <!-- 路径 -->
             <div class="path">
                 <!-- 路径输入 -->
-                <input type="text" v-if="_.showPath" :value="_.path" >
+                <input type="text" v-if="_.showPath" :value="path" >
                 <!-- 路径分层 -->
                 <div class="bread" v-else
                     @click="_.showPath = true" @blur="_.showPath = false"
                     tabindex="-11"
                 >
-                    <template v-for="item of getPath()">
-                        <div @click.stop="switchTo(item.path)" v-if="item">
+                    <template v-for="item of getPath">
+                        <div @click.stop="path = item.path" v-if="item">
                             {{ item.name }}
                         </div>
                     </template>
@@ -182,7 +161,7 @@
         <div v-if="_.data" style="padding-top: 4rem;box-sizing: border-box;height: 100%">
             <List :dir="_.data" :layout="_.layout"
                 @ctxmenu="ctxmenu"
-                @open="(file:FileOrDir) => file.type == 'dir' ? switchTo(file.path) : submit()"
+                @open="(file:FileOrDir) => file.type == 'dir' ? (path = file.path) : submit()"
             ></List>
         </div>
     </div>
@@ -249,11 +228,9 @@
                     }
                 }
 
-                svg{
-                    fill: currentColor;
+                [vs-icon]::before{
                     width: 1rem;
                     height: 1rem;
-                    margin: 0 .2rem;
                 }
 
                 > button{

diff --git a/src/module/upload.vue b/src/module/upload.vue
@@ -46,40 +46,24 @@
                     backgroundColor: item.upload == undefined ? '#d9f7de' : '#efefef'
                 }"></div>
             </div>
-            <div class="default" v-if="eque.length == 0">
-                <svg viewBox="0 0 16 16">
-                    <path d="M2.5 0c-.166 0-.33.016-.487.048l.194.98A1.51 1.51 0 0 1 2.5 1h.458V0H2.5zm2.292 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zm1.833 0h-.916v1h.916V0zm1.834 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zM13.5 0h-.458v1h.458c.1 0 .199.01.293.029l.194-.981A2.51 2.51 0 0 0 13.5 0zm2.079 1.11a2.511 2.511 0 0 0-.69-.689l-.556.831c.164.11.305.251.415.415l.83-.556zM1.11.421a2.511 2.511 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415L1.11.422zM16 2.5c0-.166-.016-.33-.048-.487l-.98.194c.018.094.028.192.028.293v.458h1V2.5zM.048 2.013A2.51 2.51 0 0 0 0 2.5v.458h1V2.5c0-.1.01-.199.029-.293l-.981-.194zM0 3.875v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 5.708v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 7.542v.916h1v-.916H0zm15 .916h1v-.916h-1v.916zM0 9.375v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .916v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .917v.458c0 .166.016.33.048.487l.98-.194A1.51 1.51 0 0 1 1 13.5v-.458H0zm16 .458v-.458h-1v.458c0 .1-.01.199-.029.293l.981.194c.032-.158.048-.32.048-.487zM.421 14.89c.183.272.417.506.69.689l.556-.831a1.51 1.51 0 0 1-.415-.415l-.83.556zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373c.158.032.32.048.487.048h.458v-1H2.5c-.1 0-.199-.01-.293-.029l-.194.981zM13.5 16c.166 0 .33-.016.487-.048l-.194-.98A1.51 1.51 0 0 1 13.5 15h-.458v1h.458zm-9.625 0h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zm1.834-1v1h.916v-1h-.916zm1.833 1h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
-                </svg>
+            <div class="default" v-if="eque.length == 0" vs-icon="upload" v-colorscale="[114, 216, 59]">
                 <span>拖拽或点击选取上传</span>
             </div>
         </div>
 
         <!-- 右下侧小工具 -->
         <div class="tools">
             <!-- 清空 -->
-            <div @click="eque.splice(0, eque.length)">
-                <svg viewBox="0 0 16 16">
-                    <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
-                    <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
-                </svg>
-            </div>
+            <div @click="eque.splice(0, eque.length)" vs-icon="minus" button />
 
             <!-- 添加上传文件 -->
-            <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>
-            </div>
+            <div @click="FS.upload(null, dir, { created: obj => eque.push(obj) })" button vs-icon="plus" />
         </div>
 
         <div class="preview" v-show="mouse.show" :style="{
             left: mouse.x + 'px',
             top: mouse.y + 'px'
-        }">
-            <svg viewBox="0 0 16 16">
-                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
-            </svg>
-        </div>
+        }" vs-icon="plus" />
     </div>
 
 </template>
@@ -144,8 +128,7 @@
                     width: unset;
                     height: unset;
 
-                    > svg{
-                        fill: rgb(114, 216, 59);
+                    &::before{
                         display: block;
                         width: 3rem;
                         height: 3rem;
@@ -174,24 +157,6 @@
             border-radius: .4rem;
             border: solid .1rem rgb(212, 212, 212);
             z-index: 10;
-
-            > div{
-                border-radius: .35rem;
-                cursor: pointer;
-                padding: .35rem;
-                transition: all .2s;
-
-                &:hover{
-                    background-color: #e9e9e9;
-                }
-
-                > svg{
-                    display: block  ;
-                    fill: #a49e9e;
-                    width: 1.2rem;
-                    height: 1.2rem;
-                }
-            }
         }
 
         > .preview{