@opentiny/vue-docs 3.21.2 → 3.21.4

package/demos/pc/webdoc/develop-demo-en.md

@@ -43,16 +43,13 @@ npm install @opentiny/vue@3
 Then modify the`vite.config.js`, add the following code highlighted section:
 
 ```js {8-10}
-//vite.config.js
+// vite.config.js
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
-  plugins: [vue()],
-  define: {
-    'process.env': { ...process.env }
-  }
+  plugins: [vue()]
 })
 ```
 

package/demos/pc/webdoc/develop-demo.md

@@ -49,10 +49,7 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
-  plugins: [vue()],
-  define: {
-    'process.env': { ...process.env }
-  }
+  plugins: [vue()]
 })
 ```
 

package/demos/pc/webdoc/installation-en.md

@@ -31,7 +31,7 @@ yarn add @opentiny/vue@2
 npm install @opentiny/vue@2
 ```
 
-If it's`Vite`After the dependency is installed, modify the project.`vite.config.js`, add the following code highlighted section:
+<code>@opentiny/vue</code>Supports multiple modes. If you are a `Vite` project and not a mobile client, you can modify the `vite.config.js` of the project by adding the highlighted parts of the following code, so that the project can shake off the mobile mode code during construction and optimize the volume of the packaged product:
 
 ```js {8-10}
 // vite.config.js
@@ -42,15 +42,14 @@ import vue from '@vitejs/plugin-vue'
 export default defineConfig({
   plugins: [vue()],
   define: {
-    'process.env': { ...process.env }
+    'process.env': { TINY_MODE: 'pc' }
   }
 })
 ```
 
 <div class="tip custom-block">
-<p> To avoid the uncertainty associated with monthly (minor) upgrades of <code> @opentiny/vue </code>, it is recommended to use ~ before relying on the version number of the package in <code> package.json </code> in your project.
-For example, <code>"@opentiny/vue": "~3.12.0</code>. </p>
-<p><code> @opentiny/vue </code> supports multiple modes. If your project is not a mobile project, you can declare the value of <code>TINY_MODE</code> in <code>process.env</code> in the above configuration code. In order to make the project during construction, the mobile side code can be shaken off and the volume of the packaged product can be optimized. For example, <code>'process.env': {... env,TINY_MODE:'pc'}</code>. </p>
+  <p>To avoid the uncertainty caused by monthly minor upgrades of<code>@opentiny/vue</code>, it is recommended to use ~ before the version number of the dependent package in <code>package.json</code> in your project,
+  For example,<code>"@opentiny/vue": "~3.12.0"</code>.</p>
 </div>
 
 ## Import through CDN

package/demos/pc/webdoc/installation.md

@@ -31,7 +31,7 @@ yarn add @opentiny/vue@2
 npm install @opentiny/vue@2
 ```
 
-如果是`Vite` 工程，安装完依赖后，修改项目的 `vite.config.js` ，添加以下代码突出显示的部分：
+<code> @opentiny/vue </code> 支持多种模式。如果您是 `Vite` 工程且非移动端，可以修改项目的 `vite.config.js`，添加以下代码突出显示的部分，以使工程在构建时，能将移动端模式的代码摇掉，优化打包产物的体积：
 
 ```js {8-10}
 // vite.config.js
@@ -42,15 +42,14 @@ import vue from '@vitejs/plugin-vue'
 export default defineConfig({
   plugins: [vue()],
   define: {
-    'process.env': { ...process.env }
+    'process.env': { TINY_MODE: 'pc' }
   }
 })
 ```
 
 <div class="tip custom-block">
   <p>为了避免<code> @opentiny/vue </code> 的月度版本 (minor) 升级带来的不确定因素，因此推荐在您的工程中的<code> package.json </code> 中依赖包的版本号前使用 ~，
-    比如 <code>"@opentiny/vue": "~3.12.0</code>。</p>
-  <p><code> @opentiny/vue </code> 支持多种模式。如果您的工程非移动端工程，可以在上面配置代码中的<code>process.env</code>中，声明<code>TINY_MODE</code>的值，以使工程在构建时，能将移动端模式的代码摇掉，优化打包产物的体积。比如 <code>'process.env': { ...process.env,TINY_MODE:'pc' }</code>。</p>
+    比如 <code>"@opentiny/vue": "~3.12.0"</code>。</p>
 </div>
 
 ## 通过 CDN 方式引入 (v3.16.0 及之前的版本可用)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.21.2",
+  "version": "3.21.4",
   "license": "MIT",
   "dependencies": {
     "@docsearch/css": "^3.8.0",
@@ -20,19 +20,19 @@
     "vue-i18n": "^9.1.10",
     "vue-router": "4.1.5",
     "@opentiny/vue": "~3.21.2",
+    "@opentiny/vue-design-smb": "~3.21.0",
     "@opentiny/vue-design-aurora": "~3.21.0",
-    "@opentiny/vue-common": "~3.21.0",
     "@opentiny/vue-design-saas": "~3.21.0",
-    "@opentiny/vue-directive": "~3.21.0",
-    "@opentiny/vue-icon": "~3.21.0",
-    "@opentiny/vue-design-smb": "~3.21.0",
     "@opentiny/vue-hooks": "~3.21.0",
+    "@opentiny/vue-icon": "~3.21.0",
+    "@opentiny/vue-directive": "~3.21.0",
+    "@opentiny/vue-common": "~3.21.0",
     "@opentiny/vue-icon-multicolor": "~3.21.0",
-    "@opentiny/vue-theme": "~3.21.0",
+    "@opentiny/vue-theme-mobile": "~3.21.0",
     "@opentiny/vue-icon-saas": "~3.21.0",
+    "@opentiny/vue-theme": "~3.21.2",
     "@opentiny/vue-theme-saas": "~3.21.0",
-    "@opentiny/vue-vite-import": "~1.2.0",
-    "@opentiny/vue-theme-mobile": "~3.21.0"
+    "@opentiny/vue-vite-import": "~1.2.0"
   },
   "devDependencies": {
     "@playwright/test": "~1.49.0",

package/src/views/docs/docs.vue

@@ -1,5 +1,24 @@
 <template>
   <div class="ti-f-r ti-pt48 ti-pl48 ti-pr48 docs-container">
+    <tiny-modal v-model="showModal" title="请注意" status="warning" show-footer>
+      <div class="modal-body">
+        TinyVue 从 <span class="modal-body-keyword">3.13.0</span> 开始不需要在
+        <span class="modal-body-keyword">vite.config.js</span> 文件中配置
+        <span class="modal-body-keyword">define: { 'process.env': { ...process.env } }</span>
+        这段代码，这段代码会导致环境变量被打包到构建产物中，引起信息安全风险，请业务尽快升级到
+        <span class="modal-body-keyword">3.13.0</span> 或以上版本！如果不升级版本可以改成：<span
+          class="modal-body-keyword"
+          >define: { 'process.env': { }}</span
+        >
+        同样也可以解决此问题！感谢您对 TinyVue 的支持！
+      </div>
+      <template #footer>
+        <tiny-button type="primary" :disabled="disabled" @click="handleConfirm">{{
+          disabled ? `${time} S后可关闭此提示` : '确认将不再弹出此提示'
+        }}</tiny-button>
+        <tiny-button @click="handleCancel">取消</tiny-button>
+      </template>
+    </tiny-modal>
     <component id="doc_wrap" :is="docCmp" class="ti-w0 ti-fi-1" />
     <!-- 目录列表 TODO: 需要锚点组件配置整改，处理id中的特殊字符 -->
     <!-- <div v-if="anchorLinks.length > 0" class="docs-page-anchor catalog w128 sticky top32 ml24">
@@ -11,10 +30,33 @@
 
 <script setup>
 import { ref, nextTick, watch, onMounted, shallowRef } from 'vue'
+import { Modal as TinyModal, Button as TinyButton } from '@opentiny/vue'
 import { getWord } from '@/tools'
 import docMDs from './docConfig.js'
 import { router } from '@/router.js'
 
+const tipFlag = localStorage.getItem('tiny-vue-env-tip')
+const showModal = ref(tipFlag !== 'never')
+const disabled = ref(true)
+let time = ref(5)
+if (showModal.value) {
+  let timer = setInterval(() => {
+    if (time.value > 0) {
+      time.value = time.value - 1
+    } else {
+      disabled.value = false
+      clearInterval(timer)
+      timer = null
+    }
+  }, 1000)
+}
+const handleConfirm = () => {
+  showModal.value = false
+  localStorage.setItem('tiny-vue-env-tip', 'never')
+}
+const handleCancel = () => {
+  showModal.value = false
+}
 const isOpen = import.meta.env.VITE_BUILD_TARGET === 'open'
 const openDocMap = {
   'envpreparation': 'envpreparation-open'
@@ -54,6 +96,9 @@ onMounted(() => {
 </script>
 
 <style lang="less">
+.modal-body .modal-body-keyword {
+  color: var(--tv-base-color-error-6);
+}
 .docs-container {
   flex: 1;
   display: flex;