@kne/file-system-view 1.0.0

package/README.md

@@ -0,0 +1,290 @@
+# file-system-view
+
+### 描述
+
+A React component for displaying file directory structure with tree view, file type icons and context menu
+
+### 安装
+
+```shell
+npm i --save @kne/file-system-view
+```
+
+### 概述
+
+一个用于浏览文件目录结构的 React 组件，支持树形展示、文件夹展开收起、文件类型图标、hover 操作菜单等功能。
+
+### 特性
+
+- 📁 **树形结构** - 支持多级目录展示，文件夹可展开/收起，带有层级连接线
+- 🎨 **文件图标** - 自动识别 20+ 种文件类型，显示对应图标
+- ⚡ **操作菜单** - hover 显示操作按钮，支持自定义菜单项
+- 🌐 **国际化** - 内置中英文支持
+- 📱 **美观易用** - 精心设计的交互和视觉样式
+
+
+### 示例
+
+#### 示例代码
+
+- 基础用法
+- 展示完整的文件系统浏览功能，包含文件夹展开收起、文件类型图标、hover操作菜单等特性
+- _FileSystemView(@kne/current-lib_file-system-view)[import * as _FileSystemView from "@kne/file-system-view"],(@kne/current-lib_file-system-view/dist/index.css)[import "@kne/file-system-view/dist/index.css"],antd(antd)[import * as antd from "antd"]
+
+```jsx
+const { default: FileSystemView } = _FileSystemView;
+const { message } = antd;
+
+const fileData = [
+  {
+    name: 'src',
+    type: 'directory',
+    children: [
+      {
+        name: 'components',
+        type: 'directory',
+        children: [
+          { name: 'Button.tsx', type: 'file' },
+          { name: 'Input.tsx', type: 'file' },
+          { name: 'Modal.tsx', type: 'file' },
+        ],
+      },
+      {
+        name: 'utils',
+        type: 'directory',
+        children: [
+          { name: 'format.js', type: 'file' },
+          { name: 'request.js', type: 'file' },
+        ],
+      },
+      { name: 'index.ts', type: 'file' },
+      { name: 'App.tsx', type: 'file' },
+      { name: 'styles.scss', type: 'file' },
+    ],
+  },
+  {
+    name: 'public',
+    type: 'directory',
+    children: [
+      { name: 'index.html', type: 'file' },
+      { name: 'favicon.svg', type: 'file' },
+      { name: 'logo.png', type: 'file' },
+    ],
+  },
+  {
+    name: 'docs',
+    type: 'directory',
+    children: [
+      { name: 'README.md', type: 'file' },
+      { name: 'API.md', type: 'file' },
+      { name: 'guide.pdf', type: 'file' },
+      { name: 'very-long-file-name-that-demonstrates-text-overflow-handling-in-the-component-v2.0.0-final.pdf', type: 'file' },
+    ],
+  },
+  {
+    name: 'media',
+    type: 'directory',
+    children: [
+      {
+        name: 'videos',
+        type: 'directory',
+        children: [
+          { name: 'intro.mp4', type: 'file' },
+          { name: 'demo.mov', type: 'file' },
+          { name: 'tutorial.webm', type: 'file' },
+        ],
+      },
+      {
+        name: 'audio',
+        type: 'directory',
+        children: [
+          { name: 'bgm.mp3', type: 'file' },
+          { name: 'sound.wav', type: 'file' },
+          { name: 'voice.flac', type: 'file' },
+        ],
+      },
+    ],
+  },
+  { name: 'package.json', type: 'file' },
+  { name: 'tsconfig.json', type: 'file' },
+  { name: '.gitignore', type: 'file' },
+];
+
+const menuItems = [
+  {
+    label: '打开',
+    onClick: (data, key) => message.info(`打开: ${key}`),
+  },
+  {
+    label: '复制路径',
+    onClick: (data, key) => {
+      navigator.clipboard.writeText(key);
+      message.success('路径已复制');
+    },
+  },
+  { type: 'divider' },
+  {
+    label: '重命名',
+    onClick: (data, key) => message.info(`重命名: ${data.name}`),
+  },
+  {
+    label: '删除',
+    danger: true,
+    onClick: (data, key) => message.warning(`删除: ${key}`),
+  },
+];
+
+const BaseExample = () => {
+  return (
+    <div style={{ padding: 24, background: '#fafafa', borderRadius: 8 }}>
+      <FileSystemView
+        data={fileData}
+        menuItems={menuItems}
+        defaultExpandAll
+        onFileClick={(data, key) => message.info(&#96;点击文件: ${key}&#96;)}
+      />
+    </div>
+  );
+};
+
+render(<BaseExample />);
+
+```
+
+- 简单列表
+- 不包含操作菜单的简单文件列表示例
+- _FileSystemView(@kne/current-lib_file-system-view)[import * as _FileSystemView from "@kne/file-system-view"],(@kne/current-lib_file-system-view/dist/index.css)[import "@kne/file-system-view/dist/index.css"]
+
+```jsx
+const { default: FileSystemView } = _FileSystemView;
+
+const fileData = [
+  { name: 'index.js', type: 'file' },
+  { name: 'utils.js', type: 'file' },
+  { name: 'styles.css', type: 'file' },
+];
+
+const SimpleExample = () => {
+  return (
+    <div style={{ padding: 24, background: '#fafafa', borderRadius: 8 }}>
+      <FileSystemView 
+        data={fileData} 
+        onFileClick={(data, key) => console.log('点击文件:', key)}
+      />
+    </div>
+  );
+};
+
+render(<SimpleExample />);
+
+```
+
+- 受控模式
+- 通过 expandedKeys 和 selectedKey 控制展开和选中状态，可配合外部按钮实现展开全部/收起全部功能
+- _FileSystemView(@kne/current-lib_file-system-view)[import * as _FileSystemView from "@kne/file-system-view"],(@kne/current-lib_file-system-view/dist/index.css)[import "@kne/file-system-view/dist/index.css"],antd(antd)[import * as antd from "antd"]
+
+```jsx
+const { default: FileSystemView } = _FileSystemView;
+const { useState } = React;
+const { Button, Space, message } = antd;
+
+const fileData = [
+  {
+    name: 'project',
+    type: 'directory',
+    children: [
+      {
+        name: 'src',
+        type: 'directory',
+        children: [
+          { name: 'main.js', type: 'file' },
+          { name: 'app.js', type: 'file' },
+        ],
+      },
+      {
+        name: 'lib',
+        type: 'directory',
+        children: [{ name: 'utils.js', type: 'file' }],
+      },
+      { name: 'config.json', type: 'file' },
+    ],
+  },
+];
+
+const ControlledExample = () => {
+  const [expandedKeys, setExpandedKeys] = useState([]);
+
+  const expandAll = () => {
+    const allKeys = ['project', 'project/src', 'project/lib'];
+    setExpandedKeys(allKeys);
+    message.success('已展开所有目录');
+  };
+
+  const collapseAll = () => {
+    setExpandedKeys([]);
+    message.success('已收起所有目录');
+  };
+
+  return (
+    <div>
+      <Space style={{ marginBottom: 16 }}>
+        <Button onClick={expandAll}>展开全部</Button>
+        <Button onClick={collapseAll}>收起全部</Button>
+      </Space>
+      <div style={{ padding: 24, background: '#fafafa', borderRadius: 8 }}>
+        <FileSystemView
+          data={fileData}
+          expandedKeys={expandedKeys}
+          onExpand={(keys) => setExpandedKeys(keys)}
+        />
+      </div>
+    </div>
+  );
+};
+
+render(<ControlledExample />);
+
+```
+
+### API
+
+### Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|----|----|-----|----|
+| data | `FileItem[]` | `[]` | 目录结构数据 |
+| menuItems | `MenuItem[]` | - | 操作菜单项配置，不传则不显示操作按钮 |
+| defaultExpandAll | `boolean` | `false` | 是否默认展开所有目录 |
+| expandedKeys | `string[]` | - | （受控）展开的节点 key 数组 |
+| onExpand | `(keys: string[], info: { node, expanded, nativeEvent }) => void` | - | 展开/收起节点时的回调 |
+| onFileClick | `(data: FileItem, key: string) => void` | - | 点击文件时的回调 |
+
+### FileItem
+
+| 属性 | 类型 | 说明 |
+|----|----|----|
+| name | `string` | 文件或文件夹名称 |
+| type | `'file' \| 'directory'` | 类型，文件夹需要有 children 或 type 为 'directory' |
+| children | `FileItem[]` | 子项列表（仅文件夹） |
+
+### MenuItem
+
+| 属性 | 类型 | 说明 |
+|----|----|----|
+| label | `string` | 菜单项文本 |
+| icon | `ReactNode` | 菜单项图标 |
+| onClick | `(data: FileItem, key: string) => void` | 点击回调 |
+| danger | `boolean` | 是否为危险操作（红色文本） |
+| disabled | `(data: FileItem, key: string) => boolean` | 是否禁用的判断函数 |
+
+### 支持的文件类型图标
+
+组件内置以下文件类型的图标识别：
+
+- **代码文件**: js, jsx, ts, tsx, json, css, scss, less, html, vue, py, java, go, rs
+- **文档文件**: md, txt, pdf, doc, docx, xls, xlsx
+- **图片文件**: png, jpg, jpeg, gif, svg, webp
+- **视频文件**: mp4, avi, mov, wmv, mkv, webm, flv
+- **音频文件**: mp3, wav, flac, aac, ogg, wma
+- **压缩文件**: zip, rar, 7z, tar, gz
+- **其他**: 默认文件图标

package/dist/index.css

@@ -0,0 +1,125 @@
+._qMhn9 {
+  font-size: 14px;
+  -webkit-user-select: none;
+          user-select: none;
+}
+._qMhn9 .ant-tree {
+  background: transparent;
+}
+._qMhn9 .ant-tree .ant-tree-treenode {
+  padding: 0;
+  width: 100%;
+  position: relative;
+}
+._qMhn9 .ant-tree .ant-tree-treenode:before {
+  bottom: 0;
+}
+._qMhn9 .ant-tree .ant-tree-treenode .ant-tree-node-content-wrapper {
+  padding: 0;
+  flex: 1;
+  min-width: 0;
+}
+._qMhn9 .ant-tree .ant-tree-treenode .ant-tree-node-content-wrapper:hover {
+  background: transparent;
+}
+._qMhn9 .ant-tree .ant-tree-treenode .ant-tree-switcher {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  flex-shrink: 0;
+}
+._qMhn9 .ant-tree .ant-tree-treenode .ant-tree-switcher:before {
+  display: none;
+}
+._qMhn9 .ant-tree-list-holder-inner .ant-tree-treenode {
+  padding-left: 0;
+}
+._qMhn9 .ant-tree-switcher-line-icon {
+  color: #d9d9d9;
+}
+._qMhn9 .ant-tree-node-content-wrapper .tree-node {
+  border-left: 2px solid transparent;
+  transition: all 0.2s ease;
+}
+._qMhn9 .ant-tree-treenode[style*="padding-left: 0px"] .tree-node, ._qMhn9 .ant-tree-treenode:first-child .tree-node {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+._t015K {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  min-height: 28px;
+  width: 100%;
+}
+._t015K:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+._t015K:hover ._mLgqh {
+  margin-left: 4px;
+  opacity: 1;
+  visibility: visible;
+}
+
+._dgomj {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+._dgomj .anticon {
+  font-size: 14px;
+}
+
+._r6Ngq {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  color: #333;
+  font-size: 13px;
+  display: flex;
+  min-width: 0;
+}
+
+._st428 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+._POSao {
+  flex-shrink: 0;
+}
+
+._mLgqh {
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.2s ease;
+  margin-left: auto;
+  padding: 0 2px;
+  height: 20px;
+  width: 20px;
+  flex-shrink: 0;
+  color: #999;
+}
+._mLgqh:hover {
+  color: #1677ff;
+  background: rgba(22, 119, 255, 0.1);
+}
+
+._4zeDm {
+  padding: 40px 20px;
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,eAAe;EACf,yBAAiB;UAAjB,iBAAiB;AACnB;AACA;EACE,uBAAuB;AACzB;AACA;EACE,UAAU;EACV,WAAW;EACX,kBAAkB;AACpB;AACA;EACE,SAAS;AACX;AACA;EACE,UAAU;EACV,OAAO;EACP,YAAY;AACd;AACA;EACE,uBAAuB;AACzB;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,WAAW;EACX,cAAc;AAChB;AACA;EACE,aAAa;AACf;AACA;EACE,eAAe;AACjB;AACA;EACE,cAAc;AAChB;AACA;EACE,kCAAkC;EAClC,yBAAyB;AAC3B;AACA;EACE,+BAA+B;AACjC;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,gBAAgB;EAChB,kBAAkB;EAClB,eAAe;EACf,yBAAyB;EACzB,kBAAkB;EAClB,gBAAgB;EAChB,WAAW;AACb;AACA;EACE,+BAA+B;AACjC;AACA;EACE,gBAAgB;EAChB,UAAU;EACV,mBAAmB;AACrB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,WAAW;EACX,YAAY;EACZ,iBAAiB;EACjB,cAAc;AAChB;AACA;EACE,eAAe;AACjB;;AAEA;EACE,OAAO;EACP,gBAAgB;EAChB,mBAAmB;EACnB,WAAW;EACX,eAAe;EACf,aAAa;EACb,YAAY;AACd;;AAEA;EACE,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;EACnB,YAAY;AACd;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,UAAU;EACV,kBAAkB;EAClB,yBAAyB;EACzB,iBAAiB;EACjB,cAAc;EACd,YAAY;EACZ,WAAW;EACX,cAAc;EACd,WAAW;AACb;AACA;EACE,cAAc;EACd,mCAAmC;AACrC;;AAEA;EACE,kBAAkB;EAClB,kBAAkB;EAClB,WAAW;EACX,eAAe;AACjB","file":"index.css","sourcesContent":[".file-system-view {\n  font-size: 14px;\n  user-select: none;\n}\n.file-system-view :global .ant-tree {\n  background: transparent;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode {\n  padding: 0;\n  width: 100%;\n  position: relative;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode:before {\n  bottom: 0;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode .ant-tree-node-content-wrapper {\n  padding: 0;\n  flex: 1;\n  min-width: 0;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode .ant-tree-node-content-wrapper:hover {\n  background: transparent;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode .ant-tree-switcher {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 10px;\n  flex-shrink: 0;\n}\n.file-system-view :global .ant-tree .ant-tree-treenode .ant-tree-switcher:before {\n  display: none;\n}\n.file-system-view :global .ant-tree-list-holder-inner .ant-tree-treenode {\n  padding-left: 0;\n}\n.file-system-view :global .ant-tree-switcher-line-icon {\n  color: #d9d9d9;\n}\n.file-system-view :global .ant-tree-node-content-wrapper .tree-node {\n  border-left: 2px solid transparent;\n  transition: all 0.2s ease;\n}\n.file-system-view :global .ant-tree-treenode[style*=\"padding-left: 0px\"] .tree-node, .file-system-view :global .ant-tree-treenode:first-child .tree-node {\n  background: rgba(0, 0, 0, 0.02);\n}\n\n.tree-node {\n  display: flex;\n  align-items: center;\n  padding: 4px 8px;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  position: relative;\n  min-height: 28px;\n  width: 100%;\n}\n.tree-node:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n.tree-node:hover .action-btn {\n  margin-left: 4px;\n  opacity: 1;\n  visibility: visible;\n}\n\n.node-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  margin-right: 6px;\n  flex-shrink: 0;\n}\n.node-icon :global .anticon {\n  font-size: 14px;\n}\n\n.node-title {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  color: #333;\n  font-size: 13px;\n  display: flex;\n  min-width: 0;\n}\n\n.node-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n.node-ext {\n  flex-shrink: 0;\n}\n\n.action-btn {\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.2s ease;\n  margin-left: auto;\n  padding: 0 2px;\n  height: 20px;\n  width: 20px;\n  flex-shrink: 0;\n  color: #999;\n}\n.action-btn:hover {\n  color: #1677ff;\n  background: rgba(22, 119, 255, 0.1);\n}\n\n.empty {\n  padding: 40px 20px;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n}"]}