refactor(Scripts, ScriptTable, UserEdit): 清理一下无用css，调整部分按钮位置

2025-09-02 00:54:30 +08:00
parent 2ac631a18d
commit 329ebd8633
3 changed files with 50 additions and 85 deletions
--- a/frontend/src/components/ScriptTable.vue
+++ b/frontend/src/components/ScriptTable.vue
@@ -146,7 +146,7 @@
                              : 'orange'
                        "
                      >
-                        剩余:
+                        剩余天数:
                        {{ user.Info.RemainedDay < 1 ? '长期有效' : user.Info.RemainedDay + '天' }}
                      </a-tag>

@@ -210,6 +210,13 @@
                      >
                        剩余关卡: {{ user.Info.Stage_Remain }}
                      </a-tag>
+
+                      <a-tag
+                        class="info-tag"
+                        color="magenta"
+                      >
+                        备注: {{ truncateText(user.Info.Notes) }}
+                      </a-tag>
                    </div>
                  </div>
                </div>
@@ -374,6 +381,11 @@ function get_annihilation_name(annihilation_name) {
  }
  return '未开启'
 }
+
+const truncateText = (text: string, maxLength: number = 20): string => {
+  if (!text) return ''
+  return text.length > maxLength ? text.substring(0, maxLength) + '...' : text
+}
 </script>

 <style scoped>
--- a/frontend/src/views/Scripts.vue
+++ b/frontend/src/views/Scripts.vue
@@ -700,16 +700,10 @@ const handleToggleUserStatus = async (user: User) => {
  overflow: hidden;
 }

-.type-radio-group :deep(.ant-radio-button-wrapper:hover) {
-  border-color: var(--ant-color-primary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.2);
-}

 .type-radio-group :deep(.ant-radio-button-wrapper-checked) {
  border-color: var(--ant-color-primary);
  background: var(--ant-color-primary-bg);
-  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.3);
 }

 .type-radio-group :deep(.ant-radio-button-wrapper::before) {
@@ -805,11 +799,6 @@ const handleToggleUserStatus = async (user: User) => {
  overflow: hidden;
 }

-.mode-radio-group :deep(.ant-radio-button-wrapper:hover) {
-  border-color: var(--ant-color-primary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.2);
-}

 .mode-radio-group :deep(.ant-radio-button-wrapper-checked) {
  border-color: var(--ant-color-primary);
@@ -832,10 +821,6 @@ const handleToggleUserStatus = async (user: User) => {
  transition: all 0.3s ease;
 }

-.mode-content:hover {
-  border-color: var(--ant-color-primary);
-  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.2);
-}

 /* 模板选择弹窗样式 */
 .template-select-modal :deep(.ant-modal-content) {
@@ -885,11 +870,6 @@ const handleToggleUserStatus = async (user: User) => {
  background: var(--ant-color-bg-container);
 }

-.template-item:hover {
-  border-color: var(--ant-color-primary);
-  background: var(--ant-color-primary-bg);
-  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.2);
-}

 .template-item.selected {
  border-color: var(--ant-color-primary);
@@ -1012,23 +992,10 @@ const handleToggleUserStatus = async (user: User) => {
      0 1px 3px rgba(0, 0, 0, 0.4);
  }

-  .scripts-content:hover {
-    box-shadow:
-      0 8px 30px rgba(0, 0, 0, 0.4),
-      0 2px 6px rgba(0, 0, 0, 0.5);
-  }

  .add-button {
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
  }
-
-  .add-button:hover {
-    box-shadow: 0 6px 16px rgba(24, 144, 255, 0.5);
-  }
-
-  .refresh-button:hover {
-    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
-  }
 }

 /* 响应式设计 */
@@ -1193,10 +1160,6 @@ const handleToggleUserStatus = async (user: User) => {
  transition: all 0.2s ease;
 }

-.template-item:hover {
-  border-color: var(--ant-color-primary);
-  background: var(--ant-color-bg-container);
-}

 .template-item.selected {
  border-color: var(--ant-color-primary);
@@ -1214,18 +1177,6 @@ const handleToggleUserStatus = async (user: User) => {
  position: relative;
 }

-.template-icon-wrapper {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, var(--ant-color-primary), var(--ant-color-primary-hover));
-  border-radius: 16px;
-  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.2);
-  position: relative;
-  overflow: hidden;
-}

 .template-icon-wrapper::before {
  content: '';
--- a/frontend/src/views/UserEdit.vue
+++ b/frontend/src/views/UserEdit.vue
@@ -621,6 +621,24 @@
              <span class="switch-description">启用后将发送任务通知</span>
            </a-col>
          </a-row>
+          <!-- 发送统计/六星等可选通知 -->
+          <a-row :gutter="24" style="margin-top: 16px">
+            <a-col :span="6">
+              <span style="font-weight: 500">通知内容</span>
+            </a-col>
+            <a-col :span="18" style="display: flex; gap: 32px">
+              <a-checkbox
+                v-model:checked="formData.Notify.IfSendStatistic"
+                :disabled="loading || !formData.Notify.Enabled"
+              >发送统计
+              </a-checkbox>
+              <a-checkbox
+                v-model:checked="formData.Notify.IfSendSixStar"
+                :disabled="loading || !formData.Notify.Enabled"
+              >六星掉落推送
+              </a-checkbox>
+            </a-col>
+          </a-row>

          <!-- 邮件通知 -->
          <a-row :gutter="24" style="margin-top: 16px">
@@ -684,24 +702,7 @@
            </a-col>
          </a-row>

-          <!-- 发送统计/六星等可选通知 -->
-          <a-row :gutter="24" style="margin-top: 16px">
-            <a-col :span="6">
-              <span style="font-weight: 500">通知内容</span>
-            </a-col>
-            <a-col :span="18" style="display: flex; gap: 32px">
-              <a-checkbox
-                v-model:checked="formData.Notify.IfSendStatistic"
-                :disabled="loading || !formData.Notify.Enabled"
-                >发送统计
-              </a-checkbox>
-              <a-checkbox
-                v-model:checked="formData.Notify.IfSendSixStar"
-                :disabled="loading || !formData.Notify.Enabled"
-                >六星掉落推送
-              </a-checkbox>
-            </a-col>
-          </a-row>
+
        </a-card>
      </template>

@@ -836,7 +837,7 @@
            <a-col :span="12">
              <a-form-item name="scriptBeforeTask">
                <template #label>
-                  <a-tooltip title="任务执行前要运行的脚本路径或命令">
+                  <a-tooltip title="任务执行前要运行的脚本路径">
                    <span class="form-label">
                      任务前脚本
                      <QuestionCircleOutlined class="help-icon" />
@@ -845,7 +846,7 @@
                </template>
                <a-input
                  v-model:value="formData.Info.ScriptBeforeTask"
-                  placeholder="请输入脚本路径或命令"
+                  placeholder="请输入脚本路径"
                  :disabled="loading || !formData.Info.IfScriptBeforeTask"
                  size="large"
                />
@@ -854,7 +855,7 @@
            <a-col :span="12">
              <a-form-item name="scriptAfterTask">
                <template #label>
-                  <a-tooltip title="任务执行后要运行的脚本路径或命令">
+                  <a-tooltip title="任务执行后要运行的脚本路径">
                    <span class="form-label">
                      任务后脚本
                      <QuestionCircleOutlined class="help-icon" />
@@ -863,7 +864,7 @@
                </template>
                <a-input
                  v-model:value="formData.Info.ScriptAfterTask"
-                  placeholder="请输入脚本路径或命令"
+                  placeholder="请输入脚本路径"
                  :disabled="loading || !formData.Info.IfScriptAfterTask"
                  size="large"
                />
@@ -882,6 +883,19 @@
              <span class="switch-description">启用后将发送任务通知</span>
            </a-col>
          </a-row>
+          <!-- 发送统计等可选通知 -->
+          <a-row :gutter="24" style="margin-top: 16px">
+            <a-col :span="6">
+              <span style="font-weight: 500">通知内容</span>
+            </a-col>
+            <a-col :span="18">
+              <a-checkbox
+                v-model:checked="formData.Notify.IfSendStatistic"
+                :disabled="loading || !formData.Notify.Enabled"
+              >发送统计
+              </a-checkbox>
+            </a-col>
+          </a-row>

          <!-- 邮件通知 -->
          <a-row :gutter="24" style="margin-top: 16px">
@@ -945,19 +959,7 @@
            </a-col>
          </a-row>

-          <!-- 发送统计等可选通知 -->
-          <a-row :gutter="24" style="margin-top: 16px">
-            <a-col :span="6">
-              <span style="font-weight: 500">通知内容</span>
-            </a-col>
-            <a-col :span="18">
-              <a-checkbox
-                v-model:checked="formData.Notify.IfSendStatistic"
-                :disabled="loading || !formData.Notify.Enabled"
-                >发送统计
-              </a-checkbox>
-            </a-col>
-          </a-row>
+
        </a-card>
      </template>
    </a-form>