xto-fronted 0.1.1 → 0.1.2

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

@@ -1,381 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
-import { Form, FormItem, Input, Select, Switch, InputNumber } from '@xto/form'
-import { Card, Tag } from '@xto/data'
-import { Modal, Message } from '@xto/feedback'
-import { Space, Button } from '@xto/base'
-import { MenuType, MenuTypeOptions, Status } from '@/enums'
-
-// 菜单数据类型
-interface Menu {
-  id: number
-  parentId: number | null
-  name: string
-  path: string
-  component: string
-  redirect: string
-  icon: string
-  title: string
-  type: MenuType
-  sort: number
-  status: Status
-  hidden: boolean
-  keepAlive: boolean
-  children?: Menu[]
-}
-
-// Mock 数据
-const mockMenus: Menu[] = [
-  {
-    id: 1,
-    parentId: null,
-    name: 'Dashboard',
-    path: '/dashboard',
-    component: 'dashboard/index',
-    redirect: '',
-    icon: 'dashboard',
-    title: '仪表盘',
-    type: MenuType.MENU,
-    sort: 1,
-    status: Status.ENABLED,
-    hidden: false,
-    keepAlive: true
-  },
-  {
-    id: 2,
-    parentId: null,
-    name: 'System',
-    path: '/system',
-    component: '',
-    redirect: '/system/user',
-    icon: 'setting',
-    title: '系统管理',
-    type: MenuType.DIRECTORY,
-    sort: 2,
-    status: Status.ENABLED,
-    hidden: false,
-    keepAlive: false,
-    children: [
-      {
-        id: 21,
-        parentId: 2,
-        name: 'SystemUser',
-        path: '/system/user',
-        component: 'system/user/index',
-        redirect: '',
-        icon: 'user',
-        title: '用户管理',
-        type: MenuType.MENU,
-        sort: 1,
-        status: Status.ENABLED,
-        hidden: false,
-        keepAlive: true
-      },
-      {
-        id: 22,
-        parentId: 2,
-        name: 'SystemRole',
-        path: '/system/role',
-        component: 'system/role/index',
-        redirect: '',
-        icon: 'role',
-        title: '角色管理',
-        type: MenuType.MENU,
-        sort: 2,
-        status: Status.ENABLED,
-        hidden: false,
-        keepAlive: true
-      },
-      {
-        id: 23,
-        parentId: 2,
-        name: 'SystemMenu',
-        path: '/system/menu',
-        component: 'system/menu/index',
-        redirect: '',
-        icon: 'menu',
-        title: '菜单管理',
-        type: MenuType.MENU,
-        sort: 3,
-        status: Status.ENABLED,
-        hidden: false,
-        keepAlive: true
-      }
-    ]
-  }
-]
-
-const loading = ref(false)
-const menuList = ref<Menu[]>([])
-
-// 弹窗
-const modalVisible = ref(false)
-const modalTitle = computed(() => formData.id ? '编辑菜单' : '新增菜单')
-const formData = reactive({
-  id: 0,
-  parentId: null as number | null,
-  name: '',
-  path: '',
-  component: '',
-  redirect: '',
-  icon: '',
-  title: '',
-  type: MenuType.MENU,
-  sort: 0,
-  status: Status.ENABLED,
-  hidden: false,
-  keepAlive: true
-})
-
-const rules: Record<string, any[]> = {
-  name: [
-    { required: true, message: '请输入菜单名称', trigger: 'blur' }
-  ],
-  path: [
-    { required: true, message: '请输入路由路径', trigger: 'blur' }
-  ],
-  title: [
-    { required: true, message: '请输入菜单标题', trigger: 'blur' }
-  ]
-}
-
-const formRef = ref()
-
-// 获取菜单列表
-const getMenuList = () => {
-  loading.value = true
-  setTimeout(() => {
-    menuList.value = mockMenus
-    loading.value = false
-  }, 300)
-}
-
-// 新增
-const handleAdd = (parentId: number | null = null) => {
-  Object.assign(formData, {
-    id: 0,
-    parentId,
-    name: '',
-    path: '',
-    component: '',
-    redirect: '',
-    icon: '',
-    title: '',
-    type: MenuType.MENU,
-    sort: 0,
-    status: Status.ENABLED,
-    hidden: false,
-    keepAlive: true
-  })
-  modalVisible.value = true
-}
-
-// 编辑
-const handleEdit = (node: Menu) => {
-  Object.assign(formData, node)
-  modalVisible.value = true
-}
-
-// 提交
-const handleSubmit = async () => {
-  try {
-    await formRef.value?.validate()
-    Message.success(formData.id ? '编辑成功' : '新增成功')
-    modalVisible.value = false
-    getMenuList()
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-// 菜单图标
-const getMenuIcon = (icon?: string) => {
-  const iconMap: Record<string, string> = {
-    dashboard: '📊',
-    system: '⚙️',
-    user: '👤',
-    role: '👥',
-    menu: '📋',
-    setting: '🔧'
-  }
-  return iconMap[icon || ''] || '📄'
-}
-
-onMounted(() => {
-  getMenuList()
-})
-</script>
-
-<template>
-  <div class="menu-page">
-    <Card class="menu-card">
-      <!-- 工具栏 -->
-      <div class="toolbar">
-        <Button type="primary" @click="handleAdd()">新增菜单</Button>
-      </div>
-
-      <!-- 菜单树 -->
-      <div class="menu-tree">
-        <table class="tree-table">
-          <thead>
-            <tr>
-              <th>菜单名称</th>
-              <th>图标</th>
-              <th>路由路径</th>
-              <th>类型</th>
-              <th>排序</th>
-              <th>状态</th>
-              <th>操作</th>
-            </tr>
-          </thead>
-          <tbody>
-            <template v-for="menu in menuList" :key="menu.id">
-              <tr class="tree-row tree-row--level-0">
-                <td>
-                  <span class="menu-name" @click="handleEdit(menu)">{{ menu.title }}</span>
-                </td>
-                <td>{{ getMenuIcon(menu.icon) }}</td>
-                <td>{{ menu.path }}</td>
-                <td>
-                  <Tag :type="menu.type === MenuType.DIRECTORY ? 'primary' : menu.type === MenuType.MENU ? 'success' : 'warning'" size="small">
-                    {{ menu.type === MenuType.DIRECTORY ? '目录' : menu.type === MenuType.MENU ? '菜单' : '按钮' }}
-                  </Tag>
-                </td>
-                <td>{{ menu.sort }}</td>
-                <td>
-                  <Tag :type="menu.status === Status.ENABLED ? 'success' : 'danger'" size="small">
-                    {{ menu.status === Status.ENABLED ? '启用' : '禁用' }}
-                  </Tag>
-                </td>
-                <td>
-                  <Space>
-                    <Button type="primary" link size="small" @click="handleAdd(menu.id)">新增</Button>
-                    <Button type="primary" link size="small" @click="handleEdit(menu)">编辑</Button>
-                  </Space>
-                </td>
-              </tr>
-              <template v-if="menu.children" v-for="child in menu.children" :key="child.id">
-                <tr class="tree-row tree-row--level-1">
-                  <td>
-                    <span class="tree-indent"></span>
-                    <span class="menu-name" @click="handleEdit(child)">{{ child.title }}</span>
-                  </td>
-                  <td>{{ getMenuIcon(child.icon) }}</td>
-                  <td>{{ child.path }}</td>
-                  <td>
-                    <Tag :type="child.type === MenuType.DIRECTORY ? 'primary' : child.type === MenuType.MENU ? 'success' : 'warning'" size="small">
-                      {{ child.type === MenuType.DIRECTORY ? '目录' : child.type === MenuType.MENU ? '菜单' : '按钮' }}
-                    </Tag>
-                  </td>
-                  <td>{{ child.sort }}</td>
-                  <td>
-                    <Tag :type="child.status === Status.ENABLED ? 'success' : 'danger'" size="small">
-                      {{ child.status === Status.ENABLED ? '启用' : '禁用' }}
-                    </Tag>
-                  </td>
-                  <td>
-                    <Space>
-                      <Button type="primary" link size="small" @click="handleEdit(child)">编辑</Button>
-                    </Space>
-                  </td>
-                </tr>
-              </template>
-            </template>
-          </tbody>
-        </table>
-      </div>
-    </Card>
-
-    <!-- 编辑弹窗 -->
-    <Modal v-model="modalVisible" :title="modalTitle" width="600px">
-      <Form ref="formRef" :model="formData" :rules="rules" label-width="80px">
-        <FormItem label="上级菜单">
-          <Input v-model="formData.parentId" placeholder="上级菜单ID" disabled />
-        </FormItem>
-        <FormItem label="菜单类型">
-          <Select v-model="formData.type" :options="MenuTypeOptions" />
-        </FormItem>
-        <FormItem label="菜单名称" prop="name">
-          <Input v-model="formData.name" placeholder="请输入菜单名称（路由name）" />
-        </FormItem>
-        <FormItem label="菜单标题" prop="title">
-          <Input v-model="formData.title" placeholder="请输入菜单标题" />
-        </FormItem>
-        <FormItem label="路由路径" prop="path">
-          <Input v-model="formData.path" placeholder="请输入路由路径" />
-        </FormItem>
-        <FormItem label="组件路径">
-          <Input v-model="formData.component" placeholder="请输入组件路径" />
-        </FormItem>
-        <FormItem label="图标">
-          <Input v-model="formData.icon" placeholder="请输入图标名称" />
-        </FormItem>
-        <FormItem label="排序">
-          <InputNumber v-model="formData.sort" :min="0" />
-        </FormItem>
-        <FormItem label="状态">
-          <Switch v-model="formData.status" :active-value="Status.ENABLED" :inactive-value="Status.DISABLED" />
-        </FormItem>
-        <FormItem label="隐藏">
-          <Switch v-model="formData.hidden" />
-        </FormItem>
-        <FormItem label="缓存">
-          <Switch v-model="formData.keepAlive" />
-        </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>
-.menu-page {
-  padding: 20px;
-
-  .toolbar {
-    margin-bottom: 15px;
-  }
-}
-
-.tree-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);
-  }
-
-  .tree-row--level-1 {
-    td:first-child {
-      padding-left: 30px;
-    }
-  }
-}
-
-.tree-indent {
-  display: inline-block;
-  width: 20px;
-}
-
-.menu-name {
-  cursor: pointer;
-  color: var(--color-primary);
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-</style>

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

@@ -1,304 +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 Role {
-  id: number
-  name: string
-  code: string
-  description: string
-  status: Status
-  permissions: string[]
-  createTime: string
-}
-
-// Mock 数据
-const mockRoles: Role[] = [
-  { id: 1, name: '超级管理员', code: 'admin', description: '拥有所有权限', status: Status.ENABLED, permissions: ['*'], createTime: '2024-01-01 10:00:00' },
-  { id: 2, name: '编辑', code: 'editor', description: '内容编辑权限', status: Status.ENABLED, permissions: ['user:read', 'user:write'], createTime: '2024-01-02 10:00:00' },
-  { id: 3, name: '访客', code: 'viewer', description: '只读权限', status: Status.ENABLED, permissions: ['user:read'], createTime: '2024-01-03 10:00:00' }
-]
-
-const loading = ref(false)
-const roleList = ref<Role[]>([])
-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,
-  name: '',
-  code: '',
-  description: '',
-  status: Status.ENABLED,
-  permissions: [] as string[]
-})
-
-const rules: Record<string, any[]> = {
-  name: [
-    { required: true, message: '请输入角色名称', trigger: 'blur' }
-  ],
-  code: [
-    { required: true, message: '请输入角色编码', trigger: 'blur' }
-  ]
-}
-
-const formRef = ref()
-
-// 获取角色列表
-const getRoleList = () => {
-  loading.value = true
-  setTimeout(() => {
-    let list = [...mockRoles]
-
-    if (searchForm.keyword) {
-      list = list.filter(role =>
-        role.name.includes(searchForm.keyword) ||
-        role.code.includes(searchForm.keyword)
-      )
-    }
-    if (searchForm.status !== undefined) {
-      list = list.filter(role => role.status === searchForm.status)
-    }
-
-    total.value = list.length
-    roleList.value = list.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
-    loading.value = false
-  }, 300)
-}
-
-// 搜索
-const handleSearch = () => {
-  currentPage.value = 1
-  getRoleList()
-}
-
-// 重置
-const handleReset = () => {
-  searchForm.keyword = ''
-  searchForm.status = undefined
-  currentPage.value = 1
-  getRoleList()
-}
-
-// 新增
-const handleAdd = () => {
-  Object.assign(formData, {
-    id: 0,
-    name: '',
-    code: '',
-    description: '',
-    status: Status.ENABLED,
-    permissions: []
-  })
-  modalVisible.value = true
-}
-
-// 编辑
-const handleEdit = (row: Role) => {
-  Object.assign(formData, row)
-  modalVisible.value = true
-}
-
-// 删除
-const handleDelete = (_id: number) => {
-  Message.success('删除成功')
-  getRoleList()
-}
-
-// 提交
-const handleSubmit = async () => {
-  try {
-    await formRef.value?.validate()
-    Message.success(formData.id ? '编辑成功' : '新增成功')
-    modalVisible.value = false
-    getRoleList()
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-onMounted(() => {
-  getRoleList()
-})
-</script>
-
-<template>
-  <div class="role-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>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-if="loading">
-            <td colspan="7" class="loading-cell">加载中...</td>
-          </tr>
-          <tr v-else-if="roleList.length === 0">
-            <td colspan="7" class="empty-cell">暂无数据</td>
-          </tr>
-          <tr v-else v-for="row in roleList" :key="row.id">
-            <td>{{ row.id }}</td>
-            <td>{{ row.name }}</td>
-            <td>
-              <Tag type="primary" size="small">{{ row.code }}</Tag>
-            </td>
-            <td>{{ row.description }}</td>
-            <td>
-              <Tag :type="row.status === Status.ENABLED ? 'success' : 'danger'" size="small">
-                {{ row.status === Status.ENABLED ? '启用' : '禁用' }}
-              </Tag>
-            </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="getRoleList"
-          @size-change="getRoleList"
-        />
-      </div>
-    </Card>
-
-    <!-- 编辑弹窗 -->
-    <Modal v-model="modalVisible" :title="modalTitle" width="500px">
-      <Form ref="formRef" :model="formData" :rules="rules" label-width="80px">
-        <FormItem label="角色名称" prop="name">
-          <Input v-model="formData.name" placeholder="请输入角色名称" />
-        </FormItem>
-        <FormItem label="角色编码" prop="code">
-          <Input v-model="formData.code" placeholder="请输入角色编码" />
-        </FormItem>
-        <FormItem label="描述">
-          <Input v-model="formData.description" 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>
-.role-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>