Python AdminUI

• 语言: 中文（简体）
• 格式: .pdf
• 来源: readthedocs.org

摘要

文档介绍了一个名为Python AdminUI的Python包，旨在帮助用户快速创建简单的Web前端界面，无需处理HTML、CSS或JavaScript。该包基于Flask和Ant Design Pro，支持表单、图表、多级菜单、分页数据表等功能，适用于数据项目、运维工具、简单IT系统等场景。文档详细介绍了如何通过AdminApp创建应用页面、处理页面操作如通知和导航，以及如何组织和布局复杂的应用界面。

AI总结

《Python AdminUI》是一款基于Flask和Ant Design Pro的Python包，旨在帮助开发者快速创建专业的Web前端界面，而无需直接处理HTML、CSS、React或其他前端代码。以下是文档的核心内容总结：

---

### 1. **简介与特性**
- **适用场景**：适合数据项目、运维工具、简单IT系统、业余项目等，尤其适合需要简单界面且无需处理大流量的场景。
- **核心功能**：
-轻松创建表单、详情页、图表（如折线图、条状图、饼图）。
-支持多级菜单、分页数据表、响应式设计（适配小屏幕和移动设备）。
-无需直接使用HTML、CSS或JavaScript。
- **主组件**：包括`Button`、`DataTable`、`DatePicker`、`DetailGroup`、`Notification`、`Row`、`Column`等，满足不同布局和交互需求。

---

### 2. **页面操作**
- **页面动态更新**：通过`on_click`回调函数实现页面部分内容的替换或更新。例如：

  @app.page('/', 'Control Page')
  def control_page():
      return [
          Card(content=[
              Button('Change Content', on_click=on_change_content),
              Button('Change Element', on_click=on_change_self),
          ]),
          Card(id='detail_card'),
          Card('Paragraph Card', [
              Paragraph('This is the original content', id='paragraph')
          ])
      ]

  def on_change_self():
      return ReplaceElement('paragraph', Paragraph('This element has been changed'))

用户点击按钮“Change Element”时，原段落将被替换为新内容。

- **页面跳转与通知**：支持`NavigateTo`和`Notification`作为页面操作：
- `NavigateTo`：将用户重定向到指定页面。
- `Notification`：显示不同类型的通知（如成功、警告、错误等）。可以结合多个操作返回列表：

    return [
        Notification('A Notification', 'the content of the notification'),
        Notification('Another Notification', 'more content')
    ]

---

### 3. **布局与详情页**
- **布局组件**：使用`Row`和`Column`创建多列布局：

  @app.page('/dashboard', 'Dashboard')
  def dashboard_page():
      return [
          Row([
              Column([
                  ChartCard('Total Sales', '$126,560', 'The total sales number of xxx', height=50, 
                           footer=[Statistic('Daily Sales', '$12423', inline=True)])
              ]),
              Column([...]),
              Column([...]),
              Column([...]),
          ])
      ]

生成一个带有图表和统计信息的仪表盘界面。

- **详情页**：通过`DetailGroup`和`DetailItem`展示记录字段：

  DetailGroup(
      title='User Profile',
      content=[
          DetailItem('Name', 'John Doe'),
          DetailItem('Email', '[e-mail]'),
          DetailItem('Phone', '123-456-7890'),
      ],
      layout='vertical'
  )

---

### 4. **表单创建**
- 支持`Form`、`SelectBox`、`CheckboxGroup`、`TextArea`、`SubmitButton`等组件，便于构建复杂的表单页面。
- 表单提交后可以触发回调函数，执行页面跳转或显示通知：

  def on_detail():
      return NavigateTo('/detail')

---

### 5. **组织应用**
- 当应用规模扩大时，可以通过分割代码文件进行管理。例如：

  from adminui import *
  app = AdminApp()
  @app.page('/', 'home')
  def home_page():
      # 首页布局
      pass
  app.set_as_shared_app()
  import detail  # 导入其他页面

---

### 6. **核心概念与示例**
- **基本概念**：通过`AdminApp`创建应用，将页面添加到应用中，使用修饰器`@app.page`定义页面内容。
- **运行示例**：运行`python example_form.py`后，访问`http://127.0.0.1:5000/`以查看索引页。

---

### 总结
《Python AdminUI》通过简化前端开发流程，帮助开发者快速构建功能丰富、界面专业的Web应用，尤其适合开发者聚焦后端逻辑且需要快速搭建前端界面的场景。其核心功能涵盖表单创建、页面动态操作、布局设计等，支持多种组件和交互方式，满足不同场景的需求。