Skip to content

Commit 3ddfaf2

Browse files
zzcrzzcr
authored
feat: add next/cloud-icons project (#2821)
1 parent 589695b commit 3ddfaf2

File tree

711 files changed

+12301
-173
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

711 files changed

+12301
-173
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,7 @@ examples/sites/public/tiny-vue*.mjs
6969
examples/sites/public/tailwind.css
7070
examples/sites/public/index.css
7171

72+
73+
# next 屏蔽
74+
next/cloud-icons/categorys.ts
75+
next/scene-theme/docs/.vitepress/cache

‎examples/sites/demos/apis/user.js

+15
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,21 @@ export default {
7272
mode: ['pc'],
7373
pcDemo: 'multiple-users-tag'
7474
},
75+
{
76+
name: 'hover-expand',
77+
type: 'boolean',
78+
defaultValue: '该属性的默认值为 false',
79+
desc: {
80+
'zh-CN': '默认折叠tag, hover时展示所有tag。多选用户multiple为true时生效',
81+
'en-US':
82+
'By default, tags are collapsed. When tags are hovered, all tags are displayed. This parameter is valid only when multiple is set to true for multiple users.'
83+
},
84+
mode: ['pc'],
85+
pcDemo: '',
86+
meta: {
87+
stable: '3.22.0'
88+
}
89+
},
7590
{
7691
name: 'delay',
7792
type: 'number',

‎examples/sites/demos/pc/app/pop-upload/file-type.spec.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,15 @@ test('PopUpload 限制上传文件类型和大小', async ({ page }) => {
1111
const selectFilesBtn = uploadModal.getByRole('button', { name: '选择文件' })
1212
const uploadsBtn = uploadModal.getByRole('button', { name: '开始上传' })
1313
const lists = uploadModal.locator('.tiny-popupload__dialog-table-item')
14+
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
1415
const path = require('node:path')
1516
const path1 = path.resolve(__dirname, '测试.jpg')
1617
const path2 = path.resolve(__dirname, '测试.png')
1718
const path3 = path.resolve(__dirname, '测试.svg')
1819

1920
await modalAppearBtn.click()
20-
await expect(alert.getByText('上传文件大小不超过:9KB')).toBeVisible()
21-
await expect(alert.getByText('上传文件类型限制为:.png,.jpg')).toBeVisible()
21+
await expect(alert.getByText('上传文件大小不超过: 9KB')).toBeVisible()
22+
await expect(alert.getByText('上传文件类型限制为: .png,.jpg')).toBeVisible()
2223
const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), selectFilesBtn.click()])
2324
await fileChooser.setFiles(path1)
2425
await uploadsBtn.click()

‎examples/sites/demos/pc/webdoc/i18n-en.md

+39
Original file line numberDiff line numberDiff line change
@@ -96,3 +96,42 @@ new Vue({
9696
render: (h) => h(App)
9797
}).$mount('#app')
9898
```
99+
100+
## Adding Other Minority Languages
101+
102+
In the component library, Chinese and English are built in by default. In the `@opentiny/[email protected]` and later versions, the Spanish and Portuguese internationalization language packages are added to the component library. You can use the packages during internationalization configuration.
103+
104+
```js {18-26}
105+
import { createI18n } from 'vue-i18n'
106+
import locale from '@opentiny/vue-locale'
107+
108+
// Importing a Package in a Minority Language
109+
import { esLA, ptBR } from '@opentiny/vue-locale'
110+
111+
const initI18n = (i18n) =>
112+
locale.initI18n({
113+
i18n,
114+
createI18n,
115+
messages: {
116+
zhCN: {
117+
test: '项目自用的国际化内容'
118+
},
119+
enUS: {
120+
test: 'project self-use for English'
121+
},
122+
esLA: {
123+
// mix it with the content used by the project.
124+
...esLA,
125+
test: 'Contenido de los propios proyectos'
126+
},
127+
ptBR: {
128+
...ptBR,
129+
test: 'Conteúdo para uso próprio do projeto'
130+
}
131+
}
132+
})
133+
134+
export const i18n = initI18n({ locale: 'esLA' })
135+
```
136+
137+
After the preceding configuration, the Vue3 project supports the internationalization environment of four languages. The method of configuring the Vue2 project is the same. You only need to import the internationalization language package of the minority language and mix the internationalization content of the project.

‎examples/sites/demos/pc/webdoc/i18n.md

+39-1
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,6 @@ export default (i18n) =>
149149
import { getCurrentInstance } from 'vue'
150150
151151
const ctx = getCurrentInstance()?.ctx
152-
153152
const changeLang = () => {
154153
ctx.$i18n.locale = ctx.$i18n.locale === 'zhCN' ? 'enUS' : 'zhCN'
155154
}
@@ -179,3 +178,42 @@ import { i18n } from './i18n'
179178
180179
const test = i18n.global.t('test')
181180
```
181+
182+
## 添加其它小语种
183+
184+
在组件库中，默认内置了中英 2 种语言。从 `@opentiny/vue@3.22.0` 版本开始，组件库新增了西班牙语和葡萄牙语的国际化语言包，用户可以在配置国际化时使用。
185+
186+
```js {18-26}
187+
import { createI18n } from 'vue-i18n'
188+
import locale from '@opentiny/vue-locale'
189+
190+
// 导入小语种的包
191+
import { esLA, ptBR } from '@opentiny/vue-locale'
192+
193+
const initI18n = (i18n) =>
194+
locale.initI18n({
195+
i18n,
196+
createI18n,
197+
messages: {
198+
zhCN: {
199+
test: '项目自用的国际化内容'
200+
},
201+
enUS: {
202+
test: 'project self-use for English'
203+
},
204+
esLA: {
205+
// 将组件库的国际化语言包混入项目自用的内容
206+
...esLA,
207+
test: 'Contenido de los propios proyectos'
208+
},
209+
ptBR: {
210+
...ptBR,
211+
test: 'Conteúdo para uso próprio do projeto'
212+
}
213+
}
214+
})
215+
216+
export const i18n = initI18n({ locale: 'esLA' }) // 此处指定初始的默认语言
217+
```
218+
219+
通过上述代码，Vue3 项目支持四个语种的国际化环境就配置好了。Vue2 的项目配置方法也一样，都是导入小语种的国际化语言包后，混入项目的国际化内容即可。

‎next/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
./cloud-icons/categorys.ts
2+
./scene-theme/docs/.vitepress/cache

‎next/cloud-icons/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/style
2+
/json
3+
/example

‎next/cloud-icons/README.md

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# Cloud Design Icons 云规范图标库
2+
3+
该图标库包含云控制台应用开发中的系统图标，各云服务图标和服务扩展图标。其中系统图标是单色的常用图标，具有统一的尺寸和内边距，容易集成到项目中。服务图标和服务扩展图标为明亮艳丽的彩色图标，突出了各服务的特点。
4+
5+
它是跨框架的图标库，支持所有前端Web项目， 原生的javascript工程，Vue/React/Angular等等。
6+
它即支持原始的`CSS` 样式文件引入，也支持与 `Vite` 等构建工程使用，详见使用小节。
7+
8+
## 安装 Installation
9+
10+
```
11+
npm install @opentiny/cloud-icons
12+
13+
```
14+
15+
## 使用 Usage
16+
17+
1. 整体引入css使用:
18+
19+
在工程中引入图标的css文件： `import "@opentiny/cloud-icons/style/all.css"`, 也可以根据使用情况，按类别导入图标，以减小引入样式文件的体积.
20+
21+
- 全量图标: all.css
22+
- 基础图标: base.css
23+
- 服务图标: svc.css
24+
- 服务扩展图标: ext.css
25+
26+
2. 引入 @unocss/preset-icons 插件使用
27+
28+
```javascript
29+
import { defineConfig } from 'vite'
30+
import UnoCSS from 'unocss/vite'
31+
import presetIcons from '@unocss/preset-icons'
32+
33+
export default defineConfig({
34+
plugins: [
35+
UnoCSS({
36+
presets: [
37+
presetIcons({
38+
prefix: '',
39+
extraProperties: {
40+
display: 'inline-block',
41+
'vertical-align': 'middle'
42+
},
43+
collections: {
44+
ci: () => import('@opentiny/cloud-icons/json/icons.json').then((i) => i.default)
45+
}
46+
})
47+
]
48+
})
49+
]
50+
})
51+
```
52+
53+
3. 引入图标
54+
通过图标名引用所需图标： <code>&lt;i class="ci-search"&gt;&lt;/i&gt;</code>
55+
56+
## 浏览所有图标 Browser Icons
57+
58+
[在线预览](https://github.io)
59+
60+
# 开发指南
61+
62+
## 导入图标
63+
64+
将设计师提供的图标导入`svgs` 目录， 文件夹及文件名必须符合以下要求：
65+
66+
1. 子目录名称为大分类，每次增加大分类文件夹后，需要在 `index.html` 中的分类下拉列表中，添加相应的名称
67+
2. 分类目录的子目录名为“图标组名”， 用数字控制组名的排序。
68+
3. 文件名必须符合： 排序#中文名-英文名.svg
69+
70+
图标导入时需要检查，以免导入不符合规范的图标：
71+
72+
1. 图标尺寸是否规范， 是否正方形，是否固定内边距；
73+
2. 不需要顶部的 < ?xml version="1.0" encoding="utf-8"? >
74+
3. 单色图标需要 fill="currentColor"
75+
4. 图标内不允许有 <image> 标签, 比如openkruise.svg
76+
77+
## 已知问题和约束
78+
79+
- `svg` 文件名要统一，尽量小写和连字符， 中文- 英文字母， 不要 @， 不要有空格
80+
- `svg` 文件名涉及专有服务名时，可以大写，但是受`@unocss/preset-icons` 库的限制，它不支持图标类名大写，所以导出的图标名称统一为小写。

‎next/cloud-icons/index.html

+148
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>云规范图标集预览</title>
7+
<style>
8+
.hide {
9+
display: none;
10+
}
11+
body {
12+
padding: 0 24px 48px;
13+
}
14+
#list .icon-item {
15+
display: inline-block;
16+
text-align: center;
17+
font-size: 12px;
18+
color: #575d6c;
19+
}
20+
#list i {
21+
margin: 20px;
22+
transition: all 0.5s;
23+
}
24+
#list i:hover {
25+
transform: scale(1.5);
26+
cursor: copy;
27+
}
28+
.icon-counts {
29+
color: #0057c3;
30+
text-decoration: underline;
31+
margin-left: 8px;
32+
cursor: pointer;
33+
}
34+
.icons-group {
35+
margin-bottom: 0;
36+
margin-top: 32px;
37+
}
38+
.icon-title,
39+
.icon-name {
40+
cursor: pointer;
41+
overflow: hidden;
42+
text-overflow: ellipsis;
43+
white-space: nowrap;
44+
}
45+
#list .base {
46+
font-size: 32px;
47+
}
48+
#list .base ~ div {
49+
width: 80px;
50+
}
51+
#list .svc {
52+
font-size: 72px;
53+
}
54+
#list .svc ~ div {
55+
width: 108px;
56+
}
57+
#list .ext,
58+
#list .stat {
59+
font-size: 80px;
60+
}
61+
#list .ext ~ div,
62+
#list .stat ~ div {
63+
width: 120px;
64+
}
65+
.settings {
66+
display: flex;
67+
justify-content: space-between;
68+
}
69+
.settings label {
70+
margin: 0 16px 12px;
71+
}
72+
.settings label {
73+
font-weight: bold;
74+
}
75+
76+
.dlg-root {
77+
margin: 24px;
78+
}
79+
code {
80+
padding: 4px;
81+
background-color: #e5e5e5;
82+
cursor: pointer;
83+
user-select: all;
84+
}
85+
</style>
86+
<link rel="stylesheet" href="./style/all.css" />
87+
</head>
88+
<body>
89+
<div id="app">
90+
<h1 style="text-align: center">云规范图标集预览</h1>
91+
<div class="settings">
92+
<div>
93+
<label> 选择图标集:</label>
94+
<select id="sel-category" is="ui-select">
95+
<option value="base">系统图标</option>
96+
<option value="svc">服务图标</option>
97+
<option value="ext">扩展图标</option>
98+
<option value="stat">状态图标</option>
99+
</select>
100+
<span class="hide">
101+
<label> 引用方式:</label>
102+
<select id="sel-type" is="ui-select">
103+
<option value="ci">class</option>
104+
<option value="ci">json-data</option>
105+
</select>
106+
</span>
107+
<label> 图标颜色:</label>
108+
<input id="sel-color" type="color" is="ui-color" value="#000000" />
109+
<label> 复制方式:</label>
110+
<select id="sel-copy" is="ui-select">
111+
<option value="all">完整标签</option>
112+
<option value="only-name">图标类名</option>
113+
</select>
114+
<ui-lighttip id="lightTip" type="success">复制成功</ui-lighttip>
115+
</div>
116+
<div>
117+
<button id="btnHelp" type="primary" class="ui-button">使用说明</button>
118+
</div>
119+
</div>
120+
<div id="list"></div>
121+
122+
<dialog id="dlgHelp" is="ui-dialog">
123+
<div class="dlg-root">
124+
<h3>1、安装</h3>
125+
<div>在项目中安装: <code>npm i @opentiny/cloud-icons</code></div>
126+
<h3>2、通过css 引用</h3>
127+
<div>在工程中引入图标的css文件： <code>import "@opentiny/cloud-icons/style/all.css"</code></div>
128+
<h3>3、通过 @unocss/preset-icons 插件按需引用</h3>
129+
<div>
130+
例如vite工程中，配置UnoCss的图标插件：
131+
<pre id="helpCode"></pre>
132+
</div>
133+
134+
<h3>4、使用图标</h3>
135+
<ul>
136+
<li>
137+
通过图标名引用所需图标： <code>&lt;i class="ci-search"&gt;&lt;/i&gt;</code> 会得到
138+
<i class="ci-search"></i>
139+
</li>
140+
<li>通过修改图标的 <code>color \ font-size</code> 控制图标的大小和颜色。</li>
141+
</ul>
142+
</div>
143+
</dialog>
144+
</div>
145+
146+
<script type="module" src="./main.ts"></script>
147+
</body>
148+
</html>

0 commit comments

Comments
 (0)