feat: add next/cloud-icons project

.gitignore

@@ -69,3 +69,7 @@ examples/sites/public/tiny-vue*.mjs
 examples/sites/public/tailwind.css
 examples/sites/public/index.css
 
+
+# next 屏蔽
+next/cloud-icons/categorys.ts
+next/scene-theme/docs/.vitepress/cache

examples/sites/demos/apis/user.js

@@ -72,6 +72,21 @@ export default {
           mode: ['pc'],
           pcDemo: 'multiple-users-tag'
         },
+        {
+          name: 'hover-expand',
+          type: 'boolean',
+          defaultValue: '该属性的默认值为 false',
+          desc: {
+            'zh-CN': '默认折叠tag, hover时展示所有tag。多选用户multiple为true时生效',
+            'en-US':
+              '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.'
+          },
+          mode: ['pc'],
+          pcDemo: '',
+          meta: {
+            stable: '3.22.0'
+          }
+        },
         {
           name: 'delay',
           type: 'number',

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

@@ -11,14 +11,15 @@ test('PopUpload 限制上传文件类型和大小', async ({ page }) => {
   const selectFilesBtn = uploadModal.getByRole('button', { name: '选择文件' })
   const uploadsBtn = uploadModal.getByRole('button', { name: '开始上传' })
   const lists = uploadModal.locator('.tiny-popupload__dialog-table-item')
+  // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
   const path = require('node:path')
   const path1 = path.resolve(__dirname, '测试.jpg')
   const path2 = path.resolve(__dirname, '测试.png')
   const path3 = path.resolve(__dirname, '测试.svg')
 
   await modalAppearBtn.click()
-  await expect(alert.getByText('上传文件大小不超过:9KB')).toBeVisible()
-  await expect(alert.getByText('上传文件类型限制为:.png,.jpg')).toBeVisible()
+  await expect(alert.getByText('上传文件大小不超过: 9KB')).toBeVisible()
+  await expect(alert.getByText('上传文件类型限制为: .png,.jpg')).toBeVisible()
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), selectFilesBtn.click()])
   await fileChooser.setFiles(path1)
   await uploadsBtn.click()

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

@@ -96,3 +96,42 @@ new Vue({
   render: (h) => h(App)
 }).$mount('#app')
 ```
+
+## Adding Other Minority Languages
+
+In the component library, Chinese and English are built in by default. In the `@opentiny/vue@3.22.0` and later versions, the Spanish and Portuguese internationalization language packages are added to the component library. You can use the packages during internationalization configuration.
+
+```js {18-26}
+import { createI18n } from 'vue-i18n'
+import locale from '@opentiny/vue-locale'
+
+// Importing a Package in a Minority Language
+import { esLA, ptBR } from '@opentiny/vue-locale'
+
+const initI18n = (i18n) =>
+  locale.initI18n({
+    i18n,
+    createI18n,
+    messages: {
+      zhCN: {
+        test: '项目自用的国际化内容'
+      },
+      enUS: {
+        test: 'project self-use for English'
+      },
+      esLA: {
+        // mix it with the content used by the project.
+        ...esLA,
+        test: 'Contenido de los propios proyectos'
+      },
+      ptBR: {
+        ...ptBR,
+        test: 'Conteúdo para uso próprio do projeto'
+      }
+    }
+  })
+
+export const i18n = initI18n({ locale: 'esLA' })
+```
+
+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

@@ -149,7 +149,6 @@ export default (i18n) =>
   import { getCurrentInstance } from 'vue'
 
   const ctx = getCurrentInstance()?.ctx
-
   const changeLang = () => {
     ctx.$i18n.locale = ctx.$i18n.locale === 'zhCN' ? 'enUS' : 'zhCN'
   }
@@ -179,3 +178,42 @@ import { i18n } from './i18n'
 
 const test = i18n.global.t('test')
 ```
+
+## 添加其它小语种
+
+在组件库中，默认内置了中英 2 种语言。从 `@opentiny/vue@3.22.0` 版本开始，组件库新增了西班牙语和葡萄牙语的国际化语言包，用户可以在配置国际化时使用。
+
+```js {18-26}
+import { createI18n } from 'vue-i18n'
+import locale from '@opentiny/vue-locale'
+
+// 导入小语种的包
+import { esLA, ptBR } from '@opentiny/vue-locale'
+
+const initI18n = (i18n) =>
+  locale.initI18n({
+    i18n,
+    createI18n,
+    messages: {
+      zhCN: {
+        test: '项目自用的国际化内容'
+      },
+      enUS: {
+        test: 'project self-use for English'
+      },
+      esLA: {
+        // 将组件库的国际化语言包混入项目自用的内容
+        ...esLA,
+        test: 'Contenido de los propios proyectos'
+      },
+      ptBR: {
+        ...ptBR,
+        test: 'Conteúdo para uso próprio do projeto'
+      }
+    }
+  })
+
+export const i18n = initI18n({ locale: 'esLA' }) // 此处指定初始的默认语言
+```
+
+通过上述代码，Vue3 项目支持四个语种的国际化环境就配置好了。Vue2 的项目配置方法也一样，都是导入小语种的国际化语言包后，混入项目的国际化内容即可。

next/.gitignore

@@ -0,0 +1,2 @@
+./cloud-icons/categorys.ts
+./scene-theme/docs/.vitepress/cache

next/cloud-icons/.gitignore

@@ -0,0 +1,3 @@
+/style
+/json
+/example

next/cloud-icons/README.md

@@ -0,0 +1,80 @@
+# Cloud Design Icons 云规范图标库
+
+该图标库包含云控制台应用开发中的系统图标，各云服务图标和服务扩展图标。其中系统图标是单色的常用图标，具有统一的尺寸和内边距，容易集成到项目中。服务图标和服务扩展图标为明亮艳丽的彩色图标，突出了各服务的特点。
+
+它是跨框架的图标库，支持所有前端Web项目， 原生的javascript工程，Vue/React/Angular等等。
+它即支持原始的`CSS` 样式文件引入，也支持与 `Vite` 等构建工程使用，详见使用小节。
+
+## 安装 Installation
+
+```
+npm install @opentiny/cloud-icons
+
+```
+
+## 使用 Usage
+
+1. 整体引入css使用:
+
+   在工程中引入图标的css文件： `import "@opentiny/cloud-icons/style/all.css"`, 也可以根据使用情况，按类别导入图标，以减小引入样式文件的体积.
+
+- 全量图标: all.css
+- 基础图标: base.css
+- 服务图标: svc.css
+- 服务扩展图标: ext.css
+
+2. 引入 @unocss/preset-icons 插件使用
+
+```javascript
+import { defineConfig } from 'vite'
+import UnoCSS from 'unocss/vite'
+import presetIcons from '@unocss/preset-icons'
+
+export default defineConfig({
+  plugins: [
+    UnoCSS({
+      presets: [
+        presetIcons({
+          prefix: '',
+          extraProperties: {
+            display: 'inline-block',
+            'vertical-align': 'middle'
+          },
+          collections: {
+            ci: () => import('@opentiny/cloud-icons/json/icons.json').then((i) => i.default)
+          }
+        })
+      ]
+    })
+  ]
+})
+```
+
+3. 引入图标
+   通过图标名引用所需图标： <code>&lt;i class="ci-search"&gt;&lt;/i&gt;</code>
+
+## 浏览所有图标 Browser Icons
+
+[在线预览](https://github.io)
+
+# 开发指南
+
+## 导入图标
+
+将设计师提供的图标导入`svgs` 目录， 文件夹及文件名必须符合以下要求：
+
+1. 子目录名称为大分类，每次增加大分类文件夹后，需要在 `index.html` 中的分类下拉列表中，添加相应的名称
+2. 分类目录的子目录名为“图标组名”， 用数字控制组名的排序。
+3. 文件名必须符合： 排序#中文名-英文名.svg
+
+图标导入时需要检查，以免导入不符合规范的图标：
+
+1. 图标尺寸是否规范， 是否正方形，是否固定内边距；
+2. 不需要顶部的 < ?xml version="1.0" encoding="utf-8"? >
+3. 单色图标需要 fill="currentColor"
+4. 图标内不允许有 <image> 标签, 比如openkruise.svg
+
+## 已知问题和约束
+
+- `svg` 文件名要统一，尽量小写和连字符， 中文- 英文字母， 不要 @， 不要有空格
+- `svg` 文件名涉及专有服务名时，可以大写，但是受`@unocss/preset-icons` 库的限制，它不支持图标类名大写，所以导出的图标名称统一为小写。

next/cloud-icons/index.html

@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>云规范图标集预览</title>
+    <style>
+      .hide {
+        display: none;
+      }
+      body {
+        padding: 0 24px 48px;
+      }
+      #list .icon-item {
+        display: inline-block;
+        text-align: center;
+        font-size: 12px;
+        color: #575d6c;
+      }
+      #list i {
+        margin: 20px;
+        transition: all 0.5s;
+      }
+      #list i:hover {
+        transform: scale(1.5);
+        cursor: copy;
+      }
+      .icon-counts {
+        color: #0057c3;
+        text-decoration: underline;
+        margin-left: 8px;
+        cursor: pointer;
+      }
+      .icons-group {
+        margin-bottom: 0;
+        margin-top: 32px;
+      }
+      .icon-title,
+      .icon-name {
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      #list .base {
+        font-size: 32px;
+      }
+      #list .base ~ div {
+        width: 80px;
+      }
+      #list .svc {
+        font-size: 72px;
+      }
+      #list .svc ~ div {
+        width: 108px;
+      }
+      #list .ext,
+      #list .stat {
+        font-size: 80px;
+      }
+      #list .ext ~ div,
+      #list .stat ~ div {
+        width: 120px;
+      }
+      .settings {
+        display: flex;
+        justify-content: space-between;
+      }
+      .settings label {
+        margin: 0 16px 12px;
+      }
+      .settings label {
+        font-weight: bold;
+      }
+
+      .dlg-root {
+        margin: 24px;
+      }
+      code {
+        padding: 4px;
+        background-color: #e5e5e5;
+        cursor: pointer;
+        user-select: all;
+      }
+    </style>
+    <link rel="stylesheet" href="./style/all.css" />
+  </head>
+  <body>
+    <div id="app">
+      <h1 style="text-align: center">云规范图标集预览</h1>
+      <div class="settings">
+        <div>
+          <label> 选择图标集:</label>
+          <select id="sel-category" is="ui-select">
+            <option value="base">系统图标</option>
+            <option value="svc">服务图标</option>
+            <option value="ext">扩展图标</option>
+            <option value="stat">状态图标</option>
+          </select>
+          <span class="hide">
+            <label> 引用方式:</label>
+            <select id="sel-type" is="ui-select">
+              <option value="ci">class</option>
+              <option value="ci">json-data</option>
+            </select>
+          </span>
+          <label> 图标颜色:</label>
+          <input id="sel-color" type="color" is="ui-color" value="#000000" />
+          <label> 复制方式:</label>
+          <select id="sel-copy" is="ui-select">
+            <option value="all">完整标签</option>
+            <option value="only-name">图标类名</option>
+          </select>
+          <ui-lighttip id="lightTip" type="success">复制成功</ui-lighttip>
+        </div>
+        <div>
+          <button id="btnHelp" type="primary" class="ui-button">使用说明</button>
+        </div>
+      </div>
+      <div id="list"></div>
+
+      <dialog id="dlgHelp" is="ui-dialog">
+        <div class="dlg-root">
+          <h3>1、安装</h3>
+          <div>在项目中安装: <code>npm i @opentiny/cloud-icons</code></div>
+          <h3>2、通过css 引用</h3>
+          <div>在工程中引入图标的css文件： <code>import "@opentiny/cloud-icons/style/all.css"</code></div>
+          <h3>3、通过 @unocss/preset-icons 插件按需引用</h3>
+          <div>
+            例如vite工程中，配置UnoCss的图标插件：
+            <pre id="helpCode"></pre>
+          </div>
+
+          <h3>4、使用图标</h3>
+          <ul>
+            <li>
+              通过图标名引用所需图标： <code>&lt;i class="ci-search"&gt;&lt;/i&gt;</code> 会得到
+              <i class="ci-search"></i>
+            </li>
+            <li>通过修改图标的 <code>color \ font-size</code> 控制图标的大小和颜色。</li>
+          </ul>
+        </div>
+      </dialog>
+    </div>
+
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>