初始化导入 Web 项目
Jimmy Liow
10 months ago
parent
4c14aadbb2
commit
968078c6db
@ -0,0 +1,15 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended'],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
|
||||
'no-unused-vars': ['warn', { args: 'after-used', vars: 'all' }],
|
||||
'react/prop-types': 'off',
|
||||
'react-hooks/rules-of-hooks': 'warn',
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,26 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
/package-lock.json
|
||||
@ -0,0 +1 @@
|
||||
npm run build
|
||||
@ -0,0 +1 @@
|
||||
npm run dev
|
||||
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>喜玩酒店查询</title>
|
||||
<style>
|
||||
.loading{width:150px;height:8px;border-radius:4px;margin:0 auto;margin-top:200px;position:relative;background:#777;overflow:hidden}
|
||||
.loading span{display:block;width:100%;height:100%;border-radius:3px;background:#00b96b;animation:changePosition 4s linear infinite}
|
||||
@keyframes changePosition{
|
||||
0%{-webkit-transform:translate(-150px)}
|
||||
50%{-webkit-transform:translate(0)}
|
||||
100%{-webkit-transform:translate(150px)}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<div class="loading">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,9 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"experimentalDecorators": true,
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "heytrip-go",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"4test": "vite build --mode test",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"antd": "^5.17.2",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.10.0",
|
||||
"zustand": "^4.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@vitejs/plugin-legacy": "^4.0.2",
|
||||
"@vitejs/plugin-react": "^3.1.0",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-react-app": "^7.0.1",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"postcss": "^8.4.38",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"vite": "^4.2.0",
|
||||
"vite-plugin-eslint": "^1.8.1",
|
||||
"vite-plugin-windicss": "^1.9.3",
|
||||
"windicss": "^3.5.6"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
npm version prerelease
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,6 @@
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
.ant-table-wrapper.border-collapse table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@ -0,0 +1,13 @@
|
||||
import { useRouteError } from 'react-router-dom'
|
||||
import { Result } from 'antd'
|
||||
|
||||
export default function ErrorPage() {
|
||||
const errorResponse = useRouteError()
|
||||
return (
|
||||
<Result
|
||||
status='404'
|
||||
title='Sorry, an unexpected error has occurred.'
|
||||
subTitle={errorResponse?.message || errorResponse.error?.message}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
const __BUILD_VERSION__ = `__BUILD_VERSION__`.replace(/"/g, '')
|
||||
export const BUILD_VERSION = import.meta.env.PROD ? __BUILD_VERSION__ : import.meta.env.MODE;
|
||||
@ -0,0 +1,60 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import dayjs from "dayjs";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import i18n from '@/i18n';
|
||||
|
||||
export const useDatePresets = () => {
|
||||
const [presets, setPresets] = useState([]);
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
const newPresets = [
|
||||
{
|
||||
label: t("datetime.thisWeek"),
|
||||
value: [dayjs().startOf("w"), dayjs().endOf("w")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.lastWeek"),
|
||||
value: [dayjs().startOf("w").subtract(7, "days"), dayjs().endOf("w").subtract(7, "days")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.thisMonth"),
|
||||
value: [dayjs().startOf("M"), dayjs().endOf("M")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.lastMonth"),
|
||||
value: [dayjs().subtract(1, "M").startOf("M"), dayjs().subtract(1, "M").endOf("M")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.lastThreeMonth"),
|
||||
value: [dayjs().subtract(2, "M").startOf("M"), dayjs().endOf("M")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.thisYear"),
|
||||
value: [dayjs().startOf("y"), dayjs().endOf("y")],
|
||||
},
|
||||
];
|
||||
setPresets(newPresets);
|
||||
}, [i18n.language]);
|
||||
|
||||
return presets;
|
||||
}
|
||||
|
||||
export const useWeekdays = () => {
|
||||
const [data, setData] = useState([]);
|
||||
const { t, i18n } = useTranslation();
|
||||
useEffect(() => {
|
||||
const newData = [
|
||||
{ value: '1', label: t('weekdays.1') },
|
||||
{ value: '2', label: t('weekdays.2') },
|
||||
{ value: '3', label: t('weekdays.3') },
|
||||
{ value: '4', label: t('weekdays.4') },
|
||||
{ value: '5', label: t('weekdays.5') },
|
||||
{ value: '6', label: t('weekdays.6') },
|
||||
{ value: '7', label: t('weekdays.7') },
|
||||
];
|
||||
setData(newData);
|
||||
return () => {};
|
||||
}, [i18n.language]);
|
||||
return data;
|
||||
};
|
||||
@ -0,0 +1,20 @@
|
||||
export const useHTLanguageSets = () => {
|
||||
const newData = [
|
||||
{ key: '1', value: '1', label: 'English' },
|
||||
{ key: '2', value: '2', label: 'Chinese (中文)' },
|
||||
{ key: '3', value: '3', label: 'Japanese (日本語)' },
|
||||
{ key: '4', value: '4', label: 'German (Deutsch)' },
|
||||
{ key: '5', value: '5', label: 'French (Français)' },
|
||||
{ key: '6', value: '6', label: 'Spanish (Español)' },
|
||||
{ key: '7', value: '7', label: 'Russian (Русский)' },
|
||||
{ key: '8', value: '8', label: 'Italian (Italiano)' },
|
||||
];
|
||||
|
||||
return newData;
|
||||
};
|
||||
|
||||
export const useHTLanguageSetsMapVal = () => {
|
||||
const stateSets = useHTLanguageSets();
|
||||
const stateMapVal = stateSets.reduce((r, c) => ({ ...r, [`${c.value}`]: c }), {});
|
||||
return stateMapVal;
|
||||
};
|
||||
@ -0,0 +1,182 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import useAuthStore from '@/stores/Auth';
|
||||
import { PERM_OVERSEA, PERM_AIR_TICKET, PERM_PRODUCTS_MANAGEMENT } from '@/config';
|
||||
import { isEmpty } from '@/utils/commons';
|
||||
|
||||
/**
|
||||
* 产品管理 相关的预设数据
|
||||
* 项目类型
|
||||
* * 酒店预定 1
|
||||
* * 火车 2
|
||||
* * 飞机票务 3
|
||||
* * 游船 4
|
||||
* * 快巴 5
|
||||
* * 旅行社(综费) 6
|
||||
* * 景点 7
|
||||
* * 特殊项目 8
|
||||
* * 其他 9
|
||||
* * 酒店 A
|
||||
* * 超公里 B
|
||||
* * 餐费 C
|
||||
* * 小包价 D // 包价线路
|
||||
* * 站 X
|
||||
* * 购物 S
|
||||
* * 餐 R (餐厅)
|
||||
* * 娱乐 E
|
||||
* * 精华线路 T
|
||||
* * 客人testimonial F
|
||||
* * 线路订单 O
|
||||
* * 省 P
|
||||
* * 信息 I
|
||||
* * 国家 G
|
||||
* * 城市 K
|
||||
* * 图片 H
|
||||
* * 地图 M
|
||||
* * 包价线路 L (已废弃)
|
||||
* * 节日节庆 V
|
||||
* * 火车站 N
|
||||
* * 手机租赁 Z
|
||||
* * ---- webht 类型, 20240624 新增HT类型 ----
|
||||
* * 导游 Q
|
||||
* * 车费 J
|
||||
*/
|
||||
|
||||
export const useProductsTypes = (showAll = false) => {
|
||||
const [types, setTypes] = useState([]);
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
const allItem = [{ label: t('All'), value: '', key: '' }];
|
||||
const newData = [
|
||||
{ label: t('products:type.Experience'), value: '6', key: '6' },
|
||||
{ label: t('products:type.UltraService'), value: 'B', key: 'B' },
|
||||
{ label: t('products:type.Car'), value: 'J', key: 'J' },
|
||||
{ label: t('products:type.Guide'), value: 'Q', key: 'Q' },
|
||||
{ label: t('products:type.Attractions'), value: '7', key: '7' }, // landscape
|
||||
{ label: t('products:type.Meals'), value: 'R', key: 'R' },
|
||||
{ label: t('products:type.Extras'), value: '8', key: '8' },
|
||||
{ label: t('products:type.Package'), value: 'D', key: 'D' },
|
||||
];
|
||||
const res = showAll ? [...allItem, ...newData] : newData;
|
||||
setTypes(res);
|
||||
}, [i18n.language]);
|
||||
|
||||
return types;
|
||||
};
|
||||
export const useProductsTypesMapVal = (value) => {
|
||||
const stateSets = useProductsTypes();
|
||||
const stateMapVal = stateSets.reduce((r, c) => ({ ...r, [`${c.value}`]: c }), {});
|
||||
return stateMapVal;
|
||||
};
|
||||
|
||||
export const useProductsAuditStates = () => {
|
||||
const [types, setTypes] = useState([]);
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
const newData = [
|
||||
{ key: '-1', value: '-1', label: t('products:auditState.New'), color: 'muted' },
|
||||
{ key: '0', value: '0', label: t('products:auditState.Pending'), color: '' },
|
||||
{ key: '2', value: '2', label: t('products:auditState.Approved'), color: 'primary' },
|
||||
{ key: '3', value: '3', label: t('products:auditState.Rejected'), color: 'danger' },
|
||||
{ key: '1', value: '1', label: t('products:auditState.Published'), color: 'primary' },
|
||||
// ELSE 未知
|
||||
];
|
||||
setTypes(newData);
|
||||
}, [i18n.language]);
|
||||
|
||||
return types;
|
||||
};
|
||||
|
||||
export const useProductsAuditStatesMapVal = (value) => {
|
||||
const stateSets = useProductsAuditStates();
|
||||
const stateMapVal = stateSets.reduce((r, c) => ({ ...r, [`${c.value}`]: c }), {});
|
||||
return stateMapVal;
|
||||
};
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
export const useProductsTypesFieldsets = (type) => {
|
||||
const [isPermitted] = useAuthStore((state) => [state.isPermitted]);
|
||||
const infoDefault = [['city'], ['title']];
|
||||
const infoAdmin = ['title', 'product_title', 'code', 'remarks', 'dept']; // 'display_to_c'
|
||||
const infoDisplay = isPermitted(PERM_PRODUCTS_MANAGEMENT) ? ['display_to_c'] : [];
|
||||
const infoRecDisplay = isPermitted(PERM_PRODUCTS_MANAGEMENT) ? ['recommends_rate'] : [];
|
||||
const infoTypesMap = {
|
||||
'6': [[], []],
|
||||
'B': [['km'], []],
|
||||
'J': [[...infoRecDisplay, 'duration', ], ['description']],
|
||||
'Q': [[...infoRecDisplay, 'duration', ], ['description']],
|
||||
'D': [[...infoRecDisplay, 'duration', ...infoDisplay], ['description']],
|
||||
'7': [[...infoRecDisplay, 'duration', 'open_weekdays'], ['description']],
|
||||
'R': [[], ['description']],
|
||||
'8': [[], []],
|
||||
};
|
||||
const thisTypeFieldset = (_type) => {
|
||||
if (isEmpty(_type)) {
|
||||
return infoDefault;
|
||||
}
|
||||
const adminSet = isPermitted(PERM_PRODUCTS_MANAGEMENT) ? infoAdmin : [];
|
||||
return [
|
||||
[...infoDefault[0], ...infoTypesMap[_type][0], ...adminSet],
|
||||
[...infoDefault[1], ...infoTypesMap[_type][1]],
|
||||
];
|
||||
};
|
||||
return thisTypeFieldset(type);
|
||||
};
|
||||
|
||||
export const useNewProductRecord = () => {
|
||||
return {
|
||||
info: {
|
||||
'id': '',
|
||||
'htid': 0,
|
||||
'title': '',
|
||||
'code': '',
|
||||
'product_type_id': '',
|
||||
'product_type_name': '',
|
||||
'remarks': '',
|
||||
'duration': 0,
|
||||
'duration_unit': 'h',
|
||||
'open_weekdays': ['1', '2', '3', '4', '5', '6', '7'],
|
||||
'recommends_rate': 0,
|
||||
'dept_id': 0,
|
||||
'dept_name': '',
|
||||
'display_to_c': 0,
|
||||
'km': 0,
|
||||
'city_id': 0,
|
||||
'city_name': '',
|
||||
'open_hours': '',
|
||||
'lastedit_changed': '',
|
||||
'create_date': '',
|
||||
'created_by': '',
|
||||
},
|
||||
lgc_details: [
|
||||
{
|
||||
'title': '',
|
||||
'descriptions': '',
|
||||
'lgc': 1,
|
||||
'id': '',
|
||||
},
|
||||
],
|
||||
quotation: [
|
||||
{
|
||||
'id': '',
|
||||
'adult_cost': 0,
|
||||
'child_cost': 0,
|
||||
'currency': 'RMB',
|
||||
'unit_id': '1',
|
||||
'unit_name': '每团',
|
||||
'group_size_min': 1,
|
||||
'group_size_max': 2,
|
||||
'use_dates_start': '',
|
||||
'use_dates_end': '',
|
||||
'weekdays': '',
|
||||
'audit_state_id': -1,
|
||||
'audit_state_name': '',
|
||||
'lastedit_changed': '',
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,86 @@
|
||||
const persistObject = {}
|
||||
|
||||
/**
|
||||
* G-INT:USER_ID -> userId = 456
|
||||
* G-STR:LOGIN_TOKEN -> loginToken = 'E6779386E7D64DF0ADD0F97767E00D8B'
|
||||
* G-JSON:LOGIN_USER -> loginUser = { username: 'test-username' }
|
||||
*/
|
||||
export function usingStorage() {
|
||||
|
||||
const getStorage = () => {
|
||||
if (import.meta.env.DEV && window.localStorage) {
|
||||
return window.localStorage
|
||||
} else if (window.sessionStorage) {
|
||||
return window.sessionStorage
|
||||
} else {
|
||||
console.error('browser not support localStorage and sessionStorage.')
|
||||
}
|
||||
}
|
||||
|
||||
const setProperty = (key, value) => {
|
||||
const webStorage = getStorage()
|
||||
const typeAndKey = key.split(':')
|
||||
if (typeAndKey.length === 2) {
|
||||
const propName = camelCasedWords(typeAndKey[1])
|
||||
persistObject[propName] = value
|
||||
if (typeAndKey[0] === 'G-JSON') {
|
||||
webStorage.setItem(key, JSON.stringify(value))
|
||||
} else {
|
||||
webStorage.setItem(key, value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// USER_ID -> userId
|
||||
const camelCasedWords = (string) => {
|
||||
if (typeof string !== 'string' || string.length === 0) {
|
||||
return string;
|
||||
}
|
||||
return string.split('_').map((word, index) => {
|
||||
if (index === 0) {
|
||||
return word.toLowerCase()
|
||||
} else {
|
||||
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
|
||||
}
|
||||
}).join('')
|
||||
}
|
||||
|
||||
if (Object.keys(persistObject).length == 0) {
|
||||
|
||||
const webStorage = getStorage()
|
||||
|
||||
for (let i = 0; i < webStorage.length; i++) {
|
||||
const key = webStorage.key(i)
|
||||
const typeAndKey = key.split(':')
|
||||
|
||||
if (typeAndKey.length === 2) {
|
||||
const value = webStorage.getItem(key)
|
||||
const propName = camelCasedWords(typeAndKey[1])
|
||||
if (typeAndKey[0] === 'G-INT') {
|
||||
persistObject[propName] = parseInt(value, 10)
|
||||
} else if (typeAndKey[0] === 'G-JSON') {
|
||||
try {
|
||||
persistObject[propName] = JSON.parse(value)
|
||||
} catch (e) {
|
||||
// 如果解析失败，保留原始字符串值
|
||||
persistObject[propName] = value
|
||||
console.error('解析 JSON 失败。')
|
||||
}
|
||||
} else {
|
||||
persistObject[propName] = value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...persistObject,
|
||||
setStorage: (key, value) => {
|
||||
setProperty(key, value)
|
||||
},
|
||||
clearStorage: () => {
|
||||
getStorage().clear()
|
||||
Object.assign(persistObject, {})
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,49 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import {
|
||||
createBrowserRouter,
|
||||
RouterProvider,
|
||||
} from 'react-router-dom'
|
||||
import '@/assets/global.css'
|
||||
import App from '@/views/App'
|
||||
import HotelList from '@/views/hotel/List'
|
||||
import HotelDetail from '@/views/hotel/Detail'
|
||||
import ErrorPage from '@/components/ErrorPage'
|
||||
|
||||
import { ThemeContext } from '@/stores/ThemeContext'
|
||||
import { isNotEmpty } from '@/utils/commons'
|
||||
|
||||
const { createRoot } = ReactDOM
|
||||
|
||||
const initRouter = async () => {
|
||||
return createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <App />,
|
||||
errorElement: <ErrorPage />,
|
||||
children: [
|
||||
{ index: true, element: <HotelList /> },
|
||||
{ path: 'hotel/list', element: <HotelList /> },
|
||||
{ path: 'hotel/:hotelId/:checkin/:checkout', element: <HotelDetail /> },
|
||||
]
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
const initAppliction = async () => {
|
||||
|
||||
const router = await initRouter()
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
//<React.StrictMode>
|
||||
<ThemeContext.Provider value={{ colorPrimary: '#00b96b', borderRadius: 4 }}>
|
||||
<RouterProvider
|
||||
router={router}
|
||||
fallbackElement={() => <div>Loading...</div>}
|
||||
/>
|
||||
</ThemeContext.Provider>
|
||||
//</React.StrictMode>
|
||||
)
|
||||
}
|
||||
|
||||
initAppliction()
|
||||
@ -0,0 +1,41 @@
|
||||
import { loadScript } from '@/utils/commons';
|
||||
import { PROJECT_NAME } from '@/config';
|
||||
|
||||
export const loadPageSpy = (title) => {
|
||||
|
||||
if (import.meta.env.DEV || window.$pageSpy) return
|
||||
|
||||
const PageSpySrc = [
|
||||
'https://page-spy.mycht.cn/page-spy/index.min.js',
|
||||
'https://page-spy.mycht.cn/plugin/data-harbor/index.min.js',
|
||||
'https://page-spy.mycht.cn/plugin/rrweb/index.min.js',
|
||||
];
|
||||
|
||||
Promise.all(PageSpySrc.map((src) => loadScript(src))).then(() => {
|
||||
// 注册插件
|
||||
PageSpy.registerPlugin(new DataHarborPlugin({ maximum: 2 * 1024 * 1024 }));
|
||||
// 实例化 PageSpy
|
||||
window.$pageSpy = new PageSpy({ api: 'page-spy.mycht.cn', project: PROJECT_NAME, title: title, autoRender: false });
|
||||
});
|
||||
};
|
||||
|
||||
export const uploadPageSpyLog = () => {
|
||||
window.$pageSpy.triggerPlugins('onOfflineLog', 'upload');
|
||||
}
|
||||
|
||||
export const PageSpyLog = () => {
|
||||
return (
|
||||
<>
|
||||
{window.$pageSpy && (
|
||||
<a
|
||||
className='text-primary'
|
||||
onClick={() => {
|
||||
window.$pageSpy.triggerPlugins('onOfflineLog', 'download');
|
||||
window.$pageSpy.triggerPlugins('onOfflineLog', 'upload');
|
||||
}}>
|
||||
上传Debug日志 ({window.$pageSpy.address.substring(0, 4)})
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,66 @@
|
||||
import { create } from 'zustand'
|
||||
import { devtools } from 'zustand/middleware'
|
||||
import { fetchJSON, postForm } from '@/utils/request'
|
||||
import { usingStorage } from '@/hooks/usingStorage'
|
||||
|
||||
export const fetchHotelList = async (hotelName, checkinDateString, checkoutDateString) => {
|
||||
const { errcode, data } = await fetchJSON(
|
||||
'http://202.103.68.93:3002/search_hotel',
|
||||
{ keyword: hotelName, checkin: checkinDateString, checkout: checkoutDateString }
|
||||
)
|
||||
return errcode !== 0 ? {} : data
|
||||
}
|
||||
|
||||
export const fetchAvailability = async (hotelId, checkinDateString, checkoutDateString) => {
|
||||
const { errcode, data } = await fetchJSON(
|
||||
'http://202.103.68.93:3002/availability',
|
||||
{ hotel_id: hotelId, checkin: checkinDateString, checkout: checkoutDateString }
|
||||
)
|
||||
return errcode !== 0 ? {} : data
|
||||
}
|
||||
|
||||
|
||||
const useHotelStore = create(devtools((set, get) => ({
|
||||
|
||||
selectedHotel: null,
|
||||
hotelList: [],
|
||||
roomList: [],
|
||||
|
||||
|
||||
selectHotel: (hotel) => {
|
||||
set(() => ({
|
||||
selectedHotel: hotel
|
||||
}))
|
||||
},
|
||||
|
||||
searchByCriteria: async(formValues) => {
|
||||
const resultArray = await fetchHotelList(
|
||||
formValues.hotelName,
|
||||
formValues.dataRange[0].format('YYYY-MM-DD'),
|
||||
formValues.dataRange[1].format('YYYY-MM-DD')
|
||||
)
|
||||
|
||||
console.info(resultArray)
|
||||
|
||||
set(() => ({
|
||||
hotelList: resultArray
|
||||
}))
|
||||
},
|
||||
|
||||
getRoomListByHotel: async(hotelId, checkin, checkout) => {
|
||||
const resultArray = await fetchAvailability(
|
||||
hotelId,
|
||||
checkin,
|
||||
checkout
|
||||
)
|
||||
|
||||
console.info(resultArray)
|
||||
|
||||
set(() => ({
|
||||
roomList: resultArray
|
||||
}))
|
||||
},
|
||||
|
||||
}), { name: 'hotelStore' }))
|
||||
|
||||
export default useHotelStore
|
||||
@ -0,0 +1,7 @@
|
||||
import { createContext, useContext } from 'react'
|
||||
|
||||
export const ThemeContext = createContext({})
|
||||
|
||||
export function useThemeContext() {
|
||||
return useContext(ThemeContext)
|
||||
}
|
||||
@ -0,0 +1,154 @@
|
||||
|
||||
import { BUILD_VERSION } from '@/config'
|
||||
|
||||
const customHeaders = []
|
||||
|
||||
// 添加 HTTP Reuqest 自定义头部
|
||||
export function appendRequestHeader(n, v) {
|
||||
customHeaders.push({
|
||||
name: n,
|
||||
value: v
|
||||
})
|
||||
}
|
||||
|
||||
function getRequestHeader() {
|
||||
return customHeaders.reduce((acc, item) => {
|
||||
acc[item.name] = item.value;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
const initParams = [];
|
||||
export function appendRequestParams(n, v) {
|
||||
initParams.push({
|
||||
name: n,
|
||||
value: v
|
||||
})
|
||||
}
|
||||
function getRequestInitParams() {
|
||||
return initParams.reduce((acc, item) => {
|
||||
acc[item.name] = item.value;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
function checkStatus(response) {
|
||||
if (response.status >= 200 && response.status < 300) {
|
||||
return response
|
||||
} else {
|
||||
const message =
|
||||
'Fetch error: ' + response.url + ' ' + response.status + ' (' +
|
||||
response.statusText + ')'
|
||||
const error = new Error(message)
|
||||
error.response = response
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
function checkBizCode(responseJson) {
|
||||
if (responseJson.errcode === 0) {
|
||||
return responseJson;
|
||||
} else {
|
||||
throw new Error(responseJson.errmsg + ': ' + responseJson.errcode);
|
||||
}
|
||||
}
|
||||
|
||||
export function fetchText(url) {
|
||||
const headerObj = getRequestHeader()
|
||||
return fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'X-Web-Version': BUILD_VERSION,
|
||||
...headerObj
|
||||
}
|
||||
}).then(checkStatus)
|
||||
.then(response => response.text())
|
||||
.catch(error => {
|
||||
throw error
|
||||
})
|
||||
}
|
||||
|
||||
export function fetchJSON(url, data = {}) {
|
||||
const initParams = getRequestInitParams();
|
||||
const params4get = Object.assign({}, initParams, data);
|
||||
const params = params4get ? new URLSearchParams(params4get).toString() : '';
|
||||
const ifp = url.includes('?') ? '&' : '?';
|
||||
const headerObj = getRequestHeader();
|
||||
const fUrl = params !== '' ? `${url}${ifp}${params}` : url;
|
||||
return fetch(fUrl, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'X-Web-Version': BUILD_VERSION,
|
||||
...headerObj
|
||||
}
|
||||
}).then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(checkBizCode)
|
||||
.catch(error => {
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
export function postForm(url, data) {
|
||||
const initParams = getRequestInitParams();
|
||||
Object.keys(initParams).forEach(key => {
|
||||
if (! data.has(key)) {
|
||||
data.append(key, initParams[key]);
|
||||
}
|
||||
});
|
||||
const headerObj = getRequestHeader()
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
headers: {
|
||||
'X-Web-Version': BUILD_VERSION,
|
||||
...headerObj
|
||||
}
|
||||
}).then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(checkBizCode)
|
||||
.catch(error => {
|
||||
throw error
|
||||
})
|
||||
}
|
||||
|
||||
export function postJSON(url, obj) {
|
||||
const initParams = getRequestInitParams();
|
||||
const params4get = Object.assign({}, initParams);
|
||||
const params = new URLSearchParams(params4get).toString();
|
||||
const ifp = url.includes('?') ? '&' : '?';
|
||||
const fUrl = params !== '' ? `${url}${ifp}${params}` : url;
|
||||
|
||||
const headerObj = getRequestHeader()
|
||||
return fetch(fUrl, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(obj),
|
||||
headers: {
|
||||
'Content-type': 'application/json; charset=UTF-8',
|
||||
'X-Web-Version': BUILD_VERSION,
|
||||
...headerObj
|
||||
}
|
||||
}).then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(checkBizCode)
|
||||
.catch(error => {
|
||||
throw error
|
||||
})
|
||||
}
|
||||
|
||||
export function postStream(url, obj) {
|
||||
const headerObj = getRequestHeader()
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(obj),
|
||||
headers: {
|
||||
'Content-type': 'application/octet-stream',
|
||||
'X-Web-Version': BUILD_VERSION,
|
||||
...headerObj
|
||||
}
|
||||
}).then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.catch(error => {
|
||||
throw error
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
import { Outlet, Link, NavLink } from 'react-router-dom';
|
||||
import { Layout, Menu, ConfigProvider, theme, Row, Col, Typography, Flex, App as AntApp } from 'antd';
|
||||
import 'antd/dist/reset.css';
|
||||
import AppLogo from '@/assets/logo-gh.png';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import ErrorBoundary from '@/components/ErrorBoundary';
|
||||
import { BUILD_VERSION, } from '@/config';
|
||||
import { useThemeContext } from '@/stores/ThemeContext';
|
||||
|
||||
|
||||
const { Header, Content, Footer } = Layout;
|
||||
const { Title } = Typography;
|
||||
|
||||
function App() {
|
||||
|
||||
const { colorPrimary } = useThemeContext()
|
||||
|
||||
console.info('theme: ', theme)
|
||||
|
||||
return (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: colorPrimary,
|
||||
},
|
||||
algorithm: theme.defaultAlgorithm,
|
||||
}}>
|
||||
<AntApp>
|
||||
<ErrorBoundary>
|
||||
<Layout className='min-h-screen'>
|
||||
<Header className='sticky top-0 z-10 w-full'>
|
||||
<Row gutter={{ md: 24 }} justify='start' align='middle'>
|
||||
<Col span={15}>
|
||||
<NavLink to='/'>
|
||||
<img src={AppLogo} className='float-left h-9 my-4 mr-6 ml-0 bg-white/30' alt='App logo' />
|
||||
</NavLink>
|
||||
<Menu
|
||||
theme='dark'
|
||||
mode='horizontal'
|
||||
selectedKeys={['hotel']}
|
||||
items={[
|
||||
{ key: 'hotel', label: <Link to='/hotel/list'>喜玩酒店</Link> }
|
||||
]}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Header>
|
||||
<Content className='p-6 m-0 min-h-72 bg-white flex justify-center'>
|
||||
<div className='max-w-3xl'>
|
||||
<Outlet />
|
||||
</div>
|
||||
</Content>
|
||||
<Footer>China Highlights International Travel Service Co., LTD, Version: {BUILD_VERSION}</Footer>
|
||||
</Layout>
|
||||
</ErrorBoundary>
|
||||
</AntApp>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@ -0,0 +1,144 @@
|
||||
import { createContext, useContext, useState } from 'react'
|
||||
import { Flex, Button, Image, Typography, Empty, Skeleton, Row, Col } from 'antd'
|
||||
|
||||
const HotelContext = createContext()
|
||||
|
||||
export function HotelList({ dataSource, loading, onChange }) {
|
||||
|
||||
if (dataSource && dataSource.length > 0) {
|
||||
const itemList = dataSource.map((data, index) => {
|
||||
return (
|
||||
<>
|
||||
<Skeleton active loading={loading} key={index}>
|
||||
<Row gutter={16} className='rounded shadow-md hover:shadow-lg hover:shadow-gray-400 p-2 border-solid border border-gray-100'>
|
||||
<Col span={24}>
|
||||
<Flex
|
||||
vertical gap='small'
|
||||
align='flex-start'
|
||||
justify='flex-start'
|
||||
>
|
||||
<Typography.Title level={5}>
|
||||
{data.hotel_name}
|
||||
</Typography.Title>
|
||||
<Typography.Text type='secondary'>{data.address}</Typography.Text>
|
||||
<span>{data.base_price.Price??0} 起</span>
|
||||
<Button size='small' type='primary' onClick={() => onChange(data)}>
|
||||
查看房型
|
||||
</Button>
|
||||
</Flex>
|
||||
</Col>
|
||||
</Row>
|
||||
</Skeleton>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<HotelContext.Provider value={{ onChange }}>
|
||||
<Flex vertical gap='small'>
|
||||
{itemList}
|
||||
</Flex>
|
||||
</HotelContext.Provider>
|
||||
)
|
||||
} else {
|
||||
return <Empty />
|
||||
}
|
||||
}
|
||||
|
||||
export function RoomList({ dataSource, loading, onChange }) {
|
||||
|
||||
const triggerChange = (changedValue) => {
|
||||
onChange?.(
|
||||
changedValue
|
||||
)
|
||||
}
|
||||
|
||||
if (dataSource && dataSource.length > 0) {
|
||||
const itemList = dataSource.map((room, index) => {
|
||||
let roomImage = <Empty description={false}/>
|
||||
if (room?.Images && room?.Images.length > 0) {
|
||||
roomImage = <Image src={room?.Images[0].Url} />
|
||||
}
|
||||
|
||||
return (
|
||||
<Skeleton active loading={loading} key={index}>
|
||||
<div className='rounded shadow-md hover:shadow-lg hover:shadow-gray-400 p-2 border-solid border border-gray-100'>
|
||||
<Typography.Title level={5}>
|
||||
{room.RoomName}, {room.BedTypeDesc}
|
||||
</Typography.Title>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={4}>
|
||||
<Flex vertical>
|
||||
{roomImage}
|
||||
<span>大小: {room.Area??0}m²</span>
|
||||
</Flex>
|
||||
</Col>
|
||||
<Col span={20}>
|
||||
{
|
||||
room.RatePlans.map((plan, index) => {
|
||||
return (
|
||||
<PlanItem key={index} room={room} plan={plan}></PlanItem>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Skeleton>
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<HotelContext.Provider value={{ triggerChange }}>
|
||||
<Flex gap='middle' vertical>
|
||||
{itemList}
|
||||
</Flex>
|
||||
</HotelContext.Provider>
|
||||
)
|
||||
} else {
|
||||
return <Empty />
|
||||
}
|
||||
}
|
||||
|
||||
const getDeductDesc = (type) => {
|
||||
let desc = '未知'
|
||||
if (type === 1) desc = '扣首日'
|
||||
else if (type === 2) desc = '扣全额'
|
||||
else if (type === 3) desc = '按价格多少百分比扣'
|
||||
else if (type === 4) desc = '免费取消'
|
||||
else if (type === 5) desc = '扣几晚'
|
||||
else if (type === 6) desc = '扣多少钱'
|
||||
|
||||
return desc
|
||||
}
|
||||
|
||||
const getMealDesc = (plan) => {
|
||||
const type = plan.MealType
|
||||
let desc = '未知'
|
||||
if (type === 1) desc = '早' + plan.Breakfast + '中' + plan.Lunch + '晚' + plan.Dinner
|
||||
else if (type === 2) desc = '半包'
|
||||
else if (type === 3) desc = '全包'
|
||||
else if (type === 4) desc = '午/晚二选一'
|
||||
else if (type === 5) desc = '早+午/晚二选一'
|
||||
|
||||
return desc
|
||||
}
|
||||
|
||||
const PlanItem = ({room, plan}) => {
|
||||
const { triggerChange } = useContext(HotelContext)
|
||||
return (
|
||||
<div className='p-2'>
|
||||
<Row gutter={[16, 16]} className=' divide-y divide-slate-700'>
|
||||
<Col span={6}><span>餐: {getMealDesc(plan)}</span></Col>
|
||||
<Col span={6}><span>取消: {plan.Cancelable ? plan.CancelRules.map(r => getDeductDesc(r.DeductType)).join(',') : '不'}</span></Col>
|
||||
<Col span={6}>
|
||||
<b>{plan.Price}</b>
|
||||
<small>{plan.Currency}</small>
|
||||
</Col>
|
||||
<Col span={4}><Button size='small' onClick={() => triggerChange({room, plan})}>
|
||||
选他
|
||||
</Button></Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,106 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom'
|
||||
import { Row, Col, Modal, Space, Form, Typography, DatePicker, Input, Button, App } from 'antd'
|
||||
import useHotelStore from '@/stores/Hotel'
|
||||
import dayjs from 'dayjs'
|
||||
import { HotelList, RoomList } from "./HotelComponents";
|
||||
import { isEmpty } from '@/utils/commons'
|
||||
const { Title } = Typography
|
||||
|
||||
const List = () => {
|
||||
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [searchForm] = Form.useForm()
|
||||
const [searchByCriteria, hotelList, selectHotel] =
|
||||
useHotelStore(state =>
|
||||
[state.searchByCriteria, state.hotelList, state.selectHotel])
|
||||
|
||||
const { notification } = App.useApp()
|
||||
|
||||
const navigate = useNavigate()
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
|
||||
const hotelName = searchParams.get('hotel')
|
||||
const checkinDateString = searchParams.get('checkin')
|
||||
const checkoutDateString = searchParams.get('checkout')
|
||||
|
||||
useEffect(() => {
|
||||
// http://localhost:5175/hotel/list?hotel=s&checkin=2024-8-20&checkout=2024-8-21
|
||||
if (isEmpty(hotelName) || isEmpty(checkinDateString) || isEmpty(checkoutDateString)) {
|
||||
console.info('criteria is null')
|
||||
} else {
|
||||
searchForm.setFieldsValue({
|
||||
dataRange: [dayjs(checkinDateString), dayjs(checkoutDateString)],
|
||||
hotelName: hotelName
|
||||
})
|
||||
setLoading(true)
|
||||
searchByCriteria(searchForm.getFieldValue())
|
||||
.finally(() => setLoading(false))
|
||||
}
|
||||
}, [])
|
||||
|
||||
const onSearchFinish = () => {
|
||||
const formValue = searchForm.getFieldValue()
|
||||
setSearchParams({
|
||||
hotel: formValue.hotelName,
|
||||
checkin: formValue.dataRange[0].format('YYYY-MM-DD'),
|
||||
checkout: formValue.dataRange[1].format('YYYY-MM-DD')
|
||||
})
|
||||
|
||||
setLoading(true)
|
||||
searchByCriteria(formValue)
|
||||
.finally(() => setLoading(false))
|
||||
}
|
||||
|
||||
const handleHotelChange = (hotel) => {
|
||||
selectHotel(hotel)
|
||||
navigate(`/hotel/${hotel.hotel_id}/${searchForm.getFieldValue().dataRange[0].format('YYYY-MM-DD')}/${searchForm.getFieldValue().dataRange[1].format('YYYY-MM-DD')}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Space direction='vertical' className='w-full'>
|
||||
<Title level={3}>酒店列表</Title>
|
||||
<Form
|
||||
name='searchForm'
|
||||
form={searchForm}
|
||||
layout='inline'
|
||||
onFinish={onSearchFinish}
|
||||
onFinishFailed={() => console.info('onFinishFailed')}
|
||||
autoComplete='off'
|
||||
>
|
||||
<Form.Item
|
||||
label={'入住时间'}
|
||||
name='dataRange'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '必填',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<DatePicker.RangePicker placeholder={['入住日期', '退房日期']} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={'酒店名称'}
|
||||
name='hotelName'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '必填',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input placeholder={'不能为空'} />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">搜索</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<HotelList loading={loading} dataSource={hotelList} onChange={h => handleHotelChange(h)}></HotelList>
|
||||
</Space>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default List
|
||||
@ -0,0 +1,26 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
import colors from 'tailwindcss/colors'
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
||||
safelist: [
|
||||
'text-primary',
|
||||
'text-danger',
|
||||
'text-muted',
|
||||
],
|
||||
darkMode: 'media',
|
||||
theme: {
|
||||
colors: {
|
||||
...colors,
|
||||
'primary': '#00b96b',
|
||||
'danger': '#ef4444',
|
||||
'muted': '#6b7280',
|
||||
},
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
corePlugins: {
|
||||
preflight: false,
|
||||
divideColor: true,
|
||||
},
|
||||
}
|
||||
|
||||
@ -0,0 +1,44 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import legacy from '@vitejs/plugin-legacy'
|
||||
import WindiCSS from 'vite-plugin-windicss'
|
||||
import packageJson from './package.json'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
const today = new dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
define: {
|
||||
__BUILD_DATE__: JSON.stringify(`${today}`),
|
||||
__BUILD_VERSION__: JSON.stringify(`${packageJson.version}`),
|
||||
},
|
||||
plugins: [
|
||||
react(), WindiCSS(),
|
||||
legacy({
|
||||
targets: ['defaults', 'not IE 11'],
|
||||
}),
|
||||
],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: '5175'
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': '/src',
|
||||
},
|
||||
},
|
||||
build: {
|
||||
emptyOutDir: true,
|
||||
chunkSizeWarningLimit: 555,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks(id) {
|
||||
if (id.includes('node_modules')) {
|
||||
return 'vendor'
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue