cmpt-huitu-cli 1.0.12 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmpt-huitu-cli",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "type": "module",
   "description": "慧图前端项目工程化 CLI 工具",
   "main": "index.js",

package/templates/default/src/app.vue

@@ -5,11 +5,9 @@
   >
     <el-container>
       <el-header>
-        <div class="logo">Huitu Standard Template</div>
         <div class="nav">
           <router-link to="/">Home</router-link> |
           <router-link to="/about">About</router-link>
-          <div @click="handleClick">你好</div>
         </div>
       </el-header>
       <el-main>
@@ -32,15 +30,7 @@
   </div>
 </template>
 
-<script setup>
-  import { useRouter } from 'vue-router'
-
-  const router = useRouter()
-
-  const handleClick = () => {
-    router.push('/about')
-  }
-</script>
+<script setup></script>
 
 <style lang="scss">
   #app {

package/templates/default/src/main.js

@@ -4,6 +4,8 @@ import router from './routers'
 import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+// 引入 Element Plus 暗黑模式样式
+import 'element-plus/theme-chalk/dark/css-vars.css'
 
 // 引入项目样式
 import '@/styles/index.scss'
@@ -12,6 +14,9 @@ import '@/styles/index.scss'
 import * as HuituUtils from 'cmpt-huitu-utils'
 import HuituUI from 'cmpt-huitu-ui'
 
+// 引入主题工具函数
+import { initTheme } from '@/utils/theme'
+
 const app = createApp(App)
 
 app.use(router)
@@ -24,4 +29,7 @@ app.use(HuituUI)
 // 挂载工具函数到全局 (可选)
 app.config.globalProperties.$utils = HuituUtils
 
+// 初始化主题（必须在挂载前调用，确保主题正确应用）
+initTheme()
+
 app.mount('#app')

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

@@ -1,6 +1,6 @@
 /**
  * @FileDescription: 路由模块演示
- * @Author: 
+ * @Author:
  * @Date: 2024
  */
 

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

@@ -30,3 +30,12 @@ export async function refreshAccessTokenApi(params) {
   })
   return response.data
 }
+
+// 获取主题
+export async function getThemeInfoApi() {
+  const response = await cache.request({
+    url: 'system/theme/theme-info',
+    method: 'post',
+  })
+  return response.data
+}

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

@@ -18,6 +18,21 @@
 // 引入 Element Plus 重置样式（依赖上面的变量）
 // @use 'cmpt-huitu-ui/src/styles/reset.scss';
 
+// 全局背景颜色设置
+body {
+  background-color: var(--body-bg-color);
+  color: var(--main-font-color);
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+
+#app {
+  background-color: var(--bg-color);
+  min-height: 100vh;
+  transition: background-color 0.3s ease;
+}
+
 // 项目自定义样式
 // 如需添加其他自定义样式，请在 theme/ 目录下创建文件并在此处引入
 // @use './theme/custom.scss' as *;

package/templates/default/src/styles/theme/variables.scss

@@ -13,6 +13,9 @@
   --main-font-color: #333333;
   --main-color: #067dff;
   --stat-font-color: #067dff;
+  /* 背景颜色 */
+  --bg-color: #ffffff;
+  --body-bg-color: #f5f5f5;
 
   /* 表格相关 */
   // --table-head-bg: linear-gradient(180deg, #b2d2ff 0%, #b9daff 100%);
@@ -40,6 +43,9 @@
   --main-font-color: #ffffff;
   --main-color: #e3a000;
   --stat-font-color: #ffffff;
+  /* 背景颜色 */
+  --bg-color: #1a1a1a;
+  --body-bg-color: #0d0d0d;
 
   /* 表格相关 */
   // --table-head-bg: linear-gradient(180deg, rgba(1, 49, 78, 1) 0%, rgba(0, 66, 104, 1) 100%);

package/templates/default/src/utils/theme.js

@@ -7,7 +7,20 @@ import { cache } from 'cmpt-huitu-utils'
 const { local } = cache
 export const setTheme = (theme) => {
   local.set('data-theme', theme)
-  document.documentElement.setAttribute('data-theme', theme)
+  const html = document.documentElement
+
+  // 设置 data-theme 属性
+  html.setAttribute('data-theme', theme)
+
+  // 设置 vxe-table 主题 (data-vxe-ui-theme)
+  html.setAttribute('data-vxe-ui-theme', theme)
+
+  // 设置 Element Plus 暗黑模式
+  if (theme === 'dark') {
+    html.classList.add('dark')
+  } else {
+    html.classList.remove('dark')
+  }
 }
 // 获取当前主题
 export const getTheme = () => {

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

@@ -1,21 +1,22 @@
 <template>
   <div class="home">
     <h1>欢迎使用慧图标准脚手架</h1>
-    <VexTable
-      :columns="columns"
-      :data="data"
-    />
-    <HTable
-      :data="data"
-      :columns="hTableColumns"
+    <el-button
+      type="primary"
+      :icon="Star"
+      @click="changeTheme"
+      >切换主题 (当前: {{ currentTheme === 'dark' ? '深色' : '浅色' }})</el-button
+    >
+    <el-button
+      type="primary"
+      @click="openDialog"
+      >打开弹框组件</el-button
+    >
+    <el-button
+      type="primary"
+      @click="openDrawer"
+      >打开抽屉组件</el-button
     >
-    </HTable>
-    <div class="chartsBox">
-      <htLineRelation
-        class="charts"
-        ref="myChart"
-      ></htLineRelation>
-    </div>
     <div class="content">
       <p>这是一个基于 Monorepo 架构的 Vue 3 标准模版。</p>
       <p>已集成：</p>
@@ -32,11 +33,108 @@
         <h3>组件演示</h3>
         <p>VexTable 和 HTable 组件已成功集成</p>
       </div>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div class="tableBox">
+            <h3>VexTable</h3>
+            <VexTable
+              :columns="columns"
+              :data="data"
+            />
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="tableBox">
+            <h3>HTable</h3>
+            <HTable
+              :data="data"
+              :columns="hTableColumns"
+            />
+          </div>
+        </el-col>
+      </el-row>
     </div>
+    <!--图表组件-->
+    <div class="chartsBox">
+      <htLineRelation
+        class="charts"
+        ref="myChart"
+      ></htLineRelation>
+    </div>
+    <!--地图组件-->
+    <div class="mapsBox">
+      <htMap
+        class="maps"
+        ref="myMap"
+        :layers="layers"
+      ></htMap>
+    </div>
+
+    <!--弹框组件-->
+    <HtDragDialog
+      v-model:visible="dialogVisible"
+      caption="测试拖拽弹窗"
+      :icon-name="iconName"
+      :w="500"
+      :h="400"
+      :min-width="300"
+      :min-height="200"
+    >
+      <div class="ht-dialog-wrap content">
+        <div class="ht-dialog-content">
+          <p>这是一个可拖拽、可拉伸的弹窗。</p>
+          <p>尝试拖动标题栏或调整边缘大小。</p>
+          <el-form label-width="80px">
+            <el-form-item label="输入框">
+              <el-input placeholder="请输入"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="ht-dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button
+            type="primary"
+            class="right-btn"
+            @click="dialogVisible = false"
+            >确定</el-button
+          >
+        </div>
+      </div>
+    </HtDragDialog>
+
+    <!--抽屉组件-->
+    <HtNewDrawer
+      v-model:visible="drawerVisible"
+      title="测试抽屉"
+      drawer-size="50%"
+      :mask-closable="true"
+    >
+      <div style="padding: 20px">
+        <h3>抽屉内容</h3>
+        <p>这是一个基于 View UI Plus 的抽屉组件。</p>
+        <p>支持全屏切换、左侧关闭按钮等功能。</p>
+      </div>
+    </HtNewDrawer>
   </div>
 </template>
 
 <script setup>
+  import { getThemeInfoApi } from '@/services/login'
+  import { ElMessage } from 'element-plus'
+  import { Star } from '@element-plus/icons-vue'
+  import { setTheme, getTheme } from '@/utils/theme'
+
+  // 当前主题状态
+  const currentTheme = ref(getTheme())
+
+  onMounted(() => {
+    getThemeInfoApi().then((res) => {
+      console.log(res)
+      ElMessage.success('调用接口/system/theme/theme-info获取主题成功')
+    })
+  })
+
   const columns = [
     { type: 'seq', title: '序号', width: 80 },
     { field: 'name', title: '姓名', width: 120 },
@@ -69,15 +167,33 @@
       fixed: 'left',
     },
   ]
+
+  // 更换主题
+  const changeTheme = () => {
+    // 切换主题：light <-> dark
+    const newTheme = currentTheme.value === 'light' ? 'dark' : 'light'
+    setTheme(newTheme)
+    currentTheme.value = newTheme
+    ElMessage.success(`已切换到${newTheme === 'dark' ? '深色' : '浅色'}主题`)
+  }
+
+  // 打开抽屉
+  const drawerVisible = ref(false)
+  const openDrawer = () => {
+    drawerVisible.value = true
+  }
+
+  // 打开弹框
+  const dialogVisible = ref(false)
+  const openDialog = () => {
+    dialogVisible.value = true
+  }
 </script>
 
 <style scoped>
   .home {
     padding: 20px;
   }
-  .content {
-    margin-top: 20px;
-  }
   ul {
     list-style: none;
     padding: 0;
@@ -93,11 +209,19 @@
     margin-bottom: 20px;
   }
   .chartsBox {
-    width: 600px;
+    width: 700px;
     height: 500px;
   }
   .charts {
     width: 100%;
     height: 100%;
   }
+  .mapsBox {
+    width: 800px;
+    height: 400px;
+  }
+  .maps {
+    width: 100%;
+    height: 100%;
+  }
 </style>