u
This commit is contained in:
oneao committed
1 parent
e81f605999
commit
cf9b01e633
26 files changed
+860
-935
No files matched your search
@@ -13,6 +13,7 @@ import EmptyState from '@/components/common/EmptyStatus'
|
||||
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider'
|
||||
import { useMoneyCategoryStore } from '@/store/moneyCategory'
|
||||
import { useNavStore } from '@/store/navigation'
|
||||
import { useSpaceStore } from '@/store/space'
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { ToastProviderWrapper } from '@/utils/toast'
|
||||
import '@/styles/global.css'
|
||||
@@ -43,9 +44,11 @@ export function ErrorBoundary({ error, retry }: ErrorBoundaryProps) {
|
||||
|
||||
export default function RootLayout() {
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const moneyCategoryStore = useMoneyCategoryStore()
|
||||
const pathname = usePathname()
|
||||
|
||||
const userStore = useUserStore()
|
||||
const spaceStore = useSpaceStore()
|
||||
const moneyCategoryStore = useMoneyCategoryStore()
|
||||
const navStore = useNavStore()
|
||||
|
||||
const [fontsLoaded] = useFonts({
|
||||
@@ -60,14 +63,15 @@ export default function RootLayout() {
|
||||
if (!fontsLoaded)
|
||||
return
|
||||
|
||||
// 初始化分类
|
||||
moneyCategoryStore.init()
|
||||
|
||||
// 登录跳转
|
||||
if (!userStore.isLoggedIn()) {
|
||||
navStore.navigateToAuth()
|
||||
}
|
||||
|
||||
// 如果登录的话，就初始化下
|
||||
moneyCategoryStore.init()
|
||||
spaceStore.init()
|
||||
|
||||
// 隐藏 splash
|
||||
SplashScreen.hideAsync()
|
||||
}, [fontsLoaded, userStore, moneyCategoryStore, router])
|
||||
|
||||
@@ -1,15 +1,22 @@
|
||||
import { useState } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { View } from 'react-native'
|
||||
import CustomHeader from '@/components/custom/Header'
|
||||
|
||||
import { useSpaceStore } from '@/store/space'
|
||||
import JoinSpace from './components/JoinSpace'
|
||||
import SpaceHome from './components/SpaceHome'
|
||||
import SpaceInviteAndMembers from './components/SpaceInviteAndMembers'
|
||||
|
||||
import StepFade from './components/StepFade'
|
||||
|
||||
export default function PagerWithTab() {
|
||||
const spaceStore = useSpaceStore()
|
||||
const [step, setStep] = useState<'join' | 'invite' | 'home'>('home')
|
||||
|
||||
useEffect(() => {
|
||||
spaceStore.init()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View className="flex-1">
|
||||
<CustomHeader title="共享空间" />
|
||||
|
||||
@@ -41,7 +41,6 @@ const Button: React.FC<CustomButtonProps> = ({
|
||||
}) => {
|
||||
const isDisabled = disabled || loading
|
||||
const hasChildren = !!children
|
||||
console.log(hasChildren)
|
||||
const renderLeftIcon = () => {
|
||||
if (loading)
|
||||
return <ButtonSpinner color="#fff" className={hasChildren ? 'mr-2' : ''} />
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
import type { CreateSpaceParams, CreateSpaceResult, DissolveSpaceParams, DissolveSpaceResult } from '@/types/space/space'
|
||||
import alovaInstance from '../../index'
|
||||
|
||||
const API_PREFIX = '/space'
|
||||
|
||||
export function createSpaceApi(params: CreateSpaceParams) {
|
||||
return alovaInstance.Post<ResponseData<CreateSpaceResult>>(`${API_PREFIX}/create`, params)
|
||||
}
|
||||
|
||||
export function dissolveSpaceApi(params: DissolveSpaceParams) {
|
||||
return alovaInstance.Post<ResponseData<DissolveSpaceResult>>(`${API_PREFIX}/dissolve`, params)
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import type {
|
||||
ExitSpaceParams,
|
||||
ExitSpaceResult,
|
||||
GetUserSpaceParams,
|
||||
GetUserSpaceResult,
|
||||
JoinSpaceParams,
|
||||
JoinSpaceResult,
|
||||
ListSpaceUsersParams,
|
||||
ListSpaceUsersResult,
|
||||
RemoveSpaceUserParams,
|
||||
RemoveSpaceUserResult,
|
||||
UpdateSpaceUserRoleParams,
|
||||
UpdateSpaceUserRoleResult,
|
||||
} from '@/types/space/spaceUser'
|
||||
import alovaInstance from '../../index'
|
||||
|
||||
const API_PREFIX = '/space/user'
|
||||
|
||||
export function getUserSpaceApi(params: GetUserSpaceParams) {
|
||||
return alovaInstance.Get<ResponseData<GetUserSpaceResult | null>>(`${API_PREFIX}/get`, params)
|
||||
}
|
||||
|
||||
export function exitSpaceApi(params: ExitSpaceParams) {
|
||||
return alovaInstance.Post<ResponseData<ExitSpaceResult>>(`${API_PREFIX}/exit`, params)
|
||||
}
|
||||
|
||||
export function joinSpaceApi(params: JoinSpaceParams) {
|
||||
return alovaInstance.Post<ResponseData<JoinSpaceResult>>(`${API_PREFIX}/join`, params)
|
||||
}
|
||||
|
||||
export function listSpaceUsersApi(params: ListSpaceUsersParams) {
|
||||
return alovaInstance.Post<ResponseData<ListSpaceUsersResult>>(`${API_PREFIX}/list`, params)
|
||||
}
|
||||
|
||||
export function removeSpaceUserApi(params: RemoveSpaceUserParams) {
|
||||
return alovaInstance.Post<ResponseData<RemoveSpaceUserResult>>(`${API_PREFIX}/remove`, params)
|
||||
}
|
||||
|
||||
export function updateSpaceUserRoleApi(params: UpdateSpaceUserRoleParams) {
|
||||
return alovaInstance.Post<ResponseData<UpdateSpaceUserRoleResult>>(`${API_PREFIX}/updateRole`, params)
|
||||
}
|
||||
@@ -3,7 +3,6 @@ import type { AxiosError } from 'axios'
|
||||
import type { RefreshTokenResult } from '@/types/auth'
|
||||
import { axiosRequestAdapter } from '@alova/adapter-axios'
|
||||
import { createAlova } from 'alova'
|
||||
import { router } from 'expo-router'
|
||||
import { useNavStore } from '@/store/navigation'
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { toast } from '@/utils/toast'
|
||||
|
||||
@@ -35,12 +35,6 @@ export const useMoneyCategoryStore = create<MoneyCategoryStore>()(
|
||||
set({ categories: get().categories.filter(c => c.id !== id) }),
|
||||
|
||||
init: async () => {
|
||||
const local = get().categories
|
||||
|
||||
if (local && local.length > 0) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await queryMoneyCategoryApi().then((res) => {
|
||||
if (res.isSuccess) {
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import { create } from 'zustand'
|
||||
import { getUserSpaceApi } from '@/request/api/space/spaceUser'
|
||||
|
||||
interface SpaceState {
|
||||
userSpace: UserSpace | null
|
||||
setUserSpace: (space: UserSpace | null) => void
|
||||
init: () => Promise<void>
|
||||
}
|
||||
|
||||
export const useSpaceStore = create<SpaceState>(set => ({
|
||||
userSpace: null,
|
||||
setUserSpace: space => set({ userSpace: space }),
|
||||
init: async () => {
|
||||
try {
|
||||
const res = await getUserSpaceApi({})
|
||||
set({ userSpace: res.isSuccess ? res.data : null })
|
||||
}
|
||||
catch (err) {
|
||||
set({ userSpace: null })
|
||||
console.error(err)
|
||||
}
|
||||
},
|
||||
}))
|
||||
@@ -8,16 +8,24 @@ interface UserState {
|
||||
setUserInfo: (userInfo: UserInfo | null) => void
|
||||
logout: () => void
|
||||
isLoggedIn: () => boolean
|
||||
|
||||
userSpace: UserSpace | null
|
||||
setUserSpace: (userSpace: UserSpace | null) => void
|
||||
}
|
||||
|
||||
const useUserStore = create<UserState>()(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
userInfo: null,
|
||||
userSpace: null,
|
||||
|
||||
setUserInfo: userInfo => set({ userInfo }),
|
||||
setUserSpace: userSpace => set({ userSpace }),
|
||||
|
||||
logout: () => {
|
||||
set({ userInfo: null })
|
||||
set({ userInfo: null, userSpace: null })
|
||||
},
|
||||
|
||||
isLoggedIn: () => !!get().userInfo?.token,
|
||||
}),
|
||||
{
|
||||
|
||||
@@ -19,4 +19,10 @@ declare global {
|
||||
refreshToken?: string
|
||||
rememberMe?: boolean
|
||||
}
|
||||
|
||||
interface UserSpace {
|
||||
id: number
|
||||
name: string
|
||||
invite_code: string
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
// 创建空间
|
||||
export interface CreateSpaceParams {
|
||||
|
||||
}
|
||||
|
||||
export interface CreateSpaceResult {
|
||||
id: number
|
||||
invite_code: string
|
||||
}
|
||||
|
||||
// 解散空间
|
||||
export interface DissolveSpaceParams {
|
||||
|
||||
}
|
||||
export interface DissolveSpaceResult {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
// 获取用户的空间
|
||||
export interface GetUserSpaceParams {
|
||||
|
||||
}
|
||||
export interface GetUserSpaceResult {
|
||||
id: number
|
||||
name: string
|
||||
invite_code: string
|
||||
}
|
||||
|
||||
// 退出空间
|
||||
export interface ExitSpaceParams {
|
||||
|
||||
}
|
||||
export interface ExitSpaceResult {
|
||||
|
||||
}
|
||||
|
||||
// 获取空间列表用户
|
||||
export interface SpaceUser {
|
||||
user_id: number
|
||||
username: string
|
||||
space_role: number
|
||||
}
|
||||
|
||||
export interface ListSpaceUsersParams {
|
||||
}
|
||||
|
||||
export interface ListSpaceUsersResult {
|
||||
users: SpaceUser[]
|
||||
}
|
||||
|
||||
// 踢出空间
|
||||
export interface RemoveSpaceUserParams {
|
||||
space_id: number
|
||||
user_id: number
|
||||
}
|
||||
|
||||
export interface RemoveSpaceUserResult {
|
||||
|
||||
}
|
||||
|
||||
// 更新用户权限
|
||||
export interface UpdateSpaceUserRoleParams {
|
||||
space_id: number
|
||||
user_id: number
|
||||
role: number
|
||||
}
|
||||
|
||||
export interface UpdateSpaceUserRoleResult {
|
||||
|
||||
}
|
||||
|
||||
// 加入空间
|
||||
export interface JoinSpaceParams {
|
||||
invite_code: string
|
||||
}
|
||||
|
||||
export interface JoinSpaceResult {
|
||||
|
||||
}
|
||||
@@ -1,708 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>查询进度步骤条 - 精确对齐版本</title>
|
||||
<meta charset="UTF-8" />
|
||||
<title>字段配置示例</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
padding: 40px 20px;
|
||||
font-family: Arial;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
min-height: 600px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(to right, #4b6cb7, #182848);
|
||||
color: white;
|
||||
padding: 25px 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
opacity: 0.9;
|
||||
font-size: 14px;
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
padding: 40px 30px;
|
||||
|
||||
.config-row td {
|
||||
background: #fafafa;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.config-panel {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.config-group {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.progress-steps {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
counter-reset: step;
|
||||
|
||||
.config-group h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.step {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-connector {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
height: 4px;
|
||||
background-color: #e0e0e0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: #4b6cb7;
|
||||
transition: width 0.8s ease, background-color 0.8s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.step-progress.success {
|
||||
background: linear-gradient(to right, #4CAF50, #2E7D32);
|
||||
}
|
||||
|
||||
.step-progress.failed {
|
||||
background: linear-gradient(to right, #f44336, #c62828);
|
||||
}
|
||||
|
||||
.step-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: #e0e0e0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
border: 4px solid white;
|
||||
box-shadow: 0 0 0 3px #e0e0e0;
|
||||
transition: all 0.5s ease;
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.step.active .step-icon {
|
||||
background: #4b6cb7;
|
||||
color: white;
|
||||
box-shadow: 0 0 0 3px #b8c6f0;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
.step.completed .step-icon {
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
box-shadow: 0 0 0 3px #a5d6a7;
|
||||
}
|
||||
|
||||
.step.failed .step-icon {
|
||||
background: #f44336;
|
||||
color: white;
|
||||
box-shadow: 0 0 0 3px #ffcdd2;
|
||||
}
|
||||
|
||||
.step.completed .step-icon::after {
|
||||
content: '✓';
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.step.failed .step-icon::after {
|
||||
content: '✕';
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.step-label {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.step.active .step-label {
|
||||
color: #4b6cb7;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.step.completed .step-label {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.step.failed .step-label {
|
||||
color: #f44336;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
border-left: 4px solid #4b6cb7;
|
||||
min-height: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.progress-info.failed {
|
||||
border-left-color: #f44336;
|
||||
}
|
||||
|
||||
.progress-info.success {
|
||||
border-left-color: #4CAF50;
|
||||
}
|
||||
|
||||
.progress-status {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
|
||||
.config-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.progress-details {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.progress-time {
|
||||
display: inline-block;
|
||||
background: #e3f2fd;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
.config-item label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #1565c0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #f44336;
|
||||
background: #ffebee;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 12px 25px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#startBtn {
|
||||
background: linear-gradient(to right, #4b6cb7, #182848);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#retryBtn {
|
||||
background: linear-gradient(to right, #ff9800, #f57c00);
|
||||
color: white;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#resetBtn {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(75, 108, 183, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(75, 108, 183, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(75, 108, 183, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: white;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.step-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.step-label {
|
||||
font-size: 12px;
|
||||
max-width: 80px;
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.config-item input[type="text"],
|
||||
.config-item input[type="number"],
|
||||
.config-item textarea {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
margin-top: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>远程数据查询进度</h1>
|
||||
<p>正在从服务器获取数据，每一步都可能失败，请耐心等待...</p>
|
||||
</div>
|
||||
|
||||
<div class="progress-container">
|
||||
<div class="progress-steps">
|
||||
<!-- 步骤1 -->
|
||||
<div class="step active" id="step1">
|
||||
<div class="step-icon">1</div>
|
||||
<div class="step-label">验证查询条件</div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤2 -->
|
||||
<div class="step" id="step2">
|
||||
<div class="step-icon">2</div>
|
||||
<div class="step-label">发出请求</div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤3 -->
|
||||
<div class="step" id="step3">
|
||||
<div class="step-icon">3</div>
|
||||
<div class="step-label">等待响应</div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤4 -->
|
||||
<div class="step" id="step4">
|
||||
<div class="step-icon">4</div>
|
||||
<div class="step-label">查询成功</div>
|
||||
</div>
|
||||
|
||||
<!-- 连接线1-2 -->
|
||||
<div class="step-connector" id="connector1" style="left: 12.5%; width: 25%;">
|
||||
<div class="step-progress" id="progress1"></div>
|
||||
</div>
|
||||
|
||||
<!-- 连接线2-3 -->
|
||||
<div class="step-connector" id="connector2" style="left: 37.5%; width: 25%;">
|
||||
<div class="step-progress" id="progress2"></div>
|
||||
</div>
|
||||
|
||||
<!-- 连接线3-4 -->
|
||||
<div class="step-connector" id="connector3" style="left: 62.5%; width: 25%;">
|
||||
<div class="step-progress" id="progress3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-info" id="progressInfo">
|
||||
<div class="progress-status" id="progressStatus">正在验证查询条件...</div>
|
||||
<div class="progress-details" id="progressDetails">
|
||||
检查查询参数的有效性，确保数据请求符合系统要求。
|
||||
<div class="progress-time">已用时间: <span id="timeElapsed">0分00秒</span></div>
|
||||
</div>
|
||||
<div class="error-message" id="errorMessage" style="display: none;"></div>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<button id="startBtn">开始查询</button>
|
||||
<button id="retryBtn">重试当前步骤</button>
|
||||
<button id="resetBtn" disabled>重置进度</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>字段配置示例</h2>
|
||||
|
||||
<table id="fieldTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>字段名</th>
|
||||
<th>类型</th>
|
||||
<th>必填</th>
|
||||
<th style="width: 80px">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="fieldTableBody">
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const steps = document.querySelectorAll('.step');
|
||||
const stepProgresses = document.querySelectorAll('.step-progress');
|
||||
const connectors = document.querySelectorAll('.step-connector');
|
||||
const progressInfoElement = document.getElementById('progressInfo');
|
||||
const progressStatus = document.getElementById('progressStatus');
|
||||
const progressDetails = document.getElementById('progressDetails');
|
||||
const errorMessage = document.getElementById('errorMessage');
|
||||
const timeElapsed = document.getElementById('timeElapsed');
|
||||
const startBtn = document.getElementById('startBtn');
|
||||
const retryBtn = document.getElementById('retryBtn');
|
||||
const resetBtn = document.getElementById('resetBtn');
|
||||
|
||||
let currentStep = 1;
|
||||
let isRunning = false;
|
||||
let hasFailed = false;
|
||||
let timerInterval;
|
||||
let seconds = 0;
|
||||
let stepStatus = [null, 'active', null, null, null];
|
||||
|
||||
// 计算连接线位置
|
||||
function calculateConnectorPositions() {
|
||||
const stepWidth = 100 / steps.length; // 每个步骤占据的宽度百分比
|
||||
|
||||
connectors.forEach((connector, index) => {
|
||||
// 计算连接线的起始位置和宽度
|
||||
const left = (index + 0.5) * stepWidth; // 从第一个步骤的中心开始
|
||||
const width = stepWidth; // 连接线宽度等于步骤宽度
|
||||
|
||||
connector.style.left = `${left}%`;
|
||||
connector.style.width = `${width}%`;
|
||||
});
|
||||
}
|
||||
|
||||
// 更新步骤状态
|
||||
function updateSteps() {
|
||||
steps.forEach((step, index) => {
|
||||
step.classList.remove('active', 'completed', 'failed');
|
||||
|
||||
if (index + 1 < currentStep) {
|
||||
step.classList.add('completed');
|
||||
} else if (index + 1 === currentStep) {
|
||||
if (currentStep > steps.length) {
|
||||
// 如果所有步骤已完成，最后一个步骤显示为完成状态
|
||||
step.classList.add('completed');
|
||||
} else {
|
||||
step.classList.add('active');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 更新进度条
|
||||
function updateProgressBars() {
|
||||
// 重置所有进度条
|
||||
stepProgresses.forEach((progress, index) => {
|
||||
progress.style.width = '0';
|
||||
progress.classList.remove('success', 'failed');
|
||||
});
|
||||
|
||||
// 设置已完成的进度条
|
||||
for (let i = 1; i < currentStep; i++) {
|
||||
if (i <= stepProgresses.length) {
|
||||
const progress = document.getElementById(`progress${i}`);
|
||||
if (progress) {
|
||||
progress.style.width = '100%';
|
||||
// 根据步骤状态设置颜色
|
||||
if (stepStatus[i] === 'completed') {
|
||||
progress.classList.add('success');
|
||||
} else if (stepStatus[i] === 'failed') {
|
||||
progress.classList.add('failed');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 标记步骤失败
|
||||
function markStepFailed(stepIndex, error) {
|
||||
stepStatus[stepIndex] = 'failed';
|
||||
hasFailed = true;
|
||||
|
||||
steps[stepIndex - 1].classList.remove('active', 'completed');
|
||||
steps[stepIndex - 1].classList.add('failed');
|
||||
|
||||
// 标记前一个连接线为失败
|
||||
if (stepIndex > 1) {
|
||||
const prevProgress = document.getElementById(`progress${stepIndex - 1}`);
|
||||
if (prevProgress) {
|
||||
prevProgress.classList.add('failed');
|
||||
}
|
||||
}
|
||||
|
||||
progressInfoElement.classList.add('failed');
|
||||
errorMessage.textContent = error;
|
||||
errorMessage.style.display = 'block';
|
||||
|
||||
isRunning = false;
|
||||
stopTimer();
|
||||
|
||||
startBtn.disabled = true;
|
||||
retryBtn.style.display = 'inline-block';
|
||||
resetBtn.disabled = false;
|
||||
|
||||
updateProgressBars();
|
||||
}
|
||||
|
||||
// 标记步骤成功
|
||||
function markStepCompleted(stepIndex) {
|
||||
stepStatus[stepIndex] = 'completed';
|
||||
updateSteps();
|
||||
|
||||
// 标记前一个连接线为成功
|
||||
if (stepIndex > 1) {
|
||||
const prevProgress = document.getElementById(`progress${stepIndex - 1}`);
|
||||
if (prevProgress) {
|
||||
prevProgress.classList.add('success');
|
||||
}
|
||||
}
|
||||
|
||||
updateProgressBars();
|
||||
}
|
||||
|
||||
// 标记所有步骤完成
|
||||
function markAllStepsCompleted() {
|
||||
for (let i = 1; i <= steps.length; i++) {
|
||||
stepStatus[i] = 'completed';
|
||||
}
|
||||
updateSteps();
|
||||
updateProgressBars();
|
||||
}
|
||||
|
||||
// 更新状态信息
|
||||
function updateStatus() {
|
||||
const statusTexts = [
|
||||
'',
|
||||
'正在验证查询条件...',
|
||||
'正在向服务器发出请求...',
|
||||
'正在等待服务器响应...',
|
||||
'查询成功，正在处理结果...'
|
||||
];
|
||||
|
||||
const detailTexts = [
|
||||
'',
|
||||
'检查查询参数的有效性，确保数据请求符合系统要求。',
|
||||
'将查询请求发送到远程服务器，建立数据连接。',
|
||||
'等待服务器处理查询请求并返回结果。',
|
||||
'处理查询结果并准备返回，即将完成整个过程。'
|
||||
];
|
||||
|
||||
progressStatus.textContent = statusTexts[currentStep];
|
||||
progressDetails.innerHTML = detailTexts[currentStep] +
|
||||
`<div class="progress-time">已用时间: <span id="timeElapsed">${formatTime(seconds)}</span></div>`;
|
||||
|
||||
// 隐藏错误信息
|
||||
errorMessage.style.display = 'none';
|
||||
progressInfoElement.classList.remove('failed');
|
||||
}
|
||||
|
||||
// 格式化时间显示
|
||||
function formatTime(totalSeconds) {
|
||||
const minutes = Math.floor(totalSeconds / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
return `${minutes}分${seconds.toString().padStart(2, '0')}秒`;
|
||||
}
|
||||
|
||||
// 开始计时器
|
||||
function startTimer() {
|
||||
seconds = 0;
|
||||
timerInterval = setInterval(() => {
|
||||
seconds++;
|
||||
timeElapsed.textContent = formatTime(seconds);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 停止计时器
|
||||
function stopTimer() {
|
||||
clearInterval(timerInterval);
|
||||
}
|
||||
|
||||
// 模拟查询过程
|
||||
function simulateQuery() {
|
||||
if (currentStep > steps.length) {
|
||||
// 查询完成
|
||||
isRunning = false;
|
||||
hasFailed = false;
|
||||
startBtn.disabled = true;
|
||||
retryBtn.style.display = 'none';
|
||||
resetBtn.disabled = false;
|
||||
stopTimer();
|
||||
|
||||
// 标记所有步骤为完成状态
|
||||
markAllStepsCompleted();
|
||||
|
||||
progressStatus.innerHTML = '<span style="color:#4CAF50;">查询完成！</span>';
|
||||
progressDetails.innerHTML = '数据查询已成功完成，结果已准备就绪。' +
|
||||
`<div class="progress-time">总用时: <span id="timeElapsed">${formatTime(seconds)}</span></div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
// 模拟每个步骤的耗时
|
||||
const stepDurations = [0, 1000, 1000, 1000, 1000];
|
||||
|
||||
// 模拟每一步有20%的失败概率
|
||||
const willFail = Math.random() < 0.2;
|
||||
|
||||
setTimeout(() => {
|
||||
if (willFail && !hasFailed) {
|
||||
// 模拟失败
|
||||
const errorMessages = [
|
||||
'',
|
||||
'验证查询条件失败：查询参数格式不正确。',
|
||||
'发出请求失败：无法连接到远程服务器。',
|
||||
'等待响应失败：服务器响应超时。',
|
||||
'查询成功失败：数据处理错误。'
|
||||
];
|
||||
|
||||
markStepFailed(currentStep, errorMessages[currentStep]);
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentStep === steps.length) {
|
||||
// 最后一步成功，标记为完成
|
||||
markStepCompleted(currentStep);
|
||||
currentStep++;
|
||||
|
||||
// 完成所有步骤
|
||||
updateProgressBars();
|
||||
updateStatus();
|
||||
simulateQuery();
|
||||
} else {
|
||||
// 步骤成功，继续下一步
|
||||
markStepCompleted(currentStep);
|
||||
currentStep++;
|
||||
updateStatus();
|
||||
|
||||
if (currentStep <= steps.length) {
|
||||
// 继续下一步
|
||||
updateSteps();
|
||||
updateProgressBars();
|
||||
simulateQuery();
|
||||
}
|
||||
}
|
||||
}, stepDurations[currentStep]);
|
||||
}
|
||||
|
||||
// 开始查询
|
||||
startBtn.addEventListener('click', function() {
|
||||
if (!isRunning) {
|
||||
isRunning = true;
|
||||
hasFailed = false;
|
||||
// 重置步骤状态
|
||||
stepStatus = [null, 'active', null, null, null];
|
||||
startBtn.disabled = true;
|
||||
retryBtn.style.display = 'none';
|
||||
resetBtn.disabled = true;
|
||||
startTimer();
|
||||
updateSteps();
|
||||
updateProgressBars();
|
||||
simulateQuery();
|
||||
const fields = [
|
||||
{ id: 1, name: "username", type: "string", required: true, default: "", repeat: false, maxLen: 20, desc: "" },
|
||||
{ id: 2, name: "age", type: "number", required: false, default: 0, repeat: false, maxLen: 3, desc: "" },
|
||||
];
|
||||
|
||||
let openConfigRowId = null;
|
||||
|
||||
function renderTable() {
|
||||
const tbody = document.getElementById("fieldTableBody");
|
||||
tbody.innerHTML = "";
|
||||
|
||||
fields.forEach(field => {
|
||||
// 主行
|
||||
const tr = document.createElement("tr");
|
||||
tr.innerHTML = `
|
||||
<td>${field.name}</td>
|
||||
<td>${field.type}</td>
|
||||
<td>${field.required ? "是" : "否"}</td>
|
||||
<td><button onclick="toggleConfig(${field.id})">配置</button></td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
|
||||
// 配置行
|
||||
if (openConfigRowId === field.id) {
|
||||
const cfgRow = document.createElement("tr");
|
||||
cfgRow.className = "config-row";
|
||||
cfgRow.innerHTML = `
|
||||
<td colspan="4">
|
||||
${renderConfigPanel(field)}
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(cfgRow);
|
||||
}
|
||||
});
|
||||
|
||||
// 重试当前步骤
|
||||
retryBtn.addEventListener('click', function() {
|
||||
if (!isRunning) {
|
||||
isRunning = true;
|
||||
hasFailed = false;
|
||||
startBtn.disabled = true;
|
||||
retryBtn.style.display = 'none';
|
||||
resetBtn.disabled = true;
|
||||
startTimer();
|
||||
|
||||
// 重新开始当前步骤
|
||||
updateSteps();
|
||||
updateStatus();
|
||||
simulateQuery();
|
||||
}
|
||||
});
|
||||
|
||||
// 重置进度
|
||||
resetBtn.addEventListener('click', function() {
|
||||
isRunning = false;
|
||||
hasFailed = false;
|
||||
currentStep = 1;
|
||||
stepStatus = [null, 'active', null, null, null];
|
||||
updateSteps();
|
||||
updateProgressBars();
|
||||
updateStatus();
|
||||
stopTimer();
|
||||
seconds = 0;
|
||||
timeElapsed.textContent = formatTime(seconds);
|
||||
startBtn.disabled = false;
|
||||
retryBtn.style.display = 'none';
|
||||
resetBtn.disabled = true;
|
||||
|
||||
progressStatus.textContent = '准备开始新的查询...';
|
||||
progressDetails.innerHTML = '点击"开始查询"按钮启动数据检索过程。' +
|
||||
`<div class="progress-time">已用时间: <span id="timeElapsed">${formatTime(seconds)}</span></div>`;
|
||||
});
|
||||
|
||||
// 初始化
|
||||
calculateConnectorPositions();
|
||||
updateSteps();
|
||||
updateProgressBars();
|
||||
updateStatus();
|
||||
|
||||
// 窗口大小改变时重新计算连接线位置
|
||||
window.addEventListener('resize', function() {
|
||||
calculateConnectorPositions();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function toggleConfig(id) {
|
||||
openConfigRowId = openConfigRowId === id ? null : id;
|
||||
renderTable();
|
||||
}
|
||||
|
||||
function renderConfigPanel(field) {
|
||||
return `
|
||||
<div class="config-panel">
|
||||
|
||||
<div class="config-group">
|
||||
<h4>基础配置</h4>
|
||||
<div class="config-item">
|
||||
<label>字段名</label>
|
||||
<input type="text" value="${field.name}" oninput="updateField(${field.id}, 'name', this.value)">
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<label>默认值</label>
|
||||
<input type="text" value="${field.default}" oninput="updateField(${field.id}, 'default', this.value)">
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<label><input type="checkbox" ${field.repeat ? "checked" : ""} onchange="updateField(${field.id}, 'repeat', this.checked)"> 可重复</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<h4>校验配置</h4>
|
||||
<div class="config-item">
|
||||
<label>必填</label>
|
||||
<input type="checkbox" ${field.required ? "checked" : ""} onchange="updateField(${field.id}, 'required', this.checked)">
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<label>最大长度</label>
|
||||
<input type="number" value="${field.maxLen}" oninput="updateField(${field.id}, 'maxLen', this.value)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<h4>展示配置</h4>
|
||||
<div class="config-item">
|
||||
<label>说明</label>
|
||||
<textarea rows="4" oninput="updateField(${field.id}, 'desc', this.value)">${field.desc}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function updateField(id, key, value) {
|
||||
const field = fields.find(f => f.id === id);
|
||||
field[key] = value;
|
||||
}
|
||||
|
||||
renderTable();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
Reference in new issue
Block a user