xto-fronted 0.1.1 → 0.1.2

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

@@ -1,327 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-{
-  "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

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

package/vite.config.ts

@@ -1,139 +0,0 @@
-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'
-        }
-      }
-    }
-  }
-})