# 通过npm安装
npm install frappe-ui

# 或者在Vue项目中直接引入
import { createApp } from 'vue'
import FrappeUI from 'frappe-ui'
import App from './App.vue'

const app = createApp(App)
app.use(FrappeUI)
app.mount('#app')

<template>
  <div>
    <Card title="用户列表">
      <TextInput
        v-model="searchQuery"
        placeholder="搜索用户..."
       
      />
      
      <Table
        :columns="columns"
        :data="filteredUsers"
        :row-click="handleRowClick"
      >
        <template #avatar-column="{ row }">
          <Avatar :name="row.name" :image="row.avatar" />
        </template>
        
        <template #actions-column="{ row }">
          <Button variant="ghost" @click="editUser(row)">
            编辑
          </Button>
          <Button variant="ghost" @click="deleteUser(row)">
            删除
          </Button>
        </template>
      </Table>
      
      <div>
        <Button @click="showAddDialog = true">
          添加用户
        </Button>
        <Pagination
          :total="totalUsers"
          :page-size="pageSize"
          @change="handlePageChange"
        />
      </div>
    </Card>
    
    <Dialog v-model="showAddDialog" title="添加用户">
      <UserForm @submit="handleAddUser" />
    </Dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  Card,
  TextInput,
  Table,
  Avatar,
  Button,
  Pagination,
  Dialog
} from 'frappe-ui'

const searchQuery = ref('')
const users = ref([])
const showAddDialog = ref(false)

const filteredUsers = computed(() => {
  return users.value.filter(user => 
    user.name.includes(searchQuery.value) ||
    user.email.includes(searchQuery.value)
  )
})

const columns = [
  { label: '头像', key: 'avatar', width: '80px' },
  { label: '姓名', key: 'name', width: '200px' },
  { label: '邮箱', key: 'email' },
  { label: '角色', key: 'role', width: '150px' },
  { label: '操作', key: 'actions', width: '200px' }
]

// 业务逻辑...
</script>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          600: '#0284c7'
        }
      }
    }
  }
}