更新管理界面

src/components/items/UrlAdd.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <v-card></v-card>
+</template>
+
+<style scoped>
+</style>

src/components/items/UrlManagement.vue

@@ -1,13 +1,30 @@
 <script setup lang="ts">
+import { ref, watch } from "vue";
 import { getUrlsOfCurrentUser, Surl } from "../../script/functions.ts";
+import { useLocale } from "vuetify";
 
+const { t } = useLocale()
 const surls = (await getUrlsOfCurrentUser()).value ?? <Surl[]>[]
+const pageConfig = [
+  { value: 10, title: '10' },
+  { value: 20, title: '20' },
+  { value: 50, title: '50' },
+  { value: 100, title: '100' },
+  { value: 200, title: '200' },
+  { value: -1, title: '$vuetify.dataFooter.itemsPerPageAll' }
+]
+const selected = ref([])
+watch(selected, (value) => {
+  console.log(value)
+})
 </script>
 
 <template>
-  <v-data-table :items="surls"></v-data-table>
+  <v-data-table :items="surls" :items-per-page-options="pageConfig" items-per-page="20" show-select :headers="[
+    { title: t('$vuetify.dashboard.menu.url-management.table.key'), value: 'key', key: 'key' },
+    { title: t('$vuetify.dashboard.menu.url-management.table.url'), value: 'url', key: 'url' },
+    { title: t('$vuetify.dashboard.menu.url-management.table.remark'), value: 'remark', key: 'remark' }
+  ]" v-model="selected" :item-value="it => it" class="h-100"></v-data-table>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/components/views/DashboardView.vue

@@ -5,17 +5,21 @@ const { t } = useLocale()
 </script>
 
 <template>
-  <v-row class="py-5">
+  <v-row class="py-5 h-100">
     <v-col cols="auto">
       <v-sheet elevation="1" class="rounded-lg">
         <v-list class="rounded-lg">
           <v-list-group value="Management">
             <template v-slot:activator="{ props }">
-              <v-list-item v-bind="props" :title="t('$vuetify.dashboard.menu.url-management.title')" prepend-icon="mdi-link">
+              <v-list-item v-bind="props" :title="t('$vuetify.dashboard.menu.url-management.title')"
+                prepend-icon="mdi-link">
               </v-list-item>
             </template>
-            <v-list-item to="/dashboard/url-management" prepend-icon="mdi-list-box-outline" append-icon="mdi-chevron-right"
-              :title="t('$vuetify.dashboard.menu.url-management.display') ">
+            <v-list-item to="/dashboard/url-management" prepend-icon="mdi-list-box-outline"
+              append-icon="mdi-chevron-right" :title="t('$vuetify.dashboard.menu.url-management.display') ">
+            </v-list-item>
+            <v-list-item to="/dashboard/url-add" prepend-icon="mdi-square-edit-outline"
+              append-icon="mdi-chevron-right" :title="t('$vuetify.dashboard.menu.url-management.edit') ">
             </v-list-item>
           </v-list-group>
 
@@ -29,7 +33,7 @@ const { t } = useLocale()
       </v-sheet>
     </v-col>
     <v-col>
-      <v-sheet class="border-thin rounded-lg pa-10 overflow-auto">
+      <v-sheet class="border-thin rounded-lg pa-10 overflow-auto h-100">
         <router-view />
       </v-sheet>
     </v-col>

src/router.ts

@@ -9,6 +9,7 @@ import DashboardView from "./components/views/DashboardView.vue";
 import Profile from "./components/items/Profile.vue";
 import Security from "./components/items/Security.vue";
 import UrlManagement from "./components/items/UrlManagement.vue";
+import UrlAdd from "./components/items/UrlAdd.vue";
 
 const routes = [
     {
@@ -28,6 +29,7 @@ const routes = [
         component: ServiceView
     }, {
         path: '/dashboard',
+        redirect: '/dashboard/url-management',
         component: DashboardView,
         children: [{
             path: 'profile',
@@ -38,6 +40,9 @@ const routes = [
         }, {
             path: 'url-management',
             component: UrlManagement
+        }, {
+            path: 'url-add',
+            component: UrlAdd
         }]
     }, {
         path: '/404',

src/script/i18n/en.ts

@@ -49,7 +49,12 @@ const en: LocaleInterface = {
             'url-management': {
                 title: 'URL Management',
                 edit: 'Edit',
-                display: 'Display'
+                display: 'Display',
+                table: {
+                    key: 'KEY',
+                    url: 'URL',
+                    remark: 'REMARK'
+                }
             },
             profile: 'Profile',
             security: 'Security'

src/script/i18n/locale-interface.ts

@@ -46,7 +46,12 @@ export default interface LocaleInterface {
             'url-management': {
                 title: string,
                 edit: string,
-                display: string
+                display: string,
+                table: {
+                    key: string,
+                    url: string,
+                    remark: string
+                }
             },
             profile: string,
             security: string

src/script/i18n/zhHans.ts

@@ -49,7 +49,12 @@ const zhHans: LocaleInterface = {
             'url-management': {
                 title: '链接管理',
                 edit: '编辑',
-                display: '查看'
+                display: '查看',
+                table: {
+                    key: '标识',
+                    url: '链接地址',
+                    remark: '备注'
+                }
             },
             profile: '用户信息',
             security: '安全性'