# wu-framework-web-ui

**Repository Path**: wujiawei1207537021/wu-framework-web-ui

## Basic Information

- **Project Name**: wu-framework-web-ui
- **Description**: wu-framework-web-ui
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-12
- **Last Updated**: 2026-02-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WU Framework Web UI

**[中文](README.md)** | **[English](README.en.md)**

> A card-based navigation page for accessing UI applications

一个基于卡片展示的导航页面，用于快速访问 UI 应用程序。

## 功能特性 Features

- 🎨 **卡片式布局** - 使用 TDesign Card 组件展示 UI 信息
- 🔄 **动态数据加载** - 从后端接口获取 UI 列表数据
- ⚡ **快速导航** - 点击卡片在新标签页中快速打开对应页面
- 🚫 **访问控制** - 根据支持状态限制访问不可用的 UI
- ❌ **错误处理** - 友好的错误提示信息
- 📱 **响应式设计** - 适配不同屏幕尺寸的设备
- 🌐 **代理配置** - Vite 开发服务器代理到后端接口

## 快速开始 Quick Start

### 安装依赖 Install Dependencies

```bash
npm install
```

### 开发模式 Development

```bash
npm run dev
```

访问 `http://localhost:5173/` 查看应用。

Visit `http://localhost:5173/` to view the application.

### 生产构建 Production Build

```bash
npm run build
```

构建产物将在 `dist` 目录中。

Build artifacts will be in the `dist` directory.

## 项目配置 Project Configuration

### API 接口 API Endpoint

接口地址：`http://127.0.0.1:2001/ui/v1/api/ui/findUI`

API Endpoint: `http://127.0.0.1:2001/ui/v1/api/ui/findUI`

### 代理配置 Proxy Configuration

在开发环境中，Vite 会将请求代理到后端：

In development environment, Vite proxies requests to backend:

```typescript
// vite.config.ts
server: {
  proxy: {
    '/ui/v1/api/ui/findUI': {
      target: 'http://127.0.0.1:2001',
      changeOrigin: true,
      secure: false
    }
  }
}
```

## 数据格式 Data Format

### 接口响应 API Response

```json
{
  "code": 0,
  "message": "success",
  "data": [
    {
      "desc": "UI 描述",
      "support": true,
      "pathPatterns": "/acw-client-ui/**",
      "index": "/acw-client-ui/index.html",
      "locations": "file:/path/to/resources"
    }
  ]
}
```

### 错误响应 Error Response

```json
{
  "code": 401,
  "message": "没有权限访问!"
}
```

## 技术栈 Tech Stack

- **React 18** - UI 框架
- **TypeScript** - 类型安全
- **Vite** - 构建工具
- **TDesign React** - UI 组件库
- **Tailwind CSS** - 样式框架
- **Axios** - HTTP 客户端

## 功能说明 Usage Instructions

### 访问 UI 页面 Accessing UI Pages

1. **支持的 UI (Support: true)** - 点击卡片在新标签页中打开对应的 UI 页面
2. **不支持的 UI (Support: false)** - 点击卡片显示"页面无法加载"提示

Supported UI (Support: true) - Click card to open the UI page in a new tab

Unsupported UI (Support: false) - Click card to show "Page cannot load" alert

### URL 拼接规则 URL Construction Rule

- 如果 `index` 字段是绝对路径（以 `http` 开头），直接使用
- 如果 `index` 字段是相对路径，拼接当前域名：`当前域名 + index`

If `index` field is an absolute path (starts with `http`), use it directly

If `index` field is a relative path, append to current domain: `currentDomain + index`

示例 Example:
- `index`: `/acw-client-ui/index.html`
- 实际打开 URL: `http://localhost:5173/acw-client-ui/index.html`

## 项目结构 Project Structure

```
wu-framework-web-ui/
├── src/
│   ├── App.tsx           # 主组件
│   ├── main.tsx           # 应用入口
│   ├── index.css          # 全局样式
│   ├── api.ts             # API 接口
│   └── types.ts          # TypeScript 类型定义
├── dist/                 # 构建输出目录
├── index.html            # HTML 模板
├── vite.config.ts        # Vite 配置
├── tsconfig.json         # TypeScript 配置
└── package.json          # 项目依赖
```

## 浏览器支持 Browser Support

- Chrome (最新版)
- Firefox (最新版)
- Safari (最新版)
- Edge (最新版)

## 许可证 License

MIT License

## 贡献 Contributing

欢迎提交 Issue 和 Pull Request！

Issues and Pull Requests are welcome!