<template>
  <view class="admin-page file-login-container">
      <view class="login-card">
        <view class="login-header">
          <text class="login-title">文件管理登录</text>
        </view>
        <view class="login-form">
          <view class="form-item">
            <input 
              class="login-input" 
              type="password" 
              v-model="password" 
              placeholder="请输入密码" 
            />
          </view>
          <view class="form-tip">
            提示：密码配置在 /config/filesystem.php 文件中修改 'password' => '密码'
          </view>
          <button class="login-btn" @click="handleLogin">登录</button>
        </view>
      </view>
      
      <!-- 底部备案/版本信息 (1:1 复刻 CRMEB) -->
      <view class="login-footer">
        <view class="footer-links">
          <text class="footer-link">官网</text>
          <text class="footer-link">社区</text>
          <text class="footer-link">文档</text>
        </view>
        <view class="copyright">
          Copyright © 2014-2025 CRMEB-BZ v5.6.4
        </view>
      </view>
    </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const password = ref('')

const handleLogin = () => {
  if (!password.value) {
    uni.showToast({ title: '请输入密码', icon: 'none' })
    return
  }
  uni.showLoading({ title: '正在登录...' })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '登录成功(演示)' })
  }, 1000)
}
</script>

<style scoped>
.admin-page {
  /* 使用 Layout 的背景和内边距 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
}

.login-card {
  width: 400px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  padding: 40px;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-title {
  font-size: 28px;
  color: #1890ff;
  font-weight: 500;
}

.login-form {
  display: flex;
  flex-direction: column;
}

.form-item {
  margin-bottom: 20px;
}

.login-input {
  width: 100%;
  height: 40px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 15px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-bottom: 20px;
  text-align: center;
}

.login-btn {
  width: 120px;
  height: 40px;
  line-height: 40px;
  background-color: #1890ff;
  color: #fff;
  font-size: 14px;
  align-self: center;
  border-radius: 4px;
  border: none;
}

.login-footer {
  margin-top: 50px;
  text-align: center;
}

.footer-links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}

.footer-link {
  font-size: 14px;
  color: #606266;
}

.copyright {
  font-size: 14px;
  color: #909399;
}
</style>
