Skip to content

feat: import unocss and add menu collapse #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kagol merged 2 commits into from
Apr 14, 2025
Merged

feat: import unocss and add menu collapse #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b45243c
feat: import unocss and add menu collapse
kagol Apr 12, 2025
51fd7e1
feat: add presetAttributify
kagol Apr 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@ coverage
dist
yarn.lock
.env
.history
1 change: 1 addition & 0 deletions template/tinyvue/.eslintrc.js → template/tinyvue/.eslintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,5 +80,6 @@ module.exports = {
'no-param-reassign': 0,
'prefer-regex-literals': 0,
'import/no-extraneous-dependencies': 0,
"import/no-unresolved": 0,
},
};
2 changes: 2 additions & 0 deletions template/tinyvue/config/vite.config.base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down
4 changes: 3 additions & 1 deletion template/tinyvue/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -110,6 +111,7 @@
"ts-node": "^10.9.2",
"tsx": "^4.19.1",
"typescript": "^4.9.5",
"unocss": "66.1.0-beta.11",
Copy link

@coderabbitai coderabbitai bot Apr 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

UnoCSS beta version may have stability issues.

The version number 66.1.0-beta.11 appears unusually high and is a beta release, which might not be suitable for production use due to potential API instability or bugs.

Please verify this is the correct version. Standard UnoCSS versions typically follow a semver pattern like 0.x.x or 1.x.x. Consider using a stable release if available.

#!/bin/bash
# Check latest stable version of UnoCSS
npm view unocss versions --json | grep -v beta | grep -v alpha | grep -v rc | tail -1
🧰 Tools
🪛 GitHub Actions: BackEnd UnitTest

[warning] Local package.json exists, but node_modules missing, did you mean to install?

"unplugin-vue-components": "^0.17.21",
"vite": "^6.1.0",
"vite-plugin-compression": "^0.5.1",
Expand Down
585 changes: 557 additions & 28 deletions template/tinyvue/pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 0 additions & 5 deletions template/tinyvue/src/assets/style/menu.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
// 菜单宽度
:deep(.tiny-tree-menu) {
width: 250px;
}

// 去除默认右边竖线
:deep(.tiny-tree-menu::before) {
border-right: none;
Expand Down
12 changes: 10 additions & 2 deletions template/tinyvue/src/components/menu/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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();
Expand All @@ -39,6 +42,7 @@
type SideMenuData = (ITreeNodeData & { meta: { url: string } })[];

let routerTitle = [] as any;
const appStore = useAppStore();

const filtter = (treeNodeDatas: ITreeNodeData[]) => {
const menus: SideMenuData = [];
Expand Down Expand Up @@ -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) {
Expand Down
162 changes: 72 additions & 90 deletions template/tinyvue/src/layout/default-layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 relative class="shadow-[0_4px_6px_#0003] z-[999]">
<NavBar v-if="layoutMode[myPattern].navbar"/>
</div>
<div 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)' }">
Copy link

@coderabbitai coderabbitai bot Apr 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Check accessibility of color contrast

The text color #ccc on a light background (#f5f6f7) might have insufficient contrast ratio for accessibility. Consider using a darker text color to improve readability.

🌐 Web query:

What is the contrast ratio between text color #ccc and background color #f5f6f7? Does it meet WCAG AA standards?

💡 Result:

The contrast ratio between text color #ccc (light gray) and background color #f5f6f7 (off-white) is 1.42:1, which falls far below the WCAG AA requirement of 4.5:1 for normal text and 3:1 for large text[2][3][5]. Here's the breakdown:

Calculation Details

  1. Relative Luminance Values:

    • #ccc (text): 0.643
    • #f5f6f7 (background): 0.933

  2. Contrast Ratio Formula:
    [
    \frac{L_{\text{lighter}} + 0.05}{L_{\text{darker}} + 0.05} = \frac{0.933 + 0.05}{0.643 + 0.05} \approx 1.42:1
    ]

WCAG Compliance

Text Type Required Ratio Actual Ratio Compliance
Normal text 4.5:1 1.42:1 ❌ Fail
Large text/bold 3:1 1.42:1 ❌ Fail

Recommendations

  • Use a darker text color (e.g., #666 or #444) to improve contrast.
  • Verify adjustments using tools like the WebAIM Contrast Checker[6][8].

This combination fails accessibility standards and would be difficult for users with low vision or color perception deficiencies to read[2][6][9].

Citations:

Accessibility Issue: Insufficient Color Contrast

The text color (#ccc) on the light background (#f5f6f7) has a contrast ratio of approximately 1.42:1, which is significantly below the WCAG AA requirement (minimum 4.5:1 for normal text and 3:1 for large or bold text). To improve readability and accessibility, please consider replacing text-[#ccc] with a darker color (for example, #666 or #444).

  • File: template/tinyvue/src/layout/default-layout.vue, Line 11
  • Action: Update the text color to a darker shade to meet WCAG AA contrast guidelines.

<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>
Expand Down Expand Up @@ -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,
Expand All @@ -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';
Expand Down Expand Up @@ -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();
Expand All @@ -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;';
}
});
// 初始化默认主题
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -319,6 +296,11 @@
padding: 0 16px;
}

:deep(.tiny-tree-menu .tiny-tree) {
height: 100%;
overflow: auto;
}

.theme-box {
position: fixed;
top: 88%;
Expand Down
1 change: 1 addition & 0 deletions template/tinyvue/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion template/tinyvue/src/views/list/search-table/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
8 changes: 8 additions & 0 deletions template/tinyvue/uno.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { defineConfig, presetMini, presetAttributify } from 'unocss'

export default defineConfig({
presets: [
presetMini(),
presetAttributify(),
],
})
Loading