xto-fronted 0.1.2 → 0.1.4

package/src/types/xto.d.ts

@@ -0,0 +1,149 @@
+declare module '@xto/core' {
+  export const version: string
+  export function install(app: any): void
+}
+
+declare module '@xto/core/es/index/index.mjs' {
+  export * from '@xto/core'
+}
+
+declare module '@xto/core/es/theme/index.mjs' {
+  export const theme: any
+}
+
+declare module '@xto/core/es/hooks/index.mjs' {
+  export const hooks: any
+}
+
+declare module '@xto/core/es/utils/index.mjs' {
+  export const utils: any
+}
+
+declare module '@xto/base' {
+  import { DefineComponent } from 'vue'
+  export const Button: DefineComponent<any, any, any>
+  export const Loading: DefineComponent<any, any, any>
+  export const Icon: DefineComponent<any, any, any>
+  export const Avatar: DefineComponent<any, any, any>
+  export const Badge: DefineComponent<any, any, any>
+  export const Tag: DefineComponent<any, any, any>
+  export const Divider: DefineComponent<any, any, any>
+  export const Space: DefineComponent<any, any, any>
+}
+
+declare module '@xto/base/es/style.css' {
+  const content: string
+  export default content
+}
+
+declare module '@xto/form' {
+  import { DefineComponent } from 'vue'
+  export const Input: DefineComponent<any, any, any>
+  export const InputNumber: DefineComponent<any, any, any>
+  export const Select: DefineComponent<any, any, any>
+  export const Checkbox: DefineComponent<any, any, any>
+  export const Radio: DefineComponent<any, any, any>
+  export const Switch: DefineComponent<any, any, any>
+  export const DatePicker: DefineComponent<any, any, any>
+  export const Form: DefineComponent<any, any, any>
+  export const FormItem: DefineComponent<any, any, any>
+  export const Upload: DefineComponent<any, any, any>
+  export const FormRule: any
+}
+
+declare module '@xto/form/es/style.css' {
+  const content: string
+  export default content
+}
+
+declare module '@xto/data' {
+  import { DefineComponent } from 'vue'
+  export const Table: DefineComponent<any, any, any>
+  export const Pagination: DefineComponent<any, any, any>
+  export const Tree: DefineComponent<any, any, any>
+  export const TreeNode: DefineComponent<any, any, any>
+  export const List: DefineComponent<any, any, any>
+  export const Card: DefineComponent<any, any, any>
+  export const Descriptions: DefineComponent<any, any, any>
+  export const Tag: DefineComponent<any, any, any>
+  export const Progress: DefineComponent<any, any, any>
+}
+
+declare module '@xto/data/es/style.css' {
+  const content: string
+  export default content
+}
+
+declare module '@xto/feedback' {
+  import { DefineComponent } from 'vue'
+  export const Message: {
+    success: (msg: string) => void
+    error: (msg: string) => void
+    warning: (msg: string) => void
+    info: (msg: string) => void
+  }
+  export const Notification: {
+    success: (options: any) => void
+    error: (options: any) => void
+    warning: (options: any) => void
+    info: (options: any) => void
+  }
+  export const Modal: DefineComponent<any, any, any>
+  export const Drawer: DefineComponent<any, any, any>
+  export const Popconfirm: DefineComponent<any, any, any>
+  export const Tooltip: DefineComponent<any, any, any>
+  export const Popover: DefineComponent<any, any, any>
+}
+
+declare module '@xto/feedback/es/style.css' {
+  const content: string
+  export default content
+}
+
+declare module '@xto/navigation' {
+  import { DefineComponent } from 'vue'
+  export const Menu: DefineComponent<any, any, any>
+  export const MenuItem: DefineComponent<any, any, any>
+  export const SubMenu: DefineComponent<any, any, any>
+  export const Tabs: DefineComponent<any, any, any>
+  export const TabPane: DefineComponent<any, any, any>
+  export const Breadcrumb: DefineComponent<any, any, any>
+  export const BreadcrumbItem: DefineComponent<any, any, any>
+  export const Dropdown: DefineComponent<any, any, any>
+  export const DropdownMenu: DefineComponent<any, any, any>
+  export const DropdownItem: DefineComponent<any, any, any>
+}
+
+declare module '@xto/navigation/es/style.css' {
+  const content: string
+  export default content
+}
+
+declare module '@xto/layout' {
+  import { DefineComponent } from 'vue'
+  export const Layout: DefineComponent<any, any, any>
+  export const Header: DefineComponent<any, any, any>
+  export const Sider: DefineComponent<any, any, any>
+  export const Content: DefineComponent<any, any, any>
+  export const Footer: DefineComponent<any, any, any>
+  export const Container: DefineComponent<any, any, any>
+}
+
+declare module '@xto/layout/es/style.css' {
+  const content: string
+  export default content
+}
+
+declare module '@xto/business' {
+  import { DefineComponent } from 'vue'
+  export const LoginForm: DefineComponent<any, any, any>
+  export const RegisterForm: DefineComponent<any, any, any>
+  export const SearchResult: DefineComponent<any, any, any>
+  export const Comment: DefineComponent<any, any, any>
+  export const Statistic: DefineComponent<any, any, any>
+}
+
+declare module '@xto/business/es/style.css' {
+  const content: string
+  export default content
+}

package/src/utils/auth.ts

@@ -0,0 +1,86 @@
+/**
+ * Token 管理
+ */
+
+import { local } from './storage'
+
+const TOKEN_KEY = 'login_info'
+const USER_INFO_KEY = 'user_info'
+
+export interface LoginInfo {
+  accessToken: string
+  refreshToken: string
+  expiresTime: string
+  refreshTime: string
+  tokenType: string
+  code: string
+}
+
+export interface TokenInfo {
+  token: string
+  refreshToken: string
+  expireTime: number
+}
+
+// 获取登录信息
+export const getLoginInfo = (): LoginInfo | null => {
+  return local.get<LoginInfo>(TOKEN_KEY)
+}
+
+// 设置登录信息
+export const setLoginInfo = (data: Record<string, unknown>): void => {
+  const loginInfo: LoginInfo = {
+    accessToken: data['access_token'] as string,
+    refreshToken: data['refresh_token'] as string,
+    expiresTime: data['expires_time'] as string,
+    refreshTime: data['refresh_time'] as string,
+    tokenType: data['token_type'] as string,
+    code: data['code'] as string
+  }
+  local.set(TOKEN_KEY, loginInfo)
+}
+
+// 获取 access token
+export const getToken = (): string | null => {
+  const loginInfo = getLoginInfo()
+  return loginInfo?.accessToken || null
+}
+
+// 获取 token type
+export const getTokenType = (): string => {
+  const loginInfo = getLoginInfo()
+  return loginInfo?.tokenType || 'Bearer'
+}
+
+// 获取 code
+export const getCode = (): string | null => {
+  const loginInfo = getLoginInfo()
+  return loginInfo?.code || null
+}
+
+// 清除登录信息
+export const clearToken = (): void => {
+  local.remove(TOKEN_KEY)
+  local.remove(USER_INFO_KEY)
+}
+
+// 检查是否有 token
+export const hasToken = (): boolean => {
+  const token = getToken()
+  return !!token
+}
+
+// 设置用户信息
+export const setUserInfo = (userInfo: Record<string, unknown>): void => {
+  local.set(USER_INFO_KEY, userInfo)
+}
+
+// 获取用户信息
+export const getUserInfo = (): Record<string, unknown> | null => {
+  return local.get<Record<string, unknown>>(USER_INFO_KEY)
+}
+
+// 清除用户信息
+export const clearUserInfo = (): void => {
+  local.remove(USER_INFO_KEY)
+}

package/src/utils/permission.ts

@@ -0,0 +1,30 @@
+/**
+ * 权限工具函数
+ */
+
+import { useMenuStore } from '@/stores/menu'
+
+/**
+ * 检查是否有权限（基于菜单按钮权限）
+ * @param permission 权限标识
+ */
+export function hasPermission(permission: string | string[]): boolean {
+  const menuStore = useMenuStore()
+  const currentPath = window.location.pathname
+  const btnList = menuStore.menuBtnListMap[currentPath] || []
+  const btnCodes = btnList.map(item => item.code)
+
+  if (Array.isArray(permission)) {
+    return permission.some(p => btnCodes.includes(p))
+  }
+
+  return btnCodes.includes(permission)
+}
+
+/**
+ * 检查是否是管理员
+ */
+export function isAdmin(): boolean {
+  // 暂时返回 true，后续可根据实际需求实现
+  return true
+}

package/src/utils/request.ts

@@ -0,0 +1,126 @@
+/**
+ * Axios 请求封装
+ */
+
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
+import { getToken, getTokenType, clearToken } from './auth'
+import { Message } from '@xto/feedback'
+import config from '@/config'
+
+// 响应数据接口
+export interface ApiResponse<T = unknown> {
+  code: number
+  data: T
+  message: string
+}
+
+// 分页参数
+export interface PageParams {
+  page: number
+  pageSize: number
+}
+
+// 分页响应
+export interface PageResponse<T> {
+  list: T[]
+  total: number
+  page: number
+  pageSize: number
+}
+
+// 创建 axios 实例
+const createRequest = (): AxiosInstance => {
+  const instance = axios.create({
+    baseURL: config.baseUrl,
+    timeout: 15000,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+
+  // 请求拦截器
+  instance.interceptors.request.use(
+    (config: InternalAxiosRequestConfig) => {
+      const token = getToken()
+      if (token) {
+        const tokenType = getTokenType()
+        config.headers.Authorization = `${tokenType} ${token}`
+      }
+      return config
+    },
+    (error) => {
+      return Promise.reject(error)
+    }
+  )
+
+  // 响应拦截器
+  instance.interceptors.response.use(
+    (response: AxiosResponse<ApiResponse>) => {
+      const { data } = response
+
+      // 成功
+      if (data.code === 200 || data.code === 0) {
+        return response
+      }
+
+      // 业务错误
+      Message.error(data.message || '请求失败')
+      return Promise.reject(new Error(data.message || '请求失败'))
+    },
+    (error) => {
+      const { response } = error
+
+      if (response) {
+        switch (response.status) {
+          case 401:
+          case 403:
+            Message.error('登录已过期，请重新登录')
+            clearToken()
+            window.location.href = '/login'
+            break
+          case 404:
+            Message.error('请求资源不存在')
+            break
+          case 500:
+            Message.error('服务器错误')
+            break
+          default:
+            Message.error(response.data?.message || '请求失败')
+        }
+      } else {
+        Message.error('网络连接失败')
+      }
+
+      return Promise.reject(error)
+    }
+  )
+
+  return instance
+}
+
+const request = createRequest()
+
+// 请求方法
+export const http = {
+  get<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
+    return request.get(url, config).then((res) => res.data)
+  },
+
+  post<T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
+    return request.post(url, data, config).then((res) => res.data)
+  },
+
+  put<T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
+    return request.put(url, data, config).then((res) => res.data)
+  },
+
+  patch<T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
+    return request.patch(url, data, config).then((res) => res.data)
+  },
+
+  delete<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
+    return request.delete(url, config).then((res) => res.data)
+  }
+}
+
+export default request

package/src/utils/storage.ts

@@ -0,0 +1,72 @@
+/**
+ * 本地存储封装
+ */
+
+import config from '@/config'
+
+// toboyu-cloud 格式的 key 前缀
+const getPrefix = (): string => {
+  return `tooyu-cloud:${config.appId}:`
+}
+
+interface StorageWrapper {
+  get<T>(key: string): T | null
+  set(key: string, value: unknown): void
+  remove(key: string): void
+  clear(): void
+}
+
+const createStorage = (storage: globalThis.Storage): StorageWrapper => {
+  return {
+    get<T>(key: string): T | null {
+      const prefix = getPrefix()
+      const value = storage.getItem(prefix + key)
+      if (!value) return null
+      try {
+        return JSON.parse(value) as T
+      } catch {
+        return value as unknown as T
+      }
+    },
+    set(key: string, value: unknown): void {
+      const prefix = getPrefix()
+      if (value === null || value === undefined) {
+        storage.removeItem(prefix + key)
+        return
+      }
+      const stringValue = typeof value === 'string' ? value : JSON.stringify(value)
+      storage.setItem(prefix + key, stringValue)
+    },
+    remove(key: string): void {
+      const prefix = getPrefix()
+      storage.removeItem(prefix + key)
+    },
+    clear(): void {
+      const prefix = getPrefix()
+      const keys = Object.keys(storage)
+      keys.forEach(key => {
+        if (key.startsWith(prefix)) {
+          storage.removeItem(key)
+        }
+      })
+    }
+  }
+}
+
+export const localStorageUtil = createStorage(window.localStorage)
+export const sessionStorageUtil = createStorage(window.sessionStorage)
+
+// 快捷方法
+export const local = {
+  get: localStorageUtil.get,
+  set: localStorageUtil.set,
+  remove: localStorageUtil.remove,
+  clear: localStorageUtil.clear
+}
+
+export const session = {
+  get: sessionStorageUtil.get,
+  set: sessionStorageUtil.set,
+  remove: sessionStorageUtil.remove,
+  clear: sessionStorageUtil.clear
+}

package/src/views/dashboard/index.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="dashboard">
+    <div class="dashboard__placeholder">
+      <h2>首页</h2>
+      <p>功能开发中...</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.dashboard {
+  padding: 20px;
+  height: 100%;
+
+  &__placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--color-text-secondary);
+
+    h2 {
+      margin-bottom: 10px;
+      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>