chore: 🔨 界面优化 (#226)

Co-authored-by: tk <fiyne1a@dingtalk.com>

src/frontend/admin/src/components/naColOperation/index.vue

@@ -12,7 +12,7 @@
                             <el-button
                                 v-loading="loading"
                                 :icon="item.icon"
-                                :title="item.title"
+                                :title="$t(item.title)"
                                 :type="item.type"
                                 @click.native.stop
                                 size="small"></el-button>
@@ -22,7 +22,7 @@
                         v-else
                         v-loading="loading"
                         :icon="item.icon"
-                        :title="item.title"
+                        :title="$t(item.title)"
                         :type="item.type"
                         @click="click(item, row, vue)"
                         size="small">

src/frontend/admin/src/config/naColOperation.js

@@ -2,12 +2,14 @@ export default {
     buttons: [
         {
             icon: 'el-icon-view',
+            title: '查看',
             click: async (row, vue) => {
                 vue.dialog.save = { row, mode: 'view' }
             },
         },
         {
             icon: 'el-icon-edit',
+            title: '编辑',
             click: async (row, vue) => {
                 vue.dialog.save = { row, mode: 'edit' }
             },

src/frontend/admin/src/views/guest/view-doc.vue

@@ -1,6 +1,5 @@
 <template>
     <article v-if="doc" v-loading="loading" class="article">
-        <h1>{{ doc.title }}</h1>
         <section
             :class="this.$TOOL.data.get('APP_SET_DARK') || this.$CONFIG.APP_SET_DARK ? 'aie-theme-dark' : 'aie-theme-light'"
             ref="editor"></section>
@@ -12,10 +11,11 @@
 import { AiEditor } from 'aieditor'
 import 'aieditor/dist/style.css'
 import { defineAsyncComponent } from 'vue'
-const notFound = defineAsyncComponent(() => import('@/layout/other/404.vue'))
 import sysConfig from '@/config'
 import tool from '@/utils/tool'
 
+const notFound = defineAsyncComponent(() => import('@/layout/other/404.vue'))
+
 export default {
     components: { notFound },
     data() {
@@ -31,11 +31,9 @@ export default {
         if (this.doc) {
             document.title = this.doc.title
             const aiEditor = new AiEditor({
+                editable: false,
                 element: this.$refs.editor,
-                content: this.doc.body,
+                content: `<h1 style="text-align:center">${this.doc.title}</h1>${this.doc.body}`,
-                onChange: (body) => {
-                    this.doc.body = body.getHtml()
-                },
             })
             aiEditor.changeLang(this.$TOOL.data.get('APP_SET_LANG') || sysConfig.APP_SET_LANG)
         } else {
@@ -51,11 +49,17 @@ export default {
     display: flex;
     height: 100%;
     flex-direction: column;
+
     > h1 {
         padding: 1rem;
     }
+
     > section {
         flex: 1;
     }
 }
+
+.article:deep(.aie-container) {
+    border: none;
+}
 </style>

src/frontend/admin/src/views/sys/doc/list/index.vue

@@ -106,22 +106,32 @@
                     </template>
                 </el-table-column>
                 <na-col-operation
-                    :buttons="
+                    :buttons="[
-                        naColOperation.buttons.concat([
+                        {
-                            {
+                            icon: 'el-icon-view',
-                                icon: 'el-icon-share',
+                            title: '查看',
-                                click: share,
+                            click: viewClick,
-                                title: '删除文档',
+                        },
+                        {
+                            icon: 'el-icon-edit',
+                            title: '编辑',
+                            click: async (row, vue) => {
+                                vue.dialog.save = { row, mode: 'edit' }
                             },
-                            {
+                        },
-                                icon: 'el-icon-delete',
+                        {
-                                confirm: true,
+                            icon: 'el-icon-share',
-                                title: '删除文档',
+                            click: share,
-                                click: rowDel,
+                            title: '分享文档',
-                                type: 'danger',
+                        },
-                            },
+                        {
-                        ])
+                            icon: 'el-icon-delete',
-                    "
+                            confirm: true,
+                            title: '删除文档',
+                            click: rowDel,
+                            type: 'danger',
+                        },
+                    ]"
                     :vue="this"
                     width="180" />
             </sc-table>
@@ -171,6 +181,9 @@ export default {
     },
     inject: ['reload'],
     methods: {
+        viewClick(row) {
+            window.open(window.location.origin + `/guest/view-doc/${row.id}`)
+        },
         filterChange(data) {
             Object.entries(data).forEach(([key, value]) => {
                 this.$refs.search.form.dy[key] = value === 'true' ? true : value === 'false' ? false : value