# low_code_share

**Repository Path**: hyx-fly/low_code_share

## Basic Information

- **Project Name**: low_code_share
- **Description**: low_to_high
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-01-26
- **Last Updated**: 2026-04-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 智慧成机导航

企业级低代码导航门户系统，提供统一的功能入口和信息展示平台。

## 功能特性

- **两级菜单导航**：支持8大业务分类及30+子功能的层级展示
- **智能主题切换**：支持自动/手动深色模式切换，适配夜间时段
- **公告通知模块**：实时展示最新公告信息
- **Toast 组件**：提供丰富的消息提示功能，支持多种类型和自定义配置
- **响应式设计**：适配多种屏幕尺寸
- **流畅动画**：卡片展开、主题切换等交互动画

## 业务模块

| 模块 | 功能范围 |
|------|----------|
| 党群工作 | 党建、工会、纪检、网信 |
| 行政办公 | 行政、人事、劳资、财务、教育 |
| 运用工作 | 运用管理、动车、普速、调度、计划 |
| 安全管理 | 安全监督、保安、施工、保卫 |
| 技术规章 | 检修、整备、调度、节能 |
| 设备管理 | 技改、修程、整备、环保、信息 |
| 物资管理 | 采购、库存、调配 |
| 系统参数 | 人员、应用、权限 |

## 项目结构

```
low_code_share/
├── 导航页2.0/
│   ├── index.html          # 主页面
│   ├── index.js            # 业务逻辑
│   ├── index.css           # 样式文件
│   └── 设计图/             # UI设计稿
│       ├── light.png
│       └── night.png
├── Toast/                  # Toast 组件
│   ├── toast.js            # Toast 逻辑和 API
│   ├── toast.css           # Toast 样式
│   └── toast.html          # Toast 示例和演示页面
└── utils/
    └── utils.js            # 工具函数
```

## Toast 组件

### 功能特点
- **类型丰富**：支持成功、警告、错误、信息四种类型
- **高度可配置**：支持自定义标题、内容、显示时长、关闭按钮
- **视觉效果**：带进度条显示剩余时间，支持滑入滑出动画
- **响应式设计**：适配移动端和桌面端
- **深色模式**：与主题系统完美集成

### 文件结构
```
Toast/
├── toast.js          # Toast 逻辑和 API
├── toast.css         # Toast 样式
└── toast.html        # Toast 示例和演示页面
```

### 使用方式
1. **基础使用**：通过 `showToast()` 函数创建各种类型的提示
2. **快捷方法**：提供 `showSuccessToast()`、`showWarningToast()` 等简化方法
3. **自定义配置**：支持配置标题、时长、是否显示关闭按钮等

### API 配置
- `type`: 提示类型 (success/warning/error/info)
- `title`: 可选标题
- `message`: 主要内容
- `duration`: 自动关闭时长 (毫秒)
- `showClose`: 是否显示关闭按钮

### 集成要求
- 需要在 HTML 中添加 `<div id="toastContainer" class="cj-toast-container"></div>` 容器
- 引入 toast.js 和 toast.css 文件

### 示例代码
```javascript
// 基础使用
showToast({
    type: 'success',
    message: '操作成功完成！'
});

// 带标题和进度条
showToast({
    type: 'warning',
    title: '注意',
    message: '这是一个警告信息',
    duration: 5000
});
```

## 技术栈

- 纯前端开发（HTML/CSS/JavaScript）
- 低代码平台集成
- View Transitions API（主题切换动画）
- LocalStorage（主题状态持久化）
- Toast 组件（消息提示系统）

## 使用说明

### 本地开发

- **导航页面**：直接在浏览器中打开 `导航页2.0/index.html` 即可预览。
- **Toast 示例**：打开 `Toast/toast.html` 查看 Toast 组件的完整示例和演示。

### 低代码平台集成

将 `导航页2.0/index.js` 中的 `run()` 函数集成到低代码平台的 `onMounted` 生命周期中：

```javascript
const run = (ctx) => {
    const tasks = [
        queryFirstCardData(ctx),
        querySubCardData(ctx)
    ]
    Promise.all(tasks).then(res => {
        functionCardsData = res[0]
        subFunctionCardsData = res[1]
    }).catch(err => {
        console.error('数据加载失败:', err)
    }).finally(() => {
        initPage()
    })
}
```

## 配置说明

### 主题配置

在 `index.js` 中可调整夜间模式时段：

```javascript
const themeConfig = {
    nightStartHour: 18,    // 夜间开始时间
    nightStartMinute: 0,
    nightEndHour: 6,       // 夜间结束时间
    nightEndMinute: 0
}
```

### API配置

系统需要配置以下数据源API：
- `getFirstCardApi`：获取一级菜单数据
- `getSubCardDataApi`：获取二级菜单数据

## 数据结构

### 一级菜单数据格式

```javascript
{
    id: 1,
    icon: '党',
    color: '#e74c3c',
    title: '党群工作',
    desc: '党建工会纪检网信',
    typeKey: 'party'
}
```

### 二级菜单数据格式

```javascript
{
    id: 101,
    typeKey: 'party',
    icon: '🏛️',
    title: '党建工作',
    desc: '党建组织与活动管理',
    path: '/party/work'
}
```

## 浏览器支持

- Chrome (推荐)
- Firefox
- Edge
- Safari

需要支持 View Transitions API 的现代浏览器。

## 许可证

本项目采用 [GPL-3.0](LICENSE) 许可证。

### 许可证说明

- ✅ 允许：查看、使用、修改源代码
- ✅ 允许：分发修改后的版本
- ⚠️ 要求：分发时必须提供源代码
- ⚠️ 要求：修改后的作品必须使用相同许可证
- ❌ 禁止：闭源商业使用