style: 快照状态界面样式调整 (#3748)

frontend/src/api/interface/setting.ts

@@ -108,6 +108,7 @@ export namespace Setting {
         id: number;
         name: string;
         from: string;
+        defaultDownload: string;
         description: string;
         status: string;
         message: string;

frontend/src/views/setting/backup-account/onedrive/index.vue

@@ -117,6 +117,9 @@ const rules = reactive({
     driveCode: [{ validator: checkDriveCode, required: true, trigger: 'blur' }],
 });
 function checkDriveCode(rule: any, value: any, callback: any) {
+    if (!value) {
+        return callback(new Error(i18n.global.t('setting.codeWarning')));
+    }
     const reg = /^[A-Za-z0-9_.-]+$/;
     if (!reg.test(value)) {
         return callback(new Error(i18n.global.t('setting.codeWarning')));

frontend/src/views/setting/snapshot/import/index.vue

@@ -19,7 +19,13 @@
                         </el-form-item>
                         <el-form-item :label="$t('commons.table.name')" prop="names">
                             <el-select style="width: 100%" v-model="form.names" multiple clearable>
-                                <el-option v-for="item in fileNames" :key="item" :value="item" :label="item" />
+                                <el-option
+                                    :disabled="checkDisable(item)"
+                                    v-for="item in fileNames"
+                                    :key="item"
+                                    :value="item"
+                                    :label="item"
+                                />
                             </el-select>
                         </el-form-item>
                         <el-form-item :label="$t('commons.table.description')" prop="description">
@@ -58,6 +64,7 @@ const loading = ref();
 const formRef = ref();
 const backupOptions = ref();
 const fileNames = ref();
+const existNames = ref();
 
 const form = reactive({
     from: '',
@@ -70,8 +77,13 @@ const rules = reactive({
     name: [Rules.requiredSelect],
 });
 
-const acceptParams = (): void => {
+interface DialogProps {
+    names: Array<string>;
+}
+
+const acceptParams = (params: DialogProps): void => {
     form.from = '';
+    existNames.value = params.names;
     form.names = [] as Array<string>;
     loadBackups();
     drawerVisible.value = true;
@@ -82,6 +94,15 @@ const handleClose = () => {
     drawerVisible.value = false;
 };
 
+const checkDisable = (val: string) => {
+    for (const item of existNames.value) {
+        if (val === item + '.tar.gz') {
+            return true;
+        }
+    }
+    return false;
+};
+
 const submitImport = async (formEl: FormInstance | undefined) => {
     loading.value = true;
     if (!formEl) return;
@@ -107,7 +128,7 @@ const loadBackups = async () => {
             loading.value = false;
             backupOptions.value = [];
             for (const item of res.data) {
-                if (item.type !== 'LOCAL' && item.id !== 0) {
+                if (item.id !== 0) {
                     backupOptions.value.push({ label: i18n.global.t('setting.' + item.type), value: item.type });
                 }
             }

frontend/src/views/setting/snapshot/index.vue

@@ -51,15 +51,18 @@
                         <template #default="{ row }">
                             <div v-for="(item, index) of row.from.split(',')" :key="index" class="mt-1">
                                 <div v-if="row.expand || (!row.expand && index < 3)">
-                                    <el-tag v-if="row.from" type="info">
+                                    <span v-if="row.from" type="info">
-                                        <span v-if="item === row.defaultDownload">
+                                        <span>
-                                            <el-icon><Star /></el-icon>
                                             {{ $t('setting.' + item) }}
                                         </span>
-                                        <span v-else>
+                                        <el-icon
-                                            {{ $t('setting.' + item) }}
+                                            v-if="item === row.defaultDownload"
-                                        </span>
+                                            size="12"
-                                    </el-tag>
+                                            class="relative top-px left-1"
+                                        >
+                                            <Star />
+                                        </el-icon>
+                                    </span>
                                     <span v-else>-</span>
                                 </div>
                             </div>
@@ -236,7 +239,11 @@ const onCreate = async () => {
 };
 
 const onImport = () => {
-    importRef.value.acceptParams();
+    let names = [];
+    for (const item of data.value) {
+        names.push(item.name);
+    }
+    importRef.value.acceptParams({ names: names });
 };
 
 const handleClose = () => {
@@ -268,7 +275,12 @@ const submitAddSnapshot = (formEl: FormInstance | undefined) => {
 };
 
 const onLoadStatus = (row: Setting.SnapshotInfo) => {
-    snapStatusRef.value.acceptParams({ id: row.id, from: row.from, description: row.description });
+    snapStatusRef.value.acceptParams({
+        id: row.id,
+        from: row.from,
+        defaultDownload: row.defaultDownload,
+        description: row.description,
+    });
 };
 
 const loadBackups = async () => {

frontend/src/views/setting/snapshot/snap_status/index.vue

@@ -117,6 +117,7 @@ const dialogVisible = ref(false);
 const loading = ref();
 const snapID = ref();
 const snapFrom = ref();
+const snapDefaultDownload = ref();
 const snapDescription = ref();
 
 let timer: NodeJS.Timer | null = null;
@@ -124,6 +125,7 @@ let timer: NodeJS.Timer | null = null;
 interface DialogProps {
     id: number;
     from: string;
+    defaultDownload: string;
     description: string;
 }
 
@@ -131,6 +133,7 @@ const acceptParams = (props: DialogProps): void => {
     dialogVisible.value = true;
     snapID.value = props.id;
     snapFrom.value = props.from;
+    snapDefaultDownload.value = props.defaultDownload;
     snapDescription.value = props.description;
     onWatch();
     nextTick(() => {
@@ -167,7 +170,13 @@ const onClose = async () => {
 
 const onRetry = async () => {
     loading.value = true;
-    await snapshotCreate({ id: snapID.value, from: snapFrom.value, description: snapDescription.value })
+    await snapshotCreate({
+        id: snapID.value,
+        fromAccounts: [],
+        from: snapFrom.value,
+        defaultDownload: snapDefaultDownload.value,
+        description: snapDescription.value,
+    })
         .then(() => {
             loading.value = false;
             loadCurrentStatus();

frontend/src/views/setting/snapshot/status/index.vue

@@ -4,149 +4,143 @@
             <template #header>
                 <DrawerHeader :header="$t('setting.recoverDetail')" :back="handleClose" />
             </template>
-            <el-form label-width="120px">
-                <el-card>
-                    <template #header>
-                        <div class="card-header">
-                            <span>{{ $t('setting.recover') }}</span>
-                        </div>
-                    </template>
-                    <div v-if="!snapInfo.recoverStatus">
-                        <div v-if="snapInfo.lastRecoveredAt">
-                            <el-form-item :label="$t('commons.table.status')">
-                                <el-tag type="success">
-                                    {{ $t('commons.table.statusSuccess') }}
-                                </el-tag>
-                                <el-button @click="recoverSnapshot(true)" style="margin-left: 10px" type="primary">
-                                    {{ $t('setting.recover') }}
-                                </el-button>
-                            </el-form-item>
-                            <el-form-item :label="$t('setting.lastRecoverAt')">
-                                {{ snapInfo.lastRecoveredAt }}
-                            </el-form-item>
-                        </div>
-                        <div v-else>
-                            <el-form-item>
-                                <el-tag type="info">
-                                    {{ $t('setting.noRecoverRecord') }}
-                                </el-tag>
-                            </el-form-item>
-                            <el-form-item>
-                                <el-button @click="recoverSnapshot(true)" type="primary">
-                                    {{ $t('setting.recover') }}
-                                </el-button>
-                            </el-form-item>
-                        </div>
-                    </div>
-                    <div v-else>
-                        <el-form-item :label="$t('commons.table.status')">
-                            <el-tag type="danger" v-if="snapInfo.recoverStatus === 'Failed'">
-                                {{ $t('commons.table.statusFailed') }}
-                            </el-tag>
-                            <el-tag type="success" v-if="snapInfo.recoverStatus === 'Success'">
-                                {{ $t('commons.table.statusSuccess') }}
-                            </el-tag>
-                            <el-tag type="info" v-if="snapInfo.recoverStatus === 'Waiting'">
-                                {{ $t('commons.table.statusWaiting') }}
-                            </el-tag>
-                            <el-button
-                                style="margin-left: 15px"
-                                @click="recoverSnapshot(true)"
-                                :disabled="snapInfo.recoverStatus !== 'Success'"
-                            >
-                                {{ $t('setting.recover') }}
-                            </el-button>
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.lastRecoverAt')" v-if="snapInfo.recoverStatus !== 'Waiting'">
-                            {{ snapInfo.lastRecoveredAt }}
-                        </el-form-item>
-                        <div v-if="snapInfo.recoverStatus === 'Failed'">
-                            <el-form-item :label="$t('commons.button.log')">
-                                <span style="word-break: break-all; flex-wrap: wrap; word-wrap: break-word">
-                                    {{ snapInfo.recoverMessage }}
-                                </span>
-                            </el-form-item>
-                            <el-form-item>
-                                <el-button @click="dialogVisible = true" type="primary">
-                                    {{ $t('commons.button.retry') }}
-                                </el-button>
-                            </el-form-item>
-                        </div>
-                    </div>
-                </el-card>
 
-                <el-card style="margin-top: 20px" v-if="snapInfo.recoverStatus === 'Failed'">
+            <el-form label-position="top">
-                    <template #header>
+                <el-row type="flex" justify="center">
-                        <div class="card-header">
+                    <el-col :span="22">
-                            <span>{{ $t('setting.rollback') }}</span>
+                        <span class="card-title">{{ $t('setting.recover') }}</span>
-                        </div>
+                        <el-divider class="divider" />
-                    </template>
+                        <div v-if="!snapInfo.recoverStatus && !snapInfo.lastRecoveredAt">
-                    <div v-if="!snapInfo.rollbackStatus">
+                            <el-alert center class="alert" style="height: 257px" :closable="false">
-                        <div v-if="snapInfo.lastRollbackedAt">
+                                <el-button size="large" round plain type="primary" @click="recoverSnapshot(true)">
-                            <el-form-item :label="$t('commons.table.status')">
-                                <el-tag type="success">
-                                    {{ $t('commons.table.statusSuccess') }}
-                                </el-tag>
-                                <el-button @click="rollbackSnapshot" style="margin-left: 10px" type="primary">
                                     {{ $t('setting.recover') }}
                                 </el-button>
-                            </el-form-item>
+                            </el-alert>
-                            <el-form-item :label="$t('setting.lastRollbackAt')">
+                        </div>
-                                {{ snapInfo.lastRollbackedAt }}
+                        <el-card class="mini-border-card">
-                            </el-form-item>
+                            <div v-if="!snapInfo.recoverStatus" class="mini-border-card">
+                                <div v-if="snapInfo.lastRecoveredAt">
+                                    <el-form-item :label="$t('commons.table.status')">
+                                        <el-tag type="success">
+                                            {{ $t('commons.table.statusSuccess') }}
+                                        </el-tag>
+                                        <el-button
+                                            @click="recoverSnapshot(true)"
+                                            style="margin-left: 10px"
+                                            type="primary"
+                                        >
+                                            {{ $t('setting.recover') }}
+                                        </el-button>
+                                    </el-form-item>
+                                    <el-form-item :label="$t('setting.lastRecoverAt')">
+                                        {{ snapInfo.lastRecoveredAt }}
+                                    </el-form-item>
+                                </div>
+                            </div>
+                            <div v-else>
+                                <el-form-item :label="$t('commons.table.status')">
+                                    <el-tag type="danger" v-if="snapInfo.recoverStatus === 'Failed'">
+                                        {{ $t('commons.table.statusFailed') }}
+                                    </el-tag>
+                                    <el-tag type="success" v-if="snapInfo.recoverStatus === 'Success'">
+                                        {{ $t('commons.table.statusSuccess') }}
+                                    </el-tag>
+                                    <el-tag type="info" v-if="snapInfo.recoverStatus === 'Waiting'">
+                                        {{ $t('commons.table.statusWaiting') }}
+                                    </el-tag>
+                                    <!-- <el-button
+                                    style="margin-left: 15px"
+                                    @click="recoverSnapshot(true)"
+                                    :disabled="snapInfo.recoverStatus !== 'Success'"
+                                >
+                                    {{ $t('setting.recover') }}
+                                </el-button> -->
+                                </el-form-item>
+                                <el-form-item
+                                    :label="$t('setting.lastRecoverAt')"
+                                    v-if="snapInfo.recoverStatus !== 'Waiting'"
+                                >
+                                    {{ snapInfo.lastRecoveredAt }}
+                                </el-form-item>
+                                <div v-if="snapInfo.recoverStatus === 'Failed'">
+                                    <el-form-item :label="$t('commons.button.log')">
+                                        <span style="word-break: break-all; flex-wrap: wrap; word-wrap: break-word">
+                                            {{ snapInfo.recoverMessage }}
+                                        </span>
+                                    </el-form-item>
+                                    <el-form-item>
+                                        <el-button @click="dialogVisible = true" type="primary">
+                                            {{ $t('commons.button.retry') }}
+                                        </el-button>
+                                    </el-form-item>
+                                </div>
+                            </div>
+                        </el-card>
+
+                        <span class="card-title">{{ $t('setting.rollback') }}</span>
+                        <el-divider class="divider" />
+                        <div v-if="!snapInfo.rollbackStatus && !snapInfo.lastRollbackedAt">
+                            <el-alert center class="alert" style="height: 257px" :closable="false">
+                                <el-button size="large" round plain type="primary" @click="rollbackSnapshot()">
+                                    {{ $t('setting.rollback') }}
+                                </el-button>
+                            </el-alert>
+                        </div>
+                        <div v-if="!snapInfo.rollbackStatus">
+                            <div v-if="snapInfo.lastRollbackedAt">
+                                <el-form-item :label="$t('commons.table.status')">
+                                    <el-tag type="success">
+                                        {{ $t('commons.table.statusSuccess') }}
+                                    </el-tag>
+                                    <el-button @click="rollbackSnapshot" style="margin-left: 10px" type="primary">
+                                        {{ $t('setting.rollback') }}
+                                    </el-button>
+                                </el-form-item>
+                                <el-form-item :label="$t('setting.lastRollbackAt')">
+                                    {{ snapInfo.lastRollbackedAt }}
+                                </el-form-item>
+                            </div>
                         </div>
                         <div v-else>
-                            <el-form-item>
+                            <el-form-item :label="$t('commons.table.status')">
-                                <el-tag type="info">
+                                <el-tag type="success" v-if="snapInfo.rollbackStatus === 'Success'">
-                                    {{ $t('setting.noRollbackRecord') }}
+                                    {{ $t('commons.table.statusSuccess') }}
                                 </el-tag>
-                            </el-form-item>
+                                <el-tag type="danger" v-if="snapInfo.rollbackStatus === 'Failed'">
-                            <el-form-item>
+                                    {{ $t('commons.table.statusFailed') }}
-                                <el-button @click="rollbackSnapshot" type="primary">
+                                </el-tag>
+                                <el-tag type="info" v-if="snapInfo.rollbackStatus === 'Waiting'">
+                                    {{ $t('commons.table.statusWaiting') }}
+                                </el-tag>
+                                <el-button
+                                    style="margin-left: 15px"
+                                    :disabled="snapInfo.rollbackStatus !== 'Success'"
+                                    @click="rollbackSnapshot"
+                                >
                                     {{ $t('setting.rollback') }}
                                 </el-button>
                             </el-form-item>
-                        </div>
+                            <el-form-item
-                    </div>
+                                :label="$t('setting.lastRollbackAt')"
-                    <div v-else>
+                                v-if="snapInfo.rollbackStatus !== 'Waiting'"
-                        <el-form-item :label="$t('commons.table.status')">
-                            <el-tag type="success" v-if="snapInfo.rollbackStatus === 'Success'">
-                                {{ $t('commons.table.statusSuccess') }}
-                            </el-tag>
-                            <el-tag type="danger" v-if="snapInfo.rollbackStatus === 'Failed'">
-                                {{ $t('commons.table.statusFailed') }}
-                            </el-tag>
-                            <el-tag type="info" v-if="snapInfo.rollbackStatus === 'Waiting'">
-                                {{ $t('commons.table.statusWaiting') }}
-                            </el-tag>
-                            <el-button
-                                style="margin-left: 15px"
-                                :disabled="snapInfo.rollbackStatus !== 'Success'"
-                                @click="rollbackSnapshot"
                             >
-                                {{ $t('setting.rollback') }}
+                                {{ snapInfo.lastRollbackedAt }}
-                            </el-button>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('setting.lastRollbackAt')"
-                            v-if="snapInfo.rollbackStatus !== 'Waiting'"
-                        >
-                            {{ snapInfo.lastRollbackedAt }}
-                        </el-form-item>
-                        <div v-if="snapInfo.rollbackStatus === 'Failed'">
-                            <el-form-item :label="$t('commons.button.log')">
-                                <span style="word-break: break-all; flex-wrap: wrap; word-wrap: break-word">
-                                    {{ snapInfo.rollbackMessage }}
-                                </span>
-                            </el-form-item>
-                            <el-form-item>
-                                <el-button @click="rollbackSnapshot()" type="primary">
-                                    {{ $t('commons.button.retry') }}
-                                </el-button>
                             </el-form-item>
+                            <div v-if="snapInfo.rollbackStatus === 'Failed'">
+                                <el-form-item :label="$t('commons.button.log')">
+                                    <span style="word-break: break-all; flex-wrap: wrap; word-wrap: break-word">
+                                        {{ snapInfo.rollbackMessage }}
+                                    </span>
+                                </el-form-item>
+                                <el-form-item>
+                                    <el-button @click="rollbackSnapshot()" type="primary">
+                                        {{ $t('commons.button.retry') }}
+                                    </el-button>
+                                </el-form-item>
+                            </div>
                         </div>
-                    </div>
+                    </el-col>
-                </el-card>
+                </el-row>
             </el-form>
         </el-drawer>
         <el-dialog v-model="dialogVisible" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
@@ -255,3 +249,25 @@ defineExpose({
     acceptParams,
 });
 </script>
+
+<style lang="scss" scoped>
+.divider {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 12px 0;
+    border-top: 1px var(--el-border-color) var(--el-border-style);
+}
+.alert {
+    background-color: rgba(0, 94, 235, 0.03);
+}
+
+.card-title {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 25px;
+}
+.card-logo {
+    font-size: 7px;
+}
+</style>