tab

new-react-admin-ui/src/pages/dashboard/DashboardList.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import "./styles.css";
+import { Card, CardContent } from '@mui/material';
+import { Title } from 'react-admin';
+
+const DashboardList = () => {
+    
+    const [tabIndex, setTabIndex] = useState(0);
+    const [currentTime, setCurrentTime] = useState('');
+    
+    // 添加useEffect钩子来动态更新时间
+    useEffect(() => {
+        // 格式化当前时间为YYYY/MM/DD HH:MM:SS格式
+        const formatTime = () => {
+            const now = new Date();
+            const year = now.getFullYear();
+            const month = String(now.getMonth() + 1).padStart(2, '0');
+            const day = String(now.getDate()).padStart(2, '0');
+            const hours = String(now.getHours()).padStart(2, '0');
+            const minutes = String(now.getMinutes()).padStart(2, '0');
+            
+            return `${year}/${month}/${day} ${hours}:${minutes}`;
+        };
+        
+        // 立即设置一次时间
+        setCurrentTime(formatTime());
+        
+        // 设置定时器，每秒更新一次时间
+        const timer = setInterval(() => {
+            setCurrentTime(formatTime());
+        }, 1000);
+        
+        // 组件卸载时清除定时器
+        return () => clearInterval(timer);
+    }, []);
+    
+    return (
+        <Card>
+            <Title title="Dashboard" />
+            <CardContent>
+                <div style={{ maxWidth: '100%', fontFamily: 'Arial, sans-serif', padding: '0 10px' }}>
+                    <div className="order-info-container">
+                        <div className="order-info-section">
+                            {/* 修改为包含图片的布局 */}
+                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                                <div style={{ display: 'flex', alignItems: 'center' }}>
+                                    {/* <img
+                                        src="/base.png"
+                                        alt="Base Image"
+                                    /> */}
+                                    <div style={{ fontSize: '14px', fontWeight: 'bold' }}>キャパシティ設定システム</div>
+                                </div>
+
+                                <a 
+                                    onClick={() => { }} 
+                                    style={{
+                                        padding: '5px 15px',
+                                        cursor: 'pointer',
+                                        fontSize: '16px',
+                                    }}
+                                >
+                                    ログアウト
+                                </a>
+                            </div>
+                            <div style={{ marginTop: '5px' }}>
+                                <div style={{ fontSize: '18px', color: '#666',float:'right' }}>{currentTime}</div>
+                            </div>
+                        </div>
+
+                        <Tabs selectedIndex={tabIndex} onSelect={(index) => setTabIndex(index)}>
+                            <TabList className="custom-tab-list">
+                                <Tab className="custom-tab">キャパシティ設定</Tab>
+                                <Tab className="custom-tab">過去ログ</Tab>
+                                <Tab className="custom-tab">ラベル生成一覧</Tab>
+                                <Tab className="custom-tab">ユーザ管理</Tab>
+                            </TabList>
+
+                            <TabPanel>
+                                <div style={{ padding: '20px' }}>
+                                    <h3>キャパシティ設定</h3>
+                                    <p>这里是キャパシティ設定的内容</p>
+                                </div>
+                            </TabPanel>
+
+                            <TabPanel>
+                                <div style={{ padding: '20px' }}>
+                                    <h3>過去ログ</h3>
+                                    <p>这里是過去ログ的内容</p>
+                                </div>
+                            </TabPanel>
+
+                            <TabPanel>
+                                <div style={{ padding: '20px' }}>
+                                    <h3>ラベル生成一覧</h3>
+                                    <p>这里是ラベル生成一覧的内容</p>
+                                </div>
+                            </TabPanel>
+
+                            <TabPanel>
+                                <div style={{ padding: '20px' }}>
+                                    <h3>ユーザ管理</h3>
+                                    <p>这里是ユーザ管理的内容</p>
+                                </div>
+                            </TabPanel>
+                        </Tabs>
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
+};
+
+export default DashboardList;

new-react-admin-ui/src/pages/dashboard/styles.css

@@ -0,0 +1,373 @@
+.example-wrapper {
+  display: flex;
+  height: 100%;
+}
+
+.inner-col {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.inner-col.vertical-toolbar {
+  display: flex;
+  flex: none;
+  width: 100px;
+  align-items: center;
+  justify-content: center;
+}
+
+.toolbar {
+  white-space: nowrap;
+}
+
+.vertical-toolbar>span {
+  padding: 10px;
+  margin: 10px;
+  cursor: default;
+  user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-modify: none;
+}
+
+button.factory {
+  height: 25px;
+  border-radius: 5px;
+  border: none;
+  color: white;
+  outline: none;
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+button i {
+  margin-right: 10px;
+}
+
+.bin i {
+  transform: scale(1);
+  transition: transform 500ms;
+}
+
+.version-select-container {
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+}
+
+.version-select-container label {
+  margin: 0 1%;
+  white-space: nowrap;
+  font-size: 14px;
+}
+
+.version-select-container select {
+  padding: 5px 35px;
+  font-size: 14px;
+  margin-left: 20px;
+  padding-left: 10px;
+}
+
+.edit-btn {
+  margin-left: auto;
+  padding: 7px 4%;
+  background-color: #000;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  float: right;
+}
+
+.action-btn {
+  background-color: #000;
+  color: #fff;
+  border: none;
+  padding: 7px 20px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.history-title-custom {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  display: block;
+}
+
+.history-table-custom {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.type-td {
+  padding: 5px 20px;
+}
+
+.date-td {
+  padding: 5px 20px;
+}
+
+.action-td {
+  padding: 5px 20px;
+}
+
+.history-title-custom {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  display: block;
+}
+
+.order-info-section {
+  margin-bottom: 35px;
+}
+
+h3 {
+  margin: 0 0 5px 0;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.message-btn {
+  float: right;
+  padding: 7px 50px;
+  background-color: #000;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  top: -17px;
+}
+
+.order-info-row {
+  margin: 10px 0 10px 20px;
+  font-size: 14px;
+}
+
+.status-section {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 8px;
+  margin-left: 10px;
+}
+
+.status-section th,
+.status-section td {
+  padding: 5px 10px;
+  text-align: left;
+  font-size: 14px;
+}
+
+.status-section th {
+  font-weight: normal;
+}
+
+.custom-tab-list {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  position: relative;
+  margin: 30px 0;
+}
+
+.custom-tab {
+  padding: 10px 20px;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  font-weight: bold;
+  transition: all 0.3s ease;
+  position: relative;
+  background: none;
+  margin: 0 0.5%;
+}
+
+/* 未选中状态 - 確定後样式 */
+.custom-tab:not(.react-tabs__tab--selected) {
+  color: #fff;
+  background-color: #A6A6A6;
+}
+
+/* 选中状态 - 確定前样式 */
+.custom-tab.react-tabs__tab--selected {
+  color: #fff;
+  background-color: #000;
+}
+
+/* 底部指示线 */
+.custom-tab-list::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: #ddd;
+  z-index: 1;
+}
+
+/* 移除默认焦点样式 */
+.custom-tab:focus {
+  box-shadow: none;
+}
+
+.horizontal-header {
+  text-align: center;
+  white-space: normal;
+  padding: 10px 5px;
+  font-weight: bold;
+  height: 100px;
+  border-right: 1px solid #dde2eb;
+  border-left: 1px solid #dde2eb;
+  border-bottom: 1px solid #dde2eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 移除列宽调整手柄 */
+.ag-header-cell-resize {
+  display: none !important;
+}
+
+.ag-pinned-left-header .ag-header-cell,
+.ag-pinned-left-cols-container .ag-cell {
+  font-weight: bold;
+}
+
+/* .ag-theme-alpine {
+    --ag-border-color: #dde2eb;
+    --ag-cell-horizontal-border: solid 1px #dde2eb;
+    --ag-header-horizontal-border: solid 1px #dde2eb;
+    --ag-header-vertical-border: solid 1px #dde2eb;
+    --ag-cell-vertical-border: solid 1px #dde2eb;
+    --ag-grid-size: 1px;  } */
+.ag-header {
+  border-bottom: 2px solid #c1c8d4;
+}
+
+.ag-theme-alpine .ag-row-odd {
+  background-color: #fafbfc;
+}
+
+.toolbar {
+  padding: 12px 16px;
+  background: #fff;
+  border: 1px solid #dde2eb;
+  border-radius: 6px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.version-select-container {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin: 16px 0;
+}
+
+.edit-btn {
+  padding: 6px 12px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.edit-btn:hover {
+  background-color: #40a9ff;
+}
+
+.custom-dropdown {
+  /* padding: 4px; */
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%;
+  height: 100%;
+}
+
+.custom-checkbox {
+  display: block;
+  margin: 0 auto;
+  width: 16px;
+  height: 16px
+}
+
+.ag-cell {
+  border-right: 1px solid #dde2eb !important;
+  border-left: 1px solid #dde2eb !important;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+}
+
+.ag-header-group-cell {
+  border-right: 1px solid #dde2eb !important;
+  border-left: 1px solid #dde2eb !important;
+}
+
+.confirm-content {
+  float: left;
+  margin: 10px 1%;
+  height: 150px;
+  width: 20%;
+}
+
+.clear {
+  clear: both;
+}
+
+.payment {
+  float: left;
+  width: 30%;
+  height: 100%;
+}
+
+.payment-content {
+  float: left;
+  margin: 10px 1%;
+  height: 150px;
+  width: 100%;
+}
+
+.add-row-btn {
+  background: transparent;
+  border: none;
+  color: #0070c0;
+  cursor: pointer;
+  margin-left: 5px;
+  float: right;
+}
+
+.ag-cell[col-id="date"],
+.ag-cell[col-id="dayOfWeek"] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+}
+
+.ag-cell[col-id="status"] {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+.ag-header-cell-comp-wrapper{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.lineCdCty{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ag-header-cell-label{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}