@antv/dumi-theme-antv
Version:
AntV website theme based on dumi2.
34 lines • 4.99 kB
JavaScript
export var projectFiles = {
"/package.json": {
code: "{\n \"name\": \"antv-g2-example\",\n \"version\": \"1.0.0\",\n \"main\": \"/index.js\",\n \"dependencies\": {\n \"@antv/g2\": \"^5\"\n }\n }"
},
"/index.js": {
// 入口文件是纯 JS
code: "import { Chart } from '@antv/g2';\n\n const chart = new Chart({\n container: 'root',\n });\n\n chart.options({\n type: 'interval',\n autoFit: true,\n data: [\n { grade: '\u4E00\u5E74\u7EA7', count: 200 },\n { grade: '\u4E8C\u5E74\u7EA7', count: 250 },\n { grade: '\u4E09\u5E74\u7EA7', count: 300 },\n { grade: '\u56DB\u5E74\u7EA7', count: 350 },\n ],\n encode: { x: 'grade', y: 'count' },\n });\n\n chart.render();\n "
},
"/index.html": {
code: "<!DOCTYPE html>\n<html>\n<head>\n <title>Vanilla JS Example</title>\n</head>\n<body>\n <div id=\"root\"></div>\n <div id=\"container\"></div>\n <script src=\"index.js\"></script>\n</body>\n</html>"
}
};
export var code = {
modules: {
// package.json 文件是必须要的，其中 name, version, main, dependencies 必填
'/package.json': {
fpath: '/package.json',
code: "{\n \"name\": \"dark-card-app\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"dependencies\": {\n \"@ant-design/icons\": \"^5.2.6\",\n \"@alipay/bigfish\": \"^4.3.0\"\n },\n\"main\": \"src/index.jsx\"\n}\n"
},
// 入口文件默认是 /src/index.tsx，也可以配合 package.json main 字段指定其他入口
'/src/index.jsx': {
fpath: '/src/index.jsx',
code: "import React from '@alipay/bigfish/react';\n import ReactDOM from '@alipay/bigfish/react-dom';\nimport { ConfigProvider, theme } from '@alipay/bigfish/antd';\nimport App from './App';\nReactDOM.createRoot(document.getElementById('root')).render(\n <React.StrictMode>\n <ConfigProvider\n theme={{\n algorithm: theme.darkAlgorithm,\n token: {\n colorBgContainer: '#141414',\n colorBorderSecondary: '#303030',\n }\n }}\n >\n <App />\n </ConfigProvider>\n </React.StrictMode>\n);\n"
},
'/src/App.jsx': {
fpath: '/src/App.jsx',
code: "import React from '@alipay/bigfish/react';\nimport { Card, Avatar, Typography, Space } from '@alipay/bigfish/antd';\nimport { UserOutlined, ClockCircleOutlined, HeartOutlined, MessageOutlined } from '@ant-design/icons';\nimport './App.less';\nimport {styled} from '@alipay/bigfish';\nconst Title = styled.div`\n color: palevioletred;\n`;\n\nconst { Text } = Typography;\n\nconst DarkCard = () => {\n return (\n <div className=\"dark-card-container\">\n <Card\n className=\"dark-card\"\n cover={\n <div className=\"card-cover\">\n <div className=\"cover-image-placeholder\" />\n </div>\n }\n actions={[\n <Space key=\"time\">\n <ClockCircleOutlined />\n <Text className=\"action-text\">2 hours ago</Text>\n </Space>,\n <Space key=\"likes\">\n <HeartOutlined />\n <Text className=\"action-text\">128</Text>\n </Space>,\n <Space key=\"comments\">\n <MessageOutlined />\n <Text className=\"action-text\">24</Text>\n </Space>\n ]}\n >\n <Card.Meta\n avatar={<Avatar size={40} icon={<UserOutlined />} />}\n title={<Title>Dark Theme Card</Title>}\n description={\n <Text className=\"card-description\">\n This is a dark themed card with modern design elements.\n Perfect for displaying content in low-light interfaces.\n </Text>\n }\n />\n </Card>\n </div>\n );\n};\n\nexport default DarkCard;\n"
},
'/src/App.less': {
fpath: '/src/App.less',
code: ".dark-card-container {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background-color: #0a0a0a;\n padding: 20px;\n}\n\n.dark-card {\n width: 100%;\n max-width: 400px;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\n\n .ant-card-head {\n border-bottom: 1px solid #303030;\n }\n\n .ant-card-actions {\n background: #1a1a1a;\n border-top: 1px solid #303030;\n\n > li {\n border-right: 1px solid #303030 !important;\n }\n }\n}\n\n.card-cover {\n height: 200px;\n background: linear-gradient(135deg, #2c2c2c, #1a1a1a);\n position: relative;\n overflow: hidden;\n\n .cover-image-placeholder {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background:\n radial-gradient(circle at center, #3a3a3a 0%, #1f1f1f 100%);\n }\n}\n\n.card-description {\n color: rgba(255, 255, 255, 0.65) !important;\n}\n\n.action-text {\n color: rgba(255, 255, 255, 0.45) !important;\n font-size: 12px;\n}\n"
}
}
};