演示环境和演示开发环境

.env.demo-dev

@@ -0,0 +1,21 @@
+ENV = 'demo-dev'
+
+# REST API地址
+VITE_BASE_URL = '/api' # 配合vite.config.js中的代理配置解决跨域问题
+
+# 本地开发OSS对象服务跨域代理标识
+VITE_OSS_CORS_FLAG = '/oss/'  # 本地开发需要在vite.config.js中配置代理
+
+# ws地址
+VITE_WS_URL = 'ws://localhost:8080/ws'
+
+# title
+VITE_TITLE = 'Open-AnyLink(开发环境)'
+
+# 登录密码加密算法的固定key
+VITE_FIXED_KEY = 'WBQNoZOFLEhOIuZ10Yeu0VLmwkynKhkw'
+
+# demo环境标识
+VITE_DEMO_FLAG = true
+
+VITE_DEMO_ACCOUNTS = '[{"account":"a123456","password":"111111"},{"account":"a00001","password":"111111"},{"account":"a00002","password":"111111"},{"account":"a00003","password":"111111"},{"account":"a00004","password":"111111"},{"account":"a00005","password":"111111"},{"account":"a00006","password":"111111"},{"account":"a00007","password":"111111"}]'

.env.demo-prod

@@ -0,0 +1,21 @@
+ENV = 'demo-prod'
+
+# REST API地址
+VITE_BASE_URL = 'https://open-anylink.com/api/'
+
+# 本地开发OSS对象服务跨域代理标识
+VITE_OSS_CORS_FLAG = '' # 生产环境不用配置代理，在OSS控制台的bucket下设置跨域来源即可
+
+# ws地址
+VITE_WS_URL = 'wss://open-anylink.com/ws'
+
+# title
+VITE_TITLE = 'Open-AnyLink'
+
+# 登录密码加密算法的固定key
+VITE_FIXED_KEY = 'XS9Ng2cur4YijQ3z4aDkPdbSR3ZyG3Qf'
+
+# demo环境标识
+VITE_DEMO_FLAG = true
+
+VITE_DEMO_ACCOUNTS = '[{"account":"demo01","password":"admin9527"},{"account":"demo02","password":"admin9527"},{"account":"demo03","password":"admin9527"},{"account":"demo04","password":"admin9527"},{"account":"demo05","password":"admin9527"},{"account":"demo06","password":"admin9527"},{"account":"demo07","password":"admin9527"},{"account":"demo08","password":"admin9527"}]'

.env.development

@@ -15,12 +15,7 @@ VITE_TITLE = 'Open-AnyLink(开发环境)'
 # 登录密码加密算法的固定key
 VITE_FIXED_KEY = 'WBQNoZOFLEhOIuZ10Yeu0VLmwkynKhkw'
 
-VITE_DEMO_ACCOUNT_1 = 'a123456'
-VITE_DEMO_ACCOUNT_2 = 'a00004'
-VITE_DEMO_ACCOUNT_3 = 'b00003'
-VITE_DEMO_ACCOUNT_4 = 'b00004'
+# demo环境标识
+VITE_DEMO_FLAG = false
 
-VITE_DEMO_PASSWORD_1 = '111111'
-VITE_DEMO_PASSWORD_2 = '111111'
-VITE_DEMO_PASSWORD_3 = '111111'
-VITE_DEMO_PASSWORD_4 = '111111'
+VITE_DEMO_ACCOUNTS = '{}'

.env.production

@@ -15,12 +15,7 @@ VITE_TITLE = 'Open-AnyLink'
 # 登录密码加密算法的固定key
 VITE_FIXED_KEY = 'XS9Ng2cur4YijQ3z4aDkPdbSR3ZyG3Qf'
 
-VITE_DEMO_ACCOUNT_1 = 'demo01'
-VITE_DEMO_ACCOUNT_2 = 'demo02'
-VITE_DEMO_ACCOUNT_3 = 'demo03'
-VITE_DEMO_ACCOUNT_4 = 'demo04'
+# demo环境标识
+VITE_DEMO_FLAG = false
 
-VITE_DEMO_PASSWORD_1 = 'admin9527'
-VITE_DEMO_PASSWORD_2 = 'admin9527'
-VITE_DEMO_PASSWORD_3 = 'admin9527'
-VITE_DEMO_PASSWORD_4 = 'admin9527'
+VITE_DEMO_ACCOUNTS = '{}'

package.json

@@ -5,8 +5,12 @@
   "type": "module",
   "scripts": {
     "dev": "vite --mode development",
+    "demo": "vite --mode demo-dev",
+    "demo-dev": "vite --mode demo-dev",
     "build": "vite build --mode development",
     "build:prod": "vite build --mode production",
+    "build:demo": "vite build --mode demo-prod",
+    "build:demo-prod": "vite build --mode demo-prod",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
     "format": "prettier --write src/",

src/views/LoginPage.vue

@@ -30,12 +30,8 @@ const formModel = ref({
 const form = ref()
 const isRemenberMe = ref(false)
 
-const demoData = [
-  { account: import.meta.env.VITE_DEMO_ACCOUNT_1, password: import.meta.env.VITE_DEMO_PASSWORD_1 },
-  { account: import.meta.env.VITE_DEMO_ACCOUNT_2, password: import.meta.env.VITE_DEMO_PASSWORD_2 },
-  { account: import.meta.env.VITE_DEMO_ACCOUNT_3, password: import.meta.env.VITE_DEMO_PASSWORD_3 },
-  { account: import.meta.env.VITE_DEMO_ACCOUNT_4, password: import.meta.env.VITE_DEMO_PASSWORD_4 }
-]
+const demoFlag = import.meta.env.VITE_DEMO_FLAG
+const demoData = JSON.parse(import.meta.env.VITE_DEMO_ACCOUNTS)
 
 // 表单的校验规则
 const rules = {
@@ -513,7 +509,7 @@ watch(tabMode, () => {
             </div>
           </el-form-item>
         </el-form>
-        <div v-if="tabMode === 'login'" class="demo-info">
+        <div v-if="demoFlag === 'true' && tabMode === 'login'" class="demo-info">
           <el-divider class="separation-line" content-position="center">演示账号</el-divider>
           <div class="demo-detail">
             <span
@@ -650,6 +646,7 @@ watch(tabMode, () => {
           display: flex;
           flex-direction: row;
           justify-content: space-around;
+          flex-wrap: wrap;
 
           .demo-item {
             display: flex;
@@ -657,9 +654,9 @@ watch(tabMode, () => {
             font-size: 14px;
             font-weight: bold;
             color: #409eff;
-            padding: 2px 10px 2px 10px;
-            margin-left: 5px;
-            margin-right: 5px;
+            padding: 5px 10px 5px 10px;
+            margin-left: 10px;
+            margin-right: 10px;
             border-radius: 4px;
             cursor: pointer;