seeder-resources-view 1.0.1 → 1.0.3

package/dist/index.css

@@ -1 +1 @@
-.resources-view{background:#313131;flex:1;width:100%}.resources-view .content-container{border-top:1px solid #000;display:flex;height:calc(100vh - 50px)}.resources-view .content-container .directory-tree{position:relative;width:400px}.resources-view .content-container .directory-tree:after{border-right:1px solid #171717;content:"";height:100%;position:absolute;right:0;top:0;width:0}.resources-view .content-container .directory-tree .ant-tree{background-color:#313131}.resources-view .content-container .directory-tree .ant-tree .ant-tree-treenode{padding-inline:16px;padding-left:0;position:relative}.resources-view .content-container .directory-tree .ant-tree .ant-tree-treenode:before{bottom:0;content:"";height:auto;inset-inline-end:0;inset-inline-start:0;pointer-events:none;position:absolute;top:0;transition:background-color .2s;z-index:0}.resources-view .content-container .directory-tree .ant-tree .ant-tree-treenode:hover:before{background:hsla(0,0%,100%,.08)}.resources-view .content-container .directory-tree .ant-tree .ant-tree-treenode-selected:before,.resources-view .content-container .directory-tree .ant-tree .ant-tree-treenode-selected:hover:before{background:#595959}.resources-view .content-container .directory-tree .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected,.resources-view .content-container .directory-tree .ant-tree .ant-tree-node-content-wrapper:hover{background:none}.resources-view .content-container .directory-tree .ant-tree .ant-tree-list .ant-tree-node-content-wrapper{display:flex;padding:0 1px}.resources-view .content-container .directory-tree .ant-tree .ant-tree-list .ant-tree-title{display:flex;flex:auto}.resources-view .content-container .directory-tree .ant-tree .ant-tree-list .ant-tree-icon__customize .anticon-folder,.resources-view .content-container .directory-tree .ant-tree .ant-tree-list .ant-tree-icon__customize .anticon-folder-open{font-size:16px}.resources-view .content-container .folder-contents{display:flex;flex:1;flex-direction:column}.resources-view .content-container .folder-contents .media-grid-container{background:#171717;flex:1;max-height:810px;overflow:auto;padding:36px;padding-block-end:20px;padding-block-start:16px}.resources-view .content-container .folder-contents .media-grid-container::-webkit-scrollbar-track-piece{background:#141414}.resources-view .content-container .folder-contents .media-grid-container::-webkit-scrollbar{width:6px}.resources-view .content-container .folder-contents .media-grid-container::-webkit-scrollbar-thumb{background:#434343;border-radius:2px}.resources-view .content-container .folder-contents .media-grid-container .batch-operations{display:flex;margin-block-end:16px}.resources-view .content-container .folder-contents .media-grid-container .ant-list .ant-row{height:auto}.resources-view .content-container .folder-contents .media-grid-container .ant-list-grid .ant-col>.ant-list-item{border:1px solid #424242;margin-block-end:0;padding:20px}.resources-view .content-container .search-bar{border-bottom:1px solid #171717;height:50px;position:relative}.resources-view .content-container .search-bar .upload-icon{color:#a3a3a3;cursor:pointer;font-size:24px;position:absolute;right:14px}.media-grid-item{cursor:pointer}.media-grid-item .media-grid-checkbox-wrapper{display:flex;justify-content:flex-end;margin-block-end:12px;margin-block-start:-12px;margin-inline-end:-12px}.media-grid-item .media-grid-thumbnail{height:124px;width:100%}.media-grid-item .media-grid-info{margin-block-start:4px;text-align:center}.tree-title{align-items:center;flex:1;justify-content:space-between}.tree-title,.tree-title .tree-node-icons{display:flex}.tree-title .tree-node-icons .px-1{padding-inline:4px}.upload-progress{align-items:center;background:rgba(0,0,0,.65);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0}
+.resources-view{background:#313131;flex:1;width:100%}.resources-view .content-container{border-top:1px solid #000;display:flex;height:calc(100vh - 50px)}.resources-view .content-container .directory-tree{position:relative;width:400px}.resources-view .content-container .directory-tree:after{border-right:1px solid #171717;content:"";height:100%;position:absolute;right:0;top:0;width:0}.resources-view .content-container .directory-tree .ant-tree{background-color:#313131}.resources-view .content-container .directory-tree .ant-tree .ant-tree-treenode{padding-inline:16px;padding-left:0;position:relative}.resources-view .content-container .directory-tree .ant-tree .ant-tree-treenode:before{bottom:0;content:"";height:auto;inset-inline-end:0;inset-inline-start:0;pointer-events:none;position:absolute;top:0;transition:background-color .2s;z-index:0}.resources-view .content-container .directory-tree .ant-tree .ant-tree-treenode:hover:before{background:hsla(0,0%,100%,.08)}.resources-view .content-container .directory-tree .ant-tree .ant-tree-treenode-selected:before,.resources-view .content-container .directory-tree .ant-tree .ant-tree-treenode-selected:hover:before{background:#595959}.resources-view .content-container .directory-tree .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected,.resources-view .content-container .directory-tree .ant-tree .ant-tree-node-content-wrapper:hover{background:none}.resources-view .content-container .directory-tree .ant-tree .ant-tree-list .ant-tree-node-content-wrapper{display:flex;padding:0 1px}.resources-view .content-container .directory-tree .ant-tree .ant-tree-list .ant-tree-title{display:flex;flex:auto}.resources-view .content-container .directory-tree .ant-tree .ant-tree-list .ant-tree-icon__customize .anticon-folder,.resources-view .content-container .directory-tree .ant-tree .ant-tree-list .ant-tree-icon__customize .anticon-folder-open{font-size:16px}.resources-view .content-container .folder-contents{display:flex;flex:1;flex-direction:column}.resources-view .content-container .folder-contents .media-grid-container{background:#171717;flex:1;max-height:810px;overflow:auto;padding:36px;padding-block-end:20px;padding-block-start:16px}.resources-view .content-container .folder-contents .media-grid-container::-webkit-scrollbar-track-piece{background:#141414}.resources-view .content-container .folder-contents .media-grid-container::-webkit-scrollbar{width:6px}.resources-view .content-container .folder-contents .media-grid-container::-webkit-scrollbar-thumb{background:#434343;border-radius:2px}.resources-view .content-container .folder-contents .media-grid-container .batch-operations{display:flex;margin-block-end:16px}.resources-view .content-container .folder-contents .media-grid-container .ant-list .ant-row{height:auto}.resources-view .content-container .folder-contents .media-grid-container .ant-list-grid .ant-col>.ant-list-item{border:1px solid #424242;margin-block-end:0;padding:20px}.resources-view .content-container .search-bar{border-bottom:1px solid #171717;height:50px;position:relative}.resources-view .content-container .search-bar .search-input{width:320px}.resources-view .content-container .search-bar .upload-icon{color:#a3a3a3;cursor:pointer;font-size:24px;position:absolute;right:14px}.media-grid-item{cursor:pointer}.media-grid-item .media-grid-checkbox-wrapper{display:flex;justify-content:flex-end;margin-block-end:12px;margin-block-start:-12px;margin-inline-end:-12px}.media-grid-item .media-grid-thumbnail{height:124px;width:100%}.media-grid-item .media-grid-info{margin-block-start:4px;text-align:center}.tree-title{align-items:center;flex:1;justify-content:space-between}.tree-title,.tree-title .tree-node-icons{display:flex}.tree-title .tree-node-icons .px-1{padding-inline:4px}.upload-progress{align-items:center;background:rgba(0,0,0,.65);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0}

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { memo, useMemo, useCallback, useState, useEffect, useRef, forwardRef, useContext, createContext } from 'react';
 import { Spin, List, Dropdown, Checkbox, Image, Typography, Form, Modal, Button, Cascader, Progress, Popover, Input, Flex, Popconfirm, Empty, ConfigProvider, Tree, App, Space } from 'antd';
-import { FolderOpenOutlined, FolderOutlined, ExclamationCircleFilled, CloudUploadOutlined } from '@ant-design/icons';
+import { FolderOpenOutlined, FolderOutlined, ExclamationCircleFilled, SearchOutlined, CloudUploadOutlined } from '@ant-design/icons';
 import axios from 'axios';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -60,6 +60,396 @@ function _toPropertyKey(t) {
   return "symbol" == typeof i ? i : i + "";
 }
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+/**
+ * lodash (Custom Build) <https://lodash.com/>
+ * Build: `lodash modularize exports="npm" -o ./`
+ * Copyright jQuery Foundation and other contributors <https://jquery.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+var lodash_debounce;
+var hasRequiredLodash_debounce;
+
+function requireLodash_debounce () {
+	if (hasRequiredLodash_debounce) return lodash_debounce;
+	hasRequiredLodash_debounce = 1;
+	/** Used as the `TypeError` message for "Functions" methods. */
+	var FUNC_ERROR_TEXT = 'Expected a function';
+
+	/** Used as references for various `Number` constants. */
+	var NAN = 0 / 0;
+
+	/** `Object#toString` result references. */
+	var symbolTag = '[object Symbol]';
+
+	/** Used to match leading and trailing whitespace. */
+	var reTrim = /^\s+|\s+$/g;
+
+	/** Used to detect bad signed hexadecimal string values. */
+	var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+	/** Used to detect binary string values. */
+	var reIsBinary = /^0b[01]+$/i;
+
+	/** Used to detect octal string values. */
+	var reIsOctal = /^0o[0-7]+$/i;
+
+	/** Built-in method references without a dependency on `root`. */
+	var freeParseInt = parseInt;
+
+	/** Detect free variable `global` from Node.js. */
+	var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+	/** Detect free variable `self`. */
+	var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+	/** Used as a reference to the global object. */
+	var root = freeGlobal || freeSelf || Function('return this')();
+
+	/** Used for built-in method references. */
+	var objectProto = Object.prototype;
+
+	/**
+	 * Used to resolve the
+	 * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+	 * of values.
+	 */
+	var objectToString = objectProto.toString;
+
+	/* Built-in method references for those with the same name as other `lodash` methods. */
+	var nativeMax = Math.max,
+	    nativeMin = Math.min;
+
+	/**
+	 * Gets the timestamp of the number of milliseconds that have elapsed since
+	 * the Unix epoch (1 January 1970 00:00:00 UTC).
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 2.4.0
+	 * @category Date
+	 * @returns {number} Returns the timestamp.
+	 * @example
+	 *
+	 * _.defer(function(stamp) {
+	 *   console.log(_.now() - stamp);
+	 * }, _.now());
+	 * // => Logs the number of milliseconds it took for the deferred invocation.
+	 */
+	var now = function() {
+	  return root.Date.now();
+	};
+
+	/**
+	 * Creates a debounced function that delays invoking `func` until after `wait`
+	 * milliseconds have elapsed since the last time the debounced function was
+	 * invoked. The debounced function comes with a `cancel` method to cancel
+	 * delayed `func` invocations and a `flush` method to immediately invoke them.
+	 * Provide `options` to indicate whether `func` should be invoked on the
+	 * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+	 * with the last arguments provided to the debounced function. Subsequent
+	 * calls to the debounced function return the result of the last `func`
+	 * invocation.
+	 *
+	 * **Note:** If `leading` and `trailing` options are `true`, `func` is
+	 * invoked on the trailing edge of the timeout only if the debounced function
+	 * is invoked more than once during the `wait` timeout.
+	 *
+	 * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+	 * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+	 *
+	 * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+	 * for details over the differences between `_.debounce` and `_.throttle`.
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 0.1.0
+	 * @category Function
+	 * @param {Function} func The function to debounce.
+	 * @param {number} [wait=0] The number of milliseconds to delay.
+	 * @param {Object} [options={}] The options object.
+	 * @param {boolean} [options.leading=false]
+	 *  Specify invoking on the leading edge of the timeout.
+	 * @param {number} [options.maxWait]
+	 *  The maximum time `func` is allowed to be delayed before it's invoked.
+	 * @param {boolean} [options.trailing=true]
+	 *  Specify invoking on the trailing edge of the timeout.
+	 * @returns {Function} Returns the new debounced function.
+	 * @example
+	 *
+	 * // Avoid costly calculations while the window size is in flux.
+	 * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+	 *
+	 * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+	 * jQuery(element).on('click', _.debounce(sendMail, 300, {
+	 *   'leading': true,
+	 *   'trailing': false
+	 * }));
+	 *
+	 * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+	 * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+	 * var source = new EventSource('/stream');
+	 * jQuery(source).on('message', debounced);
+	 *
+	 * // Cancel the trailing debounced invocation.
+	 * jQuery(window).on('popstate', debounced.cancel);
+	 */
+	function debounce(func, wait, options) {
+	  var lastArgs,
+	      lastThis,
+	      maxWait,
+	      result,
+	      timerId,
+	      lastCallTime,
+	      lastInvokeTime = 0,
+	      leading = false,
+	      maxing = false,
+	      trailing = true;
+
+	  if (typeof func != 'function') {
+	    throw new TypeError(FUNC_ERROR_TEXT);
+	  }
+	  wait = toNumber(wait) || 0;
+	  if (isObject(options)) {
+	    leading = !!options.leading;
+	    maxing = 'maxWait' in options;
+	    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+	    trailing = 'trailing' in options ? !!options.trailing : trailing;
+	  }
+
+	  function invokeFunc(time) {
+	    var args = lastArgs,
+	        thisArg = lastThis;
+
+	    lastArgs = lastThis = undefined;
+	    lastInvokeTime = time;
+	    result = func.apply(thisArg, args);
+	    return result;
+	  }
+
+	  function leadingEdge(time) {
+	    // Reset any `maxWait` timer.
+	    lastInvokeTime = time;
+	    // Start the timer for the trailing edge.
+	    timerId = setTimeout(timerExpired, wait);
+	    // Invoke the leading edge.
+	    return leading ? invokeFunc(time) : result;
+	  }
+
+	  function remainingWait(time) {
+	    var timeSinceLastCall = time - lastCallTime,
+	        timeSinceLastInvoke = time - lastInvokeTime,
+	        result = wait - timeSinceLastCall;
+
+	    return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
+	  }
+
+	  function shouldInvoke(time) {
+	    var timeSinceLastCall = time - lastCallTime,
+	        timeSinceLastInvoke = time - lastInvokeTime;
+
+	    // Either this is the first call, activity has stopped and we're at the
+	    // trailing edge, the system time has gone backwards and we're treating
+	    // it as the trailing edge, or we've hit the `maxWait` limit.
+	    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+	      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+	  }
+
+	  function timerExpired() {
+	    var time = now();
+	    if (shouldInvoke(time)) {
+	      return trailingEdge(time);
+	    }
+	    // Restart the timer.
+	    timerId = setTimeout(timerExpired, remainingWait(time));
+	  }
+
+	  function trailingEdge(time) {
+	    timerId = undefined;
+
+	    // Only invoke if we have `lastArgs` which means `func` has been
+	    // debounced at least once.
+	    if (trailing && lastArgs) {
+	      return invokeFunc(time);
+	    }
+	    lastArgs = lastThis = undefined;
+	    return result;
+	  }
+
+	  function cancel() {
+	    if (timerId !== undefined) {
+	      clearTimeout(timerId);
+	    }
+	    lastInvokeTime = 0;
+	    lastArgs = lastCallTime = lastThis = timerId = undefined;
+	  }
+
+	  function flush() {
+	    return timerId === undefined ? result : trailingEdge(now());
+	  }
+
+	  function debounced() {
+	    var time = now(),
+	        isInvoking = shouldInvoke(time);
+
+	    lastArgs = arguments;
+	    lastThis = this;
+	    lastCallTime = time;
+
+	    if (isInvoking) {
+	      if (timerId === undefined) {
+	        return leadingEdge(lastCallTime);
+	      }
+	      if (maxing) {
+	        // Handle invocations in a tight loop.
+	        timerId = setTimeout(timerExpired, wait);
+	        return invokeFunc(lastCallTime);
+	      }
+	    }
+	    if (timerId === undefined) {
+	      timerId = setTimeout(timerExpired, wait);
+	    }
+	    return result;
+	  }
+	  debounced.cancel = cancel;
+	  debounced.flush = flush;
+	  return debounced;
+	}
+
+	/**
+	 * Checks if `value` is the
+	 * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+	 * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 0.1.0
+	 * @category Lang
+	 * @param {*} value The value to check.
+	 * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+	 * @example
+	 *
+	 * _.isObject({});
+	 * // => true
+	 *
+	 * _.isObject([1, 2, 3]);
+	 * // => true
+	 *
+	 * _.isObject(_.noop);
+	 * // => true
+	 *
+	 * _.isObject(null);
+	 * // => false
+	 */
+	function isObject(value) {
+	  var type = typeof value;
+	  return !!value && (type == 'object' || type == 'function');
+	}
+
+	/**
+	 * Checks if `value` is object-like. A value is object-like if it's not `null`
+	 * and has a `typeof` result of "object".
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 4.0.0
+	 * @category Lang
+	 * @param {*} value The value to check.
+	 * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+	 * @example
+	 *
+	 * _.isObjectLike({});
+	 * // => true
+	 *
+	 * _.isObjectLike([1, 2, 3]);
+	 * // => true
+	 *
+	 * _.isObjectLike(_.noop);
+	 * // => false
+	 *
+	 * _.isObjectLike(null);
+	 * // => false
+	 */
+	function isObjectLike(value) {
+	  return !!value && typeof value == 'object';
+	}
+
+	/**
+	 * Checks if `value` is classified as a `Symbol` primitive or object.
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 4.0.0
+	 * @category Lang
+	 * @param {*} value The value to check.
+	 * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+	 * @example
+	 *
+	 * _.isSymbol(Symbol.iterator);
+	 * // => true
+	 *
+	 * _.isSymbol('abc');
+	 * // => false
+	 */
+	function isSymbol(value) {
+	  return typeof value == 'symbol' ||
+	    (isObjectLike(value) && objectToString.call(value) == symbolTag);
+	}
+
+	/**
+	 * Converts `value` to a number.
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 4.0.0
+	 * @category Lang
+	 * @param {*} value The value to process.
+	 * @returns {number} Returns the number.
+	 * @example
+	 *
+	 * _.toNumber(3.2);
+	 * // => 3.2
+	 *
+	 * _.toNumber(Number.MIN_VALUE);
+	 * // => 5e-324
+	 *
+	 * _.toNumber(Infinity);
+	 * // => Infinity
+	 *
+	 * _.toNumber('3.2');
+	 * // => 3.2
+	 */
+	function toNumber(value) {
+	  if (typeof value == 'number') {
+	    return value;
+	  }
+	  if (isSymbol(value)) {
+	    return NAN;
+	  }
+	  if (isObject(value)) {
+	    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+	    value = isObject(other) ? (other + '') : other;
+	  }
+	  if (typeof value != 'string') {
+	    return value === 0 ? value : +value;
+	  }
+	  value = value.replace(reTrim, '');
+	  var isBinary = reIsBinary.test(value);
+	  return (isBinary || reIsOctal.test(value))
+	    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+	    : (reIsBadHex.test(value) ? NAN : +value);
+	}
+
+	lodash_debounce = debounce;
+	return lodash_debounce;
+}
+
+var lodash_debounceExports = requireLodash_debounce();
+
 const BASE_MENU_ITEMS = [{
   label: 'Download',
   key: 'download',
@@ -212,7 +602,6 @@ const SelectFolderPathModal = _ref => {
   const [form] = Form.useForm();
   const [options, setOptions] = useState([]);
   const [internalLoading, setInternalLoading] = useState(false);
-  const [selectedPath, setSelectedPath] = useState([]);
   const loading = externalLoading || internalLoading;
 
   // 将 directoryTree 转换为 Cascader 需要的 options 格式
@@ -285,7 +674,6 @@ const SelectFolderPathModal = _ref => {
   }, [form, options, getSelectedNodes, onOk, showFullPath]);
   const handleAfterClose = useCallback(() => {
     form.resetFields();
-    setSelectedPath([]);
   }, [form]);
   return /*#__PURE__*/jsx(Modal, {
     title: title,
@@ -296,13 +684,11 @@ const SelectFolderPathModal = _ref => {
     destroyOnHidden: true,
     footer: [/*#__PURE__*/jsx(Button, {
       onClick: onClose,
-      disabled: batchLoading,
       children: cancelText
     }, "cancel"), /*#__PURE__*/jsx(Button, {
       type: "primary",
       onClick: handleOk,
       loading: batchLoading,
-      disabled: disabled || selectedPath.length === 0,
       children: okText
     }, "submit")],
     children: /*#__PURE__*/jsx(Spin, {
@@ -926,7 +1312,7 @@ const ResourcesView = _ref => {
     renderGridHeader,
     acceptFileTypes = "video/*,.mxf,application/mxf,video/mxf",
     uploadTimeout = 60 * 60 * 1000,
-    searchPlaceholder = "Search resources..."
+    searchPlaceholder = "Search ..."
   } = _ref;
   const {
     message,
@@ -971,12 +1357,24 @@ const ResourcesView = _ref => {
   const [checkAll, setCheckAll] = useState(false);
   const [batchLoading, setBatchLoading] = useState(false);
   const [keyword, setKeyword] = useState('');
+  const [debouncedKeyword, setDebouncedKeyword] = useState('');
+
+  // 创建防抖函数（延迟 300ms）
+  const debouncedSearch = useMemo(() => lodash_debounceExports.debounce(searchValue => {
+    setDebouncedKeyword(searchValue);
+  }, 300), []);
+
+  // 监听 keyword 变化并触发防抖
+  useEffect(() => {
+    debouncedSearch(keyword);
+    return () => debouncedSearch.cancel(); // 组件卸载时取消防抖
+  }, [keyword, debouncedSearch]);
 
   // 过滤内容
   const filteredContents = useMemo(() => {
-    if (!keyword) return contents;
-    return contents.filter(item => item.name.toLowerCase().includes(keyword.toLowerCase()));
-  }, [contents, keyword]);
+    if (!debouncedKeyword) return contents;
+    return contents.filter(item => item.name.toLowerCase().includes(debouncedKeyword.toLowerCase()));
+  }, [contents, debouncedKeyword]);
 
   // 在组件卸载时取消上传
   useEffect(() => {
@@ -1173,7 +1571,7 @@ const ResourcesView = _ref => {
     setCheckAll(checked);
   };
 
-  // 搜索处理
+  // 搜索框变化处理
   const handleSearchChange = e => {
     setKeyword(e.target.value);
   };
@@ -1203,11 +1601,12 @@ const ResourcesView = _ref => {
           justify: "center",
           align: "center",
           className: "search-bar",
-          children: [mergedFeatures.search && /*#__PURE__*/jsx("input", {
-            type: "text",
-            placeholder: searchPlaceholder,
+          children: [mergedFeatures.search && /*#__PURE__*/jsx(Input, {
             value: keyword,
             onChange: handleSearchChange,
+            placeholder: searchPlaceholder,
+            prefix: /*#__PURE__*/jsx(SearchOutlined, {}),
+            allowClear: true,
             className: "search-input"
           }), mergedFeatures.upload && /*#__PURE__*/jsxs(Fragment, {
             children: [/*#__PURE__*/jsx(CloudUploadOutlined, {