forked from opentiny/tiny-vue
feat(react): merge react-dev to dev (#531)
* 组件库 react 版本的 button 组件实现，0 - 1 实现 react 复用 vue 逻辑 (#341) * refactor: A constructor name should not start with a lowercase letter but a uppercase. * feat: 查看样式 less 问题 * feat: react版本 button api 功能实现，移除 lock 文件 * feat: react版本 button api 功能实现，修复 pr 问题 * feat: react版本 button api 功能实现，lock 文件更改 * feat: react版本 button api 功能实现，lock 文件更改 * feat: react版本 button api 功能实现，多余注释删除 --------- Co-authored-by: guoxudong06 <guoxudong06@meituan.com> * feat: tiny-react event module, imitate vue event system (#405) * feat: tiny-react props resolver，to get events & attrs from props (#408) * feat: utils of packages/react-common (#409) * feat: replacing some rendering logic in jsx with virtual components (#412) * feat: tiny-react svg render function (#406) * feat: data responsive core, registering responsive objects through us… (#416) * feat: data responsive core, registering responsive objects through useReactive * feat: Modify the passing values of path attributes in the code * Add a virtual machine like proxy for fiber component nodes (#442) * feat(react): Add related operations to the fiber tree (#431) * Add related operations to the fiber tree * Make some optimizations for fiber operations * feat: simulate Vue Composite API (#445) * feat: 添加 tiny-react 的 alert 组件 (#477) * feat(react): Packaging and building React series components (#493) * feat: 打包构建 react 系组件 * feat: 打包构建 react 系组件 * feat(react): Fix the React dev development link (#510) * feat: 修复开发链路 * feat: 修复开发链路 * fix: 修改 scope * fix: 修复导入后缀 * fix: 修复导入后缀 * fix: tsx 运行报错，改回 jsx * fix: 打包 react 组件排出 react 运行依赖 * fix: 修复打包无法通过命令参数自定义 npmscope 和版本问题 * feat(react): 在 packages/react 下添加 readme 文件 --------- Co-authored-by: Mr.栋子 <guoxiaodong@MrdongzideMacBook-Pro.local> * fix(react): Development and debugging environment adjustment (#527) * fix: 开发链路调整 * fix: react dev 开发命令入口修复 --------- Co-authored-by: Mr.栋子 <guoxiaodong@MrdongzideMacBook-Pro.local> * feat(react): 添加 react-site api 文档项目 (#528) Co-authored-by: Mr.栋子 <guoxiaodong@MrdongzideMacBook-Pro.local> * fix: 打包代码 scope 为 @opentiny 会无限循环替换修复 (#529) Co-authored-by: Mr.栋子 <guoxiaodong@MrdongzideMacBook-Pro.local> --------- Co-authored-by: guoxudong06 <guoxudong06@meituan.com> Co-authored-by: Mr.栋子 <guoxiaodong@MrdongzideMacBook-Pro.local>
This commit is contained in:
Mr.栋
GitHub
parent
f2b3991582
commit
b9aefb73f1
|
|
@ -4,6 +4,7 @@ dist/
|
|||
dist2/
|
||||
dist2.7/
|
||||
dist3/
|
||||
dist-react/
|
||||
allDist/
|
||||
packages/**/runtime
|
||||
coverage/
|
||||
|
|
@ -14,6 +15,11 @@ coverage/
|
|||
/packages/vue/mobile-first.ts
|
||||
/packages/vue/app.ts
|
||||
|
||||
/packages/react/index.ts
|
||||
/packages/react/pc.ts
|
||||
/packages/react/mobile.ts
|
||||
/packages/react/app.ts
|
||||
|
||||
/examples/**/playwright-report
|
||||
vite.config.ts.timestamp*
|
||||
vitest.config.ts.timestamp*
|
||||
|
|
@ -47,5 +53,3 @@ packages/theme/scripts/theme-result.txt
|
|||
packages/theme/scripts/themeExcel.xlsx
|
||||
|
||||
packages/theme/src/theme/*-theme/component.js
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
import * as monaco from 'monaco-editor'
|
||||
import { hooks } from '@opentiny/vue-common'
|
||||
// monaco ESM模块集成说明 ： https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite
|
||||
// https://github.com/vitejs/vite/discussions/1791#discussioncomment-321046
|
||||
import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
|
||||
self.MonacoEnvironment = {
|
||||
getWorker: () => new HtmlWorker()
|
||||
}
|
||||
|
||||
export function useMonaco(selector) {
|
||||
const state = {
|
||||
editor: null,
|
||||
getCode: () => state.editor && state.editor.getValue(),
|
||||
setCode: (code) => state.editor && state.editor.setValue(code),
|
||||
hotKey: (key, fn) => state.editor && state.editor.addCommand(key, fn),
|
||||
format: () => state.editor && state.editor.trigger('anyString', 'editor.action.formatDocument'),
|
||||
scrollTop: () => state.editor && state.editor.setScrollTop(0)
|
||||
}
|
||||
|
||||
hooks.onMounted(() => {
|
||||
state.editor = monaco.editor.create(document.querySelector(selector), {
|
||||
value: '',
|
||||
language: 'html',
|
||||
theme: 'vs-dark',
|
||||
tabSize: 2,
|
||||
automaticLayout: true
|
||||
})
|
||||
})
|
||||
hooks.onUnmounted(() => (state.editor = null))
|
||||
return state
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Opentiny React 组件调试</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"name": "@opentiny/react-docs",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@opentiny/react": "workspace:~",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.14",
|
||||
"@types/react-dom": "^18.2.6",
|
||||
"@typescript-eslint/eslint-plugin": "^5.61.0",
|
||||
"@typescript-eslint/parser": "^5.61.0",
|
||||
"@vitejs/plugin-react": "^4.0.1",
|
||||
"autoprefixer": "^10.4.12",
|
||||
"eslint": "^8.44.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"postcss": "^8.4.16",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.4.0",
|
||||
"vite-plugin-react": "^4.0.1",
|
||||
"vite-plugin-svgr": "^3.2.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
import { Alert } from '@opentiny/react'
|
||||
|
||||
// 在这里导入组件，进行 api 调试
|
||||
function App() {
|
||||
return (
|
||||
<div
|
||||
className='app'
|
||||
>
|
||||
<Alert
|
||||
description='吃饭了吗'
|
||||
></Alert>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.app {
|
||||
margin: 10px;
|
||||
width: 500px;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import './main.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<App />
|
||||
)
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
'../../packages/react/src/**/*.{css,less,vue,js,jsx,ts,tsx}',
|
||||
'!../../packages/react/src/**/node_modules',
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import svgr from "vite-plugin-svgr";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }), svgr()
|
||||
],
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
module.exports = {
|
||||
printWidth: 160, // 一行120字符数，如果超过会进行换行
|
||||
tabWidth: 2, // tab等2个空格
|
||||
useTabs: false, // 用空格缩进行
|
||||
semi: true, // 行尾使用分号
|
||||
singleQuote: true, // 字符串使用单引号
|
||||
quoteProps: 'as-needed', // 仅在需要时在对象属性添加引号
|
||||
jsxSingleQuote: false, // 在JSX中使用双引号
|
||||
trailingComma: 'es5', // 使用尾逗号(对象、数组等)
|
||||
bracketSpacing: true, // 对象的括号间增加空格
|
||||
jsxBracketSameLine: false, // 将多行JSX元素的>放在最后一行的末尾
|
||||
arrowParens: 'avoid', // 在唯一的arrow函数参数周围省略括号
|
||||
vueIndentScriptAndStyle: false, // 不缩进Vue文件中的<script>和<style>标记内的代码
|
||||
endOfLine: 'lf', // 仅限换行（\n）
|
||||
};
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
*.js
|
||||
*.ts
|
||||
*.png
|
||||
*.eot
|
||||
*.ttf
|
||||
*.woff
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
module.exports = {
|
||||
extends: "stylelint-config-standard",//stylelint-config-airbnb
|
||||
rules: {
|
||||
"string-quotes": "single",
|
||||
"property-no-unknown": true,
|
||||
"selector-pseudo-class-no-unknown": true,
|
||||
"at-rule-empty-line-before": "always",
|
||||
"block-no-empty": true,
|
||||
"indentation": 4 // http://cui.ulanqab.huawei.com/#/articalDetail?id=b76da810d8ed8
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
# react 组件文档开发说明
|
||||
|
||||
## 命令
|
||||
|
||||
### 启动
|
||||
|
||||
```bash
|
||||
pnpm start
|
||||
```
|
||||
|
||||
### 打包
|
||||
|
||||
```bash
|
||||
pnpm build
|
||||
```
|
||||
|
||||
### 编译 react.jsx 为 react.js
|
||||
|
||||
```bash
|
||||
pnpm build:react2
|
||||
```
|
||||
|
||||
此 vue 项目，vue自身需要 jsx，所以使用 react 的 jsx，只能将其编译为 .js 才能使用
|
||||
|
||||
## 开发说明
|
||||
|
||||
### 目录说明
|
||||
|
||||
主要是 demos 底下的文件是用来配置文档展示那些组件，以及写组件示例的
|
||||
|
||||
```b
|
||||
demos
|
||||
/app
|
||||
/alert
|
||||
/webdoc
|
||||
/alert.json 配置 alert 组件的文档展示
|
||||
/base.vue base 示例文件，导入 base.jsx，注册 web comp
|
||||
/base.jsx base 写 react 示例
|
||||
/webdoc
|
||||
/introduce.md 组件库的介绍文档
|
||||
/menu.js 组件库的左侧菜单配置
|
||||
/config.js demo 配置
|
||||
/overviewimage 组件总览的图标，在这里添加图标
|
||||
```
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
// generated by unplugin-vue-components
|
||||
// We suggest you to commit this file into source control
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
import '@vue/runtime-core'
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
NAnchor: typeof import('naive-ui')['NAnchor']
|
||||
NAnchorLink: typeof import('naive-ui')['NAnchorLink']
|
||||
NCard: typeof import('naive-ui')['NCard']
|
||||
NCode: typeof import('naive-ui')['NCode']
|
||||
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
|
||||
NDataTable: typeof import('naive-ui')['NDataTable']
|
||||
NInput: typeof import('naive-ui')['NInput']
|
||||
NLayout: typeof import('naive-ui')['NLayout']
|
||||
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
|
||||
NMenu: typeof import('naive-ui')['NMenu']
|
||||
NSpace: typeof import('naive-ui')['NSpace']
|
||||
NSpin: typeof import('naive-ui')['NSpin']
|
||||
NTabPane: typeof import('naive-ui')['NTabPane']
|
||||
NTabs: typeof import('naive-ui')['NTabs']
|
||||
NTooltip: typeof import('naive-ui')['NTooltip']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
}
|
||||
|
||||
export {}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { Alert as TinyAlert } from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyAlert description="type 为默认值 success"></TinyAlert>
|
||||
<TinyAlert type="error" description="type 为 error"></TinyAlert>
|
||||
<TinyAlert type="info" description="type 为 info"></TinyAlert>
|
||||
<TinyAlert type="warning" description="type 为 warning"></TinyAlert>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<div>
|
||||
<alert-base-demo></alert-base-demo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AlertBase from '@/webcomps/alert/base.js'
|
||||
customElements.define(
|
||||
'alert-base-demo',
|
||||
AlertBase
|
||||
)
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { Alert as TinyAlert } from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyAlert center description="文字居中"></TinyAlert>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<alert-center-demo></alert-center-demo>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import AlertCenter from "@/webcomps/alert/center.js";
|
||||
customElements.define("alert-center-demo", AlertCenter);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { Alert as TinyAlert } from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyAlert size="normal" description="size 为 normal"></TinyAlert>
|
||||
<TinyAlert size="large" title="size 为 large"></TinyAlert>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<alert-size-demo></alert-size-demo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AlertSize from "@/webcomps/alert/size.js";
|
||||
customElements.define("alert-size-demo", AlertSize);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { Alert as TinyAlert } from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyAlert size="large" title="通过属性设置自定义 title"></TinyAlert>
|
||||
<br/>
|
||||
<TinyAlert
|
||||
size="large"
|
||||
slots={{
|
||||
title: () => '通过 slot 设置自定义 title'
|
||||
}}
|
||||
>
|
||||
</TinyAlert>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<alert-title-demo></alert-title-demo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import AlertTitle from "@/webcomps/alert/title.js";
|
||||
customElements.define("alert-title-demo", AlertTitle);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { Alert as TinyAlert } from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyAlert description="type 为默认值 success"></TinyAlert>
|
||||
<TinyAlert type="info" description="type 为 info"></TinyAlert>
|
||||
<TinyAlert type="error" description="type 为 error"></TinyAlert>
|
||||
<TinyAlert type="success" description="type 为 success"></TinyAlert>
|
||||
<TinyAlert type="warning" description="type 为 warning"></TinyAlert>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<alert-type-demo></alert-type-demo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import AlertType from "@/webcomps/alert/type.js";
|
||||
customElements.define("alert-type-demo", AlertType);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Alert 警告
|
||||
---
|
||||
|
||||
# Alert 警告
|
||||
|
||||
<div>Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Alert
|
||||
---
|
||||
|
||||
# Alert
|
||||
|
||||
<div>Alert alarms, including warning, error, info, and success.</div>
|
||||
|
|
@ -0,0 +1,228 @@
|
|||
{
|
||||
"column": "2",
|
||||
"owner": "",
|
||||
"demos": [
|
||||
{
|
||||
"demoId": "base",
|
||||
"name": {
|
||||
"zh-CN": "基本用法",
|
||||
"en-US": "Basic Usage"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "详细用法参考如下示例",
|
||||
"en-US": "For details, see the following example."
|
||||
},
|
||||
"codeFiles": [
|
||||
"base.vue"
|
||||
]
|
||||
},
|
||||
{
|
||||
"demoId": "type",
|
||||
"name": {
|
||||
"zh-CN": "类型",
|
||||
"en-US": "Type"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>通过 <code>type</code> 设置不同的类型。可选值：success、warning、info、error，默认值：success 。</p>\n",
|
||||
"en-US": "<p>Set different types through <code>type</code>. The options are success, warning, info, and error. The default value is success. </p>\n"
|
||||
},
|
||||
"codeFiles": [
|
||||
"type.vue"
|
||||
]
|
||||
},
|
||||
{
|
||||
"demoId": "size",
|
||||
"name": {
|
||||
"zh-CN": "大尺寸",
|
||||
"en-US": "Large Size"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>通过 <code>size</code> 属性设置不同的尺寸，可选值：nomal、large，默认值：nomal 。</p>\n",
|
||||
"en-US": "<p>Set different sizes through the <code>size</code> attribute. The options are nomal and large. The default value is nomal. </p>\n"
|
||||
},
|
||||
"codeFiles": [
|
||||
"size.vue"
|
||||
]
|
||||
},
|
||||
{
|
||||
"demoId": "title",
|
||||
"name": {
|
||||
"zh-CN": "自定义标题",
|
||||
"en-US": "Custom Title"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>当 <code>size</code> 为 large 时显示标题，可设置 <code>title</code> 或 <code>slot</code> 自定义标题。默认标题根据设置的 <code>type</code> 显示。</p>\n",
|
||||
"en-US": "<p>When <code>size</code> is set to large, the title is displayed. You can set <code>title</code> or <code>slot</code> to customize the title. The default title is displayed according to the set <code>type</code>. </p>\n"
|
||||
},
|
||||
"codeFiles": [
|
||||
"title.vue"
|
||||
]
|
||||
},
|
||||
{
|
||||
"demoId": "center",
|
||||
"name": {
|
||||
"zh-CN": "文字居中",
|
||||
"en-US": "Center text"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>通过 <code>center</code> 属性可使文字显示居中。</p>\n",
|
||||
"en-US": "<p>You can use the <code>center</code> property to center the text. </p>\n"
|
||||
},
|
||||
"codeFiles": [
|
||||
"center.vue"
|
||||
]
|
||||
}
|
||||
],
|
||||
"apis": [
|
||||
{
|
||||
"name": "alert",
|
||||
"type": "component",
|
||||
"properties": [
|
||||
{
|
||||
"name": "closable",
|
||||
"type": "Boolean",
|
||||
"defaultValue": "该属性的默认值为 true",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告是否可以关闭",
|
||||
"en-US": "Set whether alarms can be disabled."
|
||||
},
|
||||
"demoId": "closable"
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"type": "String , Object",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告的图标，默认会根据 type 值自动使用对应图标",
|
||||
"en-US": "Set the alarm icon. By default, the corresponding icon is automatically used based on the value of type."
|
||||
},
|
||||
"demoId": "icon"
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"type": "String",
|
||||
"defaultValue": "该属性的默认值为 normal",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告的大小 nomal/large， 缺省为 nomal。;该属性的可选值为 nomal / large",
|
||||
"en-US": "Set the warning size to nomal or large. The default value is nomal. ;The value of this attribute can be nomal or large"
|
||||
},
|
||||
"demoId": "size"
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
"type": "String",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告的标题，在 size 为 large 时有效，默认根据 type 自动设置",
|
||||
"en-US": "Set the warning title. This parameter is valid only when size is set to large. By default, the alarm title is automatically set based on type."
|
||||
},
|
||||
"demoId": "title"
|
||||
},
|
||||
{
|
||||
"name": "type",
|
||||
"type": "String",
|
||||
"defaultValue": "该属性的默认值为 success",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告的类型;该属性的可选值为 success/warning/info/error",
|
||||
"en-US": "Set the alarm type. The value of this attribute can be success / warning / info / error"
|
||||
},
|
||||
"demoId": "type"
|
||||
},
|
||||
{
|
||||
"name": "description",
|
||||
"type": "String",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告的提示内容，默认为空;",
|
||||
"en-US": "Set the warning prompt content. The default value is null."
|
||||
},
|
||||
"demoId": "custom-description"
|
||||
},
|
||||
{
|
||||
"name": "center",
|
||||
"type": "Boolean",
|
||||
"defaultValue": "该属性的默认值为 false",
|
||||
"desc": {
|
||||
"zh-CN": "文字是否居中",
|
||||
"en-US": "Whether the text is centered"
|
||||
},
|
||||
"demoId": "center"
|
||||
},
|
||||
{
|
||||
"name": "close-text",
|
||||
"type": "String",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "关闭按钮自定义文本",
|
||||
"en-US": "Customized text of the close button"
|
||||
},
|
||||
"demoId": "close-text"
|
||||
},
|
||||
{
|
||||
"name": "show-icon",
|
||||
"type": "Boolean",
|
||||
"defaultValue": "该属性的默认值为 true",
|
||||
"desc": {
|
||||
"zh-CN": "是否显示图标",
|
||||
"en-US": "Display icon"
|
||||
},
|
||||
"demoId": "show-icon"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"name": "close",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "关闭 alert 时触发的事件",
|
||||
"en-US": "Event triggered when the alert function is disabled"
|
||||
},
|
||||
"demoId": "close-events"
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
{
|
||||
"name": "default",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "组件默认插槽",
|
||||
"en-US": "Default slot of the component"
|
||||
},
|
||||
"demoId": "slot-default"
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "标题的内容",
|
||||
"en-US": "Title content"
|
||||
},
|
||||
"demoId": "title"
|
||||
},
|
||||
{
|
||||
"name": "description",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "提示内容",
|
||||
"en-US": "Prompt Content"
|
||||
},
|
||||
"demoId": "custom-description"
|
||||
},
|
||||
{
|
||||
"name": "close",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "自定义关闭按钮，当 closable 属性为 false 时有效",
|
||||
"en-US": ""
|
||||
},
|
||||
"demoId": "custom-close"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { Button as TinyButton} from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyButton>默认按钮</TinyButton>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<button-click-demo></button-click-demo>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ButtonClick from "@/webcomps/button/button-click-webcomp.js";
|
||||
customElements.define("button-click-demo", ButtonClick);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { Button as TinyButton} from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyButton round type='primary'>主要按钮</TinyButton>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<button-round-demo></button-round-demo>
|
||||
</template>
|
||||
<script>
|
||||
import ButtonRound from "@/webcomps/button/button-round-webcomp.js";
|
||||
customElements.define("button-round-demo", ButtonRound);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { Button as TinyButton} from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyButton type='success'>成功按钮</TinyButton>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<button-type-demo></button-type-demo>
|
||||
</template>
|
||||
<script>
|
||||
import ButtonType from "@/webcomps/button/button-type-webcomp.js";
|
||||
customElements.define("button-type-demo", ButtonType);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
title: Button 按钮
|
||||
---
|
||||
|
||||
# Button 按钮
|
||||
|
||||
<div>
|
||||
|
||||
按钮组件一般用于触发一些操作。
|
||||
|
||||
```typescript
|
||||
import { Button } from '@opentiny/vue';
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Button 按钮
|
||||
---
|
||||
|
||||
# Button 按钮
|
||||
|
||||
<div> 按钮组件一般用于触发一些操作。</div>
|
||||
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
{
|
||||
"column": "2",
|
||||
"demos": [
|
||||
{
|
||||
"demoId": "button-type",
|
||||
"name": {
|
||||
"zh-CN": "按钮类型",
|
||||
"en-US": "button type"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>通过属性<code>type</code>配置按钮类型，包含<code>success</code>、<code>info</code>、<code>warning</code>、<code>danger</code>四种类型。",
|
||||
"en-US": "<p>button type</p>"
|
||||
},
|
||||
"codeFiles": ["button-type.vue"]
|
||||
},
|
||||
{
|
||||
"demoId": "button-round",
|
||||
"name": {
|
||||
"zh-CN": "圆角按钮",
|
||||
"en-US": "button round"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>通过<code>round</code>属性设置按钮是否圆角",
|
||||
"en-US": "<p>button round</p>"
|
||||
},
|
||||
"codeFiles": ["button-round.vue"]
|
||||
},
|
||||
{
|
||||
"demoId": "button-click",
|
||||
"name": {
|
||||
"zh-CN": "事件",
|
||||
"en-US": "events"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>按钮点击事件。",
|
||||
"en-US": "<p>bbutton click</p>"
|
||||
},
|
||||
"codeFiles": ["button-click.vue"]
|
||||
}
|
||||
],
|
||||
"apis": [
|
||||
{
|
||||
"name": "Button",
|
||||
"type": "component",
|
||||
"properties": [
|
||||
{
|
||||
"name": "type",
|
||||
"type": "primary | success | warning",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "<p>展示按钮不同的状态</p>",
|
||||
"en-US": "display different button"
|
||||
},
|
||||
"demoId": "button-type"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"name": "click",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "<p>点击按钮时触发的回调</p>",
|
||||
"en-US": "Click"
|
||||
},
|
||||
"demoId": "button-click"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export default {
|
||||
isMobile: false,
|
||||
initApp: (app) => { }
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Button按钮</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#ECF3FB" offset="0%"></stop>
|
||||
<stop stop-color="#FFFFFF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
|
||||
<stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
|
||||
<stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
|
||||
<stop stop-color="#F0F6FE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
|
||||
<stop stop-color="#D5E6F9" offset="0%"></stop>
|
||||
<stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
|
||||
<stop stop-color="#D5E6F9" offset="0%"></stop>
|
||||
<stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
|
||||
<stop stop-color="#CEE6FE" offset="0%"></stop>
|
||||
<stop stop-color="#8AB5F2" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
|
||||
<stop stop-color="#BFD6F9" offset="0%"></stop>
|
||||
<stop stop-color="#F3F6FE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
|
||||
<stop stop-color="#CAD9F3" offset="0%"></stop>
|
||||
<stop stop-color="#D5E3F7" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
|
||||
<feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
|
||||
</filter>
|
||||
<linearGradient x1="44.0988019%" y1="53.2030982%" x2="128.792906%" y2="41.8419999%" id="linearGradient-9">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="44.0988019%" y1="54.0931841%" x2="128.792906%" y2="39.5750321%" id="linearGradient-10">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="44.0988019%" y1="54.0931841%" x2="128.792906%" y2="39.5750321%" id="linearGradient-11">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-12">
|
||||
<stop stop-color="#FFCC00" offset="0%"></stop>
|
||||
<stop stop-color="#FF9D00" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<circle id="path-13" cx="76" cy="45" r="8"></circle>
|
||||
<filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-14">
|
||||
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
|
||||
<feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
|
||||
<feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
|
||||
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.661752894 0 0 0 0 0.324547702 0 0 0 0 0.00489962574 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-15">
|
||||
<feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0.841553619 0 0 0 0 0.341832308 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
<polygon id="path-16" points="75.7129876 43.8022814 74.2754034 57.814413 78.9449685 55.9202277 81.4194729 62.8022814 83.8096817 61.7804537 81.2116343 54.9762941 85.8108161 53.4874666"></polygon>
|
||||
<filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-17">
|
||||
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-697.000000, -327.000000)">
|
||||
<g id="Button按钮" transform="translate(697.000000, 327.000000)">
|
||||
<g id="编组">
|
||||
<g transform="translate(9.000000, 1.000000)" id="多边形">
|
||||
<polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
|
||||
<polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
|
||||
<polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
|
||||
</g>
|
||||
<ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
|
||||
</g>
|
||||
<g id="编组" transform="translate(17.000000, 38.000000)">
|
||||
<rect id="矩形备份" fill="url(#linearGradient-9)" opacity="0.303770519" x="7" y="0" width="78" height="23" rx="4"></rect>
|
||||
<rect id="矩形" stroke="url(#linearGradient-11)" fill="url(#linearGradient-10)" x="0" y="16" width="90" height="30" rx="4"></rect>
|
||||
<path d="M14.784,25.576 L14.784,27.176 L18.528,27.176 L18.528,37 L20.4,37 L20.4,27.176 L24.144,27.176 L24.144,25.576 L14.784,25.576 Z M26.576,25.352 C26.224,25.352 25.936,25.464 25.696,25.688 C25.456,25.912 25.344,26.2 25.344,26.552 C25.344,26.904 25.456,27.192 25.696,27.432 C25.936,27.656 26.224,27.768 26.576,27.768 C26.928,27.768 27.216,27.656 27.456,27.432 C27.696,27.208 27.824,26.904 27.824,26.552 C27.824,26.2 27.696,25.912 27.472,25.688 C27.232,25.464 26.928,25.352 26.576,25.352 Z M25.664,28.728 L25.664,37 L27.488,37 L27.488,28.728 L25.664,28.728 Z M33.456,28.504 C32.16,28.504 31.152,28.936 30.432,29.8 C29.76,30.584 29.424,31.608 29.424,32.856 C29.424,34.136 29.76,35.176 30.448,35.976 C31.152,36.808 32.144,37.224 33.424,37.224 C34.496,37.224 35.36,36.952 36,36.424 C36.656,35.88 37.088,35.048 37.28,33.928 L35.472,33.928 C35.328,35.128 34.656,35.736 33.44,35.736 C32.736,35.736 32.208,35.48 31.856,34.984 C31.472,34.472 31.296,33.752 31.296,32.84 C31.296,31.944 31.488,31.24 31.872,30.744 C32.256,30.232 32.784,29.992 33.456,29.992 C34,29.992 34.448,30.12 34.784,30.376 C35.104,30.632 35.328,31.016 35.44,31.544 L37.248,31.544 C37.088,30.504 36.672,29.736 36.016,29.224 C35.376,28.744 34.528,28.504 33.456,28.504 Z M38.72,25.352 L38.72,37 L40.544,37 L40.544,34.104 L41.376,33.32 L44.272,37 L46.608,37 L42.624,32.152 L46.288,28.728 L43.936,28.728 L40.544,32.008 L40.544,25.352 L38.72,25.352 Z M53.056,25.576 L53.056,37 L54.928,37 L54.928,29.128 L54.992,29.128 L58.352,37 L59.968,37 L63.328,29.128 L63.392,29.128 L63.392,37 L65.264,37 L65.264,25.576 L63.072,25.576 L59.2,34.536 L59.136,34.536 L55.248,25.576 L53.056,25.576 Z M70.864,28.504 C69.632,28.504 68.656,28.92 67.952,29.768 C67.216,30.6 66.864,31.624 66.864,32.856 C66.864,34.232 67.248,35.304 68.016,36.088 C68.736,36.84 69.712,37.224 70.944,37.224 C72.048,37.224 72.96,36.904 73.696,36.28 C74.272,35.768 74.656,35.112 74.848,34.344 L73.024,34.344 C72.8,34.808 72.56,35.144 72.288,35.352 C71.936,35.608 71.488,35.736 70.928,35.736 C70.272,35.736 69.76,35.528 69.408,35.128 C69.056,34.728 68.848,34.136 68.784,33.368 L74.976,33.368 C74.976,31.88 74.64,30.712 73.984,29.88 C73.264,28.952 72.224,28.504 70.864,28.504 Z M70.912,29.992 C72.192,29.992 72.912,30.648 73.072,31.992 L68.816,31.992 C68.928,31.336 69.152,30.84 69.488,30.504 C69.84,30.152 70.304,29.992 70.912,29.992 Z" id="形状结合" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<g id="椭圆形">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-13"></use>
|
||||
<circle stroke="url(#linearGradient-12)" stroke-width="4" stroke-linejoin="square" cx="76" cy="45" r="6"></circle>
|
||||
</g>
|
||||
<g id="路径-2">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
|
||||
<use fill="#000000" fill-rule="evenodd" xlink:href="#path-16"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -0,0 +1,138 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="130px" height="125px" viewBox="0 0 130 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Buttongroup选块组</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#ECF3FB" offset="0%"></stop>
|
||||
<stop stop-color="#FFFFFF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
|
||||
<stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
|
||||
<stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
|
||||
<stop stop-color="#F0F6FE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
|
||||
<stop stop-color="#D5E6F9" offset="0%"></stop>
|
||||
<stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
|
||||
<stop stop-color="#D5E6F9" offset="0%"></stop>
|
||||
<stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
|
||||
<stop stop-color="#CEE6FE" offset="0%"></stop>
|
||||
<stop stop-color="#8AB5F2" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
|
||||
<stop stop-color="#BFD6F9" offset="0%"></stop>
|
||||
<stop stop-color="#F3F6FE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
|
||||
<stop stop-color="#CAD9F3" offset="0%"></stop>
|
||||
<stop stop-color="#D5E3F7" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
|
||||
<feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
|
||||
</filter>
|
||||
<linearGradient x1="44.0988019%" y1="63.2619166%" x2="128.792906%" y2="16.2231039%" id="linearGradient-9">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="44.0988019%" y1="63.2619166%" x2="128.792906%" y2="16.2231039%" id="linearGradient-10">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<text id="text-11" font-family="PingFangSC-Semibold, PingFang SC" font-size="16" font-weight="500" fill="#FFFFFF">
|
||||
<tspan x="16.72" y="18">1</tspan>
|
||||
</text>
|
||||
<filter x="-5.0%" y="-5.3%" width="110.0%" height="121.1%" filterUnits="objectBoundingBox" id="filter-12">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.31372549 0 0 0 0 0.450980392 0 0 0 0 0.898039216 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<text id="text-13" font-family="PingFangSC-Semibold, PingFang SC" font-size="16" font-weight="500" fill="#FFFFFF">
|
||||
<tspan x="59.2" y="18">2</tspan>
|
||||
</text>
|
||||
<filter x="-5.0%" y="-5.3%" width="110.0%" height="121.1%" filterUnits="objectBoundingBox" id="filter-14">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.31372549 0 0 0 0 0.450980392 0 0 0 0 0.898039216 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<text id="text-15" font-family="PingFangSC-Semibold, PingFang SC" font-size="16" font-weight="500" fill="#FFFFFF">
|
||||
<tspan x="103.2" y="18">3</tspan>
|
||||
</text>
|
||||
<filter x="-5.0%" y="-5.3%" width="110.0%" height="121.1%" filterUnits="objectBoundingBox" id="filter-16">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.31372549 0 0 0 0 0.450980392 0 0 0 0 0.898039216 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-17">
|
||||
<stop stop-color="#FFCC00" offset="0%"></stop>
|
||||
<stop stop-color="#FF9D00" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<circle id="path-18" cx="77" cy="74" r="8"></circle>
|
||||
<filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-19">
|
||||
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
|
||||
<feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
|
||||
<feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
|
||||
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.661752894 0 0 0 0 0.324547702 0 0 0 0 0.00489962574 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-20">
|
||||
<feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0.841553619 0 0 0 0 0.341832308 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
<polygon id="path-21" points="76.7129876 72.8022814 75.2754034 86.814413 79.9449685 84.9202277 82.4194729 91.8022814 84.8096817 90.7804537 82.2116343 83.9762941 86.8108161 82.4874666"></polygon>
|
||||
<filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-22">
|
||||
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-1480.000000, -574.000000)">
|
||||
<g id="Buttongroup选块组" transform="translate(1481.000000, 574.000000)">
|
||||
<g id="编组" transform="translate(1.000000, 0.000000)">
|
||||
<g transform="translate(9.000000, 1.000000)" id="多边形">
|
||||
<polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
|
||||
<polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
|
||||
<polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
|
||||
</g>
|
||||
<ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
|
||||
</g>
|
||||
<g id="编组-11" transform="translate(0.000000, 49.000000)">
|
||||
<rect id="矩形备份" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" x="88" y="0" width="40" height="24" rx="2"></rect>
|
||||
<rect id="矩形" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" x="0" y="0" width="40" height="24" rx="2"></rect>
|
||||
<rect id="矩形" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" x="44" y="0" width="40" height="24" rx="2"></rect>
|
||||
<g id="1" fill="#FFFFFF" fill-opacity="1">
|
||||
<use filter="url(#filter-12)" xlink:href="#text-11"></use>
|
||||
<use xlink:href="#text-11"></use>
|
||||
</g>
|
||||
<g id="2" fill="#FFFFFF" fill-opacity="1">
|
||||
<use filter="url(#filter-14)" xlink:href="#text-13"></use>
|
||||
<use xlink:href="#text-13"></use>
|
||||
</g>
|
||||
<g id="3" fill="#FFFFFF" fill-opacity="1">
|
||||
<use filter="url(#filter-16)" xlink:href="#text-15"></use>
|
||||
<use xlink:href="#text-15"></use>
|
||||
</g>
|
||||
</g>
|
||||
<g id="椭圆形">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-18"></use>
|
||||
<circle stroke="url(#linearGradient-17)" stroke-width="4" stroke-linejoin="square" cx="77" cy="74" r="6"></circle>
|
||||
</g>
|
||||
<g id="路径-2">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-22)" xlink:href="#path-21"></use>
|
||||
<use fill="#000000" fill-rule="evenodd" xlink:href="#path-21"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -0,0 +1,76 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Modal 弹出框</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#ECF3FB" offset="0%"></stop>
|
||||
<stop stop-color="#FFFFFF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
|
||||
<stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
|
||||
<stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
|
||||
<stop stop-color="#F0F6FE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
|
||||
<stop stop-color="#D5E6F9" offset="0%"></stop>
|
||||
<stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
|
||||
<stop stop-color="#D5E6F9" offset="0%"></stop>
|
||||
<stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
|
||||
<stop stop-color="#CEE6FE" offset="0%"></stop>
|
||||
<stop stop-color="#8AB5F2" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
|
||||
<stop stop-color="#BFD6F9" offset="0%"></stop>
|
||||
<stop stop-color="#F3F6FE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
|
||||
<stop stop-color="#CAD9F3" offset="0%"></stop>
|
||||
<stop stop-color="#D5E3F7" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
|
||||
<feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
|
||||
</filter>
|
||||
<linearGradient x1="44.0988019%" y1="76.9198201%" x2="128.792906%" y2="-18.5623347%" id="linearGradient-9">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-10">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="编组-17备份" transform="translate(-98.000000, -33.000000)">
|
||||
<g id="Modal-弹出框" transform="translate(98.000000, 33.000000)">
|
||||
<g id="编组">
|
||||
<g transform="translate(9.000000, 1.000000)" id="多边形">
|
||||
<polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
|
||||
<polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
|
||||
<polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
|
||||
</g>
|
||||
<ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
|
||||
</g>
|
||||
<g id="编组-2" transform="translate(29.000000, 36.000000)">
|
||||
<path d="M6.62941176,0 L15.978448,0 L15.978448,0 L60.6294118,0 C62.8385508,3.51840692e-15 64.6294118,1.790861 64.6294118,4 L64.6294118,49 C64.6294118,51.209139 62.8385508,53 60.6294118,53 L6.62941176,53 C4.42027277,53 2.62941176,51.209139 2.62941176,49 L2.62941176,4 C2.62941176,1.790861 4.42027277,4.05812251e-16 6.62941176,0 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
|
||||
<g id="编组-36" transform="translate(20.000000, 24.000000)" fill="url(#linearGradient-10)" opacity="0.303770519">
|
||||
<path d="M18.4437368,13.7577425 C18.4437368,13.7577425 15.2259452,14.6049856 12.9881281,18.3439942 C13.1341609,18.3730232 18.9409919,24.2443166 18.9409919,24.2443166 C19.9794472,25.2518945 21.6760641,25.2518945 22.7145194,24.2443166 L24.2211585,22.7837505 C25.2596138,21.7761726 25.2596138,20.1404196 24.2211585,19.1325041 L18.4437368,13.7577425 Z M21.0618476,23.2364011 C20.7985153,23.4844982 20.3746146,23.4844982 20.1258181,23.2364011 L15.2844259,18.5482102 C15.0210936,18.2997755 15.0210936,17.8910061 15.2844259,17.6425714 C15.5477581,17.3944744 15.9716588,17.3944744 16.2204554,17.6425714 L21.0618476,22.3307624 C21.3106442,22.5643449 21.3106442,22.9734519 21.0618476,23.2364011 L21.0618476,23.2364011 Z M23.1827032,21.1770265 C22.919371,21.4251236 22.4954703,21.4251236 22.2466737,21.1770265 L17.3907458,16.4888356 C17.1274136,16.240401 17.1274136,15.8316315 17.3907458,15.5831969 C17.6540781,15.3350998 18.0779788,15.3350998 18.3267754,15.5831969 L23.1681676,20.2717254 C23.4460355,20.5053079 23.4460355,20.9140774 23.1827032,21.1770265 L23.1827032,21.1770265 Z M6.21619612,7.85742013 L10.1506301,11.7716157 L12.0375629,9.93130918 L8.10312889,6.03196571 L9.03915842,5.11181246 L3.7735275,0 L0,3.65124639 L5.28016659,8.7627213 L6.21619612,7.85742013 Z" id="形状"></path>
|
||||
<path d="M19.1460887,11.1222365 C19.2907188,11.1656758 19.4062892,11.209115 19.5509193,11.2669227 C20.2446759,11.4837848 20.9962177,11.5559608 21.7043371,11.4981532 C23.0193683,11.3825379 24.3200367,10.8331983 25.3174162,9.82106358 C26.5025142,8.64987429 27.0660036,7.04529483 26.9938556,5.46911797 C26.9938556,5.41131034 26.9938556,5.35350271 26.9794928,5.29569508 L24.4072156,5.29569508 L23.3811105,6.32219822 L22.600509,7.10276831 L21.8055448,7.89804093 L19.6664897,7.33433299 L19.0883035,5.19444819 L19.8832678,4.39917557 L20.6635352,3.61827132 L21.6896403,2.59176818 L21.6896403,0.0184932199 C21.6318551,0.0184932199 21.5453443,0.00412484915 21.487225,0.00412484915 C19.941053,-0.0536827822 18.3511245,0.495656789 17.1516637,1.68121445 C16.1399214,2.69334922 15.576432,3.98015378 15.4752244,5.29569508 C15.4174392,6.09096769 15.50395,6.88590616 15.7641505,7.63773952 C15.7641505,7.65210789 15.7785133,7.66647626 15.7785133,7.69554715 C15.8506613,7.95584856 15.8653581,8.27395761 15.5473724,8.60643502 C15.1281791,9.01108844 2.74276963,20.7797866 2.74276963,20.7797866 C1.71666451,21.6619377 1.78881252,23.295588 2.74276963,24.2642836 C3.71108953,25.2186107 5.32974363,25.2764183 6.22591552,24.2499152 C6.22591552,24.2499152 17.8888427,11.9028066 18.3945469,11.3969063 C18.6547474,11.1366049 18.9293107,11.0931656 19.1460887,11.1222365 Z M5.09860276,23.07906 C4.76625426,23.4115375 4.26021609,23.4115375 3.92786759,23.07906 C3.59551909,22.7465826 3.59551909,22.2403482 3.92786759,21.9078707 C4.26021609,21.5753933 4.76625426,21.5753933 5.09860276,21.9078707 C5.40188539,22.2393196 5.40188539,22.7476112 5.09860276,23.07906 L5.09860276,23.07906 Z" id="形状"></path>
|
||||
</g>
|
||||
<path d="M3,5 L49,5 C50.1045695,5 51,5.8954305 51,7 L51,20 C51,21.1045695 50.1045695,22 49,22 L0,22 L0,22 L0,8.69218242 L3,5 Z" id="矩形" fill="#5073E5"></path>
|
||||
<polygon id="矩形备份-32" fill="#3E5DC0" points="0 8.98530819 3 5 3 22 0 24.9853082"></polygon>
|
||||
<polygon id="矩形备份-33" fill="#243D8C" transform="translate(1.500000, 24.096418) scale(-1, 1) translate(-1.500000, -24.096418) " points="0 26.9957245 3 24.0301261 0 21.1971118"></polygon>
|
||||
<text id="开发中" font-family="PingFangSC-Semibold, PingFang SC" font-size="12" font-weight="500" fill="#FFFFFF">
|
||||
<tspan x="10.7588235" y="18">开发中</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.7 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: 介绍 | TinyReact
|
||||
---
|
||||
|
||||
# 介绍
|
||||
|
||||
TinyReact 简介 md文档
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
// 注意，删除了useFor属性
|
||||
// title,label增加英文版，以应对将来的国际化功能
|
||||
export const standaloneMenus = [
|
||||
{
|
||||
label: '组件总览',
|
||||
key: 'overview',
|
||||
},
|
||||
];
|
||||
|
||||
export const docMenus = [
|
||||
{
|
||||
label: '使用指南',
|
||||
labelEn: 'Guide', //***********
|
||||
key: 'doc_use',
|
||||
children: [
|
||||
{
|
||||
title: '背景简介',
|
||||
titleEn: 'Introduce',
|
||||
key: 'introduce',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
//-------------------------------------------------------------------
|
||||
export const cmpMenus = [
|
||||
{
|
||||
label: '表单选择',
|
||||
labelEn: 'Form Selection',
|
||||
key: 'cmp_formselect',
|
||||
children: [
|
||||
{ name: 'Button', nameCn: '按钮', key: 'button' }
|
||||
]
|
||||
},
|
||||
{
|
||||
'label': '提示组件',
|
||||
'labelEn': 'Tips Components',
|
||||
'key': 'cmp_tips_components',
|
||||
'children': [
|
||||
{ 'nameCn': '警告', 'name': 'Alert', 'key': 'alert' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
# 1、声明一个变量
|
||||
VITE_CONTEXT=/tiny-react/
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>OpenTiny - TinyVue</title>
|
||||
<!--问题：1.TinyNG打包后静态资源文件在新官网找不到，CSS主题样式文件加载不到-->
|
||||
<!--2.TinyNG打包文件web-components的主题样式加载时机较早，编译获取不到PUBLIC_URL和DEPLOY_URL变量，从而找不到对应的css文件-->
|
||||
<!--方案：将PUBLIC_URL和DEPLOY_URL变量在header中提前定义，保证web-components可以获取到这两个变量，从而正确加载对应的主题样式文件-->
|
||||
<script type="module">
|
||||
window.PUBLIC_URL = import.meta.env.BASE_URL;
|
||||
window.DEPLOY_URL = '';
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="of-hidden">
|
||||
<div id="header"></div>
|
||||
<app-root></app-root>
|
||||
<div id="app" class="wp100 hp100 pt60"></div>
|
||||
|
||||
<script id="tinyui-design-common" src="https://res.hc-cdn.com/tinyui-design-common/1.0.5.20230106163838/tinyui-design-common.min.js"></script>
|
||||
<script type="module" src="./src/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import md_prism from 'markdown-it-prism'; // 高亮
|
||||
import md_emoji from 'markdown-it-emoji'; // 表情
|
||||
import md_sub from 'markdown-it-sub'; // 下标 ~ ~
|
||||
import md_sup from 'markdown-it-sup'; // 上标 ^ ^
|
||||
import md_mark from 'markdown-it-mark'; // 高亮文字 == ==
|
||||
import md_container from 'markdown-it-container'; // 提示块
|
||||
import md_anchor from 'markdown-it-anchor';
|
||||
export const MdExt = [md_emoji, md_sub, md_sup, md_mark];
|
||||
|
||||
// 自定义container
|
||||
function createContainer(klass) {
|
||||
return [
|
||||
md_container,
|
||||
klass,
|
||||
{
|
||||
render(tokens, idx) {
|
||||
const token = tokens[idx];
|
||||
const info = token.info.trim().slice(klass.length).trim() || '';
|
||||
if (token.nesting === 1) {
|
||||
return `<div class="${klass} custom-block"><p class="custom-block-title">${info}</p>\n`;
|
||||
} else {
|
||||
return `</div>\n`;
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function mdInstall(md) {
|
||||
md.use(md_prism, { plugins: ['line-highlight'] })
|
||||
.use(...createContainer('tip'))
|
||||
.use(...createContainer('info'))
|
||||
.use(...createContainer('warning'))
|
||||
.use(...createContainer('danger'))
|
||||
.use(md_anchor, {
|
||||
permalink: true,
|
||||
permalinkBefore: true,
|
||||
permalinkSymbol: '',
|
||||
slugify: s => encodeURIComponent(s),
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
{
|
||||
"name": "@opentiny/react-site",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"scripts": {
|
||||
"start": "node ./scripts/copy.js && node ./scripts/build-react.mjs && vite",
|
||||
"build:react": "node ./scripts/build-react.mjs",
|
||||
"build": "node ./scripts/copy.js && node ./scripts/build-react.mjs && vite build",
|
||||
"prettier": "npx prettier --write ./**/*.{ts,tsx,css,less,scss}",
|
||||
"stylelint": "npx stylelint ./src/**/*.scss ./src/**/*.less ./src/**/*.css --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/preset-env": "^7.22.20",
|
||||
"@opentiny/vue": "^3.10.1",
|
||||
"@pe-3/react": "^1.0.15",
|
||||
"@rollup/plugin-babel": "^6.0.3",
|
||||
"@unocss/reset": "0.38.2",
|
||||
"@vitejs/plugin-react": "^4.0.4",
|
||||
"@vueuse/head": "0.7.13",
|
||||
"dompurify": "^3.0.1",
|
||||
"github-markdown-css": "^5.1.0",
|
||||
"highlight.js": "^11.5.1",
|
||||
"marked": "^4.3.0",
|
||||
"prismjs": "^1.28.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"vite4": "npm:vite@4",
|
||||
"vue": "^3.2.37",
|
||||
"vue-i18n": "^9.1.10",
|
||||
"vue-router": "4.1.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/markdown-it": "^12.2.3",
|
||||
"@types/node": "^17.0.45",
|
||||
"@unocss/preset-icons": "^0.38.2",
|
||||
"@vitejs/plugin-vue": "^2.3.3",
|
||||
"@vitejs/plugin-vue-jsx": "^1.3.10",
|
||||
"@vue/compiler-sfc": "^3.2.37",
|
||||
"chalk": "4.1.2",
|
||||
"cross-spawn": "^7.0.3",
|
||||
"fast-glob": "^3.2.12",
|
||||
"fs-extra": "^10.1.0",
|
||||
"less": "^4.1.3",
|
||||
"markdown-it": "^13.0.1",
|
||||
"markdown-it-anchor": "^8.6.4",
|
||||
"markdown-it-container": "^3.0.0",
|
||||
"markdown-it-emoji": "^2.0.2",
|
||||
"markdown-it-mark": "^3.0.1",
|
||||
"markdown-it-prism": "^2.2.4",
|
||||
"markdown-it-sub": "^1.0.0",
|
||||
"markdown-it-sup": "^1.0.0",
|
||||
"markdown-it-table-of-contents": "^0.6.0",
|
||||
"markdown-it-toc-done-right": "^4.2.0",
|
||||
"naive-ui": "^2.30.6",
|
||||
"prettier": "^2.7.1",
|
||||
"stylelint": "^14.9.1",
|
||||
"stylelint-config-standard": "^26.0.0",
|
||||
"unocss": "^0.39.3",
|
||||
"unplugin-auto-import": "0.8.7",
|
||||
"unplugin-vue-components": "^0.19.9",
|
||||
"uslug": "^1.0.4",
|
||||
"vite": "^2.9.12",
|
||||
"vite-plugin-html": "^2.0.0",
|
||||
"vite-plugin-inspect": "^0.5.0",
|
||||
"vite-plugin-md": "0.13.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<div>
|
||||
<alert-base-demo></alert-base-demo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AlertBase from '@/webcomps/alert/base.js'
|
||||
customElements.define(
|
||||
'alert-base-demo',
|
||||
AlertBase
|
||||
)
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<alert-center-demo></alert-center-demo>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import AlertCenter from "@/webcomps/alert/center.js";
|
||||
customElements.define("alert-center-demo", AlertCenter);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<alert-size-demo></alert-size-demo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AlertSize from "@/webcomps/alert/size.js";
|
||||
customElements.define("alert-size-demo", AlertSize);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<alert-title-demo></alert-title-demo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import AlertTitle from "@/webcomps/alert/title.js";
|
||||
customElements.define("alert-title-demo", AlertTitle);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<alert-type-demo></alert-type-demo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import AlertType from "@/webcomps/alert/type.js";
|
||||
customElements.define("alert-type-demo", AlertType);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Alert 警告
|
||||
---
|
||||
|
||||
# Alert 警告
|
||||
|
||||
<div>Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Alert
|
||||
---
|
||||
|
||||
# Alert
|
||||
|
||||
<div>Alert alarms, including warning, error, info, and success.</div>
|
||||
|
|
@ -0,0 +1,228 @@
|
|||
{
|
||||
"column": "2",
|
||||
"owner": "",
|
||||
"demos": [
|
||||
{
|
||||
"demoId": "base",
|
||||
"name": {
|
||||
"zh-CN": "基本用法",
|
||||
"en-US": "Basic Usage"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "详细用法参考如下示例",
|
||||
"en-US": "For details, see the following example."
|
||||
},
|
||||
"codeFiles": [
|
||||
"base.vue"
|
||||
]
|
||||
},
|
||||
{
|
||||
"demoId": "type",
|
||||
"name": {
|
||||
"zh-CN": "类型",
|
||||
"en-US": "Type"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>通过 <code>type</code> 设置不同的类型。可选值：success、warning、info、error，默认值：success 。</p>\n",
|
||||
"en-US": "<p>Set different types through <code>type</code>. The options are success, warning, info, and error. The default value is success. </p>\n"
|
||||
},
|
||||
"codeFiles": [
|
||||
"type.vue"
|
||||
]
|
||||
},
|
||||
{
|
||||
"demoId": "size",
|
||||
"name": {
|
||||
"zh-CN": "大尺寸",
|
||||
"en-US": "Large Size"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>通过 <code>size</code> 属性设置不同的尺寸，可选值：nomal、large，默认值：nomal 。</p>\n",
|
||||
"en-US": "<p>Set different sizes through the <code>size</code> attribute. The options are nomal and large. The default value is nomal. </p>\n"
|
||||
},
|
||||
"codeFiles": [
|
||||
"size.vue"
|
||||
]
|
||||
},
|
||||
{
|
||||
"demoId": "title",
|
||||
"name": {
|
||||
"zh-CN": "自定义标题",
|
||||
"en-US": "Custom Title"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>当 <code>size</code> 为 large 时显示标题，可设置 <code>title</code> 或 <code>slot</code> 自定义标题。默认标题根据设置的 <code>type</code> 显示。</p>\n",
|
||||
"en-US": "<p>When <code>size</code> is set to large, the title is displayed. You can set <code>title</code> or <code>slot</code> to customize the title. The default title is displayed according to the set <code>type</code>. </p>\n"
|
||||
},
|
||||
"codeFiles": [
|
||||
"title.vue"
|
||||
]
|
||||
},
|
||||
{
|
||||
"demoId": "center",
|
||||
"name": {
|
||||
"zh-CN": "文字居中",
|
||||
"en-US": "Center text"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>通过 <code>center</code> 属性可使文字显示居中。</p>\n",
|
||||
"en-US": "<p>You can use the <code>center</code> property to center the text. </p>\n"
|
||||
},
|
||||
"codeFiles": [
|
||||
"center.vue"
|
||||
]
|
||||
}
|
||||
],
|
||||
"apis": [
|
||||
{
|
||||
"name": "alert",
|
||||
"type": "component",
|
||||
"properties": [
|
||||
{
|
||||
"name": "closable",
|
||||
"type": "Boolean",
|
||||
"defaultValue": "该属性的默认值为 true",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告是否可以关闭",
|
||||
"en-US": "Set whether alarms can be disabled."
|
||||
},
|
||||
"demoId": "closable"
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"type": "String , Object",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告的图标，默认会根据 type 值自动使用对应图标",
|
||||
"en-US": "Set the alarm icon. By default, the corresponding icon is automatically used based on the value of type."
|
||||
},
|
||||
"demoId": "icon"
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"type": "String",
|
||||
"defaultValue": "该属性的默认值为 normal",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告的大小 nomal/large， 缺省为 nomal。;该属性的可选值为 nomal / large",
|
||||
"en-US": "Set the warning size to nomal or large. The default value is nomal. ;The value of this attribute can be nomal or large"
|
||||
},
|
||||
"demoId": "size"
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
"type": "String",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告的标题，在 size 为 large 时有效，默认根据 type 自动设置",
|
||||
"en-US": "Set the warning title. This parameter is valid only when size is set to large. By default, the alarm title is automatically set based on type."
|
||||
},
|
||||
"demoId": "title"
|
||||
},
|
||||
{
|
||||
"name": "type",
|
||||
"type": "String",
|
||||
"defaultValue": "该属性的默认值为 success",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告的类型;该属性的可选值为 success/warning/info/error",
|
||||
"en-US": "Set the alarm type. The value of this attribute can be success / warning / info / error"
|
||||
},
|
||||
"demoId": "type"
|
||||
},
|
||||
{
|
||||
"name": "description",
|
||||
"type": "String",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告的提示内容，默认为空;",
|
||||
"en-US": "Set the warning prompt content. The default value is null."
|
||||
},
|
||||
"demoId": "custom-description"
|
||||
},
|
||||
{
|
||||
"name": "center",
|
||||
"type": "Boolean",
|
||||
"defaultValue": "该属性的默认值为 false",
|
||||
"desc": {
|
||||
"zh-CN": "文字是否居中",
|
||||
"en-US": "Whether the text is centered"
|
||||
},
|
||||
"demoId": "center"
|
||||
},
|
||||
{
|
||||
"name": "close-text",
|
||||
"type": "String",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "关闭按钮自定义文本",
|
||||
"en-US": "Customized text of the close button"
|
||||
},
|
||||
"demoId": "close-text"
|
||||
},
|
||||
{
|
||||
"name": "show-icon",
|
||||
"type": "Boolean",
|
||||
"defaultValue": "该属性的默认值为 true",
|
||||
"desc": {
|
||||
"zh-CN": "是否显示图标",
|
||||
"en-US": "Display icon"
|
||||
},
|
||||
"demoId": "show-icon"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"name": "close",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "关闭 alert 时触发的事件",
|
||||
"en-US": "Event triggered when the alert function is disabled"
|
||||
},
|
||||
"demoId": "close-events"
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
{
|
||||
"name": "default",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "组件默认插槽",
|
||||
"en-US": "Default slot of the component"
|
||||
},
|
||||
"demoId": "slot-default"
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "标题的内容",
|
||||
"en-US": "Title content"
|
||||
},
|
||||
"demoId": "title"
|
||||
},
|
||||
{
|
||||
"name": "description",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "提示内容",
|
||||
"en-US": "Prompt Content"
|
||||
},
|
||||
"demoId": "custom-description"
|
||||
},
|
||||
{
|
||||
"name": "close",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "自定义关闭按钮，当 closable 属性为 false 时有效",
|
||||
"en-US": ""
|
||||
},
|
||||
"demoId": "custom-close"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<button-click-demo></button-click-demo>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ButtonClick from "@/webcomps/button/button-click-webcomp.js";
|
||||
customElements.define("button-click-demo", ButtonClick);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<button-round-demo></button-round-demo>
|
||||
</template>
|
||||
<script>
|
||||
import ButtonRound from "@/webcomps/button/button-round-webcomp.js";
|
||||
customElements.define("button-round-demo", ButtonRound);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<button-type-demo></button-type-demo>
|
||||
</template>
|
||||
<script>
|
||||
import ButtonType from "@/webcomps/button/button-type-webcomp.js";
|
||||
customElements.define("button-type-demo", ButtonType);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
title: Button 按钮
|
||||
---
|
||||
|
||||
# Button 按钮
|
||||
|
||||
<div>
|
||||
|
||||
按钮组件一般用于触发一些操作。
|
||||
|
||||
```typescript
|
||||
import { Button } from '@opentiny/vue';
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Button 按钮
|
||||
---
|
||||
|
||||
# Button 按钮
|
||||
|
||||
<div> 按钮组件一般用于触发一些操作。</div>
|
||||
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
{
|
||||
"column": "2",
|
||||
"demos": [
|
||||
{
|
||||
"demoId": "button-type",
|
||||
"name": {
|
||||
"zh-CN": "按钮类型",
|
||||
"en-US": "button type"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>通过属性<code>type</code>配置按钮类型，包含<code>success</code>、<code>info</code>、<code>warning</code>、<code>danger</code>四种类型。",
|
||||
"en-US": "<p>button type</p>"
|
||||
},
|
||||
"codeFiles": ["button-type.vue"]
|
||||
},
|
||||
{
|
||||
"demoId": "button-round",
|
||||
"name": {
|
||||
"zh-CN": "圆角按钮",
|
||||
"en-US": "button round"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>通过<code>round</code>属性设置按钮是否圆角",
|
||||
"en-US": "<p>button round</p>"
|
||||
},
|
||||
"codeFiles": ["button-round.vue"]
|
||||
},
|
||||
{
|
||||
"demoId": "button-click",
|
||||
"name": {
|
||||
"zh-CN": "事件",
|
||||
"en-US": "events"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>按钮点击事件。",
|
||||
"en-US": "<p>bbutton click</p>"
|
||||
},
|
||||
"codeFiles": ["button-click.vue"]
|
||||
}
|
||||
],
|
||||
"apis": [
|
||||
{
|
||||
"name": "Button",
|
||||
"type": "component",
|
||||
"properties": [
|
||||
{
|
||||
"name": "type",
|
||||
"type": "primary | success | warning",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "<p>展示按钮不同的状态</p>",
|
||||
"en-US": "display different button"
|
||||
},
|
||||
"demoId": "button-type"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"name": "click",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "<p>点击按钮时触发的回调</p>",
|
||||
"en-US": "Click"
|
||||
},
|
||||
"demoId": "button-click"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export default {
|
||||
isMobile: false,
|
||||
initApp: (app) => { }
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Button按钮</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#ECF3FB" offset="0%"></stop>
|
||||
<stop stop-color="#FFFFFF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
|
||||
<stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
|
||||
<stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
|
||||
<stop stop-color="#F0F6FE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
|
||||
<stop stop-color="#D5E6F9" offset="0%"></stop>
|
||||
<stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
|
||||
<stop stop-color="#D5E6F9" offset="0%"></stop>
|
||||
<stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
|
||||
<stop stop-color="#CEE6FE" offset="0%"></stop>
|
||||
<stop stop-color="#8AB5F2" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
|
||||
<stop stop-color="#BFD6F9" offset="0%"></stop>
|
||||
<stop stop-color="#F3F6FE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
|
||||
<stop stop-color="#CAD9F3" offset="0%"></stop>
|
||||
<stop stop-color="#D5E3F7" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
|
||||
<feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
|
||||
</filter>
|
||||
<linearGradient x1="44.0988019%" y1="53.2030982%" x2="128.792906%" y2="41.8419999%" id="linearGradient-9">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="44.0988019%" y1="54.0931841%" x2="128.792906%" y2="39.5750321%" id="linearGradient-10">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="44.0988019%" y1="54.0931841%" x2="128.792906%" y2="39.5750321%" id="linearGradient-11">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-12">
|
||||
<stop stop-color="#FFCC00" offset="0%"></stop>
|
||||
<stop stop-color="#FF9D00" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<circle id="path-13" cx="76" cy="45" r="8"></circle>
|
||||
<filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-14">
|
||||
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
|
||||
<feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
|
||||
<feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
|
||||
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.661752894 0 0 0 0 0.324547702 0 0 0 0 0.00489962574 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-15">
|
||||
<feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0.841553619 0 0 0 0 0.341832308 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
<polygon id="path-16" points="75.7129876 43.8022814 74.2754034 57.814413 78.9449685 55.9202277 81.4194729 62.8022814 83.8096817 61.7804537 81.2116343 54.9762941 85.8108161 53.4874666"></polygon>
|
||||
<filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-17">
|
||||
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-697.000000, -327.000000)">
|
||||
<g id="Button按钮" transform="translate(697.000000, 327.000000)">
|
||||
<g id="编组">
|
||||
<g transform="translate(9.000000, 1.000000)" id="多边形">
|
||||
<polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
|
||||
<polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
|
||||
<polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
|
||||
</g>
|
||||
<ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
|
||||
</g>
|
||||
<g id="编组" transform="translate(17.000000, 38.000000)">
|
||||
<rect id="矩形备份" fill="url(#linearGradient-9)" opacity="0.303770519" x="7" y="0" width="78" height="23" rx="4"></rect>
|
||||
<rect id="矩形" stroke="url(#linearGradient-11)" fill="url(#linearGradient-10)" x="0" y="16" width="90" height="30" rx="4"></rect>
|
||||
<path d="M14.784,25.576 L14.784,27.176 L18.528,27.176 L18.528,37 L20.4,37 L20.4,27.176 L24.144,27.176 L24.144,25.576 L14.784,25.576 Z M26.576,25.352 C26.224,25.352 25.936,25.464 25.696,25.688 C25.456,25.912 25.344,26.2 25.344,26.552 C25.344,26.904 25.456,27.192 25.696,27.432 C25.936,27.656 26.224,27.768 26.576,27.768 C26.928,27.768 27.216,27.656 27.456,27.432 C27.696,27.208 27.824,26.904 27.824,26.552 C27.824,26.2 27.696,25.912 27.472,25.688 C27.232,25.464 26.928,25.352 26.576,25.352 Z M25.664,28.728 L25.664,37 L27.488,37 L27.488,28.728 L25.664,28.728 Z M33.456,28.504 C32.16,28.504 31.152,28.936 30.432,29.8 C29.76,30.584 29.424,31.608 29.424,32.856 C29.424,34.136 29.76,35.176 30.448,35.976 C31.152,36.808 32.144,37.224 33.424,37.224 C34.496,37.224 35.36,36.952 36,36.424 C36.656,35.88 37.088,35.048 37.28,33.928 L35.472,33.928 C35.328,35.128 34.656,35.736 33.44,35.736 C32.736,35.736 32.208,35.48 31.856,34.984 C31.472,34.472 31.296,33.752 31.296,32.84 C31.296,31.944 31.488,31.24 31.872,30.744 C32.256,30.232 32.784,29.992 33.456,29.992 C34,29.992 34.448,30.12 34.784,30.376 C35.104,30.632 35.328,31.016 35.44,31.544 L37.248,31.544 C37.088,30.504 36.672,29.736 36.016,29.224 C35.376,28.744 34.528,28.504 33.456,28.504 Z M38.72,25.352 L38.72,37 L40.544,37 L40.544,34.104 L41.376,33.32 L44.272,37 L46.608,37 L42.624,32.152 L46.288,28.728 L43.936,28.728 L40.544,32.008 L40.544,25.352 L38.72,25.352 Z M53.056,25.576 L53.056,37 L54.928,37 L54.928,29.128 L54.992,29.128 L58.352,37 L59.968,37 L63.328,29.128 L63.392,29.128 L63.392,37 L65.264,37 L65.264,25.576 L63.072,25.576 L59.2,34.536 L59.136,34.536 L55.248,25.576 L53.056,25.576 Z M70.864,28.504 C69.632,28.504 68.656,28.92 67.952,29.768 C67.216,30.6 66.864,31.624 66.864,32.856 C66.864,34.232 67.248,35.304 68.016,36.088 C68.736,36.84 69.712,37.224 70.944,37.224 C72.048,37.224 72.96,36.904 73.696,36.28 C74.272,35.768 74.656,35.112 74.848,34.344 L73.024,34.344 C72.8,34.808 72.56,35.144 72.288,35.352 C71.936,35.608 71.488,35.736 70.928,35.736 C70.272,35.736 69.76,35.528 69.408,35.128 C69.056,34.728 68.848,34.136 68.784,33.368 L74.976,33.368 C74.976,31.88 74.64,30.712 73.984,29.88 C73.264,28.952 72.224,28.504 70.864,28.504 Z M70.912,29.992 C72.192,29.992 72.912,30.648 73.072,31.992 L68.816,31.992 C68.928,31.336 69.152,30.84 69.488,30.504 C69.84,30.152 70.304,29.992 70.912,29.992 Z" id="形状结合" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<g id="椭圆形">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-13"></use>
|
||||
<circle stroke="url(#linearGradient-12)" stroke-width="4" stroke-linejoin="square" cx="76" cy="45" r="6"></circle>
|
||||
</g>
|
||||
<g id="路径-2">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
|
||||
<use fill="#000000" fill-rule="evenodd" xlink:href="#path-16"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -0,0 +1,138 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="130px" height="125px" viewBox="0 0 130 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Buttongroup选块组</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#ECF3FB" offset="0%"></stop>
|
||||
<stop stop-color="#FFFFFF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
|
||||
<stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
|
||||
<stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
|
||||
<stop stop-color="#F0F6FE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
|
||||
<stop stop-color="#D5E6F9" offset="0%"></stop>
|
||||
<stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
|
||||
<stop stop-color="#D5E6F9" offset="0%"></stop>
|
||||
<stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
|
||||
<stop stop-color="#CEE6FE" offset="0%"></stop>
|
||||
<stop stop-color="#8AB5F2" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
|
||||
<stop stop-color="#BFD6F9" offset="0%"></stop>
|
||||
<stop stop-color="#F3F6FE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
|
||||
<stop stop-color="#CAD9F3" offset="0%"></stop>
|
||||
<stop stop-color="#D5E3F7" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
|
||||
<feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
|
||||
</filter>
|
||||
<linearGradient x1="44.0988019%" y1="63.2619166%" x2="128.792906%" y2="16.2231039%" id="linearGradient-9">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="44.0988019%" y1="63.2619166%" x2="128.792906%" y2="16.2231039%" id="linearGradient-10">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<text id="text-11" font-family="PingFangSC-Semibold, PingFang SC" font-size="16" font-weight="500" fill="#FFFFFF">
|
||||
<tspan x="16.72" y="18">1</tspan>
|
||||
</text>
|
||||
<filter x="-5.0%" y="-5.3%" width="110.0%" height="121.1%" filterUnits="objectBoundingBox" id="filter-12">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.31372549 0 0 0 0 0.450980392 0 0 0 0 0.898039216 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<text id="text-13" font-family="PingFangSC-Semibold, PingFang SC" font-size="16" font-weight="500" fill="#FFFFFF">
|
||||
<tspan x="59.2" y="18">2</tspan>
|
||||
</text>
|
||||
<filter x="-5.0%" y="-5.3%" width="110.0%" height="121.1%" filterUnits="objectBoundingBox" id="filter-14">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.31372549 0 0 0 0 0.450980392 0 0 0 0 0.898039216 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<text id="text-15" font-family="PingFangSC-Semibold, PingFang SC" font-size="16" font-weight="500" fill="#FFFFFF">
|
||||
<tspan x="103.2" y="18">3</tspan>
|
||||
</text>
|
||||
<filter x="-5.0%" y="-5.3%" width="110.0%" height="121.1%" filterUnits="objectBoundingBox" id="filter-16">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.31372549 0 0 0 0 0.450980392 0 0 0 0 0.898039216 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-17">
|
||||
<stop stop-color="#FFCC00" offset="0%"></stop>
|
||||
<stop stop-color="#FF9D00" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<circle id="path-18" cx="77" cy="74" r="8"></circle>
|
||||
<filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-19">
|
||||
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
|
||||
<feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
|
||||
<feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
|
||||
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.661752894 0 0 0 0 0.324547702 0 0 0 0 0.00489962574 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-20">
|
||||
<feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0.841553619 0 0 0 0 0.341832308 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
<polygon id="path-21" points="76.7129876 72.8022814 75.2754034 86.814413 79.9449685 84.9202277 82.4194729 91.8022814 84.8096817 90.7804537 82.2116343 83.9762941 86.8108161 82.4874666"></polygon>
|
||||
<filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-22">
|
||||
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-1480.000000, -574.000000)">
|
||||
<g id="Buttongroup选块组" transform="translate(1481.000000, 574.000000)">
|
||||
<g id="编组" transform="translate(1.000000, 0.000000)">
|
||||
<g transform="translate(9.000000, 1.000000)" id="多边形">
|
||||
<polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
|
||||
<polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
|
||||
<polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
|
||||
</g>
|
||||
<ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
|
||||
</g>
|
||||
<g id="编组-11" transform="translate(0.000000, 49.000000)">
|
||||
<rect id="矩形备份" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" x="88" y="0" width="40" height="24" rx="2"></rect>
|
||||
<rect id="矩形" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" x="0" y="0" width="40" height="24" rx="2"></rect>
|
||||
<rect id="矩形" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" x="44" y="0" width="40" height="24" rx="2"></rect>
|
||||
<g id="1" fill="#FFFFFF" fill-opacity="1">
|
||||
<use filter="url(#filter-12)" xlink:href="#text-11"></use>
|
||||
<use xlink:href="#text-11"></use>
|
||||
</g>
|
||||
<g id="2" fill="#FFFFFF" fill-opacity="1">
|
||||
<use filter="url(#filter-14)" xlink:href="#text-13"></use>
|
||||
<use xlink:href="#text-13"></use>
|
||||
</g>
|
||||
<g id="3" fill="#FFFFFF" fill-opacity="1">
|
||||
<use filter="url(#filter-16)" xlink:href="#text-15"></use>
|
||||
<use xlink:href="#text-15"></use>
|
||||
</g>
|
||||
</g>
|
||||
<g id="椭圆形">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-18"></use>
|
||||
<circle stroke="url(#linearGradient-17)" stroke-width="4" stroke-linejoin="square" cx="77" cy="74" r="6"></circle>
|
||||
</g>
|
||||
<g id="路径-2">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-22)" xlink:href="#path-21"></use>
|
||||
<use fill="#000000" fill-rule="evenodd" xlink:href="#path-21"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -0,0 +1,76 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Modal 弹出框</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#ECF3FB" offset="0%"></stop>
|
||||
<stop stop-color="#FFFFFF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
|
||||
<stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
|
||||
<stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
|
||||
<stop stop-color="#F0F6FE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
|
||||
<stop stop-color="#D5E6F9" offset="0%"></stop>
|
||||
<stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
|
||||
<stop stop-color="#D5E6F9" offset="0%"></stop>
|
||||
<stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
|
||||
<stop stop-color="#CEE6FE" offset="0%"></stop>
|
||||
<stop stop-color="#8AB5F2" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
|
||||
<stop stop-color="#BFD6F9" offset="0%"></stop>
|
||||
<stop stop-color="#F3F6FE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
|
||||
<stop stop-color="#CAD9F3" offset="0%"></stop>
|
||||
<stop stop-color="#D5E3F7" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
|
||||
<feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
|
||||
</filter>
|
||||
<linearGradient x1="44.0988019%" y1="76.9198201%" x2="128.792906%" y2="-18.5623347%" id="linearGradient-9">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-10">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="编组-17备份" transform="translate(-98.000000, -33.000000)">
|
||||
<g id="Modal-弹出框" transform="translate(98.000000, 33.000000)">
|
||||
<g id="编组">
|
||||
<g transform="translate(9.000000, 1.000000)" id="多边形">
|
||||
<polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
|
||||
<polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
|
||||
<polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
|
||||
</g>
|
||||
<ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
|
||||
</g>
|
||||
<g id="编组-2" transform="translate(29.000000, 36.000000)">
|
||||
<path d="M6.62941176,0 L15.978448,0 L15.978448,0 L60.6294118,0 C62.8385508,3.51840692e-15 64.6294118,1.790861 64.6294118,4 L64.6294118,49 C64.6294118,51.209139 62.8385508,53 60.6294118,53 L6.62941176,53 C4.42027277,53 2.62941176,51.209139 2.62941176,49 L2.62941176,4 C2.62941176,1.790861 4.42027277,4.05812251e-16 6.62941176,0 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
|
||||
<g id="编组-36" transform="translate(20.000000, 24.000000)" fill="url(#linearGradient-10)" opacity="0.303770519">
|
||||
<path d="M18.4437368,13.7577425 C18.4437368,13.7577425 15.2259452,14.6049856 12.9881281,18.3439942 C13.1341609,18.3730232 18.9409919,24.2443166 18.9409919,24.2443166 C19.9794472,25.2518945 21.6760641,25.2518945 22.7145194,24.2443166 L24.2211585,22.7837505 C25.2596138,21.7761726 25.2596138,20.1404196 24.2211585,19.1325041 L18.4437368,13.7577425 Z M21.0618476,23.2364011 C20.7985153,23.4844982 20.3746146,23.4844982 20.1258181,23.2364011 L15.2844259,18.5482102 C15.0210936,18.2997755 15.0210936,17.8910061 15.2844259,17.6425714 C15.5477581,17.3944744 15.9716588,17.3944744 16.2204554,17.6425714 L21.0618476,22.3307624 C21.3106442,22.5643449 21.3106442,22.9734519 21.0618476,23.2364011 L21.0618476,23.2364011 Z M23.1827032,21.1770265 C22.919371,21.4251236 22.4954703,21.4251236 22.2466737,21.1770265 L17.3907458,16.4888356 C17.1274136,16.240401 17.1274136,15.8316315 17.3907458,15.5831969 C17.6540781,15.3350998 18.0779788,15.3350998 18.3267754,15.5831969 L23.1681676,20.2717254 C23.4460355,20.5053079 23.4460355,20.9140774 23.1827032,21.1770265 L23.1827032,21.1770265 Z M6.21619612,7.85742013 L10.1506301,11.7716157 L12.0375629,9.93130918 L8.10312889,6.03196571 L9.03915842,5.11181246 L3.7735275,0 L0,3.65124639 L5.28016659,8.7627213 L6.21619612,7.85742013 Z" id="形状"></path>
|
||||
<path d="M19.1460887,11.1222365 C19.2907188,11.1656758 19.4062892,11.209115 19.5509193,11.2669227 C20.2446759,11.4837848 20.9962177,11.5559608 21.7043371,11.4981532 C23.0193683,11.3825379 24.3200367,10.8331983 25.3174162,9.82106358 C26.5025142,8.64987429 27.0660036,7.04529483 26.9938556,5.46911797 C26.9938556,5.41131034 26.9938556,5.35350271 26.9794928,5.29569508 L24.4072156,5.29569508 L23.3811105,6.32219822 L22.600509,7.10276831 L21.8055448,7.89804093 L19.6664897,7.33433299 L19.0883035,5.19444819 L19.8832678,4.39917557 L20.6635352,3.61827132 L21.6896403,2.59176818 L21.6896403,0.0184932199 C21.6318551,0.0184932199 21.5453443,0.00412484915 21.487225,0.00412484915 C19.941053,-0.0536827822 18.3511245,0.495656789 17.1516637,1.68121445 C16.1399214,2.69334922 15.576432,3.98015378 15.4752244,5.29569508 C15.4174392,6.09096769 15.50395,6.88590616 15.7641505,7.63773952 C15.7641505,7.65210789 15.7785133,7.66647626 15.7785133,7.69554715 C15.8506613,7.95584856 15.8653581,8.27395761 15.5473724,8.60643502 C15.1281791,9.01108844 2.74276963,20.7797866 2.74276963,20.7797866 C1.71666451,21.6619377 1.78881252,23.295588 2.74276963,24.2642836 C3.71108953,25.2186107 5.32974363,25.2764183 6.22591552,24.2499152 C6.22591552,24.2499152 17.8888427,11.9028066 18.3945469,11.3969063 C18.6547474,11.1366049 18.9293107,11.0931656 19.1460887,11.1222365 Z M5.09860276,23.07906 C4.76625426,23.4115375 4.26021609,23.4115375 3.92786759,23.07906 C3.59551909,22.7465826 3.59551909,22.2403482 3.92786759,21.9078707 C4.26021609,21.5753933 4.76625426,21.5753933 5.09860276,21.9078707 C5.40188539,22.2393196 5.40188539,22.7476112 5.09860276,23.07906 L5.09860276,23.07906 Z" id="形状"></path>
|
||||
</g>
|
||||
<path d="M3,5 L49,5 C50.1045695,5 51,5.8954305 51,7 L51,20 C51,21.1045695 50.1045695,22 49,22 L0,22 L0,22 L0,8.69218242 L3,5 Z" id="矩形" fill="#5073E5"></path>
|
||||
<polygon id="矩形备份-32" fill="#3E5DC0" points="0 8.98530819 3 5 3 22 0 24.9853082"></polygon>
|
||||
<polygon id="矩形备份-33" fill="#243D8C" transform="translate(1.500000, 24.096418) scale(-1, 1) translate(-1.500000, -24.096418) " points="0 26.9957245 3 24.0301261 0 21.1971118"></polygon>
|
||||
<text id="开发中" font-family="PingFangSC-Semibold, PingFang SC" font-size="12" font-weight="500" fill="#FFFFFF">
|
||||
<tspan x="10.7588235" y="18">开发中</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.7 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: 介绍 | TinyReact
|
||||
---
|
||||
|
||||
# 介绍
|
||||
|
||||
TinyReact 简介 md文档
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
// 注意，删除了useFor属性
|
||||
// title,label增加英文版，以应对将来的国际化功能
|
||||
export const standaloneMenus = [
|
||||
{
|
||||
label: '组件总览',
|
||||
key: 'overview',
|
||||
},
|
||||
];
|
||||
|
||||
export const docMenus = [
|
||||
{
|
||||
label: '使用指南',
|
||||
labelEn: 'Guide', //***********
|
||||
key: 'doc_use',
|
||||
children: [
|
||||
{
|
||||
title: '背景简介',
|
||||
titleEn: 'Introduce',
|
||||
key: 'introduce',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
//-------------------------------------------------------------------
|
||||
export const cmpMenus = [
|
||||
{
|
||||
label: '表单选择',
|
||||
labelEn: 'Form Selection',
|
||||
key: 'cmp_formselect',
|
||||
children: [
|
||||
{ name: 'Button', nameCn: '按钮', key: 'button' }
|
||||
]
|
||||
},
|
||||
{
|
||||
'label': '提示组件',
|
||||
'labelEn': 'Tips Components',
|
||||
'key': 'cmp_tips_components',
|
||||
'children': [
|
||||
{ 'nameCn': '警告', 'name': 'Alert', 'key': 'alert' }
|
||||
]
|
||||
}
|
||||
];
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 547 B |
|
|
@ -0,0 +1,75 @@
|
|||
import { build, defineConfig } from 'vite4'
|
||||
import fg from 'fast-glob'
|
||||
import { getBabelOutputPlugin } from '@rollup/plugin-babel'
|
||||
|
||||
function createEntry() {
|
||||
const entries = fg.sync(
|
||||
['demos/**/*.jsx']
|
||||
)
|
||||
return entries.reduce((pre, item) => {
|
||||
pre[
|
||||
item
|
||||
.replace('demos/app/', '')
|
||||
.replace('.jsx', '')
|
||||
] = item
|
||||
return pre
|
||||
}, ({}))
|
||||
}
|
||||
|
||||
const entries = createEntry()
|
||||
|
||||
function prependPlugin(options) {
|
||||
return {
|
||||
name: 'prepend-plugin',
|
||||
generateBundle(_, bundle) {
|
||||
for (const fileName in bundle) {
|
||||
const chunk = bundle[fileName];
|
||||
if (chunk.isEntry) {
|
||||
chunk.code = `${options.code}\n${chunk.code}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async function buildReact() {
|
||||
await build({
|
||||
...defineConfig({
|
||||
publicDir: false,
|
||||
extensions: ['.js', '.ts', '.tsx', '.jsx'],
|
||||
plugins: []
|
||||
}),
|
||||
configFile: false,
|
||||
build: {
|
||||
outDir: './src/webcomps',
|
||||
emptyOutDir: true,
|
||||
minify: false,
|
||||
rollupOptions: {
|
||||
plugins: [
|
||||
getBabelOutputPlugin({
|
||||
presets: [['@babel/preset-env', { loose: true, modules: false }]]
|
||||
}),
|
||||
prependPlugin({
|
||||
code: `import React from 'react'`
|
||||
})
|
||||
],
|
||||
output: {
|
||||
strict: false,
|
||||
manualChunks: {}
|
||||
},
|
||||
external: [
|
||||
/^@pe-3/,
|
||||
/^@opentiny/,
|
||||
/^react/
|
||||
]
|
||||
},
|
||||
lib: {
|
||||
entry: entries,
|
||||
formats: ['es'],
|
||||
fileName: (format, entryName) => `${entryName}.js`
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
buildReact()
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
const fs = require('fs-extra');
|
||||
const path = require('path');
|
||||
const chalk = require('chalk');
|
||||
|
||||
const baseDir = process.cwd();
|
||||
const toRemovefiles = [path.resolve(baseDir, './public/@demos')];
|
||||
|
||||
toRemovefiles.forEach(file => {
|
||||
if (fs.pathExistsSync(file)) {
|
||||
fs.removeSync(file);
|
||||
}
|
||||
});
|
||||
|
||||
const copyfiles = [
|
||||
{
|
||||
// 组件示例源码、组件描述markdown和组件示例配置
|
||||
source: 'demos',
|
||||
target: './public/@demos',
|
||||
},
|
||||
];
|
||||
|
||||
// 根据传入的参数，同步拷贝相应的文件
|
||||
copyfiles.forEach(path => {
|
||||
try {
|
||||
fs.copySync(path.source, path.target, (src) => {
|
||||
return !/.jsx$/.test(src);
|
||||
});
|
||||
console.log(chalk.green(path.source + ' 拷贝完成！'));
|
||||
} catch (err) {
|
||||
console.log(chalk.red(err));
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<n-config-provider class="hp100" :theme="nTheme" :locale="nuiLocal" :date-locale="nuiDateLocal" :hljs="hljs">
|
||||
<router-view />
|
||||
</n-config-provider>
|
||||
</template>
|
||||
<script lang="jsx">
|
||||
import { defineComponent, reactive, computed, onMounted, toRefs } from 'vue';
|
||||
import { darkTheme, lightTheme } from 'naive-ui';
|
||||
import { zhCN, dateZhCN } from 'naive-ui';
|
||||
import hljs from 'highlight.js/lib/core';
|
||||
// 示例中代码高亮
|
||||
import javascript from 'highlight.js/lib/languages/javascript';
|
||||
import css from 'highlight.js/lib/languages/css';
|
||||
import html from 'highlight.js/lib/languages/xml';
|
||||
|
||||
import { $t2 } from './i18n';
|
||||
import { appData } from './tools';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AppVue',
|
||||
props: [],
|
||||
setup() {
|
||||
let state = reactive({
|
||||
nTheme: computed(() => (appData.theme === 'dark' ? darkTheme : lightTheme)),
|
||||
nuiLocal: computed(() => $t2(zhCN, null)),
|
||||
nuiDateLocal: computed(() => $t2(dateZhCN, null)),
|
||||
});
|
||||
hljs.registerLanguage('javascript', javascript);
|
||||
hljs.registerLanguage('css', css);
|
||||
hljs.registerLanguage('html', html);
|
||||
|
||||
onMounted(() => {
|
||||
// 加载header
|
||||
const common = new window.TDCommon(['#header'], {
|
||||
searchConfig: {
|
||||
show: true
|
||||
},
|
||||
menuCollapse: {
|
||||
useCollapse: true, // 启用1024以下隐藏菜单
|
||||
menuId: '#layoutSider',
|
||||
},
|
||||
});
|
||||
common.renderHeader();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
hljs,
|
||||
appData,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
.markdown-body ul,
|
||||
.markdown-body ol,
|
||||
.markdown-body li {
|
||||
list-style: circle;
|
||||
}
|
||||
// 切换md中,这2个类的显示隐藏. used-config used-tiny 类
|
||||
.md-config .markdown-body {
|
||||
.used-tiny {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.md-tiny .markdown-body {
|
||||
.used-config {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// 表格组件demo区会将其父容器(.n-layout-scroll-container)宽度撑开超出中间内容区，设置此样式限制demo区容器的宽度
|
||||
.md-tiny .n-layout-scroll-container {
|
||||
width: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.n-code pre {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.markdown-body {
|
||||
font-size: 15px;
|
||||
h1, h2, h3 {
|
||||
border-bottom: none;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
code {
|
||||
margin: 0 4px;
|
||||
padding: 0.2em 0.4em;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid rgba(5, 5, 5, 0.06);
|
||||
border-radius: 3px;
|
||||
}
|
||||
pre {
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
a {
|
||||
color: #5073e5;
|
||||
&:hover {
|
||||
color: #69b1ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 以下是提示块的样式
|
||||
.theme-light {
|
||||
.markdown-body {
|
||||
--color-tip-bg: #f3f5f7;
|
||||
--color-tip-fg: #24292f;
|
||||
--color-tip-bd: #3eaf7c;
|
||||
--color-tip-title: #24292f;
|
||||
|
||||
--color-info-bg: #f3f5f7;
|
||||
--color-info-fg: #24292f;
|
||||
--color-info-bd: #476582;
|
||||
--color-info-title: #24292f;
|
||||
|
||||
--color-warning-bg: #ffe5644d;
|
||||
--color-warning-fg: #6b5900;
|
||||
--color-warning-bd: #e7c000;
|
||||
--color-warning-title: #b29400;
|
||||
|
||||
--color-danger-bg: #ffe6e6;
|
||||
--color-danger-fg: #4d0000;
|
||||
--color-danger-bd: #c00;
|
||||
--color-danger-title: #900;
|
||||
}
|
||||
}
|
||||
.theme-dark {
|
||||
.markdown-body {
|
||||
--color-tip-fg: #d3d5d6;
|
||||
--color-tip-bg: #24292f;
|
||||
--color-tip-bd: #3eaf7c;
|
||||
--color-tip-title: #f3f5f7;
|
||||
|
||||
--color-info-fg: #d3d5d6;
|
||||
--color-info-bg: #24292f;
|
||||
--color-info-bd: #476582;
|
||||
--color-info-title: #f3f5f7;
|
||||
|
||||
--color-warning-fg: #ffe564;
|
||||
--color-warning-bg: #6b59004d;
|
||||
--color-warning-bd: #e7c000;
|
||||
--color-warning-title: #b89e1d;
|
||||
|
||||
--color-danger-fg: #f17070;
|
||||
--color-danger-bg: #6b0b0b;
|
||||
--color-danger-bd: #c00;
|
||||
--color-danger-title: #df8686;
|
||||
}
|
||||
}
|
||||
.markdown-body .custom-block.tip,
|
||||
.custom-block.info,
|
||||
.custom-block.warning,
|
||||
.custom-block.danger {
|
||||
margin: 1rem 0;
|
||||
border-left: 0.5rem solid;
|
||||
padding: 0.1rem 1.5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.markdown-body {
|
||||
.custom-block.tip {
|
||||
background-color: var(--color-tip-bg);
|
||||
color: var(--color-tip-fg);
|
||||
border-color: var(--color-tip-bd);
|
||||
.custom-block-title {
|
||||
color: var(--color-tip-title);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.info {
|
||||
background-color: var(--color-info-bg);
|
||||
color: var(--color-info-fg);
|
||||
border-color: var(--color-info-bd);
|
||||
.custom-block-title {
|
||||
color: var(--color-info-title);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.warning {
|
||||
background-color: var(--color-warning-bg);
|
||||
color: var(--color-warning-fg);
|
||||
border-color: var(--color-warning-bd);
|
||||
.custom-block-title {
|
||||
color: var(--color-warning-title);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.danger {
|
||||
background-color: var(--color-danger-bg);
|
||||
color: var(--color-danger-fg);
|
||||
border-color: var(--color-danger-bd);
|
||||
.custom-block-title {
|
||||
color: var(--color-danger-title);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
.markdown-body hr,
|
||||
.markdown-body hr + h2 {
|
||||
display: none;
|
||||
}
|
||||
.theme-dark .markdown-body {
|
||||
color-scheme: dark;
|
||||
--color-prettylights-syntax-comment: #8b949e;
|
||||
--color-prettylights-syntax-constant: #79c0ff;
|
||||
--color-prettylights-syntax-entity: #d2a8ff;
|
||||
--color-prettylights-syntax-storage-modifier-import: #c9d1d9;
|
||||
--color-prettylights-syntax-entity-tag: #7ee787;
|
||||
--color-prettylights-syntax-keyword: #ff7b72;
|
||||
--color-prettylights-syntax-string: #a5d6ff;
|
||||
--color-prettylights-syntax-variable: #ffa657;
|
||||
--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
|
||||
--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
|
||||
--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
|
||||
--color-prettylights-syntax-carriage-return-text: #f0f6fc;
|
||||
--color-prettylights-syntax-carriage-return-bg: #b62324;
|
||||
--color-prettylights-syntax-string-regexp: #7ee787;
|
||||
--color-prettylights-syntax-markup-list: #f2cc60;
|
||||
--color-prettylights-syntax-markup-heading: #1f6feb;
|
||||
--color-prettylights-syntax-markup-italic: #c9d1d9;
|
||||
--color-prettylights-syntax-markup-bold: #c9d1d9;
|
||||
--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
|
||||
--color-prettylights-syntax-markup-deleted-bg: #67060c;
|
||||
--color-prettylights-syntax-markup-inserted-text: #aff5b4;
|
||||
--color-prettylights-syntax-markup-inserted-bg: #033a16;
|
||||
--color-prettylights-syntax-markup-changed-text: #ffdfb6;
|
||||
--color-prettylights-syntax-markup-changed-bg: #5a1e02;
|
||||
--color-prettylights-syntax-markup-ignored-text: #c9d1d9;
|
||||
--color-prettylights-syntax-markup-ignored-bg: #1158c7;
|
||||
--color-prettylights-syntax-meta-diff-range: #d2a8ff;
|
||||
--color-prettylights-syntax-brackethighlighter-angle: #8b949e;
|
||||
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
|
||||
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
|
||||
--color-fg-default: #c9d1d9;
|
||||
--color-fg-muted: #8b949e;
|
||||
--color-fg-subtle: #484f58;
|
||||
--color-canvas-default: #0d1117;
|
||||
--color-canvas-subtle: #161b22;
|
||||
--color-border-default: #30363d;
|
||||
--color-border-muted: #21262d;
|
||||
--color-neutral-muted: rgba(110, 118, 129, 0.4);
|
||||
--color-accent-fg: #58a6ff;
|
||||
--color-accent-emphasis: #1f6feb;
|
||||
--color-attention-subtle: rgba(187, 128, 9, 0.15);
|
||||
--color-danger-fg: #f85149;
|
||||
}
|
||||
.theme-light .markdown-body {
|
||||
color-scheme: light;
|
||||
--color-prettylights-syntax-comment: #6e7781;
|
||||
--color-prettylights-syntax-constant: #0550ae;
|
||||
--color-prettylights-syntax-entity: #8250df;
|
||||
--color-prettylights-syntax-storage-modifier-import: #24292f;
|
||||
--color-prettylights-syntax-entity-tag: #116329;
|
||||
--color-prettylights-syntax-keyword: #cf222e;
|
||||
--color-prettylights-syntax-string: #0a3069;
|
||||
--color-prettylights-syntax-variable: #953800;
|
||||
--color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
|
||||
--color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
|
||||
--color-prettylights-syntax-invalid-illegal-bg: #82071e;
|
||||
--color-prettylights-syntax-carriage-return-text: #f6f8fa;
|
||||
--color-prettylights-syntax-carriage-return-bg: #cf222e;
|
||||
--color-prettylights-syntax-string-regexp: #116329;
|
||||
--color-prettylights-syntax-markup-list: #3b2300;
|
||||
--color-prettylights-syntax-markup-heading: #0550ae;
|
||||
--color-prettylights-syntax-markup-italic: #24292f;
|
||||
--color-prettylights-syntax-markup-bold: #24292f;
|
||||
--color-prettylights-syntax-markup-deleted-text: #82071e;
|
||||
--color-prettylights-syntax-markup-deleted-bg: #ffebe9;
|
||||
--color-prettylights-syntax-markup-inserted-text: #116329;
|
||||
--color-prettylights-syntax-markup-inserted-bg: #dafbe1;
|
||||
--color-prettylights-syntax-markup-changed-text: #953800;
|
||||
--color-prettylights-syntax-markup-changed-bg: #ffd8b5;
|
||||
--color-prettylights-syntax-markup-ignored-text: #eaeef2;
|
||||
--color-prettylights-syntax-markup-ignored-bg: #0550ae;
|
||||
--color-prettylights-syntax-meta-diff-range: #8250df;
|
||||
--color-prettylights-syntax-brackethighlighter-angle: #57606a;
|
||||
--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
|
||||
--color-prettylights-syntax-constant-other-reference-link: #0a3069;
|
||||
--color-fg-default: #24292f;
|
||||
--color-fg-muted: #57606a;
|
||||
--color-fg-subtle: #6e7781;
|
||||
--color-canvas-default: #ffffff;
|
||||
--color-canvas-subtle: #f6f8fa;
|
||||
--color-border-default: #d0d7de;
|
||||
--color-border-muted: hsla(210, 18%, 87%, 1);
|
||||
--color-neutral-muted: rgba(175, 184, 193, 0.2);
|
||||
--color-accent-fg: #0969da;
|
||||
--color-accent-emphasis: #0969da;
|
||||
--color-attention-subtle: #fff8c5;
|
||||
--color-danger-fg: #cf222e;
|
||||
}
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="200px" height="150px" viewBox="0 0 200 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 64 (93537) - https://sketch.com -->
|
||||
<title>插图/无搜索结果/h150px</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
|
||||
<stop stop-color="#E3E9FF" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#F3F5FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="linearGradient-2">
|
||||
<stop stop-color="#E3E9FF" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#F3F5FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="100%" x2="50%" y2="3.061617e-15%" id="linearGradient-3">
|
||||
<stop stop-color="#EEEEEE" stop-opacity="0.458531476" offset="0%"></stop>
|
||||
<stop stop-color="#D8D8D8" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="2.77555756e-15%" x2="50%" y2="95.5100509%" id="linearGradient-4">
|
||||
<stop stop-color="#F3F8FF" offset="0%"></stop>
|
||||
<stop stop-color="#FFFFFF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<polygon id="path-5" points="55.1247166 0 156.854875 0 156.854875 124 55.1247166 124"></polygon>
|
||||
<mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="101.730159" height="124" fill="white">
|
||||
<use xlink:href="#path-5"></use>
|
||||
</mask>
|
||||
<path d="M10.2883803,-1.20977033 L10.2889846,8.09283457 C10.777442,8.53031282 11.08481,9.16585916 11.08481,9.87319512 L11.08481,16.1721767 C11.08481,17.4917447 10.0150888,18.5614658 8.69552088,18.5614658 C7.37595294,18.5614658 6.30623177,17.4917447 6.30623177,16.1721767 L6.30623177,9.87319512 C6.30623177,9.16579282 6.61365737,8.53019361 7.10219456,8.09271149 L7.10266147,-1.20977033 L10.2883803,-1.20977033 Z" id="path-7"></path>
|
||||
<linearGradient x1="100%" y1="50%" x2="-2.22044605e-14%" y2="50%" id="linearGradient-9">
|
||||
<stop stop-color="#EEEEEE" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#D8D8D8" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="46.6153405%" y1="100%" x2="52.3277079%" y2="21.383632%" id="linearGradient-10">
|
||||
<stop stop-color="#5F83FF" offset="0%"></stop>
|
||||
<stop stop-color="#486BF8" offset="56.4722762%"></stop>
|
||||
<stop stop-color="#1F42EB" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="46.3859358%" y1="100%" x2="52.4854748%" y2="21.383632%" id="linearGradient-11">
|
||||
<stop stop-color="#5F83FF" offset="0%"></stop>
|
||||
<stop stop-color="#486BF8" offset="56.4722762%"></stop>
|
||||
<stop stop-color="#1F42EB" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="96.5543714%" x2="50%" y2="0%" id="linearGradient-12">
|
||||
<stop stop-color="#FF9898" offset="0%"></stop>
|
||||
<stop stop-color="#F93F5F" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="100%" y1="35.1501306%" x2="33.5212313%" y2="67.9186442%" id="linearGradient-13">
|
||||
<stop stop-color="#FF9292" offset="0%"></stop>
|
||||
<stop stop-color="#F43D5B" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<radialGradient cx="42.3076923%" cy="47.2972973%" fx="42.3076923%" fy="47.2972973%" r="66.2955035%" gradientTransform="translate(0.423077,0.472973),scale(0.946572,1.000000),rotate(90.000000),translate(-0.423077,-0.472973)" id="radialGradient-14">
|
||||
<stop stop-color="#6FC3FC" stop-opacity="0.1" offset="0%"></stop>
|
||||
<stop stop-color="#6FC3FC" stop-opacity="0.80321558" offset="100%"></stop>
|
||||
</radialGradient>
|
||||
<linearGradient x1="1.86615206%" y1="26.3837766%" x2="57.3197265%" y2="57.7823923%" id="linearGradient-15">
|
||||
<stop stop-color="#F6F8FC" offset="0%"></stop>
|
||||
<stop stop-color="#F8F8F8" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<polygon id="path-16" points="19.0430839 0 38.0861678 27 0 27"></polygon>
|
||||
<linearGradient x1="1.86615206%" y1="26.4184182%" x2="57.3197265%" y2="57.7709767%" id="linearGradient-18">
|
||||
<stop stop-color="#F6F8FC" offset="0%"></stop>
|
||||
<stop stop-color="#F8F8F8" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="100%" y1="50%" x2="-2.22044605e-14%" y2="50%" id="linearGradient-19">
|
||||
<stop stop-color="#EEEEEE" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#EAEAEA" stop-opacity="0.176594111" offset="28.1272579%"></stop>
|
||||
<stop stop-color="#D8D8D8" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<polygon id="path-20" points="19.0430839 0 38.0861678 27 0 27"></polygon>
|
||||
</defs>
|
||||
<g id="插图/无搜索结果/h150px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Group-7" transform="translate(-11.000000, 0.000000)">
|
||||
<path d="M36.5607654,63.5 L36.5607654,71.0791463 L28.5646259,71.0791463 L28.5646259,63.5 L36.5607654,63.5 Z M34.9615375,65.0956098 L30.1638538,65.0956098 L30.1638538,69.4835366 L34.9615375,69.4835366 L34.9615375,65.0956098 Z M38.1599934,65.0956098 L38.1599934,63.5 L41.3584492,63.5 L41.3584492,71.0791463 L39.7592213,71.0791463 L39.7592213,65.0956098 L38.1599934,65.0956098 Z M50.9538167,63.5 L50.9538167,71.0791463 L42.9576771,71.0791463 L42.9576771,63.5 L50.9538167,63.5 Z M49.3545888,65.0956098 L44.556905,65.0956098 L44.556905,69.4835366 L49.3545888,69.4835366 L49.3545888,65.0956098 Z M52.5530446,65.0956098 L52.5530446,63.5 L55.7515005,63.5 L55.7515005,71.0791463 L54.1522726,71.0791463 L54.1522726,65.0956098 L52.5530446,65.0956098 Z M65.346868,63.5 L65.346868,71.0791463 L57.3507284,71.0791463 L57.3507284,63.5 L65.346868,63.5 Z M63.7476401,65.0956098 L58.9499563,65.0956098 L58.9499563,69.4835366 L63.7476401,69.4835366 L63.7476401,65.0956098 Z M66.9460959,65.0956098 L66.9460959,63.5 L70.1445517,63.5 L70.1445517,71.0791463 L68.5453238,71.0791463 L68.5453238,65.0956098 L66.9460959,65.0956098 Z M79.7399193,63.5 L79.7399193,71.0791463 L71.7437797,71.0791463 L71.7437797,63.5 L79.7399193,63.5 Z M78.1406913,65.0956098 L73.3430076,65.0956098 L73.3430076,69.4835366 L78.1406913,69.4835366 L78.1406913,65.0956098 Z M81.3391472,65.0956098 L81.3391472,63.5 L84.537603,63.5 L84.537603,71.0791463 L82.9383751,71.0791463 L82.9383751,65.0956098 L81.3391472,65.0956098 Z M94.1329705,63.5 L94.1329705,71.0791463 L86.1368309,71.0791463 L86.1368309,63.5 L94.1329705,63.5 Z M92.5337426,65.0956098 L87.7360588,65.0956098 L87.7360588,69.4835366 L92.5337426,69.4835366 L92.5337426,65.0956098 Z" id="010101010" fill="#C3CDFF" opacity="0.200000003"></path>
|
||||
<path d="M151.320403,47 L151.320403,54.5791463 L143.324263,54.5791463 L143.324263,47 L151.320403,47 Z M149.721175,48.5956098 L144.923491,48.5956098 L144.923491,52.9835366 L149.721175,52.9835366 L149.721175,48.5956098 Z M152.919631,48.5956098 L152.919631,47 L156.118086,47 L156.118086,54.5791463 L154.518858,54.5791463 L154.518858,48.5956098 L152.919631,48.5956098 Z M165.713454,47 L165.713454,54.5791463 L157.717314,54.5791463 L157.717314,47 L165.713454,47 Z M164.114226,48.5956098 L159.316542,48.5956098 L159.316542,52.9835366 L164.114226,52.9835366 L164.114226,48.5956098 Z M167.312682,48.5956098 L167.312682,47 L170.511138,47 L170.511138,54.5791463 L168.91191,54.5791463 L168.91191,48.5956098 L167.312682,48.5956098 Z M180.106505,47 L180.106505,54.5791463 L172.110366,54.5791463 L172.110366,47 L180.106505,47 Z M178.507277,48.5956098 L173.709593,48.5956098 L173.709593,52.9835366 L178.507277,52.9835366 L178.507277,48.5956098 Z M181.705733,48.5956098 L181.705733,47 L184.904189,47 L184.904189,54.5791463 L183.304961,54.5791463 L183.304961,48.5956098 L181.705733,48.5956098 Z M194.499556,47 L194.499556,54.5791463 L186.503417,54.5791463 L186.503417,47 L194.499556,47 Z M192.900329,48.5956098 L188.102645,48.5956098 L188.102645,52.9835366 L192.900329,52.9835366 L192.900329,48.5956098 Z M196.098784,48.5956098 L196.098784,47 L199.29724,47 L199.29724,54.5791463 L197.698012,54.5791463 L197.698012,48.5956098 L196.098784,48.5956098 Z M208.892608,47 L208.892608,54.5791463 L200.896468,54.5791463 L200.896468,47 L208.892608,47 Z M207.29338,48.5956098 L202.495696,48.5956098 L202.495696,52.9835366 L207.29338,52.9835366 L207.29338,48.5956098 Z" id="010101010-copy-2" fill="url(#linearGradient-1)"></path>
|
||||
<path d="M7.99613959,21.5 L7.99613959,29.0791463 L0,29.0791463 L0,21.5 L7.99613959,21.5 Z M6.39691168,23.0956098 L1.59922792,23.0956098 L1.59922792,27.4835366 L6.39691168,27.4835366 L6.39691168,23.0956098 Z M9.59536751,23.0956098 L9.59536751,21.5 L12.7938234,21.5 L12.7938234,29.0791463 L11.1945954,29.0791463 L11.1945954,23.0956098 L9.59536751,23.0956098 Z M22.3891909,21.5 L22.3891909,29.0791463 L14.3930513,29.0791463 L14.3930513,21.5 L22.3891909,21.5 Z M20.7899629,23.0956098 L15.9922792,23.0956098 L15.9922792,27.4835366 L20.7899629,27.4835366 L20.7899629,23.0956098 Z M23.9884188,23.0956098 L23.9884188,21.5 L27.1868746,21.5 L27.1868746,29.0791463 L25.5876467,29.0791463 L25.5876467,23.0956098 L23.9884188,23.0956098 Z M36.7822421,21.5 L36.7822421,29.0791463 L28.7861025,29.0791463 L28.7861025,21.5 L36.7822421,21.5 Z M35.1830142,23.0956098 L30.3853305,23.0956098 L30.3853305,27.4835366 L35.1830142,27.4835366 L35.1830142,23.0956098 Z M38.3814701,23.0956098 L38.3814701,21.5 L41.5799259,21.5 L41.5799259,29.0791463 L39.980698,29.0791463 L39.980698,23.0956098 L38.3814701,23.0956098 Z M51.1752934,21.5 L51.1752934,29.0791463 L43.1791538,29.0791463 L43.1791538,21.5 L51.1752934,21.5 Z M49.5760655,23.0956098 L44.7783817,23.0956098 L44.7783817,27.4835366 L49.5760655,27.4835366 L49.5760655,23.0956098 Z M52.7745213,23.0956098 L52.7745213,21.5 L55.9729772,21.5 L55.9729772,29.0791463 L54.3737492,29.0791463 L54.3737492,23.0956098 L52.7745213,23.0956098 Z M65.5683447,21.5 L65.5683447,29.0791463 L57.5722051,29.0791463 L57.5722051,21.5 L65.5683447,21.5 Z M63.9691168,23.0956098 L59.171433,23.0956098 L59.171433,27.4835366 L63.9691168,27.4835366 L63.9691168,23.0956098 Z" id="010101010-copy-3" fill="url(#linearGradient-2)"></path>
|
||||
<polygon id="Rectangle-6" fill="url(#linearGradient-3)" opacity="0.149999991" points="54.1680066 0 157.119833 0 176.208475 124 35.0793651 124"></polygon>
|
||||
<use id="Rectangle-6" stroke="#EBEDF1" mask="url(#mask-6)" stroke-width="3" fill="url(#linearGradient-4)" stroke-dasharray="2.000000059604645" xlink:href="#path-5"></use>
|
||||
<g id="Group-6" transform="translate(57.880952, 117.500000) scale(-1, 1) translate(-57.880952, -117.500000) translate(36.081633, 85.000000)">
|
||||
<path d="M28.2296261,38.2605569 C28.2296261,38.2605569 28.2312788,34.1737164 28.7033943,32.4237666 C29.0181379,31.2571333 29.7012168,29.9688607 30.7526309,28.5589486 L31.83972,28.1223579 L30.8308972,26.6258979 L29.9693037,27.3540006 L29.7579594,28.1561286 C26.4648549,31.4644752 25.1521751,33.6185534 25.8199201,34.6183632 C26.8215377,36.118078 28.2296261,38.2605569 28.2296261,38.2605569 Z" id="Path-3" fill="#DBB895" transform="translate(28.745391, 32.443227) rotate(10.000000) translate(-28.745391, -32.443227) "></path>
|
||||
<path d="M18.5419501,1.5 C26.0147009,1.5 32.0725624,7.54415588 32.0725624,15 C32.0725624,22.4558441 26.0147009,28.5 18.5419501,28.5 C11.0691993,28.5 5.01133787,22.4558441 5.01133787,15 C5.01133787,7.54415588 11.0691993,1.5 18.5419501,1.5 Z M18.5419501,5.5 C15.2328381,5.5 12.2804472,7.02384947 10.3512434,9.40659036 C9.81701248,10.6644843 9.52154195,12.0478148 9.52154195,13.5 C9.52154195,19.2989899 14.233212,24 20.0453515,24 C23.3544635,24 26.3068544,22.4761505 28.2360582,20.0934096 C28.7702891,18.8355157 29.0657596,17.4521852 29.0657596,16 C29.0657596,10.2010101 24.3540896,5.5 18.5419501,5.5 Z" id="Combined-Shape" fill="#445FDD"></path>
|
||||
<g id="Path-7" transform="translate(26.058957, 20.500000)">
|
||||
<mask id="mask-8" fill="white">
|
||||
<use xlink:href="#path-7"></use>
|
||||
</mask>
|
||||
<use id="Mask" fill="#6F88FC" transform="translate(8.695521, 8.675848) rotate(-45.000000) translate(-8.695521, -8.675848) " xlink:href="#path-7"></use>
|
||||
<path d="M4.70530082,0.341461958 C5.58806426,5.22050238 6.49520287,8.31316204 7.42671662,9.61944094 C11.4209073,15.2205682 15.576006,16.6860038 15.7564115,17.3710906 C16.1216953,18.7582495 5.84891213,12.6593113 4.70530082,11.3187949 C3.94289327,10.4251173 1.55441655,7.87337775 -2.46012936,3.66357614 L4.70530082,0.341461958 Z" fill="#556DDF" mask="url(#mask-8)"></path>
|
||||
</g>
|
||||
<g id="Group-4" transform="translate(0.000000, 28.500000)">
|
||||
<path d="M15.0340136,36.5 C6.73095716,36.5 0,35.9403559 0,35.25 C0,34.5596441 6.73095716,34 15.0340136,34 C23.33707,34 30.0680272,34.5596441 30.0680272,35.25 C30.0680272,35.9403559 23.33707,36.5 15.0340136,36.5 Z" id="Oval-7" fill="url(#linearGradient-9)" transform="translate(15.034014, 35.250000) scale(-1, 1) translate(-15.034014, -35.250000) "></path>
|
||||
<path d="M21.7464657,33.6106629 L21.5487528,34.0530515 L21.5487528,35 L26.0589569,35 L26.0589569,34.25254 C24.9236974,34.2419438 24.2317481,34.1094921 23.9831092,33.8551849 C23.8840685,33.7538864 23.7445063,33.5679178 23.4877789,33.5214548 C23.2292588,33.4746674 22.6488211,33.5044034 21.7464657,33.6106629 Z" id="Path-13-Copy" fill="#4C555E"></path>
|
||||
<path d="M26.2566698,33.6106629 L26.0589569,34.0530515 L26.0589569,35 L30.569161,35 L30.569161,34.25254 C29.4339014,34.2419438 28.7419522,34.1094921 28.4933133,33.8551849 C28.3942726,33.7538864 28.2547104,33.5679178 27.9979829,33.5214548 C27.7394629,33.4746674 27.1590252,33.5044034 26.2566698,33.6106629 Z" id="Path-13" fill="#545C65"></path>
|
||||
<path d="M20.557522,18 C20.5033429,19.749601 20.6486368,21.0598804 20.9934035,21.9308383 C21.5105536,23.2372752 22.6238114,25.7369508 22.6238114,26.230143 C22.6238114,26.5589378 22.5611845,28.9822235 22.4359308,33.5 L23.9288093,33.4128768 L25.5578231,26.38537 L24.2749671,18.4399891 L20.557522,18 Z" id="Path-10" fill="url(#linearGradient-10)"></path>
|
||||
<path d="M23.0521542,19.8845313 C23.0521542,19.8845313 23.9903511,22.3534861 25.8667451,27.2913959 L26.2350294,33.5 L27.5821673,33.5 C28.2371397,28.9329281 28.5646259,26.5549059 28.5646259,26.3659334 C28.5646259,26.1769609 28.4093403,23.0549831 28.0987691,17 C24.7343592,18.9230208 23.0521542,19.8845313 23.0521542,19.8845313 Z" id="Path-9" fill="url(#linearGradient-11)"></path>
|
||||
<path d="M38.6066941,4.71782862 L39.2699186,4.01171806 L39.5895692,2 L39.1713709,2 L38.4085074,3.33661524 L38.0290902,2.77108498 L37.623819,2.77108498 L37.623819,4.226405 C36.0243882,6.03743527 35.0279382,7.00828067 34.634469,7.13894121 C34.2409998,7.26960174 33.3870309,7.38722089 32.0725624,7.49179865 L33.2097352,10 C34.8161897,9.3093305 35.6797139,8.90646565 35.8003079,8.79140545 C35.9209019,8.67634525 36.856364,7.31848631 38.6066941,4.71782862 Z" id="Path-11" fill="#F6D3B1"></path>
|
||||
<path d="M27.5270571,8.16566046 C26.8910798,7.03414704 26.2313252,6.47912684 25.5477934,6.50059987 C24.2825631,6.54034684 22.3547634,9.26879571 21.8333754,11.2474931 C20.8187483,15.0980613 20.3836763,17.2102088 20.6012123,18.9401742 C20.8187483,20.6701396 27.0832297,19.8574593 28.351909,19.444838 C28.9034353,19.2654613 28.2264221,17.3303823 28.351909,15.4940135 C28.4671184,13.8080438 28.8190836,12.009391 28.81285,11.2474931 C29.3973371,11.0596436 28.9687395,10.032366 27.5270571,8.16566046 Z" id="Path-8" fill="url(#linearGradient-12)"></path>
|
||||
<g id="Group-3" transform="translate(26.560091, 4.500000) rotate(-370.000000) translate(-26.560091, -4.500000) translate(23.553288, 0.500000)">
|
||||
<path d="M1.28301408,5.05263158 C1.3016471,5.41208736 1.2787934,5.65658232 1.21445297,5.78611646 C1.07502764,6.06681618 0.454765506,6.48551129 0.311421424,6.75424448 C0.228467911,6.90976093 1.13872054,7.45430046 1.60893459,7.65190538 C1.95125274,7.79576273 2.83149712,7.74655729 3.04716819,7.69497813 C3.55908873,7.57254897 3.20628297,6.38021158 3.2072553,5.806815 C3.20790352,5.42455061 2.87218872,5.18895954 2.20011091,5.10004179 L1.28301408,5.05263158 Z" id="Path-4" fill="#E3B68F"></path>
|
||||
<path d="M3.20880697,6.72752266 C1.97276944,6.85466315 0.595476647,5.66652899 0.421229448,4.04405548 C0.246982249,2.42158197 1.21251269,0.992461838 2.57780204,0.852026325 C3.5932577,0.747575179 4.58812497,1.48133426 5.08011127,2.41886528 C5.24960502,2.74185322 5.17192111,2.85780669 5.21619765,3.13270642 C5.24189673,3.2922643 5.32179309,3.39031848 5.53922108,4.10720131 C5.55065577,4.14490267 5.62291063,4.54750635 5.61147594,4.74774824 L5.00479191,4.76724829 C4.09868978,4.76724829 4.02163659,6.6439139 3.20880697,6.72752266 Z" id="Oval-5" fill="#F6D3B1"></path>
|
||||
<path d="M4.26976572,2.7024724 C3.81616849,2.81109552 3.21996471,2.94242773 2.84083295,3.30170872 C2.4617012,3.66098971 2.96576249,5.15699891 3.36303943,5.15699891 C3.76031637,5.15699891 3.93549182,5.07516795 4.12072458,4.79865926 C4.24421308,4.61432013 4.58897724,4.52457618 5.15501705,4.52942742 C5.15501705,4.88220608 5.15501705,5.21176337 5.15501705,5.51809931 C5.15501705,5.97760321 5.31889487,7.40419663 4.01451546,7.57116298 C2.71013605,7.73812933 2.09612785,5.16884434 2.09612785,4.69749501 C2.09612785,4.22614568 1.97878266,3.46320237 1.38679312,3.30170872 C0.794803577,3.14021507 0.863497458,4.08322256 1.14293068,4.88049022 C1.29369583,5.31064729 1.38679312,5.55841296 1.38679312,6.01552262 C1.38679312,6.47263228 0.822986891,5.69835555 0.725552368,5.29753016 C0.628117845,4.89670477 0,3.74417041 0,2.62843961 C0,1.51270881 1.65202227,0 2.84083295,0 C4.02964363,0 5.07409873,0.710324837 5.83408842,1.79904298 C6.5940781,2.88776112 4.72336296,2.59384929 4.26976572,2.7024724 Z" id="Path-18" fill="#303D4C"></path>
|
||||
</g>
|
||||
<path d="M31.905767,7.56433911 C30.5665152,8.11016224 29.8870871,7.56433911 28.1085194,7.56433911 C23.8138186,7.56433911 27.5071336,11.4779933 28.1085194,11.8880329 C28.7099052,12.2980724 30.8818987,11.5327551 33.3619688,10.3928499 C33.9617789,10.1171614 33.2450187,7.01851598 31.905767,7.56433911 Z" id="Path-8" fill="url(#linearGradient-13)"></path>
|
||||
</g>
|
||||
<path d="M20.0453515,0 C27.5181023,0 33.5759637,6.04415588 33.5759637,13.5 C33.5759637,20.9558441 27.5181023,27 20.0453515,27 C12.5726007,27 6.51473923,20.9558441 6.51473923,13.5 C6.51473923,6.04415588 12.5726007,0 20.0453515,0 Z M18.5419501,5.5 C15.2328381,5.5 12.2804472,7.02384947 10.3512434,9.40659036 C9.81701248,10.6644843 9.52154195,12.0478148 9.52154195,13.5 C9.52154195,19.2989899 14.233212,24 20.0453515,24 C23.3544635,24 26.3068544,22.4761505 28.2360582,20.0934096 C28.7702891,18.8355157 29.0657596,17.4521852 29.0657596,16 C29.0657596,10.2010101 24.3540896,5.5 18.5419501,5.5 Z" id="Combined-Shape" fill="#617DFD"></path>
|
||||
<path d="M20.2179176,3 C26.0300571,3 30.7417271,7.70101013 30.7417271,13.5 C30.7417271,15.9967422 29.8683183,18.2899504 28.409715,20.0920622 C28.9431657,18.8340618 29.2383257,17.4514221 29.2383257,16 C29.2383257,10.2010101 24.5266557,5.5 18.7145162,5.5 C15.4054042,5.5 12.4530133,7.02384947 10.5238095,9.40659036 C12.1250369,5.63985591 15.8624925,3 20.2179176,3 Z" id="Combined-Shape" fill="#445FDD"></path>
|
||||
<path d="M18.5419501,5.5 C24.3540896,5.5 29.0657596,10.2010101 29.0657596,16 C29.0657596,16.2739264 29.0552464,16.5454029 29.0346004,16.8140496 L29.034653,16.8133648 C29.0140506,17.0814457 28.9834623,17.3460385 28.9432107,17.6074533 L28.9431124,17.6080916 C28.8726021,18.0660228 28.7722583,18.5148134 28.6442054,18.9518037 C28.6035656,19.0904759 28.5602268,19.2276899 28.5141731,19.3636561 L28.5893529,19.1328717 C28.5592827,19.2289739 28.5278657,19.3244828 28.4951239,19.4193765 L28.5141731,19.3636561 C28.4755785,19.4776006 28.4350771,19.5906686 28.3927069,19.7028225 L28.4951239,19.4193765 C28.4549993,19.5356671 28.412885,19.6510339 28.3688217,19.7654362 L28.3927069,19.7028225 C28.3454644,19.8278732 28.2958985,19.9517874 28.2440618,20.0745127 L28.2440411,20.0745616 L28.2355497,20.0946066 L28.2355497,20.0946066 C26.3068544,22.4761505 23.3544635,24 20.0453515,24 C14.233212,24 9.52154195,19.2989899 9.52154195,13.5 C9.52154195,12.0485779 9.81670203,10.6659382 10.3504014,9.40857349 C10.425599,9.31472348 10.5026109,9.2228231 10.5811487,9.13227645 C10.7109732,8.98261838 10.844541,8.83709698 10.9820731,8.6954296 L11.1947375,8.48251637 C11.2679537,8.41127076 11.3422068,8.34108101 11.4174721,8.27197177 L11.2724362,8.40767645 C11.3373659,8.34577076 11.4030885,8.28468591 11.4695871,8.22443857 L11.4174721,8.27197177 C11.4909328,8.20451957 11.5653576,8.13809668 11.6407238,8.07272604 L11.4695871,8.22443857 C11.552396,8.1494143 11.6364083,8.07568877 11.7215917,8.00329424 L11.6407238,8.07272604 C11.7161273,8.00732296 11.7924731,7.94297317 11.869738,7.87969963 L11.7215917,8.00329424 C11.7963271,7.93977917 11.871964,7.87728862 11.9484805,7.81584434 L11.869738,7.87969963 C11.9425791,7.82004882 12.0162371,7.76135455 12.0906928,7.70363606 L11.9484805,7.81584434 C12.027129,7.75268807 12.1067068,7.6906372 12.1871903,7.62971537 L12.1869016,7.6299339 C12.4446485,7.43483292 12.7113742,7.2515039 12.9865917,7.08050229 L12.9266856,7.11800308 C13.0069216,7.06740052 13.0878907,7.0178504 13.1695734,6.96937213 L12.9865917,7.08050229 C13.0794809,7.02278725 13.1733374,6.96647647 13.2681314,6.91159971 L13.1695734,6.96937213 C13.2414618,6.92670676 13.313903,6.88487162 13.3868836,6.84387995 L13.3868479,6.84390001 L13.5403517,6.75935495 L13.5403517,6.75935495 L13.7856581,6.6310476 C13.9127451,6.56669416 14.0413173,6.50483917 14.1713099,6.44554741 L14.0469616,6.50324993 C14.1292426,6.46441252 14.2121093,6.42660827 14.2955448,6.38985394 L14.1713099,6.44554741 C14.2662133,6.40226043 14.3618738,6.36033965 14.458266,6.31981028 L14.2955448,6.38985394 C14.3864781,6.34979669 14.4780871,6.31098655 14.57035,6.27344526 L14.458266,6.31981028 C14.544024,6.28375221 14.6303612,6.24879547 14.7172599,6.21495784 L14.57035,6.27344526 C14.6817739,6.22810744 14.7941514,6.18462021 14.9074441,6.14302185 L14.7172599,6.21495784 C14.8038525,6.18123938 14.8910026,6.14863215 14.9786925,6.11715371 L14.9786968,6.11715218 C15.2096713,6.03423826 15.4443958,5.95915457 15.6825443,5.8922237 L15.5600448,5.92745857 C15.6468884,5.90190553 15.7341994,5.87744011 15.8219618,5.85407811 L15.6825443,5.8922237 C15.7826322,5.86409434 15.8833247,5.83740502 15.9845982,5.81217958 L15.8219618,5.85407811 C15.9357742,5.82378171 16.0503459,5.79534099 16.1656424,5.76879042 L15.9845982,5.81217958 C16.0717089,5.79048184 16.1592493,5.76986717 16.2472043,5.75035073 L16.1656424,5.76879042 C16.2582184,5.74747191 16.3512618,5.72737201 16.4447544,5.70850856 L16.2472043,5.75035073 C16.3573375,5.72591314 16.4681207,5.70319746 16.5795241,5.68223346 L16.4447544,5.70850856 C16.534698,5.69036118 16.6250575,5.67335815 16.7158169,5.65751537 L16.7152153,5.65762041 C16.8729432,5.63008773 17.0312682,5.60613755 17.1907094,5.58574726 L16.930347,5.62234903 C17.0220898,5.60828216 17.1142231,5.59539739 17.2067309,5.5837108 L17.1907094,5.58574726 C17.2935424,5.57259637 17.3968397,5.56092629 17.5005791,5.55075915 L17.2067309,5.5837108 C17.3252067,5.56874365 17.4442967,5.55574179 17.5639671,5.54473899 L17.5005791,5.55075915 C17.5982142,5.54119027 17.6962409,5.53295266 17.7946407,5.52606474 L17.5639671,5.54473899 C17.6848824,5.53362172 17.8063901,5.52454533 17.9284554,5.51754464 L17.7946407,5.52606474 C17.9042193,5.51839432 18.0142607,5.51239768 18.1247393,5.50810029 L17.9284554,5.51754464 C18.023596,5.51208814 18.1190752,5.50789263 18.2148767,5.50497462 L18.2148795,5.50497454 L18.5419501,5.5 L18.5419501,5.5 Z" id="Combined-Shape" fill="url(#radialGradient-14)"></path>
|
||||
</g>
|
||||
<path d="M61.2499144,120.194051 C61.6392874,120.194051 61.9549366,120.508986 61.9549366,120.897478 C61.9549366,121.28597 61.6392874,121.600905 61.2499144,121.600905 C60.8605414,121.600905 60.5448922,121.28597 60.5448922,120.897478 C60.5448922,120.508986 60.8605414,120.194051 61.2499144,120.194051 Z M61.4549366,115.621775 C61.731079,115.621775 61.9549366,115.845632 61.9549366,116.121775 L61.9549366,118.08377 L61.6024255,119.490624 L60.8974033,119.490624 L60.5448922,118.08377 L60.5448922,116.121775 C60.5448922,115.845632 60.7687499,115.621775 61.0448922,115.621775 L61.4549366,115.621775 Z" id="Combined-Shape" fill="#B4C1FD" transform="translate(61.249914, 118.611340) rotate(-315.000000) translate(-61.249914, -118.611340) "></path>
|
||||
<path d="M64.9285616,120.961564 C65.2331348,120.961564 65.4800401,121.20791 65.4800401,121.511794 C65.4800401,121.815679 65.2331348,122.062025 64.9285616,122.062025 C64.6239884,122.062025 64.3770831,121.815679 64.3770831,121.511794 C64.3770831,121.20791 64.6239884,120.961564 64.9285616,120.961564 Z M64.9800401,117.385063 C65.2561825,117.385063 65.4800401,117.608921 65.4800401,117.885063 L65.4800401,119.310871 L65.2043009,120.411333 L64.6528223,120.411333 L64.3770831,119.310871 L64.3770831,117.885063 C64.3770831,117.608921 64.6009407,117.385063 64.8770831,117.385063 L64.9800401,117.385063 Z" id="Combined-Shape-Copy" fill="#B4C1FD" transform="translate(64.928562, 119.723544) rotate(-299.000000) translate(-64.928562, -119.723544) "></path>
|
||||
<path d="M87.9568718,67.0015434 L164.119495,67.0443491 C164.395418,67.0445042 164.619059,67.2681453 164.619214,67.5440683 L164.648414,119.551835 C164.648569,119.827978 164.424837,120.051961 164.148695,120.052116 C164.148507,120.052116 164.14832,120.052116 164.148133,120.052116 L87.98551,120.00931 C87.709587,120.009155 87.485946,119.785514 87.4857911,119.509591 L87.4565909,67.5018241 C87.4564358,67.2256818 87.6801677,67.0016985 87.9563101,67.0015434 C87.9564973,67.0015433 87.9566846,67.0015433 87.9568718,67.0015434 Z" id="Rectangle-10-Copy" fill="url(#linearGradient-15)" transform="translate(126.052502, 93.526830) rotate(-15.000000) translate(-126.052502, -93.526830) "></path>
|
||||
<g id="Group-5" transform="translate(123.278912, 97.500000) rotate(-15.000000) translate(-123.278912, -97.500000) translate(84.691610, 71.000000)">
|
||||
<rect id="Rectangle-10" stroke="#EBEDF1" fill="#FFFFFF" x="0.5" y="0.5" width="76.1746032" height="52" rx="0.5"></rect>
|
||||
<g id="Triangle" transform="translate(31.571429, 19.000000)">
|
||||
<mask id="mask-17" fill="white">
|
||||
<use xlink:href="#path-16"></use>
|
||||
</mask>
|
||||
<use id="Mask" fill="#EEF3FF" xlink:href="#path-16"></use>
|
||||
<polygon fill="#FFFFFF" mask="url(#mask-17)" points="2.55456004 -11.440678 26.4745313 27 -21.3654112 27"></polygon>
|
||||
</g>
|
||||
<ellipse id="Oval" fill="#EEF3FF" cx="62.6417234" cy="11.5" rx="5.51247166" ry="5.5"></ellipse>
|
||||
<polygon id="Triangle" fill="#EEF3FF" points="31.3208617 7.5 55.1247166 46 7.5170068 46"></polygon>
|
||||
</g>
|
||||
<rect id="Rectangle-10" fill="url(#linearGradient-18)" x="108.746032" y="77.5" width="77.1746032" height="53" rx="0.5"></rect>
|
||||
<rect id="Rectangle-11" fill="url(#linearGradient-19)" x="137.310658" y="125.5" width="83.6893424" height="8"></rect>
|
||||
<g id="Group-5" transform="translate(103.734694, 80.500000)">
|
||||
<rect id="Rectangle-10" stroke="#EBEDF1" fill="#FFFFFF" x="0.5" y="0.5" width="76.1746032" height="52" rx="0.5"></rect>
|
||||
<g id="Triangle" transform="translate(31.571429, 19.000000)">
|
||||
<mask id="mask-21" fill="white">
|
||||
<use xlink:href="#path-20"></use>
|
||||
</mask>
|
||||
<use id="Mask" fill="#EEF3FF" xlink:href="#path-20"></use>
|
||||
<polygon fill="#FFFFFF" mask="url(#mask-21)" points="2.55456004 -11.440678 26.4745313 27 -21.3654112 27"></polygon>
|
||||
</g>
|
||||
<ellipse id="Oval" fill="#EEF3FF" cx="62.6417234" cy="11.5" rx="5.51247166" ry="5.5"></ellipse>
|
||||
<polygon id="Triangle" fill="#EEF3FF" points="31.3208617 7.5 55.1247166 46 7.5170068 46"></polygon>
|
||||
</g>
|
||||
<rect id="Rectangle-11-Copy-3" fill="#E5EBF5" x="98.2222222" y="20" width="47.6077098" height="7"></rect>
|
||||
<rect id="Rectangle-11-Copy-5" fill="#E5EBF5" x="66.1496599" y="20" width="25.0566893" height="21.5"></rect>
|
||||
<rect id="Rectangle-11-Copy-4" fill="#E5EBF5" x="98.2222222" y="34.5" width="32.0725624" height="7"></rect>
|
||||
<path d="" id="Path-122" stroke="#979797" stroke-width="0.5"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 28 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 512 512"
|
||||
fill="#c2c2c2"
|
||||
enable-background="new 0 0 512 512"
|
||||
xml:space="preserve">
|
||||
<path
|
||||
d="M443.5,420.2L336.7,312.4c20.9-26.2,33.5-59.4,33.5-95.5c0-84.5-68.5-153-153.1-153S64,132.5,64,217s68.5,153,153.1,153
|
||||
c36.6,0,70.1-12.8,96.5-34.2l106.1,107.1c3.2,3.4,7.6,5.1,11.9,5.1c4.1,0,8.2-1.5,11.3-4.5C449.5,437.2,449.7,426.8,443.5,420.2z
|
||||
M217.1,337.1c-32.1,0-62.3-12.5-85-35.2c-22.7-22.7-35.2-52.9-35.2-84.9c0-32.1,12.5-62.3,35.2-84.9c22.7-22.7,52.9-35.2,85-35.2
|
||||
c32.1,0,62.3,12.5,85,35.2c22.7,22.7,35.2,52.9,35.2,84.9c0,32.1-12.5,62.3-35.2,84.9C279.4,324.6,249.2,337.1,217.1,337.1z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 772 B |
|
|
@ -0,0 +1,67 @@
|
|||
// 重置代码
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
scroll-behavior: smooth;
|
||||
font-size: 12px;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:root {
|
||||
--white: #fff;
|
||||
--black: #000;
|
||||
--main: #2b292d; // 主字体色
|
||||
--mainless: #2c2e30;
|
||||
--second: #7e8085; // 次级字色
|
||||
--secondless: lighten(#7e8085, 20%); // 次级字色
|
||||
|
||||
--light: #f6f8f9; // 非常浅的背景色
|
||||
--lightless: #f1f2f3; // 非常浅的
|
||||
|
||||
--primary: #2f5bea; // 四个主色
|
||||
--success: #5073e5;
|
||||
--warning: #ffbe0e;
|
||||
--error: #ee343f;
|
||||
--primaryless: lighten(#2f5bea, 20%); // 四个主色的浅色，比如鼠标移上时
|
||||
--successless: lighten(#5073e5, 20%);
|
||||
--warningless: lighten(#ffbe0e, 20%);
|
||||
--errorless: lighten(#ee343f, 20%);
|
||||
|
||||
--border-style: solid;
|
||||
--border-color: #ddd;
|
||||
--border-width: 1px;
|
||||
--radius-sm: 5px;
|
||||
--radius-lg: 30px;
|
||||
--shadow-sm: 0px 1px 3px 3px RGBA(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0px 6px 18px 18px RGBA(0, 0, 0, 0.1);
|
||||
|
||||
--text-shadow-sm: rgb(0, 0, 0, 0.4) 0px 1px 3px;
|
||||
--text-shadow-lg: rgb(0, 0, 0, 0.4) 0px 6px 3px;
|
||||
|
||||
--mask: fade(#000, 45%);
|
||||
--trans-time: 0.4s;
|
||||
--trans-time-slow: 1s;
|
||||
|
||||
// echarts 的9种颜色
|
||||
--c0: #efefef;
|
||||
--c1: #5470c6;
|
||||
--c2: #91cc75;
|
||||
--c3: #fac858;
|
||||
--c4: #ee6666;
|
||||
--c5: #73c0de;
|
||||
--c6: #3ba272;
|
||||
--c7: #fc8452;
|
||||
--c8: #9a60b4;
|
||||
--c9: #ea7ccc;
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
--lightless: #3d3d3d; // 非常浅的
|
||||
--border-color: #6b6a6a;
|
||||
}
|
||||
|
||||
[draggable='true'] {
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"dark": "Dark",
|
||||
"light": "Light",
|
||||
"searchPlaceholder": "Search",
|
||||
"home": "Home",
|
||||
"doc": "Docs",
|
||||
"component": "Components",
|
||||
"common": "Common",
|
||||
"apiPreference": "Framework",
|
||||
"apiTiny": "Vue",
|
||||
"yan-shi": "Demo",
|
||||
"name": "Name",
|
||||
"propType": "Type",
|
||||
"defValue": "Default",
|
||||
"typeValue": "Option Value",
|
||||
"desc": "Description",
|
||||
"showCode": "Show Code",
|
||||
"hideCode": "Hide Code",
|
||||
"copyCode": "Copy Code",
|
||||
"doc-owner": "Owner",
|
||||
"copyCodeOk": "Copy Success",
|
||||
"frameAngular": "Angular"
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { createI18n } from 'vue-i18n';
|
||||
|
||||
import { $local } from '../tools';
|
||||
import zh from './zh.json';
|
||||
import en from './en.json';
|
||||
const messages = { enUS: en, zhCN: zh };
|
||||
$local._lang = $local._lang !== 'zhCN' && $local._lang !== 'enUS' ? 'zhCN' : $local._lang;
|
||||
const i18n = createI18n({
|
||||
locale: $local._lang, // set locale
|
||||
fallbackLocale: 'zhCN', // set fallback locale
|
||||
messages, // set locale messages
|
||||
});
|
||||
const $t = i18n.global.t;
|
||||
const $t2 = (cn, en) => (i18n.global.locale === 'zhCN' ? cn : en);
|
||||
|
||||
export { i18n, $t, $t2 };
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"dark": "深色",
|
||||
"light": "浅色",
|
||||
"searchPlaceholder": "搜索",
|
||||
"home": "首页",
|
||||
"doc": "文档",
|
||||
"component": "组件",
|
||||
"common": "常规",
|
||||
"apiPreference": "框架选择",
|
||||
"apiTiny": "Vue",
|
||||
"yan-shi": "演示",
|
||||
"name": "名称",
|
||||
"propType": "类型",
|
||||
"defValue": "默认值",
|
||||
"typeValue": "可选值",
|
||||
"desc": "说明",
|
||||
"hideCode": "收起代码",
|
||||
"showCode": "显示代码",
|
||||
"copyCode": "复制代码",
|
||||
"doc-owner": "负责人",
|
||||
"copyCodeOk": "复制成功",
|
||||
"frameAngular": "Angular"
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { createHead } from '@vueuse/head';
|
||||
import { createApp } from 'vue';
|
||||
import '@unocss/reset/eric-meyer.css';
|
||||
// markdown文件内代码高亮
|
||||
import 'prismjs/themes/prism.css';
|
||||
import 'uno.css';
|
||||
// markdown样式引用的是github-markdown.css
|
||||
import 'github-markdown-css/github-markdown.css';
|
||||
import './assets/index.less';
|
||||
// 覆盖默认的github markdown样式
|
||||
import './assets/custom-markdown.css';
|
||||
import './assets/custom-block.less';
|
||||
import { i18n } from './i18n/index';
|
||||
import { router } from './router';
|
||||
import App from './App.vue';
|
||||
import { $t, $t2 } from './i18n';
|
||||
import { $pub } from './tools';
|
||||
import demoConfig from '@demos/config.js';
|
||||
|
||||
let app = createApp(App);
|
||||
app.config.performance = true;
|
||||
app
|
||||
.use(router)
|
||||
.use(i18n)
|
||||
.use(createHead()) // 支持md修改title
|
||||
.mixin({ methods: { $t, $t2, $pub } });
|
||||
|
||||
if (typeof demoConfig.initApp === 'function') {
|
||||
demoConfig.initApp(app);
|
||||
}
|
||||
|
||||
app.mount('#app');
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import { docMenus, cmpMenus } from '@demos/webdoc/menus.js';
|
||||
|
||||
import { appData, $t2 } from './tools';
|
||||
|
||||
/**
|
||||
* 聚合doc / cmp 两个页面的所有菜单.
|
||||
* 根据menus,生成总的menuOptions, doc的路由指向docs/:docId, 组件的路由指向components/:cmpId
|
||||
* 1、docId 必须匹配doc_md中的文件名 ， cmpId必须匹配 cmp_md 中的文件名
|
||||
*/
|
||||
const getTo = (route, key) => `${import.meta.env.VITE_CONTEXT}${route}${key}`;
|
||||
const getTitle = page => `${page.name} ${$t2(page.nameCn, '')}`;
|
||||
|
||||
// 生成所有的菜单
|
||||
function genMenus() {
|
||||
const standaloneOptions = [
|
||||
{
|
||||
key: 'overview',
|
||||
label: () => (
|
||||
<router-link to={`${import.meta.env.VITE_CONTEXT}overview`} title="组件总览">
|
||||
<span> 组件总览 </span>
|
||||
</router-link>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const docOptions = docMenus.map(menu => ({
|
||||
...menu,
|
||||
children: menu.children.map(page => ({
|
||||
key: page.key,
|
||||
label: () => (
|
||||
<router-link to={getTo('docs/', page.key)} title={page.title}>
|
||||
<span> {page.title} </span>
|
||||
</router-link>
|
||||
),
|
||||
})),
|
||||
}));
|
||||
const cmpOptions = cmpMenus.map(menu => ({
|
||||
...menu,
|
||||
children: menu.children.map(page => ({
|
||||
key: page.key,
|
||||
label: () => (
|
||||
<router-link to={getTo('components/', page.key)} title={getTitle(page)}>
|
||||
<span>
|
||||
{page.name}
|
||||
{appData.lang === 'zhCN' && <span class="c-second f12 pl4"> {page.nameCn} </span>}
|
||||
</span>
|
||||
</router-link>
|
||||
),
|
||||
})),
|
||||
}));
|
||||
return [...standaloneOptions, ...docOptions, ...cmpOptions];
|
||||
}
|
||||
|
||||
export { genMenus };
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import Layout from '@/views/layout/layout.vue';
|
||||
import Components from '@/views/components/components.vue'
|
||||
import DemoPage from '@/views/components/demoPage.vue'
|
||||
import Docs from '@/views/docs/docs.vue'
|
||||
import Overview from '@/views/overview.vue'
|
||||
|
||||
let routes = [
|
||||
// 组件总览
|
||||
{
|
||||
path: import.meta.env.VITE_CONTEXT + 'overview',
|
||||
component: Layout,
|
||||
name: 'overview',
|
||||
children: [{ path: '', component: Overview, meta: { title: '组件总览 | TinyVue' } }],
|
||||
},
|
||||
// 文档
|
||||
{
|
||||
path: import.meta.env.VITE_CONTEXT + 'docs/:docId',
|
||||
component: Layout,
|
||||
name: 'docs',
|
||||
children: [{ path: '', component: Docs }],
|
||||
},
|
||||
// 组件
|
||||
{
|
||||
path: import.meta.env.VITE_CONTEXT + 'components/:cmpId',
|
||||
component: Layout,
|
||||
name: 'components',
|
||||
children: [{ path: '', component: Components }],
|
||||
},
|
||||
//单组件示例
|
||||
{
|
||||
path: import.meta.env.VITE_CONTEXT + 'demoPage/:cmpId/:demoId',
|
||||
component: DemoPage,
|
||||
name: 'demoPage',
|
||||
},
|
||||
// 未匹配到目标地址时，进行路由重定向
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
redirect: { path: import.meta.env.VITE_CONTEXT + 'overview' },
|
||||
},
|
||||
];
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
// 为浏览器添加title
|
||||
router.afterEach((to, from) => {
|
||||
if (to.meta.title) {
|
||||
document.title = to.meta.title;
|
||||
}
|
||||
});
|
||||
export { router };
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { reactive, computed, watchEffect } from 'vue';
|
||||
|
||||
import { useAutoStore } from './storage';
|
||||
import { useMediaQuery } from './useMediaQuery';
|
||||
|
||||
const appData = reactive({
|
||||
lang: useAutoStore('local', '_lang', 'zhCN'),
|
||||
theme: useAutoStore('local', '_theme', 'light'),
|
||||
configMode: false,
|
||||
configType: computed(() => 'tiny'),
|
||||
bpState: useMediaQuery([640, 1024, 1280]).matches, // 3点4区间， bp0,bp1,bp2,bp3
|
||||
});
|
||||
let appFn = {
|
||||
toggleLang() {
|
||||
appData.lang = appData.lang === 'zhCN' ? 'enUS' : 'zhCN';
|
||||
location.reload();
|
||||
},
|
||||
toggleTheme() {
|
||||
appData.theme = appData.theme === 'light' ? 'dark' : 'light';
|
||||
},
|
||||
};
|
||||
// 减少页面处理
|
||||
watchEffect(() => {
|
||||
document.body.classList.remove('theme-light', 'theme-dark');
|
||||
document.body.classList.add('theme-' + appData.theme);
|
||||
});
|
||||
// 为了和tiny-vue共享同一个响应变量
|
||||
window.appData = appData;
|
||||
export { appData, appFn };
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export * from './storage.js';
|
||||
export * from './utils.js';
|
||||
export * from '@/i18n/index';
|
||||
export * from './appData.js';
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import { ref, watch } from 'vue';
|
||||
|
||||
function parse(str) {
|
||||
if (str === null) return undefined;
|
||||
const type = str[0];
|
||||
const strVal = str.slice(1);
|
||||
// 对象时，有可能是Date, 否则反解析后统一是对象
|
||||
if (type === 'o' || type === 'b') {
|
||||
let val = JSON.parse(strVal);
|
||||
return typeof val === 'string' ? new Date(val) : val;
|
||||
}
|
||||
if (type === 'n') return +Number(strVal);
|
||||
if (type === 's') return strVal;
|
||||
}
|
||||
|
||||
// 带前缀的保存值
|
||||
function save(store, k, v) {
|
||||
const type = typeof v;
|
||||
store.setItem(k, type === 'object' ? JSON.stringify(v) : v);
|
||||
}
|
||||
|
||||
/**
|
||||
* 快速的保存值到 sessionStorage, localStorage.
|
||||
* 支持基本类型，时间，数组，对象,null，不存在的键值返回undefined 。
|
||||
* 不支持：Map,Set, 以及多级串联赋值，比如：$session.obj.name="abcd"
|
||||
*/
|
||||
function handler(storage) {
|
||||
return {
|
||||
get: function (target, propKey, receiver) {
|
||||
return storage.getItem(propKey);
|
||||
},
|
||||
set: function (target, propKey, value) {
|
||||
save(storage, propKey, value);
|
||||
return true;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/** * 快速读写sessionStorage 示例： $session.abc="shen" */
|
||||
const $session = new Proxy({}, handler(sessionStorage));
|
||||
|
||||
/** * 快速读写 localStorage 示例： $local.abc="shen" */
|
||||
const $local = new Proxy({}, handler(localStorage));
|
||||
|
||||
/** * 全局共享值，刷新即丢失！ 示例： $cache.abc="shen" */
|
||||
const $cache = {};
|
||||
|
||||
const typeMatcher = { session: $session, local: $local, api: null };
|
||||
|
||||
/**
|
||||
* 用于记录用户行为,并保存到session,local 或api接口（api保存的功能还未实现）
|
||||
* 示例：useAutoStore("session","key1")
|
||||
* useAutoStore("session","key2",100)
|
||||
* useAutoStore("session","key2",$session.key2 || 100)
|
||||
* @param type 自动存储到的目标
|
||||
* @param key 存储时的key
|
||||
* @param defaultValue 默认值。
|
||||
* @returns 响应式ref
|
||||
*/
|
||||
const useAutoStore = (type, key, defaultValue) => {
|
||||
let refVar = ref(typeMatcher[type][key]);
|
||||
watch(refVar, (curr, prev) => {
|
||||
typeMatcher[type][key] = curr;
|
||||
});
|
||||
if (typeof refVar.value === 'undefined') refVar.value = defaultValue;
|
||||
return refVar;
|
||||
};
|
||||
|
||||
export { $session, $local, $cache, useAutoStore };
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { reactive, nextTick } from 'vue';
|
||||
|
||||
export function useMediaQuery(breakpoints, onChange) {
|
||||
let matches = reactive({}); // 格式为： { bp0:false, bp1:true,bp2:false}
|
||||
// 生成 query 表达式
|
||||
let start = 1;
|
||||
let querys = [];
|
||||
breakpoints.forEach(bp => {
|
||||
querys.push(`(min-width:${start}px) and (max-width:${bp - 1}px)`);
|
||||
start = bp;
|
||||
});
|
||||
querys.push(`(min-width:${start}px)`);
|
||||
let mqlList = querys.map(q => window.matchMedia(q));
|
||||
// 添加所有监听, 通过Idx追踪位置
|
||||
mqlList.forEach((mql, idx) => {
|
||||
matches['bp' + idx] = mql.matches;
|
||||
matches['range-bp' + idx] = querys[idx];
|
||||
mql.fn = ev => {
|
||||
matches['bp' + idx] = ev.matches;
|
||||
ev.matches && nextTick(onChange);
|
||||
};
|
||||
mql.addEventListener('change', mql.fn);
|
||||
});
|
||||
function destory() {
|
||||
mqlList.forEach(mql => mql.removeEventListener('change', mql.fn));
|
||||
mqlList = null;
|
||||
}
|
||||
return { matches, destory };
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
const baseUrl = import.meta.env.BASE_URL;
|
||||
|
||||
/**
|
||||
* json clone， 会丢失函数等。
|
||||
* @param obj 普通对象或reactive对象
|
||||
*/
|
||||
const $clone = target => JSON.parse(JSON.stringify(target));
|
||||
|
||||
/**
|
||||
* 将目标字段分隔后，取相应位置的值
|
||||
* @example $split("/project/home","/",-1) //取出home
|
||||
* @param target 目标字符串
|
||||
* @param splitor 分隔符
|
||||
* @param pos 取数位置，可为-1,-2
|
||||
*/
|
||||
const $split = (target, splitor = '/', pos = 0) => target.split(splitor).slice(pos)[0];
|
||||
|
||||
/**
|
||||
* 延时函数
|
||||
* @example $delay(300).then(()=>{ })
|
||||
*/
|
||||
const $delay = time => new Promise(resolve => setTimeout(resolve, time));
|
||||
|
||||
/**
|
||||
* 空闲函数
|
||||
* @example $idle().then(()=>{ })
|
||||
*/
|
||||
const $idle = () => new Promise(resolve => (window.requestIdleCallback || window.requestAnimationFrame)(resolve));
|
||||
|
||||
const $pub = url => {
|
||||
// return baseUrl + url;
|
||||
return `${baseUrl}/${url}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* fetch组件库示例静态文件，包括markdown、示例源码和示例配置
|
||||
* @param {string} path
|
||||
* @returns
|
||||
*/
|
||||
const fetchDemosFile = path => {
|
||||
return fetch(baseUrl + '/' + path, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'text/plain;charset=UTF-8',
|
||||
},
|
||||
}).then(res => {
|
||||
if (res.ok) {
|
||||
return res.text();
|
||||
} else {
|
||||
throw new Error(res.statusText);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export { $clone, $split, $delay, $idle, $pub, fetchDemosFile };
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import { $split } from '@/tools';
|
||||
|
||||
// 批量导入vue组件示例文件, 进行vue组件示例的渲染
|
||||
const vueFiles = import.meta.globEager('@demos/app/**/*.vue');
|
||||
const vueComponents = Object.create(null);
|
||||
for (const path in vueFiles) {
|
||||
if (Object.prototype.hasOwnProperty.call(vueFiles, path)) {
|
||||
const cmpId = $split(path, '/', -2);
|
||||
const key = $split(path, '/', -1);
|
||||
vueComponents[`${cmpId}/${key}`] = vueFiles[path].default;
|
||||
}
|
||||
}
|
||||
|
||||
const languageMap = {
|
||||
js: 'javascript',
|
||||
ts: 'javascript',
|
||||
html: 'html',
|
||||
vue: 'html',
|
||||
css: 'css',
|
||||
less: 'css',
|
||||
scss: 'css',
|
||||
sass: 'css',
|
||||
};
|
||||
|
||||
const textColor = '#5073e5';
|
||||
const borderColor = '#d9dbdd';
|
||||
const themeOverrides = {
|
||||
Tabs: {
|
||||
tabTextColorActiveLine: textColor,
|
||||
tabTextColorHoverLine: textColor,
|
||||
barColor: textColor,
|
||||
tabBorderColor: borderColor,
|
||||
},
|
||||
};
|
||||
|
||||
// 只有select组件需要select.faq.cn.md
|
||||
const faqMdConfig = {
|
||||
select: true
|
||||
};
|
||||
export { languageMap, themeOverrides, faqMdConfig, vueComponents };
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="f-r pt48 pl48 pr48 doc-container">
|
||||
<template v-if="useTab">
|
||||
<!-- 描述 包含基本描述 示例和规范页 -->
|
||||
<components-detail-tab></components-detail-tab>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 描述 包含基本描述及示例 -->
|
||||
<components-detail></components-detail>
|
||||
</template>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="jsx">
|
||||
import { defineComponent, reactive, toRefs, onMounted, watch } from "vue";
|
||||
import componentsDetail from "./componentsDetail.vue";
|
||||
import componentsDetailTab from "./componentsDetailTab.vue";
|
||||
import { fetchDemosFile } from "@/tools";
|
||||
import { router } from "@/router.js";
|
||||
|
||||
const state = reactive({
|
||||
useTab: import.meta.env.VITE_USE_TAB || false, // 是否开启规范tab页，此变量需在.env生命，如不使用则删除对应.env变量
|
||||
});
|
||||
|
||||
export default defineComponent({
|
||||
name: "CmpPage_vue",
|
||||
components: { componentsDetail, componentsDetailTab },
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
const common = new window.TDCommon(["#footer"], {});
|
||||
common.renderFooter();
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
|
|
@ -0,0 +1,361 @@
|
|||
<template>
|
||||
<div class="f-r pt48 pl48 pr48">
|
||||
<!-- 一个组件的文档: 描述md + demos + apis -->
|
||||
<div class="fi-1 w0 rel cmp-container">
|
||||
<n-space vertical>
|
||||
<n-spin :show="cmpTopMdShow">
|
||||
<div class="markdown-body" v-html="cmpTopMd"></div>
|
||||
</n-spin>
|
||||
</n-space>
|
||||
|
||||
<template v-if="currJson?.demos?.length > 0">
|
||||
<n-space vertical>
|
||||
<n-spin :show="currJsonShow">
|
||||
<h2 class="f30 fw-normal !mb20">{{ $t('yan-shi') }}</h2>
|
||||
<n-layout class="f-c f-wrap ofx-auto" :native-scrollbar="true">
|
||||
<template v-if="currJson.column === '2'">
|
||||
<div class="one-demo-col2">
|
||||
<div>
|
||||
<demo v-for="demo in evenDemo" :key="demo.name" :demo="demo" />
|
||||
</div>
|
||||
<div>
|
||||
<demo v-for="demo in oddDemo" :key="demo.name" :demo="demo" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<demo v-for="demo in currJson.demos" :key="demo.name" :demo="demo" class="mb16" />
|
||||
</template>
|
||||
</n-layout>
|
||||
</n-spin>
|
||||
</n-space>
|
||||
</template>
|
||||
<template v-if="currJson.apis?.length > 0">
|
||||
<div ref="apiDiv">
|
||||
<h2 id="API" v-if="cmpId !== 'interfaces'" class="f30 fw-normal mt28">API</h2>
|
||||
<!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
|
||||
<div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
|
||||
<div class="f-r f-pos-start fw-bold">
|
||||
<div :id="oneGroup.name" class="f18">{{ oneGroup.name }}</div>
|
||||
<div class="ml12 b-a-primary c-primary px8 py4">{{ oneGroup.type }}</div>
|
||||
</div>
|
||||
<div v-for="(oneApiArr, key) in oneGroup" :key="key">
|
||||
<template v-if="key !== 'name' && key !== 'type' && oneApiArr.length > 0">
|
||||
<div class="f18 py28">{{ key }}</div>
|
||||
<n-data-table class="api-table" v-bind="getApiTableOpt(oneApiArr)" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- types表格 -->
|
||||
<template v-if="currJson.types">
|
||||
<n-data-table class="types-table mt20" v-bind="getTypesTableOpt(currJson.types)" />
|
||||
</template>
|
||||
<h2 id="FAQ" v-if="cmpFAQMd" class="f30 fw-normal mt28 mb20">FAQ</h2>
|
||||
<div class="markdown-body" v-html="cmpFAQMd"></div>
|
||||
<div v-if="currJson.owner" class="abs right24 top24" @click="copyText(currJson.owner)">{{ $t('doc-owner') }} : {{ currJson.owner }}</div>
|
||||
</div>
|
||||
<!-- 目录列表 -->
|
||||
<div class="cmp-page-anchor catalog w128 sticky top32" v-if="cmpId !== 'types'">
|
||||
<n-anchor :show-rail="true" offset-target="#doc-layout" :ignore-gap="true" :show-background="true">
|
||||
<n-anchor-link v-for="(demo, index) in currJson.demos || []" :key="demo.demoId" :title="demo.name[langKey]" :href="'#' + demo.demoId" />
|
||||
<n-anchor-link v-if="cmpId !== 'interfaces'" title="API" href="#API" />
|
||||
<n-anchor-link v-if="cmpFAQMd" title="FAQ" href="#FAQ" />
|
||||
<!-- 接口特殊的导航 -->
|
||||
<template v-if="cmpId === 'interfaces'">
|
||||
<n-anchor-link v-for="api in currJson.apis || []" :key="api.name" :title="api.name" :href="'#' + api.name" />
|
||||
</template>
|
||||
</n-anchor>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="jsx">
|
||||
import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted, nextTick, h } from 'vue';
|
||||
import { marked } from 'marked';
|
||||
import DOMPurify from 'dompurify';
|
||||
import demo from '@demo';
|
||||
import { $t, $t2, $clone, $split, fetchDemosFile } from '@/tools';
|
||||
import { router } from '@/router.js';
|
||||
import { faqMdConfig } from './cmpConfig';
|
||||
|
||||
const state = reactive({
|
||||
langKey: $t2('zh-CN', 'en-US'),
|
||||
cmpId: '',
|
||||
currJson: { column: 1, demos: [], apis: [] },
|
||||
currJsonShow: true,
|
||||
cmpTopMd: null,
|
||||
cmpTopMdShow: true,
|
||||
cmpFAQMd: null,
|
||||
evenDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 0) || []),
|
||||
oddDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 1) || []),
|
||||
apiDiv: null,
|
||||
});
|
||||
|
||||
const getTypesTableOptFn = typesArr => {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
key: 'name',
|
||||
title: $t('name'),
|
||||
width: '20%',
|
||||
render: row => <div v-html={row.name}></div>,
|
||||
},
|
||||
{
|
||||
key: 'value',
|
||||
title: $t('typeValue'),
|
||||
width: '40%',
|
||||
render: row => <div v-html={row.value}></div>,
|
||||
},
|
||||
{
|
||||
key: 'desc',
|
||||
title: $t('desc'),
|
||||
width: '40%',
|
||||
render: row => <div v-html={row.desc[state.langKey]}> </div>,
|
||||
},
|
||||
],
|
||||
data: typesArr,
|
||||
};
|
||||
};
|
||||
|
||||
const getApiTableOptFn = oneApiArr => {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
key: 'name',
|
||||
title: $t('name'),
|
||||
width: '20%',
|
||||
render: row => {
|
||||
return row.demoId ? <a href={'#' + row.demoId}> {row.name} </a> : <span> {row.name} </span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
title: $t('propType'),
|
||||
width: '25%',
|
||||
render: row => <div class="route-anchor" v-html={row.type}></div>,
|
||||
},
|
||||
{
|
||||
key: 'defaultValue',
|
||||
title: $t('defValue'),
|
||||
width: '20%',
|
||||
render: row => <div class="route-anchor" v-html={row.defaultValue}></div>,
|
||||
},
|
||||
{
|
||||
key: 'desc',
|
||||
title: $t('desc'),
|
||||
width: '35%',
|
||||
render: row => <div class="route-anchor" v-html={row.desc[state.langKey]}></div>,
|
||||
},
|
||||
],
|
||||
data: oneApiArr,
|
||||
};
|
||||
};
|
||||
|
||||
function loadPage(){
|
||||
const lang = $t2('cn', 'en');
|
||||
|
||||
state.cmpTopMdShow = state.currJsonShow = true;
|
||||
state.cmpId = router.currentRoute.value.params.cmpId;
|
||||
|
||||
fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.${lang}.md`)
|
||||
.then(data => {
|
||||
state.cmpTopMd = marked(DOMPurify.sanitize(data));
|
||||
state.cmpTopMdShow = false;
|
||||
})
|
||||
.catch(error => {
|
||||
state.cmpTopMdShow = false;
|
||||
});
|
||||
|
||||
if (faqMdConfig[state.cmpId]) {
|
||||
fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.faq.${lang}.md`)
|
||||
.then(data => {
|
||||
console.log(data)
|
||||
state.cmpFAQMd = marked(DOMPurify.sanitize(data));
|
||||
})
|
||||
.catch(error => {}
|
||||
);
|
||||
} else {
|
||||
state.cmpFAQMd = null;
|
||||
}
|
||||
|
||||
|
||||
fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.json`)
|
||||
.then(jsonStr => {
|
||||
const json = JSON.parse(jsonStr);
|
||||
state.currJson = {
|
||||
...json,
|
||||
demos: $clone(json['demos'] || []), // 克隆一下,避免保存上次的isOpen
|
||||
column: json.column || '1', // columns可能为空
|
||||
title: json.title || state.cmpId,
|
||||
};
|
||||
state.currJsonShow = false;
|
||||
|
||||
// 兼容#hashName和/#hashName两种模式
|
||||
setTimeout(() => {
|
||||
let hash = router.currentRoute.value.hash?.slice(1);
|
||||
|
||||
if (!hash) return;
|
||||
|
||||
if (hash.indexOf('/') > -1) {
|
||||
hash = hash.slice(1);
|
||||
}
|
||||
|
||||
const scrollTarget = document.querySelector(`#${hash}`);
|
||||
|
||||
if (scrollTarget) {
|
||||
scrollTarget.scrollIntoView();
|
||||
}
|
||||
}, 0);
|
||||
})
|
||||
.catch(error => {
|
||||
throw new Error(error)
|
||||
state.currJsonShow = false;
|
||||
});
|
||||
};
|
||||
|
||||
const handleApiAnchor = ev => {
|
||||
if (ev.target.tagName === 'A' && ev.target.closest('.route-anchor')) {
|
||||
ev.preventDefault();
|
||||
const href = ev.target.getAttribute('href');
|
||||
const hash = $split(href, '#', -1);
|
||||
router.push(href);
|
||||
setTimeout(() => {
|
||||
const scrollTarget = document.querySelector('#' + hash);
|
||||
if (scrollTarget) {
|
||||
scrollTarget.scrollIntoView();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const fn = {
|
||||
copyText: text => {
|
||||
navigator.clipboard.writeText(text);
|
||||
},
|
||||
getApiTableOpt: oneApiArr => {
|
||||
return getApiTableOptFn(oneApiArr);
|
||||
},
|
||||
getTypesTableOpt: typesArr => {
|
||||
return getTypesTableOptFn(typesArr);
|
||||
},
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CmpDetail',
|
||||
components: { demo },
|
||||
setup() {
|
||||
watch(
|
||||
() => router.currentRoute.value.params.cmpId,
|
||||
cmpId => {
|
||||
if (!cmpId) {
|
||||
state.currJson = {};
|
||||
} else {
|
||||
state.cmpFAQMdShow = state.cmpTopMdShow = state.currJsonShow = true;
|
||||
loadPage();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
loadPage();
|
||||
nextTick(() => {
|
||||
state.apiDiv?.addEventListener('click', handleApiAnchor);
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
state.apiDiv?.removeEventListener('click', handleApiAnchor);
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
...fn,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.types-table a,
|
||||
.api-table a {
|
||||
text-decoration: none;
|
||||
color: #5e7ce0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.n-data-table-td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.cmp-page-anchor {
|
||||
.tiny-anchor__affix {
|
||||
overflow-y: auto;
|
||||
max-height: 80vh;
|
||||
}
|
||||
.tiny-anchor-link {
|
||||
margin-bottom: 10px;
|
||||
max-width: 150px;
|
||||
font-size: 12px;
|
||||
a {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.catalog {
|
||||
height: calc(100vh - 150px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.catalog:hover {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.catalog::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.catalog::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
|
||||
.n-anchor .n-anchor-link .n-anchor-link__title {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.one-demo-col2 {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
|
||||
align-items: flex-start;
|
||||
|
||||
> div {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cmp-container {
|
||||
padding-right: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.catalog {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cmp-container {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.one-demo-col2 {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,402 @@
|
|||
<template>
|
||||
<div class="f-r pt48 pl48 pr48">
|
||||
<div class="fi-1 w0 rel cmp-container" id="cmp-container">
|
||||
<n-tabs default-value="MarkDown" ref="tabInstRef" v-model:value="currTab" type="card" size="large" tab-style="{width:100%}">
|
||||
<n-tab-pane name="MarkDown" :tab="tabTitle">
|
||||
<!-- 一个组件的文档: 描述md + demos + apis -->
|
||||
<n-space vertical>
|
||||
<n-spin :show="cmpTopMdShow">
|
||||
<div class="markdown-body" v-html="cmpTopMd"></div>
|
||||
</n-spin>
|
||||
</n-space>
|
||||
<template v-if="currJson?.demos?.length > 0">
|
||||
<n-space vertical>
|
||||
<n-spin :show="currJsonShow">
|
||||
<h2 class="f30 fw-normal !mb20">{{ $t('yan-shi') }}</h2>
|
||||
<n-layout class="f-c f-wrap ofx-auto" :native-scrollbar="true">
|
||||
<template v-if="currJson.column === '2'">
|
||||
<div class="one-demo-col2">
|
||||
<div>
|
||||
<demo v-for="demo in evenDemo" :key="demo.name" :demo="demo" />
|
||||
</div>
|
||||
<div>
|
||||
<demo v-for="demo in oddDemo" :key="demo.name" :demo="demo" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<demo v-for="demo in currJson.demos" :key="demo.name" :demo="demo" class="mb16" />
|
||||
</template>
|
||||
</n-layout>
|
||||
</n-spin>
|
||||
</n-space>
|
||||
</template>
|
||||
<template v-if="currJson.apis?.length > 0">
|
||||
<div ref="apiDiv">
|
||||
<h2 id="API" v-if="cmpId !== 'interfaces'" class="f30 fw-normal mt28">API</h2>
|
||||
<!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
|
||||
<div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
|
||||
<div class="f-r f-pos-start fw-bold">
|
||||
<div :id="oneGroup.name" class="f18">{{ oneGroup.name }}</div>
|
||||
<div class="ml12 b-a-primary c-primary px8 py4">{{ oneGroup.type }}</div>
|
||||
</div>
|
||||
<div v-for="(oneApiArr, key) in oneGroup" :key="key">
|
||||
<template v-if="key !== 'name' && key !== 'type' && oneApiArr.length > 0">
|
||||
<div class="f18 py28">{{ key }}</div>
|
||||
<n-data-table class="api-table" v-bind="getApiTableOpt(oneApiArr)" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- types表格 -->
|
||||
<template v-if="currJson.types">
|
||||
<n-data-table class="types-table mt20" v-bind="getTypesTableOpt(currJson.types)" />
|
||||
</template>
|
||||
<h2 id="FAQ" v-if="cmpFAQMd" class="f30 fw-normal mt28 mb20">FAQ</h2>
|
||||
<div class="markdown-body" v-html="cmpFAQMd"></div>
|
||||
<div v-if="currJson.owner" class="abs right24 top24" @click="copyText(currJson.owner)">{{ $t('doc-owner') }} : {{ currJson.owner }}</div>
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="standard" display-directive="show:lazy" tab="规范示例">
|
||||
<n-space vertical>
|
||||
<div class="standard-md markdown-body mt24" v-if="standardMd" v-html="standardMd"></div>
|
||||
<div class="standard-link" v-else>
|
||||
点击查看规范说明：
|
||||
<a :href="standard ? standard[langKey].link : ''" target="_blank">{{ standard ? standard[langKey].link : '' }}</a>
|
||||
</div>
|
||||
</n-space>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</div>
|
||||
<!-- 目录列表 -->
|
||||
<div class="cmp-page-anchor catalog w128 sticky top32" v-if="cmpId !== 'types'">
|
||||
<n-anchor :show-rail="true" offset-target="#doc-layout" :ignore-gap="true" :show-background="true">
|
||||
<n-anchor-link v-for="demo in currJson.demos || []" :key="demo.demoId" :title="demo.name[langKey]" :href="'#' + demo.demoId" />
|
||||
<n-anchor-link v-if="cmpId !== 'interfaces'" title="API" href="#API" />
|
||||
<n-anchor-link v-if="cmpFAQMd" title="FAQ" href="#FAQ" />
|
||||
<!-- 接口特殊的导航 -->
|
||||
<template v-if="cmpId === 'interfaces'">
|
||||
<n-anchor-link v-for="api in currJson.apis || []" :key="api.name" :title="api.name" :href="'#' + api.name" />
|
||||
</template>
|
||||
</n-anchor>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="jsx">
|
||||
import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted, effectScope, nextTick, h } from 'vue';
|
||||
import { marked } from 'marked';
|
||||
import DOMPurify from 'dompurify';
|
||||
import demo from '@demo';
|
||||
import { $t, $t2, $clone, $split, fetchDemosFile } from '@/tools';
|
||||
import { router } from '@/router.js';
|
||||
import { faqMdConfig } from './cmpConfig';
|
||||
|
||||
const state = reactive({
|
||||
langKey: $t2('zh-CN', 'en-US'),
|
||||
cmpId: '',
|
||||
currJson: { column: 1, demos: [], apis: [] },
|
||||
currJsonShow: true,
|
||||
cmpTopMd: null,
|
||||
cmpTopMdShow: true,
|
||||
cmpFAQMd: null,
|
||||
evenDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 0) || []),
|
||||
oddDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 1) || []),
|
||||
apiDiv: null,
|
||||
tabTitle: null,
|
||||
currTab: 'MarkDown',
|
||||
standard: {},
|
||||
standardMd: null,
|
||||
});
|
||||
|
||||
const getTypesTableOptFn = typesArr => {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
key: 'name',
|
||||
title: $t('name'),
|
||||
width: '20%',
|
||||
render: row => <div v-html={row.name}></div>,
|
||||
},
|
||||
{
|
||||
key: 'value',
|
||||
title: $t('typeValue'),
|
||||
width: '40%',
|
||||
render: row => <div v-html={row.value}></div>,
|
||||
},
|
||||
{
|
||||
key: 'desc',
|
||||
title: $t('desc'),
|
||||
width: '40%',
|
||||
render: row => <div v-html={row.desc[state.langKey]}> </div>,
|
||||
},
|
||||
],
|
||||
data: typesArr,
|
||||
};
|
||||
};
|
||||
|
||||
const getApiTableOptFn = oneApiArr => {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
key: 'name',
|
||||
title: $t('name'),
|
||||
width: '20%',
|
||||
render: row => {
|
||||
return row.demoId ? <a href={'#' + row.demoId}> {row.name} </a> : <span> {row.name} </span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
title: $t('propType'),
|
||||
width: '25%',
|
||||
render: row => <div class="route-anchor" v-html={row.type}></div>,
|
||||
},
|
||||
{
|
||||
key: 'defaultValue',
|
||||
title: $t('defValue'),
|
||||
width: '20%',
|
||||
render: row => <div class="route-anchor" v-html={row.defaultValue}></div>,
|
||||
},
|
||||
{
|
||||
key: 'desc',
|
||||
title: $t('desc'),
|
||||
width: '35%',
|
||||
render: row => <div class="route-anchor" v-html={row.desc[state.langKey]}></div>,
|
||||
},
|
||||
],
|
||||
data: oneApiArr,
|
||||
};
|
||||
};
|
||||
|
||||
const loadPage = () => {
|
||||
const lang = $t2('cn', 'en');
|
||||
|
||||
state.cmpTopMdShow = state.currJsonShow = true;
|
||||
state.cmpId = router.currentRoute.value.params.cmpId;
|
||||
|
||||
fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.${lang}.md`)
|
||||
.then(data => {
|
||||
state.cmpTopMd = marked(DOMPurify.sanitize(data));
|
||||
state.cmpTopMdShow = false;
|
||||
state.tabTitle = getTitleFromMd(data) || state.cmpId;
|
||||
})
|
||||
.catch(error => {
|
||||
state.cmpTopMdShow = false;
|
||||
});
|
||||
|
||||
if (faqMdConfig[state.cmpId]) {
|
||||
fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.faq.${lang}.md`)
|
||||
.then(data => {
|
||||
state.cmpFAQMd = marked(DOMPurify.sanitize(data));
|
||||
})
|
||||
.catch(error => {
|
||||
return;
|
||||
});
|
||||
} else {
|
||||
state.cmpFAQMd = null;
|
||||
}
|
||||
|
||||
fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.js`)
|
||||
.then(data => {
|
||||
const json = eval('(' + data.slice(15) + ')');
|
||||
|
||||
state.currJson = {
|
||||
...json,
|
||||
demos: $clone(json['demos'] || []), // 克隆一下,避免保存上次的isOpen
|
||||
column: json.column || '1', // columns可能为空
|
||||
title: json.title || state.cmpId,
|
||||
};
|
||||
if (json.standard) {
|
||||
state.standard = $clone(json['standard'] || []);
|
||||
if (state.standard[state.langKey].file) {
|
||||
fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.standard[state.langKey].file}`)
|
||||
.then(data => {
|
||||
state.standardMd = marked(DOMPurify.sanitize(data));
|
||||
})
|
||||
.catch(error => {
|
||||
return;
|
||||
});
|
||||
} else {
|
||||
state.standardMd = null;
|
||||
}
|
||||
} else {
|
||||
state.standard = null;
|
||||
state.standardMd = null;
|
||||
}
|
||||
state.currJsonShow = false;
|
||||
|
||||
// 兼容#hashName和/#hashName两种模式
|
||||
setTimeout(() => {
|
||||
let hash = router.currentRoute.value.hash?.slice(1);
|
||||
|
||||
if (!hash) return;
|
||||
|
||||
if (hash.indexOf('/') > -1) {
|
||||
hash = hash.slice(1);
|
||||
}
|
||||
|
||||
const scrollTarget = document.querySelector(`#${hash}`);
|
||||
|
||||
if (scrollTarget) {
|
||||
scrollTarget.scrollIntoView();
|
||||
}
|
||||
}, 0);
|
||||
})
|
||||
.catch(error => {
|
||||
state.currJsonShow = false;
|
||||
});
|
||||
};
|
||||
const getTitleFromMd = markdown => {
|
||||
const titleRegex = /^#\s+(.*)/m;
|
||||
const match = titleRegex.exec(markdown);
|
||||
if (match && match[1]) {
|
||||
return match[1];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
const handleApiAnchor = ev => {
|
||||
if (ev.target.tagName === 'A' && ev.target.closest('.route-anchor')) {
|
||||
ev.preventDefault();
|
||||
const href = ev.target.getAttribute('href');
|
||||
const hash = $split(href, '#', -1);
|
||||
router.push(href);
|
||||
setTimeout(() => {
|
||||
const scrollTarget = document.querySelector('#' + hash);
|
||||
if (scrollTarget) {
|
||||
scrollTarget.scrollIntoView();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const fn = {
|
||||
copyText: text => {
|
||||
navigator.clipboard.writeText(text);
|
||||
},
|
||||
getApiTableOpt: oneApiArr => {
|
||||
return getApiTableOptFn(oneApiArr);
|
||||
},
|
||||
getTypesTableOpt: typesArr => {
|
||||
return getTypesTableOptFn(typesArr);
|
||||
},
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CmpDetailTab',
|
||||
components: { demo },
|
||||
setup() {
|
||||
const scope = effectScope();
|
||||
scope.run(() => {
|
||||
watch(
|
||||
() => router.currentRoute.value.params.cmpId,
|
||||
cmpId => {
|
||||
state.currTab = 'MarkDown';
|
||||
if (!cmpId) {
|
||||
state.currJson = {};
|
||||
} else {
|
||||
state.cmpFAQMdShow = state.cmpTopMdShow = state.currJsonShow = true;
|
||||
loadPage();
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => router.currentRoute.value.hash,
|
||||
hash => {
|
||||
if (hash) {
|
||||
state.currTab = 'MarkDown';
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
loadPage();
|
||||
nextTick(() => {
|
||||
state.apiDiv?.addEventListener('click', handleApiAnchor);
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
scope.stop();
|
||||
state.apiDiv?.removeEventListener('click', handleApiAnchor);
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
...fn,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.doc-container {
|
||||
min-height: 600px;
|
||||
}
|
||||
.types-table a,
|
||||
.api-table a {
|
||||
text-decoration: none;
|
||||
color: #5e7ce0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.n-data-table-td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.catalog {
|
||||
height: calc(100vh - 150px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.catalog:hover {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.catalog::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.catalog::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
|
||||
.n-anchor .n-anchor-link .n-anchor-link__title {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.one-demo-col2 {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
|
||||
align-items: flex-start;
|
||||
|
||||
> div {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
}
|
||||
.n-tabs .ntabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--active {
|
||||
color: #5073e5;
|
||||
}
|
||||
.cmp-container {
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.catalog {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cmp-container {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.one-demo-col2 {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,13 @@
|
|||
import { $split } from '@/tools/utils';
|
||||
// 从npm 仓库的位置，引入所有md. 统一用文件名做key
|
||||
const docMDs = {};
|
||||
const mds = import.meta.globEager('@demos/webdoc/**.md');
|
||||
|
||||
for (const path in mds) {
|
||||
if (Object.prototype.hasOwnProperty.call(mds, path)) {
|
||||
const key = $split(path, '/', -1);
|
||||
docMDs[key] = mds[path].default;
|
||||
}
|
||||
}
|
||||
|
||||
export default docMDs;
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="f-r pt48 pl48 pr48">
|
||||
<component id="doc_wrap" :is="docMDs[currPage]" class="w0 fi-1" />
|
||||
<!-- 目录列表 -->
|
||||
<div class="catalog w128 sticky top32 ml24">
|
||||
<n-anchor :show-rail="true" offset-target="#doc-layout" :ignore-gap="true" :show-background="true">
|
||||
<n-anchor-link v-for="cat in catalog" :key="cat.id" :title="cat.text" :href="`#${cat.id}`" />
|
||||
</n-anchor>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, nextTick, effectScope, watch, onMounted, onUnmounted } from 'vue';
|
||||
import { $t2 } from '@/tools';
|
||||
import docMDs from './docConfig.js';
|
||||
import { router } from '@/router.js';
|
||||
const currPage = ref('');
|
||||
const catalog = ref([]);
|
||||
function loadPage() {
|
||||
let suffix = $t2('', '-en');
|
||||
currPage.value = `${router.currentRoute.value.params.docId}${suffix}.md`;
|
||||
|
||||
nextTick(() => {
|
||||
if (document.getElementById('doc_wrap')) {
|
||||
catalog.value = Array.from(document.getElementById('doc_wrap').querySelectorAll('h2[id],h3[id]')).map(h3 => ({
|
||||
id: h3.id,
|
||||
text: h3.dataset.label || decodeURIComponent(h3.id),
|
||||
}));
|
||||
}
|
||||
});
|
||||
}
|
||||
const scope = effectScope();
|
||||
scope.run(() => {
|
||||
watch([router.currentRoute, () => appData.configMode], () => {
|
||||
loadPage();
|
||||
});
|
||||
});
|
||||
onMounted(() => {
|
||||
loadPage();
|
||||
const common = new window.TDCommon(['#footer'], {});
|
||||
common.renderFooter();
|
||||
});
|
||||
onUnmounted(() => scope.stop());
|
||||
</script>
|
||||
<style lang="less">
|
||||
.catalog {
|
||||
height: calc(100vh - 150px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.catalog:hover {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.catalog::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.catalog::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
|
||||
.n-anchor .n-anchor-link .n-anchor-link__title {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.catalog {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<n-config-provider class="main-layout hp100 f-c f-box-stretch" :theme-overrides="themeOverrides">
|
||||
<!-- tiny angular 菜单统一到一起 -->
|
||||
<n-layout class="content-layout fi-1" :has-sider="!isFrame">
|
||||
<n-layout-sider id="layoutSider" v-if="!isFrame" bordered :collapsedWidth="4" :width="250" showTrigger="arrow-circle" :native-scrollbar="true">
|
||||
<n-menu class="main-menu" :value="menuSideKey" :default-expand-all="true" :options="menuOptions" />
|
||||
</n-layout-sider>
|
||||
<n-layout
|
||||
id="doc-layout"
|
||||
ref="contentRef"
|
||||
:native-scrollbar="true"
|
||||
content-style="display: flex; flex-direction: column; height:100%"
|
||||
:class="'md-' + appData.configType"
|
||||
>
|
||||
<router-view />
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</n-config-provider>
|
||||
</template>
|
||||
<script lang="jsx">
|
||||
import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted } from 'vue';
|
||||
import hljs from 'highlight.js/lib/core';
|
||||
import javascript from 'highlight.js/lib/languages/javascript';
|
||||
import css from 'highlight.js/lib/languages/css';
|
||||
import html from 'highlight.js/lib/languages/xml';
|
||||
|
||||
import { genMenus } from '@/menus.jsx';
|
||||
import { router } from '@/router.js';
|
||||
import { $split, $t, appData, appFn } from '@/tools';
|
||||
import { hiddenPanel, themeOverrides } from './layoutData.js';
|
||||
export default defineComponent({
|
||||
name: 'Layout_vue',
|
||||
props: [],
|
||||
setup() {
|
||||
let state = reactive({
|
||||
menuOptions: genMenus(),
|
||||
hasHeader: true, // Header，当嵌入think时，无头。 所以预留变量
|
||||
menuTopKey: computed(() => router.currentRoute.value.name),
|
||||
menuTop: [
|
||||
{
|
||||
label: () => <router-link to={import.meta.env.VITE_CONTEXT + 'docs/introduction'}>{$t('doc')}</router-link>,
|
||||
key: 'docs',
|
||||
},
|
||||
{
|
||||
label: () => <router-link to={import.meta.env.VITE_CONTEXT + 'components/button'}>{$t('component')}</router-link>,
|
||||
key: 'components',
|
||||
},
|
||||
],
|
||||
menuSideKey: computed(() => $split(router.currentRoute?.value?.path, '/', -1)),
|
||||
isFrame: computed(() => router.currentRoute.value.meta?.iframe),
|
||||
contentRef: null,
|
||||
themeOverrides: themeOverrides,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => appData.configType,
|
||||
() => {
|
||||
state.menuOptions = genMenus();
|
||||
}
|
||||
);
|
||||
hljs.registerLanguage('javascript', javascript);
|
||||
hljs.registerLanguage('css', css);
|
||||
hljs.registerLanguage('html', html);
|
||||
let routerCbDestory = null;
|
||||
onMounted(() => {
|
||||
hiddenPanel();
|
||||
// 每次切换路由，要导航到顶部
|
||||
routerCbDestory = router.afterEach(() => {
|
||||
state.contentRef.scrollTo({ top: 0, behavior: 'auto' });
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
routerCbDestory();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
hljs,
|
||||
appData, // 使用到里面的lang / configMode
|
||||
...appFn,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.main-layout > .n-layout-scroll-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content-layout > .n-layout-scroll-container,
|
||||
#doc-layout > .n-layout-scroll-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
// hover时，右侧menu显示滚动条
|
||||
.n-layout-sider-scroll-container {
|
||||
overflow: hidden !important;
|
||||
.n-menu-item-content {
|
||||
width: 240px;
|
||||
}
|
||||
&:hover {
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.n-layout-sider {
|
||||
display: none;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
.n-layout-sider-scroll-container {
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.n-layout-toggle-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
export function hiddenPanel() {
|
||||
// 解决滚动页面时，下拉类组件面板与目标元素分离问题。为容器添加scroll事件，滚动页面，关闭下拉面板。
|
||||
const demoContainerEle = document.getElementById('doc-layout').getElementsByClassName('n-layout-scroll-container')[0];
|
||||
demoContainerEle?.addEventListener('scroll', () => {
|
||||
const event = new CustomEvent('tiScroll', { bubbles: false, cancelable: true });
|
||||
document.dispatchEvent(event);
|
||||
});
|
||||
}
|
||||
|
||||
// 主题色更新
|
||||
const backgroundColor = '#e9edfa';
|
||||
const textColor = '#5073e5';
|
||||
const borderFocus = '1px solid #5073e5';
|
||||
const boxShadowFocus = '0 0 0 2px rgba(80,115,229,0.2)';
|
||||
export const themeOverrides = {
|
||||
Menu: {
|
||||
itemTextColorActive: textColor,
|
||||
itemColorActive: backgroundColor,
|
||||
itemTextColorActiveHover: textColor,
|
||||
itemColorHover: backgroundColor,
|
||||
itemColorActiveHover: backgroundColor,
|
||||
itemTextColorChildActive: textColor,
|
||||
itemTextColorChildActiveHover: textColor,
|
||||
arrowColorActive: textColor,
|
||||
arrowColorActiveHover: textColor,
|
||||
arrowColorChildActive: textColor,
|
||||
arrowColorChildActiveHover: textColor,
|
||||
},
|
||||
Anchor: {
|
||||
linkColor: backgroundColor,
|
||||
linkTextColorHover: textColor,
|
||||
linkTextColorActive: textColor,
|
||||
linkTextColorPressed: textColor,
|
||||
railColorActive: textColor,
|
||||
},
|
||||
Input: {
|
||||
caretColor: textColor,
|
||||
borderHover: borderFocus,
|
||||
borderFocus: borderFocus,
|
||||
loadingColor: textColor,
|
||||
boxShadowFocus: boxShadowFocus,
|
||||
},
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue