fix: 前端优化

web/src/views/apps/mariadb/IndexView.vue

@@ -3,6 +3,7 @@ defineOptions({
   name: 'apps-mariadb-index'
 })
 
+import copy2clipboard from '@vavt/copy2clipboard'
 import { NButton, NDataTable, NInput } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
@@ -63,6 +64,12 @@ const handleSetRootPassword = async () => {
   await mariadb.setRootPassword(rootPassword.value)
   window.$message.success($gettext('Modified successfully'))
 }
+
+const handleCopyRootPassword = () => {
+  copy2clipboard(rootPassword.value).then(() => {
+    window.$message.success($gettext('Copied successfully'))
+  })
+}
 </script>
 
 <template>
@@ -72,8 +79,13 @@ const handleSetRootPassword = async () => {
         <n-flex vertical>
           <service-status service="mysqld" />
           <n-card :title="$gettext('Root Password')">
-            <n-flex vertical>
-              <n-input v-model:value="rootPassword" type="password" show-password-on="click" />
+            <n-flex>
+              <n-input-group>
+                <n-input v-model:value="rootPassword" type="password" show-password-on="click" />
+                <n-button type="primary" ghost @click="handleCopyRootPassword">
+                  {{ $gettext('Copy') }}
+                </n-button>
+              </n-input-group>
               <n-button type="primary" @click="handleSetRootPassword">
                 {{ $gettext('Save Changes') }}
               </n-button>

web/src/views/apps/mysql/IndexView.vue

@@ -3,6 +3,7 @@ defineOptions({
   name: 'apps-mysql-index'
 })
 
+import copy2clipboard from '@vavt/copy2clipboard'
 import { NButton, NDataTable, NInput } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
@@ -63,6 +64,12 @@ const handleSetRootPassword = async () => {
   await mysql.setRootPassword(rootPassword.value)
   window.$message.success($gettext('Modified successfully'))
 }
+
+const handleCopyRootPassword = () => {
+  copy2clipboard(rootPassword.value).then(() => {
+    window.$message.success($gettext('Copied successfully'))
+  })
+}
 </script>
 
 <template>
@@ -72,8 +79,13 @@ const handleSetRootPassword = async () => {
         <n-flex vertical>
           <service-status service="mysqld" />
           <n-card :title="$gettext('Root Password')">
-            <n-flex vertical>
-              <n-input v-model:value="rootPassword" type="password" show-password-on="click" />
+            <n-flex>
+              <n-input-group>
+                <n-input v-model:value="rootPassword" type="password" show-password-on="click" />
+                <n-button type="primary" ghost @click="handleCopyRootPassword">
+                  {{ $gettext('Copy') }}
+                </n-button>
+              </n-input-group>
               <n-button type="primary" @click="handleSetRootPassword">
                 {{ $gettext('Save Changes') }}
               </n-button>

web/src/views/apps/percona/IndexView.vue

@@ -3,6 +3,7 @@ defineOptions({
   name: 'apps-percona-index'
 })
 
+import copy2clipboard from '@vavt/copy2clipboard'
 import { NButton, NDataTable, NInput } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
@@ -63,6 +64,12 @@ const handleSetRootPassword = async () => {
   await percona.setRootPassword(rootPassword.value)
   window.$message.success($gettext('Modified successfully'))
 }
+
+const handleCopyRootPassword = () => {
+  copy2clipboard(rootPassword.value).then(() => {
+    window.$message.success($gettext('Copied successfully'))
+  })
+}
 </script>
 
 <template>
@@ -72,8 +79,13 @@ const handleSetRootPassword = async () => {
         <n-flex vertical>
           <service-status service="mysqld" />
           <n-card :title="$gettext('Root Password')">
-            <n-flex vertical>
-              <n-input v-model:value="rootPassword" type="password" show-password-on="click" />
+            <n-flex>
+              <n-input-group>
+                <n-input v-model:value="rootPassword" type="password" show-password-on="click" />
+                <n-button type="primary" ghost @click="handleCopyRootPassword">
+                  {{ $gettext('Copy') }}
+                </n-button>
+              </n-input-group>
               <n-button type="primary" @click="handleSetRootPassword">
                 {{ $gettext('Save Changes') }}
               </n-button>

web/src/views/environment/PHPView.vue

@@ -176,9 +176,11 @@ const handleUninstallModule = async (module: string) => {
         <n-flex vertical>
           <n-card> PHP {{ slug }} </n-card>
           <service-status :service="`php-fpm-${slug}`" show-reload />
-          <n-button type="info" @click="handleSetCli">
-            {{ $gettext('Set as CLI Default Version') }}
-          </n-button>
+          <n-flex>
+            <n-button type="info" @click="handleSetCli">
+              {{ $gettext('Set as CLI Default Version') }}
+            </n-button>
+          </n-flex>
         </n-flex>
       </n-tab-pane>
       <n-tab-pane name="modules" :tab="$gettext('Module Management')">

web/src/views/toolbox/WebHookView.vue

@@ -4,6 +4,7 @@ import { useGettext } from 'vue3-gettext'
 
 import webhook from '@/api/panel/webhook'
 import { formatDateTime } from '@/utils'
+import copy2clipboard from '@vavt/copy2clipboard'
 
 const { $gettext } = useGettext()
 
@@ -213,7 +214,7 @@ const handleStatusChange = (row: any) => {
 
 const handleCopyUrl = (row: any) => {
   const url = `${window.location.origin}/webhook/${row.key}`
-  navigator.clipboard.writeText(url).then(() => {
+  copy2clipboard(url).then(() => {
     window.$message.success($gettext('URL copied to clipboard'))
   })
 }