@yuku123/z-ops-frontend-component 0.1.0

package/src/components/ResourceOssPage/index.jsx

@@ -0,0 +1,36 @@
+/**
+ * 对象存储 (OSS Bucket 列表)
+ */
+import {useEffect, useState} from 'react'
+import {Button, message, Space, Table} from 'antd'
+import {FolderOpenOutlined, ReloadOutlined} from '@ant-design/icons'
+import {ossBucketApi} from '../../api'
+
+const ResourceOssPage = () => {
+    const [data, setData] = useState([])
+    const [loading, setLoading] = useState(false)
+    const fetchData = async () => { setLoading(true); try { setData(await ossBucketApi.list() || []) } catch { message.error('加载 Bucket 列表失败') } finally { setLoading(false) } }
+    useEffect(() => { fetchData() }, [])
+
+    const columns = [
+        {title: 'Bucket 名称', dataIndex: 'name', copyable: true},
+        {title: '创建时间', dataIndex: 'createdAt', width: 180},
+        {title: '存储类型', dataIndex: 'storageClass', width: 100, render: v => v || '标准'},
+        {title: '区域', dataIndex: 'region', width: 100},
+        {title: '对象数', dataIndex: 'objectCount', width: 100, render: v => v ?? '-'},
+        {title: '用量', dataIndex: 'sizeGb', width: 100, render: v => v != null ? `${v} GB` : '-'},
+    ]
+
+    return (
+        <div style={{padding: 24}}>
+            <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24}}>
+                <div><h2 style={{margin: 0, fontSize: 20, fontWeight: 600}}><FolderOpenOutlined style={{marginRight: 8}}/>对象存储</h2><span style={{color: '#8a8f98', fontSize: 14}}>OSS Bucket 与文件目录</span></div>
+                <Button icon={<ReloadOutlined/>} onClick={fetchData}>刷新</Button>
+            </div>
+            <div style={{background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, padding: 16}}>
+                <Table columns={columns} dataSource={data} loading={loading} rowKey="name" pagination={{pageSize: 10}} locale={{emptyText: '暂无 Bucket'}}/>
+            </div>
+        </div>
+    )
+}
+export default ResourceOssPage

package/src/components/SprintPage/index.jsx

@@ -0,0 +1,18 @@
+/**
+ * 迭代管理 (占位页面，后端 API 待开发)
+ */
+import {Empty} from 'antd'
+import {CalendarOutlined} from '@ant-design/icons'
+
+const SprintPage = () => (
+    <div style={{padding: 24}}>
+        <h2 style={{margin: '0 0 8px', fontSize: 20, fontWeight: 600}}>
+            <CalendarOutlined style={{marginRight: 8}}/>迭代管理
+        </h2>
+        <p style={{color: '#8a8f98', marginBottom: 24}}>管理研发迭代与里程碑</p>
+        <div style={{background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, padding: 48}}>
+            <Empty description="后端 API 开发中，敬请期待"/>
+        </div>
+    </div>
+)
+export default SprintPage

package/src/components/TaskPage/index.jsx

@@ -0,0 +1,42 @@
+/**
+ * 部署记录 (DeploymentRecord list, filtered by unit)
+ */
+import {useEffect, useState} from 'react'
+import {message, Select, Space, Table, Tag} from 'antd'
+import {deploymentUnitApi, recordApi} from '../../api'
+
+const TaskPage = () => {
+    const [data, setData] = useState([])
+    const [units, setUnits] = useState([])
+    const [selectedUnit, setSelectedUnit] = useState(null)
+    const [loading, setLoading] = useState(false)
+
+    useEffect(() => { (async () => { try { const list = await deploymentUnitApi.list() || []; setUnits(list); if (list.length) setSelectedUnit(list[0].id) } catch { message.error('加载部署单元失败') } })() }, [])
+    useEffect(() => { if (!selectedUnit) { setData([]); return }; (async () => { setLoading(true); try { setData(await recordApi.list(selectedUnit) || []) } catch { message.error('加载记录失败') } finally { setLoading(false) } })() }, [selectedUnit])
+
+    const statusMap = {SUCCESS: {text: '成功', color: 'green'}, FAILED: {text: '失败', color: 'red'}, RUNNING: {text: '运行中', color: 'processing'}, PENDING: {text: '等待中', color: 'default'}}
+    const columns = [
+        {title: 'ID', dataIndex: 'id', width: 60},
+        {title: '分支', dataIndex: 'branch', width: 120},
+        {title: 'Commit', dataIndex: 'commitId', width: 100, ellipsis: true, render: v => v ? <code>{v.substring(0, 8)}</code> : '-'},
+        {title: '部署人', dataIndex: 'deployer', width: 100},
+        {title: '触发方式', dataIndex: 'triggerType', width: 100, render: v => ({MANUAL: '手动', WEBHOOK: 'Webhook', SCHEDULE: '定时'}[v] || v || '-')},
+        {title: '开始时间', dataIndex: 'startedAt', width: 170},
+        {title: '结束时间', dataIndex: 'finishedAt', width: 170},
+        {title: '状态', dataIndex: 'status', width: 90, render: v => { const s = statusMap[v] || {text: v, color: 'default'}; return <Tag color={s.color}>{s.text}</Tag> }},
+        {title: '结果', dataIndex: 'result', ellipsis: true}
+    ]
+
+    return (
+        <div style={{padding: 24}}>
+            <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24}}>
+                <div><h2 style={{margin: 0, fontSize: 20, fontWeight: 600}}>部署记录</h2><span style={{color: '#8a8f98', fontSize: 14}}>查看历史部署记录</span></div>
+                <Space><span style={{color: '#8a8f98'}}>部署单元:</span><Select value={selectedUnit} onChange={setSelectedUnit} style={{width: 240}}>{units.map(u => <Select.Option key={u.id} value={u.id}>{u.name}</Select.Option>)}</Select></Space>
+            </div>
+            <div style={{background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, padding: 16}}>
+                <Table columns={columns} dataSource={data} loading={loading} rowKey="id" pagination={{pageSize: 10}} locale={{emptyText: '暂无部署记录'}}/>
+            </div>
+        </div>
+    )
+}
+export default TaskPage

package/src/index.js

@@ -0,0 +1,37 @@
+/**
+ * z-ops 共享前端组件库 - 导出所有可复用页面组件
+ * 打包后发布到 npm，供 z-opc-main-starter-frontend 等 shell 应用使用
+ *
+ * 使用方式:
+ *   import { ChannelPage, DeliveryPage, ... } from '@yuku123/z-ops-frontend-component'
+ */
+
+// 运维中心 - 直挂页面
+export {default as ChannelPage} from './components/ChannelPage'       // 渠道管理 (DeploymentTarget CRUD)
+export {default as DeliveryPage} from './components/DeliveryPage'     // 环境管理 (Environment CRUD)
+export {default as DeploymentPage} from './components/DeploymentPage' // 部署单元 (DeploymentUnit CRUD + deploy)
+export {default as TaskPage} from './components/TaskPage'             // 部署记录 (DeploymentRecord list)
+
+// 资源管理
+export {default as ResourceOssPage} from './components/ResourceOssPage' // OSS Bucket 列表
+export {default as DomainPage} from './components/DomainPage'           // 域名管理 (占位)
+export {default as EcsPage} from './components/EcsPage'                 // ECS 管理 (占位)
+export {default as RdsPage} from './components/RdsPage'                 // RDS 管理 (占位)
+
+// 研发协同
+export {default as RdOpsPage} from './components/RdOpsPage'   // 镜像构建记录
+export {default as SprintPage} from './components/SprintPage' // 迭代管理 (占位)
+
+// API 客户端 (供外部自定义扩展)
+export {
+    configureApiBaseURL,
+    deploymentUnitApi,
+    targetApi,
+    environmentApi,
+    recordApi,
+    webhookApi,
+    imageApi,
+    imageTagApi,
+    imageBuildApi,
+    ossBucketApi,
+} from './api'