d8dfun/contract-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新原型生成技能为平铺iframe架构

Browse Source 
- 更新技能文档，采用iframe平铺展示架构
- 重新生成资产租赁管理系统原型页面
- 优化文档系统路径处理

Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
D8D Developer
2026-03-24 10:46:07 +00:00
parent 9cd6837935
commit 7b9f2c7b41
21 changed files with 1916 additions and 1412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

332
.claude/skills/generate-prototype-grid/SKILL.md
View File

@@ -1,12 +1,85 @@
---
name: generate-prototype-grid
description: 根据方案文档/需求文档生成原型平铺展示系统。AI 工作流：分析文档 → 拆分功能模块 → 生成各页面 HTML → 生成平铺入口页面。移动端用 375×812 iPhone 框架+iframe，桌面端用侧边栏+卡片布局。
description: 根据方案文档/需求文档生成原型平铺展示系统。AI 工作流：分析文档 → 拆分功能模块 → 生成各页面独立 HTML → 生成平铺入口页面。架构：每个页面是独立 HTML 文件，入口页面通过 iframe 网格同时平铺展示所有页面。
---
# Generate Prototype Grid
根据方案文档生成原型平铺展示系统的 **AI 工作流**。
## 核心架构说明
### ⭐ 平铺展示架构（核心概念）
本技能采用 **iframe 平铺展示架构**，所有页面同时显示在网格中，一目了然：
```
┌─────────────────────────────────────────────────────────────────┐
│ admin-index.html (平铺入口) │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ 所有页面同时显示，一键总览 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────┬─────────────────────┬───────────────┐ │
│ │ <iframe src=" │ <iframe src=" │ <iframe src= │ │
│ │ pages/admin/ │ pages/admin/ │ pages/admin/ │ │
│ │ index.html"> │ water-temp.html"> │ balance-rate │ │
│ │ │ │ .html"> │ │
│ │ 首页地图 │ 回水立管温度 │ 二次平衡率 │ │
│ │ ───────────── │ ────────────── │ ────────── │ │
│ │ [地图可视化] │ [机组数据统计] │ [平衡率分析] │ │
│ └─────────────────────┴─────────────────────┴───────────────┘ │
│ │
│ ┌─────────────────────┬─────────────────────┬───────────────┐ │
│ │ <iframe src=" │ <iframe src=" │ <iframe src= │ │
│ │ pages/admin/ │ pages/admin/ │ pages/admin/ │ │
│ │ room-temp.html"> │ station-data.html">│ device-mgmt. │ │
│ │ │ │ html"> │ │
│ │ 室温采集 │ 换热站数据 │ 设备管理 │ │
│ │ ───────────── │ ────────────── │ ────────── │ │
│ │ [室温达标率] │ [供回温度数据] │ [设备列表] │ │
│ └─────────────────────┴─────────────────────┴───────────────┘ │
│ │
│ 💡 平铺优势：一次看到所有页面，无需切换，全局视图 │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### 平铺 vs 切换对比
| 方式 | 说明 | 优势 | 适用场景 |
|------|------|------|----------|
| **平铺展示** ⭐ | 所有页面同时显示 | 一目了然、无需切换、全局视图 | **原型展示、评审、演示** |
| 切换显示 | 一次只显示一个页面 | 节省空间、专注单个页面 | 实际应用、单页操作 |
### 架构优势
| 特性 | 说明 |
|------|------|
| **平铺展示** | 所有页面同时可见，一键总览整个系统 |
| 独立开发 | 每个页面是独立 HTML 文件，可单独编辑和测试 |
| 解耦维护 | 页面间无依赖关系，修改一个页面不影响其他页面 |
| 易于扩展 | 新增页面只需添加新的 HTML 文件，在网格中增加一个 iframe |
### 关键规则
1. **每个功能页面 = 一个独立 HTML 文件**
- 文件位置: `pages/admin/功能名称.html`
- 包含完整的 HTML 结构（head、body、样式、脚本）
- 可独立在浏览器中打开预览
2. **入口页面 = 平铺 iframe 网格**
- 使用多个 `<iframe>` 同时加载所有独立页面
- 采用网格布局（CSS Grid）排列所有 iframe
- 所有页面同时显示，无需切换
3. **平铺布局要点**
- 使用 CSS Grid 实现响应式网格
- 每个 iframe 固定或自适应高度
- 支持滚动查看所有页面
---
## 核心工作流程
```
@@ -45,11 +118,30 @@ description: 根据方案文档/需求文档生成原型平铺展示系统。AI
## Step 2: 生成原型页面
根据页面清单，AI 逐个生成原型页面。
根据页面清单，AI 逐个生成**独立的 HTML 文件**。
### ⚠️ 关键架构说明
**每个页面都是独立的 HTML 文件**，不包含在其他页面中。入口页面通过 iframe 加载这些独立文件。
### 页面生成规则
#### 桌面端页面结构
#### 文件组织结构
```
prototype/
├── admin-index.html # 入口页面（使用 iframe 加载其他页面）
└── pages/
└── admin/
├── index.html # 首页地图（独立文件）
├── water-temperature.html # 回水立管温度（独立文件）
├── balance-rate.html # 二次平衡率（独立文件）
├── room-temperature.html # 室温采集（独立文件）
├── station-data.html # 换热站数据（独立文件）
└── device-management.html # 设备管理（独立文件）
```
#### 桌面端页面结构（独立 HTML 文件）
```html
<!DOCTYPE html>
@@ -90,11 +182,39 @@ description: 根据方案文档/需求文档生成原型平铺展示系统。AI
- 使用 `href="xxx.html"` 进行页面跳转
- 点击区域最小 44×44px
## Step 3: 生成入口页面
## Step 3: 生成平铺入口页面
生成平铺展示所有页面的入口页面。
生成**使用 iframe 平铺展示所有页面**的入口页面。
### 桌面端入口页面 (admin-index.html)
### ⚠️ 关键架构说明
**平铺展示**：入口页面使用多个 `<iframe>` 同时加载所有独立页面，所有页面**同时可见**，无需切换。
```
┌─────────────────────────────────────────────────────────────┐
│ admin-index.html (平铺入口页面) │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ ┌──────────────────┐ ┌──────────────────┐ ┌───────────┐ │
│ │ <iframe src=" │ │ <iframe src=" │ │ <iframe │ │
│ │ pages/admin/ │ │ pages/admin/ │ │ src=... │ │
│ │ index.html"> │ │ water-temp.html"> │ │ │ │
│ │ │ │ │ │ │ │
│ │ 首页地图 │ │ 回水立管温度 │ │ 二次平衡率│ │
│ └──────────────────┘ └──────────────────┘ └───────────┘ │
│ │
│ ┌──────────────────┐ ┌──────────────────┐ ┌───────────┐ │
│ │ <iframe src=...> │ │ <iframe src=...> │ │ <iframe │ │
│ │ │ │ │ │ src=... │ │
│ │ 室温采集 │ │ 换热站数据 │ │ 设备管理 │ │
│ └──────────────────┘ └──────────────────┘ └───────────┘ │
│ │
│ 💡 所有页面同时显示，一眼看完整个原型系统 │
│ │
└─────────────────────────────────────────────────────────────┘
```
### 桌面端平铺入口页面结构 (admin-index.html)
```html
<!DOCTYPE html>
@@ -102,25 +222,91 @@ description: 根据方案文档/需求文档生成原型平铺展示系统。AI
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理后台</title>
<title>原型系统 - 平铺展示</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 平铺网格布局 */
.prototype-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 两列平铺 */
gap: 16px;
padding: 16px;
}
.prototype-iframe {
width: 100%;
height: 1000px; /* 桌面端高度，确保完整页面内容可见 */
border: 1px solid #e5e7eb;
border-radius: 12px;
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="bg-gray-100">
<div class="flex min-h-screen">
<!-- 侧边栏 260px -->
<div class="w-72 bg-slate-800 text-white">
<!-- 导航菜单 -->
</div>
<!-- 主内容区 -->
<div class="flex-1 p-6">
<!-- 页面卡片网格 -->
</div>
<!-- 顶部标题栏 -->
<header class="bg-gradient-to-r from-blue-600 to-blue-700 text-white py-4 px-6">
<h1 class="text-2xl font-bold">原型系统 - 平铺展示</h1>
<p class="text-blue-100 text-sm">所有页面同时显示，一目了然</p>
</header>
<!-- 平铺网格容器 -->
<div class="prototype-grid">
<!-- 平铺所有页面 iframe -->
<iframe src="pages/admin/index.html" class="prototype-iframe" title="首页地图"></iframe>
<iframe src="pages/admin/water-temperature.html" class="prototype-iframe" title="回水立管温度"></iframe>
<iframe src="pages/admin/balance-rate.html" class="prototype-iframe" title="二次平衡率"></iframe>
<iframe src="pages/admin/room-temperature.html" class="prototype-iframe" title="室温采集"></iframe>
<iframe src="pages/admin/station-data.html" class="prototype-iframe" title="换热站数据"></iframe>
<iframe src="pages/admin/device-management.html" class="prototype-iframe" title="设备管理"></iframe>
</div>
</body>
</html>
```
### 响应式平铺布局
```html
<style>
/* 大屏：3列平铺 */
@media (min-width: 1400px) {
.prototype-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* 中屏：2列平铺 */
@media (min-width: 768px) and (max-width: 1399px) {
.prototype-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 小屏：1列平铺 */
@media (max-width: 767px) {
.prototype-grid {
grid-template-columns: 1fr;
}
}
</style>
```
### iframe 配置要点
| 属性 | 值 | 说明 |
|------|-----|------|
| src | `pages/admin/xxx.html` | 加载独立 HTML 文件的路径 |
| class | `prototype-iframe` | 统一样式类，固定高度和边框 |
| title | 页面名称 | 辅助功能，iframe 标题 |
| scrolling | `auto` 或 `yes` | 允许滚动（页面内容可能超过 iframe 高度） |
| loading | `lazy` | 懒加载，优化性能（可选） |
### 平铺布局选项
| 布局 | CSS | 适用场景 |
|------|-----|----------|
| **2列网格** ⭐ | `grid-template-columns: repeat(2, 1fr)` | 默认，桌面端平铺 |
| 3列网格 | `grid-template-columns: repeat(3, 1fr)` | 大屏幕，更多页面 |
| 1列网格 | `grid-template-columns: 1fr` | 小屏幕，移动端 |
## Step 4: 生成统一入口页面
生成 `index.html` 作为项目统一入口，整合原型系统和文档系统。
@@ -152,6 +338,69 @@ description: 根据方案文档/需求文档生成原型平铺展示系统。AI
- Markdown 转 HTML
- 文档列表 API: `GET /api/docs`
- 文档渲染 API: `GET /api/doc/:name`
- **中文文件名支持**: URL 解码处理 `decodeURIComponent()`
### ⚠️ 中文文件名处理
**关键修复**: 文档渲染 API 必须处理 URL 编码的中文文件名
```javascript
// server.js 中文档渲染端点
app.get('/api/doc/:name', (req, res) => {
const docName = decodeURIComponent(req.params.name); // 必须解码！
// 如果文件名已包含 .md 后缀，不要再加
const docPath = docName.endsWith('.md') ? docName : docName + '.md';
const filePath = path.join(DOCS_DIR, docPath);
// ...
});
```
**问题原因**: 前端请求中文文件名时会自动 URL 编码（如 `%E5%8E%9F%E5%A7%8B...`），后端必须解码才能找到文件。
### ⚠️ 代码块样式处理
**关键修复**: Markdown 转 HTML 时必须保护代码块内容，避免换行被错误替换
```javascript
// 使用占位符保护代码块
const codeBlocks = [];
let html = markdown
// 先提取代码块，用占位符替换
.replace(/```(\w*)\n?([\s\S]*?)```/g, (match, lang, code) => {
const placeholder = `__CODE_BLOCK_${codeBlocks.length}__`;
const isAsciiArt = /┌|│|└|├|─|┐|┘|┤/.test(code);
const bgClass = isAsciiArt ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900';
codeBlocks.push(`<pre class="${bgClass} p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm whitespace-pre"><code>${code}</code></pre>`);
return placeholder;
})
// ... 其他处理 ...
// 最后恢复代码块
.replace(/__CODE_BLOCK_(\d+)__/g, (match, index) => codeBlocks[index]);
```
**问题原因**: 直接用 `.replace(/\n/g, '<br>')` 会把代码块中的换行也替换成 `<br>`，导致每行都有背景。
**样式规范**:
- ASCII图表代码块：`bg-gray-800 text-gray-100`（深色背景+浅色文字）
- 普通代码块：`bg-gray-100 text-gray-900`（浅色背景+深色文字）
- 内联代码：`bg-gray-200 text-gray-800`（浅灰背景+深色文字）
### ⚠️ Markdown 代码块样式
**关键修复**: 代码块必须正确处理，避免白字白底无法阅读
```javascript
// 代码块正则（支持带或不带换行符的格式）
.replace(/```(\w*)\n?([\s\S]*?)```/g, (match, lang, code) => {
// 判断是否为ASCII图表（包含框线字符）
const isAsciiArt = /┌|│|└|├|─|┐|┘|┤/.test(code);
// 如果是ASCII图表，使用深色背景+浅色文字；否则使用灰色背景
const bgClass = isAsciiArt ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-800';
return `<pre class="${bgClass} p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm whitespace-pre"><code>${code}</code></pre>`;
})
```
**问题原因**: Markdown 代码块可能使用 ``` 后面直接跟内容（无换行符），正则必须兼容这种格式。同时需要为 ASCII 图表使用深色背景以提升可读性。
### 使用方法
@@ -245,6 +494,14 @@ prompt: 对比参考设计与实际实现，指出差异和问题
- [ ] 内容区域布局正确
- [ ] 数据卡片显示正常
#### 3. 平铺布局验证（⭐ 重点）
- [ ] 所有页面同时可见（2列3行网格）
- [ ] iframe 高度足够显示完整内容（750px）
- [ ] 每个页面独立加载，无相互影响
- [ ] 页面标签清晰可见
- [ ] 网格间距合理，视觉舒适
- [ ] 成功实现"一键总览"目标
#### 3. 样式验证（通过图片 MCP）
- [ ] 配色方案符合规范
- [ ] 字体大小合适
@@ -265,21 +522,40 @@ prompt: 对比参考设计与实际实现，指出差异和问题
## 测试概览
- 测试时间: 2026-xx-xx
- 测试页面: X 个
- 测试页面: 6 个
- 截图数量: X 张
- 验证方式: Playwright MCP + Image MCP
## 链接验证结果
| 页面 | 链接状态 | 跳转正确 | 备注 |
|------|---------|---------|------|
| index.html | ✅ | ✅ | 正常 |
| admin-index.html | ✅ | ✅ | 正常 |
| admin-index.html | ✅ | ✅ | 平铺入口 |
| docs-index.html | ✅ | ✅ | 文档系统 |
## 样式分析结果
### 美观度评分: X/10
- 配色: X/10
- 布局: X/10
- 字体: X/10
- 整体: X/10
## 平铺布局验证结果 ⭐
| 验证项 | 结果 | 说明 |
|--------|------|------|
| 所有页面同时可见 | ✅ | 2列3行网格，6个页面全部显示 |
| iframe 高度足够 | ✅ | 1000px 高度可显示完整页面内容 |
| 页面独立加载 | ✅ | 每个页面独立 HTML 文件 |
| 页面标签清晰 | ✅ | 蓝色标签显示页面名称 |
| 网格间距合理 | ✅ | 16px gap，视觉舒适 |
| 一键总览目标 | ✅ | 成功实现，无需切换页面 |
## 样式分析结果（Image MCP）
### 美观度评分: 9/10
- 配色: 9/10 - 蓝色系主色调，状态色区分清晰
- 布局: 9/10 - 2列3行网格，模块分布均匀
- 字体: 9/10 - sans-serif 统一风格
- 整体: 9/10 - 专业数据仪表盘风格
### Image MCP 分析结论
- ✅ 所有6个页面同时可见并平铺展示
- ✅ 750px 高度足够显示完整页面内容
- ✅ 2列3行网格布局合理
- ✅ 美观度与专业性强
- ✅ 成功实现"一键总览"目标
### 问题列表
1. [问题描述]
@@ -299,7 +575,8 @@ prompt: 对比参考设计与实际实现，指出差异和问题
## 设计规范参考
详细设计规范参见 [design-patterns.md](references/design-patterns.md)：
- 桌面端布局规范（侧边栏 260px）
- 桌面端平铺网格布局规范（2列/3列网格）
- iframe 容器样式标准
- 颜色主题系统
- 组件样式标准
@@ -307,7 +584,10 @@ prompt: 对比参考设计与实际实现，指出差异和问题
| 模式 | 入口页面 | 布局特点 | 适用场景 |
|------|---------|---------|---------|
| 桌面端 | admin-index.html | 260px 侧边栏<br>主内容区卡片网格 | 管理后台、数据看板 |
| **平铺展示** ⭐ | admin-index.html | CSS Grid 网格平铺<br>所有页面同时显示 | 原型展示、评审、演示 |
| 大屏平铺 | admin-index.html | 3列网格布局<br>所有页面同时显示 | 大屏幕、页面较多时 |
| 标准平铺 | admin-index.html | 2列网格布局<br>所有页面同时显示 | 默认桌面端展示 |
| 移动端 | admin-index.html | 1列网格布局<br>所有页面垂直排列 | 小屏幕、移动设备 |
## 工作示例

442
prototype/admin-index.html
View File

@@ -3,317 +3,159 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理后台 - 资产租赁管理系统</title>
<title>资产租赁管理系统 - 原型平铺展示</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 平铺网格布局 */
.prototype-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 16px;
}
.prototype-iframe {
width: 100%;
height: 1000px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.prototype-label {
position: absolute;
top: 20px;
left: 20px;
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
z-index: 10;
}
.iframe-container {
position: relative;
}
/* 大屏：3列平铺 */
@media (min-width: 1600px) {
.prototype-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* 小屏：1列平铺 */
@media (max-width: 768px) {
.prototype-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body class="bg-gray-100">
<div class="flex min-h-screen">
<!-- 侧边栏 -->
<div class="w-72 bg-slate-800 text-white flex flex-col">
<!-- Logo -->
<div class="p-6 border-b border-slate-700">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
<i class="fas fa-building text-white"></i>
</div>
<div>
<h1 class="font-bold">资产租赁管理</h1>
<p class="text-slate-400 text-xs">管理后台</p>
</div>
</div>
<!-- 顶部标题栏 -->
<header class="bg-gradient-to-r from-blue-600 to-blue-700 text-white py-4 px-6">
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold">资产租赁管理系统 - 原型平铺展示</h1>
<p class="text-blue-100 text-sm mt-1">所有页面同时显示，一目了然 | 共 8 个页面</p>
</div>
<!-- 导航菜单 -->
<nav class="flex-1 p-4 overflow-y-auto">
<!-- 数据看板 -->
<div class="mb-6">
<p class="text-slate-400 text-xs uppercase tracking-wider mb-2 px-4">数据看板</p>
<a href="#dashboard" onclick="showPage('dashboard')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
<i class="fas fa-chart-line w-5 text-blue-400"></i>
<span>数据概览</span>
</a>
</div>
<!-- 基础信息 -->
<div class="mb-6">
<p class="text-slate-400 text-xs uppercase tracking-wider mb-2 px-4">基础信息</p>
<a href="#project-info" onclick="showPage('project-info')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
<i class="fas fa-city w-5 text-green-400"></i>
<span>项目信息</span>
</a>
<a href="#asset-info" onclick="showPage('asset-info')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
<i class="fas fa-archive w-5 text-green-400"></i>
<span>资产台账</span>
</a>
<a href="#tenant-info" onclick="showPage('tenant-info')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
<i class="fas fa-users w-5 text-green-400"></i>
<span>承租人管理</span>
</a>
</div>
<!-- 合同管理 -->
<div class="mb-6">
<p class="text-slate-400 text-xs uppercase tracking-wider mb-2 px-4">合同管理</p>
<a href="#contract-list" onclick="showPage('contract-list')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
<i class="fas fa-file-contract w-5 text-blue-400"></i>
<span>合同列表</span>
</a>
<a href="#contract-add" onclick="showPage('contract-add')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
<i class="fas fa-plus-circle w-5 text-blue-400"></i>
<span>合同新增</span>
</a>
</div>
<!-- 应收管理 -->
<div class="mb-6">
<p class="text-slate-400 text-xs uppercase tracking-wider mb-2 px-4">应收管理</p>
<a href="#receivable-list" onclick="showPage('receivable-list')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
<i class="fas fa-money-bill-wave w-5 text-amber-400"></i>
<span>合同应收</span>
</a>
<a href="#invoice-register" onclick="showPage('invoice-register')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
<i class="fas fa-receipt w-5 text-amber-400"></i>
<span>开票登记</span>
</a>
</div>
<!-- 收款核销 -->
<div class="mb-6">
<p class="text-slate-400 text-xs uppercase tracking-wider mb-2 px-4">收款核销</p>
<a href="#payment-list" onclick="showPage('payment-list')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
<i class="fas fa-hand-holding-usd w-5 text-purple-400"></i>
<span>收款明细</span>
</a>
</div>
<!-- 统计报表 -->
<div class="mb-6">
<p class="text-slate-400 text-xs uppercase tracking-wider mb-2 px-4">统计报表</p>
<a href="#report-budget" onclick="showPage('report-budget')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
<i class="fas fa-table w-5 text-cyan-400"></i>
<span>预算总结表</span>
</a>
<a href="#report-contract" onclick="showPage('report-contract')" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700 text-white">
<i class="fas fa-file-alt w-5 text-cyan-400"></i>
<span>合同应收表</span>
</a>
</div>
</nav>
<!-- 用户信息 -->
<div class="p-4 border-t border-slate-700">
<div class="flex items-center gap-3 px-4 py-3">
<div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
<i class="fas fa-user"></i>
</div>
<div>
<p class="font-medium">管理员</p>
<p class="text-slate-400 text-sm">在线</p>
</div>
</div>
<div class="flex items-center gap-4">
<span class="bg-blue-500/30 px-3 py-1 rounded-full text-sm">
<i class="fas fa-th mr-1"></i>2列网格
</span>
<span class="bg-green-500/30 px-3 py-1 rounded-full text-sm">
<i class="fas fa-check-circle mr-1"></i>全部加载
</span>
</div>
</div>
</header>
<!-- 主内容区 -->
<div class="flex-1 overflow-auto">
<!-- 顶部栏 -->
<div class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<a href="index.html" class="text-slate-600 hover:text-slate-800">
<i class="fas fa-arrow-left"></i>
</a>
<h1 class="text-xl font-bold text-slate-800" id="pageTitle">数据概览</h1>
</div>
<div class="flex items-center gap-4">
<button class="p-2 text-slate-500 hover:text-slate-700">
<i class="fas fa-bell"></i>
</button>
<button class="p-2 text-slate-500 hover:text-slate-700">
<i class="fas fa-cog"></i>
</button>
</div>
</div>
</div>
<!-- 页面内容容器 -->
<div id="pageContent" class="p-6">
<!-- 默认显示数据看板 -->
<div id="dashboard-content">
<!-- 统计卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-blue-500">
<div class="flex items-center justify-between">
<div>
<p class="text-slate-500 text-sm">项目总数</p>
<p class="text-3xl font-bold text-slate-800 mt-2">11</p>
<p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up"></i> 较上月 +2</p>
</div>
<div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-city text-blue-500 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-green-500">
<div class="flex items-center justify-between">
<div>
<p class="text-slate-500 text-sm">资产总数</p>
<p class="text-3xl font-bold text-slate-800 mt-2">61</p>
<p class="text-slate-400 text-sm mt-2">未出租 60 | 已签约 1</p>
</div>
<div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center">
<i class="fas fa-archive text-green-500 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-amber-500">
<div class="flex items-center justify-between">
<div>
<p class="text-slate-500 text-sm">有效合同</p>
<p class="text-3xl font-bold text-slate-800 mt-2">12</p>
<p class="text-amber-500 text-sm mt-2">本月到期 2</p>
</div>
<div class="w-14 h-14 bg-amber-100 rounded-full flex items-center justify-center">
<i class="fas fa-file-contract text-amber-500 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-red-500">
<div class="flex items-center justify-between">
<div>
<p class="text-slate-500 text-sm">逾期应收</p>
<p class="text-3xl font-bold text-red-500 mt-2">3</p>
<p class="text-red-400 text-sm mt-2">待处理金额 ¥45,000</p>
</div>
<div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center">
<i class="fas fa-exclamation-triangle text-red-500 text-xl"></i>
</div>
</div>
</div>
</div>
<!-- 图表区域 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-xl shadow-sm p-6">
<h3 class="font-bold text-slate-800 mb-4">应收趋势</h3>
<div class="h-64 flex items-end justify-between gap-2">
<div class="flex-1 bg-blue-500 rounded-t" style="height: 60%"></div>
<div class="flex-1 bg-blue-500 rounded-t" style="height: 75%"></div>
<div class="flex-1 bg-blue-500 rounded-t" style="height: 45%"></div>
<div class="flex-1 bg-blue-500 rounded-t" style="height: 90%"></div>
<div class="flex-1 bg-blue-500 rounded-t" style="height: 70%"></div>
<div class="flex-1 bg-blue-400 rounded-t" style="height: 55%"></div>
</div>
<div class="flex justify-between mt-2 text-xs text-slate-500">
<span>1月</span><span>2月</span><span>3月</span><span>4月</span><span>5月</span><span>6月</span>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6">
<h3 class="font-bold text-slate-800 mb-4">资产状态分布</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between text-sm mb-1">
<span class="text-slate-600">未出租</span>
<span class="font-bold">60 (98.4%)</span>
</div>
<div class="h-3 bg-gray-200 rounded-full">
<div class="h-3 bg-slate-400 rounded-full" style="width: 98.4%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span class="text-slate-600">已签约</span>
<span class="font-bold">1 (1.6%)</span>
</div>
<div class="h-3 bg-gray-200 rounded-full">
<div class="h-3 bg-green-500 rounded-full" style="width: 1.6%"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 待办事项 -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h3 class="font-bold text-slate-800 mb-4">待办事项</h3>
<div class="space-y-3">
<div class="flex items-center gap-4 p-3 bg-red-50 rounded-lg">
<div class="w-2 h-2 bg-red-500 rounded-full"></div>
<div class="flex-1">
<p class="font-medium">3笔应收已逾期</p>
<p class="text-sm text-slate-500">总金额 ¥45,000</p>
</div>
<button onclick="showPage('receivable-list')" class="text-blue-500 text-sm">处理 →</button>
</div>
<div class="flex items-center gap-4 p-3 bg-amber-50 rounded-lg">
<div class="w-2 h-2 bg-amber-500 rounded-full"></div>
<div class="flex-1">
<p class="font-medium">2份合同即将到期</p>
<p class="text-sm text-slate-500">预计 7 天内到期</p>
</div>
<button onclick="showPage('contract-list')" class="text-blue-500 text-sm">查看 →</button>
</div>
<div class="flex items-center gap-4 p-3 bg-blue-50 rounded-lg">
<div class="w-2 h-2 bg-blue-500 rounded-full"></div>
<div class="flex-1">
<p class="font-medium">5份合同待续签</p>
<p class="text-sm text-slate-500">需要跟进续签事宜</p>
</div>
<button onclick="showPage('contract-list')" class="text-blue-500 text-sm">查看 →</button>
</div>
</div>
</div>
</div>
</div>
<!-- 页面导航 -->
<div class="bg-white border-b px-6 py-3">
<div class="flex flex-wrap gap-2">
<a href="#dashboard" class="px-3 py-1 bg-blue-100 text-blue-700 rounded-lg text-sm hover:bg-blue-200">数据概览</a>
<a href="#project" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">项目信息</a>
<a href="#asset" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">资产台账</a>
<a href="#tenant" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">承租人管理</a>
<a href="#contract" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">合同管理</a>
<a href="#receivable" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">合同应收</a>
<a href="#verification" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">应收核销</a>
<a href="#statistics" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">统计报表</a>
</div>
</div>
<script>
// 页面标题映射
const pageTitles = {
'dashboard': '数据概览',
'project-info': '项目信息维护',
'asset-info': '资产台账管理',
'tenant-info': '承租人信息管理',
'contract-list': '合同列表',
'contract-add': '新增合同',
'receivable-list': '合同应收',
'invoice-register': '开票登记',
'payment-list': '收款明细',
'report-budget': '预算总结表',
'report-contract': '合同应收表'
};
<!-- 平铺网格容器 -->
<div class="prototype-grid">
<!-- 1. 数据概览 -->
<div class="iframe-container" id="dashboard">
<div class="prototype-label">
<i class="fas fa-chart-line mr-1"></i>数据概览
</div>
<iframe src="pages/admin/dashboard.html" class="prototype-iframe" title="数据概览"></iframe>
</div>
// 显示指定页面
function showPage(pageName) {
const pagePath = `pages/admin/${pageName}.html`;
// 更新标题
document.getElementById('pageTitle').textContent = pageTitles[pageName] || pageName;
// 加载页面内容
fetch(pagePath)
.then(response => response.text())
.then(html => {
// 提取 body 内容
const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/);
if (bodyMatch) {
document.getElementById('pageContent').innerHTML = bodyMatch[1];
} else {
document.getElementById('pageContent').innerHTML = '<p class="text-slate-500">页面加载失败</p>';
}
})
.catch(error => {
document.getElementById('pageContent').innerHTML = `
<div class="text-center py-16">
<i class="fas fa-exclamation-triangle text-4xl text-red-400 mb-4"></i>
<p class="text-slate-600">页面加载失败: ${pageName}</p>
<p class="text-slate-500 text-sm">${error.message}</p>
</div>
`;
});
}
</script>
<!-- 2. 项目信息管理 -->
<div class="iframe-container" id="project">
<div class="prototype-label">
<i class="fas fa-project-diagram mr-1"></i>项目信息管理
</div>
<iframe src="pages/admin/project-info.html" class="prototype-iframe" title="项目信息管理"></iframe>
</div>
<!-- 3. 资产台账管理 -->
<div class="iframe-container" id="asset">
<div class="prototype-label">
<i class="fas fa-door-open mr-1"></i>资产台账管理
</div>
<iframe src="pages/admin/asset-info.html" class="prototype-iframe" title="资产台账管理"></iframe>
</div>
<!-- 4. 承租人管理 -->
<div class="iframe-container" id="tenant">
<div class="prototype-label">
<i class="fas fa-users mr-1"></i>承租人管理
</div>
<iframe src="pages/admin/tenant-info.html" class="prototype-iframe" title="承租人管理"></iframe>
</div>
<!-- 5. 合同管理 -->
<div class="iframe-container" id="contract">
<div class="prototype-label">
<i class="fas fa-file-contract mr-1"></i>合同管理
</div>
<iframe src="pages/admin/contract-mgmt.html" class="prototype-iframe" title="合同管理"></iframe>
</div>
<!-- 6. 合同应收 -->
<div class="iframe-container" id="receivable">
<div class="prototype-label">
<i class="fas fa-file-invoice-dollar mr-1"></i>合同应收
</div>
<iframe src="pages/admin/receivable.html" class="prototype-iframe" title="合同应收"></iframe>
</div>
<!-- 7. 应收核销 -->
<div class="iframe-container" id="verification">
<div class="prototype-label">
<i class="fas fa-check-double mr-1"></i>应收核销
</div>
<iframe src="pages/admin/verification.html" class="prototype-iframe" title="应收核销"></iframe>
</div>
<!-- 8. 统计报表 -->
<div class="iframe-container" id="statistics">
<div class="prototype-label">
<i class="fas fa-chart-bar mr-1"></i>统计报表
</div>
<iframe src="pages/admin/statistics.html" class="prototype-iframe" title="统计报表"></iframe>
</div>
</div>
<!-- 页脚 -->
<footer class="bg-gray-800 text-gray-400 py-4 px-6 text-center text-sm">
<p>资产租赁管理系统原型 | AI 生成 | 共 8 个功能页面</p>
<p class="mt-1">基于《资产管理需求说明.pptx》生成</p>
</footer>
</body>
</html>

208
prototype/docs-index.html
View File

@@ -2,50 +2,188 @@
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文档中心</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档中心 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
.markdown-body h1 { font-size: 2em; font-weight: bold; margin: 0.5em 0; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.3em; }
.markdown-body h2 { font-size: 1.5em; font-weight: bold; margin: 0.5em 0; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.3em; }
.markdown-body h3 { font-size: 1.25em; font-weight: bold; margin: 0.5em 0; }
.markdown-body h4 { font-size: 1em; font-weight: bold; margin: 0.5em 0; }
.markdown-body p { margin: 1em 0; line-height: 1.7; }
.markdown-body ul, .markdown-body ol { margin: 1em 0; padding-left: 2em; }
.markdown-body li { margin: 0.5em 0; }
.markdown-body code { background: #f3f4f6; padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.9em; }
.markdown-body pre { background: #1f2937; color: #f9fafb; padding: 1em; border-radius: 8px; overflow-x: auto; margin: 1em 0; }
.markdown-body pre code { background: transparent; padding: 0; }
.markdown-body blockquote { border-left: 4px solid #3b82f6; padding-left: 1em; margin: 1em 0; color: #6b7280; }
.markdown-body table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.markdown-body th, .markdown-body td { border: 1px solid #e5e7eb; padding: 0.5em 1em; }
.markdown-body th { background: #f9fafb; font-weight: 600; }
.markdown-body a { color: #3b82f6; text-decoration: underline; }
.markdown-body hr { border: none; border-top: 2px solid #e5e7eb; margin: 2em 0; }
.markdown-body img { max-width: 100%; height: auto; }
</style>
</head>
<body class="bg-gray-50">
<nav class="bg-white border-b sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between">
<a href="index.html" class="text-slate-600"><i class="fas fa-arrow-left"></i> 返回</a>
<h1 class="text-xl font-bold">文档中心</h1>
<body class="bg-gray-100">
<!-- 顶部导航 -->
<nav class="bg-gradient-to-r from-green-600 to-green-700 text-white py-4 px-6">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center gap-4">
<a href="index.html" class="hover:text-green-200"><i class="fas fa-arrow-left mr-2"></i>返回入口</a>
<span class="text-xl font-bold">文档中心</span>
</div>
<div class="flex items-center gap-4">
<input type="text" id="searchInput" placeholder="搜索文档..." class="px-4 py-2 rounded-lg text-gray-800 w-64">
<button id="viewToggle" class="px-4 py-2 bg-green-500 rounded-lg hover:bg-green-400">
<i class="fas fa-list mr-1"></i>列表视图
</button>
</div>
</div>
</nav>
<div class="flex">
<aside class="w-72 bg-white border-r min-h-screen p-6">
<h2 class="font-bold mb-4">文档列表</h2>
<div id="docList"></div>
</aside>
<main class="flex-1 p-8">
<div id="docContent" class="prose max-w-4xl"></div>
</main>
<div class="container mx-auto px-6 py-8">
<div class="flex gap-6">
<!-- 左侧文档列表 -->
<div class="w-80 flex-shrink-0">
<div class="bg-white rounded-xl shadow-sm p-4 sticky top-4">
<h3 class="font-semibold text-gray-800 mb-4"><i class="fas fa-file-alt mr-2"></i>文档列表</h3>
<div id="docsList" class="space-y-2">
<p class="text-gray-500 text-sm">加载中...</p>
</div>
</div>
</div>
<!-- 右侧文档内容 -->
<div class="flex-1">
<div id="docContent" class="bg-white rounded-xl shadow-sm p-8">
<div class="text-center text-gray-500 py-12">
<i class="fas fa-file-alt text-6xl text-gray-300 mb-4"></i>
<p>请从左侧选择文档查看</p>
</div>
</div>
</div>
</div>
</div>
<script>
async function init() {
const listRes = await fetch('/api/docs');
const docs = await listRes.json();
document.getElementById('docList').innerHTML = docs.map(doc => `
<button onclick="loadDoc('${doc.path}')" class="w-full text-left p-3 rounded hover:bg-blue-50 mb-2">
<i class="fas fa-file-alt text-blue-500 mr-2"></i>${doc.name}
</button>
`).join('');
if (docs.length > 0) loadDoc(docs[0].path);
}
async function loadDoc(path) {
const res = await fetch('/api/doc/' + path.replace('../docs/', ''));
const data = await res.json();
if (data.success) {
document.getElementById('docContent').innerHTML = marked.parse(data.content);
let currentView = 'card';
let docs = [];
// 加载文档列表
async function loadDocsList() {
try {
const response = await fetch('/api/docs');
docs = await response.json();
renderDocsList(docs);
} catch (error) {
document.getElementById('docsList').innerHTML = '<p class="text-red-500 text-sm">加载失败</p>';
}
}
init();
// 渲染文档列表
function renderDocsList(docsList) {
const container = document.getElementById('docsList');
if (docsList.length === 0) {
container.innerHTML = '<p class="text-gray-500 text-sm">暂无文档</p>';
return;
}
container.innerHTML = docsList.map(doc => `
<button onclick="loadDoc('${doc.path}')" class="w-full text-left px-4 py-3 rounded-lg hover:bg-green-50 transition doc-item" data-name="${doc.name}">
<div class="flex items-center gap-3">
<i class="fas fa-file-alt text-green-600"></i>
<div>
<p class="font-medium text-gray-800">${doc.name}</p>
<p class="text-xs text-gray-500">.md</p>
</div>
</div>
</button>
`).join('');
}
// 加载文档内容
async function loadDoc(docPath) {
// 高亮当前文档
document.querySelectorAll('.doc-item').forEach(item => {
item.classList.remove('bg-green-100', 'border-l-4', 'border-green-500');
if (item.dataset.name === docPath) {
item.classList.add('bg-green-100', 'border-l-4', 'border-green-500');
}
});
try {
const response = await fetch(`/api/doc/${encodeURIComponent(docPath)}`);
const result = await response.json();
if (result.success) {
renderMarkdown(result.content, result.name);
} else {
document.getElementById('docContent').innerHTML = '<p class="text-red-500">加载失败</p>';
}
} catch (error) {
document.getElementById('docContent').innerHTML = '<p class="text-red-500">加载失败</p>';
}
}
// 渲染 Markdown
function renderMarkdown(content, title) {
let html = content
// 标题
.replace(/^# (.+)$/gm, '<h1>$1</h1>')
.replace(/^## (.+)$/gm, '<h2>$1</h2>')
.replace(/^### (.+)$/gm, '<h3>$1</h3>')
.replace(/^#### (.+)$/gm, '<h4>$1</h4>')
// 粗体和斜体
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
.replace(/\*(.+?)\*/g, '<em>$1</em>')
// 代码块
.replace(/```(\w*)\n([\s\S]*?)```/g, (match, lang, code) => {
const isAsciiArt = /┌|│|└|├|─|┐|┘|┤/.test(code);
const bgClass = isAsciiArt ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900';
return `<pre class="${bgClass} p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm whitespace-pre"><code>${escapeHtml(code.trim())}</code></pre>`;
})
// 内联代码
.replace(/`([^`]+)`/g, '<code class="bg-gray-200 text-gray-800 px-1 rounded">$1</code>')
// 链接
.replace(/\[([^\]]+)\]\(([^\)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
// 引用
.replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>')
// 水平线
.replace(/^---$/gm, '<hr>')
// 换行
.replace(/\n/g, '<br>');
document.getElementById('docContent').innerHTML = `
<div class="mb-6">
<h1 class="text-3xl font-bold text-gray-800">${title}</h1>
</div>
<div class="markdown-body text-gray-700">${html}</div>
`;
}
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// 搜索功能
document.getElementById('searchInput').addEventListener('input', function(e) {
const query = e.target.value.toLowerCase();
const filtered = docs.filter(doc => doc.name.toLowerCase().includes(query));
renderDocsList(filtered);
});
// 视图切换
document.getElementById('viewToggle').addEventListener('click', function() {
currentView = currentView === 'card' ? 'list' : 'card';
this.innerHTML = currentView === 'card' ? '<i class="fas fa-list mr-1"></i>列表视图' : '<i class="fas fa-th-large mr-1"></i>卡片视图';
});
// 初始化
loadDocsList();
</script>
</body>
</html>

228
prototype/index.html
View File

@@ -3,171 +3,153 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>资产租赁管理系统</title>
<title>资产租赁管理系统 - 项目入口</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
.gradient-bg {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.feature-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
.gradient-bg {
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%);
}
</style>
</head>
<body class="gradient-bg min-h-screen">
<!-- 顶部导航栏 -->
<nav class="bg-white/10 backdrop-blur-md border-b border-white/10">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
<i class="fas fa-building text-blue-600 text-lg"></i>
</div>
<div>
<h1 class="text-white font-bold text-lg">资产租赁管理系统</h1>
<p class="text-blue-200 text-xs">Asset Lease Management System</p>
</div>
</div>
<div class="flex items-center gap-4">
<a href="docs-index.html" class="text-white/80 hover:text-white transition">
<i class="fas fa-book mr-2"></i>文档
</a>
<div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
<i class="fas fa-user text-white text-sm"></i>
</div>
</div>
</div>
</nav>
<!-- 主内容区 -->
<div class="max-w-7xl mx-auto px-6 py-16">
<!-- 标题区 -->
<div class="text-center mb-16">
<h1 class="text-5xl font-bold text-white mb-4">
欢迎使用资产租赁管理系统
</h1>
<p class="text-xl text-blue-200 mb-8">
一站式资产租赁管理解决方案
</p>
<div class="flex justify-center gap-4">
<div class="bg-white/10 backdrop-blur rounded-lg px-6 py-3">
<p class="text-blue-200 text-sm">项目总数</p>
<p class="text-white text-2xl font-bold">11</p>
</div>
<div class="bg-white/10 backdrop-blur rounded-lg px-6 py-3">
<p class="text-blue-200 text-sm">资产总数</p>
<p class="text-white text-2xl font-bold">61</p>
</div>
<div class="bg-white/10 backdrop-blur rounded-lg px-6 py-3">
<p class="text-blue-200 text-sm">有效合同</p>
<p class="text-white text-2xl font-bold">12</p>
<div class="container mx-auto px-6 py-12">
<!-- 项目标题 -->
<div class="text-center mb-12">
<div class="flex items-center justify-center gap-4 mb-4">
<div class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center">
<i class="fas fa-building text-white text-3xl"></i>
</div>
<h1 class="text-4xl font-bold text-white">资产租赁管理系统</h1>
</div>
<p class="text-blue-100 text-lg">Asset Lease Management System</p>
<p class="text-blue-200 text-sm mt-2">基于《资产管理需求说明.pptx》生成 | AI 驱动原型</p>
</div>
<!-- 双卡片入口 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<!-- 原型系统入口 -->
<a href="admin-index.html" class="card-hover bg-white rounded-2xl p-8 block">
<div class="flex items-start gap-6">
<div class="feature-icon bg-blue-100">
<i class="fas fa-desktop text-blue-600 text-2xl"></i>
<div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<!-- 原型系统卡片 -->
<a href="admin-index.html" class="card-hover bg-white rounded-2xl shadow-xl overflow-hidden">
<div class="h-32 bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center">
<i class="fas fa-th-large text-white text-5xl"></i>
</div>
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-2">原型系统</h2>
<p class="text-gray-600 mb-4">8个功能页面平铺展示，一目了然</p>
<div class="flex flex-wrap gap-2">
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">数据概览</span>
<span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">基础信息</span>
<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded text-xs">合同管理</span>
<span class="px-2 py-1 bg-orange-100 text-orange-700 rounded text-xs">应收核销</span>
<span class="px-2 py-1 bg-cyan-100 text-cyan-700 rounded text-xs">统计报表</span>
</div>
<div class="flex-1">
<h2 class="text-2xl font-bold text-slate-800 mb-2">原型系统</h2>
<p class="text-slate-500 mb-4">
完整的桌面端管理后台原型，包含基础信息、合同管理、应收核销、统计报表等核心功能模块
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">基础信息</span>
<span class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">合同管理</span>
<span class="px-3 py-1 bg-amber-100 text-amber-600 rounded-full text-sm">应收管理</span>
<span class="px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm">统计报表</span>
</div>
<div class="flex items-center text-blue-500">
<span>进入系统</span>
<i class="fas fa-arrow-right ml-2"></i>
</div>
<div class="mt-4 flex items-center text-blue-600 font-medium">
<span>进入原型系统</span>
<i class="fas fa-arrow-right ml-2"></i>
</div>
</div>
</a>
<!-- 文档系统入口 -->
<a href="docs-index.html" class="card-hover bg-white rounded-2xl p-8 block">
<div class="flex items-start gap-6">
<div class="feature-icon bg-emerald-100">
<i class="fas fa-book text-emerald-600 text-2xl"></i>
<!-- 文档系统卡片 -->
<a href="docs-index.html" class="card-hover bg-white rounded-2xl shadow-xl overflow-hidden">
<div class="h-32 bg-gradient-to-r from-green-500 to-green-600 flex items-center justify-center">
<i class="fas fa-file-alt text-white text-5xl"></i>
</div>
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-2">文档系统</h2>
<p class="text-gray-600 mb-4">需求说明文档在线查看</p>
<div class="flex flex-wrap gap-2">
<span class="px-2 py-1 bg-gray-100 text-gray-700 rounded text-xs">业务流程</span>
<span class="px-2 py-1 bg-gray-100 text-gray-700 rounded text-xs">功能模块</span>
<span class="px-2 py-1 bg-gray-100 text-gray-700 rounded text-xs">数据字段</span>
<span class="px-2 py-1 bg-gray-100 text-gray-700 rounded text-xs">状态说明</span>
</div>
<div class="flex-1">
<h2 class="text-2xl font-bold text-slate-800 mb-2">文档系统</h2>
<p class="text-slate-500 mb-4">
完整的需求说明文档，包含业务流程总览、功能模块定义、数据字段规范、界面设计说明
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-sm">业务流程</span>
<span class="px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-sm">功能模块</span>
<span class="px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-sm">数据规范</span>
</div>
<div class="flex items-center text-emerald-500">
<span>查看文档</span>
<i class="fas fa-arrow-right ml-2"></i>
</div>
<div class="mt-4 flex items-center text-green-600 font-medium">
<span>查看文档</span>
<i class="fas fa-arrow-right ml-2"></i>
</div>
</div>
</a>
</div>
<!-- 快速链接 -->
<div class="mt-16">
<h3 class="text-white text-center text-lg font-medium mb-6">快速链接</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto">
<div class="mt-12 max-w-5xl mx-auto">
<h3 class="text-white text-lg font-semibold mb-4 text-center">快速链接</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<a href="admin-index.html#dashboard" class="bg-white/10 backdrop-blur rounded-xl p-4 text-center hover:bg-white/20 transition">
<i class="fas fa-chart-line text-white text-xl mb-2"></i>
<p class="text-white text-sm">数据看板</p>
<i class="fas fa-chart-line text-white text-2xl mb-2"></i>
<p class="text-white text-sm">数据概览</p>
</a>
<a href="admin-index.html#project-info" class="bg-white/10 backdrop-blur rounded-xl p-4 text-center hover:bg-white/20 transition">
<i class="fas fa-city text-white text-xl mb-2"></i>
<a href="admin-index.html#project" class="bg-white/10 backdrop-blur rounded-xl p-4 text-center hover:bg-white/20 transition">
<i class="fas fa-project-diagram text-white text-2xl mb-2"></i>
<p class="text-white text-sm">项目信息</p>
</a>
<a href="admin-index.html#contract-list" class="bg-white/10 backdrop-blur rounded-xl p-4 text-center hover:bg-white/20 transition">
<i class="fas fa-file-contract text-white text-xl mb-2"></i>
<a href="admin-index.html#contract" class="bg-white/10 backdrop-blur rounded-xl p-4 text-center hover:bg-white/20 transition">
<i class="fas fa-file-contract text-white text-2xl mb-2"></i>
<p class="text-white text-sm">合同管理</p>
</a>
<a href="admin-index.html#receivable-list" class="bg-white/10 backdrop-blur rounded-xl p-4 text-center hover:bg-white/20 transition">
<i class="fas fa-money-bill-wave text-white text-xl mb-2"></i>
<p class="text-white text-sm">应收管理</p>
<a href="admin-index.html#statistics" class="bg-white/10 backdrop-blur rounded-xl p-4 text-center hover:bg-white/20 transition">
<i class="fas fa-chart-bar text-white text-2xl mb-2"></i>
<p class="text-white text-sm">统计报表</p>
</a>
</div>
</div>
<!-- 项目概览 -->
<div class="mt-12 max-w-3xl mx-auto bg-white/10 backdrop-blur rounded-2xl p-6">
<h3 class="text-white text-lg font-semibold mb-4">系统概览</h3>
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 text-center">
<div>
<p class="text-3xl font-bold text-white">12</p>
<p class="text-blue-200 text-sm">项目总数</p>
</div>
<div>
<p class="text-3xl font-bold text-white">356</p>
<p class="text-blue-200 text-sm">资产总数</p>
</div>
<div>
<p class="text-3xl font-bold text-white">89</p>
<p class="text-blue-200 text-sm">在租合同</p>
</div>
<div>
<p class="text-3xl font-bold text-white">5</p>
<p class="text-blue-200 text-sm">核心模块</p>
</div>
<div>
<p class="text-3xl font-bold text-white">8</p>
<p class="text-blue-200 text-sm">功能页面</p>
</div>
</div>
</div>
<!-- 功能模块说明 -->
<div class="mt-8 max-w-4xl mx-auto grid md:grid-cols-3 gap-4">
<div class="bg-white/10 backdrop-blur rounded-xl p-4">
<h4 class="text-white font-semibold mb-2"><i class="fas fa-info-circle mr-2"></i>基础信息维护</h4>
<p class="text-blue-200 text-sm">项目信息、资产台账、承租人管理</p>
</div>
<div class="bg-white/10 backdrop-blur rounded-xl p-4">
<h4 class="text-white font-semibold mb-2"><i class="fas fa-file-contract mr-2"></i>合同管理</h4>
<p class="text-blue-200 text-sm">合同新增、变更续签、到期解约</p>
</div>
<div class="bg-white/10 backdrop-blur rounded-xl p-4">
<h4 class="text-white font-semibold mb-2"><i class="fas fa-dollar-sign mr-2"></i>应收核销</h4>
<p class="text-blue-200 text-sm">应收查询、开票登记、收款核销</p>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="border-t border-white/10 mt-16">
<div class="max-w-7xl mx-auto px-6 py-8">
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-blue-200 text-sm">
© 2026 资产租赁管理系统 | 基于《资产管理需求说明.pptx》生成
</p>
<div class="flex items-center gap-4">
<span class="text-blue-200 text-sm">服务器运行在</span>
<span class="bg-white/10 px-3 py-1 rounded text-white text-sm">localhost:7357</span>
</div>
</div>
</div>
<footer class="text-center py-6 text-blue-200 text-sm">
<p>资产租赁管理系统 | Generated with <a href="https://claude.ai/code" class="text-white underline">Claude Code</a></p>
<p class="mt-1">基于《资产管理需求说明.pptx》 | 生成日期: 2026-03-24</p>
</footer>
</body>
</html>

160
prototype/pages/admin/asset-info.html
View File

@@ -2,74 +2,138 @@
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>资产台账 - 资产租赁管理系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>资产台账管理 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">
<div class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<a href="../../admin-index.html" class="text-slate-600 hover:text-slate-800"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-xl font-bold text-slate-800">资产台账管理</h1>
</div>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
<i class="fas fa-plus mr-2"></i>新增资产
</button>
<body class="bg-gray-100">
<nav class="bg-gradient-to-r from-blue-600 to-blue-700 h-14 px-6 flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-building text-white text-xl"></i>
<span class="text-white font-semibold">资产租赁管理系统</span>
</div>
</div>
<div class="flex items-center gap-4">
<span class="text-blue-100 text-sm">资产台账管理</span>
<i class="fas fa-door-open text-white"></i>
</div>
</nav>
<div class="p-6">
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="flex gap-2 mb-4">
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg">全部 61</button>
<button class="px-4 py-2 bg-gray-100 text-slate-600 rounded-lg hover:bg-gray-200">未出租 60</button>
<button class="px-4 py-2 bg-gray-100 text-slate-600 rounded-lg hover:bg-gray-200">已签约 1</button>
</div>
<div class="flex gap-4">
<select class="border border-gray-300 rounded-lg px-4 py-2">
<option>请选择资源类型</option>
</select>
<input type="text" placeholder="请输入资源编号" class="border border-gray-300 rounded-lg px-4 py-2">
<button class="bg-blue-500 text-white px-6 py-2 rounded-lg">查询</button>
<!-- 状态筛选 -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<h3 class="text-sm font-medium text-gray-700 mb-3">状态筛选</h3>
<div class="flex flex-wrap gap-2">
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm">全部 61</button>
<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300">未出租 60</button>
<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300">洽谈中 0</button>
<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300">意向确认 0</button>
<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300">签约中 0</button>
<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300">已签约 1</button>
</div>
</div>
<!-- 查询条件 -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<div class="flex flex-wrap gap-4 items-end">
<div>
<label class="block text-sm text-gray-600 mb-1">资源类型</label>
<select class="border rounded-lg px-3 py-2 w-32">
<option>请选择资源类型</option>
<option>办公室</option>
<option>会议室</option>
<option>商铺</option>
</select>
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">资源编号</label>
<input type="text" placeholder="请输入资源编号" class="border rounded-lg px-3 py-2 w-40">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">有效状态</label>
<select class="border rounded-lg px-3 py-2 w-24">
<option>有效</option>
<option>无效</option>
</select>
</div>
<div class="flex gap-2">
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm"><i class="fas fa-search mr-1"></i>查询</button>
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm">重置</button>
</div>
<div class="flex gap-2 ml-auto">
<button class="text-blue-500 px-3 py-2 text-sm hover:bg-blue-50 rounded-lg">列表</button>
<button class="text-gray-500 px-3 py-2 text-sm hover:bg-gray-100 rounded-lg">统计</button>
<button class="bg-green-500 text-white px-4 py-2 rounded-lg text-sm"><i class="fas fa-plus mr-1"></i>新增</button>
<button class="bg-gray-200 text-gray-700 px-3 py-2 rounded-lg text-sm">拆分</button>
<button class="bg-gray-200 text-gray-700 px-3 py-2 rounded-lg text-sm">合并</button>
<button class="bg-gray-200 text-gray-700 px-3 py-2 rounded-lg text-sm">导出</button>
</div>
</div>
</div>
<!-- 资源列表 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500">资源编号</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500">项目</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500">资源名称</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500">资源类别</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500">楼层</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500">建筑面积</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500">实用面积</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500">租赁状态</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500"><input type="checkbox"></th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">资源编号</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">项目</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">资源名称</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">资源类别</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">资源类型</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">楼层</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">建筑面积</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">实用面积</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">计租面积</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">租赁状态</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 text-sm font-medium">2605</td>
<td class="px-4 py-4 text-sm">Street</td>
<td class="px-4 py-4 text-sm">2605</td>
<td class="px-4 py-4 text-sm">办公室</td>
<td class="px-4 py-4 text-sm">现代城</td>
<td class="px-4 py-4 text-sm">119.66</td>
<td class="px-4 py-4 text-sm">119.66</td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-orange-100 text-orange-600 rounded-full text-xs">未出租</span></td>
<td class="px-3 py-3"><input type="checkbox"></td>
<td class="px-3 py-3 text-sm font-medium">2605</td>
<td class="px-3 py-3 text-sm">Street</td>
<td class="px-3 py-3 text-sm">2605</td>
<td class="px-3 py-3 text-sm">办公室</td>
<td class="px-3 py-3 text-sm">办公室</td>
<td class="px-3 py-3 text-sm">现代城</td>
<td class="px-3 py-3 text-sm">119.66</td>
<td class="px-3 py-3 text-sm">119.66</td>
<td class="px-3 py-3 text-sm">-</td>
<td class="px-3 py-3"><span class="px-2 py-1 bg-orange-100 text-orange-700 rounded-full text-xs">未出租</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 text-sm font-medium">F5B004</td>
<td class="px-4 py-4 text-sm">上海城</td>
<td class="px-4 py-4 text-sm">F5B004</td>
<td class="px-4 py-4 text-sm">办公室</td>
<td class="px-4 py-4 text-sm">默认</td>
<td class="px-4 py-4 text-sm">120.00</td>
<td class="px-4 py-4 text-sm">100.00</td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-orange-100 text-orange-600 rounded-full text-xs">未出租</span></td>
<td class="px-3 py-3"><input type="checkbox"></td>
<td class="px-3 py-3 text-sm font-medium">F5B004</td>
<td class="px-3 py-3 text-sm">上海城</td>
<td class="px-3 py-3 text-sm">F5B004</td>
<td class="px-3 py-3 text-sm">办公室</td>
<td class="px-3 py-3 text-sm">办公室</td>
<td class="px-3 py-3 text-sm">默认</td>
<td class="px-3 py-3 text-sm">120.00</td>
<td class="px-3 py-3 text-sm">100.00</td>
<td class="px-3 py-3 text-sm">-</td>
<td class="px-3 py-3"><span class="px-2 py-1 bg-orange-100 text-orange-700 rounded-full text-xs">未出租</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-3 py-3"><input type="checkbox"></td>
<td class="px-3 py-3 text-sm font-medium">F5B005</td>
<td class="px-3 py-3 text-sm">上海城</td>
<td class="px-3 py-3 text-sm">F5B005</td>
<td class="px-3 py-3 text-sm">会议室</td>
<td class="px-3 py-3 text-sm">会议室</td>
<td class="px-3 py-3 text-sm">默认</td>
<td class="px-3 py-3 text-sm">120.00</td>
<td class="px-3 py-3 text-sm">100.00</td>
<td class="px-3 py-3 text-sm">-</td>
<td class="px-3 py-3"><span class="px-2 py-1 bg-orange-100 text-orange-700 rounded-full text-xs">未出租</span></td>
</tr>
</tbody>
</table>
<div class="px-4 py-3 bg-gray-50 border-t text-sm text-gray-600">
1-10 共61条 | [1] [2] [3] [4] [5] [6] [7] | 10条/页
</div>
</div>
</div>
</body>

84
prototype/pages/admin/contract-add.html
View File

@@ -1,84 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>新增合同 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all/all.min.css">
</head>
<body class="bg-gray-50">
<div class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center gap-4">
<a href="../../admin-index.html" class="text-slate-600 hover:text-slate-800"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-xl font-bold text-slate-800">新增合同</h1>
</div>
</div>
<div class="p-6 max-w-4xl mx-auto">
<div class="bg-white rounded-xl shadow-sm p-6">
<h2 class="text-lg font-bold mb-6 pb-4 border-b">基础信息</h2>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm text-slate-500 mb-2">项目 *</label>
<select class="w-full border border-gray-300 rounded-lg px-4 py-2">
<option>请选择项目</option>
</select>
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">资产编号 *</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">合同编码 *</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">线上审批编码 *</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
</div>
<h2 class="text-lg font-bold mb-6 mt-8 pb-4 border-b">核心条款</h2>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm text-slate-500 mb-2">合同名称 *</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">合同属性 *</label>
<select class="w-full border border-gray-300 rounded-lg px-4 py-2">
<option>长期</option>
<option>短期</option>
</select>
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">签订日期 *</label>
<input type="date" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">承租人 *</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">开始日期 *</label>
<input type="date" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">结束日期 *</label>
<input type="date" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">租赁面积 *</label>
<input type="number" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">签订合同金额 *</label>
<input type="number" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
</div>
<div class="flex justify-end gap-4 mt-8 pt-6 border-t">
<button class="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">取消</button>
<button class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">保存</button>
</div>
</div>
</div>
</body>
</html>

143
prototype/pages/admin/contract-list.html
View File

@@ -1,143 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>合同列表 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">
<!-- 顶部导航 -->
<div class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<a href="../../admin-index.html" class="text-slate-600 hover:text-slate-800">
<i class="fas fa-arrow-left"></i>
</a>
<h1 class="text-xl font-bold text-slate-800">合同管理</h1>
</div>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
<i class="fas fa-plus mr-2"></i>新增合同
</button>
</div>
</div>
<div class="p-6">
<!-- 查询区 -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label class="block text-sm text-slate-500 mb-2">项目</label>
<select class="w-full border border-gray-300 rounded-lg px-4 py-2">
<option>全部项目</option>
</select>
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">资源编号</label>
<input type="text" placeholder="请输入资源编号" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">承租人</label>
<input type="text" placeholder="请输入承租人名称" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">合同状态</label>
<select class="w-full border border-gray-300 rounded-lg px-4 py-2">
<option>全部状态</option>
<option>生效</option>
<option>已到期</option>
<option>草稿</option>
<option>已解约</option>
</select>
</div>
</div>
<div class="flex gap-2 mt-4">
<button class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600">
<i class="fas fa-search mr-2"></i>查询
</button>
<button class="border border-gray-300 text-slate-600 px-6 py-2 rounded-lg hover:bg-gray-50">
<i class="fas fa-redo mr-2"></i>重置
</button>
</div>
</div>
<!-- 合同列表 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">项目</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">资源编号</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">合同编号</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">承租人</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">属性</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">签订日期</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">开始日期</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">结束日期</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">状态</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">操作</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 text-sm">XX商业广场</td>
<td class="px-4 py-4 text-sm font-medium">ZC-001-01-005</td>
<td class="px-4 py-4 text-sm">HT202603001</td>
<td class="px-4 py-4 text-sm">XX科技有限公司</td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-blue-100 text-blue-600 rounded text-xs">长期</span></td>
<td class="px-4 py-4 text-sm">2026-01-01</td>
<td class="px-4 py-4 text-sm">2026-01-01</td>
<td class="px-4 py-4 text-sm">2027-01-01</td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-green-100 text-green-600 rounded-full text-xs">生效</span></td>
<td class="px-4 py-4">
<button class="text-blue-500 hover:text-blue-700 mr-2" title="编辑"><i class="fas fa-edit"></i></button>
<button class="text-amber-500 hover:text-amber-700 mr-2" title="变更"><i class="fas fa-exchange-alt"></i></button>
<button class="text-green-500 hover:text-green-700 mr-2" title="续签"><i class="fas fa-sync-alt"></i></button>
<button class="text-red-500 hover:text-red-700" title="解约"><i class="fas fa-times-circle"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 text-sm">XX产业园</td>
<td class="px-4 py-4 text-sm font-medium">ZC-002-03-012</td>
<td class="px-4 py-4 text-sm">HT202603002</td>
<td class="px-4 py-4 text-sm">XX商贸有限公司</td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-amber-100 text-amber-600 rounded text-xs">短期</span></td>
<td class="px-4 py-4 text-sm">2025-01-01</td>
<td class="px-4 py-4 text-sm">2025-01-01</td>
<td class="px-4 py-4 text-sm">2026-02-28</td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-green-100 text-green-600 rounded-full text-xs">生效</span></td>
<td class="px-4 py-4">
<button class="text-blue-500 hover:text-blue-700 mr-2" title="编辑"><i class="fas fa-edit"></i></button>
<button class="text-amber-500 hover:text-amber-700 mr-2" title="变更"><i class="fas fa-exchange-alt"></i></button>
<button class="text-green-500 hover:text-green-700 mr-2" title="续签"><i class="fas fa-sync-alt"></i></button>
<button class="text-red-500 hover:text-red-700" title="解约"><i class="fas fa-times-circle"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 text-sm">XX写字楼</td>
<td class="px-4 py-4 text-sm font-medium">ZC-003-05-003</td>
<td class="px-4 py-4 text-sm">HT202603003</td>
<td class="px-4 py-4 text-sm">XX广告有限公司</td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-blue-100 text-blue-600 rounded text-xs">长期</span></td>
<td class="px-4 py-4 text-sm">2024-03-01</td>
<td class="px-4 py-4 text-sm">2024-03-01</td>
<td class="px-4 py-4 text-sm">2026-03-01</td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-red-100 text-red-600 rounded-full text-xs">已到期</span></td>
<td class="px-4 py-4">
<button class="text-blue-500 hover:text-blue-700 mr-2" title="查看"><i class="fas fa-eye"></i></button>
</td>
</tr>
</tbody>
</table>
<div class="p-4 border-t border-gray-200 flex items-center justify-between">
<span class="text-sm text-slate-500">显示 1-3 共 12 条</span>
<div class="flex gap-1">
<button class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">1</button>
<button class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">2</button>
<button class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">3</button>
</div>
</div>
</div>
</div>
</body>
</html>

172
prototype/pages/admin/contract-mgmt.html Normal file
View File

@@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合同管理 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-100">
<nav class="bg-gradient-to-r from-blue-600 to-blue-700 h-14 px-6 flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-building text-white text-xl"></i>
<span class="text-white font-semibold">资产租赁管理系统</span>
</div>
<div class="flex items-center gap-4">
<span class="text-blue-100 text-sm">合同管理</span>
<i class="fas fa-file-contract text-white"></i>
</div>
</nav>
<div class="p-6">
<!-- 业务流程图 -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<h3 class="text-sm font-medium text-gray-700 mb-3">合同业务流程</h3>
<div class="flex items-center justify-between text-xs">
<div class="text-center">
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-1">
<i class="fas fa-building text-blue-600 text-xl"></i>
</div>
<span>选择资产</span>
</div>
<i class="fas fa-arrow-right text-gray-400"></i>
<div class="text-center">
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-1">
<i class="fas fa-edit text-blue-600 text-xl"></i>
</div>
<span>录入信息</span>
</div>
<i class="fas fa-arrow-right text-gray-400"></i>
<div class="text-center">
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-1">
<i class="fas fa-stamp text-blue-600 text-xl"></i>
</div>
<span>关联审批</span>
</div>
<i class="fas fa-arrow-right text-gray-400"></i>
<div class="text-center">
<div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-1">
<i class="fas fa-check-circle text-green-600 text-xl"></i>
</div>
<span>合同生效</span>
</div>
<i class="fas fa-arrow-right text-gray-400"></i>
<div class="text-center">
<div class="w-16 h-16 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-1">
<i class="fas fa-cogs text-orange-600 text-xl"></i>
</div>
<span>变更/解约</span>
</div>
</div>
</div>
<!-- 查询条件 -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<div class="flex flex-wrap gap-4 items-end">
<div>
<label class="block text-sm text-gray-600 mb-1">项目</label>
<select class="border rounded-lg px-3 py-2 w-32">
<option>全部项目</option>
</select>
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">资源编号</label>
<input type="text" placeholder="请输入资源编号" class="border rounded-lg px-3 py-2 w-36">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">合同编号</label>
<input type="text" placeholder="请输入合同编号" class="border rounded-lg px-3 py-2 w-36">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">承租人</label>
<input type="text" placeholder="请输入承租人名称" class="border rounded-lg px-3 py-2 w-36">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">状态</label>
<select class="border rounded-lg px-3 py-2 w-28">
<option>全部状态</option>
<option>生效</option>
<option>已到期</option>
<option>草稿</option>
<option>已解约</option>
</select>
</div>
<div class="flex gap-2">
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm"><i class="fas fa-search mr-1"></i>查询</button>
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm">重置</button>
</div>
</div>
</div>
<!-- 合同列表 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<table class="w-full text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">项目</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">资源编号</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">合同编号</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">承租人</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">负责人</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">属性</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">审批编码</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">签订日期</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">开始日期</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">结束日期</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">状态</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">操作</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-3 py-3">XX商业广场</td>
<td class="px-3 py-3 font-medium">ZC-001-01-005</td>
<td class="px-3 py-3 font-medium text-blue-600">HT202603001</td>
<td class="px-3 py-3">XX科技有限公司</td>
<td class="px-3 py-3">张三</td>
<td class="px-3 py-3">长期</td>
<td class="px-3 py-3">SP202603001</td>
<td class="px-3 py-3">2026-01-01</td>
<td class="px-3 py-3">2026-01-01</td>
<td class="px-3 py-3">2027-01-01</td>
<td class="px-3 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">生效</span></td>
<td class="px-3 py-3">
<div class="flex gap-1">
<button class="text-blue-500 hover:bg-blue-50 px-2 py-1 rounded text-xs">编辑</button>
<button class="text-orange-500 hover:bg-orange-50 px-2 py-1 rounded text-xs">变更</button>
<button class="text-green-500 hover:bg-green-50 px-2 py-1 rounded text-xs">续签</button>
<button class="text-red-500 hover:bg-red-50 px-2 py-1 rounded text-xs">解约</button>
</div>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-3 py-3">XX产业园</td>
<td class="px-3 py-3 font-medium">ZC-002-03-012</td>
<td class="px-3 py-3 font-medium text-blue-600">HT202603002</td>
<td class="px-3 py-3">XX商贸有限公司</td>
<td class="px-3 py-3">李四</td>
<td class="px-3 py-3">短期</td>
<td class="px-3 py-3">SP202603002</td>
<td class="px-3 py-3">2025-01-01</td>
<td class="px-3 py-3">2025-01-01</td>
<td class="px-3 py-3">2026-02-28</td>
<td class="px-3 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">生效</span></td>
<td class="px-3 py-3">
<div class="flex gap-1">
<button class="text-blue-500 hover:bg-blue-50 px-2 py-1 rounded text-xs">编辑</button>
<button class="text-orange-500 hover:bg-orange-50 px-2 py-1 rounded text-xs">变更</button>
<button class="text-green-500 hover:bg-green-50 px-2 py-1 rounded text-xs">续签</button>
<button class="text-red-500 hover:bg-red-50 px-2 py-1 rounded text-xs">解约</button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="px-4 py-3 bg-gray-50 border-t text-sm text-gray-600">
上一页 [1] [2] [3] 下一页 | 共12条记录
</div>
</div>
</div>
</body>
</html>

164
prototype/pages/admin/dashboard.html
View File

@@ -2,39 +2,149 @@
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>数据概览</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据概览 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 p-6">
<div class="grid grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-xl p-6 border-l-4 border-blue-500">
<p class="text-slate-500">项目总数</p>
<p class="text-3xl font-bold">11</p>
<body class="bg-gray-100">
<!-- 顶部导航栏 -->
<nav class="bg-gradient-to-r from-blue-600 to-blue-700 h-14 px-6 flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-building text-white text-xl"></i>
<span class="text-white font-semibold">资产租赁管理系统</span>
</div>
<div class="bg-white rounded-xl p-6 border-l-4 border-green-500">
<p class="text-slate-500">资产总数</p>
<p class="text-3xl font-bold">61</p>
<div class="flex items-center gap-4">
<span class="text-blue-100 text-sm">数据概览</span>
<i class="fas fa-chart-line text-white"></i>
</div>
<div class="bg-white rounded-xl p-6 border-l-4 border-amber-500">
<p class="text-slate-500">有效合同</p>
<p class="text-3xl font-bold">12</p>
</div>
<div class="bg-white rounded-xl p-6 border-l-4 border-red-500">
<p class="text-slate-500">逾期应收</p>
<p class="text-3xl font-bold text-red-500">3</p>
</div>
</div>
<div class="bg-white rounded-xl p-6">
<h3 class="font-bold mb-4">待办事项</h3>
<div class="space-y-3">
<div class="p-4 bg-red-50 rounded-lg flex justify-between">
<span>3笔应收已逾期</span>
<span class="text-red-500">¥45,000</span>
</nav>
<!-- 主内容区 -->
<div class="p-6">
<!-- 统计卡片 -->
<div class="grid grid-cols-4 gap-4 mb-6">
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">项目总数</p>
<p class="text-2xl font-bold text-gray-800">12</p>
</div>
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
<i class="fas fa-building text-blue-600 text-xl"></i>
</div>
</div>
</div>
<div class="p-4 bg-amber-50 rounded-lg flex justify-between">
<span>2份合同即将到期</span>
<span class="text-amber-500">7天内</span>
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">资产总数</p>
<p class="text-2xl font-bold text-gray-800">356</p>
</div>
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
<i class="fas fa-door-open text-green-600 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">在租合同</p>
<p class="text-2xl font-bold text-gray-800">89</p>
</div>
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
<i class="fas fa-file-contract text-purple-600 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">待收金额</p>
<p class="text-2xl font-bold text-orange-600">¥128.5万</p>
</div>
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
<i class="fas fa-yen-sign text-orange-600 text-xl"></i>
</div>
</div>
</div>
</div>
<!-- 图表区域 -->
<div class="grid grid-cols-2 gap-6 mb-6">
<div class="bg-white rounded-xl shadow-sm p-4">
<h3 class="font-semibold text-gray-800 mb-4">出租率趋势</h3>
<div class="h-48 flex items-end justify-between gap-2">
<div class="flex-1 bg-blue-500 rounded-t" style="height: 75%"></div>
<div class="flex-1 bg-blue-500 rounded-t" style="height: 78%"></div>
<div class="flex-1 bg-blue-500 rounded-t" style="height: 82%"></div>
<div class="flex-1 bg-blue-500 rounded-t" style="height: 85%"></div>
<div class="flex-1 bg-blue-500 rounded-t" style="height: 88%"></div>
<div class="flex-1 bg-blue-500 rounded-t" style="height: 90%"></div>
</div>
<div class="flex justify-between mt-2 text-xs text-gray-500">
<span>1月</span><span>2月</span><span>3月</span><span>4月</span><span>5月</span><span>6月</span>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-4">
<h3 class="font-semibold text-gray-800 mb-4">应收状态分布</h3>
<div class="space-y-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
<span class="text-sm text-gray-600">已付款</span>
</div>
<span class="text-sm font-semibold">65%</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-3 h-3 bg-orange-500 rounded-full"></div>
<span class="text-sm text-gray-600">未付款</span>
</div>
<span class="text-sm font-semibold">25%</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-3 h-3 bg-red-500 rounded-full"></div>
<span class="text-sm text-gray-600">逾期</span>
</div>
<span class="text-sm font-semibold">10%</span>
</div>
</div>
</div>
</div>
<!-- 最近活动 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<h3 class="font-semibold text-gray-800 mb-4">最近活动</h3>
<div class="space-y-3">
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
<i class="fas fa-check text-green-600 text-sm"></i>
</div>
<div class="flex-1">
<p class="text-sm text-gray-800">合同 HT202603001 已签订</p>
<p class="text-xs text-gray-500">XX科技有限公司 - 2026-03-24</p>
</div>
</div>
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-yen-sign text-blue-600 text-sm"></i>
</div>
<div class="flex-1">
<p class="text-sm text-gray-800">收款 ¥12,000.00 已核销</p>
<p class="text-xs text-gray-500">XX商业广场 - 2026-03-24</p>
</div>
</div>
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
<div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center">
<i class="fas fa-exclamation text-orange-600 text-sm"></i>
</div>
<div class="flex-1">
<p class="text-sm text-gray-800">应收逾期提醒</p>
<p class="text-xs text-gray-500">3笔应收款项已逾期 - 2026-03-24</p>
</div>
</div>
</div>
</div>
</div>

77
prototype/pages/admin/invoice-register.html
View File

@@ -1,77 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>开票登记 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">
<div class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center gap-4">
<a href="../../admin-index.html" class="text-slate-600 hover:text-slate-800"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-xl font-bold text-slate-800">开票登记</h1>
</div>
</div>
<div class="p-6">
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="flex items-center justify-between mb-4">
<h2 class="font-bold">选中的应收明细</h2>
<span class="text-sm text-slate-500">应收总金额: ¥12,000.00</span>
</div>
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium">项目</th>
<th class="px-4 py-2 text-left text-xs font-medium">合同编号</th>
<th class="px-4 py-2 text-left text-xs font-medium">费用类型</th>
<th class="px-4 py-2 text-left text-xs font-medium">应收金额</th>
<th class="px-4 py-2 text-left text-xs font-medium">可开票金额</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="px-4 py-3 text-sm">XX商业广场</td>
<td class="px-4 py-3 text-sm">HT202603001</td>
<td class="px-4 py-3 text-sm">租金</td>
<td class="px-4 py-3 text-sm">¥12,000.00</td>
<td class="px-4 py-3 text-sm text-green-600">¥12,000.00</td>
</tr>
</tbody>
</table>
</div>
<div class="bg-white rounded-xl shadow-sm p-6">
<h2 class="font-bold mb-4">开票信息</h2>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm text-slate-500 mb-2">发票类型 *</label>
<select class="w-full border border-gray-300 rounded-lg px-4 py-2">
<option>增值税专用发票</option>
<option>增值税普通发票</option>
</select>
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">开票金额 *</label>
<input type="number" value="12000" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">发票抬头 *</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">纳税人识别号 *</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div class="col-span-2">
<label class="block text-sm text-slate-500 mb-2">开票日期 *</label>
<input type="date" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
</div>
<div class="flex justify-end gap-4 mt-6">
<button class="px-6 py-2 border border-gray-300 rounded-lg">取消</button>
<button class="px-6 py-2 bg-blue-500 text-white rounded-lg">确认开票</button>
</div>
</div>
</div>
</body>
</html>

58
prototype/pages/admin/payment-list.html
View File

@@ -1,58 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>收款明细 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">
<div class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<a href="../../admin-index.html" class="text-slate-600 hover:text-slate-800"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-xl font-bold text-slate-800">收款明细查询</h1>
</div>
<button class="bg-green-500 text-white px-4 py-2 rounded-lg">
<i class="fas fa-plus mr-2"></i>新增收款
</button>
</div>
</div>
<div class="p-6">
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="grid grid-cols-4 gap-4">
<input type="text" placeholder="资产编号" class="border border-gray-300 rounded-lg px-4 py-2">
<input type="text" placeholder="合同编号" class="border border-gray-300 rounded-lg px-4 py-2">
<input type="text" placeholder="承租人" class="border border-gray-300 rounded-lg px-4 py-2">
<button class="bg-blue-500 text-white rounded-lg">查询</button>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium">项目</th>
<th class="px-4 py-3 text-left text-xs font-medium">资产编号</th>
<th class="px-4 py-3 text-left text-xs font-medium">合同编号</th>
<th class="px-4 py-3 text-left text-xs font-medium">承租人</th>
<th class="px-4 py-3 text-left text-xs font-medium">收款日期</th>
<th class="px-4 py-3 text-left text-xs font-medium">收款金额</th>
<th class="px-4 py-3 text-left text-xs font-medium">收款方式</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 text-sm">XX商业广场</td>
<td class="px-4 py-4 text-sm">ZC-001-01-005</td>
<td class="px-4 py-4 text-sm">HT202603001</td>
<td class="px-4 py-4 text-sm">XX科技有限公司</td>
<td class="px-4 py-4 text-sm">2026-03-05</td>
<td class="px-4 py-4 text-sm text-green-600">¥12,000.00</td>
<td class="px-4 py-4 text-sm">银行转账</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

145
prototype/pages/admin/project-info.html
View File

@@ -2,46 +2,119 @@
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>项目信息</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>项目信息管理 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 p-6">
<div class="bg-white rounded-xl p-6 mb-6">
<h2 class="text-xl font-bold mb-4">项目信息维护</h2>
<div class="flex gap-4 mb-4">
<input type="text" placeholder="项目编码" class="border rounded px-3 py-2">
<input type="text" placeholder="项目名称" class="border rounded px-3 py-2">
<button class="bg-blue-500 text-white px-4 py-2 rounded">查询</button>
<button class="bg-green-500 text-white px-4 py-2 rounded">+ 新增</button>
<body class="bg-gray-100">
<nav class="bg-gradient-to-r from-blue-600 to-blue-700 h-14 px-6 flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-building text-white text-xl"></i>
<span class="text-white font-semibold">资产租赁管理系统</span>
</div>
<div class="flex items-center gap-4">
<span class="text-blue-100 text-sm">项目信息管理</span>
<i class="fas fa-project-diagram text-white"></i>
</div>
</nav>
<div class="p-6">
<!-- 组织架构树 -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<h3 class="font-semibold text-gray-800 mb-3">项目组织架构</h3>
<div class="text-sm text-gray-700 space-y-1">
<p><i class="fas fa-sitemap text-blue-500 mr-2"></i>集团</p>
<p class="ml-6"><i class="fas fa-building text-blue-400 mr-2"></i>公寓管理有限公司</p>
<p class="ml-12"><i class="fas fa-map-marker-alt text-blue-300 mr-2"></i>成都分公司</p>
<p class="ml-18 text-gray-500">├─ 财务部 │ 信息部 │ 运营部 │ 招商部 │ 物业工程部</p>
</div>
</div>
<!-- 查询条件 -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<div class="flex flex-wrap gap-4 items-end">
<div>
<label class="block text-sm text-gray-600 mb-1">项目编码</label>
<input type="text" placeholder="请输入项目编码" class="border rounded-lg px-3 py-2 w-40">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">项目名称</label>
<input type="text" placeholder="请输入项目名称" class="border rounded-lg px-3 py-2 w-40">
</div>
<div class="flex gap-2">
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm"><i class="fas fa-search mr-1"></i>查询</button>
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm">重置</button>
</div>
<div class="flex gap-2 ml-auto">
<button class="bg-green-500 text-white px-4 py-2 rounded-lg text-sm"><i class="fas fa-plus mr-1"></i>新增</button>
<button class="bg-green-600 text-white px-3 py-2 rounded-lg text-sm">启用</button>
<button class="bg-red-500 text-white px-3 py-2 rounded-lg text-sm">停用</button>
</div>
</div>
</div>
<!-- 项目列表 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500">序号</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500">项目编码</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500">项目名称</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500">所属公司</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500">产品线</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500">项目类型</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500">开业日期</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500">建筑面积</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500">实用面积</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500">状态</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 text-sm">1</td>
<td class="px-4 py-3 text-sm font-medium">888</td>
<td class="px-4 py-3 text-sm">东方宝泰</td>
<td class="px-4 py-3 text-sm">广州东站</td>
<td class="px-4 py-3 text-sm">写字楼</td>
<td class="px-4 py-3 text-sm">-</td>
<td class="px-4 py-3 text-sm">2000-01-01</td>
<td class="px-4 py-3 text-sm">-</td>
<td class="px-4 py-3 text-sm">-</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">启用</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 text-sm">2</td>
<td class="px-4 py-3 text-sm font-medium">YCXHL</td>
<td class="px-4 py-3 text-sm">银川新华联</td>
<td class="px-4 py-3 text-sm">重庆地产</td>
<td class="px-4 py-3 text-sm">社区Mall</td>
<td class="px-4 py-3 text-sm">购物中心</td>
<td class="px-4 py-3 text-sm">2016-12-24</td>
<td class="px-4 py-3 text-sm">-</td>
<td class="px-4 py-3 text-sm">-</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">启用</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 text-sm">3</td>
<td class="px-4 py-3 text-sm font-medium">0101</td>
<td class="px-4 py-3 text-sm">奥特莱斯</td>
<td class="px-4 py-3 text-sm">成都商管</td>
<td class="px-4 py-3 text-sm">品质Mall</td>
<td class="px-4 py-3 text-sm">购物中心</td>
<td class="px-4 py-3 text-sm">2009-05-01</td>
<td class="px-4 py-3 text-sm">-</td>
<td class="px-4 py-3 text-sm">-</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">启用</span></td>
</tr>
</tbody>
</table>
<div class="px-4 py-3 bg-gray-50 border-t flex items-center justify-between text-sm text-gray-600">
<span>合计：建筑面积：1,056,837.80 | 实用面积：881,837.80</span>
<span>1-10 共11条 | [1] [2] | 10条/页</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left">项目编码</th>
<th class="px-4 py-3 text-left">项目名称</th>
<th class="px-4 py-3 text-left">所属公司</th>
<th class="px-4 py-3 text-left">开业日期</th>
<th class="px-4 py-3 text-left">状态</th>
<th class="px-4 py-3 text-left">操作</th>
</tr>
</thead>
<tbody class="divide-y">
<tr class="hover:bg-gray-50">
<td class="px-4 py-3">888</td>
<td class="px-4 py-3">东方宝泰</td>
<td class="px-4 py-3">广州东站</td>
<td class="px-4 py-3">2000-01-01</td>
<td class="px-4 py-3"><span class="px-2 py-1 bg-green-100 text-green-600 rounded text-xs">启用</span></td>
<td class="px-4 py-3">
<button class="text-blue-500 mr-2"><i class="fas fa-edit"></i></button>
<button class="text-red-500"><i class="fas fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

161
prototype/pages/admin/receivable-list.html
View File

@@ -1,161 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>合同应收 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">
<!-- 顶部导航 -->
<div class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<a href="../../admin-index.html" class="text-slate-600 hover:text-slate-800">
<i class="fas fa-arrow-left"></i>
</a>
<h1 class="text-xl font-bold text-slate-800">合同应收</h1>
</div>
<div class="flex gap-2">
<button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">
<i class="fas fa-hand-holding-usd mr-2"></i>收款
</button>
<button class="bg-amber-500 text-white px-4 py-2 rounded-lg hover:bg-amber-600">
<i class="fas fa-receipt mr-2"></i>开票
</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
<i class="fas fa-plus mr-2"></i>新增
</button>
</div>
</div>
</div>
<div class="p-6">
<!-- 查询区 -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="grid grid-cols-1 md:grid-cols-5 gap-4">
<div>
<label class="block text-sm text-slate-500 mb-2">项目</label>
<select class="w-full border border-gray-300 rounded-lg px-4 py-2">
<option>全部项目</option>
</select>
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">资产编号</label>
<input type="text" placeholder="请输入资产编号" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">承租人</label>
<input type="text" placeholder="请输入承租人名称" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">应收月份</label>
<input type="month" class="w-full border border-gray-300 rounded-lg px-4 py-2">
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">状态</label>
<select class="w-full border border-gray-300 rounded-lg px-4 py-2">
<option>全部状态</option>
<option>已付款</option>
<option>未付款</option>
<option>逾期</option>
<option>部分付款</option>
</select>
</div>
</div>
<div class="flex gap-2 mt-4">
<button class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600">
<i class="fas fa-search mr-2"></i>查询
</button>
<button class="border border-gray-300 text-slate-600 px-6 py-2 rounded-lg hover:bg-gray-50">
<i class="fas fa-redo mr-2"></i>重置
</button>
</div>
</div>
<!-- 应收列表 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="p-4 border-b border-gray-200 flex items-center justify-between">
<div class="flex gap-2">
<button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">收入汇总</button>
<button class="px-3 py-1 bg-gray-100 text-slate-600 rounded-full text-sm hover:bg-gray-200">费用明细</button>
</div>
<div class="flex items-center gap-2">
<input type="checkbox" class="w-4 h-4 rounded">
<span class="text-sm text-slate-500">全选</span>
</div>
</div>
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="w-10 px-4 py-3"><input type="checkbox" class="w-4 h-4 rounded"></th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">项目</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">资产编号</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">合同编号</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">承租人</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">费用类型</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">应收月份</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">应收日期</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">应收金额</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">已收金额</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">状态</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">开票</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-4 py-4"><input type="checkbox" class="w-4 h-4 rounded"></td>
<td class="px-4 py-4 text-sm">XX商业广场</td>
<td class="px-4 py-4 text-sm font-medium">ZC-001-01-005</td>
<td class="px-4 py-4 text-sm">HT202603001</td>
<td class="px-4 py-4 text-sm">XX科技有限公司</td>
<td class="px-4 py-4 text-sm">租金</td>
<td class="px-4 py-4 text-sm">2026-03</td>
<td class="px-4 py-4 text-sm">2026-03-01</td>
<td class="px-4 py-4 text-sm font-bold text-red-500">¥12,000.00</td>
<td class="px-4 py-4 text-sm font-bold text-green-500">¥12,000.00</td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-green-100 text-green-600 rounded-full text-xs">已付款</span></td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-green-100 text-green-600 rounded-full text-xs">已开票</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-4"><input type="checkbox" class="w-4 h-4 rounded"></td>
<td class="px-4 py-4 text-sm">XX商业广场</td>
<td class="px-4 py-4 text-sm font-medium">ZC-001-01-005</td>
<td class="px-4 py-4 text-sm">HT202603001</td>
<td class="px-4 py-4 text-sm">XX科技有限公司</td>
<td class="px-4 py-4 text-sm">管理费</td>
<td class="px-4 py-4 text-sm">2026-03</td>
<td class="px-4 py-4 text-sm">2026-03-01</td>
<td class="px-4 py-4 text-sm font-bold text-red-500">¥12,000.00</td>
<td class="px-4 py-4 text-sm font-bold text-orange-500">¥0.00</td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-orange-100 text-orange-600 rounded-full text-xs">未付款</span></td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-orange-100 text-orange-600 rounded-full text-xs">未开票</span></td>
</tr>
<tr class="hover:bg-gray-50 bg-red-50">
<td class="px-4 py-4"><input type="checkbox" class="w-4 h-4 rounded"></td>
<td class="px-4 py-4 text-sm">XX产业园</td>
<td class="px-4 py-4 text-sm font-medium">ZC-002-03-012</td>
<td class="px-4 py-4 text-sm">HT202603002</td>
<td class="px-4 py-4 text-sm">XX商贸有限公司</td>
<td class="px-4 py-4 text-sm">租金</td>
<td class="px-4 py-4 text-sm">2026-02</td>
<td class="px-4 py-4 text-sm">2026-02-01</td>
<td class="px-4 py-4 text-sm font-bold text-red-500">¥16,000.00</td>
<td class="px-4 py-4 text-sm font-bold text-orange-500">¥0.00</td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-red-100 text-red-600 rounded-full text-xs">逾期</span></td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-orange-100 text-orange-600 rounded-full text-xs">未开票</span></td>
</tr>
</tbody>
</table>
<div class="p-4 border-t border-gray-200 flex items-center justify-between">
<span class="text-sm text-slate-500">显示 1-3 共 15 条 | 应收总额: ¥40,000.00 | 已收: ¥12,000.00 | 未收: ¥28,000.00</span>
<div class="flex gap-1">
<button class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">1</button>
<button class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">2</button>
<button class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">3</button>
</div>
</div>
</div>
</div>
</body>
</html>

154
prototype/pages/admin/receivable.html Normal file
View File

@@ -0,0 +1,154 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合同应收 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-100">
<nav class="bg-gradient-to-r from-blue-600 to-blue-700 h-14 px-6 flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-building text-white text-xl"></i>
<span class="text-white font-semibold">资产租赁管理系统</span>
</div>
<div class="flex items-center gap-4">
<span class="text-blue-100 text-sm">合同应收</span>
<i class="fas fa-file-invoice-dollar text-white"></i>
</div>
</nav>
<div class="p-6">
<!-- 查询条件 -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<div class="flex flex-wrap gap-4 items-end">
<div>
<label class="block text-sm text-gray-600 mb-1">项目</label>
<select class="border rounded-lg px-3 py-2 w-32">
<option>全部项目</option>
</select>
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">资产编号</label>
<input type="text" placeholder="请输入资产编号" class="border rounded-lg px-3 py-2 w-36">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">合同编号</label>
<input type="text" placeholder="请输入合同编号" class="border rounded-lg px-3 py-2 w-36">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">承租人</label>
<input type="text" placeholder="请输入承租人名称" class="border rounded-lg px-3 py-2 w-36">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">应收月份</label>
<input type="month" class="border rounded-lg px-3 py-2 w-32">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">状态</label>
<select class="border rounded-lg px-3 py-2 w-28">
<option>全部状态</option>
<option>已付款</option>
<option>未付款</option>
<option>逾期</option>
</select>
</div>
<div class="flex gap-2">
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm"><i class="fas fa-search mr-1"></i>查询</button>
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm">重置</button>
</div>
</div>
</div>
<!-- 视图切换和操作按钮 -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<div class="flex items-center justify-between">
<div class="flex gap-2">
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm">收入汇总列表</button>
<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300">费用明细列表</button>
</div>
<div class="flex gap-2">
<button class="bg-green-500 text-white px-4 py-2 rounded-lg text-sm"><i class="fas fa-plus mr-1"></i>新增</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm"><i class="fas fa-hand-holding-usd mr-1"></i>收款</button>
<button class="bg-purple-500 text-white px-4 py-2 rounded-lg text-sm"><i class="fas fa-file-invoice mr-1"></i>开票</button>
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm"><i class="fas fa-download mr-1"></i>导出</button>
</div>
</div>
</div>
<!-- 应收列表 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<table class="w-full text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500"><input type="checkbox"></th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">项目</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">资产编号</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">合同编号</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">承租人</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">应收状态</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">费用类型</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">应收月份</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">应收日期</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">应收金额</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">已收金额</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">未收金额</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">开票状态</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-3 py-3"><input type="checkbox"></td>
<td class="px-3 py-3">XX商业广场</td>
<td class="px-3 py-3 font-medium">ZC-001-01-005</td>
<td class="px-3 py-3 font-medium text-blue-600">HT202603001</td>
<td class="px-3 py-3">XX科技有限公司</td>
<td class="px-3 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">已付款</span></td>
<td class="px-3 py-3">租金</td>
<td class="px-3 py-3">2026-03</td>
<td class="px-3 py-3">2026-03-01</td>
<td class="px-3 py-3 font-semibold text-red-600">12,000.00</td>
<td class="px-3 py-3 font-semibold text-green-600">12,000.00</td>
<td class="px-3 py-3 text-gray-400">0.00</td>
<td class="px-3 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">已开票</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-3 py-3"><input type="checkbox"></td>
<td class="px-3 py-3">XX商业广场</td>
<td class="px-3 py-3 font-medium">ZC-001-01-005</td>
<td class="px-3 py-3 font-medium text-blue-600">HT202603001</td>
<td class="px-3 py-3">XX科技有限公司</td>
<td class="px-3 py-3"><span class="px-2 py-1 bg-orange-100 text-orange-700 rounded-full text-xs">未付款</span></td>
<td class="px-3 py-3">管理费</td>
<td class="px-3 py-3">2026-03</td>
<td class="px-3 py-3">2026-03-01</td>
<td class="px-3 py-3 font-semibold text-red-600">12,000.00</td>
<td class="px-3 py-3 font-semibold text-green-600">0.00</td>
<td class="px-3 py-3 font-semibold text-red-600">12,000.00</td>
<td class="px-3 py-3"><span class="px-2 py-1 bg-orange-100 text-orange-700 rounded-full text-xs">未开票</span></td>
</tr>
<tr class="hover:bg-gray-50 bg-red-50">
<td class="px-3 py-3"><input type="checkbox"></td>
<td class="px-3 py-3">XX产业园</td>
<td class="px-3 py-3 font-medium">ZC-002-03-012</td>
<td class="px-3 py-3 font-medium text-blue-600">HT202603002</td>
<td class="px-3 py-3">XX商贸有限公司</td>
<td class="px-3 py-3"><span class="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs">逾期</span></td>
<td class="px-3 py-3">租金</td>
<td class="px-3 py-3">2026-02</td>
<td class="px-3 py-3">2026-02-01</td>
<td class="px-3 py-3 font-semibold text-red-600">16,000.00</td>
<td class="px-3 py-3 font-semibold text-green-600">0.00</td>
<td class="px-3 py-3 font-semibold text-red-600">16,000.00</td>
<td class="px-3 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">已开票</span></td>
</tr>
</tbody>
</table>
<div class="px-4 py-3 bg-gray-50 border-t text-sm text-gray-600">
上一页 [1] [2] [3] 下一页 | 共15条记录
</div>
</div>
</div>
</body>
</html>

199
prototype/pages/admin/report-budget.html
View File

@@ -1,199 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>预算总结表 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">
<!-- 顶部导航 -->
<div class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<a href="../../admin-index.html" class="text-slate-600 hover:text-slate-800">
<i class="fas fa-arrow-left"></i>
</a>
<h1 class="text-xl font-bold text-slate-800">预算总结表</h1>
</div>
<div class="flex gap-2">
<button class="border border-gray-300 text-slate-600 px-4 py-2 rounded-lg hover:bg-gray-50">
<i class="fas fa-file-export mr-2"></i>导出
</button>
</div>
</div>
</div>
<div class="p-6">
<!-- 查询区 -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="flex gap-4 items-end">
<div>
<label class="block text-sm text-slate-500 mb-2">项目</label>
<select class="w-48 border border-gray-300 rounded-lg px-4 py-2">
<option>全部项目</option>
</select>
</div>
<div>
<label class="block text-sm text-slate-500 mb-2">年份</label>
<select class="w-32 border border-gray-300 rounded-lg px-4 py-2">
<option>2026</option>
<option>2025</option>
</select>
</div>
<button class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600">
<i class="fas fa-search mr-2"></i>查询
</button>
</div>
</div>
<!-- 报表 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="p-4 border-b border-gray-200">
<h2 class="text-lg font-bold">2026年预算总结表</h2>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left font-medium text-slate-500 border">部门</th>
<th class="px-4 py-3 text-left font-medium text-slate-500 border">年初居住</th>
<th class="px-4 py-3 text-left font-medium text-slate-500 border">项目</th>
<th class="px-4 py-3 text-center font-medium text-slate-500 border">1月</th>
<th class="px-4 py-3 text-center font-medium text-slate-500 border">2月</th>
<th class="px-4 py-3 text-center font-medium text-slate-500 border">3月</th>
<th class="px-4 py-3 text-center font-medium text-slate-500 border">第一季度</th>
<th class="px-4 py-3 text-center font-medium text-slate-500 border">全年累计</th>
<th class="px-4 py-3 text-center font-medium text-slate-500 border">最终结算</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="bg-slate-50">
<td class="px-4 py-2 font-medium border" rowspan="5">城服公司</td>
<td class="px-4 py-2 border"></td>
<td class="px-4 py-2 border">基础任务</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
</tr>
<tr class="bg-slate-50">
<td class="px-4 py-2 border"></td>
<td class="px-4 py-2 border">上月结转</td>
<td class="px-4 py-2 text-center border">0.00</td>
<td class="px-4 py-2 text-center border">0.00</td>
<td class="px-4 py-2 text-center border">0.00</td>
<td class="px-4 py-2 text-center border font-medium">0.00</td>
<td class="px-4 py-2 text-center border font-medium">0.00</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
</tr>
<tr class="bg-slate-50">
<td class="px-4 py-2 border"></td>
<td class="px-4 py-2 border">本月实收</td>
<td class="px-4 py-2 text-center border text-green-600">45,000.00</td>
<td class="px-4 py-2 text-center border text-green-600">52,000.00</td>
<td class="px-4 py-2 text-center border text-green-600">38,000.00</td>
<td class="px-4 py-2 text-center border font-medium text-green-600">135,000.00</td>
<td class="px-4 py-2 text-center border font-medium text-green-600">135,000.00</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
</tr>
<tr class="bg-slate-50">
<td class="px-4 py-2 border"></td>
<td class="px-4 py-2 border">本月差额</td>
<td class="px-4 py-2 text-center border text-red-500">-5,000.00</td>
<td class="px-4 py-2 text-center border text-green-600">+2,000.00</td>
<td class="px-4 py-2 text-center border text-red-500">-12,000.00</td>
<td class="px-4 py-2 text-center border font-medium text-red-500">-15,000.00</td>
<td class="px-4 py-2 text-center border font-medium text-red-500">-15,000.00</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
</tr>
<tr class="bg-blue-50">
<td class="px-4 py-2 border"></td>
<td class="px-4 py-2 font-medium border">结转下月</td>
<td class="px-4 py-2 text-center border font-medium">40,000.00</td>
<td class="px-4 py-2 text-center border font-medium">42,000.00</td>
<td class="px-4 py-2 text-center border font-medium">30,000.00</td>
<td class="px-4 py-2 text-center border font-bold">30,000.00</td>
<td class="px-4 py-2 text-center border font-bold">30,000.00</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium border" rowspan="5">人才公寓</td>
<td class="px-4 py-2 border"></td>
<td class="px-4 py-2 border">基础任务</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
</tr>
<tr>
<td class="px-4 py-2 border"></td>
<td class="px-4 py-2 border">上月结转</td>
<td class="px-4 py-2 text-center border">0.00</td>
<td class="px-4 py-2 text-center border">0.00</td>
<td class="px-4 py-2 text-center border">0.00</td>
<td class="px-4 py-2 text-center border">0.00</td>
<td class="px-4 py-2 text-center border">0.00</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
</tr>
<tr>
<td class="px-4 py-2 border"></td>
<td class="px-4 py-2 border">本月实收</td>
<td class="px-4 py-2 text-center border text-green-600">0.00</td>
<td class="px-4 py-2 text-center border text-green-600">0.00</td>
<td class="px-4 py-2 text-center border text-green-600">0.00</td>
<td class="px-4 py-2 text-center border font-medium">0.00</td>
<td class="px-4 py-2 text-center border font-medium">0.00</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
</tr>
<tr>
<td class="px-4 py-2 border"></td>
<td class="px-4 py-2 border">本月差额</td>
<td class="px-4 py-2 text-center border">0.00</td>
<td class="px-4 py-2 text-center border">0.00</td>
<td class="px-4 py-2 text-center border">0.00</td>
<td class="px-4 py-2 text-center border font-medium">0.00</td>
<td class="px-4 py-2 text-center border font-medium">0.00</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
</tr>
<tr class="bg-blue-50">
<td class="px-4 py-2 border"></td>
<td class="px-4 py-2 font-medium border">结转下月</td>
<td class="px-4 py-2 text-center border font-medium">0.00</td>
<td class="px-4 py-2 text-center border font-medium">0.00</td>
<td class="px-4 py-2 text-center border font-medium">0.00</td>
<td class="px-4 py-2 text-center border font-bold">0.00</td>
<td class="px-4 py-2 text-center border font-bold">0.00</td>
<td class="px-4 py-2 text-center border text-slate-400">-</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 汇总统计 -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-6">
<div class="bg-white rounded-xl shadow-sm p-6">
<p class="text-slate-500 text-sm">本季度应收</p>
<p class="text-2xl font-bold text-slate-800 mt-2">¥150,000.00</p>
</div>
<div class="bg-white rounded-xl shadow-sm p-6">
<p class="text-slate-500 text-sm">本季度实收</p>
<p class="text-2xl font-bold text-green-600 mt-2">¥135,000.00</p>
</div>
<div class="bg-white rounded-xl shadow-sm p-6">
<p class="text-slate-500 text-sm">本季度差额</p>
<p class="text-2xl font-bold text-red-500 mt-2">-¥15,000.00</p>
</div>
<div class="bg-white rounded-xl shadow-sm p-6">
<p class="text-slate-500 text-sm">完成率</p>
<p class="text-2xl font-bold text-blue-600 mt-2">90%</p>
</div>
</div>
</div>
</body>
</html>

55
prototype/pages/admin/report-contract.html
View File

@@ -1,55 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>合同应收表 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">
<div class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center gap-4">
<a href="../../admin-index.html" class="text-slate-600 hover:text-slate-800"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-xl font-bold text-slate-800">合同应收表</h1>
</div>
</div>
<div class="p-6">
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="flex gap-4">
<select class="border border-gray-300 rounded-lg px-4 py-2"><option>全部项目</option></select>
<input type="text" placeholder="合同编号" class="border border-gray-300 rounded-lg px-4 py-2">
<button class="bg-blue-500 text-white rounded-lg">查询</button>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6">
<h2 class="text-lg font-bold mb-4">2026年房屋租赁管理信息一览表</h2>
<table class="w-full text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-3 py-2 text-left border">房屋位置</th>
<th class="px-3 py-2 text-left border">合同编号</th>
<th class="px-3 py-2 text-left border">承租人</th>
<th class="px-3 py-2 text-left border">属性</th>
<th class="px-3 py-2 text-left border">租赁面积</th>
<th class="px-3 py-2 text-center border">25年租金</th>
<th class="px-3 py-2 text-center border">26年租金</th>
<th class="px-3 py-2 text-center border">27年租金</th>
</tr>
</thead>
<tbody class="divide-y">
<tr>
<td class="px-3 py-2 border">ZC-001-01-005</td>
<td class="px-3 py-2 border">HT202603001</td>
<td class="px-3 py-2 border">XX科技有限公司</td>
<td class="px-3 py-2 border"><span class="px-2 py-1 bg-blue-100 text-blue-600 rounded text-xs">长期</span></td>
<td class="px-3 py-2 border">120.00</td>
<td class="px-3 py-2 text-center border text-slate-400">-</td>
<td class="px-3 py-2 text-center border text-green-600">144,000</td>
<td class="px-3 py-2 text-center border text-green-600">144,000</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

263
prototype/pages/admin/statistics.html Normal file
View File

@@ -0,0 +1,263 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>统计报表 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-100">
<nav class="bg-gradient-to-r from-blue-600 to-blue-700 h-14 px-6 flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-building text-white text-xl"></i>
<span class="text-white font-semibold">资产租赁管理系统</span>
</div>
<div class="flex items-center gap-4">
<span class="text-blue-100 text-sm">统计报表</span>
<i class="fas fa-chart-bar text-white"></i>
</div>
</nav>
<div class="p-6">
<!-- 报表类型选择 -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<div class="flex gap-4">
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm">预算总结表</button>
<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300">合同应收表</button>
<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300">资产台账报表</button>
<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300">应收统计报表</button>
</div>
</div>
<!-- 查询条件 -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<div class="flex flex-wrap gap-4 items-end">
<div>
<label class="block text-sm text-gray-600 mb-1">项目</label>
<select class="border rounded-lg px-3 py-2 w-32">
<option>全部项目</option>
</select>
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">年份</label>
<select class="border rounded-lg px-3 py-2 w-28">
<option>2026</option>
<option>2025</option>
<option>2024</option>
</select>
</div>
<div class="flex gap-2">
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm"><i class="fas fa-search mr-1"></i>查询</button>
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm">重置</button>
</div>
<button class="ml-auto bg-green-500 text-white px-4 py-2 rounded-lg text-sm"><i class="fas fa-file-excel mr-1"></i>导出</button>
</div>
</div>
<!-- 预算总结表 -->
<div class="bg-white rounded-xl shadow-sm overflow-x-auto">
<h3 class="text-lg font-semibold text-gray-800 p-4 border-b">2026年预算总结表</h3>
<table class="w-full text-xs">
<thead class="bg-gray-50">
<tr>
<th class="px-3 py-2 text-left font-medium text-gray-500 border" rowspan="2">部门</th>
<th class="px-3 py-2 text-left font-medium text-gray-500 border" rowspan="2">年初居住</th>
<th class="px-3 py-2 text-left font-medium text-gray-500 border" colspan="11">2026年各月数据</th>
<th class="px-3 py-2 text-left font-medium text-gray-500 border" rowspan="2">全年累计</th>
<th class="px-3 py-2 text-left font-medium text-gray-500 border" rowspan="2">最终结算</th>
</tr>
<tr>
<th class="px-2 py-2 text-center font-medium text-gray-500 border">项目</th>
<th class="px-2 py-2 text-center font-medium text-gray-500 border">1月</th>
<th class="px-2 py-2 text-center font-medium text-gray-500 border">2月</th>
<th class="px-2 py-2 text-center font-medium text-gray-500 border">3月</th>
<th class="px-2 py-2 text-center font-medium text-gray-500 border">4月</th>
<th class="px-2 py-2 text-center font-medium text-gray-500 border">5月</th>
<th class="px-2 py-2 text-center font-medium text-gray-500 border">6月</th>
<th class="px-2 py-2 text-center font-medium text-gray-500 border">7月</th>
<th class="px-2 py-2 text-center font-medium text-gray-500 border">8月</th>
<th class="px-2 py-2 text-center font-medium text-gray-500 border">9月</th>
<th class="px-2 py-2 text-center font-medium text-gray-500 border">10月</th>
<th class="px-2 py-2 text-center font-medium text-gray-500 border">11月</th>
<th class="px-2 py-2 text-center font-medium text-gray-500 border">12月</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-3 py-2 border font-medium" rowspan="5">城服公司</td>
<td class="px-3 py-2 border"></td>
<td class="px-3 py-2 border font-medium">基础任务</td>
<td class="px-3 py-2 border text-right">120,000</td>
<td class="px-3 py-2 border text-right">120,000</td>
<td class="px-3 py-2 border text-right">125,000</td>
<td class="px-3 py-2 border text-right">125,000</td>
<td class="px-3 py-2 border text-right">130,000</td>
<td class="px-3 py-2 border text-right">130,000</td>
<td class="px-3 py-2 border text-right">135,000</td>
<td class="px-3 py-2 border text-right">135,000</td>
<td class="px-3 py-2 border text-right">140,000</td>
<td class="px-3 py-2 border text-right">140,000</td>
<td class="px-3 py-2 border text-right">145,000</td>
<td class="px-3 py-2 border text-right text-blue-600 font-semibold">1,545,000</td>
<td class="px-3 py-2 border"></td>
</tr>
<tr>
<td class="px-3 py-2 border"></td>
<td class="px-3 py-2 border text-gray-500">上月结转</td>
<td class="px-3 py-2 border text-right">0.00</td>
<td class="px-3 py-2 border text-right">5,000</td>
<td class="px-3 py-2 border text-right">3,000</td>
<td class="px-3 py-2 border text-right">2,000</td>
<td class="px-3 py-2 border text-right">4,000</td>
<td class="px-3 py-2 border text-right">3,000</td>
<td class="px-3 py-2 border text-right">2,000</td>
<td class="px-3 py-2 border text-right">5,000</td>
<td class="px-3 py-2 border text-right">4,000</td>
<td class="px-3 py-2 border text-right">3,000</td>
<td class="px-3 py-2 border text-right">2,000</td>
<td class="px-3 py-2 border text-right text-gray-500">33,000</td>
<td class="px-3 py-2 border"></td>
</tr>
<tr>
<td class="px-3 py-2 border"></td>
<td class="px-3 py-2 border text-green-600">本月实收</td>
<td class="px-3 py-2 border text-right text-green-600">118,000</td>
<td class="px-3 py-2 border text-right text-green-600">122,000</td>
<td class="px-3 py-2 border text-right text-green-600">126,000</td>
<td class="px-3 py-2 border text-right text-green-600">124,000</td>
<td class="px-3 py-2 border text-right text-green-600">131,000</td>
<td class="px-3 py-2 border text-right text-green-600">129,000</td>
<td class="px-3 py-2 border text-right text-green-600">134,000</td>
<td class="px-3 py-2 border text-right text-green-600">136,000</td>
<td class="px-3 py-2 border text-right text-green-600">141,000</td>
<td class="px-3 py-2 border text-right text-green-600">139,000</td>
<td class="px-3 py-2 border text-right text-green-600">144,000</td>
<td class="px-3 py-2 border text-right text-green-600 font-semibold">1,544,000</td>
<td class="px-3 py-2 border"></td>
</tr>
<tr>
<td class="px-3 py-2 border"></td>
<td class="px-3 py-2 border text-orange-500">本月差额</td>
<td class="px-3 py-2 border text-right text-orange-500">-2,000</td>
<td class="px-3 py-2 border text-right text-green-600">-3,000</td>
<td class="px-3 py-2 border text-right text-green-600">-2,000</td>
<td class="px-3 py-2 border text-right text-green-600">-1,000</td>
<td class="px-3 py-2 border text-right text-green-600">-3,000</td>
<td class="px-3 py-2 border text-right text-green-600">-2,000</td>
<td class="px-3 py-2 border text-right text-green-600">-1,000</td>
<td class="px-3 py-2 border text-right text-orange-500">-4,000</td>
<td class="px-3 py-2 border text-right text-green-600">-3,000</td>
<td class="px-3 py-2 border text-right text-green-600">-2,000</td>
<td class="px-3 py-2 border text-right text-green-600">-1,000</td>
<td class="px-3 py-2 border text-right text-green-600 font-semibold">-34,000</td>
<td class="px-3 py-2 border"></td>
</tr>
<tr>
<td class="px-3 py-2 border"></td>
<td class="px-3 py-2 border text-blue-500">结转下月</td>
<td class="px-3 py-2 border text-right text-blue-500">5,000</td>
<td class="px-3 py-2 border text-right text-blue-500">3,000</td>
<td class="px-3 py-2 border text-right text-blue-500">2,000</td>
<td class="px-3 py-2 border text-right text-blue-500">4,000</td>
<td class="px-3 py-2 border text-right text-blue-500">3,000</td>
<td class="px-3 py-2 border text-right text-blue-500">2,000</td>
<td class="px-3 py-2 border text-right text-blue-500">5,000</td>
<td class="px-3 py-2 border text-right text-blue-500">4,000</td>
<td class="px-3 py-2 border text-right text-blue-500">3,000</td>
<td class="px-3 py-2 border text-right text-blue-500">2,000</td>
<td class="px-3 py-2 border text-right text-blue-500">1,000</td>
<td class="px-3 py-2 border text-right text-blue-500 font-semibold">34,000</td>
<td class="px-3 py-2 border"></td>
</tr>
<tr>
<td class="px-3 py-2 border font-medium" rowspan="5">人才公寓</td>
<td class="px-3 py-2 border"></td>
<td class="px-3 py-2 border font-medium">基础任务</td>
<td class="px-3 py-2 border text-right">80,000</td>
<td class="px-3 py-2 border text-right">80,000</td>
<td class="px-3 py-2 border text-right">85,000</td>
<td class="px-3 py-2 border text-right">85,000</td>
<td class="px-3 py-2 border text-right">90,000</td>
<td class="px-3 py-2 border text-right">90,000</td>
<td class="px-3 py-2 border text-right">95,000</td>
<td class="px-3 py-2 border text-right">95,000</td>
<td class="px-3 py-2 border text-right">100,000</td>
<td class="px-3 py-2 border text-right">100,000</td>
<td class="px-3 py-2 border text-right">105,000</td>
<td class="px-3 py-2 border text-right text-blue-600 font-semibold">1,095,000</td>
<td class="px-3 py-2 border"></td>
</tr>
<tr>
<td class="px-3 py-2 border"></td>
<td class="px-3 py-2 border text-gray-500">上月结转</td>
<td class="px-3 py-2 border text-right">0.00</td>
<td class="px-3 py-2 border text-right">2,000</td>
<td class="px-3 py-2 border text-right">1,500</td>
<td class="px-3 py-2 border text-right">1,000</td>
<td class="px-3 py-2 border text-right">2,500</td>
<td class="px-3 py-2 border text-right">2,000</td>
<td class="px-3 py-2 border text-right">1,500</td>
<td class="px-3 py-2 border text-right">3,000</td>
<td class="px-3 py-2 border text-right">2,500</td>
<td class="px-3 py-2 border text-right">2,000</td>
<td class="px-3 py-2 border text-right">1,500</td>
<td class="px-3 py-2 border text-right text-gray-500">20,000</td>
<td class="px-3 py-2 border"></td>
</tr>
<tr>
<td class="px-3 py-2 border"></td>
<td class="px-3 py-2 border text-green-600">本月实收</td>
<td class="px-3 py-2 border text-right text-green-600">79,000</td>
<td class="px-3 py-2 border text-right text-green-600">81,000</td>
<td class="px-3 py-2 border text-right text-green-600">85,500</td>
<td class="px-3 py-2 border text-right text-green-600">84,500</td>
<td class="px-3 py-2 border text-right text-green-600">91,000</td>
<td class="px-3 py-2 border text-right text-green-600">89,000</td>
<td class="px-3 py-2 border text-right text-green-600">94,500</td>
<td class="px-3 py-2 border text-right text-green-600">96,500</td>
<td class="px-3 py-2 border text-right text-green-600">101,000</td>
<td class="px-3 py-2 border text-right text-green-600">99,000</td>
<td class="px-3 py-2 border text-right text-green-600">105,500</td>
<td class="px-3 py-2 border text-right text-green-600 font-semibold">1,107,000</td>
<td class="px-3 py-2 border"></td>
</tr>
<tr>
<td class="px-3 py-2 border"></td>
<td class="px-3 py-2 border text-orange-500">本月差额</td>
<td class="px-3 py-2 border text-right text-orange-500">-1,000</td>
<td class="px-3 py-2 border text-right text-green-600">-1,500</td>
<td class="px-3 py-2 border text-right text-green-600">-1,000</td>
<td class="px-3 py-2 border text-right text-green-600">-500</td>
<td class="px-3 py-2 border text-right text-green-600">-1,500</td>
<td class="px-3 py-2 border text-right text-green-600">-1,000</td>
<td class="px-3 py-2 border text-right text-green-600">-500</td>
<td class="px-3 py-2 border text-right text-orange-500">-1,500</td>
<td class="px-3 py-2 border text-right text-green-600">-1,000</td>
<td class="px-3 py-2 border text-right text-green-600">-500</td>
<td class="px-3 py-2 border text-right text-green-600">0.00</td>
<td class="px-3 py-2 border text-right text-green-600 font-semibold">-12,000</td>
<td class="px-3 py-2 border"></td>
</tr>
<tr>
<td class="px-3 py-2 border"></td>
<td class="px-3 py-2 border text-blue-500">结转下月</td>
<td class="px-3 py-2 border text-right text-blue-500">2,000</td>
<td class="px-3 py-2 border text-right text-blue-500">1,500</td>
<td class="px-3 py-2 border text-right text-blue-500">1,000</td>
<td class="px-3 py-2 border text-right text-blue-500">2,500</td>
<td class="px-3 py-2 border text-right text-blue-500">2,000</td>
<td class="px-3 py-2 border text-right text-blue-500">1,500</td>
<td class="px-3 py-2 border text-right text-blue-500">3,000</td>
<td class="px-3 py-2 border text-right text-blue-500">2,500</td>
<td class="px-3 py-2 border text-right text-blue-500">2,000</td>
<td class="px-3 py-2 border text-right text-blue-500">1,500</td>
<td class="px-3 py-2 border text-right text-blue-500 font-semibold">20,500</td>
<td class="px-3 py-2 border"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

134
prototype/pages/admin/tenant-info.html
View File

@@ -2,67 +2,121 @@
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>承租人管理 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">
<div class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<a href="../../admin-index.html" class="text-slate-600 hover:text-slate-800"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-xl font-bold text-slate-800">承租人信息管理</h1>
</div>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
<i class="fas fa-plus mr-2"></i>新增商户
</button>
<body class="bg-gray-100">
<nav class="bg-gradient-to-r from-blue-600 to-blue-700 h-14 px-6 flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-building text-white text-xl"></i>
<span class="text-white font-semibold">资产租赁管理系统</span>
</div>
</div>
<div class="flex items-center gap-4">
<span class="text-blue-100 text-sm">承租人管理</span>
<i class="fas fa-users text-white"></i>
</div>
</nav>
<div class="p-6">
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="flex gap-4">
<input type="text" placeholder="商户编码" class="border border-gray-300 rounded-lg px-4 py-2">
<input type="text" placeholder="商户名称" class="border border-gray-300 rounded-lg px-4 py-2">
<select class="border border-gray-300 rounded-lg px-4 py-2">
<option>商户类型</option>
</select>
<button class="bg-blue-500 text-white px-6 py-2 rounded-lg">查询</button>
<!-- 查询条件 -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<div class="flex flex-wrap gap-4 items-end">
<div>
<label class="block text-sm text-gray-600 mb-1">商户编码</label>
<input type="text" placeholder="____________" class="border rounded-lg px-3 py-2 w-32">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">商户名称</label>
<input type="text" placeholder="____________" class="border rounded-lg px-3 py-2 w-32">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">商户类型</label>
<select class="border rounded-lg px-3 py-2 w-28">
<option>商户</option>
<option>个人</option>
</select>
</div>
<div class="flex gap-2">
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm"><i class="fas fa-search mr-1"></i>查询</button>
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm">重置</button>
</div>
<div class="flex gap-2 ml-auto">
<button class="bg-green-500 text-white px-4 py-2 rounded-lg text-sm"><i class="fas fa-plus mr-1"></i>新增</button>
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm"><i class="fas fa-edit mr-1"></i>信息变更</button>
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm"><i class="fas fa-shield-alt mr-1"></i>纳入黑名单</button>
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm"><i class="fas fa-trash mr-1"></i>批量删除</button>
</div>
</div>
</div>
<!-- 标签页 -->
<div class="bg-white rounded-xl shadow-sm mb-4">
<div class="flex border-b">
<button class="px-6 py-3 text-sm font-medium text-blue-600 border-b-2 border-blue-600">商户信息</button>
<button class="px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700">商户黑名单</button>
</div>
</div>
<!-- 商户列表 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="px-4 py-2 bg-gray-50 border-b text-sm text-gray-600">
已选择1项 <button class="text-blue-500 hover:underline">清空</button>
</div>
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500">商户编码</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500">商户名称</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500">商户简称</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500">商户类型</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500">证件号码</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500">客户分类</th>
<th class="px-4 py-3 text-left text-xs font-medium text-slate-500">状态</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500"><input type="checkbox"></th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">#</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">商户编码</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">商户名称</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">商户简称</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">商户类型</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">证件号码</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">客户分类</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">商户状态</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 text-sm font-medium">000112</td>
<td class="px-4 py-4 text-sm">铺位测试01</td>
<td class="px-4 py-4 text-sm">铺位测试01</td>
<td class="px-4 py-4 text-sm">商户</td>
<td class="px-4 py-4 text-sm">00000</td>
<td class="px-4 py-4 text-sm">公司</td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-green-100 text-green-600 rounded-full text-xs">正式商户</span></td>
<td class="px-3 py-3"><input type="checkbox" checked></td>
<td class="px-3 py-3 text-sm">1</td>
<td class="px-3 py-3 text-sm font-medium">000112</td>
<td class="px-3 py-3 text-sm">铺位测试01</td>
<td class="px-3 py-3 text-sm">铺位测试01</td>
<td class="px-3 py-3 text-sm">商户</td>
<td class="px-3 py-3 text-sm">00000</td>
<td class="px-3 py-3 text-sm">公司</td>
<td class="px-3 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">正式商户</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 text-sm font-medium">000111</td>
<td class="px-4 py-4 text-sm">AAA</td>
<td class="px-4 py-4 text-sm">AAA</td>
<td class="px-4 py-4 text-sm">商户</td>
<td class="px-4 py-4 text-sm">44444...44</td>
<td class="px-4 py-4 text-sm">个人</td>
<td class="px-4 py-4"><span class="px-2 py-1 bg-green-100 text-green-600 rounded-full text-xs">正式商户</span></td>
<td class="px-3 py-3"><input type="checkbox"></td>
<td class="px-3 py-3 text-sm">2</td>
<td class="px-3 py-3 text-sm font-medium">000111</td>
<td class="px-3 py-3 text-sm">AAA</td>
<td class="px-3 py-3 text-sm">AAA</td>
<td class="px-3 py-3 text-sm">商户</td>
<td class="px-3 py-3 text-sm">44444...44</td>
<td class="px-3 py-3 text-sm">个人</td>
<td class="px-3 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">正式商户</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-3 py-3"><input type="checkbox"></td>
<td class="px-3 py-3 text-sm">3</td>
<td class="px-3 py-3 text-sm font-medium">000110</td>
<td class="px-3 py-3 text-sm">深圳XX商业</td>
<td class="px-3 py-3 text-sm">深圳XX商业</td>
<td class="px-3 py-3 text-sm">商户</td>
<td class="px-3 py-3 text-sm">91440...15</td>
<td class="px-3 py-3 text-sm">公司</td>
<td class="px-3 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">正式商户</span></td>
</tr>
</tbody>
</table>
<div class="px-4 py-3 bg-gray-50 border-t text-sm text-gray-600">
1-10 共79条 | [1] [2] [3] [4] [5] [6] [7] [8] | 10条/页
</div>
</div>
</div>
</body>

149
prototype/pages/admin/verification.html Normal file
View File

@@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>应收核销 - 资产租赁管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-100">
<nav class="bg-gradient-to-r from-blue-600 to-blue-700 h-14 px-6 flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-building text-white text-xl"></i>
<span class="text-white font-semibold">资产租赁管理系统</span>
</div>
<div class="flex items-center gap-4">
<span class="text-blue-100 text-sm">应收核销</span>
<i class="fas fa-check-double text-white"></i>
</div>
</nav>
<div class="p-6">
<!-- 查询条件 -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<div class="flex flex-wrap gap-4 items-end">
<div>
<label class="block text-sm text-gray-600 mb-1">项目</label>
<select class="border rounded-lg px-3 py-2 w-32">
<option>全部项目</option>
</select>
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">资产编号</label>
<input type="text" placeholder="请输入资产编号" class="border rounded-lg px-3 py-2 w-36">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">合同编号</label>
<input type="text" placeholder="请输入合同编号" class="border rounded-lg px-3 py-2 w-36">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">承租人</label>
<input type="text" placeholder="请输入承租人名称" class="border rounded-lg px-3 py-2 w-36">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">收款日期</label>
<input type="date" class="border rounded-lg px-3 py-2 w-36">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">收款人</label>
<input type="text" placeholder="请输入收款人名称" class="border rounded-lg px-3 py-2 w-36">
</div>
<div class="flex gap-2">
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm"><i class="fas fa-search mr-1"></i>查询</button>
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm">重置</button>
</div>
<button class="ml-auto bg-green-500 text-white px-4 py-2 rounded-lg text-sm"><i class="fas fa-download mr-1"></i>导出收款明细</button>
</div>
</div>
<!-- 收款明细列表 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<table class="w-full text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">项目</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">资产编号</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">合同编号</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">承租人</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">收款日期</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">收款金额</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">收款方式</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">操作人</th>
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500">操作</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-3 py-3">XX商业广场</td>
<td class="px-3 py-3 font-medium">ZC-001-01-005</td>
<td class="px-3 py-3 font-medium text-blue-600">HT202603001</td>
<td class="px-3 py-3">XX科技有限公司</td>
<td class="px-3 py-3">2026-03-05</td>
<td class="px-3 py-3 font-semibold text-green-600">12,000.00</td>
<td class="px-3 py-3">银行转账</td>
<td class="px-3 py-3">张三</td>
<td class="px-3 py-3">
<button class="text-blue-500 hover:bg-blue-50 px-2 py-1 rounded text-xs">查看详情</button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-3 py-3">XX写字楼</td>
<td class="px-3 py-3 font-medium">ZC-003-05-003</td>
<td class="px-3 py-3 font-medium text-blue-600">HT202603003</td>
<td class="px-3 py-3">XX广告有限公司</td>
<td class="px-3 py-3">2026-03-01</td>
<td class="px-3 py-3 font-semibold text-green-600">18,000.00</td>
<td class="px-3 py-3">微信支付</td>
<td class="px-3 py-3">李四</td>
<td class="px-3 py-3">
<button class="text-blue-500 hover:bg-blue-50 px-2 py-1 rounded text-xs">查看详情</button>
</td>
</tr>
</tbody>
</table>
<div class="px-4 py-3 bg-gray-50 border-t text-sm text-gray-600">
上一页 [1] [2] [3] 下一页 | 共15条记录
</div>
</div>
<!-- 收款操作示例 -->
<div class="bg-white rounded-xl shadow-sm p-4 mt-4">
<h3 class="font-semibold text-gray-800 mb-4">收款操作</h3>
<div class="border rounded-lg p-4 bg-gray-50">
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-sm text-gray-600 mb-1">收款日期 *</label>
<input type="date" class="border rounded-lg px-3 py-2 w-full">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">收款金额(元) *</label>
<input type="text" placeholder="请输入收款金额" class="border rounded-lg px-3 py-2 w-full">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">收款方式 *</label>
<select class="border rounded-lg px-3 py-2 w-full">
<option>银行转账</option>
<option>现金</option>
<option>微信支付</option>
<option>支付宝</option>
</select>
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">付款方</label>
<input type="text" placeholder="请输入付款方名称" class="border rounded-lg px-3 py-2 w-full">
</div>
</div>
<div class="mb-4">
<label class="block text-sm text-gray-600 mb-1">备注</label>
<textarea placeholder="请输入备注信息（选填）" class="border rounded-lg px-3 py-2 w-full" rows="2"></textarea>
</div>
<div class="flex justify-end gap-2">
<button class="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg text-sm">取消</button>
<button class="bg-green-500 text-white px-6 py-2 rounded-lg text-sm"><i class="fas fa-check mr-1"></i>确认收款</button>
</div>
</div>
</div>
</div>
</body>
</html>

BIN
prototype/screenshots/01-index.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 315 KiB

After

Width:  |  Height:  |  Size: 406 KiB

BIN
prototype/screenshots/02-prototype-grid.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 581 KiB