# limi--web

**Repository Path**: notvip/limi--web

## Basic Information

- **Project Name**: limi--web
- **Description**: limi的网站，放点自己再用的东西
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-08
- **Last Updated**: 2026-05-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 文生图提示词效果记录与学习平台

## 项目概述

本项目是一个用于记录和学习文生图（Text-to-Image）提示词在指定大模型中生成效果的网站平台。通过收集不同提示词、模型参数组合的生成结果，帮助用户学习和优化文生图技术。

## 技术栈

- **前端框架**: Vue 3
- **构建工具**: Vite
- **UI组件库**:
    - PC端: Naive UI
    - 移动端: Vant
- **响应式设计**: 支持PC和移动端访问

## 核心功能

### 1. 图片展示

- 网格布局展示所有生成的图片
- 支持图片分类和标签筛选
- 响应式布局适配不同设备

### 2. 悬停信息展示

- 鼠标悬停时显示生成详情
- 包含大模型型号、提示词、参数等信息
- 动态动画效果提升用户体验

### 3. 详情查看

- 点击图片进入详情页面
- 完整展示生成参数和配置
- 支持图片放大查看细节

### 4. 学习记录

- 收藏优质提示词组合
- 添加个人学习笔记
- 历史记录查询功能

## 功能模块设计

### 前端架构

```
src/
├── assets/            # 静态资源
├── components/        # 通用组件
│   ├── ImageCard.vue  # 图片展示卡片
│   ├── HoverInfo.vue  # 悬停信息组件
│   ├── DetailModal.vue # 详情弹窗
│   └── SearchBar.vue  # 搜索栏
├── views/             # 页面视图
│   ├── HomeView.vue   # 首页
│   ├── DetailView.vue # 详情页
│   └── SearchView.vue # 搜索页
├── router/            # 路由配置
├── store/             # 状态管理
└── api/               # API接口
```

### 主要组件功能

#### ImageCard.vue

- 图片展示容器
- 实现悬停效果
- 包含基础信息展示
- 响应式设计适配移动端

#### HoverInfo.vue

- 悬停时显示的详细信息
- 包含模型名称、提示词、参数
- 动画效果平滑显示
- 支持PC端hover和移动端touch事件

#### DetailModal.vue

- 完整的生成详情展示
- 图片放大功能
- 参数详细列表
- 学习笔记区域

## 数据结构设计

### 图片数据模型

```
{
  id: String,           // 图片唯一标识
  imageUrl: String,     // 图片地址
  modelName: String,      // 大模型名称
  prompt: String,        // 提示词内容
  parameters: {         // 生成参数
    width: Number,
    height: Number,
    steps: Number,
    cfgScale: Number,
    seed: Number,
    // 其他参数...
  },
  createdAt: Date,      // 生成时间
  tags: [String],       // 标签分类
  notes: String         // 学习笔记
}
```

## 用户交互流程

### PC端交互

1. 鼠标悬停图片 → 显示生成信息摘要
2. 点击图片 → 弹出详情模态框
3. 滚动浏览 → 无限加载更多图片

### 移动端交互

1. 点击图片 → 显示生成信息摘要
2. 长按图片 → 弹出详情模态框
3. 下拉刷新 → 加载最新内容

## 开发计划

### 第一阶段：基础功能

- 图片展示网格布局
- 基础悬停信息展示
- 详情页面开发
- 响应式设计实现

### 第二阶段：增强功能

- 搜索和筛选功能
- 收藏和笔记功能
- 用户账户系统
- 数据统计分析

### 第三阶段：优化完善

- 性能优化
- 用户体验优化
- 多语言支持
- 文档完善

## 运行环境

### 开发环境

- Node.js >= 14.0.0
- npm >= 6.0.0
- Vue CLI 或 Vite

### 生产环境

- 静态文件托管
- CDN加速
- 数据库存储

## 安装步骤

```
# 克隆项目
git clone https://github.com/your-username/text-to-image-learn.git

# 进入项目目录
cd text-to-image-learn

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build
```

## 贡献指南

欢迎贡献代码！请遵循以下流程：

1. Fork项目仓库
2. 创建特性分支
3. 提交代码更改
4. 创建Pull Request

## 许可证

本项目采用MIT许可证，详情请查看LICENSE文件。

---

**项目目标**：通过记录和分析不同提示词组合的生成效果，帮助用户快速学习和掌握文生图技术，提升创作效率和质量。