xto-fronted 0.2.5 → 0.2.7

package/src/views/dashboard/index.vue

@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Card, Tag, Progress } from '@xto/data'
+
+const stats = ref([
+  { title: '用户总数', value: 1234, icon: '👥', color: '#409eff' },
+  { title: '今日访问', value: 567, icon: '👀', color: '#67c23a' },
+  { title: '订单数量', value: 890, icon: '📦', color: '#e6a23c' },
+  { title: '销售金额', value: 123456, icon: '💰', color: '#f56c6c' }
+])
+
+const activities = ref([
+  { user: '张三', action: '登录系统', time: '2分钟前', type: 'success' },
+  { user: '李四', action: '修改了用户信息', time: '5分钟前', type: 'warning' },
+  { user: '王五', action: '创建了新订单', time: '10分钟前', type: 'info' },
+  { user: '赵六', action: '删除了测试数据', time: '30分钟前', type: 'danger' },
+  { user: '钱七', action: '更新了系统配置', time: '1小时前', type: 'primary' }
+])
+
+const quickLinks = ref([
+  { title: '用户管理', path: '/system/user', icon: '👤' },
+  { title: '角色管理', path: '/system/role', icon: '👥' },
+  { title: '菜单管理', path: '/system/menu', icon: '📋' },
+  { title: '系统设置', path: '/system', icon: '⚙️' }
+])
+</script>
+
+<template>
+  <div class="dashboard">
+    <!-- 统计卡片 -->
+    <div class="dashboard__stats">
+      <Card v-for="stat in stats" :key="stat.title" class="stat-card">
+        <div class="stat-card__content">
+          <div class="stat-card__icon" :style="{ backgroundColor: stat.color + '20' }">
+            {{ stat.icon }}
+          </div>
+          <div class="stat-card__info">
+            <div class="stat-card__title">{{ stat.title }}</div>
+            <div class="stat-card__value" :style="{ color: stat.color }">
+              {{ stat.value.toLocaleString() }}
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+
+    <!-- 主体内容 -->
+    <div class="dashboard__main">
+      <!-- 快捷入口 -->
+      <Card class="dashboard__quick">
+        <template #header>
+          <span class="card-title">快捷入口</span>
+        </template>
+        <div class="quick-links">
+          <router-link
+            v-for="link in quickLinks"
+            :key="link.path"
+            :to="link.path"
+            class="quick-link"
+          >
+            <span class="quick-link__icon">{{ link.icon }}</span>
+            <span class="quick-link__title">{{ link.title }}</span>
+          </router-link>
+        </div>
+      </Card>
+
+      <!-- 最近活动 -->
+      <Card class="dashboard__activity">
+        <template #header>
+          <span class="card-title">最近活动</span>
+        </template>
+        <div class="activity-list">
+          <div v-for="(activity, index) in activities" :key="index" class="activity-item">
+            <Tag :type="activity.type as any" size="small">{{ activity.user }}</Tag>
+            <span class="activity-item__action">{{ activity.action }}</span>
+            <span class="activity-item__time">{{ activity.time }}</span>
+          </div>
+        </div>
+      </Card>
+    </div>
+
+    <!-- 系统信息 -->
+    <Card class="dashboard__system">
+      <template #header>
+        <span class="card-title">系统信息</span>
+      </template>
+      <div class="system-info">
+        <div class="system-info__item">
+          <span class="system-info__label">系统版本</span>
+          <span class="system-info__value">v1.0.0</span>
+        </div>
+        <div class="system-info__item">
+          <span class="system-info__label">Vue 版本</span>
+          <span class="system-info__value">3.4.21</span>
+        </div>
+        <div class="system-info__item">
+          <span class="system-info__label">构建工具</span>
+          <span class="system-info__value">Vite 5</span>
+        </div>
+        <div class="system-info__item">
+          <span class="system-info__label">UI 组件库</span>
+          <span class="system-info__value">xto</span>
+        </div>
+        <div class="system-info__item">
+          <span class="system-info__label">服务器状态</span>
+          <Progress :percentage="75" status="success" />
+        </div>
+        <div class="system-info__item">
+          <span class="system-info__label">内存使用</span>
+          <Progress :percentage="45" />
+        </div>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.dashboard {
+  padding: 20px;
+
+  &__stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    margin-bottom: 20px;
+
+    @media (max-width: 1200px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &__main {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    margin-bottom: 20px;
+
+    @media (max-width: 992px) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &__quick,
+  &__activity {
+    min-height: 300px;
+  }
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.stat-card {
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+
+  &__icon {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    border-radius: var(--border-radius-base);
+  }
+
+  &__info {
+    flex: 1;
+  }
+
+  &__title {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    margin-bottom: 5px;
+  }
+
+  &__value {
+    font-size: 24px;
+    font-weight: 600;
+  }
+}
+
+.quick-links {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 15px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.quick-link {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  border-radius: var(--border-radius-base);
+  background-color: var(--color-fill);
+  text-decoration: none;
+  transition: all var(--transition-duration-fast);
+
+  &:hover {
+    background-color: var(--color-primary-light-9);
+    transform: translateY(-2px);
+  }
+
+  &__icon {
+    font-size: 28px;
+    margin-bottom: 10px;
+  }
+
+  &__title {
+    font-size: 14px;
+    color: var(--color-text-primary);
+  }
+}
+
+.activity-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.activity-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid var(--color-border-lighter);
+
+  &:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+
+  &__action {
+    flex: 1;
+    font-size: 14px;
+    color: var(--color-text-regular);
+  }
+
+  &__time {
+    font-size: 12px;
+    color: var(--color-text-placeholder);
+  }
+}
+
+.system-info {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  &__label {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    min-width: 80px;
+  }
+
+  &__value {
+    font-size: 14px;
+    color: var(--color-text-primary);
+  }
+}
+</style>

package/src/views/error/403.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { Button } from '@xto/base'
+
+const router = useRouter()
+
+const goBack = () => {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="error-page">
+    <div class="error-page__content">
+      <div class="error-page__code">403</div>
+      <div class="error-page__title">无访问权限</div>
+      <div class="error-page__desc">抱歉，您没有权限访问此页面</div>
+      <Button type="primary" @click="goBack">返回首页</Button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.error-page {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-color-page);
+
+  &__content {
+    text-align: center;
+  }
+
+  &__code {
+    font-size: 120px;
+    font-weight: 600;
+    color: var(--color-warning);
+    line-height: 1;
+    margin-bottom: 20px;
+  }
+
+  &__title {
+    font-size: 24px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    margin-bottom: 10px;
+  }
+
+  &__desc {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    margin-bottom: 30px;
+  }
+}
+</style>

package/src/views/error/404.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { Button } from '@xto/base'
+
+const router = useRouter()
+
+const goBack = () => {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="error-page">
+    <div class="error-page__content">
+      <div class="error-page__code">404</div>
+      <div class="error-page__title">页面不存在</div>
+      <div class="error-page__desc">抱歉，您访问的页面不存在或已被删除</div>
+      <Button type="primary" @click="goBack">返回首页</Button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.error-page {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-color-page);
+
+  &__content {
+    text-align: center;
+  }
+
+  &__code {
+    font-size: 120px;
+    font-weight: 600;
+    color: var(--color-primary);
+    line-height: 1;
+    margin-bottom: 20px;
+  }
+
+  &__title {
+    font-size: 24px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    margin-bottom: 10px;
+  }
+
+  &__desc {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    margin-bottom: 30px;
+  }
+}
+</style>

package/src/views/login/index.vue

@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { Button } from '@xto/base'
+import { Form, FormItem, Input, Checkbox } from '@xto/form'
+import { Message } from '@xto/feedback'
+import { useAuthStore } from '@/stores/auth'
+import { useUserStore } from '@/stores/user'
+import { useMenuStore } from '@/stores/menu'
+
+const router = useRouter()
+const authStore = useAuthStore()
+const userStore = useUserStore()
+const menuStore = useMenuStore()
+
+const loading = ref(false)
+const rememberMe = ref(false)
+
+const formData = reactive({
+  username: 'admin',
+  password: '123456'
+})
+
+const rules: Record<string, any[]> = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, message: '密码长度至少6位', trigger: 'blur' }
+  ]
+}
+
+const formRef = ref()
+
+// 登录
+const handleLogin = async () => {
+  try {
+    await formRef.value?.validate()
+    loading.value = true
+
+    // Mock 登录
+    setTimeout(() => {
+      // 设置 token
+      authStore.login({
+        token: 'mock_token_' + Date.now(),
+        refreshToken: 'mock_refresh_token',
+        expireTime: Date.now() + 7 * 24 * 60 * 60 * 1000
+      })
+
+      // 设置用户信息
+      userStore.setUserInfo({
+        id: 1,
+        username: formData.username,
+        nickname: '管理员',
+        avatar: '',
+        email: 'admin@example.com',
+        phone: '13800138000',
+        status: 1,
+        roles: ['admin'],
+        permissions: ['*'],
+        createTime: new Date().toISOString()
+      })
+
+      // 设置菜单
+      menuStore.setMenuList([
+        {
+          id: 1,
+          name: 'Dashboard',
+          path: '/dashboard',
+          component: 'dashboard/index',
+          icon: 'dashboard',
+          title: '仪表盘',
+          keepAlive: true,
+          affix: true
+        },
+        {
+          id: 2,
+          name: 'System',
+          path: '/system',
+          redirect: '/system/user',
+          icon: 'setting',
+          title: '系统管理',
+          children: [
+            {
+              id: 21,
+              name: 'SystemUser',
+              path: '/system/user',
+              component: 'system/user/index',
+              icon: 'user',
+              title: '用户管理',
+              keepAlive: true
+            },
+            {
+              id: 22,
+              name: 'SystemRole',
+              path: '/system/role',
+              component: 'system/role/index',
+              icon: 'role',
+              title: '角色管理',
+              keepAlive: true
+            },
+            {
+              id: 23,
+              name: 'SystemMenu',
+              path: '/system/menu',
+              component: 'system/menu/index',
+              icon: 'menu',
+              title: '菜单管理',
+              keepAlive: true
+            }
+          ]
+        }
+      ])
+
+      Message.success('登录成功')
+      router.push('/')
+      loading.value = false
+    }, 1000)
+  } catch (error) {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="login">
+    <div class="login__container">
+      <div class="login__header">
+        <img src="/vite.svg" alt="Logo" class="login__logo" />
+        <h1 class="login__title">Xto Demo</h1>
+        <p class="login__subtitle">后台管理系统</p>
+      </div>
+
+      <Form
+        ref="formRef"
+        :model="formData"
+        :rules="rules"
+        class="login__form"
+        label-width="0"
+      >
+        <FormItem prop="username">
+          <Input
+            v-model="formData.username"
+            placeholder="用户名"
+            prefix-icon="👤"
+            size="large"
+          />
+        </FormItem>
+
+        <FormItem prop="password">
+          <Input
+            v-model="formData.password"
+            type="password"
+            placeholder="密码"
+            prefix-icon="🔒"
+            size="large"
+            show-password
+            @keyup.enter="handleLogin"
+          />
+        </FormItem>
+
+        <FormItem>
+          <Checkbox v-model="rememberMe">记住我</Checkbox>
+        </FormItem>
+
+        <FormItem>
+          <Button
+            type="primary"
+            size="large"
+            :loading="loading"
+            class="login__submit"
+            @click="handleLogin"
+          >
+            登录
+          </Button>
+        </FormItem>
+      </Form>
+
+      <div class="login__footer">
+        <p>提示: 任意用户名密码即可登录 (Mock 模式)</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.login {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 15%;
+  background: linear-gradient(135deg, var(--color-primary-light-9) 0%, var(--color-primary-light-7) 100%);
+
+  &__container {
+    width: 400px;
+    padding: 40px;
+    background-color: var(--bg-color);
+    border-radius: var(--border-radius-large);
+    box-shadow: var(--box-shadow-dark);
+  }
+
+  &__header {
+    text-align: center;
+    margin-bottom: 30px;
+  }
+
+  &__logo {
+    width: 60px;
+    height: 60px;
+  }
+
+  &__title {
+    font-size: 28px;
+    font-weight: 600;
+    color: var(--color-primary);
+    margin: 15px 0 5px;
+  }
+
+  &__subtitle {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+  }
+
+  &__form {
+    :deep(.t-form-item) {
+      margin-bottom: 20px;
+    }
+
+    :deep(.x-input__prefix) {
+      margin-right: 8px;
+    }
+  }
+
+  &__submit {
+    width: 100%;
+  }
+
+  &__footer {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 12px;
+    color: var(--color-text-placeholder);
+  }
+}
+</style>