diff --git a/src/views/OnlyOffice/index.vue b/src/views/OnlyOffice/index.vue
new file mode 100644
index 0000000..bf6a35d
--- /dev/null
+++ b/src/views/OnlyOffice/index.vue
@@ -0,0 +1,141 @@
+<template>
+  <div id="app22">
+    <el-card>
+      <!-- 搜索 添加 -->
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <input type="file" ref="myfile"/>
+          <el-button @click="upload" type="success" size="mini" icon="el-icon-upload2">上传文件</el-button>
+        </el-col>
+      </el-row>
+<!--       用户列表区域-->
+      <el-table :data="fileList" border stripe>
+        <!-- stripe: 斑马条纹
+        border：边框-->
+        <el-table-column type="index" label="#"/>
+        <el-table-column prop="file_name" label="文件名称"/>
+        <el-table-column label="操作">
+          <template v-slot="scope">
+            <el-button
+              type="primary"
+              icon="el-icon-edit"
+              size="mini"
+              circle
+              @click="edit(scope.row)"
+            >编辑</el-button>
+            <el-button
+              type="danger"
+              icon="el-icon-delete"
+              size="mini"
+              circle
+              @click="review(scope.row)"
+            >预览</el-button>
+            <el-button
+              type="danger"
+              icon="el-icon-delete"
+              size="mini"
+              circle
+              @click="download(scope.row)"
+            >下载</el-button>
+            </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import axios from 'axios';
+import { getAccessToken } from '@/utils/auth'
+import {onlyofApi} from "@/api/only/only";
+
+// 定义响应式数据
+const fileList = ref([]);
+const myfile = ref(null);
+
+// 获取文件列表
+const getFileList = async () => {
+  console.log("123456789")
+  try {
+    const response = await axios.get('http://192.168.1.3:20053/filelist');
+    console.log("response",response)
+    fileList.value = response.data;
+  } catch (error) {
+    console.error('Failed to fetch file list:', error);
+  }
+};
+
+// 上传文件
+const upload = async () => {
+  const fileInput = myfile.value;
+  const file = fileInput.files[0];
+  console.log("222",file)
+  const formData = new FormData();
+  const token = getAccessToken();
+  console.log("token",token)
+  const configs = {
+    headers: { 'Authorization': `Bearer ${token}`,'Content-Type': 'multipart/form-data' }
+  }
+  formData.append('file', file);
+  console.log("6789",formData)
+
+  try {
+    // const response = await axios.post('http://192.168.1.3:48080/upload', formData, configs);
+    const response = await axios.post('http://192.168.1.3:48080/admin-api/only/onlyof/update', formData, configs);
+    // const response = await onlyofApi.uploadFile(file)
+    console.log(response);
+  } catch (error) {
+    console.error('Upload failed:', error);
+  }
+};
+
+const editvo = ({
+  name:'',
+  username:'',
+  userid:''
+})
+// 编辑文件
+const edit = async (row) => {
+  const token = getAccessToken();
+  console.log("row", token)
+  editvo.name=row.file_name
+  editvo.username="admin"
+  editvo.userid="1"
+  console.log("editvo", editvo)
+  // const response = await onlyofApi.getonlyofedit(editvo);
+  window.open(`http://192.168.1.3:48080/admin-api/only/onlyof/edit?name=${row.file_name}&userName=admin&userId=1&token=${token} `);
+};
+
+// 查看文件
+const review = (row) => {
+  // Implement review functionality here
+};
+
+// 下载文件
+const download = async (row) => {
+  try {
+    const response = await axios.get(`http://192.168.1.3:20053/editStatus?name=${row.file_name}`);
+    if (response.data.error === 0) {
+      alert('文档正在编辑，5秒后开始下载最新版！');
+      setTimeout(() => {
+        window.location.href = `http://192.168.1.3:20053/download?name=v1${row.file_name}`;
+      }, 5000);
+    } else {
+      alert('文档未编辑，开始下载！');
+      window.location.href = `http://192.168.0.58:20053/download?name=${row.file_name}`;
+    }
+  } catch (error) {
+    console.error('Download failed:', error);
+  }
+};
+
+// 生命周期钩子
+onMounted(() => {
+  getFileList();
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>