@lvetechs/create-app 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/package.json +1 -1
  2. package/src/index.js +18 -4
  3. package/templates/react/.env +3 -0
  4. package/templates/react/.env.development +3 -0
  5. package/templates/react/.env.production +3 -0
  6. package/templates/react/index.html +1 -1
  7. package/templates/react/package.json +45 -45
  8. package/templates/react/pnpm-lock.yaml +166 -5
  9. package/templates/react/src/hooks/useForm.ts +77 -0
  10. package/templates/react/src/layouts/DefaultLayout.tsx +6 -1
  11. package/templates/react/src/layouts/menuConfig.ts +3 -33
  12. package/templates/react/src/main.tsx +3 -0
  13. package/templates/react/src/router/index.tsx +0 -39
  14. package/templates/react/src/stores/app.ts +141 -3
  15. package/templates/react/src/stores/notification.ts +128 -0
  16. package/templates/react/src/stores/permission.ts +183 -0
  17. package/templates/react/src/stores/user.ts +151 -4
  18. package/templates/react/src/views/home/index.tsx +205 -43
  19. package/templates/react/src/views/system/user/index.tsx +171 -5
  20. package/templates/react/tsconfig.json +1 -1
  21. package/templates/react/vite.config.ts +7 -3
  22. package/templates/vue/.env +2 -2
  23. package/templates/vue/.env.development +2 -2
  24. package/templates/vue/.env.production +2 -2
  25. package/templates/vue/index.html +1 -1
  26. package/templates/vue/package.json +0 -1
  27. package/templates/vue/pnpm-lock.yaml +3307 -3307
  28. package/templates/vue/src/auto-imports.d.ts +5 -0
  29. package/templates/vue/src/layouts/DefaultLayout.vue +2 -3
  30. package/templates/vue/src/layouts/menuConfig.ts +3 -33
  31. package/templates/vue/src/router/index.ts +4 -89
  32. package/templates/vue/src/stores/app.ts +133 -2
  33. package/templates/vue/src/stores/notification.ts +172 -0
  34. package/templates/vue/src/stores/permission.ts +184 -0
  35. package/templates/vue/src/stores/user.ts +109 -2
  36. package/templates/vue/src/views/home/index.vue +8 -8
  37. package/templates/react/_gitignore +0 -25
  38. package/templates/react/src/views/about/index.tsx +0 -40
  39. package/templates/react/src/views/login/index.tsx +0 -138
  40. package/templates/react/src/views/register/index.tsx +0 -143
  41. package/templates/react/src/views/result/fail.tsx +0 -39
  42. package/templates/react/src/views/result/success.tsx +0 -35
  43. package/templates/react/src/views/screen/index.tsx +0 -120
  44. package/templates/react/src/views/system/log/login.tsx +0 -51
  45. package/templates/react/src/views/system/log/operation.tsx +0 -47
  46. package/templates/react/src/views/system/menu/index.tsx +0 -62
  47. package/templates/react/src/views/system/role/index.tsx +0 -63
  48. package/templates/react/tsconfig.node.json +0 -11
  49. package/templates/vue/_gitignore +0 -25
  50. package/templates/vue/src/views/about/index.vue +0 -67
  51. package/templates/vue/src/views/login/index.vue +0 -153
  52. package/templates/vue/src/views/register/index.vue +0 -169
  53. package/templates/vue/src/views/result/fail.vue +0 -92
  54. package/templates/vue/src/views/result/success.vue +0 -92
  55. package/templates/vue/src/views/screen/index.vue +0 -150
  56. package/templates/vue/src/views/system/log/login.vue +0 -51
  57. package/templates/vue/src/views/system/log/operation.vue +0 -47
  58. package/templates/vue/src/views/system/menu/index.vue +0 -58
  59. package/templates/vue/src/views/system/role/index.vue +0 -59
@@ -1,143 +0,0 @@
1
- import { useState } from 'react'
2
- import { useNavigate, Link } from 'react-router-dom'
3
-
4
- export default function Register() {
5
- const navigate = useNavigate()
6
- const [form, setForm] = useState({ username: '', password: '', confirmPassword: '' })
7
- const [loading, setLoading] = useState(false)
8
-
9
- async function handleRegister(e: React.FormEvent) {
10
- e.preventDefault()
11
- if (!form.username || !form.password) {
12
- alert('请填写完整信息')
13
- return
14
- }
15
- if (form.password !== form.confirmPassword) {
16
- alert('两次密码输入不一致')
17
- return
18
- }
19
-
20
- setLoading(true)
21
- try {
22
- // TODO: 调用注册 API
23
- alert('注册成功!')
24
- navigate('/login')
25
- } catch (error) {
26
- console.error('注册失败:', error)
27
- } finally {
28
- setLoading(false)
29
- }
30
- }
31
-
32
- return (
33
- <div className="register-page">
34
- <div className="register-card">
35
- <h2>用户注册</h2>
36
- <form onSubmit={handleRegister}>
37
- <div className="form-item">
38
- <label>用户名</label>
39
- <input
40
- type="text"
41
- placeholder="请输入用户名"
42
- autoComplete="username"
43
- value={form.username}
44
- onChange={(e) => setForm({ ...form, username: e.target.value })}
45
- />
46
- </div>
47
- <div className="form-item">
48
- <label>密码</label>
49
- <input
50
- type="password"
51
- placeholder="请输入密码"
52
- autoComplete="new-password"
53
- value={form.password}
54
- onChange={(e) => setForm({ ...form, password: e.target.value })}
55
- />
56
- </div>
57
- <div className="form-item">
58
- <label>确认密码</label>
59
- <input
60
- type="password"
61
- placeholder="请再次输入密码"
62
- autoComplete="new-password"
63
- value={form.confirmPassword}
64
- onChange={(e) => setForm({ ...form, confirmPassword: e.target.value })}
65
- />
66
- </div>
67
- <button type="submit" className="register-btn" disabled={loading}>
68
- {loading ? '注册中...' : '注 册'}
69
- </button>
70
- <div className="to-login">
71
- 已有账号?<Link to="/login">立即登录</Link>
72
- </div>
73
- </form>
74
- </div>
75
-
76
- <style>{`
77
- .register-page {
78
- height: 100vh;
79
- display: flex;
80
- align-items: center;
81
- justify-content: center;
82
- background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
83
- }
84
- .register-card {
85
- width: 400px;
86
- padding: 40px;
87
- background: #fff;
88
- border-radius: 12px;
89
- box-shadow: 0 20px 60px rgba(0,0,0,0.15);
90
- }
91
- .register-card h2 {
92
- text-align: center;
93
- margin-bottom: 32px;
94
- color: #333;
95
- font-size: 24px;
96
- }
97
- .form-item {
98
- margin-bottom: 20px;
99
- }
100
- .form-item label {
101
- display: block;
102
- margin-bottom: 6px;
103
- font-size: 14px;
104
- color: #606266;
105
- }
106
- .form-item input {
107
- width: 100%;
108
- padding: 10px 12px;
109
- border: 1px solid #dcdfe6;
110
- border-radius: 6px;
111
- font-size: 14px;
112
- outline: none;
113
- transition: border-color 0.2s;
114
- box-sizing: border-box;
115
- }
116
- .form-item input:focus { border-color: #43e97b; }
117
- .form-item input::placeholder { color: #c0c4cc; }
118
- .register-btn {
119
- width: 100%;
120
- padding: 12px;
121
- background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
122
- color: #fff;
123
- border: none;
124
- border-radius: 6px;
125
- font-size: 16px;
126
- cursor: pointer;
127
- transition: opacity 0.2s;
128
- margin-top: 8px;
129
- }
130
- .register-btn:hover { opacity: 0.9; }
131
- .register-btn:disabled { opacity: 0.6; cursor: not-allowed; }
132
- .to-login {
133
- text-align: center;
134
- margin-top: 16px;
135
- font-size: 14px;
136
- color: #909399;
137
- }
138
- .to-login a { color: #43e97b; font-weight: 500; }
139
- `}</style>
140
- </div>
141
- )
142
- }
143
-
@@ -1,39 +0,0 @@
1
- import { useNavigate } from 'react-router-dom'
2
- import '@/styles/page-common.scss'
3
-
4
- export default function ResultFail() {
5
- const navigate = useNavigate()
6
-
7
- return (
8
- <div
9
- style={{
10
- height: '100vh',
11
- display: 'flex',
12
- alignItems: 'center',
13
- justifyContent: 'center',
14
- backgroundColor: '#f5f7fa'
15
- }}
16
- >
17
- <div className="page-card" style={{ textAlign: 'center', padding: '60px 80px' }}>
18
- <div style={{ fontSize: 64, marginBottom: 20 }}>❌</div>
19
- <h1 style={{ fontSize: 24, marginBottom: 12 }}>操作失败</h1>
20
- <p style={{ fontSize: 15, color: '#909399', marginBottom: 32 }}>
21
- 抱歉,您的操作未能完成,请检查后重试。
22
- </p>
23
- <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
24
- <button
25
- className="btn-primary"
26
- style={{ backgroundColor: '#f56c6c' }}
27
- onClick={() => navigate(-1)}
28
- >
29
- 返回重试
30
- </button>
31
- <button className="btn-outline" onClick={() => navigate('/')}>
32
- 返回首页
33
- </button>
34
- </div>
35
- </div>
36
- </div>
37
- )
38
- }
39
-
@@ -1,35 +0,0 @@
1
- import { useNavigate } from 'react-router-dom'
2
- import '@/styles/page-common.scss'
3
-
4
- export default function ResultSuccess() {
5
- const navigate = useNavigate()
6
-
7
- return (
8
- <div
9
- style={{
10
- height: '100vh',
11
- display: 'flex',
12
- alignItems: 'center',
13
- justifyContent: 'center',
14
- backgroundColor: '#f5f7fa'
15
- }}
16
- >
17
- <div className="page-card" style={{ textAlign: 'center', padding: '60px 80px' }}>
18
- <div style={{ fontSize: 64, marginBottom: 20 }}>✅</div>
19
- <h1 style={{ fontSize: 24, marginBottom: 12 }}>操作成功</h1>
20
- <p style={{ fontSize: 15, color: '#909399', marginBottom: 32 }}>
21
- 您的操作已成功完成,可以返回首页继续操作。
22
- </p>
23
- <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
24
- <button className="btn-primary" onClick={() => navigate('/')}>
25
- 返回首页
26
- </button>
27
- <button className="btn-outline" onClick={() => navigate(-1)}>
28
- 返回上一页
29
- </button>
30
- </div>
31
- </div>
32
- </div>
33
- )
34
- }
35
-
@@ -1,120 +0,0 @@
1
- import { useNavigate } from 'react-router-dom'
2
-
3
- export default function DataScreen() {
4
- const navigate = useNavigate()
5
-
6
- const panels = [
7
- { title: '总用户数', value: '12,580', desc: '较昨日 +128' },
8
- { title: '今日活跃', value: '3,426', desc: '活跃率 27.2%' },
9
- { title: '今日订单', value: '856', desc: '较昨日 +52' },
10
- { title: '今日营收', value: '¥98,320', desc: '较昨日 +12.3%' }
11
- ]
12
-
13
- return (
14
- <div className="screen-page">
15
- {/* 顶部标题栏 */}
16
- <header className="screen-header">
17
- <button className="back-btn" onClick={() => navigate('/')}>
18
- ← 返回
19
- </button>
20
- <h1>数据大屏</h1>
21
- <span className="screen-time">{new Date().toLocaleString()}</span>
22
- </header>
23
-
24
- {/* 数据面板 */}
25
- <div className="screen-body">
26
- {panels.map((p) => (
27
- <div className="panel" key={p.title}>
28
- <h3>{p.title}</h3>
29
- <div className="panel-value">{p.value}</div>
30
- <p className="panel-desc">{p.desc}</p>
31
- </div>
32
- ))}
33
- <div className="panel wide">
34
- <h3>📊 数据图表区域</h3>
35
- <div className="chart-placeholder">
36
- <p>此处可集成 ECharts / Recharts 等图表库</p>
37
- </div>
38
- </div>
39
- <div className="panel wide">
40
- <h3>🗺️ 地图区域</h3>
41
- <div className="chart-placeholder">
42
- <p>此处可集成地图或其他可视化组件</p>
43
- </div>
44
- </div>
45
- </div>
46
-
47
- <style>{`
48
- .screen-page {
49
- height: 100vh;
50
- background: #0d1b2a;
51
- color: #e0e6ed;
52
- display: flex;
53
- flex-direction: column;
54
- overflow: hidden;
55
- }
56
- .screen-header {
57
- display: flex;
58
- align-items: center;
59
- justify-content: space-between;
60
- padding: 12px 24px;
61
- background: rgba(255,255,255,0.05);
62
- border-bottom: 1px solid rgba(255,255,255,0.1);
63
- }
64
- .screen-header h1 {
65
- font-size: 22px;
66
- background: linear-gradient(90deg, #00d2ff, #928dff);
67
- -webkit-background-clip: text;
68
- -webkit-text-fill-color: transparent;
69
- }
70
- .screen-time { font-size: 13px; color: #8892a4; }
71
- .back-btn {
72
- background: rgba(255,255,255,0.1);
73
- border: 1px solid rgba(255,255,255,0.2);
74
- color: #e0e6ed;
75
- padding: 6px 16px;
76
- border-radius: 4px;
77
- cursor: pointer;
78
- font-size: 13px;
79
- }
80
- .back-btn:hover { background: rgba(255,255,255,0.2); }
81
- .screen-body {
82
- flex: 1;
83
- display: grid;
84
- grid-template-columns: repeat(4, 1fr);
85
- gap: 16px;
86
- padding: 20px 24px;
87
- overflow-y: auto;
88
- }
89
- .panel {
90
- background: rgba(255,255,255,0.05);
91
- border: 1px solid rgba(255,255,255,0.08);
92
- border-radius: 8px;
93
- padding: 20px;
94
- }
95
- .panel h3 { font-size: 14px; color: #8892a4; margin-bottom: 12px; }
96
- .panel.wide { grid-column: span 2; }
97
- .panel-value {
98
- font-size: 32px;
99
- font-weight: 700;
100
- background: linear-gradient(90deg, #00d2ff, #928dff);
101
- -webkit-background-clip: text;
102
- -webkit-text-fill-color: transparent;
103
- margin-bottom: 8px;
104
- }
105
- .panel-desc { font-size: 13px; color: #67c23a; }
106
- .chart-placeholder {
107
- height: 200px;
108
- display: flex;
109
- align-items: center;
110
- justify-content: center;
111
- border: 1px dashed rgba(255,255,255,0.15);
112
- border-radius: 6px;
113
- color: #8892a4;
114
- font-size: 14px;
115
- }
116
- `}</style>
117
- </div>
118
- )
119
- }
120
-
@@ -1,51 +0,0 @@
1
- import '@/styles/page-common.scss'
2
-
3
- const logs = [
4
- { id: 1, user: 'admin', ip: '192.168.1.1', location: '本地', browser: 'Chrome 122', os: 'Windows 10', time: '2024-03-20 09:00:00', status: '成功' },
5
- { id: 2, user: 'editor', ip: '192.168.1.2', location: '本地', browser: 'Firefox 123', os: 'macOS', time: '2024-03-20 09:30:00', status: '成功' },
6
- { id: 3, user: 'hacker', ip: '10.0.0.1', location: '未知', browser: 'Unknown', os: 'Linux', time: '2024-03-20 12:00:00', status: '失败' }
7
- ]
8
-
9
- export default function LoginLog() {
10
- return (
11
- <div className="page-container">
12
- <div className="page-header">
13
- <h2>登录日志</h2>
14
- <button className="btn-primary">导出日志</button>
15
- </div>
16
- <table className="data-table">
17
- <thead>
18
- <tr>
19
- <th>ID</th>
20
- <th>用户名</th>
21
- <th>IP 地址</th>
22
- <th>登录地点</th>
23
- <th>浏览器</th>
24
- <th>操作系统</th>
25
- <th>登录时间</th>
26
- <th>状态</th>
27
- </tr>
28
- </thead>
29
- <tbody>
30
- {logs.map((log) => (
31
- <tr key={log.id}>
32
- <td>{log.id}</td>
33
- <td>{log.user}</td>
34
- <td>{log.ip}</td>
35
- <td>{log.location}</td>
36
- <td>{log.browser}</td>
37
- <td>{log.os}</td>
38
- <td>{log.time}</td>
39
- <td>
40
- <span className={log.status === '成功' ? 'status-active' : 'status-disabled'}>
41
- {log.status}
42
- </span>
43
- </td>
44
- </tr>
45
- ))}
46
- </tbody>
47
- </table>
48
- </div>
49
- )
50
- }
51
-
@@ -1,47 +0,0 @@
1
- import '@/styles/page-common.scss'
2
-
3
- const logs = [
4
- { id: 1, user: 'admin', action: '新增用户', ip: '192.168.1.1', time: '2024-03-20 10:30:00', status: '成功' },
5
- { id: 2, user: 'admin', action: '修改角色', ip: '192.168.1.1', time: '2024-03-20 11:15:00', status: '成功' },
6
- { id: 3, user: 'editor', action: '删除文章', ip: '192.168.1.2', time: '2024-03-20 14:22:00', status: '失败' }
7
- ]
8
-
9
- export default function OperationLog() {
10
- return (
11
- <div className="page-container">
12
- <div className="page-header">
13
- <h2>操作日志</h2>
14
- <button className="btn-primary">导出日志</button>
15
- </div>
16
- <table className="data-table">
17
- <thead>
18
- <tr>
19
- <th>ID</th>
20
- <th>操作人</th>
21
- <th>操作内容</th>
22
- <th>IP 地址</th>
23
- <th>操作时间</th>
24
- <th>状态</th>
25
- </tr>
26
- </thead>
27
- <tbody>
28
- {logs.map((log) => (
29
- <tr key={log.id}>
30
- <td>{log.id}</td>
31
- <td>{log.user}</td>
32
- <td>{log.action}</td>
33
- <td>{log.ip}</td>
34
- <td>{log.time}</td>
35
- <td>
36
- <span className={log.status === '成功' ? 'status-active' : 'status-disabled'}>
37
- {log.status}
38
- </span>
39
- </td>
40
- </tr>
41
- ))}
42
- </tbody>
43
- </table>
44
- </div>
45
- )
46
- }
47
-
@@ -1,62 +0,0 @@
1
- import '@/styles/page-common.scss'
2
-
3
- const menus = [
4
- { id: 1, title: '首页', path: '/home', icon: '🏠', type: '菜单', sort: 1 },
5
- { id: 2, title: '系统管理', path: '/system', icon: '⚙️', type: '目录', sort: 2 },
6
- { id: 3, title: '用户管理', path: '/system/user', icon: '👤', type: '菜单', sort: 1 },
7
- { id: 4, title: '角色管理', path: '/system/role', icon: '🔑', type: '菜单', sort: 2 },
8
- { id: 5, title: '菜单管理', path: '/system/menu', icon: '📋', type: '菜单', sort: 3 }
9
- ]
10
-
11
- export default function SystemMenu() {
12
- return (
13
- <div className="page-container">
14
- <div className="page-header">
15
- <h2>菜单管理</h2>
16
- <button className="btn-primary">+ 新增菜单</button>
17
- </div>
18
- <table className="data-table">
19
- <thead>
20
- <tr>
21
- <th>ID</th>
22
- <th>标题</th>
23
- <th>路径</th>
24
- <th>图标</th>
25
- <th>类型</th>
26
- <th>排序</th>
27
- <th>操作</th>
28
- </tr>
29
- </thead>
30
- <tbody>
31
- {menus.map((menu) => (
32
- <tr key={menu.id}>
33
- <td>{menu.id}</td>
34
- <td>{menu.title}</td>
35
- <td>
36
- <code
37
- style={{
38
- background: 'var(--bg-color-page)',
39
- padding: '2px 8px',
40
- borderRadius: 3,
41
- fontSize: 13,
42
- color: 'var(--primary-color)'
43
- }}
44
- >
45
- {menu.path}
46
- </code>
47
- </td>
48
- <td>{menu.icon}</td>
49
- <td>{menu.type}</td>
50
- <td>{menu.sort}</td>
51
- <td>
52
- <button className="btn-link">编辑</button>
53
- <button className="btn-link danger">删除</button>
54
- </td>
55
- </tr>
56
- ))}
57
- </tbody>
58
- </table>
59
- </div>
60
- )
61
- }
62
-
@@ -1,63 +0,0 @@
1
- import '@/styles/page-common.scss'
2
-
3
- const roles = [
4
- { id: 1, name: 'admin', label: '超级管理员', description: '拥有所有权限', status: '启用' },
5
- { id: 2, name: 'editor', label: '编辑', description: '可编辑内容', status: '启用' },
6
- { id: 3, name: 'viewer', label: '只读', description: '只能查看', status: '启用' }
7
- ]
8
-
9
- export default function SystemRole() {
10
- return (
11
- <div className="page-container">
12
- <div className="page-header">
13
- <h2>角色管理</h2>
14
- <button className="btn-primary">+ 新增角色</button>
15
- </div>
16
- <table className="data-table">
17
- <thead>
18
- <tr>
19
- <th>ID</th>
20
- <th>角色标识</th>
21
- <th>角色名称</th>
22
- <th>描述</th>
23
- <th>状态</th>
24
- <th>操作</th>
25
- </tr>
26
- </thead>
27
- <tbody>
28
- {roles.map((role) => (
29
- <tr key={role.id}>
30
- <td>{role.id}</td>
31
- <td>
32
- <code
33
- style={{
34
- background: 'var(--bg-color-page)',
35
- padding: '2px 8px',
36
- borderRadius: 3,
37
- fontSize: 13,
38
- color: 'var(--primary-color)'
39
- }}
40
- >
41
- {role.name}
42
- </code>
43
- </td>
44
- <td>{role.label}</td>
45
- <td>{role.description}</td>
46
- <td>
47
- <span className={role.status === '启用' ? 'status-active' : 'status-disabled'}>
48
- {role.status}
49
- </span>
50
- </td>
51
- <td>
52
- <button className="btn-link">编辑</button>
53
- <button className="btn-link">权限</button>
54
- <button className="btn-link danger">删除</button>
55
- </td>
56
- </tr>
57
- ))}
58
- </tbody>
59
- </table>
60
- </div>
61
- )
62
- }
63
-
@@ -1,11 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "composite": true,
4
- "skipLibCheck": true,
5
- "module": "ESNext",
6
- "moduleResolution": "bundler",
7
- "allowSyntheticDefaultImports": true
8
- },
9
- "include": ["vite.config.ts"]
10
- }
11
-
@@ -1,25 +0,0 @@
1
- # Logs
2
- logs
3
- *.log
4
- npm-debug.log*
5
- yarn-debug.log*
6
- yarn-error.log*
7
- pnpm-debug.log*
8
- lerna-debug.log*
9
-
10
- node_modules
11
- dist
12
- dist-ssr
13
- *.local
14
-
15
- # Editor directories and files
16
- .vscode/*
17
- !.vscode/extensions.json
18
- .idea
19
- .DS_Store
20
- *.suo
21
- *.ntvs*
22
- *.njsproj
23
- *.sln
24
- *.sw?
25
-
@@ -1,67 +0,0 @@
1
- <script setup lang="ts">
2
- </script>
3
-
4
- <template>
5
- <div class="about-page">
6
- <div class="about-card">
7
- <h1>关于</h1>
8
- <p>这是一个基于 Vue 3 的现代化前端模板项目。</p>
9
- <ul>
10
- <li>Vue 3 Composition API</li>
11
- <li>Vite 5 构建工具</li>
12
- <li>TypeScript 5 类型支持</li>
13
- <li>Vue Router 4 路由管理</li>
14
- <li>Pinia 状态管理 (支持持久化)</li>
15
- <li>Axios 请求封装 (拦截器 + 类型)</li>
16
- <li>TailwindCSS</li>
17
- <li>unplugin-auto-import 自动导入</li>
18
- <li>ESLint + Prettier 代码规范</li>
19
- </ul>
20
- </div>
21
- </div>
22
- </template>
23
-
24
- <style scoped lang="scss">
25
- .about-page {
26
- max-width: 700px;
27
- margin: 0 auto;
28
- }
29
-
30
- .about-card {
31
- background: var(--bg-color-overlay);
32
- border-radius: var(--border-radius-lg);
33
- padding: 32px;
34
- box-shadow: var(--box-shadow-light);
35
-
36
- h1 {
37
- font-size: 24px;
38
- margin-bottom: 12px;
39
- color: var(--text-color);
40
- }
41
-
42
- p {
43
- color: var(--text-color-secondary);
44
- margin-bottom: 16px;
45
- }
46
-
47
- ul {
48
- list-style: none;
49
- padding: 0;
50
-
51
- li {
52
- padding: 8px 0;
53
- border-bottom: 1px solid var(--border-color-light);
54
- color: var(--text-color-regular);
55
-
56
- &::before {
57
- content: '✅ ';
58
- }
59
-
60
- &:last-child {
61
- border-bottom: none;
62
- }
63
- }
64
- }
65
- }
66
- </style>
67
-