xto-fronted 0.1.0 → 0.1.1

package/src/views/system/user/index.vue

@@ -0,0 +1,327 @@
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import { Form, FormItem, Input, Select, Switch } from '@xto/form'
+import { Tag, Card, Pagination } from '@xto/data'
+import { Modal, Message, Popconfirm } from '@xto/feedback'
+import { Space, Button } from '@xto/base'
+import { Status, StatusOptions } from '@/enums'
+
+// 用户数据类型
+interface User {
+  id: number
+  username: string
+  nickname: string
+  email: string
+  phone: string
+  status: Status
+  roles: string[]
+  createTime: string
+}
+
+// Mock 数据
+const mockUsers: User[] = [
+  { id: 1, username: 'admin', nickname: '管理员', email: 'admin@example.com', phone: '13800138001', status: Status.ENABLED, roles: ['admin'], createTime: '2024-01-01 10:00:00' },
+  { id: 2, username: 'zhangsan', nickname: '张三', email: 'zhangsan@example.com', phone: '13800138002', status: Status.ENABLED, roles: ['editor'], createTime: '2024-01-02 10:00:00' },
+  { id: 3, username: 'lisi', nickname: '李四', email: 'lisi@example.com', phone: '13800138003', status: Status.DISABLED, roles: ['viewer'], createTime: '2024-01-03 10:00:00' },
+  { id: 4, username: 'wangwu', nickname: '王五', email: 'wangwu@example.com', phone: '13800138004', status: Status.ENABLED, roles: ['editor'], createTime: '2024-01-04 10:00:00' },
+  { id: 5, username: 'zhaoliu', nickname: '赵六', email: 'zhaoliu@example.com', phone: '13800138005', status: Status.ENABLED, roles: ['viewer'], createTime: '2024-01-05 10:00:00' }
+]
+
+const loading = ref(false)
+const userList = ref<User[]>([])
+const total = ref(0)
+const currentPage = ref(1)
+const pageSize = ref(10)
+
+// 搜索条件
+const searchForm = reactive({
+  keyword: '',
+  status: undefined as Status | undefined
+})
+
+// 弹窗
+const modalVisible = ref(false)
+const modalTitle = computed(() => formData.id ? '编辑用户' : '新增用户')
+const formData = reactive({
+  id: 0,
+  username: '',
+  nickname: '',
+  email: '',
+  phone: '',
+  status: Status.ENABLED,
+  roles: [] as string[]
+})
+
+const rules: Record<string, any[]> = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' }
+  ],
+  nickname: [
+    { required: true, message: '请输入昵称', trigger: 'blur' }
+  ],
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
+  ]
+}
+
+const formRef = ref()
+
+// 获取用户列表
+const getUserList = () => {
+  loading.value = true
+  setTimeout(() => {
+    let list = [...mockUsers]
+
+    // 搜索过滤
+    if (searchForm.keyword) {
+      list = list.filter(user =>
+        user.username.includes(searchForm.keyword) ||
+        user.nickname.includes(searchForm.keyword)
+      )
+    }
+    if (searchForm.status !== undefined) {
+      list = list.filter(user => user.status === searchForm.status)
+    }
+
+    total.value = list.length
+    userList.value = list.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
+    loading.value = false
+  }, 300)
+}
+
+// 搜索
+const handleSearch = () => {
+  currentPage.value = 1
+  getUserList()
+}
+
+// 重置
+const handleReset = () => {
+  searchForm.keyword = ''
+  searchForm.status = undefined
+  currentPage.value = 1
+  getUserList()
+}
+
+// 新增
+const handleAdd = () => {
+  Object.assign(formData, {
+    id: 0,
+    username: '',
+    nickname: '',
+    email: '',
+    phone: '',
+    status: Status.ENABLED,
+    roles: []
+  })
+  modalVisible.value = true
+}
+
+// 编辑
+const handleEdit = (row: User) => {
+  Object.assign(formData, row)
+  modalVisible.value = true
+}
+
+// 删除
+const handleDelete = (_id: number) => {
+  Message.success('删除成功')
+  getUserList()
+}
+
+// 提交
+const handleSubmit = async () => {
+  try {
+    await formRef.value?.validate()
+    Message.success(formData.id ? '编辑成功' : '新增成功')
+    modalVisible.value = false
+    getUserList()
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 状态切换
+const handleStatusChange = (row: User) => {
+  Message.success(`已${row.status === Status.ENABLED ? '启用' : '禁用'}用户 ${row.username}`)
+}
+
+onMounted(() => {
+  getUserList()
+})
+</script>
+
+<template>
+  <div class="user-page">
+    <!-- 搜索栏 -->
+    <Card class="search-card">
+      <Form :model="searchForm" inline>
+        <FormItem label="关键词">
+          <Input
+            v-model="searchForm.keyword"
+            placeholder="用户名/昵称"
+            clearable
+            @keyup.enter="handleSearch"
+          />
+        </FormItem>
+        <FormItem label="状态">
+          <Select
+            v-model="searchForm.status"
+            :options="StatusOptions"
+            placeholder="请选择"
+            clearable
+          />
+        </FormItem>
+        <FormItem>
+          <Space>
+            <Button type="primary" @click="handleSearch">搜索</Button>
+            <Button @click="handleReset">重置</Button>
+          </Space>
+        </FormItem>
+      </Form>
+    </Card>
+
+    <!-- 表格 -->
+    <Card class="table-card">
+      <!-- 工具栏 -->
+      <div class="toolbar">
+        <Button type="primary" @click="handleAdd">新增用户</Button>
+      </div>
+
+      <!-- 表格 -->
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>用户名</th>
+            <th>昵称</th>
+            <th>邮箱</th>
+            <th>手机号</th>
+            <th>角色</th>
+            <th>状态</th>
+            <th>创建时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="loading">
+            <td colspan="9" class="loading-cell">加载中...</td>
+          </tr>
+          <tr v-else-if="userList.length === 0">
+            <td colspan="9" class="empty-cell">暂无数据</td>
+          </tr>
+          <tr v-else v-for="row in userList" :key="row.id">
+            <td>{{ row.id }}</td>
+            <td>{{ row.username }}</td>
+            <td>{{ row.nickname }}</td>
+            <td>{{ row.email }}</td>
+            <td>{{ row.phone }}</td>
+            <td>
+              <Tag v-for="role in row.roles" :key="role" size="small">{{ role }}</Tag>
+            </td>
+            <td>
+              <Switch
+                :model-value="row.status === Status.ENABLED"
+                @update:model-value="row.status = $event ? Status.ENABLED : Status.DISABLED; handleStatusChange(row)"
+              />
+            </td>
+            <td>{{ row.createTime }}</td>
+            <td>
+              <Space>
+                <Button type="primary" link size="small" @click="handleEdit(row)">编辑</Button>
+                <Popconfirm title="确定删除该用户吗？" @confirm="handleDelete(row.id)">
+                  <Button type="danger" link size="small">删除</Button>
+                </Popconfirm>
+              </Space>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- 分页 -->
+      <div class="pagination-wrapper">
+        <Pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next"
+          @current-change="getUserList"
+          @size-change="getUserList"
+        />
+      </div>
+    </Card>
+
+    <!-- 编辑弹窗 -->
+    <Modal v-model="modalVisible" :title="modalTitle" width="500px">
+      <Form ref="formRef" :model="formData" :rules="rules" label-width="80px">
+        <FormItem label="用户名" prop="username">
+          <Input v-model="formData.username" placeholder="请输入用户名" />
+        </FormItem>
+        <FormItem label="昵称" prop="nickname">
+          <Input v-model="formData.nickname" placeholder="请输入昵称" />
+        </FormItem>
+        <FormItem label="邮箱" prop="email">
+          <Input v-model="formData.email" placeholder="请输入邮箱" />
+        </FormItem>
+        <FormItem label="手机号" prop="phone">
+          <Input v-model="formData.phone" placeholder="请输入手机号" />
+        </FormItem>
+        <FormItem label="状态">
+          <Switch v-model="formData.status" :active-value="Status.ENABLED" :inactive-value="Status.DISABLED" />
+        </FormItem>
+      </Form>
+      <template #footer>
+        <Space>
+          <Button @click="modalVisible = false">取消</Button>
+          <Button type="primary" @click="handleSubmit">确定</Button>
+        </Space>
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.user-page {
+  padding: 20px;
+
+  .search-card {
+    margin-bottom: 20px;
+  }
+
+  .toolbar {
+    margin-bottom: 15px;
+  }
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  th, td {
+    padding: 12px;
+    text-align: left;
+    border-bottom: 1px solid var(--color-border-lighter);
+  }
+
+  th {
+    font-weight: 500;
+    color: var(--color-text-regular);
+    background-color: var(--color-fill-light);
+  }
+
+  .loading-cell,
+  .empty-cell {
+    text-align: center;
+    color: var(--color-text-secondary);
+    padding: 40px;
+  }
+}
+
+.pagination-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+</style>

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "types": ["vite/client", "node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,139 @@
+import { defineConfig, loadEnv } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import dts from 'vite-plugin-dts'
+import { resolve } from 'path'
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+  const isLib = mode === 'lib'
+
+  return {
+    plugins: [
+      vue(),
+      ...(isLib ? [dts({ insertTypesEntry: true, outDir: 'dist' })] : [])
+    ],
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src'),
+        '@xto/core': resolve(__dirname, 'node_modules/@xto/core/es/index/index.mjs'),
+        '@xto/core/theme': resolve(__dirname, 'node_modules/@xto/core/es/theme/index.mjs'),
+        '@xto/core/hooks': resolve(__dirname, 'node_modules/@xto/core/es/hooks/index.mjs'),
+        '@xto/core/utils': resolve(__dirname, 'node_modules/@xto/core/es/utils/index.mjs'),
+        '@xto/base/es/style.css': resolve(__dirname, 'node_modules/@xto/base/es/style.css'),
+        '@xto/form/es/style.css': resolve(__dirname, 'node_modules/@xto/form/es/style.css'),
+        '@xto/data/es/style.css': resolve(__dirname, 'node_modules/@xto/data/es/style.css'),
+        '@xto/feedback/es/style.css': resolve(__dirname, 'node_modules/@xto/feedback/es/style.css'),
+        '@xto/navigation/es/style.css': resolve(__dirname, 'node_modules/@xto/navigation/es/style.css'),
+        '@xto/layout/es/style.css': resolve(__dirname, 'node_modules/@xto/layout/es/style.css'),
+        '@xto/business/es/style.css': resolve(__dirname, 'node_modules/@xto/business/es/style.css'),
+      }
+    },
+    // 开发模式优化
+    optimizeDeps: {
+      include: [
+        'vue',
+        'vue-router',
+        'pinia',
+        'axios'
+      ],
+      exclude: [
+        '@xto/core',
+        '@xto/base',
+        '@xto/form',
+        '@xto/data',
+        '@xto/feedback',
+        '@xto/navigation',
+        '@xto/layout',
+        '@xto/business'
+      ]
+    },
+    server: {
+      host: '0.0.0.0',
+      port: 3000,
+      open: true,
+      proxy: {
+        '/api': {
+          target: env.VITE_API_BASE_URL || 'http://localhost:8080',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, '')
+        }
+      }
+    },
+    build: {
+      outDir: 'dist',
+      sourcemap: false,
+      chunkSizeWarningLimit: 1500,
+      // 库模式配置
+      lib: isLib ? {
+        entry: resolve(__dirname, 'src/index.ts'),
+        name: 'XtoFronted',
+        fileName: (format: string) => `index.${format === 'es' ? 'es.js' : 'umd.js'}`
+      } : undefined,
+      rollupOptions: {
+        // 库模式下排除外部依赖
+        external: isLib ? [
+          'vue',
+          'vue-router',
+          'pinia',
+          'axios',
+          /^@xto\//
+        ] : undefined,
+        output: isLib ? {
+          globals: {
+            vue: 'Vue',
+            'vue-router': 'VueRouter',
+            pinia: 'Pinia',
+            axios: 'axios'
+          },
+          exports: 'named'
+        } : {
+          manualChunks(id) {
+            // Vue 全家桶单独打包
+            if (id.includes('node_modules/vue/') ||
+                id.includes('node_modules/@vue/') ||
+                id.includes('node_modules/vue-router/') ||
+                id.includes('node_modules/pinia/')) {
+              return 'vue-vendor'
+            }
+            // 组件库按包分割，实现按需加载
+            if (id.includes('@xto/core')) {
+              return 'xto-core'
+            }
+            if (id.includes('@xto/base')) {
+              return 'xto-base'
+            }
+            if (id.includes('@xto/form')) {
+              return 'xto-form'
+            }
+            if (id.includes('@xto/data')) {
+              return 'xto-data'
+            }
+            if (id.includes('@xto/feedback')) {
+              return 'xto-feedback'
+            }
+            if (id.includes('@xto/navigation')) {
+              return 'xto-navigation'
+            }
+            if (id.includes('@xto/layout')) {
+              return 'xto-layout'
+            }
+            if (id.includes('@xto/business')) {
+              return 'xto-business'
+            }
+            // 其他第三方库
+            if (id.includes('node_modules/')) {
+              return 'vendor'
+            }
+          }
+        }
+      }
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler'
+        }
+      }
+    }
+  }
+})