🚀 Add user profile page and optimize button color (#82)

* * 新增个人信息页面，优化按钮颜色
opsre · Dec 28, 2024 · 39d18a2 · 39d18a2
1 parent d03b9ba
commit 39d18a2
Show file tree

Hide file tree

Showing 42 changed files with 762 additions and 85 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@pansy/react-charts": "^1.0.0",
     "@quiet-front-end/json-schema-editor-antd": "^0.3.0",
+    "@shadcn/ui": "^0.0.4",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
@@ -29,13 +30,14 @@
     "boostrap": "^2.0.0",
     "codemirror": "^6.0.1",
     "codemirror-promql": "0.17.0",
+    "components": "^0.1.0",
     "downshift": "^9.0.6",
     "echarts": "^5.4.3",
     "echarts-for-react": "^3.0.2",
     "framer-motion": "^11.13.5",
     "jsoneditor": "^10.0.0",
     "jsoneditor-react": "^3.1.2",
-    "lucide-react": "^0.468.0",
+    "lucide-react": "^0.469.0",
     "moment": "^2.30.1",
     "next": "^15.1.0",
     "prom-client": "^15.1.0",
@@ -82,4 +84,4 @@
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.16"
   }
-}
+}
diff --git a/src/components/index.jsx b/src/components/index.jsx
@@ -15,13 +15,12 @@ import {
 } from '@ant-design/icons';
 import { DownOutlined, LeftOutlined } from '@ant-design/icons';
 import logoIcon from '../img/logo.jpeg'
-import githubIcon from '../img/github_logo.png'
 import { getUserInfo } from '../api/user'
 import Auth from '../utils/Auth'
 import { getTenantList } from '../api/tenant'
 import './index.css';
 import { ComponentSider } from './sider'
-import { useNavigate } from 'react-router-dom'
+import {Link, useNavigate} from 'react-router-dom'
 
 export const ComponentsContent = (props) => {
     const { name, c } = props
@@ -45,6 +44,10 @@ export const ComponentsContent = (props) => {
 
     const content = (
         <>
+            <Button type="text">
+                <Link to={`/profile`}>个人信息</Link>
+            </Button>
+
             <Button type="text" onClick={handleLogout}>
                 <span style={{color: 'red'}}>退出登录</span>
             </Button>
@@ -97,6 +100,8 @@ export const ComponentsContent = (props) => {
             }
             setTenantStatus(true);
         } catch (error) {
+            localStorage.clear()
+            message.error("获取租户错误, 退出登录")
             console.error(error)
         }
     }

diff --git a/src/pages/alert/rule/AlertRuleCreateModal.jsx b/src/pages/alert/rule/AlertRuleCreateModal.jsx
@@ -1511,7 +1511,13 @@ export const AlertRuleCreateModal = ({ visible, onClose, selectedRow, type, hand
                 </div>
 
                 <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                    <Button type="primary" htmlType="submit">
+                    <Button
+                        type="primary"
+                        htmlType="submit"
+                        style={{
+                            backgroundColor: '#000000'
+                        }}
+                    >
                         提交
                     </Button>
                 </div>

diff --git a/src/pages/alert/rule/create.jsx b/src/pages/alert/rule/create.jsx
@@ -1873,7 +1873,13 @@ export const AlertRule = ({ type }) => {
                 </div>
 
                 <div style={{display: 'flex', justifyContent: 'flex-end'}}>
-                    <Button type="primary" htmlType="submit">
+                    <Button
+                        type="primary"
+                        htmlType="submit"
+                        style={{
+                            backgroundColor: '#000000'
+                        }}
+                    >
                         提交
                     </Button>
                 </div>

diff --git a/src/pages/alert/rule/index.jsx b/src/pages/alert/rule/index.jsx
@@ -288,7 +288,12 @@ export const AlertRuleList = () => {
                 </div>
                 <div>
                     <Link to={`/ruleGroup/${id}/rule/add`}>
-                        <Button type="primary"> 创 建 </Button>
+                        <Button
+                            type="primary"
+                            style={{
+                                backgroundColor: '#000000'
+                            }}
+                        > 创 建 </Button>
                     </Link>
                 </div>
             </div>

diff --git a/src/pages/alert/ruleGroup/AlertRuleGroupCreateModal.jsx b/src/pages/alert/ruleGroup/AlertRuleGroupCreateModal.jsx
@@ -101,7 +101,13 @@ export const AlertRuleGroupCreateModal = ({ visible, onClose, selectedRow, type,
                 </MyFormItem>
 
                 <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                    <Button type="primary" htmlType="submit">
+                    <Button
+                        type="primary"
+                        htmlType="submit"
+                        style={{
+                            backgroundColor: '#000000'
+                        }}
+                    >
                         提交
                     </Button>
                 </div>

diff --git a/src/pages/alert/ruleGroup/index.jsx b/src/pages/alert/ruleGroup/index.jsx
@@ -192,7 +192,14 @@ export const AlertRuleGroup = ({ }) => {
                     />
                 </div>
                 <div>
-                    <Button type="primary" onClick={() => setCreateModalVisible(true)} style={{marginLeft: 'auto'}}>
+                    <Button
+                        type="primary"
+                        onClick={() => setCreateModalVisible(true)}
+                        style={{
+                            marginLeft: 'auto',
+                            backgroundColor: '#000000'
+                        }}
+                    >
                         创建
                     </Button>
                 </div>

diff --git a/src/pages/alert/tmpl/RuleTemplateCreateModal.jsx b/src/pages/alert/tmpl/RuleTemplateCreateModal.jsx
@@ -840,7 +840,13 @@ const RuleTemplateCreateModal = ({ visible, onClose, selectedRow, type, handleLi
 
                 {type !== 'view' &&
                     <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                        <Button type="primary" htmlType="submit">
+                        <Button
+                            type="primary"
+                            htmlType="submit"
+                            style={{
+                                backgroundColor: '#000000'
+                            }}
+                        >
                             提交
                         </Button>
                     </div>

diff --git a/src/pages/alert/tmpl/index.jsx b/src/pages/alert/tmpl/index.jsx
@@ -198,7 +198,13 @@ export const RuleTemplate = () => {
                     <Search allowClear placeholder="输入搜索关键字" onSearch={onSearch} style={{ width: 300 }} />
                 </div>
                 <div>
-                    <Button type="primary" onClick={() => setVisible(true)}>
+                    <Button
+                        type="primary"
+                        onClick={() => setVisible(true)}
+                        style={{
+                            backgroundColor: '#000000'
+                        }}
+                    >
                         创建
                     </Button>
                 </div>
@@ -227,7 +233,12 @@ export const RuleTemplate = () => {
                             <Button onClick={handleCloseSelectedRuleGroup} style={{marginRight: '10px'}}>
                                 取消
                             </Button>
-                            <Button type="primary" onClick={handleSubmitUseTmplToRule}>
+                            <Button
+                                type="primary"
+                                onClick={handleSubmitUseTmplToRule}
+                                style={{
+                                    backgroundColor: '#000000'
+                                }}>
                                 提交
                             </Button>
                         </div>

diff --git a/src/pages/alert/tmplGroup/RuleTemplateGroupCreateModal.jsx b/src/pages/alert/tmplGroup/RuleTemplateGroupCreateModal.jsx
@@ -103,7 +103,13 @@ const RuleTemplateGroupCreateModal = ({ visible, onClose, selectedRow, openType,
                 </MyFormItem>
 
                 <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                    <Button type="primary" htmlType="submit">
+                    <Button
+                        type="primary"
+                        htmlType="submit"
+                        style={{
+                            backgroundColor: '#000000'
+                        }}
+                    >
                         提交
                     </Button>
                 </div>

diff --git a/src/pages/alert/tmplGroup/index.jsx b/src/pages/alert/tmplGroup/index.jsx
@@ -229,7 +229,13 @@ export const RuleTemplateGroup = () => {
                         />
                     </div>
                     <div>
-                        <Button type="primary" onClick={() => setVisible(true)}>
+                        <Button
+                            type="primary"
+                            onClick={() => setVisible(true)}
+                            style={{
+                                backgroundColor: '#000000'
+                            }}
+                        >
                             创建
                         </Button>
                     </div>
@@ -251,11 +257,11 @@ export const RuleTemplateGroup = () => {
                         handleList={handleList}/>
                 </div>
 
-                <div style={{overflowX: 'auto', marginTop: 10}}>
+                <div style={{ overflowX: 'auto', marginTop: 10 }}>
                     <Table
                         columns={columns}
                         dataSource={list}
-                        scroll={{x: 1000, y: height - 400}}
+                        scroll={{ y: height - 400 }}
                     />
                 </div>
             </div>

diff --git a/src/pages/dashboards/folder/create.jsx b/src/pages/dashboards/folder/create.jsx
@@ -120,7 +120,13 @@ const CreateFolderModal = ({ visible, onClose, selectedRow, type, handleList })
                 </MyFormItem>
 
                 <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                    <Button type="primary" htmlType="submit">
+                    <Button
+                        type="primary"
+                        htmlType="submit"
+                        style={{
+                            backgroundColor: '#000000'
+                        }}
+                    >
                         创建
                     </Button>
                 </div>

diff --git a/src/pages/dashboards/folder/index.jsx b/src/pages/dashboards/folder/index.jsx
@@ -140,7 +140,13 @@ export const DashboardFolder = () => {
                     />
                 </div>
                 <div>
-                    <Button type="primary" onClick={() => { setCreateModalVisible(true) }} >
+                    <Button
+                        type="primary"
+                        onClick={() => { setCreateModalVisible(true) }}
+                        style={{
+                            backgroundColor: '#000000'
+                        }}
+                    >
                         创建
                     </Button>
                 </div>

diff --git a/src/pages/datasources/DatasourceCreateModal.jsx b/src/pages/datasources/DatasourceCreateModal.jsx
@@ -439,7 +439,15 @@ export const CreateDatasourceModal = ({ visible, onClose, selectedRow, type, han
                     <Button type="default" onClick={handleTestConnection}>
                         连接测试
                     </Button>
-                    <Button type="primary" htmlType="submit" loading={submitLoading} onClick={handleSubmit}>
+                    <Button
+                        type="primary"
+                        htmlType="submit"
+                        loading={submitLoading}
+                        onClick={handleSubmit}
+                        style={{
+                            backgroundColor: '#000000'
+                        }}
+                    >
                         提交
                     </Button>
                 </div>

diff --git a/src/pages/datasources/index.jsx b/src/pages/datasources/index.jsx
@@ -187,7 +187,13 @@ export const Datasources = () => {
                     />
                 </div>
                 <div>
-                    <Button type="primary" onClick={() => setVisible(true)}>
+                    <Button
+                        type="primary"
+                        onClick={() => setVisible(true)}
+                        style={{
+                            backgroundColor: '#000000'
+                        }}
+                    >
                         创建
                     </Button>
                 </div>

diff --git a/src/pages/duty/DutyManageCreateModal.jsx b/src/pages/duty/DutyManageCreateModal.jsx
@@ -160,7 +160,13 @@ export const CreateDutyModal = ({ visible, onClose, handleList, selectedRow, typ
                 </Form.Item>
 
                 <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                    <Button type="primary" htmlType="submit">
+                    <Button
+                        type="primary"
+                        htmlType="submit"
+                        style={{
+                            backgroundColor: '#000000'
+                        }}
+                    >
                         提交
                     </Button>
                 </div>

diff --git a/src/pages/duty/calendar/CreateCalendar.jsx b/src/pages/duty/calendar/CreateCalendar.jsx
@@ -262,7 +262,13 @@ export const CreateCalendarModal = ({ visible, onClose, dutyId }) => {
             </Form>
 
             <div style={{display: 'flex', justifyContent: 'flex-end'}}>
-                <Button type="primary" onClick={generateCalendar}>
+                <Button
+                    type="primary"
+                    onClick={generateCalendar}
+                    style={{
+                        backgroundColor: '#000000'
+                    }}
+                >
                     提交
                 </Button>
             </div>

diff --git a/src/pages/duty/calendar/UpdateCalendar.jsx b/src/pages/duty/calendar/UpdateCalendar.jsx
@@ -89,7 +89,14 @@ export const UpdateCalendarModal = ({ visible, onClose, time, tenantId, dutyId,
 
             </Form.Item>
 
-            <Button type="primary" htmlType="submit" onClick={handleFormSubmit}>
+            <Button
+                type="primary"
+                htmlType="submit"
+                onClick={handleFormSubmit}
+                style={{
+                    backgroundColor: '#000000'
+                }}
+            >
                 提交
             </Button>
 

diff --git a/src/pages/duty/index.jsx b/src/pages/duty/index.jsx
@@ -176,7 +176,13 @@ export const DutyManage = () => {
     return (
         <>
             <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                <Button type="primary" onClick={() => setVisible(true)}>
+                <Button
+                    type="primary"
+                    onClick={() => setVisible(true)}
+                    style={{
+                        backgroundColor: '#000000'
+                    }}
+                >
                     创建
                 </Button>            </div>
             <div style={{ display: 'flex' }}>

diff --git a/src/pages/members/role/UserRoleCreateModal.jsx b/src/pages/members/role/UserRoleCreateModal.jsx
@@ -170,7 +170,13 @@ const UserRoleCreateModal = ({ visible, onClose, selectedRow, type, handleList }
                 </MyFormItem>
 
                 <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                    <Button type="primary" htmlType="submit">
+                    <Button
+                        type="primary"
+                        htmlType="submit"
+                        style={{
+                            backgroundColor: '#000000'
+                        }}
+                    >
                         提交
                     </Button>
                 </div>

diff --git a/src/pages/members/role/index.jsx b/src/pages/members/role/index.jsx
@@ -120,7 +120,13 @@ export const UserRole = () => {
     return (
         <>
             <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                <Button type="primary" onClick={() => setVisible(true)}>
+                <Button
+                    type="primary"
+                    onClick={() => setVisible(true)}
+                    style={{
+                        backgroundColor: '#000000'
+                    }}
+                >
                     创建
                 </Button>
             </div>

diff --git a/src/pages/members/user/UserChangePass.jsx b/src/pages/members/user/UserChangePass.jsx
@@ -66,7 +66,13 @@ const UserChangePass = ({ visible, onClose, userid, username }) => {
                 </Form.Item>
                 <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                     <Form.Item wrapperCol={{ offset: 100, span: 16 }}>
-                        <Button type="primary" htmlType="submit">
+                        <Button
+                            type="primary"
+                            htmlType="submit"
+                            style={{
+                                backgroundColor: '#000000'
+                            }}
+                        >
                             提交
                         </Button>
                     </Form.Item>