Skip to content

Commit

Permalink
fix(sys-client): fix styles for small screen;
Browse files Browse the repository at this point in the history
  • Loading branch information
@maslow
maslow committed Nov 15, 2021
1 parent 5d4563d commit f7994ca
Show file tree
Hide file tree
Showing 9 changed files with 73 additions and 109 deletions.
54 changes: 21 additions & 33 deletions packages/system-client/src/views/application/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<div class="app-group">
<div class="app-group-title">我创建的应用</div>
<el-table v-loading="loading" empty-text="还没有创建应用" :data="applications.created" style="width: 100%;margin-top:10px;" stripe>
<el-table-column align="center" label="App ID" width="320">
<el-table-column align="center" label="App ID" min-width="180">
<template slot-scope="scope">
<div class="table-row">
<el-tooltip :content="scope.row.appid" effect="light" placement="top">
Expand All @@ -23,27 +23,27 @@
</div>
</template>
</el-table-column>
<el-table-column align="center" label="应用名" width="400">
<el-table-column align="center" label="应用名" min-width="200">
<template slot-scope="{row}">
<span class="link-type table-column-text" @click="showUpdateForm(row)">{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="状态" width="100">
<el-table-column align="center" label="状态" min-width="80">
<template slot-scope="scope">
{{ scope.row.status }}
</template>
</el-table-column>
<el-table-column align="center" label="服务版本" width="100">
<el-table-column align="center" label="服务版本" min-width="80">
<template slot-scope="scope">
{{ getRuntimeVersion(scope.row) }}
</template>
</el-table-column>
<el-table-column align="center" label="运行内存" width="100">
<el-table-column align="center" label="运行内存" min-width="80">
<template slot-scope="scope">
{{ getRuntimeMemory(scope.row) }} M
</template>
</el-table-column>
<el-table-column label="服务启停" align="center" width="300" class-name="small-padding">
<el-table-column label="服务启停" align="center" width="200" class-name="small-padding">
<template slot-scope="{row}">
<el-button v-if="row.status !== 'running'" :loading="serviceLoading" plain type="success" size="mini" @click="startApp(row)">
启动
Expand All @@ -63,13 +63,13 @@
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center">
<el-table-column label="创建时间" align="center" min-width="100">
<template slot-scope="{row}">
<span v-if="row.created_at">{{ row.created_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
<span v-if="row.created_at">{{ row.created_at | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="320" class-name="small-padding">
<el-table-column fixed="right" label="操作" align="center" width="300" class-name="small-padding">
<template slot-scope="{row}">
<el-tooltip :content="row.status !== 'running' ? '请在开发前启动服务！' : '编写云函数、查看日志、管理数据库、文件、成员协作等'" effect="light" placement="top">
<el-button type="success" size="mini" :disabled="row.status !== 'running'" @click="toDetail(row)">
Expand Down Expand Up @@ -97,7 +97,7 @@
<div class="app-group">
<div class="app-group-title">我加入的应用</div>
<el-table v-loading="loading" empty-text="还没有加入的应用" :data="applications.joined" style="width: 100%;margin-top:10px;" stripe>
<el-table-column align="center" label="App ID" width="320">
<el-table-column align="center" label="App ID" min-width="180">
<template slot-scope="scope">
<div class="table-row">
<el-tooltip :content="scope.row.appid" effect="light" placement="top">
Expand All @@ -107,27 +107,27 @@
</div>
</template>
</el-table-column>
<el-table-column align="center" label="应用名" width="400">
<el-table-column align="center" label="应用名" min-width="200">
<template slot-scope="{row}">
<span class="link-type table-column-text" @click="showUpdateForm(row)">{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="状态" width="100">
<el-table-column align="center" label="状态" min-width="80">
<template slot-scope="scope">
{{ scope.row.status }}
</template>
</el-table-column>
<el-table-column align="center" label="服务版本" width="100">
<el-table-column align="center" label="服务版本" min-width="80">
<template slot-scope="scope">
{{ getRuntimeVersion(scope.row) }}
</template>
</el-table-column>
<el-table-column align="center" label="运行内存" width="100">
<el-table-column align="center" label="运行内存" min-width="min">
<template slot-scope="scope">
{{ getRuntimeMemory(scope.row) }} M
</template>
</el-table-column>
<el-table-column label="服务启停" align="center" width="300" class-name="small-padding">
<el-table-column label="服务启停" align="center" width="200" class-name="small-padding">
<template slot-scope="{row}">
<el-button v-if="row.status !== 'running'" :loading="serviceLoading" plain type="success" size="mini" @click="startApp(row)">
启动
Expand All @@ -147,13 +147,13 @@
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center">
<el-table-column label="创建时间" align="center" min-width="100">
<template slot-scope="{row}">
<span v-if="row.created_at">{{ row.created_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
<span v-if="row.created_at">{{ row.created_at | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="320" class-name="small-padding">
<el-table-column fixed="right" label="操作" align="center" width="300" class-name="small-padding">
<template slot-scope="{row}">
<el-tooltip :content="row.status !== 'running' ? '请在开发前启动服务！' : '编写云函数、查看日志、管理数据库、文件、成员协作等'" effect="light" placement="top">
<el-button type="success" size="mini" :disabled="row.status !== 'running'" @click="toDetail(row)">
Expand Down Expand Up @@ -364,7 +364,7 @@ export default {
// 执行创建请求
const res = await updateApplication(this.form.appid, { name: this.form.name })
if (!res.data.ok) {
if (res.error) {
this.$notify({
type: 'error',
title: '操作失败',
Expand All @@ -373,11 +373,7 @@ export default {
return
}
this.$notify({
type: 'success',
title: '操作成功',
message: '更新成功！'
})
showSuccess('更新成功！')
this.loadApps()
this.dialogFormVisible = false
Expand Down Expand Up @@ -499,7 +495,6 @@ export default {
<style scoped>
.application-container {
padding: 20px;
width: calc(100vw - 30px);
margin: 15px auto;
}
Expand All @@ -516,16 +511,9 @@ export default {
white-space: nowrap;
}
.app-secret {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 240px;
}
.copy-btn {
display: block;
font-size: 16px;
font-size: 15px;
cursor: pointer;
}
Expand Down
18 changes: 9 additions & 9 deletions packages/system-client/src/views/cloudfunction/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
highlight-current-row
style="width: 100%;"
>
<el-table-column label="函数标识" min-width="120">
<el-table-column label="函数标识" min-width="140">
<template slot-scope="{row}">
<div style="display: flex;align-items: center;justify-content: space-between;">
<div class="func-name">
Expand All @@ -56,17 +56,17 @@
</div>
</template>
</el-table-column>
<el-table-column label="函数标题" min-width="120px">
<el-table-column label="函数标题" min-width="140">
<template slot-scope="{row}">
<span class="link-type" @click="showUpdateForm(row)">{{ row.label }}</span>
</template>
</el-table-column>
<el-table-column label="标签" min-width="140">
<el-table-column label="标签" width="140">
<template slot-scope="{row}">
<el-tag v-for="tag in row.tags" :key="tag" style="margin-right: 6px;" type="primary" size="mini">{{ tag }}</el-tag>
</template>
</el-table-column>
<el-table-column label="创建/更新时间" width="150px" align="center">
<el-table-column label="创建/更新" width="120px" align="center">
<template slot-scope="{row}">
<span v-if="row.created_at">{{ row.created_at | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
<span v-else>-</span>
Expand All @@ -75,7 +75,7 @@
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="HTTP访问" class-name="status-col" width="100">
<el-table-column label="HTTP" class-name="status-col" width="60">
<template slot-scope="{row}">
<el-tag v-if="row.enableHTTP" type="success" size="mini" style="font-weight: bold">
可
Expand All @@ -85,7 +85,7 @@
</el-tag>
</template>
</el-table-column>
<el-table-column label="启停状态" class-name="status-col" width="80">
<el-table-column label="状态" class-name="status-col" width="60">
<template slot-scope="{row}">
<el-tag v-if="row.status === 1" type="success" size="mini" style="font-weight: bold">
启
Expand All @@ -95,17 +95,17 @@
</el-tag>
</template>
</el-table-column>
<el-table-column label="调用地址" align="center" width="80px">
<el-table-column label="调用地址" align="center" width="70">
<template slot-scope="{row}">
<el-tooltip :content="getFunctionInvokeBaseUrl(row.name)" placement="top">
<i v-clipboard:message="getFunctionInvokeBaseUrl(row.name)" v-clipboard:success="onCopy" class="el-icon-document-copy copy-btn" />
</el-tooltip>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="380" class-name="small-padding">
<el-table-column fixed="right" label="操作" align="center" width="300" class-name="small-padding">
<template slot-scope="{row,$index}">
<el-button plain type="success" size="mini" @click="handleShowDetail(row)">
调试
开发
</el-button>
<el-button plain type="info" size="mini" @click="handleShowLogs(row)">
日志
Expand Down
14 changes: 7 additions & 7 deletions packages/system-client/src/views/cloudfunction/logs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,28 +25,28 @@
highlight-current-row
style="width: 100%;"
>
<el-table-column label="RequestId" prop="id" align="center" width="280">
<el-table-column label="RequestId" prop="id" align="center" width="240">
<template slot-scope="{row}">
<span>{{ row.requestId }}</span>
</template>
</el-table-column>
<el-table-column label="函数名" width="200px" align="center">
<el-table-column label="函数名" width="160" align="center">
<template slot-scope="{row}">
<el-tag type="primary">{{ row.func_name }}</el-tag>
</template>
</el-table-column>
<el-table-column label="函数ID" min-width="150px" align="center">
<el-table-column label="函数ID" min-width="160" align="center">
<template slot-scope="{row}">
<span class="link-type">{{ row.func_id }}</span>
</template>
</el-table-column>
<el-table-column label="执行用时" min-width="100px" align="center">
<el-table-column label="执行用时" min-width="100" align="center">
<template slot-scope="{row}">
<span v-if="row.time_usage" class="link-type">{{ row.time_usage }}ms</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="创建时间" width="160px" align="center">
<el-table-column label="创建时间" width="160" align="center">
<template slot-scope="{row}">
<span v-if="row.created_at">{{ row.created_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
<span v-else>-</span>
Expand All @@ -57,10 +57,10 @@
{{ row.created_by || '-' }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
<el-table-column label="操作" align="center" width="80" class-name="small-padding fixed-width">
<template slot-scope="{row}">
<el-button type="info" size="mini" @click="handleShowDetail(row)">
查看调用日志
查看
</el-button>
</template>
</el-table-column>
Expand Down
29 changes: 8 additions & 21 deletions packages/system-client/src/views/cloudfunction/triggers.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,56 +25,43 @@
<el-table-column
label="ID"
prop="_id"
sortable="custom"
align="center"
width="240"
width="220"
>
<template slot-scope="{row}">
<span>{{ row._id }}</span>
</template>
</el-table-column>
<el-table-column label="名称" width="150">
<el-table-column label="名称" min-width="120">
<template slot-scope="{row}">
<span class="link-type" @click="showUpdateForm(row)">{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column label="类型" align="center">
<el-table-column label="类型" align="center" width="80">
<template slot-scope="{row}">
<el-tag v-if="row.type === 'event'" type="primary">事件</el-tag>
<el-tag v-if="row.type === 'timer'" type="success">定时器</el-tag>
</template>
</el-table-column>
<el-table-column label="间隔/事件" align="center">
<el-table-column label="间隔/事件" align="center" width="100">
<template slot-scope="{row}">
<span v-if="row.type === 'event'">{{ row.event }}</span>
<span v-if="row.type === 'timer'">{{ row.duration }}</span>
</template>
</el-table-column>
<el-table-column label="描述" align="center">
<template slot-scope="{row}">
<span v-if="row.desc">{{ row.desc }}</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="创建时间" width="150px" align="center">
<template slot-scope="{row}">
<span v-if="row.created_at">{{ row.created_at | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="更新时间" width="150px" align="center">
<el-table-column label="创建/更新" width="140" align="center">
<template slot-scope="{row}">
<span v-if="row.created_at">{{ row.created_at | parseTime('{y}-{m}-{d} {h}:{i}') }}</span><br>
<span v-if="row.updated_at">{{ row.updated_at | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="状态" class-name="status-col" width="120">
<el-table-column label="状态" class-name="status-col" width="80">
<template slot-scope="{row}">
<el-tag v-if="row.status === 0" type="danger">停用</el-tag>
<el-tag v-if="row.status === 1" type="success">启用</el-tag>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="340" class-name="small-padding fixed-width">
<el-table-column fixed="right" label="操作" align="center" width="240" class-name="small-padding fixed-width">
<template slot-scope="{row,$index}">
<el-button type="info" size="mini" @click="showTriggerLogs(row)">日志</el-button>
<el-button type="primary" size="mini" @click="showUpdateForm(row)">
Expand Down
10 changes: 5 additions & 5 deletions packages/system-client/src/views/database/policies.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,12 @@
highlight-current-row
style="width: 100%;"
>
<el-table-column label="ID" prop="id" align="center" width="240">
<!-- <el-table-column label="ID" prop="id" align="center" width="220">
<template slot-scope="{row}">
<span>{{ row._id }}</span>
</template>
</el-table-column>
<el-table-column label="标识" align="center" width="150px">
</el-table-column> -->
<el-table-column label="标识" align="center" width="160px">
<template slot-scope="{row}">
<span>{{ row.name }}</span>
</template>
Expand Down Expand Up @@ -70,14 +70,14 @@
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="状态" class-name="status-col" width="120">
<el-table-column label="状态" class-name="status-col" width="80">
<template slot-scope="{row}">
<el-tag type="success">
{{ row.status | statusFilter }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="340" class-name="small-padding fixed-width">
<el-table-column label="操作" align="center" width="260" class-name="small-padding fixed-width">
<template slot-scope="{row,$index}">
<el-button type="success" size="mini" @click="handleShowDetail(row)">
详情
Expand Down
Loading

0 comments on commit f7994ca

Please sign in to comment.