npm - @ives_xxz/packages - Versions diffs - 1.0.0 - Mend

@ives_xxz/packages 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (188) hide show

package/Quick Finder/src/renderer/search/index.css ADDED Viewed

@@ -0,0 +1,222 @@
+:root {
+  /* 主颜色 */
+  --main-color: #ffffff;
+  /* 文本颜色 */
+  --font-color: #333333;
+  /* 强调色 */
+  --accent-color: #2e88fb;
+  /* 边框调色 */
+  --border-color: #bdbdbd;
+  /* 按钮激活颜色 */
+  --btn-active-color: #0060dd;
+  /* 错误颜色 */
+  --error-color: #ff3030;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  padding: 0;
+  background-color: rgba(0, 0, 0, 0);
+}
+#app {
+  width: 100%;
+  height: 100%;
+  padding: 15px 0 15px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+/* 布局 */
+.layout {
+  width: 500px;
+}
+/* 搜索 */
+.search {
+  width: 500px;
+  height: 50px;
+  display: inline-flex;
+  border-radius: 8px;
+  box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);
+}
+/* 输入框 */
+.search .input {
+  width: 420px;
+  background-color: var(--main-color);
+  padding: 0 0 0 18px;
+  border: 1px solid var(--border-color);
+  border-right: none;
+  border-radius: 8px 0 0 8px;
+  color: var(--font-color);
+  font-size: 20px;
+  user-select: none;
+}
+/* 输入框:聚焦 */
+.search .input:focus {
+  outline: none;
+}
+/* 输入错误 */
+.search .input-error {
+  animation: inputError 0.5s ease;
+}
+/* 输入错误关键帧 */
+@keyframes inputError {
+  0%,
+  50%,
+  100% {
+    color: var(--font-color);
+  }
+  25%,
+  75% {
+    color: var(--error-color);
+  }
+}
+/* 按钮 */
+.search .btn {
+  width: 80px;
+  margin: 0;
+  padding: 0;
+  background-color: var(--accent-color);
+  border: none;
+  border-radius: 0 8px 8px 0;
+  color: var(--main-color);
+  font-size: 20px;
+  user-select: none;
+  cursor: pointer;
+}
+/* 按钮:点击 */
+.search .btn:active {
+  background-color: var(--btn-active-color);
+  color: #d8d8d8;
+}
+/* 按钮:聚焦 */
+.search .btn:focus {
+  outline: none;
+}
+/* 结果 */
+.result {
+  /* 这里需要将定位设为非 static，否则会被搜索栏的 box-shadow 遮挡 */
+  position: relative;
+  width: 500px;
+  margin: 5px 0 0 0;
+  background-color: var(--main-color);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);
+  user-select: none;
+}
+/* 结果列表 */
+.result .list {
+  max-height: 450px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+  border-radius: 8px;
+}
+/* 结果列表::滚动条 */
+.list::-webkit-scrollbar {
+  width: 12px;
+}
+/* 结果列表::滚动条轨道 */
+.list::-webkit-scrollbar-track {
+  background-color: #f9f9f9;
+  border-radius: 0 8px 8px 0;
+}
+/* 结果列表::滚动条滑块 */
+.list::-webkit-scrollbar-thumb {
+  background-color: #cacaca;
+  /* 使用和背景色相同的边框来达到内边距的效果 */
+  border: 2px solid #f9f9f9;
+  border-radius: 6px;
+}
+/* 结果列表::滚动条滑块:虚指 */
+.list::-webkit-scrollbar-thumb:hover {
+  background-color: #8d8c86;
+}
+/* 结果列表-条目 */
+.list .item {
+  min-height: 30px;
+  line-height: 20px;
+  padding: 5px 10px;
+  color: var(--font-color);
+  list-style: none;
+}
+/* 结果列表-条目(选中) */
+.list .item[selected='true'] {
+  background-color: var(--main-color);
+  color: var(--accent-color);
+}
+/* 结果列表-条目:虚指 */
+.list .item:hover {
+  background-color: var(--accent-color);
+  color: var(--main-color);
+}
+/* 条目-信息 */
+.item .info {
+  display: flex;
+  align-items: center;
+}
+/* 条目-图标 */
+.info .icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+}
+/* 条目-名称 */
+.info .name {
+  font-size: 16px;
+}
+/* 条目-详情 */
+.item .detail {
+  display: none;
+  height: 18px;
+  color: #bdbdbd;
+  line-height: 18px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  direction: rtl;
+}
+/* 条目选中或虚指时 */
+.item:hover .detail,
+.item[selected='true'] .detail {
+  display: block;
+}
+/* 条目-路径 */
+.detail .path {
+  font-size: 13px;
+  direction: ltr;
+}
+[v-cloak] {
+  display: none;
+}

package/Quick Finder/src/renderer/search/index.html ADDED Viewed

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <!-- 样式 -->
+    <link rel="stylesheet" type="text/css" href="index.css">
+    <!-- 脚本 -->
+    <script type="text/javascript" src="../../../lib/vue.global.prod.js" defer></script>
+    <script type="text/javascript" src="index.js" defer></script>
+</head>
+<body>
+    <div id="app" v-cloak>
+        <!-- 布局 -->
+        <div class="layout">
+            <!-- 搜索 -->
+            <div class="search">
+                <!-- 输入框 -->
+                <input ref="input" class="input" type="text" v-model="keyword" :placeholder="t('searchPlaceholder')"
+                    @input="onInputChange" @keydown.enter="onEnterBtnClick" @keydown.up="onUpBtnClick"
+                    @keydown.down="onDownBtnClick" @keydown.left="onLeftBtnClick" @keydown.right="onRightBtnClick"
+                    spellcheck="false" autofocus />
+                <!-- 按钮 -->
+                <button class="btn" v-text="t('searchBtn')" @click="onEnterBtnClick"></button>
+            </div>
+            <!-- 结果列表 -->
+            <div class="result" v-if="items.length > 0">
+                <ul class="list">
+                    <li class="item" v-for="(item, index) in items" :key="index" :id="'item-' + index"
+                        @click="onItemClick(item, index)" :selected="index === curIndex">
+                        <div class="info">
+                            <img class="icon" :src="getIcon(item.extname)" alt="icon"></img>
+                            <span class="name">{{ item.name }}</span>
+                        </div>
+                        <div class="detail">
+                            <span class="path">{{ getPath(item.path) }}</span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

package/Quick Finder/src/renderer/search/index.js ADDED Viewed

@@ -0,0 +1,348 @@
+const { sep } = require('path');
+const { getUrlParam } = require('../../eazax/browser-util');
+const { translate } = require('../../eazax/i18n');
+const RendererEvent = require('../../eazax/renderer-event');
+// 导入 Vue 工具函数
+const { ref, onMounted, onBeforeUnmount, nextTick, createApp } = Vue;
+/** 当前语言 */
+const LANG = getUrlParam('lang');
+// 构建 Vue 应用
+const App = {
+    /**
+     * 设置
+     * @param {*} props
+     * @param {*} context
+     */
+    setup(props, context) {
+        // 分帧加载定时器
+        let loadHandler = null;
+        // 输入框元素
+        const input = ref(null);
+        // 输入的关键字
+        const keyword = ref('');
+        // 关键词匹配返回的结果
+        const items = ref([]);
+        // 当前选中的项目下标
+        const curIndex = ref(-1);
+        /**
+         * 更新当前的选择
+         */
+        function updateSelected() {
+            // 更新输入框的文本
+            keyword.value = items.value[curIndex.value].name;
+            // 只有当目标元素不在可视区域内才滚动
+            nextTick(() => {
+                const id = `item-${curIndex.value}`;
+                document.getElementById(id).scrollIntoViewIfNeeded(false);
+            });
+        }
+        /**
+         * 输入框更新回调
+         * @param {*} event
+         */
+        function onInputChange(event) {
+            // 取消分帧加载
+            if (loadHandler) {
+                clearTimeout(loadHandler);
+                loadHandler = null;
+            }
+            // 取消当前选中
+            curIndex.value = -1;
+            // 关键字为空时不进行搜索
+            if (keyword.value === '') {
+                items.value.length = 0;
+                return;
+            }
+            // 发消息给主进程进行关键词匹配
+            RendererEvent.send('match', keyword.value);
+        }
+        /**
+         * 确认按钮点击回调
+         * @param {*} event
+         */
+        function onEnterBtnClick(event) {
+            if (curIndex.value === -1) {
+                if (keyword.value !== '') {
+                    // 输入框文本错误动画
+                    const inputClasses = input.value.classList;
+                    inputClasses.add('input-error');
+                    setTimeout(() => {
+                        inputClasses.remove('input-error');
+                    }, 500);
+                }
+            } else {
+                const item = items.value[curIndex.value];
+                // 更新输入框文本
+                keyword.value = item.name;
+                // 发消息给主进程
+                RendererEvent.send('open', item.path);
+            }
+            // 聚焦到输入框（此时焦点在按钮或列表上）
+            focusOnInputField();
+        }
+        /**
+         * 上箭头按键回调
+         * @param {*} event
+         */
+        function onUpBtnClick(event) {
+            // 阻止默认事件（光标移动）
+            event.preventDefault();
+            // 循环选择
+            if (curIndex.value > 0) {
+                curIndex.value--;
+            } else {
+                curIndex.value = items.value.length - 1;
+            }
+            // 更新选择
+            updateSelected();
+        }
+        /**
+         * 下箭头按键回调
+         * @param {*} event
+         */
+        function onDownBtnClick(event) {
+            // 阻止默认事件（光标移动）
+            event.preventDefault();
+            // 循环选择
+            if (curIndex.value >= items.value.length - 1) {
+                curIndex.value = 0;
+            } else {
+                curIndex.value++;
+            }
+            // 更新选择
+            updateSelected();
+        }
+        /**
+         * 左箭头按键回调
+         * @param {*} event
+         */
+        function onLeftBtnClick(event) {
+            // 是否已选中项目
+            if (curIndex.value === -1) {
+                return;
+            }
+            // 阻止默认事件（光标移动）
+            event.preventDefault();
+            // 在资源管理器中显示并选中文件
+            focusOnFileInAssets();
+        }
+        /**
+         * 右箭头按键回调
+         * @param {*} event
+         */
+        function onRightBtnClick(event) {
+            // 是否已选中项目
+            if (curIndex.value === -1) {
+                return;
+            }
+            // 阻止默认事件（光标移动）
+            event.preventDefault();
+            // 在资源管理器中显示并选中文件
+            focusOnFileInAssets();
+        }
+        /**
+         * 在资源管理器中显示并选中文件
+         */
+        function focusOnFileInAssets() {
+            // 当前选中项目
+            const item = items.value[curIndex.value];
+            // 发消息给主进程
+            RendererEvent.send('focus', item.path);
+        }
+        /**
+         * 结果点击回调
+         * @param {{ name: string, path: string, extname: string }} item 数据
+         * @param {number} index 下标
+         */
+        function onItemClick(item, index) {
+            curIndex.value = parseInt(index);
+            keyword.value = item.name;
+            // 添加组件
+            onEnterBtnClick(null);
+            // 聚焦到输入框（此时焦点在列表上）
+            // 换成在 onEnterBtnClick 里统一处理了
+            // focusOnInputField();
+        }
+        /**
+         * 聚焦到输入框
+         */
+        function focusOnInputField() {
+            input.value.focus();
+        }
+        /**
+         * （主进程）数据更新回调
+         * @param {Electron.IpcRendererEvent} event
+         */
+        function onDataUpdate(event) {
+            // console.log('onDataUpdate');
+            // 触发文件搜索
+            onInputChange(null);
+        }
+        /**
+         * （主进程）匹配关键词回调
+         * @param {Electron.IpcRendererEvent} event
+         * @param {{ name: string, path: string, extname: string }[]} results 结果
+         */
+        function onMatchReply(event, results) {
+            // console.log('onMatchReply', results);
+            // 清除已有数据
+            items.value.length = 0;
+            // 当只有一个结果时直接选中
+            if (results.length === 1) {
+                items.value = results;
+                curIndex.value = 0;
+                return;
+            }
+            // 结果数量多时分段加载
+            if (results.length >= 200) {
+                // 每次加载的数量
+                const threshold = 400;
+                // 分段加载函数
+                const load = () => {
+                    const length = results.length,
+                        count = length >= threshold ? threshold : length,
+                        part = results.splice(0, count);
+                    // 加载一部分
+                    for (let i = 0, l = part.length; i < l; i++) {
+                        items.value.push(part[i]);
+                    }
+                    // 是否还有数据
+                    if (results.length > 0) {
+                        // 下一波继续
+                        loadHandler = setTimeout(load);
+                    } else {
+                        // Done
+                        loadHandler = null;
+                    }
+                }
+                // 开始加载
+                load();
+            } else {
+                // 数量不多，更新结果列表
+                items.value = results;
+            }
+        }
+        /**
+         * 获取图标
+         * @param {string} extname 扩展名
+         * @returns {string}
+         */
+        function getIcon(extname) {
+            const iconName = ICON_MAP[extname] || 'asset';
+            return `../../../images/assets/${iconName}.png`;
+        }
+        /**
+         * 处理路径
+         * @param {string} path 完成路径
+         * @returns {string}
+         */
+        function getPath(path) {
+            const start = path.indexOf(`${sep}assets`);
+            return path.slice(start + 1);
+        }
+        /**
+         * 翻译
+         * @param {string} key
+         */
+        function t(key) {
+            return translate(LANG, key);
+        }
+        /**
+         * 生命周期：挂载后
+         */
+        onMounted(() => {
+            // 监听事件
+            RendererEvent.on('data-update', onDataUpdate);
+            RendererEvent.on('match-reply', onMatchReply);
+            // 下一帧
+            nextTick(() => {
+                // 聚焦到输入框
+                focusOnInputField();
+            });
+        });
+        /**
+         * 生命周期：卸载前
+         */
+        onBeforeUnmount(() => {
+            // 取消事件监听
+            RendererEvent.removeAllListeners('data-update');
+            RendererEvent.removeAllListeners('match-reply');
+        });
+        return {
+            input,
+            keyword,
+            items,
+            curIndex,
+            onInputChange,
+            onEnterBtnClick,
+            onUpBtnClick,
+            onDownBtnClick,
+            onLeftBtnClick,
+            onRightBtnClick,
+            onItemClick,
+            getIcon,
+            getPath,
+            t,
+        };
+    },
+};
+// 创建实例
+const app = createApp(App);
+// 挂载
+app.mount('#app');
+/** 文件扩展名对应图标表 */
+const ICON_MAP = {
+    '.anim': 'animation-clip',
+    '.prefab': 'prefab',
+    '.fire': 'scene',
+    '.scene': 'scene',
+    '.effect': 'shader',
+    '.mesh': 'mesh',
+    '.FBX': 'mesh',
+    '.mtl': 'material',
+    '.pmtl': 'physics-material',
+    '.pac': 'auto-atlas',
+    '.ts': 'typescript',
+    '.js': 'javascript',
+    '.coffee': 'coffeescript',
+    '.json': 'json',
+    '.md': 'markdown',
+    '.html': 'html',
+    '.css': 'css',
+    '.txt': 'text',
+    '.ttf': 'ttf-font',
+    '.fnt': 'bitmap-font',
+    '.mp3': 'audio-clip',
+    '.png': 'atlas',
+    '.jpg': 'atlas',
+    '.plist': 'sprite-atlas',
+};

package/Quick Finder/src/renderer/settings/index.css ADDED Viewed

@@ -0,0 +1,101 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  padding: 0 12px;
+  background-color: #454545;
+  color: #bdbdbd;
+  user-select: none;
+}
+#app {
+  width: 100%;
+  height: 100%;
+}
+/* 标题 */
+.title {
+  height: 24px;
+  font-size: 18px;
+  font-weight: 800;
+  margin: 15px 0;
+}
+/* 属性容器 */
+.properties {
+  overflow: visible;
+}
+/* 文件类型 */
+.openable {
+  height: 100px !important;
+  border: 1px solid #666666;
+  border-radius: 3px;
+  background-color: #333333;
+  padding: 5px 0;
+  box-shadow: inset 0 0 8px 2px rgba(0, 0, 0, 0.2);
+  overflow-y: scroll;
+}
+/* 文件类型 项 */
+.openable .item {
+  height: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.openable .item:not(:first-child) {
+  margin-top: 2px;
+}
+/* 文件类型 项 勾选框 */
+.openable .item .checkbox {
+  margin-left: 8px;
+}
+/* 文件类型 项 类型 */
+.openable .item .type {
+  margin-left: 10px;
+  line-height: 20px;
+  font-size: 11px;
+}
+.openable .item:hover .type {
+  color: #eeeeee;
+}
+/* 应用按钮 */
+.apply-btn {
+  min-width: 20px;
+  height: 33px;
+  background-image: linear-gradient(#4281b6, #4281b6);
+  border: 1px solid #171717;
+  border-radius: 3px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 800;
+  text-align: center;
+  outline: none;
+  overflow: hidden;
+  cursor: pointer;
+}
+.apply-btn:hover {
+  background-image: none;
+  background-color: #4c87b6;
+}
+.apply-btn:active {
+  background-image: none;
+  background-color: #2e6da2;
+  border-color: #fd942b;
+  color: #cdcdcd;
+  box-shadow: 1px 1px 10px #262626 inset;
+}
+[v-cloak] {
+  display: none;
+}