uniccoo/uniViteTemplate
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MD3

Browse Source
This commit is contained in:
KuroSago 2024-10-02 23:26:51 +08:00
parent 76c35a015d
commit 07310d4da3
7 changed files with 144 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
packages/materialDesign3ThemeBuilder/README.md
View File

@ -4,7 +4,7 @@
Material Design 3 (MD3) 主题配置提供了一套完整的接口定义，用于构建符合MD3设计规范的主题。这包括颜色调色板、亮色和暗色模式的颜色方案等。
### 代码示例
## 代码示例
```typescript
import { generateTheme } from './generateTheme';
@ -22,7 +22,7 @@ const theme = generateTheme({
});
```
### 返回值
## 返回值
生成的主题对象包含以下属性：
@ -38,91 +38,156 @@ const theme = generateTheme({
### 主色（Primary）
| 属性名称 | 描述 |
| ------------------ | ------------------------------ |
| primary | 主色 |
| onPrimary | 主色上的文本和图标颜色 |
| primaryContainer | 主色容器颜色 |
| onPrimaryContainer | 主色容器颜色上的文本和图标颜色 |
| 属性名称 | 描述 | 用途 |
| ------------------ | ------------------------------ | -------------------------------- |
| primary | 主色 | 用于按钮、开关等主色调背景 |
| onPrimary | 主色上的文本和图标颜色 | 用于主色调背景上的文本和图标 |
| primaryContainer | 主色容器颜色 | 用于卡片、对话框等主色调背景 |
| onPrimaryContainer | 主色容器颜色上的文本和图标颜色 | 用于主色调容器背景上的文本和图标 |
### 次色（Secondary）
| 属性名称 | 描述 |
| -------------------- | ------------------------------ |
| secondary | 次色 |
| onSecondary | 次色上的文本和图标颜色 |
| secondaryContainer | 次色容器颜色 |
| onSecondaryContainer | 次色容器颜色上的文本和图标颜色 |
| 属性名称 | 描述 | 用途 |
| -------------------- | ------------------------------ | -------------------------------- |
| secondary | 次色 | 用于按钮、开关等次色调背景 |
| onSecondary | 次色上的文本和图标颜色 | 用于次色调背景上的文本和图标 |
| secondaryContainer | 次色容器颜色 | 用于卡片、对话框等次色调背景 |
| onSecondaryContainer | 次色容器颜色上的文本和图标颜色 | 用于次色调容器背景上的文本和图标 |
### 第三色（Tertiary）
| 属性名称 | 描述 |
| ------------------- | -------------------------------- |
| tertiary | 第三色 |
| onTertiary | 第三色上的文本和图标颜色 |
| tertiaryContainer | 第三色容器颜色 |
| onTertiaryContainer | 第三色容器颜色上的文本和图标颜色 |
| 属性名称 | 描述 | 用途 |
| ------------------- | -------------------------------- | ---------------------------------- |
| tertiary | 第三色 | 用于按钮、开关等第三色调背景 |
| onTertiary | 第三色上的文本和图标颜色 | 用于第三色调背景上的文本和图标 |
| tertiaryContainer | 第三色容器颜色 | 用于卡片、对话框等第三色调背景 |
| onTertiaryContainer | 第三色容器颜色上的文本和图标颜色 | 用于第三色调容器背景上的文本和图标 |
### 错误色（Error）
| 属性名称 | 描述 |
| ---------------- | ------------------------------ |
| error | 错误色 |
| onError | 错误色上的文本和图标颜色 |
| errorContainer | 错误容器颜色 |
| onErrorContainer | 错误容器颜色上的文本和图标颜色 |
| 属性名称 | 描述 | 用途 |
| ---------------- | ------------------------------ | ------------------------------ |
| error | 错误色 | 用于错误提示按钮、文本等 |
| onError | 错误色上的文本和图标颜色 | 用于错误色背景上的文本和图标 |
| errorContainer | 错误容器颜色 | 用于错误提示卡片、对话框等 |
| onErrorContainer | 错误容器颜色上的文本和图标颜色 | 用于错误容器背景上的文本和图标 |
### 信息色（Info）
| 属性名称 | 描述 |
| --------------- | ------------------------------ |
| info | 信息色 |
| onInfo | 信息色上的文本和图标颜色 |
| infoContainer | 信息容器颜色 |
| onInfoContainer | 信息容器颜色上的文本和图标颜色 |
| 属性名称 | 描述 | 用途 |
| --------------- | ------------------------------ | ------------------------------ |
| info | 信息色 | 用于信息提示按钮、文本等 |
| onInfo | 信息色上的文本和图标颜色 | 用于信息色背景上的文本和图标 |
| infoContainer | 信息容器颜色 | 用于信息提示卡片、对话框等 |
| onInfoContainer | 信息容器颜色上的文本和图标颜色 | 用于信息容器背景上的文本和图标 |
### 警告色（Warning）
| 属性名称 | 描述 |
| ------------------ | ------------------------------ |
| warning | 警告色 |
| onWarning | 警告色上的文本和图标颜色 |
| warningContainer | 警告容器颜色 |
| onWarningContainer | 警告容器颜色上的文本和图标颜色 |
| 属性名称 | 描述 | 用途 |
| ------------------ | ------------------------------ | ------------------------------ |
| warning | 警告色 | 用于警告提示按钮、文本等 |
| onWarning | 警告色上的文本和图标颜色 | 用于警告色背景上的文本和图标 |
| warningContainer | 警告容器颜色 | 用于警告提示卡片、对话框等 |
| onWarningContainer | 警告容器颜色上的文本和图标颜色 | 用于警告容器背景上的文本和图标 |
### 成功色（Success）
| 属性名称 | 描述 |
| ------------------ | ------------------------------ |
| success | 成功色 |
| onSuccess | 成功色上的文本和图标颜色 |
| successContainer | 成功容器颜色 |
| onSuccessContainer | 成功容器颜色上的文本和图标颜色 |
| 属性名称 | 描述 | 用途 |
| ------------------ | ------------------------------ | ------------------------------ |
| success | 成功色 | 用于成功提示按钮、文本等 |
| onSuccess | 成功色上的文本和图标颜色 | 用于成功色背景上的文本和图标 |
| successContainer | 成功容器颜色 | 用于成功提示卡片、对话框等 |
| onSuccessContainer | 成功容器颜色上的文本和图标颜色 | 用于成功容器背景上的文本和图标 |
### 背景和表面（Background and Surface）
| 属性名称 | 描述 |
| ----------------------- | ---------------------------- |
| background | 背景色 |
| onBackground | 背景色上的文本和图标颜色 |
| surface | 表面色 |
| onSurface | 表面色上的文本和图标颜色 |
| surfaceVariant | 表面变体色 |
| onSurfaceVariant | 表面变体色上的文本和图标颜色 |
| surfaceContainerLowest | 最低表面容器颜色 |
| surfaceContainerLow | 低表面容器颜色 |
| surfaceContainer | 表面容器颜色 |
| surfaceContainerHigh | 高表面容器颜色 |
| surfaceContainerHighest | 最高表面容器颜色 |
| 属性名称 | 描述 | 用途 |
| ----------------------- | ---------------------------- | ------------------------------ |
| background | 背景色 | 用于应用或网页的背景色 |
| onBackground | 背景色上的文本和图标颜色 | 用于背景色上的文本和图标 |
| surface | 表面色 | 用于表面元素，如卡片、对话框等 |
| onSurface | 表面色上的文本和图标颜色 | 用于表面元素上的文本和图标 |
| surfaceVariant | 表面变体色 | 用于不同层次的表面元素 |
| onSurfaceVariant | 表面变体色上的文本和图标颜色 | 用于表面变体元素上的文本和图标 |
| surfaceContainerLowest | 最低表面容器颜色 | 用于最低层次的容器背景色 |
| surfaceContainerLow | 低表面容器颜色 | 用于低层次的容器背景色 |
| surfaceContainer | 表面容器颜色 | 用于中层次的容器背景色 |
| surfaceContainerHigh | 高表面容器颜色 | 用于高层次的容器背景色 |
| surfaceContainerHighest | 最高表面容器颜色 | 用于最高层次的容器背景色 |
### 其他（Others）
| 属性名称 | 描述 |
| ---------------- | ---------------------------- |
| inverseSurface | 反色表面色 |
| inverseOnSurface | 反色表面色上的文本和图标颜色 |
| inversePrimary | 反色主色 |
| surfaceTint | 表面色调 |
| outline | 轮廓色 |
| outlineVariant | 轮廓变体色 |
| shadow | 阴影色 |
| 属性名称 | 描述 | 用途 |
| ---------------- | ---------------------------- | ---------------------------- |
| inverseSurface | 反色表面色 | 用于在暗色背景上提供亮色表面 |
| inverseOnSurface | 反色表面色上的文本和图标颜色 | 用于在暗色背景上的文本和图标 |
| inversePrimary | 反色主色 | 用于在暗色背景上提供主色调 |
| surfaceTint | 表面色调 | 用于调整表面元素的颜色深浅 |
| outline | 轮廓色 | 用于边框、线条等 |
| outlineVariant | 轮廓变体色 | 用于不同层次的边框、线条等 |
| shadow | 阴影色 | 用于提供阴影效果，增强立体感 |
## MD3Palettes 接口
`MD3Palettes` 定义了主题的颜色调色板，包括各种色调的集合。
### 主色调（Primary）
| 属性名称 | 色调值 | 描述 | 用途 |
| -------- | ------ | ------ | -------------------------- |
| primary | 0-100 | 主色调 | 用于按钮、开关等主色调背景 |
### 次色调（Secondary）
| 属性名称 | 色调值 | 描述 | 用途 |
| --------- | ------ | ------ | -------------------------- |
| secondary | 0-100 | 次色调 | 用于按钮、开关等次色调背景 |
### 第三色（Tertiary）
| 属性名称 | 色调值 | 描述 | 用途 |
| -------- | ------ | ------ | ---------------------------- |
| tertiary | 0-100 | 第三色 | 用于按钮、开关等第三色调背景 |
### 错误色（Error）
| 属性名称 | 色调值 | 描述 | 用途 |
| -------- | ------ | ------ | ------------------------ |
| error | 0-100 | 错误色 | 用于错误提示按钮、文本等 |
### 信息色（Info）
| 属性名称 | 色调值 | 描述 | 用途 |
| -------- | ------ | ------ | ------------------------ |
| info | 0-100 | 信息色 | 用于信息提示按钮、文本等 |
### 警告色（Warning）
| 属性名称 | 色调值 | 描述 | 用途 |
| -------- | ------ | ------ | ------------------------ |
| warning | 0-100 | 警告色 | 用于警告提示按钮、文本等 |
### 成功色（Success）
| 属性名称 | 色调值 | 描述 | 用途 |
| -------- | ------ | ------ | ------------------------ |
| success | 0-100 | 成功色 | 用于成功提示按钮、文本等 |
### 中性色（Neutral）
| 属性名称 | 色调值 | 描述 | 用途 |
| -------- | ------ | ------ | ------------------------ |
| neutral | 0-100 | 中性色 | 用于文本、图标等默认颜色 |
### 中性色变体（Neutral Variant）
| 属性名称 | 色调值 | 描述 | 用途 |
| -------------- | ------ | ---------- | ---------------------------------- |
| neutralVariant | 0-100 | 中性色变体 | 用于提供中性色的变体，以增加层次感 |
### 常用颜色（Common）
| 属性名称 | 描述 | 用途 |
| -------- | ---- | ---------------------------------- |
| black | 黑色 | 用于文本、图标等需要强调的地方 |
| white | 白色 | 用于背景、弹窗等需要高亮显示的地方 |

16
src/components/WeekGantView/GantDate.vue
View File

@ -80,7 +80,7 @@ const weekDatesForMarks = computed(() => {
</script>
<template>
<div class="gantDateShadow flex flex-col pb-2 pt-2">
<div class="gantDateShadow bg-secondaryContainer flex flex-col pb-2 pt-2">
<div class="relative flex flex-1 flex-row items-center justify-center flex-self-stretch">
<div class="relative flex flex-row items-center gap-2">
<!-- <n-date-picker
@ -90,10 +90,10 @@ const weekDatesForMarks = computed(() => {
type="date"
@update:value="datePickerChange"
/> -->
<span class="font-bold text-inverseSurface">
<span class="font-bold text-onSecondaryContainer">
{{ dayjs(selectedDate).format('YYYY年M月') }}
</span>
<SvgIcon class="rotate-0 font-bold" icon="i-ic-round-keyboard-arrow-down" />
<SvgIcon class="rotate-0 text-onSecondaryContainer font-bold" icon="i-ic-round-keyboard-arrow-down" />
</div>
<div class="absolute b h-full flex-col flex items-center justify-center right-0 flex-self-stretch">
<div
@ -114,7 +114,7 @@ const weekDatesForMarks = computed(() => {
<div
class="absolute h-32 w-32 flex items-center justify-center rounded-full bg-primary left-8rpx" @click="prevWeek"
>
<SvgIcon class="text-28 text-white font-bold" icon="i-material-symbols-chevron-left-rounded" />
<SvgIcon class="text-28 text-onPrimary font-bold" icon="i-material-symbols-chevron-left-rounded" />
</div>
<!-- 周历表 -->
@ -126,7 +126,7 @@ const weekDatesForMarks = computed(() => {
@click="selectDate(item.date)"
>
<span
class="text-20 text-inverseSurface"
class="text-20 text-onSecondaryContainer"
:class="{
'text-primary': item.date === selectedDate,
}"
@ -135,7 +135,7 @@ const weekDatesForMarks = computed(() => {
</span>
<span
class="text-20 font-bold text-inverseSurface"
class="text-20 font-bold text-onSecondaryContainer"
:class="{
'text-primary': item.date === selectedDate,
}"
@ -145,7 +145,7 @@ const weekDatesForMarks = computed(() => {
<!-- 标记点 -->
<div
class="mt-0 h-1 w-1 rounded-full"
class="mt-0 h-8 w-8 rounded-full"
:class="{
'bg-primary': item.isMark,
'!bg-[#CCCCCC]': item.isMark && item.date < dayjs().startOf('day').valueOf(),
@ -155,7 +155,7 @@ const weekDatesForMarks = computed(() => {
</div>
<div class="absolute right-8rpx h-32 w-32 flex items-center justify-center rounded-full bg-primary" @click="nextWeek">
<SvgIcon class="text-5 text-white font-bold" icon="i-material-symbols-chevron-right-rounded" />
<SvgIcon class="text-5 text-onPrimary font-bold" icon="i-material-symbols-chevron-right-rounded" />
</div>
</div>
</div>

4
src/components/WeekGantView/GantView.vue
View File

@ -104,7 +104,7 @@ const scrollTop = computed(() => {
</script>
<template>
<div class="relative flex-1">
<div class="relative flex-1 bg-tertiaryContainer">
<scroll-view
:scroll-anchoring="true"
:scroll-with-animation="true"
@ -128,7 +128,7 @@ const scrollTop = computed(() => {
}"
>
<span
class="relative block text-20rpx translate-y-[-50%] text-inverseSurface line-height-none text-center"
class="relative block text-20rpx translate-y-[-50%] text-onTertiaryContainer line-height-none text-center"
:class="{
'translate-y-0': inex === 0,
}"

2
src/components/WeekGantView/demo.vue
View File

@ -68,7 +68,7 @@ function addThing() {
<button class="" @click="addThing">
addThing
</button>
<div class="h-660rpx flex flex-col mx-4 bg-primaryContainer rounded-3 shadow overflow-clip ">
<div class="h-660rpx flex flex-col mx-4 bg-tertiaryContainer rounded-3 shadow-lg overflow-clip ">
<week-gant-view v-model:value="value" v-model:things="things" />
</div>
</template>

1
src/components/WeekGantView/helper.ts
View File

@ -1,6 +1,5 @@
import type { ThingType } from './type';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
export function getWeekDates(date: string | number | Date | dayjs.Dayjs | null | undefined) {
const startOfWeek = dayjs(date).weekday(0);

2
src/pages/splashScreen/index.vue
View File

@ -67,7 +67,7 @@ function toNumerology() {
</script>
<template>
<view class="bg-background flex-1">
<view class=" flex-1">
<div class="flex flex-col gap-4 mt-32rpx">
<WeekGantViewDemo />

4
src/stores/helper/themes.ts
View File

@ -9,7 +9,7 @@
*
* ## Last Modified: 2024-09-05 15:54:91
*
* Modified By: KuroSago
* Modified By: kurosago
*
* ## Copyright (c) 2024 self.
*
@ -30,7 +30,6 @@ const Avocado = {
neutralVariant: '#f0e68c', // 浅黄色调，作为一种温和的变体色
};
// 西瓜
const Watermelon = {
primary: '#ff4757', // 西瓜果肉的鲜红色
secondary: '#2ecc71', // 西瓜外皮的绿色
@ -43,7 +42,6 @@ const Watermelon = {
neutralVariant: '#95a5a6', // 较浅的灰色，作为中性色变体
};
// 蓝莓
const Blueberry = {
primary: '#4a69bd', // 蓝莓的深蓝色
secondary: '#82ccdd', // 浅蓝色，代表天空的清爽感