fix: refactor theme & ui, add prism editor, (#279)

* feat: add prism editor * refactor: theme & ui * style: update ui & fix menu select * fix: json instance dispose * ui: update logo
labring · Aug 19, 2022 · 57d40f1 · 57d40f1
1 parent 3b118cd
commit 57d40f1
Show file tree

Hide file tree

Showing 33 changed files with 277 additions and 213 deletions.
diff --git a/packages/web/index.html b/packages/web/index.html
@@ -4,17 +4,17 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" href="/logo.png" type="image/svg+xml">
+  <link rel="icon" href="/favicon.ico" type="image/svg+xml">
   <title>Laf 云开发</title>
-  <meta name="description" content="Opinionated Vite Starter Template">
+  <meta name="description" content="laf 云开发，像写博客一样写函数，随手上线">
 </head>
 
 <body class="dark:text-white dark:bg-hex-121212">
   <div id="app"></div>
   <script>
     var global = global || window
     var Buffer = Buffer || []
-    var process = process || {env: {DEBUG: undefined}, version: []}
+    var process = process || { env: { DEBUG: undefined }, version: [] }
   </script>
   <script>
       (function () {

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -44,6 +44,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.0.17",
     "postcss": "^8.4.14",
+    "prismjs": "^1.28.0",
     "vite-plugin-vue-layouts": "^0.7.0",
     "vue": "^3.2.37",
     "vue-i18n": "^9.2.0",
@@ -57,6 +58,7 @@
     "@types/lodash": "^4.14.182",
     "@types/md5": "^2.3.2",
     "@types/node": "^18.6.3",
+    "@types/prismjs": "^1.26.0",
     "@unocss/reset": "^0.45.1",
     "@vitejs/plugin-vue": "^3.0.1",
     "@vue/test-utils": "^2.0.2",
@@ -75,6 +77,7 @@
     "vite-plugin-inspect": "^0.6.0",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-pages": "^0.25.0",
+    "vite-plugin-prismjs": "^0.0.8",
     "vitest": "^0.20.3",
     "vue-tsc": "^0.39.4"
   },

diff --git a/packages/web/public/favicon.ico b/packages/web/public/favicon.ico
diff --git a/packages/web/public/logo-v2.png b/packages/web/public/logo-v2.png
diff --git a/packages/web/src/components/FunctionEditor/diff.vue b/packages/web/src/components/FunctionEditor/diff.vue
@@ -63,11 +63,6 @@ function initEditor() {
 onMounted(() => {
   initEditor()
 })
-
-watch(() => props.modified, () => {
-  editorInstance.dispose()
-  initEditor()
-})
 </script>
 
 <template>
@@ -77,6 +72,6 @@ watch(() => props.modified, () => {
 <style lang="scss" scoped>
 .diff-editor {
   width: 100%;
-  min-height: 600px;
+  min-height: 400px;
 }
 </style>
diff --git a/packages/web/src/components/JsonEditor/param.vue b/packages/web/src/components/JsonEditor/param.vue
@@ -53,10 +53,6 @@ watch(() => props.modelValue, (value) => {
     editorInstance.setValue(JSON.stringify(toRaw(value), null, 2))
 })
 
-onDeactivated(() => {
-  editorInstance.dispose()
-})
-
 onUnmounted(() => {
   editorInstance.dispose()
 })

diff --git a/packages/web/src/components/PrismEditor/index.vue b/packages/web/src/components/PrismEditor/index.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import Prism from 'prismjs'
+
+const props = defineProps({
+  code: {
+    type: Object,
+  },
+  type: {
+    type: String,
+    default: 'html',
+  },
+  isShowlineNumbers: {
+    type: Boolean,
+    default: false,
+  },
+})
+const lineNumbers = computed(() => {
+  return props.isShowlineNumbers ? 'line-numbers' : ''
+})
+onMounted(() => {
+  nextTick(() => {
+    Prism.highlightAll() // 切换菜单重新渲染
+  })
+})
+</script>
+
+<template>
+  <pre :class="`hx-scroll ${lineNumbers}`">
+    <code :class="`language-${type}`" v-html="Prism.highlight(JSON.stringify(props.code, null, 2), Prism.languages.json, 'json')" />
+ </pre>
+</template>
+
diff --git a/packages/web/src/layout/AppLayout.vue b/packages/web/src/layout/AppLayout.vue
@@ -14,11 +14,11 @@ const router = useRouter()
       <el-aside width="240px" style="box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 5px 0px; z-index: 1">
         <el-scrollbar>
           <div class="flex items-center logo-wrap px-12px py-12px w-240px">
-            <el-button link class="w-240px !justify-start" @click="() => router.push('/')">
+            <el-button size="small" link class="w-240px !justify-start" @click="() => router.push('/')">
               <img
                 class="w-30px"
                 alt="logo"
-                src="/logo.png"
+                src="/logo-v2.png"
               ><span class="ml-8px"> {{ $t('layout.topbar.title') }}</span>
             </el-button>
           </div>

diff --git a/packages/web/src/layout/components/ResetPassword.vue b/packages/web/src/layout/components/ResetPassword.vue
@@ -81,7 +81,7 @@ defineExpose({ open, close })
       </el-form-item>
     </ElForm>
     <template #footer>
-      <el-button type="primary" @click="submitForm">
+      <el-button size="small" type="primary" @click="submitForm">
         {{ $t('utils.form.submit') }}
       </el-button>
     </template>

diff --git a/packages/web/src/layout/components/SideBar/index.vue b/packages/web/src/layout/components/SideBar/index.vue
@@ -15,16 +15,17 @@ const switchRoute = (item: any) => {
   router.push(path)
 }
 
-const openMenu = menus.value.map((item) => {
+const openMenu = menus.value.map((item: any) => {
   return item.name
 })
 
 const activeMenu = $computed(() => {
-  const { meta, path } = route
+  const { meta } = route
+
   if (meta.activeMenu)
     return meta.activeMenu
 
-  return path
+  return meta.index
 })
 
 const menuIcons: any = {
@@ -51,7 +52,7 @@ const menuIcons: any = {
 
         <span>{{ t(`layout.menu.${item.name}`) }}</span>
       </template>
-      <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path" @click="switchRoute(child)">
+      <el-menu-item v-for="child in item.children" :key="child.path" :index="child.meta.index" @click="switchRoute(child)">
         <!-- <el-icon><location /></el-icon> -->
         <span class="pl-8px!">{{ child.name }}</span>
       </el-menu-item>

diff --git a/packages/web/src/pages/app/[appid]/cloudfunction/[id].vue b/packages/web/src/pages/app/[appid]/cloudfunction/[id].vue
@@ -361,25 +361,28 @@ onDeactivated(() => {
           </el-button>
         </el-tooltip>
         <el-button
+          size="small"
           style="margin-left: 20px" :loading="loading" :disabled="!saved_code_diff"
           :type="saved_code_diff ? 'success' : 'success'" @click="updateFunc"
         >
           保存(S)
         </el-button>
         <el-button
+          size="small"
           :type="published_version_diff ? 'default' : ''" :loading="loading"
           link
           style="margin-left: 15px" :disabled="!published_version_diff" @click="publishFunction"
         >
           {{ published_version_diff ? '发布' : '已发布' }}
         </el-button>
         <el-button
-          v-if="published_func" link :loading="loading" style="margin-left: 10px"
+          v-if="published_func"
+          size="small" link :loading="loading" style="margin-left: 10px"
           @click="diffPublished"
         >
           对比已发布 (#{{ published_func.version }})
         </el-button>
-        <el-button type="success" style="float: right; margin-left: 10px" :loading="loading" @click="launch">
+        <el-button size="small" type="success" style="float: right; margin-left: 10px" :loading="loading" @click="launch">
           运行(B)
         </el-button>
       </div>
@@ -444,10 +447,11 @@ onDeactivated(() => {
 
     <!-- 代码对比编辑器对话框 -->
     <el-dialog
-      v-model="isShowDiffEditor" :title="diffCode.title" width="80%" top="10vh"
+      v-if="diffCode.modified"
+      v-model="isShowDiffEditor" :title="diffCode.title" width="80%" top="5vh"
       @close="onCloseDiffEditor"
     >
-      <DiffEditor :original="diffCode.original" :modified="diffCode.modified" :height="editorHeight * 0.8" />
+      <DiffEditor :original="diffCode.original" :modified="diffCode.modified" :height="editorHeight * 0.85" />
     </el-dialog>
   </div>
 </template>

diff --git a/packages/web/src/pages/app/[appid]/cloudfunction/components/FunctionLogDetail.vue b/packages/web/src/pages/app/[appid]/cloudfunction/components/FunctionLogDetail.vue
@@ -22,7 +22,7 @@ const returnValue = $computed(() => {
 
 <template>
   <div class="invoke-logs">
-    <div class="title">
+    <div class="title mb-6px">
       执行日志
       <span v-if="data">（ RequestId: {{ props.data.requestId }} ）</span>
       <span v-if="data">
@@ -32,17 +32,23 @@ const returnValue = $computed(() => {
         }}
         ]</span>
     </div>
-    <div class="logs">
-      <div v-for="(log, index) in logs" :key="index" class="log-item text-xs">
-        <pre>- {{ log }}</pre>
+    <div class="logs mb-24px min-h-60px">
+      <div v-if="logs">
+        <div v-for="(log, index) in logs" :key="index" class="log-item text-xs">
+          <pre>- {{ log }}</pre>
+        </div>
+      </div>
+      <div v-else>
+        无
       </div>
     </div>
 
-    <div class="title" style="margin-top: 15px">
+    <div class="title mb-6px">
       返回结果
     </div>
-    <div class="logs">
-      <pre text-xs>{{ returnValue }}</pre>
+    <div class="logs min-h-60px text-xs">
+      <pre v-if="returnValue">{{ returnValue }}</pre>
+      <pre v-else>无</pre>
     </div>
   </div>
 </template>

diff --git a/packages/web/src/pages/app/[appid]/cloudfunction/index.vue b/packages/web/src/pages/app/[appid]/cloudfunction/index.vue
@@ -340,21 +340,22 @@ async function handleChange(funcId: string, value: any) {
 <template>
   <div class="app-container">
     <!-- 数据检索区 -->
-    <div class="flex justify-between">
+    <div class="flex justify-between mb-12px">
       <div>
         <el-input
-          v-model="listQuery.keyword" placeholder="搜索"
+          v-model="listQuery.keyword"
+          size="small" placeholder="搜索"
           style="width: 200px; margin-right: 10px; vertical-align: middle;" class="filter-item"
           @keyup.enter="handleFilter"
         />
-        <el-button plain class="filter-item" type="primary" icon="Search" @click="handleFilter">
+        <el-button size="small" plain class="filter-item" type="primary" icon="Search" @click="handleFilter">
           搜索
         </el-button>
-        <el-button type="primary" icon="Plus" class="filter-item" @click="showCreateForm">
+        <el-button size="small" type="primary" icon="Plus" class="filter-item" @click="showCreateForm">
           新建函数
         </el-button>
         <el-tooltip content="发布函数：函数要发布后才能生效" placement="bottom" effect="light">
-          <el-button class="filter-item" type="success" icon="Guide" @click="publish">
+          <el-button size="small" class="filter-item" type="success" icon="Guide" @click="publish">
             发布函数
           </el-button>
         </el-tooltip>
@@ -365,21 +366,21 @@ async function handleChange(funcId: string, value: any) {
           只看已启用
         </el-checkbox>
       </div>
+    </div>
 
-      <!-- 标签类别 -->
-      <div class="tag-selector flex items-center ">
-        <div class="label mr-12px text-xs">
-          标签类别
-        </div>
-        <el-radio-group v-model="listQuery.tag" size="small" @change="getList">
-          <el-radio-button label="">
-            全部
-          </el-radio-button>
-          <el-radio-button v-for="tag in all_tags" :key="tag" :label="tag">
-            {{ tag }}
-          </el-radio-button>
-        </el-radio-group>
+    <!-- 标签类别 -->
+    <div class="tag-selector flex items-center">
+      <div class="label mr-12px text-xs">
+        标签类别
       </div>
+      <el-radio-group v-model="listQuery.tag" size="small" @change="getList">
+        <el-radio-button label="">
+          全部
+        </el-radio-button>
+        <el-radio-button v-for="tag in all_tags" :key="tag" :label="tag">
+          {{ tag }}
+        </el-radio-button>
+      </el-radio-group>
     </div>
 
     <el-divider />
@@ -417,16 +418,16 @@ async function handleChange(funcId: string, value: any) {
       <el-table-column label="HTTP 访问" class-name="status-col" min-width="80" align="center">
         <template #default="{ row }">
           <el-switch
-            v-model="row.enableHTTP" inline-prompt active-text="是" inactive-text="否"
+            v-model="row.enableHTTP" inline-prompt active-text="是" :width="42" inactive-text="否"
             @change="handleChange(row._id, { ...row, enableHTTP: row.enableHTTP })"
           />
         </template>
       </el-table-column>
       <el-table-column label="状态" class-name="status-col" min-width="60" align="center">
         <template #default="{ row }">
           <el-switch
-            v-model="row.status" :active-value="1" :width="60" inline-prompt active-text="已启用"
-            inactive-text="已关闭" @change="handleChange(row._id, { ...row, status: row.status })"
+            v-model="row.status" :active-value="1" :width="56" inline-prompt active-text="启用"
+            inactive-text="关闭" @change="handleChange(row._id, { ...row, status: row.status })"
           />
         </template>
       </el-table-column>
@@ -439,13 +440,13 @@ async function handleChange(funcId: string, value: any) {
       </el-table-column>
       <el-table-column label="操作" align="center" min-width="200">
         <template #default="{ row, $index }">
-          <el-button type="success" plain size="small" @click="handleShowDetail(row)">
+          <el-button size="small" type="success" plain @click="handleShowDetail(row)">
             开发
           </el-button>
-          <el-button type="info" plain size="small" @click="handleShowLogs(row)">
+          <el-button size="small" type="info" plain @click="handleShowLogs(row)">
             日志
           </el-button>
-          <el-button type="primary" plain size="small" @click="handleTriggers(row)">
+          <el-button size="small" type="primary" plain @click="handleTriggers(row)">
             触发器<b v-if="row.triggers && row.triggers.length">({{ row.triggers.length }})</b>
           </el-button>
           <el-tooltip content="请先停用函数，再删除！" :disabled="row.status !== 1" placement="top">
@@ -507,10 +508,10 @@ async function handleChange(funcId: string, value: any) {
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="dialogFormVisible = false">
+        <el-button size="small" @click="dialogFormVisible = false">
           取消
         </el-button>
-        <el-button type="primary" @click="dialogStatus === 'create' ? handleCreate() : handleUpdate()">
+        <el-button size="small" type="primary" @click="dialogStatus === 'create' ? handleCreate() : handleUpdate()">
           确定
         </el-button>
       </template>

diff --git a/packages/web/src/pages/app/[appid]/cloudfunction/logs/[id].vue b/packages/web/src/pages/app/[appid]/cloudfunction/logs/[id].vue
@@ -93,7 +93,7 @@ function setTagViewTitle() {
         v-model="listQuery.keyword" placeholder="Request ID" style="width: 320px; margin-right: 10px"
         class="filter-item" @keyup.enter="handleFilter"
       />
-      <el-button class="filter-item" type="primary" icon="Search" @click="handleFilter">
+      <el-button size="small" class="filter-item" type="primary" icon="Search" @click="handleFilter">
         搜索
       </el-button>
     </div>
@@ -163,4 +163,5 @@ name: 日志详情
 hidden: true
 meta:
   title: 日志详情
+  index: 1-2
 </route>