@lvetechs/create-app 1.0.4 → 1.0.6

package/templates/vue/src/views/home/index.vue

@@ -7,34 +7,34 @@
 <template>
   <div class="home-page">
     <div class="welcome-card">
-      <h1>👋 欢迎使用 {{title}}</h1>
+      <h1>欢迎使用 {{title}}</h1>
       <p>
         该模板集成了 Vue 3 + Vite + TypeScript + Vue Router + Pinia + Axios + TailwindCSS
         等常用工具和最佳实践。
       </p>
       <div class="features">
         <div class="feature-item">
-          <h3>⚡ Vite</h3>
+          <h3>Vite</h3>
           <p>下一代前端构建工具，极速开发体验</p>
         </div>
         <div class="feature-item">
-          <h3>🦾 TypeScript</h3>
+          <h3>TypeScript</h3>
           <p>强类型语言支持，提高代码质量</p>
         </div>
         <div class="feature-item">
-          <h3>🍍 Pinia</h3>
+          <h3>Pinia</h3>
           <p>轻量灵活的状态管理方案</p>
         </div>
         <div class="feature-item">
-          <h3>🧭 Vue Router</h3>
+          <h3>Vue Router</h3>
           <p>官方路由管理，支持懒加载</p>
         </div>
         <div class="feature-item">
-          <h3>📦 Auto Import</h3>
+          <h3>Auto Import</h3>
           <p>API 和组件自动按需导入</p>
         </div>
         <div class="feature-item">
-          <h3>🎨 TailwindCSS</h3>
+          <h3>TailwindCSS</h3>
           <p>即时按需原子化 CSS 引擎</p>
         </div>
       </div>

package/templates/react/src/views/about/index.tsx

@@ -1,40 +0,0 @@
-import '@/styles/page-common.scss'
-
-export default function About() {
-  const features = [
-    'React 18 + Hooks',
-    'Vite 5 构建工具',
-    'TypeScript 5 类型支持',
-    'React Router 6 路由管理',
-    'Zustand 状态管理 (支持持久化)',
-    'Axios 请求封装 (拦截器 + 类型)',
-    'TailwindCSS 实用优先 CSS',
-    'ESLint + Prettier 代码规范'
-  ]
-
-  return (
-    <div style={{ maxWidth: 700, margin: '0 auto' }}>
-      <div className="page-card">
-        <h1 style={{ fontSize: 24, marginBottom: 12 }}>关于</h1>
-        <p style={{ color: 'var(--text-color-secondary)', marginBottom: 16 }}>
-          这是一个基于 React 18 的现代化前端模板项目。
-        </p>
-        <ul style={{ listStyle: 'none', padding: 0 }}>
-          {features.map((item) => (
-            <li
-              key={item}
-              style={{
-                padding: '8px 0',
-                borderBottom: '1px solid var(--border-color-light)',
-                color: 'var(--text-color-regular)'
-              }}
-            >
-              ✅ {item}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  )
-}
-

package/templates/react/src/views/login/index.tsx

@@ -1,138 +0,0 @@
-import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useUserStore } from '@/stores/user'
-
-export default function Login() {
-  const navigate = useNavigate()
-  const { setToken, setUserInfo } = useUserStore()
-
-  const [form, setForm] = useState({ username: '', password: '' })
-  const [loading, setLoading] = useState(false)
-
-  async function handleLogin(e: React.FormEvent) {
-    e.preventDefault()
-    if (!form.username || !form.password) {
-      alert('请输入用户名和密码')
-      return
-    }
-
-    setLoading(true)
-    try {
-      // TODO: 调用登录 API
-      // const res = await loginApi(form)
-      // setToken(res.data.token)
-
-      // 模拟登录
-      setToken('mock-token')
-      setUserInfo({
-        id: 1,
-        username: form.username,
-        nickname: '管理员',
-        avatar: '',
-        roles: ['admin']
-      })
-
-      navigate('/')
-    } catch (error) {
-      console.error('登录失败:', error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <div className="login-page">
-      <div className="login-card">
-        <h2>用户登录</h2>
-        <form onSubmit={handleLogin}>
-          <div className="form-item">
-            <label>用户名</label>
-            <input
-              type="text"
-              placeholder="请输入用户名"
-              autoComplete="username"
-              value={form.username}
-              onChange={(e) => setForm({ ...form, username: e.target.value })}
-            />
-          </div>
-          <div className="form-item">
-            <label>密码</label>
-            <input
-              type="password"
-              placeholder="请输入密码"
-              autoComplete="current-password"
-              value={form.password}
-              onChange={(e) => setForm({ ...form, password: e.target.value })}
-            />
-          </div>
-          <button type="submit" className="login-btn" disabled={loading}>
-            {loading ? '登录中...' : '登 录'}
-          </button>
-        </form>
-      </div>
-
-      <style>{`
-        .login-page {
-          height: 100vh;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        }
-        .login-card {
-          width: 380px;
-          padding: 40px;
-          background: #fff;
-          border-radius: 12px;
-          box-shadow: 0 20px 60px rgba(0,0,0,0.15);
-        }
-        .login-card h2 {
-          text-align: center;
-          margin-bottom: 32px;
-          color: #333;
-          font-size: 24px;
-        }
-        .form-item {
-          margin-bottom: 20px;
-        }
-        .form-item label {
-          display: block;
-          margin-bottom: 6px;
-          font-size: 14px;
-          color: #606266;
-        }
-        .form-item input {
-          width: 100%;
-          padding: 10px 12px;
-          border: 1px solid #dcdfe6;
-          border-radius: 6px;
-          font-size: 14px;
-          outline: none;
-          transition: border-color 0.2s;
-          box-sizing: border-box;
-        }
-        .form-item input:focus {
-          border-color: #409eff;
-        }
-        .form-item input::placeholder {
-          color: #c0c4cc;
-        }
-        .login-btn {
-          width: 100%;
-          padding: 12px;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          color: #fff;
-          border: none;
-          border-radius: 6px;
-          font-size: 16px;
-          cursor: pointer;
-          transition: opacity 0.2s;
-          margin-top: 8px;
-        }
-        .login-btn:hover { opacity: 0.9; }
-        .login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
-      `}</style>
-    </div>
-  )
-}
-

package/templates/react/src/views/register/index.tsx

@@ -1,143 +0,0 @@
-import { useState } from 'react'
-import { useNavigate, Link } from 'react-router-dom'
-
-export default function Register() {
-  const navigate = useNavigate()
-  const [form, setForm] = useState({ username: '', password: '', confirmPassword: '' })
-  const [loading, setLoading] = useState(false)
-
-  async function handleRegister(e: React.FormEvent) {
-    e.preventDefault()
-    if (!form.username || !form.password) {
-      alert('请填写完整信息')
-      return
-    }
-    if (form.password !== form.confirmPassword) {
-      alert('两次密码输入不一致')
-      return
-    }
-
-    setLoading(true)
-    try {
-      // TODO: 调用注册 API
-      alert('注册成功！')
-      navigate('/login')
-    } catch (error) {
-      console.error('注册失败:', error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <div className="register-page">
-      <div className="register-card">
-        <h2>用户注册</h2>
-        <form onSubmit={handleRegister}>
-          <div className="form-item">
-            <label>用户名</label>
-            <input
-              type="text"
-              placeholder="请输入用户名"
-              autoComplete="username"
-              value={form.username}
-              onChange={(e) => setForm({ ...form, username: e.target.value })}
-            />
-          </div>
-          <div className="form-item">
-            <label>密码</label>
-            <input
-              type="password"
-              placeholder="请输入密码"
-              autoComplete="new-password"
-              value={form.password}
-              onChange={(e) => setForm({ ...form, password: e.target.value })}
-            />
-          </div>
-          <div className="form-item">
-            <label>确认密码</label>
-            <input
-              type="password"
-              placeholder="请再次输入密码"
-              autoComplete="new-password"
-              value={form.confirmPassword}
-              onChange={(e) => setForm({ ...form, confirmPassword: e.target.value })}
-            />
-          </div>
-          <button type="submit" className="register-btn" disabled={loading}>
-            {loading ? '注册中...' : '注 册'}
-          </button>
-          <div className="to-login">
-            已有账号？<Link to="/login">立即登录</Link>
-          </div>
-        </form>
-      </div>
-
-      <style>{`
-        .register-page {
-          height: 100vh;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-        }
-        .register-card {
-          width: 400px;
-          padding: 40px;
-          background: #fff;
-          border-radius: 12px;
-          box-shadow: 0 20px 60px rgba(0,0,0,0.15);
-        }
-        .register-card h2 {
-          text-align: center;
-          margin-bottom: 32px;
-          color: #333;
-          font-size: 24px;
-        }
-        .form-item {
-          margin-bottom: 20px;
-        }
-        .form-item label {
-          display: block;
-          margin-bottom: 6px;
-          font-size: 14px;
-          color: #606266;
-        }
-        .form-item input {
-          width: 100%;
-          padding: 10px 12px;
-          border: 1px solid #dcdfe6;
-          border-radius: 6px;
-          font-size: 14px;
-          outline: none;
-          transition: border-color 0.2s;
-          box-sizing: border-box;
-        }
-        .form-item input:focus { border-color: #43e97b; }
-        .form-item input::placeholder { color: #c0c4cc; }
-        .register-btn {
-          width: 100%;
-          padding: 12px;
-          background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-          color: #fff;
-          border: none;
-          border-radius: 6px;
-          font-size: 16px;
-          cursor: pointer;
-          transition: opacity 0.2s;
-          margin-top: 8px;
-        }
-        .register-btn:hover { opacity: 0.9; }
-        .register-btn:disabled { opacity: 0.6; cursor: not-allowed; }
-        .to-login {
-          text-align: center;
-          margin-top: 16px;
-          font-size: 14px;
-          color: #909399;
-        }
-        .to-login a { color: #43e97b; font-weight: 500; }
-      `}</style>
-    </div>
-  )
-}
-

package/templates/react/src/views/result/fail.tsx

@@ -1,39 +0,0 @@
-import { useNavigate } from 'react-router-dom'
-import '@/styles/page-common.scss'
-
-export default function ResultFail() {
-  const navigate = useNavigate()
-
-  return (
-    <div
-      style={{
-        height: '100vh',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: '#f5f7fa'
-      }}
-    >
-      <div className="page-card" style={{ textAlign: 'center', padding: '60px 80px' }}>
-        <div style={{ fontSize: 64, marginBottom: 20 }}>❌</div>
-        <h1 style={{ fontSize: 24, marginBottom: 12 }}>操作失败</h1>
-        <p style={{ fontSize: 15, color: '#909399', marginBottom: 32 }}>
-          抱歉，您的操作未能完成，请检查后重试。
-        </p>
-        <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
-          <button
-            className="btn-primary"
-            style={{ backgroundColor: '#f56c6c' }}
-            onClick={() => navigate(-1)}
-          >
-            返回重试
-          </button>
-          <button className="btn-outline" onClick={() => navigate('/')}>
-            返回首页
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-

package/templates/react/src/views/result/success.tsx

@@ -1,35 +0,0 @@
-import { useNavigate } from 'react-router-dom'
-import '@/styles/page-common.scss'
-
-export default function ResultSuccess() {
-  const navigate = useNavigate()
-
-  return (
-    <div
-      style={{
-        height: '100vh',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: '#f5f7fa'
-      }}
-    >
-      <div className="page-card" style={{ textAlign: 'center', padding: '60px 80px' }}>
-        <div style={{ fontSize: 64, marginBottom: 20 }}>✅</div>
-        <h1 style={{ fontSize: 24, marginBottom: 12 }}>操作成功</h1>
-        <p style={{ fontSize: 15, color: '#909399', marginBottom: 32 }}>
-          您的操作已成功完成，可以返回首页继续操作。
-        </p>
-        <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
-          <button className="btn-primary" onClick={() => navigate('/')}>
-            返回首页
-          </button>
-          <button className="btn-outline" onClick={() => navigate(-1)}>
-            返回上一页
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-

package/templates/react/src/views/screen/index.tsx

@@ -1,120 +0,0 @@
-import { useNavigate } from 'react-router-dom'
-
-export default function DataScreen() {
-  const navigate = useNavigate()
-
-  const panels = [
-    { title: '总用户数', value: '12,580', desc: '较昨日 +128' },
-    { title: '今日活跃', value: '3,426', desc: '活跃率 27.2%' },
-    { title: '今日订单', value: '856', desc: '较昨日 +52' },
-    { title: '今日营收', value: '¥98,320', desc: '较昨日 +12.3%' }
-  ]
-
-  return (
-    <div className="screen-page">
-      {/* 顶部标题栏 */}
-      <header className="screen-header">
-        <button className="back-btn" onClick={() => navigate('/')}>
-          ← 返回
-        </button>
-        <h1>数据大屏</h1>
-        <span className="screen-time">{new Date().toLocaleString()}</span>
-      </header>
-
-      {/* 数据面板 */}
-      <div className="screen-body">
-        {panels.map((p) => (
-          <div className="panel" key={p.title}>
-            <h3>{p.title}</h3>
-            <div className="panel-value">{p.value}</div>
-            <p className="panel-desc">{p.desc}</p>
-          </div>
-        ))}
-        <div className="panel wide">
-          <h3>📊 数据图表区域</h3>
-          <div className="chart-placeholder">
-            <p>此处可集成 ECharts / Recharts 等图表库</p>
-          </div>
-        </div>
-        <div className="panel wide">
-          <h3>🗺️ 地图区域</h3>
-          <div className="chart-placeholder">
-            <p>此处可集成地图或其他可视化组件</p>
-          </div>
-        </div>
-      </div>
-
-      <style>{`
-        .screen-page {
-          height: 100vh;
-          background: #0d1b2a;
-          color: #e0e6ed;
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-        }
-        .screen-header {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 12px 24px;
-          background: rgba(255,255,255,0.05);
-          border-bottom: 1px solid rgba(255,255,255,0.1);
-        }
-        .screen-header h1 {
-          font-size: 22px;
-          background: linear-gradient(90deg, #00d2ff, #928dff);
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-        }
-        .screen-time { font-size: 13px; color: #8892a4; }
-        .back-btn {
-          background: rgba(255,255,255,0.1);
-          border: 1px solid rgba(255,255,255,0.2);
-          color: #e0e6ed;
-          padding: 6px 16px;
-          border-radius: 4px;
-          cursor: pointer;
-          font-size: 13px;
-        }
-        .back-btn:hover { background: rgba(255,255,255,0.2); }
-        .screen-body {
-          flex: 1;
-          display: grid;
-          grid-template-columns: repeat(4, 1fr);
-          gap: 16px;
-          padding: 20px 24px;
-          overflow-y: auto;
-        }
-        .panel {
-          background: rgba(255,255,255,0.05);
-          border: 1px solid rgba(255,255,255,0.08);
-          border-radius: 8px;
-          padding: 20px;
-        }
-        .panel h3 { font-size: 14px; color: #8892a4; margin-bottom: 12px; }
-        .panel.wide { grid-column: span 2; }
-        .panel-value {
-          font-size: 32px;
-          font-weight: 700;
-          background: linear-gradient(90deg, #00d2ff, #928dff);
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-          margin-bottom: 8px;
-        }
-        .panel-desc { font-size: 13px; color: #67c23a; }
-        .chart-placeholder {
-          height: 200px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border: 1px dashed rgba(255,255,255,0.15);
-          border-radius: 6px;
-          color: #8892a4;
-          font-size: 14px;
-        }
-      `}</style>
-    </div>
-  )
-}
-

package/templates/react/src/views/system/log/login.tsx

@@ -1,51 +0,0 @@
-import '@/styles/page-common.scss'
-
-const logs = [
-  { id: 1, user: 'admin', ip: '192.168.1.1', location: '本地', browser: 'Chrome 122', os: 'Windows 10', time: '2024-03-20 09:00:00', status: '成功' },
-  { id: 2, user: 'editor', ip: '192.168.1.2', location: '本地', browser: 'Firefox 123', os: 'macOS', time: '2024-03-20 09:30:00', status: '成功' },
-  { id: 3, user: 'hacker', ip: '10.0.0.1', location: '未知', browser: 'Unknown', os: 'Linux', time: '2024-03-20 12:00:00', status: '失败' }
-]
-
-export default function LoginLog() {
-  return (
-    <div className="page-container">
-      <div className="page-header">
-        <h2>登录日志</h2>
-        <button className="btn-primary">导出日志</button>
-      </div>
-      <table className="data-table">
-        <thead>
-          <tr>
-            <th>ID</th>
-            <th>用户名</th>
-            <th>IP 地址</th>
-            <th>登录地点</th>
-            <th>浏览器</th>
-            <th>操作系统</th>
-            <th>登录时间</th>
-            <th>状态</th>
-          </tr>
-        </thead>
-        <tbody>
-          {logs.map((log) => (
-            <tr key={log.id}>
-              <td>{log.id}</td>
-              <td>{log.user}</td>
-              <td>{log.ip}</td>
-              <td>{log.location}</td>
-              <td>{log.browser}</td>
-              <td>{log.os}</td>
-              <td>{log.time}</td>
-              <td>
-                <span className={log.status === '成功' ? 'status-active' : 'status-disabled'}>
-                  {log.status}
-                </span>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}
-

package/templates/react/src/views/system/log/operation.tsx

@@ -1,47 +0,0 @@
-import '@/styles/page-common.scss'
-
-const logs = [
-  { id: 1, user: 'admin', action: '新增用户', ip: '192.168.1.1', time: '2024-03-20 10:30:00', status: '成功' },
-  { id: 2, user: 'admin', action: '修改角色', ip: '192.168.1.1', time: '2024-03-20 11:15:00', status: '成功' },
-  { id: 3, user: 'editor', action: '删除文章', ip: '192.168.1.2', time: '2024-03-20 14:22:00', status: '失败' }
-]
-
-export default function OperationLog() {
-  return (
-    <div className="page-container">
-      <div className="page-header">
-        <h2>操作日志</h2>
-        <button className="btn-primary">导出日志</button>
-      </div>
-      <table className="data-table">
-        <thead>
-          <tr>
-            <th>ID</th>
-            <th>操作人</th>
-            <th>操作内容</th>
-            <th>IP 地址</th>
-            <th>操作时间</th>
-            <th>状态</th>
-          </tr>
-        </thead>
-        <tbody>
-          {logs.map((log) => (
-            <tr key={log.id}>
-              <td>{log.id}</td>
-              <td>{log.user}</td>
-              <td>{log.action}</td>
-              <td>{log.ip}</td>
-              <td>{log.time}</td>
-              <td>
-                <span className={log.status === '成功' ? 'status-active' : 'status-disabled'}>
-                  {log.status}
-                </span>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}
-