xto-fronted 0.4.71 → 0.4.73

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

@@ -1,7 +1,7 @@
 <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 { Tag, Pagination } from '@xto/data'
 import { Modal, Message, Popconfirm } from '@xto/feedback'
 import { Space, Button } from '@xto/base'
 import { Status, StatusOptions } from '@/enums'
@@ -155,8 +155,8 @@ onMounted(() => {
 <template>
   <div class="user-page">
     <!-- 搜索栏 -->
-    <Card class="search-card">
-      <Form :model="searchForm" inline>
+    <div class="search-section">
+      <Form :model="searchForm" inline class="search-form">
         <FormItem label="关键词">
           <Input
             v-model="searchForm.keyword"
@@ -175,69 +175,158 @@ onMounted(() => {
         </FormItem>
         <FormItem>
           <Space>
-            <Button type="primary" @click="handleSearch">搜索</Button>
-            <Button @click="handleReset">重置</Button>
+            <Button type="primary" @click="handleSearch">
+              <template #icon>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <circle cx="11" cy="11" r="8"/>
+                  <path d="M21 21l-4.35-4.35"/>
+                </svg>
+              </template>
+              搜索
+            </Button>
+            <Button @click="handleReset">
+              <template #icon>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M3 12a9 9 0 109-9 9.75 9.75 0 00-6.74 2.74L3 8"/>
+                  <path d="M3 3v5h5"/>
+                </svg>
+              </template>
+              重置
+            </Button>
           </Space>
         </FormItem>
       </Form>
-    </Card>
+    </div>
 
     <!-- 表格 -->
-    <Card class="table-card">
+    <div class="table-section">
       <!-- 工具栏 -->
-      <div class="toolbar">
-        <Button type="primary" @click="handleAdd">新增用户</Button>
+      <div class="table-toolbar">
+        <div class="toolbar-left">
+          <Button type="primary" @click="handleAdd">
+            <template #icon>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="12" y1="5" x2="12" y2="19"/>
+                <line x1="5" y1="12" x2="19" y2="12"/>
+              </svg>
+            </template>
+            新增用户
+          </Button>
+        </div>
+        <div class="toolbar-right">
+          <span class="table-count">共 {{ total }} 条数据</span>
+        </div>
       </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="table-wrapper">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th class="col-id">ID</th>
+              <th class="col-user">用户信息</th>
+              <th class="col-contact">联系方式</th>
+              <th class="col-roles">角色</th>
+              <th class="col-status">状态</th>
+              <th class="col-time">创建时间</th>
+              <th class="col-actions">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="loading">
+              <td colspan="7" class="loading-cell">
+                <div class="loading-content">
+                  <div class="loading-spinner"></div>
+                  <span>加载中...</span>
+                </div>
+              </td>
+            </tr>
+            <tr v-else-if="userList.length === 0">
+              <td colspan="7" class="empty-cell">
+                <div class="empty-content">
+                  <svg viewBox="0 0 64 41" fill="none">
+                    <g transform="translate(0 1)">
+                      <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"/>
+                      <g stroke="var(--color-text-placeholder)" stroke-width="2">
+                        <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"/>
+                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--color-fill)"/>
+                      </g>
+                    </g>
+                  </svg>
+                  <span>暂无数据</span>
+                </div>
+              </td>
+            </tr>
+            <tr v-else v-for="row in userList" :key="row.id" class="data-row">
+              <td class="col-id">
+                <span class="id-badge">{{ row.id }}</span>
+              </td>
+              <td class="col-user">
+                <div class="user-info">
+                  <div class="user-avatar">{{ row.nickname.charAt(0) }}</div>
+                  <div class="user-detail">
+                    <span class="user-nickname">{{ row.nickname }}</span>
+                    <span class="user-username">@{{ row.username }}</span>
+                  </div>
+                </div>
+              </td>
+              <td class="col-contact">
+                <div class="contact-info">
+                  <span class="contact-email">{{ row.email }}</span>
+                  <span class="contact-phone">{{ row.phone }}</span>
+                </div>
+              </td>
+              <td class="col-roles">
+                <div class="role-tags">
+                  <Tag v-for="role in row.roles" :key="role" size="small" :type="role === 'admin' ? 'primary' : 'info'">
+                    {{ role }}
+                  </Tag>
+                </div>
+              </td>
+              <td class="col-status">
+                <div class="status-switch">
+                  <Switch
+                    :model-value="row.status === Status.ENABLED"
+                    @update:model-value="row.status = $event ? Status.ENABLED : Status.DISABLED; handleStatusChange(row)"
+                  />
+                  <span class="status-text" :class="{ enabled: row.status === Status.ENABLED }">
+                    {{ row.status === Status.ENABLED ? '已启用' : '已禁用' }}
+                  </span>
+                </div>
+              </td>
+              <td class="col-time">
+                <span class="time-text">{{ row.createTime }}</span>
+              </td>
+              <td class="col-actions">
+                <Space class="action-buttons">
+                  <Button type="primary" link size="small" @click="handleEdit(row)">
+                    <template #icon>
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
+                        <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
+                      </svg>
+                    </template>
+                    编辑
+                  </Button>
+                  <Popconfirm title="确定删除该用户吗？" @confirm="handleDelete(row.id)">
+                    <Button type="danger" link size="small">
+                      <template #icon>
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                          <polyline points="3,6 5,6 21,6"/>
+                          <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
+                          <line x1="10" y1="11" x2="10" y2="17"/>
+                          <line x1="14" y1="11" x2="14" y2="17"/>
+                        </svg>
+                      </template>
+                      删除
+                    </Button>
+                  </Popconfirm>
+                </Space>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
 
       <!-- 分页 -->
       <div class="pagination-wrapper">
@@ -251,11 +340,11 @@ onMounted(() => {
           @size-change="getUserList"
         />
       </div>
-    </Card>
+    </div>
 
     <!-- 编辑弹窗 -->
-    <Modal v-model="modalVisible" :title="modalTitle" width="500px">
-      <Form ref="formRef" :model="formData" :rules="rules" label-width="80px">
+    <Modal v-model="modalVisible" :title="modalTitle" width="520px" class="user-modal">
+      <Form ref="formRef" :model="formData" :rules="rules" label-width="80px" class="user-form">
         <FormItem label="用户名" prop="username">
           <Input v-model="formData.username" placeholder="请输入用户名" />
         </FormItem>
@@ -269,7 +358,10 @@ onMounted(() => {
           <Input v-model="formData.phone" placeholder="请输入手机号" />
         </FormItem>
         <FormItem label="状态">
-          <Switch v-model="formData.status" :active-value="Status.ENABLED" :inactive-value="Status.DISABLED" />
+          <div class="status-field">
+            <Switch v-model="formData.status" :active-value="Status.ENABLED" :inactive-value="Status.DISABLED" />
+            <span class="status-label">{{ formData.status === Status.ENABLED ? '启用' : '禁用' }}</span>
+          </div>
         </FormItem>
       </Form>
       <template #footer>
@@ -284,44 +376,281 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .user-page {
-  padding: 20px;
+  padding: 24px;
+  background: var(--bg-color-page);
+  min-height: 100%;
+}
+
+// 搜索区域
+.search-section {
+  background: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  padding: 20px 24px;
+  margin-bottom: 16px;
+  box-shadow: var(--box-shadow-card);
+
+  .search-form {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+
+    :deep(.x-form-item) {
+      margin-bottom: 0;
+    }
+
+    :deep(.x-input),
+    :deep(.x-select) {
+      width: 200px;
+    }
+  }
+}
+
+// 表格区域
+.table-section {
+  background: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  box-shadow: var(--box-shadow-card);
+  overflow: hidden;
+}
 
-  .search-card {
-    margin-bottom: 20px;
+.table-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--color-border-lighter);
+
+  .toolbar-left {
+    display: flex;
+    gap: 12px;
   }
 
-  .toolbar {
-    margin-bottom: 15px;
+  .table-count {
+    font-size: 14px;
+    color: var(--color-text-secondary);
   }
 }
 
+.table-wrapper {
+  overflow-x: auto;
+}
+
+// 表格样式
 .data-table {
   width: 100%;
   border-collapse: collapse;
 
   th, td {
-    padding: 12px;
+    padding: 14px 16px;
     text-align: left;
     border-bottom: 1px solid var(--color-border-lighter);
   }
 
   th {
+    font-size: 14px;
     font-weight: 500;
-    color: var(--color-text-regular);
-    background-color: var(--color-fill-light);
+    color: var(--color-text-secondary);
+    background: var(--color-fill-light);
+    white-space: nowrap;
+  }
+
+  .data-row {
+    transition: background-color 0.2s;
+
+    &:hover {
+      background: var(--color-primary-light-6);
+    }
+  }
+
+  td {
+    vertical-align: middle;
   }
 
   .loading-cell,
   .empty-cell {
-    text-align: center;
-    color: var(--color-text-secondary);
-    padding: 40px;
+    padding: 60px 20px;
+  }
+
+  .loading-content,
+  .empty-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    color: var(--color-text-placeholder);
+
+    svg {
+      width: 64px;
+      height: 41px;
+    }
+  }
+
+  .loading-spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--color-border-lighter);
+    border-top-color: var(--color-primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
   }
 }
 
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+// 列样式
+.col-id {
+  width: 80px;
+}
+
+.id-badge {
+  display: inline-block;
+  min-width: 32px;
+  padding: 4px 10px;
+  background: var(--color-fill);
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+
+.col-user {
+  min-width: 180px;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.user-avatar {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light-1) 100%);
+  border-radius: 50%;
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.user-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.user-nickname {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.user-username {
+  font-size: 12px;
+  color: var(--color-text-placeholder);
+}
+
+.col-contact {
+  min-width: 180px;
+}
+
+.contact-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.contact-email,
+.contact-phone {
+  font-size: 13px;
+  color: var(--color-text-regular);
+}
+
+.contact-phone {
+  color: var(--color-text-secondary);
+}
+
+.col-roles {
+  min-width: 100px;
+}
+
+.role-tags {
+  display: flex;
+  gap: 6px;
+}
+
+.col-status {
+  min-width: 120px;
+}
+
+.status-switch {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-text {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+
+  &.enabled {
+    color: var(--color-success);
+  }
+}
+
+.col-time {
+  min-width: 160px;
+}
+
+.time-text {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+.col-actions {
+  min-width: 140px;
+}
+
+.action-buttons {
+  :deep(.x-button) {
+    padding: 4px 8px;
+
+    svg {
+      width: 14px;
+      height: 14px;
+      margin-right: 4px;
+    }
+  }
+}
+
+// 分页
 .pagination-wrapper {
   display: flex;
   justify-content: flex-end;
-  margin-top: 20px;
+  padding: 16px 24px;
+  border-top: 1px solid var(--color-border-lighter);
+}
+
+// 弹窗表单
+.user-form {
+  padding: 16px 0;
+
+  .status-field {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .status-label {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+  }
 }
 </style>

package/dist/App.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
-export default _default;

package/dist/api/auth.d.ts

@@ -1,8 +0,0 @@
-import { LoginParams, LoginResult, UserInfo } from '../types/api';
-export declare function login(data: LoginParams): Promise<LoginResult>;
-export declare function logout(): Promise<unknown>;
-export declare function getUserInfo(): Promise<UserInfo>;
-export declare function refreshToken(refreshToken: string): Promise<{
-    token: string;
-    expireTime: number;
-}>;

package/dist/api/system.d.ts

@@ -1,16 +0,0 @@
-import { PageParams, PageResponse } from '../utils/request';
-import { RoleInfo, MenuItem } from '../types/api';
-export declare function getRoleList(params: PageParams & {
-    status?: number;
-    keyword?: string;
-}): Promise<PageResponse<RoleInfo>>;
-export declare function getRoleDetail(id: string | number): Promise<RoleInfo>;
-export declare function createRole(data: Partial<RoleInfo>): Promise<RoleInfo>;
-export declare function updateRole(id: string | number, data: Partial<RoleInfo>): Promise<RoleInfo>;
-export declare function deleteRole(id: string | number): Promise<unknown>;
-export declare function updateRoleStatus(id: string | number, status: number): Promise<unknown>;
-export declare function getMenuList(): Promise<MenuItem[]>;
-export declare function getMenuTree(appId?: string): Promise<MenuItem[]>;
-export declare function createMenu(data: Partial<MenuItem>): Promise<MenuItem>;
-export declare function updateMenu(id: string | number, data: Partial<MenuItem>): Promise<MenuItem>;
-export declare function deleteMenu(id: string | number): Promise<unknown>;

package/dist/api/user.d.ts

@@ -1,13 +0,0 @@
-import { PageParams, PageResponse } from '../utils/request';
-import { UserInfo } from '../types/api';
-export declare function getUserList(params: PageParams & {
-    status?: number;
-    keyword?: string;
-}): Promise<PageResponse<UserInfo>>;
-export declare function getUserDetail(id: string | number): Promise<UserInfo>;
-export declare function createUser(data: Partial<UserInfo>): Promise<UserInfo>;
-export declare function updateUser(id: string | number, data: Partial<UserInfo>): Promise<UserInfo>;
-export declare function deleteUser(id: string | number): Promise<unknown>;
-export declare function batchDeleteUsers(ids: (string | number)[]): Promise<unknown>;
-export declare function updateUserStatus(id: string | number, status: number): Promise<unknown>;
-export declare function resetPassword(id: string | number): Promise<unknown>;

package/dist/components/Layout/Footer.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
-export default _default;

package/dist/components/Layout/Header.vue.d.ts

@@ -1,5 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
-    searchRef: HTMLDivElement;
-    dropdownRef: HTMLDivElement;
-}, HTMLDivElement>;
-export default _default;

package/dist/components/Layout/MixTopMenu.vue.d.ts

@@ -1,5 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
-    searchRef: HTMLDivElement;
-    dropdownRef: HTMLDivElement;
-}, HTMLDivElement>;
-export default _default;

package/dist/components/Layout/Sidebar.vue.d.ts

@@ -1,11 +0,0 @@
-type __VLS_Props = {
-    menuList?: any[];
-    showLogo?: boolean;
-    showUser?: boolean;
-};
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    menuList: any[];
-    showLogo: boolean;
-    showUser: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-export default _default;

package/dist/components/Layout/SidebarMenuItem.vue.d.ts

@@ -1,5 +0,0 @@
-type __VLS_Props = {
-    menu: any;
-};
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/Layout/Tabs.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
-export default _default;

package/dist/components/Layout/TopMenu.vue.d.ts

@@ -1,5 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
-    searchRef: HTMLDivElement;
-    dropdownRef: HTMLDivElement;
-}, HTMLDivElement>;
-export default _default;

package/dist/components/Layout/index.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;