xto-fronted 0.2.6 → 0.2.7

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

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

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