feat(sys-client): add some copy-btns; optimize ux exp;

labring · Nov 1, 2021 · 91ff431 · 91ff431
1 parent 61b8f9d
commit 91ff431
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 12 deletions.
diff --git a/packages/system-client/src/layout/components/Navbar.vue b/packages/system-client/src/layout/components/Navbar.vue
@@ -2,7 +2,9 @@
   <div class="navbar">
     <div class="nav-leading">
       <div class="logo">
-        <img src="https://laf.laogen.site/logo.png">
+        <a href="/">
+          <img src="https://laf.laogen.site/logo.png">
+        </a>
       </div>
       <div class="title">{{ title }}</div>
     </div>
@@ -12,19 +14,36 @@
     </div>
     <div class="right-menu">
       <screenfull id="screenfull" class="right-menu-item hover-effect" />
-      <div class="github right-menu-item">
+      <!-- <div class="github right-menu-item">
         <a target="_blank" href="https://github.com/Maslow/laf/">
           GitHub
         </a>
-      </div>
+      </div> -->
       <el-dropdown class="profile-container right-menu-item hover-effect" trigger="click">
         <div class="profile-wrapper">
           <div class="user-name">{{ name }}</div>
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>
+            <a target="_blank" href="/">
+              我的应用
+            </a>
+          </el-dropdown-item>
+          <el-dropdown-item divided>
+            <div class="content">
+              <a target="_blank" href="https://laf.laogen.site/">开发文档 <i class="el-icon-link" /></a>
+            </div>
+          </el-dropdown-item>
+          <el-dropdown-item divided>
+            <div class="content">
+              <a target="_blank" href="https://github.com/Maslow/laf/">
+                GitHub <i class="el-icon-link" />
+              </a>
+            </div>
+          </el-dropdown-item>
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">退出登录</span>
+            <span style="display:block;color: red;">退出登录</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>

diff --git a/packages/system-client/src/views/application/index.vue b/packages/system-client/src/views/application/index.vue
@@ -55,16 +55,18 @@
         </el-table-column>
         <el-table-column fixed="right" label="操作" align="center" width="320" class-name="small-padding">
           <template slot-scope="{row}">
-            <el-button type="success" size="mini" @click="toDetail(row)">
-              开发管理
-            </el-button>
+            <el-tooltip :content="row.status !== 'running' ? '请在开发前启动服务！' : '编写云函数、查看日志、管理数据库、文件、成员协作等'" effect="light" placement="top">
+              <el-button type="success" size="mini" :disabled="row.status !== 'running'" @click="toDetail(row)">
+                开发管理
+              </el-button>
+            </el-tooltip>
             <el-button type="default" size="mini" @click="exportApp(row)">
               导出
             </el-button>
             <el-button type="default" size="mini" @click="showImportForm(row)">
               导入
             </el-button>
-            <el-tooltip content="释放即完全删除应用，暂不可恢复，谨慎操作!" effect="light" placement="left">
+            <el-tooltip content="释放即完全删除应用，暂不可恢复，谨慎操作，仅应用创建者可执行此操作!" effect="light" placement="left">
               <el-button plain size="mini" type="default" @click="deleteApp(row)">
                 释放
               </el-button>
@@ -120,9 +122,11 @@
         </el-table-column>
         <el-table-column fixed="right" label="操作" align="center" width="320" class-name="small-padding">
           <template slot-scope="{row}">
-            <el-button type="success" size="mini" @click="toDetail(row)">
-              开发管理
-            </el-button>
+            <el-tooltip :content="row.status !== 'running' ? '请在开发前启动服务！' : '编写云函数、查看日志、管理数据库、文件、成员协作等'" effect="light" placement="top">
+              <el-button type="success" size="mini" :disabled="row.status !== 'running'" @click="toDetail(row)">
+                开发管理
+              </el-button>
+            </el-tooltip>
             <el-button type="default" size="mini" @click="exportApp(row)">
               导出
             </el-button>

diff --git a/packages/system-client/src/views/dashboard/index.vue b/packages/system-client/src/views/dashboard/index.vue
@@ -16,18 +16,21 @@
     <div class="row">
       <div class="label">应用ID：</div>
       <div class="content">{{ app.appid }}</div>
+      <i v-clipboard:message="app.appid" v-clipboard:success="onCopy" class="el-icon-document-copy copy-btn" />
     </div>
     <div class="row">
       <div class="label">服务地址：</div>
       <div class="content">
-        <a style="color: blue"> {{ getAppUrl() }}</a>
+        <a style="color: black; text-decoration: undeline"> {{ getAppUrl() }}</a>
+        <i v-clipboard:message="getAppUrl()" v-clipboard:success="onCopy" class="el-icon-document-copy copy-btn" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
 import { getAppAccessUrl } from '@/api/application'
+import { showSuccess } from '@/utils/show'
 
 export default {
   name: 'Dashboard',
@@ -45,6 +48,9 @@ export default {
   methods: {
     getAppUrl() {
       return getAppAccessUrl()
+    },
+    onCopy() {
+      showSuccess('已复制到剪贴板')
     }
   }
 }
@@ -82,4 +88,11 @@ export default {
   color: black;
   padding-left: 10px;
 }
+
+.copy-btn {
+  color: green;
+  font-size: 16px;
+  margin-left: 10px;
+  cursor: pointer;
+}
 </style>