1

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-config-provider data-cy="app" :theme="theme" :class="{ dark: mode }">
+  <n-config-provider data-cy="app" :theme="theme" :theme-overrides="themeOverrides" :class="{ dark: mode }">
     <n-layout position="absolute" style="height: 100vh">
       <n-layout-header style="padding: 24px" bordered>
         <div class="flex justify-between items-center">
@@ -57,6 +57,7 @@
 import { darkTheme, lightTheme } from 'naive-ui'
 import { computed, ref, watchEffect, h } from 'vue'
 import type { Component } from 'vue'
+import themeOverrides from '@/styles/theme.js'
 import {
   ChevronBackOutline,
   Layers,

src/components/global/vendor/naive.ts

@@ -19,6 +19,7 @@ import {
   NScrollbar,
   NSwitch,
   NDataTable,
+  NSpace,
 } from 'naive-ui'
 
 export default create({
@@ -41,6 +42,7 @@ export default create({
     NMenu,
     NScrollbar,
     NSwitch,
-    NDataTable
+    NDataTable,
+    NSpace
   ]
 })

src/styles/theme.js

@@ -0,0 +1,17 @@
+const themeOverrides = {
+  common: {
+    "primaryColor": "#316c72",
+    "primaryColorHover": "#316C72E3",
+    "primaryColorPressed": "#2B4C59FF",
+    "primaryColorSuppl": "#316C7263",
+    "successColor": "#316C72FF",
+    "successColorHover": "#316C72E3",
+    "successColorPressed": "#2B4C59FF",
+    "successColorSuppl": "#316C7263"
+  }
+  // Button: {
+  //     textColor: '#FF0000'
+  // }
+}
+ 
+export default themeOverrides

src/views/textToaudio/index.vue

@@ -38,31 +38,50 @@ const paginationReactive = reactive({
 })
 const columns = [
   {
-    title: 'Name',
-    key: 'name'
+    title: 'No',
+    key: 'no',
+    width: 50
   },
   {
-    title: 'Age',
-    key: 'age'
+    title: '类型',
+    key: 'type',
+    render(row) {
+      return row.type == 1 ? h('span', '语音') : h('span', '文字')
+    }
+  },
+  {
+    title: '内容',
+    key: 'content'
   },
   {
-    title: 'Address',
-    key: 'address',
-    defaultFilterOptionValues: [],
-    filterOptions: [
-      {
-        label: 'London',
-        value: 'London'
-      },
-      {
-        label: 'New York',
-        value: 'New York'
+    title: '语音文件',
+    key: 'content'
+  },
+  {
+    title: '状态',
+    key: 'state',
+    render(row) {
+      return row.state == 1 ? h('span', '处理中') : row.state == 0 ? h('span', '已完成') : h('span', '已取消')
+    }
+  },
+  {
+    title: '创建时间',
+    key: 'createTime'
+  },
+  {
+      title: 'Action',
+      key: 'actions',
+      render(row) {
+        return h(
+          NButton,
+          {
+            size: 'small',
+            onClick: () => sendMail(row)
+          },
+          { default: () => 'Send Email' }
+        )
       }
-    ],
-    filter(value, row) {
-      return !!~row.address.indexOf(String(value))
     }
-  }
 ]
 const data = [
   {
@@ -90,6 +109,9 @@ const data = [
     address: 'London No. 2 Lake Park'
   }
 ]
+function sendMail(row) {
+  console.log('send email to', row.name, 'with id', row.key)
+}
 </script>
 
 <style lang="sass" scoped>