cmpt-huitu-cli 1.0.0

package/templates/default/src/routers/base.js

@@ -0,0 +1,41 @@
+// 基础路由（常量路由）
+export const constantRoutes = [
+  {
+    path: '/401',
+    name: '401',
+    component: () => import('@components/error/Error.vue'),
+  },
+  {
+    path: '/404',
+    name: '404',
+    component: () => import('@components/error/Error.vue'),
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('@views/login/index.vue'),
+    meta: {
+      title: '登录',
+    },
+  },
+  {
+    path: '/',
+    name: 'index',
+    component: () => import('@views/Home.vue'),
+    meta: {
+      title: '首页',
+      keepAlive: true,
+    },
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: () => import('@views/About.vue'),
+  },
+]
+
+// 404 兜底路由（应始终放在最后）
+export const notFoundRoute = {
+  path: '/:pathMatch(.*)*',
+  redirect: '/404',
+}

package/templates/default/src/routers/guard.js

@@ -0,0 +1,43 @@
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+import { getToken } from '@utils/auth'
+
+// NProgress 配置
+NProgress.configure({ showSpinner: false })
+
+// 白名单路由
+const whiteList = ['/login', '/404', '/401']
+
+export function setupRouterGuard(router) {
+  router.beforeEach((to, _from, next) => {
+    // 开启进度条
+    NProgress.start()
+
+    // 设置页面标题
+    if (to.meta.title) {
+      document.title = `${to.meta.title} - ${import.meta.env.VITE_APP_TITLE || '系统模板'}`
+    }
+
+    const token = getToken()
+
+    // 判断是否在白名单
+    if (whiteList.includes(to.path)) {
+      next()
+      return
+    }
+
+    // 判断是否有 Token
+    // if (!token) {
+    //   next(`/login?redirect=${to.path}`)
+    //   NProgress.done()
+    //   return
+    // }
+
+    next()
+  })
+
+  router.afterEach(() => {
+    // 关闭进度条
+    NProgress.done()
+  })
+}

package/templates/default/src/routers/index.js

@@ -0,0 +1,36 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { setupRouterGuard } from './guard'
+import { constantRoutes, notFoundRoute } from './base'
+
+// 自动导入 ./modules 下的所有路由模块
+const modules = import.meta.glob('./modules/*.js', { eager: true })
+
+// 合并所有模块路由
+const moduleRoutes = []
+Object.keys(modules).forEach((key) => {
+  const mod = modules[key].default || {}
+  const modList = Array.isArray(mod) ? [...mod] : [mod]
+  moduleRoutes.push(...modList)
+})
+
+// 创建路由实例
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    ...constantRoutes,
+    ...moduleRoutes,
+    notFoundRoute, // 确保 404 路由在最后
+  ],
+  scrollBehavior(_to, _from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return { top: 0 }
+    }
+  },
+})
+
+// 设置路由守卫
+setupRouterGuard(router)
+
+export default router

package/templates/default/src/routers/modules/example.js

@@ -0,0 +1,17 @@
+/**
+ * @FileDescription: 路由模块演示
+ * @Author: 
+ * @Date: 2024
+ */
+
+// 导出该模块的路由配置
+export default [
+  // {
+  //   path: '/example',
+  //   name: 'Example',
+  //   component: () => import('@views/Example.vue'),
+  //   meta: {
+  //     title: '示例页面'
+  //   }
+  // }
+]

package/templates/default/src/services/login.js

@@ -0,0 +1,32 @@
+import { cache } from '@utils/RequestCache.js'
+const _BaseUrl = 'login/'
+
+// 通用登录接口
+export async function loginApi(data) {
+  const response = await cache.request({
+    url: _BaseUrl + 'auth',
+    method: 'post',
+    data: data,
+  })
+  return response.data
+}
+
+// 获取用户信息
+export async function getUserInfoApi() {
+  const response = await cache.request({
+    url: _BaseUrl + 'userInfo',
+    method: 'get',
+  })
+  return response.data
+}
+
+// 刷新token
+export async function refreshAccessTokenApi(params) {
+  const response = await cache.request({
+    url: _BaseUrl + 'refreshAccessToken',
+    method: 'get',
+    params,
+    notUseCache: true,
+  })
+  return response.data
+}

package/templates/default/src/stores/README.md

@@ -0,0 +1,317 @@
+# Stores 使用说明
+
+## 📁 目录结构
+
+```
+stores/
+├── index.js              # Store 入口文件（统一导出）
+├── system.js             # 系统管理 Store 入口（示例）
+└── index/
+    ├── global.js         # 全局状态管理（主题、loading 等）
+    └── template.js       # Store 使用示例
+```
+
+## 🎯 设计理念
+
+### 1. 延迟实例化模式
+
+为了避免 Pinia 实例化时机问题，采用**延迟实例化**模式：
+
+- **不直接导出 Store 实例**
+- **导出创建函数**，在使用时再调用
+
+```javascript
+// ❌ 错误方式（可能导致 "getActivePinia()" was called but there was no active Pinia" 错误）
+export const globalStore = defineStore('global', { ... })
+export default globalStore()  // 提前实例化
+
+// ✅ 正确方式（延迟实例化）
+export const globalStore = defineStore('global', { ... })
+export { globalStore as createGlobalStore }  // 导出创建函数
+```
+
+### 2. 统一导出入口
+
+所有 Store 通过 `stores/index.js` 统一导出，便于管理和使用。
+
+---
+
+## 📖 使用方式
+
+### 方式一：在组件中使用（推荐）
+
+#### 1. 导入创建函数
+
+```vue
+<script setup>
+  import { createGlobalStore, createExampleStore } from '@stores/index'
+</script>
+```
+
+#### 2. 在组件中实例化并使用
+
+```vue
+<script setup>
+  import { storeToRefs } from 'pinia'
+  import { createGlobalStore } from '@stores/index'
+
+  // 实例化 Store
+  const globalStore = createGlobalStore()
+
+  // 使用 storeToRefs 获取响应式状态
+  const { themeVal, isLoading } = storeToRefs(globalStore)
+
+  // 直接调用 actions
+  const { changeGlobalTheme, setIsLoadingStore } = globalStore
+
+  // 使用
+  const toggleTheme = () => {
+    changeGlobalTheme(themeVal.value === 'light' ? 'dark' : 'light')
+  }
+</script>
+
+<template>
+  <div>
+    <p>当前主题: {{ themeVal }}</p>
+    <p>Loading 状态: {{ isLoading }}</p>
+    <button @click="toggleTheme">切换主题</button>
+  </div>
+</template>
+```
+
+### 方式二：在工具函数中使用
+
+#### 示例：在 `request.js` 中使用
+
+```javascript
+import { globalStore } from '@stores/index/global'
+import { storeToRefs } from 'pinia'
+
+// 在函数中实例化
+const setGlobalLoading = (status) => {
+  const storeInstance = globalStore()
+  const { screenFlagStore, isLoading } = storeToRefs(storeInstance)
+  const { setIsLoadingStore } = storeInstance
+
+  // 使用状态和方法
+  if (screenFlagStore.value) {
+    setIsLoadingStore(false)
+    return
+  }
+
+  setIsLoadingStore(status)
+}
+```
+
+---
+
+## 📦 现有 Store 说明
+
+### 1. `global.js` - 全局状态管理
+
+**用途**：管理全局通用状态
+
+**状态**：
+
+- `themeVal` - 主题值（'light' | 'dark'）
+- `isLoading` - 全局 loading 状态
+- `screenFlagStore` - 投屏状态
+
+**方法**：
+
+- `changeGlobalTheme(theme)` - 更改主题
+- `setIsLoadingStore(status)` - 设置 loading 状态
+- `setScreenFlag(flag)` - 设置投屏状态
+
+**使用示例**：
+
+```vue
+<script setup>
+  import { storeToRefs } from 'pinia'
+  import { createGlobalStore } from '@stores/index'
+
+  const globalStore = createGlobalStore()
+  const { themeVal, isLoading } = storeToRefs(globalStore)
+  const { changeGlobalTheme } = globalStore
+
+  // 切换主题
+  const toggleTheme = () => {
+    changeGlobalTheme(themeVal.value === 'light' ? 'dark' : 'light')
+  }
+</script>
+```
+
+**实际使用位置**：
+
+- `src/utils/request.js` - 用于管理全局 loading 状态
+
+### 2. `template.js` - Store 示例
+
+**用途**：展示如何创建和使用 Store
+
+**状态**：
+
+- `count` - 计数器
+- `list` - 列表数据
+
+**方法**：
+
+- `increment(value)` - 增加计数
+- `fetchList()` - 获取列表（示例）
+
+**使用示例**：
+
+```vue
+<script setup>
+  import { storeToRefs } from 'pinia'
+  import { createExampleStore } from '@stores/index'
+
+  const exampleStore = createExampleStore()
+  const { count, list, doubleCount } = storeToRefs(exampleStore)
+  const { increment, fetchList } = exampleStore
+
+  // 使用
+  increment(5)
+  await fetchList()
+</script>
+
+<template>
+  <div>
+    <p>计数: {{ count }}</p>
+    <p>双倍计数: {{ doubleCount }}</p>
+    <button @click="increment(1)">+1</button>
+  </div>
+</template>
+```
+
+---
+
+## 🆕 创建新的 Store
+
+### 步骤 1：创建 Store 文件
+
+在 `stores/index/` 目录下创建新文件，例如 `user.js`：
+
+```javascript
+// stores/index/user.js
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    userInfo: null,
+    token: '',
+  }),
+
+  getters: {
+    isLoggedIn: (state) => !!state.token,
+  },
+
+  actions: {
+    setUserInfo(userInfo) {
+      this.userInfo = userInfo
+    },
+
+    setToken(token) {
+      this.token = token
+    },
+
+    logout() {
+      this.userInfo = null
+      this.token = ''
+    },
+  },
+})
+```
+
+### 步骤 2：在入口文件中导出
+
+在 `stores/index.js` 中添加导出：
+
+```javascript
+import { useUserStore as createUserStore } from '@stores/index/user'
+
+export { createGlobalStore, createExampleStore, createUserStore }
+```
+
+### 步骤 3：在组件中使用
+
+```vue
+<script setup>
+  import { storeToRefs } from 'pinia'
+  import { createUserStore } from '@stores/index'
+
+  const userStore = createUserStore()
+  const { userInfo, isLoggedIn } = storeToRefs(userStore)
+  const { setUserInfo, logout } = userStore
+</script>
+```
+
+---
+
+## 🔧 系统管理 Store（可选）
+
+如果项目需要系统管理相关的 Store，可以在 `stores/system/` 目录下创建，并在 `stores/system.js` 中导出。
+
+**示例结构**：
+
+```
+stores/
+├── system.js              # 系统管理 Store 入口
+└── system/
+    ├── user.js           # 用户管理 Store
+    ├── permission.js     # 权限管理 Store
+    └── settings.js       # 系统设置 Store
+```
+
+**在 `system.js` 中导出**：
+
+```javascript
+import { useUserStore as createUserStore } from '@stores/system/user'
+import { usePermissionStore as createPermissionStore } from '@stores/system/permission'
+
+export { createUserStore, createPermissionStore }
+```
+
+---
+
+## ⚠️ 注意事项
+
+### 1. 避免提前实例化
+
+```javascript
+// ❌ 错误：在模块顶层实例化
+const store = globalStore() // 可能导致 Pinia 未初始化错误
+
+// ✅ 正确：在函数或组件中实例化
+const useStore = () => {
+  return globalStore()
+}
+```
+
+### 2. 使用 storeToRefs 保持响应式
+
+```javascript
+// ❌ 错误：直接解构会失去响应式
+const { themeVal } = globalStore()
+
+// ✅ 正确：使用 storeToRefs
+const { themeVal } = storeToRefs(globalStore())
+```
+
+### 3. Actions 可以直接解构
+
+```javascript
+// ✅ Actions 可以直接解构，不需要 storeToRefs
+const { changeGlobalTheme, setIsLoadingStore } = globalStore()
+```
+
+---
+
+## 📚 相关文档
+
+- [Pinia 官方文档](https://pinia.vuejs.org/)
+- [Vue 3 Composition API](https://vuejs.org/guide/extras/composition-api-faq.html)
+
+---
+
+**最后更新**：2026-01-04

package/templates/default/src/stores/index/global.js

@@ -0,0 +1,49 @@
+/**
+ * @FileDescription: 全局状态管理
+ * @Author: template
+ * @Date: 2026-01-04
+ * @Description: 管理全局通用状态，如主题、loading 等
+ */
+import { defineStore } from 'pinia'
+import { setTheme } from '@/utils/theme'
+
+export const globalStore = defineStore('global', {
+  state: () => ({
+    // 主题值：'light' | 'dark'
+    themeVal: localStorage.getItem('data-theme') || 'light',
+    // 全局 loading 状态
+    isLoading: false,
+    // 投屏状态（用于控制 loading 显示）
+    screenFlagStore: false,
+  }),
+
+  actions: {
+    /**
+     * 更改全局主题
+     * @param {string} theme - 主题值 'light' | 'dark'
+     * @returns {void}
+     */
+    changeGlobalTheme(theme) {
+      this.themeVal = theme
+      setTheme(theme)
+    },
+
+    /**
+     * 设置全局 loading 状态
+     * @param {boolean} status - loading 状态
+     * @returns {void}
+     */
+    setIsLoadingStore(status) {
+      this.isLoading = status
+    },
+
+    /**
+     * 设置投屏状态
+     * @param {boolean} flag - 投屏状态
+     * @returns {void}
+     */
+    setScreenFlag(flag) {
+      this.screenFlagStore = flag
+    },
+  },
+})

package/templates/default/src/stores/index/template.js

@@ -0,0 +1,31 @@
+/**
+ * @FileDescription: Store 示例文件
+ * @Author: template
+ * @Date: 2026-01-04
+ * @Description: 此文件为 Store 使用示例，可根据实际需求修改或删除
+ */
+
+import { defineStore } from 'pinia'
+
+export const useExampleStore = defineStore('example', {
+  state: () => ({
+    count: 0,
+    list: [],
+  }),
+
+  getters: {
+    doubleCount: (state) => state.count * 2,
+  },
+
+  actions: {
+    increment(value = 1) {
+      this.count += value
+    },
+
+    async fetchList() {
+      // 示例：异步获取数据
+      // const data = await api.getList()
+      // this.list = data
+    },
+  },
+})

package/templates/default/src/stores/index.js

@@ -0,0 +1,14 @@
+/**
+ * @FileDescription: Store 入口文件
+ * @Author: template
+ * @Date: 2026-01-04
+ * @Description: 统一导出所有 Store
+ */
+
+import { globalStore as createGlobalStore } from '@stores/index/global'
+import { useExampleStore as createExampleStore } from '@stores/index/template'
+
+// 只导出创建函数，不提前实例化
+// 核心问题在于 store 实例化的时机可能过早，
+// 容易触发 "getActivePinia()" was called but there was no active Pinia" 错误。
+export { createGlobalStore, createExampleStore }

package/templates/default/src/stores//344/275/277/347/224/250/347/244/272/344/276/213.vue

@@ -0,0 +1,94 @@
+<!--
+  @FileDescription: Store 使用示例
+  @Author: template
+  @Date: 2026-01-04
+  @Description: 展示如何在组件中使用 Store
+-->
+<template>
+  <div class="store-demo">
+    <h2>Store 使用示例</h2>
+
+    <!-- 全局 Store 示例 -->
+    <div class="demo-section">
+      <h3>1. 全局 Store (globalStore)</h3>
+      <p>当前主题: <strong>{{ themeVal }}</strong></p>
+      <p>Loading 状态: <strong>{{ isLoading ? '加载中...' : '空闲' }}</strong></p>
+      <p>投屏状态: <strong>{{ screenFlagStore ? '投屏中' : '正常' }}</strong></p>
+      
+      <div class="actions">
+        <el-button @click="toggleTheme">切换主题</el-button>
+        <el-button @click="toggleLoading">切换 Loading</el-button>
+        <el-button @click="toggleScreen">切换投屏</el-button>
+      </div>
+    </div>
+
+    <!-- 示例 Store 示例 -->
+    <div class="demo-section">
+      <h3>2. 示例 Store (exampleStore)</h3>
+      <p>计数: <strong>{{ count }}</strong></p>
+      <p>双倍计数: <strong>{{ doubleCount }}</strong></p>
+      <p>列表长度: <strong>{{ list.length }}</strong></p>
+      
+      <div class="actions">
+        <el-button @click="increment">+1</el-button>
+        <el-button @click="increment(5)">+5</el-button>
+        <el-button @click="fetchList">获取列表</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { createGlobalStore, createExampleStore } from '@stores/index'
+
+// ========== 全局 Store ==========
+const globalStore = createGlobalStore()
+const { themeVal, isLoading, screenFlagStore } = storeToRefs(globalStore)
+const { changeGlobalTheme, setIsLoadingStore, setScreenFlag } = globalStore
+
+const toggleTheme = () => {
+  changeGlobalTheme(themeVal.value === 'light' ? 'dark' : 'light')
+}
+
+const toggleLoading = () => {
+  setIsLoadingStore(!isLoading.value)
+}
+
+const toggleScreen = () => {
+  setScreenFlag(!screenFlagStore.value)
+}
+
+// ========== 示例 Store ==========
+const exampleStore = createExampleStore()
+const { count, list, doubleCount } = storeToRefs(exampleStore)
+const { increment, fetchList } = exampleStore
+</script>
+
+<style scoped>
+.store-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+  padding: 20px;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  background: var(--table-body-bg-color, #f5f7fa);
+}
+
+.demo-section h3 {
+  margin-top: 0;
+  color: var(--main-color, #067dff);
+}
+
+.actions {
+  margin-top: 15px;
+}
+
+.actions .el-button {
+  margin-right: 10px;
+}
+</style>
+

package/templates/default/src/styles/index.scss

@@ -0,0 +1,23 @@
+/**
+ * @FileDescription: 项目样式入口文件
+ * @Author: template
+ * @Date: 2026-01-04
+ * @Description: 
+ * 1. 公共样式已通过 vite.config.js 的 additionalData 全局引入：
+ *    - @huitu/ui/src/styles/variables.scss (公共变量)
+ *    - @huitu/ui/src/styles/mixin.scss (公共 mixin)
+ * 2. 必须显式引入以下产生 CSS 输出的全局样式文件（不能放在 additionalData 中）：
+ *    - src/styles/theme/variables.scss (项目主题变量定义)
+ *    - @huitu/ui/src/styles/reset.scss (Element Plus 样式重置)
+ * 3. 项目自定义样式请放在 theme/ 目录下，并在此处引入
+ */
+
+// 引入 CSS 变量定义（主题配置）
+@import "./theme/variables.scss";
+
+// 引入 Element Plus 重置样式（依赖上面的变量）
+// @import '@huitu/ui/src/styles/reset.scss';
+
+// 项目自定义样式
+// 如需添加其他自定义样式，请在 theme/ 目录下创建文件并在此处引入
+// @import './theme/custom.scss';