# ability-square

**Repository Path**: jsz315/ability-square

## Basic Information

- **Project Name**: ability-square
- **Description**: 能力广场
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-29
- **Last Updated**: 2026-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Taro 小程序开发模板

基于 Taro + Vue3 + NutUI + UnoCSS + Pinia 的小程序开发模板，提供完整的技术栈配置和最佳实践。

## 🚀 技术栈

- **框架**: [Taro 3.6+](https://taro-docs.jd.com/docs/) - 多端统一开发框架
- **前端框架**: [Vue 3.4+](https://cn.vuejs.org/) - 渐进式 JavaScript 框架
- **UI 组件库**: [NutUI](https://nutui.jd.com/taro/vue/4x/#/zh-CN/guide/intro) - 京东风格移动端组件库
- **CSS 框架**: [UnoCSS](https://unocss.dev/) - 即时原子化 CSS 引擎
- **状态管理**: [Pinia](https://pinia.vuejs.org/zh/) - Vue 的状态管理库
- **开发语言**: [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集

## 📦 项目结构

```
src/
├── app.config.ts          # 小程序全局配置
├── app.scss              # 全局样式
├── app.ts                # 应用入口文件
├── index.html            # H5 入口文件
├── pages/                # 页面目录
│   └── index/
│       └── index.vue     # 首页
├── store/                # 状态管理
│   ├── index.ts          # Pinia 入口
│   └── todo.ts           # Todo 状态管理
└── styles/               # 样式文件
    └── index.scss        # 样式入口
```

## 🛠️ 开发指南

### 环境要求

- Node.js >= 16.0.0
- npm >= 7.0.0 或 pnpm >= 6.0.0

### 安装依赖

```bash
# 使用 npm
npm install

# 使用 pnpm (推荐)
pnpm install
```

### 开发运行

```bash
# 微信小程序
npm run dev:weapp

# H5
npm run dev:h5
```

### 构建打包

```bash
# 微信小程序
npm run build:weapp

# H5
npm run build:h5
```

### 类型检查

```bash
npm run typecheck
```

## 🎯 功能特性

### 1. 完整的 TypeScript 支持
- 严格的类型检查
- 完善的类型定义
- 良好的开发体验

### 2. 现代化的状态管理
- 基于 Pinia 的响应式状态管理
- 支持 TypeScript 类型推导
- 模块化的 store 设计

### 3. 原子化 CSS
- UnoCSS 提供即时的原子化 CSS
- 小程序适配的 rpx 单位支持
- 按需生成，体积更小

### 4. 丰富的 UI 组件
- NutUI 提供完整的移动端组件库
- 京东风格设计语言
- 完善的小程序适配

## 📝 开发规范

### 1. 尺寸单位
- 设计稿基于 750rpx 宽度
- 所有尺寸按 1:1 转换（设计稿 100px → 100rpx）
- 优先使用 UnoCSS 原子类

### 2. 组件开发
- 使用 `<script setup>` 语法
- 添加 JSDoc 类型注释
- 遵循 Vue 3 Composition API 最佳实践

### 3. 状态管理
- 使用 Pinia 管理全局状态
- 按功能模块拆分 store
- 利用 TypeScript 类型推导

### 4. 样式规范
- 优先使用 UnoCSS 原子类
- 自定义样式使用 scoped
- 保持样式的一致性和可维护性

## 🔧 配置说明

### UnoCSS 配置
项目已配置 UnoCSS 支持小程序开发，包括：
- rpx 单位支持
- 小程序平台适配
- 原子化 CSS 类生成

### Pinia 配置
- 已集成 `taro-plugin-pinia` 插件
- 支持小程序平台的状态持久化
- 完整的 TypeScript 支持

## 📄 许可证

MIT License

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来改进这个模板。

## 📚 相关文档

- [Taro 文档](https://taro-docs.jd.com/docs/)
- [Vue 3 文档](https://cn.vuejs.org/)
- [NutUI 文档](https://nutui.jd.com/taro/vue/4x/#/zh-CN/guide/intro)
- [UnoCSS 文档](https://unocss.dev/)
- [Pinia 文档](https://pinia.vuejs.org/zh/)

---

💡 **提示**: 这是一个精简的开发模板，你可以根据项目需求添加更多功能和配置。


写一个登陆页面。使用html完成编写页面，要求设计稿宽750px, 直接按手机端写，适配屏幕。主色调将统一为#2196F3（蓝色系）。

页面进行重新设计，使其更美观、更现代，同时保持原有的功能结构和750px宽度限制。主色调将统一为#2196F3（蓝色系），近似色 blue-500

使用taro + nutui + vue3（setup） + unocss 编写页面。要求页面和设计稿宽750rpx, 单位直接使用rpx自适应。比如：class="text-[28rpx] w-[200rpx]"， 不要写在style 里面定义class,直接用unocss写法 ；组件使用view image text 等taro原生组件或nutui的组件，图标使用 import { IconFont } from '@nutui/icons-vue-taro'， 参考：<IconFont name="dongdong" size="24"></IconFont>。 图片使用网络可访问到的图片地址，超过2个的列表就使用v-for实现,下拉列表使用nut-picker, 按钮使用 nut-button, 表单使用nut-form等提示使用 Taro.showToast({title,icon})方法

1. **单位使用**：所有样式都使用 `rpx` 单位，直接在 UnoCSS 类名中定义，如 `text-[28rpx]`、`p-[24rpx]` 等，如果是 :class="active?'text-[#2196F3]':'text-[#fff]'" 这种动态类定义的样式，不会编译，样式不生效，就使用近似色，改为 :class="active?'text-blue-500':'text-white'"

2. **组件使用**：
   - 使用 Taro 原生组件：`view`、`image`、`text`
   - 使用 NutUI 组件：`nut-swiper`、`nut-button`、`nut-form`、`nut-picker` 等
   - 图标使用 `IconFont` 组件
   - nut-picker用法

```markdown
### NutUI Taro 单列 nut-picker 标准用法（Taro+Vue3）

#### 1. 选项数据
```ts
const industryOptions = ref([
  { text: '互联网', value: 'it' },
  { text: '制造业', value: 'manufacture' },
  // ... 其他选项
])
const industryValue = ref<string[]>(['']) // 必须是数组类型
const showIndustryPicker = ref(false)
```

#### 2. 组件模板
```vue
<view @click="showIndustryPicker = true">
  {{ getIndustryText(formData.industry) || '请选择您从事的行业' }}
</view>
<nut-popup v-model:visible="showIndustryPicker" position="bottom" round>
  <nut-picker
    v-model="industryValue"
    :columns="industryOptions"
    title="选择行业"
    @confirm="onIndustryConfirm"
  />
</nut-popup>
```

#### 3. 事件处理
```ts
function onIndustryConfirm() {
  showIndustryPicker.value = false
  formData.industry = industryValue.value[0] // 取第一个元素
}
function getIndustryText(val: string): string {
  const found = industryOptions.value.find(item => item.value === val)
  return found ? found.text : ''
}
```

#### 4. 说明
- columns 为一维数组，但 v-model 必须为数组类型（如 `ref<string[]>([''])`），这是 nutui-taro 4.x 的实际行为。
- 选中后取 `industryValue.value[0]` 作为最终值。
- 页面展示用 `getIndustryText(formData.industry)`。
```

3. **列表渲染**：超过 2 个的列表都使用 `v-for` 实现

4. **交互反馈**：使用 `Taro.showToast` 显示提示信息

5. **自适应布局**：页面宽度设置为 750rpx，所有尺寸都使用 rpx 单位实现自适应

6. **UnoCSS 使用**：所有样式都通过 class 定义，没有写在 style 标签内

根据上面要求把html改写成vue页面，直接返回改写后的vue文件代码


## 截屏
```
(function() {
    // 引入 html2canvas 库（通过 CDN）
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js';
    script.onload = function() {
        // 执行截图逻辑
        html2canvas(document.body, {
            scale: window.devicePixelRatio, // 提高分辨率
            useCORS: true, // 允许跨域图片
            backgroundColor: "#ffffff" // 设置背景色（避免透明）
        }).then(canvas => {
            // 转换为图片数据
            const dataUrl = canvas.toDataURL('image/png');
            
            // 创建下载链接
            const link = document.createElement('a');
            link.href = dataUrl;
            link.download = 'screenshot.png'; // 自定义文件名
            link.click(); // 触发下载
            
            // 释放内存
            URL.revokeObjectURL(dataUrl);
        }).catch(error => {
            console.error('截图失败:', error);
        });
    };
    document.head.appendChild(script);
})();
```




## 页面提示词



### 编写页面的详细要求
#### 1. 单位使用
所有的样式都要使用 `rpx` 单位，并且直接在 UnoCSS 的类名中进行定义。例如，设置字体大小可以使用 `text-[28rpx]`，设置内边距可以使用 `p-[24rpx]` 等。

如果遇到动态类定义样式，如 `:class="active?'text-[#2196F3]':'text-[#fff]'"`，这种写法在编译时可能会出现问题，导致样式不生效。此时，建议使用 UnoCSS 提供的近似色类名来替代，将其改为 `:class="active?'text-blue-500':'text-white'"`。

#### 2. 组件使用
- **Taro 原生组件**：在页面中可以使用 Taro 提供的原生组件，像 `view`、`image`、`text` 等。
- **NutUI 组件**：使用 NutUI 提供的各种组件，例如 `nut-swiper`、`nut-button`、`nut-form`、`nut-picker` 等。
- **图标组件**：图标使用 `IconFont` 组件，使用前需要先引入该组件：
```typescript
import { IconFont } from '@nutui/icons-vue-taro'
```
使用示例：`<IconFont  font-class-name="iconfont" class-prefix="icon" name="dongdong" size="24"></IconFont>`

- **nut-picker 组件用法示例**
```typescript
// 选项数据
const industryOptions = ref([
  { text: '互联网', value: 'it' },
  { text: '制造业', value: 'manufacture' },
  // 可根据实际情况添加其他选项
])
const industryValue = ref<string[]>(['']) // 必须是数组类型
const showIndustryPicker = ref(false)

// 事件处理
function onIndustryConfirm() {
  showIndustryPicker.value = false
  formData.industry = industryValue.value[0] // 取第一个元素
}

function getIndustryText(val: string): string {
  const found = industryOptions.value.find(item = item.value === val)
  return found ? found.text : ''
}
```

```vue
<template>
  <!-- 触发选择器的元素 -->
  <view @click="showIndustryPicker = true">
    {{ getIndustryText(formData.industry) || '请选择您从事的行业' }}
  </view>
  <!-- 弹出层 -->
  <nut-popup v-model:visible="showIndustryPicker" position="bottom" round>
    <nut-picker
      v-model="industryValue"
      :columns="industryOptions"
      title="选择行业"
      @confirm="onIndustryConfirm"
    />
  </nut-popup>
</template>
```

**说明**：
- `columns` 是一维数组，但 `v-model` 必须是数组类型，如 `ref<string[]>([''])`，这是 nutui-taro 4.x 的实际要求。
- 选中选项后，取 `industryValue.value[0]` 作为最终选中的值。
- 在页面上展示选中项的文本时，使用 `getIndustryText(formData.industry)`。

#### 3. 列表渲染
当需要渲染超过 2 个元素的列表时，都要使用 `v-for` 指令来实现。

#### 4. 交互反馈
使用 `Taro.showToast` 方法来显示提示信息，为用户提供交互反馈。

#### 5. 自适应布局
将页面的宽度设置为 750rpx，所有的尺寸都使用 rpx 单位，以此实现页面在不同设备上的自适应布局。

#### 6. UnoCSS 使用
所有的样式都要通过 class 属性来定义，避免将样式写在 `<style>` 标签内。