Skyline-Vue-Admin 组件库

十分钟搭建一个完整的后台管理应用。

一个前端框架，用于在 REST 之上构建在浏览器中运行的单页应用程序，使用 TypeScript、Vue3 和 Element Plus 。

快速入门

列表

<template>
  <SkyList :filter="UserFilter">
    <SkyDataTable>
      <SkyDataTableCol source="username" :label="t('$.user.list.username')" />
      <SkyDataTableCol label="姓名">
        <TextField source="name" />
      </SkyDataTableCol>
      <SkyDataTableCol source="phone" label="手机号" />
      <SkyDataTableCol source="email" label="邮箱" />
      <SkyDataTableCol label="头像">
        <SkyObjectField source="avatar">
            <AvatarField source="path" />
        </SkyObjectField>
      </SkyDataTableCol>
      <SkyDataTableCol label="角色">
        <SkyArrayField source="roles">
            <TextField source="name" />
        </SkyArrayField>
      </SkyDataTableCol>
      <SkyDataTableCol label="创建时间">
        <DateField source="createdAt" />
      </SkyDataTableCol>
      <SkyDataTableCol label="操作">
        <SkyShowButton />
        <SkyEditButton />
      </SkyDataTableCol>
    </SkyDataTable>
  </SkyList>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import DateField from '~/components/fields/date-field.vue'
import UserFilter from './UserFilter.vue'
const { t } = useI18n()
</script>

<style scoped lang="scss"></style>

详情

<template>
  <SkyShow>
    <SkyShowSimpleLayout>
      <SkyTextField source="username" :label="t('$.user.username')" />
      <DateField source="createdAt" label="创建时间" />
      <SkyArrayField class="flex gap-2 flex-wrap" source="roles" label="角色">
        <SkyLinkField source="name" data-key="id" resource="role" />
      </SkyArrayField>
    </SkyShowSimpleLayout>
  </SkyShow>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import DateField from '~/components/fields/date-field.vue'
const { t } = useI18n()
</script>

<style scoped></style>