feat: import unocss and add menu collapse

Author: kagol

.gitignore

@@ -10,3 +10,4 @@ coverage
 dist
 yarn.lock
 .env
+.history

template/tinyvue/.eslintrc.js template/tinyvue/.eslintrc.cjstemplate/tinyvue/.eslintrc.js renamed to template/tinyvue/.eslintrc.cjs

@@ -80,5 +80,6 @@ module.exports = {
     'no-param-reassign': 0,
     'prefer-regex-literals': 0,
     'import/no-extraneous-dependencies': 0,
+    "import/no-unresolved": 0,
   },
 };

template/tinyvue/config/vite.config.base.ts

@@ -4,13 +4,15 @@ import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import svgLoader from 'vite-svg-loader';
 import eslint from 'vite-plugin-eslint';
+import UnoCSS from 'unocss/vite';
 
 const config = {
   plugins: [
     vue(),
     vueJsx(),
     svgLoader({ svgoConfig: {} }),
     eslint({ cache: false }), // 禁用缓存‌
+    UnoCSS(),
   ],
   build: {
     outDir: resolve(__dirname, '../dist'),

template/tinyvue/package.json

@@ -5,6 +5,7 @@
   "private": true,
   "author": "Tiny Team",
   "license": "MIT",
+  "type": "module",
   "scripts": {
     "start": "vite --config ./config/vite.config.dev.ts --port 3031",
     "build": "vite build --config ./config/vite.config.prod.ts",
@@ -40,8 +41,8 @@
     "@opentiny/vue": "^3.21.0",
     "@opentiny/vue-icon": "^3.21.0",
     "@opentiny/vue-locale": "^3.20.0",
-    "@opentiny/vue-theme": "^3.21.0",
     "@opentiny/vue-search-box": "^0.0.1",
+    "@opentiny/vue-theme": "^3.21.0",
     "@types/mockjs": "^1.0.10",
     "@types/node": "^22.7.4",
     "@vueuse/core": "^10.11.1",
@@ -110,6 +111,7 @@
     "ts-node": "^10.9.2",
     "tsx": "^4.19.1",
     "typescript": "^4.9.5",
+    "unocss": "66.1.0-beta.11",
     "unplugin-vue-components": "^0.17.21",
     "vite": "^6.1.0",
     "vite-plugin-compression": "^0.5.1",

template/tinyvue/pnpm-lock.yaml

@@ -1,8 +1,3 @@
-// 菜单宽度
-:deep(.tiny-tree-menu) {
-  width: 250px;
-}
-
 // 去除默认右边竖线
 :deep(.tiny-tree-menu::before) {
   border-right: none;

template/tinyvue/src/assets/style/menu.less

@@ -5,11 +5,14 @@
       :data="MenuData"
       :show-filter="false"
       node-key="id"
-      wrap
+
       :default-expanded-keys="expandeArr"
       only-check-children
       check-strictly
+      menu-collapsible
       @current-change="currentChange"
+      @collapse-change="collapseChange"
+      class="h-[calc(100vh-60px)]"
     >
       <template #default="slotScope">
         <template v-for="(item, index) in routerTitle" :key="index">
@@ -30,7 +33,7 @@
   import router from '@/router';
   import { ITreeNodeData } from '@/router/guard/menu';
   import * as icons from '@opentiny/vue-icon';
-  import { useTabStore } from '@/store';
+  import { useTabStore, useAppStore } from '@/store';
   import { useDeepClone } from '@/hooks/useDeepClone';
 
   const menuStore = useMenuStore();
@@ -39,6 +42,7 @@
   type SideMenuData = (ITreeNodeData & { meta: { url: string } })[];
 
   let routerTitle = [] as any;
+  const appStore = useAppStore();
 
   const filtter = (treeNodeDatas: ITreeNodeData[]) => {
     const menus: SideMenuData = [];
@@ -78,6 +82,10 @@
     router.replace({ name: data.label });
   };
 
+  const collapseChange = (value) => {
+    appStore.isMenuCollapsed = value
+  }
+
   const findId = (name: string, path: string) => {
     const dfs = (item, url: string[]) => {
       if (url.join('/') === path) {

template/tinyvue/src/components/menu/index.vue

@@ -1,47 +1,33 @@
 <template>
   <div class="layout">
-    <tiny-container :aside-width="250" :pattern="myPattern">
-      <template #header>
-        <tiny-layout>
-          <div class="layout-navbar">
-            <NavBar />
-          </div>
-        </tiny-layout>
-      </template>
-      <template #aside>
-        <tiny-layout class="layout-sider">
-          <div class="menu-wrapper">
-            <Suspense>
-              <Menu v-if="reloadKey !== 'menu'" />
-            </Suspense>
-          </div>
-        </tiny-layout>
-      </template>
-      <tiny-layout class="layout-content">
-        <Tabs
-          :key="tabsRefreshKey"
-          v-model="currentTabName"
-          with-close
-          @click="onClick"
-          @close="onClose"
-        >
-          <tab-item
-            v-for="(history, idx) of tabsHistory"
-            :key="idx"
-            :title="t(history.name)"
-            :name="history.link"
-          ></tab-item>
-        </Tabs>
-        <PageLayout />
-      </tiny-layout>
-      <template #footer>
-        <tiny-layout>
-          <div class="layout-footer">
-            <Footer />
-          </div>
-        </tiny-layout>
-      </template>
-    </tiny-container>
+    <div>
+      <div class="shadow-[0_4px_6px_#0003] relative z-[999]">
+        <NavBar v-if="layoutMode[myPattern].navbar"/>
+      </div>
+      <div class="flex">
+        <Suspense>
+          <Menu v-if="reloadKey !== 'menu' && layoutMode[myPattern].menu" class="shadow-[0_4px_12px_#0000001a] z-[100]" />
+        </Suspense>
+        <div class="text-[#ccc] bg-[#f5f6f7] pl-[10px] pr-[10px] flex-1 h-[calc(100vh-60px)]" :style="{ width: isMenuCollapsed ? '100%' : 'calc(100% - 220px)' }">
+          <Tabs
+            :key="tabsRefreshKey"
+            v-model="currentTabName"
+            with-close
+            @click="onClick"
+            @close="onClose"
+          >
+            <tab-item
+              v-for="(history, idx) of tabsHistory"
+              :key="idx"
+              :title="t(history.name)"
+              :name="history.link"
+            ></tab-item>
+          </Tabs>
+          <PageLayout class="!h-[calc(100%-120px)]" />
+          <Footer v-if="layoutMode[myPattern].footer" class="h-[60px]" />
+        </div>
+      </div>
+    </div>
     <div class="theme-box" @click="themeVisible">
       <img src="@/assets/images/theme.png" />
     </div>
@@ -72,11 +58,9 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, watch, onMounted, computed, nextTick, provide } from 'vue';
+  import { ref, watch, computed, nextTick, provide } from 'vue';
   import { useI18n } from 'vue-i18n';
   import {
-    Container as TinyContainer,
-    Layout as TinyLayout,
     Modal as tinyModal,
     Tabs,
     TabItem,
@@ -96,14 +80,16 @@
   // 动态切换
   const router = useRouter();
   const appStore = useAppStore();
-  const changefooter = ref('#fff');
+  const footerColor = ref('#fff');
 
   const { t } = useI18n();
   const tabStore = useTabStore();
 
   const tabsHistory = computed(() => tabStore.data);
   const currentTabName = ref();
 
+  const { isMenuCollapsed } = appStore;
+
   const reloadKey = ref('');
   const reloadMenu = () => {
     reloadKey.value = 'menu';
@@ -203,6 +189,39 @@
   // 是否显示切换框架结构
   const myPattern = ref('legend');
 
+  const layoutMode = {
+    // 传奇布局
+    legend: {
+      navbar: true,
+      menu: true,
+      footer: true,
+    },
+    // 简约布局
+    simple: {
+      navbar: false,
+      menu: true,
+      footer: false,
+    },
+    // 时尚布局
+    fashion: {
+      navbar: true,
+      menu: true,
+      footer: false,
+    },
+    // 经典布局
+    classic: {
+      navbar: true,
+      menu: false,
+      footer: true,
+    },
+    // 默认布局
+    default: {
+      navbar: true,
+      menu: true,
+      footer: false,
+    },
+  }
+
   // 主题配置
   const disTheme = ref(false);
   const theme = new TinyThemeTool();
@@ -227,9 +246,9 @@
 
   watch(appStore.$state, (newValue, oldValue) => {
     if (newValue.theme === 'dark') {
-      changefooter.value = '#262323;';
+      footerColor.value = '#262323;';
     } else {
-      changefooter.value = '#fff;';
+      footerColor.value = '#fff;';
     }
   });
   // 初始化默认主题
@@ -241,24 +260,6 @@
     height: 100%;
   }
 
-  .layout-navbar {
-    position: fixed;
-    left: 0;
-    z-index: 999;
-    width: 100%;
-    height: 60px;
-    background-color: #fff;
-    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
-  }
-
-  .menu-wrapper {
-    width: inherit;
-    height: 92vh;
-    margin-top: v-bind(top);
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
   .global-setting {
     position: fixed;
     top: 280px;
@@ -268,30 +269,6 @@
     height: 30px;
   }
 
-  .layout :deep(.tiny-container .tiny-container__aside) {
-    z-index: 100;
-    background: #fff;
-    border-left: 1px solid #ccc;
-    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
-  }
-
-  .layout :deep(.tiny-container .tiny-container__main) {
-    background-color: #f5f6f7;
-  }
-
-  .layout :deep(.layout-content) {
-    height: 100%;
-    padding: 0 10px;
-    overflow: hidden;
-  }
-
-  .layout :deep(.tiny-container .tiny-container__footer) {
-    display: flex;
-    justify-content: center;
-    padding-top: 15px;
-    background-color: #f5f6f7;
-  }
-
   // 组件无法固定非message的modal类型距离顶部距离
   :deep(.tiny-modal__box) {
     top: 8px !important;
@@ -319,6 +296,11 @@
     padding: 0 16px;
   }
 
+  :deep(.tiny-tree-menu .tiny-tree) {
+    height: 100%;
+    overflow: auto;
+  }
+
   .theme-box {
     position: fixed;
     top: 88%;

template/tinyvue/src/layout/default-layout.vue

@@ -12,6 +12,7 @@ import '@/assets/style/global.less';
 import config from '../hwc-exports.json';
 import chinaMap from './assets/china.json';
 import '@opentiny/vue-search-box/index.css';
+import 'virtual:uno.css';
 
 registerMap('china', chinaMap as any);
 const app = createApp(App);

template/tinyvue/src/main.ts

@@ -1,6 +1,6 @@
 <template>
   <div class="search-container-list">
-    <Breadcrumb :items="['menu.list.searchTable']" />
+    <Breadcrumb :items="['menu.list', 'menu.list.searchTable']" />
 
     <div class="search-table-container">
       <tiny-fullscreen