forked from opentiny/tiny-vue
docs(site): optimize the overall theme logic of the official website (#2109)
This commit is contained in:
ajaxzheng
GitHub
parent
97e9365727
commit
65737087eb
|
|
@ -96,8 +96,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</tiny-floatbar>
|
||||
<!-- 切换主题 -->
|
||||
<tiny-dropdown class="!fixed bottom20 right140" :show-icon="false" @item-click="changeTheme" :disabled="isSaasMode">
|
||||
<!-- 切换主题 暂时先屏蔽，等后续其他主题验收完成再放出此功能 -->
|
||||
<tiny-dropdown
|
||||
v-if="false"
|
||||
class="!fixed bottom20 right140"
|
||||
:show-icon="false"
|
||||
@item-click="changeTheme"
|
||||
:disabled="isSaasMode"
|
||||
>
|
||||
<span title="切换主题">
|
||||
<SvgTheme></SvgTheme>
|
||||
</span>
|
||||
|
|
@ -152,7 +158,6 @@ import {
|
|||
import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
|
||||
import Loading from '@opentiny/vue-loading'
|
||||
import designSmbConfig from '@opentiny/vue-design-smb'
|
||||
import designAuroraConfig from '@opentiny/vue-design-aurora'
|
||||
import designSaasConfig from '@opentiny/vue-design-saas'
|
||||
import { menuData, demoStr, demoVue, mds, demos } from './resourcePc.js'
|
||||
import { useTheme, useModeCtx } from './uses'
|
||||
|
|
@ -194,7 +199,7 @@ export default {
|
|||
currMd: hooks.computed(() => mds[`${modeState.pathName}.cn.md`]),
|
||||
demoLoading: false
|
||||
})
|
||||
// hui chart 新增图表类型，新增图表的 api 和原有图表的api 区分开。
|
||||
// hui chart 新增图表类型，新增图表的 api 和原有图表的api 区分开。
|
||||
const huiNewChart = ['chart-process']
|
||||
const fn = {
|
||||
// 菜单搜索：忽略大小写
|
||||
|
|
@ -258,9 +263,10 @@ export default {
|
|||
modeFn.pushToUrl()
|
||||
}
|
||||
|
||||
// 默认全部使用designSmbConfig，后续验收完毕再调整
|
||||
const designConfigMap = {
|
||||
'tiny-smb-theme': designSmbConfig,
|
||||
'tiny-aurora-theme': designAuroraConfig
|
||||
'tiny-aurora-theme': designSmbConfig
|
||||
}
|
||||
|
||||
const lastThemeKey = localStorage.getItem('tinyThemeToolkey')
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
|
||||
import { tinyAuroraTheme, tinySmbTheme, tinyInfinityTheme } from '@opentiny/vue-theme/theme'
|
||||
import { hooks } from '@opentiny/vue-common'
|
||||
import { Notify } from '@opentiny/vue'
|
||||
|
||||
|
|
@ -21,9 +20,9 @@ export function useTheme({ readCacheImmediate = true } = {}) {
|
|||
const lastThemeKey = localStorage.getItem('tinyThemeToolkey')
|
||||
|
||||
const THEME_MAP = {
|
||||
'tiny-aurora-theme': tinyAuroraTheme,
|
||||
'tiny-smb-theme': tinySmbTheme,
|
||||
'tiny-infinity-theme': tinyInfinityTheme
|
||||
'tiny-aurora-theme': null,
|
||||
'tiny-smb-theme': null,
|
||||
'tiny-infinity-theme': null
|
||||
}
|
||||
|
||||
const changeTheme = ({ vm }) => {
|
||||
|
|
|
|||
|
|
@ -3,24 +3,24 @@
|
|||
"type": "module",
|
||||
"version": "1.0.8",
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"keywords": [],
|
||||
"files": [
|
||||
"resources"
|
||||
],
|
||||
"dependencies": {
|
||||
"@opentiny/vue": "workspace:~",
|
||||
"@opentiny/vue-common": "workspace:~",
|
||||
"@opentiny/vue-design-aurora": "workspace:~",
|
||||
"@opentiny/vue-design-saas": "workspace:~",
|
||||
"@opentiny/vue-design-smb": "workspace:~",
|
||||
"@opentiny/vue-icon": "workspace:~",
|
||||
"@opentiny/vue-theme-mobile": "workspace:~",
|
||||
"@opentiny/vue-theme-saas": "workspace:~",
|
||||
"@opentiny/vue-design-aurora": "workspace:~",
|
||||
"@opentiny/vue-design-smb": "workspace:~",
|
||||
"@opentiny/vue-design-saas": "workspace:~",
|
||||
"sortablejs": "1.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "~1.42.0"
|
||||
},
|
||||
"files": [
|
||||
"resources"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
<template>
|
||||
<tiny-row>
|
||||
<tiny-col :span="2" class="tiny-color bg-success-normal"> bg-success-normal </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-warning-normal"> bg-warning-normal </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-error-normal"> bg-error-normal </tiny-col>
|
||||
</tiny-row>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Col as TinyCol, Row as TinyRow } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tiny-color {
|
||||
height: 80px;
|
||||
margin: 10px;
|
||||
line-height: 80px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
min-width: 175px;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tiny-color.bg-success-normal {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
|
||||
.tiny-color.bg-warning-normal {
|
||||
background-color: #faad14;
|
||||
}
|
||||
|
||||
.tiny-color.bg-error-normal {
|
||||
background-color: #f5222d;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('辅助色', async ({ page }) => {
|
||||
await page.goto('color#auxiliary-color')
|
||||
await expect(page.getByText('bg-success-normal')).toHaveClass(/bg-success-normal/)
|
||||
await expect(page.getByText('bg-warning-normal')).toHaveClass(/bg-warning-normal/)
|
||||
await expect(page.getByText('bg-error-normal')).toHaveClass(/bg-error-normal/)
|
||||
})
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<template>
|
||||
<tiny-row>
|
||||
<tiny-col :span="2" class="tiny-color bg-success-normal"> bg-success-normal </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-warning-normal"> bg-warning-normal </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-error-normal"> bg-error-normal </tiny-col>
|
||||
</tiny-row>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Col, Row } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCol: Col,
|
||||
TinyRow: Row
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tiny-color {
|
||||
height: 80px;
|
||||
margin: 10px;
|
||||
line-height: 80px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
min-width: 175px;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tiny-color.bg-success-normal {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
|
||||
.tiny-color.bg-warning-normal {
|
||||
background-color: #faad14;
|
||||
}
|
||||
|
||||
.tiny-color.bg-error-normal {
|
||||
background-color: #f5222d;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<template>
|
||||
<tiny-row>
|
||||
<tiny-col :span="2" class="tiny-color bg-primary-normal"> bg-primary-normal </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-primary-hover"> bg-primary-hover </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-primary-active"> bg-primary-active </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-btn-active">bg-btn-active</tiny-col>
|
||||
</tiny-row>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Col as TinyCol, Row as TinyRow } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tiny-color {
|
||||
height: 80px;
|
||||
margin: 10px;
|
||||
line-height: 80px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
min-width: 175px;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tiny-color.bg-primary-normal {
|
||||
background-color: var(--ti-common-color-line-active);
|
||||
}
|
||||
|
||||
.tiny-color.bg-primary-hover {
|
||||
background-color: #40a9ff;
|
||||
}
|
||||
|
||||
.tiny-color.bg-primary-active {
|
||||
background-color: #096dd9;
|
||||
}
|
||||
|
||||
.tiny-color.bg-btn-active {
|
||||
color: #333;
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('主色彩', async ({ page }) => {
|
||||
await page.goto('color#main-color')
|
||||
await expect(page.getByText('bg-primary-normal')).toHaveClass(/bg-primary-normal/)
|
||||
await expect(page.getByText('bg-primary-hover')).toHaveClass(/bg-primary-hover/)
|
||||
await expect(page.getByText('bg-primary-active')).toHaveClass(/bg-primary-active/)
|
||||
await expect(page.getByText('bg-btn-active')).toHaveClass(/bg-btn-active/)
|
||||
})
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<template>
|
||||
<tiny-row>
|
||||
<tiny-col :span="2" class="tiny-color bg-primary-normal"> bg-primary-normal </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-primary-hover"> bg-primary-hover </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-primary-active"> bg-primary-active </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-btn-active">bg-btn-active</tiny-col>
|
||||
</tiny-row>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Col, Row } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCol: Col,
|
||||
TinyRow: Row
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tiny-color {
|
||||
height: 80px;
|
||||
margin: 10px;
|
||||
line-height: 80px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
min-width: 175px;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tiny-color.bg-primary-normal {
|
||||
background-color: var(--ti-common-color-line-active);
|
||||
}
|
||||
|
||||
.tiny-color.bg-primary-hover {
|
||||
background-color: #40a9ff;
|
||||
}
|
||||
|
||||
.tiny-color.bg-primary-active {
|
||||
background-color: #096dd9;
|
||||
}
|
||||
|
||||
.tiny-color.bg-btn-active {
|
||||
color: #333;
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="2" class="tiny-color bg-gray-navigation"> bg-gray-navigation </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-gray-darker"> bg-gray-darker </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-gray-dark">bg-gray-dark</tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-gray-normal"> bg-gray-normal </tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-col :span="2" class="tiny-color bg-gray-light">bg-gray-light</tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-gray-lighter"> bg-gray-lighter </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-gray-background"> bg-gray-background </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-light">bg-light</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Col as TinyCol, Row as TinyRow, Layout as TinyLayout } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tiny-color {
|
||||
height: 80px;
|
||||
margin: 10px;
|
||||
line-height: 80px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
min-width: 175px;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tiny-color.bg-gray-navigation {
|
||||
background-color: #2e3243;
|
||||
}
|
||||
|
||||
.tiny-color.bg-gray-darker {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.tiny-color.bg-gray-dark {
|
||||
background-color: #666666;
|
||||
}
|
||||
|
||||
.tiny-color.bg-gray-normal {
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
.tiny-color.bg-gray-light {
|
||||
background-color: #bfbfbf;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tiny-color.bg-gray-lighter {
|
||||
background-color: #d9d9d9;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tiny-color.bg-gray-background {
|
||||
background-color: #f1f1f1;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tiny-color.bg-light {
|
||||
background-color: #ffffff;
|
||||
color: #333;
|
||||
border: solid 1px #ccc;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('中性色', async ({ page }) => {
|
||||
await page.goto('color#neutral-color')
|
||||
await expect(page.getByText('bg-gray-navigation')).toHaveClass(/bg-gray-navigation/)
|
||||
await expect(page.getByText('bg-gray-darker')).toHaveClass(/bg-gray-darker/)
|
||||
await expect(page.getByText('bg-gray-dark').nth(1)).toHaveClass(/bg-gray-dark/)
|
||||
await expect(page.getByText('bg-gray-normal')).toHaveClass(/bg-gray-normal/)
|
||||
})
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="2" class="tiny-color bg-gray-navigation"> bg-gray-navigation </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-gray-darker"> bg-gray-darker </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-gray-dark">bg-gray-dark</tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-gray-normal"> bg-gray-normal </tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-col :span="2" class="tiny-color bg-gray-light">bg-gray-light</tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-gray-lighter"> bg-gray-lighter </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-gray-background"> bg-gray-background </tiny-col>
|
||||
<tiny-col :span="2" class="tiny-color bg-light">bg-light</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Col, Row, Layout } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCol: Col,
|
||||
TinyRow: Row,
|
||||
TinyLayout: Layout
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tiny-color {
|
||||
height: 80px;
|
||||
margin: 10px;
|
||||
line-height: 80px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
min-width: 175px;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tiny-color.bg-gray-navigation {
|
||||
background-color: #2e3243;
|
||||
}
|
||||
|
||||
.tiny-color.bg-gray-darker {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.tiny-color.bg-gray-dark {
|
||||
background-color: #666666;
|
||||
}
|
||||
|
||||
.tiny-color.bg-gray-normal {
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
.tiny-color.bg-gray-light {
|
||||
background-color: #bfbfbf;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tiny-color.bg-gray-lighter {
|
||||
background-color: #d9d9d9;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tiny-color.bg-gray-background {
|
||||
background-color: #f1f1f1;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tiny-color.bg-light {
|
||||
background-color: #ffffff;
|
||||
color: #333;
|
||||
border: solid 1px #ccc;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
title: Color 色彩
|
||||
---
|
||||
|
||||
# Color 色彩
|
||||
|
||||
<div>Color 色彩</div>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
title: Color
|
||||
---
|
||||
|
||||
# Color
|
||||
|
||||
<div>Color</div>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'main-color',
|
||||
name: {
|
||||
'zh-CN': '主色彩',
|
||||
'en-US': 'Main Color'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '详细用法参考如下示例',
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
codeFiles: ['main-color.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'auxiliary-color',
|
||||
name: {
|
||||
'zh-CN': '辅助色',
|
||||
'en-US': 'Auxiliary Color'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '详细用法参考如下示例',
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
codeFiles: ['auxiliary-color.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'neutral-color',
|
||||
name: {
|
||||
'zh-CN': '中性色',
|
||||
'en-US': 'Neutral Color'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '详细用法参考如下示例',
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
codeFiles: ['neutral-color.vue']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout class="tiny-font">
|
||||
<tiny-row class="row-font-css font-38-css">
|
||||
<tiny-col :span="2">Regular</tiny-col>
|
||||
<tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="row-font-css font-30-css">
|
||||
<tiny-col :span="2">Regular</tiny-col>
|
||||
<tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="row-font-css font-24-css">
|
||||
<tiny-col :span="2">Regular</tiny-col>
|
||||
<tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="row-font-css font-20-css">
|
||||
<tiny-col :span="2">Regular</tiny-col>
|
||||
<tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="row-font-css font-16-css">
|
||||
<tiny-col :span="2">Regular</tiny-col>
|
||||
<tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="row-font-css font-14-css">
|
||||
<tiny-col :span="2">Regular</tiny-col>
|
||||
<tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="row-font-css font-12-css">
|
||||
<tiny-col :span="2">Regular</tiny-col>
|
||||
<tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Col as TinyCol, Row as TinyRow, Layout as TinyLayout } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.row-font-css {
|
||||
margin: 16px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.font-38-css {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
.font-30-css {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.font-24-css {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.font-20-css {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.font-16-css {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.font-14-css {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.font-12-css {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout class="tiny-font">
|
||||
<tiny-row class="row-font-css font-38-css">
|
||||
<tiny-col :span="2">Regular</tiny-col>
|
||||
<tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="row-font-css font-30-css">
|
||||
<tiny-col :span="2">Regular</tiny-col>
|
||||
<tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="row-font-css font-24-css">
|
||||
<tiny-col :span="2">Regular</tiny-col>
|
||||
<tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="row-font-css font-20-css">
|
||||
<tiny-col :span="2">Regular</tiny-col>
|
||||
<tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="row-font-css font-16-css">
|
||||
<tiny-col :span="2">Regular</tiny-col>
|
||||
<tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="row-font-css font-14-css">
|
||||
<tiny-col :span="2">Regular</tiny-col>
|
||||
<tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="row-font-css font-12-css">
|
||||
<tiny-col :span="2">Regular</tiny-col>
|
||||
<tiny-col :span="10">我是字体ABCDEFGH123456789</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Col, Row, Layout } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCol: Col,
|
||||
TinyRow: Row,
|
||||
TinyLayout: Layout
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.row-font-css {
|
||||
margin: 16px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.font-38-css {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
.font-30-css {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.font-24-css {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.font-20-css {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.font-16-css {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.font-14-css {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.font-12-css {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout class="tiny-font">
|
||||
<span>用户体验</span>
|
||||
<p>微软雅黑</p>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Layout as TinyLayout } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-font span {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.tiny-font p {
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout class="tiny-font">
|
||||
<span>用户体验</span>
|
||||
<p>微软雅黑</p>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Layout } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-font span {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.tiny-font p {
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout class="tiny-font">
|
||||
<span>User Experience Design</span>
|
||||
<p>Helvetica</p>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Layout as TinyLayout } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-font span {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.tiny-font p {
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout class="tiny-font">
|
||||
<span>User Experience Design</span>
|
||||
<p>Helvetica</p>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Layout } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-font span {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.tiny-font p {
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
title: Font 字体
|
||||
---
|
||||
|
||||
# Font 字体
|
||||
|
||||
<div>Font 字体</div>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
title: Font
|
||||
---
|
||||
|
||||
# Font
|
||||
|
||||
<div>Font</div>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
export default {
|
||||
column: '1',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'chinese-font-set',
|
||||
name: {
|
||||
'zh-CN': '中文字体集',
|
||||
'en-US': 'Chinese font set'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '详细用法参考如下示例',
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
codeFiles: ['chinese-font-set.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'english-fonts',
|
||||
name: {
|
||||
'zh-CN': '英文字体',
|
||||
'en-US': 'English font'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '详细用法参考如下示例',
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
codeFiles: ['english-fonts.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'Font-usage-specifications',
|
||||
name: {
|
||||
'zh-CN': '字体使用规范',
|
||||
'en-US': 'Font Usage Specifications'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '详细用法参考如下示例',
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
codeFiles: ['Font-usage-specifications.vue']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -80,9 +80,7 @@ export const cmpMenus = [
|
|||
'children': [
|
||||
{ 'nameCn': '按钮', 'name': 'Button', 'key': 'button' },
|
||||
{ 'nameCn': '按钮组', 'name': 'ButtonGroup', 'key': 'button-group' },
|
||||
{ 'nameCn': '色彩', 'name': 'Color', 'key': 'color' },
|
||||
{ 'nameCn': '容器布局', 'name': 'Container', 'key': 'container' },
|
||||
{ 'nameCn': '字体', 'name': 'Font', 'key': 'font' },
|
||||
{ 'nameCn': '图标', 'name': 'Icon', 'key': 'icon' },
|
||||
{ 'nameCn': '栅格布局', 'name': 'Layout', 'key': 'layout' },
|
||||
{ 'nameCn': '链接', 'name': 'Link', 'key': 'link' },
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import { watch, computed } from 'vue'
|
||||
import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
|
||||
import { tinyAuroraTheme, tinySmbTheme, tinyInfinityTheme } from '@opentiny/vue-theme/theme'
|
||||
import { hooks } from '@opentiny/vue-common'
|
||||
import designSmbConfig from '@opentiny/vue-design-smb'
|
||||
import designAuroraConfig from '@opentiny/vue-design-aurora'
|
||||
import designSaasConfig from '@opentiny/vue-design-saas'
|
||||
import { router } from '@/router'
|
||||
import { appData } from './appData'
|
||||
|
|
@ -30,9 +28,9 @@ import starrySkyIcon from '@/assets/images/starry-sky-icon.png'
|
|||
|
||||
const themeMap = {
|
||||
[DEFAULT_THEME]: null,
|
||||
[AURORA_THEME]: tinyAuroraTheme,
|
||||
[SMB_THEME]: tinySmbTheme,
|
||||
[INFINITY_THEME]: tinyInfinityTheme
|
||||
[AURORA_THEME]: null,
|
||||
[SMB_THEME]: null,
|
||||
[INFINITY_THEME]: null
|
||||
}
|
||||
|
||||
const isEn = appData.lang === 'enUS'
|
||||
|
|
@ -69,9 +67,9 @@ const themeData = [
|
|||
]
|
||||
|
||||
const designConfigMap = {
|
||||
[DEFAULT_THEME]: {},
|
||||
[INFINITY_THEME]: {},
|
||||
[AURORA_THEME]: designAuroraConfig,
|
||||
[DEFAULT_THEME]: designSmbConfig,
|
||||
[INFINITY_THEME]: designSmbConfig,
|
||||
[AURORA_THEME]: designSmbConfig,
|
||||
[SMB_THEME]: designSmbConfig
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,426 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
ref="floatSettings"
|
||||
:class="['float-settings', { 'float-settings--aside': isSettingsAside }]"
|
||||
:style="settingsStyle"
|
||||
>
|
||||
<!-- 切换主题样式 -->
|
||||
<tiny-popover
|
||||
width="404"
|
||||
placement="left-end"
|
||||
trigger="click"
|
||||
:visible-arrow="false"
|
||||
popper-class="theme-settings-popover"
|
||||
>
|
||||
<div class="theme-settings-menu">
|
||||
<div class="theme-settings-title">{{ i18nByKey('changeTheme') }}</div>
|
||||
<div
|
||||
v-for="(item, index) in themeData"
|
||||
:key="item.text + index"
|
||||
:class="['theme-option-list', { 'is-active-popover': item.value === currentThemeKey }]"
|
||||
:style="{ backgroundImage: 'url(' + item.bgImage + ')' }"
|
||||
@click="themeItemClick(item)"
|
||||
>
|
||||
<div class="theme-option-list-icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
|
||||
<div>
|
||||
<div class="theme-option-list-text">
|
||||
{{ item.text }}
|
||||
</div>
|
||||
<div class="theme-option-list-tips">
|
||||
{{ item.tips }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #reference>
|
||||
<div class="settings-btn theme-change-button">
|
||||
<theme-settings-icon class="settings-icon theme-settings-icon"></theme-settings-icon>
|
||||
</div>
|
||||
</template>
|
||||
</tiny-popover>
|
||||
|
||||
<!-- demo风格设置 -->
|
||||
<tiny-popover
|
||||
v-if="!templateModeState.isSaas"
|
||||
width="180"
|
||||
placement="left-end"
|
||||
trigger="manual"
|
||||
:visible-arrow="false"
|
||||
v-model="demoStyleVisible"
|
||||
popper-class="opt-menu style-settings-menu theme-settings-popover"
|
||||
>
|
||||
<div v-for="(item, index) in styleSettings" :key="index" class="style-settings-item">
|
||||
<p class="style-settings-title">{{ item.title }}</p>
|
||||
<tiny-radio-group
|
||||
v-model="apiModeState[item.name]"
|
||||
class="style-settings-options-group"
|
||||
@change="onSettingsChange(item.name)"
|
||||
>
|
||||
<tiny-radio v-for="option in item.options" :key="option" :label="option.value">{{ option.text }}</tiny-radio>
|
||||
</tiny-radio-group>
|
||||
</div>
|
||||
<template #reference>
|
||||
<div
|
||||
class="settings-btn style-settings-btn"
|
||||
@click="demoStyleVisible = !demoStyleVisible"
|
||||
@blur="demoStyleVisible = false"
|
||||
>
|
||||
<style-settings-icon class="settings-icon style-settings-icon"></style-settings-icon>
|
||||
</div>
|
||||
</template>
|
||||
</tiny-popover>
|
||||
|
||||
<!-- 返回顶部 -->
|
||||
<div v-show="showBackTop" @click="onBackTop">
|
||||
<tiny-tooltip
|
||||
:content="i18nByKey('backTop')"
|
||||
:placement="isSettingsAside ? 'left' : 'right'"
|
||||
popper-class="docs-tooltip"
|
||||
effect="light"
|
||||
>
|
||||
<div class="settings-btn back-top-btn">
|
||||
<icon-up-ward class="settings-icon"></icon-up-ward>
|
||||
</div>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, reactive, toRefs, onMounted, onUnmounted, watch, nextTick, ref } from 'vue'
|
||||
import { Tooltip, Radio, RadioGroup, Popover, Notify } from '@opentiny/vue'
|
||||
import { iconUpWard } from '@opentiny/vue-icon'
|
||||
import debounce from '@opentiny/vue-renderless/common/deps/debounce'
|
||||
import { i18nByKey, useApiMode, useTemplateMode } from '@/tools'
|
||||
import useTheme from '@/tools/useTheme'
|
||||
import { router } from '@/router'
|
||||
import useStyleSettings from '@/tools/useStyleSettings'
|
||||
import ThemeSettingsIcon from '@/assets/images/theme-settings.svg'
|
||||
import StyleSettingsIcon from '@/assets/images/style-settings.svg'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FloatSettings',
|
||||
components: {
|
||||
TinyTooltip: Tooltip,
|
||||
TinyRadio: Radio,
|
||||
TinyRadioGroup: RadioGroup,
|
||||
IconUpWard: iconUpWard(),
|
||||
TinyPopover: Popover,
|
||||
ThemeSettingsIcon,
|
||||
StyleSettingsIcon
|
||||
},
|
||||
setup() {
|
||||
const DEFAULT_BOTTOM_VAL = '10vh'
|
||||
const { getThemeData, changeTheme, currentThemeKey } = useTheme()
|
||||
const { apiModeState, apiModeFn } = useApiMode()
|
||||
const { getStyleSettings } = useStyleSettings()
|
||||
const { templateModeState } = useTemplateMode()
|
||||
const floatSettings = ref(null)
|
||||
const isPlus = import.meta.env.VITE_APP_MODE === 'plus'
|
||||
|
||||
const state = reactive({
|
||||
demoStyleVisible: false,
|
||||
themeData: [],
|
||||
styleSettings: getStyleSettings(i18nByKey),
|
||||
settingsStyle: {
|
||||
bottom: DEFAULT_BOTTOM_VAL
|
||||
},
|
||||
showBackTop: false, // 是否显示返回顶部按钮
|
||||
initBottomVal: null, // 初始底部偏移
|
||||
isSettingsAside: false // 是否贴边
|
||||
})
|
||||
let isShowTip = false
|
||||
const showTip = () => {
|
||||
Notify({
|
||||
type: 'info',
|
||||
title: '请注意',
|
||||
message: '主题切换成功，如有部分主题样式不生效，请尝试手动刷新页面即可',
|
||||
position: 'bottom-right',
|
||||
duration: 3000
|
||||
})
|
||||
isShowTip = true
|
||||
}
|
||||
|
||||
if (isPlus) {
|
||||
state.styleSettings = state.styleSettings.filter((item) => item.name !== 'apiMode')
|
||||
apiModeState.apiMode = 'Options'
|
||||
}
|
||||
|
||||
const funcs = {
|
||||
onBackTop() {
|
||||
document.getElementById('doc-layout').scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
},
|
||||
onSettingsChange(modeType) {
|
||||
switch (modeType) {
|
||||
case 'localeMode': {
|
||||
apiModeFn.changeLocaleMode(apiModeState[modeType])
|
||||
break
|
||||
}
|
||||
case 'apiMode': {
|
||||
apiModeFn.changeApiMode(apiModeState[modeType])
|
||||
break
|
||||
}
|
||||
case 'demoMode': {
|
||||
apiModeFn.changeDemoMode(apiModeState[modeType])
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 主题切换功能
|
||||
themeItemClick(node) {
|
||||
const val = node?.value || 'tiny-smb-theme'
|
||||
changeTheme(val)
|
||||
|
||||
if (!isShowTip) {
|
||||
showTip()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getThemeOptions = () => {
|
||||
const themeData = getThemeData().map((item) => ({
|
||||
value: item.value[0],
|
||||
text: item.label,
|
||||
tips: item.tips,
|
||||
icon: item.icon,
|
||||
bgImage: item.bgImage
|
||||
}))
|
||||
state.themeData = themeData
|
||||
}
|
||||
|
||||
const setScrollListener = () => {
|
||||
nextTick(() => {
|
||||
const docLayout = document.getElementById('doc-layout')
|
||||
const nav = document.querySelector('.nav')
|
||||
if (docLayout) {
|
||||
docLayout.onscroll = debounce(100, false, () => {
|
||||
const {
|
||||
scrollTop: layoutScrollTop,
|
||||
scrollHeight: layoutScrollHeight,
|
||||
clientHeight: layoutHeight
|
||||
} = docLayout
|
||||
const headerHeight = docLayout.querySelector('header')?.clientHeight || 0
|
||||
const footerHeight = docLayout.querySelector('#footer')?.clientHeight || 0
|
||||
const footerTop = footer.getBoundingClientRect().top
|
||||
const navHeight = nav?.clientHeight || 0
|
||||
const currSettingsBottom = parseInt(window.getComputedStyle(floatSettings.value).getPropertyValue('bottom'))
|
||||
const footerVisibleHeight = footerHeight - (layoutScrollHeight - layoutScrollTop - layoutHeight)
|
||||
|
||||
state.showBackTop = layoutScrollTop > 500
|
||||
state.showSettings = footerTop - navHeight - headerHeight > 220
|
||||
|
||||
if (!state.initBottomVal) {
|
||||
state.initBottomVal = currSettingsBottom
|
||||
}
|
||||
if (footerVisibleHeight > state.initBottomVal - 40) {
|
||||
state.settingsStyle.bottom = `${footerVisibleHeight + 20}px`
|
||||
} else {
|
||||
state.settingsStyle.bottom = DEFAULT_BOTTOM_VAL
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const removeScrollListener = () => {
|
||||
const docLayout = document.getElementById('doc-layout') || {}
|
||||
docLayout.onscroll = null
|
||||
}
|
||||
|
||||
watch(
|
||||
() => router.currentRoute.value,
|
||||
(newVal) => {
|
||||
const { path } = newVal || {}
|
||||
state.isSettingsAside = ['overview', 'docs'].find((i) => path.includes(i))
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
getThemeOptions()
|
||||
setScrollListener()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
removeScrollListener()
|
||||
})
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
...funcs,
|
||||
templateModeState,
|
||||
i18nByKey,
|
||||
apiModeState,
|
||||
currentThemeKey,
|
||||
floatSettings
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.float-settings {
|
||||
position: fixed;
|
||||
right: 200px;
|
||||
height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
column-gap: 12px;
|
||||
z-index: var(--docs-float-settings-zindex);
|
||||
transition: all 0.3s linear;
|
||||
|
||||
&.float-settings--aside {
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
.tiny-dropdown__trigger .tiny-dropdown__title {
|
||||
line-height: 1;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.settings-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.settings-icon {
|
||||
color: #191919;
|
||||
fill: #191919;
|
||||
}
|
||||
}
|
||||
|
||||
&.style-settings-btn {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
&.back-top-btn {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.settings-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #595959;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opt-menu {
|
||||
width: 154px;
|
||||
padding: 12px 0;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
|
||||
|
||||
&.style-settings-menu {
|
||||
padding: 14px;
|
||||
|
||||
.style-settings-item {
|
||||
padding-left: 12px;
|
||||
|
||||
.style-settings-title {
|
||||
margin-bottom: 2px;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.style-settings-options-group {
|
||||
padding-left: 4px;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.tiny-radio .tiny-radio__label {
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tiny-popover.tiny-popper.theme-settings-popover {
|
||||
border-radius: 12px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.theme-settings-menu {
|
||||
width: 404px;
|
||||
display: flex;
|
||||
padding: 15px 32px;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
.theme-settings-title {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
color: #000000;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.theme-option-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
background-color: aliceblue;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
width: 308px;
|
||||
height: 64px;
|
||||
border: 1px solid #ffffff;
|
||||
border-radius: 8px;
|
||||
background-repeat: no-repeat;
|
||||
.theme-option-list-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 16px 24px;
|
||||
}
|
||||
.theme-option-list-text {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
color: #202e54;
|
||||
font-weight: 700;
|
||||
}
|
||||
.theme-option-list-tips {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
color: #808080;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.theme-option-list:hover {
|
||||
border-color: rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.is-active-popover {
|
||||
border-color: #1476ff;
|
||||
}
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.float-settings {
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"name": "vue3-example",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"version": "0.1.6-mf.0",
|
||||
"private": true,
|
||||
"files": [
|
||||
"*"
|
||||
],
|
||||
|
|
@ -21,26 +21,33 @@
|
|||
"@opentiny-internal/unplugin-virtual-template": "workspace:*",
|
||||
"@opentiny/vue": "workspace:~",
|
||||
"@opentiny/vue-common": "workspace:~",
|
||||
"@opentiny/vue-design-aurora": "workspace:~",
|
||||
"@opentiny/vue-design-smb": "workspace:~",
|
||||
"@opentiny/vue-icon": "workspace:~",
|
||||
"@opentiny/vue-locale": "workspace:~",
|
||||
"@opentiny/vue-renderless": "workspace:~",
|
||||
"@opentiny/vue-theme": "workspace:~",
|
||||
"@opentiny/vue-theme-saas": "workspace:~",
|
||||
"@opentiny/vue-theme-mobile": "workspace:~",
|
||||
"@opentiny/vue-theme-saas": "workspace:~",
|
||||
"@opentiny/vue-vite-import": "workspace:~",
|
||||
"@opentiny/vue-design-smb": "workspace:~",
|
||||
"@opentiny/vue-design-aurora": "workspace:~",
|
||||
"@playwright/test": "~1.42.0",
|
||||
"@tiptap/vue-3": "^2.1.0",
|
||||
"@unocss/core": "^0.48.0",
|
||||
"@unocss/preset-icons": "^0.61.9",
|
||||
"@unocss/transformer-directives": "^0.48.0",
|
||||
"@vitejs/plugin-vue": "4.1.0",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
||||
"@vitest/ui": "^0.31.0",
|
||||
"@vue/runtime-core": "3.2.31",
|
||||
"@vue/test-utils": "^2.2.7",
|
||||
"js-sha256": "^0.9.0",
|
||||
"jsdom": "^21.0.0",
|
||||
"onigasm": "^2.2.5",
|
||||
"postcss": "^8.4.16",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"tailwindcss-vite-plugin": "^0.0.3",
|
||||
"typescript": "^5.0.0",
|
||||
"unocss": "^0.61.9",
|
||||
"vite": "^4.3.8",
|
||||
"vite-plugin-checker": "^0.5.2",
|
||||
"vite-plugin-dynamic-import": "^1.2.4",
|
||||
|
|
@ -50,13 +57,6 @@
|
|||
"vite-svg-loader": "^3.6.0",
|
||||
"vitest": "^0.31.0",
|
||||
"vue": "^3.3.9",
|
||||
"@tiptap/vue-3": "^2.1.0",
|
||||
"vue-i18n": "^9.1.7",
|
||||
"js-sha256": "^0.9.0",
|
||||
"onigasm": "^2.2.5",
|
||||
"unocss": "^0.61.9",
|
||||
"@unocss/core": "^0.48.0",
|
||||
"@unocss/preset-icons": "^0.61.9",
|
||||
"@unocss/transformer-directives": "^0.48.0"
|
||||
"vue-i18n": "^9.1.7"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue